diff --git a/.gitignore b/.gitignore
index 86b2909..ec8d673 100755
--- a/.gitignore
+++ b/.gitignore
@@ -2,4 +2,5 @@
 node_modules
 npm-debug.log
 dist
-.idea
\ No newline at end of file
+.idea
+.vscode
\ No newline at end of file
diff --git a/.storybook/config.js b/.storybook/config.js
index 318a7f4..092bf73 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -12,6 +12,9 @@ function loadStories() {
   require('../src/components/modeKnob/modeKnobStory');
   require('../src/components/instrumentSelectorKnob/instrumentSelectorKnobStory');
   require('../src/components/masterVolumeKnob/masterVolumeKnobStory');
+  require('../src/components/IFVariationSwtich/IFVariationSwitchStory');
+  require('../src/components/basicVariationSwitch/basicVariationSwitchStory');
+  require('../src/components/drumSwitch/drumSwitchStory');
 }
 
 configure(loadStories, module);
\ No newline at end of file
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..a178f9d
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true
+  }
+}
\ No newline at end of file
diff --git a/src/components/IFVariationSwtich/IFVariationSwitch.js b/src/components/IFVariationSwtich/IFVariationSwitch.js
new file mode 100644
index 0000000..acde718
--- /dev/null
+++ b/src/components/IFVariationSwtich/IFVariationSwitch.js
@@ -0,0 +1,90 @@
+import React from 'react';
+import Radium from 'radium';
+
+import Light from '../light/light';
+import Switch from '../switch/switch';
+
+import { grey, darkBlack, silver } from '../../theme/variables';
+import { labelDarkGrey } from '../../theme/mixins';
+
+@Radium
+class IFVariationSwitch extends React.Component {
+  static propTypes = {
+    onChange: React.PropTypes.func.isRequired,
+    position: React.PropTypes.number.isRequired
+  }
+
+  render() {
+    const { onChange, position } = this.props;
+
+    const thickness = 35;
+    const length = 65;
+
+    const styles = {
+      wrapper: {
+        width: length * 1.8, height: 87.5,
+
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'space-between'
+      },
+
+      switchTitle: labelDarkGrey,
+
+      label: labelDarkGrey,
+
+      switchWrapper: {
+        width: length,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center'
+      },
+
+      labelWrapper: {
+        width: length - 15,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingTop: 5
+      },
+
+      switchOuter: {
+        backgroundColor: darkBlack,
+        borderRadius: thickness * .475
+      },
+
+      switchInner: {
+        backgroundColor: silver,
+        borderRadius: '50%',
+        border: `solid ${grey} 2px`
+      }
+    };
+
+    return (
+      <div style={styles.wrapper}>
+        <div style={styles.switchTitle}>I / F - VARIATION</div>
+        <div style={styles.switchWrapper}>
+          <Switch
+            position={position}
+            onChange={onChange}
+            direction='horizontal'
+            numPositions={2}
+            thickness={thickness}
+            length={length}
+            padding={5}
+            innerThickness={thickness - 10}
+            outerStyle={styles.switchOuter}
+            innerStyle={styles.switchInner} />
+          <div style={styles.labelWrapper}>
+            <div style={styles.label}>A</div>
+            <div style={styles.label}>B</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default IFVariationSwitch;
\ No newline at end of file
diff --git a/src/components/IFVariationSwtich/IFVariationSwitchStory.js b/src/components/IFVariationSwtich/IFVariationSwitchStory.js
new file mode 100644
index 0000000..902b791
--- /dev/null
+++ b/src/components/IFVariationSwtich/IFVariationSwitchStory.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import IFVariationSwitch from './IFVariationSwitch';
+
+import { grey } from '../../theme/variables';
+
+class SwitchWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      switchPosition: 0
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(value) {
+    this.setState({
+      switchPosition: value
+    });
+  }
+
+  render() {
+    const style = {
+      width: '100%', height: '100%',
+      backgroundColor: grey,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+
+    return (
+      <div style={style}>
+        <IFVariationSwitch
+          onChange={this.handleChange}
+          position={this.state.switchPosition} />
+      </div>
+    );
+  }
+}
+
+storiesOf('IFVariationSwitch', module)
+  .add('default', () => (
+    <SwitchWrapper />
+  ));
\ No newline at end of file
diff --git a/src/components/basicVariationSwitch/basicVariationSwitch.js b/src/components/basicVariationSwitch/basicVariationSwitch.js
new file mode 100644
index 0000000..896b7d9
--- /dev/null
+++ b/src/components/basicVariationSwitch/basicVariationSwitch.js
@@ -0,0 +1,109 @@
+import React from 'react';
+import Radium from 'radium';
+
+import Light from '../light/light';
+import Switch from '../switch/switch';
+
+import { grey, darkBlack, silver } from '../../theme/variables';
+import { labelDarkGrey } from '../../theme/mixins';
+
+@Radium
+class BasicVariationSwitch extends React.Component {
+  static propTypes = {
+    onChange: React.PropTypes.func.isRequired,
+    position: React.PropTypes.number.isRequired,
+    aActive: React.PropTypes.bool.isRequired,
+    bActive: React.PropTypes.bool.isRequired,
+  }
+
+  render() {
+    const { onChange, position, aActive, bActive } = this.props;
+
+    const thickness = 35;
+    const length = 100;
+
+    const styles = {
+      wrapper: {
+        width: length * 1.8, height: 130,
+
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'space-between'
+      },
+
+      switchTitle: labelDarkGrey,
+
+      label: labelDarkGrey,
+
+      switchWrapper: {
+        width: length,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center'
+      },
+
+      labelWrapper: {
+        width: length - 15,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingTop: 10,
+        borderRadius: 1
+      },
+
+      lightsWrapper: {
+        width: length,
+        height: thickness - 5,
+        backgroundColor: darkBlack,
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: 4
+      },
+
+      switchOuter: {
+        backgroundColor: darkBlack,
+        borderRadius: thickness * .475
+      },
+
+      switchInner: {
+        backgroundColor: silver,
+        borderRadius: '50%',
+        border: `solid ${grey} 2px`
+      }
+    };
+
+    return (
+      <div style={styles.wrapper}>
+        <div style={styles.switchTitle}>BASIC VARIATION</div>
+        <div style={styles.switchWrapper}>
+          <Switch
+            position={position}
+            onChange={onChange}
+            direction='horizontal'
+            numPositions={3}
+            thickness={thickness}
+            length={length}
+            padding={5}
+            innerThickness={thickness - 10}
+            outerStyle={styles.switchOuter}
+            innerStyle={styles.switchInner} />
+          <div style={styles.labelWrapper}>
+            <div style={styles.label}>A</div>
+            <div style={styles.label}>AB</div>
+            <div style={styles.label}>B</div>
+          </div>
+        </div>
+        <div style={styles.lightsWrapper}>
+          <Light active={aActive} />
+          <Light active={bActive} />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default BasicVariationSwitch;
\ No newline at end of file
diff --git a/src/components/basicVariationSwitch/basicVariationSwitchStory.js b/src/components/basicVariationSwitch/basicVariationSwitchStory.js
new file mode 100644
index 0000000..e593fe8
--- /dev/null
+++ b/src/components/basicVariationSwitch/basicVariationSwitchStory.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import BasicVariationSwitch from './BasicVariationSwitch';
+
+import { grey } from '../../theme/variables';
+
+class SwitchWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      switchPosition: 0,
+      aActive: true,
+      bActive: false
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(value) {
+    let aActive, bActive;
+
+    switch (value) {
+      case 0:
+        aActive = true;
+        bActive = false;
+        break;
+      case 1:
+        aActive = true;
+        bActive = true;
+        break;
+      case 2:
+        aActive = false;
+        bActive = true;
+        break;
+    }
+
+    this.setState({
+      switchPosition: value,
+      aActive, bActive
+    });
+  }
+
+  render() {
+    const style = {
+      width: '100%', height: '100%',
+      backgroundColor: grey,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+
+    return (
+      <div style={style}>
+        <BasicVariationSwitch
+          onChange={this.handleChange}
+          position={this.state.switchPosition}
+          aActive={this.state.aActive}
+          bActive={this.state.bActive} />
+      </div>
+    );
+  }
+}
+
+storiesOf('BasicVariationSwitch', module)
+  .add('default', () => (
+    <SwitchWrapper />
+  ));
\ No newline at end of file
diff --git a/src/components/drumSwitch/drumSwitch.js b/src/components/drumSwitch/drumSwitch.js
new file mode 100644
index 0000000..ef16f97
--- /dev/null
+++ b/src/components/drumSwitch/drumSwitch.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import Radium from 'radium';
+
+import Switch from '../switch/switch';
+
+import { darkBlack, slightlyDarkerBlack } from '../../theme/variables';
+
+const borderRadius = 2;
+
+@Radium
+class DrumSwitch extends React.Component {
+  static propTypes = {
+    onChange: React.PropTypes.func.isRequired,
+    position: React.PropTypes.number.isRequired
+  }
+
+  render() {
+    const styles = {
+      inner: {
+        backgroundColor: darkBlack,
+        borderRadius: borderRadius
+      },
+
+      outer: {
+        backgroundColor: slightlyDarkerBlack,
+        borderRadius: borderRadius
+      }
+    };
+
+    return (
+      <Switch
+        {...this.props}
+        direction='vertical'
+        numPositions={2}
+        thickness={30}
+        length={50}
+        padding={4}
+        innerThickness={22}
+        outerStyle={styles.outer}
+        innerStyle={styles.inner} />
+    );
+  }
+}
+
+export default DrumSwitch;
\ No newline at end of file
diff --git a/src/components/drumSwitch/drumSwitchStory.js b/src/components/drumSwitch/drumSwitchStory.js
new file mode 100644
index 0000000..b641d06
--- /dev/null
+++ b/src/components/drumSwitch/drumSwitchStory.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import DrumSwitch from './drumSwitch';
+
+import { grey } from '../../theme/variables';
+
+class SwitchWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      switchPosition: 0
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(value) {
+    this.setState({
+      switchPosition: value
+    });
+  }
+
+  render() {
+
+    return (
+      <DrumSwitch
+        onChange={this.handleChange}
+        position={this.state.switchPosition} />
+    );
+  }
+}
+
+storiesOf('DrumSwitch', module)
+  .add('default', () => (
+    <SwitchWrapper />
+  ));
\ No newline at end of file
diff --git a/src/components/switch/switchStory.js b/src/components/switch/switchStory.js
index 665a461..4c4b79c 100644
--- a/src/components/switch/switchStory.js
+++ b/src/components/switch/switchStory.js
@@ -1,6 +1,3 @@
-/**
- * Created by vincentriemer on 4/23/16.
- */
 import React from 'react';
 import { storiesOf, action } from '@kadira/storybook';
 
@@ -20,7 +17,7 @@ class SwitchWrapper extends React.Component {
 
   render() {
     return <SoundSwitch
-      position={this.state.position} 
+      position={this.state.position}
       onChange={this.handleChange}
       outerStyle={{ backgroundColor: '#777', borderRadius: 35/2 }}
       innerStyle={{ backgroundColor: '#333', borderRadius: 35/2 }}
@@ -29,7 +26,7 @@ class SwitchWrapper extends React.Component {
   }
 }
 
-storiesOf('DrumSwitch', module)
+storiesOf('Switch', module)
   .add('Horizontal switch with 2 positions', () => (
   <SwitchWrapper
     direction='horizontal'
diff --git a/src/theme/mixins.js b/src/theme/mixins.js
index 8e91d65..01b5b7a 100644
--- a/src/theme/mixins.js
+++ b/src/theme/mixins.js
@@ -1,5 +1,5 @@
 import {
-  fontFamily, fontWeight, textAlign, letterSpacing, normalSize, largeSize, smallSize, xSmallSize, grey
+  fontFamily, fontWeight, textAlign, letterSpacing, normalSize, largeSize, smallSize, xSmallSize, grey, darkGrey
 } from './variables';
 
 // TYPOGRAPHY PRESETS ==========================
@@ -31,6 +31,13 @@ export const labelGreyXSmall = {
   color: grey
 };
 
+export const labelDarkGrey = {
+  ...basePreset,
+  fontSize: normalSize,
+  color: darkGrey,
+  fontWeight: 'normal'
+};
+
 // LAYOUT MACROS ==========================
 export const ring = (size, color) => ({
   position: 'absolute',
diff --git a/src/theme/variables.js b/src/theme/variables.js
index b1e1564..7aed020 100644
--- a/src/theme/variables.js
+++ b/src/theme/variables.js
@@ -19,6 +19,7 @@ export const darkBlack = '#24251F';
 export const slightlyDarkerBlack = '#161711';
 
 export const white = '#FFFFFF';
+export const silver = '#D6D6D6';
 
 // TEXT ========================================
 export const fontFamily = '"aktiv-grotesk", sans-serif';