diff --git a/app/controllers/asciicasts_controller.rb b/app/controllers/asciicasts_controller.rb
index 7eb8c9e..783e707 100644
--- a/app/controllers/asciicasts_controller.rb
+++ b/app/controllers/asciicasts_controller.rb
@@ -1,6 +1,10 @@
 class AsciicastsController < ApplicationController
 
   def index
+    @asciicasts = Asciicast.order("created_at DESC")
+  end
+
+  def show
     @asciicast = Asciicast.find(params[:id])
   end
 
diff --git a/app/helpers/asciicasts_helper.rb b/app/helpers/asciicasts_helper.rb
index 5e020d9..c5adf85 100644
--- a/app/helpers/asciicasts_helper.rb
+++ b/app/helpers/asciicasts_helper.rb
@@ -1,2 +1,25 @@
 module AsciicastsHelper
+
+  def player_data(asciicast)
+    data = File.read(asciicast.stdout.path).split("\n", 2)[1]
+    time = File.read(asciicast.stdout_timing.path)
+
+    data_hex_array = data.bytes.map { |b| '\x' + format('%02x', b) }
+    var_data = "'#{data_hex_array.join}'"
+
+    time_lines = time.lines.map do |line|
+      delay, n = line.split
+      "[#{delay.to_f}, #{n.to_i}]"
+    end
+    var_time = "[#{time_lines.join(',')}]"
+
+    out = "<script>\n"
+    out << "var data = #{var_data};\n"
+    out << "var time = #{j var_time};\n"
+    out << "var cols = #{asciicast.terminal_columns};\n"
+    out << "var lines = #{asciicast.terminal_lines};\n"
+    out << "</script>"
+    out.html_safe
+  end
+
 end
diff --git a/app/views/asciicasts/index.html.erb b/app/views/asciicasts/index.html.erb
new file mode 100644
index 0000000..c6b82e3
--- /dev/null
+++ b/app/views/asciicasts/index.html.erb
@@ -0,0 +1,9 @@
+<h2>Some title</h2>
+
+<ul class="asciicasts">
+  <% @asciicasts.each do |asciicast| %>
+    <li class="asciicast">
+      <a href="/<%= asciicast.id %>"><%= asciicast.id %></a>
+    </li>
+  <% end %>
+</ul>
diff --git a/app/views/asciicasts/show.html.erb b/app/views/asciicasts/show.html.erb
new file mode 100644
index 0000000..9679b68
--- /dev/null
+++ b/app/views/asciicasts/show.html.erb
@@ -0,0 +1,16 @@
+<h2>Becoming more productive with Vim (<%= @asciicast.id %>)</h2>
+
+<div class="asciicast">
+  <div class="player">
+    <pre class="term"></pre>
+    <div class="hud">--------------========</div>
+  </div>
+  <div class="clear"></div>
+</div>
+
+<div class="description">
+  <p>I’ve been doing some reflecting this week on how I can work smarter (instead of harder), and one of the things I came up with was adding a few more tools to my Vim repertoire. I spend more than half of my engineering time in Vim (the other half usually being in a web browser), so I figured that a few minutes here and there would eventually add up in a big way.</p>
+  <p>But like anything else with Vim, there are always multiple ways of accomplishing the very same thing, so I make no guarantees that there aren’t simpler ways of getting this done — but I can say that this way gets the job done, and is pretty easy to get working on your own system.</p>
+</div>
+
+<%= player_data(@asciicast) %>
diff --git a/config.ru b/config.ru
index b0c05bc..607839c 100644
--- a/config.ru
+++ b/config.ru
@@ -1,4 +1,4 @@
 # This file is used by Rack-based servers to start the application.
 
 require ::File.expand_path('../config/environment',  __FILE__)
-run T3rminalTv::Application
+run AsciiIo::Application
diff --git a/config/routes.rb b/config/routes.rb
index 67f8d33..3d8f017 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -1,5 +1,6 @@
 AsciiIo::Application.routes.draw do
   resources :asciicasts
+  match ':id' => 'asciicasts#show', :constraints => { :id => /\d+/ }
 
   # The priority is based upon order of creation:
   # first created -> highest priority.