diff --git a/src/App.js b/src/App.js
index be3b5fd..3988204 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,9 +4,9 @@ import Editor from './features/editor';
 
 function App() {
   return (
-    <div className='grid grid-cols-6 grid-rows-1 gap-4 h-screen'>
-      <Menu className='col-span-1' />
-      <Editor className='col-span-5' />
+    <div className='bg-gray-100 grid grid-cols-6 grid-rows-1 gap-4 h-screen'>
+      <Menu />
+      <Editor />
     </div>
   );
 }
diff --git a/src/features/editor/Timbre.js b/src/features/editor/Timbre.js
index dea804a..a20a2d9 100644
--- a/src/features/editor/Timbre.js
+++ b/src/features/editor/Timbre.js
@@ -13,8 +13,9 @@ import { selectById } from './timbreSlice.js';
 export default function Timbre(props) {
   const ids = useSelector((state) => selectById(state, props.id));
   return (
-    <div>
+    <div className='h-screen grid grid-cols-8 grid-rows-3 gap-4 m-6'>
       <VCO
+        className='col-span-2'
         name='VCO 1'
         id={ids.vco1}
         waveforms={[
@@ -96,6 +97,7 @@ export default function Timbre(props) {
         ]}
       />
       <VCO
+        className='col-span-2'
         name='VCO 2'
         id={ids.vco2}
         waveforms={[
@@ -111,14 +113,14 @@ export default function Timbre(props) {
           { value: 'Ring Sync' },
         ]}
       />
-      <Mixer name='Mixer' id={ids.mixer} />
-      <Pitch name='Pitch' id={ids.pitch} />
-      <Filter name='Filter' id={ids.filter} />
-      <Amp name='Amp' id={ids.amp} />
-      <EG name='EG 1' id={ids.eg1} />
-      <EG name='EG 2' id={ids.eg2} />
-      <div />
+      <Mixer className='col-span-1' name='Mixer' id={ids.mixer} />
+      <Pitch className='col-span-3' name='Pitch' id={ids.pitch} />
+      <Filter className='col-span-2' name='Filter' id={ids.filter} />
+      <Amp className='col-span-2' name='Amp' id={ids.amp} />
+      <EG className='col-span-2' name='EG 1' id={ids.eg1} />
+      <EG className='col-span-2' name='EG 2' id={ids.eg2} />
       <LFO
+        className='col-span-2'
         name='LFO 1'
         id={ids.lfo1}
         waveforms={[
@@ -129,6 +131,7 @@ export default function Timbre(props) {
         ]}
       />
       <LFO
+        className='col-span-2'
         name='LFO 2'
         id={ids.lfo2}
         waveforms={[
@@ -138,7 +141,7 @@ export default function Timbre(props) {
           { value: 'Sample & Hold' },
         ]}
       />
-      <Patches name='Patches' id={ids.patches} />
+      <Patches className='col-span-2' name='Patches' id={ids.patches} />
     </div>
   );
 }
diff --git a/src/features/editor/card.js b/src/features/editor/card.js
new file mode 100644
index 0000000..393f4ab
--- /dev/null
+++ b/src/features/editor/card.js
@@ -0,0 +1,16 @@
+export default function Card(props = { className: 'col-span-2' }) {
+  return (
+    <div
+      className={
+        props.className +
+        ' flex flex-col justify-start border border-gray-200 rounded-md shadow-md bg-white'
+      }>
+      <header className='flex items-start justify-between py-3 px-4 border-b border-solid border-gray-200'>
+        <h3 className='text-xl font-semibold text-gray-900'>{props.header}</h3>
+      </header>
+      <section className='flex-grow flex flex-col justify-evenly px-6'>
+        {props.children}
+      </section>
+    </div>
+  );
+}
diff --git a/src/features/editor/index.js b/src/features/editor/index.js
index 2d610f7..af45d38 100644
--- a/src/features/editor/index.js
+++ b/src/features/editor/index.js
@@ -4,10 +4,10 @@ import Effects from './Effects';
 import Arpeggio from './Arpeggio';
 import { useSelector } from 'react-redux';
 
-const Editor = () => {
+export default function Editor() {
   const activeTab = useSelector((state) => state.parameters.activeTab);
   return (
-    <div>
+    <div className='col-span-5'>
       {activeTab === 'Timbre1' ? <Timbre id='timbre1' /> : null}
       {activeTab === 'Timbre2' ? <Timbre id='timbre2' /> : null}
       {activeTab === 'Vocoder' ? <Vocoder id='vocoder' /> : null}
@@ -15,6 +15,4 @@ const Editor = () => {
       {activeTab === 'Arpeggio' ? <Arpeggio id='arpeggio' /> : null}
     </div>
   );
-};
-
-export default Editor;
+}
diff --git a/src/features/editor/parameters/Amp.js b/src/features/editor/parameters/Amp.js
index ac0f43a..38cfa20 100644
--- a/src/features/editor/parameters/Amp.js
+++ b/src/features/editor/parameters/Amp.js
@@ -8,7 +8,7 @@ export default function Amp(props) {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <div className={props.className}>
       <span>{`${props.name}`}</span>
       Amp Level
       <Slider
@@ -73,7 +73,7 @@ export const VocoderAmp = (props) => {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <div className={props.className}>
       <span>{`${props.name}`}</span>
       Amp Level
       <Slider
diff --git a/src/features/editor/parameters/EG.js b/src/features/editor/parameters/EG.js
index 9db42f0..03c4e65 100644
--- a/src/features/editor/parameters/EG.js
+++ b/src/features/editor/parameters/EG.js
@@ -8,7 +8,7 @@ export default function EG(props) {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <div className={props.className}>
       <span>{`${props.name}`}</span>
       Attack
       <Slider
diff --git a/src/features/editor/parameters/Filter.js b/src/features/editor/parameters/Filter.js
index fde8b5d..c31439d 100644
--- a/src/features/editor/parameters/Filter.js
+++ b/src/features/editor/parameters/Filter.js
@@ -8,7 +8,7 @@ export default function Filter(props) {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <div className={props.className}>
       <span>{`${props.name}`}</span>
       Filter Type
       <SelectList
@@ -92,7 +92,7 @@ export const VocoderFilter = (props) => {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
   return (
-    <div>
+    <div className={props.className}>
       <span>{`${props.name}`}</span>
       Cutoff
       <Slider
diff --git a/src/features/editor/parameters/LFO.js b/src/features/editor/parameters/LFO.js
index 7250702..6c0b7e2 100644
--- a/src/features/editor/parameters/LFO.js
+++ b/src/features/editor/parameters/LFO.js
@@ -8,7 +8,7 @@ export default function LFO(props) {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <div className={props.className}>
       <span>{`${props.name}`}</span>
       LFO Waveform
       <SelectList
diff --git a/src/features/editor/parameters/Mixer.js b/src/features/editor/parameters/Mixer.js
index 2e37503..278db9d 100644
--- a/src/features/editor/parameters/Mixer.js
+++ b/src/features/editor/parameters/Mixer.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Card from '../card';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Slider } from '../../helpers/Helpers';
@@ -8,50 +9,55 @@ export default function Mixer(props) {
   const dispatch = useDispatch();
 
   return (
-    <div>
-      <span>{`${props.name}`}</span>
-      Volume 1
-      <Slider
-        min={0}
-        max={127}
-        parameter={parameters.vol1}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { vol1: value },
-            })
-          )
-        }
-      />
-      Volume 2
-      <Slider
-        min={0}
-        max={127}
-        parameter={parameters.vol2}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { vol2: value },
-            })
-          )
-        }
-      />
-      Volume 3
-      <Slider
-        min={0}
-        max={127}
-        parameter={parameters.vol3}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { vol3: value },
-            })
-          )
-        }
-      />
-    </div>
+    <Card header={props.name}>
+      <div className='-mt-2'>
+        <h3 className='text-lg font-semibold'>Volume 1</h3>
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.vol1}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { vol1: value },
+              })
+            )
+          }
+        />
+      </div>
+      <div className='-mt-2'>
+        <h3 className='text-lg font-semibold'>Volume 2</h3>
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.vol2}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { vol2: value },
+              })
+            )
+          }
+        />
+      </div>
+      <div>
+        <h3 className='text-lg font-semibold'>Volume 3</h3>
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.vol3}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { vol3: value },
+              })
+            )
+          }
+        />
+      </div>
+    </Card>
   );
 }
diff --git a/src/features/editor/parameters/Patches.js b/src/features/editor/parameters/Patches.js
index d165ca6..fb8be2e 100644
--- a/src/features/editor/parameters/Patches.js
+++ b/src/features/editor/parameters/Patches.js
@@ -70,7 +70,7 @@ export default function Patches(props) {
   const dispatch = useDispatch();
 
   return (
-    <div id='patches'>
+    <div className={props.className} id='patches'>
       <span>{`${props.name}`}</span>
       <Patch
         patch={parameters.patch1}
diff --git a/src/features/editor/parameters/Pitch.js b/src/features/editor/parameters/Pitch.js
index 0ebfacd..65ad3f1 100644
--- a/src/features/editor/parameters/Pitch.js
+++ b/src/features/editor/parameters/Pitch.js
@@ -1,130 +1,135 @@
 import React from 'react';
+import Card from '../card';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Slider, SelectList } from '../../helpers/Helpers';
+import { Select } from '../../utils/components';
+import { Slider } from '../../helpers/Helpers';
 
 export default function Pitch(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
 
   return (
-    <div>
-      <span>{`${props.name}`}</span>
-      <div>
-        Voice Assign
-        <SelectList
-          value={parameters.voiceAssign}
-          list={[{ value: 'Mono' }, { value: 'Poly' }, { value: 'Unison' }]}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { voiceAssign: value },
-              })
-            )
-          }
-        />
-        Trigger Mode
-        <SelectList
-          value={parameters.triggerMode}
-          list={[{ value: 'Single' }, { value: 'Multiple' }]}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { triggerMode: value },
-              })
-            )
-          }
-        />
-        Transpose
-        <Slider
-          parameter={parameters.transpose}
-          min={-24}
-          max={24}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { transpose: value },
-              })
-            )
-          }
-        />
+    <Card className={props.className} header={props.name}>
+      <div className='flex flex-row justify-evenly'>
+        <div className='flex flex-col w-1/2'>
+          <h3 className='text-lg font-semibold text-gray-900'>Voice Assign</h3>
+          <Select
+            className='select w-2/4'
+            value={parameters.voiceAssign}
+            list={[{ value: 'Mono' }, { value: 'Poly' }, { value: 'Unison' }]}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { voiceAssign: value },
+                })
+              )
+            }
+          />
+          <h3 className='text-lg font-semibold text-gray-900'>Trigger Mode</h3>
+          <Select
+            className='select w-2/4'
+            value={parameters.triggerMode}
+            list={[{ value: 'Single' }, { value: 'Multiple' }]}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { triggerMode: value },
+                })
+              )
+            }
+          />
+          <h3 className='font-normal mt-1'>Transpose</h3>
+          <Slider
+            parameter={parameters.transpose}
+            min={-24}
+            max={24}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { transpose: value },
+                })
+              )
+            }
+          />
+          <h3 className='font-normal'>Tune</h3>
+          <Slider
+            parameter={parameters.tune}
+            min={-50}
+            max={50}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { tune: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='w-10'></div>
+        <div className='flex flex-col justify-evenly w-1/2'>
+          <h3 className='font-normal mt-1'>Unison Detune</h3>
+          <Slider
+            parameter={parameters.unisonDetune}
+            min={0}
+            max={99}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { unisonDetune: value },
+                })
+              )
+            }
+          />
+          <h3 className='font-normal mt-1'>Portamento</h3>
+          <Slider
+            parameter={parameters.portamento}
+            min={0}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { portamento: value },
+                })
+              )
+            }
+          />
+          <h3 className='font-normal mt-1'>Bend Range</h3>
+          <Slider
+            parameter={parameters.bendRange}
+            min={-12}
+            max={12}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { bendRange: value },
+                })
+              )
+            }
+          />
+          <h3 className='font-normal mt-1'>Vibrato Intensity</h3>
+          <Slider
+            parameter={parameters.vibratoIntensity}
+            min={-63}
+            max={63}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { vibratoIntensity: value },
+                })
+              )
+            }
+          />
+        </div>
       </div>
-      <div />
-      <div>
-        Tune
-        <Slider
-          parameter={parameters.tune}
-          min={-50}
-          max={50}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { tune: value },
-              })
-            )
-          }
-        />
-        Unisone Detune
-        <Slider
-          parameter={parameters.unisonDetune}
-          min={0}
-          max={99}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { unisonDetune: value },
-              })
-            )
-          }
-        />
-        Portamento
-        <Slider
-          parameter={parameters.portamento}
-          min={0}
-          max={127}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { portamento: value },
-              })
-            )
-          }
-        />
-        Bend Range
-        <Slider
-          parameter={parameters.bendRange}
-          min={-12}
-          max={12}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { bendRange: value },
-              })
-            )
-          }
-        />
-        Vibrato Intensity
-        <Slider
-          parameter={parameters.vibratoIntensity}
-          min={-63}
-          max={63}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { vibratoIntensity: value },
-              })
-            )
-          }
-        />
-      </div>
-    </div>
+    </Card>
   );
 }
diff --git a/src/features/editor/parameters/VCO.js b/src/features/editor/parameters/VCO.js
index 2ebbbc9..7c2c6fd 100644
--- a/src/features/editor/parameters/VCO.js
+++ b/src/features/editor/parameters/VCO.js
@@ -1,70 +1,81 @@
 import React from 'react';
+import Card from '../card';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
+import { Select } from '../../utils/components';
+import { Slider, Checkbox } from '../../helpers/Helpers';
 
 export default function VCO(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
-
   const dispatch = useDispatch();
+
   return (
-    <div>
-      <span>{`${props.name}`}</span>
-      Waveform
-      <SelectList
-        value={parameters.waveform}
-        list={props.waveforms}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { waveform: value },
-            })
-          )
-        }
-      />
-      {`${props.dwgsOrModTypeName}`}
-      <SelectList
-        value={parameters.dwgsOrModType}
-        list={props.dwgsOrModType}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { dwgsOrModType: value },
-            })
-          )
-        }
-      />
-      Waveform Mod
-      <Slider
-        min={0}
-        max={127}
-        parameter={parameters.waveMod}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { waveMod: value },
-            })
-          )
-        }
-      />
-      LFO Mod
-      <Slider
-        min={0}
-        max={127}
-        parameter={parameters.lfoMod}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { lfoMod: value },
-            })
-          )
-        }
-      />
-    </div>
+    <Card className='col-span-2' header={props.name}>
+      <div className='flex items-center justify-between'>
+        <h3 className='text-lg font-semibold text-gray-900'>Waveform</h3>
+        <Select
+          className='select w-3/5'
+          value={parameters.waveform}
+          list={props.waveforms}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { waveform: value },
+              })
+            )
+          }
+        />
+      </div>
+      <div className='flex items-center justify-between'>
+        <h3 className='text-lg font-semibold text-gray-900'>{`${props.dwgsOrModTypeName}`}</h3>
+        <Select
+          className='select w-3/5'
+          value={parameters.dwgsOrModType}
+          list={props.dwgsOrModType}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { dwgsOrModType: value },
+              })
+            )
+          }
+        />
+      </div>
+      <div className='flex items-center justify-center'>
+        <h3 className='text-lg font-semibold text-gray-900'>Waveform Mod</h3>
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.waveMod}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { waveMod: value },
+              })
+            )
+          }
+        />
+      </div>
+      <div className='flex items-center justify-center'>
+        <h3 className='text-lg font-semibold text-gray-900'>LFO Mod</h3>
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.lfoMod}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { lfoMod: value },
+              })
+            )
+          }
+        />
+      </div>
+    </Card>
   );
 }
 
@@ -73,7 +84,7 @@ export const AudioIn = (props) => {
   const dispatch = useDispatch();
 
   return (
-    <div>
+    <div className={props.className}>
       <span>{`${props.name}`}</span>
       Gate
       <Slider
diff --git a/src/features/menu/index.js b/src/features/menu/index.js
index 56af300..5d9bd72 100644
--- a/src/features/menu/index.js
+++ b/src/features/menu/index.js
@@ -30,7 +30,7 @@ export default function Menu() {
   }, [file, dispatch]);
 
   return (
-    <div className='flex flex-col justify-around border-solid border-r border-black px-4'>
+    <div className='col-span-1 flex flex-col justify-around border-solid border-r border-black bg-white px-4'>
       <div className='menu-patch-container'>
         <div className='patch-name'>
           <input
@@ -83,7 +83,7 @@ export default function Menu() {
         </div>
         <div className='patch-settings'>
           <Select
-            className='w-full bg-gray-100 rounded-md border-transparent hover:bg-gray-200 focus:bg-white focus:ring-1'
+            className='w-full select'
             value={state.patch.mode}
             list={[
               { value: 'Single' },
diff --git a/src/index.css b/src/index.css
index 77f21c4..24f69b6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -25,4 +25,7 @@ code {
   .btn:disabled {
     @apply opacity-60 hover:bg-gray-100 cursor-default;
   }
+  .select {
+    @apply block rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
+  }
 }