diff --git a/web/app/pods/application/controller.js b/web/app/pods/application/controller.js
new file mode 100644
index 0000000..b6ea587
--- /dev/null
+++ b/web/app/pods/application/controller.js
@@ -0,0 +1,40 @@
+import Ember from 'ember';
+
+const {
+  Controller,
+  isEmpty
+} = Ember;
+
+export default Controller.extend({
+  dimmerOn: false,
+
+  init(){
+    this._super(...arguments);
+
+    let storage = new window.Locally.Store({compress: true}),
+      dimmerOn = storage.get('huegasm.dimmerOn');
+    this.set('storage', storage);
+
+    if (!isEmpty(dimmerOn) && dimmerOn) {
+      this.send('toggleDimmer');
+    }
+  },
+
+  actions: {
+    toggleDimmer(){
+      this.toggleProperty('dimmerOn');
+
+      let dimmerOn = this.get('dimmerOn');
+
+      if (dimmerOn) {
+        $('body').addClass('dimmerOn');
+        $('html').addClass('dimmerOn');
+      } else {
+        $('body').removeClass('dimmerOn');
+        $('html').removeClass('dimmerOn');
+      }
+
+      this.get('storage').set('huegasm.dimmerOn', dimmerOn);
+    }
+  }
+});
diff --git a/web/app/pods/application/template.hbs b/web/app/pods/application/template.hbs
index d53e9c5..a426219 100644
--- a/web/app/pods/application/template.hbs
+++ b/web/app/pods/application/template.hbs
@@ -1 +1,3 @@
-{{huegasm-app}}
\ No newline at end of file
+{{huegasm-app action="toggleDimmer" dimmerOn=dimmerOn storage=storage}}
+
+{{huegasm-footer action="toggleDimmer" dimmerOn=dimmerOn storage=storage}}
\ No newline at end of file
diff --git a/web/app/pods/components/hue-controls/component.js b/web/app/pods/components/hue-controls/component.js
index d0106ef..d75d378 100644
--- a/web/app/pods/components/hue-controls/component.js
+++ b/web/app/pods/components/hue-controls/component.js
@@ -115,7 +115,7 @@ export default Component.extend({
       location.reload();
     },
     toggleDimmer() {
-      this.sendAction("toggleDimmer");
+      this.sendAction();
     },
     clearAllSettings() {
       this.get('storage').clear();
diff --git a/web/app/pods/components/hue-controls/template.hbs b/web/app/pods/components/hue-controls/template.hbs
index fa2f318..b468924 100644
--- a/web/app/pods/components/hue-controls/template.hbs
+++ b/web/app/pods/components/hue-controls/template.hbs
@@ -1,7 +1,7 @@
 {{#if ready}}
   <div id="navigation">
       <div id="dimmer" class={{dimmerOnClass}} {{action "toggleDimmer"}}>
-          <div id="dimmer-switch"></div>
+        <div id="dimmer-switch"></div>
       </div>
 
     {{#each tabData as |tab|}}
@@ -32,8 +32,8 @@
   {{light-group lightsData=lightsData activeLights=activeLights syncLight=syncLight apiURL=apiURL dimmerOn=dimmerOn storage=storage}}
 
   <div class="row">
-    {{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights syncLight=syncLight trial=trial active=lightsTabSelected colorLoopOn=colorLoopOn dimmerOn=dimmerOn strobeOn=pauseLightUpdates toggleDimmer="toggleDimmer"}}
+    {{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights syncLight=syncLight trial=trial active=lightsTabSelected colorLoopOn=colorLoopOn dimmerOn=dimmerOn strobeOn=pauseLightUpdates}}
 
-    {{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage colorLoopOn=colorLoopOn toggleDimmer="toggleDimmer" action="startIntro"}}
+    {{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage colorLoopOn=colorLoopOn action="startIntro"}}
   </div>
 {{/if}}
\ No newline at end of file
diff --git a/web/app/pods/components/huegasm-app/component.js b/web/app/pods/components/huegasm-app/component.js
index e486f1a..5721b00 100644
--- a/web/app/pods/components/huegasm-app/component.js
+++ b/web/app/pods/components/huegasm-app/component.js
@@ -2,28 +2,18 @@ import Ember from 'ember';
 
 const {
   Component,
-  isEmpty,
-  isNone,
-  $
+  isEmpty
 } = Ember;
 
 export default Component.extend({
-  bridgeIp: null,
-  bridgeUsername: null,
   trial: false,
-  dimmerOn: false,
   ready: false,
+  elementId: 'huegasm',
 
   init(){
     this._super(...arguments);
 
-    let storage = new window.Locally.Store({compress: true}),
-      dimmerOn = storage.get('huegasm.dimmerOn');
-    this.set('storage', storage);
-
-    if (!isNone(dimmerOn) && dimmerOn) {
-      this.send('toggleDimmer');
-    }
+    let storage = this.get('storage');
 
     if (!isEmpty(storage.get('huegasm.bridgeIp')) && !isEmpty(storage.get('huegasm.bridgeUsername'))) {
       this.setProperties({
@@ -35,19 +25,7 @@ export default Component.extend({
 
   actions: {
     toggleDimmer(){
-      this.toggleProperty('dimmerOn');
-
-      let dimmerOn = this.get('dimmerOn');
-
-      if (dimmerOn) {
-        $('body').addClass('dimmerOn');
-        $('html').addClass('dimmerOn');
-      } else {
-        $('body').removeClass('dimmerOn');
-        $('html').removeClass('dimmerOn');
-      }
-
-      this.get('storage').set('huegasm.dimmerOn', dimmerOn);
+      this.sendAction();
     },
 
     isReady(){
diff --git a/web/app/pods/components/huegasm-app/template.hbs b/web/app/pods/components/huegasm-app/template.hbs
index c8bfde6..c3b0ac1 100644
--- a/web/app/pods/components/huegasm-app/template.hbs
+++ b/web/app/pods/components/huegasm-app/template.hbs
@@ -1,5 +1,5 @@
 {{#if bridgeUsername}}
-  {{hue-controls bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial dimmerOn=dimmerOn storage=storage toggleDimmer="toggleDimmer"}}
+  {{hue-controls bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial dimmerOn=dimmerOn storage=storage action="toggleDimmer"}}
 {{else}}
   {{#if ready}}
     {{bridge-finder bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial storage=storage}}
diff --git a/web/app/pods/components/huegasm-footer/component.js b/web/app/pods/components/huegasm-footer/component.js
index 79b8487..0d4aa3a 100644
--- a/web/app/pods/components/huegasm-footer/component.js
+++ b/web/app/pods/components/huegasm-footer/component.js
@@ -15,7 +15,7 @@ export default Component.extend({
 
   actions: {
     toggleDimmer(){
-      this.sendAction('toggleDimmer');
+      this.sendAction();
     }
   }
 });
diff --git a/web/app/pods/components/lights-tab/template.hbs b/web/app/pods/components/lights-tab/template.hbs
index 7a9b47f..2d13238 100644
--- a/web/app/pods/components/lights-tab/template.hbs
+++ b/web/app/pods/components/lights-tab/template.hbs
@@ -40,6 +40,4 @@
     <p data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip lights-control-tooltip" data-title="Selected lights will slowly cycle through all the colors">Colorloop</p>
     {{paper-switch value=colorLoopOn onChange=(action (mut colorLoopOn)) disabled=trial skipProxy=trial label=colorloopOnTxt}}
   {{/paper-item}}
-{{/paper-list}}
-
-{{huegasm-footer toggleDimmer="toggleDimmer"}}
\ No newline at end of file
+{{/paper-list}}
\ No newline at end of file
diff --git a/web/app/pods/components/music-tab/template.hbs b/web/app/pods/components/music-tab/template.hbs
index 50d84b9..4712f6a 100644
--- a/web/app/pods/components/music-tab/template.hbs
+++ b/web/app/pods/components/music-tab/template.hbs
@@ -217,6 +217,4 @@
 
 {{ember-notify messageStyle='bootstrap' closeAfter=5000}}
 
-{{music-tab/add-soundcloud-sound-modal action="handleNewSoundCloudURL" isShowingModal=isShowingAddSoundCloudModal}}
-
-{{huegasm-footer toggleDimmer="toggleDimmer"}}
\ No newline at end of file
+{{music-tab/add-soundcloud-sound-modal action="handleNewSoundCloudURL" isShowingModal=isShowingAddSoundCloudModal}}
\ No newline at end of file
diff --git a/web/app/styles/app.scss b/web/app/styles/app.scss
index 585040c..a1ec09b 100644
--- a/web/app/styles/app.scss
+++ b/web/app/styles/app.scss
@@ -16,10 +16,20 @@
 @import 'music-tab';
 @import 'noui-slider';
 
+body > .ember-view {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
 body, button {
   font-family: 'Slabo 27px', serif;
 }
 
+#huegasm {
+  flex: 1;
+}
+
 .ember-app {
   padding-bottom: 50px;
 }
@@ -34,6 +44,7 @@ body, button {
   display: inline-block;
   position: relative;
   bottom: 10px;
+  font-size: 18px;
   a {
     margin-left: 5px;
   }
diff --git a/web/app/styles/hue-controls.scss b/web/app/styles/hue-controls.scss
index 85dce05..11e0d7c 100644
--- a/web/app/styles/hue-controls.scss
+++ b/web/app/styles/hue-controls.scss
@@ -23,6 +23,7 @@
 #hue-controls {
   max-width: 1200px;
   position: relative;
+  flex: 1;
 }
 
 // preload images
diff --git a/web/package.json b/web/package.json
index e2811dd..1bacb23 100644
--- a/web/package.json
+++ b/web/package.json
@@ -9,7 +9,7 @@
   },
   "scripts": {
     "start": "ember server",
-    "build": "ember build",
+    "build": "ember build --env=production",
     "test": "ember test"
   },
   "engines": {
diff --git a/web/tests/unit/pods/application/controller-test.js b/web/tests/unit/pods/application/controller-test.js
new file mode 100644
index 0000000..b71b4a5
--- /dev/null
+++ b/web/tests/unit/pods/application/controller-test.js
@@ -0,0 +1,12 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('controller:application', 'Unit | Controller | application', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  let controller = this.subject();
+  assert.ok(controller);
+});