diff --git a/src/client/public/css/tailwind.css b/src/client/public/css/tailwind.css
index c6594f2..ad3a0d7 100644
--- a/src/client/public/css/tailwind.css
+++ b/src/client/public/css/tailwind.css
@@ -803,6 +803,10 @@ video {
   display: table;
 }
 
+.grid {
+  display: grid;
+}
+
 .\!hidden {
   display: none !important;
 }
@@ -846,6 +850,11 @@ video {
   height: 2rem;
 }
 
+.size-\[28px\] {
+  width: 28px;
+  height: 28px;
+}
+
 .size-\[34px\] {
   width: 34px;
   height: 34px;
@@ -892,6 +901,10 @@ video {
   width: 7rem;
 }
 
+.w-60 {
+  width: 15rem;
+}
+
 .w-\[260px\] {
   width: 260px;
 }
@@ -959,6 +972,10 @@ video {
   resize: both;
 }
 
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -999,6 +1016,10 @@ video {
   gap: 0.25rem;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
 .gap-x-1 {
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
@@ -1121,6 +1142,10 @@ video {
   border-inline-end-width: 1px;
 }
 
+.border-t {
+  border-top-width: 1px;
+}
+
 .border-solid {
   border-style: solid;
 }
@@ -1203,6 +1228,10 @@ video {
   stroke: #2563eb;
 }
 
+.p-1 {
+  padding: 0.25rem;
+}
+
 .p-1\.5 {
   padding: 0.375rem;
 }
@@ -1433,6 +1462,12 @@ video {
   opacity: 0;
 }
 
+.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);
+  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);
@@ -1486,6 +1521,10 @@ video {
   transition-duration: 500ms;
 }
 
+.\[--auto-close\:inside\] {
+  --auto-close: inside;
+}
+
 .\[--auto-close\:lg\] {
   --auto-close: lg;
 }
@@ -1498,6 +1537,10 @@ video {
   --placement: bottom-right;
 }
 
+.\[--strategy\:absolute\] {
+  --strategy: absolute;
+}
+
 /* flex items-center gap-x-3.5 py-2 px-2.5 bg-gray-100 text-sm text-gray-800 rounded-lg hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:bg-neutral-700 dark:text-white
 hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 rounded-lg hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:text-neutral-200 */
 
@@ -1741,18 +1784,50 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
   opacity: 0.5;
 }
 
+.hs-dropdown.open > .hs-dropdown-open\:block {
+  display: block;
+}
+
+.hs-dropdown.open > .hs-dropdown-open\:hidden {
+  display: none;
+}
+
 .hs-dropdown.open > .hs-dropdown-open\:opacity-100 {
   opacity: 1;
 }
 
+.hs-dropdown.open > .hs-dropdown-toggle .hs-dropdown-open\:block {
+  display: block;
+}
+
+.hs-dropdown.open > .hs-dropdown-toggle .hs-dropdown-open\:hidden {
+  display: none;
+}
+
 .hs-dropdown.open > .hs-dropdown-toggle .hs-dropdown-open\:opacity-100 {
   opacity: 1;
 }
 
+.hs-dropdown.open > .hs-dropdown-menu > .hs-dropdown-open\:block {
+  display: block;
+}
+
+.hs-dropdown.open > .hs-dropdown-menu > .hs-dropdown-open\:hidden {
+  display: none;
+}
+
 .hs-dropdown.open > .hs-dropdown-menu > .hs-dropdown-open\:opacity-100 {
   opacity: 1;
 }
 
+.hs-dropdown-menu.open.hs-dropdown-open\:block {
+  display: block;
+}
+
+.hs-dropdown-menu.open.hs-dropdown-open\:hidden {
+  display: none;
+}
+
 .hs-dropdown-menu.open.hs-dropdown-open\:opacity-100 {
   opacity: 1;
 }
@@ -2013,6 +2088,11 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
   color: rgb(229 229 229 / var(--tw-text-opacity, 1));
 }
 
+.dark\:text-neutral-300:where(.dark, .dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(212 212 212 / var(--tw-text-opacity, 1));
+}
+
 .dark\:text-neutral-400:where(.dark, .dark *) {
   --tw-text-opacity: 1;
   color: rgb(163 163 163 / var(--tw-text-opacity, 1));
diff --git a/src/client/views/layout.ejs b/src/client/views/layout.ejs
index 237f08c..23db5dd 100644
--- a/src/client/views/layout.ejs
+++ b/src/client/views/layout.ejs
@@ -6,7 +6,7 @@
         <title><%= title %></title>
         <link rel="stylesheet" href="/static/css/tailwind.css">
     </head>
-    <body class="bg-neutral-100 dark:bg-neutral-900 text-gray-600 dark:text-gray-400">
+    <body class="bg-neutral-100 dark:bg-neutral-900 text-gray-600 dark:text-gray-400 dark">
 
         <!-- Mobile Sidebar Controls -->
         <header class="sticky top-0 inset-x-0 z-20 lg:hidden">
@@ -55,6 +55,35 @@
                     </nav>                    
                 </div>
                 <!-- End Sidebar Content -->
+                <!-- Sidebar Footer -->
+                <div class="mt-auto p-2 border-t border-gray-200 dark:border-neutral-700">
+                    <div class="hs-dropdown [--strategy:absolute] [--auto-close:inside] relative w-full inline-flex">
+                        <button type="button" id="userMenu" class="w-full inline-flex shrink-0 items-center gap-x-2 p-2 text-start text-sm text-gray-800 rounded-md hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
+                            <img class="shrink-0 size-5 rounded-full" src="https://images.unsplash.com/photo-1734122415415-88cb1d7d5dc0?q=80&w=320&h=320&auto=format&fit=facearea&facepad=3&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">
+                            Username Here
+                            <svg class="block hs-dropdown-open:hidden ms-auto size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
+                            <svg class="hidden hs-dropdown-open:block ms-auto size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+                        </button>
+                        <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-white border border-gray-200 rounded-lg shadow-lg dark:bg-neutral-900 dark:border-neutral-700" role="menu">
+                            <div class="p-1">
+                                <a href="#" class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
+                                    placeholder button
+                                </a>
+                            </div>
+                            <div class="p-1">
+                                <a href="#" class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
+                                    placeholder button
+                                </a>
+                            </div>
+                            <div class="p-1">
+                                <a href="#" class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
+                                    Logout
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- End Sidebar Footer -->
             </div>
         </aside>
         <!-- End Sidebar -->
@@ -79,15 +108,15 @@
                             <li>
                                 <a href="/guild/<%= guild.id %>" class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm rounded-lg focus:outline-none text-gray-800 hover:bg-gray-100 focus:bg-gray-100 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:text-neutral-200">
                                     <% if (guild.icon) { %>
-                                        <img class="size-[34px] rounded" src="<%= guild.iconURL() %>" alt="<%= guild.name %>">
+                                        <img class="size-[28px] rounded" src="<%= guild.iconURL() %>" alt="<%= guild.name %>">
                                     <% } else { %>
-                                        <div class="size-[34px] flex shrink-0 justify-center items-center rounded bg-neutral-100 dark:bg-neutral-900">
-                                            <span class="text-xs font-semibold"><%= guild.name.split(" ").slice(0, 2).map(word => word[0].toUpperCase()).join(""); %></span>
+                                        <div class="size-[28px] flex shrink-0 justify-center items-center rounded bg-neutral-100 dark:bg-neutral-900">
+                                            <span class="text-xs"><%= guild.name.split(" ").slice(0, 2).map(word => word[0].toUpperCase()).join(""); %></span>
                                         </div>
                                     <% } %>
                                     <div>
-                                        <span class="text-base font-semibold"><%= guild.name %></span>
-                                        <span class="text-sm font-mono text-gray-600 dark:text-gray-400"><%= guild.id %></span>
+                                        <span class="text-base"><%= guild.name %></span>
+                                        <!-- <span class="text-sm font-mono text-gray-600 dark:text-gray-400"><%= guild.id %></span> -->
                                     </div>
                                 </a>
                             </li>