diff --git a/src/client/public/css/tailwind.css b/src/client/public/css/tailwind.css
index 255b075..fc3925b 100644
--- a/src/client/public/css/tailwind.css
+++ b/src/client/public/css/tailwind.css
@@ -945,6 +945,10 @@ video {
   flex-basis: 100%;
 }
 
+.origin-bottom-left {
+  transform-origin: bottom left;
+}
+
 .-translate-x-full {
   --tw-translate-x: -100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1505,6 +1509,12 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-\[margin\2c opacity\] {
+  transition-property: margin,opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-\[opacity\2c margin\] {
   transition-property: opacity,margin;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2024,6 +2034,11 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
   }
 }
 
+.dark\:divide-neutral-300:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(212 212 212 / var(--tw-divide-opacity, 1));
+}
+
 .dark\:divide-neutral-700:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(64 64 64 / var(--tw-divide-opacity, 1));
@@ -2119,6 +2134,11 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
   color: rgb(115 115 115 / var(--tw-text-opacity, 1));
 }
 
+.dark\:text-neutral-800:where(.dark, .dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(38 38 38 / var(--tw-text-opacity, 1));
+}
+
 .dark\:text-white:where(.dark, .dark *) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
diff --git a/src/client/views/layout.ejs b/src/client/views/layout.ejs
index 62952dc..6bab0f2 100644
--- a/src/client/views/layout.ejs
+++ b/src/client/views/layout.ejs
@@ -70,10 +70,24 @@
                                     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 class="p-1 hs-dropdown flex">
+                                <button type="button" id="themeTogglerBtn" class="hs-dropdown-toggle hs-dark-mode w-full 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">
+                                    Colour Theme
+                                </button>
+                                <div class="hs-dropdown-menu hs-dropdown-open:opacity-100 mt-2 hidden z-20 transition-[margin,opacity] opacity-0 duration-300 mb-2 origin-bottom-left bg-white shadow-md rounded-lg p-1 space-y-0.5 dark:bg-neutral-800 dark:border dark:border-neutral-700 dark:divide-neutral-300" role="menu">
+                                    <button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus-text-neutral-300" data-hs-theme-click-value="default">
+                                        Default (Light)
+                                    </button>
+                                    <button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus-text-neutral-300" data-hs-theme-click-value="dark">
+                                        Dark
+                                    </button>
+                                    <button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus-text-neutral-300" data-hs-theme-click-value="auto">
+                                        Auto (System)
+                                    </button>
+                                </div>
+                                <!-- <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">
+                                    <span></span>
+                                </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">