diff --git a/index.jade b/index.jade
index 4310a2e..4cc745d 100644
--- a/index.jade
+++ b/index.jade
@@ -13,6 +13,7 @@ html
 		link(rel = 'stylesheet', type = 'text/css', href = document.relativeSource)
 		link(rel = 'stylesheet', type = 'text/css', href = 'css/main.css')
 		link(rel = 'stylesheet', type = 'text/css', href = 'css/brackets.css')
+		link(href="http://netdna.bootstrapcdn.com/font-awesome/4.0.2/css/font-awesome.css", rel="stylesheet")
 		//if lt IE 9
 			script(src = '//html5shiv.googlecode.com/svn/trunk/html5.js')
 	body(class=tint)
@@ -56,6 +57,107 @@ html
 						a#slide-menu-button.topcoat-icon-button--large--quiet
 							span.topcoat-icon--large.topcoat-icon--menu-stack
 				#content.max-width
+					article.component
+						div.showcase(style="width:300px; float:left; margin-right: 50px; margin-bottom: 50px")
+							div(class="topcoat-navigation-bar")
+								div(class="topcoat-navigation-bar__item left quarter")
+									span(class="topcoat-icon-button--quiet", style="vertical-align: middle")
+										i.fa.fa-lg.fa-bars
+								div(class="topcoat-navigation-bar__item center half")
+									span(class="topcoat-navigation-bar__title") Title
+								div(class="topcoat-navigation-bar__item right quarter")
+									span(class="topcoat-icon-button--quiet", style="vertical-align: middle")
+										i.fa.fa-lg.fa-angle-right
+							div.topcoat-list
+								h3.topcoat-list__header Category
+								ul.topcoat-list__container
+									li.topcoat-list__item Item
+									li.topcoat-list__item Item
+								h3.topcoat-list__header Category
+								ul.topcoat-list__container
+									li.topcoat-list__item Item
+									li.topcoat-list__item Item
+									li.topcoat-list__item Item
+								h3.topcoat-list__header Category
+								ul.topcoat-list__container
+									li.topcoat-list__item Item
+									li.topcoat-list__item Item
+									li.topcoat-list__item Item
+									li.topcoat-list__item Item
+							div.topcoat-tab-bar.full
+								label.topcoat-tab-bar__item
+									input(type="radio", name="tab-bar")
+									button.topcoat-tab-bar__button.full One
+								label.topcoat-tab-bar__item
+									input(type="radio", name="tab-bar")
+									button.topcoat-tab-bar__button.full Two
+								label.topcoat-tab-bar__item
+									input(type="radio", name="tab-bar")
+									button.topcoat-tab-bar__button.full Three
+						div.showcase(style="width:300px; float:left; margin-right: 50px; margin-bottom: 50px")
+							div(class="topcoat-navigation-bar")
+								div(class="topcoat-navigation-bar__item left quarter")
+									span(class="topcoat-icon-button--quiet", style="vertical-align: middle")
+										i.fa.fa-lg.fa-bars
+								div(class="topcoat-navigation-bar__item center half")
+									span(class="topcoat-navigation-bar__title") Title
+								div(class="topcoat-navigation-bar__item right quarter")
+									span(class="topcoat-icon-button--quiet", style="vertical-align: middle")
+										i.fa.fa-lg.fa-angle-right
+							div.topcoat-list
+								h3.topcoat-list__header
+									input.topcoat-search-input.full(placeholder="Search")
+								h3.topcoat-list__header
+									input(type="text", class="topcoat-text-input full", placeholder="text", value="")
+								ul.topcoat-list__container
+									li.topcoat-list__item
+										span Notification
+										span.topcoat-notification(style="float: right") 1
+									li.topcoat-list__item
+										span Radio Button
+										span(style="float: right")
+											label.topcoat-radio-button
+												input(type="radio", name="topcoat")
+												div.topcoat-radio-button__checkmark
+											label.topcoat-radio-button OR
+												input(type="radio", name="topcoat")
+												div.topcoat-radio-button__checkmark
+									li.topcoat-list__item	
+										span Checkbox
+										span(style="float: right")
+											label.topcoat-checkbox
+												input(type="checkbox")
+												div.topcoat-checkbox__checkmark											  											
+									li.topcoat-list__item	
+										span Switch
+										span(style="float: right")
+											label.topcoat-switch
+												input(type="checkbox", class="topcoat-switch__input")
+												div.topcoat-switch__toggle										
+									li.topcoat-list__item	
+										span Range
+										span(style="float: right")
+											input(type="range", class="topcoat-range")
+								h3.topcoat-list__header Button									
+								ul.topcoat-list__container
+									li.topcoat-list__item
+										button.topcoat-button Button
+										button.topcoat-button--cta Button cta
+								h3.topcoat-list__header Quiet Button
+								ul.topcoat-list__container
+									li.topcoat-list__item
+										button.topcoat-button--quiet Button									
+							div.topcoat-tab-bar.full
+								label.topcoat-tab-bar__item
+									input(type="radio", name="tab-bar")
+									button.topcoat-tab-bar__button.full One
+								label.topcoat-tab-bar__item
+									input(type="radio", name="tab-bar")
+									button.topcoat-tab-bar__button.full Two
+								label.topcoat-tab-bar__item
+									input(type="radio", name="tab-bar")
+									button.topcoat-tab-bar__button.full Three
+						div(style="clear: both")
 					- each component in document.components
 						article.component(id=component.slug)
 							header