diff --git a/index.js b/index.js
index 3241ea8..1520c80 100644
--- a/index.js
+++ b/index.js
@@ -2,7 +2,7 @@
 require('electron-reload')(__dirname);
 
 const {app, BrowserWindow, ipcMain} = require("electron");
-// const dbus = new (require("./dbus.js"))();
+const dbus = new (require("./dbus.js"))();
 
 process.title = "streamdeck-editor";
 
@@ -43,41 +43,41 @@ app.on('activate', function () {
 });
 
 
-// ipcMain.on("get-deck-info", (event) => {
-//     dbus.getDeckInfo((info) => {
-//         event.reply("deck-info", info);
-//     });
-//     dbus.listenToPage(page => {
-//         event.reply("page-updated", page);
-//     });
-// });
-//
-// ipcMain.on('get-config', (event) => {
-//     dbus.getConfig((config) => {
-//         event.reply("config", config);
-//     })
-// });
-//
-// ipcMain.on('set-config', (event, arg) => {
-//     dbus.setConfig(arg, (status) => {
-//         event.reply("status", status);
-//     })
-// });
-//
-// ipcMain.on("reload", (event) => {
-//     dbus.reload((status) => {
-//         event.reply("reload", status);
-//     })
-// });
-//
-// ipcMain.on("set-page", (event, arg) => {
-//     dbus.setPage(arg, status => {
-//         event.reply("page-set", status);
-//     })
-// });
-//
-// ipcMain.on("commit-config", (event, arg) => {
-//     dbus.commitConfig(status => {
-//         event.reply("config-committed", status);
-//     })
-// });
\ No newline at end of file
+ipcMain.on("get-deck-info", (event) => {
+    dbus.getDeckInfo((info) => {
+        event.reply("deck-info", info);
+    });
+    dbus.listenToPage(page => {
+        event.reply("page-updated", page);
+    });
+});
+
+ipcMain.on('get-config', (event) => {
+    dbus.getConfig((config) => {
+        event.reply("config", config);
+    })
+});
+
+ipcMain.on('set-config', (event, arg) => {
+    dbus.setConfig(arg, (status) => {
+        event.reply("status", status);
+    })
+});
+
+ipcMain.on("reload", (event) => {
+    dbus.reload((status) => {
+        event.reply("reload", status);
+    })
+});
+
+ipcMain.on("set-page", (event, arg) => {
+    dbus.setPage(arg, status => {
+        event.reply("page-set", status);
+    })
+});
+
+ipcMain.on("commit-config", (event, arg) => {
+    dbus.commitConfig(status => {
+        event.reply("config-committed", status);
+    })
+});
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index c521e5a..e8065c9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -281,16 +281,16 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "9.7.3",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.3.tgz",
-      "integrity": "sha512-8T5Y1C5Iyj6PgkPSFd0ODvK9DIleuPKUPYniNxybS47g2k2wFgLZ46lGQHlBuGKIAEV8fbCDfKCCRS1tvOgc3Q==",
+      "version": "9.7.4",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.4.tgz",
+      "integrity": "sha512-g0Ya30YrMBAEZk60lp+qfX5YQllG+S5W3GYCFvyHTvhOki0AEQJLPEcIuGRsqVwLi8FvXPVtwTGhfr38hVpm0g==",
       "requires": {
-        "browserslist": "^4.8.0",
-        "caniuse-lite": "^1.0.30001012",
+        "browserslist": "^4.8.3",
+        "caniuse-lite": "^1.0.30001020",
         "chalk": "^2.4.2",
         "normalize-range": "^0.1.2",
         "num2fraction": "^1.2.2",
-        "postcss": "^7.0.23",
+        "postcss": "^7.0.26",
         "postcss-value-parser": "^4.0.2"
       }
     },
@@ -389,7 +389,8 @@
     "boolean": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.0.0.tgz",
-      "integrity": "sha512-OElxJ1lUSinuoUnkpOgLmxp0DC4ytEhODEL6QJU0NpxE/mI4rUSh8h1P1Wkvfi3xQEBcxXR2gBIPNYNuaFcAbQ=="
+      "integrity": "sha512-OElxJ1lUSinuoUnkpOgLmxp0DC4ytEhODEL6QJU0NpxE/mI4rUSh8h1P1Wkvfi3xQEBcxXR2gBIPNYNuaFcAbQ==",
+      "optional": true
     },
     "brace-expansion": {
       "version": "1.1.11",
@@ -537,9 +538,9 @@
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
     },
     "caniuse-lite": {
-      "version": "1.0.30001020",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001020.tgz",
-      "integrity": "sha512-yWIvwA68wRHKanAVS1GjN8vajAv7MBFshullKCeq/eKpK7pJBVDgFFEqvgWTkcP2+wIDeQGYFRXECjKZnLkUjA=="
+      "version": "1.0.30001021",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001021.tgz",
+      "integrity": "sha512-wuMhT7/hwkgd8gldgp2jcrUjOU9RXJ4XxGumQeOsUr91l3WwmM68Cpa/ymCnWEDqakwFXhuDQbaKNHXBPgeE9g=="
     },
     "chalk": {
       "version": "2.4.2",
@@ -1129,9 +1130,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.3.333",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.333.tgz",
-      "integrity": "sha512-7MJfCpa/tmhqYy2lZ1NEbkSxH7q3KiZiepiSs2ayTPAweAjdzGXotij+7OKPPb3OwJD2ZuBKPrA2HIuuSi6ahw=="
+      "version": "1.3.334",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.334.tgz",
+      "integrity": "sha512-RcjJhpsVaX0X6ntu/WSBlW9HE9pnCgXS9B8mTUObl1aDxaiOa0Lu+NMveIS5IDC+VELzhM32rFJDCC+AApVwcA=="
     },
     "encodeurl": {
       "version": "1.0.2",
@@ -1606,7 +1607,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -1627,12 +1629,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -1647,17 +1651,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -1774,7 +1781,8 @@
         "inherits": {
           "version": "2.0.4",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -1786,6 +1794,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -1800,6 +1809,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -1807,12 +1817,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.9.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -1831,6 +1843,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -1920,7 +1933,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -1932,6 +1946,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -2017,7 +2032,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -2053,6 +2069,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -2072,6 +2089,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -2115,12 +2133,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/resources/css/app.css b/resources/css/app.css
index 16ad4a0..6799670 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -7,22 +7,54 @@ html, body {
 }
 
 body {
-    @apply bg-gray-700 text-gray-200;
+    @apply bg-darker text-gray-200;
 }
 
 select, input, button {
     @apply block bg-gray-100 text-gray-600 p-1 m-1 my-2 rounded
 }
 
+input {
+    @apply px-2;
+}
+
+#pages {
+    width: -webkit-fill-available;
+    @apply h-64
+}
+
+#pages::-webkit-scrollbar {
+    @apply hidden;
+}
+
 button {
-    @apply bg-blue-900 text-white p-2 text-sm
+    @apply bg-accent text-white p-2 text-sm
 }
 
 .deck-table {
+    @apply hidden;
+}
 
+.deck-table.active {
+    @apply table;
 }
 
 .deck-table td {
-    width: 72px; height: 72px;
-    @apply inline-block m-2 bg-gray-600 rounded shadow shadow-inner;
+    width: 72px;
+    height: 72px;
+    background-size: 72px 72px;
+    @apply inline-block m-2 bg-darkest rounded shadow shadow-inner inline-flex justify-center align-middle cursor-pointer;
+}
+
+.deck-table td div {
+    @apply inline-flex justify-center align-middle cursor-pointer select-none;
+}
+
+.selected {
+    @apply border-accent border border-collapse
+}
+
+svg {
+    stroke-width: 0.5;
+    @apply font-bold font-sans w-full stroke-black fill-white
 }
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 191d6fd..0d6d2ef 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,19 @@
 module.exports = {
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        accent: "#c33",
+        dark: "#444",
+        darker: "#333",
+        darkest: "#451111"
+      },
+      stroke: {
+        black: "#000"
+      },
+      fill: {
+        white: "#fff"
+      }
+    },
 },
   variants: {},
   plugins: []
diff --git a/webroot/css/app.css b/webroot/css/app.css
index 56ee006..4441a83 100644
--- a/webroot/css/app.css
+++ b/webroot/css/app.css
@@ -1063,6 +1063,22 @@ video {
   background-color: #702459;
 }
 
+.bg-accent {
+  background-color: #c33;
+}
+
+.bg-dark {
+  background-color: #444;
+}
+
+.bg-darker {
+  background-color: #333;
+}
+
+.bg-darkest {
+  background-color: #451111;
+}
+
 .hover\:bg-transparent:hover {
   background-color: transparent;
 }
@@ -1435,6 +1451,22 @@ video {
   background-color: #702459;
 }
 
+.hover\:bg-accent:hover {
+  background-color: #c33;
+}
+
+.hover\:bg-dark:hover {
+  background-color: #444;
+}
+
+.hover\:bg-darker:hover {
+  background-color: #333;
+}
+
+.hover\:bg-darkest:hover {
+  background-color: #451111;
+}
+
 .focus\:bg-transparent:focus {
   background-color: transparent;
 }
@@ -1807,6 +1839,22 @@ video {
   background-color: #702459;
 }
 
+.focus\:bg-accent:focus {
+  background-color: #c33;
+}
+
+.focus\:bg-dark:focus {
+  background-color: #444;
+}
+
+.focus\:bg-darker:focus {
+  background-color: #333;
+}
+
+.focus\:bg-darkest:focus {
+  background-color: #451111;
+}
+
 .bg-bottom {
   background-position: bottom;
 }
@@ -2259,6 +2307,22 @@ video {
   border-color: #702459;
 }
 
+.border-accent {
+  border-color: #c33;
+}
+
+.border-dark {
+  border-color: #444;
+}
+
+.border-darker {
+  border-color: #333;
+}
+
+.border-darkest {
+  border-color: #451111;
+}
+
 .hover\:border-transparent:hover {
   border-color: transparent;
 }
@@ -2631,6 +2695,22 @@ video {
   border-color: #702459;
 }
 
+.hover\:border-accent:hover {
+  border-color: #c33;
+}
+
+.hover\:border-dark:hover {
+  border-color: #444;
+}
+
+.hover\:border-darker:hover {
+  border-color: #333;
+}
+
+.hover\:border-darkest:hover {
+  border-color: #451111;
+}
+
 .focus\:border-transparent:focus {
   border-color: transparent;
 }
@@ -3003,6 +3083,22 @@ video {
   border-color: #702459;
 }
 
+.focus\:border-accent:focus {
+  border-color: #c33;
+}
+
+.focus\:border-dark:focus {
+  border-color: #444;
+}
+
+.focus\:border-darker:focus {
+  border-color: #333;
+}
+
+.focus\:border-darkest:focus {
+  border-color: #451111;
+}
+
 .rounded-none {
   border-radius: 0;
 }
@@ -7733,6 +7829,86 @@ video {
   color: #702459;
 }
 
+.placeholder-accent::-webkit-input-placeholder {
+  color: #c33;
+}
+
+.placeholder-accent::-moz-placeholder {
+  color: #c33;
+}
+
+.placeholder-accent:-ms-input-placeholder {
+  color: #c33;
+}
+
+.placeholder-accent::-ms-input-placeholder {
+  color: #c33;
+}
+
+.placeholder-accent::placeholder {
+  color: #c33;
+}
+
+.placeholder-dark::-webkit-input-placeholder {
+  color: #444;
+}
+
+.placeholder-dark::-moz-placeholder {
+  color: #444;
+}
+
+.placeholder-dark:-ms-input-placeholder {
+  color: #444;
+}
+
+.placeholder-dark::-ms-input-placeholder {
+  color: #444;
+}
+
+.placeholder-dark::placeholder {
+  color: #444;
+}
+
+.placeholder-darker::-webkit-input-placeholder {
+  color: #333;
+}
+
+.placeholder-darker::-moz-placeholder {
+  color: #333;
+}
+
+.placeholder-darker:-ms-input-placeholder {
+  color: #333;
+}
+
+.placeholder-darker::-ms-input-placeholder {
+  color: #333;
+}
+
+.placeholder-darker::placeholder {
+  color: #333;
+}
+
+.placeholder-darkest::-webkit-input-placeholder {
+  color: #451111;
+}
+
+.placeholder-darkest::-moz-placeholder {
+  color: #451111;
+}
+
+.placeholder-darkest:-ms-input-placeholder {
+  color: #451111;
+}
+
+.placeholder-darkest::-ms-input-placeholder {
+  color: #451111;
+}
+
+.placeholder-darkest::placeholder {
+  color: #451111;
+}
+
 .focus\:placeholder-transparent:focus::-webkit-input-placeholder {
   color: transparent;
 }
@@ -9593,6 +9769,86 @@ video {
   color: #702459;
 }
 
+.focus\:placeholder-accent:focus::-webkit-input-placeholder {
+  color: #c33;
+}
+
+.focus\:placeholder-accent:focus::-moz-placeholder {
+  color: #c33;
+}
+
+.focus\:placeholder-accent:focus:-ms-input-placeholder {
+  color: #c33;
+}
+
+.focus\:placeholder-accent:focus::-ms-input-placeholder {
+  color: #c33;
+}
+
+.focus\:placeholder-accent:focus::placeholder {
+  color: #c33;
+}
+
+.focus\:placeholder-dark:focus::-webkit-input-placeholder {
+  color: #444;
+}
+
+.focus\:placeholder-dark:focus::-moz-placeholder {
+  color: #444;
+}
+
+.focus\:placeholder-dark:focus:-ms-input-placeholder {
+  color: #444;
+}
+
+.focus\:placeholder-dark:focus::-ms-input-placeholder {
+  color: #444;
+}
+
+.focus\:placeholder-dark:focus::placeholder {
+  color: #444;
+}
+
+.focus\:placeholder-darker:focus::-webkit-input-placeholder {
+  color: #333;
+}
+
+.focus\:placeholder-darker:focus::-moz-placeholder {
+  color: #333;
+}
+
+.focus\:placeholder-darker:focus:-ms-input-placeholder {
+  color: #333;
+}
+
+.focus\:placeholder-darker:focus::-ms-input-placeholder {
+  color: #333;
+}
+
+.focus\:placeholder-darker:focus::placeholder {
+  color: #333;
+}
+
+.focus\:placeholder-darkest:focus::-webkit-input-placeholder {
+  color: #451111;
+}
+
+.focus\:placeholder-darkest:focus::-moz-placeholder {
+  color: #451111;
+}
+
+.focus\:placeholder-darkest:focus:-ms-input-placeholder {
+  color: #451111;
+}
+
+.focus\:placeholder-darkest:focus::-ms-input-placeholder {
+  color: #451111;
+}
+
+.focus\:placeholder-darkest:focus::placeholder {
+  color: #451111;
+}
+
 .pointer-events-none {
   pointer-events: none;
 }
@@ -9804,10 +10060,18 @@ video {
   fill: currentColor;
 }
 
+.fill-white {
+  fill: #fff;
+}
+
 .stroke-current {
   stroke: currentColor;
 }
 
+.stroke-black {
+  stroke: #000;
+}
+
 .table-auto {
   table-layout: auto;
 }
@@ -10204,6 +10468,22 @@ video {
   color: #702459;
 }
 
+.text-accent {
+  color: #c33;
+}
+
+.text-dark {
+  color: #444;
+}
+
+.text-darker {
+  color: #333;
+}
+
+.text-darkest {
+  color: #451111;
+}
+
 .hover\:text-transparent:hover {
   color: transparent;
 }
@@ -10576,6 +10856,22 @@ video {
   color: #702459;
 }
 
+.hover\:text-accent:hover {
+  color: #c33;
+}
+
+.hover\:text-dark:hover {
+  color: #444;
+}
+
+.hover\:text-darker:hover {
+  color: #333;
+}
+
+.hover\:text-darkest:hover {
+  color: #451111;
+}
+
 .focus\:text-transparent:focus {
   color: transparent;
 }
@@ -10948,6 +11244,22 @@ video {
   color: #702459;
 }
 
+.focus\:text-accent:focus {
+  color: #c33;
+}
+
+.focus\:text-dark:focus {
+  color: #444;
+}
+
+.focus\:text-darker:focus {
+  color: #333;
+}
+
+.focus\:text-darkest:focus {
+  color: #451111;
+}
+
 .text-xs {
   font-size: 0.75rem;
 }
@@ -11406,7 +11718,7 @@ html, body {
 }
 
 body {
-  background-color: #4a5568;
+  background-color: #333;
   color: #edf2f7;
 }
 
@@ -11421,24 +11733,79 @@ select, input, button {
   border-radius: 0.25rem
 }
 
+input {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+#pages {
+  width: -webkit-fill-available;
+  height: 16rem
+}
+
+#pages::-webkit-scrollbar {
+  display: none;
+}
+
 button {
-  background-color: #2a4365;
+  background-color: #c33;
   color: #fff;
   padding: 0.5rem;
   font-size: 0.875rem
 }
 
 .deck-table {
+  display: none;
+}
+
+.deck-table.active {
+  display: table;
 }
 
 .deck-table td {
-  width: 72px; height: 72px;
+  width: 72px;
+  height: 72px;
+  background-size: 72px 72px;
   display: inline-block;
   margin: 0.5rem;
-  background-color: #718096;
+  background-color: #451111;
   border-radius: 0.25rem;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
   box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  display: -webkit-inline-box;
+  display: inline-flex;
+  -webkit-box-pack: center;
+          justify-content: center;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+.deck-table td div {
+  display: -webkit-inline-box;
+  display: inline-flex;
+  -webkit-box-pack: center;
+          justify-content: center;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.selected {
+  border-color: #c33;
+  border-width: 1px;
+  border-collapse: collapse
+}
+
+svg {
+  stroke-width: 0.5;
+  font-weight: 700;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  width: 100%;
+  stroke: #000;
+  fill: #fff
 }
 
 @media (min-width: 640px) {
@@ -11878,6 +12245,22 @@ button {
     background-color: #702459;
   }
 
+  .sm\:bg-accent {
+    background-color: #c33;
+  }
+
+  .sm\:bg-dark {
+    background-color: #444;
+  }
+
+  .sm\:bg-darker {
+    background-color: #333;
+  }
+
+  .sm\:bg-darkest {
+    background-color: #451111;
+  }
+
   .sm\:hover\:bg-transparent:hover {
     background-color: transparent;
   }
@@ -12250,6 +12633,22 @@ button {
     background-color: #702459;
   }
 
+  .sm\:hover\:bg-accent:hover {
+    background-color: #c33;
+  }
+
+  .sm\:hover\:bg-dark:hover {
+    background-color: #444;
+  }
+
+  .sm\:hover\:bg-darker:hover {
+    background-color: #333;
+  }
+
+  .sm\:hover\:bg-darkest:hover {
+    background-color: #451111;
+  }
+
   .sm\:focus\:bg-transparent:focus {
     background-color: transparent;
   }
@@ -12622,6 +13021,22 @@ button {
     background-color: #702459;
   }
 
+  .sm\:focus\:bg-accent:focus {
+    background-color: #c33;
+  }
+
+  .sm\:focus\:bg-dark:focus {
+    background-color: #444;
+  }
+
+  .sm\:focus\:bg-darker:focus {
+    background-color: #333;
+  }
+
+  .sm\:focus\:bg-darkest:focus {
+    background-color: #451111;
+  }
+
   .sm\:bg-bottom {
     background-position: bottom;
   }
@@ -13074,6 +13489,22 @@ button {
     border-color: #702459;
   }
 
+  .sm\:border-accent {
+    border-color: #c33;
+  }
+
+  .sm\:border-dark {
+    border-color: #444;
+  }
+
+  .sm\:border-darker {
+    border-color: #333;
+  }
+
+  .sm\:border-darkest {
+    border-color: #451111;
+  }
+
   .sm\:hover\:border-transparent:hover {
     border-color: transparent;
   }
@@ -13446,6 +13877,22 @@ button {
     border-color: #702459;
   }
 
+  .sm\:hover\:border-accent:hover {
+    border-color: #c33;
+  }
+
+  .sm\:hover\:border-dark:hover {
+    border-color: #444;
+  }
+
+  .sm\:hover\:border-darker:hover {
+    border-color: #333;
+  }
+
+  .sm\:hover\:border-darkest:hover {
+    border-color: #451111;
+  }
+
   .sm\:focus\:border-transparent:focus {
     border-color: transparent;
   }
@@ -13818,6 +14265,22 @@ button {
     border-color: #702459;
   }
 
+  .sm\:focus\:border-accent:focus {
+    border-color: #c33;
+  }
+
+  .sm\:focus\:border-dark:focus {
+    border-color: #444;
+  }
+
+  .sm\:focus\:border-darker:focus {
+    border-color: #333;
+  }
+
+  .sm\:focus\:border-darkest:focus {
+    border-color: #451111;
+  }
+
   .sm\:rounded-none {
     border-radius: 0;
   }
@@ -18548,6 +19011,86 @@ button {
     color: #702459;
   }
 
+  .sm\:placeholder-accent::-webkit-input-placeholder {
+    color: #c33;
+  }
+
+  .sm\:placeholder-accent::-moz-placeholder {
+    color: #c33;
+  }
+
+  .sm\:placeholder-accent:-ms-input-placeholder {
+    color: #c33;
+  }
+
+  .sm\:placeholder-accent::-ms-input-placeholder {
+    color: #c33;
+  }
+
+  .sm\:placeholder-accent::placeholder {
+    color: #c33;
+  }
+
+  .sm\:placeholder-dark::-webkit-input-placeholder {
+    color: #444;
+  }
+
+  .sm\:placeholder-dark::-moz-placeholder {
+    color: #444;
+  }
+
+  .sm\:placeholder-dark:-ms-input-placeholder {
+    color: #444;
+  }
+
+  .sm\:placeholder-dark::-ms-input-placeholder {
+    color: #444;
+  }
+
+  .sm\:placeholder-dark::placeholder {
+    color: #444;
+  }
+
+  .sm\:placeholder-darker::-webkit-input-placeholder {
+    color: #333;
+  }
+
+  .sm\:placeholder-darker::-moz-placeholder {
+    color: #333;
+  }
+
+  .sm\:placeholder-darker:-ms-input-placeholder {
+    color: #333;
+  }
+
+  .sm\:placeholder-darker::-ms-input-placeholder {
+    color: #333;
+  }
+
+  .sm\:placeholder-darker::placeholder {
+    color: #333;
+  }
+
+  .sm\:placeholder-darkest::-webkit-input-placeholder {
+    color: #451111;
+  }
+
+  .sm\:placeholder-darkest::-moz-placeholder {
+    color: #451111;
+  }
+
+  .sm\:placeholder-darkest:-ms-input-placeholder {
+    color: #451111;
+  }
+
+  .sm\:placeholder-darkest::-ms-input-placeholder {
+    color: #451111;
+  }
+
+  .sm\:placeholder-darkest::placeholder {
+    color: #451111;
+  }
+
   .sm\:focus\:placeholder-transparent:focus::-webkit-input-placeholder {
     color: transparent;
   }
@@ -20408,6 +20951,86 @@ button {
     color: #702459;
   }
 
+  .sm\:focus\:placeholder-accent:focus::-webkit-input-placeholder {
+    color: #c33;
+  }
+
+  .sm\:focus\:placeholder-accent:focus::-moz-placeholder {
+    color: #c33;
+  }
+
+  .sm\:focus\:placeholder-accent:focus:-ms-input-placeholder {
+    color: #c33;
+  }
+
+  .sm\:focus\:placeholder-accent:focus::-ms-input-placeholder {
+    color: #c33;
+  }
+
+  .sm\:focus\:placeholder-accent:focus::placeholder {
+    color: #c33;
+  }
+
+  .sm\:focus\:placeholder-dark:focus::-webkit-input-placeholder {
+    color: #444;
+  }
+
+  .sm\:focus\:placeholder-dark:focus::-moz-placeholder {
+    color: #444;
+  }
+
+  .sm\:focus\:placeholder-dark:focus:-ms-input-placeholder {
+    color: #444;
+  }
+
+  .sm\:focus\:placeholder-dark:focus::-ms-input-placeholder {
+    color: #444;
+  }
+
+  .sm\:focus\:placeholder-dark:focus::placeholder {
+    color: #444;
+  }
+
+  .sm\:focus\:placeholder-darker:focus::-webkit-input-placeholder {
+    color: #333;
+  }
+
+  .sm\:focus\:placeholder-darker:focus::-moz-placeholder {
+    color: #333;
+  }
+
+  .sm\:focus\:placeholder-darker:focus:-ms-input-placeholder {
+    color: #333;
+  }
+
+  .sm\:focus\:placeholder-darker:focus::-ms-input-placeholder {
+    color: #333;
+  }
+
+  .sm\:focus\:placeholder-darker:focus::placeholder {
+    color: #333;
+  }
+
+  .sm\:focus\:placeholder-darkest:focus::-webkit-input-placeholder {
+    color: #451111;
+  }
+
+  .sm\:focus\:placeholder-darkest:focus::-moz-placeholder {
+    color: #451111;
+  }
+
+  .sm\:focus\:placeholder-darkest:focus:-ms-input-placeholder {
+    color: #451111;
+  }
+
+  .sm\:focus\:placeholder-darkest:focus::-ms-input-placeholder {
+    color: #451111;
+  }
+
+  .sm\:focus\:placeholder-darkest:focus::placeholder {
+    color: #451111;
+  }
+
   .sm\:pointer-events-none {
     pointer-events: none;
   }
@@ -20619,10 +21242,18 @@ button {
     fill: currentColor;
   }
 
+  .sm\:fill-white {
+    fill: #fff;
+  }
+
   .sm\:stroke-current {
     stroke: currentColor;
   }
 
+  .sm\:stroke-black {
+    stroke: #000;
+  }
+
   .sm\:table-auto {
     table-layout: auto;
   }
@@ -21019,6 +21650,22 @@ button {
     color: #702459;
   }
 
+  .sm\:text-accent {
+    color: #c33;
+  }
+
+  .sm\:text-dark {
+    color: #444;
+  }
+
+  .sm\:text-darker {
+    color: #333;
+  }
+
+  .sm\:text-darkest {
+    color: #451111;
+  }
+
   .sm\:hover\:text-transparent:hover {
     color: transparent;
   }
@@ -21391,6 +22038,22 @@ button {
     color: #702459;
   }
 
+  .sm\:hover\:text-accent:hover {
+    color: #c33;
+  }
+
+  .sm\:hover\:text-dark:hover {
+    color: #444;
+  }
+
+  .sm\:hover\:text-darker:hover {
+    color: #333;
+  }
+
+  .sm\:hover\:text-darkest:hover {
+    color: #451111;
+  }
+
   .sm\:focus\:text-transparent:focus {
     color: transparent;
   }
@@ -21763,6 +22426,22 @@ button {
     color: #702459;
   }
 
+  .sm\:focus\:text-accent:focus {
+    color: #c33;
+  }
+
+  .sm\:focus\:text-dark:focus {
+    color: #444;
+  }
+
+  .sm\:focus\:text-darker:focus {
+    color: #333;
+  }
+
+  .sm\:focus\:text-darkest:focus {
+    color: #451111;
+  }
+
   .sm\:text-xs {
     font-size: 0.75rem;
   }
@@ -22654,6 +23333,22 @@ button {
     background-color: #702459;
   }
 
+  .md\:bg-accent {
+    background-color: #c33;
+  }
+
+  .md\:bg-dark {
+    background-color: #444;
+  }
+
+  .md\:bg-darker {
+    background-color: #333;
+  }
+
+  .md\:bg-darkest {
+    background-color: #451111;
+  }
+
   .md\:hover\:bg-transparent:hover {
     background-color: transparent;
   }
@@ -23026,6 +23721,22 @@ button {
     background-color: #702459;
   }
 
+  .md\:hover\:bg-accent:hover {
+    background-color: #c33;
+  }
+
+  .md\:hover\:bg-dark:hover {
+    background-color: #444;
+  }
+
+  .md\:hover\:bg-darker:hover {
+    background-color: #333;
+  }
+
+  .md\:hover\:bg-darkest:hover {
+    background-color: #451111;
+  }
+
   .md\:focus\:bg-transparent:focus {
     background-color: transparent;
   }
@@ -23398,6 +24109,22 @@ button {
     background-color: #702459;
   }
 
+  .md\:focus\:bg-accent:focus {
+    background-color: #c33;
+  }
+
+  .md\:focus\:bg-dark:focus {
+    background-color: #444;
+  }
+
+  .md\:focus\:bg-darker:focus {
+    background-color: #333;
+  }
+
+  .md\:focus\:bg-darkest:focus {
+    background-color: #451111;
+  }
+
   .md\:bg-bottom {
     background-position: bottom;
   }
@@ -23850,6 +24577,22 @@ button {
     border-color: #702459;
   }
 
+  .md\:border-accent {
+    border-color: #c33;
+  }
+
+  .md\:border-dark {
+    border-color: #444;
+  }
+
+  .md\:border-darker {
+    border-color: #333;
+  }
+
+  .md\:border-darkest {
+    border-color: #451111;
+  }
+
   .md\:hover\:border-transparent:hover {
     border-color: transparent;
   }
@@ -24222,6 +24965,22 @@ button {
     border-color: #702459;
   }
 
+  .md\:hover\:border-accent:hover {
+    border-color: #c33;
+  }
+
+  .md\:hover\:border-dark:hover {
+    border-color: #444;
+  }
+
+  .md\:hover\:border-darker:hover {
+    border-color: #333;
+  }
+
+  .md\:hover\:border-darkest:hover {
+    border-color: #451111;
+  }
+
   .md\:focus\:border-transparent:focus {
     border-color: transparent;
   }
@@ -24594,6 +25353,22 @@ button {
     border-color: #702459;
   }
 
+  .md\:focus\:border-accent:focus {
+    border-color: #c33;
+  }
+
+  .md\:focus\:border-dark:focus {
+    border-color: #444;
+  }
+
+  .md\:focus\:border-darker:focus {
+    border-color: #333;
+  }
+
+  .md\:focus\:border-darkest:focus {
+    border-color: #451111;
+  }
+
   .md\:rounded-none {
     border-radius: 0;
   }
@@ -29324,6 +30099,86 @@ button {
     color: #702459;
   }
 
+  .md\:placeholder-accent::-webkit-input-placeholder {
+    color: #c33;
+  }
+
+  .md\:placeholder-accent::-moz-placeholder {
+    color: #c33;
+  }
+
+  .md\:placeholder-accent:-ms-input-placeholder {
+    color: #c33;
+  }
+
+  .md\:placeholder-accent::-ms-input-placeholder {
+    color: #c33;
+  }
+
+  .md\:placeholder-accent::placeholder {
+    color: #c33;
+  }
+
+  .md\:placeholder-dark::-webkit-input-placeholder {
+    color: #444;
+  }
+
+  .md\:placeholder-dark::-moz-placeholder {
+    color: #444;
+  }
+
+  .md\:placeholder-dark:-ms-input-placeholder {
+    color: #444;
+  }
+
+  .md\:placeholder-dark::-ms-input-placeholder {
+    color: #444;
+  }
+
+  .md\:placeholder-dark::placeholder {
+    color: #444;
+  }
+
+  .md\:placeholder-darker::-webkit-input-placeholder {
+    color: #333;
+  }
+
+  .md\:placeholder-darker::-moz-placeholder {
+    color: #333;
+  }
+
+  .md\:placeholder-darker:-ms-input-placeholder {
+    color: #333;
+  }
+
+  .md\:placeholder-darker::-ms-input-placeholder {
+    color: #333;
+  }
+
+  .md\:placeholder-darker::placeholder {
+    color: #333;
+  }
+
+  .md\:placeholder-darkest::-webkit-input-placeholder {
+    color: #451111;
+  }
+
+  .md\:placeholder-darkest::-moz-placeholder {
+    color: #451111;
+  }
+
+  .md\:placeholder-darkest:-ms-input-placeholder {
+    color: #451111;
+  }
+
+  .md\:placeholder-darkest::-ms-input-placeholder {
+    color: #451111;
+  }
+
+  .md\:placeholder-darkest::placeholder {
+    color: #451111;
+  }
+
   .md\:focus\:placeholder-transparent:focus::-webkit-input-placeholder {
     color: transparent;
   }
@@ -31184,6 +32039,86 @@ button {
     color: #702459;
   }
 
+  .md\:focus\:placeholder-accent:focus::-webkit-input-placeholder {
+    color: #c33;
+  }
+
+  .md\:focus\:placeholder-accent:focus::-moz-placeholder {
+    color: #c33;
+  }
+
+  .md\:focus\:placeholder-accent:focus:-ms-input-placeholder {
+    color: #c33;
+  }
+
+  .md\:focus\:placeholder-accent:focus::-ms-input-placeholder {
+    color: #c33;
+  }
+
+  .md\:focus\:placeholder-accent:focus::placeholder {
+    color: #c33;
+  }
+
+  .md\:focus\:placeholder-dark:focus::-webkit-input-placeholder {
+    color: #444;
+  }
+
+  .md\:focus\:placeholder-dark:focus::-moz-placeholder {
+    color: #444;
+  }
+
+  .md\:focus\:placeholder-dark:focus:-ms-input-placeholder {
+    color: #444;
+  }
+
+  .md\:focus\:placeholder-dark:focus::-ms-input-placeholder {
+    color: #444;
+  }
+
+  .md\:focus\:placeholder-dark:focus::placeholder {
+    color: #444;
+  }
+
+  .md\:focus\:placeholder-darker:focus::-webkit-input-placeholder {
+    color: #333;
+  }
+
+  .md\:focus\:placeholder-darker:focus::-moz-placeholder {
+    color: #333;
+  }
+
+  .md\:focus\:placeholder-darker:focus:-ms-input-placeholder {
+    color: #333;
+  }
+
+  .md\:focus\:placeholder-darker:focus::-ms-input-placeholder {
+    color: #333;
+  }
+
+  .md\:focus\:placeholder-darker:focus::placeholder {
+    color: #333;
+  }
+
+  .md\:focus\:placeholder-darkest:focus::-webkit-input-placeholder {
+    color: #451111;
+  }
+
+  .md\:focus\:placeholder-darkest:focus::-moz-placeholder {
+    color: #451111;
+  }
+
+  .md\:focus\:placeholder-darkest:focus:-ms-input-placeholder {
+    color: #451111;
+  }
+
+  .md\:focus\:placeholder-darkest:focus::-ms-input-placeholder {
+    color: #451111;
+  }
+
+  .md\:focus\:placeholder-darkest:focus::placeholder {
+    color: #451111;
+  }
+
   .md\:pointer-events-none {
     pointer-events: none;
   }
@@ -31395,10 +32330,18 @@ button {
     fill: currentColor;
   }
 
+  .md\:fill-white {
+    fill: #fff;
+  }
+
   .md\:stroke-current {
     stroke: currentColor;
   }
 
+  .md\:stroke-black {
+    stroke: #000;
+  }
+
   .md\:table-auto {
     table-layout: auto;
   }
@@ -31795,6 +32738,22 @@ button {
     color: #702459;
   }
 
+  .md\:text-accent {
+    color: #c33;
+  }
+
+  .md\:text-dark {
+    color: #444;
+  }
+
+  .md\:text-darker {
+    color: #333;
+  }
+
+  .md\:text-darkest {
+    color: #451111;
+  }
+
   .md\:hover\:text-transparent:hover {
     color: transparent;
   }
@@ -32167,6 +33126,22 @@ button {
     color: #702459;
   }
 
+  .md\:hover\:text-accent:hover {
+    color: #c33;
+  }
+
+  .md\:hover\:text-dark:hover {
+    color: #444;
+  }
+
+  .md\:hover\:text-darker:hover {
+    color: #333;
+  }
+
+  .md\:hover\:text-darkest:hover {
+    color: #451111;
+  }
+
   .md\:focus\:text-transparent:focus {
     color: transparent;
   }
@@ -32539,6 +33514,22 @@ button {
     color: #702459;
   }
 
+  .md\:focus\:text-accent:focus {
+    color: #c33;
+  }
+
+  .md\:focus\:text-dark:focus {
+    color: #444;
+  }
+
+  .md\:focus\:text-darker:focus {
+    color: #333;
+  }
+
+  .md\:focus\:text-darkest:focus {
+    color: #451111;
+  }
+
   .md\:text-xs {
     font-size: 0.75rem;
   }
@@ -33430,6 +34421,22 @@ button {
     background-color: #702459;
   }
 
+  .lg\:bg-accent {
+    background-color: #c33;
+  }
+
+  .lg\:bg-dark {
+    background-color: #444;
+  }
+
+  .lg\:bg-darker {
+    background-color: #333;
+  }
+
+  .lg\:bg-darkest {
+    background-color: #451111;
+  }
+
   .lg\:hover\:bg-transparent:hover {
     background-color: transparent;
   }
@@ -33802,6 +34809,22 @@ button {
     background-color: #702459;
   }
 
+  .lg\:hover\:bg-accent:hover {
+    background-color: #c33;
+  }
+
+  .lg\:hover\:bg-dark:hover {
+    background-color: #444;
+  }
+
+  .lg\:hover\:bg-darker:hover {
+    background-color: #333;
+  }
+
+  .lg\:hover\:bg-darkest:hover {
+    background-color: #451111;
+  }
+
   .lg\:focus\:bg-transparent:focus {
     background-color: transparent;
   }
@@ -34174,6 +35197,22 @@ button {
     background-color: #702459;
   }
 
+  .lg\:focus\:bg-accent:focus {
+    background-color: #c33;
+  }
+
+  .lg\:focus\:bg-dark:focus {
+    background-color: #444;
+  }
+
+  .lg\:focus\:bg-darker:focus {
+    background-color: #333;
+  }
+
+  .lg\:focus\:bg-darkest:focus {
+    background-color: #451111;
+  }
+
   .lg\:bg-bottom {
     background-position: bottom;
   }
@@ -34626,6 +35665,22 @@ button {
     border-color: #702459;
   }
 
+  .lg\:border-accent {
+    border-color: #c33;
+  }
+
+  .lg\:border-dark {
+    border-color: #444;
+  }
+
+  .lg\:border-darker {
+    border-color: #333;
+  }
+
+  .lg\:border-darkest {
+    border-color: #451111;
+  }
+
   .lg\:hover\:border-transparent:hover {
     border-color: transparent;
   }
@@ -34998,6 +36053,22 @@ button {
     border-color: #702459;
   }
 
+  .lg\:hover\:border-accent:hover {
+    border-color: #c33;
+  }
+
+  .lg\:hover\:border-dark:hover {
+    border-color: #444;
+  }
+
+  .lg\:hover\:border-darker:hover {
+    border-color: #333;
+  }
+
+  .lg\:hover\:border-darkest:hover {
+    border-color: #451111;
+  }
+
   .lg\:focus\:border-transparent:focus {
     border-color: transparent;
   }
@@ -35370,6 +36441,22 @@ button {
     border-color: #702459;
   }
 
+  .lg\:focus\:border-accent:focus {
+    border-color: #c33;
+  }
+
+  .lg\:focus\:border-dark:focus {
+    border-color: #444;
+  }
+
+  .lg\:focus\:border-darker:focus {
+    border-color: #333;
+  }
+
+  .lg\:focus\:border-darkest:focus {
+    border-color: #451111;
+  }
+
   .lg\:rounded-none {
     border-radius: 0;
   }
@@ -40100,6 +41187,86 @@ button {
     color: #702459;
   }
 
+  .lg\:placeholder-accent::-webkit-input-placeholder {
+    color: #c33;
+  }
+
+  .lg\:placeholder-accent::-moz-placeholder {
+    color: #c33;
+  }
+
+  .lg\:placeholder-accent:-ms-input-placeholder {
+    color: #c33;
+  }
+
+  .lg\:placeholder-accent::-ms-input-placeholder {
+    color: #c33;
+  }
+
+  .lg\:placeholder-accent::placeholder {
+    color: #c33;
+  }
+
+  .lg\:placeholder-dark::-webkit-input-placeholder {
+    color: #444;
+  }
+
+  .lg\:placeholder-dark::-moz-placeholder {
+    color: #444;
+  }
+
+  .lg\:placeholder-dark:-ms-input-placeholder {
+    color: #444;
+  }
+
+  .lg\:placeholder-dark::-ms-input-placeholder {
+    color: #444;
+  }
+
+  .lg\:placeholder-dark::placeholder {
+    color: #444;
+  }
+
+  .lg\:placeholder-darker::-webkit-input-placeholder {
+    color: #333;
+  }
+
+  .lg\:placeholder-darker::-moz-placeholder {
+    color: #333;
+  }
+
+  .lg\:placeholder-darker:-ms-input-placeholder {
+    color: #333;
+  }
+
+  .lg\:placeholder-darker::-ms-input-placeholder {
+    color: #333;
+  }
+
+  .lg\:placeholder-darker::placeholder {
+    color: #333;
+  }
+
+  .lg\:placeholder-darkest::-webkit-input-placeholder {
+    color: #451111;
+  }
+
+  .lg\:placeholder-darkest::-moz-placeholder {
+    color: #451111;
+  }
+
+  .lg\:placeholder-darkest:-ms-input-placeholder {
+    color: #451111;
+  }
+
+  .lg\:placeholder-darkest::-ms-input-placeholder {
+    color: #451111;
+  }
+
+  .lg\:placeholder-darkest::placeholder {
+    color: #451111;
+  }
+
   .lg\:focus\:placeholder-transparent:focus::-webkit-input-placeholder {
     color: transparent;
   }
@@ -41960,6 +43127,86 @@ button {
     color: #702459;
   }
 
+  .lg\:focus\:placeholder-accent:focus::-webkit-input-placeholder {
+    color: #c33;
+  }
+
+  .lg\:focus\:placeholder-accent:focus::-moz-placeholder {
+    color: #c33;
+  }
+
+  .lg\:focus\:placeholder-accent:focus:-ms-input-placeholder {
+    color: #c33;
+  }
+
+  .lg\:focus\:placeholder-accent:focus::-ms-input-placeholder {
+    color: #c33;
+  }
+
+  .lg\:focus\:placeholder-accent:focus::placeholder {
+    color: #c33;
+  }
+
+  .lg\:focus\:placeholder-dark:focus::-webkit-input-placeholder {
+    color: #444;
+  }
+
+  .lg\:focus\:placeholder-dark:focus::-moz-placeholder {
+    color: #444;
+  }
+
+  .lg\:focus\:placeholder-dark:focus:-ms-input-placeholder {
+    color: #444;
+  }
+
+  .lg\:focus\:placeholder-dark:focus::-ms-input-placeholder {
+    color: #444;
+  }
+
+  .lg\:focus\:placeholder-dark:focus::placeholder {
+    color: #444;
+  }
+
+  .lg\:focus\:placeholder-darker:focus::-webkit-input-placeholder {
+    color: #333;
+  }
+
+  .lg\:focus\:placeholder-darker:focus::-moz-placeholder {
+    color: #333;
+  }
+
+  .lg\:focus\:placeholder-darker:focus:-ms-input-placeholder {
+    color: #333;
+  }
+
+  .lg\:focus\:placeholder-darker:focus::-ms-input-placeholder {
+    color: #333;
+  }
+
+  .lg\:focus\:placeholder-darker:focus::placeholder {
+    color: #333;
+  }
+
+  .lg\:focus\:placeholder-darkest:focus::-webkit-input-placeholder {
+    color: #451111;
+  }
+
+  .lg\:focus\:placeholder-darkest:focus::-moz-placeholder {
+    color: #451111;
+  }
+
+  .lg\:focus\:placeholder-darkest:focus:-ms-input-placeholder {
+    color: #451111;
+  }
+
+  .lg\:focus\:placeholder-darkest:focus::-ms-input-placeholder {
+    color: #451111;
+  }
+
+  .lg\:focus\:placeholder-darkest:focus::placeholder {
+    color: #451111;
+  }
+
   .lg\:pointer-events-none {
     pointer-events: none;
   }
@@ -42171,10 +43418,18 @@ button {
     fill: currentColor;
   }
 
+  .lg\:fill-white {
+    fill: #fff;
+  }
+
   .lg\:stroke-current {
     stroke: currentColor;
   }
 
+  .lg\:stroke-black {
+    stroke: #000;
+  }
+
   .lg\:table-auto {
     table-layout: auto;
   }
@@ -42571,6 +43826,22 @@ button {
     color: #702459;
   }
 
+  .lg\:text-accent {
+    color: #c33;
+  }
+
+  .lg\:text-dark {
+    color: #444;
+  }
+
+  .lg\:text-darker {
+    color: #333;
+  }
+
+  .lg\:text-darkest {
+    color: #451111;
+  }
+
   .lg\:hover\:text-transparent:hover {
     color: transparent;
   }
@@ -42943,6 +44214,22 @@ button {
     color: #702459;
   }
 
+  .lg\:hover\:text-accent:hover {
+    color: #c33;
+  }
+
+  .lg\:hover\:text-dark:hover {
+    color: #444;
+  }
+
+  .lg\:hover\:text-darker:hover {
+    color: #333;
+  }
+
+  .lg\:hover\:text-darkest:hover {
+    color: #451111;
+  }
+
   .lg\:focus\:text-transparent:focus {
     color: transparent;
   }
@@ -43315,6 +44602,22 @@ button {
     color: #702459;
   }
 
+  .lg\:focus\:text-accent:focus {
+    color: #c33;
+  }
+
+  .lg\:focus\:text-dark:focus {
+    color: #444;
+  }
+
+  .lg\:focus\:text-darker:focus {
+    color: #333;
+  }
+
+  .lg\:focus\:text-darkest:focus {
+    color: #451111;
+  }
+
   .lg\:text-xs {
     font-size: 0.75rem;
   }
@@ -44206,6 +45509,22 @@ button {
     background-color: #702459;
   }
 
+  .xl\:bg-accent {
+    background-color: #c33;
+  }
+
+  .xl\:bg-dark {
+    background-color: #444;
+  }
+
+  .xl\:bg-darker {
+    background-color: #333;
+  }
+
+  .xl\:bg-darkest {
+    background-color: #451111;
+  }
+
   .xl\:hover\:bg-transparent:hover {
     background-color: transparent;
   }
@@ -44578,6 +45897,22 @@ button {
     background-color: #702459;
   }
 
+  .xl\:hover\:bg-accent:hover {
+    background-color: #c33;
+  }
+
+  .xl\:hover\:bg-dark:hover {
+    background-color: #444;
+  }
+
+  .xl\:hover\:bg-darker:hover {
+    background-color: #333;
+  }
+
+  .xl\:hover\:bg-darkest:hover {
+    background-color: #451111;
+  }
+
   .xl\:focus\:bg-transparent:focus {
     background-color: transparent;
   }
@@ -44950,6 +46285,22 @@ button {
     background-color: #702459;
   }
 
+  .xl\:focus\:bg-accent:focus {
+    background-color: #c33;
+  }
+
+  .xl\:focus\:bg-dark:focus {
+    background-color: #444;
+  }
+
+  .xl\:focus\:bg-darker:focus {
+    background-color: #333;
+  }
+
+  .xl\:focus\:bg-darkest:focus {
+    background-color: #451111;
+  }
+
   .xl\:bg-bottom {
     background-position: bottom;
   }
@@ -45402,6 +46753,22 @@ button {
     border-color: #702459;
   }
 
+  .xl\:border-accent {
+    border-color: #c33;
+  }
+
+  .xl\:border-dark {
+    border-color: #444;
+  }
+
+  .xl\:border-darker {
+    border-color: #333;
+  }
+
+  .xl\:border-darkest {
+    border-color: #451111;
+  }
+
   .xl\:hover\:border-transparent:hover {
     border-color: transparent;
   }
@@ -45774,6 +47141,22 @@ button {
     border-color: #702459;
   }
 
+  .xl\:hover\:border-accent:hover {
+    border-color: #c33;
+  }
+
+  .xl\:hover\:border-dark:hover {
+    border-color: #444;
+  }
+
+  .xl\:hover\:border-darker:hover {
+    border-color: #333;
+  }
+
+  .xl\:hover\:border-darkest:hover {
+    border-color: #451111;
+  }
+
   .xl\:focus\:border-transparent:focus {
     border-color: transparent;
   }
@@ -46146,6 +47529,22 @@ button {
     border-color: #702459;
   }
 
+  .xl\:focus\:border-accent:focus {
+    border-color: #c33;
+  }
+
+  .xl\:focus\:border-dark:focus {
+    border-color: #444;
+  }
+
+  .xl\:focus\:border-darker:focus {
+    border-color: #333;
+  }
+
+  .xl\:focus\:border-darkest:focus {
+    border-color: #451111;
+  }
+
   .xl\:rounded-none {
     border-radius: 0;
   }
@@ -50876,6 +52275,86 @@ button {
     color: #702459;
   }
 
+  .xl\:placeholder-accent::-webkit-input-placeholder {
+    color: #c33;
+  }
+
+  .xl\:placeholder-accent::-moz-placeholder {
+    color: #c33;
+  }
+
+  .xl\:placeholder-accent:-ms-input-placeholder {
+    color: #c33;
+  }
+
+  .xl\:placeholder-accent::-ms-input-placeholder {
+    color: #c33;
+  }
+
+  .xl\:placeholder-accent::placeholder {
+    color: #c33;
+  }
+
+  .xl\:placeholder-dark::-webkit-input-placeholder {
+    color: #444;
+  }
+
+  .xl\:placeholder-dark::-moz-placeholder {
+    color: #444;
+  }
+
+  .xl\:placeholder-dark:-ms-input-placeholder {
+    color: #444;
+  }
+
+  .xl\:placeholder-dark::-ms-input-placeholder {
+    color: #444;
+  }
+
+  .xl\:placeholder-dark::placeholder {
+    color: #444;
+  }
+
+  .xl\:placeholder-darker::-webkit-input-placeholder {
+    color: #333;
+  }
+
+  .xl\:placeholder-darker::-moz-placeholder {
+    color: #333;
+  }
+
+  .xl\:placeholder-darker:-ms-input-placeholder {
+    color: #333;
+  }
+
+  .xl\:placeholder-darker::-ms-input-placeholder {
+    color: #333;
+  }
+
+  .xl\:placeholder-darker::placeholder {
+    color: #333;
+  }
+
+  .xl\:placeholder-darkest::-webkit-input-placeholder {
+    color: #451111;
+  }
+
+  .xl\:placeholder-darkest::-moz-placeholder {
+    color: #451111;
+  }
+
+  .xl\:placeholder-darkest:-ms-input-placeholder {
+    color: #451111;
+  }
+
+  .xl\:placeholder-darkest::-ms-input-placeholder {
+    color: #451111;
+  }
+
+  .xl\:placeholder-darkest::placeholder {
+    color: #451111;
+  }
+
   .xl\:focus\:placeholder-transparent:focus::-webkit-input-placeholder {
     color: transparent;
   }
@@ -52736,6 +54215,86 @@ button {
     color: #702459;
   }
 
+  .xl\:focus\:placeholder-accent:focus::-webkit-input-placeholder {
+    color: #c33;
+  }
+
+  .xl\:focus\:placeholder-accent:focus::-moz-placeholder {
+    color: #c33;
+  }
+
+  .xl\:focus\:placeholder-accent:focus:-ms-input-placeholder {
+    color: #c33;
+  }
+
+  .xl\:focus\:placeholder-accent:focus::-ms-input-placeholder {
+    color: #c33;
+  }
+
+  .xl\:focus\:placeholder-accent:focus::placeholder {
+    color: #c33;
+  }
+
+  .xl\:focus\:placeholder-dark:focus::-webkit-input-placeholder {
+    color: #444;
+  }
+
+  .xl\:focus\:placeholder-dark:focus::-moz-placeholder {
+    color: #444;
+  }
+
+  .xl\:focus\:placeholder-dark:focus:-ms-input-placeholder {
+    color: #444;
+  }
+
+  .xl\:focus\:placeholder-dark:focus::-ms-input-placeholder {
+    color: #444;
+  }
+
+  .xl\:focus\:placeholder-dark:focus::placeholder {
+    color: #444;
+  }
+
+  .xl\:focus\:placeholder-darker:focus::-webkit-input-placeholder {
+    color: #333;
+  }
+
+  .xl\:focus\:placeholder-darker:focus::-moz-placeholder {
+    color: #333;
+  }
+
+  .xl\:focus\:placeholder-darker:focus:-ms-input-placeholder {
+    color: #333;
+  }
+
+  .xl\:focus\:placeholder-darker:focus::-ms-input-placeholder {
+    color: #333;
+  }
+
+  .xl\:focus\:placeholder-darker:focus::placeholder {
+    color: #333;
+  }
+
+  .xl\:focus\:placeholder-darkest:focus::-webkit-input-placeholder {
+    color: #451111;
+  }
+
+  .xl\:focus\:placeholder-darkest:focus::-moz-placeholder {
+    color: #451111;
+  }
+
+  .xl\:focus\:placeholder-darkest:focus:-ms-input-placeholder {
+    color: #451111;
+  }
+
+  .xl\:focus\:placeholder-darkest:focus::-ms-input-placeholder {
+    color: #451111;
+  }
+
+  .xl\:focus\:placeholder-darkest:focus::placeholder {
+    color: #451111;
+  }
+
   .xl\:pointer-events-none {
     pointer-events: none;
   }
@@ -52947,10 +54506,18 @@ button {
     fill: currentColor;
   }
 
+  .xl\:fill-white {
+    fill: #fff;
+  }
+
   .xl\:stroke-current {
     stroke: currentColor;
   }
 
+  .xl\:stroke-black {
+    stroke: #000;
+  }
+
   .xl\:table-auto {
     table-layout: auto;
   }
@@ -53347,6 +54914,22 @@ button {
     color: #702459;
   }
 
+  .xl\:text-accent {
+    color: #c33;
+  }
+
+  .xl\:text-dark {
+    color: #444;
+  }
+
+  .xl\:text-darker {
+    color: #333;
+  }
+
+  .xl\:text-darkest {
+    color: #451111;
+  }
+
   .xl\:hover\:text-transparent:hover {
     color: transparent;
   }
@@ -53719,6 +55302,22 @@ button {
     color: #702459;
   }
 
+  .xl\:hover\:text-accent:hover {
+    color: #c33;
+  }
+
+  .xl\:hover\:text-dark:hover {
+    color: #444;
+  }
+
+  .xl\:hover\:text-darker:hover {
+    color: #333;
+  }
+
+  .xl\:hover\:text-darkest:hover {
+    color: #451111;
+  }
+
   .xl\:focus\:text-transparent:focus {
     color: transparent;
   }
@@ -54091,6 +55690,22 @@ button {
     color: #702459;
   }
 
+  .xl\:focus\:text-accent:focus {
+    color: #c33;
+  }
+
+  .xl\:focus\:text-dark:focus {
+    color: #444;
+  }
+
+  .xl\:focus\:text-darker:focus {
+    color: #333;
+  }
+
+  .xl\:focus\:text-darkest:focus {
+    color: #451111;
+  }
+
   .xl\:text-xs {
     font-size: 0.75rem;
   }
diff --git a/webroot/index.html b/webroot/index.html
index 0a7cb22..df21b8b 100644
--- a/webroot/index.html
+++ b/webroot/index.html
@@ -3,57 +3,25 @@
 <head>
     <meta charset="UTF-8">
     <title>StreamDeck Editor</title>
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'">
     <link rel="stylesheet" href="css/app.css">
 </head>
 <body class="flex w-full h-full justify-between">
-    <div class="flex flex-col w-3/12 bg-gray-800 p-4">
+    <div class="flex flex-col w-3/12 bg-gray-800 p-4 bg-dark shadow-2xl">
         <div class="flex flex-col">
             <button id="add-page">Add Page</button>
             <button id="clear-page">Clear active page</button>
         </div>
         <div>
             <label for="pages" class="hidden" aria-hidden="true">Pages</label>
-            <!--<select size="100" id="pages">
-                <option value="0">Page 1</option>
-                <option value="1">Page 2</option>
-                <option value="2">Page 3</option>
-                <option value="3">Page 4</option>
-                <option value="4">Page 5</option>
-                <option value="5">Page 6</option>
-            </select>-->
+            <select size="100" id="pages">
+            </select>
         </div>
     </div>
-    <div class="flex flex-col w-6/12 items-center justify-center shadow-inner">
-        <table class="deck-table">
-            <tr>
-                <td>
-                </td>
-                <td>
-                </td><td>
-            </td><td>
-            </td><td>
-            </td>
-            </tr>
-            <tr>
-                <td>
-                </td><td>
-            </td><td>
-            </td><td>
-            </td><td>
-            </td>
-            </tr>
-            <tr>
-                <td>
-                </td><td>
-            </td><td>
-            </td><td>
-            </td><td>
-            </td>
-            </tr>
-        </table>
+    <div class="flex flex-col w-6/12 items-center justify-center shadow-inner" id="grid-container">
     </div>
 
-    <div class="flex flex-col w-3/12 bg-gray-800 p-4">
+    <div class="flex flex-col w-3/12 bg-gray-800 p-4 bg-dark shadow-2xl">
         <div class="flex flex-col flex-grow">
             <label for="action-type" class="hidden" aria-hidden="true">Action Type</label>
             <select id="action-type" disabled>
@@ -69,6 +37,10 @@
             <label for="action" class="hidden" aria-hidden="true">Action</label>
             <input id="action" type="text" placeholder="Action" disabled>
 
+            <label for="text" class="hidden" aria-hidden="true">Text</label>
+            <input id="text" type="text" placeholder="Text" disabled>
+            <button id="set-text" disabled>Set Text</button>
+
             <div class="flex justify-between">
                 <button id="icon-button" disabled>Choose Icon</button>
                 <button id="remove-icon-button" disabled>Remove Icon</button>
diff --git a/webroot/js/cell.js b/webroot/js/cell.js
index aadd586..9e8e26b 100644
--- a/webroot/js/cell.js
+++ b/webroot/js/cell.js
@@ -1,4 +1,4 @@
-import { setSelectedCell } from "./index.js";
+import {setSelectedCell} from "./index.js";
 
 export default class Cell {
 
@@ -9,12 +9,15 @@ export default class Cell {
         this._type = null;
         this._value = null;
         this._icon = null;
+        this._text = null;
+        this._textElem = null;
         this.parseConfig();
         this.handleCell()
     }
 
     parseConfig() {
         this._icon = this._config.icon ? this._config.icon : null;
+        this._text = this._config.text ? this._config.text : null;
         if (this._config.hasOwnProperty("command")) {
             this._type = "command";
             this._value = this._config.command;
@@ -41,6 +44,9 @@ export default class Cell {
         if (this._icon !== null) {
             cell.style.backgroundImage = "url(\"" + this._icon + "\")";
         }
+        this._textElem = document.createElement("div");
+        this.handleText();
+        cell.appendChild(this._textElem);
         cell.onclick = () => {
             setSelectedCell(this);
             let selected = document.querySelectorAll(".selected");
@@ -52,9 +58,18 @@ export default class Cell {
     }
 
     getConfig() {
+        this.cleanConfig();
         return this._config
     }
 
+    cleanConfig() {
+        for (let key of Object.keys(this._config)) {
+            if (!this._config[key]) {
+                delete this._config[key];
+            }
+        }
+    }
+
     setConfig(config) {
         this._config = config;
         this.parseConfig();
@@ -93,6 +108,16 @@ export default class Cell {
         return this._icon;
     }
 
+    setText(text) {
+        this._text = text;
+        this.getConfig().text = text;
+        this.handleText();
+    }
+
+    getText() {
+        return this._text;
+    }
+
     setType(type) {
         delete this.getConfig()[this._type];
         this._type = type;
@@ -109,4 +134,28 @@ export default class Cell {
         this.setValue("");
         this.removeIcon();
     }
+
+    handleText() {
+        for (let child of this._textElem.children) {
+            child.remove();
+        }
+        if (this._text) {
+            this._textElem.innerHTML = `<svg width="72" height="72" viewBox="0 0 72 72">
+        <text x="50%" y="50%" textLength="72px" dominant-baseline="central" text-anchor="middle" alignment-baseline="central"
+        style="font-size: ` + this.calculateFontSize(this._text) + `%;">` + this._text + `</text>
+        </svg>`;
+        }
+    }
+
+    calculateFontSize(text) {
+        let fontFamily = "16px sans-serif";
+        let canvas = document.createElement('canvas');
+        canvas.width = 72;
+        canvas.height = 72;
+        let ctx = canvas.getContext('2d');
+        ctx.font = fontFamily;
+        let width = ctx.measureText(text).width;
+        let size = (1 / (width / 72)) * 100;
+        return size < 500 ? size > 50 ? size : 50 : 500;
+    }
 }
\ No newline at end of file
diff --git a/webroot/js/index.js b/webroot/js/index.js
index 7014a40..0823721 100644
--- a/webroot/js/index.js
+++ b/webroot/js/index.js
@@ -20,17 +20,18 @@ const removeIconButton = document.getElementById("remove-icon-button");
 const submitButton = document.getElementById("submit");
 const clearPageButton = document.getElementById("clear-page");
 const addPageButton = document.getElementById("add-page");
+const textInput = document.getElementById("text");
+const setTextButton = document.getElementById("set-text");
 
 ipcRenderer.on("config", (event, arg) => {
     config = JSON.parse(arg);
-    console.log(config);
     window.config = config;
     ipcRenderer.send("get-deck-info");
     ipcRenderer.on("deck-info", (event, arg) => {
         deckInfo = JSON.parse(arg);
         for (let page = 0; page < config.length; page++) {
             let pageObj = setupPage(page);
-            if (page === 0) {
+            if (page === deckInfo.page) {
                 pageObj.getTable().classList.add("active");
                 currentPage = pageObj;
             }
@@ -63,7 +64,9 @@ function updatePage(pageNumber, emit = true) {
     if (selected.length > 0) {
         selected[0].classList.remove("selected");
     }
-    document.querySelectorAll(".active")[0].classList.remove("active");
+    let active = document.querySelectorAll(".active");
+    if (active.length > 0)
+        active[0].classList.remove("active");
     disableInputs();
     clearInputs();
     let page = pages[pageNumber];
@@ -86,6 +89,7 @@ export function setSelectedCell(cell) {
     if (cell.getType() != null) {
         actionTypeInput.value = cell.getType();
         actionInput.value = cell.getValue();
+        textInput.value = cell.getText();
     }
 }
 
@@ -97,6 +101,8 @@ function enableInputs() {
     submitButton.removeAttribute("disabled");
     iconButton.removeAttribute("disabled");
     removeIconButton.removeAttribute("disabled");
+    textInput.removeAttribute("disabled");
+    setTextButton.removeAttribute("disabled");
 }
 
 function disableInputs() {
@@ -106,12 +112,15 @@ function disableInputs() {
     submitButton.setAttribute("disabled", "");
     iconButton.setAttribute("disabled", "");
     removeIconButton.setAttribute("disabled", "");
+    textInput.setAttribute("disabled", "");
+    setTextButton.setAttribute("disabled", "");
 }
 
 function clearInputs() {
     actionInput.value = "";
     actionTypeInput.value = "";
     iconInput.value = "";
+    textInput.value = "";
 }
 
 submitButton.onclick = () => {
@@ -132,6 +141,10 @@ removeIconButton.onclick = () => {
     selectedCell.removeIcon();
 };
 
+setTextButton.onclick = () => {
+    selectedCell.setText(textInput.value);
+}
+
 function setupPage(page) {
     let table = document.createElement("table");
     let pageOption = document.createElement("option");
diff --git a/webroot/js/page.js b/webroot/js/page.js
index 4b3bcae..4554fb0 100644
--- a/webroot/js/page.js
+++ b/webroot/js/page.js
@@ -16,7 +16,7 @@ export default class Page {
 
     createTable() {
         let table = this.getTable();
-        table.setAttribute("class", "table");
+        table.setAttribute("class", "deck-table");
         for (let row = 0; row < deckInfo.rows; row++) {
             let rowElem = document.createElement("tr");
             for (let col = 0; col < deckInfo.cols; col++) {