diff --git a/.erb/configs/webpack.config.base.ts b/.erb/configs/webpack.config.base.ts
index 2356a9e2..0c7a2226 100644
--- a/.erb/configs/webpack.config.base.ts
+++ b/.erb/configs/webpack.config.base.ts
@@ -2,10 +2,11 @@
  * Base webpack config used across other specific configs
  */
 
-import webpack from 'webpack';
-import webpackPaths from './webpack.paths';
-import { dependencies as externals } from '../../release/app/package.json';
-
+import webpack from 'webpack'
+import webpackPaths from './webpack.paths'
+import { dependencies as externals } from '../../release/app/package.json'
+import path from 'path'
+import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin'
 const configuration: webpack.Configuration = {
   externals: [...Object.keys(externals || {})],
 
@@ -47,7 +48,10 @@ const configuration: webpack.Configuration = {
     new webpack.EnvironmentPlugin({
       NODE_ENV: 'production',
     }),
+    new TsconfigPathsPlugin({
+      baseUrl: path.join(__dirname, '../..'), // path to tsconfig.json directory
+    }) as any,
   ],
-};
+}
 
-export default configuration;
+export default configuration
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index d9165248..29fdd2c8 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,3 +1,3 @@
 {
-  "recommendations": ["dbaeumer.vscode-eslint", "EditorConfig.EditorConfig"]
+  "recommendations": ["dbaeumer.vscode-eslint", "EditorConfig.EditorConfig", "esbenp.prettier-vscode"]
 }
diff --git a/package-lock.json b/package-lock.json
index 39cf5a3e..8d933980 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@emotion/styled": "^11.8.1",
         "@mui/icons-material": "^5.8.2",
         "@mui/material": "^5.8.2",
+        "@radix-ui/react-popover": "1.0.5",
         "@reduxjs/toolkit": "^1.8.2",
         "@sentry/react": "^7.0.0",
         "@sentry/tracing": "^7.0.0",
@@ -89,6 +90,8 @@
         "ts-jest": "^28.0.2",
         "ts-loader": "^9.3.0",
         "ts-node": "^10.7.0",
+        "tsconfig-paths": "^4.2.0",
+        "tsconfig-paths-webpack-plugin": "^4.0.1",
         "typescript": "^4.6.4",
         "url-loader": "^4.1.1",
         "webpack": "^5.72.1",
@@ -951,6 +954,32 @@
       "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
       "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
     },
+    "node_modules/@floating-ui/core": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.3.tgz",
+      "integrity": "sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg=="
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.4.tgz",
+      "integrity": "sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==",
+      "dependencies": {
+        "@floating-ui/core": "^0.7.3"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-0.7.2.tgz",
+      "integrity": "sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==",
+      "dependencies": {
+        "@floating-ui/dom": "^0.5.3",
+        "use-isomorphic-layout-effect": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -1873,6 +1902,283 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz",
+      "integrity": "sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.2.tgz",
+      "integrity": "sha512-fqYwhhI9IarZ0ll2cUSfKuXHlJK0qE4AfnRrPBbRwEH/4mGQn04/QFGomLi8TXWIdv9WJk//KgGm+aDxVIr1wA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz",
+      "integrity": "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.0.tgz",
+      "integrity": "sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.3.tgz",
+      "integrity": "sha512-nXZOvFjOuHS1ovumntGV7NNoLaEp9JEvTht3MBjP44NSW5hUKj/8OnfN3+8WmB+CEhN44XaGhpHoSsUIEl5P7Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "@radix-ui/react-use-escape-keydown": "1.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz",
+      "integrity": "sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.2.tgz",
+      "integrity": "sha512-spwXlNTfeIprt+kaEWE/qYuYT3ZAqJiAGjN/JgdvgVDTu8yc+HuX+WOWXrKliKnLnwck0F6JDkqIERncnih+4A==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz",
+      "integrity": "sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.0.5.tgz",
+      "integrity": "sha512-GRHZ8yD12MrN2NLobHPE8Rb5uHTxd9x372DE9PPNnBjpczAQHcZ5ne0KXG4xpf+RDdXSzdLv9ym6mYJCDTaUZg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-dismissable-layer": "1.0.3",
+        "@radix-ui/react-focus-guards": "1.0.0",
+        "@radix-ui/react-focus-scope": "1.0.2",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-popper": "1.1.1",
+        "@radix-ui/react-portal": "1.0.2",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.2",
+        "@radix-ui/react-slot": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.1.tgz",
+      "integrity": "sha512-keYDcdMPNMjSC8zTsZ8wezUMiWM9Yj14wtF3s0PTIs9srnEPC9Kt2Gny1T3T81mmSeyDjZxsD9N5WCwNNb712w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@floating-ui/react-dom": "0.7.2",
+        "@radix-ui/react-arrow": "1.0.2",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "@radix-ui/react-use-layout-effect": "1.0.0",
+        "@radix-ui/react-use-rect": "1.0.0",
+        "@radix-ui/react-use-size": "1.0.0",
+        "@radix-ui/rect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.2.tgz",
+      "integrity": "sha512-swu32idoCW7KA2VEiUZGBSu9nB6qwGdV6k6HYhUoOo3M1FFpD+VgLzUqtt3mwL1ssz7r2x8MggpLSQach2Xy/Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.0.tgz",
+      "integrity": "sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-use-layout-effect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz",
+      "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz",
+      "integrity": "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz",
+      "integrity": "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz",
+      "integrity": "sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.2.tgz",
+      "integrity": "sha512-DXGim3x74WgUv+iMNCF+cAo8xUHHeqvjx8zs7trKf+FkQKPQXLk2sX7Gx1ysH7Q76xCpZuxIJE7HLPxRE+Q+GA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz",
+      "integrity": "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.0.tgz",
+      "integrity": "sha512-TB7pID8NRMEHxb/qQJpvSt3hQU4sqNPM1VCTjTRjEOa7cEop/QMuq8S6fb/5Tsz64kqSvB9WnwsDHtjnrM9qew==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/rect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.0.tgz",
+      "integrity": "sha512-imZ3aYcoYCKhhgNpkNDh/aTiU05qw9hX+HHI1QDBTyIlcFjgeFlKKySNGMwTp7nYFLQg/j0VA2FmCY4WPDDHMg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.0.tgz",
+      "integrity": "sha512-d0O68AYy/9oeEy1DdC07bz1/ZXX+DqCskRd3i4JzLSTXwefzaepQrKjXC7aNM8lTHjFLDO0pDgaEiQ7jEk+HVg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.2.tgz",
@@ -3411,6 +3717,17 @@
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz",
+      "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/array-flatten": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
@@ -5364,6 +5681,11 @@
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "dev": true
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+    },
     "node_modules/detect-port": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.3.0.tgz",
@@ -6699,6 +7021,19 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz",
+      "integrity": "sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
@@ -7661,6 +7996,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-package-type": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
@@ -8401,6 +8744,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ip": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
@@ -15055,6 +15406,51 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
+      "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
+      "dependencies": {
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-router": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
@@ -15079,6 +15475,28 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
@@ -16722,19 +17140,6 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/ts-loader/node_modules/enhanced-resolve": {
-      "version": "5.9.2",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.9.2.tgz",
-      "integrity": "sha512-GIm3fQfwLJ8YZx2smuHpBKkXC1yOk+OBEmKckVyL0i/ea8mqDEykK3ld5dgH1QYPNyT/lIllxV2LULnxCHaHkA==",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/ts-node": {
       "version": "10.7.0",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.7.0.tgz",
@@ -16787,11 +17192,47 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/tsconfig-paths": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",
+      "integrity": "sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==",
+      "dev": true,
+      "dependencies": {
+        "json5": "^2.2.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tsconfig-paths-webpack-plugin": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-4.0.1.tgz",
+      "integrity": "sha512-m5//KzLoKmqu2MVix+dgLKq70MnFi8YL8sdzQZ6DblmCdfuq/y3OqvJd5vMndg2KEVCOeNz8Es4WVZhYInteLw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "enhanced-resolve": "^5.7.0",
+        "tsconfig-paths": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/tsconfig-paths/node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
-      "dev": true
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
     },
     "node_modules/tunnel": {
       "version": "0.0.6",
@@ -16973,6 +17414,39 @@
         "node": ">=4"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
+      "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-memo-one": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.2.tgz",
@@ -16981,6 +17455,27 @@
         "react": "^16.8.0 || ^17.0.0"
       }
     },
+    "node_modules/use-sidecar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz",
@@ -17541,19 +18036,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/webpack/node_modules/enhanced-resolve": {
-      "version": "5.9.3",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz",
-      "integrity": "sha512-Bq9VSor+kjvW3f9/MiiR4eE3XYgOl7/rS8lnSxbRbF3kS0B2r+Y9w5krBWxZgDxASVZbdYrn5wT4j/Wb0J9qow==",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/websocket-driver": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
@@ -18498,6 +18980,28 @@
       "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
       "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
     },
+    "@floating-ui/core": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.3.tgz",
+      "integrity": "sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg=="
+    },
+    "@floating-ui/dom": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.4.tgz",
+      "integrity": "sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==",
+      "requires": {
+        "@floating-ui/core": "^0.7.3"
+      }
+    },
+    "@floating-ui/react-dom": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-0.7.2.tgz",
+      "integrity": "sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==",
+      "requires": {
+        "@floating-ui/dom": "^0.5.3",
+        "use-isomorphic-layout-effect": "^1.1.1"
+      }
+    },
     "@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -19120,6 +19624,218 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
       "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
     },
+    "@radix-ui/primitive": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz",
+      "integrity": "sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "@radix-ui/react-arrow": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.2.tgz",
+      "integrity": "sha512-fqYwhhI9IarZ0ll2cUSfKuXHlJK0qE4AfnRrPBbRwEH/4mGQn04/QFGomLi8TXWIdv9WJk//KgGm+aDxVIr1wA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.2"
+      }
+    },
+    "@radix-ui/react-compose-refs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz",
+      "integrity": "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "@radix-ui/react-context": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.0.tgz",
+      "integrity": "sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "@radix-ui/react-dismissable-layer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.3.tgz",
+      "integrity": "sha512-nXZOvFjOuHS1ovumntGV7NNoLaEp9JEvTht3MBjP44NSW5hUKj/8OnfN3+8WmB+CEhN44XaGhpHoSsUIEl5P7Q==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "@radix-ui/react-use-escape-keydown": "1.0.2"
+      }
+    },
+    "@radix-ui/react-focus-guards": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz",
+      "integrity": "sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "@radix-ui/react-focus-scope": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.2.tgz",
+      "integrity": "sha512-spwXlNTfeIprt+kaEWE/qYuYT3ZAqJiAGjN/JgdvgVDTu8yc+HuX+WOWXrKliKnLnwck0F6JDkqIERncnih+4A==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.0"
+      }
+    },
+    "@radix-ui/react-id": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz",
+      "integrity": "sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.0"
+      }
+    },
+    "@radix-ui/react-popover": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.0.5.tgz",
+      "integrity": "sha512-GRHZ8yD12MrN2NLobHPE8Rb5uHTxd9x372DE9PPNnBjpczAQHcZ5ne0KXG4xpf+RDdXSzdLv9ym6mYJCDTaUZg==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.0",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-dismissable-layer": "1.0.3",
+        "@radix-ui/react-focus-guards": "1.0.0",
+        "@radix-ui/react-focus-scope": "1.0.2",
+        "@radix-ui/react-id": "1.0.0",
+        "@radix-ui/react-popper": "1.1.1",
+        "@radix-ui/react-portal": "1.0.2",
+        "@radix-ui/react-presence": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.2",
+        "@radix-ui/react-slot": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      }
+    },
+    "@radix-ui/react-popper": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.1.tgz",
+      "integrity": "sha512-keYDcdMPNMjSC8zTsZ8wezUMiWM9Yj14wtF3s0PTIs9srnEPC9Kt2Gny1T3T81mmSeyDjZxsD9N5WCwNNb712w==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@floating-ui/react-dom": "0.7.2",
+        "@radix-ui/react-arrow": "1.0.2",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-context": "1.0.0",
+        "@radix-ui/react-primitive": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.0",
+        "@radix-ui/react-use-layout-effect": "1.0.0",
+        "@radix-ui/react-use-rect": "1.0.0",
+        "@radix-ui/react-use-size": "1.0.0",
+        "@radix-ui/rect": "1.0.0"
+      }
+    },
+    "@radix-ui/react-portal": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.2.tgz",
+      "integrity": "sha512-swu32idoCW7KA2VEiUZGBSu9nB6qwGdV6k6HYhUoOo3M1FFpD+VgLzUqtt3mwL1ssz7r2x8MggpLSQach2Xy/Q==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.2"
+      }
+    },
+    "@radix-ui/react-presence": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.0.tgz",
+      "integrity": "sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0",
+        "@radix-ui/react-use-layout-effect": "1.0.0"
+      }
+    },
+    "@radix-ui/react-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.2.tgz",
+      "integrity": "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.1"
+      }
+    },
+    "@radix-ui/react-slot": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz",
+      "integrity": "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.0"
+      }
+    },
+    "@radix-ui/react-use-callback-ref": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz",
+      "integrity": "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "@radix-ui/react-use-controllable-state": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz",
+      "integrity": "sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.0"
+      }
+    },
+    "@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.2.tgz",
+      "integrity": "sha512-DXGim3x74WgUv+iMNCF+cAo8xUHHeqvjx8zs7trKf+FkQKPQXLk2sX7Gx1ysH7Q76xCpZuxIJE7HLPxRE+Q+GA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.0"
+      }
+    },
+    "@radix-ui/react-use-layout-effect": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz",
+      "integrity": "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "@radix-ui/react-use-rect": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.0.tgz",
+      "integrity": "sha512-TB7pID8NRMEHxb/qQJpvSt3hQU4sqNPM1VCTjTRjEOa7cEop/QMuq8S6fb/5Tsz64kqSvB9WnwsDHtjnrM9qew==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/rect": "1.0.0"
+      }
+    },
+    "@radix-ui/react-use-size": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.0.tgz",
+      "integrity": "sha512-imZ3aYcoYCKhhgNpkNDh/aTiU05qw9hX+HHI1QDBTyIlcFjgeFlKKySNGMwTp7nYFLQg/j0VA2FmCY4WPDDHMg==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.0"
+      }
+    },
+    "@radix-ui/rect": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.0.tgz",
+      "integrity": "sha512-d0O68AYy/9oeEy1DdC07bz1/ZXX+DqCskRd3i4JzLSTXwefzaepQrKjXC7aNM8lTHjFLDO0pDgaEiQ7jEk+HVg==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
     "@reduxjs/toolkit": {
       "version": "1.8.2",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.8.2.tgz",
@@ -20505,6 +21221,14 @@
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
     },
+    "aria-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz",
+      "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "array-flatten": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
@@ -21987,6 +22711,11 @@
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "dev": true
     },
+    "detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+    },
     "detect-port": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.3.0.tgz",
@@ -23039,6 +23768,16 @@
         "once": "^1.4.0"
       }
     },
+    "enhanced-resolve": {
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz",
+      "integrity": "sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      }
+    },
     "entities": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
@@ -23786,6 +24525,11 @@
         "has-symbols": "^1.0.1"
       }
     },
+    "get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q=="
+    },
     "get-package-type": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
@@ -24337,6 +25081,14 @@
         "side-channel": "^1.0.4"
       }
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "ip": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
@@ -29112,6 +29864,27 @@
       "integrity": "sha512-XP8A9BT0CpRBD+NYLLeIhld/RqG9+gktUjW1FkE+Vm7OCinbG1SshcK5tb9ls4kzvjZr9mOQc7HYgBngEyPAXg==",
       "dev": true
     },
+    "react-remove-scroll": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+      "requires": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      }
+    },
+    "react-remove-scroll-bar": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
+      "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
+      "requires": {
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
+      }
+    },
     "react-router": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
@@ -29129,6 +29902,16 @@
         "react-router": "6.3.0"
       }
     },
+    "react-style-singleton": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+      "requires": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^2.0.0"
+      }
+    },
     "react-transition-group": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
@@ -30379,18 +31162,6 @@
         "enhanced-resolve": "^5.0.0",
         "micromatch": "^4.0.0",
         "semver": "^7.3.4"
-      },
-      "dependencies": {
-        "enhanced-resolve": {
-          "version": "5.9.2",
-          "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.9.2.tgz",
-          "integrity": "sha512-GIm3fQfwLJ8YZx2smuHpBKkXC1yOk+OBEmKckVyL0i/ea8mqDEykK3ld5dgH1QYPNyT/lIllxV2LULnxCHaHkA==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.2.4",
-            "tapable": "^2.2.0"
-          }
-        }
       }
     },
     "ts-node": {
@@ -30422,11 +31193,40 @@
         }
       }
     },
+    "tsconfig-paths": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",
+      "integrity": "sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==",
+      "dev": true,
+      "requires": {
+        "json5": "^2.2.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      },
+      "dependencies": {
+        "strip-bom": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+          "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+          "dev": true
+        }
+      }
+    },
+    "tsconfig-paths-webpack-plugin": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-4.0.1.tgz",
+      "integrity": "sha512-m5//KzLoKmqu2MVix+dgLKq70MnFi8YL8sdzQZ6DblmCdfuq/y3OqvJd5vMndg2KEVCOeNz8Es4WVZhYInteLw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "enhanced-resolve": "^5.7.0",
+        "tsconfig-paths": "^4.1.2"
+      }
+    },
     "tslib": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
-      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
-      "dev": true
+      "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
     },
     "tunnel": {
       "version": "0.0.6",
@@ -30554,12 +31354,35 @@
         "prepend-http": "^2.0.0"
       }
     },
+    "use-callback-ref": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz",
+      "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "requires": {}
+    },
     "use-memo-one": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.2.tgz",
       "integrity": "sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==",
       "requires": {}
     },
+    "use-sidecar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "requires": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      }
+    },
     "use-sync-external-store": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz",
@@ -30751,18 +31574,6 @@
         "terser-webpack-plugin": "^5.1.3",
         "watchpack": "^2.3.1",
         "webpack-sources": "^3.2.3"
-      },
-      "dependencies": {
-        "enhanced-resolve": {
-          "version": "5.9.3",
-          "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz",
-          "integrity": "sha512-Bq9VSor+kjvW3f9/MiiR4eE3XYgOl7/rS8lnSxbRbF3kS0B2r+Y9w5krBWxZgDxASVZbdYrn5wT4j/Wb0J9qow==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.2.4",
-            "tapable": "^2.2.0"
-          }
-        }
       }
     },
     "webpack-bundle-analyzer": {
diff --git a/package.json b/package.json
index dbedf1fa..d63251cd 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never",
     "rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
     "start": "ts-node ./.erb/scripts/check-port-in-use.js && npm run start:renderer",
-    "start:main": "cross-env NODE_ENV=development electronmon -r ts-node/register/transpile-only .",
+    "start:main": "cross-env NODE_ENV=development electronmon -r ts-node/register/transpile-only -r tsconfig-paths/register .",
     "start:preload": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.preload.dev.ts",
     "start:renderer": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts",
     "start:visualizer": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.visualizer.dev.ts"
@@ -34,6 +34,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.8.2",
     "@mui/material": "^5.8.2",
+    "@radix-ui/react-popover": "1.0.5",
     "@reduxjs/toolkit": "^1.8.2",
     "@sentry/react": "^7.0.0",
     "@sentry/tracing": "^7.0.0",
@@ -112,6 +113,8 @@
     "ts-jest": "^28.0.2",
     "ts-loader": "^9.3.0",
     "ts-node": "^10.7.0",
+    "tsconfig-paths": "^4.2.0",
+    "tsconfig-paths-webpack-plugin": "^4.0.1",
     "typescript": "^4.6.4",
     "url-loader": "^4.1.1",
     "webpack": "^5.72.1",
diff --git a/src/main/engine/handleMidi.ts b/src/features/midi/engine/handleMidi.ts
similarity index 58%
rename from src/main/engine/handleMidi.ts
rename to src/features/midi/engine/handleMidi.ts
index e96ef401..fa321f96 100644
--- a/src/main/engine/handleMidi.ts
+++ b/src/features/midi/engine/handleMidi.ts
@@ -1,18 +1,16 @@
-import { MidiMessage, midiInputID } from '../../shared/midi'
-import { CleanReduxState } from '../../renderer/redux/store'
-import { RealtimeState } from '../../renderer/redux/realtimeStore'
-import { getActionID, SliderAction } from '../../renderer/redux/deviceState'
+import { MidiMessage, midiInputID } from '../shared/midi'
+import { CleanReduxState } from '../../../renderer/redux/store'
+import { RealtimeState } from '../../../renderer/redux/realtimeStore'
+import { SliderAction } from '../redux'
 import {
   midiSetButtonAction,
   midiSetSliderAction,
-  setActiveSceneIndex,
-  setAutoSceneBombacity,
-  setMaster,
-  setBaseParams,
-} from '../../renderer/redux/controlSlice'
+} from '../../../renderer/redux/controlSlice'
 import NodeLink from 'node-link'
 import { PayloadAction } from '@reduxjs/toolkit'
-
+import _midiConfig from './midi.config'
+import { getActionID } from '../redux'
+import { ButtonFunction, SlidersFunction } from '../shared/config'
 interface MidiInput {
   id: string
   message: MidiMessage
@@ -25,6 +23,17 @@ function getInput(msg: MidiMessage): MidiInput {
   }
 }
 
+export type MidiConfig = {
+  buttons: {
+    [k: string]: ButtonFunction
+  }
+  range: {
+    [k: string]: SlidersFunction
+  }
+}
+
+const midiConfig = _midiConfig as MidiConfig
+
 export function handleMessage(
   message: MidiMessage,
   state: CleanReduxState,
@@ -37,8 +46,11 @@ export function handleMessage(
   const midiState = state.control.device
 
   if (midiState.isEditing && midiState.listening) {
+    /**
+     * When we receive first signal from midi attach to action
+     */
     const listenType = midiState.listening.type
-    if (listenType === 'setActiveSceneIndex' || listenType === 'tapTempo') {
+    if (midiConfig.buttons[listenType]) {
       dispatch(
         midiSetButtonAction({
           inputID: input.id,
@@ -87,66 +99,45 @@ export function handleMessage(
       }
     }
   } else {
+    /**
+     * Receive Midi Data
+     */
+    const context = { dispatch, nodeLink, rt_state, state, tapTempo }
     const buttonAction = Object.entries(midiState.buttonActions).find(
       ([_actionId, action]) => action.inputID === input.id
     )?.[1]
     if (buttonAction) {
       if (input.message.type !== 'Off') {
-        if (buttonAction.action.type === 'setActiveSceneIndex') {
-          dispatch(
-            setActiveSceneIndex({
-              sceneType: buttonAction.action.sceneType,
-              val: buttonAction.action.index,
-            })
-          )
-        } else if (buttonAction.action.type === 'tapTempo') {
-          tapTempo()
-        }
+        const buttonConfig: MidiConfig['buttons'][string] =
+          midiConfig.buttons[buttonAction.action.type]
+
+        const set: ButtonFunction['set'] = buttonConfig.set
+
+        set({ action: buttonAction.action }, context)
       }
     }
     const sliderAction = Object.entries(midiState.sliderActions).find(
       ([_actionId, action]) => action.inputID === input.id
     )?.[1]
+
     if (sliderAction) {
       const action = sliderAction.action
+      const sliderConfig: MidiConfig['range'][string] =
+        midiConfig.range[action.type]
+
       const getOldVal = () => {
-        if (action.type === 'setAutoSceneBombacity') {
-          return state.control.light.auto.epicness
-        } else if (action.type === 'setBpm') {
-          return rt_state.time.bpm
-        } else if (action.type === 'setBaseParam') {
-          return (
-            state.control.light.byId[state.control.light.active]?.splitScenes[0]
-              .baseParams[action.paramKey] || 0.5
-          )
-        } else if (action.type === 'setMaster') {
-          return state.control.master
-        } else return 0
+        const get: SlidersFunction['get'] = sliderConfig.get
+
+        if (get) {
+          return get({ action }, context)
+        } else {
+          return 0
+        }
       }
       const setNewVal = (newVal: number) => {
-        if (action.type === 'setAutoSceneBombacity') {
-          dispatch(
-            setAutoSceneBombacity({
-              sceneType: 'light',
-              val: newVal,
-            })
-          )
-        } else if (action.type === 'setMaster') {
-          dispatch(setMaster(newVal))
-        } else if (action.type === 'setBaseParam') {
-          dispatch(
-            setBaseParams({
-              splitIndex: 0,
-              params: {
-                [action.paramKey]: newVal,
-              },
-            })
-          )
-        } else if (action.type === 'setBpm') {
-          nodeLink.setTempo(newVal)
-        } else if (action.type === 'tapTempo') {
-          tapTempo()
-        }
+        const set: SlidersFunction['set'] = sliderConfig.set
+
+        set({ newVal, action }, context)
       }
       const op = sliderAction.options
       const range = op.max - op.min
@@ -184,3 +175,53 @@ export function handleMessage(
     }
   }
 }
+
+/**
+ * Idea for control flow configuration
+ *
+const t = {
+  button: {
+    On: () => {},
+    CC: () => {},
+  },
+  slider: {
+    cc: {
+      CC: {
+        absolute: ({ setNewVal, op, input, range }) => {
+          setNewVal(op.min + (input.message.value / 127) * range)
+        },
+        $default: ({ input, setNewVal, getOldVal }) => {
+          // relative
+          let mapped = (input.message.value - 64) / 5
+          setNewVal(getOldVal() + mapped)
+        },
+      },
+    },
+    note: {
+      On: ({ op, input, range }) => {
+        const val =
+          op.value === 'velocity'
+            ? op.min + (input.message.velocity / 127) * range
+            : op.max
+        return {
+          hold: ({ setNewVal }) => {
+            setNewVal(val)
+          },
+          toggle: ({ getOldVal, setNewVal }) => {
+            if (getOldVal() > op.min) {
+              setNewVal(op.min)
+            } else {
+              setNewVal(val)
+            }
+          },
+        }
+      },
+      Off: {
+        hold: () => {
+          setNewVal(op.min)
+        },
+      },
+    },
+  },
+}
+ */
diff --git a/src/features/midi/engine/midi.config.ts b/src/features/midi/engine/midi.config.ts
new file mode 100644
index 00000000..95a600f0
--- /dev/null
+++ b/src/features/midi/engine/midi.config.ts
@@ -0,0 +1,83 @@
+import {
+  setAutoSceneBombacity,
+  setMaster,
+  setBaseParam,
+  setPeriod,
+  setActiveSceneIndex,
+} from '../../../renderer/redux/controlSlice'
+import { AllowedMidiActions, Config } from '../shared/actions'
+import { createMidiConfig } from '../shared/config'
+
+
+
+export default createMidiConfig<AllowedMidiActions, Config<AllowedMidiActions>>(
+  {
+    buttons: {
+      setActiveSceneIndex: {
+        set: ({ action }, { dispatch }) => {
+          dispatch(setActiveSceneIndex(action))
+        },
+        key: (action) => action.type + action.sceneType + action.val.toString(),
+      },
+
+      TapTempo: {
+        set: (_, { tapTempo }) => {
+          tapTempo()
+        },
+      },
+    },
+    range: {
+      setAutoSceneBombacity: {
+        get: (_, { state }) => state.control.light.auto.epicness,
+        set: ({ newVal }, { dispatch }) =>
+          dispatch(
+            setAutoSceneBombacity({
+              sceneType: 'light',
+              val: newVal,
+            })
+          ),
+      },
+      setMaster: {
+        get: (_, { state }) => state.control.master,
+        set: ({ newVal }, { dispatch }) => dispatch(setMaster(newVal)),
+      },
+      setBaseParam: {
+        key: (action) => action.type + action.paramKey,
+        get: ({ action }, { state }) =>
+          state.control.light.byId[state.control.light.active]?.splitScenes[0]
+            .baseParams[action.paramKey] || 0.5,
+        set: ({ action, newVal }, { dispatch }) => {
+          dispatch(
+            setBaseParam({
+              splitIndex: 0,
+              paramKey: action.paramKey,
+              value: newVal,
+            })
+          )
+        },
+      },
+      SetBPM: {
+        get: (_, { rt_state }) => rt_state.time.bpm,
+        set: ({ newVal }, { nodeLink }) => {
+          nodeLink.setTempo(newVal)
+        },
+      },
+      TapTempo: {
+        set: (_, { tapTempo }) => {
+          tapTempo()
+        },
+      },
+      setPeriod: {
+        key: (action) => `${action.type}:${action.sceneId}:${action.index}`,
+        set: ({ action, newVal }, { dispatch }) => {
+          dispatch(
+            setPeriod({
+              ...action,
+              newVal: newVal,
+            })
+          )
+        },
+      },
+    },
+  }
+)
diff --git a/src/main/engine/midiConnection.ts b/src/features/midi/engine/midiConnection.ts
similarity index 96%
rename from src/main/engine/midiConnection.ts
rename to src/features/midi/engine/midiConnection.ts
index 8c0d1751..fcdee863 100644
--- a/src/main/engine/midiConnection.ts
+++ b/src/features/midi/engine/midiConnection.ts
@@ -1,10 +1,10 @@
 import { Input } from 'midi'
-import { parseMessage, MidiMessage } from '../../shared/midi'
+import { parseMessage, MidiMessage } from '../shared/midi'
 import {
   MidiConnections,
   ConnectionId,
   MidiDevice_t,
-} from '../../shared/connection'
+} from '../../../shared/connection'
 import throttle from 'lodash.throttle'
 
 export type UpdatePayload = MidiConnections
diff --git a/src/features/midi/react/MidiOverlay.tsx b/src/features/midi/react/MidiOverlay.tsx
new file mode 100644
index 00000000..b9708454
--- /dev/null
+++ b/src/features/midi/react/MidiOverlay.tsx
@@ -0,0 +1,468 @@
+import styled from 'styled-components'
+import * as Popover from '@radix-ui/react-popover'
+import { SliderAction } from '../redux'
+import {
+  midiListen,
+  midiStopListening,
+  midiSetSliderAction,
+  removeMidiAction,
+} from '../../../renderer/redux/controlSlice'
+import { useDeviceSelector } from '../../../renderer/redux/store'
+import { useDispatch } from 'react-redux'
+import DraggableNumber from '../../../renderer/base/DraggableNumber'
+import Button from '../../../renderer/base/Button'
+import './midi-overlay-styles.css'
+import { useEffect, useRef } from 'react'
+import { getActionID } from '../redux'
+import { MidiActions } from '../shared/actions'
+interface Props {
+  children?: React.ReactNode
+  action: MidiActions
+  style?: React.CSSProperties
+}
+
+export function ButtonMidiOverlay({ children, action, style }: Props) {
+  const isEditing = useDeviceSelector((state) => state.isEditing)
+  const controlledAction = useDeviceSelector((state) => {
+    return state.buttonActions[getActionID(action)] || null
+  })
+  const isListening = useDeviceSelector((state) => {
+    if (!state.listening) return false
+    return getActionID(state.listening) === getActionID(action)
+  })
+  const dispatch = useDispatch()
+
+  const onClick = () => {
+    dispatch(midiListen(action))
+  }
+
+  return (
+    <Root style={style}>
+      {children}
+      {isEditing && (
+        <Overlay selected={isListening} onClick={onClick}>
+          {controlledAction && (
+            <>
+              {controlledAction.inputID}
+              <X action={action} />
+            </>
+          )}
+        </Overlay>
+      )}
+    </Root>
+  )
+}
+
+export function SliderMidiOverlay({ children, action, style }: Props) {
+  const isEditing = useDeviceSelector((state) => state.isEditing)
+  const controlledAction = useDeviceSelector((state) => {
+    return state.sliderActions[getActionID(action)] || null
+  })
+  const isListening = useDeviceSelector((state) => {
+    if (!state.listening) return false
+    return getActionID(state.listening) === getActionID(action)
+  })
+  const dispatch = useDispatch()
+
+  const onClick = () => {
+    dispatch(midiListen(action))
+  }
+
+  const onChangeMin = (newVal: number) => {
+    dispatch(
+      midiSetSliderAction({
+        ...controlledAction,
+        options: {
+          ...controlledAction.options,
+          min: newVal,
+        },
+      })
+    )
+  }
+
+  const onChangeMax = (newVal: number) => {
+    dispatch(
+      midiSetSliderAction({
+        ...controlledAction,
+        options: {
+          ...controlledAction.options,
+          max: newVal,
+        },
+      })
+    )
+  }
+
+  const onClickMode = () => {
+    dispatch(
+      midiSetSliderAction({
+        ...controlledAction,
+        options: {
+          ...controlledAction.options,
+          mode: controlledAction.options.mode === 'hold' ? 'toggle' : 'hold',
+        },
+      })
+    )
+  }
+
+  const onClickMode_cc = () => {
+    dispatch(
+      midiSetSliderAction({
+        ...controlledAction,
+        options: {
+          ...controlledAction.options,
+          mode:
+            controlledAction.options.mode === 'relative'
+              ? 'absolute'
+              : 'relative',
+        },
+      })
+    )
+  }
+
+  const onClickValue = (value: 'max' | 'velocity') => () => {
+    dispatch(
+      midiSetSliderAction({
+        ...controlledAction,
+        options: {
+          ...controlledAction.options,
+          value: value === 'max' ? 'velocity' : 'max',
+        },
+      })
+    )
+  }
+
+  const minMaxStyle: React.CSSProperties = {
+    padding: '0.1rem 0.2rem',
+    margin: '0.2rem',
+    color: 'white',
+    backgroundColor: '#0009',
+  }
+
+  return (
+    <Root style={style}>
+      {children}
+      {isEditing && (
+        <Overlay selected={isListening} onClick={onClick}>
+          <Wrapper>
+            {controlledAction && (
+              <>
+                {controlledAction.inputID}
+                <X action={action} />
+                <MinMax>
+                  <DraggableNumber
+                    type="continuous"
+                    style={minMaxStyle}
+                    value={controlledAction.options.min}
+                    min={0}
+                    max={controlledAction.options.max}
+                    onChange={onChangeMin}
+                    noArrows
+                  />
+                  <DraggableNumber
+                    type="continuous"
+                    style={minMaxStyle}
+                    value={controlledAction.options.max}
+                    min={controlledAction.options.min}
+                    max={1}
+                    onChange={onChangeMax}
+                    noArrows
+                  />
+                </MinMax>
+                {controlledAction.options.type === 'note' && (
+                  <>
+                    <Button
+                      fontSize="0.8rem"
+                      label={controlledAction.options.mode}
+                      onClick={onClickMode}
+                    />
+                    <Button
+                      fontSize="0.8rem"
+                      label={controlledAction.options.value}
+                      onClick={onClickValue(controlledAction.options.value)}
+                    />
+                  </>
+                )}
+                {controlledAction.options.type === 'cc' && (
+                  <Button
+                    fontSize="0.8rem"
+                    label={controlledAction.options.mode}
+                    onClick={onClickMode_cc}
+                  />
+                )}
+              </>
+            )}
+          </Wrapper>
+        </Overlay>
+      )}
+    </Root>
+  )
+}
+
+interface RangeProps extends Props {
+  min?: number
+  max?: number
+}
+
+export function RangeMidiOverlay({
+  children,
+  action,
+  style,
+  min,
+  max,
+}: RangeProps) {
+  const isEditing = useDeviceSelector((state) => state.isEditing)
+  const controlledAction = useDeviceSelector((state) => {
+    return state.sliderActions[getActionID(action)] || null
+  })
+  const controlledRef = useRef<SliderAction>()
+
+  const isListening = useDeviceSelector((state) => {
+    if (!state.listening) return false
+    return getActionID(state.listening) === getActionID(action)
+  })
+  const dispatch = useDispatch()
+
+  const onListen = () => {
+    dispatch(midiListen(action))
+  }
+  const onStopListen = () => {
+    dispatch(midiStopListening())
+  }
+
+  const onSelect = (open: boolean) => {
+    if (open) {
+      if (!controlledAction) onListen()
+    } else {
+      onStopListen()
+    }
+  }
+
+  const onChangeMin = (newVal: number) => {
+    dispatch(
+      midiSetSliderAction({
+        ...controlledAction,
+        options: {
+          ...controlledAction.options,
+          min: newVal,
+        },
+      })
+    )
+  }
+
+  const onChangeMax = (newVal: number) => {
+    dispatch(
+      midiSetSliderAction({
+        ...controlledAction,
+        options: {
+          ...controlledAction.options,
+          max: newVal,
+        },
+      })
+    )
+  }
+
+  const onClickMode = () => {
+    dispatch(
+      midiSetSliderAction({
+        ...controlledAction,
+        options: {
+          ...controlledAction.options,
+          mode: controlledAction.options.mode === 'hold' ? 'toggle' : 'hold',
+        },
+      })
+    )
+  }
+
+  const onClickMode_cc = () => {
+    dispatch(
+      midiSetSliderAction({
+        ...controlledAction,
+        options: {
+          ...controlledAction.options,
+          mode:
+            controlledAction.options.mode === 'relative'
+              ? 'absolute'
+              : 'relative',
+        },
+      })
+    )
+  }
+
+  const onClickValue = (value: 'max' | 'velocity') => () => {
+    dispatch(
+      midiSetSliderAction({
+        ...controlledAction,
+        options: {
+          ...controlledAction.options,
+          value: value === 'max' ? 'velocity' : 'max',
+        },
+      })
+    )
+  }
+
+  const minMaxStyle: React.CSSProperties = {
+    padding: '0.1rem 0.2rem',
+    margin: '0.2rem',
+    color: 'white',
+    backgroundColor: '#0009',
+  }
+
+  const getState = (): keyof typeof StateColor | undefined => {
+    if (isListening) return 'listening'
+    if (controlledAction) return 'controlled'
+    return undefined
+  }
+
+  useEffect(() => {
+    if (isListening && controlledRef.current !== controlledAction) {
+      onStopListen()
+    }
+    controlledRef.current = controlledAction
+  }, [isListening, controlledAction])
+
+  return (
+    <Root style={style}>
+      {children}
+      {isEditing && (
+        <Popover.Root onOpenChange={onSelect}>
+          <TriggerOverlay
+            state={getState()}
+            className="PopoverTrigger"
+          ></TriggerOverlay>
+
+          <Popover.Portal>
+            {controlledAction && (
+              <Popover.Content className="PopoverContent">
+                <>
+                  <button onClick={onListen}>listen</button>
+                  {controlledAction.inputID}
+                  <Popover.Close
+                    onClick={() => dispatch(removeMidiAction(action))}
+                  >
+                    X
+                  </Popover.Close>
+                  <MinMax>
+                    <DraggableNumber
+                      type="continuous"
+                      style={minMaxStyle}
+                      value={controlledAction.options.min}
+                      min={min || 0}
+                      max={controlledAction.options.max}
+                      onChange={onChangeMin}
+                      noArrows
+                    />
+                    <DraggableNumber
+                      type="continuous"
+                      style={minMaxStyle}
+                      value={controlledAction.options.max}
+                      min={controlledAction.options.min}
+                      max={max || 1}
+                      onChange={onChangeMax}
+                      noArrows
+                    />
+                  </MinMax>
+                  {controlledAction.options.type === 'note' && (
+                    <>
+                      <Button
+                        fontSize="0.8rem"
+                        label={controlledAction.options.mode}
+                        onClick={onClickMode}
+                      />
+                      <Button
+                        fontSize="0.8rem"
+                        label={controlledAction.options.value}
+                        onClick={onClickValue(controlledAction.options.value)}
+                      />
+                    </>
+                  )}
+                  {controlledAction.options.type === 'cc' && (
+                    <Button
+                      fontSize="0.8rem"
+                      label={controlledAction.options.mode}
+                      onClick={onClickMode_cc}
+                    />
+                  )}
+                </>
+                <Popover.Arrow className="PopoverArrow" />
+              </Popover.Content>
+            )}
+          </Popover.Portal>
+        </Popover.Root>
+      )}
+    </Root>
+  )
+}
+
+const Root = styled.div`
+  position: relative;
+`
+
+const StateColor = {
+  listening: '2px solid white',
+  controlled: '2px solid green',
+  undefined: '0',
+} as const
+
+const TriggerOverlay = styled(Popover.Trigger)<{
+  state: keyof typeof StateColor | undefined
+}>`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  cursor: pointer;
+  ${(props) => {
+    return `border: ${StateColor[props.state ? props.state : 'undefined']};`
+  }}
+  background: #56fd56b7;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  color: black;
+`
+
+const Overlay = styled.div<{ selected: boolean }>`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  cursor: pointer;
+  border: ${(props) => props.selected && '2px solid white'};
+  background: #56fd56b7;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  color: black;
+`
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  background-color: #56fd56b7;
+`
+
+const MinMax = styled.div`
+  display: flex;
+  flex-wrap: wrap-reverse;
+  font-size: 0.75rem;
+  justify-content: center;
+`
+
+function X({ action }: { action: MidiActions }) {
+  const dispatch = useDispatch()
+  const onClick = () => dispatch(removeMidiAction(action))
+  return (
+    <div onClick={onClick} style={{ cursor: 'pointer', marginLeft: '0.5rem' }}>
+      X
+    </div>
+  )
+}
diff --git a/src/renderer/base/MidiOverlay_xy.tsx b/src/features/midi/react/MidiOverlay_xy.tsx
similarity index 87%
rename from src/renderer/base/MidiOverlay_xy.tsx
rename to src/features/midi/react/MidiOverlay_xy.tsx
index b1529153..0f3964e0 100644
--- a/src/renderer/base/MidiOverlay_xy.tsx
+++ b/src/features/midi/react/MidiOverlay_xy.tsx
@@ -1,11 +1,13 @@
 import styled from 'styled-components'
-import { getActionID, MidiAction } from '../redux/deviceState'
-import { useDeviceSelector } from '../redux/store'
+
+import { getActionID } from '../redux'
+import { useDeviceSelector } from '../../../renderer/redux/store'
 import { SliderMidiOverlay } from './MidiOverlay'
+import { MidiActions } from '../shared/actions'
 
 interface XYProps {
   children: React.ReactNode
-  actions: MidiAction[]
+  actions: MidiActions[]
   style?: React.CSSProperties
 }
 
diff --git a/src/features/midi/react/midi-overlay-styles.css b/src/features/midi/react/midi-overlay-styles.css
new file mode 100644
index 00000000..0367a183
--- /dev/null
+++ b/src/features/midi/react/midi-overlay-styles.css
@@ -0,0 +1,12 @@
+
+
+.PopoverContent {
+  border-radius: 4px;
+  padding: 20px;
+  width: 260px;
+  background-color: white;
+}
+
+.PopoverArrow {
+  fill: white;
+}
diff --git a/src/features/midi/redux/actions.ts b/src/features/midi/redux/actions.ts
new file mode 100644
index 00000000..74a00a66
--- /dev/null
+++ b/src/features/midi/redux/actions.ts
@@ -0,0 +1,16 @@
+import midiConfig from '../engine/midi.config'
+import { MidiActions } from '../shared/actions'
+
+// must uniquely identify an action (for use in a hash table)
+// does not need to be human readable. Just unique for a given action
+export function getActionID(action: MidiActions) {
+  const config =
+    midiConfig.buttons[action.type] || midiConfig.range[action.type]
+  if (!config) return action.type
+  const key = config.key
+
+  if (!key) return action.type
+
+  // TODO: fix this type
+  return key(action as any)
+}
diff --git a/src/renderer/redux/deviceState.ts b/src/features/midi/redux/deviceState.ts
similarity index 68%
rename from src/renderer/redux/deviceState.ts
rename to src/features/midi/redux/deviceState.ts
index 7698ad2a..32fcae54 100644
--- a/src/renderer/redux/deviceState.ts
+++ b/src/features/midi/redux/deviceState.ts
@@ -1,7 +1,8 @@
 import { PayloadAction } from '@reduxjs/toolkit'
-import { DefaultParam } from '../../shared/params'
-import { SceneType } from '.../../shared/Scenes'
-import { ConnectionId } from '../../shared/connection'
+import { getActionID } from './actions'
+
+import { ConnectionId } from '../../../shared/connection'
+import { MidiActions } from '../shared/actions'
 
 interface Range {
   min: number
@@ -18,55 +19,9 @@ interface SliderControl_note extends Range {
 }
 export type SliderControlOptions = SliderControl_cc | SliderControl_note
 
-interface SetActiveSceneIndex {
-  type: 'setActiveSceneIndex'
-  sceneType: SceneType
-  index: number
-}
-
-interface SetAutoSceneBombacity {
-  type: 'setAutoSceneBombacity'
-}
-
-interface SetMaster {
-  type: 'setMaster'
-}
-interface SetBpm {
-  type: 'setBpm'
-}
-
-interface SetBaseParam {
-  type: 'setBaseParam'
-  paramKey: DefaultParam | string
-}
-
-interface TapTempo {
-  type: 'tapTempo'
-}
-
-export type MidiAction =
-  | SetActiveSceneIndex
-  | SetAutoSceneBombacity
-  | SetMaster
-  | SetBaseParam
-  | SetBpm
-  | TapTempo
-
-// must uniquely identify an action (for use in a hash table)
-// does not need to be human readable. Just unique for a given action
-export function getActionID(action: MidiAction) {
-  if (action.type === 'setActiveSceneIndex') {
-    return action.type + action.sceneType + action.index.toString()
-  }
-  if (action.type === 'setBaseParam') {
-    return action.type + action.paramKey
-  }
-  return action.type
-}
-
 export interface ButtonAction {
   inputID: string
-  action: MidiAction
+  action: MidiActions
 }
 export interface SliderAction extends ButtonAction {
   options: SliderControlOptions
@@ -75,7 +30,7 @@ export interface SliderAction extends ButtonAction {
 // ActionID = setAutoSceneBombacity, setActiveSceneIndex0, etc.
 // InputID = note70, cc50, etc.
 export interface DeviceState {
-  listening?: MidiAction
+  listening?: MidiActions
   isEditing: boolean
   connectable: {
     midi: ConnectionId[]
@@ -100,7 +55,7 @@ export function initDeviceState(): DeviceState {
 export const midiActions = {
   setButtonAction: (
     state: DeviceState,
-    { payload }: PayloadAction<{ inputID: string; action: MidiAction }>
+    { payload }: PayloadAction<{ inputID: string; action: MidiActions }>
   ) => {
     clearInputID(state, payload.inputID)
     state.buttonActions[getActionID(payload.action)] = payload
@@ -111,7 +66,7 @@ export const midiActions = {
       payload,
     }: PayloadAction<{
       inputID: string
-      action: MidiAction
+      action: MidiActions
       options: SliderControlOptions
     }>
   ) => {
@@ -120,15 +75,18 @@ export const midiActions = {
   },
   removeMidiAction: (
     state: DeviceState,
-    { payload }: PayloadAction<MidiAction>
+    { payload }: PayloadAction<MidiActions>
   ) => {
     const actionId = getActionID(payload)
     delete state.buttonActions[actionId]
     delete state.sliderActions[actionId]
   },
-  listen: (state: DeviceState, { payload }: PayloadAction<MidiAction>) => {
+  listen: (state: DeviceState, { payload }: PayloadAction<MidiActions>) => {
     state.listening = payload
   },
+  stopListening: (state: DeviceState) => {
+    delete state.listening
+  },
   setIsEditing: (state: DeviceState, { payload }: PayloadAction<boolean>) => {
     delete state.listening
     state.isEditing = payload
diff --git a/src/features/midi/redux/index.ts b/src/features/midi/redux/index.ts
new file mode 100644
index 00000000..2251a141
--- /dev/null
+++ b/src/features/midi/redux/index.ts
@@ -0,0 +1,2 @@
+export * from './actions'
+export * from './deviceState'
diff --git a/src/features/midi/shared/actions.ts b/src/features/midi/shared/actions.ts
new file mode 100644
index 00000000..37adbedc
--- /dev/null
+++ b/src/features/midi/shared/actions.ts
@@ -0,0 +1,94 @@
+import type { actions } from '../../../renderer/redux/controlSlice/reducers/actions'
+import type { UserCommand } from 'shared/ipc_channels'
+
+import type {
+  CaseReducer,
+  CaseReducerWithPrepare,
+  PayloadAction,
+} from '@reduxjs/toolkit'
+import { ButtonFunction, SlidersFunction } from './config'
+
+/**
+ * From T, pick a set of properties whose keys are in the union K
+ */
+type Include<T extends string, K extends T> = K
+
+type ReduxMidiActions = Include<
+  keyof typeof actions,
+  | 'setAutoSceneBombacity'
+  | 'setMaster'
+  | 'setBaseParam'
+  | 'setPeriod'
+  | 'setActiveSceneIndex'
+>
+
+type IpcMidiActions = Include<UserCommand['type'], 'SetBPM' | 'TapTempo'>
+
+export type AllowedMidiActions = ReduxMidiActions | IpcMidiActions
+
+export type Reductions = RemoveAutoProps<{
+  setBaseParam: { splitIndex: true; value: true }
+  setAutoSceneBombacity: { sceneType: true; val: true }
+  SetBPM: { bpm: true }
+  setPeriod: { newVal: true }
+}>
+
+type AllTrue<T> = T extends { [k in infer Key]: unknown }
+  ? Partial<{ [k in Key]: true }>
+  : never
+
+type RemoveProps<
+  T extends { type: string },
+  BlackList extends Partial<{ [k in string]: true }>
+> = BlackList extends Partial<{ [k in string]: true }>
+  ? Omit<T, keyof BlackList>
+  : T
+
+type RemoveAutoProps<
+  T extends {
+    [k in AllowedMidiActions]?: AllTrue<
+      Omit<Extract<GetMidiAction<AllowedMidiActions>, { type: k }>, 'type'>
+    >
+  }
+> = T
+
+type GetReduxPayload<T> = T extends CaseReducer<
+  any,
+  PayloadAction<infer Payload>
+>
+  ? Payload extends Record<string | number | symbol, unknown>
+    ? Payload
+    : {}
+  : T extends CaseReducerWithPrepare<any, infer _PayloadAction>
+  ? _PayloadAction extends PayloadAction<infer Payload2, string, any, any>
+    ? Payload2
+    : {}
+  : never
+
+type Pretty<T> = T extends object
+  ? {} & {
+      [P in keyof T]: T[P]
+    }
+  : T
+
+export type GetMidiAction<T extends AllowedMidiActions> =
+  T extends UserCommand['type']
+    ? Extract<UserCommand, { type: T }>
+    : T extends keyof typeof actions
+    ? Pretty<{ type: T } & GetReduxPayload<typeof actions[T]>>
+    : never
+
+export type MidiActions = {
+  [k in AllowedMidiActions]: Pretty<
+    RemoveProps<GetMidiAction<k>, Reductions[k]>
+  >
+}[AllowedMidiActions]
+
+export type Config<Keys extends AllowedMidiActions = AllowedMidiActions> = {
+  buttons: Partial<{
+    [k in Keys]: ButtonFunction<RemoveProps<GetMidiAction<k>, Reductions[k]>>
+  }>
+  range: Partial<{
+    [k in Keys]: SlidersFunction<RemoveProps<GetMidiAction<k>, Reductions[k]>>
+  }>
+}
diff --git a/src/features/midi/shared/config.ts b/src/features/midi/shared/config.ts
new file mode 100644
index 00000000..d3be0d70
--- /dev/null
+++ b/src/features/midi/shared/config.ts
@@ -0,0 +1,59 @@
+import { RealtimeState } from '../../../renderer/redux/realtimeStore'
+import NodeLink from 'node-link'
+import { CleanReduxState } from '../../../renderer/redux/store'
+import { PayloadAction } from '@reduxjs/toolkit'
+
+type MidiContext = {
+  rt_state: RealtimeState
+  dispatch: (action: PayloadAction<any>) => void
+  tapTempo: () => void
+  nodeLink: NodeLink
+  state: CleanReduxState
+}
+
+
+export type SlidersFunction<Action = unknown> = {
+  set: (
+    input: {
+      action: Action
+
+      newVal: number
+    },
+    context: MidiContext
+  ) => void
+  get?: (input: { action: Action }, context: MidiContext) => number
+  key?: (action: Action) => string
+}
+
+export type ButtonFunction<Action = unknown> = {
+  set: (
+    input: {
+      action: Action
+    },
+    context: MidiContext
+  ) => void
+  key?: (action: Action) => string
+}
+
+export const createMidiConfig = <
+  Keys extends string,
+  T extends {
+    buttons: Partial<{
+      [k in Keys]: ButtonFunction
+    }>
+    range: Partial<{
+      [k in Keys]: SlidersFunction
+    }>
+  } = {
+    buttons: Partial<{
+      [k in Keys]: ButtonFunction
+    }>
+    range: Partial<{
+      [k in Keys]: SlidersFunction
+    }>
+  }
+>(
+  t: T
+) => {
+  return t
+}
diff --git a/src/shared/midi.ts b/src/features/midi/shared/midi.ts
similarity index 100%
rename from src/shared/midi.ts
rename to src/features/midi/shared/midi.ts
diff --git a/src/main/engine/engine.ts b/src/main/engine/engine.ts
index 00a18951..40534849 100644
--- a/src/main/engine/engine.ts
+++ b/src/main/engine/engine.ts
@@ -1,6 +1,6 @@
 import { WebContents } from 'electron'
 import * as DmxConnection from './dmxConnection'
-import * as MidiConnection from './midiConnection'
+import * as MidiConnection from '../../features/midi/engine/midiConnection'
 import NodeLink from 'node-link'
 import { ipcSetup, IPC_Callbacks } from './ipcHandler'
 import { CleanReduxState } from '../../renderer/redux/store'
@@ -16,7 +16,7 @@ import {
   updateIndexes,
 } from '../../shared/randomizer'
 import { getOutputParams } from '../../shared/modulation'
-import { handleMessage } from './handleMidi'
+import { handleMessage } from '../../features/midi/engine/handleMidi'
 import openVisualizerWindow, {
   VisualizerContainer,
 } from './createVisualizerWindow'
@@ -25,8 +25,8 @@ import { handleAutoScene } from '../../shared/autoScene'
 import { setActiveScene } from '../../renderer/redux/controlSlice'
 import TapTempoEngine from './TapTempoEngine'
 import { flatten_fixtures, getFixturesInGroups } from '../../shared/dmxUtil'
-import { ThrottleMap } from './midiConnection'
-import { MidiMessage, midiInputID } from '../../shared/midi'
+import { ThrottleMap } from '../../features/midi/engine/midiConnection'
+import { MidiMessage, midiInputID } from '../../features/midi/shared/midi'
 import { getAllParamKeys } from '../../renderer/redux/dmxSlice'
 import { indexArray } from '../../shared/util'
 import WledManager from './wled/wled_manager'
diff --git a/src/main/engine/ipcHandler.ts b/src/main/engine/ipcHandler.ts
index cf377196..aa7db539 100644
--- a/src/main/engine/ipcHandler.ts
+++ b/src/main/engine/ipcHandler.ts
@@ -7,7 +7,7 @@ import ipcChannelsVisualizer from '../../visualizer/ipcChannels'
 import { CleanReduxState } from '../../renderer/redux/store'
 import { RealtimeState } from '../../renderer/redux/realtimeStore'
 import * as dmxConnection from './dmxConnection'
-import * as midiConnection from './midiConnection'
+import * as midiConnection from '../../features/midi/engine/midiConnection'
 import { PayloadAction } from '@reduxjs/toolkit'
 import { promises } from 'fs'
 import { VisualizerResource } from '../../visualizer/threejs/VisualizerManager'
diff --git a/src/renderer/base/MidiOverlay.tsx b/src/renderer/base/MidiOverlay.tsx
deleted file mode 100644
index a644fef4..00000000
--- a/src/renderer/base/MidiOverlay.tsx
+++ /dev/null
@@ -1,241 +0,0 @@
-import styled from 'styled-components'
-import { getActionID, MidiAction } from '../redux/deviceState'
-import {
-  midiListen,
-  midiSetSliderAction,
-  removeMidiAction,
-} from '../redux/controlSlice'
-import { useDeviceSelector } from '../redux/store'
-import { useDispatch } from 'react-redux'
-import DraggableNumber from './DraggableNumber'
-import Button from './Button'
-
-interface Props {
-  children?: React.ReactNode
-  action: MidiAction
-  style?: React.CSSProperties
-}
-
-export function ButtonMidiOverlay({ children, action, style }: Props) {
-  const isEditing = useDeviceSelector((state) => state.isEditing)
-  const controlledAction = useDeviceSelector((state) => {
-    return state.buttonActions[getActionID(action)] || null
-  })
-  const isListening = useDeviceSelector((state) => {
-    if (!state.listening) return false
-    return getActionID(state.listening) === getActionID(action)
-  })
-  const dispatch = useDispatch()
-
-  const onClick = () => {
-    dispatch(midiListen(action))
-  }
-
-  return (
-    <Root style={style}>
-      {children}
-      {isEditing && (
-        <Overlay selected={isListening} onClick={onClick}>
-          {controlledAction && (
-            <>
-              {controlledAction.inputID}
-              <X action={action} />
-            </>
-          )}
-        </Overlay>
-      )}
-    </Root>
-  )
-}
-
-export function SliderMidiOverlay({ children, action, style }: Props) {
-  const isEditing = useDeviceSelector((state) => state.isEditing)
-  const controlledAction = useDeviceSelector((state) => {
-    return state.sliderActions[getActionID(action)] || null
-  })
-  const isListening = useDeviceSelector((state) => {
-    if (!state.listening) return false
-    return getActionID(state.listening) === getActionID(action)
-  })
-  const dispatch = useDispatch()
-
-  const onClick = () => {
-    dispatch(midiListen(action))
-  }
-
-  const onChangeMin = (newVal: number) => {
-    dispatch(
-      midiSetSliderAction({
-        ...controlledAction,
-        options: {
-          ...controlledAction.options,
-          min: newVal,
-        },
-      })
-    )
-  }
-
-  const onChangeMax = (newVal: number) => {
-    dispatch(
-      midiSetSliderAction({
-        ...controlledAction,
-        options: {
-          ...controlledAction.options,
-          max: newVal,
-        },
-      })
-    )
-  }
-
-  const onClickMode = () => {
-    dispatch(
-      midiSetSliderAction({
-        ...controlledAction,
-        options: {
-          ...controlledAction.options,
-          mode: controlledAction.options.mode === 'hold' ? 'toggle' : 'hold',
-        },
-      })
-    )
-  }
-
-  const onClickMode_cc = () => {
-    dispatch(
-      midiSetSliderAction({
-        ...controlledAction,
-        options: {
-          ...controlledAction.options,
-          mode:
-            controlledAction.options.mode === 'relative'
-              ? 'absolute'
-              : 'relative',
-        },
-      })
-    )
-  }
-
-  const onClickValue = (value: 'max' | 'velocity') => () => {
-    dispatch(
-      midiSetSliderAction({
-        ...controlledAction,
-        options: {
-          ...controlledAction.options,
-          value: value === 'max' ? 'velocity' : 'max',
-        },
-      })
-    )
-  }
-
-  const minMaxStyle: React.CSSProperties = {
-    padding: '0.1rem 0.2rem',
-    margin: '0.2rem',
-    color: 'white',
-    backgroundColor: '#0009',
-  }
-
-  return (
-    <Root style={style}>
-      {children}
-      {isEditing && (
-        <Overlay selected={isListening} onClick={onClick}>
-          <Wrapper>
-            {controlledAction && (
-              <>
-                {controlledAction.inputID}
-                <X action={action} />
-                <MinMax>
-                  <DraggableNumber
-                    type="continuous"
-                    style={minMaxStyle}
-                    value={controlledAction.options.min}
-                    min={0}
-                    max={controlledAction.options.max}
-                    onChange={onChangeMin}
-                    noArrows
-                  />
-                  <DraggableNumber
-                    type="continuous"
-                    style={minMaxStyle}
-                    value={controlledAction.options.max}
-                    min={controlledAction.options.min}
-                    max={1}
-                    onChange={onChangeMax}
-                    noArrows
-                  />
-                </MinMax>
-                {controlledAction.options.type === 'note' && (
-                  <>
-                    <Button
-                      fontSize="0.8rem"
-                      label={controlledAction.options.mode}
-                      onClick={onClickMode}
-                    />
-                    <Button
-                      fontSize="0.8rem"
-                      label={controlledAction.options.value}
-                      onClick={onClickValue(controlledAction.options.value)}
-                    />
-                  </>
-                )}
-                {controlledAction.options.type === 'cc' && (
-                  <Button
-                    fontSize="0.8rem"
-                    label={controlledAction.options.mode}
-                    onClick={onClickMode_cc}
-                  />
-                )}
-              </>
-            )}
-          </Wrapper>
-        </Overlay>
-      )}
-    </Root>
-  )
-}
-
-const Root = styled.div`
-  position: relative;
-`
-
-const Overlay = styled.div<{ selected: boolean }>`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  cursor: pointer;
-  border: ${(props) => props.selected && '2px solid white'};
-  background: #56fd56b7;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  align-content: center;
-  color: black;
-`
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  align-content: center;
-  background-color: #56fd56b7;
-`
-
-const MinMax = styled.div`
-  display: flex;
-  flex-wrap: wrap-reverse;
-  font-size: 0.75rem;
-  justify-content: center;
-`
-
-function X({ action }: { action: MidiAction }) {
-  const dispatch = useDispatch()
-  const onClick = () => dispatch(removeMidiAction(action))
-  return (
-    <div onClick={onClick} style={{ cursor: 'pointer', marginLeft: '0.5rem' }}>
-      X
-    </div>
-  )
-}
diff --git a/src/renderer/controls/HsvPad.tsx b/src/renderer/controls/HsvPad.tsx
index 5760bdb3..ecec9338 100644
--- a/src/renderer/controls/HsvPad.tsx
+++ b/src/renderer/controls/HsvPad.tsx
@@ -1,7 +1,7 @@
 import SVpad from './SVpad'
 import Hue from './Hue'
-import MidiOverlay_xy from '../base/MidiOverlay_xy'
-import { SliderMidiOverlay } from '../base/MidiOverlay'
+import MidiOverlay_xy from 'features/midi/react/MidiOverlay_xy'
+import { SliderMidiOverlay } from 'features/midi/react/MidiOverlay'
 import styled from 'styled-components'
 
 interface Props {
diff --git a/src/renderer/controls/MasterSlider.tsx b/src/renderer/controls/MasterSlider.tsx
index 3d8a31e0..43055398 100644
--- a/src/renderer/controls/MasterSlider.tsx
+++ b/src/renderer/controls/MasterSlider.tsx
@@ -2,7 +2,7 @@ import Slider from '../base/Slider'
 import { useControlSelector } from '../redux/store'
 import { useDispatch } from 'react-redux'
 import { setMaster } from '../redux/controlSlice'
-import { SliderMidiOverlay } from '../base/MidiOverlay'
+import { SliderMidiOverlay } from 'features/midi/react/MidiOverlay'
 
 export default function MasterSlider() {
   const master = useControlSelector((state) => state.master)
diff --git a/src/renderer/controls/ParamSlider.tsx b/src/renderer/controls/ParamSlider.tsx
index 92b5a054..4f719d9d 100644
--- a/src/renderer/controls/ParamSlider.tsx
+++ b/src/renderer/controls/ParamSlider.tsx
@@ -5,11 +5,11 @@ import { useBaseParam } from '../redux/store'
 import { useDispatch } from 'react-redux'
 import { setBaseParams } from '../redux/controlSlice'
 import ParamCursor from './ParamCursor'
-import { SliderMidiOverlay } from '../base/MidiOverlay'
+import { SliderMidiOverlay } from 'features/midi/react/MidiOverlay'
 import ParamXButton from './ParamXButton'
 
 interface Props {
-  param: DefaultParam | string
+  param: DefaultParam
   splitIndex: number
 }
 
diff --git a/src/renderer/controls/XyParamsPad.tsx b/src/renderer/controls/XyParamsPad.tsx
index 9a53b52d..20b3a75b 100644
--- a/src/renderer/controls/XyParamsPad.tsx
+++ b/src/renderer/controls/XyParamsPad.tsx
@@ -6,7 +6,7 @@ import XYWindow from './XYWindow'
 import styled from 'styled-components'
 import ParamXButton from './ParamXButton'
 import { useBaseParam } from 'renderer/redux/store'
-import MidiOverlay_xy from '../base/MidiOverlay_xy'
+import MidiOverlay_xy from 'features/midi/react/MidiOverlay_xy'
 import { paramBundles } from './ParamAddButton'
 import { secondaryEnabled } from 'renderer/base/keyUtil'
 
diff --git a/src/renderer/ipcHandler.ts b/src/renderer/ipcHandler.ts
index 35dc2151..ae4ae387 100644
--- a/src/renderer/ipcHandler.ts
+++ b/src/renderer/ipcHandler.ts
@@ -2,7 +2,7 @@ import ipc_channels, { UserCommand, MainCommand } from '../shared/ipc_channels'
 import { CleanReduxState } from './redux/store'
 import { RealtimeState } from './redux/realtimeStore'
 import * as dmxConnection from '../main/engine/dmxConnection'
-import * as midiConnection from '../main/engine/midiConnection'
+import * as midiConnection from '../features/midi/engine/midiConnection'
 import { PayloadAction } from '@reduxjs/toolkit'
 
 interface Config {
diff --git a/src/renderer/menu/Bpm.tsx b/src/renderer/menu/Bpm.tsx
index 5596218b..9e352a08 100644
--- a/src/renderer/menu/Bpm.tsx
+++ b/src/renderer/menu/Bpm.tsx
@@ -1,7 +1,7 @@
 import { send_user_command } from '../ipcHandler'
 import { useRealtimeSelector } from 'renderer/redux/realtimeStore'
 import useDragBasic from 'renderer/hooks/useDragBasic'
-import { SliderMidiOverlay } from 'renderer/base/MidiOverlay'
+import { SliderMidiOverlay } from 'features/midi/react/MidiOverlay'
 
 export default function BPM() {
   const bpm = useRealtimeSelector((state) => state.time.bpm)
@@ -13,7 +13,7 @@ export default function BPM() {
   })
 
   return (
-    <SliderMidiOverlay action={{ type: 'setBpm' }}>
+    <SliderMidiOverlay action={{ type: 'SetBPM' }}>
       <div
         ref={dragContainer}
         onMouseDown={onMouseDown}
diff --git a/src/renderer/menu/TapTempo.tsx b/src/renderer/menu/TapTempo.tsx
index c8c2ba43..9b95f21a 100644
--- a/src/renderer/menu/TapTempo.tsx
+++ b/src/renderer/menu/TapTempo.tsx
@@ -1,5 +1,5 @@
 import { send_user_command } from '../ipcHandler'
-import { ButtonMidiOverlay } from 'renderer/base/MidiOverlay'
+import { ButtonMidiOverlay } from 'features/midi/react/MidiOverlay'
 import styled from 'styled-components'
 
 interface Props {}
@@ -8,7 +8,7 @@ export default function TapTempo({}: Props) {
   return (
     <ButtonMidiOverlay
       action={{
-        type: 'tapTempo',
+        type: 'TapTempo',
       }}
     >
       <Button onClick={() => send_user_command({ type: 'TapTempo' })}>
diff --git a/src/renderer/pages/Scenes.tsx b/src/renderer/pages/Scenes.tsx
index 3fb6062e..1c27336f 100644
--- a/src/renderer/pages/Scenes.tsx
+++ b/src/renderer/pages/Scenes.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import StatusBar from '../menu/StatusBar'
-import Modulators from '../scenes/Modulators'
+import Modulators from '../scenes/modulators/Modulators'
 import SceneSelection from '../scenes/SceneSelection'
 import SplitPane from '../base/SplitPane'
 import styled from 'styled-components'
diff --git a/src/renderer/redux/controlSlice.ts b/src/renderer/redux/controlSlice.ts
index a0e12732..8c874127 100644
--- a/src/renderer/redux/controlSlice.ts
+++ b/src/renderer/redux/controlSlice.ts
@@ -1,511 +1,6 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-import { LfoShape } from '../../shared/oscillator'
-import { DefaultParam, Params } from '../../shared/params'
-import { ReorderParams } from '../../shared/util'
-import { clampNormalized, clamp } from '../../math/util'
-import { initModulator } from '../../shared/modulation'
-import { nanoid } from 'nanoid'
-import { RandomizerOptions } from '../../shared/randomizer'
-import cloneDeep from 'lodash.clonedeep'
-import { LayerConfig } from '../../visualizer/threejs/layers/LayerConfig'
-import { EffectConfig } from '../../visualizer/threejs/effects/effectConfigs'
-import { DeviceState, initDeviceState, midiActions } from './deviceState'
-import {
-  ScenesStateBundle,
-  initScenesState,
-  initLightScene,
-  initVisualScene,
-  LightScene_t,
-  LightScenes_t,
-  VisualScene_t,
-  VisualScenes_t,
-  SceneType,
-  initSplitScene,
-} from '../../shared/Scenes'
-import { reorderArray } from '../../shared/util'
-
-export interface ControlState extends ScenesStateBundle {
-  device: DeviceState
-  master: number
-}
-export function initControlState(): ControlState {
-  return {
-    light: initScenesState(initLightScene()),
-    visual: initScenesState(initVisualScene()),
-    device: initDeviceState(),
-    master: 1,
-  }
-}
-
-interface IncrementModulatorPayload {
-  index: number
-  flip: number
-  phaseShift: number
-  skew: number
-  symmetricSkew: number
-}
-
-interface SetModulationPayload {
-  splitIndex: number
-  modIndex: number
-  param: DefaultParam | string
-  value: number | undefined
-}
-
-function modifyActiveLightScene(
-  state: ControlState,
-  callback: (scene: LightScene_t) => void
-) {
-  const scene = state.light.byId[state.light.active]
-  if (scene) {
-    callback(scene)
-  }
-}
-
-function modifyActiveVisualScene(
-  state: ControlState,
-  callback: (scene: VisualScene_t) => void
-) {
-  const scene = state.visual.byId[state.visual.active]
-  if (scene) {
-    callback(scene)
-  }
-}
-
-function modifyActiveScene(
-  state: ControlState,
-  sceneType: SceneType,
-  callback: (scene: VisualScene_t | LightScene_t) => void
-) {
-  const scene = state[sceneType].byId[state[sceneType].active]
-  if (scene) {
-    callback(scene)
-  }
-}
-
-type ScopedAction<T> = PayloadAction<{
-  sceneType: SceneType
-  val: T
-}>
-
-type ParamsAction = PayloadAction<{
-  splitIndex: number
-  params: Params
-}>
-
-export const scenesSlice = createSlice({
-  name: 'scenes',
-  initialState: initControlState(),
-  reducers: {
-    setMaster: (state, { payload }: PayloadAction<number>) => {
-      state.master = payload
-    },
-    // =====================   LIGHT & VISUAL SCENES   ===========================
-    setAutoSceneEnabled: (
-      state,
-      { payload: { sceneType, val } }: ScopedAction<boolean>
-    ) => {
-      state[sceneType].auto.enabled = val
-    },
-    setAutoSceneBombacity: (
-      state,
-      { payload: { sceneType, val } }: ScopedAction<number>
-    ) => {
-      state[sceneType].auto.epicness = val
-    },
-    setAutoScenePeriod: (
-      state,
-      { payload: { sceneType, val } }: ScopedAction<number>
-    ) => {
-      state[sceneType].auto.period = val
-    },
-    newScene: (state, { payload }: PayloadAction<SceneType>) => {
-      const scenes = state[payload]
-      const id = nanoid()
-      scenes.ids.push(id)
-      scenes.byId[id] =
-        payload === 'light' ? initLightScene() : initVisualScene()
-      scenes.active = id
-    },
-    removeScene: (
-      state,
-      { payload: { sceneType, val } }: ScopedAction<{ index: number }>
-    ) => {
-      const scenes = state[sceneType]
-      const id = scenes.ids[val.index]
-      scenes.ids.splice(val.index, 1)
-      delete scenes.byId[id]
-      // This is necessary in a world where you can delete the active scene... Which you currently can't
-      // if (state.active === id) {
-      //   state.active = state.ids[0]
-      // }
-    },
-    setActiveScene: (
-      state,
-      { payload: { sceneType, val } }: ScopedAction<string>
-    ) => {
-      state[sceneType].active = val
-    },
-    setActiveSceneIndex: (
-      state,
-      { payload: { sceneType, val } }: ScopedAction<number>
-    ) => {
-      const scenes = state[sceneType]
-      if (val > -1 && scenes.ids.length > val) {
-        scenes.active = scenes.ids[val]
-      } else {
-        console.error('Tried to set the scene to an out-of-bounds index')
-      }
-    },
-    setActiveSceneBombacity: (
-      state,
-      { payload: { sceneType, val } }: ScopedAction<number>
-    ) => {
-      modifyActiveScene(state, sceneType, (scene) => {
-        scene.epicness = val
-      })
-    },
-    setActiveSceneAutoEnabled: (
-      state,
-      { payload: { sceneType, val } }: ScopedAction<boolean>
-    ) => {
-      modifyActiveScene(state, sceneType, (scene) => {
-        scene.autoEnabled = val
-      })
-    },
-    setActiveSceneName: (
-      state,
-      { payload: { sceneType, val } }: ScopedAction<string>
-    ) => {
-      modifyActiveScene(state, sceneType, (scene) => {
-        scene.name = val
-      })
-    },
-    reorderScene: (
-      state,
-      { payload: { sceneType, val } }: ScopedAction<ReorderParams>
-    ) => {
-      reorderArray(state[sceneType].ids, val)
-    },
-    copyActiveScene: (state, { payload }: PayloadAction<SceneType>) => {
-      const scenes = state[payload]
-      const id = nanoid()
-      scenes.ids.push(id)
-      scenes.byId[id] = cloneDeep(scenes.byId[scenes.active])
-    },
-    sortScenesByBombacity: (state, { payload }: PayloadAction<SceneType>) => {
-      const scenes = state[payload]
-      scenes.ids.sort((idLeft, idRight) => {
-        const leftScene = scenes.byId[idLeft]
-        const rightScene = scenes.byId[idRight]
-        if (leftScene && rightScene)
-          return leftScene.epicness - rightScene.epicness
-        return 0
-      })
-    },
-    autoBombacity: (state, { payload }: PayloadAction<SceneType>) => {
-      const scenes = state[payload]
-      scenes.ids.forEach((id, i) => {
-        const scene = scenes.byId[id]
-        if (scene) scene.epicness = i / (scenes.ids.length - 1)
-      })
-    },
-
-    // =====================   LIGHT SCENES ONLY   ===========================
-    resetLightScenes: (state, { payload }: PayloadAction<LightScenes_t>) => {
-      state.light = payload
-    },
-    setModulatorShape: (
-      state,
-      { payload }: PayloadAction<{ index: number; shape: LfoShape }>
-    ) => {
-      modifyActiveLightScene(state, (scene) => {
-        scene.modulators[payload.index].lfo.shape = payload.shape
-      })
-    },
-    setPeriod: (
-      state,
-      { payload }: PayloadAction<{ index: number; newVal: number }>
-    ) => {
-      modifyActiveLightScene(state, (scene) => {
-        scene.modulators[payload.index].lfo.period = payload.newVal
-      })
-    },
-    incrementPeriod: (
-      state,
-      { payload }: PayloadAction<{ index: number; amount: number }>
-    ) => {
-      modifyActiveLightScene(state, (scene) => {
-        scene.modulators[payload.index].lfo.period = clamp(
-          scene.modulators[payload.index].lfo.period + payload.amount,
-          0.25,
-          16
-        )
-      })
-    },
-    incrementModulator: (
-      state,
-      { payload }: PayloadAction<IncrementModulatorPayload>
-    ) => {
-      modifyActiveLightScene(state, (scene) => {
-        const modulator = scene.modulators[payload.index]
-        modulator.lfo.flip = clampNormalized(modulator.lfo.flip + payload.flip)
-        modulator.lfo.phaseShift = clampNormalized(
-          modulator.lfo.phaseShift + payload.phaseShift
-        )
-        modulator.lfo.skew = clampNormalized(modulator.lfo.skew + payload.skew)
-        modulator.lfo.symmetricSkew = clampNormalized(
-          modulator.lfo.symmetricSkew + payload.symmetricSkew
-        )
-      })
-    },
-    addModulator: (state, _: PayloadAction<void>) => {
-      modifyActiveLightScene(state, (scene) => {
-        scene.modulators.push(initModulator(scene.splitScenes.length))
-      })
-    },
-    removeModulator: (state, { payload }: PayloadAction<number>) => {
-      modifyActiveLightScene(state, (scene) => {
-        scene.modulators.splice(payload, 1)
-      })
-    },
-    resetModulator: (state, { payload }: PayloadAction<number>) => {
-      modifyActiveLightScene(state, (scene) => {
-        scene.modulators[payload] = initModulator(scene.splitScenes.length)
-      })
-    },
-    setModulation: (
-      state,
-      { payload }: PayloadAction<SetModulationPayload>
-    ) => {
-      const { splitIndex, modIndex, param, value } = payload
-      modifyActiveLightScene(state, (scene) => {
-        scene.modulators[modIndex].splitModulations[splitIndex][param] = value
-      })
-    },
-    setBaseParams: (
-      state,
-      { payload: { params, splitIndex } }: ParamsAction
-    ) => {
-      for (let [key, value] of Object.entries(params)) {
-        modifyActiveLightScene(state, (scene) => {
-          const baseParams = scene.splitScenes[splitIndex].baseParams
-          baseParams[key] = value
-        })
-      }
-    },
-    deleteBaseParams: (
-      state,
-      {
-        payload: { params, splitIndex },
-      }: PayloadAction<{
-        splitIndex: number
-        params: readonly (DefaultParam | string)[]
-      }>
-    ) => {
-      for (const param of params) {
-        modifyActiveLightScene(state, (scene) => {
-          const baseParams = scene.splitScenes[splitIndex].baseParams
-          delete baseParams[param]
-
-          // Now remove the params from any modulators
-          scene.modulators.forEach((modulator) => {
-            const modulation = modulator.splitModulations[splitIndex]
-            delete modulation[param]
-          })
-        })
-      }
-    },
-    incrementBaseParams: (
-      state,
-      { payload: { params, splitIndex } }: ParamsAction
-    ) => {
-      for (let [key, amount] of Object.entries(params)) {
-        modifyActiveLightScene(state, (scene) => {
-          if (amount !== undefined) {
-            const baseParams = scene.splitScenes[splitIndex].baseParams
-            const currentVal = baseParams[key as DefaultParam]
-            if (currentVal !== undefined) {
-              baseParams[key as DefaultParam] = clampNormalized(
-                currentVal + amount
-              )
-            }
-          }
-        })
-      }
-    },
-    setRandomizer: (
-      state,
-      {
-        payload: { key, value, splitIndex },
-      }: PayloadAction<{
-        key: keyof RandomizerOptions
-        value: number
-        splitIndex: number
-      }>
-    ) => {
-      modifyActiveLightScene(state, (scene) => {
-        scene.splitScenes[splitIndex].randomizer[key] = value
-      })
-    },
-    addSplitScene: (state, {}: PayloadAction<undefined>) => {
-      modifyActiveLightScene(state, (scene) => {
-        scene.splitScenes.push(initSplitScene())
-        scene.modulators.forEach((modulator) => {
-          modulator.splitModulations.push({})
-        })
-      })
-    },
-    removeSplitSceneByIndex: (state, { payload }: PayloadAction<number>) => {
-      modifyActiveLightScene(state, (scene) => {
-        scene.splitScenes.splice(payload, 1)
-        scene.modulators.forEach((modulator) => {
-          modulator.splitModulations.splice(payload, 1)
-        })
-      })
-    },
-    setSceneGroup: (
-      state,
-      {
-        payload: { index, group, val },
-      }: PayloadAction<{
-        index: number
-        group: string
-        val: boolean | undefined
-      }>
-    ) => {
-      modifyActiveLightScene(state, (scene) => {
-        if (val === undefined) {
-          delete scene.splitScenes[index].groups[group]
-        } else {
-          scene.splitScenes[index].groups[group] = val
-        }
-      })
-    },
-    // =====================   VISUAL SCENES ONLY   ===========================
-    resetVisualScenes: (state, { payload }: PayloadAction<VisualScenes_t>) => {
-      state.visual = payload
-    },
-    setVisualSceneConfig: (state, { payload }: PayloadAction<LayerConfig>) => {
-      modifyActiveVisualScene(state, (scene) => (scene.config = payload))
-    },
-    activeVisualSceneEffect_add: (
-      state,
-      { payload }: PayloadAction<EffectConfig>
-    ) => {
-      modifyActiveVisualScene(state, (scene) => {
-        scene.effectsConfig.push(payload)
-        scene.activeEffectIndex = scene.effectsConfig.length - 1
-      })
-    },
-    activeVisualSceneEffect_set: (
-      state,
-      { payload }: PayloadAction<EffectConfig>
-    ) => {
-      modifyActiveVisualScene(state, (scene) => {
-        scene.effectsConfig[scene.activeEffectIndex] = payload
-      })
-    },
-    activeVisualSceneEffect_removeIndex: (
-      state,
-      { payload }: PayloadAction<number>
-    ) => {
-      modifyActiveVisualScene(state, (scene) => {
-        scene.effectsConfig.splice(payload, 1)
-        if (scene.activeEffectIndex >= scene.effectsConfig.length) {
-          scene.activeEffectIndex = scene.effectsConfig.length - 1
-        }
-      })
-    },
-    activeVisualSceneEffect_reorder: (
-      state,
-      { payload }: PayloadAction<ReorderParams>
-    ) => {
-      modifyActiveVisualScene(state, (scene) => {
-        reorderArray(scene.effectsConfig, payload)
-      })
-    },
-    activeVisualScene_setActiveEffectIndex: (
-      state,
-      { payload }: PayloadAction<number>
-    ) => {
-      modifyActiveVisualScene(
-        state,
-        (scene) => (scene.activeEffectIndex = payload)
-      )
-    },
-
-    // =====================   MIDI   ===========================================
-    midiListen: (state, action) => midiActions.listen(state.device, action),
-    midiSetButtonAction: (state, action) =>
-      midiActions.setButtonAction(state.device, action),
-    midiSetIsEditing: (state, action) =>
-      midiActions.setIsEditing(state.device, action),
-    midiSetSliderAction: (state, action) =>
-      midiActions.setSliderAction(state.device, action),
-    setDmxConnectable: (state, action) =>
-      midiActions.setDmxConnectable(state.device, action),
-    setMidiConnectable: (state, action) =>
-      midiActions.setMidiConnectable(state.device, action),
-    removeMidiAction: (state, action) =>
-      midiActions.removeMidiAction(state.device, action),
-  },
-})
-
-export const {
-  setMaster,
-
-  // LIGHT & VISUAL SCENES
-  setAutoSceneEnabled,
-  setAutoSceneBombacity,
-  setAutoScenePeriod,
-  newScene,
-  removeScene,
-  setActiveScene,
-  setActiveSceneIndex,
-  setActiveSceneBombacity,
-  setActiveSceneAutoEnabled,
-  setActiveSceneName,
-  reorderScene,
-  copyActiveScene,
-  sortScenesByBombacity,
-  autoBombacity,
-
-  // LIGHT SCENES
-  resetLightScenes,
-  setBaseParams,
-  deleteBaseParams,
-  incrementBaseParams,
-  setModulatorShape,
-  setPeriod,
-  incrementPeriod,
-  incrementModulator,
-  addModulator,
-  removeModulator,
-  setModulation,
-  resetModulator,
-  setRandomizer,
-  addSplitScene,
-  removeSplitSceneByIndex,
-  setSceneGroup,
-
-  // VISUAL SCENES
-  resetVisualScenes,
-  setVisualSceneConfig,
-  activeVisualSceneEffect_add,
-  activeVisualSceneEffect_removeIndex,
-  activeVisualSceneEffect_reorder,
-  activeVisualScene_setActiveEffectIndex,
-  activeVisualSceneEffect_set,
-
-  // MIDI
-  midiListen,
-  midiSetButtonAction,
-  midiSetIsEditing,
-  midiSetSliderAction,
-  setDmxConnectable,
-  setMidiConnectable,
-  removeMidiAction,
-} = scenesSlice.actions
+import { scenesSlice } from "./controlSlice/slice";
+export * from './controlSlice/actions'
+export * from './controlSlice/midi'
+export * from './controlSlice/slice'
 
 export default scenesSlice.reducer
diff --git a/src/renderer/redux/controlSlice/actions.ts b/src/renderer/redux/controlSlice/actions.ts
new file mode 100644
index 00000000..4cae82b4
--- /dev/null
+++ b/src/renderer/redux/controlSlice/actions.ts
@@ -0,0 +1,49 @@
+import { scenesSlice } from './slice'
+
+export const {
+  setMaster,
+
+  // LIGHT & VISUAL SCENES
+  setAutoSceneEnabled,
+  setAutoSceneBombacity,
+  setAutoScenePeriod,
+  newScene,
+  removeScene,
+  setActiveScene,
+  setActiveSceneIndex,
+  setActiveSceneBombacity,
+  setActiveSceneAutoEnabled,
+  setActiveSceneName,
+  reorderScene,
+  copyActiveScene,
+  sortScenesByBombacity,
+  autoBombacity,
+
+  // LIGHT SCENES
+  resetLightScenes,
+  setBaseParams,
+  setBaseParam,
+  deleteBaseParams,
+  incrementBaseParams,
+  setModulatorShape,
+  setPeriod,
+  incrementPeriod,
+  incrementModulator,
+  addModulator,
+  removeModulator,
+  setModulation,
+  resetModulator,
+  setRandomizer,
+  addSplitScene,
+  removeSplitSceneByIndex,
+  setSceneGroup,
+
+  // VISUAL SCENES
+  resetVisualScenes,
+  setVisualSceneConfig,
+  activeVisualSceneEffect_add,
+  activeVisualSceneEffect_removeIndex,
+  activeVisualSceneEffect_reorder,
+  activeVisualScene_setActiveEffectIndex,
+  activeVisualSceneEffect_set,
+} = scenesSlice.actions
diff --git a/src/renderer/redux/controlSlice/midi.ts b/src/renderer/redux/controlSlice/midi.ts
new file mode 100644
index 00000000..2c8e1b50
--- /dev/null
+++ b/src/renderer/redux/controlSlice/midi.ts
@@ -0,0 +1,13 @@
+import { scenesSlice } from './slice'
+
+export const {
+  // MIDI
+  midiListen,
+  midiStopListening,
+  midiSetButtonAction,
+  midiSetIsEditing,
+  midiSetSliderAction,
+  setDmxConnectable,
+  setMidiConnectable,
+  removeMidiAction,
+} = scenesSlice.actions
diff --git a/src/renderer/redux/controlSlice/reducers/actions.ts b/src/renderer/redux/controlSlice/reducers/actions.ts
new file mode 100644
index 00000000..82a3d483
--- /dev/null
+++ b/src/renderer/redux/controlSlice/reducers/actions.ts
@@ -0,0 +1,465 @@
+import { ReorderParams } from '../../../../shared/util'
+import { clampNormalized, clamp } from '../../../../math/util'
+import { initModulator } from '../../../../shared/modulation'
+import { nanoid } from 'nanoid'
+import { RandomizerOptions } from '../../../../shared/randomizer'
+import cloneDeep from 'lodash.clonedeep'
+import { LayerConfig } from '../../../../visualizer/threejs/layers/LayerConfig'
+import { EffectConfig } from '../../../../visualizer/threejs/effects/effectConfigs'
+import { LfoShape } from '../../../../shared/oscillator'
+import { reorderArray } from '../../../../shared/util'
+import { PayloadAction, SliceCaseReducers } from '@reduxjs/toolkit'
+import {
+  LightScene_t,
+  LightScenes_t,
+  VisualScene_t,
+  VisualScenes_t,
+  SceneType,
+  initSplitScene,
+  ScenesStateBundle,
+  initLightScene,
+  initVisualScene,
+} from '../../../../shared/Scenes'
+
+import { DefaultParam, Params } from '../../../../shared/params'
+
+export interface ActionState extends ScenesStateBundle {
+  master: number
+}
+
+export interface IncrementModulatorPayload {
+  index: number
+  flip: number
+  phaseShift: number
+  skew: number
+  symmetricSkew: number
+}
+
+export interface SetModulationPayload {
+  splitIndex: number
+  modIndex: number
+  param: DefaultParam | string
+  value: number | undefined
+}
+
+function modifyActiveLightScene(
+  state: ActionState,
+  callback: (scene: LightScene_t) => void
+) {
+  const scene = state.light.byId[state.light.active]
+  if (scene) {
+    callback(scene)
+  }
+}
+
+const modifyScene = {
+  light: {
+    active: modifyActiveLightScene,
+    byId: (
+      state: ActionState,
+      sceneId: string,
+      callback: (scene: LightScene_t) => void
+    ) => {
+      const scene = state.light.byId[sceneId]
+      if (scene) {
+        callback(scene)
+      }
+    },
+  },
+}
+
+function modifyActiveVisualScene(
+  state: ActionState,
+  callback: (scene: VisualScene_t) => void
+) {
+  const scene = state.visual.byId[state.visual.active]
+  if (scene) {
+    callback(scene)
+  }
+}
+
+function modifyActiveScene(
+  state: ActionState,
+  sceneType: SceneType,
+  callback: (scene: VisualScene_t | LightScene_t) => void
+) {
+  const scene = state[sceneType].byId[state[sceneType].active]
+  if (scene) {
+    callback(scene)
+  }
+}
+
+type ScopedAction<T> = PayloadAction<{
+  sceneType: SceneType
+  val: T
+}>
+
+type ParamsAction = PayloadAction<{
+  splitIndex: number
+  params: Params
+}>
+
+type ParamAction = PayloadAction<{
+  splitIndex: number
+  paramKey: DefaultParam
+  value: number | undefined
+}>
+
+const createTypedReducers = <
+  State,
+  Reducers extends SliceCaseReducers<State> = SliceCaseReducers<State>
+>(
+  _stateType: State,
+  reducers: Reducers
+) => {
+  return reducers
+}
+
+export const actions = createTypedReducers({} as ActionState, {
+  setMaster: (state, { payload }: PayloadAction<number>) => {
+    state.master = payload
+  },
+  // =====================   LIGHT & VISUAL SCENES   ===========================
+  setAutoSceneEnabled: (
+    state,
+    { payload: { sceneType, val } }: ScopedAction<boolean>
+  ) => {
+    state[sceneType].auto.enabled = val
+  },
+  setAutoSceneBombacity: (
+    state,
+    { payload: { sceneType, val } }: ScopedAction<number>
+  ) => {
+    state[sceneType].auto.epicness = val
+  },
+  setAutoScenePeriod: (
+    state,
+    { payload: { sceneType, val } }: ScopedAction<number>
+  ) => {
+    state[sceneType].auto.period = val
+  },
+  newScene: (state, { payload }: PayloadAction<SceneType>) => {
+    const scenes = state[payload]
+    const id = nanoid()
+    scenes.ids.push(id)
+    scenes.byId[id] = payload === 'light' ? initLightScene() : initVisualScene()
+    scenes.active = id
+  },
+  removeScene: (
+    state,
+    { payload: { sceneType, val } }: ScopedAction<{ index: number }>
+  ) => {
+    const scenes = state[sceneType]
+    const id = scenes.ids[val.index]
+    scenes.ids.splice(val.index, 1)
+    delete scenes.byId[id]
+    // This is necessary in a world where you can delete the active scene... Which you currently can't
+    // if (state.active === id) {
+    //   state.active = state.ids[0]
+    // }
+  },
+  setActiveScene: (
+    state,
+    { payload: { sceneType, val } }: ScopedAction<string>
+  ) => {
+    state[sceneType].active = val
+  },
+  setActiveSceneIndex: (
+    state,
+    { payload: { sceneType, val } }: ScopedAction<number>
+  ) => {
+    const scenes = state[sceneType]
+    if (val > -1 && scenes.ids.length > val) {
+      scenes.active = scenes.ids[val]
+    } else {
+      console.error('Tried to set the scene to an out-of-bounds index')
+    }
+  },
+  setActiveSceneBombacity: (
+    state,
+    { payload: { sceneType, val } }: ScopedAction<number>
+  ) => {
+    modifyActiveScene(state, sceneType, (scene) => {
+      scene.epicness = val
+    })
+  },
+  setActiveSceneAutoEnabled: (
+    state,
+    { payload: { sceneType, val } }: ScopedAction<boolean>
+  ) => {
+    modifyActiveScene(state, sceneType, (scene) => {
+      scene.autoEnabled = val
+    })
+  },
+  setActiveSceneName: (
+    state,
+    { payload: { sceneType, val } }: ScopedAction<string>
+  ) => {
+    modifyActiveScene(state, sceneType, (scene) => {
+      scene.name = val
+    })
+  },
+  reorderScene: (
+    state,
+    { payload: { sceneType, val } }: ScopedAction<ReorderParams>
+  ) => {
+    reorderArray(state[sceneType].ids, val)
+  },
+  copyActiveScene: (state, { payload }: PayloadAction<SceneType>) => {
+    const scenes = state[payload]
+    const id = nanoid()
+    scenes.ids.push(id)
+    scenes.byId[id] = cloneDeep(scenes.byId[scenes.active])
+  },
+  sortScenesByBombacity: (state, { payload }: PayloadAction<SceneType>) => {
+    const scenes = state[payload]
+    scenes.ids.sort((idLeft, idRight) => {
+      const leftScene = scenes.byId[idLeft]
+      const rightScene = scenes.byId[idRight]
+      if (leftScene && rightScene)
+        return leftScene.epicness - rightScene.epicness
+      return 0
+    })
+  },
+  autoBombacity: (state, { payload }: PayloadAction<SceneType>) => {
+    const scenes = state[payload]
+    scenes.ids.forEach((id, i) => {
+      const scene = scenes.byId[id]
+      if (scene) scene.epicness = i / (scenes.ids.length - 1)
+    })
+  },
+
+  // =====================   LIGHT SCENES ONLY   ===========================
+  resetLightScenes: (state, { payload }: PayloadAction<LightScenes_t>) => {
+    state.light = payload
+  },
+  setModulatorShape: (
+    state,
+    { payload }: PayloadAction<{ index: number; shape: LfoShape }>
+  ) => {
+    modifyActiveLightScene(state, (scene) => {
+      scene.modulators[payload.index].lfo.shape = payload.shape
+    })
+  },
+  setPeriod: (
+    state,
+    {
+      payload,
+    }: PayloadAction<{ index: number; newVal: number; sceneId?: string }>
+  ) => {
+    const handle = (scene: LightScene_t) => {
+      scene.modulators[payload.index].lfo.period = payload.newVal
+    }
+    if (payload.sceneId) {
+      modifyScene.light.byId(state, payload.sceneId, handle)
+    } else {
+      modifyActiveLightScene(state, handle)
+    }
+  },
+  incrementPeriod: (
+    state,
+    { payload }: PayloadAction<{ index: number; amount: number }>
+  ) => {
+    modifyActiveLightScene(state, (scene) => {
+      scene.modulators[payload.index].lfo.period = clamp(
+        scene.modulators[payload.index].lfo.period + payload.amount,
+        0.25,
+        16
+      )
+    })
+  },
+  incrementModulator: (
+    state,
+    { payload }: PayloadAction<IncrementModulatorPayload>
+  ) => {
+    modifyActiveLightScene(state, (scene) => {
+      const modulator = scene.modulators[payload.index]
+      modulator.lfo.flip = clampNormalized(modulator.lfo.flip + payload.flip)
+      modulator.lfo.phaseShift = clampNormalized(
+        modulator.lfo.phaseShift + payload.phaseShift
+      )
+      modulator.lfo.skew = clampNormalized(modulator.lfo.skew + payload.skew)
+      modulator.lfo.symmetricSkew = clampNormalized(
+        modulator.lfo.symmetricSkew + payload.symmetricSkew
+      )
+    })
+  },
+  addModulator: (state, _: PayloadAction<void>) => {
+    modifyActiveLightScene(state, (scene) => {
+      scene.modulators.push(initModulator(scene.splitScenes.length))
+    })
+  },
+  removeModulator: (state, { payload }: PayloadAction<number>) => {
+    modifyActiveLightScene(state, (scene) => {
+      scene.modulators.splice(payload, 1)
+    })
+  },
+  resetModulator: (state, { payload }: PayloadAction<number>) => {
+    modifyActiveLightScene(state, (scene) => {
+      scene.modulators[payload] = initModulator(scene.splitScenes.length)
+    })
+  },
+  setModulation: (state, { payload }: PayloadAction<SetModulationPayload>) => {
+    const { splitIndex, modIndex, param, value } = payload
+    modifyActiveLightScene(state, (scene) => {
+      scene.modulators[modIndex].splitModulations[splitIndex][param] = value
+    })
+  },
+  setBaseParams: (state, { payload: { params, splitIndex } }: ParamsAction) => {
+    for (let [key, value] of Object.entries(params)) {
+      modifyActiveLightScene(state, (scene) => {
+        const baseParams = scene.splitScenes[splitIndex].baseParams
+        baseParams[key] = value
+      })
+    }
+  },
+  setBaseParam: (
+    state,
+    { payload: { paramKey, value, splitIndex } }: ParamAction
+  ) => {
+    modifyActiveLightScene(state, (scene) => {
+      const baseParams = scene.splitScenes[splitIndex].baseParams
+      baseParams[paramKey] = value
+    })
+  },
+  deleteBaseParams: (
+    state,
+    {
+      payload: { params, splitIndex },
+    }: PayloadAction<{
+      splitIndex: number
+      params: readonly (DefaultParam | string)[]
+    }>
+  ) => {
+    for (const param of params) {
+      modifyActiveLightScene(state, (scene) => {
+        const baseParams = scene.splitScenes[splitIndex].baseParams
+        delete baseParams[param]
+
+        // Now remove the params from any modulators
+        scene.modulators.forEach((modulator) => {
+          const modulation = modulator.splitModulations[splitIndex]
+          delete modulation[param]
+        })
+      })
+    }
+  },
+  incrementBaseParams: (
+    state,
+    { payload: { params, splitIndex } }: ParamsAction
+  ) => {
+    for (let [key, amount] of Object.entries(params)) {
+      modifyActiveLightScene(state, (scene) => {
+        if (amount !== undefined) {
+          const baseParams = scene.splitScenes[splitIndex].baseParams
+          const currentVal = baseParams[key as DefaultParam]
+          if (currentVal !== undefined) {
+            baseParams[key as DefaultParam] = clampNormalized(
+              currentVal + amount
+            )
+          }
+        }
+      })
+    }
+  },
+  setRandomizer: (
+    state,
+    {
+      payload: { key, value, splitIndex },
+    }: PayloadAction<{
+      key: keyof RandomizerOptions
+      value: number
+      splitIndex: number
+    }>
+  ) => {
+    modifyActiveLightScene(state, (scene) => {
+      scene.splitScenes[splitIndex].randomizer[key] = value
+    })
+  },
+  addSplitScene: (state, {}: PayloadAction<undefined>) => {
+    modifyActiveLightScene(state, (scene) => {
+      scene.splitScenes.push(initSplitScene())
+      scene.modulators.forEach((modulator) => {
+        modulator.splitModulations.push({})
+      })
+    })
+  },
+  removeSplitSceneByIndex: (state, { payload }: PayloadAction<number>) => {
+    modifyActiveLightScene(state, (scene) => {
+      scene.splitScenes.splice(payload, 1)
+      scene.modulators.forEach((modulator) => {
+        modulator.splitModulations.splice(payload, 1)
+      })
+    })
+  },
+  setSceneGroup: (
+    state,
+    {
+      payload: { index, group, val },
+    }: PayloadAction<{
+      index: number
+      group: string
+      val: boolean | undefined
+    }>
+  ) => {
+    modifyActiveLightScene(state, (scene) => {
+      if (val === undefined) {
+        delete scene.splitScenes[index].groups[group]
+      } else {
+        scene.splitScenes[index].groups[group] = val
+      }
+    })
+  },
+  // =====================   VISUAL SCENES ONLY   ===========================
+  resetVisualScenes: (state, { payload }: PayloadAction<VisualScenes_t>) => {
+    state.visual = payload
+  },
+  setVisualSceneConfig: (state, { payload }: PayloadAction<LayerConfig>) => {
+    modifyActiveVisualScene(state, (scene) => (scene.config = payload))
+  },
+  activeVisualSceneEffect_add: (
+    state,
+    { payload }: PayloadAction<EffectConfig>
+  ) => {
+    modifyActiveVisualScene(state, (scene) => {
+      scene.effectsConfig.push(payload)
+      scene.activeEffectIndex = scene.effectsConfig.length - 1
+    })
+  },
+  activeVisualSceneEffect_set: (
+    state,
+    { payload }: PayloadAction<EffectConfig>
+  ) => {
+    modifyActiveVisualScene(state, (scene) => {
+      scene.effectsConfig[scene.activeEffectIndex] = payload
+    })
+  },
+  activeVisualSceneEffect_removeIndex: (
+    state,
+    { payload }: PayloadAction<number>
+  ) => {
+    modifyActiveVisualScene(state, (scene) => {
+      scene.effectsConfig.splice(payload, 1)
+      if (scene.activeEffectIndex >= scene.effectsConfig.length) {
+        scene.activeEffectIndex = scene.effectsConfig.length - 1
+      }
+    })
+  },
+  activeVisualSceneEffect_reorder: (
+    state,
+    { payload }: PayloadAction<ReorderParams>
+  ) => {
+    modifyActiveVisualScene(state, (scene) => {
+      reorderArray(scene.effectsConfig, payload)
+    })
+  },
+  activeVisualScene_setActiveEffectIndex: (
+    state,
+    { payload }: PayloadAction<number>
+  ) => {
+    modifyActiveVisualScene(
+      state,
+      (scene) => (scene.activeEffectIndex = payload)
+    )
+  },
+})
diff --git a/src/renderer/redux/controlSlice/slice.ts b/src/renderer/redux/controlSlice/slice.ts
new file mode 100644
index 00000000..78cbc183
--- /dev/null
+++ b/src/renderer/redux/controlSlice/slice.ts
@@ -0,0 +1,44 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+import { DeviceState, initDeviceState, midiActions } from 'features/midi/redux'
+import {
+  initScenesState,
+  initLightScene,
+  initVisualScene,
+} from '../../../shared/Scenes'
+import { ActionState, actions } from './reducers/actions'
+
+export interface ControlState extends ActionState {
+  device: DeviceState
+}
+export function initControlState(): ControlState {
+  return {
+    light: initScenesState(initLightScene()),
+    visual: initScenesState(initVisualScene()),
+    device: initDeviceState(),
+    master: 1,
+  }
+}
+
+export const scenesSlice = createSlice({
+  name: 'scenes',
+  initialState: initControlState(),
+  reducers: {
+    ...actions,
+    // =====================   MIDI   ===========================================
+    midiListen: (state, action) => midiActions.listen(state.device, action),
+    midiStopListening: (state) => midiActions.stopListening(state.device),
+    midiSetButtonAction: (state, action) =>
+      midiActions.setButtonAction(state.device, action),
+    midiSetIsEditing: (state, action) =>
+      midiActions.setIsEditing(state.device, action),
+    midiSetSliderAction: (state, action) =>
+      midiActions.setSliderAction(state.device, action),
+    setDmxConnectable: (state, action) =>
+      midiActions.setDmxConnectable(state.device, action),
+    setMidiConnectable: (state, action) =>
+      midiActions.setMidiConnectable(state.device, action),
+    removeMidiAction: (state, action) =>
+      midiActions.removeMidiAction(state.device, action),
+  },
+})
diff --git a/src/renderer/redux/store.ts b/src/renderer/redux/store.ts
index 07a1d23c..7e2c0fc5 100644
--- a/src/renderer/redux/store.ts
+++ b/src/renderer/redux/store.ts
@@ -11,7 +11,7 @@ import controlReducer, { ControlState } from './controlSlice'
 import { LightScene_t } from '../../shared/Scenes'
 import mixerReducer from './mixerSlice'
 import undoable, { StateWithHistory } from 'redux-undo'
-import { DeviceState } from './deviceState'
+import { DeviceState } from 'features/midi/redux'
 import { VisualScene_t, SceneType } from '../../shared/Scenes'
 import { DefaultParam, Params } from '../../shared/params'
 import { SaveInfo } from 'shared/save'
diff --git a/src/renderer/scenes/AutoScene.tsx b/src/renderer/scenes/AutoScene.tsx
index 635b9130..598d68b1 100644
--- a/src/renderer/scenes/AutoScene.tsx
+++ b/src/renderer/scenes/AutoScene.tsx
@@ -9,7 +9,7 @@ import {
 } from '../redux/controlSlice'
 import { SceneType } from '../../shared/Scenes'
 import DraggableNumber from '../base/DraggableNumber'
-import { SliderMidiOverlay } from 'renderer/base/MidiOverlay'
+import { SliderMidiOverlay } from 'features/midi/react/MidiOverlay'
 
 export default function AutoScene({ sceneType }: { sceneType: SceneType }) {
   const dispatch = useDispatch()
diff --git a/src/renderer/scenes/LfoPeriod.tsx b/src/renderer/scenes/LfoPeriod.tsx
deleted file mode 100644
index 8851e20f..00000000
--- a/src/renderer/scenes/LfoPeriod.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useDispatch } from 'react-redux'
-import { useActiveLightScene } from '../redux/store'
-import { setPeriod } from '../redux/controlSlice'
-import DraggableNumber from '../base/DraggableNumber'
-
-type Props = {
-  index: number
-}
-
-export default function LfoPeriod({ index }: Props) {
-  const period = useActiveLightScene(
-    (activeScene) => activeScene.modulators[index].lfo.period
-  )
-
-  const dispatch = useDispatch()
-
-  function onChange(newVal: number) {
-    dispatch(setPeriod({ index: index, newVal: newVal }))
-  }
-
-  return (
-    <DraggableNumber
-      value={period}
-      min={0.25}
-      max={32}
-      onChange={onChange}
-      style={{}}
-    />
-  )
-}
diff --git a/src/renderer/scenes/Scene.tsx b/src/renderer/scenes/Scene.tsx
index 28442334..86f9ad2f 100644
--- a/src/renderer/scenes/Scene.tsx
+++ b/src/renderer/scenes/Scene.tsx
@@ -15,7 +15,7 @@ import CloseIcon from '@mui/icons-material/Close'
 import AddIcon from '@mui/icons-material/Add'
 import DisableIcon from '@mui/icons-material/DoNotDisturb'
 import Slider from '../base/Slider'
-import { ButtonMidiOverlay } from '../base/MidiOverlay'
+import { ButtonMidiOverlay } from 'features/midi/react/MidiOverlay'
 import Input from '../base/Input'
 import { Draggable } from 'react-beautiful-dnd'
 import DragHandleIcon from '@mui/icons-material/DragHandle'
@@ -104,7 +104,7 @@ export function Scene({ sceneType, index, id }: Props) {
             action={{
               type: 'setActiveSceneIndex',
               sceneType: sceneType,
-              index: index,
+              val: index
             }}
           >
             <Root
diff --git a/src/renderer/scenes/ModulationMatrix.tsx b/src/renderer/scenes/modulators/ModulationMatrix.tsx
similarity index 100%
rename from src/renderer/scenes/ModulationMatrix.tsx
rename to src/renderer/scenes/modulators/ModulationMatrix.tsx
diff --git a/src/renderer/scenes/ModulationSlider.tsx b/src/renderer/scenes/modulators/ModulationSlider.tsx
similarity index 95%
rename from src/renderer/scenes/ModulationSlider.tsx
rename to src/renderer/scenes/modulators/ModulationSlider.tsx
index 9402a61e..b45aa502 100644
--- a/src/renderer/scenes/ModulationSlider.tsx
+++ b/src/renderer/scenes/modulators/ModulationSlider.tsx
@@ -1,14 +1,14 @@
 import { useState } from 'react'
 import { useDispatch } from 'react-redux'
-import { DefaultParam } from '../../shared/params'
+import { DefaultParam } from '../../../shared/params'
 import {
   useActiveLightScene,
   useBaseParams,
   useDmxSelector,
   useModParam,
-} from '../redux/store'
-import { setModulation } from '../redux/controlSlice'
-import useDragMapped from '../hooks/useDragMapped'
+} from '../../redux/store'
+import { setModulation } from '../../redux/controlSlice'
+import useDragMapped from '../../hooks/useDragMapped'
 import styled from 'styled-components'
 import Popup from 'renderer/base/Popup'
 import { indexArray } from 'shared/util'
diff --git a/src/renderer/scenes/ModulatorControl.tsx b/src/renderer/scenes/modulators/ModulatorControl.tsx
similarity index 83%
rename from src/renderer/scenes/ModulatorControl.tsx
rename to src/renderer/scenes/modulators/ModulatorControl.tsx
index 10ab4975..63fa05f8 100644
--- a/src/renderer/scenes/ModulatorControl.tsx
+++ b/src/renderer/scenes/modulators/ModulatorControl.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
-import LfoMenu from './LfoMenu'
-import LfoVisualizer from './LfoVisualizer'
-import LfoCursor from './LfoCursor'
+import LfoMenu from './lfo/LfoMenu'
+import LfoVisualizer from './lfo/LfoVisualizer'
+import LfoCursor from './lfo/LfoCursor'
 import ModulationMatrix from './ModulationMatrix'
 
 type Props = {
diff --git a/src/renderer/scenes/Modulators.tsx b/src/renderer/scenes/modulators/Modulators.tsx
similarity index 91%
rename from src/renderer/scenes/Modulators.tsx
rename to src/renderer/scenes/modulators/Modulators.tsx
index c89b4187..fcd7bf32 100644
--- a/src/renderer/scenes/Modulators.tsx
+++ b/src/renderer/scenes/modulators/Modulators.tsx
@@ -1,4 +1,4 @@
-import { useActiveLightScene } from '../redux/store'
+import { useActiveLightScene } from '../../redux/store'
 import ModulatorControl from './ModulatorControl'
 import NewModulator from './NewModulator'
 
diff --git a/src/renderer/scenes/NewModulator.tsx b/src/renderer/scenes/modulators/NewModulator.tsx
similarity index 90%
rename from src/renderer/scenes/NewModulator.tsx
rename to src/renderer/scenes/modulators/NewModulator.tsx
index 84a27605..664c5fc4 100644
--- a/src/renderer/scenes/NewModulator.tsx
+++ b/src/renderer/scenes/modulators/NewModulator.tsx
@@ -1,6 +1,6 @@
 import { useDispatch } from 'react-redux'
 import AddIcon from '@mui/icons-material/Add'
-import { addModulator } from '../redux/controlSlice'
+import { addModulator } from '../../redux/controlSlice'
 
 export default function NewModulator() {
   const dispatch = useDispatch()
diff --git a/src/renderer/scenes/LfoCursor.tsx b/src/renderer/scenes/modulators/lfo/LfoCursor.tsx
similarity index 67%
rename from src/renderer/scenes/LfoCursor.tsx
rename to src/renderer/scenes/modulators/lfo/LfoCursor.tsx
index c2ec19e9..6a776ced 100644
--- a/src/renderer/scenes/LfoCursor.tsx
+++ b/src/renderer/scenes/modulators/lfo/LfoCursor.tsx
@@ -1,7 +1,7 @@
-import { useRealtimeSelector } from '../redux/realtimeStore'
-import Cursor from '../base/Cursor'
-import { GetValueFromPhase, GetPhase } from '../../shared/oscillator'
-import { useActiveLightScene } from '../redux/store'
+import { useRealtimeSelector } from '../../../redux/realtimeStore'
+import Cursor from '../../../base/Cursor'
+import { GetValueFromPhase, GetPhase } from '../../../../shared/oscillator'
+import { useActiveLightScene } from '../../../redux/store'
 
 export default function LfoCursor({
   index,
diff --git a/src/renderer/scenes/LfoMenu.tsx b/src/renderer/scenes/modulators/lfo/LfoMenu.tsx
similarity index 90%
rename from src/renderer/scenes/LfoMenu.tsx
rename to src/renderer/scenes/modulators/lfo/LfoMenu.tsx
index 2f1d47ad..ae422a76 100644
--- a/src/renderer/scenes/LfoMenu.tsx
+++ b/src/renderer/scenes/modulators/lfo/LfoMenu.tsx
@@ -1,18 +1,18 @@
-import { LfoShape } from '../../shared/oscillator'
+import { LfoShape } from '../../../../shared/oscillator'
 import { useDispatch } from 'react-redux'
-import { useActiveLightScene } from '../redux/store'
+import { useActiveLightScene } from '../../../redux/store'
 import {
   resetModulator,
   removeModulator,
   setModulatorShape,
-} from '../redux/controlSlice'
+} from '../../../redux/controlSlice'
 import CloseIcon from '@mui/icons-material/Close'
 import IconButton from '@mui/material/IconButton'
 import MenuItem from '@mui/material/MenuItem'
 import Select from '@mui/material/Select'
 import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore'
 import LfoPeriod from './LfoPeriod'
-import Divider from '../base/Divider'
+import Divider from '../../../base/Divider'
 
 type Props = {
   index: number
diff --git a/src/renderer/scenes/modulators/lfo/LfoPeriod.tsx b/src/renderer/scenes/modulators/lfo/LfoPeriod.tsx
new file mode 100644
index 00000000..38b1b284
--- /dev/null
+++ b/src/renderer/scenes/modulators/lfo/LfoPeriod.tsx
@@ -0,0 +1,55 @@
+import { useDispatch } from 'react-redux'
+import { useActiveLightScene, useControlSelector } from '../../../redux/store'
+import { setPeriod } from '../../../redux/controlSlice'
+import DraggableNumber from '../../../base/DraggableNumber'
+import { RangeMidiOverlay } from 'features/midi/react/MidiOverlay'
+
+// const Notes = {
+//   '1/4': 0.25,
+//   '1/2': 0.5,
+//   '1': 1,
+//   '2': 2,
+//   '4': 2,
+//   '8': 2,
+// } as const
+
+type Props = {
+  index: number
+}
+
+export default function LfoPeriod({ index }: Props) {
+  const period = useActiveLightScene(
+    (activeScene) => activeScene.modulators[index].lfo.period
+  )
+  const sceneId = useControlSelector((state) => state.light.active)
+
+  const dispatch = useDispatch()
+
+  function onChange(newVal: number) {
+    dispatch(setPeriod({ index: index, newVal: newVal }))
+  }
+
+  const wrapperStyle: React.CSSProperties = {}
+
+  const min = 0.25
+  const max = 32
+
+  return (
+    <>
+      <RangeMidiOverlay
+        action={{ type: 'setPeriod', index, sceneId }}
+        style={wrapperStyle}
+        min={min}
+        max={max}
+      >
+        <DraggableNumber
+          value={period}
+          min={min}
+          max={max}
+          onChange={onChange}
+          style={{}}
+        />
+      </RangeMidiOverlay>
+    </>
+  )
+}
diff --git a/src/renderer/scenes/LfoVisualizer.tsx b/src/renderer/scenes/modulators/lfo/LfoVisualizer.tsx
similarity index 88%
rename from src/renderer/scenes/LfoVisualizer.tsx
rename to src/renderer/scenes/modulators/lfo/LfoVisualizer.tsx
index d06df6dd..e0cbff4c 100644
--- a/src/renderer/scenes/LfoVisualizer.tsx
+++ b/src/renderer/scenes/modulators/lfo/LfoVisualizer.tsx
@@ -1,8 +1,8 @@
-import { GetValueFromPhase } from '../../shared/oscillator'
+import { GetValueFromPhase } from '../../../../shared/oscillator'
 import { useDispatch } from 'react-redux'
-import useDragBasic from '../hooks/useDragBasic'
-import { incrementModulator } from '../redux/controlSlice'
-import { useActiveLightScene } from '../redux/store'
+import useDragBasic from '../../../hooks/useDragBasic'
+import { incrementModulator } from '../../../redux/controlSlice'
+import { useActiveLightScene } from '../../../redux/store'
 import { secondaryEnabled } from 'renderer/base/keyUtil'
 
 type Props = {
diff --git a/src/shared/fixState.ts b/src/shared/fixState.ts
index f01bd209..ce84bb27 100644
--- a/src/shared/fixState.ts
+++ b/src/shared/fixState.ts
@@ -1,4 +1,4 @@
-import { DeviceState } from 'renderer/redux/deviceState'
+import { DeviceState } from 'features/midi/redux'
 import { DmxState } from 'renderer/redux/dmxSlice'
 import { initLedState } from 'renderer/redux/ledState'
 import { CleanReduxState } from '../renderer/redux/store'
diff --git a/src/shared/save.ts b/src/shared/save.ts
index dc4a4b5b..53fcb608 100644
--- a/src/shared/save.ts
+++ b/src/shared/save.ts
@@ -1,6 +1,6 @@
 import { LightScenes_t, VisualScenes_t } from 'shared/Scenes'
 import { DmxState } from 'renderer/redux/dmxSlice'
-import { DeviceState } from 'renderer/redux/deviceState'
+import { DeviceState } from 'features/midi/redux'
 import {
   fixLightScenes,
   fixVisualScenes,
diff --git a/tsconfig.json b/tsconfig.json
index 2b1c9873..7237282d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,7 +19,10 @@
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
     "allowJs": true,
-    "outDir": "release/app/dist"
+    "outDir": "release/app/dist",
+    "paths": {
+      "features/*": ["features/*"]
+    }
   },
   "exclude": ["test", "release/build", "release/app/dist", ".erb/dll"]
 }