diff --git a/app.js b/app.js
index ecce6a19e6..6e5fefd8db 100644
--- a/app.js
+++ b/app.js
@@ -303,17 +303,22 @@ app.get(
 );
 
 app.post(
-    '/stories/comment/submit',
+    '/stories/comment/',
     storyController.commentSubmit
 );
 
+app.post(
+    '/stories/comment/:id/comment',
+    storyController.commentOnCommentSubmit
+);
+
 app.get(
     '/stories/submit',
     storyController.submitNew
 );
 
 app.post(
-    '/stories/submit',
+    '/stories/',
     storyController.storySubmission
 );
 
diff --git a/controllers/story.js b/controllers/story.js
index 3fb24bfe8f..4c4fad5dbb 100644
--- a/controllers/story.js
+++ b/controllers/story.js
@@ -183,28 +183,53 @@ exports.commentSubmit = function(req, res, next) {
         rank: 0,
         upvotes: 0,
         author: data.author,
-        comments: []
+        comments: [],
+        topLevel: true
     });
+    commentSave(comment, Story, res);
+};
 
+exports.commentOnCommentSubmit = function(req, res, next) {
+    var idToFind = req.params.id;
+    debug('idToFind', idToFind);
+    var data = req.body.data;
+    var comment = new Comment({
+        associatedPost: data.associatedPost,
+        body: data.body,
+        rank: 0,
+        upvotes: 0,
+        author: data.author,
+        comments: [],
+        topLevel: false
+    });
+    commentSave(comment, Comment, res);
+};
+
+function commentSave(comment, Context, res) {
     comment.save(function(err, data) {
         if (err) {
             return res.status(500);
         }
         debug('this is data from save', data);
-        Story.find({'_id': comment.associatedPost}, function(err, associatedStory) {
-            if (err) {
-                return res.status(500);
-            }
-            associatedStory = associatedStory.pop();
-            if (associatedStory) {
-                associatedStory.comments.push(data._id);
-                associatedStory.save(function(err, data) {
-                    if (err) {
-                        res.status(500);
-                    }
-                    res.send(true);
-                });
-            }
-        });
+        try {
+            Context.find({'_id': comment.associatedPost}, function (err, associatedStory) {
+                if (err) {
+                    return res.status(500);
+                }
+                associatedStory = associatedStory.pop();
+                if (associatedStory) {
+                    associatedStory.comments.push(data._id);
+                    associatedStory.save(function (err, data) {
+                        if (err) {
+                            res.status(500);
+                        }
+                        res.send(true);
+                    });
+                }
+            });
+        } catch (e) {
+            // delete comment
+            return res.status(500);
+        }
     });
-};
+}
diff --git a/models/Comment.js b/models/Comment.js
index 9206b6ed75..8af4aaefcf 100644
--- a/models/Comment.js
+++ b/models/Comment.js
@@ -22,6 +22,10 @@ var commentSchema = new mongoose.Schema({
     comments: {
         type: Array,
         default: []
+    },
+    toplevel: {
+        type: Boolean,
+        default: false
     }
 });
 
diff --git a/public/js/main.js b/public/js/main.js
index 6d50db7742..04e8ee4769 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -158,7 +158,7 @@ $(document).ready(function() {
             upVotedByUsername: user.profile.username
         };
         $('#story-submit').unbind('click');
-        $.post('/stories/submit',
+        $.post('/stories/',
             {
                 data: {
                     link: link,
@@ -192,7 +192,7 @@ $(document).ready(function() {
         var data = $('#comment-box').val();
 
         $('#comment-button').unbind('click');
-        $.post('/stories/comment/submit',
+        $.post('/stories/comment/',
             {
                 data: {
                     associatedPost: storyId,
diff --git a/seed_data/comments.json b/seed_data/comments.json
index 5f4b1efc37..11fa35aa87 100644
--- a/seed_data/comments.json
+++ b/seed_data/comments.json
@@ -9,6 +9,7 @@
       "picture": "https://thedrinkingtraveler.files.wordpress.com/2015/02/24127-funny-grumpy-cat-memesvery-bad-morning-meme-0rlh4r5c-wallpaper-1024x1024.jpg",
       "id" : "ade671aa0756dc61bd485f45"
     },
-    "comments": []
+    "comments": [],
+    "topLevel": true
   }
 ]
\ No newline at end of file
diff --git a/views/stories/comments.jade b/views/stories/comments.jade
index 3448323035..d8523b8fa2 100644
--- a/views/stories/comments.jade
+++ b/views/stories/comments.jade
@@ -1,85 +1,124 @@
-p.text-left
+.text-left
     div#comment-list.comment-list
 
         script(src="https://cdn.jsdelivr.net/ramda/0.10.0/ramda.min.js")
         script(src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js")
         script.
             var sentinel = 0;
-            var commentDetails;
-            R.forEach(function displayComments(comment) {
-                console.log('this is the comment id', comment);
-                $.ajax({
-                    type: 'GET',
-                    url: '/stories/comments/' + comment,
-                    error: function(xhr, textStatus, errorThrown) {
-                        console.log('got error');
-                        commentDetails = {
-                            error: true,
-                            body: 'There seems to be a problem fetching this comment.'
+            var renderComments = function renderComments(comments, containerSelector, level) {
+                var commentDetails;
+                var offSetClass = level ? 'col-xs-offset-' + level : '';
+                var rowClass = level ? 'col-xs-' + (12 - level) : 'col-xs-12';
+                R.forEach(function displayComments(comment) {
+                    $.ajax({
+                        type: 'GET',
+                        url: '/stories/comments/' + comment,
+                        error: function (xhr, textStatus, errorThrown) {
+                            console.log('got error');
+                            commentDetails = {
+                                error: true,
+                                body: 'There seems to be a problem fetching this comment.'
+                            }
+                        },
+                        success: function (data, textStatus, xhr) {
+                            commentDetails = data;
+                            var div = document.createElement('div');
+                            $(div)
+                                    .html(
+                                    "<div class='col-xs-2 text-center'>" +
+                                    "<div class='row'>" +
+                                    "<div class='col-xs-12'>" +
+                                    "<h3 class='negative-5'>" +
+                                    commentDetails.rank +
+                                    "</h3>" +
+                                    "</div>" +
+                                    "</div>" +
+                                    "</div>" +
+                                    "<div class='col-xs-1'>" +
+                                    "<img class='img-responsive' src=" + commentDetails.author.picture + "></img>" +
+                                    "</div>" +
+                                    "<div class='col-xs-8'>" +
+                                    "<div class='row'>" +
+                                    "<div class='col-xs-12'>" +
+                                    commentDetails.body +
+                                    "</div>" +
+                                    "</div>" +
+                                    "<div class='row'>" +
+                                    "<h6>" +
+                                    "<div class='col-xs-12 negative-15'>" +
+                                    "commented " + moment(commentDetails.commentedOn).fromNow() + " by " +
+                                    "<a href='/" + commentDetails.author.username + "'>@" + commentDetails.author.username + "</a>" +
+                                    "</div>" +
+                                    "</h6>" +
+                                    "</div>" +
+                                    "<div class='row'>" +
+                                    "<div class='col-xs-6 comment-a-comment'>" +
+                                    "<button id='" + commentDetails._id + "'>This is the world's best button</button>" +
+                                    "</div>" +
+                                    "</div>" +
+                                    "</div>"
+                            )
+                                    .addClass('comment row ' + offSetClass + ' ' + rowClass + ' comment_' + commentDetails._id)
+                                    .appendTo($(containerSelector));
+
+                            sentinel += commentDetails.comments.length;
+
+                            renderComments(commentDetails.comments, '.comment_' + commentDetails._id, ++level);
+
+                        },
+                        complete: function () {
+                            sentinel--;
+                            if (!sentinel) {
+                                console.log('Binding click handler');
+                                $('.comment-a-comment').on('click', 'button', function () {
+                                    $(this).attr('disabled', 'disabled');
+                                    console.log('Unbinding click handler');
+
+                                    var div = document.createElement('div');
+                                    var commentId = $(this).attr('id');
+                                    $(div).html(
+                                            "<textarea id='comment-to-comment-textarea'></textarea>" +
+                                            "<button id='submit-comment-to-comment'>Submit it sucka</button>"
+                                    )
+                                            .addClass('col-xs-6 col-xs-offset-3')
+                                            .appendTo($(this).closest('.comment'));
+                                    var submitCommentToCommentHandler = function submitCommentToCommentHandler() {
+                                        $('#submit-comment-to-comment').unbind('click');
+                                        $.post('/stories/comment/' + commentId + '/comment',
+                                                {
+                                                    data: {
+                                                        associatedPost: commentId,
+                                                        body: $('#comment-to-comment-textarea').val(),
+                                                        author: {
+                                                            picture: user.profile.picture,
+                                                            userId: user._id,
+                                                            username: user.profile.username
+                                                        }
+                                                    }
+                                                })
+                                                .fail(function (xhr, textStatus, errorThrown) {
+                                                    $('#submit-comment-to-comment').bind('click', submitCommentToCommentHandler);
+                                                })
+                                                .done(function (data, textStatus, xhr) {
+                                                    //window.location = '/stories/' + JSON.parse(data).storyLink;
+                                                });
+
+                                    };
+
+                                    $('#submit-comment-to-comment').on('click', submitCommentToCommentHandler);
+                                });//
+                            }
                         }
-                    },
-                    success: function (data, textStatus, xhr) {
-                        console.log(data);
-                        commentDetails = data;
-                        var div = document.createElement('div');
-                        $(div)
-                                .html("<p>" +
-                                        "<div class='row col-xs-12'>" +
-                                            "<div class='col-xs-2 text-center'>" +
-                                                "<div class='row'>" +
-                                                    "<div class='col-xs-12'>" +
-                                                        "<h3 class='negative-5'>" +
-                                                            commentDetails.rank +
-                                                        "</h3>" +
-                                                    "</div>" +
-                                                "</div>" +
-                                            "</div>" +
-                                            "<div class='col-xs-1'>" +
-                                                "<img class='img-responsive' src=" + commentDetails.author.picture + "></img>" +
-                                            "</div>" +
-                                            "<div class='col-xs-8'>" +
-                                                "<div class='row'>" +
-                                                    "<div class='col-xs-12'>" +
-                                                        commentDetails.body +
-                                                    "</div>" +
-                                                "</div>" +
-                                                "<div class='row'>" +
-                                                    "<h6>" +
-                                                    "<div class='col-xs-12 negative-15'>" +
-                                                        "commented " + moment(commentDetails.commentedOn).fromNow() + " by " +
-                                                        "<a href='/" + commentDetails.author.username + "'>@" + commentDetails.author.username + "</a>" +
-                                                    "</div>" +
-                                                    "</h6>" +
-                                                "</div>" +
-                                                "<div class='row'>" +
-                                                    "<div class='col-xs-6 comment-a-comment'>" +
-                                                        "<button id='" + commentDetails._id +"'>This is the world's best button</button>" +
-                                                    "</div>" +
-                                                "</div>" +
-                                            "</div>" +
-                                        "</div>" +
-                                    "</p>" +
-                                "</div>")
-                                .appendTo($('#comment-list'));
-
-                    },
-                    complete: function() {
-                        sentinel++;
-                        console.log(sentinel, comments.length);
-                        if (sentinel < comments.length) {
-                            return;
-                        }
-                        $('.comment-a-comment').on('click', 'button', function() {
-                            console.log('clicked');
-                            console.log($(this));
-                        });
-                    }
+                    })
 
 
-                })
+                }, comments);
+            }
+            sentinel += comments.length;
+
+            renderComments(comments, $('#comment-list'), 0);
+
 
-
-            }, comments);