diff --git a/package-lock.json b/package-lock.json
index dcbe785..2d0cfaf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,32 +15,32 @@
         "@mantine/hooks": "^7.5.3",
         "@mantine/notifications": "^7.5.3",
         "@tabler/icons-react": "^2.47.0",
-        "@tanstack/react-query": "^5.21.7",
-        "@tanstack/react-query-devtools": "^5.21.7",
-        "@types/node": "20.11.19",
-        "@types/react": "18.2.56",
-        "@types/react-dom": "18.2.19",
+        "@tanstack/react-query": "^5.28.9",
+        "@tanstack/react-query-devtools": "^5.28.10",
+        "@types/node": "20.12.2",
+        "@types/react": "18.2.73",
+        "@types/react-dom": "18.2.23",
         "@vidstack/react": "^1.10.7",
-        "axios": "^1.6.7",
+        "axios": "^1.6.8",
         "clsx": "^2.1.0",
         "cookies-next": "^2.1.1",
         "dayjs": "^1.11.10",
-        "embla-carousel-react": "^7.1.0",
+        "embla-carousel-react": "^8.0.0",
         "events": "^3.3.0",
         "lodash": "^4.17.21",
-        "mantine-datatable": "^7.5.1",
+        "mantine-datatable": "^7.6.1",
         "media-icons": "^0.10.0",
-        "next": "^14.1.0",
+        "next": "^14.1.4",
         "plyr-react": "^5.3.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
-        "react-hook-form": "^7.50.1",
-        "typescript": "5.3.3",
+        "react-hook-form": "^7.51.2",
+        "typescript": "5.4.3",
         "vidstack": "^1.10.7",
-        "zustand": "^4.5.1"
+        "zustand": "^4.5.2"
       },
       "devDependencies": {
-        "postcss": "^8.4.35",
+        "postcss": "^8.4.38",
         "postcss-preset-mantine": "^1.13.0",
         "postcss-simple-vars": "^7.0.1"
       }
@@ -209,14 +209,14 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.0.tgz",
-      "integrity": "sha512-Py8zIo+02ht82brwwhTg36iogzFqGLPXlRGKQw5s+qP/kMNc4MAyDeEwBKDijk6zTIbegEgu8Qy7C1LboslQAw=="
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.4.tgz",
+      "integrity": "sha512-e7X7bbn3Z6DWnDi75UWn+REgAbLEqxI8Tq2pkFOFAMpWAWApz/YCUhtWMWn410h8Q2fYiYL7Yg5OlxMOCfFjJQ=="
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.1.0.tgz",
-      "integrity": "sha512-nUDn7TOGcIeyQni6lZHfzNoo9S0euXnu0jhsbMOmMJUBfgsnESdjN97kM7cBqQxZa8L/bM9om/S5/1dzCrW6wQ==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.1.4.tgz",
+      "integrity": "sha512-ubmUkbmW65nIAOmoxT1IROZdmmJMmdYvXIe8211send9ZYJu+SqxSnJM4TrPj9wmL6g9Atvj0S/2cFmMSS99jg==",
       "cpu": [
         "arm64"
       ],
@@ -229,9 +229,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.1.0.tgz",
-      "integrity": "sha512-1jgudN5haWxiAl3O1ljUS2GfupPmcftu2RYJqZiMJmmbBT5M1XDffjUtRUzP4W3cBHsrvkfOFdQ71hAreNQP6g==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.1.4.tgz",
+      "integrity": "sha512-b0Xo1ELj3u7IkZWAKcJPJEhBop117U78l70nfoQGo4xUSvv0PJSTaV4U9xQBLvZlnjsYkc8RwQN1HoH/oQmLlQ==",
       "cpu": [
         "x64"
       ],
@@ -244,9 +244,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.1.0.tgz",
-      "integrity": "sha512-RHo7Tcj+jllXUbK7xk2NyIDod3YcCPDZxj1WLIYxd709BQ7WuRYl3OWUNG+WUfqeQBds6kvZYlc42NJJTNi4tQ==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.1.4.tgz",
+      "integrity": "sha512-457G0hcLrdYA/u1O2XkRMsDKId5VKe3uKPvrKVOyuARa6nXrdhJOOYU9hkKKyQTMru1B8qEP78IAhf/1XnVqKA==",
       "cpu": [
         "arm64"
       ],
@@ -259,9 +259,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.1.0.tgz",
-      "integrity": "sha512-v6kP8sHYxjO8RwHmWMJSq7VZP2nYCkRVQ0qolh2l6xroe9QjbgV8siTbduED4u0hlk0+tjS6/Tuy4n5XCp+l6g==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.1.4.tgz",
+      "integrity": "sha512-l/kMG+z6MB+fKA9KdtyprkTQ1ihlJcBh66cf0HvqGP+rXBbOXX0dpJatjZbHeunvEHoBBS69GYQG5ry78JMy3g==",
       "cpu": [
         "arm64"
       ],
@@ -274,9 +274,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.1.0.tgz",
-      "integrity": "sha512-zJ2pnoFYB1F4vmEVlb/eSe+VH679zT1VdXlZKX+pE66grOgjmKJHKacf82g/sWE4MQ4Rk2FMBCRnX+l6/TVYzQ==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.1.4.tgz",
+      "integrity": "sha512-BapIFZ3ZRnvQ1uWbmqEGJuPT9cgLwvKtxhK/L2t4QYO7l+/DxXuIGjvp1x8rvfa/x1FFSsipERZK70pewbtJtw==",
       "cpu": [
         "x64"
       ],
@@ -289,9 +289,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.1.0.tgz",
-      "integrity": "sha512-rbaIYFt2X9YZBSbH/CwGAjbBG2/MrACCVu2X0+kSykHzHnYH5FjHxwXLkcoJ10cX0aWCEynpu+rP76x0914atg==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.1.4.tgz",
+      "integrity": "sha512-mqVxTwk4XuBl49qn2A5UmzFImoL1iLm0KQQwtdRJRKl21ylQwwGCxJtIYo2rbfkZHoSKlh/YgztY0qH3wG1xIg==",
       "cpu": [
         "x64"
       ],
@@ -304,9 +304,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.1.0.tgz",
-      "integrity": "sha512-o1N5TsYc8f/HpGt39OUQpQ9AKIGApd3QLueu7hXk//2xq5Z9OxmV6sQfNp8C7qYmiOlHYODOGqNNa0e9jvchGQ==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.1.4.tgz",
+      "integrity": "sha512-xzxF4ErcumXjO2Pvg/wVGrtr9QQJLk3IyQX1ddAC/fi6/5jZCZ9xpuL9Tzc4KPWMFq8GGWFVDMshZOdHGdkvag==",
       "cpu": [
         "arm64"
       ],
@@ -319,9 +319,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.1.0.tgz",
-      "integrity": "sha512-XXIuB1DBRCFwNO6EEzCTMHT5pauwaSj4SWs7CYnME57eaReAKBXCnkUE80p/pAZcewm7hs+vGvNqDPacEXHVkw==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.1.4.tgz",
+      "integrity": "sha512-WZiz8OdbkpRw6/IU/lredZWKKZopUMhcI2F+XiMAcPja0uZYdMTZQRoQ0WZcvinn9xZAidimE7tN9W5v9Yyfyw==",
       "cpu": [
         "ia32"
       ],
@@ -334,9 +334,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.1.0.tgz",
-      "integrity": "sha512-9WEbVRRAqJ3YFVqEZIxUqkiO8l1nool1LmNxygr5HWF8AcSYsEpneUDhmjUVJEzO2A04+oPtZdombzzPPkTtgg==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.1.4.tgz",
+      "integrity": "sha512-4Rto21sPfw555sZ/XNLqfxDUNeLhNYGO2dlPqsnuCg8N8a2a9u1ltqBOPQ4vj1Gf7eJC0W2hHG2eYUHuiXgY2w==",
       "cpu": [
         "x64"
       ],
@@ -417,29 +417,29 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.21.7",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.21.7.tgz",
-      "integrity": "sha512-z0NSWFsM75esVmkxeuDWeyo9Wv4CZ/WsLMZgu1Zz164S6Oc/57NMia88dTu/d51wdVowMTAcDMQgRmiWmyPMxQ==",
+      "version": "5.28.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.28.9.tgz",
+      "integrity": "sha512-hNlfCiqZevr3GRVPXS3MhaGW5hjcxvCsIQ4q6ff7EPlvFwYZaS+0d9EIIgofnegDaU2BbCDlyURoYfRl5rmzow==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
     "node_modules/@tanstack/query-devtools": {
-      "version": "5.21.5",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.21.5.tgz",
-      "integrity": "sha512-A7rVpVP1GRcQBnB/GzXZfVhxmoP17J1f+RoYRu+DOV8Jp4QPIJRE/nFueEiiRPSVL7aNcNw4rTm0RmJZRI2fUA==",
+      "version": "5.28.10",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.28.10.tgz",
+      "integrity": "sha512-5UN629fKa5/1K/2Pd26gaU7epxRrYiT1gy+V+pW5K6hnf1DeUKK3pANSb2eHKlecjIKIhTwyF7k9XdyE2gREvQ==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.21.7",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.21.7.tgz",
-      "integrity": "sha512-Op9nVL/L0Lg+aSPFSGbrymu6d3tzUoZ+FZ+rRIZpu5HkGasflqzhsXkL26Sa+MEwLyox7Q1erSFwNIRO3TYjXQ==",
+      "version": "5.28.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.28.9.tgz",
+      "integrity": "sha512-vwifBkGXsydsLxFOBMe3+f8kvtDoqDRDwUNjPHVDDt+FoBetCbOWAUHgZn4k+CVeZgLmy7bx6aKeDbe3e8koOQ==",
       "dependencies": {
-        "@tanstack/query-core": "5.21.7"
+        "@tanstack/query-core": "5.28.9"
       },
       "funding": {
         "type": "github",
@@ -450,18 +450,18 @@
       }
     },
     "node_modules/@tanstack/react-query-devtools": {
-      "version": "5.21.7",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.21.7.tgz",
-      "integrity": "sha512-SfGw5KErNfeC8beEfV3vg9QjxVUaJkDEkZGfjVEHdHR/H9owmf1SI8FLDH3GtWXMO0YczaKjDiFyvMSZUk2I1Q==",
+      "version": "5.28.10",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.28.10.tgz",
+      "integrity": "sha512-D+SiHZTWhK2sNgBYj+xIvUOqonsKy74OLU/YHmRB5OZVLLTiekvZd12C3rKlU+WM69jid0hjEjuFqkULOMwc3A==",
       "dependencies": {
-        "@tanstack/query-devtools": "5.21.5"
+        "@tanstack/query-devtools": "5.28.10"
       },
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
       },
       "peerDependencies": {
-        "@tanstack/react-query": "^5.21.7",
+        "@tanstack/react-query": "^5.28.9",
         "react": "^18.0.0"
       }
     },
@@ -471,9 +471,9 @@
       "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q=="
     },
     "node_modules/@types/node": {
-      "version": "20.11.19",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.19.tgz",
-      "integrity": "sha512-7xMnVEcZFu0DikYjWOlRq7NTPETrm7teqUT2WkQjrTIkEgUyyGdWsj/Zg8bEJt5TNklzbPD1X3fqfsHw3SpapQ==",
+      "version": "20.12.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.2.tgz",
+      "integrity": "sha512-zQ0NYO87hyN6Xrclcqp7f8ZbXNbRfoGWNcMvHTPQp9UUrwI0mI7XBz+cu7/W6/VClYo2g63B0cjull/srU7LgQ==",
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -484,28 +484,22 @@
       "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng=="
     },
     "node_modules/@types/react": {
-      "version": "18.2.56",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.56.tgz",
-      "integrity": "sha512-NpwHDMkS/EFZF2dONFQHgkPRwhvgq/OAvIaGQzxGSBmaeR++kTg6njr15Vatz0/2VcCEwJQFi6Jf4Q0qBu0rLA==",
+      "version": "18.2.73",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.73.tgz",
+      "integrity": "sha512-XcGdod0Jjv84HOC7N5ziY3x+qL0AfmubvKOZ9hJjJ2yd5EE+KYjWhdOjt387e9HPheHkdggF9atTifMRtyAaRA==",
       "dependencies": {
         "@types/prop-types": "*",
-        "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.19",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.19.tgz",
-      "integrity": "sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==",
+      "version": "18.2.23",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.23.tgz",
+      "integrity": "sha512-ZQ71wgGOTmDYpnav2knkjr3qXdAFu0vsk8Ci5w3pGAIdj7/kKAyn+VsQDhXsmzzzepAiI9leWMmubXz690AI/A==",
       "dependencies": {
         "@types/react": "*"
       }
     },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.8",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
-    },
     "node_modules/@vidstack/react": {
       "version": "1.10.7",
       "resolved": "https://registry.npmjs.org/@vidstack/react/-/react-1.10.7.tgz",
@@ -561,11 +555,11 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/axios": {
-      "version": "1.6.7",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz",
-      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
       "dependencies": {
-        "follow-redirects": "^1.15.4",
+        "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
         "proxy-from-env": "^1.1.0"
       }
@@ -758,21 +752,30 @@
       }
     },
     "node_modules/embla-carousel": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-7.1.0.tgz",
-      "integrity": "sha512-Bh8Pa8NWzgugLkf8sAGexQlBCNDFaej5BXiKgQdRJ1mUC9NWBrw9Z23YVPVGkguWoz5LMjZXXFVGCobl3UPt/Q=="
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.0.0.tgz",
+      "integrity": "sha512-ecixcyqS6oKD2nh5Nj5MObcgoSILWNI/GtBxkidn5ytFaCCmwVHo2SecksaQZHcARMMpIR2dWOlSIdA1LkZFUA=="
     },
     "node_modules/embla-carousel-react": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-7.1.0.tgz",
-      "integrity": "sha512-tbYRPRZSDNd2QLNqYDcArAakGIxtUbhS7tkP0dGXktXHGgcX+3ji3VrOUTOftBiujZrMV8kRxtrRUe/1soloIQ==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.0.0.tgz",
+      "integrity": "sha512-qT0dii8ZwoCtEIBE6ogjqU2+5IwnGfdt2teKjCzW88JRErflhlCpz8KjWnW8xoRZOP8g0clRtsMEFoAgS/elfA==",
       "dependencies": {
-        "embla-carousel": "7.1.0"
+        "embla-carousel": "8.0.0",
+        "embla-carousel-reactive-utils": "8.0.0"
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.1 || ^18.0.0"
       }
     },
+    "node_modules/embla-carousel-reactive-utils": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.0.0.tgz",
+      "integrity": "sha512-JCw0CqCXI7tbHDRogBb9PoeMLyjEC1vpN0lDOzUjmlfVgtfF+ffLaOK8bVtXVUEbNs/3guGe3NSzA5J5aYzLzw==",
+      "peerDependencies": {
+        "embla-carousel": "8.0.0"
+      }
+    },
     "node_modules/events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -823,9 +826,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.4",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
-      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "funding": [
         {
           "type": "individual",
@@ -972,9 +975,9 @@
       }
     },
     "node_modules/mantine-datatable": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/mantine-datatable/-/mantine-datatable-7.5.1.tgz",
-      "integrity": "sha512-4mcikmjN8dzkUdloFB6laymQb8fOqtmixkQ+GEVUHYQB1QBZ1EWfaZHnpw5ATdkaZ6ZeFfySrhwtTmo4cFAK0A==",
+      "version": "7.6.1",
+      "resolved": "https://registry.npmjs.org/mantine-datatable/-/mantine-datatable-7.6.1.tgz",
+      "integrity": "sha512-iPxUEaO9n7RETSEZj9DY8TAL4m7d7hk8U3xULXWydt6ZnpNhv8hWkCsz0FSTZQZNoF/umH329xAtrTBEM8URkg==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/icflorescu"
@@ -1061,11 +1064,11 @@
       }
     },
     "node_modules/next": {
-      "version": "14.1.0",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.1.0.tgz",
-      "integrity": "sha512-wlzrsbfeSU48YQBjZhDzOwhWhGsy+uQycR8bHAOt1LY1bn3zZEcDyHQOEoN3aWzQ8LHCAJ1nqrWCc9XF2+O45Q==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.1.4.tgz",
+      "integrity": "sha512-1WTaXeSrUwlz/XcnhGTY7+8eiaFvdet5z9u3V2jb+Ek1vFo0VhHKSAIJvDWfQpttWjnyw14kBeq28TPq7bTeEQ==",
       "dependencies": {
-        "@next/env": "14.1.0",
+        "@next/env": "14.1.4",
         "@swc/helpers": "0.5.2",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001579",
@@ -1080,15 +1083,15 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.1.0",
-        "@next/swc-darwin-x64": "14.1.0",
-        "@next/swc-linux-arm64-gnu": "14.1.0",
-        "@next/swc-linux-arm64-musl": "14.1.0",
-        "@next/swc-linux-x64-gnu": "14.1.0",
-        "@next/swc-linux-x64-musl": "14.1.0",
-        "@next/swc-win32-arm64-msvc": "14.1.0",
-        "@next/swc-win32-ia32-msvc": "14.1.0",
-        "@next/swc-win32-x64-msvc": "14.1.0"
+        "@next/swc-darwin-arm64": "14.1.4",
+        "@next/swc-darwin-x64": "14.1.4",
+        "@next/swc-linux-arm64-gnu": "14.1.4",
+        "@next/swc-linux-arm64-musl": "14.1.4",
+        "@next/swc-linux-x64-gnu": "14.1.4",
+        "@next/swc-linux-x64-musl": "14.1.4",
+        "@next/swc-win32-arm64-msvc": "14.1.4",
+        "@next/swc-win32-ia32-msvc": "14.1.4",
+        "@next/swc-win32-x64-msvc": "14.1.4"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -1201,9 +1204,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.35",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
-      "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
       "dev": true,
       "funding": [
         {
@@ -1222,7 +1225,7 @@
       "dependencies": {
         "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "source-map-js": "^1.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -1410,9 +1413,9 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.50.1",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.50.1.tgz",
-      "integrity": "sha512-3PCY82oE0WgeOgUtIr3nYNNtNvqtJ7BZjsbxh6TnYNbXButaD5WpjOmTjdxZfheuHKR68qfeFnEDVYoSSFPMTQ==",
+      "version": "7.51.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.2.tgz",
+      "integrity": "sha512-y++lwaWjtzDt/XNnyGDQy6goHskFualmDlf+jzEZvjvz6KWDf7EboL7pUvRCzPTJd0EOPpdekYaQLEvvG6m6HA==",
       "engines": {
         "node": ">=12.22.0"
       },
@@ -1597,9 +1600,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1683,9 +1686,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
-      "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz",
+      "integrity": "sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -1833,9 +1836,9 @@
       "integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg=="
     },
     "node_modules/zustand": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.1.tgz",
-      "integrity": "sha512-XlauQmH64xXSC1qGYNv00ODaQ3B+tNPoy22jv2diYiP4eoDKr9LA+Bh5Bc3gplTrFdb6JVI+N4kc1DZ/tbtfPg==",
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz",
+      "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==",
       "dependencies": {
         "use-sync-external-store": "1.2.0"
       },
diff --git a/package.json b/package.json
index ddcc0f6..a259a82 100644
--- a/package.json
+++ b/package.json
@@ -16,32 +16,32 @@
     "@mantine/hooks": "^7.5.3",
     "@mantine/notifications": "^7.5.3",
     "@tabler/icons-react": "^2.47.0",
-    "@tanstack/react-query": "^5.21.7",
-    "@tanstack/react-query-devtools": "^5.21.7",
-    "@types/node": "20.11.19",
-    "@types/react": "18.2.56",
-    "@types/react-dom": "18.2.19",
+    "@tanstack/react-query": "^5.28.9",
+    "@tanstack/react-query-devtools": "^5.28.10",
+    "@types/node": "20.12.2",
+    "@types/react": "18.2.73",
+    "@types/react-dom": "18.2.23",
     "@vidstack/react": "^1.10.7",
-    "axios": "^1.6.7",
+    "axios": "^1.6.8",
     "clsx": "^2.1.0",
     "cookies-next": "^2.1.1",
     "dayjs": "^1.11.10",
-    "embla-carousel-react": "^7.1.0",
+    "embla-carousel-react": "^8.0.0",
     "events": "^3.3.0",
     "lodash": "^4.17.21",
-    "mantine-datatable": "^7.5.1",
+    "mantine-datatable": "^7.6.1",
     "media-icons": "^0.10.0",
-    "next": "^14.1.0",
+    "next": "^14.1.4",
     "plyr-react": "^5.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "^7.50.1",
-    "typescript": "5.3.3",
+    "react-hook-form": "^7.51.2",
+    "typescript": "5.4.3",
     "vidstack": "^1.10.7",
-    "zustand": "^4.5.1"
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
     "postcss-preset-mantine": "^1.13.0",
     "postcss-simple-vars": "^7.0.1"
   }
diff --git a/src/components/Admin/Watched/Drawer.tsx b/src/components/Admin/Watched/Drawer.tsx
index f9e1766..5c59238 100644
--- a/src/components/Admin/Watched/Drawer.tsx
+++ b/src/components/Admin/Watched/Drawer.tsx
@@ -4,6 +4,7 @@ import {
   Group,
   Loader,
   MultiSelect,
+  NumberInput,
   Select,
   Switch,
   Text,
@@ -31,6 +32,7 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
   const [lastLive, setLastLive] = useState(watched?.last_live);
   const [channelId, setChannelId] = useState([]);
   const [downloadSubOnly, setDownloadSubOnly] = useState(false);
+  const [maxVideoAge, setMaxVideoAge] = useState<string | number>(0)
 
   const [channelData, setChannelData] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -63,6 +65,7 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
       setChannelId([...channelId, watched?.edges.channel.id]);
       setRenderChat(watched?.render_chat);
       setDownloadSubOnly(watched?.download_sub_only);
+      setMaxVideoAge(watched?.video_age);
 
       if (watched?.edges?.categories) {
         const tmpArr = [];
@@ -96,6 +99,7 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
               render_chat: renderChat,
               download_sub_only: downloadSubOnly,
               categories: selectedTwitchCategories,
+              max_age: maxVideoAge,
             },
             withCredentials: true,
           },
@@ -135,6 +139,7 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
                   render_chat: renderChat,
                   download_sub_only: downloadSubOnly,
                   categories: selectedTwitchCategories,
+                  max_age: maxVideoAge,
                 },
                 withCredentials: true,
               },
@@ -157,6 +162,7 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
                   render_chat: renderChat,
                   download_sub_only: downloadSubOnly,
                   categories: selectedTwitchCategories,
+                  max_age: maxVideoAge,
                 },
                 withCredentials: true,
               },
@@ -358,6 +364,15 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
         <div>
           <Title order={3}>Advanced</Title>
         </div>
+        <div>
+          <NumberInput
+            label="Max Video Age (days)"
+            description="Archive videos that are not older than this number of days (0 to archive all)"
+            placeholder="Enter a number"
+            value={maxVideoAge}
+            onChange={setMaxVideoAge}
+          />
+        </div>
         <div>
           {twitchCategoriesLoading || formattedTwitchCategories.length == 0 ? (
             <Loader color="violet" />
@@ -368,7 +383,7 @@ const AdminWatchedDrawer = ({ handleClose, watched, mode }) => {
               value={selectedTwitchCategories}
               onChange={setSelectedTwitchCategories}
               data={formattedTwitchCategories}
-              dropdownPosition="top"
+              comboboxProps={{ position: 'top', middlewares: { flip: false, shift: false } }}
               label="Archive specific video categories"
               placeholder="Search for a category"
               description="Archive only videos from these categories. Leave blank to archive all categories. Does not apply to live streams."
diff --git a/src/components/Channel/Card.tsx b/src/components/Channel/Card.tsx
index 3153ff6..d8e8fc6 100644
--- a/src/components/Channel/Card.tsx
+++ b/src/components/Channel/Card.tsx
@@ -48,7 +48,6 @@ export const ChannelCard = ({ channel, ...props }: ChannelCardProps) => {
 
   return (
     <Link href={"/channels/" + channel.name}>
-
       <Card key={channel.id} p="md" radius="md" component="a" href="#" className={classes.card}>
         <AspectRatio ratio={300 / 300}>
           <Image src={`${publicRuntimeConfig.CDN_URL}${channel.image_path}`} alt={`${channel.name}`} />
@@ -59,8 +58,6 @@ export const ChannelCard = ({ channel, ...props }: ChannelCardProps) => {
           </Title>
         </Center>
       </Card>
-
-
     </Link>
   );
 };
diff --git a/src/components/Landing/ContinueWatching.tsx b/src/components/Landing/ContinueWatching.tsx
index 3fb9d2a..d99ab1c 100644
--- a/src/components/Landing/ContinueWatching.tsx
+++ b/src/components/Landing/ContinueWatching.tsx
@@ -49,7 +49,7 @@ const LandingContinueWatching = () => {
       ) : (
         <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="xs" verticalSpacing="xs">
           {data?.data?.map((item: any) => (
-            <VideoCard video={item.vod} playback={data?.playback} showChannel={true} />
+            <VideoCard key={item.vod.id} video={item.vod} playback={data?.playback} showChannel={true} />
           ))}
         </SimpleGrid>
       )}
diff --git a/src/components/Queue/Header.module.css b/src/components/Queue/Header.module.css
index de253c1..e20e228 100644
--- a/src/components/Queue/Header.module.css
+++ b/src/components/Queue/Header.module.css
@@ -2,7 +2,7 @@
   height: auto;
   padding-bottom: 10px;
   padding-top: 10px;
-  background-color: var(--mantine-color-dark-6);
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
 }
 .queueHeaderContents {
   display: flex;
diff --git a/src/components/Vod/Card.tsx b/src/components/Vod/Card.tsx
index bcfee58..f4a0f18 100644
--- a/src/components/Vod/Card.tsx
+++ b/src/components/Vod/Card.tsx
@@ -106,18 +106,16 @@ const VideoCard = ({
       )}
       <Link href={video.processing ? `#` : `/vods/${video.id}`}>
         <Card.Section>
-          <a>
-            <Image
-              className={classes.videoImage}
-              src={`${publicRuntimeConfig.CDN_URL}${escapeURL(
-                video.web_thumbnail_path
-              )}`}
-              onError={handleError}
-              width={imageError ? "100%" : "100%"}
-              height={imageError ? "5rem" : "100%"}
-              fallbackSrc="/images/ganymede-thumbnail.webp"
-            />
-          </a>
+          <Image
+            className={classes.videoImage}
+            src={`${publicRuntimeConfig.CDN_URL}${escapeURL(
+              video.web_thumbnail_path
+            )}`}
+            onError={handleError}
+            width={imageError ? "100%" : "100%"}
+            height={imageError ? "5rem" : "100%"}
+            fallbackSrc="/images/ganymede-thumbnail.webp"
+          />
           {Math.round(progress) > 0 && !watched && (
             <Tooltip label={`${Math.round(progress)}% watched`}>
               <Progress
diff --git a/src/components/layouts/Navbar.module.css b/src/components/layouts/Navbar.module.css
index 27643ea..806fa81 100644
--- a/src/components/layouts/Navbar.module.css
+++ b/src/components/layouts/Navbar.module.css
@@ -49,4 +49,28 @@
   display: flex;
   align-items: center;
   margin-left: auto;
-}
\ No newline at end of file
+}
+.icon {
+  width: rem(22px);
+  height: rem(22px);
+}
+
+.dark {
+  @mixin dark {
+    display: none;
+  }
+
+  @mixin light {
+    display: block;
+  }
+}
+
+.light {
+  @mixin light {
+    display: none;
+  }
+
+  @mixin dark {
+    display: block;
+  }
+}
diff --git a/src/components/layouts/Navbar.tsx b/src/components/layouts/Navbar.tsx
index b49a2c6..f35579a 100644
--- a/src/components/layouts/Navbar.tsx
+++ b/src/components/layouts/Navbar.tsx
@@ -17,6 +17,9 @@ import {
   rem,
   useMantineTheme,
   TextInput,
+  useMantineColorScheme,
+  ActionIcon,
+  useComputedColorScheme,
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import {
@@ -36,6 +39,8 @@ import {
   IconInfoCircle,
   IconSubtask,
   IconSearch,
+  IconSun,
+  IconMoon,
 } from '@tabler/icons-react';
 import classes from './Navbar.module.css';
 import Image from 'next/image';
@@ -45,6 +50,7 @@ import getConfig from 'next/config';
 import useUserStore from '../../store/user';
 import router from 'next/router';
 import { useState } from 'react';
+import cx from "clsx"
 
 const adminLinks = [
   {
@@ -111,6 +117,9 @@ export function HeaderMegaMenu() {
   const [linksOpened, { toggle: toggleLinks }] = useDisclosure(false);
   const [search, setSearch] = useState("");
   const theme = useMantineTheme();
+  // const { setColorScheme, clearColorScheme } = useMantineColorScheme();
+  const { setColorScheme } = useMantineColorScheme();
+  const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true });
 
   const user = useUserStore((state) => state);
 
@@ -249,6 +258,15 @@ export function HeaderMegaMenu() {
                 </Link>
               </div>
             )}
+            <ActionIcon
+              onClick={() => setColorScheme(computedColorScheme === 'light' ? 'dark' : 'light')}
+              variant="default"
+              size="lg"
+              aria-label="Toggle color scheme"
+            >
+              <IconSun className={cx(classes.icon, classes.light)} stroke={1.5} />
+              <IconMoon className={cx(classes.icon, classes.dark)} stroke={1.5} />
+            </ActionIcon>
           </Group>
 
           <Burger opened={drawerOpened} onClick={toggleDrawer} hiddenFrom="sm" />
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 45a565e..8f2a5d3 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -33,15 +33,6 @@ export default function MyApp({ Component, pageProps }: AppProps) {
     getAuthentication().then(() => setIsLoaded(true));
   }, []);
 
-  // const [colorScheme, setColorScheme] = useLocalStorage<ColorScheme>({
-  //   key: "ganymede-color-scheme",
-  //   defaultValue: "dark",
-  //   getInitialValueInEffect: true,
-  // });
-
-  // const toggleColorScheme = (value?: ColorScheme) =>
-  //   setColorScheme(value || (colorScheme === "dark" ? "light" : "dark"));
-
   const CONTAINER_SIZES: Record<string, string> = {
     xxs: rem(300),
     xs: rem(400),
diff --git a/src/pages/admin/info.module.css b/src/pages/admin/info.module.css
index 0cd3b55..d162708 100644
--- a/src/pages/admin/info.module.css
+++ b/src/pages/admin/info.module.css
@@ -8,15 +8,7 @@
   order: 2
 }
 .settingsSections {
-  background-color: var(--mantine-color-dark-6);
-  border-radius: var(--mantine-radius-md);
-  padding-left: var(--mantine-spacing-md);
-  padding-right: var(--mantine-spacing-md);
-  padding-bottom: var(--mantine-spacing-md);
   margin-top: var(--mantine-spacing-md);
-  margin-bottom: var(--mantine-spacing-md);
-  border: 1px solid var(--mantine-color-dark-5);
-  box-shadow: var(--mantine-shadow-sm);
 }
 .settingItem {
   display: flex;
diff --git a/src/pages/admin/info.tsx b/src/pages/admin/info.tsx
index 0b84a84..7d0f920 100644
--- a/src/pages/admin/info.tsx
+++ b/src/pages/admin/info.tsx
@@ -7,6 +7,7 @@ import {
   Switch,
   TextInput,
   Code,
+  Card,
 } from "@mantine/core";
 import { useDocumentTitle } from "@mantine/hooks";
 import { showNotification } from "@mantine/notifications";
@@ -41,59 +42,61 @@ const AdminInfoPage = () => {
     <Authorization allowedRoles={[ROLES.ARCHIVER, ROLES.EDITOR, ROLES.ADMIN]}>
       <div>
         <Container className={classes.settingsSections} size="xl">
-          <div className={classes.header}>
-            <div>
-              <Title order={2}>Frontend</Title>
-            </div>
-          </div>
-          <div className={classes.settingItem}>
-            <Text mr={5}>Version:</Text>
-            <Code>{process.env.CONFIG_BUILD_ID}</Code>
-          </div>
-          <div>
+          <Card withBorder p="xl" radius="md">
             <div className={classes.header}>
               <div>
-                <Title order={2}>API</Title>
+                <Title order={2}>Frontend</Title>
               </div>
             </div>
             <div className={classes.settingItem}>
               <Text mr={5}>Version:</Text>
-              <Code>{data.version}</Code>
-            </div>
-            <div className={classes.settingItem}>
-              <Text mr={5}>Build Date:</Text>
-              <Code>{data.build_time}</Code>
-            </div>
-            <div className={classes.settingItem}>
-              <Text mr={5}>Git Commit Hash:</Text>
-              <Code>{data.git_hash}</Code>
-            </div>
-            <div className={classes.settingItem}>
-              <Text mr={5}>Uptime:</Text>
-              <Code>{data.uptime}</Code>
+              <Code>{process.env.CONFIG_BUILD_ID}</Code>
             </div>
             <div>
-              <Title mt={15} order={3}>
-                Package Versions
-              </Title>
-              <div style={{ marginBottom: "0.25rem" }}>
-                <Text mr={5}>FFmpeg:</Text>
-                <Code block>{data.program_versions.ffmpeg}</Code>
+              <div className={classes.header}>
+                <div>
+                  <Title order={2}>API</Title>
+                </div>
+              </div>
+              <div className={classes.settingItem}>
+                <Text mr={5}>Version:</Text>
+                <Code>{data.version}</Code>
               </div>
               <div className={classes.settingItem}>
-                <Text mr={5}>TwitchDownloader:</Text>
-                <Code>{data.program_versions.twitch_downloader}</Code>
+                <Text mr={5}>Build Date:</Text>
+                <Code>{data.build_time}</Code>
               </div>
               <div className={classes.settingItem}>
-                <Text mr={5}>Chat Downloader:</Text>
-                <Code>{data.program_versions.chat_downloader}</Code>
+                <Text mr={5}>Git Commit Hash:</Text>
+                <Code>{data.git_hash}</Code>
               </div>
               <div className={classes.settingItem}>
-                <Text mr={5}>Streamlink:</Text>
-                <Code>{data.program_versions.streamlink}</Code>
+                <Text mr={5}>Uptime:</Text>
+                <Code>{data.uptime}</Code>
+              </div>
+              <div>
+                <Title mt={15} order={3}>
+                  Package Versions
+                </Title>
+                <div style={{ marginBottom: "0.25rem" }}>
+                  <Text mr={5}>FFmpeg:</Text>
+                  <Code block>{data.program_versions.ffmpeg}</Code>
+                </div>
+                <div className={classes.settingItem}>
+                  <Text mr={5}>TwitchDownloader:</Text>
+                  <Code>{data.program_versions.twitch_downloader}</Code>
+                </div>
+                <div className={classes.settingItem}>
+                  <Text mr={5}>Chat Downloader:</Text>
+                  <Code>{data.program_versions.chat_downloader}</Code>
+                </div>
+                <div className={classes.settingItem}>
+                  <Text mr={5}>Streamlink:</Text>
+                  <Code>{data.program_versions.streamlink}</Code>
+                </div>
               </div>
             </div>
-          </div>
+          </Card>
         </Container>
       </div>
     </Authorization>
diff --git a/src/pages/admin/settings.module.css b/src/pages/admin/settings.module.css
index 4091e49..b23d609 100644
--- a/src/pages/admin/settings.module.css
+++ b/src/pages/admin/settings.module.css
@@ -8,15 +8,7 @@
   order: 2
 }
 .settingsSections {
-  background-color: var(--mantine-color-dark-6);
-  border-radius: var(--mantine-radius-md);
-  padding-left: var(--mantine-spacing-md);
-  padding-right: var(--mantine-spacing-md);
-  padding-bottom: var(--mantine-spacing-xs);
   margin-top: var(--mantine-spacing-md);
-  margin-bottom: var(--mantine-spacing-md);
-  border: 1px solid var(--mantine-color-dark-5);
-  box-shadow: var(--mantine-shadow-sm);
 }
 .link {
   color: var(--mantine-color-blue-6);
diff --git a/src/pages/admin/settings.tsx b/src/pages/admin/settings.tsx
index 675d077..8d9b6d0 100644
--- a/src/pages/admin/settings.tsx
+++ b/src/pages/admin/settings.tsx
@@ -9,6 +9,7 @@ import {
   Group,
   ActionIcon,
   MultiSelect,
+  Card,
 } from "@mantine/core";
 import { useDocumentTitle } from "@mantine/hooks";
 import { showNotification } from "@mantine/notifications";
@@ -156,237 +157,239 @@ const AdminSettingsPage = () => {
 
   return (
     <Authorization allowedRoles={[ROLES.ARCHIVER, ROLES.EDITOR, ROLES.ADMIN]}>
-      <div>
-        <Container className={classes.settingsSections} size="xl">
-          <div className={classes.header}>
-            <div>
-              <Title order={2}>Settings</Title>
-              <Text>
-                Visit the{" "}
-                <a
-                  className={classes.link}
-                  href="https://github.com/Zibbp/ganymede/wiki/Application-Settings"
-                  target="_blank"
-                >
-                  wiki
-                </a>{" "}
-                for documentation regarding each setting.
-              </Text>
+      <Container>
+        <div>
+          <Card withBorder p="xl" radius="md" className={classes.settingsSections} >
+            <div className={classes.header}>
+              <div>
+                <Title order={2}>Settings</Title>
+                <Text>
+                  Visit the{" "}
+                  <a
+                    className={classes.link}
+                    href="https://github.com/Zibbp/ganymede/wiki/Application-Settings"
+                    target="_blank"
+                  >
+                    wiki
+                  </a>{" "}
+                  for documentation regarding each setting.
+                </Text>
+              </div>
             </div>
-          </div>
-          <div>
             <div>
-              <Title order={3}>Core</Title>
-              <Switch
-                mt={5}
-                checked={registrationEnabled}
-                onChange={(event) =>
-                  setRegistrationEnabled(event.currentTarget.checked)
-                }
-                label="Registration Enabled"
-              />
+              <div>
+                <Title order={3}>Core</Title>
+                <Switch
+                  mt={5}
+                  checked={registrationEnabled}
+                  onChange={(event) =>
+                    setRegistrationEnabled(event.currentTarget.checked)
+                  }
+                  label="Registration Enabled"
+                />
 
+                <Button
+                  mt={15}
+                  onClick={() => openDrawer()}
+                  fullWidth
+                  radius="md"
+                  size="md"
+                  variant="outline"
+                  color="orange"
+                >
+                  Notification Settings
+                </Button>
+              </div>
+              <div>
+                <Title mt={15} order={3}>
+                  Archive
+                </Title>
+                <Text size="sm">Convert the archived mp4 to a HLS playlist.</Text>
+                <Switch
+                  mt={5}
+                  checked={saveAsHls}
+                  onChange={(event) => setSaveAsHls(event.currentTarget.checked)}
+                  label="Convert to HLS"
+                />
+                <Button
+                  mt={15}
+                  onClick={() => openStorageTemplateDrawer()}
+                  fullWidth
+                  radius="md"
+                  size="md"
+                  variant="outline"
+                  color="orange"
+                >
+                  Storage Template Settings
+                </Button>
+              </div>
+              <div>
+                <Title mt={15} order={3}>
+                  Video
+                </Title>
+
+                <TextInput
+                  mt={5}
+                  value={twitchToken}
+                  onChange={(event) => setTwitchToken(event.currentTarget.value)}
+                  placeholder="abcdefg1234567890"
+                  label="Twitch Token"
+                  description="Supply your Twitch token for downloading ad-free livestreams and subscriber only videos."
+                />
+                <TextInput
+                  mt={5}
+                  value={postVideoFFmpegArgs}
+                  onChange={(event) =>
+                    setPostVideoFFmpegArgs(event.currentTarget.value)
+                  }
+                  placeholder="-c:v copy -c:a copy"
+                  label="Video Convert FFmpeg Args"
+                  description="Post video download ffmpeg args."
+                />
+              </div>
+              <div>
+                <Title mt={15} order={3}>
+                  Livestream
+                </Title>
+                <TextInput
+                  mt={5}
+                  value={streamlinkLiveArgs}
+                  onChange={(event) =>
+                    setStreamlinkLiveArgs(event.currentTarget.value)
+                  }
+                  placeholder="--force-progress,--force,--twitch-low-latency,--twitch-disable-hosting"
+                  label="Streamlink Parameters"
+                  description="For live streams. Must be comma separated."
+                />
+
+                <Text mt={5} mb={5}>
+                  Proxies
+                </Text>
+                <Text size="sm">
+                  Archive livestreams through a proxy to prevent ads. Your Twitch
+                  token will <b>not</b> be sent to the proxy.
+                </Text>
+                <Switch
+                  label="Enable proxy"
+                  color="violet"
+                  checked={proxyEnabled}
+                  onChange={(event) =>
+                    setProxyEnabled(event.currentTarget.checked)
+                  }
+                />
+                {proxyList.map((proxy, index) => (
+                  <div key={index} className={classes.proxyList}>
+                    <TextInput
+                      className={classes.proxyInput}
+                      placeholder="https://proxy.url"
+                      value={proxy.url}
+                      onChange={(event) => {
+                        const newProxyList = [...proxyList];
+                        newProxyList[index].url = event.currentTarget.value;
+                        setProxyList(newProxyList);
+                      }}
+                      label="Proxy URL"
+                    />
+                    <TextInput
+                      className={classes.proxyInput}
+                      value={proxy.header}
+                      onChange={(event) => {
+                        const newProxyList = [...proxyList];
+                        newProxyList[index].header = event.currentTarget.value;
+                        setProxyList(newProxyList);
+                      }}
+                      label="Header"
+                    />
+                    <ActionIcon
+                      color="red"
+                      size="lg"
+                      mt={20}
+                      onClick={() => {
+                        const newProxyList = [...proxyList];
+                        newProxyList.splice(index, 1);
+                        setProxyList(newProxyList);
+                      }}
+                    >
+                      <IconTrash size="1.125rem" />
+                    </ActionIcon>
+                  </div>
+                ))}
+                <Button
+                  onClick={() => {
+                    const newProxyList = [...proxyList];
+                    newProxyList.push({ url: "", header: "" });
+                    setProxyList(newProxyList);
+                  }}
+                  mt={10}
+                  leftIcon={<IconPlus size="1rem" />}
+                  color="violet"
+                >
+                  Add
+                </Button>
+                {/* proxy whitelist */}
+                <MultiSelect
+                  data={channelData}
+                  value={proxyWhitelist}
+                  onChange={setProxyWhitelist}
+                  label="Whitelist Channels"
+                  description="These channels will not use the proxy if enabled, instead your Twitch token will be used. Select channels that you are subscribed to."
+                  placeholder="Select channels"
+                />
+              </div>
+              <div>
+                <Title mt={15} order={3}>
+                  Chat
+                </Title>
+
+                <TextInput
+                  value={chatRenderArgs}
+                  onChange={(event) =>
+                    setChatRenderArgs(event.currentTarget.value)
+                  }
+                  placeholder="-h 1440 -w 340 --framerate 30 --font Inter --font-size 13 --badge-filter 96"
+                  label="Chat Render Args"
+                  description="TwitchDownloader chat render args."
+                />
+              </div>
               <Button
-                mt={15}
-                onClick={() => openDrawer()}
-                fullWidth
-                radius="md"
-                size="md"
-                variant="outline"
-                color="orange"
-              >
-                Notification Settings
-              </Button>
-            </div>
-            <div>
-              <Title mt={15} order={3}>
-                Archive
-              </Title>
-              <Text size="sm">Convert the archived mp4 to a HLS playlist.</Text>
-              <Switch
-                mt={5}
-                checked={saveAsHls}
-                onChange={(event) => setSaveAsHls(event.currentTarget.checked)}
-                label="Convert to HLS"
-              />
-              <Button
-                mt={15}
-                onClick={() => openStorageTemplateDrawer()}
+                onClick={() => saveSettings.mutate()}
+                loading={loading}
                 fullWidth
                 radius="md"
+                mt="md"
                 size="md"
-                variant="outline"
-                color="orange"
-              >
-                Storage Template Settings
-              </Button>
-            </div>
-            <div>
-              <Title mt={15} order={3}>
-                Video
-              </Title>
-
-              <TextInput
-                mt={5}
-                value={twitchToken}
-                onChange={(event) => setTwitchToken(event.currentTarget.value)}
-                placeholder="abcdefg1234567890"
-                label="Twitch Token"
-                description="Supply your Twitch token for downloading ad-free livestreams and subscriber only videos."
-              />
-              <TextInput
-                mt={5}
-                value={postVideoFFmpegArgs}
-                onChange={(event) =>
-                  setPostVideoFFmpegArgs(event.currentTarget.value)
-                }
-                placeholder="-c:v copy -c:a copy"
-                label="Video Convert FFmpeg Args"
-                description="Post video download ffmpeg args."
-              />
-            </div>
-            <div>
-              <Title mt={15} order={3}>
-                Livestream
-              </Title>
-              <TextInput
-                mt={5}
-                value={streamlinkLiveArgs}
-                onChange={(event) =>
-                  setStreamlinkLiveArgs(event.currentTarget.value)
-                }
-                placeholder="--force-progress,--force,--twitch-low-latency,--twitch-disable-hosting"
-                label="Streamlink Parameters"
-                description="For live streams. Must be comma separated."
-              />
-
-              <Text mt={5} mb={5}>
-                Proxies
-              </Text>
-              <Text size="sm">
-                Archive livestreams through a proxy to prevent ads. Your Twitch
-                token will <b>not</b> be sent to the proxy.
-              </Text>
-              <Switch
-                label="Enable proxy"
-                color="violet"
-                checked={proxyEnabled}
-                onChange={(event) =>
-                  setProxyEnabled(event.currentTarget.checked)
-                }
-              />
-              {proxyList.map((proxy, index) => (
-                <div key={index} className={classes.proxyList}>
-                  <TextInput
-                    className={classes.proxyInput}
-                    placeholder="https://proxy.url"
-                    value={proxy.url}
-                    onChange={(event) => {
-                      const newProxyList = [...proxyList];
-                      newProxyList[index].url = event.currentTarget.value;
-                      setProxyList(newProxyList);
-                    }}
-                    label="Proxy URL"
-                  />
-                  <TextInput
-                    className={classes.proxyInput}
-                    value={proxy.header}
-                    onChange={(event) => {
-                      const newProxyList = [...proxyList];
-                      newProxyList[index].header = event.currentTarget.value;
-                      setProxyList(newProxyList);
-                    }}
-                    label="Header"
-                  />
-                  <ActionIcon
-                    color="red"
-                    size="lg"
-                    mt={20}
-                    onClick={() => {
-                      const newProxyList = [...proxyList];
-                      newProxyList.splice(index, 1);
-                      setProxyList(newProxyList);
-                    }}
-                  >
-                    <IconTrash size="1.125rem" />
-                  </ActionIcon>
-                </div>
-              ))}
-              <Button
-                onClick={() => {
-                  const newProxyList = [...proxyList];
-                  newProxyList.push({ url: "", header: "" });
-                  setProxyList(newProxyList);
-                }}
-                mt={10}
-                leftIcon={<IconPlus size="1rem" />}
                 color="violet"
               >
-                Add
+                Save
               </Button>
-              {/* proxy whitelist */}
-              <MultiSelect
-                data={channelData}
-                value={proxyWhitelist}
-                onChange={setProxyWhitelist}
-                label="Whitelist Channels"
-                description="These channels will not use the proxy if enabled, instead your Twitch token will be used. Select channels that you are subscribed to."
-                placeholder="Select channels"
-              />
-            </div>
-            <div>
-              <Title mt={15} order={3}>
-                Chat
-              </Title>
-
-              <TextInput
-                value={chatRenderArgs}
-                onChange={(event) =>
-                  setChatRenderArgs(event.currentTarget.value)
-                }
-                placeholder="-h 1440 -w 340 --framerate 30 --font Inter --font-size 13 --badge-filter 96"
-                label="Chat Render Args"
-                description="TwitchDownloader chat render args."
-              />
             </div>
-            <Button
-              onClick={() => saveSettings.mutate()}
-              loading={loading}
-              fullWidth
-              radius="md"
-              mt="md"
-              size="md"
-              color="violet"
-            >
-              Save
-            </Button>
-          </div>
-        </Container>
-      </div>
-      <Drawer
-        className={classes.notificationDrawer}
-        opened={drawerOpened}
-        onClose={() => setDrawerOpened(false)}
-        title="Notification Settings"
-        padding="xl"
-        size="xl"
-        position="right"
-      >
-        <AdminNotificationsDrawer handleClose={closeDrawerCallback} />
-      </Drawer>
-      <Drawer
-        className={classes.notificationDrawer}
-        opened={storageTemplateDrawerOpened}
-        onClose={() => setStorageTemplateDrawerOpened(false)}
-        title="Storage Template Settings"
-        padding="xl"
-        size="xl"
-        position="right"
-      >
-        <AdminStorageSettingsDrawer
-          handleClose={closeStorageTemplateDrawerCallback}
-        />
-      </Drawer>
+          </Card>
+        </div>
+        <Drawer
+          className={classes.notificationDrawer}
+          opened={drawerOpened}
+          onClose={() => setDrawerOpened(false)}
+          title="Notification Settings"
+          padding="xl"
+          size="xl"
+          position="right"
+        >
+          <AdminNotificationsDrawer handleClose={closeDrawerCallback} />
+        </Drawer>
+        <Drawer
+          className={classes.notificationDrawer}
+          opened={storageTemplateDrawerOpened}
+          onClose={() => setStorageTemplateDrawerOpened(false)}
+          title="Storage Template Settings"
+          padding="xl"
+          size="xl"
+          position="right"
+        >
+          <AdminStorageSettingsDrawer
+            handleClose={closeStorageTemplateDrawerCallback}
+          />
+        </Drawer>
+      </Container>
     </Authorization>
   );
 };
diff --git a/src/pages/admin/tasks.module.css b/src/pages/admin/tasks.module.css
index dd79a6b..8d65c40 100644
--- a/src/pages/admin/tasks.module.css
+++ b/src/pages/admin/tasks.module.css
@@ -8,15 +8,7 @@
   order: 2
 }
 .settingsSections {
-  background-color: var(--mantine-color-dark-6);
-  border-radius: var(--mantine-radius-md);
-  padding-left: var(--mantine-spacing-md);
-  padding-right: var(--mantine-spacing-md);
-  padding-bottom: var(--mantine-spacing-xs);
   margin-top: var(--mantine-spacing-md);
-  margin-bottom: var(--mantine-spacing-md);
-  border: 1px solid var(--mantine-color-dark-5);
-  box-shadow: var(--mantine-shadow-sm);
 }
 .taskItem {
   display: flex;
diff --git a/src/pages/admin/tasks.tsx b/src/pages/admin/tasks.tsx
index fe668c8..36a12b0 100644
--- a/src/pages/admin/tasks.tsx
+++ b/src/pages/admin/tasks.tsx
@@ -10,6 +10,7 @@ import {
   Grid,
   ActionIcon,
   Tooltip,
+  Card,
 } from "@mantine/core";
 import { useDocumentTitle } from "@mantine/hooks";
 import { showNotification } from "@mantine/notifications";
@@ -83,276 +84,280 @@ const AdminTasksPage = () => {
     <Authorization allowedRoles={[ROLES.ARCHIVER, ROLES.EDITOR, ROLES.ADMIN]}>
       <div>
         <Container className={classes.settingsSections} size="xl">
-          <div className={classes.header}>
+          <Card withBorder p="xl" radius="md">
+            <div className={classes.header}>
+              <div>
+                <Title order={2}>Tasks</Title>
+              </div>
+            </div>
             <div>
-              <Title order={2}>Tasks</Title>
+              <div className={classes.sectionHeader}>
+                <Title order={4}>Watched Channels</Title>
+              </div>
+              <Grid className={classes.taskItem}>
+                <Grid.Col span={10}>
+                  <div>
+                    <span>
+                      <Text mr={5}>Check watched channels for live streams</Text>
+                      <Text italic size="xs">
+                        Occurs at interval set in config.
+                      </Text>
+                    </span>
+                  </div>
+                </Grid.Col>
+                <Grid.Col span={2}>
+                  <Tooltip label="Start Task">
+                    <ActionIcon
+                      onClick={() => startTask.mutate("check_live")}
+                      loading={loading}
+                      color="green"
+                      variant="filled"
+                      size="lg"
+                    >
+                      <IconRefresh size={24} />
+                    </ActionIcon>
+                  </Tooltip>
+                </Grid.Col>
+              </Grid>
+              <Grid className={classes.taskItem}>
+                <Grid.Col span={10}>
+                  <div>
+                    <span>
+                      <Text mr={5}>
+                        Check watched channels for new videos to archive
+                      </Text>
+                      <Text italic size="xs">
+                        Occurs at interval set in config.
+                      </Text>
+                    </span>
+                  </div>
+                </Grid.Col>
+                <Grid.Col span={2}>
+                  <Tooltip label="Start Task">
+                    <ActionIcon
+                      onClick={() => startTask.mutate("check_vod")}
+                      loading={loading}
+                      color="green"
+                      variant="filled"
+                      size="lg"
+                    >
+                      <IconRefresh size={24} />
+                    </ActionIcon>
+                  </Tooltip>
+                </Grid.Col>
+              </Grid>
             </div>
-          </div>
-          <div>
-            <div className={classes.sectionHeader}>
-              <Title order={4}>Watched Channels</Title>
+            {/* Queue */}
+            <div>
+              <div className={classes.sectionHeader}>
+                <Title order={4}>Queue</Title>
+              </div>
+              <Grid className={classes.taskItem}>
+                <Grid.Col span={10}>
+                  <div>
+                    <span>
+                      <Text mr={5}>Start stuck queue items</Text>
+                      <Text italic size="xs">
+                        Occurs every hour.
+                      </Text>
+                    </span>
+                  </div>
+                </Grid.Col>
+                <Grid.Col span={2}>
+                  <Tooltip label="Start Task">
+                    <ActionIcon
+                      onClick={() => startTask.mutate("queue_hold_check")}
+                      loading={loading}
+                      color="green"
+                      variant="filled"
+                      size="lg"
+                    >
+                      <IconRefresh size={24} />
+                    </ActionIcon>
+                  </Tooltip>
+                </Grid.Col>
+              </Grid>
             </div>
-            <Grid className={classes.taskItem}>
-              <Grid.Col span={10}>
-                <div>
-                  <span>
-                    <Text mr={5}>Check watched channels for live streams</Text>
-                    <Text italic size="xs">
-                      Occurs at interval set in config.
-                    </Text>
-                  </span>
-                </div>
-              </Grid.Col>
-              <Grid.Col span={2}>
-                <Tooltip label="Start Task">
-                  <ActionIcon
-                    onClick={() => startTask.mutate("check_live")}
-                    loading={loading}
-                    color="green"
-                    variant="filled"
-                    size="lg"
-                  >
-                    <IconRefresh size={24} />
-                  </ActionIcon>
-                </Tooltip>
-              </Grid.Col>
-            </Grid>
-            <Grid className={classes.taskItem}>
-              <Grid.Col span={10}>
-                <div>
-                  <span>
-                    <Text mr={5}>
-                      Check watched channels for new videos to archive
-                    </Text>
-                    <Text italic size="xs">
-                      Occurs at interval set in config.
-                    </Text>
-                  </span>
-                </div>
-              </Grid.Col>
-              <Grid.Col span={2}>
-                <Tooltip label="Start Task">
-                  <ActionIcon
-                    onClick={() => startTask.mutate("check_vod")}
-                    loading={loading}
-                    color="green"
-                    variant="filled"
-                    size="lg"
-                  >
-                    <IconRefresh size={24} />
-                  </ActionIcon>
-                </Tooltip>
-              </Grid.Col>
-            </Grid>
-          </div>
-          {/* Queue */}
-          <div>
-            <div className={classes.sectionHeader}>
-              <Title order={4}>Queue</Title>
+            {/* Ganymede */}
+            <div>
+              <div className={classes.sectionHeader}>
+                <Title order={4}>Ganymede</Title>
+              </div>
+              <Grid className={classes.taskItem}>
+                <Grid.Col span={10}>
+                  <div>
+                    <span>
+                      <Text mr={5}>Authenticate with Twitch</Text>
+                      <Text italic size="xs">
+                        Occurs every 7 days.
+                      </Text>
+                    </span>
+                  </div>
+                </Grid.Col>
+                <Grid.Col span={2}>
+                  <Tooltip label="Start Task">
+                    <ActionIcon
+                      onClick={() => startTask.mutate("twitch_auth")}
+                      loading={loading}
+                      color="green"
+                      variant="filled"
+                      size="lg"
+                    >
+                      <IconRefresh size={24} />
+                    </ActionIcon>
+                  </Tooltip>
+                </Grid.Col>
+              </Grid>
+              <Grid className={classes.taskItem}>
+                <Grid.Col span={10}>
+                  <div>
+                    <span>
+                      <Text mr={5}>Get JWKS</Text>
+                      <Text italic size="xs">
+                        Occurs every day.
+                      </Text>
+                    </span>
+                  </div>
+                </Grid.Col>
+                <Grid.Col span={2}>
+                  <Tooltip label="Start Task">
+                    <ActionIcon
+                      onClick={() => startTask.mutate("get_jwks")}
+                      loading={loading}
+                      color="green"
+                      variant="filled"
+                      size="lg"
+                    >
+                      <IconRefresh size={24} />
+                    </ActionIcon>
+                  </Tooltip>
+                </Grid.Col>
+              </Grid>
             </div>
-            <Grid className={classes.taskItem}>
-              <Grid.Col span={10}>
-                <div>
-                  <span>
-                    <Text mr={5}>Start stuck queue items</Text>
-                    <Text italic size="xs">
-                      Occurs every hour.
-                    </Text>
-                  </span>
-                </div>
-              </Grid.Col>
-              <Grid.Col span={2}>
-                <Tooltip label="Start Task">
-                  <ActionIcon
-                    onClick={() => startTask.mutate("queue_hold_check")}
-                    loading={loading}
-                    color="green"
-                    variant="filled"
-                    size="lg"
-                  >
-                    <IconRefresh size={24} />
-                  </ActionIcon>
-                </Tooltip>
-              </Grid.Col>
-            </Grid>
-          </div>
-          {/* Ganymede */}
-          <div>
-            <div className={classes.sectionHeader}>
-              <Title order={4}>Ganymede</Title>
+            {/* Storage */}
+            <div>
+              <div className={classes.sectionHeader}>
+                <Title order={4}>Storage</Title>
+              </div>
+              <Grid className={classes.taskItem}>
+                <Grid.Col span={10}>
+                  <div>
+                    <span>
+                      <Text mr={5}>Storage Template Migration</Text>
+                      <Text italic size="xs">
+                        Apply your current storage template to existing files.
+                        Read the{" "}
+                        <a
+                          href="https://github.com/Zibbp/ganymede/wiki/Storage-Templates-and-Migration"
+                          style={{ color: "#228be6" }}
+                          target="_blank"
+                        >
+                          docs
+                        </a>{" "}
+                        before starting.
+                      </Text>
+                    </span>
+                  </div>
+                </Grid.Col>
+                <Grid.Col span={2}>
+                  <Tooltip label="Start Task">
+                    <ActionIcon
+                      onClick={() => startTask.mutate("storage_migration")}
+                      loading={loading}
+                      color="green"
+                      variant="filled"
+                      size="lg"
+                    >
+                      <IconRefresh size={24} />
+                    </ActionIcon>
+                  </Tooltip>
+                </Grid.Col>
+              </Grid>
             </div>
-            <Grid className={classes.taskItem}>
-              <Grid.Col span={10}>
-                <div>
-                  <span>
-                    <Text mr={5}>Authenticate with Twitch</Text>
-                    <Text italic size="xs">
-                      Occurs every 7 days.
-                    </Text>
-                  </span>
-                </div>
-              </Grid.Col>
-              <Grid.Col span={2}>
-                <Tooltip label="Start Task">
-                  <ActionIcon
-                    onClick={() => startTask.mutate("twitch_auth")}
-                    loading={loading}
-                    color="green"
-                    variant="filled"
-                    size="lg"
-                  >
-                    <IconRefresh size={24} />
-                  </ActionIcon>
-                </Tooltip>
-              </Grid.Col>
-            </Grid>
-            <Grid className={classes.taskItem}>
-              <Grid.Col span={10}>
-                <div>
-                  <span>
-                    <Text mr={5}>Get JWKS</Text>
-                    <Text italic size="xs">
-                      Occurs every day.
-                    </Text>
-                  </span>
-                </div>
-              </Grid.Col>
-              <Grid.Col span={2}>
-                <Tooltip label="Start Task">
-                  <ActionIcon
-                    onClick={() => startTask.mutate("get_jwks")}
-                    loading={loading}
-                    color="green"
-                    variant="filled"
-                    size="lg"
-                  >
-                    <IconRefresh size={24} />
-                  </ActionIcon>
-                </Tooltip>
-              </Grid.Col>
-            </Grid>
-          </div>
-          {/* Storage */}
-          <div>
-            <div className={classes.sectionHeader}>
-              <Title order={4}>Storage</Title>
+            {/* Videos */}
+            <div>
+              <div className={classes.sectionHeader}>
+                <Title order={4}>Videos</Title>
+              </div>
+              <Grid className={classes.taskItem}>
+                <Grid.Col span={10}>
+                  <div>
+                    <span>
+                      <Text mr={5}>Prune Videos</Text>
+                      <Text italic size="xs">
+                        Prune videos from channels that have retention settings
+                        set.
+                      </Text>
+                      <Text italic size="xs">
+                        Occurs every day at 01:00.
+                      </Text>
+                    </span>
+                  </div>
+                </Grid.Col>
+                <Grid.Col span={2}>
+                  <Tooltip label="Start Task">
+                    <ActionIcon
+                      onClick={() => startTask.mutate("prune_videos")}
+                      loading={loading}
+                      color="green"
+                      variant="filled"
+                      size="lg"
+                    >
+                      <IconRefresh size={24} />
+                    </ActionIcon>
+                  </Tooltip>
+                </Grid.Col>
+              </Grid>
+            </div>
+          </Card>
+        </Container>
+        <Container className={classes.settingsSections} size="xl">
+          <Card withBorder p="xl" radius="md">
+            <div className={classes.header}>
+              <div>
+                <Title order={2}>Workflows</Title>
+              </div>
             </div>
             <Grid className={classes.taskItem}>
               <Grid.Col span={10}>
                 <div>
                   <span>
-                    <Text mr={5}>Storage Template Migration</Text>
-                    <Text italic size="xs">
-                      Apply your current storage template to existing files.
-                      Read the{" "}
-                      <a
-                        href="https://github.com/Zibbp/ganymede/wiki/Storage-Templates-and-Migration"
-                        style={{ color: "#228be6" }}
-                        target="_blank"
-                      >
-                        docs
-                      </a>{" "}
-                      before starting.
+                    <Text>Save Chapters for Twitch Videos</Text>
+                    <Text size="xs">
+                      Save chapters for already archived Twitch videos.
                     </Text>
                   </span>
                 </div>
               </Grid.Col>
               <Grid.Col span={2}>
-                <Tooltip label="Start Task">
-                  <ActionIcon
-                    onClick={() => startTask.mutate("storage_migration")}
-                    loading={loading}
-                    color="green"
-                    variant="filled"
-                    size="lg"
-                  >
-                    <IconRefresh size={24} />
+                <Tooltip label="Start Workflow">
+                  <ActionIcon variant="filled" size="lg" color="green" aria-label="Settings" loading={workflowLoading} onClick={() => startWorkflow.mutate("SaveTwitchVideoChapters")}>
+                    <IconPlayerPlay stroke={2} />
                   </ActionIcon>
                 </Tooltip>
               </Grid.Col>
-            </Grid>
-          </div>
-          {/* Videos */}
-          <div>
-            <div className={classes.sectionHeader}>
-              <Title order={4}>Videos</Title>
-            </div>
-            <Grid className={classes.taskItem}>
               <Grid.Col span={10}>
                 <div>
                   <span>
-                    <Text mr={5}>Prune Videos</Text>
-                    <Text italic size="xs">
-                      Prune videos from channels that have retention settings
-                      set.
-                    </Text>
-                    <Text italic size="xs">
-                      Occurs every day at 01:00.
+                    <Text>Update Live Stream Archives with VOD IDs</Text>
+                    <Text size="xs">
+                      Attempt to update past live stream archives with their corresponding vod ID (automatically does this after live archive finishes).
                     </Text>
                   </span>
                 </div>
               </Grid.Col>
               <Grid.Col span={2}>
-                <Tooltip label="Start Task">
-                  <ActionIcon
-                    onClick={() => startTask.mutate("prune_videos")}
-                    loading={loading}
-                    color="green"
-                    variant="filled"
-                    size="lg"
-                  >
-                    <IconRefresh size={24} />
+                <Tooltip label="Start Workflow">
+                  <ActionIcon variant="filled" size="lg" color="green" aria-label="Settings" loading={workflowLoading} onClick={() => startWorkflow.mutate("UpdateTwitchLiveStreamArchivesWithVodIds")}>
+                    <IconPlayerPlay stroke={2} />
                   </ActionIcon>
                 </Tooltip>
               </Grid.Col>
             </Grid>
-          </div>
-        </Container>
-        <Container className={classes.settingsSections} size="xl">
-          <div className={classes.header}>
-            <div>
-              <Title order={2}>Workflows</Title>
-            </div>
-          </div>
-          <Grid className={classes.taskItem}>
-            <Grid.Col span={10}>
-              <div>
-                <span>
-                  <Text>Save Chapters for Twitch Videos</Text>
-                  <Text size="xs">
-                    Save chapters for already archived Twitch videos.
-                  </Text>
-                </span>
-              </div>
-            </Grid.Col>
-            <Grid.Col span={2}>
-              <Tooltip label="Start Workflow">
-                <ActionIcon variant="filled" size="lg" color="green" aria-label="Settings" loading={workflowLoading} onClick={() => startWorkflow.mutate("SaveTwitchVideoChapters")}>
-                  <IconPlayerPlay stroke={2} />
-                </ActionIcon>
-              </Tooltip>
-            </Grid.Col>
-            <Grid.Col span={10}>
-              <div>
-                <span>
-                  <Text>Update Live Stream Archives with VOD IDs</Text>
-                  <Text size="xs">
-                    Attempt to update past live stream archives with their corresponding vod ID (automatically does this after live archive finishes).
-                  </Text>
-                </span>
-              </div>
-            </Grid.Col>
-            <Grid.Col span={2}>
-              <Tooltip label="Start Workflow">
-                <ActionIcon variant="filled" size="lg" color="green" aria-label="Settings" loading={workflowLoading} onClick={() => startWorkflow.mutate("UpdateTwitchLiveStreamArchivesWithVodIds")}>
-                  <IconPlayerPlay stroke={2} />
-                </ActionIcon>
-              </Tooltip>
-            </Grid.Col>
-          </Grid>
+          </Card>
         </Container>
       </div>
-    </Authorization>
+    </Authorization >
   );
 };
 
diff --git a/src/pages/archive/index.tsx b/src/pages/archive/index.tsx
index 1006231..00c8616 100644
--- a/src/pages/archive/index.tsx
+++ b/src/pages/archive/index.tsx
@@ -240,7 +240,7 @@ const ArchivePage = () => {
                     value={archiveQuality}
                     onChange={setArchiveQuality}
                     data={qualityOptions}
-                    dropdownPosition="bottom"
+                    comboboxProps={{ position: 'bottom', middlewares: { flip: false, shift: false } }}
                   />
                   <Switch
                     checked={archiveChat}
diff --git a/src/pages/channels/index.tsx b/src/pages/channels/index.tsx
index a9ddc61..d0482b1 100644
--- a/src/pages/channels/index.tsx
+++ b/src/pages/channels/index.tsx
@@ -33,13 +33,6 @@ const ChannelsPage = () => {
               <ChannelCard channel={channel} key={channel.id}></ChannelCard>
             ))}
           </SimpleGrid>
-          {/* <Grid>
-            {data.map((channel: any) => (
-              <Grid.Col key={channel.id} md={6} lg={2}>
-                <ChannelCard channel={channel}></ChannelCard>
-              </Grid.Col>
-            ))}
-          </Grid> */}
         </div>
       </Container>
     </div>
diff --git a/src/pages/profile.module.css b/src/pages/profile.module.css
deleted file mode 100644
index e960375..0000000
--- a/src/pages/profile.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.card {
-  background-color: var(--mantine-color-dark-7);
-}
-.avatar {
-  border: 2px solid var(--mantine-color-dark-7);
-}
\ No newline at end of file
diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx
index 495240a..6b983e0 100644
--- a/src/pages/profile.tsx
+++ b/src/pages/profile.tsx
@@ -19,7 +19,6 @@ import {
 import { useDocumentTitle, useInputState } from "@mantine/hooks";
 import { showNotification } from "@mantine/notifications";
 import { useApi } from "../hooks/useApi";
-import classes from "./profile.module.css"
 
 const ProfilePage = () => {
   const user = useUserStore((state) => state);
@@ -131,19 +130,19 @@ const ProfilePage = () => {
     <Authorization>
       <div>
         <Center mt={25}>
-          <Card withBorder p="xl" radius="md" className={classes.card}>
-            <Text align="center" size="lg" weight={500} mt="sm">
+          <Card withBorder p="xl" radius="md" >
+            <Text ta="center" size="lg" w={500} mt="sm">
               {user.username}
             </Text>
-            <Text align="center" size="sm" color="dimmed">
+            <Text ta="center" size="sm" color="dimmed">
               {user.role}
             </Text>
             {user.oauth && (
-              <Text align="center" size="sm" color="dimmed">
+              <Text ta="center" size="sm" color="dimmed">
                 Managed via SSO
               </Text>
             )}
-            <Text align="center" size="sm" color="dimmed">
+            <Text ta="center" size="sm" color="dimmed">
               {new Date(user.createdAt).toLocaleDateString()}
             </Text>
 
diff --git a/src/pages/workflows/Workflows.module.css b/src/pages/workflows/Workflows.module.css
index 4d52241..dc96b0c 100644
--- a/src/pages/workflows/Workflows.module.css
+++ b/src/pages/workflows/Workflows.module.css
@@ -1,7 +1,6 @@
 .infoBox {
   border-radius: var(--mantine-radius-md);
   padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
-  background-color: #19191d;
 }
 .header {
   display: flex;
diff --git a/src/pages/workflows/[workflowId]/[runId].tsx b/src/pages/workflows/[workflowId]/[runId].tsx
index 678567b..ddf2d3f 100644
--- a/src/pages/workflows/[workflowId]/[runId].tsx
+++ b/src/pages/workflows/[workflowId]/[runId].tsx
@@ -3,7 +3,7 @@ import { useParams } from 'next/navigation';
 import React, { useEffect, useState } from 'react'
 import { useApi } from '../../../hooks/useApi';
 import GanymedeLoader from '../../../components/Utils/GanymedeLoader';
-import { Text, Container, Paper, SimpleGrid, Title, ActionIcon, Tooltip } from '@mantine/core';
+import { Text, Container, Paper, SimpleGrid, Title, ActionIcon, Tooltip, Card } from '@mantine/core';
 import classes from "../Workflows.module.css"
 import dayjs from 'dayjs';
 import duration from "dayjs/plugin/duration";
@@ -117,81 +117,82 @@ const WorkflowInspectPage = (props: Props) => {
   return (
     <div>
       <Container size="7xl">
+        <Card withBorder p="xl" radius="md" mt={10}>
 
-        <div className={classes.infoBox}>
+          <div className={classes.infoBox}>
 
-          <div className={classes.header}>
-            <div>
-              <Title>Summary</Title>
-            </div>
-            <div>
+            <div className={classes.header}>
+              <div>
+                <Title>Summary</Title>
+              </div>
+              <div>
 
+              </div>
             </div>
-          </div>
 
-          <div>
-            <Text size="lg" fw={700}>Actions</Text>
             <div>
-              <Tooltip label="Restart Workflow">
-                <ActionIcon variant="filled" color="orange" aria-label="Restart workflow" onClick={() => restartWorkflow()} loading={restartIconLoading}>
-                  <IconRefresh stroke={1.5} />
-                </ActionIcon>
-              </Tooltip>
-            </div>
-          </div>
-
-          {workflowVideoId && (
-            <SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
-              <div>
-                <Text size="lg" fw={700}>Video ID</Text>
-                <Text>{workflowVideoId.video_id}</Text>
-              </div>
+              <Text size="lg" fw={700}>Actions</Text>
               <div>
-                <Text size="lg" fw={700}>External Video ID</Text>
-                <Text>{workflowVideoId.external_video_id}</Text>
+                <Tooltip label="Restart Workflow">
+                  <ActionIcon variant="filled" color="orange" aria-label="Restart workflow" onClick={() => restartWorkflow()} loading={restartIconLoading}>
+                    <IconRefresh stroke={1.5} />
+                  </ActionIcon>
+                </Tooltip>
               </div>
-            </SimpleGrid>
+            </div>
 
-          )}
+            {workflowVideoId && (
+              <SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
+                <div>
+                  <Text size="lg" fw={700}>Video ID</Text>
+                  <Text>{workflowVideoId.video_id}</Text>
+                </div>
+                <div>
+                  <Text size="lg" fw={700}>External Video ID</Text>
+                  <Text>{workflowVideoId.external_video_id}</Text>
+                </div>
+              </SimpleGrid>
 
+            )}
 
 
-          <SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
-            <div>
-              <Text size="lg" fw={700}>Queue</Text>
-              <Text>{workflowInfo.task_queue}</Text>
-              <Text size="lg" fw={700}>Workflow Type</Text>
-              <Text>{workflowInfo.type.name}</Text>
-              <Text>{workflowInfo.execution.workflow_id}</Text>
-            </div>
-            <div>
-              <Text size="lg" fw={700}>Start & Close Time</Text>
-              <Text>Start Time: {dayjs(workflowInfo.start_time).format("YYYY/MM/DD HH:mm:ss")}</Text>
-              <Text>Close Time: {dayjs(workflowInfo.close_time).format("YYYY/MM/DD HH:mm:ss")}</Text>
-              <Text>Duration: {dayjs
-                .duration(duration, "milliseconds")
-                .format("HH:mm:ss")}</Text>
-            </div>
 
-          </SimpleGrid>
+            <SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
+              <div>
+                <Text size="lg" fw={700}>Queue</Text>
+                <Text>{workflowInfo.task_queue}</Text>
+                <Text size="lg" fw={700}>Workflow Type</Text>
+                <Text>{workflowInfo.type.name}</Text>
+                <Text>{workflowInfo.execution.workflow_id}</Text>
+              </div>
+              <div>
+                <Text size="lg" fw={700}>Start & Close Time</Text>
+                <Text>Start Time: {dayjs(workflowInfo.start_time).format("YYYY/MM/DD HH:mm:ss")}</Text>
+                <Text>Close Time: {dayjs(workflowInfo.close_time).format("YYYY/MM/DD HH:mm:ss")}</Text>
+                <Text>Duration: {dayjs
+                  .duration(duration, "milliseconds")
+                  .format("HH:mm:ss")}</Text>
+              </div>
 
+            </SimpleGrid>
 
-        </div>
 
-        <div className={classes.infoBox}>
+          </div>
 
-          <Title>Events</Title>
+          <div className={classes.infoBox}>
 
+            <Title>Events</Title>
 
-          {workflowHistory.map((event: any) => (
-            <WorkflowEvent event={event} />
-          ))}
 
+            {workflowHistory.map((event: any) => (
+              <WorkflowEvent event={event} />
+            ))}
 
 
 
-        </div>
 
+          </div>
+        </Card>
       </Container>
 
     </div>