diff --git a/src/Main/Toolbox/Keyboard/Keys/index.jsx b/src/Main/Toolbox/Keyboard/Keys/index.jsx
index f0f4695..e34a768 100644
--- a/src/Main/Toolbox/Keyboard/Keys/index.jsx
+++ b/src/Main/Toolbox/Keyboard/Keys/index.jsx
@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-
 import CSSModules from 'react-css-modules';
 import styles from './styles.scss';
 
diff --git a/src/Main/Toolbox/Keyboard/Panel/Transpose/index.jsx b/src/Main/Toolbox/Keyboard/Panel/Transpose/index.jsx
index 756a59c..5be0697 100644
--- a/src/Main/Toolbox/Keyboard/Panel/Transpose/index.jsx
+++ b/src/Main/Toolbox/Keyboard/Panel/Transpose/index.jsx
@@ -5,13 +5,25 @@ import { actions } from '../../../Keyboard/reducer'
 
 import Adjuster from '../components/adjuster'
 
-const Transpose = function({ transposition, incrementKey, decrementKey }) {
+const CHR_SCALE = ["C", "C#", "D", "D#", "E", "F",
+                   "F#", "G", "G#", "A", "A#", "B"];
+
+
+const getPitchFromOffset = (offset) => {
+	let idx = offset;
+	while(idx < 0){ idx += CHR_SCALE.length; }
+	idx %= 12;
+
+	return CHR_SCALE[idx];
+}
+
+const Transpose = function({ pitchOffset, incrementKey, decrementKey }) {
 	return (
 		<div className='panelcontrol'>
 			<label>transpose</label>
 
 			<div>
-				<Adjuster value={transposition}
+				<Adjuster value={getPitchFromOffset(pitchOffset)}
 									onIncrement={incrementKey}
 									onDecrement={decrementKey} />
 			</div>
@@ -21,7 +33,7 @@ const Transpose = function({ transposition, incrementKey, decrementKey }) {
 
 // Transpose container
 
-const mapStateToProps = ({ transposition }) => ({ transposition })
+const mapStateToProps = ({ pitchOffset }) => ({ pitchOffset })
 
 const mapDispatchToProps = dispatch => bindActionCreators(actions, dispatch)
 
diff --git a/src/Main/Toolbox/Keyboard/reducer.js b/src/Main/Toolbox/Keyboard/reducer.js
index 3452ca2..882b813 100644
--- a/src/Main/Toolbox/Keyboard/reducer.js
+++ b/src/Main/Toolbox/Keyboard/reducer.js
@@ -8,30 +8,37 @@ export const types = {
   INCREMENT_KEY: 'KEYBOARD/INCREMENT_KEY',
 }
 
+const pitchShift = new Tone.PitchShift().toMaster();
+
 export const initialState = {
   overlay: 'none',
   frequency: 440,
-  transposition: 'C',
-  synth: new Tone.PolySynth(6).toMaster()
+  pitchOffset: pitchShift.pitch,
+  synth: new Tone.PolySynth(6).connect(pitchShift),
+  pitchShift
 }
 
 export default (state = initialState, action) => {
   switch (action.type) {
     case types.SET_OVERLAY:
       return { ...state, overlay: action.overlay }
+
     case types.INCREMENT_FREQ:
       state.synth.voices.forEach(voice => voice.frequency.value += 1)
       return { ...state, frequency: state.frequency + 1 }
+
     case types.DECREMENT_FREQ:
       state.synth.voices.forEach(voice => voice.frequency.value -= 1)
       return { ...state, frequency:  state.frequency - 1 }
+
     case types.INCREMENT_KEY:
+      pitchShift.pitch += 1;
+      return { ...state, pitchOffset: state.pitchOffset + 1 }
 
-      // use tone.pitchShift
-      return { ...state, transposition: state.transposition + 1 }
     case types.DECREMENT_KEY:
+      pitchShift.pitch -= 1;
+      return { ...state, pitchOffset:  state.pitchOffset - 1 }
 
-      return { ...state, transposition:  state.transposition - 1 }
     default:
       return state
   }
@@ -39,8 +46,8 @@ export default (state = initialState, action) => {
 
 export const actions = {
   setOverlay: (overlay) => ({ type: types.SET_OVERLAY, overlay }),
-  incrementFreq: () => ({ type: types.INCREMENT_FREQ }),
-  decrementFreq: () => ({ type: types.DECREMENT_FREQ }),
-  incrementKey: () => ({ type: types.INCREMENT_KEY }),
-  decrementKey: () => ({ type: types.DECREMENT_FREQ })
+  incrementFreq:     () => ({ type: types.INCREMENT_FREQ }),
+  decrementFreq:     () => ({ type: types.DECREMENT_FREQ }),
+  incrementKey:      () => ({ type: types.INCREMENT_KEY }),
+  decrementKey:      () => ({ type: types.DECREMENT_KEY })
 }
diff --git a/src/Main/Toolbox/index.jsx b/src/Main/Toolbox/index.jsx
index 864d43e..31ca8bb 100644
--- a/src/Main/Toolbox/index.jsx
+++ b/src/Main/Toolbox/index.jsx
@@ -5,6 +5,7 @@ import styles from './styles.scss';
 import Keyboard from './Keyboard';
 
 
+
 class Toolbox extends Component {
 	render() {
 		return (