diff --git a/Rules b/Rules
index 2b3040d..2aa50f8 100644
--- a/Rules
+++ b/Rules
@@ -4,11 +4,25 @@ compile '/' do
   layout 'listing'
 end
 
+compile '/articles/', :rep => :json do
+  filter :erb
+end
+compile '/articles/' do
+  layout 'articles'
+end
+
 compile '*' do
   filter :rdiscount
   layout 'default'
 end
 
+route '/articles/', :rep => :json do
+  item.identifier + 'index.json'
+end
+route '/articles/' do
+  item.identifier + 'index.html'
+end
+
 route '*' do
   item.identifier + 'index.html'
 end
diff --git a/content/articles.json b/content/articles.json
new file mode 100644
index 0000000..ce6e07f
--- /dev/null
+++ b/content/articles.json
@@ -0,0 +1,7 @@
+<%
+  articles = []
+  sorted_articles.each do |article|
+    articles << { :title => article[:title] }
+  end
+%>
+<%= articles.to_json %>
\ No newline at end of file
diff --git a/content/articles.yaml b/content/articles.yaml
new file mode 100644
index 0000000..36c1c5f
--- /dev/null
+++ b/content/articles.yaml
@@ -0,0 +1,2 @@
+--- 
+title: Articles
diff --git a/layouts/articles.html b/layouts/articles.html
new file mode 100644
index 0000000..7b99c55
--- /dev/null
+++ b/layouts/articles.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+  <title><%= @item[:title] %></title>
+  <link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen,projector" />
+  <link rel="stylesheet" href="/css/style.css" type="text/css" media="screen,projector" />
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
+  <script src="/js/script.js" type="text/javascript"></script>
+  <script type="text/javascript">
+    var articles;
+    jQuery(function() {
+      // load JSON
+      // get( url, [data], [callback], [type] )
+      jQuery.get('/articles/index.json', {}, function(data) {
+        articles = data;
+        console.log(data);
+      }, 'json');
+    });
+  </script>
+</head>
+<body>
+  <%= render 'header' %>
+  <div id="main">
+    <h1><%= @item[:title] %></h1>
+    <ul class="articles">
+    <% sorted_articles[0..9].each do |article| %>
+      <% post_date = WezM::Helpers.post_date(article) %>
+      <li>
+        <abbr class="calender date" title="<%= post_date.iso8601 %>">
+          <span class="day"><%= post_date.day %></span>
+          <span class="month"><%= post_date.strftime('%b') %></span>
+          <span class="year"><%= post_date.year %></span>
+        </abbr>
+        <a href="<%= article.reps.first.path %>"><%= article[:title] %></a>
+      </li>
+    <% end %>
+    </ul>
+    
+    <div class="pagination">
+      <a href="">&laquo; Newer</a>
+      |
+      <a href="">Older &raquo;</a>
+    </div>
+  </div>
+  <%= render 'footer' %>
+</body>
+</html>
diff --git a/layouts/articles.yaml b/layouts/articles.yaml
new file mode 100644
index 0000000..20670d5
--- /dev/null
+++ b/layouts/articles.yaml
@@ -0,0 +1,2 @@
+--- {}
+
diff --git a/lib/default.rb b/lib/default.rb
index df666ab..0d5ae7d 100644
--- a/lib/default.rb
+++ b/lib/default.rb
@@ -1,4 +1,7 @@
 # All files in the 'lib' directory will be loaded
 # before nanoc starts compiling.
+
+require 'json'
+
 include Nanoc3::Helpers::Rendering
 include Nanoc3::Helpers::Blogging
\ No newline at end of file
