diff --git a/README.md b/README.md
index 8b2b700..2f88768 100644
--- a/README.md
+++ b/README.md
@@ -2,17 +2,44 @@
 
 Basic tabbed interface.
 
-## How to use
+## Usage
 
-* Include the latest version in your `package.json`.
-* Components render buttons that will control their associated content.
-* Pass in a `target`, which is the id of the associated content element.
-* `on-click="setCurrentTab"` is required as the action will bubble up in your application.
-* `currentTab=currentTab` is required as your app will pass in the current tab information back to the component.
-* Include the action, `setCurrentTab`, in your actions hash (controller) to set the current tab.
-  * `setCurrentTab(tab) { this.set('currentTab', tab); }`
+This Ember addon provides a `ui-tab` component.
 
-## Options
+Pass in a target which is the ID of the associated element. Current tab is required as your app will pass in the current tab information back to the component.
 
-* You can specify the default content by passing in `default=true`.
-* i.e. `{{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#id" default=true}}Button1{{/ui-tab}}`
+**Example:**
+Template:
+
+```hbs
+<div class="container">
+  {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#tab-one" default=true}}Tab One{{/ui-tab}}
+  {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#tab-two"}}Tab Two{{/ui-tab}}
+  {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#tab-three"}}Tab Three{{/ui-tab}}
+  {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#tab-four"}}Tab Four{{/ui-tab}}
+</div>
+
+<p id="tab-one">Tab One</p>
+<p id="tab-two">Tab Two</p>
+<p id="tab-three">Tab Three</p>
+<p id="tab-four">Tab Four</p>
+```
+
+Include the action 'setCurrentTab' in your controller to set the current tab.
+
+Controller:
+```javascript
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  actions: {
+    setCurrentTab(tab) {
+      this.set('currentTab', tab);
+    }
+  }
+});
+```
+
+## Styles
+
+The component `ui-tab` component is easily customizable for your application.  
diff --git a/package.json b/package.json
index b6b0a46..10bfb2b 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
   "license": "MIT",
   "devDependencies": {
     "broccoli-asset-rev": "^2.0.2",
+    "broccoli-sass": "^0.6.6",
     "ember-cli": "0.2.7",
     "ember-cli-app-version": "0.3.3",
     "ember-cli-content-security-policy": "0.4.0",
@@ -29,9 +30,9 @@
     "ember-cli-qunit": "0.3.13",
     "ember-cli-uglify": "^1.0.1",
     "ember-data": "1.0.0-beta.18",
+    "ember-disable-prototype-extensions": "^1.0.0",
     "ember-disable-proxy-controllers": "^1.0.0",
     "ember-export-application-global": "^1.0.2",
-    "ember-disable-prototype-extensions": "^1.0.0",
     "ember-try": "0.0.6"
   },
   "keywords": [
@@ -43,4 +44,4 @@
   "ember-addon": {
     "configPath": "tests/dummy/config"
   }
-}
\ No newline at end of file
+}
diff --git a/tests/dummy/app/styles/app.css b/tests/dummy/app/styles/app.scss
similarity index 66%
rename from tests/dummy/app/styles/app.css
rename to tests/dummy/app/styles/app.scss
index d9a6da9..ccef5c8 100644
--- a/tests/dummy/app/styles/app.css
+++ b/tests/dummy/app/styles/app.scss
@@ -1,18 +1,7 @@
-body {
-  background: #CED1DB;
-}
-
-h2 {
-  text-align: center;
-  font-size: 50px;
-  color: #FF6862;
-}
-
 button {
   display: inline-block;
   width: 120px;
   height: 60px;
-  background: #FF6862;
   margin: 0;
   outline: none;
   border-radius: 20px 20px 0 0;
@@ -32,8 +21,3 @@ p {
   font-size: 40px;
   color: #332884;
 }
-
-hr {
-  margin-top: 0;
-  border: 5px solid white;
-}
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
index 9d13ed1..e9b6b2a 100644
--- a/tests/dummy/app/templates/application.hbs
+++ b/tests/dummy/app/templates/application.hbs
@@ -1,15 +1,11 @@
-<h2 id="title">FireFly Tabs</h2>
-
 <div class="container">
-  {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#new-york" default=true}}New York{{/ui-tab}}
-  {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#los-angeles"}}Los Angeles{{/ui-tab}}
-  {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#chicago"}}Chicago{{/ui-tab}}
-  {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#san-francisco"}}San Francisco{{/ui-tab}}
+  {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#tab-one" default=true}}Tab One{{/ui-tab}}
+  {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#tab-two"}}Tab Two{{/ui-tab}}
+  {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#tab-three"}}Tab Three{{/ui-tab}}
+  {{#ui-tab on-click="setCurrentTab" currentTab=currentTab target="#tab-four"}}Tab Four{{/ui-tab}}
 </div>
 
-<hr>
-
-<p id="new-york">Financial</p>
-<p id="los-angeles">Hollywood</p>
-<p id="chicago">Chiraq</p>
-<p id="san-francisco">Tech</p>
+<p id="tab-one">Tab One</p>
+<p id="tab-two">Tab Two</p>
+<p id="tab-three">Tab Three</p>
+<p id="tab-four">Tab Four</p>