diff --git a/src/howitz/templates/components/accordion/event-actions-buttons.html b/src/howitz/templates/components/accordion/event-actions-buttons.html
index 674689ff..7c13543e 100644
--- a/src/howitz/templates/components/accordion/event-actions-buttons.html
+++ b/src/howitz/templates/components/accordion/event-actions-buttons.html
@@ -11,7 +11,7 @@
             hx-target="#event-accordion-row-{{ id }}"
             hx-swap="outerHTML show:#event-msg-feed-{{ id }}:bottom"
             hx-indicator="#row-{{ id }}-indicator"
-            class="text-white focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 mb-2 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800"
+            class="text-black focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 mb-2 bg-zinogreen-600 hover:bg-zinogreen-700 focus:outline-none focus:ring-zinogreen-800"
     >
         Poll
     </button>
@@ -22,7 +22,7 @@
                 hx-target="#event-accordion-row-{{ id }}"
                 hx-swap="outerHTML show:#event-msg-feed-{{ id }}:bottom"
                 hx-indicator="#row-{{ id }}-indicator"
-                class="text-white focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 mb-2 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800">
+                class="text-black focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 mb-2 bg-zinogreen-600 hover:bg-zinogreen-700 focus:outline-none focus:ring-zinogreen-800">
             Clear Flapping
         </button>
     {% endif %}
diff --git a/src/howitz/templates/components/accordion/event-attributes.html b/src/howitz/templates/components/accordion/event-attributes.html
index 978089d0..53281e44 100644
--- a/src/howitz/templates/components/accordion/event-attributes.html
+++ b/src/howitz/templates/components/accordion/event-attributes.html
@@ -1,9 +1,9 @@
-<div class="p-5 border rounded-2xl shadow sm:p-5 bg-gray-800 border-gray-700">
+<div class="p-5 border rounded-2xl shadow sm:p-5 bg-zinc-800 border-zinc-700">
     <div class="mb-3">
         <h5 class="text-center text-lg font-bold leading-none text-white">Attributes</h5>
     </div>
     <div class="flow-root">
-        <ul role="list" class="divide-y divide-gray-700">
+        <ul role="list" class="divide-y divide-zinc-700">
             {% for attr_key in event_attr.keys() %}
 
             {% if event_attr.get(attr_key) %}
diff --git a/src/howitz/templates/components/accordion/event-details-content.html b/src/howitz/templates/components/accordion/event-details-content.html
index da222f13..ea198505 100644
--- a/src/howitz/templates/components/accordion/event-details-content.html
+++ b/src/howitz/templates/components/accordion/event-details-content.html
@@ -3,7 +3,7 @@
     <div
             id="accordion-body-{{ id }}"
             aria-labelledby="event-accordion-row-{{ id }}"
-            class="p-2 border border-b-0 border-gray-700 bg-gray-900">
+            class="p-2 border border-b-0 border-zinc-700 bg-zinc-950">
 
         <div
                 class="grid grid-cols-1 content-between"
diff --git a/src/howitz/templates/components/accordion/event-details.html b/src/howitz/templates/components/accordion/event-details.html
index 8a466563..e23c6300 100644
--- a/src/howitz/templates/components/accordion/event-details.html
+++ b/src/howitz/templates/components/accordion/event-details.html
@@ -1,6 +1,6 @@
 <tr
         id="event-details-row-{{ id }}"
-        class="border-b bg-gray-900 border-gray-700 hover:bg-gray-600"
+        class="border-b bg-zinc-950 border-zinc-700 hover:bg-zinc-600"
 
 >
     {% include "/components/accordion/event-details-content.html" %}
diff --git a/src/howitz/templates/components/accordion/event-messages-block.html b/src/howitz/templates/components/accordion/event-messages-block.html
index 454f1db7..c9a1af3a 100644
--- a/src/howitz/templates/components/accordion/event-messages-block.html
+++ b/src/howitz/templates/components/accordion/event-messages-block.html
@@ -1,7 +1,7 @@
 <div
         hx-trigger="load"
         hx-swap="innerHTML"
-        class="basis-0 grow overflow-y-scroll overflow-x-auto p-5 border rounded-2xl shadow sm:p-5 bg-gray-800 border-gray-700">
+        class="basis-0 grow overflow-y-scroll overflow-x-auto p-5 border rounded-2xl shadow sm:p-5 bg-zinc-800 border-zinc-700">
     <div class="flex justify-between mb-3">
         <h5 class="text-center text-lg font-bold leading-none text-white">Logs & History</h5>
     </div>
diff --git a/src/howitz/templates/components/accordion/event-messages.html b/src/howitz/templates/components/accordion/event-messages.html
index 08465aab..843a2f96 100644
--- a/src/howitz/templates/components/accordion/event-messages.html
+++ b/src/howitz/templates/components/accordion/event-messages.html
@@ -2,19 +2,19 @@
 
     <ul
             id="ol-event-{{ id }}"
-            class="relative border-l border-gray-700">
+            class="relative border-l border-zinc-700">
         {% for msg in event_msgs %}
             <li class="mb-3 ml-4">
 
-                <div class="absolute w-3 h-3  rounded-full mt-1.5 -left-1.5 border border-gray-900 {% if msg.user %} bg-orange-400 {% else %} bg-blue-400 {% endif %}"></div>
-                <h3 class="mb-1 text-xs font-normal leading-none text-gray-400">
+                <div class="absolute w-3 h-3  rounded-full mt-1.5 -left-1.5 border border-zinc-900 {% if msg.user %} bg-zinogreen-50 {% else %} bg-zinogreen-400 {% endif %}"></div>
+                <h3 class="mb-1 text-xs font-normal leading-none text-zinc-400">
                     {{ msg.user }}
                 </h3>
                 <div
                         class="flex gap-0 flex-wrap"
                 >
                     <time class="mr-2 text-sm font-semibold text-white shrink-0">{{ msg.date }}</time>
-                    <p class="mb-2 text-sm font-normal text-gray-400 break-words">{{ msg.log }}</p>
+                    <p class="mb-2 text-sm font-normal text-zinc-400 break-words">{{ msg.log }}</p>
                 </div>
 
             </li>
diff --git a/src/howitz/templates/components/accordion/update-state-btn.html b/src/howitz/templates/components/accordion/update-state-btn.html
index b335174d..a23bc2a0 100644
--- a/src/howitz/templates/components/accordion/update-state-btn.html
+++ b/src/howitz/templates/components/accordion/update-state-btn.html
@@ -3,7 +3,7 @@
         hx-get="event/{{ id }}/update_status"
         hx-target="body"
         hx-swap="beforeend"
-        class="text-white focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 mb-2 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800"
+        class="text-black focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 mb-2 bg-zinogreen-600 hover:bg-zinogreen-700 focus:outline-none focus:ring-zinogreen-800"
 >
     Update Status
 </button>
diff --git a/src/howitz/templates/components/feedback/connection-status-bar/appbar-placeholder.html b/src/howitz/templates/components/feedback/connection-status-bar/appbar-placeholder.html
index 0dbc901a..e64ebbe2 100644
--- a/src/howitz/templates/components/feedback/connection-status-bar/appbar-placeholder.html
+++ b/src/howitz/templates/components/feedback/connection-status-bar/appbar-placeholder.html
@@ -2,20 +2,20 @@
         id="connection-state-appbar"
 >
     <div id="connection-status-bar"
-         class="relative isolate flex justify-center gap-x-6 overflow-hidden bg-teal-700 px-6 py-2.5"
+         class="relative isolate flex justify-center gap-x-6 overflow-hidden bg-zinogreen-700 px-6 py-2.5"
     >
         <div class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
              aria-hidden="true">
-            <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-teal-200 to-teal-900 opacity-30"
+            <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-zinogreen-200 to-zinogreen-900 opacity-30"
                  style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
         </div>
         <div class="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
              aria-hidden="true">
-            <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-teal-200 to-teal-900 opacity-30"
+            <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-zinogreen-200 to-zinogreen-900 opacity-30"
                  style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
         </div>
         <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
-            <p class="text-sm leading-6 text-gray-950">
+            <p class="text-sm leading-6 text-zinc-950">
                 <strong class="font-semibold">Connected to Zino</strong>
                 <svg viewBox="0 0 2 2" class="mx-2 inline h-0.5 w-0.5 fill-current" aria-hidden="true">
                     <circle cx="1" cy="1" r="1"/>
diff --git a/src/howitz/templates/components/feedback/connection-status-bar/error-appbar-content.html b/src/howitz/templates/components/feedback/connection-status-bar/error-appbar-content.html
index b3dd833a..ad0004b9 100644
--- a/src/howitz/templates/components/feedback/connection-status-bar/error-appbar-content.html
+++ b/src/howitz/templates/components/feedback/connection-status-bar/error-appbar-content.html
@@ -14,7 +14,7 @@
              style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
     </div>
     <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
-        <p class="text-sm leading-6 text-gray-950">
+        <p class="text-sm leading-6 text-zinc-950">
             <strong class="font-semibold">Connection timed out</strong>
             <svg viewBox="0 0 2 2" class="mx-2 inline h-0.5 w-0.5 fill-current" aria-hidden="true">
                 <circle cx="1" cy="1" r="1"/>
diff --git a/src/howitz/templates/components/feedback/connection-status-bar/success-appbar-content.html b/src/howitz/templates/components/feedback/connection-status-bar/success-appbar-content.html
index db85220c..8a25ebe1 100644
--- a/src/howitz/templates/components/feedback/connection-status-bar/success-appbar-content.html
+++ b/src/howitz/templates/components/feedback/connection-status-bar/success-appbar-content.html
@@ -2,15 +2,15 @@
 <div
         id="connection-success-content"
         role="status"
-        class="relative isolate flex justify-center gap-x-6 bg-teal-900 overflow-hidden px-6 py-0.5">
+        class="relative isolate flex justify-center gap-x-6 bg-zinogreen-900 overflow-hidden px-6 py-0.5">
     <div class="absolute left-[max(-7rem,calc(50%-52rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
          aria-hidden="true">
-        <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-teal-200 to-teal-950 opacity-30"
+        <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-zinogreen-200 to-zinogreen-950 opacity-30"
              style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
     </div>
     <div class="absolute left-[max(45rem,calc(50%+8rem))] top-1/2 -z-10 -translate-y-1/2 transform-gpu blur-2xl"
          aria-hidden="true">
-        <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-teal-200 to-teal-950 opacity-30"
+        <div class="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-zinogreen-200 to-zinogreen-950 opacity-30"
              style="clip-path: polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)"></div>
     </div>
 </div>
diff --git a/src/howitz/templates/components/footer/footer.html b/src/howitz/templates/components/footer/footer.html
index d8cb760f..f068e199 100644
--- a/src/howitz/templates/components/footer/footer.html
+++ b/src/howitz/templates/components/footer/footer.html
@@ -1,5 +1,5 @@
 <footer hx-get="/footer"
         hx-trigger="load, footerIsOutdated from:body"
         hx-swap="innerHTML"
-        class="bg-slate-950">
+        class="bg-black">
 </footer>
diff --git a/src/howitz/templates/components/login/sign-in-form.html b/src/howitz/templates/components/login/sign-in-form.html
index b88aaf51..7b0f5608 100644
--- a/src/howitz/templates/components/login/sign-in-form.html
+++ b/src/howitz/templates/components/login/sign-in-form.html
@@ -9,9 +9,9 @@
         hx-target-403="form p"
 >
     <div>
-        <label for="username" class="block text-sm font-medium leading-6 text-sky-100">Username</label>
+        <label for="username" class="block text-sm font-medium leading-6 text-white">Username</label>
         <input id="username" name="username" type="text" autocomplete="current-username" required
-               class="mt-2 block w-full rounded-md border-0 py-1.5 bg-slate-900 text-sky-100 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6">
+               class="mt-2 block w-full rounded-md border-0 py-1.5 bg-zinc-950 text-white shadow-sm ring-1 ring-inset ring-zinc-300 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-zinogreen-600 sm:text-sm sm:leading-6">
         <p
                 id="username-helper-text"
                 hidden
@@ -20,9 +20,9 @@
     </div>
 
     <div>
-        <label for="password" class="block text-sm font-medium leading-6 text-sky-100">Password</label>
+        <label for="password" class="block text-sm font-medium leading-6 text-white">Password</label>
         <input id="password" name="password" type="password" autocomplete="current-password" required
-               class="mt-2 block w-full rounded-md border-0 py-1.5 bg-slate-900 text-sky-100 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6">
+               class="mt-2 block w-full rounded-md border-0 py-1.5 bg-zinc-950 text-white shadow-sm ring-1 ring-inset ring-zinc-300 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-zinogreen-600 sm:text-sm sm:leading-6">
         <p
                 id="password-helper-text"
                 hidden
@@ -32,7 +32,7 @@
 
     <div>
         <button type="submit"
-                class="flex w-full justify-center rounded-md bg-sky-600 my-10 px-3 py-1.5 text-sm font-semibold leading-6 text-slate-50 shadow-sm hover:bg-sky-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-600">
+                class="flex w-full justify-center rounded-md bg-zinogreen-600 my-10 px-3 py-1.5 text-sm font-semibold leading-6 text-black shadow-sm hover:bg-zinogreen-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinogreen-600">
             Sign in
             {% with color='white' %}
                 {% include "/components/feedback/spinner/spinner.html" %}
diff --git a/src/howitz/templates/components/navbar/navbar.html b/src/howitz/templates/components/navbar/navbar.html
index 456f56e5..4488f89c 100644
--- a/src/howitz/templates/components/navbar/navbar.html
+++ b/src/howitz/templates/components/navbar/navbar.html
@@ -1,18 +1,20 @@
-<nav class="bg-slate-950">
+<nav class="bg-black">
     <div class="max-w-full h-16 grid grid-cols-3 items-center px-2 lg:px-4">
         <a
                 href="/"
                 hx-push-url="/"
-                class="hover:bg-gray-700 p-2 rounded-md justify-self-start"
+                class="justify-self-start"
                 aria-current="page">
-            {% include "/includes/zino-logo.svg" %}
+            {% with height='16' %}
+                {% include "/includes/zino-logo.svg" %}
+            {% endwith %}
 
         </a>
         <div class="flex space-x-1 md:space-x-4 items-center justify-self-center">
             <a
                     href="/events"
                     hx-push-url="/events"
-                    class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-4 py-2 text-lg font-normal"
+                    class="text-zinc-300 hover:bg-zinogray/20 hover:text-white block rounded-md px-4 py-2 text-lg font-normal"
                     aria-current="page">
                 Dashboard
             </a>
diff --git a/src/howitz/templates/components/navbar/user-dropdown-menu-expanded.html b/src/howitz/templates/components/navbar/user-dropdown-menu-expanded.html
index f7d84a1b..e7d9168c 100644
--- a/src/howitz/templates/components/navbar/user-dropdown-menu-expanded.html
+++ b/src/howitz/templates/components/navbar/user-dropdown-menu-expanded.html
@@ -1,4 +1,4 @@
-<div class="absolute right-0 z-40 my-4 w-48 text-base origin-top-right rounded-md divide-y divide-slate-300 rounded-lg shadow-md shadow-slate-500 bg-slate-600"
+<div class="absolute right-0 z-40 my-4 w-48 text-base origin-top-right rounded-md divide-y divide-zinc-300 rounded-lg shadow-md shadow-zinc-500 bg-zinc-600"
      aria-orientation="vertical"
      id="user-menu-dropdown">
     <div class="px-4 py-3">
@@ -10,7 +10,7 @@
             <a
                     href="/logout"
                     hx-push-url="/logout"
-                    class="block px-4 py-2 text-sm text-white hover:bg-slate-800">Log
+                    class="block px-4 py-2 text-sm text-white hover:bg-zinc-800">Log
                 out</a>
         </li>
     </ul>
diff --git a/src/howitz/templates/components/navbar/user-menu-btn-expanded.html b/src/howitz/templates/components/navbar/user-menu-btn-expanded.html
index d8164beb..51fec701 100644
--- a/src/howitz/templates/components/navbar/user-menu-btn-expanded.html
+++ b/src/howitz/templates/components/navbar/user-menu-btn-expanded.html
@@ -1,5 +1,5 @@
 <button type="button"
-        class="relative h-10 w-10 flex justify-center items-center text-2xl bg-slate-600 rounded-full ring-2 ring-white text-white font-medium"
+        class="relative h-10 w-10 flex justify-center items-center text-2xl bg-zinc-600 rounded-full ring-2 ring-white text-white font-medium"
         id="user-menu-btn"
         aria-expanded="true"
         data-dropdown-toggle="user-menu-dropdown"
diff --git a/src/howitz/templates/components/navbar/user-menu-btn.html b/src/howitz/templates/components/navbar/user-menu-btn.html
index 641da846..d334f99b 100644
--- a/src/howitz/templates/components/navbar/user-menu-btn.html
+++ b/src/howitz/templates/components/navbar/user-menu-btn.html
@@ -1,5 +1,5 @@
 <button type="button"
-        class="relative h-10 w-10 flex justify-center items-center text-2xl bg-slate-500 rounded-full font-semibold"
+        class="relative h-10 w-10 flex justify-center items-center text-2xl bg-zinc-500 rounded-full font-semibold"
         id="user-menu-btn"
         aria-expanded="false"
         data-dropdown-toggle="user-menu-dropdown"
diff --git a/src/howitz/templates/components/popups/alerts/error/error-alert.html b/src/howitz/templates/components/popups/alerts/error/error-alert.html
index 39da86c9..6090874a 100644
--- a/src/howitz/templates/components/popups/alerts/error/error-alert.html
+++ b/src/howitz/templates/components/popups/alerts/error/error-alert.html
@@ -19,7 +19,7 @@
                     hx-get="/alert/{{ alert_id }}/show-maximized-error"
                     hx-target="#error-msg-{{ alert_id }}-minimized"
                     hx-swap="afterend"
-                    class="ms-auto -my-1.5 bg-opacity-20 bg-white text-gray-400 hover:text-gray-100 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-orange-400/70 inline-flex items-center justify-center h-8 w-8"
+                    class="ms-auto -my-1.5 bg-opacity-20 bg-white text-zinc-400 hover:text-zinc-100 rounded-lg focus:ring-2 focus:ring-zinc-300 p-1.5 hover:bg-orange-400/70 inline-flex items-center justify-center h-8 w-8"
                     aria-label="Expand alert">
                 <span class="sr-only">Expand alert</span>
                 {% include "/components/popups/alerts/error/maximize-icon.svg" %}
@@ -28,7 +28,7 @@
                     hx-get="/get_none"
                     hx-target="#error-alert-{{ alert_id }}"
                     hx-swap="delete"
-                    class="ms-auto -my-1.5 bg-opacity-20 bg-white text-gray-400 hover:text-gray-100 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-orange-400/70 inline-flex items-center justify-center h-8 w-8"
+                    class="ms-auto -my-1.5 bg-opacity-20 bg-white text-zinc-400 hover:text-zinc-100 rounded-lg focus:ring-2 focus:ring-zinc-300 p-1.5 hover:bg-orange-400/70 inline-flex items-center justify-center h-8 w-8"
                     aria-label="Close alert">
                 <span class="sr-only">Close alert</span>
                 {% include "/components/popups/alerts/close-icon.svg" %}
diff --git a/src/howitz/templates/components/popups/bulk-update-menu/bulk-update-buttons.html b/src/howitz/templates/components/popups/bulk-update-menu/bulk-update-buttons.html
index 6b9fa693..da2420b8 100644
--- a/src/howitz/templates/components/popups/bulk-update-menu/bulk-update-buttons.html
+++ b/src/howitz/templates/components/popups/bulk-update-menu/bulk-update-buttons.html
@@ -5,7 +5,7 @@
             hx-get="/show_update_status_modal"
             hx-target="body"
             hx-swap="beforeend"
-            class="text-white focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800"
+            class="text-black focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 bg-zinogreen-600 hover:bg-zinogreen-700 focus:outline-none focus:ring-zinogreen-800"
     >
         Update Status
     </button>
@@ -17,7 +17,7 @@
             hx-trigger="click"
             id="bulk-poll-events"
             hx-indicator="#bulk-poll-indicator"
-            class="text-white focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800">
+            class="text-black focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 bg-zinogreen-600 hover:bg-zinogreen-700 focus:outline-none focus:ring-zinogreen-800">
         Poll
     </button>
 
@@ -29,7 +29,7 @@
                 hx-trigger="click"
                 id="bulk-clear-flapping"
                 hx-indicator="#bulk-clear-flapping-indicator"
-                class="text-white focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800">
+                class="text-black focus:ring-4 font-medium rounded-lg text-sm px-3 py-2 mr-2 bg-zinogreen-600 hover:bg-zinogreen-700 focus:outline-none focus:ring-zinogreen-800">
             Clear Flapping
         </button>
     {% endif %}
diff --git a/src/howitz/templates/components/popups/bulk-update-menu/bulk-update-menu.html b/src/howitz/templates/components/popups/bulk-update-menu/bulk-update-menu.html
index fee9d9f7..f96646f6 100644
--- a/src/howitz/templates/components/popups/bulk-update-menu/bulk-update-menu.html
+++ b/src/howitz/templates/components/popups/bulk-update-menu/bulk-update-menu.html
@@ -1,5 +1,5 @@
 <div id="bulk-update-menu" tabindex="-1" hx-swap-oob="true"
-     class="sticky bottom-0 z-20 flex flex-row items-center justify-between w-full max-h-fit p-2 border-t bg-slate-700 border-slate-600">
+     class="sticky bottom-0 z-20 flex flex-row items-center justify-between w-full max-h-fit p-2 border-t bg-zinc-700 border-zinc-600">
 
     {% include "/components/popups/bulk-update-menu/bulk-update-progress.html" %}
 
diff --git a/src/howitz/templates/components/popups/modals/forms/sort-table-form.html b/src/howitz/templates/components/popups/modals/forms/sort-table-form.html
index 6bd3f8a1..41a6411e 100644
--- a/src/howitz/templates/components/popups/modals/forms/sort-table-form.html
+++ b/src/howitz/templates/components/popups/modals/forms/sort-table-form.html
@@ -12,12 +12,12 @@
                             <div class="flex h-6 items-center">
                                 <input id="{{ sort }}" value="{{ sort }}" type="radio" name="sort-method"
                                        {% if sort == current_sort %}checked{% endif %}
-                                       class="h-4 w-4 bg-sky-100/40 border-white text-sky-600 focus:ring-sky-600">
+                                       class="h-4 w-4 bg-zinogreen-100/40 border-white text-zinogreen-600 focus:ring-zinogreen-600">
                             </div>
                             <div class="text-sm">
                                 <label for="{{ sort }}"
                                        class="block font-medium">{{ sort.display_name }}</label>
-                                <p class="text-xs text-sky-100/40">{{ sort.description }}</p>
+                                <p class="text-xs text-white/60">{{ sort.description }}</p>
                             </div>
                         </div>
                     {% endfor %}
@@ -33,7 +33,7 @@
                 hx-target="#eventlist-list"
                 hx-swap="innerHTML"
                 hx-indicator="#bulk-update-indicator"
-                class="mr-1 inline-flex items-center py-2 px-4 font-medium text-center text-white rounded-lg focus:ring-4 bg-sky-700 hover:bg-sky-800 focus:outline-none focus:ring-sky-900">
+                class="mr-1 inline-flex items-center py-2 px-4 font-medium text-center text-white rounded-lg focus:ring-4 bg-zinogreen-700 hover:bg-zinogreen-800 focus:outline-none focus:ring-zinogreen-900">
             Save
         </button>
 
diff --git a/src/howitz/templates/components/popups/modals/table-operation-modal.html b/src/howitz/templates/components/popups/modals/table-operation-modal.html
index b5332225..a858ae9e 100644
--- a/src/howitz/templates/components/popups/modals/table-operation-modal.html
+++ b/src/howitz/templates/components/popups/modals/table-operation-modal.html
@@ -7,7 +7,7 @@
      hx-swap-oob="true"
 >
     <div
-            class="modal-underlay inset-0 bg-gray-500 bg-opacity-70 transition-opacity"
+            class="modal-underlay inset-0 bg-zinc-500 bg-opacity-70 transition-opacity"
             hx-on:click="htmx.addClass(htmx.find('#{{ modal_id }}'), 'invisible')"
     ></div>
 
@@ -15,12 +15,12 @@
     <div class="w-1/3 flex items-end justify-center p-4 text-center sm:items-center sm:p-0">
 
         <div class="relative transform overflow-x-auto overflow-y-auto rounded-lg bg-white text-left shadow-xl sm:my-8 sm:w-full sm:max-w-3xl w-fit">
-            <div class="bg-slate-800 px-4 py-4">
-                <h3 class="text-lg font-semibold leading-6 text-center text-teal-200"
+            <div class="bg-zinc-800 px-4 py-4">
+                <h3 class="text-lg font-semibold leading-6 text-center text-white"
                     id="modal-title">{{ modal_title }}</h3>
             </div>
 
-            <div class="bg-slate-700 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+            <div class="bg-zinc-700 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                 <div class="sm:flex sm:items-start">
                     <div class="w-full mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                         <div id="{{ modal_id }}-content" class="text-white">
@@ -36,10 +36,10 @@
                 </div>
             </div>
 
-            <div class="bg-slate-800 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+            <div class="bg-zinc-800 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
                 <button
                         hx-on:click="htmx.addClass(htmx.find('#{{ modal_id }}'), 'invisible')"
-                        class="mt-3 inline-flex w-full justify-center rounded-md bg-slate-800 px-3 py-2 text-sm font-semibold text-teal-200 shadow-sm ring-1 ring-inset ring-teal-200 hover:bg-slate-600 sm:mt-0 sm:w-auto">
+                        class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-white hover:bg-zinc-600 sm:mt-0 sm:w-auto">
                     Close
                 </button>
             </div>
diff --git a/src/howitz/templates/components/popups/modals/update-event-status-modal.html b/src/howitz/templates/components/popups/modals/update-event-status-modal.html
index 89587df4..c4e0c239 100644
--- a/src/howitz/templates/components/popups/modals/update-event-status-modal.html
+++ b/src/howitz/templates/components/popups/modals/update-event-status-modal.html
@@ -6,7 +6,7 @@
      hx-target-error="body"
 >
     <div
-            class="modal-underlay inset-0 bg-gray-500 bg-opacity-50 transition-opacity"
+            class="modal-underlay inset-0 bg-zinc-500 bg-opacity-50 transition-opacity"
             hx-get="/get_none"
             hx-target="#bulk-update-event-status-modal"
             hx-swap="delete"
@@ -15,12 +15,12 @@
     <div class="w-1/3 flex items-end justify-center p-4 text-center sm:items-center sm:p-0">
 
         <div class="relative transform overflow-x-auto overflow-y-auto rounded-lg bg-white text-left shadow-xl sm:my-8 sm:w-full sm:max-w-3xl w-fit">
-            <div class="bg-slate-700 px-4 py-4 sm:flex sm:px-6">
+            <div class="bg-zinc-700 px-4 py-4 sm:flex sm:px-6">
                 <h3 class="text-lg font-semibold leading-6 text-white" id="modal-title">Update selected events
                 </h3>
             </div>
 
-            <div class="bg-slate-800 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+            <div class="bg-zinc-800 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                 <div class="sm:flex sm:items-start">
                     <div class="w-full mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
 
@@ -39,7 +39,7 @@ <h3 class="text-lg font-semibold leading-6 text-white" id="modal-title">Update s
                                     </label>
                                     <select id="event-state"
                                             name="event-state"
-                                            class="border text-sm rounded-lg block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500">
+                                            class="border text-sm rounded-lg block w-full p-2.5 bg-zinc-700 border-zinc-600 placeholder-zinc-400 text-white focus:ring-zinogreen-500 focus:border-zinogreen-500">
                                         <option class="px-2" value="open"
                                                 {% if current_state=='open' %}selected{% endif %}>Open
                                         </option>
@@ -61,11 +61,11 @@ <h3 class="text-lg font-semibold leading-6 text-white" id="modal-title">Update s
                                     </select>
                                 </div>
 
-                                <div class="w-4/5 py-2 px-4 mb-4 rounded-lg rounded-t-lg border bg-gray-800 border-gray-700">
+                                <div class="w-4/5 py-2 px-4 mb-4 rounded-lg rounded-t-lg border bg-zinc-800 border-zinc-700">
                                     <label for="comment" class="sr-only">Your comment</label>
                                     <textarea id="comment" rows="4"
                                               name="event-history"
-                                              class="px-0 w-full text-base border-0 focus:ring-0 focus:outline-none text-white placeholder-gray-400 bg-gray-800"
+                                              class="px-0 w-full text-base border-0 focus:ring-0 focus:outline-none text-white placeholder-zinc-400 bg-zinc-800"
                                               placeholder="Add a message to history..."></textarea>
                                 </div>
 
@@ -76,7 +76,7 @@ <h3 class="text-lg font-semibold leading-6 text-white" id="modal-title">Update s
                                         hx-trigger="click"
                                         hx-indicator="#bulk-update-indicator"
                                         hx-target-400="#generic-400-error"
-                                        class="mr-1 inline-flex items-center py-2 px-4 font-medium text-center text-white rounded-lg focus:ring-4 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800">
+                                        class="mr-1 inline-flex items-center py-2 px-4 font-medium text-center text-black rounded-lg focus:ring-4 bg-zinogreen-600 hover:bg-zinogreen-700 focus:outline-none focus:ring-zinogreen-800">
                                     Update events
 
                                 </button>
@@ -93,7 +93,7 @@ <h3 class="text-lg font-semibold leading-6 text-white" id="modal-title">Update s
                     </div>
                 </div>
             </div>
-            <div class="bg-slate-700 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+            <div class="bg-zinc-700 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
                 <div id="progress-bar-bulk-state-update">
 
                 </div>
@@ -101,7 +101,7 @@ <h3 class="text-lg font-semibold leading-6 text-white" id="modal-title">Update s
                         hx-get="/get_none"
                         hx-target="#bulk-update-event-status-modal"
                         hx-swap="delete"
-                        class="mt-3 inline-flex w-full justify-center rounded-md bg-slate-700 px-3 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-white hover:bg-slate-600 sm:mt-0 sm:w-auto">
+                        class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-700 px-3 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-white hover:bg-zinc-600 sm:mt-0 sm:w-auto">
                     Close
                 </button>
             </div>
diff --git a/src/howitz/templates/components/popups/modals/update-singular-event-status-modal.html b/src/howitz/templates/components/popups/modals/update-singular-event-status-modal.html
index b022953c..633d835b 100644
--- a/src/howitz/templates/components/popups/modals/update-singular-event-status-modal.html
+++ b/src/howitz/templates/components/popups/modals/update-singular-event-status-modal.html
@@ -6,7 +6,7 @@
      hx-target-error="body"
 >
     <div
-            class="modal-underlay inset-0 bg-gray-500 bg-opacity-50 transition-opacity"
+            class="modal-underlay inset-0 bg-zinc-500 bg-opacity-50 transition-opacity"
             hx-get="/get_none"
             hx-target="#update-event-{{ id }}-status-modal"
             hx-swap="delete"
@@ -15,12 +15,12 @@
     <div class="w-1/3 flex items-end justify-center p-4 text-center sm:items-center sm:p-0">
 
         <div class="relative transform overflow-x-auto overflow-y-auto rounded-lg bg-white text-left shadow-xl sm:my-8 sm:w-full sm:max-w-3xl w-fit">
-            <div class="bg-slate-700 px-4 py-4 sm:flex sm:px-6">
+            <div class="bg-zinc-700 px-4 py-4 sm:flex sm:px-6">
                 <h3 class="text-lg font-semibold leading-6 text-white" id="modal-title">Update event #{{ id }}
                 </h3>
             </div>
 
-            <div class="bg-slate-800 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+            <div class="bg-zinc-800 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
                 <div class="sm:flex sm:items-start">
                     <div class="w-full mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
 
@@ -39,7 +39,7 @@ <h3 class="text-lg font-semibold leading-6 text-white" id="modal-title">Update e
                                     </label>
                                     <select id="event-state"
                                             name="event-state"
-                                            class="border text-sm rounded-lg block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500">
+                                            class="border text-sm rounded-lg block w-full p-2.5 bg-zinc-700 border-zinc-600 placeholder-zinc-400 text-white focus:ring-zinogreen-500 focus:border-zinogreen-500">
                                         <option class="px-2" value="open"
                                                 {% if current_state=='open' %}selected{% endif %}>Open
                                         </option>
@@ -61,11 +61,11 @@ <h3 class="text-lg font-semibold leading-6 text-white" id="modal-title">Update e
                                     </select>
                                 </div>
 
-                                <div class="w-4/5 py-2 px-4 mb-4 rounded-lg rounded-t-lg border bg-gray-800 border-gray-700">
+                                <div class="w-4/5 py-2 px-4 mb-4 rounded-lg rounded-t-lg border bg-zinc-800 border-zinc-700">
                                     <label for="comment" class="sr-only">Your comment</label>
                                     <textarea id="comment" rows="4"
                                               name="event-history"
-                                              class="px-0 w-full text-base border-0 focus:ring-0 focus:outline-none text-white placeholder-gray-400 bg-gray-800"
+                                              class="px-0 w-full text-base border-0 focus:ring-0 focus:outline-none text-white placeholder-zinc-400 bg-zinc-800"
                                               placeholder="Add a message to history..."></textarea>
                                 </div>
 
@@ -76,7 +76,7 @@ <h3 class="text-lg font-semibold leading-6 text-white" id="modal-title">Update e
                                         hx-swap="outerHTML show:#ol-event-{{ id }}:bottom"
                                         hx-indicator="#bulk-update-indicator"
                                         hx-target-400="#generic-400-error"
-                                        class="mr-1 inline-flex items-center py-2 px-4 font-medium text-center text-white rounded-lg focus:ring-4 bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-blue-800">
+                                        class="mr-1 inline-flex items-center py-2 px-4 font-medium text-center text-black rounded-lg focus:ring-4 bg-zinogreen-600 hover:bg-zinogreen-700 focus:outline-none focus:ring-zinogreen-800">
                                     Update event
                                 </button>
 
@@ -92,7 +92,7 @@ <h3 class="text-lg font-semibold leading-6 text-white" id="modal-title">Update e
                     </div>
                 </div>
             </div>
-            <div class="bg-slate-700 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+            <div class="bg-zinc-700 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
                 <div id="progress-bar-bulk-state-update">
 
                 </div>
@@ -100,7 +100,7 @@ <h3 class="text-lg font-semibold leading-6 text-white" id="modal-title">Update e
                         hx-get="/get_none"
                         hx-target="#update-event-{{ id }}-status-modal"
                         hx-swap="delete"
-                        class="mt-3 inline-flex w-full justify-center rounded-md bg-slate-700 px-3 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-white hover:bg-slate-600 sm:mt-0 sm:w-auto">
+                        class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-700 px-3 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-white hover:bg-zinc-600 sm:mt-0 sm:w-auto">
                     Close
                 </button>
             </div>
diff --git a/src/howitz/templates/components/row/collapse-btn.html b/src/howitz/templates/components/row/collapse-btn.html
index 6089a890..a55901e0 100644
--- a/src/howitz/templates/components/row/collapse-btn.html
+++ b/src/howitz/templates/components/row/collapse-btn.html
@@ -1,6 +1,6 @@
 <td
         id="toggle-row-btn-{{ id }}"
-        class="{{ padding }} border border-slate-700 relative"
+        class="{{ padding }} border border-zinc-700 relative"
         hx-get="/events/{{ id }}/collapse_row"
         hx-trigger="click"
         hx-swap="multi:#event-accordion-row-{{ id }}:outerHTML,#event-details-row-{{ id }}:delete"
diff --git a/src/howitz/templates/components/row/colored-data-cells.html b/src/howitz/templates/components/row/colored-data-cells.html
index 73203435..fcdd468b 100644
--- a/src/howitz/templates/components/row/colored-data-cells.html
+++ b/src/howitz/templates/components/row/colored-data-cells.html
@@ -1,4 +1,4 @@
-<td class="{{ padding }} text-center font-medium whitespace-nowrap border border-slate-700 text-{{ color }}-400">
+<td class="{{ padding }} text-center font-medium whitespace-nowrap border border-zinc-700 text-{{ color }}-400">
     <div class="relative">
         <div class="h-2 bg-{{ color }}-100 opacity-30 blur-xl">
             {{ event.op_state }}
@@ -8,7 +8,7 @@
         </div>
     </div>
 </td>
-<td class="{{ padding }} text-center font-medium whitespace-nowrap border border-slate-700 text-{{ color }}-400">
+<td class="{{ padding }} text-center font-medium whitespace-nowrap border border-zinc-700 text-{{ color }}-400">
     <div class="relative">
         <div class="h-2 bg-{{ color }}-100 opacity-30 blur-xl">
             {{ event.adm_state }}
diff --git a/src/howitz/templates/components/row/data-cells.html b/src/howitz/templates/components/row/data-cells.html
index 993e5bc4..70b5226f 100644
--- a/src/howitz/templates/components/row/data-cells.html
+++ b/src/howitz/templates/components/row/data-cells.html
@@ -1,16 +1,16 @@
-<td class="{{ padding }} text-center border border-slate-700">{{ event.id }}</td>
+<td class="{{ padding }} text-center border border-zinc-700">{{ event.id }}</td>
 {% if event.color != "" and event.color is not none %}
 {% with color=event.color %}
 {% include "/components/row/colored-data-cells.html" %}
 {% endwith %}
 {% else %}
-<td class="{{ padding }} text-center font-medium  whitespace-nowrap text-white border border-slate-700">{{
+<td class="{{ padding }} text-center font-medium  whitespace-nowrap text-white border border-zinc-700">{{
     event.op_state }}
 </td>
-<td class="{{ padding }} text-center font-medium text-white border border-slate-700">{{ event.adm_state }}</td>
+<td class="{{ padding }} text-center font-medium text-white border border-zinc-700">{{ event.adm_state }}</td>
 {% endif %}
-<td class="{{ padding }} text-right border border-slate-700">{{ event.age }}</td>
-<td class="{{ padding }} text-right border border-slate-700">{{ event.downtime }}</td>
-<td class="{{ padding }} border border-slate-700">{{ event.router }}</td>
-<td class="{{ padding }} border border-slate-700">{{ event.port }}</td>
-<td class="{{ padding }} border border-slate-700">{{ event.description }}</td>
+<td class="{{ padding }} text-right border border-zinc-700">{{ event.age }}</td>
+<td class="{{ padding }} text-right border border-zinc-700">{{ event.downtime }}</td>
+<td class="{{ padding }} border border-zinc-700">{{ event.router }}</td>
+<td class="{{ padding }} border border-zinc-700">{{ event.port }}</td>
+<td class="{{ padding }} border border-zinc-700">{{ event.description }}</td>
diff --git a/src/howitz/templates/components/row/event-checked-box.html b/src/howitz/templates/components/row/event-checked-box.html
index 6cbfbc77..d4b899ca 100644
--- a/src/howitz/templates/components/row/event-checked-box.html
+++ b/src/howitz/templates/components/row/event-checked-box.html
@@ -4,7 +4,7 @@
              class="flex items-center">
             <input id="unselect-event-{{ id }}"
                    type="checkbox"
-                   class="w-4 h-4 text-white rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-500"
+                   class="w-4 h-4 text-white rounded focus:ring-zinogreen-600 ring-offset-zinc-800 focus:ring-offset-zinc-800 focus:ring-2 bg-zinc-700 border-zinc-500"
                    checked
                    hx-post="/event/{{ id }}/unselect"
                    hx-trigger='click from:#unselect-event-{{ id }}, dblclick from:#unselect-event-{{ id }} consume'
@@ -22,7 +22,7 @@
         <div id="checked-box-{{ id }}" class="flex items-center">
             <input id="unselect-event-{{ id }}"
                    type="checkbox"
-                   class="w-4 h-4 text-white rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-500"
+                   class="w-4 h-4 text-white rounded focus:ring-zinogreen-600 ring-offset-zinc-800 focus:ring-offset-zinc-800 focus:ring-2 bg-zinc-700 border-zinc-500"
                    checked
                    hx-post="/event/{{ id }}/unselect"
                    hx-trigger='click from:#unselect-event-{{ id }}, dblclick from:#unselect-event-{{ id }} consume'
diff --git a/src/howitz/templates/components/row/event-row.html b/src/howitz/templates/components/row/event-row.html
index 5d629daa..95b9d239 100644
--- a/src/howitz/templates/components/row/event-row.html
+++ b/src/howitz/templates/components/row/event-row.html
@@ -1,5 +1,5 @@
 <tr
-        class="border-b bg-gray-900 border-gray-700 hover:bg-gray-600 {{ 'checked' if is_selected }}"
+        class="border-b bg-zinc-950 border-zinc-700 hover:bg-zinc-600 {{ 'checked' if is_selected }}"
         id="event-accordion-row-{{ id }}"
         hx-get="/events/{{ id }}/expand_row"
         hx-trigger="dblclick"
diff --git a/src/howitz/templates/components/row/event-unchecked-box.html b/src/howitz/templates/components/row/event-unchecked-box.html
index f2d0595f..9b9b224e 100644
--- a/src/howitz/templates/components/row/event-unchecked-box.html
+++ b/src/howitz/templates/components/row/event-unchecked-box.html
@@ -3,7 +3,7 @@
         <div id="unchecked-box-{{ id }}" class="flex items-center">
             <input id="select-event-{{ id }}"
                    type="checkbox"
-                   class="w-4 h-4 rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-500"
+                   class="w-4 h-4 rounded focus:ring-zinogreen-600 ring-offset-zinc-800 focus:ring-offset-zinc-800 focus:ring-2 bg-zinc-700 border-zinc-500"
                    hx-post="/event/{{ id }}/select"
                    hx-trigger='click from:#select-event-{{ id }}, dblclick from:#select-event-{{ id }} consume'
                    hx-target="#unchecked-box-{{ id }}"
@@ -21,7 +21,7 @@
         <div id="unchecked-box-{{ id }}" class="flex items-center">
             <input id="select-event-{{ id }}"
                    type="checkbox"
-                   class="w-4 h-4 rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-500"
+                   class="w-4 h-4 rounded focus:ring-zinogreen-600 ring-offset-zinc-800 focus:ring-offset-zinc-800 focus:ring-2 bg-zinc-700 border-zinc-500"
                    hx-post="/event/{{ id }}/select"
                    hx-trigger='click from:#select-event-{{ id }}, dblclick from:#select-event-{{ id }} consume'
                    hx-target="#unchecked-box-{{ id }}"
diff --git a/src/howitz/templates/components/row/expand-btn.html b/src/howitz/templates/components/row/expand-btn.html
index ad90a6c5..4ed18b45 100644
--- a/src/howitz/templates/components/row/expand-btn.html
+++ b/src/howitz/templates/components/row/expand-btn.html
@@ -1,6 +1,6 @@
 <td
         id="toggle-row-btn-{{ id }}"
-        class="{{ padding }} border border-slate-700 relative"
+        class="{{ padding }} border border-zinc-700 relative"
         hx-get="/events/{{ id }}/expand_row"
         hx-trigger="click"
         hx-target="#event-accordion-row-{{ id }}"
diff --git a/src/howitz/templates/components/row/expanded-row.html b/src/howitz/templates/components/row/expanded-row.html
index 5606c8c2..70a0e54f 100644
--- a/src/howitz/templates/components/row/expanded-row.html
+++ b/src/howitz/templates/components/row/expanded-row.html
@@ -1,7 +1,7 @@
 {% block content %}
 
     <tr
-            class="bg-gray-800 border-gray-600 hover:bg-gray-600 {{ 'checked' if is_selected }}"
+            class="bg-zinc-800 border-zinc-600 hover:bg-zinc-600 {{ 'checked' if is_selected }}"
             id="event-accordion-row-{{ id }}"
             hx-get="/events/{{ id }}/collapse_row"
             hx-trigger="dblclick"
diff --git a/src/howitz/templates/components/row/modified-event-row.html b/src/howitz/templates/components/row/modified-event-row.html
index 49dc1b62..b6e1899a 100644
--- a/src/howitz/templates/components/row/modified-event-row.html
+++ b/src/howitz/templates/components/row/modified-event-row.html
@@ -4,7 +4,7 @@
                            event_history=event.event_history, event_msgs=event.event_msgs,
                            is_selected=event.selected %}
         <tr
-                class="bg-gray-800 border-gray-600 hover:bg-gray-600 {{ 'checked' if is_selected }}"
+                class="bg-zinc-800 border-zinc-600 hover:bg-zinc-600 {{ 'checked' if is_selected }}"
                 id="event-accordion-row-{{ id }}"
                 hx-get="/events/{{ id }}/collapse_row"
                 hx-trigger="dblclick"
@@ -33,7 +33,7 @@
         <tr
                 id="event-details-row-{{ id }}"
                 hx-swap-oob="outerHTML"
-                class="border-b border-gray-700 hover:bg-gray-600"
+                class="border-b border-zinc-700 hover:bg-zinc-600"
         >
             {% include "/components/accordion/event-details-content.html" %}
         </tr>
@@ -41,7 +41,7 @@
 {% else %}
     {% with id=event.event.id, event=event.event, is_selected=event.selected %}
         <tr
-                class="border-b bg-gray-900 border-gray-700 hover:bg-gray-600 {{ 'checked' if is_selected }}"
+                class="border-b bg-zinc-950 border-zinc-700 hover:bg-zinc-600 {{ 'checked' if is_selected }}"
                 id="event-accordion-row-{{ id }}"
                 hx-get="/events/{{ id }}/expand_row"
                 hx-trigger="dblclick"
diff --git a/src/howitz/templates/components/row/table-row-skeleton.html b/src/howitz/templates/components/row/table-row-skeleton.html
index cf768c81..84e2e53c 100644
--- a/src/howitz/templates/components/row/table-row-skeleton.html
+++ b/src/howitz/templates/components/row/table-row-skeleton.html
@@ -1,10 +1,10 @@
 <tr
-        class="htmx-indicator animate-pulse border-b bg-gray-500"
+        class="htmx-indicator animate-pulse border-b bg-zinc-500"
 >
 
     {% for n in range(10) %}
     <td class="h-10 px-6 py-4">
-        <div class="h-2 bg-slate-700 rounded-full"></div>
+        <div class="h-2 bg-zinc-700 rounded-full"></div>
     </td>
     {% endfor %}
 
diff --git a/src/howitz/templates/components/table/events-table.html b/src/howitz/templates/components/table/events-table.html
index aa41fb8e..e257b552 100644
--- a/src/howitz/templates/components/table/events-table.html
+++ b/src/howitz/templates/components/table/events-table.html
@@ -1,22 +1,22 @@
 <table
-        class="border-collapse border border-slate-500 w-full text-sm text-left text-gray-400 table-auto"
+        class="border-collapse border border-zinc-500 w-full text-sm text-left text-zinc-400 table-auto"
         hx-get="/get_events"
         hx-swap="outerHTML"
         hx-target="#eventlist-list"
         hx-trigger="load"
 >
-    <thead class="sticky top-0 z-20 text-xs text-center uppercase bg-gray-700 text-gray-100">
-    <tr class="text-teal-100 text-nowrap">
-        <th scope="col" class="border border-slate-600 px-2 py-2"></th>
-        <th scope="col" class="border border-slate-600 px-2 py-2">#</th>
-        <th scope="col" class="border border-slate-600 px-2 py-2">OP-STATE</th>
-        <th scope="col" class="border border-slate-600 px-2 py-2">ADM-STATE</th>
-        <th scope="col" class="text-right border border-slate-600 px-2 py-2">AGE</th>
-        <th scope="col" class="text-right border border-slate-600 px-2 py-2">DOWNTIME</th>
-        <th scope="col" class="text-left border border-slate-600 px-2 py-2">ROUTER</th>
-        <th scope="col" class="text-left border border-slate-600 px-2 py-2">PORT</th>
-        <th scope="col" class="text-left border border-slate-600 px-2 py-2">DESCRIPTION</th>
-        <th scope="col" class="border border-slate-600 px-2 py-2"></th>
+    <thead class="sticky top-0 z-20 text-xs text-center uppercase bg-zinc-700 text-zinc-100">
+    <tr class="text-white text-nowrap">
+        <th scope="col" class="border border-zinc-600 px-2 py-2"></th>
+        <th scope="col" class="border border-zinc-600 px-2 py-2">#</th>
+        <th scope="col" class="border border-zinc-600 px-2 py-2">OP-STATE</th>
+        <th scope="col" class="border border-zinc-600 px-2 py-2">ADM-STATE</th>
+        <th scope="col" class="text-right border border-zinc-600 px-2 py-2">AGE</th>
+        <th scope="col" class="text-right border border-zinc-600 px-2 py-2">DOWNTIME</th>
+        <th scope="col" class="text-left border border-zinc-600 px-2 py-2">ROUTER</th>
+        <th scope="col" class="text-left border border-zinc-600 px-2 py-2">PORT</th>
+        <th scope="col" class="text-left border border-zinc-600 px-2 py-2">DESCRIPTION</th>
+        <th scope="col" class="border border-zinc-600 px-2 py-2"></th>
     </tr>
     </thead>
     <tbody
diff --git a/src/howitz/templates/components/toolbar/column-toggle-btn.html b/src/howitz/templates/components/toolbar/column-toggle-btn.html
index 927e6db7..02aca137 100644
--- a/src/howitz/templates/components/toolbar/column-toggle-btn.html
+++ b/src/howitz/templates/components/toolbar/column-toggle-btn.html
@@ -1,11 +1,11 @@
 <div class="relative flex flex-col items-center">
-    <button class="block bg-gray-600/90 hover:bg-gray-500 rounded-md m-1.5 size-9 focus:ring-2 focus:outline-none focus:ring-teal-300"
+    <button class="block bg-zinc-600/90 hover:bg-zinc-500 rounded-md m-1.5 size-9 focus:ring-2 focus:outline-none focus:ring-zinogreen-400"
             hx-on:mouseenter="htmx.removeClass(htmx.find('#toggle-popover'), 'invisible')"
             hx-on:mouseleave="htmx.addClass(htmx.find('#toggle-popover'), 'invisible')"
             hx-on:click="htmx.removeClass(htmx.find('#column-toggle-menu-dropdown'), 'invisible')"
             aria-describedby="toggle-popover"
     >
-        <svg class="fill-teal-300/90 hover:fill-teal-300 p-1.5 size-full"
+        <svg class="fill-zinogreen-400/90 hover:fill-zinogreen-400 p-1.5 size-full"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 576 512">
             <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
@@ -14,7 +14,7 @@
     </button>
 
     <p id="toggle-popover" role="tooltip"
-       class="absolute -top-4 h-fit z-40 invisible flow-root w-fit text-xs font-semibold text-nowrap text-teal-900 transition-opacity duration-300 bg-teal-300 rounded-md px-1 py-0.5"
+       class="absolute -top-4 h-fit z-40 invisible flow-root w-fit text-xs font-semibold text-nowrap text-zinogreen-950 transition-opacity duration-300 bg-zinogreen-400 rounded-md px-1 py-0.5"
     >
         Toggle columns
     </p>
diff --git a/src/howitz/templates/components/toolbar/table-filter-btn.html b/src/howitz/templates/components/toolbar/table-filter-btn.html
index 60f4c783..47bc2841 100644
--- a/src/howitz/templates/components/toolbar/table-filter-btn.html
+++ b/src/howitz/templates/components/toolbar/table-filter-btn.html
@@ -1,11 +1,11 @@
 <div class="relative flex flex-col items-center">
-    <button class="block bg-gray-600/90 hover:bg-gray-500 rounded-md m-1.5 size-9 focus:ring-2 focus:outline-none focus:ring-teal-300"
+    <button class="block bg-zinc-600/90 hover:bg-zinc-500 rounded-md m-1.5 size-9 focus:ring-2 focus:outline-none focus:ring-zinogreen-400"
             hx-on:mouseenter="htmx.removeClass(htmx.find('#filter-popover'), 'invisible')"
             hx-on:mouseleave="htmx.addClass(htmx.find('#filter-popover'), 'invisible')"
             hx-on:click="htmx.removeClass(htmx.find('#filter-menu-dropdown'), 'invisible')"
             aria-describedby="filter-popover"
     >
-        <svg class="fill-teal-300/90 hover:fill-teal-300 p-1.5 size-full"
+        <svg class="fill-zinogreen-400/90 hover:fill-zinogreen-400 p-1.5 size-full"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 512 512">
             <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
@@ -14,7 +14,7 @@
     </button>
 
     <p id="filter-popover" role="tooltip"
-       class="absolute -top-4 h-fit z-40 invisible flow-root w-fit text-xs font-semibold text-nowrap text-teal-900 transition-opacity duration-300 bg-teal-300 rounded-md px-1 py-0.5"
+       class="absolute -top-4 h-fit z-40 invisible flow-root w-fit text-xs font-semibold text-nowrap text-zinogreen-950 transition-opacity duration-300 bg-zinogreen-400 rounded-md px-1 py-0.5"
     >
         Filter events
     </p>
diff --git a/src/howitz/templates/components/toolbar/table-sort-btn.html b/src/howitz/templates/components/toolbar/table-sort-btn.html
index b0589f0f..46ed7fc3 100644
--- a/src/howitz/templates/components/toolbar/table-sort-btn.html
+++ b/src/howitz/templates/components/toolbar/table-sort-btn.html
@@ -1,5 +1,5 @@
 <div class="relative flex flex-col items-center">
-    <button class="block bg-gray-600/90 hover:bg-gray-500 rounded-md m-1.5 size-9 focus:ring-2 focus:outline-none focus:ring-teal-300"
+    <button class="block bg-zinc-600/90 hover:bg-zinc-500 rounded-md m-1.5 size-9 focus:ring-2 focus:outline-none focus:ring-zinogreen-400"
             hx-on:mouseenter="htmx.removeClass(htmx.find('#sort-popover'), 'invisible')"
             hx-on:mouseleave="htmx.addClass(htmx.find('#sort-popover'), 'invisible')"
             hx-on:click="htmx.removeClass(htmx.find('#sort-menu-dropdown'), 'invisible')"
@@ -9,7 +9,7 @@
             hx-trigger="click"
             aria-describedby="sort-popover"
     >
-        <svg class="fill-teal-300/90 hover:fill-teal-300 p-1.5 size-full"
+        <svg class="fill-zinogreen-400/90 hover:fill-zinogreen-400 p-1.5 size-full"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 576 512">
             <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
@@ -18,7 +18,7 @@
     </button>
 
     <p id="sort-popover" role="tooltip"
-       class="absolute -top-4 h-fit z-40 invisible flow-root w-fit text-xs font-semibold text-nowrap text-teal-900 transition-opacity duration-300 bg-teal-300 rounded-md px-1 py-0.5"
+       class="absolute -top-4 h-fit z-40 invisible flow-root w-fit text-xs font-semibold text-nowrap text-zinogreen-950 transition-opacity duration-300 bg-zinogreen-400 rounded-md px-1 py-0.5"
     >
         Sort events
     </p>
diff --git a/src/howitz/templates/includes/configs.html b/src/howitz/templates/includes/configs.html
index 713e64df..2e899ab8 100644
--- a/src/howitz/templates/includes/configs.html
+++ b/src/howitz/templates/includes/configs.html
@@ -2,3 +2,29 @@
 <meta name="htmx-config"
       content='{"defaultFocusScroll":"true", "useTemplateFragments":"true", "responseTargetUnsetsError":"false"}'>
 
+
+<!-- Tailwind CSS Config -->
+<script>
+    tailwind.config = {
+        theme: {
+            extend: {
+                colors: {
+                    zinogray: 'rgba(255, 255, 255, 0.4)',
+                    zinogreen: {
+                        50: '#ecffe5',
+                        100: '#d5ffc7',
+                        200: '#acff95',
+                        300: '#76ff57',
+                        400: '#4af626',
+                        500: '#27dc06',
+                        600: '#18b100',
+                        700: '#148605',
+                        800: '#16690b',
+                        900: '#14590e',
+                        950: '#043201',
+                    },
+                }
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/howitz/templates/includes/zino-logo.svg b/src/howitz/templates/includes/zino-logo.svg
index 02888069..515f48e0 100644
--- a/src/howitz/templates/includes/zino-logo.svg
+++ b/src/howitz/templates/includes/zino-logo.svg
@@ -1,10 +1,80 @@
-<svg
-        class="mx-auto h-10 w-auto fill-sky-50"
-        alt="Zino logo"
-        xmlns="http://www.w3.org/2000/svg"
-        height="1em"
-        viewBox="0 0 640 512"
->
-    <!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
-    <path d="M256 64H384v64H256V64zM240 0c-26.5 0-48 21.5-48 48v96c0 26.5 21.5 48 48 48h48v32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96v32H80c-26.5 0-48 21.5-48 48v96c0 26.5 21.5 48 48 48H240c26.5 0 48-21.5 48-48V368c0-26.5-21.5-48-48-48H192V288H448v32H400c-26.5 0-48 21.5-48 48v96c0 26.5 21.5 48 48 48H560c26.5 0 48-21.5 48-48V368c0-26.5-21.5-48-48-48H512V288h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H352V192h48c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48H240zM96 448V384H224v64H96zm320-64H544v64H416V384z"/>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg class="mx-auto h-{{ height if (height != '' and height is not none) else 'auto' }} w-auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 570.99 278.1">
+  <defs>
+    <style>
+      .cls-1 {
+        opacity: .4;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 16px;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke: #fff;
+      }
+
+      .cls-1, .cls-2, .cls-4 {
+        fill: #fff;
+      }
+
+      .cls-2 {
+        stroke-width: 3px;
+      }
+
+      .cls-2, .cls-3, .cls-5 {
+        stroke-miterlimit: 10;
+      }
+
+      .cls-3 {
+        fill: none;
+        opacity: .76;
+        stroke-width: 2px;
+      }
+
+      .cls-4 {
+        stroke-width: 0px;
+      }
+
+      .cls-5 {
+        fill: #4af626;
+        stroke: #4af626;
+        stroke-width: 4px;
+      }
+    </style>
+  </defs>
+  <g id="Layer_5" data-name="Layer 5">
+    <line class="cls-1" x1="358.11" y1="78.91" x2="358.11" y2="165.1"/>
+    <line class="cls-1" x1="307.59" y1="78.86" x2="307.59" y2="165.14"/>
+    <g>
+      <path class="cls-2" d="M175.38,80.59l-45.92,78.4h39.52c3.33,0,6.4,1.79,6.4,6.4s-3.07,6.4-6.4,6.4h-56.79v-8.06l45.79-78.66h-39.39c-3.33,0-6.4-1.79-6.4-6.39s3.07-6.4,6.4-6.4h56.79v8.31Z"/>
+      <path class="cls-2" d="M244.7,158.99h18.8c3.33,0,6.39,1.79,6.39,6.4s-3.07,6.4-6.39,6.4h-50.39c-3.33,0-6.39-1.79-6.39-6.4s3.07-6.4,6.39-6.4h18.8v-73.93h-18.8c-3.33,0-6.39-1.79-6.39-6.39s3.07-6.4,6.39-6.4h50.39c3.33,0,6.39,1.79,6.39,6.4s-3.07,6.39-6.39,6.39h-18.8v73.93Z"/>
+      <path class="cls-5" d="M302.77,83.28c-.77-1.41-1.54-2.94-1.54-4.6,0-3.33,3.07-6.4,6.4-6.4s4.73,2.3,6.27,4.86l47.83,81.98c1.28,2.05,2.69,4.22,2.69,6.65,0,3.33-3.07,6.01-6.27,6.01s-4.73-1.79-6.27-4.48l-49.11-84.03Z"/>
+      <path class="cls-2" d="M446.14,72.28c7.04,0,12.79,5.76,12.79,12.79v73.93c0,7.16-5.5,12.79-12.79,12.79h-37.6c-7.29,0-12.79-5.63-12.79-12.79v-73.93c0-7.03,5.75-12.79,12.79-12.79h37.6ZM446.14,158.99v-73.93h-37.6v73.93h37.6Z"/>
+    </g>
+    <g id="outlines_byline" data-name="outlines byline">
+      <path class="cls-4" d="M113.26,199.73v6.49c0,.77-.16,1.53-1.12,1.53s-1.12-.77-1.12-1.53v-9.35c0-.81.09-1.65,1.12-1.65s1.12.84,1.12,1.63v.3l1.81-1.19c.58-.37,1.21-.74,1.93-.74h1.65c.86,0,1.4.23,2.07.81,1,.86.95,1.81,1,3.02l.23,7.02c.02.79-.09,1.67-1.09,1.67-.91,0-1.09-.77-1.12-1.51l-.23-6.88c-.05-1.37-.16-1.91-1.51-1.91h-.74c-.23,0-.47.07-.7.21l-3.3,2.07Z"/>
+      <path class="cls-4" d="M132.02,207.75c-.93,0-1.3,0-2-.6l-.95-.84c-.88-.79-1.14-1.3-1.14-2.51v-4.3c0-1.19.16-1.88,1.09-2.67l.79-.67c1.05-.91,1.56-.93,2.46-.93h2.05c1.09,0,1.6.12,2.46.81l.91.72c1.02.81,1.16,1.67,1.16,2.91v1.79c0,1.28-.21,1.65-1.53,1.65h-7.16v.74c0,.21.16.49.33.65l.56.6c.3.33.74.42,1.49.42h4.79c.74,0,1.53.16,1.53,1.12s-.88,1.12-1.53,1.12h-5.3ZM130.16,200.87h6.46v-1.35c0-.42.02-.77-.28-1.05l-.86-.74c-.28-.26-.72-.28-1.07-.28h-1.88c-.42,0-.77,0-1.14.26l-.77.56c-.28.21-.47.37-.47,1.02v1.58Z"/>
+      <path class="cls-4" d="M149.33,203.54c0,1.26-.05,1.98,1.49,1.98h1.14c.91,0,1.33-.07,1.56-.98.14-.54.56-.91,1.12-.91.63,0,1.14.49,1.14,1.12s-.4,1.42-.77,1.86c-.81.98-1.88,1.14-3.07,1.14h-1.14c-1.12,0-2.09-.26-2.88-1.12-.86-.95-.81-1.91-.81-3.12v-6.07h-.72c-.65,0-1.53-.14-1.53-1.12s.79-1.12,1.53-1.12h.72v-2.28c0-.77.16-1.53,1.12-1.53s1.12.77,1.12,1.53v2.28h3.74c.74,0,1.54.16,1.54,1.12s-.88,1.12-1.54,1.12h-3.74v6.09Z"/>
+      <path class="cls-4" d="M168.32,202.59l1.21,2.07.7-2.07.23-5.77c.02-.77.16-1.6,1.12-1.6s1.12.84,1.09,1.6l-.23,6.21-1.09,3.3c-.23.67-.35,1.42-1.14,1.42h-.86c-.4,0-.72-.42-.93-.72l-1.21-1.81-1.21,1.81c-.21.3-.54.72-.93.72h-.86c-.79,0-.91-.74-1.14-1.42l-1.09-3.3-.23-6.21c-.02-.77.12-1.6,1.09-1.6s1.09.84,1.12,1.6l.23,5.77.7,2.07,1.21-2.07v-2.05c0-.77.16-1.56,1.12-1.56s1.12.79,1.12,1.56v2.05Z"/>
+      <path class="cls-4" d="M178.65,199.38c0-1.49.3-2,1.42-2.91,1.09-.91,1.6-1.26,3.16-1.26h1.77c1.56,0,2.07.35,3.16,1.26,1.12.91,1.42,1.42,1.42,2.91v4.21c0,1.47-.37,2.02-1.53,3-1.16.98-1.63,1.16-3.05,1.16h-1.77c-1.42,0-1.88-.19-3.05-1.16-1.16-.98-1.54-1.53-1.54-3v-4.21ZM180.88,203.59c0,.47.16.77.81,1.33.49.42.84.6,1.54.6h1.77c.7,0,1.05-.19,1.53-.6.65-.56.81-.86.81-1.33v-4.21c0-.47-.16-.77-.81-1.33-.49-.42-.84-.6-1.53-.6h-1.77c-.7,0-1.05.19-1.54.6-.65.56-.81.86-.81,1.33v4.21Z"/>
+      <path class="cls-4" d="M195.55,196.87c0-.81.09-1.65,1.12-1.65.88,0,1.12.74,1.12,1.49v.91l1.74-1.44c.63-.51,1.28-.95,1.98-.95h1.79c.86,0,1.58.28,2.19.88.74.74,1,1.51,1,2.53,0,.77-.14,1.56-1.09,1.56-.81,0-1.14-.65-1.14-1.37,0-.37,0-.65-.23-.98-.28-.4-.81-.4-1.35-.4h-.65c-.42,0-.72.21-1.12.54l-3.12,2.58v5.65c0,.77-.16,1.53-1.12,1.53s-1.12-.77-1.12-1.53v-9.35Z"/>
+      <path class="cls-4" d="M219.81,196.12c.4-.35.95-.91,1.49-.91.63,0,1.12.51,1.12,1.14,0,.53-.35.79-.74,1.12l-4.33,3.58,5.26,4.37c.42.35.79.6.79,1.19,0,.63-.49,1.14-1.12,1.14-.44,0-.72-.28-1.05-.53l-5.6-4.67-.93.84v2.84c0,.77-.16,1.53-1.12,1.53s-1.12-.77-1.12-1.53v-14.07c0-.77.16-1.54,1.12-1.54s1.12.77,1.12,1.54v8.28l5.12-4.3Z"/>
+      <path class="cls-4" d="M250.09,197.45c-.46,0-1.26-.09-1.26.63,0,.37.28.51.61.65l5.58,2.53c1.44.65,2.19,1.56,2.19,3.16,0,2.26-1.53,3.33-3.67,3.33h-3.44c-1.16,0-1.95-.05-2.79-.7-.42-.33-1.02-.74-1.02-1.3,0-.63.54-1.12,1.16-1.12.35,0,.6.12.86.4.4.44,1.09.49,1.79.49h3.02c.79,0,1.86.07,1.86-1.23,0-.54-.65-.88-1.16-1.12l-5.26-2.4c-1.23-.56-1.95-1.28-1.95-2.72,0-1.77,1.4-2.84,3.07-2.84h3.81c1.23,0,1.74.07,2.58.77.42.35.88.63.88,1.26s-.53,1.12-1.14,1.12c-.42,0-.67-.16-.95-.47-.37-.4-.77-.44-1.37-.44h-3.4Z"/>
+      <path class="cls-4" d="M267.67,203.54c0,1.26-.05,1.98,1.49,1.98h1.14c.91,0,1.33-.07,1.56-.98.14-.54.56-.91,1.12-.91.63,0,1.14.49,1.14,1.12s-.39,1.42-.77,1.86c-.81.98-1.88,1.14-3.07,1.14h-1.14c-1.12,0-2.09-.26-2.88-1.12-.86-.95-.81-1.91-.81-3.12v-6.07h-.72c-.65,0-1.54-.14-1.54-1.12s.79-1.12,1.54-1.12h.72v-2.28c0-.77.16-1.53,1.12-1.53s1.12.77,1.12,1.53v2.28h3.74c.74,0,1.54.16,1.54,1.12s-.88,1.12-1.54,1.12h-3.74v6.09Z"/>
+      <path class="cls-4" d="M283.83,197.45c-.65,0-1.53-.14-1.53-1.12s.79-1.12,1.53-1.12h3.07c1.16,0,2,.12,2.88,1,.86.86.98,1.53,1,2.65l.23,7.58c.02.65-.3,1.3-1.05,1.3-.58,0-1.16-.49-1.14-1.12l-1.54.79c-.63.33-.65.33-1.37.33h-2.14c-1,0-1.72-.12-2.54-.79-.93-.77-1.16-1.58-1.16-2.74v-.98c0-1.07.26-1.74,1.09-2.49.77-.67,1.63-.84,2.6-.84h4.79v-.51c0-1.67-.37-1.95-1.98-1.95h-2.77ZM283.8,202.15c-.6,0-1.49.16-1.49.98v1.49c0,.74.91.91,1.44.91h2.46l2.46-1.28v-.49c0-1.23-.35-1.6-1.58-1.6h-3.3Z"/>
+      <path class="cls-4" d="M301.48,203.54c0,1.26-.05,1.98,1.49,1.98h1.14c.91,0,1.33-.07,1.56-.98.14-.54.56-.91,1.12-.91.63,0,1.14.49,1.14,1.12s-.4,1.42-.77,1.86c-.81.98-1.88,1.14-3.07,1.14h-1.14c-1.12,0-2.09-.26-2.88-1.12-.86-.95-.81-1.91-.81-3.12v-6.07h-.72c-.65,0-1.54-.14-1.54-1.12s.79-1.12,1.54-1.12h.72v-2.28c0-.77.16-1.53,1.12-1.53s1.12.77,1.12,1.53v2.28h3.74c.74,0,1.54.16,1.54,1.12s-.88,1.12-1.54,1.12h-3.74v6.09Z"/>
+      <path class="cls-4" d="M317.99,207.75c-.93,0-1.3,0-2-.6l-.95-.84c-.88-.79-1.14-1.3-1.14-2.51v-4.3c0-1.19.16-1.88,1.09-2.67l.79-.67c1.05-.91,1.56-.93,2.46-.93h2.05c1.09,0,1.61.12,2.46.81l.91.72c1.02.81,1.16,1.67,1.16,2.91v1.79c0,1.28-.21,1.65-1.54,1.65h-7.16v.74c0,.21.16.49.33.65l.56.6c.3.33.74.42,1.49.42h4.79c.74,0,1.54.16,1.54,1.12s-.88,1.12-1.54,1.12h-5.3ZM316.13,200.87h6.46v-1.35c0-.42.02-.77-.28-1.05l-.86-.74c-.28-.26-.72-.28-1.07-.28h-1.88c-.42,0-.77,0-1.14.26l-.77.56c-.28.21-.46.37-.46,1.02v1.58Z"/>
+      <path class="cls-4" d="M354.29,198.96v7.26c0,.77-.16,1.53-1.12,1.53s-1.12-.77-1.12-1.53v-7.46c0-.37.05-1.07-.54-1.07-.26,0-.42.21-.6.37l-.98.91v7.26c0,.77-.16,1.53-1.12,1.53s-1.12-.77-1.12-1.53v-9.42c0-.79.21-1.58,1.16-1.58.56,0,.93.37,1.07.88l.19-.14c.58-.44.93-.74,1.7-.74.86,0,1.54.42,2.05,1.12l.19-.19c.7-.7.98-.93,1.95-.93.74,0,1.42.33,1.86.91.56.72.51,1.37.54,2.23l.23,7.72c.02.79-.09,1.67-1.09,1.67-.91,0-1.09-.77-1.12-1.51l-.23-7.37c-.02-.4.09-1.19-.51-1.19-.33,0-.74.56-.93.77l-.46.51Z"/>
+      <path class="cls-4" d="M364.61,199.38c0-1.49.3-2,1.42-2.91,1.09-.91,1.6-1.26,3.16-1.26h1.77c1.56,0,2.07.35,3.16,1.26,1.12.91,1.42,1.42,1.42,2.91v4.21c0,1.47-.37,2.02-1.53,3-1.16.98-1.63,1.16-3.05,1.16h-1.77c-1.42,0-1.88-.19-3.05-1.16-1.16-.98-1.53-1.53-1.53-3v-4.21ZM366.85,203.59c0,.47.16.77.81,1.33.49.42.84.6,1.54.6h1.77c.7,0,1.05-.19,1.54-.6.65-.56.81-.86.81-1.33v-4.21c0-.47-.16-.77-.81-1.33-.49-.42-.84-.6-1.54-.6h-1.77c-.7,0-1.05.19-1.54.6-.65.56-.81.86-.81,1.33v4.21Z"/>
+      <path class="cls-4" d="M383.75,199.73v6.49c0,.77-.16,1.53-1.12,1.53s-1.12-.77-1.12-1.53v-9.35c0-.81.09-1.65,1.12-1.65s1.12.84,1.12,1.63v.3l1.81-1.19c.58-.37,1.21-.74,1.93-.74h1.65c.86,0,1.4.23,2.07.81,1,.86.95,1.81,1,3.02l.23,7.02c.02.79-.09,1.67-1.09,1.67-.91,0-1.09-.77-1.12-1.51l-.23-6.88c-.05-1.37-.16-1.91-1.51-1.91h-.74c-.23,0-.46.07-.7.21l-3.3,2.07Z"/>
+      <path class="cls-4" d="M405.05,205.52h1.67c.74,0,1.53.16,1.53,1.12s-.88,1.12-1.53,1.12h-5.67c-.65,0-1.54-.14-1.54-1.12s.79-1.12,1.54-1.12h1.77v-8.07h-1.77c-.65,0-1.54-.14-1.54-1.12s.79-1.12,1.54-1.12h2.35c1.28,0,1.65.23,1.65,1.56v8.74ZM401.68,190.7c0-.79.44-1.05,1.05-1.05h1.28c.6,0,1.05.26,1.05,1.05v1.07c0,.79-.44,1.05-1.05,1.05h-1.28c-.6,0-1.05-.26-1.05-1.05v-1.07Z"/>
+      <path class="cls-4" d="M419.82,203.54c0,1.26-.05,1.98,1.49,1.98h1.14c.91,0,1.33-.07,1.56-.98.14-.54.56-.91,1.12-.91.63,0,1.14.49,1.14,1.12s-.4,1.42-.77,1.86c-.81.98-1.88,1.14-3.07,1.14h-1.14c-1.12,0-2.09-.26-2.88-1.12-.86-.95-.81-1.91-.81-3.12v-6.07h-.72c-.65,0-1.54-.14-1.54-1.12s.79-1.12,1.54-1.12h.72v-2.28c0-.77.16-1.53,1.12-1.53s1.12.77,1.12,1.53v2.28h3.74c.74,0,1.54.16,1.54,1.12s-.88,1.12-1.54,1.12h-3.74v6.09Z"/>
+      <path class="cls-4" d="M432.24,199.38c0-1.49.3-2,1.42-2.91,1.09-.91,1.6-1.26,3.16-1.26h1.77c1.56,0,2.07.35,3.16,1.26,1.12.91,1.42,1.42,1.42,2.91v4.21c0,1.47-.37,2.02-1.54,3-1.16.98-1.63,1.16-3.05,1.16h-1.77c-1.42,0-1.88-.19-3.05-1.16-1.16-.98-1.53-1.53-1.53-3v-4.21ZM434.47,203.59c0,.47.16.77.81,1.33.49.42.84.6,1.53.6h1.77c.7,0,1.05-.19,1.54-.6.65-.56.81-.86.81-1.33v-4.21c0-.47-.16-.77-.81-1.33-.49-.42-.84-.6-1.54-.6h-1.77c-.7,0-1.05.19-1.53.6-.65.56-.81.86-.81,1.33v4.21Z"/>
+      <path class="cls-4" d="M449.14,196.87c0-.81.09-1.65,1.12-1.65.88,0,1.12.74,1.12,1.49v.91l1.74-1.44c.63-.51,1.28-.95,1.98-.95h1.79c.86,0,1.58.28,2.19.88.74.74,1,1.51,1,2.53,0,.77-.14,1.56-1.09,1.56-.81,0-1.14-.65-1.14-1.37,0-.37,0-.65-.23-.98-.28-.4-.81-.4-1.35-.4h-.65c-.42,0-.72.21-1.12.54l-3.12,2.58v5.65c0,.77-.16,1.53-1.12,1.53s-1.12-.77-1.12-1.53v-9.35Z"/>
+    </g>
+  </g>
+  <g id="Layer_4" data-name="Layer 4">
+    <path class="cls-3" d="M99.94,122.03h-28.24v79.43h28.24"/>
+    <path class="cls-3" d="M471.01,201.46h28.24c0-26.48,0-52.95,0-79.43-9.41,0-18.82,0-28.24,0"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/howitz/templates/layouts/base.html b/src/howitz/templates/layouts/base.html
index f606ed0e..2287afad 100644
--- a/src/howitz/templates/layouts/base.html
+++ b/src/howitz/templates/layouts/base.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html
         lang="en"
-        class="h-full bg-slate-900"
+        class="h-full bg-black"
 >
 <head>
     <title>Howitz | {% block page_title %}{% endblock %} </title>
@@ -16,10 +16,10 @@
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
 
-    {% include "includes/configs.html" %}
-
     {% include "includes/scripts.html" %}
 
+    {% include "includes/configs.html" %}
+
     {% include "includes/style.html" %}
 
 </head>
diff --git a/src/howitz/templates/responses/502.html b/src/howitz/templates/responses/502.html
index bbb53108..08b5a516 100644
--- a/src/howitz/templates/responses/502.html
+++ b/src/howitz/templates/responses/502.html
@@ -1,11 +1,11 @@
 {% block content %}
     <main
-            class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6 bg-slate-900 text-sky-200/80"
+            class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6 bg-zinc-950 text-zinogreen-200/80"
     >
         <section class="mx-auto max-w-screen-sm text-center">
             <h1 class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl">502</h1>
             <p class="mb-4 text-3xl tracking-tight font-bold md:text-4xl">Bad Gateway</p>
-            <p class="mb-4 text-lg font-light text-teal-300">{{ err_msg }}</p>
+            <p class="mb-4 text-lg font-light text-zinogreen-300">{{ err_msg }}</p>
         </section>
     </main>
 {% endblock %}
diff --git a/src/howitz/templates/responses/checked-box.html b/src/howitz/templates/responses/checked-box.html
index e4aa9e3e..95873224 100644
--- a/src/howitz/templates/responses/checked-box.html
+++ b/src/howitz/templates/responses/checked-box.html
@@ -2,7 +2,7 @@
      class="flex items-center">
     <input id="unselect-event-{{ id }}"
            type="checkbox"
-           class="w-4 h-4 text-white rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-500"
+           class="w-4 h-4 text-white rounded focus:ring-zinogreen-600 ring-offset-zinc-800 focus:ring-offset-zinc-800 focus:ring-2 bg-zinc-700 border-zinc-500"
            checked
            hx-post="/event/{{ id }}/unselect"
            hx-trigger='click from:#unselect-event-{{ id }}, dblclick from:#unselect-event-{{ id }} consume'
diff --git a/src/howitz/templates/responses/collapse-error-alert.html b/src/howitz/templates/responses/collapse-error-alert.html
index 7719c2e4..1c22390a 100644
--- a/src/howitz/templates/responses/collapse-error-alert.html
+++ b/src/howitz/templates/responses/collapse-error-alert.html
@@ -4,7 +4,7 @@
         hx-get="/alert/{{ alert_id }}/show-maximized-error"
         hx-target="#error-msg-{{ alert_id }}-minimized"
         hx-swap="afterend"
-        class="ms-auto -my-1.5 bg-opacity-20 bg-white text-gray-400 hover:text-gray-100 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-orange-400/70 inline-flex items-center justify-center h-8 w-8"
+        class="ms-auto -my-1.5 bg-opacity-20 bg-white text-zinc-400 hover:text-zinc-100 rounded-lg focus:ring-2 focus:ring-zinc-300 p-1.5 hover:bg-orange-400/70 inline-flex items-center justify-center h-8 w-8"
         aria-label="Expand alert">
     <span class="sr-only">Expand alert</span>
     {% include "/components/popups/alerts/error/maximize-icon.svg" %}
diff --git a/src/howitz/templates/responses/collapse-row.html b/src/howitz/templates/responses/collapse-row.html
index a0ce6faf..6a2f3fe1 100644
--- a/src/howitz/templates/responses/collapse-row.html
+++ b/src/howitz/templates/responses/collapse-row.html
@@ -4,7 +4,7 @@
 
 <tr
         id="event-details-row-{{ id }}"
-        class="border-b bg-gray-900 border-gray-700 hover:bg-gray-600"
+        class="border-b bg-zinc-950 border-zinc-700 hover:bg-zinc-600"
 
 >
 </tr>
\ No newline at end of file
diff --git a/src/howitz/templates/responses/expand-error-alert.html b/src/howitz/templates/responses/expand-error-alert.html
index d5a09cd9..f4748780 100644
--- a/src/howitz/templates/responses/expand-error-alert.html
+++ b/src/howitz/templates/responses/expand-error-alert.html
@@ -12,7 +12,7 @@
         hx-get="/alert/{{ alert_id }}/show-minimized-error"
         hx-target="#error-msg-{{ alert_id }}-maximized"
         hx-swap="delete"
-        class="ms-auto -my-1.5 bg-opacity-20 bg-white text-gray-400 hover:text-gray-100 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-orange-400/70 inline-flex items-center justify-center h-8 w-8"
+        class="ms-auto -my-1.5 bg-opacity-20 bg-white text-zinc-400 hover:text-zinc-100 rounded-lg focus:ring-2 focus:ring-zinc-300 p-1.5 hover:bg-orange-400/70 inline-flex items-center justify-center h-8 w-8"
         aria-label="Collapse alert">
     <span class="sr-only">Collapse alert</span>
     {% include "/components/popups/alerts/error/minimize-icon.svg" %}
diff --git a/src/howitz/templates/responses/unchecked-box.html b/src/howitz/templates/responses/unchecked-box.html
index 70747c0e..43354c72 100644
--- a/src/howitz/templates/responses/unchecked-box.html
+++ b/src/howitz/templates/responses/unchecked-box.html
@@ -1,7 +1,7 @@
 <div id="unchecked-box-{{ id }}" class="flex items-center">
     <input id="select-event-{{ id }}"
            type="checkbox"
-           class="w-4 h-4 rounded focus:ring-blue-600 ring-offset-gray-800 focus:ring-offset-gray-800 focus:ring-2 bg-gray-700 border-gray-500"
+           class="w-4 h-4 rounded focus:ring-zinogreen-600 ring-offset-zinc-800 focus:ring-offset-zinc-800 focus:ring-2 bg-zinc-700 border-zinc-500"
            hx-post="/event/{{ id }}/select"
            hx-trigger='click from:#select-event-{{ id }}, dblclick from:#select-event-{{ id }} consume'
            hx-target="closest div"
diff --git a/src/howitz/templates/responses/update-event-response.html b/src/howitz/templates/responses/update-event-response.html
index b1bb2062..489a8848 100644
--- a/src/howitz/templates/responses/update-event-response.html
+++ b/src/howitz/templates/responses/update-event-response.html
@@ -1,5 +1,5 @@
 <tr
-        class="bg-gray-800 border-gray-600 hover:bg-gray-600"
+        class="bg-zinc-800 border-zinc-600 hover:bg-zinc-600"
         id="event-accordion-row-{{ id }}"
         hx-get="/events/{{ id }}/collapse_row"
         hx-trigger="dblclick"
@@ -34,7 +34,7 @@
 <tr
         id="event-details-row-{{ id }}"
         hx-swap-oob="outerHTML"
-        class="border-b bg-gray-900 border-gray-700 hover:bg-gray-600"
+        class="border-b bg-zinc-950 border-zinc-700 hover:bg-zinc-600"
 
 >
     {% include "/components/accordion/event-details-content.html" %}
diff --git a/src/howitz/templates/views/login.html b/src/howitz/templates/views/login.html
index 93085fd9..2dab218d 100644
--- a/src/howitz/templates/views/login.html
+++ b/src/howitz/templates/views/login.html
@@ -10,12 +10,14 @@
 <h1 class="sr-only">Login page</h1>
 <main>
 
-    <div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8 shadow-2xl shadow-sky-400/50">
+    <div class="flex min-h-full flex-col justify-center px-6 py-4 lg:px-8 shadow-2xl shadow-zinogray">
         <div class="sm:mx-auto sm:w-full sm:max-w-sm ">
 
-            {% include "/includes/zino-logo.svg"%}
+            {% with height='40' %}
+                {% include "/includes/zino-logo.svg" %}
+            {% endwith %}
 
-            <h2 class="mt-8 text-center text-2xl font-bold leading-9 tracking-tight text-sky-50">Sign in to Zino</h2>
+            <h2 class="text-center text-2xl font-bold leading-9 tracking-tight text-white">Sign in to Zino</h2>
         </div>