diff --git a/package.json b/package.json
index 6d2d336a..c598fcd7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "birdflop",
-  "version": "8.10.2",
+  "version": "8.11.0",
   "homepage": "https://www.birdflop.com",
   "description": "The only 501(c)(3) nonprofit Minecraft server host.",
   "repository": {
@@ -29,18 +29,18 @@
   "devDependencies": {
     "@anuragroy/tailwindcss-animate": "^1.0.6",
     "@builder.io/partytown": "^0.10.2",
-    "@builder.io/qwik": "1.5.5",
-    "@builder.io/qwik-city": "1.5.5",
-    "@luminescent/ui": "0.16.6",
+    "@builder.io/qwik": "1.5.6",
+    "@builder.io/qwik-city": "1.5.6",
+    "@luminescent/ui": "0.18.0",
     "@modular-forms/qwik": "^0.25.0",
     "@types/eslint": "8.56.10",
     "@types/node": "latest",
-    "@typescript-eslint/eslint-plugin": "7.12.0",
-    "@typescript-eslint/parser": "7.12.0",
+    "@typescript-eslint/eslint-plugin": "7.13.0",
+    "@typescript-eslint/parser": "7.13.0",
     "autoprefixer": "10.4.19",
     "chart.js": "^4.4.3",
     "eslint": "8.57.0",
-    "eslint-plugin-qwik": "1.5.5",
+    "eslint-plugin-qwik": "1.5.6",
     "postcss": "^8.4.38",
     "qwik-ionicons": "^1.0.5",
     "qwik-speak": "^0.23.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 77276016..198eb00c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,17 +15,17 @@ importers:
         specifier: ^0.10.2
         version: 0.10.2
       '@builder.io/qwik':
-        specifier: 1.5.5
-        version: 1.5.5(@types/node@20.13.0)(undici@6.18.2)
+        specifier: 1.5.6
+        version: 1.5.6(@types/node@20.13.0)(undici@6.18.2)
       '@builder.io/qwik-city':
-        specifier: 1.5.5
-        version: 1.5.5(@types/node@20.13.0)(rollup@4.18.0)
+        specifier: 1.5.6
+        version: 1.5.6(@types/node@20.13.0)(rollup@4.18.0)
       '@luminescent/ui':
-        specifier: 0.16.6
-        version: 0.16.6
+        specifier: 0.18.0
+        version: 0.18.0
       '@modular-forms/qwik':
         specifier: ^0.25.0
-        version: 0.25.0(@builder.io/qwik-city@1.5.5(@types/node@20.13.0)(rollup@4.18.0))(@builder.io/qwik@1.5.5(@types/node@20.13.0)(undici@6.18.2))
+        version: 0.25.0(@builder.io/qwik-city@1.5.6(@types/node@20.13.0)(rollup@4.18.0))(@builder.io/qwik@1.5.6(@types/node@20.13.0)(undici@6.18.2))
       '@types/eslint':
         specifier: 8.56.10
         version: 8.56.10
@@ -33,11 +33,11 @@ importers:
         specifier: latest
         version: 20.13.0
       '@typescript-eslint/eslint-plugin':
-        specifier: 7.12.0
-        version: 7.12.0(@typescript-eslint/parser@7.12.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)
+        specifier: 7.13.0
+        version: 7.13.0(@typescript-eslint/parser@7.13.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)
       '@typescript-eslint/parser':
-        specifier: 7.12.0
-        version: 7.12.0(eslint@8.57.0)(typescript@5.4.5)
+        specifier: 7.13.0
+        version: 7.13.0(eslint@8.57.0)(typescript@5.4.5)
       autoprefixer:
         specifier: 10.4.19
         version: 10.4.19(postcss@8.4.38)
@@ -48,8 +48,8 @@ importers:
         specifier: 8.57.0
         version: 8.57.0
       eslint-plugin-qwik:
-        specifier: 1.5.5
-        version: 1.5.5(eslint@8.57.0)
+        specifier: 1.5.6
+        version: 1.5.6(eslint@8.57.0)
       postcss:
         specifier: ^8.4.38
         version: 8.4.38
@@ -58,7 +58,7 @@ importers:
         version: 1.0.5
       qwik-speak:
         specifier: ^0.23.0
-        version: 0.23.0(@builder.io/qwik@1.5.5(@types/node@20.13.0)(undici@6.18.2))
+        version: 0.23.0(@builder.io/qwik@1.5.6(@types/node@20.13.0)(undici@6.18.2))
       tailwindcss:
         specifier: ^3.4.4
         version: 3.4.4
@@ -100,12 +100,12 @@ packages:
     engines: {node: '>=18.0.0'}
     hasBin: true
 
-  '@builder.io/qwik-city@1.5.5':
-    resolution: {integrity: sha512-Xi/1WqrB91CpZcAXs43OC87+7h89hJczJp43FXUMrvTHGeUsR/udhpz6SZWI/mHh0PFNx6f0A59tPmtDDzYl0Q==}
+  '@builder.io/qwik-city@1.5.6':
+    resolution: {integrity: sha512-s+GOMWgkbwCKmsEZnoKXhZUEzq4IQy/nqmDC/BJ9ybWA4ILPbxAY+OeiJ4l4U87xuqZxcwqDUXe1Fog4HBOjSA==}
     engines: {node: '>=16.8.0 <18.0.0 || >=18.11'}
 
-  '@builder.io/qwik@1.5.5':
-    resolution: {integrity: sha512-ZgeWVfkgdBcv/SwfB0RJtSR6YCVBnFtZ4dH1yxDqeShzgFrVqeVIE7l7A5wwb0hXtA6ESxskLgui6ayZlKSnWQ==}
+  '@builder.io/qwik@1.5.6':
+    resolution: {integrity: sha512-dBdKrDpJ2qru2pLx/v/E6Jgq6AOMd3SgfpeSl5lStI5xQu/PLacPlkTsUVCy/Wr8XIfTqY/LHTbIywnw4O3Fhw==}
     engines: {node: '>=16.8.0 <18.0.0 || >=18.11'}
     hasBin: true
     peerDependencies:
@@ -606,8 +606,8 @@ packages:
   '@kurkle/color@0.3.2':
     resolution: {integrity: sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==}
 
-  '@luminescent/ui@0.16.6':
-    resolution: {integrity: sha512-pOVeYmn3883MHBJQUHnyyPn+4eTelJZfoCjvgfbjSWwg5O0Z9JhVDGzhR5gdIBoQWRnXtzR8BzHEQpkAgfAmfQ==}
+  '@luminescent/ui@0.18.0':
+    resolution: {integrity: sha512-wP86fg1+oFmb5QfG8lZUhhYOtXFY8T4bqLDH/FpPIyVQPDHi8aI6EiG+aRfvFzzzA1Vzqk7O/MYp58+QSS6CDA==}
     engines: {node: '>=15.0.0'}
 
   '@mdx-js/mdx@3.0.1':
@@ -770,8 +770,8 @@ packages:
   '@types/unist@3.0.2':
     resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==}
 
-  '@typescript-eslint/eslint-plugin@7.12.0':
-    resolution: {integrity: sha512-7F91fcbuDf/d3S8o21+r3ZncGIke/+eWk0EpO21LXhDfLahriZF9CGj4fbAetEjlaBdjdSm9a6VeXbpbT6Z40Q==}
+  '@typescript-eslint/eslint-plugin@7.13.0':
+    resolution: {integrity: sha512-FX1X6AF0w8MdVFLSdqwqN/me2hyhuQg4ykN6ZpVhh1ij/80pTvDKclX1sZB9iqex8SjQfVhwMKs3JtnnMLzG9w==}
     engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^7.0.0
@@ -781,8 +781,8 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/parser@7.12.0':
-    resolution: {integrity: sha512-dm/J2UDY3oV3TKius2OUZIFHsomQmpHtsV0FTh1WO8EKgHLQ1QCADUqscPgTpU+ih1e21FQSRjXckHn3txn6kQ==}
+  '@typescript-eslint/parser@7.13.0':
+    resolution: {integrity: sha512-EjMfl69KOS9awXXe83iRN7oIEXy9yYdqWfqdrFAYAAr6syP8eLEFI7ZE4939antx2mNgPRW/o1ybm2SFYkbTVA==}
     engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
       eslint: ^8.56.0
@@ -791,12 +791,12 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/scope-manager@7.12.0':
-    resolution: {integrity: sha512-itF1pTnN6F3unPak+kutH9raIkL3lhH1YRPGgt7QQOh43DQKVJXmWkpb+vpc/TiDHs6RSd9CTbDsc/Y+Ygq7kg==}
+  '@typescript-eslint/scope-manager@7.13.0':
+    resolution: {integrity: sha512-ZrMCe1R6a01T94ilV13egvcnvVJ1pxShkE0+NDjDzH4nvG1wXpwsVI5bZCvE7AEDH1mXEx5tJSVR68bLgG7Dng==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
-  '@typescript-eslint/type-utils@7.12.0':
-    resolution: {integrity: sha512-lib96tyRtMhLxwauDWUp/uW3FMhLA6D0rJ8T7HmH7x23Gk1Gwwu8UZ94NMXBvOELn6flSPiBrCKlehkiXyaqwA==}
+  '@typescript-eslint/type-utils@7.13.0':
+    resolution: {integrity: sha512-xMEtMzxq9eRkZy48XuxlBFzpVMDurUAfDu5Rz16GouAtXm0TaAoTFzqWUFPPuQYXI/CDaH/Bgx/fk/84t/Bc9A==}
     engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
       eslint: ^8.56.0
@@ -805,12 +805,12 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/types@7.12.0':
-    resolution: {integrity: sha512-o+0Te6eWp2ppKY3mLCU+YA9pVJxhUJE15FV7kxuD9jgwIAa+w/ycGJBMrYDTpVGUM/tgpa9SeMOugSabWFq7bg==}
+  '@typescript-eslint/types@7.13.0':
+    resolution: {integrity: sha512-QWuwm9wcGMAuTsxP+qz6LBBd3Uq8I5Nv8xb0mk54jmNoCyDspnMvVsOxI6IsMmway5d1S9Su2+sCKv1st2l6eA==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
-  '@typescript-eslint/typescript-estree@7.12.0':
-    resolution: {integrity: sha512-5bwqLsWBULv1h6pn7cMW5dXX/Y2amRqLaKqsASVwbBHMZSnHqE/HN4vT4fE0aFsiwxYvr98kqOWh1a8ZKXalCQ==}
+  '@typescript-eslint/typescript-estree@7.13.0':
+    resolution: {integrity: sha512-cAvBvUoobaoIcoqox1YatXOnSl3gx92rCZoMRPzMNisDiM12siGilSM4+dJAekuuHTibI2hVC2fYK79iSFvWjw==}
     engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
       typescript: '*'
@@ -818,14 +818,14 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/utils@7.12.0':
-    resolution: {integrity: sha512-Y6hhwxwDx41HNpjuYswYp6gDbkiZ8Hin9Bf5aJQn1bpTs3afYY4GX+MPYxma8jtoIV2GRwTM/UJm/2uGCVv+DQ==}
+  '@typescript-eslint/utils@7.13.0':
+    resolution: {integrity: sha512-jceD8RgdKORVnB4Y6BqasfIkFhl4pajB1wVxrF4akxD2QPM8GNYjgGwEzYS+437ewlqqrg7Dw+6dhdpjMpeBFQ==}
     engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
       eslint: ^8.56.0
 
-  '@typescript-eslint/visitor-keys@7.12.0':
-    resolution: {integrity: sha512-uZk7DevrQLL3vSnfFl5bj4sL75qC9D6EdjemIdbtkuUmIheWpuiiylSY01JxJE7+zGrOWDZrp1WxOuDntvKrHQ==}
+  '@typescript-eslint/visitor-keys@7.13.0':
+    resolution: {integrity: sha512-nxn+dozQx+MK61nn/JP+M4eCkHDSxSLDpgE3WcQo0+fkjEolnaB5jswvIKC4K56By8MMgIho7f1PVxERHEo8rw==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
   '@ungap/structured-clone@1.2.0':
@@ -1197,8 +1197,8 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
-  eslint-plugin-qwik@1.5.5:
-    resolution: {integrity: sha512-0mWNC9al7ynL1rrH23lAH0WiIQGr5ttmGSvMBpXrULD+XFjryzcyGlhfUVsxlpzkNsvIRtTnrUiqWFUue6O9XA==}
+  eslint-plugin-qwik@1.5.6:
+    resolution: {integrity: sha512-DfCEdv1OqneTQIJZpENe1qXcepDLwMJU4LrGBK5ePEx0BEINzb49fLRpNIp+Q0RrHLDTSiCNJT3nq4KWyl8jiQ==}
     engines: {node: '>=16.8.0 <18.0.0 || >=18.11'}
     peerDependencies:
       eslint: ^8.57.0
@@ -2422,7 +2422,7 @@ snapshots:
 
   '@builder.io/partytown@0.10.2': {}
 
-  '@builder.io/qwik-city@1.5.5(@types/node@20.13.0)(rollup@4.18.0)':
+  '@builder.io/qwik-city@1.5.6(@types/node@20.13.0)(rollup@4.18.0)':
     dependencies:
       '@mdx-js/mdx': 3.0.1
       '@types/mdx': 2.0.13
@@ -2444,7 +2444,7 @@ snapshots:
       - supports-color
       - terser
 
-  '@builder.io/qwik@1.5.5(@types/node@20.13.0)(undici@6.18.2)':
+  '@builder.io/qwik@1.5.6(@types/node@20.13.0)(undici@6.18.2)':
     dependencies:
       csstype: 3.1.3
       undici: 6.18.2
@@ -2776,7 +2776,7 @@ snapshots:
 
   '@kurkle/color@0.3.2': {}
 
-  '@luminescent/ui@0.16.6': {}
+  '@luminescent/ui@0.18.0': {}
 
   '@mdx-js/mdx@3.0.1':
     dependencies:
@@ -2806,10 +2806,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@modular-forms/qwik@0.25.0(@builder.io/qwik-city@1.5.5(@types/node@20.13.0)(rollup@4.18.0))(@builder.io/qwik@1.5.5(@types/node@20.13.0)(undici@6.18.2))':
+  '@modular-forms/qwik@0.25.0(@builder.io/qwik-city@1.5.6(@types/node@20.13.0)(rollup@4.18.0))(@builder.io/qwik@1.5.6(@types/node@20.13.0)(undici@6.18.2))':
     dependencies:
-      '@builder.io/qwik': 1.5.5(@types/node@20.13.0)(undici@6.18.2)
-      '@builder.io/qwik-city': 1.5.5(@types/node@20.13.0)(rollup@4.18.0)
+      '@builder.io/qwik': 1.5.6(@types/node@20.13.0)(undici@6.18.2)
+      '@builder.io/qwik-city': 1.5.6(@types/node@20.13.0)(rollup@4.18.0)
       decode-formdata: 0.7.5
       valibot: 0.31.1
 
@@ -2931,14 +2931,14 @@ snapshots:
 
   '@types/unist@3.0.2': {}
 
-  '@typescript-eslint/eslint-plugin@7.12.0(@typescript-eslint/parser@7.12.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)':
+  '@typescript-eslint/eslint-plugin@7.13.0(@typescript-eslint/parser@7.13.0(eslint@8.57.0)(typescript@5.4.5))(eslint@8.57.0)(typescript@5.4.5)':
     dependencies:
       '@eslint-community/regexpp': 4.10.0
-      '@typescript-eslint/parser': 7.12.0(eslint@8.57.0)(typescript@5.4.5)
-      '@typescript-eslint/scope-manager': 7.12.0
-      '@typescript-eslint/type-utils': 7.12.0(eslint@8.57.0)(typescript@5.4.5)
-      '@typescript-eslint/utils': 7.12.0(eslint@8.57.0)(typescript@5.4.5)
-      '@typescript-eslint/visitor-keys': 7.12.0
+      '@typescript-eslint/parser': 7.13.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/scope-manager': 7.13.0
+      '@typescript-eslint/type-utils': 7.13.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/utils': 7.13.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/visitor-keys': 7.13.0
       eslint: 8.57.0
       graphemer: 1.4.0
       ignore: 5.3.1
@@ -2949,12 +2949,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@7.12.0(eslint@8.57.0)(typescript@5.4.5)':
+  '@typescript-eslint/parser@7.13.0(eslint@8.57.0)(typescript@5.4.5)':
     dependencies:
-      '@typescript-eslint/scope-manager': 7.12.0
-      '@typescript-eslint/types': 7.12.0
-      '@typescript-eslint/typescript-estree': 7.12.0(typescript@5.4.5)
-      '@typescript-eslint/visitor-keys': 7.12.0
+      '@typescript-eslint/scope-manager': 7.13.0
+      '@typescript-eslint/types': 7.13.0
+      '@typescript-eslint/typescript-estree': 7.13.0(typescript@5.4.5)
+      '@typescript-eslint/visitor-keys': 7.13.0
       debug: 4.3.5
       eslint: 8.57.0
     optionalDependencies:
@@ -2962,15 +2962,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@7.12.0':
+  '@typescript-eslint/scope-manager@7.13.0':
     dependencies:
-      '@typescript-eslint/types': 7.12.0
-      '@typescript-eslint/visitor-keys': 7.12.0
+      '@typescript-eslint/types': 7.13.0
+      '@typescript-eslint/visitor-keys': 7.13.0
 
-  '@typescript-eslint/type-utils@7.12.0(eslint@8.57.0)(typescript@5.4.5)':
+  '@typescript-eslint/type-utils@7.13.0(eslint@8.57.0)(typescript@5.4.5)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 7.12.0(typescript@5.4.5)
-      '@typescript-eslint/utils': 7.12.0(eslint@8.57.0)(typescript@5.4.5)
+      '@typescript-eslint/typescript-estree': 7.13.0(typescript@5.4.5)
+      '@typescript-eslint/utils': 7.13.0(eslint@8.57.0)(typescript@5.4.5)
       debug: 4.3.5
       eslint: 8.57.0
       ts-api-utils: 1.3.0(typescript@5.4.5)
@@ -2979,12 +2979,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@7.12.0': {}
+  '@typescript-eslint/types@7.13.0': {}
 
-  '@typescript-eslint/typescript-estree@7.12.0(typescript@5.4.5)':
+  '@typescript-eslint/typescript-estree@7.13.0(typescript@5.4.5)':
     dependencies:
-      '@typescript-eslint/types': 7.12.0
-      '@typescript-eslint/visitor-keys': 7.12.0
+      '@typescript-eslint/types': 7.13.0
+      '@typescript-eslint/visitor-keys': 7.13.0
       debug: 4.3.5
       globby: 11.1.0
       is-glob: 4.0.3
@@ -2996,20 +2996,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@7.12.0(eslint@8.57.0)(typescript@5.4.5)':
+  '@typescript-eslint/utils@7.13.0(eslint@8.57.0)(typescript@5.4.5)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
-      '@typescript-eslint/scope-manager': 7.12.0
-      '@typescript-eslint/types': 7.12.0
-      '@typescript-eslint/typescript-estree': 7.12.0(typescript@5.4.5)
+      '@typescript-eslint/scope-manager': 7.13.0
+      '@typescript-eslint/types': 7.13.0
+      '@typescript-eslint/typescript-estree': 7.13.0(typescript@5.4.5)
       eslint: 8.57.0
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  '@typescript-eslint/visitor-keys@7.12.0':
+  '@typescript-eslint/visitor-keys@7.13.0':
     dependencies:
-      '@typescript-eslint/types': 7.12.0
+      '@typescript-eslint/types': 7.13.0
       eslint-visitor-keys: 3.4.3
 
   '@ungap/structured-clone@1.2.0': {}
@@ -3470,7 +3470,7 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
-  eslint-plugin-qwik@1.5.5(eslint@8.57.0):
+  eslint-plugin-qwik@1.5.6(eslint@8.57.0):
     dependencies:
       eslint: 8.57.0
       jsx-ast-utils: 3.3.5
@@ -4478,9 +4478,9 @@ snapshots:
 
   qwik-ionicons@1.0.5: {}
 
-  qwik-speak@0.23.0(@builder.io/qwik@1.5.5(@types/node@20.13.0)(undici@6.18.2)):
+  qwik-speak@0.23.0(@builder.io/qwik@1.5.6(@types/node@20.13.0)(undici@6.18.2)):
     dependencies:
-      '@builder.io/qwik': 1.5.5(@types/node@20.13.0)(undici@6.18.2)
+      '@builder.io/qwik': 1.5.6(@types/node@20.13.0)(undici@6.18.2)
 
   read-cache@1.0.0:
     dependencies:
diff --git a/src/components/util/RGBUtils.ts b/src/components/util/RGBUtils.ts
index eccc52b5..eb22714e 100644
--- a/src/components/util/RGBUtils.ts
+++ b/src/components/util/RGBUtils.ts
@@ -10,22 +10,30 @@ export function hex(c: number) {
   return s.charAt((i - i % 16) / 16) + s.charAt(i % 16);
 }
 
-export function convertToHex(rgb: number[]) {
-  return hex(rgb[0]) + hex(rgb[1]) + hex(rgb[2]);
+export function convertToHex(RGBAcolor: number[]) {
+  return hex(RGBAcolor[0]) + hex(RGBAcolor[1]) + hex(RGBAcolor[2]);
 }
 
 export function trim(s: string) {
   return (s.charAt(0) == '#') ? s.substring(1, 7) : s;
 }
 
-export function convertToRGB(hex: string) {
+export function convertToRGB(hexcolor: string) {
   const color = [];
-  color[0] = parseInt((trim(hex)).substring(0, 2), 16);
-  color[1] = parseInt((trim(hex)).substring(2, 4), 16);
-  color[2] = parseInt((trim(hex)).substring(4, 6), 16);
+  color[0] = parseInt((trim(hexcolor)).substring(0, 2), 16);
+  color[1] = parseInt((trim(hexcolor)).substring(2, 4), 16);
+  color[2] = parseInt((trim(hexcolor)).substring(4, 6), 16);
   return color;
 }
 
+export function getBrightness(RGBAcolor: number[]) {
+  return Math.sqrt(
+    (RGBAcolor[0] * RGBAcolor[0] * 0.299) +
+    (RGBAcolor[1] * RGBAcolor[1] * 0.587) +
+    (RGBAcolor[2] * RGBAcolor[2] * 0.114),
+  );
+}
+
 export function getRandomColor() {
   const letters = '0123456789ABCDEF';
   let color = '#';
diff --git a/src/routes/resources/rgb/index.tsx b/src/routes/resources/rgb/index.tsx
index 385debc0..66294680 100644
--- a/src/routes/resources/rgb/index.tsx
+++ b/src/routes/resources/rgb/index.tsx
@@ -3,11 +3,11 @@ import { routeLoader$, type DocumentHead } from '@builder.io/qwik-city';
 
 import { Gradient } from '~/components/util/HexUtils';
 import { defaults, loadPreset, presets, v3formats } from '~/components/util/PresetUtils';
-import { convertToHex, convertToRGB, generateOutput, getRandomColor } from '~/components/util/RGBUtils';
+import { convertToHex, convertToRGB, generateOutput, getBrightness, getRandomColor } from '~/components/util/RGBUtils';
 
-import { ChevronDown, ChevronUp, ColorFillOutline, SettingsOutline, Text } from 'qwik-ionicons';
+import { Add, ChevronDown, ChevronUp, ColorFillOutline, Remove, SettingsOutline, Text, Trash, TrashBinOutline, TrashOutline } from 'qwik-ionicons';
 
-import { Button, ColorInput, Header, NumberInput, Dropdown, TextArea, TextInput, Toggle } from '@luminescent/ui';
+import { Button, ColorPicker, Header, Dropdown, TextArea, TextInput, Toggle } from '@luminescent/ui';
 import { inlineTranslate, useSpeak } from 'qwik-speak';
 import { getCookies, setCookies } from '~/components/util/SharedUtils';
 import { isBrowser } from '@builder.io/qwik/build';
@@ -37,6 +37,7 @@ export default component$(() => {
   const store = useStore({
     ...rgbDefaults,
     ...cookies,
+    opened: -1,
     alerts: [] as {
       class: string,
       text: string,
@@ -144,11 +145,52 @@ export default component$(() => {
           </div>
         </div>
 
+        <div class="flex gap-2 my-4 items-center">
+          <Button square disabled={store.colors.length < 3} transparent aria-label="Remove Color" onClick$={() => {
+            const newColors = [...store.colors];
+            newColors.pop();
+            store.colors = newColors;
+          }}>
+            <Remove width="24" />
+          </Button>
+          <div class="w-full h-3 rounded-full flex justify-between items-center" style={`background: linear-gradient(to right, ${store.colors.join(', ')});`}>
+            {store.colors.map((color: string, i: number) => <div class="relative mt-1" key={i}>
+              <button key={`color${i + 1}`} class={{
+                'transition-transform w-5 h-5 hover:scale-125 rounded-full shadow-md border': true,
+                'border-white': getBrightness(convertToRGB(color)) < 126,
+                'border-black': getBrightness(convertToRGB(color)) > 126,
+              }} style={`background: ${color};`} onFocus$={() => store.opened = i} onBlur$={() => store.opened = -1} />
+              <ColorPicker
+                id={`color${i + 1}`}
+                value={color}
+                class={{
+                  'motion-safe:transition-all absolute top-full mt-2 left-0 gap-1 z-[1000]': true,
+                  'opacity-0 scale-95 pointer-events-none': store.opened != i,
+                }}
+                onInput$={(newColor: string) => {
+                  const newColors = [...store.colors];
+                  newColors[i] = newColor;
+                  store.colors = newColors;
+                }}
+                horizontal
+              >
+                {t('color.hexColor@@Hex Color')} {i + 1}
+              </ColorPicker>
+            </div>,
+            )}
+          </div>
+          <Button square disabled={store.colors.length > store.text.length} transparent aria-label="Add Color" onClick$={() => {
+            const newColors = [...store.colors, getRandomColor()];
+            store.colors = newColors;
+          }}>
+            <Add width="24" class="fill-white" />
+          </Button>
+        </div>
+
         <div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
           <div class="hidden sm:flex flex-col gap-3 relative" id="colors">
-            <h1 class="hidden sm:flex text-2xl font-bold text-gray-50 gap-4 items-center justify-center">
-              <ColorFillOutline width="32" />
-              {t('color.colors@@Colors')}
+            <h1>
+              idk where to put these buttons yet
             </h1>
             <Dropdown id="color-preset" class={{ 'w-full': true }} onChange$={
               (event: any) => {
@@ -161,53 +203,28 @@ export default component$(() => {
             ]} value={Object.keys(presets).find((preset: any) => presets[preset as keyof typeof presets].toString() == store.colors.toString()) ?? 'custom'}>
               {t('color.colorPreset@@Color Preset')}
             </Dropdown>
-            <NumberInput input min={2} max={store.text.length} value={store.colors.length} id="colorsinput" class={{ 'w-full': true }}
-              onChange$={(event: any) => {
-                if (event.target!.value < 2) return;
-                if (event.target!.value > store.text.length) return event.target!.value = store.text.length;
-                const newColors = [];
-                for (let i = 0; i < event.target!.value; i++) {
-                  if (store.colors[i]) newColors.push(store.colors[i]);
-                  else newColors.push(getRandomColor());
-                }
-                store.colors = newColors;
-              }}
-              onIncrement$={() => {
-                const newColors = [...store.colors, getRandomColor()];
-                store.colors = newColors;
-              }}
-              onDecrement$={() => {
-                const newColors = [...store.colors];
-                newColors.pop();
-                store.colors = newColors;
-              }}
-            >
-              {t('color.colorAmount@@Color Amount')}
-            </NumberInput>
             <div class="flex flex-col gap-2">
               {store.colors.map((color: string, i: number) => {
                 return <div key={`color${i + 1}`} class="flex items-end">
-                  <ColorInput
-                    id={`color${i + 1}`}
-                    value={color}
-                    onInput$={(newColor: string) => {
+                  <div class="flex rounded-md gap-2 p-1 w-full items-center" style={{
+                    background: color,
+                    color: getBrightness(convertToRGB(color)) > 126 ? 'black' : 'white',
+                  }}>
+                    <Button square size='sm' color="red" onClick$={() => {
                       const newColors = [...store.colors];
-                      newColors[i] = newColor;
+                      newColors.splice(i, 1);
                       store.colors = newColors;
-                    }}
-                    class={{ 'w-full': true }}
-                    presetColors={store.colors}
-                  >
-                    {t('color.hexColor@@Hex Color')} {i + 1}
-                  </ColorInput>
-                  <div class="bg-gray-800 flex ml-2 rounded-md border border-gray-700">
-                    <Button square onClick$={() => handleSwap(i, i - 1)} class={{ 'border-0': true }}>
+                    }
+                    }>
+                      <TrashOutline width="20" />
+                    </Button>
+                    <Button square size='sm' onClick$={() => handleSwap(i, i - 1)}>
                       <ChevronUp width="20" />
                     </Button>
-                    <div class="bg-gray-700 w-px" />
-                    <Button square onClick$={() => handleSwap(i, i + 1)} class={{ 'border-0': true }}>
+                    <Button square size='sm' onClick$={() => handleSwap(i, i + 1)}>
                       <ChevronDown width="20" />
                     </Button>
+                    {color}
                   </div>
                 </div>;
               })}