diff --git a/Gulpfile.js b/Gulpfile.js
index 936075cc..553197d9 100644
--- a/Gulpfile.js
+++ b/Gulpfile.js
@@ -32,7 +32,7 @@ gulp.task('js', function(){
 gulp.task('sass', function () {
   return gulp.src('src/**/*.scss')
     .pipe(cached('styles'))
-    .pipe(sass())
+    .pipe(sass().on('error', sass.logError))
     .pipe(autoprefixer())
     .pipe(remember('styles'))
     .pipe(concat('all.css'))
diff --git a/src/modals/new-snippet-editor.scss b/src/modals/new-snippet-editor.scss
index 4faa7b04..cc833a6e 100644
--- a/src/modals/new-snippet-editor.scss
+++ b/src/modals/new-snippet-editor.scss
@@ -3,7 +3,7 @@
 $editor-border-color: $border-color;
 
 .new-snippet-modal{
-  
+
   .ace_editor {
     height: 200px;
     border: solid 1px $editor-border-color;
diff --git a/src/services/snippet.js b/src/services/snippet.js
index 6468262a..3ea16ca0 100644
--- a/src/services/snippet.js
+++ b/src/services/snippet.js
@@ -16,8 +16,15 @@ angular.module('codexen.services')
       return $http.post(url, params)
     }
 
+    var show = function (id) {
+      var url = apiUrl + 'snippets/' + id
+
+      return $http.get(url)
+    }
+
     return {
       findByUser: findByUser,
-      create: create
+      create: create,
+      show: show
     }
   })
diff --git a/src/states/clips/list.js b/src/states/clips/list.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/states/home/home.tpl.html b/src/states/home/home.tpl.html
index a22d1c45..007d21cb 100644
--- a/src/states/home/home.tpl.html
+++ b/src/states/home/home.tpl.html
@@ -1,5 +1,5 @@
 <div class="home-state">
-  <h1 class="jumbotron">Codexen App, v0.1 (breakthru)</h1>
+  <h1 class="jumbotron">Codexen App <small>v0.1(breakthru)</small></h1>
   <p>
     App for Code snippets<br>
 
diff --git a/src/states/snippets/detail.js b/src/states/snippets/detail.js
new file mode 100644
index 00000000..b78b4b35
--- /dev/null
+++ b/src/states/snippets/detail.js
@@ -0,0 +1,15 @@
+/* global angular */
+angular.module('codexen.states')
+  .controller('SnippetsDetailController', function (Snippet, $state) {
+    var vm = this
+
+    vm.isLoaded = false
+
+    var snippetId = $state.params.id
+
+    Snippet.show(snippetId)
+      .success(function (data) {
+        vm.snippet = data.snippet
+        vm.isLoaded = true
+      })
+  })
diff --git a/src/states/snippets/detail.tpl.html b/src/states/snippets/detail.tpl.html
new file mode 100644
index 00000000..1758aaa4
--- /dev/null
+++ b/src/states/snippets/detail.tpl.html
@@ -0,0 +1,33 @@
+<div class="snippets-detail-state">
+
+  <div class="detail-header">
+    <span class="detail-header-title">
+      <small>Title : </small> 
+      <span ng-bind="vm.snippet.title"></span></span>
+    <span class="detail-header-control pull-right">
+      <button type="button" name="button" class="btn btn-default"><i class="fa fa-share"></i></button>
+      <button type="button" name="button" class="btn btn-default"><i class="fa fa-edit"></i></button>
+      <button type="button" name="button" class="btn btn-danger"><i class="fa fa-trash"></i></button>
+    </span>
+  </div>
+
+  <div class="detail-body">
+
+    <div ng-if="!vm.isLoaded" class="">
+      Loadding
+    </div>
+
+    <div ng-if="vm.isLoaded" class="">
+      <p>
+        <span ng-repeat="tag in vm.snippet.tags" ng-bind="tag.name"></span>
+      </p>
+      <label>Description</label>
+      <p ng-bind="vm.snippet.description"></p>
+      <label>Content</label>
+      <div ui-ace="{
+        readonly: true,
+        showGutter: false
+      }" ng-model="vm.snippet.content"></div>
+    </div>
+  </div>
+</div>
diff --git a/src/states/snippets/list.tpl.html b/src/states/snippets/list.tpl.html
index 05c5cf5f..81ca21f8 100644
--- a/src/states/snippets/list.tpl.html
+++ b/src/states/snippets/list.tpl.html
@@ -23,7 +23,7 @@
         <a ui-sref="auth.signin" class="btn btn-default"><i class="fa fa-signin"></i> Sign In</a>
       </li>
 
-      <li ng-repeat="snippet in vm.snippets">
+      <li ng-repeat="snippet in vm.snippets" ui-sref="snippets.detail({id:snippet._id})">
         <div class="media">
           <div class="media-left">
             <img width="25" height="25" src="http://www.gravatar.com/avatar/ea0b6ad1c11700120d1af08810caa19d" alt="" />
@@ -42,9 +42,10 @@
   </div>
 
   <div class="right-pane">
-    <div class="">
-
+    <div ng-if="'snippets'|isState">
+      No snippet selected.
     </div>
+    <div ui-view></div>
   </div>
 
 
diff --git a/src/states/snippets/snippets.scss b/src/states/snippets/snippets.scss
index ec41c0ca..45e8c7f9 100644
--- a/src/states/snippets/snippets.scss
+++ b/src/states/snippets/snippets.scss
@@ -49,3 +49,29 @@ $snippet-list-item-hover-bg: #EEE;
     right: 0;
   }
 }
+
+.snippets-detail-state{
+  .detail-header{
+    padding: 5px 10px;
+    height: 50px;
+    border-bottom: solid 1px $border-color;
+    .detail-header-title{
+      small{
+        font-size: 0.6em;
+      }
+      line-height: 40px;
+      font-size: 1.2em;
+    }
+    .detail-header-control{
+      padding:3px;
+    }
+  }
+  .detail-body{
+    padding: 5px 10px;
+    .ace_editor {
+      height: 500px;
+      border: solid 1px $border-color;
+      border-radius: 5px;
+    }
+  }
+}