diff --git a/app/components/Switch.js b/app/components/Switch.js
index 93a3f26..9a332cd 100644
--- a/app/components/Switch.js
+++ b/app/components/Switch.js
@@ -13,6 +13,9 @@ export default class Switch extends React.Component
     if (props.state) {
       props.onToggleOn();
     }
+
+    this.classes = ['audio-control'];
+    this.classes.push(props.className);
   }
 
   render()
@@ -20,7 +23,7 @@ export default class Switch extends React.Component
     const { props } = this;
 
     return (
-      <div className='audio-control'>
+      <div className={this.classes.join(' ')}>
         <label className='audio-control-label'>{props.label}</label>
         <ReactSwitch state={props.state} animate={false} size='mini'
           onChange={(state) => {
diff --git a/app/containers/ThreeOscSynthUI.js b/app/containers/ThreeOscSynthUI.js
index c3ecda1..d97bc40 100644
--- a/app/containers/ThreeOscSynthUI.js
+++ b/app/containers/ThreeOscSynthUI.js
@@ -20,21 +20,10 @@ export default class ThreeOscSynthUI extends React.Component
     let { osc1, osc2, osc3 } = oscGroup;
 
     return (
-      <div className="three-osc-synth">
-        <Keyboard octaves={3} startingOctave={2}
-          onKeypress={[
-            osc1::osc1.setFrequency,
-            osc2::osc2.setFrequency,
-            osc3::osc3.setFrequency,
-            envelope::envelope.triggerADS,
-          ]}
-          onKeyRelease={[
-            envelope::envelope.triggerRelease
-          ]}
-        />
+      <div className='three-osc-synth'>
         <AudioControlGroup label='Osc 1'>
-          <Switch label='On/Off'
-            onToggleOn={() => mixer.ch1.toggleOn()} onToggleOff={() => mixer.ch1.toggleOff()} state={true} />
+          <Switch
+            onToggleOn={() => mixer.ch1.toggleOn()} onToggleOff={() => mixer.ch1.toggleOff()} state={true} className='osc-power-switch' />
           <ButtonGroup label='Waveform' name='osc1-waveform' defaultValue='sawtooth' onChange={osc1::osc1.setWaveformType}>
             <Button label='SN' value='sine' />
             <Button label='SQ' value='square' />
@@ -46,8 +35,8 @@ export default class ThreeOscSynthUI extends React.Component
         </AudioControlGroup>
 
         <AudioControlGroup label='Osc 2'>
-          <Switch label='On/Off'
-            onToggleOn={() => mixer.ch2.toggleOn()} onToggleOff={() => mixer.ch2.toggleOff()} state={true} />
+          <Switch
+            onToggleOn={() => mixer.ch2.toggleOn()} onToggleOff={() => mixer.ch2.toggleOff()} state={true} className='osc-power-switch' />
           <ButtonGroup label='Waveform' name='osc2-waveform' defaultValue='triangle' onChange={osc2::osc2.setWaveformType}>
             <Button label='SN' value='sine' />
             <Button label='SQ' value='square' />
@@ -56,13 +45,13 @@ export default class ThreeOscSynthUI extends React.Component
           </ButtonGroup>
           <Slider label='Osc 2 Volume'
             min='0' max='1' step='0.01' defaultValue='1' onInput={(val) => mixer.ch2.setGain(val)} />
-          <Slider label='Freq Offset'
+          <Slider label='Frequency Offset'
             min='-1200' max='1200' step='10' defaultValue='400' onInput={osc2::osc2.setDetune} />
         </AudioControlGroup>
 
         <AudioControlGroup label='Osc 3'>
-          <Switch label='On/Off'
-            onToggleOn={() => mixer.ch3.toggleOn()} onToggleOff={() => mixer.ch3.toggleOff()} state={true} />
+          <Switch
+            onToggleOn={() => mixer.ch3.toggleOn()} onToggleOff={() => mixer.ch3.toggleOff()} state={true} className='osc-power-switch' />
           <ButtonGroup label='Waveform' name='osc3-waveform' defaultValue='square' onChange={osc3::osc3.setWaveformType}>
             <Button label='SN' value='sine' />
             <Button label='SQ' value='square' />
@@ -71,16 +60,25 @@ export default class ThreeOscSynthUI extends React.Component
           </ButtonGroup>
           <Slider label='Osc 3 Volume'
             min='0' max='1' step='0.01' defaultValue='1' onInput={(val) => mixer.ch3.setGain(val)} />
-          <Slider label='Freq Offset'
+          <Slider label='Frequency Offset'
             min='-1200' max='1200' step='10' defaultValue='700' onInput={osc3::osc3.setDetune} />
         </AudioControlGroup>
 
-        <AudioControlGroup label='Filter'>
-          <Slider label='Cutoff Freq'
-            min='50' max='1200' step='5' defaultValue='1200' onInput={filter::filter.setFrequency} />
-          <Slider label='Resonance'
-            min='1' max = '35' step='1' defaultValue='1' onInput={filter::filter.setQ} />
-        </AudioControlGroup>
+        <div className='audio-control-column'>
+          <AudioControlGroup label='Filter'>
+            <Slider label='Cutoff Freq'
+              min='50' max='1200' step='5' defaultValue='1200' onInput={filter::filter.setFrequency} />
+            <Slider label='Resonance'
+              min='1' max = '35' step='1' defaultValue='1' onInput={filter::filter.setQ} />
+          </AudioControlGroup>
+
+          <AudioControlGroup label='LFO'>
+            <Slider label='Depth'
+              min={0} max={100} step={0.5} defaultValue={1} onInput={lfo::lfo.setDepth} />
+            <Slider label='Speed'
+                min={0} max={20} step={0.001} defaultValue={1} onInput={lfo::lfo.setFrequency} />
+          </AudioControlGroup>
+        </div>
 
         <AudioControlGroup label='Volume Envelope'>
           <Slider label='Attack'
@@ -93,21 +91,21 @@ export default class ThreeOscSynthUI extends React.Component
             min={0} max={3} step={0.1} defaultValue={0.5} onInput={envelope::envelope.setRelease} />
         </AudioControlGroup>
 
-        <AudioControlGroup label='LFO'>
-          <Slider label='Depth'
-            min={0} max={100} step={0.5} defaultValue={1} onInput={lfo::lfo.setDepth} />
-          <Slider label='Speed'
-              min={0} max={20} step={0.001} defaultValue={1} onInput={lfo::lfo.setFrequency} />
-        </AudioControlGroup>
+        <div className='audio-control-column'>
+          <AudioControlGroup label='Delay'>
+            <Slider label='Time'
+              min={0.001} max={6.4} step={0.01} defaultValue={0.5} onInput={delay::delay.setDelayTime} />
+            <Slider label='Feedback'
+              min={0} max={1} step={0.01} defaultValue={0.8} onInput={delay::delay.setFeedback} />
+            <Slider label='Mix'
+              min={0} max={1} step={0.01} defaultValue={0.15} onInput={delay::delay.setWetDryMix} />
+          </AudioControlGroup>
 
-        <AudioControlGroup label='Delay'>
-          <Slider label='Time'
-            min={0.001} max={6.4} step={0.01} defaultValue={0.5} onInput={delay::delay.setDelayTime} />
-          <Slider label='Feedback'
-            min={0} max={1} step={0.01} defaultValue={0.8} onInput={delay::delay.setFeedback} />
-          <Slider label='Mix'
-            min={0} max={1} step={0.01} defaultValue={0.15} onInput={delay::delay.setWetDryMix} />
-        </AudioControlGroup>
+          <AudioControlGroup label='Reverb'>
+            <Slider label='Wet/Dry'
+              min={0} max={1} step={0.01} defaultValue={0.5} onInput={convolver::convolver.setWetDryMix} />
+          </AudioControlGroup>
+        </div>
 
         <AudioControlGroup label='EQ'>
           <Slider label='Low Frequency'
@@ -122,10 +120,17 @@ export default class ThreeOscSynthUI extends React.Component
             min={-50} max={25} step={0.01} defaultValue={0} onInput={eq3::eq3.highSetGain} />
         </AudioControlGroup>
 
-        <AudioControlGroup label='Reverb'>
-          <Slider label='Wet/Dry'
-            min={0} max={1} step={0.01} defaultValue={0.5} onInput={convolver::convolver.setWetDryMix} />
-        </AudioControlGroup>
+        <Keyboard octaves={6} startingOctave={2}
+          onKeypress={[
+            osc1::osc1.setFrequency,
+            osc2::osc2.setFrequency,
+            osc3::osc3.setFrequency,
+            envelope::envelope.triggerADS,
+          ]}
+          onKeyRelease={[
+            envelope::envelope.triggerRelease
+          ]}
+        />
       </div>
     )
   }
diff --git a/style/_variables.scss b/style/_variables.scss
new file mode 100644
index 0000000..25beb50
--- /dev/null
+++ b/style/_variables.scss
@@ -0,0 +1 @@
+$primary-color: #8500FF;
diff --git a/style/style.scss b/style/style.scss
index 590299f..d405675 100644
--- a/style/style.scss
+++ b/style/style.scss
@@ -1,31 +1,57 @@
 @import 'bootstrap';
 @import 'react-bootstrap-switch';
-@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,300,500,700');
+@import url('https://fonts.googleapis.com/css?family=Francois+One');
+@import './_variables.scss';
+@import './three-osc-synth.scss';
 
 body {
   padding: 10px;
-  font-family: 'Roboto Mono', monospace;
+  font-family: 'Francois One', monospace;
+  background: #111;
 }
 
 .nav {
   margin-bottom: 10px;
 }
 
+.nav-pills > li > a {
+  color: #ccc;
+
+  &:hover {
+    background: transparent;
+    color: #fff;
+  }
+}
+
+.nav-pills > li.active > a,
+.nav-pills > li.active > a:hover,
+.nav-pills > li.active > a:focus {
+  background: #222;
+}
+
 .audio-control-group {
   margin: 6px;
   padding: 12px;
+  padding-top: 20px;
   width: 190px;
   float: left;
-  border: 1px solid #ccc;
+  border: 0;
+  border-radius: 3px;
+  background: #1a1a1a;
+  color: #fff;
   box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
 
   .audio-control {
-    margin-bottom: 8px;
-    padding: 15px;
+    margin-bottom: 0;
+    padding: 15px 8px;
     width: 164px;
     height: 78px;
     float: left;
-    border: 1px solid #ccc;
+    border: none;
+
+    &.btn-group {
+      height: 92px;
+    }
   }
 
   >.audio-control:last-child {
@@ -33,15 +59,26 @@ body {
   }
 
   h4 {
-    margin: 0 8px 8px;
-    font-size: 16px;
+    margin: 0 8px 4px;
+    font-size: 24px;
     text-transform: uppercase;
   }
+
+  .osc-power-switch {
+    padding: 4px 8px;
+    height: 33px;
+  }
+}
+
+.audio-control-column {
+  width: 202px;
+  float: left;
 }
 
 .audio-control-label {
   margin-bottom: 5px;
   display: block;
+  font-size: 18px;
   font-weight: 500;
 }
 
@@ -50,7 +87,7 @@ body {
 }
 
 .keyboard {
-  padding: 0 0 5px 5px;
+  padding: 5px;
   clear: both;
   zoom: 1.3;
 }
@@ -63,13 +100,15 @@ body {
   width: 350px;
   height: 100px;
   background: #337ab7;
+  display: none;
 }
 
 input[type='radio'] {
   &:checked + span {
-    padding: 5px 8px;
-    margin: -4px -8px;
-    background: #eee;
+    padding: 6px 10px;
+    margin: -6px -10px;
+    background: $primary-color;
+    color: #fff;
   }
 }
 
@@ -81,7 +120,7 @@ input[type='radio'] {
 
   &.keyboard-key-black {
     position: relative;
-    top: -34px;
+    top: -35px;
     width: 6px;
     height: 66px;
     margin: 0 -9px;
@@ -98,3 +137,70 @@ input[type='radio'] {
     outline: none;
   }
 }
+
+input[type=range] {
+  -webkit-appearance: none;
+  margin: 18px 0;
+  width: 100%;
+}
+
+input[type=range]:focus {
+  outline: none;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 8.4px;
+  cursor: pointer;
+  animate: 0.2s;
+  background: #333;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  border: 1px solid #000000;
+  height: 24px;
+  width: 12px;
+  background: #aaa;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -8px;
+
+  &:hover {
+    background: #ccc;
+  }
+}
+
+input[type=range]:focus::-webkit-slider-runnable-track {
+  background: #555;
+}
+
+.bootstrap-switch {
+  border: none;
+}
+
+.bootstrap-switch-focused {
+  box-shadow: none;
+}
+
+.bootstrap-switch .bootstrap-switch-label {
+  background: $primary-color;
+}
+
+.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label {
+  background: #666;
+}
+
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
+  background: darken($primary-color, 15%);
+}
+
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default {
+  background: #333;
+  color: #fff;
+}
+
+.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
+  background: #333;
+  color: #aaa;
+}
diff --git a/style/three-osc-synth.scss b/style/three-osc-synth.scss
new file mode 100644
index 0000000..beb4f08
--- /dev/null
+++ b/style/three-osc-synth.scss
@@ -0,0 +1,50 @@
+@import './_variables.scss';
+
+.three-osc-synth {
+  @media(min-width: 930px) {
+    zoom: 0.63;
+  }
+
+  @media(min-width: 1030px) {
+    zoom: 0.7;
+  }
+
+  @media(min-width: 1100px) {
+    zoom: 0.75;
+  }
+
+  @media(min-width: 1195px) {
+    zoom: 0.82;
+  }
+
+  .keyboard {
+    width: 900px;
+    height: 102px;
+    overflow: hidden;
+    zoom: 1.6;
+  }
+
+  .btn-waveform-type {
+    margin-top: 5px;
+    padding: 6px 10px;
+    background: #333;
+    border: none;
+    color: #666;
+
+    &:hover {
+      background: #3a3a3a;
+    }
+
+    &:active {
+      color: #555;
+    }
+
+    @media(min-width: 930px) {
+      zoom: 0.8;
+    }
+
+    @media(min-width: 1100px) {
+      zoom: 1;
+    }
+  }
+}