diff --git a/node_modules/.DS_Store b/node_modules/.DS_Store
new file mode 100644
index 0000000..377b7f4
Binary files /dev/null and b/node_modules/.DS_Store differ
diff --git a/node_modules/agent-base/.DS_Store b/node_modules/agent-base/.DS_Store
new file mode 100644
index 0000000..3ce84e1
Binary files /dev/null and b/node_modules/agent-base/.DS_Store differ
diff --git a/node_modules/agent-base/node_modules/.DS_Store b/node_modules/agent-base/node_modules/.DS_Store
new file mode 100644
index 0000000..cd08dc8
Binary files /dev/null and b/node_modules/agent-base/node_modules/.DS_Store differ
diff --git a/node_modules/bcrypt/.DS_Store b/node_modules/bcrypt/.DS_Store
new file mode 100644
index 0000000..db6efe4
Binary files /dev/null and b/node_modules/bcrypt/.DS_Store differ
diff --git a/node_modules/chokidar/.DS_Store b/node_modules/chokidar/.DS_Store
new file mode 100644
index 0000000..b35a14f
Binary files /dev/null and b/node_modules/chokidar/.DS_Store differ
diff --git a/node_modules/express-session/.DS_Store b/node_modules/express-session/.DS_Store
new file mode 100644
index 0000000..02f7fcb
Binary files /dev/null and b/node_modules/express-session/.DS_Store differ
diff --git a/node_modules/fast-glob/.DS_Store b/node_modules/fast-glob/.DS_Store
new file mode 100644
index 0000000..4da0a64
Binary files /dev/null and b/node_modules/fast-glob/.DS_Store differ
diff --git a/node_modules/https-proxy-agent/.DS_Store b/node_modules/https-proxy-agent/.DS_Store
new file mode 100644
index 0000000..9b72f63
Binary files /dev/null and b/node_modules/https-proxy-agent/.DS_Store differ
diff --git a/node_modules/https-proxy-agent/node_modules/.DS_Store b/node_modules/https-proxy-agent/node_modules/.DS_Store
new file mode 100644
index 0000000..42441fd
Binary files /dev/null and b/node_modules/https-proxy-agent/node_modules/.DS_Store differ
diff --git a/node_modules/node-fetch/.DS_Store b/node_modules/node-fetch/.DS_Store
new file mode 100644
index 0000000..5966758
Binary files /dev/null and b/node_modules/node-fetch/.DS_Store differ
diff --git a/node_modules/node-fetch/node_modules/.DS_Store b/node_modules/node-fetch/node_modules/.DS_Store
new file mode 100644
index 0000000..9080c9c
Binary files /dev/null and b/node_modules/node-fetch/node_modules/.DS_Store differ
diff --git a/node_modules/postcss-less/.DS_Store b/node_modules/postcss-less/.DS_Store
new file mode 100644
index 0000000..f8a327e
Binary files /dev/null and b/node_modules/postcss-less/.DS_Store differ
diff --git a/node_modules/postcss-less/node_modules/.DS_Store b/node_modules/postcss-less/node_modules/.DS_Store
new file mode 100644
index 0000000..e27dbe4
Binary files /dev/null and b/node_modules/postcss-less/node_modules/.DS_Store differ
diff --git a/node_modules/resolve/.DS_Store b/node_modules/resolve/.DS_Store
new file mode 100644
index 0000000..86aa8db
Binary files /dev/null and b/node_modules/resolve/.DS_Store differ
diff --git a/node_modules/source-map/.DS_Store b/node_modules/source-map/.DS_Store
new file mode 100644
index 0000000..8b33ed9
Binary files /dev/null and b/node_modules/source-map/.DS_Store differ
diff --git a/node_modules/sucrase/.DS_Store b/node_modules/sucrase/.DS_Store
new file mode 100644
index 0000000..c11ad71
Binary files /dev/null and b/node_modules/sucrase/.DS_Store differ
diff --git a/node_modules/sucrase/dist/.DS_Store b/node_modules/sucrase/dist/.DS_Store
new file mode 100644
index 0000000..c3f7062
Binary files /dev/null and b/node_modules/sucrase/dist/.DS_Store differ
diff --git a/node_modules/sucrase/dist/parser/.DS_Store b/node_modules/sucrase/dist/parser/.DS_Store
new file mode 100644
index 0000000..5700081
Binary files /dev/null and b/node_modules/sucrase/dist/parser/.DS_Store differ
diff --git a/node_modules/tailwindcss/.DS_Store b/node_modules/tailwindcss/.DS_Store
new file mode 100644
index 0000000..7852324
Binary files /dev/null and b/node_modules/tailwindcss/.DS_Store differ
diff --git a/node_modules/tailwindcss/lib/.DS_Store b/node_modules/tailwindcss/lib/.DS_Store
new file mode 100644
index 0000000..8d498fd
Binary files /dev/null and b/node_modules/tailwindcss/lib/.DS_Store differ
diff --git a/node_modules/tailwindcss/src/.DS_Store b/node_modules/tailwindcss/src/.DS_Store
new file mode 100644
index 0000000..f1c66e6
Binary files /dev/null and b/node_modules/tailwindcss/src/.DS_Store differ
diff --git a/node_modules/yaml/.DS_Store b/node_modules/yaml/.DS_Store
new file mode 100644
index 0000000..28e5816
Binary files /dev/null and b/node_modules/yaml/.DS_Store differ
diff --git a/node_modules/yaml/browser/.DS_Store b/node_modules/yaml/browser/.DS_Store
new file mode 100644
index 0000000..e109bcd
Binary files /dev/null and b/node_modules/yaml/browser/.DS_Store differ
diff --git a/node_modules/yaml/browser/dist/.DS_Store b/node_modules/yaml/browser/dist/.DS_Store
new file mode 100644
index 0000000..ef040df
Binary files /dev/null and b/node_modules/yaml/browser/dist/.DS_Store differ
diff --git a/node_modules/yaml/dist/.DS_Store b/node_modules/yaml/dist/.DS_Store
new file mode 100644
index 0000000..92380b8
Binary files /dev/null and b/node_modules/yaml/dist/.DS_Store differ
diff --git a/public/.DS_Store b/public/.DS_Store
index 7cafb1b..f47161d 100644
Binary files a/public/.DS_Store and b/public/.DS_Store differ
diff --git a/public/css/.DS_Store b/public/css/.DS_Store
index 752c61b..89c9aaa 100644
Binary files a/public/css/.DS_Store and b/public/css/.DS_Store differ
diff --git a/public/css/output.css b/public/css/output.css
index 77ddb56..8b8b057 100644
--- a/public/css/output.css
+++ b/public/css/output.css
@@ -926,12 +926,6 @@ html {
     --tw-bg-opacity: 1;
     background-color: hsl(var(--b2) / var(--tw-bg-opacity));
   }
-
-  .table-zebra tr.hover:hover,
-  .table-zebra tr.hover:nth-child(even):hover {
-    --tw-bg-opacity: 1;
-    background-color: hsl(var(--b3) / var(--tw-bg-opacity));
-  }
 }
 
 .btn {
@@ -2832,10 +2826,6 @@ html {
   left: 0px;
 }
 
-.left-auto {
-  left: auto;
-}
-
 .right-0 {
   right: 0px;
 }
@@ -2844,18 +2834,10 @@ html {
   top: 0px;
 }
 
-.top-1\/2 {
-  top: 50%;
-}
-
 .top-4 {
   top: 1rem;
 }
 
-.z-10 {
-  z-index: 10;
-}
-
 .z-50 {
   z-index: 50;
 }
@@ -2868,10 +2850,6 @@ html {
   z-index: 4;
 }
 
-.clear-both {
-  clear: both;
-}
-
 .m-0 {
   margin: 0px;
 }
@@ -2880,10 +2858,6 @@ html {
   margin: 0.25rem;
 }
 
-.m-10 {
-  margin: 2.5rem;
-}
-
 .m-4 {
   margin: 1rem;
 }
@@ -2892,10 +2866,6 @@ html {
   margin: 1.25rem;
 }
 
-.m-\[10\%\] {
-  margin: 10%;
-}
-
 .m-auto {
   margin: auto;
 }
@@ -2910,16 +2880,16 @@ html {
   margin-right: 2rem;
 }
 
-.mx-\[10\%\] {
-  margin-left: 10%;
-  margin-right: 10%;
-}
-
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
 
+.my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
 .my-12 {
   margin-top: 3rem;
   margin-bottom: 3rem;
@@ -2940,25 +2910,11 @@ html {
   margin-bottom: 2rem;
 }
 
-.-my-10 {
-  margin-top: -2.5rem;
-  margin-bottom: -2.5rem;
-}
-
 .my-\[0\%\] {
   margin-top: 0%;
   margin-bottom: 0%;
 }
 
-.my-0 {
-  margin-top: 0px;
-  margin-bottom: 0px;
-}
-
-.-mr-4 {
-  margin-right: -1rem;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -3011,10 +2967,6 @@ html {
   margin-right: 0.5rem;
 }
 
-.mr-3 {
-  margin-right: 0.75rem;
-}
-
 .mr-4 {
   margin-right: 1rem;
 }
@@ -3047,14 +2999,6 @@ html {
   margin-top: 2rem;
 }
 
-.mb-16 {
-  margin-bottom: 4rem;
-}
-
-.mr-16 {
-  margin-right: 4rem;
-}
-
 .block {
   display: block;
 }
@@ -3115,6 +3059,10 @@ html {
   height: 24rem;
 }
 
+.h-\[241\.32px\] {
+  height: 241.32px;
+}
+
 .h-\[24px\] {
   height: 24px;
 }
@@ -3132,18 +3080,6 @@ html {
   height: 100%;
 }
 
-.h-\[241\] {
-  height: 241;
-}
-
-.h-\[241\.32rem\] {
-  height: 241.32rem;
-}
-
-.h-\[241\.32px\] {
-  height: 241.32px;
-}
-
 .min-h-full {
   min-height: 100%;
 }
@@ -3200,6 +3136,10 @@ html {
   width: 24px;
 }
 
+.w-\[340px\] {
+  width: 340px;
+}
+
 .w-auto {
   width: auto;
 }
@@ -3213,22 +3153,14 @@ html {
   width: 100%;
 }
 
-.w-\[340px\] {
-  width: 340px;
-}
-
-.max-w-md {
-  max-width: 28rem;
+.max-w-lg {
+  max-width: 32rem;
 }
 
 .max-w-sm {
   max-width: 24rem;
 }
 
-.max-w-lg {
-  max-width: 32rem;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -3296,10 +3228,6 @@ html {
   list-style-type: decimal;
 }
 
-.list-none {
-  list-style-type: none;
-}
-
 .flex-row {
   flex-direction: row;
 }
@@ -3336,14 +3264,6 @@ html {
   justify-content: space-between;
 }
 
-.justify-items-start {
-  justify-items: start;
-}
-
-.justify-items-end {
-  justify-items: end;
-}
-
 .space-x-5 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1.25rem * var(--tw-space-x-reverse));
@@ -3448,14 +3368,20 @@ html {
   border-right-width: 4px;
 }
 
-.border-solid {
-  border-style: solid;
-}
-
 .border-none {
   border-style: none;
 }
 
+.border-\[\#5A1475\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(90 20 117 / var(--tw-border-opacity));
+}
+
+.border-\[\#761eff\] {
+  --tw-border-opacity: 1;
+  border-color: rgb(118 30 255 / var(--tw-border-opacity));
+}
+
 .border-black {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -3466,9 +3392,9 @@ html {
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
 }
 
-.border-emerald-500 {
+.border-emerald-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(16 185 129 / var(--tw-border-opacity));
+  border-color: rgb(110 231 183 / var(--tw-border-opacity));
 }
 
 .border-gray-100 {
@@ -3486,13 +3412,14 @@ html {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.border-teal-400 {
+.border-gray-800 {
   --tw-border-opacity: 1;
-  border-color: rgb(45 212 191 / var(--tw-border-opacity));
+  border-color: rgb(31 41 55 / var(--tw-border-opacity));
 }
 
-.border-transparent {
-  border-color: transparent;
+.border-teal-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(45 212 191 / var(--tw-border-opacity));
 }
 
 .border-white {
@@ -3500,51 +3427,11 @@ html {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
-.border-\[\#C21EC0\] {
-  --tw-border-opacity: 1;
-  border-color: rgb(194 30 192 / var(--tw-border-opacity));
-}
-
-.border-\[\#5A1475\] {
-  --tw-border-opacity: 1;
-  border-color: rgb(90 20 117 / var(--tw-border-opacity));
-}
-
-.border-\[\#DB972C\] {
-  --tw-border-opacity: 1;
-  border-color: rgb(219 151 44 / var(--tw-border-opacity));
-}
-
-.border-yellow-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(250 204 21 / var(--tw-border-opacity));
-}
-
-.border-red-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(248 113 113 / var(--tw-border-opacity));
-}
-
-.border-red-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(220 38 38 / var(--tw-border-opacity));
-}
-
 .border-yellow-300 {
   --tw-border-opacity: 1;
   border-color: rgb(253 224 71 / var(--tw-border-opacity));
 }
 
-.border-gray-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(31 41 55 / var(--tw-border-opacity));
-}
-
-.border-emerald-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(110 231 183 / var(--tw-border-opacity));
-}
-
 .border-b-green-500 {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(34 197 94 / var(--tw-border-opacity));
@@ -3560,9 +3447,24 @@ html {
   border-right-color: rgb(234 88 12 / var(--tw-border-opacity));
 }
 
-.bg-base-100 {
+.bg-\[\#5EDC70\] {
   --tw-bg-opacity: 1;
-  background-color: hsl(var(--b1) / var(--tw-bg-opacity));
+  background-color: rgb(94 220 112 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#761ffe\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(118 31 254 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#C21EC0\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(194 30 192 / var(--tw-bg-opacity));
+}
+
+.bg-\[\#eab30e\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(234 179 14 / var(--tw-bg-opacity));
 }
 
 .bg-black {
@@ -3600,9 +3502,9 @@ html {
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
 }
 
-.bg-gray-800 {
+.bg-green-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
 }
 
 .bg-indigo-600 {
@@ -3624,324 +3526,124 @@ html {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-yellow-500 {
+.bg-yellow-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
+  background-color: rgb(254 240 138 / var(--tw-bg-opacity));
 }
 
-.bg-emerald-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(52 211 153 / var(--tw-bg-opacity));
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
 
-.bg-\[\#C21EC0\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(194 30 192 / var(--tw-bg-opacity));
+.bg-gradient-to-tl {
+  background-image: linear-gradient(to top left, var(--tw-gradient-stops));
 }
 
-.bg-\[\#5A1475\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(90 20 117 / var(--tw-bg-opacity));
+.from-cyan-500 {
+  --tw-gradient-from: #06b6d4 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.bg-\[\#4D0375\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(77 3 117 / var(--tw-bg-opacity));
+.from-purple-700 {
+  --tw-gradient-from: #7e22ce var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(126 34 206 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.bg-\[\#761ffe\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(118 31 254 / var(--tw-bg-opacity));
+.from-rose-400 {
+  --tw-gradient-from: #fb7185 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(251 113 133 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
-.bg-\[\#eab30e\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(234 179 14 / var(--tw-bg-opacity));
+.via-blue-400 {
+  --tw-gradient-to: rgb(96 165 250 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #60a5fa var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
-.bg-\[\#82E8BF\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(130 232 191 / var(--tw-bg-opacity));
+.to-blue-500 {
+  --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
 }
 
-.bg-\[\#5EDC70\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(94 220 112 / var(--tw-bg-opacity));
+.to-cyan-500 {
+  --tw-gradient-to: #06b6d4 var(--tw-gradient-to-position);
 }
 
-.bg-gray-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+.to-emerald-400 {
+  --tw-gradient-to: #34d399 var(--tw-gradient-to-position);
 }
 
-.bg-yellow-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
+.to-pink-500 {
+  --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);
 }
 
-.bg-yellow-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 240 138 / var(--tw-bg-opacity));
+.fill-\[\#0304f7\] {
+  fill: #0304f7;
 }
 
-.bg-primary {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--p) / var(--tw-bg-opacity));
+.fill-current {
+  fill: currentColor;
 }
 
-.bg-purple-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(216 180 254 / var(--tw-bg-opacity));
+.fill-emerald-300 {
+  fill: #6ee7b7;
 }
 
-.bg-fuchsia-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(240 171 252 / var(--tw-bg-opacity));
+.fill-white {
+  fill: #fff;
 }
 
-.bg-rose-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 164 175 / var(--tw-bg-opacity));
+.fill-yellow-500 {
+  fill: #eab308;
 }
 
-.bg-rose-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(190 18 60 / var(--tw-bg-opacity));
+.stroke-black {
+  stroke: #000;
 }
 
-.bg-rose-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(244 63 94 / var(--tw-bg-opacity));
+.stroke-current {
+  stroke: currentColor;
 }
 
-.bg-rose-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(251 113 133 / var(--tw-bg-opacity));
+.object-none {
+  -o-object-fit: none;
+     object-fit: none;
 }
 
-.bg-gray-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+.object-bottom {
+  -o-object-position: bottom;
+     object-position: bottom;
 }
 
-.bg-yellow-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
+.p-0 {
+  padding: 0px;
 }
 
-.bg-green-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+.p-0\.5 {
+  padding: 0.125rem;
 }
 
-.bg-yellow-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(161 98 7 / var(--tw-bg-opacity));
+.p-2 {
+  padding: 0.5rem;
 }
 
-.bg-gradient-to-r {
-  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+.p-4 {
+  padding: 1rem;
 }
 
-.bg-gradient-to-tl {
-  background-image: linear-gradient(to top left, var(--tw-gradient-stops));
+.p-6 {
+  padding: 1.5rem;
 }
 
-.bg-gradient-to-t {
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
 }
 
-.bg-gradient-to-l {
-  background-image: linear-gradient(to left, var(--tw-gradient-stops));
-}
-
-.from-cyan-500 {
-  --tw-gradient-from: #06b6d4 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.from-purple-700 {
-  --tw-gradient-from: #7e22ce var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(126 34 206 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.from-green-300 {
-  --tw-gradient-from: #86efac var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(134 239 172 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.from-amber-300 {
-  --tw-gradient-from: #fcd34d var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(252 211 77 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.from-rose-600 {
-  --tw-gradient-from: #e11d48 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(225 29 72 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.from-rose-400 {
-  --tw-gradient-from: #fb7185 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(251 113 133 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.via-blue-500 {
-  --tw-gradient-to: rgb(59 130 246 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), #3b82f6 var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
-
-.via-orange-300 {
-  --tw-gradient-to: rgb(253 186 116 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), #fdba74 var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
-
-.via-violet-600 {
-  --tw-gradient-to: rgb(124 58 237 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), #7c3aed var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
-
-.via-blue-400 {
-  --tw-gradient-to: rgb(96 165 250 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), #60a5fa var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
-
-.to-blue-500 {
-  --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
-}
-
-.to-cyan-500 {
-  --tw-gradient-to: #06b6d4 var(--tw-gradient-to-position);
-}
-
-.to-pink-500 {
-  --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);
-}
-
-.to-purple-600 {
-  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
-}
-
-.to-rose-300 {
-  --tw-gradient-to: #fda4af var(--tw-gradient-to-position);
-}
-
-.to-indigo-500 {
-  --tw-gradient-to: #6366f1 var(--tw-gradient-to-position);
-}
-
-.to-green-400 {
-  --tw-gradient-to: #4ade80 var(--tw-gradient-to-position);
-}
-
-.to-lime-500 {
-  --tw-gradient-to: #84cc16 var(--tw-gradient-to-position);
-}
-
-.to-green-500 {
-  --tw-gradient-to: #22c55e var(--tw-gradient-to-position);
-}
-
-.to-emerald-400 {
-  --tw-gradient-to: #34d399 var(--tw-gradient-to-position);
-}
-
-.bg-clip-padding {
-  background-clip: padding-box;
-}
-
-.fill-current {
-  fill: currentColor;
-}
-
-.fill-emerald-400 {
-  fill: #34d399;
-}
-
-.fill-black {
-  fill: #000;
-}
-
-.fill-white {
-  fill: #fff;
-}
-
-.fill-yellow-500 {
-  fill: #eab308;
-}
-
-.fill-emerald-600 {
-  fill: #059669;
-}
-
-.fill-emerald-300 {
-  fill: #6ee7b7;
-}
-
-.fill-blue-300 {
-  fill: #93c5fd;
-}
-
-.fill-blue-500 {
-  fill: #3b82f6;
-}
-
-.fill-\[\#0304f7\] {
-  fill: #0304f7;
-}
-
-.stroke-black {
-  stroke: #000;
-}
-
-.stroke-current {
-  stroke: currentColor;
-}
-
-.object-none {
-  -o-object-fit: none;
-     object-fit: none;
-}
-
-.object-bottom {
-  -o-object-position: bottom;
-     object-position: bottom;
-}
-
-.p-0 {
-  padding: 0px;
-}
-
-.p-0\.5 {
-  padding: 0.125rem;
-}
-
-.p-2 {
-  padding: 0.5rem;
-}
-
-.p-6 {
-  padding: 1.5rem;
-}
-
-.px-0 {
-  padding-left: 0px;
-  padding-right: 0px;
-}
-
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
 }
 
 .px-3 {
@@ -3959,6 +3661,16 @@ html {
   padding-right: 1.5rem;
 }
 
+.px-\[10\%\] {
+  padding-left: 10%;
+  padding-right: 10%;
+}
+
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -3984,24 +3696,14 @@ html {
   padding-bottom: 0.5rem;
 }
 
-.py-3 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
-
 .py-6 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
 
-.py-\[0\.4375rem\] {
-  padding-top: 0.4375rem;
-  padding-bottom: 0.4375rem;
-}
-
-.px-\[10\%\] {
-  padding-left: 10%;
-  padding-right: 10%;
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
 }
 
 .py-\[0\%\] {
@@ -4009,24 +3711,9 @@ html {
   padding-bottom: 0%;
 }
 
-.py-0 {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.py-8 {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-}
-
-.py-\[10\%\] {
-  padding-top: 10%;
-  padding-bottom: 10%;
+.py-\[0\.4375rem\] {
+  padding-top: 0.4375rem;
+  padding-bottom: 0.4375rem;
 }
 
 .py-\[5\%\] {
@@ -4050,16 +3737,16 @@ html {
   padding-left: 2rem;
 }
 
-.pt-0 {
-  padding-top: 0px;
-}
-
 .pr-16 {
   padding-right: 4rem;
 }
 
-.pr-2 {
-  padding-right: 0.5rem;
+.pr-8 {
+  padding-right: 2rem;
+}
+
+.pt-0 {
+  padding-top: 0px;
 }
 
 .text-left {
@@ -4074,10 +3761,6 @@ html {
   text-align: right;
 }
 
-.align-middle {
-  vertical-align: middle;
-}
-
 .font-fingerpaint {
   font-family: FingerPaint, sans-serif;
 }
@@ -4142,10 +3825,6 @@ html {
   font-weight: 500;
 }
 
-.font-normal {
-  font-weight: 400;
-}
-
 .font-semibold {
   font-weight: 600;
 }
@@ -4190,9 +3869,9 @@ html {
   letter-spacing: 0.05em;
 }
 
-.text-\[\#C26EB7\] {
+.text-\[\#C21EC0\] {
   --tw-text-opacity: 1;
-  color: rgb(194 110 183 / var(--tw-text-opacity));
+  color: rgb(194 30 192 / var(--tw-text-opacity));
 }
 
 .text-black {
@@ -4205,6 +3884,11 @@ html {
   color: rgb(52 211 153 / var(--tw-text-opacity));
 }
 
+.text-emerald-700 {
+  --tw-text-opacity: 1;
+  color: rgb(4 120 87 / var(--tw-text-opacity));
+}
+
 .text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -4235,11 +3919,6 @@ html {
   color: rgb(153 27 27 / var(--tw-text-opacity));
 }
 
-.text-slate-500 {
-  --tw-text-opacity: 1;
-  color: rgb(100 116 139 / var(--tw-text-opacity));
-}
-
 .text-success {
   --tw-text-opacity: 1;
   color: hsl(var(--su) / var(--tw-text-opacity));
@@ -4255,65 +3934,11 @@ html {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-\[\] {
-  color: ;
-}
-
-.text-\[\#C21EC0\] {
-  --tw-text-opacity: 1;
-  color: rgb(194 30 192 / var(--tw-text-opacity));
-}
-
-.text-\[\#DB972C\] {
-  --tw-text-opacity: 1;
-  color: rgb(219 151 44 / var(--tw-text-opacity));
-}
-
-.text-\[\#ff30ff\] {
-  --tw-text-opacity: 1;
-  color: rgb(255 48 255 / var(--tw-text-opacity));
-}
-
-.text-primary {
-  --tw-text-opacity: 1;
-  color: hsl(var(--p) / var(--tw-text-opacity));
-}
-
-.text-emerald-300 {
-  --tw-text-opacity: 1;
-  color: rgb(110 231 183 / var(--tw-text-opacity));
-}
-
-.text-yellow-600 {
-  --tw-text-opacity: 1;
-  color: rgb(202 138 4 / var(--tw-text-opacity));
-}
-
-.text-yellow-400 {
-  --tw-text-opacity: 1;
-  color: rgb(250 204 21 / var(--tw-text-opacity));
-}
-
-.text-red-600 {
-  --tw-text-opacity: 1;
-  color: rgb(220 38 38 / var(--tw-text-opacity));
-}
-
 .text-yellow-300 {
   --tw-text-opacity: 1;
   color: rgb(253 224 71 / var(--tw-text-opacity));
 }
 
-.text-emerald-600 {
-  --tw-text-opacity: 1;
-  color: rgb(5 150 105 / var(--tw-text-opacity));
-}
-
-.text-emerald-700 {
-  --tw-text-opacity: 1;
-  color: rgb(4 120 87 / var(--tw-text-opacity));
-}
-
 .underline {
   text-decoration-line: underline;
 }
@@ -4365,11 +3990,6 @@ html {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
-.shadow-primary {
-  --tw-shadow-color: hsl(var(--p) / 1);
-  --tw-shadow: var(--tw-shadow-colored);
-}
-
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -4449,12 +4069,6 @@ html {
   transition-duration: 150ms;
 }
 
-.transition-all {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -4540,20 +4154,6 @@ input.valid {
   color: red;
 }
 
-@media (hover:hover) {
-  .table :is(.dark .dark\:hover)tr:hover,
-  .table :is(.dark .dark\:hover)tr:nth-child(even):hover {
-    --tw-bg-opacity: 1;
-    background-color: hsl(var(--b2) / var(--tw-bg-opacity));
-  }
-
-  .table-zebra :is(.dark .dark\:hover)tr:hover,
-  .table-zebra :is(.dark .dark\:hover)tr:nth-child(even):hover {
-    --tw-bg-opacity: 1;
-    background-color: hsl(var(--b3) / var(--tw-bg-opacity));
-  }
-}
-
 @media (hover: hover) {
   :is(.dark .dark\:btn-success):hover {
     --tw-border-opacity: 1;
@@ -4618,26 +4218,6 @@ input.valid {
   position: absolute;
 }
 
-.before\:left-auto::before {
-  content: var(--tw-content);
-  left: auto;
-}
-
-.before\:right-7::before {
-  content: var(--tw-content);
-  right: 1.75rem;
-}
-
-.before\:top-0::before {
-  content: var(--tw-content);
-  top: 0px;
-}
-
-.before\:z-40::before {
-  content: var(--tw-content);
-  z-index: 40;
-}
-
 .before\:h-\[32px\]::before {
   content: var(--tw-content);
   height: 32px;
@@ -4660,24 +4240,6 @@ input.valid {
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
 }
 
-.before\:text-white::before {
-  content: var(--tw-content);
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
-.before\:transition-all::before {
-  content: var(--tw-content);
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.before\:content-\[\'\\f0d8\'\]::before {
-  --tw-content: '\f0d8';
-  content: var(--tw-content);
-}
-
 .after\:absolute::after {
   content: var(--tw-content);
   position: absolute;
@@ -4760,6 +4322,11 @@ input.valid {
   border-style: none;
 }
 
+.hover\:border-\[\#C21EC0\]:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(194 30 192 / var(--tw-border-opacity));
+}
+
 .hover\:border-gray-200:hover {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -4774,16 +4341,6 @@ input.valid {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
-.hover\:border-black:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(0 0 0 / var(--tw-border-opacity));
-}
-
-.hover\:border-\[\#C21EC0\]:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(194 30 192 / var(--tw-border-opacity));
-}
-
 .hover\:border-b-green-300:hover {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(134 239 172 / var(--tw-border-opacity));
@@ -4794,6 +4351,11 @@ input.valid {
   border-right-color: rgb(134 239 172 / var(--tw-border-opacity));
 }
 
+.hover\:bg-\[\#C21EC0\]:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(194 30 192 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-emerald-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(4 120 87 / var(--tw-bg-opacity));
@@ -4818,21 +4380,6 @@ input.valid {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-black:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-\[\#C21EC0\]:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(194 30 192 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-\[\#DB972C\]:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(219 151 44 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-yellow-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
@@ -4848,10 +4395,6 @@ input.valid {
   --tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
 }
 
-.hover\:fill-black:hover {
-  fill: #000;
-}
-
 .hover\:text-black:hover {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -4862,11 +4405,6 @@ input.valid {
   color: rgb(99 102 241 / var(--tw-text-opacity));
 }
 
-.hover\:text-slate-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(51 65 85 / var(--tw-text-opacity));
-}
-
 .hover\:text-teal-500:hover {
   --tw-text-opacity: 1;
   color: rgb(20 184 166 / var(--tw-text-opacity));
@@ -4883,11 +4421,6 @@ input.valid {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.hover\:shadow-\[\#C2B100\]\/50:hover {
-  --tw-shadow-color: rgb(194 177 0 / 0.5);
-  --tw-shadow: var(--tw-shadow-colored);
-}
-
 .hover\:shadow-black\/50:hover {
   --tw-shadow-color: rgb(0 0 0 / 0.5);
   --tw-shadow: var(--tw-shadow-colored);
@@ -4899,11 +4432,6 @@ input.valid {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.hover\:ring-emerald-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(52 211 153 / var(--tw-ring-opacity));
-}
-
 .hover\:ring-gray-800:hover {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
@@ -4921,6 +4449,11 @@ input.valid {
   background-color: rgb(248 113 113 / var(--tw-bg-opacity));
 }
 
+.focus\:border-\[\#761eff\]:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(118 30 255 / var(--tw-border-opacity));
+}
+
 .focus\:border-blue-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
@@ -4937,11 +4470,20 @@ input.valid {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.focus\:shadow-black\/50:focus {
+  --tw-shadow-color: rgb(0 0 0 / 0.5);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
 
+.focus\:outline-\[\#761eff\]\/50:focus {
+  outline-color: rgb(118 30 255 / 0.5);
+}
+
 .focus\:ring-2:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -4972,6 +4514,11 @@ input.valid {
   --tw-ring-color: rgb(52 211 153 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-gray-800:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-green-400:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(74 222 128 / var(--tw-ring-opacity));
@@ -4987,11 +4534,6 @@ input.valid {
   --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-gray-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
-}
-
 .focus-visible\:outline:focus-visible {
   outline-style: solid;
 }
@@ -5040,15 +4582,6 @@ input.valid {
   fill: #000;
 }
 
-.group:hover .group-hover\:text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
-.group:focus .group-focus\:fill-black {
-  fill: #000;
-}
-
 .peer:checked ~ .peer-checked\:visible {
   visibility: visible;
 }
@@ -5062,14 +4595,24 @@ input.valid {
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
 
+:is(.dark .dark\:border-emerald-500) {
+  --tw-border-opacity: 1;
+  border-color: rgb(16 185 129 / var(--tw-border-opacity));
+}
+
 :is(.dark .dark\:border-gray-500) {
   --tw-border-opacity: 1;
   border-color: rgb(107 114 128 / var(--tw-border-opacity));
 }
 
-:is(.dark .dark\:border-emerald-500) {
+:is(.dark .dark\:border-primary) {
   --tw-border-opacity: 1;
-  border-color: rgb(16 185 129 / var(--tw-border-opacity));
+  border-color: hsl(var(--p) / var(--tw-border-opacity));
+}
+
+:is(.dark .dark\:border-success) {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--su) / var(--tw-border-opacity));
 }
 
 :is(.dark .dark\:bg-\[\#BF991D\]) {
@@ -5111,32 +4654,32 @@ input.valid {
   --tw-gradient-to: #1f2937 var(--tw-gradient-to-position);
 }
 
-:is(.dark .dark\:fill-emerald-400) {
-  fill: #34d399;
-}
-
 :is(.dark .dark\:fill-blue-500) {
   fill: #3b82f6;
 }
 
+:is(.dark .dark\:fill-emerald-400) {
+  fill: #34d399;
+}
+
 :is(.dark .dark\:text-\[\#BF991D\]) {
   --tw-text-opacity: 1;
   color: rgb(191 153 29 / var(--tw-text-opacity));
 }
 
-:is(.dark .dark\:text-gray-100) {
+:is(.dark .dark\:text-\[\#ffff59\]) {
   --tw-text-opacity: 1;
-  color: rgb(243 244 246 / var(--tw-text-opacity));
+  color: rgb(255 255 89 / var(--tw-text-opacity));
 }
 
-:is(.dark .dark\:text-gray-400) {
+:is(.dark .dark\:text-emerald-400) {
   --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
+  color: rgb(52 211 153 / var(--tw-text-opacity));
 }
 
-:is(.dark .dark\:text-white) {
+:is(.dark .dark\:text-gray-100) {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(243 244 246 / var(--tw-text-opacity));
 }
 
 :is(.dark .dark\:text-gray-300) {
@@ -5144,19 +4687,29 @@ input.valid {
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
+:is(.dark .dark\:text-gray-400) {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:text-gray-50) {
+  --tw-text-opacity: 1;
+  color: rgb(249 250 251 / var(--tw-text-opacity));
+}
+
 :is(.dark .dark\:text-success) {
   --tw-text-opacity: 1;
   color: hsl(var(--su) / var(--tw-text-opacity));
 }
 
-:is(.dark .dark\:text-emerald-400) {
+:is(.dark .dark\:text-white) {
   --tw-text-opacity: 1;
-  color: rgb(52 211 153 / var(--tw-text-opacity));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-:is(.dark .dark\:text-gray-50) {
-  --tw-text-opacity: 1;
-  color: rgb(249 250 251 / var(--tw-text-opacity));
+:is(.dark .dark\:brightness-125) {
+  --tw-brightness: brightness(1.25);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
 :is(.dark .dark\:hover\:border-none:hover) {
@@ -5173,19 +4726,6 @@ input.valid {
   background-color: rgb(194 177 0 / var(--tw-bg-opacity));
 }
 
-:is(.dark .dark\:hover\:bg-gray-200\/80:hover) {
-  background-color: rgb(229 231 235 / 0.8);
-}
-
-:is(.dark .dark\:hover\:fill-black:hover) {
-  fill: #000;
-}
-
-:is(.dark .dark\:hover\:text-slate-700:hover) {
-  --tw-text-opacity: 1;
-  color: rgb(51 65 85 / var(--tw-text-opacity));
-}
-
 :is(.dark .dark\:hover\:text-white:hover) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -5201,15 +4741,33 @@ input.valid {
   --tw-ring-color: rgb(52 211 153 / var(--tw-ring-opacity));
 }
 
+:is(.dark .dark\:focus\:border-primary:focus) {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--p) / var(--tw-border-opacity));
+}
+
+:is(.dark .dark\:focus\:border-success:focus) {
+  --tw-border-opacity: 1;
+  border-color: hsl(var(--su) / var(--tw-border-opacity));
+}
+
+:is(.dark .dark\:focus\:outline-primary\/50:focus) {
+  outline-color: hsl(var(--p) / 0.5);
+}
+
+:is(.dark .dark\:focus\:outline-success\/50:focus) {
+  outline-color: hsl(var(--su) / 0.5);
+}
+
+:is(.dark .dark\:focus\:outline-success:focus) {
+  outline-color: hsl(var(--su) / 1);
+}
+
 :is(.dark .dark\:focus\:ring-emerald-400:focus) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(52 211 153 / var(--tw-ring-opacity));
 }
 
-:is(.dark .group:hover .dark\:group-hover\:fill-black) {
-  fill: #000;
-}
-
 :is(.dark .group:hover .dark\:group-hover\:fill-white) {
   fill: #fff;
 }
@@ -5269,11 +4827,6 @@ input.valid {
     margin-right: 1rem;
   }
 
-  .lg\:mx-8 {
-    margin-left: 2rem;
-    margin-right: 2rem;
-  }
-
   .lg\:ml-4 {
     margin-left: 1rem;
   }
@@ -5369,14 +4922,4 @@ input.valid {
     font-size: 1.25rem;
     line-height: 1.75rem;
   }
-
-  .lg\:transition-colors {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-  }
-
-  .lg\:duration-300 {
-    transition-duration: 300ms;
-  }
 }
diff --git a/public/images/cat.gif b/public/images/cat.gif
deleted file mode 100644
index 98fa119..0000000
Binary files a/public/images/cat.gif and /dev/null differ
diff --git a/views/pages/index.ejs b/views/pages/index.ejs
index 833d427..ea00bb4 100644
--- a/views/pages/index.ejs
+++ b/views/pages/index.ejs
@@ -1,133 +1,160 @@
-<html>
-<head>
+<html id="html-tag" class="py-[0%] my-[0%]">
+<head class="py-0 my-0 h-0">
     <title>GLink</title>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/output.css">
 </head>
-<body class="bg-gray-50 m-[10%]">
-<nav class="flex items-center lg:justify-between sm:justify-center flex-wrap bg-gray-500 p-6 shadow-lg shadow-black/50 sticky top-4 opacity-100 mb-4"> <!--dark:bg-black-->
-    <div class="block lg:hidden cursor-pointer flex:none mr-4" id="HamburgerInactive">
-        <button id="btn" class="flex flex-col items-center px-3 py-[0.4375rem] border rounded text-teal-200 border-teal-400">
-            <span class="block h-0.5 w-5 mb-1 origin-center rounded-full bg-teal-200"></span>
-            <span class="block h-0.5 w-5 mb-1 origin-center rounded-full bg-teal-200"></span>
-            <span class="block h-0.5 w-5 origin-center rounded-full bg-teal-200"></span>
-        </button>
-    </div>
-    <div id="HamburgerActive" class="hidden lg:hidden flex:none cursor-pointer mr-4 block">
-        <button class="space-y-2 px-3 py-2 border rounded text-teal-200 border-teal-400" >
-            <span class="block h-0.5 w-5 origin-center rounded-full bg-teal-200 translate-y-1.5 rotate-45"></span>
-            <span class="block h-0.5 w-5 origin-center rounded-full bg-teal-200 -translate-y-1 -rotate-45"></span>
-            <span class="hidden h-0.5 w-5 origin-center rounded-full bg-white"></span>
-        </button>
-    </div>
-    <div class="flex items-center flex-shrink-0 text-white mr-6 w-full lg:w-auto flex-1 lg:flex-none justify-center">
-        <svg id="logo" class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
-        <span class="font-semibold text-xl tracking-tight">G-Link</span>
-    </div>
-    <div id="menu-options" class="bg-gray-500 w-full lg:block flex-grow lg:flex lg:items-center lg:w-auto hidden mr-4">
-        <div class="text-sm lg:flex-grow">
-            <a href="#head" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-black mr-4 hover:bg-gray-200 hover:border hover:border-gray-200 hover:rounded text-teal-200 py-1 px-3">
-                A
-            </a>
-            <a href="#head" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-black mr-4 hover:bg-gray-200 hover:border hover:border-gray-200 hover:rounded text-teal-200 py-1 px-3">
-                B
-            </a>
-            <a href="#head" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-black mr-4 hover:bg-gray-200 hover:border hover:border-gray-200 hover:rounded text-teal-200 py-1 px-3">
-                C
-            </a>
-            <a href="/" class="block mt-4 lg:inline-block lg:mt-0 bg-blue-600 brightness-125 border border-blue-500 rounded text-teal-200 hover:text-black py-1 px-3">
-                Products (Form)
-            </a>
+<body class="w-full my-[0%] py-[0%] px-[10%] h-fit bg-gray-300 dark:bg-black">
+<!-- New navbar start-->
+<div class="navbar dark:from-gray-800 dark:to-gray-800 rounded-lg bg-gradient-to-r from-rose-400 via-blue-400 to-emerald-400 shadow-xl shadow-black/50 z-[4] sticky top-0 mb-10">
+    <div class="flex-1 lg:ml-4 ml-2 my-2">
+        <!--Hamburger menu-->
+        <div class="lg:hidden" >
+            <ul class="menu menu-horizontal px-1">
+                <label class="group btn btn-circle bg-transparent dark:bg-gray-800 swap swap-rotate border-emerald-300">
+                    <input type="checkbox" class="opacity-0 w-full h-full "/>
+                    <svg class="swap-off fill-emerald-300 group-hover:fill-black dark:fill-emerald-400 dark:group-hover:fill-white brightness-125" xmlns="http://www.w3.org/2000/svg" width="32" height="32"  viewBox="0 0 512 512"><path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z"/></svg>
+                    <div class="dropdown dropdown-open swap-on">
+                        <svg class="fill-emerald-300 group-hover:fill-black dark:fill-emerald-400 dark:group-hover:fill-white brightness-125" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><polygon points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49"/></svg>
+                        <ul tabindex="0" class="menu dropdown-content z-[1] p-2 shadow bg-green-100 dark:bg-gray-800 rounded-box w-36 mt-4">
+                            <li><a class="text-emerald-700 brightness-125 dark:text-emerald-400 dark:hover:text-white">Create</a></li>
+                            <li><a class="text-emerald-700 brightness-125 dark:text-emerald-400 dark:hover:text-white">Signup</a></li>
+                            <li><a class="text-emerald-700 brightness-125 dark:text-emerald-400 dark:hover:text-white">Login</a></li>
+                        </ul>
+                    </div>
+                </label>
+            </ul>
         </div>
+        <!-- Hamburger Menu ended -->
 
-        <div>
-            <a href="signup.html" class="inline-block <%= signup %> text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0 mr-4">
-                signup
-            </a>
+        <div class="flex lg:justify-start lg:items-start justify-center items-center lg:w-auto w-full">
+            <a class="btn btn-ghost normal-case text-xl text-emerald-400 brightness-125"><img src="images/GLink-Logo-alt.svg" class="h-full "></a>
         </div>
-        <div>
-            <a href="<%= loc %>" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">
-                <%= tagline %>
-            </a>
+        <div class="w-full justify-center items-center lg:flex hidden">
+            <a class="btn btn-outline dark:btn-success dark:bg-transparent border-yellow-300 text-yellow-300 hover:bg-yellow-400 hover:border-none hover:text-black brightness-125 lg:text-xl text-sm" href="/">Create</a>
         </div>
     </div>
-    <div class="w-9 h-9 rounded-full bg-emerald-800 cursor-pointer outline outline-offset-2 outline-4 outline-white hover:bg-emerald-700">
-        <button class="w-full h-full bg-white rounded-full" id="dropdownDefaultButton" data-dropdown-toggle="dropdown">
+    <div class="justify-center items-center lg:flex mr-10 my-2">
+        <a class="btn btn-outline dark:btn-success dark:text-success dark:bg-transparent border-yellow-300 text-yellow-300 hover:bg-yellow-400 hover:border-none hover:text-black brightness-125 lg:text-xl text-sm mr-8 lg:flex hidden" href="signup.html">Sign up</a>
+        <label class="swap swap-rotate">
+
+            <!-- this hidden checkbox controls the state -->
+            <input type="checkbox" id="theme-switcher" class="h-full w-full hidden" onclick="changeMode()"/>
+
+            <!-- sun icon -->
+            <svg id="sun" class="swap-on fill-yellow-500 w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41Z" fill="yellow"/>
+                <path d="M12,6.5A5.5,5.5,0,1,0,17.5,12A5.51,5.51,0,0,0,12,6.5Z" fill="yellow" /></svg>
 
-        </button>
+            <!-- moon icon -->
+            <svg id="moon" class="swap-off fill-white w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" fill="white"/></svg>
+
+        </label>
+        <script>
+            // window.onload = function(){
+            //         if (document.getElementById("html-tag").contains("dark")) {
+            //             console.log("dark");
+            //             document.getElementById("sun").classList.add("swap-active");
+            //         } else {
+            //             console.log("light");
+            //             document.getElementById("moon").classList.add("swap-active");
+            //         }
+            //   }
+            window.addEventListener('load', function(){
+                if (window.matchMedia &&
+                    window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    document.getElementById("theme-switcher").checked = true;
+                    console.log("prefers dark");
+                    changeMode();
+                } else {
+                    document.getElementById("theme-switcher").checked = false;
+                    console.log("prefers light");
+                    changeMode();
+                }
+            });
+            window.matchMedia('(prefers-color-scheme: dark)')
+                .addEventListener('change',({ matches }) => {
+                    if (matches) {
+                        console.log("change to dark mode!");
+                        document.getElementById("theme-switcher").checked = true;
+                        changeMode();
+                    } else {
+                        console.log("change to light mode!");
+                        document.getElementById("theme-switcher").checked = false;
+                        changeMode();
+                    }
+                });
+
+            function changeMode() {
+                let html_tag = document.getElementById("html-tag")
+                let box = document.getElementById("theme-switcher");
+                if (box.checked) {
+                    if (!html_tag.classList.contains("dark")) {
+                        html_tag.classList.add("dark");
+                    }
+                }
+                if (!box.checked) {
+                    if (html_tag.classList.contains("dark")) {
+                        html_tag.classList.remove("dark");
+                    }
+                }
+            }
+        </script>
     </div>
-    <div class="relative">
-        <button dropdown-trigger aria-expanded="false" type="button" class="inline-block px-6 py-3 mr-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl from-purple-700 to-pink-500 leading-pro text-sm ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 hover:scale-102 active:opacity-85 hover:shadow-soft-xs">Dropdown</button>
-        <p class="hidden transform-dropdown-show"></p>
-        <ul dropdown-menu class="z-10 text-sm lg:shadow-soft-3xl duration-250 before:duration-350 before:font-awesome before:ease-soft min-w-44 before:text-5.5 transform-dropdown pointer-events-none absolute left-auto top-1/2 m-0 -mr-4 mt-2 list-none rounded-lg border-0 border-solid border-transparent bg-white bg-clip-padding px-0 py-2 text-left text-slate-500 opacity-0 transition-all before:absolute before:right-7 before:left-auto before:top-0 before:z-40 before:text-white before:transition-all before:content-['\f0d8']">
-            <li>
-                <a class="py-1.2 lg:ease-soft clear-both block w-full whitespace-nowrap border-0 bg-transparent px-4 text-left font-normal text-slate-500 hover:bg-gray-200 hover:text-slate-700 dark:text-white dark:hover:bg-gray-200/80 dark:hover:text-slate-700 lg:transition-colors lg:duration-300" href="javascript:;">Action</a>
-            </li>
-            <li>
-                <a class="py-1.2 lg:ease-soft clear-both block w-full whitespace-nowrap border-0 bg-transparent px-4 text-left font-normal text-slate-500 hover:bg-gray-200 hover:text-slate-700 dark:text-white dark:hover:bg-gray-200/80 dark:hover:text-slate-700 lg:transition-colors lg:duration-300" href="javascript:;">Another action</a>
-            </li>
-            <li>
-                <a class="py-1.2 lg:ease-soft clear-both block w-full whitespace-nowrap border-0 bg-transparent px-4 text-left font-normal text-slate-500 hover:bg-gray-200 hover:text-slate-700 dark:text-white dark:hover:bg-gray-200/80 dark:hover:text-slate-700 lg:transition-colors lg:duration-300" href="javascript:;">Something else here</a>
-            </li>
-        </ul>
+
+    <div class="flex-none my-2 mr-2">
+
+        <div class="dropdown dropdown-end">
+            <label tabindex="0" class="btn btn-ghost btn-circle avatar border border-2 border-gray-800 dark:border-emerald-500 brightness-125 hover:border-none hover:ring-2 hover:ring-gray-800 dark:hover:ring-emerald-400 focus:ring-2 focus:ring-gray-800 dark:focus:ring-emerald-400">
+                <div class="w-10 rounded-full cursor-pointer ">
+                    <div class="w-full h-full bg-yellow-200 rounded-full flex justify-center items-center"><h1 class="self-center text-xl font-bold font-serif">B</h1></div>
+                </div>
+            </label>
+            <ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-green-100 dark:bg-gray-800 rounded-box w-36">
+                <li><a class="text-emerald-700 brightness-125 dark:text-emerald-400 font-bold uppercase dark:hover:text-white" href="links.html">My Links</a></li>
+                <li><a class="text-emerald-700 brightness-125 dark:text-emerald-400 font-bold uppercase dark:hover:text-white">Logout</a></li>
+            </ul>
+        </div>
     </div>
-    <script>
-        let active = document.getElementById("HamburgerActive");
-        let inactive = document.getElementById("HamburgerInactive");
-        let options = document.querySelector("#menu-options");
-        active.addEventListener("click", ()=>{
-            active.classList.add("hidden");
-            inactive.classList.remove("hidden");
-            options.classList.toggle("hidden");
-        })
-        inactive.addEventListener("mouseup", ()=>{
-            inactive.classList.add("hidden");
-            active.classList.remove("hidden");
-            options.classList.toggle("hidden");
-        });
-    </script>
-</nav>
-<h1 id="head" class="ml-4 text-5xl font-narrow">Create a GLink!</h1>
+</div>
+<!-- Navbar ended -->
+<h1 id="head" class="ml-4 mb-4 text-5xl font-narrow dark:text-success dark:brightness-125">Create a GLink!</h1>
 <!--<p class="ml-4 font-fingerpaint">Hello There!</p>-->
 
 
-<div id="root" class="mt-4 w-full">
-    <div id="formspace" class="flex flex-wrap flex-row w-full">
+<div id="root" class="w-full h-full">
+    <div id="formspace" class="flex flex-wrap flex-row w-full bg-white dark:bg-black rounded-lg shadow-lg shadow-black/50">
         <form id="form" class="lg:w-1/2 sm:w-full justify-center" action="/__add" method="post" onsubmit="return validate()">
             <div class="flex flex-wrap">
-                <label for="URL" class="text-2xl ml-4 font-rubik self-center">URL</label>
+                <label for="URL" class="text-2xl ml-4 font-rubik self-center dark:text-[#ffff59] dark:brightness-125">URL</label>
                 <span class="mandatory font-rubik self-center text-2xl">*</span>
-                <span class="font-rubik self-center m-1 text-2xl">:</span>
-                <div class="p-0.5 m-4 rounded-lg max-w-sm bg-gradient-to-r from-cyan-500 to-cyan-500 focus-within:from-rose-400 focus-within:via-fuchsia-500 focus-within:to-indigo-500 focus-within:caret-gray-600 focus-within:p-[3.2px]">
-                    <input type="text" name="url" id="URL" placeholder="https://example.com" required class="p-2 w-full rounded-lg focus:outline-none focus:shadow-lg focus:focus:shadow-black/50 text-center text-lg text-black font-bold">
-                </div>
+                <span class="font-rubik self-center m-1 text-2xl dark:text-[#ffff59] dark:brightness-125">:</span>
+                    <input type="text" name="url" id="URL" placeholder="https://example.com" required class="m-4 p-4 input input-bordered border-2 border-[#761eff] focus:outline-[#761eff]/50 focus:border-[#761eff] dark:focus:border-success dark:border-success dark:focus:outline-success dark:brightness-125 dark:bg-transparent dark:text-white max-w-sm w-full rounded-lg focus-within:ring-none focus:shadow-lg focus:shadow-black/50 text-center text-lg text-black font-bold">
             </div>
 
             <div class="flex flex-wrap">
-                <label for="labels" class="text-2xl ml-4 font-rubik self-center">GLink</label>
+                <label for="labels" class="text-2xl ml-4 font-rubik self-center dark:text-[#ffff59] dark:brightness-125">GLink</label>
                 <span class="mandatory font-rubik text-2xl self-center">*</span>
-                <span class="font-rubik self-center m-1 text-2xl">:</span>
-                <label for="GLink" id="labels" class=" ml-2 glink text-center text-xl self-center">glink.zip/</label>
-                <div class="p-0.5 ml-2 mr-4 my-4 rounded-lg max-w-sm bg-gradient-to-r from-cyan-500 to-cyan-500 focus-within:from-rose-400 focus-within:via-fuchsia-500 focus-within:to-indigo-500 focus-within:caret-gray-600 focus-within:p-[3.2px]">
-                    <input type="text" name="glink" id="GLink" class="glink p-2 w-full rounded-lg focus:outline-none focus:shadow-lg focus:focus:shadow-black/50 text-center text-lg text-black font-bold" placeholder="exampleWebsite">
-                </div>
+                <span class="font-rubik self-center m-1 text-2xl dark:text-[#ffff59] dark:brightness-125">:</span>
+                <label for="GLink" id="labels" class=" ml-2 glink text-center text-xl self-center dark:text-[#ffff59] dark:brightness-125">glink.zip/</label>
+
+                    <input type="text" name="glink" id="GLink" class="m-4 glink p-2 max-w-sm rounded-lg input input-bordered border-2 border-[#761eff] focus:outline-[#761eff]/50 focus:border-[#761eff] dark:focus:border-success dark:border-success dark:focus:outline-success dark:brightness-125 dark:bg-transparent dark:text-white focus:shadow-lg focus:focus:shadow-black/50 text-center text-lg text-black font-bold" placeholder="exampleWebsite">
+
             </div>
 
-            <label for="restricted" class="ml-4 self-center text-2xl font-rubik">Geo-restricted? : </label><input type="checkbox" name="restricted" id="restricted" class="ml-2 mr-4 my-4 text-center font-rubik ease-soft rounded-1.4 w-6 h-6 cursor-pointer checked:accent-blue-700 shadow-lg shadow-black/50 peer"><span id="loadingText" class="font-rubik self-center text-center text-xl" style="position: relative; left: 20px;"></span>
+            <label for="restricted" class="ml-4 self-center text-2xl font-rubik dark:text-[#ffff59] dark:brightness-125">Geo-restricted? : </label><input type="checkbox" name="restricted" id="restricted" class="ml-2 mr-4 my-4 text-center font-rubik ease-soft rounded-1.4 w-6 h-6 cursor-pointer checked:accent-blue-700 shadow-lg shadow-black/50 peer"><span id="loadingText" class="font-rubik self-center text-center text-xl" style="position: relative; left: 20px;"></span>
 
             <span class="flex flex-wrap invisible peer-checked:visible" id="js-enabled">
-                <label for="radiusSelect" id="radiusLabel" class="ml-4 font-rubik text-2xl self-center">Radius</label><span id="mandatory-radius" class="mandatory font-rubik text-2xl self-center">*</span><span class="font-rubik self-center m-1 text-2xl">:</span>
-                <div class="p-0.5 ml-2 mr-4 my-4 rounded-lg max-w-sm bg-gradient-to-r from-cyan-500 to-cyan-500 focus-within:from-rose-400 focus-within:via-fuchsia-500 focus-within:to-indigo-500 focus-within:p-[3.2px]">
-                    <select name="radiusSelect" id="radiusSelect" class="cursor-pointer text-lg p-2 w-full rounded-lg focus:outline-none invalid:text-gray-400 font-bold">
+                <label for="radiusSelect" id="radiusLabel" class="ml-4 font-rubik text-2xl self-center dark:text-[#ffff59] dark:brightness-125">Radius</label><span id="mandatory-radius" class="mandatory font-rubik text-2xl self-center">*</span><span class="font-rubik self-center m-1 text-2xl dark:text-[#ffff59] dark:brightness-125 ">:</span>
+
+                    <select name="radiusSelect" id="radiusSelect" class="m-4 cursor-pointer text-lg pr-8 w-auto rounded-lg input input-bordered border-2 border-[#761eff] focus:outline-[#761eff]/50 focus:border-[#761eff] dark:focus:border-success dark:border-success dark:focus:outline-success dark:brightness-125 dark:bg-transparent dark:text-white invalid:text-gray-400 font-bold">
                         <option value="" selected disabled hidden>Choose a radius for your geo link</option>
                         <option value="5">5 mi</option>
                         <option value="10">10 mi</option>
                         <option value="15">15 mi</option>
                         <option value="20">20 mi</option>
                     </select>
-                </div>
             </span>
             <noscript>
                 <style>
@@ -135,12 +162,11 @@
                 </style>
             </noscript>
             <span role="alert" class="m-4 font-rubik" id="error" aria-hidden="true">Invalid entry</span>
-            <input type="submit" id="button" value="Zip It!" class="scale-125 brightness-125 ml-20 font-rubik bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-400 hover:to-blue-400 hover:shadow-lg hover:shadow-black/50 transition hover:-translate-y-1 hover:scale-150 duration-600 ease-in-out rounded-full cursor-pointer">
+            <input type="submit" id="button" value="Zip It!" class="mt-4 scale-125 brightness-125 ml-20 font-rubik bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-400 hover:to-blue-400 hover:shadow-lg hover:shadow-black/50 transition hover:-translate-y-1 hover:scale-150 duration-600 ease-in-out rounded-full cursor-pointer">
             <input type="hidden" name="latitude" id="latitude">
             <input type="hidden" name="longitude" id="longitude">
-
         </form>
-        <div class="lg:w-1/2 sm:w-full mt-4">
+        <div class="lg:w-1/2 sm:w-full mt-4 dark:text-white">
             <ul class="list-decimal text-left flex flex-col flex-wrap text-lg mx-8 mb-8">
                 <li class="mb-3">Enter the URL</li>
                 <li class="mb-3">Enter the GLink - a keyword used to identify your URL. This is optional, and if left blank, a random GLink will be generated for you.</li>
@@ -151,9 +177,7 @@
             </ul>
         </div>
     </div>
-    <hr>
-    <img src="images/cat.gif">
-    <p id="footer" class="object-none object-bottom">Insert Footer Here</p>
+<!--    <p id="footer" class="object-none object-bottom">Insert Footer Here</p>-->
     <script src="src/index.js"></script>
 
 </div>