diff --git a/src/features/editor/Timbre.js b/src/features/editor/Timbre.js
index 130c58a..40ba78c 100644
--- a/src/features/editor/Timbre.js
+++ b/src/features/editor/Timbre.js
@@ -115,10 +115,18 @@ export default function Timbre(props) {
       />
       <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} />
+      <div className='col-span-8 grid grid-cols-9 grid-rows-1 gap-4'>
+        <div />
+        <Amp className='col-span-2' name='Amp' id={ids.amp} />
+        <Filter className='col-span-2' name='Filter' id={ids.filter} />
+        <EG
+          className='col-span-3'
+          name='EG 1 / 2'
+          id1={ids.eg1}
+          id2={ids.eg2}
+        />
+        <div />
+      </div>
       <LFO
         className='col-span-2'
         name='LFO 1'
@@ -141,7 +149,7 @@ export default function Timbre(props) {
           { value: 'Sample & Hold' },
         ]}
       />
-      <Patches className='col-span-2' name='Patches' id={ids.patches} />
+      <Patches className='col-span-4' name='Patches' id={ids.patches} />
     </div>
   );
 }
diff --git a/src/features/editor/parameters/Amp.js b/src/features/editor/parameters/Amp.js
index 53adfc0..2826042 100644
--- a/src/features/editor/parameters/Amp.js
+++ b/src/features/editor/parameters/Amp.js
@@ -1,9 +1,8 @@
 import React from 'react';
-import { Knob } from '../../utils/components';
+import { Knob, Checkbox } from '../../utils/components';
 import Card from '../card';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Slider, Checkbox } from '../../helpers/Helpers';
 
 export default function Amp(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
@@ -11,7 +10,83 @@ export default function Amp(props) {
 
   return (
     <Card className={props.className} header={props.name}>
-      <h3>Amp Level</h3>
+      <div className='flex flex-row '>
+        <div className='flex flex-col items-center justify-evenly w-1/2'>
+          <h3>Amp Level</h3>
+          <Knob
+            value={parameters.ampLevel}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { ampLevel: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center justify-evenly w-1/2'>
+          <h3>Pan Pot</h3>
+          <Knob
+            value={parameters.panpot}
+            dual={true}
+            max={63}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { panpot: value },
+                })
+              )
+            }
+          />
+        </div>
+      </div>
+      <div className='flex flex-row'>
+        <div className='flex flex-col items-center justify-evenly w-1/2'>
+          <h3>Keyboard Track</h3>
+          <Knob
+            value={parameters.ampTrack}
+            dual={true}
+            max={63}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { ampTrack: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center justify-start w-1/2'>
+          <h3>Distortion</h3>
+          <Checkbox
+            value={parameters.distortion}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { distortion: value },
+                })
+              )
+            }
+          />
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+export const VocoderAmp = (props) => {
+  const parameters = useSelector((state) => selectById(state, props.id));
+  const dispatch = useDispatch();
+
+  return (
+    <div className={props.className}>
+      <span>{`${props.name}`}</span>
+      Amp Level
       <Knob
         value={parameters.ampLevel}
         max={127}
@@ -24,21 +99,20 @@ export default function Amp(props) {
           )
         }
       />
-      <h3>PanPot</h3>
+      Direct Level
       <Knob
-        value={parameters.panpot}
-        dual={true}
-        max={63}
+        value={parameters.directLevel}
+        max={127}
         onChange={(value) =>
           dispatch(
             parameterUpdated({
               id: props.id,
-              changes: { panpot: value },
+              changes: { directLevel: value },
             })
           )
         }
       />
-      <h3>Amp Keyboard Tracking</h3>
+      Amp Keyboard Tracking
       <Knob
         value={parameters.ampTrack}
         dual={true}
@@ -53,72 +127,7 @@ export default function Amp(props) {
         }
       />
       <Checkbox
-        parameter={parameters.distortion}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { distortion: value },
-            })
-          )
-        }
-      />
-    </Card>
-  );
-}
-
-export const VocoderAmp = (props) => {
-  const parameters = useSelector((state) => selectById(state, props.id));
-  const dispatch = useDispatch();
-
-  return (
-    <div className={props.className}>
-      <span>{`${props.name}`}</span>
-      Amp Level
-      <Slider
-        parameter={parameters.ampLevel}
-        min={0}
-        max={127}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { ampLevel: value },
-            })
-          )
-        }
-      />
-      Direct Level
-      <Slider
-        parameter={parameters.directLevel}
-        min={0}
-        max={127}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { directLevel: value },
-            })
-          )
-        }
-      />
-      Amp Keyboard Tracking
-      <Slider
-        parameter={parameters.ampTrack}
-        min={-63}
-        max={63}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { ampTrack: value },
-            })
-          )
-        }
-      />
-      <Checkbox
-        name='Distortion'
-        parameter={parameters.distortion}
+        value={parameters.distortion}
         onChange={(value) =>
           dispatch(
             parameterUpdated({
diff --git a/src/features/editor/parameters/EG.js b/src/features/editor/parameters/EG.js
index 03c4e65..787ac3f 100644
--- a/src/features/editor/parameters/EG.js
+++ b/src/features/editor/parameters/EG.js
@@ -1,83 +1,170 @@
 import React from 'react';
+import Card from '../card';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Slider, Checkbox } from '../../helpers/Helpers';
+import { Knob, Checkbox } from '../../utils/components';
 
 export default function EG(props) {
-  const parameters = useSelector((state) => selectById(state, props.id));
+  const parameters_eg_1 = useSelector((state) => selectById(state, props.id1));
+  const parameters_eg_2 = useSelector((state) => selectById(state, props.id2));
   const dispatch = useDispatch();
 
   return (
-    <div className={props.className}>
-      <span>{`${props.name}`}</span>
-      Attack
-      <Slider
-        parameter={parameters.attack}
-        min={0}
-        max={127}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { attack: value },
-            })
-          )
-        }
-      />
-      Decay
-      <Slider
-        parameter={parameters.decay}
-        min={0}
-        max={127}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { decay: value },
-            })
-          )
-        }
-      />
-      Sustain
-      <Slider
-        parameter={parameters.sustain}
-        min={0}
-        max={127}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { sustain: value },
-            })
-          )
-        }
-      />
-      Release
-      <Slider
-        parameter={parameters.release}
-        min={0}
-        max={127}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { release: value },
-            })
-          )
-        }
-      />
-      <Checkbox
-        name='EG Reset'
-        parameter={parameters.egReset}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { egReset: value },
-            })
-          )
-        }
-      />
-    </div>
+    <Card className={props.className} header={props.name}>
+      <div className='flex flex-row justify-evenly'>
+        <div className='flex flex-col items-center'>
+          <h3>Attack</h3>
+          <Knob
+            value={parameters_eg_1.attack}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id1,
+                  changes: { attack: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center'>
+          <h3>Decay</h3>
+          <Knob
+            value={parameters_eg_1.decay}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id1,
+                  changes: { decay: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center'>
+          <h3>Sustain</h3>
+          <Knob
+            value={parameters_eg_1.sustain}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id1,
+                  changes: { sustain: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center'>
+          <h3>Release</h3>
+          <Knob
+            value={parameters_eg_1.release}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id1,
+                  changes: { release: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center'>
+          <h3>EG 1 Reset</h3>
+          <Checkbox
+            className='rounded-md border-2 text-blue-500 mt-2 w-6 h-6'
+            value={parameters_eg_1.egReset}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id1,
+                  changes: { egReset: value },
+                })
+              )
+            }
+          />
+        </div>
+      </div>
+      <div className='flex flex-row justify-evenly'>
+        <div className='flex flex-col items-center'>
+          <h3>Attack</h3>
+          <Knob
+            value={parameters_eg_2.attack}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id2,
+                  changes: { attack: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center'>
+          <h3>Decay</h3>
+          <Knob
+            value={parameters_eg_2.decay}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id2,
+                  changes: { decay: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center'>
+          <h3>Sustain</h3>
+          <Knob
+            value={parameters_eg_2.sustain}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id2,
+                  changes: { sustain: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center'>
+          <h3>Release</h3>
+          <Knob
+            value={parameters_eg_2.release}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id2,
+                  changes: { release: value },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='flex flex-col items-center'>
+          <h3>EG 2 Reset</h3>
+          <Checkbox
+            className='rounded-md border-2 text-blue-500 mt-2 w-6 h-6'
+            value={parameters_eg_2.egReset}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id2,
+                  changes: { egReset: value },
+                })
+              )
+            }
+          />
+        </div>
+      </div>
+    </Card>
   );
 }
diff --git a/src/features/editor/parameters/Filter.js b/src/features/editor/parameters/Filter.js
index ccac83e..326bcb5 100644
--- a/src/features/editor/parameters/Filter.js
+++ b/src/features/editor/parameters/Filter.js
@@ -11,8 +11,8 @@ export default function Filter(props) {
 
   return (
     <Card className={props.className} header={props.name}>
-      <div className='-mt-4 flex items-center justify-between'>
-        <h3 className='text-lg font-semibold text-gray-900'>Filter Type</h3>
+      <div className='-mt-2 flex items-center justify-between'>
+        <h3>Filter Type</h3>
         <Select
           className='select w-4/6'
           value={parameters.filterType}
@@ -32,9 +32,9 @@ export default function Filter(props) {
           }
         />
       </div>
-      <div className='flex flex-row justify-evenly'>
+      <div className='-mt-3 flex flex-row justify-evenly'>
         <div className='flex flex-col w-1/2'>
-          <div>
+          <div className='flex flex-col items-center'>
             <h3 className='text-lg font-semibold text-gray-900'>Cutoff</h3>
             <Knob
               value={parameters.cutoff}
@@ -49,7 +49,7 @@ export default function Filter(props) {
               }
             />
           </div>
-          <div className='pt-3'>
+          <div className='pt-3 flex flex-col items-center'>
             <h3 className='text-lg font-semibold text-gray-900'>Resonance</h3>
             <Knob
               value={parameters.resonance}
@@ -67,7 +67,7 @@ export default function Filter(props) {
         </div>
         <div className='px-4'></div>
         <div className='flex flex-col w-1/2'>
-          <div>
+          <div className='flex flex-col items-center'>
             <h3 className='text-lg font-semibold text-gray-900'>
               EG Intensity
             </h3>
@@ -85,9 +85,9 @@ export default function Filter(props) {
               }
             />
           </div>
-          <div className='pt-3'>
+          <div className='pt-3 flex flex-col items-center'>
             <h3 className='text-lg font-semibold text-gray-900'>
-              Keyboard Tracking
+              Keyboard Track
             </h3>
             <Knob
               value={parameters.keyboardTrack}
diff --git a/src/features/editor/parameters/LFO.js b/src/features/editor/parameters/LFO.js
index 6c0b7e2..83041a3 100644
--- a/src/features/editor/parameters/LFO.js
+++ b/src/features/editor/parameters/LFO.js
@@ -1,95 +1,109 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
+import Card from '../card';
+import { Select, Knob, Checkbox } from '../../utils/components';
 
 export default function LFO(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
 
   return (
-    <div className={props.className}>
-      <span>{`${props.name}`}</span>
-      LFO Waveform
-      <SelectList
-        value={parameters.waveform}
-        list={props.waveforms}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { waveform: value },
-            })
-          )
-        }
-      />
-      Key Sync
-      <SelectList
-        value={parameters.keySync}
-        list={[{ value: 'Off' }, { value: 'Timbre' }, { value: 'Voice' }]}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { keySync: value },
-            })
-          )
-        }
-      />
-      <div className='check-list'>
-        <Checkbox
-          name='Tempo Sync'
-          parameter={parameters.tempoSync}
+    <Card className={props.className} header={props.name}>
+      <div className='flex items-center justify-between'>
+        <h3>LFO Waveform</h3>
+        <Select
+          className='select w-3/5'
+          value={parameters.waveform}
+          list={props.waveforms}
           onChange={(value) =>
             dispatch(
               parameterUpdated({
                 id: props.id,
-                changes: { tempoSync: value },
-              })
-            )
-          }
-        />
-        <SelectList
-          value={parameters.syncNote}
-          list={[
-            { value: '1/1' },
-            { value: '3/4' },
-            { value: '2/3' },
-            { value: '1/2' },
-            { value: '3/8' },
-            { value: '1/3' },
-            { value: '1/4' },
-            { value: '3/16' },
-            { value: '1/6' },
-            { value: '1/8' },
-            { value: '3/32' },
-            { value: '1/12' },
-            { value: '1/16' },
-            { value: '1/24' },
-            { value: '1/32' },
-          ]}
-          onChange={(value) =>
-            dispatch(
-              parameterUpdated({
-                id: props.id,
-                changes: { syncNote: value },
+                changes: { waveform: value },
               })
             )
           }
         />
       </div>
-      Frequency
-      <Slider
-        parameter={parameters.frequency}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { frequency: value },
-            })
-          )
-        }
-      />
-    </div>
+      <div className='flex items-center justify-between'>
+        <h3>Key Sync</h3>
+        <Select
+          className='select w-3/5'
+          value={parameters.keySync}
+          list={[{ value: 'Off' }, { value: 'Timbre' }, { value: 'Voice' }]}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { keySync: value },
+              })
+            )
+          }
+        />
+      </div>
+      <div className='flex flex-row mb-4'>
+        <div className='flex flex-col w-1/2'>
+          <h3 className='self-center'>Tempo Sync</h3>
+          <div className='flex flex-row items-center justify-evenly'>
+            <Checkbox
+              value={parameters.tempoSync}
+              onChange={(value) =>
+                dispatch(
+                  parameterUpdated({
+                    id: props.id,
+                    changes: { tempoSync: value },
+                  })
+                )
+              }
+            />
+            <Select
+              className='select mt-2 w-2/3'
+              value={parameters.syncNote}
+              list={[
+                { value: '1/1' },
+                { value: '3/4' },
+                { value: '2/3' },
+                { value: '1/2' },
+                { value: '3/8' },
+                { value: '1/3' },
+                { value: '1/4' },
+                { value: '3/16' },
+                { value: '1/6' },
+                { value: '1/8' },
+                { value: '3/32' },
+                { value: '1/12' },
+                { value: '1/16' },
+                { value: '1/24' },
+                { value: '1/32' },
+              ]}
+              onChange={(value) =>
+                dispatch(
+                  parameterUpdated({
+                    id: props.id,
+                    changes: { syncNote: value },
+                  })
+                )
+              }
+            />
+          </div>
+        </div>
+        <div className='flex flex-col items-center w-1/2'>
+          <h3>Frequency</h3>
+          <Knob
+            value={parameters.frequency}
+            max={127}
+            onChange={(value) =>
+              dispatch(
+                parameterUpdated({
+                  id: props.id,
+                  changes: { frequency: value },
+                })
+              )
+            }
+          />
+        </div>
+      </div>
+    </Card>
   );
 }
diff --git a/src/features/editor/parameters/Mixer.js b/src/features/editor/parameters/Mixer.js
index df1c8b0..a39ec49 100644
--- a/src/features/editor/parameters/Mixer.js
+++ b/src/features/editor/parameters/Mixer.js
@@ -2,7 +2,7 @@ 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';
+import { Knob } from '../../utils/components';
 
 export default function Mixer(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
@@ -11,12 +11,11 @@ export default function Mixer(props) {
   return (
     <Card header={props.name}>
       <div className='-mt-3'>
-        <div>
+        <div className='flex flex-col items-center'>
           <h3 className='text-lg font-semibold'>Volume 1</h3>
-          <Slider
-            min={0}
+          <Knob
             max={127}
-            parameter={parameters.vol1}
+            value={parameters.vol1}
             onChange={(value) =>
               dispatch(
                 parameterUpdated({
@@ -27,12 +26,11 @@ export default function Mixer(props) {
             }
           />
         </div>
-        <div>
+        <div className='flex flex-col items-center'>
           <h3 className='text-lg font-semibold'>Volume 2</h3>
-          <Slider
-            min={0}
+          <Knob
             max={127}
-            parameter={parameters.vol2}
+            value={parameters.vol2}
             onChange={(value) =>
               dispatch(
                 parameterUpdated({
@@ -43,12 +41,11 @@ export default function Mixer(props) {
             }
           />
         </div>
-        <div>
+        <div className='flex flex-col items-center'>
           <h3 className='text-lg font-semibold'>Volume 3</h3>
-          <Slider
-            min={0}
+          <Knob
             max={127}
-            parameter={parameters.vol3}
+            value={parameters.vol3}
             onChange={(value) =>
               dispatch(
                 parameterUpdated({
diff --git a/src/features/editor/parameters/Patches.js b/src/features/editor/parameters/Patches.js
index fb8be2e..7c72baf 100644
--- a/src/features/editor/parameters/Patches.js
+++ b/src/features/editor/parameters/Patches.js
@@ -1,66 +1,75 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
+import Card from '../card';
+import { Select, Knob } from '../../utils/components';
 import { Slider, SelectList } from '../../helpers/Helpers';
 
 const Patch = (props) => {
   return (
-    <div>
-      Source
-      <SelectList
-        value={props.patch.source}
-        list={[
-          { value: 'Filter EG' },
-          { value: 'Amp Eg' },
-          { value: 'LFO 1' },
-          { value: 'LFO 2' },
-          { value: 'Velocity' },
-          { value: 'Keyboard Track' },
-          { value: 'Pitch Bend' },
-          { value: 'Mod Wheel' },
-        ]}
-        onChange={(value) =>
-          props.onChange({
-            source: value,
-            destination: props.patch.destination,
-            modIntensity: props.patch.modIntensity,
-          })
-        }
-      />
-      Destination
-      <SelectList
-        value={props.patch.destination}
-        list={[
-          { value: 'Pitch' },
-          { value: 'OSC 2 Tune' },
-          { value: 'OSC 1 Control 1' },
-          { value: 'Noise Level' },
-          { value: 'Cutoff' },
-          { value: 'Amp' },
-          { value: 'Pan' },
-          { value: 'LFO 2 Frequency' },
-        ]}
-        onChange={(value) =>
-          props.onChange({
-            source: props.patch.source,
-            destination: value,
-            modIntensity: props.patch.modIntensity,
-          })
-        }
-      />
-      Mod Intensity
-      <Slider
-        min={0}
-        max={127}
-        parameter={props.patch.modIntensity}
-        onChange={(value) =>
-          props.onChange({
-            source: props.patch.source,
-            destination: props.patch.destination,
-            modIntensity: value,
-          })
-        }
-      />
+    <div className='-mt-3 w-1/4'>
+      <div className='flex flex-col items-center justify-between'>
+        <h3>Source</h3>
+        <Select
+          className='select w-2/3'
+          value={props.patch.source}
+          list={[
+            { value: 'Filter EG' },
+            { value: 'Amp Eg' },
+            { value: 'LFO 1' },
+            { value: 'LFO 2' },
+            { value: 'Velocity' },
+            { value: 'Keyboard Track' },
+            { value: 'Pitch Bend' },
+            { value: 'Mod Wheel' },
+          ]}
+          onChange={(value) =>
+            props.onChange({
+              source: value,
+              destination: props.patch.destination,
+              modIntensity: props.patch.modIntensity,
+            })
+          }
+        />
+      </div>
+      <div className='mt-1 flex flex-col items-center justify-between'>
+        <h3>Destination</h3>
+        <Select
+          className='select w-2/3'
+          value={props.patch.destination}
+          list={[
+            { value: 'Pitch' },
+            { value: 'OSC 2 Tune' },
+            { value: 'OSC 1 Control 1' },
+            { value: 'Noise Level' },
+            { value: 'Cutoff' },
+            { value: 'Amp' },
+            { value: 'Pan' },
+            { value: 'LFO 2 Frequency' },
+          ]}
+          onChange={(value) =>
+            props.onChange({
+              source: props.patch.source,
+              destination: value,
+              modIntensity: props.patch.modIntensity,
+            })
+          }
+        />
+      </div>
+      <div className='mt-1 flex flex-col items-center'>
+        <h3>Mod Intensity</h3>
+        <Knob
+          max={127}
+          value={props.patch.modIntensity}
+          onChange={(value) =>
+            props.onChange({
+              source: props.patch.source,
+              destination: props.patch.destination,
+              modIntensity: value,
+            })
+          }
+        />
+      </div>
     </div>
   );
 };
@@ -70,59 +79,57 @@ export default function Patches(props) {
   const dispatch = useDispatch();
 
   return (
-    <div className={props.className} id='patches'>
-      <span>{`${props.name}`}</span>
-      <Patch
-        patch={parameters.patch1}
-        onChange={(value) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: {
-                patch1: value,
-              },
-            })
-          )
-        }
-      />
-      <div />
-      <Patch
-        patch={parameters.patch2}
-        onChange={(value, parameter) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: {
-                patch2: value,
-              },
-            })
-          )
-        }
-      />
-      <div />
-      <Patch
-        patch={parameters.patch3}
-        onChange={(value, parameter) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { patch3: value },
-            })
-          )
-        }
-      />
-      <div />
-      <Patch
-        patch={parameters.patch4}
-        onChange={(value, parameter) =>
-          dispatch(
-            parameterUpdated({
-              id: props.id,
-              changes: { patch4: value },
-            })
-          )
-        }
-      />
-    </div>
+    <Card className={props.className} id='patches' header={props.name}>
+      <div className='flex flex-row justify-evenly'>
+        <Patch
+          patch={parameters.patch1}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: {
+                  patch1: value,
+                },
+              })
+            )
+          }
+        />
+        <Patch
+          patch={parameters.patch2}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: {
+                  patch2: value,
+                },
+              })
+            )
+          }
+        />
+        <Patch
+          patch={parameters.patch3}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { patch3: value },
+              })
+            )
+          }
+        />
+        <Patch
+          patch={parameters.patch4}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { patch4: value },
+              })
+            )
+          }
+        />
+      </div>
+    </Card>
   );
 }
diff --git a/src/features/editor/parameters/Pitch.js b/src/features/editor/parameters/Pitch.js
index 0f710ad..11e64e2 100644
--- a/src/features/editor/parameters/Pitch.js
+++ b/src/features/editor/parameters/Pitch.js
@@ -2,7 +2,7 @@ import React from 'react';
 import Card from '../card';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Select } from '../../utils/components';
+import { Select, Knob } from '../../utils/components';
 import { Slider } from '../../helpers/Helpers';
 
 export default function Pitch(props) {
@@ -11,31 +11,47 @@ export default function Pitch(props) {
 
   return (
     <Card className={props.className} header={props.name}>
-      <div className='flex flex-row justify-evenly -mt-4'>
-        <div className='w-1/2'>
-          <div className='flex items-center justify-between'>
-            <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 },
-                  })
-                )
-              }
-            />
-          </div>
-          <div className='mt-2'>
+      <div className='flex flex-row justify-evenly'>
+        <div className='px-4 flex items-center justify-between 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 },
+                })
+              )
+            }
+          />
+        </div>
+        <div className='px-4 flex items-center justify-between w-1/2'>
+          <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 },
+                })
+              )
+            }
+          />
+        </div>
+      </div>
+      <div className='flex flex-row'>
+        <section className='w-1/3'>
+          <div className='flex flex-col items-center'>
             <h3 className='text-lg font-semibold text-gray-900'>Transpose</h3>
-            <Slider
-              parameter={parameters.transpose}
-              min={-24}
+            <Knob
+              value={parameters.transpose}
+              dual={true}
               max={24}
               onChange={(value) =>
                 dispatch(
@@ -47,11 +63,11 @@ export default function Pitch(props) {
               }
             />
           </div>
-          <div>
+          <div className='flex flex-col items-center'>
             <h3 className='text-lg font-semibold text-gray-900'>Tune</h3>
-            <Slider
-              parameter={parameters.tune}
-              min={-50}
+            <Knob
+              value={parameters.tune}
+              dual={true}
               max={50}
               onChange={(value) =>
                 dispatch(
@@ -63,13 +79,14 @@ export default function Pitch(props) {
               }
             />
           </div>
-          <div>
+        </section>
+        <section className='w-1/3'>
+          <div className='flex flex-col items-center'>
             <h3 className='text-lg font-semibold text-gray-900'>
               Unison Detune
             </h3>
-            <Slider
-              parameter={parameters.unisonDetune}
-              min={0}
+            <Knob
+              value={parameters.unisonDetune}
               max={99}
               onChange={(value) =>
                 dispatch(
@@ -81,32 +98,10 @@ export default function Pitch(props) {
               }
             />
           </div>
-        </div>
-        <div className='px-4'></div>
-        <div className='w-1/2'>
-          <div className='flex items-center justify-between'>
-            <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 },
-                  })
-                )
-              }
-            />
-          </div>
-          <div className='mt-2'>
+          <div className='flex flex-col items-center'>
             <h3 className='text-lg font-semibold text-gray-900'>Portamento</h3>
-            <Slider
-              parameter={parameters.portamento}
-              min={0}
+            <Knob
+              value={parameters.portamento}
               max={127}
               onChange={(value) =>
                 dispatch(
@@ -118,11 +113,13 @@ export default function Pitch(props) {
               }
             />
           </div>
-          <div>
+        </section>
+        <section className='w-1/3'>
+          <div className='flex flex-col items-center'>
             <h3 className='text-lg font-semibold text-gray-900'>Bend Range</h3>
-            <Slider
-              parameter={parameters.bendRange}
-              min={-12}
+            <Knob
+              value={parameters.bendRange}
+              dual={true}
               max={12}
               onChange={(value) =>
                 dispatch(
@@ -134,13 +131,13 @@ export default function Pitch(props) {
               }
             />
           </div>
-          <div>
+          <div className='flex flex-col items-center'>
             <h3 className='text-lg font-semibold text-gray-900'>
               Vibrato Intensity
             </h3>
-            <Slider
-              parameter={parameters.vibratoIntensity}
-              min={-63}
+            <Knob
+              value={parameters.vibratoIntensity}
+              dual={true}
               max={63}
               onChange={(value) =>
                 dispatch(
@@ -152,7 +149,7 @@ export default function Pitch(props) {
               }
             />
           </div>
-        </div>
+        </section>
       </div>
     </Card>
   );
diff --git a/src/features/editor/parameters/VCO.js b/src/features/editor/parameters/VCO.js
index 03a5824..e8107a4 100644
--- a/src/features/editor/parameters/VCO.js
+++ b/src/features/editor/parameters/VCO.js
@@ -44,7 +44,7 @@ export default function VCO(props) {
         />
       </div>
       <div className='mb-2 flex flex-row'>
-        <div className='w-1/2'>
+        <div className='flex flex-col items-center w-1/2'>
           <h3 className='text-lg font-semibold text-gray-900'>Waveform Mod</h3>
           <Knob
             maxValue={127}
@@ -59,7 +59,7 @@ export default function VCO(props) {
             }
           />
         </div>
-        <div className='w-1/2'>
+        <div className='flex flex-col items-center w-1/2'>
           <h3 className='text-lg font-semibold text-gray-900'>LFO Mod</h3>
           <Knob
             maxValue={127}
diff --git a/src/features/helpers/rcSelectTheme.css b/src/features/helpers/rcSelectTheme.css
index 62a7c6c..b6e6fc8 100644
--- a/src/features/helpers/rcSelectTheme.css
+++ b/src/features/helpers/rcSelectTheme.css
@@ -1,264 +1,255 @@
 .rc-slider {
-    position: relative;
-    height: 14px;
-    padding: 5px 0;
-    width: 100%;
-    border-radius: 6px;
-    touch-action: none;
-    box-sizing: border-box;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    margin: 5px 0;
+  position: relative;
+  height: 14px;
+  padding: 5px 0;
+  width: 100%;
+  border-radius: 6px;
+  touch-action: none;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  margin: 5px 0;
 }
 .rc-slider * {
-    box-sizing: border-box;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .rc-slider-rail {
-    position: absolute;
-    width: 100%;
-    background-color: lightgray;
-    height: 4px;
-    border-radius: 6px;
+  position: absolute;
+  width: 100%;
+  background-color: lightgray;
+  height: 4px;
+  border-radius: 6px;
 }
 .rc-slider-track {
-    position: absolute;
-    left: 0;
-    height: 4px;
-    border-radius: 6px;
-    background-color: lightgrey;
+  position: absolute;
+  left: 0;
+  height: 4px;
+  border-radius: 6px;
+  background-color: lightgrey;
 }
 .rc-slider-handle {
-    position: absolute;
-    width: 14px;
-    height: 14px;
-    cursor: pointer;
-    cursor: -webkit-grab;
-    margin-top: -5px;
-    cursor: grab;
-    border-radius: 50%;
-    background-color: slategrey;
-    touch-action: pan-x;
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  cursor: -webkit-grab;
+  margin-top: -5px;
+  cursor: grab;
+  border-radius: 50%;
+  background-color: slategrey;
+  touch-action: pan-x;
 }
 .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
-    background-color: slateblue;
+  background-color: slateblue;
 }
 .rc-slider-handle:focus {
-    outline: none;
+  outline: none;
 }
 .rc-slider-handle-click-focused:focus {
-    background-color: slateblue;
+  background-color: slateblue;
 }
 .rc-slider-handle:hover {
-    background-color: slateblue;
+  background-color: slateblue;
 }
 .rc-slider-handle:active {
-    background-color: slateblue;
-    cursor: -webkit-grabbing;
-    cursor: grabbing;
+  background-color: slateblue;
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
 }
 .rc-slider-mark {
-    position: absolute;
-    top: 18px;
-    left: 0;
-    width: 100%;
-    font-size: 12px;
+  position: absolute;
+  top: 18px;
+  left: 0;
+  width: 100%;
+  font-size: 12px;
 }
 .rc-slider-mark-text {
-    position: absolute;
-    display: inline-block;
-    vertical-align: middle;
-    text-align: center;
-    cursor: pointer;
-    color: #999;
+  position: absolute;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+  color: #999;
 }
 .rc-slider-mark-text-active {
-    color: #666;
+  color: #666;
 }
 .rc-slider-step {
-    position: absolute;
-    width: 100%;
-    height: 4px;
-    background: transparent;
+  position: absolute;
+  width: 100%;
+  height: 4px;
+  background: transparent;
 }
 .rc-slider-dot {
-    position: absolute;
-    bottom: -2px;
-    margin-left: -4px;
-    width: 8px;
-    height: 8px;
-    border: 2px solid #e9e9e9;
-    background-color: #fff;
-    cursor: pointer;
-    border-radius: 50%;
-    vertical-align: middle;
+  position: absolute;
+  bottom: -2px;
+  margin-left: -4px;
+  width: 8px;
+  height: 8px;
+  border: 2px solid #e9e9e9;
+  background-color: #fff;
+  cursor: pointer;
+  border-radius: 50%;
+  vertical-align: middle;
 }
 .rc-slider-dot-active {
-    border-color: #96dbfa;
+  border-color: #96dbfa;
 }
 .rc-slider-dot-reverse {
-    margin-right: -4px;
+  margin-right: -4px;
 }
 .rc-slider-disabled {
-    background-color: #e9e9e9;
+  background-color: #e9e9e9;
 }
 .rc-slider-disabled .rc-slider-track {
-    background-color: #ccc;
+  background-color: #ccc;
 }
 .rc-slider-disabled .rc-slider-handle,
 .rc-slider-disabled .rc-slider-dot {
-    border-color: #ccc;
-    box-shadow: none;
-    background-color: #fff;
-    cursor: not-allowed;
+  border-color: #ccc;
+  box-shadow: none;
+  background-color: #fff;
+  cursor: not-allowed;
 }
 .rc-slider-disabled .rc-slider-mark-text,
 .rc-slider-disabled .rc-slider-dot {
-    cursor: not-allowed !important;
+  cursor: not-allowed !important;
 }
 .rc-slider-vertical {
-    width: 14px;
-    height: 100%;
-    padding: 0 5px;
+  width: 14px;
+  height: 100%;
+  padding: 0 5px;
 }
 .rc-slider-vertical .rc-slider-rail {
-    height: 100%;
-    width: 4px;
+  height: 100%;
+  width: 4px;
 }
 .rc-slider-vertical .rc-slider-track {
-    left: 5px;
-    bottom: 0;
-    width: 4px;
+  left: 5px;
+  bottom: 0;
+  width: 4px;
 }
 .rc-slider-vertical .rc-slider-handle {
-    margin-left: -5px;
-    touch-action: pan-y;
+  margin-left: -5px;
+  touch-action: pan-y;
 }
 .rc-slider-vertical .rc-slider-mark {
-    top: 0;
-    left: 18px;
-    height: 100%;
+  top: 0;
+  left: 18px;
+  height: 100%;
 }
 .rc-slider-vertical .rc-slider-step {
-    height: 100%;
-    width: 4px;
+  height: 100%;
+  width: 4px;
 }
 .rc-slider-vertical .rc-slider-dot {
-    left: 2px;
-    margin-bottom: -4px;
+  left: 2px;
+  margin-bottom: -4px;
 }
 .rc-slider-vertical .rc-slider-dot:first-child {
-    margin-bottom: -4px;
+  margin-bottom: -4px;
 }
 .rc-slider-vertical .rc-slider-dot:last-child {
-    margin-bottom: -4px;
+  margin-bottom: -4px;
 }
 .rc-slider-tooltip-zoom-down-enter,
 .rc-slider-tooltip-zoom-down-appear {
-    animation-duration: 0.3s;
-    animation-fill-mode: both;
-    display: block !important;
-    animation-play-state: paused;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  display: block !important;
+  animation-play-state: paused;
 }
 .rc-slider-tooltip-zoom-down-leave {
-    animation-duration: 0.3s;
-    animation-fill-mode: both;
-    display: block !important;
-    animation-play-state: paused;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  display: block !important;
+  animation-play-state: paused;
 }
 .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
 .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
-    animation-name: rcSliderTooltipZoomDownIn;
-    animation-play-state: running;
+  animation-name: rcSliderTooltipZoomDownIn;
+  animation-play-state: running;
 }
 .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
-    animation-name: rcSliderTooltipZoomDownOut;
-    animation-play-state: running;
+  animation-name: rcSliderTooltipZoomDownOut;
+  animation-play-state: running;
 }
 .rc-slider-tooltip-zoom-down-enter,
 .rc-slider-tooltip-zoom-down-appear {
-    transform: scale(0, 0);
-    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+  transform: scale(0, 0);
+  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
 }
 .rc-slider-tooltip-zoom-down-leave {
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
 }
 @keyframes rcSliderTooltipZoomDownIn {
-    0% {
-        opacity: 0;
-        transform-origin: 50% 100%;
-        transform: scale(0, 0);
-    }
-    100% {
-        transform-origin: 50% 100%;
-        transform: scale(1, 1);
-    }
+  0% {
+    opacity: 0;
+    transform-origin: 50% 100%;
+    transform: scale(0, 0);
+  }
+  100% {
+    transform-origin: 50% 100%;
+    transform: scale(1, 1);
+  }
 }
 @keyframes rcSliderTooltipZoomDownOut {
-    0% {
-        transform-origin: 50% 100%;
-        transform: scale(1, 1);
-    }
-    100% {
-        opacity: 0;
-        transform-origin: 50% 100%;
-        transform: scale(0, 0);
-    }
+  0% {
+    transform-origin: 50% 100%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 100%;
+    transform: scale(0, 0);
+  }
 }
 .rc-slider-tooltip {
-    position: absolute;
-    left: -9999px;
-    top: -9999px;
-    visibility: visible;
-    box-sizing: border-box;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+  visibility: visible;
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .rc-slider-tooltip * {
-    box-sizing: border-box;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .rc-slider-tooltip-hidden {
-    display: none;
+  display: none;
 }
 .rc-slider-tooltip-placement-top {
-    padding: 4px 0 8px 0;
+  padding: 4px 0 8px 0;
 }
 .rc-slider-tooltip-inner {
-    padding: 6px 2px;
-    min-width: 24px;
-    height: 24px;
-    font-size: 12px;
-    line-height: 1;
-    color: #fff;
-    text-align: center;
-    text-decoration: none;
-    background-color: #6c6c6c;
-    border-radius: 6px;
-    box-shadow: 0 0 4px #d9d9d9;
+  padding: 6px 2px;
+  min-width: 24px;
+  height: 24px;
+  font-size: 12px;
+  line-height: 1;
+  color: #fff;
+  text-align: center;
+  text-decoration: none;
+  background-color: #6c6c6c;
+  border-radius: 6px;
+  box-shadow: 0 0 4px #d9d9d9;
 }
 .rc-slider-tooltip-arrow {
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
 }
 .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
-    bottom: 4px;
-    left: 50%;
-    margin-left: -4px;
-    border-width: 4px 4px 0;
-    border-top-color: #6c6c6c;
+  bottom: 4px;
+  left: 50%;
+  margin-left: -4px;
+  border-width: 4px 4px 0;
+  border-top-color: #6c6c6c;
 }
 span {
-    font-size: 1em;
-    line-height: 1.5em;
+  font-size: 1em;
+  line-height: 1.5em;
 }
-[type="checkbox"]:not(:checked),
-[type="checkbox"]:checked {
-    transform: matrix(1.5, 0, 0, 1.5, 0, 1.5);
-    margin: 0.75em 1em;
-}
-[type="checkbox"]:checked {
-    filter: hue-rotate(40deg);
-}
-
diff --git a/src/features/menu/index.js b/src/features/menu/index.js
index 5d9bd72..2ac4eff 100644
--- a/src/features/menu/index.js
+++ b/src/features/menu/index.js
@@ -34,7 +34,7 @@ export default function Menu() {
       <div className='menu-patch-container'>
         <div className='patch-name'>
           <input
-            className='block w-full rounded-md bg-gray-100 border-transparent hover:bg-gray-200 focus:bg-white focus:ring-1'
+            className='block w-full rounded-md rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
             placeholder='Patch Name'
             type='text'
             maxLength='12'
@@ -49,7 +49,7 @@ export default function Menu() {
             }}
           />
         </div>
-        <div className='my-1 flex flex-col items-center'>
+        <div className='my-3 flex flex-col items-center space-y-2'>
           <button
             className='btn'
             onClick={() => {
@@ -101,7 +101,7 @@ export default function Menu() {
           />
         </div>
       </div>
-      <div className='my-1 flex flex-col items-center'>
+      <div className='my-1 flex flex-col items-center space-y-2'>
         <button
           disabled={state.patch.mode === 'Vocoder'}
           className='btn'
diff --git a/src/features/utils/components.js b/src/features/utils/components.js
index 7fd34b0..768c60d 100644
--- a/src/features/utils/components.js
+++ b/src/features/utils/components.js
@@ -17,6 +17,21 @@ const Select = (props) => {
   );
 };
 
+const Checkbox = (props) => {
+  return (
+    <input
+      className={
+        props.className + ' rounded-md border-2 text-blue-500 mt-2 w-6 h-6'
+      }
+      style={props.style}
+      type='checkbox'
+      onChange={(e) => props.onChange(e.target.checked)}
+      defaultChecked={props.value}
+      value={props.value}
+    />
+  );
+};
+
 const RAD = Math.PI / 180;
 const START_ANGLE = Math.PI * 1.5 - (RAD * 45) / 2;
 const END_ANGLE = Math.PI * -0.5 + (RAD * 45) / 2;
@@ -54,7 +69,7 @@ function getKnobValue(dragStart, currentY, bipolar) {
   const slope = 0.01;
   let newValue = value + deltaY * slope;
   if (bipolar) {
-    const zeroCrossingResistance = 0; //0.3
+    const zeroCrossingResistance = 0.2; //0.3
     if (value >= 0 && newValue < 0) {
       newValue += Math.min(zeroCrossingResistance, -newValue);
     } else if (value < 0 && newValue > 0) {
@@ -169,15 +184,15 @@ function Knob({
           cx={size / 2}
           cy={size / 2}
           r={size / 2}
-          className='opacity-50'
-          style={{ mask: `url(#value-track-mask-${uid})`, fill: 'black' }}
+          className='fill-current text-blue-900 opacity-50'
+          style={{ mask: `url(#value-track-mask-${uid})` }}
         />
         {/* Value fill */}
         <circle
           cx={size / 2}
           cy={size / 2}
           r={size / 2}
-          className='fill-current text-indigo-500'
+          className='fill-current text-blue-500'
           style={{ mask: `url(#value-mask-${uid})` }}
         />
       </svg>
@@ -192,9 +207,7 @@ function Knob({
           cx={radius}
           cy={radius}
           r={radius - fillWidth}
-          style={{
-            fill: 'white',
-          }}
+          className='fill-current text-gray-300'
         />
         {/* Highlight */}
         <circle
@@ -220,12 +233,12 @@ function Knob({
               x2={size / 2}
               y2={size / 2}
               strokeLinecap='round'
-              strokeWidth='2'
-              className='stroke-current text-indigo-900'></line>
+              strokeWidth='3'
+              className='stroke-current text-blue-500'></line>
           }
         </svg>
       </svg>
     </div>
   );
 }
-export { Select, Knob };
+export { Select, Knob, Checkbox };
diff --git a/src/index.css b/src/index.css
index 820ef8e..d2a5c7c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -20,18 +20,21 @@ code {
 
 @layer base {
   h3 {
-    @apply pointer-events-none select-none;
+    @apply pointer-events-none select-none text-lg font-semibold text-gray-900;
   }
 }
 
 @layer components {
   .btn {
-    @apply mx-4 my-1 bg-gray-100 rounded-md w-32 h-10 border-transparent hover:bg-gray-200;
+    @apply w-2/3 font-semibold text-gray-700 rounded-md border px-2 py-2 border-gray-300 shadow-sm hover:bg-gray-50 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500;
   }
   .btn:disabled {
-    @apply opacity-60 hover:bg-gray-100 cursor-default;
+    @apply line-through opacity-50 hover:bg-white cursor-default;
   }
   .select {
     @apply select-none block rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
   }
+  .checkbox {
+    @apply rounded-md border-2 text-blue-500 mt-2 w-6 h-6;
+  }
 }