diff --git a/app/styles/docs/components.sass b/app/styles/docs/components.sass
index 9283eda41..145a9dfa5 100644
--- a/app/styles/docs/components.sass
+++ b/app/styles/docs/components.sass
@@ -26,3 +26,6 @@
 
       .doc-description
         list-style-type: none
+
+      .codeBlock
+        list-style-type: none
\ No newline at end of file
diff --git a/app/templates/docs/components.jade b/app/templates/docs/components.jade
index 43ccbcb92..88f442bcc 100644
--- a/app/templates/docs/components.jade
+++ b/app/templates/docs/components.jade
@@ -7,27 +7,36 @@ block content
       ul.nav.nav-list.list-group.nano-content
         for component in components
             a.doc-name(href="##{component.get('name')}")
-              li= component.get('name')
+              li.list-group-item= component.get('name')
               ul
+                // .list-group for different layout
                 each doc in component.attributes.propertyDocumentation
                   a(href="##{component.get('name')}#{doc.name}")
-                    li
+                    li.list-group-item
                       | #{doc.name}
     .col-xs-9.documentation-column.nano
       ul.nano-content
         for component in components
-          li(id="#{component.get('name')}")
-            | #{component.get('name')}
+          div(id="#{component.get('name')}" class="panel panel-defalt")
+            div(class="panel-heading")
+              | #{component.get('name')}
+            div(class="panel-body")
+              | #{component.get('description')}
             ul
-              li.doc-description
-                | #{component.get('description')}
-              ul
               each doc in component.attributes.propertyDocumentation
-                li(id="#{component.get('name')}#{doc.name}")
+                li.list-group-item(id="#{component.get('name')}#{doc.name}")
                   | #{doc.name}
                   ul.specialList
                     if doc.description[language]
                       li!=marked(doc.description[language])
                     else
                       li!=marked(doc.description)
-      
+              li.panel-heading
+                a.codeBlock(data-toggle="collapse" data-parent="##{component.get('name')}" href="##{component.get('name')}Code")
+                  | Code
+            div(id="#{component.get('name')}Code" class="panel-collapse collapse")
+              div.panel-body
+                pre
+                  | #{component.attributes.code}
+
+
diff --git a/app/views/docs/components_view.coffee b/app/views/docs/components_view.coffee
index 0a789000e..eedba904e 100644
--- a/app/views/docs/components_view.coffee
+++ b/app/views/docs/components_view.coffee
@@ -4,7 +4,7 @@ CocoCollection = require 'collections/CocoCollection'
 LevelComponent = require 'models/LevelComponent'
 
 class ComponentDocsCollection extends CocoCollection
-  url: '/db/level.component?project=name,description,dependencies,propertyDocumentation'
+  url: '/db/level.component?project=name,description,dependencies,propertyDocumentation,code'
   model: LevelComponent
 
 module.exports = class UnnamedView extends RootView