From 689225a6507ebcac9ba97f8474f20ecbf4bcdf8b Mon Sep 17 00:00:00 2001
From: Aoife <aoife@spinlock.icu>
Date: Fri, 2 Apr 2021 02:44:24 -0400
Subject: [PATCH] remove old styles and begin phase out old elements

---
 craco.config.js                               |   7 +
 package-lock.json                             | 785 +++++++++++++-----
 package.json                                  |  16 +-
 src/App.css                                   |  44 -
 src/App.js                                    |  11 +-
 src/features/helpers/Helpers.module.css       |   0
 src/features/menu/index.js                    |  19 +-
 src/features/menu/menu.css                    |  54 --
 src/features/timbre/Arpeggio.js               |   3 +-
 src/features/timbre/Effects.js                |   3 +-
 src/features/timbre/Timbre.js                 |   5 +-
 src/features/timbre/Timbre.module.css         | 130 ---
 src/features/timbre/Vocoder.js                | 197 +++--
 src/features/timbre/parameters/Amp.js         | 245 +++---
 src/features/timbre/parameters/Arpeggios.js   |  25 +-
 src/features/timbre/parameters/EG.js          | 151 ++--
 src/features/timbre/parameters/Filter.js      | 345 ++++----
 src/features/timbre/parameters/LFO.js         |   5 +-
 src/features/timbre/parameters/Levels.js      | 251 +++---
 src/features/timbre/parameters/Mixer.js       | 100 ++-
 src/features/timbre/parameters/ModFX.js       |  15 +-
 src/features/timbre/parameters/Pans.js        | 253 +++---
 .../timbre/parameters/Parameters.module.css   |  98 ---
 src/features/timbre/parameters/Patches.js     | 235 +++---
 src/features/timbre/parameters/Pitch.js       | 249 +++---
 src/features/timbre/parameters/VCO.js         | 245 +++---
 src/features/timbre/timbreSwitcher.js         |  22 +-
 src/features/utils/components.js              |  14 +
 src/index.css                                 |   4 +
 tailwind.config.js                            |  11 +
 30 files changed, 1802 insertions(+), 1740 deletions(-)
 create mode 100644 craco.config.js
 delete mode 100644 src/App.css
 delete mode 100644 src/features/helpers/Helpers.module.css
 delete mode 100644 src/features/menu/menu.css
 delete mode 100644 src/features/timbre/Timbre.module.css
 delete mode 100644 src/features/timbre/parameters/Parameters.module.css
 create mode 100644 src/features/utils/components.js
 create mode 100644 tailwind.config.js

diff --git a/craco.config.js b/craco.config.js
new file mode 100644
index 0000000..2835bdc
--- /dev/null
+++ b/craco.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  style: {
+    postcss: {
+      plugins: [require('tailwindcss'), require('autoprefixer')],
+    },
+  },
+};
diff --git a/package-lock.json b/package-lock.json
index 17a5920..20c6740 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1158,6 +1158,55 @@
         "minimist": "^1.2.0"
       }
     },
+    "@craco/craco": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@craco/craco/-/craco-6.1.1.tgz",
+      "integrity": "sha512-4irfOM8RgYNhFJzAXyIuM8CZLju2Jh9GdOem8uqM2/cI2xPulQSxZKU/9q3uiSbFUJfQLi3pomVKii6KzWLu3Q==",
+      "requires": {
+        "cross-spawn": "^7.0.0",
+        "lodash": "^4.17.15",
+        "semver": "^7.3.2",
+        "webpack-merge": "^4.2.2"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+          "requires": {
+            "path-key": "^3.1.0",
+            "shebang-command": "^2.0.0",
+            "which": "^2.0.1"
+          }
+        },
+        "path-key": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
+        },
+        "shebang-command": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+          "requires": {
+            "shebang-regex": "^3.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
+        },
+        "which": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
     "@csstools/convert-colors": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
@@ -1296,6 +1345,15 @@
         }
       }
     },
+    "@fullhuman/postcss-purgecss": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
+      "integrity": "sha512-kwOXw8fZ0Lt1QmeOOrd+o4Ibvp4UTEBFQbzvWldjlKv5n+G9sXfIPn1hh63IQIL8K8vbvv1oYMJiIUbuy9bGaA==",
+      "dev": true,
+      "requires": {
+        "purgecss": "^3.1.3"
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -1935,14 +1993,21 @@
       }
     },
     "@reduxjs/toolkit": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.4.0.tgz",
-      "integrity": "sha512-hkxQwVx4BNVRsYdxjNF6cAseRmtrkpSlcgJRr3kLUcHPIAMZAmMJkXmHh/eUEGTMqPzsYpJLM7NN2w9fxQDuGw==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.5.1.tgz",
+      "integrity": "sha512-PngZKuwVZsd+mimnmhiOQzoD0FiMjqVks6ituO1//Ft5UEX5Ca9of13NEjo//pU22Jk7z/mdXVsmDfgsig1osA==",
       "requires": {
-        "immer": "^7.0.3",
+        "immer": "^8.0.1",
         "redux": "^4.0.0",
         "redux-thunk": "^2.3.0",
         "reselect": "^4.0.0"
+      },
+      "dependencies": {
+        "immer": {
+          "version": "8.0.4",
+          "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.4.tgz",
+          "integrity": "sha512-jMfL18P+/6P6epANRvRk6q8t+3gGhqsJ9EuJ25AXE+9bNTYtssvzeYbEd0mXRYWCmmXSIbnlpz6vd6iJlmGGGQ=="
+        }
       }
     },
     "@rollup/plugin-node-resolve": {
@@ -2122,6 +2187,138 @@
         "loader-utils": "^2.0.0"
       }
     },
+    "@tailwindcss/forms": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.3.2.tgz",
+      "integrity": "sha512-aj2/rJsGb2whAZ/BQWHWWQRSbhH0r/l1ozOByiv+ZNjBD84GMvb5dhAyfpeasFky+EJrAwX5eaqft8NQMZFWvA==",
+      "requires": {
+        "mini-svg-data-uri": "^1.2.3"
+      }
+    },
+    "@tailwindcss/postcss7-compat": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss7-compat/-/postcss7-compat-2.0.4.tgz",
+      "integrity": "sha512-+M9a/jAKQC+q+sSwsRfYWe1tbxxXXQKuhfh1nhUzAv7A6EOV4puMzGQnTW6oL1Qn/JzCJ8ozM1WmIBPdL6kD4A==",
+      "dev": true,
+      "requires": {
+        "@fullhuman/postcss-purgecss": "^3.1.3",
+        "autoprefixer": "^9",
+        "bytes": "^3.0.0",
+        "chalk": "^4.1.0",
+        "color": "^3.1.3",
+        "detective": "^5.2.0",
+        "didyoumean": "^1.2.1",
+        "fs-extra": "^9.1.0",
+        "html-tags": "^3.1.0",
+        "lodash": "^4.17.21",
+        "modern-normalize": "^1.0.0",
+        "node-emoji": "^1.8.1",
+        "object-hash": "^2.1.1",
+        "postcss": "^7",
+        "postcss-functions": "^3",
+        "postcss-js": "^2",
+        "postcss-nested": "^4",
+        "postcss-selector-parser": "^6.0.4",
+        "postcss-value-parser": "^4.1.0",
+        "pretty-hrtime": "^1.0.3",
+        "reduce-css-calc": "^2.1.8",
+        "resolve": "^1.20.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "fs-extra": {
+          "version": "9.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+          "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+          "dev": true,
+          "requires": {
+            "at-least-node": "^1.0.0",
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "is-core-module": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
+          "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
+          "dev": true,
+          "requires": {
+            "has": "^1.0.3"
+          }
+        },
+        "lodash": {
+          "version": "4.17.21",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+          "dev": true
+        },
+        "resolve": {
+          "version": "1.20.0",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+          "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+          "dev": true,
+          "requires": {
+            "is-core-module": "^2.2.0",
+            "path-parse": "^1.0.6"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "universalify": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+          "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+          "dev": true
+        }
+      }
+    },
     "@testing-library/dom": {
       "version": "6.16.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-6.16.0.tgz",
@@ -2984,6 +3181,17 @@
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
       "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng=="
     },
+    "acorn-node": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
+      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
+      "dev": true,
+      "requires": {
+        "acorn": "^7.0.0",
+        "acorn-walk": "^7.0.0",
+        "xtend": "^4.0.2"
+      }
+    },
     "acorn-walk": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
@@ -4114,6 +4322,12 @@
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
       "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg=="
     },
+    "camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true
+    },
     "camelize": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
@@ -4168,11 +4382,6 @@
       "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
       "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw=="
     },
-    "chardet": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
-      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
-    },
     "check-types": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@@ -4280,19 +4489,6 @@
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
       "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A=="
     },
-    "cli-cursor": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
-      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
-      "requires": {
-        "restore-cursor": "^3.1.0"
-      }
-    },
-    "cli-width": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
-      "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw=="
-    },
     "cliui": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@@ -4858,6 +5054,12 @@
         }
       }
     },
+    "css-unit-converter": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
+      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
+      "dev": true
+    },
     "css-what": {
       "version": "3.4.2",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
@@ -5181,6 +5383,12 @@
         }
       }
     },
+    "defined": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
+      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
+      "dev": true
+    },
     "del": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/del/-/del-4.1.1.tgz",
@@ -5287,6 +5495,23 @@
         }
       }
     },
+    "detective": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
+      "integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
+      "dev": true,
+      "requires": {
+        "acorn-node": "^1.6.1",
+        "defined": "^1.0.0",
+        "minimist": "^1.1.1"
+      }
+    },
+    "didyoumean": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.1.tgz",
+      "integrity": "sha1-6S7f2tplN9SE1zwBcv0eugxJdv8=",
+      "dev": true
+    },
     "diff-sequences": {
       "version": "26.6.2",
       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
@@ -5524,23 +5749,23 @@
       "integrity": "sha512-VJI21MucKaqyFw0oe3j9BIg+nDF4MHzUZAmUwZzrxho+s8zPCD13Fds07Rgu+MTtAadO4tYTKFdAUksKYUyIJw=="
     },
     "elliptic": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
-      "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
+      "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
       "requires": {
-        "bn.js": "^4.4.0",
-        "brorand": "^1.0.1",
+        "bn.js": "^4.11.9",
+        "brorand": "^1.1.0",
         "hash.js": "^1.0.0",
-        "hmac-drbg": "^1.0.0",
-        "inherits": "^2.0.1",
-        "minimalistic-assert": "^1.0.0",
-        "minimalistic-crypto-utils": "^1.0.0"
+        "hmac-drbg": "^1.0.1",
+        "inherits": "^2.0.4",
+        "minimalistic-assert": "^1.0.1",
+        "minimalistic-crypto-utils": "^1.0.1"
       },
       "dependencies": {
         "bn.js": {
-          "version": "4.11.9",
-          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.9.tgz",
-          "integrity": "sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw=="
+          "version": "4.12.0",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+          "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA=="
         }
       }
     },
@@ -6555,16 +6780,6 @@
         }
       }
     },
-    "external-editor": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
-      "integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==",
-      "requires": {
-        "chardet": "^0.7.0",
-        "iconv-lite": "^0.4.24",
-        "tmp": "^0.0.33"
-      }
-    },
     "extglob": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
@@ -6686,14 +6901,6 @@
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
       "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw=="
     },
-    "figures": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
-      "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
-      "requires": {
-        "escape-string-regexp": "^1.0.5"
-      }
-    },
     "file-entry-cache": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-5.0.1.tgz",
@@ -7487,6 +7694,12 @@
         "terser": "^4.6.3"
       }
     },
+    "html-tags": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
+      "integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==",
+      "dev": true
+    },
     "html-webpack-plugin": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz",
@@ -7753,11 +7966,6 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
       "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw=="
     },
-    "immer": {
-      "version": "7.0.9",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-7.0.9.tgz",
-      "integrity": "sha512-Vs/gxoM4DqNAYR7pugIxi0Xc8XAun/uy7AQu4fLLqaTBHxjOP9pJ266Q9MWA/ly4z6rAFZbvViOtihxUZ7O28A=="
-    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -7844,94 +8052,9 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "ini": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
-      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
-    },
-    "inquirer": {
-      "version": "7.3.3",
-      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz",
-      "integrity": "sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==",
-      "requires": {
-        "ansi-escapes": "^4.2.1",
-        "chalk": "^4.1.0",
-        "cli-cursor": "^3.1.0",
-        "cli-width": "^3.0.0",
-        "external-editor": "^3.0.3",
-        "figures": "^3.0.0",
-        "lodash": "^4.17.19",
-        "mute-stream": "0.0.8",
-        "run-async": "^2.4.0",
-        "rxjs": "^6.6.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0",
-        "through": "^2.3.6"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-        },
-        "emoji-regex": {
-          "version": "8.0.0",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
-        },
-        "is-fullwidth-code-point": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
-        },
-        "string-width": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
-          "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
-          "requires": {
-            "emoji-regex": "^8.0.0",
-            "is-fullwidth-code-point": "^3.0.0",
-            "strip-ansi": "^6.0.0"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
     },
     "internal-ip": {
       "version": "4.3.0",
@@ -10110,6 +10233,12 @@
         "lodash._reinterpolate": "^3.0.0"
       }
     },
+    "lodash.toarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
+      "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=",
+      "dev": true
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -10366,6 +10495,11 @@
         }
       }
     },
+    "mini-svg-data-uri": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz",
+      "integrity": "sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ=="
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -10474,6 +10608,12 @@
         "minimist": "^1.2.5"
       }
     },
+    "modern-normalize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.0.0.tgz",
+      "integrity": "sha512-1lM+BMLGuDfsdwf3rsgBSrxJwAZHFIrQ8YR61xIqdHo0uNKI9M52wNpHSrliZATJp51On6JD0AfRxd4YGSU0lw==",
+      "dev": true
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -10506,11 +10646,6 @@
       "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE="
     },
-    "mute-stream": {
-      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
-      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA=="
-    },
     "nanoid": {
       "version": "3.1.16",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.16.tgz",
@@ -10576,6 +10711,15 @@
         "tslib": "^1.10.0"
       }
     },
+    "node-emoji": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
+      "integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==",
+      "dev": true,
+      "requires": {
+        "lodash.toarray": "^4.4.0"
+      }
+    },
     "node-forge": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
@@ -10785,6 +10929,12 @@
         }
       }
     },
+    "object-hash": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.1.1.tgz",
+      "integrity": "sha512-VOJmgmS+7wvXf8CjbQmimtCnEx3IAoLxI3fp2fbWehxrWBcAQFbk+vcwb6vzR0VZv/eNCJ/27j151ZTwqW/JeQ==",
+      "dev": true
+    },
     "object-inspect": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz",
@@ -10986,11 +11136,6 @@
       "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
       "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc="
     },
-    "os-tmpdir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
-    },
     "p-each-series": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/p-each-series/-/p-each-series-2.1.0.tgz",
@@ -11632,6 +11777,43 @@
         "postcss": "^7.0.2"
       }
     },
+    "postcss-functions": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",
+      "integrity": "sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.2",
+        "object-assign": "^4.1.1",
+        "postcss": "^6.0.9",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
     "postcss-gap-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz",
@@ -11658,6 +11840,16 @@
         "postcss": "^7.0.2"
       }
     },
+    "postcss-js": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.3.tgz",
+      "integrity": "sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==",
+      "dev": true,
+      "requires": {
+        "camelcase-css": "^2.0.1",
+        "postcss": "^7.0.18"
+      }
+    },
     "postcss-lab-function": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz",
@@ -11927,6 +12119,16 @@
         "postcss": "^7.0.6"
       }
     },
+    "postcss-nested": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz",
+      "integrity": "sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.32",
+        "postcss-selector-parser": "^6.0.2"
+      }
+    },
     "postcss-nesting": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-7.0.1.tgz",
@@ -12408,6 +12610,12 @@
         }
       }
     },
+    "pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
+      "dev": true
+    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -12529,6 +12737,55 @@
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
+    "purgecss": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-3.1.3.tgz",
+      "integrity": "sha512-hRSLN9mguJ2lzlIQtW4qmPS2kh6oMnA9RxdIYK8sz18QYqd6ePp4GNDl18oWHA1f2v2NEQIh51CO8s/E3YGckQ==",
+      "dev": true,
+      "requires": {
+        "commander": "^6.0.0",
+        "glob": "^7.0.0",
+        "postcss": "^8.2.1",
+        "postcss-selector-parser": "^6.0.2"
+      },
+      "dependencies": {
+        "colorette": {
+          "version": "1.2.2",
+          "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
+          "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
+          "dev": true
+        },
+        "commander": {
+          "version": "6.2.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
+          "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
+          "dev": true
+        },
+        "nanoid": {
+          "version": "3.1.22",
+          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.22.tgz",
+          "integrity": "sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "8.2.9",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.9.tgz",
+          "integrity": "sha512-b+TmuIL4jGtCHtoLi+G/PisuIl9avxs8IZMSmlABRwNz5RLUUACrC+ws81dcomz1nRezm5YPdXiMEzBEKgYn+Q==",
+          "dev": true,
+          "requires": {
+            "colorette": "^1.2.2",
+            "nanoid": "^3.1.22",
+            "source-map": "^0.6.1"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
     "q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@@ -12698,9 +12955,9 @@
       }
     },
     "react-dev-utils": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.0.tgz",
-      "integrity": "sha512-uIZTUZXB5tbiM/0auUkLVjWhZGM7DSI304iGunyhA9m985iIDVXd9I4z6MkNa9jeLzeUJbU9A7TUNrcbXAahxw==",
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
+      "integrity": "sha512-dx0LvIGHcOPtKbeiSUM4jqpBl3TcY7CDjZdfOIcKeznE7BWr9dg0iPG90G5yfVQ+p/rGNMXdbfStvzQZEVEi4A==",
       "requires": {
         "@babel/code-frame": "7.10.4",
         "address": "1.1.2",
@@ -12715,13 +12972,13 @@
         "global-modules": "2.0.0",
         "globby": "11.0.1",
         "gzip-size": "5.1.1",
-        "immer": "7.0.9",
-        "inquirer": "7.3.3",
+        "immer": "8.0.1",
         "is-root": "2.1.0",
         "loader-utils": "2.0.0",
         "open": "^7.0.2",
         "pkg-up": "3.1.0",
-        "react-error-overlay": "^6.0.8",
+        "prompts": "2.4.0",
+        "react-error-overlay": "^6.0.9",
         "recursive-readdir": "2.2.2",
         "shell-quote": "1.7.2",
         "strip-ansi": "6.0.0",
@@ -12754,11 +13011,21 @@
           "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
           "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w=="
         },
+        "immer": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz",
+          "integrity": "sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA=="
+        },
         "path-key": {
           "version": "3.1.1",
           "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
           "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
         },
+        "react-error-overlay": {
+          "version": "6.0.9",
+          "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
+          "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
+        },
         "shebang-command": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -12802,11 +13069,6 @@
         "prop-types": "^15.7.2"
       }
     },
-    "react-error-overlay": {
-      "version": "6.0.8",
-      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.8.tgz",
-      "integrity": "sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw=="
-    },
     "react-input-autosize": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/react-input-autosize/-/react-input-autosize-2.2.2.tgz",
@@ -13052,6 +13314,24 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "reduce-css-calc": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
+      "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
+      "dev": true,
+      "requires": {
+        "css-unit-converter": "^1.1.1",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
     "redux": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
@@ -13426,15 +13706,6 @@
         }
       }
     },
-    "restore-cursor": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
-      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
-      "requires": {
-        "onetime": "^5.1.0",
-        "signal-exit": "^3.0.2"
-      }
-    },
     "ret": {
       "version": "0.1.15",
       "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
@@ -13576,11 +13847,6 @@
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
       "integrity": "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA=="
     },
-    "run-async": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
-      "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ=="
-    },
     "run-parallel": {
       "version": "1.1.10",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.1.10.tgz",
@@ -13594,14 +13860,6 @@
         "aproba": "^1.1.1"
       }
     },
-    "rxjs": {
-      "version": "6.6.3",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz",
-      "integrity": "sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==",
-      "requires": {
-        "tslib": "^1.9.0"
-      }
-    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -14871,6 +15129,130 @@
         "string-width": "^3.0.0"
       }
     },
+    "tailwindcss": {
+      "version": "npm:@tailwindcss/postcss7-compat@2.0.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss7-compat/-/postcss7-compat-2.0.4.tgz",
+      "integrity": "sha512-+M9a/jAKQC+q+sSwsRfYWe1tbxxXXQKuhfh1nhUzAv7A6EOV4puMzGQnTW6oL1Qn/JzCJ8ozM1WmIBPdL6kD4A==",
+      "dev": true,
+      "requires": {
+        "@fullhuman/postcss-purgecss": "^3.1.3",
+        "autoprefixer": "^9",
+        "bytes": "^3.0.0",
+        "chalk": "^4.1.0",
+        "color": "^3.1.3",
+        "detective": "^5.2.0",
+        "didyoumean": "^1.2.1",
+        "fs-extra": "^9.1.0",
+        "html-tags": "^3.1.0",
+        "lodash": "^4.17.21",
+        "modern-normalize": "^1.0.0",
+        "node-emoji": "^1.8.1",
+        "object-hash": "^2.1.1",
+        "postcss": "^7",
+        "postcss-functions": "^3",
+        "postcss-js": "^2",
+        "postcss-nested": "^4",
+        "postcss-selector-parser": "^6.0.4",
+        "postcss-value-parser": "^4.1.0",
+        "pretty-hrtime": "^1.0.3",
+        "reduce-css-calc": "^2.1.8",
+        "resolve": "^1.20.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "fs-extra": {
+          "version": "9.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+          "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+          "dev": true,
+          "requires": {
+            "at-least-node": "^1.0.0",
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "is-core-module": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
+          "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
+          "dev": true,
+          "requires": {
+            "has": "^1.0.3"
+          }
+        },
+        "lodash": {
+          "version": "4.17.21",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+          "dev": true
+        },
+        "resolve": {
+          "version": "1.20.0",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+          "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+          "dev": true,
+          "requires": {
+            "is-core-module": "^2.2.0",
+            "path-parse": "^1.0.6"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "universalify": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+          "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+          "dev": true
+        }
+      }
+    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
@@ -15063,11 +15445,6 @@
       "resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz",
       "integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA=="
     },
-    "through": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
-    },
     "through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
@@ -15119,14 +15496,6 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
-    "tmp": {
-      "version": "0.0.33",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
-      "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
-      "requires": {
-        "os-tmpdir": "~1.0.2"
-      }
-    },
     "tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
@@ -16641,6 +17010,14 @@
         }
       }
     },
+    "webpack-merge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.2.2.tgz",
+      "integrity": "sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==",
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
     "webpack-sources": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
@@ -17027,9 +17404,9 @@
       "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
     },
     "y18n": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-      "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz",
+      "integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ=="
     },
     "yallist": {
       "version": "4.0.0",
diff --git a/package.json b/package.json
index 1ce9d4c..a310228 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@reduxjs/toolkit": "^1.4.0",
+    "@craco/craco": "^6.1.1",
+    "@reduxjs/toolkit": "^1.5.1",
+    "@tailwindcss/forms": "^0.3.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
@@ -20,9 +22,9 @@
     "styled-components": "^5.2.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -41,6 +43,10 @@
     ]
   },
   "devDependencies": {
-    "babel-plugin-styled-components": "^1.11.1"
+    "@tailwindcss/postcss7-compat": "^2.0.4",
+    "autoprefixer": "^9.8.6",
+    "babel-plugin-styled-components": "^1.11.1",
+    "postcss": "^7.0.35",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.4"
   }
 }
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 7c70954..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-float infinite 3s ease-in-out;
-  }
-}
-
-.App-header {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-}
-
-.App-link {
-  color: rgb(112, 76, 182);
-}
-.App-spacer {
-  min-height: 100vh;
-  min-width: 15vw;
-  border-right: 1px solid black;
-}
-
-@keyframes App-logo-float {
-  0% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(10px);
-  }
-  100% {
-    transform: translateY(0px);
-  }
-}
diff --git a/src/App.js b/src/App.js
index 16e4fb1..e1a4170 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,17 +1,12 @@
 import React from 'react';
 import Menu from './features/menu';
 import TimbreSwitcher from './features/timbre/timbreSwitcher';
-import './App.css';
 
 function App() {
   return (
-    <div className='App'>
-      <header className='App-header'>
-        <div className='App-spacer'>
-          <Menu />
-        </div>
-        <TimbreSwitcher />
-      </header>
+    <div className='grid grid-cols-6 grid-rows-1 gap-4 h-screen'>
+      <Menu className='col-span-1' />
+      <TimbreSwitcher className='col-span-5' />
     </div>
   );
 }
diff --git a/src/features/helpers/Helpers.module.css b/src/features/helpers/Helpers.module.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/features/menu/index.js b/src/features/menu/index.js
index 3fb77cd..78f9d23 100644
--- a/src/features/menu/index.js
+++ b/src/features/menu/index.js
@@ -1,6 +1,5 @@
 import { useRef, useState, useEffect } from 'react';
-import './menu.css';
-import { SelectList } from '../helpers/Helpers';
+import { Select } from '../utils/components';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   parameterUpdateIndex,
@@ -31,10 +30,11 @@ export default function Menu() {
   }, [file, dispatch]);
 
   return (
-    <div className='menu'>
+    <div className='flex flex-col justify-around border-solid border-r-2 border-gray-400 px-4'>
       <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'
             placeholder='Patch Name'
             type='text'
             maxLength='12'
@@ -49,32 +49,32 @@ export default function Menu() {
             }}
           />
         </div>
-        <div className='patch-load'>
+        <div className='my-1 flex flex-col items-center'>
           <button
-            className='menu-button'
+            className='mx-4 my-1 bg-gray-100 rounded-md w-32 h-10 border-transparent hover:bg-gray-200'
             onClick={() => {
               dispatch(parameterRefreshAll());
             }}>
             New Patch
           </button>
           <button
-            className='menu-button'
+            className='mx-4 my-1 bg-gray-100 rounded-md w-32 h-10 border-transparent hover:bg-gray-200'
             onClick={() => {
               fileRef.current.click();
             }}>
             Load Patch
           </button>
           <button
-            className='menu-button'
+            className='mx-4 my-1 bg-gray-100 rounded-md w-32 h-10 border-transparent hover:bg-gray-200'
             onClick={() => {
               return_file_from_store(state);
             }}>
             Save Patch
           </button>
           <input
+            className='hidden'
             type='file'
             accept='.syx'
-            className='menu-file-input'
             ref={fileRef}
             onChange={(e) => {
               loadFile(e.target.files[0]);
@@ -82,7 +82,8 @@ export default function Menu() {
           />
         </div>
         <div className='patch-settings'>
-          <SelectList
+          <Select
+            className=''
             value={state.patch.mode}
             list={[
               { value: 'Single' },
diff --git a/src/features/menu/menu.css b/src/features/menu/menu.css
deleted file mode 100644
index 1d465ef..0000000
--- a/src/features/menu/menu.css
+++ /dev/null
@@ -1,54 +0,0 @@
-.menu {
-  height: 100vh;
-  min-width: 15vw;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  justify-content: space-around;
-  align-items: stretch;
-}
-
-.menu-patch-container > * {
-  margin-top: 10pt;
-}
-
-input[type='text'] {
-  font-family: 'Roboto', sans-serif;
-  text-indent: 8pt;
-  width: 70%;
-  padding: 6pt 0;
-  outline: none;
-  border-radius: 4pt;
-  border: 1px solid gainsboro;
-}
-input[type='text']:hover {
-  border-color: silver;
-}
-input[type='text']:focus {
-  border: 2px solid dodgerblue;
-}
-
-.menu-button {
-  width: 65%;
-  display: block;
-  padding: 4pt;
-  margin: 8px auto;
-  outline: none;
-}
-
-h2 {
-  text-align: left;
-  font-size: x-large;
-  font-weight: 400;
-}
-
-.menu-file-input {
-  display: none;
-}
-
-.patch-settings {
-  font-size: small;
-  width: 75%;
-  margin: 10pt auto;
-  line-height: 1.5em;
-}
diff --git a/src/features/timbre/Arpeggio.js b/src/features/timbre/Arpeggio.js
index 6808558..206662d 100644
--- a/src/features/timbre/Arpeggio.js
+++ b/src/features/timbre/Arpeggio.js
@@ -2,12 +2,11 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { selectById } from './timbreSlice.js';
 import { ArpeggA, ArpeggB } from './parameters/Arpeggios';
-import styles from './Timbre.module.css';
 
 export default function Arpeggio(props) {
   const ids = useSelector((state) => selectById(state, props.id));
   return (
-    <div className={styles.timbreStyle}>
+    <div>
       <ArpeggA id={ids.arpeggA} />
       <ArpeggB id={ids.arpeggB} />
     </div>
diff --git a/src/features/timbre/Effects.js b/src/features/timbre/Effects.js
index 9fa0346..b62d7f8 100644
--- a/src/features/timbre/Effects.js
+++ b/src/features/timbre/Effects.js
@@ -2,12 +2,11 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { ModFX, Delay, EQ } from './parameters/ModFX';
 import { selectById } from './timbreSlice.js';
-import styles from './Timbre.module.css';
 
 export default function Effects(props) {
   const ids = useSelector((state) => selectById(state, props.id));
   return (
-    <div className={styles.timbreStyle}>
+    <div>
       <ModFX id={ids.modfx} />
       <Delay id={ids.delay} />
       <EQ id={ids.eq} />
diff --git a/src/features/timbre/Timbre.js b/src/features/timbre/Timbre.js
index cffc3c1..dea804a 100644
--- a/src/features/timbre/Timbre.js
+++ b/src/features/timbre/Timbre.js
@@ -9,12 +9,11 @@ import Amp from './parameters/Amp';
 import LFO from './parameters/LFO';
 import Patches from './parameters/Patches';
 import { selectById } from './timbreSlice.js';
-import styles from './Timbre.module.css';
 
 export default function Timbre(props) {
   const ids = useSelector((state) => selectById(state, props.id));
   return (
-    <div className={styles.timbreStyle}>
+    <div>
       <VCO
         name='VCO 1'
         id={ids.vco1}
@@ -118,7 +117,7 @@ export default function Timbre(props) {
       <Amp name='Amp' id={ids.amp} />
       <EG name='EG 1' id={ids.eg1} />
       <EG name='EG 2' id={ids.eg2} />
-      <div className={styles.lineBreak} />
+      <div />
       <LFO
         name='LFO 1'
         id={ids.lfo1}
diff --git a/src/features/timbre/Timbre.module.css b/src/features/timbre/Timbre.module.css
deleted file mode 100644
index acff8c7..0000000
--- a/src/features/timbre/Timbre.module.css
+++ /dev/null
@@ -1,130 +0,0 @@
-.timbreStyle {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  justify-content: center;
-}
-
-.lineBreak {
-  width: 0%;
-}
-
-@media only screen and (max-width: 1920px) {
-  .lineBreak {
-    width: 100%;
-  }
-}
-
-@media only screen and (max-width: 1440px) {
-  .lineBreak {
-    width: 0%;
-  }
-}
-
-@media only screen and (max-width: 990px) {
-  .lineBreak {
-    width: 0%;
-  }
-}
-
-@media only screen and (max-width: 920px) {
-  .lineBreak {
-    width: 100%;
-  }
-}
-
-.buttonContainer {
-  position: fixed;
-  top: 0;
-  left: 25%;
-}
-
-.buttonContainer > button:hover {
-  background: white;
-  color: slateblue;
-  border: 2px solid slateblue;
-}
-.buttonContainer > button:focus {
-  background: slateblue;
-  color: white;
-  border: 2px solid slateblue;
-}
-
-.tabs {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.tabList {
-  border-bottom: 1px solid black;
-  display: none;
-  flex-direction: row;
-  list-style-type: none;
-  justify-content: center;
-  top: 0;
-  padding: 0;
-  margin: 0;
-  width: 85vw;
-  background: white;
-}
-.tab {
-  height: 1.25em;
-  width: 4em;
-  background: white;
-  color: slategrey;
-  font-size: 0.75em;
-  margin: 0.75em 1em;
-  padding: 0.25em 1em;
-  border: 2px solid slategrey;
-  border-radius: 3px;
-  outline: none;
-  -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none; /* Safari */
-  -khtml-user-select: none; /* Konqueror HTML */
-  -moz-user-select: none; /* Old versions of Firefox */
-  -ms-user-select: none; /* Internet Explorer/Edge */
-  user-select: none;
-  transition: all 0.2s ease-in-out;
-}
-
-.tab:hover {
-  background: white;
-  color: slateblue;
-  border: 2px solid slateblue;
-}
-.selected,
-.selected:hover {
-  background: slateblue;
-  color: white;
-  border: 2px solid slateblue;
-  transition: 0.2s ease-in-out;
-}
-@keyframes slideeffect {
-  0% {
-    opacity: 0.5;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-.tabPanel {
-  padding: 1em 0;
-  height: 100%;
-  animation: slideeffect 0.6s ease-in-out;
-  opacity: 1;
-  overflow-y: scroll;
-}
-.tabPanel::-webkit-scrollbar {
-  width: 0.3em;
-}
-
-.tabPanel::-webkit-scrollbar-track,
-.tabPanel::-webkit-scrollbar-thumb {
-  background-color: transparent;
-}
-
-.tabPanel:hover::-webkit-scrollbar-thumb {
-  background-color: lightgray;
-  border-radius: 6px;
-}
diff --git a/src/features/timbre/Vocoder.js b/src/features/timbre/Vocoder.js
index 58cc148..9f79232 100644
--- a/src/features/timbre/Vocoder.js
+++ b/src/features/timbre/Vocoder.js
@@ -10,105 +10,104 @@ import { VocoderFilter, FCMod } from './parameters/Filter';
 import { VocoderAmp } from './parameters/Amp';
 import Levels from './parameters/Levels';
 import Pans from './parameters/Pans';
-import styles from './Timbre.module.css';
 
 export default function Vocoder(props) {
-    const ids = useSelector((state) => selectById(state, props.id));
-    return (
-        <div className={styles.timbreStyle}>
-            <VCO
-                name="VCO"
-                id={ids.vco}
-                waveforms={[
-                    { value: 'Saw' },
-                    { value: 'Square' },
-                    { value: 'Triangle' },
-                    { value: 'Sine' },
-                    { value: 'Vox Wave' },
-                    { value: 'DWGS' },
-                    { value: 'Noise' },
-                    { value: 'Audio In' },
-                ]}
-                dwgsOrModTypeName="DWGS"
-                dwgsOrModType={[
-                    { value: 'SynSine1' },
-                    { value: 'SynSine2' },
-                    { value: 'SynSine3' },
-                    { value: 'SynSine4' },
-                    { value: 'SynSine5' },
-                    { value: 'SynSine6' },
-                    { value: 'SynSine7' },
-                    { value: 'SynBass1' },
-                    { value: 'SynBass2' },
-                    { value: 'SynBass3' },
-                    { value: 'SynBass4' },
-                    { value: 'SynBass5' },
-                    { value: 'SynBass6' },
-                    { value: 'SynBass7' },
-                    { value: 'SynWave1' },
-                    { value: 'SynWave2' },
-                    { value: 'SynWave3' },
-                    { value: 'SynWave4' },
-                    { value: 'SynWave5' },
-                    { value: 'SynWave6' },
-                    { value: 'SynWave7' },
-                    { value: 'SynWave8' },
-                    { value: 'SynWave9' },
-                    { value: '5thWave1' },
-                    { value: '5thWave2' },
-                    { value: '5thWave3' },
-                    { value: 'Digi1' },
-                    { value: 'Digi2' },
-                    { value: 'Digi3' },
-                    { value: 'Digi4' },
-                    { value: 'Digi5' },
-                    { value: 'Digi6' },
-                    { value: 'Digi7' },
-                    { value: 'Digi8' },
-                    { value: 'Endless' },
-                    { value: 'E.Piano1' },
-                    { value: 'E.Piano2' },
-                    { value: 'E.Piano3' },
-                    { value: 'E.Piano4' },
-                    { value: 'Organ1' },
-                    { value: 'Organ2' },
-                    { value: 'Organ3' },
-                    { value: 'Organ4' },
-                    { value: 'Organ5' },
-                    { value: 'Organ6' },
-                    { value: 'Organ7' },
-                    { value: 'Clav1' },
-                    { value: 'Clav2' },
-                    { value: 'Guitar1' },
-                    { value: 'Guitar2' },
-                    { value: 'Guitar3' },
-                    { value: 'Bass1' },
-                    { value: 'Bass2' },
-                    { value: 'Bass3' },
-                    { value: 'Bass4' },
-                    { value: 'Bass5' },
-                    { value: 'Bell1' },
-                    { value: 'Bell2' },
-                    { value: 'Bell3' },
-                    { value: 'Bell4' },
-                    { value: 'Voice1' },
-                    { value: 'Voice2' },
-                    { value: 'Voice3' },
-                    { value: 'Voice4' },
-                ]}
-            />
-            <AudioIn name="Audio In" id={ids.audioIn} />
-            <Mixer name="Mixer" id={ids.mixer} />
-            <Pitch name="Pitch" id={ids.pitch} />
-            <VocoderFilter name="Filter" id={ids.filter} />
-            <FCMod name="FC Mod" id={ids.fcMod} />
-            <VocoderAmp name="Amp" id={ids.amp} />
-            <EG name="EG" id={ids.eg} />
-            <div className={styles.lineBreak} />
-            <LFO name="LFO 1" id={ids.lfo1} />
-            <LFO name="LFO 2" id={ids.lfo2} />
-            <Levels name="Levels" id={ids.levels} />
-            <Pans name="Pans" id={ids.pans} />
-        </div>
-    );
+  const ids = useSelector((state) => selectById(state, props.id));
+  return (
+    <div>
+      <VCO
+        name='VCO'
+        id={ids.vco}
+        waveforms={[
+          { value: 'Saw' },
+          { value: 'Square' },
+          { value: 'Triangle' },
+          { value: 'Sine' },
+          { value: 'Vox Wave' },
+          { value: 'DWGS' },
+          { value: 'Noise' },
+          { value: 'Audio In' },
+        ]}
+        dwgsOrModTypeName='DWGS'
+        dwgsOrModType={[
+          { value: 'SynSine1' },
+          { value: 'SynSine2' },
+          { value: 'SynSine3' },
+          { value: 'SynSine4' },
+          { value: 'SynSine5' },
+          { value: 'SynSine6' },
+          { value: 'SynSine7' },
+          { value: 'SynBass1' },
+          { value: 'SynBass2' },
+          { value: 'SynBass3' },
+          { value: 'SynBass4' },
+          { value: 'SynBass5' },
+          { value: 'SynBass6' },
+          { value: 'SynBass7' },
+          { value: 'SynWave1' },
+          { value: 'SynWave2' },
+          { value: 'SynWave3' },
+          { value: 'SynWave4' },
+          { value: 'SynWave5' },
+          { value: 'SynWave6' },
+          { value: 'SynWave7' },
+          { value: 'SynWave8' },
+          { value: 'SynWave9' },
+          { value: '5thWave1' },
+          { value: '5thWave2' },
+          { value: '5thWave3' },
+          { value: 'Digi1' },
+          { value: 'Digi2' },
+          { value: 'Digi3' },
+          { value: 'Digi4' },
+          { value: 'Digi5' },
+          { value: 'Digi6' },
+          { value: 'Digi7' },
+          { value: 'Digi8' },
+          { value: 'Endless' },
+          { value: 'E.Piano1' },
+          { value: 'E.Piano2' },
+          { value: 'E.Piano3' },
+          { value: 'E.Piano4' },
+          { value: 'Organ1' },
+          { value: 'Organ2' },
+          { value: 'Organ3' },
+          { value: 'Organ4' },
+          { value: 'Organ5' },
+          { value: 'Organ6' },
+          { value: 'Organ7' },
+          { value: 'Clav1' },
+          { value: 'Clav2' },
+          { value: 'Guitar1' },
+          { value: 'Guitar2' },
+          { value: 'Guitar3' },
+          { value: 'Bass1' },
+          { value: 'Bass2' },
+          { value: 'Bass3' },
+          { value: 'Bass4' },
+          { value: 'Bass5' },
+          { value: 'Bell1' },
+          { value: 'Bell2' },
+          { value: 'Bell3' },
+          { value: 'Bell4' },
+          { value: 'Voice1' },
+          { value: 'Voice2' },
+          { value: 'Voice3' },
+          { value: 'Voice4' },
+        ]}
+      />
+      <AudioIn name='Audio In' id={ids.audioIn} />
+      <Mixer name='Mixer' id={ids.mixer} />
+      <Pitch name='Pitch' id={ids.pitch} />
+      <VocoderFilter name='Filter' id={ids.filter} />
+      <FCMod name='FC Mod' id={ids.fcMod} />
+      <VocoderAmp name='Amp' id={ids.amp} />
+      <EG name='EG' id={ids.eg} />
+      <div />
+      <LFO name='LFO 1' id={ids.lfo1} />
+      <LFO name='LFO 2' id={ids.lfo2} />
+      <Levels name='Levels' id={ids.levels} />
+      <Pans name='Pans' id={ids.pans} />
+    </div>
+  );
 }
diff --git a/src/features/timbre/parameters/Amp.js b/src/features/timbre/parameters/Amp.js
index c0afbb8..ac0f43a 100644
--- a/src/features/timbre/parameters/Amp.js
+++ b/src/features/timbre/parameters/Amp.js
@@ -2,134 +2,133 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Slider, Checkbox } from '../../helpers/Helpers';
-import styles from './Parameters.module.css';
 
 export default function Amp(props) {
-    const parameters = useSelector((state) => selectById(state, props.id));
-    const dispatch = useDispatch();
+  const parameters = useSelector((state) => selectById(state, props.id));
+  const dispatch = useDispatch();
 
-    return (
-        <div className={styles.container}>
-            <span className={styles.header}>{`${props.name}`}</span>
-            Amp Level
-            <Slider
-                parameter={parameters.ampLevel}
-                min={0}
-                max={127}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { ampLevel: value },
-                        })
-                    )
-                }
-            />
-            PanPot
-            <Slider
-                parameter={parameters.panpot}
-                min={-63}
-                max={63}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { panpot: 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}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { distortion: value },
-                        })
-                    )
-                }
-            />
-        </div>
-    );
+  return (
+    <div>
+      <span>{`${props.name}`}</span>
+      Amp Level
+      <Slider
+        parameter={parameters.ampLevel}
+        min={0}
+        max={127}
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { ampLevel: value },
+            })
+          )
+        }
+      />
+      PanPot
+      <Slider
+        parameter={parameters.panpot}
+        min={-63}
+        max={63}
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { panpot: 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}
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { distortion: value },
+            })
+          )
+        }
+      />
+    </div>
+  );
 }
 
 export const VocoderAmp = (props) => {
-    const parameters = useSelector((state) => selectById(state, props.id));
-    const dispatch = useDispatch();
+  const parameters = useSelector((state) => selectById(state, props.id));
+  const dispatch = useDispatch();
 
-    return (
-        <div className={styles.container}>
-            <span className={styles.header}>{`${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}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { distortion: value },
-                        })
-                    )
-                }
-            />
-        </div>
-    );
+  return (
+    <div>
+      <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}
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { distortion: value },
+            })
+          )
+        }
+      />
+    </div>
+  );
 };
diff --git a/src/features/timbre/parameters/Arpeggios.js b/src/features/timbre/parameters/Arpeggios.js
index 13af710..23bd33e 100644
--- a/src/features/timbre/parameters/Arpeggios.js
+++ b/src/features/timbre/parameters/Arpeggios.js
@@ -2,16 +2,15 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
-import styles from './Parameters.module.css';
 
 const ArpeggA = (props) => {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
 
   return (
-    <div className={styles.horizontalContainer}>
-      <span className={styles.header}>Arpeggio A.</span>
-      <div className={styles.container}>
+    <div>
+      <span>Arpeggio A.</span>
+      <div>
         Tempo
         <Slider
           min={20}
@@ -61,8 +60,8 @@ const ArpeggA = (props) => {
           }
         />
       </div>
-      <div className={styles.divider} />
-      <div className={styles.container}>
+      <div />
+      <div>
         Type
         <SelectList
           value={parameters.type}
@@ -107,11 +106,11 @@ const ArpeggB = (props) => {
   const dispatch = useDispatch();
 
   return (
-    <div className={styles.horizontalContainer}>
-      <span className={styles.header}>Arpeggio B.</span>
-      <div className={styles.container}>
+    <div>
+      <span>Arpeggio B.</span>
+      <div>
         <Checkbox
-          name="Latch"
+          name='Latch'
           parameter={parameters.latch}
           onChange={(value) =>
             dispatch(
@@ -137,7 +136,7 @@ const ArpeggB = (props) => {
           }
         />
         <Checkbox
-          name="Key Sync"
+          name='Key Sync'
           parameter={parameters.keySync}
           onChange={(value) =>
             dispatch(
@@ -149,8 +148,8 @@ const ArpeggB = (props) => {
           }
         />
       </div>
-      <div className={styles.divider} />
-      <div className={styles.container}>
+      <div />
+      <div>
         Last Step
         <SelectList
           labelFunction={(v) => `Step ${v.value}`}
diff --git a/src/features/timbre/parameters/EG.js b/src/features/timbre/parameters/EG.js
index 2ab2106..9db42f0 100644
--- a/src/features/timbre/parameters/EG.js
+++ b/src/features/timbre/parameters/EG.js
@@ -2,83 +2,82 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Slider, Checkbox } from '../../helpers/Helpers';
-import styles from './Parameters.module.css';
 
 export default function EG(props) {
-    const parameters = useSelector((state) => selectById(state, props.id));
-    const dispatch = useDispatch();
+  const parameters = useSelector((state) => selectById(state, props.id));
+  const dispatch = useDispatch();
 
-    return (
-        <div className={styles.container}>
-            <span className={styles.header}>{`${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>
-    );
+  return (
+    <div>
+      <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>
+  );
 }
diff --git a/src/features/timbre/parameters/Filter.js b/src/features/timbre/parameters/Filter.js
index d220ffe..fde8b5d 100644
--- a/src/features/timbre/parameters/Filter.js
+++ b/src/features/timbre/parameters/Filter.js
@@ -2,186 +2,185 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Slider, SelectList } from '../../helpers/Helpers';
-import styles from './Parameters.module.css';
 
 export default function Filter(props) {
-    const parameters = useSelector((state) => selectById(state, props.id));
-    const dispatch = useDispatch();
+  const parameters = useSelector((state) => selectById(state, props.id));
+  const dispatch = useDispatch();
 
-    return (
-        <div className={styles.container}>
-            <span className={styles.header}>{`${props.name}`}</span>
-            Filter Type
-            <SelectList
-                value={parameters.filterType}
-                list={[
-                    { value: '-24db Low Pass' },
-                    { value: '-12db Low Pass' },
-                    { value: 'Band Pass' },
-                    { value: 'High Pass' },
-                ]}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { filterType: value },
-                        })
-                    )
-                }
-            />
-            Cutoff
-            <Slider
-                parameter={parameters.cutoff}
-                min={0}
-                max={127}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { cutoff: value },
-                        })
-                    )
-                }
-            />
-            Resonance
-            <Slider
-                parameter={parameters.resonance}
-                min={0}
-                max={127}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { resonance: value },
-                        })
-                    )
-                }
-            />
-            EG Intensity
-            <Slider
-                parameter={parameters.egIntensity}
-                min={-63}
-                max={63}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { egIntensity: value },
-                        })
-                    )
-                }
-            />
-            Keyboard Tracking
-            <Slider
-                parameter={parameters.keyboardTrack}
-                min={-63}
-                max={63}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { keyboardTrack: value },
-                        })
-                    )
-                }
-            />
-        </div>
-    );
+  return (
+    <div>
+      <span>{`${props.name}`}</span>
+      Filter Type
+      <SelectList
+        value={parameters.filterType}
+        list={[
+          { value: '-24db Low Pass' },
+          { value: '-12db Low Pass' },
+          { value: 'Band Pass' },
+          { value: 'High Pass' },
+        ]}
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { filterType: value },
+            })
+          )
+        }
+      />
+      Cutoff
+      <Slider
+        parameter={parameters.cutoff}
+        min={0}
+        max={127}
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { cutoff: value },
+            })
+          )
+        }
+      />
+      Resonance
+      <Slider
+        parameter={parameters.resonance}
+        min={0}
+        max={127}
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { resonance: value },
+            })
+          )
+        }
+      />
+      EG Intensity
+      <Slider
+        parameter={parameters.egIntensity}
+        min={-63}
+        max={63}
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { egIntensity: value },
+            })
+          )
+        }
+      />
+      Keyboard Tracking
+      <Slider
+        parameter={parameters.keyboardTrack}
+        min={-63}
+        max={63}
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { keyboardTrack: value },
+            })
+          )
+        }
+      />
+    </div>
+  );
 }
 
 export const VocoderFilter = (props) => {
-    const parameters = useSelector((state) => selectById(state, props.id));
-    const dispatch = useDispatch();
-    return (
-        <div className={styles.container}>
-            <span className={styles.header}>{`${props.name}`}</span>
-            Cutoff
-            <Slider
-                parameter={parameters.cutoff}
-                min={0}
-                max={127}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { cutoff: value },
-                        })
-                    )
-                }
-            />
-            Resonance
-            <Slider
-                parameter={parameters.resonance}
-                min={0}
-                max={127}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { resonance: value },
-                        })
-                    )
-                }
-            />
-            EF Sense
-            <Slider
-                parameter={parameters.efSense}
-                min={0}
-                max={127}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { efSense: value },
-                        })
-                    )
-                }
-            />
-        </div>
-    );
+  const parameters = useSelector((state) => selectById(state, props.id));
+  const dispatch = useDispatch();
+  return (
+    <div>
+      <span>{`${props.name}`}</span>
+      Cutoff
+      <Slider
+        parameter={parameters.cutoff}
+        min={0}
+        max={127}
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { cutoff: value },
+            })
+          )
+        }
+      />
+      Resonance
+      <Slider
+        parameter={parameters.resonance}
+        min={0}
+        max={127}
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { resonance: value },
+            })
+          )
+        }
+      />
+      EF Sense
+      <Slider
+        parameter={parameters.efSense}
+        min={0}
+        max={127}
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { efSense: value },
+            })
+          )
+        }
+      />
+    </div>
+  );
 };
 
 export const FCMod = (props) => {
-    const parameters = useSelector((state) => selectById(state, props.id));
-    const dispatch = useDispatch();
-    return (
-        <div className={styles.container}>
-            <span className={styles.header}>{`${props.name}`}</span>
-            Source
-            <SelectList
-                value={parameters.source}
-                list={[
-                    { value: 'Amp EG' },
-                    { value: 'LFO 1' },
-                    { value: 'LFO 2' },
-                    { value: 'Velocity' },
-                    { value: 'Keyboard Track' },
-                    { value: 'Pitch Bend' },
-                    { value: 'Mod Wheel' },
-                ]}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { source: value },
-                        })
-                    )
-                }
-            />
-            Intensity
-            <Slider
-                parameter={parameters.intensity}
-                min={0}
-                max={127}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { intensity: value },
-                        })
-                    )
-                }
-            />
-        </div>
-    );
+  const parameters = useSelector((state) => selectById(state, props.id));
+  const dispatch = useDispatch();
+  return (
+    <div>
+      <span>{`${props.name}`}</span>
+      Source
+      <SelectList
+        value={parameters.source}
+        list={[
+          { value: 'Amp EG' },
+          { value: 'LFO 1' },
+          { value: 'LFO 2' },
+          { value: 'Velocity' },
+          { value: 'Keyboard Track' },
+          { value: 'Pitch Bend' },
+          { value: 'Mod Wheel' },
+        ]}
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { source: value },
+            })
+          )
+        }
+      />
+      Intensity
+      <Slider
+        parameter={parameters.intensity}
+        min={0}
+        max={127}
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { intensity: value },
+            })
+          )
+        }
+      />
+    </div>
+  );
 };
diff --git a/src/features/timbre/parameters/LFO.js b/src/features/timbre/parameters/LFO.js
index b2675fd..7250702 100644
--- a/src/features/timbre/parameters/LFO.js
+++ b/src/features/timbre/parameters/LFO.js
@@ -2,15 +2,14 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
-import styles from './Parameters.module.css';
 
 export default function LFO(props) {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
 
   return (
-    <div className={styles.lfo}>
-      <span className={styles.header}>{`${props.name}`}</span>
+    <div>
+      <span>{`${props.name}`}</span>
       LFO Waveform
       <SelectList
         value={parameters.waveform}
diff --git a/src/features/timbre/parameters/Levels.js b/src/features/timbre/parameters/Levels.js
index 329940c..35b7dc4 100644
--- a/src/features/timbre/parameters/Levels.js
+++ b/src/features/timbre/parameters/Levels.js
@@ -1,133 +1,132 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Slider} from '../../helpers/Helpers';
-import styles from './Parameters.module.css';
+import { Slider } from '../../helpers/Helpers';
 
 export default function Levels(props) {
-    const parameters = useSelector((state) => selectById(state, props.id));
-    const dispatch = useDispatch();
+  const parameters = useSelector((state) => selectById(state, props.id));
+  const dispatch = useDispatch();
 
-    return (
-        <div className={styles.horizontalContainer}>
-            <span className={styles.header}>{`${props.name}`}</span>
-            <div className={styles.container}>
-            Level 1
-            <Slider
-                min={0}
-                max={127}
-                parameter={parameters.level1}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { level1: value },
-                        })
-                    )
-                }
-            />
-            Level 2
-            <Slider
-                min={0}
-                max={127}
-                parameter={parameters.level2}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { level2: value },
-                        })
-                    )
-                }
-            />
-            Level 3
-            <Slider
-                min={0}
-                max={127}
-                parameter={parameters.level3}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { level3: value },
-                        })
-                    )
-                }
-            />
-            Level 4
-            <Slider
-                min={0}
-                max={127}
-                parameter={parameters.level4}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { level4: value },
-                        })
-                    )
-                }
-            />
-            </div>
-            <div className={styles.divider}/>
-            <div className={styles.container}>
-            Level 5
-            <Slider
-                min={0}
-                max={127}
-                parameter={parameters.level5}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { level5: value },
-                        })
-                    )
-                }
-            />
-            Level 6
-            <Slider
-                min={0}
-                max={127}
-                parameter={parameters.level6}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { level6: value },
-                        })
-                    )
-                }
-            />
-            Level 7
-            <Slider
-                min={0}
-                max={127}
-                parameter={parameters.level7}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { level7: value },
-                        })
-                    )
-                }
-            />
-            Level 8
-            <Slider
-                min={0}
-                max={127}
-                parameter={parameters.level8}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { level8: value },
-                        })
-                    )
-                }
-            />
-            </div>
-        </div>
-    );
+  return (
+    <div>
+      <span>{`${props.name}`}</span>
+      <div>
+        Level 1
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.level1}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { level1: value },
+              })
+            )
+          }
+        />
+        Level 2
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.level2}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { level2: value },
+              })
+            )
+          }
+        />
+        Level 3
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.level3}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { level3: value },
+              })
+            )
+          }
+        />
+        Level 4
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.level4}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { level4: value },
+              })
+            )
+          }
+        />
+      </div>
+      <div />
+      <div>
+        Level 5
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.level5}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { level5: value },
+              })
+            )
+          }
+        />
+        Level 6
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.level6}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { level6: value },
+              })
+            )
+          }
+        />
+        Level 7
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.level7}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { level7: value },
+              })
+            )
+          }
+        />
+        Level 8
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.level8}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { level8: value },
+              })
+            )
+          }
+        />
+      </div>
+    </div>
+  );
 }
diff --git a/src/features/timbre/parameters/Mixer.js b/src/features/timbre/parameters/Mixer.js
index 1c0b077..2e37503 100644
--- a/src/features/timbre/parameters/Mixer.js
+++ b/src/features/timbre/parameters/Mixer.js
@@ -2,58 +2,56 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Slider } from '../../helpers/Helpers';
-import styles from './Parameters.module.css';
 
 export default function Mixer(props) {
-    const parameters = useSelector((state) => selectById(state, props.id));
-    const dispatch = useDispatch();
+  const parameters = useSelector((state) => selectById(state, props.id));
+  const dispatch = useDispatch();
 
-    return (
-        <div className={styles.container}>
-            <span className={styles.header}>{`${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
-                className={styles.slider}
-                min={0}
-                max={127}
-                parameter={parameters.vol3}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { vol3: value },
-                        })
-                    )
-                }
-            />
-        </div>
-    );
+  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>
+  );
 }
diff --git a/src/features/timbre/parameters/ModFX.js b/src/features/timbre/parameters/ModFX.js
index ad6fe4c..85b3338 100644
--- a/src/features/timbre/parameters/ModFX.js
+++ b/src/features/timbre/parameters/ModFX.js
@@ -2,15 +2,14 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
-import styles from './Parameters.module.css';
 
 const ModFX = (props) => {
   const parameters = useSelector((state) => selectById(state, props.id));
   const dispatch = useDispatch();
 
   return (
-    <div className={styles.container}>
-      <span className={styles.header}>Mod FX</span>
+    <div>
+      <span>Mod FX</span>
       Mod Type
       <SelectList
         value={parameters.type}
@@ -65,8 +64,8 @@ const Delay = (props) => {
   const dispatch = useDispatch();
 
   return (
-    <div className={styles.container}>
-      <span className={styles.header}>Delay</span>
+    <div>
+      <span>Delay</span>
       Delay Type
       <SelectList
         value={parameters.type}
@@ -85,7 +84,7 @@ const Delay = (props) => {
         }
       />
       <Checkbox
-        name="Tempo Sync"
+        name='Tempo Sync'
         parameter={parameters.tempoSync}
         onChange={(value) =>
           dispatch(
@@ -169,8 +168,8 @@ const EQ = (props) => {
   const dispatch = useDispatch();
 
   return (
-    <div className={styles.container}>
-      <span className={styles.header}>EQ</span>
+    <div>
+      <span>EQ</span>
       Low EQ Frequency
       <SelectList
         labelFunction={(e) => `${e.value}kHz`}
diff --git a/src/features/timbre/parameters/Pans.js b/src/features/timbre/parameters/Pans.js
index 8879a89..c6022f3 100644
--- a/src/features/timbre/parameters/Pans.js
+++ b/src/features/timbre/parameters/Pans.js
@@ -1,133 +1,132 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
-import { Slider} from '../../helpers/Helpers';
-import styles from './Parameters.module.css';
+import { Slider } from '../../helpers/Helpers';
 
 export default function Pans(props) {
-    const parameters = useSelector((state) => selectById(state, props.id));
-    const dispatch = useDispatch();
+  const parameters = useSelector((state) => selectById(state, props.id));
+  const dispatch = useDispatch();
 
-    return (
-        <div className={styles.horizontalContainer}>
-            <span className={styles.header}>{`${props.name}`}</span>
-            <div className={styles.container}>
-            Pan 1
-            <Slider
-                min={0}
-                max={127}
-                parameter={parameters.pan1}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { pan1: value },
-                        })
-                    )
-                }
-            />
-            Pan 2
-            <Slider
-                min={0}
-                max={127}
-                parameter={parameters.pan2}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { pan2: value },
-                        })
-                    )
-                }
-            />
-            Pan 3
-            <Slider
-                min={0}
-                max={127}
-                parameter={parameters.pan3}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { pan3: value },
-                        })
-                    )
-                }
-            />
-            Pan 4
-            <Slider
-                min={0}
-                max={127}
-                parameter={parameters.pan4}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { pan4: value },
-                        })
-                    )
-                }
-            />
-            </div>
-            <div className={styles.divider}/>
-            <div className={styles.container}>
-            Pan 5
-            <Slider
-                min={0}
-                max={127}
-                parameter={parameters.pan5}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { pan5: value },
-                        })
-                    )
-                }
-            />
-            Pan 6
-            <Slider
-                min={0}
-                max={127}
-                parameter={parameters.pan6}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { pan6: value },
-                        })
-                    )
-                }
-            />
-            Pan 7
-            <Slider
-                min={0}
-                max={127}
-                parameter={parameters.pan7}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { pan7: value },
-                        })
-                    )
-                }
-            />
-            Pan 8
-            <Slider
-                min={0}
-                max={127}
-                parameter={parameters.pan8}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { pan8: value },
-                        })
-                    )
-                }
-            />
-            </div>
-        </div>
-    );
-}
\ No newline at end of file
+  return (
+    <div>
+      <span>{`${props.name}`}</span>
+      <div>
+        Pan 1
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.pan1}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { pan1: value },
+              })
+            )
+          }
+        />
+        Pan 2
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.pan2}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { pan2: value },
+              })
+            )
+          }
+        />
+        Pan 3
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.pan3}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { pan3: value },
+              })
+            )
+          }
+        />
+        Pan 4
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.pan4}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { pan4: value },
+              })
+            )
+          }
+        />
+      </div>
+      <div />
+      <div>
+        Pan 5
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.pan5}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { pan5: value },
+              })
+            )
+          }
+        />
+        Pan 6
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.pan6}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { pan6: value },
+              })
+            )
+          }
+        />
+        Pan 7
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.pan7}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { pan7: value },
+              })
+            )
+          }
+        />
+        Pan 8
+        <Slider
+          min={0}
+          max={127}
+          parameter={parameters.pan8}
+          onChange={(value) =>
+            dispatch(
+              parameterUpdated({
+                id: props.id,
+                changes: { pan8: value },
+              })
+            )
+          }
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/timbre/parameters/Parameters.module.css b/src/features/timbre/parameters/Parameters.module.css
deleted file mode 100644
index 9749e92..0000000
--- a/src/features/timbre/parameters/Parameters.module.css
+++ /dev/null
@@ -1,98 +0,0 @@
-.container,
-.lfo,
-.horizontalContainer,
-.patchesContainer {
-  border: solid 1pt slategrey;
-  border-radius: 6px;
-}
-
-.container,
-.lfo {
-  position: relative;
-  font-size: small;
-  display: inline-flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 16pt;
-  margin: 10pt;
-  min-width: 15%;
-  height: 214px;
-  line-height: 1.5em;
-}
-
-.lfo {
-  height: 250px;
-}
-
-.lfo > *,
-.container > * {
-  margin: 3pt 0;
-}
-
-.header {
-  font-size: 1.5em;
-  line-height: 1.25em;
-  text-align: center;
-  background-color: white;
-  padding: 0 0.25em 0.075em;
-  border-left: 1px solid slategrey;
-  border-right: 1px solid slategrey;
-  box-sizing: border-box;
-}
-.lfo > .header,
-.container > .header {
-  position: absolute;
-  top: -7.5%;
-  left: 12%;
-}
-.horizontalContainer > .header,
-.patchesContainer > .header {
-  position: absolute;
-  top: -5.25%;
-  left: 6%;
-}
-
-.horizontalContainer {
-  position: relative;
-  font-size: small;
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 16pt 8pt 16pt 8pt;
-  margin: 10pt;
-  width: 448px;
-  height: 214px;
-}
-
-.patchesContainer {
-  position: relative;
-  font-size: small;
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 16pt 8pt 16pt 8pt;
-  margin: 10pt;
-  width: 680px;
-  height: 250px;
-}
-
-.horizontalContainer > .container,
-.patchesContainer > .container {
-  padding: 0 16pt;
-  width: 100%;
-  margin: 10pt 0;
-  border: none;
-}
-
-.divider {
-  height: 214px;
-  width: 2px;
-  background-color: slategrey;
-  margin: 0 8pt;
-}
-
-.patchesContainer > .divider {
-  width: 4px;
-}
diff --git a/src/features/timbre/parameters/Patches.js b/src/features/timbre/parameters/Patches.js
index 4932472..d165ca6 100644
--- a/src/features/timbre/parameters/Patches.js
+++ b/src/features/timbre/parameters/Patches.js
@@ -2,128 +2,127 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Slider, SelectList } from '../../helpers/Helpers';
-import styles from './Parameters.module.css';
 
 const Patch = (props) => {
-    return (
-        <div className={styles.container}>
-            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>
-    );
+  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>
+  );
 };
 
 export default function Patches(props) {
-    const parameters = useSelector((state) => selectById(state, props.id));
-    const dispatch = useDispatch();
+  const parameters = useSelector((state) => selectById(state, props.id));
+  const dispatch = useDispatch();
 
-    return (
-        <div id="patches" className={styles.patchesContainer}>
-            <span className={styles.header}>{`${props.name}`}</span>
-            <Patch
-                patch={parameters.patch1}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: {
-                                patch1: value,
-                            },
-                        })
-                    )
-                }
-            />
-            <div className={styles.divider} />
-            <Patch
-                patch={parameters.patch2}
-                onChange={(value, parameter) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: {
-                                patch2: value,
-                            },
-                        })
-                    )
-                }
-            />
-            <div className={styles.divider} />
-            <Patch
-                patch={parameters.patch3}
-                onChange={(value, parameter) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { patch3: value },
-                        })
-                    )
-                }
-            />
-            <div className={styles.divider} />
-            <Patch
-                patch={parameters.patch4}
-                onChange={(value, parameter) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { patch4: value },
-                        })
-                    )
-                }
-            />
-        </div>
-    );
+  return (
+    <div 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>
+  );
 }
diff --git a/src/features/timbre/parameters/Pitch.js b/src/features/timbre/parameters/Pitch.js
index f998d66..0ebfacd 100644
--- a/src/features/timbre/parameters/Pitch.js
+++ b/src/features/timbre/parameters/Pitch.js
@@ -2,134 +2,129 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Slider, SelectList } from '../../helpers/Helpers';
-import styles from './Parameters.module.css';
 
 export default function Pitch(props) {
-    const parameters = useSelector((state) => selectById(state, props.id));
-    const dispatch = useDispatch();
+  const parameters = useSelector((state) => selectById(state, props.id));
+  const dispatch = useDispatch();
 
-    return (
-        <div className={styles.horizontalContainer}>
-            <span className={styles.header}>{`${props.name}`}</span>
-            <div className={styles.container}>
-                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 },
-                            })
-                        )
-                    }
-                />
-            </div>
-            <div className={styles.divider} />
-            <div className={styles.container}>
-                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>
-    );
+  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 },
+              })
+            )
+          }
+        />
+      </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>
+  );
 }
diff --git a/src/features/timbre/parameters/VCO.js b/src/features/timbre/parameters/VCO.js
index 4d34d4c..2ebbbc9 100644
--- a/src/features/timbre/parameters/VCO.js
+++ b/src/features/timbre/parameters/VCO.js
@@ -2,134 +2,133 @@ import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectById, parameterUpdated } from './parameterSlice.js';
 import { Slider, SelectList, Checkbox } from '../../helpers/Helpers';
-import styles from './Parameters.module.css';
 
 export default function VCO(props) {
-    const parameters = useSelector((state) => selectById(state, props.id));
+  const parameters = useSelector((state) => selectById(state, props.id));
 
-    const dispatch = useDispatch();
-    return (
-        <div className={styles.container}>
-            <span className={styles.header}>{`${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>
-    );
+  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>
+  );
 }
 
 export const AudioIn = (props) => {
-    const parameters = useSelector((state) => selectById(state, props.id));
-    const dispatch = useDispatch();
+  const parameters = useSelector((state) => selectById(state, props.id));
+  const dispatch = useDispatch();
 
-    return (
-        <div className={styles.container}>
-            <span className={styles.header}>{`${props.name}`}</span>
-            Gate
-            <Slider
-                min={0}
-                max={127}
-                parameter={parameters.gate}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { gate: value },
-                        })
-                    )
-                }
-            />
-            Threshold
-            <Slider
-                min={0}
-                max={127}
-                parameter={parameters.threshold}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { threshold: value },
-                        })
-                    )
-                }
-            />
-            HPF Level
-            <Slider
-                min={0}
-                max={127}
-                parameter={parameters.hpfLevel}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { hpfLevel: value },
-                        })
-                    )
-                }
-            />
-            <Checkbox
-                name="HPF Gate"
-                parameter={parameters.hpfGate}
-                onChange={(value) =>
-                    dispatch(
-                        parameterUpdated({
-                            id: props.id,
-                            changes: { hpfGate: value },
-                        })
-                    )
-                }
-            />
-        </div>
-    );
+  return (
+    <div>
+      <span>{`${props.name}`}</span>
+      Gate
+      <Slider
+        min={0}
+        max={127}
+        parameter={parameters.gate}
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { gate: value },
+            })
+          )
+        }
+      />
+      Threshold
+      <Slider
+        min={0}
+        max={127}
+        parameter={parameters.threshold}
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { threshold: value },
+            })
+          )
+        }
+      />
+      HPF Level
+      <Slider
+        min={0}
+        max={127}
+        parameter={parameters.hpfLevel}
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { hpfLevel: value },
+            })
+          )
+        }
+      />
+      <Checkbox
+        name='HPF Gate'
+        parameter={parameters.hpfGate}
+        onChange={(value) =>
+          dispatch(
+            parameterUpdated({
+              id: props.id,
+              changes: { hpfGate: value },
+            })
+          )
+        }
+      />
+    </div>
+  );
 };
diff --git a/src/features/timbre/timbreSwitcher.js b/src/features/timbre/timbreSwitcher.js
index af728e6..3da6862 100644
--- a/src/features/timbre/timbreSwitcher.js
+++ b/src/features/timbre/timbreSwitcher.js
@@ -5,24 +5,18 @@ import Effects from './Effects';
 import Arpeggio from './Arpeggio';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import { useSelector } from 'react-redux';
-import styles from './Timbre.module.css';
 
 export default function TimbreSwitcher() {
   const index = useSelector((state) => state.parameters.tabIndex);
   return (
-    <div className={styles.tabs}>
-      <Tabs
-        className={styles.tabs}
-        selectedIndex={index}
-        onSelect={() => {}}
-        selectedTabClassName={styles.selected}
-        selectedTabPanelClassName={styles.tabPanel}>
-        <TabList className={styles.tabList}>
-          <Tab className={styles.tab}>Timbre 1</Tab>
-          <Tab className={styles.tab}>Timbre 2</Tab>
-          <Tab className={styles.tab}>Vocoder</Tab>
-          <Tab className={styles.tab}>Effects</Tab>
-          <Tab className={styles.tab}>Arpeggio</Tab>
+    <div>
+      <Tabs selectedIndex={index} onSelect={() => {}}>
+        <TabList>
+          <Tab>Timbre 1</Tab>
+          <Tab>Timbre 2</Tab>
+          <Tab>Vocoder</Tab>
+          <Tab>Effects</Tab>
+          <Tab>Arpeggio</Tab>
         </TabList>
 
         <TabPanel>
diff --git a/src/features/utils/components.js b/src/features/utils/components.js
new file mode 100644
index 0000000..49f520f
--- /dev/null
+++ b/src/features/utils/components.js
@@ -0,0 +1,14 @@
+const Select = (props) => {
+  return (
+    <select
+      className={props.className}
+      onChange={(e) => props.onChange(e.target.value)}
+      value={props.value}>
+      {props.list.map((element) => (
+        <option value={element.value}>{element.value}</option>
+      ))}
+    </select>
+  );
+};
+
+export { Select };
diff --git a/src/index.css b/src/index.css
index c8262c8..a3fdb4a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -13,3 +13,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..33167ad
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [require('@tailwindcss/forms')],
+};