diff --git a/app/components/controls/light-control.js b/app/components/controls/light-control.js
index e23e173..4aed906 100644
--- a/app/components/controls/light-control.js
+++ b/app/components/controls/light-control.js
@@ -1,7 +1,7 @@
 import Em from 'ember';
 
 export default Em.Component.extend({
-  classNames: ['innerControlFrame'],
+  classNames: ['innerControlFrame', 'col-sm-8', 'col-sm-offset-2', 'col-xs-12'],
   classNameBindings: ['active::hidden'],
   elementId: 'lightControl',
 
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 6f63c3c..798c372 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -5,18 +5,11 @@
 
 $playerBackColor: #F12B24;
 $playerHeight: 400px;
-$playerBeatAreaHeight: 320px;
 $playListBackgroundColor: #1E1E1E;
 $playerDefaultIconColor: #BBBBBB;
 $footerHeight: 40px;
 
 // BRIDGE FINDER
-* {
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
 html {
   min-height: 100%;
   height: auto;
@@ -33,10 +26,6 @@ body {
 }
 
 #settings {
-  cursor: pointer;
-  position: absolute;
-  right: 15px;
-  margin-top: 30px;
 }
 
 .settingsItem {
@@ -69,7 +58,7 @@ body {
   background: darken(white, 20%);
 }
 
-.settingsItem.on md-icon.md-default-theme  {
+.settingsItem.on md-icon.md-default-theme.group  {
   color: #F12B24 !important;
 }
 
@@ -165,7 +154,7 @@ md-list-item .md-no-style {
 
 .navigation {
   text-align: center;
-  padding: 30px 0 30px 0;
+  padding: 30px 0;
 }
 
 .navigationItem {
@@ -183,11 +172,6 @@ md-list-item .md-no-style {
   text-decoration: underline;
 }
 
-#lightControl {
-  max-width: 500px;
-  margin: auto;
-}
-
 .color {
   border: 1px solid rgba(0, 0, 0, 0.5);
 }
@@ -230,8 +214,8 @@ md-slider.md-default-theme .md-thumb:after {
 
 #groupControls.on {
   width: 300px;
-  top: 55px;
-  right: 48px;
+  top: 20px;
+  right: 0;
   position: absolute;
   display: block;
   z-index: 2;
@@ -623,7 +607,6 @@ md-switch.md-default-theme.md-checked .md-thumb{
 
 #beatArea {
   position: relative;
-  height: $playerBeatAreaHeight;
 }
 
 #beatArea * .noUi-target {
@@ -650,16 +633,18 @@ md-switch.md-default-theme.md-checked .md-thumb{
 }
 
 #playerBottom {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: white;
   background-color: #5D5D5D;
 }
 
-#beatSpeakerContainer {
-  height: $playerBeatAreaHeight;
+#beatContainer {
   padding: 0;
 }
 
-#beatSpeakerContainer md-switch {
+#beatContainer md-switch {
   bottom: 0;
   position: absolute;
   margin-left: 0;
@@ -667,36 +652,12 @@ md-switch.md-default-theme.md-checked .md-thumb{
 }
 
 #beatSpeaker {
-  position: relative;
   margin: 10px auto 0 auto;
-  border-radius: 50%;
-  width: 280px;
-  height: 280px;
-  background-image: url('images/speaker-outer.png');
-  //border: 1px solid white;
-  //background: black;
-  #beatSpeakerCenter {
-    width: 188px;
-    height: 186px;
-    position: absolute;
-    top: 17%;
-    left: 17%;
-    border-radius: 50%;
-    //border: 3px solid brown;
-    //background: orange;
-    background-image: url('images/speaker-inner.png');
-  }
-  //#beatSpeakerCenter::before {
-  //  position: absolute;
-  //  top: 28%;
-  //  left: 28%;
-  //  width: 80px;
-  //  height: 80px;
-  //  content: '';
-  //  background-color: black;
-  //  border: 1px solid white;
-  //  border-radius: 50%;
-  //}
+  width: 100%;
+}
+
+#beatSpeakerCenter {
+
 }
 
 .pop {
diff --git a/app/templates/components/bridge-controls.hbs b/app/templates/components/bridge-controls.hbs
index f942d59..363e243 100644
--- a/app/templates/components/bridge-controls.hbs
+++ b/app/templates/components/bridge-controls.hbs
@@ -1,27 +1,29 @@
 {{#if ready}}
-  <div id="settings">
-    <span id="groupMenu" class="settingsItem groupMenu {{if groupControlDisplayed 'on'}}" {{action "toggleGroupControl"}}>
-      <span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Light Groups">{{paper-icon icon="group"}}</span>
-    </span>
+  <div class="row navigation">
+    <div class="col-sm-6 col-sm-offset-3 col-xs-9">
+      {{#each tabData as |tab|}}
+          <span class="navigationItem cursorPointer {{if tab.selected "active"}} text-uppercase" {{action "changeTab" tab.name}}>{{tab.name}}</span>
+      {{/each}}
+    </div>
 
-    <span id="appSettingsMenu" class="settingsItem {{if appSettingsDisplayed 'on'}}"  {{action "toggleAppSettings"}}>
-      <span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Application Settings">{{paper-icon icon="settings"}}</span>
+    <div id="settings" class="col-sm-3 col-xs-3">
+      <span id="groupMenu" class="settingsItem groupMenu {{if groupControlDisplayed 'on'}}" {{action "toggleGroupControl"}}>
+        <span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Light Groups">{{paper-icon icon="group"}}</span>
 
-      {{#if appSettingsDisplayed}}
-        <div id="appSettings">
-          <div class="appSettingsItem" {{action "clearBridge"}}>Switch bridge</div>
-          <div class="warn appSettingsItem" {{action "clearAllSettings"}}>Clear application settings</div>
-        </div>
-      {{/if}}
-    </span>
-  </div>
+        {{controls/group-control lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed}}
+      </span>
 
-  {{controls/group-control lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed}}
+      <span id="appSettingsMenu" class="settingsItem {{if appSettingsDisplayed 'on'}}"  {{action "toggleAppSettings"}}>
+        <span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Application Settings">{{paper-icon icon="settings"}}</span>
 
-  <div class="navigation">
-    {{#each tabData as |tab|}}
-        <span class="navigationItem cursorPointer {{if tab.selected "active"}} text-uppercase" {{action "changeTab" tab.name}}>{{tab.name}}</span>
-    {{/each}}
+        {{#if appSettingsDisplayed}}
+          <div id="appSettings">
+            <div class="appSettingsItem" {{action "clearBridge"}}>Switch bridge</div>
+            <div class="warn appSettingsItem" {{action "clearAllSettings"}}>Clear application settings</div>
+          </div>
+        {{/if}}
+      </span>
+    </div>
   </div>
 
   {{controls/light-control apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lightsTabSelected}}
diff --git a/app/templates/components/bridge-finder.hbs b/app/templates/components/bridge-finder.hbs
index c84acf6..2ad6a9e 100644
--- a/app/templates/components/bridge-finder.hbs
+++ b/app/templates/components/bridge-finder.hbs
@@ -26,7 +26,7 @@
       </div>
     {{else}}
       {{#if bridgeFindFail}}
-        <p>A hue bridge was not found on your network :( <br>
+        <p>A hue bridge was not found on your network. <br>
           Enter one manually?</p>
 
         <span id="bridgeInput">
diff --git a/app/templates/components/controls/light-control.hbs b/app/templates/components/controls/light-control.hbs
index e9481aa..bbd9bed 100644
--- a/app/templates/components/controls/light-control.hbs
+++ b/app/templates/components/controls/light-control.hbs
@@ -3,19 +3,19 @@
     {{light-group lightsData=lightsData activeLights=activeLights action='clickLight' apiURL=apiURL classNames="horizontalLightGroup"}}
   {{/paper-item}}
 
-  {{#paper-item class="item"}}
+  {{#paper-item}}
     {{paper-icon icon="power-settings-new"}}
-    <p>Lights</p>
+    <p>Power</p>
     {{#paper-switch checked=lightsOn disabled=trial skipProxy=trial}} {{lightsOnTxt}} {{/paper-switch}}
   {{/paper-item}}
 
-  {{#paper-item class="item"}}
+  {{#paper-item}}
     {{paper-icon icon="brightness-4"}}
     <p>Brightness</p>
     {{paper-slider flex=true min='1' max='254' value=lightsBrightness disabled=brightnessControlDisabled}}
   {{/paper-item}}
 
-  {{#paper-item class="item"}}
+  {{#paper-item}}
     {{paper-icon icon="color-lens"}}
     <p>Color</p>
     {{#paper-button raised=true class="color" action="toggleColorpicker"}}{{/paper-button}}
@@ -26,7 +26,7 @@
     {{/if}}
   </div>
 
-  {{#paper-item class="item"}}
+  {{#paper-item}}
     {{paper-icon icon="flare"}}
     <p>Strobe</p>
     {{#paper-switch checked=strobeOn disabled=trial}} {{strobeOnTxt}} {{/paper-switch}}
diff --git a/app/templates/components/controls/music-control.hbs b/app/templates/components/controls/music-control.hbs
index 34aba5e..18452f1 100644
--- a/app/templates/components/controls/music-control.hbs
+++ b/app/templates/components/controls/music-control.hbs
@@ -1,5 +1,5 @@
 <div class="row">
-    <div id="playerArea" class="col-xs-8 material-icons {{if playing "play-arrow" "pause"}} {{if playQueueEmpty "blockAnimation"}}" {{action "playerAreaPlay"}}>
+    <div id="playerArea" class="col-sm-8 col-xs-12 material-icons {{if playing "play-arrow" "pause"}} {{if playQueueEmpty "blockAnimation"}}" {{action "playerAreaPlay"}}>
 
         <div id="playerControls">
           {{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}}
@@ -24,7 +24,7 @@
         </div>
     </div>
 
-    <div id="playlist" class="col-xs-4">
+    <div id="playlist" class="col-sm-4 col-xs-12">
         <input id="fileInput" type="file" accept="audio/*" multiple="true" />
 
         <div id="playListControls">
@@ -59,7 +59,7 @@
 </div>
 
 <div id="playerBottom" class="row">
-  <span id="beatArea" class="col-xs-8">
+  <div id="beatArea" class="col-sm-8 col-xs-12">
       <div id="vertDivider"></div>
         {{light-group lightsData=lightsData activeLights=activeLights action='clickLight' apiURL=apiURL noHover=true}}
 
@@ -83,14 +83,14 @@
       <div id="playerButtonGroup">
         {{#paper-button raised=true warn=true action="defaultControls"}}Default{{/paper-button}}
       </div>
-    </span>
+    </div>
 
-    <span id="beatSpeakerContainer" class="col-xs-4">
+    <div id="beatContainer" class="col-sm-4 col-xs-12">
       {{#paper-switch checked=speakerViewed noink=true}} {{speakerLabel}} {{/paper-switch}}
       {{#liquid-if speakerViewed}}
-        <div id="beatSpeaker">
-          <span id="beatSpeakerCenterBackground"></span>
-          <span id="beatSpeakerCenter" class="beatSpeakerCenter cursorPointer" {{action "clickSpeaker"}}></span>
+        <div id="beatSpeakerContainer">
+          <img src="assets/images/speaker-outer.png" id="beatSpeaker" />
+          <img src="assets/images/speaker-inner.png" id="beatSpeakerCenter" class="beatSpeakerCenter cursorPointer" {{action "clickSpeaker"}} />
         </div>
       {{else}}
         <div id ="beatHistory">
@@ -99,5 +99,5 @@
           {{/each}}
         </div>
       {{/liquid-if}}
-    </span>
+    </div>
 </div>
\ No newline at end of file