From e3ddb6f95aea2b507d5cc7708afee207ea8e355a Mon Sep 17 00:00:00 2001
From: Matt James <mattj@Matts-MacBook-Pro.local>
Date: Tue, 30 Jul 2024 15:15:30 +0100
Subject: [PATCH] 0.2.0

---
 bs-config.js                               |   2 +-
 config.json                                |   4 +-
 handlers/email.js                          |  12 +-
 index.js                                   |   2 +-
 public/assets/tailwind.css                 | 276 +++-----
 public/javascript/search/index.js          |   2 +-
 routes/Instance/Files.js                   |   2 +-
 views/500.ejs                              |   2 +-
 views/account.ejs                          |  24 +-
 views/admin/apikeys.ejs                    |  24 +-
 views/admin/auditlogs.ejs                  |   2 +-
 views/admin/edit-user.ejs                  |  14 +-
 views/admin/images.ejs                     |  38 +-
 views/admin/instances.ejs                  |  54 +-
 views/admin/node.ejs                       |  18 +-
 views/admin/nodes.ejs                      |  63 +-
 views/admin/overview.ejs                   |  38 +-
 views/admin/plugin.ejs                     |  10 +-
 views/admin/plugins.ejs                    |  22 +-
 views/admin/settings/appearance.ejs        | 196 +++---
 views/admin/settings/smtp.ejs              |  30 +-
 views/admin/users.ejs                      |  50 +-
 views/auth/2fa.ejs                         |  16 +-
 views/auth/login.ejs                       |  41 +-
 views/auth/password-reset-form.ejs         |  16 +-
 views/auth/register.ejs                    |  21 +-
 views/auth/resend-verification.ejs         |  14 +-
 views/auth/reset-password.ejs              |  14 +-
 views/components/admin_addons_template.ejs | 456 +++++++++----
 views/components/instance.ejs              |  42 +-
 views/components/settings.ejs              |  26 +-
 views/components/template.ejs              | 715 +++++++++++----------
 views/enable-2fa.ejs                       |   8 +-
 views/errors/404.ejs                       |   2 +-
 views/instance/archives.ejs                |   8 +-
 views/instance/createFile.ejs              |   8 +-
 views/instance/createFolder.ejs            |   8 +-
 views/instance/db.ejs                      |  14 +-
 views/instance/file.ejs                    |   6 +-
 views/instance/files.ejs                   |  71 +-
 views/instance/ftp.ejs                     |  12 +-
 views/instance/instance.ejs                |  66 +-
 views/instance/network.ejs                 |   4 +-
 views/instance/settings.ejs                |   8 +-
 views/instance/suspended.ejs               |   5 +-
 views/instance/users.ejs                   |  14 +-
 views/instances.ejs                        |  24 +-
 47 files changed, 1325 insertions(+), 1179 deletions(-)

diff --git a/bs-config.js b/bs-config.js
index a73cf3c..a6ff1d5 100644
--- a/bs-config.js
+++ b/bs-config.js
@@ -7,5 +7,5 @@ module.exports = {
     },
     open: false,
     notify: false
-  };
+};
   
diff --git a/config.json b/config.json
index 8499308..4a320e4 100644
--- a/config.json
+++ b/config.json
@@ -1,6 +1,6 @@
 {
-    "baseURL": "http://localhost:3001",
+    "baseUri": "http://localhost:3001",
     "port": 3001,
     "domain": "localhost",
-    "version": "0.1.0-beta7"
+    "version": "0.2.0-beta1"
 } 
diff --git a/handlers/email.js b/handlers/email.js
index 5051f22..a174c46 100644
--- a/handlers/email.js
+++ b/handlers/email.js
@@ -112,10 +112,10 @@ async function sendVerificationEmail(email, token) {
             <p style="font-size: 16px; text-align: center; margin-bottom: 20px;">Hello,</p>
             <p style="font-size: 16px; text-align: center; margin-bottom: 20px;">Thank you for registering on ${name}. Please click the button below to verify your email address:</p>
             <div style="text-align: center; margin-bottom: 20px;">
-              <a href="${config.baseURL}/verify/${token}" style="display: inline-block; padding: 14px 28px; font-size: 16px; color: #ffffff; background-color: #4CAF50; text-decoration: none; border-radius: 30px; box-shadow: 0 4px 6px rgba(76, 175, 80, 0.2);">Verify Email Address</a>
+              <a href="${config.baseUri}/verify/${token}" style="display: inline-block; padding: 14px 28px; font-size: 16px; color: #ffffff; background-color: #4CAF50; text-decoration: none; border-radius: 30px; box-shadow: 0 4px 6px rgba(76, 175, 80, 0.2);">Verify Email Address</a>
             </div>
             <p style="font-size: 16px; text-align: center; margin-bottom: 20px;">If you're having trouble clicking the button above, you can also verify your email by copying and pasting the following link into your browser:</p>
-            <p style="font-size: 16px; text-align: center; margin-bottom: 20px;"><a href="${config.baseURL}/verify/${token}" style="color: #4CAF50; word-wrap: break-word; text-decoration: underline;">${config.baseURL}/verify/${token}</a></p>
+            <p style="font-size: 16px; text-align: center; margin-bottom: 20px;"><a href="${config.baseUri}/verify/${token}" style="color: #4CAF50; word-wrap: break-word; text-decoration: underline;">${config.baseUri}/verify/${token}</a></p>
             <p style="font-size: 16px; text-align: center; margin-bottom: 20px;">If you didn't create an account on ${name}, please disregard this email.</p>
             <p style="font-size: 16px; text-align: center;">Thanks,<br/>The ${name} Team</p>
           </div>
@@ -241,10 +241,10 @@ async function sendTestEmail(recipientEmail) {
               <p style="font-size: 16px;">Hello,</p>
               <p style="font-size: 16px;">We received a request to reset your password. Click the button below to reset it:</p>
               <div style="text-align: center; margin: 20px 0;">
-                <a href="${config.baseURL}/auth/reset/${token}" style="display: inline-block; padding: 12px 24px; font-size: 16px; color: #ffffff; background-color: #4CAF50; text-decoration: none; border-radius: 5px;">Reset Password</a>
+                <a href="${config.baseUri}/auth/reset/${token}" style="display: inline-block; padding: 12px 24px; font-size: 16px; color: #ffffff; background-color: #4CAF50; text-decoration: none; border-radius: 5px;">Reset Password</a>
               </div>
               <p style="font-size: 16px;">If the button above does not work, click the link below:</p>
-              <p style="font-size: 16px; text-align: center;"><a href="${config.baseURL}/auth/reset/${token}" style="color: #4CAF50; word-wrap: break-word;">${config.baseURL}/auth/reset/${token}</a></p>
+              <p style="font-size: 16px; text-align: center;"><a href="${config.baseUri}/auth/reset/${token}" style="color: #4CAF50; word-wrap: break-word;">${config.baseUri}/auth/reset/${token}</a></p>
               <p style="font-size: 16px;">If you did not request a password reset, please ignore this email. Your password will remain unchanged.</p>
               <p style="font-size: 16px;">Thank you,</p>
               <p style="font-size: 16px;">The ${name} Team</p>
@@ -275,10 +275,10 @@ async function sendTestEmail(recipientEmail) {
               <p style="font-size: 16px;">Hello,</p>
               <p style="font-size: 16px;">We received a request to reset your password. Click the button below to reset it:</p>
               <div style="text-align: center; margin: 20px 0;">
-                <a href="${config.baseURL}/auth/reset/${token}" style="display: inline-block; padding: 12px 24px; font-size: 16px; color: #ffffff; background-color: #4CAF50; text-decoration: none; border-radius: 5px;">Reset Password</a>
+                <a href="${config.baseUri}/auth/reset/${token}" style="display: inline-block; padding: 12px 24px; font-size: 16px; color: #ffffff; background-color: #4CAF50; text-decoration: none; border-radius: 5px;">Reset Password</a>
               </div>
               <p style="font-size: 16px;">If the button above does not work, click the link below:</p>
-              <p style="font-size: 16px; text-align: center;"><a href="${config.baseURL}/auth/reset/${token}" style="color: #4CAF50; word-wrap: break-word;">${config.baseURL}/auth/reset/${token}</a></p>
+              <p style="font-size: 16px; text-align: center;"><a href="${config.baseUri}/auth/reset/${token}" style="color: #4CAF50; word-wrap: break-word;">${config.baseUri}/auth/reset/${token}</a></p>
               <p style="font-size: 16px;">If you did not request a password reset, please ignore this email. Your password will remain unchanged.</p>
               <p style="font-size: 16px;">Thank you,</p>
               <p style="font-size: 16px;">The ${name} Team</p>
diff --git a/index.js b/index.js
index b55066b..fd09f1b 100644
--- a/index.js
+++ b/index.js
@@ -6,7 +6,7 @@
  *  /____/_/|_|\__, / .___/\____/_/   \__/  
  *           /____/_/                  
  *              
- *  Skyport Panel v1 (Firestorm)
+ *  Skyport Panel (Incendior)
  *  (c) 2024 Matt James and contributers
  * 
 */
diff --git a/public/assets/tailwind.css b/public/assets/tailwind.css
index 1a04180..6bac6dc 100644
--- a/public/assets/tailwind.css
+++ b/public/assets/tailwind.css
@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.6 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -953,6 +953,14 @@ select {
   margin: 1.5rem;
 }
 
+.m-8 {
+  margin: 2rem;
+}
+
+.m-5 {
+  margin: 1.25rem;
+}
+
 .-mx-2 {
   margin-left: -0.5rem;
   margin-right: -0.5rem;
@@ -1119,6 +1127,10 @@ select {
   margin-top: 0.875rem;
 }
 
+.mt-32 {
+  margin-top: 8rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -1147,14 +1159,6 @@ select {
   margin-top: auto;
 }
 
-.mt-44 {
-  margin-top: 11rem;
-}
-
-.mt-32 {
-  margin-top: 8rem;
-}
-
 .block {
   display: block;
 }
@@ -1234,6 +1238,10 @@ select {
   height: 1rem;
 }
 
+.h-48 {
+  height: 12rem;
+}
+
 .h-5 {
   height: 1.25rem;
 }
@@ -1254,14 +1262,6 @@ select {
   height: 100%;
 }
 
-.h-48 {
-  height: 12rem;
-}
-
-.h-screen {
-  height: 100vh;
-}
-
 .min-h-full {
   min-height: 100%;
 }
@@ -1355,14 +1355,6 @@ select {
   max-width: 28rem;
 }
 
-.max-w-screen-sm {
-  max-width: 640px;
-}
-
-.max-w-screen-xl {
-  max-width: 1280px;
-}
-
 .max-w-sm {
   max-width: 24rem;
 }
@@ -1631,6 +1623,10 @@ select {
   border-radius: 0.75rem;
 }
 
+.rounded-2xl {
+  border-radius: 1rem;
+}
+
 .rounded-b-lg {
   border-bottom-right-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
@@ -1651,6 +1647,16 @@ select {
   border-top-right-radius: 0.5rem;
 }
 
+.rounded-t-xl {
+  border-top-left-radius: 0.75rem;
+  border-top-right-radius: 0.75rem;
+}
+
+.rounded-b-xl {
+  border-bottom-right-radius: 0.75rem;
+  border-bottom-left-radius: 0.75rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1688,6 +1694,11 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-gray-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
+
 .border-neutral-600\/30 {
   border-color: rgb(82 82 82 / 0.3);
 }
@@ -1713,25 +1724,6 @@ select {
   border-color: rgb(255 255 255 / 0.05);
 }
 
-.border-gray-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(75 85 99 / var(--tw-border-opacity));
-}
-
-.border-gray-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(55 65 81 / var(--tw-border-opacity));
-}
-
-.border-gray-700\/20 {
-  border-color: rgb(55 65 81 / 0.2);
-}
-
-.border-gray-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity));
-}
-
 .bg-\[\#101010\] {
   --tw-bg-opacity: 1;
   background-color: rgb(16 16 16 / var(--tw-bg-opacity));
@@ -1901,69 +1893,10 @@ select {
   background-color: rgb(234 179 8 / var(--tw-bg-opacity));
 }
 
-.bg-gray-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-}
-
-.bg-gray-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-}
-
-.bg-gray-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-}
-
-.bg-indigo-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
-}
-
-.bg-gray-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
-
-.bg-neutral-950 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(10 10 10 / var(--tw-bg-opacity));
-}
-
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
 
-.bg-gradient-to-r {
-  background-image: linear-gradient(to right, var(--tw-gradient-stops));
-}
-
-.from-gray-800 {
-  --tw-gradient-from: #1f2937 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.from-indigo-500 {
-  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.via-gray-900 {
-  --tw-gradient-to: rgb(17 24 39 / 0)  var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), #111827 var(--tw-gradient-via-position), var(--tw-gradient-to);
-}
-
-.to-black {
-  --tw-gradient-to: #000 var(--tw-gradient-to-position);
-}
-
-.to-purple-500 {
-  --tw-gradient-to: #a855f7 var(--tw-gradient-to-position);
-}
-
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -2160,6 +2093,10 @@ select {
   padding-top: 2rem;
 }
 
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -2312,6 +2249,11 @@ select {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .text-gray-600 {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
@@ -2367,6 +2309,11 @@ select {
   color: rgb(254 226 226 / var(--tw-text-opacity));
 }
 
+.text-red-300 {
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity));
+}
+
 .text-red-400 {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity));
@@ -2411,21 +2358,6 @@ select {
   color: rgb(212 212 216 / var(--tw-text-opacity));
 }
 
-.text-gray-300 {
-  --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
-}
-
-.text-indigo-400 {
-  --tw-text-opacity: 1;
-  color: rgb(129 140 248 / var(--tw-text-opacity));
-}
-
-.text-gray-500 {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
 .placeholder-neutral-400::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(163 163 163 / var(--tw-placeholder-opacity));
@@ -2472,6 +2404,12 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -2496,18 +2434,6 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-md {
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-2xl {
-  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .ring-1 {
   --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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2564,20 +2490,20 @@ select {
   transition-duration: 150ms;
 }
 
-.transition-opacity {
-  transition-property: opacity;
+.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;
 }
 
-.transition-transform {
-  transition-property: transform;
+.transition-opacity {
+  transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 
-.transition-colors {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+.transition-transform {
+  transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -2610,6 +2536,10 @@ select {
   border-radius: 0.5rem;
 }
 
+.file\:rounded-xl::file-selector-button {
+  border-radius: 0.75rem;
+}
+
 .file\:border-0::file-selector-button {
   border-width: 0px;
 }
@@ -2637,6 +2567,10 @@ select {
   font-weight: 600;
 }
 
+.file\:font-medium::file-selector-button {
+  font-weight: 500;
+}
+
 .file\:text-neutral-300::file-selector-button {
   --tw-text-opacity: 1;
   color: rgb(212 212 212 / var(--tw-text-opacity));
@@ -2701,11 +2635,6 @@ select {
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-blue-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-emerald-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(16 185 129 / var(--tw-bg-opacity));
@@ -2799,6 +2728,10 @@ select {
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-white\/10:hover {
+  background-color: rgb(255 255 255 / 0.1);
+}
+
 .hover\:bg-white\/25:hover {
   background-color: rgb(255 255 255 / 0.25);
 }
@@ -2812,24 +2745,9 @@ select {
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-indigo-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(67 56 202 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-indigo-900:hover {
+.hover\:bg-amber-500:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(49 46 129 / var(--tw-bg-opacity));
-}
-
-.hover\:from-indigo-600:hover {
-  --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.hover\:to-purple-600:hover {
-  --tw-gradient-to: #9333ea var(--tw-gradient-to-position);
+  background-color: rgb(245 158 11 / var(--tw-bg-opacity));
 }
 
 .hover\:text-amber-600:hover {
@@ -2852,13 +2770,14 @@ select {
   color: rgb(212 212 212 / var(--tw-text-opacity));
 }
 
-.hover\:text-white:hover {
+.hover\:text-red-400:hover {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(248 113 113 / var(--tw-text-opacity));
 }
 
-.hover\:underline:hover {
-  text-decoration-line: underline;
+.hover\:text-white:hover {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
 .hover\:shadow:hover {
@@ -2893,6 +2812,11 @@ select {
   border-style: none;
 }
 
+.focus\:border-indigo-500:focus {
+  --tw-border-opacity: 1;
+  border-color: rgb(99 102 241 / var(--tw-border-opacity));
+}
+
 .focus\:border-neutral-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(115 115 115 / var(--tw-border-opacity));
@@ -2911,11 +2835,6 @@ select {
   border-color: rgb(255 255 255 / 0.1);
 }
 
-.focus\:border-indigo-500:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(99 102 241 / var(--tw-border-opacity));
-}
-
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2951,14 +2870,14 @@ select {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:ring-blue-400:focus {
+.focus\:ring-emerald-500:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-emerald-500:focus {
+.focus\:ring-indigo-500:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
 }
 
 .focus\:ring-neutral-500:focus {
@@ -2980,11 +2899,6 @@ select {
   --tw-ring-color: transparent;
 }
 
-.focus\:ring-indigo-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
-}
-
 .focus\:ring-offset-2:focus {
   --tw-ring-offset-width: 2px;
 }
@@ -3268,21 +3182,11 @@ select {
     padding-right: 1rem;
   }
 
-  .lg\:px-6 {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-
   .lg\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
   }
 
-  .lg\:py-32 {
-    padding-top: 8rem;
-    padding-bottom: 8rem;
-  }
-
   .lg\:pl-56 {
     padding-left: 14rem;
   }
diff --git a/public/javascript/search/index.js b/public/javascript/search/index.js
index 6daf2b9..7e49403 100644
--- a/public/javascript/search/index.js
+++ b/public/javascript/search/index.js
@@ -56,7 +56,7 @@ function filterLinks(searchTerm) {
         'py-2',
         'text-sm',
         'font-medium',
-        'rounded-lg',
+        'rounded-xl',
       );
 
       if (index === 0) {
diff --git a/routes/Instance/Files.js b/routes/Instance/Files.js
index 3dd881c..d4b3d64 100644
--- a/routes/Instance/Files.js
+++ b/routes/Instance/Files.js
@@ -43,7 +43,7 @@ router.get("/instance/:id/files", async (req, res) => {
         const files = await fetchFiles(instance, req.query.path);
         res.render('instance/files', { 
             req, 
-            files, 
+            files: files, 
             user: req.user, 
             name: await db.get('name') || 'Skyport', 
             logo: await db.get('logo') || false ,
diff --git a/views/500.ejs b/views/500.ejs
index 3d3196a..49400c6 100644
--- a/views/500.ejs
+++ b/views/500.ejs
@@ -4,7 +4,7 @@
 <div class="bg-transparent">
     <div class="sm:flex sm:items-center px-8 pt-4">
        <div class="sm:flex-auto">
-          <h1 class="text-base font-semibold leading-6 text-white">Manage Instance</h1>
+          <h1 class="text-base font-medium leading-6 text-white">Manage Instance</h1>
           <p class="mt-1 tracking-tight text-sm text-neutral-500">View, update and manage an instance on the Skyport panel.</p>
        </div>
     </div>
diff --git a/views/account.ejs b/views/account.ejs
index 5f247e1..0e06581 100644
--- a/views/account.ejs
+++ b/views/account.ejs
@@ -2,16 +2,14 @@
 <main id="content">
    <div class="px-4 sm:px-6 lg:px-8">
       <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-4">
-         <div class="p-3 bg-transparent shadow-xl border border-white/5 rounded-lg overflow-hidden sm:p-6 lg:p-10 card" style="width: 800px;">
+         <div class="p-3 bg-transparent shadow-xl border border-white/5 rounded-xl overflow-hidden sm:p-6 lg:p-10 card" style="width: 800px;">
             <div class="lg:flex lg:items-center lg:justify-between">
                <div class="min-w-0 flex-1">
                   <h2 class="text-md font-medium tracking-tight">
-                     <span class="text-white flex flex-row">Edit profile <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="gray" class="size-6 ml-2">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
-                      </svg>
+                     <span class="text-white flex flex-row">Update account
                       </span>
                      <span id="statusBg"
-                        class="bg-neutral-600/20 text-neutral-400 text-sm ml-1.5 font-medium me-2 px-2.5 py-1 rounded-full">
+                        class="bg-neutral-600/20 hidden text-neutral-400 text-sm ml-1.5 font-medium me-2 px-2.5 py-1 rounded-full">
                         <span
                            id="status">
                             <%= user.username %>
@@ -23,31 +21,31 @@
                         <div class="w-1/2 mr-4">
                            <label class="text-neutral-400 text-sm tracking-tight mb-2">Username:</label>
                            <input id="username" type="text" name="username" 
-                           class="rounded-lg focus:ring-transparent focus:border-transparent text-sm mt-1 mb-0 w-full items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-600/20 dark:bg-neutral-900 placeholder-neutral-400 text-white border border-black/10" 
+                           class="rounded-xl focus:ring-transparent focus:border-transparent text-sm mt-1 mb-0 w-full items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-600/20 dark:bg-neutral-900 placeholder-neutral-400 text-white border border-black/10" 
                            style="width: 340px;" placeholder="<%= user.username %>" />
                            <span id="username-feedback" class="mt-2 border border-neutral-600/30 text-neutral-400 text-xs font-medium me-2 px-2.5 py-1 rounded-full"></span>
                         </div>
                         <div class="w-1/2">
                            <label class="text-neutral-400 text-sm tracking-tight mt-4">Email:</label>
-                           <input id="email" type="email" name="email" value="" class="text-white rounded-lg focus:ring-transparent focus:border-transparent  text-sm mt-1 mb-0 w-full items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-600/20 dark:bg-neutral-900 placeholder:/20  border border-black/10" style="width: 340px;" placeholder="<%= user.email %>" disabled />
+                           <input id="email" type="email" name="email" value="" class="text-white rounded-xl focus:ring-transparent focus:border-transparent  text-sm mt-1 mb-0 w-full items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-600/20 dark:bg-neutral-900 placeholder:text-white/20  border border-black/10" style="width: 340px;" placeholder="<%= user.email %>" disabled />
                         </div>
                      </div>
-                     <button type="submit" id="change-username-btn" class="mt-4 block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" disabled>Update Username</button>
+                     <button type="submit" id="change-username-btn" class="mt-4 block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" disabled>Update Username</button>
                   </form>
 
                   <form id="change-password-form" action="/change-password" method="POST" class="mt-5">
                      <label class="text-neutral-400 text-sm tracking-tight mb-3">Current Password:</label>
                      <div id="current-password-feedback" class="border border-neutral-600/30 text-neutral-400 text-xs ml-1.5 font-medium me-2 px-2.5 py-1 rounded-full"></div>
-                     <input id="currentPassword" type="password" name="currentPassword" class="rounded-lg focus:ring-transparent focus:border-transparent text-sm mt-1 mb-0 w-full items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-600/20 dark:bg-neutral-900 placeholder-neutral-400 text-white border border-black/10" placeholder="********" />
+                     <input id="currentPassword" type="password" name="currentPassword" class="rounded-xl focus:ring-transparent focus:border-transparent text-sm mt-1 mb-0 w-full items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-600/20 dark:bg-neutral-900 placeholder-neutral-400 text-white border border-black/10" placeholder="********" />
                      <label class="block text-neutral-400 text-sm tracking-tight mt-4">New Password:</label>
-                     <input id="newPassword" type="password" name="newPassword" class="rounded-lg focus:ring-transparent focus:border-transparent text-sm mt-1 mb-0 w-full items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-600/20 dark:bg-neutral-900 placeholder-neutral-400 text-white border border-black/10" placeholder="********" disabled />
-                     <button type="submit" class="mt-4 block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Update Password</button>
+                     <input id="newPassword" type="password" name="newPassword" class="rounded-xl focus:ring-transparent focus:border-transparent text-sm mt-1 mb-0 w-full items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-600/20 dark:bg-neutral-900 placeholder-neutral-400 text-white border border-black/10" placeholder="********" disabled />
+                     <button type="submit" class="mt-4 block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Update Password</button>
                  </form>
                  <% if (user.twoFAEnabled !== true) { %>
-                  <button onclick="window.location.href = '/enable-2fa';" class="mt-4 block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Enable 2FA</button>      
+                  <button onclick="window.location.href = '/enable-2fa';" class="mt-4 block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Enable 2FA</button>      
                  <% } else { %>
                  <form action="/disable-2fa" method="POST">
-                  <button class="mt-4 block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Disable 2FA</button>
+                  <button class="mt-4 block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Disable 2FA</button>
                  </form>
                  <% } %>
                </div>
diff --git a/views/admin/apikeys.ejs b/views/admin/apikeys.ejs
index c16c2de..dc2e88a 100644
--- a/views/admin/apikeys.ejs
+++ b/views/admin/apikeys.ejs
@@ -3,7 +3,7 @@
   <div class="bg-transparent">
     <div class="sm:flex sm:items-center px-8 pt-4">
       <div class="sm:flex-auto">
-        <h1 class="text-base font-semibold leading-6 text-white">API Keys</h1>
+        <h1 class="text-base font-medium leading-6 text-white">API Keys</h1>
         <p class="mt-1 tracking-tight text-sm text-neutral-500">
           A list of all the API Keys on the Skyport panel.
         </p>
@@ -12,7 +12,7 @@
         <button
           id="createButton"
           type="button"
-          class="block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+          class="block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
         >
           Create new API Key
         </button>
@@ -20,7 +20,7 @@
     </div>
     <% if (req.query.err == "CREATED") { %>
       <div class="mt-6 w-full">
-        <div class="rounded-lg bg-emerald-800/10 px-4 py-6 mt-8 ml-8 mb-8 mr-8">
+        <div class="rounded-xl bg-emerald-800/10 px-4 py-6 mt-8 ml-8 mb-8 mr-8">
           <div class="flex">
              <div class="flex-shrink-0 ml-1.5">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 mt-2 text-emerald-400">
@@ -28,7 +28,7 @@
                 </svg>                
              </div>
              <div class="ml-5">
-                <h3 class="text-sm font-semibold text-emerald-400">CREATED!</h3>
+                <h3 class="text-sm font-medium text-emerald-400">CREATED!</h3>
                 <div class="text-sm text-emerald-400/50">
                    <p>The API-Key was CREATED successfully.</p>
                 </div>
@@ -49,22 +49,22 @@
           <tr>
             <th
               scope="col"
-              class="py-2 pl-0 pr-8 font-semibold sm:pl-80 lg:pl-8"
+              class="py-2 pl-0 pr-8 font-medium sm:pl-80 lg:pl-8"
             >
               ID
             </th>
-            <th scope="col" class="py-2 pl-0 pr-8 font-semibold sm:table-cell">
+            <th scope="col" class="py-2 pl-0 pr-8 font-medium sm:table-cell">
               Key
             </th>
             <th
               scope="col"
-              class="py-2 pl-0 pr-8 font-semibold md:table-cell lg:pr-20"
+              class="py-2 pl-0 pr-8 font-medium md:table-cell lg:pr-20"
             >
               Created At
             </th>
             <th
               scope="col"
-              class="py-2 pl-0 pr-8 font-semibold md:table-cell lg:pr-20"
+              class="py-2 pl-0 pr-8 font-medium md:table-cell lg:pr-20"
             >
               Actions
             </th>
@@ -83,7 +83,7 @@
             <td class="hidden py-4 pl-0 pr-4 sm:table-cell sm:pr-8">
               <div class="flex gap-x-3">
                 <div
-                  class="rounded-lg font-mono bg-neutral-800/40 px-2 py-1 text-xs font-medium text-neutral-400 ring-1 ring-inset ring-white/10"
+                  class="rounded-xl font-mono bg-neutral-800/40 px-2 py-1 text-xs font-medium text-neutral-400 ring-1 ring-inset ring-white/10"
                 >
                   <%= key.key %>
                 </div>
@@ -93,7 +93,7 @@
             <td class="hidden py-4 pl-0 pr-4 sm:table-cell sm:pr-8">
                 <div class="flex gap-x-3">
                   <div
-                    class="rounded-lg bg-neutral-800/40 px-2 py-1 text-xs font-medium text-neutral-400 ring-1 ring-inset ring-white/10"
+                    class="rounded-xl bg-neutral-800/40 px-2 py-1 text-xs font-medium text-neutral-400 ring-1 ring-inset ring-white/10"
                   >
                     <%= key.createdAt %>
                   </div>
@@ -106,7 +106,7 @@
                 <button
                   id="removeButton"
                   type="button"
-                  class="removeButton block rounded-lg bg-red-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-lg hover:bg-red-500 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                  class="removeButton block rounded-xl bg-red-600 px-3 py-2 text-center text-sm font-medium text-white shadow-lg hover:bg-red-500 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                   data-keyid="<%= key.id %>"                
                   >
                   Remove
@@ -123,7 +123,7 @@
         <button
           id="createNodeBtn"
           type="button"
-          class="block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+          class="block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
         >
           Click to confirm creation
         </button>
diff --git a/views/admin/auditlogs.ejs b/views/admin/auditlogs.ejs
index 375ce2b..9e1d08e 100644
--- a/views/admin/auditlogs.ejs
+++ b/views/admin/auditlogs.ejs
@@ -3,7 +3,7 @@
   <div class="bg-transparent">
     <div class="sm:flex sm:items-center px-8 pt-4">
       <div class="sm:flex-auto">
-        <h1 class="text-base font-semibold leading-6 text-white">Audit Logs</h1>
+        <h1 class="text-base font-medium leading-6 text-white">Audit Logs</h1>
         <p class="mt-1 tracking-tight text-sm text-neutral-500">
           A history of actions performed by admins.
         </p>
diff --git a/views/admin/edit-user.ejs b/views/admin/edit-user.ejs
index 91fead1..2141e08 100644
--- a/views/admin/edit-user.ejs
+++ b/views/admin/edit-user.ejs
@@ -3,7 +3,7 @@
   <div class="bg-transparent">
     <div class="sm:flex sm:items-center px-8 pt-4">
       <div class="sm:flex-auto">
-        <h1 class="text-base font-semibold leading-6 text-white">Edit User</h1>
+        <h1 class="text-base font-medium leading-6 text-white">Edit User</h1>
         <p class="mt-1 tracking-tight text-sm text-neutral-500">
           Modify the details of the selected user.
         </p>
@@ -16,7 +16,7 @@
           id="userName"
           type="text"
           name="username"
-          class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
+          class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
           value="<%= editUser.username %>"
           placeholder="JohnDoe"
         />
@@ -25,7 +25,7 @@
           id="email"
           type="email"
           name="email"
-          class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
+          class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
           value="<%= editUser.email %>"
           placeholder="your@email.tld"
         />
@@ -34,14 +34,14 @@
           id="userPass"
           type="password"
           name="password"
-          class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
+          class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
           placeholder="******"
         />
         <label class="text-neutral-400 text-sm tracking-tight mb-2">Admin:</label>
         <select
           id="userAdmin"
           name="admin"
-          class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
+          class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
         >
           <option value="true" <%= editUser.admin ? 'selected' : '' %>>True</option>
           <option value="false" <%= !editUser.admin ? 'selected' : '' %>>False</option>
@@ -50,7 +50,7 @@
         <select
           id="userVerified"
           name="verified"
-          class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
+          class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
         >
           <option value="true" <%= editUser.verified ? 'selected' : '' %>>True</option>
           <option value="false" <%= !editUser.verified ? 'selected' : '' %>>False</option>
@@ -58,7 +58,7 @@
         <button
           id="saveChangesBtn"
           type="submit"
-          class="block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+          class="block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
         >
           Save Changes
         </button>
diff --git a/views/admin/images.ejs b/views/admin/images.ejs
index 982634f..f755c36 100644
--- a/views/admin/images.ejs
+++ b/views/admin/images.ejs
@@ -3,11 +3,11 @@
    <div class="bg-transparent">
       <div class="sm:flex sm:items-center px-8 pt-4">
          <div class="sm:flex-auto">
-           <h1 class="text-base font-semibold leading-6 text-white">Images</h1>
+           <h1 class="text-base font-medium leading-6 text-white">Images</h1>
            <p class="mt-1 tracking-tight text-sm text-neutral-500">A list of all the images on the Skyport panel.</p>
          </div>
          <div class="mt-4 sm:ml-8 sm:mt-0 sm:flex-none">
-          <button id="uploadimage" type="button" class="block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Import Image</button>
+          <button id="uploadimage" type="button" class="block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Import Image</button>
         </div>
        </div>
       <div style="display: block;" id="nodeTable" class="mt-6 w-full">
@@ -21,10 +21,10 @@
         </colgroup>
         <thead class="border-b border-white/5 text-sm leading-6 text-white">
           <tr>
-            <th scope="col" class="py-2 pl-4 pr-8 font-semibold sm:pl-6 lg:pl-8">Name</th>
-            <th scope="col" class="py-2 pl-0 pr-8 font-semibold sm:table-cell">Author</th>
-            <th scope="col" class="py-2 pl-0 pr-8 font-semibold sm:table-cell">Docker Image</th>
-            <th scope="col" class="py-2 pl-0 pr-8 font-semibold sm:table-cell">Actions</th>
+            <th scope="col" class="py-2 pl-4 pr-8 font-medium sm:pl-6 lg:pl-8">Name</th>
+            <th scope="col" class="py-2 pl-0 pr-8 font-medium sm:table-cell">Author</th>
+            <th scope="col" class="py-2 pl-0 pr-8 font-medium sm:table-cell">Docker Image</th>
+            <th scope="col" class="py-2 pl-0 pr-8 font-medium sm:table-cell">Actions</th>
           </tr>
         </thead>
         <tbody class="divide-y divide-white/5">
@@ -47,7 +47,7 @@
             </td>
             <td class="py-4 pl-0 pr-4 sm:table-cell sm:pr-8">
               <div class="flex gap-x-3">
-                <div onclick="deleteImage('<%= image.Id %>')" class="block rounded-lg bg-red-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-lg hover:bg-red-500 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Remove</div>
+                <div onclick="deleteImage('<%= image.Id %>')" class="block rounded-xl bg-red-600 px-3 py-2 text-center text-sm font-medium text-white shadow-lg hover:bg-red-500 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Remove</div>
               </div>
             </td>
           </tr>
@@ -56,26 +56,26 @@
       </table>
       </div>
       <div style="display: none;" id="imageDetail" class="mt-6 pl-8 w-full text-white">
-        <button id="backButton" class="block rounded-lg bg-neutral-800 px-3 py-2 text-center text-sm font-semibold text-white shadow-lg hover:bg-neutral-600 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Back</button>
+        <button id="backButton" class="block rounded-xl bg-neutral-800 px-3 py-2 text-center text-sm font-medium text-white shadow-lg hover:bg-neutral-600 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Back</button>
         <h1 id="imageName" class="text-2xl font-bold mt-4"></h1>
         <p id="imageDescription" class="mt-2 text-neutral-400"></p>
         <div class="mt-4">
-          <span id="dockerImage" class="bg-white/5 text-white text-sm font-mono mr-2 px-2.5 py-1 rounded-lg"></span>
-          <span id="envVars" class="bg-white/5 text-white text-sm font-mono mr-2 px-2.5 py-1 rounded-lg"></span>
+          <span id="dockerImage" class="bg-white/5 text-white text-sm font-mono mr-2 px-2.5 py-1 rounded-xl"></span>
+          <span id="envVars" class="bg-white/5 text-white text-sm font-mono mr-2 px-2.5 py-1 rounded-xl"></span>
         </div>
         <div class="mt-4">
           <p id="authorInfo" class="text-neutral-400"></p>
         </div>
         <div class="mt-4 flex">
-          <button id="deleteImageButton" class="block rounded-lg bg-red-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-lg hover:bg-red-500 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Delete Image</button>
-          <button id="replaceImageButton" class="block rounded-lg ml-2 bg-neutral-800 px-3 py-2 text-center text-sm font-semibold text-white shadow-lg hover:bg-neutral-600 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Replace Image</button>
+          <button id="deleteImageButton" class="block rounded-xl bg-red-600 px-3 py-2 text-center text-sm font-medium text-white shadow-lg hover:bg-red-500 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Delete Image</button>
+          <button id="replaceImageButton" class="block rounded-xl ml-2 bg-neutral-800 px-3 py-2 text-center text-sm font-medium text-white shadow-lg hover:bg-neutral-600 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Replace Image</button>
         </div>
       </div>
     </div>
 </main>
 <%- include('../components/footer') %>
 <script>
-  document.addEventListener("DOMContentLoaded", function() {
+document.addEventListener("DOMContentLoaded", async function(event){
     var uploadBtn = document.getElementById('uploadimage');
     var imageRows = document.querySelectorAll('.image-row');
     var nodeTable = document.getElementById('nodeTable');
@@ -90,7 +90,7 @@
     var replaceImageButton = document.getElementById('replaceImageButton');
     var currentImage = null;
 
-    uploadBtn.addEventListener('click', function() {
+    uploadBtn.addEventListener('click', async function() {
       var input = document.createElement('input');
       input.type = 'file';
       input.accept = '.json';
@@ -127,7 +127,7 @@
     });
 
     imageRows.forEach(function(row) {
-      row.addEventListener('click', function() {
+      row.addEventListener('click', async function() {
         var image = JSON.parse(this.dataset.image);
         currentImage = image;
         imageName.textContent = image.Name;
@@ -145,13 +145,13 @@
       imageDetail.style.display = 'none';
     });
 
-    deleteImageButton.addEventListener('click', function() {
+    deleteImageButton.addEventListener('click', async function() {
       if (currentImage) {
         deleteImage(currentImage.Id);
       }
     });
 
-    replaceImageButton.addEventListener('click', function() {
+    replaceImageButton.addEventListener('click', async function() {
       var input = document.createElement('input');
       input.type = 'file';
       input.accept = '.json';
@@ -182,12 +182,12 @@
           };
           reader.readAsText(file);
         } else {
-          alert('Please select a JSON file.');
+          alert('Please select a JSON filze.');
         }
       });
     });
 
-    function deleteImage(id) {
+    async function deleteImage(id) {
       var xhr = new XMLHttpRequest();
       xhr.open('POST', '/admin/images/delete', true);
       xhr.setRequestHeader('Content-Type', 'application/json');
diff --git a/views/admin/instances.ejs b/views/admin/instances.ejs
index fb178e8..d336a60 100644
--- a/views/admin/instances.ejs
+++ b/views/admin/instances.ejs
@@ -13,16 +13,16 @@
    <div class="bg-transparent">
       <div class="sm:flex sm:items-center px-8 pt-4">
          <div class="sm:flex-auto">
-           <h1 class="text-base font-semibold leading-6 text-white">Instances</h1>
+           <h1 class="text-base font-medium leading-6 text-white">Instances</h1>
            <p class="mt-1 tracking-tight text-sm text-neutral-500">A list of all the instances deployed on the Skyport panel.</p>
          </div>
          <div class="mt-4 sm:ml-8 sm:mt-0 sm:flex-none">
-           <button id="createButton" type="button" class="block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Create new instance</button>
+           <button id="createButton" type="button" class="block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Create new instance</button>
          </div>
        </div>
  <% if (req.query.err == "CREATED") { %>
       <div class="mt-6 w-full">
-        <div class="rounded-lg bg-emerald-800/10 px-4 py-6 mt-8 ml-8 mb-8 mr-8">
+        <div class="rounded-xl bg-emerald-800/10 px-4 py-6 mt-8 ml-8 mb-8 mr-8">
           <div class="flex">
              <div class="flex-shrink-0 ml-1.5">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 mt-2 text-emerald-400">
@@ -30,9 +30,9 @@
                 </svg>                
              </div>
              <div class="ml-5">
-                <h3 class="text-sm font-semibold text-emerald-400">CREATED!</h3>
+                <h3 class="text-sm font-medium text-emerald-400">Action completed!</h3>
                 <div class="text-sm text-emerald-400/50">
-                   <p>The Instance was Created successfully.</p>
+                   <p>The instance was created successfully. Please allow a few minutes for it to finish installing and downloading additional files. </p>
                 </div>
              </div>
           </div>
@@ -51,10 +51,10 @@
         </colgroup>
         <thead class="border-b border-white/5 text-sm leading-6 text-white">
           <tr>
-            <th scope="col" class="py-2 pl-4 pr-8 font-semibold sm:pl-6 lg:pl-8">Name</th>
-			<th scope="col" class="py-2 pl-0 pr-8 font-semibold sm:table-cell">Node</th>
-            <th scope="col" class="py-2 pl-0 pr-8 font-semibold sm:table-cell">Docker ID</th>
-            <th scope="col" class="py-2 pl-0 pr-4 text-right font-semibold sm:pr-8 sm:text-left lg:pr-20">Volume / Mount</th>
+            <th scope="col" class="py-2 pl-4 pr-8 font-medium sm:pl-6 lg:pl-8">Name</th>
+			<th scope="col" class="py-2 pl-0 pr-8 font-medium sm:table-cell">Node</th>
+            <th scope="col" class="py-2 pl-0 pr-8 font-medium sm:table-cell">Docker ID</th>
+            <th scope="col" class="py-2 pl-0 pr-4 text-right font-medium sm:pr-8 sm:text-left lg:pr-20">Volume / Mount</th>
           </tr>
         </thead>
         <tbody class="divide-y divide-white/5">
@@ -82,19 +82,19 @@
             </td>
             <td class="py-4 pl-0 pr-4 text-right sm:pr-8 lg:pr-20">
               <div class="flex gap-x-3">
-                <button onclick="location.href='/admin/instance/delete/<%= instance.Id %>'" class="block rounded-lg bg-red-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-lg hover:bg-red-500 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+                <button onclick="location.href='/admin/instance/delete/<%= instance.Id %>'" class="block rounded-xl bg-red-600 px-3 py-2 text-center text-sm font-medium text-white shadow-lg hover:bg-red-500 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                   Remove
                 </button>
 
                 <% if (instance.suspended === true) { %>
                   <form action="/admin/instances/unsuspend/<%= instance.Id %>" method="POST">
-                    <button type="submit" class="block rounded-lg bg-green-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-lg hover:bg-green-500 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
-                      UnSuspend
+                    <button type="submit" class="block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-gray-100 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+                      Unsuspend
                     </button>
                   </form>
                 <% } else { %>
                   <form action="/admin/instances/suspend/<%= instance.Id %>" method="POST">
-                    <button type="submit" class="block rounded-lg bg-yellow-500 px-3 py-2 text-center text-sm font-semibold text-white shadow-lg hover:bg-yellow-400 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+                    <button type="submit" class="block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-gray-100 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                       Suspend
                     </button>
                     
@@ -111,17 +111,17 @@
       </div>
 
       <div style="display: none;" id="nodeForm" class="mt-6 px-8 w-full grid grid-cols-2 gap-4">
-        <div class="p-3 bg-transparent shadow-xl border border-white/5 rounded-lg overflow-hidden sm:p-6 lg:p-10 card" style="width: 800px;">
+        <div class="p-3 bg-transparent shadow-xl border border-white/5 rounded-xl overflow-hidden sm:p-6 lg:p-10 card" style="width: 800px;">
             <form>
                 <div class="grid grid-cols-2 gap-4">
                     <div>
                         <label class="text-neutral-400 text-sm tracking-tight mb-2">Name:</label>
-                        <input id="name" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-4 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="My instance">
+                        <input id="name" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-4 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="My instance">
                     </div>
     
                     <div>
                         <label class="text-neutral-400 text-sm tracking-tight mb-2">User:</label>
-                        <select style="background: #171717;" id="user" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-4 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5">
+                        <select style="background: #171717;" id="user" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-4 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5">
                             <% users.forEach(function(user) { %>
                                 <option value="<%= user.userId %>"><%= user.username %></option>
                             <% }); %>
@@ -130,7 +130,7 @@
     
                     <div>
                         <label class="text-neutral-400 text-sm tracking-tight mb-2">Image:</label>
-                        <select style="background: #171717;" id="image" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-4 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5">
+                        <select style="background: #171717;" id="image" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-4 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5">
                             <% images.forEach(function(image) { %>
                                 <option value="<%= image.Image %>" data-configfilepath="<%= image.ConfigFilePath %>" data-configfilecontent="<%= image.ConfigFileContent %>"><%= image.Name %> (<%= image.Image %>)</option>
                             <% }); %>
@@ -139,7 +139,7 @@
     
                     <div>
                         <label class="text-neutral-400 text-sm tracking-tight mb-2">Node:</label>
-                        <select style="background: #171717;" id="node" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-4 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5">
+                        <select style="background: #171717;" id="node" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-4 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5">
                             <% nodes.forEach(function(node) { %>
                                 <option value="<%= node.id %>"><%= node.name %></option>
                             <% }); %>
@@ -148,27 +148,27 @@
     
                     <div>
                         <label class="text-neutral-400 text-sm tracking-tight mb-2">Memory (MiB):</label>
-                        <input id="memory" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-4 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="2048">
+                        <input id="memory" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-4 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="2048">
                     </div>
     
                     <div>
                         <label class="text-neutral-400 text-sm tracking-tight mb-2">CPU Threads:</label>
-                        <input id="cpu" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-4 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="1">
+                        <input id="cpu" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-4 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="1">
                     </div>
     
                     <div>
                         <label class="text-neutral-400 text-sm tracking-tight mb-2">Ports:</label>
-                        <input id="ports" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-4 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="25565:25565,8080:8080">
+                        <input id="ports" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-4 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="25565:25565,8080:8080">
                     </div>
     
                     <div>
                         <label class="text-neutral-400 text-sm tracking-tight mb-2">Primary Port:</label>
-                        <input id="primary" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-4 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="25565">
+                        <input id="primary" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-4 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="25565">
                     </div>
                 </div>
     
                 <div class="mt-4">
-                    <button id="createNodeBtn" type="button" class="block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Create</button>
+                    <button id="createNodeBtn" type="button" class="block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Create</button>
                 </div>
             </form>
         </div>
@@ -197,7 +197,7 @@
   });
 </script>
 <script>
-document.getElementById('createNodeBtn').addEventListener('click', function() {
+document.getElementById('createNodeBtn').addEventListener('click', async function() {
     const createBtn = this;
     createBtn.textContent = 'Working on it...';
     createBtn.disabled = true;
@@ -253,8 +253,8 @@ document.getElementById('createNodeBtn').addEventListener('click', function() {
     const nodeData = {
         name: name.value,
         image: imageDropdown.value,
-        nodeId: document.getElementById('node').value,
-        user: document.getElementById('user').value,
+        nodeId: await document.getElementById('node').value,
+        user: await document.getElementById('user').value,
         memory: memory.value,
         cpu: cpu.value,
         ports: ports.value,
@@ -263,7 +263,7 @@ document.getElementById('createNodeBtn').addEventListener('click', function() {
         configFileContent: configFileContent
     };
 
-    sendData(nodeData, createBtn);
+    await sendData(nodeData, createBtn);
 });
 
 function clearValidationErrors() {
diff --git a/views/admin/node.ejs b/views/admin/node.ejs
index cb2ad67..bf3a529 100644
--- a/views/admin/node.ejs
+++ b/views/admin/node.ejs
@@ -3,30 +3,30 @@
 <div id="nodeForm" class="mt-6 px-8 w-full">
 	<form>
 	 <label class="text-neutral-400 text-sm tracking-tight mb-2">Name:</label>
-	 <input id="nodeName" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="My node" value="<%- node.name %>">
+	 <input id="nodeName" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="My node" value="<%- node.name %>">
 
 	 <label class="text-neutral-400 text-sm tracking-tight mb-2">Tags:</label>
-	 <input id="nodeTags" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="Tag 1 - Tag 2 - Tag 3" value="<%- node.tags %>">
+	 <input id="nodeTags" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="Tag 1 - Tag 2 - Tag 3" value="<%- node.tags %>">
 
 	 <label class="text-neutral-400 text-sm tracking-tight mb-2">RAM (GB):</label>
-	 <input id="nodeRam" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="8" value="<%- node.ram %>">
+	 <input id="nodeRam" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="8" value="<%- node.ram %>">
 
 	 <label class="text-neutral-400 text-sm tracking-tight mb-2">Disk (GB):</label>
-	 <input id="nodeDisk" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="40" value="<%- node.disk %>">
+	 <input id="nodeDisk" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="40" value="<%- node.disk %>">
 
 	 <label class="text-neutral-400 text-sm tracking-tight mb-2">Processor:</label>
-	 <input id="nodeProcessor" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="AMD EPYC 9454 - 16 Threads"  value="<%- node.processor %>">
+	 <input id="nodeProcessor" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="AMD EPYC 9454 - 16 Threads"  value="<%- node.processor %>">
 
 	 <label class="text-neutral-400 text-sm tracking-tight mb-2">IP Address:</label>
-	 <input id="nodeAddress" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="192.168.1.1 or my.hostnamehere.com" value="<%- node.address %>">
+	 <input id="nodeAddress" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="192.168.1.1 or my.hostnamehere.com" value="<%- node.address %>">
 
 	 <label class="text-neutral-400 text-sm tracking-tight mb-2">Daemon Port:</label>
-	 <input id="nodePort" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="8080" value="<%- node.port %>">
+	 <input id="nodePort" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="8080" value="<%- node.port %>">
 
 	 <label class="text-neutral-400 text-sm tracking-tight mb-2">Access Key:</label>
-	 <input id="nodeApiKey" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="skyportd_xxxxxxxxxxxxxxxx" value="<%- node.apiKey %>">
+	 <input id="nodeApiKey" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="skyportd_xxxxxxxxxxxxxxxx" value="<%- node.apiKey %>">
 
-	 <button id="saveNodeBtn" type="button" class="block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-gray-50 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Apply Changes</button>
+	 <button id="saveNodeBtn" type="button" class="block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-gray-50 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Apply Changes</button>
   </form>
 </div>
 
diff --git a/views/admin/nodes.ejs b/views/admin/nodes.ejs
index 1ef39fd..66d0376 100644
--- a/views/admin/nodes.ejs
+++ b/views/admin/nodes.ejs
@@ -3,16 +3,16 @@
    <div class="bg-transparent">
       <div class="sm:flex sm:items-center px-8 pt-4">
          <div class="sm:flex-auto">
-           <h1 class="text-base font-semibold leading-6 text-white">Nodes</h1>
+           <h1 class="text-base font-medium leading-6 text-white">Nodes</h1>
            <p class="mt-1 tracking-tight text-sm text-neutral-500">A list of all the nodes set up on the Skyport panel.</p>
          </div>
          <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
-           <button id="createButton" type="button" class="block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Create new node</button>
+           <button id="createButton" type="button" class="block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Create new node</button>
          </div>
        </div>
       <% if (req.query.err == "none") { %>
       <div class="mt-6 w-full">
-        <div class="rounded-lg bg-emerald-800/10 px-4 py-6 mt-8 ml-8 mb-8 mr-8">
+        <div class="rounded-xl bg-emerald-800/10 px-4 py-6 mt-8 ml-8 mb-8 mr-8">
           <div class="flex">
              <div class="flex-shrink-0 ml-1.5">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 mt-2 text-emerald-400">
@@ -20,7 +20,7 @@
                 </svg>                
              </div>
              <div class="ml-5">
-                <h3 class="text-sm font-semibold text-emerald-400">Success!</h3>
+                <h3 class="text-sm font-medium text-emerald-400">Success!</h3>
                 <div class="text-sm text-emerald-400/50">
                    <p>The action was successfully completed.</p>
                 </div>
@@ -30,7 +30,7 @@
 <% } %>
     <% if (req.query.err == "EDITED") { %>
       <div class="mt-6 w-full">
-        <div class="rounded-lg bg-emerald-800/10 px-4 py-6 mt-8 ml-8 mb-8 mr-8">
+        <div class="rounded-xl bg-emerald-800/10 px-4 py-6 mt-8 ml-8 mb-8 mr-8">
           <div class="flex">
              <div class="flex-shrink-0 ml-1.5">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 mt-2 text-emerald-400">
@@ -38,9 +38,9 @@
                 </svg>                
              </div>
              <div class="ml-5">
-                <h3 class="text-sm font-semibold text-emerald-400">Success!</h3>
+                <h3 class="text-sm font-medium text-emerald-400">Success!</h3>
                 <div class="text-sm text-emerald-400/50">
-                   <p>The Node was Edited successfully.</p>
+                   <p>The node was edited successfully.</p>
                 </div>
              </div>
           </div>
@@ -56,10 +56,10 @@
         </colgroup>
         <thead class="border-b border-white/5 text-sm leading-6 text-white">
           <tr>
-            <th scope="col" class="py-2 pl-0 pr-8 font-semibold sm:pl-80 lg:pl-8">Name</th>
-            <th scope="col" class="py-2 pl-0 pr-8 font-semibold sm:table-cell">Connection</th>
-            <th scope="col" class="py-2 pl-0 pr-8 font-semibold md:table-cell lg:pr-20">Instances</th>
-			<th scope="col" class="py-2 pl-0 pr-8 font-semibold md:table-cell lg:pr-20">Actions</th>
+            <th scope="col" class="py-2 pl-0 pr-8 font-medium sm:pl-80 lg:pl-8">Name</th>
+            <th scope="col" class="py-2 pl-0 pr-8 font-medium sm:table-cell">Connection</th>
+            <th scope="col" class="py-2 pl-0 pr-8 font-medium md:table-cell lg:pr-20">Instances</th>
+			<th scope="col" class="py-2 pl-0 pr-8 font-medium md:table-cell lg:pr-20">Actions</th>
           </tr>
         </thead>
         <tbody class="divide-y divide-white/5">
@@ -93,64 +93,64 @@
             <td class="hidden py-4 pl-0 pr-4 sm:table-cell sm:pr-8">
               <div class="flex gap-x-3">
                 <div class="font-mono text-sm leading-6 text-neutral-400"><%= node.address %><span class="text-neutral-500">:<%= node.port %></span></div>
-                <div class="rounded-lg bg-neutral-800/40 px-2 py-1 text-xs font-medium text-neutral-400 ring-1 ring-inset ring-white/10"><%= node.versionRelease || 'unknown' %></div>
+                <div class="rounded-xl bg-neutral-800/40 px-2 py-1 text-xs font-medium text-neutral-400 ring-1 ring-inset ring-white/10"><%= node.versionRelease || 'unknown' %></div>
               </div>
             </td>
             <td class="hidden py-4 pl-0 pr-8 text-sm leading-6 text-neutral-400 md:table-cell lg:pr-20"><%= set[node.id] || 0 %></td>
 			<td class="py-4 pl-0 pr-4 text-sm leading-6 sm:pr-8 lg:pr-20 flex gap-3">
-        <div class="inner"><button onclick="configureNodePoPUP('<%= node.id %>')" type="button" class="block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-gray-50 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Configure</button></div>
-				<div class="inner"><a href="./node/<%= node.id %>"><button id="editButton" type="button" class="block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-gray-50 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Edit</button></a></div>
-				<div class="inner"><button id="removeButton" onclick="location.href='/admin/nodes/delete/<%= node.id %>'" type="button" class="block rounded-lg bg-red-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-lg hover:bg-red-500 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Remove</button></div>
+        <div class="inner"><button onclick="configure('<%= node.id %>')" type="button" class="block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-gray-50 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Configure</button></div>
+				<div class="inner"><a href="./node/<%= node.id %>"><button id="editButton" type="button" class="block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-gray-50 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Edit</button></a></div>
+				<div class="inner"><button id="removeButton" onclick="location.href='/admin/nodes/delete/<%= node.id %>'" type="button" class="block rounded-xl bg-red-600 px-3 py-2 text-center text-sm font-medium text-white shadow-lg hover:bg-red-500 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Remove</button></div>
           </tr>
           <% }); %>
         </tbody>
       </table>
-      <div id="notification" class="fixed bottom-5 right-5 bg-white/5 text-white px-4 py-2 rounded-lg shadow-lg transform transition-all duration-300 translate-y-full opacity-0">
+      <div id="notification" class="fixed bottom-5 right-5 bg-white/5 text-white px-4 py-2 rounded-xl shadow-lg transform transition-all duration-300 translate-y-full opacity-0">
         Command copied to clipboard!
       </div>
       </div>
       <div id="nodeForm" class="mt-6 px-8 w-full hidden">
-        <div class="p-3 bg-transparent shadow-xl border border-white/5 rounded-lg overflow-hidden sm:p-6 lg:p-10 card" style="width: 800px;">
+        <div class="p-3 bg-transparent shadow-xl border border-white/5 rounded-xl overflow-hidden sm:p-6 lg:p-10 card" style="width: 800px;">
           <form>
             <div class="grid grid-cols-2 gap-4">
               <div>
                 <label for="nodeName" class="text-neutral-400 text-sm tracking-tight mb-2">Name:</label>
-                <input id="nodeName" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-4 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="My node">
+                <input id="nodeName" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-4 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="My node">
               </div>
       
               <div>
                 <label for="nodeRam" class="text-neutral-400 text-sm tracking-tight mb-2">RAM (GB):</label>
-                <input id="nodeRam" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="This is only for information purposes.">
+                <input id="nodeRam" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="This is only for information purposes.">
               </div>
       
               <div>
                 <label for="nodeDisk" class="text-neutral-400 text-sm tracking-tight mb-2">Disk (GB):</label>
-                <input id="nodeDisk" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="This is only for information purposes.">
+                <input id="nodeDisk" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="This is only for information purposes.">
               </div>
       
               <div>
                 <label for="nodeProcessor" class="text-neutral-400 text-sm tracking-tight mb-2">CPU:</label>
-                <input id="nodeProcessor" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="This is only for information purposes.">
+                <input id="nodeProcessor" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="This is only for information purposes.">
               </div>
       
               <div>
                 <label for="nodeAddress" class="text-neutral-400 text-sm tracking-tight mb-2">IP Address:</label>
-                <input id="nodeAddress" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="192.168.1.1 or my.hostnamehere.com">
+                <input id="nodeAddress" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="192.168.1.1 or my.hostnamehere.com">
               </div>
       
               <div>
                 <label for="nodePort" class="text-neutral-400 text-sm tracking-tight mb-2">Daemon Port:</label>
-                <input id="nodePort" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="3000">
+                <input id="nodePort" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="3000">
               </div>
       
               <div class="col-span-2">
                 <label for="tagInput" class="text-neutral-400 text-sm tracking-tight mb-2">Tags:</label>
                 <div id="tagContainer" class="flex flex-wrap gap-2 mb-2"></div>
-                <input id="tagInput" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="Add a tag and press Enter">
+                <input id="tagInput" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-full hover:bg-white/5 px-4 py-2 bg-neutral-900 placeholder:text-white/20 border border-white/5" placeholder="Add a tag and press Enter">
               </div>
       
               <div class="col-span-2">
-                <button id="createNodeBtn" type="button" class="block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Create</button>
+                <button id="createNodeBtn" type="button" class="block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Create</button>
               </div>
             </div>
           </form>
@@ -170,11 +170,8 @@
       form.style.display = 'none';
     }
   });
-</script>
-<script>
-
 
-  async function configureNodePoPUP(nodeId) {
+  async function configure(nodeId) {
     const response = await fetch(`/admin/node/${nodeId}/configure-command`);
     if (!response.ok) {
       throw new Error('Failed to fetch configure command');
@@ -197,7 +194,7 @@
     popup.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.1)';
     popup.style.backgroundColor = '#fff';
 
-    popup.classList.add('text-white', 'border', 'border-white/5', 'rounded-lg', 'shadow-xl');
+    popup.classList.add('text-white', 'border', 'border-white/5', 'rounded-xl', 'shadow-xl');
 
     popup.innerHTML = `
         <div class="flex justify-center items-center mb-2" style="margin-top: 75px;">
@@ -207,8 +204,8 @@
         </div>
         <p class="font-bold mb-2 mt-3 text-black" style="font-size:30px; text-align:center">Token created.</p>
         <h3 class="mb-5 text-gray-600" style="text-align:center; margin-top: 25px;">To auto-configure your node, run the following command:</h3>
-        <pre class="bg-neutral-900 p-3 rounded-lg mb-4 mt-3" style="overflow-x: scroll"><code id="commandCode" class="text-emerald-500">${command}</code></pre>
-        <button id="doneBtn" class="block rounded-lg bg-black text-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 mt-4">Done</button>
+        <pre class="bg-neutral-900 p-3 rounded-xl mb-4 mt-3" style="overflow-x: scroll"><code id="commandCode" class="text-emerald-500">${command}</code></pre>
+        <button id="doneBtn" class="block rounded-xl bg-black text-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 mt-4">Done</button>
     `;
     document.body.appendChild(popup);
 
@@ -299,7 +296,7 @@
 
     function createBadge(text, container, inputField) {
     const badge = document.createElement('span');
-    badge.className = 'bg-white/5 text-neutral-300 text-xs font-medium mr-1 px-2.5 py-0.5 rounded-lg';
+    badge.className = 'bg-white/5 text-neutral-300 text-xs font-medium mr-1 px-2.5 py-0.5 rounded-xl';
     badge.textContent = text;
 
     const removeBtn = document.createElement('button');
diff --git a/views/admin/overview.ejs b/views/admin/overview.ejs
index 1372b6b..3df1cdd 100644
--- a/views/admin/overview.ejs
+++ b/views/admin/overview.ejs
@@ -3,46 +3,46 @@
    <div class="bg-transparent">
       <div class="sm:flex sm:items-center px-8 pt-4">
          <div class="sm:flex-auto">
-           <h1 class="text-base font-semibold leading-6 text-white">Overview</h1>
+           <h1 class="text-base font-medium leading-6 text-white">Overview</h1>
            <p class="mt-1 tracking-tight text-sm text-neutral-500">A simple overview of your Panel.</p>
          </div>
          <div class="mt-4 sm:ml-16 sm:mt-0 flex space-x-4">
-           <a href="../account/debug" class="block rounded-lg bg-transparent px-3 py-2 text-center text-sm font-normal text-neutral-300 shadow-lg hover:bg-neutral-600/10 border border-white/5 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+           <a href="../account/debug" class="block rounded-xl bg-transparent px-3 py-2 text-center text-sm font-normal text-neutral-300 shadow-lg hover:bg-neutral-600/10 border border-white/5 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
             Account - JSON
            </a>
-           <a href="../nodes/debug" class="block rounded-lg bg-transparent px-3 py-2 text-center text-sm font-normal text-neutral-300 shadow-lg hover:bg-neutral-600/10 border border-white/5 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+           <a href="../nodes/debug" class="block rounded-xl bg-transparent px-3 py-2 text-center text-sm font-normal text-neutral-300 shadow-lg hover:bg-neutral-600/10 border border-white/5 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
             Nodes - JSON
            </a>
          </div>
        </div>
        <div class="px-8 mt-5">
         <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-4">
-            <div class="overflow-hidden rounded-lg bg-neutral-700/10 px-4 py-5 shadow sm:p-6">
+            <div class="overflow-hidden rounded-xl bg-neutral-700/10 px-4 py-5 shadow sm:p-6">
                <dt class="truncate text-sm font-medium text-neutral-400">Users</dt>
-               <dd class="mt-1 text-3xl font-semibold tracking-tight text-white">
+               <dd class="mt-1 text-3xl font-medium tracking-tight text-white">
                   <%= usersTotal %>
                </dd>
             </div>
-            <div class="overflow-hidden rounded-lg bg-neutral-700/10 px-4 py-5 shadow sm:p-6">
+            <div class="overflow-hidden rounded-xl bg-neutral-700/10 px-4 py-5 shadow sm:p-6">
                <dt class="truncate text-sm font-medium text-neutral-400">Instances</dt>
-               <dd class="mt-1 text-3xl font-semibold tracking-tight text-white">
+               <dd class="mt-1 text-3xl font-medium tracking-tight text-white">
                   <%= instancesTotal %>
                </dd>
             </div>
-            <div class="overflow-hidden rounded-lg bg-neutral-700/10 px-4 py-5 shadow sm:p-6">
+            <div class="overflow-hidden rounded-xl bg-neutral-700/10 px-4 py-5 shadow sm:p-6">
                <dt class="truncate text-sm font-medium text-neutral-400">Nodes</dt>
-               <dd class="mt-1 text-3xl font-semibold tracking-tight text-white">
+               <dd class="mt-1 text-3xl font-medium tracking-tight text-white">
                   <%= nodesTotal %> 
                </dd>
             </div>
-            <div class="overflow-hidden rounded-lg bg-neutral-700/10 px-4 py-5 shadow sm:p-6">
+            <div class="overflow-hidden rounded-xl bg-neutral-700/10 px-4 py-5 shadow sm:p-6">
                <dt class="truncate text-sm font-medium text-neutral-400">Images</dt>
-               <dd class="mt-1 text-3xl font-semibold tracking-tight text-white">
+               <dd class="mt-1 text-3xl font-medium tracking-tight text-white">
                   <%= imagesTotal %>
                </dd>
             </div>
          </dl>
-          <div class="bg-neutral-700/10 rounded-lg py-8 mt-5">
+          <div class="bg-neutral-700/10 rounded-xl py-8 mt-5">
             <script>
                 fetch('https://atqr.pages.dev/skyport.json')
                   .then(response => response.json())
@@ -74,30 +74,30 @@
                     console.error('Error fetching latest version:', error);
                   });
               </script>
-             <img src="https://i.imgur.com/Ac3KqJ4.png" class="pl-8 h-28 mb-4">
-             <h1 class="text-white text-lg font-semibold tracking-tight pl-8">System information</h1>
+             <img src="https://i.imgur.com/VvFybOc.png" class="pl-8 h-28 mb-4">
+             <h1 class="text-white text-lg font-medium tracking-tight pl-8">System information</h1>
              <p class="text-sm mt-1 font-normal text-neutral-300 mb-2 pl-8">
-                You are running Skyport version <span id="currentVersion"></span>. <span id="versionStatus"></span>
+                You are running Skyport Panel version <span id="currentVersion"></span>. <span id="versionStatus"></span>
               </p>
           </div>
           <div class="mt-5 flex justify-between space-x-8">
-            <a href="https://discord.gg/skyport" class="block rounded-lg bg-amber-500 px-3 py-2 text-center text-sm font-semibold text-white shadow-lg hover:bg-amber-600 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600 w-full">
+            <a href="https://discord.gg/skyport" class="block rounded-xl bg-amber-500 px-3 py-2 text-center text-sm font-medium text-white shadow-lg hover:bg-amber-600 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600 w-full">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 inline-flex mr-1 mb-0.5">
                     <path fill-rule="evenodd" d="m7.171 4.146 1.947 2.466a3.514 3.514 0 0 1 1.764 0l1.947-2.466a6.52 6.52 0 0 0-5.658 0Zm8.683 3.025-2.466 1.947c.15.578.15 1.186 0 1.764l2.466 1.947a6.52 6.52 0 0 0 0-5.658Zm-3.025 8.683-1.947-2.466c-.578.15-1.186.15-1.764 0l-1.947 2.466a6.52 6.52 0 0 0 5.658 0ZM4.146 12.83l2.466-1.947a3.514 3.514 0 0 1 0-1.764L4.146 7.171a6.52 6.52 0 0 0 0 5.658ZM5.63 3.297a8.01 8.01 0 0 1 8.738 0 8.031 8.031 0 0 1 2.334 2.334 8.01 8.01 0 0 1 0 8.738 8.033 8.033 0 0 1-2.334 2.334 8.01 8.01 0 0 1-8.738 0 8.032 8.032 0 0 1-2.334-2.334 8.01 8.01 0 0 1 0-8.738A8.03 8.03 0 0 1 5.63 3.297Zm5.198 4.882a2.008 2.008 0 0 0-2.243.407 1.994 1.994 0 0 0-.407 2.243 1.993 1.993 0 0 0 .992.992 2.008 2.008 0 0 0 2.243-.407c.176-.175.31-.374.407-.585a2.008 2.008 0 0 0-.407-2.243 1.993 1.993 0 0 0-.585-.407Z" clip-rule="evenodd" />
                 </svg>
                 Discord Server
             </a>
-            <a href="https://skyport.dev" class="block rounded-lg bg-blue-500 px-3 py-2 text-center text-sm font-semibold text-white shadow-lg hover:bg-blue-600 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 w-full">
+            <a href="https://skyport.dev" class="block rounded-xl bg-blue-500 px-3 py-2 text-center text-sm font-medium text-white shadow-lg hover:bg-blue-600 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 w-full">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 inline-flex mr-1">
                     <path d="M10.75 16.82A7.462 7.462 0 0 1 15 15.5c.71 0 1.396.098 2.046.282A.75.75 0 0 0 18 15.06v-11a.75.75 0 0 0-.546-.721A9.006 9.006 0 0 0 15 3a8.963 8.963 0 0 0-4.25 1.065V16.82ZM9.25 4.065A8.963 8.963 0 0 0 5 3c-.85 0-1.673.118-2.454.339A.75.75 0 0 0 2 4.06v11a.75.75 0 0 0 .954.721A7.506 7.506 0 0 1 5 15.5c1.579 0 3.042.487 4.25 1.32V4.065Z" />
                 </svg>                  
                 Documentation
             </a>
-            <a href="https://github.com/skyportlabs" class="block rounded-lg bg-blue-500 px-3 py-2 text-center text-sm font-semibold text-white shadow-lg hover:bg-blue-600 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 w-full">
+            <a href="https://github.com/skyportlabs" class="block rounded-xl bg-blue-500 px-3 py-2 text-center text-sm font-medium text-white shadow-lg hover:bg-blue-600 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 w-full">
                 <svg class="h-5 w-5 text-white inline-flex mr-1" height="1792" viewBox="0 0 1792 1792" width="1792" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M1664 896q0 251-146.5 451.5t-378.5 277.5q-27 5-39.5-7t-12.5-30v-211q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-121-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-86-13.5q-44 113-7 204-79 85-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-40 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 89t.5 54q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/></svg>            
                 GitHub
             </a>
-            <a href="https://github.com/skyportlabs" class="block rounded-lg bg-emerald-500 px-3 py-2 text-center text-sm font-semibold text-white shadow-lg hover:bg-emerald-600 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600 w-full">
+            <a href="https://github.com/skyportlabs" class="block rounded-xl bg-emerald-500 px-3 py-2 text-center text-sm font-medium text-white shadow-lg hover:bg-emerald-600 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600 w-full">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 inline-flex mr-1">
                     <path d="M10.75 10.818v2.614A3.13 3.13 0 0 0 11.888 13c.482-.315.612-.648.612-.875 0-.227-.13-.56-.612-.875a3.13 3.13 0 0 0-1.138-.432ZM8.33 8.62c.053.055.115.11.184.164.208.16.46.284.736.363V6.603a2.45 2.45 0 0 0-.35.13c-.14.065-.27.143-.386.233-.377.292-.514.627-.514.909 0 .184.058.39.202.592.037.051.08.102.128.152Z" />
                     <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-6a.75.75 0 0 1 .75.75v.316a3.78 3.78 0 0 1 1.653.713c.426.33.744.74.925 1.2a.75.75 0 0 1-1.395.55 1.35 1.35 0 0 0-.447-.563 2.187 2.187 0 0 0-.736-.363V9.3c.698.093 1.383.32 1.959.696.787.514 1.29 1.27 1.29 2.13 0 .86-.504 1.616-1.29 2.13-.576.377-1.261.603-1.96.696v.299a.75.75 0 1 1-1.5 0v-.3c-.697-.092-1.382-.318-1.958-.695-.482-.315-.857-.717-1.078-1.188a.75.75 0 1 1 1.359-.636c.08.173.245.376.54.569.313.205.706.353 1.138.432v-2.748a3.782 3.782 0 0 1-1.653-.713C6.9 9.433 6.5 8.681 6.5 7.875c0-.805.4-1.558 1.097-2.096a3.78 3.78 0 0 1 1.653-.713V4.75A.75.75 0 0 1 10 4Z" clip-rule="evenodd" />
diff --git a/views/admin/plugin.ejs b/views/admin/plugin.ejs
index 8651192..4fd5305 100644
--- a/views/admin/plugin.ejs
+++ b/views/admin/plugin.ejs
@@ -3,7 +3,7 @@
   <div class="bg-transparent">
     <div class="sm:flex sm:items-center px-8 pt-4">
       <div class="sm:flex-auto">
-        <h1 class="text-base font-semibold leading-6 text-white">Edit Plugin Manifest</h1>
+        <h1 class="text-base font-medium leading-6 text-white">Edit Plugin Manifest</h1>
         <p class="mt-1 tracking-tight text-sm text-neutral-500">Edit the content of the manifest.json of the plugin.</p>
       </div>
     </div>
@@ -11,12 +11,12 @@
 </main>
 
 <div class="grid sm:grid-cols-4 gap-6 px-8 py-6">
-  <div class="bg-transparent shadow-xl border border-white/5 rounded-lg overflow-hidden w-96 sm:p-6 lg:p-5 mb-6 card" style="width:1600px">
+  <div class="bg-transparent shadow-xl border border-white/5 rounded-xl overflow-hidden w-96 sm:p-6 lg:p-5 mb-6 card" style="width:1600px">
     <label class="text-neutral-400 text-sm tracking-tight mb-2">/plugins/<%= dir %>/<span class="text-white">manifest.json</span></label>
-    <div id="editor" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-full items-center transition justify-left gap-16 hover:bg-white/5 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" style="height: 500px;"></div>
+    <div id="editor" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-full items-center transition justify-left gap-16 hover:bg-white/5 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" style="height: 500px;"></div>
     <div class="flex flex-row">
-      <button id="save-button" class="mt-6 block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save</button>
-      <button id="save-close-button" class="ml-6 mt-6 block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save & Close</button>
+      <button id="save-button" class="mt-6 block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save</button>
+      <button id="save-close-button" class="ml-6 mt-6 block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save & Close</button>
     </div>
   </div>
 </div>
diff --git a/views/admin/plugins.ejs b/views/admin/plugins.ejs
index 110f857..c16fe00 100644
--- a/views/admin/plugins.ejs
+++ b/views/admin/plugins.ejs
@@ -3,11 +3,11 @@
   <div class="bg-transparent">
     <div class="sm:flex sm:items-center">
       <div class="sm:flex-auto">
-        <h1 class="text-base font-semibold leading-6 text-white">Plugins Overview</h1>
-        <p class="mt-1 tracking-tight text-sm text-neutral-500">A list of all the Plugins installed on the panel.p>
+        <h1 class="text-base font-medium leading-6 text-white">Plugins Overview</h1>
+        <p class="mt-1 tracking-tight text-sm text-neutral-500">A list of all the Plugins installed on the panel.</p>
       </div>
       <div class="mt-4 sm:ml-8 sm:mt-0 sm:flex-none">
-        <button id="reload" type="button" class="block rounded-lg bg-green-500 px-3 py-2 text-center text-sm font-semibold text-white shadow-lg hover:bg-green-600 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" onclick="fetch('/admin/plugins/reload', {method: 'POST'}), location.reload()"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+        <button id="reload" type="button" class="block rounded-xl bg-green-500 px-3 py-2 text-center text-sm font-medium text-white shadow-lg hover:bg-green-600 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" onclick="fetch('/admin/plugins/reload', {method: 'POST'}), location.reload()"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
           <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
         </svg>
         </button>
@@ -18,34 +18,34 @@
 
         <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-5 mr-8">
           
-          <div class="overflow-hidden rounded-lg bg-[#171717]/50 px-4 py-5 shadow sm:p-6 flex items-center">
+          <div class="overflow-hidden rounded-xl bg-[#171717]/50 px-4 py-5 shadow sm:p-6 flex items-center">
             <div class="flex-grow">
                 <dt class="truncate text-sm font-medium text-neutral-400">Plugins Installed:</dt>
-                <dd class="mt-1 text-lg font-semibold tracking-tight text-white">
+                <dd class="mt-1 text-lg font-medium tracking-tight text-white">
                   <span id="ramUsage">
                     <%= plugins.length %>
                   </span>
                   <span id="ramUsage"></span> <span class="text-xs text-neutral-400" id="ramLimit"></span>
                 </dd>
             </div>
-            <div class="ml-4 shadow border border-white/10 rounded-lg p-2">
+            <div class="ml-4 shadow border border-white/10 rounded-xl p-2">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                 <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5" />
               </svg>                                         
             </div>
           </div>
          
-        <div class="overflow-hidden rounded-lg bg-[#171717]/50 px-4 py-5 shadow sm:p-6 flex items-center">
+        <div class="overflow-hidden rounded-xl bg-[#171717]/50 px-4 py-5 shadow sm:p-6 flex items-center">
           <div class="flex-grow">
               <dt class="truncate text-sm font-medium text-neutral-400">Plugins Enabled:</dt>
-              <dd class="mt-1 text-lg font-semibold tracking-tight text-white">
+              <dd class="mt-1 text-lg font-medium tracking-tight text-white">
                 <span id="ramUsage">
                   <%= enabledPlugins.length %>
                 </span>
                 <span id="ramUsage"></span> <span class="text-xs text-neutral-400" id="ramLimit"></span>
               </dd>
           </div>
-          <div class="ml-4 shadow border border-white/10 rounded-lg p-2">
+          <div class="ml-4 shadow border border-white/10 rounded-xl p-2">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
               <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5" />
             </svg>                   
@@ -68,9 +68,9 @@
 
               <button onclick="fetch('/admin/plugins/<%= plugin.name %>/toggle', {method: 'POST'}).then((res) => { if (res.ok) location.reload() })">
                 <% if (enabledPlugins.some(pluginObj => pluginObj.name === plugin.name)) { %>
-                  <span class="bg-red-600 text-center text-sm font-semibold text-white shadow-lg hover:bg-red-500 px-3 py-1.5 rounded-lg">Disable</span>
+                  <span class="bg-red-600 text-center text-sm font-medium text-white shadow-lg hover:bg-red-500 px-3 py-1.5 rounded-xl">Disable</span>
                 <% } else { %>
-                  <span class="bg-green-600 text-center text-sm font-semibold text-white shadow-lg hover:bg-green-500 px-3 py-1.5 rounded-lg">Enable</span>
+                  <span class="bg-green-600 text-center text-sm font-medium text-white shadow-lg hover:bg-green-500 px-3 py-1.5 rounded-xl">Enable</span>
                 <% } %>
               </button>
 
diff --git a/views/admin/settings/appearance.ejs b/views/admin/settings/appearance.ejs
index b86509a..bce3ea3 100644
--- a/views/admin/settings/appearance.ejs
+++ b/views/admin/settings/appearance.ejs
@@ -1,111 +1,99 @@
 <%- include('../../components/template') %>
-
 <main id="content">
-  <div class="bg-transparent">
-    <div class="sm:flex sm:items-center px-8 pt-4">
-      <div class="sm:flex-auto">
-        <h1 class="text-base font-semibold leading-6 text-white">Settings</h1>
-        <p class="mt-1 tracking-tight text-sm text-neutral-500">Change common settings on this Skyport panel.</p>
+   <div class="bg-transparent">
+      <div class="sm:flex sm:items-center px-8 pt-4">
+         <div class="sm:flex-auto">
+            <h1 class="text-base font-medium leading-6 text-white">Settings</h1>
+            <p class="mt-1 tracking-tight text-sm text-neutral-500">Change common settings on the Skyport panel.</p>
+         </div>
       </div>
-    </div>
-  </div>
-
-  <%- include('../../components/settings') %>
-<!--div class="grid grid-cols-1 md:lg:grid-cols-2 gap-2 md-lg"-->
-
-  <div class="flex flex-col bg-[#181818] m-6 pt-0 py-5 rounded-lg">
-    <h1 class="text-white text-[18px] font-mono px-5 p-1 mb-1 w-full bg-[#1f1e1e] rounded-t-lg font-semibold">Appearance</h1>
-    <div class="grid grid-cols-3">
-
-<div id="changenameform" class="mt-4 ml-5">
-  <form action="/admin/settings/change/name" method="POST">
-    <label for="name" class="text-neutral-400 text-sm tracking-tight mb-2">Panel Name:</label>
-    <input id="name" name="name" type="text" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-88 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" value="<%= name %>" placeholder="<%= name %>" required>
-    <button id="Save-Name" type="submit" class="mt-6 block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline focus:outline-2 focus:outline-offset-2">Save</button>
-  </form>
-</div>
-
-<div id="changelogoform" class="mt-4 ml-5">
-  <form action="/admin/settings/change/logo" method="POST" enctype="multipart/form-data">
-    <div class="flex items-center mb-4">
-      <input id="useImage" name="useImage" type="checkbox" class="w-4 h-4 text-neutral-600 bg-transparent border-white/5 rounded focus:ring-neutral-500 focus:ring-2">
-      <label for="useImage" class="ml-2 text-sm font-medium text-neutral-400">Image</label>
-    </div>
-    <div id="imageUploadBox" class="hidden mb-4">
-      <label for="logo" class="text-neutral-400 text-sm tracking-tight mb-2">Upload Logo:</label>
-      <input type="file" name="logo" id="logo" accept="image/*" class="block w-full text-sm text-neutral-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-semibold file:bg-white/5 file:text-neutral-300 hover:file:bg-white/10 transition">
-    </div>
-    <input type="hidden" name="type" id="logoType" value="none">
-    <button id="logoButton" type="submit" class="mt-6 block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline focus:outline-2 focus:outline-offset-2">Remove logo</button>
-  </form>
-</div>
-
-<div id="registerpage" class="mt-4">
-  <form action="/admin/settings/toggle/register" method="POST">
-    <div class="flex items-center mb-4">
-      <% if (settings.register === true) { %>
-      <span class="text-sm font-medium text-neutral-400">Register Page: <strong class="text-green-500">Enabled</strong></span>
-      <% } else { %>
-      <span class="text-sm font-medium text-neutral-400">Register Page: <strong class="text-red-500">Disabled</strong></span>
-      <% } %>
-    </div>
-
-    <div class="flex flex-row">
-    <% if (settings.register === true) { %>  
-      <button id="toggleregister" type="submit" class="block rounded-l-lg bg-white px-3 py-2 text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline focus:outline-2 focus:outline-offset-2">Disable</button>
-      <button id="toggleregister" type="submit" class="block rounded-r-lg bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-lg hover:bg-green-500 transition focus:outline focus:outline-2 focus:outline-offset-2 opacity-[0.7]" disabled>Enable</button>
-        <% } else { %>
-          <button id="toggleregister" type="submit" class="block rounded-l-lg bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-lg hover:bg-red-500 transition focus:outline focus:outline-2 focus:outline-offset-2 opacity-[0.7]" disabled>Disable</button>
-          <button id="toggleregister" type="submit" class="block rounded-r-lg bg-white px-3 py-2 text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline focus:outline-2 focus:outline-offset-2">Enable</button>
-    <% } %>  
-  </div>
-  </form>
-
-  <div id="forceverifyform" class="mt-4">
-    <form action="/admin/settings/toggle/force-verify" method="POST">
-      <div class="flex items-center mb-4">
-        <% if (settings.forceVerify === true) { %>
-          <span class="text-sm font-medium text-neutral-400">Force Verify Email: <strong class="text-green-500">Enabled</strong></span>
-        <% } else { %>
-          <span class="text-sm font-medium text-neutral-400">Force Verify Email: <strong class="text-red-500">Disabled</strong></span>
-        <% } %>
+   </div>
+   <%- include('../../components/settings') %>
+   <!--div class="grid grid-cols-1 md:lg:grid-cols-2 gap-2 md-lg"-->
+   <div class="flex flex-col bg-white/5 m-8 pt-0 py-5 rounded-xl">
+      <h1 class="text-white text-[18px] px-5 p-1 py-4 mb-1 w-full bg-white/5 rounded-t-xl font-medium">General</h1>
+      <div class="grid grid-cols-3">
+         <div id="changenameform" class="mt-4 ml-5">
+            <form action="/admin/settings/change/name" method="POST">
+               <label for="name" class="text-neutral-400 text-sm tracking-tight mb-2">Panel Name:</label>
+               <input id="name" name="name" type="text" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-88 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" value="<%= name %>" placeholder="<%= name %>" required>
+               <button id="Save-Name" type="submit" class="mt-6 block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline focus:outline-2 focus:outline-offset-2">Save</button>
+            </form>
+         </div>
+         <div id="changelogoform" class="mt-6 ml-5">
+          <label for="name" class="text-neutral-400 text-sm tracking-tight mb-2">Panel Logo:</label>
+            <form action="/admin/settings/change/logo" class="mt-4" method="POST" enctype="multipart/form-data">
+               <div class="flex items-center mb-4">
+                  <input id="useImage" name="useImage" type="checkbox" class="w-4 h-4 text-neutral-600 bg-transparent border-white/5 rounded focus:ring-neutral-500 focus:ring-2">
+                  <label for="useImage" class="ml-2 text-sm font-medium text-neutral-400">Image</label>
+               </div>
+               <div id="imageUploadBox" class="hidden mb-4">
+                  <label for="logo" class="text-neutral-400 text-sm tracking-tight mb-2">Upload Logo:</label>
+                  <input type="file" name="logo" id="logo" accept="image/*" class="block w-full text-sm text-neutral-400 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-medium file:bg-white/5 file:text-neutral-300 hover:file:bg-white/10 transition">
+               </div>
+               <input type="hidden" name="type" id="logoType" value="none">
+               <button id="logoButton" type="submit" class="mt-6 block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline focus:outline-2 focus:outline-offset-2">Remove logo</button>
+            </form>
+         </div>
+         <div id="registerpage" class="mt-6">
+            <form action="/admin/settings/toggle/register" method="POST">
+               <div class="flex items-center mb-2">
+                  <% if (settings.register === true) { %>
+                  <span class="text-neutral-400 text-sm tracking-tight mb-2">Register Page: <span class="font-medium text-green-500">Enabled</span></span>
+                  <% } else { %>
+                  <span class="text-neutral-400 text-sm tracking-tight mb-2">Register Page: <span class="font-medium text-red-500">Disabled</span></span>
+                  <% } %>
+               </div>
+               <div class="flex flex-row">
+                  <% if (settings.register === true) { %>  
+                  <button id="toggleregister" type="submit" class="block rounded-l-lg bg-white px-3 py-2 text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline focus:outline-2 focus:outline-offset-2">Disable</button>
+                  <button id="toggleregister" type="submit" class="block rounded-r-lg bg-green-600 px-3 py-2 text-sm font-medium text-white shadow-lg hover:bg-green-500 transition focus:outline focus:outline-2 focus:outline-offset-2 opacity-[0.7]" disabled>Enable</button>
+                  <% } else { %>
+                  <button id="toggleregister" type="submit" class="block rounded-l-lg bg-red-600 px-3 py-2 text-sm font-medium text-white shadow-lg hover:bg-red-500 transition focus:outline focus:outline-2 focus:outline-offset-2 opacity-[0.7]" disabled>Disable</button>
+                  <button id="toggleregister" type="submit" class="block rounded-r-lg bg-white px-3 py-2 text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline focus:outline-2 focus:outline-offset-2">Enable</button>
+                  <% } %>  
+               </div>
+            </form>
+            <div id="forceverifyform" class="mt-4 mb-4">
+               <form action="/admin/settings/toggle/force-verify" method="POST">
+                  <div class="flex items-center mb-2 mt-4">
+                     <% if (settings.forceVerify === true) { %>
+                     <span class="text-neutral-400 text-sm tracking-tight mb-2">Force Verify Email: <span class="font-medium text-green-500">Enabled</span></span>
+                     <% } else { %>
+                     <span class="text-neutral-400 text-sm tracking-tight mb-2">Force Verify Email: <span class="font-medium text-red-500">Disabled</span></span>
+                     <% } %>
+                  </div>
+                  <div class="flex flex-row">
+                     <% if (settings.forceVerify === true) { %>
+                     <button id="toggleforceverify" type="submit" class="block rounded-l-lg bg-white px-3 py-2 text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline focus:outline-2 focus:outline-offset-2">Disable</button>
+                     <button id="toggleforceverify" type="submit" class="block rounded-r-lg bg-green-600 px-3 py-2 text-sm font-medium text-white shadow-lg hover:bg-green-500 transition focus:outline focus:outline-2 focus:outline-offset-2 opacity-[0.7]" disabled>Enable</button>
+                     <% } else { %>
+                     <button id="toggleforceverify" type="submit" class="block rounded-l-lg bg-red-600 px-3 py-2 text-sm font-medium text-white shadow-lg hover:bg-red-500 transition focus:outline focus:outline-2 focus:outline-offset-2 opacity-[0.7]" disabled>Disable</button>
+                     <button id="toggleforceverify" type="submit" class="block rounded-r-lg bg-white px-3 py-2 text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline focus:outline-2 focus:outline-offset-2">Enable</button>
+                     <% } %>
+                  </div>
+               </form>
+            </div>
+         </div>
       </div>
-
-      <div class="flex flex-row">
-        <% if (settings.forceVerify === true) { %>
-          <button id="toggleforceverify" type="submit" class="block rounded-l-lg bg-white px-3 py-2 text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline focus:outline-2 focus:outline-offset-2">Disable</button>
-          <button id="toggleforceverify" type="submit" class="block rounded-r-lg bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-lg hover:bg-green-500 transition focus:outline focus:outline-2 focus:outline-offset-2 opacity-[0.7]" disabled>Enable</button>
-        <% } else { %>
-          <button id="toggleforceverify" type="submit" class="block rounded-l-lg bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-lg hover:bg-red-500 transition focus:outline focus:outline-2 focus:outline-offset-2 opacity-[0.7]" disabled>Disable</button>
-          <button id="toggleforceverify" type="submit" class="block rounded-r-lg bg-white px-3 py-2 text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline focus:outline-2 focus:outline-offset-2">Enable</button>
-        <% } %>
-      </div>
-    </form>
-  </div>
-</div>
-</div>
-<!--/div-->
-
-
-</div>
+      <!--/div-->
+   </div>
 </main>
-
 <%- include('../../components/footer') %>
-
 <script>
-  document.getElementById('useImage').addEventListener('change', function() {
-    const imageUploadBox = document.getElementById('imageUploadBox');
-    const logoButton = document.getElementById('logoButton');
-    const logoType = document.getElementById('logoType');
-    
-    if (this.checked) {
-      imageUploadBox.classList.remove('hidden');
-      logoButton.textContent = 'Save new logo';
-      logoType.value = 'image';
-    } else {
-      imageUploadBox.classList.add('hidden');
-      logoButton.textContent = 'Remove logo';
-      logoType.value = 'none';
-    }
-  });
-</script>
+   document.getElementById('useImage').addEventListener('change', function() {
+     const imageUploadBox = document.getElementById('imageUploadBox');
+     const logoButton = document.getElementById('logoButton');
+     const logoType = document.getElementById('logoType');
+     
+     if (this.checked) {
+       imageUploadBox.classList.remove('hidden');
+       logoButton.textContent = 'Save new logo';
+       logoType.value = 'image';
+     } else {
+       imageUploadBox.classList.add('hidden');
+       logoButton.textContent = 'Remove logo';
+       logoType.value = 'none';
+     }
+   });
+</script>
\ No newline at end of file
diff --git a/views/admin/settings/smtp.ejs b/views/admin/settings/smtp.ejs
index 2427965..0818ce4 100644
--- a/views/admin/settings/smtp.ejs
+++ b/views/admin/settings/smtp.ejs
@@ -4,7 +4,7 @@
   <div class="bg-transparent">
     <div class="sm:flex sm:items-center px-8 pt-4">
       <div class="sm:flex-auto">
-        <h1 class="text-base font-semibold leading-6 text-white">Settings</h1>
+        <h1 class="text-base font-medium leading-6 text-white">Settings</h1>
         <p class="mt-1 tracking-tight text-sm text-neutral-500">Change common settings on this Skyport panel.</p>
       </div>
     </div>
@@ -12,36 +12,35 @@
 
   <%- include('../../components/settings') %>
 
-  <div class="flex flex-col bg-[#181818] m-6 pt-0 py-5 rounded-lg">
-    <h1 class="text-white text-[18px] font-mono px-5 p-1 mb-1 w-full bg-[#1f1e1e] rounded-t-lg font-semibold">SMTP Settings</h1>
-    <div class="bg-transparent shadow-xl border border-white/5 rounded-lg overflow-hidden sm:p-6">
-      <form action="/admin/settings/saveSmtpSettings" method="POST">
+  <div class="flex flex-col bg-white/5 m-8 pt-0 py-5 rounded-xl">
+    <h1 class="text-white text-[18px] px-5 p-1 py-4 mb-1 w-full bg-white/5 rounded-t-xl font-medium">SMTP</h1>
+      <form class="m-5" action="/admin/settings/saveSmtpSettings" method="POST">
         <label for="smtpServer" class="text-neutral-400 text-sm block">SMTP Server:</label>
-        <input type="text" id="smtpServer" name="smtpServer" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-full px-4 py-2 border-white/5 bg-neutral-900" value="<%= smtpSettings.server || '' %>" placeholder="SMTP Server" required>
+        <input type="text" id="smtpServer" name="smtpServer" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-full px-4 py-2 border-white/5 bg-neutral-900" value="<%= smtpSettings.server || '' %>" placeholder="SMTP Server" required>
         
         <label for="smtpPort" class="text-neutral-400 text-sm block mt-4">SMTP Port:</label>
-        <input type="number" id="smtpPort" name="smtpPort" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-full px-4 py-2 border-white/5 bg-neutral-900" value="<%= smtpSettings.port || '' %>" placeholder="SMTP Port" required>
+        <input type="number" id="smtpPort" name="smtpPort" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-full px-4 py-2 border-white/5 bg-neutral-900" value="<%= smtpSettings.port || '' %>" placeholder="SMTP Port" required>
         
         <label for="smtpUser" class="text-neutral-400 text-sm block mt-4">SMTP Username:</label>
-        <input type="text" id="smtpUser" name="smtpUser" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-full px-4 py-2 border-white/5 bg-neutral-900" value="<%= smtpSettings.username || '' %>" placeholder="SMTP Username" required>
+        <input type="text" id="smtpUser" name="smtpUser" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-full px-4 py-2 border-white/5 bg-neutral-900" value="<%= smtpSettings.username || '' %>" placeholder="SMTP Username" required>
         
         <label for="smtpPass" class="text-neutral-400 text-sm block mt-4">SMTP Password:</label>
-        <input type="password" id="smtpPass" name="smtpPass" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-full px-4 py-2 border-white/5 bg-neutral-900" value="<%= smtpSettings.password || '' %>" placeholder="SMTP Password" required>
+        <input type="password" id="smtpPass" name="smtpPass" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-full px-4 py-2 border-white/5 bg-neutral-900" value="<%= smtpSettings.password || '' %>" placeholder="SMTP Password" required>
 
         <label for="smtpFromName" class="text-neutral-400 text-sm block mt-4">Mail From Name:</label>
-        <input type="text" id="smtpFromName" name="smtpFromName" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-full px-4 py-2 border-white/5 bg-neutral-900" value="<%= smtpSettings.fromName || '' %>" placeholder="Mail From Name" required>
+        <input type="text" id="smtpFromName" name="smtpFromName" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-full px-4 py-2 border-white/5 bg-neutral-900" value="<%= smtpSettings.fromName || '' %>" placeholder="Mail From Name" required>
 
         <label for="smtpFromAddress" class="text-neutral-400 text-sm block mt-4">Mail From Address:</label>
-        <input type="email" id="smtpFromAddress" name="smtpFromAddress" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-full px-4 py-2 border-white/5 bg-neutral-900" value="<%= smtpSettings.fromAddress || '' %>" placeholder="Mail From Address" required>
+        <input type="email" id="smtpFromAddress" name="smtpFromAddress" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-full px-4 py-2 border-white/5 bg-neutral-900" value="<%= smtpSettings.fromAddress || '' %>" placeholder="Mail From Address" required>
         
-        <button type="submit" class="mt-6 block rounded-lg bg-white px-3 py-2 text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500">Save SMTP Settings</button>
+        <button type="submit" class="mt-6 block rounded-xl bg-white px-3 py-2 text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500">Save SMTP Settings</button>
       </form>
 
       <!-- Test SMTP Settings Form -->
-      <form action="/sendTestEmail" method="POST">
+      <form class="m-5" action="/sendTestEmail" method="POST">
         <label for="recipientEmail" class="text-neutral-400 text-sm block mt-6">Recipient Email:</label>
-        <input type="email" id="recipientEmail" name="recipientEmail" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-full px-4 py-2 border-white/5 bg-neutral-900" required>
-        <button type="submit" class="mt-4 block rounded-lg bg-blue-500 text-white px-3 py-2 text-sm font-semibold shadow-lg hover:bg-blue-600 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">Send Test Email</button>
+        <input type="email" id="recipientEmail" name="recipientEmail" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-full px-4 py-2 border-white/5 bg-neutral-900" required>
+        <button type="submit" class="mt-4 block rounded-xl bg-blue-500 text-white px-3 py-2 text-sm font-medium shadow-lg hover:bg-blue-600 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">Send Test Email</button>
         <% if (req.query.msg && req.query.msg == "TestemailSentsuccess") { %>
           <div class="mt-2">
             <span class="text-emerald-600 font-normal text-sm">Test Mail Sent Successfully. Your SMTP Server is Working!</span>
@@ -63,7 +62,6 @@
             </div>
           <% } %>
       </form>
-    </div>
   </div>
 </main>
 
diff --git a/views/admin/users.ejs b/views/admin/users.ejs
index 61f54eb..331d28d 100644
--- a/views/admin/users.ejs
+++ b/views/admin/users.ejs
@@ -3,7 +3,7 @@
   <div class="bg-transparent">
     <div class="sm:flex sm:items-center px-8 pt-4">
       <div class="sm:flex-auto">
-        <h1 class="text-base font-semibold leading-6 text-white">Users</h1>
+        <h1 class="text-base font-medium leading-6 text-white">Users</h1>
         <p class="mt-1 tracking-tight text-sm text-neutral-500">
           A list of all the users set up on the Skyport panel.
         </p>
@@ -12,7 +12,7 @@
         <button
           id="createButton"
           type="button"
-          class="block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+          class="block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
         >
           Create new user
         </button>
@@ -32,34 +32,34 @@
           <tr>
             <th
               scope="col"
-              class="py-2 pl-0 pr-8 font-semibold sm:pl-80 lg:pl-8"
+              class="py-2 pl-0 pr-8 font-medium sm:pl-80 lg:pl-8"
             >
               Name
             </th>
             <th
             scope="col"
-            class="py-2 pl-0 pr-8 font-semibold sm:pl-80 lg:pl-8"
+            class="py-2 pl-0 pr-8 font-medium sm:pl-80 lg:pl-8"
           >
             Email
           </th>
-            <th scope="col" class="py-2 pl-0 pr-8 font-semibold sm:table-cell">
+            <th scope="col" class="py-2 pl-0 pr-8 font-medium sm:table-cell">
               Information
             </th>
             <th
               scope="col"
-              class="py-2 pl-0 pr-8 font-semibold md:table-cell lg:pr-20"
+              class="py-2 pl-0 pr-8 font-medium md:table-cell lg:pr-20"
             >
               Role
             </th>
             <th
               scope="col"
-              class="py-2 pl-0 pr-8 font-semibold md:table-cell lg:pr-20"
+              class="py-2 pl-0 pr-8 font-medium md:table-cell lg:pr-20"
             >
               Verification Status
             </th>
             <th
               scope="col"
-              class="py-2 pl-0 pr-8 font-semibold md:table-cell lg:pr-20"
+              class="py-2 pl-0 pr-8 font-medium md:table-cell lg:pr-20"
             >
               Actions
             </th>
@@ -84,7 +84,7 @@
             <td class="hidden py-4 pl-0 pr-4 sm:table-cell sm:pr-8">
               <div class="flex gap-x-3">
                 <div
-                  class="rounded-lg bg-neutral-800/40 px-2 py-1 text-xs font-medium text-neutral-400 ring-1 ring-inset ring-white/10"
+                  class="rounded-xl bg-neutral-800/40 px-2 py-1 text-xs font-medium text-neutral-400 ring-1 ring-inset ring-white/10"
                 >
                   <%= user.email %>
                 </div>
@@ -93,7 +93,7 @@
             <td class="hidden py-4 pl-0 pr-4 sm:table-cell sm:pr-8">
               <div class="flex gap-x-3">
                 <div
-                  class="rounded-lg bg-neutral-800/40 px-2 py-1 text-xs font-medium text-neutral-400 ring-1 ring-inset ring-white/10"
+                  class="rounded-xl bg-neutral-800/40 px-2 py-1 text-xs font-medium text-neutral-400 ring-1 ring-inset ring-white/10"
                 >
                   <%= user.userId %>
                 </div>
@@ -141,7 +141,7 @@
                   ><button
                     id="editButton"
                     type="button"
-                    class="block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-gray-50 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                    class="block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-gray-50 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                   >
                     Edit
                   </button></a
@@ -151,7 +151,7 @@
                 <button
                   id="removeButton"
                   type="button"
-                  class="removeButton block rounded-lg bg-red-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-lg hover:bg-red-500 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                  class="removeButton block rounded-xl bg-red-600 px-3 py-2 text-center text-sm font-medium text-white shadow-lg hover:bg-red-500 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                   data-user-id="<%= user.userId %>"                
                   >
                   Remove
@@ -172,14 +172,14 @@
           id="userName"
           type="text"
           name="username"
-          class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
+          class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
           placeholder="JohnDoe"
         />
         <input
           id="email"
           type="email"
           name="email"
-          class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
+          class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
           placeholder="your@email.tld"
         />
 
@@ -190,7 +190,7 @@
           id="userPass"
           type="password"
           name="password"
-          class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
+          class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
           placeholder="******"
         />
 
@@ -200,7 +200,7 @@
         <select
           id="userAdmin"
           name="admin"
-          class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
+          class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
         >
           <option value="true">True</option>
           <option value="false">False</option>
@@ -210,36 +210,36 @@
         <select
           id="userVerified"
           name="verified"
-          class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
+          class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
         >
           <option value="true">True</option>
           <option value="false">False</option>
         </select>
         <!-- <label class="text-neutral-400 text-sm tracking-tight mb-2">Tags:</label>
-         <input id="nodeTags" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="Tag 1 - Tag 2 - Tag 3">
+         <input id="nodeTags" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="Tag 1 - Tag 2 - Tag 3">
 
          <label class="text-neutral-400 text-sm tracking-tight mb-2">RAM (GB):</label>
-         <input id="nodeRam" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="8">
+         <input id="nodeRam" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="8">
 
          <label class="text-neutral-400 text-sm tracking-tight mb-2">Disk (GB):</label>
-         <input id="nodeDisk" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="40">
+         <input id="nodeDisk" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="40">
 
          <label class="text-neutral-400 text-sm tracking-tight mb-2">Processor:</label>
-         <input id="nodeProcessor" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="AMD EPYC 9454 - 16 Threads">
+         <input id="nodeProcessor" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="AMD EPYC 9454 - 16 Threads">
 
          <label class="text-neutral-400 text-sm tracking-tight mb-2">IP Address:</label>
-         <input id="nodeAddress" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="192.168.1.1 or my.hostnamehere.com">
+         <input id="nodeAddress" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="192.168.1.1 or my.hostnamehere.com">
 
          <label class="text-neutral-400 text-sm tracking-tight mb-2">Daemon Port:</label>
-         <input id="nodePort" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="8080">
+         <input id="nodePort" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="8080">
 
          <label class="text-neutral-400 text-sm tracking-tight mb-2">Access Key:</label>
-         <input id="nodeApiKey" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="skyportd_xxxxxxxxxxxxxxxx"> -->
+         <input id="nodeApiKey" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" placeholder="skyportd_xxxxxxxxxxxxxxxx"> -->
 
         <button
           id="createNodeBtn"
           type="button"
-          class="block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+          class="block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
         >
           Create
         </button>
diff --git a/views/auth/2fa.ejs b/views/auth/2fa.ejs
index 8f6a8fb..ff95d30 100644
--- a/views/auth/2fa.ejs
+++ b/views/auth/2fa.ejs
@@ -7,17 +7,17 @@
   <link href="../assets/tailwind.css" rel="stylesheet">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
+  <link href="https://api.fontshare.com/v2/css?f[]=general-sans@500,300,600,400,700&display=swap" rel="stylesheet">
 </head>
-<body style="font-family: 'IBM Plex Sans'" class="bg-[#181818] h-full">
+<body style="font-family: 'General Sans'" class="bg-black h-full">
     <div class="min-h-full flex">
         <div class="flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
           <div class="mx-auto w-full max-w-sm lg:w-96">
             <div>
               <% if (logo == true) { %><img class="h-12 w-auto" src="../assets/logo.png"> <% } %>
-              <h2 class="<% if (logo == true) { %>mt-6<% } %> text-3xl font-semibold text-white">2-Factor Authentication</h2>
+              <h2 class="<% if (logo == true) { %>mt-6<% } %> text-3xl font-medium text-white">2-Factor Authentication</h2>
               <p class="mt-2 text-sm text-neutral-500">
-                Please enter the 6 character code displayed on your authenticator App.
+                Please enter the 6 character code displayed on your authenticator app.
               </p>
             </div>
       
@@ -28,17 +28,17 @@
                   <div>
                     <label for="email" class="block text-sm font-medium text-neutral-400"> Code </label>
                     <div class="mt-1">
-                      <input placeholder="000000" type="text" id="token" name="token" required required class="appearance-none block w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 text-white transition sm:text-sm">
+                      <input placeholder="000000" type="text" id="token" name="token" required required class="appearance-none block w-full px-3 py-2 bg-white/5 border border-white/10 rounded-xl shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 text-white transition sm:text-sm">
                     </div>
                   </div>
       
                   <div>
-                    <button type="submit" class="w-full cursor-pointer flex transition justify-center py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-neutral-800 bg-white hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500">Submit</button>
+                    <button type="submit" class="w-full cursor-pointer flex transition justify-center py-2 px-4 border border-transparent rounded-xl shadow-sm text-sm font-medium text-neutral-800 bg-white hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500">Submit</button>
                   </div>
       
                   <% if (req.query.err && req.query.err == "InvalidAuthCode") { %>
                     <div class="mt-2"></div>
-                    <span class="text-amber-600 pt-4 font-normal text-sm">Invalid Auth Code Pleas Wait util a New Auth Code gets Generated in yor Authenticator App and Try Again.</span>
+                    <span class="text-amber-600 pt-4 font-normal text-sm">Invalid auth code.</span>
                   <% } %>
                 </form>
               </div>
@@ -46,7 +46,7 @@
           </div>
         </div>
         <div class="hidden lg:block relative w-0 flex-1">
-          <img class="absolute inset-0 h-full w-full object-cover" src="https://i.imgur.com/j9BodUY.jpeg" alt="">
+          <img class="absolute inset-0 h-full w-full object-cover" src="https://i.imgur.com/IYpZHWi.jpeg" alt="">
         </div>  
       </div>
 </body>
diff --git a/views/auth/login.ejs b/views/auth/login.ejs
index fe47ccd..2efa928 100644
--- a/views/auth/login.ejs
+++ b/views/auth/login.ejs
@@ -7,16 +7,17 @@
   <link href="../assets/tailwind.css" rel="stylesheet">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
+  <link rel="preconnect" href="https://cdn.fontshare.com">
+  <link href="https://api.fontshare.com/v2/css?f[]=general-sans@500,300,600,400,700&display=swap" rel="stylesheet">
 </head>
-<body style="font-family: 'IBM Plex Sans'" class="bg-[#181818] h-full">
+<body style="font-family: 'General Sans'" class="bg-black h-full">
 <div class="min-h-full flex">
   <div class="flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
     <div class="mx-auto w-full max-w-sm lg:w-96">
       <div>
         <% if (logo == true) { %><img class="h-12 w-auto" src="../assets/logo.png"> <% } %>
-        <h2 class="<% if (logo == true) { %>mt-6<% } %> text-3xl font-semibold text-white">Sign in to <%= name %></h2>
-        <p class="mt-2 text-sm text-neutral-500">
+        <h2 class="<% if (logo == true) { %>mt-6<% } %> text-3xl font-medium text-white">Sign in to <%= name %></h2>
+        <p class="mt-2 text-sm font-normal text-neutral-500">
           Please enter your account credentials below.
         </p>
       </div>
@@ -26,15 +27,15 @@
           <form id="login-form" class="space-y-6" onsubmit="event.preventDefault(); submitForm();">
             <div>
               <label for="email" class="block text-sm font-medium text-neutral-400"> Username or Email </label>
-              <div class="mt-1">
-                <input placeholder="example" id="username" autocomplete="username" required class="appearance-none block w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 text-white transition sm:text-sm">
+              <div class="mt-2">
+                <input placeholder="example" id="username" autocomplete="username" required class="appearance-none block w-full px-3 py-2 bg-white/10 border border-transparent rounded-xl placeholder-neutral-500 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 text-white transition sm:text-sm">
               </div>
             </div>
 
             <div class="space-y-1">
               <label for="password" class="block text-sm font-medium text-neutral-400"> Password </label>
-              <div class="mt-1">
-                <input placeholder="********" id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 text-white transition sm:text-sm">
+              <div class="mt-2">
+                <input placeholder="********" id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 bg-white/10 border border-transparent rounded-xl placeholder-neutral-500 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 text-white transition sm:text-sm">
               </div>
             </div>
 
@@ -45,22 +46,22 @@
               </div>
 
               <div class="text-sm">
-                <a href="/auth/reset-password" class="font-normal text-neutral-500 hover:text-white transition hover:scale-105">Forgot your password?</a>
+                <a href="/auth/reset-password" class="font-normal text-neutral-500 hover:text-white transition ">Forgot your password?</a>
               </div>
             </div>
 
             <div>
-              <a onclick="submitForm()" class="w-full cursor-pointer flex transition justify-center py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-neutral-800 bg-white hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500">Sign in</a>
+              <a onclick="submitForm()" class="w-full cursor-pointer flex transition justify-center py-2 px-4 border border-transparent rounded-xl shadow-sm text-sm font-medium text-neutral-800 bg-white hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500">Sign in</a>
             </div>
             
             <% if (settings.register) { %>
             <!-- <div class="text-center mt-4">
-              <a href="/register" class="w-full cursor-pointer flex transition justify-center py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-emerald-500 hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">Register</a>
+              <a href="/register" class="w-full cursor-pointer flex transition justify-center py-2 px-4 border border-transparent rounded-xl shadow-sm text-sm font-medium text-white bg-emerald-500 hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">Register</a>
             </div> -->
 
-            <div class=" mt-6 text-sm text-neutral-500 text-center py-[-50px] translate-y-[-70%]">
-              <!-- <a href="/register" class="font-normal text-neutral-500 hover:text-white transition hover:scale-105">Don't have an account? Create one!</a> -->
-              Don't have an account? <a href="/register" class="font-normal text-neutral-500 hover:text-white transition hover:scale-105">Create one</a>
+            <div class=" mt-6 text-sm text-neutral-500 py-[-50px]">
+              <!-- <a href="/register" class="font-normal text-neutral-500 hover:text-white transition ">Don't have an account? Create one!</a> -->
+              Need an account? <a href="/register" class="font-normal text-neutral-500 hover:text-white transition ">Register</a>
             </div>
             <% } %>
 
@@ -92,23 +93,19 @@
             <% } %>
             <% if (req.query.msg && req.query.msg == "UserAlreadyVerified") { %>
               <div class="mt-2"></div>
-              <span class="text-amber-600 pt-4 font-normal text-sm">User Already Verified, Login With Your Account.</span>
+              <span class="text-amber-600 pt-4 font-normal text-sm">Your account is already verified, you may sign in.</span>
             <% } %>
             <% if (req.query.msg && req.query.msg == "AccountcreateEmailSent") { %>
               <div class="mt-2"></div>
-              <span class="text-emerald-600 pt-8 font-normal text-sm">Your Account successfully create and please check your email for verify your account.</span>
+              <span class="text-emerald-600 pt-8 font-normal text-sm">Your account was successfully created - please check your email to continue.</span>
             <% } %>
             <% if (req.query.msg && req.query.msg == "AccountCreated") { %>
               <div class="mt-2"></div>
-              <span class="text-emerald-600 pt-8 font-normal text-sm">Your Account successfully create, login with your username/email and password.</span>
+              <span class="text-emerald-600 pt-8 font-normal text-sm">Your account was successfully created, you may sign in now.</span>
             <% } %>
             <% if (req.query.err && req.query.err === "UserNotVerified") { %>
               <div class="mt-6 text-center">
-                <p class="text-red-500 text-lg font-semibold mb-2">Oops! Your Account Isn't Verified Yet.</p>
-                <p class="text-white text-sm mb-4">Please verify your account to proceed.</p>
-                <a href="/resend-verification" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 inline-block">
-                  Click Here to Resend Verification Email
-                </a>
+                <p class="text-red-500 text-lg font-medium mb-2">Your account isn't verify, please check your email. <a href="/resend-verification" class="text-red-300 hover:text-red-400 transition">Resend Email</a></p>
               </div>
             <% } %>                                                                                 
 
diff --git a/views/auth/password-reset-form.ejs b/views/auth/password-reset-form.ejs
index 8672873..e2f8897 100644
--- a/views/auth/password-reset-form.ejs
+++ b/views/auth/password-reset-form.ejs
@@ -7,17 +7,17 @@
   <link href="/assets/tailwind.css" rel="stylesheet">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
+  <link href="https://api.fontshare.com/v2/css?f[]=general-sans@500,300,600,400,700&display=swap" rel="stylesheet">
 </head>
-<body style="font-family: 'IBM Plex Sans'" class="bg-[#181818] h-full">
+<body style="font-family: 'General Sans'" class="bg-black h-full">
 <div class="min-h-full flex">
   <div class="flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
     <div class="mx-auto w-full max-w-sm lg:w-96">
       <div>
         <% if (logo == true) { %><img class="h-12 w-auto" src="../assets/logo.png"> <% } %>
-        <h2 class="<% if (logo == true) { %>mt-6<% } %> text-3xl font-semibold text-white">Reset Password to <%= name %></h2>
+        <h2 class="<% if (logo == true) { %>mt-6<% } %> text-3xl font-medium text-white">Reset password</h2>
         <p class="mt-2 text-sm text-neutral-500">
-          Please enter New Password below.
+          Please enter a new password below.
         </p>
       </div>
       <div class="mt-8">
@@ -26,7 +26,7 @@
             <div>
               <label for="password" class="block text-sm font-medium text-neutral-400"> New Password </label>
               <div class="mt-1 relative">
-                <input placeholder="********" id="password" name="password" type="password" autocomplete="new-password" required minlength="8" class="appearance-none block w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 text-white transition sm:text-sm">
+                <input placeholder="********" id="password" name="password" type="password" autocomplete="new-password" required minlength="8" class="appearance-none block w-full px-3 py-2 bg-white/10 border border-transparent rounded-xl placeholder-neutral-500 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 text-white transition sm:text-sm">
                 <span id="togglePassword1" class="eye-icon">
                   <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
@@ -38,7 +38,7 @@
             <div>
               <label for="confirm-password" class="block text-sm font-medium text-neutral-400"> Confirm Password </label>
               <div class="mt-1 relative">
-                <input placeholder="********" id="confirm-password" name="confirm-password" type="password" autocomplete="new-password" required minlength="8" class="appearance-none block w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 text-white transition sm:text-sm">
+                <input placeholder="********" id="confirm-password" name="confirm-password" type="password" autocomplete="new-password" required minlength="8" class="appearance-none block w-full px-3 py-2 bg-white/10 border border-transparent rounded-xl placeholder-neutral-500 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 text-white transition sm:text-sm">
                 <span id="togglePassword2" class="eye-icon">
                   <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
@@ -52,7 +52,7 @@
               <div id="password-strength-bar" class="password-strength-bar"></div>
             </div>
             <div>
-              <button type="submit" class="w-full cursor-pointer flex justify-center py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-neutral-800 bg-white hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500">Reset Password</button>
+              <button type="submit" class="w-full cursor-pointer flex justify-center py-2 px-4 border border-transparent rounded-xl shadow-sm text-sm font-medium text-neutral-800 bg-white hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500">Reset Password</button>
             </div>
 
             <% if (req.query.err && req.query.err === "InvalidToken") { %>
@@ -65,7 +65,7 @@
     </div>
   </div>
   <div class="hidden lg:block relative w-0 flex-1">
-    <img class="absolute inset-0 h-full w-full object-cover" src="https://i.imgur.com/bugIXko.png" alt="">
+    <img class="absolute inset-0 h-full w-full object-cover" src="https://i.imgur.com/IYpZHWi.jpeg" alt="">
   </div>
 </div>
 <div>
diff --git a/views/auth/register.ejs b/views/auth/register.ejs
index 2a32dcc..7869da5 100644
--- a/views/auth/register.ejs
+++ b/views/auth/register.ejs
@@ -5,17 +5,16 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title><%= name %></title>
   <link href="../assets/tailwind.css" rel="stylesheet">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
+  <link rel="preconnect" href="https://cdn.fontshare.com">
+  <link href="https://api.fontshare.com/v2/css?f[]=general-sans@500,300,600,400,700&display=swap" rel="stylesheet">
 </head>
-<body style="font-family: 'IBM Plex Sans'" class="bg-[#181818] h-full">
+<body style="font-family: 'General Sans'" class="bg-black h-full">
 <div class="min-h-full flex">
   <div class="flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
     <div class="mx-auto w-full max-w-sm lg:w-96">
       <div>
-        <img class="h-12 w-auto rounded-lg" src="<%= settings.logo %>" alt="">
-        <h2 class="mt-6 text-3xl font-semibold text-white">Register an account</h2>
+        <img class="h-12 w-auto rounded-xl" src="<%= settings.logo %>" alt="">
+        <h2 class="mt-6 text-3xl font-medium text-white">Register an account</h2>
         <p class="mt-2 text-sm text-neutral-500">
           Please enter your details below.
         </p>
@@ -27,26 +26,26 @@
             <div>
               <label for="username" class="block text-sm font-medium text-neutral-400"> Username </label>
               <div class="mt-1">
-                <input placeholder="example" id="username" name="username" autocomplete="username" required class="appearance-none block w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 text-white transition sm:text-sm">
+                <input placeholder="example" id="username" name="username" autocomplete="username" required class="appearance-none block w-full px-3 py-2 bg-white/10 border border-transparent rounded-xl placeholder-neutral-500 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 text-white transition sm:text-sm">
               </div>
             </div>
 
             <div>
               <label for="email" class="block text-sm font-medium text-neutral-400"> Email </label>
               <div class="mt-1">
-                <input placeholder="example@domain.com" id="email" name="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 text-white transition sm:text-sm">
+                <input placeholder="example@domain.com" id="email" name="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 bg-white/10 border border-transparent rounded-xl placeholder-neutral-500 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 text-white transition sm:text-sm">
               </div>
             </div>
 
             <div class="space-y-1">
               <label for="password" class="block text-sm font-medium text-neutral-400"> Password </label>
               <div class="mt-1">
-                <input placeholder="********" id="password" name="password" type="password" autocomplete="new-password" required class="appearance-none block w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 text-white transition sm:text-sm">
+                <input placeholder="********" id="password" name="password" type="password" autocomplete="new-password" required class="appearance-none block w-full px-3 py-2 bg-white/10 border border-transparent rounded-xl placeholder-neutral-500 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 text-white transition sm:text-sm">
               </div>
             </div>
 
             <div>
-              <button type="submit" class="w-full flex transition justify-center py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-neutral-800 bg-white hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500">Register</button>
+              <button type="submit" class="w-full flex transition justify-center py-2 px-4 border border-transparent rounded-xl shadow-sm text-sm font-medium text-neutral-800 bg-white hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500">Register</button>
             </div>
             
             <% if (req.query.err && req.query.err == "InvalidCredentials") { %>
@@ -57,7 +56,7 @@
         </div>
       </div>
       <div class="mt-6 text-sm text-neutral-500">
-        Already have an account? <a href="/login" class="font-normal text-neutral-500 hover:text-white transition hover:scale-105">Sign in</a>
+        Already have an account? <a href="/login" class="font-normal text-neutral-500 hover:text-white transition ">Sign in</a>
       </div>
     </div>
   </div>
diff --git a/views/auth/resend-verification.ejs b/views/auth/resend-verification.ejs
index 5c41f3e..65ad7f7 100644
--- a/views/auth/resend-verification.ejs
+++ b/views/auth/resend-verification.ejs
@@ -7,17 +7,17 @@
   <link href="../assets/tailwind.css" rel="stylesheet">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
+  <link href="https://api.fontshare.com/v2/css?f[]=general-sans@500,300,600,400,700&display=swap" rel="stylesheet">
 </head>
-<body style="font-family: 'IBM Plex Sans'" class="bg-[#181818] h-full">
+<body style="font-family: 'General Sans'" class="bg-black h-full">
 <div class="min-h-full flex">
   <div class="flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
     <div class="mx-auto w-full max-w-sm lg:w-96">
       <div>
         <% if (logo == true) { %><img class="h-12 w-auto" src="../assets/logo.png"> <% } %>
-        <h2 class="<% if (logo == true) { %>mt-6<% } %> text-3xl font-semibold text-white">Resend Verification Email for <%= name %></h2>
+        <h2 class="<% if (logo == true) { %>mt-6<% } %> text-3xl font-medium text-white">Resend verification email</h2>
         <p class="mt-2 text-sm text-neutral-500">
-          Please enter your Email below to resend the verification email.
+          Please enter your email below to resend the verification email.
         </p>
       </div>
       <div class="mt-8">
@@ -26,12 +26,12 @@
             <div>
               <label for="email" class="block text-sm font-medium text-neutral-400"> Email Address </label>
               <div class="mt-1">
-                <input placeholder="you@example.com" id="email" name="email" type="email" required class="appearance-none block w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 text-white transition sm:text-sm">
+                <input placeholder="you@example.com" id="email" name="email" type="email" required class="appearance-none block w-full px-3 py-2 bg-white/10 border border-transparent rounded-xl placeholder-neutral-500 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 text-white transition sm:text-sm">
               </div>
             </div>
 
             <div>
-              <button type="submit" class="w-full cursor-pointer flex justify-center py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-neutral-800 bg-white hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500">Resend Verification Email</button>
+              <button type="submit" class="w-full cursor-pointer flex justify-center py-2 px-4 border border-transparent rounded-xl shadow-sm text-sm font-medium text-neutral-800 bg-white hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500">Resend Verification Email</button>
             </div>
 
             <% if (req.query.msg && req.query.msg === 'VerificationEmailResent') { %>
@@ -52,7 +52,7 @@
     </div>
   </div>
   <div class="hidden lg:block relative w-0 flex-1">
-    <img class="absolute inset-0 h-full w-full object-cover" src="https://i.imgur.com/bugIXko.png" alt="">
+    <img class="absolute inset-0 h-full w-full object-cover" src="https://i.imgur.com/IYpZHWi.jpeg" alt="">
   </div>
 </div>
 </body>
diff --git a/views/auth/reset-password.ejs b/views/auth/reset-password.ejs
index f665f96..3b0d046 100644
--- a/views/auth/reset-password.ejs
+++ b/views/auth/reset-password.ejs
@@ -7,17 +7,17 @@
   <link href="../assets/tailwind.css" rel="stylesheet">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
+  <link href="https://api.fontshare.com/v2/css?f[]=general-sans@500,300,600,400,700&display=swap" rel="stylesheet">
 </head>
-<body style="font-family: 'IBM Plex Sans'" class="bg-[#181818] h-full">
+<body style="font-family: 'General Sans'" class="bg-black h-full">
 <div class="min-h-full flex">
   <div class="flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
     <div class="mx-auto w-full max-w-sm lg:w-96">
       <div>
         <% if (logo == true) { %><img class="h-12 w-auto" src="../assets/logo.png"> <% } %>
-        <h2 class="<% if (logo == true) { %>mt-6<% } %> text-3xl font-semibold text-white">Reset Password to <%= name %></h2>
+        <h2 class="<% if (logo == true) { %>mt-6<% } %> text-3xl font-medium text-white">Reset password</h2>
         <p class="mt-2 text-sm text-neutral-500">
-          Please enter your Email below.
+          Please enter your email below.
         </p>
       </div>
       <div class="mt-8">
@@ -26,12 +26,12 @@
             <div>
               <label for="email" class="block text-sm font-medium text-neutral-400"> Email Address </label>
               <div class="mt-1">
-                <input placeholder="you@example.com" id="email" name="email" type="email" required class="appearance-none block w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg shadow-sm placeholder-neutral-500 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 text-white transition sm:text-sm">
+                <input placeholder="you@example.com" id="email" name="email" type="email" required class="appearance-none block w-full px-3 py-2 bg-white/10 border border-transparent rounded-xl placeholder-neutral-500 focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 text-white transition sm:text-sm">
               </div>
             </div>
 
             <div>
-              <button type="submit" class="w-full cursor-pointer flex justify-center py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-neutral-800 bg-white hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500">Send Reset Link</button>
+              <button type="submit" class="w-full cursor-pointer flex justify-center py-2 px-4 border border-transparent rounded-xl shadow-sm text-sm font-medium text-neutral-800 bg-white hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500">Send Reset Link</button>
             </div>
 
             <% if (req.query.msg && req.query.msg === 'PasswordSent') { %>
@@ -52,7 +52,7 @@
     </div>
   </div>
   <div class="hidden lg:block relative w-0 flex-1">
-    <img class="absolute inset-0 h-full w-full object-cover" src="https://i.imgur.com/bugIXko.png" alt="">
+    <img class="absolute inset-0 h-full w-full object-cover" src="https://i.imgur.com/IYpZHWi.jpeg" alt="">
   </div>
 </div>
 </body>
diff --git a/views/components/admin_addons_template.ejs b/views/components/admin_addons_template.ejs
index 91908a1..5822679 100644
--- a/views/components/admin_addons_template.ejs
+++ b/views/components/admin_addons_template.ejs
@@ -1,137 +1,335 @@
 <!doctype html>
 <html class="h-full w-full">
-<head>
-  <title><%= name %></title>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link href="/assets/tailwind.css" rel="stylesheet">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
-</head>
-<body style="font-family: 'IBM Plex Sans'" class="bg-[#141414] h-full w-full">
-<div>
-  <script>
-    document.addEventListener('DOMContentLoaded', () => {
-        const loader = document.getElementById('loader');
-        const content = document.getElementById('content');
+   <head>
+      <title><%= name %></title>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <link href="/assets/tailwind.css" rel="stylesheet">
+      <link rel="preconnect" href="https://fonts.googleapis.com">
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+      <link rel="preconnect" href="https://cdn.fontshare.com">
+      <link href="https://api.fontshare.com/v2/css?f[]=general-sans@500,300,600,400,700&display=swap" rel="stylesheet">
+      <link href="https://fonts.cdnfonts.com/css/graphik-trial" rel="stylesheet">
+   </head>
+   <body style="font-family: 'General Sans" class="bg-black h-full w-full">
+      <div>
+      <style>
+         .collapsed span {
+         display: none;
+         }
+         .collapsed p {
+         display: none;
+         }
+         .collapsed h1 {
+         display: none;
+         }
+         .collapsed .nav-link svg {
+         margin-right: 0;
+         }
+         .collapsed {
+         width: 4% !important;
+         }
+         .colcont {
+         padding-left: 4.2rem
+         }
+         .transition {
+         transition: all 0.3s ease-in-out;
+         }
+         .sidebar nav ul {
+         position: relative;
+         }
+         #active-background {
+         position: absolute;
+         left: 1rem; /* Adjust based on your layout */
+         width: calc(100% - 2rem); /* Adjust based on your layout */
+         height: 2.25rem; /* Adjust based on your nav item height */
+         background-color: #171717;
+         border-radius: 0.5rem;
+         transition: transform 0.2s ease-in-out;
+         z-index: 0;
+         }
+         .nav-link {
+         position: relative;
+         z-index: 1;
+         }
+         .nav-link.active {
+         color: white;
+         font-weight: 500;
+         }
+      </style>
+      <script>
+         document.addEventListener('DOMContentLoaded', () => {
+             const sidebar = document.querySelector('.sidebar');
+             const toggleButton = document.getElementById('sidebar-toggle');
+             const colcont = document.getElementById('colcont');
+         
+             function setCookie(name, value, days) {
+                 const date = new Date();
+                 date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+                 const expires = "expires=" + date.toUTCString();
+                 document.cookie = name + "=" + value + ";" + expires + ";path=/";
+             }
+             function getCookie(name) {
+                 const nameEQ = name + "=";
+                 const ca = document.cookie.split(';');
+                 for(let i = 0; i < ca.length; i++) {
+                     let c = ca[i];
+                     while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+                     if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+                 }
+                 return null;
+             }
+             const sidebarState = getCookie('sidebar-collapsed');
+             if (sidebarState === 'true') {
+                 sidebar.classList.add('collapsed');
+                 colcont.classList.add('colcont');
+             } else {
+                 sidebar.classList.remove('collapsed');
+                 colcont.classList.remove('colcont');
+             }
+             toggleButton.addEventListener('click', () => {
+                 sidebar.classList.toggle('collapsed');
+                 colcont.classList.toggle('colcont');
+                 const isCollapsed = sidebar.classList.contains('collapsed');
+                 setCookie('sidebar-collapsed', isCollapsed, 7);
+             });
+         });
+      </script>
+      <script>
+         document.addEventListener('DOMContentLoaded', () => {
+             const loader = document.getElementById('loader');
+             const content = document.getElementById('content');
+         
+             setTimeout(() => {
+                 loader.classList.add('opacity-0');
+                 content.classList.remove('opacity-0');
+                 
+                 setTimeout(() => {
+                     loader.style.display = 'none';
+                 }, 150);
+             }, 300);
+         });
+      </script>
+      <!-- Static sidebar for desktop -->
+      <div class="sidebar transition hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-56 lg:flex-col">
+         <div class="flex grow flex-col gap-y-5 overflow-hidden bg-black border-r border-white/5">
+            <nav class="flex flex-1 flex-col">
+               <div class="pl-6 pt-5 pb-4 flex">
+                  <a href="/" class="flex">
+                     <% if (logo == true) { %>
+                     <img src="../assets/logo.png" class="h-7 w-7 rounded mr-3 inline-flex">
+                     <% } %>
+                     <h1 class="text-white font-medium tracking-tight text-lg"><%= name %></h1>
+                  </a>
+               </div>
+               <ul role="list" class="flex flex-1 flex-col gap-y-7">
+                  <li>
+                     <ul role="list" class="-mx-2 space-y-1">
+                        <div id="active-background" class="absolute left-0 w-full h-8 bg-[#171717] rounded-2xl transition-all duration-300 ease-in-out"></div>
+                        <li>
+                          <a href="/admin/overview" class="transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-1.5 rounded-xl shadow-sm text-sm leading-6 font-normal">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 mt-0.5 h-5">
+                              <path stroke-linecap="round" stroke-linejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
+                            </svg>                                                              
+                            Go Back
+                          </a>
+                        </li>
+                        <li>
+                          <a href="/admin/plugins" class="transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-1.5 rounded-xl shadow-sm text-sm leading-6 font-normal">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 mt-0.5 h-5">
+                              <path fill-rule="evenodd" d="M4.25 2A2.25 2.25 0 0 0 2 4.25v2.5A2.25 2.25 0 0 0 4.25 9h2.5A2.25 2.25 0 0 0 9 6.75v-2.5A2.25 2.25 0 0 0 6.75 2h-2.5Zm0 9A2.25 2.25 0 0 0 2 13.25v2.5A2.25 2.25 0 0 0 4.25 18h2.5A2.25 2.25 0 0 0 9 15.75v-2.5A2.25 2.25 0 0 0 6.75 11h-2.5Zm9-9A2.25 2.25 0 0 0 11 4.25v2.5A2.25 2.25 0 0 0 13.25 9h2.5A2.25 2.25 0 0 0 18 6.75v-2.5A2.25 2.25 0 0 0 15.75 2h-2.5Zm0 9A2.25 2.25 0 0 0 11 13.25v2.5A2.25 2.25 0 0 0 13.25 18h2.5A2.25 2.25 0 0 0 18 15.75v-2.5A2.25 2.25 0 0 0 15.75 11h-2.5Z" clip-rule="evenodd" />
+                            </svg>                                               
+                            Overview
+                          </a>
+                        </li>
+          
+                        <p class="pl-8 text-neutral-400 text-xs font-semibold pt-6 pb-2">Plugins</p>
+                        <% Object.keys(pluginsidebar).forEach(plugin => { %>
+                        <li>
+                          <a href="<%= pluginsidebar[plugin] %>" class="transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-1.5 rounded-xl shadow-sm text-sm leading-6 font-normal">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 mt-0.5 h-5">
+                              <path d="M11.25 5.337c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.036 1.007-1.875 2.25-1.875S15 2.34 15 3.375c0 .369-.128.713-.349 1.003-.215.283-.401.604-.401.959 0 .332.278.598.61.578 1.91-.114 3.79-.342 5.632-.676a.75.75 0 0 1 .878.645 49.17 49.17 0 0 1 .376 5.452.657.657 0 0 1-.66.664c-.354 0-.675-.186-.958-.401a1.647 1.647 0 0 0-1.003-.349c-1.035 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401.31 0 .557.262.534.571a48.774 48.774 0 0 1-.595 4.845.75.75 0 0 1-.61.61c-1.82.317-3.673.533-5.555.642a.58.58 0 0 1-.611-.581c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.035-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959a.641.641 0 0 1-.658.643 49.118 49.118 0 0 1-4.708-.36.75.75 0 0 1-.645-.878c.293-1.614.504-3.257.629-4.924A.53.53 0 0 0 5.337 15c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.036 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.369 0 .713.128 1.003.349.283.215.604.401.959.401a.656.656 0 0 0 .659-.663 47.703 47.703 0 0 0-.31-4.82.75.75 0 0 1 .83-.832c1.343.155 2.703.254 4.077.294a.64.64 0 0 0 .657-.642Z" />
+                            </svg>                                                               
+                            <%= plugin %>
+                          </a>
+                        </li>
+                        <% }) %>
+                     </ul>
+                  </li>
+                  <!--<li>
+                     <div class="text-xs font-medium leading-6 text-neutral-400">Your teams</div>
+                     <ul role="list" class="-mx-2 mt-2 space-y-1">
+                       <li>
+                         <a href="#" class="text-neutral-400 hover:text-white hover:bg-neutral-800 group flex gap-x-3 rounded-xl p-2 text-sm leading-6 font-medium">
+                           <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-xl border border-neutral-700 bg-neutral-800 text-[0.625rem] font-medium text-neutral-400 group-hover:text-white">H</span>
+                           <span class="truncate">Heroicons</span>
+                         </a>
+                       </li>
+                       <li>
+                         <a href="#" class="text-neutral-400 hover:text-white hover:bg-neutral-800 group flex gap-x-3 rounded-xl p-2 text-sm leading-6 font-medium">
+                           <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-xl border border-neutral-700 bg-neutral-800 text-[0.625rem] font-medium text-neutral-400 group-hover:text-white">T</span>
+                           <span class="truncate">Tailwind Labs</span>
+                         </a>
+                       </li>
+                       <li>
+                         <a href="#" class="text-neutral-400 hover:text-white hover:bg-neutral-800 group flex gap-x-3 rounded-xl p-2 text-sm leading-6 font-medium">
+                           <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-xl border border-neutral-700 bg-neutral-800 text-[0.625rem] font-medium text-neutral-400 group-hover:text-white">W</span>
+                           <span class="truncate">Workcation</span>
+                         </a>
+                       </li>
+                     </ul>
+                     </li> -->
+                  <li class="mt-auto border-t border-white/5">
+                     <a href="/auth/logout" class="group -mx-2 flex gap-x-3 rounded-xl pl-6 py-4 text-sm font-medium leading-6 text-neutral-500 transition hover:text-white">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 mt-0.5 h-5">
+                           <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
+                        </svg>
+                        <span>Sign out</span>
+                     </a>
+                  </li>
+               </ul>
+            </nav>
+         </div>
+      </div>
+      <div id="colcont" class="lg:pl-56">
+      <div class="sticky backdrop-blur top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 bg-transparent px-4 shadow-sm sm:gap-x-6 sm:px-4 lg:px-4">
+         <button type="button" id="sidebar-toggle" class="w-fit p-2 mt-1 rounded-xl text-white border border-white/5 hover:scale-110 active:scale-100 duration-200">
+            <span class="sr-only">Open sidebar</span>
+            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+               <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+            </svg>
+         </button>
+         <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
+            <div class="relative flex flex-1 flex-col">
+               <div class="flex items-center w-fit mt-3.5 px-4 py-2 h-10  rounded-xl border border-white/5  active:scale-100 duration-200 bg-transparent text-white">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5 text-gray-400">
+                     <path fill-rule="evenodd" d="M10.5 3.75a6.75 6.75 0 1 0 0 13.5 6.75 6.75 0 0 0 0-13.5ZM2.25 10.5a8.25 8.25 0 1 1 14.59 5.28l4.69 4.69a.75.75 0 1 1-1.06 1.06l-4.69-4.69A8.25 8.25 0 0 1 2.25 10.5Z" clip-rule="evenodd" />
+                  </svg>
+                  <input id="searchInput" 
+                     class="bg-transparent border-transparent focus-visible:ring-transparent border-none ring-transparent sm:text-sm placeholder:text-zinc-500" 
+                     placeholder="Search..." 
+                     type="search" 
+                     name="search"
+                     autocomplete="off"
+                     onclick="input.blur()"
+                     onfocus="showSearchResults()">
+               </div>
+               <div id="searchResults" class="absolute bg-white w-[12.5rem] rounded-xl shadow-lg hidden mt-20 px-2 pb-2">
+               </div>
+            </div>
+            <script src="/javascript/search/index.js"></script>
+            <script>
+               document.addEventListener('keydown', function(event) {
+                 if (event.key === 'F1') {
+                   event.preventDefault();
+                   document.getElementById('searchInput').focus();
+                 }
+               });
+               
+               function showSearchResults() {
+                 document.getElementById('searchResults').classList.remove('hidden');
+               }
+               
+               document.getElementById('searchInput').addEventListener('focus', showSearchResults);
+            </script>
+            <script>
+               function showSearchResults() {
+                   var searchResults = document.getElementById('searchResults');
+                   searchResults.classList.remove('hidden');
+               }
+               
+               document.addEventListener('click', function(event) {
+                   var searchInput = document.getElementById('searchInput');
+                   var searchResults = document.getElementById('searchResults');
+                   if (!searchInput.contains(event.target) && !searchResults.contains(event.target)) {
+                       searchResults.classList.add('hidden');
+                   }
+               });
+            </script>
+            <div class="flex items-center gap-x-4 lg:gap-x-6">
+               <!-- Profile dropdown -->
+               <div class="relative mt-3 mr-4">
+                  <button type="button" class="-m-1.5 flex items-center p-1.5" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
+                  <img class="h-6 w-6 rounded-xl bg-transparent" src="https://source.boringavatars.com/beam/120/<%= user.username %>?colors=264653,f4a261,e76f51" alt="">
+                  <span class="hidden lg:flex lg:items-center">
+                  <span class="ml-2.5 text-sm font-medium leading-6 text-white" aria-hidden="true"><%= user.username %> <span class="font-mono text-xs text-zinc-300 font-normal">(<%= user.userId.substring(0, 6) %>)</span></span>
+                  </span>
+                  </button>
+               </div>
+            </div>
+         </div>
+      </div>
+      <script>
+document.addEventListener('DOMContentLoaded', function() {
+  const navLinks = document.querySelectorAll('.nav-link');
+  const activeBackground = document.getElementById('active-background');
+  const contentSection = document.getElementById('content');
+  let isAnimating = false;
 
-        setTimeout(() => {
-            loader.classList.add('opacity-0');
-            content.classList.remove('opacity-0');
-            
-            setTimeout(() => {
-                loader.style.display = 'none';
-            }, 150);
-        }, 300);
+  function updateActiveLink(currentPath) {
+    navLinks.forEach((link) => {
+      if (link.getAttribute('href') === currentPath) {
+        link.classList.add('active');
+        const linkRect = link.getBoundingClientRect();
+        const navRect = link.closest('ul').getBoundingClientRect();
+        activeBackground.style.transform = `translateY(${linkRect.top - navRect.top}px)`;
+      } else {
+        link.classList.remove('active');
+      }
     });
-</script>
-  <!-- Static sidebar for desktop -->
-  <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-56 lg:flex-col">
-    <div class="flex grow flex-col gap-y-5 overflow-hidden bg-[#101010] border-r border-white/5">
-      <nav class="flex flex-1 flex-col">
-        <div class="pl-6 pt-5 pb-4 flex">
-          <a href="/" class="flex">
-            <% if (logo == true) { %>
-              <img src="../assets/logo.png" class="h-7 w-7 rounded mr-3 inline-flex">
-            <% } %>
-            <h1 class="text-white font-medium tracking-tight text-lg"><%= name %></h1>
-          </a>
-        </div>
-        <ul role="list" class="flex flex-1 flex-col gap-y-7">
-          <li>
-            <ul role="list" class="-mx-2 space-y-1">
-              <li>
-                <button onclick="window.history.back()" class="hover:scale-105 transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-2 rounded-lg shadow-sm text-sm leading-6 font-normal">
-                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 mt-0.5 h-5">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
-                  </svg>                                                              
-                  Go Back
-                </button>
-              </li>
-              <li>
-                <a href="/admin/plugins" class="hover:scale-105 transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-2 rounded-lg shadow-sm text-sm leading-6 font-normal">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 mt-0.5 h-5">
-                    <path fill-rule="evenodd" d="M4.25 2A2.25 2.25 0 0 0 2 4.25v2.5A2.25 2.25 0 0 0 4.25 9h2.5A2.25 2.25 0 0 0 9 6.75v-2.5A2.25 2.25 0 0 0 6.75 2h-2.5Zm0 9A2.25 2.25 0 0 0 2 13.25v2.5A2.25 2.25 0 0 0 4.25 18h2.5A2.25 2.25 0 0 0 9 15.75v-2.5A2.25 2.25 0 0 0 6.75 11h-2.5Zm9-9A2.25 2.25 0 0 0 11 4.25v2.5A2.25 2.25 0 0 0 13.25 9h2.5A2.25 2.25 0 0 0 18 6.75v-2.5A2.25 2.25 0 0 0 15.75 2h-2.5Zm0 9A2.25 2.25 0 0 0 11 13.25v2.5A2.25 2.25 0 0 0 13.25 18h2.5A2.25 2.25 0 0 0 18 15.75v-2.5A2.25 2.25 0 0 0 15.75 11h-2.5Z" clip-rule="evenodd" />
-                  </svg>                                               
-                  Overview
-                </a>
-              </li>
+  }
 
-              <p class="pl-8 text-neutral-400 text-xs font-semibold pt-6 pb-2">Plugins</p>
-              <% Object.keys(pluginsidebar).forEach(plugin => { %>
-              <li>
-                <a href="<%= pluginsidebar[plugin] %>" class="hover:scale-105 transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-2 rounded-lg shadow-sm text-sm leading-6 font-normal">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 mt-0.5 h-5">
-                    <path d="M11.25 5.337c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.036 1.007-1.875 2.25-1.875S15 2.34 15 3.375c0 .369-.128.713-.349 1.003-.215.283-.401.604-.401.959 0 .332.278.598.61.578 1.91-.114 3.79-.342 5.632-.676a.75.75 0 0 1 .878.645 49.17 49.17 0 0 1 .376 5.452.657.657 0 0 1-.66.664c-.354 0-.675-.186-.958-.401a1.647 1.647 0 0 0-1.003-.349c-1.035 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401.31 0 .557.262.534.571a48.774 48.774 0 0 1-.595 4.845.75.75 0 0 1-.61.61c-1.82.317-3.673.533-5.555.642a.58.58 0 0 1-.611-.581c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.035-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959a.641.641 0 0 1-.658.643 49.118 49.118 0 0 1-4.708-.36.75.75 0 0 1-.645-.878c.293-1.614.504-3.257.629-4.924A.53.53 0 0 0 5.337 15c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.036 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.369 0 .713.128 1.003.349.283.215.604.401.959.401a.656.656 0 0 0 .659-.663 47.703 47.703 0 0 0-.31-4.82.75.75 0 0 1 .83-.832c1.343.155 2.703.254 4.077.294a.64.64 0 0 0 .657-.642Z" />
-                  </svg>                                                               
-                  <%= plugin %>
-                </a>
-              </li>
-              <% }) %>
-            </ul>
-          </li>
-          <li class="mt-auto border-t border-white/5">
-            <a href="/auth/logout" class="group -mx-2 flex gap-x-3 rounded-lg pl-6 py-4 text-sm font-medium leading-6 text-neutral-500 transition hover:text-white">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 mt-0.5 h-5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
-              </svg>              
-              Sign out
-            </a>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </div>
+  function animatePageTransition(callback) {
+    if (isAnimating) return;
+    isAnimating = true;
 
-  <div class="lg:pl-56">
-    <div class="sticky backdrop-blur top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 bg-transparent px-4 shadow-sm sm:gap-x-6 sm:px-4 lg:px-4">
-      <button type="button" class="w-fit p-2 mt-1 rounded-lg text-white border border-white/5 hover:scale-110 active:scale-100 duration-200">
-        <span class="sr-only">Open sidebar</span>
-        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-        </svg>
-      </button>
+    contentSection.style.opacity = '0';
+    contentSection.style.transform = 'translateX(-20px)';
 
-      <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
-        <form class="relative flex flex-1" action="#" method="GET">
-          <input id="search-field" class="w-fit px-4 py-2 h-10 mt-3.5 rounded-lg text-white border border-white/5 hover:scale-105 active:scale-100 duration-200 bg-transparent border border-white/5 pr-0 text-white placeholder:text-zinc-500 focus:ring-0 sm:text-sm" placeholder="Search..." type="search" name="search">
-        </form>
-        <div class="flex items-center gap-x-4 lg:gap-x-6">
-          <!-- Profile dropdown -->
-          <div class="relative mt-3 mr-4">
-            <button type="button" class="-m-1.5 flex items-center p-1.5" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
-              <img class="h-6 w-6 rounded-md bg-transparent" src="https://source.boringavatars.com/beam/120/<%= user.username %>?colors=264653,f4a261,e76f51" alt="">
-              <span class="hidden lg:flex lg:items-center">
-                <span class="ml-2.5 text-sm font-semibold leading-6 text-white" aria-hidden="true"><%= user.username %> <span class="font-mono text-xs text-zinc-300 font-normal">(<%= user.userId.substring(0, 6) %>)</span></span>
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <script>
-        document.addEventListener("DOMContentLoaded", function() {
-          var currentPageUrl = window.location.pathname;
-          var navLinks = document.querySelectorAll('.nav-link');
-          navLinks.forEach(function(link) {
-            var linkUrl = link.getAttribute('href');
-            if (currentPageUrl === linkUrl) {
-              link.className = 'nav-link';
-              link.classList.add(
-                'hover:scale-105', 'transition', 'bg-[#171717]', 'text-white', 'mt-1', 'pl-4', 'mx-4', 'group', 'flex', 'gap-x-3', 'shadow-sm', 'rounded-lg', 'py-2', 'text-sm', 'leading-6', 'font-semibold',
-              );
-            }
-          });
-        });
+    setTimeout(() => {
+      callback();
+      contentSection.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
+      contentSection.style.opacity = '1';
+      contentSection.style.transform = 'translateX(0)';
+      
+      setTimeout(() => {
+        contentSection.style.transition = '';
+        isAnimating = false;
+      }, 300);
+    }, 300);
+  }
+
+  navLinks.forEach(link => {
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      const href = link.getAttribute('href');
+      
+      animatePageTransition(() => {
+        window.location.href = href;
+      });
+    });
+  });
+
+  // Prevent animation on initial load and browser back/forward
+  if (performance.getEntriesByType("navigation")[0].type === 'navigate') {
+    contentSection.style.opacity = '1';
+    contentSection.style.transform = 'translateX(0)';
+  }
+
+  // Update active link on page load and popstate
+  updateActiveLink(window.location.pathname);
+  window.addEventListener('popstate', () => {
+    updateActiveLink(window.location.pathname);
+  });
+});
       </script>
-        <div id="loader" class="fixed ml-56 mt-16 inset-0 flex items-center justify-center bg-[#141414] transition-opacity duration-300 opacity-100 z-50">
-          <svg class="animate-spin h-5 w-5 text-white inline-flex"
-          xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
-             stroke-width="4"></circle>
-          <path class="opacity-75" fill="currentColor"
-             d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
-          </path>
-       </svg>
-  </div>
+      <div id="loader" class="fixed ml-56 mt-16 inset-0 flex items-center justify-center bg-black transition-opacity duration-300 opacity-100 z-50">
+         <svg class="animate-spin h-5 w-5 text-white inline-flex"
+            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
+               stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor"
+               d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+            </path>
+         </svg>
+      </div>
\ No newline at end of file
diff --git a/views/components/instance.ejs b/views/components/instance.ejs
index 59e6ff6..83b852e 100644
--- a/views/components/instance.ejs
+++ b/views/components/instance.ejs
@@ -3,24 +3,24 @@
        <div class="hidden sm:block">
           <nav class="flex">
              <ul role="list" class="flex min-w-full flex-none gap-x-2 text-sm font-normal leading-6 text-neutral-400">
-                <li class="hover:scale-105 transition">
-                   <a href="/instance/<%= req.params.id %>" class="nav-link2 py-2 px-2.5 transition border border-transparent hover:border-white/5 hover:text-white hover:shadow rounded-lg">
+                <li class=" transition">
+                   <a href="/instance/<%= req.params.id %>" class="nav-link2 py-2 px-3 transition border hover:bg-white/5 border-transparent hover:text-white hover:shadow rounded-full">
                       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 mb-0.5 inline-flex mr-1">
                         <path fill-rule="evenodd" d="M2.25 6a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V6Zm3.97.97a.75.75 0 0 1 1.06 0l2.25 2.25a.75.75 0 0 1 0 1.06l-2.25 2.25a.75.75 0 0 1-1.06-1.06l1.72-1.72-1.72-1.72a.75.75 0 0 1 0-1.06Zm4.28 4.28a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 0-1.5h-3Z" clip-rule="evenodd" />
                       </svg>                                             
                      Console
                   </a>
                 </li>
-                <li class="hover:scale-105 transition">
-                   <a href="/instance/<%= req.params.id %>/files" class="nav-link2 py-2 px-2.5 transition border border-transparent hover:border-white/5 hover:text-white hover:shadow rounded-lg">
+                <li class=" transition">
+                   <a href="/instance/<%= req.params.id %>/files" class="nav-link2 py-2 px-3 transition border hover:bg-white/5 border-transparent hover:text-white hover:shadow rounded-full">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 mb-0.5 inline-flex mr-1">
                         <path d="M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z" />
                       </svg>
                       Files
                    </a>
                 </li>
-                <li class="hover:scale-105 transition">
-                  <a href="/instance/<%= req.params.id %>/users" class="nav-link2 py-2 px-2.5 transition border border-transparent hover:border-white/5 hover:text-white hover:shadow rounded-lg">
+                <li class=" transition">
+                  <a href="/instance/<%= req.params.id %>/users" class="nav-link2 py-2 px-3 transition border hover:bg-white/5 border-transparent hover:text-white hover:shadow rounded-full">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 mb-0.5 inline-flex mr-1">
                         <path fill-rule="evenodd" d="M8.25 6.75a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0ZM15.75 9.75a3 3 0 1 1 6 0 3 3 0 0 1-6 0ZM2.25 9.75a3 3 0 1 1 6 0 3 3 0 0 1-6 0ZM6.31 15.117A6.745 6.745 0 0 1 12 12a6.745 6.745 0 0 1 6.709 7.498.75.75 0 0 1-.372.568A12.696 12.696 0 0 1 12 21.75c-2.305 0-4.47-.612-6.337-1.684a.75.75 0 0 1-.372-.568 6.787 6.787 0 0 1 1.019-4.38Z" clip-rule="evenodd" />
                         <path d="M5.082 14.254a8.287 8.287 0 0 0-1.308 5.135 9.687 9.687 0 0 1-1.764-.44l-.115-.04a.563.563 0 0 1-.373-.487l-.01-.121a3.75 3.75 0 0 1 3.57-4.047ZM20.226 19.389a8.287 8.287 0 0 0-1.308-5.135 3.75 3.75 0 0 1 3.57 4.047l-.01.121a.563.563 0 0 1-.373.486l-.115.04c-.567.2-1.156.349-1.764.441Z" />
@@ -28,16 +28,16 @@
                      Users
                   </a>
                </li>
-                <li class="hover:scale-105 transition">
-                   <a href="/instance/<%= req.params.id %>/network" class="nav-link2 py-2 px-2.5 transition border border-transparent hover:border-white/5 hover:text-white hover:shadow rounded-lg">
+                <li class=" transition">
+                   <a href="/instance/<%= req.params.id %>/network" class="nav-link2 py-2 px-3 transition border hover:bg-white/5 border-transparent hover:text-white hover:shadow rounded-full">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 mb-0.5 inline-flex mr-1">
                         <path fill-rule="evenodd" d="M6.97 2.47a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.25 4.81V16.5a.75.75 0 0 1-1.5 0V4.81L3.53 8.03a.75.75 0 0 1-1.06-1.06l4.5-4.5Zm9.53 4.28a.75.75 0 0 1 .75.75v11.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 1 1 1.06-1.06l3.22 3.22V7.5a.75.75 0 0 1 .75-.75Z" clip-rule="evenodd" />
                       </svg>                                                            
                       Network
                    </a>
                 </li>
-                <li class="hover:scale-105 transition">
-                  <a href="/instance/<%= req.params.id %>/archives" class="nav-link2 py-2 px-2.5 transition border border-transparent hover:border-white/5 hover:text-white hover:shadow rounded-lg">
+                <li class=" transition">
+                  <a href="/instance/<%= req.params.id %>/archives" class="nav-link2 py-2 px-3 transition border hover:bg-white/5 border-transparent hover:text-white hover:shadow rounded-full">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 mb-0.5 inline-flex mr-1">
                         <path d="M3.375 3C2.339 3 1.5 3.84 1.5 4.875v.75c0 1.036.84 1.875 1.875 1.875h17.25c1.035 0 1.875-.84 1.875-1.875v-.75C22.5 3.839 21.66 3 20.625 3H3.375Z" />
                         <path fill-rule="evenodd" d="m3.087 9 .54 9.176A3 3 0 0 0 6.62 21h10.757a3 3 0 0 0 2.995-2.824L20.913 9H3.087Zm6.163 3.75A.75.75 0 0 1 10 12h4a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" />
@@ -45,8 +45,8 @@
                      Archives
                   </a>
                </li>
-               <li class="hover:scale-105 transition">
-                  <a href="/instance/<%= req.params.id %>/db" class="nav-link2 py-2 px-2.5 transition border border-transparent hover:border-white/5 hover:text-white hover:shadow rounded-lg">
+               <li class=" transition">
+                  <a href="/instance/<%= req.params.id %>/db" class="nav-link2 py-2 px-3 transition border hover:bg-white/5 border-transparent hover:text-white hover:shadow rounded-full">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 mb-0.5 inline-flex mr-1">
                         <path d="M21 6.375c0 2.692-4.03 4.875-9 4.875S3 9.067 3 6.375 7.03 1.5 12 1.5s9 2.183 9 4.875Z" />
                         <path d="M12 12.75c2.685 0 5.19-.586 7.078-1.609a8.283 8.283 0 0 0 1.897-1.384c.016.121.025.244.025.368C21 12.817 16.97 15 12 15s-9-2.183-9-4.875c0-.124.009-.247.025-.368a8.285 8.285 0 0 0 1.897 1.384C6.809 12.164 9.315 12.75 12 12.75Z" />
@@ -56,8 +56,8 @@
                      Databases
                   </a>
                </li>
-                <li class="hover:scale-105 transition">
-                   <a href="/instance/<%= req.params.id %>/ftp" class="nav-link2 py-2 px-2.5 transition border border-transparent hover:border-white/5 hover:text-white hover:shadow rounded-lg">
+                <li class=" transition">
+                   <a href="/instance/<%= req.params.id %>/ftp" class="nav-link2 py-2 px-3 transition border hover:bg-white/5 border-transparent hover:text-white hover:shadow rounded-full">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 mb-0.5 inline-flex mr-1">
                         <path d="M4.08 5.227A3 3 0 0 1 6.979 3H17.02a3 3 0 0 1 2.9 2.227l2.113 7.926A5.228 5.228 0 0 0 18.75 12H5.25a5.228 5.228 0 0 0-3.284 1.153L4.08 5.227Z" />
                         <path fill-rule="evenodd" d="M5.25 13.5a3.75 3.75 0 1 0 0 7.5h13.5a3.75 3.75 0 1 0 0-7.5H5.25Zm10.5 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm3.75-.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" clip-rule="evenodd" />
@@ -65,8 +65,8 @@
                       FTP
                    </a>
                 </li>
-                <li class="hover:scale-105 transition">
-                   <a href="/instance/<%= req.params.id %>/settings" class="nav-link2 py-2 px-2.5 transition border border-transparent hover:border-white/5 hover:text-white hover:shadow rounded-lg">
+                <li class=" transition">
+                   <a href="/instance/<%= req.params.id %>/settings" class="nav-link2 py-2 px-3 transition border hover:bg-white/5 border-transparent hover:text-white hover:shadow rounded-full">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 mb-0.5 inline-flex mr-1">
                         <path fill-rule="evenodd" d="M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 0 0-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 0 0-2.282.819l-.922 1.597a1.875 1.875 0 0 0 .432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 0 0 0 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 0 0-.432 2.385l.922 1.597a1.875 1.875 0 0 0 2.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 0 0 2.28-.819l.923-1.597a1.875 1.875 0 0 0-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 0 0 0-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 0 0-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 0 0-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 0 0-1.85-1.567h-1.843ZM12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z" clip-rule="evenodd" />
                       </svg>
@@ -78,8 +78,8 @@
                   <% if (plugin.instancesidebar) { %>
                       <% Object.entries(plugin.instancesidebar).forEach(([key, value]) => { %>
 
-                <li class="hover:scale-105 transition">
-                  <a href="<%= (value.url).replace('%id%', req.params.id) %>" class="nav-link2 py-2 px-2.5 transition border border-transparent hover:border-white/5 hover:text-white hover:shadow rounded-lg">
+                <li class=" transition">
+                  <a href="<%= (value.url).replace('%id%', req.params.id) %>" class="nav-link2 py-2 px-3 transition border hover:bg-white/5 border-transparent hover:text-white hover:shadow rounded-full">
                      <i class="size-4 mb-0.5 inline-flex mr-1 <%= value.icon %>"></i>
                      <%= key %>
                  </a>
@@ -95,9 +95,6 @@
        </div>
     </div>
  </div>
-<!-- added icons -->
-<script src="https://kit.fontawesome.com/4c967c0dcf.js" crossorigin="anonymous"></script>
-
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var currentPagePath = window.location.pathname;
@@ -108,9 +105,8 @@
        console.log(linkPath);
        if (currentPagePath === linkPath) {
          link.className = 'nav-link';
-         link.classList.add('text-white', 'font-semibold', 'border', 'border-transparent', 'bg-white/5', 'font-semibold', 'py-2', 'px-2.5', 'rounded-lg', 'shadow-sm');
+         link.classList.add('text-white', 'font-medium', 'border', 'border-transparent', 'bg-white/10', 'font-medium', 'py-2', 'px-3', 'rounded-full', 'shadow-sm');
        }
      });
    });
    </script>
-   
diff --git a/views/components/settings.ejs b/views/components/settings.ejs
index fa67dd3..3ffbdf6 100644
--- a/views/components/settings.ejs
+++ b/views/components/settings.ejs
@@ -3,19 +3,19 @@
     <div class="hidden sm:block">
       <nav class="flex">
         <ul role="list" class="flex min-w-full flex-none gap-x-2 text-sm font-normal leading-6 text-neutral-400">
-          <li class="hover:scale-105 transition">
-            <a href="/admin/settings" class="nav-link2 py-2 px-2.5 transition border border-transparent hover:border-white/5 hover:text-white hover:shadow rounded-lg">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 mb-0.5 inline-flex mr-1">
-                <path fill-rule="evenodd" d="M2.25 5.25a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3V15a3 3 0 0 1-3 3h-3v.257c0 .597.237 1.17.659 1.591l.621.622a.75.75 0 0 1-.53 1.28h-9a.75.75 0 0 1-.53-1.28l.621-.622a2.25 2.25 0 0 0 .659-1.59V18h-3a3 3 0 0 1-3-3V5.25Zm1.5 0v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5Z" clip-rule="evenodd" />
-              </svg>                                                          
-              Appearance
+          <li class=" transition">
+            <a href="/admin/settings" class="nav-link2 py-2 px-3 transition border hover:bg-white/5 border-transparent hover:text-white hover:shadow rounded-full">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 mb-0.5 inline-flex mr-1">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />
+              </svg>                                                                   
+              General
             </a>
           </li>
-          <li class="hover:scale-105 transition">
-            <a href="/admin/settings/smtp" class="nav-link2 py-2 px-2.5 transition border border-transparent hover:border-white/5 hover:text-white hover:shadow rounded-lg">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 mb-0.5 inline-flex mr-1">
-                <path fill-rule="evenodd" d="M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5Zm0 2h14v14H5V5Zm8.25 6.25a.75.75 0 0 1 .75.75v.5h.5a.75.75 0 0 1 .75.75v1.5a.75.75 0 0 1-.75.75h-.5v.5a.75.75 0 0 1-.75.75h-1.5a.75.75 0 0 1-.75-.75v-.5h-.5a.75.75 0 0 1-.75-.75v-1.5a.75.75 0 0 1 .75-.75h.5v-.5a.75.75 0 0 1 .75-.75h1.5Z" />
-              </svg>                                                          
+          <li class=" transition">
+            <a href="/admin/settings/smtp" class="nav-link2 py-2 px-3 transition border hover:bg-white/5 border-transparent hover:text-white hover:shadow rounded-full">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4 mb-0.5 inline-flex mr-1">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 1 0-2.636 6.364M16.5 12V8.25" />
+              </svg>                                                                        
               SMTP
             </a>
           </li>
@@ -24,8 +24,6 @@
     </div>
   </div>
 </div>
-<!-- added icons -->
-<script src="https://kit.fontawesome.com/4c967c0dcf.js" crossorigin="anonymous"></script>
 
  <script>
    document.addEventListener("DOMContentLoaded", function() {
@@ -37,7 +35,7 @@
        console.log(linkPath);
        if (currentPagePath === linkPath) {
          link.className = 'nav-link';
-         link.classList.add('text-white', 'font-semibold', 'border', 'border-transparent', 'bg-white/5', 'font-semibold', 'py-2', 'px-2.5', 'rounded-lg', 'shadow-sm');
+         link.classList.add('text-white', 'font-medium', 'border', 'border-transparent', 'bg-white/10', 'font-medium', 'py-2', 'px-3', 'rounded-full', 'shadow-sm');
        }
      });
    });
diff --git a/views/components/template.ejs b/views/components/template.ejs
index d46f702..34e6b28 100644
--- a/views/components/template.ejs
+++ b/views/components/template.ejs
@@ -1,340 +1,399 @@
 <!doctype html>
 <html class="h-full w-full">
-<head>
-  <title><%= name %></title>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link href="/assets/tailwind.css" rel="stylesheet">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
-</head>
-<body style="font-family: 'IBM Plex Sans'" class="bg-[#141414] h-full w-full">
-<div>
-
-  <style>
-    .collapsed span {
-      display: none;
-    }
-    .collapsed p {
-      display: none;
-    }
-    .collapsed h1 {
-      display: none;
-    }
-
-    .collapsed .nav-link svg {
-      margin-right: 0;
-    }
-    .collapsed {
-      width: 4% !important;
-    }
-    .colcont {
-      padding-left: 4.2rem
-    }
-
-    .transition {
-      transition: all 0.3s ease-in-out;
-    }
-  </style>
-<script>
-  document.addEventListener('DOMContentLoaded', () => {
-      const sidebar = document.querySelector('.sidebar');
-      const toggleButton = document.getElementById('sidebar-toggle');
-      const colcont = document.getElementById('colcont');
+   <head>
+      <title><%= name %></title>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <link href="/assets/tailwind.css" rel="stylesheet">
+      <link rel="preconnect" href="https://fonts.googleapis.com">
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+      <link rel="preconnect" href="https://cdn.fontshare.com">
+      <link href="https://api.fontshare.com/v2/css?f[]=general-sans@500,300,600,400,700&display=swap" rel="stylesheet">
+      <link href="https://fonts.cdnfonts.com/css/graphik-trial" rel="stylesheet">
+   </head>
+   <body style="font-family: 'General Sans" class="bg-black h-full w-full">
+      <div>
+      <style>
+         .collapsed span {
+         display: none;
+         }
+         .collapsed p {
+         display: none;
+         }
+         .collapsed h1 {
+         display: none;
+         }
+         .collapsed .nav-link svg {
+         margin-right: 0;
+         }
+         .collapsed {
+         width: 4% !important;
+         }
+         .colcont {
+         padding-left: 4.2rem
+         }
+         .transition {
+         transition: all 0.3s ease-in-out;
+         }
+         .sidebar nav ul {
+         position: relative;
+         }
+         #active-background {
+         position: absolute;
+         left: 1rem; /* Adjust based on your layout */
+         width: calc(100% - 2rem); /* Adjust based on your layout */
+         height: 2.25rem; /* Adjust based on your nav item height */
+         background-color: #171717;
+         border-radius: 0.5rem;
+         transition: transform 0.2s ease-in-out;
+         z-index: 0;
+         }
+         .nav-link {
+         position: relative;
+         z-index: 1;
+         }
+         .nav-link.active {
+         color: white;
+         font-weight: 500;
+         }
+      </style>
+      <script>
+         document.addEventListener('DOMContentLoaded', () => {
+             const sidebar = document.querySelector('.sidebar');
+             const toggleButton = document.getElementById('sidebar-toggle');
+             const colcont = document.getElementById('colcont');
+         
+             function setCookie(name, value, days) {
+                 const date = new Date();
+                 date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+                 const expires = "expires=" + date.toUTCString();
+                 document.cookie = name + "=" + value + ";" + expires + ";path=/";
+             }
+             function getCookie(name) {
+                 const nameEQ = name + "=";
+                 const ca = document.cookie.split(';');
+                 for(let i = 0; i < ca.length; i++) {
+                     let c = ca[i];
+                     while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+                     if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+                 }
+                 return null;
+             }
+             const sidebarState = getCookie('sidebar-collapsed');
+             if (sidebarState === 'true') {
+                 sidebar.classList.add('collapsed');
+                 colcont.classList.add('colcont');
+             } else {
+                 sidebar.classList.remove('collapsed');
+                 colcont.classList.remove('colcont');
+             }
+             toggleButton.addEventListener('click', () => {
+                 sidebar.classList.toggle('collapsed');
+                 colcont.classList.toggle('colcont');
+                 const isCollapsed = sidebar.classList.contains('collapsed');
+                 setCookie('sidebar-collapsed', isCollapsed, 7);
+             });
+         });
+      </script>
+      <script>
+         document.addEventListener('DOMContentLoaded', () => {
+             const loader = document.getElementById('loader');
+             const content = document.getElementById('content');
+         
+             setTimeout(() => {
+                 loader.classList.add('opacity-0');
+                 content.classList.remove('opacity-0');
+                 
+                 setTimeout(() => {
+                     loader.style.display = 'none';
+                 }, 150);
+             }, 300);
+         });
+      </script>
+      <!-- Static sidebar for desktop -->
+      <div class="sidebar transition hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-56 lg:flex-col">
+         <div class="flex grow flex-col gap-y-5 overflow-hidden bg-black border-r border-white/5">
+            <nav class="flex flex-1 flex-col">
+               <div class="pl-6 pt-5 pb-4 flex">
+                  <a href="/" class="flex">
+                     <% if (logo == true) { %>
+                     <img src="../assets/logo.png" class="h-7 w-7 rounded mr-3 inline-flex">
+                     <% } %>
+                     <h1 class="text-white font-medium tracking-tight text-lg"><%= name %></h1>
+                  </a>
+               </div>
+               <ul role="list" class="flex flex-1 flex-col gap-y-7">
+                  <li>
+                     <ul role="list" class="-mx-2 space-y-1">
+                        <div id="active-background" class="absolute left-0 w-full h-8 bg-[#171717] rounded-2xl transition-all duration-300 ease-in-out"></div>
+                        <li>
+                           <a href="/instances" class=" transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-1.5 rounded-xl shadow-sm text-sm leading-6 font-normal" searchdata="container instances servers" subterm="jegli:/server/servername">
+                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 mt-0.5 h-5">
+                                 <path d="M12.378 1.602a.75.75 0 0 0-.756 0L3 6.632l9 5.25 9-5.25-8.622-5.03ZM21.75 7.93l-9 5.25v9l8.628-5.032a.75.75 0 0 0 .372-.648V7.93ZM11.25 22.18v-9l-9-5.25v8.57a.75.75 0 0 0 .372.648l8.628 5.033Z" />
+                              </svg>
+                              </svg>                                
+                              <span>Instances</span>
+                           </a>
+                           <a href="/account" searchdata="account profile <%= user.username %>" class=" transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-1.5 rounded-xl shadow-sm text-sm leading-6 font-normal">
+                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 mt-0.5 h-5">
+                                 <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-5.5-2.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10 12a5.99 5.99 0 0 0-4.793 2.39A6.483 6.483 0 0 0 10 16.5a6.483 6.483 0 0 0 4.793-2.11A5.99 5.99 0 0 0 10 12Z" clip-rule="evenodd" />
+                              </svg>
+                              <span>Account</span>
+                           </a>
+                        </li>
+                        <% if (user.admin == true) { %>
+                        <p class="pl-8 text-neutral-400 text-xs font-medium pt-6 pb-2"><span>Admin Panel</span></p>
+                        <li>
+                           <a href="/admin/overview" searchdata="admin overview control" class=" transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-1.5 rounded-xl shadow-sm text-sm leading-6 font-normal">
+                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 mt-0.5 h-5">
+                                 <path fill-rule="evenodd" d="M4.25 2A2.25 2.25 0 0 0 2 4.25v2.5A2.25 2.25 0 0 0 4.25 9h2.5A2.25 2.25 0 0 0 9 6.75v-2.5A2.25 2.25 0 0 0 6.75 2h-2.5Zm0 9A2.25 2.25 0 0 0 2 13.25v2.5A2.25 2.25 0 0 0 4.25 18h2.5A2.25 2.25 0 0 0 9 15.75v-2.5A2.25 2.25 0 0 0 6.75 11h-2.5Zm9-9A2.25 2.25 0 0 0 11 4.25v2.5A2.25 2.25 0 0 0 13.25 9h2.5A2.25 2.25 0 0 0 18 6.75v-2.5A2.25 2.25 0 0 0 15.75 2h-2.5Zm0 9A2.25 2.25 0 0 0 11 13.25v2.5A2.25 2.25 0 0 0 13.25 18h2.5A2.25 2.25 0 0 0 18 15.75v-2.5A2.25 2.25 0 0 0 15.75 11h-2.5Z" clip-rule="evenodd" />
+                              </svg>
+                              <span>Overview</span>
+                           </a>
+                        </li>
+                        <li>
+                           <a href="/admin/settings" class=" transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-1.5 rounded-xl shadow-sm text-sm leading-6 font-normal">
+                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 mt-0.5 h-5">
+                                 <path fill-rule="evenodd" d="M7.84 1.804A1 1 0 0 1 8.82 1h2.36a1 1 0 0 1 .98.804l.331 1.652a6.993 6.993 0 0 1 1.929 1.115l1.598-.54a1 1 0 0 1 1.186.447l1.18 2.044a1 1 0 0 1-.205 1.251l-1.267 1.113a7.047 7.047 0 0 1 0 2.228l1.267 1.113a1 1 0 0 1 .206 1.25l-1.18 2.045a1 1 0 0 1-1.187.447l-1.598-.54a6.993 6.993 0 0 1-1.929 1.115l-.33 1.652a1 1 0 0 1-.98.804H8.82a1 1 0 0 1-.98-.804l-.331-1.652a6.993 6.993 0 0 1-1.929-1.115l-1.598.54a1 1 0 0 1-1.186-.447l-1.18-2.044a1 1 0 0 1 .205-1.251l1.267-1.114a7.05 7.05 0 0 1 0-2.227L1.821 7.773a1 1 0 0 1-.206-1.25l1.18-2.045a1 1 0 0 1 1.187-.447l1.598.54A6.992 6.992 0 0 1 7.51 3.456l.33-1.652ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" />
+                              </svg>
+                              <span>Settings</span>
+                           </a>
+                        </li>
+                        <li>
+                           <a href="/admin/users" class=" transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-1.5 rounded-xl shadow-sm text-sm leading-6 font-normal">
+                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 mt-0.5 h-5">
+                                 <path d="M7 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM14.5 9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM1.615 16.428a1.224 1.224 0 0 1-.569-1.175 6.002 6.002 0 0 1 11.908 0c.058.467-.172.92-.57 1.174A9.953 9.953 0 0 1 7 18a9.953 9.953 0 0 1-5.385-1.572ZM14.5 16h-.106c.07-.297.088-.611.048-.933a7.47 7.47 0 0 0-1.588-3.755 4.502 4.502 0 0 1 5.874 2.636.818.818 0 0 1-.36.98A7.465 7.465 0 0 1 14.5 16Z" />
+                              </svg>
+                              <span>Users</span>
+                           </a>
+                        </li>
+                        <li>
+                           <a href="/admin/instances" class=" transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-1.5 rounded-xl shadow-sm text-sm leading-6 font-normal">
+                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 mt-0.5 h-5">
+                                 <path d="M12.378 1.602a.75.75 0 0 0-.756 0L3 6.632l9 5.25 9-5.25-8.622-5.03ZM21.75 7.93l-9 5.25v9l8.628-5.032a.75.75 0 0 0 .372-.648V7.93ZM11.25 22.18v-9l-9-5.25v8.57a.75.75 0 0 0 .372.648l8.628 5.033Z" />
+                              </svg>
+                              <span>Instances</span>
+                           </a>
+                        </li>
+                        <li>
+                           <a href="/admin/nodes" class=" transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-1.5 rounded-xl shadow-sm text-sm leading-6 font-normal">
+                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 mt-0.5 h-5">
+                                 <path d="M4.464 3.162A2 2 0 0 1 6.28 2h7.44a2 2 0 0 1 1.816 1.162l1.154 2.5c.067.145.115.291.145.438A3.508 3.508 0 0 0 16 6H4c-.288 0-.568.035-.835.1.03-.147.078-.293.145-.438l1.154-2.5Z" />
+                                 <path fill-rule="evenodd" d="M2 9.5a2 2 0 0 1 2-2h12a2 2 0 1 1 0 4H4a2 2 0 0 1-2-2Zm13.24 0a.75.75 0 0 1 .75-.75H16a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75h-.01a.75.75 0 0 1-.75-.75V9.5Zm-2.25-.75a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75H13a.75.75 0 0 0 .75-.75V9.5a.75.75 0 0 0-.75-.75h-.01ZM2 15a2 2 0 0 1 2-2h12a2 2 0 1 1 0 4H4a2 2 0 0 1-2-2Zm13.24 0a.75.75 0 0 1 .75-.75H16a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75h-.01a.75.75 0 0 1-.75-.75V15Zm-2.25-.75a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75H13a.75.75 0 0 0 .75-.75V15a.75.75 0 0 0-.75-.75h-.01Z" clip-rule="evenodd" />
+                              </svg>
+                              <span>Nodes</span>
+                           </a>
+                        </li>
+                        <li>
+                           <a href="/admin/images" class=" transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-1.5 rounded-xl shadow-sm text-sm leading-6 font-normal">
+                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 mt-0.5 h-5">
+                                 <path fill-rule="evenodd" d="M2.25 4.125c0-1.036.84-1.875 1.875-1.875h5.25c1.036 0 1.875.84 1.875 1.875V17.25a4.5 4.5 0 1 1-9 0V4.125Zm4.5 14.25a1.125 1.125 0 1 0 0-2.25 1.125 1.125 0 0 0 0 2.25Z" clip-rule="evenodd" />
+                                 <path d="M10.719 21.75h9.156c1.036 0 1.875-.84 1.875-1.875v-5.25c0-1.036-.84-1.875-1.875-1.875h-.14l-8.742 8.743c-.09.089-.18.175-.274.257ZM12.738 17.625l6.474-6.474a1.875 1.875 0 0 0 0-2.651L15.5 4.787a1.875 1.875 0 0 0-2.651 0l-.1.099V17.25c0 .126-.003.251-.01.375Z" />
+                              </svg>
+                              <span>Images</span>
+                           </a>
+                        </li>
+                        <li>
+                           <a href="/admin/apikeys" class=" transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-1.5 rounded-xl shadow-sm text-sm leading-6 font-normal">
+                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 mt-0.5 h-5">
+                                 <path fill-rule="evenodd" d="M15.75 1.5a6.75 6.75 0 0 0-6.651 7.906c.067.39-.032.717-.221.906l-6.5 6.499a3 3 0 0 0-.878 2.121v2.818c0 .414.336.75.75.75H6a.75.75 0 0 0 .75-.75v-1.5h1.5A.75.75 0 0 0 9 19.5V18h1.5a.75.75 0 0 0 .53-.22l2.658-2.658c.19-.189.517-.288.906-.22A6.75 6.75 0 1 0 15.75 1.5Zm0 3a.75.75 0 0 0 0 1.5A2.25 2.25 0 0 1 18 8.25a.75.75 0 0 0 1.5 0 3.75 3.75 0 0 0-3.75-3.75Z" clip-rule="evenodd" />
+                              </svg>
+                              <span>API Keys</span>
+                           </a>
+                        </li>
+                        <li>
+                           <a href="/admin/auditlogs" searchdata="audit logs admin" class=" transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-1.5 rounded-xl shadow-sm text-sm leading-6 font-normal">
+                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 mt-0.5 h-5">
+                                 <path fill-rule="evenodd" d="M12.516 2.17a.75.75 0 0 0-1.032 0 11.209 11.209 0 0 1-7.877 3.08.75.75 0 0 0-.722.515A12.74 12.74 0 0 0 2.25 9.75c0 5.942 4.064 10.933 9.563 12.348a.749.749 0 0 0 .374 0c5.499-1.415 9.563-6.406 9.563-12.348 0-1.39-.223-2.73-.635-3.985a.75.75 0 0 0-.722-.516l-.143.001c-2.996 0-5.717-1.17-7.734-3.08Zm3.094 8.016a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
+                              </svg>
+                              <span>Audit Logs</span>
+                           </a>
+                        </li>
+                        <li>
+                           <a href="/admin/plugins" searchdata="addons plugins admin" class=" transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-1.5 rounded-xl shadow-sm text-sm leading-6 font-normal">
+                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 mt-0.5 h-5">
+                                 <path d="M11.25 5.337c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.036 1.007-1.875 2.25-1.875S15 2.34 15 3.375c0 .369-.128.713-.349 1.003-.215.283-.401.604-.401.959 0 .332.278.598.61.578 1.91-.114 3.79-.342 5.632-.676a.75.75 0 0 1 .878.645 49.17 49.17 0 0 1 .376 5.452.657.657 0 0 1-.66.664c-.354 0-.675-.186-.958-.401a1.647 1.647 0 0 0-1.003-.349c-1.035 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401.31 0 .557.262.534.571a48.774 48.774 0 0 1-.595 4.845.75.75 0 0 1-.61.61c-1.82.317-3.673.533-5.555.642a.58.58 0 0 1-.611-.581c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.035-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959a.641.641 0 0 1-.658.643 49.118 49.118 0 0 1-4.708-.36.75.75 0 0 1-.645-.878c.293-1.614.504-3.257.629-4.924A.53.53 0 0 0 5.337 15c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.036 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.369 0 .713.128 1.003.349.283.215.604.401.959.401a.656.656 0 0 0 .659-.663 47.703 47.703 0 0 0-.31-4.82.75.75 0 0 1 .83-.832c1.343.155 2.703.254 4.077.294a.64.64 0 0 0 .657-.642Z" />
+                              </svg>
+                              <span>Plugins</span>
+                           </a>
+                        </li>
+                        <% } %>
+                     </ul>
+                  </li>
+                  <!--<li>
+                     <div class="text-xs font-medium leading-6 text-neutral-400">Your teams</div>
+                     <ul role="list" class="-mx-2 mt-2 space-y-1">
+                       <li>
+                         <a href="#" class="text-neutral-400 hover:text-white hover:bg-neutral-800 group flex gap-x-3 rounded-xl p-2 text-sm leading-6 font-medium">
+                           <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-xl border border-neutral-700 bg-neutral-800 text-[0.625rem] font-medium text-neutral-400 group-hover:text-white">H</span>
+                           <span class="truncate">Heroicons</span>
+                         </a>
+                       </li>
+                       <li>
+                         <a href="#" class="text-neutral-400 hover:text-white hover:bg-neutral-800 group flex gap-x-3 rounded-xl p-2 text-sm leading-6 font-medium">
+                           <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-xl border border-neutral-700 bg-neutral-800 text-[0.625rem] font-medium text-neutral-400 group-hover:text-white">T</span>
+                           <span class="truncate">Tailwind Labs</span>
+                         </a>
+                       </li>
+                       <li>
+                         <a href="#" class="text-neutral-400 hover:text-white hover:bg-neutral-800 group flex gap-x-3 rounded-xl p-2 text-sm leading-6 font-medium">
+                           <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-xl border border-neutral-700 bg-neutral-800 text-[0.625rem] font-medium text-neutral-400 group-hover:text-white">W</span>
+                           <span class="truncate">Workcation</span>
+                         </a>
+                       </li>
+                     </ul>
+                     </li> -->
+                  <li class="mt-auto border-t border-white/5">
+                     <a href="/auth/logout" class="group -mx-2 flex gap-x-3 rounded-xl pl-6 py-4 text-sm font-medium leading-6 text-neutral-500 transition hover:text-white">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 mt-0.5 h-5">
+                           <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
+                        </svg>
+                        <span>Sign out</span>
+                     </a>
+                  </li>
+               </ul>
+            </nav>
+         </div>
+      </div>
+      <div id="colcont" class="lg:pl-56">
+      <div class="sticky backdrop-blur top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 bg-transparent px-4 shadow-sm sm:gap-x-6 sm:px-4 lg:px-4">
+         <button type="button" id="sidebar-toggle" class="w-fit p-2 mt-1 rounded-xl text-white border border-white/5 hover:scale-110 active:scale-100 duration-200">
+            <span class="sr-only">Open sidebar</span>
+            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+               <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+            </svg>
+         </button>
+         <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
+            <div class="relative flex flex-1 flex-col">
+               <div class="flex items-center w-fit mt-3.5 px-4 py-2 h-10  rounded-xl border border-white/5  active:scale-100 duration-200 bg-transparent text-white">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5 text-gray-400">
+                     <path fill-rule="evenodd" d="M10.5 3.75a6.75 6.75 0 1 0 0 13.5 6.75 6.75 0 0 0 0-13.5ZM2.25 10.5a8.25 8.25 0 1 1 14.59 5.28l4.69 4.69a.75.75 0 1 1-1.06 1.06l-4.69-4.69A8.25 8.25 0 0 1 2.25 10.5Z" clip-rule="evenodd" />
+                  </svg>
+                  <input id="searchInput" 
+                     class="bg-transparent border-transparent focus-visible:ring-transparent border-none ring-transparent sm:text-sm placeholder:text-zinc-500" 
+                     placeholder="Search..." 
+                     type="search" 
+                     name="search"
+                     autocomplete="off"
+                     onclick="input.blur()"
+                     onfocus="showSearchResults()">
+               </div>
+               <div id="searchResults" class="absolute bg-white w-[12.5rem] rounded-xl shadow-lg hidden mt-20 px-2 pb-2">
+               </div>
+            </div>
+            <script src="/javascript/search/index.js"></script>
+            <script>
+               document.addEventListener('keydown', function(event) {
+                 if (event.key === 'F1') {
+                   event.preventDefault();
+                   document.getElementById('searchInput').focus();
+                 }
+               });
+               
+               function showSearchResults() {
+                 document.getElementById('searchResults').classList.remove('hidden');
+               }
+               
+               document.getElementById('searchInput').addEventListener('focus', showSearchResults);
+            </script>
+            <script>
+               function showSearchResults() {
+                   var searchResults = document.getElementById('searchResults');
+                   searchResults.classList.remove('hidden');
+               }
+               
+               document.addEventListener('click', function(event) {
+                   var searchInput = document.getElementById('searchInput');
+                   var searchResults = document.getElementById('searchResults');
+                   if (!searchInput.contains(event.target) && !searchResults.contains(event.target)) {
+                       searchResults.classList.add('hidden');
+                   }
+               });
+            </script>
+            <div class="flex items-center gap-x-4 lg:gap-x-6">
+               <!-- Profile dropdown -->
+               <div class="relative mt-3 mr-4">
+                  <button type="button" class="-m-1.5 flex items-center p-1.5" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
+                  <img class="h-6 w-6 rounded-xl bg-transparent" src="https://source.boringavatars.com/beam/120/<%= user.username %>?colors=264653,f4a261,e76f51" alt="">
+                  <span class="hidden lg:flex lg:items-center">
+                  <span class="ml-2.5 text-sm font-medium leading-6 text-white" aria-hidden="true"><%= user.username %> <span class="font-mono text-xs text-zinc-300 font-normal">(<%= user.userId.substring(0, 6) %>)</span></span>
+                  </span>
+                  </button>
+               </div>
+            </div>
+         </div>
+      </div>
+      <script>
+document.addEventListener('DOMContentLoaded', function() {
+  const navLinks = document.querySelectorAll('.nav-link');
+  const activeBackground = document.getElementById('active-background');
+  const contentSection = document.getElementById('content');
+  let isAnimating = false;
 
-      function setCookie(name, value, days) {
-          const date = new Date();
-          date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
-          const expires = "expires=" + date.toUTCString();
-          document.cookie = name + "=" + value + ";" + expires + ";path=/";
-      }
-      function getCookie(name) {
-          const nameEQ = name + "=";
-          const ca = document.cookie.split(';');
-          for(let i = 0; i < ca.length; i++) {
-              let c = ca[i];
-              while (c.charAt(0) === ' ') c = c.substring(1, c.length);
-              if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
-          }
-          return null;
-      }
-      const sidebarState = getCookie('sidebar-collapsed');
-      if (sidebarState === 'true') {
-          sidebar.classList.add('collapsed');
-          colcont.classList.add('colcont');
+  function updateActiveLink(currentPath) {
+    navLinks.forEach((link) => {
+      if (link.getAttribute('href') === currentPath) {
+        link.classList.add('active');
+        const linkRect = link.getBoundingClientRect();
+        const navRect = link.closest('ul').getBoundingClientRect();
+        activeBackground.style.transform = `translateY(${linkRect.top - navRect.top}px)`;
       } else {
-          sidebar.classList.remove('collapsed');
-          colcont.classList.remove('colcont');
+        link.classList.remove('active');
       }
-      toggleButton.addEventListener('click', () => {
-          sidebar.classList.toggle('collapsed');
-          colcont.classList.toggle('colcont');
-          const isCollapsed = sidebar.classList.contains('collapsed');
-          setCookie('sidebar-collapsed', isCollapsed, 7);
-      });
-  });
-</script>
-
-  <script>
-    document.addEventListener('DOMContentLoaded', () => {
-        const loader = document.getElementById('loader');
-        const content = document.getElementById('content');
-
-        setTimeout(() => {
-            loader.classList.add('opacity-0');
-            content.classList.remove('opacity-0');
-            
-            setTimeout(() => {
-                loader.style.display = 'none';
-            }, 150);
-        }, 300);
     });
-</script>
-  <!-- Static sidebar for desktop -->
-  <div class="sidebar transition hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-56 lg:flex-col">
-    <div class="flex grow flex-col gap-y-5 overflow-hidden bg-[#101010] border-r border-white/5">
-      <nav class="flex flex-1 flex-col">
-        <div class="pl-6 pt-5 pb-4 flex">
-          <a href="/" class="flex">
-            <% if (logo == true) { %>
-              <img src="../assets/logo.png" class="h-7 w-7 rounded mr-3 inline-flex">
-            <% } %>
-            <h1 class="text-white font-medium tracking-tight text-lg"><%= name %></h1>
-          </a>
-        </div>
-        <ul role="list" class="flex flex-1 flex-col gap-y-7">
-          <li>
-            <ul role="list" class="-mx-2 space-y-1">
-              <li>
-                <a href="/instances" class="hover:scale-105 transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-2 rounded-lg shadow-sm text-sm leading-6 font-normal" searchdata="container instances servers" subterm="jegli:/server/servername">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 mt-0.5 h-5">
-                    <path d="M12.378 1.602a.75.75 0 0 0-.756 0L3 6.632l9 5.25 9-5.25-8.622-5.03ZM21.75 7.93l-9 5.25v9l8.628-5.032a.75.75 0 0 0 .372-.648V7.93ZM11.25 22.18v-9l-9-5.25v8.57a.75.75 0 0 0 .372.648l8.628 5.033Z" />
-                  </svg>                                
-                </svg>                                
-                <span>Instances</span>
-                </a>
-                <a href="/account" searchdata="account profile <%= user.username %>" class="hover:scale-105 transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-2 rounded-lg shadow-sm text-sm leading-6 font-normal">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 mt-0.5 h-5">
-                    <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-5.5-2.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10 12a5.99 5.99 0 0 0-4.793 2.39A6.483 6.483 0 0 0 10 16.5a6.483 6.483 0 0 0 4.793-2.11A5.99 5.99 0 0 0 10 12Z" clip-rule="evenodd" />
-                  </svg>                                
-                  <span>Account</span>
-                </a>
-              </li>
-
-              <% if (user.admin == true) { %>
-                <p class="pl-8 text-neutral-400 text-xs font-semibold pt-6 pb-2"><span>Admin Panel</span></p>
-              <li>
-                <a href="/admin/overview" searchdata="admin overview control" class="hover:scale-105 transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-2 rounded-lg shadow-sm text-sm leading-6 font-normal">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 mt-0.5 h-5">
-                    <path fill-rule="evenodd" d="M4.25 2A2.25 2.25 0 0 0 2 4.25v2.5A2.25 2.25 0 0 0 4.25 9h2.5A2.25 2.25 0 0 0 9 6.75v-2.5A2.25 2.25 0 0 0 6.75 2h-2.5Zm0 9A2.25 2.25 0 0 0 2 13.25v2.5A2.25 2.25 0 0 0 4.25 18h2.5A2.25 2.25 0 0 0 9 15.75v-2.5A2.25 2.25 0 0 0 6.75 11h-2.5Zm9-9A2.25 2.25 0 0 0 11 4.25v2.5A2.25 2.25 0 0 0 13.25 9h2.5A2.25 2.25 0 0 0 18 6.75v-2.5A2.25 2.25 0 0 0 15.75 2h-2.5Zm0 9A2.25 2.25 0 0 0 11 13.25v2.5A2.25 2.25 0 0 0 13.25 18h2.5A2.25 2.25 0 0 0 18 15.75v-2.5A2.25 2.25 0 0 0 15.75 11h-2.5Z" clip-rule="evenodd" />
-                  </svg>                                               
-                  <span>Overview</span>
-                </a>
-              </li>
-              <li>
-                <a href="/admin/settings" class="hover:scale-105 transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-2 rounded-lg shadow-sm text-sm leading-6 font-normal">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 mt-0.5 h-5">
-                    <path fill-rule="evenodd" d="M7.84 1.804A1 1 0 0 1 8.82 1h2.36a1 1 0 0 1 .98.804l.331 1.652a6.993 6.993 0 0 1 1.929 1.115l1.598-.54a1 1 0 0 1 1.186.447l1.18 2.044a1 1 0 0 1-.205 1.251l-1.267 1.113a7.047 7.047 0 0 1 0 2.228l1.267 1.113a1 1 0 0 1 .206 1.25l-1.18 2.045a1 1 0 0 1-1.187.447l-1.598-.54a6.993 6.993 0 0 1-1.929 1.115l-.33 1.652a1 1 0 0 1-.98.804H8.82a1 1 0 0 1-.98-.804l-.331-1.652a6.993 6.993 0 0 1-1.929-1.115l-1.598.54a1 1 0 0 1-1.186-.447l-1.18-2.044a1 1 0 0 1 .205-1.251l1.267-1.114a7.05 7.05 0 0 1 0-2.227L1.821 7.773a1 1 0 0 1-.206-1.25l1.18-2.045a1 1 0 0 1 1.187-.447l1.598.54A6.992 6.992 0 0 1 7.51 3.456l.33-1.652ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" />
-                  </svg>                                 
-                  <span>Settings</span>
-                </a>
-              </li>
-              <li>
-                <a href="/admin/users" class="hover:scale-105 transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-2 rounded-lg shadow-sm text-sm leading-6 font-normal">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 mt-0.5 h-5">
-                    <path d="M7 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM14.5 9a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM1.615 16.428a1.224 1.224 0 0 1-.569-1.175 6.002 6.002 0 0 1 11.908 0c.058.467-.172.92-.57 1.174A9.953 9.953 0 0 1 7 18a9.953 9.953 0 0 1-5.385-1.572ZM14.5 16h-.106c.07-.297.088-.611.048-.933a7.47 7.47 0 0 0-1.588-3.755 4.502 4.502 0 0 1 5.874 2.636.818.818 0 0 1-.36.98A7.465 7.465 0 0 1 14.5 16Z" />
-                  </svg>                                
-                  <span>Users</span>
-                </a>
-              </li>
-              <li>
-                <a href="/admin/instances" class="hover:scale-105 transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-2 rounded-lg shadow-sm text-sm leading-6 font-normal">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 mt-0.5 h-5">
-                    <path d="M12.378 1.602a.75.75 0 0 0-.756 0L3 6.632l9 5.25 9-5.25-8.622-5.03ZM21.75 7.93l-9 5.25v9l8.628-5.032a.75.75 0 0 0 .372-.648V7.93ZM11.25 22.18v-9l-9-5.25v8.57a.75.75 0 0 0 .372.648l8.628 5.033Z" />
-                  </svg>                  
-                  <span>Instances</span>
-                </a>
-              </li>
-              <li>
-                <a href="/admin/nodes" class="hover:scale-105 transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-2 rounded-lg shadow-sm text-sm leading-6 font-normal">            
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 mt-0.5 h-5">
-                    <path d="M4.464 3.162A2 2 0 0 1 6.28 2h7.44a2 2 0 0 1 1.816 1.162l1.154 2.5c.067.145.115.291.145.438A3.508 3.508 0 0 0 16 6H4c-.288 0-.568.035-.835.1.03-.147.078-.293.145-.438l1.154-2.5Z" />
-                    <path fill-rule="evenodd" d="M2 9.5a2 2 0 0 1 2-2h12a2 2 0 1 1 0 4H4a2 2 0 0 1-2-2Zm13.24 0a.75.75 0 0 1 .75-.75H16a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75h-.01a.75.75 0 0 1-.75-.75V9.5Zm-2.25-.75a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75H13a.75.75 0 0 0 .75-.75V9.5a.75.75 0 0 0-.75-.75h-.01ZM2 15a2 2 0 0 1 2-2h12a2 2 0 1 1 0 4H4a2 2 0 0 1-2-2Zm13.24 0a.75.75 0 0 1 .75-.75H16a.75.75 0 0 1 .75.75v.01a.75.75 0 0 1-.75.75h-.01a.75.75 0 0 1-.75-.75V15Zm-2.25-.75a.75.75 0 0 0-.75.75v.01c0 .414.336.75.75.75H13a.75.75 0 0 0 .75-.75V15a.75.75 0 0 0-.75-.75h-.01Z" clip-rule="evenodd" />
-                  </svg>                                  
-                  <span>Nodes</span>
-                </a>
-              </li>
-              <li>
-                <a href="/admin/images" class="hover:scale-105 transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-2 rounded-lg shadow-sm text-sm leading-6 font-normal">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 mt-0.5 h-5">
-                    <path fill-rule="evenodd" d="M2.25 4.125c0-1.036.84-1.875 1.875-1.875h5.25c1.036 0 1.875.84 1.875 1.875V17.25a4.5 4.5 0 1 1-9 0V4.125Zm4.5 14.25a1.125 1.125 0 1 0 0-2.25 1.125 1.125 0 0 0 0 2.25Z" clip-rule="evenodd" />
-                    <path d="M10.719 21.75h9.156c1.036 0 1.875-.84 1.875-1.875v-5.25c0-1.036-.84-1.875-1.875-1.875h-.14l-8.742 8.743c-.09.089-.18.175-.274.257ZM12.738 17.625l6.474-6.474a1.875 1.875 0 0 0 0-2.651L15.5 4.787a1.875 1.875 0 0 0-2.651 0l-.1.099V17.25c0 .126-.003.251-.01.375Z" />
-                  </svg>                                                       
-                  <span>Images</span>
-                </a>
-              </li>
-              <li>
-                <a href="/admin/apikeys" class="hover:scale-105 transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-2 rounded-lg shadow-sm text-sm leading-6 font-normal">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 mt-0.5 h-5">
-                    <path fill-rule="evenodd" d="M15.75 1.5a6.75 6.75 0 0 0-6.651 7.906c.067.39-.032.717-.221.906l-6.5 6.499a3 3 0 0 0-.878 2.121v2.818c0 .414.336.75.75.75H6a.75.75 0 0 0 .75-.75v-1.5h1.5A.75.75 0 0 0 9 19.5V18h1.5a.75.75 0 0 0 .53-.22l2.658-2.658c.19-.189.517-.288.906-.22A6.75 6.75 0 1 0 15.75 1.5Zm0 3a.75.75 0 0 0 0 1.5A2.25 2.25 0 0 1 18 8.25a.75.75 0 0 0 1.5 0 3.75 3.75 0 0 0-3.75-3.75Z" clip-rule="evenodd" />
-                  </svg>                                                              
-                  <span>API Keys</span>
-                </a>
-              </li>
-              <li>
-                <a href="/admin/auditlogs" searchdata="audit logs admin" class="hover:scale-105 transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-2 rounded-lg shadow-sm text-sm leading-6 font-normal">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 mt-0.5 h-5">
-                    <path fill-rule="evenodd" d="M12.516 2.17a.75.75 0 0 0-1.032 0 11.209 11.209 0 0 1-7.877 3.08.75.75 0 0 0-.722.515A12.74 12.74 0 0 0 2.25 9.75c0 5.942 4.064 10.933 9.563 12.348a.749.749 0 0 0 .374 0c5.499-1.415 9.563-6.406 9.563-12.348 0-1.39-.223-2.73-.635-3.985a.75.75 0 0 0-.722-.516l-.143.001c-2.996 0-5.717-1.17-7.734-3.08Zm3.094 8.016a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z" clip-rule="evenodd" />
-                  </svg>                            
-                  <span>Audit Logs</span>
-                </a>
-              </li>
-              <li>
-                <a href="/admin/plugins" searchdata="addons plugins admin" class="hover:scale-105 transition nav-link mt-1 text-neutral-400 px-4 mx-4 group flex gap-x-3 shadow-none py-2 rounded-lg shadow-sm text-sm leading-6 font-normal">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
-                    <path d="M11.25 5.337c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.036 1.007-1.875 2.25-1.875S15 2.34 15 3.375c0 .369-.128.713-.349 1.003-.215.283-.401.604-.401.959 0 .332.278.598.61.578 1.91-.114 3.79-.342 5.632-.676a.75.75 0 0 1 .878.645 49.17 49.17 0 0 1 .376 5.452.657.657 0 0 1-.66.664c-.354 0-.675-.186-.958-.401a1.647 1.647 0 0 0-1.003-.349c-1.035 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401.31 0 .557.262.534.571a48.774 48.774 0 0 1-.595 4.845.75.75 0 0 1-.61.61c-1.82.317-3.673.533-5.555.642a.58.58 0 0 1-.611-.581c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.035-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959a.641.641 0 0 1-.658.643 49.118 49.118 0 0 1-4.708-.36.75.75 0 0 1-.645-.878c.293-1.614.504-3.257.629-4.924A.53.53 0 0 0 5.337 15c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.036 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.369 0 .713.128 1.003.349.283.215.604.401.959.401a.656.656 0 0 0 .659-.663 47.703 47.703 0 0 0-.31-4.82.75.75 0 0 1 .83-.832c1.343.155 2.703.254 4.077.294a.64.64 0 0 0 .657-.642Z" />
-                  </svg>                                                          
-                  <span>Plugins</span>
-                </a>
-              </li>
-              <% } %>
-            </ul>
-          </li>
-          <!--<li>
-            <div class="text-xs font-semibold leading-6 text-neutral-400">Your teams</div>
-            <ul role="list" class="-mx-2 mt-2 space-y-1">
-              <li>
-                <a href="#" class="text-neutral-400 hover:text-white hover:bg-neutral-800 group flex gap-x-3 rounded-lg p-2 text-sm leading-6 font-semibold">
-                  <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-neutral-700 bg-neutral-800 text-[0.625rem] font-medium text-neutral-400 group-hover:text-white">H</span>
-                  <span class="truncate">Heroicons</span>
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-neutral-400 hover:text-white hover:bg-neutral-800 group flex gap-x-3 rounded-lg p-2 text-sm leading-6 font-semibold">
-                  <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-neutral-700 bg-neutral-800 text-[0.625rem] font-medium text-neutral-400 group-hover:text-white">T</span>
-                  <span class="truncate">Tailwind Labs</span>
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-neutral-400 hover:text-white hover:bg-neutral-800 group flex gap-x-3 rounded-lg p-2 text-sm leading-6 font-semibold">
-                  <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-neutral-700 bg-neutral-800 text-[0.625rem] font-medium text-neutral-400 group-hover:text-white">W</span>
-                  <span class="truncate">Workcation</span>
-                </a>
-              </li>
-            </ul>
-          </li> -->
-          <li class="mt-auto border-t border-white/5">
-            <a href="/auth/logout" class="group -mx-2 flex gap-x-3 rounded-lg pl-6 py-4 text-sm font-medium leading-6 text-neutral-500 transition hover:text-white">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 mt-0.5 h-5">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
-              </svg>              
-              <span>Sign out</span>
-            </a>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </div>
+  }
 
+  function animatePageTransition(callback) {
+    if (isAnimating) return;
+    isAnimating = true;
 
+    contentSection.style.opacity = '0';
+    contentSection.style.transform = 'translateX(-20px)';
 
-  
-  <div id="colcont" class="lg:pl-56">
-    <div class="sticky backdrop-blur top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 bg-transparent px-4 shadow-sm sm:gap-x-6 sm:px-4 lg:px-4">
-      <button type="button" id="sidebar-toggle" class="w-fit p-2 mt-1 rounded-lg text-white border border-white/5 hover:scale-110 active:scale-100 duration-200">
-        <span class="sr-only">Open sidebar</span>
-        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
-        </svg>
-      </button>
-
-      <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
-        <div class="relative flex flex-1 flex-col">
-          <div class="flex items-center w-fit mt-3.5 px-4 py-2 h-10  rounded-lg border border-white/5 hover:scale-105 active:scale-100 duration-200 bg-transparent text-white">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5 text-gray-400">
-              <path fill-rule="evenodd" d="M10.5 3.75a6.75 6.75 0 1 0 0 13.5 6.75 6.75 0 0 0 0-13.5ZM2.25 10.5a8.25 8.25 0 1 1 14.59 5.28l4.69 4.69a.75.75 0 1 1-1.06 1.06l-4.69-4.69A8.25 8.25 0 0 1 2.25 10.5Z" clip-rule="evenodd" />
-            </svg>
-            <input id="searchInput" 
-                   class="bg-transparent border-transparent focus-visible:ring-transparent border-none ring-transparent sm:text-sm placeholder:text-zinc-500" 
-                   placeholder="Search..." 
-                   type="search" 
-                   name="search"
-                   autocomplete="off"
-                   onclick="input.blur()"
-                   onfocus="showSearchResults()">
-          </div>
-        
-          <div id="searchResults" class="absolute bg-white w-[12.5rem] rounded-lg shadow-lg hidden mt-20 px-2 pb-2">
-          </div> 
-        </div>
-        
-        <script src="/javascript/search/index.js"></script>
-        <script>
-          document.addEventListener('keydown', function(event) {
-            if (event.key === 'F1') {
-              event.preventDefault();
-              document.getElementById('searchInput').focus();
-            }
-          });
-        
-          function showSearchResults() {
-            document.getElementById('searchResults').classList.remove('hidden');
-          }
-        
-          document.getElementById('searchInput').addEventListener('focus', showSearchResults);
-        </script>
-        <script>
-          function showSearchResults() {
-              var searchResults = document.getElementById('searchResults');
-              searchResults.classList.remove('hidden');
-          }
+    setTimeout(() => {
+      callback();
+      contentSection.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
+      contentSection.style.opacity = '1';
+      contentSection.style.transform = 'translateX(0)';
       
-          document.addEventListener('click', function(event) {
-              var searchInput = document.getElementById('searchInput');
-              var searchResults = document.getElementById('searchResults');
-              if (!searchInput.contains(event.target) && !searchResults.contains(event.target)) {
-                  searchResults.classList.add('hidden');
-              }
-          });
-      </script>
+      setTimeout(() => {
+        contentSection.style.transition = '';
+        isAnimating = false;
+      }, 300);
+    }, 300);
+  }
+
+  navLinks.forEach(link => {
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      const href = link.getAttribute('href');
       
-        <div class="flex items-center gap-x-4 lg:gap-x-6">
-          <!-- Profile dropdown -->
-          <div class="relative mt-3 mr-4">
-            <button type="button" class="-m-1.5 flex items-center p-1.5" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
-              <img class="h-6 w-6 rounded-md bg-transparent" src="https://source.boringavatars.com/beam/120/<%= user.username %>?colors=264653,f4a261,e76f51" alt="">
-              <span class="hidden lg:flex lg:items-center">
-                <span class="ml-2.5 text-sm font-semibold leading-6 text-white" aria-hidden="true"><%= user.username %> <span class="font-mono text-xs text-zinc-300 font-normal">(<%= user.userId.substring(0, 6) %>)</span></span>
-              </span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-    <script>
-        document.addEventListener("DOMContentLoaded", function() {
-          var currentPageUrl = window.location.pathname;
-          var navLinks = document.querySelectorAll('.nav-link');
-          navLinks.forEach(function(link) {
-            var linkUrl = link.getAttribute('href');
-            if (currentPageUrl === linkUrl) {
-              link.className = 'nav-link';
-              link.classList.add(
-                'hover:scale-105', 'transition', 'bg-[#171717]', 'text-white', 'mt-1', 'pl-4', 'mx-4', 'group', 'flex', 'gap-x-3', 'shadow-sm', 'rounded-lg', 'py-2', 'text-sm', 'leading-6', 'font-semibold',
-              );
-            }
-          });
-        });
+      animatePageTransition(() => {
+        window.location.href = href;
+      });
+    });
+  });
+
+  // Prevent animation on initial load and browser back/forward
+  if (performance.getEntriesByType("navigation")[0].type === 'navigate') {
+    contentSection.style.opacity = '1';
+    contentSection.style.transform = 'translateX(0)';
+  }
+
+  // Update active link on page load and popstate
+  updateActiveLink(window.location.pathname);
+  window.addEventListener('popstate', () => {
+    updateActiveLink(window.location.pathname);
+  });
+});
       </script>
-        <div id="loader" class="fixed ml-56 mt-16 inset-0 flex items-center justify-center bg-[#141414] transition-opacity duration-300 opacity-100 z-50">
-          <svg class="animate-spin h-5 w-5 text-white inline-flex"
-          xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
-             stroke-width="4"></circle>
-          <path class="opacity-75" fill="currentColor"
-             d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
-          </path>
-       </svg>
-        
-        </div>
+      <div id="loader" class="fixed ml-56 mt-16 inset-0 flex items-center justify-center bg-black transition-opacity duration-300 opacity-100 z-50">
+         <svg class="animate-spin h-5 w-5 text-white inline-flex"
+            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
+               stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor"
+               d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+            </path>
+         </svg>
+      </div>
\ No newline at end of file
diff --git a/views/enable-2fa.ejs b/views/enable-2fa.ejs
index c870c6b..8501922 100644
--- a/views/enable-2fa.ejs
+++ b/views/enable-2fa.ejs
@@ -1,20 +1,20 @@
 <%- include('components/template') %>
 <main id="content" class="flex items-center justify-center">
-  <div class="max-w-md w-full bg-white rounded-lg shadow-2xl p-8 transform transition-transform duration-300 mt-32">
+  <div class="max-w-md w-full bg-white rounded-xl shadow-2xl p-8 transform transition-transform duration-300 mt-16">
     <h1 class="text-3xl font-bold text-center text-gray-800">Enable Two-Factor Authentication</h1>
     <p class="text-center text-gray-500 mt-4">Secure your account with an extra layer of protection.</p>
     <div class="flex justify-center my-6">
-      <div class="border border-dashed border-gray-400 p-4 rounded-lg">
+      <div class="border border-dashed border-gray-400 p-4 rounded-xl">
         <img src="<%= qrCode %>" alt="QR Code for 2FA" class="w-48 h-48 object-cover">
       </div>
     </div>
     <form action="/verify-2fa" method="POST">
       <div class="mb-4">
         <label for="token" class="block text-sm font-medium text-gray-700">Authentication Code</label>
-        <input type="text" id="token" name="token" required class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors duration-300">
+        <input type="text" id="token" name="token" required class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-neutral-500 focus:border-neutral-500 sm:text-sm transition-colors duration-300">
       </div>
       <div class="flex justify-center">
-        <button type="submit" class="w-full bg-black text-white py-3 px-5 rounded-md shadow-lg hover:bg-neutral-900 transition-transform transform hover:scale-105 duration-300">Verify Code</button>
+        <button type="submit" class="w-full bg-black text-white py-3 px-5 rounded-xl shadow-lg hover:bg-neutral-900 transition-transform transform  duration-300">Verify Code</button>
       </div>
     </form>
   </div>
diff --git a/views/errors/404.ejs b/views/errors/404.ejs
index d1fbc73..a40cb06 100644
--- a/views/errors/404.ejs
+++ b/views/errors/404.ejs
@@ -17,7 +17,7 @@
       <h1 class="mb-4 text-7xl tracking-tight font-medium lg:text-9xl text-white">404</h1>
       <p class="mb-4 text-3xl tracking-tight font-bold md:text-4xl text-white">Something's missing.</p>
       <p class="mb-4 text-lg font-light text-neutral-500">Sorry, we can't find that page.</p>
-      <a href="../" class="inline-flex items-center text-white bg-white/5 hover:bg-white/10 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900 my-4 transition-all duration-300 ease-in-out">Back to <%= name %></a>
+      <a href="../" class="inline-flex items-center text-white bg-white/5 hover:bg-white/10 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-xl text-sm px-5 py-2.5 text-center dark:focus:ring-primary-900 my-4 transition-all duration-300 ease-in-out">Back to <%= name %></a>
     </div>   
   </div>
 </body>
diff --git a/views/instance/archives.ejs b/views/instance/archives.ejs
index ba04d61..2832f87 100644
--- a/views/instance/archives.ejs
+++ b/views/instance/archives.ejs
@@ -3,12 +3,12 @@
    <div class="bg-transparent">
       <div class="sm:flex sm:items-center px-8 pt-4">
          <div class="sm:flex-auto">
-            <h1 class="text-base font-semibold leading-6">Manage Instance</h1>
+            <h1 class="text-base font-medium leading-6">Manage Instance</h1>
             <p class="mt-1 text-sm text-neutral-500">View, update, and manage an instance on the Skyport panel.</p>
          </div>
          <% let query = req.query.path ? '?path=' + req.query.path : ''; %>
          <div class="mt-4 sm:ml-16 sm:mt-0 flex space-x-4">
-            <button onclick="createArchive()" class="block rounded-lg bg-white px-4 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+            <button onclick="createArchive()" class="block rounded-xl bg-white px-4 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                 Create Backup
             </button>
             <input type="file" id="fileInput" multiple style="display: none;">
@@ -40,8 +40,8 @@
                       <%= archive.lastUpdated %>
                   </td>
                   <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300 border-none">
-                     <span class="bg-white/5 text-neutral-300 px-3 py-1.5 rounded-lg cursor-pointer" onclick="restoreArchive('<%= archive.name %>')">Restore</span>
-                     <span class="bg-red-600 text-neutral-300 px-2 py-1.5 rounded-lg cursor-pointer ml-2" onclick="deleteArchive('<%= archive.name %>')">
+                     <span class="bg-white/5 text-neutral-300 px-3 py-1.5 rounded-xl cursor-pointer" onclick="restoreArchive('<%= archive.name %>')">Restore</span>
+                     <span class="bg-red-600 text-neutral-300 px-2 py-1.5 rounded-xl cursor-pointer ml-2" onclick="deleteArchive('<%= archive.name %>')">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 mb-0.5 inline-flex mr-1">
                            <path fill-rule="evenodd" d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z" clip-rule="evenodd" />
                         </svg>
diff --git a/views/instance/createFile.ejs b/views/instance/createFile.ejs
index d3ea0a2..cd3efa8 100644
--- a/views/instance/createFile.ejs
+++ b/views/instance/createFile.ejs
@@ -4,7 +4,7 @@
 <div class="bg-transparent">
     <div class="sm:flex sm:items-center px-8 pt-4">
        <div class="sm:flex-auto">
-          <h1 class="text-base font-semibold leading-6 text-white">Manage Instance</h1>
+          <h1 class="text-base font-medium leading-6 text-white">Manage Instance</h1>
           <p class="mt-1 tracking-tight text-sm text-neutral-500">View, update and manage an instance on the Skyport panel.</p>
        </div>
     </div>
@@ -23,7 +23,7 @@
     id="filename"
     type="text"
     name="filename"
-    class="rounded-lg focus:ring-transparent focus:border-transparent text-white inline-flex ml-2 text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
+    class="rounded-xl focus:ring-transparent focus:border-transparent text-white inline-flex ml-2 text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
     placeholder="file.txt"
   />
 </h1>
@@ -31,10 +31,10 @@
 
 <div class="pt-4 overflow-hidden" style="height: 500px;" id="editor"></div>
 <div class="flex mt-8 space-x-4">
-<a href="/instance/<%= req.params.id %>/files" type="button" class="block ml-8 rounded-lg bg-transparent border border-white/5 hover:bg-neutral-600/10 px-3 py-2 text-center text-sm font-normal text-neutral-300 shadow-lg transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+<a href="/instance/<%= req.params.id %>/files" type="button" class="block ml-8 rounded-xl bg-transparent border border-white/5 hover:bg-neutral-600/10 px-3 py-2 text-center text-sm font-normal text-neutral-300 shadow-lg transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
     Back
 </a>
-<button id="saveButton" onclick="saveFile()" type="button" class="block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+<button id="saveButton" onclick="saveFile()" type="button" class="block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
     Create File
 </button>
 </div>
diff --git a/views/instance/createFolder.ejs b/views/instance/createFolder.ejs
index 702bc42..58687c6 100644
--- a/views/instance/createFolder.ejs
+++ b/views/instance/createFolder.ejs
@@ -3,7 +3,7 @@
 <div class="bg-transparent">
     <div class="sm:flex sm:items-center px-8 pt-4">
        <div class="sm:flex-auto">
-          <h1 class="text-base font-semibold leading-6 text-white">Manage Instance</h1>
+          <h1 class="text-base font-medium leading-6 text-white">Manage Instance</h1>
           <p class="mt-1 tracking-tight text-sm text-neutral-500">View, update and manage an instance on the Skyport panel.</p>
        </div>
     </div>
@@ -22,17 +22,17 @@
     id="folder"
     type="text"
     name="folder"
-    class="rounded-lg focus:ring-transparent focus:border-transparent text-white inline-flex ml-2 text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
+    class="rounded-xl focus:ring-transparent focus:border-transparent text-white inline-flex ml-2 text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10"
     placeholder="folder"
   />
 </h1>
 </div>
 
 <div class="flex mt-8 space-x-4">
-<a href="/instance/<%= req.params.id %>/files" type="button" class="block ml-8 rounded-lg bg-transparent border border-white/5 hover:bg-neutral-600/10 px-3 py-2 text-center text-sm font-normal text-neutral-300 shadow-lg transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+<a href="/instance/<%= req.params.id %>/files" type="button" class="block ml-8 rounded-xl bg-transparent border border-white/5 hover:bg-neutral-600/10 px-3 py-2 text-center text-sm font-normal text-neutral-300 shadow-lg transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
     Back
 </a>
-<button id="saveButton" onclick="saveFile()" type="button" class="block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+<button id="saveButton" onclick="saveFile()" type="button" class="block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
     Create Folder
 </button>
 </div>
diff --git a/views/instance/db.ejs b/views/instance/db.ejs
index f51c041..7eaa5bb 100644
--- a/views/instance/db.ejs
+++ b/views/instance/db.ejs
@@ -3,29 +3,29 @@
     <div class="bg-transparent">
         <div class="sm:flex sm:items-center px-8 pt-4">
             <div class="sm:flex-auto">
-                <h1 class="text-base font-semibold leading-6 text-white">Manage Instance</h1>
+                <h1 class="text-base font-medium leading-6 text-white">Manage Instance</h1>
                 <p class="mt-1 tracking-tight text-sm text-neutral-500">View, update, and manage an instance on the Skyport panel.</p>
             </div>
             <div class="mt-4 sm:ml-8 sm:mt-0 sm:flex-none">
-                <button id="createDatabaseButton" type="button" class="block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Create Database</button>
+                <button id="createDatabaseButton" type="button" class="block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Create Database</button>
             </div>
         </div>
     </div>
 
     <!-- Modal for creating a database -->
     <div id="createDatabaseModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300">
-        <div class="bg-white rounded-lg p-8 max-w-md w-full transform scale-95 transition-transform duration-300">
+        <div class="bg-white rounded-xl p-8 max-w-md w-full transform scale-95 transition-transform duration-300">
             <div class="relative">
-                <h2 class="text-2xl font-semibold mb-1 text-gray-800">Create Database</h2>
+                <h2 class="text-2xl font-medium mb-1 text-gray-800">Create Database</h2>
                 <p class="mb-6 text-gray-600">Enter the name of the database you want to create.</p>
             </div>
             <form id="createDatabaseForm" action="/instance/<%= req.params.id %>/db/create" method="POST" class="space-y-4">
                 <div>
-                    <input type="text" id="databaseNameInput" name="databaseName" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:border-neutral-500 transition mb-4" placeholder="Enter database name" required>
+                    <input type="text" id="databaseNameInput" name="databaseName" class="w-full px-3 py-2 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:border-neutral-500 transition mb-4" placeholder="Enter database name" required>
                 </div>
                 <div class="flex justify-end">
-                    <button type="submit" class="px-5 py-2 bg-neutral-800 text-white rounded-lg hover:bg-neutral-700 transition">Create</button>
-                    <button type="button" id="closeCreateDatabaseModal" class="px-5 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-400 transition ml-2">Cancel</button>
+                    <button type="submit" class="px-5 py-2 bg-neutral-800 text-white rounded-xl hover:bg-neutral-700 transition">Create</button>
+                    <button type="button" id="closeCreateDatabaseModal" class="px-5 py-2 bg-gray-500 text-white rounded-xl hover:bg-gray-400 transition ml-2">Cancel</button>
                 </div>
             </form>
         </div>
diff --git a/views/instance/file.ejs b/views/instance/file.ejs
index 3a48d1b..e3bbabd 100644
--- a/views/instance/file.ejs
+++ b/views/instance/file.ejs
@@ -4,7 +4,7 @@
 <div class="bg-transparent">
     <div class="sm:flex sm:items-center px-8 pt-4">
        <div class="sm:flex-auto">
-          <h1 class="text-base font-semibold leading-6 text-white">Manage Instance</h1>
+          <h1 class="text-base font-medium leading-6 text-white">Manage Instance</h1>
           <p class="mt-1 tracking-tight text-sm text-neutral-500">View, update and manage an instance on the Skyport panel.</p>
        </div>
     </div>
@@ -27,10 +27,10 @@
 
 <div class="pt-8 overflow-hidden" style="height: 500px;" id="editor"></div>
 <div class="flex mt-8 space-x-4">
-<a href="/instance/<%= req.params.id %>/files" type="button" class="block ml-8 rounded-lg bg-transparent border border-white/5 hover:bg-neutral-600/10 px-3 py-2 text-center text-sm font-normal text-neutral-300 shadow-lg transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+<a href="/instance/<%= req.params.id %>/files" type="button" class="block ml-8 rounded-xl bg-transparent border border-white/5 hover:bg-neutral-600/10 px-3 py-2 text-center text-sm font-normal text-neutral-300 shadow-lg transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
     Back
 </a>
-<button id="saveButton" onclick="saveFile()" type="button" class="block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+<button id="saveButton" onclick="saveFile()" type="button" class="block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
     Save File
 </button>
 </div>
diff --git a/views/instance/files.ejs b/views/instance/files.ejs
index d1b6f43..a264111 100644
--- a/views/instance/files.ejs
+++ b/views/instance/files.ejs
@@ -47,19 +47,19 @@
    <div class="bg-transparent">
       <div class="sm:flex sm:items-center px-8 pt-4">
          <div class="sm:flex-auto">
-            <h1 class="text-base font-semibold leading-6 text-white">Manage Instance</h1>
+            <h1 class="text-base font-medium leading-6 text-white">Manage Instance</h1>
             <p class="mt-1 tracking-tight text-sm text-neutral-500">View, update and manage an instance on the Skyport panel.</p>
          </div>
          <% let query = req.query.path ? '?path=' + req.query.path : ''; %>
          <div class="mt-4 sm:ml-16 sm:mt-0 flex space-x-4">
-            <input type="text" id="searchInput" placeholder="Search files..." class="px-3 py-2 bg-transparent border border-white/5 shadow-lg focus:scale-105 transition rounded-lg text-white placeholder-neutral-500 focus:outline-none focus:border-neutral-600 focus:ring-neutral-600 mr-2 w-64">
-            <a href="/instance/<%= req.params.id %>/files/create<%= query %>" class="block rounded-lg bg-white px-4 py-3 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+            <input type="text" id="searchInput2" placeholder="Search files..." class="px-3 py-2 bg-transparent border border-white/5 shadow-lg focus:scale-105 transition rounded-xl text-white placeholder-neutral-500 focus:outline-none focus:border-neutral-600 focus:ring-neutral-600 mr-2 w-64">
+            <a href="/instance/<%= req.params.id %>/files/create<%= query %>" class="block rounded-xl bg-white px-4 py-3 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
             Create File
             </a>
-            <a href="/instance/<%= req.params.id %>/files/folder/create<%= query %>" class="block rounded-lg bg-white px-4 py-3 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+            <a href="/instance/<%= req.params.id %>/files/folder/create<%= query %>" class="block rounded-xl bg-white px-4 py-3 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
             Create Folder
             </a>
-            <button id="uploadBtn" class="block rounded-lg bg-white px-4 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+            <button id="uploadBtn" class="block rounded-xl bg-white px-4 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
             Upload File(s)
             </button>
             <input type="file" id="fileInput" multiple style="display: none;">
@@ -82,7 +82,7 @@
          <% } else { %>
          <% currentPath = '' %>
          <% } %>
-         <a href="/instance/<%= req.params.id %>/files?path=<%= currentPath %><%= directory.name %>" class="p-3 hover:bg-[#171717] hover:scale-105 transition bg-transparent shadow-xl border border-white/5 rounded-lg overflow-hidden sm:p-3 lg:p-5">
+         <a href="/instance/<%= req.params.id %>/files?path=<%= currentPath %><%= directory.name %>" class="p-3 hover:bg-[#171717] hover:scale-105 transition bg-transparent shadow-xl border border-white/5 rounded-xl overflow-hidden sm:p-3 lg:p-5">
             <div class="lg:flex lg:items-center lg:justify-between">
                <div class="min-w-0 flex-1">
                   <h2 class="text-md font-medium text-white tracking-tight">
@@ -140,10 +140,10 @@
                         <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
                      </svg>
                   </button>
-                  <div id="dropdown-<%= file.name %>" class="absolute right-0 mt-2 w-48 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10 transform opacity-0 scale-95 transition-all duration-200 ease-out pointer-events-none">
+                  <div id="dropdown-<%= file.name %>" class="absolute right-0 mt-2 w-48 rounded-xl shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-10 transform opacity-0 scale-95 transition-all duration-200 ease-out pointer-events-none">
                      <div class="p-2" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
-                        <a href="#" onclick="openRenameModal('<%= file.name %>', '<%= extension %>')" class="transition rounded-lg block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 text-left" role="menuitem">Rename</a>
-                        <a href="#" onclick="openDeleteModal('<%= file.name %>', '<%= extension %>')" class="transition rounded-lg block px-4 py-2 text-sm text-red-600 hover:bg-red-50 text-left" role="menuitem">Delete</a>
+                        <a href="#" onclick="openRenameModal('<%= file.name %>', '<%= extension %>')" class="transition rounded-xl block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 text-left" role="menuitem">Rename</a>
+                        <a href="#" onclick="openDeleteModal('<%= file.name %>', '<%= extension %>')" class="transition rounded-xl block px-4 py-2 text-sm text-red-600 hover:bg-red-50 text-left" role="menuitem">Delete</a>
                      </div>
                   </div>
                </td>
@@ -156,51 +156,51 @@
    </div>
    <!-- End of files -->
    <!-- Floating Action Bar -->
-   <div id="floatingActionBar" class="fixed bottom-0 left-0 right-0 bg-neutral-900/70 backdrop-blur text-white py-4 px-6 transform translate-y-full transition-transform duration-300 ease-in-out flex justify-between items-center">
+   <div id="floatingActionBar" class="hidden fixed bottom-0 left-0 right-0 bg-neutral-900/70 backdrop-blur text-white py-4 px-6 transform translate-y-full transition-transform duration-300 ease-in-out flex justify-between items-center">
       <span id="selectedFilesCount">0 files selected</span>
-      <button id="massDeleteBtn" class="bg-red-500 hover:bg-red-600 text-white font-normal py-2 px-4 rounded-lg transition">
+      <button id="massDeleteBtn" class="bg-red-500 hover:bg-red-600 text-white font-normal py-2 px-4 rounded-xl transition">
       Delete Selected
       </button>
    </div>
    <!-- Mass Delete Confirmation Modal -->
    <div id="massDeleteModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300">
-      <div class="bg-white rounded-lg p-8 max-w-md w-full transform scale-95 transition-transform duration-300">
-         <h2 class="text-2xl font-semibold mb-4 text-gray-800">Confirm Mass Deletion</h2>
+      <div class="bg-white rounded-xl p-8 max-w-md w-full transform scale-95 transition-transform duration-300">
+         <h2 class="text-2xl font-medium mb-4 text-gray-800">Confirm Mass Deletion</h2>
          <p id="massDeleteMessage" class="mb-6 text-gray-600"></p>
          <div class="flex justify-end space-x-4">
-            <button onclick="closeMassDeleteModal()" class="px-5 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition">Cancel</button>
-            <button id="confirmMassDelete" class="px-5 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition">Delete</button>
+            <button onclick="closeMassDeleteModal()" class="px-5 py-2 bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300 transition">Cancel</button>
+            <button id="confirmMassDelete" class="px-5 py-2 bg-red-500 text-white rounded-xl hover:bg-red-600 transition">Delete</button>
          </div>
       </div>
    </div>
    <!-- Delete Confirmation Modal -->
    <div id="deleteModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300">
-      <div class="bg-white rounded-lg p-8 max-w-md w-full transform scale-95 transition-transform duration-300">
-         <h2 class="text-2xl font-semibold mb-4 text-gray-800">Confirm Deletion</h2>
+      <div class="bg-white rounded-xl p-8 max-w-md w-full transform scale-95 transition-transform duration-300">
+         <h2 class="text-2xl font-medium mb-4 text-gray-800">Confirm Deletion</h2>
          <p id="deleteMessage" class="mb-6 text-gray-600"></p>
          <div class="flex justify-end space-x-4">
-            <button onclick="closeDeleteModal()" class="px-5 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition">Cancel</button>
-            <button id="confirmDelete" class="px-5 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition">Delete</button>
+            <button onclick="closeDeleteModal()" class="px-5 py-2 bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300 transition">Cancel</button>
+            <button id="confirmDelete" class="px-5 py-2 bg-red-500 text-white rounded-xl hover:bg-red-600 transition">Delete</button>
          </div>
       </div>
    </div>
    <!-- Rename file -->
    <div id="renameModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300">
-      <div class="bg-white rounded-lg p-8 max-w-md w-full transform scale-95 transition-transform duration-300">
-         <h2 class="text-2xl font-semibold mb-1 text-gray-800">Rename File</h2>
+      <div class="bg-white rounded-xl p-8 max-w-md w-full transform scale-95 transition-transform duration-300">
+         <h2 class="text-2xl font-medium mb-1 text-gray-800">Rename File</h2>
          <p class="mb-6 text-gray-600">Please choose a new name for this file.</p>
-         <input type="text" id="newFileName" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:border-neutral-500 transition mb-4" placeholder="Enter new file name">
+         <input type="text" id="newFileName" class="w-full px-3 py-2 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:border-neutral-500 transition mb-4" placeholder="Enter new file name">
          <p id="extensionWarning" class="text-yellow-600 mb-4 hidden">Warning: Changing the file extension may affect file functionality.</p>
          <div class="flex justify-end space-x-4">
-            <button onclick="closeRenameModal()" class="px-5 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition">Cancel</button>
-            <button onclick="confirmRename()" class="px-5 py-2 bg-neutral-800 text-white rounded-lg hover:bg-neutral-700 transition">Rename</button>
+            <button onclick="closeRenameModal()" class="px-5 py-2 bg-gray-200 text-gray-800 rounded-xl hover:bg-gray-300 transition">Cancel</button>
+            <button onclick="confirmRename()" class="px-5 py-2 bg-neutral-800 text-white rounded-xl hover:bg-neutral-700 transition">Rename</button>
          </div>
       </div>
    </div>
    <!-- File Upload Modal -->
    <div id="uploadModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300">
-      <div class="bg-white rounded-lg p-8 max-w-md w-full transform scale-95 transition-transform duration-300">
-         <h2 class="text-2xl font-semibold mb-4 text-gray-800">Uploading File(s)</h2>
+      <div class="bg-white rounded-xl p-8 max-w-md w-full transform scale-95 transition-transform duration-300">
+         <h2 class="text-2xl font-medium mb-4 text-gray-800">Uploading File(s)</h2>
          <div class="mb-4">
             <div class="w-full bg-gray-200 rounded-full h-2.5">
                <div id="uploadProgress" class="bg-gray-400 h-2.5 rounded-full" style="width: 0%"></div>
@@ -213,11 +213,15 @@
       function toggleDropdown(event, fileName) {
         event.stopPropagation();
         const dropdown = document.getElementById(`dropdown-${fileName}`);
+        
+        // Close other open dropdowns with animation
         document.querySelectorAll('[id^="dropdown-"]').forEach((el) => {
           if (el.id !== `dropdown-${fileName}` && !el.classList.contains('pointer-events-none')) {
             closeDropdown(el);
           }
         });
+      
+        // Toggle the clicked dropdown
         if (dropdown.classList.contains('pointer-events-none')) {
           openDropdown(dropdown);
         } else {
@@ -234,6 +238,8 @@
         dropdown.classList.remove('opacity-100', 'scale-100');
         dropdown.classList.add('opacity-0', 'scale-95', 'pointer-events-none');
       }
+      
+      // Close dropdowns when clicking outside
       document.addEventListener('click', function(event) {
         if (!event.target.closest('td')) {
           document.querySelectorAll('[id^="dropdown-"]').forEach((dropdown) => {
@@ -244,10 +250,10 @@
         }
       });
       
-      const searchInput = document.getElementById('searchInput');
+      const searchInput2 = document.getElementById('searchInput2');
       const fileRows = document.querySelectorAll('tbody tr');
       
-      searchInput.addEventListener('input', function() {
+      searchInput2.addEventListener('input', function() {
         const searchTerm = this.value.toLowerCase();
         
         fileRows.forEach(row => {
@@ -271,6 +277,7 @@
           const formData = new FormData();
           Array.from(files).forEach(file => formData.append('files', file));
       
+          // Open the upload modal
           const modal = document.getElementById('uploadModal');
           modal.classList.remove('opacity-0', 'pointer-events-none');
           modal.querySelector('div').classList.remove('scale-95');
@@ -289,14 +296,17 @@
               if (xhr.status == 200) {
                   document.getElementById('uploadStatus').textContent = 'Upload complete!';
                   setTimeout(() => {
+                      // Close the modal
                       modal.classList.add('opacity-0', 'pointer-events-none');
                       modal.querySelector('div').classList.remove('scale-100');
                       modal.querySelector('div').classList.add('scale-95');
+                      // Reload the page
                       window.location.reload();
                   }, 1000);
               } else {
                   document.getElementById('uploadStatus').textContent = 'Upload failed. Server responded with status ' + xhr.status;
                   setTimeout(() => {
+                      // Close the modal
                       modal.classList.add('opacity-0', 'pointer-events-none');
                       modal.querySelector('div').classList.remove('scale-100');
                       modal.querySelector('div').classList.add('scale-95');
@@ -304,7 +314,7 @@
               }
           };
           xhr.send(formData);
-          document.getElementById('fileInput').value = '';
+          document.getElementById('fileInput').value = ''; // Reset file input
       });
       
       let deleteUrl = '';
@@ -381,6 +391,7 @@
               }
             });
       
+            // Mass actions functionality
           const selectAllCheckbox = document.getElementById('selectAll');
           const fileCheckboxes = document.querySelectorAll('.file-checkbox');
           const floatingActionBar = document.getElementById('floatingActionBar');
@@ -401,8 +412,10 @@
       
             if (selectedFiles.length > 0) {
               floatingActionBar.classList.remove('translate-y-full');
+              floatingActionBar.classList.remove('hidden')
             } else {
               floatingActionBar.classList.add('translate-y-full');
+              floatingActionBar.classList.add('hidden')
             }
           }
       
diff --git a/views/instance/ftp.ejs b/views/instance/ftp.ejs
index a127962..7a9ead4 100644
--- a/views/instance/ftp.ejs
+++ b/views/instance/ftp.ejs
@@ -3,37 +3,37 @@
    <div class="bg-transparent">
       <div class="sm:flex sm:items-center px-8 pt-4">
          <div class="sm:flex-auto">
-            <h1 class="text-base font-semibold leading-6 text-white">Manage Instance</h1>
+            <h1 class="text-base font-medium leading-6 text-white">Manage Instance</h1>
             <p class="mt-1 tracking-tight text-sm text-neutral-500">View, update and manage an instance on the Skyport panel.</p>
          </div>
          <% let query = req.query.path ? '?path=' + req.query.path : ''; %>
       </div>
   </div>
    <%- include('../components/instance') %>
-   <div class="p-3 bg-transparent shadow-xl border border-white/5 rounded-lg overflow-hidden sm:p-6 lg:p-10 ml-8 card" style="width: 900px;">
+   <div class="p-3 bg-transparent shadow-xl border border-white/5 rounded-xl overflow-hidden sm:p-6 lg:p-10 ml-8 card" style="width: 900px;">
       <div class="flex flex-row">
          <div class="w-1/2 mr-4">
             <h2 class="text-md font-medium text-white tracking-tight">FTP Details</h2>
             <div class="mt-5">
                <div class="mr-4 mt-5">
                   <label class="text-neutral-400 text-sm tracking-tight mb-2">Server Address</label>
-                  <div onclick="navigator.clipboard.writeText(`ftp://<%- logindata.host %>:<%- logindata.port %>`)" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-3 mb-0 w-full transition justify-left hover:bg-white/5 px-4 py-2 flex bg-neutral-900 placeholder:text-white/20 border border-black/10" style="width: 340px;">
+                  <div onclick="navigator.clipboard.writeText(`ftp://<%- logindata.host %>:<%- logindata.port %>`)" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-3 mb-0 w-full transition justify-left hover:bg-white/5 px-4 py-2 flex bg-neutral-900 placeholder:text-white/20 border border-black/10" style="width: 340px;">
                      <span onclick="navigator.clipboard.writeText(`ftp://<%- logindata.host %>:<%- logindata.port %>`);">ftp://<%- logindata.host %>:<%- logindata.port %></span>
                   </div>
                </div>
                <div class="mr-4 mt-5">
                   <label class="text-neutral-400 text-sm tracking-tight mb-2">Username:</label>
-                  <div onclick="navigator.clipboard.writeText('<%- logindata.username %>');" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-3 mb-0 w-full transition justify-left hover:bg-white/5 px-4 py-2 flex bg-neutral-900 placeholder:text-white/20 border border-black/10" style="width: 340px;">
+                  <div onclick="navigator.clipboard.writeText('<%- logindata.username %>');" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-3 mb-0 w-full transition justify-left hover:bg-white/5 px-4 py-2 flex bg-neutral-900 placeholder:text-white/20 border border-black/10" style="width: 340px;">
                      <span id="usernameText" onclick="navigator.clipboard.writeText('<%- logindata.username %>');" onmouseover="this.style.filter = 'none';"><%- logindata.username %></span>
                   </div>
                </div>
                <div class="mr-4 mt-5">
                   <label class="text-neutral-400 text-sm tracking-tight mb-2">Password:</label>
-                  <div onclick="navigator.clipboard.writeText('<%- logindata.password %>');" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-3 mb-0 w-full transition justify-left hover:bg-white/5 px-4 py-2 flex bg-neutral-900 placeholder:text-white/20 border border-black/10" style="width: 340px;">
+                  <div onclick="navigator.clipboard.writeText('<%- logindata.password %>');" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-3 mb-0 w-full transition justify-left hover:bg-white/5 px-4 py-2 flex bg-neutral-900 placeholder:text-white/20 border border-black/10" style="width: 340px;">
                      <span id="passwordText" style="filter: blur(5px)" onclick="navigator.clipboard.writeText('<%- logindata.password %>');" onmouseover="this.style.filter = 'none';" onmouseout="this.style.filter = 'blur(5px)';"><%- logindata.password %></span>
                   </div>
                </div>
-               <button class="block rounded-lg mt-8 bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" onclick="loginToWinSCP()">Connect via your FTP client</button>
+               <button class="block rounded-xl mt-8 bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" onclick="loginToWinSCP()">Connect via your FTP client</button>
                <script>
                   function loginToWinSCP() {
                       const username = "<%- logindata.username %>";
diff --git a/views/instance/instance.ejs b/views/instance/instance.ejs
index 7a96693..92f52b7 100644
--- a/views/instance/instance.ejs
+++ b/views/instance/instance.ejs
@@ -35,14 +35,14 @@
         <div class="bg-transparent">
             <div class="sm:flex sm:items-center px-8 pt-4">
                 <div class="sm:flex-auto">
-                    <h1 class="text-base font-semibold leading-6 text-white">Manage Instance</h1>
+                    <h1 class="text-base font-medium leading-6 text-white">Manage Instance</h1>
                     <p class="mt-1 tracking-tight text-sm text-neutral-500">View, update and manage an instance on the
-                        Skyport panel. <%= instance.Node.address %>
+                        Skyport panel.
                     </p>
                 </div>
                 <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex gap-2.5">
                     <button id="startButton" type="button"
-                        class="block rounded-lg bg-emerald-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-lg hover:bg-emerald-500 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+                        class="block rounded-xl bg-emerald-600 px-3 py-2 text-center text-sm font-medium text-white shadow-lg hover:bg-emerald-500 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                             class="size-4 inline-flex mr-1 text-emerald-100 mb-0.5">
                             <path fill-rule="evenodd"
@@ -52,7 +52,7 @@
                         Start
                     </button>
                     <button id="restartButton" type="button"
-                        class="block rounded-lg bg-white/20 px-3 py-2 text-center text-sm font-semibold text-white shadow-lg hover:bg-white/25 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+                        class="block rounded-xl bg-white/20 px-3 py-2 text-center text-sm font-medium text-white shadow-lg hover:bg-white/25 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                             class="size-4 inline-flex mr-1 text-zinc-200 mb-0.5">
                             <path fill-rule="evenodd"
@@ -62,7 +62,7 @@
                         Restart
                     </button>
                     <button id="stopButton" type="button"
-                        class="block rounded-lg bg-red-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-lg hover:bg-red-500 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+                        class="block rounded-xl bg-red-600 px-3 py-2 text-center text-sm font-medium text-white shadow-lg hover:bg-red-500 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                             class="size-4 inline-flex mr-1 text-red-100 mb-0.5">
                             <path fill-rule="evenodd"
@@ -75,7 +75,7 @@
             </div>
         </div>
         <%- include('../components/instance') %>
-            <div class="rounded-lg bg-red-800/10 px-4 py-6 mt-8 ml-8 mb-8 mr-8 hidden" id="daemonIsDown">
+            <div class="rounded-xl bg-red-800/10 px-4 py-6 mt-8 ml-8 mb-8 mr-8 hidden" id="daemonIsDown">
                 <div class="flex">
                     <div class="flex-shrink-0 ml-1.5">
                         <svg class="animate-spin mt-2 h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg"
@@ -88,7 +88,7 @@
                         </svg>
                     </div>
                     <div class="ml-5">
-                        <h3 class="text-sm font-semibold text-red-400">Connection failure</h3>
+                        <h3 class="text-sm font-medium text-red-400">Connection failure</h3>
                         <div class="text-sm text-red-400/50">
                             <p>The node running this instance appears to be having issues. Please wait...</p>
                         </div>
@@ -97,17 +97,17 @@
             </div>
             <div class="mt-8 ml-8 mb-4">
                 <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3 mr-8">
-                    <div class="overflow-hidden rounded-lg bg-[#171717]/50 px-4 py-5 shadow sm:p-6 flex items-center">
+                    <div class="overflow-hidden rounded-xl bg-[#171717]/50 px-4 py-5 shadow sm:p-6 flex items-center">
                         <div class="flex-grow">
                             <dt class="truncate text-sm font-medium text-neutral-400">IP Address</dt>
-                            <dd class="mt-1 text-lg font-semibold tracking-tight text-white">
+                            <dd class="mt-1 text-lg font-medium tracking-tight text-white">
                                 <span>
                                     <%= instance.Node.address %><span class="text-neutral-400">:<%= instance.Primary %>
                                                 </span>
                                 </span>
                             </dd>
                         </div>
-                        <div class="ml-4 shadow border border-white/10 rounded-lg p-2">
+                        <div class="ml-4 shadow border border-white/10 rounded-xl p-2">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                 stroke="currentColor" class="size-6 text-neutral-400">
                                 <path stroke-linecap="round" stroke-linejoin="round"
@@ -115,16 +115,16 @@
                             </svg>
                         </div>
                     </div>
-                    <div class="overflow-hidden rounded-lg bg-[#171717]/50 px-4 py-5 shadow sm:p-6 flex items-center">
+                    <div class="overflow-hidden rounded-xl bg-[#171717]/50 px-4 py-5 shadow sm:p-6 flex items-center">
                         <div class="flex-grow">
                             <dt class="truncate text-sm font-medium text-neutral-400">Image</dt>
-                            <dd class="mt-1 text-lg font-semibold tracking-tight text-white">
+                            <dd class="mt-1 text-lg font-medium tracking-tight text-white">
                                 <span>
                                     <%= instance.Image %>
                                 </span>
                             </dd>
                         </div>
-                        <div class="ml-4 shadow border border-white/10 rounded-lg p-2">
+                        <div class="ml-4 shadow border border-white/10 rounded-xl p-2">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                 stroke="currentColor" class="size-6 text-neutral-400">
                                 <path stroke-linecap="round" stroke-linejoin="round"
@@ -133,14 +133,14 @@
                             </svg>
                         </div>
                     </div>
-                    <div class="overflow-hidden rounded-lg bg-[#171717]/50 px-4 py-5 shadow sm:p-6 flex items-center">
+                    <div class="overflow-hidden rounded-xl bg-[#171717]/50 px-4 py-5 shadow sm:p-6 flex items-center">
                         <div class="flex-grow">
                             <dt class="truncate text-sm font-medium text-neutral-400">Disk Usage</dt>
-                            <dd class="mt-1 text-lg font-semibold tracking-tight text-white">
+                            <dd class="mt-1 text-lg font-medium tracking-tight text-white">
                                 <span id="diskUsage"></span>
                             </dd>
                         </div>
-                        <div class="ml-4 shadow border border-white/10 rounded-lg p-2">
+                        <div class="ml-4 shadow border border-white/10 rounded-xl p-2">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                 stroke="currentColor" class="size-6 text-neutral-400">
                                 <path stroke-linecap="round" stroke-linejoin="round"
@@ -152,10 +152,10 @@
             </div>
             <div class="ml-8 mb-8">
                 <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-5 mr-8">
-                    <div class="overflow-hidden rounded-lg bg-[#171717]/50 px-4 py-5 shadow sm:p-6 flex items-center">
+                    <div class="overflow-hidden rounded-xl bg-[#171717]/50 px-4 py-5 shadow sm:p-6 flex items-center">
                         <div class="flex-grow">
                             <dt class="truncate text-sm font-medium text-neutral-400">State</dt>
-                            <dd class="mt-1 text-lg font-semibold tracking-tight text-white">
+                            <dd class="mt-1 text-lg font-medium tracking-tight text-white">
                                 <span id="status">
                                     <svg class="animate-spin mt-2 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg"
                                         fill="none" viewBox="0 0 24 24">
@@ -168,7 +168,7 @@
                                 </span>
                             </dd>
                         </div>
-                        <div class="ml-4 shadow border border-white/10 rounded-lg p-2">
+                        <div class="ml-4 shadow border border-white/10 rounded-xl p-2">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                 stroke="currentColor" class="size-6 text-neutral-400">
                                 <path stroke-linecap="round" stroke-linejoin="round"
@@ -176,10 +176,10 @@
                             </svg>
                         </div>
                     </div>
-                    <div class="overflow-hidden rounded-lg bg-[#171717]/50 px-4 py-5 shadow sm:p-6 flex items-center">
+                    <div class="overflow-hidden rounded-xl bg-[#171717]/50 px-4 py-5 shadow sm:p-6 flex items-center">
                         <div class="flex-grow">
                             <dt class="truncate text-sm font-medium text-neutral-400">RAM Usage</dt>
-                            <dd class="mt-1 text-lg font-semibold tracking-tight text-white">
+                            <dd class="mt-1 text-lg font-medium tracking-tight text-white">
                                 <span id="ramUsage">
                                     <svg class="animate-spin mt-2 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg"
                                         fill="none" viewBox="0 0 24 24">
@@ -193,7 +193,7 @@
                                 <span id="ramUsage"></span> <span class="text-xs text-neutral-400" id="ramLimit"></span>
                             </dd>
                         </div>
-                        <div class="ml-4 shadow border border-white/10 rounded-lg p-2">
+                        <div class="ml-4 shadow border border-white/10 rounded-xl p-2">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                 stroke="currentColor" class="size-6 text-neutral-400">
                                 <path stroke-linecap="round" stroke-linejoin="round"
@@ -201,10 +201,10 @@
                             </svg>
                         </div>
                     </div>
-                    <div class="overflow-hidden rounded-lg bg-[#171717]/50 px-4 py-5 shadow sm:p-6 flex items-center">
+                    <div class="overflow-hidden rounded-xl bg-[#171717]/50 px-4 py-5 shadow sm:p-6 flex items-center">
                         <div class="flex-grow">
                             <dt class="truncate text-sm font-medium text-neutral-400">CPU Usage</dt>
-                            <dd class="mt-1 text-lg font-semibold tracking-tight text-white">
+                            <dd class="mt-1 text-lg font-medium tracking-tight text-white">
                                 <span id="cpuUsage">
                                     <svg class="animate-spin mt-2 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg"
                                         fill="none" viewBox="0 0 24 24">
@@ -217,7 +217,7 @@
                                 </span>
                             </dd>
                         </div>
-                        <div class="ml-4 shadow border border-white/10 rounded-lg p-2">
+                        <div class="ml-4 shadow border border-white/10 rounded-xl p-2">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                 stroke="currentColor" class="size-6 text-neutral-400">
                                 <path stroke-linecap="round" stroke-linejoin="round"
@@ -225,10 +225,10 @@
                             </svg>
                         </div>
                     </div>
-                    <div class="overflow-hidden rounded-lg bg-[#171717]/50 px-4 py-5 shadow sm:p-6 flex items-center">
+                    <div class="overflow-hidden rounded-xl bg-[#171717]/50 px-4 py-5 shadow sm:p-6 flex items-center">
                         <div class="flex-grow">
                             <dt class="truncate text-sm font-medium text-neutral-400">Network In</dt>
-                            <dd class="mt-1 text-lg font-semibold tracking-tight text-white">
+                            <dd class="mt-1 text-lg font-medium tracking-tight text-white">
                                 <span id="networkIn">
                                     <svg class="animate-spin mt-2 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg"
                                         fill="none" viewBox="0 0 24 24">
@@ -241,7 +241,7 @@
                                 </span>
                             </dd>
                         </div>
-                        <div class="ml-4 shadow border border-white/10 rounded-lg p-2">
+                        <div class="ml-4 shadow border border-white/10 rounded-xl p-2">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                 stroke="currentColor" class="size-6 text-neutral-400">
                                 <path stroke-linecap="round" stroke-linejoin="round"
@@ -249,10 +249,10 @@
                             </svg>
                         </div>
                     </div>
-                    <div class="overflow-hidden rounded-lg bg-[#171717]/50 px-4 py-5 shadow sm:p-6 flex items-center">
+                    <div class="overflow-hidden rounded-xl bg-[#171717]/50 px-4 py-5 shadow sm:p-6 flex items-center">
                         <div class="flex-grow">
                             <dt class="truncate text-sm font-medium text-neutral-400">Network Out</dt>
-                            <dd class="mt-1 text-lg font-semibold tracking-tight text-white">
+                            <dd class="mt-1 text-lg font-medium tracking-tight text-white">
                                 <span id="networkOut">
                                     <svg class="animate-spin mt-2 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg"
                                         fill="none" viewBox="0 0 24 24">
@@ -265,7 +265,7 @@
                                 </span>
                             </dd>
                         </div>
-                        <div class="ml-4 shadow border border-white/10 rounded-lg p-2">
+                        <div class="ml-4 shadow border border-white/10 rounded-xl p-2">
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                 stroke="currentColor" class="size-6 text-neutral-400">
                                 <path stroke-linecap="round" stroke-linejoin="round"
@@ -275,12 +275,12 @@
                     </div>
                 </dl>
             </div>
-            <div class="ml-8 mr-8 bg-[#101010] rounded-t-lg p-4 border-t border-l border-r border-white/5 mx-3 mt-3">
+            <div class="ml-8 mr-8 bg-[#101010] rounded-t-xl p-4 mx-3 mt-3">
                 <div id="terminal"></div>
             </div>
             <div class="ml-8 mr-8">
                 <input placeholder="Send a command..."
-                    class="rounded-b-lg bg-[#101010]/30 w-full focus:ring-transparent focus:border-b focus:border-l focus:border-r focus:border-white/10 text-white text-sm mb-6 items-center transition justify-left gap-16 hover:bg-neutral-900 px-4 py-3 flex border-white/5 bg-transparent placeholder:text-neutral-300 text-white border-b border-l border-r border-black/10"
+                    class="rounded-b-xl bg-[#101010] w-full focus:ring-transparent focus:border-b focus:border-l focus:border-r focus:border-white/10 text-white text-sm mb-6 items-center transition justify-left gap-16 hover:bg-neutral-900 px-4 py-3 flex border-transparent placeholder:text-neutral-300 text-white border-b border-l border-r border-transparent"
                     id="input"></input>
             </div>
             <script>
diff --git a/views/instance/network.ejs b/views/instance/network.ejs
index cc006e2..c96a3a5 100644
--- a/views/instance/network.ejs
+++ b/views/instance/network.ejs
@@ -3,7 +3,7 @@
     <div class="bg-transparent">
         <div class="sm:flex sm:items-center px-8 pt-4">
            <div class="sm:flex-auto">
-              <h1 class="text-base font-semibold leading-6 text-white">Manage Instance</h1>
+              <h1 class="text-base font-medium leading-6 text-white">Manage Instance</h1>
               <p class="mt-1 tracking-tight text-sm text-neutral-500">View, update and manage an instance on the Skyport panel.</p>
            </div>
         </div>
@@ -25,7 +25,7 @@
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-300 border-none">
                     <% if (port.primary == true) { %>
-                        <span class="bg-white/5 text-neutral-300 px-3 py-1.5 rounded-lg">Primary</span>
+                        <span class="bg-white/5 text-neutral-300 px-3 py-1.5 rounded-xl">Primary</span>
                     <% } %>
                </td>
              </tr>
diff --git a/views/instance/settings.ejs b/views/instance/settings.ejs
index d5a0688..363dc6d 100644
--- a/views/instance/settings.ejs
+++ b/views/instance/settings.ejs
@@ -3,23 +3,23 @@
    <div class="bg-transparent">
       <div class="sm:flex sm:items-center px-8 pt-4">
          <div class="sm:flex-auto">
-            <h1 class="text-base font-semibold leading-6 text-white">Manage Instance</h1>
+            <h1 class="text-base font-medium leading-6 text-white">Manage Instance</h1>
             <p class="mt-1 tracking-tight text-sm text-neutral-500">View, update and manage an instance on the Skyport panel.</p>
          </div>
       </div>
   </div>
    <%- include('components/instance') %>
-   <div class="p-3 bg-transparent shadow-xl border border-white/5 rounded-lg overflow-hidden sm:p-6 lg:p-10 ml-8 card" style="width: 900px;">
+   <div class="p-3 bg-transparent shadow-xl border border-white/5 rounded-xl overflow-hidden sm:p-6 lg:p-10 ml-8 card" style="width: 900px;">
       <div class="flex flex-row">
          <div class="w-1/2 mr-4">
             <h2 class="text-md font-medium text-white tracking-tight">Change Instance Name</h2>
             <div class="mt-5">
                <div class="mr-4 mt-5">
                   <label class="text-neutral-400 text-sm tracking-tight mb-2">Name</label>
-                     <input id="name" placeholder="My Server" value="<%= instance.Name %>" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" style="width: 340px;">
+                     <input id="name" placeholder="My Server" value="<%= instance.Name %>" class="rounded-xl focus:ring-transparent focus:border-transparent text-white text-sm mt-2 mb-6 w-96 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 text-white border border-black/10" style="width: 340px;">
                   </div>
                </div>
-               <button id="save" class="block rounded-lg mt-8 bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save</button>
+               <button id="save" class="block rounded-xl mt-8 bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save</button>
             </div>
          </div>
       </div>
diff --git a/views/instance/suspended.ejs b/views/instance/suspended.ejs
index 74c99ef..4939f62 100644
--- a/views/instance/suspended.ejs
+++ b/views/instance/suspended.ejs
@@ -3,7 +3,7 @@
    <div class="bg-transparent">
       <div class="sm:flex sm:items-center px-8 pt-4">
          <div class="sm:flex-auto">
-            <h1 class="text-base font-semibold leading-6 text-white">Manage Instance</h1>
+            <h1 class="text-base font-medium leading-6 text-white">Manage Instance</h1>
             <p class="mt-1 tracking-tight text-sm text-neutral-500">View, update and manage an instance on the Skyport panel.</p>
          </div>
       </div>
@@ -15,7 +15,8 @@
             <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
           </svg>
           
-         <p class="mt-4 text-xl text-white">This instance is suspended</p>
+         <p class="mt-4 text-xl font-medium text-white">This instance is suspended.</p>
+         <span class="mt-1 text-sm text-neutral-400">Please contact your administrators for further information.</span>
       </div>
    </div>
 </main>
diff --git a/views/instance/users.ejs b/views/instance/users.ejs
index 2ce54c9..9c04265 100644
--- a/views/instance/users.ejs
+++ b/views/instance/users.ejs
@@ -3,26 +3,26 @@
     <div class="bg-transparent">
         <div class="sm:flex sm:items-center px-8 pt-4">
             <div class="sm:flex-auto">
-                <h1 class="text-base font-semibold leading-6 text-white">Manage Instance</h1>
+                <h1 class="text-base font-medium leading-6 text-white">Manage Instance</h1>
                 <p class="mt-1 tracking-tight text-sm text-neutral-500">View, update, and manage an instance on the Skyport panel.</p>
             </div>
             <div class="mt-4 sm:ml-8 sm:mt-0 sm:flex-none">
-                <button id="addSubuser" type="button" class="block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Add User</button>
+                <button id="addSubuser" type="button" class="block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Add User</button>
             </div>
         </div>
     </div>
     <div id="createUserModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300">
-        <div class="bg-white rounded-lg p-8 max-w-md w-full transform scale-95 transition-transform duration-300">
+        <div class="bg-white rounded-xl p-8 max-w-md w-full transform scale-95 transition-transform duration-300">
             <div class="relative">
-                <h2 class="text-2xl font-semibold mb-1 text-gray-800">Add User</h2>
+                <h2 class="text-2xl font-medium mb-1 text-gray-800">Add User</h2>
                 <p class="mb-6 text-gray-600">Add a sub-user to this instance.</p>
             </div>
             <form action="/instance/<%= req.params.id %>/users/add" method="POST" class="space-y-4">
                 <div>
-                    <input type="text" id="username" name="username" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:border-neutral-500 transition mb-4" placeholder="Enter a username" required>
+                    <input type="text" id="username" name="username" class="w-full px-3 py-2 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:border-neutral-500 transition mb-4" placeholder="Enter a username" required>
                 </div>
                 <div>
-                    <button type="submit" class="px-5 py-2 bg-neutral-800 text-white rounded-lg hover:bg-neutral-700 transition">Add User</button>
+                    <button type="submit" class="px-5 py-2 bg-neutral-800 text-white rounded-xl hover:bg-neutral-700 transition">Add User</button>
                 </div>
             </form>
         </div>
@@ -43,7 +43,7 @@
                             <%= user.username %><span class="text-neutral-300">(<%= user.userId %>)</span>
                         </td>
                         <td class="px-6 py-4 whitespace-nowrap font-mono text-sm text-white border-none">
-                            <button class="text-white bg-red-600 px-3 py-1.5 rounded-lg text-sm" onclick="location.href='/instance/<%= req.params.id %>/users/remove/<%= user.username %>'">Remove</button>
+                            <button class="text-white bg-red-600 px-3 py-1.5 rounded-xl text-sm" onclick="location.href='/instance/<%= req.params.id %>/users/remove/<%= user.username %>'">Remove</button>
                         </td>
                     </tr>
                 <% }); %>
diff --git a/views/instances.ejs b/views/instances.ejs
index 3bcd0c3..b754e37 100644
--- a/views/instances.ejs
+++ b/views/instances.ejs
@@ -3,13 +3,13 @@
   <div class="bg-transparent">
     <div class="sm:flex sm:items-center px-8 pt-4">
       <div class="sm:flex-auto">
-        <h1 class="text-base font-semibold leading-6 text-white">Instances</h1>
+        <h1 class="text-base font-medium leading-6 text-white">Instances</h1>
         <p class="mt-1 tracking-tight text-sm text-neutral-500">View the instances that you have access to.</p>
       </div>
       <% if (req.user.admin === true) { %>
         <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
           <button id="switchButton" type="button"
-            class="block rounded-lg bg-white px-3 py-2 text-center text-sm font-semibold text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+            class="block rounded-xl bg-white px-3 py-2 text-center text-sm font-medium text-neutral-800 shadow-lg hover:bg-neutral-200 transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
             See all instances
           </button>
         </div>
@@ -66,10 +66,10 @@
         <% adminInstances.forEach(function (instance) { %>
           <a id="AdminInstancesContainer" data-instance-id="<%= instance.ContainerId %>"
             href="../instance/<%= instance.Id %>"
-            class="p-3 hover:bg-[#171717] hover:scale-105 transition bg-transparent shadow-xl border border-white/5 rounded-lg overflow-hidden sm:p-6 lg:p-8 hidden">
+            class="p-3 hover:bg-[#171717]  transition bg-transparent shadow-xl border border-white/5 rounded-xl overflow-hidden sm:p-6 lg:p-8 hidden">
             <div class="flex items-center justify-between">
               <div class="flex items-center space-x-3">
-                <div class="rounded-lg border border-white/5 inline-flex">
+                <div class="rounded-xl border border-white/5 inline-flex">
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                     class="size-5 mt-2.5 mb-2.5 mr-2.5 ml-2.5 text-white">
                     <path
@@ -82,7 +82,7 @@
               </div>
               <div class="flex items-center space-x-2">
                 <span data-status-bg
-                  class="bg-neutral-600/20 text-neutral-400 text-xs font-medium px-2.5 py-1 rounded-lg flex items-center">
+                  class="bg-neutral-600/20 text-neutral-400 text-xs font-medium px-2.5 py-1 rounded-xl flex items-center">
                   <span data-status>
                     <svg class="animate-spin h-3 w-3 text-white mr-1 inline-flex"
                       xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -96,7 +96,7 @@
                   </span>
                 </span>
                 <span
-                  class="border border-neutral-600/30 text-neutral-400 text-xs font-medium px-2.5 py-1 rounded-lg flex items-center">
+                  class="border border-neutral-600/30 text-neutral-400 text-xs font-medium px-2.5 py-1 rounded-xl flex items-center">
                   <span data-ram-usage>
                     <svg class="animate-spin h-3 w-3 text-white mr-1 inline-flex"
                       xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -110,7 +110,7 @@
                   </span>
                 </span>
                 <span
-                  class="border border-neutral-600/30 text-neutral-400 text-xs font-medium px-2.5 py-1 rounded-lg flex items-center">
+                  class="border border-neutral-600/30 text-neutral-400 text-xs font-medium px-2.5 py-1 rounded-xl flex items-center">
                   <span data-cpu-usage>
                     <svg class="animate-spin h-3 w-3 text-white mr-1 inline-flex"
                       xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -204,10 +204,10 @@
       <% instances.forEach(function (instance) { %>
         <a id="instancesContainer" data-instance-id="<%= instance.ContainerId %>"
           href="../instance/<%= instance.Id %>"
-          class="p-3 hover:bg-[#171717] hover:scale-105 transition bg-transparent shadow-xl border border-white/5 rounded-lg overflow-hidden sm:p-6 lg:p-8">
+          class="p-3 hover:bg-[#171717]  transition bg-transparent shadow-xl border border-white/5 rounded-xl overflow-hidden sm:p-6 lg:p-8">
           <div class="flex items-center justify-between">
             <div class="flex items-center space-x-3">
-              <div class="rounded-lg border border-white/5 inline-flex">
+              <div class="rounded-xl border border-white/5 inline-flex">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                   class="size-5 mt-2.5 mb-2.5 mr-2.5 ml-2.5 text-white">
                   <path
@@ -220,7 +220,7 @@
             </div>
             <div class="flex items-center space-x-2">
               <span data-status-bg
-                class="bg-neutral-600/20 text-neutral-400 text-xs font-medium px-2.5 py-1 rounded-lg flex items-center">
+                class="bg-neutral-600/20 text-neutral-400 text-xs font-medium px-2.5 py-1 rounded-xl flex items-center">
                 <span data-status>
                   <svg class="animate-spin h-3 w-3 text-white mr-1 inline-flex"
                     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -234,7 +234,7 @@
                 </span>
               </span>
               <span
-                class="border border-neutral-600/30 text-neutral-400 text-xs font-medium px-2.5 py-1 rounded-lg flex items-center">
+                class="border border-neutral-600/30 text-neutral-400 text-xs font-medium px-2.5 py-1 rounded-xl flex items-center">
                 <span data-ram-usage>
                   <svg class="animate-spin h-3 w-3 text-white mr-1 inline-flex"
                     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -248,7 +248,7 @@
                 </span>
               </span>
               <span
-                class="border border-neutral-600/30 text-neutral-400 text-xs font-medium px-2.5 py-1 rounded-lg flex items-center">
+                class="border border-neutral-600/30 text-neutral-400 text-xs font-medium px-2.5 py-1 rounded-xl flex items-center">
                 <span data-cpu-usage>
                   <svg class="animate-spin h-3 w-3 text-white mr-1 inline-flex"
                     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">