diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 48d6aac..2715d52 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -8,6 +8,7 @@
 //= require jquery_ujs
 //= require vendor/underscore-min
 //= require vendor/backbone-min
+//= require handlebars.runtime
 //= require backbone/ascii_io
 //= require player/player
 //= require_tree .
diff --git a/app/assets/javascripts/backbone/ascii_io.js.coffee b/app/assets/javascripts/backbone/ascii_io.js.coffee
index 5ff7d73..ab259c8 100644
--- a/app/assets/javascripts/backbone/ascii_io.js.coffee
+++ b/app/assets/javascripts/backbone/ascii_io.js.coffee
@@ -8,4 +8,4 @@ window.AsciiIo =
   Models: {}
   Collections: {}
   Routers: {}
-  Views: {}
\ No newline at end of file
+  Views: {}
diff --git a/app/assets/javascripts/backbone/models/comment.js.coffee b/app/assets/javascripts/backbone/models/comment.js.coffee
new file mode 100644
index 0000000..f15a1cd
--- /dev/null
+++ b/app/assets/javascripts/backbone/models/comment.js.coffee
@@ -0,0 +1,6 @@
+class AsciiIo.Models.Comment extends Backbone.Model
+
+class AsciiIo.Collections.Comments extends Backbone.Collection
+  model: AsciiIo.Models.Comment
+
+  url: '/api/asciicasts/1/comments.json'
diff --git a/app/assets/javascripts/backbone/templates/comments/index.jst.hbs b/app/assets/javascripts/backbone/templates/comments/index.jst.hbs
new file mode 100644
index 0000000..7936076
--- /dev/null
+++ b/app/assets/javascripts/backbone/templates/comments/index.jst.hbs
@@ -0,0 +1,10 @@
+<ul class="comments">
+</ul>
+
+<form id="new-comment">
+  <p>
+    <textarea type="text" name="body" id="comment-body"></textarea>
+  </p>
+
+  <input type="submit" value="Post">
+</form>
diff --git a/app/assets/javascripts/backbone/templates/comments/show.jst.hbs b/app/assets/javascripts/backbone/templates/comments/show.jst.hbs
new file mode 100644
index 0000000..b8df7fa
--- /dev/null
+++ b/app/assets/javascripts/backbone/templates/comments/show.jst.hbs
@@ -0,0 +1,13 @@
+<div class="left">
+  <a href="#"><img src="{{user.avatar_url}}" alt="{{user.nickanme}}" class="avatar" /></a>
+</div>
+
+<div class="right">
+  <div>
+    <span class="user-name">{{user.nickname}}</span>
+    <span class="when">{{created}}</span>
+  </div>
+  <div class="body">{{body}}</div>
+</div>
+
+<div class="clear"></div>
diff --git a/app/assets/javascripts/backbone/views/comments/comment_entry.js.coffee b/app/assets/javascripts/backbone/views/comments/comment_entry.js.coffee
new file mode 100644
index 0000000..fddaa03
--- /dev/null
+++ b/app/assets/javascripts/backbone/views/comments/comment_entry.js.coffee
@@ -0,0 +1,10 @@
+class AsciiIo.Views.CommentEntry extends Backbone.View
+
+  template: JST['backbone/templates/comments/show']
+  tagName: 'li'
+  className: 'comment'
+
+  render: ->
+    $(@el).html(@template(@model.toJSON()))
+
+    this
diff --git a/app/assets/javascripts/backbone/views/comments/comments_index.js.coffee b/app/assets/javascripts/backbone/views/comments/comments_index.js.coffee
new file mode 100644
index 0000000..c038290
--- /dev/null
+++ b/app/assets/javascripts/backbone/views/comments/comments_index.js.coffee
@@ -0,0 +1,35 @@
+class AsciiIo.Views.CommentsIndex extends Backbone.View
+
+  el: '#comments'
+  template: JST['backbone/templates/comments/index']
+
+  events:
+    'submit #new-comment': 'createComment'
+
+  initialize: ->
+    @collection.on('reset', @render, this)
+    @collection.on('add', @render, this)
+
+  render: ->
+    $(@el).html @template
+    $comments = this.$('.comments')
+
+    @collection.each (comment) ->
+      view = new AsciiIo.Views.CommentEntry({ model: comment, collection: @collection})
+      $comments.append view.render().el
+
+    this
+
+  createComment: (event) ->
+    event.preventDefault()
+    attrs = body: $('#comment-body').val()
+    @collection.create attrs,
+      wait: true
+      success: -> $('#new-comment')[0].reset()
+      error: @handleError
+
+  handleError: (comment, response) ->
+    if response.status == 422
+      errors  = $.parseJSON(response.responseText).errors
+      for attribute, messages of errors
+        alert "#{attribute} #{message}" for message in messages
diff --git a/app/assets/javascripts/player/namespace.js b/app/assets/javascripts/player/namespace.js
index 8c69ffb..160df36 100644
--- a/app/assets/javascripts/player/namespace.js
+++ b/app/assets/javascripts/player/namespace.js
@@ -1 +1,3 @@
-window.AsciiIo = {};
+if (!window.AsciiIo){
+  window.AsciiIo = {};
+}
diff --git a/app/assets/stylesheets/comments.css.scss b/app/assets/stylesheets/comments.css.scss
new file mode 100644
index 0000000..d4e6e89
--- /dev/null
+++ b/app/assets/stylesheets/comments.css.scss
@@ -0,0 +1,38 @@
+#comments { }
+.comments { }
+
+#new-comment {
+  padding: 10px;
+
+  textarea{
+    width: 350px;
+    height: 60px;
+  }
+}
+
+li.comment {
+  list-style-type: none;
+  margin: 20px 10px;
+
+  width: 450px;
+  .left {
+    float: left;
+    width: 100px;
+  }
+
+  .right {
+    float:right;
+    width: 350px;
+  }
+
+  .when {
+    color: #969696;
+  }
+
+  .user-name{
+    color: #2786C2;
+  }
+  .body {
+    padding: 20px 0;
+  }
+}
diff --git a/app/views/asciicasts/show.html.erb b/app/views/asciicasts/show.html.erb
index 2ca69ea..5a1d201 100644
--- a/app/views/asciicasts/show.html.erb
+++ b/app/views/asciicasts/show.html.erb
@@ -14,3 +14,21 @@
 </div>
 
 <%= player_script(@asciicast) %>
+
+<h2>Comments</h2>
+
+<div id="comments"></div>
+
+<%= player_data(@asciicast) %>
+
+<script type="text/javascript">
+  jQuery(document).ready( function(){
+    var comments = new AsciiIo.Collections.Comments();
+    var asciicast_id = <%= @asciicast.id %>
+
+    comments.url = ['/api/asciicasts/', asciicast_id, '/comments.json'].join('');
+    comments.fetch();
+
+    view = new AsciiIo.Views.CommentsIndex({ collection: comments });
+  })
+</script>