From 253657280b4191e11e5a7051d7b3b691e531cee1 Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Tue, 23 Jun 2026 12:26:57 -0500
Subject: [PATCH] Revert "refactor: apply custom color palette across entire
 codebase"

This reverts commit 5a7cdc7138f5db0360d86e014b49dfa371ffe11e.
---
 lib/towerops_web/components/consent_prompt.ex |   26 +-
 lib/towerops_web/components/cookie_consent.ex |   10 +-
 .../components/core_components.ex             |  120 +-
 lib/towerops_web/components/layouts.ex        |  150 +-
 .../components/layouts/root.html.heex         |    2 +-
 .../components/marketing_layouts.ex           |    2 +-
 lib/towerops_web/components/skeletons.ex      |   57 +-
 .../controllers/api_docs_html/index.html.heex | 1226 +++++++-------
 .../controllers/error_html/404.html.heex      |    6 +-
 .../controllers/error_html/500.html.heex      |    6 +-
 .../graphql_docs_html/index.html.heex         |  184 +--
 .../controllers/page_html/home.html.heex      |   93 +-
 .../controllers/page_html/privacy.html.heex   |   92 +-
 .../controllers/page_html/terms.html.heex     |  158 +-
 .../user_registration_html/new.html.heex      |   54 +-
 .../user_reset_password_html/new.html.heex    |    2 +-
 .../user_session_html/confirm.html.heex       |    2 +-
 .../user_session_html/new.html.heex           |   42 +-
 .../user_session_html/totp.html.heex          |    4 +-
 .../user_settings_html/edit.html.heex         |   28 +-
 .../user_sudo_html/verify.html.heex           |    4 +-
 .../live/account_live/activity.ex             |   48 +-
 lib/towerops_web/live/account_live/my_data.ex |  260 ++-
 .../live/account_live/totp_enrollment.ex      |   80 +-
 lib/towerops_web/live/activity_feed_live.ex   |   42 +-
 .../live/activity_feed_live.html.heex         |   68 +-
 .../live/admin/agent_live/index.html.heex     |   34 +-
 .../live/admin/audit_live/index.ex            |  120 +-
 .../live/admin/dashboard_live.html.heex       |   72 +-
 .../live/admin/monitoring_live.ex             |    6 +-
 .../live/admin/monitoring_live.html.heex      |  166 +-
 .../live/admin/org_live/index.html.heex       |   41 +-
 .../live/admin/security_live/index.html.heex  |   48 +-
 .../live/admin/user_live/index.html.heex      |    8 +-
 .../live/agent_live/edit.html.heex            |   20 +-
 lib/towerops_web/live/agent_live/helpers.ex   |   12 +-
 .../live/agent_live/index.html.heex           |  107 +-
 lib/towerops_web/live/agent_live/show.ex      |    6 +-
 .../live/agent_live/show.html.heex            |  152 +-
 lib/towerops_web/live/alert_live/index.ex     |    8 +-
 .../live/alert_live/index.html.heex           |  161 +-
 .../live/check_live/form_component.ex         |   24 +-
 .../components/global_search_component.ex     |   26 +-
 lib/towerops_web/live/config_timeline_live.ex |    4 +-
 .../live/coverage_live/form.html.heex         |   35 +-
 lib/towerops_web/live/coverage_live/index.ex  |   12 +-
 .../live/coverage_live/index.html.heex        |   64 +-
 .../live/coverage_live/map.html.heex          |   84 +-
 lib/towerops_web/live/coverage_live/show.ex   |   16 +-
 .../live/coverage_live/show.html.heex         |  105 +-
 lib/towerops_web/live/dashboard_live.ex       |   31 +-
 .../live/dashboard_live.html.heex             |  378 ++---
 .../live/device_live/form.html.heex           |  120 +-
 .../live/device_live/helpers/formatters.ex    |   17 +-
 lib/towerops_web/live/device_live/index.ex    |   34 +-
 .../live/device_live/index.html.heex          |  184 +--
 lib/towerops_web/live/device_live/show.ex     |   16 +-
 .../live/device_live/show.html.heex           | 1448 ++++++++---------
 .../escalation_policy_live/form.html.heex     |   14 +-
 .../escalation_policy_live/index.html.heex    |   32 +-
 .../escalation_policy_live/show.html.heex     |   70 +-
 .../live/graph_live/show.html.heex            |   36 +-
 lib/towerops_web/live/help_live/index.ex      |  984 ++++++-----
 lib/towerops_web/live/insights_live/index.ex  |   19 +-
 .../live/insights_live/index.html.heex        |  188 +--
 .../live/maintenance_live/form.html.heex      |   32 +-
 .../live/maintenance_live/index.html.heex     |   64 +-
 .../live/maintenance_live/show.html.heex      |   42 +-
 .../live/map_live/index.html.heex             |   73 +-
 .../mikrotik_backup_live/compare.html.heex    |   77 +-
 lib/towerops_web/live/mobile_qr_live.ex       |   62 +-
 .../live/network_map_live.html.heex           |  246 ++-
 .../live/onboarding_live.html.heex            |   93 +-
 .../live/org/gaiia_mapping_live.html.heex     |  122 +-
 .../org/gaiia_reconciliation_live.html.heex   |  234 ++-
 .../live/org/integrations_live.html.heex      |  173 +-
 .../live/org/preseem_devices_live.ex          |    4 +-
 .../live/org/preseem_devices_live.html.heex   |   97 +-
 .../live/org/preseem_insights_live.ex         |    8 +-
 .../live/org/preseem_insights_live.html.heex  |   91 +-
 .../live/org/settings_live.html.heex          |  290 ++--
 .../live/org_live/index.html.heex             |   15 +-
 lib/towerops_web/live/reports_live.ex         |    9 +-
 lib/towerops_web/live/reports_live.html.heex  |   80 +-
 lib/towerops_web/live/rf_link_health_live.ex  |   31 +-
 .../live/rf_link_health_live.html.heex        |  133 +-
 .../live/schedule_live/form.html.heex         |    6 +-
 .../live/schedule_live/index.html.heex        |   88 +-
 .../live/schedule_live/show.html.heex         |  162 +-
 .../live/site_live/form.html.heex             |  109 +-
 lib/towerops_web/live/site_live/index.ex      |   25 +-
 .../live/site_live/index.html.heex            |   82 +-
 lib/towerops_web/live/site_live/show.ex       |   47 +-
 .../live/site_live/show.html.heex             |  200 ++-
 lib/towerops_web/live/status_page_live.ex     |   20 +-
 .../live/status_page_live.html.heex           |   50 +-
 lib/towerops_web/live/trace_live/index.ex     |   57 +-
 .../live/trace_live/index.html.heex           |  213 ++-
 .../live/user_registration_live.ex            |   32 +-
 .../live/user_reset_password_live.ex          |   10 +-
 .../live/user_settings_live.html.heex         |  515 +++---
 .../live/weathermap_live.html.heex            |  234 ++-
 .../config_timeline_live_helpers_test.exs     |   13 +-
 .../live/site_live/index_helpers_test.exs     |   42 +-
 104 files changed, 5476 insertions(+), 6073 deletions(-)

diff --git a/lib/towerops_web/components/consent_prompt.ex b/lib/towerops_web/components/consent_prompt.ex
index 1931af85..29c8a7eb 100644
--- a/lib/towerops_web/components/consent_prompt.ex
+++ b/lib/towerops_web/components/consent_prompt.ex
@@ -25,27 +25,27 @@ defmodule ToweropsWeb.Components.ConsentPrompt do
       >
         <div class="flex min-h-screen items-center justify-center p-4">
           <!-- Backdrop -->
-          <div class="fixed inset-0 bg-cool-steel-500 dark:bg-cool-steel-900 bg-opacity-75 dark:bg-opacity-80 transition-opacity">
+          <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-80 transition-opacity">
           </div>
           
     <!-- Modal panel -->
-          <div class="relative transform overflow-hidden rounded-lg bg-white dark:bg-cool-steel-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
+          <div class="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
             <div class="sm:flex sm:items-start">
-              <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-cerulean-100 dark:bg-cerulean-900 sm:mx-0 sm:h-10 sm:w-10">
+              <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900 sm:mx-0 sm:h-10 sm:w-10">
                 <.icon
                   name="hero-information-circle"
-                  class="h-6 w-6 text-cerulean-600 dark:text-cerulean-400"
+                  class="h-6 w-6 text-blue-600 dark:text-blue-400"
                 />
               </div>
               <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left w-full">
                 <h3
-                  class="text-lg font-semibold leading-6 text-cool-steel-900 dark:text-white"
+                  class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"
                   id="consent-modal-title"
                 >
                   {gettext("Updated Policies - Action Required")}
                 </h3>
                 <div class="mt-4 space-y-4">
-                  <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <p class="text-sm text-gray-600 dark:text-gray-400">
                     {gettext(
                       "We've updated our policies. Please review and accept the changes to continue using Towerops."
                     )}
@@ -62,31 +62,31 @@ defmodule ToweropsWeb.Components.ConsentPrompt do
                             phx-click="toggle_consent"
                             phx-value-policy={policy_type}
                             required
-                            class="h-4 w-4 rounded border-zinc-300 text-cerulean-600 focus:ring-cerulean-500 dark:border-zinc-600 dark:bg-zinc-800 dark:checked:bg-cerulean-500 dark:checked:border-cerulean-500"
+                            class="h-4 w-4 rounded border-zinc-300 text-blue-600 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:checked:bg-blue-500 dark:checked:border-blue-500"
                           />
                         </div>
                         <div class="ml-3 text-sm">
                           <label
                             for={"consent-#{policy_type}"}
-                            class="text-cool-steel-700 dark:text-cool-steel-300"
+                            class="text-gray-700 dark:text-gray-300"
                           >
                             {gettext("I agree to the updated")}
                             <.link
                               href={policy_link(policy_type)}
                               target="_blank"
-                              class="font-medium text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                              class="font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
                             >
                               {policy_name(policy_type)}
                             </.link>
-                            <span class="text-sweet-salmon-600 dark:text-sweet-salmon-400">*</span>
+                            <span class="text-red-600 dark:text-red-400">*</span>
                           </label>
                         </div>
                       </div>
                     <% end %>
                   </div>
 
-                  <div class="mt-4 pt-4 border-t border-cool-steel-200 dark:border-cool-steel-700">
-                    <p class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                  <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+                    <p class="text-xs text-gray-500 dark:text-gray-400">
                       {gettext(
                         "By accepting, you acknowledge that you have read and agree to the updated policies. You can review your consent history at any time from your account settings."
                       )}
@@ -100,7 +100,7 @@ defmodule ToweropsWeb.Components.ConsentPrompt do
                 type="button"
                 phx-click="accept_updated_policies"
                 phx-value-user-id={@user_id}
-                class="inline-flex w-full justify-center rounded-md bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-cerulean-500 sm:ml-3 sm:w-auto disabled:opacity-50 disabled:cursor-not-allowed"
+                class="inline-flex w-full justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 sm:ml-3 sm:w-auto disabled:opacity-50 disabled:cursor-not-allowed"
                 id="accept-policies-button"
               >
                 {gettext("Accept and Continue")}
diff --git a/lib/towerops_web/components/cookie_consent.ex b/lib/towerops_web/components/cookie_consent.ex
index 96c570b5..eb845824 100644
--- a/lib/towerops_web/components/cookie_consent.ex
+++ b/lib/towerops_web/components/cookie_consent.ex
@@ -28,7 +28,7 @@ defmodule ToweropsWeb.Components.CookieConsent do
     <%= if @requires_consent do %>
       <div
         id="cookie-consent-banner"
-        class="fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-cool-steel-900 border-t border-cool-steel-200 dark:border-cool-steel-700 shadow-lg"
+        class="fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 shadow-lg"
         role="dialog"
         aria-live="polite"
         aria-label="Cookie consent"
@@ -38,15 +38,15 @@ defmodule ToweropsWeb.Components.CookieConsent do
             <div class="flex-1 flex items-start gap-3">
               <.icon
                 name="hero-information-circle"
-                class="h-6 w-6 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0"
+                class="h-6 w-6 text-blue-600 dark:text-blue-400 flex-shrink-0"
               />
-              <div class="text-sm text-cool-steel-700 dark:text-cool-steel-300">
+              <div class="text-sm text-gray-700 dark:text-gray-300">
                 <p class="font-medium mb-1">We respect your privacy</p>
                 <p>
                   We use essential cookies to maintain your session and ensure the security of our service. We do not use tracking or advertising cookies.
                   <a
                     href="/privacy"
-                    class="underline hover:text-cool-steel-900 dark:hover:text-cool-steel-100 font-medium"
+                    class="underline hover:text-gray-900 dark:hover:text-gray-100 font-medium"
                   >
                     Learn more
                   </a>
@@ -58,7 +58,7 @@ defmodule ToweropsWeb.Components.CookieConsent do
               <button
                 type="button"
                 data-cookie-consent="accept"
-                class="flex-1 sm:flex-none px-4 py-2 bg-cerulean-600 text-white text-sm font-medium rounded-lg hover:bg-cerulean-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cerulean-500 dark:focus:ring-offset-cool-steel-900"
+                class="flex-1 sm:flex-none px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900"
               >
                 Accept
               </button>
diff --git a/lib/towerops_web/components/core_components.ex b/lib/towerops_web/components/core_components.ex
index ea4aff97..58f9a518 100644
--- a/lib/towerops_web/components/core_components.ex
+++ b/lib/towerops_web/components/core_components.ex
@@ -61,7 +61,7 @@ defmodule ToweropsWeb.CoreComponents do
       {@rest}
     >
       <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
-        <div class="pointer-events-auto w-full max-w-sm translate-y-0 transform rounded-lg bg-white opacity-100 shadow-lg outline-1 outline-black/5 transition duration-300 ease-out sm:translate-x-0 dark:bg-cool-steel-800 dark:-outline-offset-1 dark:outline-white/10 starting:translate-y-2 starting:opacity-0 starting:sm:translate-x-2 starting:sm:translate-y-0">
+        <div class="pointer-events-auto w-full max-w-sm translate-y-0 transform rounded-lg bg-white opacity-100 shadow-lg outline-1 outline-black/5 transition duration-300 ease-out sm:translate-x-0 dark:bg-gray-800 dark:-outline-offset-1 dark:outline-white/10 starting:translate-y-2 starting:opacity-0 starting:sm:translate-x-2 starting:sm:translate-y-0">
           <div class="p-4">
             <div class="flex items-start">
               <div class="shrink-0">
@@ -73,15 +73,15 @@ defmodule ToweropsWeb.CoreComponents do
                 <.icon
                   :if={@kind == :error}
                   name="hero-x-circle"
-                  class="size-6 text-sweet-salmon-400"
+                  class="size-6 text-red-400"
                 />
               </div>
               <div class="ml-3 w-0 flex-1 pt-0.5">
-                <p :if={@title} class="text-sm font-medium text-cool-steel-900 dark:text-white">
+                <p :if={@title} class="text-sm font-medium text-gray-900 dark:text-white">
                   {@title}
                 </p>
                 <p class={[
-                  "text-sm text-cool-steel-500 dark:text-cool-steel-400",
+                  "text-sm text-gray-500 dark:text-gray-400",
                   @title && "mt-1"
                 ]}>
                   {render_flash_message(msg)}
@@ -90,7 +90,7 @@ defmodule ToweropsWeb.CoreComponents do
               <div class="ml-4 flex shrink-0">
                 <button
                   type="button"
-                  class="inline-flex rounded-md text-cool-steel-400 hover:text-cool-steel-500 focus:outline-2 focus:outline-offset-2 focus:outline-cerulean-600 dark:hover:text-white dark:focus:outline-cerulean-500"
+                  class="inline-flex rounded-md text-gray-400 hover:text-gray-500 focus:outline-2 focus:outline-offset-2 focus:outline-indigo-600 dark:hover:text-white dark:focus:outline-indigo-500"
                   aria-label={gettext("close")}
                 >
                   <span class="sr-only">Close</span>
@@ -114,7 +114,7 @@ defmodule ToweropsWeb.CoreComponents do
     {@text}
     <.link
       navigate={@link_url}
-      class="font-medium text-cerulean-600 hover:text-cerulean-500 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+      class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
     >
       {@link_text}
     </.link>
@@ -142,15 +142,15 @@ defmodule ToweropsWeb.CoreComponents do
   def button(%{rest: rest} = assigns) do
     variants = %{
       "primary" =>
-        "bg-cerulean-600 text-white hover:bg-cerulean-500 active:bg-cerulean-700 focus:ring-cerulean-500 shadow-md hover:shadow-lg dark:bg-cerulean-500 dark:hover:bg-cerulean-400 dark:active:bg-cerulean-600",
+        "bg-blue-600 text-white hover:bg-blue-500 active:bg-blue-700 focus:ring-blue-500 shadow-md hover:shadow-lg dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-600",
       "secondary" =>
-        "bg-white text-cool-steel-700 ring-1 ring-inset ring-cool-steel-300 hover:bg-cool-steel-50 focus:ring-cerulean-500 dark:bg-cool-steel-800 dark:text-cool-steel-200 dark:ring-cool-steel-600 dark:hover:bg-cool-steel-700",
+        "bg-white text-gray-700 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-200 dark:ring-gray-600 dark:hover:bg-gray-700",
       "danger" =>
-        "bg-sweet-salmon-600 text-white hover:bg-sweet-salmon-500 active:bg-sweet-salmon-700 focus:ring-sweet-salmon-500 dark:bg-sweet-salmon-500 dark:hover:bg-sweet-salmon-400",
+        "bg-red-600 text-white hover:bg-red-500 active:bg-red-700 focus:ring-red-500 dark:bg-red-500 dark:hover:bg-red-400",
       "ghost" =>
-        "bg-transparent text-cool-steel-700 hover:bg-cool-steel-100 focus:ring-cerulean-500 shadow-none dark:text-cool-steel-300 dark:hover:bg-cool-steel-800",
+        "bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-blue-500 shadow-none dark:text-gray-300 dark:hover:bg-gray-800",
       nil =>
-        "bg-white text-cool-steel-900 ring-1 ring-inset ring-cool-steel-300 hover:bg-cool-steel-50 focus:ring-cerulean-500 dark:bg-cool-steel-800 dark:text-white dark:ring-cool-steel-700 dark:hover:bg-cool-steel-700"
+        "bg-white text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:ring-blue-500 dark:bg-gray-800 dark:text-white dark:ring-gray-700 dark:hover:bg-gray-700"
     }
 
     sizes = %{
@@ -162,7 +162,7 @@ defmodule ToweropsWeb.CoreComponents do
     assigns =
       assign_new(assigns, :class, fn ->
         [
-          "inline-flex items-center justify-center gap-2 rounded-lg font-semibold shadow-sm transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:focus:ring-offset-cool-steel-900",
+          "inline-flex items-center justify-center gap-2 rounded-lg font-semibold shadow-sm transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed dark:focus:ring-offset-gray-900",
           Map.fetch!(sizes, assigns.size),
           Map.fetch!(variants, assigns[:variant])
         ]
@@ -325,11 +325,11 @@ defmodule ToweropsWeb.CoreComponents do
           aria-invalid={to_string(@errors != [])}
           class={
             @class ||
-              "h-4 w-4 rounded border-cool-steel-300 text-cerulean-600 focus:ring-cerulean-500 dark:border-cool-steel-600 dark:bg-cool-steel-800"
+              "h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800"
           }
           {@rest}
         />
-        <span class="text-sm font-medium text-cool-steel-900 dark:text-white">{@label}</span>
+        <span class="text-sm font-medium text-gray-900 dark:text-white">{@label}</span>
       </label>
       <.error :if={@errors != []} id={@error_id}>
         <span :for={msg <- @errors}>{msg}</span>
@@ -343,11 +343,7 @@ defmodule ToweropsWeb.CoreComponents do
 
     ~H"""
     <div class="mb-4">
-      <label
-        :if={@label}
-        for={@id}
-        class="block text-sm/6 font-medium text-cool-steel-900 dark:text-white"
-      >
+      <label :if={@label} for={@id} class="block text-sm/6 font-medium text-gray-900 dark:text-white">
         {@label}
       </label>
       <div class={["mt-2 grid grid-cols-1", @label && ""]}>
@@ -358,12 +354,12 @@ defmodule ToweropsWeb.CoreComponents do
           aria-invalid={to_string(@errors != [])}
           class={[
             @class ||
-              "col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-cool-steel-900 outline-1 -outline-offset-1 placeholder:text-cool-steel-400 focus:outline-2 focus:-outline-offset-2 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-cool-steel-800",
+              "col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-gray-800",
             @errors == [] &&
-              "outline-cool-steel-300 focus:outline-cerulean-600 dark:focus:outline-cerulean-500",
+              "outline-gray-300 focus:outline-indigo-600 dark:focus:outline-indigo-500",
             @errors != [] &&
               (@error_class ||
-                 "outline-sweet-salmon-300 focus:outline-sweet-salmon-500 dark:outline-sweet-salmon-700 dark:focus:outline-sweet-salmon-500")
+                 "outline-red-300 focus:outline-red-500 dark:outline-red-700 dark:focus:outline-red-500")
           ]}
           multiple={@multiple}
           {@rest}
@@ -376,7 +372,7 @@ defmodule ToweropsWeb.CoreComponents do
           fill="currentColor"
           data-slot="icon"
           aria-hidden="true"
-          class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-cool-steel-400 sm:size-4"
+          class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-400 sm:size-4"
         >
           <path
             d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
@@ -398,7 +394,7 @@ defmodule ToweropsWeb.CoreComponents do
     ~H"""
     <div class="mb-4">
       <label>
-        <span :if={@label} class="block text-sm font-medium text-cool-steel-900 dark:text-white mb-2">
+        <span :if={@label} class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
           {@label}
         </span>
         <textarea
@@ -408,12 +404,12 @@ defmodule ToweropsWeb.CoreComponents do
           aria-invalid={to_string(@errors != [])}
           class={[
             @class ||
-              "block w-full rounded-lg border-0 py-2 px-3 text-cool-steel-900 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6 dark:bg-cool-steel-800 dark:text-white",
+              "block w-full rounded-lg border-0 py-2 px-3 text-gray-900 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6 dark:bg-gray-800 dark:text-white",
             @errors == [] &&
-              "ring-cool-steel-300 focus:ring-cerulean-600 dark:ring-cool-steel-700 dark:focus:ring-cerulean-500",
+              "ring-gray-300 focus:ring-blue-600 dark:ring-gray-700 dark:focus:ring-blue-500",
             @errors != [] &&
               (@error_class ||
-                 "ring-sweet-salmon-300 focus:ring-sweet-salmon-500 dark:ring-sweet-salmon-700 dark:focus:ring-sweet-salmon-500")
+                 "ring-red-300 focus:ring-red-500 dark:ring-red-700 dark:focus:ring-red-500")
           ]}
           {@rest}
         >{Phoenix.HTML.Form.normalize_value("textarea", @value)}</textarea>
@@ -432,7 +428,7 @@ defmodule ToweropsWeb.CoreComponents do
     ~H"""
     <div class="mb-4">
       <label>
-        <span :if={@label} class="block text-sm font-medium text-cool-steel-900 dark:text-white mb-2">
+        <span :if={@label} class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
           {@label}
         </span>
         <input
@@ -444,12 +440,12 @@ defmodule ToweropsWeb.CoreComponents do
           aria-invalid={to_string(@errors != [])}
           class={[
             @class ||
-              "block w-full rounded-lg border-0 py-2 px-3 text-cool-steel-900 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6 dark:bg-cool-steel-800 dark:text-white",
+              "block w-full rounded-lg border-0 py-2 px-3 text-gray-900 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6 dark:bg-gray-800 dark:text-white",
             @errors == [] &&
-              "ring-cool-steel-300 focus:ring-cerulean-600 dark:ring-cool-steel-700 dark:focus:ring-cerulean-500",
+              "ring-gray-300 focus:ring-blue-600 dark:ring-gray-700 dark:focus:ring-blue-500",
             @errors != [] &&
               (@error_class ||
-                 "ring-sweet-salmon-300 focus:ring-sweet-salmon-500 dark:ring-sweet-salmon-700 dark:focus:ring-sweet-salmon-500")
+                 "ring-red-300 focus:ring-red-500 dark:ring-red-700 dark:focus:ring-red-500")
           ]}
           {@rest}
         />
@@ -464,7 +460,7 @@ defmodule ToweropsWeb.CoreComponents do
   # Helper used by inputs to generate form errors
   defp error(assigns) do
     ~H"""
-    <p class="mt-2 flex gap-2 items-center text-sm text-sweet-salmon-600 dark:text-sweet-salmon-400">
+    <p class="mt-2 flex gap-2 items-center text-sm text-red-600 dark:text-red-400">
       <.icon name="hero-exclamation-circle" class="h-5 w-5 flex-shrink-0" />
       {render_slot(@inner_block)}
     </p>
@@ -482,10 +478,10 @@ defmodule ToweropsWeb.CoreComponents do
     ~H"""
     <header class={[@actions != [] && "flex flex-wrap items-start justify-between gap-3", "mb-8"]}>
       <div class="min-w-0">
-        <h1 class="text-3xl font-bold text-cool-steel-900 dark:text-white">
+        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">
           {render_slot(@inner_block)}
         </h1>
-        <p :if={@subtitle != []} class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+        <p :if={@subtitle != []} class="mt-2 text-sm text-gray-600 dark:text-gray-400">
           {render_slot(@subtitle)}
         </p>
       </div>
@@ -531,12 +527,12 @@ defmodule ToweropsWeb.CoreComponents do
 
     ~H"""
     <div class="overflow-hidden shadow-sm outline-1 outline-black/5 sm:rounded-lg dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">
-      <table class="relative min-w-full divide-y divide-cool-steel-300 dark:divide-white/15">
-        <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/75">
+      <table class="relative min-w-full divide-y divide-gray-300 dark:divide-white/15">
+        <thead class="bg-gray-50 dark:bg-gray-800/75">
           <tr>
             <th
               :for={col <- @col}
-              class="py-3.5 pr-3 pl-4 text-left text-sm font-semibold text-cool-steel-900 sm:pl-6 dark:text-cool-steel-200"
+              class="py-3.5 pr-3 pl-4 text-left text-sm font-semibold text-gray-900 sm:pl-6 dark:text-gray-200"
             >
               {col[:label]}
             </th>
@@ -548,19 +544,19 @@ defmodule ToweropsWeb.CoreComponents do
         <tbody
           id={@id}
           phx-update={is_struct(@rows, Phoenix.LiveView.LiveStream) && "stream"}
-          class="divide-y divide-cool-steel-200 bg-white dark:divide-white/10 dark:bg-cool-steel-800/50"
+          class="divide-y divide-gray-200 bg-white dark:divide-white/10 dark:bg-gray-800/50"
         >
           <tr
             :for={row <- @rows}
             id={@row_id && @row_id.(row)}
-            class="transition-colors hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800/80"
+            class="transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/80"
           >
             <td
               :for={{col, i} <- Enum.with_index(@col)}
               phx-click={@row_click && @row_click.(row)}
               class={[
-                i == 0 && "font-medium text-cool-steel-900 dark:text-white",
-                i > 0 && "text-cool-steel-500 dark:text-cool-steel-400",
+                i == 0 && "font-medium text-gray-900 dark:text-white",
+                i > 0 && "text-gray-500 dark:text-gray-400",
                 @row_link && "p-0 text-sm whitespace-nowrap",
                 !@row_link && "py-4 pr-3 pl-4 text-sm whitespace-nowrap sm:pl-6",
                 @row_click && "cursor-pointer"
@@ -610,10 +606,10 @@ defmodule ToweropsWeb.CoreComponents do
 
   def list(assigns) do
     ~H"""
-    <div class="overflow-hidden bg-white shadow rounded-lg divide-y divide-cool-steel-200 dark:bg-cool-steel-800/50 dark:divide-white/10">
+    <div class="overflow-hidden bg-white shadow rounded-lg divide-y divide-gray-200 dark:bg-gray-800/50 dark:divide-white/10">
       <div :for={item <- @item} class="px-6 py-4">
-        <dt class="text-sm font-medium text-cool-steel-900 dark:text-white">{item.title}</dt>
-        <dd class="mt-1 text-sm text-cool-steel-700 dark:text-cool-steel-300">{render_slot(item)}</dd>
+        <dt class="text-sm font-medium text-gray-900 dark:text-white">{item.title}</dt>
+        <dd class="mt-1 text-sm text-gray-700 dark:text-gray-300">{render_slot(item)}</dd>
       </div>
     </div>
     """
@@ -694,20 +690,20 @@ defmodule ToweropsWeb.CoreComponents do
   def pagination(assigns) do
     ~H"""
     <%= if @meta.total_pages > 1 do %>
-      <div class="mt-6 flex items-center justify-between border-t border-cool-steel-200 dark:border-white/10 pt-6">
+      <div class="mt-6 flex items-center justify-between border-t border-gray-200 dark:border-white/10 pt-6">
         <!-- Mobile: Previous/Next only -->
         <div class="flex flex-1 justify-between sm:hidden">
           <.link
             :if={@meta.page > 1}
             patch={build_pagination_path(@path, @params, @meta.page - 1)}
-            class="relative inline-flex items-center rounded-md border border-cool-steel-300 bg-white px-4 py-2 text-sm font-medium text-cool-steel-700 hover:bg-cool-steel-50 dark:border-white/10 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700"
+            class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
           >
             Previous
           </.link>
           <.link
             :if={@meta.page < @meta.total_pages}
             patch={build_pagination_path(@path, @params, @meta.page + 1)}
-            class="relative ml-3 inline-flex items-center rounded-md border border-cool-steel-300 bg-white px-4 py-2 text-sm font-medium text-cool-steel-700 hover:bg-cool-steel-50 dark:border-white/10 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700"
+            class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
           >
             Next
           </.link>
@@ -715,7 +711,7 @@ defmodule ToweropsWeb.CoreComponents do
         <!-- Desktop: Full pagination with page numbers -->
         <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
           <div>
-            <p class="text-sm text-cool-steel-700 dark:text-cool-steel-400">
+            <p class="text-sm text-gray-700 dark:text-gray-400">
               Showing <span class="font-medium">{(@meta.page - 1) * @meta.per_page + 1}</span>
               to
               <span class="font-medium">{min(@meta.page * @meta.per_page, @meta.total_count)}</span>
@@ -729,7 +725,7 @@ defmodule ToweropsWeb.CoreComponents do
               <.link
                 :if={@meta.page > 1}
                 patch={build_pagination_path(@path, @params, @meta.page - 1)}
-                class="relative inline-flex items-center rounded-l-md px-2 py-2 text-cool-steel-400 ring-1 ring-inset ring-cool-steel-300 hover:bg-cool-steel-50 dark:ring-white/10 dark:hover:bg-cool-steel-800"
+                class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:ring-white/10 dark:hover:bg-gray-800"
               >
                 <span class="sr-only">Previous</span>
                 <.icon name="hero-chevron-left" class="h-5 w-5" />
@@ -737,18 +733,18 @@ defmodule ToweropsWeb.CoreComponents do
               <!-- Page numbers with ellipsis -->
               <%= for page_num <- pagination_range(@meta.page, @meta.total_pages) do %>
                 <%= if page_num == :ellipsis do %>
-                  <span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-cool-steel-700 ring-1 ring-inset ring-cool-steel-300 dark:text-cool-steel-400 dark:ring-white/10">
+                  <span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 dark:text-gray-400 dark:ring-white/10">
                     ...
                   </span>
                 <% else %>
                   <.link
                     patch={build_pagination_path(@path, @params, page_num)}
                     class={[
-                      "relative inline-flex items-center px-4 py-2 text-sm font-semibold ring-1 ring-inset ring-cool-steel-300 dark:ring-white/10",
+                      "relative inline-flex items-center px-4 py-2 text-sm font-semibold ring-1 ring-inset ring-gray-300 dark:ring-white/10",
                       if @meta.page == page_num do
-                        "z-10 bg-cerulean-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cerulean-600"
+                        "z-10 bg-blue-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                       else
-                        "text-cool-steel-900 hover:bg-cool-steel-50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+                        "text-gray-900 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
                       end
                     ]}
                   >
@@ -760,7 +756,7 @@ defmodule ToweropsWeb.CoreComponents do
               <.link
                 :if={@meta.page < @meta.total_pages}
                 patch={build_pagination_path(@path, @params, @meta.page + 1)}
-                class="relative inline-flex items-center rounded-r-md px-2 py-2 text-cool-steel-400 ring-1 ring-inset ring-cool-steel-300 hover:bg-cool-steel-50 dark:ring-white/10 dark:hover:bg-cool-steel-800"
+                class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:ring-white/10 dark:hover:bg-gray-800"
               >
                 <span class="sr-only">Next</span>
                 <.icon name="hero-chevron-right" class="h-5 w-5" />
@@ -882,7 +878,7 @@ defmodule ToweropsWeb.CoreComponents do
 
   def signal_badge(%{value: nil} = assigns) do
     ~H"""
-    <span class="inline-flex items-center rounded-md bg-cool-steel-50 px-2 py-1 text-xs font-medium text-cool-steel-600 ring-1 ring-cool-steel-500/10 ring-inset dark:bg-cool-steel-400/10 dark:text-cool-steel-400 dark:ring-cool-steel-400/20">
+    <span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-gray-500/10 ring-inset dark:bg-gray-400/10 dark:text-gray-400 dark:ring-gray-400/20">
       —
     </span>
     """
@@ -907,13 +903,13 @@ defmodule ToweropsWeb.CoreComponents do
         @color == "green" &&
           "bg-green-50 text-green-700 ring-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:ring-green-400/20",
         @color == "blue" &&
-          "bg-cerulean-50 text-cerulean-700 ring-cerulean-600/20 dark:bg-cerulean-400/10 dark:text-cerulean-400 dark:ring-cerulean-400/20",
+          "bg-blue-50 text-blue-700 ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/20",
         @color == "yellow" &&
-          "bg-wheat-50 text-wheat-800 ring-wheat-600/20 dark:bg-wheat-400/10 dark:text-wheat-500 dark:ring-wheat-400/20",
+          "bg-yellow-50 text-yellow-800 ring-yellow-600/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:ring-yellow-400/20",
         @color == "orange" &&
           "bg-orange-50 text-orange-700 ring-orange-600/20 dark:bg-orange-400/10 dark:text-orange-400 dark:ring-orange-400/20",
         @color == "red" &&
-          "bg-sweet-salmon-50 text-sweet-salmon-700 ring-sweet-salmon-600/10 dark:bg-sweet-salmon-400/10 dark:text-sweet-salmon-400 dark:ring-sweet-salmon-400/20"
+          "bg-red-50 text-red-700 ring-red-600/10 dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/20"
       ]}
       title={@label}
     >
@@ -941,7 +937,7 @@ defmodule ToweropsWeb.CoreComponents do
 
   def snr_badge(%{value: nil} = assigns) do
     ~H"""
-    <span class="inline-flex items-center rounded-md bg-cool-steel-50 px-2 py-1 text-xs font-medium text-cool-steel-600 ring-1 ring-cool-steel-500/10 ring-inset dark:bg-cool-steel-400/10 dark:text-cool-steel-400 dark:ring-cool-steel-400/20">
+    <span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-gray-500/10 ring-inset dark:bg-gray-400/10 dark:text-gray-400 dark:ring-gray-400/20">
       —
     </span>
     """
@@ -966,13 +962,13 @@ defmodule ToweropsWeb.CoreComponents do
         @color == "green" &&
           "bg-green-50 text-green-700 ring-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:ring-green-400/20",
         @color == "blue" &&
-          "bg-cerulean-50 text-cerulean-700 ring-cerulean-600/20 dark:bg-cerulean-400/10 dark:text-cerulean-400 dark:ring-cerulean-400/20",
+          "bg-blue-50 text-blue-700 ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/20",
         @color == "yellow" &&
-          "bg-wheat-50 text-wheat-800 ring-wheat-600/20 dark:bg-wheat-400/10 dark:text-wheat-500 dark:ring-wheat-400/20",
+          "bg-yellow-50 text-yellow-800 ring-yellow-600/20 dark:bg-yellow-400/10 dark:text-yellow-500 dark:ring-yellow-400/20",
         @color == "orange" &&
           "bg-orange-50 text-orange-700 ring-orange-600/20 dark:bg-orange-400/10 dark:text-orange-400 dark:ring-orange-400/20",
         @color == "red" &&
-          "bg-sweet-salmon-50 text-sweet-salmon-700 ring-sweet-salmon-600/10 dark:bg-sweet-salmon-400/10 dark:text-sweet-salmon-400 dark:ring-sweet-salmon-400/20"
+          "bg-red-50 text-red-700 ring-red-600/10 dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/20"
       ]}
       title={@label}
     >
diff --git a/lib/towerops_web/components/layouts.ex b/lib/towerops_web/components/layouts.ex
index 031e81f7..aef04c1c 100644
--- a/lib/towerops_web/components/layouts.ex
+++ b/lib/towerops_web/components/layouts.ex
@@ -49,25 +49,25 @@ defmodule ToweropsWeb.Layouts do
     assigns = Map.put_new(assigns, :requires_cookie_consent, false)
 
     ~H"""
-    <div class="flex min-h-screen flex-col bg-cool-steel-50 dark:bg-cool-steel-950">
-      <header class="border-b border-cool-steel-200 bg-white dark:border-white/10 dark:bg-cool-steel-900">
+    <div class="flex min-h-screen flex-col bg-gray-50 dark:bg-gray-950">
+      <header class="border-b border-gray-200 bg-white dark:border-white/10 dark:bg-gray-900">
         <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <nav class="flex h-16 items-center justify-between">
             <div class="flex items-center">
-              <.link navigate={~p"/"} class="text-xl font-bold text-cool-steel-900 dark:text-white">
+              <.link navigate={~p"/"} class="text-xl font-bold text-gray-900 dark:text-white">
                 Towerops
               </.link>
             </div>
             <div class="flex items-center gap-x-4">
               <.link
                 navigate={~p"/users/log-in"}
-                class="text-sm font-medium text-cool-steel-700 hover:text-cool-steel-900 dark:text-cool-steel-300 dark:hover:text-white"
+                class="text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
               >
                 Log in
               </.link>
               <.link
                 navigate={~p"/users/register"}
-                class="rounded-lg bg-cerulean-600 px-4 py-2 text-sm font-semibold text-white hover:bg-cerulean-500"
+                class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500"
               >
                 Sign up
               </.link>
@@ -142,11 +142,11 @@ defmodule ToweropsWeb.Layouts do
     <div
       id="sidebar-wrapper"
       phx-hook="SidebarCollapse"
-      class="min-h-screen bg-cool-steel-50 dark:bg-cool-steel-950"
+      class="min-h-screen bg-gray-50 dark:bg-gray-950"
     >
       <!-- Impersonation Banner -->
       <%= if @current_scope && @current_scope.impersonating? do %>
-        <div class="bg-wheat-400 border-b-2 border-wheat-600 relative z-50">
+        <div class="bg-yellow-400 border-b-2 border-yellow-600 relative z-50">
           <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2">
             <div class="flex items-center justify-between">
               <div class="flex items-center gap-2">
@@ -158,7 +158,7 @@ defmodule ToweropsWeb.Layouts do
               <.link
                 href={~p"/admin/impersonate"}
                 method="delete"
-                class="px-3 py-1 bg-white dark:bg-cool-steel-900 text-wheat-900 dark:text-wheat-200 hover:bg-wheat-50 dark:hover:bg-cool-steel-800 rounded font-medium text-sm"
+                class="px-3 py-1 bg-white dark:bg-gray-900 text-yellow-900 dark:text-yellow-200 hover:bg-yellow-50 dark:hover:bg-gray-800 rounded font-medium text-sm"
               >
                 Exit
               </.link>
@@ -168,7 +168,7 @@ defmodule ToweropsWeb.Layouts do
       <% end %>
       
     <!-- Slim Top Bar -->
-      <header class="sticky top-0 z-40 border-b border-cool-steel-200 bg-white dark:border-white/10 dark:bg-cool-steel-900">
+      <header class="sticky top-0 z-40 border-b border-gray-200 bg-white dark:border-white/10 dark:bg-gray-900">
         <div class="flex h-14 items-center justify-between px-4">
           <div class="flex items-center gap-2">
             <!-- Mobile hamburger -->
@@ -184,7 +184,7 @@ defmodule ToweropsWeb.Layouts do
                   to: "#mobile-menu-button"
                 )
               }
-              class="inline-flex items-center justify-center rounded-md p-2 text-cool-steel-500 hover:bg-cool-steel-100 hover:text-cool-steel-700 focus:outline-none dark:text-cool-steel-400 dark:hover:bg-cool-steel-800 dark:hover:text-cool-steel-200 lg:hidden"
+              class="inline-flex items-center justify-center rounded-md p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 focus:outline-none dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200 lg:hidden"
             >
               <span class="sr-only">{t("Toggle main menu")}</span>
               <.icon name="hero-bars-3" class="size-6" />
@@ -192,7 +192,7 @@ defmodule ToweropsWeb.Layouts do
 
             <.link
               navigate={~p"/dashboard"}
-              class="text-lg font-bold text-cool-steel-900 dark:text-white"
+              class="text-lg font-bold text-gray-900 dark:text-white"
             >
               Towerops
             </.link>
@@ -205,12 +205,12 @@ defmodule ToweropsWeb.Layouts do
               type="button"
               id="global-search-trigger"
               phx-hook="GlobalSearchTrigger"
-              class="inline-flex items-center gap-2 rounded-lg border border-cool-steel-200 bg-cool-steel-50 px-3 py-1.5 text-sm text-cool-steel-500 hover:bg-cool-steel-100 hover:text-cool-steel-700 dark:border-white/10 dark:bg-white/5 dark:text-cool-steel-400 dark:hover:bg-white/10 dark:hover:text-cool-steel-200 transition-colors"
+              class="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-1.5 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-white/10 dark:bg-white/5 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-200 transition-colors"
               title="Search (⌘K)"
             >
               <.icon name="hero-magnifying-glass" class="h-4 w-4" />
               <span class="hidden sm:inline text-xs">{t("Search")}</span>
-              <kbd class="hidden sm:inline-flex items-center gap-0.5 rounded border border-cool-steel-300 bg-cool-steel-100 px-1.5 py-0.5 text-[10px] font-medium text-cool-steel-500 dark:border-white/20 dark:bg-white/10 dark:text-cool-steel-400">
+              <kbd class="hidden sm:inline-flex items-center gap-0.5 rounded border border-gray-300 bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-500 dark:border-white/20 dark:bg-white/10 dark:text-gray-400">
                 ⌘K
               </kbd>
             </button>
@@ -219,12 +219,12 @@ defmodule ToweropsWeb.Layouts do
             <.link
               :if={@current_organization}
               navigate={~p"/alerts"}
-              class="relative p-2 rounded-md text-cool-steel-500 hover:text-cool-steel-700 hover:bg-cool-steel-100 dark:text-cool-steel-400 dark:hover:text-cool-steel-200 dark:hover:bg-cool-steel-800 transition-colors"
+              class="relative p-2 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-800 transition-colors"
               title={t("Alerts")}
             >
               <.icon name="hero-bell" class="h-5 w-5" />
               <%= if @unresolved_alert_count > 0 do %>
-                <span class="absolute top-0.5 right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-sweet-salmon-500 px-0.5 text-[10px] font-bold leading-none text-white ring-1 ring-white dark:ring-cool-steel-950">
+                <span class="absolute top-0.5 right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-0.5 text-[10px] font-bold leading-none text-white ring-1 ring-white dark:ring-gray-950">
                   <%= if @unresolved_alert_count > 100 do %>
                     &nbsp;
                   <% else %>
@@ -237,7 +237,7 @@ defmodule ToweropsWeb.Layouts do
     <!-- Help icon -->
             <.link
               navigate={~p"/help"}
-              class="p-2 rounded-md text-cool-steel-500 hover:text-cool-steel-700 hover:bg-cool-steel-100 dark:text-cool-steel-400 dark:hover:text-cool-steel-200 dark:hover:bg-cool-steel-800 transition-colors"
+              class="p-2 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-800 transition-colors"
               title={t("Help")}
             >
               <.icon name="hero-question-mark-circle" class="h-5 w-5" />
@@ -254,7 +254,7 @@ defmodule ToweropsWeb.Layouts do
                 JS.toggle(to: "#org-menu")
                 |> JS.toggle_attribute({"aria-expanded", "true", "false"}, to: "#org-menu-button")
               }
-              class="inline-flex items-center justify-center rounded-full p-1.5 text-cool-steel-500 hover:text-cool-steel-700 hover:bg-cool-steel-100 dark:text-cool-steel-400 dark:hover:text-cool-steel-200 dark:hover:bg-cool-steel-800 transition-colors"
+              class="inline-flex items-center justify-center rounded-full p-1.5 text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-800 transition-colors"
               title={t("Menu")}
             >
               <.icon name="hero-user-circle" class="h-6 w-6" />
@@ -263,7 +263,7 @@ defmodule ToweropsWeb.Layouts do
             <div
               id="org-menu"
               role="menu"
-              class="hidden absolute top-full right-0 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 z-50 dark:bg-cool-steel-800 dark:ring-white/10"
+              class="hidden absolute top-full right-0 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 z-50 dark:bg-gray-800 dark:ring-white/10"
               phx-click-away={
                 JS.hide(to: "#org-menu")
                 |> JS.set_attribute({"aria-expanded", "false"}, to: "#org-menu-button")
@@ -274,7 +274,7 @@ defmodule ToweropsWeb.Layouts do
                   <.link
                     role="menuitem"
                     navigate={~p"/admin"}
-                    class="block px-4 py-2 text-sm text-cool-steel-700 hover:bg-cool-steel-100 dark:text-cool-steel-300 dark:hover:bg-white/5"
+                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5"
                     phx-click={JS.hide(to: "#org-menu")}
                   >
                     {t("Admin Panel")}
@@ -283,7 +283,7 @@ defmodule ToweropsWeb.Layouts do
                 <.link
                   role="menuitem"
                   navigate={~p"/users/settings"}
-                  class="block px-4 py-2 text-sm text-cool-steel-700 hover:bg-cool-steel-100 dark:text-cool-steel-300 dark:hover:bg-white/5"
+                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5"
                   phx-click={JS.hide(to: "#org-menu")}
                 >
                   {t("User Settings")}
@@ -291,7 +291,7 @@ defmodule ToweropsWeb.Layouts do
                 <.link
                   role="menuitem"
                   navigate={~p"/mobile/qr-login"}
-                  class="block px-4 py-2 text-sm text-cool-steel-700 hover:bg-cool-steel-100 dark:text-cool-steel-300 dark:hover:bg-white/5"
+                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5"
                   phx-click={JS.hide(to: "#org-menu")}
                 >
                   <span class="flex items-center gap-2">
@@ -302,7 +302,7 @@ defmodule ToweropsWeb.Layouts do
                 <.link
                   role="menuitem"
                   navigate={~p"/users/my-data"}
-                  class="block px-4 py-2 text-sm text-cool-steel-700 hover:bg-cool-steel-100 dark:text-cool-steel-300 dark:hover:bg-white/5"
+                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5"
                   phx-click={JS.hide(to: "#org-menu")}
                 >
                   {t("My Data")}
@@ -310,17 +310,17 @@ defmodule ToweropsWeb.Layouts do
                 <.link
                   role="menuitem"
                   navigate={~p"/changelog"}
-                  class="block px-4 py-2 text-sm text-cool-steel-700 hover:bg-cool-steel-100 dark:text-cool-steel-300 dark:hover:bg-white/5"
+                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5"
                   phx-click={JS.hide(to: "#org-menu")}
                 >
                   {t("What's New")}
                 </.link>
-                <div class="border-t border-cool-steel-100 dark:border-white/10"></div>
+                <div class="border-t border-gray-100 dark:border-white/10"></div>
                 <.link
                   role="menuitem"
                   href={~p"/users/log-out"}
                   method="delete"
-                  class="block px-4 py-2 text-sm text-cool-steel-700 hover:bg-cool-steel-100 dark:text-cool-steel-300 dark:hover:bg-white/5"
+                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5"
                 >
                   {t("Log out")}
                 </.link>
@@ -337,14 +337,14 @@ defmodule ToweropsWeb.Layouts do
         <aside
           :if={@current_organization || (@current_scope && @current_scope.user)}
           id="app-sidebar"
-          class="sticky top-14 left-0 z-30 hidden lg:flex lg:flex-col bg-cool-steel-800 dark:bg-cool-steel-900 border-r border-cool-steel-700 dark:border-white/10 overflow-y-auto overflow-x-hidden h-[calc(100vh-3.5rem)]"
+          class="sticky top-14 left-0 z-30 hidden lg:flex lg:flex-col bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-white/10 overflow-y-auto overflow-x-hidden h-[calc(100vh-3.5rem)]"
         >
           <!-- Nav sections -->
           <nav class="flex-1 px-2 py-4 space-y-1">
             <!-- MONITOR section -->
             <p
               data-sidebar-section
-              class="px-3 mb-1 text-[10px] font-semibold uppercase tracking-wider text-cool-steel-400 dark:text-cool-steel-500"
+              class="px-3 mb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500"
             >
               {t("Monitor")}
             </p>
@@ -389,7 +389,7 @@ defmodule ToweropsWeb.Layouts do
     <!-- RESPOND section -->
             <p
               data-sidebar-section
-              class="px-3 mt-4 mb-1 text-[10px] font-semibold uppercase tracking-wider text-cool-steel-300 dark:text-cool-steel-400"
+              class="px-3 mt-4 mb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500"
             >
               {t("Respond")}
             </p>
@@ -416,7 +416,7 @@ defmodule ToweropsWeb.Layouts do
     <!-- ANALYZE section -->
             <p
               data-sidebar-section
-              class="px-3 mt-4 mb-1 text-[10px] font-semibold uppercase tracking-wider text-cool-steel-300 dark:text-cool-steel-400"
+              class="px-3 mt-4 mb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500"
             >
               {t("Analyze")}
             </p>
@@ -455,7 +455,7 @@ defmodule ToweropsWeb.Layouts do
           </nav>
           
     <!-- Bottom pinned: org switcher + settings + collapse toggle -->
-          <div class="border-t border-cool-steel-200 dark:border-white/10 px-2 py-3.5 space-y-1">
+          <div class="border-t border-gray-200 dark:border-white/10 px-2 py-3.5 space-y-1">
             <!-- Org switcher -->
             <div :if={@current_organization} class="relative">
               <button
@@ -469,7 +469,7 @@ defmodule ToweropsWeb.Layouts do
                     to: "#sidebar-org-switcher-button"
                   )
                 }
-                class="flex items-center gap-2 w-full rounded-md px-3 py-2 text-sm font-medium text-cool-steel-200 hover:bg-cool-steel-700 hover:text-cool-steel-100 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700 dark:hover:text-cool-steel-100 transition-colors"
+                class="flex items-center gap-2 w-full rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white transition-colors"
                 data-sidebar-tooltip={@current_organization.name}
               >
                 <.icon name="hero-building-office-2" class="h-5 w-5 shrink-0" />
@@ -483,7 +483,7 @@ defmodule ToweropsWeb.Layouts do
               <div
                 id="sidebar-org-switcher-menu"
                 role="menu"
-                class="hidden absolute bottom-full left-0 mb-1 w-48 origin-bottom-left rounded-md bg-white shadow-lg ring-1 ring-black/5 z-50 dark:bg-cool-steel-800 dark:ring-white/10"
+                class="hidden absolute bottom-full left-0 mb-1 w-48 origin-bottom-left rounded-md bg-white shadow-lg ring-1 ring-black/5 z-50 dark:bg-gray-800 dark:ring-white/10"
                 phx-click-away={
                   JS.hide(to: "#sidebar-org-switcher-menu")
                   |> JS.set_attribute({"aria-expanded", "false"}, to: "#sidebar-org-switcher-button")
@@ -493,7 +493,7 @@ defmodule ToweropsWeb.Layouts do
                   <.link
                     role="menuitem"
                     navigate={~p"/orgs"}
-                    class="block px-4 py-2 text-sm text-cool-steel-700 hover:bg-cool-steel-100 dark:text-cool-steel-300 dark:hover:bg-white/5"
+                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5"
                     phx-click={JS.hide(to: "#sidebar-org-switcher-menu")}
                   >
                     {t("Switch Organization")}
@@ -501,7 +501,7 @@ defmodule ToweropsWeb.Layouts do
                   <.link
                     role="menuitem"
                     navigate={~p"/orgs/#{@current_organization.slug}/settings"}
-                    class="block px-4 py-2 text-sm text-cool-steel-700 hover:bg-cool-steel-100 dark:text-cool-steel-300 dark:hover:bg-white/5"
+                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5"
                     phx-click={JS.hide(to: "#sidebar-org-switcher-menu")}
                   >
                     {t("Organization Settings")}
@@ -523,7 +523,7 @@ defmodule ToweropsWeb.Layouts do
             <button
               type="button"
               data-sidebar-toggle
-              class="flex items-center justify-center w-full rounded-md px-3 py-2 text-cool-steel-300 hover:bg-cool-steel-700 hover:text-cool-steel-100 dark:hover:bg-cool-steel-700 dark:hover:text-cool-steel-200 transition-colors"
+              class="flex items-center justify-center w-full rounded-md px-3 py-2 text-gray-400 hover:bg-gray-50 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300 transition-colors"
               title={t("Toggle sidebar")}
             >
               <.icon name="hero-chevron-double-left" class="h-5 w-5 sidebar-collapse-icon" />
@@ -544,13 +544,13 @@ defmodule ToweropsWeb.Layouts do
           >
           </div>
           <!-- Panel -->
-          <div class="fixed inset-y-0 left-0 w-72 bg-cool-steel-800 dark:bg-cool-steel-900 shadow-xl overflow-y-auto">
-            <div class="flex items-center justify-between px-4 py-4 border-b border-cool-steel-700 dark:border-white/10">
-              <span class="text-lg font-bold text-cool-steel-100 dark:text-white">Towerops</span>
+          <div class="fixed inset-y-0 left-0 w-72 bg-white dark:bg-gray-900 shadow-xl overflow-y-auto">
+            <div class="flex items-center justify-between px-4 py-4 border-b border-gray-200 dark:border-white/10">
+              <span class="text-lg font-bold text-gray-900 dark:text-white">Towerops</span>
               <button
                 type="button"
                 phx-click={JS.hide(to: "#mobile-menu")}
-                class="p-2 rounded-md text-cool-steel-300 hover:bg-cool-steel-700 dark:hover:bg-cool-steel-700"
+                class="p-2 rounded-md text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800"
               >
                 <.icon name="hero-x-mark" class="size-5" />
               </button>
@@ -559,19 +559,19 @@ defmodule ToweropsWeb.Layouts do
     <!-- Org name -->
             <div
               :if={@current_organization}
-              class="px-4 py-3 border-b border-cool-steel-100 dark:border-white/5"
+              class="px-4 py-3 border-b border-gray-100 dark:border-white/5"
             >
-              <p class="text-xs font-medium uppercase tracking-wide text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
                 {t("Organization")}
               </p>
-              <p class="text-sm font-semibold text-cool-steel-900 dark:text-white mt-0.5">
+              <p class="text-sm font-semibold text-gray-900 dark:text-white mt-0.5">
                 {@current_organization.name}
               </p>
             </div>
             
     <!-- MONITOR -->
             <div class="px-2 py-3">
-              <p class="px-3 mb-1 text-[10px] font-semibold uppercase tracking-wider text-cool-steel-400 dark:text-cool-steel-500">
+              <p class="px-3 mb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
                 {t("Monitor")}
               </p>
               <.mobile_nav_link navigate={~p"/dashboard"} active={@active_page == "dashboard"}>
@@ -596,8 +596,8 @@ defmodule ToweropsWeb.Layouts do
             </div>
             
     <!-- RESPOND -->
-            <div class="px-2 py-3 border-t border-cool-steel-100 dark:border-white/5">
-              <p class="px-3 mb-1 text-[10px] font-semibold uppercase tracking-wider text-cool-steel-400 dark:text-cool-steel-500">
+            <div class="px-2 py-3 border-t border-gray-100 dark:border-white/5">
+              <p class="px-3 mb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
                 {t("Respond")}
               </p>
               <.mobile_nav_link navigate={~p"/alerts"} active={@active_page == "alerts"}>
@@ -612,8 +612,8 @@ defmodule ToweropsWeb.Layouts do
             </div>
             
     <!-- ANALYZE -->
-            <div class="px-2 py-3 border-t border-cool-steel-100 dark:border-white/5">
-              <p class="px-3 mb-1 text-[10px] font-semibold uppercase tracking-wider text-cool-steel-400 dark:text-cool-steel-500">
+            <div class="px-2 py-3 border-t border-gray-100 dark:border-white/5">
+              <p class="px-3 mb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
                 {t("Analyze")}
               </p>
               <.mobile_nav_link navigate={~p"/insights"} active={@active_page == "insights"}>
@@ -628,8 +628,8 @@ defmodule ToweropsWeb.Layouts do
             </div>
             
     <!-- Account -->
-            <div class="px-2 py-3 border-t border-cool-steel-100 dark:border-white/5">
-              <p class="px-3 mb-1 text-[10px] font-semibold uppercase tracking-wider text-cool-steel-400 dark:text-cool-steel-500">
+            <div class="px-2 py-3 border-t border-gray-100 dark:border-white/5">
+              <p class="px-3 mb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
                 {t("Account")}
               </p>
               <.mobile_nav_link
@@ -661,22 +661,22 @@ defmodule ToweropsWeb.Layouts do
                 id="beta-banner"
                 phx-hook="BetaBannerDismiss"
                 data-always-show={@always_show_banner}
-                class="mb-6 rounded-lg bg-cerulean-50 dark:bg-cerulean-900/20 p-4 border border-cerulean-200 dark:border-cerulean-800"
+                class="mb-6 rounded-lg bg-blue-50 dark:bg-blue-900/20 p-4 border border-blue-200 dark:border-blue-800"
               >
                 <div class="flex items-start gap-3">
                   <.icon
                     name="hero-heart"
-                    class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0 mt-0.5"
+                    class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
                   />
                   <div class="flex-1">
-                    <h3 class="text-sm font-semibold text-cerulean-900 dark:text-cerulean-300 mb-1">
+                    <h3 class="text-sm font-semibold text-blue-900 dark:text-blue-300 mb-1">
                       Thanks for testing Towerops!
                     </h3>
-                    <p class="text-sm text-cerulean-800 dark:text-cerulean-300">
+                    <p class="text-sm text-blue-800 dark:text-blue-300">
                       We'd love to hear your feedback, suggestions, or help you with any questions. Please email us at
                       <a
                         href="mailto:hi@towerops.net"
-                        class="font-medium underline hover:text-cerulean-900 dark:hover:text-cerulean-200"
+                        class="font-medium underline hover:text-blue-900 dark:hover:text-blue-200"
                       >
                         hi@towerops.net
                       </a>
@@ -686,7 +686,7 @@ defmodule ToweropsWeb.Layouts do
                   <button
                     type="button"
                     data-dismiss
-                    class="flex-shrink-0 rounded-md p-1.5 text-cerulean-600 dark:text-cerulean-400 hover:bg-cerulean-100 dark:hover:bg-cerulean-800/50 focus:outline-none focus:ring-2 focus:ring-cerulean-600 dark:focus:ring-cerulean-400"
+                    class="flex-shrink-0 rounded-md p-1.5 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-800/50 focus:outline-none focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-400"
                     aria-label="Dismiss banner"
                   >
                     <.icon name="hero-x-mark" class="h-5 w-5" />
@@ -763,9 +763,9 @@ defmodule ToweropsWeb.Layouts do
         "relative flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
         if(@active,
           do:
-            "bg-cerulean-800/30 text-cerulean-300 border-l-2 border-cerulean-400 dark:bg-cerulean-900/20 dark:text-cerulean-400",
+            "bg-blue-50 text-blue-700 border-l-2 border-blue-600 dark:bg-blue-900/20 dark:text-blue-400",
           else:
-            "text-cool-steel-200 hover:bg-cool-steel-700 hover:text-cool-steel-100 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700 dark:hover:text-cool-steel-100"
+            "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"
         )
       ]}
       data-sidebar-tooltip={@label}
@@ -774,7 +774,7 @@ defmodule ToweropsWeb.Layouts do
       <%= if @badge > 0 do %>
         <span
           data-sidebar-text
-          class="ml-auto inline-flex items-center rounded-full bg-sweet-salmon-100 px-2 py-0.5 text-xs font-medium text-sweet-salmon-700 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"
+          class="ml-auto inline-flex items-center rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700 dark:bg-red-900/30 dark:text-red-400"
         >
           {if @badge > 99, do: "99+", else: @badge}
         </span>
@@ -794,9 +794,9 @@ defmodule ToweropsWeb.Layouts do
       class={[
         "flex items-center gap-3 rounded-md px-3 py-2 text-base font-medium",
         if(@active,
-          do: "bg-cool-steel-100 text-cool-steel-900 dark:bg-cool-steel-800 dark:text-white",
+          do: "bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-white",
           else:
-            "text-cool-steel-600 hover:bg-cool-steel-50 hover:text-cool-steel-900 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800 dark:hover:text-white"
+            "text-gray-600 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white"
         )
       ]}
     >
@@ -874,8 +874,8 @@ defmodule ToweropsWeb.Layouts do
     assigns = Map.put_new(assigns, :requires_cookie_consent, false)
 
     ~H"""
-    <div class="flex min-h-screen flex-col bg-cool-steel-50 dark:bg-cool-steel-950">
-      <nav class="bg-white border-b border-cool-steel-200 dark:border-white/10 dark:bg-cool-steel-900">
+    <div class="flex min-h-screen flex-col bg-gray-50 dark:bg-gray-950">
+      <nav class="bg-white border-b border-gray-200 dark:border-white/10 dark:bg-gray-900">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div class="flex justify-between h-14 sm:h-16">
             <div class="flex items-center">
@@ -888,7 +888,7 @@ defmodule ToweropsWeb.Layouts do
                   |> JS.toggle(to: "#admin-menu-icon-open")
                   |> JS.toggle(to: "#admin-menu-icon-close")
                 }
-                class="inline-flex items-center justify-center rounded-md p-2 text-cool-steel-500 hover:bg-cool-steel-100 hover:text-cool-steel-700 focus:outline-none dark:text-cool-steel-400 dark:hover:bg-cool-steel-800 dark:hover:text-cool-steel-200 sm:hidden"
+                class="inline-flex items-center justify-center rounded-md p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700 focus:outline-none dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200 sm:hidden"
               >
                 <span class="sr-only">Open admin menu</span>
                 <span id="admin-menu-icon-open"><.icon name="hero-bars-3" class="size-6" /></span>
@@ -899,7 +899,7 @@ defmodule ToweropsWeb.Layouts do
 
               <.link
                 navigate={~p"/admin"}
-                class="flex items-center text-lg sm:text-xl font-bold text-cool-steel-900 dark:text-white ml-2 sm:ml-0"
+                class="flex items-center text-lg sm:text-xl font-bold text-gray-900 dark:text-white ml-2 sm:ml-0"
               >
                 <span class="hidden sm:inline">Towerops Admin</span>
                 <span class="sm:hidden">Admin</span>
@@ -909,25 +909,25 @@ defmodule ToweropsWeb.Layouts do
               <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
                 <.link
                   navigate={~p"/admin/users"}
-                  class="inline-flex items-center px-1 pt-1 pb-4 text-sm font-medium text-cool-steel-700 hover:text-cool-steel-900 dark:text-cool-steel-300 dark:hover:text-white"
+                  class="inline-flex items-center px-1 pt-1 pb-4 text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
                 >
                   Users
                 </.link>
                 <.link
                   navigate={~p"/admin/organizations"}
-                  class="inline-flex items-center px-1 pt-1 pb-4 text-sm font-medium text-cool-steel-700 hover:text-cool-steel-900 dark:text-cool-steel-300 dark:hover:text-white"
+                  class="inline-flex items-center px-1 pt-1 pb-4 text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
                 >
                   Organizations
                 </.link>
                 <.link
                   navigate={~p"/admin/security"}
-                  class="inline-flex items-center px-1 pt-1 pb-4 text-sm font-medium text-cool-steel-700 hover:text-cool-steel-900 dark:text-cool-steel-300 dark:hover:text-white"
+                  class="inline-flex items-center px-1 pt-1 pb-4 text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
                 >
                   IP Allowlist
                 </.link>
                 <.link
                   navigate={~p"/admin/errors"}
-                  class="inline-flex items-center px-1 pt-1 pb-4 text-sm font-medium text-cool-steel-700 hover:text-cool-steel-900 dark:text-cool-steel-300 dark:hover:text-white"
+                  class="inline-flex items-center px-1 pt-1 pb-4 text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
                 >
                   Exceptions
                 </.link>
@@ -936,7 +936,7 @@ defmodule ToweropsWeb.Layouts do
             <div class="flex items-center gap-1 sm:gap-2">
               <.link
                 navigate={~p"/orgs"}
-                class="text-xs sm:text-sm text-cool-steel-600 hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="text-xs sm:text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 <span class="hidden sm:inline">Back to App</span>
                 <span class="sm:hidden">App</span>
@@ -947,7 +947,7 @@ defmodule ToweropsWeb.Layouts do
         
     <!-- Mobile menu -->
         <div class="hidden sm:hidden" id="admin-mobile-menu">
-          <div class="space-y-1 px-2 pb-3 pt-2 border-t border-cool-steel-200 dark:border-white/10">
+          <div class="space-y-1 px-2 pb-3 pt-2 border-t border-gray-200 dark:border-white/10">
             <.mobile_nav_link navigate={~p"/admin/users"} active={false}>
               Users
             </.mobile_nav_link>
@@ -994,28 +994,28 @@ defmodule ToweropsWeb.Layouts do
       |> assign(:formatted_time, TimeHelpers.format_iso8601(build_time, timezone))
 
     ~H"""
-    <footer class="border-t border-cool-steel-700 bg-cool-steel-800 dark:border-white/10 dark:bg-cool-steel-900">
+    <footer class="border-t border-gray-200 bg-white dark:border-white/10 dark:bg-gray-900">
       <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
-        <div class="flex flex-col items-center gap-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+        <div class="flex flex-col items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
           <p>Copyright © {Date.utc_today().year} Towerops</p>
           <p class="text-xs">
             <.link
               navigate={~p"/privacy"}
-              class="hover:text-cool-steel-900 dark:hover:text-cool-steel-200 underline decoration-dotted underline-offset-2"
+              class="hover:text-gray-900 dark:hover:text-gray-200 underline decoration-dotted underline-offset-2"
             >
               Privacy Policy
             </.link>
             <span class="mx-2">·</span>
             <.link
               navigate={~p"/terms"}
-              class="hover:text-cool-steel-900 dark:hover:text-cool-steel-200 underline decoration-dotted underline-offset-2"
+              class="hover:text-gray-900 dark:hover:text-gray-200 underline decoration-dotted underline-offset-2"
             >
               Terms of Service
             </.link>
             <span class="mx-2">·</span>
             <.link
               href="/changelog.txt"
-              class="hover:text-cool-steel-900 dark:hover:text-cool-steel-200 underline decoration-dotted underline-offset-2"
+              class="hover:text-gray-900 dark:hover:text-gray-200 underline decoration-dotted underline-offset-2"
             >
               Changelog
             </.link>
diff --git a/lib/towerops_web/components/layouts/root.html.heex b/lib/towerops_web/components/layouts/root.html.heex
index cd4ba5d6..6deb7608 100644
--- a/lib/towerops_web/components/layouts/root.html.heex
+++ b/lib/towerops_web/components/layouts/root.html.heex
@@ -98,7 +98,7 @@
   <body>
     <a
       href="#main-content"
-      class="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:p-4 focus:bg-cerulean-600 focus:text-white focus:rounded-md focus:m-2"
+      class="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:p-4 focus:bg-blue-600 focus:text-white focus:rounded-md focus:m-2"
     >
       {t("Skip to main content")}
     </a>
diff --git a/lib/towerops_web/components/marketing_layouts.ex b/lib/towerops_web/components/marketing_layouts.ex
index c90c746f..10b34aaa 100644
--- a/lib/towerops_web/components/marketing_layouts.ex
+++ b/lib/towerops_web/components/marketing_layouts.ex
@@ -53,7 +53,7 @@ defmodule ToweropsWeb.MarketingLayouts do
               </div>
               <.link
                 navigate={~p"/users/register"}
-                class="group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 bg-cerulean-600 text-white hover:text-slate-100 hover:bg-cerulean-500 active:bg-cerulean-800 active:text-cerulean-100 focus-visible:outline-cerulean-600"
+                class="group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600"
               >
                 <span>
                   Get started <span class="hidden lg:inline">today</span>
diff --git a/lib/towerops_web/components/skeletons.ex b/lib/towerops_web/components/skeletons.ex
index 3b5ab75f..59b6a605 100644
--- a/lib/towerops_web/components/skeletons.ex
+++ b/lib/towerops_web/components/skeletons.ex
@@ -9,7 +9,7 @@ defmodule ToweropsWeb.Components.Skeletons do
     assigns = assign_new(assigns, :class, fn -> "" end)
 
     ~H"""
-    <div class={["rounded bg-cool-steel-200 dark:bg-cool-steel-700 skeleton-shimmer", @class]}></div>
+    <div class={["rounded bg-gray-200 dark:bg-gray-700 skeleton-shimmer", @class]}></div>
     """
   end
 
@@ -21,7 +21,7 @@ defmodule ToweropsWeb.Components.Skeletons do
   def skeleton_card(assigns) do
     ~H"""
     <div class={[
-      "animate-pulse rounded-lg border border-cool-steel-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-cool-steel-800/50",
+      "animate-pulse rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-gray-800/50",
       @class
     ]}>
       <.skel class="h-3 w-24" />
@@ -39,13 +39,13 @@ defmodule ToweropsWeb.Components.Skeletons do
 
   def skeleton_table(assigns) do
     ~H"""
-    <div class="overflow-hidden rounded-lg border border-cool-steel-200 bg-white dark:border-white/10 dark:bg-cool-steel-800/50">
+    <div class="overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-white/10 dark:bg-gray-800/50">
       <!-- Header -->
-      <div class="border-b border-cool-steel-200 bg-cool-steel-50 px-6 py-3.5 dark:border-white/10 dark:bg-cool-steel-800/75">
+      <div class="border-b border-gray-200 bg-gray-50 px-6 py-3.5 dark:border-white/10 dark:bg-gray-800/75">
         <div class="flex gap-8">
           <div
             :for={_ <- 1..@cols}
-            class="h-3 w-20 animate-pulse rounded bg-cool-steel-300 dark:bg-cool-steel-600"
+            class="h-3 w-20 animate-pulse rounded bg-gray-300 dark:bg-gray-600"
           >
           </div>
         </div>
@@ -54,16 +54,16 @@ defmodule ToweropsWeb.Components.Skeletons do
       <div
         :for={i <- 1..@rows}
         class={[
-          "border-b border-cool-steel-100 px-6 py-4 last:border-0 dark:border-white/5",
-          rem(i, 2) == 0 && "bg-cool-steel-50/50 dark:bg-cool-steel-800/25"
+          "border-b border-gray-100 px-6 py-4 last:border-0 dark:border-white/5",
+          rem(i, 2) == 0 && "bg-gray-50/50 dark:bg-gray-800/25"
         ]}
       >
         <div class="flex items-center gap-8">
-          <div class="h-3 w-24 animate-pulse rounded bg-cool-steel-200 dark:bg-cool-steel-700 skeleton-shimmer">
+          <div class="h-3 w-24 animate-pulse rounded bg-gray-200 dark:bg-gray-700 skeleton-shimmer">
           </div>
           <div
             :for={_ <- 2..@cols}
-            class="h-3 w-16 animate-pulse rounded bg-cool-steel-200 dark:bg-cool-steel-700 skeleton-shimmer"
+            class="h-3 w-16 animate-pulse rounded bg-gray-200 dark:bg-gray-700 skeleton-shimmer"
           >
           </div>
         </div>
@@ -80,17 +80,15 @@ defmodule ToweropsWeb.Components.Skeletons do
   def skeleton_stat(assigns) do
     ~H"""
     <div class={[
-      "animate-pulse rounded-lg border border-cool-steel-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-cool-steel-800/50",
+      "animate-pulse rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-white/10 dark:bg-gray-800/50",
       @class
     ]}>
       <div class="flex items-center gap-2">
-        <div class="h-5 w-5 rounded bg-cool-steel-200 dark:bg-cool-steel-700 skeleton-shimmer"></div>
-        <div class="h-3 w-20 rounded bg-cool-steel-200 dark:bg-cool-steel-700 skeleton-shimmer"></div>
-      </div>
-      <div class="mt-2 h-8 w-16 rounded bg-cool-steel-200 dark:bg-cool-steel-700 skeleton-shimmer">
-      </div>
-      <div class="mt-1.5 h-2.5 w-14 rounded bg-cool-steel-200 dark:bg-cool-steel-700 skeleton-shimmer">
+        <div class="h-5 w-5 rounded bg-gray-200 dark:bg-gray-700 skeleton-shimmer"></div>
+        <div class="h-3 w-20 rounded bg-gray-200 dark:bg-gray-700 skeleton-shimmer"></div>
       </div>
+      <div class="mt-2 h-8 w-16 rounded bg-gray-200 dark:bg-gray-700 skeleton-shimmer"></div>
+      <div class="mt-1.5 h-2.5 w-14 rounded bg-gray-200 dark:bg-gray-700 skeleton-shimmer"></div>
     </div>
     """
   end
@@ -109,7 +107,7 @@ defmodule ToweropsWeb.Components.Skeletons do
       <div
         :for={w <- [28, 24, 32, 20]}
         class={[
-          "h-9 animate-pulse rounded-lg bg-cool-steel-200 dark:bg-cool-steel-700 skeleton-shimmer",
+          "h-9 animate-pulse rounded-lg bg-gray-200 dark:bg-gray-700 skeleton-shimmer",
           "w-#{w}"
         ]}
       >
@@ -119,42 +117,37 @@ defmodule ToweropsWeb.Components.Skeletons do
     <div class="mt-8 grid gap-8 lg:grid-cols-5">
       <!-- Main column: alerts/activity -->
       <div class="lg:col-span-3">
-        <div class="h-5 w-32 animate-pulse rounded bg-cool-steel-200 dark:bg-cool-steel-700 skeleton-shimmer mb-4">
+        <div class="h-5 w-32 animate-pulse rounded bg-gray-200 dark:bg-gray-700 skeleton-shimmer mb-4">
         </div>
         <div class="space-y-3">
           <div
             :for={_ <- 1..3}
-            class="animate-pulse rounded-lg border border-cool-steel-200 bg-white p-4 dark:border-white/10 dark:bg-cool-steel-800/50"
+            class="animate-pulse rounded-lg border border-gray-200 bg-white p-4 dark:border-white/10 dark:bg-gray-800/50"
           >
             <div class="flex items-center gap-3">
-              <div class="h-8 w-8 rounded-full bg-cool-steel-200 dark:bg-cool-steel-700 skeleton-shimmer">
-              </div>
+              <div class="h-8 w-8 rounded-full bg-gray-200 dark:bg-gray-700 skeleton-shimmer"></div>
               <div class="flex-1">
-                <div class="h-3.5 w-40 rounded bg-cool-steel-200 dark:bg-cool-steel-700 skeleton-shimmer">
-                </div>
-                <div class="mt-2 h-3 w-64 rounded bg-cool-steel-200 dark:bg-cool-steel-700 skeleton-shimmer">
+                <div class="h-3.5 w-40 rounded bg-gray-200 dark:bg-gray-700 skeleton-shimmer"></div>
+                <div class="mt-2 h-3 w-64 rounded bg-gray-200 dark:bg-gray-700 skeleton-shimmer">
                 </div>
               </div>
-              <div class="h-3 w-12 rounded bg-cool-steel-200 dark:bg-cool-steel-700 skeleton-shimmer">
-              </div>
+              <div class="h-3 w-12 rounded bg-gray-200 dark:bg-gray-700 skeleton-shimmer"></div>
             </div>
           </div>
         </div>
       </div>
       <!-- Sidebar column: recent/quick stats -->
       <div class="lg:col-span-2">
-        <div class="h-5 w-24 animate-pulse rounded bg-cool-steel-200 dark:bg-cool-steel-700 skeleton-shimmer mb-4">
+        <div class="h-5 w-24 animate-pulse rounded bg-gray-200 dark:bg-gray-700 skeleton-shimmer mb-4">
         </div>
         <div class="space-y-3">
           <div
             :for={_ <- 1..4}
-            class="animate-pulse rounded-lg border border-cool-steel-200 bg-white p-3 dark:border-white/10 dark:bg-cool-steel-800/50"
+            class="animate-pulse rounded-lg border border-gray-200 bg-white p-3 dark:border-white/10 dark:bg-gray-800/50"
           >
             <div class="flex items-center justify-between">
-              <div class="h-3 w-28 rounded bg-cool-steel-200 dark:bg-cool-steel-700 skeleton-shimmer">
-              </div>
-              <div class="h-5 w-10 rounded-full bg-cool-steel-200 dark:bg-cool-steel-700 skeleton-shimmer">
-              </div>
+              <div class="h-3 w-28 rounded bg-gray-200 dark:bg-gray-700 skeleton-shimmer"></div>
+              <div class="h-5 w-10 rounded-full bg-gray-200 dark:bg-gray-700 skeleton-shimmer"></div>
             </div>
           </div>
         </div>
diff --git a/lib/towerops_web/controllers/api_docs_html/index.html.heex b/lib/towerops_web/controllers/api_docs_html/index.html.heex
index 17155b27..81c52fb1 100644
--- a/lib/towerops_web/controllers/api_docs_html/index.html.heex
+++ b/lib/towerops_web/controllers/api_docs_html/index.html.heex
@@ -19,7 +19,7 @@
               <a
                 href="#introduction"
                 data-nav-link="introduction"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Introduction
               </a>
@@ -28,7 +28,7 @@
               <a
                 href="#authentication"
                 data-nav-link="authentication"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Authentication
               </a>
@@ -37,7 +37,7 @@
               <a
                 href="#errors"
                 data-nav-link="errors"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Errors
               </a>
@@ -53,7 +53,7 @@
               <a
                 href="#sites"
                 data-nav-link="sites"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Sites
               </a>
@@ -62,7 +62,7 @@
               <a
                 href="#devices"
                 data-nav-link="devices"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Devices
               </a>
@@ -71,7 +71,7 @@
               <a
                 href="#account-data"
                 data-nav-link="account-data"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Account Data (GDPR)
               </a>
@@ -80,7 +80,7 @@
               <a
                 href="#alerts"
                 data-nav-link="alerts"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Alerts
               </a>
@@ -89,7 +89,7 @@
               <a
                 href="#agents"
                 data-nav-link="agents"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Agents
               </a>
@@ -98,7 +98,7 @@
               <a
                 href="#organization"
                 data-nav-link="organization"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Organization
               </a>
@@ -107,7 +107,7 @@
               <a
                 href="#members"
                 data-nav-link="members"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Members
               </a>
@@ -116,7 +116,7 @@
               <a
                 href="#invitations"
                 data-nav-link="invitations"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Invitations
               </a>
@@ -125,7 +125,7 @@
               <a
                 href="#integrations"
                 data-nav-link="integrations"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Integrations
               </a>
@@ -134,7 +134,7 @@
               <a
                 href="#checks"
                 data-nav-link="checks"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Checks
               </a>
@@ -143,7 +143,7 @@
               <a
                 href="#check-results"
                 data-nav-link="check-results"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Check Results & Metrics
               </a>
@@ -152,7 +152,7 @@
               <a
                 href="#activity"
                 data-nav-link="activity"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Activity Feed
               </a>
@@ -161,7 +161,7 @@
               <a
                 href="#graphs"
                 data-nav-link="graphs"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Graphs & Live Polling
               </a>
@@ -170,7 +170,7 @@
               <a
                 href="#coverages"
                 data-nav-link="coverages"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 RF Coverages
               </a>
@@ -179,7 +179,7 @@
               <a
                 href="#maintenance-windows"
                 data-nav-link="maintenance-windows"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Maintenance Windows
               </a>
@@ -188,7 +188,7 @@
               <a
                 href="#schedules"
                 data-nav-link="schedules"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 On-Call Schedules
               </a>
@@ -197,7 +197,7 @@
               <a
                 href="#escalation-policies"
                 data-nav-link="escalation-policies"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Escalation Policies
               </a>
@@ -213,7 +213,7 @@
               <a
                 href="#terraform"
                 data-nav-link="terraform"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Terraform Provider
               </a>
@@ -234,14 +234,14 @@
         <h1 class="text-4xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-5xl">
           Towerops API Reference
         </h1>
-        <p class="mt-4 text-lg text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-4 text-lg text-gray-600 dark:text-gray-400">
           Use the Towerops API to manage your network monitoring infrastructure programmatically. Create and monitor sites, devices, and alerts.
         </p>
-        <div class="mt-8 rounded-lg border border-zinc-900/10 bg-cool-steel-50 p-4 dark:border-white/10 dark:bg-cool-steel-900/40">
+        <div class="mt-8 rounded-lg border border-zinc-900/10 bg-gray-50 p-4 dark:border-white/10 dark:bg-gray-900/40">
           <h3 class="text-sm font-semibold text-zinc-900 dark:text-white">
             Official clients
           </h3>
-          <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+          <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
             Drive Towerops as code. The Ansible collection wraps every resource on this page with idempotent modules: <a
               href="https://codeberg.org/towerops/ansible"
               class="font-medium text-emerald-600 hover:underline dark:text-emerald-400"
@@ -255,16 +255,16 @@
         <h2 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
           Authentication
         </h2>
-        <p class="mt-4 text-base text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-4 text-base text-gray-600 dark:text-gray-400">
           All API requests require authentication using an API token. Include your token in the Authorization header:
         </p>
-        <div class="mt-6 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+        <div class="mt-6 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
           <pre class="p-4 text-sm text-zinc-100 overflow-x-auto"><code><%= raw("""
 curl https://towerops.net/api/v1/sites \\
   -H "Authorization: Bearer #{@sample_token}"
 """) %></code></pre>
         </div>
-        <p class="mt-4 text-base text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-4 text-base text-gray-600 dark:text-gray-400">
           API tokens are created and managed in your organization settings. Each token is scoped to a single organization.
         </p>
       </section>
@@ -274,11 +274,11 @@ curl https://towerops.net/api/v1/sites \\
         <h2 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
           Errors
         </h2>
-        <p class="mt-4 text-base text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-4 text-base text-gray-600 dark:text-gray-400">
           The API uses conventional HTTP response codes to indicate success or failure:
         </p>
         <div class="mt-6">
-          <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
+          <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
             <thead>
               <tr>
                 <th class="py-3 text-left text-sm font-semibold text-zinc-900 dark:text-white">
@@ -289,54 +289,44 @@ curl https://towerops.net/api/v1/sites \\
                 </th>
               </tr>
             </thead>
-            <tbody class="divide-y divide-cool-steel-200 dark:divide-white/10">
+            <tbody class="divide-y divide-gray-200 dark:divide-white/10">
               <tr>
                 <td class="py-3 text-sm font-mono text-emerald-600 dark:text-emerald-400">200</td>
-                <td class="py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">Success</td>
+                <td class="py-3 text-sm text-gray-600 dark:text-gray-400">Success</td>
               </tr>
               <tr>
                 <td class="py-3 text-sm font-mono text-emerald-600 dark:text-emerald-400">201</td>
-                <td class="py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <td class="py-3 text-sm text-gray-600 dark:text-gray-400">
                   Created successfully
                 </td>
               </tr>
               <tr>
-                <td class="py-3 text-sm font-mono text-sweet-salmon-600 dark:text-sweet-salmon-400">
-                  400
-                </td>
-                <td class="py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <td class="py-3 text-sm font-mono text-red-600 dark:text-red-400">400</td>
+                <td class="py-3 text-sm text-gray-600 dark:text-gray-400">
                   Bad request - missing or invalid parameters
                 </td>
               </tr>
               <tr>
-                <td class="py-3 text-sm font-mono text-sweet-salmon-600 dark:text-sweet-salmon-400">
-                  401
-                </td>
-                <td class="py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <td class="py-3 text-sm font-mono text-red-600 dark:text-red-400">401</td>
+                <td class="py-3 text-sm text-gray-600 dark:text-gray-400">
                   Unauthorized - invalid or missing API token
                 </td>
               </tr>
               <tr>
-                <td class="py-3 text-sm font-mono text-sweet-salmon-600 dark:text-sweet-salmon-400">
-                  403
-                </td>
-                <td class="py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <td class="py-3 text-sm font-mono text-red-600 dark:text-red-400">403</td>
+                <td class="py-3 text-sm text-gray-600 dark:text-gray-400">
                   Forbidden - you don't have access to this resource
                 </td>
               </tr>
               <tr>
-                <td class="py-3 text-sm font-mono text-sweet-salmon-600 dark:text-sweet-salmon-400">
-                  404
-                </td>
-                <td class="py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <td class="py-3 text-sm font-mono text-red-600 dark:text-red-400">404</td>
+                <td class="py-3 text-sm text-gray-600 dark:text-gray-400">
                   Not found - resource doesn't exist
                 </td>
               </tr>
               <tr>
-                <td class="py-3 text-sm font-mono text-sweet-salmon-600 dark:text-sweet-salmon-400">
-                  422
-                </td>
-                <td class="py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <td class="py-3 text-sm font-mono text-red-600 dark:text-red-400">422</td>
+                <td class="py-3 text-sm text-gray-600 dark:text-gray-400">
                   Unprocessable entity - validation errors
                 </td>
               </tr>
@@ -345,14 +335,14 @@ curl https://towerops.net/api/v1/sites \\
         </div>
       </section>
 
-      <hr class="my-16 border-cool-steel-200 dark:border-white/10" />
+      <hr class="my-16 border-gray-200 dark:border-white/10" />
       
 <!-- Sites Resource -->
       <section id="sites" class="scroll-mt-24 mb-16">
         <h2 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
           Sites
         </h2>
-        <p class="mt-4 text-base text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-4 text-base text-gray-600 dark:text-gray-400">
           Sites represent physical locations where your network devices are deployed. Each site can have multiple devices and may have default SNMP configuration.
         </p>
         
@@ -360,59 +350,59 @@ curl https://towerops.net/api/v1/sites \\
         <div class="mt-12">
           <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">The site model</h3>
           <div class="mt-6">
-            <dl class="divide-y divide-cool-steel-200 dark:divide-white/10">
+            <dl class="divide-y divide-gray-200 dark:divide-white/10">
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   id
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Unique identifier for the site (UUID).
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   name
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   The name of the site.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   location
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Physical location or address of the site.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   snmp_community
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Default SNMP community string for devices at this site (optional).
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   inserted_at
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     timestamp
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Timestamp when the site was created.
                 </dd>
               </div>
@@ -420,7 +410,7 @@ curl https://towerops.net/api/v1/sites \\
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- List all sites -->
         <div class="mt-12">
@@ -429,22 +419,20 @@ curl https://towerops.net/api/v1/sites \\
             <span class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/30">
               GET
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
-              /api/v1/sites
-            </span>
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">/api/v1/sites</span>
           </div>
 
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <!-- Left column - description -->
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Lists all sites for the authenticated organization.
               </p>
             </div>
             
 <!-- Right column - code example -->
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -454,7 +442,7 @@ curl -G https://towerops.net/api/v1/sites \\
 """) %></code></pre>
               </div>
 
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -476,50 +464,48 @@ curl -G https://towerops.net/api/v1/sites \\
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Create a site -->
         <div class="mt-12">
           <div class="flex items-center gap-x-3">
             <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Create a site</h3>
-            <span class="inline-flex items-center rounded-md bg-cerulean-50 px-2 py-1 text-xs font-medium text-cerulean-700 ring-1 ring-inset ring-cerulean-600/20 dark:bg-cerulean-400/10 dark:text-cerulean-400 dark:ring-cerulean-400/30">
+            <span class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30">
               POST
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
-              /api/v1/sites
-            </span>
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">/api/v1/sites</span>
           </div>
 
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <!-- Left column -->
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Creates a new site for the authenticated organization.
               </p>
 
               <h4 class="mt-6 text-sm font-semibold text-zinc-900 dark:text-white">
                 Required parameters
               </h4>
-              <dl class="mt-3 divide-y divide-cool-steel-200 dark:divide-white/10">
+              <dl class="mt-3 divide-y divide-gray-200 dark:divide-white/10">
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     name
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     The name of the site.
                   </dd>
                 </div>
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     location
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Physical location of the site.
                   </dd>
                 </div>
@@ -528,15 +514,15 @@ curl -G https://towerops.net/api/v1/sites \\
               <h4 class="mt-6 text-sm font-semibold text-zinc-900 dark:text-white">
                 Optional parameters
               </h4>
-              <dl class="mt-3 divide-y divide-cool-steel-200 dark:divide-white/10">
+              <dl class="mt-3 divide-y divide-gray-200 dark:divide-white/10">
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     snmp_community
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Default SNMP community string for devices at this site.
                   </dd>
                 </div>
@@ -545,7 +531,7 @@ curl -G https://towerops.net/api/v1/sites \\
             
 <!-- Right column -->
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -563,7 +549,7 @@ curl https://towerops.net/api/v1/sites \
 """) %></code></pre>
               </div>
 
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -581,7 +567,7 @@ curl https://towerops.net/api/v1/sites \
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Get a site -->
         <div class="mt-12">
@@ -590,20 +576,20 @@ curl https://towerops.net/api/v1/sites \
             <span class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/30">
               GET
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/sites/:id
             </span>
           </div>
 
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Retrieves a single site by ID.
               </p>
             </div>
 
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -613,7 +599,7 @@ curl https://towerops.net/api/v1/sites/550e8400-e29b-41d4-a716-446655440000 \
 """) %></code></pre>
               </div>
 
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -631,29 +617,29 @@ curl https://towerops.net/api/v1/sites/550e8400-e29b-41d4-a716-446655440000 \
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Update a site -->
         <div class="mt-12">
           <div class="flex items-center gap-x-3">
             <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Update a site</h3>
-            <span class="inline-flex items-center rounded-md bg-wheat-50 px-2 py-1 text-xs font-medium text-wheat-700 ring-1 ring-inset ring-wheat-600/20 dark:bg-wheat-400/10 dark:text-wheat-400 dark:ring-wheat-400/30">
+            <span class="inline-flex items-center rounded-md bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700 ring-1 ring-inset ring-amber-600/20 dark:bg-amber-400/10 dark:text-amber-400 dark:ring-amber-400/30">
               PATCH
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/sites/:id
             </span>
           </div>
 
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Updates an existing site. Only provided fields will be updated.
               </p>
             </div>
 
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -669,7 +655,7 @@ curl -X PATCH https://towerops.net/api/v1/sites/550e8400-e29b-41d4-a716-44665544
 """) %></code></pre>
               </div>
 
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -687,29 +673,29 @@ curl -X PATCH https://towerops.net/api/v1/sites/550e8400-e29b-41d4-a716-44665544
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Delete a site -->
         <div class="mt-12">
           <div class="flex items-center gap-x-3">
             <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Delete a site</h3>
-            <span class="inline-flex items-center rounded-md bg-sweet-salmon-50 px-2 py-1 text-xs font-medium text-sweet-salmon-700 ring-1 ring-inset ring-sweet-salmon-600/20 dark:bg-sweet-salmon-400/10 dark:text-sweet-salmon-400 dark:ring-sweet-salmon-400/30">
+            <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/30">
               DELETE
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/sites/:id
             </span>
           </div>
 
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Deletes a site. Note: This will also delete all devices associated with the site.
               </p>
             </div>
 
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -719,7 +705,7 @@ curl -X DELETE https://towerops.net/api/v1/sites/550e8400-e29b-41d4-a716-4466554
 """) %></code></pre>
               </div>
 
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -734,14 +720,14 @@ curl -X DELETE https://towerops.net/api/v1/sites/550e8400-e29b-41d4-a716-4466554
         </div>
       </section>
 
-      <hr class="my-16 border-cool-steel-200 dark:border-white/10" />
+      <hr class="my-16 border-gray-200 dark:border-white/10" />
       
 <!-- Devices Resource -->
       <section id="devices" class="scroll-mt-24 mb-16">
         <h2 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
           Devices
         </h2>
-        <p class="mt-4 text-base text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-4 text-base text-gray-600 dark:text-gray-400">
           Devices are network equipment monitored by Towerops. Each device belongs to a site and can be monitored via ICMP ping and SNMP.
         </p>
         
@@ -749,125 +735,125 @@ curl -X DELETE https://towerops.net/api/v1/sites/550e8400-e29b-41d4-a716-4466554
         <div class="mt-12">
           <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">The device model</h3>
           <div class="mt-6">
-            <dl class="divide-y divide-cool-steel-200 dark:divide-white/10">
+            <dl class="divide-y divide-gray-200 dark:divide-white/10">
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   id
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Unique identifier for the device (UUID).
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   name
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   The name of the device.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   ip_address
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   IP address of the device.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   site_id
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   ID of the site this device belongs to.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   description
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Optional description of the device.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   monitoring_enabled
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     boolean
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Whether monitoring is enabled for this device.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   check_interval_seconds
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     integer
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   How often to poll this device (in seconds).
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   snmp_enabled
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     boolean
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Whether SNMP monitoring is enabled.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   snmp_version
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   SNMP version to use (e.g., "2c").
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   snmp_port
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     integer
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   SNMP port (default: 161).
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   inserted_at
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     timestamp
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Timestamp when the device was created.
                 </dd>
               </div>
@@ -875,7 +861,7 @@ curl -X DELETE https://towerops.net/api/v1/sites/550e8400-e29b-41d4-a716-4466554
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- List all devices -->
         <div class="mt-12">
@@ -884,29 +870,29 @@ curl -X DELETE https://towerops.net/api/v1/sites/550e8400-e29b-41d4-a716-4466554
             <span class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/30">
               GET
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/devices
             </span>
           </div>
 
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Lists all devices for the authenticated organization.
               </p>
 
               <h4 class="mt-6 text-sm font-semibold text-zinc-900 dark:text-white">
                 Optional parameters
               </h4>
-              <dl class="mt-3 divide-y divide-cool-steel-200 dark:divide-white/10">
+              <dl class="mt-3 divide-y divide-gray-200 dark:divide-white/10">
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     site_id
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Filter devices by site ID.
                   </dd>
                 </div>
@@ -914,7 +900,7 @@ curl -X DELETE https://towerops.net/api/v1/sites/550e8400-e29b-41d4-a716-4466554
             </div>
 
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -924,7 +910,7 @@ curl -G https://towerops.net/api/v1/devices \
 """) %></code></pre>
               </div>
 
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -948,60 +934,60 @@ curl -G https://towerops.net/api/v1/devices \
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Create a device -->
         <div class="mt-12">
           <div class="flex items-center gap-x-3">
             <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Create a device</h3>
-            <span class="inline-flex items-center rounded-md bg-cerulean-50 px-2 py-1 text-xs font-medium text-cerulean-700 ring-1 ring-inset ring-cerulean-600/20 dark:bg-cerulean-400/10 dark:text-cerulean-400 dark:ring-cerulean-400/30">
+            <span class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30">
               POST
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/devices
             </span>
           </div>
 
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Creates a new device.
               </p>
 
               <h4 class="mt-6 text-sm font-semibold text-zinc-900 dark:text-white">
                 Required parameters
               </h4>
-              <dl class="mt-3 divide-y divide-cool-steel-200 dark:divide-white/10">
+              <dl class="mt-3 divide-y divide-gray-200 dark:divide-white/10">
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     site_id
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     ID of the site this device belongs to.
                   </dd>
                 </div>
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     name
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     The name of the device.
                   </dd>
                 </div>
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     ip_address
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     IP address of the device.
                   </dd>
                 </div>
@@ -1010,70 +996,70 @@ curl -G https://towerops.net/api/v1/devices \
               <h4 class="mt-6 text-sm font-semibold text-zinc-900 dark:text-white">
                 Optional parameters
               </h4>
-              <dl class="mt-3 divide-y divide-cool-steel-200 dark:divide-white/10">
+              <dl class="mt-3 divide-y divide-gray-200 dark:divide-white/10">
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     description
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Description of the device.
                   </dd>
                 </div>
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     monitoring_enabled
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       boolean
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Enable monitoring (default: true).
                   </dd>
                 </div>
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     snmp_enabled
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       boolean
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Enable SNMP monitoring (default: true).
                   </dd>
                 </div>
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     snmp_version
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     SNMP version (default: "2c").
                   </dd>
                 </div>
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     snmp_community
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     SNMP community string (inherits from site/org if not set).
                   </dd>
                 </div>
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     snmp_port
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       integer
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     SNMP port (default: 161).
                   </dd>
                 </div>
@@ -1081,7 +1067,7 @@ curl -G https://towerops.net/api/v1/devices \
             </div>
 
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -1101,7 +1087,7 @@ curl https://towerops.net/api/v1/devices \
 """) %></code></pre>
               </div>
 
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -1121,7 +1107,7 @@ curl https://towerops.net/api/v1/devices \
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Get a device -->
         <div class="mt-12">
@@ -1130,20 +1116,20 @@ curl https://towerops.net/api/v1/devices \
             <span class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/30">
               GET
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/devices/:id
             </span>
           </div>
 
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Retrieves a single device by ID, including all configuration details.
               </p>
             </div>
 
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -1153,7 +1139,7 @@ curl https://towerops.net/api/v1/devices/650e8400-e29b-41d4-a716-446655440001 \
 """) %></code></pre>
               </div>
 
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -1177,29 +1163,29 @@ curl https://towerops.net/api/v1/devices/650e8400-e29b-41d4-a716-446655440001 \
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Update a device -->
         <div class="mt-12">
           <div class="flex items-center gap-x-3">
             <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Update a device</h3>
-            <span class="inline-flex items-center rounded-md bg-wheat-50 px-2 py-1 text-xs font-medium text-wheat-700 ring-1 ring-inset ring-wheat-600/20 dark:bg-wheat-400/10 dark:text-wheat-400 dark:ring-wheat-400/30">
+            <span class="inline-flex items-center rounded-md bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700 ring-1 ring-inset ring-amber-600/20 dark:bg-amber-400/10 dark:text-amber-400 dark:ring-amber-400/30">
               PATCH
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/devices/:id
             </span>
           </div>
 
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Updates an existing device. Only provided fields will be updated.
               </p>
             </div>
 
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -1216,7 +1202,7 @@ curl -X PATCH https://towerops.net/api/v1/devices/650e8400-e29b-41d4-a716-446655
 """) %></code></pre>
               </div>
 
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -1240,29 +1226,29 @@ curl -X PATCH https://towerops.net/api/v1/devices/650e8400-e29b-41d4-a716-446655
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Delete a device -->
         <div class="mt-12">
           <div class="flex items-center gap-x-3">
             <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Delete a device</h3>
-            <span class="inline-flex items-center rounded-md bg-sweet-salmon-50 px-2 py-1 text-xs font-medium text-sweet-salmon-700 ring-1 ring-inset ring-sweet-salmon-600/20 dark:bg-sweet-salmon-400/10 dark:text-sweet-salmon-400 dark:ring-sweet-salmon-400/30">
+            <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/30">
               DELETE
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/devices/:id
             </span>
           </div>
 
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Deletes a device. Note: This will also delete all monitoring data associated with the device.
               </p>
             </div>
 
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -1272,7 +1258,7 @@ curl -X DELETE https://towerops.net/api/v1/devices/650e8400-e29b-41d4-a716-44665
 """) %></code></pre>
               </div>
 
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -1287,21 +1273,21 @@ curl -X DELETE https://towerops.net/api/v1/devices/650e8400-e29b-41d4-a716-44665
         </div>
       </section>
 
-      <hr class="my-16 border-cool-steel-200 dark:border-white/10" />
+      <hr class="my-16 border-gray-200 dark:border-white/10" />
       
 <!-- Account Data Resource (GDPR) -->
       <section id="account-data" class="scroll-mt-24 mb-16">
         <h2 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
           Account Data (GDPR)
         </h2>
-        <p class="mt-4 text-base text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-4 text-base text-gray-600 dark:text-gray-400">
           GDPR Right to Access endpoint that allows users to download all their personal data in JSON format. This endpoint complies with Article 15 of GDPR.
         </p>
 
-        <div class="mt-6 rounded-lg bg-wheat-50 dark:bg-wheat-900/10 p-4 border border-wheat-200 dark:border-wheat-800">
+        <div class="mt-6 rounded-lg bg-amber-50 dark:bg-amber-900/10 p-4 border border-amber-200 dark:border-amber-800">
           <div class="flex">
             <div class="flex-shrink-0">
-              <svg class="h-5 w-5 text-wheat-400" viewBox="0 0 20 20" fill="currentColor">
+              <svg class="h-5 w-5 text-amber-400" viewBox="0 0 20 20" fill="currentColor">
                 <path
                   fill-rule="evenodd"
                   d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
@@ -1310,10 +1296,10 @@ curl -X DELETE https://towerops.net/api/v1/devices/650e8400-e29b-41d4-a716-44665
               </svg>
             </div>
             <div class="ml-3">
-              <h3 class="text-sm font-medium text-wheat-800 dark:text-wheat-200">
+              <h3 class="text-sm font-medium text-amber-800 dark:text-amber-200">
                 Authentication Difference
               </h3>
-              <div class="mt-2 text-sm text-wheat-700 dark:text-wheat-300">
+              <div class="mt-2 text-sm text-amber-700 dark:text-amber-300">
                 <p>
                   This endpoint requires <strong>browser session authentication</strong>, not API tokens. Users must be logged into their Towerops account via the web interface to access this endpoint.
                 </p>
@@ -1331,7 +1317,7 @@ curl -X DELETE https://towerops.net/api/v1/devices/650e8400-e29b-41d4-a716-44665
             <span class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/30">
               GET
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/account/data
             </span>
           </div>
@@ -1339,11 +1325,11 @@ curl -X DELETE https://towerops.net/api/v1/devices/650e8400-e29b-41d4-a716-44665
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <!-- Left column - description -->
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Downloads all personal data associated with the authenticated user account as a JSON file. This includes:
               </p>
 
-              <ul class="mt-4 space-y-2 text-sm text-cool-steel-600 dark:text-cool-steel-400 list-disc list-inside">
+              <ul class="mt-4 space-y-2 text-sm text-gray-600 dark:text-gray-400 list-disc list-inside">
                 <li>Profile information (email, name, timezone)</li>
                 <li>Organizations and membership roles</li>
                 <li>Devices across all organizations</li>
@@ -1351,8 +1337,8 @@ curl -X DELETE https://towerops.net/api/v1/devices/650e8400-e29b-41d4-a716-44665
                 <li>Audit logs (up to 1,000 most recent)</li>
               </ul>
 
-              <div class="mt-6 rounded-lg bg-cerulean-50 dark:bg-cerulean-900/10 p-4 border border-cerulean-200 dark:border-cerulean-800">
-                <p class="text-sm text-cerulean-700 dark:text-cerulean-300">
+              <div class="mt-6 rounded-lg bg-blue-50 dark:bg-blue-900/10 p-4 border border-blue-200 dark:border-blue-800">
+                <p class="text-sm text-blue-700 dark:text-blue-300">
                   <strong>Privacy Note:</strong>
                   Sensitive data like SNMP community strings are redacted from the export for security.
                 </p>
@@ -1361,14 +1347,14 @@ curl -X DELETE https://towerops.net/api/v1/devices/650e8400-e29b-41d4-a716-44665
               <h4 class="mt-6 text-sm font-semibold text-zinc-900 dark:text-white">
                 Authentication
               </h4>
-              <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                 Requires active browser session with CSRF token. Cannot be accessed via API tokens.
               </p>
             </div>
             
 <!-- Right column - code example -->
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request (Browser)</p>
                 </div>
@@ -1383,7 +1369,7 @@ curl https://towerops.net/api/v1/account/data \
 """) %></code></pre>
               </div>
 
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -1477,7 +1463,7 @@ curl https://towerops.net/api/v1/account/data \
 """) %></code></pre>
               </div>
 
-              <div class="mt-4 rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950 p-4">
+              <div class="mt-4 rounded-lg bg-gray-900 dark:bg-gray-950 p-4">
                 <p class="text-xs font-medium text-zinc-400 mb-2">Response Headers</p>
                 <pre class="text-sm text-zinc-100 overflow-x-auto"><code><%= raw(~S"""
 Content-Type: application/json
@@ -1489,14 +1475,14 @@ Content-Disposition: attachment; filename="towerops-data-{user_id}-{timestamp}.j
         </div>
       </section>
 
-      <hr class="my-16 border-cool-steel-200 dark:border-white/10" />
+      <hr class="my-16 border-gray-200 dark:border-white/10" />
       
 <!-- Alerts Resource -->
       <section id="alerts" class="scroll-mt-24 mb-16">
         <h2 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
           Alerts
         </h2>
-        <p class="mt-4 text-base text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-4 text-base text-gray-600 dark:text-gray-400">
           Alerts represent monitoring events triggered when a device check fails or recovers. You can list, view, acknowledge, and resolve alerts.
         </p>
         
@@ -1504,114 +1490,114 @@ Content-Disposition: attachment; filename="towerops-data-{user_id}-{timestamp}.j
         <div class="mt-12">
           <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">The alert model</h3>
           <div class="mt-6">
-            <dl class="divide-y divide-cool-steel-200 dark:divide-white/10">
+            <dl class="divide-y divide-gray-200 dark:divide-white/10">
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   id
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Unique identifier (UUID).
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   alert_type
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Type of alert (e.g. "ping_down", "snmp_down").
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   message
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Human-readable alert message.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   triggered_at
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     timestamp
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   When the alert was triggered.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   acknowledged_at
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     timestamp
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   When the alert was acknowledged (null if not acknowledged).
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   resolved_at
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     timestamp
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   When the alert was resolved (null if still active).
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   device_id
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   The device this alert belongs to.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   device_name
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Name of the associated device.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   acknowledged_by_email
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Email of the user who acknowledged this alert.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   gaiia_impact
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   AI-generated impact assessment (if available).
                 </dd>
               </div>
@@ -1619,7 +1605,7 @@ Content-Disposition: attachment; filename="towerops-data-{user_id}-{timestamp}.j
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- List alerts -->
         <div class="mt-12">
@@ -1628,56 +1614,54 @@ Content-Disposition: attachment; filename="towerops-data-{user_id}-{timestamp}.j
             <span class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/30">
               GET
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
-              /api/v1/alerts
-            </span>
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">/api/v1/alerts</span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Returns all alerts for the authenticated organization.
               </p>
               <h4 class="mt-6 text-sm font-semibold text-zinc-900 dark:text-white">
                 Optional parameters
               </h4>
-              <dl class="mt-3 divide-y divide-cool-steel-200 dark:divide-white/10">
+              <dl class="mt-3 divide-y divide-gray-200 dark:divide-white/10">
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     status
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Filter by status (e.g. "active", "acknowledged", "resolved").
                   </dd>
                 </div>
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     device_id
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Filter alerts for a specific device.
                   </dd>
                 </div>
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     limit
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       integer
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Maximum number of alerts to return.
                   </dd>
                 </div>
               </dl>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -1687,7 +1671,7 @@ curl -G https://towerops.net/api/v1/alerts \\
   -d status=active
 """) %></code></pre>
               </div>
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -1715,7 +1699,7 @@ curl -G https://towerops.net/api/v1/alerts \\
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Show alert -->
         <div class="mt-12">
@@ -1724,18 +1708,18 @@ curl -G https://towerops.net/api/v1/alerts \\
             <span class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/30">
               GET
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/alerts/:id
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Retrieves a single alert by its ID.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -1748,7 +1732,7 @@ curl https://towerops.net/api/v1/alerts/a1b2c3d4-e5f6-7890-abcd-ef1234567890 \\
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Acknowledge alert -->
         <div class="mt-12">
@@ -1756,21 +1740,21 @@ curl https://towerops.net/api/v1/alerts/a1b2c3d4-e5f6-7890-abcd-ef1234567890 \\
             <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">
               Acknowledge an alert
             </h3>
-            <span class="inline-flex items-center rounded-md bg-cerulean-50 px-2 py-1 text-xs font-medium text-cerulean-700 ring-1 ring-inset ring-cerulean-600/20 dark:bg-cerulean-400/10 dark:text-cerulean-400 dark:ring-cerulean-400/30">
+            <span class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30">
               POST
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/alerts/:id/acknowledge
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Marks an alert as acknowledged. The acknowledging user is recorded automatically.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -1779,7 +1763,7 @@ curl -X POST https://towerops.net/api/v1/alerts/a1b2c3d4-e5f6-7890-abcd-ef123456
   -H "Authorization: Bearer #{@sample_token}"
 """) %></code></pre>
               </div>
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -1805,27 +1789,27 @@ curl -X POST https://towerops.net/api/v1/alerts/a1b2c3d4-e5f6-7890-abcd-ef123456
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Resolve alert -->
         <div class="mt-12">
           <div class="flex items-center gap-x-3">
             <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Resolve an alert</h3>
-            <span class="inline-flex items-center rounded-md bg-cerulean-50 px-2 py-1 text-xs font-medium text-cerulean-700 ring-1 ring-inset ring-cerulean-600/20 dark:bg-cerulean-400/10 dark:text-cerulean-400 dark:ring-cerulean-400/30">
+            <span class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30">
               POST
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/alerts/:id/resolve
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Manually resolves an alert. Alerts may also be resolved automatically when the underlying condition clears.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -1839,14 +1823,14 @@ curl -X POST https://towerops.net/api/v1/alerts/a1b2c3d4-e5f6-7890-abcd-ef123456
         </div>
       </section>
 
-      <hr class="my-16 border-cool-steel-200 dark:border-white/10" />
+      <hr class="my-16 border-gray-200 dark:border-white/10" />
       
 <!-- Agents Resource -->
       <section id="agents" class="scroll-mt-24 mb-16">
         <h2 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
           Agents
         </h2>
-        <p class="mt-4 text-base text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-4 text-base text-gray-600 dark:text-gray-400">
           Agents are lightweight monitoring agents that run on your infrastructure to collect device data. Each agent has a token used for authentication.
         </p>
         
@@ -1854,70 +1838,68 @@ curl -X POST https://towerops.net/api/v1/alerts/a1b2c3d4-e5f6-7890-abcd-ef123456
         <div class="mt-12">
           <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">The agent model</h3>
           <div class="mt-6">
-            <dl class="divide-y divide-cool-steel-200 dark:divide-white/10">
+            <dl class="divide-y divide-gray-200 dark:divide-white/10">
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   id
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Unique identifier (UUID).
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   name
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
-                  Name of the agent.
-                </dd>
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">Name of the agent.</dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   enabled
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     boolean
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Whether the agent is enabled.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   last_seen_at
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     timestamp
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   When the agent last checked in.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   last_ip
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Last known IP address of the agent.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   metadata
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     object
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Agent metadata (version, OS, etc.).
                 </dd>
               </div>
@@ -1925,7 +1907,7 @@ curl -X POST https://towerops.net/api/v1/alerts/a1b2c3d4-e5f6-7890-abcd-ef123456
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- List agents -->
         <div class="mt-12">
@@ -1934,18 +1916,16 @@ curl -X POST https://towerops.net/api/v1/alerts/a1b2c3d4-e5f6-7890-abcd-ef123456
             <span class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/30">
               GET
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
-              /api/v1/agents
-            </span>
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">/api/v1/agents</span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Returns all agent tokens for the authenticated organization.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -1954,7 +1934,7 @@ curl -G https://towerops.net/api/v1/agents \\
   -H "Authorization: Bearer #{@sample_token}"
 """) %></code></pre>
               </div>
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -1978,43 +1958,41 @@ curl -G https://towerops.net/api/v1/agents \\
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Create agent -->
         <div class="mt-12">
           <div class="flex items-center gap-x-3">
             <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Create an agent</h3>
-            <span class="inline-flex items-center rounded-md bg-cerulean-50 px-2 py-1 text-xs font-medium text-cerulean-700 ring-1 ring-inset ring-cerulean-600/20 dark:bg-cerulean-400/10 dark:text-cerulean-400 dark:ring-cerulean-400/30">
+            <span class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30">
               POST
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
-              /api/v1/agents
-            </span>
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">/api/v1/agents</span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Creates a new agent token. The raw token is returned only once in the response — store it securely.
               </p>
               <h4 class="mt-6 text-sm font-semibold text-zinc-900 dark:text-white">
                 Required parameters
               </h4>
-              <dl class="mt-3 divide-y divide-cool-steel-200 dark:divide-white/10">
+              <dl class="mt-3 divide-y divide-gray-200 dark:divide-white/10">
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     name
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     A descriptive name for the agent.
                   </dd>
                 </div>
               </dl>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -2025,7 +2003,7 @@ curl -X POST https://towerops.net/api/v1/agents \\
   -d '{"name": "new-site-agent"}'
 """) %></code></pre>
               </div>
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response (201 Created)</p>
                 </div>
@@ -2048,7 +2026,7 @@ curl -X POST https://towerops.net/api/v1/agents \\
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Show agent -->
         <div class="mt-12">
@@ -2057,18 +2035,18 @@ curl -X POST https://towerops.net/api/v1/agents \\
             <span class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/30">
               GET
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/agents/:id
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Retrieves a single agent by ID. Includes a count of assigned devices.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -2077,7 +2055,7 @@ curl https://towerops.net/api/v1/agents/b2c3d4e5-f6a7-8901-bcde-f12345678901 \\
   -H "Authorization: Bearer #{@sample_token}"
 """) %></code></pre>
               </div>
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -2100,27 +2078,27 @@ curl https://towerops.net/api/v1/agents/b2c3d4e5-f6a7-8901-bcde-f12345678901 \\
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Delete agent -->
         <div class="mt-12">
           <div class="flex items-center gap-x-3">
             <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Delete an agent</h3>
-            <span class="inline-flex items-center rounded-md bg-sweet-salmon-50 px-2 py-1 text-xs font-medium text-sweet-salmon-700 ring-1 ring-inset ring-sweet-salmon-600/20 dark:bg-sweet-salmon-400/10 dark:text-sweet-salmon-400 dark:ring-sweet-salmon-400/30">
+            <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/30">
               DELETE
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/agents/:id
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Permanently deletes an agent token. Devices assigned to this agent will need to be reassigned.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -2129,7 +2107,7 @@ curl -X DELETE https://towerops.net/api/v1/agents/b2c3d4e5-f6a7-8901-bcde-f12345
   -H "Authorization: Bearer #{@sample_token}"
 """) %></code></pre>
               </div>
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response (204 No Content)</p>
                 </div>
@@ -2142,14 +2120,14 @@ curl -X DELETE https://towerops.net/api/v1/agents/b2c3d4e5-f6a7-8901-bcde-f12345
         </div>
       </section>
 
-      <hr class="my-16 border-cool-steel-200 dark:border-white/10" />
+      <hr class="my-16 border-gray-200 dark:border-white/10" />
       
 <!-- Organization Resource -->
       <section id="organization" class="scroll-mt-24 mb-16">
         <h2 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
           Organization
         </h2>
-        <p class="mt-4 text-base text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-4 text-base text-gray-600 dark:text-gray-400">
           Retrieve and update settings for the authenticated organization, including SNMP defaults, MikroTik configuration, and general preferences.
         </p>
         
@@ -2159,81 +2137,81 @@ curl -X DELETE https://towerops.net/api/v1/agents/b2c3d4e5-f6a7-8901-bcde-f12345
             The organization model
           </h3>
           <div class="mt-6">
-            <dl class="divide-y divide-cool-steel-200 dark:divide-white/10">
+            <dl class="divide-y divide-gray-200 dark:divide-white/10">
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   id
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Unique identifier (UUID).
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   name
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Organization display name.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   slug
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   URL-friendly identifier.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   subscription_plan
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Current subscription plan.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   snmp_version
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Default SNMP version (v2c or v3).
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   snmp_community
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Default SNMP community string.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   mikrotik_enabled
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     boolean
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Whether MikroTik API integration is enabled.
                 </dd>
               </div>
@@ -2241,7 +2219,7 @@ curl -X DELETE https://towerops.net/api/v1/agents/b2c3d4e5-f6a7-8901-bcde-f12345
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Show organization -->
         <div class="mt-12">
@@ -2252,18 +2230,18 @@ curl -X DELETE https://towerops.net/api/v1/agents/b2c3d4e5-f6a7-8901-bcde-f12345
             <span class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/30">
               GET
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/organization
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Returns the full settings for the authenticated organization.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -2272,7 +2250,7 @@ curl https://towerops.net/api/v1/organization \\
   -H "Authorization: Bearer #{@sample_token}"
 """) %></code></pre>
               </div>
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -2308,7 +2286,7 @@ curl https://towerops.net/api/v1/organization \\
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Update organization -->
         <div class="mt-12">
@@ -2316,48 +2294,48 @@ curl https://towerops.net/api/v1/organization \\
             <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">
               Update organization settings
             </h3>
-            <span class="inline-flex items-center rounded-md bg-wheat-50 px-2 py-1 text-xs font-medium text-wheat-700 ring-1 ring-inset ring-wheat-600/20 dark:bg-wheat-400/10 dark:text-wheat-400 dark:ring-wheat-400/30">
+            <span class="inline-flex items-center rounded-md bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700 ring-1 ring-inset ring-amber-600/20 dark:bg-amber-400/10 dark:text-amber-400 dark:ring-amber-400/30">
               PATCH
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/organization
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Updates organization settings. Only the provided fields are changed.
               </p>
               <h4 class="mt-6 text-sm font-semibold text-zinc-900 dark:text-white">
                 Parameters (all optional)
               </h4>
-              <dl class="mt-3 divide-y divide-cool-steel-200 dark:divide-white/10">
+              <dl class="mt-3 divide-y divide-gray-200 dark:divide-white/10">
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     organization[name]
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Organization display name.
                   </dd>
                 </div>
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     organization[snmp_community]
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Default SNMP community string.
                   </dd>
                 </div>
               </dl>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -2373,14 +2351,14 @@ curl -X PATCH https://towerops.net/api/v1/organization \\
         </div>
       </section>
 
-      <hr class="my-16 border-cool-steel-200 dark:border-white/10" />
+      <hr class="my-16 border-gray-200 dark:border-white/10" />
       
 <!-- Members Resource -->
       <section id="members" class="scroll-mt-24 mb-16">
         <h2 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
           Members
         </h2>
-        <p class="mt-4 text-base text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-4 text-base text-gray-600 dark:text-gray-400">
           Manage the users who belong to your organization. You can list members, change roles, and remove members.
         </p>
         
@@ -2388,37 +2366,37 @@ curl -X PATCH https://towerops.net/api/v1/organization \\
         <div class="mt-12">
           <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">The member model</h3>
           <div class="mt-6">
-            <dl class="divide-y divide-cool-steel-200 dark:divide-white/10">
+            <dl class="divide-y divide-gray-200 dark:divide-white/10">
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   id
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   User ID of the member.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   email
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Email address of the member.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   role
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Member's role (e.g. "owner", "admin", "member").
                 </dd>
               </div>
@@ -2426,7 +2404,7 @@ curl -X PATCH https://towerops.net/api/v1/organization \\
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- List members -->
         <div class="mt-12">
@@ -2435,18 +2413,18 @@ curl -X PATCH https://towerops.net/api/v1/organization \\
             <span class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/30">
               GET
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/members
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Returns all members of the authenticated organization.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -2455,7 +2433,7 @@ curl -G https://towerops.net/api/v1/members \\
   -H "Authorization: Bearer #{@sample_token}"
 """) %></code></pre>
               </div>
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -2482,7 +2460,7 @@ curl -G https://towerops.net/api/v1/members \\
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Change member role -->
         <div class="mt-12">
@@ -2490,37 +2468,37 @@ curl -G https://towerops.net/api/v1/members \\
             <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">
               Change member role
             </h3>
-            <span class="inline-flex items-center rounded-md bg-wheat-50 px-2 py-1 text-xs font-medium text-wheat-700 ring-1 ring-inset ring-wheat-600/20 dark:bg-wheat-400/10 dark:text-wheat-400 dark:ring-wheat-400/30">
+            <span class="inline-flex items-center rounded-md bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700 ring-1 ring-inset ring-amber-600/20 dark:bg-amber-400/10 dark:text-amber-400 dark:ring-amber-400/30">
               PATCH
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/members/:user_id
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Updates a member's role. Cannot change the owner's role.
               </p>
               <h4 class="mt-6 text-sm font-semibold text-zinc-900 dark:text-white">
                 Required parameters
               </h4>
-              <dl class="mt-3 divide-y divide-cool-steel-200 dark:divide-white/10">
+              <dl class="mt-3 divide-y divide-gray-200 dark:divide-white/10">
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     role
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     New role for the member (e.g. "admin", "member").
                   </dd>
                 </div>
               </dl>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -2535,27 +2513,27 @@ curl -X PATCH https://towerops.net/api/v1/members/user-uuid-2 \\
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Remove member -->
         <div class="mt-12">
           <div class="flex items-center gap-x-3">
             <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Remove a member</h3>
-            <span class="inline-flex items-center rounded-md bg-sweet-salmon-50 px-2 py-1 text-xs font-medium text-sweet-salmon-700 ring-1 ring-inset ring-sweet-salmon-600/20 dark:bg-sweet-salmon-400/10 dark:text-sweet-salmon-400 dark:ring-sweet-salmon-400/30">
+            <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/30">
               DELETE
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/members/:user_id
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Removes a member from the organization. The organization owner cannot be removed.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -2569,14 +2547,14 @@ curl -X DELETE https://towerops.net/api/v1/members/user-uuid-2 \\
         </div>
       </section>
 
-      <hr class="my-16 border-cool-steel-200 dark:border-white/10" />
+      <hr class="my-16 border-gray-200 dark:border-white/10" />
       
 <!-- Invitations Resource -->
       <section id="invitations" class="scroll-mt-24 mb-16">
         <h2 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
           Invitations
         </h2>
-        <p class="mt-4 text-base text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-4 text-base text-gray-600 dark:text-gray-400">
           Invite new users to your organization. Invitations expire after 7 days.
         </p>
         
@@ -2586,59 +2564,59 @@ curl -X DELETE https://towerops.net/api/v1/members/user-uuid-2 \\
             The invitation model
           </h3>
           <div class="mt-6">
-            <dl class="divide-y divide-cool-steel-200 dark:divide-white/10">
+            <dl class="divide-y divide-gray-200 dark:divide-white/10">
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   id
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Unique identifier (UUID).
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   email
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Email address of the invited user.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   role
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Role the user will receive upon accepting.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   expires_at
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     timestamp
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   When the invitation expires.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   invited_by_email
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Email of the user who sent the invitation.
                 </dd>
               </div>
@@ -2646,7 +2624,7 @@ curl -X DELETE https://towerops.net/api/v1/members/user-uuid-2 \\
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- List invitations -->
         <div class="mt-12">
@@ -2657,18 +2635,18 @@ curl -X DELETE https://towerops.net/api/v1/members/user-uuid-2 \\
             <span class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/30">
               GET
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/invitations
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Returns all pending invitations for the organization.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -2677,7 +2655,7 @@ curl -G https://towerops.net/api/v1/invitations \\
   -H "Authorization: Bearer #{@sample_token}"
 """) %></code></pre>
               </div>
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -2700,7 +2678,7 @@ curl -G https://towerops.net/api/v1/invitations \\
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Create invitation -->
         <div class="mt-12">
@@ -2708,48 +2686,48 @@ curl -G https://towerops.net/api/v1/invitations \\
             <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">
               Create an invitation
             </h3>
-            <span class="inline-flex items-center rounded-md bg-cerulean-50 px-2 py-1 text-xs font-medium text-cerulean-700 ring-1 ring-inset ring-cerulean-600/20 dark:bg-cerulean-400/10 dark:text-cerulean-400 dark:ring-cerulean-400/30">
+            <span class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30">
               POST
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/invitations
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Sends an invitation to join the organization.
               </p>
               <h4 class="mt-6 text-sm font-semibold text-zinc-900 dark:text-white">
                 Required parameters
               </h4>
-              <dl class="mt-3 divide-y divide-cool-steel-200 dark:divide-white/10">
+              <dl class="mt-3 divide-y divide-gray-200 dark:divide-white/10">
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     email
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Email address to invite.
                   </dd>
                 </div>
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     role
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Role to assign (e.g. "admin", "member").
                   </dd>
                 </div>
               </dl>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -2764,7 +2742,7 @@ curl -X POST https://towerops.net/api/v1/invitations \\
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Cancel invitation -->
         <div class="mt-12">
@@ -2772,21 +2750,21 @@ curl -X POST https://towerops.net/api/v1/invitations \\
             <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">
               Cancel an invitation
             </h3>
-            <span class="inline-flex items-center rounded-md bg-sweet-salmon-50 px-2 py-1 text-xs font-medium text-sweet-salmon-700 ring-1 ring-inset ring-sweet-salmon-600/20 dark:bg-sweet-salmon-400/10 dark:text-sweet-salmon-400 dark:ring-sweet-salmon-400/30">
+            <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/30">
               DELETE
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/invitations/:id
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Cancels a pending invitation.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -2800,14 +2778,14 @@ curl -X DELETE https://towerops.net/api/v1/invitations/inv-uuid-1 \\
         </div>
       </section>
 
-      <hr class="my-16 border-cool-steel-200 dark:border-white/10" />
+      <hr class="my-16 border-gray-200 dark:border-white/10" />
       
 <!-- Integrations Resource -->
       <section id="integrations" class="scroll-mt-24 mb-16">
         <h2 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
           Integrations
         </h2>
-        <p class="mt-4 text-base text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-4 text-base text-gray-600 dark:text-gray-400">
           Manage third-party integrations for your organization, such as notification providers and external monitoring systems.
         </p>
         
@@ -2817,70 +2795,70 @@ curl -X DELETE https://towerops.net/api/v1/invitations/inv-uuid-1 \\
             The integration model
           </h3>
           <div class="mt-6">
-            <dl class="divide-y divide-cool-steel-200 dark:divide-white/10">
+            <dl class="divide-y divide-gray-200 dark:divide-white/10">
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   id
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Unique identifier (UUID).
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   provider
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Integration provider name (e.g. "slack", "pagerduty", "email").
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   enabled
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     boolean
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Whether the integration is active.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   sync_interval_minutes
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     integer
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   How often the integration syncs (in minutes).
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   last_synced_at
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     timestamp
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   When the integration last synced.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   last_sync_status
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Status of the last sync ("success", "error", etc.).
                 </dd>
               </div>
@@ -2888,7 +2866,7 @@ curl -X DELETE https://towerops.net/api/v1/invitations/inv-uuid-1 \\
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- List integrations -->
         <div class="mt-12">
@@ -2899,18 +2877,18 @@ curl -X DELETE https://towerops.net/api/v1/invitations/inv-uuid-1 \\
             <span class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/30">
               GET
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/integrations
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Returns all integrations for the organization.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -2919,7 +2897,7 @@ curl -G https://towerops.net/api/v1/integrations \\
   -H "Authorization: Bearer #{@sample_token}"
 """) %></code></pre>
               </div>
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -2944,7 +2922,7 @@ curl -G https://towerops.net/api/v1/integrations \\
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Create integration -->
         <div class="mt-12">
@@ -2952,30 +2930,28 @@ curl -G https://towerops.net/api/v1/integrations \\
             <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">
               Create an integration
             </h3>
-            <span class="inline-flex items-center rounded-md bg-cerulean-50 px-2 py-1 text-xs font-medium text-cerulean-700 ring-1 ring-inset ring-cerulean-600/20 dark:bg-cerulean-400/10 dark:text-cerulean-400 dark:ring-cerulean-400/30">
+            <span class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30">
               POST
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/integrations
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
-                Creates a new integration.
-              </p>
+              <p class="text-sm text-gray-600 dark:text-gray-400">Creates a new integration.</p>
               <h4 class="mt-6 text-sm font-semibold text-zinc-900 dark:text-white">
                 Required parameters
               </h4>
-              <dl class="mt-3 divide-y divide-cool-steel-200 dark:divide-white/10">
+              <dl class="mt-3 divide-y divide-gray-200 dark:divide-white/10">
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     integration[provider]
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Provider name (e.g. "slack", "pagerduty").
                   </dd>
                 </div>
@@ -2983,33 +2959,33 @@ curl -G https://towerops.net/api/v1/integrations \\
               <h4 class="mt-6 text-sm font-semibold text-zinc-900 dark:text-white">
                 Optional parameters
               </h4>
-              <dl class="mt-3 divide-y divide-cool-steel-200 dark:divide-white/10">
+              <dl class="mt-3 divide-y divide-gray-200 dark:divide-white/10">
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     integration[enabled]
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       boolean
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Whether to enable the integration immediately (default: true).
                   </dd>
                 </div>
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     integration[sync_interval_minutes]
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       integer
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Sync interval in minutes.
                   </dd>
                 </div>
               </dl>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -3024,7 +3000,7 @@ curl -X POST https://towerops.net/api/v1/integrations \\
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Show integration -->
         <div class="mt-12">
@@ -3035,18 +3011,18 @@ curl -X POST https://towerops.net/api/v1/integrations \\
             <span class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/30">
               GET
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/integrations/:id
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Retrieves a single integration by ID.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -3059,7 +3035,7 @@ curl https://towerops.net/api/v1/integrations/intg-uuid-1 \\
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Update integration -->
         <div class="mt-12">
@@ -3067,21 +3043,21 @@ curl https://towerops.net/api/v1/integrations/intg-uuid-1 \\
             <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">
               Update an integration
             </h3>
-            <span class="inline-flex items-center rounded-md bg-wheat-50 px-2 py-1 text-xs font-medium text-wheat-700 ring-1 ring-inset ring-wheat-600/20 dark:bg-wheat-400/10 dark:text-wheat-400 dark:ring-wheat-400/30">
+            <span class="inline-flex items-center rounded-md bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700 ring-1 ring-inset ring-amber-600/20 dark:bg-amber-400/10 dark:text-amber-400 dark:ring-amber-400/30">
               PATCH
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/integrations/:id
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Updates an integration's settings.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -3096,7 +3072,7 @@ curl -X PATCH https://towerops.net/api/v1/integrations/intg-uuid-1 \\
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Delete integration -->
         <div class="mt-12">
@@ -3104,21 +3080,21 @@ curl -X PATCH https://towerops.net/api/v1/integrations/intg-uuid-1 \\
             <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">
               Delete an integration
             </h3>
-            <span class="inline-flex items-center rounded-md bg-sweet-salmon-50 px-2 py-1 text-xs font-medium text-sweet-salmon-700 ring-1 ring-inset ring-sweet-salmon-600/20 dark:bg-sweet-salmon-400/10 dark:text-sweet-salmon-400 dark:ring-sweet-salmon-400/30">
+            <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/30">
               DELETE
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/integrations/:id
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Permanently deletes an integration.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -3131,27 +3107,27 @@ curl -X DELETE https://towerops.net/api/v1/integrations/intg-uuid-1 \\
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Test integration connection -->
         <div class="mt-12">
           <div class="flex items-center gap-x-3">
             <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Test connection</h3>
-            <span class="inline-flex items-center rounded-md bg-cerulean-50 px-2 py-1 text-xs font-medium text-cerulean-700 ring-1 ring-inset ring-cerulean-600/20 dark:bg-cerulean-400/10 dark:text-cerulean-400 dark:ring-cerulean-400/30">
+            <span class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30">
               POST
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/integrations/:id/test
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Tests the connection for an integration to verify it's properly configured.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -3160,7 +3136,7 @@ curl -X POST https://towerops.net/api/v1/integrations/intg-uuid-1/test \\
   -H "Authorization: Bearer #{@sample_token}"
 """) %></code></pre>
               </div>
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -3178,14 +3154,14 @@ curl -X POST https://towerops.net/api/v1/integrations/intg-uuid-1/test \\
         </div>
       </section>
 
-      <hr class="my-16 border-cool-steel-200 dark:border-white/10" />
+      <hr class="my-16 border-gray-200 dark:border-white/10" />
       
 <!-- Checks Resource -->
       <section id="checks" class="scroll-mt-24 mb-16">
         <h2 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
           Checks
         </h2>
-        <p class="mt-4 text-base text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-4 text-base text-gray-600 dark:text-gray-400">
           Service checks monitor the availability and responsiveness of network services. Supported check types: HTTP, TCP, DNS, and ping. SNMP checks are managed internally and are not exposed via this API.
         </p>
         
@@ -3193,92 +3169,92 @@ curl -X POST https://towerops.net/api/v1/integrations/intg-uuid-1/test \\
         <div class="mt-12">
           <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">The check model</h3>
           <div class="mt-6">
-            <dl class="divide-y divide-cool-steel-200 dark:divide-white/10">
+            <dl class="divide-y divide-gray-200 dark:divide-white/10">
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   id
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Unique identifier for the check (UUID).
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   name
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   The name of the check.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   check_type
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   The type of check: <code>http</code>, <code>tcp</code>, <code>dns</code>, or <code>ping</code>.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   enabled
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     boolean
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Whether the check is enabled and scheduled to run.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   config
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     object
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Type-specific configuration. HTTP: <code>url</code>, <code>method</code>, <code>expected_status</code>, <code>verify_ssl</code>, <code>follow_redirects</code>, <code>regex</code>. TCP: <code>host</code>, <code>port</code>, <code>send</code>, <code>expect</code>. DNS: <code>hostname</code>, <code>record_type</code>, <code>server</code>, <code>expected</code>. Ping: <code>host</code>, <code>count</code>.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   interval_seconds
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     integer
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   How often the check runs, in seconds. Default: 60.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   current_state
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     integer
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Current check state: 0=OK, 1=WARNING, 2=CRITICAL, 3=UNKNOWN.
                 </dd>
               </div>
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   current_state_type
-                  <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                     string
                   </span>
                 </dt>
-                <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   Current state type: <code>soft</code> or <code>hard</code>.
                 </dd>
               </div>
@@ -3286,7 +3262,7 @@ curl -X POST https://towerops.net/api/v1/integrations/intg-uuid-1/test \\
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- List all checks -->
         <div class="mt-12">
@@ -3295,40 +3271,38 @@ curl -X POST https://towerops.net/api/v1/integrations/intg-uuid-1/test \\
             <span class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/30">
               GET
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
-              /api/v1/checks
-            </span>
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">/api/v1/checks</span>
           </div>
 
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Lists all service checks for the authenticated organization. Only returns HTTP, TCP, DNS, and ping checks.
               </p>
 
               <h4 class="mt-6 text-sm font-semibold text-zinc-900 dark:text-white">
                 Optional query parameters
               </h4>
-              <dl class="mt-3 divide-y divide-cool-steel-200 dark:divide-white/10">
+              <dl class="mt-3 divide-y divide-gray-200 dark:divide-white/10">
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     check_type
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Filter by check type: <code>http</code>, <code>tcp</code>, <code>dns</code>, or <code>ping</code>.
                   </dd>
                 </div>
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     device_id
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Filter checks by device UUID.
                   </dd>
                 </div>
@@ -3336,7 +3310,7 @@ curl -X POST https://towerops.net/api/v1/integrations/intg-uuid-1/test \\
             </div>
 
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -3347,7 +3321,7 @@ curl -G https://towerops.net/api/v1/checks \
 """) %></code></pre>
               </div>
 
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -3374,60 +3348,58 @@ curl -G https://towerops.net/api/v1/checks \
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Create a check -->
         <div class="mt-12">
           <div class="flex items-center gap-x-3">
             <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Create a check</h3>
-            <span class="inline-flex items-center rounded-md bg-cerulean-50 px-2 py-1 text-xs font-medium text-cerulean-700 ring-1 ring-inset ring-cerulean-600/20 dark:bg-cerulean-400/10 dark:text-cerulean-400 dark:ring-cerulean-400/30">
+            <span class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30">
               POST
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
-              /api/v1/checks
-            </span>
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">/api/v1/checks</span>
           </div>
 
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Creates a new service check for the authenticated organization. The check is automatically scheduled if enabled.
               </p>
 
               <h4 class="mt-6 text-sm font-semibold text-zinc-900 dark:text-white">
                 Required parameters
               </h4>
-              <dl class="mt-3 divide-y divide-cool-steel-200 dark:divide-white/10">
+              <dl class="mt-3 divide-y divide-gray-200 dark:divide-white/10">
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     name
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     The name of the check.
                   </dd>
                 </div>
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     check_type
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     One of: <code>http</code>, <code>tcp</code>, <code>dns</code>, <code>ping</code>.
                   </dd>
                 </div>
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     config
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       object
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Type-specific configuration object. See check model for available fields.
                   </dd>
                 </div>
@@ -3436,37 +3408,37 @@ curl -G https://towerops.net/api/v1/checks \
               <h4 class="mt-6 text-sm font-semibold text-zinc-900 dark:text-white">
                 Optional parameters
               </h4>
-              <dl class="mt-3 divide-y divide-cool-steel-200 dark:divide-white/10">
+              <dl class="mt-3 divide-y divide-gray-200 dark:divide-white/10">
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     enabled
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       boolean
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Whether the check is enabled. Default: <code>true</code>.
                   </dd>
                 </div>
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     device_id
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Associate the check with a device.
                   </dd>
                 </div>
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     interval_seconds
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       integer
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     How often the check runs. Default: <code>60</code>.
                   </dd>
                 </div>
@@ -3474,7 +3446,7 @@ curl -G https://towerops.net/api/v1/checks \
             </div>
 
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -3486,7 +3458,7 @@ curl https://towerops.net/api/v1/checks \
 """) %></code></pre>
               </div>
 
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">
                     Response <span class="text-zinc-500">201 Created</span>
@@ -3510,7 +3482,7 @@ curl https://towerops.net/api/v1/checks \
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Get a check -->
         <div class="mt-12">
@@ -3519,20 +3491,20 @@ curl https://towerops.net/api/v1/checks \
             <span class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/30">
               GET
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/checks/:id
             </span>
           </div>
 
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Retrieves a single check by its UUID.
               </p>
             </div>
 
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -3545,29 +3517,29 @@ curl https://towerops.net/api/v1/checks/7c9e6679-7425-40de-944b-e07fc1f90ae7 \
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Update a check -->
         <div class="mt-12">
           <div class="flex items-center gap-x-3">
             <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Update a check</h3>
-            <span class="inline-flex items-center rounded-md bg-wheat-50 px-2 py-1 text-xs font-medium text-wheat-700 ring-1 ring-inset ring-wheat-600/20 dark:bg-wheat-400/10 dark:text-wheat-400 dark:ring-wheat-400/30">
+            <span class="inline-flex items-center rounded-md bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700 ring-1 ring-inset ring-amber-600/20 dark:bg-amber-400/10 dark:text-amber-400 dark:ring-amber-400/30">
               PATCH
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/checks/:id
             </span>
           </div>
 
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Updates an existing check. Only the provided fields will be updated.
               </p>
             </div>
 
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -3582,29 +3554,29 @@ curl -X PATCH https://towerops.net/api/v1/checks/7c9e6679-7425-40de-944b-e07fc1f
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Delete a check -->
         <div class="mt-12">
           <div class="flex items-center gap-x-3">
             <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Delete a check</h3>
-            <span class="inline-flex items-center rounded-md bg-sweet-salmon-50 px-2 py-1 text-xs font-medium text-sweet-salmon-700 ring-1 ring-inset ring-sweet-salmon-600/20 dark:bg-sweet-salmon-400/10 dark:text-sweet-salmon-400 dark:ring-sweet-salmon-400/30">
+            <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/30">
               DELETE
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/checks/:id
             </span>
           </div>
 
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Deletes a check and cancels any scheduled executions.
               </p>
             </div>
 
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -3614,7 +3586,7 @@ curl -X DELETE https://towerops.net/api/v1/checks/7c9e6679-7425-40de-944b-e07fc1
 """) %></code></pre>
               </div>
 
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -3629,18 +3601,18 @@ curl -X DELETE https://towerops.net/api/v1/checks/7c9e6679-7425-40de-944b-e07fc1
         </div>
       </section>
 
-      <hr class="my-16 border-cool-steel-200 dark:border-white/10" />
+      <hr class="my-16 border-gray-200 dark:border-white/10" />
       
 <!-- Check Results & Metrics Resource -->
       <section id="check-results" class="scroll-mt-24 mb-16">
         <h2 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
           Check Results & Metrics
         </h2>
-        <p class="mt-4 text-base text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-4 text-base text-gray-600 dark:text-gray-400">
           Access monitoring check results, historical metrics, and SNMP interface data for your devices.
         </p>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Device checks -->
         <div class="mt-12">
@@ -3651,18 +3623,18 @@ curl -X DELETE https://towerops.net/api/v1/checks/7c9e6679-7425-40de-944b-e07fc1
             <span class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/30">
               GET
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/devices/:device_id/checks
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Returns all monitoring checks configured for a device, including the latest result for each check.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -3671,7 +3643,7 @@ curl -G https://towerops.net/api/v1/devices/550e8400-e29b-41d4-a716-446655440000
   -H "Authorization: Bearer #{@sample_token}"
 """) %></code></pre>
               </div>
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -3696,7 +3668,7 @@ curl -G https://towerops.net/api/v1/devices/550e8400-e29b-41d4-a716-446655440000
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Device metrics -->
         <div class="mt-12">
@@ -3707,45 +3679,45 @@ curl -G https://towerops.net/api/v1/devices/550e8400-e29b-41d4-a716-446655440000
             <span class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/30">
               GET
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/devices/:device_id/metrics
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Returns historical check results for a device, useful for graphing and trend analysis.
               </p>
               <h4 class="mt-6 text-sm font-semibold text-zinc-900 dark:text-white">
                 Optional parameters
               </h4>
-              <dl class="mt-3 divide-y divide-cool-steel-200 dark:divide-white/10">
+              <dl class="mt-3 divide-y divide-gray-200 dark:divide-white/10">
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     hours
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       integer
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Number of hours of history to return (default: 24).
                   </dd>
                 </div>
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     check_type
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Filter by check type (e.g. "ping", "snmp").
                   </dd>
                 </div>
               </dl>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -3756,7 +3728,7 @@ curl -G https://towerops.net/api/v1/devices/550e8400-e29b-41d4-a716-446655440000
   -d check_type=ping
 """) %></code></pre>
               </div>
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -3781,7 +3753,7 @@ curl -G https://towerops.net/api/v1/devices/550e8400-e29b-41d4-a716-446655440000
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Device interfaces -->
         <div class="mt-12">
@@ -3792,18 +3764,18 @@ curl -G https://towerops.net/api/v1/devices/550e8400-e29b-41d4-a716-446655440000
             <span class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/30">
               GET
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/devices/:device_id/interfaces
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Returns SNMP-discovered network interfaces for a device.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -3812,7 +3784,7 @@ curl -G https://towerops.net/api/v1/devices/550e8400-e29b-41d4-a716-446655440000
   -H "Authorization: Bearer #{@sample_token}"
 """) %></code></pre>
               </div>
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -3839,18 +3811,18 @@ curl -G https://towerops.net/api/v1/devices/550e8400-e29b-41d4-a716-446655440000
         </div>
       </section>
 
-      <hr class="my-16 border-cool-steel-200 dark:border-white/10" />
+      <hr class="my-16 border-gray-200 dark:border-white/10" />
       
 <!-- Activity Feed Resource -->
       <section id="activity" class="scroll-mt-24 mb-16">
         <h2 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
           Activity Feed
         </h2>
-        <p class="mt-4 text-base text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-4 text-base text-gray-600 dark:text-gray-400">
           View a chronological feed of actions and events across your organization.
         </p>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- List activity -->
         <div class="mt-12">
@@ -3861,45 +3833,45 @@ curl -G https://towerops.net/api/v1/devices/550e8400-e29b-41d4-a716-446655440000
             <span class="inline-flex items-center rounded-md bg-emerald-50 px-2 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/30">
               GET
             </span>
-            <span class="text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-sm font-mono text-gray-600 dark:text-gray-400">
               /api/v1/activity
             </span>
           </div>
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 Returns recent activity events for the organization.
               </p>
               <h4 class="mt-6 text-sm font-semibold text-zinc-900 dark:text-white">
                 Optional parameters
               </h4>
-              <dl class="mt-3 divide-y divide-cool-steel-200 dark:divide-white/10">
+              <dl class="mt-3 divide-y divide-gray-200 dark:divide-white/10">
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     limit
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       integer
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Maximum number of events to return (default: 50).
                   </dd>
                 </div>
                 <div class="py-3">
                   <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                     types
-                    <span class="ml-2 font-sans text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 font-sans text-xs font-normal text-gray-500 dark:text-gray-400">
                       string
                     </span>
                   </dt>
-                  <dd class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <dd class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                     Comma-separated list of event types to filter by.
                   </dd>
                 </div>
               </dl>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Request</p>
                 </div>
@@ -3909,7 +3881,7 @@ curl -G https://towerops.net/api/v1/activity \\
   -d limit=20
 """) %></code></pre>
               </div>
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Response</p>
                 </div>
@@ -3937,14 +3909,14 @@ curl -G https://towerops.net/api/v1/activity \\
         </div>
       </section>
 
-      <hr class="my-16 border-cool-steel-200 dark:border-white/10" />
+      <hr class="my-16 border-gray-200 dark:border-white/10" />
       
 <!-- Coverages Resource -->
       <section id="coverages" class="scroll-mt-24 mb-16">
         <h2 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
           RF Coverages
         </h2>
-        <p class="mt-4 text-base text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-4 text-base text-gray-600 dark:text-gray-400">
           RF coverage predictions model where each radio actually reaches. Compute is async — a created or recomputed coverage starts in
           <code>queued</code>
           and progresses through <code>computing</code>
@@ -3959,12 +3931,12 @@ curl -G https://towerops.net/api/v1/activity \\
           <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">List all coverages</h3>
           <div class="mt-4 grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-2">
             <div>
-              <p class="text-base text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-base text-gray-600 dark:text-gray-400">
                 <code>GET /api/v1/coverages</code>. Returns every coverage in the authenticated organization, regardless of status.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <pre class="p-4 text-sm text-zinc-100 overflow-x-auto"><code><%= raw("""
 curl -G https://towerops.net/api/v1/coverages \\
   -H "Authorization: Bearer #{@sample_token}"
@@ -3978,12 +3950,12 @@ curl -G https://towerops.net/api/v1/coverages \\
           <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Create a coverage</h3>
           <div class="mt-4 grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-2">
             <div>
-              <p class="text-base text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-base text-gray-600 dark:text-gray-400">
                 <code>POST /api/v1/coverages</code>. Creates a new coverage and immediately enqueues compute. Required: <code>name</code>, <code>site_id</code>, <code>antenna_slug</code>, <code>frequency_mhz</code>, <code>tx_power_dbm</code>, <code>height_agl_m</code>, <code>azimuth_deg</code>, <code>radius_m</code>. Optional fields tune cell size, downtilt, foliage, receiver height, and threshold.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <pre class="p-4 text-sm text-zinc-100 overflow-x-auto"><code><%= raw(~S"""
 curl -X POST https://towerops.net/api/v1/coverages \
   -H "Authorization: Bearer YOUR_API_TOKEN" \
@@ -4012,7 +3984,7 @@ curl -X POST https://towerops.net/api/v1/coverages \
           <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Retrieve a coverage</h3>
           <div class="mt-4 grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-2">
             <div>
-              <p class="text-base text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-base text-gray-600 dark:text-gray-400">
                 <code>GET /api/v1/coverages/:id</code>. Returns one coverage including its bbox, status, progress percentage, and (when ready) the
                 <code>png_path</code>
                 + <code>raster_path</code>
@@ -4020,7 +3992,7 @@ curl -X POST https://towerops.net/api/v1/coverages \
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <pre class="p-4 text-sm text-zinc-100 overflow-x-auto"><code><%= raw("""
 curl https://towerops.net/api/v1/coverages/COV_ID \\
   -H "Authorization: Bearer #{@sample_token}"
@@ -4034,14 +4006,14 @@ curl https://towerops.net/api/v1/coverages/COV_ID \\
           <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Update a coverage</h3>
           <div class="mt-4 grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-2">
             <div>
-              <p class="text-base text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-base text-gray-600 dark:text-gray-400">
                 <code>PATCH /api/v1/coverages/:id</code>. Mutates editable fields (name, antenna parameters, radius, cell size, etc.). Does
                 <strong>not</strong>
                 auto-recompute — call the recompute endpoint when you want fresh outputs.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <pre class="p-4 text-sm text-zinc-100 overflow-x-auto"><code><%= raw(~S"""
 curl -X PATCH https://towerops.net/api/v1/coverages/COV_ID \
   -H "Authorization: Bearer YOUR_API_TOKEN" \
@@ -4059,14 +4031,14 @@ curl -X PATCH https://towerops.net/api/v1/coverages/COV_ID \
           </h3>
           <div class="mt-4 grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-2">
             <div>
-              <p class="text-base text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-base text-gray-600 dark:text-gray-400">
                 <code>POST /api/v1/coverages/:id/recompute</code>. Re-queues the compute pipeline without changing any parameters. Returns
                 <code>409 Conflict</code>
                 if the coverage is already computing. Useful after a parameter update or after the antenna catalog is refreshed.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <pre class="p-4 text-sm text-zinc-100 overflow-x-auto"><code><%= raw("""
 curl -X POST https://towerops.net/api/v1/coverages/COV_ID/recompute \\
   -H "Authorization: Bearer #{@sample_token}"
@@ -4080,14 +4052,14 @@ curl -X POST https://towerops.net/api/v1/coverages/COV_ID/recompute \\
           <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Download as KMZ</h3>
           <div class="mt-4 grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-2">
             <div>
-              <p class="text-base text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-base text-gray-600 dark:text-gray-400">
                 <code>GET /api/v1/coverages/:id/kmz</code>. Returns a Google Earth-compatible KMZ bundle (KML + PNG). Returns
                 <code>409 Conflict</code>
                 if the coverage is not yet ready.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <pre class="p-4 text-sm text-zinc-100 overflow-x-auto"><code><%= raw("""
 curl -OJ https://towerops.net/api/v1/coverages/COV_ID/kmz \\
   -H "Authorization: Bearer #{@sample_token}"
@@ -4101,14 +4073,14 @@ curl -OJ https://towerops.net/api/v1/coverages/COV_ID/kmz \\
           <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Delete a coverage</h3>
           <div class="mt-4 grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-2">
             <div>
-              <p class="text-base text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-base text-gray-600 dark:text-gray-400">
                 <code>DELETE /api/v1/coverages/:id</code>. Removes the coverage and any cached outputs. Returns
                 <code>204 No Content</code>
                 on success.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <pre class="p-4 text-sm text-zinc-100 overflow-x-auto"><code><%= raw("""
 curl -X DELETE https://towerops.net/api/v1/coverages/COV_ID \\
   -H "Authorization: Bearer #{@sample_token}"
@@ -4119,14 +4091,14 @@ curl -X DELETE https://towerops.net/api/v1/coverages/COV_ID \\
         </div>
       </section>
 
-      <hr class="my-16 border-cool-steel-200 dark:border-white/10" />
+      <hr class="my-16 border-gray-200 dark:border-white/10" />
       
 <!-- Maintenance Windows Resource -->
       <section id="maintenance-windows" class="scroll-mt-24 mb-16">
         <h2 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
           Maintenance Windows
         </h2>
-        <p class="mt-4 text-base text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-4 text-base text-gray-600 dark:text-gray-400">
           Maintenance windows tell Towerops to suppress alerts for a site or device during planned work. Windows can be one-off or recurring (iCal RRULE).
         </p>
 
@@ -4136,13 +4108,13 @@ curl -X DELETE https://towerops.net/api/v1/coverages/COV_ID \\
           </h3>
           <div class="mt-4 grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-2">
             <div>
-              <p class="text-base text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-base text-gray-600 dark:text-gray-400">
                 <code>GET /api/v1/maintenance_windows</code>. Optional <code>filter</code>
                 query param accepts <code>active</code>, <code>upcoming</code>, or <code>past</code>.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <pre class="p-4 text-sm text-zinc-100 overflow-x-auto"><code><%= raw("""
 curl -G https://towerops.net/api/v1/maintenance_windows \\
   -H "Authorization: Bearer #{@sample_token}" \\
@@ -4159,7 +4131,7 @@ curl -G https://towerops.net/api/v1/maintenance_windows \\
           </h3>
           <div class="mt-4 grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-2">
             <div>
-              <p class="text-base text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-base text-gray-600 dark:text-gray-400">
                 <code>POST /api/v1/maintenance_windows</code>. Required: <code>name</code>, <code>starts_at</code>, <code>ends_at</code>. Scope to a site or a specific device. Set
                 <code>recurring: true</code>
                 with a <code>recurrence_rule</code>
@@ -4167,7 +4139,7 @@ curl -G https://towerops.net/api/v1/maintenance_windows \\
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <pre class="p-4 text-sm text-zinc-100 overflow-x-auto"><code><%= raw(~S"""
 curl -X POST https://towerops.net/api/v1/maintenance_windows \
   -H "Authorization: Bearer YOUR_API_TOKEN" \
@@ -4193,7 +4165,7 @@ curl -X POST https://towerops.net/api/v1/maintenance_windows \
           </h3>
           <div class="mt-4 grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-2">
             <div>
-              <p class="text-base text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-base text-gray-600 dark:text-gray-400">
                 Standard CRUD on <code>/api/v1/maintenance_windows/:id</code>. <code>GET</code>
                 returns the resource; <code>PATCH</code>
                 updates fields with the same body shape as create; <code>DELETE</code>
@@ -4201,7 +4173,7 @@ curl -X POST https://towerops.net/api/v1/maintenance_windows \
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <pre class="p-4 text-sm text-zinc-100 overflow-x-auto"><code><%= raw("""
 curl -X DELETE https://towerops.net/api/v1/maintenance_windows/WINDOW_ID \\
   -H "Authorization: Bearer #{@sample_token}"
@@ -4212,14 +4184,14 @@ curl -X DELETE https://towerops.net/api/v1/maintenance_windows/WINDOW_ID \\
         </div>
       </section>
 
-      <hr class="my-16 border-cool-steel-200 dark:border-white/10" />
+      <hr class="my-16 border-gray-200 dark:border-white/10" />
       
 <!-- Schedules Resource -->
       <section id="schedules" class="scroll-mt-24 mb-16">
         <h2 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
           On-Call Schedules
         </h2>
-        <p class="mt-4 text-base text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-4 text-base text-gray-600 dark:text-gray-400">
           Schedules drive who gets paged when an alert fires. A schedule contains one or more
           <em>layers</em>
           (rotations); each layer has ordered <em>members</em>. Ad-hoc <em>overrides</em>
@@ -4230,12 +4202,12 @@ curl -X DELETE https://towerops.net/api/v1/maintenance_windows/WINDOW_ID \\
           <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Schedule CRUD</h3>
           <div class="mt-4 grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-2">
             <div>
-              <p class="text-base text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-base text-gray-600 dark:text-gray-400">
                 <code>GET /api/v1/schedules</code>, <code>POST</code>, <code>GET /:id</code>, <code>PATCH /:id</code>, <code>DELETE /:id</code>. Required on create: <code>name</code>, <code>timezone</code>. Showing one schedule returns its layers + overrides nested.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <pre class="p-4 text-sm text-zinc-100 overflow-x-auto"><code><%= raw(~S"""
 curl -X POST https://towerops.net/api/v1/schedules \
   -H "Authorization: Bearer YOUR_API_TOKEN" \
@@ -4257,14 +4229,14 @@ curl -X POST https://towerops.net/api/v1/schedules \
           <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Who is on call?</h3>
           <div class="mt-4 grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-2">
             <div>
-              <p class="text-base text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-base text-gray-600 dark:text-gray-400">
                 <code>GET /api/v1/schedules/:id/on_call</code>. Returns the user currently on call (taking layers and overrides into account), or
                 <code>null</code>
                 if nobody is.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <pre class="p-4 text-sm text-zinc-100 overflow-x-auto"><code><%= raw("""
 curl https://towerops.net/api/v1/schedules/SCHED_ID/on_call \\
   -H "Authorization: Bearer #{@sample_token}"
@@ -4278,7 +4250,7 @@ curl https://towerops.net/api/v1/schedules/SCHED_ID/on_call \\
           <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Layers and members</h3>
           <div class="mt-4 grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-2">
             <div>
-              <p class="text-base text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-base text-gray-600 dark:text-gray-400">
                 <code>POST /api/v1/schedules/:id/layers</code>, <code>PATCH /api/v1/schedules/:id/layers/:layer_id</code>,
                 <code>DELETE</code>
                 the same. A layer requires <code>name</code>, <code>position</code>,
@@ -4290,7 +4262,7 @@ curl https://towerops.net/api/v1/schedules/SCHED_ID/on_call \\
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <pre class="p-4 text-sm text-zinc-100 overflow-x-auto"><code><%= raw(~S"""
 curl -X POST https://towerops.net/api/v1/schedules/SCHED_ID/layers \
   -H "Authorization: Bearer YOUR_API_TOKEN" \
@@ -4315,13 +4287,13 @@ curl -X POST https://towerops.net/api/v1/schedules/SCHED_ID/layers \
           <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Overrides</h3>
           <div class="mt-4 grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-2">
             <div>
-              <p class="text-base text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-base text-gray-600 dark:text-gray-400">
                 <code>POST /api/v1/schedules/:id/overrides</code>
                 creates a one-off cover ("Bob is on for Alice from Friday 17:00 to Monday 09:00"). Required: <code>user_id</code>, <code>start_time</code>, <code>end_time</code>. Remove with <code>DELETE /:id/overrides/:override_id</code>.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <pre class="p-4 text-sm text-zinc-100 overflow-x-auto"><code><%= raw(~S"""
 curl -X POST https://towerops.net/api/v1/schedules/SCHED_ID/overrides \
   -H "Authorization: Bearer YOUR_API_TOKEN" \
@@ -4340,14 +4312,14 @@ curl -X POST https://towerops.net/api/v1/schedules/SCHED_ID/overrides \
         </div>
       </section>
 
-      <hr class="my-16 border-cool-steel-200 dark:border-white/10" />
+      <hr class="my-16 border-gray-200 dark:border-white/10" />
       
 <!-- Escalation Policies Resource -->
       <section id="escalation-policies" class="scroll-mt-24 mb-16">
         <h2 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
           Escalation Policies
         </h2>
-        <p class="mt-4 text-base text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-4 text-base text-gray-600 dark:text-gray-400">
           Escalation policies are an ordered list of <em>rules</em>; each rule fires its
           <em>targets</em>
           after a delay if the previous rule's targets haven't acknowledged the alert. Targets can reference users, schedules, or arbitrary webhooks.
@@ -4357,14 +4329,14 @@ curl -X POST https://towerops.net/api/v1/schedules/SCHED_ID/overrides \
           <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Policy CRUD</h3>
           <div class="mt-4 grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-2">
             <div>
-              <p class="text-base text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-base text-gray-600 dark:text-gray-400">
                 Standard REST CRUD under <code>/api/v1/escalation_policies</code>.
                 <code>GET /:id</code>
                 returns the policy with its rules and targets nested. Required on create: <code>name</code>. Optional: <code>description</code>, <code>repeat_count</code>, <code>repeat_interval_minutes</code>.
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <pre class="p-4 text-sm text-zinc-100 overflow-x-auto"><code><%= raw(~S"""
 curl -X POST https://towerops.net/api/v1/escalation_policies \
   -H "Authorization: Bearer YOUR_API_TOKEN" \
@@ -4387,7 +4359,7 @@ curl -X POST https://towerops.net/api/v1/escalation_policies \
           <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Rules</h3>
           <div class="mt-4 grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-2">
             <div>
-              <p class="text-base text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-base text-gray-600 dark:text-gray-400">
                 <code>POST /api/v1/escalation_policies/:id/rules</code>
                 appends a rule. <code>PATCH /api/v1/escalation_policies/:id/rules/:rule_id</code>
                 updates one. <code>DELETE</code>
@@ -4395,7 +4367,7 @@ curl -X POST https://towerops.net/api/v1/escalation_policies \
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <pre class="p-4 text-sm text-zinc-100 overflow-x-auto"><code><%= raw(~S"""
 curl -X POST https://towerops.net/api/v1/escalation_policies/POLICY_ID/rules \
   -H "Authorization: Bearer YOUR_API_TOKEN" \
@@ -4413,7 +4385,7 @@ curl -X POST https://towerops.net/api/v1/escalation_policies/POLICY_ID/rules \
           <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Targets</h3>
           <div class="mt-4 grid grid-cols-1 gap-x-8 gap-y-4 lg:grid-cols-2">
             <div>
-              <p class="text-base text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-base text-gray-600 dark:text-gray-400">
                 Each rule has one or more targets:
                 <code>POST /api/v1/escalation_policies/:id/rules/:rule_id/targets</code>
                 creates one,
@@ -4425,7 +4397,7 @@ curl -X POST https://towerops.net/api/v1/escalation_policies/POLICY_ID/rules \
               </p>
             </div>
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <pre class="p-4 text-sm text-zinc-100 overflow-x-auto"><code><%= raw(~S"""
 curl -X POST https://towerops.net/api/v1/escalation_policies/POLICY_ID/rules/RULE_ID/targets \
   -H "Authorization: Bearer YOUR_API_TOKEN" \
@@ -4440,21 +4412,21 @@ curl -X POST https://towerops.net/api/v1/escalation_policies/POLICY_ID/rules/RUL
         </div>
       </section>
 
-      <hr class="my-16 border-cool-steel-200 dark:border-white/10" />
+      <hr class="my-16 border-gray-200 dark:border-white/10" />
       
 <!-- Terraform Provider Section -->
       <section id="terraform" class="scroll-mt-24 mb-16">
         <h2 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">
           Terraform Provider
         </h2>
-        <p class="mt-4 text-base text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-4 text-base text-gray-600 dark:text-gray-400">
           Manage your Towerops infrastructure as code using our official Terraform provider. Automate site and device provisioning, version control your network configuration, and integrate Towerops into your existing infrastructure workflows.
         </p>
 
-        <div class="mt-6 rounded-lg bg-cerulean-50 dark:bg-cerulean-900/10 p-4 border border-cerulean-200 dark:border-cerulean-800">
+        <div class="mt-6 rounded-lg bg-blue-50 dark:bg-blue-900/10 p-4 border border-blue-200 dark:border-blue-800">
           <div class="flex">
             <div class="flex-shrink-0">
-              <svg class="h-5 w-5 text-cerulean-400" viewBox="0 0 20 20" fill="currentColor">
+              <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
                 <path
                   fill-rule="evenodd"
                   d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
@@ -4463,10 +4435,10 @@ curl -X POST https://towerops.net/api/v1/escalation_policies/POLICY_ID/rules/RUL
               </svg>
             </div>
             <div class="ml-3">
-              <h3 class="text-sm font-medium text-cerulean-800 dark:text-cerulean-200">
+              <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200">
                 Infrastructure as Code
               </h3>
-              <div class="mt-2 text-sm text-cerulean-700 dark:text-cerulean-300">
+              <div class="mt-2 text-sm text-blue-700 dark:text-blue-300">
                 <p>
                   The Terraform provider uses the same REST API documented above. All resource operations require API token authentication (not browser sessions).
                 </p>
@@ -4478,19 +4450,19 @@ curl -X POST https://towerops.net/api/v1/escalation_policies/POLICY_ID/rules/RUL
 <!-- What is Terraform -->
         <div class="mt-12">
           <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">What is Terraform?</h3>
-          <p class="mt-4 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+          <p class="mt-4 text-sm text-gray-600 dark:text-gray-400">
             <a
               href="https://www.terraform.io/"
               target="_blank"
               rel="noopener noreferrer"
-              class="text-cerulean-600 dark:text-cerulean-400 hover:underline"
+              class="text-blue-600 dark:text-blue-400 hover:underline"
             >
               Terraform
             </a>
             is an infrastructure as code tool that lets you define both cloud and on-premise resources in human-readable configuration files that you can version, reuse, and share. With the Towerops Terraform provider, you can:
           </p>
 
-          <ul class="mt-4 space-y-2 text-sm text-cool-steel-600 dark:text-cool-steel-400 list-disc list-inside">
+          <ul class="mt-4 space-y-2 text-sm text-gray-600 dark:text-gray-400 list-disc list-inside">
             <li>Define sites and devices in declarative configuration files</li>
             <li>Version control your network monitoring infrastructure</li>
             <li>Automate device provisioning and updates</li>
@@ -4500,7 +4472,7 @@ curl -X POST https://towerops.net/api/v1/escalation_policies/POLICY_ID/rules/RUL
           </ul>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Getting Started -->
         <div class="mt-12">
@@ -4510,19 +4482,19 @@ curl -X POST https://towerops.net/api/v1/escalation_policies/POLICY_ID/rules/RUL
             <!-- Left column - description -->
             <div>
               <h4 class="text-sm font-semibold text-zinc-900 dark:text-white">Installation</h4>
-              <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                 The provider is available on the <a
                   href="https://registry.terraform.io/providers/towerops-app/towerops"
                   target="_blank"
                   rel="noopener noreferrer"
-                  class="text-cerulean-600 dark:text-cerulean-400 hover:underline"
-                >Terraform Registry</a>. Terraform will automatically download it when you run <code class="px-1.5 py-0.5 rounded bg-cool-steel-100 dark:bg-cool-steel-800 text-xs font-mono">terraform init</code>.
+                  class="text-blue-600 dark:text-blue-400 hover:underline"
+                >Terraform Registry</a>. Terraform will automatically download it when you run <code class="px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-xs font-mono">terraform init</code>.
               </p>
 
               <h4 class="mt-6 text-sm font-semibold text-zinc-900 dark:text-white">
                 Requirements
               </h4>
-              <ul class="mt-2 space-y-1 text-sm text-cool-steel-600 dark:text-cool-steel-400 list-disc list-inside">
+              <ul class="mt-2 space-y-1 text-sm text-gray-600 dark:text-gray-400 list-disc list-inside">
                 <li>Terraform >= 1.0</li>
                 <li>Towerops API token (create in Organization Settings)</li>
               </ul>
@@ -4530,7 +4502,7 @@ curl -X POST https://towerops.net/api/v1/escalation_policies/POLICY_ID/rules/RUL
             
 <!-- Right column - code example -->
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Configuration</p>
                 </div>
@@ -4559,7 +4531,7 @@ provider "towerops" {
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Example Usage -->
         <div class="mt-12">
@@ -4567,14 +4539,14 @@ provider "towerops" {
 
           <div class="mt-6 grid grid-cols-1 gap-x-12 gap-y-8 lg:grid-cols-2">
             <div>
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-600 dark:text-gray-400">
                 This example creates a site and two devices. Terraform will automatically manage the lifecycle of these resources, creating, updating, or deleting them as needed to match your configuration.
               </p>
 
               <h4 class="mt-6 text-sm font-semibold text-zinc-900 dark:text-white">
                 Key Features
               </h4>
-              <ul class="mt-3 space-y-2 text-sm text-cool-steel-600 dark:text-cool-steel-400 list-disc list-inside">
+              <ul class="mt-3 space-y-2 text-sm text-gray-600 dark:text-gray-400 list-disc list-inside">
                 <li>Automatic dependency management (devices depend on sites)</li>
                 <li>State tracking to detect configuration drift</li>
                 <li>Plan preview before making changes</li>
@@ -4583,7 +4555,7 @@ provider "towerops" {
             </div>
 
             <div>
-              <div class="overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">main.tf</p>
                 </div>
@@ -4612,7 +4584,7 @@ resource "towerops_device" "backup_router" {
 """) %></code></pre>
               </div>
 
-              <div class="mt-4 overflow-hidden rounded-lg bg-cool-steel-900 dark:bg-cool-steel-950">
+              <div class="mt-4 overflow-hidden rounded-lg bg-gray-900 dark:bg-gray-950">
                 <div class="border-b border-zinc-800 px-4 py-2">
                   <p class="text-xs font-medium text-zinc-400">Commands</p>
                 </div>
@@ -4634,19 +4606,19 @@ terraform destroy
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Available Resources -->
         <div class="mt-12">
           <h3 class="text-xl font-semibold text-zinc-900 dark:text-white">Available Resources</h3>
 
           <div class="mt-6">
-            <dl class="divide-y divide-cool-steel-200 dark:divide-white/10">
+            <dl class="divide-y divide-gray-200 dark:divide-white/10">
               <div class="py-4">
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   towerops_site
                 </dt>
-                <dd class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                   Manages a physical site/location. Supports name, location, and SNMP community string configuration.
                 </dd>
                 <dd class="mt-2">
@@ -4654,7 +4626,7 @@ terraform destroy
                     href="https://registry.terraform.io/providers/towerops-app/towerops/latest/docs/resources/site"
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="text-sm text-cerulean-600 dark:text-cerulean-400 hover:underline"
+                    class="text-sm text-blue-600 dark:text-blue-400 hover:underline"
                   >
                     View documentation →
                   </a>
@@ -4665,7 +4637,7 @@ terraform destroy
                 <dt class="text-sm font-mono font-medium text-zinc-900 dark:text-white">
                   towerops_device
                 </dt>
-                <dd class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <dd class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                   Manages network equipment at a site. Supports IP address, SNMP configuration, monitoring settings, and more.
                 </dd>
                 <dd class="mt-2">
@@ -4673,7 +4645,7 @@ terraform destroy
                     href="https://registry.terraform.io/providers/towerops-app/towerops/latest/docs/resources/device"
                     target="_blank"
                     rel="noopener noreferrer"
-                    class="text-sm text-cerulean-600 dark:text-cerulean-400 hover:underline"
+                    class="text-sm text-blue-600 dark:text-blue-400 hover:underline"
                   >
                     View documentation →
                   </a>
@@ -4683,7 +4655,7 @@ terraform destroy
           </div>
         </div>
 
-        <hr class="my-12 border-cool-steel-200 dark:border-white/10" />
+        <hr class="my-12 border-gray-200 dark:border-white/10" />
         
 <!-- Documentation Links -->
         <div class="mt-12">
@@ -4694,19 +4666,19 @@ terraform destroy
               href="https://registry.terraform.io/providers/towerops-app/towerops/latest/docs"
               target="_blank"
               rel="noopener noreferrer"
-              class="group relative rounded-lg border border-cool-steel-200 dark:border-white/10 p-6 hover:border-cerulean-500 dark:hover:border-cerulean-400 transition"
+              class="group relative rounded-lg border border-gray-200 dark:border-white/10 p-6 hover:border-blue-500 dark:hover:border-blue-400 transition"
             >
               <div class="flex items-start justify-between">
                 <div class="flex-1">
-                  <h4 class="text-base font-semibold text-zinc-900 dark:text-white group-hover:text-cerulean-600 dark:group-hover:text-cerulean-400">
+                  <h4 class="text-base font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400">
                     Provider Documentation
                   </h4>
-                  <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                     Complete reference for all resources, data sources, and provider configuration options.
                   </p>
                 </div>
                 <svg
-                  class="h-5 w-5 text-cool-steel-400 group-hover:text-cerulean-600 dark:group-hover:text-cerulean-400 ml-4"
+                  class="h-5 w-5 text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 ml-4"
                   viewBox="0 0 20 20"
                   fill="currentColor"
                 >
@@ -4723,19 +4695,19 @@ terraform destroy
               href="https://github.com/towerops-app/terraform-provider-towerops"
               target="_blank"
               rel="noopener noreferrer"
-              class="group relative rounded-lg border border-cool-steel-200 dark:border-white/10 p-6 hover:border-cerulean-500 dark:hover:border-cerulean-400 transition"
+              class="group relative rounded-lg border border-gray-200 dark:border-white/10 p-6 hover:border-blue-500 dark:hover:border-blue-400 transition"
             >
               <div class="flex items-start justify-between">
                 <div class="flex-1">
-                  <h4 class="text-base font-semibold text-zinc-900 dark:text-white group-hover:text-cerulean-600 dark:group-hover:text-cerulean-400">
+                  <h4 class="text-base font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400">
                     GitHub Repository
                   </h4>
-                  <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                     Source code, examples, and issue tracking for the Terraform provider.
                   </p>
                 </div>
                 <svg
-                  class="h-5 w-5 text-cool-steel-400 group-hover:text-cerulean-600 dark:group-hover:text-cerulean-400 ml-4"
+                  class="h-5 w-5 text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400 ml-4"
                   viewBox="0 0 20 20"
                   fill="currentColor"
                 >
@@ -4750,29 +4722,29 @@ terraform destroy
           </div>
         </div>
 
-        <div class="mt-12 rounded-lg bg-cool-steel-50 dark:bg-cool-steel-900/50 p-6 border border-cool-steel-200 dark:border-white/10">
+        <div class="mt-12 rounded-lg bg-gray-50 dark:bg-gray-900/50 p-6 border border-gray-200 dark:border-white/10">
           <h4 class="text-sm font-semibold text-zinc-900 dark:text-white">Need Help?</h4>
-          <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+          <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
             For questions about the Terraform provider, please open an issue on
             <a
               href="https://github.com/towerops-app/terraform-provider-towerops/issues"
               target="_blank"
               rel="noopener noreferrer"
-              class="text-cerulean-600 dark:text-cerulean-400 hover:underline"
+              class="text-blue-600 dark:text-blue-400 hover:underline"
             >
               GitHub
             </a>
             or contact us at <a
               href="mailto:hi@towerops.net"
-              class="text-cerulean-600 dark:text-cerulean-400 hover:underline"
+              class="text-blue-600 dark:text-blue-400 hover:underline"
             >hi@towerops.net</a>.
           </p>
         </div>
       </section>
       
 <!-- Footer -->
-      <footer class="mt-24 border-t border-cool-steel-200 dark:border-white/10 pt-8 pb-16">
-        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <footer class="mt-24 border-t border-gray-200 dark:border-white/10 pt-8 pb-16">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
           © 2026 Towerops. All rights reserved.
         </p>
       </footer>
@@ -4787,7 +4759,7 @@ terraform destroy
     const navLinks = document.querySelectorAll('.nav-link');
 
     const activeClasses = ['text-emerald-500', 'dark:text-emerald-400', 'font-medium', 'border-l-2', 'border-emerald-500', '-ml-px'];
-    const inactiveClasses = ['text-cool-steel-600', 'dark:text-cool-steel-400'];
+    const inactiveClasses = ['text-gray-600', 'dark:text-gray-400'];
 
     function setActiveLink(id) {
       navLinks.forEach(link => {
diff --git a/lib/towerops_web/controllers/error_html/404.html.heex b/lib/towerops_web/controllers/error_html/404.html.heex
index e1f13d53..1067aa9d 100644
--- a/lib/towerops_web/controllers/error_html/404.html.heex
+++ b/lib/towerops_web/controllers/error_html/404.html.heex
@@ -6,14 +6,14 @@
     <title>{t("404 - Page Not Found")}</title>
     <link phx-track-static rel="stylesheet" href="/assets/css/app.css" />
   </head>
-  <body class="bg-white dark:bg-cool-steel-900">
+  <body class="bg-white dark:bg-gray-900">
     <div class="min-h-screen flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
       <div class="max-w-2xl w-full text-center">
         <!-- Logo -->
         <img src="/images/towerops_logo.png" alt="Towerops" class="h-16 w-auto mx-auto mb-8" />
         
 <!-- Error Code -->
-        <h1 class="text-9xl font-bold text-cerulean-600 mb-4">404</h1>
+        <h1 class="text-9xl font-bold text-blue-600 mb-4">404</h1>
         
 <!-- Squirrel Image -->
         <div class="mb-8">
@@ -35,7 +35,7 @@
 <!-- Back Home Button -->
         <a
           href="/"
-          class="inline-flex items-center justify-center rounded-full py-3 px-6 text-sm font-semibold bg-cerulean-600 text-white hover:bg-cerulean-500 active:bg-cerulean-800 transition-colors"
+          class="inline-flex items-center justify-center rounded-full py-3 px-6 text-sm font-semibold bg-blue-600 text-white hover:bg-blue-500 active:bg-blue-800 transition-colors"
         >
           {t("Go back home")}
         </a>
diff --git a/lib/towerops_web/controllers/error_html/500.html.heex b/lib/towerops_web/controllers/error_html/500.html.heex
index a9af0451..cc0d24be 100644
--- a/lib/towerops_web/controllers/error_html/500.html.heex
+++ b/lib/towerops_web/controllers/error_html/500.html.heex
@@ -6,14 +6,14 @@
     <title>{t("500 - Server Error")}</title>
     <link phx-track-static rel="stylesheet" href="/assets/css/app.css" />
   </head>
-  <body class="bg-white dark:bg-cool-steel-900">
+  <body class="bg-white dark:bg-gray-900">
     <div class="min-h-screen flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
       <div class="max-w-2xl w-full text-center">
         <!-- Logo -->
         <img src="/images/towerops_logo.png" alt="Towerops" class="h-16 w-auto mx-auto mb-8" />
         
 <!-- Error Code -->
-        <h1 class="text-9xl font-bold text-cerulean-600 mb-4">500</h1>
+        <h1 class="text-9xl font-bold text-blue-600 mb-4">500</h1>
         
 <!-- Error Message -->
         <h2 class="text-3xl font-bold text-slate-900 mb-4">
@@ -26,7 +26,7 @@
 <!-- Back Home Button -->
         <a
           href="/"
-          class="inline-flex items-center justify-center rounded-full py-3 px-6 text-sm font-semibold bg-cerulean-600 text-white hover:bg-cerulean-500 active:bg-cerulean-800 transition-colors"
+          class="inline-flex items-center justify-center rounded-full py-3 px-6 text-sm font-semibold bg-blue-600 text-white hover:bg-blue-500 active:bg-blue-800 transition-colors"
         >
           {t("Go back home")}
         </a>
diff --git a/lib/towerops_web/controllers/graphql_docs_html/index.html.heex b/lib/towerops_web/controllers/graphql_docs_html/index.html.heex
index 8a0eb130..970d721f 100644
--- a/lib/towerops_web/controllers/graphql_docs_html/index.html.heex
+++ b/lib/towerops_web/controllers/graphql_docs_html/index.html.heex
@@ -18,7 +18,7 @@
             <li>
               <a
                 href="#introduction"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Introduction
               </a>
@@ -26,7 +26,7 @@
             <li>
               <a
                 href="#authentication"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Authentication
               </a>
@@ -34,7 +34,7 @@
             <li>
               <a
                 href="#endpoint"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Endpoint
               </a>
@@ -49,7 +49,7 @@
             <li>
               <a
                 href="#query-devices"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Devices
               </a>
@@ -57,7 +57,7 @@
             <li>
               <a
                 href="#query-sites"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Sites
               </a>
@@ -65,7 +65,7 @@
             <li>
               <a
                 href="#query-alerts"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Alerts
               </a>
@@ -73,7 +73,7 @@
             <li>
               <a
                 href="#query-agents"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Agents
               </a>
@@ -81,7 +81,7 @@
             <li>
               <a
                 href="#query-organization"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Organization
               </a>
@@ -89,7 +89,7 @@
             <li>
               <a
                 href="#query-members"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Members
               </a>
@@ -97,7 +97,7 @@
             <li>
               <a
                 href="#query-integrations"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Integrations
               </a>
@@ -105,7 +105,7 @@
             <li>
               <a
                 href="#query-activity"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Activity
               </a>
@@ -113,7 +113,7 @@
             <li>
               <a
                 href="#query-metrics"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Metrics & Interfaces
               </a>
@@ -121,7 +121,7 @@
             <li>
               <a
                 href="#query-time-series"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Time-Series
               </a>
@@ -129,7 +129,7 @@
             <li>
               <a
                 href="#query-checks"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Service Checks
               </a>
@@ -137,7 +137,7 @@
             <li>
               <a
                 href="#query-schedules"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 On-Call Schedules
               </a>
@@ -145,7 +145,7 @@
             <li>
               <a
                 href="#query-escalation-policies"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Escalation Policies
               </a>
@@ -153,7 +153,7 @@
             <li>
               <a
                 href="#query-maintenance-windows"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Maintenance Windows
               </a>
@@ -168,7 +168,7 @@
             <li>
               <a
                 href="#mutation-devices"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Device CRUD
               </a>
@@ -176,7 +176,7 @@
             <li>
               <a
                 href="#mutation-sites"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Site CRUD
               </a>
@@ -184,7 +184,7 @@
             <li>
               <a
                 href="#mutation-alerts"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Alert Actions
               </a>
@@ -192,7 +192,7 @@
             <li>
               <a
                 href="#mutation-agents"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Agent Management
               </a>
@@ -200,7 +200,7 @@
             <li>
               <a
                 href="#mutation-organization"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Organization
               </a>
@@ -208,7 +208,7 @@
             <li>
               <a
                 href="#mutation-members"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Members
               </a>
@@ -216,7 +216,7 @@
             <li>
               <a
                 href="#mutation-integrations"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Integrations
               </a>
@@ -224,7 +224,7 @@
             <li>
               <a
                 href="#mutation-checks"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Service Checks
               </a>
@@ -232,7 +232,7 @@
             <li>
               <a
                 href="#mutation-schedules"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Schedules
               </a>
@@ -240,7 +240,7 @@
             <li>
               <a
                 href="#mutation-escalation-policies"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Escalation Policies
               </a>
@@ -248,7 +248,7 @@
             <li>
               <a
                 href="#mutation-maintenance-windows"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Maintenance Windows
               </a>
@@ -263,7 +263,7 @@
             <li>
               <a
                 href="#subscriptions"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 Real-Time Events
               </a>
@@ -278,7 +278,7 @@
             <li>
               <a
                 href="#types"
-                class="nav-link block py-1 pl-4 pr-3 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+                class="nav-link block py-1 pl-4 pr-3 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
               >
                 All Types
               </a>
@@ -290,7 +290,7 @@
         <li class="mt-auto">
           <.link
             navigate={~p"/docs/api"}
-            class="block py-1 text-sm text-cool-steel-600 transition hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+            class="block py-1 text-sm text-gray-600 transition hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
           >
             ← REST API Docs
           </.link>
@@ -307,25 +307,25 @@
 <!-- Introduction -->
     <section id="introduction" class="mb-16">
       <h1 class="text-3xl font-bold tracking-tight text-zinc-900 dark:text-white">GraphQL API</h1>
-      <p class="mt-4 text-lg text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-4 text-lg text-gray-600 dark:text-gray-400">
         The TowerOps GraphQL API provides a flexible, strongly-typed interface for querying and managing your network infrastructure.
         Request exactly the data you need in a single request — no over-fetching, no under-fetching.
       </p>
-      <p class="mt-2 text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-gray-600 dark:text-gray-400">
         The GraphQL API uses the same authentication as the
         <.link
           navigate={~p"/docs/api"}
-          class="text-cerulean-600 hover:text-cerulean-500 dark:text-cerulean-400"
+          class="text-blue-600 hover:text-blue-500 dark:text-blue-400"
         >
           REST API
         </.link>
         and provides equivalent functionality with the added benefit of nested queries and precise field selection.
       </p>
-      <div class="mt-6 rounded-lg border border-zinc-900/10 bg-cool-steel-50 p-4 dark:border-white/10 dark:bg-cool-steel-900/40">
+      <div class="mt-6 rounded-lg border border-zinc-900/10 bg-gray-50 p-4 dark:border-white/10 dark:bg-gray-900/40">
         <h3 class="text-sm font-semibold text-zinc-900 dark:text-white">
           Official clients
         </h3>
-        <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
           Prefer infrastructure-as-code? The Towerops Ansible collection covers every resource exposed here: <a
             href="https://codeberg.org/towerops/ansible"
             class="font-medium text-emerald-600 hover:underline dark:text-emerald-400"
@@ -339,7 +339,7 @@
       <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">
         Authentication
       </h2>
-      <p class="mt-4 text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-4 text-gray-600 dark:text-gray-400">
         Authenticate using a Bearer token in the
         <code class="rounded bg-zinc-100 px-1.5 py-0.5 text-sm font-mono text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200">
           Authorization
@@ -355,7 +355,7 @@
 <!-- Endpoint -->
     <section id="endpoint" class="mb-16">
       <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">Endpoint</h2>
-      <p class="mt-4 text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-4 text-gray-600 dark:text-gray-400">
         All GraphQL requests are sent as
         <code class="rounded bg-zinc-100 px-1.5 py-0.5 text-sm font-mono text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200">
           POST
@@ -365,7 +365,7 @@
       <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
         <pre class="text-sm text-green-400"><code>POST https://app.towerops.net/api/graphql</code></pre>
       </div>
-      <p class="mt-4 text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-4 text-gray-600 dark:text-gray-400">
         Send a JSON body with a
         <code class="rounded bg-zinc-100 px-1.5 py-0.5 text-sm font-mono text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200">
           query
@@ -388,7 +388,7 @@
       </h2>
 
       <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">devices</h3>
-      <p class="mt-2 text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-gray-600 dark:text-gray-400">
         List all devices. Optionally filter by site or status.
       </p>
       <div class="mt-3 overflow-x-auto">
@@ -404,7 +404,7 @@
               </th>
             </tr>
           </thead>
-          <tbody class="text-cool-steel-600 dark:text-cool-steel-400">
+          <tbody class="text-gray-600 dark:text-gray-400">
             <tr class="border-b border-zinc-100 dark:border-zinc-800">
               <td class="py-2 pr-4 font-mono text-xs">siteId</td>
               <td class="py-2 pr-4">ID</td>
@@ -444,7 +444,7 @@
       </div>
 
       <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">device</h3>
-      <p class="mt-2 text-cool-steel-600 dark:text-cool-steel-400">Get a single device by ID.</p>
+      <p class="mt-2 text-gray-600 dark:text-gray-400">Get a single device by ID.</p>
       <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
         <pre class="text-sm text-green-400 overflow-x-auto"><code><%= raw(~S[{
   device(id: "device-uuid") {
@@ -469,9 +469,7 @@
       </h2>
 
       <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">sites</h3>
-      <p class="mt-2 text-cool-steel-600 dark:text-cool-steel-400">
-        List all sites for the organization.
-      </p>
+      <p class="mt-2 text-gray-600 dark:text-gray-400">List all sites for the organization.</p>
       <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
         <pre class="text-sm text-green-400 overflow-x-auto"><code><%= raw(~S[{
   sites {
@@ -487,7 +485,7 @@
       </div>
 
       <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">site</h3>
-      <p class="mt-2 text-cool-steel-600 dark:text-cool-steel-400">Get a single site by ID.</p>
+      <p class="mt-2 text-gray-600 dark:text-gray-400">Get a single site by ID.</p>
       <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
         <pre class="text-sm text-green-400 overflow-x-auto"><code><%= raw(~S[{ site(id: "site-uuid") { id name location } }]) %></code></pre>
       </div>
@@ -500,7 +498,7 @@
       </h2>
 
       <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">alerts</h3>
-      <p class="mt-2 text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-gray-600 dark:text-gray-400">
         List alerts. Filter by status or device.
       </p>
       <div class="mt-3 overflow-x-auto">
@@ -516,7 +514,7 @@
               </th>
             </tr>
           </thead>
-          <tbody class="text-cool-steel-600 dark:text-cool-steel-400">
+          <tbody class="text-gray-600 dark:text-gray-400">
             <tr class="border-b border-zinc-100 dark:border-zinc-800">
               <td class="py-2 pr-4 font-mono text-xs">status</td>
               <td class="py-2 pr-4">String</td>
@@ -671,9 +669,7 @@
       </h2>
 
       <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">deviceMetrics</h3>
-      <p class="mt-2 text-cool-steel-600 dark:text-cool-steel-400">
-        Get time-series metrics for a device.
-      </p>
+      <p class="mt-2 text-gray-600 dark:text-gray-400">Get time-series metrics for a device.</p>
       <div class="mt-3 overflow-x-auto">
         <table class="min-w-full text-sm">
           <thead>
@@ -687,7 +683,7 @@
               </th>
             </tr>
           </thead>
-          <tbody class="text-cool-steel-600 dark:text-cool-steel-400">
+          <tbody class="text-gray-600 dark:text-gray-400">
             <tr class="border-b border-zinc-100 dark:border-zinc-800">
               <td class="py-2 pr-4 font-mono text-xs">deviceId</td>
               <td class="py-2 pr-4">ID!</td>
@@ -719,9 +715,7 @@
       </div>
 
       <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">deviceInterfaces</h3>
-      <p class="mt-2 text-cool-steel-600 dark:text-cool-steel-400">
-        Get SNMP interfaces for a device.
-      </p>
+      <p class="mt-2 text-gray-600 dark:text-gray-400">Get SNMP interfaces for a device.</p>
       <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
         <pre class="text-sm text-green-400 overflow-x-auto"><code><%= raw(~S[{
   deviceInterfaces(deviceId: "device-uuid") {
@@ -744,7 +738,7 @@
       <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">
         Query: Time-Series
       </h2>
-      <p class="mt-4 text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-4 text-gray-600 dark:text-gray-400">
         Query historical sensor readings, interface traffic rates, and monitoring check results.
         All time-series queries support a
         <code class="rounded bg-zinc-100 px-1.5 py-0.5 text-sm font-mono text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200">
@@ -754,7 +748,7 @@
       </p>
 
       <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">deviceSensors</h3>
-      <p class="mt-2 text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-gray-600 dark:text-gray-400">
         List all SNMP sensors discovered on a device.
       </p>
       <div class="mt-3 overflow-x-auto">
@@ -770,7 +764,7 @@
               </th>
             </tr>
           </thead>
-          <tbody class="text-cool-steel-600 dark:text-cool-steel-400">
+          <tbody class="text-gray-600 dark:text-gray-400">
             <tr>
               <td class="py-2 pr-4 font-mono text-xs">deviceId</td>
               <td class="py-2 pr-4">ID!</td>
@@ -794,7 +788,7 @@
       </div>
 
       <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">sensorReadings</h3>
-      <p class="mt-2 text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-gray-600 dark:text-gray-400">
         Get historical readings for a specific sensor.
       </p>
       <div class="mt-3 overflow-x-auto">
@@ -810,7 +804,7 @@
               </th>
             </tr>
           </thead>
-          <tbody class="text-cool-steel-600 dark:text-cool-steel-400">
+          <tbody class="text-gray-600 dark:text-gray-400">
             <tr class="border-b border-zinc-100 dark:border-zinc-800">
               <td class="py-2 pr-4 font-mono text-xs">sensorId</td>
               <td class="py-2 pr-4">ID!</td>
@@ -836,7 +830,7 @@
       </div>
 
       <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">interfaceTraffic</h3>
-      <p class="mt-2 text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-gray-600 dark:text-gray-400">
         Get traffic rates (bits per second) computed from SNMP counter deltas for a network interface.
       </p>
       <div class="mt-3 overflow-x-auto">
@@ -852,7 +846,7 @@
               </th>
             </tr>
           </thead>
-          <tbody class="text-cool-steel-600 dark:text-cool-steel-400">
+          <tbody class="text-gray-600 dark:text-gray-400">
             <tr class="border-b border-zinc-100 dark:border-zinc-800">
               <td class="py-2 pr-4 font-mono text-xs">interfaceId</td>
               <td class="py-2 pr-4">ID!</td>
@@ -879,7 +873,7 @@
       </div>
 
       <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">checkResults</h3>
-      <p class="mt-2 text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-gray-600 dark:text-gray-400">
         Get historical results for a monitoring check (ping, HTTP, etc.).
       </p>
       <div class="mt-3 overflow-x-auto">
@@ -895,7 +889,7 @@
               </th>
             </tr>
           </thead>
-          <tbody class="text-cool-steel-600 dark:text-cool-steel-400">
+          <tbody class="text-gray-600 dark:text-gray-400">
             <tr class="border-b border-zinc-100 dark:border-zinc-800">
               <td class="py-2 pr-4 font-mono text-xs">checkId</td>
               <td class="py-2 pr-4">ID!</td>
@@ -927,7 +921,7 @@
       <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">
         Query: Service Checks
       </h2>
-      <p class="mt-2 text-base text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-base text-gray-600 dark:text-gray-400">
         List and inspect HTTP, TCP, DNS, and ping service checks.
       </p>
 
@@ -967,7 +961,7 @@
       <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">
         Query: On-Call Schedules
       </h2>
-      <p class="mt-2 text-base text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-base text-gray-600 dark:text-gray-400">
         Inspect schedules and find out who is currently on call.
       </p>
 
@@ -1028,7 +1022,7 @@
       <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">
         Query: Escalation Policies
       </h2>
-      <p class="mt-2 text-base text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-base text-gray-600 dark:text-gray-400">
         Inspect escalation policies and their rules + targets.
       </p>
 
@@ -1074,7 +1068,7 @@
       <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">
         Query: Maintenance Windows
       </h2>
-      <p class="mt-2 text-base text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-base text-gray-600 dark:text-gray-400">
         Inspect planned and active maintenance windows. The optional <code>filter</code>
         argument accepts <code>active</code>, <code>upcoming</code>, or <code>past</code>.
       </p>
@@ -1169,9 +1163,7 @@
       <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">
         updateSite / deleteSite
       </h3>
-      <p class="mt-2 text-cool-steel-600 dark:text-cool-steel-400">
-        Same pattern as device mutations.
-      </p>
+      <p class="mt-2 text-gray-600 dark:text-gray-400">Same pattern as device mutations.</p>
     </section>
     
 <!-- Mutations: Alerts -->
@@ -1209,7 +1201,7 @@
       </h2>
 
       <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">createAgent</h3>
-      <p class="mt-2 text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-gray-600 dark:text-gray-400">
         Creates a new agent token. The raw token is only returned once.
       </p>
       <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
@@ -1549,7 +1541,7 @@ mutation {
       <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">
         Subscriptions
       </h2>
-      <p class="mt-4 text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-4 text-gray-600 dark:text-gray-400">
         Subscribe to real-time events via WebSocket. Connect to
         <code class="rounded bg-zinc-100 px-1.5 py-0.5 text-sm font-mono text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200">
           wss://app.towerops.net/socket/graphql
@@ -1558,7 +1550,7 @@ mutation {
       </p>
 
       <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">Connecting</h3>
-      <p class="mt-2 text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-gray-600 dark:text-gray-400">
         Pass your API token in the connection parameters when establishing the WebSocket:
       </p>
       <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
@@ -1576,7 +1568,7 @@ const absintheSocket = AbsintheSocket.create(phoenixSocket);]) %></code></pre>
       <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">
         deviceStatusChanged
       </h3>
-      <p class="mt-2 text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-gray-600 dark:text-gray-400">
         Subscribe to device status changes. Optionally filter by a specific device ID, or omit to receive all device events in your organization.
       </p>
       <div class="mt-3 overflow-x-auto">
@@ -1592,7 +1584,7 @@ const absintheSocket = AbsintheSocket.create(phoenixSocket);]) %></code></pre>
               </th>
             </tr>
           </thead>
-          <tbody class="text-cool-steel-600 dark:text-cool-steel-400">
+          <tbody class="text-gray-600 dark:text-gray-400">
             <tr>
               <td class="py-2 pr-4 font-mono text-xs">deviceId</td>
               <td class="py-2 pr-4">ID</td>
@@ -1623,7 +1615,7 @@ subscription {
       </div>
 
       <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">alertEvent</h3>
-      <p class="mt-2 text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-gray-600 dark:text-gray-400">
         Subscribe to alert lifecycle events (created, acknowledged, resolved) for your organization.
       </p>
       <div class="mt-4 rounded-lg bg-zinc-900 p-4 dark:bg-zinc-800">
@@ -1643,7 +1635,7 @@ subscription {
       <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">
         sensorReadingsUpdated
       </h3>
-      <p class="mt-2 text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-gray-600 dark:text-gray-400">
         Subscribe to live sensor reading updates for a specific device. Delivers batched readings as they are polled.
       </p>
       <div class="mt-3 overflow-x-auto">
@@ -1659,7 +1651,7 @@ subscription {
               </th>
             </tr>
           </thead>
-          <tbody class="text-cool-steel-600 dark:text-cool-steel-400">
+          <tbody class="text-gray-600 dark:text-gray-400">
             <tr>
               <td class="py-2 pr-4 font-mono text-xs">deviceId</td>
               <td class="py-2 pr-4">ID!</td>
@@ -1691,12 +1683,12 @@ subscription {
       <h2 class="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white">
         Types Reference
       </h2>
-      <p class="mt-4 text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-4 text-gray-600 dark:text-gray-400">
         All field names use camelCase in GraphQL queries (Absinthe automatically converts from Elixir's snake_case).
       </p>
 
       <h3 class="mt-8 text-lg font-semibold text-zinc-900 dark:text-white">Device</h3>
-      <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
         id, name, ipAddress, description, displayOrder, status, lastCheckedAt, lastStatusChangeAt,
         monitoringEnabled, checkIntervalSeconds, snmpEnabled, snmpVersion, snmpCommunity, snmpCommunitySource,
         snmpPort, snmpTransport, snmpTransportSource, lastDiscoveryAt, lastSnmpPollAt,
@@ -1706,7 +1698,7 @@ subscription {
       </p>
 
       <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">Site</h3>
-      <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
         id, name, description, location, displayOrder, snmpVersion, snmpCommunity, snmpPort, snmpTransport,
         snmpv3SecurityLevel, snmpv3Username, snmpv3AuthProtocol, snmpv3PrivProtocol,
         mikrotikUsername, mikrotikPort, mikrotikSshPort, mikrotikUseSsl, mikrotikEnabled,
@@ -1714,19 +1706,19 @@ subscription {
       </p>
 
       <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">Alert</h3>
-      <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
         id, alertType, message, triggeredAt, acknowledgedAt, resolvedAt, emailSentAt,
         deviceId, acknowledgedById, gaiiaImpact, insertedAt, device, acknowledgedByEmail
       </p>
 
       <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">Agent</h3>
-      <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
         id, name, enabled, isCloudPoller, allowRemoteDebug, lastSeenAt, lastIp, metadata,
         organizationId, insertedAt, updatedAt, deviceCount
       </p>
 
       <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">Organization</h3>
-      <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
         id, name, slug, subscriptionPlan, useSites, snmpVersion, snmpCommunity, snmpPort, snmpTransport,
         snmpv3SecurityLevel, snmpv3Username, snmpv3AuthProtocol, snmpv3PrivProtocol,
         mikrotikEnabled, mikrotikUsername, mikrotikPort, mikrotikSshPort, mikrotikUseSsl,
@@ -1734,61 +1726,61 @@ subscription {
       </p>
 
       <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">Member</h3>
-      <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
         id, email, role, isDefault, userId, insertedAt
       </p>
 
       <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">Integration</h3>
-      <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
         id, provider, enabled, syncIntervalMinutes, lastSyncedAt, lastSyncStatus, organizationId, insertedAt, updatedAt
       </p>
 
       <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">ActivityItem</h3>
-      <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
         summary, detail, timestamp, severity, icon, deviceName, siteName, link, type
       </p>
 
       <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">Sensor</h3>
-      <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
         id, sensorType, sensorUnit, sensorDescr, currentValue, lastCheckedAt, monitored
       </p>
 
       <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">SensorReading</h3>
-      <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
         sensorId, value, status, checkedAt
       </p>
 
       <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">
         InterfaceTrafficPoint
       </h3>
-      <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
         timestamp, inBps (Float), outBps (Float), inErrors (Int), outErrors (Int)
       </p>
 
       <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">CheckResultPoint</h3>
-      <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
         checkId, value, status, checkedAt, responseTimeMs
       </p>
 
       <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">DeviceStatusEvent</h3>
-      <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
         deviceId, deviceName, status, changedAt
       </p>
 
       <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">AlertEvent</h3>
-      <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
         alertId, alertType, severity, message, deviceId, eventType, triggeredAt
       </p>
 
       <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">
         SensorReadingsEvent
       </h3>
-      <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
         deviceId, deviceName, readings (list of SensorReadingSnapshot: sensorId, sensorType, sensorDescr, sensorUnit, value, checkedAt)
       </p>
 
       <h3 class="mt-6 text-lg font-semibold text-zinc-900 dark:text-white">Utility Types</h3>
-      <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
         <strong>DeleteResult:</strong>
         success (Boolean!), message (String)<br />
         <strong>TestResult:</strong>
diff --git a/lib/towerops_web/controllers/page_html/home.html.heex b/lib/towerops_web/controllers/page_html/home.html.heex
index e249b3ea..c5fc1583 100644
--- a/lib/towerops_web/controllers/page_html/home.html.heex
+++ b/lib/towerops_web/controllers/page_html/home.html.heex
@@ -1,16 +1,16 @@
 <MarketingLayouts.marketing flash={@flash}>
   <!-- Hero Section -->
   <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-20 pb-16 text-center lg:pt-32">
-    <div class="inline-flex items-center rounded-full px-4 py-1.5 mb-8 bg-cerulean-50 dark:bg-cerulean-950 text-cerulean-700 dark:text-cerulean-300 text-sm font-medium ring-1 ring-cerulean-600/20">
+    <div class="inline-flex items-center rounded-full px-4 py-1.5 mb-8 bg-blue-50 dark:bg-blue-950 text-blue-700 dark:text-blue-300 text-sm font-medium ring-1 ring-blue-600/20">
       <span class="mr-2">📡</span> Built specifically for WISP &amp; ISP operators
     </div>
     <h1 class="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-slate-900 dark:text-white sm:text-7xl">
       See the
-      <span class="relative whitespace-nowrap text-cerulean-600 dark:text-cerulean-400">
+      <span class="relative whitespace-nowrap text-blue-600 dark:text-blue-400">
         <svg
           aria-hidden="true"
           viewBox="0 0 418 42"
-          class="absolute top-2/3 left-0 h-[0.58em] w-full fill-cerulean-300/70 dark:fill-cerulean-500/40"
+          class="absolute top-2/3 left-0 h-[0.58em] w-full fill-blue-300/70 dark:fill-blue-500/40"
           preserveAspectRatio="none"
         >
           <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />
@@ -24,19 +24,19 @@
       When a tower goes down, instantly see which customers are affected, how much MRR is at risk,
       and what to fix first.
     </p>
-    <p class="mx-auto mt-4 max-w-2xl text-xl font-semibold tracking-tight text-cerulean-600 dark:text-cerulean-400">
+    <p class="mx-auto mt-4 max-w-2xl text-xl font-semibold tracking-tight text-blue-600 dark:text-blue-400">
       First 10 devices always free. No credit card required.
     </p>
     <div class="mt-10 flex justify-center gap-x-6">
       <.link
         navigate={~p"/users/register"}
-        class="group inline-flex items-center justify-center rounded-full py-3 px-6 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 bg-cerulean-600 text-white hover:text-slate-100 hover:bg-cerulean-500 active:bg-cerulean-800 active:text-cerulean-100 focus-visible:outline-cerulean-600"
+        class="group inline-flex items-center justify-center rounded-full py-3 px-6 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600"
       >
         Start monitoring free →
       </.link>
       <a
         href="#features"
-        class="group inline-flex items-center justify-center rounded-full py-3 px-6 text-sm font-semibold ring-1 ring-slate-200 dark:ring-slate-700 text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white hover:ring-slate-300 dark:hover:ring-slate-600 active:bg-slate-100 dark:active:bg-slate-800 focus-visible:outline-cerulean-600"
+        class="group inline-flex items-center justify-center rounded-full py-3 px-6 text-sm font-semibold ring-1 ring-slate-200 dark:ring-slate-700 text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white hover:ring-slate-300 dark:hover:ring-slate-600 active:bg-slate-100 dark:active:bg-slate-800 focus-visible:outline-blue-600"
       >
         See how it works
       </a>
@@ -58,24 +58,24 @@
       </div>
       <div class="mt-16 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
         <div class="rounded-lg bg-slate-800 p-6 text-center">
-          <div class="text-3xl font-bold text-sweet-salmon-400">45 min</div>
+          <div class="text-3xl font-bold text-red-400">45 min</div>
           <div class="mt-2 text-sm text-slate-400">Average time to assess outage impact</div>
         </div>
         <div class="rounded-lg bg-slate-800 p-6 text-center">
-          <div class="text-3xl font-bold text-sweet-salmon-400">5+</div>
+          <div class="text-3xl font-bold text-red-400">5+</div>
           <div class="mt-2 text-sm text-slate-400">Dashboards to check during incidents</div>
         </div>
         <div class="rounded-lg bg-slate-800 p-6 text-center">
-          <div class="text-3xl font-bold text-sweet-salmon-400">???</div>
+          <div class="text-3xl font-bold text-red-400">???</div>
           <div class="mt-2 text-sm text-slate-400">Subscribers affected right now</div>
         </div>
         <div class="rounded-lg bg-slate-800 p-6 text-center">
-          <div class="text-3xl font-bold text-sweet-salmon-400">$???</div>
+          <div class="text-3xl font-bold text-red-400">$???</div>
           <div class="mt-2 text-sm text-slate-400">Revenue at risk from this outage</div>
         </div>
       </div>
       <div class="mt-12 text-center">
-        <p class="text-lg font-medium text-cerulean-400">
+        <p class="text-lg font-medium text-blue-400">
           TowerOps gives you one place to see it all.
         </p>
       </div>
@@ -86,14 +86,14 @@
   <section
     id="features"
     aria-label="Features for WISP operators"
-    class="relative overflow-hidden bg-cerulean-600 pt-20 pb-28 sm:py-32"
+    class="relative overflow-hidden bg-blue-600 pt-20 pb-28 sm:py-32"
   >
     <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative">
       <div class="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
         <h2 class="font-display text-3xl tracking-tight text-white sm:text-4xl md:text-5xl">
           Operational intelligence built for WISPs.
         </h2>
-        <p class="mt-6 text-lg tracking-tight text-cerulean-100">
+        <p class="mt-6 text-lg tracking-tight text-blue-100">
           Not another generic monitoring tool. TowerOps understands tower sites, subscribers, and revenue.
         </p>
       </div>
@@ -106,7 +106,7 @@
             </div>
             <h3 class="text-lg font-semibold text-white">Impact Dashboard</h3>
           </div>
-          <p class="mt-4 text-sm text-cerulean-100">
+          <p class="mt-4 text-sm text-blue-100">
             See MRR at risk, affected subscriber counts, and active incidents at a glance.
             Know the business impact of every network event before your customers call.
           </p>
@@ -119,7 +119,7 @@
             </div>
             <h3 class="text-lg font-semibold text-white">Subscriber Trace</h3>
           </div>
-          <p class="mt-4 text-sm text-cerulean-100">
+          <p class="mt-4 text-sm text-blue-100">
             Help desk calls in? Search by name or account and instantly see their device status,
             QoE scores, alerts, and whether nearby subscribers are also affected.
           </p>
@@ -132,7 +132,7 @@
             </div>
             <h3 class="text-lg font-semibold text-white">Smart Alert Triage</h3>
           </div>
-          <p class="mt-4 text-sm text-cerulean-100">
+          <p class="mt-4 text-sm text-blue-100">
             Alerts grouped by tower site and ranked by severity and subscriber impact.
             Filter by critical/unresolved/all. Resolve directly from the alert view.
           </p>
@@ -146,7 +146,7 @@
             </div>
             <h3 class="text-lg font-semibold text-white">Tower Site Intelligence</h3>
           </div>
-          <p class="mt-4 text-sm text-cerulean-100">
+          <p class="mt-4 text-sm text-blue-100">
             Enriched site pages with subscriber counts, device health grids, active alerts,
             latency charts, and active alerts — all on one screen.
           </p>
@@ -159,7 +159,7 @@
             </div>
             <h3 class="text-lg font-semibold text-white">Billing &amp; QoE Integrations</h3>
           </div>
-          <p class="mt-4 text-sm text-cerulean-100">
+          <p class="mt-4 text-sm text-blue-100">
             Connect Gaiia, Sonar, Splynx, or VISP for subscriber data, Preseem for QoE metrics,
             NetBox for DCIM, and PagerDuty for alerting. TowerOps pulls it all together.
           </p>
@@ -187,7 +187,7 @@
         <!-- Step 1 -->
         <div class="relative">
           <div class="flex items-center gap-x-4">
-            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-cerulean-600 text-white font-semibold text-lg">
+            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-600 text-white font-semibold text-lg">
               1
             </div>
             <h3 class="text-xl font-semibold text-slate-900 dark:text-white">
@@ -205,7 +205,7 @@
         <!-- Step 2 -->
         <div class="relative">
           <div class="flex items-center gap-x-4">
-            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-cerulean-600 text-white font-semibold text-lg">
+            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-600 text-white font-semibold text-lg">
               2
             </div>
             <h3 class="text-xl font-semibold text-slate-900 dark:text-white">
@@ -217,25 +217,25 @@
             TowerOps automatically maps subscribers to devices and tower sites.
           </p>
           <div class="mt-6 flex flex-wrap gap-2">
-            <span class="inline-flex items-center rounded-full bg-cerulean-50 dark:bg-cerulean-950 px-3 py-1 text-xs font-medium text-cerulean-700 dark:text-cerulean-300 ring-1 ring-cerulean-600/20">
+            <span class="inline-flex items-center rounded-full bg-blue-50 dark:bg-blue-950 px-3 py-1 text-xs font-medium text-blue-700 dark:text-blue-300 ring-1 ring-blue-600/20">
               Gaiia
             </span>
-            <span class="inline-flex items-center rounded-full bg-cerulean-50 dark:bg-cerulean-950 px-3 py-1 text-xs font-medium text-cerulean-700 dark:text-cerulean-300 ring-1 ring-cerulean-600/20">
+            <span class="inline-flex items-center rounded-full bg-blue-50 dark:bg-blue-950 px-3 py-1 text-xs font-medium text-blue-700 dark:text-blue-300 ring-1 ring-blue-600/20">
               Sonar
             </span>
-            <span class="inline-flex items-center rounded-full bg-cerulean-50 dark:bg-cerulean-950 px-3 py-1 text-xs font-medium text-cerulean-700 dark:text-cerulean-300 ring-1 ring-cerulean-600/20">
+            <span class="inline-flex items-center rounded-full bg-blue-50 dark:bg-blue-950 px-3 py-1 text-xs font-medium text-blue-700 dark:text-blue-300 ring-1 ring-blue-600/20">
               Preseem
             </span>
-            <span class="inline-flex items-center rounded-full bg-cerulean-50 dark:bg-cerulean-950 px-3 py-1 text-xs font-medium text-cerulean-700 dark:text-cerulean-300 ring-1 ring-cerulean-600/20">
+            <span class="inline-flex items-center rounded-full bg-blue-50 dark:bg-blue-950 px-3 py-1 text-xs font-medium text-blue-700 dark:text-blue-300 ring-1 ring-blue-600/20">
               Splynx
             </span>
-            <span class="inline-flex items-center rounded-full bg-cerulean-50 dark:bg-cerulean-950 px-3 py-1 text-xs font-medium text-cerulean-700 dark:text-cerulean-300 ring-1 ring-cerulean-600/20">
+            <span class="inline-flex items-center rounded-full bg-blue-50 dark:bg-blue-950 px-3 py-1 text-xs font-medium text-blue-700 dark:text-blue-300 ring-1 ring-blue-600/20">
               VISP
             </span>
-            <span class="inline-flex items-center rounded-full bg-cerulean-50 dark:bg-cerulean-950 px-3 py-1 text-xs font-medium text-cerulean-700 dark:text-cerulean-300 ring-1 ring-cerulean-600/20">
+            <span class="inline-flex items-center rounded-full bg-blue-50 dark:bg-blue-950 px-3 py-1 text-xs font-medium text-blue-700 dark:text-blue-300 ring-1 ring-blue-600/20">
               NetBox
             </span>
-            <span class="inline-flex items-center rounded-full bg-cerulean-50 dark:bg-cerulean-950 px-3 py-1 text-xs font-medium text-cerulean-700 dark:text-cerulean-300 ring-1 ring-cerulean-600/20">
+            <span class="inline-flex items-center rounded-full bg-blue-50 dark:bg-blue-950 px-3 py-1 text-xs font-medium text-blue-700 dark:text-blue-300 ring-1 ring-blue-600/20">
               PagerDuty
             </span>
           </div>
@@ -243,7 +243,7 @@
         <!-- Step 3 -->
         <div class="relative">
           <div class="flex items-center gap-x-4">
-            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-cerulean-600 text-white font-semibold text-lg">
+            <div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-600 text-white font-semibold text-lg">
               3
             </div>
             <h3 class="text-xl font-semibold text-slate-900 dark:text-white">
@@ -254,12 +254,9 @@
             Your dashboard lights up with subscriber impact, revenue at risk, device health,
             and site status. Help desk gets subscriber trace. NOC gets alert triage. Everyone wins.
           </p>
-          <div class="mt-6 rounded-lg border-2 border-cerulean-200 dark:border-cerulean-800 bg-white dark:bg-white/5 p-4">
+          <div class="mt-6 rounded-lg border-2 border-blue-200 dark:border-blue-800 bg-white dark:bg-white/5 p-4">
             <div class="flex items-center gap-2">
-              <.icon
-                name="hero-chart-bar"
-                class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400"
-              />
+              <.icon name="hero-chart-bar" class="h-5 w-5 text-blue-600 dark:text-blue-400" />
               <span class="text-sm font-medium text-slate-900 dark:text-white">
                 Impact Dashboard
               </span>
@@ -328,7 +325,7 @@
         </p>
       </div>
       <div class="mt-16 mx-auto max-w-xl">
-        <div class="rounded-2xl bg-white dark:bg-slate-800 p-8 shadow-lg dark:shadow-black/30 ring-2 ring-cerulean-600 text-center">
+        <div class="rounded-2xl bg-white dark:bg-slate-800 p-8 shadow-lg dark:shadow-black/30 ring-2 ring-blue-600 text-center">
           <div class="mt-2">
             <span class="text-5xl font-bold text-slate-900 dark:text-white">$2</span>
             <span class="text-lg text-slate-500 dark:text-slate-400">/device/month</span>
@@ -343,63 +340,63 @@
             <div class="flex items-center gap-2">
               <.icon
                 name="hero-check"
-                class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0"
+                class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0"
               /> Unlimited devices
             </div>
             <div class="flex items-center gap-2">
               <.icon
                 name="hero-check"
-                class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0"
+                class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0"
               /> Unlimited agents &amp; networks
             </div>
             <div class="flex items-center gap-2">
               <.icon
                 name="hero-check"
-                class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0"
+                class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0"
               /> SNMP monitoring &amp; alerts
             </div>
             <div class="flex items-center gap-2">
               <.icon
                 name="hero-check"
-                class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0"
+                class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0"
               /> Impact dashboard
             </div>
             <div class="flex items-center gap-2">
               <.icon
                 name="hero-check"
-                class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0"
+                class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0"
               /> All billing integrations
             </div>
             <div class="flex items-center gap-2">
               <.icon
                 name="hero-check"
-                class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0"
+                class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0"
               /> Preseem &amp; PagerDuty
             </div>
             <div class="flex items-center gap-2">
               <.icon
                 name="hero-check"
-                class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0"
+                class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0"
               /> Subscriber trace &amp; alert triage
             </div>
             <%!-- Config change tracking hidden — feature temporarily disabled --%>
             <div class="flex items-center gap-2">
               <.icon
                 name="hero-check"
-                class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0"
+                class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0"
               /> Team access &amp; email alerts
             </div>
             <div class="flex items-center gap-2">
               <.icon
                 name="hero-check"
-                class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0"
+                class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0"
               /> API access
             </div>
           </div>
 
           <.link
             navigate={~p"/users/register"}
-            class="mt-10 inline-block rounded-full px-8 py-3 text-sm font-semibold text-white bg-cerulean-600 hover:bg-cerulean-500"
+            class="mt-10 inline-block rounded-full px-8 py-3 text-sm font-semibold text-white bg-blue-600 hover:bg-blue-500"
           >
             Get started free
           </.link>
@@ -408,7 +405,7 @@
       <p class="mt-8 text-center text-sm text-slate-500 dark:text-slate-400">
         No credit card required. Need a custom plan for 500+ devices? <a
           href="mailto:hi@towerops.net"
-          class="text-cerulean-600 dark:text-cerulean-400 hover:text-cerulean-500 dark:hover:text-cerulean-300 underline"
+          class="text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 underline"
         >Talk to us</a>.
       </p>
     </div>
@@ -455,19 +452,19 @@
   </section>
   
 <!-- Final CTA -->
-  <section aria-label="Get started" class="relative overflow-hidden bg-cerulean-600 py-32">
+  <section aria-label="Get started" class="relative overflow-hidden bg-blue-600 py-32">
     <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative">
       <div class="mx-auto max-w-lg text-center">
         <h2 class="font-display text-3xl tracking-tight text-white sm:text-4xl">
           Stop guessing. Start seeing impact.
         </h2>
-        <p class="mt-4 text-lg tracking-tight text-cerulean-100">
+        <p class="mt-4 text-lg tracking-tight text-blue-100">
           First 10 devices always free. Deploy an agent, connect your billing system,
           and see the difference in your first outage.
         </p>
         <.link
           navigate={~p"/users/register"}
-          class="group inline-flex items-center justify-center rounded-full py-3 px-6 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 mt-10 bg-white text-slate-900 hover:bg-cerulean-50 active:bg-cerulean-200 active:text-slate-600 focus-visible:outline-white"
+          class="group inline-flex items-center justify-center rounded-full py-3 px-6 text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 mt-10 bg-white text-slate-900 hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white"
         >
           Start monitoring free →
         </.link>
diff --git a/lib/towerops_web/controllers/page_html/privacy.html.heex b/lib/towerops_web/controllers/page_html/privacy.html.heex
index de0552aa..d920fc55 100644
--- a/lib/towerops_web/controllers/page_html/privacy.html.heex
+++ b/lib/towerops_web/controllers/page_html/privacy.html.heex
@@ -1,36 +1,36 @@
 <% content = fn -> %>
   <div class="space-y-8">
     <div>
-      <h1 class="text-3xl font-bold text-cool-steel-900 dark:text-white">Privacy Policy</h1>
-      <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Privacy Policy</h1>
+      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
         Version 1.0 | Effective Date: January 29, 2026
       </p>
     </div>
 
     <div class="prose prose-sm dark:prose-invert max-w-none">
       <section class="space-y-4">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
           Our Commitment to Privacy
         </h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           At Towerops, we value your privacy. This policy outlines how we collect, use, and protect your data when you use our network monitoring platform.
         </p>
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
           Data Collection and Use
         </h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           We collect and store information necessary to provide our network monitoring services, including:
         </p>
-        <ul class="list-disc pl-6 space-y-2 text-cool-steel-700 dark:text-cool-steel-300">
+        <ul class="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
           <li>Account information (email address, organization details)</li>
           <li>Network device data (IP addresses, SNMP data, device configurations)</li>
           <li>Monitoring metrics and alerts</li>
           <li>Usage information to improve our services</li>
         </ul>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           <strong class="font-semibold">
             Your data is used exclusively for providing our monitoring services to you.
           </strong>
@@ -39,11 +39,11 @@
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">Data Protection</h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Data Protection</h2>
+        <p class="text-gray-700 dark:text-gray-300">
           We implement industry-standard security measures to protect your data:
         </p>
-        <ul class="list-disc pl-6 space-y-2 text-cool-steel-700 dark:text-cool-steel-300">
+        <ul class="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
           <li>Encrypted connections (HTTPS/TLS) for all data transmission</li>
           <li>Secure database storage with encryption at rest</li>
           <li>Access controls and authentication mechanisms</li>
@@ -52,35 +52,33 @@
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">Data Retention</h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Data Retention</h2>
+        <p class="text-gray-700 dark:text-gray-300">
           We retain your data for as long as your account is active and as necessary to provide our services. Time-series monitoring data is retained according to your subscription plan. When you delete your account, we will delete your data within 30 days, except where we are required to retain it for legal or compliance purposes.
         </p>
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
-          Third-Party Services
-        </h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Third-Party Services</h2>
+        <p class="text-gray-700 dark:text-gray-300">
           We use limited third-party services to operate our platform:
         </p>
-        <ul class="list-disc pl-6 space-y-2 text-cool-steel-700 dark:text-cool-steel-300">
+        <ul class="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
           <li>Cloud infrastructure providers for hosting</li>
           <li>Email delivery services for notifications</li>
           <li>Payment processors for subscription billing</li>
         </ul>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           These services are bound by their own privacy policies and are used solely to deliver our services to you.
         </p>
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">Your Rights</h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Your Rights</h2>
+        <p class="text-gray-700 dark:text-gray-300">
           You have the right to:
         </p>
-        <ul class="list-disc pl-6 space-y-2 text-cool-steel-700 dark:text-cool-steel-300">
+        <ul class="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
           <li>Access your data at any time through your account</li>
           <li>Export your data in standard formats</li>
           <li>Request deletion of your account and associated data</li>
@@ -90,31 +88,29 @@
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">Cookie Policy</h2>
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Cookie Policy</h2>
 
-        <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6">
           What Are Cookies?
         </h3>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           Cookies are small text files that are placed on your device when you visit our website. They help us provide you with a better experience by remembering your preferences and keeping you logged in.
         </p>
 
-        <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6">
           What Cookies Do We Use?
         </h3>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           Towerops uses only <strong class="font-semibold">essential cookies</strong>
           that are strictly necessary for the operation of our platform. We do not use third-party tracking, advertising, or analytics cookies.
         </p>
 
         <div class="mt-4">
-          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white">
-            Essential Cookies
-          </h4>
-          <p class="text-cool-steel-700 dark:text-cool-steel-300 mt-2">
+          <h4 class="text-base font-semibold text-gray-900 dark:text-white">Essential Cookies</h4>
+          <p class="text-gray-700 dark:text-gray-300 mt-2">
             These cookies are required for our website to function properly and cannot be disabled:
           </p>
-          <ul class="list-disc pl-6 space-y-3 text-cool-steel-700 dark:text-cool-steel-300 mt-3">
+          <ul class="list-disc pl-6 space-y-3 text-gray-700 dark:text-gray-300 mt-3">
             <li>
               <strong class="font-semibold">Session Cookie (_towerops_web_key)</strong>
               <br />
@@ -156,20 +152,18 @@
           </ul>
         </div>
 
-        <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6">
           Third-Party Cookies
         </h3>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           We do not use any third-party cookies, tracking pixels, or analytics services that would place cookies on your device.
         </p>
 
-        <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6">
-          Managing Cookies
-        </h3>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6">Managing Cookies</h3>
+        <p class="text-gray-700 dark:text-gray-300">
           Since we only use essential cookies required for the website to function, disabling them will prevent you from using Towerops. However, you can manage cookies through your browser settings:
         </p>
-        <ul class="list-disc pl-6 space-y-2 text-cool-steel-700 dark:text-cool-steel-300 mt-3">
+        <ul class="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300 mt-3">
           <li>
             <strong class="font-semibold">Chrome:</strong>
             Settings → Privacy and security → Cookies and other site data
@@ -188,36 +182,36 @@
           </li>
         </ul>
 
-        <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6">
           Cookie Consent (EU/EEA Users)
         </h3>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           If you are accessing Towerops from the European Union or European Economic Area, you will see a cookie consent banner on your first visit. Since we only use essential cookies necessary for the website to function, this banner is informational. Under GDPR, essential cookies do not require explicit consent as they are strictly necessary for the service you have requested.
         </p>
 
-        <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6">
           Changes to Our Cookie Policy
         </h3>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           If we introduce new types of cookies in the future (such as analytics or marketing cookies), we will update this policy and, where required, request your consent before using them.
         </p>
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
           Changes to This Policy
         </h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           We may update this privacy policy from time to time. We will notify you of any significant changes by email or through our platform.
         </p>
       </section>
 
-      <section class="space-y-4 mt-8 pt-8 border-t border-cool-steel-200 dark:border-cool-steel-700">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">Contact Us</h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+      <section class="space-y-4 mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Contact Us</h2>
+        <p class="text-gray-700 dark:text-gray-300">
           If you have questions about this privacy policy or how we handle your data, please contact us at <a
             href="mailto:hi@towerops.net"
-            class="text-cerulean-600 hover:text-cerulean-500 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+            class="text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300"
           >hi@towerops.net</a>.
         </p>
       </section>
diff --git a/lib/towerops_web/controllers/page_html/terms.html.heex b/lib/towerops_web/controllers/page_html/terms.html.heex
index 82388a80..9591c9fb 100644
--- a/lib/towerops_web/controllers/page_html/terms.html.heex
+++ b/lib/towerops_web/controllers/page_html/terms.html.heex
@@ -1,71 +1,71 @@
 <% content = fn -> %>
   <div class="space-y-8">
     <div>
-      <h1 class="text-3xl font-bold text-cool-steel-900 dark:text-white">Terms of Service</h1>
-      <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Terms of Service</h1>
+      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
         Version 1.0 | Effective Date: January 29, 2026
       </p>
     </div>
 
     <div class="prose prose-sm dark:prose-invert max-w-none">
       <section class="space-y-4">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
           1. Acceptance of Terms
         </h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           By accessing and using Towerops ("Service"), you accept and agree to be bound by these Terms of Service ("Terms"). If you do not agree to these Terms, please do not use the Service.
         </p>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           These Terms constitute a legally binding agreement between you ("User", "you", or "your") and Towerops ("we", "us", or "our").
         </p>
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
           2. Service Description
         </h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           Towerops is a network monitoring and alerting platform that enables you to:
         </p>
-        <ul class="list-disc pl-6 space-y-2 text-cool-steel-700 dark:text-cool-steel-300">
+        <ul class="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
           <li>Monitor network devices via SNMP protocol</li>
           <li>Collect and visualize time-series metrics</li>
           <li>Receive alerts for device failures and performance issues</li>
           <li>Manage network topology and device relationships</li>
           <li>Deploy remote monitoring agents on your network</li>
         </ul>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           We reserve the right to modify, suspend, or discontinue any part of the Service at any time with reasonable notice to users.
         </p>
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
           3. User Accounts and Registration
         </h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           To use the Service, you must:
         </p>
-        <ul class="list-disc pl-6 space-y-2 text-cool-steel-700 dark:text-cool-steel-300">
+        <ul class="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
           <li>Register for an account with accurate and complete information</li>
           <li>Be at least 18 years old or have parental/guardian consent</li>
           <li>Maintain the security and confidentiality of your account credentials</li>
           <li>Notify us immediately of any unauthorized access to your account</li>
           <li>Be responsible for all activities that occur under your account</li>
         </ul>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           You may not share your account with others, and you may not use another user's account without permission.
         </p>
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
           4. Acceptable Use Policy
         </h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           You agree to use the Service only for lawful purposes and in accordance with these Terms. You agree NOT to:
         </p>
-        <ul class="list-disc pl-6 space-y-2 text-cool-steel-700 dark:text-cool-steel-300">
+        <ul class="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
           <li>
             Use the Service to monitor devices or networks you do not own or have explicit permission to monitor
           </li>
@@ -86,25 +86,25 @@
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
           5. User Data and Privacy
         </h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           Our collection and use of your personal data is governed by our <.link
             navigate={~p"/privacy"}
-            class="text-cerulean-600 dark:text-cerulean-400 hover:underline font-medium"
+            class="text-blue-600 dark:text-blue-400 hover:underline font-medium"
           >
             Privacy Policy
           </.link>, which is incorporated into these Terms by reference.
         </p>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           You retain all rights to the data you collect through the Service. We do not claim ownership of your monitoring data, device configurations, or network information.
         </p>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           <strong class="font-semibold">GDPR Rights:</strong>
           If you are located in the European Union or European Economic Area, you have specific rights under the General Data Protection Regulation (GDPR), including:
         </p>
-        <ul class="list-disc pl-6 space-y-2 text-cool-steel-700 dark:text-cool-steel-300">
+        <ul class="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
           <li>Right to access your personal data</li>
           <li>Right to rectification of inaccurate data</li>
           <li>Right to erasure ("right to be forgotten")</li>
@@ -113,10 +113,10 @@
           <li>Right to object to processing</li>
           <li>Right to withdraw consent</li>
         </ul>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           To exercise these rights, please contact us at <a
             href="mailto:hi@towerops.net"
-            class="text-cerulean-600 dark:text-cerulean-400 hover:underline font-medium"
+            class="text-blue-600 dark:text-blue-400 hover:underline font-medium"
           >
             hi@towerops.net
           </a>.
@@ -124,25 +124,25 @@
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
           6. Service Availability and Support
         </h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           We strive to provide reliable and uninterrupted service, but we do not guarantee that the Service will be:
         </p>
-        <ul class="list-disc pl-6 space-y-2 text-cool-steel-700 dark:text-cool-steel-300">
+        <ul class="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
           <li>Available at all times without interruption</li>
           <li>Error-free or free from bugs</li>
           <li>Secure from unauthorized access or cyberattacks</li>
           <li>Compatible with all hardware, software, or network configurations</li>
         </ul>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           We may perform scheduled maintenance that temporarily interrupts service. We will provide advance notice of scheduled downtime when possible.
         </p>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           Support is provided via email at <a
             href="mailto:hi@towerops.net"
-            class="text-cerulean-600 dark:text-cerulean-400 hover:underline font-medium"
+            class="text-blue-600 dark:text-blue-400 hover:underline font-medium"
           >
             hi@towerops.net
           </a>. Response times vary based on your subscription plan.
@@ -150,37 +150,37 @@
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
           7. Subscription and Payment
         </h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           The Service is provided on a subscription basis. By subscribing, you agree to:
         </p>
-        <ul class="list-disc pl-6 space-y-2 text-cool-steel-700 dark:text-cool-steel-300">
+        <ul class="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
           <li>Pay all fees associated with your selected subscription plan</li>
           <li>Provide accurate and current billing information</li>
           <li>Authorize recurring charges to your payment method</li>
           <li>Notify us of any changes to your payment information</li>
         </ul>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           Subscriptions automatically renew unless canceled before the renewal date. You may cancel your subscription at any time through your account settings. No refunds are provided for partial subscription periods.
         </p>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           We reserve the right to change our pricing with 30 days' notice. Price changes will not affect your current subscription period.
         </p>
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
           8. Intellectual Property
         </h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           The Service, including all software, designs, text, graphics, logos, and other content, is owned by Towerops and protected by copyright, trademark, and other intellectual property laws.
         </p>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           We grant you a limited, non-exclusive, non-transferable license to access and use the Service for your internal business purposes. You may not:
         </p>
-        <ul class="list-disc pl-6 space-y-2 text-cool-steel-700 dark:text-cool-steel-300">
+        <ul class="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
           <li>Copy, modify, or create derivative works of the Service</li>
           <li>Sell, resell, rent, or lease access to the Service</li>
           <li>Remove or alter any copyright, trademark, or proprietary notices</li>
@@ -189,15 +189,15 @@
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
           9. Limitation of Liability
         </h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           <strong class="font-semibold uppercase">
             To the maximum extent permitted by law:
           </strong>
         </p>
-        <ul class="list-disc pl-6 space-y-2 text-cool-steel-700 dark:text-cool-steel-300">
+        <ul class="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
           <li>
             The Service is provided "as is" without warranties of any kind, either express or implied
           </li>
@@ -217,19 +217,19 @@
             We are not liable for damages resulting from unauthorized access to your account
           </li>
         </ul>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           Some jurisdictions do not allow the exclusion of certain warranties or limitation of liability, so these limitations may not apply to you.
         </p>
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
           10. Indemnification
         </h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           You agree to indemnify, defend, and hold harmless Towerops and its officers, directors, employees, and agents from any claims, liabilities, damages, losses, and expenses (including legal fees) arising from:
         </p>
-        <ul class="list-disc pl-6 space-y-2 text-cool-steel-700 dark:text-cool-steel-300">
+        <ul class="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
           <li>Your use or misuse of the Service</li>
           <li>Your violation of these Terms</li>
           <li>Your violation of any rights of another person or entity</li>
@@ -238,129 +238,127 @@
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
           11. Termination
         </h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           You may terminate your account at any time by:
         </p>
-        <ul class="list-disc pl-6 space-y-2 text-cool-steel-700 dark:text-cool-steel-300">
+        <ul class="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
           <li>Canceling your subscription through account settings</li>
           <li>
             Contacting us at
             <a
               href="mailto:hi@towerops.net"
-              class="text-cerulean-600 dark:text-cerulean-400 hover:underline font-medium"
+              class="text-blue-600 dark:text-blue-400 hover:underline font-medium"
             >
               hi@towerops.net
             </a>
           </li>
         </ul>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           We may suspend or terminate your account immediately if:
         </p>
-        <ul class="list-disc pl-6 space-y-2 text-cool-steel-700 dark:text-cool-steel-300">
+        <ul class="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
           <li>You violate these Terms</li>
           <li>Your payment fails or your account is past due</li>
           <li>You engage in fraudulent or illegal activities</li>
           <li>We are required to do so by law</li>
         </ul>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           Upon termination, your right to use the Service ceases immediately. We will delete your data within 30 days of account termination, except where we are required to retain it for legal purposes.
         </p>
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
           12. Data Export and Deletion
         </h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           Before terminating your account, you should export any data you wish to retain. We provide data export functionality through your account settings.
         </p>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           <strong class="font-semibold">GDPR Right to Erasure:</strong>
           You may request deletion of your account and all associated data at any time. We will process deletion requests within 30 days, except for data we are legally required to retain.
         </p>
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
           13. Changes to Terms
         </h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           We may modify these Terms at any time. If we make material changes, we will notify you by:
         </p>
-        <ul class="list-disc pl-6 space-y-2 text-cool-steel-700 dark:text-cool-steel-300">
+        <ul class="list-disc pl-6 space-y-2 text-gray-700 dark:text-gray-300">
           <li>Email to your registered email address</li>
           <li>Notice on the Service homepage</li>
           <li>In-app notification</li>
         </ul>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           Your continued use of the Service after changes take effect constitutes acceptance of the modified Terms. If you do not agree to the changes, you must stop using the Service and terminate your account.
         </p>
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
           14. Dispute Resolution
         </h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           In the event of any dispute arising from these Terms or your use of the Service, you agree to first contact us to seek an informal resolution at <a
             href="mailto:hi@towerops.net"
-            class="text-cerulean-600 dark:text-cerulean-400 hover:underline font-medium"
+            class="text-blue-600 dark:text-blue-400 hover:underline font-medium"
           >
             hi@towerops.net
           </a>.
         </p>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           If we cannot resolve the dispute informally within 30 days, either party may pursue formal dispute resolution through binding arbitration or in the courts, subject to the governing law provisions below.
         </p>
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
           15. Governing Law and Jurisdiction
         </h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           These Terms are governed by and construed in accordance with the laws of the State of Texas, United States, without regard to its conflict of law provisions.
         </p>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           <strong class="font-semibold">For EU/EEA Users:</strong>
           Nothing in these Terms affects your statutory rights as a consumer under EU or local law. If you are located in the EU/EEA, you may also have the right to bring legal proceedings in the courts of your country of residence.
         </p>
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
           16. Severability
         </h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           If any provision of these Terms is found to be unenforceable or invalid, that provision shall be limited or eliminated to the minimum extent necessary so that these Terms shall otherwise remain in full force and effect.
         </p>
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
           17. Entire Agreement
         </h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <p class="text-gray-700 dark:text-gray-300">
           These Terms, together with our Privacy Policy, constitute the entire agreement between you and Towerops regarding the Service and supersede all prior agreements and understandings.
         </p>
       </section>
 
       <section class="space-y-4 mt-8">
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
-          Contact Information
-        </h2>
-        <p class="text-cool-steel-700 dark:text-cool-steel-300">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Contact Information</h2>
+        <p class="text-gray-700 dark:text-gray-300">
           If you have any questions about these Terms, please contact us:
         </p>
-        <ul class="list-none space-y-2 text-cool-steel-700 dark:text-cool-steel-300">
+        <ul class="list-none space-y-2 text-gray-700 dark:text-gray-300">
           <li>
             <strong class="font-semibold">Email:</strong>
             <a
               href="mailto:hi@towerops.net"
-              class="text-cerulean-600 dark:text-cerulean-400 hover:underline"
+              class="text-blue-600 dark:text-blue-400 hover:underline"
             >
               hi@towerops.net
             </a>
@@ -369,7 +367,7 @@
             <strong class="font-semibold">Support:</strong>
             <a
               href="mailto:hi@towerops.net"
-              class="text-cerulean-600 dark:text-cerulean-400 hover:underline"
+              class="text-blue-600 dark:text-blue-400 hover:underline"
             >
               hi@towerops.net
             </a>
@@ -378,7 +376,7 @@
             <strong class="font-semibold">Privacy Inquiries:</strong>
             <a
               href="mailto:hi@towerops.net"
-              class="text-cerulean-600 dark:text-cerulean-400 hover:underline"
+              class="text-blue-600 dark:text-blue-400 hover:underline"
             >
               hi@towerops.net
             </a>
@@ -387,7 +385,7 @@
       </section>
 
       <section class="space-y-4 mt-8">
-        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400 italic">
+        <p class="text-sm text-gray-600 dark:text-gray-400 italic">
           By using Towerops, you acknowledge that you have read, understood, and agree to be bound by these Terms of Service.
         </p>
       </section>
diff --git a/lib/towerops_web/controllers/user_registration_html/new.html.heex b/lib/towerops_web/controllers/user_registration_html/new.html.heex
index d82b237b..d3cada4f 100644
--- a/lib/towerops_web/controllers/user_registration_html/new.html.heex
+++ b/lib/towerops_web/controllers/user_registration_html/new.html.heex
@@ -1,21 +1,21 @@
 <Layouts.app flash={@flash} current_scope={@current_scope}>
   <div class="mx-auto max-w-4xl">
-    <div class="overflow-hidden rounded-2xl bg-white shadow-xl dark:bg-cool-steel-900 lg:grid lg:grid-cols-5">
+    <div class="overflow-hidden rounded-2xl bg-white shadow-xl dark:bg-gray-900 lg:grid lg:grid-cols-5">
       <!-- Left: Brand panel -->
-      <div class="hidden lg:col-span-2 lg:flex lg:flex-col lg:justify-between bg-gradient-to-br from-cerulean-600 via-cerulean-700 to-cerulean-800 p-8 text-white">
+      <div class="hidden lg:col-span-2 lg:flex lg:flex-col lg:justify-between bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-800 p-8 text-white">
         <div>
           <div class="flex items-center gap-2">
             <.icon name="hero-signal" class="size-8" />
             <span class="text-xl font-bold">TowerOps</span>
           </div>
-          <p class="mt-6 text-lg font-medium leading-relaxed text-cerulean-100">
+          <p class="mt-6 text-lg font-medium leading-relaxed text-blue-100">
             {t("Start monitoring your network in minutes.")}
           </p>
         </div>
         <div class="mt-auto space-y-4">
           <div class="rounded-lg bg-white/10 p-4 backdrop-blur-sm">
             <p class="text-sm font-semibold text-white">{t("Free tier includes:")}</p>
-            <ul class="mt-2 space-y-1.5 text-sm text-cerulean-100">
+            <ul class="mt-2 space-y-1.5 text-sm text-blue-100">
               <li class="flex items-center gap-2">
                 <.icon name="hero-check" class="size-4 text-green-300" />
                 {t("Monitor up to 10 devices")}
@@ -41,23 +41,23 @@
       <div class="col-span-3 px-6 py-10 sm:px-12">
         <!-- Mobile brand mark -->
         <div class="mb-6 flex items-center justify-center gap-2 lg:hidden">
-          <.icon name="hero-signal" class="size-7 text-cerulean-600 dark:text-cerulean-400" />
-          <span class="text-lg font-bold text-cool-steel-900 dark:text-white">TowerOps</span>
+          <.icon name="hero-signal" class="size-7 text-blue-600 dark:text-blue-400" />
+          <span class="text-lg font-bold text-gray-900 dark:text-white">TowerOps</span>
         </div>
 
         <div class="text-center lg:text-left">
-          <h1 class="text-2xl font-bold text-cool-steel-900 dark:text-white">
+          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
             <%= if @invitation do %>
               {t_auth("Join %{organization}", organization: @invitation.organization.name)}
             <% else %>
               {t_auth("Create your account")}
             <% end %>
           </h1>
-          <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+          <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
             {t_auth("Already registered?")}
             <.link
               navigate={~p"/users/log-in"}
-              class="font-semibold text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+              class="font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
             >
               {t_auth("Log in")}
             </.link>
@@ -75,8 +75,8 @@
         <% end %>
 
         <%= if @invitation do %>
-          <div class="mt-5 rounded-lg bg-cerulean-50 dark:bg-cerulean-900/20 p-4 border border-cerulean-200 dark:border-cerulean-800">
-            <p class="text-sm text-cerulean-900 dark:text-cerulean-100">
+          <div class="mt-5 rounded-lg bg-blue-50 dark:bg-blue-900/20 p-4 border border-blue-200 dark:border-blue-800">
+            <p class="text-sm text-blue-900 dark:text-blue-100">
               {t_auth("You've been invited to join %{organization} as a %{role}.",
                 organization: @invitation.organization.name,
                 role: @invitation.role
@@ -110,27 +110,27 @@
             <div class="mb-4 -mt-2">
               <div class="flex gap-1">
                 <div
-                  class="h-1 flex-1 rounded-full bg-cool-steel-200 dark:bg-cool-steel-700 password-strength-bar"
+                  class="h-1 flex-1 rounded-full bg-gray-200 dark:bg-gray-700 password-strength-bar"
                   data-index="1"
                 >
                 </div>
                 <div
-                  class="h-1 flex-1 rounded-full bg-cool-steel-200 dark:bg-cool-steel-700 password-strength-bar"
+                  class="h-1 flex-1 rounded-full bg-gray-200 dark:bg-gray-700 password-strength-bar"
                   data-index="2"
                 >
                 </div>
                 <div
-                  class="h-1 flex-1 rounded-full bg-cool-steel-200 dark:bg-cool-steel-700 password-strength-bar"
+                  class="h-1 flex-1 rounded-full bg-gray-200 dark:bg-gray-700 password-strength-bar"
                   data-index="3"
                 >
                 </div>
                 <div
-                  class="h-1 flex-1 rounded-full bg-cool-steel-200 dark:bg-cool-steel-700 password-strength-bar"
+                  class="h-1 flex-1 rounded-full bg-gray-200 dark:bg-gray-700 password-strength-bar"
                   data-index="4"
                 >
                 </div>
               </div>
-              <p class="mt-1 text-xs text-cool-steel-500 dark:text-cool-steel-500">
+              <p class="mt-1 text-xs text-gray-500 dark:text-gray-500">
                 {t_auth("Use 12+ characters for a strong password")}
               </p>
             </div>
@@ -154,21 +154,18 @@
                     name="user[privacy_policy_consent]"
                     type="checkbox"
                     required
-                    class="h-4 w-4 rounded border-cool-steel-300 text-cerulean-600 focus:ring-cerulean-500 dark:border-cool-steel-600 dark:bg-cool-steel-800 dark:checked:bg-cerulean-500 dark:checked:border-cerulean-500"
+                    class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:checked:bg-blue-500 dark:checked:border-blue-500"
                   />
                 </div>
                 <div class="ml-3 text-sm">
-                  <label
-                    for="privacy_policy_consent"
-                    class="text-cool-steel-700 dark:text-cool-steel-300"
-                  >
+                  <label for="privacy_policy_consent" class="text-gray-700 dark:text-gray-300">
                     {t_auth("I agree to the %{link}",
                       link:
                         raw(
-                          ~s(<a href="/privacy" target="_blank" class="font-medium text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400 dark:hover:text-cerulean-300">#{t_auth("Privacy Policy")}</a>)
+                          ~s(<a href="/privacy" target="_blank" class="font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">#{t_auth("Privacy Policy")}</a>)
                         )
                     )}
-                    <span class="text-sweet-salmon-600 dark:text-sweet-salmon-400">*</span>
+                    <span class="text-red-600 dark:text-red-400">*</span>
                   </label>
                 </div>
               </div>
@@ -180,21 +177,18 @@
                     name="user[terms_of_service_consent]"
                     type="checkbox"
                     required
-                    class="h-4 w-4 rounded border-cool-steel-300 text-cerulean-600 focus:ring-cerulean-500 dark:border-cool-steel-600 dark:bg-cool-steel-800 dark:checked:bg-cerulean-500 dark:checked:border-cerulean-500"
+                    class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:checked:bg-blue-500 dark:checked:border-blue-500"
                   />
                 </div>
                 <div class="ml-3 text-sm">
-                  <label
-                    for="terms_of_service_consent"
-                    class="text-cool-steel-700 dark:text-cool-steel-300"
-                  >
+                  <label for="terms_of_service_consent" class="text-gray-700 dark:text-gray-300">
                     {t_auth("I agree to the %{link}",
                       link:
                         raw(
-                          ~s(<a href="/terms" target="_blank" class="font-medium text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400 dark:hover:text-cerulean-300">#{t_auth("Terms of Service")}</a>)
+                          ~s(<a href="/terms" target="_blank" class="font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">#{t_auth("Terms of Service")}</a>)
                         )
                     )}
-                    <span class="text-sweet-salmon-600 dark:text-sweet-salmon-400">*</span>
+                    <span class="text-red-600 dark:text-red-400">*</span>
                   </label>
                 </div>
               </div>
diff --git a/lib/towerops_web/controllers/user_reset_password_html/new.html.heex b/lib/towerops_web/controllers/user_reset_password_html/new.html.heex
index d14d4404..a7a10cb8 100644
--- a/lib/towerops_web/controllers/user_reset_password_html/new.html.heex
+++ b/lib/towerops_web/controllers/user_reset_password_html/new.html.heex
@@ -29,7 +29,7 @@
       <div class="mt-6 text-center">
         <.link
           navigate={~p"/users/log-in"}
-          class="text-sm font-semibold text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+          class="text-sm font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
         >
           {t_auth("Back to log in")}
         </.link>
diff --git a/lib/towerops_web/controllers/user_session_html/confirm.html.heex b/lib/towerops_web/controllers/user_session_html/confirm.html.heex
index d3922035..523480b9 100644
--- a/lib/towerops_web/controllers/user_session_html/confirm.html.heex
+++ b/lib/towerops_web/controllers/user_session_html/confirm.html.heex
@@ -62,7 +62,7 @@
 
     <p
       :if={!@user.confirmed_at}
-      class="mt-6 rounded-lg border border-cerulean-200 bg-cerulean-50 p-4 text-sm text-cerulean-700 dark:border-cerulean-800 dark:bg-cerulean-950 dark:text-cerulean-200"
+      class="mt-6 rounded-lg border border-blue-200 bg-blue-50 p-4 text-sm text-blue-700 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-200"
     >
       {t_auth("Tip: If you prefer passwords, you can enable them in the user settings.")}
     </p>
diff --git a/lib/towerops_web/controllers/user_session_html/new.html.heex b/lib/towerops_web/controllers/user_session_html/new.html.heex
index 90debd90..2340cc30 100644
--- a/lib/towerops_web/controllers/user_session_html/new.html.heex
+++ b/lib/towerops_web/controllers/user_session_html/new.html.heex
@@ -1,27 +1,25 @@
 <Layouts.app flash={@flash} current_scope={@current_scope}>
   <div class="mx-auto max-w-4xl">
-    <div class="overflow-hidden rounded-2xl bg-white shadow-xl dark:bg-cool-steel-900 lg:grid lg:grid-cols-5">
+    <div class="overflow-hidden rounded-2xl bg-white shadow-xl dark:bg-gray-900 lg:grid lg:grid-cols-5">
       <!-- Left: Brand panel -->
-      <div class="hidden lg:col-span-2 lg:flex lg:flex-col lg:justify-between bg-gradient-to-br from-cerulean-600 via-cerulean-700 to-cerulean-800 p-8 text-white">
+      <div class="hidden lg:col-span-2 lg:flex lg:flex-col lg:justify-between bg-gradient-to-br from-blue-600 via-blue-700 to-indigo-800 p-8 text-white">
         <div>
           <div class="flex items-center gap-2">
             <.icon name="hero-signal" class="size-8" />
             <span class="text-xl font-bold">TowerOps</span>
           </div>
-          <p class="mt-6 text-lg font-medium leading-relaxed text-cerulean-100">
+          <p class="mt-6 text-lg font-medium leading-relaxed text-blue-100">
             {t("Monitor your entire network from a single dashboard.")}
           </p>
         </div>
         <div class="mt-auto">
           <div class="rounded-lg bg-white/10 p-4 backdrop-blur-sm">
-            <p class="text-sm italic text-cerulean-100">
+            <p class="text-sm italic text-blue-100">
               {t(
                 "\"TowerOps cut our response time to network issues by 80%. We can see problems before customers even notice.\""
               )}
             </p>
-            <p class="mt-3 text-xs font-semibold text-cerulean-200">
-              {t("— WISP Network Operator")}
-            </p>
+            <p class="mt-3 text-xs font-semibold text-blue-200">{t("— WISP Network Operator")}</p>
           </div>
         </div>
       </div>
@@ -30,16 +28,16 @@
       <div class="col-span-3 px-6 py-10 sm:px-12">
         <!-- Mobile brand mark -->
         <div class="mb-6 flex items-center justify-center gap-2 lg:hidden">
-          <.icon name="hero-signal" class="size-7 text-cerulean-600 dark:text-cerulean-400" />
-          <span class="text-lg font-bold text-cool-steel-900 dark:text-white">TowerOps</span>
+          <.icon name="hero-signal" class="size-7 text-blue-600 dark:text-blue-400" />
+          <span class="text-lg font-bold text-gray-900 dark:text-white">TowerOps</span>
         </div>
 
         <div class="text-center lg:text-left">
-          <h1 class="text-2xl font-bold text-cool-steel-900 dark:text-white">
+          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
             {t_auth("Log in")}
           </h1>
           <%= if @current_scope do %>
-            <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
               {t_auth("You need to reauthenticate to perform sensitive actions on your account.")}
             </p>
           <% else %>
@@ -55,18 +53,18 @@
 
         <div
           :if={local_mail_adapter?()}
-          class="mt-5 rounded-lg bg-cerulean-50 p-4 dark:bg-cerulean-950"
+          class="mt-5 rounded-lg bg-blue-50 p-4 dark:bg-blue-950"
         >
           <div class="flex">
             <.icon
               name="hero-information-circle"
-              class="h-6 w-6 flex-shrink-0 text-cerulean-600 dark:text-cerulean-400"
+              class="h-6 w-6 flex-shrink-0 text-blue-600 dark:text-blue-400"
             />
             <div class="ml-3">
-              <p class="text-sm text-cerulean-700 dark:text-cerulean-200">
+              <p class="text-sm text-blue-700 dark:text-blue-200">
                 {t_auth("You are running the local mail adapter.")}
               </p>
-              <p class="mt-1 text-sm text-cerulean-700 dark:text-cerulean-200">
+              <p class="mt-1 text-sm text-blue-700 dark:text-blue-200">
                 {t_auth("To see sent emails, visit")}
                 <a href="/dev/mailbox" class="font-medium underline">{t_auth("the mailbox page")}</a>.
               </p>
@@ -102,18 +100,18 @@
               required
             />
             <div class="flex items-center justify-between">
-              <label class="flex items-center gap-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <label class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
                 <input
                   type="checkbox"
                   name={@form[:remember_me].name}
                   value="true"
-                  class="h-4 w-4 rounded border-cool-steel-300 text-cerulean-600 focus:ring-cerulean-500 dark:border-cool-steel-600 dark:bg-cool-steel-800"
+                  class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800"
                 />
                 {t_auth("Remember me")}
               </label>
               <.link
                 navigate={~p"/users/reset-password"}
-                class="text-sm font-semibold text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                class="text-sm font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
               >
                 {t_auth("Forgot password?")}
               </.link>
@@ -127,10 +125,10 @@
 
           <div class="relative">
             <div class="absolute inset-0 flex items-center">
-              <div class="w-full border-t border-cool-steel-200 dark:border-white/10"></div>
+              <div class="w-full border-t border-gray-200 dark:border-white/10"></div>
             </div>
             <div class="relative flex justify-center text-sm">
-              <span class="bg-white px-3 text-cool-steel-500 dark:bg-cool-steel-900 dark:text-cool-steel-500">
+              <span class="bg-white px-3 text-gray-500 dark:bg-gray-900 dark:text-gray-500">
                 {t("or")}
               </span>
             </div>
@@ -153,10 +151,10 @@
             </.button>
           </.form>
 
-          <p class="text-center text-sm text-cool-steel-500 dark:text-cool-steel-500">
+          <p class="text-center text-sm text-gray-500 dark:text-gray-500">
             <.link
               href={~p"/users/confirm"}
-              class="text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400 hover:underline"
+              class="text-blue-600 hover:text-blue-700 dark:text-blue-400 hover:underline"
             >
               {t_auth("Didn't receive confirmation instructions?")}
             </.link>
diff --git a/lib/towerops_web/controllers/user_session_html/totp.html.heex b/lib/towerops_web/controllers/user_session_html/totp.html.heex
index 3a0de3ef..36f9301d 100644
--- a/lib/towerops_web/controllers/user_session_html/totp.html.heex
+++ b/lib/towerops_web/controllers/user_session_html/totp.html.heex
@@ -22,7 +22,7 @@
           phx-mounted={JS.focus()}
         />
         <div class="mt-2">
-          <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="text-sm text-gray-500 dark:text-gray-400">
             {t_auth(
               "Enter the 6-digit code from your authenticator app, or use a recovery code (XXXX-XXXX format)."
             )}
@@ -38,7 +38,7 @@
       <div class="mt-6 text-center">
         <.link
           href={~p"/users/log-in"}
-          class="text-sm font-semibold text-cool-steel-600 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:text-cool-steel-300"
+          class="text-sm font-semibold text-gray-600 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
         >
           {t_auth("← Back to login")}
         </.link>
diff --git a/lib/towerops_web/controllers/user_settings_html/edit.html.heex b/lib/towerops_web/controllers/user_settings_html/edit.html.heex
index a2d7cab0..fdb478f3 100644
--- a/lib/towerops_web/controllers/user_settings_html/edit.html.heex
+++ b/lib/towerops_web/controllers/user_settings_html/edit.html.heex
@@ -47,38 +47,38 @@
   <div class="my-4 border-t border-cool-steel-200 dark:border-cool-steel-700" />
 
   <div>
-    <h3 class="text-lg font-semibold leading-6 text-cool-steel-900 dark:text-white">
+    <h3 class="text-lg font-semibold leading-6 text-gray-900 dark:text-white">
       {t_auth("Alert Notification Devices")}
     </h3>
-    <p class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+    <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
       {t_auth("Manage mobile devices that receive push notifications for alerts")}
     </p>
 
     <div class="mt-6 space-y-4">
       <%= if Enum.empty?(@mobile_sessions) do %>
-        <div class="rounded-lg border border-dashed border-cool-steel-300 p-8 text-center dark:border-white/10">
-          <.icon name="hero-device-phone-mobile" class="mx-auto h-12 w-12 text-cool-steel-400" />
-          <h3 class="mt-2 text-sm font-semibold text-cool-steel-900 dark:text-white">
+        <div class="rounded-lg border border-dashed border-gray-300 p-8 text-center dark:border-white/10">
+          <.icon name="hero-device-phone-mobile" class="mx-auto h-12 w-12 text-gray-400" />
+          <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
             {t_auth("No mobile devices registered")}
           </h3>
-          <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
             {t_auth("Add a mobile device to receive push notifications for alerts")}
           </p>
         </div>
       <% else %>
         <div class="space-y-3">
           <%= for session <- @mobile_sessions do %>
-            <div class="flex items-center justify-between rounded-lg border border-cool-steel-200 p-4 dark:border-white/10">
+            <div class="flex items-center justify-between rounded-lg border border-gray-200 p-4 dark:border-white/10">
               <div class="flex items-center gap-3">
-                <.icon name="hero-device-phone-mobile" class="h-5 w-5 text-cool-steel-400" />
+                <.icon name="hero-device-phone-mobile" class="h-5 w-5 text-gray-400" />
                 <div>
-                  <p class="font-medium text-cool-steel-900 dark:text-white">
+                  <p class="font-medium text-gray-900 dark:text-white">
                     {session.device_name || t_auth("Unknown Device")}
                   </p>
-                  <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                  <p class="text-sm text-gray-500 dark:text-gray-400">
                     {session.device_os} • {session.app_version}
                   </p>
-                  <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                  <p class="text-sm text-gray-500 dark:text-gray-400">
                     {t_auth("Last used %{date}",
                       date: ToweropsWeb.TimeHelpers.format_date(session.last_used_at, "UTC")
                     )}
@@ -108,7 +108,7 @@
                         do:
                           "bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/20 dark:text-green-400 dark:hover:bg-green-900/30",
                         else:
-                          "bg-cool-steel-100 text-cool-steel-700 hover:bg-cool-steel-200 dark:bg-cool-steel-800/50 dark:text-cool-steel-400 dark:hover:bg-cool-steel-800"
+                          "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800/50 dark:text-gray-400 dark:hover:bg-gray-800"
                       )
                     ]}
                   >
@@ -131,7 +131,7 @@
                   <button
                     type="submit"
                     data-confirm={t_auth("Are you sure you want to remove this device?")}
-                    class="text-sm font-semibold text-sweet-salmon-600 hover:text-sweet-salmon-500 dark:text-sweet-salmon-400 dark:hover:text-sweet-salmon-300"
+                    class="text-sm font-semibold text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300"
                   >
                     {t_auth("Remove")}
                   </button>
@@ -144,7 +144,7 @@
 
       <.link
         navigate={~p"/mobile/qr-login"}
-        class="inline-flex items-center gap-2 rounded-lg bg-cool-steel-900 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-cool-steel-700 dark:bg-cool-steel-50 dark:text-cool-steel-900 dark:hover:bg-cool-steel-300"
+        class="inline-flex items-center gap-2 rounded-lg bg-gray-900 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-300"
       >
         <.icon name="hero-qr-code" class="h-4 w-4" /> {t_auth("Add Mobile Device")}
       </.link>
diff --git a/lib/towerops_web/controllers/user_sudo_html/verify.html.heex b/lib/towerops_web/controllers/user_sudo_html/verify.html.heex
index b6be2f41..13dee43b 100644
--- a/lib/towerops_web/controllers/user_sudo_html/verify.html.heex
+++ b/lib/towerops_web/controllers/user_sudo_html/verify.html.heex
@@ -22,7 +22,7 @@
           phx-mounted={JS.focus()}
         />
         <div class="mt-2">
-          <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="text-sm text-gray-500 dark:text-gray-400">
             {t_auth(
               "Enter the 6-digit code from your authenticator app. Recovery codes are not allowed for sensitive operations."
             )}
@@ -39,7 +39,7 @@
         <.link
           href={~p"/users/log-out"}
           method="delete"
-          class="text-sm font-semibold text-cool-steel-600 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:text-cool-steel-300"
+          class="text-sm font-semibold text-gray-600 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
         >
           {t_auth("← Log out instead")}
         </.link>
diff --git a/lib/towerops_web/live/account_live/activity.ex b/lib/towerops_web/live/account_live/activity.ex
index b92251e7..cc042cb5 100644
--- a/lib/towerops_web/live/account_live/activity.ex
+++ b/lib/towerops_web/live/account_live/activity.ex
@@ -29,31 +29,31 @@ defmodule ToweropsWeb.AccountLive.Activity do
       active_page="settings"
       unresolved_alert_count={assigns[:unresolved_alert_count] || 0}
     >
-      <div class="border-b border-cool-steel-200 pb-5 dark:border-white/5">
-        <h1 class="text-3xl font-semibold tracking-tight text-cool-steel-900 dark:text-white">
+      <div class="border-b border-gray-200 pb-5 dark:border-white/5">
+        <h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
           Activity Log
         </h1>
-        <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
           View all actions performed by you and on your account data for transparency and security.
         </p>
       </div>
 
       <div class="mt-8 space-y-4">
         <%= if Enum.empty?(@audit_logs) do %>
-          <div class="text-center py-12 bg-white dark:bg-cool-steel-900 rounded-lg shadow">
-            <.icon name="hero-document-text" class="mx-auto h-12 w-12 text-cool-steel-400" />
-            <h3 class="mt-2 text-sm font-medium text-cool-steel-900 dark:text-white">
+          <div class="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow">
+            <.icon name="hero-document-text" class="mx-auto h-12 w-12 text-gray-400" />
+            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">
               No activity logs
             </h3>
-            <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
               Your activity will appear here as you use the platform.
             </p>
           </div>
         <% else %>
-          <div class="bg-white dark:bg-cool-steel-900 shadow rounded-lg overflow-hidden">
-            <ul role="list" class="divide-y divide-cool-steel-200 dark:divide-cool-steel-700">
+          <div class="bg-white dark:bg-gray-900 shadow rounded-lg overflow-hidden">
+            <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700">
               <%= for log <- @audit_logs do %>
-                <li class="px-6 py-4 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800">
+                <li class="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800">
                   <div class="flex items-start justify-between">
                     <div class="flex-1 min-w-0">
                       <div class="flex items-center gap-3">
@@ -63,12 +63,12 @@ defmodule ToweropsWeb.AccountLive.Activity do
                         ]}>
                           {format_action(log.action)}
                         </span>
-                        <p class="text-sm font-medium text-cool-steel-900 dark:text-white">
+                        <p class="text-sm font-medium text-gray-900 dark:text-white">
                           {action_description(log)}
                         </p>
                       </div>
 
-                      <div class="mt-2 flex flex-col gap-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                      <div class="mt-2 flex flex-col gap-1 text-sm text-gray-500 dark:text-gray-400">
                         <%= if log.superuser do %>
                           <div class="flex items-center gap-1">
                             <.icon name="hero-user" class="h-4 w-4" />
@@ -81,7 +81,7 @@ defmodule ToweropsWeb.AccountLive.Activity do
                         <%= if log.request_path do %>
                           <div class="flex items-center gap-1">
                             <.icon name="hero-link" class="h-4 w-4" />
-                            <code class="text-xs bg-cool-steel-100 dark:bg-cool-steel-800 px-1 rounded">
+                            <code class="text-xs bg-gray-100 dark:bg-gray-800 px-1 rounded">
                               {log.request_path}
                             </code>
                           </div>
@@ -99,7 +99,7 @@ defmodule ToweropsWeb.AccountLive.Activity do
                             <.icon name="hero-eye" class="h-4 w-4 mt-0.5" />
                             <div>
                               <span class="font-medium">Data accessed:</span>
-                              <code class="text-xs bg-cool-steel-100 dark:bg-cool-steel-800 px-1 rounded ml-1">
+                              <code class="text-xs bg-gray-100 dark:bg-gray-800 px-1 rounded ml-1">
                                 {inspect(log.data_accessed, pretty: true, limit: 3)}
                               </code>
                             </div>
@@ -108,10 +108,10 @@ defmodule ToweropsWeb.AccountLive.Activity do
 
                         <%= if log.metadata && map_size(log.metadata) > 0 do %>
                           <details class="mt-1">
-                            <summary class="cursor-pointer text-xs text-cerulean-600 dark:text-cerulean-400 hover:underline">
+                            <summary class="cursor-pointer text-xs text-blue-600 dark:text-blue-400 hover:underline">
                               View metadata
                             </summary>
-                            <pre class="mt-1 text-xs bg-cool-steel-100 dark:bg-cool-steel-800 p-2 rounded overflow-x-auto">
+                            <pre class="mt-1 text-xs bg-gray-100 dark:bg-gray-800 p-2 rounded overflow-x-auto">
                               {Jason.encode!(log.metadata, pretty: true)}
                             </pre>
                           </details>
@@ -120,7 +120,7 @@ defmodule ToweropsWeb.AccountLive.Activity do
                     </div>
 
                     <div class="ml-4 flex-shrink-0 text-right">
-                      <p class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                      <p class="text-xs text-gray-500 dark:text-gray-400">
                         {format_timestamp(log.inserted_at, @current_scope)}
                       </p>
                     </div>
@@ -130,13 +130,13 @@ defmodule ToweropsWeb.AccountLive.Activity do
             </ul>
           </div>
 
-          <div class="bg-cerulean-50 dark:bg-cerulean-900/20 border border-cerulean-200 dark:border-cerulean-800 rounded-lg p-4">
+          <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
             <div class="flex gap-3">
               <.icon
                 name="hero-information-circle"
-                class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0"
+                class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0"
               />
-              <div class="text-sm text-cerulean-800 dark:text-cerulean-300">
+              <div class="text-sm text-blue-800 dark:text-blue-300">
                 <p class="font-medium">GDPR Transparency</p>
                 <p class="mt-1">
                   This activity log shows actions performed by you and on your account data.
@@ -177,10 +177,10 @@ defmodule ToweropsWeb.AccountLive.Activity do
         "bg-green-50 text-green-700 ring-green-600/20 dark:bg-green-500/10 dark:text-green-400 dark:ring-green-500/20"
 
       :warning ->
-        "bg-wheat-50 text-wheat-700 ring-wheat-600/20 dark:bg-wheat-500/10 dark:text-wheat-400 dark:ring-wheat-500/20"
+        "bg-yellow-50 text-yellow-700 ring-yellow-600/20 dark:bg-yellow-500/10 dark:text-yellow-400 dark:ring-yellow-500/20"
 
       :danger ->
-        "bg-sweet-salmon-50 text-sweet-salmon-700 ring-sweet-salmon-600/20 dark:bg-sweet-salmon-500/10 dark:text-sweet-salmon-400 dark:ring-sweet-salmon-500/20"
+        "bg-red-50 text-red-700 ring-red-600/20 dark:bg-red-500/10 dark:text-red-400 dark:ring-red-500/20"
 
       :impersonation ->
         "bg-orange-50 text-orange-700 ring-orange-600/20 dark:bg-orange-500/10 dark:text-orange-400 dark:ring-orange-500/20"
@@ -189,10 +189,10 @@ defmodule ToweropsWeb.AccountLive.Activity do
         "bg-purple-50 text-purple-700 ring-purple-600/20 dark:bg-purple-500/10 dark:text-purple-400 dark:ring-purple-500/20"
 
       :info ->
-        "bg-cerulean-50 text-cerulean-700 ring-cerulean-600/20 dark:bg-cerulean-500/10 dark:text-cerulean-400 dark:ring-cerulean-500/20"
+        "bg-blue-50 text-blue-700 ring-blue-600/20 dark:bg-blue-500/10 dark:text-blue-400 dark:ring-blue-500/20"
 
       :default ->
-        "bg-cool-steel-50 text-cool-steel-700 ring-cool-steel-600/20 dark:bg-cool-steel-500/10 dark:text-cool-steel-400 dark:ring-cool-steel-500/20"
+        "bg-gray-50 text-gray-700 ring-gray-600/20 dark:bg-gray-500/10 dark:text-gray-400 dark:ring-gray-500/20"
     end
   end
 
diff --git a/lib/towerops_web/live/account_live/my_data.ex b/lib/towerops_web/live/account_live/my_data.ex
index 90632f67..95a31cea 100644
--- a/lib/towerops_web/live/account_live/my_data.ex
+++ b/lib/towerops_web/live/account_live/my_data.ex
@@ -68,25 +68,25 @@ defmodule ToweropsWeb.AccountLive.MyData do
       active_page="settings"
       unresolved_alert_count={assigns[:unresolved_alert_count] || 0}
     >
-      <div class="border-b border-cool-steel-200 pb-5 dark:border-white/5">
-        <h1 class="text-3xl font-semibold tracking-tight text-cool-steel-900 dark:text-white">
+      <div class="border-b border-gray-200 pb-5 dark:border-white/5">
+        <h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
           Account Settings
         </h1>
-        <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
           Manage your account email address, password, and security settings
         </p>
       </div>
 
-      <header class="border-b border-cool-steel-200 dark:border-white/5">
+      <header class="border-b border-gray-200 dark:border-white/5">
         <nav class="flex overflow-x-auto py-4">
           <ul
             role="list"
-            class="flex min-w-full flex-none gap-x-6 px-4 text-sm/6 font-semibold text-cool-steel-500 sm:px-6 lg:px-8 dark:text-cool-steel-400"
+            class="flex min-w-full flex-none gap-x-6 px-4 text-sm/6 font-semibold text-gray-500 sm:px-6 lg:px-8 dark:text-gray-400"
           >
             <li>
               <.link
                 navigate={~p"/users/settings?tab=personal"}
-                class="text-cool-steel-500 hover:text-cerulean-600 dark:text-cool-steel-400 dark:hover:text-cerulean-400"
+                class="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
               >
                 Personal
               </.link>
@@ -94,7 +94,7 @@ defmodule ToweropsWeb.AccountLive.MyData do
             <li>
               <.link
                 navigate={~p"/users/settings?tab=account"}
-                class="text-cool-steel-500 hover:text-cerulean-600 dark:text-cool-steel-400 dark:hover:text-cerulean-400"
+                class="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
               >
                 Account
               </.link>
@@ -102,7 +102,7 @@ defmodule ToweropsWeb.AccountLive.MyData do
             <li>
               <.link
                 navigate={~p"/users/settings?tab=sessions"}
-                class="text-cool-steel-500 hover:text-cerulean-600 dark:text-cool-steel-400 dark:hover:text-cerulean-400"
+                class="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
               >
                 Sessions
               </.link>
@@ -110,7 +110,7 @@ defmodule ToweropsWeb.AccountLive.MyData do
             <li>
               <.link
                 navigate={~p"/users/settings?tab=api"}
-                class="text-cool-steel-500 hover:text-cerulean-600 dark:text-cool-steel-400 dark:hover:text-cerulean-400"
+                class="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
               >
                 API
               </.link>
@@ -118,7 +118,7 @@ defmodule ToweropsWeb.AccountLive.MyData do
             <li>
               <.link
                 navigate={~p"/users/settings?tab=notifications"}
-                class="text-cool-steel-500 hover:text-cerulean-600 dark:text-cool-steel-400 dark:hover:text-cerulean-400"
+                class="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
               >
                 Notifications
               </.link>
@@ -126,7 +126,7 @@ defmodule ToweropsWeb.AccountLive.MyData do
             <li>
               <.link
                 navigate={~p"/users/settings?tab=security"}
-                class="text-cool-steel-500 hover:text-cerulean-600 dark:text-cool-steel-400 dark:hover:text-cerulean-400"
+                class="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
               >
                 Security
               </.link>
@@ -134,7 +134,7 @@ defmodule ToweropsWeb.AccountLive.MyData do
             <li>
               <.link
                 navigate={~p"/users/my-data"}
-                class="text-cerulean-600 dark:text-cerulean-400"
+                class="text-indigo-600 dark:text-indigo-400"
               >
                 My Data
               </.link>
@@ -145,57 +145,43 @@ defmodule ToweropsWeb.AccountLive.MyData do
 
       <div class="space-y-8 py-8">
         <div>
-          <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+          <p class="text-sm text-gray-600 dark:text-gray-400">
             This page shows all personal data we have stored about you in compliance with GDPR Article 15 (Right to Access).
           </p>
         </div>
         
     <!-- Profile Information -->
-        <section class="bg-white dark:bg-cool-steel-900 shadow rounded-lg overflow-hidden">
-          <div class="px-4 py-5 sm:px-6 border-b border-cool-steel-200 dark:border-cool-steel-700">
-            <h2 class="text-lg font-medium text-cool-steel-900 dark:text-white">
-              Profile Information
-            </h2>
+        <section class="bg-white dark:bg-gray-900 shadow rounded-lg overflow-hidden">
+          <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
+            <h2 class="text-lg font-medium text-gray-900 dark:text-white">Profile Information</h2>
           </div>
           <div class="px-4 py-5 sm:p-6">
             <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
               <div>
-                <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                  Email Address
-                </dt>
-                <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
-                  {@user_data.profile.email}
-                </dd>
+                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Email Address</dt>
+                <dd class="mt-1 text-sm text-gray-900 dark:text-white">{@user_data.profile.email}</dd>
               </div>
               <div>
-                <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                  First Name
-                </dt>
-                <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
+                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">First Name</dt>
+                <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                   {@user_data.profile.first_name || "Not set"}
                 </dd>
               </div>
               <div>
-                <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                  Last Name
-                </dt>
-                <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
+                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Last Name</dt>
+                <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                   {@user_data.profile.last_name || "Not set"}
                 </dd>
               </div>
               <div>
-                <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                  Timezone
-                </dt>
-                <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
+                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Timezone</dt>
+                <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                   {@user_data.profile.timezone}
                 </dd>
               </div>
               <div>
-                <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                  Account Created
-                </dt>
-                <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
+                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Account Created</dt>
+                <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                   {ToweropsWeb.TimeHelpers.format_datetime(
                     @user_data.profile.inserted_at,
                     @current_scope.timezone,
@@ -204,13 +190,11 @@ defmodule ToweropsWeb.AccountLive.MyData do
                 </dd>
               </div>
               <div>
-                <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                  Email Confirmed
-                </dt>
-                <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
+                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Email Confirmed</dt>
+                <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                   {if @user_data.profile.confirmed_at, do: "Yes", else: "No"}
                   <%= if @user_data.profile.confirmed_at do %>
-                    <span class="text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="text-gray-500 dark:text-gray-400">
                       ({ToweropsWeb.TimeHelpers.format_date(
                         @user_data.profile.confirmed_at,
                         @current_scope.timezone
@@ -224,46 +208,40 @@ defmodule ToweropsWeb.AccountLive.MyData do
         </section>
         
     <!-- Consent Records -->
-        <section class="bg-white dark:bg-cool-steel-900 shadow rounded-lg overflow-hidden">
-          <div class="px-4 py-5 sm:px-6 border-b border-cool-steel-200 dark:border-cool-steel-700">
-            <h2 class="text-lg font-medium text-cool-steel-900 dark:text-white">
+        <section class="bg-white dark:bg-gray-900 shadow rounded-lg overflow-hidden">
+          <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
+            <h2 class="text-lg font-medium text-gray-900 dark:text-white">
               Consent Records
             </h2>
-            <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
               Your consent to our Privacy Policy and Terms of Service
             </p>
           </div>
           <div class="px-4 py-5 sm:p-6">
             <%= if Enum.empty?(@user_data.consents) do %>
-              <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-500 dark:text-gray-400">
                 No consent records found.
               </p>
             <% else %>
               <div class="space-y-4">
                 <%= for consent <- @user_data.consents do %>
-                  <div class="border border-cool-steel-200 dark:border-cool-steel-700 rounded-lg p-4">
+                  <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                     <dl class="grid grid-cols-1 gap-x-4 gap-y-3 sm:grid-cols-2">
                       <div>
-                        <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                          Type
-                        </dt>
-                        <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
+                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Type</dt>
+                        <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                           {String.replace(consent.consent_type, "_", " ") |> String.capitalize()}
                         </dd>
                       </div>
                       <div>
-                        <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                          Version
-                        </dt>
-                        <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
-                          {consent.version}
-                        </dd>
+                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Version</dt>
+                        <dd class="mt-1 text-sm text-gray-900 dark:text-white">{consent.version}</dd>
                       </div>
                       <div>
-                        <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
+                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                           Granted
                         </dt>
-                        <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
+                        <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                           {ToweropsWeb.TimeHelpers.format_datetime(
                             consent.granted_at,
                             @current_scope.timezone,
@@ -272,12 +250,12 @@ defmodule ToweropsWeb.AccountLive.MyData do
                         </dd>
                       </div>
                       <div>
-                        <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
+                        <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                           Status
                         </dt>
                         <dd class="mt-1 text-sm">
                           <%= if consent.revoked_at do %>
-                            <span class="inline-flex items-center rounded-md bg-sweet-salmon-50 px-2 py-1 text-xs font-medium text-sweet-salmon-700 inset-ring-1 inset-ring-sweet-salmon-600/20 dark:bg-sweet-salmon-500/10 dark:text-sweet-salmon-400 dark:inset-ring-sweet-salmon-500/20">
+                            <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 inset-ring-1 inset-ring-red-600/20 dark:bg-red-500/10 dark:text-red-400 dark:inset-ring-red-500/20">
                               Revoked {ToweropsWeb.TimeHelpers.format_date(
                                 consent.revoked_at,
                                 @current_scope.timezone
@@ -298,7 +276,7 @@ defmodule ToweropsWeb.AccountLive.MyData do
                           phx-click="revoke_consent"
                           phx-value-consent-id={consent.id}
                           data-confirm="Are you sure you want to revoke this consent? This may limit your ability to use certain features."
-                          class="text-sm font-medium text-sweet-salmon-600 hover:text-sweet-salmon-700 dark:text-sweet-salmon-400 dark:hover:text-sweet-salmon-300"
+                          class="text-sm font-medium text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
                         >
                           Revoke Consent
                         </button>
@@ -313,50 +291,42 @@ defmodule ToweropsWeb.AccountLive.MyData do
 
         <%= if @is_owner do %>
           <!-- Organizations -->
-          <section class="bg-white dark:bg-cool-steel-900 shadow rounded-lg overflow-hidden">
-            <div class="px-4 py-5 sm:px-6 border-b border-cool-steel-200 dark:border-cool-steel-700">
-              <h2 class="text-lg font-medium text-cool-steel-900 dark:text-white">
+          <section class="bg-white dark:bg-gray-900 shadow rounded-lg overflow-hidden">
+            <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
+              <h2 class="text-lg font-medium text-gray-900 dark:text-white">
                 Organizations
               </h2>
-              <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                 Organizations you own or are a member of
               </p>
             </div>
             <div class="px-4 py-5 sm:p-6">
               <%= if Enum.empty?(@user_data.organizations) do %>
-                <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
-                  No organization memberships.
-                </p>
+                <p class="text-sm text-gray-500 dark:text-gray-400">No organization memberships.</p>
               <% else %>
                 <div class="space-y-4">
                   <%= for org <- @user_data.organizations do %>
-                    <div class="border border-cool-steel-200 dark:border-cool-steel-700 rounded-lg p-4">
+                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                       <dl class="grid grid-cols-1 gap-x-4 gap-y-3 sm:grid-cols-2">
                         <div>
-                          <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                            Name
-                          </dt>
-                          <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">{org.name}</dd>
+                          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Name</dt>
+                          <dd class="mt-1 text-sm text-gray-900 dark:text-white">{org.name}</dd>
                         </div>
                         <div>
-                          <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                            Role
-                          </dt>
-                          <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
+                          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Role</dt>
+                          <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                             {if org.is_owner, do: "Owner", else: "Member"}
                           </dd>
                         </div>
                         <div>
-                          <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                            Slug
-                          </dt>
-                          <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">{org.slug}</dd>
+                          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Slug</dt>
+                          <dd class="mt-1 text-sm text-gray-900 dark:text-white">{org.slug}</dd>
                         </div>
                         <div>
-                          <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
+                          <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                             Created
                           </dt>
-                          <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
+                          <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                             {ToweropsWeb.TimeHelpers.format_date(
                               org.inserted_at,
                               @current_scope.timezone
@@ -372,52 +342,50 @@ defmodule ToweropsWeb.AccountLive.MyData do
           </section>
           
     <!-- Devices -->
-          <section class="bg-white dark:bg-cool-steel-900 shadow rounded-lg overflow-hidden">
-            <div class="px-4 py-5 sm:px-6 border-b border-cool-steel-200 dark:border-cool-steel-700">
-              <h2 class="text-lg font-medium text-cool-steel-900 dark:text-white">
+          <section class="bg-white dark:bg-gray-900 shadow rounded-lg overflow-hidden">
+            <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
+              <h2 class="text-lg font-medium text-gray-900 dark:text-white">
                 Devices
               </h2>
-              <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                 Network devices monitored by your organizations
               </p>
             </div>
             <div class="px-4 py-5 sm:p-6">
               <%= if Enum.empty?(@user_data.devices) do %>
-                <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
-                  No devices configured.
-                </p>
+                <p class="text-sm text-gray-500 dark:text-gray-400">No devices configured.</p>
               <% else %>
                 <div class="overflow-x-auto">
-                  <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-cool-steel-700">
+                  <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                     <thead>
                       <tr>
-                        <th class="px-3 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                           Name
                         </th>
-                        <th class="px-3 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                           IP Address
                         </th>
-                        <th class="px-3 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                           Organization
                         </th>
-                        <th class="px-3 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                           Created
                         </th>
                       </tr>
                     </thead>
-                    <tbody class="divide-y divide-cool-steel-200 dark:divide-cool-steel-700">
+                    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                       <%= for device <- @user_data.devices do %>
                         <tr>
-                          <td class="px-3 py-4 text-sm text-cool-steel-900 dark:text-white">
+                          <td class="px-3 py-4 text-sm text-gray-900 dark:text-white">
                             {device.name}
                           </td>
-                          <td class="px-3 py-4 text-sm text-cool-steel-900 dark:text-white">
+                          <td class="px-3 py-4 text-sm text-gray-900 dark:text-white">
                             {device.ip_address}
                           </td>
-                          <td class="px-3 py-4 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                          <td class="px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                             {device.site.organization.name}
                           </td>
-                          <td class="px-3 py-4 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                          <td class="px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                             {ToweropsWeb.TimeHelpers.format_date(
                               device.inserted_at,
                               @current_scope.timezone
@@ -428,7 +396,7 @@ defmodule ToweropsWeb.AccountLive.MyData do
                     </tbody>
                   </table>
                 </div>
-                <p class="mt-4 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">
                   Total devices: {length(@user_data.devices)}
                 </p>
               <% end %>
@@ -436,46 +404,44 @@ defmodule ToweropsWeb.AccountLive.MyData do
           </section>
           
     <!-- Alerts -->
-          <section class="bg-white dark:bg-cool-steel-900 shadow rounded-lg overflow-hidden">
-            <div class="px-4 py-5 sm:px-6 border-b border-cool-steel-200 dark:border-cool-steel-700">
-              <h2 class="text-lg font-medium text-cool-steel-900 dark:text-white">
+          <section class="bg-white dark:bg-gray-900 shadow rounded-lg overflow-hidden">
+            <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
+              <h2 class="text-lg font-medium text-gray-900 dark:text-white">
                 Recent Alerts
               </h2>
-              <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                 Alerts generated for your devices (last 90 days)
               </p>
             </div>
             <div class="px-4 py-5 sm:p-6">
               <%= if Enum.empty?(@user_data.alerts) do %>
-                <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
-                  No alerts in the last 90 days.
-                </p>
+                <p class="text-sm text-gray-500 dark:text-gray-400">No alerts in the last 90 days.</p>
               <% else %>
                 <div class="overflow-x-auto">
-                  <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-cool-steel-700">
+                  <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                     <thead>
                       <tr>
-                        <th class="px-3 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                           Device
                         </th>
-                        <th class="px-3 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                           Type
                         </th>
-                        <th class="px-3 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                           Status
                         </th>
-                        <th class="px-3 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                           Created
                         </th>
                       </tr>
                     </thead>
-                    <tbody class="divide-y divide-cool-steel-200 dark:divide-cool-steel-700">
+                    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                       <%= for alert <- Enum.take(@user_data.alerts, 50) do %>
                         <tr>
-                          <td class="px-3 py-4 text-sm text-cool-steel-900 dark:text-white">
+                          <td class="px-3 py-4 text-sm text-gray-900 dark:text-white">
                             {alert.device.name}
                           </td>
-                          <td class="px-3 py-4 text-sm text-cool-steel-900 dark:text-white">
+                          <td class="px-3 py-4 text-sm text-gray-900 dark:text-white">
                             {alert.alert_type}
                           </td>
                           <td class="px-3 py-4 text-sm">
@@ -486,7 +452,7 @@ defmodule ToweropsWeb.AccountLive.MyData do
                               {alert_status_text(alert)}
                             </span>
                           </td>
-                          <td class="px-3 py-4 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                          <td class="px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                             {ToweropsWeb.TimeHelpers.format_datetime(
                               alert.inserted_at,
                               @current_scope.timezone,
@@ -498,7 +464,7 @@ defmodule ToweropsWeb.AccountLive.MyData do
                     </tbody>
                   </table>
                 </div>
-                <p class="mt-4 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">
                   Showing {min(50, length(@user_data.alerts))} of {length(@user_data.alerts)} alerts
                 </p>
               <% end %>
@@ -507,33 +473,31 @@ defmodule ToweropsWeb.AccountLive.MyData do
         <% end %>
         
     <!-- Audit Logs -->
-        <section class="bg-white dark:bg-cool-steel-900 shadow rounded-lg overflow-hidden">
-          <div class="px-4 py-5 sm:px-6 border-b border-cool-steel-200 dark:border-cool-steel-700">
-            <h2 class="text-lg font-medium text-cool-steel-900 dark:text-white">
+        <section class="bg-white dark:bg-gray-900 shadow rounded-lg overflow-hidden">
+          <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
+            <h2 class="text-lg font-medium text-gray-900 dark:text-white">
               Audit Log
             </h2>
-            <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
               Administrative actions related to your account
             </p>
           </div>
           <div class="px-4 py-5 sm:p-6">
             <%= if Enum.empty?(@user_data.audit_logs) do %>
-              <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
-                No audit log entries.
-              </p>
+              <p class="text-sm text-gray-500 dark:text-gray-400">No audit log entries.</p>
             <% else %>
               <div class="space-y-3">
                 <%= for log <- Enum.take(@user_data.audit_logs, 20) do %>
-                  <div class="border-l-4 border-cerulean-400 bg-cool-steel-50 dark:bg-cool-steel-800 p-3">
+                  <div class="border-l-4 border-blue-400 bg-gray-50 dark:bg-gray-800 p-3">
                     <div class="flex items-start">
                       <div class="flex-1">
-                        <p class="text-sm font-medium text-cool-steel-900 dark:text-white">
+                        <p class="text-sm font-medium text-gray-900 dark:text-white">
                           {log.action}
                         </p>
-                        <p class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                           By: {if log.superuser, do: log.superuser.email, else: "System"}
                         </p>
-                        <p class="mt-1 text-xs text-cool-steel-500 dark:text-cool-steel-500">
+                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-500">
                           {ToweropsWeb.TimeHelpers.format_datetime(
                             log.inserted_at,
                             @current_scope.timezone,
@@ -545,7 +509,7 @@ defmodule ToweropsWeb.AccountLive.MyData do
                   </div>
                 <% end %>
               </div>
-              <p class="mt-4 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">
                 Showing {min(20, length(@user_data.audit_logs))} of {length(@user_data.audit_logs)} entries
               </p>
             <% end %>
@@ -553,22 +517,22 @@ defmodule ToweropsWeb.AccountLive.MyData do
         </section>
         
     <!-- Export Data -->
-        <section class="bg-cerulean-50 dark:bg-cerulean-900/20 border border-cerulean-200 dark:border-cerulean-800 rounded-lg p-6">
+        <section class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-6">
           <div class="flex items-start gap-3">
             <.icon
               name="hero-arrow-down-tray"
-              class="h-6 w-6 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0"
+              class="h-6 w-6 text-blue-600 dark:text-blue-400 flex-shrink-0"
             />
             <div class="flex-1">
-              <h3 class="text-sm font-semibold text-cerulean-900 dark:text-cerulean-300 mb-1">
+              <h3 class="text-sm font-semibold text-blue-900 dark:text-blue-300 mb-1">
                 Export Your Data
               </h3>
-              <p class="text-sm text-cerulean-800 dark:text-cerulean-300 mb-4">
+              <p class="text-sm text-blue-800 dark:text-blue-300 mb-4">
                 You can download all your data in JSON format. This includes your profile, organizations, devices, alerts, and audit logs.
               </p>
               <.link
                 href={~p"/api/v1/account/data"}
-                class="inline-flex items-center gap-2 px-4 py-2 bg-cerulean-600 text-white text-sm font-medium rounded-lg hover:bg-cerulean-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cerulean-500"
+                class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
               >
                 <.icon name="hero-arrow-down-tray" class="h-4 w-4" /> Download My Data (JSON)
               </.link>
@@ -577,15 +541,15 @@ defmodule ToweropsWeb.AccountLive.MyData do
         </section>
         
     <!-- Data Processing Information -->
-        <section class="bg-white dark:bg-cool-steel-900 shadow rounded-lg overflow-hidden">
-          <div class="px-4 py-5 sm:px-6 border-b border-cool-steel-200 dark:border-cool-steel-700">
-            <h2 class="text-lg font-medium text-cool-steel-900 dark:text-white">
+        <section class="bg-white dark:bg-gray-900 shadow rounded-lg overflow-hidden">
+          <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
+            <h2 class="text-lg font-medium text-gray-900 dark:text-white">
               How We Use Your Data
             </h2>
           </div>
           <div class="px-4 py-5 sm:p-6">
             <div class="prose prose-sm dark:prose-invert max-w-none">
-              <ul class="space-y-2 text-sm text-cool-steel-700 dark:text-cool-steel-300">
+              <ul class="space-y-2 text-sm text-gray-700 dark:text-gray-300">
                 <li>
                   <strong>Profile Information:</strong>
                   Used to identify your account and personalize your experience
@@ -610,10 +574,10 @@ defmodule ToweropsWeb.AccountLive.MyData do
                   Security records of administrative actions for compliance and security purposes
                 </li>
               </ul>
-              <p class="mt-4 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="mt-4 text-sm text-gray-600 dark:text-gray-400">
                 For more information, please read our <.link
                   navigate={~p"/privacy"}
-                  class="text-cerulean-600 hover:text-cerulean-500 dark:text-cerulean-400"
+                  class="text-blue-600 hover:text-blue-500 dark:text-blue-400"
                 >
                   Privacy Policy
                 </.link>.
@@ -699,8 +663,8 @@ defmodule ToweropsWeb.AccountLive.MyData do
   defp alert_status_class(alert) do
     cond do
       alert.resolved_at -> "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400"
-      alert.acknowledged_at -> "bg-wheat-100 text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400"
-      true -> "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"
+      alert.acknowledged_at -> "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"
+      true -> "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
     end
   end
 
diff --git a/lib/towerops_web/live/account_live/totp_enrollment.ex b/lib/towerops_web/live/account_live/totp_enrollment.ex
index 2997a012..61130f04 100644
--- a/lib/towerops_web/live/account_live/totp_enrollment.ex
+++ b/lib/towerops_web/live/account_live/totp_enrollment.ex
@@ -141,7 +141,7 @@ defmodule ToweropsWeb.AccountLive.TotpEnrollment do
       unresolved_alert_count={assigns[:unresolved_alert_count] || 0}
     >
       <div class="mx-auto max-w-2xl px-4 py-12">
-        <div class="bg-white dark:bg-cool-steel-900 rounded-lg shadow-lg p-8">
+        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-8">
           <%= if @show_recovery_codes do %>
             <!-- Recovery Codes Display -->
             <div class="text-center mb-8">
@@ -149,27 +149,27 @@ defmodule ToweropsWeb.AccountLive.TotpEnrollment do
                 name="hero-shield-check"
                 class="w-16 h-16 mx-auto mb-4 text-green-600 dark:text-green-400"
               />
-              <h1 class="text-3xl font-bold text-cool-steel-900 dark:text-white mb-2">
+              <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
                 Save Your Recovery Codes
               </h1>
-              <p class="text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-gray-600 dark:text-gray-400">
                 Two-factor authentication has been enabled successfully!
               </p>
             </div>
 
             <div class="space-y-6">
               <!-- Warning -->
-              <div class="rounded-md bg-wheat-50 dark:bg-wheat-900/20 p-4 border border-wheat-200 dark:border-wheat-800">
+              <div class="rounded-md bg-yellow-50 dark:bg-yellow-900/20 p-4 border border-yellow-200 dark:border-yellow-800">
                 <div class="flex">
                   <.icon
                     name="hero-exclamation-triangle"
-                    class="h-5 w-5 text-wheat-400 mt-0.5"
+                    class="h-5 w-5 text-yellow-400 mt-0.5"
                   />
                   <div class="ml-3">
-                    <h3 class="text-sm font-medium text-wheat-800 dark:text-wheat-200">
+                    <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
                       Important: Save these recovery codes now
                     </h3>
-                    <div class="mt-2 text-sm text-wheat-700 dark:text-wheat-300">
+                    <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
                       <ul class="list-disc pl-5 space-y-1">
                         <li>These codes will only be shown once and cannot be retrieved later</li>
                         <li>Store them in a secure location like a password manager</li>
@@ -181,14 +181,14 @@ defmodule ToweropsWeb.AccountLive.TotpEnrollment do
                 </div>
               </div>
               <!-- Recovery Codes -->
-              <div class="border border-cool-steel-200 dark:border-cool-steel-700 rounded-lg p-6">
-                <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-4 text-center">
+              <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-6">
+                <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 text-center">
                   Your Recovery Codes
                 </h2>
                 <div class="grid grid-cols-2 gap-3 max-w-md mx-auto">
                   <%= for code <- @recovery_codes do %>
-                    <div class="bg-cool-steel-50 dark:bg-cool-steel-800 rounded-md p-3 text-center">
-                      <code class="text-lg font-mono text-cool-steel-900 dark:text-white font-semibold">
+                    <div class="bg-gray-50 dark:bg-gray-800 rounded-md p-3 text-center">
+                      <code class="text-lg font-mono text-gray-900 dark:text-white font-semibold">
                         {code}
                       </code>
                     </div>
@@ -199,7 +199,7 @@ defmodule ToweropsWeb.AccountLive.TotpEnrollment do
                   <button
                     type="button"
                     phx-click={JS.dispatch("phx:copy", to: "#recovery-codes-text")}
-                    class="inline-flex items-center px-4 py-2 border border-cool-steel-300 dark:border-cool-steel-600 shadow-sm text-sm font-medium rounded-md text-cool-steel-700 dark:text-cool-steel-300 bg-white dark:bg-cool-steel-800 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cerulean-500"
+                    class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                   >
                     <.icon name="hero-clipboard-document" class="w-5 h-5 mr-2" /> Copy All
                   </button>
@@ -207,7 +207,7 @@ defmodule ToweropsWeb.AccountLive.TotpEnrollment do
                   <a
                     href={"data:text/plain;charset=utf-8," <> URI.encode(Enum.join(@recovery_codes, "\n"))}
                     download="towerops-recovery-codes.txt"
-                    class="inline-flex items-center px-4 py-2 border border-cool-steel-300 dark:border-cool-steel-600 shadow-sm text-sm font-medium rounded-md text-cool-steel-700 dark:text-cool-steel-300 bg-white dark:bg-cool-steel-800 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cerulean-500"
+                    class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                   >
                     <.icon name="hero-arrow-down-tray" class="w-5 h-5 mr-2" /> Download
                   </a>
@@ -226,7 +226,7 @@ defmodule ToweropsWeb.AccountLive.TotpEnrollment do
                 <button
                   type="button"
                   phx-click="confirm_recovery_codes_saved"
-                  class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-cerulean-600 hover:bg-cerulean-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cerulean-500"
+                  class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                 >
                   I've Saved My Recovery Codes <.icon name="hero-arrow-right" class="w-5 h-5 ml-2" />
                 </button>
@@ -237,29 +237,29 @@ defmodule ToweropsWeb.AccountLive.TotpEnrollment do
             <div class="text-center mb-8">
               <.icon
                 name="hero-shield-check"
-                class="w-16 h-16 mx-auto mb-4 text-cerulean-600 dark:text-cerulean-400"
+                class="w-16 h-16 mx-auto mb-4 text-blue-600 dark:text-blue-400"
               />
-              <h1 class="text-3xl font-bold text-cool-steel-900 dark:text-white mb-2">
+              <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
                 Set Up Two-Factor Authentication
               </h1>
-              <p class="text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="text-gray-600 dark:text-gray-400">
                 To keep your account secure, two-factor authentication is required for all users.
               </p>
             </div>
 
             <div class="space-y-6">
               <!-- Step 1: Scan QR Code -->
-              <div class="border-t border-cool-steel-200 dark:border-cool-steel-700 pt-6">
-                <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white mb-4 flex items-center">
-                  <span class="flex items-center justify-center w-8 h-8 bg-cerulean-600 text-white rounded-full mr-3 text-sm">
+              <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
+                  <span class="flex items-center justify-center w-8 h-8 bg-blue-600 text-white rounded-full mr-3 text-sm">
                     1
                   </span>
                   Install an Authenticator App
                 </h2>
-                <p class="text-cool-steel-600 dark:text-cool-steel-400 ml-11 mb-4">
+                <p class="text-gray-600 dark:text-gray-400 ml-11 mb-4">
                   Download an authenticator app on your phone if you haven't already:
                 </p>
-                <ul class="ml-11 space-y-2 text-cool-steel-700 dark:text-cool-steel-300">
+                <ul class="ml-11 space-y-2 text-gray-700 dark:text-gray-300">
                   <li class="flex items-center">
                     <.icon
                       name="hero-check-circle"
@@ -282,35 +282,35 @@ defmodule ToweropsWeb.AccountLive.TotpEnrollment do
               </div>
               
     <!-- Step 2: Scan QR Code -->
-              <div class="border-t border-cool-steel-200 dark:border-cool-steel-700 pt-6">
-                <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white mb-4 flex items-center">
-                  <span class="flex items-center justify-center w-8 h-8 bg-cerulean-600 text-white rounded-full mr-3 text-sm">
+              <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
+                  <span class="flex items-center justify-center w-8 h-8 bg-blue-600 text-white rounded-full mr-3 text-sm">
                     2
                   </span>
                   Scan the QR Code
                 </h2>
-                <p class="text-cool-steel-600 dark:text-cool-steel-400 ml-11 mb-4">
+                <p class="text-gray-600 dark:text-gray-400 ml-11 mb-4">
                   Open your authenticator app and scan this QR code:
                 </p>
                 <%= if @qr_code do %>
                   <div class="ml-11 flex justify-center">
-                    <div class="bg-white dark:bg-cool-steel-900 p-4 rounded-lg border-2 border-cool-steel-200 dark:border-cool-steel-700">
+                    <div class="bg-white dark:bg-gray-900 p-4 rounded-lg border-2 border-gray-200 dark:border-gray-700">
                       <img src={@qr_code} alt="TOTP QR Code" class="w-64 h-64" />
                     </div>
                   </div>
                 <% else %>
                   <div class="ml-11 flex justify-center">
-                    <div class="bg-cool-steel-100 dark:bg-cool-steel-800 p-4 rounded-lg border-2 border-cool-steel-200 dark:border-cool-steel-700 w-72 h-72 flex items-center justify-center">
-                      <p class="text-cool-steel-500 dark:text-cool-steel-400">Loading QR code...</p>
+                    <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg border-2 border-gray-200 dark:border-gray-700 w-72 h-72 flex items-center justify-center">
+                      <p class="text-gray-500 dark:text-gray-400">Loading QR code...</p>
                     </div>
                   </div>
                 <% end %>
               </div>
               
     <!-- Step 3: Enter Code -->
-              <div class="border-t border-cool-steel-200 dark:border-cool-steel-700 pt-6">
-                <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white mb-4 flex items-center">
-                  <span class="flex items-center justify-center w-8 h-8 bg-cerulean-600 text-white rounded-full mr-3 text-sm">
+              <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
+                  <span class="flex items-center justify-center w-8 h-8 bg-blue-600 text-white rounded-full mr-3 text-sm">
                     3
                   </span>
                   Enter the Code from Your App
@@ -327,7 +327,7 @@ defmodule ToweropsWeb.AccountLive.TotpEnrollment do
                     <div>
                       <label
                         for="code"
-                        class="block text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300 mb-2 text-center"
+                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 text-center"
                       >
                         6-digit code
                       </label>
@@ -341,17 +341,17 @@ defmodule ToweropsWeb.AccountLive.TotpEnrollment do
                         placeholder="000000"
                         required
                         autocomplete="off"
-                        class="block w-full rounded-md border-cool-steel-300 dark:border-cool-steel-600 dark:bg-cool-steel-800 dark:text-white shadow-sm focus:border-cerulean-500 focus:ring-cerulean-500 text-2xl text-center tracking-widest font-mono"
+                        class="block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 text-2xl text-center tracking-widest font-mono"
                         phx-mounted={JS.focus()}
                       />
                     </div>
 
                     <%= if @error do %>
-                      <div class="rounded-md bg-sweet-salmon-50 dark:bg-sweet-salmon-900/30 p-4">
+                      <div class="rounded-md bg-red-50 dark:bg-red-900/30 p-4">
                         <div class="flex">
-                          <.icon name="hero-exclamation-circle" class="h-5 w-5 text-sweet-salmon-400" />
+                          <.icon name="hero-exclamation-circle" class="h-5 w-5 text-red-400" />
                           <div class="ml-3">
-                            <p class="text-sm text-sweet-salmon-800 dark:text-sweet-salmon-200">
+                            <p class="text-sm text-red-800 dark:text-red-200">
                               {@error}
                             </p>
                           </div>
@@ -369,14 +369,14 @@ defmodule ToweropsWeb.AccountLive.TotpEnrollment do
               </div>
             </div>
 
-            <div class="mt-8 p-4 bg-cerulean-50 dark:bg-cerulean-900/20 rounded-lg border border-cerulean-200 dark:border-cerulean-800">
+            <div class="mt-8 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
               <div class="flex">
                 <.icon
                   name="hero-information-circle"
-                  class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 mt-0.5"
+                  class="h-5 w-5 text-blue-600 dark:text-blue-400 mt-0.5"
                 />
                 <div class="ml-3">
-                  <p class="text-sm text-cerulean-900 dark:text-cerulean-100">
+                  <p class="text-sm text-blue-900 dark:text-blue-100">
                     <strong>Keep your device safe:</strong>
                     You'll need to enter a code from your authenticator app each time you log in.
                     Make sure to keep your phone secure and backed up.
diff --git a/lib/towerops_web/live/activity_feed_live.ex b/lib/towerops_web/live/activity_feed_live.ex
index de958154..7f103fa7 100644
--- a/lib/towerops_web/live/activity_feed_live.ex
+++ b/lib/towerops_web/live/activity_feed_live.ex
@@ -179,50 +179,44 @@ defmodule ToweropsWeb.ActivityFeedLive do
   end
 
   defp filter_active_class(:config_change), do: "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400"
-
-  defp filter_active_class(:alert_fired),
-    do: "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"
-
+  defp filter_active_class(:alert_fired), do: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
   defp filter_active_class(:alert_resolved), do: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400"
   defp filter_active_class(:device_event), do: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400"
-  defp filter_active_class(:sync), do: "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-400"
+  defp filter_active_class(:sync), do: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
   defp filter_active_class(:device_added), do: "bg-cyan-100 text-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-400"
-  defp filter_active_class(_), do: "bg-cool-steel-200 text-cool-steel-700 dark:bg-cool-steel-700 dark:text-cool-steel-300"
+  defp filter_active_class(_), do: "bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300"
 
   @doc false
-  def severity_dot_color(:critical, _), do: "bg-sweet-salmon-500"
-  def severity_dot_color(:warning, _), do: "bg-wheat-500"
+  def severity_dot_color(:critical, _), do: "bg-red-500"
+  def severity_dot_color(:warning, _), do: "bg-yellow-500"
   def severity_dot_color(:info, :alert_resolved), do: "bg-green-500"
-  def severity_dot_color(:info, :sync), do: "bg-cerulean-500"
+  def severity_dot_color(:info, :sync), do: "bg-blue-500"
   def severity_dot_color(:info, :device_added), do: "bg-cyan-500"
-  def severity_dot_color(:info, _), do: "bg-cool-steel-400"
-  def severity_dot_color(_, _), do: "bg-cool-steel-400"
+  def severity_dot_color(:info, _), do: "bg-gray-400"
+  def severity_dot_color(_, _), do: "bg-gray-400"
 
   @doc false
-  def severity_icon_color(:critical, _), do: "text-sweet-salmon-500 dark:text-sweet-salmon-400"
-  def severity_icon_color(:warning, _), do: "text-wheat-500 dark:text-wheat-400"
+  def severity_icon_color(:critical, _), do: "text-red-500 dark:text-red-400"
+  def severity_icon_color(:warning, _), do: "text-yellow-500 dark:text-yellow-400"
   def severity_icon_color(:info, :alert_resolved), do: "text-green-500 dark:text-green-400"
-  def severity_icon_color(:info, :sync), do: "text-cerulean-500 dark:text-cerulean-400"
+  def severity_icon_color(:info, :sync), do: "text-blue-500 dark:text-blue-400"
   def severity_icon_color(:info, :device_added), do: "text-cyan-500 dark:text-cyan-400"
-  def severity_icon_color(_, _), do: "text-cool-steel-400 dark:text-cool-steel-500"
+  def severity_icon_color(_, _), do: "text-gray-400 dark:text-gray-500"
 
   @doc false
-  def severity_text_color(:critical, _), do: "text-sweet-salmon-700 dark:text-sweet-salmon-400"
-  def severity_text_color(:warning, _), do: "text-wheat-700 dark:text-wheat-400"
+  def severity_text_color(:critical, _), do: "text-red-700 dark:text-red-400"
+  def severity_text_color(:warning, _), do: "text-yellow-700 dark:text-yellow-400"
   def severity_text_color(:info, :alert_resolved), do: "text-green-700 dark:text-green-400"
-  def severity_text_color(_, _), do: "text-cool-steel-900 dark:text-white"
+  def severity_text_color(_, _), do: "text-gray-900 dark:text-white"
 
   @doc false
   def type_badge_class(:config_change), do: "bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400"
-
-  def type_badge_class(:alert_fired),
-    do: "bg-sweet-salmon-100 text-sweet-salmon-700 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"
-
+  def type_badge_class(:alert_fired), do: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
   def type_badge_class(:alert_resolved), do: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
   def type_badge_class(:device_event), do: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400"
-  def type_badge_class(:sync), do: "bg-cerulean-100 text-cerulean-700 dark:bg-cerulean-900/30 dark:text-cerulean-400"
+  def type_badge_class(:sync), do: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400"
   def type_badge_class(:device_added), do: "bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-400"
-  def type_badge_class(_), do: "bg-cool-steel-100 text-cool-steel-600 dark:bg-cool-steel-800 dark:text-cool-steel-400"
+  def type_badge_class(_), do: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
 
   @doc false
   def type_label(:config_change), do: "Config"
diff --git a/lib/towerops_web/live/activity_feed_live.html.heex b/lib/towerops_web/live/activity_feed_live.html.heex
index ccbeeeb9..1b0e3718 100644
--- a/lib/towerops_web/live/activity_feed_live.html.heex
+++ b/lib/towerops_web/live/activity_feed_live.html.heex
@@ -24,7 +24,7 @@
       <div class="relative">
         <.icon
           name="hero-magnifying-glass"
-          class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-cool-steel-400 dark:text-cool-steel-500"
+          class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 dark:text-gray-500"
         />
         <input
           type="text"
@@ -38,7 +38,7 @@
           :if={@search != ""}
           type="button"
           phx-click="clear_search"
-          class="absolute right-3 top-1/2 -translate-y-1/2 text-cool-steel-400 hover:text-cool-steel-600 dark:hover:text-cool-steel-300"
+          class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
         >
           <.icon name="hero-x-mark" class="h-5 w-5" />
         </button>
@@ -48,9 +48,7 @@
 
   <%!-- Filter Chips with Counts --%>
   <div class="mt-4 flex flex-wrap items-center gap-2">
-    <span class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400 mr-1">
-      Filter:
-    </span>
+    <span class="text-sm font-medium text-gray-500 dark:text-gray-400 mr-1">Filter:</span>
     <%= for {type, label, icon} <- filter_options() do %>
       <button
         type="button"
@@ -61,7 +59,7 @@
           if(type in @active_types,
             do: filter_active_class(type),
             else:
-              "bg-cool-steel-100 text-cool-steel-500 dark:bg-cool-steel-800 dark:text-cool-steel-500 hover:bg-cool-steel-200 dark:hover:bg-cool-steel-700"
+              "bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700"
           )
         ]}
       >
@@ -73,7 +71,7 @@
             "inline-flex items-center justify-center min-w-[18px] h-[18px] rounded-full px-1 text-[10px] font-bold",
             if(type in @active_types,
               do: "bg-white/30 dark:bg-black/20",
-              else: "bg-cool-steel-200 dark:bg-cool-steel-700"
+              else: "bg-gray-200 dark:bg-gray-700"
             )
           ]}
         >
@@ -86,21 +84,18 @@
   <%!-- Timeline --%>
   <div class="mt-8">
     <%= if @items == [] do %>
-      <div class="rounded-xl border-2 border-dashed border-cool-steel-200 bg-white p-16 text-center dark:border-cool-steel-700 dark:bg-cool-steel-800/50">
-        <div class="mx-auto w-16 h-16 rounded-full bg-cool-steel-100 dark:bg-cool-steel-700 flex items-center justify-center mb-4">
-          <.icon
-            name="hero-signal-slash"
-            class="h-8 w-8 text-cool-steel-400 dark:text-cool-steel-500"
-          />
+      <div class="rounded-xl border-2 border-dashed border-gray-200 bg-white p-16 text-center dark:border-gray-700 dark:bg-gray-800/50">
+        <div class="mx-auto w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center mb-4">
+          <.icon name="hero-signal-slash" class="h-8 w-8 text-gray-400 dark:text-gray-500" />
         </div>
-        <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
           <%= if @search != "" do %>
             No results for "{@search}"
           <% else %>
             {t("No activity yet")}
           <% end %>
         </h3>
-        <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400 max-w-md mx-auto">
+        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400 max-w-md mx-auto">
           <%= if @search != "" do %>
             {t("Try adjusting your search terms or clearing the filters.")}
           <% else %>
@@ -122,13 +117,13 @@
     <% else %>
       <%!-- Item count summary --%>
       <div class="mb-4 flex items-center justify-between">
-        <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
+        <span class="text-xs text-gray-500 dark:text-gray-400">
           Showing {length(@items)} events
           <span :if={@search != ""}>
-            matching "<strong class="text-cool-steel-700 dark:text-cool-steel-300">{@search}</strong>"
+            matching "<strong class="text-gray-700 dark:text-gray-300">{@search}</strong>"
           </span>
         </span>
-        <span class="text-xs text-cool-steel-400 dark:text-cool-steel-500 flex items-center gap-1">
+        <span class="text-xs text-gray-400 dark:text-gray-500 flex items-center gap-1">
           <span class="relative flex h-2 w-2">
             <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75">
             </span>
@@ -138,35 +133,35 @@
         </span>
       </div>
 
-      <div class="rounded-lg border border-cool-steel-200 dark:border-cool-steel-700 overflow-hidden">
+      <div class="rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
         <table class="w-full text-sm border-collapse">
           <thead>
-            <tr class="border-b border-cool-steel-200 dark:border-cool-steel-700 bg-cool-steel-50 dark:bg-cool-steel-800/80">
+            <tr class="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/80">
               <th class="w-1 p-0"></th>
-              <th class="py-2 pl-3 pr-4 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 whitespace-nowrap w-28">
+              <th class="py-2 pl-3 pr-4 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 whitespace-nowrap w-28">
                 Time
               </th>
-              <th class="py-2 px-3 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 w-28">
+              <th class="py-2 px-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 w-28">
                 Type
               </th>
-              <th class="py-2 px-3 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+              <th class="py-2 px-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                 Event
               </th>
-              <th class="py-2 px-3 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 w-48">
+              <th class="py-2 px-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 w-48">
                 Device / Site
               </th>
               <th class="w-8 p-0"></th>
             </tr>
           </thead>
-          <tbody class="bg-white dark:bg-cool-steel-900 divide-y divide-cool-steel-100 dark:divide-cool-steel-800">
+          <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-100 dark:divide-gray-800">
             <%= for {period, period_items} <- @grouped_items do %>
               <%!-- Period group header row --%>
-              <tr class="bg-cool-steel-50/80 dark:bg-cool-steel-800/40">
+              <tr class="bg-gray-50/80 dark:bg-gray-800/40">
                 <td colspan="6" class="px-4 py-1.5">
-                  <span class="text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     {period}
                   </span>
-                  <span class="ml-1.5 text-xs text-cool-steel-400 dark:text-cool-steel-500">
+                  <span class="ml-1.5 text-xs text-gray-400 dark:text-gray-500">
                     ({length(period_items)})
                   </span>
                 </td>
@@ -176,9 +171,8 @@
                 <tr
                   id={item.id}
                   class={[
-                    "group transition-colors hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800/50",
-                    item.severity == :critical &&
-                      "bg-sweet-salmon-50/50 dark:bg-sweet-salmon-900/10"
+                    "group transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/50",
+                    item.severity == :critical && "bg-red-50/50 dark:bg-red-900/10"
                   ]}
                 >
                   <%!-- Severity bar --%>
@@ -203,7 +197,7 @@
                           severity_icon_color(item.severity, item.type)
                         ]}
                       />
-                      <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400 tabular-nums">
+                      <span class="text-xs text-gray-500 dark:text-gray-400 tabular-nums">
                         {relative_time(item.timestamp, @now)}
                       </span>
                     </div>
@@ -233,7 +227,7 @@
                     </p>
                     <p
                       :if={item.detail && item.detail != ""}
-                      class="mt-0.5 text-xs text-cool-steel-500 dark:text-cool-steel-400 leading-snug"
+                      class="mt-0.5 text-xs text-gray-500 dark:text-gray-400 leading-snug"
                     >
                       {item.detail}
                     </p>
@@ -244,21 +238,21 @@
                     <.link
                       :if={item.device_name && item.link}
                       navigate={item.link}
-                      class="inline-flex items-center gap-1 text-xs font-medium text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300 leading-snug"
+                      class="inline-flex items-center gap-1 text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 leading-snug"
                     >
                       <.icon name="hero-server-stack" class="h-3 w-3 flex-shrink-0" />
                       {item.device_name}
                     </.link>
                     <span
                       :if={item.device_name && !item.link}
-                      class="inline-flex items-center gap-1 text-xs text-cool-steel-600 dark:text-cool-steel-300 leading-snug"
+                      class="inline-flex items-center gap-1 text-xs text-gray-600 dark:text-gray-300 leading-snug"
                     >
                       <.icon name="hero-server-stack" class="h-3 w-3 flex-shrink-0" />
                       {item.device_name}
                     </span>
                     <div
                       :if={item.site_name}
-                      class="mt-0.5 inline-flex items-center gap-1 text-xs text-cool-steel-400 dark:text-cool-steel-500"
+                      class="mt-0.5 inline-flex items-center gap-1 text-xs text-gray-400 dark:text-gray-500"
                     >
                       <.icon name="hero-map-pin" class="h-3 w-3 flex-shrink-0" />
                       {item.site_name}
@@ -273,7 +267,7 @@
                     >
                       <.link
                         navigate={item.link}
-                        class="text-cool-steel-400 hover:text-cerulean-500 dark:text-cool-steel-600 dark:hover:text-cerulean-400"
+                        class="text-gray-400 hover:text-blue-500 dark:text-gray-600 dark:hover:text-blue-400"
                       >
                         <.icon name="hero-arrow-right" class="h-4 w-4" />
                       </.link>
diff --git a/lib/towerops_web/live/admin/agent_live/index.html.heex b/lib/towerops_web/live/admin/agent_live/index.html.heex
index e0470db0..8a853985 100644
--- a/lib/towerops_web/live/admin/agent_live/index.html.heex
+++ b/lib/towerops_web/live/admin/agent_live/index.html.heex
@@ -1,8 +1,8 @@
 <Layouts.admin flash={@flash} timezone={@timezone}>
   <div class="space-y-6">
     <div>
-      <h1 class="text-2xl font-bold text-cool-steel-900 dark:text-white">{t("All Agents")}</h1>
-      <p class="text-cool-steel-600 dark:text-cool-steel-400">
+      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{t("All Agents")}</h1>
+      <p class="text-gray-600 dark:text-gray-400">
         {t("Agents across all organizations and cloud pollers")}
       </p>
     </div>
@@ -10,7 +10,7 @@
     <%!-- Cloud Pollers --%>
     <%= if @has_cloud_pollers do %>
       <div>
-        <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-3">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">
           <.icon name="hero-cloud" class="w-5 h-5 inline mr-1" /> Cloud Pollers
         </h2>
         <.table
@@ -22,7 +22,7 @@
             <div class="flex items-center gap-2">
               <span class="font-medium">{agent.name}</span>
               <%= if agent.allow_remote_debug do %>
-                <span class="inline-flex items-center gap-1 rounded-full bg-wheat-50 dark:bg-wheat-900/30 px-2 py-0.5 text-xs font-medium text-wheat-700 dark:text-wheat-300 ring-1 ring-inset ring-wheat-600/20 dark:ring-wheat-400/30">
+                <span class="inline-flex items-center gap-1 rounded-full bg-amber-50 dark:bg-amber-900/30 px-2 py-0.5 text-xs font-medium text-amber-700 dark:text-amber-300 ring-1 ring-inset ring-amber-600/20 dark:ring-amber-400/30">
                   <.icon name="hero-bug-ant" class="h-3 w-3" /> Debug
                 </span>
               <% end %>
@@ -39,10 +39,10 @@
 
           <:col :let={{_id, agent}} label={t("Devices")}>
             <% counts = Map.get(@device_counts, agent.id, %{direct: 0, total: 0}) %>
-            <div class="text-sm text-cool-steel-900 dark:text-white">
+            <div class="text-sm text-gray-900 dark:text-white">
               {counts.total} total
             </div>
-            <div class="text-xs text-cool-steel-500 dark:text-cool-steel-400 mt-0.5">
+            <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
               {counts.direct} direct
               <%= if counts.total > counts.direct do %>
                 · {counts.total - counts.direct} inherited
@@ -51,11 +51,11 @@
           </:col>
 
           <:col :let={{_id, agent}} label={t("Last Seen")}>
-            <div class="text-sm text-cool-steel-900 dark:text-white">
+            <div class="text-sm text-gray-900 dark:text-white">
               <.timestamp datetime={agent.last_seen_at} timezone={@timezone} now={@now} />
             </div>
             <%= if agent.last_seen_at do %>
-              <div class="text-xs text-cool-steel-500 dark:text-cool-steel-400 mt-0.5">
+              <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                 <.timestamp
                   datetime={agent.last_seen_at}
                   timezone={@timezone}
@@ -67,7 +67,7 @@
 
           <:col :let={{_id, agent}} label={t("Version")}>
             <%= if agent.metadata["version"] do %>
-              <div class="text-sm text-cool-steel-600 dark:text-cool-steel-400 font-mono">
+              <div class="text-sm text-gray-600 dark:text-gray-400 font-mono">
                 {format_agent_version(agent.metadata["version"])}
               </div>
             <% end %>
@@ -79,7 +79,7 @@
     <%!-- Organization Agents --%>
     <%= if @has_org_agents do %>
       <div>
-        <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-3">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">
           <.icon name="hero-server" class="w-5 h-5 inline mr-1" /> Organization Agents
         </h2>
         <.table
@@ -92,12 +92,12 @@
               <div class="flex items-center gap-2">
                 <span class="font-medium">{agent.name}</span>
                 <%= if agent.allow_remote_debug do %>
-                  <span class="inline-flex items-center gap-1 rounded-full bg-wheat-50 dark:bg-wheat-900/30 px-2 py-0.5 text-xs font-medium text-wheat-700 dark:text-wheat-300 ring-1 ring-inset ring-wheat-600/20 dark:ring-wheat-400/30">
+                  <span class="inline-flex items-center gap-1 rounded-full bg-amber-50 dark:bg-amber-900/30 px-2 py-0.5 text-xs font-medium text-amber-700 dark:text-amber-300 ring-1 ring-inset ring-amber-600/20 dark:ring-amber-400/30">
                     <.icon name="hero-bug-ant" class="h-3 w-3" /> Debug
                   </span>
                 <% end %>
               </div>
-              <div class="text-xs text-cool-steel-500 dark:text-cool-steel-400 mt-0.5">
+              <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                 {agent.organization.name}
               </div>
             </div>
@@ -113,10 +113,10 @@
 
           <:col :let={{_id, agent}} label={t("Devices")}>
             <% counts = Map.get(@device_counts, agent.id, %{direct: 0, total: 0}) %>
-            <div class="text-sm text-cool-steel-900 dark:text-white">
+            <div class="text-sm text-gray-900 dark:text-white">
               {counts.total} total
             </div>
-            <div class="text-xs text-cool-steel-500 dark:text-cool-steel-400 mt-0.5">
+            <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
               {counts.direct} direct
               <%= if counts.total > counts.direct do %>
                 · {counts.total - counts.direct} inherited
@@ -125,11 +125,11 @@
           </:col>
 
           <:col :let={{_id, agent}} label={t("Last Seen")}>
-            <div class="text-sm text-cool-steel-900 dark:text-white">
+            <div class="text-sm text-gray-900 dark:text-white">
               <.timestamp datetime={agent.last_seen_at} timezone={@timezone} now={@now} />
             </div>
             <%= if agent.last_seen_at do %>
-              <div class="text-xs text-cool-steel-500 dark:text-cool-steel-400 mt-0.5">
+              <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                 <.timestamp
                   datetime={agent.last_seen_at}
                   timezone={@timezone}
@@ -141,7 +141,7 @@
 
           <:col :let={{_id, agent}} label={t("Version")}>
             <%= if agent.metadata["version"] do %>
-              <div class="text-sm text-cool-steel-600 dark:text-cool-steel-400 font-mono">
+              <div class="text-sm text-gray-600 dark:text-gray-400 font-mono">
                 {format_agent_version(agent.metadata["version"])}
               </div>
             <% end %>
diff --git a/lib/towerops_web/live/admin/audit_live/index.ex b/lib/towerops_web/live/admin/audit_live/index.ex
index 829e5be3..4120654f 100644
--- a/lib/towerops_web/live/admin/audit_live/index.ex
+++ b/lib/towerops_web/live/admin/audit_live/index.ex
@@ -81,24 +81,21 @@ defmodule ToweropsWeb.Admin.AuditLive.Index do
   def render(assigns) do
     ~H"""
     <Layouts.admin flash={@flash} timezone={@current_scope.user.timezone}>
-      <div class="border-b border-cool-steel-200 pb-5 dark:border-white/5">
-        <h1 class="text-3xl font-semibold tracking-tight text-cool-steel-900 dark:text-white">
+      <div class="border-b border-gray-200 pb-5 dark:border-white/5">
+        <h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
           Audit Logs
         </h1>
-        <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
           View and search all system audit logs. Records are retained for 3 years.
         </p>
       </div>
       
     <!-- Search Filters -->
-      <div class="mt-8 bg-white dark:bg-cool-steel-900 shadow rounded-lg p-6">
+      <div class="mt-8 bg-white dark:bg-gray-900 shadow rounded-lg p-6">
         <form id="audit-search-form" phx-change="search" phx-submit="search" class="space-y-4">
           <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
             <div>
-              <label
-                for="email"
-                class="block text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300"
-              >
+              <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                 User Email
               </label>
               <input
@@ -107,21 +104,18 @@ defmodule ToweropsWeb.Admin.AuditLive.Index do
                 id="email"
                 value={@search_email}
                 placeholder="user@example.com"
-                class="mt-1 block w-full rounded-md border-cool-steel-300 shadow-sm focus:border-cerulean-500 focus:ring-cerulean-500 sm:text-sm dark:bg-cool-steel-800 dark:border-cool-steel-600 dark:text-white"
+                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm dark:bg-gray-800 dark:border-gray-600 dark:text-white"
               />
             </div>
 
             <div>
-              <label
-                for="action"
-                class="block text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300"
-              >
+              <label for="action" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                 Action
               </label>
               <select
                 name="action"
                 id="action"
-                class="mt-1 block w-full rounded-md border-cool-steel-300 shadow-sm focus:border-cerulean-500 focus:ring-cerulean-500 sm:text-sm dark:bg-cool-steel-800 dark:border-cool-steel-600 dark:text-white"
+                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm dark:bg-gray-800 dark:border-gray-600 dark:text-white"
               >
                 <option value="">All Actions</option>
                 <%= for action <- available_actions() do %>
@@ -135,7 +129,7 @@ defmodule ToweropsWeb.Admin.AuditLive.Index do
             <div>
               <label
                 for="date_from"
-                class="block text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300"
+                class="block text-sm font-medium text-gray-700 dark:text-gray-300"
               >
                 From Date
               </label>
@@ -144,15 +138,12 @@ defmodule ToweropsWeb.Admin.AuditLive.Index do
                 name="date_from"
                 id="date_from"
                 value={@date_from}
-                class="mt-1 block w-full rounded-md border-cool-steel-300 shadow-sm focus:border-cerulean-500 focus:ring-cerulean-500 sm:text-sm dark:bg-cool-steel-800 dark:border-cool-steel-600 dark:text-white"
+                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm dark:bg-gray-800 dark:border-gray-600 dark:text-white"
               />
             </div>
 
             <div>
-              <label
-                for="date_to"
-                class="block text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300"
-              >
+              <label for="date_to" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                 To Date
               </label>
               <input
@@ -160,7 +151,7 @@ defmodule ToweropsWeb.Admin.AuditLive.Index do
                 name="date_to"
                 id="date_to"
                 value={@date_to}
-                class="mt-1 block w-full rounded-md border-cool-steel-300 shadow-sm focus:border-cerulean-500 focus:ring-cerulean-500 sm:text-sm dark:bg-cool-steel-800 dark:border-cool-steel-600 dark:text-white"
+                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm dark:bg-gray-800 dark:border-gray-600 dark:text-white"
               />
             </div>
           </div>
@@ -168,7 +159,7 @@ defmodule ToweropsWeb.Admin.AuditLive.Index do
           <div class="flex gap-3">
             <button
               type="submit"
-              class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-cerulean-600 hover:bg-cerulean-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cerulean-500"
+              class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
             >
               <.icon name="hero-magnifying-glass" class="h-4 w-4 mr-2" /> Search
             </button>
@@ -176,14 +167,14 @@ defmodule ToweropsWeb.Admin.AuditLive.Index do
               id="audit-clear-filters"
               type="button"
               phx-click="clear_filters"
-              class="inline-flex items-center px-4 py-2 border border-cool-steel-300 dark:border-cool-steel-600 text-sm font-medium rounded-md text-cool-steel-700 dark:text-cool-steel-300 bg-white dark:bg-cool-steel-800 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cerulean-500"
+              class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
             >
               <.icon name="hero-x-mark" class="h-4 w-4 mr-2" /> Clear
             </button>
             <button
               type="button"
               phx-click="export"
-              class="inline-flex items-center px-4 py-2 border border-cool-steel-300 dark:border-cool-steel-600 text-sm font-medium rounded-md text-cool-steel-700 dark:text-cool-steel-300 bg-white dark:bg-cool-steel-800 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cerulean-500"
+              class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
             >
               <.icon name="hero-arrow-down-tray" class="h-4 w-4 mr-2" /> Export CSV
             </button>
@@ -194,45 +185,45 @@ defmodule ToweropsWeb.Admin.AuditLive.Index do
     <!-- Results -->
       <div class="mt-8">
         <%= if Enum.empty?(@audit_logs) do %>
-          <div class="text-center py-12 bg-white dark:bg-cool-steel-900 rounded-lg shadow">
-            <.icon name="hero-document-text" class="mx-auto h-12 w-12 text-cool-steel-400" />
-            <h3 class="mt-2 text-sm font-medium text-cool-steel-900 dark:text-white">
+          <div class="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow">
+            <.icon name="hero-document-text" class="mx-auto h-12 w-12 text-gray-400" />
+            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">
               No audit logs found
             </h3>
-            <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
               Try adjusting your search filters.
             </p>
           </div>
         <% else %>
-          <div class="bg-white dark:bg-cool-steel-900 shadow rounded-lg overflow-hidden">
+          <div class="bg-white dark:bg-gray-900 shadow rounded-lg overflow-hidden">
             <div class="overflow-x-auto">
-              <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-cool-steel-700">
-                <thead class="bg-cool-steel-50 dark:bg-cool-steel-800">
+              <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                <thead class="bg-gray-50 dark:bg-gray-800">
                   <tr>
-                    <th class="px-6 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                       Timestamp
                     </th>
-                    <th class="px-6 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                       Action
                     </th>
-                    <th class="px-6 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                       Actor
                     </th>
-                    <th class="px-6 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                       Target User
                     </th>
-                    <th class="px-6 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                       IP Address
                     </th>
-                    <th class="px-6 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                       Details
                     </th>
                   </tr>
                 </thead>
-                <tbody class="divide-y divide-cool-steel-200 dark:divide-cool-steel-700">
+                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                   <%= for log <- @audit_logs do %>
-                    <tr class="hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800">
-                      <td class="px-6 py-4 whitespace-nowrap text-sm text-cool-steel-900 dark:text-white">
+                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                         {ToweropsWeb.TimeHelpers.format_datetime(
                           log.inserted_at,
                           @current_scope.timezone,
@@ -247,37 +238,37 @@ defmodule ToweropsWeb.Admin.AuditLive.Index do
                           {format_action(log.action)}
                         </span>
                       </td>
-                      <td class="px-6 py-4 whitespace-nowrap text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                         <%= if log.superuser do %>
                           {log.superuser.email}
                         <% else %>
-                          <span class="text-cool-steel-400">System</span>
+                          <span class="text-gray-400">System</span>
                         <% end %>
                       </td>
-                      <td class="px-6 py-4 whitespace-nowrap text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                         <%= if log.target_user do %>
                           {log.target_user.email}
                         <% else %>
-                          <span class="text-cool-steel-400">-</span>
+                          <span class="text-gray-400">-</span>
                         <% end %>
                       </td>
-                      <td class="px-6 py-4 whitespace-nowrap text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                      <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                         {log.ip_address || "-"}
                       </td>
-                      <td class="px-6 py-4 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                      <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
                         <%= if log.request_path do %>
                           <div class="text-xs">
-                            <code class="bg-cool-steel-100 dark:bg-cool-steel-800 px-1 rounded">
+                            <code class="bg-gray-100 dark:bg-gray-800 px-1 rounded">
                               {log.request_path}
                             </code>
                           </div>
                         <% end %>
                         <%= if log.metadata && map_size(log.metadata) > 0 do %>
                           <details class="mt-1">
-                            <summary class="cursor-pointer text-xs text-cerulean-600 dark:text-cerulean-400 hover:underline">
+                            <summary class="cursor-pointer text-xs text-blue-600 dark:text-blue-400 hover:underline">
                               Metadata
                             </summary>
-                            <pre class="mt-1 text-xs bg-cool-steel-100 dark:bg-cool-steel-800 p-2 rounded overflow-x-auto max-w-md">
+                            <pre class="mt-1 text-xs bg-gray-100 dark:bg-gray-800 p-2 rounded overflow-x-auto max-w-md">
                               {Jason.encode!(log.metadata, pretty: true)}
                             </pre>
                           </details>
@@ -290,8 +281,8 @@ defmodule ToweropsWeb.Admin.AuditLive.Index do
             </div>
             
     <!-- Pagination -->
-            <div class="bg-cool-steel-50 dark:bg-cool-steel-800 px-6 py-4 flex items-center justify-between border-t border-cool-steel-200 dark:border-cool-steel-700">
-              <div class="text-sm text-cool-steel-700 dark:text-cool-steel-300">
+            <div class="bg-gray-50 dark:bg-gray-800 px-6 py-4 flex items-center justify-between border-t border-gray-200 dark:border-gray-700">
+              <div class="text-sm text-gray-700 dark:text-gray-300">
                 Page {@page} • Showing {length(@audit_logs)} records
               </div>
               <div class="flex gap-2">
@@ -300,7 +291,7 @@ defmodule ToweropsWeb.Admin.AuditLive.Index do
                   type="button"
                   phx-click="prev_page"
                   disabled={@page == 1}
-                  class="relative inline-flex items-center px-4 py-2 border border-cool-steel-300 dark:border-cool-steel-600 text-sm font-medium rounded-md text-cool-steel-700 dark:text-cool-steel-300 bg-white dark:bg-cool-steel-800 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                  class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   Previous
                 </button>
@@ -309,7 +300,7 @@ defmodule ToweropsWeb.Admin.AuditLive.Index do
                   type="button"
                   phx-click="next_page"
                   disabled={length(@audit_logs) < @per_page}
-                  class="relative inline-flex items-center px-4 py-2 border border-cool-steel-300 dark:border-cool-steel-600 text-sm font-medium rounded-md text-cool-steel-700 dark:text-cool-steel-300 bg-white dark:bg-cool-steel-800 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                  class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   Next
                 </button>
@@ -414,23 +405,12 @@ defmodule ToweropsWeb.Admin.AuditLive.Index do
 
   defp audit_badge_class_for_category(category) do
     case category do
-      :success ->
-        "bg-green-50 text-green-700 ring-green-600/20"
-
-      :warning ->
-        "bg-wheat-50 text-wheat-700 ring-wheat-600/20"
-
-      :danger ->
-        "bg-sweet-salmon-50 text-sweet-salmon-700 ring-sweet-salmon-600/20"
-
-      :impersonation ->
-        "bg-orange-50 text-orange-700 ring-orange-600/20"
-
-      :info ->
-        "bg-cerulean-50 text-cerulean-700 ring-cerulean-600/20"
-
-      :default ->
-        "bg-cool-steel-50 dark:bg-cool-steel-800 text-cool-steel-700 dark:text-cool-steel-300 ring-cool-steel-600/20"
+      :success -> "bg-green-50 text-green-700 ring-green-600/20"
+      :warning -> "bg-yellow-50 text-yellow-700 ring-yellow-600/20"
+      :danger -> "bg-red-50 text-red-700 ring-red-600/20"
+      :impersonation -> "bg-orange-50 text-orange-700 ring-orange-600/20"
+      :info -> "bg-blue-50 text-blue-700 ring-blue-600/20"
+      :default -> "bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 ring-gray-600/20"
     end
   end
 
diff --git a/lib/towerops_web/live/admin/dashboard_live.html.heex b/lib/towerops_web/live/admin/dashboard_live.html.heex
index 86d162ae..9b5d33c3 100644
--- a/lib/towerops_web/live/admin/dashboard_live.html.heex
+++ b/lib/towerops_web/live/admin/dashboard_live.html.heex
@@ -1,123 +1,119 @@
 <Layouts.admin flash={@flash} timezone={@timezone}>
   <div class="space-y-6">
     <div>
-      <h1 class="text-2xl font-bold text-cool-steel-900 dark:text-white">{t("Dashboard")}</h1>
-      <p class="text-cool-steel-600 dark:text-cool-steel-400">
-        System overview and recent activity
-      </p>
+      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{t("Dashboard")}</h1>
+      <p class="text-gray-600 dark:text-gray-400">System overview and recent activity</p>
     </div>
 
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6">
-        <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-2">
-          {t("Users")}
-        </h2>
-        <p class="text-3xl font-bold text-cool-steel-900 dark:text-white">{@user_count}</p>
+      <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-6">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t("Users")}</h2>
+        <p class="text-3xl font-bold text-gray-900 dark:text-white">{@user_count}</p>
         <.link
           navigate={~p"/admin/users"}
-          class="text-cerulean-600 dark:text-cerulean-400 hover:underline text-sm"
+          class="text-blue-600 dark:text-blue-400 hover:underline text-sm"
         >
           View all users →
         </.link>
       </div>
 
-      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6">
-        <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-2">
+      <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-6">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
           {t("Organizations")}
         </h2>
-        <p class="text-3xl font-bold text-cool-steel-900 dark:text-white">{@org_count}</p>
+        <p class="text-3xl font-bold text-gray-900 dark:text-white">{@org_count}</p>
         <.link
           navigate={~p"/admin/organizations"}
-          class="text-cerulean-600 dark:text-cerulean-400 hover:underline text-sm"
+          class="text-blue-600 dark:text-blue-400 hover:underline text-sm"
         >
           View all organizations →
         </.link>
       </div>
 
-      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6">
-        <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-2">
+      <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-6">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
           <.icon name="hero-queue-list" class="w-5 h-5 inline mr-1" /> Oban Dashboard
         </h2>
-        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
           {t("Monitor background jobs and queues")}
         </p>
         <.link
           navigate={~p"/admin/oban"}
-          class="text-cerulean-600 dark:text-cerulean-400 hover:underline text-sm"
+          class="text-blue-600 dark:text-blue-400 hover:underline text-sm"
         >
           Open Oban →
         </.link>
       </div>
 
-      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6">
-        <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-2">
+      <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-6">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
           <.icon name="hero-chart-bar" class="w-5 h-5 inline mr-1" /> LiveDashboard
         </h2>
-        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
           {t("System metrics and performance")}
         </p>
         <.link
           navigate={~p"/admin/dashboard"}
-          class="text-cerulean-600 dark:text-cerulean-400 hover:underline text-sm"
+          class="text-blue-600 dark:text-blue-400 hover:underline text-sm"
         >
           Open Dashboard →
         </.link>
       </div>
 
-      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6">
-        <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-2">
+      <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-6">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
           <.icon name="hero-bug-ant" class="w-5 h-5 inline mr-1" /> Exceptions
         </h2>
-        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
           {t("Tracked errors and exceptions")}
         </p>
         <.link
           navigate={~p"/admin/errors"}
-          class="text-cerulean-600 dark:text-cerulean-400 hover:underline text-sm"
+          class="text-blue-600 dark:text-blue-400 hover:underline text-sm"
         >
           Open Error Tracker →
         </.link>
       </div>
 
-      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6">
-        <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-2">
+      <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-6">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
           <.icon name="hero-cpu-chip" class="w-5 h-5 inline mr-1" /> Job Monitoring
         </h2>
-        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
           {t("Real-time polling and discovery job monitoring")}
         </p>
         <.link
           navigate={~p"/admin/monitoring"}
-          class="text-cerulean-600 dark:text-cerulean-400 hover:underline text-sm"
+          class="text-blue-600 dark:text-blue-400 hover:underline text-sm"
         >
           Open Monitoring →
         </.link>
       </div>
 
-      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6">
-        <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-2">
+      <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-6">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
           <.icon name="hero-server" class="w-5 h-5 inline mr-1" /> All Agents
         </h2>
-        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
           {t("Agents across all organizations and cloud pollers")}
         </p>
         <.link
           navigate={~p"/admin/agents"}
-          class="text-cerulean-600 dark:text-cerulean-400 hover:underline text-sm"
+          class="text-blue-600 dark:text-blue-400 hover:underline text-sm"
         >
           View all agents →
         </.link>
       </div>
     </div>
 
-    <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-      <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10 flex items-center justify-between">
-        <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white">
+    <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+      <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10 flex items-center justify-between">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
           {t("Recent Audit Logs")}
         </h2>
         <.link
           navigate={~p"/admin/audit"}
-          class="text-sm text-cerulean-600 dark:text-cerulean-400 hover:underline"
+          class="text-sm text-blue-600 dark:text-blue-400 hover:underline"
         >
           View all →
         </.link>
diff --git a/lib/towerops_web/live/admin/monitoring_live.ex b/lib/towerops_web/live/admin/monitoring_live.ex
index e40da0e0..9b784d61 100644
--- a/lib/towerops_web/live/admin/monitoring_live.ex
+++ b/lib/towerops_web/live/admin/monitoring_live.ex
@@ -96,9 +96,9 @@ defmodule ToweropsWeb.Admin.MonitoringLive do
   end
 
   defp event_border_color("completed"), do: "border-green-500"
-  defp event_border_color("cancelled"), do: "border-sweet-salmon-500"
-  defp event_border_color("discarded"), do: "border-cool-steel-400"
-  defp event_border_color(_), do: "border-cool-steel-300 dark:border-cool-steel-600"
+  defp event_border_color("cancelled"), do: "border-red-500"
+  defp event_border_color("discarded"), do: "border-gray-400"
+  defp event_border_color(_), do: "border-gray-300 dark:border-gray-600"
 
   defp event_outcome(job) do
     case job.state do
diff --git a/lib/towerops_web/live/admin/monitoring_live.html.heex b/lib/towerops_web/live/admin/monitoring_live.html.heex
index 69d6894f..dcc69770 100644
--- a/lib/towerops_web/live/admin/monitoring_live.html.heex
+++ b/lib/towerops_web/live/admin/monitoring_live.html.heex
@@ -1,93 +1,83 @@
 <Layouts.admin flash={@flash} timezone={@timezone}>
   <div class="space-y-6">
     <div>
-      <h1 class="text-2xl font-bold text-cool-steel-900 dark:text-white">
+      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
         {t("Job Monitoring Dashboard")}
       </h1>
-      <p class="text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="text-gray-600 dark:text-gray-400">
         {t("Real-time monitoring of polling and discovery jobs")}
       </p>
     </div>
     
 <!-- Health Metrics Cards -->
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6">
-        <h3 class="text-sm font-medium text-cool-steel-600 dark:text-cool-steel-400">
-          Completed (1h)
-        </h3>
-        <p class="text-3xl font-bold text-cool-steel-900 dark:text-white mt-2">
+      <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-6">
+        <h3 class="text-sm font-medium text-gray-600 dark:text-gray-400">Completed (1h)</h3>
+        <p class="text-3xl font-bold text-gray-900 dark:text-white mt-2">
           {Map.get(@health_metrics, :completed_last_hour, 0)}
         </p>
-        <p class="text-sm text-cool-steel-500 dark:text-cool-steel-500 mt-1">jobs completed</p>
+        <p class="text-sm text-gray-500 dark:text-gray-500 mt-1">jobs completed</p>
       </div>
 
-      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6">
-        <h3 class="text-sm font-medium text-cool-steel-600 dark:text-cool-steel-400">
-          Failed (1h)
-        </h3>
-        <p class="text-3xl font-bold text-cool-steel-900 dark:text-white mt-2">
+      <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-6">
+        <h3 class="text-sm font-medium text-gray-600 dark:text-gray-400">Failed (1h)</h3>
+        <p class="text-3xl font-bold text-gray-900 dark:text-white mt-2">
           {Map.get(@health_metrics, :failed_last_hour, 0)}
         </p>
-        <p class="text-sm text-cool-steel-500 dark:text-cool-steel-500 mt-1">failures</p>
+        <p class="text-sm text-gray-500 dark:text-gray-500 mt-1">failures</p>
       </div>
 
-      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6">
-        <h3 class="text-sm font-medium text-cool-steel-600 dark:text-cool-steel-400">
-          {t("Avg Duration")}
-        </h3>
-        <p class="text-3xl font-bold text-cool-steel-900 dark:text-white mt-2">
+      <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-6">
+        <h3 class="text-sm font-medium text-gray-600 dark:text-gray-400">{t("Avg Duration")}</h3>
+        <p class="text-3xl font-bold text-gray-900 dark:text-white mt-2">
           <%= if Map.get(@health_metrics, :avg_execution_time_seconds) do %>
             {Map.get(@health_metrics, :avg_execution_time_seconds) |> Float.round(1)}s
           <% else %>
             {t("N/A")}
           <% end %>
         </p>
-        <p class="text-sm text-cool-steel-500 dark:text-cool-steel-500 mt-1">last hour</p>
+        <p class="text-sm text-gray-500 dark:text-gray-500 mt-1">last hour</p>
       </div>
 
-      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6">
-        <h3 class="text-sm font-medium text-cool-steel-600 dark:text-cool-steel-400">
-          {t("Active Jobs")}
-        </h3>
-        <p class="text-3xl font-bold text-cool-steel-900 dark:text-white mt-2">
+      <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-6">
+        <h3 class="text-sm font-medium text-gray-600 dark:text-gray-400">{t("Active Jobs")}</h3>
+        <p class="text-3xl font-bold text-gray-900 dark:text-white mt-2">
           {length(@active_jobs)}
         </p>
-        <p class="text-sm text-cool-steel-500 dark:text-cool-steel-500 mt-1">executing now</p>
+        <p class="text-sm text-gray-500 dark:text-gray-500 mt-1">executing now</p>
       </div>
     </div>
     
 <!-- Active Operations -->
-    <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-4">
-      <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-4">
+    <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-4">
+      <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
         Active Operations ({length(@executing_jobs)})
       </h2>
 
       <%= if length(@executing_jobs) == 0 do %>
-        <p class="text-cool-steel-600 dark:text-cool-steel-400 text-sm">
-          No jobs currently executing
-        </p>
+        <p class="text-gray-600 dark:text-gray-400 text-sm">No jobs currently executing</p>
       <% else %>
         <div class="space-y-3">
           <%= for job <- @executing_jobs do %>
-            <div class="border border-cool-steel-200 dark:border-cool-steel-700 rounded p-3">
+            <div class="border border-gray-200 dark:border-gray-700 rounded p-3">
               <div class="flex items-start justify-between">
                 <div class="flex-1">
-                  <p class="font-medium text-cool-steel-900 dark:text-white">
+                  <p class="font-medium text-gray-900 dark:text-white">
                     <%= if job.device do %>
                       {job.device.name}
                     <% else %>
                       Device #{get_in(job.args, ["device_id"])}
                     <% end %>
                   </p>
-                  <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <p class="text-sm text-gray-600 dark:text-gray-400">
                     {worker_name(job.worker)}
                   </p>
-                  <p class="text-xs text-cool-steel-500 dark:text-cool-steel-500 mt-1">
+                  <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">
                     Started {ToweropsWeb.TimeHelpers.format_time_ago(job.attempted_at)}
                   </p>
                 </div>
                 <div class="flex items-center">
-                  <.icon name="hero-arrow-path" class="w-4 h-4 animate-spin text-cerulean-600" />
+                  <.icon name="hero-arrow-path" class="w-4 h-4 animate-spin text-blue-600" />
                 </div>
               </div>
             </div>
@@ -98,32 +88,32 @@
     
 <!-- Problems -->
     <%= if length(@stuck_jobs) > 0 or length(@failed_jobs) > 0 do %>
-      <div class="bg-sweet-salmon-50 dark:bg-sweet-salmon-900/20 border border-sweet-salmon-200 dark:border-sweet-salmon-800 rounded-lg p-4">
-        <h2 class="text-lg font-semibold text-sweet-salmon-900 dark:text-sweet-salmon-100 mb-4">
+      <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
+        <h2 class="text-lg font-semibold text-red-900 dark:text-red-100 mb-4">
           ⚠️ Problems Detected
         </h2>
 
         <%= if length(@stuck_jobs) > 0 do %>
           <div class="mb-4">
-            <h3 class="font-medium text-sweet-salmon-800 dark:text-sweet-salmon-200 mb-2">
+            <h3 class="font-medium text-red-800 dark:text-red-200 mb-2">
               Stuck Jobs ({length(@stuck_jobs)})
             </h3>
             <div class="space-y-2">
               <%= for job <- @stuck_jobs do %>
-                <div class="bg-white dark:bg-cool-steel-800 rounded p-3 border border-sweet-salmon-300 dark:border-sweet-salmon-700">
+                <div class="bg-white dark:bg-gray-800 rounded p-3 border border-red-300 dark:border-red-700">
                   <div class="flex items-start justify-between">
                     <div>
-                      <p class="font-medium text-cool-steel-900 dark:text-white">
+                      <p class="font-medium text-gray-900 dark:text-white">
                         <%= if job.device do %>
                           {job.device.name}
                         <% else %>
                           Device #{get_in(job.args, ["device_id"])}
                         <% end %>
                       </p>
-                      <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                      <p class="text-sm text-gray-600 dark:text-gray-400">
                         {worker_name(job.worker)}
                       </p>
-                      <p class="text-xs text-sweet-salmon-600 dark:text-sweet-salmon-400 mt-1">
+                      <p class="text-xs text-red-600 dark:text-red-400 mt-1">
                         Running for {duration_in_words(job.attempted_at)}
                       </p>
                     </div>
@@ -136,26 +126,26 @@
 
         <%= if length(@failed_jobs) > 0 do %>
           <div>
-            <h3 class="font-medium text-sweet-salmon-800 dark:text-sweet-salmon-200 mb-2">
+            <h3 class="font-medium text-red-800 dark:text-red-200 mb-2">
               Failed Jobs ({length(@failed_jobs)})
             </h3>
             <div class="space-y-2">
               <%= for job <- Enum.take(@failed_jobs, 5) do %>
-                <div class="bg-white dark:bg-cool-steel-800 rounded p-3 border border-sweet-salmon-300 dark:border-sweet-salmon-700">
+                <div class="bg-white dark:bg-gray-800 rounded p-3 border border-red-300 dark:border-red-700">
                   <div class="flex items-start justify-between">
                     <div>
-                      <p class="font-medium text-cool-steel-900 dark:text-white">
+                      <p class="font-medium text-gray-900 dark:text-white">
                         <%= if job.device do %>
                           {job.device.name}
                         <% else %>
                           Device #{get_in(job.args, ["device_id"])}
                         <% end %>
                       </p>
-                      <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                      <p class="text-sm text-gray-600 dark:text-gray-400">
                         {worker_name(job.worker)} - Attempt {job.attempt}/{job.max_attempts}
                       </p>
                       <%= if job.errors && length(job.errors) > 0 do %>
-                        <p class="text-xs text-sweet-salmon-600 dark:text-sweet-salmon-400 mt-1">
+                        <p class="text-xs text-red-600 dark:text-red-400 mt-1">
                           {hd(job.errors)["error"] || "Unknown error"}
                         </p>
                       <% end %>
@@ -170,38 +160,38 @@
     <% end %>
     
 <!-- Health Metrics -->
-    <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-4">
-      <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-4">
+    <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-4">
+      <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
         {t("Health Metrics")}
       </h2>
       
 <!-- Current Activity -->
       <div class="mb-6">
-        <h3 class="text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300 mb-3">
+        <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
           {t("Current Activity")}
         </h3>
         <div class="grid grid-cols-2 gap-3">
-          <div class="bg-cool-steel-50 dark:bg-cool-steel-800 rounded p-3">
-            <p class="text-xs text-cool-steel-600 dark:text-cool-steel-400">Executing</p>
-            <p class="text-2xl font-bold text-cool-steel-900 dark:text-white">
+          <div class="bg-gray-50 dark:bg-gray-800 rounded p-3">
+            <p class="text-xs text-gray-600 dark:text-gray-400">Executing</p>
+            <p class="text-2xl font-bold text-gray-900 dark:text-white">
               {@metrics.executing_count}
             </p>
           </div>
-          <div class="bg-cool-steel-50 dark:bg-cool-steel-800 rounded p-3">
-            <p class="text-xs text-cool-steel-600 dark:text-cool-steel-400">Queued</p>
-            <p class="text-2xl font-bold text-cool-steel-900 dark:text-white">
+          <div class="bg-gray-50 dark:bg-gray-800 rounded p-3">
+            <p class="text-xs text-gray-600 dark:text-gray-400">Queued</p>
+            <p class="text-2xl font-bold text-gray-900 dark:text-white">
               {@metrics.queued_count}
             </p>
           </div>
-          <div class="bg-cool-steel-50 dark:bg-cool-steel-800 rounded p-3">
-            <p class="text-xs text-cool-steel-600 dark:text-cool-steel-400">Completed (1h)</p>
+          <div class="bg-gray-50 dark:bg-gray-800 rounded p-3">
+            <p class="text-xs text-gray-600 dark:text-gray-400">Completed (1h)</p>
             <p class="text-2xl font-bold text-green-600 dark:text-green-400">
               {@metrics.completed_last_hour}
             </p>
           </div>
-          <div class="bg-cool-steel-50 dark:bg-cool-steel-800 rounded p-3">
-            <p class="text-xs text-cool-steel-600 dark:text-cool-steel-400">Failed (1h)</p>
-            <p class="text-2xl font-bold text-sweet-salmon-600 dark:text-sweet-salmon-400">
+          <div class="bg-gray-50 dark:bg-gray-800 rounded p-3">
+            <p class="text-xs text-gray-600 dark:text-gray-400">Failed (1h)</p>
+            <p class="text-2xl font-bold text-red-600 dark:text-red-400">
               {@metrics.failed_last_hour}
             </p>
           </div>
@@ -210,18 +200,18 @@
       
 <!-- Success Rates -->
       <div class="mb-6">
-        <h3 class="text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300 mb-3">
+        <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
           {t("Success Rates")}
         </h3>
         <div class="space-y-3">
           <div>
             <div class="flex justify-between text-xs mb-1">
-              <span class="text-cool-steel-600 dark:text-cool-steel-400">Polling (1h)</span>
-              <span class="font-medium text-cool-steel-900 dark:text-white">
+              <span class="text-gray-600 dark:text-gray-400">Polling (1h)</span>
+              <span class="font-medium text-gray-900 dark:text-white">
                 {Float.round(@metrics.polling_success_rate_1h * 100, 1)}%
               </span>
             </div>
-            <div class="w-full bg-cool-steel-200 dark:bg-cool-steel-700 rounded-full h-2">
+            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
               <div
                 class="bg-green-600 h-2 rounded-full transition-all"
                 style={"width: #{@metrics.polling_success_rate_1h * 100}%"}
@@ -232,14 +222,14 @@
 
           <div>
             <div class="flex justify-between text-xs mb-1">
-              <span class="text-cool-steel-600 dark:text-cool-steel-400">Discovery (1h)</span>
-              <span class="font-medium text-cool-steel-900 dark:text-white">
+              <span class="text-gray-600 dark:text-gray-400">Discovery (1h)</span>
+              <span class="font-medium text-gray-900 dark:text-white">
                 {Float.round(@metrics.discovery_success_rate_1h * 100, 1)}%
               </span>
             </div>
-            <div class="w-full bg-cool-steel-200 dark:bg-cool-steel-700 rounded-full h-2">
+            <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
               <div
-                class="bg-cerulean-600 h-2 rounded-full transition-all"
+                class="bg-blue-600 h-2 rounded-full transition-all"
                 style={"width: #{@metrics.discovery_success_rate_1h * 100}%"}
               >
               </div>
@@ -250,13 +240,13 @@
       
 <!-- Performance -->
       <div class="mb-6">
-        <h3 class="text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300 mb-3">
+        <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
           {t("Performance")}
         </h3>
         <dl class="space-y-2 text-sm">
           <div class="flex justify-between">
-            <dt class="text-cool-steel-600 dark:text-cool-steel-400">Avg Execution Time</dt>
-            <dd class="font-medium text-cool-steel-900 dark:text-white">
+            <dt class="text-gray-600 dark:text-gray-400">Avg Execution Time</dt>
+            <dd class="font-medium text-gray-900 dark:text-white">
               <%= if @metrics.avg_execution_time_seconds do %>
                 {Float.round(@metrics.avg_execution_time_seconds, 1)}s
               <% else %>
@@ -265,8 +255,8 @@
             </dd>
           </div>
           <div class="flex justify-between">
-            <dt class="text-cool-steel-600 dark:text-cool-steel-400">Jobs/Hour</dt>
-            <dd class="font-medium text-cool-steel-900 dark:text-white">
+            <dt class="text-gray-600 dark:text-gray-400">Jobs/Hour</dt>
+            <dd class="font-medium text-gray-900 dark:text-white">
               {@metrics.completed_last_hour}
             </dd>
           </div>
@@ -275,58 +265,58 @@
       
 <!-- Queue Depths -->
       <div>
-        <h3 class="text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300 mb-3">
+        <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
           {t("Queue Depths")}
         </h3>
         <dl class="space-y-2 text-sm">
           <div class="flex justify-between">
-            <dt class="text-cool-steel-600 dark:text-cool-steel-400">Pollers</dt>
-            <dd class="font-medium text-cool-steel-900 dark:text-white">
+            <dt class="text-gray-600 dark:text-gray-400">Pollers</dt>
+            <dd class="font-medium text-gray-900 dark:text-white">
               {@metrics.queue_depths.pollers}
             </dd>
           </div>
           <div class="flex justify-between">
-            <dt class="text-cool-steel-600 dark:text-cool-steel-400">Discovery</dt>
-            <dd class="font-medium text-cool-steel-900 dark:text-white">
+            <dt class="text-gray-600 dark:text-gray-400">Discovery</dt>
+            <dd class="font-medium text-gray-900 dark:text-white">
               {@metrics.queue_depths.discovery}
             </dd>
           </div>
         </dl>
       </div>
 
-      <div class="mt-4 pt-4 border-t border-cool-steel-200 dark:border-cool-steel-700">
-        <p class="text-xs text-cool-steel-500 dark:text-cool-steel-500">
+      <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <p class="text-xs text-gray-500 dark:text-gray-500">
           {t("Updates every 10 seconds")}
         </p>
       </div>
     </div>
     
 <!-- Recent Activity -->
-    <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-4">
-      <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-4">
+    <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-4">
+      <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
         {t("Recent Activity")}
       </h2>
 
       <%= if length(@recent_events) == 0 do %>
-        <p class="text-cool-steel-600 dark:text-cool-steel-400 text-sm">No recent activity</p>
+        <p class="text-gray-600 dark:text-gray-400 text-sm">No recent activity</p>
       <% else %>
         <div class="space-y-2 max-h-96 overflow-y-auto">
           <%= for job <- Enum.take(@recent_events, 50) do %>
             <div class={"text-sm border-l-2 pl-3 py-2 #{event_border_color(job.state)}"}>
               <div class="flex items-start justify-between">
                 <div class="flex-1">
-                  <p class="font-medium text-cool-steel-900 dark:text-white">
+                  <p class="font-medium text-gray-900 dark:text-white">
                     <%= if job.device do %>
                       {job.device.name}
                     <% else %>
                       Device #{get_in(job.args, ["device_id"])}
                     <% end %>
                   </p>
-                  <p class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                  <p class="text-xs text-gray-600 dark:text-gray-400">
                     {worker_name(job.worker)} · {event_outcome(job)}
                   </p>
                 </div>
-                <span class="text-xs text-cool-steel-500 dark:text-cool-steel-500 whitespace-nowrap ml-2">
+                <span class="text-xs text-gray-500 dark:text-gray-500 whitespace-nowrap ml-2">
                   {ToweropsWeb.TimeHelpers.format_time_ago(
                     job.completed_at || job.cancelled_at || job.discarded_at || job.inserted_at
                   )}
diff --git a/lib/towerops_web/live/admin/org_live/index.html.heex b/lib/towerops_web/live/admin/org_live/index.html.heex
index cc9ab251..c7500bdc 100644
--- a/lib/towerops_web/live/admin/org_live/index.html.heex
+++ b/lib/towerops_web/live/admin/org_live/index.html.heex
@@ -1,12 +1,8 @@
 <Layouts.admin flash={@flash} timezone={@timezone}>
   <div class="space-y-6">
     <div>
-      <h1 class="text-2xl font-bold text-cool-steel-900 dark:text-white">
-        {t("All Organizations")}
-      </h1>
-      <p class="text-cool-steel-600 dark:text-cool-steel-400">
-        {t_admin("Manage organizations")}
-      </p>
+      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{t("All Organizations")}</h1>
+      <p class="text-gray-600 dark:text-gray-400">{t_admin("Manage organizations")}</p>
     </div>
     
 <!-- Global Billing Defaults Card -->
@@ -27,7 +23,7 @@
           type="button"
           phx-click="edit_global_defaults"
           data-test="edit-global-defaults"
-          class="rounded-md bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white hover:bg-cerulean-500"
+          class="rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white hover:bg-blue-500"
         >
           Edit Defaults
         </button>
@@ -57,7 +53,7 @@
       </dl>
     </div>
 
-    <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
+    <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
       <.table id="organizations" rows={@organizations}>
         <:col :let={org} label={t("Name")}>{org.name}</:col>
         <:col :let={org} label={t("Slug")}>{org.slug}</:col>
@@ -66,8 +62,7 @@
             "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
             if(org.subscription_plan == "paid",
               do: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
-              else:
-                "bg-cool-steel-100 text-cool-steel-700 dark:bg-cool-steel-700 dark:text-cool-steel-300"
+              else: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300"
             )
           ]}>
             {org.subscription_plan}
@@ -80,7 +75,7 @@
           <%= if org.custom_free_device_limit || org.custom_price_per_device do %>
             <div class="flex flex-wrap gap-1">
               <%= if org.custom_free_device_limit do %>
-                <span class="inline-flex items-center rounded-full bg-cerulean-100 px-2 py-0.5 text-xs font-medium text-cerulean-700 dark:bg-cerulean-900/30 dark:text-cerulean-400">
+                <span class="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
                   {org.custom_free_device_limit} {t("free")}
                 </span>
               <% end %>
@@ -91,9 +86,7 @@
               <% end %>
             </div>
           <% else %>
-            <span class="text-cool-steel-400 dark:text-cool-steel-500 text-xs">
-              {t("Default")}
-            </span>
+            <span class="text-gray-400 dark:text-gray-500 text-xs">{t("Default")}</span>
           <% end %>
         </:col>
         <:col :let={org} label={t("Members")}>{length(org.memberships)}</:col>
@@ -129,15 +122,15 @@
 
     <%!-- Billing Override Edit Panel --%>
     <%= if @editing_org do %>
-      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6">
+      <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-6">
         <div class="flex items-center justify-between mb-4">
-          <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white">
+          <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
             {t_admin("Billing Overrides")} — {@editing_org.name}
           </h2>
           <button
             id="cancel-overrides-btn"
             phx-click="cancel_overrides"
-            class="text-sm text-cool-steel-500 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:text-cool-steel-200"
+            class="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
           >
             {t("Cancel")}
           </button>
@@ -177,7 +170,7 @@
               id="clear-overrides-btn"
               type="button"
               phx-click="clear_overrides"
-              class="text-sm text-cool-steel-600 hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-cool-steel-200"
+              class="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
             >
               {t_admin("Reset to Defaults")}
             </button>
@@ -219,12 +212,12 @@
                   type="number"
                   name="global_pricing[default_free_devices]"
                   value={@global_form.data["default_free_devices"]}
-                  class="mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-cerulean-500 focus:ring-cerulean-500 dark:border-slate-600 dark:bg-slate-700"
+                  class="mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-slate-600 dark:bg-slate-700"
                 />
                 <%= if error = @global_form.errors[:default_free_devices] do %>
                   <p
                     id="global_pricing_default_free_devices-error"
-                    class="mt-1 text-sm text-sweet-salmon-600"
+                    class="mt-1 text-sm text-red-600"
                   >
                     {elem(error, 0)}
                   </p>
@@ -240,12 +233,12 @@
                   step="0.01"
                   name="global_pricing[default_price_per_device]"
                   value={@global_form.data["default_price_per_device"]}
-                  class="mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-cerulean-500 focus:ring-cerulean-500 dark:border-slate-600 dark:bg-slate-700"
+                  class="mt-1 block w-full rounded-md border-slate-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-slate-600 dark:bg-slate-700"
                 />
                 <%= if error = @global_form.errors[:default_price_per_device] do %>
                   <p
                     id="global_pricing_default_price_per_device-error"
-                    class="mt-1 text-sm text-sweet-salmon-600"
+                    class="mt-1 text-sm text-red-600"
                   >
                     {elem(error, 0)}
                   </p>
@@ -263,7 +256,7 @@
                 </button>
                 <button
                   type="submit"
-                  class="rounded-md bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white hover:bg-cerulean-500"
+                  class="rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white hover:bg-blue-500"
                 >
                   Save Changes
                 </button>
@@ -296,7 +289,7 @@
                       type="button"
                       phx-click="confirm_pricing_update"
                       data-test="confirm-pricing-update"
-                      class="rounded-md bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white hover:bg-cerulean-500"
+                      class="rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white hover:bg-blue-500"
                     >
                       Confirm Update
                     </button>
diff --git a/lib/towerops_web/live/admin/security_live/index.html.heex b/lib/towerops_web/live/admin/security_live/index.html.heex
index 5ba4ba0e..d98bb000 100644
--- a/lib/towerops_web/live/admin/security_live/index.html.heex
+++ b/lib/towerops_web/live/admin/security_live/index.html.heex
@@ -1,16 +1,14 @@
 <Layouts.admin flash={@flash} timezone={@timezone}>
   <div class="space-y-6">
     <div>
-      <h1 class="text-2xl font-bold text-cool-steel-900 dark:text-white">
-        {t("IP Access Control")}
-      </h1>
-      <p class="text-cool-steel-600 dark:text-cool-steel-400">
+      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{t("IP Access Control")}</h1>
+      <p class="text-gray-600 dark:text-gray-400">
         {t("Manage IP allowlist and view denied IPs")}
       </p>
     </div>
     
 <!-- Tabs -->
-    <div class="border-b border-cool-steel-200 dark:border-white/10">
+    <div class="border-b border-gray-200 dark:border-white/10">
       <nav class="-mb-px flex space-x-8">
         <button
           id="security-tab-whitelist"
@@ -19,9 +17,9 @@
           class={[
             "border-b-2 py-4 px-1 text-sm font-medium",
             if(@current_tab == "whitelist",
-              do: "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400",
+              do: "border-blue-500 text-blue-600 dark:text-blue-400",
               else:
-                "border-transparent text-cool-steel-500 hover:border-cool-steel-300 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:text-cool-steel-300"
+                "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
             )
           ]}
         >
@@ -35,9 +33,9 @@
           class={[
             "border-b-2 py-4 px-1 text-sm font-medium",
             if(@current_tab == "blocked",
-              do: "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400",
+              do: "border-blue-500 text-blue-600 dark:text-blue-400",
               else:
-                "border-transparent text-cool-steel-500 hover:border-cool-steel-300 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:text-cool-steel-300"
+                "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
             )
           ]}
         >
@@ -50,7 +48,7 @@
     <%= if @current_tab == "whitelist" do %>
       <div class="space-y-4">
         <div class="flex justify-between items-center">
-          <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white">
+          <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
             {t("Allowed IPs and CIDR Ranges")}
           </h2>
           <.button id="show-whitelist-form" phx-click="show_whitelist_form">
@@ -59,7 +57,7 @@
         </div>
 
         <%= if @show_whitelist_form do %>
-          <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6">
+          <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-6">
             <.form
               for={@whitelist_form}
               phx-submit="add_whitelist"
@@ -92,9 +90,9 @@
           </div>
         <% end %>
 
-        <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
+        <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
           <%= if Enum.empty?(@whitelist) do %>
-            <div class="p-8 text-center text-cool-steel-500 dark:text-cool-steel-400">
+            <div class="p-8 text-center text-gray-500 dark:text-gray-400">
               {t("No allowed IPs or CIDR ranges")}
             </div>
           <% else %>
@@ -105,7 +103,7 @@
                 <%= if entry.added_by do %>
                   {entry.added_by.email}
                 <% else %>
-                  <span class="text-cool-steel-400">Unknown</span>
+                  <span class="text-gray-400">Unknown</span>
                 <% end %>
               </:col>
               <:col :let={entry} label={t("Added")}>
@@ -130,16 +128,16 @@
     <%= if @current_tab == "blocked" do %>
       <div class="space-y-4">
         <div class="flex justify-between items-center">
-          <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white">
+          <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
             {t("Denied IP Addresses")}
           </h2>
 
           <div class="flex items-center gap-2">
-            <label class="text-sm text-cool-steel-600 dark:text-cool-steel-400">Filter:</label>
+            <label class="text-sm text-gray-600 dark:text-gray-400">Filter:</label>
             <select
               phx-change="change_filter"
               name="filter"
-              class="rounded-md border-cool-steel-300 dark:border-white/10 dark:bg-cool-steel-900 text-sm"
+              class="rounded-md border-gray-300 dark:border-white/10 dark:bg-gray-900 text-sm"
             >
               <option value="all" selected={@filter == "all"}>All Bans</option>
               <option value="permanent" selected={@filter == "permanent"}>Permanent Only</option>
@@ -148,9 +146,9 @@
           </div>
         </div>
 
-        <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
+        <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
           <%= if Enum.empty?(@blocked_ips) do %>
-            <div class="p-8 text-center text-cool-steel-500 dark:text-cool-steel-400">
+            <div class="p-8 text-center text-gray-500 dark:text-gray-400">
               {t("No denied IPs")}
             </div>
           <% else %>
@@ -161,13 +159,13 @@
                   "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium",
                   case block.offense_count do
                     1 ->
-                      "bg-wheat-100 text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400"
+                      "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"
 
                     2 ->
                       "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400"
 
                     _ ->
-                      "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"
+                      "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
                   end
                 ]}>
                   {block.offense_count}
@@ -175,11 +173,11 @@
               </:col>
               <:col :let={block} label={t("Status")}>
                 <%= if Towerops.Security.IpBlock.permanent?(block) do %>
-                  <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400">
+                  <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400">
                     {t("Permanent")}
                   </span>
                 <% else %>
-                  <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-wheat-100 text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400">
+                  <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
                     {Towerops.Security.IpBlock.ban_duration(block)}
                   </span>
                 <% end %>
@@ -188,7 +186,7 @@
                 {ToweropsWeb.TimeHelpers.format_time_ago(block.last_violation_at)}
               </:col>
               <:col :let={block} label={t("Reason")}>
-                <div class="text-sm text-cool-steel-600 dark:text-cool-steel-400 max-w-xs truncate">
+                <div class="text-sm text-gray-600 dark:text-gray-400 max-w-xs truncate">
                   {block.reason}
                 </div>
               </:col>
@@ -199,7 +197,7 @@
                   data-confirm={
                     t("Unblock this IP address? This will remove all offense history.")
                   }
-                  class="text-sm text-cerulean-600 dark:text-cerulean-400 hover:text-cerulean-800 dark:hover:text-cerulean-300"
+                  class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
                 >
                   {t("Unblock")}
                 </button>
diff --git a/lib/towerops_web/live/admin/user_live/index.html.heex b/lib/towerops_web/live/admin/user_live/index.html.heex
index 58864516..9d1bef46 100644
--- a/lib/towerops_web/live/admin/user_live/index.html.heex
+++ b/lib/towerops_web/live/admin/user_live/index.html.heex
@@ -1,11 +1,11 @@
 <Layouts.admin flash={@flash} timezone={@timezone}>
   <div class="space-y-6">
     <div>
-      <h1 class="text-2xl font-bold text-cool-steel-900 dark:text-white">{t("All Users")}</h1>
-      <p class="text-cool-steel-600 dark:text-cool-steel-400">Manage system users</p>
+      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{t("All Users")}</h1>
+      <p class="text-gray-600 dark:text-gray-400">Manage system users</p>
     </div>
 
-    <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
+    <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
       <.table id="users" rows={@users}>
         <:col :let={user} label={t("Email")}>{user.email}</:col>
         <:col :let={user} label={t("Superuser")}>
@@ -23,7 +23,7 @@
               <button
                 type="submit"
                 disabled={user.id == @current_scope.user.id}
-                class="text-sm text-cerulean-600 dark:text-cerulean-400 hover:text-cerulean-800 dark:hover:text-cerulean-300 disabled:text-cool-steel-400 disabled:cursor-not-allowed"
+                class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 disabled:text-gray-400 disabled:cursor-not-allowed"
               >
                 {t("Impersonate")}
               </button>
diff --git a/lib/towerops_web/live/agent_live/edit.html.heex b/lib/towerops_web/live/agent_live/edit.html.heex
index 7dae5585..e3f87768 100644
--- a/lib/towerops_web/live/agent_live/edit.html.heex
+++ b/lib/towerops_web/live/agent_live/edit.html.heex
@@ -3,18 +3,18 @@
     <div class="mb-6">
       <.link
         navigate={~p"/agents/#{@agent_token.id}"}
-        class="text-sm font-medium text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+        class="text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
       >
         <span class="hero-arrow-left h-4 w-4 inline"></span> Back to agent
       </.link>
     </div>
 
-    <div class="bg-white dark:bg-cool-steel-800/50 shadow rounded-lg">
-      <div class="px-6 py-5 border-b border-cool-steel-200 dark:border-white/10">
-        <h3 class="text-lg font-medium text-cool-steel-900 dark:text-white">
+    <div class="bg-white dark:bg-gray-800/50 shadow rounded-lg">
+      <div class="px-6 py-5 border-b border-gray-200 dark:border-white/10">
+        <h3 class="text-lg font-medium text-gray-900 dark:text-white">
           {t("Edit Agent")}
         </h3>
-        <p class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
           {t("Update the agent name. The authentication token cannot be changed.")}
         </p>
       </div>
@@ -35,7 +35,7 @@
               placeholder="e.g., Datacenter Agent"
               required
             />
-            <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
               {t("A descriptive name to identify this agent in your organization.")}
             </p>
           </div>
@@ -49,9 +49,9 @@
 
             <div
               :if={@form[:allow_remote_debug].value}
-              class="rounded-md bg-wheat-50 dark:bg-wheat-900/20 p-3 mt-2"
+              class="rounded-md bg-amber-50 dark:bg-amber-900/20 p-3 mt-2"
             >
-              <div class="flex items-start gap-2 text-wheat-800 dark:text-wheat-200">
+              <div class="flex items-start gap-2 text-amber-800 dark:text-amber-200">
                 <.icon name="hero-exclamation-triangle" class="h-5 w-5 flex-shrink-0 mt-0.5" />
                 <div class="text-sm">
                   <p class="font-medium">Performance Impact</p>
@@ -65,7 +65,7 @@
               </div>
             </div>
 
-            <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
               {t("Enable verbose logging for troubleshooting SNMP discovery and polling issues.")}
               {t("Only organization members can toggle this setting.")}
             </p>
@@ -75,7 +75,7 @@
         <div class="mt-6 flex items-center justify-end gap-x-4">
           <.link
             navigate={~p"/agents/#{@agent_token.id}"}
-            class="text-sm font-semibold text-cool-steel-700 dark:text-cool-steel-300 hover:text-cool-steel-900 dark:hover:text-white"
+            class="text-sm font-semibold text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
           >
             {t("Cancel")}
           </.link>
diff --git a/lib/towerops_web/live/agent_live/helpers.ex b/lib/towerops_web/live/agent_live/helpers.ex
index 25ae85a9..460e69a2 100644
--- a/lib/towerops_web/live/agent_live/helpers.ex
+++ b/lib/towerops_web/live/agent_live/helpers.ex
@@ -34,9 +34,9 @@ defmodule ToweropsWeb.AgentLive.Helpers do
   def status_badge_class(status) do
     case status do
       :online -> "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
-      :warning -> "bg-wheat-100 text-wheat-800 dark:bg-wheat-900 dark:text-wheat-300"
-      :offline -> "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900 dark:text-sweet-salmon-300"
-      :never -> "bg-cool-steel-100 text-cool-steel-800 dark:bg-cool-steel-800 dark:text-cool-steel-300"
+      :warning -> "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300"
+      :offline -> "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300"
+      :never -> "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300"
     end
   end
 
@@ -47,9 +47,9 @@ defmodule ToweropsWeb.AgentLive.Helpers do
   def status_dot_class(status) do
     case status do
       :online -> "bg-green-600 dark:bg-green-400 animate-pulse"
-      :warning -> "bg-wheat-600 dark:bg-wheat-400"
-      :offline -> "bg-sweet-salmon-600 dark:bg-sweet-salmon-400"
-      :never -> "bg-cool-steel-400 dark:bg-cool-steel-600"
+      :warning -> "bg-yellow-600 dark:bg-yellow-400"
+      :offline -> "bg-red-600 dark:bg-red-400"
+      :never -> "bg-gray-400 dark:bg-gray-600"
     end
   end
 
diff --git a/lib/towerops_web/live/agent_live/index.html.heex b/lib/towerops_web/live/agent_live/index.html.heex
index 5bf9fb08..b74c69cf 100644
--- a/lib/towerops_web/live/agent_live/index.html.heex
+++ b/lib/towerops_web/live/agent_live/index.html.heex
@@ -16,8 +16,8 @@
   
 <!-- New Agent Form -->
   <div id="new-agent-form" class="hidden mt-6">
-    <div class="bg-white dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg p-6">
-      <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-4">
+    <div class="bg-white dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg p-6">
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
         {t("Create New Agent")}
       </h3>
       <.form id="create-agent-form" for={@agent_form} phx-submit="create_agent">
@@ -43,7 +43,7 @@
             <button
               type="button"
               phx-click={JS.hide(to: "#new-agent-form")}
-              class="px-3 py-2 text-sm font-semibold text-cool-steel-700 dark:text-cool-steel-300 hover:text-cool-steel-900 dark:hover:text-white"
+              class="px-3 py-2 text-sm font-semibold text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
             >
               {t("Cancel")}
             </button>
@@ -55,14 +55,9 @@
 
   <%= if !@has_agents do %>
     <div class="text-center py-16">
-      <.icon
-        name="hero-server"
-        class="mx-auto h-12 w-12 text-cool-steel-400 dark:text-cool-steel-500"
-      />
-      <h3 class="mt-4 text-lg font-semibold text-cool-steel-900 dark:text-white">
-        {t("No agents")}
-      </h3>
-      <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <.icon name="hero-server" class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" />
+      <h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-white">{t("No agents")}</h3>
+      <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
         {t("Get started by creating your first remote agent.")}
       </p>
       <div class="mt-6">
@@ -87,7 +82,7 @@
               </span>
             <% end %>
             <%= if agent.allow_remote_debug do %>
-              <span class="inline-flex items-center gap-1 rounded-full bg-wheat-50 dark:bg-wheat-900/30 px-2 py-0.5 text-xs font-medium text-wheat-700 dark:text-wheat-300 ring-1 ring-inset ring-wheat-600/20 dark:ring-wheat-400/30">
+              <span class="inline-flex items-center gap-1 rounded-full bg-amber-50 dark:bg-amber-900/30 px-2 py-0.5 text-xs font-medium text-amber-700 dark:text-amber-300 ring-1 ring-inset ring-amber-600/20 dark:ring-amber-400/30">
                 <.icon name="hero-bug-ant" class="h-3 w-3" /> Debug
               </span>
             <% end %>
@@ -104,10 +99,10 @@
 
         <:col :let={{_id, agent}} label={t("Device")}>
           <% counts = Map.get(@device_counts, agent.id, %{direct: 0, total: 0}) %>
-          <div class="text-sm text-cool-steel-900 dark:text-white">
+          <div class="text-sm text-gray-900 dark:text-white">
             {counts.total} total
           </div>
-          <div class="text-xs text-cool-steel-500 dark:text-cool-steel-400 mt-0.5">
+          <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
             {counts.direct} direct
             <%= if counts.total > counts.direct do %>
               · {counts.total - counts.direct} inherited
@@ -116,16 +111,16 @@
         </:col>
 
         <:col :let={{_id, agent}} label={t("Last Seen")}>
-          <div class="text-sm text-cool-steel-900 dark:text-white">
+          <div class="text-sm text-gray-900 dark:text-white">
             <.timestamp datetime={agent.last_seen_at} timezone={@timezone} now={@now} />
           </div>
           <%= if agent.last_seen_at do %>
-            <div class="text-xs text-cool-steel-500 dark:text-cool-steel-400 mt-0.5">
+            <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
               <.timestamp datetime={agent.last_seen_at} timezone={@timezone} format="absolute" />
             </div>
           <% end %>
           <%= if agent.last_ip do %>
-            <div class="text-xs text-cool-steel-500 dark:text-cool-steel-400 mt-0.5 font-mono">
+            <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5 font-mono">
               {agent.last_ip}
             </div>
           <% end %>
@@ -133,14 +128,14 @@
 
         <:col :let={{_id, agent}} label={t("Version")}>
           <%= if agent.metadata["version"] do %>
-            <div class="text-sm text-cool-steel-600 dark:text-cool-steel-400 font-mono">
+            <div class="text-sm text-gray-600 dark:text-gray-400 font-mono">
               {format_agent_version(agent.metadata["version"])}
             </div>
           <% end %>
         </:col>
 
         <:col :let={{_id, agent}} label={t("Created")}>
-          <div class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+          <div class="text-sm text-gray-600 dark:text-gray-400">
             {ToweropsWeb.TimeHelpers.format_date(agent.inserted_at, @timezone)}
           </div>
         </:col>
@@ -173,7 +168,7 @@
               </.button>
             </div>
           <% else %>
-            <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400">Disabled</span>
+            <span class="text-xs text-gray-500 dark:text-gray-400">Disabled</span>
           <% end %>
         </:action>
       </.table>
@@ -183,10 +178,10 @@
   <%!-- Cloud Pollers Section (Superadmin Only) --%>
   <%= if @is_superuser && @has_cloud_pollers do %>
     <div class="mt-12">
-      <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-4">
+      <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
         {t("Cloud Pollers")}
       </h2>
-      <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+      <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
         {t(
           "Application-wide agents that can poll devices for any organization. Only visible and manageable by superadmins."
         )}
@@ -206,7 +201,7 @@
                 </span>
               <% end %>
               <%= if agent.allow_remote_debug do %>
-                <span class="inline-flex items-center gap-1 rounded-full bg-wheat-50 dark:bg-wheat-900/30 px-2 py-0.5 text-xs font-medium text-wheat-700 dark:text-wheat-300 ring-1 ring-inset ring-wheat-600/20 dark:ring-wheat-400/30">
+                <span class="inline-flex items-center gap-1 rounded-full bg-amber-50 dark:bg-amber-900/30 px-2 py-0.5 text-xs font-medium text-amber-700 dark:text-amber-300 ring-1 ring-inset ring-amber-600/20 dark:ring-amber-400/30">
                   <.icon name="hero-bug-ant" class="h-3 w-3" /> Debug
                 </span>
               <% end %>
@@ -223,10 +218,10 @@
 
           <:col :let={{_id, agent}} label={t("Device")}>
             <% counts = Map.get(@cloud_poller_counts, agent.id, %{direct: 0, total: 0}) %>
-            <div class="text-sm text-cool-steel-900 dark:text-white">
+            <div class="text-sm text-gray-900 dark:text-white">
               {counts.total} total
             </div>
-            <div class="text-xs text-cool-steel-500 dark:text-cool-steel-400 mt-0.5">
+            <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
               {counts.direct} direct
               <%= if counts.total > counts.direct do %>
                 · {counts.total - counts.direct} inherited
@@ -235,16 +230,16 @@
           </:col>
 
           <:col :let={{_id, agent}} label={t("Last Seen")}>
-            <div class="text-sm text-cool-steel-900 dark:text-white">
+            <div class="text-sm text-gray-900 dark:text-white">
               <.timestamp datetime={agent.last_seen_at} timezone={@timezone} now={@now} />
             </div>
             <%= if agent.last_seen_at do %>
-              <div class="text-xs text-cool-steel-500 dark:text-cool-steel-400 mt-0.5">
+              <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                 <.timestamp datetime={agent.last_seen_at} timezone={@timezone} format="absolute" />
               </div>
             <% end %>
             <%= if agent.last_ip do %>
-              <div class="text-xs text-cool-steel-500 dark:text-cool-steel-400 mt-0.5 font-mono">
+              <div class="text-xs text-gray-500 dark:text-gray-400 mt-0.5 font-mono">
                 {agent.last_ip}
               </div>
             <% end %>
@@ -252,14 +247,14 @@
 
           <:col :let={{_id, agent}} label={t("Version")}>
             <%= if agent.metadata["version"] do %>
-              <div class="text-sm text-cool-steel-600 dark:text-cool-steel-400 font-mono">
+              <div class="text-sm text-gray-600 dark:text-gray-400 font-mono">
                 {format_agent_version(agent.metadata["version"])}
               </div>
             <% end %>
           </:col>
 
           <:col :let={{_id, agent}} label={t("Created")}>
-            <div class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+            <div class="text-sm text-gray-600 dark:text-gray-400">
               {ToweropsWeb.TimeHelpers.format_date(agent.inserted_at, @timezone)}
             </div>
           </:col>
@@ -292,7 +287,7 @@
                 </.button>
               </div>
             <% else %>
-              <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400">Disabled</span>
+              <span class="text-xs text-gray-500 dark:text-gray-400">Disabled</span>
             <% end %>
           </:action>
         </.table>
@@ -303,11 +298,11 @@
   <%!-- Global Default Cloud Poller (Superadmin Only) --%>
   <%= if @is_superuser do %>
     <div class="mt-8">
-      <div class="bg-wheat-50 dark:bg-wheat-900/10 border border-wheat-200 dark:border-wheat-800/30 rounded-lg p-6">
-        <h3 class="text-lg font-semibold text-wheat-900 dark:text-wheat-200 mb-2">
+      <div class="bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-800/30 rounded-lg p-6">
+        <h3 class="text-lg font-semibold text-amber-900 dark:text-amber-200 mb-2">
           {t("Global Default Cloud Poller")}
         </h3>
-        <p class="text-sm text-wheat-700 dark:text-wheat-300 mb-4">
+        <p class="text-sm text-amber-700 dark:text-amber-300 mb-4">
           {t(
             "Fallback agent for organizations without a default agent configured. Devices with no assignment at any level will use this agent."
           )}
@@ -321,13 +316,13 @@
         >
           <div class="space-y-4">
             <div>
-              <label class="block text-sm font-medium text-wheat-900 dark:text-wheat-200 mb-2">
+              <label class="block text-sm font-medium text-amber-900 dark:text-amber-200 mb-2">
                 {t("Select Global Default")}
               </label>
               <select
                 name="agent_token_id"
                 value={@selected_global_default}
-                class="block w-full rounded-md border-wheat-300 dark:border-wheat-700 bg-white dark:bg-cool-steel-900 text-cool-steel-900 dark:text-white shadow-sm focus:border-wheat-500 focus:ring-wheat-500 sm:text-sm"
+                class="block w-full rounded-md border-amber-300 dark:border-amber-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow-sm focus:border-amber-500 focus:ring-amber-500 sm:text-sm"
               >
                 <option value="">No global default (direct Phoenix polling)</option>
                 <%= for cloud_poller <- @cloud_pollers_list do %>
@@ -345,18 +340,18 @@
               <% selected_poller =
                 Enum.find(@cloud_pollers_list, &(&1.id == @global_default_cloud_poller_id)) %>
               <%= if selected_poller do %>
-                <p class="text-xs text-wheat-600 dark:text-wheat-400">
+                <p class="text-xs text-amber-600 dark:text-amber-400">
                   <.icon name="hero-check-circle" class="h-4 w-4 inline" /> Currently using:
                   <span class="font-medium">{selected_poller.name}</span>
                 </p>
               <% else %>
-                <p class="text-xs text-sweet-salmon-600 dark:text-sweet-salmon-400">
+                <p class="text-xs text-red-600 dark:text-red-400">
                   <.icon name="hero-exclamation-triangle" class="h-4 w-4 inline" />
                   {t("Warning: Selected agent no longer exists. Please choose a new agent.")}
                 </p>
               <% end %>
             <% else %>
-              <p class="text-xs text-wheat-600 dark:text-wheat-400">
+              <p class="text-xs text-amber-600 dark:text-amber-400">
                 <.icon name="hero-information-circle" class="h-4 w-4 inline" />
                 {t(
                   "No global default configured. Devices without assignments will use direct Phoenix cluster polling."
@@ -382,7 +377,7 @@
                       value: %{agent_token_id: @global_default_cloud_poller_id || ""}
                     )
                   }
-                  class="px-3 py-2 text-sm font-semibold text-cool-steel-700 dark:text-cool-steel-300 hover:text-cool-steel-900 dark:hover:text-white"
+                  class="px-3 py-2 text-sm font-semibold text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
                 >
                   {t("Cancel")}
                 </button>
@@ -403,26 +398,26 @@
     >
       <div class="flex min-h-screen items-center justify-center p-4">
         <div
-          class="fixed inset-0 bg-cool-steel-500/75 dark:bg-cool-steel-950/75 transition-opacity"
+          class="fixed inset-0 bg-gray-500/75 dark:bg-gray-950/75 transition-opacity"
           phx-click="close_token_modal"
         >
         </div>
 
-        <div class="relative bg-white dark:bg-cool-steel-900 rounded-lg shadow-xl max-w-2xl w-full">
+        <div class="relative bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-2xl w-full">
           <div class="p-6">
             <div class="flex items-start justify-between mb-4">
               <div>
-                <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                   {t("Agent Setup Instructions")}
                 </h3>
-                <p class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                   {t("Use the token and Docker Compose configuration below to deploy this agent.")}
                 </p>
               </div>
               <button
                 type="button"
                 phx-click="close_token_modal"
-                class="text-cool-steel-400 hover:text-cool-steel-600 dark:hover:text-cool-steel-300"
+                class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
               >
                 <.icon name="hero-x-mark" class="h-6 w-6" />
               </button>
@@ -430,16 +425,16 @@
 
             <div class="space-y-4">
               <div>
-                <label class="block text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300 mb-2">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                   {t("Agent Name")}
                 </label>
-                <div class="text-base font-mono text-cool-steel-900 dark:text-white">
+                <div class="text-base font-mono text-gray-900 dark:text-white">
                   {@new_token.agent_token.name}
                 </div>
               </div>
 
               <div>
-                <label class="block text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300 mb-2">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                   {t("Authentication Token")}
                 </label>
                 <div class="relative">
@@ -447,7 +442,7 @@
                     type="text"
                     readonly
                     value={String.trim(@new_token.token)}
-                    class="w-full font-mono text-sm bg-cool-steel-50 dark:bg-cool-steel-800 border border-cool-steel-300 dark:border-cool-steel-700 rounded px-3 py-2 pr-28 text-cool-steel-900 dark:text-white select-all"
+                    class="w-full font-mono text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded px-3 py-2 pr-28 text-gray-900 dark:text-white select-all"
                     id="agent-token-input"
                     onclick="this.select()"
                   />
@@ -457,27 +452,27 @@
                     phx-update="ignore"
                     data-target="#agent-token-input"
                     id={"copy-token-#{@new_token.agent_token.id}"}
-                    class="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1.5 text-xs font-medium text-white bg-cerulean-600 hover:bg-cerulean-700 dark:bg-cerulean-500 dark:hover:bg-cerulean-600 rounded shadow-sm transition-colors flex items-center gap-1.5"
+                    class="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 rounded shadow-sm transition-colors flex items-center gap-1.5"
                   >
                     <.icon name="hero-clipboard" class="h-3.5 w-3.5" />
                     <span>{t("Copy")}</span>
                   </button>
                 </div>
-                <p class="mt-1.5 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                   {t("Click the token to select all, or use the Copy button")}
                 </p>
               </div>
 
-              <div class="bg-cool-steel-50 dark:bg-cool-steel-800 border border-cool-steel-200 dark:border-cool-steel-700 rounded-lg p-4">
-                <h4 class="text-sm font-medium text-cool-steel-900 dark:text-white mb-2">
+              <div class="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                <h4 class="text-sm font-medium text-gray-900 dark:text-white mb-2">
                   {t("Docker Compose Setup with Auto-Updates")}
                 </h4>
-                <p class="text-xs text-cool-steel-600 dark:text-cool-steel-400 mb-3">
+                <p class="text-xs text-gray-600 dark:text-gray-400 mb-3">
                   {t(
                     "This configuration includes Watchtower for automatic agent updates. The agent will automatically update to the latest version every 12 hours."
                   )}
                 </p>
-                <pre class="text-xs font-mono text-cool-steel-600 dark:text-cool-steel-400 overflow-x-auto"><code>services:
+                <pre class="text-xs font-mono text-gray-600 dark:text-gray-400 overflow-x-auto"><code>services:
   towerops-agent:
     image: {@agent_image}
     container_name: towerops-agent
@@ -510,7 +505,7 @@
                   phx-update="ignore"
                   data-target="#docker-compose-example"
                   id={"copy-docker-compose-#{@new_token.agent_token.id}"}
-                  class="inline-flex items-center px-2.5 py-1.5 text-xs font-medium text-white bg-cool-steel-700 hover:bg-cool-steel-600 dark:bg-cool-steel-600 dark:hover:bg-cool-steel-500 rounded transition-colors"
+                  class="inline-flex items-center px-2.5 py-1.5 text-xs font-medium text-white bg-gray-700 hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500 rounded transition-colors"
                 >
                   <.icon name="hero-clipboard" class="h-3 w-3" /> Copy to clipboard
                 </button>
diff --git a/lib/towerops_web/live/agent_live/show.ex b/lib/towerops_web/live/agent_live/show.ex
index 7fc7ab3f..86bd65e1 100644
--- a/lib/towerops_web/live/agent_live/show.ex
+++ b/lib/towerops_web/live/agent_live/show.ex
@@ -116,10 +116,10 @@ defmodule ToweropsWeb.AgentLive.Show do
 
   defp source_badge_class(source) do
     case source do
-      :direct -> "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900 dark:text-cerulean-300"
+      :direct -> "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300"
       :site -> "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300"
-      :organization -> "bg-wheat-100 text-wheat-800 dark:bg-wheat-900 dark:text-wheat-300"
-      :unknown -> "bg-cool-steel-100 text-cool-steel-800 dark:bg-cool-steel-800 dark:text-cool-steel-300"
+      :organization -> "bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300"
+      :unknown -> "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300"
     end
   end
 end
diff --git a/lib/towerops_web/live/agent_live/show.html.heex b/lib/towerops_web/live/agent_live/show.html.heex
index 9ccc9747..848d00c3 100644
--- a/lib/towerops_web/live/agent_live/show.html.heex
+++ b/lib/towerops_web/live/agent_live/show.html.heex
@@ -29,21 +29,21 @@
             "Are you sure you want to restart this agent? It will disconnect and restart its container."
           )
         }
-        class="inline-flex items-center gap-2 rounded-lg px-3.5 py-2.5 text-sm font-semibold shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 bg-wheat-600 text-white hover:bg-wheat-700 focus:ring-wheat-500 dark:bg-wheat-500 dark:hover:bg-wheat-600"
+        class="inline-flex items-center gap-2 rounded-lg px-3.5 py-2.5 text-sm font-semibold shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 bg-amber-600 text-white hover:bg-amber-700 focus:ring-amber-500 dark:bg-amber-500 dark:hover:bg-amber-600"
       >
         <.icon name="hero-arrow-path" class="h-5 w-5" />
         <span class="hidden sm:inline">Restart</span>
       </button>
       <.link
         navigate={~p"/agents/#{@agent_token.id}/edit"}
-        class="inline-flex items-center gap-2 rounded-lg px-3.5 py-2.5 text-sm font-semibold shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-cerulean-600 text-white hover:bg-cerulean-700 focus:ring-cerulean-500 dark:bg-cerulean-500 dark:hover:bg-cerulean-600"
+        class="inline-flex items-center gap-2 rounded-lg px-3.5 py-2.5 text-sm font-semibold shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600"
       >
         <.icon name="hero-pencil" class="h-5 w-5" />
         <span class="hidden sm:inline">Edit Agent</span>
       </.link>
       <.link
         navigate={~p"/agents"}
-        class="inline-flex items-center gap-2 text-sm font-semibold text-cool-steel-700 dark:text-cool-steel-300 hover:text-cool-steel-900 dark:hover:text-white"
+        class="inline-flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
       >
         <.icon name="hero-arrow-left" class="h-5 w-5" />
         <span class="hidden sm:inline">Back to Agents</span>
@@ -54,7 +54,7 @@
 <!-- Tab Navigation (Superuser Only) -->
   <div
     :if={@current_scope.user.is_superuser}
-    class="mt-6 border-b border-cool-steel-200 dark:border-white/10"
+    class="mt-6 border-b border-gray-200 dark:border-white/10"
   >
     <nav class="-mb-px flex space-x-8">
       <button
@@ -64,9 +64,9 @@
         class={[
           "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
           if(@active_tab == "overview",
-            do: "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400",
+            do: "border-blue-500 text-blue-600 dark:text-blue-400",
             else:
-              "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300"
+              "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
           )
         ]}
       >
@@ -79,9 +79,9 @@
         class={[
           "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
           if(@active_tab == "debug",
-            do: "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400",
+            do: "border-blue-500 text-blue-600 dark:text-blue-400",
             else:
-              "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300"
+              "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
           )
         ]}
       >
@@ -96,15 +96,15 @@
       "rounded-md p-4 mb-4",
       if(@agent_token.allow_remote_debug,
         do: "bg-green-50 dark:bg-green-900/20",
-        else: "bg-cool-steel-50 dark:bg-cool-steel-900/20"
+        else: "bg-gray-50 dark:bg-gray-900/20"
       )
     ]}>
-      <p class="text-sm font-medium text-cool-steel-900 dark:text-white">
+      <p class="text-sm font-medium text-gray-900 dark:text-white">
         Debug Status: {if @agent_token.allow_remote_debug,
           do: "Enabled ✓",
           else: "Disabled"}
       </p>
-      <p class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
         <%= if @agent_token.allow_remote_debug do %>
           {t("Verbose logging is enabled. All SNMP data and agent messages are being logged.")}
         <% else %>
@@ -116,33 +116,33 @@
     </div>
 
     <div class="space-y-4">
-      <h3 class="text-sm font-medium text-cool-steel-900 dark:text-white">
+      <h3 class="text-sm font-medium text-gray-900 dark:text-white">
         {t("View Debug Logs")}
       </h3>
 
-      <div class="rounded-md bg-cool-steel-50 dark:bg-cool-steel-900 p-4">
-        <p class="text-sm mb-2 font-medium text-cool-steel-900 dark:text-white">
+      <div class="rounded-md bg-gray-50 dark:bg-gray-900 p-4">
+        <p class="text-sm mb-2 font-medium text-gray-900 dark:text-white">
           {t("Production (kubectl):")}
         </p>
-        <code class="text-xs text-cool-steel-800 dark:text-cool-steel-200 block">
+        <code class="text-xs text-gray-800 dark:text-gray-200 block">
           kubectl logs -n towerops deployment/towerops --tail=100 | grep "agent_token_id: {@agent_token.id}"
         </code>
       </div>
 
-      <div class="rounded-md bg-cool-steel-50 dark:bg-cool-steel-900 p-4">
-        <p class="text-sm mb-2 font-medium text-cool-steel-900 dark:text-white">
+      <div class="rounded-md bg-gray-50 dark:bg-gray-900 p-4">
+        <p class="text-sm mb-2 font-medium text-gray-900 dark:text-white">
           {t("Development (tail):")}
         </p>
-        <code class="text-xs text-cool-steel-800 dark:text-cool-steel-200 block">
+        <code class="text-xs text-gray-800 dark:text-gray-200 block">
           tail -f _build/dev/lib/towerops/priv/log/dev.log | grep "{@agent_token.id}"
         </code>
       </div>
 
       <div class="mt-4">
-        <p class="text-sm font-medium mb-2 text-cool-steel-900 dark:text-white">
+        <p class="text-sm font-medium mb-2 text-gray-900 dark:text-white">
           {t("What Gets Logged:")}
         </p>
-        <ul class="text-sm text-cool-steel-600 dark:text-cool-steel-400 list-disc list-inside space-y-1">
+        <ul class="text-sm text-gray-600 dark:text-gray-400 list-disc list-inside space-y-1">
           <li>Agent connection/disconnection events</li>
           <li>Job submissions (device IDs and job types)</li>
           <li>SNMP discovery results (full OID maps)</li>
@@ -160,10 +160,10 @@
 <!-- Agent Status Overview -->
     <div class="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
       <!-- Status Card -->
-      <div class="bg-white dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg p-6">
+      <div class="bg-white dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg p-6">
         <div class="flex items-center justify-between">
           <div>
-            <p class="text-sm font-medium text-cool-steel-600 dark:text-cool-steel-400">Status</p>
+            <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Status</p>
             <% {status, label} = agent_status(@agent_token) %>
             <div class="mt-2">
               <span class={"inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium #{status_badge_class(status)}"}>
@@ -172,38 +172,36 @@
               </span>
             </div>
           </div>
-          <.icon name="hero-signal" class="h-8 w-8 text-cool-steel-400 dark:text-cool-steel-500" />
+          <.icon name="hero-signal" class="h-8 w-8 text-gray-400 dark:text-gray-500" />
         </div>
       </div>
       
 <!-- Device Count Card -->
-      <div class="bg-white dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg p-6">
+      <div class="bg-white dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg p-6">
         <div class="flex items-center justify-between">
           <div>
-            <p class="text-sm font-medium text-cool-steel-600 dark:text-cool-steel-400">Device</p>
-            <p class="mt-2 text-3xl font-semibold text-cool-steel-900 dark:text-white">
+            <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Device</p>
+            <p class="mt-2 text-3xl font-semibold text-gray-900 dark:text-white">
               {length(@polling_targets)}
             </p>
-            <p class="mt-1 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
               {@direct_assignments} direct
             </p>
           </div>
-          <.icon name="hero-server" class="h-8 w-8 text-cool-steel-400 dark:text-cool-steel-500" />
+          <.icon name="hero-server" class="h-8 w-8 text-gray-400 dark:text-gray-500" />
         </div>
       </div>
       
 <!-- Last Seen Card -->
-      <div class="bg-white dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg p-6">
+      <div class="bg-white dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg p-6">
         <div class="flex items-center justify-between">
           <div class="min-w-0 flex-1">
-            <p class="text-sm font-medium text-cool-steel-600 dark:text-cool-steel-400">
-              Last Seen
-            </p>
-            <p class="mt-2 text-lg font-semibold text-cool-steel-900 dark:text-white">
+            <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Last Seen</p>
+            <p class="mt-2 text-lg font-semibold text-gray-900 dark:text-white">
               <.timestamp datetime={@agent_token.last_seen_at} timezone={@timezone} />
             </p>
             <%= if @agent_token.last_seen_at do %>
-              <p class="mt-1 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                 <.timestamp
                   datetime={@agent_token.last_seen_at}
                   timezone={@timezone}
@@ -212,61 +210,54 @@
               </p>
             <% end %>
             <%= if @agent_token.last_ip do %>
-              <p class="mt-1 text-xs text-cool-steel-500 dark:text-cool-steel-400 font-mono">
+              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 font-mono">
                 {@agent_token.last_ip}
               </p>
             <% end %>
           </div>
-          <.icon
-            name="hero-clock"
-            class="h-8 w-8 text-cool-steel-400 dark:text-cool-steel-500 flex-shrink-0"
-          />
+          <.icon name="hero-clock" class="h-8 w-8 text-gray-400 dark:text-gray-500 flex-shrink-0" />
         </div>
       </div>
       
 <!-- Uptime Card -->
-      <div class="bg-white dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg p-6">
+      <div class="bg-white dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg p-6">
         <div class="flex items-center justify-between">
           <div>
-            <p class="text-sm font-medium text-cool-steel-600 dark:text-cool-steel-400">Uptime</p>
+            <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Uptime</p>
             <%= if @agent_token.metadata["uptime_seconds"] do %>
-              <p class="mt-2 text-lg font-semibold text-cool-steel-900 dark:text-white">
+              <p class="mt-2 text-lg font-semibold text-gray-900 dark:text-white">
                 {format_uptime(@agent_token.metadata["uptime_seconds"])}
               </p>
             <% else %>
-              <p class="mt-2 text-lg font-semibold text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-2 text-lg font-semibold text-gray-500 dark:text-gray-400">
                 {t("Unknown")}
               </p>
             <% end %>
           </div>
-          <.icon name="hero-clock" class="h-8 w-8 text-cool-steel-400 dark:text-cool-steel-500" />
+          <.icon name="hero-clock" class="h-8 w-8 text-gray-400 dark:text-gray-500" />
         </div>
       </div>
     </div>
     
 <!-- Agent Details -->
     <%= if @agent_token.metadata && map_size(@agent_token.metadata) > 0 do %>
-      <div class="mt-6 bg-white dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg p-6">
-        <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-4">
+      <div class="mt-6 bg-white dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg p-6">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
           {t("Agent Details")}
         </h3>
         <dl class="grid grid-cols-1 gap-4 sm:grid-cols-2">
           <%= if @agent_token.metadata["version"] do %>
             <div>
-              <dt class="text-sm font-medium text-cool-steel-600 dark:text-cool-steel-400">
-                Version
-              </dt>
-              <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white font-mono">
+              <dt class="text-sm font-medium text-gray-600 dark:text-gray-400">Version</dt>
+              <dd class="mt-1 text-sm text-gray-900 dark:text-white font-mono">
                 {format_agent_version(@agent_token.metadata["version"])}
               </dd>
             </div>
           <% end %>
           <%= if @agent_token.metadata["uptime_seconds"] do %>
             <div>
-              <dt class="text-sm font-medium text-cool-steel-600 dark:text-cool-steel-400">
-                Uptime
-              </dt>
-              <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
+              <dt class="text-sm font-medium text-gray-600 dark:text-gray-400">Uptime</dt>
+              <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                 {format_uptime(@agent_token.metadata["uptime_seconds"])}
               </dd>
             </div>
@@ -276,44 +267,38 @@
     <% end %>
     
 <!-- Agent Timestamps -->
-    <div class="mt-6 bg-white dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg p-6">
-      <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-4">
+    <div class="mt-6 bg-white dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg p-6">
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
         {t("Timestamps")}
       </h3>
       <dl class="grid grid-cols-1 gap-4 sm:grid-cols-2">
         <div>
-          <dt class="text-sm font-medium text-cool-steel-600 dark:text-cool-steel-400">
-            Created
-          </dt>
-          <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
+          <dt class="text-sm font-medium text-gray-600 dark:text-gray-400">Created</dt>
+          <dd class="mt-1 text-sm text-gray-900 dark:text-white">
             <.timestamp datetime={@agent_token.inserted_at} timezone={@timezone} />
           </dd>
         </div>
 
         <div>
-          <dt class="text-sm font-medium text-cool-steel-600 dark:text-cool-steel-400">
-            Last Updated
-          </dt>
-          <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
+          <dt class="text-sm font-medium text-gray-600 dark:text-gray-400">Last Updated</dt>
+          <dd class="mt-1 text-sm text-gray-900 dark:text-white">
             <.timestamp datetime={@agent_token.updated_at} timezone={@timezone} />
           </dd>
         </div>
 
         <div>
-          <dt class="text-sm font-medium text-cool-steel-600 dark:text-cool-steel-400">
+          <dt class="text-sm font-medium text-gray-600 dark:text-gray-400">
             {t("Last Seen (Heartbeat)")}
           </dt>
-          <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
+          <dd class="mt-1 text-sm text-gray-900 dark:text-white">
             <.timestamp datetime={@agent_token.last_seen_at} timezone={@timezone} />
           </dd>
         </div>
 
         <%= if @agent_token.last_ip do %>
           <div>
-            <dt class="text-sm font-medium text-cool-steel-600 dark:text-cool-steel-400">
-              Last IP Address
-            </dt>
-            <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white font-mono">
+            <dt class="text-sm font-medium text-gray-600 dark:text-gray-400">Last IP Address</dt>
+            <dd class="mt-1 text-sm text-gray-900 dark:text-white font-mono">
               {@agent_token.last_ip}
             </dd>
           </div>
@@ -322,41 +307,38 @@
     </div>
     
 <!-- Device List -->
-    <div class="mt-6 bg-white dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-      <div class="p-6 border-b border-cool-steel-200 dark:border-white/10">
-        <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white">
+    <div class="mt-6 bg-white dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+      <div class="p-6 border-b border-gray-200 dark:border-white/10">
+        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
           {t("Polling Targets")}
         </h3>
-        <p class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
           {t("Device that this agent is responsible for polling")}
         </p>
       </div>
 
       <%= if @polling_targets == [] do %>
         <div class="p-12 text-center">
-          <.icon
-            name="hero-server"
-            class="mx-auto h-12 w-12 text-cool-steel-400 dark:text-cool-steel-500"
-          />
-          <h3 class="mt-4 text-sm font-semibold text-cool-steel-900 dark:text-white">
+          <.icon name="hero-server" class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" />
+          <h3 class="mt-4 text-sm font-semibold text-gray-900 dark:text-white">
             {t("No devices assigned")}
           </h3>
-          <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+          <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
             {t("This agent is not currently polling any device.")}
           </p>
         </div>
       <% else %>
-        <div class="divide-y divide-cool-steel-200 dark:divide-white/10">
+        <div class="divide-y divide-gray-200 dark:divide-white/10">
           <%= for device <- @polling_targets do %>
             <.link
               navigate={~p"/devices/#{device.id}"}
-              class="block hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800 transition-colors"
+              class="block hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
             >
               <div class="p-6">
                 <div class="flex items-center justify-between">
                   <div class="flex-1 min-w-0">
                     <div class="flex items-center gap-3">
-                      <p class="text-sm font-medium text-cool-steel-900 dark:text-white truncate">
+                      <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
                         {device.name}
                       </p>
                       <% {source, source_label} = assignment_source(device, @agent_token.id) %>
@@ -364,7 +346,7 @@
                         {source_label}
                       </span>
                     </div>
-                    <div class="mt-1 flex items-center gap-4 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                    <div class="mt-1 flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
                       <span class="flex items-center gap-1">
                         <.icon name="hero-globe-alt" class="h-4 w-4" />
                         {device.ip_address}
@@ -379,7 +361,7 @@
                   </div>
                   <.icon
                     name="hero-chevron-right"
-                    class="h-5 w-5 text-cool-steel-400 dark:text-cool-steel-500"
+                    class="h-5 w-5 text-gray-400 dark:text-gray-500"
                   />
                 </div>
               </div>
diff --git a/lib/towerops_web/live/alert_live/index.ex b/lib/towerops_web/live/alert_live/index.ex
index 16fbbfd3..d2ceded8 100644
--- a/lib/towerops_web/live/alert_live/index.ex
+++ b/lib/towerops_web/live/alert_live/index.ex
@@ -334,12 +334,12 @@ defmodule ToweropsWeb.AlertLive.Index do
     color = severity_color(alert)
 
     case color do
-      "red" -> "bg-sweet-salmon-500"
+      "red" -> "bg-red-500"
       "orange" -> "bg-orange-500"
-      "yellow" -> "bg-wheat-500"
+      "yellow" -> "bg-yellow-500"
       "green" -> "bg-green-500"
-      "gray" -> "bg-cool-steel-300 dark:bg-cool-steel-600"
-      _ -> "bg-cool-steel-300"
+      "gray" -> "bg-gray-300 dark:bg-gray-600"
+      _ -> "bg-gray-300"
     end
   end
 
diff --git a/lib/towerops_web/live/alert_live/index.html.heex b/lib/towerops_web/live/alert_live/index.html.heex
index 52074d69..c041fe6b 100644
--- a/lib/towerops_web/live/alert_live/index.html.heex
+++ b/lib/towerops_web/live/alert_live/index.html.heex
@@ -7,13 +7,13 @@
   <%!-- Compact header --%>
   <div class="flex items-center justify-between mb-1">
     <div class="flex items-center gap-3">
-      <h1 class="text-xl font-bold text-cool-steel-900 dark:text-white">{t("Alerts")}</h1>
-      <span class="rounded px-2 py-0.5 text-xs font-medium bg-cerulean-50 text-cerulean-700 dark:bg-cerulean-900/20 dark:text-cerulean-400">
+      <h1 class="text-xl font-bold text-gray-900 dark:text-white">{t("Alerts")}</h1>
+      <span class="rounded px-2 py-0.5 text-xs font-medium bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400">
         {t("Experimental")}
       </span>
     </div>
   </div>
-  <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400 mb-4">
+  <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
     {t("Monitor and triage network alerts, grouped by site with subscriber impact.")}
   </p>
 
@@ -23,17 +23,16 @@
       patch={~p"/alerts?filter=unresolved&sort=#{@sort_by}"}
       class={[
         "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-colors",
-        @filter == "unresolved" &&
-          "bg-cool-steel-900 text-white dark:bg-white dark:text-cool-steel-900",
+        @filter == "unresolved" && "bg-gray-900 text-white dark:bg-white dark:text-gray-900",
         @filter != "unresolved" &&
-          "bg-cool-steel-100 text-cool-steel-700 hover:bg-cool-steel-200 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700"
+          "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
       ]}
     >
       {t("Unresolved")}
       <span class={[
         "rounded-full px-1.5 py-0.5 text-xs",
-        @filter == "unresolved" && "bg-white/20 dark:bg-cool-steel-900/30",
-        @filter != "unresolved" && "bg-cool-steel-200 dark:bg-cool-steel-700"
+        @filter == "unresolved" && "bg-white/20 dark:bg-gray-900/30",
+        @filter != "unresolved" && "bg-gray-200 dark:bg-gray-700"
       ]}>
         {@counts.unresolved}
       </span>
@@ -42,16 +41,16 @@
       patch={~p"/alerts?filter=critical&sort=#{@sort_by}"}
       class={[
         "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-colors",
-        @filter == "critical" && "bg-sweet-salmon-600 text-white",
+        @filter == "critical" && "bg-red-600 text-white",
         @filter != "critical" &&
-          "bg-sweet-salmon-50 text-sweet-salmon-700 hover:bg-sweet-salmon-100 dark:bg-sweet-salmon-900/20 dark:text-sweet-salmon-400 dark:hover:bg-sweet-salmon-900/40"
+          "bg-red-50 text-red-700 hover:bg-red-100 dark:bg-red-900/20 dark:text-red-400 dark:hover:bg-red-900/40"
       ]}
     >
       {t("Critical")}
       <span class={[
         "rounded-full px-1.5 py-0.5 text-xs",
         @filter == "critical" && "bg-white/20",
-        @filter != "critical" && "bg-sweet-salmon-100 dark:bg-sweet-salmon-900/40"
+        @filter != "critical" && "bg-red-100 dark:bg-red-900/40"
       ]}>
         {@counts.critical}
       </span>
@@ -60,16 +59,16 @@
       patch={~p"/alerts?filter=all&sort=#{@sort_by}"}
       class={[
         "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-colors",
-        @filter == "all" && "bg-cool-steel-900 text-white dark:bg-white dark:text-cool-steel-900",
+        @filter == "all" && "bg-gray-900 text-white dark:bg-white dark:text-gray-900",
         @filter != "all" &&
-          "bg-cool-steel-100 text-cool-steel-700 hover:bg-cool-steel-200 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700"
+          "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
       ]}
     >
       {t("All")}
       <span class={[
         "rounded-full px-1.5 py-0.5 text-xs",
-        @filter == "all" && "bg-white/20 dark:bg-cool-steel-900/30",
-        @filter != "all" && "bg-cool-steel-200 dark:bg-cool-steel-700"
+        @filter == "all" && "bg-white/20 dark:bg-gray-900/30",
+        @filter != "all" && "bg-gray-200 dark:bg-gray-700"
       ]}>
         {@counts.all}
       </span>
@@ -78,34 +77,33 @@
       patch={~p"/alerts?filter=resolved&sort=#{@sort_by}"}
       class={[
         "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium transition-colors",
-        @filter == "resolved" &&
-          "bg-cool-steel-900 text-white dark:bg-white dark:text-cool-steel-900",
+        @filter == "resolved" && "bg-gray-900 text-white dark:bg-white dark:text-gray-900",
         @filter != "resolved" &&
-          "bg-cool-steel-100 text-cool-steel-700 hover:bg-cool-steel-200 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700"
+          "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
       ]}
     >
       {t("Resolved")}
       <span class={[
         "rounded-full px-1.5 py-0.5 text-xs",
-        @filter == "resolved" && "bg-white/20 dark:bg-cool-steel-900/30",
-        @filter != "resolved" && "bg-cool-steel-200 dark:bg-cool-steel-700"
+        @filter == "resolved" && "bg-white/20 dark:bg-gray-900/30",
+        @filter != "resolved" && "bg-gray-200 dark:bg-gray-700"
       ]}>
         {@counts.resolved}
       </span>
     </.link>
 
-    <span class="text-cool-steel-300 dark:text-cool-steel-600 mx-1">|</span>
+    <span class="text-gray-300 dark:text-gray-600 mx-1">|</span>
 
     <%!-- Sort controls --%>
-    <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400">{t("Sort")}:</span>
+    <span class="text-xs text-gray-500 dark:text-gray-400">{t("Sort")}:</span>
     <.link
       patch={~p"/alerts?filter=#{@filter}&sort=severity"}
       class={[
         "text-xs px-2 py-1 rounded transition-colors",
         @sort_by == "severity" &&
-          "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-300 font-medium",
+          "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 font-medium",
         @sort_by != "severity" &&
-          "text-cool-steel-600 hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-cool-steel-200"
+          "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
       ]}
     >
       {t("Severity")}
@@ -115,9 +113,9 @@
       class={[
         "text-xs px-2 py-1 rounded transition-colors",
         @sort_by == "age" &&
-          "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-300 font-medium",
+          "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 font-medium",
         @sort_by != "age" &&
-          "text-cool-steel-600 hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-cool-steel-200"
+          "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
       ]}
     >
       {t("Oldest")}
@@ -127,9 +125,9 @@
       class={[
         "text-xs px-2 py-1 rounded transition-colors",
         @sort_by == "impact" &&
-          "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-300 font-medium",
+          "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 font-medium",
         @sort_by != "impact" &&
-          "text-cool-steel-600 hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-cool-steel-200"
+          "text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200"
       ]}
     >
       {t("Impact")}
@@ -139,9 +137,9 @@
   <%!-- Bulk actions bar --%>
   <div
     :if={MapSet.size(@selected_alerts) > 0}
-    class="flex items-center gap-3 mb-3 px-3 py-2 rounded-lg bg-cerulean-50 dark:bg-cerulean-900/20 border border-cerulean-200 dark:border-cerulean-800"
+    class="flex items-center gap-3 mb-3 px-3 py-2 rounded-lg bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800"
   >
-    <span class="text-xs font-medium text-cerulean-800 dark:text-cerulean-300">
+    <span class="text-xs font-medium text-blue-800 dark:text-blue-300">
       {MapSet.size(@selected_alerts)} {t("selected")}
     </span>
     <.button type="button" phx-click="bulk_acknowledge" variant="primary">
@@ -153,7 +151,7 @@
     <button
       type="button"
       phx-click="select_none"
-      class="text-xs text-cerulean-600 dark:text-cerulean-400 hover:underline ml-auto"
+      class="text-xs text-blue-600 dark:text-blue-400 hover:underline ml-auto"
     >
       {t("Clear selection")}
     </button>
@@ -171,7 +169,7 @@
         <h3 class="text-lg font-semibold text-green-700 dark:text-green-400">
           {t("All Clear!")}
         </h3>
-        <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400 max-w-sm">
+        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400 max-w-sm">
           <%= case @filter do %>
             <% "unresolved" -> %>
               {t("No active alerts. Your network is looking good!")}
@@ -191,13 +189,13 @@
       <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
         <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
           <table class="min-w-full">
-            <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/50">
+            <thead class="bg-gray-50 dark:bg-gray-800/50">
               <tr>
                 <th scope="col" class="py-2 pl-4 pr-2 w-8">
                   <button
                     type="button"
                     phx-click="select_all"
-                    class="text-cool-steel-400 hover:text-cool-steel-600 dark:hover:text-cool-steel-300"
+                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                     title={t("Select all")}
                   >
                     <.icon name="hero-check-circle" class="h-4 w-4" />
@@ -206,51 +204,51 @@
                 <th scope="col" class="w-1 px-0 py-2"></th>
                 <th
                   scope="col"
-                  class="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
+                  class="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
                 >
                   {t("Device")}
                 </th>
                 <th
                   scope="col"
-                  class="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
+                  class="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
                 >
                   {t("Site")}
                 </th>
                 <th
                   scope="col"
-                  class="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
+                  class="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
                 >
                   {t("Message")}
                 </th>
                 <th
                   scope="col"
-                  class="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
+                  class="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
                 >
                   {t("Duration")}
                 </th>
                 <th
                   scope="col"
-                  class="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
+                  class="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
                 >
                   {t("Impact")}
                 </th>
                 <th
                   scope="col"
-                  class="px-3 py-2 text-right text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
+                  class="px-3 py-2 text-right text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
                 >
                   {t("Actions")}
                 </th>
               </tr>
             </thead>
-            <tbody class="divide-y divide-cool-steel-100 dark:divide-white/5">
+            <tbody class="divide-y divide-gray-100 dark:divide-white/5">
               <%= for alert <- @alerts do %>
                 <tr
                   class={[
-                    "hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800/30 transition-colors cursor-pointer",
+                    "hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors cursor-pointer",
                     MapSet.member?(@selected_alerts, alert.id) &&
-                      "bg-cerulean-50/50 dark:bg-cerulean-900/10",
+                      "bg-blue-50/50 dark:bg-blue-900/10",
                     rem(Enum.find_index(@alerts, &(&1.id == alert.id)) || 0, 2) == 1 &&
-                      "bg-cool-steel-50/40 dark:bg-cool-steel-800/20"
+                      "bg-gray-50/40 dark:bg-gray-800/20"
                   ]}
                   phx-click="toggle_alert"
                   phx-value-id={alert.id}
@@ -259,10 +257,9 @@
                   <td class="py-2 pl-4 pr-2" phx-click="toggle_select" phx-value-id={alert.id}>
                     <div class={[
                       "h-4 w-4 rounded border flex items-center justify-center transition-colors",
-                      MapSet.member?(@selected_alerts, alert.id) &&
-                        "bg-cerulean-500 border-cerulean-500",
+                      MapSet.member?(@selected_alerts, alert.id) && "bg-blue-500 border-blue-500",
                       !MapSet.member?(@selected_alerts, alert.id) &&
-                        "border-cool-steel-300 dark:border-cool-steel-600"
+                        "border-gray-300 dark:border-gray-600"
                     ]}>
                       <.icon
                         :if={MapSet.member?(@selected_alerts, alert.id)}
@@ -283,9 +280,9 @@
                       <span class={[
                         "inline-flex items-center gap-1 text-xs font-medium px-1.5 py-0.5 rounded",
                         alert.alert_type == "device_down" && is_nil(alert.resolved_at) &&
-                          "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/40 dark:text-sweet-salmon-300",
+                          "bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300",
                         alert.alert_type == "device_down" && alert.resolved_at &&
-                          "bg-cool-steel-100 text-cool-steel-600 dark:bg-cool-steel-800 dark:text-cool-steel-400",
+                          "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400",
                         alert.alert_type == "device_up" &&
                           "bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300"
                       ]}>
@@ -297,33 +294,33 @@
                       </span>
                       <.link
                         navigate={~p"/devices/#{alert.device.id}"}
-                        class="text-sm font-medium text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                        class="text-sm font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                       >
                         {alert.device.name}
                       </.link>
-                      <span class="text-xs font-mono text-cool-steel-500 dark:text-cool-steel-400">
+                      <span class="text-xs font-mono text-gray-500 dark:text-gray-400">
                         {alert.device.ip_address}
                       </span>
                     </div>
                   </td>
 
                   <%!-- Site --%>
-                  <td class="px-3 py-2 whitespace-nowrap text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                  <td class="px-3 py-2 whitespace-nowrap text-xs text-gray-600 dark:text-gray-400">
                     <%= if alert.device.site do %>
                       <.link
                         navigate={~p"/sites/#{alert.device.site.id}"}
-                        class="hover:text-cerulean-600 dark:hover:text-cerulean-400"
+                        class="hover:text-blue-600 dark:hover:text-blue-400"
                       >
                         {alert.device.site.name}
                       </.link>
                     <% else %>
-                      <span class="text-cool-steel-400 dark:text-cool-steel-600">—</span>
+                      <span class="text-gray-400 dark:text-gray-600">—</span>
                     <% end %>
                   </td>
 
                   <%!-- Message --%>
                   <td
-                    class="px-3 py-2 text-xs text-cool-steel-600 dark:text-cool-steel-400 max-w-xs truncate"
+                    class="px-3 py-2 text-xs text-gray-600 dark:text-gray-400 max-w-xs truncate"
                     title={alert.message}
                   >
                     {alert.message || "—"}
@@ -334,10 +331,10 @@
                     <span class={[
                       "text-xs font-mono",
                       severity_color(alert) == "red" &&
-                        "text-sweet-salmon-600 dark:text-sweet-salmon-400 font-medium",
+                        "text-red-600 dark:text-red-400 font-medium",
                       severity_color(alert) == "orange" && "text-orange-600 dark:text-orange-400",
                       severity_color(alert) not in ["red", "orange"] &&
-                        "text-cool-steel-600 dark:text-cool-steel-400"
+                        "text-gray-600 dark:text-gray-400"
                     ]}>
                       {duration_text(alert)}
                     </span>
@@ -346,12 +343,12 @@
                   <%!-- Impact --%>
                   <td class="px-3 py-2 whitespace-nowrap">
                     <%= if impact = impact_text(alert, @site_subscribers) do %>
-                      <span class="inline-flex items-center gap-1 text-xs text-wheat-700 dark:text-wheat-400">
+                      <span class="inline-flex items-center gap-1 text-xs text-amber-700 dark:text-amber-400">
                         <.icon name="hero-users" class="h-3 w-3" />
                         {impact}
                       </span>
                     <% else %>
-                      <span class="text-xs text-cool-steel-300 dark:text-cool-steel-600">—</span>
+                      <span class="text-xs text-gray-300 dark:text-gray-600">—</span>
                     <% end %>
                   </td>
 
@@ -359,12 +356,12 @@
                   <td class="px-3 py-2 whitespace-nowrap text-right">
                     <div class="flex items-center justify-end gap-1">
                       <%= if alert.acknowledged_at && is_nil(alert.resolved_at) do %>
-                        <span class="text-xs text-cerulean-600 dark:text-cerulean-400 px-1.5 py-0.5 rounded bg-cerulean-50 dark:bg-cerulean-900/20">
+                        <span class="text-xs text-blue-600 dark:text-blue-400 px-1.5 py-0.5 rounded bg-blue-50 dark:bg-blue-900/20">
                           Ack'd
                         </span>
                       <% end %>
                       <%= if alert.resolved_at do %>
-                        <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400 px-1.5 py-0.5 rounded bg-cool-steel-100 dark:bg-cool-steel-800">
+                        <span class="text-xs text-gray-500 dark:text-gray-400 px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800">
                           {t("Resolved")}
                         </span>
                       <% end %>
@@ -373,7 +370,7 @@
                           type="button"
                           phx-click="acknowledge"
                           phx-value-id={alert.id}
-                          class="text-xs px-2 py-1 rounded bg-cerulean-100 text-cerulean-700 hover:bg-cerulean-200 dark:bg-cerulean-900/30 dark:text-cerulean-300 dark:hover:bg-cerulean-900/50 transition-colors"
+                          class="text-xs px-2 py-1 rounded bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:hover:bg-blue-900/50 transition-colors"
                         >
                           Ack
                         </button>
@@ -384,7 +381,7 @@
                           phx-click="resolve"
                           phx-value-id={alert.id}
                           data-confirm={t("Resolve this alert?")}
-                          class="text-xs px-2 py-1 rounded bg-cool-steel-100 text-cool-steel-700 hover:bg-cool-steel-200 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700 transition-colors"
+                          class="text-xs px-2 py-1 rounded bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors"
                         >
                           Resolve
                         </button>
@@ -395,22 +392,22 @@
 
                 <%!-- Expanded alert detail --%>
                 <%= if @expanded_alert == alert.id do %>
-                  <tr class="bg-cool-steel-50 dark:bg-cool-steel-800/40">
+                  <tr class="bg-gray-50 dark:bg-gray-800/40">
                     <td colspan="8" class="px-4 py-3">
                       <div class="flex gap-8 text-xs">
                         <%!-- Timeline --%>
                         <div class="flex-1">
-                          <h4 class="font-semibold text-cool-steel-700 dark:text-cool-steel-300 mb-2 uppercase tracking-wider">
+                          <h4 class="font-semibold text-gray-700 dark:text-gray-300 mb-2 uppercase tracking-wider">
                             {t("Timeline")}
                           </h4>
                           <div class="space-y-1.5">
                             <div class="flex items-center gap-2">
-                              <span class="inline-block h-2 w-2 rounded-full bg-sweet-salmon-500 flex-shrink-0">
+                              <span class="inline-block h-2 w-2 rounded-full bg-red-500 flex-shrink-0">
                               </span>
-                              <span class="text-cool-steel-500 dark:text-cool-steel-400 w-20 flex-shrink-0">
+                              <span class="text-gray-500 dark:text-gray-400 w-20 flex-shrink-0">
                                 {t("Triggered")}
                               </span>
-                              <span class="font-mono text-cool-steel-900 dark:text-white">
+                              <span class="font-mono text-gray-900 dark:text-white">
                                 {ToweropsWeb.TimeHelpers.format_iso8601(
                                   alert.triggered_at,
                                   @timezone
@@ -419,19 +416,19 @@
                             </div>
                             <%= if alert.acknowledged_at do %>
                               <div class="flex items-center gap-2">
-                                <span class="inline-block h-2 w-2 rounded-full bg-cerulean-500 flex-shrink-0">
+                                <span class="inline-block h-2 w-2 rounded-full bg-blue-500 flex-shrink-0">
                                 </span>
-                                <span class="text-cool-steel-500 dark:text-cool-steel-400 w-20 flex-shrink-0">
+                                <span class="text-gray-500 dark:text-gray-400 w-20 flex-shrink-0">
                                   {t("Ack'd")}
                                 </span>
-                                <span class="font-mono text-cool-steel-900 dark:text-white">
+                                <span class="font-mono text-gray-900 dark:text-white">
                                   {ToweropsWeb.TimeHelpers.format_iso8601(
                                     alert.acknowledged_at,
                                     @timezone
                                   )}
                                 </span>
                                 <%= if alert.acknowledged_by do %>
-                                  <span class="text-cool-steel-500 dark:text-cool-steel-400">
+                                  <span class="text-gray-500 dark:text-gray-400">
                                     by {alert.acknowledged_by.email}
                                   </span>
                                 <% end %>
@@ -441,10 +438,10 @@
                               <div class="flex items-center gap-2">
                                 <span class="inline-block h-2 w-2 rounded-full bg-green-500 flex-shrink-0">
                                 </span>
-                                <span class="text-cool-steel-500 dark:text-cool-steel-400 w-20 flex-shrink-0">
+                                <span class="text-gray-500 dark:text-gray-400 w-20 flex-shrink-0">
                                   {t("Resolved")}
                                 </span>
-                                <span class="font-mono text-cool-steel-900 dark:text-white">
+                                <span class="font-mono text-gray-900 dark:text-white">
                                   {ToweropsWeb.TimeHelpers.format_iso8601(
                                     alert.resolved_at,
                                     @timezone
@@ -458,13 +455,13 @@
                         <%!-- Impact details --%>
                         <%= if alert.gaiia_impact && alert.gaiia_impact["total_subscribers"] && alert.gaiia_impact["total_subscribers"] > 0 do %>
                           <div>
-                            <h4 class="font-semibold text-cool-steel-700 dark:text-cool-steel-300 mb-2 uppercase tracking-wider">
+                            <h4 class="font-semibold text-gray-700 dark:text-gray-300 mb-2 uppercase tracking-wider">
                               {t("Impact")}
                             </h4>
                             <div class="space-y-1">
                               <div class="flex items-center gap-2">
-                                <.icon name="hero-users" class="h-3.5 w-3.5 text-wheat-500" />
-                                <span class="text-cool-steel-900 dark:text-white font-medium">
+                                <.icon name="hero-users" class="h-3.5 w-3.5 text-amber-500" />
+                                <span class="text-gray-900 dark:text-white font-medium">
                                   {format_number(alert.gaiia_impact["total_subscribers"])} subscribers affected
                                 </span>
                               </div>
@@ -473,9 +470,9 @@
                                 <div class="flex items-center gap-2">
                                   <.icon
                                     name="hero-currency-dollar"
-                                    class="h-3.5 w-3.5 text-wheat-500"
+                                    class="h-3.5 w-3.5 text-amber-500"
                                   />
-                                  <span class="text-cool-steel-900 dark:text-white font-medium">
+                                  <span class="text-gray-900 dark:text-white font-medium">
                                     ${alert.gaiia_impact["total_mrr"]}/mo at risk
                                   </span>
                                 </div>
@@ -487,12 +484,10 @@
                         <%!-- Message --%>
                         <%= if alert.message do %>
                           <div class="flex-1">
-                            <h4 class="font-semibold text-cool-steel-700 dark:text-cool-steel-300 mb-2 uppercase tracking-wider">
+                            <h4 class="font-semibold text-gray-700 dark:text-gray-300 mb-2 uppercase tracking-wider">
                               {t("Details")}
                             </h4>
-                            <p class="text-cool-steel-600 dark:text-cool-steel-400">
-                              {alert.message}
-                            </p>
+                            <p class="text-gray-600 dark:text-gray-400">{alert.message}</p>
                           </div>
                         <% end %>
                       </div>
diff --git a/lib/towerops_web/live/check_live/form_component.ex b/lib/towerops_web/live/check_live/form_component.ex
index 5c5b5991..7875240e 100644
--- a/lib/towerops_web/live/check_live/form_component.ex
+++ b/lib/towerops_web/live/check_live/form_component.ex
@@ -9,12 +9,12 @@ defmodule ToweropsWeb.CheckLive.FormComponent do
   def render(assigns) do
     ~H"""
     <div class="relative z-50">
-      <div class="fixed inset-0 bg-cool-steel-500 dark:bg-cool-steel-900 bg-opacity-75 dark:bg-opacity-80 transition-opacity">
+      <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-80 transition-opacity">
       </div>
 
       <div class="fixed inset-0 z-10 overflow-y-auto">
         <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-          <div class="relative transform overflow-hidden rounded-lg bg-white dark:bg-cool-steel-800 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+          <div class="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
             <.form
               for={@form}
               id="check-form"
@@ -22,16 +22,16 @@ defmodule ToweropsWeb.CheckLive.FormComponent do
               phx-change="validate"
               phx-submit="save"
             >
-              <div class="bg-white dark:bg-cool-steel-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+              <div class="bg-white dark:bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                 <div class="flex items-start justify-between mb-4">
-                  <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white">
+                  <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                     {if @action == :edit, do: "Edit Service Check", else: "Add Service Check"}
                   </h3>
                   <button
                     type="button"
                     phx-click="close"
                     phx-target={@myself}
-                    class="text-cool-steel-400 hover:text-cool-steel-500 dark:hover:text-cool-steel-300"
+                    class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
                   >
                     <.icon name="hero-x-mark" class="h-6 w-6" />
                   </button>
@@ -40,7 +40,7 @@ defmodule ToweropsWeb.CheckLive.FormComponent do
                 <div class="space-y-4">
                   <!-- Check Type Selection -->
                   <div>
-                    <label class="block text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300 mb-1">
+                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                       Check Type
                     </label>
                     <.input
@@ -79,7 +79,7 @@ defmodule ToweropsWeb.CheckLive.FormComponent do
                     <% "ssl" -> %>
                       {render_ssl_fields(assigns)}
                     <% _ -> %>
-                      <div class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                      <div class="text-sm text-gray-500 dark:text-gray-400">
                         Select a check type to configure
                       </div>
                   <% end %>
@@ -100,7 +100,7 @@ defmodule ToweropsWeb.CheckLive.FormComponent do
                 </div>
               </div>
 
-              <div class="bg-cool-steel-50 dark:bg-cool-steel-900/50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6 gap-3">
+              <div class="bg-gray-50 dark:bg-gray-900/50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6 gap-3">
                 <.button
                   type="submit"
                   phx-disable-with={if @action == :edit, do: "Saving...", else: "Creating..."}
@@ -111,7 +111,7 @@ defmodule ToweropsWeb.CheckLive.FormComponent do
                   type="button"
                   phx-click="close"
                   phx-target={@myself}
-                  class="text-sm font-semibold text-cool-steel-700 dark:text-cool-steel-300 hover:text-cool-steel-900 dark:hover:text-white"
+                  class="text-sm font-semibold text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
                 >
                   Cancel
                 </button>
@@ -155,8 +155,8 @@ defmodule ToweropsWeb.CheckLive.FormComponent do
         <.input field={@form[:follow_redirects]} type="checkbox" label="Follow Redirects" />
       </div>
 
-      <details class="border border-cool-steel-200 dark:border-cool-steel-700 rounded-lg p-3">
-        <summary class="cursor-pointer text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300">
+      <details class="border border-gray-200 dark:border-gray-700 rounded-lg p-3">
+        <summary class="cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300">
           Advanced Options
         </summary>
         <div class="mt-3 space-y-3">
@@ -264,7 +264,7 @@ defmodule ToweropsWeb.CheckLive.FormComponent do
           label="Warning Days"
           placeholder="30"
         />
-        <p class="mt-1 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
           Alert when certificate expires within this many days
         </p>
       </div>
diff --git a/lib/towerops_web/live/components/global_search_component.ex b/lib/towerops_web/live/components/global_search_component.ex
index 23e302b0..cea5a4d1 100644
--- a/lib/towerops_web/live/components/global_search_component.ex
+++ b/lib/towerops_web/live/components/global_search_component.ex
@@ -80,12 +80,9 @@ defmodule ToweropsWeb.Live.Components.GlobalSearchComponent do
           >
           </div>
           <div class="flex min-h-full items-start justify-center p-4 pt-[15vh]">
-            <div class="relative w-full max-w-lg transform rounded-xl bg-white shadow-2xl ring-1 ring-black/5 dark:bg-cool-steel-800 dark:ring-white/10">
-              <div class="flex items-center gap-3 border-b border-cool-steel-200 px-4 dark:border-white/10">
-                <.icon
-                  name="hero-magnifying-glass"
-                  class="h-5 w-5 text-cool-steel-400 dark:text-cool-steel-500"
-                />
+            <div class="relative w-full max-w-lg transform rounded-xl bg-white shadow-2xl ring-1 ring-black/5 dark:bg-gray-800 dark:ring-white/10">
+              <div class="flex items-center gap-3 border-b border-gray-200 px-4 dark:border-white/10">
+                <.icon name="hero-magnifying-glass" class="h-5 w-5 text-gray-400 dark:text-gray-500" />
                 <input
                   type="text"
                   id="global-search-input"
@@ -96,23 +93,23 @@ defmodule ToweropsWeb.Live.Components.GlobalSearchComponent do
                   phx-debounce="200"
                   phx-target={@myself}
                   autocomplete="off"
-                  class="flex-1 border-0 bg-transparent py-3.5 text-sm text-cool-steel-900 placeholder:text-cool-steel-400 focus:ring-0 dark:text-white dark:placeholder:text-cool-steel-500"
+                  class="flex-1 border-0 bg-transparent py-3.5 text-sm text-gray-900 placeholder:text-gray-400 focus:ring-0 dark:text-white dark:placeholder:text-gray-500"
                 />
-                <kbd class="hidden sm:inline-flex items-center rounded border border-cool-steel-300 px-1.5 py-0.5 text-xs text-cool-steel-400 dark:border-cool-steel-600 dark:text-cool-steel-500">
+                <kbd class="hidden sm:inline-flex items-center rounded border border-gray-300 px-1.5 py-0.5 text-xs text-gray-400 dark:border-gray-600 dark:text-gray-500">
                   esc
                 </kbd>
               </div>
 
               <div class="max-h-80 overflow-y-auto px-2 py-2">
                 <%= if @query != "" and map_size(@results) == 0 do %>
-                  <p class="py-8 text-center text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                  <p class="py-8 text-center text-sm text-gray-500 dark:text-gray-400">
                     No results found.
                   </p>
                 <% end %>
 
                 <%= for {category, items} <- @results do %>
                   <div class="mb-2">
-                    <p class="px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                    <p class="px-3 py-1.5 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                       {category_label(category)}
                     </p>
                     <%= for {item, idx} <- Enum.with_index(items) do %>
@@ -122,10 +119,9 @@ defmodule ToweropsWeb.Live.Components.GlobalSearchComponent do
                         class={[
                           "flex items-center gap-3 rounded-lg px-3 py-2 text-sm cursor-pointer",
                           if(global_idx == @selected_index,
-                            do:
-                              "bg-cerulean-50 text-cerulean-700 dark:bg-cerulean-900/30 dark:text-cerulean-300",
+                            do: "bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300",
                             else:
-                              "text-cool-steel-700 hover:bg-cool-steel-100 dark:text-cool-steel-300 dark:hover:bg-white/5"
+                              "text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-white/5"
                           )
                         ]}
                       >
@@ -145,13 +141,13 @@ defmodule ToweropsWeb.Live.Components.GlobalSearchComponent do
                 <% end %>
 
                 <%= if @query == "" do %>
-                  <p class="py-8 text-center text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                  <p class="py-8 text-center text-sm text-gray-500 dark:text-gray-400">
                     Start typing to search...
                   </p>
                 <% end %>
               </div>
 
-              <div class="flex items-center justify-between border-t border-cool-steel-200 px-4 py-2 text-xs text-cool-steel-400 dark:border-white/10 dark:text-cool-steel-500">
+              <div class="flex items-center justify-between border-t border-gray-200 px-4 py-2 text-xs text-gray-400 dark:border-white/10 dark:text-gray-500">
                 <div class="flex gap-2">
                   <span><kbd class="font-semibold">↑↓</kbd> navigate</span>
                   <span><kbd class="font-semibold">↵</kbd> open</span>
diff --git a/lib/towerops_web/live/config_timeline_live.ex b/lib/towerops_web/live/config_timeline_live.ex
index 181e12a6..901ef20e 100644
--- a/lib/towerops_web/live/config_timeline_live.ex
+++ b/lib/towerops_web/live/config_timeline_live.ex
@@ -287,7 +287,7 @@ defmodule ToweropsWeb.ConfigTimelineLive do
     do: "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"
 
   def change_size_class(size) when is_integer(size) and size > 20,
-    do: "bg-wheat-100 text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400"
+    do: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"
 
-  def change_size_class(_), do: "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-400"
+  def change_size_class(_), do: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
 end
diff --git a/lib/towerops_web/live/coverage_live/form.html.heex b/lib/towerops_web/live/coverage_live/form.html.heex
index 3eb1c104..24ea1a88 100644
--- a/lib/towerops_web/live/coverage_live/form.html.heex
+++ b/lib/towerops_web/live/coverage_live/form.html.heex
@@ -18,9 +18,9 @@
       )}
     </:subtitle>
     <:actions>
-      <span class="inline-flex items-center px-3 py-1.5 rounded-md border border-cerulean-200 dark:border-cerulean-900/50 bg-cerulean-50 dark:bg-cerulean-900/20 text-sm">
-        <span class="text-cerulean-700 dark:text-cerulean-300 font-medium mr-2">EIRP:</span>
-        <span class="text-cerulean-900 dark:text-cerulean-100 font-mono">
+      <span class="inline-flex items-center px-3 py-1.5 rounded-md border border-blue-200 dark:border-blue-900/50 bg-blue-50 dark:bg-blue-900/20 text-sm">
+        <span class="text-blue-700 dark:text-blue-300 font-medium mr-2">EIRP:</span>
+        <span class="text-blue-900 dark:text-blue-100 font-mono">
           {Float.round(@computed_eirp, 1)} dBm
         </span>
       </span>
@@ -37,7 +37,7 @@
     <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
       <%!-- Identity --%>
       <div class="space-y-4">
-        <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+        <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
           {t("Identity")}
         </h3>
 
@@ -68,7 +68,7 @@
         />
         <p
           :if={@form[:site_id].value not in [nil, ""] and @devices == []}
-          class="text-xs text-cool-steel-500 dark:text-cool-steel-400"
+          class="text-xs text-gray-500 dark:text-gray-400"
         >
           {t("This site has no devices yet — coverage will not be attached to a specific device.")}
         </p>
@@ -86,20 +86,20 @@
       <%!-- Radio location: draggable marker on a Leaflet map. --%>
       <div class="space-y-3">
         <div class="flex items-center justify-between">
-          <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+          <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
             {t("Radio location")}
           </h3>
           <button
             :if={radio_overridden?(@form)}
             type="button"
             phx-click="use_site_location"
-            class="text-xs text-cerulean-600 hover:underline dark:text-cerulean-400"
+            class="text-xs text-blue-600 hover:underline dark:text-blue-400"
           >
             {t("Use site location")}
           </button>
         </div>
 
-        <p class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
+        <p class="text-xs text-gray-500 dark:text-gray-400">
           {t("Drag the marker to where the radio is mounted. Defaults to the site's coordinates.")}
         </p>
 
@@ -107,7 +107,7 @@
           id="coverage-location-picker"
           phx-hook="CoverageLocationPicker"
           phx-update="ignore"
-          class="h-72 w-full rounded border border-cool-steel-200 dark:border-white/10 bg-cool-steel-100 dark:bg-cool-steel-800"
+          class="h-72 w-full rounded border border-gray-200 dark:border-white/10 bg-gray-100 dark:bg-gray-800"
           data-marker-lat={radio_marker_lat(@form, @sites)}
           data-marker-lon={radio_marker_lon(@form, @sites)}
         >
@@ -115,13 +115,10 @@
 
         <div
           :if={radio_marker_lat(@form, @sites)}
-          class="text-xs font-mono text-cool-steel-600 dark:text-cool-steel-400"
+          class="text-xs font-mono text-gray-600 dark:text-gray-400"
         >
           {radio_marker_lat(@form, @sites)}, {radio_marker_lon(@form, @sites)}
-          <span
-            :if={radio_overridden?(@form)}
-            class="ml-2 text-cerulean-600 dark:text-cerulean-400"
-          >
+          <span :if={radio_overridden?(@form)} class="ml-2 text-blue-600 dark:text-blue-400">
             ({t("override")})
           </span>
         </div>
@@ -132,7 +129,7 @@
 
       <%!-- Radio --%>
       <div class="space-y-4">
-        <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+        <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
           {t("Radio")}
         </h3>
 
@@ -169,7 +166,7 @@
 
       <%!-- Mounting --%>
       <div class="space-y-4">
-        <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+        <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
           {t("Mounting")}
         </h3>
 
@@ -205,14 +202,14 @@
 
       <%!-- Foliage --%>
       <div class="space-y-4">
-        <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+        <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
           {t("Environment")}
         </h3>
 
         <div>
           <label
             for="coverage_foliage_tuning"
-            class="block text-sm font-medium text-cool-steel-900 dark:text-cool-steel-100 mb-1"
+            class="block text-sm font-medium text-gray-900 dark:text-gray-100 mb-1"
           >
             {t("Foliage tuning")}: {Phoenix.HTML.Form.input_value(@form, :foliage_tuning) || 0}
           </label>
@@ -226,7 +223,7 @@
             step="1"
             class="w-full"
           />
-          <p class="text-xs text-cool-steel-500 dark:text-cool-steel-400 mt-1">
+          <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
             {t("Higher values reduce predicted signal in wooded areas.")}
           </p>
         </div>
diff --git a/lib/towerops_web/live/coverage_live/index.ex b/lib/towerops_web/live/coverage_live/index.ex
index 317f0035..f459b567 100644
--- a/lib/towerops_web/live/coverage_live/index.ex
+++ b/lib/towerops_web/live/coverage_live/index.ex
@@ -67,17 +67,15 @@ defmodule ToweropsWeb.CoverageLive.Index do
   end
 
   @doc false
-  def status_badge_class("draft"),
-    do: "bg-cool-steel-100 text-cool-steel-700 dark:bg-cool-steel-800 dark:text-cool-steel-300"
+  def status_badge_class("draft"), do: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300"
 
-  def status_badge_class("queued"), do: "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-300"
+  def status_badge_class("queued"), do: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300"
 
-  def status_badge_class("computing"), do: "bg-wheat-100 text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-300"
+  def status_badge_class("computing"), do: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300"
 
   def status_badge_class("ready"), do: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300"
 
-  def status_badge_class("failed"),
-    do: "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-300"
+  def status_badge_class("failed"), do: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300"
 
-  def status_badge_class(_), do: "bg-cool-steel-100 text-cool-steel-700"
+  def status_badge_class(_), do: "bg-gray-100 text-gray-700"
 end
diff --git a/lib/towerops_web/live/coverage_live/index.html.heex b/lib/towerops_web/live/coverage_live/index.html.heex
index ad7bd28a..c534c034 100644
--- a/lib/towerops_web/live/coverage_live/index.html.heex
+++ b/lib/towerops_web/live/coverage_live/index.html.heex
@@ -23,16 +23,13 @@
       <div class="flex items-center justify-center py-16">
         <div class="card shadow-md border dark:border-white/10 max-w-md w-full">
           <div class="items-center text-center">
-            <div class="rounded-full bg-cerulean-100 dark:bg-cerulean-900/40 p-4 mb-2">
-              <.icon
-                name="hero-signal"
-                class="h-12 w-12 text-cerulean-500 dark:text-cerulean-400"
-              />
+            <div class="rounded-full bg-blue-100 dark:bg-blue-900/40 p-4 mb-2">
+              <.icon name="hero-signal" class="h-12 w-12 text-blue-500 dark:text-blue-400" />
             </div>
-            <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
               {t("Add a site first")}
             </h3>
-            <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+            <p class="text-sm text-gray-600 dark:text-gray-400">
               {t(
                 "Coverage predictions are computed from a site's location. Add a site, then return here to plan its coverage."
               )}
@@ -49,16 +46,13 @@
       <div class="flex items-center justify-center py-16">
         <div class="card shadow-md border dark:border-white/10 max-w-md w-full">
           <div class="items-center text-center">
-            <div class="rounded-full bg-cerulean-100 dark:bg-cerulean-900/40 p-4 mb-2">
-              <.icon
-                name="hero-signal"
-                class="h-12 w-12 text-cerulean-500 dark:text-cerulean-400"
-              />
+            <div class="rounded-full bg-blue-100 dark:bg-blue-900/40 p-4 mb-2">
+              <.icon name="hero-signal" class="h-12 w-12 text-blue-500 dark:text-blue-400" />
             </div>
-            <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
               {t("No coverages yet")}
             </h3>
-            <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+            <p class="text-sm text-gray-600 dark:text-gray-400">
               {t("Create your first coverage to predict where a tower's antenna reaches.")}
             </p>
             <div class="mt-4 flex gap-2">
@@ -70,65 +64,65 @@
         </div>
       </div>
     <% true -> %>
-      <div class="mt-6 overflow-x-auto rounded-lg border border-cool-steel-200 dark:border-white/10">
+      <div class="mt-6 overflow-x-auto rounded-lg border border-gray-200 dark:border-white/10">
         <table
           id="coverages-table"
-          class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10"
+          class="min-w-full divide-y divide-gray-200 dark:divide-white/10"
         >
-          <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/80">
+          <thead class="bg-gray-50 dark:bg-gray-800/80">
             <tr>
-              <th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-cool-steel-500 dark:text-cool-steel-400">
+              <th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
                 {t("Name")}
               </th>
-              <th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-cool-steel-500 dark:text-cool-steel-400">
+              <th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
                 {t("Site")}
               </th>
-              <th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-cool-steel-500 dark:text-cool-steel-400">
+              <th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
                 {t("Antenna")}
               </th>
-              <th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-cool-steel-500 dark:text-cool-steel-400">
+              <th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
                 {t("Freq (GHz)")}
               </th>
-              <th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-cool-steel-500 dark:text-cool-steel-400">
+              <th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
                 {t("TX (dBm)")}
               </th>
-              <th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-cool-steel-500 dark:text-cool-steel-400">
+              <th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
                 {t("Range (mi)")}
               </th>
-              <th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-cool-steel-500 dark:text-cool-steel-400">
+              <th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
                 {t("Status")}
               </th>
-              <th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-cool-steel-500 dark:text-cool-steel-400">
+              <th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
                 {t("Actions")}
               </th>
             </tr>
           </thead>
-          <tbody class="bg-white divide-y divide-cool-steel-200 dark:bg-cool-steel-900 dark:divide-white/10">
+          <tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-900 dark:divide-white/10">
             <%= for coverage <- @coverages do %>
               <tr id={"coverage-#{coverage.id}"}>
                 <td class="px-4 py-2 text-sm">
                   <.link
                     navigate={~p"/coverage/#{coverage.id}"}
-                    class="font-medium text-cerulean-600 hover:underline dark:text-cerulean-400"
+                    class="font-medium text-blue-600 hover:underline dark:text-blue-400"
                   >
                     {coverage.name}
                   </.link>
                 </td>
-                <td class="px-4 py-2 text-sm text-cool-steel-700 dark:text-cool-steel-300">
+                <td class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300">
                   <.link navigate={~p"/sites/#{coverage.site_id}"} class="hover:underline">
                     {coverage.site && coverage.site.name}
                   </.link>
                 </td>
-                <td class="px-4 py-2 text-sm text-cool-steel-700 dark:text-cool-steel-300">
+                <td class="px-4 py-2 text-sm text-gray-700 dark:text-gray-300">
                   <span class="font-mono text-xs">{coverage.antenna_slug}</span>
                 </td>
-                <td class="px-4 py-2 text-sm text-right text-cool-steel-700 dark:text-cool-steel-300 font-mono">
+                <td class="px-4 py-2 text-sm text-right text-gray-700 dark:text-gray-300 font-mono">
                   {Float.round(coverage.frequency_mhz / 1000.0, 3)}
                 </td>
-                <td class="px-4 py-2 text-sm text-right text-cool-steel-700 dark:text-cool-steel-300">
+                <td class="px-4 py-2 text-sm text-right text-gray-700 dark:text-gray-300">
                   {coverage.tx_power_dbm}
                 </td>
-                <td class="px-4 py-2 text-sm text-right text-cool-steel-700 dark:text-cool-steel-300 font-mono">
+                <td class="px-4 py-2 text-sm text-right text-gray-700 dark:text-gray-300 font-mono">
                   {Float.round(coverage.radius_m / 1609.344, 2)}
                 </td>
                 <td class="px-4 py-2 text-sm">
@@ -143,7 +137,7 @@
                   <div class="flex justify-end gap-2">
                     <.link
                       navigate={~p"/coverage/#{coverage.id}/edit"}
-                      class="text-cool-steel-500 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:text-cool-steel-200"
+                      class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
                     >
                       <.icon name="hero-pencil-square" class="h-4 w-4" />
                     </.link>
@@ -151,7 +145,7 @@
                       type="button"
                       phx-click="recompute"
                       phx-value-id={coverage.id}
-                      class="text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                      class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                       title={t("Recompute")}
                     >
                       <.icon name="hero-arrow-path" class="h-4 w-4" />
@@ -161,7 +155,7 @@
                       phx-click="delete"
                       phx-value-id={coverage.id}
                       data-confirm={t("Delete this coverage?")}
-                      class="text-sweet-salmon-600 hover:text-sweet-salmon-800 dark:text-sweet-salmon-400 dark:hover:text-sweet-salmon-300"
+                      class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
                       title={t("Delete")}
                     >
                       <.icon name="hero-trash" class="h-4 w-4" />
diff --git a/lib/towerops_web/live/coverage_live/map.html.heex b/lib/towerops_web/live/coverage_live/map.html.heex
index 345cdb8e..7261d672 100644
--- a/lib/towerops_web/live/coverage_live/map.html.heex
+++ b/lib/towerops_web/live/coverage_live/map.html.heex
@@ -26,13 +26,13 @@
     <div class="mt-6 flex items-center justify-center py-16">
       <div class="card shadow-md border dark:border-white/10 max-w-md w-full">
         <div class="items-center text-center">
-          <div class="rounded-full bg-cerulean-100 dark:bg-cerulean-900/40 p-4 mb-2">
-            <.icon name="hero-signal" class="h-12 w-12 text-cerulean-500 dark:text-cerulean-400" />
+          <div class="rounded-full bg-blue-100 dark:bg-blue-900/40 p-4 mb-2">
+            <.icon name="hero-signal" class="h-12 w-12 text-blue-500 dark:text-blue-400" />
           </div>
-          <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white">
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
             {t("No ready coverages")}
           </h3>
-          <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+          <p class="text-sm text-gray-600 dark:text-gray-400">
             {t(
               "Coverage maps appear here once the background compute finishes. Create or wait for a coverage to finish."
             )}
@@ -50,7 +50,7 @@
       id="coverage-multi-map"
       phx-hook="MultiCoverageMap"
       phx-update="ignore"
-      class="relative mt-6 h-[78vh] w-full rounded-lg border border-cool-steel-200 dark:border-white/10 bg-cool-steel-100 dark:bg-cool-steel-800 overflow-hidden"
+      class="relative mt-6 h-[78vh] w-full rounded-lg border border-gray-200 dark:border-white/10 bg-gray-100 dark:bg-gray-800 overflow-hidden"
       data-coverages={Jason.encode!(coverages_payload(@coverages))}
       data-enabled={Jason.encode!(@enabled_ids)}
     >
@@ -61,15 +61,15 @@
       class="pointer-events-none fixed top-32 left-1/2 -translate-x-[640px] z-[1100]"
       id="coverage-height-control"
     >
-      <div class="pointer-events-auto rounded-lg border border-cool-steel-200 dark:border-white/10 bg-white/95 dark:bg-cool-steel-900/95 backdrop-blur shadow-lg p-3 flex flex-col items-center gap-2 w-24">
+      <div class="pointer-events-auto rounded-lg border border-gray-200 dark:border-white/10 bg-white/95 dark:bg-gray-900/95 backdrop-blur shadow-lg p-3 flex flex-col items-center gap-2 w-24">
         <%!-- LOS vs NLOS mode toggle. The label and reference frame
               of the height slider switch with the mode. --%>
-        <div class="flex w-full text-[10px] font-medium border border-cool-steel-200 dark:border-white/10 rounded overflow-hidden">
+        <div class="flex w-full text-[10px] font-medium border border-gray-200 dark:border-white/10 rounded overflow-hidden">
           <button
             type="button"
             id="coverage-mode-los"
             data-mode="los"
-            class="flex-1 px-1 py-1 text-cool-steel-900 dark:text-white bg-cerulean-100 dark:bg-cerulean-900/40"
+            class="flex-1 px-1 py-1 text-gray-900 dark:text-white bg-blue-100 dark:bg-blue-900/40"
           >
             LOS
           </button>
@@ -77,14 +77,14 @@
             type="button"
             id="coverage-mode-nlos"
             data-mode="nlos"
-            class="flex-1 px-1 py-1 text-cool-steel-700 dark:text-cool-steel-300 hover:bg-cool-steel-100 dark:hover:bg-cool-steel-800"
+            class="flex-1 px-1 py-1 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"
           >
             NLOS
           </button>
         </div>
         <span
           id="coverage-mode-label"
-          class="text-[10px] font-medium text-cool-steel-700 dark:text-cool-steel-300 text-center leading-tight"
+          class="text-[10px] font-medium text-gray-700 dark:text-gray-300 text-center leading-tight"
         >
           {t("Height above clutter")}
         </span>
@@ -107,21 +107,21 @@
       class="pointer-events-none fixed top-32 right-6 z-[1100] w-72 max-h-[60vh] overflow-y-auto"
       id="coverage-tower-list"
     >
-      <div class="pointer-events-auto rounded-lg border border-cool-steel-200 dark:border-white/10 bg-white/95 dark:bg-cool-steel-900/95 backdrop-blur shadow-lg">
-        <div class="flex items-center justify-between px-3 py-2 border-b border-cool-steel-200 dark:border-white/10">
-          <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">{t("Towers")}</h3>
+      <div class="pointer-events-auto rounded-lg border border-gray-200 dark:border-white/10 bg-white/95 dark:bg-gray-900/95 backdrop-blur shadow-lg">
+        <div class="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-white/10">
+          <h3 class="text-sm font-semibold text-gray-900 dark:text-white">{t("Towers")}</h3>
           <div class="flex gap-1.5">
             <button
               type="button"
               phx-click="show_all"
-              class="text-xs px-1.5 py-0.5 rounded hover:bg-cool-steel-100 dark:hover:bg-cool-steel-800 text-cool-steel-700 dark:text-cool-steel-300"
+              class="text-xs px-1.5 py-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300"
             >
               {t("Show All")}
             </button>
             <button
               type="button"
               phx-click="hide_all"
-              class="text-xs px-1.5 py-0.5 rounded hover:bg-cool-steel-100 dark:hover:bg-cool-steel-800 text-cool-steel-700 dark:text-cool-steel-300"
+              class="text-xs px-1.5 py-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300"
             >
               {t("Hide All")}
             </button>
@@ -135,10 +135,10 @@
                 phx-click="toggle_coverage"
                 phx-value-id={c.id}
                 class={[
-                  "w-full text-left flex items-center gap-2 px-3 py-1.5 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800",
+                  "w-full text-left flex items-center gap-2 px-3 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-800",
                   if(c.id in @enabled_ids,
-                    do: "text-cool-steel-900 dark:text-white font-medium",
-                    else: "text-cool-steel-400 dark:text-cool-steel-500"
+                    do: "text-gray-900 dark:text-white font-medium",
+                    else: "text-gray-400 dark:text-gray-500"
                   )
                 ]}
               >
@@ -146,12 +146,12 @@
                   "inline-block h-2.5 w-2.5 rounded-full",
                   if(c.id in @enabled_ids,
                     do: "bg-green-500",
-                    else: "bg-cool-steel-300 dark:bg-cool-steel-600"
+                    else: "bg-gray-300 dark:bg-gray-600"
                   )
                 ]}>
                 </span>
                 <span class="text-sm truncate flex-1">{c.name}</span>
-                <span class="text-[10px] text-cool-steel-500 dark:text-cool-steel-400 truncate">
+                <span class="text-[10px] text-gray-500 dark:text-gray-400 truncate">
                   {c.site && c.site.name}
                 </span>
               </button>
@@ -163,11 +163,11 @@
 
     <%!-- Opacity slider + legend (bottom-center, overlay above map) --%>
     <div class="pointer-events-none fixed bottom-6 left-1/2 -translate-x-1/2 z-[1100] w-[640px] max-w-[90vw]">
-      <div class="pointer-events-auto rounded-lg border border-cool-steel-200 dark:border-white/10 bg-white/95 dark:bg-cool-steel-900/95 backdrop-blur shadow-lg p-3 space-y-2">
+      <div class="pointer-events-auto rounded-lg border border-gray-200 dark:border-white/10 bg-white/95 dark:bg-gray-900/95 backdrop-blur shadow-lg p-3 space-y-2">
         <div class="flex items-center gap-3">
           <label
             for="coverage-opacity-slider"
-            class="text-xs font-medium text-cool-steel-700 dark:text-cool-steel-300 w-16"
+            class="text-xs font-medium text-gray-700 dark:text-gray-300 w-16"
           >
             {t("Opacity")}
           </label>
@@ -185,7 +185,7 @@
         <div class="flex items-center gap-3">
           <label
             for="coverage-rssi-slider"
-            class="text-xs font-medium text-cool-steel-700 dark:text-cool-steel-300 w-16"
+            class="text-xs font-medium text-gray-700 dark:text-gray-300 w-16"
           >
             {t("Min RSSI")}
           </label>
@@ -200,7 +200,7 @@
           />
           <span id="coverage-rssi-label" class="text-xs font-mono w-16 text-right">-100 dBm</span>
         </div>
-        <div class="flex items-center gap-1 text-[10px] font-mono text-cool-steel-700 dark:text-cool-steel-300">
+        <div class="flex items-center gap-1 text-[10px] font-mono text-gray-700 dark:text-gray-300">
           <span class="w-3 h-3 rounded inline-block" style="background:rgb(0,200,0)"></span>
           <span>≥-50</span>
           <span class="w-3 h-3 rounded inline-block ml-2" style="background:rgb(200,230,0)">
@@ -224,10 +224,10 @@
       class="pointer-events-none fixed top-32 left-6 z-[1100] w-[420px] max-w-[90vw] max-h-[60vh] overflow-y-auto"
       id="coverage-probe-panel"
     >
-      <div class="pointer-events-auto rounded-lg border border-cool-steel-200 dark:border-white/10 bg-white/95 dark:bg-cool-steel-900/95 backdrop-blur shadow-lg">
-        <div class="flex items-center justify-between px-3 py-2 border-b border-cool-steel-200 dark:border-white/10">
-          <div class="flex items-center gap-2 text-xs font-mono text-cool-steel-700 dark:text-cool-steel-300">
-            <.icon name="hero-map-pin" class="h-4 w-4 text-cerulean-500" />
+      <div class="pointer-events-auto rounded-lg border border-gray-200 dark:border-white/10 bg-white/95 dark:bg-gray-900/95 backdrop-blur shadow-lg">
+        <div class="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-white/10">
+          <div class="flex items-center gap-2 text-xs font-mono text-gray-700 dark:text-gray-300">
+            <.icon name="hero-map-pin" class="h-4 w-4 text-blue-500" />
             <span>
               {:erlang.float_to_binary(@probe.lat * 1.0, decimals: 5)}, {:erlang.float_to_binary(
                 @probe.lon * 1.0,
@@ -238,13 +238,13 @@
           <button
             type="button"
             phx-click="close_probe"
-            class="text-cool-steel-500 hover:text-cool-steel-700 dark:text-cool-steel-400"
+            class="text-gray-500 hover:text-gray-700 dark:text-gray-400"
           >
             <.icon name="hero-x-mark" class="h-4 w-4" />
           </button>
         </div>
-        <div class="px-3 py-2 border-b border-cool-steel-200 dark:border-white/10 flex items-center gap-3">
-          <span class="text-xs text-cool-steel-700 dark:text-cool-steel-300">{t("Units:")}</span>
+        <div class="px-3 py-2 border-b border-gray-200 dark:border-white/10 flex items-center gap-3">
+          <span class="text-xs text-gray-700 dark:text-gray-300">{t("Units:")}</span>
           <label class="flex items-center gap-1 text-xs cursor-pointer">
             <input
               type="radio"
@@ -265,45 +265,45 @@
           </label>
         </div>
         <table class="min-w-full text-xs">
-          <thead class="bg-cool-steel-50 dark:bg-cool-steel-800">
+          <thead class="bg-gray-50 dark:bg-gray-800">
             <tr>
-              <th class="px-3 py-1.5 text-left font-medium text-cool-steel-700 dark:text-cool-steel-300">
+              <th class="px-3 py-1.5 text-left font-medium text-gray-700 dark:text-gray-300">
                 {t("Tower")}
               </th>
-              <th class="px-3 py-1.5 text-right font-medium text-cool-steel-700 dark:text-cool-steel-300">
+              <th class="px-3 py-1.5 text-right font-medium text-gray-700 dark:text-gray-300">
                 {t("Distance")}
               </th>
-              <th class="px-3 py-1.5 text-right font-medium text-cool-steel-700 dark:text-cool-steel-300">
+              <th class="px-3 py-1.5 text-right font-medium text-gray-700 dark:text-gray-300">
                 RSSI
               </th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-cool-steel-200 dark:divide-white/10">
+          <tbody class="divide-y divide-gray-200 dark:divide-white/10">
             <%= for row <- @probe.rows do %>
               <tr>
-                <td class="px-3 py-1.5 font-medium text-cool-steel-900 dark:text-cool-steel-100 truncate">
+                <td class="px-3 py-1.5 font-medium text-gray-900 dark:text-gray-100 truncate">
                   {row.coverage.name}
                 </td>
-                <td class="px-3 py-1.5 text-right font-mono text-cool-steel-700 dark:text-cool-steel-300">
+                <td class="px-3 py-1.5 text-right font-mono text-gray-700 dark:text-gray-300">
                   {fmt_distance(row.distance_m, @probe_units)}
                 </td>
                 <td class={[
                   "px-3 py-1.5 text-right font-mono",
                   cond do
                     row.rssi == :no_coverage ->
-                      "text-cool-steel-400"
+                      "text-gray-400"
 
                     is_number(row.rssi) and row.rssi >= -75 ->
                       "text-green-600 dark:text-green-400 font-bold"
 
                     is_number(row.rssi) and row.rssi >= -85 ->
-                      "text-wheat-600 dark:text-wheat-400"
+                      "text-yellow-600 dark:text-yellow-400"
 
                     is_number(row.rssi) ->
-                      "text-sweet-salmon-600 dark:text-sweet-salmon-400"
+                      "text-red-600 dark:text-red-400"
 
                     true ->
-                      "text-cool-steel-400"
+                      "text-gray-400"
                   end
                 ]}>
                   {fmt_rssi(row.rssi)}
diff --git a/lib/towerops_web/live/coverage_live/show.ex b/lib/towerops_web/live/coverage_live/show.ex
index 8549f4a6..85cfd273 100644
--- a/lib/towerops_web/live/coverage_live/show.ex
+++ b/lib/towerops_web/live/coverage_live/show.ex
@@ -120,19 +120,17 @@ defmodule ToweropsWeb.CoverageLive.Show do
   defdelegate fmt_rssi(v), to: CoverageMapView
 
   @doc false
-  def status_badge_class("draft"),
-    do: "bg-cool-steel-100 text-cool-steel-700 dark:bg-cool-steel-800 dark:text-cool-steel-300"
+  def status_badge_class("draft"), do: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300"
 
-  def status_badge_class("queued"), do: "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-300"
+  def status_badge_class("queued"), do: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300"
 
-  def status_badge_class("computing"), do: "bg-wheat-100 text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-300"
+  def status_badge_class("computing"), do: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300"
 
   def status_badge_class("ready"), do: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300"
 
-  def status_badge_class("failed"),
-    do: "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-300"
+  def status_badge_class("failed"), do: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300"
 
-  def status_badge_class(_), do: "bg-cool-steel-100 text-cool-steel-700"
+  def status_badge_class(_), do: "bg-gray-100 text-gray-700"
 
   @doc false
   def coverage_lat(coverage) do
@@ -168,8 +166,8 @@ defmodule ToweropsWeb.CoverageLive.Show do
   def param_row(assigns) do
     ~H"""
     <div class="flex justify-between gap-3">
-      <dt class="text-cool-steel-600 dark:text-cool-steel-400">{@label}</dt>
-      <dd class="text-cool-steel-900 dark:text-cool-steel-100 font-medium text-right">{@value}</dd>
+      <dt class="text-gray-600 dark:text-gray-400">{@label}</dt>
+      <dd class="text-gray-900 dark:text-gray-100 font-medium text-right">{@value}</dd>
     </div>
     """
   end
diff --git a/lib/towerops_web/live/coverage_live/show.html.heex b/lib/towerops_web/live/coverage_live/show.html.heex
index 58b40df6..c24514e2 100644
--- a/lib/towerops_web/live/coverage_live/show.html.heex
+++ b/lib/towerops_web/live/coverage_live/show.html.heex
@@ -12,10 +12,10 @@
         %{label: t("Coverage"), navigate: ~p"/coverage"},
         %{label: @coverage.name}
       ]} />
-      <h1 class="text-xl font-bold text-cool-steel-900 dark:text-white truncate">
+      <h1 class="text-xl font-bold text-gray-900 dark:text-white truncate">
         {@coverage.name}
       </h1>
-      <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <p class="text-sm text-gray-600 dark:text-gray-400">
         <.icon name="hero-map-pin" class="h-4 w-4 inline" />
         <.link navigate={~p"/sites/#{@coverage.site_id}"} class="hover:underline">
           {@coverage.site && @coverage.site.name}
@@ -53,25 +53,25 @@
 
   <%!-- Status banners (queued / computing / failed). --%>
   <%= if @coverage.status == "computing" do %>
-    <div class="mb-4 rounded-lg border border-wheat-200 bg-wheat-50 dark:border-wheat-900/50 dark:bg-wheat-900/20 p-4">
+    <div class="mb-4 rounded-lg border border-yellow-200 bg-yellow-50 dark:border-yellow-900/50 dark:bg-yellow-900/20 p-4">
       <div class="flex items-start gap-3">
         <.icon
           name="hero-arrow-path"
-          class="h-5 w-5 text-wheat-700 dark:text-wheat-400 animate-spin shrink-0"
+          class="h-5 w-5 text-yellow-700 dark:text-yellow-400 animate-spin shrink-0"
         />
         <div class="flex-1">
-          <p class="text-sm font-medium text-wheat-900 dark:text-wheat-200">
+          <p class="text-sm font-medium text-yellow-900 dark:text-yellow-200">
             {t("Computing coverage…")}
           </p>
           <div class="mt-1 flex items-center gap-3">
-            <div class="flex-1 h-2 bg-wheat-200 dark:bg-wheat-900 rounded-full overflow-hidden">
+            <div class="flex-1 h-2 bg-yellow-200 dark:bg-yellow-900 rounded-full overflow-hidden">
               <div
-                class="h-full bg-wheat-600 dark:bg-wheat-500 transition-all"
+                class="h-full bg-yellow-600 dark:bg-yellow-500 transition-all"
                 style={"width: #{@coverage.progress_pct}%"}
               >
               </div>
             </div>
-            <span class="text-sm text-wheat-800 dark:text-wheat-300 font-mono shrink-0">
+            <span class="text-sm text-yellow-800 dark:text-yellow-300 font-mono shrink-0">
               {@coverage.progress_pct}%
             </span>
           </div>
@@ -81,20 +81,17 @@
   <% end %>
 
   <%= if @coverage.status == "failed" do %>
-    <div class="mb-4 rounded-lg border border-sweet-salmon-200 bg-sweet-salmon-50 dark:border-sweet-salmon-900/50 dark:bg-sweet-salmon-900/20 p-4">
+    <div class="mb-4 rounded-lg border border-red-200 bg-red-50 dark:border-red-900/50 dark:bg-red-900/20 p-4">
       <div class="flex items-start gap-3">
         <.icon
           name="hero-exclamation-triangle"
-          class="h-5 w-5 text-sweet-salmon-700 dark:text-sweet-salmon-400 flex-shrink-0 mt-0.5"
+          class="h-5 w-5 text-red-700 dark:text-red-400 flex-shrink-0 mt-0.5"
         />
         <div>
-          <p class="text-sm font-medium text-sweet-salmon-900 dark:text-sweet-salmon-200">
+          <p class="text-sm font-medium text-red-900 dark:text-red-200">
             {t("Compute failed")}
           </p>
-          <p
-            :if={@coverage.error_message}
-            class="mt-1 text-sm text-sweet-salmon-800 dark:text-sweet-salmon-300"
-          >
+          <p :if={@coverage.error_message} class="mt-1 text-sm text-red-800 dark:text-red-300">
             {@coverage.error_message}
           </p>
         </div>
@@ -103,8 +100,8 @@
   <% end %>
 
   <%= if @coverage.status == "queued" do %>
-    <div class="mb-4 rounded-lg border border-cerulean-200 bg-cerulean-50 dark:border-cerulean-900/50 dark:bg-cerulean-900/20 p-4">
-      <p class="text-sm text-cerulean-900 dark:text-cerulean-200">
+    <div class="mb-4 rounded-lg border border-blue-200 bg-blue-50 dark:border-blue-900/50 dark:bg-blue-900/20 p-4">
+      <p class="text-sm text-blue-900 dark:text-blue-200">
         <.icon name="hero-clock" class="h-4 w-4 inline" />
         {t("Coverage is queued. Compute will start shortly.")}
       </p>
@@ -118,7 +115,7 @@
         id="coverage-multi-map"
         phx-hook="MultiCoverageMap"
         phx-update="ignore"
-        class="relative h-[78vh] w-full rounded-lg border border-cool-steel-200 dark:border-white/10 bg-cool-steel-100 dark:bg-cool-steel-800 overflow-hidden"
+        class="relative h-[78vh] w-full rounded-lg border border-gray-200 dark:border-white/10 bg-gray-100 dark:bg-gray-800 overflow-hidden"
         data-coverages={Jason.encode!(coverages_payload([@coverage]))}
         data-enabled={Jason.encode!([@coverage.id])}
       >
@@ -129,13 +126,13 @@
         class="pointer-events-none fixed top-32 left-6 z-[1100]"
         id="coverage-height-control"
       >
-        <div class="pointer-events-auto rounded-lg border border-cool-steel-200 dark:border-white/10 bg-white/95 dark:bg-cool-steel-900/95 backdrop-blur shadow-lg p-3 flex flex-col items-center gap-2 w-24">
-          <div class="flex w-full text-[10px] font-medium border border-cool-steel-200 dark:border-white/10 rounded overflow-hidden">
+        <div class="pointer-events-auto rounded-lg border border-gray-200 dark:border-white/10 bg-white/95 dark:bg-gray-900/95 backdrop-blur shadow-lg p-3 flex flex-col items-center gap-2 w-24">
+          <div class="flex w-full text-[10px] font-medium border border-gray-200 dark:border-white/10 rounded overflow-hidden">
             <button
               type="button"
               id="coverage-mode-los"
               data-mode="los"
-              class="flex-1 px-1 py-1 text-cool-steel-900 dark:text-white bg-cerulean-100 dark:bg-cerulean-900/40"
+              class="flex-1 px-1 py-1 text-gray-900 dark:text-white bg-blue-100 dark:bg-blue-900/40"
             >
               LOS
             </button>
@@ -143,14 +140,14 @@
               type="button"
               id="coverage-mode-nlos"
               data-mode="nlos"
-              class="flex-1 px-1 py-1 text-cool-steel-700 dark:text-cool-steel-300 hover:bg-cool-steel-100 dark:hover:bg-cool-steel-800"
+              class="flex-1 px-1 py-1 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"
             >
               NLOS
             </button>
           </div>
           <span
             id="coverage-mode-label"
-            class="text-[10px] font-medium text-cool-steel-700 dark:text-cool-steel-300 text-center leading-tight"
+            class="text-[10px] font-medium text-gray-700 dark:text-gray-300 text-center leading-tight"
           >
             {t("Height above clutter")}
           </span>
@@ -174,15 +171,15 @@
           class="pointer-events-none fixed top-32 right-6 z-[1100] w-80 max-h-[70vh] overflow-y-auto"
           id="coverage-params-panel"
         >
-          <div class="pointer-events-auto rounded-lg border border-cool-steel-200 dark:border-white/10 bg-white/95 dark:bg-cool-steel-900/95 backdrop-blur shadow-lg">
-            <div class="flex items-center justify-between px-3 py-2 border-b border-cool-steel-200 dark:border-white/10">
-              <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+          <div class="pointer-events-auto rounded-lg border border-gray-200 dark:border-white/10 bg-white/95 dark:bg-gray-900/95 backdrop-blur shadow-lg">
+            <div class="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-white/10">
+              <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                 {t("Parameters")}
               </h3>
               <button
                 type="button"
                 phx-click="toggle_params"
-                class="text-cool-steel-500 hover:text-cool-steel-700 dark:text-cool-steel-400"
+                class="text-gray-500 hover:text-gray-700 dark:text-gray-400"
               >
                 <.icon name="hero-x-mark" class="h-4 w-4" />
               </button>
@@ -236,7 +233,7 @@
                 type="button"
                 phx-click="delete"
                 data-confirm={t("Delete this coverage?")}
-                class="mt-3 w-full text-sm text-sweet-salmon-600 hover:text-sweet-salmon-800 dark:text-sweet-salmon-400 dark:hover:text-sweet-salmon-300"
+                class="mt-3 w-full text-sm text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
               >
                 <.icon name="hero-trash" class="h-4 w-4 inline" /> {t("Delete coverage")}
               </button>
@@ -247,11 +244,11 @@
 
       <%!-- Opacity + RSSI filter + legend (bottom-center). --%>
       <div class="pointer-events-none fixed bottom-6 left-1/2 -translate-x-1/2 z-[1100] w-[640px] max-w-[90vw]">
-        <div class="pointer-events-auto rounded-lg border border-cool-steel-200 dark:border-white/10 bg-white/95 dark:bg-cool-steel-900/95 backdrop-blur shadow-lg p-3 space-y-2">
+        <div class="pointer-events-auto rounded-lg border border-gray-200 dark:border-white/10 bg-white/95 dark:bg-gray-900/95 backdrop-blur shadow-lg p-3 space-y-2">
           <div class="flex items-center gap-3">
             <label
               for="coverage-opacity-slider"
-              class="text-xs font-medium text-cool-steel-700 dark:text-cool-steel-300 w-16"
+              class="text-xs font-medium text-gray-700 dark:text-gray-300 w-16"
             >
               {t("Opacity")}
             </label>
@@ -268,7 +265,7 @@
           <div class="flex items-center gap-3">
             <label
               for="coverage-rssi-slider"
-              class="text-xs font-medium text-cool-steel-700 dark:text-cool-steel-300 w-16"
+              class="text-xs font-medium text-gray-700 dark:text-gray-300 w-16"
             >
               {t("Min RSSI")}
             </label>
@@ -285,7 +282,7 @@
               -100 dBm
             </span>
           </div>
-          <div class="flex items-center gap-1 text-[10px] font-mono text-cool-steel-700 dark:text-cool-steel-300">
+          <div class="flex items-center gap-1 text-[10px] font-mono text-gray-700 dark:text-gray-300">
             <span class="w-3 h-3 rounded inline-block" style="background:rgb(0,200,0)"></span>
             <span>≥-50</span>
             <span class="w-3 h-3 rounded inline-block ml-2" style="background:rgb(200,230,0)">
@@ -310,10 +307,10 @@
           class="pointer-events-none fixed top-32 left-32 z-[1100] w-[360px] max-w-[90vw] max-h-[60vh] overflow-y-auto"
           id="coverage-probe-panel"
         >
-          <div class="pointer-events-auto rounded-lg border border-cool-steel-200 dark:border-white/10 bg-white/95 dark:bg-cool-steel-900/95 backdrop-blur shadow-lg">
-            <div class="flex items-center justify-between px-3 py-2 border-b border-cool-steel-200 dark:border-white/10">
-              <div class="flex items-center gap-2 text-xs font-mono text-cool-steel-700 dark:text-cool-steel-300">
-                <.icon name="hero-map-pin" class="h-4 w-4 text-cerulean-500" />
+          <div class="pointer-events-auto rounded-lg border border-gray-200 dark:border-white/10 bg-white/95 dark:bg-gray-900/95 backdrop-blur shadow-lg">
+            <div class="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-white/10">
+              <div class="flex items-center gap-2 text-xs font-mono text-gray-700 dark:text-gray-300">
+                <.icon name="hero-map-pin" class="h-4 w-4 text-blue-500" />
                 <span>
                   {:erlang.float_to_binary(@probe.lat * 1.0, decimals: 5)}, {:erlang.float_to_binary(
                     @probe.lon * 1.0,
@@ -324,15 +321,13 @@
               <button
                 type="button"
                 phx-click="close_probe"
-                class="text-cool-steel-500 hover:text-cool-steel-700 dark:text-cool-steel-400"
+                class="text-gray-500 hover:text-gray-700 dark:text-gray-400"
               >
                 <.icon name="hero-x-mark" class="h-4 w-4" />
               </button>
             </div>
-            <div class="px-3 py-2 border-b border-cool-steel-200 dark:border-white/10 flex items-center gap-3">
-              <span class="text-xs text-cool-steel-700 dark:text-cool-steel-300">
-                {t("Units:")}
-              </span>
+            <div class="px-3 py-2 border-b border-gray-200 dark:border-white/10 flex items-center gap-3">
+              <span class="text-xs text-gray-700 dark:text-gray-300">{t("Units:")}</span>
               <label class="flex items-center gap-1 text-xs cursor-pointer">
                 <input
                   type="radio"
@@ -353,45 +348,45 @@
               </label>
             </div>
             <table class="min-w-full text-xs">
-              <thead class="bg-cool-steel-50 dark:bg-cool-steel-800">
+              <thead class="bg-gray-50 dark:bg-gray-800">
                 <tr>
-                  <th class="px-3 py-1.5 text-left font-medium text-cool-steel-700 dark:text-cool-steel-300">
+                  <th class="px-3 py-1.5 text-left font-medium text-gray-700 dark:text-gray-300">
                     {t("Tower")}
                   </th>
-                  <th class="px-3 py-1.5 text-right font-medium text-cool-steel-700 dark:text-cool-steel-300">
+                  <th class="px-3 py-1.5 text-right font-medium text-gray-700 dark:text-gray-300">
                     {t("Distance")}
                   </th>
-                  <th class="px-3 py-1.5 text-right font-medium text-cool-steel-700 dark:text-cool-steel-300">
+                  <th class="px-3 py-1.5 text-right font-medium text-gray-700 dark:text-gray-300">
                     RSSI
                   </th>
                 </tr>
               </thead>
-              <tbody class="divide-y divide-cool-steel-200 dark:divide-white/10">
+              <tbody class="divide-y divide-gray-200 dark:divide-white/10">
                 <%= for row <- @probe.rows do %>
                   <tr>
-                    <td class="px-3 py-1.5 font-medium text-cool-steel-900 dark:text-cool-steel-100 truncate">
+                    <td class="px-3 py-1.5 font-medium text-gray-900 dark:text-gray-100 truncate">
                       {row.coverage.name}
                     </td>
-                    <td class="px-3 py-1.5 text-right font-mono text-cool-steel-700 dark:text-cool-steel-300">
+                    <td class="px-3 py-1.5 text-right font-mono text-gray-700 dark:text-gray-300">
                       {fmt_distance(row.distance_m, @probe_units)}
                     </td>
                     <td class={[
                       "px-3 py-1.5 text-right font-mono",
                       cond do
                         row.rssi == :no_coverage ->
-                          "text-cool-steel-400"
+                          "text-gray-400"
 
                         is_number(row.rssi) and row.rssi >= -75 ->
                           "text-green-600 dark:text-green-400 font-bold"
 
                         is_number(row.rssi) and row.rssi >= -85 ->
-                          "text-wheat-600 dark:text-wheat-400"
+                          "text-yellow-600 dark:text-yellow-400"
 
                         is_number(row.rssi) ->
-                          "text-sweet-salmon-600 dark:text-sweet-salmon-400"
+                          "text-red-600 dark:text-red-400"
 
                         true ->
-                          "text-cool-steel-400"
+                          "text-gray-400"
                       end
                     ]}>
                       {fmt_rssi(row.rssi)}
@@ -404,10 +399,10 @@
         </div>
       <% end %>
     <% true -> %>
-      <div class="h-[78vh] w-full rounded-lg border border-cool-steel-200 dark:border-white/10 flex items-center justify-center bg-cool-steel-50 dark:bg-cool-steel-900 text-center px-6">
+      <div class="h-[78vh] w-full rounded-lg border border-gray-200 dark:border-white/10 flex items-center justify-center bg-gray-50 dark:bg-gray-900 text-center px-6">
         <div>
-          <.icon name="hero-signal-slash" class="h-12 w-12 mx-auto text-cool-steel-400 mb-2" />
-          <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+          <.icon name="hero-signal-slash" class="h-12 w-12 mx-auto text-gray-400 mb-2" />
+          <p class="text-sm text-gray-600 dark:text-gray-400">
             {t("No heatmap available yet. Run compute to generate the coverage prediction.")}
           </p>
         </div>
diff --git a/lib/towerops_web/live/dashboard_live.ex b/lib/towerops_web/live/dashboard_live.ex
index bedc5248..8701b7b7 100644
--- a/lib/towerops_web/live/dashboard_live.ex
+++ b/lib/towerops_web/live/dashboard_live.ex
@@ -258,22 +258,19 @@ defmodule ToweropsWeb.DashboardLive do
   defp favicon_status(_devices_down, _alert_count), do: "green"
 
   defp health_score_color(score) when score > 80, do: "text-green-600 dark:text-green-400"
-  defp health_score_color(score) when score > 50, do: "text-wheat-600 dark:text-wheat-400"
-  defp health_score_color(_score), do: "text-sweet-salmon-600 dark:text-sweet-salmon-400"
+  defp health_score_color(score) when score > 50, do: "text-yellow-600 dark:text-yellow-400"
+  defp health_score_color(_score), do: "text-red-600 dark:text-red-400"
 
   defp source_classes("preseem"), do: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400"
   defp source_classes("snmp"), do: "bg-cyan-100 text-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-400"
-  defp source_classes("gaiia"), do: "bg-wheat-100 text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400"
-
-  defp source_classes("system"),
-    do: "bg-cool-steel-100 text-cool-steel-700 dark:bg-cool-steel-700 dark:text-cool-steel-300"
-
-  defp source_classes(_), do: "bg-cool-steel-100 text-cool-steel-600 dark:bg-cool-steel-800 dark:text-cool-steel-400"
+  defp source_classes("gaiia"), do: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400"
+  defp source_classes("system"), do: "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300"
+  defp source_classes(_), do: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
 
   defp config_change_impact_color(change) do
     cond do
-      change.change_size > 50 -> "bg-sweet-salmon-500"
-      change.change_size > 20 -> "bg-wheat-500"
+      change.change_size > 50 -> "bg-red-500"
+      change.change_size > 20 -> "bg-yellow-500"
       true -> "bg-green-500"
     end
   end
@@ -322,15 +319,15 @@ defmodule ToweropsWeb.DashboardLive do
     amount = decimal_to_float(mrr)
 
     cond do
-      amount >= 1000 -> "border-l-4 border-sweet-salmon-500 bg-sweet-salmon-50 dark:bg-sweet-salmon-950/30"
+      amount >= 1000 -> "border-l-4 border-red-500 bg-red-50 dark:bg-red-950/30"
       amount >= 100 -> "border-l-4 border-orange-500 bg-orange-50 dark:bg-orange-950/30"
-      amount > 0 -> "border-l-4 border-wheat-500 bg-wheat-50 dark:bg-wheat-950/30"
-      true -> "border-l-4 border-cool-steel-300 bg-cool-steel-50 dark:bg-cool-steel-800/50"
+      amount > 0 -> "border-l-4 border-yellow-500 bg-yellow-50 dark:bg-yellow-950/30"
+      true -> "border-l-4 border-gray-300 bg-gray-50 dark:bg-gray-800/50"
     end
   end
 
-  defp site_health_dot(:red), do: "bg-sweet-salmon-500"
-  defp site_health_dot(:yellow), do: "bg-wheat-500"
+  defp site_health_dot(:red), do: "bg-red-500"
+  defp site_health_dot(:yellow), do: "bg-yellow-500"
   defp site_health_dot(_), do: "bg-green-500"
 
   defp decimal_to_float(%Decimal{} = d), do: Decimal.to_float(d)
@@ -342,8 +339,8 @@ defmodule ToweropsWeb.DashboardLive do
   defp mrr_at_risk_positive?(_), do: false
 
   defp uptime_color(pct) when pct >= 99.0, do: "text-green-600 dark:text-green-400"
-  defp uptime_color(pct) when pct >= 95.0, do: "text-wheat-600 dark:text-wheat-400"
-  defp uptime_color(_pct), do: "text-sweet-salmon-600 dark:text-sweet-salmon-400"
+  defp uptime_color(pct) when pct >= 95.0, do: "text-yellow-600 dark:text-yellow-400"
+  defp uptime_color(_pct), do: "text-red-600 dark:text-red-400"
 
   defp format_qoe(score), do: :erlang.float_to_binary(score / 1, decimals: 1)
 
diff --git a/lib/towerops_web/live/dashboard_live.html.heex b/lib/towerops_web/live/dashboard_live.html.heex
index 55cf48f4..c70511d2 100644
--- a/lib/towerops_web/live/dashboard_live.html.heex
+++ b/lib/towerops_web/live/dashboard_live.html.heex
@@ -17,14 +17,14 @@
        ═══════════════════════════════════════════════ --%>
   <div class="flex items-center justify-between">
     <div class="flex items-center gap-3">
-      <h1 class="text-lg font-bold text-cool-steel-900 dark:text-white">
+      <h1 class="text-lg font-bold text-gray-900 dark:text-white">
         {@current_scope.organization.name}
       </h1>
-      <span class="text-xs text-cool-steel-400 dark:text-cool-steel-500 dark:text-cool-steel-400 font-mono">
+      <span class="text-xs text-gray-400 dark:text-gray-500 dark:text-gray-400 font-mono">
         NOC
       </span>
     </div>
-    <div class="flex items-center gap-1.5 text-xs text-cool-steel-400 dark:text-cool-steel-500 font-mono">
+    <div class="flex items-center gap-1.5 text-xs text-gray-400 dark:text-gray-500 font-mono">
       <span class="relative flex h-2 w-2">
         <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75">
         </span>
@@ -40,70 +40,61 @@
 
   <%!-- Empty State --%>
   <%= if assigns[:summary] && @device_count == 0 do %>
-    <div class="mt-12 rounded-xl border-2 border-dashed border-cool-steel-300 bg-cool-steel-50/50 p-16 text-center dark:border-white/20 dark:bg-cool-steel-800/30">
-      <.icon
-        name="hero-light-bulb"
-        class="mx-auto h-14 w-14 text-cerulean-500 dark:text-cerulean-400"
-      />
-      <h3 class="mt-6 text-xl font-semibold text-cool-steel-900 dark:text-white">
+    <div class="mt-12 rounded-xl border-2 border-dashed border-gray-300 bg-gray-50/50 p-16 text-center dark:border-white/20 dark:bg-gray-800/30">
+      <.icon name="hero-light-bulb" class="mx-auto h-14 w-14 text-blue-500 dark:text-blue-400" />
+      <h3 class="mt-6 text-xl font-semibold text-gray-900 dark:text-white">
         {t("Let's get started!")}
       </h3>
-      <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400 max-w-md mx-auto">
+      <p class="mt-2 text-sm text-gray-500 dark:text-gray-400 max-w-md mx-auto">
         {t("Set up your network monitoring in a few steps.")}
       </p>
       <div class="mt-10 max-w-lg mx-auto">
         <div class="space-y-5 text-left">
           <%= if @current_scope.organization.use_sites do %>
             <div class="flex gap-4 items-start">
-              <div class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 text-cerulean-600 font-semibold text-sm dark:bg-cerulean-900 dark:text-cerulean-300">
+              <div class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 font-semibold text-sm dark:bg-blue-900 dark:text-blue-300">
                 1
               </div>
               <div>
-                <h4 class="font-medium text-cool-steel-900 dark:text-white">
-                  {t("Create a Site")}
-                </h4>
-                <p class="mt-0.5 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                <h4 class="font-medium text-gray-900 dark:text-white">{t("Create a Site")}</h4>
+                <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
                   {t("Sites represent your physical locations")}
                 </p>
               </div>
             </div>
             <div class="flex gap-4 items-start">
-              <div class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-cool-steel-100 text-cool-steel-500 font-semibold text-sm dark:bg-cool-steel-700 dark:text-cool-steel-400">
+              <div class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 text-gray-500 font-semibold text-sm dark:bg-gray-700 dark:text-gray-400">
                 2
               </div>
               <div>
-                <h4 class="font-medium text-cool-steel-900 dark:text-white">
-                  {t("Add Devices")}
-                </h4>
-                <p class="mt-0.5 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                <h4 class="font-medium text-gray-900 dark:text-white">{t("Add Devices")}</h4>
+                <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
                   {t("Add routers, switches, and servers to your sites")}
                 </p>
               </div>
             </div>
           <% else %>
             <div class="flex gap-4 items-start">
-              <div class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 text-cerulean-600 font-semibold text-sm dark:bg-cerulean-900 dark:text-cerulean-300">
+              <div class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 text-blue-600 font-semibold text-sm dark:bg-blue-900 dark:text-blue-300">
                 1
               </div>
               <div>
-                <h4 class="font-medium text-cool-steel-900 dark:text-white">
-                  {t("Add Devices")}
-                </h4>
-                <p class="mt-0.5 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                <h4 class="font-medium text-gray-900 dark:text-white">{t("Add Devices")}</h4>
+                <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
                   {t("Add network devices to monitor")}
                 </p>
               </div>
             </div>
           <% end %>
           <div class="flex gap-4 items-start">
-            <div class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-cool-steel-100 text-cool-steel-500 font-semibold text-sm dark:bg-cool-steel-700 dark:text-cool-steel-400">
+            <div class="flex-shrink-0 flex items-center justify-center w-8 h-8 rounded-full bg-gray-100 text-gray-500 font-semibold text-sm dark:bg-gray-700 dark:text-gray-400">
               {if @current_scope.organization.use_sites, do: "3", else: "2"}
             </div>
             <div>
-              <h4 class="font-medium text-cool-steel-900 dark:text-white">
+              <h4 class="font-medium text-gray-900 dark:text-white">
                 {t("Monitor & Receive Alerts")}
               </h4>
-              <p class="mt-0.5 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-0.5 text-sm text-gray-500 dark:text-gray-400">
                 {t("TowerOps automatically monitors your devices and alerts you of issues")}
               </p>
             </div>
@@ -128,33 +119,30 @@
   <%= if assigns[:setup_checklist] && !@setup_checklist.all_done && @device_count > 0 do %>
     <div
       id="setup-checklist"
-      class="mt-4 rounded-lg border border-cerulean-200 bg-cerulean-50/50 dark:border-cerulean-800/50 dark:bg-cerulean-900/10 p-4"
+      class="mt-4 rounded-lg border border-blue-200 bg-blue-50/50 dark:border-blue-800/50 dark:bg-blue-900/10 p-4"
     >
       <div class="flex items-center justify-between mb-3">
         <div class="flex items-center gap-2">
-          <.icon
-            name="hero-rocket-launch"
-            class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400"
-          />
-          <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+          <.icon name="hero-rocket-launch" class="h-5 w-5 text-blue-600 dark:text-blue-400" />
+          <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
             {t("Setup Progress")}
           </h3>
-          <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
+          <span class="text-xs text-gray-500 dark:text-gray-400">
             {@setup_checklist.completed}/{@setup_checklist.total}
           </span>
         </div>
         <button
           phx-click={JS.hide(to: "#setup-checklist")}
-          class="text-cool-steel-400 hover:text-cool-steel-600 dark:hover:text-cool-steel-300"
+          class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
           title={t("Dismiss")}
         >
           <.icon name="hero-x-mark" class="h-4 w-4" />
         </button>
       </div>
       <%!-- Progress bar --%>
-      <div class="w-full bg-cool-steel-200 dark:bg-cool-steel-700 rounded-full h-1.5 mb-3">
+      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5 mb-3">
         <div
-          class="bg-cerulean-600 dark:bg-cerulean-400 h-1.5 rounded-full transition-all duration-500"
+          class="bg-blue-600 dark:bg-blue-400 h-1.5 rounded-full transition-all duration-500"
           style={"width: #{@setup_checklist.completed / @setup_checklist.total * 100}%"}
         >
         </div>
@@ -166,22 +154,22 @@
             class={[
               "flex items-center gap-2.5 rounded-md px-3 py-2 text-sm transition-colors",
               if(step.done,
-                do: "text-cool-steel-400 dark:text-cool-steel-500",
+                do: "text-gray-400 dark:text-gray-500",
                 else:
-                  "text-cool-steel-700 dark:text-cool-steel-300 hover:bg-cerulean-100/50 dark:hover:bg-cerulean-900/20"
+                  "text-gray-700 dark:text-gray-300 hover:bg-blue-100/50 dark:hover:bg-blue-900/20"
               )
             ]}
           >
             <%= if step.done do %>
               <.icon name="hero-check-circle-solid" class="h-5 w-5 text-green-500 shrink-0" />
             <% else %>
-              <div class="h-5 w-5 rounded-full border-2 border-cool-steel-300 dark:border-cool-steel-600 shrink-0" />
+              <div class="h-5 w-5 rounded-full border-2 border-gray-300 dark:border-gray-600 shrink-0" />
             <% end %>
             <span class={if step.done, do: "line-through"}>
               {step.label}
             </span>
             <%= if step[:optional] do %>
-              <span class="text-xs text-cool-steel-400 dark:text-cool-steel-500">optional</span>
+              <span class="text-xs text-gray-400 dark:text-gray-500">optional</span>
             <% end %>
           </.link>
         <% end %>
@@ -193,17 +181,17 @@
     <%!-- ═══════════════════════════════════════════════
          CONDENSED STATUS BAR — single dense line
          ═══════════════════════════════════════════════ --%>
-    <div class="mt-4 grid grid-cols-2 gap-0.5 rounded-md border border-cool-steel-200 bg-cool-steel-50 px-1 py-1 dark:border-white/10 dark:bg-cool-steel-800/80 font-mono text-xs sm:flex sm:flex-wrap sm:items-center sm:gap-1">
+    <div class="mt-4 grid grid-cols-2 gap-0.5 rounded-md border border-gray-200 bg-gray-50 px-1 py-1 dark:border-white/10 dark:bg-gray-800/80 font-mono text-xs sm:flex sm:flex-wrap sm:items-center sm:gap-1">
       <%!-- Health --%>
       <div class={[
         "flex items-center gap-1.5 rounded px-2.5 py-1.5",
         cond do
           @summary.health_score > 80 -> "bg-green-100/80 dark:bg-green-900/30"
-          @summary.health_score > 50 -> "bg-wheat-100/80 dark:bg-wheat-900/30"
-          true -> "bg-sweet-salmon-100/80 dark:bg-sweet-salmon-900/30"
+          @summary.health_score > 50 -> "bg-yellow-100/80 dark:bg-yellow-900/30"
+          true -> "bg-red-100/80 dark:bg-red-900/30"
         end
       ]}>
-        <span class="text-cool-steel-500 dark:text-cool-steel-400 text-[10px] uppercase font-sans font-medium">
+        <span class="text-gray-500 dark:text-gray-400 text-[10px] uppercase font-sans font-medium">
           Health
         </span>
         <span class={[
@@ -224,11 +212,11 @@
         </span>
       </div>
 
-      <span class="hidden text-cool-steel-300 dark:text-cool-steel-600 sm:inline">│</span>
+      <span class="hidden text-gray-300 dark:text-gray-600 sm:inline">│</span>
 
       <%!-- Uptime --%>
       <div class="flex items-center gap-1.5 px-2.5 py-1.5">
-        <span class="text-cool-steel-500 dark:text-cool-steel-400 text-[10px] uppercase font-sans font-medium">
+        <span class="text-gray-500 dark:text-gray-400 text-[10px] uppercase font-sans font-medium">
           Up
         </span>
         <span class={["font-bold text-sm", uptime_color(@uptime_percentage)]}>
@@ -236,29 +224,29 @@
             do: "100",
             else: :erlang.float_to_binary(@uptime_percentage, decimals: 1)}%
         </span>
-        <span class="text-cool-steel-400 dark:text-cool-steel-500 dark:text-cool-steel-400">
+        <span class="text-gray-400 dark:text-gray-500 dark:text-gray-400">
           {@device_up}/{@device_count}
         </span>
         <%= if @device_down > 0 do %>
-          <span class="text-sweet-salmon-500 font-bold">{@device_down}↓</span>
+          <span class="text-red-500 font-bold">{@device_down}↓</span>
         <% end %>
       </div>
 
-      <span class="hidden text-cool-steel-300 dark:text-cool-steel-600 sm:inline">│</span>
+      <span class="hidden text-gray-300 dark:text-gray-600 sm:inline">│</span>
 
       <%!-- Alerts --%>
       <.link
         navigate={~p"/alerts"}
-        class="flex items-center gap-1.5 px-2.5 py-1.5 rounded hover:bg-cool-steel-200/50 dark:hover:bg-white/5 transition"
+        class="flex items-center gap-1.5 px-2.5 py-1.5 rounded hover:bg-gray-200/50 dark:hover:bg-white/5 transition"
       >
-        <span class="text-cool-steel-500 dark:text-cool-steel-400 text-[10px] uppercase font-sans font-medium">
+        <span class="text-gray-500 dark:text-gray-400 text-[10px] uppercase font-sans font-medium">
           Alerts
         </span>
         <%= if @total_alert_count > 0 do %>
-          <span class="font-bold text-sm text-sweet-salmon-600 dark:text-sweet-salmon-400">
+          <span class="font-bold text-sm text-red-600 dark:text-red-400">
             {@total_alert_count}
           </span>
-          <span class="text-sweet-salmon-500">
+          <span class="text-red-500">
             {String.duplicate("●", min(@total_alert_count, 5))}
           </span>
         <% else %>
@@ -268,36 +256,34 @@
       </.link>
 
       <%= if @current_scope.organization.use_sites && @sites_count > 0 do %>
-        <span class="hidden text-cool-steel-300 dark:text-cool-steel-600 sm:inline">│</span>
+        <span class="hidden text-gray-300 dark:text-gray-600 sm:inline">│</span>
         <.link
           navigate={~p"/sites"}
-          class="flex items-center gap-1.5 px-2.5 py-1.5 rounded hover:bg-cool-steel-200/50 dark:hover:bg-white/5 transition"
+          class="flex items-center gap-1.5 px-2.5 py-1.5 rounded hover:bg-gray-200/50 dark:hover:bg-white/5 transition"
         >
-          <span class="text-cool-steel-500 dark:text-cool-steel-400 text-[10px] uppercase font-sans font-medium">
+          <span class="text-gray-500 dark:text-gray-400 text-[10px] uppercase font-sans font-medium">
             Sites
           </span>
-          <span class="font-bold text-sm text-cool-steel-900 dark:text-white">
-            {@sites_count}
-          </span>
+          <span class="font-bold text-sm text-gray-900 dark:text-white">{@sites_count}</span>
         </.link>
       <% end %>
 
       <%= if @has_subscribers do %>
-        <span class="hidden text-cool-steel-300 dark:text-cool-steel-600 sm:inline">│</span>
+        <span class="hidden text-gray-300 dark:text-gray-600 sm:inline">│</span>
         <div class="flex items-center gap-1.5 px-2.5 py-1.5">
           <span
-            class="text-cool-steel-500 dark:text-cool-steel-400 text-[10px] uppercase font-sans font-medium"
+            class="text-gray-500 dark:text-gray-400 text-[10px] uppercase font-sans font-medium"
             title="Subscribers"
           >
             Subs
           </span>
-          <span class="font-bold text-sm text-cool-steel-900 dark:text-white">
+          <span class="font-bold text-sm text-gray-900 dark:text-white">
             {format_number(@summary.subscribers.total)}
           </span>
           <%!-- Financial data: role-gated --%>
           <%= if @can_view_financials do %>
             <span
-              class="text-cool-steel-400 dark:text-cool-steel-500 dark:text-cool-steel-400"
+              class="text-gray-400 dark:text-gray-500 dark:text-gray-400"
               title="Monthly Recurring Revenue"
             >
               {format_mrr(@summary.subscribers.total_mrr)}/mo
@@ -307,16 +293,16 @@
 
         <%!-- Financial data: role-gated --%>
         <%= if @can_view_financials and mrr_at_risk_positive?(@impact_summary.mrr_at_risk) do %>
-          <span class="hidden text-cool-steel-300 dark:text-cool-steel-600 sm:inline">│</span>
-          <div class="flex items-center gap-1.5 px-2.5 py-1.5 bg-sweet-salmon-100/80 dark:bg-sweet-salmon-900/30 rounded">
-            <span class="text-sweet-salmon-500 dark:text-sweet-salmon-400 text-[10px] uppercase font-sans font-medium">
+          <span class="hidden text-gray-300 dark:text-gray-600 sm:inline">│</span>
+          <div class="flex items-center gap-1.5 px-2.5 py-1.5 bg-red-100/80 dark:bg-red-900/30 rounded">
+            <span class="text-red-500 dark:text-red-400 text-[10px] uppercase font-sans font-medium">
               At Risk
             </span>
-            <span class="font-bold text-sm text-sweet-salmon-600 dark:text-sweet-salmon-400">
+            <span class="font-bold text-sm text-red-600 dark:text-red-400">
               {format_mrr(@impact_summary.mrr_at_risk)}
             </span>
             <%= if @impact_summary.subscribers_affected > 0 do %>
-              <span class="text-sweet-salmon-500 dark:text-sweet-salmon-400">
+              <span class="text-red-500 dark:text-red-400">
                 {format_number(@impact_summary.subscribers_affected)} subs
               </span>
             <% end %>
@@ -325,21 +311,21 @@
       <% end %>
 
       <%!-- Insights count --%>
-      <span class="hidden text-cool-steel-300 dark:text-cool-steel-600 sm:inline">│</span>
+      <span class="hidden text-gray-300 dark:text-gray-600 sm:inline">│</span>
       <.link
         navigate={~p"/insights"}
-        class="flex items-center gap-1.5 px-2.5 py-1.5 rounded hover:bg-cool-steel-200/50 dark:hover:bg-white/5 transition"
+        class="flex items-center gap-1.5 px-2.5 py-1.5 rounded hover:bg-gray-200/50 dark:hover:bg-white/5 transition"
       >
-        <span class="text-cool-steel-500 dark:text-cool-steel-400 text-[10px] uppercase font-sans font-medium">
+        <span class="text-gray-500 dark:text-gray-400 text-[10px] uppercase font-sans font-medium">
           Insights
         </span>
-        <span class="font-bold text-sm text-cool-steel-900 dark:text-white">
+        <span class="font-bold text-sm text-gray-900 dark:text-white">
           {@summary.insights.critical + @summary.insights.warning + @summary.insights.info}
         </span>
-        <span :if={@summary.insights.critical > 0} class="text-sweet-salmon-500 text-[10px]">
+        <span :if={@summary.insights.critical > 0} class="text-red-500 text-[10px]">
           {@summary.insights.critical}c
         </span>
-        <span :if={@summary.insights.warning > 0} class="text-wheat-500 text-[10px]">
+        <span :if={@summary.insights.warning > 0} class="text-yellow-500 text-[10px]">
           {@summary.insights.warning}w
         </span>
       </.link>
@@ -351,19 +337,19 @@
     <%= if @active_incidents != [] || @active_alerts != [] do %>
       <div class="mt-5">
         <div class="flex items-center gap-2 mb-2">
-          <h2 class="text-xs font-semibold uppercase tracking-wider text-sweet-salmon-600 dark:text-sweet-salmon-400">
+          <h2 class="text-xs font-semibold uppercase tracking-wider text-red-600 dark:text-red-400">
             {t("Active Issues")}
           </h2>
-          <span class="font-mono text-xs text-sweet-salmon-500 dark:text-sweet-salmon-400">
+          <span class="font-mono text-xs text-red-500 dark:text-red-400">
             {length(@active_incidents) + @deduped_alert_count}
           </span>
         </div>
 
         <%!-- Incidents (highest priority) --%>
         <%= if @active_incidents != [] do %>
-          <div class="overflow-hidden rounded-md border border-sweet-salmon-200 dark:border-sweet-salmon-800/50 mb-2">
+          <div class="overflow-hidden rounded-md border border-red-200 dark:border-red-800/50 mb-2">
             <table class="min-w-full">
-              <tbody class="divide-y divide-sweet-salmon-100 dark:divide-sweet-salmon-900/30">
+              <tbody class="divide-y divide-red-100 dark:divide-red-900/30">
                 <tr
                   :for={incident <- Enum.take(@active_incidents, 10)}
                   class={[
@@ -380,13 +366,13 @@
                       "w-1 h-full min-h-[2.5rem]",
                       if @can_view_financials do
                         cond do
-                          decimal_to_float(incident.mrr_at_risk) >= 1000 -> "bg-sweet-salmon-500"
+                          decimal_to_float(incident.mrr_at_risk) >= 1000 -> "bg-red-500"
                           decimal_to_float(incident.mrr_at_risk) >= 100 -> "bg-orange-500"
-                          decimal_to_float(incident.mrr_at_risk) > 0 -> "bg-wheat-500"
-                          true -> "bg-cool-steel-400"
+                          decimal_to_float(incident.mrr_at_risk) > 0 -> "bg-yellow-500"
+                          true -> "bg-gray-400"
                         end
                       else
-                        "bg-cool-steel-400"
+                        "bg-gray-400"
                       end
                     ]} />
                   </td>
@@ -394,17 +380,17 @@
                     <div class="flex items-center gap-2">
                       <.icon
                         name="hero-exclamation-triangle"
-                        class="h-3.5 w-3.5 text-sweet-salmon-500 flex-shrink-0"
+                        class="h-3.5 w-3.5 text-red-500 flex-shrink-0"
                       />
                       <.link
                         navigate={~p"/devices/#{incident.device_id}"}
-                        class="text-sm font-semibold text-cool-steel-900 hover:text-cerulean-600 dark:text-white dark:hover:text-cerulean-400"
+                        class="text-sm font-semibold text-gray-900 hover:text-blue-600 dark:text-white dark:hover:text-blue-400"
                       >
                         {incident.device_name}
                       </.link>
                       <span
                         :if={incident.site_name}
-                        class="text-[10px] text-cool-steel-400 dark:text-cool-steel-500 dark:text-cool-steel-400"
+                        class="text-[10px] text-gray-400 dark:text-gray-500 dark:text-gray-400"
                       >
                         @ {incident.site_name}
                       </span>
@@ -412,15 +398,12 @@
                   </td>
                   <td class="px-3 py-1.5 text-right whitespace-nowrap">
                     <div class="flex items-center justify-end gap-3 font-mono text-xs">
-                      <span
-                        class="text-sweet-salmon-600 dark:text-sweet-salmon-400 font-semibold"
-                        title="Duration"
-                      >
+                      <span class="text-red-600 dark:text-red-400 font-semibold" title="Duration">
                         {format_duration(incident.duration_seconds)}
                       </span>
                       <%= if incident.subscribers_affected > 0 do %>
                         <span
-                          class="text-wheat-600 dark:text-wheat-400"
+                          class="text-amber-600 dark:text-amber-400"
                           title="Subscribers affected"
                         >
                           {format_number(incident.subscribers_affected)}s
@@ -428,7 +411,7 @@
                       <% end %>
                       <%!-- Financial data: role-gated --%>
                       <%= if @can_view_financials and mrr_at_risk_positive?(incident.mrr_at_risk) do %>
-                        <span class="text-wheat-600 dark:text-wheat-400" title="MRR at risk">
+                        <span class="text-amber-600 dark:text-amber-400" title="MRR at risk">
                           {format_mrr(incident.mrr_at_risk)}
                         </span>
                       <% end %>
@@ -442,31 +425,31 @@
 
         <%!-- Alerts table --%>
         <%= if @active_alerts != [] do %>
-          <div class="overflow-x-auto rounded-md border border-cool-steel-200 dark:border-white/10">
+          <div class="overflow-x-auto rounded-md border border-gray-200 dark:border-white/10">
             <table class="min-w-full">
-              <thead class="bg-cool-steel-50/80 dark:bg-cool-steel-800/80">
+              <thead class="bg-gray-50/80 dark:bg-gray-800/80">
                 <tr>
                   <th class="w-1 p-0"></th>
-                  <th class="px-3 py-1.5 text-left text-[10px] font-medium uppercase tracking-wider text-cool-steel-400 dark:text-cool-steel-500">
+                  <th class="px-3 py-1.5 text-left text-[10px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500">
                     {t("Device")}
                   </th>
-                  <th class="px-3 py-1.5 text-left text-[10px] font-medium uppercase tracking-wider text-cool-steel-400 dark:text-cool-steel-500">
+                  <th class="px-3 py-1.5 text-left text-[10px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500">
                     {t("Alert")}
                   </th>
-                  <th class="hidden sm:table-cell px-3 py-1.5 text-right text-[10px] font-medium uppercase tracking-wider text-cool-steel-400 dark:text-cool-steel-500">
+                  <th class="hidden sm:table-cell px-3 py-1.5 text-right text-[10px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500">
                     {t("Impact")}
                   </th>
-                  <th class="hidden sm:table-cell px-3 py-1.5 text-right text-[10px] font-medium uppercase tracking-wider text-cool-steel-400 dark:text-cool-steel-500">
+                  <th class="hidden sm:table-cell px-3 py-1.5 text-right text-[10px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500">
                     {t("When")}
                   </th>
                   <th class="hidden sm:table-cell px-3 py-1.5 w-12"></th>
                 </tr>
               </thead>
-              <tbody class="divide-y divide-cool-steel-100 dark:divide-white/5 bg-white dark:bg-cool-steel-800/50">
+              <tbody class="divide-y divide-gray-100 dark:divide-white/5 bg-white dark:bg-gray-800/50">
                 <tr
                   :for={alert <- @active_alerts}
                   id={"alert-#{alert.id}"}
-                  class="hover:bg-cool-steel-50 dark:hover:bg-white/5 group"
+                  class="hover:bg-gray-50 dark:hover:bg-white/5 group"
                 >
                   <td class="w-1 p-0">
                     <div class={[
@@ -474,14 +457,14 @@
                       cond do
                         alert.gaiia_impact && alert.gaiia_impact["total_subscribers"] &&
                             alert.gaiia_impact["total_subscribers"] > 10 ->
-                          "bg-sweet-salmon-500"
+                          "bg-red-500"
 
                         alert.gaiia_impact && alert.gaiia_impact["total_subscribers"] &&
                             alert.gaiia_impact["total_subscribers"] > 0 ->
                           "bg-orange-500"
 
                         true ->
-                          "bg-wheat-500"
+                          "bg-yellow-500"
                       end
                     ]} />
                   </td>
@@ -489,30 +472,30 @@
                     <div class="flex items-center gap-1.5 flex-wrap">
                       <.link
                         navigate={~p"/devices/#{alert.device.id}"}
-                        class="text-sm font-medium text-cool-steel-900 hover:text-cerulean-600 dark:text-white dark:hover:text-cerulean-400"
+                        class="text-sm font-medium text-gray-900 hover:text-blue-600 dark:text-white dark:hover:text-blue-400"
                       >
                         {alert.device.name}
                       </.link>
                       <span
                         :if={alert.device.ip_address}
-                        class="hidden sm:inline font-mono text-[11px] text-cool-steel-400 dark:text-cool-steel-500"
+                        class="hidden sm:inline font-mono text-[11px] text-gray-400 dark:text-gray-500"
                       >
                         {alert.device.ip_address}
                       </span>
                     </div>
                     <span
                       :if={alert.device.site}
-                      class="text-[10px] text-cool-steel-400 dark:text-cool-steel-500"
+                      class="text-[10px] text-gray-400 dark:text-gray-500"
                     >
                       {alert.device.site.name}
                     </span>
                   </td>
-                  <td class="px-3 py-1.5 text-xs text-cool-steel-600 dark:text-cool-steel-400 max-w-[120px] sm:max-w-xs truncate">
+                  <td class="px-3 py-1.5 text-xs text-gray-600 dark:text-gray-400 max-w-[120px] sm:max-w-xs truncate">
                     {alert.message}
                   </td>
                   <td class="hidden sm:table-cell px-3 py-1.5 text-right whitespace-nowrap">
                     <%= if alert.gaiia_impact && alert.gaiia_impact["total_subscribers"] && alert.gaiia_impact["total_subscribers"] > 0 do %>
-                      <span class="font-mono text-xs text-wheat-600 dark:text-wheat-400">
+                      <span class="font-mono text-xs text-amber-600 dark:text-amber-400">
                         {format_subscriber_count(alert.gaiia_impact["total_subscribers"])}
                       </span>
                     <% end %>
@@ -521,7 +504,7 @@
                     <.timestamp
                       datetime={alert.triggered_at}
                       timezone={@timezone}
-                      class="font-mono text-[11px] text-cool-steel-400 dark:text-cool-steel-500"
+                      class="font-mono text-[11px] text-gray-400 dark:text-gray-500"
                     />
                   </td>
                   <td class="hidden sm:table-cell px-3 py-1.5 text-right">
@@ -530,12 +513,12 @@
                         type="button"
                         phx-click="acknowledge_alert"
                         phx-value-id={alert.id}
-                        class="rounded px-1.5 py-0.5 text-[10px] font-medium text-cool-steel-500 ring-1 ring-inset ring-cool-steel-300 hover:bg-cool-steel-100 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:ring-cool-steel-600 dark:hover:bg-cool-steel-700 dark:hover:text-cool-steel-200 opacity-0 group-hover:opacity-100 transition"
+                        class="rounded px-1.5 py-0.5 text-[10px] font-medium text-gray-500 ring-1 ring-inset ring-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:ring-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-200 opacity-0 group-hover:opacity-100 transition"
                       >
                         ACK
                       </button>
                     <% else %>
-                      <span class="text-[10px] text-cerulean-500 dark:text-cerulean-400 font-mono">
+                      <span class="text-[10px] text-blue-500 dark:text-blue-400 font-mono">
                         ACK
                       </span>
                     <% end %>
@@ -544,10 +527,10 @@
               </tbody>
             </table>
             <%= if @total_alert_count > 20 do %>
-              <div class="border-t border-cool-steel-100 dark:border-white/5 px-3 py-1.5 bg-cool-steel-50/50 dark:bg-cool-steel-800/30">
+              <div class="border-t border-gray-100 dark:border-white/5 px-3 py-1.5 bg-gray-50/50 dark:bg-gray-800/30">
                 <.link
                   navigate={~p"/alerts"}
-                  class="text-[10px] font-medium text-cerulean-600 dark:text-cerulean-400 hover:underline"
+                  class="text-[10px] font-medium text-blue-600 dark:text-blue-400 hover:underline"
                 >
                   +{@total_alert_count - 20} more alerts →
                 </.link>
@@ -564,55 +547,52 @@
     <%= if @current_scope.organization.use_sites && @site_impact_summaries != [] do %>
       <div class="mt-5">
         <div class="flex items-center justify-between mb-2">
-          <h2 class="text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+          <h2 class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
             {t("Site Health")}
           </h2>
           <.link
             navigate={~p"/sites"}
-            class="text-[10px] font-medium text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400"
+            class="text-[10px] font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400"
           >
             all sites →
           </.link>
         </div>
-        <div class="overflow-x-auto rounded-md border border-cool-steel-200 dark:border-white/10">
+        <div class="overflow-x-auto rounded-md border border-gray-200 dark:border-white/10">
           <table class="min-w-full">
-            <thead class="bg-cool-steel-50/80 dark:bg-cool-steel-800/80">
+            <thead class="bg-gray-50/80 dark:bg-gray-800/80">
               <tr>
-                <th class="px-3 py-1.5 text-left text-[10px] font-medium uppercase tracking-wider text-cool-steel-400 dark:text-cool-steel-500">
+                <th class="px-3 py-1.5 text-left text-[10px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500">
                   {t("Site")}
                 </th>
-                <th class="px-3 py-1.5 text-right text-[10px] font-medium uppercase tracking-wider text-cool-steel-400 dark:text-cool-steel-500">
+                <th class="px-3 py-1.5 text-right text-[10px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500">
                   {t("Devices")}
                 </th>
-                <th class="px-3 py-1.5 text-right text-[10px] font-medium uppercase tracking-wider text-cool-steel-400 dark:text-cool-steel-500">
+                <th class="px-3 py-1.5 text-right text-[10px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500">
                   {t("Down")}
                 </th>
-                <th class="hidden sm:table-cell px-3 py-1.5 text-right text-[10px] font-medium uppercase tracking-wider text-cool-steel-400 dark:text-cool-steel-500">
+                <th class="hidden sm:table-cell px-3 py-1.5 text-right text-[10px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500">
                   {t("QoE")}
                 </th>
-                <th class="hidden sm:table-cell px-3 py-1.5 text-right text-[10px] font-medium uppercase tracking-wider text-cool-steel-400 dark:text-cool-steel-500">
+                <th class="hidden sm:table-cell px-3 py-1.5 text-right text-[10px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500">
                   {t("Subs")}
                 </th>
-                <th class="hidden sm:table-cell px-3 py-1.5 text-right text-[10px] font-medium uppercase tracking-wider text-cool-steel-400 dark:text-cool-steel-500">
+                <th class="hidden sm:table-cell px-3 py-1.5 text-right text-[10px] font-medium uppercase tracking-wider text-gray-400 dark:text-gray-500">
                   {t("Affected")}
                 </th>
               </tr>
             </thead>
-            <tbody class="divide-y divide-cool-steel-100 dark:divide-white/5 bg-white dark:bg-cool-steel-800/50">
+            <tbody class="divide-y divide-gray-100 dark:divide-white/5 bg-white dark:bg-gray-800/50">
               <tr
                 :for={site <- @site_impact_summaries}
                 class={[
-                  "hover:bg-cool-steel-50 dark:hover:bg-white/5",
-                  if(site.devices_down > 0,
-                    do: "bg-sweet-salmon-50/50 dark:bg-sweet-salmon-950/10",
-                    else: ""
-                  )
+                  "hover:bg-gray-50 dark:hover:bg-white/5",
+                  if(site.devices_down > 0, do: "bg-red-50/50 dark:bg-red-950/10", else: "")
                 ]}
               >
                 <td class="px-3 py-1.5">
                   <.link
                     navigate={~p"/sites/#{site.site_id}"}
-                    class="flex items-center gap-1.5 text-sm font-medium text-cool-steel-900 hover:text-cerulean-600 dark:text-white dark:hover:text-cerulean-400"
+                    class="flex items-center gap-1.5 text-sm font-medium text-gray-900 hover:text-blue-600 dark:text-white dark:hover:text-blue-400"
                   >
                     <span class={[
                       "h-2 w-2 rounded-full flex-shrink-0",
@@ -622,47 +602,47 @@
                     {site.name}
                   </.link>
                 </td>
-                <td class="px-3 py-1.5 text-right font-mono text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                <td class="px-3 py-1.5 text-right font-mono text-xs text-gray-600 dark:text-gray-400">
                   {site.device_count}
                 </td>
                 <td class="px-3 py-1.5 text-right font-mono text-xs">
                   <%= if site.devices_down > 0 do %>
-                    <span class="text-sweet-salmon-600 dark:text-sweet-salmon-400 font-bold">
+                    <span class="text-red-600 dark:text-red-400 font-bold">
                       {site.devices_down}
                     </span>
                   <% else %>
-                    <span class="text-cool-steel-300 dark:text-cool-steel-600">0</span>
+                    <span class="text-gray-300 dark:text-gray-600">0</span>
                   <% end %>
                 </td>
                 <td class="hidden sm:table-cell px-3 py-1.5 text-right font-mono text-xs">
                   <%= if site.avg_qoe do %>
                     <span class={
                       cond do
-                        site.avg_qoe < 2.0 -> "text-sweet-salmon-600 dark:text-sweet-salmon-400"
-                        site.avg_qoe < 4.0 -> "text-wheat-600 dark:text-wheat-400"
+                        site.avg_qoe < 2.0 -> "text-red-600 dark:text-red-400"
+                        site.avg_qoe < 4.0 -> "text-yellow-600 dark:text-yellow-400"
                         true -> "text-green-600 dark:text-green-400"
                       end
                     }>
                       {format_qoe(site.avg_qoe)}
                     </span>
                   <% else %>
-                    <span class="text-cool-steel-300 dark:text-cool-steel-600">—</span>
+                    <span class="text-gray-300 dark:text-gray-600">—</span>
                   <% end %>
                 </td>
-                <td class="hidden sm:table-cell px-3 py-1.5 text-right font-mono text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                <td class="hidden sm:table-cell px-3 py-1.5 text-right font-mono text-xs text-gray-600 dark:text-gray-400">
                   <%= if site.subscribers do %>
                     {site.subscribers}
                   <% else %>
-                    <span class="text-cool-steel-300 dark:text-cool-steel-600">—</span>
+                    <span class="text-gray-300 dark:text-gray-600">—</span>
                   <% end %>
                 </td>
                 <td class="hidden sm:table-cell px-3 py-1.5 text-right font-mono text-xs">
                   <%= if site.subscribers_affected > 0 do %>
-                    <span class="text-sweet-salmon-600 dark:text-sweet-salmon-400 font-bold">
+                    <span class="text-red-600 dark:text-red-400 font-bold">
                       {format_number(site.subscribers_affected)}
                     </span>
                   <% else %>
-                    <span class="text-cool-steel-300 dark:text-cool-steel-600">—</span>
+                    <span class="text-gray-300 dark:text-gray-600">—</span>
                   <% end %>
                 </td>
               </tr>
@@ -679,7 +659,7 @@
       <div class="mt-5">
         <div class="flex items-center justify-between mb-2">
           <div class="flex items-center gap-2">
-            <h2 class="text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+            <h2 class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
               {t("Insights")}
             </h2>
             <div class="flex items-center gap-0.5">
@@ -688,8 +668,8 @@
                 class={[
                   "rounded px-1.5 py-0.5 text-[10px] font-medium transition",
                   if(is_nil(@insight_source),
-                    do: "bg-cool-steel-900 text-white dark:bg-white dark:text-cool-steel-900",
-                    else: "text-cool-steel-400 hover:bg-cool-steel-100 dark:hover:bg-white/10"
+                    do: "bg-gray-900 text-white dark:bg-white dark:text-gray-900",
+                    else: "text-gray-400 hover:bg-gray-100 dark:hover:bg-white/10"
                   )
                 ]}
               >
@@ -701,8 +681,8 @@
                 class={[
                   "rounded px-1.5 py-0.5 text-[10px] font-medium transition",
                   if(@insight_source == source,
-                    do: "bg-cool-steel-900 text-white dark:bg-white dark:text-cool-steel-900",
-                    else: "text-cool-steel-400 hover:bg-cool-steel-100 dark:hover:bg-white/10"
+                    do: "bg-gray-900 text-white dark:bg-white dark:text-gray-900",
+                    else: "text-gray-400 hover:bg-gray-100 dark:hover:bg-white/10"
                   )
                 ]}
               >
@@ -712,35 +692,35 @@
           </div>
           <.link
             navigate={~p"/insights"}
-            class="text-[10px] font-medium text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400"
+            class="text-[10px] font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400"
           >
             all insights →
           </.link>
         </div>
-        <div class="overflow-hidden rounded-md border border-cool-steel-200 dark:border-white/10 divide-y divide-cool-steel-100 dark:divide-white/5">
+        <div class="overflow-hidden rounded-md border border-gray-200 dark:border-white/10 divide-y divide-gray-100 dark:divide-white/5">
           <div
             :for={insight <- Enum.take(@insights, 6)}
             id={"insight-#{insight.id}"}
-            class="flex items-center justify-between gap-2 px-3 py-2 bg-white dark:bg-cool-steel-800/50 hover:bg-cool-steel-50 dark:hover:bg-white/5 group"
+            class="flex items-center justify-between gap-2 px-3 py-2 bg-white dark:bg-gray-800/50 hover:bg-gray-50 dark:hover:bg-white/5 group"
           >
             <div class="flex items-center gap-2 min-w-0 flex-1">
               <%!-- Urgency indicator --%>
               <span class={[
                 "w-1.5 h-1.5 rounded-full flex-shrink-0",
                 case insight.urgency do
-                  "critical" -> "bg-sweet-salmon-500"
-                  "warning" -> "bg-wheat-500"
-                  "info" -> "bg-cerulean-500"
-                  _ -> "bg-cool-steel-400"
+                  "critical" -> "bg-red-500"
+                  "warning" -> "bg-yellow-500"
+                  "info" -> "bg-blue-500"
+                  _ -> "bg-gray-400"
                 end
               ]} />
               <span class={[
                 "text-[10px] font-medium uppercase w-8 flex-shrink-0",
                 case insight.urgency do
-                  "critical" -> "text-sweet-salmon-600 dark:text-sweet-salmon-400"
-                  "warning" -> "text-wheat-600 dark:text-wheat-400"
-                  "info" -> "text-cerulean-600 dark:text-cerulean-400"
-                  _ -> "text-cool-steel-500 dark:text-cool-steel-400"
+                  "critical" -> "text-red-600 dark:text-red-400"
+                  "warning" -> "text-yellow-600 dark:text-yellow-400"
+                  "info" -> "text-blue-600 dark:text-blue-400"
+                  _ -> "text-gray-500 dark:text-gray-400"
                 end
               ]}>
                 {case insight.urgency do
@@ -758,7 +738,7 @@
               </span>
               <.link
                 navigate={~p"/insights?source=#{insight.source}"}
-                class="text-sm text-cool-steel-900 dark:text-white hover:text-cerulean-600 dark:hover:text-cerulean-400 truncate"
+                class="text-sm text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 truncate"
               >
                 {insight.title}
               </.link>
@@ -766,7 +746,7 @@
             <div class="flex items-center gap-1 flex-shrink-0">
               <.link
                 navigate={~p"/insights?source=#{insight.source}"}
-                class="rounded px-1.5 py-0.5 text-[10px] font-medium text-cerulean-600 dark:text-cerulean-400 hover:bg-cerulean-50 dark:hover:bg-cerulean-900/20 opacity-0 group-hover:opacity-100 transition"
+                class="rounded px-1.5 py-0.5 text-[10px] font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 opacity-0 group-hover:opacity-100 transition"
               >
                 View
               </.link>
@@ -774,7 +754,7 @@
                 type="button"
                 phx-click="dismiss_insight"
                 phx-value-id={insight.id}
-                class="rounded p-0.5 text-cool-steel-300 hover:text-cool-steel-500 dark:text-cool-steel-400 dark:text-cool-steel-600 dark:hover:text-cool-steel-400 opacity-0 group-hover:opacity-100 transition"
+                class="rounded p-0.5 text-gray-300 hover:text-gray-500 dark:text-gray-400 dark:text-gray-600 dark:hover:text-gray-400 opacity-0 group-hover:opacity-100 transition"
                 title="Dismiss"
               >
                 <.icon name="hero-x-mark" class="h-3 w-3" />
@@ -791,41 +771,39 @@
     <div class="mt-5 grid gap-4 lg:grid-cols-2">
       <%!-- Network Pulse --%>
       <div>
-        <h2 class="text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 mb-2">
+        <h2 class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">
           {t("Network Pulse")}
         </h2>
-        <div class="rounded-md border border-cool-steel-200 dark:border-white/10 bg-white dark:bg-cool-steel-800/50 divide-y divide-cool-steel-100 dark:divide-white/5">
+        <div class="rounded-md border border-gray-200 dark:border-white/10 bg-white dark:bg-gray-800/50 divide-y divide-gray-100 dark:divide-white/5">
           <div class="flex items-center justify-between px-3 py-2">
-            <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
-              Devices monitored
-            </span>
-            <span class="font-mono text-sm font-bold text-cool-steel-900 dark:text-white">
+            <span class="text-xs text-gray-500 dark:text-gray-400">Devices monitored</span>
+            <span class="font-mono text-sm font-bold text-gray-900 dark:text-white">
               {@device_count}
             </span>
           </div>
           <div class="flex items-center justify-between px-3 py-2">
-            <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400">Online</span>
+            <span class="text-xs text-gray-500 dark:text-gray-400">Online</span>
             <span class="font-mono text-sm text-green-600 dark:text-green-400">{@device_up}</span>
           </div>
           <div class="flex items-center justify-between px-3 py-2">
-            <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400">Down</span>
+            <span class="text-xs text-gray-500 dark:text-gray-400">Down</span>
             <span class={[
               "font-mono text-sm",
               if(@device_down > 0,
-                do: "text-sweet-salmon-600 dark:text-sweet-salmon-400 font-bold",
-                else: "text-cool-steel-400"
+                do: "text-red-600 dark:text-red-400 font-bold",
+                else: "text-gray-400"
               )
             ]}>
               {@device_down}
             </span>
           </div>
           <div class="flex items-center justify-between px-3 py-2">
-            <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400">Unknown</span>
+            <span class="text-xs text-gray-500 dark:text-gray-400">Unknown</span>
             <span class={[
               "font-mono text-sm",
               if(@device_unknown > 0,
-                do: "text-wheat-600 dark:text-wheat-400",
-                else: "text-cool-steel-400"
+                do: "text-yellow-600 dark:text-yellow-400",
+                else: "text-gray-400"
               )
             ]}>
               {@device_unknown}
@@ -833,14 +811,12 @@
           </div>
           <%!-- Config changes row hidden — feature temporarily disabled --%>
           <div class="flex items-center justify-between px-3 py-2">
-            <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
-              Active incidents
-            </span>
+            <span class="text-xs text-gray-500 dark:text-gray-400">Active incidents</span>
             <span class={[
               "font-mono text-sm",
               if(length(@active_incidents) > 0,
-                do: "text-sweet-salmon-600 dark:text-sweet-salmon-400 font-bold",
-                else: "text-cool-steel-400"
+                do: "text-red-600 dark:text-red-400 font-bold",
+                else: "text-gray-400"
               )
             ]}>
               {length(@active_incidents)}
@@ -852,45 +828,45 @@
       <%!-- Config Changes — hidden, feature temporarily disabled --%>
       <div class="hidden">
         <div class="flex items-center justify-between mb-2">
-          <h2 class="text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+          <h2 class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
             Config Changes
-            <span class="font-normal text-cool-steel-400 dark:text-cool-steel-500 dark:text-cool-steel-400">
+            <span class="font-normal text-gray-400 dark:text-gray-500 dark:text-gray-400">
               (7d)
             </span>
           </h2>
           <.link
             navigate={~p"/insights"}
-            class="text-[10px] font-medium text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400"
+            class="text-[10px] font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400"
           >
             all →
           </.link>
         </div>
         <%= if Enum.any?(@recent_config_changes) do %>
-          <div class="overflow-hidden rounded-md border border-cool-steel-200 dark:border-white/10 divide-y divide-cool-steel-100 dark:divide-white/5">
+          <div class="overflow-hidden rounded-md border border-gray-200 dark:border-white/10 divide-y divide-gray-100 dark:divide-white/5">
             <%= for change <- @recent_config_changes do %>
               <.link
                 navigate={~p"/devices/#{change.device_id}/config-timeline"}
-                class="flex items-center gap-2 px-3 py-1.5 bg-white hover:bg-cool-steel-50 dark:bg-cool-steel-800/50 dark:hover:bg-white/5 transition-colors"
+                class="flex items-center gap-2 px-3 py-1.5 bg-white hover:bg-gray-50 dark:bg-gray-800/50 dark:hover:bg-white/5 transition-colors"
               >
                 <span class={"w-1.5 h-1.5 rounded-full flex-shrink-0 #{config_change_impact_color(change)}"} />
-                <span class="text-xs font-medium text-cool-steel-900 dark:text-white truncate">
+                <span class="text-xs font-medium text-gray-900 dark:text-white truncate">
                   {if change.device, do: change.device.name, else: "Unknown"}
                 </span>
-                <span class="font-mono text-[10px] text-cool-steel-400 dark:text-cool-steel-500 dark:text-cool-steel-400 flex-shrink-0">
+                <span class="font-mono text-[10px] text-gray-400 dark:text-gray-500 dark:text-gray-400 flex-shrink-0">
                   {change.change_size}L
                 </span>
-                <span class="text-[10px] text-cool-steel-400 dark:text-cool-steel-500 dark:text-cool-steel-400 truncate">
+                <span class="text-[10px] text-gray-400 dark:text-gray-500 dark:text-gray-400 truncate">
                   {Enum.join(Enum.take(change.sections_changed, 2), ", ")}
                 </span>
-                <span class="ml-auto flex-shrink-0 font-mono text-[10px] text-cool-steel-400 dark:text-cool-steel-500 dark:text-cool-steel-400">
+                <span class="ml-auto flex-shrink-0 font-mono text-[10px] text-gray-400 dark:text-gray-500 dark:text-gray-400">
                   {format_short_datetime(change.changed_at, @timezone)}
                 </span>
               </.link>
             <% end %>
           </div>
         <% else %>
-          <div class="rounded-md border border-cool-steel-200 dark:border-white/10 bg-white dark:bg-cool-steel-800/50 px-3 py-6 text-center">
-            <span class="text-xs text-cool-steel-400 dark:text-cool-steel-500 dark:text-cool-steel-400">
+          <div class="rounded-md border border-gray-200 dark:border-white/10 bg-white dark:bg-gray-800/50 px-3 py-6 text-center">
+            <span class="text-xs text-gray-400 dark:text-gray-500 dark:text-gray-400">
               No config changes in 7 days
             </span>
           </div>
@@ -904,26 +880,26 @@
     <%= if assigns[:recent_activity] && @recent_activity != [] do %>
       <div class="mt-5">
         <div class="flex items-center justify-between mb-2">
-          <h2 class="text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+          <h2 class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
             {t("Recent Activity")}
           </h2>
           <.link
             navigate={~p"/activity"}
-            class="text-[10px] font-medium text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400"
+            class="text-[10px] font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400"
           >
             all activity →
           </.link>
         </div>
-        <div class="overflow-hidden rounded-md border border-cool-steel-200 dark:border-white/10 divide-y divide-cool-steel-100 dark:divide-white/5">
+        <div class="overflow-hidden rounded-md border border-gray-200 dark:border-white/10 divide-y divide-gray-100 dark:divide-white/5">
           <div
             :for={activity <- @recent_activity}
-            class="flex items-center gap-2 px-3 py-1.5 bg-white dark:bg-cool-steel-800/50"
+            class="flex items-center gap-2 px-3 py-1.5 bg-white dark:bg-gray-800/50"
           >
-            <span class="h-1 w-1 rounded-full bg-cerulean-400 dark:bg-cerulean-500 flex-shrink-0" />
-            <p class="text-xs text-cool-steel-700 dark:text-cool-steel-300 min-w-0 flex-1 truncate">
+            <span class="h-1 w-1 rounded-full bg-blue-400 dark:bg-blue-500 flex-shrink-0" />
+            <p class="text-xs text-gray-700 dark:text-gray-300 min-w-0 flex-1 truncate">
               {activity.summary}
             </p>
-            <span class="flex-shrink-0 font-mono text-[10px] text-cool-steel-400 dark:text-cool-steel-500 dark:text-cool-steel-400">
+            <span class="flex-shrink-0 font-mono text-[10px] text-gray-400 dark:text-gray-500 dark:text-gray-400">
               {format_short_datetime(activity.timestamp, @timezone)}
             </span>
           </div>
@@ -934,30 +910,30 @@
     <%!-- ═══════════════════════════════════════════════
          FOOTER — Command palette hint
          ═══════════════════════════════════════════════ --%>
-    <div class="mt-6 flex items-center justify-center border-t border-cool-steel-100 dark:border-white/5 pt-4 pb-2">
-      <span class="text-[10px] text-cool-steel-300 dark:text-cool-steel-600">
-        <kbd class="px-1 py-0.5 rounded border border-cool-steel-200 dark:border-cool-steel-700 font-mono text-cool-steel-400 dark:text-cool-steel-500 dark:text-cool-steel-400">
+    <div class="mt-6 flex items-center justify-center border-t border-gray-100 dark:border-white/5 pt-4 pb-2">
+      <span class="text-[10px] text-gray-300 dark:text-gray-600">
+        <kbd class="px-1 py-0.5 rounded border border-gray-200 dark:border-gray-700 font-mono text-gray-400 dark:text-gray-500 dark:text-gray-400">
           ⌘K
         </kbd>
         <span class="ml-1">to search</span>
         <span class="mx-2">·</span>
         <.link
           navigate={~p"/devices/new"}
-          class="hover:text-cool-steel-500 dark:text-cool-steel-400 dark:hover:text-cool-steel-400"
+          class="hover:text-gray-500 dark:text-gray-400 dark:hover:text-gray-400"
         >
           + device
         </.link>
         <span class="mx-2">·</span>
         <.link
           navigate={~p"/trace"}
-          class="hover:text-cool-steel-500 dark:text-cool-steel-400 dark:hover:text-cool-steel-400"
+          class="hover:text-gray-500 dark:text-gray-400 dark:hover:text-gray-400"
         >
           trace
         </.link>
         <span class="mx-2">·</span>
         <.link
           navigate={~p"/network-map"}
-          class="hover:text-cool-steel-500 dark:text-cool-steel-400 dark:hover:text-cool-steel-400"
+          class="hover:text-gray-500 dark:text-gray-400 dark:hover:text-gray-400"
         >
           map
         </.link>
diff --git a/lib/towerops_web/live/device_live/form.html.heex b/lib/towerops_web/live/device_live/form.html.heex
index 70a2f231..f07f1f35 100644
--- a/lib/towerops_web/live/device_live/form.html.heex
+++ b/lib/towerops_web/live/device_live/form.html.heex
@@ -4,7 +4,7 @@
   unresolved_alert_count={assigns[:unresolved_alert_count] || 0}
 >
   <div phx-hook="ScrollToTop" id="scroll-container" phx-update="ignore">
-    <div class="border-b border-cool-steel-200 pb-5 dark:border-white/5">
+    <div class="border-b border-gray-200 pb-5 dark:border-white/5">
       <div class="mb-4">
         <.link
           navigate={
@@ -12,7 +12,7 @@
               do: ~p"/devices/#{@device.id}",
               else: ~p"/devices"
           }
-          class="inline-flex items-center gap-1 text-sm text-cool-steel-600 hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+          class="inline-flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
         >
           <.icon name="hero-arrow-left" class="h-4 w-4" />
           {if @live_action == :edit, do: "Back to Device", else: "Back to Device List"}
@@ -21,10 +21,10 @@
 
       <div class="flex items-center justify-between">
         <div>
-          <h1 class="text-3xl font-semibold tracking-tight text-cool-steel-900 dark:text-white">
+          <h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
             {@page_title}
           </h1>
-          <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
             {if @live_action == :new,
               do: "Add new device to monitor",
               else: "Update device details"}
@@ -42,19 +42,19 @@
           <% badge_class =
             cond do
               @current_scope.user.is_superuser ->
-                "bg-cerulean-50 text-cerulean-800 dark:bg-cerulean-900/20 dark:text-cerulean-400"
+                "bg-blue-50 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400"
 
               @device_quota.at_limit ->
-                "bg-sweet-salmon-50 text-sweet-salmon-800 border-sweet-salmon-200 dark:bg-sweet-salmon-900/20 dark:text-sweet-salmon-400 dark:border-sweet-salmon-800"
+                "bg-red-50 text-red-800 border-red-200 dark:bg-red-900/20 dark:text-red-400 dark:border-red-800"
 
               percent >= 90 ->
                 "bg-orange-50 text-orange-800 border-orange-200 dark:bg-orange-900/20 dark:text-orange-400 dark:border-orange-800"
 
               percent >= 75 ->
-                "bg-wheat-50 text-wheat-800 border-wheat-200 dark:bg-wheat-900/20 dark:text-wheat-400 dark:border-wheat-800"
+                "bg-yellow-50 text-yellow-800 border-yellow-200 dark:bg-yellow-900/20 dark:text-yellow-400 dark:border-yellow-800"
 
               @device_quota.limit == :unlimited ->
-                "bg-cerulean-50 text-cerulean-800 dark:bg-cerulean-900/20 dark:text-cerulean-400"
+                "bg-blue-50 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400"
 
               true ->
                 "bg-green-50 text-green-800 border-green-200 dark:bg-green-900/20 dark:text-green-400 dark:border-green-800"
@@ -96,14 +96,14 @@
     <% end %>
 
     <.form for={@form} id="device-form" phx-change="validate" phx-submit="save">
-      <div class="divide-y divide-cool-steel-200 dark:divide-white/10">
+      <div class="divide-y divide-gray-200 dark:divide-white/10">
         <!-- Basic Information -->
         <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
           <div>
-            <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+            <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
               {t("Basic Information")}
             </h2>
-            <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+            <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
               {t("Core device identification and location details.")}
             </p>
           </div>
@@ -129,15 +129,15 @@
 
                 <div
                   :if={@duplicate_device}
-                  class="rounded-md bg-wheat-50 dark:bg-wheat-900/20 p-3 mt-2"
+                  class="rounded-md bg-amber-50 dark:bg-amber-900/20 p-3 mt-2"
                 >
-                  <div class="flex items-center gap-2 text-wheat-800 dark:text-wheat-200">
+                  <div class="flex items-center gap-2 text-amber-800 dark:text-amber-200">
                     <.icon name="hero-exclamation-triangle" class="h-5 w-5 flex-shrink-0" />
                     <p class="text-sm">
                       {t("A device with this IP address already exists:")}
                       <.link
                         navigate={~p"/devices/#{@duplicate_device.id}"}
-                        class="font-medium underline hover:text-wheat-900 dark:hover:text-wheat-100"
+                        class="font-medium underline hover:text-amber-900 dark:hover:text-amber-100"
                       >
                         {@duplicate_device.name || @duplicate_device.ip_address}
                       </.link>
@@ -147,9 +147,9 @@
 
                 <div
                   :if={@non_routable_ip_error}
-                  class="rounded-md bg-sweet-salmon-50 dark:bg-sweet-salmon-900/20 p-3 mt-2"
+                  class="rounded-md bg-red-50 dark:bg-red-900/20 p-3 mt-2"
                 >
-                  <div class="flex items-start gap-2 text-sweet-salmon-800 dark:text-sweet-salmon-200">
+                  <div class="flex items-start gap-2 text-red-800 dark:text-red-200">
                     <.icon name="hero-exclamation-circle" class="h-5 w-5 flex-shrink-0 mt-0.5" />
                     <div class="text-sm">
                       <p class="font-medium">Non-routable IP address detected</p>
@@ -176,7 +176,7 @@
                   prompt="No site (ungrouped)"
                   options={Enum.map(@available_sites, &{&1.name, &1.id})}
                 />
-                <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                   {t("Optionally group this device into a site (office, datacenter, etc.)")}
                 </p>
               </div>
@@ -201,7 +201,7 @@
                     {"Other", "other"}
                   ]}
                 />
-                <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                   {t(
                     "Select the type of device. This helps with network visualization and organization."
                   )}
@@ -214,10 +214,10 @@
 <!-- Monitoring Configuration -->
         <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
           <div>
-            <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+            <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
               {t("Monitoring Configuration")}
             </h2>
-            <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+            <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
               {t("Configure how and how often this device should be monitored.")}
             </p>
           </div>
@@ -263,35 +263,35 @@
                   <%= if @live_action == :edit and Map.has_key?(assigns, :agent_source) do %>
                     <%= case @agent_source do %>
                       <% :device -> %>
-                        <p class="mt-2 text-sm text-wheat-600 dark:text-wheat-400 flex items-center gap-1">
+                        <p class="mt-2 text-sm text-amber-600 dark:text-amber-400 flex items-center gap-1">
                           <.icon name="hero-exclamation-triangle" class="h-4 w-4" />
                           <strong>{t("Overriding")}</strong>
                           site/organization defaults - this device is explicitly assigned
                         </p>
                       <% :site -> %>
-                        <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400 flex items-center gap-1">
+                        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1">
                           <.icon name="hero-building-office" class="h-4 w-4" />
                           Inherited from site: <strong>{@effective_agent_name}</strong>
                         </p>
                       <% :organization -> %>
-                        <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400 flex items-center gap-1">
+                        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1">
                           <.icon name="hero-building-office-2" class="h-4 w-4" />
                           Inherited from organization: <strong>{@effective_agent_name}</strong>
                         </p>
                       <% :global -> %>
-                        <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400 flex items-center gap-1">
+                        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1">
                           <.icon name="hero-globe-alt" class="h-4 w-4" />
                           {t("Using global default cloud poller:")}
                           <strong>{@effective_agent_name}</strong>
                         </p>
                       <% :none -> %>
-                        <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400 flex items-center gap-1">
+                        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1">
                           <.icon name="hero-cloud" class="h-4 w-4" />
                           {t("No agent assigned - cloud polling")}
                         </p>
                     <% end %>
                   <% else %>
-                    <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                       {t(
                         "Assign this device to a remote agent for local SNMP polling. Leave empty to inherit from site or organization defaults."
                       )}
@@ -309,7 +309,7 @@
                     prompt={t("Inherit from organization default")}
                     options={Enum.map(@escalation_policies, &{&1.name, &1.id})}
                   />
-                  <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                  <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                     {t(
                       "Select an escalation policy for alert notifications. Leave empty to use the organization default."
                     )}
@@ -323,10 +323,10 @@
 <!-- SNMP Configuration -->
         <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
           <div>
-            <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+            <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
               {t("SNMP Configuration")}
             </h2>
-            <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+            <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
               {t(
                 "Choose monitoring mode and configure SNMP settings for detailed device information."
               )}
@@ -337,7 +337,7 @@
             <div class="space-y-6">
               <!-- Monitoring Mode Tabs -->
               <div>
-                <div class="border-b border-cool-steel-200 dark:border-white/10">
+                <div class="border-b border-gray-200 dark:border-white/10">
                   <nav class="-mb-px flex space-x-8" aria-label={t("Monitoring mode")}>
                     <button
                       id="monitoring-mode-snmp-and-icmp"
@@ -347,9 +347,9 @@
                       class={[
                         "whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium",
                         @monitoring_mode == "snmp_and_icmp" &&
-                          "border-cerulean-500 text-cerulean-600 dark:border-cerulean-400 dark:text-cerulean-400",
+                          "border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-400",
                         @monitoring_mode != "snmp_and_icmp" &&
-                          "border-transparent text-cool-steel-500 hover:border-cool-steel-300 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:border-cool-steel-600 dark:hover:text-cool-steel-300"
+                          "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-gray-300"
                       ]}
                     >
                       {t("SNMP & ICMP")}
@@ -362,16 +362,16 @@
                       class={[
                         "whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium",
                         @monitoring_mode == "icmp_only" &&
-                          "border-cerulean-500 text-cerulean-600 dark:border-cerulean-400 dark:text-cerulean-400",
+                          "border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-400",
                         @monitoring_mode != "icmp_only" &&
-                          "border-transparent text-cool-steel-500 hover:border-cool-steel-300 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:border-cool-steel-600 dark:hover:text-cool-steel-300"
+                          "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-gray-300"
                       ]}
                     >
                       {t("ICMP Only")}
                     </button>
                   </nav>
                 </div>
-                <div class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <div class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                   <%= if @monitoring_mode == "snmp_and_icmp" do %>
                     <p>
                       {t(
@@ -415,12 +415,12 @@
                   <%= if @live_action == :edit and Map.has_key?(assigns, :snmp_config_source) do %>
                     <%= case @snmp_config_source do %>
                       <% :device -> %>
-                        <p class="mt-2 text-sm text-wheat-600 dark:text-wheat-400 flex items-center gap-1">
+                        <p class="mt-2 text-sm text-amber-600 dark:text-amber-400 flex items-center gap-1">
                           <.icon name="hero-exclamation-triangle" class="h-4 w-4" />
                           <strong>{t("Overriding")}</strong> site/organization SNMP defaults
                         </p>
                       <% :site -> %>
-                        <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400 flex items-center gap-1">
+                        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1">
                           <.icon name="hero-building-office" class="h-4 w-4" />
                           Inherited from site (v{@effective_snmp_version}, community: {String.slice(
                             @effective_snmp_community,
@@ -431,7 +431,7 @@
                           )})
                         </p>
                       <% :organization -> %>
-                        <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400 flex items-center gap-1">
+                        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1">
                           <.icon name="hero-building-office-2" class="h-4 w-4" />
                           Inherited from organization (v{@effective_snmp_version}, community: {String.slice(
                             @effective_snmp_community,
@@ -442,7 +442,7 @@
                           )})
                         </p>
                       <% :default -> %>
-                        <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400 flex items-center gap-1">
+                        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1">
                           <.icon name="hero-information-circle" class="h-4 w-4" />
                           {t(
                             "Using default (v2c, no community set - configure at organization or site level)"
@@ -589,16 +589,16 @@
                   <%= if @snmp_test_result do %>
                     <%= cond do %>
                       <% Map.get(@snmp_test_result, :testing) -> %>
-                        <div class="mt-3 rounded-md bg-cerulean-50 p-4 dark:bg-cerulean-900/20">
+                        <div class="mt-3 rounded-md bg-blue-50 p-4 dark:bg-blue-900/20">
                           <div class="flex items-center">
                             <div class="shrink-0">
                               <.icon
                                 name="hero-arrow-path"
-                                class="h-5 w-5 text-cerulean-400 animate-spin"
+                                class="h-5 w-5 text-blue-400 animate-spin"
                               />
                             </div>
                             <div class="ml-3">
-                              <p class="text-sm text-cerulean-700 dark:text-cerulean-400">
+                              <p class="text-sm text-blue-700 dark:text-blue-400">
                                 {t("Testing SNMP credentials...")}
                               </p>
                             </div>
@@ -621,16 +621,16 @@
                           </div>
                         </div>
                       <% true -> %>
-                        <div class="mt-3 rounded-md bg-sweet-salmon-50 p-4 dark:bg-sweet-salmon-900/20">
+                        <div class="mt-3 rounded-md bg-red-50 p-4 dark:bg-red-900/20">
                           <div class="flex items-start">
                             <div class="shrink-0">
-                              <.icon name="hero-x-circle" class="h-5 w-5 text-sweet-salmon-400" />
+                              <.icon name="hero-x-circle" class="h-5 w-5 text-red-400" />
                             </div>
                             <div class="ml-3">
-                              <p class="text-sm font-medium text-sweet-salmon-800 dark:text-sweet-salmon-400">
+                              <p class="text-sm font-medium text-red-800 dark:text-red-400">
                                 {t("Connection failed")}
                               </p>
-                              <p class="mt-1 text-sm text-sweet-salmon-700 dark:text-sweet-salmon-300">
+                              <p class="mt-1 text-sm text-red-700 dark:text-red-300">
                                 {Map.get(@snmp_test_result, :message)}
                               </p>
                             </div>
@@ -653,16 +653,16 @@
             phx-update="ignore"
           >
             <div>
-              <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+              <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
                 {t("MikroTik API Configuration")}
               </h2>
-              <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
                 {t(
                   "Configure MikroTik RouterOS API access. Works alongside SNMP for enhanced device management. SSH is used for device backups."
                 )}
               </p>
-              <div class="mt-3 rounded-md bg-cerulean-50 dark:bg-cerulean-900/20 p-3">
-                <p class="text-xs text-cerulean-700 dark:text-cerulean-300">
+              <div class="mt-3 rounded-md bg-blue-50 dark:bg-blue-900/20 p-3">
+                <p class="text-xs text-blue-700 dark:text-blue-300">
                   <.icon name="hero-beaker" class="h-4 w-4 inline" />
                   <strong>{t("Experimental Feature:")}</strong>
                   {t("MikroTik API integration is under active development.")}
@@ -673,8 +673,8 @@
             <div class="md:col-span-2">
               <div class="space-y-6">
                 <%= if Map.has_key?(assigns, :mikrotik_config_source) and @mikrotik_config_source != :device do %>
-                  <div class="rounded-md bg-cerulean-50 dark:bg-cerulean-900/20 p-4">
-                    <p class="text-sm text-cerulean-700 dark:text-cerulean-300">
+                  <div class="rounded-md bg-blue-50 dark:bg-blue-900/20 p-4">
+                    <p class="text-sm text-blue-700 dark:text-blue-300">
                       <strong>Inheriting credentials from {@mikrotik_config_source}.</strong>
                       Username: <span class="font-mono">{@effective_mikrotik_username}</span>
                     </p>
@@ -727,8 +727,8 @@
 
                     <%= if @form[:mikrotik_use_ssl].value == false do %>
                       <div class="col-span-full">
-                        <div class="rounded-md bg-sweet-salmon-50 dark:bg-sweet-salmon-900/20 p-4">
-                          <p class="text-sm text-sweet-salmon-700 dark:text-sweet-salmon-300">
+                        <div class="rounded-md bg-red-50 dark:bg-red-900/20 p-4">
+                          <p class="text-sm text-red-700 dark:text-red-300">
                             <strong>🚨 Critical Security Warning:</strong>
                             {t(
                               "Plain API (port 8728) sends credentials unencrypted over the network."
@@ -750,7 +750,7 @@
       </div>
       
 <!-- Save/Cancel Footer -->
-      <div class="flex items-center justify-between gap-x-6 border-t border-cool-steel-200 px-4 py-4 sm:px-8 dark:border-white/10">
+      <div class="flex items-center justify-between gap-x-6 border-t border-gray-200 px-4 py-4 sm:px-8 dark:border-white/10">
         <.button navigate={~p"/devices"}>{t("Cancel")}</.button>
         <.button
           phx-disable-with={t("Saving...")}
@@ -764,19 +764,19 @@
     
 <!-- Danger Zone -->
     <%= if @live_action == :edit do %>
-      <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8 border-t border-cool-steel-200 dark:border-white/10">
+      <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8 border-t border-gray-200 dark:border-white/10">
         <div>
-          <h2 class="text-base/7 font-semibold text-sweet-salmon-600 dark:text-sweet-salmon-500">
+          <h2 class="text-base/7 font-semibold text-red-600 dark:text-red-500">
             {t("Danger Zone")}
           </h2>
-          <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
             {t("Permanently delete this device and all its data.")}
           </p>
         </div>
 
         <div class="md:col-span-2">
-          <div class="rounded-md bg-sweet-salmon-50 dark:bg-sweet-salmon-900/20 p-4 border border-sweet-salmon-200 dark:border-sweet-salmon-800">
-            <p class="text-sm text-sweet-salmon-800 dark:text-sweet-salmon-200 mb-4">
+          <div class="rounded-md bg-red-50 dark:bg-red-900/20 p-4 border border-red-200 dark:border-red-800">
+            <p class="text-sm text-red-800 dark:text-red-200 mb-4">
               {t(
                 "Once you delete this device, there is no going back. All monitoring history and alerts will be permanently deleted."
               )}
diff --git a/lib/towerops_web/live/device_live/helpers/formatters.ex b/lib/towerops_web/live/device_live/helpers/formatters.ex
index 1be5df5c..a914793e 100644
--- a/lib/towerops_web/live/device_live/helpers/formatters.ex
+++ b/lib/towerops_web/live/device_live/helpers/formatters.ex
@@ -251,18 +251,15 @@ defmodule ToweropsWeb.DeviceLive.Helpers.Formatters do
   Returns Tailwind CSS classes for capacity source badges.
   """
   @spec capacity_source_class(String.t()) :: String.t()
-  def capacity_source_class("manual"),
-    do: "bg-cerulean-100 text-cerulean-700 dark:bg-cerulean-900/50 dark:text-cerulean-300"
+  def capacity_source_class("manual"), do: "bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
 
   def capacity_source_class("sensor"), do: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300"
 
-  def capacity_source_class("if_speed"),
-    do: "bg-cool-steel-100 text-cool-steel-600 dark:bg-cool-steel-700 dark:text-cool-steel-300"
+  def capacity_source_class("if_speed"), do: "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300"
 
   def capacity_source_class("peak"), do: "bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300"
 
-  def capacity_source_class(_),
-    do: "bg-cool-steel-100 text-cool-steel-600 dark:bg-cool-steel-700 dark:text-cool-steel-300"
+  def capacity_source_class(_), do: "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300"
 
   @doc """
   Returns background color class for utilization percentage.
@@ -272,8 +269,8 @@ defmodule ToweropsWeb.DeviceLive.Helpers.Formatters do
   - < 70%: green
   """
   @spec utilization_color(number()) :: String.t()
-  def utilization_color(pct) when pct >= 90, do: "bg-sweet-salmon-500"
-  def utilization_color(pct) when pct >= 70, do: "bg-wheat-500"
+  def utilization_color(pct) when pct >= 90, do: "bg-red-500"
+  def utilization_color(pct) when pct >= 70, do: "bg-yellow-500"
   def utilization_color(_pct), do: "bg-green-500"
 
   @doc """
@@ -284,7 +281,7 @@ defmodule ToweropsWeb.DeviceLive.Helpers.Formatters do
   - < 70%: green
   """
   @spec utilization_text_color(number()) :: String.t()
-  def utilization_text_color(pct) when pct >= 90, do: "text-sweet-salmon-600 dark:text-sweet-salmon-400"
-  def utilization_text_color(pct) when pct >= 70, do: "text-wheat-600 dark:text-wheat-400"
+  def utilization_text_color(pct) when pct >= 90, do: "text-red-600 dark:text-red-400"
+  def utilization_text_color(pct) when pct >= 70, do: "text-yellow-600 dark:text-yellow-400"
   def utilization_text_color(_pct), do: "text-green-600 dark:text-green-400"
 end
diff --git a/lib/towerops_web/live/device_live/index.ex b/lib/towerops_web/live/device_live/index.ex
index bb3b24d0..77b1a735 100644
--- a/lib/towerops_web/live/device_live/index.ex
+++ b/lib/towerops_web/live/device_live/index.ex
@@ -508,12 +508,12 @@ defmodule ToweropsWeb.DeviceLive.Index do
 
   # Health indicator helpers
 
-  defp health_dot_color(nil), do: "bg-cool-steel-400"
+  defp health_dot_color(nil), do: "bg-gray-400"
   defp health_dot_color(%{worst_status: 0}), do: "bg-green-500"
-  defp health_dot_color(%{worst_status: 1}), do: "bg-wheat-500"
-  defp health_dot_color(%{worst_status: 2}), do: "bg-sweet-salmon-500"
-  defp health_dot_color(%{worst_status: 3}), do: "bg-cool-steel-400"
-  defp health_dot_color(_), do: "bg-cool-steel-400"
+  defp health_dot_color(%{worst_status: 1}), do: "bg-yellow-500"
+  defp health_dot_color(%{worst_status: 2}), do: "bg-red-500"
+  defp health_dot_color(%{worst_status: 3}), do: "bg-gray-400"
+  defp health_dot_color(_), do: "bg-gray-400"
 
   defp health_dot_title(nil), do: "No check data"
   defp health_dot_title(%{worst_status: 0}), do: "All checks passing"
@@ -522,7 +522,7 @@ defmodule ToweropsWeb.DeviceLive.Index do
   defp health_dot_title(%{worst_status: 3}), do: "Unknown"
   defp health_dot_title(_), do: "No check data"
 
-  defp last_seen_text(nil), do: {"Never", "text-cool-steel-400 dark:text-cool-steel-600"}
+  defp last_seen_text(nil), do: {"Never", "text-gray-400 dark:text-gray-600"}
 
   defp last_seen_text(datetime) do
     diff_seconds = DateTime.diff(DateTime.utc_now(), datetime, :second)
@@ -531,15 +531,15 @@ defmodule ToweropsWeb.DeviceLive.Index do
       diff_seconds < 0 -> {"just now", "text-green-600 dark:text-green-400"}
       diff_seconds < 60 -> {"#{diff_seconds}s ago", "text-green-600 dark:text-green-400"}
       diff_seconds < 600 -> {"#{div(diff_seconds, 60)}m ago", "text-green-600 dark:text-green-400"}
-      diff_seconds < 3600 -> {"#{div(diff_seconds, 60)}m ago", "text-wheat-600 dark:text-wheat-400"}
-      diff_seconds < 86_400 -> {"#{div(diff_seconds, 3600)}h ago", "text-sweet-salmon-600 dark:text-sweet-salmon-400"}
-      true -> {"#{div(diff_seconds, 86_400)}d ago", "text-sweet-salmon-600 dark:text-sweet-salmon-400"}
+      diff_seconds < 3600 -> {"#{div(diff_seconds, 60)}m ago", "text-yellow-600 dark:text-yellow-400"}
+      diff_seconds < 86_400 -> {"#{div(diff_seconds, 3600)}h ago", "text-red-600 dark:text-red-400"}
+      true -> {"#{div(diff_seconds, 86_400)}d ago", "text-red-600 dark:text-red-400"}
     end
   end
 
-  defp response_time_badge(nil), do: {"-", "text-cool-steel-400"}
+  defp response_time_badge(nil), do: {"-", "text-gray-400"}
 
-  defp response_time_badge(%{response_time_ms: nil}), do: {"-", "text-cool-steel-400"}
+  defp response_time_badge(%{response_time_ms: nil}), do: {"-", "text-gray-400"}
 
   defp response_time_badge(%{response_time_ms: ms}) do
     formatted =
@@ -552,8 +552,8 @@ defmodule ToweropsWeb.DeviceLive.Index do
     color =
       cond do
         ms < 20 -> "text-green-600 dark:text-green-400"
-        ms <= 100 -> "text-wheat-600 dark:text-wheat-400"
-        true -> "text-sweet-salmon-600 dark:text-sweet-salmon-400"
+        ms <= 100 -> "text-yellow-600 dark:text-yellow-400"
+        true -> "text-red-600 dark:text-red-400"
       end
 
     {formatted, color}
@@ -567,14 +567,14 @@ defmodule ToweropsWeb.DeviceLive.Index do
     min(100, round(ms / 2))
   end
 
-  defp response_time_bar_color(nil), do: "bg-cool-steel-300"
-  defp response_time_bar_color(%{response_time_ms: nil}), do: "bg-cool-steel-300"
+  defp response_time_bar_color(nil), do: "bg-gray-300"
+  defp response_time_bar_color(%{response_time_ms: nil}), do: "bg-gray-300"
 
   defp response_time_bar_color(%{response_time_ms: ms}) do
     cond do
       ms < 20 -> "bg-green-500"
-      ms <= 100 -> "bg-wheat-500"
-      true -> "bg-sweet-salmon-500"
+      ms <= 100 -> "bg-yellow-500"
+      true -> "bg-red-500"
     end
   end
 
diff --git a/lib/towerops_web/live/device_live/index.html.heex b/lib/towerops_web/live/device_live/index.html.heex
index 87ad731b..1e630e4f 100644
--- a/lib/towerops_web/live/device_live/index.html.heex
+++ b/lib/towerops_web/live/device_live/index.html.heex
@@ -5,12 +5,10 @@
   unresolved_alert_count={assigns[:unresolved_alert_count] || 0}
 >
   <%!-- Header: title + actions, then tabs below on mobile --%>
-  <div class="mb-4 border-b border-cool-steel-200 dark:border-white/10 pb-3">
+  <div class="mb-4 border-b border-gray-200 dark:border-white/10 pb-3">
     <div class="flex items-center justify-between gap-2">
       <div class="flex items-center gap-2 min-w-0">
-        <h1 class="text-xl font-bold text-cool-steel-900 dark:text-white truncate">
-          {@page_title}
-        </h1>
+        <h1 class="text-xl font-bold text-gray-900 dark:text-white truncate">{@page_title}</h1>
         <% percent =
           if @device_quota.limit != :unlimited and @device_quota.limit > 0 do
             (@device_quota.current / @device_quota.limit * 100) |> trunc()
@@ -20,16 +18,16 @@
         <% badge_class =
           cond do
             @current_scope.user.is_superuser ->
-              "bg-cerulean-50 text-cerulean-700 dark:bg-cerulean-900/20 dark:text-cerulean-400"
+              "bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400"
 
             @device_quota.limit != :unlimited and @device_quota.current >= @device_quota.limit ->
-              "bg-sweet-salmon-50 text-sweet-salmon-700 dark:bg-sweet-salmon-900/20 dark:text-sweet-salmon-400"
+              "bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-400"
 
             percent >= 90 ->
               "bg-orange-50 text-orange-700 dark:bg-orange-900/20 dark:text-orange-400"
 
             @device_quota.limit == :unlimited ->
-              "bg-cerulean-50 text-cerulean-700 dark:bg-cerulean-900/20 dark:text-cerulean-400"
+              "bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400"
 
             true ->
               "bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-400"
@@ -100,9 +98,9 @@
         class={[
           "px-2.5 py-1 rounded-md text-sm font-medium transition-colors",
           if @active_tab == "existing" do
-            "bg-cool-steel-100 text-cool-steel-900 dark:bg-cool-steel-800 dark:text-white"
+            "bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-white"
           else
-            "text-cool-steel-500 hover:text-cool-steel-700 hover:bg-cool-steel-50 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 dark:hover:bg-cool-steel-800/50"
+            "text-gray-500 hover:text-gray-700 hover:bg-gray-50 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:bg-gray-800/50"
           end
         ]}
       >
@@ -113,16 +111,16 @@
         class={[
           "inline-flex items-center gap-1 px-2.5 py-1 rounded-md text-sm font-medium transition-colors",
           if @active_tab == "discovered" do
-            "bg-cool-steel-100 text-cool-steel-900 dark:bg-cool-steel-800 dark:text-white"
+            "bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-white"
           else
-            "text-cool-steel-500 hover:text-cool-steel-700 hover:bg-cool-steel-50 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 dark:hover:bg-cool-steel-800/50"
+            "text-gray-500 hover:text-gray-700 hover:bg-gray-50 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:bg-gray-800/50"
           end
         ]}
       >
         {t("Discovered")}
         <span
           :if={@pagination && @pagination.total_count > 0}
-          class="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900 dark:text-cerulean-200"
+          class="inline-flex items-center px-1.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
         >
           {@pagination.total_count}
         </span>
@@ -133,9 +131,9 @@
   <%= case @active_tab do %>
     <% "existing" -> %>
       <%= if @sites_enabled && !@has_sites && @has_devices do %>
-        <div class="rounded-md bg-cerulean-50 dark:bg-cerulean-900/20 p-3 mb-4 flex items-center gap-3">
-          <.icon name="hero-information-circle" class="h-5 w-5 text-cerulean-400 flex-shrink-0" />
-          <p class="text-sm text-cerulean-800 dark:text-cerulean-200 flex-1">
+        <div class="rounded-md bg-blue-50 dark:bg-blue-900/20 p-3 mb-4 flex items-center gap-3">
+          <.icon name="hero-information-circle" class="h-5 w-5 text-blue-400 flex-shrink-0" />
+          <p class="text-sm text-blue-800 dark:text-blue-200 flex-1">
             {t("Organize your devices with sites")} —
             <.link navigate={~p"/sites/new"} class="font-medium underline">
               {t("Create a site")}
@@ -148,12 +146,12 @@
         <div class="text-center py-16">
           <.icon
             name="hero-server"
-            class="mx-auto h-12 w-12 text-cool-steel-400 dark:text-cool-steel-500 dark:text-cool-steel-400"
+            class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500 dark:text-gray-400"
           />
-          <h3 class="mt-4 text-lg font-semibold text-cool-steel-900 dark:text-white">
+          <h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-white">
             {t("No devices")}
           </h3>
-          <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+          <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
             {t("Get started by adding your first device.")}
           </p>
           <div class="mt-6">
@@ -164,14 +162,14 @@
         </div>
       <% else %>
         <%!-- Sticky Status Bar + Search --%>
-        <div class="sticky top-0 z-10 bg-white dark:bg-cool-steel-900 pb-3 -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-ml-4 lg:-mr-8 lg:pl-4 lg:pr-8 border-b border-cool-steel-100 dark:border-white/5">
+        <div class="sticky top-0 z-10 bg-white dark:bg-gray-900 pb-3 -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-ml-4 lg:-mr-8 lg:pl-4 lg:pr-8 border-b border-gray-100 dark:border-white/5">
           <div class="flex items-center gap-3 pt-2">
             <%!-- Search --%>
             <form phx-change="search" class="flex-1 max-w-sm">
               <div class="relative">
                 <.icon
                   name="hero-magnifying-glass"
-                  class="absolute left-2.5 top-2 h-4 w-4 text-cool-steel-400"
+                  class="absolute left-2.5 top-2 h-4 w-4 text-gray-400"
                 />
                 <input
                   type="text"
@@ -179,7 +177,7 @@
                   value={@search_query}
                   placeholder={t("Filter by name or IP...")}
                   phx-debounce="150"
-                  class="block w-full rounded-md border-0 py-1.5 pl-9 pr-3 text-sm bg-cool-steel-50 dark:bg-cool-steel-800 text-cool-steel-900 dark:text-white ring-1 ring-inset ring-cool-steel-300 dark:ring-white/10 placeholder:text-cool-steel-400 focus:ring-2 focus:ring-cerulean-500 font-mono"
+                  class="block w-full rounded-md border-0 py-1.5 pl-9 pr-3 text-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-white/10 placeholder:text-gray-400 focus:ring-2 focus:ring-blue-500 font-mono"
                   autocomplete="off"
                   spellcheck="false"
                 />
@@ -188,9 +186,7 @@
 
             <%!-- Status summary + filter buttons --%>
             <div class="flex items-center gap-2 text-xs font-medium">
-              <span class="text-cool-steel-500 dark:text-cool-steel-400 font-mono">
-                {@total_devices}
-              </span>
+              <span class="text-gray-500 dark:text-gray-400 font-mono">{@total_devices}</span>
               <button
                 type="button"
                 phx-click="filter_status"
@@ -214,12 +210,12 @@
                 class={[
                   "inline-flex items-center gap-1 px-2 py-1 rounded-md transition-colors",
                   @status_filter == "down" &&
-                    "bg-sweet-salmon-100 dark:bg-sweet-salmon-900/40 text-sweet-salmon-800 dark:text-sweet-salmon-300 ring-1 ring-sweet-salmon-300 dark:ring-sweet-salmon-700",
+                    "bg-red-100 dark:bg-red-900/40 text-red-800 dark:text-red-300 ring-1 ring-red-300 dark:ring-red-700",
                   @status_filter != "down" &&
-                    "text-sweet-salmon-700 dark:text-sweet-salmon-400 hover:bg-sweet-salmon-50 dark:hover:bg-sweet-salmon-900/20"
+                    "text-red-700 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
                 ]}
               >
-                <span class="inline-block h-2 w-2 rounded-full bg-sweet-salmon-500"></span>
+                <span class="inline-block h-2 w-2 rounded-full bg-red-500"></span>
                 {@total_down}
               </button>
               <button
@@ -230,12 +226,12 @@
                 class={[
                   "inline-flex items-center gap-1 px-2 py-1 rounded-md transition-colors",
                   @status_filter == "unknown" &&
-                    "bg-cool-steel-200 dark:bg-cool-steel-700 text-cool-steel-800 dark:text-cool-steel-200 ring-1 ring-cool-steel-400 dark:ring-cool-steel-600",
+                    "bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 ring-1 ring-gray-400 dark:ring-gray-600",
                   @status_filter != "unknown" &&
-                    "text-cool-steel-500 dark:text-cool-steel-400 hover:bg-cool-steel-100 dark:hover:bg-cool-steel-800"
+                    "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
                 ]}
               >
-                <span class="inline-block h-2 w-2 rounded-full bg-cool-steel-400"></span>
+                <span class="inline-block h-2 w-2 rounded-full bg-gray-400"></span>
                 {@total_unknown}
               </button>
               <button
@@ -243,7 +239,7 @@
                 type="button"
                 phx-click="filter_status"
                 phx-value-status="all"
-                class="text-cool-steel-400 hover:text-cool-steel-600 dark:hover:text-cool-steel-300 ml-1"
+                class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 ml-1"
                 title={t("Clear filter")}
               >
                 <.icon name="hero-x-mark" class="h-4 w-4" />
@@ -262,7 +258,7 @@
                 id="device-list"
                 phx-update="ignore"
               >
-                <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/50">
+                <thead class="bg-gray-50 dark:bg-gray-800/50">
                   <tr>
                     <th :if={@reorder_mode} scope="col" class="py-2 pl-4 pr-2 w-8 sm:pl-3">
                       <span class="sr-only">Drag</span>
@@ -270,7 +266,7 @@
                     <th
                       scope="col"
                       class={[
-                        "py-2 pr-3 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400",
+                        "py-2 pr-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400",
                         @reorder_mode && "pl-2",
                         !@reorder_mode && "pl-4 sm:pl-3"
                       ]}
@@ -279,31 +275,31 @@
                     </th>
                     <th
                       scope="col"
-                      class="hidden sm:table-cell px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
+                      class="hidden sm:table-cell px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
                     >
                       {t("IP Address")}
                     </th>
                     <th
                       scope="col"
-                      class="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
+                      class="px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
                     >
                       {t("Status")}
                     </th>
                     <th
                       scope="col"
-                      class="hidden md:table-cell px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
+                      class="hidden md:table-cell px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
                     >
                       {t("Last Seen")}
                     </th>
                     <th
                       scope="col"
-                      class="hidden lg:table-cell px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
+                      class="hidden lg:table-cell px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
                     >
                       {t("Response")}
                     </th>
                     <th
                       scope="col"
-                      class="hidden lg:table-cell px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
+                      class="hidden lg:table-cell px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
                     >
                       {t("Subs")}
                     </th>
@@ -311,20 +307,20 @@
                 </thead>
                 <tbody
                   id="device-rows"
-                  class="divide-y divide-cool-steel-100 dark:divide-white/5"
+                  class="divide-y divide-gray-100 dark:divide-white/5"
                 >
                   <%= for row <- @device_rows do %>
                     <%= if row.type == :site_header do %>
                       <tr
                         id={row.id}
-                        class="bg-cool-steel-50/80 dark:bg-cool-steel-800/30"
+                        class="bg-gray-50/80 dark:bg-gray-800/30"
                         data-site-id={if row.site, do: row.site.id, else: "no-site"}
                         draggable={if @reorder_mode && row.site, do: "true", else: "false"}
                       >
                         <td :if={@reorder_mode && row.site} class="py-1.5 pl-4 pr-2 sm:pl-3">
                           <button
                             type="button"
-                            class="drag-handle cursor-grab active:cursor-grabbing text-cool-steel-400 hover:text-cool-steel-600 dark:hover:text-cool-steel-300"
+                            class="drag-handle cursor-grab active:cursor-grabbing text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                             title="Drag to reorder site"
                           >
                             <.icon name="hero-bars-3" class="h-4 w-4" />
@@ -340,17 +336,17 @@
                               <%= if row.site do %>
                                 <.link
                                   navigate={~p"/sites/#{row.site.id}"}
-                                  class="font-semibold text-cool-steel-900 dark:text-white hover:text-cerulean-600 dark:hover:text-cerulean-400"
+                                  class="font-semibold text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400"
                                 >
                                   {row.site.name}
                                 </.link>
                               <% else %>
-                                <span class="font-semibold text-cool-steel-700 dark:text-cool-steel-300">
+                                <span class="font-semibold text-gray-700 dark:text-gray-300">
                                   {if @sites_enabled, do: "Unassigned", else: "All Devices"}
                                 </span>
                               <% end %>
-                              <span class="text-cool-steel-400 dark:text-cool-steel-600">·</span>
-                              <span class="text-cool-steel-500 dark:text-cool-steel-400 font-mono">
+                              <span class="text-gray-400 dark:text-gray-600">·</span>
+                              <span class="text-gray-500 dark:text-gray-400 font-mono">
                                 {row.stats.total}
                               </span>
                               <span
@@ -363,14 +359,14 @@
                               </span>
                               <span
                                 :if={row.stats.down > 0}
-                                class="text-sweet-salmon-600 dark:text-sweet-salmon-400 font-medium"
+                                class="text-red-600 dark:text-red-400 font-medium"
                               >
-                                <span class="inline-block h-1.5 w-1.5 rounded-full bg-sweet-salmon-500">
+                                <span class="inline-block h-1.5 w-1.5 rounded-full bg-red-500">
                                 </span>
                                 {row.stats.down}
                               </span>
                               <%= if row.site && @site_subscribers[row.site.id] do %>
-                                <span class="text-wheat-600 dark:text-wheat-400">
+                                <span class="text-amber-600 dark:text-amber-400">
                                   <.icon name="hero-users" class="inline h-3 w-3" />
                                   {@site_subscribers[row.site.id].account_count}
                                 </span>
@@ -378,7 +374,7 @@
                             </div>
                             <span
                               :if={row.site && row.site.location}
-                              class="text-xs text-cool-steel-400 dark:text-cool-steel-500 dark:text-cool-steel-400"
+                              class="text-xs text-gray-400 dark:text-gray-500 dark:text-gray-400"
                             >
                               <.icon name="hero-map-pin" class="inline h-3 w-3" /> {row.site.location}
                             </span>
@@ -389,9 +385,8 @@
                       <tr
                         id={row.id}
                         class={[
-                          "device-row hover:bg-cerulean-50/50 dark:hover:bg-cerulean-900/10 transition-colors cursor-pointer",
-                          rem(row.device_index, 2) == 1 &&
-                            "bg-cool-steel-50/40 dark:bg-cool-steel-800/20"
+                          "device-row hover:bg-blue-50/50 dark:hover:bg-blue-900/10 transition-colors cursor-pointer",
+                          rem(row.device_index, 2) == 1 && "bg-gray-50/40 dark:bg-gray-800/20"
                         ]}
                         title={device_row_title(row.device)}
                         data-device-id={row.device.id}
@@ -408,13 +403,13 @@
                         >
                           <button
                             type="button"
-                            class="drag-handle cursor-grab active:cursor-grabbing text-cool-steel-400 hover:text-cool-steel-600 dark:hover:text-cool-steel-300"
+                            class="drag-handle cursor-grab active:cursor-grabbing text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                             title="Drag to reorder device"
                           >
                             <.icon name="hero-bars-3" class="h-4 w-4" />
                           </button>
                         </td>
-                        <td class="p-0 text-sm font-medium whitespace-nowrap text-cool-steel-900 dark:text-white">
+                        <td class="p-0 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white">
                           <.link
                             navigate={~p"/devices/#{row.device.id}"}
                             class={[
@@ -435,7 +430,7 @@
                           <.link
                             navigate={~p"/devices/#{row.device.id}"}
                             class={[
-                              "block px-3 text-inherit no-underline font-mono text-xs text-cool-steel-600 dark:text-cool-steel-300",
+                              "block px-3 text-inherit no-underline font-mono text-xs text-gray-600 dark:text-gray-300",
                               "py-2"
                             ]}
                           >
@@ -454,16 +449,15 @@
                               <span class={[
                                 "inline-block h-2 w-2 rounded-full",
                                 row.device.status == :up && "bg-green-500",
-                                row.device.status == :down && "bg-sweet-salmon-500",
-                                row.device.status == :unknown && "bg-cool-steel-400"
+                                row.device.status == :down && "bg-red-500",
+                                row.device.status == :unknown && "bg-gray-400"
                               ]} />
                               <span class={[
                                 "text-xs font-mono font-medium",
                                 row.device.status == :up && "text-green-700 dark:text-green-400",
-                                row.device.status == :down &&
-                                  "text-sweet-salmon-700 dark:text-sweet-salmon-400",
+                                row.device.status == :down && "text-red-700 dark:text-red-400",
                                 row.device.status == :unknown &&
-                                  "text-cool-steel-500 dark:text-cool-steel-400"
+                                  "text-gray-500 dark:text-gray-400"
                               ]}>
                                 {row.device.status |> to_string() |> String.upcase()}
                               </span>
@@ -496,7 +490,7 @@
                               <% bar_w = response_time_bar_width(row.response) %>
                               <div
                                 :if={bar_w > 0}
-                                class="w-16 h-1.5 bg-cool-steel-100 dark:bg-cool-steel-700 rounded-full overflow-hidden"
+                                class="w-16 h-1.5 bg-gray-100 dark:bg-gray-700 rounded-full overflow-hidden"
                               >
                                 <div
                                   class={"h-full rounded-full #{response_time_bar_color(row.response)}"}
@@ -515,14 +509,12 @@
                             ]}
                           >
                             <%= if sub_text = format_subscriber_count(row.subscribers) do %>
-                              <span class="inline-flex items-center gap-1 text-xs text-cerulean-700 dark:text-cerulean-300">
+                              <span class="inline-flex items-center gap-1 text-xs text-blue-700 dark:text-blue-300">
                                 <.icon name="hero-users" class="h-3 w-3" />
                                 {sub_text}
                               </span>
                             <% else %>
-                              <span class="text-xs text-cool-steel-300 dark:text-cool-steel-600">
-                                —
-                              </span>
+                              <span class="text-xs text-gray-300 dark:text-gray-600">—</span>
                             <% end %>
                           </.link>
                         </td>
@@ -540,17 +532,17 @@
         <div class="text-center py-16">
           <.icon
             name="hero-magnifying-glass"
-            class="mx-auto h-12 w-12 text-cool-steel-400 dark:text-cool-steel-500 dark:text-cool-steel-400"
+            class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500 dark:text-gray-400"
           />
-          <h3 class="mt-4 text-lg font-semibold text-cool-steel-900 dark:text-white">
+          <h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-white">
             {t("No discovered devices")}
           </h3>
-          <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+          <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
             {t("Devices will appear here as they are discovered via LLDP/CDP.")}
           </p>
         </div>
       <% else %>
-        <div class="mb-4 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+        <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
           Showing {(@pagination.page - 1) * @pagination.per_page + 1}-{min(
             @pagination.page * @pagination.per_page,
             @pagination.total_count
@@ -565,16 +557,16 @@
                   <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
                     MAC
                   </span>
-                  <span class="ml-2 font-mono text-sm text-cool-steel-900 dark:text-white">
+                  <span class="ml-2 font-mono text-sm text-gray-900 dark:text-white">
                     {discovered.identifier.value}
                   </span>
                 </div>
               <% :ip -> %>
                 <div>
-                  <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900 dark:text-cerulean-200">
+                  <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                     IP
                   </span>
-                  <span class="ml-2 font-mono text-sm text-cool-steel-900 dark:text-white">
+                  <span class="ml-2 font-mono text-sm text-gray-900 dark:text-white">
                     {discovered.identifier.value}
                   </span>
                 </div>
@@ -583,56 +575,52 @@
                   <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                     HOST
                   </span>
-                  <span class="ml-2 text-sm text-cool-steel-900 dark:text-white">
+                  <span class="ml-2 text-sm text-gray-900 dark:text-white">
                     {discovered.identifier.value}
                   </span>
                 </div>
               <% _ -> %>
-                <span class="text-sm text-cool-steel-500 dark:text-cool-steel-400">Unknown</span>
+                <span class="text-sm text-gray-500 dark:text-gray-400">Unknown</span>
             <% end %>
           </:col>
           <:col :let={discovered} label={t("Hostname")}>
             <%= if discovered.hostname do %>
-              <span class="text-sm font-medium text-cool-steel-900 dark:text-white">
+              <span class="text-sm font-medium text-gray-900 dark:text-white">
                 {discovered.hostname}
               </span>
             <% else %>
-              <span class="text-sm text-cool-steel-400">-</span>
+              <span class="text-sm text-gray-400">-</span>
             <% end %>
           </:col>
           <:col :let={discovered} label={t("Type")}>
             <div class="flex items-center gap-2">
               <.icon
                 name="hero-server"
-                class="h-4 w-4 text-cool-steel-500 dark:text-cool-steel-400"
+                class="h-4 w-4 text-gray-500 dark:text-gray-400"
               />
-              <span class="text-sm text-cool-steel-900 dark:text-white">
+              <span class="text-sm text-gray-900 dark:text-white">
                 {device_type_label(discovered.device_type)}
               </span>
             </div>
           </:col>
           <:col :let={discovered} label={t("Manufacturer")}>
             <%= if discovered.manufacturer do %>
-              <span class="text-sm text-cool-steel-900 dark:text-white">
-                {discovered.manufacturer}
-              </span>
+              <span class="text-sm text-gray-900 dark:text-white">{discovered.manufacturer}</span>
             <% else %>
-              <span class="text-sm text-cool-steel-400">-</span>
+              <span class="text-sm text-gray-400">-</span>
             <% end %>
           </:col>
           <:col :let={discovered} label={t("Discovered By")}>
-            <div class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+            <div class="text-sm text-gray-600 dark:text-gray-400">
               <%= if length(discovered.discovered_by) == 1 do %>
                 <% [first] = discovered.discovered_by %>
                 <.link
                   navigate={~p"/devices/#{first.device_id}"}
-                  class="text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                  class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
                 >
                   {first.device_name}
                 </.link>
-                <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
-                  ({first.interface})
-                </span>
+                <span class="text-xs text-gray-500 dark:text-gray-400"> ({first.interface})</span>
               <% else %>
                 <span>{length(discovered.discovered_by)} devices</span>
               <% end %>
@@ -641,7 +629,7 @@
           <:col :let={discovered} label={t("Last Seen")}>
             <.timestamp
               datetime={discovered.last_seen}
-              class="text-sm text-cool-steel-600 dark:text-cool-steel-400"
+              class="text-sm text-gray-600 dark:text-gray-400"
             />
           </:col>
           <:col :let={discovered} label={t("Actions")}>
@@ -656,25 +644,25 @@
         </.table>
 
         <%= if @pagination.total_pages > 1 do %>
-          <div class="mt-6 flex items-center justify-between border-t border-cool-steel-200 dark:border-white/10 pt-6">
+          <div class="mt-6 flex items-center justify-between border-t border-gray-200 dark:border-white/10 pt-6">
             <div class="flex flex-1 justify-between sm:hidden">
               <.link
                 :if={@pagination.page > 1}
                 patch={~p"/devices?tab=discovered&page=#{@pagination.page - 1}"}
-                class="relative inline-flex items-center rounded-md border border-cool-steel-300 bg-white px-4 py-2 text-sm font-medium text-cool-steel-700 hover:bg-cool-steel-50 dark:border-white/10 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700"
+                class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
               >
                 {t("Previous")}
               </.link>
               <.link
                 :if={@pagination.page < @pagination.total_pages}
                 patch={~p"/devices?tab=discovered&page=#{@pagination.page + 1}"}
-                class="relative ml-3 inline-flex items-center rounded-md border border-cool-steel-300 bg-white px-4 py-2 text-sm font-medium text-cool-steel-700 hover:bg-cool-steel-50 dark:border-white/10 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700"
+                class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
               >
                 {t("Next")}
               </.link>
             </div>
             <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
-              <p class="text-sm text-cool-steel-700 dark:text-cool-steel-400">
+              <p class="text-sm text-gray-700 dark:text-gray-400">
                 <span class="font-medium">{(@pagination.page - 1) * @pagination.per_page + 1}</span>–<span class="font-medium">{min(@pagination.page * @pagination.per_page, @pagination.total_count)}</span> of
                 <span class="font-medium">{@pagination.total_count}</span>
               </p>
@@ -685,24 +673,24 @@
                 <.link
                   :if={@pagination.page > 1}
                   patch={~p"/devices?tab=discovered&page=#{@pagination.page - 1}"}
-                  class="relative inline-flex items-center rounded-l-md px-2 py-2 text-cool-steel-400 ring-1 ring-inset ring-cool-steel-300 hover:bg-cool-steel-50 dark:ring-white/10 dark:hover:bg-cool-steel-800"
+                  class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:ring-white/10 dark:hover:bg-gray-800"
                 >
                   <.icon name="hero-chevron-left" class="h-5 w-5" />
                 </.link>
                 <%= for page_num <- pagination_range(@pagination.page, @pagination.total_pages) do %>
                   <%= if page_num == :ellipsis do %>
-                    <span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-cool-steel-700 ring-1 ring-inset ring-cool-steel-300 dark:text-cool-steel-400 dark:ring-white/10">
+                    <span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 dark:text-gray-400 dark:ring-white/10">
                       ...
                     </span>
                   <% else %>
                     <.link
                       patch={~p"/devices?tab=discovered&page=#{page_num}"}
                       class={[
-                        "relative inline-flex items-center px-4 py-2 text-sm font-semibold ring-1 ring-inset ring-cool-steel-300 dark:ring-white/10",
+                        "relative inline-flex items-center px-4 py-2 text-sm font-semibold ring-1 ring-inset ring-gray-300 dark:ring-white/10",
                         if @pagination.page == page_num do
-                          "z-10 bg-cerulean-600 text-white"
+                          "z-10 bg-blue-600 text-white"
                         else
-                          "text-cool-steel-900 hover:bg-cool-steel-50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+                          "text-gray-900 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
                         end
                       ]}
                     >
@@ -713,7 +701,7 @@
                 <.link
                   :if={@pagination.page < @pagination.total_pages}
                   patch={~p"/devices?tab=discovered&page=#{@pagination.page + 1}"}
-                  class="relative inline-flex items-center rounded-r-md px-2 py-2 text-cool-steel-400 ring-1 ring-inset ring-cool-steel-300 hover:bg-cool-steel-50 dark:ring-white/10 dark:hover:bg-cool-steel-800"
+                  class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:ring-white/10 dark:hover:bg-gray-800"
                 >
                   <.icon name="hero-chevron-right" class="h-5 w-5" />
                 </.link>
diff --git a/lib/towerops_web/live/device_live/show.ex b/lib/towerops_web/live/device_live/show.ex
index 863433b2..e22fe25b 100644
--- a/lib/towerops_web/live/device_live/show.ex
+++ b/lib/towerops_web/live/device_live/show.ex
@@ -632,8 +632,8 @@ defmodule ToweropsWeb.DeviceLive.Show do
 
   # Additional template-used formatting functions (not yet in Formatters module)
   @doc false
-  def utilization_text_color(pct) when pct >= 90, do: "text-sweet-salmon-600 dark:text-sweet-salmon-400"
-  def utilization_text_color(pct) when pct >= 70, do: "text-wheat-600 dark:text-wheat-400"
+  def utilization_text_color(pct) when pct >= 90, do: "text-red-600 dark:text-red-400"
+  def utilization_text_color(pct) when pct >= 70, do: "text-yellow-600 dark:text-yellow-400"
   def utilization_text_color(_pct), do: "text-green-600 dark:text-green-400"
 
   @doc false
@@ -1023,7 +1023,7 @@ defmodule ToweropsWeb.DeviceLive.Show do
     assigns = %{}
 
     ~H"""
-    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-wheat-100 text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400">
+    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
       WARNING
     </span>
     """
@@ -1033,7 +1033,7 @@ defmodule ToweropsWeb.DeviceLive.Show do
     assigns = %{}
 
     ~H"""
-    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400">
+    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400">
       CRITICAL
     </span>
     """
@@ -1043,7 +1043,7 @@ defmodule ToweropsWeb.DeviceLive.Show do
     assigns = %{}
 
     ~H"""
-    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-cool-steel-100 text-cool-steel-800 dark:bg-cool-steel-900/30 dark:text-cool-steel-400">
+    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400">
       UNKNOWN
     </span>
     """
@@ -1053,7 +1053,7 @@ defmodule ToweropsWeb.DeviceLive.Show do
     assigns = %{}
 
     ~H"""
-    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-cool-steel-100 text-cool-steel-800 dark:bg-cool-steel-900/30 dark:text-cool-steel-400">
+    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400">
       PENDING
     </span>
     """
@@ -1115,8 +1115,8 @@ defmodule ToweropsWeb.DeviceLive.Show do
 
   defp config_change_dot_color(event) do
     cond do
-      event.change_size > 50 -> "bg-sweet-salmon-500"
-      event.change_size > 20 -> "bg-wheat-500"
+      event.change_size > 50 -> "bg-red-500"
+      event.change_size > 20 -> "bg-yellow-500"
       true -> "bg-green-500"
     end
   end
diff --git a/lib/towerops_web/live/device_live/show.html.heex b/lib/towerops_web/live/device_live/show.html.heex
index f19fcd2d..50980ec8 100644
--- a/lib/towerops_web/live/device_live/show.html.heex
+++ b/lib/towerops_web/live/device_live/show.html.heex
@@ -17,11 +17,11 @@
         [%{label: @device.name}]
     } />
 
-    <div class="sticky top-0 z-30 -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-ml-4 lg:-mr-8 lg:pl-4 lg:pr-8 py-3 bg-cool-steel-50/95 dark:bg-cool-steel-950/95 backdrop-blur-sm border-b border-cool-steel-200/50 dark:border-white/5 mb-4">
+    <div class="sticky top-0 z-30 -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-ml-4 lg:-mr-8 lg:pl-4 lg:pr-8 py-3 bg-gray-50/95 dark:bg-gray-950/95 backdrop-blur-sm border-b border-gray-200/50 dark:border-white/5 mb-4">
       <div class="flex items-start justify-between gap-2">
         <div class="min-w-0 flex-1">
           <div class="flex items-center gap-2 flex-wrap">
-            <h1 class="text-xl sm:text-2xl font-bold text-cool-steel-900 dark:text-white truncate">
+            <h1 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white truncate">
               {@device.name}
             </h1>
             <div class={[
@@ -31,18 +31,18 @@
                   "bg-green-100 text-green-800 dark:bg-green-950/50 dark:text-green-400 ring-1 ring-green-600/20 dark:ring-green-500/30"
 
                 :down ->
-                  "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-950/50 dark:text-sweet-salmon-400 ring-1 ring-sweet-salmon-600/20 dark:ring-sweet-salmon-500/30"
+                  "bg-red-100 text-red-800 dark:bg-red-950/50 dark:text-red-400 ring-1 ring-red-600/20 dark:ring-red-500/30"
 
                 :unknown ->
-                  "bg-cool-steel-100 text-cool-steel-800 dark:bg-cool-steel-800/50 dark:text-cool-steel-400 ring-1 ring-cool-steel-600/20 dark:ring-cool-steel-500/30"
+                  "bg-gray-100 text-gray-800 dark:bg-gray-800/50 dark:text-gray-400 ring-1 ring-gray-600/20 dark:ring-gray-500/30"
               end
             ]}>
               <span class={[
                 "h-2 w-2 rounded-full animate-pulse",
                 case @device.status do
                   :up -> "bg-green-600 dark:bg-green-500"
-                  :down -> "bg-sweet-salmon-600 dark:bg-sweet-salmon-500"
-                  :unknown -> "bg-cool-steel-500 dark:bg-cool-steel-400"
+                  :down -> "bg-red-600 dark:bg-red-500"
+                  :unknown -> "bg-gray-500 dark:bg-gray-400"
                 end
               ]}>
               </span>
@@ -55,25 +55,25 @@
               </span>
             </div>
           </div>
-          <div class="flex flex-wrap items-center gap-1.5 mt-1 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+          <div class="flex flex-wrap items-center gap-1.5 mt-1 text-xs text-gray-500 dark:text-gray-400">
             <span
-              class="font-mono text-cool-steel-600 dark:text-cool-steel-400 group/ip cursor-pointer"
+              class="font-mono text-gray-600 dark:text-gray-400 group/ip cursor-pointer"
               phx-click={JS.dispatch("phx:copy", detail: %{text: @device.ip_address})}
               title={t("Click to copy")}
             >
               {@device.ip_address}
               <.icon
                 name="hero-clipboard-document"
-                class="h-3 w-3 inline ml-0.5 opacity-0 group-hover/ip:opacity-100 transition-opacity text-cool-steel-400"
+                class="h-3 w-3 inline ml-0.5 opacity-0 group-hover/ip:opacity-100 transition-opacity text-gray-400"
               />
             </span>
-            <span class="text-cool-steel-300 dark:text-cool-steel-600">·</span>
+            <span class="text-gray-300 dark:text-gray-600">·</span>
             <span class="inline-flex items-center gap-1.5">
-              <span class="text-xs text-cool-steel-400 dark:text-cool-steel-500 font-medium">
+              <span class="text-xs text-gray-400 dark:text-gray-500 font-medium">
                 {t("Agent:")}
               </span>
               <%= if @agent_info.type == :cloud do %>
-                <span class="inline-flex items-center gap-1 text-cerulean-600 dark:text-cerulean-400">
+                <span class="inline-flex items-center gap-1 text-blue-600 dark:text-blue-400">
                   <.icon name="hero-cloud" class="h-3 w-3" />
                   <%= if @agent_info.agent_token_id do %>
                     {t("Cloud")} ({@agent_info.name})
@@ -84,7 +84,7 @@
               <% else %>
                 <%= if @agent_info.is_offline do %>
                   <span
-                    class="inline-flex items-center gap-1 px-1.5 py-0.5 font-medium text-wheat-700 bg-wheat-100 dark:text-wheat-400 dark:bg-wheat-900/30 rounded"
+                    class="inline-flex items-center gap-1 px-1.5 py-0.5 font-medium text-amber-700 bg-amber-100 dark:text-amber-400 dark:bg-amber-900/30 rounded"
                     title="Agent has not checked in for over 5 minutes."
                   >
                     <.icon name="hero-exclamation-triangle" class="h-3 w-3" />
@@ -110,11 +110,11 @@
     </div>
     <!-- Subscriber Impact Card -->
     <%= if @subscriber_impact && @subscriber_impact.subscriber_count > 0 do %>
-      <div class="mb-4 rounded-lg border border-cerulean-200 bg-cerulean-50 dark:border-cerulean-800/50 dark:bg-cerulean-950/30 px-4 py-3">
+      <div class="mb-4 rounded-lg border border-indigo-200 bg-indigo-50 dark:border-indigo-800/50 dark:bg-indigo-950/30 px-4 py-3">
         <div class="flex items-center gap-6">
           <div class="flex items-center gap-2">
-            <.icon name="hero-users" class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400" />
-            <span class="text-sm font-semibold text-cerulean-900 dark:text-cerulean-200">
+            <.icon name="hero-users" class="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
+            <span class="text-sm font-semibold text-indigo-900 dark:text-indigo-200">
               {@subscriber_impact.subscriber_count} {if @subscriber_impact.subscriber_count == 1,
                 do: "subscriber",
                 else: "subscribers"}
@@ -124,9 +124,9 @@
             <div class="flex items-center gap-2">
               <.icon
                 name="hero-currency-dollar"
-                class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400"
+                class="h-5 w-5 text-indigo-600 dark:text-indigo-400"
               />
-              <span class="text-sm font-semibold text-cerulean-900 dark:text-cerulean-200">
+              <span class="text-sm font-semibold text-indigo-900 dark:text-indigo-200">
                 {format_mrr(@subscriber_impact.mrr)}/mo
               </span>
             </div>
@@ -136,16 +136,16 @@
     <% end %>
     
 <!-- Tabs -->
-    <div class="border-b border-cool-steel-200 dark:border-white/10">
+    <div class="border-b border-gray-200 dark:border-white/10">
       <nav class="-mb-px flex space-x-8 overflow-x-auto">
         <.link
           patch={~p"/devices/#{@device.id}?tab=overview"}
           class={[
             "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors",
             if @active_tab == "overview" do
-              "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold"
+              "border-blue-500 text-blue-600 dark:text-blue-400 font-semibold"
             else
-              "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+              "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
             end
           ]}
         >
@@ -158,9 +158,9 @@
             class={[
               "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors",
               if @active_tab == "ports" do
-                "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold"
+                "border-blue-500 text-blue-600 dark:text-blue-400 font-semibold"
               else
-                "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+                "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
               end
             ]}
           >
@@ -174,14 +174,14 @@
             class={[
               "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors inline-flex items-center gap-1.5",
               if @active_tab == "wireless" do
-                "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold"
+                "border-blue-500 text-blue-600 dark:text-blue-400 font-semibold"
               else
-                "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+                "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
               end
             ]}
           >
             {t("Wireless")}
-            <span class="inline-flex items-center rounded-full bg-cool-steel-100 dark:bg-cool-steel-700 px-2 py-0.5 text-xs font-medium text-cool-steel-600 dark:text-cool-steel-300">
+            <span class="inline-flex items-center rounded-full bg-gray-100 dark:bg-gray-700 px-2 py-0.5 text-xs font-medium text-gray-600 dark:text-gray-300">
               {@wireless_client_count}
             </span>
           </.link>
@@ -193,9 +193,9 @@
             class={[
               "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors",
               if @active_tab == "transceivers" do
-                "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold"
+                "border-blue-500 text-blue-600 dark:text-blue-400 font-semibold"
               else
-                "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+                "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
               end
             ]}
           >
@@ -209,9 +209,9 @@
             class={[
               "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors",
               if @active_tab == "printer_supplies" do
-                "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold"
+                "border-blue-500 text-blue-600 dark:text-blue-400 font-semibold"
               else
-                "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+                "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
               end
             ]}
           >
@@ -225,9 +225,9 @@
             class={[
               "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors",
               if @active_tab == "hardware" do
-                "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold"
+                "border-blue-500 text-blue-600 dark:text-blue-400 font-semibold"
               else
-                "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+                "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
               end
             ]}
           >
@@ -241,9 +241,9 @@
             class={[
               "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors",
               if @active_tab == "neighbors" do
-                "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold"
+                "border-blue-500 text-blue-600 dark:text-blue-400 font-semibold"
               else
-                "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+                "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
               end
             ]}
           >
@@ -257,9 +257,9 @@
             class={[
               "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors",
               if @active_tab == "arp" do
-                "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold"
+                "border-blue-500 text-blue-600 dark:text-blue-400 font-semibold"
               else
-                "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+                "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
               end
             ]}
           >
@@ -273,9 +273,9 @@
             class={[
               "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors",
               if @active_tab == "mac" do
-                "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold"
+                "border-blue-500 text-blue-600 dark:text-blue-400 font-semibold"
               else
-                "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+                "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
               end
             ]}
           >
@@ -289,9 +289,9 @@
             class={[
               "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors",
               if @active_tab == "vlans" do
-                "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold"
+                "border-blue-500 text-blue-600 dark:text-blue-400 font-semibold"
               else
-                "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+                "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
               end
             ]}
           >
@@ -305,9 +305,9 @@
             class={[
               "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors",
               if @active_tab == "ip_addresses" do
-                "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold"
+                "border-blue-500 text-blue-600 dark:text-blue-400 font-semibold"
               else
-                "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+                "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
               end
             ]}
           >
@@ -321,17 +321,14 @@
             class={[
               "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors",
               if @active_tab == "backups" do
-                "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold"
+                "border-blue-500 text-blue-600 dark:text-blue-400 font-semibold"
               else
-                "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+                "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
               end
             ]}
           >
             <span class="flex items-center gap-1.5">
-              <.icon
-                name="hero-beaker"
-                class="h-3.5 w-3.5 text-cerulean-500 dark:text-cerulean-400"
-              />
+              <.icon name="hero-beaker" class="h-3.5 w-3.5 text-blue-500 dark:text-blue-400" />
               {t("Backups")}
             </span>
           </.link>
@@ -340,7 +337,7 @@
         <%= if false and @device.mikrotik_enabled do %>
           <.link
             navigate={~p"/devices/#{@device.id}/config-timeline"}
-            class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent font-medium text-sm text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300"
+            class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent font-medium text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
           >
             <span class="flex items-center gap-1.5">
               <.icon name="hero-clock" class="h-3.5 w-3.5 text-orange-500 dark:text-orange-400" />
@@ -355,9 +352,9 @@
             class={[
               "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors",
               if(@active_tab == "preseem",
-                do: "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold",
+                do: "border-blue-500 text-blue-600 dark:text-blue-400 font-semibold",
                 else:
-                  "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+                  "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
               )
             ]}
           >
@@ -374,9 +371,9 @@
             class={[
               "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors",
               if(@active_tab == "gaiia",
-                do: "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold",
+                do: "border-blue-500 text-blue-600 dark:text-blue-400 font-semibold",
                 else:
-                  "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+                  "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
               )
             ]}
           >
@@ -394,9 +391,9 @@
           class={[
             "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors",
             if @active_tab == "checks" do
-              "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold"
+              "border-blue-500 text-blue-600 dark:text-blue-400 font-semibold"
             else
-              "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+              "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
             end
           ]}
         >
@@ -408,9 +405,9 @@
           class={[
             "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors",
             if @active_tab == "logs" do
-              "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold"
+              "border-blue-500 text-blue-600 dark:text-blue-400 font-semibold"
             else
-              "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+              "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
             end
           ]}
         >
@@ -423,9 +420,9 @@
             class={[
               "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors",
               if @active_tab == "debug" do
-                "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold"
+                "border-blue-500 text-blue-600 dark:text-blue-400 font-semibold"
               else
-                "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+                "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
               end
             ]}
           >
@@ -443,55 +440,53 @@
           <!-- Left Column: Device Information & Traffic -->
           <div class="space-y-6">
             <!-- Device Information -->
-            <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-              <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-                <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+            <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+              <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+                <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                   {t("Device Information")}
                 </h3>
               </div>
               <div class="p-4">
                 <dl class="space-y-1">
                   <%= if @snmp_device do %>
-                    <div class="flex justify-between py-1.5 border-b border-cool-steel-100 dark:border-white/5">
-                      <dt class="shrink-0 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                    <div class="flex justify-between py-1.5 border-b border-gray-100 dark:border-white/5">
+                      <dt class="shrink-0 text-sm text-gray-600 dark:text-gray-400">
                         System Name
                       </dt>
-                      <dd class="flex-1 text-right ml-4 text-sm font-medium text-cool-steel-900 dark:text-white">
+                      <dd class="flex-1 text-right ml-4 text-sm font-medium text-gray-900 dark:text-white">
                         {@snmp_device.sys_name || @device.name}
                       </dd>
                     </div>
 
-                    <div class="flex justify-between py-1.5 border-b border-cool-steel-100 dark:border-white/5">
-                      <dt class="shrink-0 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                    <div class="flex justify-between py-1.5 border-b border-gray-100 dark:border-white/5">
+                      <dt class="shrink-0 text-sm text-gray-600 dark:text-gray-400">
                         {t("Resolved IP")}
                       </dt>
                       <dd
-                        class="flex-1 text-right ml-4 text-sm font-medium text-cool-steel-900 dark:text-white font-mono group/rip cursor-pointer"
+                        class="flex-1 text-right ml-4 text-sm font-medium text-gray-900 dark:text-white font-mono group/rip cursor-pointer"
                         phx-click={JS.dispatch("phx:copy", detail: %{text: @device.ip_address})}
                         title={t("Click to copy")}
                       >
                         {@device.ip_address}
                         <.icon
                           name="hero-clipboard-document"
-                          class="h-3.5 w-3.5 inline ml-1 opacity-0 group-hover/rip:opacity-100 transition-opacity text-cool-steel-400"
+                          class="h-3.5 w-3.5 inline ml-1 opacity-0 group-hover/rip:opacity-100 transition-opacity text-gray-400"
                         />
                       </dd>
                     </div>
 
-                    <div class="flex justify-between py-1.5 border-b border-cool-steel-100 dark:border-white/5">
-                      <dt class="shrink-0 text-sm text-cool-steel-600 dark:text-cool-steel-400">
-                        Hardware
-                      </dt>
-                      <dd class="flex-1 text-right ml-4 text-sm font-medium text-cool-steel-900 dark:text-white">
+                    <div class="flex justify-between py-1.5 border-b border-gray-100 dark:border-white/5">
+                      <dt class="shrink-0 text-sm text-gray-600 dark:text-gray-400">Hardware</dt>
+                      <dd class="flex-1 text-right ml-4 text-sm font-medium text-gray-900 dark:text-white">
                         {@snmp_device.model || "N/A"}
                       </dd>
                     </div>
 
-                    <div class="flex justify-between py-1.5 border-b border-cool-steel-100 dark:border-white/5">
-                      <dt class="shrink-0 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                    <div class="flex justify-between py-1.5 border-b border-gray-100 dark:border-white/5">
+                      <dt class="shrink-0 text-sm text-gray-600 dark:text-gray-400">
                         Operating System
                       </dt>
-                      <dd class="flex-1 text-right ml-4 text-sm font-medium text-cool-steel-900 dark:text-white">
+                      <dd class="flex-1 text-right ml-4 text-sm font-medium text-gray-900 dark:text-white">
                         <div class="flex items-center justify-end gap-2">
                           <span>
                             {cond do
@@ -509,22 +504,22 @@
                             <div class="group/firmware relative inline-flex items-center">
                               <.icon
                                 name="hero-arrow-up-circle"
-                                class="h-5 w-5 text-cerulean-500 cursor-help dark:text-cerulean-400"
+                                class="h-5 w-5 text-blue-500 cursor-help dark:text-blue-400"
                               />
                               <!-- Invisible bridge to prevent gap -->
                               <div class="absolute left-0 top-0 w-full h-8 z-40"></div>
                               <!-- Tooltip popup -->
-                              <div class="invisible group-hover/firmware:visible hover:visible absolute left-0 top-7 z-50 w-80 rounded-lg bg-white dark:bg-cool-steel-800 shadow-xl ring-1 ring-black ring-opacity-5 dark:ring-white dark:ring-opacity-10 p-4">
+                              <div class="invisible group-hover/firmware:visible hover:visible absolute left-0 top-7 z-50 w-80 rounded-lg bg-white dark:bg-gray-800 shadow-xl ring-1 ring-black ring-opacity-5 dark:ring-white dark:ring-opacity-10 p-4">
                                 <div class="flex items-start gap-3">
                                   <.icon
                                     name="hero-arrow-up-circle"
-                                    class="h-5 w-5 text-cerulean-500 dark:text-cerulean-400 flex-shrink-0 mt-0.5"
+                                    class="h-5 w-5 text-blue-500 dark:text-blue-400 flex-shrink-0 mt-0.5"
                                   />
                                   <div class="flex-1 min-w-0">
-                                    <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-2">
+                                    <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
                                       {t("Firmware Update Available")}
                                     </h4>
-                                    <div class="space-y-1.5 text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                                    <div class="space-y-1.5 text-xs text-gray-600 dark:text-gray-400">
                                       <div>
                                         <span class="font-medium">Current:</span>
                                         <span class="font-mono ml-1">
@@ -533,11 +528,11 @@
                                       </div>
                                       <div>
                                         <span class="font-medium">Latest:</span>
-                                        <span class="font-mono ml-1 text-cerulean-600 dark:text-cerulean-400">
+                                        <span class="font-mono ml-1 text-blue-600 dark:text-blue-400">
                                           {@available_firmware.version}
                                         </span>
                                         <%= if @available_firmware.release_date do %>
-                                          <span class="text-cool-steel-500 dark:text-cool-steel-400 dark:text-cool-steel-500 dark:text-cool-steel-400">
+                                          <span class="text-gray-500 dark:text-gray-400 dark:text-gray-500 dark:text-gray-400">
                                             (released {format_date(
                                               @available_firmware.release_date
                                             )})
@@ -550,7 +545,7 @@
                                         href={@available_firmware.download_url}
                                         target="_blank"
                                         rel="noopener noreferrer"
-                                        class="inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium bg-cerulean-600 text-white hover:bg-cerulean-700"
+                                        class="inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium bg-blue-600 text-white hover:bg-blue-700"
                                       >
                                         {t("Download")}
                                         <.icon
@@ -563,7 +558,7 @@
                                           href={@available_firmware.changelog_url}
                                           target="_blank"
                                           rel="noopener noreferrer"
-                                          class="inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium text-cerulean-600 dark:text-cerulean-400 hover:bg-cerulean-50 dark:hover:bg-cerulean-900/20"
+                                          class="inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
                                         >
                                           {t("Release Notes")}
                                           <.icon
@@ -584,85 +579,75 @@
 
                     <div
                       :if={@snmp_device.serial_number}
-                      class="flex justify-between py-1.5 border-b border-cool-steel-100 dark:border-white/5"
+                      class="flex justify-between py-1.5 border-b border-gray-100 dark:border-white/5"
                     >
-                      <dt class="shrink-0 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                      <dt class="shrink-0 text-sm text-gray-600 dark:text-gray-400">
                         Serial Number
                       </dt>
-                      <dd class="flex-1 text-right ml-4 text-sm font-medium text-cool-steel-900 dark:text-white font-mono">
+                      <dd class="flex-1 text-right ml-4 text-sm font-medium text-gray-900 dark:text-white font-mono">
                         {@snmp_device.serial_number}
                       </dd>
                     </div>
 
-                    <div class="flex justify-between py-1.5 border-b border-cool-steel-100 dark:border-white/5">
-                      <dt class="shrink-0 text-sm text-cool-steel-600 dark:text-cool-steel-400">
-                        Object ID
-                      </dt>
-                      <dd class="flex-1 text-right ml-4 text-sm font-medium text-cool-steel-900 dark:text-white font-mono">
+                    <div class="flex justify-between py-1.5 border-b border-gray-100 dark:border-white/5">
+                      <dt class="shrink-0 text-sm text-gray-600 dark:text-gray-400">Object ID</dt>
+                      <dd class="flex-1 text-right ml-4 text-sm font-medium text-gray-900 dark:text-white font-mono">
                         {@snmp_device.sys_object_id || "N/A"}
                       </dd>
                     </div>
 
-                    <div class="flex justify-between py-1.5 border-b border-cool-steel-100 dark:border-white/5">
-                      <dt class="shrink-0 text-sm text-cool-steel-600 dark:text-cool-steel-400">
-                        Contact
-                      </dt>
-                      <dd class="flex-1 text-right ml-4 text-sm font-medium text-cool-steel-900 dark:text-white">
+                    <div class="flex justify-between py-1.5 border-b border-gray-100 dark:border-white/5">
+                      <dt class="shrink-0 text-sm text-gray-600 dark:text-gray-400">Contact</dt>
+                      <dd class="flex-1 text-right ml-4 text-sm font-medium text-gray-900 dark:text-white">
                         {@snmp_device.sys_contact || "N/A"}
                       </dd>
                     </div>
 
-                    <div class="flex justify-between py-1.5 border-b border-cool-steel-100 dark:border-white/5">
-                      <dt class="shrink-0 text-sm text-cool-steel-600 dark:text-cool-steel-400">
-                        Location
-                      </dt>
-                      <dd class="flex-1 text-right ml-4 text-sm font-medium text-cool-steel-900 dark:text-white">
+                    <div class="flex justify-between py-1.5 border-b border-gray-100 dark:border-white/5">
+                      <dt class="shrink-0 text-sm text-gray-600 dark:text-gray-400">Location</dt>
+                      <dd class="flex-1 text-right ml-4 text-sm font-medium text-gray-900 dark:text-white">
                         {format_location(@snmp_device.sys_location)}
                       </dd>
                     </div>
 
-                    <div class="flex justify-between py-1.5 border-b border-cool-steel-100 dark:border-white/5">
-                      <dt class="shrink-0 text-sm text-cool-steel-600 dark:text-cool-steel-400">
-                        Uptime
-                      </dt>
-                      <dd class="flex-1 text-right ml-4 text-sm font-medium text-cool-steel-900 dark:text-white">
+                    <div class="flex justify-between py-1.5 border-b border-gray-100 dark:border-white/5">
+                      <dt class="shrink-0 text-sm text-gray-600 dark:text-gray-400">Uptime</dt>
+                      <dd class="flex-1 text-right ml-4 text-sm font-medium text-gray-900 dark:text-white">
                         {format_uptime(@snmp_device.sys_uptime)}
                       </dd>
                     </div>
                   <% else %>
-                    <div class="flex justify-between py-1.5 border-b border-cool-steel-100 dark:border-white/5">
-                      <dt class="shrink-0 text-sm text-cool-steel-600 dark:text-cool-steel-400">
-                        Name
-                      </dt>
-                      <dd class="flex-1 text-right ml-4 text-sm font-medium text-cool-steel-900 dark:text-white">
+                    <div class="flex justify-between py-1.5 border-b border-gray-100 dark:border-white/5">
+                      <dt class="shrink-0 text-sm text-gray-600 dark:text-gray-400">Name</dt>
+                      <dd class="flex-1 text-right ml-4 text-sm font-medium text-gray-900 dark:text-white">
                         {@device.name}
                       </dd>
                     </div>
 
-                    <div class="flex justify-between py-1.5 border-b border-cool-steel-100 dark:border-white/5">
-                      <dt class="shrink-0 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                    <div class="flex justify-between py-1.5 border-b border-gray-100 dark:border-white/5">
+                      <dt class="shrink-0 text-sm text-gray-600 dark:text-gray-400">
                         IP Address
                       </dt>
-                      <dd class="flex-1 text-right ml-4 text-sm font-medium text-cool-steel-900 dark:text-white font-mono">
+                      <dd class="flex-1 text-right ml-4 text-sm font-medium text-gray-900 dark:text-white font-mono">
                         {@device.ip_address}
                       </dd>
                     </div>
                   <% end %>
 
-                  <div class="flex justify-between py-1.5 border-b border-cool-steel-100 dark:border-white/5">
-                    <dt class="shrink-0 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <div class="flex justify-between py-1.5 border-b border-gray-100 dark:border-white/5">
+                    <dt class="shrink-0 text-sm text-gray-600 dark:text-gray-400">
                       Device Added
                     </dt>
-                    <dd class="flex-1 text-right ml-4 text-sm font-medium text-cool-steel-900 dark:text-white">
+                    <dd class="flex-1 text-right ml-4 text-sm font-medium text-gray-900 dark:text-white">
                       {format_device_age(@device.inserted_at)}
                     </dd>
                   </div>
 
                   <div class="flex justify-between py-1.5">
-                    <dt class="shrink-0 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                    <dt class="shrink-0 text-sm text-gray-600 dark:text-gray-400">
                       Last Discovered
                     </dt>
-                    <dd class="flex-1 text-right ml-4 text-sm font-medium text-cool-steel-900 dark:text-white">
+                    <dd class="flex-1 text-right ml-4 text-sm font-medium text-gray-900 dark:text-white">
                       {if @device.last_discovery_at do
                         format_device_age(@device.last_discovery_at)
                       else
@@ -672,10 +657,8 @@
                   </div>
 
                   <div class="flex justify-between py-1.5">
-                    <dt class="shrink-0 text-sm text-cool-steel-600 dark:text-cool-steel-400">
-                      Last Polled
-                    </dt>
-                    <dd class="flex-1 text-right ml-4 text-sm font-medium text-cool-steel-900 dark:text-white">
+                    <dt class="shrink-0 text-sm text-gray-600 dark:text-gray-400">Last Polled</dt>
+                    <dd class="flex-1 text-right ml-4 text-sm font-medium text-gray-900 dark:text-white">
                       {if @device.last_snmp_poll_at do
                         format_device_age(@device.last_snmp_poll_at)
                       else
@@ -688,16 +671,16 @@
             </div>
             <!-- Overall Traffic Chart -->
             <%= if @traffic_chart_data do %>
-              <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
+              <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
                 <.link
                   navigate={~p"/devices/#{@device.id}/graph/traffic"}
-                  class="block px-4 py-3 border-b border-cool-steel-200 dark:border-white/10 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800 transition-colors"
+                  class="block px-4 py-3 border-b border-gray-200 dark:border-white/10 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                 >
                   <div class="flex items-center justify-between">
-                    <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                       {t("Overall Traffic")}
                     </h3>
-                    <.icon name="hero-arrow-right" class="h-4 w-4 text-cool-steel-400" />
+                    <.icon name="hero-arrow-right" class="h-4 w-4 text-gray-400" />
                   </div>
                 </.link>
                 <div class="p-4">
@@ -714,9 +697,9 @@
                   >
                     <div class="absolute inset-0 flex items-center justify-center" data-loading>
                       <div class="flex flex-col items-center gap-2">
-                        <div class="h-8 w-8 animate-spin rounded-full border-2 border-cool-steel-200 dark:border-cool-steel-700 border-t-cerulean-500">
+                        <div class="h-8 w-8 animate-spin rounded-full border-2 border-gray-200 dark:border-gray-700 border-t-blue-500">
                         </div>
-                        <span class="text-xs text-cool-steel-400">{t("Loading chart...")}</span>
+                        <span class="text-xs text-gray-400">{t("Loading chart...")}</span>
                       </div>
                     </div>
                     <canvas></canvas>
@@ -726,16 +709,16 @@
             <% end %>
             <!-- ICMP Latency Chart -->
             <%= if @latency_chart_data do %>
-              <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
+              <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
                 <.link
                   navigate={~p"/devices/#{@device.id}/graph/latency"}
-                  class="block px-4 py-3 border-b border-cool-steel-200 dark:border-white/10 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800 transition-colors"
+                  class="block px-4 py-3 border-b border-gray-200 dark:border-white/10 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                 >
                   <div class="flex items-center justify-between">
-                    <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                       {t("ICMP Latency")}
                     </h3>
-                    <.icon name="hero-arrow-right" class="h-4 w-4 text-cool-steel-400" />
+                    <.icon name="hero-arrow-right" class="h-4 w-4 text-gray-400" />
                   </div>
                 </.link>
                 <div class="p-4">
@@ -751,9 +734,9 @@
                   >
                     <div class="absolute inset-0 flex items-center justify-center" data-loading>
                       <div class="flex flex-col items-center gap-2">
-                        <div class="h-8 w-8 animate-spin rounded-full border-2 border-cool-steel-200 dark:border-cool-steel-700 border-t-cerulean-500">
+                        <div class="h-8 w-8 animate-spin rounded-full border-2 border-gray-200 dark:border-gray-700 border-t-blue-500">
                         </div>
-                        <span class="text-xs text-cool-steel-400">{t("Loading chart...")}</span>
+                        <span class="text-xs text-gray-400">{t("Loading chart...")}</span>
                       </div>
                     </div>
                     <canvas></canvas>
@@ -764,15 +747,15 @@
 
             <%!-- Recent Config Changes mini-card --%>
             <%= if false && @device.mikrotik_enabled && assigns[:recent_config_changes] && Enum.any?(@recent_config_changes) do %>
-              <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-                <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10 flex items-center justify-between">
-                  <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white flex items-center gap-1.5">
+              <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+                <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10 flex items-center justify-between">
+                  <h3 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center gap-1.5">
                     <.icon name="hero-clock" class="h-4 w-4 text-orange-500" />
                     {t("Recent Config Changes")}
                   </h3>
                   <.link
                     navigate={~p"/devices/#{@device.id}/config-timeline"}
-                    class="text-xs text-cerulean-500 hover:underline"
+                    class="text-xs text-blue-500 hover:underline"
                   >
                     View Timeline →
                   </.link>
@@ -782,7 +765,7 @@
                     <div class="flex items-center justify-between text-sm">
                       <div class="flex items-center gap-2">
                         <span class={"w-2 h-2 rounded-full #{config_change_dot_color(event)}"} />
-                        <span class="text-cool-steel-600 dark:text-cool-steel-400">
+                        <span class="text-gray-600 dark:text-gray-400">
                           {Calendar.strftime(event.changed_at, "%b %d %H:%M")}
                         </span>
                         <span
@@ -792,7 +775,7 @@
                           {s}
                         </span>
                       </div>
-                      <span class="text-cool-steel-500 dark:text-cool-steel-400 text-xs">
+                      <span class="text-gray-500 dark:text-gray-400 text-xs">
                         {event.change_size} lines
                       </span>
                     </div>
@@ -814,13 +797,13 @@
                 else
                   nil
                 end %>
-              <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
+              <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
                 <.link
                   navigate={~p"/devices/#{@device.id}/graph/processors"}
-                  class="block px-4 py-3 border-b border-cool-steel-200 dark:border-white/10 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800 transition-colors"
+                  class="block px-4 py-3 border-b border-gray-200 dark:border-white/10 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                 >
                   <div class="flex items-center justify-between">
-                    <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                       <%= if processor_count > 0 do %>
                         {processor_count} {if processor_count == 1,
                           do: "Processor",
@@ -829,7 +812,7 @@
                         {t("Processors")}
                       <% end %>
                     </h3>
-                    <.icon name="hero-arrow-right" class="h-4 w-4 text-cool-steel-400" />
+                    <.icon name="hero-arrow-right" class="h-4 w-4 text-gray-400" />
                   </div>
                 </.link>
                 <!-- Show chart if we have time-series data -->
@@ -851,26 +834,26 @@
                 <%= if avg_load do %>
                   <div class={[
                     "p-4",
-                    @processor_chart_data && "border-t border-cool-steel-200 dark:border-white/10"
+                    @processor_chart_data && "border-t border-gray-200 dark:border-white/10"
                   ]}>
                     <div class="flex items-center justify-between gap-4">
-                      <span class="text-sm text-cool-steel-700 dark:text-cool-steel-300">
+                      <span class="text-sm text-gray-700 dark:text-gray-300">
                         {t("Average Load")}
                       </span>
                       <div class="flex items-center gap-3 flex-1 max-w-md">
-                        <div class="flex-1 bg-cool-steel-200 rounded-full h-3 dark:bg-cool-steel-700">
+                        <div class="flex-1 bg-gray-200 rounded-full h-3 dark:bg-gray-700">
                           <div
                             class={[
                               "h-3 rounded-full transition-all",
                               avg_load < 50 && "bg-green-500",
-                              avg_load >= 50 && avg_load < 80 && "bg-wheat-500",
-                              avg_load >= 80 && "bg-sweet-salmon-500"
+                              avg_load >= 50 && avg_load < 80 && "bg-yellow-500",
+                              avg_load >= 80 && "bg-red-500"
                             ]}
                             style={"width: #{min(avg_load, 100)}%"}
                           >
                           </div>
                         </div>
-                        <span class="text-sm font-medium text-cool-steel-900 dark:text-white w-12 text-right">
+                        <span class="text-sm font-medium text-gray-900 dark:text-white w-12 text-right">
                           {Float.round(avg_load, 0)}%
                         </span>
                       </div>
@@ -881,16 +864,16 @@
             <% end %>
             <!-- Memory Usage Chart -->
             <%= if @memory_chart_data do %>
-              <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
+              <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
                 <.link
                   navigate={~p"/devices/#{@device.id}/graph/memory"}
-                  class="block px-4 py-3 border-b border-cool-steel-200 dark:border-white/10 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800 transition-colors"
+                  class="block px-4 py-3 border-b border-gray-200 dark:border-white/10 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
                 >
                   <div class="flex items-center justify-between">
-                    <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+                    <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                       {t("Memory Usage")}
                     </h3>
-                    <.icon name="hero-arrow-right" class="h-4 w-4 text-cool-steel-400" />
+                    <.icon name="hero-arrow-right" class="h-4 w-4 text-gray-400" />
                   </div>
                 </.link>
                 <div class="p-4">
@@ -908,27 +891,27 @@
             <% end %>
             <!-- Storage Usage -->
             <%= if @storage_sensors && length(@storage_sensors) > 0 do %>
-              <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-                <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-                  <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+              <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+                <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+                  <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                     {t("Storage Usage")}
                   </h3>
                 </div>
                 <div class="p-4">
                   <dl class="space-y-1">
                     <%= for sensor <- @storage_sensors do %>
-                      <div class="flex justify-between py-1.5 border-b border-cool-steel-100 dark:border-white/5">
-                        <dt class="shrink-0 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                      <div class="flex justify-between py-1.5 border-b border-gray-100 dark:border-white/5">
+                        <dt class="shrink-0 text-sm text-gray-600 dark:text-gray-400">
                           <.link
                             navigate={
                               ~p"/devices/#{@device.id}/graph/storage?sensor_id=#{sensor.id}"
                             }
-                            class="hover:text-cerulean-600 dark:hover:text-cerulean-400 hover:underline"
+                            class="hover:text-blue-600 dark:hover:text-blue-400 hover:underline"
                           >
                             {sensor.sensor_descr}
                           </.link>
                         </dt>
-                        <dd class="flex-1 text-right ml-4 text-sm font-medium text-cool-steel-900 dark:text-white">
+                        <dd class="flex-1 text-right ml-4 text-sm font-medium text-gray-900 dark:text-white">
                           <%= if sensor.latest_reading do %>
                             {format_sensor_value(
                               sensor.latest_reading.value,
@@ -947,18 +930,18 @@
             <% end %>
             <!-- Physical Storage Volumes (from HOST-RESOURCES-MIB) -->
             <%= if @storage && length(@storage) > 0 do %>
-              <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-                <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-                  <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+              <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+                <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+                  <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                     {t("Storage Volumes")}
-                    <span class="ml-2 text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 text-xs font-normal text-gray-500 dark:text-gray-400">
                       ({length(@storage)})
                     </span>
                   </h3>
                 </div>
                 <!-- Storage Volume Chart -->
                 <%= if @storage_volume_chart_data do %>
-                  <div class="p-4 border-b border-cool-steel-200 dark:border-white/10">
+                  <div class="p-4 border-b border-gray-200 dark:border-white/10">
                     <div
                       id="storage-volume-chart"
                       phx-hook="SensorChart"
@@ -983,34 +966,34 @@
                       navigate={
                         ~p"/devices/#{@device.id}/graph/storage_volume?storage_id=#{storage.id}"
                       }
-                      class="block hover:bg-cool-steel-50 dark:hover:bg-cool-steel-700/50 -mx-2 px-2 py-1 rounded transition-colors"
+                      class="block hover:bg-gray-50 dark:hover:bg-gray-700/50 -mx-2 px-2 py-1 rounded transition-colors"
                     >
                       <div class="flex items-center justify-between mb-1">
-                        <span class="text-sm text-cool-steel-700 dark:text-cool-steel-300 hover:text-cerulean-600 dark:hover:text-cerulean-400 hover:underline">
+                        <span class="text-sm text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 hover:underline">
                           {storage.description || "Storage #{storage.storage_index}"}
                         </span>
-                        <span class="text-sm font-medium text-cool-steel-900 dark:text-white">
+                        <span class="text-sm font-medium text-gray-900 dark:text-white">
                           {format_bytes(storage.used_bytes)} / {format_bytes(storage.total_bytes)}
                         </span>
                       </div>
                       <div class="flex items-center gap-3">
-                        <div class="flex-1 bg-cool-steel-200 rounded-full h-2 dark:bg-cool-steel-700">
+                        <div class="flex-1 bg-gray-200 rounded-full h-2 dark:bg-gray-700">
                           <div
                             class={[
                               "h-2 rounded-full transition-all",
                               usage_percent < 70 && "bg-green-500",
-                              usage_percent >= 70 && usage_percent < 90 && "bg-wheat-500",
-                              usage_percent >= 90 && "bg-sweet-salmon-500"
+                              usage_percent >= 70 && usage_percent < 90 && "bg-yellow-500",
+                              usage_percent >= 90 && "bg-red-500"
                             ]}
                             style={"width: #{min(usage_percent, 100)}%"}
                           >
                           </div>
                         </div>
-                        <span class="text-xs font-medium text-cool-steel-600 dark:text-cool-steel-400 w-12 text-right">
+                        <span class="text-xs font-medium text-gray-600 dark:text-gray-400 w-12 text-right">
                           {usage_percent}%
                         </span>
                       </div>
-                      <div class="mt-1 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                      <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                         {String.replace(storage.storage_type || "other", "_", " ")
                         |> String.capitalize()}
                       </div>
@@ -1021,27 +1004,27 @@
             <% end %>
             <!-- Temperature Sensors -->
             <%= if @temperature_sensors && length(@temperature_sensors) > 0 do %>
-              <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-                <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-                  <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+              <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+                <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+                  <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                     {t("Temperature")}
                   </h3>
                 </div>
                 <div class="p-4">
                   <dl class="space-y-1">
                     <%= for sensor <- @temperature_sensors do %>
-                      <div class="flex justify-between py-1.5 border-b border-cool-steel-100 dark:border-white/5">
-                        <dt class="shrink-0 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                      <div class="flex justify-between py-1.5 border-b border-gray-100 dark:border-white/5">
+                        <dt class="shrink-0 text-sm text-gray-600 dark:text-gray-400">
                           <.link
                             navigate={
                               ~p"/devices/#{@device.id}/graph/temperature?sensor_id=#{sensor.id}"
                             }
-                            class="hover:text-cerulean-600 dark:hover:text-cerulean-400 hover:underline"
+                            class="hover:text-blue-600 dark:hover:text-blue-400 hover:underline"
                           >
                             {sensor.sensor_descr}
                           </.link>
                         </dt>
-                        <dd class="flex-1 text-right ml-4 text-sm font-medium text-cool-steel-900 dark:text-white">
+                        <dd class="flex-1 text-right ml-4 text-sm font-medium text-gray-900 dark:text-white">
                           <%= if sensor.latest_reading do %>
                             {format_sensor_value(
                               sensor.latest_reading.value,
@@ -1060,27 +1043,27 @@
             <% end %>
             <!-- Voltage Sensors -->
             <%= if @voltage_sensors && length(@voltage_sensors) > 0 do %>
-              <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-                <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-                  <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+              <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+                <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+                  <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                     {t("Voltage")}
                   </h3>
                 </div>
                 <div class="p-4">
                   <dl class="space-y-1">
                     <%= for sensor <- @voltage_sensors do %>
-                      <div class="flex justify-between py-1.5 border-b border-cool-steel-100 dark:border-white/5">
-                        <dt class="shrink-0 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                      <div class="flex justify-between py-1.5 border-b border-gray-100 dark:border-white/5">
+                        <dt class="shrink-0 text-sm text-gray-600 dark:text-gray-400">
                           <.link
                             navigate={
                               ~p"/devices/#{@device.id}/graph/voltage?sensor_id=#{sensor.id}"
                             }
-                            class="hover:text-cerulean-600 dark:hover:text-cerulean-400 hover:underline"
+                            class="hover:text-blue-600 dark:hover:text-blue-400 hover:underline"
                           >
                             {sensor.sensor_descr}
                           </.link>
                         </dt>
-                        <dd class="flex-1 text-right ml-4 text-sm font-medium text-cool-steel-900 dark:text-white">
+                        <dd class="flex-1 text-right ml-4 text-sm font-medium text-gray-900 dark:text-white">
                           <%= if sensor.latest_reading do %>
                             {format_sensor_value(
                               sensor.latest_reading.value,
@@ -1099,9 +1082,9 @@
             <% end %>
             <!-- SFP Transceivers -->
             <%= if @grouped_transceivers && length(@grouped_transceivers) > 0 do %>
-              <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-                <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-                  <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+              <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+                <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+                  <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                     {t("Transceivers")}
                   </h3>
                 </div>
@@ -1109,18 +1092,18 @@
                   <dl class="space-y-1">
                     <%= for {_transceiver_name, sensors} <- @grouped_transceivers do %>
                       <%= for sensor <- sensors do %>
-                        <div class="flex justify-between py-1.5 border-b border-cool-steel-100 dark:border-white/5">
-                          <dt class="shrink-0 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                        <div class="flex justify-between py-1.5 border-b border-gray-100 dark:border-white/5">
+                          <dt class="shrink-0 text-sm text-gray-600 dark:text-gray-400">
                             <.link
                               navigate={
                                 ~p"/devices/#{@device.id}/graph/dbm?sensor_id=#{sensor.id}"
                               }
-                              class="hover:text-cerulean-600 dark:hover:text-cerulean-400 hover:underline"
+                              class="hover:text-blue-600 dark:hover:text-blue-400 hover:underline"
                             >
                               {sensor.sensor_descr}
                             </.link>
                           </dt>
-                          <dd class="flex-1 text-right ml-4 text-sm font-medium text-cool-steel-900 dark:text-white font-mono">
+                          <dd class="flex-1 text-right ml-4 text-sm font-medium text-gray-900 dark:text-white font-mono">
                             <%= if sensor.latest_reading do %>
                               {format_sensor_value(
                                 sensor.latest_reading.value,
@@ -1140,9 +1123,9 @@
             <% end %>
             <!-- Count Sensors (DHCP Leases, Connections, etc.) -->
             <%= if (@general_counters && length(@general_counters) > 0) || (@firewall_counters && length(@firewall_counters) > 0) do %>
-              <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-                <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-                  <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+              <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+                <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+                  <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                     {t("Counters")}
                   </h3>
                 </div>
@@ -1151,18 +1134,18 @@
                   <%= if @general_counters && length(@general_counters) > 0 do %>
                     <dl class="space-y-1">
                       <%= for sensor <- @general_counters do %>
-                        <div class="flex justify-between py-1.5 border-b border-cool-steel-100 dark:border-white/5">
-                          <dt class="shrink-0 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                        <div class="flex justify-between py-1.5 border-b border-gray-100 dark:border-white/5">
+                          <dt class="shrink-0 text-sm text-gray-600 dark:text-gray-400">
                             <.link
                               navigate={
                                 ~p"/devices/#{@device.id}/graph/#{sensor.sensor_type}?sensor_id=#{sensor.id}"
                               }
-                              class="hover:text-cerulean-600 dark:hover:text-cerulean-400 hover:underline"
+                              class="hover:text-blue-600 dark:hover:text-blue-400 hover:underline"
                             >
                               {sensor.sensor_descr}
                             </.link>
                           </dt>
-                          <dd class="flex-1 text-right ml-4 text-sm font-medium text-cool-steel-900 dark:text-white">
+                          <dd class="flex-1 text-right ml-4 text-sm font-medium text-gray-900 dark:text-white">
                             <%= if sensor.latest_reading && sensor.latest_reading.value do %>
                               {trunc(sensor.latest_reading.value)}
                               <%= if sensor.sensor_unit && sensor.sensor_unit != "" do %>
@@ -1179,23 +1162,23 @@
                   <!-- Firewall Counters -->
                   <%= if @firewall_counters && length(@firewall_counters) > 0 do %>
                     <div>
-                      <h4 class="text-xs font-semibold text-cool-steel-700 dark:text-cool-steel-300 mb-2 uppercase tracking-wider">
+                      <h4 class="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2 uppercase tracking-wider">
                         {t("Firewall")}
                       </h4>
                       <dl class="space-y-1">
                         <%= for sensor <- @firewall_counters do %>
-                          <div class="flex justify-between py-1.5 border-b border-cool-steel-100 dark:border-white/5">
-                            <dt class="shrink-0 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                          <div class="flex justify-between py-1.5 border-b border-gray-100 dark:border-white/5">
+                            <dt class="shrink-0 text-sm text-gray-600 dark:text-gray-400">
                               <.link
                                 navigate={
                                   ~p"/devices/#{@device.id}/graph/#{sensor.sensor_type}?sensor_id=#{sensor.id}"
                                 }
-                                class="hover:text-cerulean-600 dark:hover:text-cerulean-400 hover:underline"
+                                class="hover:text-blue-600 dark:hover:text-blue-400 hover:underline"
                               >
                                 {sensor.sensor_descr}
                               </.link>
                             </dt>
-                            <dd class="flex-1 text-right ml-4 text-sm font-medium text-cool-steel-900 dark:text-white">
+                            <dd class="flex-1 text-right ml-4 text-sm font-medium text-gray-900 dark:text-white">
                               <%= if sensor.latest_reading && sensor.latest_reading.value do %>
                                 {trunc(sensor.latest_reading.value)}
                                 <%= if sensor.sensor_unit && sensor.sensor_unit != "" do %>
@@ -1215,27 +1198,27 @@
             <% end %>
             <!-- Wireless Sensors (Frequency, Power, CCQ, etc.) -->
             <%= if @wireless_sensors && length(@wireless_sensors) > 0 do %>
-              <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-                <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-                  <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+              <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+                <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+                  <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                     {t("Wireless")}
                   </h3>
                 </div>
                 <div class="p-4">
                   <dl class="space-y-1">
                     <%= for sensor <- @wireless_sensors do %>
-                      <div class="flex justify-between py-1.5 border-b border-cool-steel-100 dark:border-white/5">
-                        <dt class="shrink-0 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                      <div class="flex justify-between py-1.5 border-b border-gray-100 dark:border-white/5">
+                        <dt class="shrink-0 text-sm text-gray-600 dark:text-gray-400">
                           <.link
                             navigate={
                               ~p"/devices/#{@device.id}/graph/wireless?sensor_id=#{sensor.id}"
                             }
-                            class="hover:text-cerulean-600 dark:hover:text-cerulean-400 hover:underline"
+                            class="hover:text-blue-600 dark:hover:text-blue-400 hover:underline"
                           >
                             {sensor.sensor_descr}
                           </.link>
                         </dt>
-                        <dd class="flex-1 text-right ml-4 text-sm font-medium text-cool-steel-900 dark:text-white">
+                        <dd class="flex-1 text-right ml-4 text-sm font-medium text-gray-900 dark:text-white">
                           <%= if sensor.latest_reading && sensor.latest_reading.value do %>
                             <%= if sensor.sensor_type in ["clients", "ccq", "utilization"] do %>
                               {trunc(sensor.latest_reading.value)}
@@ -1261,19 +1244,19 @@
         </div>
         <%!-- Connected Devices --%>
         <%= if @connected_devices != [] do %>
-          <div class="mt-6 bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-            <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-              <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+          <div class="mt-6 bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+            <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+              <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                 {t("Connected Devices")}
-                <span class="ml-2 text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                <span class="ml-2 text-xs font-normal text-gray-500 dark:text-gray-400">
                   ({length(@connected_devices)} links)
                 </span>
               </h3>
             </div>
             <div class="overflow-x-auto">
-              <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-                <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/75">
-                  <tr class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+              <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+                <thead class="bg-gray-50 dark:bg-gray-800/75">
+                  <tr class="text-xs text-gray-600 dark:text-gray-400">
                     <th class="px-4 py-3 text-left font-medium">Device</th>
                     <th class="px-4 py-3 text-left font-medium">IP Address</th>
                     <th class="px-4 py-3 text-left font-medium">Interface</th>
@@ -1282,7 +1265,7 @@
                     <th class="px-4 py-3 text-left font-medium">Status</th>
                   </tr>
                 </thead>
-                <tbody class="divide-y divide-cool-steel-200 dark:divide-white/10">
+                <tbody class="divide-y divide-gray-200 dark:divide-white/10">
                   <%= for link <- @connected_devices do %>
                     <% peer_device =
                       cond do
@@ -1298,30 +1281,30 @@
                         true ->
                           nil
                       end %>
-                    <tr class="text-sm hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800">
+                    <tr class="text-sm hover:bg-gray-50 dark:hover:bg-gray-800">
                       <td class="px-4 py-3">
                         <%= if peer_device do %>
                           <.link
                             navigate={~p"/devices/#{peer_device.id}"}
-                            class="font-medium text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                            class="font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                           >
                             {peer_device.name}
                           </.link>
                         <% else %>
-                          <div class="text-cool-steel-900 dark:text-white">
+                          <div class="text-gray-900 dark:text-white">
                             {link.discovered_remote_name || link.discovered_remote_mac ||
                               "Unknown"}
                           </div>
                         <% end %>
                       </td>
-                      <td class="px-4 py-3 font-mono text-sm text-cool-steel-900 dark:text-white">
+                      <td class="px-4 py-3 font-mono text-sm text-gray-900 dark:text-white">
                         <%= if peer_device do %>
                           {peer_device.ip_address}
                         <% else %>
                           {link.discovered_remote_ip || "-"}
                         <% end %>
                       </td>
-                      <td class="px-4 py-3 text-cool-steel-900 dark:text-white">
+                      <td class="px-4 py-3 text-gray-900 dark:text-white">
                         <%= if link.source_interface do %>
                           {link.source_interface.if_name}
                         <% else %>
@@ -1333,16 +1316,16 @@
                           "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium uppercase",
                           cond do
                             link.link_type in ["lldp", "cdp"] ->
-                              "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900 dark:text-cerulean-200"
+                              "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
 
                             link.link_type == "mac_match" ->
-                              "bg-wheat-100 text-wheat-800 dark:bg-wheat-900 dark:text-wheat-200"
+                              "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
 
                             link.link_type == "arp_inference" ->
                               "bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200"
 
                             true ->
-                              "bg-cool-steel-100 text-cool-steel-800 dark:bg-cool-steel-700 dark:text-cool-steel-200"
+                              "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200"
                           end
                         ]}>
                           {link.link_type}
@@ -1350,22 +1333,22 @@
                       </td>
                       <td class="px-4 py-3">
                         <div class="flex items-center gap-2">
-                          <div class="w-16 bg-cool-steel-200 dark:bg-cool-steel-700 rounded-full h-1.5">
+                          <div class="w-16 bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
                             <div
                               class={[
                                 "h-1.5 rounded-full",
                                 cond do
                                   link.confidence >= 0.9 -> "bg-green-500"
-                                  link.confidence >= 0.7 -> "bg-cerulean-500"
-                                  link.confidence >= 0.5 -> "bg-wheat-500"
-                                  true -> "bg-sweet-salmon-500"
+                                  link.confidence >= 0.7 -> "bg-blue-500"
+                                  link.confidence >= 0.5 -> "bg-yellow-500"
+                                  true -> "bg-red-500"
                                 end
                               ]}
                               style={"width: #{trunc(link.confidence * 100)}%"}
                             >
                             </div>
                           </div>
-                          <span class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                          <span class="text-xs text-gray-600 dark:text-gray-400">
                             {trunc(link.confidence * 100)}%
                           </span>
                         </div>
@@ -1376,7 +1359,7 @@
                             {t("Managed")}
                           </span>
                         <% else %>
-                          <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-cool-steel-100 text-cool-steel-600 dark:bg-cool-steel-700 dark:text-cool-steel-300">
+                          <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300">
                             {t("Discovered")}
                           </span>
                         <% end %>
@@ -1392,19 +1375,19 @@
         <%= if @snmp_interfaces && length(@snmp_interfaces) > 0 do %>
           <div class="space-y-6">
             <%= for {category, interfaces} <- @interfaces_by_type do %>
-              <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-                <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-                  <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+              <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+                <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+                  <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                     {category} Interfaces
-                    <span class="ml-2 text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="ml-2 text-xs font-normal text-gray-500 dark:text-gray-400">
                       ({length(interfaces)})
                     </span>
                   </h3>
                 </div>
                 <div class="overflow-x-auto">
-                  <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-                    <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/75">
-                      <tr class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                  <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+                    <thead class="bg-gray-50 dark:bg-gray-800/75">
+                      <tr class="text-xs text-gray-600 dark:text-gray-400">
                         <th class="px-3 py-2 text-left font-medium">#</th>
                         <th class="px-3 py-2 text-left font-medium">Name</th>
                         <th class="px-3 py-2 text-left font-medium">Status</th>
@@ -1418,10 +1401,10 @@
                         <th class="px-3 py-2 text-right font-medium">Errors</th>
                       </tr>
                     </thead>
-                    <tbody class="divide-y divide-cool-steel-200 dark:divide-white/10">
+                    <tbody class="divide-y divide-gray-200 dark:divide-white/10">
                       <%= for interface <- interfaces do %>
-                        <tr class="text-sm hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800 transition-colors">
-                          <td class="px-3 py-2 text-cool-steel-500 dark:text-cool-steel-400 font-mono text-xs">
+                        <tr class="text-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
+                          <td class="px-3 py-2 text-gray-500 dark:text-gray-400 font-mono text-xs">
                             {interface.if_index}
                           </td>
                           <td class="px-3 py-2">
@@ -1429,13 +1412,13 @@
                               navigate={
                                 ~p"/devices/#{@device.id}/graph/traffic?interface_id=#{interface.id}"
                               }
-                              class="hover:text-cerulean-600 dark:hover:text-cerulean-400"
+                              class="hover:text-blue-600 dark:hover:text-blue-400"
                             >
-                              <div class="font-medium text-cool-steel-900 dark:text-white hover:underline text-sm">
+                              <div class="font-medium text-gray-900 dark:text-white hover:underline text-sm">
                                 {interface.if_name || interface.if_descr}
                               </div>
                               <%= if interface.if_alias do %>
-                                <div class="text-xs text-cool-steel-500 dark:text-cool-steel-400 truncate max-w-[200px]">
+                                <div class="text-xs text-gray-500 dark:text-gray-400 truncate max-w-[200px]">
                                   {interface.if_alias}
                                 </div>
                               <% end %>
@@ -1446,31 +1429,30 @@
                               <span class={[
                                 "h-2 w-2 rounded-full flex-shrink-0",
                                 interface.if_oper_status == "up" && "bg-green-500",
-                                interface.if_oper_status == "down" && "bg-sweet-salmon-500",
-                                interface.if_oper_status not in ["up", "down"] &&
-                                  "bg-cool-steel-400"
+                                interface.if_oper_status == "down" && "bg-red-500",
+                                interface.if_oper_status not in ["up", "down"] && "bg-gray-400"
                               ]} />
                               <span class={[
                                 "font-medium",
                                 interface.if_oper_status == "up" &&
                                   "text-green-700 dark:text-green-400",
                                 interface.if_oper_status == "down" &&
-                                  "text-sweet-salmon-700 dark:text-sweet-salmon-400",
+                                  "text-red-700 dark:text-red-400",
                                 interface.if_oper_status not in ["up", "down"] &&
-                                  "text-cool-steel-600 dark:text-cool-steel-400"
+                                  "text-gray-600 dark:text-gray-400"
                               ]}>
                                 {String.upcase(interface.if_oper_status || "unknown")}
                               </span>
                             </span>
                           </td>
-                          <td class="px-3 py-2 text-right text-cool-steel-900 dark:text-white text-xs font-mono">
+                          <td class="px-3 py-2 text-right text-gray-900 dark:text-white text-xs font-mono">
                             {format_speed(interface.if_speed)}
                           </td>
-                          <td class="px-3 py-2 font-mono text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                          <td class="px-3 py-2 font-mono text-xs text-gray-600 dark:text-gray-400">
                             <% interface_ips =
                               Map.get(@ip_addresses_by_interface, interface.id, []) %>
                             <%= if Enum.empty?(interface_ips) do %>
-                              <span class="text-cool-steel-400">-</span>
+                              <span class="text-gray-400">-</span>
                             <% else %>
                               <div class="space-y-0.5">
                                 <%= for ip <- interface_ips do %>
@@ -1487,14 +1469,14 @@
                                     <% end %>
                                     <.icon
                                       name="hero-clipboard-document"
-                                      class="h-3 w-3 inline ml-0.5 opacity-0 group-hover/iip:opacity-100 transition-opacity text-cool-steel-400"
+                                      class="h-3 w-3 inline ml-0.5 opacity-0 group-hover/iip:opacity-100 transition-opacity text-gray-400"
                                     />
                                   </div>
                                 <% end %>
                               </div>
                             <% end %>
                           </td>
-                          <td class="px-3 py-2 font-mono text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                          <td class="px-3 py-2 font-mono text-xs text-gray-600 dark:text-gray-400">
                             <span
                               :if={interface.if_phys_address}
                               class="cursor-pointer group/mac"
@@ -1508,17 +1490,15 @@
                               {interface.if_phys_address}
                               <.icon
                                 name="hero-clipboard-document"
-                                class="h-3 w-3 inline ml-0.5 opacity-0 group-hover/mac:opacity-100 transition-opacity text-cool-steel-400"
+                                class="h-3 w-3 inline ml-0.5 opacity-0 group-hover/mac:opacity-100 transition-opacity text-gray-400"
                               />
                             </span>
-                            <span :if={!interface.if_phys_address} class="text-cool-steel-400">
-                              -
-                            </span>
+                            <span :if={!interface.if_phys_address} class="text-gray-400">-</span>
                           </td>
                           <td class="px-3 py-2 text-xs">
                             <%= if interface.configured_capacity_bps do %>
                               <div class="flex items-center gap-1">
-                                <span class="font-mono text-cool-steel-900 dark:text-white">
+                                <span class="font-mono text-gray-900 dark:text-white">
                                   {format_speed(interface.configured_capacity_bps)}
                                 </span>
                                 <span class={[
@@ -1531,7 +1511,7 @@
                                   id={"clear-capacity-#{interface.id}"}
                                   phx-click="clear_capacity"
                                   phx-value-interface_id={interface.id}
-                                  class="text-cool-steel-400 hover:text-sweet-salmon-500 transition-colors ml-0.5"
+                                  class="text-gray-400 hover:text-red-500 transition-colors ml-0.5"
                                   title={t("Clear capacity")}
                                 >
                                   <.icon name="hero-x-mark" class="h-3 w-3" />
@@ -1552,7 +1532,7 @@
                                     }
                                   )
                                 }
-                                class="text-xs text-cerulean-600 dark:text-cerulean-400 hover:underline"
+                                class="text-xs text-blue-600 dark:text-blue-400 hover:underline"
                               >
                                 {t("Set")}
                               </button>
@@ -1561,7 +1541,7 @@
                           <td class="px-3 py-2 text-xs">
                             <%= if interface.utilization do %>
                               <div class="flex items-center gap-2 min-w-[100px]">
-                                <div class="flex-1 bg-cool-steel-200 dark:bg-cool-steel-700 rounded-full h-2 overflow-hidden">
+                                <div class="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
                                   <div
                                     class={[
                                       "h-full rounded-full transition-all",
@@ -1579,15 +1559,15 @@
                                 </span>
                               </div>
                             <% else %>
-                              <span class="text-cool-steel-400">-</span>
+                              <span class="text-gray-400">-</span>
                             <% end %>
                           </td>
-                          <td class="px-3 py-2 text-right font-mono text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                          <td class="px-3 py-2 text-right font-mono text-xs text-gray-600 dark:text-gray-400">
                             {if interface.latest_stat && interface.latest_stat.if_in_octets,
                               do: format_bytes(interface.latest_stat.if_in_octets),
                               else: "-"}
                           </td>
-                          <td class="px-3 py-2 text-right font-mono text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                          <td class="px-3 py-2 text-right font-mono text-xs text-gray-600 dark:text-gray-400">
                             {if interface.latest_stat && interface.latest_stat.if_out_octets,
                               do: format_bytes(interface.latest_stat.if_out_octets),
                               else: "-"}
@@ -1604,12 +1584,12 @@
                                 navigate={
                                   ~p"/devices/#{@device.id}/graph/interface_errors?interface_id=#{interface.id}"
                                 }
-                                class="text-sweet-salmon-600 dark:text-sweet-salmon-400 hover:underline"
+                                class="text-red-600 dark:text-red-400 hover:underline"
                               >
                                 {total_errors}
                               </.link>
                             <% else %>
-                              <span class="text-cool-steel-400">-</span>
+                              <span class="text-gray-400">-</span>
                             <% end %>
                           </td>
                         </tr>
@@ -1622,18 +1602,18 @@
           </div>
         <% else %>
           <div class="text-center py-12">
-            <p class="text-cool-steel-500 dark:text-cool-steel-400">No interfaces discovered</p>
+            <p class="text-gray-500 dark:text-gray-400">No interfaces discovered</p>
           </div>
         <% end %>
       <% "wireless" -> %>
         <%= if @wireless_clients && length(@wireless_clients) > 0 do %>
-          <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-            <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10 flex items-center justify-between">
+          <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+            <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10 flex items-center justify-between">
               <div>
-                <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+                <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                   {t("Connected Wireless Clients")}
                 </h3>
-                <p class="text-xs text-cool-steel-500 dark:text-cool-steel-400 mt-0.5">
+                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                   {length(@wireless_clients)} clients — {@wireless_matched_count} subscribers matched
                   <%= if @wireless_last_updated do %>
                     · Last updated {format_relative_time(@wireless_last_updated)}
@@ -1642,9 +1622,9 @@
               </div>
             </div>
             <div class="overflow-x-auto">
-              <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-                <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/75">
-                  <tr class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+              <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+                <thead class="bg-gray-50 dark:bg-gray-800/75">
+                  <tr class="text-xs text-gray-600 dark:text-gray-400">
                     <th class="px-3 py-2 text-left font-medium">MAC Address</th>
                     <th class="px-3 py-2 text-left font-medium">IP Address</th>
                     <th class="px-3 py-2 text-left font-medium">Subscriber</th>
@@ -1656,25 +1636,25 @@
                     <th class="px-3 py-2 text-right font-medium">Uptime</th>
                   </tr>
                 </thead>
-                <tbody class="divide-y divide-cool-steel-200 dark:divide-white/10">
+                <tbody class="divide-y divide-gray-200 dark:divide-white/10">
                   <%= for client <- @wireless_clients do %>
                     <% subscriber_link =
                       Map.get(@wireless_client_subscribers, String.downcase(client.mac_address)) %>
-                    <tr class="text-sm hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800 transition-colors">
+                    <tr class="text-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                       <td class="px-3 py-2 font-mono text-xs">
                         <span
-                          class="cursor-pointer group/mac text-cool-steel-900 dark:text-white"
+                          class="cursor-pointer group/mac text-gray-900 dark:text-white"
                           phx-click={JS.dispatch("phx:copy", detail: %{text: client.mac_address})}
                           title={t("Click to copy")}
                         >
                           {client.mac_address}
                           <.icon
                             name="hero-clipboard-document"
-                            class="h-3 w-3 inline ml-0.5 opacity-0 group-hover/mac:opacity-100 transition-opacity text-cool-steel-400"
+                            class="h-3 w-3 inline ml-0.5 opacity-0 group-hover/mac:opacity-100 transition-opacity text-gray-400"
                           />
                         </span>
                       </td>
-                      <td class="px-3 py-2 font-mono text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                      <td class="px-3 py-2 font-mono text-xs text-gray-600 dark:text-gray-400">
                         <%= if client.ip_address do %>
                           <span
                             class="cursor-pointer group/ip"
@@ -1686,54 +1666,54 @@
                             {client.ip_address}
                             <.icon
                               name="hero-clipboard-document"
-                              class="h-3 w-3 inline ml-0.5 opacity-0 group-hover/ip:opacity-100 transition-opacity text-cool-steel-400"
+                              class="h-3 w-3 inline ml-0.5 opacity-0 group-hover/ip:opacity-100 transition-opacity text-gray-400"
                             />
                           </span>
                         <% else %>
-                          <span class="text-cool-steel-400">—</span>
+                          <span class="text-gray-400">—</span>
                         <% end %>
                       </td>
                       <td class="px-3 py-2 text-xs">
                         <%= if subscriber_link && subscriber_link.gaiia_account do %>
-                          <span class="text-cool-steel-900 dark:text-white font-medium">
+                          <span class="text-gray-900 dark:text-white font-medium">
                             {subscriber_link.gaiia_account.account_name}
                           </span>
                         <% else %>
-                          <span class="text-cool-steel-400">—</span>
+                          <span class="text-gray-400">—</span>
                         <% end %>
                       </td>
                       <td class="px-3 py-2 text-xs">
                         <%= if client.signal_strength do %>
                           <.signal_badge value={client.signal_strength} />
                         <% else %>
-                          <span class="text-cool-steel-400">—</span>
+                          <span class="text-gray-400">—</span>
                         <% end %>
                       </td>
                       <td class="px-3 py-2 text-xs">
                         <%= if client.snr do %>
                           <.snr_badge value={client.snr} />
                         <% else %>
-                          <span class="text-cool-steel-400">—</span>
+                          <span class="text-gray-400">—</span>
                         <% end %>
                       </td>
-                      <td class="px-3 py-2 text-right font-mono text-xs text-cool-steel-900 dark:text-white">
+                      <td class="px-3 py-2 text-right font-mono text-xs text-gray-900 dark:text-white">
                         <%= if client.distance do %>
                           {client.distance}m
                         <% else %>
-                          <span class="text-cool-steel-400">—</span>
+                          <span class="text-gray-400">—</span>
                         <% end %>
                       </td>
-                      <td class="px-3 py-2 text-right font-mono text-xs text-cool-steel-900 dark:text-white">
+                      <td class="px-3 py-2 text-right font-mono text-xs text-gray-900 dark:text-white">
                         {format_rate(client.tx_rate)}
                       </td>
-                      <td class="px-3 py-2 text-right font-mono text-xs text-cool-steel-900 dark:text-white">
+                      <td class="px-3 py-2 text-right font-mono text-xs text-gray-900 dark:text-white">
                         {format_rate(client.rx_rate)}
                       </td>
-                      <td class="px-3 py-2 text-right font-mono text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                      <td class="px-3 py-2 text-right font-mono text-xs text-gray-600 dark:text-gray-400">
                         <%= if client.uptime_seconds do %>
                           {format_uptime(client.uptime_seconds * 100)}
                         <% else %>
-                          <span class="text-cool-steel-400">—</span>
+                          <span class="text-gray-400">—</span>
                         <% end %>
                       </td>
                     </tr>
@@ -1746,33 +1726,33 @@
           <div class="text-center py-12">
             <.icon
               name="hero-signal"
-              class="mx-auto h-12 w-12 text-cool-steel-400 dark:text-cool-steel-600"
+              class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-600"
             />
-            <h3 class="mt-2 text-sm font-medium text-cool-steel-900 dark:text-white">
+            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">
               {t("No wireless clients")}
             </h3>
-            <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
               {t("No clients are currently connected to this access point.")}
             </p>
           </div>
         <% end %>
       <% "transceivers" -> %>
         <%= if @transceivers && length(@transceivers) > 0 do %>
-          <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-            <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-              <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+          <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+            <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+              <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                 {t("Optical Transceivers")}
               </h3>
-              <p class="text-xs text-cool-steel-500 dark:text-cool-steel-400 mt-0.5">
+              <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                 {length(@transceivers)} {if length(@transceivers) == 1,
                   do: "transceiver",
                   else: "transceivers"} installed
               </p>
             </div>
             <div class="overflow-x-auto">
-              <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-                <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/75">
-                  <tr class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+              <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+                <thead class="bg-gray-50 dark:bg-gray-800/75">
+                  <tr class="text-xs text-gray-600 dark:text-gray-400">
                     <th class="px-4 py-3 text-left font-medium">Port</th>
                     <th class="px-4 py-3 text-left font-medium">Type</th>
                     <th class="px-4 py-3 text-left font-medium">Vendor</th>
@@ -1782,31 +1762,31 @@
                     <th class="px-4 py-3 text-center font-medium">DOM</th>
                   </tr>
                 </thead>
-                <tbody class="divide-y divide-cool-steel-200 dark:divide-white/10">
+                <tbody class="divide-y divide-gray-200 dark:divide-white/10">
                   <%= for transceiver <- @transceivers do %>
-                    <tr class="text-sm hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800 transition-colors">
-                      <td class="px-4 py-3 font-mono text-xs text-cool-steel-900 dark:text-white">
+                    <tr class="text-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
+                      <td class="px-4 py-3 font-mono text-xs text-gray-900 dark:text-white">
                         {transceiver.port_index}
                       </td>
                       <td class="px-4 py-3">
-                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-400">
+                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400">
                           {transceiver.transceiver_type || "Unknown"}
                         </span>
                       </td>
-                      <td class="px-4 py-3 text-sm text-cool-steel-900 dark:text-white">
+                      <td class="px-4 py-3 text-sm text-gray-900 dark:text-white">
                         {transceiver.vendor_name || "—"}
                       </td>
-                      <td class="px-4 py-3 font-mono text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                      <td class="px-4 py-3 font-mono text-xs text-gray-600 dark:text-gray-400">
                         {transceiver.vendor_part_number || "—"}
                       </td>
-                      <td class="px-4 py-3 font-mono text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                      <td class="px-4 py-3 font-mono text-xs text-gray-600 dark:text-gray-400">
                         {transceiver.vendor_serial_number || "—"}
                       </td>
-                      <td class="px-4 py-3 text-right font-mono text-xs text-cool-steel-900 dark:text-white">
+                      <td class="px-4 py-3 text-right font-mono text-xs text-gray-900 dark:text-white">
                         <%= if transceiver.wavelength_nm do %>
                           {transceiver.wavelength_nm} nm
                         <% else %>
-                          <span class="text-cool-steel-400">—</span>
+                          <span class="text-gray-400">—</span>
                         <% end %>
                       </td>
                       <td class="px-4 py-3 text-center">
@@ -1815,7 +1795,7 @@
                             DOM
                           </span>
                         <% else %>
-                          <span class="text-cool-steel-400 text-xs">—</span>
+                          <span class="text-gray-400 text-xs">—</span>
                         <% end %>
                       </td>
                     </tr>
@@ -1828,33 +1808,33 @@
           <div class="text-center py-12">
             <.icon
               name="hero-cpu-chip"
-              class="mx-auto h-12 w-12 text-cool-steel-400 dark:text-cool-steel-600"
+              class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-600"
             />
-            <h3 class="mt-2 text-sm font-medium text-cool-steel-900 dark:text-white">
+            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">
               {t("No transceivers found")}
             </h3>
-            <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
               {t("No optical transceivers detected on this device.")}
             </p>
           </div>
         <% end %>
       <% "printer_supplies" -> %>
         <%= if @printer_supplies && length(@printer_supplies) > 0 do %>
-          <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-            <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-              <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+          <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+            <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+              <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                 {t("Printer Supplies")}
               </h3>
-              <p class="text-xs text-cool-steel-500 dark:text-cool-steel-400 mt-0.5">
+              <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                 {length(@printer_supplies)} {if length(@printer_supplies) == 1,
                   do: "supply",
                   else: "supplies"} monitored
               </p>
             </div>
             <div class="overflow-x-auto">
-              <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-                <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/75">
-                  <tr class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+              <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+                <thead class="bg-gray-50 dark:bg-gray-800/75">
+                  <tr class="text-xs text-gray-600 dark:text-gray-400">
                     <th class="px-4 py-3 text-left font-medium">Type</th>
                     <th class="px-4 py-3 text-left font-medium">Description</th>
                     <th class="px-4 py-3 text-left font-medium">Color</th>
@@ -1862,7 +1842,7 @@
                     <th class="px-4 py-3 text-right font-medium">Level</th>
                   </tr>
                 </thead>
-                <tbody class="divide-y divide-cool-steel-200 dark:divide-white/10">
+                <tbody class="divide-y divide-gray-200 dark:divide-white/10">
                   <%= for supply <- @printer_supplies do %>
                     <% percent =
                       if supply.max_capacity && supply.max_capacity > 0 do
@@ -1870,46 +1850,46 @@
                       else
                         nil
                       end %>
-                    <tr class="text-sm hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800 transition-colors">
+                    <tr class="text-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                       <td class="px-4 py-3">
                         <span class={[
                           "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium",
                           case supply.supply_type do
                             "toner" ->
-                              "bg-cool-steel-100 text-cool-steel-800 dark:bg-cool-steel-900/30 dark:text-cool-steel-400"
+                              "bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400"
 
                             "ink" ->
-                              "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-400"
+                              "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
 
                             "drum" ->
                               "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400"
 
                             _ ->
-                              "bg-cool-steel-100 text-cool-steel-800 dark:bg-cool-steel-900/30 dark:text-cool-steel-400"
+                              "bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400"
                           end
                         ]}>
                           {supply.supply_type || "Unknown"}
                         </span>
                       </td>
-                      <td class="px-4 py-3 text-sm text-cool-steel-900 dark:text-white">
+                      <td class="px-4 py-3 text-sm text-gray-900 dark:text-white">
                         {supply.supply_description || "—"}
                       </td>
-                      <td class="px-4 py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                      <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                         {supply.color_name || "—"}
                       </td>
-                      <td class="px-4 py-3 font-mono text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                      <td class="px-4 py-3 font-mono text-xs text-gray-600 dark:text-gray-400">
                         {supply.part_number || "—"}
                       </td>
                       <td class="px-4 py-3 text-right">
                         <%= if percent do %>
                           <div class="flex items-center justify-end gap-2">
-                            <div class="w-24 h-2 bg-cool-steel-200 dark:bg-cool-steel-700 rounded-full overflow-hidden">
+                            <div class="w-24 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
                               <div
                                 class={[
                                   "h-full transition-all",
                                   cond do
-                                    percent < 20 -> "bg-sweet-salmon-500"
-                                    percent < 40 -> "bg-wheat-500"
+                                    percent < 20 -> "bg-red-500"
+                                    percent < 40 -> "bg-yellow-500"
                                     true -> "bg-green-500"
                                   end
                                 ]}
@@ -1920,8 +1900,8 @@
                             <span class={[
                               "text-xs font-medium",
                               cond do
-                                percent < 20 -> "text-sweet-salmon-600 dark:text-sweet-salmon-400"
-                                percent < 40 -> "text-wheat-600 dark:text-wheat-400"
+                                percent < 20 -> "text-red-600 dark:text-red-400"
+                                percent < 40 -> "text-yellow-600 dark:text-yellow-400"
                                 true -> "text-green-600 dark:text-green-400"
                               end
                             ]}>
@@ -1929,7 +1909,7 @@
                             </span>
                           </div>
                         <% else %>
-                          <span class="text-cool-steel-400 text-xs">—</span>
+                          <span class="text-gray-400 text-xs">—</span>
                         <% end %>
                       </td>
                     </tr>
@@ -1940,35 +1920,32 @@
           </div>
         <% else %>
           <div class="text-center py-12">
-            <.icon
-              name="hero-printer"
-              class="mx-auto h-12 w-12 text-cool-steel-400 dark:text-cool-steel-600"
-            />
-            <h3 class="mt-2 text-sm font-medium text-cool-steel-900 dark:text-white">
+            <.icon name="hero-printer" class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-600" />
+            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">
               {t("No printer supplies found")}
             </h3>
-            <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
               {t("No printer supplies detected on this device.")}
             </p>
           </div>
         <% end %>
       <% "hardware" -> %>
         <%= if @hardware_inventory && length(@hardware_inventory) > 0 do %>
-          <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-            <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-              <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+          <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+            <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+              <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                 {t("Hardware Inventory")}
               </h3>
-              <p class="text-xs text-cool-steel-500 dark:text-cool-steel-400 mt-0.5">
+              <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                 {length(@hardware_inventory)} {if length(@hardware_inventory) == 1,
                   do: "component",
                   else: "components"} detected
               </p>
             </div>
             <div class="overflow-x-auto">
-              <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-                <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/75">
-                  <tr class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+              <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+                <thead class="bg-gray-50 dark:bg-gray-800/75">
+                  <tr class="text-xs text-gray-600 dark:text-gray-400">
                     <th class="px-4 py-3 text-left font-medium">Class</th>
                     <th class="px-4 py-3 text-left font-medium">Name</th>
                     <th class="px-4 py-3 text-left font-medium">Description</th>
@@ -1977,27 +1954,27 @@
                     <th class="px-4 py-3 text-left font-medium">Manufacturer</th>
                   </tr>
                 </thead>
-                <tbody class="divide-y divide-cool-steel-200 dark:divide-white/10">
+                <tbody class="divide-y divide-gray-200 dark:divide-white/10">
                   <%= for entity <- @hardware_inventory do %>
-                    <tr class="text-sm hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800 transition-colors">
+                    <tr class="text-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
                       <td class="px-4 py-3">
-                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-cool-steel-100 text-cool-steel-800 dark:bg-cool-steel-900/30 dark:text-cool-steel-400">
+                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400">
                           {entity.entity_class || "Unknown"}
                         </span>
                       </td>
-                      <td class="px-4 py-3 text-sm font-medium text-cool-steel-900 dark:text-white">
+                      <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">
                         {entity.name || "—"}
                       </td>
-                      <td class="px-4 py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                      <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                         {entity.description || "—"}
                       </td>
-                      <td class="px-4 py-3 font-mono text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                      <td class="px-4 py-3 font-mono text-xs text-gray-600 dark:text-gray-400">
                         {entity.serial_number || "—"}
                       </td>
-                      <td class="px-4 py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                      <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                         {entity.model || "—"}
                       </td>
-                      <td class="px-4 py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                      <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                         {entity.manufacturer || "—"}
                       </td>
                     </tr>
@@ -2010,28 +1987,28 @@
           <div class="text-center py-12">
             <.icon
               name="hero-cpu-chip"
-              class="mx-auto h-12 w-12 text-cool-steel-400 dark:text-cool-steel-600"
+              class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-600"
             />
-            <h3 class="mt-2 text-sm font-medium text-cool-steel-900 dark:text-white">
+            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">
               {t("No hardware inventory found")}
             </h3>
-            <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
               {t("No hardware components detected on this device.")}
             </p>
           </div>
         <% end %>
       <% "neighbors" -> %>
         <%= if @neighbors && length(@neighbors) > 0 do %>
-          <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-            <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-              <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+          <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+            <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+              <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                 {t("Discovered Neighbors")}
               </h3>
             </div>
             <div class="overflow-x-auto">
-              <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-                <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/75">
-                  <tr class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+              <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+                <thead class="bg-gray-50 dark:bg-gray-800/75">
+                  <tr class="text-xs text-gray-600 dark:text-gray-400">
                     <th class="px-4 py-3 text-left font-medium">Protocol</th>
                     <th class="px-4 py-3 text-left font-medium">Local Port</th>
                     <th class="px-4 py-3 text-left font-medium">Remote Device</th>
@@ -2042,14 +2019,14 @@
                     <th class="px-4 py-3 text-left font-medium">Last Seen</th>
                   </tr>
                 </thead>
-                <tbody class="divide-y divide-cool-steel-200 dark:divide-white/10">
+                <tbody class="divide-y divide-gray-200 dark:divide-white/10">
                   <%= for neighbor <- @neighbors do %>
-                    <tr class="text-sm hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800">
+                    <tr class="text-sm hover:bg-gray-50 dark:hover:bg-gray-800">
                       <td class="px-4 py-3">
                         <span class={[
                           "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium uppercase",
                           neighbor.protocol == "lldp" &&
-                            "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900 dark:text-cerulean-200",
+                            "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200",
                           neighbor.protocol == "cdp" &&
                             "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
                         ]}>
@@ -2061,7 +2038,7 @@
                           navigate={
                             ~p"/devices/#{@device.id}/graph/traffic?interface_id=#{neighbor.interface.id}"
                           }
-                          class="text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                          class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                         >
                           {neighbor.interface.if_name || neighbor.interface.if_descr}
                         </.link>
@@ -2070,12 +2047,12 @@
                         <%= if neighbor.matched_device do %>
                           <.link
                             navigate={~p"/devices/#{neighbor.matched_device.id}"}
-                            class="font-medium text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                            class="font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                           >
                             {neighbor.matched_device.name}
                           </.link>
                         <% else %>
-                          <div class="text-cool-steel-900 dark:text-white">
+                          <div class="text-gray-900 dark:text-white">
                             <%= if neighbor.remote_system_name do %>
                               {neighbor.remote_system_name |> String.split("/") |> List.first()}
                             <% else %>
@@ -2085,29 +2062,29 @@
                         <% end %>
                       </td>
                       <td class="px-4 py-3">
-                        <div class="text-cool-steel-900 dark:text-white">
+                        <div class="text-gray-900 dark:text-white">
                           {neighbor.remote_port_id || "-"}
                         </div>
                         <%= if !neighbor.matched_device && neighbor.remote_chassis_id do %>
-                          <div class="text-xs font-mono text-cool-steel-500 dark:text-cool-steel-400">
+                          <div class="text-xs font-mono text-gray-500 dark:text-gray-400">
                             {neighbor.remote_chassis_id}
                           </div>
                         <% end %>
                       </td>
-                      <td class="px-4 py-3 font-mono text-sm text-cool-steel-900 dark:text-white">
+                      <td class="px-4 py-3 font-mono text-sm text-gray-900 dark:text-white">
                         {neighbor.remote_address || "-"}
                       </td>
-                      <td class="px-4 py-3 text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                      <td class="px-4 py-3 text-xs text-gray-600 dark:text-gray-400">
                         {neighbor.remote_platform || "-"}
                       </td>
-                      <td class="px-4 py-3 text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                      <td class="px-4 py-3 text-xs text-gray-600 dark:text-gray-400">
                         <%= if neighbor.remote_capabilities && length(neighbor.remote_capabilities) > 0 do %>
                           {Enum.join(neighbor.remote_capabilities, ", ")}
                         <% else %>
                           -
                         <% end %>
                       </td>
-                      <td class="px-4 py-3 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                      <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400">
                         {time_ago(neighbor.last_discovered_at)}
                       </td>
                     </tr>
@@ -2117,13 +2094,13 @@
             </div>
           </div>
         <% else %>
-          <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-12">
+          <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-12">
             <div class="text-center">
-              <.icon name="hero-server-stack" class="mx-auto h-12 w-12 text-cool-steel-400" />
-              <h3 class="mt-2 text-sm font-semibold text-cool-steel-900 dark:text-white">
+              <.icon name="hero-server-stack" class="mx-auto h-12 w-12 text-gray-400" />
+              <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
                 {t("No neighbors discovered")}
               </h3>
-              <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                 {t(
                   "This device doesn't have any LLDP or CDP neighbors, or neighbor discovery hasn't run yet."
                 )}
@@ -2133,19 +2110,19 @@
         <% end %>
       <% "arp" -> %>
         <%= if @arp_entries && length(@arp_entries) > 0 do %>
-          <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-            <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-              <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+          <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+            <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+              <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                 {t("ARP Table")}
-                <span class="ml-2 text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                <span class="ml-2 text-xs font-normal text-gray-500 dark:text-gray-400">
                   ({length(@arp_entries)} entries)
                 </span>
               </h3>
             </div>
             <div class="overflow-x-auto">
-              <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-                <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/75">
-                  <tr class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+              <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+                <thead class="bg-gray-50 dark:bg-gray-800/75">
+                  <tr class="text-xs text-gray-600 dark:text-gray-400">
                     <th class="px-4 py-3 text-left font-medium">IP Address</th>
                     <th class="px-4 py-3 text-left font-medium">MAC Address</th>
                     <th class="px-4 py-3 text-left font-medium">Interface</th>
@@ -2153,43 +2130,43 @@
                     <th class="px-4 py-3 text-left font-medium">Last Seen</th>
                   </tr>
                 </thead>
-                <tbody class="divide-y divide-cool-steel-200 dark:divide-white/10">
+                <tbody class="divide-y divide-gray-200 dark:divide-white/10">
                   <%= for arp <- @arp_entries do %>
-                    <tr class="text-sm hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800">
-                      <td class="px-4 py-3 font-mono text-cool-steel-900 dark:text-white">
+                    <tr class="text-sm hover:bg-gray-50 dark:hover:bg-gray-800">
+                      <td class="px-4 py-3 font-mono text-gray-900 dark:text-white">
                         {arp.ip_address}
                       </td>
-                      <td class="px-4 py-3 font-mono text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                      <td class="px-4 py-3 font-mono text-xs text-gray-600 dark:text-gray-400">
                         {arp.mac_address}
                       </td>
-                      <td class="px-4 py-3 text-cool-steel-600 dark:text-cool-steel-400">
+                      <td class="px-4 py-3 text-gray-600 dark:text-gray-400">
                         <%= if arp.interface do %>
                           <.link
                             navigate={
                               ~p"/devices/#{@device.id}/graph/traffic?interface_id=#{arp.interface.id}"
                             }
-                            class="text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                            class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                           >
                             {arp.interface.if_name || arp.interface.if_descr}
                           </.link>
                         <% else %>
-                          <span class="text-cool-steel-400">ifIndex {arp.if_index}</span>
+                          <span class="text-gray-400">ifIndex {arp.if_index}</span>
                         <% end %>
                       </td>
                       <td class="px-4 py-3">
                         <span class={[
                           "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium",
                           arp.entry_type == "dynamic" &&
-                            "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900 dark:text-cerulean-200",
+                            "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200",
                           arp.entry_type == "static" &&
                             "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
                           arp.entry_type not in ["dynamic", "static"] &&
-                            "bg-cool-steel-100 text-cool-steel-800 dark:bg-cool-steel-800 dark:text-cool-steel-200"
+                            "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
                         ]}>
                           {arp.entry_type || "unknown"}
                         </span>
                       </td>
-                      <td class="px-4 py-3 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                      <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400">
                         {time_ago(arp.last_seen_at)}
                       </td>
                     </tr>
@@ -2199,13 +2176,13 @@
             </div>
           </div>
         <% else %>
-          <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-12">
+          <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-12">
             <div class="text-center">
-              <.icon name="hero-table-cells" class="mx-auto h-12 w-12 text-cool-steel-400" />
-              <h3 class="mt-2 text-sm font-semibold text-cool-steel-900 dark:text-white">
+              <.icon name="hero-table-cells" class="mx-auto h-12 w-12 text-gray-400" />
+              <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
                 {t("No ARP entries discovered")}
               </h3>
-              <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                 {t("This device doesn't have any ARP entries, or ARP discovery hasn't run yet.")}
               </p>
             </div>
@@ -2213,19 +2190,19 @@
         <% end %>
       <% "mac" -> %>
         <%= if @mac_addresses && length(@mac_addresses) > 0 do %>
-          <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-            <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-              <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+          <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+            <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+              <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                 {t("MAC Address Table")}
-                <span class="ml-2 text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                <span class="ml-2 text-xs font-normal text-gray-500 dark:text-gray-400">
                   ({length(@mac_addresses)} entries)
                 </span>
               </h3>
             </div>
             <div class="overflow-x-auto">
-              <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-                <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/75">
-                  <tr class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+              <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+                <thead class="bg-gray-50 dark:bg-gray-800/75">
+                  <tr class="text-xs text-gray-600 dark:text-gray-400">
                     <th class="px-4 py-3 text-left font-medium">MAC Address</th>
                     <th class="px-4 py-3 text-left font-medium">VLAN</th>
                     <th class="px-4 py-3 text-left font-medium">Interface</th>
@@ -2233,49 +2210,49 @@
                     <th class="px-4 py-3 text-left font-medium">Last Seen</th>
                   </tr>
                 </thead>
-                <tbody class="divide-y divide-cool-steel-200 dark:divide-white/10">
+                <tbody class="divide-y divide-gray-200 dark:divide-white/10">
                   <%= for mac <- @mac_addresses do %>
-                    <tr class="text-sm hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800">
-                      <td class="px-4 py-3 font-mono text-xs text-cool-steel-900 dark:text-white">
+                    <tr class="text-sm hover:bg-gray-50 dark:hover:bg-gray-800">
+                      <td class="px-4 py-3 font-mono text-xs text-gray-900 dark:text-white">
                         {mac.mac_address}
                       </td>
-                      <td class="px-4 py-3 text-cool-steel-600 dark:text-cool-steel-400">
+                      <td class="px-4 py-3 text-gray-600 dark:text-gray-400">
                         <%= if mac.vlan_id do %>
                           {mac.vlan_id}
                         <% else %>
-                          <span class="text-cool-steel-400">-</span>
+                          <span class="text-gray-400">-</span>
                         <% end %>
                       </td>
-                      <td class="px-4 py-3 text-cool-steel-600 dark:text-cool-steel-400">
+                      <td class="px-4 py-3 text-gray-600 dark:text-gray-400">
                         <%= if mac.interface do %>
                           <.link
                             navigate={
                               ~p"/devices/#{@device.id}/graph/traffic?interface_id=#{mac.interface.id}"
                             }
-                            class="text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                            class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                           >
                             {mac.interface.if_name || mac.interface.if_descr}
                           </.link>
                         <% else %>
-                          <span class="text-cool-steel-400">Port {mac.port_index}</span>
+                          <span class="text-gray-400">Port {mac.port_index}</span>
                         <% end %>
                       </td>
                       <td class="px-4 py-3">
                         <span class={[
                           "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium",
                           mac.entry_status == "learned" &&
-                            "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900 dark:text-cerulean-200",
+                            "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200",
                           mac.entry_status == "self" &&
                             "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
                           mac.entry_status == "mgmt" &&
                             "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200",
                           mac.entry_status not in ["learned", "self", "mgmt"] &&
-                            "bg-cool-steel-100 text-cool-steel-800 dark:bg-cool-steel-800 dark:text-cool-steel-200"
+                            "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
                         ]}>
                           {mac.entry_status || "unknown"}
                         </span>
                       </td>
-                      <td class="px-4 py-3 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                      <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400">
                         {time_ago(mac.last_seen_at)}
                       </td>
                     </tr>
@@ -2285,13 +2262,13 @@
             </div>
           </div>
         <% else %>
-          <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-12">
+          <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-12">
             <div class="text-center">
-              <.icon name="hero-table-cells" class="mx-auto h-12 w-12 text-cool-steel-400" />
-              <h3 class="mt-2 text-sm font-semibold text-cool-steel-900 dark:text-white">
+              <.icon name="hero-table-cells" class="mx-auto h-12 w-12 text-gray-400" />
+              <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
                 {t("No MAC addresses discovered")}
               </h3>
-              <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                 {t(
                   "This device doesn't have any MAC forwarding entries, or MAC discovery hasn't run yet."
                 )}
@@ -2301,19 +2278,19 @@
         <% end %>
       <% "vlans" -> %>
         <%= if @vlans && length(@vlans) > 0 do %>
-          <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-            <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-              <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+          <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+            <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+              <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                 {t("Configured VLANs")}
-                <span class="ml-2 text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                <span class="ml-2 text-xs font-normal text-gray-500 dark:text-gray-400">
                   ({length(@vlans)})
                 </span>
               </h3>
             </div>
             <div class="overflow-x-auto">
-              <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-                <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/75">
-                  <tr class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+              <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+                <thead class="bg-gray-50 dark:bg-gray-800/75">
+                  <tr class="text-xs text-gray-600 dark:text-gray-400">
                     <th class="px-4 py-3 text-left font-medium">VLAN ID</th>
                     <th class="px-4 py-3 text-left font-medium">Name</th>
                     <th class="px-4 py-3 text-left font-medium">Type</th>
@@ -2321,16 +2298,16 @@
                     <th class="px-4 py-3 text-left font-medium">Last Checked</th>
                   </tr>
                 </thead>
-                <tbody class="divide-y divide-cool-steel-200 dark:divide-white/10">
+                <tbody class="divide-y divide-gray-200 dark:divide-white/10">
                   <%= for vlan <- @vlans do %>
-                    <tr class="text-sm hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800">
-                      <td class="px-4 py-3 text-cool-steel-900 dark:text-white font-mono">
+                    <tr class="text-sm hover:bg-gray-50 dark:hover:bg-gray-800">
+                      <td class="px-4 py-3 text-gray-900 dark:text-white font-mono">
                         {vlan.vlan_id}
                       </td>
-                      <td class="px-4 py-3 font-medium text-cool-steel-900 dark:text-white">
+                      <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">
                         {vlan.vlan_name || "-"}
                       </td>
-                      <td class="px-4 py-3 text-cool-steel-600 dark:text-cool-steel-400">
+                      <td class="px-4 py-3 text-gray-600 dark:text-gray-400">
                         {vlan.vlan_type || "ethernet"}
                       </td>
                       <td class="px-4 py-3">
@@ -2339,14 +2316,14 @@
                           vlan.status == "active" &&
                             "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
                           vlan.status == "suspended" &&
-                            "bg-wheat-100 text-wheat-800 dark:bg-wheat-900 dark:text-wheat-200",
+                            "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
                           vlan.status not in ["active", "suspended"] &&
-                            "bg-cool-steel-100 text-cool-steel-800 dark:bg-cool-steel-800 dark:text-cool-steel-200"
+                            "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
                         ]}>
                           {String.upcase(vlan.status || "unknown")}
                         </span>
                       </td>
-                      <td class="px-4 py-3 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                      <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400">
                         {time_ago(vlan.last_checked_at)}
                       </td>
                     </tr>
@@ -2356,13 +2333,13 @@
             </div>
           </div>
         <% else %>
-          <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-12">
+          <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-12">
             <div class="text-center">
-              <.icon name="hero-square-3-stack-3d" class="mx-auto h-12 w-12 text-cool-steel-400" />
-              <h3 class="mt-2 text-sm font-semibold text-cool-steel-900 dark:text-white">
+              <.icon name="hero-square-3-stack-3d" class="mx-auto h-12 w-12 text-gray-400" />
+              <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
                 {t("No VLANs discovered")}
               </h3>
-              <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                 {t(
                   "This device doesn't have any VLANs configured, or VLAN discovery hasn't run yet."
                 )}
@@ -2374,42 +2351,42 @@
         <div class="space-y-6">
           <!-- IPv4 Addresses -->
           <%= if length(@ipv4_addresses) > 0 do %>
-            <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-              <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-                <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
-                  <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900 dark:text-cerulean-200 mr-2">
+            <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+              <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+                <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
+                  <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 mr-2">
                     {t("IPv4")}
                   </span>
                   {t("Addresses")}
-                  <span class="ml-2 text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 text-xs font-normal text-gray-500 dark:text-gray-400">
                     ({length(@ipv4_addresses)})
                   </span>
                 </h3>
               </div>
               <div class="overflow-x-auto">
-                <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-                  <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/75">
-                    <tr class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+                  <thead class="bg-gray-50 dark:bg-gray-800/75">
+                    <tr class="text-xs text-gray-600 dark:text-gray-400">
                       <th class="px-4 py-3 text-left font-medium">IP Address</th>
                       <th class="px-4 py-3 text-left font-medium">Subnet</th>
                       <th class="px-4 py-3 text-left font-medium">Interface</th>
                       <th class="px-4 py-3 text-left font-medium">Primary</th>
                     </tr>
                   </thead>
-                  <tbody class="divide-y divide-cool-steel-200 dark:divide-white/10">
+                  <tbody class="divide-y divide-gray-200 dark:divide-white/10">
                     <%= for ip <- @ipv4_addresses do %>
-                      <tr class="text-sm hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800">
-                        <td class="px-4 py-3 text-cool-steel-900 dark:text-white font-mono">
+                      <tr class="text-sm hover:bg-gray-50 dark:hover:bg-gray-800">
+                        <td class="px-4 py-3 text-gray-900 dark:text-white font-mono">
                           {ip.ip_address}
                         </td>
-                        <td class="px-4 py-3 text-cool-steel-600 dark:text-cool-steel-400 font-mono">
+                        <td class="px-4 py-3 text-gray-600 dark:text-gray-400 font-mono">
                           <%= if ip.prefix_length do %>
                             /{ip.prefix_length}
                           <% else %>
                             {ip.subnet_mask || "-"}
                           <% end %>
                         </td>
-                        <td class="px-4 py-3 text-cool-steel-600 dark:text-cool-steel-400">
+                        <td class="px-4 py-3 text-gray-600 dark:text-gray-400">
                           {(ip.snmp_interface &&
                               (ip.snmp_interface.if_name || ip.snmp_interface.if_descr)) || "-"}
                         </td>
@@ -2419,7 +2396,7 @@
                               {t("Primary")}
                             </span>
                           <% else %>
-                            <span class="text-cool-steel-400 dark:text-cool-steel-500 dark:text-cool-steel-400">
+                            <span class="text-gray-400 dark:text-gray-500 dark:text-gray-400">
                               -
                             </span>
                           <% end %>
@@ -2433,37 +2410,37 @@
           <% end %>
           <!-- IPv6 Addresses -->
           <%= if length(@ipv6_addresses) > 0 do %>
-            <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-              <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-                <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+            <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+              <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+                <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                   <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200 mr-2">
                     {t("IPv6")}
                   </span>
                   {t("Addresses")}
-                  <span class="ml-2 text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="ml-2 text-xs font-normal text-gray-500 dark:text-gray-400">
                     ({length(@ipv6_addresses)})
                   </span>
                 </h3>
               </div>
               <div class="overflow-x-auto">
-                <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-                  <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/75">
-                    <tr class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+                  <thead class="bg-gray-50 dark:bg-gray-800/75">
+                    <tr class="text-xs text-gray-600 dark:text-gray-400">
                       <th class="px-4 py-3 text-left font-medium">IP Address</th>
                       <th class="px-4 py-3 text-left font-medium">Prefix</th>
                       <th class="px-4 py-3 text-left font-medium">Interface</th>
                     </tr>
                   </thead>
-                  <tbody class="divide-y divide-cool-steel-200 dark:divide-white/10">
+                  <tbody class="divide-y divide-gray-200 dark:divide-white/10">
                     <%= for ip <- @ipv6_addresses do %>
-                      <tr class="text-sm hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800">
-                        <td class="px-4 py-3 text-cool-steel-900 dark:text-white font-mono text-xs">
+                      <tr class="text-sm hover:bg-gray-50 dark:hover:bg-gray-800">
+                        <td class="px-4 py-3 text-gray-900 dark:text-white font-mono text-xs">
                           {ip.ip_address}
                         </td>
-                        <td class="px-4 py-3 text-cool-steel-600 dark:text-cool-steel-400 font-mono">
+                        <td class="px-4 py-3 text-gray-600 dark:text-gray-400 font-mono">
                           /{ip.prefix_length || "-"}
                         </td>
-                        <td class="px-4 py-3 text-cool-steel-600 dark:text-cool-steel-400">
+                        <td class="px-4 py-3 text-gray-600 dark:text-gray-400">
                           {(ip.snmp_interface &&
                               (ip.snmp_interface.if_name || ip.snmp_interface.if_descr)) || "-"}
                         </td>
@@ -2476,13 +2453,13 @@
           <% end %>
           <!-- No IP addresses found -->
           <%= if length(@ipv4_addresses) == 0 && length(@ipv6_addresses) == 0 do %>
-            <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-12">
+            <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-12">
               <div class="text-center">
-                <.icon name="hero-globe-alt" class="mx-auto h-12 w-12 text-cool-steel-400" />
-                <h3 class="mt-2 text-sm font-semibold text-cool-steel-900 dark:text-white">
+                <.icon name="hero-globe-alt" class="mx-auto h-12 w-12 text-gray-400" />
+                <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
                   {t("No IP addresses discovered")}
                 </h3>
-                <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                   {t(
                     "This device doesn't have any IP addresses discovered, or IP discovery hasn't run yet."
                   )}
@@ -2493,19 +2470,19 @@
         </div>
       <% "backups" -> %>
         <%= if false and @device.mikrotik_enabled do %>
-          <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-            <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
+          <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+            <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
               <div class="flex items-center justify-between">
                 <div class="flex items-center gap-2">
-                  <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+                  <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                     {t("Configuration Backups")}
                     <%= if Enum.any?(@mikrotik_backups) do %>
-                      <span class="ml-2 text-xs font-normal text-cool-steel-500 dark:text-cool-steel-400">
+                      <span class="ml-2 text-xs font-normal text-gray-500 dark:text-gray-400">
                         ({length(@mikrotik_backups)})
                       </span>
                     <% end %>
                   </h3>
-                  <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium text-cerulean-700 bg-cerulean-100 rounded dark:bg-cerulean-900 dark:text-cerulean-200">
+                  <span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium text-blue-700 bg-blue-100 rounded dark:bg-blue-900 dark:text-blue-200">
                     <.icon name="hero-beaker" class="h-3 w-3" /> Experimental
                   </span>
                 </div>
@@ -2513,12 +2490,12 @@
                   <button
                     phx-click="backup_now"
                     phx-throttle="2000"
-                    class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white bg-cerulean-600 hover:bg-cerulean-700 rounded-lg transition-colors"
+                    class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
                   >
                     <.icon name="hero-arrow-down-tray" class="h-4 w-4" /> Backup Now
                   </button>
                 <% else %>
-                  <div class="text-sm text-wheat-600 dark:text-wheat-400">
+                  <div class="text-sm text-amber-600 dark:text-amber-400">
                     {t("Assign an agent to enable backups")}
                   </div>
                 <% end %>
@@ -2527,13 +2504,13 @@
             <%= if Enum.any?(@mikrotik_backups) do %>
               <%!-- Instructions for comparing backups --%>
               <%= if length(@mikrotik_backups) > 1 do %>
-                <div class="px-4 py-3 bg-cerulean-50 dark:bg-cerulean-950/30 border-b border-cerulean-100 dark:border-cerulean-900/50">
+                <div class="px-4 py-3 bg-blue-50 dark:bg-blue-950/30 border-b border-blue-100 dark:border-blue-900/50">
                   <div class="flex items-start gap-2">
                     <.icon
                       name="hero-information-circle"
-                      class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0 mt-0.5"
+                      class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
                     />
-                    <div class="text-sm text-cerulean-900 dark:text-cerulean-200">
+                    <div class="text-sm text-blue-900 dark:text-blue-200">
                       <span class="font-medium">Compare configurations:</span>
                       {t("Select any 2 backups using the checkboxes to compare their differences")}
                     </div>
@@ -2541,9 +2518,9 @@
                 </div>
               <% end %>
               <div class="overflow-x-auto">
-                <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-                  <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/75">
-                    <tr class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+                  <thead class="bg-gray-50 dark:bg-gray-800/75">
+                    <tr class="text-xs text-gray-600 dark:text-gray-400">
                       <th
                         class="px-4 py-3 text-center font-medium w-12"
                         title="Select backups to compare"
@@ -2558,7 +2535,7 @@
                       <th class="px-4 py-3 text-left font-medium">Actions</th>
                     </tr>
                   </thead>
-                  <tbody class="divide-y divide-cool-steel-200 dark:divide-white/10">
+                  <tbody class="divide-y divide-gray-200 dark:divide-white/10">
                     <%= for backup <- @mikrotik_backups do %>
                       <% compression_ratio =
                         if backup.config_size_bytes && backup.config_size_bytes > 0 do
@@ -2569,7 +2546,7 @@
                         else
                           0.0
                         end %>
-                      <tr class="text-sm hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800">
+                      <tr class="text-sm hover:bg-gray-50 dark:hover:bg-gray-800">
                         <td class="px-4 py-3 text-center">
                           <input
                             type="checkbox"
@@ -2589,30 +2566,30 @@
                                     else: "Select to compare"
                                   )
                             }
-                            class="h-4 w-4 rounded border-cool-steel-300 text-cerulean-600 focus:ring-cerulean-600 disabled:opacity-50 disabled:cursor-not-allowed dark:border-cool-steel-600 dark:bg-cool-steel-700"
+                            class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-600 disabled:opacity-50 disabled:cursor-not-allowed dark:border-gray-600 dark:bg-gray-700"
                           />
                         </td>
-                        <td class="px-4 py-3 text-cool-steel-900 dark:text-white whitespace-nowrap">
+                        <td class="px-4 py-3 text-gray-900 dark:text-white whitespace-nowrap">
                           {ToweropsWeb.TimeHelpers.format_iso8601(backup.backed_up_at, @timezone)}
                         </td>
-                        <td class="px-4 py-3 text-cool-steel-600 dark:text-cool-steel-400 font-mono">
+                        <td class="px-4 py-3 text-gray-600 dark:text-gray-400 font-mono">
                           {format_bytes(backup.config_size_bytes)}
                         </td>
-                        <td class="px-4 py-3 text-cool-steel-600 dark:text-cool-steel-400 font-mono">
+                        <td class="px-4 py-3 text-gray-600 dark:text-gray-400 font-mono">
                           {format_bytes(backup.compressed_size_bytes)}
                         </td>
-                        <td class="px-4 py-3 text-cool-steel-600 dark:text-cool-steel-400">
+                        <td class="px-4 py-3 text-gray-600 dark:text-gray-400">
                           {compression_ratio}%
                         </td>
                         <td class="px-4 py-3">
                           <span class={[
                             "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium",
                             backup.trigger_source == "daily_cron" &&
-                              "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900 dark:text-cerulean-200",
+                              "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200",
                             backup.trigger_source == "manual" &&
                               "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
                             backup.trigger_source == "pre_change" &&
-                              "bg-wheat-100 text-wheat-800 dark:bg-wheat-900 dark:text-wheat-200"
+                              "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
                           ]}>
                             {String.replace(backup.trigger_source, "_", " ")
                             |> String.capitalize()}
@@ -2623,7 +2600,7 @@
                             <button
                               phx-click="download_backup"
                               phx-value-id={backup.id}
-                              class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                              class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                             >
                               <.icon name="hero-arrow-down-tray" class="h-4 w-4" /> Download
                             </button>
@@ -2650,7 +2627,7 @@
               </div>
               <%!-- Pagination --%>
               <%= if assigns[:pagination] do %>
-                <div class="px-4 py-3 border-t border-cool-steel-200 dark:border-white/10">
+                <div class="px-4 py-3 border-t border-gray-200 dark:border-white/10">
                   <.pagination
                     meta={@pagination}
                     path={~p"/devices/#{@device.id}"}
@@ -2661,22 +2638,22 @@
               <%!-- Floating Compare Button --%>
               <%= if MapSet.size(@selected_backup_ids) > 0 do %>
                 <div class="fixed bottom-8 right-8 z-50">
-                  <div class="bg-white dark:bg-cool-steel-800 rounded-lg shadow-lg border border-cool-steel-200 dark:border-white/10 p-4">
+                  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-white/10 p-4">
                     <div class="flex flex-col gap-2">
                       <%!-- Selection status --%>
                       <div class="flex items-center gap-2 text-sm">
                         <.icon
                           name="hero-check-circle"
-                          class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400"
+                          class="h-5 w-5 text-blue-600 dark:text-blue-400"
                         />
-                        <div class="text-cool-steel-700 dark:text-cool-steel-300">
+                        <div class="text-gray-700 dark:text-gray-300">
                           <span class="font-medium">{MapSet.size(@selected_backup_ids)}</span>
                           of 2 backups selected
                         </div>
                       </div>
                       <%!-- Instructions when only 1 selected --%>
                       <%= if MapSet.size(@selected_backup_ids) == 1 do %>
-                        <div class="text-xs text-cool-steel-500 dark:text-cool-steel-400 pl-7">
+                        <div class="text-xs text-gray-500 dark:text-gray-400 pl-7">
                           {t("Select one more backup to compare")}
                         </div>
                       <% end %>
@@ -2684,14 +2661,14 @@
                       <div class="flex items-center gap-2 mt-1">
                         <button
                           phx-click="clear_selection"
-                          class="inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-cool-steel-700 bg-white hover:bg-cool-steel-50 border border-cool-steel-300 rounded-lg transition-colors dark:bg-cool-steel-700 dark:text-cool-steel-300 dark:border-cool-steel-600 dark:hover:bg-cool-steel-600"
+                          class="inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 border border-gray-300 rounded-lg transition-colors dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
                         >
                           {t("Clear")}
                         </button>
                         <button
                           phx-click="compare_selected"
                           disabled={MapSet.size(@selected_backup_ids) != 2}
-                          class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-white bg-cerulean-600 hover:bg-cerulean-700 disabled:bg-cool-steel-400 disabled:cursor-not-allowed rounded-lg transition-colors shadow-sm"
+                          class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed rounded-lg transition-colors shadow-sm"
                         >
                           <.icon name="hero-arrows-right-left" class="h-4 w-4" />
                           {if MapSet.size(@selected_backup_ids) == 2,
@@ -2705,19 +2682,19 @@
               <% end %>
             <% else %>
               <div class="p-8 text-center">
-                <.icon name="hero-document-text" class="mx-auto h-12 w-12 text-cool-steel-400" />
-                <h3 class="mt-2 text-sm font-semibold text-cool-steel-900 dark:text-white">
+                <.icon name="hero-document-text" class="mx-auto h-12 w-12 text-gray-400" />
+                <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
                   {t("No backups yet")}
                 </h3>
                 <%= if @agent_info.agent_token_id do %>
-                  <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                  <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                     Automatic backups run daily at {ToweropsWeb.TimeHelpers.format_utc_hour(
                       7,
                       @timezone
                     )}.
                   </p>
                 <% else %>
-                  <p class="mt-1 text-sm text-wheat-600 dark:text-wheat-400">
+                  <p class="mt-1 text-sm text-amber-600 dark:text-amber-400">
                     {t("Assign an agent to enable automatic backups.")}
                   </p>
                 <% end %>
@@ -2725,13 +2702,13 @@
             <% end %>
           </div>
         <% else %>
-          <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-12">
+          <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-12">
             <div class="text-center">
-              <.icon name="hero-server" class="mx-auto h-12 w-12 text-cool-steel-400" />
-              <h3 class="mt-2 text-sm font-semibold text-cool-steel-900 dark:text-white">
+              <.icon name="hero-server" class="mx-auto h-12 w-12 text-gray-400" />
+              <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
                 {t("MikroTik API not enabled")}
               </h3>
-              <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                 {t("Enable MikroTik API in device settings to enable configuration backups.")}
               </p>
               <div class="mt-6">
@@ -2743,26 +2720,24 @@
           </div>
         <% end %>
       <% "logs" -> %>
-        <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-          <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-            <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
-              {t("Event Logs")}
-            </h3>
-            <p class="text-xs text-cool-steel-600 dark:text-cool-steel-400 mt-1">
+        <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+          <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+            <h3 class="text-sm font-semibold text-gray-900 dark:text-white">{t("Event Logs")}</h3>
+            <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">
               {t("Showing the most recent 100 events")}
             </p>
           </div>
           <%= if Enum.any?(@events) do %>
-            <div class="divide-y divide-cool-steel-200 dark:divide-white/10">
+            <div class="divide-y divide-gray-200 dark:divide-white/10">
               <%= for event <- @events do %>
-                <div class="px-4 py-3 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800">
+                <div class="px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-800">
                   <div class="flex items-start gap-3">
                     <!-- Severity Icon -->
                     <div class={[
                       "flex-shrink-0 mt-0.5",
-                      event.severity == "info" && "text-cerulean-500",
-                      event.severity == "warning" && "text-wheat-500",
-                      event.severity == "critical" && "text-sweet-salmon-500"
+                      event.severity == "info" && "text-blue-500",
+                      event.severity == "warning" && "text-yellow-500",
+                      event.severity == "critical" && "text-red-500"
                     ]}>
                       <%= if event.severity == "info" do %>
                         <.icon name="hero-information-circle" class="w-5 h-5" />
@@ -2778,16 +2753,16 @@
                     <div class="flex-1 min-w-0">
                       <div class="flex items-start justify-between gap-2">
                         <div class="flex-1">
-                          <p class="text-sm font-medium text-cool-steel-900 dark:text-white">
+                          <p class="text-sm font-medium text-gray-900 dark:text-white">
                             {event.message}
                           </p>
-                          <div class="mt-1 flex items-center gap-3 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                          <div class="mt-1 flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
                             <span>{format_event_type(event.event_type)}</span>
                             <span>•</span>
                             <span class="capitalize">{event.severity}</span>
                           </div>
                         </div>
-                        <time class="flex-shrink-0 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                        <time class="flex-shrink-0 text-xs text-gray-500 dark:text-gray-400">
                           {time_ago(event.occurred_at)}
                         </time>
                       </div>
@@ -2798,11 +2773,11 @@
             </div>
           <% else %>
             <div class="p-8 text-center">
-              <.icon name="hero-document-text" class="mx-auto h-12 w-12 text-cool-steel-400" />
-              <h3 class="mt-2 text-sm font-semibold text-cool-steel-900 dark:text-white">
+              <.icon name="hero-document-text" class="mx-auto h-12 w-12 text-gray-400" />
+              <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
                 {t("No events yet")}
               </h3>
-              <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                 {t(
                   "Events will appear here as interface states change, speeds change, or other monitored changes occur."
                 )}
@@ -2811,12 +2786,12 @@
           <% end %>
         </div>
       <% "debug" -> %>
-        <div class="bg-white dark:bg-cool-steel-800/50 shadow sm:rounded-lg">
+        <div class="bg-white dark:bg-gray-800/50 shadow sm:rounded-lg">
           <div class="px-4 py-5 sm:p-6">
-            <h3 class="text-lg font-medium leading-6 text-cool-steel-900 dark:text-white">
+            <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white">
               {t("Raw Discovery Data")}
             </h3>
-            <div class="mt-2 max-w-xl text-sm text-cool-steel-500 dark:text-cool-steel-400">
+            <div class="mt-2 max-w-xl text-sm text-gray-500 dark:text-gray-400">
               <p>
                 {t("Raw SNMP OID values collected during the last discovery run at")}
                 <%= if @snmp_device.last_discovery_at do %>
@@ -2831,34 +2806,34 @@
             </div>
             <%= if @snmp_device.raw_discovery_data do %>
               <div class="mt-5">
-                <h4 class="text-sm font-medium text-cool-steel-900 dark:text-white mb-3">
+                <h4 class="text-sm font-medium text-gray-900 dark:text-white mb-3">
                   {t("System OIDs")}
                 </h4>
-                <div class="overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10">
-                  <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-                    <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/75">
+                <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
+                  <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+                    <thead class="bg-gray-50 dark:bg-gray-800/75">
                       <tr>
-                        <th class="px-3 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                           {t("Field")}
                         </th>
-                        <th class="px-3 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                           {t("OID")}
                         </th>
-                        <th class="px-3 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                        <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                           {t("Value")}
                         </th>
                       </tr>
                     </thead>
-                    <tbody class="bg-white dark:bg-cool-steel-800/50 divide-y divide-cool-steel-200 dark:divide-white/10">
+                    <tbody class="bg-white dark:bg-gray-800/50 divide-y divide-gray-200 dark:divide-white/10">
                       <%= for {key, data} <- Map.get(@snmp_device.raw_discovery_data, "system_oids", %{}) do %>
                         <tr>
-                          <td class="px-3 py-4 whitespace-nowrap text-sm font-medium text-cool-steel-900 dark:text-white">
+                          <td class="px-3 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
                             {key}
                           </td>
-                          <td class="px-3 py-4 whitespace-nowrap text-sm text-cool-steel-500 dark:text-cool-steel-400 font-mono">
+                          <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 font-mono">
                             {data["oid"]}
                           </td>
-                          <td class="px-3 py-4 text-sm text-cool-steel-900 dark:text-white">
+                          <td class="px-3 py-4 text-sm text-gray-900 dark:text-white">
                             <code class="text-xs">{inspect(data["value"])}</code>
                           </td>
                         </tr>
@@ -2868,28 +2843,28 @@
                 </div>
 
                 <%= if Map.get(@snmp_device.raw_discovery_data, "health_sensor_table") do %>
-                  <h4 class="text-sm font-medium text-cool-steel-900 dark:text-white mt-6 mb-3">
+                  <h4 class="text-sm font-medium text-gray-900 dark:text-white mt-6 mb-3">
                     {t("Health Sensor Table Walk")}
                   </h4>
-                  <div class="overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10">
-                    <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-                      <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/75">
+                  <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
+                    <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+                      <thead class="bg-gray-50 dark:bg-gray-800/75">
                         <tr>
-                          <th class="px-3 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                          <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                             {t("OID")}
                           </th>
-                          <th class="px-3 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                          <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                             {t("Value")}
                           </th>
                         </tr>
                       </thead>
-                      <tbody class="bg-white dark:bg-cool-steel-800/50 divide-y divide-cool-steel-200 dark:divide-white/10">
+                      <tbody class="bg-white dark:bg-gray-800/50 divide-y divide-gray-200 dark:divide-white/10">
                         <%= for {oid, value} <- Map.get(@snmp_device.raw_discovery_data, "health_sensor_table", %{}) do %>
                           <tr>
-                            <td class="px-3 py-4 whitespace-nowrap text-sm font-mono text-cool-steel-500 dark:text-cool-steel-400">
+                            <td class="px-3 py-4 whitespace-nowrap text-sm font-mono text-gray-500 dark:text-gray-400">
                               {oid}
                             </td>
-                            <td class="px-3 py-4 text-sm text-cool-steel-900 dark:text-white">
+                            <td class="px-3 py-4 text-sm text-gray-900 dark:text-white">
                               <code class="text-xs">{inspect(value)}</code>
                             </td>
                           </tr>
@@ -2900,57 +2875,57 @@
                 <% end %>
 
                 <%= if Map.get(@snmp_device.raw_discovery_data, "discovered_sensors") do %>
-                  <h4 class="text-sm font-medium text-cool-steel-900 dark:text-white mt-6 mb-3">
+                  <h4 class="text-sm font-medium text-gray-900 dark:text-white mt-6 mb-3">
                     {t("Discovered Sensors")}
                   </h4>
-                  <div class="overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10">
-                    <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-                      <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/75">
+                  <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
+                    <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+                      <thead class="bg-gray-50 dark:bg-gray-800/75">
                         <tr>
-                          <th class="px-3 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                          <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                             {t("Type")}
                           </th>
-                          <th class="px-3 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                          <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                             {t("Description")}
                           </th>
-                          <th class="px-3 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                          <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                             {t("OID")}
                           </th>
-                          <th class="px-3 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                          <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                             {t("Value")}
                           </th>
-                          <th class="px-3 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                          <th class="px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                             {t("State")}
                           </th>
                         </tr>
                       </thead>
-                      <tbody class="bg-white dark:bg-cool-steel-800/50 divide-y divide-cool-steel-200 dark:divide-white/10">
+                      <tbody class="bg-white dark:bg-gray-800/50 divide-y divide-gray-200 dark:divide-white/10">
                         <%= for sensor <- Map.get(@snmp_device.raw_discovery_data, "discovered_sensors", []) do %>
                           <tr>
-                            <td class="px-3 py-4 whitespace-nowrap text-sm font-medium text-cool-steel-900 dark:text-white">
+                            <td class="px-3 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
                               {sensor["type"]}
                             </td>
-                            <td class="px-3 py-4 whitespace-nowrap text-sm text-cool-steel-900 dark:text-white">
+                            <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">
                               {sensor["descr"]}
                             </td>
-                            <td class="px-3 py-4 whitespace-nowrap text-sm text-cool-steel-500 dark:text-cool-steel-400 font-mono">
+                            <td class="px-3 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 font-mono">
                               {sensor["oid"]}
                             </td>
-                            <td class="px-3 py-4 text-sm text-cool-steel-900 dark:text-white">
+                            <td class="px-3 py-4 text-sm text-gray-900 dark:text-white">
                               <code class="text-xs">{sensor["value"]}</code>
                               <%= if sensor["unit"] && sensor["unit"] != "" do %>
-                                <span class="text-cool-steel-500 dark:text-cool-steel-400 ml-1">
+                                <span class="text-gray-500 dark:text-gray-400 ml-1">
                                   {sensor["unit"]}
                                 </span>
                               <% end %>
                             </td>
-                            <td class="px-3 py-4 text-sm text-cool-steel-900 dark:text-white">
+                            <td class="px-3 py-4 text-sm text-gray-900 dark:text-white">
                               <%= if sensor["state_descr"] do %>
-                                <span class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium bg-cerulean-100 text-cerulean-700 dark:bg-cerulean-900/50 dark:text-cerulean-300">
+                                <span class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300">
                                   {sensor["state_descr"]}
                                 </span>
                               <% else %>
-                                <span class="text-cool-steel-400">-</span>
+                                <span class="text-gray-400">-</span>
                               <% end %>
                             </td>
                           </tr>
@@ -2960,24 +2935,24 @@
                   </div>
                 <% end %>
 
-                <h4 class="text-sm font-medium text-cool-steel-900 dark:text-white mt-6 mb-3">
+                <h4 class="text-sm font-medium text-gray-900 dark:text-white mt-6 mb-3">
                   {t("Copyable Raw Data")}
                 </h4>
-                <div class="rounded-lg border border-cool-steel-200 dark:border-white/10">
+                <div class="rounded-lg border border-gray-200 dark:border-white/10">
                   <textarea
                     readonly
                     rows="10"
-                    class="w-full p-3 font-mono text-xs bg-cool-steel-50 dark:bg-cool-steel-900 text-cool-steel-900 dark:text-white border-0 rounded-lg focus:ring-2 focus:ring-cerulean-500"
+                    class="w-full p-3 font-mono text-xs bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white border-0 rounded-lg focus:ring-2 focus:ring-blue-500"
                     onclick="this.select()"
                   ><%= Jason.encode!(%{device_id: @device.id, raw_discovery_data: @snmp_device.raw_discovery_data}, pretty: true) %></textarea>
                 </div>
-                <p class="mt-2 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
                   Click the text box to select all data, then copy with Cmd+C or Ctrl+C
                 </p>
               </div>
             <% else %>
-              <div class="mt-5 p-4 bg-cool-steel-50 dark:bg-cool-steel-900 rounded-md">
-                <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+              <div class="mt-5 p-4 bg-gray-50 dark:bg-gray-900 rounded-md">
+                <p class="text-sm text-gray-500 dark:text-gray-400">
                   {t(
                     "No raw discovery data available. Run discovery again to collect debug data."
                   )}
@@ -2989,16 +2964,13 @@
       <% "checks" -> %>
         <%= if Enum.empty?(@checks) do %>
           <!-- Empty State -->
-          <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
+          <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
             <div class="px-4 py-12 text-center">
-              <.icon
-                name="hero-clipboard-document-check"
-                class="mx-auto h-12 w-12 text-cool-steel-400"
-              />
-              <h3 class="mt-2 text-sm font-semibold text-cool-steel-900 dark:text-white">
+              <.icon name="hero-clipboard-document-check" class="mx-auto h-12 w-12 text-gray-400" />
+              <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
                 {t("No checks configured")}
               </h3>
-              <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                 {t(
                   "Run discovery to automatically detect sensors, interfaces, and other monitorable items, or add a service check manually."
                 )}
@@ -3020,7 +2992,7 @@
           <div class="space-y-6">
             <!-- Header with count and Add button -->
             <div class="flex items-center justify-between">
-              <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white">
+              <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
                 Checks ({length(@checks)})
               </h2>
               <.button type="button" phx-click="add_check">
@@ -3028,39 +3000,39 @@
               </.button>
             </div>
             <%= for {group_key, group_checks} <- @grouped_checks do %>
-              <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 overflow-hidden">
+              <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 overflow-hidden">
                 <!-- Group Header -->
-                <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10 bg-cool-steel-50 dark:bg-cool-steel-900/50">
-                  <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+                <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-gray-900/50">
+                  <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                     {group_title(group_key)} ({length(group_checks)})
                   </h3>
                 </div>
                 <!-- Checks Table -->
                 <div class="overflow-x-auto">
-                  <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-                    <thead class="bg-cool-steel-50 dark:bg-cool-steel-900/30">
+                  <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+                    <thead class="bg-gray-50 dark:bg-gray-900/30">
                       <tr>
                         <th
                           scope="col"
-                          class="px-4 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider"
+                          class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
                         >
                           {t("Name")}
                         </th>
                         <th
                           scope="col"
-                          class="px-4 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider"
+                          class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
                         >
                           {t("Status")}
                         </th>
                         <th
                           scope="col"
-                          class="px-4 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider"
+                          class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
                         >
                           {t("Value")}
                         </th>
                         <th
                           scope="col"
-                          class="px-4 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider"
+                          class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
                         >
                           {t("Last Checked")}
                         </th>
@@ -3069,29 +3041,29 @@
                         </th>
                       </tr>
                     </thead>
-                    <tbody class="divide-y divide-cool-steel-200 dark:divide-white/10">
+                    <tbody class="divide-y divide-gray-200 dark:divide-white/10">
                       <%= for check <- group_checks do %>
-                        <tr class="hover:bg-cool-steel-50 dark:hover:bg-cool-steel-900/30">
-                          <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-cool-steel-900 dark:text-white">
+                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-900/30">
+                          <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
                             {check.name}
                           </td>
                           <td class="px-4 py-3 whitespace-nowrap text-sm text-left">
                             {render_status_badge(check.current_state)}
                           </td>
-                          <td class="px-4 py-3 whitespace-nowrap text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                             <%= if check.last_check_at do %>
                               {get_latest_value(check)}
                             <% else %>
-                              <span class="text-cool-steel-400 dark:text-cool-steel-500 dark:text-cool-steel-400">
+                              <span class="text-gray-400 dark:text-gray-500 dark:text-gray-400">
                                 Pending
                               </span>
                             <% end %>
                           </td>
-                          <td class="px-4 py-3 whitespace-nowrap text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                          <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
                             <%= if check.last_check_at do %>
                               {format_relative_time(check.last_check_at)}
                             <% else %>
-                              <span class="text-cool-steel-400 dark:text-cool-steel-500 dark:text-cool-steel-400">
+                              <span class="text-gray-400 dark:text-gray-500 dark:text-gray-400">
                                 Never
                               </span>
                             <% end %>
@@ -3102,7 +3074,7 @@
                                 navigate={
                                   ~p"/devices/#{@device.id}/graph/check?check_id=#{check.id}&range=24h"
                                 }
-                                class="text-cerulean-600 hover:text-cerulean-900 dark:text-cerulean-400 dark:hover:text-cerulean-300 text-sm font-medium"
+                                class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 text-sm font-medium"
                               >
                                 {t("Graph")}
                               </.link>
@@ -3111,7 +3083,7 @@
                                   type="button"
                                   phx-click="edit_check"
                                   phx-value-id={check.id}
-                                  class="text-cool-steel-500 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:text-cool-steel-300"
+                                  class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
                                 >
                                   <.icon name="hero-pencil-square" class="h-4 w-4" />
                                 </button>
@@ -3120,7 +3092,7 @@
                                   phx-click="delete_check"
                                   phx-value-id={check.id}
                                   data-confirm="Are you sure you want to delete this check?"
-                                  class="text-sweet-salmon-500 hover:text-sweet-salmon-700 dark:text-sweet-salmon-400 dark:hover:text-sweet-salmon-300"
+                                  class="text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
                                 >
                                   <.icon name="hero-trash" class="h-4 w-4" />
                                 </button>
@@ -3140,34 +3112,28 @@
         <%= if @gaiia_item do %>
           <div class="space-y-6">
             <%!-- Inventory Item Details --%>
-            <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 overflow-hidden">
-              <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10 bg-cool-steel-50 dark:bg-white/5">
-                <h3 class="text-sm font-medium text-cool-steel-900 dark:text-white">
+            <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 overflow-hidden">
+              <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-white/5">
+                <h3 class="text-sm font-medium text-gray-900 dark:text-white">
                   {t("Gaiia Inventory Item")}
                 </h3>
               </div>
               <div class="px-4 py-4">
                 <dl class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2 lg:grid-cols-3">
                   <div>
-                    <dt class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                      Name
-                    </dt>
-                    <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
+                    <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">Name</dt>
+                    <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                       {@gaiia_item.name || "---"}
                     </dd>
                   </div>
                   <div>
-                    <dt class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                      Gaiia ID
-                    </dt>
-                    <dd class="mt-1 text-sm font-mono text-cool-steel-900 dark:text-white">
+                    <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">Gaiia ID</dt>
+                    <dd class="mt-1 text-sm font-mono text-gray-900 dark:text-white">
                       {@gaiia_item.gaiia_id}
                     </dd>
                   </div>
                   <div>
-                    <dt class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                      Status
-                    </dt>
+                    <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">Status</dt>
                     <dd class="mt-1">
                       <span class={[
                         "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
@@ -3176,10 +3142,10 @@
                             "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400"
 
                           "decommissioned" ->
-                            "bg-cool-steel-100 text-cool-steel-800 dark:bg-cool-steel-900/30 dark:text-cool-steel-400"
+                            "bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400"
 
                           _ ->
-                            "bg-wheat-100 text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400"
+                            "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"
                         end
                       ]}>
                         {@gaiia_item.status || "unknown"}
@@ -3188,63 +3154,61 @@
                   </div>
                   <%= if @gaiia_item.model_name do %>
                     <div>
-                      <dt class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                        Model
-                      </dt>
-                      <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
+                      <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">Model</dt>
+                      <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                         {@gaiia_item.model_name}
                       </dd>
                     </div>
                   <% end %>
                   <%= if @gaiia_item.manufacturer_name do %>
                     <div>
-                      <dt class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400">
+                      <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">
                         {t("Manufacturer")}
                       </dt>
-                      <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
+                      <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                         {@gaiia_item.manufacturer_name}
                       </dd>
                     </div>
                   <% end %>
                   <%= if @gaiia_item.category do %>
                     <div>
-                      <dt class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400">
+                      <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">
                         {t("Category")}
                       </dt>
-                      <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
+                      <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                         {@gaiia_item.category}
                       </dd>
                     </div>
                   <% end %>
                   <%= if @gaiia_item.serial_number do %>
                     <div>
-                      <dt class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400">
+                      <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">
                         {t("Serial Number")}
                       </dt>
-                      <dd class="mt-1 text-sm font-mono text-cool-steel-900 dark:text-white">
+                      <dd class="mt-1 text-sm font-mono text-gray-900 dark:text-white">
                         {@gaiia_item.serial_number}
                       </dd>
                     </div>
                   <% end %>
                   <%= if @gaiia_item.mac_address do %>
                     <div>
-                      <dt class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400">
+                      <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">
                         {t("MAC Address")}
                       </dt>
-                      <dd class="mt-1 text-sm font-mono text-cool-steel-900 dark:text-white">
+                      <dd class="mt-1 text-sm font-mono text-gray-900 dark:text-white">
                         {@gaiia_item.mac_address}
                       </dd>
                     </div>
                   <% end %>
                   <%= if @gaiia_item.ip_address do %>
                     <div>
-                      <dt class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400">
+                      <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">
                         {t("IP Address (Gaiia)")}
                       </dt>
-                      <dd class="mt-1 text-sm font-mono text-cool-steel-900 dark:text-white">
+                      <dd class="mt-1 text-sm font-mono text-gray-900 dark:text-white">
                         {@gaiia_item.ip_address}
                         <%= if @device.ip_address && @gaiia_item.ip_address != @device.ip_address do %>
-                          <span class="ml-2 inline-flex items-center rounded-full bg-wheat-100 px-2 py-0.5 text-xs font-medium text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400">
+                          <span class="ml-2 inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800 dark:bg-amber-900/30 dark:text-amber-400">
                             <.icon name="hero-exclamation-triangle-mini" class="mr-0.5 h-3 w-3" />
                             {t("Mismatch")}
                           </span>
@@ -3258,38 +3222,38 @@
 
             <%!-- Network Site --%>
             <%= if @gaiia_network_site do %>
-              <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 overflow-hidden">
-                <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10 bg-cool-steel-50 dark:bg-white/5">
-                  <h3 class="text-sm font-medium text-cool-steel-900 dark:text-white">
+              <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 overflow-hidden">
+                <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-white/5">
+                  <h3 class="text-sm font-medium text-gray-900 dark:text-white">
                     {t("Gaiia Network Site")}
                   </h3>
                 </div>
                 <div class="px-4 py-4">
                   <dl class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2 lg:grid-cols-3">
                     <div>
-                      <dt class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400">
+                      <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">
                         {t("Site Name")}
                       </dt>
-                      <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
+                      <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                         {@gaiia_network_site.name}
                       </dd>
                     </div>
                     <%= if @gaiia_network_site.account_count do %>
                       <div>
-                        <dt class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400">
+                        <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">
                           {t("Subscribers")}
                         </dt>
-                        <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
+                        <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                           {@gaiia_network_site.account_count}
                         </dd>
                       </div>
                     <% end %>
                     <%= if @gaiia_network_site.total_mrr do %>
                       <div>
-                        <dt class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400">
+                        <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">
                           {t("Monthly Revenue")}
                         </dt>
-                        <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
+                        <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                           ${Decimal.round(@gaiia_network_site.total_mrr, 2)}
                         </dd>
                       </div>
@@ -3301,36 +3265,32 @@
 
             <%!-- Linked Subscriber --%>
             <%= if @gaiia_account do %>
-              <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 overflow-hidden">
-                <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10 bg-cool-steel-50 dark:bg-white/5">
-                  <h3 class="text-sm font-medium text-cool-steel-900 dark:text-white">
+              <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 overflow-hidden">
+                <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-white/5">
+                  <h3 class="text-sm font-medium text-gray-900 dark:text-white">
                     {t("Linked Subscriber")}
                   </h3>
                 </div>
                 <div class="px-4 py-4">
                   <dl class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2 lg:grid-cols-3">
                     <div>
-                      <dt class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                        Name
-                      </dt>
-                      <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
+                      <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">Name</dt>
+                      <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                         {@gaiia_account.name}
                       </dd>
                     </div>
                     <%= if @gaiia_account.readable_id do %>
                       <div>
-                        <dt class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400">
+                        <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">
                           {t("Account ID")}
                         </dt>
-                        <dd class="mt-1 text-sm font-mono text-cool-steel-900 dark:text-white">
+                        <dd class="mt-1 text-sm font-mono text-gray-900 dark:text-white">
                           {@gaiia_account.readable_id}
                         </dd>
                       </div>
                     <% end %>
                     <div>
-                      <dt class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                        Status
-                      </dt>
+                      <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">Status</dt>
                       <dd class="mt-1">
                         <span class={[
                           "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
@@ -3339,10 +3299,10 @@
                               "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400"
 
                             "suspended" ->
-                              "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"
+                              "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
 
                             _ ->
-                              "bg-cool-steel-100 text-cool-steel-800 dark:bg-cool-steel-900/30 dark:text-cool-steel-400"
+                              "bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400"
                           end
                         ]}>
                           {@gaiia_account.status || "unknown"}
@@ -3351,10 +3311,8 @@
                     </div>
                     <%= if @gaiia_account.mrr do %>
                       <div>
-                        <dt class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                          MRR
-                        </dt>
-                        <dd class="mt-1 text-sm text-cool-steel-900 dark:text-white">
+                        <dt class="text-xs font-medium text-gray-500 dark:text-gray-400">MRR</dt>
+                        <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                           ${Decimal.round(@gaiia_account.mrr, 2)}
                         </dd>
                       </div>
@@ -3366,40 +3324,40 @@
 
             <%!-- Billing Subscriptions --%>
             <%= if @gaiia_subscriptions != [] do %>
-              <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 overflow-hidden">
-                <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10 bg-cool-steel-50 dark:bg-white/5">
-                  <h3 class="text-sm font-medium text-cool-steel-900 dark:text-white">
+              <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 overflow-hidden">
+                <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-white/5">
+                  <h3 class="text-sm font-medium text-gray-900 dark:text-white">
                     {t("Billing Subscriptions")}
                   </h3>
                 </div>
                 <div class="overflow-x-auto">
-                  <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-                    <thead class="bg-cool-steel-50 dark:bg-white/5">
+                  <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+                    <thead class="bg-gray-50 dark:bg-white/5">
                       <tr>
                         <th
                           scope="col"
-                          class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
+                          class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
                         >
                           {t("Plan")}
                         </th>
                         <th
                           scope="col"
-                          class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
+                          class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
                         >
                           {t("Status")}
                         </th>
                         <th
                           scope="col"
-                          class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
+                          class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
                         >
                           {t("MRR")}
                         </th>
                       </tr>
                     </thead>
-                    <tbody class="divide-y divide-cool-steel-200 bg-white dark:divide-white/5 dark:bg-transparent">
+                    <tbody class="divide-y divide-gray-200 bg-white dark:divide-white/5 dark:bg-transparent">
                       <%= for sub <- @gaiia_subscriptions do %>
-                        <tr class="hover:bg-cool-steel-50 dark:hover:bg-white/5">
-                          <td class="whitespace-nowrap px-4 py-3 text-sm text-cool-steel-900 dark:text-white">
+                        <tr class="hover:bg-gray-50 dark:hover:bg-white/5">
+                          <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-900 dark:text-white">
                             {sub.product_name || "---"}
                           </td>
                           <td class="whitespace-nowrap px-4 py-3 text-sm">
@@ -3410,19 +3368,19 @@
                                   "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400"
 
                                 "suspended" ->
-                                  "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"
+                                  "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
 
                                 _ ->
-                                  "bg-cool-steel-100 text-cool-steel-800 dark:bg-cool-steel-900/30 dark:text-cool-steel-400"
+                                  "bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400"
                               end
                             ]}>
                               {sub.status || "unknown"}
                             </span>
                           </td>
-                          <td class="whitespace-nowrap px-4 py-3 text-right text-sm text-cool-steel-900 dark:text-white">
+                          <td class="whitespace-nowrap px-4 py-3 text-right text-sm text-gray-900 dark:text-white">
                             <%= if sub.mrr_amount do %>
                               ${Decimal.round(sub.mrr_amount, 2)}
-                              <span class="text-cool-steel-400">
+                              <span class="text-gray-400">
                                 {sub.currency || ""}
                               </span>
                             <% else %>
@@ -3438,8 +3396,8 @@
             <% end %>
           </div>
         <% else %>
-          <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-8 text-center">
-            <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+          <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-8 text-center">
+            <p class="text-sm text-gray-500 dark:text-gray-400">
               {t("No Gaiia inventory item linked to this device.")}
             </p>
           </div>
@@ -3455,22 +3413,22 @@
                     "rounded-lg border p-4 flex items-start justify-between",
                     case insight.urgency do
                       "critical" ->
-                        "bg-sweet-salmon-50 border-sweet-salmon-200 dark:bg-sweet-salmon-900/20 dark:border-sweet-salmon-800"
+                        "bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800"
 
                       "warning" ->
-                        "bg-wheat-50 border-wheat-200 dark:bg-wheat-900/20 dark:border-wheat-800"
+                        "bg-yellow-50 border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-800"
 
                       _ ->
-                        "bg-cerulean-50 border-cerulean-200 dark:bg-cerulean-900/20 dark:border-cerulean-800"
+                        "bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-800"
                     end
                   ]}>
                     <div class="flex items-start gap-3">
                       <div class={[
                         "mt-0.5",
                         case insight.urgency do
-                          "critical" -> "text-sweet-salmon-500"
-                          "warning" -> "text-wheat-500"
-                          _ -> "text-cerulean-500"
+                          "critical" -> "text-red-500"
+                          "warning" -> "text-yellow-500"
+                          _ -> "text-blue-500"
                         end
                       ]}>
                         <%= case insight.urgency do %>
@@ -3483,10 +3441,10 @@
                         <% end %>
                       </div>
                       <div>
-                        <p class="text-sm font-medium text-cool-steel-900 dark:text-white">
+                        <p class="text-sm font-medium text-gray-900 dark:text-white">
                           {insight.title}
                         </p>
-                        <p class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-300">
+                        <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">
                           {insight.description}
                         </p>
                       </div>
@@ -3494,7 +3452,7 @@
                     <button
                       phx-click="dismiss_insight"
                       phx-value-id={insight.id}
-                      class="ml-4 text-cool-steel-400 hover:text-cool-steel-600 dark:hover:text-cool-steel-300 flex-shrink-0"
+                      class="ml-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 flex-shrink-0"
                       title="Dismiss"
                     >
                       <.icon name="hero-x-mark" class="h-4 w-4" />
@@ -3506,31 +3464,27 @@
 
             <%!-- Score cards --%>
             <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
-              <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-4">
-                <div class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                  QoE Score
-                </div>
-                <div class="mt-1 text-2xl font-semibold text-cool-steel-900 dark:text-white">
+              <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-4">
+                <div class="text-sm font-medium text-gray-500 dark:text-gray-400">QoE Score</div>
+                <div class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white">
                   {if @preseem_access_point.qoe_score,
                     do: Float.round(@preseem_access_point.qoe_score, 1),
                     else: "---"}
                 </div>
               </div>
-              <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-4">
-                <div class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
+              <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-4">
+                <div class="text-sm font-medium text-gray-500 dark:text-gray-400">
                   {t("Capacity Score")}
                 </div>
-                <div class="mt-1 text-2xl font-semibold text-cool-steel-900 dark:text-white">
+                <div class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white">
                   {if @preseem_access_point.capacity_score,
                     do: Float.round(@preseem_access_point.capacity_score, 1),
                     else: "---"}
                 </div>
               </div>
-              <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-4">
-                <div class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                  RF Score
-                </div>
-                <div class="mt-1 text-2xl font-semibold text-cool-steel-900 dark:text-white">
+              <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-4">
+                <div class="text-sm font-medium text-gray-500 dark:text-gray-400">RF Score</div>
+                <div class="mt-1 text-2xl font-semibold text-gray-900 dark:text-white">
                   {if @preseem_access_point.rf_score,
                     do: Float.round(@preseem_access_point.rf_score, 1),
                     else: "---"}
@@ -3539,43 +3493,41 @@
             </div>
 
             <%!-- Details card --%>
-            <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-              <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-                <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+            <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+              <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+                <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                   {t("Access Point Details")}
                 </h3>
               </div>
               <div class="px-4 py-3">
                 <dl class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-3">
                   <div>
-                    <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                      Name
-                    </dt>
-                    <dd class="mt-0.5 text-sm text-cool-steel-900 dark:text-white">
+                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Name</dt>
+                    <dd class="mt-0.5 text-sm text-gray-900 dark:text-white">
                       {@preseem_access_point.name || "---"}
                     </dd>
                   </div>
                   <div>
-                    <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
+                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                       {t("Preseem ID")}
                     </dt>
-                    <dd class="mt-0.5 text-sm text-cool-steel-900 dark:text-white">
+                    <dd class="mt-0.5 text-sm text-gray-900 dark:text-white">
                       {@preseem_access_point.preseem_id}
                     </dd>
                   </div>
                   <div>
-                    <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
+                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                       {t("Subscribers")}
                     </dt>
-                    <dd class="mt-0.5 text-sm text-cool-steel-900 dark:text-white">
+                    <dd class="mt-0.5 text-sm text-gray-900 dark:text-white">
                       {@preseem_access_point.subscriber_count || "---"}
                     </dd>
                   </div>
                   <div>
-                    <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
+                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                       {t("Busy Hours")}
                     </dt>
-                    <dd class="mt-0.5 text-sm text-cool-steel-900 dark:text-white">
+                    <dd class="mt-0.5 text-sm text-gray-900 dark:text-white">
                       <%= if @preseem_access_point.busy_hours do %>
                         {@preseem_access_point.busy_hours} hrs/day
                       <% else %>
@@ -3584,10 +3536,10 @@
                     </dd>
                   </div>
                   <div>
-                    <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
+                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                       {t("Airtime Utilization")}
                     </dt>
-                    <dd class="mt-0.5 text-sm text-cool-steel-900 dark:text-white">
+                    <dd class="mt-0.5 text-sm text-gray-900 dark:text-white">
                       <%= if @preseem_access_point.airtime_utilization do %>
                         {Float.round(@preseem_access_point.airtime_utilization, 1)}%
                       <% else %>
@@ -3596,10 +3548,10 @@
                     </dd>
                   </div>
                   <div>
-                    <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
+                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                       {t("Match Type")}
                     </dt>
-                    <dd class="mt-0.5 text-sm text-cool-steel-900 dark:text-white">
+                    <dd class="mt-0.5 text-sm text-gray-900 dark:text-white">
                       {@preseem_access_point.match_confidence}
                     </dd>
                   </div>
@@ -3609,73 +3561,73 @@
 
             <%!-- Recent metrics table --%>
             <%= if @preseem_metrics != [] do %>
-              <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-                <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-                  <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+              <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+                <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+                  <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                     {t("Recent QoE Metrics")}
                   </h3>
                 </div>
                 <div class="overflow-x-auto">
-                  <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
+                  <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
                     <thead>
                       <tr>
-                        <th class="px-4 py-2 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase">
+                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                           {t("Time")}
                         </th>
-                        <th class="px-4 py-2 text-right text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase">
+                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                           {t("Latency (ms)")}
                         </th>
-                        <th class="px-4 py-2 text-right text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase">
+                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                           {t("P95 Latency")}
                         </th>
-                        <th class="px-4 py-2 text-right text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase">
+                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                           {t("Jitter (ms)")}
                         </th>
-                        <th class="px-4 py-2 text-right text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase">
+                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                           {t("Loss (%)")}
                         </th>
-                        <th class="px-4 py-2 text-right text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase">
+                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                           {t("Throughput")}
                         </th>
-                        <th class="px-4 py-2 text-right text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase">
+                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                           {t("Subscribers")}
                         </th>
                       </tr>
                     </thead>
-                    <tbody class="divide-y divide-cool-steel-200 dark:divide-white/10">
+                    <tbody class="divide-y divide-gray-200 dark:divide-white/10">
                       <%= for metric <- @preseem_metrics do %>
                         <tr>
-                          <td class="px-4 py-2 text-sm text-cool-steel-900 dark:text-white whitespace-nowrap">
+                          <td class="px-4 py-2 text-sm text-gray-900 dark:text-white whitespace-nowrap">
                             {ToweropsWeb.TimeHelpers.format_iso8601(
                               metric.recorded_at,
                               @current_scope.timezone,
                               @current_scope.time_format
                             )}
                           </td>
-                          <td class="px-4 py-2 text-sm text-right text-cool-steel-900 dark:text-white">
+                          <td class="px-4 py-2 text-sm text-right text-gray-900 dark:text-white">
                             {if metric.avg_latency,
                               do: Float.round(metric.avg_latency, 1),
                               else: "---"}
                           </td>
-                          <td class="px-4 py-2 text-sm text-right text-cool-steel-900 dark:text-white">
+                          <td class="px-4 py-2 text-sm text-right text-gray-900 dark:text-white">
                             {if metric.p95_latency,
                               do: Float.round(metric.p95_latency, 1),
                               else: "---"}
                           </td>
-                          <td class="px-4 py-2 text-sm text-right text-cool-steel-900 dark:text-white">
+                          <td class="px-4 py-2 text-sm text-right text-gray-900 dark:text-white">
                             {if metric.avg_jitter,
                               do: Float.round(metric.avg_jitter, 1),
                               else: "---"}
                           </td>
-                          <td class="px-4 py-2 text-sm text-right text-cool-steel-900 dark:text-white">
+                          <td class="px-4 py-2 text-sm text-right text-gray-900 dark:text-white">
                             {if metric.avg_loss, do: Float.round(metric.avg_loss, 2), else: "---"}
                           </td>
-                          <td class="px-4 py-2 text-sm text-right text-cool-steel-900 dark:text-white">
+                          <td class="px-4 py-2 text-sm text-right text-gray-900 dark:text-white">
                             {if metric.avg_throughput,
                               do: "#{Float.round(metric.avg_throughput, 1)} Mbps",
                               else: "---"}
                           </td>
-                          <td class="px-4 py-2 text-sm text-right text-cool-steel-900 dark:text-white">
+                          <td class="px-4 py-2 text-sm text-right text-gray-900 dark:text-white">
                             {metric.subscriber_count || "---"}
                           </td>
                         </tr>
@@ -3687,15 +3639,15 @@
             <% end %>
           </div>
         <% else %>
-          <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-8 text-center">
-            <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+          <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-8 text-center">
+            <p class="text-sm text-gray-500 dark:text-gray-400">
               {t("No Preseem data linked to this device.")}
             </p>
           </div>
         <% end %>
       <% _ -> %>
         <div class="text-center py-12">
-          <p class="text-cool-steel-500 dark:text-cool-steel-400">Tab not found</p>
+          <p class="text-gray-500 dark:text-gray-400">Tab not found</p>
         </div>
     <% end %>
   </div>
diff --git a/lib/towerops_web/live/escalation_policy_live/form.html.heex b/lib/towerops_web/live/escalation_policy_live/form.html.heex
index 375f12ec..460489b9 100644
--- a/lib/towerops_web/live/escalation_policy_live/form.html.heex
+++ b/lib/towerops_web/live/escalation_policy_live/form.html.heex
@@ -7,11 +7,11 @@
   <div class="flex items-center gap-3 mb-6">
     <.link
       navigate={~p"/schedules?tab=escalation-policies"}
-      class="text-cool-steel-400 hover:text-cool-steel-600 dark:hover:text-cool-steel-300"
+      class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
     >
       <.icon name="hero-arrow-left" class="h-5 w-5" />
     </.link>
-    <h1 class="text-xl font-bold text-cool-steel-900 dark:text-white">{@page_title}</h1>
+    <h1 class="text-xl font-bold text-gray-900 dark:text-white">{@page_title}</h1>
   </div>
 
   <div class="max-w-2xl">
@@ -34,13 +34,13 @@
           ]}
         />
       </div>
-      <div class="rounded-lg border border-cool-steel-200 dark:border-white/10 p-4 flex items-center gap-3">
-        <.icon name="hero-arrow-path" class="h-5 w-5 text-cool-steel-500" />
-        <span class="text-sm text-cool-steel-700 dark:text-cool-steel-300">
+      <div class="rounded-lg border border-gray-200 dark:border-white/10 p-4 flex items-center gap-3">
+        <.icon name="hero-arrow-path" class="h-5 w-5 text-gray-500" />
+        <span class="text-sm text-gray-700 dark:text-gray-300">
           {t("If no one acknowledges, repeat this policy")}
         </span>
         <.input field={@form[:repeat_count]} type="number" min="1" max="10" class="w-20" />
-        <span class="text-sm text-cool-steel-700 dark:text-cool-steel-300">{t("time(s).")}</span>
+        <span class="text-sm text-gray-700 dark:text-gray-300">{t("time(s).")}</span>
       </div>
       <div class="flex items-center gap-3">
         <.button type="submit" phx-disable-with={t("Saving...")}>
@@ -48,7 +48,7 @@
         </.button>
         <.link
           navigate={~p"/schedules?tab=escalation-policies"}
-          class="text-sm text-cool-steel-600 dark:text-cool-steel-400 hover:text-cool-steel-900 dark:hover:text-white"
+          class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
         >
           {t("Cancel")}
         </.link>
diff --git a/lib/towerops_web/live/escalation_policy_live/index.html.heex b/lib/towerops_web/live/escalation_policy_live/index.html.heex
index caf21a60..2bc689d7 100644
--- a/lib/towerops_web/live/escalation_policy_live/index.html.heex
+++ b/lib/towerops_web/live/escalation_policy_live/index.html.heex
@@ -8,17 +8,15 @@
     <div class="flex items-center gap-3">
       <.link
         navigate={~p"/schedules"}
-        class="text-cool-steel-400 hover:text-cool-steel-600 dark:hover:text-cool-steel-300"
+        class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
       >
         <.icon name="hero-arrow-left" class="h-5 w-5" />
       </.link>
-      <h1 class="text-xl font-bold text-cool-steel-900 dark:text-white">
-        {t("Escalation Policies")}
-      </h1>
+      <h1 class="text-xl font-bold text-gray-900 dark:text-white">{t("Escalation Policies")}</h1>
     </div>
     <.link
       navigate={~p"/schedules/escalation-policies/new"}
-      class="inline-flex items-center gap-2 rounded-lg bg-cerulean-600 px-4 py-2 text-sm font-semibold text-white hover:bg-cerulean-500 transition-colors"
+      class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500 transition-colors"
     >
       <.icon name="hero-plus" class="h-4 w-4" />
       {t("New Policy")}
@@ -30,39 +28,39 @@
       <div class="text-center">
         <.icon
           name="hero-arrow-trending-up"
-          class="h-12 w-12 text-cool-steel-300 dark:text-cool-steel-600 mx-auto mb-4"
+          class="h-12 w-12 text-gray-300 dark:text-gray-600 mx-auto mb-4"
         />
-        <h3 class="text-lg font-semibold text-cool-steel-700 dark:text-cool-steel-300">
+        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">
           {t("No escalation policies")}
         </h3>
-        <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
           {t("Create an escalation policy to define how alerts are escalated to on-call users.")}
         </p>
       </div>
     </div>
   <% else %>
-    <div class="overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10">
-      <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-        <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/50">
+    <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
+      <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+        <thead class="bg-gray-50 dark:bg-gray-800/50">
           <tr>
-            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
               {t("Name")}
             </th>
-            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
               {t("Levels")}
             </th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-cool-steel-100 dark:divide-white/5 bg-white dark:bg-cool-steel-900">
+        <tbody class="divide-y divide-gray-100 dark:divide-white/5 bg-white dark:bg-gray-900">
           <%= for policy <- @policies do %>
             <tr
-              class="hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800/30 transition-colors cursor-pointer"
+              class="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors cursor-pointer"
               phx-click={JS.navigate(~p"/schedules/escalation-policies/#{policy.id}")}
             >
-              <td class="px-4 py-3 text-sm font-medium text-cool-steel-900 dark:text-white">
+              <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">
                 {policy.name}
               </td>
-              <td class="px-4 py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                 {length(policy.rules)}
               </td>
             </tr>
diff --git a/lib/towerops_web/live/escalation_policy_live/show.html.heex b/lib/towerops_web/live/escalation_policy_live/show.html.heex
index 4f1e404e..2cabd9a8 100644
--- a/lib/towerops_web/live/escalation_policy_live/show.html.heex
+++ b/lib/towerops_web/live/escalation_policy_live/show.html.heex
@@ -8,16 +8,16 @@
     <div class="flex items-center gap-3">
       <.link
         navigate={~p"/schedules?tab=escalation-policies"}
-        class="text-cool-steel-400 hover:text-cool-steel-600 dark:hover:text-cool-steel-300"
+        class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
       >
         <.icon name="hero-arrow-left" class="h-5 w-5" />
       </.link>
-      <h1 class="text-xl font-bold text-cool-steel-900 dark:text-white">{@policy.name}</h1>
+      <h1 class="text-xl font-bold text-gray-900 dark:text-white">{@policy.name}</h1>
     </div>
     <div class="flex items-center gap-2">
       <.link
         navigate={~p"/schedules/escalation-policies/#{@policy.id}/edit"}
-        class="inline-flex items-center gap-2 rounded-lg bg-white dark:bg-cool-steel-800 px-3 py-2 text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300 border border-cool-steel-300 dark:border-cool-steel-600 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-700 transition-colors"
+        class="inline-flex items-center gap-2 rounded-lg bg-white dark:bg-gray-800 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
       >
         <.icon name="hero-pencil" class="h-4 w-4" />
         {t("Edit")}
@@ -25,7 +25,7 @@
       <button
         phx-click="delete"
         data-confirm={t("Are you sure you want to delete this escalation policy?")}
-        class="inline-flex items-center gap-2 rounded-lg bg-white dark:bg-cool-steel-800 px-3 py-2 text-sm font-medium text-sweet-salmon-600 dark:text-sweet-salmon-400 border border-cool-steel-300 dark:border-cool-steel-600 hover:bg-sweet-salmon-50 dark:hover:bg-sweet-salmon-900/20 transition-colors"
+        class="inline-flex items-center gap-2 rounded-lg bg-white dark:bg-gray-800 px-3 py-2 text-sm font-medium text-red-600 dark:text-red-400 border border-gray-300 dark:border-gray-600 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
       >
         <.icon name="hero-trash" class="h-4 w-4" />
         {t("Delete")}
@@ -33,23 +33,23 @@
     </div>
   </div>
 
-  <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400 mb-6">
+  <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
     {t("Send On-Call Handoff Notifications:")}
-    <span class="font-medium text-cool-steel-900 dark:text-white">
+    <span class="font-medium text-gray-900 dark:text-white">
       {handoff_mode_label(@policy.handoff_notifications_mode)}
     </span>
   </p>
 
   <%= if @policy.description do %>
-    <p class="mb-6 text-sm text-cool-steel-600 dark:text-cool-steel-400">{@policy.description}</p>
+    <p class="mb-6 text-sm text-gray-600 dark:text-gray-400">{@policy.description}</p>
   <% end %>
 
   <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
     <%!-- LEFT: Levels timeline --%>
     <div class="lg:col-span-2 space-y-3">
       <%= if Enum.empty?(@policy.rules) do %>
-        <div class="rounded-lg border border-dashed border-cool-steel-300 dark:border-cool-steel-600 p-6 text-center">
-          <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+        <div class="rounded-lg border border-dashed border-gray-300 dark:border-gray-600 p-6 text-center">
+          <p class="text-sm text-gray-500 dark:text-gray-400">
             {t("No levels configured. Add a level to define escalation steps.")}
           </p>
         </div>
@@ -66,12 +66,12 @@
             <div
               data-id={rule.id}
               draggable="true"
-              class="rounded-lg border border-cool-steel-200 dark:border-white/10 bg-white dark:bg-cool-steel-900 p-4 cursor-move"
+              class="rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-gray-900 p-4 cursor-move"
             >
               <div class="flex items-center justify-between mb-2">
                 <div class="flex items-center gap-2">
-                  <.icon name="hero-bars-3" class="h-4 w-4 text-cool-steel-400" />
-                  <h3 class="text-base font-semibold text-cool-steel-900 dark:text-white">
+                  <.icon name="hero-bars-3" class="h-4 w-4 text-gray-400" />
+                  <h3 class="text-base font-semibold text-gray-900 dark:text-white">
                     {t("Level %{n}", n: idx + 1)}
                   </h3>
                 </div>
@@ -80,7 +80,7 @@
                     phx-click="move_rule"
                     phx-value-id={rule.id}
                     phx-value-direction="up"
-                    class="text-cool-steel-400 hover:text-cool-steel-600 dark:hover:text-cool-steel-300 disabled:opacity-30 disabled:hover:text-cool-steel-400"
+                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-30 disabled:hover:text-gray-400"
                     disabled={idx == 0}
                     title={t("Move up")}
                   >
@@ -90,7 +90,7 @@
                     phx-click="move_rule"
                     phx-value-id={rule.id}
                     phx-value-direction="down"
-                    class="text-cool-steel-400 hover:text-cool-steel-600 dark:hover:text-cool-steel-300 disabled:opacity-30 disabled:hover:text-cool-steel-400"
+                    class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-30 disabled:hover:text-gray-400"
                     disabled={idx == rule_count - 1}
                     title={t("Move down")}
                   >
@@ -100,7 +100,7 @@
                     phx-click="delete_rule"
                     phx-value-id={rule.id}
                     data-confirm={t("Delete this level?")}
-                    class="text-cool-steel-400 hover:text-sweet-salmon-500 dark:hover:text-sweet-salmon-400 transition-colors ml-1"
+                    class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors ml-1"
                     title={t("Delete")}
                   >
                     <.icon name="hero-trash" class="h-4 w-4" />
@@ -108,9 +108,9 @@
                 </div>
               </div>
 
-              <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400 mb-3">
+              <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
                 {t("Notify the following users immediately and escalate after")}
-                <span class="font-semibold text-cool-steel-900 dark:text-white">
+                <span class="font-semibold text-gray-900 dark:text-white">
                   {rule.timeout_minutes}
                 </span>
                 {t("minutes.")}
@@ -119,13 +119,13 @@
               <%!-- Targets --%>
               <div>
                 <%= if Enum.empty?(rule.targets) do %>
-                  <p class="text-xs text-cool-steel-400 dark:text-cool-steel-500 mb-2">
+                  <p class="text-xs text-gray-400 dark:text-gray-500 mb-2">
                     {t("No targets yet")}
                   </p>
                 <% else %>
                   <div class="flex flex-wrap gap-2 mb-2">
                     <%= for target <- rule.targets do %>
-                      <span class="inline-flex items-center gap-1 rounded-full bg-cool-steel-100 dark:bg-cool-steel-800 pl-2.5 pr-1 py-0.5 text-xs font-medium text-cool-steel-700 dark:text-cool-steel-300">
+                      <span class="inline-flex items-center gap-1 rounded-full bg-gray-100 dark:bg-gray-800 pl-2.5 pr-1 py-0.5 text-xs font-medium text-gray-700 dark:text-gray-300">
                         <%= case target.target_type do %>
                           <% "user" -> %>
                             <.icon name="hero-user" class="h-3 w-3 mr-0.5" />
@@ -139,7 +139,7 @@
                         <button
                           phx-click="delete_target"
                           phx-value-id={target.id}
-                          class="ml-0.5 rounded-full p-0.5 hover:bg-cool-steel-200 dark:hover:bg-cool-steel-700 transition-colors"
+                          class="ml-0.5 rounded-full p-0.5 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
                         >
                           <.icon name="hero-x-mark" class="h-3 w-3" />
                         </button>
@@ -154,14 +154,14 @@
                   <select
                     name="target_type"
                     id={"target-type-#{rule.id}"}
-                    class="block rounded-md border-cool-steel-300 dark:border-cool-steel-600 dark:bg-cool-steel-800 dark:text-white text-xs py-1.5"
+                    class="block rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white text-xs py-1.5"
                   >
                     <option value="user">{t("User")}</option>
                     <option value="schedule">{t("Schedule")}</option>
                   </select>
                   <select
                     name="target_id"
-                    class="block w-full max-w-xs rounded-md border-cool-steel-300 dark:border-cool-steel-600 dark:bg-cool-steel-800 dark:text-white text-xs py-1.5"
+                    class="block w-full max-w-xs rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white text-xs py-1.5"
                   >
                     <option value="">{t("Select...")}</option>
                     <optgroup label={t("Users")}>
@@ -177,7 +177,7 @@
                   </select>
                   <button
                     type="submit"
-                    class="inline-flex items-center rounded-md bg-cool-steel-100 dark:bg-cool-steel-800 px-2.5 py-1.5 text-xs font-medium text-cool-steel-700 dark:text-cool-steel-300 hover:bg-cool-steel-200 dark:hover:bg-cool-steel-700 transition-colors"
+                    class="inline-flex items-center rounded-md bg-gray-100 dark:bg-gray-800 px-2.5 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
                   >
                     <.icon name="hero-plus" class="h-3 w-3 mr-1" />
                     {t("Add")}
@@ -191,11 +191,11 @@
 
       <%!-- Add Level button + form --%>
       <%= if @show_add_rule do %>
-        <div class="rounded-lg border border-cerulean-200 dark:border-cerulean-800 bg-cerulean-50/50 dark:bg-cerulean-900/10 p-4">
+        <div class="rounded-lg border border-blue-200 dark:border-blue-800 bg-blue-50/50 dark:bg-blue-900/10 p-4">
           <form phx-submit="save_rule">
             <div class="flex items-end gap-4 mb-4">
               <div class="flex-1">
-                <label class="block text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300 mb-1">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                   {t("Escalate after (minutes)")}
                 </label>
                 <input
@@ -204,7 +204,7 @@
                   value="30"
                   min="1"
                   max="1440"
-                  class="block w-full rounded-md border-cool-steel-300 dark:border-cool-steel-600 dark:bg-cool-steel-800 dark:text-white text-sm"
+                  class="block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white text-sm"
                 />
               </div>
             </div>
@@ -215,7 +215,7 @@
               <button
                 type="button"
                 phx-click="toggle_add_rule"
-                class="text-sm text-cool-steel-600 dark:text-cool-steel-400 hover:text-cool-steel-900 dark:hover:text-white"
+                class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
               >
                 {t("Cancel")}
               </button>
@@ -225,16 +225,16 @@
       <% else %>
         <button
           phx-click="toggle_add_rule"
-          class="w-full rounded-lg border border-dashed border-cool-steel-300 dark:border-cool-steel-600 p-3 text-sm text-cool-steel-500 dark:text-cool-steel-400 hover:border-cool-steel-400 hover:text-cool-steel-700 dark:hover:text-cool-steel-200 transition-colors"
+          class="w-full rounded-lg border border-dashed border-gray-300 dark:border-gray-600 p-3 text-sm text-gray-500 dark:text-gray-400 hover:border-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
         >
           <.icon name="hero-plus" class="h-4 w-4 inline mr-1" /> {t("Add Level")}
         </button>
       <% end %>
 
       <%!-- REPEAT footer --%>
-      <div class="rounded-lg border border-cool-steel-200 dark:border-white/10 bg-cool-steel-50 dark:bg-cool-steel-800/40 p-4 flex items-center gap-3">
-        <.icon name="hero-arrow-path" class="h-5 w-5 text-cool-steel-500" />
-        <p class="text-sm text-cool-steel-700 dark:text-cool-steel-300">
+      <div class="rounded-lg border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-gray-800/40 p-4 flex items-center gap-3">
+        <.icon name="hero-arrow-path" class="h-5 w-5 text-gray-500" />
+        <p class="text-sm text-gray-700 dark:text-gray-300">
           {t("If no one acknowledges, repeat this policy")}
           <span class="font-semibold">{@policy.repeat_count}</span>
           {t("time(s).")}
@@ -244,12 +244,12 @@
 
     <%!-- RIGHT: Services sidebar --%>
     <aside class="lg:col-span-1">
-      <div class="rounded-lg border border-cool-steel-200 dark:border-white/10 bg-white dark:bg-cool-steel-900 p-4">
-        <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-3">
+      <div class="rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-gray-900 p-4">
+        <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">
           {t("Services (%{count})", count: length(@services))}
         </h3>
         <%= if @services == [] do %>
-          <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="text-sm text-gray-500 dark:text-gray-400">
             {t("No devices use this policy yet.")}
           </p>
         <% else %>
@@ -258,7 +258,7 @@
               <li>
                 <.link
                   navigate={~p"/devices/#{device.id}"}
-                  class="text-sm text-cerulean-600 dark:text-cerulean-400 hover:underline"
+                  class="text-sm text-blue-600 dark:text-blue-400 hover:underline"
                 >
                   {device.name}
                 </.link>
diff --git a/lib/towerops_web/live/graph_live/show.html.heex b/lib/towerops_web/live/graph_live/show.html.heex
index de6a8f7a..692eda60 100644
--- a/lib/towerops_web/live/graph_live/show.html.heex
+++ b/lib/towerops_web/live/graph_live/show.html.heex
@@ -10,21 +10,19 @@
       <div class="flex items-center gap-4">
         <.link
           navigate={~p"/devices/#{@device_id}"}
-          class="text-cool-steel-600 hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+          class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
         >
           <.icon name="hero-arrow-left" class="h-5 w-5" />
         </.link>
         <div>
-          <h1 class="text-2xl font-bold text-cool-steel-900 dark:text-white">{@chart_title}</h1>
-          <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">{@device.name}</p>
+          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{@chart_title}</h1>
+          <p class="text-sm text-gray-600 dark:text-gray-400">{@device.name}</p>
         </div>
       </div>
     </div>
     <!-- Date Range Selector -->
     <div class="flex items-center gap-2 mb-6">
-      <span class="text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300">
-        Time Range:
-      </span>
+      <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Time Range:</span>
       <div class="flex gap-1">
         <%= for {label, value} <- [{"Live", "live"}, {"1 Hour", "1h"}, {"6 Hours", "6h"}, {"12 Hours", "12h"}, {"24 Hours", "24h"}, {"7 Days", "7d"}, {"30 Days", "30d"}] do %>
           <button
@@ -40,9 +38,9 @@
                 end
               else
                 if @range == value do
-                  "bg-cerulean-500 text-white border-cerulean-500"
+                  "bg-blue-500 text-white border-blue-500"
                 else
-                  "bg-white dark:bg-cool-steel-800/50 text-cool-steel-700 dark:text-cool-steel-300 border-cool-steel-300 dark:border-white/10 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800"
+                  "bg-white dark:bg-gray-800/50 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-white/10 hover:bg-gray-50 dark:hover:bg-gray-800"
                 end
               end
             ]}
@@ -54,7 +52,7 @@
     </div>
     <!-- Live Mode Indicator -->
     <%= if @is_live_mode do %>
-      <div class="flex items-center gap-2 text-sm text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+      <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-4">
         <span class="relative flex h-3 w-3">
           <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75">
           </span>
@@ -65,7 +63,7 @@
     <% end %>
     <!-- Large Chart -->
     <%= if @chart_data do %>
-      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
+      <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
         <div class="p-6">
           <div
             id="detail-chart"
@@ -82,16 +80,16 @@
             <canvas></canvas>
           </div>
           <%= if @max_value && @min_value do %>
-            <div class="mt-4 pt-4 border-t border-cool-steel-200 dark:border-white/10 flex justify-center gap-8 text-sm">
+            <div class="mt-4 pt-4 border-t border-gray-200 dark:border-white/10 flex justify-center gap-8 text-sm">
               <div class="flex items-center gap-2">
-                <span class="font-medium text-cool-steel-700 dark:text-cool-steel-300">Max:</span>
-                <span class="text-cool-steel-900 dark:text-white font-semibold">
+                <span class="font-medium text-gray-700 dark:text-gray-300">Max:</span>
+                <span class="text-gray-900 dark:text-white font-semibold">
                   {format_value(@max_value, @unit)}
                 </span>
               </div>
               <div class="flex items-center gap-2">
-                <span class="font-medium text-cool-steel-700 dark:text-cool-steel-300">Min:</span>
-                <span class="text-cool-steel-900 dark:text-white font-semibold">
+                <span class="font-medium text-gray-700 dark:text-gray-300">Min:</span>
+                <span class="text-gray-900 dark:text-white font-semibold">
                   {format_value(@min_value, @unit)}
                 </span>
               </div>
@@ -100,13 +98,13 @@
         </div>
       </div>
     <% else %>
-      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-12">
+      <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-12">
         <div class="text-center">
-          <.icon name="hero-chart-bar" class="mx-auto h-12 w-12 text-cool-steel-400" />
-          <h3 class="mt-2 text-sm font-semibold text-cool-steel-900 dark:text-white">
+          <.icon name="hero-chart-bar" class="mx-auto h-12 w-12 text-gray-400" />
+          <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
             {t("No sensor data available")}
           </h3>
-          <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
             {t("This device doesn't have any sensors of this type.")}
           </p>
         </div>
diff --git a/lib/towerops_web/live/help_live/index.ex b/lib/towerops_web/live/help_live/index.ex
index c8ab8fe0..9de81588 100644
--- a/lib/towerops_web/live/help_live/index.ex
+++ b/lib/towerops_web/live/help_live/index.ex
@@ -122,7 +122,7 @@ defmodule ToweropsWeb.HelpLive.Index do
 
   defp code(assigns) do
     ~H"""
-    <span class="font-mono bg-cool-steel-100 dark:bg-cool-steel-800 px-1 py-0.5 rounded">
+    <span class="font-mono bg-gray-100 dark:bg-gray-800 px-1 py-0.5 rounded">
       {render_slot(@inner_block)}
     </span>
     """
@@ -136,8 +136,8 @@ defmodule ToweropsWeb.HelpLive.Index do
     ~H"""
     <div class="w-full">
       <div class="mb-6">
-        <h1 class="text-2xl font-bold text-cool-steel-900 dark:text-white">Help & Documentation</h1>
-        <p class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Help & Documentation</h1>
+        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
           Learn how to use Towerops to monitor your network infrastructure
         </p>
       </div>
@@ -145,8 +145,8 @@ defmodule ToweropsWeb.HelpLive.Index do
       <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
         <!-- Sidebar Navigation -->
         <div class="lg:col-span-1">
-          <nav class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-4 sticky top-4">
-            <h3 class="text-xs font-semibold text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider mb-3">
+          <nav class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-4 sticky top-4">
+            <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
               Sections
             </h3>
             <ul class="space-y-1">
@@ -156,9 +156,9 @@ defmodule ToweropsWeb.HelpLive.Index do
                   class={[
                     "block px-3 py-2 rounded-md text-sm font-medium transition-colors",
                     if @active_section == "about" do
-                      "bg-cerulean-50 text-cerulean-700 dark:bg-cerulean-900/50 dark:text-cerulean-300"
+                      "bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
                     else
-                      "text-cool-steel-700 hover:bg-cool-steel-50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+                      "text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
                     end
                   ]}
                 >
@@ -171,9 +171,9 @@ defmodule ToweropsWeb.HelpLive.Index do
                   class={[
                     "block px-3 py-2 rounded-md text-sm font-medium transition-colors",
                     if @active_section == "getting-started" do
-                      "bg-cerulean-50 text-cerulean-700 dark:bg-cerulean-900/50 dark:text-cerulean-300"
+                      "bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
                     else
-                      "text-cool-steel-700 hover:bg-cool-steel-50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+                      "text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
                     end
                   ]}
                 >
@@ -186,9 +186,9 @@ defmodule ToweropsWeb.HelpLive.Index do
                   class={[
                     "block px-3 py-2 rounded-md text-sm font-medium transition-colors",
                     if @active_section == "settings" do
-                      "bg-cerulean-50 text-cerulean-700 dark:bg-cerulean-900/50 dark:text-cerulean-300"
+                      "bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
                     else
-                      "text-cool-steel-700 hover:bg-cool-steel-50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+                      "text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
                     end
                   ]}
                 >
@@ -201,9 +201,9 @@ defmodule ToweropsWeb.HelpLive.Index do
                   class={[
                     "block px-3 py-2 rounded-md text-sm font-medium transition-colors",
                     if @active_section == "sites" do
-                      "bg-cerulean-50 text-cerulean-700 dark:bg-cerulean-900/50 dark:text-cerulean-300"
+                      "bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
                     else
-                      "text-cool-steel-700 hover:bg-cool-steel-50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+                      "text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
                     end
                   ]}
                 >
@@ -216,9 +216,9 @@ defmodule ToweropsWeb.HelpLive.Index do
                   class={[
                     "block px-3 py-2 rounded-md text-sm font-medium transition-colors",
                     if @active_section == "cloud-pollers" do
-                      "bg-cerulean-50 text-cerulean-700 dark:bg-cerulean-900/50 dark:text-cerulean-300"
+                      "bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
                     else
-                      "text-cool-steel-700 hover:bg-cool-steel-50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+                      "text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
                     end
                   ]}
                 >
@@ -231,9 +231,9 @@ defmodule ToweropsWeb.HelpLive.Index do
                   class={[
                     "block px-3 py-2 rounded-md text-sm font-medium transition-colors",
                     if @active_section == "agents" do
-                      "bg-cerulean-50 text-cerulean-700 dark:bg-cerulean-900/50 dark:text-cerulean-300"
+                      "bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
                     else
-                      "text-cool-steel-700 hover:bg-cool-steel-50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+                      "text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
                     end
                   ]}
                 >
@@ -246,9 +246,9 @@ defmodule ToweropsWeb.HelpLive.Index do
                   class={[
                     "block px-3 py-2 rounded-md text-sm font-medium transition-colors",
                     if @active_section == "integrations" do
-                      "bg-cerulean-50 text-cerulean-700 dark:bg-cerulean-900/50 dark:text-cerulean-300"
+                      "bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
                     else
-                      "text-cool-steel-700 hover:bg-cool-steel-50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+                      "text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
                     end
                   ]}
                 >
@@ -262,9 +262,9 @@ defmodule ToweropsWeb.HelpLive.Index do
                     class={[
                       "block px-3 py-2 rounded-md text-sm font-medium transition-colors",
                       if @active_section == "mikrotik" do
-                        "bg-cerulean-50 text-cerulean-700 dark:bg-cerulean-900/50 dark:text-cerulean-300"
+                        "bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
                       else
-                        "text-cool-steel-700 hover:bg-cool-steel-50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+                        "text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
                       end
                     ]}
                   >
@@ -278,9 +278,9 @@ defmodule ToweropsWeb.HelpLive.Index do
                   class={[
                     "block px-3 py-2 rounded-md text-sm font-medium transition-colors",
                     if @active_section == "graphs" do
-                      "bg-cerulean-50 text-cerulean-700 dark:bg-cerulean-900/50 dark:text-cerulean-300"
+                      "bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
                     else
-                      "text-cool-steel-700 hover:bg-cool-steel-50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+                      "text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
                     end
                   ]}
                 >
@@ -293,9 +293,9 @@ defmodule ToweropsWeb.HelpLive.Index do
                   class={[
                     "block px-3 py-2 rounded-md text-sm font-medium transition-colors",
                     if @active_section == "insights" do
-                      "bg-cerulean-50 text-cerulean-700 dark:bg-cerulean-900/50 dark:text-cerulean-300"
+                      "bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
                     else
-                      "text-cool-steel-700 hover:bg-cool-steel-50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+                      "text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
                     end
                   ]}
                 >
@@ -308,9 +308,9 @@ defmodule ToweropsWeb.HelpLive.Index do
                   class={[
                     "block px-3 py-2 rounded-md text-sm font-medium transition-colors",
                     if @active_section == "network-map" do
-                      "bg-cerulean-50 text-cerulean-700 dark:bg-cerulean-900/50 dark:text-cerulean-300"
+                      "bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
                     else
-                      "text-cool-steel-700 hover:bg-cool-steel-50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+                      "text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
                     end
                   ]}
                 >
@@ -323,9 +323,9 @@ defmodule ToweropsWeb.HelpLive.Index do
                   class={[
                     "block px-3 py-2 rounded-md text-sm font-medium transition-colors",
                     if @active_section == "api-tokens" do
-                      "bg-cerulean-50 text-cerulean-700 dark:bg-cerulean-900/50 dark:text-cerulean-300"
+                      "bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
                     else
-                      "text-cool-steel-700 hover:bg-cool-steel-50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+                      "text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
                     end
                   ]}
                 >
@@ -338,9 +338,9 @@ defmodule ToweropsWeb.HelpLive.Index do
                   class={[
                     "block px-3 py-2 rounded-md text-sm font-medium transition-colors",
                     if @active_section == "rest-api" do
-                      "bg-cerulean-50 text-cerulean-700 dark:bg-cerulean-900/50 dark:text-cerulean-300"
+                      "bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
                     else
-                      "text-cool-steel-700 hover:bg-cool-steel-50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+                      "text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
                     end
                   ]}
                 >
@@ -353,9 +353,9 @@ defmodule ToweropsWeb.HelpLive.Index do
                   class={[
                     "block px-3 py-2 rounded-md text-sm font-medium transition-colors",
                     if @active_section == "graphql-api" do
-                      "bg-cerulean-50 text-cerulean-700 dark:bg-cerulean-900/50 dark:text-cerulean-300"
+                      "bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
                     else
-                      "text-cool-steel-700 hover:bg-cool-steel-50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+                      "text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
                     end
                   ]}
                 >
@@ -367,22 +367,22 @@ defmodule ToweropsWeb.HelpLive.Index do
         </div>
         <!-- Content Area -->
         <div class="lg:col-span-3">
-          <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
+          <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
             <%= case @active_section do %>
               <% "about" -> %>
                 <div class="p-6">
-                  <h2 class="text-xl font-bold text-cool-steel-900 dark:text-white mb-4">
+                  <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                     About Towerops
                   </h2>
 
                   <div class="prose prose-sm dark:prose-invert max-w-none">
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       Towerops is a modern network monitoring and management platform designed to provide
                       comprehensive visibility into your network infrastructure. It came out of a need to simplify
                       network monitoring and alerting while running a wireless ISP.
                     </p>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       Our promise to you:
                       <ul class="list-disc list-inside">
                         <li>No random marketing emails or sign up for our newsletter popups.</li>
@@ -399,59 +399,59 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </ul>
                     </p>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400 mt-4">
+                    <p class="text-gray-600 dark:text-gray-400 mt-4">
                       Think of Towerops as combining the best of LibreNMS, Icinga2/Nagios, and PagerDuty into
                       a single, unified platform. You get deep network device monitoring with SNMP auto-discovery,
                       flexible health checks and alerting, and intelligent incident management—all with a modern
                       interface that makes complex monitoring workflows simple and accessible.
                     </p>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400 mt-4">
+                    <p class="text-gray-600 dark:text-gray-400 mt-4">
                       Towerops is not and has no plans to be a replacement for a full WISP/network billing system.
                     </p>
 
                     <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
-                      <div class="p-4 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-2">
+                      <div class="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
                           Network Monitoring
                         </h4>
-                        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-sm text-gray-600 dark:text-gray-400">
                           Like LibreNMS, discover and monitor network devices via SNMP with support for
                           multi-vendor equipment, interface statistics, and topology mapping.
                         </p>
                       </div>
-                      <div class="p-4 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-2">
+                      <div class="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
                           Health Checks & Alerting
                         </h4>
-                        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-sm text-gray-600 dark:text-gray-400">
                           Like Icinga2/Nagios, configure flexible monitoring checks with customizable thresholds
                           and alert conditions for any metric or device state.
                         </p>
                       </div>
-                      <div class="p-4 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-2">
+                      <div class="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
                           Incident Management
                         </h4>
-                        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-sm text-gray-600 dark:text-gray-400">
                           Like PagerDuty, manage incidents with intelligent alerting, escalation policies,
                           and notification routing to keep your team informed.
                         </p>
                       </div>
                     </div>
 
-                    <div class="mt-6 p-4 bg-cerulean-50 dark:bg-cerulean-900/20 border border-cerulean-200 dark:border-cerulean-800 rounded-lg">
+                    <div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                       <div class="flex gap-3">
                         <.icon
                           name="hero-information-circle"
-                          class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0 mt-0.5"
+                          class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
                         />
                         <div>
-                          <p class="text-sm text-cerulean-800 dark:text-cerulean-300">
+                          <p class="text-sm text-blue-800 dark:text-blue-300">
                             Ready to get started? Check out the
                             <.link
                               patch={~p"/help?section=getting-started"}
-                              class="underline hover:text-cerulean-900 dark:hover:text-cerulean-200"
+                              class="underline hover:text-blue-900 dark:hover:text-blue-200"
                             >
                               Getting Started
                             </.link>
@@ -464,17 +464,17 @@ defmodule ToweropsWeb.HelpLive.Index do
                 </div>
               <% "getting-started" -> %>
                 <div class="p-6">
-                  <h2 class="text-xl font-bold text-cool-steel-900 dark:text-white mb-4">
+                  <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                     Getting Started with Towerops
                   </h2>
 
                   <div class="prose prose-sm dark:prose-invert max-w-none">
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       Towerops is a network monitoring platform that helps you keep track of your network devices,
                       monitor their health, and get alerts when issues occur.
                     </p>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                       Quick Start Guide
                     </h3>
 
@@ -482,30 +482,30 @@ defmodule ToweropsWeb.HelpLive.Index do
                       <!-- Step 1 -->
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             1
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             Create a Site (Optional)
                           </h4>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-gray-600 dark:text-gray-400">
                             Sites represent physical or logical locations where your network devices are located.
                             If you manage multiple locations, start by creating a site for your office, data center,
                             or any location where you have equipment.
                           </p>
-                          <p class="text-sm text-cool-steel-500 dark:text-cool-steel-500 mt-2">
+                          <p class="text-sm text-gray-500 dark:text-gray-500 mt-2">
                             Navigate to
                             <.code>Sites</.code>
                             →
                             <.code>Add Site</.code>
                           </p>
-                          <p class="text-sm text-cool-steel-500 dark:text-cool-steel-500 mt-1">
+                          <p class="text-sm text-gray-500 dark:text-gray-500 mt-1">
                             Sites are disabled by default and can be enabled later in
                             <.link
                               patch={~p"/help?section=settings"}
-                              class="underline hover:text-cool-steel-700 dark:hover:text-cool-steel-300"
+                              class="underline hover:text-gray-700 dark:hover:text-gray-300"
                             >
                               Organization Settings
                             </.link>
@@ -517,19 +517,19 @@ defmodule ToweropsWeb.HelpLive.Index do
     <!-- Step 2 -->
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             2
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             Add Your First Device
                           </h4>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-gray-600 dark:text-gray-400">
                             Add network devices like routers, switches, access points, or servers. You'll need the device's
                             IP address or hostname, and SNMP community string (for SNMP-enabled devices).
                           </p>
-                          <p class="text-sm text-cool-steel-500 dark:text-cool-steel-500 mt-2">
+                          <p class="text-sm text-gray-500 dark:text-gray-500 mt-2">
                             Navigate to
                             <.code>Devices</.code>
                             →
@@ -541,15 +541,15 @@ defmodule ToweropsWeb.HelpLive.Index do
     <!-- Step 3 -->
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             3
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             View Device Metrics
                           </h4>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-gray-600 dark:text-gray-400">
                             Click on any device to view real-time metrics including CPU usage, memory, temperature,
                             interface traffic, and more. Explore the different tabs to see network topology, port status,
                             and historical performance data.
@@ -558,22 +558,22 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </div>
                     </div>
 
-                    <div class="mt-8 p-4 bg-cerulean-50 dark:bg-cerulean-900/20 border border-cerulean-200 dark:border-cerulean-800 rounded-lg">
+                    <div class="mt-8 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                       <div class="flex gap-3">
                         <.icon
                           name="hero-light-bulb"
-                          class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0 mt-0.5"
+                          class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
                         />
                         <div>
-                          <h4 class="text-sm font-semibold text-cerulean-900 dark:text-cerulean-300 mb-1">
+                          <h4 class="text-sm font-semibold text-blue-900 dark:text-blue-300 mb-1">
                             Pro Tip
                           </h4>
-                          <p class="text-sm text-cerulean-800 dark:text-cerulean-300">
+                          <p class="text-sm text-blue-800 dark:text-blue-300">
                             For devices behind firewalls or in remote locations, you can deploy a remote poller
                             to monitor devices locally without exposing them to the internet. See the
                             <.link
                               patch={~p"/help?section=agents"}
-                              class="underline hover:text-cerulean-900 dark:hover:text-cerulean-200"
+                              class="underline hover:text-blue-900 dark:hover:text-blue-200"
                             >
                               Remote Pollers
                             </.link>
@@ -586,92 +586,88 @@ defmodule ToweropsWeb.HelpLive.Index do
                 </div>
               <% "sites" -> %>
                 <div class="p-6">
-                  <h2 class="text-xl font-bold text-cool-steel-900 dark:text-white mb-4">
+                  <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                     Sites
                   </h2>
 
                   <div class="prose prose-sm dark:prose-invert max-w-none">
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       Sites are an optional organizational feature that lets you group devices by physical or logical
                       locations such as offices, datacenters, customer locations, or network zones. Sites are disabled
                       by default to keep things simple for single-location deployments.
                     </p>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                       When to Enable Sites
                     </h3>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       Consider enabling sites if you:
                     </p>
 
-                    <ul class="space-y-2 text-cool-steel-600 dark:text-cool-steel-400 list-disc list-inside mt-3">
+                    <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside mt-3">
                       <li>
-                        <strong class="text-cool-steel-900 dark:text-white">
+                        <strong class="text-gray-900 dark:text-white">
                           Manage multiple physical locations
                         </strong>
                         - Offices, datacenters, retail stores, etc.
                       </li>
                       <li>
-                        <strong class="text-cool-steel-900 dark:text-white">
+                        <strong class="text-gray-900 dark:text-white">
                           Want to group credentials by location
                         </strong>
                         - Different SNMP communities or credentials per site
                       </li>
                       <li>
-                        <strong class="text-cool-steel-900 dark:text-white">
+                        <strong class="text-gray-900 dark:text-white">
                           Need location-based monitoring
                         </strong>
                         - Assign different remote pollers to different sites
                       </li>
                       <li>
-                        <strong class="text-cool-steel-900 dark:text-white">
+                        <strong class="text-gray-900 dark:text-white">
                           Organize by customer or department
                         </strong>
                         - Logical groupings for multi-tenant or large networks
                       </li>
                     </ul>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                       When to Skip Sites
                     </h3>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       You can skip enabling sites if you:
                     </p>
 
-                    <ul class="space-y-2 text-cool-steel-600 dark:text-cool-steel-400 list-disc list-inside mt-3">
+                    <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside mt-3">
                       <li>
-                        <strong class="text-cool-steel-900 dark:text-white">
-                          Have a single location
-                        </strong>
+                        <strong class="text-gray-900 dark:text-white">Have a single location</strong>
                         - All devices in one office or datacenter
                       </li>
                       <li>
-                        <strong class="text-cool-steel-900 dark:text-white">
-                          Want a simpler setup
-                        </strong>
+                        <strong class="text-gray-900 dark:text-white">Want a simpler setup</strong>
                         - Devices belong directly to your organization without extra grouping
                       </li>
                       <li>
-                        <strong class="text-cool-steel-900 dark:text-white">
+                        <strong class="text-gray-900 dark:text-white">
                           Don't need location-based credentials
                         </strong>
                         - Organization-level credentials work for all devices
                       </li>
                     </ul>
 
-                    <div class="mt-6 p-4 bg-cerulean-50 dark:bg-cerulean-900/20 border border-cerulean-200 dark:border-cerulean-800 rounded-lg">
+                    <div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                       <div class="flex gap-3">
                         <.icon
                           name="hero-information-circle"
-                          class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0 mt-0.5"
+                          class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
                         />
                         <div>
-                          <h4 class="text-sm font-semibold text-cerulean-900 dark:text-cerulean-300 mb-1">
+                          <h4 class="text-sm font-semibold text-blue-900 dark:text-blue-300 mb-1">
                             Note
                           </h4>
-                          <p class="text-sm text-cerulean-800 dark:text-cerulean-300">
+                          <p class="text-sm text-blue-800 dark:text-blue-300">
                             Sites are optional and disabled by default. You can start without sites and enable them
                             later if your needs change. When sites are disabled, all devices belong directly to
                             your organization.
@@ -680,47 +676,47 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </div>
                     </div>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-8 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-8 mb-3">
                       How Sites Work
                     </h3>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       When sites are enabled, devices can be organized into sites, and credentials (SNMP communities,
                       usernames, passwords) can be set at three levels:
                     </p>
 
                     <div class="mt-4 space-y-3">
-                      <div class="p-4 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-2">
+                      <div class="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
                           1. Organization Level
                         </h4>
-                        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-sm text-gray-600 dark:text-gray-400">
                           Default credentials that apply to all devices across all sites in your organization.
                         </p>
                       </div>
 
-                      <div class="p-4 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-2">
+                      <div class="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
                           2. Site Level (when sites enabled)
                         </h4>
-                        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-sm text-gray-600 dark:text-gray-400">
                           Override organization defaults for all devices at a specific site. Useful when different
                           locations have different network configurations.
                         </p>
                       </div>
 
-                      <div class="p-4 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-2">
+                      <div class="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
                           3. Device Level
                         </h4>
-                        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-sm text-gray-600 dark:text-gray-400">
                           Override organization or site credentials for a specific device. Useful for devices with
                           unique configurations.
                         </p>
                       </div>
                     </div>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-8 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-8 mb-3">
                       Enabling Sites
                     </h3>
 
@@ -728,15 +724,15 @@ defmodule ToweropsWeb.HelpLive.Index do
                       <!-- Step 1 -->
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             1
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             Navigate to Organization Settings
                           </h4>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-gray-600 dark:text-gray-400">
                             Go to
                             <.code>Settings</.code>
                             →
@@ -749,15 +745,15 @@ defmodule ToweropsWeb.HelpLive.Index do
     <!-- Step 2 -->
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             2
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             Enable the "Use Sites" Toggle
                           </h4>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-gray-600 dark:text-gray-400">
                             Check the box for "Use sites to organize devices" and save your settings.
                           </p>
                         </div>
@@ -766,15 +762,15 @@ defmodule ToweropsWeb.HelpLive.Index do
     <!-- Step 3 -->
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             3
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             Create Your First Site
                           </h4>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-gray-600 dark:text-gray-400">
                             Navigate to
                             <.code>Sites</.code>
                             →
@@ -787,15 +783,15 @@ defmodule ToweropsWeb.HelpLive.Index do
     <!-- Step 4 -->
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             4
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             Assign Devices to Sites
                           </h4>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-gray-600 dark:text-gray-400">
                             When creating or editing devices, you can now assign them to specific sites. The site
                             selector will appear in the device form.
                           </p>
@@ -803,17 +799,17 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </div>
                     </div>
 
-                    <div class="mt-8 p-4 bg-wheat-50 dark:bg-wheat-900/20 border border-wheat-200 dark:border-wheat-800 rounded-lg">
+                    <div class="mt-8 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
                       <div class="flex gap-3">
                         <.icon
                           name="hero-exclamation-triangle"
-                          class="h-5 w-5 text-wheat-600 dark:text-wheat-400 flex-shrink-0 mt-0.5"
+                          class="h-5 w-5 text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5"
                         />
                         <div>
-                          <h4 class="text-sm font-semibold text-wheat-900 dark:text-wheat-300 mb-1">
+                          <h4 class="text-sm font-semibold text-yellow-900 dark:text-yellow-300 mb-1">
                             Disabling Sites
                           </h4>
-                          <p class="text-sm text-wheat-800 dark:text-wheat-300">
+                          <p class="text-sm text-yellow-800 dark:text-yellow-300">
                             If you disable sites after enabling them, all devices will be removed from their sites
                             and assigned directly to the organization. Site assignments will be lost, but devices
                             will remain in your organization and continue to be monitored.
@@ -825,44 +821,44 @@ defmodule ToweropsWeb.HelpLive.Index do
                 </div>
               <% "cloud-pollers" -> %>
                 <div class="p-6">
-                  <h2 class="text-xl font-bold text-cool-steel-900 dark:text-white mb-4">
+                  <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                     Cloud Pollers
                   </h2>
 
                   <div class="prose prose-sm dark:prose-invert max-w-none">
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       If you have publicly reachable devices, they will be automatically polled from one of our cloud pollers unless overridden by your settings.
                       Our cloud infrastructure monitors your devices without requiring any additional setup or agent installation.
                     </p>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                       Active Cloud Pollers
                     </h3>
 
-                    <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 overflow-hidden">
-                      <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-                        <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/75">
+                    <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 overflow-hidden">
+                      <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+                        <thead class="bg-gray-50 dark:bg-gray-800/75">
                           <tr>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                               Location
                             </th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                               IPv4 Address
                             </th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                               IPv6 Address
                             </th>
                           </tr>
                         </thead>
-                        <tbody class="divide-y divide-cool-steel-200 dark:divide-white/10">
-                          <tr class="hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800">
-                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-cool-steel-900 dark:text-white">
+                        <tbody class="divide-y divide-gray-200 dark:divide-white/10">
+                          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
                               DFW (Dallas-Fort Worth)
                             </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-600 dark:text-gray-400">
                               144.202.64.79
                             </td>
-                            <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-600 dark:text-gray-400">
                               2001:19f0:6401:0af2:5400:05ff:fee7:1bfb
                             </td>
                           </tr>
@@ -870,22 +866,22 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </table>
                     </div>
 
-                    <div class="mt-6 p-4 bg-cerulean-50 dark:bg-cerulean-900/20 border border-cerulean-200 dark:border-cerulean-800 rounded-lg">
+                    <div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                       <div class="flex gap-3">
                         <.icon
                           name="hero-information-circle"
-                          class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0 mt-0.5"
+                          class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
                         />
                         <div>
-                          <h4 class="text-sm font-semibold text-cerulean-900 dark:text-cerulean-300 mb-1">
+                          <h4 class="text-sm font-semibold text-blue-900 dark:text-blue-300 mb-1">
                             Firewall Configuration
                           </h4>
-                          <p class="text-sm text-cerulean-800 dark:text-cerulean-300">
+                          <p class="text-sm text-blue-800 dark:text-blue-300">
                             If your devices are behind a firewall, make sure to allow SNMP traffic (UDP port 161) and ICMP (for ping monitoring) from these IP addresses.
                             For devices not accessible from the public internet, consider using a
                             <.link
                               patch={~p"/help?section=agents"}
-                              class="underline hover:text-cerulean-900 dark:hover:text-cerulean-200"
+                              class="underline hover:text-blue-900 dark:hover:text-blue-200"
                             >
                               Remote Poller
                             </.link>
@@ -898,12 +894,12 @@ defmodule ToweropsWeb.HelpLive.Index do
                 </div>
               <% "agents" -> %>
                 <div class="p-6">
-                  <h2 class="text-xl font-bold text-cool-steel-900 dark:text-white mb-4">
+                  <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                     Remote Pollers
                   </h2>
 
                   <div class="prose prose-sm dark:prose-invert max-w-none">
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       Remote pollers are lightweight Docker containers that run on your network to monitor devices
                       that aren't accessible from the public internet — behind firewalls, on private networks, or
                       at remote locations. They use minimal resources (1 CPU core, 512 MB RAM) and auto-update
@@ -912,15 +908,15 @@ defmodule ToweropsWeb.HelpLive.Index do
                       and you're done.
                     </p>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                       Requirements
                     </h3>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       Remote pollers can run on any system that supports Docker Compose, including:
                     </p>
 
-                    <ul class="space-y-2 text-cool-steel-600 dark:text-cool-steel-400 list-disc list-inside">
+                    <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside">
                       <li>Linux servers (Ubuntu, Debian, CentOS, RHEL, etc.)</li>
                       <li>Windows Server with Docker Desktop</li>
                       <li>macOS with Docker Desktop</li>
@@ -928,16 +924,14 @@ defmodule ToweropsWeb.HelpLive.Index do
                       <li>Virtual machines (VMware, Hyper-V, Proxmox, etc.)</li>
                     </ul>
 
-                    <div class="mt-4 p-4 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                      <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
-                        <strong class="text-cool-steel-900 dark:text-white">
-                          Minimum requirements:
-                        </strong>
+                    <div class="mt-4 p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                      <p class="text-sm text-gray-600 dark:text-gray-400">
+                        <strong class="text-gray-900 dark:text-white">Minimum requirements:</strong>
                         1 CPU core, 512 MB RAM, and network access to your devices
                       </p>
                     </div>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                       Getting Started
                     </h3>
 
@@ -945,15 +939,15 @@ defmodule ToweropsWeb.HelpLive.Index do
                       <!-- Step 1 -->
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             1
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             Create an Agent Token
                           </h4>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-gray-600 dark:text-gray-400">
                             Navigate to the
                             <.code>Agents</.code>
                             page in Towerops and create a new agent token. This token authenticates your remote poller with the Towerops platform.
@@ -964,15 +958,15 @@ defmodule ToweropsWeb.HelpLive.Index do
     <!-- Step 2 -->
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             2
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             Create a docker-compose.yml
                           </h4>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-gray-600 dark:text-gray-400">
                             When you create a new agent on the
                             <.code>Agents</.code>
                             page, Towerops will show you a ready-to-use
@@ -1004,7 +998,7 @@ defmodule ToweropsWeb.HelpLive.Index do
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock]) %></code></pre>
                           </div>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400 mt-3">
+                          <p class="text-gray-600 dark:text-gray-400 mt-3">
                             The agent is lightweight — it uses minimal CPU and memory. Watchtower is included
                             to automatically update the agent every 12 hours, so you never have to think about it.
                           </p>
@@ -1014,15 +1008,15 @@ defmodule ToweropsWeb.HelpLive.Index do
     <!-- Step 3 -->
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             3
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             Deploy It
                           </h4>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-gray-600 dark:text-gray-400">
                             Copy the
                             <.code>docker-compose.yml</.code>
                             to your server and run:
@@ -1030,7 +1024,7 @@ defmodule ToweropsWeb.HelpLive.Index do
                           <div class="mt-3 p-4 bg-black rounded-lg not-prose">
                             <pre class="text-sm text-white font-mono"><code>docker compose up -d</code></pre>
                           </div>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400 mt-3">
+                          <p class="text-gray-600 dark:text-gray-400 mt-3">
                             That's it. The agent will connect to Towerops within seconds and start polling your local devices.
                             You'll see it come online on the Agents page.
                           </p>
@@ -1040,34 +1034,32 @@ defmodule ToweropsWeb.HelpLive.Index do
     <!-- Step 4 -->
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             4
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             Assign Devices to Remote Poller
                           </h4>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-gray-600 dark:text-gray-400">
                             You can assign devices to your remote poller in several ways:
                           </p>
-                          <ul class="space-y-2 text-cool-steel-600 dark:text-cool-steel-400 list-disc list-inside mt-2">
+                          <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside mt-2">
                             <li>
-                              <strong class="text-cool-steel-900 dark:text-white">
-                                Per Organization:
-                              </strong>
+                              <strong class="text-gray-900 dark:text-white">Per Organization:</strong>
                               Set a default agent for all devices in your organization
                             </li>
                             <li>
-                              <strong class="text-cool-steel-900 dark:text-white">Per Site:</strong>
+                              <strong class="text-gray-900 dark:text-white">Per Site:</strong>
                               Set a default agent for all devices at a specific site
                             </li>
                             <li>
-                              <strong class="text-cool-steel-900 dark:text-white">Per Device:</strong>
+                              <strong class="text-gray-900 dark:text-white">Per Device:</strong>
                               Select the remote poller when creating or editing individual devices
                             </li>
                           </ul>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400 mt-3">
+                          <p class="text-gray-600 dark:text-gray-400 mt-3">
                             Devices assigned to a remote poller will be monitored from your local network instead
                             of from the cloud.
                           </p>
@@ -1075,17 +1067,17 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </div>
                     </div>
 
-                    <div class="mt-8 p-4 bg-cerulean-50 dark:bg-cerulean-900/20 border border-cerulean-200 dark:border-cerulean-800 rounded-lg">
+                    <div class="mt-8 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                       <div class="flex gap-3">
                         <.icon
                           name="hero-shield-check"
-                          class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0 mt-0.5"
+                          class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
                         />
                         <div>
-                          <h4 class="text-sm font-semibold text-cerulean-900 dark:text-cerulean-300 mb-1">
+                          <h4 class="text-sm font-semibold text-blue-900 dark:text-blue-300 mb-1">
                             Security Note
                           </h4>
-                          <p class="text-sm text-cerulean-800 dark:text-cerulean-300">
+                          <p class="text-sm text-blue-800 dark:text-blue-300">
                             Remote pollers use secure WebSocket connections to communicate with Towerops.
                             Your agent token is encrypted and should be kept confidential. The remote poller
                             only needs outbound HTTPS access (port 443) to connect to Towerops - no inbound
@@ -1095,31 +1087,31 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </div>
                     </div>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-8 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-8 mb-3">
                       Managing Remote Pollers
                     </h3>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       You can view the status of your remote pollers on the Agents page. The page shows:
                     </p>
 
-                    <ul class="space-y-2 text-cool-steel-600 dark:text-cool-steel-400 list-disc list-inside mt-3">
+                    <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside mt-3">
                       <li>Last connection time</li>
                       <li>Number of devices assigned to each poller</li>
                       <li>Connection status (online/offline)</li>
                     </ul>
 
-                    <div class="mt-6 p-4 bg-wheat-50 dark:bg-wheat-900/20 border border-wheat-200 dark:border-wheat-800 rounded-lg">
+                    <div class="mt-6 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
                       <div class="flex gap-3">
                         <.icon
                           name="hero-exclamation-triangle"
-                          class="h-5 w-5 text-wheat-600 dark:text-wheat-400 flex-shrink-0 mt-0.5"
+                          class="h-5 w-5 text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5"
                         />
                         <div>
-                          <h4 class="text-sm font-semibold text-wheat-900 dark:text-wheat-300 mb-1">
+                          <h4 class="text-sm font-semibold text-yellow-900 dark:text-yellow-300 mb-1">
                             Important
                           </h4>
-                          <p class="text-sm text-wheat-800 dark:text-wheat-300">
+                          <p class="text-sm text-yellow-800 dark:text-yellow-300">
                             If a remote poller goes offline, devices assigned to it will not be monitored until
                             the poller comes back online. Consider setting up monitoring alerts for your remote
                             pollers to be notified if they disconnect.
@@ -1131,112 +1123,112 @@ defmodule ToweropsWeb.HelpLive.Index do
                 </div>
               <% "graphs" -> %>
                 <div class="p-6">
-                  <h2 class="text-xl font-bold text-cool-steel-900 dark:text-white mb-4">
+                  <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                     Graphs & Live Polling
                   </h2>
 
                   <div class="prose prose-sm dark:prose-invert max-w-none">
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       Towerops provides powerful visualization capabilities for all monitored metrics. Every sensor,
                       interface, and metric can be viewed as a time-series graph with multiple time ranges and a
                       real-time live polling mode for instant feedback.
                     </p>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                       Accessing Graphs
                     </h3>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       Graphs are available throughout Towerops wherever metrics are displayed:
                     </p>
 
-                    <ul class="space-y-2 text-cool-steel-600 dark:text-cool-steel-400 list-disc list-inside mt-3">
+                    <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside mt-3">
                       <li>
-                        <strong class="text-cool-steel-900 dark:text-white">Device Overview:</strong>
+                        <strong class="text-gray-900 dark:text-white">Device Overview:</strong>
                         Click any metric tile (CPU, Memory, Temperature, etc.) to view its graph
                       </li>
                       <li>
-                        <strong class="text-cool-steel-900 dark:text-white">Sensors Tab:</strong>
+                        <strong class="text-gray-900 dark:text-white">Sensors Tab:</strong>
                         Click the graph icon next to any sensor reading
                       </li>
                       <li>
-                        <strong class="text-cool-steel-900 dark:text-white">Interfaces Tab:</strong>
+                        <strong class="text-gray-900 dark:text-white">Interfaces Tab:</strong>
                         Click the graph icon next to any interface to view traffic graphs
                       </li>
                       <li>
-                        <strong class="text-cool-steel-900 dark:text-white">Storage Tab:</strong>
+                        <strong class="text-gray-900 dark:text-white">Storage Tab:</strong>
                         Click any storage volume to view usage over time
                       </li>
                     </ul>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-8 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-8 mb-3">
                       Time Ranges
                     </h3>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       All graphs support multiple time ranges for analyzing trends at different scales:
                     </p>
 
                     <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3">
-                      <div class="p-3 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-1">
+                      <div class="p-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">
                           1 Hour
                         </h4>
-                        <p class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-xs text-gray-600 dark:text-gray-400">
                           Recent activity with high detail
                         </p>
                       </div>
-                      <div class="p-3 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-1">
+                      <div class="p-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">
                           6 Hours
                         </h4>
-                        <p class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-xs text-gray-600 dark:text-gray-400">
                           Half-day trends and patterns
                         </p>
                       </div>
-                      <div class="p-3 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-1">
+                      <div class="p-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">
                           12 Hours
                         </h4>
-                        <p class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-xs text-gray-600 dark:text-gray-400">
                           Business day overview
                         </p>
                       </div>
-                      <div class="p-3 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-1">
+                      <div class="p-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">
                           24 Hours (Default)
                         </h4>
-                        <p class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-xs text-gray-600 dark:text-gray-400">
                           Full day of activity
                         </p>
                       </div>
-                      <div class="p-3 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-1">
+                      <div class="p-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">
                           7 Days
                         </h4>
-                        <p class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-xs text-gray-600 dark:text-gray-400">
                           Weekly trends and patterns
                         </p>
                       </div>
-                      <div class="p-3 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-1">
+                      <div class="p-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">
                           30 Days
                         </h4>
-                        <p class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-xs text-gray-600 dark:text-gray-400">
                           Monthly overview and capacity planning
                         </p>
                       </div>
                     </div>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-8 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-8 mb-3">
                       Live Polling Mode
                     </h3>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       Live mode provides real-time sensor monitoring with data updating every second. This is perfect for:
                     </p>
 
-                    <ul class="space-y-2 text-cool-steel-600 dark:text-cool-steel-400 list-disc list-inside mt-3">
+                    <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside mt-3">
                       <li>Testing configuration changes and seeing immediate effects</li>
                       <li>Monitoring system load during maintenance or upgrades</li>
                       <li>Watching temperature changes during thermal testing</li>
@@ -1265,22 +1257,22 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </div>
                     </div>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-8 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-8 mb-3">
                       Using Live Mode
                     </h3>
 
                     <div class="space-y-4">
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             1
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             Open Any Graph
                           </h4>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-gray-600 dark:text-gray-400">
                             Navigate to any device and click on a metric graph (CPU, Memory, Temperature, Traffic, etc.)
                           </p>
                         </div>
@@ -1288,15 +1280,15 @@ defmodule ToweropsWeb.HelpLive.Index do
 
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             2
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             Click the "Live" Button
                           </h4>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-gray-600 dark:text-gray-400">
                             The Live button has a distinctive green gradient style and will pulse when active
                           </p>
                         </div>
@@ -1304,15 +1296,15 @@ defmodule ToweropsWeb.HelpLive.Index do
 
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             3
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             Watch Real-Time Updates
                           </h4>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-gray-600 dark:text-gray-400">
                             The graph will start updating every second with fresh data. A pulsing green indicator
                             shows that live polling is active.
                           </p>
@@ -1321,94 +1313,94 @@ defmodule ToweropsWeb.HelpLive.Index do
 
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             4
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             Switch Back to Historical Data
                           </h4>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-gray-600 dark:text-gray-400">
                             Click any other time range button to stop live polling and view historical data
                           </p>
                         </div>
                       </div>
                     </div>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-8 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-8 mb-3">
                       Supported Metrics in Live Mode
                     </h3>
 
                     <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3">
-                      <div class="p-3 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-1 flex items-center gap-2">
-                          <.icon name="hero-cpu-chip" class="h-4 w-4 text-cerulean-500" />
+                      <div class="p-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-1 flex items-center gap-2">
+                          <.icon name="hero-cpu-chip" class="h-4 w-4 text-blue-500" />
                           CPU / Processors
                         </h4>
-                        <p class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-xs text-gray-600 dark:text-gray-400">
                           Real-time CPU load and utilization
                         </p>
                       </div>
 
-                      <div class="p-3 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-1 flex items-center gap-2">
-                          <.icon name="hero-circle-stack" class="h-4 w-4 text-cerulean-500" />
+                      <div class="p-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-1 flex items-center gap-2">
+                          <.icon name="hero-circle-stack" class="h-4 w-4 text-blue-500" />
                           Memory Usage
                         </h4>
-                        <p class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-xs text-gray-600 dark:text-gray-400">
                           RAM utilization percentage
                         </p>
                       </div>
 
-                      <div class="p-3 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-1 flex items-center gap-2">
+                      <div class="p-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-1 flex items-center gap-2">
                           <.icon name="hero-fire" class="h-4 w-4 text-orange-500" /> Temperature
                         </h4>
-                        <p class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-xs text-gray-600 dark:text-gray-400">
                           Device and component temperatures
                         </p>
                       </div>
 
-                      <div class="p-3 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-1 flex items-center gap-2">
-                          <.icon name="hero-bolt" class="h-4 w-4 text-wheat-500" /> Voltage
+                      <div class="p-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-1 flex items-center gap-2">
+                          <.icon name="hero-bolt" class="h-4 w-4 text-yellow-500" /> Voltage
                         </h4>
-                        <p class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-xs text-gray-600 dark:text-gray-400">
                           Power supply voltages
                         </p>
                       </div>
 
-                      <div class="p-3 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-1 flex items-center gap-2">
+                      <div class="p-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-1 flex items-center gap-2">
                           <.icon name="hero-server-stack" class="h-4 w-4 text-purple-500" /> Storage
                         </h4>
-                        <p class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-xs text-gray-600 dark:text-gray-400">
                           Disk usage and capacity
                         </p>
                       </div>
 
-                      <div class="p-3 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-1 flex items-center gap-2">
+                      <div class="p-3 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-1 flex items-center gap-2">
                           <.icon name="hero-hashtag" class="h-4 w-4 text-green-500" /> Custom Metrics
                         </h4>
-                        <p class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-xs text-gray-600 dark:text-gray-400">
                           Sessions, connections, and counts
                         </p>
                       </div>
                     </div>
 
-                    <div class="mt-6 p-4 bg-cerulean-50 dark:bg-cerulean-900/20 border border-cerulean-200 dark:border-cerulean-800 rounded-lg">
+                    <div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                       <div class="flex gap-3">
                         <.icon
                           name="hero-information-circle"
-                          class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0 mt-0.5"
+                          class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
                         />
                         <div>
-                          <h4 class="text-sm font-semibold text-cerulean-900 dark:text-cerulean-300 mb-1">
+                          <h4 class="text-sm font-semibold text-blue-900 dark:text-blue-300 mb-1">
                             Note About Traffic Graphs
                           </h4>
-                          <p class="text-sm text-cerulean-800 dark:text-cerulean-300">
+                          <p class="text-sm text-blue-800 dark:text-blue-300">
                             Live mode is currently only available for sensor metrics (CPU, memory, temperature, etc.).
                             Interface traffic graphs use historical data only, as traffic calculations require
                             comparing multiple SNMP polls over time.
@@ -1417,63 +1409,63 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </div>
                     </div>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-8 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-8 mb-3">
                       Tips for Using Graphs
                     </h3>
 
                     <div class="space-y-3">
-                      <div class="p-4 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-2">
+                      <div class="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
                           Multiple Sensors on One Graph
                         </h4>
-                        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-sm text-gray-600 dark:text-gray-400">
                           When viewing aggregate metrics (like "Temperature" for all sensors), the graph
                           automatically displays all sensors of that type with different colors for easy comparison.
                         </p>
                       </div>
 
-                      <div class="p-4 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-2">
+                      <div class="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
                           Max and Min Values
                         </h4>
-                        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-sm text-gray-600 dark:text-gray-400">
                           Historical graphs (non-live) display the maximum and minimum values for the selected
                           time range at the bottom of the chart for quick reference.
                         </p>
                       </div>
 
-                      <div class="p-4 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-2">
+                      <div class="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
                           Traffic Graph Direction
                         </h4>
-                        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-sm text-gray-600 dark:text-gray-400">
                           Interface traffic graphs show outbound traffic as positive values (above zero) and
                           inbound traffic as negative values (below zero) for easy visualization of bidirectional flow.
                         </p>
                       </div>
 
-                      <div class="p-4 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-2">
+                      <div class="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
                           Automatic Unit Scaling
                         </h4>
-                        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-sm text-gray-600 dark:text-gray-400">
                           Traffic graphs automatically scale units (bps, Kbps, Mbps, Gbps) based on the data
                           range for optimal readability. Hover over data points to see exact values.
                         </p>
                       </div>
                     </div>
 
-                    <div class="mt-8 p-4 bg-wheat-50 dark:bg-wheat-900/20 border border-wheat-200 dark:border-wheat-800 rounded-lg">
+                    <div class="mt-8 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
                       <div class="flex gap-3">
                         <.icon
                           name="hero-light-bulb"
-                          class="h-5 w-5 text-wheat-600 dark:text-wheat-400 flex-shrink-0 mt-0.5"
+                          class="h-5 w-5 text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5"
                         />
                         <div>
-                          <h4 class="text-sm font-semibold text-wheat-900 dark:text-wheat-300 mb-1">
+                          <h4 class="text-sm font-semibold text-yellow-900 dark:text-yellow-300 mb-1">
                             Performance Tip
                           </h4>
-                          <p class="text-sm text-wheat-800 dark:text-wheat-300">
+                          <p class="text-sm text-yellow-800 dark:text-yellow-300">
                             Live polling makes direct SNMP requests every second. While this provides instant
                             feedback, keeping many live graphs open simultaneously may impact device performance.
                             Use live mode for troubleshooting and testing, then switch back to historical ranges
@@ -1486,42 +1478,40 @@ defmodule ToweropsWeb.HelpLive.Index do
                 </div>
               <% "settings" -> %>
                 <div class="p-6">
-                  <h2 class="text-xl font-bold text-cool-steel-900 dark:text-white mb-4">
+                  <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                     Organization Settings
                   </h2>
 
                   <div class="prose prose-sm dark:prose-invert max-w-none">
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       Organization Settings is the central hub for configuring your Towerops organization. Access it
                       from the main navigation under <.code>Organization Settings</.code>. The settings page uses a
                       tabbed interface to organize different configuration areas.
                     </p>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                       General Tab
                     </h3>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       The General tab lets you manage basic organization properties:
                     </p>
 
-                    <ul class="space-y-2 text-cool-steel-600 dark:text-cool-steel-400 list-disc list-inside mt-3">
+                    <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside mt-3">
                       <li>
-                        <strong class="text-cool-steel-900 dark:text-white">Organization Name</strong>
+                        <strong class="text-gray-900 dark:text-white">Organization Name</strong>
                         — The display name for your organization
                       </li>
                       <li>
-                        <strong class="text-cool-steel-900 dark:text-white">
-                          Default Organization
-                        </strong>
+                        <strong class="text-gray-900 dark:text-white">Default Organization</strong>
                         — Set this as the default org when logging in
                       </li>
                       <li>
-                        <strong class="text-cool-steel-900 dark:text-white">Sites Toggle</strong>
+                        <strong class="text-gray-900 dark:text-white">Sites Toggle</strong>
                         — Enable or disable site-based device organization (see the
                         <.link
                           patch={~p"/help?section=sites"}
-                          class="underline hover:text-cerulean-900 dark:hover:text-cerulean-200 text-cerulean-700 dark:text-cerulean-300"
+                          class="underline hover:text-blue-900 dark:hover:text-blue-200 text-blue-700 dark:text-blue-300"
                         >
                           Sites
                         </.link>
@@ -1529,46 +1519,44 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </li>
                     </ul>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                       SNMP Tab
                     </h3>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       Configure organization-wide SNMP defaults used for device polling:
                     </p>
 
-                    <ul class="space-y-2 text-cool-steel-600 dark:text-cool-steel-400 list-disc list-inside mt-3">
+                    <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside mt-3">
                       <li>
-                        <strong class="text-cool-steel-900 dark:text-white">SNMP Version</strong>
+                        <strong class="text-gray-900 dark:text-white">SNMP Version</strong>
                         — Choose between v1, v2c, or v3
                       </li>
                       <li>
-                        <strong class="text-cool-steel-900 dark:text-white">Community String</strong>
+                        <strong class="text-gray-900 dark:text-white">Community String</strong>
                         — The SNMP community string for v1/v2c
                       </li>
                       <li>
-                        <strong class="text-cool-steel-900 dark:text-white">
-                          SNMPv3 Credentials
-                        </strong>
+                        <strong class="text-gray-900 dark:text-white">SNMPv3 Credentials</strong>
                         — Username, auth protocol, auth passphrase, privacy protocol, and privacy passphrase
                       </li>
                       <li>
-                        <strong class="text-cool-steel-900 dark:text-white">Port</strong>
+                        <strong class="text-gray-900 dark:text-white">Port</strong>
                         — SNMP port (default: 161)
                       </li>
                     </ul>
 
-                    <div class="mt-4 p-4 bg-cerulean-50 dark:bg-cerulean-900/20 border border-cerulean-200 dark:border-cerulean-800 rounded-lg">
+                    <div class="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                       <div class="flex gap-3">
                         <.icon
                           name="hero-information-circle"
-                          class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0 mt-0.5"
+                          class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
                         />
                         <div>
-                          <h4 class="text-sm font-semibold text-cerulean-900 dark:text-cerulean-300 mb-1">
+                          <h4 class="text-sm font-semibold text-blue-900 dark:text-blue-300 mb-1">
                             Credential Hierarchy
                           </h4>
-                          <p class="text-sm text-cerulean-800 dark:text-cerulean-300">
+                          <p class="text-sm text-blue-800 dark:text-blue-300">
                             SNMP credentials follow a hierarchy: <strong>Device > Site > Organization</strong>.
                             Device-level settings take the highest priority, followed by site-level, then
                             organization-level defaults. This lets you set sensible defaults while overriding
@@ -1578,66 +1566,64 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </div>
                     </div>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400 mt-4">
-                      Use the <strong class="text-cool-steel-900 dark:text-white">Force Apply</strong>
+                    <p class="text-gray-600 dark:text-gray-400 mt-4">
+                      Use the <strong class="text-gray-900 dark:text-white">Force Apply</strong>
                       button to push
                       the organization's SNMP settings to all devices, overriding any device or site-level
                       customizations.
                     </p>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                       MikroTik Tab
                     </h3>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       Configure organization-wide SSH credentials for MikroTik device monitoring. This tab is
                       only accessible to superusers. See the
                       <.link
                         patch={~p"/help?section=mikrotik"}
-                        class="underline hover:text-cerulean-900 dark:hover:text-cerulean-200 text-cerulean-700 dark:text-cerulean-300"
+                        class="underline hover:text-blue-900 dark:hover:text-blue-200 text-blue-700 dark:text-blue-300"
                       >
                         MikroTik
                       </.link>
                       section for detailed setup instructions.
                     </p>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                       Agents Tab
                     </h3>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       Manage remote poller (agent) assignments for your organization:
                     </p>
 
-                    <ul class="space-y-2 text-cool-steel-600 dark:text-cool-steel-400 list-disc list-inside mt-3">
+                    <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside mt-3">
                       <li>
-                        <strong class="text-cool-steel-900 dark:text-white">Default Agent</strong>
+                        <strong class="text-gray-900 dark:text-white">Default Agent</strong>
                         — Set a default remote poller for all devices in the organization
                       </li>
                       <li>
-                        <strong class="text-cool-steel-900 dark:text-white">
-                          Assignment Breakdown
-                        </strong>
+                        <strong class="text-gray-900 dark:text-white">Assignment Breakdown</strong>
                         — View how devices are distributed across pollers (cloud vs. remote agents)
                       </li>
                     </ul>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400 mt-4">
-                      Use the <strong class="text-cool-steel-900 dark:text-white">Force Apply</strong>
+                    <p class="text-gray-600 dark:text-gray-400 mt-4">
+                      Use the <strong class="text-gray-900 dark:text-white">Force Apply</strong>
                       button to push
                       the default agent assignment to all devices, overriding any device or site-level agent
                       selections.
                     </p>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                       Integrations Tab
                     </h3>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       Connect Towerops with third-party services. See the
                       <.link
                         patch={~p"/help?section=integrations"}
-                        class="underline hover:text-cerulean-900 dark:hover:text-cerulean-200 text-cerulean-700 dark:text-cerulean-300"
+                        class="underline hover:text-blue-900 dark:hover:text-blue-200 text-blue-700 dark:text-blue-300"
                       >
                         Integrations
                       </.link>
@@ -1647,12 +1633,12 @@ defmodule ToweropsWeb.HelpLive.Index do
                 </div>
               <% "integrations" -> %>
                 <div class="p-6">
-                  <h2 class="text-xl font-bold text-cool-steel-900 dark:text-white mb-4">
+                  <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                     Integrations
                   </h2>
 
                   <div class="prose prose-sm dark:prose-invert max-w-none">
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       Integrations allow you to connect Towerops with third-party services to enrich your
                       monitoring data, sync subscriber information, and streamline your workflow. Configure
                       integrations from
@@ -1662,14 +1648,14 @@ defmodule ToweropsWeb.HelpLive.Index do
                       tab.
                     </p>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                       Preseem
                     </h3>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       <a
                         href="https://preseem.com"
-                        class="underline hover:text-cerulean-900 dark:hover:text-cerulean-200 text-cerulean-700 dark:text-cerulean-300"
+                        class="underline hover:text-blue-900 dark:hover:text-blue-200 text-blue-700 dark:text-blue-300"
                       >
                         Preseem
                       </a>
@@ -1678,32 +1664,32 @@ defmodule ToweropsWeb.HelpLive.Index do
                       a unified view of network health alongside device monitoring.
                     </p>
 
-                    <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mt-4 mb-2">
+                    <h4 class="text-base font-semibold text-gray-900 dark:text-white mt-4 mb-2">
                       What It Syncs
                     </h4>
 
-                    <ul class="space-y-2 text-cool-steel-600 dark:text-cool-steel-400 list-disc list-inside">
+                    <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside">
                       <li>Subscriber QoE scores and metrics</li>
                       <li>Access point performance data</li>
                       <li>Latency, jitter, and packet loss statistics</li>
                     </ul>
 
-                    <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mt-4 mb-2">
+                    <h4 class="text-base font-semibold text-gray-900 dark:text-white mt-4 mb-2">
                       Configuration
                     </h4>
 
                     <div class="space-y-4">
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             1
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             Get Your Preseem API Key
                           </h4>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-gray-600 dark:text-gray-400">
                             Log in to your Preseem dashboard and generate an API key from your account settings.
                           </p>
                         </div>
@@ -1711,15 +1697,15 @@ defmodule ToweropsWeb.HelpLive.Index do
 
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             2
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             Add the Integration
                           </h4>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-gray-600 dark:text-gray-400">
                             Navigate to
                             <.code>Organization Settings</.code>
                             →
@@ -1732,19 +1718,17 @@ defmodule ToweropsWeb.HelpLive.Index do
 
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             3
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             Test the Connection
                           </h4>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-gray-600 dark:text-gray-400">
                             Use the
-                            <strong class="text-cool-steel-900 dark:text-white">
-                              Test Connection
-                            </strong>
+                            <strong class="text-gray-900 dark:text-white">Test Connection</strong>
                             button
                             to verify your API key is valid and Towerops can reach the Preseem API.
                           </p>
@@ -1752,17 +1736,17 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </div>
                     </div>
 
-                    <div class="mt-4 p-4 bg-cerulean-50 dark:bg-cerulean-900/20 border border-cerulean-200 dark:border-cerulean-800 rounded-lg">
+                    <div class="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                       <div class="flex gap-3">
                         <.icon
                           name="hero-information-circle"
-                          class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0 mt-0.5"
+                          class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
                         />
                         <div>
-                          <h4 class="text-sm font-semibold text-cerulean-900 dark:text-cerulean-300 mb-1">
+                          <h4 class="text-sm font-semibold text-blue-900 dark:text-blue-300 mb-1">
                             Sync Schedule
                           </h4>
-                          <p class="text-sm text-cerulean-800 dark:text-cerulean-300">
+                          <p class="text-sm text-blue-800 dark:text-blue-300">
                             Preseem data is synced automatically on a periodic schedule based on your configured
                             sync interval. You can also trigger a manual sync at any time from the integration settings.
                           </p>
@@ -1770,14 +1754,14 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </div>
                     </div>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-8 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-8 mb-3">
                       Gaiia
                     </h3>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       <a
                         href="https://gaiia.com"
-                        class="underline hover:text-cerulean-900 dark:hover:text-cerulean-200 text-cerulean-700 dark:text-cerulean-300"
+                        class="underline hover:text-blue-900 dark:hover:text-blue-200 text-blue-700 dark:text-blue-300"
                       >
                         Gaiia
                       </a>
@@ -1786,32 +1770,32 @@ defmodule ToweropsWeb.HelpLive.Index do
                       specific customers and services.
                     </p>
 
-                    <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mt-4 mb-2">
+                    <h4 class="text-base font-semibold text-gray-900 dark:text-white mt-4 mb-2">
                       What It Syncs
                     </h4>
 
-                    <ul class="space-y-2 text-cool-steel-600 dark:text-cool-steel-400 list-disc list-inside">
+                    <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside">
                       <li>Subscriber accounts and contact information</li>
                       <li>Service plans and subscription status</li>
                       <li>Entity mappings between Gaiia and Towerops devices</li>
                     </ul>
 
-                    <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mt-4 mb-2">
+                    <h4 class="text-base font-semibold text-gray-900 dark:text-white mt-4 mb-2">
                       Configuration
                     </h4>
 
                     <div class="space-y-4">
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             1
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             Configure Gaiia Credentials
                           </h4>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-gray-600 dark:text-gray-400">
                             Navigate to
                             <.code>Organization Settings</.code>
                             →
@@ -1824,15 +1808,15 @@ defmodule ToweropsWeb.HelpLive.Index do
 
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             2
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             Set Up Webhooks
                           </h4>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-gray-600 dark:text-gray-400">
                             Configure a webhook in your Gaiia account pointing to the webhook URL provided
                             in the integration settings. Webhooks enable real-time updates when subscriber
                             data changes in Gaiia.
@@ -1842,15 +1826,15 @@ defmodule ToweropsWeb.HelpLive.Index do
 
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             3
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             Entity Mapping & Reconciliation
                           </h4>
-                          <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-gray-600 dark:text-gray-400">
                             After the initial sync, review the entity mapping to ensure Gaiia subscribers are
                             correctly matched to Towerops devices. Use the reconciliation tools to resolve
                             any mismatches.
@@ -1859,17 +1843,17 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </div>
                     </div>
 
-                    <div class="mt-4 p-4 bg-cerulean-50 dark:bg-cerulean-900/20 border border-cerulean-200 dark:border-cerulean-800 rounded-lg">
+                    <div class="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                       <div class="flex gap-3">
                         <.icon
                           name="hero-information-circle"
-                          class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0 mt-0.5"
+                          class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
                         />
                         <div>
-                          <h4 class="text-sm font-semibold text-cerulean-900 dark:text-cerulean-300 mb-1">
+                          <h4 class="text-sm font-semibold text-blue-900 dark:text-blue-300 mb-1">
                             Sync Schedule
                           </h4>
-                          <p class="text-sm text-cerulean-800 dark:text-cerulean-300">
+                          <p class="text-sm text-blue-800 dark:text-blue-300">
                             Gaiia data is synced through two mechanisms: automatic periodic syncs pull the full
                             dataset on a schedule, while real-time webhooks push individual changes as they happen
                             in Gaiia. This ensures your data stays current without excessive API calls.
@@ -1878,14 +1862,14 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </div>
                     </div>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-8 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-8 mb-3">
                       PagerDuty
                     </h3>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       <a
                         href="https://www.pagerduty.com"
-                        class="underline hover:text-cerulean-900 dark:hover:text-cerulean-200 text-cerulean-700 dark:text-cerulean-300"
+                        class="underline hover:text-blue-900 dark:hover:text-blue-200 text-blue-700 dark:text-blue-300"
                       >
                         PagerDuty
                       </a>
@@ -1894,32 +1878,32 @@ defmodule ToweropsWeb.HelpLive.Index do
                       triggered. Acknowledging or resolving the alert in Towerops updates the PagerDuty incident as well.
                     </p>
 
-                    <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mt-4 mb-2">
+                    <h4 class="text-base font-semibold text-gray-900 dark:text-white mt-4 mb-2">
                       How It Works
                     </h4>
 
-                    <ul class="space-y-2 text-cool-steel-600 dark:text-cool-steel-400 list-disc list-inside">
+                    <ul class="space-y-2 text-gray-600 dark:text-gray-400 list-disc list-inside">
                       <li>Device goes down → PagerDuty incident triggered (critical severity)</li>
                       <li>Alert acknowledged in Towerops → PagerDuty incident acknowledged</li>
                       <li>Device recovers / alert resolved → PagerDuty incident resolved</li>
                     </ul>
 
-                    <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mt-4 mb-2">
+                    <h4 class="text-base font-semibold text-gray-900 dark:text-white mt-4 mb-2">
                       Configuration
                     </h4>
 
                     <div class="space-y-4">
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             1
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             Create an Events API v2 Integration in PagerDuty
                           </h4>
-                          <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-sm text-gray-600 dark:text-gray-400">
                             In PagerDuty, go to
                             <.code>Services</.code>
                             → select your service →
@@ -1935,15 +1919,15 @@ defmodule ToweropsWeb.HelpLive.Index do
 
                       <div class="flex gap-4">
                         <div class="flex-shrink-0">
-                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-cerulean-100 dark:bg-cerulean-900/50 text-cerulean-700 dark:text-cerulean-300 font-semibold">
+                          <div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 font-semibold">
                             2
                           </div>
                         </div>
                         <div class="flex-1">
-                          <h4 class="text-base font-semibold text-cool-steel-900 dark:text-white mb-2">
+                          <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">
                             Configure in Towerops
                           </h4>
-                          <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                          <p class="text-sm text-gray-600 dark:text-gray-400">
                             Navigate to
                             <.code>Organization Settings</.code>
                             →
@@ -1956,17 +1940,17 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </div>
                     </div>
 
-                    <div class="mt-4 p-4 bg-cerulean-50 dark:bg-cerulean-900/20 border border-cerulean-200 dark:border-cerulean-800 rounded-lg">
+                    <div class="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                       <div class="flex gap-3">
                         <.icon
                           name="hero-information-circle"
-                          class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0 mt-0.5"
+                          class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
                         />
                         <div>
-                          <h4 class="text-sm font-semibold text-cerulean-900 dark:text-cerulean-300 mb-1">
+                          <h4 class="text-sm font-semibold text-blue-900 dark:text-blue-300 mb-1">
                             Event-Driven
                           </h4>
-                          <p class="text-sm text-cerulean-800 dark:text-cerulean-300">
+                          <p class="text-sm text-blue-800 dark:text-blue-300">
                             Unlike other integrations, PagerDuty is event-driven — there is no periodic sync.
                             Alerts are sent to PagerDuty in real time as they occur. No polling or sync interval is needed.
                           </p>
@@ -1974,26 +1958,26 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </div>
                     </div>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-8 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-8 mb-3">
                       General Integration Features
                     </h3>
 
                     <div class="mt-4 space-y-3">
-                      <div class="p-4 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-2">
+                      <div class="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
                           Test Connection
                         </h4>
-                        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-sm text-gray-600 dark:text-gray-400">
                           Every integration includes a Test Connection button that validates your credentials
                           and confirms Towerops can communicate with the external service before saving.
                         </p>
                       </div>
 
-                      <div class="p-4 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-2">
+                      <div class="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
                           Sync Status
                         </h4>
-                        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-sm text-gray-600 dark:text-gray-400">
                           The Integrations tab shows the last sync time, sync status, and any errors for
                           each configured integration.
                         </p>
@@ -2003,29 +1987,29 @@ defmodule ToweropsWeb.HelpLive.Index do
                 </div>
               <% "mikrotik" -> %>
                 <div class="p-6">
-                  <h2 class="text-xl font-bold text-cool-steel-900 dark:text-white mb-4">
+                  <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                     MikroTik Configuration
                   </h2>
 
                   <div class="prose prose-sm dark:prose-invert max-w-none">
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       Towerops supports read-only monitoring of MikroTik RouterOS devices via SSH.
                       In addition to SNMP polling, SSH access allows Towerops to retrieve detailed system information
                       and create configuration backups of your MikroTik devices for disaster recovery and audit purposes.
                     </p>
 
                     <div class="mt-4 space-y-4">
-                      <div class="p-4 bg-cerulean-50 dark:bg-cerulean-900/20 border border-cerulean-200 dark:border-cerulean-800 rounded-lg">
+                      <div class="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                         <div class="flex gap-3">
                           <.icon
                             name="hero-information-circle"
-                            class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0 mt-0.5"
+                            class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
                           />
                           <div>
-                            <h4 class="text-sm font-semibold text-cerulean-900 dark:text-cerulean-300 mb-1">
+                            <h4 class="text-sm font-semibold text-blue-900 dark:text-blue-300 mb-1">
                               Read-Only Access
                             </h4>
-                            <p class="text-sm text-cerulean-800 dark:text-cerulean-300">
+                            <p class="text-sm text-blue-800 dark:text-blue-300">
                               Towerops currently operates in read-only mode for MikroTik devices. Configuration changes,
                               reboots, and other administrative actions are not supported. This ensures your device
                               configurations remain unchanged by monitoring operations.
@@ -2034,17 +2018,17 @@ defmodule ToweropsWeb.HelpLive.Index do
                         </div>
                       </div>
 
-                      <div class="p-4 bg-cerulean-50 dark:bg-cerulean-900/20 border border-cerulean-200 dark:border-cerulean-800 rounded-lg">
+                      <div class="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                         <div class="flex gap-3">
                           <.icon
                             name="hero-server"
-                            class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0 mt-0.5"
+                            class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
                           />
                           <div>
-                            <h4 class="text-sm font-semibold text-cerulean-900 dark:text-cerulean-300 mb-1">
+                            <h4 class="text-sm font-semibold text-blue-900 dark:text-blue-300 mb-1">
                               Cloud or Agent-Based Connections
                             </h4>
-                            <p class="text-sm text-cerulean-800 dark:text-cerulean-300">
+                            <p class="text-sm text-blue-800 dark:text-blue-300">
                               Both SNMP polling and SSH connections to MikroTik devices can be performed from either
                               Towerops cloud infrastructure or your remote poller (agent). For publicly accessible devices,
                               cloud polling is the simplest option. For devices on private networks or when you prefer
@@ -2056,29 +2040,29 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </div>
                     </div>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                       Security Best Practices
                     </h3>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       For security purposes, it is strongly recommended to create a dedicated read-only user account
                       for Towerops rather than using an administrator account. This follows the principle of least
                       privilege and minimizes potential security risks. Even though Towerops only performs read-only
                       operations, limiting the account permissions provides defense in depth.
                     </p>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                       Creating a Read-Only User
                     </h3>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       Connect to your MikroTik device via SSH or terminal and execute the following commands to
                       create a read-only user named <.code>towerops</.code>:
                     </p>
 
                     <div class="mt-4 space-y-3">
                       <div>
-                        <p class="text-sm text-cool-steel-700 dark:text-cool-steel-300 mb-2 font-medium">
+                        <p class="text-sm text-gray-700 dark:text-gray-300 mb-2 font-medium">
                           Step 1: Create a new user group with read-only permissions
                         </p>
                         <div class="p-4 bg-black rounded-lg not-prose">
@@ -2089,7 +2073,7 @@ defmodule ToweropsWeb.HelpLive.Index do
                             <button
                               type="button"
                               phx-click={JS.dispatch("phx:copy", to: "#step1-command")}
-                              class="flex-shrink-0 p-1 text-cerulean-400 hover:text-cerulean-300"
+                              class="flex-shrink-0 p-1 text-blue-400 hover:text-blue-300"
                               title="Copy to clipboard"
                             >
                               <.icon name="hero-clipboard-document" class="h-4 w-4" />
@@ -2104,7 +2088,7 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </div>
 
                       <div>
-                        <p class="text-sm text-cool-steel-700 dark:text-cool-steel-300 mb-2 font-medium">
+                        <p class="text-sm text-gray-700 dark:text-gray-300 mb-2 font-medium">
                           Step 2: Create the monitoring user with a strong password
                         </p>
                         <div class="p-4 bg-black rounded-lg not-prose">
@@ -2118,7 +2102,7 @@ defmodule ToweropsWeb.HelpLive.Index do
                               <button
                                 type="button"
                                 phx-click={JS.dispatch("phx:copy", to: "#generated-password-value")}
-                                class="flex-shrink-0 p-1 text-cerulean-400 hover:text-cerulean-300"
+                                class="flex-shrink-0 p-1 text-blue-400 hover:text-blue-300"
                                 title="Copy to clipboard"
                               >
                                 <.icon name="hero-clipboard-document" class="h-4 w-4" />
@@ -2146,7 +2130,7 @@ defmodule ToweropsWeb.HelpLive.Index do
                             <% end %>
                           </.button>
                           <%= if @generated_password do %>
-                            <p class="text-xs text-wheat-600 dark:text-wheat-400 font-medium mt-1.5">
+                            <p class="text-xs text-yellow-600 dark:text-yellow-400 font-medium mt-1.5">
                               ⚠️ This truly random password from random.org will only be shown once!
                             </p>
                           <% end %>
@@ -2154,7 +2138,7 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </div>
 
                       <div>
-                        <p class="text-sm text-cool-steel-700 dark:text-cool-steel-300 mb-2 font-medium">
+                        <p class="text-sm text-gray-700 dark:text-gray-300 mb-2 font-medium">
                           Step 3: Verify the user was created successfully
                         </p>
                         <div class="p-4 bg-black rounded-lg not-prose">
@@ -2165,7 +2149,7 @@ defmodule ToweropsWeb.HelpLive.Index do
                             <button
                               type="button"
                               phx-click={JS.dispatch("phx:copy", to: "#step3-command")}
-                              class="flex-shrink-0 p-1 text-cerulean-400 hover:text-cerulean-300"
+                              class="flex-shrink-0 p-1 text-blue-400 hover:text-blue-300"
                               title="Copy to clipboard"
                             >
                               <.icon name="hero-clipboard-document" class="h-4 w-4" />
@@ -2180,11 +2164,11 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </div>
                     </div>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-8 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-8 mb-3">
                       Permissions Explained
                     </h3>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       The
                       <.code>readonly</.code>
                       group includes the following permissions. Note that while these
@@ -2192,48 +2176,48 @@ defmodule ToweropsWeb.HelpLive.Index do
                       not make any configuration changes:
                     </p>
 
-                    <div class="mt-4 bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 overflow-hidden">
-                      <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-                        <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/75">
+                    <div class="mt-4 bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 overflow-hidden">
+                      <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+                        <thead class="bg-gray-50 dark:bg-gray-800/75">
                           <tr>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                               Permission
                             </th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                               Description
                             </th>
                           </tr>
                         </thead>
-                        <tbody class="divide-y divide-cool-steel-200 dark:divide-white/10">
-                          <tr class="hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800">
-                            <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-cool-steel-900 dark:text-white">
+                        <tbody class="divide-y divide-gray-200 dark:divide-white/10">
+                          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900 dark:text-white">
                               ssh
                             </td>
-                            <td class="px-6 py-4 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                            <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
                               Allow SSH access to the device
                             </td>
                           </tr>
-                          <tr class="hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800">
-                            <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-cool-steel-900 dark:text-white">
+                          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900 dark:text-white">
                               read
                             </td>
-                            <td class="px-6 py-4 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                            <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
                               Allow viewing configuration and status (read-only)
                             </td>
                           </tr>
-                          <tr class="hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800">
-                            <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-cool-steel-900 dark:text-white">
+                          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900 dark:text-white">
                               test
                             </td>
-                            <td class="px-6 py-4 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                            <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
                               Allow executing diagnostic commands (ping, traceroute, etc.)
                             </td>
                           </tr>
-                          <tr class="hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800">
-                            <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-cool-steel-900 dark:text-white">
+                          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm font-mono text-gray-900 dark:text-white">
                               api
                             </td>
-                            <td class="px-6 py-4 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                            <td class="px-6 py-4 text-sm text-gray-600 dark:text-gray-400">
                               Allow API access for automated monitoring
                             </td>
                           </tr>
@@ -2241,17 +2225,17 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </table>
                     </div>
 
-                    <div class="mt-6 p-4 bg-cerulean-50 dark:bg-cerulean-900/20 border border-cerulean-200 dark:border-cerulean-800 rounded-lg">
+                    <div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
                       <div class="flex gap-3">
                         <.icon
                           name="hero-information-circle"
-                          class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400 flex-shrink-0 mt-0.5"
+                          class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5"
                         />
                         <div>
-                          <h4 class="text-sm font-semibold text-cerulean-900 dark:text-cerulean-300 mb-1">
+                          <h4 class="text-sm font-semibold text-blue-900 dark:text-blue-300 mb-1">
                             Important Notes
                           </h4>
-                          <ul class="text-sm text-cerulean-800 dark:text-cerulean-300 space-y-1 list-disc list-inside">
+                          <ul class="text-sm text-blue-800 dark:text-blue-300 space-y-1 list-disc list-inside">
                             <li>The read-only user cannot modify device configuration</li>
                             <li>No write, reboot, or sensitive permissions are granted</li>
                             <li>Use a strong, unique password for the monitoring account</li>
@@ -2261,20 +2245,20 @@ defmodule ToweropsWeb.HelpLive.Index do
                       </div>
                     </div>
 
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-8 mb-3">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-8 mb-3">
                       Configuring in Towerops
                     </h3>
 
-                    <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                    <p class="text-gray-600 dark:text-gray-400">
                       After creating the read-only user, configure SSH credentials in Towerops:
                     </p>
 
                     <div class="mt-4 space-y-4">
-                      <div class="p-4 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-2">
+                      <div class="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
                           Organization-Level Configuration
                         </h4>
-                        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-sm text-gray-600 dark:text-gray-400">
                           Navigate to
                           <.code>Organization Settings</.code>
                           →
@@ -2284,11 +2268,11 @@ defmodule ToweropsWeb.HelpLive.Index do
                         </p>
                       </div>
 
-                      <div class="p-4 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-2">
+                      <div class="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
                           Site-Level Configuration
                         </h4>
-                        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-sm text-gray-600 dark:text-gray-400">
                           Navigate to
                           <.code>Sites</.code>
                           → select a site →
@@ -2298,28 +2282,28 @@ defmodule ToweropsWeb.HelpLive.Index do
                         </p>
                       </div>
 
-                      <div class="p-4 bg-cool-steel-50 dark:bg-cool-steel-800/50 border border-cool-steel-200 dark:border-white/10 rounded-lg">
-                        <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-2">
+                      <div class="p-4 bg-gray-50 dark:bg-gray-800/50 border border-gray-200 dark:border-white/10 rounded-lg">
+                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">
                           Device-Level Configuration
                         </h4>
-                        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="text-sm text-gray-600 dark:text-gray-400">
                           When editing a MikroTik device, you can specify unique SSH credentials that override
                           organization and site defaults.
                         </p>
                       </div>
                     </div>
 
-                    <div class="mt-6 p-4 bg-wheat-50 dark:bg-wheat-900/20 border border-wheat-200 dark:border-wheat-800 rounded-lg">
+                    <div class="mt-6 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
                       <div class="flex gap-3">
                         <.icon
                           name="hero-shield-check"
-                          class="h-5 w-5 text-wheat-600 dark:text-wheat-400 flex-shrink-0 mt-0.5"
+                          class="h-5 w-5 text-yellow-600 dark:text-yellow-400 flex-shrink-0 mt-0.5"
                         />
                         <div>
-                          <h4 class="text-sm font-semibold text-wheat-900 dark:text-wheat-300 mb-1">
+                          <h4 class="text-sm font-semibold text-yellow-900 dark:text-yellow-300 mb-1">
                             Security Recommendations
                           </h4>
-                          <ul class="text-sm text-wheat-800 dark:text-wheat-300 space-y-1 list-disc list-inside">
+                          <ul class="text-sm text-yellow-800 dark:text-yellow-300 space-y-1 list-disc list-inside">
                             <li>Always use SSL/TLS for SSH connections (API-SSL on port 8729)</li>
                             <li>Store credentials at the organization or site level when possible</li>
                             <li>Rotate passwords periodically following your security policies</li>
@@ -2335,24 +2319,24 @@ defmodule ToweropsWeb.HelpLive.Index do
                 </div>
               <% "insights" -> %>
                 <div class="p-6">
-                  <h2 class="text-xl font-bold text-cool-steel-900 dark:text-white mb-4">
+                  <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                     Network Insights
                   </h2>
-                  <p class="text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+                  <p class="text-gray-600 dark:text-gray-400 mb-4">
                     Network Insights provides proactive observations about your network health, gathered automatically from all connected data sources.
                   </p>
 
-                  <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                     How It Works
                   </h3>
-                  <p class="text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+                  <p class="text-gray-600 dark:text-gray-400 mb-4">
                     Towerops continuously analyzes data from SNMP polling, Preseem, Gaiia, and other integrations to surface actionable findings. Insights are categorized by source, urgency, and type so you can focus on what matters.
                   </p>
 
-                  <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                     Insight Types
                   </h3>
-                  <ul class="list-disc list-inside text-cool-steel-600 dark:text-cool-steel-400 space-y-2 mb-4">
+                  <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 mb-4">
                     <li>
                       <strong>Reconciliation Findings</strong>
                       — Devices that exist in Towerops but not in Gaiia (or vice versa), data mismatches between systems
@@ -2371,18 +2355,18 @@ defmodule ToweropsWeb.HelpLive.Index do
                     </li>
                   </ul>
 
-                  <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                     Filtering & Management
                   </h3>
-                  <p class="text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+                  <p class="text-gray-600 dark:text-gray-400 mb-4">
                     Use the filter bar to narrow insights by status (active/dismissed), source (Preseem, Gaiia, SNMP, system), and urgency level. Each insight shows affected devices as clickable links so you can drill directly into the device detail page.
                   </p>
-                  <p class="text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+                  <p class="text-gray-600 dark:text-gray-400 mb-4">
                     Dismiss insights you've reviewed to keep the active list clean. Bulk actions let you select multiple insights at once.
                   </p>
 
-                  <div class="mt-6 rounded-lg bg-cerulean-50 dark:bg-cerulean-900/20 p-4">
-                    <p class="text-sm text-cerulean-700 dark:text-cerulean-300">
+                  <div class="mt-6 rounded-lg bg-blue-50 dark:bg-blue-900/20 p-4">
+                    <p class="text-sm text-blue-700 dark:text-blue-300">
                       <strong>Tip:</strong>
                       Insights run on a nightly schedule. Connect your Gaiia and Preseem integrations in
                       <.link navigate={~p"/help?section=integrations"} class="underline">
@@ -2394,20 +2378,20 @@ defmodule ToweropsWeb.HelpLive.Index do
                 </div>
               <% "network-map" -> %>
                 <div class="p-6">
-                  <h2 class="text-xl font-bold text-cool-steel-900 dark:text-white mb-4">
+                  <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                     Network Map
                   </h2>
-                  <p class="text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+                  <p class="text-gray-600 dark:text-gray-400 mb-4">
                     The Network Map provides a geographic view of your sites on an interactive map. Sites with latitude and longitude coordinates are displayed as markers that you can click to view details.
                   </p>
 
-                  <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                     Adding Location Data
                   </h3>
-                  <p class="text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+                  <p class="text-gray-600 dark:text-gray-400 mb-4">
                     Each site can have an address and/or latitude/longitude coordinates. You can set these in two ways:
                   </p>
-                  <ul class="list-disc list-inside text-cool-steel-600 dark:text-cool-steel-400 space-y-2 mb-4">
+                  <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 mb-4">
                     <li>
                       <strong>Manual entry</strong>
                       — Enter latitude and longitude directly in the site edit form
@@ -2418,21 +2402,21 @@ defmodule ToweropsWeb.HelpLive.Index do
                     </li>
                   </ul>
 
-                  <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                     Geocoding Setup
                   </h3>
-                  <p class="text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+                  <p class="text-gray-600 dark:text-gray-400 mb-4">
                     Address-to-coordinate conversion requires a Google Maps Geocoding API key. Your administrator sets this as the
-                    <code class="rounded bg-cool-steel-100 px-1.5 py-0.5 text-sm font-mono dark:bg-cool-steel-700">
+                    <code class="rounded bg-gray-100 px-1.5 py-0.5 text-sm font-mono dark:bg-gray-700">
                       GOOGLE_MAPS_API_KEY
                     </code>
                     environment variable on the server. The map display itself uses OpenStreetMap and requires no API key.
                   </p>
 
-                  <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                     Map Features
                   </h3>
-                  <ul class="list-disc list-inside text-cool-steel-600 dark:text-cool-steel-400 space-y-2 mb-4">
+                  <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 mb-4">
                     <li>Interactive pan and zoom with OpenStreetMap tiles</li>
                     <li>
                       Click any site marker to see site name, device count, and a link to the site detail page
@@ -2443,41 +2427,41 @@ defmodule ToweropsWeb.HelpLive.Index do
                 </div>
               <% "api-tokens" -> %>
                 <div class="p-6">
-                  <h2 class="text-xl font-bold text-cool-steel-900 dark:text-white mb-4">
+                  <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                     API Tokens
                   </h2>
-                  <p class="text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+                  <p class="text-gray-600 dark:text-gray-400 mb-4">
                     API tokens allow external applications and scripts to authenticate with the Towerops REST and GraphQL APIs. Each token is scoped to an organization and can be managed from your user settings.
                   </p>
 
-                  <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                     Creating a Token
                   </h3>
-                  <ol class="list-decimal list-inside text-cool-steel-600 dark:text-cool-steel-400 space-y-2 mb-4">
+                  <ol class="list-decimal list-inside text-gray-600 dark:text-gray-400 space-y-2 mb-4">
                     <li>Go to <strong>User Settings → API Tokens</strong></li>
                     <li>Click <strong>"Create API Token"</strong></li>
                     <li>Give the token a descriptive name (e.g., "Grafana Integration")</li>
                     <li>Copy the token immediately — it will only be shown once</li>
                   </ol>
 
-                  <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                     Using a Token
                   </h3>
-                  <p class="text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+                  <p class="text-gray-600 dark:text-gray-400 mb-4">
                     Include the token in the
-                    <code class="rounded bg-cool-steel-100 px-1.5 py-0.5 text-sm font-mono dark:bg-cool-steel-700">
+                    <code class="rounded bg-gray-100 px-1.5 py-0.5 text-sm font-mono dark:bg-gray-700">
                       Authorization
                     </code>
                     header:
                   </p>
-                  <div class="rounded-lg bg-cool-steel-900 p-4 mb-4">
+                  <div class="rounded-lg bg-gray-900 p-4 mb-4">
                     <pre class="text-sm text-green-400 overflow-x-auto"><code>Authorization: Bearer your-api-token-here</code></pre>
                   </div>
 
-                  <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                     Security Best Practices
                   </h3>
-                  <ul class="list-disc list-inside text-cool-steel-600 dark:text-cool-steel-400 space-y-2 mb-4">
+                  <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 mb-4">
                     <li>
                       Create separate tokens for each integration — don't reuse tokens across services
                     </li>
@@ -2486,8 +2470,8 @@ defmodule ToweropsWeb.HelpLive.Index do
                     <li>Store tokens in environment variables or a secrets manager</li>
                   </ul>
 
-                  <div class="mt-6 rounded-lg bg-cerulean-50 dark:bg-cerulean-900/20 p-4">
-                    <p class="text-sm text-cerulean-700 dark:text-cerulean-300">
+                  <div class="mt-6 rounded-lg bg-blue-50 dark:bg-blue-900/20 p-4">
+                    <p class="text-sm text-blue-700 dark:text-blue-300">
                       <strong>See also:</strong>
                       <.link navigate={~p"/help?section=rest-api"} class="underline">REST API</.link>
                       and
@@ -2500,21 +2484,21 @@ defmodule ToweropsWeb.HelpLive.Index do
                 </div>
               <% "rest-api" -> %>
                 <div class="p-6">
-                  <h2 class="text-xl font-bold text-cool-steel-900 dark:text-white mb-4">
+                  <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                     REST API
                   </h2>
-                  <p class="text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+                  <p class="text-gray-600 dark:text-gray-400 mb-4">
                     The Towerops REST API provides programmatic access to your monitoring data. All endpoints are under
-                    <code class="rounded bg-cool-steel-100 px-1.5 py-0.5 text-sm font-mono dark:bg-cool-steel-700">
+                    <code class="rounded bg-gray-100 px-1.5 py-0.5 text-sm font-mono dark:bg-gray-700">
                       /api/v1/
                     </code>
                     and require a valid API token.
                   </p>
 
-                  <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                     Available Endpoints
                   </h3>
-                  <ul class="list-disc list-inside text-cool-steel-600 dark:text-cool-steel-400 space-y-2 mb-4">
+                  <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 mb-4">
                     <li>
                       <strong>Devices</strong> — List, view, create, and update monitored devices
                     </li>
@@ -2539,22 +2523,22 @@ defmodule ToweropsWeb.HelpLive.Index do
                     </li>
                   </ul>
 
-                  <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                     Quick Example
                   </h3>
-                  <div class="rounded-lg bg-cool-steel-900 p-4 mb-4">
+                  <div class="rounded-lg bg-gray-900 p-4 mb-4">
                     <pre class="text-sm text-green-400 overflow-x-auto"><code><%= raw("curl -H \"Authorization: Bearer YOUR_TOKEN\" \\\n  https://app.towerops.net/api/v1/devices") %></code></pre>
                   </div>
-                  <p class="text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+                  <p class="text-gray-600 dark:text-gray-400 mb-4">
                     All responses use
-                    <code class="rounded bg-cool-steel-100 px-1.5 py-0.5 text-sm font-mono dark:bg-cool-steel-700">
+                    <code class="rounded bg-gray-100 px-1.5 py-0.5 text-sm font-mono dark:bg-gray-700">
                       {raw("&#123;\"data\": ...&#125;")}
                     </code>
                     format. Results are scoped to the organization associated with your API token.
                   </p>
 
-                  <div class="mt-6 rounded-lg bg-cerulean-50 dark:bg-cerulean-900/20 p-4">
-                    <p class="text-sm text-cerulean-700 dark:text-cerulean-300">
+                  <div class="mt-6 rounded-lg bg-blue-50 dark:bg-blue-900/20 p-4">
+                    <p class="text-sm text-blue-700 dark:text-blue-300">
                       <strong>Full reference:</strong>
                       <a href="/docs/api" class="underline font-medium">REST API Documentation →</a>
                       — complete endpoint reference with request/response examples.
@@ -2563,21 +2547,21 @@ defmodule ToweropsWeb.HelpLive.Index do
                 </div>
               <% "graphql-api" -> %>
                 <div class="p-6">
-                  <h2 class="text-xl font-bold text-cool-steel-900 dark:text-white mb-4">
+                  <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                     GraphQL API
                   </h2>
-                  <p class="text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+                  <p class="text-gray-600 dark:text-gray-400 mb-4">
                     The GraphQL API lets you query exactly the data you need in a single request. The endpoint is
-                    <code class="rounded bg-cool-steel-100 px-1.5 py-0.5 text-sm font-mono dark:bg-cool-steel-700">
+                    <code class="rounded bg-gray-100 px-1.5 py-0.5 text-sm font-mono dark:bg-gray-700">
                       POST /api/graphql
                     </code>
                     and uses the same API token authentication as the REST API.
                   </p>
 
-                  <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                     Why GraphQL?
                   </h3>
-                  <ul class="list-disc list-inside text-cool-steel-600 dark:text-cool-steel-400 space-y-2 mb-4">
+                  <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 mb-4">
                     <li>
                       <strong>Fetch related data in one query</strong>
                       — Get devices with their sites, alerts, and latest metrics in a single request
@@ -2589,17 +2573,17 @@ defmodule ToweropsWeb.HelpLive.Index do
                     </li>
                   </ul>
 
-                  <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                     Quick Example
                   </h3>
-                  <div class="rounded-lg bg-cool-steel-900 p-4 mb-4">
+                  <div class="rounded-lg bg-gray-900 p-4 mb-4">
                     <pre class="text-sm text-green-400 overflow-x-auto"><code><%= raw("curl -X POST https://app.towerops.net/api/graphql \\\n  -H \"Authorization: Bearer YOUR_TOKEN\" \\\n  -H \"Content-Type: application/json\" \\\n  -d '{\"query\": \"{ devices { id name ipAddress status } }\"}'") %></code></pre>
                   </div>
 
-                  <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                     Available Queries
                   </h3>
-                  <ul class="list-disc list-inside text-cool-steel-600 dark:text-cool-steel-400 space-y-2 mb-4">
+                  <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 mb-4">
                     <li>
                       <strong>devices</strong>
                       — List devices with filtering and nested site/alert data
@@ -2615,10 +2599,10 @@ defmodule ToweropsWeb.HelpLive.Index do
                     <li><strong>agents</strong> — Remote poller agents and their assignments</li>
                   </ul>
 
-                  <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white mt-6 mb-3">
+                  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-6 mb-3">
                     Mutations
                   </h3>
-                  <ul class="list-disc list-inside text-cool-steel-600 dark:text-cool-steel-400 space-y-2 mb-4">
+                  <ul class="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-2 mb-4">
                     <li>
                       <strong>createDevice</strong> / <strong>updateDevice</strong> — Manage devices
                     </li>
@@ -2629,8 +2613,8 @@ defmodule ToweropsWeb.HelpLive.Index do
                     </li>
                   </ul>
 
-                  <div class="mt-6 rounded-lg bg-cerulean-50 dark:bg-cerulean-900/20 p-4">
-                    <p class="text-sm text-cerulean-700 dark:text-cerulean-300">
+                  <div class="mt-6 rounded-lg bg-blue-50 dark:bg-blue-900/20 p-4">
+                    <p class="text-sm text-blue-700 dark:text-blue-300">
                       <strong>Full reference:</strong>
                       <a href="/docs/graphql" class="underline font-medium">
                         GraphQL API Documentation →
@@ -2641,10 +2625,10 @@ defmodule ToweropsWeb.HelpLive.Index do
                 </div>
               <% _ -> %>
                 <div class="p-6">
-                  <h2 class="text-xl font-bold text-cool-steel-900 dark:text-white mb-4">
+                  <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                     Section Not Found
                   </h2>
-                  <p class="text-cool-steel-600 dark:text-cool-steel-400">
+                  <p class="text-gray-600 dark:text-gray-400">
                     The requested help section could not be found.
                   </p>
                 </div>
diff --git a/lib/towerops_web/live/insights_live/index.ex b/lib/towerops_web/live/insights_live/index.ex
index c42482ba..dae70ebd 100644
--- a/lib/towerops_web/live/insights_live/index.ex
+++ b/lib/towerops_web/live/insights_live/index.ex
@@ -182,23 +182,18 @@ defmodule ToweropsWeb.InsightsLive.Index do
   end
 
   @doc false
-  def urgency_classes("critical"),
-    do: "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"
-
-  def urgency_classes("warning"), do: "bg-wheat-100 text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400"
-  def urgency_classes("info"), do: "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-400"
-  def urgency_classes(_), do: "bg-cool-steel-100 text-cool-steel-600 dark:bg-cool-steel-800 dark:text-cool-steel-400"
+  def urgency_classes("critical"), do: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
+  def urgency_classes("warning"), do: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"
+  def urgency_classes("info"), do: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
+  def urgency_classes(_), do: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
 
   @doc false
-  def source_classes("preseem"), do: "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-400"
+  def source_classes("preseem"), do: "bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-400"
   def source_classes("gaiia"), do: "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400"
   def source_classes("snmp"), do: "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400"
-
-  def source_classes("system"),
-    do: "bg-cool-steel-100 text-cool-steel-800 dark:bg-cool-steel-700 dark:text-cool-steel-300"
-
+  def source_classes("system"), do: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300"
   def source_classes("ai"), do: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400"
-  def source_classes(_), do: "bg-cool-steel-100 text-cool-steel-600 dark:bg-cool-steel-800 dark:text-cool-steel-400"
+  def source_classes(_), do: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
 
   @doc """
   Display label for a source. Acronyms render uppercase; everything else
diff --git a/lib/towerops_web/live/insights_live/index.html.heex b/lib/towerops_web/live/insights_live/index.html.heex
index 8e3253bf..5d04d8ca 100644
--- a/lib/towerops_web/live/insights_live/index.html.heex
+++ b/lib/towerops_web/live/insights_live/index.html.heex
@@ -4,12 +4,12 @@
   active_page="insights"
   unresolved_alert_count={assigns[:unresolved_alert_count] || 0}
 >
-  <div class="flex items-start justify-between gap-4 border-b border-cool-steel-200 pb-5 dark:border-white/5">
+  <div class="flex items-start justify-between gap-4 border-b border-gray-200 pb-5 dark:border-white/5">
     <div>
-      <h1 class="text-3xl font-semibold tracking-tight text-cool-steel-900 dark:text-white">
+      <h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
         {t("Network Insights")}
       </h1>
-      <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+      <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
         {t("Proactive network health observations from all sources.")}
       </p>
     </div>
@@ -20,7 +20,7 @@
         id="regenerate-insights-btn"
         phx-click="regenerate_insights"
         data-confirm={t("Queue insight regeneration jobs for all sources?")}
-        class="inline-flex items-center gap-1.5 rounded-md bg-cerulean-600 px-3 py-2 text-sm font-medium text-white shadow-xs hover:bg-cerulean-500 dark:bg-cerulean-500 dark:hover:bg-cerulean-400"
+        class="inline-flex items-center gap-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-medium text-white shadow-xs hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400"
       >
         <.icon name="hero-arrow-path" class="h-4 w-4" />
         {t("Regenerate insights")}
@@ -29,7 +29,7 @@
   </div>
 
   <%!-- Filter bar --%>
-  <div class="mt-6 flex flex-wrap items-center gap-4 border-b border-cool-steel-200 pb-4 dark:border-white/10">
+  <div class="mt-6 flex flex-wrap items-center gap-4 border-b border-gray-200 pb-4 dark:border-white/10">
     <%!-- Status filter tabs --%>
     <nav class="flex space-x-4">
       <.link
@@ -40,10 +40,9 @@
         class={[
           "rounded-md px-3 py-1.5 text-sm font-medium",
           if(@filter_status == "active",
-            do:
-              "bg-cerulean-100 text-cerulean-700 dark:bg-cerulean-900/30 dark:text-cerulean-400",
+            do: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400",
             else:
-              "text-cool-steel-500 hover:bg-cool-steel-100 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:bg-white/10 dark:hover:text-cool-steel-300"
+              "text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-300"
           )
         ]}
       >
@@ -57,10 +56,9 @@
         class={[
           "rounded-md px-3 py-1.5 text-sm font-medium",
           if(@filter_status == "dismissed",
-            do:
-              "bg-cerulean-100 text-cerulean-700 dark:bg-cerulean-900/30 dark:text-cerulean-400",
+            do: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400",
             else:
-              "text-cool-steel-500 hover:bg-cool-steel-100 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:bg-white/10 dark:hover:text-cool-steel-300"
+              "text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-300"
           )
         ]}
       >
@@ -69,10 +67,8 @@
     </nav>
 
     <%!-- Source filter pills --%>
-    <div class="flex items-center gap-2 border-l border-cool-steel-200 pl-4 dark:border-white/10">
-      <span class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400">
-        Source:
-      </span>
+    <div class="flex items-center gap-2 border-l border-gray-200 pl-4 dark:border-white/10">
+      <span class="text-xs font-medium text-gray-500 dark:text-gray-400">Source:</span>
       <.link
         id="filter-source-all"
         patch={
@@ -81,9 +77,8 @@
         class={[
           "rounded-md px-2 py-1 text-xs font-medium",
           if(is_nil(@filter_source),
-            do: "bg-cool-steel-200 text-cool-steel-800 dark:bg-white/20 dark:text-white",
-            else:
-              "text-cool-steel-500 hover:bg-cool-steel-100 dark:text-cool-steel-400 dark:hover:bg-white/10"
+            do: "bg-gray-200 text-gray-800 dark:bg-white/20 dark:text-white",
+            else: "text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10"
           )
         ]}
       >
@@ -98,9 +93,8 @@
         class={[
           "rounded-md px-2 py-1 text-xs font-medium",
           if(@filter_source == source,
-            do: "bg-cool-steel-200 text-cool-steel-800 dark:bg-white/20 dark:text-white",
-            else:
-              "text-cool-steel-500 hover:bg-cool-steel-100 dark:text-cool-steel-400 dark:hover:bg-white/10"
+            do: "bg-gray-200 text-gray-800 dark:bg-white/20 dark:text-white",
+            else: "text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10"
           )
         ]}
       >
@@ -109,10 +103,8 @@
     </div>
 
     <%!-- Urgency filter --%>
-    <div class="flex items-center gap-2 border-l border-cool-steel-200 pl-4 dark:border-white/10">
-      <span class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400">
-        Urgency:
-      </span>
+    <div class="flex items-center gap-2 border-l border-gray-200 pl-4 dark:border-white/10">
+      <span class="text-xs font-medium text-gray-500 dark:text-gray-400">Urgency:</span>
       <.link
         id="filter-urgency-all"
         patch={
@@ -121,9 +113,8 @@
         class={[
           "rounded-md px-2 py-1 text-xs font-medium",
           if(is_nil(@filter_urgency),
-            do: "bg-cool-steel-200 text-cool-steel-800 dark:bg-white/20 dark:text-white",
-            else:
-              "text-cool-steel-500 hover:bg-cool-steel-100 dark:text-cool-steel-400 dark:hover:bg-white/10"
+            do: "bg-gray-200 text-gray-800 dark:bg-white/20 dark:text-white",
+            else: "text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10"
           )
         ]}
       >
@@ -132,11 +123,10 @@
       <.link
         :for={
           {urgency, classes} <- [
-            {"critical",
-             "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"},
-            {"warning", "bg-wheat-100 text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400"},
-            {"info",
-             "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-400"}
+            {"critical", "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"},
+            {"warning",
+             "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"},
+            {"info", "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"}
           ]
         }
         id={"filter-urgency-#{urgency}"}
@@ -147,8 +137,7 @@
           "rounded-md px-2 py-1 text-xs font-medium capitalize",
           if(@filter_urgency == urgency,
             do: classes,
-            else:
-              "text-cool-steel-500 hover:bg-cool-steel-100 dark:text-cool-steel-400 dark:hover:bg-white/10"
+            else: "text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10"
           )
         ]}
       >
@@ -161,16 +150,16 @@
   <%= if any_selected?(@selected_ids) do %>
     <div
       id="bulk-actions"
-      class="mt-4 flex items-center gap-3 rounded-lg bg-cerulean-50 px-4 py-3 dark:bg-cerulean-900/20"
+      class="mt-4 flex items-center gap-3 rounded-lg bg-indigo-50 px-4 py-3 dark:bg-indigo-900/20"
     >
-      <span class="text-sm font-medium text-cerulean-700 dark:text-cerulean-200">
+      <span class="text-sm font-medium text-indigo-700 dark:text-indigo-200">
         {MapSet.size(@selected_ids)} selected
       </span>
       <button
         type="button"
         id="deselect-all-btn"
         phx-click="deselect_all"
-        class="text-sm text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+        class="text-sm text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
       >
         {t("Deselect All")}
       </button>
@@ -178,7 +167,7 @@
         type="button"
         id="bulk-dismiss-btn"
         phx-click="bulk_dismiss"
-        class="rounded-md bg-cerulean-600 px-3 py-1.5 text-sm font-medium text-white shadow-xs hover:bg-cerulean-500 dark:bg-cerulean-500 dark:hover:bg-cerulean-400"
+        class="rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-medium text-white shadow-xs hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400"
       >
         {t("Dismiss Selected")}
       </button>
@@ -191,16 +180,16 @@
       <div id="empty-state" class="flex items-center justify-center py-8">
         <div class="card shadow-md border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 max-w-md w-full">
           <div class="items-center text-center">
-            <div class="rounded-full bg-wheat-100 dark:bg-wheat-900/40 p-4 mb-2">
+            <div class="rounded-full bg-amber-100 dark:bg-amber-900/40 p-4 mb-2">
               <.icon
                 name="hero-light-bulb-solid"
-                class="h-12 w-12 text-wheat-500 dark:text-wheat-400"
+                class="h-12 w-12 text-amber-500 dark:text-amber-400"
               />
             </div>
-            <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white">
+            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
               {t("No Insights Yet")}
             </h3>
-            <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+            <p class="text-sm text-gray-600 dark:text-gray-400">
               <%= cond do %>
                 <% @filter_status == "dismissed" -> %>
                   {t("No dismissed insights.")}
@@ -227,7 +216,7 @@
           type="button"
           id="select-all-btn"
           phx-click="select_all"
-          class="text-sm text-cool-steel-600 hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+          class="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
         >
           {t("Select All")}
         </button>
@@ -238,11 +227,11 @@
           :for={insight <- @insights}
           id={"insight-#{insight.id}"}
           class={[
-            "rounded-lg border bg-white p-4 transition-shadow hover:shadow-md dark:bg-cool-steel-800/50",
+            "rounded-lg border bg-white p-4 transition-shadow hover:shadow-md dark:bg-gray-800/50",
             if(selected?(@selected_ids, insight.id),
               do:
-                "border-cerulean-300 ring-1 ring-cerulean-200 dark:border-cerulean-600 dark:ring-cerulean-800",
-              else: "border-cool-steel-200 dark:border-white/10"
+                "border-indigo-300 ring-1 ring-indigo-200 dark:border-indigo-600 dark:ring-indigo-800",
+              else: "border-gray-200 dark:border-white/10"
             )
           ]}
         >
@@ -259,9 +248,8 @@
                   "flex h-5 w-5 items-center justify-center rounded border",
                   if(selected?(@selected_ids, insight.id),
                     do:
-                      "border-cerulean-600 bg-cerulean-600 dark:border-cerulean-500 dark:bg-cerulean-500",
-                    else:
-                      "border-cool-steel-300 bg-white dark:border-cool-steel-600 dark:bg-cool-steel-700"
+                      "border-indigo-600 bg-indigo-600 dark:border-indigo-500 dark:bg-indigo-500",
+                    else: "border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-700"
                   )
                 ]}>
                   <%= if selected?(@selected_ids, insight.id) do %>
@@ -290,29 +278,29 @@
 
                   <%!-- AI badge — present on any LLM-enriched insight --%>
                   <%= if insight.llm_enriched_at do %>
-                    <span class="inline-flex items-center rounded-full bg-cerulean-600 px-2 py-0.5 text-xs font-semibold text-white dark:bg-cerulean-500">
+                    <span class="inline-flex items-center rounded-full bg-blue-600 px-2 py-0.5 text-xs font-semibold text-white dark:bg-blue-500">
                       AI
                     </span>
                   <% end %>
 
                   <%!-- Type badge --%>
-                  <span class="inline-flex items-center rounded-full bg-cool-steel-100 px-2 py-0.5 text-xs font-medium text-cool-steel-600 dark:bg-cool-steel-700 dark:text-cool-steel-300">
+                  <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
                     {String.replace(insight.type, "_", " ")}
                   </span>
                 </div>
 
-                <h3 class="mt-1 text-sm font-semibold text-cool-steel-900 dark:text-white">
+                <h3 class="mt-1 text-sm font-semibold text-gray-900 dark:text-white">
                   {insight.title}
                 </h3>
 
                 <%= if insight.description do %>
-                  <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                  <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                     {insight.description}
                   </p>
                 <% end %>
 
                 <%= if insight.llm_summary do %>
-                  <div class="mt-2 rounded-md border border-cerulean-200 bg-cerulean-50 px-3 py-2 text-sm text-cerulean-900 dark:border-cerulean-900/40 dark:bg-cerulean-950/40 dark:text-cerulean-100">
+                  <div class="mt-2 rounded-md border border-blue-200 bg-blue-50 px-3 py-2 text-sm text-blue-900 dark:border-blue-900/40 dark:bg-blue-950/40 dark:text-blue-100">
                     <p class="font-medium">{t("Summary")}</p>
                     <p>{insight.llm_summary}</p>
                     <%= if insight.recommended_action do %>
@@ -321,7 +309,7 @@
                         {insight.recommended_action}
                       </p>
                     <% end %>
-                    <p class="mt-1 text-xs text-cerulean-700 dark:text-cerulean-300">
+                    <p class="mt-1 text-xs text-blue-700 dark:text-blue-300">
                       AI-generated
                     </p>
                   </div>
@@ -329,8 +317,8 @@
 
                 <%!-- Affected devices list (from metadata) --%>
                 <%= if insight.metadata["device_names"] && length(insight.metadata["device_names"]) > 0 do %>
-                  <div class="mt-2 rounded-md bg-cool-steel-50 p-3 dark:bg-white/5">
-                    <p class="text-xs font-medium text-cool-steel-700 dark:text-cool-steel-300">
+                  <div class="mt-2 rounded-md bg-gray-50 p-3 dark:bg-white/5">
+                    <p class="text-xs font-medium text-gray-700 dark:text-gray-300">
                       {t("Affected devices:")}
                     </p>
                     <div class="mt-1.5 flex flex-wrap gap-1.5">
@@ -340,18 +328,18 @@
                             navigate={
                               ~p"/devices/#{Enum.at(insight.metadata["device_ids"], idx)}"
                             }
-                            class="inline-flex items-center rounded-md bg-white px-2 py-0.5 text-xs font-medium text-cerulean-700 ring-1 ring-inset ring-cerulean-700/10 hover:bg-cerulean-50 dark:bg-cerulean-900/20 dark:text-cerulean-400 dark:ring-cerulean-400/20 dark:hover:bg-cerulean-900/40"
+                            class="inline-flex items-center rounded-md bg-white px-2 py-0.5 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-700/10 hover:bg-indigo-50 dark:bg-indigo-900/20 dark:text-indigo-400 dark:ring-indigo-400/20 dark:hover:bg-indigo-900/40"
                           >
                             {name || "Unnamed"}
                           </.link>
                         <% else %>
-                          <span class="inline-flex items-center rounded-md bg-white px-2 py-0.5 text-xs font-medium text-cool-steel-600 ring-1 ring-inset ring-cool-steel-500/10 dark:bg-white/10 dark:text-cool-steel-300 dark:ring-white/10">
+                          <span class="inline-flex items-center rounded-md bg-white px-2 py-0.5 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 dark:bg-white/10 dark:text-gray-300 dark:ring-white/10">
                             {name || "Unnamed"}
                           </span>
                         <% end %>
                       <% end %>
                       <%= if insight.metadata["count"] && insight.metadata["count"] > length(insight.metadata["device_names"]) do %>
-                        <span class="inline-flex items-center rounded-md bg-cool-steel-100 px-2 py-0.5 text-xs text-cool-steel-500 dark:bg-white/10 dark:text-cool-steel-400">
+                        <span class="inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 text-xs text-gray-500 dark:bg-white/10 dark:text-gray-400">
                           +{insight.metadata["count"] - length(insight.metadata["device_names"])} more
                         </span>
                       <% end %>
@@ -361,8 +349,8 @@
 
                 <%!-- Actionable recommendations --%>
                 <%= if insight.source == "gaiia" && insight.metadata["finding_type"] == "untracked" do %>
-                  <div class="mt-3 rounded-md border border-cerulean-200 bg-cerulean-50 p-3 dark:border-cerulean-800 dark:bg-cerulean-900/20">
-                    <p class="text-xs font-medium text-cerulean-800 dark:text-cerulean-300 mb-2">
+                  <div class="mt-3 rounded-md border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-900/20">
+                    <p class="text-xs font-medium text-blue-800 dark:text-blue-300 mb-2">
                       <.icon name="hero-light-bulb" class="h-3.5 w-3.5 inline" />
                       {t("To fix this:")}
                     </p>
@@ -371,7 +359,7 @@
                         navigate={
                           ~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/mapping"
                         }
-                        class="inline-flex items-center gap-1 rounded-md bg-cerulean-600 px-2.5 py-1.5 text-xs font-medium text-white shadow-xs hover:bg-cerulean-700"
+                        class="inline-flex items-center gap-1 rounded-md bg-blue-600 px-2.5 py-1.5 text-xs font-medium text-white shadow-xs hover:bg-blue-700"
                       >
                         <.icon name="hero-arrows-right-left" class="h-3.5 w-3.5" />
                         {t("Link devices to Gaiia")}
@@ -380,7 +368,7 @@
                         navigate={
                           ~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/reconciliation"
                         }
-                        class="inline-flex items-center gap-1 rounded-md bg-white px-2.5 py-1.5 text-xs font-medium text-cool-steel-700 shadow-xs ring-1 ring-inset ring-cool-steel-300 hover:bg-cool-steel-50 dark:bg-white/10 dark:text-cool-steel-300 dark:ring-white/10 dark:hover:bg-white/20"
+                        class="inline-flex items-center gap-1 rounded-md bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-white/10 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-white/20"
                       >
                         <.icon name="hero-table-cells" class="h-3.5 w-3.5" />
                         {t("View comparison report")}
@@ -390,8 +378,8 @@
                 <% end %>
 
                 <%= if insight.source == "gaiia" && insight.metadata["finding_type"] == "ghost" do %>
-                  <div class="mt-3 rounded-md border border-wheat-200 bg-wheat-50 p-3 dark:border-wheat-800 dark:bg-wheat-900/20">
-                    <p class="text-xs font-medium text-wheat-800 dark:text-wheat-200 mb-2">
+                  <div class="mt-3 rounded-md border border-amber-200 bg-amber-50 p-3 dark:border-amber-800 dark:bg-amber-900/20">
+                    <p class="text-xs font-medium text-amber-800 dark:text-amber-200 mb-2">
                       <.icon name="hero-light-bulb" class="h-3.5 w-3.5 inline" />
                       {t("To fix this:")}
                     </p>
@@ -400,7 +388,7 @@
                         navigate={
                           ~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/mapping"
                         }
-                        class="inline-flex items-center gap-1 rounded-md bg-wheat-600 px-2.5 py-1.5 text-xs font-medium text-white shadow-xs hover:bg-wheat-700"
+                        class="inline-flex items-center gap-1 rounded-md bg-amber-600 px-2.5 py-1.5 text-xs font-medium text-white shadow-xs hover:bg-amber-700"
                       >
                         <.icon name="hero-trash" class="h-3.5 w-3.5" />
                         {t("Remove stale device links")}
@@ -410,8 +398,8 @@
                 <% end %>
 
                 <%= if insight.source == "gaiia" && insight.metadata["finding_type"] == "mismatch" do %>
-                  <div class="mt-3 rounded-md border border-cerulean-200 bg-cerulean-50 p-3 dark:border-cerulean-800 dark:bg-cerulean-900/20">
-                    <p class="text-xs font-medium text-cerulean-800 dark:text-cerulean-300 mb-2">
+                  <div class="mt-3 rounded-md border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-900/20">
+                    <p class="text-xs font-medium text-blue-800 dark:text-blue-300 mb-2">
                       <.icon name="hero-light-bulb" class="h-3.5 w-3.5 inline" />
                       {t("To fix this:")}
                     </p>
@@ -420,7 +408,7 @@
                         navigate={
                           ~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/reconciliation"
                         }
-                        class="inline-flex items-center gap-1 rounded-md bg-cerulean-600 px-2.5 py-1.5 text-xs font-medium text-white shadow-xs hover:bg-cerulean-700"
+                        class="inline-flex items-center gap-1 rounded-md bg-blue-600 px-2.5 py-1.5 text-xs font-medium text-white shadow-xs hover:bg-blue-700"
                       >
                         <.icon name="hero-table-cells" class="h-3.5 w-3.5" />
                         {t("Review conflicting data")}
@@ -559,24 +547,24 @@
                 <% end %>
 
                 <%= if insight.type == "upstream_degradation" do %>
-                  <div class="mt-3 rounded-md border border-cerulean-200 bg-cerulean-50 p-3 dark:border-cerulean-700 dark:bg-cerulean-950/40">
+                  <div class="mt-3 rounded-md border border-indigo-200 bg-indigo-50 p-3 dark:border-indigo-700 dark:bg-indigo-950/40">
                     <div class="flex flex-wrap items-center gap-4 text-sm">
                       <div class="flex flex-col">
-                        <span class="text-xs font-medium text-cerulean-700 dark:text-cerulean-200">
+                        <span class="text-xs font-medium text-indigo-700 dark:text-indigo-200">
                           {t("Degraded APs")}
                         </span>
-                        <span class="font-mono text-base font-semibold text-cerulean-900 dark:text-white">
+                        <span class="font-mono text-base font-semibold text-indigo-900 dark:text-white">
                           {insight.metadata["degraded_ap_count"]} / {insight.metadata[
                             "total_ap_count"
                           ]}
                         </span>
                       </div>
-                      <span class="ml-auto rounded-md bg-cerulean-600 px-2 py-1 text-xs font-semibold text-white dark:bg-cerulean-500">
+                      <span class="ml-auto rounded-md bg-indigo-600 px-2 py-1 text-xs font-semibold text-white dark:bg-indigo-500">
                         {t("Investigate upstream first")}
                       </span>
                     </div>
                     <%= if is_list(insight.metadata["degraded_aps"]) do %>
-                      <ul class="mt-2 space-y-1 text-xs text-cerulean-900 dark:text-cerulean-50">
+                      <ul class="mt-2 space-y-1 text-xs text-indigo-900 dark:text-indigo-50">
                         <li
                           :for={ap <- insight.metadata["degraded_aps"]}
                           class="flex items-center justify-between gap-2"
@@ -585,7 +573,7 @@
                             <%= if ap["device_id"] do %>
                               <.link
                                 navigate={~p"/devices/#{ap["device_id"]}"}
-                                class="text-cerulean-700 underline hover:text-cerulean-900 dark:text-cerulean-200 dark:hover:text-white"
+                                class="text-indigo-700 underline hover:text-indigo-900 dark:text-indigo-200 dark:hover:text-white"
                               >
                                 {ap["name"] || "Unnamed"}
                               </.link>
@@ -593,7 +581,7 @@
                               {ap["name"] || "Unnamed"}
                             <% end %>
                           </span>
-                          <span class="font-mono text-cerulean-800 dark:text-cerulean-100">
+                          <span class="font-mono text-indigo-800 dark:text-indigo-100">
                             QoE {Float.round(ap["qoe_score"] / 1.0, 1)}
                           </span>
                         </li>
@@ -603,33 +591,33 @@
                 <% end %>
 
                 <%= if insight.type == "device_overheating" do %>
-                  <div class="mt-3 rounded-md border border-sweet-salmon-200 bg-sweet-salmon-50 p-3 dark:border-sweet-salmon-800 dark:bg-sweet-salmon-900/20">
+                  <div class="mt-3 rounded-md border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-900/20">
                     <div class="flex flex-wrap items-center gap-4 text-sm">
                       <div class="flex flex-col">
-                        <span class="text-xs text-sweet-salmon-700 dark:text-sweet-salmon-200">
+                        <span class="text-xs text-red-700 dark:text-red-200">
                           {t("Hottest sensor")}
                         </span>
-                        <span class="font-mono text-base font-semibold text-sweet-salmon-900 dark:text-sweet-salmon-100">
+                        <span class="font-mono text-base font-semibold text-red-900 dark:text-red-100">
                           {insight.metadata["temperature_c"]} °C
                         </span>
                         <%= if insight.metadata["sensor_descr"] do %>
-                          <span class="text-xs text-sweet-salmon-700 dark:text-sweet-salmon-200">
+                          <span class="text-xs text-red-700 dark:text-red-200">
                             {insight.metadata["sensor_descr"]}
                           </span>
                         <% end %>
                       </div>
                       <%= if insight.metadata["qoe_score"] do %>
                         <div class="flex flex-col">
-                          <span class="text-xs text-sweet-salmon-700 dark:text-sweet-salmon-200">
+                          <span class="text-xs text-red-700 dark:text-red-200">
                             {t("Linked QoE")}
                           </span>
-                          <span class="font-mono text-base font-semibold text-sweet-salmon-900 dark:text-sweet-salmon-100">
+                          <span class="font-mono text-base font-semibold text-red-900 dark:text-red-100">
                             {Float.round(insight.metadata["qoe_score"] / 1.0, 1)}
                           </span>
                         </div>
                       <% end %>
                       <%= if is_number(insight.metadata["temperature_c"]) and insight.metadata["temperature_c"] >= 75 do %>
-                        <span class="ml-auto rounded-md bg-sweet-salmon-600 px-2 py-1 text-xs font-semibold text-white dark:bg-sweet-salmon-500">
+                        <span class="ml-auto rounded-md bg-red-600 px-2 py-1 text-xs font-semibold text-white dark:bg-red-500">
                           {t("Above manufacturer spec")}
                         </span>
                       <% end %>
@@ -638,42 +626,42 @@
                 <% end %>
 
                 <%= if insight.type == "own_fleet_channel_conflict" do %>
-                  <div class="mt-3 rounded-md border border-wheat-200 bg-wheat-50 p-3 dark:border-wheat-800 dark:bg-wheat-900/20">
+                  <div class="mt-3 rounded-md border border-amber-200 bg-amber-50 p-3 dark:border-amber-800 dark:bg-amber-900/20">
                     <div class="flex items-center gap-3 text-sm">
                       <div class="flex flex-col">
-                        <span class="text-xs text-wheat-700 dark:text-wheat-200">
+                        <span class="text-xs text-amber-700 dark:text-amber-200">
                           {t("Channel")}
                         </span>
-                        <span class="font-mono text-base font-semibold text-wheat-900 dark:text-wheat-100">
+                        <span class="font-mono text-base font-semibold text-amber-900 dark:text-amber-100">
                           {insight.metadata["channel"]}
                           <%= if insight.metadata["frequency_mhz"] do %>
-                            <span class="text-xs font-normal text-wheat-700 dark:text-wheat-200">
+                            <span class="text-xs font-normal text-amber-700 dark:text-amber-200">
                               ({insight.metadata["frequency_mhz"]} MHz)
                             </span>
                           <% end %>
                         </span>
                       </div>
                       <div class="flex flex-col">
-                        <span class="text-xs text-wheat-700 dark:text-wheat-200">
+                        <span class="text-xs text-amber-700 dark:text-amber-200">
                           {t("APs sharing")}
                         </span>
-                        <span class="font-mono text-base font-semibold text-wheat-900 dark:text-wheat-100">
+                        <span class="font-mono text-base font-semibold text-amber-900 dark:text-amber-100">
                           {insight.metadata["ap_count"]}
                         </span>
                       </div>
                       <%= if insight.metadata["has_critical_rf"] do %>
-                        <span class="ml-auto rounded-md bg-sweet-salmon-100 px-2 py-1 text-xs font-medium text-sweet-salmon-800 dark:bg-sweet-salmon-900/40 dark:text-sweet-salmon-200">
+                        <span class="ml-auto rounded-md bg-red-100 px-2 py-1 text-xs font-medium text-red-800 dark:bg-red-900/40 dark:text-red-200">
                           {t("Critical RF environment detected")}
                         </span>
                       <% end %>
                     </div>
                     <%= if is_list(insight.metadata["aps"]) and insight.metadata["aps"] != [] do %>
                       <div class="mt-3 overflow-x-auto">
-                        <p class="text-xs font-medium text-wheat-800 dark:text-wheat-200">
+                        <p class="text-xs font-medium text-amber-800 dark:text-amber-200">
                           {t("Conflicting APs")}
                         </p>
-                        <table class="mt-1 w-full text-left text-xs text-wheat-900 dark:text-wheat-100">
-                          <thead class="text-[11px] font-medium text-wheat-700 dark:text-wheat-200">
+                        <table class="mt-1 w-full text-left text-xs text-amber-900 dark:text-amber-100">
+                          <thead class="text-[11px] font-medium text-amber-700 dark:text-amber-200">
                             <tr>
                               <th class="py-1 pr-3">{t("AP")}</th>
                               <th class="py-1 pr-3">{t("Width")}</th>
@@ -686,7 +674,7 @@
                           <tbody>
                             <tr
                               :for={ap <- insight.metadata["aps"]}
-                              class="border-t border-wheat-200/50 dark:border-wheat-800/40"
+                              class="border-t border-amber-200/50 dark:border-amber-800/40"
                             >
                               <td class="py-1 pr-3">
                                 <%= if ap["device_id"] do %>
@@ -700,7 +688,7 @@
                                   {ap["name"] || "Unnamed"}
                                 <% end %>
                                 <%= if ap["rf_severity"] == "critical" do %>
-                                  <span class="ml-1 rounded bg-sweet-salmon-600 px-1 py-0.5 text-[10px] font-semibold text-white dark:bg-sweet-salmon-500">
+                                  <span class="ml-1 rounded bg-red-600 px-1 py-0.5 text-[10px] font-semibold text-white dark:bg-red-500">
                                     crit
                                   </span>
                                 <% end %>
@@ -790,7 +778,7 @@
                   </div>
                 <% end %>
 
-                <div class="mt-2 flex flex-wrap items-center gap-3 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                <div class="mt-2 flex flex-wrap items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
                   <%!-- Access point --%>
                   <%= if insight.preseem_access_point do %>
                     <span class="flex items-center gap-1">
@@ -803,7 +791,7 @@
                   <%= if insight.device do %>
                     <.link
                       navigate={~p"/devices/#{insight.device.id}"}
-                      class="flex items-center gap-1 text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                      class="flex items-center gap-1 text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
                     >
                       <.icon name="hero-server" class="h-3.5 w-3.5" />
                       {insight.device.name || "Device"}
@@ -829,7 +817,7 @@
                 type="button"
                 phx-click="dismiss"
                 phx-value-id={insight.id}
-                class="flex-shrink-0 rounded-md px-2.5 py-1.5 text-xs font-medium text-cool-steel-600 hover:bg-cool-steel-100 hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:bg-white/10 dark:hover:text-white"
+                class="flex-shrink-0 rounded-md px-2.5 py-1.5 text-xs font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-white"
               >
                 {t("Dismiss")}
               </button>
diff --git a/lib/towerops_web/live/maintenance_live/form.html.heex b/lib/towerops_web/live/maintenance_live/form.html.heex
index 7a86289a..296afed9 100644
--- a/lib/towerops_web/live/maintenance_live/form.html.heex
+++ b/lib/towerops_web/live/maintenance_live/form.html.heex
@@ -7,16 +7,16 @@
   <div class="mb-6">
     <.link
       navigate={~p"/maintenance"}
-      class="inline-flex items-center gap-1 text-sm text-cool-steel-500 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:text-cool-steel-200"
+      class="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
     >
       <.icon name="hero-arrow-left" class="h-4 w-4" />
       {t("Back to Maintenance Windows")}
     </.link>
   </div>
 
-  <h1 class="text-xl font-bold text-cool-steel-900 dark:text-white mb-6">{@page_title}</h1>
+  <h1 class="text-xl font-bold text-gray-900 dark:text-white mb-6">{@page_title}</h1>
 
-  <div class="rounded-lg border border-cool-steel-200 dark:border-white/10 bg-white dark:bg-cool-steel-900 p-6">
+  <div class="rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-gray-900 p-6">
     <.form
       for={@form}
       phx-change="validate"
@@ -44,7 +44,7 @@
 
         <%!-- Scope --%>
         <div>
-          <label class="block text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300 mb-2">
+          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
             {t("Scope")}
           </label>
           <div class="flex items-center gap-4 mb-3">
@@ -56,11 +56,9 @@
                 checked={@scope_type == "org"}
                 phx-click="change_scope"
                 phx-value-scope_type="org"
-                class="text-cerulean-600 focus:ring-cerulean-500 dark:bg-cool-steel-800 dark:border-white/10"
+                class="text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-white/10"
               />
-              <span class="text-sm text-cool-steel-700 dark:text-cool-steel-300">
-                {t("Org-wide")}
-              </span>
+              <span class="text-sm text-gray-700 dark:text-gray-300">{t("Org-wide")}</span>
             </label>
             <label class="inline-flex items-center gap-2 cursor-pointer">
               <input
@@ -70,11 +68,9 @@
                 checked={@scope_type == "site"}
                 phx-click="change_scope"
                 phx-value-scope_type="site"
-                class="text-cerulean-600 focus:ring-cerulean-500 dark:bg-cool-steel-800 dark:border-white/10"
+                class="text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-white/10"
               />
-              <span class="text-sm text-cool-steel-700 dark:text-cool-steel-300">
-                {t("Site")}
-              </span>
+              <span class="text-sm text-gray-700 dark:text-gray-300">{t("Site")}</span>
             </label>
             <label class="inline-flex items-center gap-2 cursor-pointer">
               <input
@@ -84,11 +80,9 @@
                 checked={@scope_type == "device"}
                 phx-click="change_scope"
                 phx-value-scope_type="device"
-                class="text-cerulean-600 focus:ring-cerulean-500 dark:bg-cool-steel-800 dark:border-white/10"
+                class="text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-white/10"
               />
-              <span class="text-sm text-cool-steel-700 dark:text-cool-steel-300">
-                {t("Device")}
-              </span>
+              <span class="text-sm text-gray-700 dark:text-gray-300">{t("Device")}</span>
             </label>
           </div>
 
@@ -154,16 +148,16 @@
         <% end %>
 
         <%!-- Submit --%>
-        <div class="flex items-center justify-end gap-3 pt-4 border-t border-cool-steel-200 dark:border-white/10">
+        <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-white/10">
           <.link
             navigate={~p"/maintenance"}
-            class="rounded-lg px-4 py-2 text-sm font-medium text-cool-steel-700 hover:bg-cool-steel-100 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800 transition-colors"
+            class="rounded-lg px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800 transition-colors"
           >
             {t("Cancel")}
           </.link>
           <button
             type="submit"
-            class="rounded-lg bg-cerulean-600 px-4 py-2 text-sm font-semibold text-white hover:bg-cerulean-500 transition-colors"
+            class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500 transition-colors"
           >
             {t("Save")}
           </button>
diff --git a/lib/towerops_web/live/maintenance_live/index.html.heex b/lib/towerops_web/live/maintenance_live/index.html.heex
index ef305a44..def8a287 100644
--- a/lib/towerops_web/live/maintenance_live/index.html.heex
+++ b/lib/towerops_web/live/maintenance_live/index.html.heex
@@ -5,18 +5,16 @@
   unresolved_alert_count={assigns[:unresolved_alert_count] || 0}
 >
   <div class="flex items-center justify-between mb-1">
-    <h1 class="text-xl font-bold text-cool-steel-900 dark:text-white">
-      {t("Maintenance Windows")}
-    </h1>
+    <h1 class="text-xl font-bold text-gray-900 dark:text-white">{t("Maintenance Windows")}</h1>
     <.link
       navigate={~p"/maintenance/new"}
-      class="inline-flex items-center gap-2 rounded-lg bg-cerulean-600 px-4 py-2 text-sm font-semibold text-white hover:bg-cerulean-500 transition-colors"
+      class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500 transition-colors"
     >
       <.icon name="hero-plus" class="h-4 w-4" />
       {t("New Window")}
     </.link>
   </div>
-  <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400 mb-4">
+  <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
     {t("Schedule planned downtime to suppress alerts during maintenance work.")}
   </p>
 
@@ -26,9 +24,9 @@
       patch={~p"/maintenance?filter=all"}
       class={[
         "inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium transition-colors",
-        @filter == "all" && "bg-cool-steel-900 text-white dark:bg-white dark:text-cool-steel-900",
+        @filter == "all" && "bg-gray-900 text-white dark:bg-white dark:text-gray-900",
         @filter != "all" &&
-          "bg-cool-steel-100 text-cool-steel-700 hover:bg-cool-steel-200 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700"
+          "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
       ]}
     >
       {t("All")}
@@ -37,10 +35,9 @@
       patch={~p"/maintenance?filter=active"}
       class={[
         "inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium transition-colors",
-        @filter == "active" &&
-          "bg-cool-steel-900 text-white dark:bg-white dark:text-cool-steel-900",
+        @filter == "active" && "bg-gray-900 text-white dark:bg-white dark:text-gray-900",
         @filter != "active" &&
-          "bg-cool-steel-100 text-cool-steel-700 hover:bg-cool-steel-200 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700"
+          "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
       ]}
     >
       {t("Active")}
@@ -49,10 +46,9 @@
       patch={~p"/maintenance?filter=upcoming"}
       class={[
         "inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium transition-colors",
-        @filter == "upcoming" &&
-          "bg-cool-steel-900 text-white dark:bg-white dark:text-cool-steel-900",
+        @filter == "upcoming" && "bg-gray-900 text-white dark:bg-white dark:text-gray-900",
         @filter != "upcoming" &&
-          "bg-cool-steel-100 text-cool-steel-700 hover:bg-cool-steel-200 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700"
+          "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
       ]}
     >
       {t("Upcoming")}
@@ -61,9 +57,9 @@
       patch={~p"/maintenance?filter=past"}
       class={[
         "inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium transition-colors",
-        @filter == "past" && "bg-cool-steel-900 text-white dark:bg-white dark:text-cool-steel-900",
+        @filter == "past" && "bg-gray-900 text-white dark:bg-white dark:text-gray-900",
         @filter != "past" &&
-          "bg-cool-steel-100 text-cool-steel-700 hover:bg-cool-steel-200 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700"
+          "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
       ]}
     >
       {t("Past")}
@@ -75,51 +71,51 @@
       <div class="text-center">
         <.icon
           name="hero-wrench-screwdriver"
-          class="h-12 w-12 text-cool-steel-300 dark:text-cool-steel-600 mx-auto mb-4"
+          class="h-12 w-12 text-gray-300 dark:text-gray-600 mx-auto mb-4"
         />
-        <h3 class="text-lg font-semibold text-cool-steel-700 dark:text-cool-steel-300">
+        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">
           {t("No maintenance windows")}
         </h3>
-        <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
           {t("Schedule maintenance to suppress alerts during planned work.")}
         </p>
       </div>
     </div>
   <% else %>
-    <div class="overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10">
-      <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-        <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/50">
+    <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
+      <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+        <thead class="bg-gray-50 dark:bg-gray-800/50">
           <tr>
-            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
               {t("Name")}
             </th>
-            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
               {t("Scope")}
             </th>
-            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
               {t("Time Range")}
             </th>
-            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
               {t("Status")}
             </th>
-            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
               {t("Created By")}
             </th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-cool-steel-100 dark:divide-white/5 bg-white dark:bg-cool-steel-900">
+        <tbody class="divide-y divide-gray-100 dark:divide-white/5 bg-white dark:bg-gray-900">
           <%= for window <- @windows do %>
             <tr
-              class="hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800/30 transition-colors cursor-pointer"
+              class="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors cursor-pointer"
               phx-click={JS.navigate(~p"/maintenance/#{window.id}")}
             >
-              <td class="px-4 py-3 text-sm font-medium text-cool-steel-900 dark:text-white">
+              <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">
                 {window.name}
               </td>
-              <td class="px-4 py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                 {scope_label(window)}
               </td>
-              <td class="px-4 py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400 whitespace-nowrap">
+              <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap">
                 {format_datetime(window.starts_at, @timezone)} — {format_datetime(
                   window.ends_at,
                   @timezone
@@ -132,14 +128,14 @@
                   status == :active &&
                     "bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300",
                   status == :upcoming &&
-                    "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/40 dark:text-cerulean-300",
+                    "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
                   status == :past &&
-                    "bg-cool-steel-100 text-cool-steel-600 dark:bg-cool-steel-800 dark:text-cool-steel-400"
+                    "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
                 ]}>
                   {status_label(status)}
                 </span>
               </td>
-              <td class="px-4 py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                 {if window.created_by, do: window.created_by.email, else: "—"}
               </td>
             </tr>
diff --git a/lib/towerops_web/live/maintenance_live/show.html.heex b/lib/towerops_web/live/maintenance_live/show.html.heex
index d9b1fd60..94601102 100644
--- a/lib/towerops_web/live/maintenance_live/show.html.heex
+++ b/lib/towerops_web/live/maintenance_live/show.html.heex
@@ -7,7 +7,7 @@
   <div class="mb-6">
     <.link
       navigate={~p"/maintenance"}
-      class="inline-flex items-center gap-1 text-sm text-cool-steel-500 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:text-cool-steel-200"
+      class="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
     >
       <.icon name="hero-arrow-left" class="h-4 w-4" />
       {t("Back to Maintenance Windows")}
@@ -35,15 +35,13 @@
 
   <div class="flex items-start justify-between mb-6">
     <div>
-      <h1 class="text-2xl font-bold text-cool-steel-900 dark:text-white">{@window.name}</h1>
+      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{@window.name}</h1>
       <span class={[
         "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium mt-2",
         status == :active &&
           "bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300",
-        status == :upcoming &&
-          "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/40 dark:text-cerulean-300",
-        status == :past &&
-          "bg-cool-steel-100 text-cool-steel-600 dark:bg-cool-steel-800 dark:text-cool-steel-400"
+        status == :upcoming && "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
+        status == :past && "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
       ]}>
         {status_label(status)}
       </span>
@@ -51,7 +49,7 @@
     <div class="flex items-center gap-2">
       <.link
         navigate={~p"/maintenance/#{@window.id}/edit"}
-        class="inline-flex items-center gap-2 rounded-lg bg-cool-steel-100 px-4 py-2 text-sm font-medium text-cool-steel-700 hover:bg-cool-steel-200 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700 transition-colors"
+        class="inline-flex items-center gap-2 rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors"
       >
         <.icon name="hero-pencil" class="h-4 w-4" />
         {t("Edit")}
@@ -60,7 +58,7 @@
         type="button"
         phx-click="delete"
         data-confirm={t("Are you sure you want to delete this maintenance window?")}
-        class="inline-flex items-center gap-2 rounded-lg bg-sweet-salmon-100 px-4 py-2 text-sm font-medium text-sweet-salmon-700 hover:bg-sweet-salmon-200 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-300 dark:hover:bg-sweet-salmon-900/50 transition-colors"
+        class="inline-flex items-center gap-2 rounded-lg bg-red-100 px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-200 dark:bg-red-900/30 dark:text-red-300 dark:hover:bg-red-900/50 transition-colors"
       >
         <.icon name="hero-trash" class="h-4 w-4" />
         {t("Delete")}
@@ -68,14 +66,14 @@
     </div>
   </div>
 
-  <div class="rounded-lg border border-cool-steel-200 dark:border-white/10 bg-white dark:bg-cool-steel-900 divide-y divide-cool-steel-200 dark:divide-white/10">
+  <div class="rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-white/10">
     <%!-- Reason --%>
     <%= if @window.reason do %>
       <div class="px-6 py-4">
-        <dt class="text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 mb-1">
+        <dt class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-1">
           {t("Reason")}
         </dt>
-        <dd class="text-sm text-cool-steel-900 dark:text-white whitespace-pre-wrap">
+        <dd class="text-sm text-gray-900 dark:text-white whitespace-pre-wrap">
           {@window.reason}
         </dd>
       </div>
@@ -83,18 +81,18 @@
 
     <%!-- Scope --%>
     <div class="px-6 py-4">
-      <dt class="text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 mb-1">
+      <dt class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-1">
         {t("Scope")}
       </dt>
-      <dd class="text-sm text-cool-steel-900 dark:text-white">{scope_label(@window)}</dd>
+      <dd class="text-sm text-gray-900 dark:text-white">{scope_label(@window)}</dd>
     </div>
 
     <%!-- Time Range --%>
     <div class="px-6 py-4">
-      <dt class="text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 mb-1">
+      <dt class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-1">
         {t("Time Range")}
       </dt>
-      <dd class="text-sm text-cool-steel-900 dark:text-white">
+      <dd class="text-sm text-gray-900 dark:text-white">
         {format_datetime(@window.starts_at, @timezone)} — {format_datetime(
           @window.ends_at,
           @timezone
@@ -104,10 +102,10 @@
 
     <%!-- Recurring --%>
     <div class="px-6 py-4">
-      <dt class="text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 mb-1">
+      <dt class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-1">
         {t("Recurring")}
       </dt>
-      <dd class="text-sm text-cool-steel-900 dark:text-white">
+      <dd class="text-sm text-gray-900 dark:text-white">
         <%= if @window.recurring do %>
           {t("Yes")} — {@window.recurrence_rule || t("No rule specified")}
         <% else %>
@@ -118,16 +116,16 @@
 
     <%!-- Suppress Alerts --%>
     <div class="px-6 py-4">
-      <dt class="text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 mb-1">
+      <dt class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-1">
         {t("Suppress Alerts")}
       </dt>
-      <dd class="text-sm text-cool-steel-900 dark:text-white">
+      <dd class="text-sm text-gray-900 dark:text-white">
         <%= if @window.suppress_alerts do %>
           <span class="inline-flex items-center gap-1 text-green-700 dark:text-green-400">
             <.icon name="hero-check-circle" class="h-4 w-4" /> {t("Yes")}
           </span>
         <% else %>
-          <span class="inline-flex items-center gap-1 text-cool-steel-500 dark:text-cool-steel-400">
+          <span class="inline-flex items-center gap-1 text-gray-500 dark:text-gray-400">
             <.icon name="hero-x-circle" class="h-4 w-4" /> {t("No")}
           </span>
         <% end %>
@@ -136,10 +134,10 @@
 
     <%!-- Created By --%>
     <div class="px-6 py-4">
-      <dt class="text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 mb-1">
+      <dt class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-1">
         {t("Created By")}
       </dt>
-      <dd class="text-sm text-cool-steel-900 dark:text-white">
+      <dd class="text-sm text-gray-900 dark:text-white">
         {if @window.created_by, do: @window.created_by.email, else: "—"}
       </dd>
     </div>
diff --git a/lib/towerops_web/live/map_live/index.html.heex b/lib/towerops_web/live/map_live/index.html.heex
index 53f5ff76..13c4bacd 100644
--- a/lib/towerops_web/live/map_live/index.html.heex
+++ b/lib/towerops_web/live/map_live/index.html.heex
@@ -7,7 +7,7 @@
   <.header>
     <span class="flex items-center gap-2">
       {t("Sites Map")}
-      <span class="inline-flex items-center rounded-full bg-cerulean-50 px-2 py-0.5 text-xs font-medium text-cerulean-700 ring-1 ring-inset ring-cerulean-700/10 dark:bg-cerulean-400/10 dark:text-cerulean-400 dark:ring-cerulean-400/30">
+      <span class="inline-flex items-center rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30">
         {t("Geographic")}
       </span>
     </span>
@@ -23,19 +23,19 @@
   </.header>
 
   <div class="mb-6">
-    <div class="bg-white dark:bg-cool-steel-800 rounded-lg border border-cool-steel-200 dark:border-white/10 overflow-hidden">
-      <div class="p-4 border-b border-cool-steel-200 dark:border-white/10">
+    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-white/10 overflow-hidden">
+      <div class="p-4 border-b border-gray-200 dark:border-white/10">
         <div class="flex items-center justify-between">
           <div>
-            <h3 class="text-sm font-medium text-cool-steel-900 dark:text-white">
+            <h3 class="text-sm font-medium text-gray-900 dark:text-white">
               {t("Geographic Site Locations")}
             </h3>
-            <p class="mt-1 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
               {t("Click markers to view site details")}
             </p>
           </div>
           <div class="flex items-center space-x-2">
-            <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
+            <span class="text-xs text-gray-500 dark:text-gray-400">
               Showing {length(@sites)} sites with coordinates
             </span>
           </div>
@@ -54,13 +54,8 @@
         <!-- Loading State -->
         <div class="flex items-center justify-center h-full">
           <div class="text-center">
-            <.icon
-              name="hero-arrow-path"
-              class="h-8 w-8 text-cool-steel-400 animate-spin mx-auto"
-            />
-            <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
-              Loading map...
-            </p>
+            <.icon name="hero-arrow-path" class="h-8 w-8 text-gray-400 animate-spin mx-auto" />
+            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Loading map...</p>
           </div>
         </div>
       </div>
@@ -70,32 +65,24 @@
 <!-- Stats and Site List -->
   <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
     <!-- Site Statistics -->
-    <div class="bg-white dark:bg-cool-steel-800 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6">
-      <h3 class="text-lg font-medium text-cool-steel-900 dark:text-white mb-4">
-        {t("Statistics")}
-      </h3>
+    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-white/10 p-6">
+      <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">{t("Statistics")}</h3>
       <div class="space-y-4">
         <div>
-          <div class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
-            Total Sites
-          </div>
-          <div class="text-2xl font-semibold text-cool-steel-900 dark:text-white">
+          <div class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Sites</div>
+          <div class="text-2xl font-semibold text-gray-900 dark:text-white">
             {Sites.count_organization_sites(@organization.id)}
           </div>
         </div>
         <div>
-          <div class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
-            Geocoded Sites
-          </div>
-          <div class="text-2xl font-semibold text-cool-steel-900 dark:text-white">
+          <div class="text-sm font-medium text-gray-500 dark:text-gray-400">Geocoded Sites</div>
+          <div class="text-2xl font-semibold text-gray-900 dark:text-white">
             {length(@sites)}
           </div>
         </div>
         <div>
-          <div class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
-            Coverage
-          </div>
-          <div class="text-lg font-semibold text-cool-steel-900 dark:text-white">
+          <div class="text-sm font-medium text-gray-500 dark:text-gray-400">Coverage</div>
+          <div class="text-lg font-semibold text-gray-900 dark:text-white">
             <%= if Sites.count_organization_sites(@organization.id) > 0 do %>
               {round(length(@sites) / Sites.count_organization_sites(@organization.id) * 100)}%
             <% else %>
@@ -107,47 +94,47 @@
     </div>
     
 <!-- Sites with Coordinates -->
-    <div class="lg:col-span-2 bg-white dark:bg-cool-steel-800 rounded-lg border border-cool-steel-200 dark:border-white/10">
-      <div class="px-6 py-4 border-b border-cool-steel-200 dark:border-white/10">
-        <h3 class="text-lg font-medium text-cool-steel-900 dark:text-white">
+    <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-white/10">
+      <div class="px-6 py-4 border-b border-gray-200 dark:border-white/10">
+        <h3 class="text-lg font-medium text-gray-900 dark:text-white">
           {t("Sites with Geographic Data")}
         </h3>
       </div>
       <div class="max-h-96 overflow-y-auto">
         <%= if length(@sites) > 0 do %>
-          <div class="divide-y divide-cool-steel-200 dark:divide-white/10">
+          <div class="divide-y divide-gray-200 dark:divide-white/10">
             <%= for site <- @sites do %>
-              <div class="px-6 py-4 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-700/50">
+              <div class="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-700/50">
                 <div class="flex items-start justify-between">
                   <div class="flex-1 min-w-0">
                     <div class="flex items-center">
-                      <h4 class="text-sm font-medium text-cool-steel-900 dark:text-white truncate">
+                      <h4 class="text-sm font-medium text-gray-900 dark:text-white truncate">
                         {site.name}
                       </h4>
                       <%= if site.device_count > 0 do %>
-                        <span class="ml-2 inline-flex items-center rounded-full bg-cerulean-100 px-2 py-0.5 text-xs font-medium text-cerulean-700 dark:bg-cerulean-900 dark:text-cerulean-300">
+                        <span class="ml-2 inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700 dark:bg-blue-900 dark:text-blue-300">
                           {site.device_count} devices
                         </span>
                       <% end %>
                     </div>
                     <%= if site.address do %>
-                      <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                         {site.address}
                       </p>
                     <% end %>
                     <%= if site.description do %>
-                      <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                         {site.description}
                       </p>
                     <% end %>
-                    <p class="mt-1 text-xs text-cool-steel-400">
+                    <p class="mt-1 text-xs text-gray-400">
                       {Float.round(site.latitude, 4)}, {Float.round(site.longitude, 4)}
                     </p>
                   </div>
                   <div class="ml-4">
                     <.link
                       navigate={~p"/sites/#{site.id}"}
-                      class="text-cerulean-600 hover:text-cerulean-500 dark:text-cerulean-400 dark:hover:text-cerulean-300 text-sm font-medium"
+                      class="text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 text-sm font-medium"
                     >
                       View →
                     </.link>
@@ -158,11 +145,11 @@
           </div>
         <% else %>
           <div class="px-6 py-8 text-center">
-            <.icon name="hero-map-pin" class="mx-auto h-12 w-12 text-cool-steel-400" />
-            <h3 class="mt-2 text-sm font-medium text-cool-steel-900 dark:text-white">
+            <.icon name="hero-map-pin" class="mx-auto h-12 w-12 text-gray-400" />
+            <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">
               {t("No geocoded sites")}
             </h3>
-            <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
               {t("Add addresses and coordinates to your sites to see them on the map.")}
             </p>
             <div class="mt-4">
diff --git a/lib/towerops_web/live/mikrotik_backup_live/compare.html.heex b/lib/towerops_web/live/mikrotik_backup_live/compare.html.heex
index 86d46f4e..2c30b8d3 100644
--- a/lib/towerops_web/live/mikrotik_backup_live/compare.html.heex
+++ b/lib/towerops_web/live/mikrotik_backup_live/compare.html.heex
@@ -2,38 +2,35 @@
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
     <!-- Header -->
     <div class="mb-6">
-      <nav class="flex items-center gap-2 text-sm text-cool-steel-500 dark:text-cool-steel-400 mb-4">
-        <.link
-          navigate={~p"/devices"}
-          class="hover:text-cool-steel-700 dark:hover:text-cool-steel-300"
-        >
+      <nav class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-4">
+        <.link navigate={~p"/devices"} class="hover:text-gray-700 dark:hover:text-gray-300">
           {t("Devices")}
         </.link>
         <span>/</span>
         <.link
           navigate={~p"/devices/#{@device.id}"}
-          class="hover:text-cool-steel-700 dark:hover:text-cool-steel-300"
+          class="hover:text-gray-700 dark:hover:text-gray-300"
         >
           {@device.name}
         </.link>
         <span>/</span>
         <.link
           navigate={~p"/devices/#{@device.id}?tab=backups"}
-          class="hover:text-cool-steel-700 dark:hover:text-cool-steel-300"
+          class="hover:text-gray-700 dark:hover:text-gray-300"
         >
           {t("Backups")}
         </.link>
         <span>/</span>
-        <span class="text-cool-steel-900 dark:text-white">Compare</span>
+        <span class="text-gray-900 dark:text-white">Compare</span>
       </nav>
 
       <div class="flex items-center justify-between">
-        <h1 class="text-2xl font-bold text-cool-steel-900 dark:text-white">
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
           {t("Compare Configuration Backups")}
         </h1>
         <.link
           navigate={~p"/devices/#{@device.id}?tab=backups"}
-          class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-cool-steel-700 bg-white border border-cool-steel-300 rounded-lg hover:bg-cool-steel-50 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:border-cool-steel-600 dark:hover:bg-cool-steel-700"
+          class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700"
         >
           <.icon name="hero-arrow-left" class="h-4 w-4" /> Back to Backups
         </.link>
@@ -42,23 +39,21 @@
     <!-- Backup Info Cards -->
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
       <!-- Backup A -->
-      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-4">
+      <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-4">
         <div class="flex items-center justify-between mb-2">
-          <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
-            Backup A (Older)
-          </h3>
+          <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Backup A (Older)</h3>
           <button
             phx-click="download_config"
             phx-value-backup="a"
-            class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+            class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
           >
             <.icon name="hero-arrow-down-tray" class="h-4 w-4" /> Download
           </button>
         </div>
         <dl class="space-y-1 text-sm">
           <div class="flex justify-between">
-            <dt class="text-cool-steel-500 dark:text-cool-steel-400">Date:</dt>
-            <dd class="text-cool-steel-900 dark:text-white font-mono">
+            <dt class="text-gray-500 dark:text-gray-400">Date:</dt>
+            <dd class="text-gray-900 dark:text-white font-mono">
               {ToweropsWeb.TimeHelpers.format_iso8601(
                 @backup_a.backed_up_at,
                 @current_scope.timezone,
@@ -67,18 +62,18 @@
             </dd>
           </div>
           <div class="flex justify-between">
-            <dt class="text-cool-steel-500 dark:text-cool-steel-400">Size:</dt>
-            <dd class="text-cool-steel-900 dark:text-white font-mono">
+            <dt class="text-gray-500 dark:text-gray-400">Size:</dt>
+            <dd class="text-gray-900 dark:text-white font-mono">
               {format_bytes(@backup_a.config_size_bytes)}
             </dd>
           </div>
           <div class="flex justify-between">
-            <dt class="text-cool-steel-500 dark:text-cool-steel-400">Source:</dt>
+            <dt class="text-gray-500 dark:text-gray-400">Source:</dt>
             <dd>
               <span class={[
                 "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium",
                 @backup_a.trigger_source == "daily_cron" &&
-                  "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900 dark:text-cerulean-200",
+                  "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200",
                 @backup_a.trigger_source == "manual" &&
                   "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
               ]}>
@@ -89,23 +84,21 @@
         </dl>
       </div>
       <!-- Backup B -->
-      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-4">
+      <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-4">
         <div class="flex items-center justify-between mb-2">
-          <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
-            Backup B (Newer)
-          </h3>
+          <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Backup B (Newer)</h3>
           <button
             phx-click="download_config"
             phx-value-backup="b"
-            class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+            class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
           >
             <.icon name="hero-arrow-down-tray" class="h-4 w-4" /> Download
           </button>
         </div>
         <dl class="space-y-1 text-sm">
           <div class="flex justify-between">
-            <dt class="text-cool-steel-500 dark:text-cool-steel-400">Date:</dt>
-            <dd class="text-cool-steel-900 dark:text-white font-mono">
+            <dt class="text-gray-500 dark:text-gray-400">Date:</dt>
+            <dd class="text-gray-900 dark:text-white font-mono">
               {ToweropsWeb.TimeHelpers.format_iso8601(
                 @backup_b.backed_up_at,
                 @current_scope.timezone,
@@ -114,18 +107,18 @@
             </dd>
           </div>
           <div class="flex justify-between">
-            <dt class="text-cool-steel-500 dark:text-cool-steel-400">Size:</dt>
-            <dd class="text-cool-steel-900 dark:text-white font-mono">
+            <dt class="text-gray-500 dark:text-gray-400">Size:</dt>
+            <dd class="text-gray-900 dark:text-white font-mono">
               {format_bytes(@backup_b.config_size_bytes)}
             </dd>
           </div>
           <div class="flex justify-between">
-            <dt class="text-cool-steel-500 dark:text-cool-steel-400">Source:</dt>
+            <dt class="text-gray-500 dark:text-gray-400">Source:</dt>
             <dd>
               <span class={[
                 "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium",
                 @backup_b.trigger_source == "daily_cron" &&
-                  "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900 dark:text-cerulean-200",
+                  "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200",
                 @backup_b.trigger_source == "manual" &&
                   "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
               ]}>
@@ -147,37 +140,37 @@
         </div>
       </div>
     <% else %>
-      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-4 mb-6">
+      <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-4 mb-6">
         <div class="flex items-center gap-6 text-sm">
           <div class="flex items-center gap-2">
             <span class="inline-block w-3 h-3 bg-green-500 rounded-sm"></span>
-            <span class="text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="text-gray-600 dark:text-gray-400">
               {@stats.additions} addition{if @stats.additions != 1, do: "s"}
             </span>
           </div>
           <div class="flex items-center gap-2">
-            <span class="inline-block w-3 h-3 bg-sweet-salmon-500 rounded-sm"></span>
-            <span class="text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="inline-block w-3 h-3 bg-red-500 rounded-sm"></span>
+            <span class="text-gray-600 dark:text-gray-400">
               {@stats.deletions} deletion{if @stats.deletions != 1, do: "s"}
             </span>
           </div>
           <div class="flex items-center gap-2">
-            <span class="inline-block w-3 h-3 bg-wheat-500 rounded-sm"></span>
-            <span class="text-cool-steel-600 dark:text-cool-steel-400">
+            <span class="inline-block w-3 h-3 bg-yellow-500 rounded-sm"></span>
+            <span class="text-gray-600 dark:text-gray-400">
               {@stats.changes} change{if @stats.changes != 1, do: "s"}
             </span>
           </div>
         </div>
       </div>
       <!-- Unified Diff Display -->
-      <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 overflow-hidden">
-        <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10 bg-cool-steel-50 dark:bg-cool-steel-800/75">
-          <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+      <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 overflow-hidden">
+        <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-gray-800/75">
+          <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
             {t("Configuration Differences")}
           </h3>
         </div>
         <div class="overflow-x-auto">
-          <pre class="p-4 text-xs font-mono leading-relaxed"><code><%= for line <- String.split(@diff_output, "\n") do %><%= cond do %><% String.starts_with?(line, "+") && !String.starts_with?(line, "+++") -> %><span class="block bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200">{line}</span><% String.starts_with?(line, "-") && !String.starts_with?(line, "---") -> %><span class="block bg-sweet-salmon-100 dark:bg-sweet-salmon-900/30 text-sweet-salmon-800 dark:text-sweet-salmon-200">{line}</span><% String.starts_with?(line, "@@") -> %><span class="block bg-cerulean-50 dark:bg-cerulean-900/20 text-cerulean-700 dark:text-cerulean-300 font-semibold">{line}</span><% String.starts_with?(line, "---") || String.starts_with?(line, "+++") -> %><span class="block text-cool-steel-500 dark:text-cool-steel-500 italic">{line}</span><% true -> %><span class="block text-cool-steel-700 dark:text-cool-steel-300">{line}</span><% end %><% end %></code></pre>
+          <pre class="p-4 text-xs font-mono leading-relaxed"><code><%= for line <- String.split(@diff_output, "\n") do %><%= cond do %><% String.starts_with?(line, "+") && !String.starts_with?(line, "+++") -> %><span class="block bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200">{line}</span><% String.starts_with?(line, "-") && !String.starts_with?(line, "---") -> %><span class="block bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-200">{line}</span><% String.starts_with?(line, "@@") -> %><span class="block bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 font-semibold">{line}</span><% String.starts_with?(line, "---") || String.starts_with?(line, "+++") -> %><span class="block text-gray-500 dark:text-gray-500 italic">{line}</span><% true -> %><span class="block text-gray-700 dark:text-gray-300">{line}</span><% end %><% end %></code></pre>
         </div>
       </div>
     <% end %>
diff --git a/lib/towerops_web/live/mobile_qr_live.ex b/lib/towerops_web/live/mobile_qr_live.ex
index e7cc74df..68a4801f 100644
--- a/lib/towerops_web/live/mobile_qr_live.ex
+++ b/lib/towerops_web/live/mobile_qr_live.ex
@@ -132,7 +132,7 @@ defmodule ToweropsWeb.MobileQRLive do
         </.header>
 
         <div :if={!@completed} class="mt-8">
-          <div class="rounded-lg bg-white p-8 shadow-sm ring-1 ring-cool-steel-200 dark:bg-cool-steel-800/50 dark:ring-white/10">
+          <div class="rounded-lg bg-white p-8 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800/50 dark:ring-white/10">
             <div class="flex flex-col items-center space-y-6">
               <div class="rounded-lg bg-white p-4">
                 <img
@@ -143,66 +143,64 @@ defmodule ToweropsWeb.MobileQRLive do
               </div>
 
               <div class="text-center">
-                <p class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                <p class="text-xs text-gray-500 dark:text-gray-400">
                   This QR code expires in 5 minutes
                 </p>
               </div>
 
               <div class="flex items-center space-x-2">
-                <div class="h-2 w-2 animate-pulse rounded-full bg-cerulean-500"></div>
-                <span class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <div class="h-2 w-2 animate-pulse rounded-full bg-blue-500"></div>
+                <span class="text-sm text-gray-600 dark:text-gray-400">
                   Waiting for mobile app to scan...
                 </span>
               </div>
             </div>
           </div>
 
-          <div class="mt-6 rounded-lg bg-white p-6 shadow-sm ring-1 ring-cool-steel-200 dark:bg-cool-steel-800/50 dark:ring-white/10">
-            <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+          <div class="mt-6 rounded-lg bg-white p-6 shadow-sm ring-1 ring-gray-200 dark:bg-gray-800/50 dark:ring-white/10">
+            <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
               How to link your phone
             </h3>
             <ol class="mt-4 space-y-3">
               <li class="flex items-start gap-3">
-                <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-cerulean-600 text-xs font-bold text-white">
+                <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">
                   1
                 </span>
-                <span class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
-                  Open the
-                  <span class="font-medium text-cool-steel-900 dark:text-white">Towerops</span>
+                <span class="text-sm text-gray-600 dark:text-gray-400">
+                  Open the <span class="font-medium text-gray-900 dark:text-white">Towerops</span>
                   app on your iPhone
                 </span>
               </li>
               <li class="flex items-start gap-3">
-                <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-cerulean-600 text-xs font-bold text-white">
+                <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">
                   2
                 </span>
-                <span class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
-                  Tap
-                  <span class="font-medium text-cool-steel-900 dark:text-white">"Scan QR Code"</span>
+                <span class="text-sm text-gray-600 dark:text-gray-400">
+                  Tap <span class="font-medium text-gray-900 dark:text-white">"Scan QR Code"</span>
                   on the login screen
                 </span>
               </li>
               <li class="flex items-start gap-3">
-                <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-cerulean-600 text-xs font-bold text-white">
+                <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-indigo-600 text-xs font-bold text-white">
                   3
                 </span>
-                <span class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <span class="text-sm text-gray-600 dark:text-gray-400">
                   Point your camera at the QR code above
                 </span>
               </li>
             </ol>
           </div>
 
-          <div class="mt-4 rounded-lg bg-cerulean-50 p-4 dark:bg-cerulean-900/20">
+          <div class="mt-4 rounded-lg bg-blue-50 p-4 dark:bg-blue-900/20">
             <div class="flex">
               <div class="flex-shrink-0">
-                <.icon name="hero-information-circle" class="h-5 w-5 text-cerulean-400" />
+                <.icon name="hero-information-circle" class="h-5 w-5 text-blue-400" />
               </div>
               <div class="ml-3">
-                <h3 class="text-sm font-medium text-cerulean-800 dark:text-cerulean-300">
+                <h3 class="text-sm font-medium text-blue-800 dark:text-blue-300">
                   Don't have the app yet?
                 </h3>
-                <p class="mt-1 text-sm text-cerulean-700 dark:text-cerulean-400">
+                <p class="mt-1 text-sm text-blue-700 dark:text-blue-400">
                   Download Towerops from the App Store on your iPhone.
                 </p>
               </div>
@@ -226,29 +224,23 @@ defmodule ToweropsWeb.MobileQRLive do
                 </p>
               </div>
 
-              <div class="mt-4 w-full max-w-md rounded-lg bg-white p-4 dark:bg-cool-steel-800/50">
+              <div class="mt-4 w-full max-w-md rounded-lg bg-white p-4 dark:bg-gray-800/50">
                 <dl class="space-y-2 text-sm">
                   <div>
-                    <dt class="font-medium text-cool-steel-700 dark:text-cool-steel-300">
-                      Device Name
-                    </dt>
-                    <dd class="mt-1 text-cool-steel-900 dark:text-white">
+                    <dt class="font-medium text-gray-700 dark:text-gray-300">Device Name</dt>
+                    <dd class="mt-1 text-gray-900 dark:text-white">
                       {@mobile_session.device_name || "Unknown"}
                     </dd>
                   </div>
                   <div>
-                    <dt class="font-medium text-cool-steel-700 dark:text-cool-steel-300">
-                      Device OS
-                    </dt>
-                    <dd class="mt-1 text-cool-steel-900 dark:text-white">
+                    <dt class="font-medium text-gray-700 dark:text-gray-300">Device OS</dt>
+                    <dd class="mt-1 text-gray-900 dark:text-white">
                       {@mobile_session.device_os || "Unknown"}
                     </dd>
                   </div>
                   <div>
-                    <dt class="font-medium text-cool-steel-700 dark:text-cool-steel-300">
-                      App Version
-                    </dt>
-                    <dd class="mt-1 text-cool-steel-900 dark:text-white">
+                    <dt class="font-medium text-gray-700 dark:text-gray-300">App Version</dt>
+                    <dd class="mt-1 text-gray-900 dark:text-white">
                       {@mobile_session.app_version || "Unknown"}
                     </dd>
                   </div>
@@ -257,7 +249,7 @@ defmodule ToweropsWeb.MobileQRLive do
 
               <.link
                 navigate={~p"/users/settings"}
-                class="text-sm font-medium text-cerulean-600 hover:text-cerulean-500 dark:text-cerulean-400"
+                class="text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400"
               >
                 Manage mobile sessions →
               </.link>
@@ -268,7 +260,7 @@ defmodule ToweropsWeb.MobileQRLive do
         <div class="mt-6">
           <.link
             navigate={~p"/orgs"}
-            class="text-sm font-medium text-cool-steel-600 hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+            class="text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
           >
             ← Back to Organizations
           </.link>
diff --git a/lib/towerops_web/live/network_map_live.html.heex b/lib/towerops_web/live/network_map_live.html.heex
index 3c24d7d5..f4e7943b 100644
--- a/lib/towerops_web/live/network_map_live.html.heex
+++ b/lib/towerops_web/live/network_map_live.html.heex
@@ -7,13 +7,13 @@
   <.header>
     <span class="flex items-center gap-2">
       {t("Network Map")}
-      <span class="inline-flex items-center rounded-full bg-cerulean-50 px-2 py-0.5 text-xs font-medium text-cerulean-700 ring-1 ring-inset ring-cerulean-700/10 dark:bg-cerulean-400/10 dark:text-cerulean-400 dark:ring-cerulean-400/30">
+      <span class="inline-flex items-center rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30">
         {t("Experimental")}
       </span>
     </span>
     <:subtitle>{t("Visual topology of your network infrastructure")}</:subtitle>
     <:actions>
-      <div class="flex items-center gap-1.5 text-xs text-cool-steel-400 dark:text-cool-steel-500 font-mono">
+      <div class="flex items-center gap-1.5 text-xs text-gray-400 dark:text-gray-500 font-mono">
         <span class="relative flex h-2 w-2">
           <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75">
           </span>
@@ -25,16 +25,16 @@
   </.header>
   
 <!-- Tab Navigation -->
-  <div class="border-b border-cool-steel-200 dark:border-white/10 mb-6">
+  <div class="border-b border-gray-200 dark:border-white/10 mb-6">
     <nav class="-mb-px flex space-x-8">
       <.link
         patch={~p"/network-map?tab=added"}
         class={[
           "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
           if @active_tab == "added" do
-            "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400"
+            "border-blue-500 text-blue-600 dark:text-blue-400"
           else
-            "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300"
+            "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
           end
         ]}
       >
@@ -46,14 +46,14 @@
         class={[
           "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
           if @active_tab == "all" do
-            "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400"
+            "border-blue-500 text-blue-600 dark:text-blue-400"
           else
-            "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300"
+            "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
           end
         ]}
       >
         {t("All Devices")}
-        <span class="ml-2 inline-flex items-center rounded-full bg-cool-steel-100 px-2 py-0.5 text-xs font-medium text-cool-steel-700 dark:bg-cool-steel-700 dark:text-cool-steel-300">
+        <span class="ml-2 inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700 dark:bg-gray-700 dark:text-gray-300">
           {@topology.stats.discovered_devices}
         </span>
       </.link>
@@ -63,27 +63,25 @@
   <%= if @loading do %>
     <div class="flex items-center justify-center h-96">
       <div class="text-center">
-        <.icon name="hero-arrow-path" class="h-12 w-12 text-cool-steel-400 animate-spin mx-auto" />
-        <p class="mt-4 text-sm text-cool-steel-600 dark:text-cool-steel-400">
-          Loading network topology...
-        </p>
+        <.icon name="hero-arrow-path" class="h-12 w-12 text-gray-400 animate-spin mx-auto" />
+        <p class="mt-4 text-sm text-gray-600 dark:text-gray-400">Loading network topology...</p>
       </div>
     </div>
   <% else %>
     <!-- Stats Bar -->
     <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4 mb-6">
-      <div class="bg-white dark:bg-cool-steel-800 overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10">
+      <div class="bg-white dark:bg-gray-800 overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
         <div class="p-5">
           <div class="flex items-center">
             <div class="flex-shrink-0">
-              <.icon name="hero-server" class="h-6 w-6 text-cool-steel-400" />
+              <.icon name="hero-server" class="h-6 w-6 text-gray-400" />
             </div>
             <div class="ml-5 w-0 flex-1">
               <dl>
-                <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400 truncate">
+                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
                   {t("Total Devices")}
                 </dt>
-                <dd class="text-lg font-medium text-cool-steel-900 dark:text-white">
+                <dd class="text-lg font-medium text-gray-900 dark:text-white">
                   {@topology.stats.total_devices}
                 </dd>
               </dl>
@@ -92,7 +90,7 @@
         </div>
       </div>
 
-      <div class="bg-white dark:bg-cool-steel-800 overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10">
+      <div class="bg-white dark:bg-gray-800 overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
         <div class="p-5">
           <div class="flex items-center">
             <div class="flex-shrink-0">
@@ -100,10 +98,10 @@
             </div>
             <div class="ml-5 w-0 flex-1">
               <dl>
-                <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400 truncate">
+                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
                   {t("Added Devices")}
                 </dt>
-                <dd class="text-lg font-medium text-cool-steel-900 dark:text-white">
+                <dd class="text-lg font-medium text-gray-900 dark:text-white">
                   {@topology.stats.added_devices}
                 </dd>
               </dl>
@@ -112,18 +110,18 @@
         </div>
       </div>
 
-      <div class="bg-white dark:bg-cool-steel-800 overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10">
+      <div class="bg-white dark:bg-gray-800 overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
         <div class="p-5">
           <div class="flex items-center">
             <div class="flex-shrink-0">
-              <.icon name="hero-magnifying-glass" class="h-6 w-6 text-cerulean-400" />
+              <.icon name="hero-magnifying-glass" class="h-6 w-6 text-blue-400" />
             </div>
             <div class="ml-5 w-0 flex-1">
               <dl>
-                <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400 truncate">
+                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
                   {t("Discovered")}
                 </dt>
-                <dd class="text-lg font-medium text-cool-steel-900 dark:text-white">
+                <dd class="text-lg font-medium text-gray-900 dark:text-white">
                   {@topology.stats.discovered_devices}
                 </dd>
               </dl>
@@ -132,7 +130,7 @@
         </div>
       </div>
 
-      <div class="bg-white dark:bg-cool-steel-800 overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10">
+      <div class="bg-white dark:bg-gray-800 overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
         <div class="p-5">
           <div class="flex items-center">
             <div class="flex-shrink-0">
@@ -140,10 +138,10 @@
             </div>
             <div class="ml-5 w-0 flex-1">
               <dl>
-                <dt class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400 truncate">
+                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
                   {t("Connections")}
                 </dt>
-                <dd class="text-lg font-medium text-cool-steel-900 dark:text-white">
+                <dd class="text-lg font-medium text-gray-900 dark:text-white">
                   {@topology.stats.total_links}
                 </dd>
               </dl>
@@ -154,7 +152,7 @@
     </div>
     
 <!-- Filter Bar -->
-    <div class="bg-white dark:bg-cool-steel-800 rounded-lg border border-cool-steel-200 dark:border-white/10 mb-4 p-3">
+    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-white/10 mb-4 p-3">
       <div class="flex items-center justify-between gap-4 flex-wrap">
         <div class="flex items-center gap-2">
           <button
@@ -163,10 +161,8 @@
             class={[
               "px-3 py-1.5 text-xs font-medium rounded-md transition-colors",
               if(@filter == "all",
-                do:
-                  "bg-cerulean-100 text-cerulean-700 dark:bg-cerulean-400/20 dark:text-cerulean-400",
-                else:
-                  "text-cool-steel-600 hover:bg-cool-steel-100 dark:text-cool-steel-400 dark:hover:bg-cool-steel-700"
+                do: "bg-blue-100 text-blue-700 dark:bg-blue-400/20 dark:text-blue-400",
+                else: "text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
               )
             ]}
           >
@@ -178,15 +174,14 @@
             class={[
               "px-3 py-1.5 text-xs font-medium rounded-md transition-colors",
               if(@filter == "degraded",
-                do: "bg-wheat-100 text-wheat-700 dark:bg-wheat-400/20 dark:text-wheat-400",
-                else:
-                  "text-cool-steel-600 hover:bg-cool-steel-100 dark:text-cool-steel-400 dark:hover:bg-cool-steel-700"
+                do: "bg-yellow-100 text-yellow-700 dark:bg-yellow-400/20 dark:text-yellow-400",
+                else: "text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
               )
             ]}
           >
             Degraded Only
             <%= if @topology.stats[:degraded_links] && @topology.stats.degraded_links > 0 do %>
-              <span class="ml-1 inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-wheat-800 bg-wheat-200 rounded-full dark:bg-wheat-900 dark:text-wheat-300">
+              <span class="ml-1 inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-yellow-800 bg-yellow-200 rounded-full dark:bg-yellow-900 dark:text-yellow-300">
                 {@topology.stats.degraded_links}
               </span>
             <% end %>
@@ -197,16 +192,14 @@
             class={[
               "px-3 py-1.5 text-xs font-medium rounded-md transition-colors",
               if(@filter == "alerts",
-                do:
-                  "bg-sweet-salmon-100 text-sweet-salmon-700 dark:bg-sweet-salmon-400/20 dark:text-sweet-salmon-400",
-                else:
-                  "text-cool-steel-600 hover:bg-cool-steel-100 dark:text-cool-steel-400 dark:hover:bg-cool-steel-700"
+                do: "bg-red-100 text-red-700 dark:bg-red-400/20 dark:text-red-400",
+                else: "text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
               )
             ]}
           >
             Sites with Alerts
             <%= if @topology.stats[:sites_with_alerts] && @topology.stats.sites_with_alerts > 0 do %>
-              <span class="ml-1 inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-sweet-salmon-800 bg-sweet-salmon-200 rounded-full dark:bg-sweet-salmon-900 dark:text-sweet-salmon-300">
+              <span class="ml-1 inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-red-800 bg-red-200 rounded-full dark:bg-red-900 dark:text-red-300">
                 {@topology.stats.sites_with_alerts}
               </span>
             <% end %>
@@ -216,7 +209,7 @@
           <div class="relative">
             <.icon
               name="hero-magnifying-glass"
-              class="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-cool-steel-400"
+              class="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400"
             />
             <input
               type="text"
@@ -225,21 +218,19 @@
               phx-key="Enter"
               phx-debounce="300"
               value={@search_query}
-              class="pl-8 pr-3 py-1.5 text-xs border border-cool-steel-300 dark:border-cool-steel-600 rounded-md bg-white dark:bg-cool-steel-700 text-cool-steel-900 dark:text-white placeholder-cool-steel-400 focus:ring-1 focus:ring-cerulean-500 focus:border-cerulean-500 w-48"
+              class="pl-8 pr-3 py-1.5 text-xs border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 w-48"
             />
           </div>
           <%= if @topology[:has_geo] do %>
-            <div class="flex items-center gap-1 border-l border-cool-steel-200 dark:border-cool-steel-600 pl-3">
+            <div class="flex items-center gap-1 border-l border-gray-200 dark:border-gray-600 pl-3">
               <button
                 phx-click="toggle_layout"
                 phx-value-mode="force"
                 class={[
                   "px-2 py-1 text-xs rounded transition-colors",
                   if(@layout_mode == "force",
-                    do:
-                      "bg-cool-steel-200 dark:bg-cool-steel-600 text-cool-steel-900 dark:text-white font-medium",
-                    else:
-                      "text-cool-steel-500 hover:bg-cool-steel-100 dark:hover:bg-cool-steel-700"
+                    do: "bg-gray-200 dark:bg-gray-600 text-gray-900 dark:text-white font-medium",
+                    else: "text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700"
                   )
                 ]}
                 title="Force-directed layout"
@@ -252,10 +243,8 @@
                 class={[
                   "px-2 py-1 text-xs rounded transition-colors",
                   if(@layout_mode == "geo",
-                    do:
-                      "bg-cool-steel-200 dark:bg-cool-steel-600 text-cool-steel-900 dark:text-white font-medium",
-                    else:
-                      "text-cool-steel-500 hover:bg-cool-steel-100 dark:hover:bg-cool-steel-700"
+                    do: "bg-gray-200 dark:bg-gray-600 text-gray-900 dark:text-white font-medium",
+                    else: "text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700"
                   )
                 ]}
                 title="Geographic layout"
@@ -269,19 +258,19 @@
     </div>
     
 <!-- Network Map Container -->
-    <div class="bg-white dark:bg-cool-steel-800 rounded-lg border border-cool-steel-200 dark:border-white/10 overflow-hidden">
-      <div class="p-4 border-b border-cool-steel-200 dark:border-white/10">
+    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-white/10 overflow-hidden">
+      <div class="p-4 border-b border-gray-200 dark:border-white/10">
         <div class="flex items-center justify-between">
           <div>
-            <h3 class="text-sm font-medium text-cool-steel-900 dark:text-white">
+            <h3 class="text-sm font-medium text-gray-900 dark:text-white">
               {t("Topology Visualization")}
             </h3>
-            <p class="mt-1 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
               {t("Click and drag to pan, scroll to zoom, click nodes for details")}
             </p>
           </div>
           <div class="flex items-center space-x-2">
-            <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
+            <span class="text-xs text-gray-500 dark:text-gray-400">
               Last updated: <.timestamp datetime={@topology.last_updated} timezone={@timezone} />
             </span>
           </div>
@@ -306,7 +295,7 @@
             id="cy-zoom-in"
             type="button"
             title="Zoom in"
-            class="flex items-center justify-center w-8 h-8 bg-white dark:bg-cool-steel-700 border border-cool-steel-200 dark:border-white/10 rounded shadow-sm text-cool-steel-600 dark:text-cool-steel-300 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-600 hover:text-cool-steel-900 dark:hover:text-white transition-colors"
+            class="flex items-center justify-center w-8 h-8 bg-white dark:bg-gray-700 border border-gray-200 dark:border-white/10 rounded shadow-sm text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-white transition-colors"
           >
             <.icon name="hero-plus" class="h-4 w-4" />
           </button>
@@ -314,7 +303,7 @@
             id="cy-zoom-out"
             type="button"
             title="Zoom out"
-            class="flex items-center justify-center w-8 h-8 bg-white dark:bg-cool-steel-700 border border-cool-steel-200 dark:border-white/10 rounded shadow-sm text-cool-steel-600 dark:text-cool-steel-300 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-600 hover:text-cool-steel-900 dark:hover:text-white transition-colors"
+            class="flex items-center justify-center w-8 h-8 bg-white dark:bg-gray-700 border border-gray-200 dark:border-white/10 rounded shadow-sm text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-white transition-colors"
           >
             <.icon name="hero-minus" class="h-4 w-4" />
           </button>
@@ -322,7 +311,7 @@
             id="cy-fit"
             type="button"
             title="Fit to screen"
-            class="flex items-center justify-center w-8 h-8 bg-white dark:bg-cool-steel-700 border border-cool-steel-200 dark:border-white/10 rounded shadow-sm text-cool-steel-600 dark:text-cool-steel-300 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-600 hover:text-cool-steel-900 dark:hover:text-white transition-colors"
+            class="flex items-center justify-center w-8 h-8 bg-white dark:bg-gray-700 border border-gray-200 dark:border-white/10 rounded shadow-sm text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-white transition-colors"
           >
             <.icon name="hero-arrows-pointing-out" class="h-4 w-4" />
           </button>
@@ -332,18 +321,18 @@
         <%= if @selected_node_detail do %>
           <div
             id="node-detail-panel"
-            class="absolute top-0 right-0 h-full w-80 bg-white dark:bg-cool-steel-800 border-l border-cool-steel-200 dark:border-white/10 shadow-lg overflow-y-auto transition-transform duration-200"
+            class="absolute top-0 right-0 h-full w-80 bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-white/10 shadow-lg overflow-y-auto transition-transform duration-200"
           >
             <div class="p-4">
               <!-- Header -->
               <div class="flex items-center justify-between mb-4">
-                <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+                <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                   {t("Node Details")}
                 </h3>
                 <button
                   id="close-detail-panel"
                   phx-click="close_detail_panel"
-                  class="text-cool-steel-400 hover:text-cool-steel-600 dark:hover:text-cool-steel-300"
+                  class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                 >
                   <.icon name="hero-x-mark" class="h-5 w-5" />
                 </button>
@@ -352,11 +341,11 @@
 <!-- Device Info -->
               <div class="space-y-3">
                 <div>
-                  <h4 class="text-base font-medium text-cool-steel-900 dark:text-white">
+                  <h4 class="text-base font-medium text-gray-900 dark:text-white">
                     {@selected_node_detail.name}
                   </h4>
                   <%= if @selected_node_detail.type == :discovered do %>
-                    <span class="inline-flex items-center rounded-full bg-cool-steel-100 px-2 py-0.5 text-xs font-medium text-cool-steel-600 dark:bg-cool-steel-700 dark:text-cool-steel-300 mt-1">
+                    <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300 mt-1">
                       {t("Discovered")}
                     </span>
                   <% end %>
@@ -364,11 +353,8 @@
 
                 <%= if @selected_node_detail.ip_address do %>
                   <div class="flex items-center text-sm">
-                    <.icon
-                      name="hero-globe-alt"
-                      class="h-4 w-4 text-cool-steel-400 mr-2 flex-shrink-0"
-                    />
-                    <span class="text-cool-steel-700 dark:text-cool-steel-300">
+                    <.icon name="hero-globe-alt" class="h-4 w-4 text-gray-400 mr-2 flex-shrink-0" />
+                    <span class="text-gray-700 dark:text-gray-300">
                       {@selected_node_detail.ip_address}
                     </span>
                   </div>
@@ -376,11 +362,8 @@
 
                 <%= if @selected_node_detail.site_name do %>
                   <div class="flex items-center text-sm">
-                    <.icon
-                      name="hero-map-pin"
-                      class="h-4 w-4 text-cool-steel-400 mr-2 flex-shrink-0"
-                    />
-                    <span class="text-cool-steel-700 dark:text-cool-steel-300">
+                    <.icon name="hero-map-pin" class="h-4 w-4 text-gray-400 mr-2 flex-shrink-0" />
+                    <span class="text-gray-700 dark:text-gray-300">
                       {@selected_node_detail.site_name}
                     </span>
                   </div>
@@ -390,17 +373,17 @@
                   <div class="flex items-center text-sm">
                     <.icon
                       name="hero-building-office"
-                      class="h-4 w-4 text-cool-steel-400 mr-2 flex-shrink-0"
+                      class="h-4 w-4 text-gray-400 mr-2 flex-shrink-0"
                     />
-                    <span class="text-cool-steel-700 dark:text-cool-steel-300">
+                    <span class="text-gray-700 dark:text-gray-300">
                       {@selected_node_detail.manufacturer}
                     </span>
                   </div>
                 <% end %>
 
                 <div class="flex items-center text-sm">
-                  <.icon name="hero-tag" class="h-4 w-4 text-cool-steel-400 mr-2 flex-shrink-0" />
-                  <span class="text-cool-steel-700 dark:text-cool-steel-300 capitalize">
+                  <.icon name="hero-tag" class="h-4 w-4 text-gray-400 mr-2 flex-shrink-0" />
+                  <span class="text-gray-700 dark:text-gray-300 capitalize">
                     {@selected_node_detail.role}
                   </span>
                 </div>
@@ -411,11 +394,11 @@
                       "inline-block h-2 w-2 rounded-full mr-2",
                       if(@selected_node_detail.status == :up,
                         do: "bg-green-400",
-                        else: "bg-sweet-salmon-400"
+                        else: "bg-red-400"
                       )
                     ]}>
                     </span>
-                    <span class="text-cool-steel-700 dark:text-cool-steel-300 capitalize">
+                    <span class="text-gray-700 dark:text-gray-300 capitalize">
                       {@selected_node_detail.status}
                     </span>
                   </div>
@@ -424,33 +407,29 @@
               
 <!-- Wireless Stats (for APs, CPEs, backhaul radios) -->
               <%= if @selected_node_detail[:is_wireless] do %>
-                <div class="mt-4 pt-3 border-t border-cool-steel-200 dark:border-white/10">
-                  <h4 class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider mb-2">
+                <div class="mt-4 pt-3 border-t border-gray-200 dark:border-white/10">
+                  <h4 class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
                     RF Stats
                   </h4>
                   <div class="grid grid-cols-2 gap-2">
                     <!-- Client count -->
-                    <div class="bg-cool-steel-50 dark:bg-cool-steel-700/50 rounded-md p-2">
-                      <div class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
-                        Clients
-                      </div>
-                      <div class="text-lg font-semibold text-cool-steel-900 dark:text-white flex items-center gap-1">
+                    <div class="bg-gray-50 dark:bg-gray-700/50 rounded-md p-2">
+                      <div class="text-xs text-gray-500 dark:text-gray-400">Clients</div>
+                      <div class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-1">
                         <.icon name="hero-wifi" class="h-4 w-4 text-purple-500" />
                         {@selected_node_detail[:client_count] || 0}
                       </div>
                     </div>
                     <!-- Signal health -->
-                    <div class="bg-cool-steel-50 dark:bg-cool-steel-700/50 rounded-md p-2">
-                      <div class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
-                        Signal
-                      </div>
+                    <div class="bg-gray-50 dark:bg-gray-700/50 rounded-md p-2">
+                      <div class="text-xs text-gray-500 dark:text-gray-400">Signal</div>
                       <div class={[
                         "text-sm font-semibold capitalize",
                         case @selected_node_detail[:signal_health] do
                           "good" -> "text-green-600 dark:text-green-400"
-                          "degraded" -> "text-wheat-600 dark:text-wheat-400"
-                          "critical" -> "text-sweet-salmon-600 dark:text-sweet-salmon-400"
-                          _ -> "text-cool-steel-500 dark:text-cool-steel-400"
+                          "degraded" -> "text-yellow-600 dark:text-yellow-400"
+                          "critical" -> "text-red-600 dark:text-red-400"
+                          _ -> "text-gray-500 dark:text-gray-400"
                         end
                       ]}>
                         {@selected_node_detail[:signal_health] || "N/A"}
@@ -458,10 +437,8 @@
                     </div>
                     <!-- SNR -->
                     <%= if @selected_node_detail[:snr] do %>
-                      <div class="bg-cool-steel-50 dark:bg-cool-steel-700/50 rounded-md p-2 col-span-2">
-                        <div class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
-                          SNR
-                        </div>
+                      <div class="bg-gray-50 dark:bg-gray-700/50 rounded-md p-2 col-span-2">
+                        <div class="text-xs text-gray-500 dark:text-gray-400">SNR</div>
                         <div class={[
                           "text-sm font-semibold",
                           cond do
@@ -469,10 +446,10 @@
                               "text-green-600 dark:text-green-400"
 
                             @selected_node_detail.snr >= 15 ->
-                              "text-wheat-600 dark:text-wheat-400"
+                              "text-yellow-600 dark:text-yellow-400"
 
                             true ->
-                              "text-sweet-salmon-600 dark:text-sweet-salmon-400"
+                              "text-red-600 dark:text-red-400"
                           end
                         ]}>
                           {@selected_node_detail.snr} dB
@@ -485,33 +462,33 @@
               
 <!-- Connections -->
               <%= if length(@selected_node_detail.connections) > 0 do %>
-                <div class="mt-5 pt-4 border-t border-cool-steel-200 dark:border-white/10">
-                  <h4 class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider mb-3">
+                <div class="mt-5 pt-4 border-t border-gray-200 dark:border-white/10">
+                  <h4 class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
                     {t("Connections")} ({length(@selected_node_detail.connections)})
                   </h4>
                   <div class="space-y-2">
                     <%= for conn <- @selected_node_detail.connections do %>
-                      <div class="flex items-center justify-between py-1.5 px-2 rounded bg-cool-steel-50 dark:bg-cool-steel-700/50 text-sm">
+                      <div class="flex items-center justify-between py-1.5 px-2 rounded bg-gray-50 dark:bg-gray-700/50 text-sm">
                         <div class="flex-1 min-w-0">
-                          <p class="text-cool-steel-900 dark:text-white truncate font-medium text-xs">
+                          <p class="text-gray-900 dark:text-white truncate font-medium text-xs">
                             {conn.device_name}
                           </p>
                           <%= if conn.interface do %>
-                            <p class="text-cool-steel-500 dark:text-cool-steel-400 text-xs">
+                            <p class="text-gray-500 dark:text-gray-400 text-xs">
                               {conn.interface}
                             </p>
                           <% end %>
                         </div>
                         <div class="flex items-center space-x-2 ml-2 flex-shrink-0">
-                          <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400 uppercase">
+                          <span class="text-xs text-gray-500 dark:text-gray-400 uppercase">
                             {conn.link_type}
                           </span>
                           <span class={[
                             "text-xs font-medium",
                             cond do
                               conn.confidence > 0.9 -> "text-green-600 dark:text-green-400"
-                              conn.confidence >= 0.5 -> "text-wheat-600 dark:text-wheat-400"
-                              true -> "text-cool-steel-500 dark:text-cool-steel-400"
+                              conn.confidence >= 0.5 -> "text-yellow-600 dark:text-yellow-400"
+                              true -> "text-gray-500 dark:text-gray-400"
                             end
                           ]}>
                             {trunc(conn.confidence * 100)}%
@@ -528,7 +505,7 @@
                 <div class="mt-4 space-y-2">
                   <.link
                     navigate={~p"/devices/#{@selected_node_detail.id}"}
-                    class="flex items-center justify-center w-full px-3 py-2 text-sm font-medium text-cerulean-600 dark:text-cerulean-400 bg-cerulean-50 dark:bg-cerulean-400/10 rounded-md hover:bg-cerulean-100 dark:hover:bg-cerulean-400/20"
+                    class="flex items-center justify-center w-full px-3 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-400/10 rounded-md hover:bg-blue-100 dark:hover:bg-blue-400/20"
                   >
                     <.icon name="hero-arrow-top-right-on-square" class="h-4 w-4 mr-1.5" />
                     {t("View Device")}
@@ -552,18 +529,18 @@
       </div>
       
 <!-- Legend -->
-      <div class="p-4 border-t border-cool-steel-200 dark:border-white/10 bg-cool-steel-50 dark:bg-cool-steel-900">
+      <div class="p-4 border-t border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-gray-900">
         <div class="flex flex-col gap-3">
           <%!-- Device roles --%>
           <div class="flex flex-wrap items-center gap-x-5 gap-y-1 text-xs">
-            <span class="font-medium text-cool-steel-600 dark:text-cool-steel-400">Roles:</span>
+            <span class="font-medium text-gray-600 dark:text-gray-400">Roles:</span>
             <div class="flex items-center space-x-1.5">
               <div class="w-3.5 h-3 rounded-sm" style="background-color: #3B82F6;"></div>
-              <span class="text-cool-steel-700 dark:text-cool-steel-300">Router</span>
+              <span class="text-gray-700 dark:text-gray-300">Router</span>
             </div>
             <div class="flex items-center space-x-1.5">
               <div class="w-3 h-3 rotate-45" style="background-color: #10B981;"></div>
-              <span class="text-cool-steel-700 dark:text-cool-steel-300">Switch</span>
+              <span class="text-gray-700 dark:text-gray-300">Switch</span>
             </div>
             <div class="flex items-center space-x-1.5">
               <div
@@ -571,59 +548,57 @@
                 style="border-bottom-color: #8B5CF6;"
               >
               </div>
-              <span class="text-cool-steel-700 dark:text-cool-steel-300">AP / Wireless</span>
+              <span class="text-gray-700 dark:text-gray-300">AP / Wireless</span>
             </div>
             <div class="flex items-center space-x-1.5">
               <div class="w-3 h-3 rounded-full" style="background-color: #EF4444;"></div>
-              <span class="text-cool-steel-700 dark:text-cool-steel-300">Firewall</span>
+              <span class="text-gray-700 dark:text-gray-300">Firewall</span>
             </div>
             <div class="flex items-center space-x-1.5">
               <div class="w-3 h-3" style="background-color: #F59E0B;"></div>
-              <span class="text-cool-steel-700 dark:text-cool-steel-300">Server</span>
+              <span class="text-gray-700 dark:text-gray-300">Server</span>
             </div>
             <div class="flex items-center space-x-1.5">
-              <div class="w-3 h-3 rounded-full bg-cool-steel-400"></div>
-              <span class="text-cool-steel-700 dark:text-cool-steel-300">Unknown</span>
+              <div class="w-3 h-3 rounded-full bg-gray-400"></div>
+              <span class="text-gray-700 dark:text-gray-300">Unknown</span>
             </div>
             <div class="flex items-center space-x-1.5">
-              <div class="w-3 h-3 rounded-full border-2 border-dashed border-cool-steel-400 opacity-60">
+              <div class="w-3 h-3 rounded-full border-2 border-dashed border-gray-400 opacity-60">
               </div>
-              <span class="text-cool-steel-700 dark:text-cool-steel-300">Discovered</span>
+              <span class="text-gray-700 dark:text-gray-300">Discovered</span>
             </div>
           </div>
           <%!-- RF Link health legend hidden (TOW-44) — keep code intact
           <div class="flex flex-wrap items-center gap-x-5 gap-y-1 text-xs">
-            <span class="font-medium text-cool-steel-600 dark:text-cool-steel-400">RF Links:</span>
+            <span class="font-medium text-gray-600 dark:text-gray-400">RF Links:</span>
             <div class="flex items-center space-x-1.5">
               <div class="w-6 h-1 rounded" style="background-color: #10B981;"></div>
-              <span class="text-cool-steel-700 dark:text-cool-steel-300">Good signal</span>
+              <span class="text-gray-700 dark:text-gray-300">Good signal</span>
             </div>
             <div class="flex items-center space-x-1.5">
               <div class="w-6 h-1 rounded" style="background-color: #F59E0B;"></div>
-              <span class="text-cool-steel-700 dark:text-cool-steel-300">Degraded</span>
+              <span class="text-gray-700 dark:text-gray-300">Degraded</span>
             </div>
             <div class="flex items-center space-x-1.5">
               <div class="w-6 h-1 rounded" style="background-color: #EF4444;"></div>
-              <span class="text-cool-steel-700 dark:text-cool-steel-300">Critical</span>
+              <span class="text-gray-700 dark:text-gray-300">Critical</span>
             </div>
           </div>
           --%>
           <%!-- Link types --%>
           <div class="flex flex-wrap items-center gap-x-5 gap-y-1 text-xs">
-            <span class="font-medium text-cool-steel-600 dark:text-cool-steel-400">
-              Link types:
-            </span>
+            <span class="font-medium text-gray-600 dark:text-gray-400">Link types:</span>
             <div class="flex items-center space-x-1.5">
               <div class="w-6 h-0.5" style="background-color: #6B7280;"></div>
-              <span class="text-cool-steel-700 dark:text-cool-steel-300">LLDP/CDP</span>
+              <span class="text-gray-700 dark:text-gray-300">LLDP/CDP</span>
             </div>
             <div class="flex items-center space-x-1.5">
               <div class="w-6 h-0.5 border-t-2 border-dashed" style="border-color: #6B7280;">
               </div>
-              <span class="text-cool-steel-700 dark:text-cool-steel-300">MAC/ARP inferred</span>
+              <span class="text-gray-700 dark:text-gray-300">MAC/ARP inferred</span>
             </div>
             <div class="flex items-center space-x-1.5">
-              <span class="text-cool-steel-500 dark:text-cool-steel-400">
+              <span class="text-gray-500 dark:text-gray-400">
                 Line thickness = bandwidth capacity
               </span>
             </div>
@@ -635,17 +610,14 @@
 <!-- Empty State -->
     <%= if @topology.stats.total_devices == 0 do %>
       <div class="text-center py-16">
-        <.icon
-          name="hero-map"
-          class="mx-auto h-12 w-12 text-cool-steel-400 dark:text-cool-steel-500"
-        />
-        <h3 class="mt-4 text-lg font-semibold text-cool-steel-900 dark:text-white">
+        <.icon name="hero-map" class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" />
+        <h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-white">
           {t("No network topology available")}
         </h3>
-        <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
           {t("Add devices with SNMP enabled to start building your network map.")}
         </p>
-        <p class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
           {t("The topology is automatically discovered via LLDP and CDP protocols.")}
         </p>
         <div class="mt-6">
diff --git a/lib/towerops_web/live/onboarding_live.html.heex b/lib/towerops_web/live/onboarding_live.html.heex
index 9d1ff0b2..9eb2e9d8 100644
--- a/lib/towerops_web/live/onboarding_live.html.heex
+++ b/lib/towerops_web/live/onboarding_live.html.heex
@@ -15,13 +15,12 @@
               class={[
                 "flex items-center gap-1.5 text-sm font-medium px-2 py-1 rounded transition",
                 if(step == @step,
-                  do:
-                    "text-cerulean-600 dark:text-cerulean-400 bg-cerulean-50 dark:bg-cerulean-900/30",
+                  do: "text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-900/30",
                   else:
                     if(step_index(step) < step_index(@step),
                       do:
-                        "text-cool-steel-600 dark:text-cool-steel-300 hover:text-cool-steel-900 dark:hover:text-white",
-                      else: "text-cool-steel-400 dark:text-cool-steel-500"
+                        "text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white",
+                      else: "text-gray-400 dark:text-gray-500"
                     )
                 )
               ]}
@@ -29,12 +28,11 @@
               <span class={[
                 "flex items-center justify-center w-5 h-5 rounded-full text-xs font-bold",
                 if(step == @step,
-                  do: "bg-cerulean-600 text-white dark:bg-cerulean-500",
+                  do: "bg-indigo-600 text-white dark:bg-indigo-500",
                   else:
                     if(step_index(step) < step_index(@step),
-                      do: "bg-cool-steel-400 dark:bg-cool-steel-500 text-white",
-                      else:
-                        "bg-cool-steel-200 dark:bg-cool-steel-700 text-cool-steel-500 dark:text-cool-steel-400"
+                      do: "bg-gray-400 dark:bg-gray-500 text-white",
+                      else: "bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400"
                     )
                 )
               ]}>
@@ -49,7 +47,7 @@
             <%= if step != List.last(@steps) do %>
               <.icon
                 name="hero-chevron-right-mini"
-                class="h-4 w-4 text-cool-steel-300 dark:text-cool-steel-600"
+                class="h-4 w-4 text-gray-300 dark:text-gray-600"
               />
             <% end %>
           </li>
@@ -58,13 +56,13 @@
     </nav>
 
     <%!-- Step content --%>
-    <div class="bg-white dark:bg-white/5 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6">
+    <div class="bg-white dark:bg-white/5 rounded-lg border border-gray-200 dark:border-white/10 p-6">
       <%= case @step do %>
         <% :snmp -> %>
-          <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-1">
+          <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">
             {t("SNMP Configuration")}
           </h2>
-          <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400 mb-6">
+          <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
             {t("Set organization-wide SNMP defaults. Can be overridden per-site or per-device.")}
           </p>
 
@@ -118,17 +116,17 @@
                 />
               <% end %>
 
-              <div class="flex items-center justify-between pt-4 border-t border-cool-steel-200 dark:border-white/10">
+              <div class="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-white/10">
                 <button
                   type="button"
                   phx-click="skip"
-                  class="text-sm text-cool-steel-500 dark:text-cool-steel-400 hover:text-cool-steel-700 dark:hover:text-cool-steel-200"
+                  class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
                 >
                   {t("Skip")}
                 </button>
                 <button
                   type="submit"
-                  class="rounded-md bg-cerulean-600 px-4 py-2 text-sm font-semibold text-white hover:bg-cerulean-500 dark:bg-cerulean-500 dark:hover:bg-cerulean-400"
+                  class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400"
                 >
                   {t("Save & Continue")}
                 </button>
@@ -136,10 +134,10 @@
             </div>
           </.form>
         <% :site -> %>
-          <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-1">
+          <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">
             {t("Add Your First Site")}
           </h2>
-          <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400 mb-6">
+          <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
             {t("Sites represent physical locations — tower sites, POPs, data centers, etc.")}
           </p>
 
@@ -175,17 +173,17 @@
                 />
               </div>
 
-              <div class="flex items-center justify-between pt-4 border-t border-cool-steel-200 dark:border-white/10">
+              <div class="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-white/10">
                 <button
                   type="button"
                   phx-click="skip"
-                  class="text-sm text-cool-steel-500 dark:text-cool-steel-400 hover:text-cool-steel-700 dark:hover:text-cool-steel-200"
+                  class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
                 >
                   {t("Skip")}
                 </button>
                 <button
                   type="submit"
-                  class="rounded-md bg-cerulean-600 px-4 py-2 text-sm font-semibold text-white hover:bg-cerulean-500 dark:bg-cerulean-500 dark:hover:bg-cerulean-400"
+                  class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400"
                 >
                   {t("Create Site & Continue")}
                 </button>
@@ -193,10 +191,10 @@
             </div>
           </.form>
         <% :billing -> %>
-          <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-1">
+          <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">
             {t("Connect a Billing Platform")}
           </h2>
-          <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400 mb-6">
+          <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
             {t(
               "Optional. Sync subscriber data for outage impact analysis and inventory reconciliation."
             )}
@@ -209,13 +207,10 @@
                   type="button"
                   phx-click="select_provider"
                   phx-value-provider={provider.id}
-                  class="flex items-center gap-3 p-4 rounded-lg border border-cool-steel-200 dark:border-white/10 hover:border-cerulean-400 dark:hover:border-cerulean-500 hover:bg-cool-steel-50 dark:hover:bg-white/5 transition text-left"
+                  class="flex items-center gap-3 p-4 rounded-lg border border-gray-200 dark:border-white/10 hover:border-indigo-400 dark:hover:border-indigo-500 hover:bg-gray-50 dark:hover:bg-white/5 transition text-left"
                 >
-                  <.icon
-                    name={provider.icon}
-                    class="h-6 w-6 text-cool-steel-400 dark:text-cool-steel-500"
-                  />
-                  <span class="text-sm font-medium text-cool-steel-900 dark:text-white">
+                  <.icon name={provider.icon} class="h-6 w-6 text-gray-400 dark:text-gray-500" />
+                  <span class="text-sm font-medium text-gray-900 dark:text-white">
                     {provider.name}
                   </span>
                 </button>
@@ -227,7 +222,7 @@
                 type="button"
                 phx-click="select_provider"
                 phx-value-provider=""
-                class="text-sm text-cool-steel-500 dark:text-cool-steel-400 hover:text-cool-steel-700 dark:hover:text-cool-steel-200"
+                class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
               >
                 ← {t("Back to providers")}
               </button>
@@ -278,17 +273,17 @@
                     />
                 <% end %>
 
-                <div class="flex items-center justify-between pt-4 border-t border-cool-steel-200 dark:border-white/10">
+                <div class="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-white/10">
                   <button
                     type="button"
                     phx-click="skip"
-                    class="text-sm text-cool-steel-500 dark:text-cool-steel-400 hover:text-cool-steel-700 dark:hover:text-cool-steel-200"
+                    class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
                   >
                     {t("Skip")}
                   </button>
                   <button
                     type="submit"
-                    class="rounded-md bg-cerulean-600 px-4 py-2 text-sm font-semibold text-white hover:bg-cerulean-500 dark:bg-cerulean-500 dark:hover:bg-cerulean-400"
+                    class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400"
                   >
                     {t("Save & Continue")}
                   </button>
@@ -298,21 +293,21 @@
           <% end %>
 
           <%= if @selected_provider == nil do %>
-            <div class="flex items-center justify-between pt-4 border-t border-cool-steel-200 dark:border-white/10">
+            <div class="flex items-center justify-between pt-4 border-t border-gray-200 dark:border-white/10">
               <button
                 type="button"
                 phx-click="skip"
-                class="text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400 hover:text-cool-steel-700 dark:hover:text-cool-steel-200"
+                class="text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"
               >
                 {t("Skip — I'll set this up later")}
               </button>
             </div>
           <% end %>
         <% :agent -> %>
-          <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-1">
+          <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-1">
             {t("Deploy Agent")}
           </h2>
-          <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400 mb-6">
+          <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
             {t(
               "The TowerOps agent polls your network devices via SNMP. Deploy it on a host with network access to your infrastructure."
             )}
@@ -321,20 +316,20 @@
           <%= if @agent_token do %>
             <div class="space-y-4">
               <%= if @agent_token_value do %>
-                <div class="rounded-md bg-wheat-50 dark:bg-wheat-900/20 border border-wheat-200 dark:border-wheat-800 p-3">
-                  <p class="text-sm text-wheat-800 dark:text-wheat-200">
+                <div class="rounded-md bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 p-3">
+                  <p class="text-sm text-amber-800 dark:text-amber-200">
                     <.icon name="hero-exclamation-triangle" class="h-4 w-4 inline -mt-0.5" />
                     {t("Save this token — it won't be shown again.")}
                   </p>
-                  <code class="mt-2 block text-xs font-mono bg-wheat-100 dark:bg-wheat-900/40 rounded p-2 break-all select-all text-wheat-900 dark:text-wheat-100">
+                  <code class="mt-2 block text-xs font-mono bg-amber-100 dark:bg-amber-900/40 rounded p-2 break-all select-all text-amber-900 dark:text-amber-100">
                     {@agent_token_value}
                   </code>
                 </div>
               <% else %>
-                <div class="rounded-md bg-cool-steel-50 dark:bg-white/5 border border-cool-steel-200 dark:border-white/10 p-3">
-                  <p class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                <div class="rounded-md bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 p-3">
+                  <p class="text-xs text-gray-500 dark:text-gray-400">
                     {t("Agent:")}
-                    <span class="font-medium text-cool-steel-900 dark:text-white">
+                    <span class="font-medium text-gray-900 dark:text-white">
                       {@agent_token.name}
                     </span>
                   </p>
@@ -342,10 +337,10 @@
               <% end %>
 
               <div>
-                <h3 class="text-sm font-medium text-cool-steel-900 dark:text-white mb-2">
+                <h3 class="text-sm font-medium text-gray-900 dark:text-white mb-2">
                   {t("Docker")}
                 </h3>
-                <pre class="text-xs font-mono bg-cool-steel-900 text-green-400 rounded-lg p-4 overflow-x-auto select-all"><code>docker run -d \
+                <pre class="text-xs font-mono bg-gray-900 text-green-400 rounded-lg p-4 overflow-x-auto select-all"><code>docker run -d \
   --name towerops-agent \
   --restart unless-stopped \
   -e TOWEROPS_TOKEN=<%= if @agent_token_value, do: @agent_token_value, else: "<your-token>" %> \
@@ -355,26 +350,26 @@
               </div>
 
               <div>
-                <h3 class="text-sm font-medium text-cool-steel-900 dark:text-white mb-2">
+                <h3 class="text-sm font-medium text-gray-900 dark:text-white mb-2">
                   {t("Systemd")}
                 </h3>
-                <pre class="text-xs font-mono bg-cool-steel-900 text-green-400 rounded-lg p-4 overflow-x-auto select-all"><code>curl -sSL https://install.towerops.net | \
+                <pre class="text-xs font-mono bg-gray-900 text-green-400 rounded-lg p-4 overflow-x-auto select-all"><code>curl -sSL https://install.towerops.net | \
   TOWEROPS_TOKEN=<%= if @agent_token_value, do: @agent_token_value, else: "<your-token>" %> \
   TOWEROPS_SERVER=<%= ToweropsWeb.Endpoint.url() %> \
   bash</code></pre>
               </div>
             </div>
           <% else %>
-            <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+            <p class="text-sm text-gray-500 dark:text-gray-400">
               {t("Failed to create agent token. You can create one later in Settings → Agents.")}
             </p>
           <% end %>
 
-          <div class="flex items-center justify-end pt-6 border-t border-cool-steel-200 dark:border-white/10 mt-6">
+          <div class="flex items-center justify-end pt-6 border-t border-gray-200 dark:border-white/10 mt-6">
             <button
               type="button"
               phx-click="finish"
-              class="rounded-md bg-cerulean-600 px-4 py-2 text-sm font-semibold text-white hover:bg-cerulean-500 dark:bg-cerulean-500 dark:hover:bg-cerulean-400"
+              class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400"
             >
               {t("Done — Go to Dashboard")}
             </button>
diff --git a/lib/towerops_web/live/org/gaiia_mapping_live.html.heex b/lib/towerops_web/live/org/gaiia_mapping_live.html.heex
index 1c158c5a..3b5af70c 100644
--- a/lib/towerops_web/live/org/gaiia_mapping_live.html.heex
+++ b/lib/towerops_web/live/org/gaiia_mapping_live.html.heex
@@ -3,17 +3,17 @@
   current_scope={@current_scope}
   unresolved_alert_count={assigns[:unresolved_alert_count] || 0}
 >
-  <div class="border-b border-cool-steel-200 pb-5 dark:border-white/5">
+  <div class="border-b border-gray-200 pb-5 dark:border-white/5">
     <.breadcrumb items={[
       %{label: "Dashboard", navigate: ~p"/dashboard"},
       %{label: "Settings", navigate: ~p"/orgs/#{@organization.slug}/settings"},
       %{label: "Integrations", navigate: ~p"/orgs/#{@organization.slug}/settings/integrations"},
       %{label: "Gaiia"}
     ]} />
-    <h1 class="text-3xl font-semibold tracking-tight text-cool-steel-900 dark:text-white">
+    <h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
       {t("Link Devices & Sites to Gaiia")}
     </h1>
-    <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+    <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
       {t(
         "For each of your monitored devices and sites, find the matching Gaiia inventory item. This enables subscriber impact data when devices go down."
       )}
@@ -21,17 +21,17 @@
   </div>
 
   <%!-- Sub-navigation tabs --%>
-  <div class="mt-4 border-b border-cool-steel-200 dark:border-white/10">
+  <div class="mt-4 border-b border-gray-200 dark:border-white/10">
     <nav class="flex space-x-6">
       <.link
         navigate={~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/mapping"}
-        class="border-b-2 border-cerulean-500 px-1 pb-3 text-sm font-medium text-cerulean-600 dark:text-cerulean-400"
+        class="border-b-2 border-indigo-500 px-1 pb-3 text-sm font-medium text-indigo-600 dark:text-indigo-400"
       >
         {t("Device & Site Linking")}
       </.link>
       <.link
         navigate={~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/reconciliation"}
-        class="border-b-2 border-transparent px-1 pb-3 text-sm font-medium text-cool-steel-500 hover:border-cool-steel-300 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:border-cool-steel-600 dark:hover:text-white"
+        class="border-b-2 border-transparent px-1 pb-3 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-white"
       >
         {t("Comparison Report")}
       </.link>
@@ -39,7 +39,7 @@
   </div>
 
   <%!-- Tab navigation --%>
-  <div class="mt-6 border-b border-cool-steel-200 dark:border-white/10">
+  <div class="mt-6 border-b border-gray-200 dark:border-white/10">
     <nav class="-mb-px flex space-x-8">
       <.link
         id="tab-devices"
@@ -49,10 +49,9 @@
         class={[
           "whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium",
           if(@tab == "devices",
-            do:
-              "border-cerulean-500 text-cerulean-600 dark:border-cerulean-400 dark:text-cerulean-400",
+            do: "border-indigo-500 text-indigo-600 dark:border-indigo-400 dark:text-indigo-400",
             else:
-              "border-transparent text-cool-steel-500 hover:border-cool-steel-300 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:border-cool-steel-600 dark:hover:text-cool-steel-300"
+              "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-gray-300"
           )
         ]}
       >
@@ -66,10 +65,9 @@
         class={[
           "whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium",
           if(@tab == "sites",
-            do:
-              "border-cerulean-500 text-cerulean-600 dark:border-cerulean-400 dark:text-cerulean-400",
+            do: "border-indigo-500 text-indigo-600 dark:border-indigo-400 dark:text-indigo-400",
             else:
-              "border-transparent text-cool-steel-500 hover:border-cool-steel-300 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:border-cool-steel-600 dark:hover:text-cool-steel-300"
+              "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-gray-300"
           )
         ]}
       >
@@ -88,9 +86,9 @@
       class={[
         "rounded-full px-3 py-1 text-xs font-medium",
         if(@filter == f,
-          do: "bg-cerulean-100 text-cerulean-700 dark:bg-cerulean-900/40 dark:text-cerulean-300",
+          do: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300",
           else:
-            "bg-cool-steel-100 text-cool-steel-600 hover:bg-cool-steel-200 dark:bg-white/5 dark:text-cool-steel-400 dark:hover:bg-white/10"
+            "bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-white/5 dark:text-gray-400 dark:hover:bg-white/10"
         )
       ]}
     >
@@ -103,13 +101,13 @@
     <%= if @items == [] do %>
       <div
         id="empty-state"
-        class="rounded-lg border-2 border-dashed border-cool-steel-300 p-12 text-center dark:border-cool-steel-700"
+        class="rounded-lg border-2 border-dashed border-gray-300 p-12 text-center dark:border-gray-700"
       >
         <.icon
           name={if(@tab == "sites", do: "hero-map-pin", else: "hero-cpu-chip")}
-          class="mx-auto h-12 w-12 text-cool-steel-400 dark:text-cool-steel-500"
+          class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500"
         />
-        <h3 class="mt-2 text-sm font-semibold text-cool-steel-900 dark:text-white">
+        <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
           <%= case {@tab, @filter} do %>
             <% {"devices", "linked"} -> %>
               {t("No linked devices yet")}
@@ -125,7 +123,7 @@
               {t("No sites in your organization")}
           <% end %>
         </h3>
-        <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
           <%= case {@tab, @filter} do %>
             <% {_, "unlinked"} -> %>
               {t("Nothing left to do here.")}
@@ -137,27 +135,27 @@
         </p>
       </div>
     <% else %>
-      <div class="overflow-x-auto rounded-lg border border-cool-steel-200 dark:border-white/10">
-        <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-          <thead class="bg-cool-steel-50 dark:bg-white/5">
+      <div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-white/10">
+        <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+          <thead class="bg-gray-50 dark:bg-white/5">
             <tr>
               <th
                 scope="col"
-                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
+                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
               >
                 {if @tab == "devices", do: t("Your Device"), else: t("Your Site")}
               </th>
               <%= if @tab == "devices" do %>
                 <th
                   scope="col"
-                  class="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 sm:table-cell"
+                  class="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400 sm:table-cell"
                 >
                   {t("IP Address")}
                 </th>
               <% end %>
               <th
                 scope="col"
-                class="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 md:table-cell"
+                class="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400 md:table-cell"
               >
                 {if @tab == "devices",
                   do: t("Gaiia Inventory Item"),
@@ -165,13 +163,13 @@
               </th>
               <th
                 scope="col"
-                class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
+                class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
               >
                 {t("Actions")}
               </th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-cool-steel-200 bg-white dark:divide-white/5 dark:bg-transparent">
+          <tbody class="divide-y divide-gray-200 bg-white dark:divide-white/5 dark:bg-transparent">
             <%= for row <- @items do %>
               <% row_id = if @tab == "devices", do: row.device.id, else: row.site.id
 
@@ -182,7 +180,7 @@
               <tr
                 id={"row-#{row_id}"}
                 class={[
-                  "hover:bg-cool-steel-50 dark:hover:bg-white/5",
+                  "hover:bg-gray-50 dark:hover:bg-white/5",
                   if(not is_linked, do: "cursor-pointer")
                 ]}
                 phx-click={if(not is_linked, do: "start_link")}
@@ -196,19 +194,19 @@
                         <div class="flex items-center gap-2 flex-wrap">
                           <.link
                             navigate={~p"/devices/#{row.device.id}"}
-                            class="font-medium text-cool-steel-900 hover:text-cerulean-600 dark:text-white dark:hover:text-cerulean-400"
+                            class="font-medium text-gray-900 hover:text-indigo-600 dark:text-white dark:hover:text-indigo-400"
                           >
                             {row.device.name || row.device.ip_address || "Unnamed"}
                           </.link>
                           <%= if Map.has_key?(@suggestions, row.device.id) do %>
-                            <span class="inline-flex items-center rounded-full bg-wheat-100 px-2 py-0.5 text-xs font-medium text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400">
+                            <span class="inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800 dark:bg-amber-900/30 dark:text-amber-400">
                               <.icon name="hero-light-bulb-mini" class="mr-0.5 h-3 w-3" />
                               Match found
                             </span>
                           <% end %>
                         </div>
                         <%= if row.device.site do %>
-                          <div class="mt-0.5 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                          <div class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
                             {row.device.site.name}
                           </div>
                         <% end %>
@@ -216,11 +214,11 @@
                     <% else %>
                       <div>
                         <div class="flex items-center gap-2 flex-wrap">
-                          <span class="font-medium text-cool-steel-900 dark:text-white">
+                          <span class="font-medium text-gray-900 dark:text-white">
                             {row.site.name || "Unnamed"}
                           </span>
                           <%= if Map.has_key?(@suggestions, row.site.id) do %>
-                            <span class="inline-flex items-center rounded-full bg-wheat-100 px-2 py-0.5 text-xs font-medium text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400">
+                            <span class="inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800 dark:bg-amber-900/30 dark:text-amber-400">
                               <.icon name="hero-light-bulb-mini" class="mr-0.5 h-3 w-3" />
                               Match found
                             </span>
@@ -233,13 +231,13 @@
 
                 <%!-- IP Address (devices only) --%>
                 <%= if @tab == "devices" do %>
-                  <td class="hidden whitespace-nowrap px-4 py-4 text-sm text-cool-steel-500 dark:text-cool-steel-400 sm:table-cell">
+                  <td class="hidden whitespace-nowrap px-4 py-4 text-sm text-gray-500 dark:text-gray-400 sm:table-cell">
                     <%= if row.device.ip_address do %>
                       <a
                         href={"http://#{row.device.ip_address}"}
                         target="_blank"
                         rel="noopener noreferrer"
-                        class="font-mono hover:text-cerulean-600 dark:hover:text-cerulean-400"
+                        class="font-mono hover:text-indigo-600 dark:hover:text-indigo-400"
                         onclick="event.stopPropagation()"
                       >
                         {row.device.ip_address}
@@ -260,7 +258,7 @@
                             href={"#{@gaiia_app_url}/inventory/items/#{row.inventory_item.gaiia_id}"}
                             target="_blank"
                             rel="noopener noreferrer"
-                            class="font-medium text-cool-steel-900 hover:text-cerulean-600 dark:text-white dark:hover:text-cerulean-400"
+                            class="font-medium text-gray-900 hover:text-indigo-600 dark:text-white dark:hover:text-indigo-400"
                           >
                             {row.inventory_item.name || "Unnamed"}
                             <.icon
@@ -269,18 +267,18 @@
                             />
                           </a>
                         <% else %>
-                          <span class="font-medium text-cool-steel-900 dark:text-white">
+                          <span class="font-medium text-gray-900 dark:text-white">
                             {row.inventory_item.name || "Unnamed"}
                           </span>
                         <% end %>
                         <%= if row.inventory_item.model_name do %>
-                          <div class="mt-0.5 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                          <div class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
                             {row.inventory_item.model_name}
                           </div>
                         <% end %>
                       </div>
                     <% else %>
-                      <span class="inline-flex items-center rounded-full bg-cool-steel-100 px-2.5 py-0.5 text-xs font-medium text-cool-steel-500 dark:bg-white/10 dark:text-cool-steel-400">
+                      <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-500 dark:bg-white/10 dark:text-gray-400">
                         Not linked
                       </span>
                     <% end %>
@@ -291,7 +289,7 @@
                           href={"#{@gaiia_app_url}/network-sites/#{row.network_site.gaiia_id}"}
                           target="_blank"
                           rel="noopener noreferrer"
-                          class="font-medium text-cool-steel-900 hover:text-cerulean-600 dark:text-white dark:hover:text-cerulean-400"
+                          class="font-medium text-gray-900 hover:text-indigo-600 dark:text-white dark:hover:text-indigo-400"
                           onclick="event.stopPropagation()"
                         >
                           {row.network_site.name || "Unnamed"}
@@ -301,12 +299,12 @@
                           />
                         </a>
                       <% else %>
-                        <span class="font-medium text-cool-steel-900 dark:text-white">
+                        <span class="font-medium text-gray-900 dark:text-white">
                           {row.network_site.name || "Unnamed"}
                         </span>
                       <% end %>
                     <% else %>
-                      <span class="inline-flex items-center rounded-full bg-cool-steel-100 px-2.5 py-0.5 text-xs font-medium text-cool-steel-500 dark:bg-white/10 dark:text-cool-steel-400">
+                      <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-500 dark:bg-white/10 dark:text-gray-400">
                         Not linked
                       </span>
                     <% end %>
@@ -325,7 +323,7 @@
                         data-confirm={
                           t("Remove the link between this device and its Gaiia item?")
                         }
-                        class="text-sweet-salmon-600 hover:text-sweet-salmon-800 dark:text-sweet-salmon-400 dark:hover:text-sweet-salmon-300"
+                        class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
                       >
                         {t("Unlink")}
                       </button>
@@ -335,7 +333,7 @@
                         id={"link-#{row.device.id}"}
                         phx-click="start_link"
                         phx-value-id={row.device.id}
-                        class="text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                        class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
                       >
                         {t("Link")}
                       </button>
@@ -350,7 +348,7 @@
                         data-confirm={
                           t("Remove the link between this site and its Gaiia network site?")
                         }
-                        class="text-sweet-salmon-600 hover:text-sweet-salmon-800 dark:text-sweet-salmon-400 dark:hover:text-sweet-salmon-300"
+                        class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
                       >
                         {t("Unlink")}
                       </button>
@@ -360,7 +358,7 @@
                         id={"link-#{row.site.id}"}
                         phx-click="start_link"
                         phx-value-id={row.site.id}
-                        class="text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                        class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
                       >
                         {t("Link")}
                       </button>
@@ -371,19 +369,19 @@
 
               <%!-- Inline linking row --%>
               <%= if row_id == @linking_id do %>
-                <tr id={"linking-row-#{row_id}"} class="bg-cerulean-50 dark:bg-cerulean-900/20">
+                <tr id={"linking-row-#{row_id}"} class="bg-indigo-50 dark:bg-indigo-900/20">
                   <td colspan={if(@tab == "devices", do: "4", else: "3")} class="px-4 py-4">
                     <div class="flex items-start gap-4">
                       <div class="flex-1">
-                        <p class="mb-2 text-sm font-medium text-cool-steel-900 dark:text-white">
+                        <p class="mb-2 text-sm font-medium text-gray-900 dark:text-white">
                           <%= if @tab == "devices" do %>
                             Find a Gaiia item to link to
-                            <span class="text-cerulean-600 dark:text-cerulean-400">
+                            <span class="text-indigo-600 dark:text-indigo-400">
                               {row.device.name || row.device.ip_address}
                             </span>
                           <% else %>
                             Find a Gaiia network site to link to
-                            <span class="text-cerulean-600 dark:text-cerulean-400">
+                            <span class="text-indigo-600 dark:text-indigo-400">
                               {row.site.name}
                             </span>
                           <% end %>
@@ -392,7 +390,7 @@
                         <%!-- Suggestions --%>
                         <%= if suggestions = @suggestions[row_id] do %>
                           <div class="mb-3">
-                            <p class="mb-1 text-xs font-medium text-wheat-700 dark:text-wheat-400">
+                            <p class="mb-1 text-xs font-medium text-amber-700 dark:text-amber-400">
                               <.icon name="hero-light-bulb-mini" class="inline h-3 w-3 mr-0.5" />
                               {t("Suggested match (same IP):")}
                             </p>
@@ -406,15 +404,15 @@
                                   phx-value-device-id={if(@tab == "devices", do: row.device.id)}
                                   phx-value-site-id={if(@tab == "sites", do: row.site.id)}
                                   phx-value-gaiia-id={suggestion.entity.gaiia_id}
-                                  class="inline-flex items-center gap-1.5 rounded-md border border-wheat-300 bg-wheat-50 px-2.5 py-1.5 text-xs font-medium text-wheat-800 hover:bg-wheat-100 dark:border-wheat-700 dark:bg-wheat-900/20 dark:text-wheat-300 dark:hover:bg-wheat-900/40"
+                                  class="inline-flex items-center gap-1.5 rounded-md border border-amber-300 bg-amber-50 px-2.5 py-1.5 text-xs font-medium text-amber-800 hover:bg-amber-100 dark:border-amber-700 dark:bg-amber-900/20 dark:text-amber-300 dark:hover:bg-amber-900/40"
                                 >
                                   {suggestion.entity.name}
                                   <%= if @tab == "devices" && suggestion.entity.ip_address do %>
-                                    <span class="text-wheat-600 dark:text-wheat-400">
+                                    <span class="text-amber-600 dark:text-amber-400">
                                       {suggestion.entity.ip_address}
                                     </span>
                                   <% end %>
-                                  <span class="rounded bg-wheat-200 px-1 text-wheat-700 dark:bg-wheat-800 dark:text-wheat-300">
+                                  <span class="rounded bg-amber-200 px-1 text-amber-700 dark:bg-amber-800 dark:text-amber-300">
                                     {suggestion.match_type}
                                   </span>
                                 </button>
@@ -438,13 +436,13 @@
                             }
                             autocomplete="off"
                             phx-debounce="300"
-                            class="block w-full rounded-md border-cool-steel-300 text-sm shadow-sm focus:border-cerulean-500 focus:ring-cerulean-500 dark:border-white/10 dark:bg-white/5 dark:text-white"
+                            class="block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-white"
                           />
                         </form>
 
                         <%= if @search_results != [] do %>
-                          <div class="mt-2 max-h-48 overflow-y-auto rounded-md border border-cool-steel-200 bg-white dark:border-white/10 dark:bg-cool-steel-800">
-                            <ul class="divide-y divide-cool-steel-200 dark:divide-white/5">
+                          <div class="mt-2 max-h-48 overflow-y-auto rounded-md border border-gray-200 bg-white dark:border-white/10 dark:bg-gray-800">
+                            <ul class="divide-y divide-gray-200 dark:divide-white/5">
                               <li :for={result <- @search_results}>
                                 <button
                                   type="button"
@@ -455,13 +453,13 @@
                                   phx-value-device-id={if(@tab == "devices", do: @linking_id)}
                                   phx-value-site-id={if(@tab == "sites", do: @linking_id)}
                                   phx-value-gaiia-id={result.gaiia_id}
-                                  class="flex w-full items-center justify-between px-3 py-2 text-left text-sm hover:bg-cool-steel-50 dark:hover:bg-white/5"
+                                  class="flex w-full items-center justify-between px-3 py-2 text-left text-sm hover:bg-gray-50 dark:hover:bg-white/5"
                                 >
-                                  <span class="font-medium text-cool-steel-900 dark:text-white">
+                                  <span class="font-medium text-gray-900 dark:text-white">
                                     {result.name || "Unnamed"}
                                   </span>
                                   <%= if @tab == "devices" do %>
-                                    <span class="flex items-center gap-2 text-cool-steel-500 dark:text-cool-steel-400">
+                                    <span class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
                                       <%= if result.model_name do %>
                                         <span class="text-xs">{result.model_name}</span>
                                       <% end %>
@@ -475,7 +473,7 @@
                         <% end %>
 
                         <%= if @search_query != "" and String.length(@search_query) >= 2 and @search_results == [] do %>
-                          <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                             No Gaiia {if(@tab == "sites",
                               do: "network sites",
                               else: "inventory items"
@@ -487,7 +485,7 @@
                         type="button"
                         id="cancel-link"
                         phx-click="cancel_link"
-                        class="flex-shrink-0 self-start text-sm text-cool-steel-500 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:text-cool-steel-300"
+                        class="flex-shrink-0 self-start text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
                       >
                         {t("Cancel")}
                       </button>
diff --git a/lib/towerops_web/live/org/gaiia_reconciliation_live.html.heex b/lib/towerops_web/live/org/gaiia_reconciliation_live.html.heex
index 5b0efab3..bf55fcd2 100644
--- a/lib/towerops_web/live/org/gaiia_reconciliation_live.html.heex
+++ b/lib/towerops_web/live/org/gaiia_reconciliation_live.html.heex
@@ -21,17 +21,17 @@
   </.header>
 
   <%!-- Sub-navigation tabs --%>
-  <div class="mt-4 border-b border-cool-steel-200 dark:border-white/10">
+  <div class="mt-4 border-b border-gray-200 dark:border-white/10">
     <nav class="flex space-x-6">
       <.link
         navigate={~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/mapping"}
-        class="border-b-2 border-transparent px-1 pb-3 text-sm font-medium text-cool-steel-500 hover:border-cool-steel-300 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:border-cool-steel-600 dark:hover:text-white"
+        class="border-b-2 border-transparent px-1 pb-3 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-white"
       >
         {t("Entity Mapping")}
       </.link>
       <.link
         navigate={~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/reconciliation"}
-        class="border-b-2 border-cerulean-500 px-1 pb-3 text-sm font-medium text-cerulean-600 dark:text-cerulean-400"
+        class="border-b-2 border-indigo-500 px-1 pb-3 text-sm font-medium text-indigo-600 dark:text-indigo-400"
       >
         {t("Reconciliation")}
       </.link>
@@ -39,29 +39,29 @@
   </div>
 
   <div class="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-5">
-    <div class="rounded-lg border border-cool-steel-200 bg-white p-4 dark:border-white/10 dark:bg-cool-steel-800/50">
-      <div class="text-2xl font-bold text-cool-steel-900 dark:text-white">
+    <div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-white/10 dark:bg-gray-800/50">
+      <div class="text-2xl font-bold text-gray-900 dark:text-white">
         {@report.summary.total_mapped}
       </div>
-      <div class="text-sm text-cool-steel-600 dark:text-cool-steel-400">Mapped</div>
+      <div class="text-sm text-gray-600 dark:text-gray-400">Mapped</div>
     </div>
-    <div class="rounded-lg border border-wheat-200 bg-wheat-50 p-4 dark:border-wheat-600/30 dark:bg-wheat-900/20">
-      <div class="text-2xl font-bold text-wheat-800 dark:text-wheat-400">
+    <div class="rounded-lg border border-yellow-200 bg-yellow-50 p-4 dark:border-yellow-600/30 dark:bg-yellow-900/20">
+      <div class="text-2xl font-bold text-yellow-800 dark:text-yellow-400">
         {@report.summary.missing_mapping_count}
       </div>
-      <div class="text-sm text-wheat-700 dark:text-wheat-500">Unmapped Items</div>
+      <div class="text-sm text-yellow-700 dark:text-yellow-500">Unmapped Items</div>
     </div>
-    <div class="rounded-lg border border-cerulean-200 bg-cerulean-50 p-4 dark:border-cerulean-600/30 dark:bg-cerulean-900/20">
-      <div class="text-2xl font-bold text-cerulean-800 dark:text-cerulean-400">
+    <div class="rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-600/30 dark:bg-blue-900/20">
+      <div class="text-2xl font-bold text-blue-800 dark:text-blue-400">
         {@report.summary.untracked_count}
       </div>
-      <div class="text-sm text-cerulean-700 dark:text-cerulean-500">Untracked Devices</div>
+      <div class="text-sm text-blue-700 dark:text-blue-500">Untracked Devices</div>
     </div>
-    <div class="rounded-lg border border-sweet-salmon-200 bg-sweet-salmon-50 p-4 dark:border-sweet-salmon-600/30 dark:bg-sweet-salmon-900/20">
-      <div class="text-2xl font-bold text-sweet-salmon-800 dark:text-sweet-salmon-400">
+    <div class="rounded-lg border border-red-200 bg-red-50 p-4 dark:border-red-600/30 dark:bg-red-900/20">
+      <div class="text-2xl font-bold text-red-800 dark:text-red-400">
         {@report.summary.mismatch_count}
       </div>
-      <div class="text-sm text-sweet-salmon-700 dark:text-sweet-salmon-500">Data Mismatches</div>
+      <div class="text-sm text-red-700 dark:text-red-500">Data Mismatches</div>
     </div>
     <div class="rounded-lg border border-purple-200 bg-purple-50 p-4 dark:border-purple-600/30 dark:bg-purple-900/20">
       <div class="text-2xl font-bold text-purple-800 dark:text-purple-400">
@@ -72,7 +72,7 @@
   </div>
 
   <div class="mt-6 mb-6 flex items-center justify-between">
-    <div class="inline-flex rounded-lg border border-cool-steel-200 dark:border-white/10">
+    <div class="inline-flex rounded-lg border border-gray-200 dark:border-white/10">
       <.link
         patch={
           ~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/reconciliation?tab=summary"
@@ -80,9 +80,9 @@
         class={[
           "px-4 py-2 text-sm font-medium rounded-l-lg",
           @active_tab == "summary" &&
-            "bg-cerulean-600 text-white dark:bg-cerulean-500",
+            "bg-blue-600 text-white dark:bg-blue-500",
           @active_tab != "summary" &&
-            "bg-white text-cool-steel-700 hover:bg-cool-steel-50 dark:bg-cool-steel-800/50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+            "bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-gray-300 dark:hover:bg-gray-800"
         ]}
       >
         {t("Summary")}
@@ -92,11 +92,11 @@
           ~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/reconciliation?tab=untracked"
         }
         class={[
-          "px-4 py-2 text-sm font-medium border-l border-cool-steel-200 dark:border-white/10",
+          "px-4 py-2 text-sm font-medium border-l border-gray-200 dark:border-white/10",
           @active_tab == "untracked" &&
-            "bg-cerulean-600 text-white dark:bg-cerulean-500",
+            "bg-blue-600 text-white dark:bg-blue-500",
           @active_tab != "untracked" &&
-            "bg-white text-cool-steel-700 hover:bg-cool-steel-50 dark:bg-cool-steel-800/50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+            "bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-gray-300 dark:hover:bg-gray-800"
         ]}
       >
         Untracked ({@report.summary.untracked_count})
@@ -106,11 +106,11 @@
           ~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/reconciliation?tab=mismatches"
         }
         class={[
-          "px-4 py-2 text-sm font-medium border-l border-cool-steel-200 dark:border-white/10",
+          "px-4 py-2 text-sm font-medium border-l border-gray-200 dark:border-white/10",
           @active_tab == "mismatches" &&
-            "bg-cerulean-600 text-white dark:bg-cerulean-500",
+            "bg-blue-600 text-white dark:bg-blue-500",
           @active_tab != "mismatches" &&
-            "bg-white text-cool-steel-700 hover:bg-cool-steel-50 dark:bg-cool-steel-800/50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+            "bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-gray-300 dark:hover:bg-gray-800"
         ]}
       >
         Mismatches ({@report.summary.mismatch_count})
@@ -120,11 +120,11 @@
           ~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/reconciliation?tab=unmapped"
         }
         class={[
-          "px-4 py-2 text-sm font-medium border-l border-cool-steel-200 dark:border-white/10",
+          "px-4 py-2 text-sm font-medium border-l border-gray-200 dark:border-white/10",
           @active_tab == "unmapped" &&
-            "bg-cerulean-600 text-white dark:bg-cerulean-500",
+            "bg-blue-600 text-white dark:bg-blue-500",
           @active_tab != "unmapped" &&
-            "bg-white text-cool-steel-700 hover:bg-cool-steel-50 dark:bg-cool-steel-800/50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+            "bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-gray-300 dark:hover:bg-gray-800"
         ]}
       >
         Unmapped ({@report.summary.missing_mapping_count})
@@ -134,11 +134,11 @@
           ~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/reconciliation?tab=ghosts"
         }
         class={[
-          "px-4 py-2 text-sm font-medium rounded-r-lg border-l border-cool-steel-200 dark:border-white/10",
+          "px-4 py-2 text-sm font-medium rounded-r-lg border-l border-gray-200 dark:border-white/10",
           @active_tab == "ghosts" &&
-            "bg-cerulean-600 text-white dark:bg-cerulean-500",
+            "bg-blue-600 text-white dark:bg-blue-500",
           @active_tab != "ghosts" &&
-            "bg-white text-cool-steel-700 hover:bg-cool-steel-50 dark:bg-cool-steel-800/50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+            "bg-white text-gray-700 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-gray-300 dark:hover:bg-gray-800"
         ]}
       >
         Ghosts ({@report.summary.ghost_count})
@@ -147,7 +147,7 @@
 
     <button
       phx-click="refresh"
-      class="inline-flex items-center gap-1.5 rounded-lg border border-cool-steel-200 bg-white px-3 py-2 text-sm font-medium text-cool-steel-700 hover:bg-cool-steel-50 dark:border-white/10 dark:bg-cool-steel-800/50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+      class="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-800/50 dark:text-gray-300 dark:hover:bg-gray-800"
     >
       <.icon name="hero-arrow-path" class="h-4 w-4" />
       {t("Refresh")}
@@ -158,61 +158,61 @@
     <% "untracked" -> %>
       <div class="space-y-2">
         <%= if @report.untracked_devices == [] do %>
-          <p class="py-8 text-center text-sm text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="py-8 text-center text-sm text-gray-500 dark:text-gray-400">
             {t("All Towerops devices have matching Gaiia inventory items.")}
           </p>
         <% else %>
           <div class="mb-4 flex items-center gap-3">
             <button
               phx-click="auto_match"
-              class="inline-flex items-center gap-1.5 rounded-lg bg-cerulean-600 px-4 py-2 text-sm font-medium text-white hover:bg-cerulean-700"
+              class="inline-flex items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700"
             >
               <.icon name="hero-bolt" class="h-4 w-4" />
               {t("Auto-Match All")}
             </button>
-            <span class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+            <span class="text-sm text-gray-500 dark:text-gray-400">
               {t("Links by MAC, IP, or site assignment.")}
             </span>
           </div>
-          <div class="overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10">
-            <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-              <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/50">
+          <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
+            <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+              <thead class="bg-gray-50 dark:bg-gray-800/50">
                 <tr>
-                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     {t("Device")}
                   </th>
-                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     {t("IP Address")}
                   </th>
-                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     {t("Site")}
                   </th>
-                  <th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                  <th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     {t("Actions")}
                   </th>
                 </tr>
               </thead>
-              <tbody class="divide-y divide-cool-steel-200 bg-white dark:divide-white/5 dark:bg-transparent">
+              <tbody class="divide-y divide-gray-200 bg-white dark:divide-white/5 dark:bg-transparent">
                 <%= for entry <- @report.untracked_devices do %>
                   <tr>
-                    <td class="whitespace-nowrap px-4 py-3 text-sm text-cool-steel-900 dark:text-white">
+                    <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-900 dark:text-white">
                       <.link
                         navigate={~p"/devices/#{entry.device.id}"}
-                        class="text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                        class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
                       >
                         {entry.device.name}
                       </.link>
                     </td>
-                    <td class="whitespace-nowrap px-4 py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                    <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                       <a
                         href={"http://#{entry.device.ip_address}"}
                         target="_blank"
-                        class="text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                        class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
                       >
                         {entry.device.ip_address}
                       </a>
                     </td>
-                    <td class="whitespace-nowrap px-4 py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                    <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                       <%= if entry.device.site do %>
                         {entry.device.site.name}
                       <% end %>
@@ -224,7 +224,7 @@
                             <form phx-change="select_manufacturer">
                               <select
                                 name="manufacturer_id"
-                                class="rounded border border-cool-steel-300 bg-white px-2 py-1 text-xs text-cool-steel-700 dark:border-white/10 dark:bg-cool-steel-800 dark:text-cool-steel-300"
+                                class="rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 dark:border-white/10 dark:bg-gray-800 dark:text-gray-300"
                               >
                                 <option value="">{t("Select manufacturer")}</option>
                                 <%= for mfr <- @manufacturers do %>
@@ -245,21 +245,21 @@
                                 <input type="hidden" name="device_id" value={entry.device.id} />
                                 <select
                                   name="model_id"
-                                  class="rounded border border-cool-steel-300 bg-white px-2 py-1 text-xs text-cool-steel-700 dark:border-white/10 dark:bg-cool-steel-800 dark:text-cool-steel-300"
+                                  class="rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 dark:border-white/10 dark:bg-gray-800 dark:text-gray-300"
                                 >
                                   <option value="">{t("Select model")}</option>
                                   <%= for model <- Map.get(@models, @selected_manufacturer, []) do %>
                                     <option value={model["id"]}>{model["name"]}</option>
                                   <% end %>
                                 </select>
-                                <button class="rounded bg-cerulean-600 px-2.5 py-1 text-xs font-medium text-white hover:bg-cerulean-700">
+                                <button class="rounded bg-indigo-600 px-2.5 py-1 text-xs font-medium text-white hover:bg-indigo-700">
                                   {t("Create")}
                                 </button>
                               </form>
                             <% end %>
                             <button
                               phx-click="cancel_create"
-                              class="rounded px-2 py-1 text-xs text-cool-steel-500 hover:text-cool-steel-700 dark:text-cool-steel-400"
+                              class="rounded px-2 py-1 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400"
                             >
                               {t("Cancel")}
                             </button>
@@ -273,13 +273,13 @@
                                 name="query"
                                 value={@link_search_query}
                                 placeholder={t("Search by name or IP...")}
-                                class="rounded border border-cool-steel-300 bg-white px-2 py-1 text-xs text-cool-steel-700 dark:border-white/10 dark:bg-cool-steel-800 dark:text-cool-steel-300"
+                                class="rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 dark:border-white/10 dark:bg-gray-800 dark:text-gray-300"
                                 autocomplete="off"
                               />
                             </form>
                             <button
                               phx-click="cancel_link_search"
-                              class="rounded px-2 py-1 text-xs text-cool-steel-500 hover:text-cool-steel-700 dark:text-cool-steel-400"
+                              class="rounded px-2 py-1 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400"
                             >
                               {t("Cancel")}
                             </button>
@@ -289,14 +289,14 @@
                             <button
                               phx-click="start_link_search"
                               phx-value-device_id={entry.device.id}
-                              class="rounded bg-white px-2.5 py-1 text-xs font-medium text-cool-steel-700 border border-cool-steel-300 hover:bg-cool-steel-50 dark:border-white/10 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700"
+                              class="rounded bg-white px-2.5 py-1 text-xs font-medium text-gray-700 border border-gray-300 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
                             >
                               {t("Link")}
                             </button>
                             <button
                               phx-click="open_create_form"
                               phx-value-device_id={entry.device.id}
-                              class="inline-flex items-center gap-1 rounded bg-cerulean-600 px-2.5 py-1 text-xs font-medium text-white hover:bg-cerulean-700"
+                              class="inline-flex items-center gap-1 rounded bg-indigo-600 px-2.5 py-1 text-xs font-medium text-white hover:bg-indigo-700"
                             >
                               {t("Create in Gaiia")}
                             </button>
@@ -307,15 +307,15 @@
                   <%!-- Search results row for link search --%>
                   <%= if @open_link_for == entry.device.id and @link_search_results != [] do %>
                     <tr>
-                      <td colspan="4" class="px-4 py-2 bg-cool-steel-50 dark:bg-cool-steel-800/50">
+                      <td colspan="4" class="px-4 py-2 bg-gray-50 dark:bg-gray-800/50">
                         <div class="space-y-1">
                           <%= for item <- @link_search_results do %>
-                            <div class="flex items-center justify-between rounded border border-cool-steel-200 bg-white px-3 py-2 dark:border-white/10 dark:bg-cool-steel-800">
+                            <div class="flex items-center justify-between rounded border border-gray-200 bg-white px-3 py-2 dark:border-white/10 dark:bg-gray-800">
                               <div>
-                                <span class="text-sm font-medium text-cool-steel-900 dark:text-white">
+                                <span class="text-sm font-medium text-gray-900 dark:text-white">
                                   {item.name}
                                 </span>
-                                <span class="ml-2 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                                <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">
                                   {item.ip_address || "—"}
                                 </span>
                               </div>
@@ -323,7 +323,7 @@
                                 phx-click="link_to_gaiia"
                                 phx-value-device_id={entry.device.id}
                                 phx-value-gaiia_id={item.gaiia_id}
-                                class="rounded bg-cerulean-600 px-2 py-1 text-xs font-medium text-white hover:bg-cerulean-700"
+                                class="rounded bg-indigo-600 px-2 py-1 text-xs font-medium text-white hover:bg-indigo-700"
                               >
                                 {t("Link")}
                               </button>
@@ -342,46 +342,46 @@
     <% "mismatches" -> %>
       <div class="space-y-2">
         <%= if @report.data_mismatches == [] do %>
-          <p class="py-8 text-center text-sm text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="py-8 text-center text-sm text-gray-500 dark:text-gray-400">
             {t("No data mismatches found between mapped devices.")}
           </p>
         <% else %>
-          <div class="overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10">
-            <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-              <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/50">
+          <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
+            <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+              <thead class="bg-gray-50 dark:bg-gray-800/50">
                 <tr>
-                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     {t("Device")}
                   </th>
-                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     {t("Field")}
                   </th>
-                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     {t("Towerops")}
                   </th>
-                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     {t("Gaiia")}
                   </th>
                 </tr>
               </thead>
-              <tbody class="divide-y divide-cool-steel-200 bg-white dark:divide-white/5 dark:bg-transparent">
+              <tbody class="divide-y divide-gray-200 bg-white dark:divide-white/5 dark:bg-transparent">
                 <%= for mismatch <- @report.data_mismatches do %>
                   <tr>
-                    <td class="whitespace-nowrap px-4 py-3 text-sm text-cool-steel-900 dark:text-white">
+                    <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-900 dark:text-white">
                       <.link
                         navigate={~p"/devices/#{mismatch.device.id}"}
-                        class="text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                        class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
                       >
                         {mismatch.device.name}
                       </.link>
                     </td>
-                    <td class="whitespace-nowrap px-4 py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                    <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                       {mismatch.field}
                     </td>
-                    <td class="whitespace-nowrap px-4 py-3 text-sm font-mono text-cool-steel-900 dark:text-white">
+                    <td class="whitespace-nowrap px-4 py-3 text-sm font-mono text-gray-900 dark:text-white">
                       {mismatch.towerops_value}
                     </td>
-                    <td class="whitespace-nowrap px-4 py-3 text-sm font-mono text-sweet-salmon-600 dark:text-sweet-salmon-400">
+                    <td class="whitespace-nowrap px-4 py-3 text-sm font-mono text-red-600 dark:text-red-400">
                       {mismatch.gaiia_value}
                     </td>
                   </tr>
@@ -394,41 +394,41 @@
     <% "unmapped" -> %>
       <div class="space-y-2">
         <%= if @report.missing_mappings == [] do %>
-          <p class="py-8 text-center text-sm text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="py-8 text-center text-sm text-gray-500 dark:text-gray-400">
             {t("All Gaiia inventory items are mapped to Towerops devices.")}
           </p>
         <% else %>
-          <div class="overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10">
-            <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-              <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/50">
+          <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
+            <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+              <thead class="bg-gray-50 dark:bg-gray-800/50">
                 <tr>
-                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     {t("Gaiia Item")}
                   </th>
-                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     {t("IP Address")}
                   </th>
-                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     {t("Category")}
                   </th>
-                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     {t("Status")}
                   </th>
                 </tr>
               </thead>
-              <tbody class="divide-y divide-cool-steel-200 bg-white dark:divide-white/5 dark:bg-transparent">
+              <tbody class="divide-y divide-gray-200 bg-white dark:divide-white/5 dark:bg-transparent">
                 <%= for entry <- @report.missing_mappings do %>
                   <tr>
-                    <td class="whitespace-nowrap px-4 py-3 text-sm text-cool-steel-900 dark:text-white">
+                    <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-900 dark:text-white">
                       {entry.inventory_item.name}
                     </td>
-                    <td class="whitespace-nowrap px-4 py-3 text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+                    <td class="whitespace-nowrap px-4 py-3 text-sm font-mono text-gray-600 dark:text-gray-400">
                       {entry.inventory_item.ip_address || "—"}
                     </td>
-                    <td class="whitespace-nowrap px-4 py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                    <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                       {entry.inventory_item.category || "—"}
                     </td>
-                    <td class="whitespace-nowrap px-4 py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                    <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                       {entry.inventory_item.status || "—"}
                     </td>
                   </tr>
@@ -441,43 +441,43 @@
     <% "ghosts" -> %>
       <div class="space-y-2">
         <%= if @report.ghost_devices == [] do %>
-          <p class="py-8 text-center text-sm text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="py-8 text-center text-sm text-gray-500 dark:text-gray-400">
             {t("No stale mappings — all linked Gaiia items reference existing Towerops devices.")}
           </p>
         <% else %>
-          <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="text-sm text-gray-500 dark:text-gray-400">
             {t(
               "These Gaiia inventory items are linked to Towerops devices that no longer exist. Unlink them to restore them to the unmapped pool."
             )}
           </p>
-          <div class="overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10">
-            <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-              <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/50">
+          <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
+            <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+              <thead class="bg-gray-50 dark:bg-gray-800/50">
                 <tr>
-                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     {t("Gaiia Item")}
                   </th>
-                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     {t("IP Address")}
                   </th>
-                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     {t("Status")}
                   </th>
-                  <th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                  <th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     {t("Actions")}
                   </th>
                 </tr>
               </thead>
-              <tbody class="divide-y divide-cool-steel-200 bg-white dark:divide-white/5 dark:bg-transparent">
+              <tbody class="divide-y divide-gray-200 bg-white dark:divide-white/5 dark:bg-transparent">
                 <%= for entry <- @report.ghost_devices do %>
                   <tr>
-                    <td class="whitespace-nowrap px-4 py-3 text-sm text-cool-steel-900 dark:text-white">
+                    <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-900 dark:text-white">
                       {entry.inventory_item.name}
                     </td>
-                    <td class="whitespace-nowrap px-4 py-3 text-sm font-mono text-cool-steel-600 dark:text-cool-steel-400">
+                    <td class="whitespace-nowrap px-4 py-3 text-sm font-mono text-gray-600 dark:text-gray-400">
                       {entry.inventory_item.ip_address || "—"}
                     </td>
-                    <td class="whitespace-nowrap px-4 py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                    <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                       {entry.inventory_item.status || "—"}
                     </td>
                     <td class="whitespace-nowrap px-4 py-3 text-right text-sm">
@@ -498,7 +498,7 @@
       </div>
     <% _ -> %>
       <div class="space-y-4">
-        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
           Last reconciled: {ToweropsWeb.TimeHelpers.format_datetime(
             @report.reconciled_at,
             @current_scope.timezone,
@@ -510,61 +510,59 @@
           <div class="py-8 text-center">
             <.icon
               name="hero-check-circle"
-              class="mx-auto h-12 w-12 text-cool-steel-400 dark:text-cool-steel-500"
+              class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500"
             />
-            <h3 class="mt-4 text-lg font-semibold text-cool-steel-900 dark:text-white">
+            <h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-white">
               {t("No inventory data")}
             </h3>
-            <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
               {t("Sync Gaiia data and map inventory items to see reconciliation results.")}
             </p>
             <.link
               navigate={~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/mapping"}
-              class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+              class="mt-4 inline-flex items-center gap-1 text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
             >
               Go to Entity Mapping <.icon name="hero-arrow-right" class="h-4 w-4" />
             </.link>
           </div>
         <% else %>
-          <div class="rounded-lg border border-cool-steel-200 bg-white p-6 dark:border-white/10 dark:bg-cool-steel-800/50">
-            <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
-              {t("Overview")}
-            </h3>
+          <div class="rounded-lg border border-gray-200 bg-white p-6 dark:border-white/10 dark:bg-gray-800/50">
+            <h3 class="text-sm font-semibold text-gray-900 dark:text-white">{t("Overview")}</h3>
             <dl class="mt-4 space-y-3">
               <div class="flex justify-between text-sm">
-                <dt class="text-cool-steel-600 dark:text-cool-steel-400">
+                <dt class="text-gray-600 dark:text-gray-400">
                   Mapped devices (Gaiia ↔ Towerops)
                 </dt>
-                <dd class="font-medium text-cool-steel-900 dark:text-white">
+                <dd class="font-medium text-gray-900 dark:text-white">
                   {@report.summary.total_mapped}
                 </dd>
               </div>
               <div class="flex justify-between text-sm">
-                <dt class="text-cool-steel-600 dark:text-cool-steel-400">
+                <dt class="text-gray-600 dark:text-gray-400">
                   {t("Unmapped Gaiia items (no Towerops link)")}
                 </dt>
-                <dd class="font-medium text-wheat-600 dark:text-wheat-400">
+                <dd class="font-medium text-yellow-600 dark:text-yellow-400">
                   {@report.summary.missing_mapping_count}
                 </dd>
               </div>
               <div class="flex justify-between text-sm">
-                <dt class="text-cool-steel-600 dark:text-cool-steel-400">
+                <dt class="text-gray-600 dark:text-gray-400">
                   {t("Untracked Towerops devices (not in Gaiia)")}
                 </dt>
-                <dd class="font-medium text-cerulean-600 dark:text-cerulean-400">
+                <dd class="font-medium text-blue-600 dark:text-blue-400">
                   {@report.summary.untracked_count}
                 </dd>
               </div>
               <div class="flex justify-between text-sm">
-                <dt class="text-cool-steel-600 dark:text-cool-steel-400">
+                <dt class="text-gray-600 dark:text-gray-400">
                   {t("Data mismatches (IP, serial, etc.)")}
                 </dt>
-                <dd class="font-medium text-sweet-salmon-600 dark:text-sweet-salmon-400">
+                <dd class="font-medium text-red-600 dark:text-red-400">
                   {@report.summary.mismatch_count}
                 </dd>
               </div>
               <div class="flex justify-between text-sm">
-                <dt class="text-cool-steel-600 dark:text-cool-steel-400">
+                <dt class="text-gray-600 dark:text-gray-400">
                   {t("Ghost mappings (stale device links)")}
                 </dt>
                 <dd class="font-medium text-purple-600 dark:text-purple-400">
diff --git a/lib/towerops_web/live/org/integrations_live.html.heex b/lib/towerops_web/live/org/integrations_live.html.heex
index 4d496fd9..270bbb33 100644
--- a/lib/towerops_web/live/org/integrations_live.html.heex
+++ b/lib/towerops_web/live/org/integrations_live.html.heex
@@ -3,19 +3,19 @@
   current_scope={@current_scope}
   unresolved_alert_count={assigns[:unresolved_alert_count] || 0}
 >
-  <div class="border-b border-cool-steel-200 pb-5 dark:border-white/5">
+  <div class="border-b border-gray-200 pb-5 dark:border-white/5">
     <div class="mb-4">
       <.link
         navigate={~p"/orgs/#{@organization.slug}/settings"}
-        class="inline-flex items-center gap-1 text-sm text-cool-steel-600 hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+        class="inline-flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
       >
         <.icon name="hero-arrow-left" class="h-4 w-4" /> Back to Settings
       </.link>
     </div>
-    <h1 class="text-3xl font-semibold tracking-tight text-cool-steel-900 dark:text-white">
+    <h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
       {t("Integrations")}
     </h1>
-    <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+    <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
       {t("Connect third-party services to enhance your monitoring capabilities.")}
     </p>
   </div>
@@ -23,10 +23,10 @@
   <div class="mt-8 space-y-10">
     <div :for={category <- @provider_categories}>
       <div class="mb-4">
-        <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
           {category.name}
         </h2>
-        <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
           {category.description}
         </p>
       </div>
@@ -38,41 +38,41 @@
             @integrations[p.id] && @integrations[p.id].enabled
           end) %>
         <div class="mb-4 flex items-center gap-2">
-          <span class="inline-flex items-center gap-1 rounded-full bg-cerulean-100 px-3 py-1 text-xs font-semibold text-cerulean-700 dark:bg-cerulean-900/40 dark:text-cerulean-300">
+          <span class="inline-flex items-center gap-1 rounded-full bg-indigo-100 px-3 py-1 text-xs font-semibold text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300">
             <.icon name="hero-arrow-path" class="h-3.5 w-3.5" /> Choose one
           </span>
-          <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
+          <span class="text-xs text-gray-500 dark:text-gray-400">
             — only one billing platform can be active at a time
           </span>
         </div>
-        <div class="rounded-lg border-2 border-cerulean-200 bg-white p-6 dark:border-cerulean-800/50 dark:bg-white/5">
+        <div class="rounded-lg border-2 border-indigo-200 bg-white p-6 dark:border-indigo-800/50 dark:bg-white/5">
           <%= if active_billing do %>
             <%!-- Active billing provider --%>
             <% integration = @integrations[active_billing.id] %>
             <div class="flex items-start justify-between">
               <div class="flex items-start gap-4">
-                <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-cerulean-50 dark:bg-cerulean-900/30">
+                <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-50 dark:bg-indigo-900/30">
                   <.icon
                     name={active_billing.icon}
-                    class="h-6 w-6 text-cerulean-600 dark:text-cerulean-400"
+                    class="h-6 w-6 text-indigo-600 dark:text-indigo-400"
                   />
                 </div>
                 <div>
                   <div class="flex items-center gap-3">
-                    <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                       {active_billing.name}
                     </h3>
                     <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900/30 dark:text-green-400">
                       Connected
                     </span>
                   </div>
-                  <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                  <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                     {active_billing.description}
                   </p>
 
                   <div class="mt-3 flex flex-wrap items-center gap-4">
                     <%= if integration.last_synced_at do %>
-                      <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                      <span class="text-xs text-gray-500 dark:text-gray-400">
                         {t("Last synced:")}
                         <.timestamp
                           datetime={integration.last_synced_at}
@@ -90,20 +90,20 @@
                             "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
 
                           "partial" ->
-                            "bg-wheat-100 text-wheat-700 dark:bg-wheat-900/30 dark:text-wheat-400"
+                            "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400"
 
                           "failed" ->
-                            "bg-sweet-salmon-100 text-sweet-salmon-700 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"
+                            "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
 
                           _ ->
-                            "bg-cool-steel-100 text-cool-steel-600 dark:bg-cool-steel-800 dark:text-cool-steel-400"
+                            "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
                         end
                       ]}>
                         {String.capitalize(integration.last_sync_status)}
                       </span>
                     <% end %>
 
-                    <span class="text-xs text-cool-steel-400 dark:text-cool-steel-500">
+                    <span class="text-xs text-gray-400 dark:text-gray-500">
                       · Syncs every {humanize_interval(integration.sync_interval_minutes)}
                       <%= if integration.last_synced_at do %>
                         · Next in ~{next_sync_minutes(
@@ -118,7 +118,7 @@
                         navigate={
                           ~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/mapping"
                         }
-                        class="text-sm text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                        class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
                       >
                         Device & Site Linking →
                       </.link>
@@ -126,7 +126,7 @@
                         navigate={
                           ~p"/orgs/#{@organization.slug}/settings/integrations/gaiia/reconciliation"
                         }
-                        class="text-sm text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                        class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
                       >
                         Comparison Report →
                       </.link>
@@ -140,7 +140,7 @@
                   type="button"
                   phx-click="toggle_enabled"
                   phx-value-provider={active_billing.id}
-                  class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-cerulean-600 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-cerulean-600 focus:ring-offset-2"
+                  class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-indigo-600 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
                 >
                   <span class="pointer-events-none inline-block h-5 w-5 translate-x-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out" />
                 </button>
@@ -149,7 +149,7 @@
                   id={"configure-#{active_billing.id}"}
                   phx-click="configure"
                   phx-value-provider={active_billing.id}
-                  class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-cool-steel-900 shadow-xs ring-1 ring-inset ring-cool-steel-300 hover:bg-cool-steel-50 dark:bg-white/10 dark:text-white dark:ring-white/10 dark:hover:bg-white/20"
+                  class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-white/10 dark:text-white dark:ring-white/10 dark:hover:bg-white/20"
                 >
                   {t("Configure")}
                 </button>
@@ -157,14 +157,14 @@
             </div>
 
             <%!-- Switch provider link --%>
-            <div class="mt-4 border-t border-cool-steel-100 pt-3 dark:border-white/5">
-              <p class="text-xs text-cool-steel-400 dark:text-cool-steel-500">
+            <div class="mt-4 border-t border-gray-100 pt-3 dark:border-white/5">
+              <p class="text-xs text-gray-400 dark:text-gray-500">
                 Using {active_billing.name}. To switch providers, disable this integration first.
               </p>
             </div>
           <% else %>
             <%!-- No active billing — show provider picker --%>
-            <p class="mb-4 text-sm text-cool-steel-600 dark:text-cool-steel-300 font-medium">
+            <p class="mb-4 text-sm text-gray-600 dark:text-gray-300 font-medium">
               {t("Which billing platform does your organization use?")}
             </p>
             <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
@@ -175,24 +175,24 @@
                 phx-click="configure"
                 phx-value-provider={provider.id}
                 class={[
-                  "group relative flex flex-col items-center rounded-lg border-2 p-4 text-center transition-all hover:border-cerulean-300 hover:bg-cerulean-50/50 dark:hover:border-cerulean-700 dark:hover:bg-cerulean-900/10",
+                  "group relative flex flex-col items-center rounded-lg border-2 p-4 text-center transition-all hover:border-indigo-300 hover:bg-indigo-50/50 dark:hover:border-indigo-700 dark:hover:bg-indigo-900/10",
                   if(@configuring == provider.id,
                     do:
-                      "border-cerulean-500 bg-cerulean-50/50 dark:border-cerulean-600 dark:bg-cerulean-900/20",
-                    else: "border-cool-steel-200 dark:border-white/10"
+                      "border-indigo-500 bg-indigo-50/50 dark:border-indigo-600 dark:bg-indigo-900/20",
+                    else: "border-gray-200 dark:border-white/10"
                   )
                 ]}
               >
-                <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-cerulean-50 group-hover:bg-cerulean-100 dark:bg-cerulean-900/30">
+                <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-50 group-hover:bg-indigo-100 dark:bg-indigo-900/30">
                   <.icon
                     name={provider.icon}
-                    class="h-5 w-5 text-cerulean-600 dark:text-cerulean-400"
+                    class="h-5 w-5 text-indigo-600 dark:text-indigo-400"
                   />
                 </div>
-                <span class="mt-2 text-sm font-semibold text-cool-steel-900 dark:text-white">
+                <span class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
                   {provider.name}
                 </span>
-                <span class="mt-0.5 text-xs text-cool-steel-500 dark:text-cool-steel-400 line-clamp-2">
+                <span class="mt-0.5 text-xs text-gray-500 dark:text-gray-400 line-clamp-2">
                   {provider.description}
                 </span>
               </button>
@@ -202,8 +202,8 @@
           <%!-- Config form for whichever billing provider is being configured --%>
           <%= if @configuring && find_category_id(@configuring) == "billing" do %>
             <% provider = Enum.find(category.providers, &(&1.id == @configuring)) %>
-            <div class="mt-6 border-t border-cool-steel-200 pt-6 dark:border-white/10">
-              <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-4">
+            <div class="mt-6 border-t border-gray-200 pt-6 dark:border-white/10">
+              <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-4">
                 Configure {provider.name}
               </h4>
               <.form
@@ -274,14 +274,14 @@
                       "rounded-md p-4",
                       case @test_result do
                         {:ok, _} -> "bg-green-50 dark:bg-green-900/20"
-                        {:error, _} -> "bg-sweet-salmon-50 dark:bg-sweet-salmon-900/20"
+                        {:error, _} -> "bg-red-50 dark:bg-red-900/20"
                       end
                     ]}>
                       <p class={[
                         "text-sm",
                         case @test_result do
                           {:ok, _} -> "text-green-800 dark:text-green-200"
-                          {:error, _} -> "text-sweet-salmon-800 dark:text-sweet-salmon-200"
+                          {:error, _} -> "text-red-800 dark:text-red-200"
                         end
                       ]}>
                         {elem(@test_result, 1)}
@@ -294,7 +294,7 @@
                       type="button"
                       id="test-connection"
                       phx-click="test_connection"
-                      class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-cool-steel-900 shadow-xs ring-1 ring-inset ring-cool-steel-300 hover:bg-cool-steel-50 dark:bg-white/10 dark:text-white dark:ring-white/10 dark:hover:bg-white/20"
+                      class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-white/10 dark:text-white dark:ring-white/10 dark:hover:bg-white/20"
                     >
                       {t("Test Connection")}
                     </button>
@@ -302,14 +302,14 @@
                       <button
                         type="button"
                         phx-click="close_config"
-                        class="text-sm font-semibold text-cool-steel-900 dark:text-white"
+                        class="text-sm font-semibold text-gray-900 dark:text-white"
                       >
                         {t("Cancel")}
                       </button>
                       <button
                         type="submit"
                         phx-disable-with={t("Saving...")}
-                        class="rounded-md bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-cerulean-500 dark:bg-cerulean-500 dark:hover:bg-cerulean-400"
+                        class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400"
                       >
                         {t("Save")}
                       </button>
@@ -321,11 +321,11 @@
 
             <%!-- Gaiia webhook config --%>
             <%= if @configuring == "gaiia" && @integrations["gaiia"] do %>
-              <div class="mt-6 border-t border-cool-steel-200 pt-6 dark:border-white/10">
-                <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+              <div class="mt-6 border-t border-gray-200 pt-6 dark:border-white/10">
+                <h4 class="text-sm font-semibold text-gray-900 dark:text-white">
                   {t("Webhook Configuration")}
                 </h4>
-                <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-300">
+                <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
                   {t(
                     "Webhooks keep your data in sync in real-time. Without webhooks, data is only updated during scheduled syncs (every %{interval} minutes). With webhooks enabled, changes in Gaiia are reflected here within seconds.",
                     interval:
@@ -336,18 +336,18 @@
                   )}
                 </p>
 
-                <div class="mt-4 rounded-md bg-cool-steel-50 p-4 dark:bg-white/5">
-                  <h5 class="text-xs font-semibold text-cool-steel-700 dark:text-cool-steel-300">
+                <div class="mt-4 rounded-md bg-gray-50 p-4 dark:bg-white/5">
+                  <h5 class="text-xs font-semibold text-gray-700 dark:text-gray-300">
                     {t("What webhooks enable")}
                   </h5>
-                  <ul class="mt-2 space-y-1.5 text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                  <ul class="mt-2 space-y-1.5 text-xs text-gray-600 dark:text-gray-400">
                     <li class="flex items-start gap-2">
                       <.icon
                         name="hero-user-group"
-                        class="mt-0.5 h-3.5 w-3.5 shrink-0 text-cool-steel-400"
+                        class="mt-0.5 h-3.5 w-3.5 shrink-0 text-gray-400"
                       />
                       <span>
-                        <span class="font-medium text-cool-steel-700 dark:text-cool-steel-300">
+                        <span class="font-medium text-gray-700 dark:text-gray-300">
                           Account changes
                         </span>
                         — new subscribers, status changes, and address updates are reflected instantly for accurate outage impact analysis.
@@ -356,10 +356,10 @@
                     <li class="flex items-start gap-2">
                       <.icon
                         name="hero-credit-card"
-                        class="mt-0.5 h-3.5 w-3.5 shrink-0 text-cool-steel-400"
+                        class="mt-0.5 h-3.5 w-3.5 shrink-0 text-gray-400"
                       />
                       <span>
-                        <span class="font-medium text-cool-steel-700 dark:text-cool-steel-300">
+                        <span class="font-medium text-gray-700 dark:text-gray-300">
                           Billing subscription changes
                         </span>
                         — plan upgrades, cancellations, and MRR changes stay current so revenue impact estimates are always accurate.
@@ -368,10 +368,10 @@
                     <li class="flex items-start gap-2">
                       <.icon
                         name="hero-wrench-screwdriver"
-                        class="mt-0.5 h-3.5 w-3.5 shrink-0 text-cool-steel-400"
+                        class="mt-0.5 h-3.5 w-3.5 shrink-0 text-gray-400"
                       />
                       <span>
-                        <span class="font-medium text-cool-steel-700 dark:text-cool-steel-300">
+                        <span class="font-medium text-gray-700 dark:text-gray-300">
                           Inventory item changes
                         </span>
                         — equipment assignments, IP changes, and new installs are matched to your monitored devices automatically.
@@ -382,7 +382,7 @@
 
                 <div class="mt-4 space-y-4">
                   <div>
-                    <label class="block text-xs font-medium text-cool-steel-700 dark:text-cool-steel-300">
+                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300">
                       {t("Webhook URL")}
                     </label>
                     <div class="mt-1 flex items-center gap-2">
@@ -391,7 +391,7 @@
                         type="text"
                         readonly
                         value={webhook_url(@organization.id)}
-                        class="block w-full rounded-md border-cool-steel-300 bg-cool-steel-50 py-1.5 text-sm text-cool-steel-900 shadow-xs sm:leading-6 dark:border-white/10 dark:bg-white/5 dark:text-white"
+                        class="block w-full rounded-md border-gray-300 bg-gray-50 py-1.5 text-sm text-gray-900 shadow-xs sm:leading-6 dark:border-white/10 dark:bg-white/5 dark:text-white"
                       />
                       <button
                         type="button"
@@ -399,7 +399,7 @@
                         phx-update="ignore"
                         data-target="#gaiia-webhook-url"
                         id="copy-webhook-url"
-                        class="inline-flex items-center gap-1 rounded-md bg-white px-2.5 py-1.5 text-xs font-medium text-cool-steel-700 shadow-xs ring-1 ring-inset ring-cool-steel-300 hover:bg-cool-steel-50 dark:bg-white/10 dark:text-cool-steel-300 dark:ring-white/10 dark:hover:bg-white/20"
+                        class="inline-flex items-center gap-1 rounded-md bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-white/10 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-white/20"
                       >
                         <.icon name="hero-clipboard" class="h-3.5 w-3.5" /> Copy
                       </button>
@@ -407,7 +407,7 @@
                   </div>
 
                   <div>
-                    <label class="block text-xs font-medium text-cool-steel-700 dark:text-cool-steel-300">
+                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300">
                       {t("Webhook Secret")}
                     </label>
                     <div class="mt-1 flex items-center gap-2">
@@ -416,7 +416,7 @@
                         type="text"
                         readonly
                         value={get_credential(@integrations["gaiia"], "webhook_secret")}
-                        class="block w-full rounded-md border-cool-steel-300 bg-cool-steel-50 py-1.5 font-mono text-sm text-cool-steel-900 shadow-xs sm:leading-6 dark:border-white/10 dark:bg-white/5 dark:text-white"
+                        class="block w-full rounded-md border-gray-300 bg-gray-50 py-1.5 font-mono text-sm text-gray-900 shadow-xs sm:leading-6 dark:border-white/10 dark:bg-white/5 dark:text-white"
                       />
                       <button
                         type="button"
@@ -424,12 +424,12 @@
                         phx-update="ignore"
                         data-target="#gaiia-webhook-secret"
                         id="copy-webhook-secret"
-                        class="inline-flex items-center gap-1 rounded-md bg-white px-2.5 py-1.5 text-xs font-medium text-cool-steel-700 shadow-xs ring-1 ring-inset ring-cool-steel-300 hover:bg-cool-steel-50 dark:bg-white/10 dark:text-cool-steel-300 dark:ring-white/10 dark:hover:bg-white/20"
+                        class="inline-flex items-center gap-1 rounded-md bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-white/10 dark:text-gray-300 dark:ring-white/10 dark:hover:bg-white/20"
                       >
                         <.icon name="hero-clipboard" class="h-3.5 w-3.5" /> Copy
                       </button>
                     </div>
-                    <p class="mt-1 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                       {t(
                         "Used to verify that incoming webhooks are genuinely from Gaiia. Keep this secret."
                       )}
@@ -444,18 +444,18 @@
                             "Are you sure? Any existing Gaiia webhook using the current secret will stop working."
                           )
                         }
-                        class="text-xs text-sweet-salmon-600 hover:text-sweet-salmon-700 dark:text-sweet-salmon-400 dark:hover:text-sweet-salmon-300"
+                        class="text-xs text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
                       >
                         {t("Regenerate Secret")}
                       </button>
                     </div>
                   </div>
 
-                  <div class="rounded-md bg-cerulean-50 p-3 dark:bg-cerulean-900/20">
-                    <h5 class="text-xs font-medium text-cerulean-800 dark:text-cerulean-300">
+                  <div class="rounded-md bg-blue-50 p-3 dark:bg-blue-900/20">
+                    <h5 class="text-xs font-medium text-blue-800 dark:text-blue-300">
                       {t("Setup Instructions")}
                     </h5>
-                    <ol class="mt-2 list-inside list-decimal space-y-1.5 text-xs text-cerulean-700 dark:text-cerulean-400">
+                    <ol class="mt-2 list-inside list-decimal space-y-1.5 text-xs text-blue-700 dark:text-blue-400">
                       <li>
                         In your Gaiia admin panel, navigate to
                         <span class="font-semibold">Settings → Webhooks</span>
@@ -479,7 +479,7 @@
                       </li>
                       <li>Save the webhook configuration in Gaiia</li>
                     </ol>
-                    <p class="mt-3 text-xs text-cerulean-600 dark:text-cerulean-400/80">
+                    <p class="mt-3 text-xs text-blue-600 dark:text-blue-400/80">
                       {t(
                         "Once configured, Gaiia will send updates to Towerops automatically. You can verify it's working by making a change in Gaiia and checking that it appears here within a few seconds."
                       )}
@@ -495,21 +495,21 @@
         <div class="space-y-4">
           <div
             :for={provider <- category.providers}
-            class="rounded-lg border border-cool-steel-200 bg-white p-6 dark:border-white/10 dark:bg-white/5"
+            class="rounded-lg border border-gray-200 bg-white p-6 dark:border-white/10 dark:bg-white/5"
           >
             <div class="flex items-start justify-between">
               <div class="flex items-start gap-4">
-                <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-cerulean-50 dark:bg-cerulean-900/30">
+                <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-indigo-50 dark:bg-indigo-900/30">
                   <.icon
                     name={provider.icon}
-                    class="h-6 w-6 text-cerulean-600 dark:text-cerulean-400"
+                    class="h-6 w-6 text-indigo-600 dark:text-indigo-400"
                   />
                 </div>
                 <div>
-                  <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white">
+                  <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                     {provider.name}
                   </h3>
-                  <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                  <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                     {provider.description}
                   </p>
 
@@ -520,15 +520,14 @@
                         if(integration.enabled,
                           do:
                             "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400",
-                          else:
-                            "bg-cool-steel-100 text-cool-steel-600 dark:bg-cool-steel-800 dark:text-cool-steel-400"
+                          else: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
                         )
                       ]}>
                         {if integration.enabled, do: "Enabled", else: "Disabled"}
                       </span>
 
                       <%= if integration.last_synced_at do %>
-                        <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                        <span class="text-xs text-gray-500 dark:text-gray-400">
                           {t("Last synced:")}
                           <.timestamp
                             datetime={integration.last_synced_at}
@@ -546,20 +545,20 @@
                               "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400"
 
                             "partial" ->
-                              "bg-wheat-100 text-wheat-700 dark:bg-wheat-900/30 dark:text-wheat-400"
+                              "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400"
 
                             "failed" ->
-                              "bg-sweet-salmon-100 text-sweet-salmon-700 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"
+                              "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
 
                             _ ->
-                              "bg-cool-steel-100 text-cool-steel-600 dark:bg-cool-steel-800 dark:text-cool-steel-400"
+                              "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
                           end
                         ]}>
                           {String.capitalize(integration.last_sync_status)}
                         </span>
                       <% end %>
 
-                      <span class="text-xs text-cool-steel-400 dark:text-cool-steel-500">
+                      <span class="text-xs text-gray-400 dark:text-gray-500">
                         · Syncs every {humanize_interval(integration.sync_interval_minutes)}
                         <%= if integration.last_synced_at do %>
                           · Next in ~{next_sync_minutes(
@@ -574,13 +573,13 @@
                           navigate={
                             ~p"/orgs/#{@organization.slug}/settings/integrations/preseem/devices"
                           }
-                          class="text-sm text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                          class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
                         >
                           Manage Devices →
                         </.link>
                         <.link
                           navigate={~p"/insights?source=preseem"}
-                          class="text-sm text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                          class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
                         >
                           Network Insights →
                         </.link>
@@ -597,10 +596,10 @@
                     phx-click="toggle_enabled"
                     phx-value-provider={provider.id}
                     class={[
-                      "relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-cerulean-600 focus:ring-offset-2",
+                      "relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2",
                       if(integration.enabled,
-                        do: "bg-cerulean-600",
-                        else: "bg-cool-steel-200 dark:bg-cool-steel-700"
+                        do: "bg-indigo-600",
+                        else: "bg-gray-200 dark:bg-gray-700"
                       )
                     ]}
                   >
@@ -616,7 +615,7 @@
                   id={"configure-#{provider.id}"}
                   phx-click="configure"
                   phx-value-provider={provider.id}
-                  class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-cool-steel-900 shadow-xs ring-1 ring-inset ring-cool-steel-300 hover:bg-cool-steel-50 dark:bg-white/10 dark:text-white dark:ring-white/10 dark:hover:bg-white/20"
+                  class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-white/10 dark:text-white dark:ring-white/10 dark:hover:bg-white/20"
                 >
                   {t("Configure")}
                 </button>
@@ -624,7 +623,7 @@
             </div>
 
             <%= if @configuring == provider.id do %>
-              <div class="mt-6 border-t border-cool-steel-200 pt-6 dark:border-white/10">
+              <div class="mt-6 border-t border-gray-200 pt-6 dark:border-white/10">
                 <.form
                   for={@form}
                   id={"#{provider.id}-form"}
@@ -698,14 +697,14 @@
                         "rounded-md p-4",
                         case @test_result do
                           {:ok, _} -> "bg-green-50 dark:bg-green-900/20"
-                          {:error, _} -> "bg-sweet-salmon-50 dark:bg-sweet-salmon-900/20"
+                          {:error, _} -> "bg-red-50 dark:bg-red-900/20"
                         end
                       ]}>
                         <p class={[
                           "text-sm",
                           case @test_result do
                             {:ok, _} -> "text-green-800 dark:text-green-200"
-                            {:error, _} -> "text-sweet-salmon-800 dark:text-sweet-salmon-200"
+                            {:error, _} -> "text-red-800 dark:text-red-200"
                           end
                         ]}>
                           {elem(@test_result, 1)}
@@ -718,7 +717,7 @@
                         type="button"
                         id="test-connection"
                         phx-click="test_connection"
-                        class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-cool-steel-900 shadow-xs ring-1 ring-inset ring-cool-steel-300 hover:bg-cool-steel-50 dark:bg-white/10 dark:text-white dark:ring-white/10 dark:hover:bg-white/20"
+                        class="rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-white/10 dark:text-white dark:ring-white/10 dark:hover:bg-white/20"
                       >
                         {t("Test Connection")}
                       </button>
@@ -726,14 +725,14 @@
                         <button
                           type="button"
                           phx-click="close_config"
-                          class="text-sm font-semibold text-cool-steel-900 dark:text-white"
+                          class="text-sm font-semibold text-gray-900 dark:text-white"
                         >
                           {t("Cancel")}
                         </button>
                         <button
                           type="submit"
                           phx-disable-with={t("Saving...")}
-                          class="rounded-md bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-cerulean-500 dark:bg-cerulean-500 dark:hover:bg-cerulean-400"
+                          class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400"
                         >
                           {t("Save")}
                         </button>
diff --git a/lib/towerops_web/live/org/preseem_devices_live.ex b/lib/towerops_web/live/org/preseem_devices_live.ex
index a44d7c4d..fbabc550 100644
--- a/lib/towerops_web/live/org/preseem_devices_live.ex
+++ b/lib/towerops_web/live/org/preseem_devices_live.ex
@@ -108,13 +108,13 @@ defmodule ToweropsWeb.Org.PreseemDevicesLive do
   defp match_confidence_classes(confidence) do
     case confidence do
       "unmatched" ->
-        "bg-wheat-100 text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400"
+        "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"
 
       "ambiguous" ->
         "bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400"
 
       "manual" ->
-        "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-400"
+        "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
 
       _ ->
         "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400"
diff --git a/lib/towerops_web/live/org/preseem_devices_live.html.heex b/lib/towerops_web/live/org/preseem_devices_live.html.heex
index 7ef54a86..63f0c6eb 100644
--- a/lib/towerops_web/live/org/preseem_devices_live.html.heex
+++ b/lib/towerops_web/live/org/preseem_devices_live.html.heex
@@ -3,17 +3,17 @@
   current_scope={@current_scope}
   unresolved_alert_count={assigns[:unresolved_alert_count] || 0}
 >
-  <div class="border-b border-cool-steel-200 pb-5 dark:border-white/5">
+  <div class="border-b border-gray-200 pb-5 dark:border-white/5">
     <.breadcrumb items={[
       %{label: "Dashboard", navigate: ~p"/dashboard"},
       %{label: "Settings", navigate: ~p"/orgs/#{@organization.slug}/settings"},
       %{label: "Integrations", navigate: ~p"/orgs/#{@organization.slug}/settings/integrations"},
       %{label: "Preseem"}
     ]} />
-    <h1 class="text-3xl font-semibold tracking-tight text-cool-steel-900 dark:text-white">
+    <h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
       {t("Preseem Devices")}
     </h1>
-    <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+    <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
       {t(
         "For each Preseem access point, find and link the matching TowerOps device. This enables subscriber impact data when access points go down."
       )}
@@ -21,17 +21,17 @@
   </div>
 
   <%!-- Sub-navigation tabs --%>
-  <div class="mt-4 border-b border-cool-steel-200 dark:border-white/10">
+  <div class="mt-4 border-b border-gray-200 dark:border-white/10">
     <nav class="flex space-x-6">
       <.link
         navigate={~p"/orgs/#{@organization.slug}/settings/integrations/preseem/devices"}
-        class="border-b-2 border-cerulean-500 px-1 pb-3 text-sm font-medium text-cerulean-600 dark:text-cerulean-400"
+        class="border-b-2 border-indigo-500 px-1 pb-3 text-sm font-medium text-indigo-600 dark:text-indigo-400"
       >
         {t("Devices")}
       </.link>
       <.link
         navigate={~p"/insights?source=preseem"}
-        class="border-b-2 border-transparent px-1 pb-3 text-sm font-medium text-cool-steel-500 hover:border-cool-steel-300 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:border-cool-steel-600 dark:hover:text-white"
+        class="border-b-2 border-transparent px-1 pb-3 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:text-white"
       >
         {t("Insights")}
       </.link>
@@ -47,9 +47,9 @@
       class={[
         "rounded-full px-3 py-1 text-xs font-medium",
         if(@filter == f,
-          do: "bg-cerulean-100 text-cerulean-700 dark:bg-cerulean-900/40 dark:text-cerulean-300",
+          do: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300",
           else:
-            "bg-cool-steel-100 text-cool-steel-600 hover:bg-cool-steel-200 dark:bg-white/5 dark:text-cool-steel-400 dark:hover:bg-white/10"
+            "bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-white/5 dark:text-gray-400 dark:hover:bg-white/10"
         )
       ]}
     >
@@ -62,16 +62,13 @@
     <%= if @access_points == [] do %>
       <div
         id="empty-state"
-        class="rounded-lg border-2 border-dashed border-cool-steel-300 p-12 text-center dark:border-cool-steel-700"
+        class="rounded-lg border-2 border-dashed border-gray-300 p-12 text-center dark:border-gray-700"
       >
-        <.icon
-          name="hero-signal"
-          class="mx-auto h-12 w-12 text-cool-steel-400 dark:text-cool-steel-500"
-        />
-        <h3 class="mt-2 text-sm font-semibold text-cool-steel-900 dark:text-white">
+        <.icon name="hero-signal" class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" />
+        <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
           {t("No access points found")}
         </h3>
-        <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
           <%= case @filter do %>
             <% "unmatched" -> %>
               {t("All access points are matched. Nice!")}
@@ -85,48 +82,48 @@
         </p>
       </div>
     <% else %>
-      <div class="overflow-x-auto rounded-lg border border-cool-steel-200 dark:border-white/10">
-        <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-          <thead class="bg-cool-steel-50 dark:bg-white/5">
+      <div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-white/10">
+        <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+          <thead class="bg-gray-50 dark:bg-white/5">
             <tr>
               <th
                 scope="col"
-                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
+                class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
               >
                 {t("Access Point")}
               </th>
               <th
                 scope="col"
-                class="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 md:table-cell"
+                class="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400 md:table-cell"
               >
                 {t("IP Address")}
               </th>
               <th
                 scope="col"
-                class="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 sm:table-cell"
+                class="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400 sm:table-cell"
               >
                 {t("Status")}
               </th>
               <th
                 scope="col"
-                class="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 md:table-cell"
+                class="hidden px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400 md:table-cell"
               >
                 {t("Linked Device")}
               </th>
               <th
                 scope="col"
-                class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400"
+                class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400"
               >
                 {t("Actions")}
               </th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-cool-steel-200 bg-white dark:divide-white/5 dark:bg-transparent">
+          <tbody class="divide-y divide-gray-200 bg-white dark:divide-white/5 dark:bg-transparent">
             <%= for ap <- @access_points do %>
               <tr
                 id={"ap-row-#{ap.id}"}
                 class={[
-                  "hover:bg-cool-steel-50 dark:hover:bg-white/5",
+                  "hover:bg-gray-50 dark:hover:bg-white/5",
                   if(is_nil(ap.device), do: "cursor-pointer")
                 ]}
                 phx-click={if(is_nil(ap.device), do: "start_link")}
@@ -135,16 +132,16 @@
                 <td class="px-4 py-4 text-sm">
                   <div>
                     <div class="flex flex-wrap items-center gap-2">
-                      <span class="break-all font-medium text-cool-steel-900 dark:text-white">
+                      <span class="break-all font-medium text-gray-900 dark:text-white">
                         {ap.name || "Unnamed"}
                       </span>
                       <%= if Map.has_key?(@suggestions, ap.id) do %>
-                        <span class="inline-flex items-center rounded-full bg-wheat-100 px-2 py-0.5 text-xs font-medium text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400">
+                        <span class="inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800 dark:bg-amber-900/30 dark:text-amber-400">
                           <.icon name="hero-light-bulb-mini" class="mr-0.5 h-3 w-3" /> Match found
                         </span>
                       <% end %>
                     </div>
-                    <span class="mt-0.5 block text-xs text-cool-steel-400 dark:text-cool-steel-500 sm:hidden">
+                    <span class="mt-0.5 block text-xs text-gray-400 dark:text-gray-500 sm:hidden">
                       {ap.preseem_id}
                     </span>
                     <span class={[
@@ -155,13 +152,13 @@
                     </span>
                   </div>
                 </td>
-                <td class="hidden whitespace-nowrap px-4 py-4 text-sm text-cool-steel-500 dark:text-cool-steel-400 md:table-cell">
+                <td class="hidden whitespace-nowrap px-4 py-4 text-sm text-gray-500 dark:text-gray-400 md:table-cell">
                   <%= if ap.ip_address do %>
                     <a
                       href={"http://#{ap.ip_address}"}
                       target="_blank"
                       rel="noopener noreferrer"
-                      class="font-mono hover:text-cerulean-600 dark:hover:text-cerulean-400"
+                      class="font-mono hover:text-indigo-600 dark:hover:text-indigo-400"
                       onclick="event.stopPropagation()"
                     >
                       {ap.ip_address}
@@ -178,17 +175,17 @@
                     {humanize_confidence(ap.match_confidence)}
                   </span>
                 </td>
-                <td class="hidden whitespace-nowrap px-4 py-4 text-sm text-cool-steel-500 dark:text-cool-steel-400 md:table-cell">
+                <td class="hidden whitespace-nowrap px-4 py-4 text-sm text-gray-500 dark:text-gray-400 md:table-cell">
                   <%= if ap.device do %>
                     <.link
                       navigate={~p"/devices/#{ap.device.id}"}
-                      class="text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                      class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
                       onclick="event.stopPropagation()"
                     >
                       {ap.device.name || ap.device.ip_address}
                     </.link>
                   <% else %>
-                    <span class="inline-flex items-center rounded-full bg-cool-steel-100 px-2.5 py-0.5 text-xs font-medium text-cool-steel-500 dark:bg-white/10 dark:text-cool-steel-400">
+                    <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-500 dark:bg-white/10 dark:text-gray-400">
                       Not linked
                     </span>
                   <% end %>
@@ -201,7 +198,7 @@
                       phx-click="unlink_device"
                       phx-value-ap-id={ap.id}
                       data-confirm={t("Unlink this device from the Preseem access point?")}
-                      class="text-sweet-salmon-600 hover:text-sweet-salmon-800 dark:text-sweet-salmon-400 dark:hover:text-sweet-salmon-300"
+                      class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
                       onclick="event.stopPropagation()"
                     >
                       {t("Unlink")}
@@ -212,7 +209,7 @@
                       id={"link-ap-#{ap.id}"}
                       phx-click="start_link"
                       phx-value-ap-id={ap.id}
-                      class="text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                      class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
                       onclick="event.stopPropagation()"
                     >
                       {t("Link")}
@@ -222,19 +219,19 @@
               </tr>
               <%!-- Inline linking row --%>
               <%= if ap.id == @linking_ap_id do %>
-                <tr id={"linking-row-#{ap.id}"} class="bg-cerulean-50 dark:bg-cerulean-900/20">
+                <tr id={"linking-row-#{ap.id}"} class="bg-indigo-50 dark:bg-indigo-900/20">
                   <td colspan="5" class="px-4 py-4">
                     <div class="flex items-start gap-4">
                       <div class="flex-1">
-                        <p class="mb-2 text-sm font-medium text-cool-steel-900 dark:text-white">
+                        <p class="mb-2 text-sm font-medium text-gray-900 dark:text-white">
                           Find a TowerOps device to link to
-                          <span class="text-cerulean-600 dark:text-cerulean-400">{ap.name}</span>
+                          <span class="text-indigo-600 dark:text-indigo-400">{ap.name}</span>
                         </p>
 
                         <%!-- Suggestions --%>
                         <%= if suggestions = @suggestions[ap.id] do %>
                           <div class="mb-3">
-                            <p class="mb-1 text-xs font-medium text-wheat-700 dark:text-wheat-400">
+                            <p class="mb-1 text-xs font-medium text-amber-700 dark:text-amber-400">
                               <.icon name="hero-light-bulb-mini" class="mr-0.5 inline h-3 w-3" />
                               {t("Suggested match (same IP):")}
                             </p>
@@ -245,11 +242,11 @@
                                   phx-click="link_device"
                                   phx-value-ap-id={ap.id}
                                   phx-value-device-id={suggestion.device.id}
-                                  class="inline-flex items-center gap-1.5 rounded-md border border-wheat-300 bg-wheat-50 px-2.5 py-1.5 text-xs font-medium text-wheat-800 hover:bg-wheat-100 dark:border-wheat-700 dark:bg-wheat-900/20 dark:text-wheat-300 dark:hover:bg-wheat-900/40"
+                                  class="inline-flex items-center gap-1.5 rounded-md border border-amber-300 bg-amber-50 px-2.5 py-1.5 text-xs font-medium text-amber-800 hover:bg-amber-100 dark:border-amber-700 dark:bg-amber-900/20 dark:text-amber-300 dark:hover:bg-amber-900/40"
                                 >
                                   {suggestion.device.name || suggestion.device.ip_address ||
                                     "Unnamed"}
-                                  <span class="rounded bg-wheat-200 px-1 text-wheat-700 dark:bg-wheat-800 dark:text-wheat-300">
+                                  <span class="rounded bg-amber-200 px-1 text-amber-700 dark:bg-amber-800 dark:text-amber-300">
                                     {suggestion.match_type}
                                   </span>
                                 </button>
@@ -272,13 +269,13 @@
                             placeholder={t("Search by device name or IP...")}
                             autocomplete="off"
                             phx-debounce="300"
-                            class="block w-full rounded-md border-cool-steel-300 text-sm shadow-sm focus:border-cerulean-500 focus:ring-cerulean-500 dark:border-white/10 dark:bg-white/5 dark:text-white"
+                            class="block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-white/10 dark:bg-white/5 dark:text-white"
                           />
                         </form>
 
                         <%= if @search_results != [] do %>
-                          <div class="mt-2 max-h-48 overflow-y-auto rounded-md border border-cool-steel-200 bg-white dark:border-white/10 dark:bg-cool-steel-800">
-                            <ul class="divide-y divide-cool-steel-200 dark:divide-white/5">
+                          <div class="mt-2 max-h-48 overflow-y-auto rounded-md border border-gray-200 bg-white dark:border-white/10 dark:bg-gray-800">
+                            <ul class="divide-y divide-gray-200 dark:divide-white/5">
                               <li :for={device <- @search_results}>
                                 <button
                                   type="button"
@@ -286,15 +283,15 @@
                                   phx-click="link_device"
                                   phx-value-ap-id={ap.id}
                                   phx-value-device-id={device.id}
-                                  class="flex w-full items-center justify-between px-3 py-2 text-left text-sm hover:bg-cool-steel-50 dark:hover:bg-white/5"
+                                  class="flex w-full items-center justify-between px-3 py-2 text-left text-sm hover:bg-gray-50 dark:hover:bg-white/5"
                                 >
-                                  <span class="font-medium text-cool-steel-900 dark:text-white">
+                                  <span class="font-medium text-gray-900 dark:text-white">
                                     {device.name || "Unnamed"}
                                   </span>
-                                  <span class="flex items-center gap-2 text-cool-steel-500 dark:text-cool-steel-400">
+                                  <span class="flex items-center gap-2 text-gray-500 dark:text-gray-400">
                                     {device.ip_address}
                                     <%= if device.site do %>
-                                      <span class="text-xs text-cool-steel-400 dark:text-cool-steel-500">
+                                      <span class="text-xs text-gray-400 dark:text-gray-500">
                                         {device.site.name}
                                       </span>
                                     <% end %>
@@ -306,7 +303,7 @@
                         <% end %>
 
                         <%= if @device_search != "" and String.length(@device_search) >= 2 and @search_results == [] do %>
-                          <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                             No devices found matching "{@device_search}"
                           </p>
                         <% end %>
@@ -315,7 +312,7 @@
                         type="button"
                         id="cancel-link"
                         phx-click="cancel_link"
-                        class="flex-shrink-0 self-start text-sm text-cool-steel-500 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:text-cool-steel-300"
+                        class="flex-shrink-0 self-start text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
                       >
                         {t("Cancel")}
                       </button>
diff --git a/lib/towerops_web/live/org/preseem_insights_live.ex b/lib/towerops_web/live/org/preseem_insights_live.ex
index 8e93af78..e48c72e6 100644
--- a/lib/towerops_web/live/org/preseem_insights_live.ex
+++ b/lib/towerops_web/live/org/preseem_insights_live.ex
@@ -133,16 +133,16 @@ defmodule ToweropsWeb.Org.PreseemInsightsLive do
   defp urgency_classes(urgency) do
     case urgency do
       "critical" ->
-        "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"
+        "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
 
       "warning" ->
-        "bg-wheat-100 text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400"
+        "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"
 
       "info" ->
-        "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-400"
+        "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
 
       _ ->
-        "bg-cool-steel-100 text-cool-steel-600 dark:bg-cool-steel-800 dark:text-cool-steel-400"
+        "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
     end
   end
 
diff --git a/lib/towerops_web/live/org/preseem_insights_live.html.heex b/lib/towerops_web/live/org/preseem_insights_live.html.heex
index fded72e1..00186adf 100644
--- a/lib/towerops_web/live/org/preseem_insights_live.html.heex
+++ b/lib/towerops_web/live/org/preseem_insights_live.html.heex
@@ -3,7 +3,7 @@
   current_scope={@current_scope}
   unresolved_alert_count={assigns[:unresolved_alert_count] || 0}
 >
-  <div class="border-b border-cool-steel-200 pb-5 dark:border-white/5">
+  <div class="border-b border-gray-200 pb-5 dark:border-white/5">
     <.breadcrumb items={[
       %{label: "Dashboard", navigate: ~p"/dashboard"},
       %{label: "Settings", navigate: ~p"/orgs/#{@organization.slug}/settings"},
@@ -12,10 +12,10 @@
     ]} />
     <div class="flex items-center justify-between">
       <div>
-        <h1 class="text-3xl font-semibold tracking-tight text-cool-steel-900 dark:text-white">
+        <h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
           {t("Network Insights")}
         </h1>
-        <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
           {t("Proactive network health observations generated from Preseem data analysis.")}
         </p>
       </div>
@@ -23,7 +23,7 @@
   </div>
 
   <%!-- Filter bar --%>
-  <div class="mt-6 flex flex-wrap items-center gap-4 border-b border-cool-steel-200 pb-4 dark:border-white/10">
+  <div class="mt-6 flex flex-wrap items-center gap-4 border-b border-gray-200 pb-4 dark:border-white/10">
     <%!-- Status filter tabs --%>
     <nav class="flex space-x-4">
       <.link
@@ -34,10 +34,9 @@
         class={[
           "rounded-md px-3 py-1.5 text-sm font-medium",
           if(@filter_status == "active",
-            do:
-              "bg-cerulean-100 text-cerulean-700 dark:bg-cerulean-900/30 dark:text-cerulean-400",
+            do: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400",
             else:
-              "text-cool-steel-500 hover:bg-cool-steel-100 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:bg-white/10 dark:hover:text-cool-steel-300"
+              "text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-300"
           )
         ]}
       >
@@ -51,10 +50,9 @@
         class={[
           "rounded-md px-3 py-1.5 text-sm font-medium",
           if(@filter_status == "dismissed",
-            do:
-              "bg-cerulean-100 text-cerulean-700 dark:bg-cerulean-900/30 dark:text-cerulean-400",
+            do: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400",
             else:
-              "text-cool-steel-500 hover:bg-cool-steel-100 hover:text-cool-steel-700 dark:text-cool-steel-400 dark:hover:bg-white/10 dark:hover:text-cool-steel-300"
+              "text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-300"
           )
         ]}
       >
@@ -63,10 +61,8 @@
     </nav>
 
     <%!-- Urgency filter --%>
-    <div class="flex items-center gap-2 border-l border-cool-steel-200 pl-4 dark:border-white/10">
-      <span class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400">
-        Urgency:
-      </span>
+    <div class="flex items-center gap-2 border-l border-gray-200 pl-4 dark:border-white/10">
+      <span class="text-xs font-medium text-gray-500 dark:text-gray-400">Urgency:</span>
       <.link
         id="filter-urgency-all"
         patch={
@@ -75,9 +71,8 @@
         class={[
           "rounded-md px-2 py-1 text-xs font-medium",
           if(is_nil(@filter_urgency),
-            do: "bg-cool-steel-200 text-cool-steel-800 dark:bg-white/20 dark:text-white",
-            else:
-              "text-cool-steel-500 hover:bg-cool-steel-100 dark:text-cool-steel-400 dark:hover:bg-white/10"
+            do: "bg-gray-200 text-gray-800 dark:bg-white/20 dark:text-white",
+            else: "text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10"
           )
         ]}
       >
@@ -91,10 +86,8 @@
         class={[
           "rounded-md px-2 py-1 text-xs font-medium",
           if(@filter_urgency == "critical",
-            do:
-              "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400",
-            else:
-              "text-cool-steel-500 hover:bg-cool-steel-100 dark:text-cool-steel-400 dark:hover:bg-white/10"
+            do: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
+            else: "text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10"
           )
         ]}
       >
@@ -108,9 +101,8 @@
         class={[
           "rounded-md px-2 py-1 text-xs font-medium",
           if(@filter_urgency == "warning",
-            do: "bg-wheat-100 text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400",
-            else:
-              "text-cool-steel-500 hover:bg-cool-steel-100 dark:text-cool-steel-400 dark:hover:bg-white/10"
+            do: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400",
+            else: "text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10"
           )
         ]}
       >
@@ -124,10 +116,8 @@
         class={[
           "rounded-md px-2 py-1 text-xs font-medium",
           if(@filter_urgency == "info",
-            do:
-              "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-400",
-            else:
-              "text-cool-steel-500 hover:bg-cool-steel-100 dark:text-cool-steel-400 dark:hover:bg-white/10"
+            do: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
+            else: "text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-white/10"
           )
         ]}
       >
@@ -140,16 +130,16 @@
   <%= if any_selected?(@selected_ids) do %>
     <div
       id="bulk-actions"
-      class="mt-4 flex items-center gap-3 rounded-lg bg-cerulean-50 px-4 py-3 dark:bg-cerulean-900/20"
+      class="mt-4 flex items-center gap-3 rounded-lg bg-indigo-50 px-4 py-3 dark:bg-indigo-900/20"
     >
-      <span class="text-sm font-medium text-cerulean-700 dark:text-cerulean-300">
+      <span class="text-sm font-medium text-indigo-700 dark:text-indigo-300">
         {MapSet.size(@selected_ids)} selected
       </span>
       <button
         type="button"
         id="deselect-all-btn"
         phx-click="deselect_all"
-        class="text-sm text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+        class="text-sm text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
       >
         {t("Deselect All")}
       </button>
@@ -157,7 +147,7 @@
         type="button"
         id="bulk-dismiss-btn"
         phx-click="bulk_dismiss"
-        class="rounded-md bg-cerulean-600 px-3 py-1.5 text-sm font-medium text-white shadow-xs hover:bg-cerulean-500 dark:bg-cerulean-500 dark:hover:bg-cerulean-400"
+        class="rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-medium text-white shadow-xs hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400"
       >
         {t("Dismiss Selected")}
       </button>
@@ -169,16 +159,16 @@
     <%= if @insights == [] do %>
       <div
         id="empty-state"
-        class="rounded-lg border-2 border-dashed border-cool-steel-300 p-12 text-center dark:border-cool-steel-700"
+        class="rounded-lg border-2 border-dashed border-gray-300 p-12 text-center dark:border-gray-700"
       >
         <.icon
           name="hero-light-bulb"
-          class="mx-auto h-12 w-12 text-cool-steel-400 dark:text-cool-steel-500"
+          class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500"
         />
-        <h3 class="mt-2 text-sm font-semibold text-cool-steel-900 dark:text-white">
+        <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
           {t("No insights found")}
         </h3>
-        <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
           <%= cond do %>
             <% @filter_status == "dismissed" -> %>
               {t("No dismissed insights.")}
@@ -196,7 +186,7 @@
           type="button"
           id="select-all-btn"
           phx-click="select_all"
-          class="text-sm text-cool-steel-600 hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+          class="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
         >
           {t("Select All")}
         </button>
@@ -207,11 +197,11 @@
           :for={insight <- @insights}
           id={"insight-#{insight.id}"}
           class={[
-            "rounded-lg border bg-white p-4 transition-shadow hover:shadow-md dark:bg-cool-steel-800/50",
+            "rounded-lg border bg-white p-4 transition-shadow hover:shadow-md dark:bg-gray-800/50",
             if(selected?(@selected_ids, insight.id),
               do:
-                "border-cerulean-300 ring-1 ring-cerulean-200 dark:border-cerulean-600 dark:ring-cerulean-800",
-              else: "border-cool-steel-200 dark:border-white/10"
+                "border-indigo-300 ring-1 ring-indigo-200 dark:border-indigo-600 dark:ring-indigo-800",
+              else: "border-gray-200 dark:border-white/10"
             )
           ]}
         >
@@ -228,9 +218,8 @@
                   "flex h-5 w-5 items-center justify-center rounded border",
                   if(selected?(@selected_ids, insight.id),
                     do:
-                      "border-cerulean-600 bg-cerulean-600 dark:border-cerulean-500 dark:bg-cerulean-500",
-                    else:
-                      "border-cool-steel-300 bg-white dark:border-cool-steel-600 dark:bg-cool-steel-700"
+                      "border-indigo-600 bg-indigo-600 dark:border-indigo-500 dark:bg-indigo-500",
+                    else: "border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-700"
                   )
                 ]}>
                   <%= if selected?(@selected_ids, insight.id) do %>
@@ -250,23 +239,23 @@
                   </span>
 
                   <%!-- Type badge --%>
-                  <span class="inline-flex items-center rounded-full bg-cool-steel-100 px-2 py-0.5 text-xs font-medium text-cool-steel-600 dark:bg-cool-steel-700 dark:text-cool-steel-300">
+                  <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
                     {String.replace(insight.type, "_", " ")}
                   </span>
                 </div>
 
-                <h3 class="mt-1 text-sm font-semibold text-cool-steel-900 dark:text-white">
+                <h3 class="mt-1 text-sm font-semibold text-gray-900 dark:text-white">
                   {insight.title}
                 </h3>
 
                 <%= if insight.description do %>
-                  <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                  <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                     {insight.description}
                   </p>
                 <% end %>
 
                 <%= if insight.llm_summary do %>
-                  <div class="mt-2 rounded-md border border-cerulean-200 bg-cerulean-50 px-3 py-2 text-sm text-cerulean-900 dark:border-cerulean-900/40 dark:bg-cerulean-950/40 dark:text-cerulean-100">
+                  <div class="mt-2 rounded-md border border-blue-200 bg-blue-50 px-3 py-2 text-sm text-blue-900 dark:border-blue-900/40 dark:bg-blue-950/40 dark:text-blue-100">
                     <p class="font-medium">{t("Summary")}</p>
                     <p>{insight.llm_summary}</p>
                     <%= if insight.recommended_action do %>
@@ -275,13 +264,13 @@
                         {insight.recommended_action}
                       </p>
                     <% end %>
-                    <p class="mt-1 text-xs text-cerulean-700 dark:text-cerulean-300">
+                    <p class="mt-1 text-xs text-blue-700 dark:text-blue-300">
                       AI-generated{if insight.llm_model, do: " · " <> insight.llm_model, else: ""}
                     </p>
                   </div>
                 <% end %>
 
-                <div class="mt-2 flex flex-wrap items-center gap-3 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                <div class="mt-2 flex flex-wrap items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
                   <%!-- Access point --%>
                   <%= if insight.preseem_access_point do %>
                     <span class="flex items-center gap-1">
@@ -294,7 +283,7 @@
                   <%= if insight.device do %>
                     <.link
                       navigate={~p"/devices/#{insight.device.id}"}
-                      class="flex items-center gap-1 text-cerulean-600 hover:text-cerulean-800 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                      class="flex items-center gap-1 text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300"
                     >
                       <.icon name="hero-server" class="h-3.5 w-3.5" />
                       {insight.device.name || "Device"}
@@ -320,7 +309,7 @@
                 type="button"
                 phx-click="dismiss"
                 phx-value-id={insight.id}
-                class="flex-shrink-0 rounded-md px-2.5 py-1.5 text-xs font-medium text-cool-steel-600 hover:bg-cool-steel-100 hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:bg-white/10 dark:hover:text-white"
+                class="flex-shrink-0 rounded-md px-2.5 py-1.5 text-xs font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-white"
               >
                 {t("Dismiss")}
               </button>
diff --git a/lib/towerops_web/live/org/settings_live.html.heex b/lib/towerops_web/live/org/settings_live.html.heex
index 23b19419..0d125f41 100644
--- a/lib/towerops_web/live/org/settings_live.html.heex
+++ b/lib/towerops_web/live/org/settings_live.html.heex
@@ -8,27 +8,25 @@
       %{label: "Dashboard", navigate: ~p"/dashboard"},
       %{label: "Settings"}
     ]} />
-    <h1 class="text-3xl font-semibold tracking-tight text-cool-steel-900 dark:text-white">
+    <h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
       {t("Organization Settings")}
     </h1>
-    <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+    <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
       {t("Manage organization defaults, integrations, and configuration")}
     </p>
   </div>
 
-  <header class="border-b border-cool-steel-200 dark:border-white/5">
+  <header class="border-b border-gray-200 dark:border-white/5">
     <nav class="flex overflow-x-auto py-4">
       <ul
         role="list"
-        class="flex min-w-full flex-none gap-x-6 px-4 text-sm/6 font-semibold text-cool-steel-500 sm:px-6 lg:px-8 dark:text-cool-steel-400"
+        class="flex min-w-full flex-none gap-x-6 px-4 text-sm/6 font-semibold text-gray-500 sm:px-6 lg:px-8 dark:text-gray-400"
       >
         <li>
           <.link
             patch={~p"/orgs/#{@organization.slug}/settings?tab=general"}
             class={
-              if @active_tab == "general",
-                do: "text-cerulean-600 dark:text-cerulean-400",
-                else: ""
+              if @active_tab == "general", do: "text-indigo-600 dark:text-indigo-400", else: ""
             }
           >
             {t("General")}
@@ -37,9 +35,7 @@
         <li>
           <.link
             patch={~p"/orgs/#{@organization.slug}/settings?tab=snmp"}
-            class={
-              if @active_tab == "snmp", do: "text-cerulean-600 dark:text-cerulean-400", else: ""
-            }
+            class={if @active_tab == "snmp", do: "text-indigo-600 dark:text-indigo-400", else: ""}
           >
             {t("SNMP")}
           </.link>
@@ -51,7 +47,7 @@
                 patch={~p"/orgs/#{@organization.slug}/settings?tab=mikrotik"}
                 class={
                   if @active_tab == "mikrotik",
-                    do: "text-cerulean-600 dark:text-cerulean-400",
+                    do: "text-indigo-600 dark:text-indigo-400",
                     else: ""
                 }
               >
@@ -64,7 +60,7 @@
           <.link
             patch={~p"/orgs/#{@organization.slug}/settings?tab=agents"}
             class={
-              if @active_tab == "agents", do: "text-cerulean-600 dark:text-cerulean-400", else: ""
+              if @active_tab == "agents", do: "text-indigo-600 dark:text-indigo-400", else: ""
             }
           >
             {t("Agents")}
@@ -74,9 +70,7 @@
           <.link
             patch={~p"/orgs/#{@organization.slug}/settings?tab=members"}
             class={
-              if @active_tab == "members",
-                do: "text-cerulean-600 dark:text-cerulean-400",
-                else: ""
+              if @active_tab == "members", do: "text-indigo-600 dark:text-indigo-400", else: ""
             }
           >
             {t("Members")}
@@ -94,9 +88,7 @@
           <.link
             patch={~p"/orgs/#{@organization.slug}/settings?tab=billing"}
             class={
-              if @active_tab == "billing",
-                do: "text-cerulean-600 dark:text-cerulean-400",
-                else: ""
+              if @active_tab == "billing", do: "text-indigo-600 dark:text-indigo-400", else: ""
             }
           >
             {t("Billing")}
@@ -115,15 +107,15 @@
       data-1p-ignore
       data-form-type="other"
     >
-      <div class="divide-y divide-cool-steel-200 dark:divide-white/10">
+      <div class="divide-y divide-gray-200 dark:divide-white/10">
         <%= if @active_tab == "general" do %>
           <!-- Organization Name Section -->
           <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
             <div>
-              <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+              <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
                 {t("Organization Name")}
               </h2>
-              <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
                 {t("Update the name of your organization.")}
               </p>
             </div>
@@ -142,10 +134,10 @@
             <!-- Default Organization Section -->
             <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
               <div>
-                <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+                <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
                   {t("Default Organization")}
                 </h2>
-                <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+                <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
                   {t(
                     "Set this organization as your default. When you log in, you'll be directed to your default organization."
                   )}
@@ -170,11 +162,11 @@
                     id="toggle-default-org"
                     type="button"
                     phx-click="toggle_default_org"
-                    class="rounded-md bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-cerulean-500 dark:bg-cerulean-500 dark:shadow-none dark:hover:bg-cerulean-400"
+                    class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 dark:bg-indigo-500 dark:shadow-none dark:hover:bg-indigo-400"
                   >
                     <.icon name="hero-star" class="h-4 w-4 inline" /> Set as Default Organization
                   </button>
-                  <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                  <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                     {t("Click to make this your default organization")}
                   </p>
                 <% end %>
@@ -185,10 +177,10 @@
 <!-- Use Sites Section -->
           <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
             <div>
-              <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+              <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
                 {t("Site Organization")}
               </h2>
-              <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
                 {t(
                   "Enable site organization to group devices into physical locations (offices, datacenters, etc.)."
                 )}
@@ -201,23 +193,23 @@
                 type="checkbox"
                 label={t("Use sites to organize devices")}
               />
-              <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                 {t(
                   "When enabled, you can organize devices into sites. When disabled, all devices belong directly to the organization."
                 )}
               </p>
 
               <%= if @organization.use_sites && @form[:use_sites].value == false do %>
-                <div class="mt-4 rounded-md bg-wheat-50 dark:bg-wheat-900/20 border border-wheat-200 dark:border-wheat-800 p-4">
+                <div class="mt-4 rounded-md bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 p-4">
                   <div class="flex">
                     <div class="shrink-0">
-                      <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-wheat-400" />
+                      <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-amber-400" />
                     </div>
                     <div class="ml-3">
-                      <h3 class="text-sm font-medium text-wheat-800 dark:text-wheat-200">
+                      <h3 class="text-sm font-medium text-amber-800 dark:text-amber-200">
                         {t("Warning: Disabling Sites")}
                       </h3>
-                      <div class="mt-2 text-sm text-wheat-700 dark:text-wheat-300">
+                      <div class="mt-2 text-sm text-amber-700 dark:text-amber-300">
                         <p>
                           {t(
                             "All devices will be removed from their current sites and assigned directly to the organization."
@@ -235,12 +227,12 @@
           </div>
           
 <!-- Alert Routing Section -->
-          <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8 border-t border-cool-steel-200 dark:border-white/5">
+          <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8 border-t border-gray-200 dark:border-white/5">
             <div>
-              <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+              <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
                 {t("Alert Routing")}
               </h2>
-              <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
                 {t("Choose how alerts are routed for on-call notifications.")}
               </p>
             </div>
@@ -255,9 +247,9 @@
                     "relative flex cursor-pointer rounded-lg border p-4 transition-colors",
                     if(routing_value == "builtin",
                       do:
-                        "border-cerulean-500 bg-cerulean-50/50 ring-1 ring-cerulean-500 dark:bg-cerulean-900/10 dark:border-cerulean-400",
+                        "border-blue-500 bg-blue-50/50 ring-1 ring-blue-500 dark:bg-blue-900/10 dark:border-blue-400",
                       else:
-                        "border-cool-steel-200 hover:border-cool-steel-300 dark:border-white/10 dark:hover:border-white/20"
+                        "border-gray-200 hover:border-gray-300 dark:border-white/10 dark:hover:border-white/20"
                     )
                   ]}>
                     <input
@@ -265,14 +257,14 @@
                       name="organization[alert_routing]"
                       value="builtin"
                       checked={routing_value == "builtin"}
-                      class="mt-0.5 h-4 w-4 border-cool-steel-300 text-cerulean-600 focus:ring-cerulean-600 dark:border-cool-steel-600 dark:bg-cool-steel-800"
+                      class="mt-0.5 h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-600 dark:border-gray-600 dark:bg-gray-800"
                     />
                     <div class="ml-3">
-                      <span class="block text-sm font-semibold text-cool-steel-900 dark:text-white">
+                      <span class="block text-sm font-semibold text-gray-900 dark:text-white">
                         <.icon name="hero-bell-alert" class="h-4 w-4 inline -mt-0.5" />
                         {t("TowerOps Built-in")}
                       </span>
-                      <span class="block text-sm text-cool-steel-500 dark:text-cool-steel-400 mt-0.5">
+                      <span class="block text-sm text-gray-500 dark:text-gray-400 mt-0.5">
                         {t(
                           "Use TowerOps schedules and escalation policies to notify on-call staff."
                         )}
@@ -285,9 +277,9 @@
                     "relative flex cursor-pointer rounded-lg border p-4 transition-colors",
                     if(routing_value == "pagerduty",
                       do:
-                        "border-cerulean-500 bg-cerulean-50/50 ring-1 ring-cerulean-500 dark:bg-cerulean-900/10 dark:border-cerulean-400",
+                        "border-blue-500 bg-blue-50/50 ring-1 ring-blue-500 dark:bg-blue-900/10 dark:border-blue-400",
                       else:
-                        "border-cool-steel-200 hover:border-cool-steel-300 dark:border-white/10 dark:hover:border-white/20"
+                        "border-gray-200 hover:border-gray-300 dark:border-white/10 dark:hover:border-white/20"
                     )
                   ]}>
                     <input
@@ -295,29 +287,29 @@
                       name="organization[alert_routing]"
                       value="pagerduty"
                       checked={routing_value == "pagerduty"}
-                      class="mt-0.5 h-4 w-4 border-cool-steel-300 text-cerulean-600 focus:ring-cerulean-600 dark:border-cool-steel-600 dark:bg-cool-steel-800"
+                      class="mt-0.5 h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-600 dark:border-gray-600 dark:bg-gray-800"
                     />
                     <div class="ml-3">
-                      <span class="block text-sm font-semibold text-cool-steel-900 dark:text-white">
+                      <span class="block text-sm font-semibold text-gray-900 dark:text-white">
                         <.icon
                           name="hero-arrow-top-right-on-square"
                           class="h-4 w-4 inline -mt-0.5"
                         />
                         {t("PagerDuty")}
                       </span>
-                      <span class="block text-sm text-cool-steel-500 dark:text-cool-steel-400 mt-0.5">
+                      <span class="block text-sm text-gray-500 dark:text-gray-400 mt-0.5">
                         {t(
                           "Route alerts to PagerDuty for incident management and on-call notifications."
                         )}
                       </span>
                       <%= if routing_value == "pagerduty" && !@integrations["pagerduty"] do %>
-                        <div class="mt-2 rounded-md bg-wheat-50 dark:bg-wheat-900/20 border border-wheat-200 dark:border-wheat-800 p-2.5">
+                        <div class="mt-2 rounded-md bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 p-2.5">
                           <div class="flex items-center gap-2">
                             <.icon
                               name="hero-exclamation-triangle"
-                              class="h-4 w-4 text-wheat-500 shrink-0"
+                              class="h-4 w-4 text-amber-500 shrink-0"
                             />
-                            <span class="text-xs text-wheat-800 dark:text-wheat-200">
+                            <span class="text-xs text-amber-800 dark:text-amber-200">
                               {t("PagerDuty integration not configured yet.")}
                               <.link
                                 navigate={
@@ -339,9 +331,9 @@
                     "relative flex cursor-pointer rounded-lg border p-4 transition-colors",
                     if(routing_value == "both",
                       do:
-                        "border-cerulean-500 bg-cerulean-50/50 ring-1 ring-cerulean-500 dark:bg-cerulean-900/10 dark:border-cerulean-400",
+                        "border-blue-500 bg-blue-50/50 ring-1 ring-blue-500 dark:bg-blue-900/10 dark:border-blue-400",
                       else:
-                        "border-cool-steel-200 hover:border-cool-steel-300 dark:border-white/10 dark:hover:border-white/20"
+                        "border-gray-200 hover:border-gray-300 dark:border-white/10 dark:hover:border-white/20"
                     )
                   ]}>
                     <input
@@ -349,14 +341,14 @@
                       name="organization[alert_routing]"
                       value="both"
                       checked={routing_value == "both"}
-                      class="mt-0.5 h-4 w-4 border-cool-steel-300 text-cerulean-600 focus:ring-cerulean-600 dark:border-cool-steel-600 dark:bg-cool-steel-800"
+                      class="mt-0.5 h-4 w-4 border-gray-300 text-blue-600 focus:ring-blue-600 dark:border-gray-600 dark:bg-gray-800"
                     />
                     <div class="ml-3">
-                      <span class="block text-sm font-semibold text-cool-steel-900 dark:text-white">
+                      <span class="block text-sm font-semibold text-gray-900 dark:text-white">
                         <.icon name="hero-arrows-right-left" class="h-4 w-4 inline -mt-0.5" />
                         {t("Both")}
                       </span>
-                      <span class="block text-sm text-cool-steel-500 dark:text-cool-steel-400 mt-0.5">
+                      <span class="block text-sm text-gray-500 dark:text-gray-400 mt-0.5">
                         {t(
                           "Send alerts to both PagerDuty and built-in escalation. Useful during migration."
                         )}
@@ -373,15 +365,15 @@
           <!-- SNMP Configuration Section -->
           <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
             <div>
-              <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+              <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
                 {t("SNMP Configuration")}
               </h2>
-              <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
                 {t(
                   "Set default SNMP settings for all devices in this organization. These can be overridden at the site or device level."
                 )}
               </p>
-              <p class="mt-3 text-xs text-cool-steel-500 dark:text-cool-steel-400 italic">
+              <p class="mt-3 text-xs text-gray-500 dark:text-gray-400 italic">
                 <.icon name="hero-information-circle" class="h-4 w-4 inline" />
                 Hierarchy: Device > Site > Organization
               </p>
@@ -487,11 +479,11 @@
               />
 
               <%= if @organization.snmp_community do %>
-                <div class="mt-6 rounded-md bg-wheat-50 dark:bg-wheat-900/20 border border-wheat-200 dark:border-wheat-800 p-4">
-                  <h3 class="text-sm font-medium text-wheat-900 dark:text-wheat-200 mb-2">
+                <div class="mt-6 rounded-md bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 p-4">
+                  <h3 class="text-sm font-medium text-amber-900 dark:text-amber-200 mb-2">
                     {t("Force Apply to All Devices")}
                   </h3>
-                  <p class="text-sm text-wheat-700 dark:text-wheat-300 mb-3">
+                  <p class="text-sm text-amber-700 dark:text-amber-300 mb-3">
                     {t(
                       "This will override SNMP settings for ALL devices across all sites in this organization."
                     )}
@@ -505,7 +497,7 @@
                         "This will replace SNMP settings for ALL devices in this organization. Are you sure?"
                       )
                     }
-                    class="rounded-md bg-sweet-salmon-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-sweet-salmon-500 dark:bg-sweet-salmon-500 dark:shadow-none dark:hover:bg-sweet-salmon-400"
+                    class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-red-500 dark:bg-red-500 dark:shadow-none dark:hover:bg-red-400"
                   >
                     <.icon name="hero-arrow-path" class="h-4 w-4 inline" />
                     {t("Apply SNMP Config to All Devices")}
@@ -520,22 +512,22 @@
           <!-- MikroTik API Configuration Section -->
           <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
             <div>
-              <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+              <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
                 {t("MikroTik API Configuration")}
               </h2>
-              <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
                 {t(
                   "Set default MikroTik RouterOS API credentials for all devices in this organization. Only applies to devices detected as MikroTik."
                 )}
               </p>
-              <div class="mt-3 rounded-md bg-cerulean-50 dark:bg-cerulean-900/20 p-3">
-                <p class="text-xs text-cerulean-700 dark:text-cerulean-300">
+              <div class="mt-3 rounded-md bg-blue-50 dark:bg-blue-900/20 p-3">
+                <p class="text-xs text-blue-700 dark:text-blue-300">
                   <.icon name="hero-beaker" class="h-4 w-4 inline" />
                   <strong>{t("Experimental Feature:")}</strong>
                   {t("MikroTik API integration is under active development.")}
                 </p>
               </div>
-              <p class="mt-3 text-xs text-cool-steel-500 dark:text-cool-steel-400 italic">
+              <p class="mt-3 text-xs text-gray-500 dark:text-gray-400 italic">
                 <.icon name="hero-information-circle" class="h-4 w-4 inline" />
                 Hierarchy: Device > Site > Organization
               </p>
@@ -587,8 +579,8 @@
               </div>
 
               <div class={"#{unless @form[:mikrotik_enabled].value, do: "hidden"} #{if @form[:mikrotik_use_ssl].value != false, do: "hidden"}"}>
-                <div class="rounded-md bg-sweet-salmon-50 dark:bg-sweet-salmon-900/20 p-4">
-                  <p class="text-sm text-sweet-salmon-700 dark:text-sweet-salmon-300">
+                <div class="rounded-md bg-red-50 dark:bg-red-900/20 p-4">
+                  <p class="text-sm text-red-700 dark:text-red-300">
                     <strong>{t("Critical Security Warning:")}</strong>
                     {t(
                       "Plain API (port 8728) sends credentials unencrypted over the network. This setting is"
@@ -600,8 +592,8 @@
               </div>
 
               <div class={"#{unless @form[:mikrotik_enabled].value, do: "hidden"} #{if @form[:mikrotik_use_ssl].value == false, do: "hidden"}"}>
-                <div class="rounded-md bg-wheat-50 dark:bg-wheat-900/20 p-4">
-                  <p class="text-sm text-wheat-700 dark:text-wheat-300">
+                <div class="rounded-md bg-yellow-50 dark:bg-yellow-900/20 p-4">
+                  <p class="text-sm text-yellow-700 dark:text-yellow-300">
                     <strong>{t("Security Warning:")}</strong>
                     {t(
                       "Plain API (port 8728) sends credentials unencrypted. Use SSL (port 8729) whenever possible."
@@ -618,15 +610,15 @@
           <%= if @available_agents != [] do %>
             <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
               <div>
-                <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+                <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
                   {t("Default Agent")}
                 </h2>
-                <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+                <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
                   {t(
                     "Select a default agent for SNMP polling. This will be used for all devices in this organization unless overridden at the site or device level."
                   )}
                 </p>
-                <p class="mt-3 text-xs text-cool-steel-500 dark:text-cool-steel-400 italic">
+                <p class="mt-3 text-xs text-gray-500 dark:text-gray-400 italic">
                   <.icon name="hero-information-circle" class="h-4 w-4 inline" />
                   Hierarchy: Device > Site > Organization
                 </p>
@@ -641,11 +633,11 @@
                   options={Enum.map(@available_agents, &{&1.name, &1.id})}
                 />
 
-                <div class="rounded-md bg-cool-steel-50 dark:bg-cool-steel-800/50 p-4">
-                  <p class="text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300 mb-2">
+                <div class="rounded-md bg-gray-50 dark:bg-gray-800/50 p-4">
+                  <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                     {t("Current Device Assignment:")}
                   </p>
-                  <div class="space-y-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                  <div class="space-y-1 text-sm text-gray-600 dark:text-gray-400">
                     <div class="flex items-center gap-2">
                       <.icon name="hero-server" class="h-4 w-4" />
                       <span>
@@ -675,11 +667,11 @@
                 </div>
 
                 <%= if @organization.default_agent_token_id do %>
-                  <div class="mt-6 rounded-md bg-wheat-50 dark:bg-wheat-900/20 border border-wheat-200 dark:border-wheat-800 p-4">
-                    <h3 class="text-sm font-medium text-wheat-900 dark:text-wheat-200 mb-2">
+                  <div class="mt-6 rounded-md bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 p-4">
+                    <h3 class="text-sm font-medium text-amber-900 dark:text-amber-200 mb-2">
                       {t("Force Apply to All Devices")}
                     </h3>
-                    <p class="text-sm text-wheat-700 dark:text-wheat-300 mb-3">
+                    <p class="text-sm text-amber-700 dark:text-amber-300 mb-3">
                       {t(
                         "This will assign the default agent to ALL devices across all sites in this organization."
                       )}
@@ -693,7 +685,7 @@
                           "This will replace agent assignments for ALL devices in this organization. Are you sure?"
                         )
                       }
-                      class="rounded-md bg-sweet-salmon-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-sweet-salmon-500 dark:bg-sweet-salmon-500 dark:shadow-none dark:hover:bg-sweet-salmon-400"
+                      class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-red-500 dark:bg-red-500 dark:shadow-none dark:hover:bg-red-400"
                     >
                       <.icon name="hero-arrow-path" class="h-4 w-4 inline" />
                       {t("Apply Default Agent to All Devices")}
@@ -705,14 +697,14 @@
           <% else %>
             <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
               <div>
-                <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+                <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
                   {t("Default Agent")}
                 </h2>
-                <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+                <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
                   {t("No agents configured yet.")}
                   <.link
                     navigate={~p"/agents"}
-                    class="text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                    class="text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300"
                   >
                     {t("Create an agent")}
                   </.link>
@@ -729,17 +721,17 @@
       </div>
       
 <!-- Save Button at Bottom (not shown on integrations tab) -->
-      <div class="flex items-center justify-end gap-x-6 border-t border-cool-steel-200 px-4 py-4 sm:px-6 lg:px-8 dark:border-white/10">
+      <div class="flex items-center justify-end gap-x-6 border-t border-gray-200 px-4 py-4 sm:px-6 lg:px-8 dark:border-white/10">
         <.link
           navigate={~p"/dashboard"}
-          class="text-sm font-semibold text-cool-steel-900 dark:text-white"
+          class="text-sm font-semibold text-gray-900 dark:text-white"
         >
           {t("Cancel")}
         </.link>
         <button
           type="submit"
           phx-disable-with={t("Saving...")}
-          class="rounded-md bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-cerulean-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cerulean-600 dark:bg-cerulean-500 dark:shadow-none dark:hover:bg-cerulean-400 dark:focus-visible:outline-cerulean-500"
+          class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:shadow-none dark:hover:bg-indigo-400 dark:focus-visible:outline-indigo-500"
         >
           {t("Save Settings")}
         </button>
@@ -748,15 +740,15 @@
   <% end %>
 
   <%= if @active_tab == "members" do %>
-    <div class="divide-y divide-cool-steel-200 dark:divide-white/10">
+    <div class="divide-y divide-gray-200 dark:divide-white/10">
       <!-- Invite form (owner/admin only) -->
       <%= if @membership.role in [:owner, :admin] do %>
         <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
           <div>
-            <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+            <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
               {t("Invite a Team Member")}
             </h2>
-            <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+            <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
               {t("Send an invitation email to add someone to this organization.")}
             </p>
           </div>
@@ -783,13 +775,13 @@
                   ]}
                 />
                 <div>
-                  <label class="block text-sm/6 font-medium text-cool-steel-900 dark:text-white invisible">
+                  <label class="block text-sm/6 font-medium text-gray-900 dark:text-white invisible">
                     &nbsp;
                   </label>
                   <button
                     type="submit"
                     phx-disable-with={t("Sending...")}
-                    class="rounded-md bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-cerulean-500 dark:bg-cerulean-500 dark:shadow-none dark:hover:bg-cerulean-400 h-[42px]"
+                    class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 dark:bg-indigo-500 dark:shadow-none dark:hover:bg-indigo-400 h-[42px]"
                   >
                     {t("Send Invite")}
                   </button>
@@ -804,56 +796,56 @@
       <%= if @pending_invitations != [] do %>
         <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
           <div>
-            <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+            <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
               {t("Pending Invitations")}
             </h2>
-            <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+            <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
               {t("Invitations that haven't been accepted yet.")}
             </p>
           </div>
 
           <div class="md:col-span-2">
-            <div class="overflow-x-auto rounded-lg border border-cool-steel-200 dark:border-white/10">
-              <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-                <thead class="bg-cool-steel-50 dark:bg-white/5">
+            <div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-white/10">
+              <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+                <thead class="bg-gray-50 dark:bg-white/5">
                   <tr>
-                    <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                    <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                       {t("Email")}
                     </th>
-                    <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                    <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                       {t("Role")}
                     </th>
-                    <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                    <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                       {t("Sent")}
                     </th>
-                    <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                    <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                       {t("Expires")}
                     </th>
                     <%= if @membership.role in [:owner, :admin] do %>
-                      <th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                      <th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                         {t("Actions")}
                       </th>
                     <% end %>
                   </tr>
                 </thead>
-                <tbody class="divide-y divide-cool-steel-200 bg-white dark:divide-white/10 dark:bg-transparent">
+                <tbody class="divide-y divide-gray-200 bg-white dark:divide-white/10 dark:bg-transparent">
                   <tr :for={invitation <- @pending_invitations}>
-                    <td class="whitespace-nowrap px-4 py-3 text-sm text-cool-steel-900 dark:text-white">
+                    <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-900 dark:text-white">
                       {invitation.email}
                     </td>
                     <td class="whitespace-nowrap px-4 py-3 text-sm">
-                      <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-400">
+                      <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400">
                         {invitation.role}
                       </span>
                     </td>
-                    <td class="whitespace-nowrap px-4 py-3 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                    <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
                       <.timestamp
                         datetime={invitation.inserted_at}
                         timezone={@timezone}
                         format="relative"
                       />
                     </td>
-                    <td class="whitespace-nowrap px-4 py-3 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                    <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
                       <.timestamp
                         datetime={invitation.expires_at}
                         timezone={@timezone}
@@ -867,7 +859,7 @@
                           phx-click="cancel_invitation"
                           phx-value-id={invitation.id}
                           data-confirm={t("Cancel this invitation?")}
-                          class="text-sweet-salmon-600 hover:text-sweet-salmon-700 dark:text-sweet-salmon-400 dark:hover:text-sweet-salmon-300"
+                          class="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
                         >
                           {t("Cancel")}
                         </button>
@@ -884,40 +876,40 @@
 <!-- Current members -->
       <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-6 px-4 py-8 sm:px-6 md:grid-cols-3 lg:px-8">
         <div>
-          <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+          <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
             {t("Members")}
           </h2>
-          <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
             {t("People who have access to this organization.")}
           </p>
         </div>
 
         <div class="md:col-span-2">
-          <div class="overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10">
-            <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-              <thead class="bg-cool-steel-50 dark:bg-white/5">
+          <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
+            <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+              <thead class="bg-gray-50 dark:bg-white/5">
                 <tr>
-                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     {t("User")}
                   </th>
-                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     {t("Role")}
                   </th>
-                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                  <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     {t("Joined")}
                   </th>
                   <%= if @membership.role in [:owner, :admin] do %>
-                    <th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+                    <th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                       {t("Actions")}
                     </th>
                   <% end %>
                 </tr>
               </thead>
-              <tbody class="divide-y divide-cool-steel-200 bg-white dark:divide-white/10 dark:bg-transparent">
+              <tbody class="divide-y divide-gray-200 bg-white dark:divide-white/10 dark:bg-transparent">
                 <tr :for={member <- @members}>
                   <td class="whitespace-nowrap px-4 py-3">
                     <div>
-                      <div class="text-sm font-medium text-cool-steel-900 dark:text-white">
+                      <div class="text-sm font-medium text-gray-900 dark:text-white">
                         {member.user.email}
                       </div>
                     </div>
@@ -930,22 +922,22 @@
                           "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400"
 
                         :admin ->
-                          "bg-wheat-100 text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400"
+                          "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"
 
                         :executive ->
-                          "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-400"
+                          "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
 
                         role when role in [:technician, :member] ->
                           "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400"
 
                         :viewer ->
-                          "bg-cool-steel-100 text-cool-steel-800 dark:bg-cool-steel-800 dark:text-cool-steel-400"
+                          "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-400"
                       end
                     ]}>
                       {member.role}
                     </span>
                   </td>
-                  <td class="whitespace-nowrap px-4 py-3 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                  <td class="whitespace-nowrap px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
                     <.timestamp
                       datetime={member.inserted_at}
                       timezone={@timezone}
@@ -959,7 +951,7 @@
                           <form phx-change="change_role" phx-value-user-id={member.user_id}>
                             <select
                               name="role"
-                              class="rounded-md border-cool-steel-300 py-1 pl-2 pr-8 text-xs dark:border-white/10 dark:bg-white/5 dark:text-white"
+                              class="rounded-md border-gray-300 py-1 pl-2 pr-8 text-xs dark:border-white/10 dark:bg-white/5 dark:text-white"
                             >
                               <option value="admin" selected={member.role == :admin}>
                                 {t("Admin")}
@@ -1002,18 +994,18 @@
 
   <%= if @active_tab == "integrations" do %>
     <div class="mt-8 flex items-center justify-center">
-      <div class="text-center rounded-xl border border-cool-steel-200 bg-white p-10 shadow-sm dark:border-white/10 dark:bg-white/[0.03]">
-        <.icon name="hero-arrow-top-right-on-square" class="mx-auto h-10 w-10 text-cerulean-400" />
-        <h3 class="mt-4 text-lg font-semibold text-cool-steel-900 dark:text-white">
+      <div class="text-center rounded-xl border border-gray-200 bg-white p-10 shadow-sm dark:border-white/10 dark:bg-white/[0.03]">
+        <.icon name="hero-arrow-top-right-on-square" class="mx-auto h-10 w-10 text-indigo-400" />
+        <h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-white">
           {t("Integrations have moved to their own page")}
         </h3>
-        <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
           {t("Manage all your integrations from the dedicated integrations page.")}
         </p>
         <div class="mt-6">
           <.link
             navigate={~p"/orgs/#{@organization.slug}/settings/integrations"}
-            class="rounded-md bg-cerulean-600 px-4 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-cerulean-500 dark:bg-cerulean-500 dark:hover:bg-cerulean-400"
+            class="rounded-md bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400"
           >
             {t("Go to Integrations")}
           </.link>
@@ -1029,22 +1021,18 @@
 
         <dl class="space-y-3">
           <div>
-            <dt class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
-              {t("Current Plan")}
-            </dt>
+            <dt class="text-sm text-gray-600 dark:text-gray-400">{t("Current Plan")}</dt>
             <dd class="text-lg font-semibold capitalize dark:text-white">
               {@organization.subscription_plan || "free"}
             </dd>
           </div>
 
           <div>
-            <dt class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
-              {t("Device Usage")}
-            </dt>
+            <dt class="text-sm text-gray-600 dark:text-gray-400">{t("Device Usage")}</dt>
             <dd class="text-lg dark:text-white">
               {@current_devices} {t("devices")}
               <%= if @device_limit != :unlimited do %>
-                <span class="text-cool-steel-500 dark:text-cool-steel-400">
+                <span class="text-gray-500 dark:text-gray-400">
                   / {@device_limit} {t("limit")}
                 </span>
               <% end %>
@@ -1053,13 +1041,13 @@
 
           <%= if @organization.subscription_plan == "paid" do %>
             <div>
-              <dt class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <dt class="text-sm text-gray-600 dark:text-gray-400">
                 {t("Estimated Monthly Cost")}
               </dt>
               <dd class="text-2xl font-bold text-green-600 dark:text-green-400">
                 ${@estimated_cost.cost_usd}
               </dd>
-              <p class="text-xs text-cool-steel-500 dark:text-cool-steel-400 mt-1">
+              <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                 {@estimated_cost.billable} {t("billable devices")} × ${@estimated_cost.price_per_device}
               </p>
             </div>
@@ -1081,23 +1069,23 @@
             <% end %>
 
             <%= if @organization.subscription_status == "past_due" do %>
-              <div class="bg-wheat-50 dark:bg-wheat-900/20 border border-wheat-200 dark:border-wheat-800/50 rounded p-3">
-                <p class="text-sm text-wheat-800 dark:text-wheat-300">
+              <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800/50 rounded p-3">
+                <p class="text-sm text-yellow-800 dark:text-yellow-300">
                   ⚠ {t("Payment Past Due")}
                 </p>
-                <p class="text-xs text-wheat-600 dark:text-wheat-400 mt-1">
+                <p class="text-xs text-yellow-600 dark:text-yellow-400 mt-1">
                   {t("Please update your payment method to avoid service interruption.")}
                 </p>
               </div>
             <% end %>
           <% else %>
-            <div class="bg-cerulean-50 dark:bg-cerulean-900/20 border border-cerulean-200 dark:border-cerulean-800/50 rounded p-3">
-              <p class="text-sm text-cerulean-800 dark:text-cerulean-300">
+            <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800/50 rounded p-3">
+              <p class="text-sm text-blue-800 dark:text-blue-300">
                 {t("Free Plan - First %{count} devices included",
                   count: @estimated_cost.free_included
                 )}
               </p>
-              <p class="text-xs text-cerulean-600 dark:text-cerulean-400 mt-1">
+              <p class="text-xs text-blue-600 dark:text-blue-400 mt-1">
                 {t("Upgrade to monitor unlimited devices at $%{price}/device/month",
                   price: @estimated_cost.price_per_device
                 )}
@@ -1130,18 +1118,14 @@
           <h3 class="text-lg font-semibold mb-3 dark:text-white">{t("Billing Information")}</h3>
           <dl class="space-y-2 text-sm">
             <div class="flex justify-between">
-              <dt class="text-cool-steel-600 dark:text-cool-steel-400">
-                {t("Subscription Status")}
-              </dt>
+              <dt class="text-gray-600 dark:text-gray-400">{t("Subscription Status")}</dt>
               <dd class="font-medium capitalize dark:text-white">
                 {@organization.subscription_status}
               </dd>
             </div>
             <%= if @organization.subscription_current_period_start do %>
               <div class="flex justify-between">
-                <dt class="text-cool-steel-600 dark:text-cool-steel-400">
-                  {t("Current Period Start")}
-                </dt>
+                <dt class="text-gray-600 dark:text-gray-400">{t("Current Period Start")}</dt>
                 <dd class="font-medium dark:text-white">
                   {Calendar.strftime(@organization.subscription_current_period_start, "%B %d, %Y")}
                 </dd>
@@ -1149,9 +1133,7 @@
             <% end %>
             <%= if @organization.subscription_current_period_end do %>
               <div class="flex justify-between">
-                <dt class="text-cool-steel-600 dark:text-cool-steel-400">
-                  {t("Current Period End")}
-                </dt>
+                <dt class="text-gray-600 dark:text-gray-400">{t("Current Period End")}</dt>
                 <dd class="font-medium dark:text-white">
                   {Calendar.strftime(@organization.subscription_current_period_end, "%B %d, %Y")}
                 </dd>
@@ -1159,14 +1141,12 @@
             <% end %>
             <%= if @organization.payment_method_status do %>
               <div class="flex justify-between">
-                <dt class="text-cool-steel-600 dark:text-cool-steel-400">
-                  {t("Payment Method")}
-                </dt>
+                <dt class="text-gray-600 dark:text-gray-400">{t("Payment Method")}</dt>
                 <dd class={[
                   "font-medium capitalize",
                   if(@organization.payment_method_status == "valid",
                     do: "text-green-600 dark:text-green-400",
-                    else: "text-wheat-600 dark:text-wheat-400"
+                    else: "text-yellow-600 dark:text-yellow-400"
                   )
                 ]}>
                   {String.replace(@organization.payment_method_status, "_", " ")}
diff --git a/lib/towerops_web/live/org_live/index.html.heex b/lib/towerops_web/live/org_live/index.html.heex
index 600afc81..6bcd6c18 100644
--- a/lib/towerops_web/live/org_live/index.html.heex
+++ b/lib/towerops_web/live/org_live/index.html.heex
@@ -22,10 +22,10 @@
       <input type="hidden" name="org_id" value={org.id} />
       <button
         type="submit"
-        class="relative w-full overflow-hidden rounded-lg border border-cool-steel-200 bg-white p-6 shadow-sm hover:shadow-md transition-shadow dark:border-white/10 dark:bg-cool-steel-800/50 cursor-pointer text-left"
+        class="relative w-full overflow-hidden rounded-lg border border-gray-200 bg-white p-6 shadow-sm hover:shadow-md transition-shadow dark:border-white/10 dark:bg-gray-800/50 cursor-pointer text-left"
       >
-        <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white">{org.name}</h2>
-        <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+        <h2 class="text-xl font-semibold text-gray-900 dark:text-white">{org.name}</h2>
+        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
           {Enum.find(org.memberships, &(&1.user_id == @current_scope.user.id)).role
           |> to_string()
           |> String.capitalize()}
@@ -35,14 +35,11 @@
   </div>
 
   <div :if={@organizations == []} class="text-center py-16">
-    <.icon
-      name="hero-building-office"
-      class="mx-auto h-12 w-12 text-cool-steel-400 dark:text-cool-steel-600"
-    />
-    <h3 class="mt-4 text-lg font-semibold text-cool-steel-900 dark:text-white">
+    <.icon name="hero-building-office" class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-600" />
+    <h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-white">
       {t("No organizations")}
     </h3>
-    <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
       {t("Get started by creating a new organization.")}
     </p>
     <div class="mt-6">
diff --git a/lib/towerops_web/live/reports_live.ex b/lib/towerops_web/live/reports_live.ex
index 5c910542..b12b7425 100644
--- a/lib/towerops_web/live/reports_live.ex
+++ b/lib/towerops_web/live/reports_live.ex
@@ -138,13 +138,10 @@ defmodule ToweropsWeb.ReportsLive do
 
   @doc false
   def status_badge("success"), do: {"Success", "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300"}
-
-  def status_badge("failed"),
-    do: {"Failed", "bg-sweet-salmon-100 text-sweet-salmon-700 dark:bg-sweet-salmon-900/50 dark:text-sweet-salmon-300"}
+  def status_badge("failed"), do: {"Failed", "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300"}
 
   def status_badge("partial_failure"),
-    do: {"Partial", "bg-wheat-100 text-wheat-700 dark:bg-wheat-900/50 dark:text-wheat-300"}
+    do: {"Partial", "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-300"}
 
-  def status_badge(_),
-    do: {"Never Run", "bg-cool-steel-100 text-cool-steel-700 dark:bg-cool-steel-800 dark:text-cool-steel-300"}
+  def status_badge(_), do: {"Never Run", "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300"}
 end
diff --git a/lib/towerops_web/live/reports_live.html.heex b/lib/towerops_web/live/reports_live.html.heex
index 814b9806..264d13b6 100644
--- a/lib/towerops_web/live/reports_live.html.heex
+++ b/lib/towerops_web/live/reports_live.html.heex
@@ -11,17 +11,15 @@
 
   <div class="mb-6 flex items-center justify-between">
     <div>
-      <h1 class="text-2xl font-bold text-cool-steel-900 dark:text-white">
-        {t("Scheduled Reports")}
-      </h1>
-      <p class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{t("Scheduled Reports")}</h1>
+      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
         {t("Automated report generation and email delivery")}
       </p>
     </div>
     <button
       :if={!@show_form}
       phx-click="show_form"
-      class="inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-white bg-cerulean-600 hover:bg-cerulean-700 rounded-lg transition-colors"
+      class="inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
     >
       <.icon name="hero-plus" class="w-4 h-4" />
       {t("New Report")}
@@ -30,14 +28,12 @@
 
   <%!-- Create Report Form --%>
   <%= if @show_form do %>
-    <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-6 mb-6">
+    <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-6 mb-6">
       <div class="flex items-center justify-between mb-4">
-        <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white">
-          {t("Create Report")}
-        </h2>
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{t("Create Report")}</h2>
         <button
           phx-click="hide_form"
-          class="text-cool-steel-400 hover:text-cool-steel-600 dark:hover:text-cool-steel-300"
+          class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
         >
           <.icon name="hero-x-mark" class="w-5 h-5" />
         </button>
@@ -46,7 +42,7 @@
       <.form for={@form} phx-submit="save" class="space-y-4">
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div>
-            <label class="block text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300 mb-1">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
               {t("Report Name")}
             </label>
             <input
@@ -54,18 +50,18 @@
               name="report[name]"
               placeholder="Weekly Uptime Report"
               required
-              class="w-full rounded-lg border border-cool-steel-300 dark:border-cool-steel-600 bg-white dark:bg-cool-steel-800 px-3 py-2 text-sm text-cool-steel-900 dark:text-white focus:ring-2 focus:ring-cerulean-500 focus:border-cerulean-500"
+              class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-sm text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
             />
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300 mb-1">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
               {t("Report Type")}
             </label>
             <select
               name="report[report_type]"
               required
-              class="w-full rounded-lg border border-cool-steel-300 dark:border-cool-steel-600 bg-white dark:bg-cool-steel-800 px-3 py-2 text-sm text-cool-steel-900 dark:text-white focus:ring-2 focus:ring-cerulean-500 focus:border-cerulean-500"
+              class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-sm text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
             >
               <option value="uptime_summary">{t("Uptime Summary")}</option>
               <option value="alert_history">{t("Alert History")}</option>
@@ -75,12 +71,12 @@
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300 mb-1">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
               {t("Schedule")}
             </label>
             <select
               name="report[schedule_type]"
-              class="w-full rounded-lg border border-cool-steel-300 dark:border-cool-steel-600 bg-white dark:bg-cool-steel-800 px-3 py-2 text-sm text-cool-steel-900 dark:text-white focus:ring-2 focus:ring-cerulean-500 focus:border-cerulean-500"
+              class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-sm text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
             >
               <option value="daily">{t("Daily")}</option>
               <option value="weekly" selected>{t("Weekly")}</option>
@@ -90,12 +86,12 @@
           </div>
 
           <div>
-            <label class="block text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300 mb-1">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
               {t("Time Range (days)")}
             </label>
             <select
               name="report[scope_days]"
-              class="w-full rounded-lg border border-cool-steel-300 dark:border-cool-steel-600 bg-white dark:bg-cool-steel-800 px-3 py-2 text-sm text-cool-steel-900 dark:text-white focus:ring-2 focus:ring-cerulean-500 focus:border-cerulean-500"
+              class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-sm text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
             >
               <option value="1">{t("Last 24 hours")}</option>
               <option value="7" selected>{t("Last 7 days")}</option>
@@ -106,9 +102,9 @@
         </div>
 
         <div>
-          <label class="block text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300 mb-1">
+          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
             {t("Recipients")}
-            <span class="font-normal text-cool-steel-400">
+            <span class="font-normal text-gray-400">
               {t("(comma-separated email addresses)")}
             </span>
           </label>
@@ -117,7 +113,7 @@
             rows="2"
             required
             placeholder="admin@example.com, noc@example.com"
-            class="w-full rounded-lg border border-cool-steel-300 dark:border-cool-steel-600 bg-white dark:bg-cool-steel-800 px-3 py-2 text-sm text-cool-steel-900 dark:text-white focus:ring-2 focus:ring-cerulean-500 focus:border-cerulean-500"
+            class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-sm text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
           ></textarea>
         </div>
 
@@ -125,13 +121,13 @@
           <button
             type="button"
             phx-click="hide_form"
-            class="px-4 py-2 text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300 bg-cool-steel-100 dark:bg-cool-steel-700 hover:bg-cool-steel-200 dark:hover:bg-cool-steel-600 rounded-lg transition-colors"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors"
           >
             {t("Cancel")}
           </button>
           <button
             type="submit"
-            class="px-4 py-2 text-sm font-medium text-white bg-cerulean-600 hover:bg-cerulean-700 rounded-lg transition-colors"
+            class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
           >
             {t("Create Report")}
           </button>
@@ -142,11 +138,11 @@
 
   <%!-- Reports List --%>
   <%= if @reports != [] do %>
-    <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
+    <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
       <div class="overflow-x-auto">
-        <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-          <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/75">
-            <tr class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+        <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+          <thead class="bg-gray-50 dark:bg-gray-800/75">
+            <tr class="text-xs text-gray-600 dark:text-gray-400">
               <th class="px-4 py-2 text-left font-medium">{t("Name")}</th>
               <th class="px-4 py-2 text-left font-medium">{t("Type")}</th>
               <th class="px-4 py-2 text-left font-medium">{t("Schedule")}</th>
@@ -156,24 +152,22 @@
               <th class="px-4 py-2 text-right font-medium">{t("Actions")}</th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-cool-steel-200 dark:divide-white/10">
+          <tbody class="divide-y divide-gray-200 dark:divide-white/10">
             <%= for report <- @reports do %>
               <tr class={"text-sm #{if !report.enabled, do: "opacity-50"}"}>
                 <td class="px-4 py-3">
-                  <span class="font-medium text-cool-steel-900 dark:text-white">
-                    {report.name}
-                  </span>
+                  <span class="font-medium text-gray-900 dark:text-white">{report.name}</span>
                 </td>
-                <td class="px-4 py-3 text-cool-steel-600 dark:text-cool-steel-400">
+                <td class="px-4 py-3 text-gray-600 dark:text-gray-400">
                   {humanize_type(report.report_type)}
                 </td>
-                <td class="px-4 py-3 text-cool-steel-600 dark:text-cool-steel-400">
+                <td class="px-4 py-3 text-gray-600 dark:text-gray-400">
                   {humanize_schedule(report.schedule)}
                 </td>
-                <td class="px-4 py-3 text-xs text-cool-steel-500 dark:text-cool-steel-400 max-w-48 truncate">
+                <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400 max-w-48 truncate">
                   {format_recipients(report.recipients)}
                 </td>
-                <td class="px-4 py-3 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400">
                   <%= if report.last_run_at do %>
                     {Calendar.strftime(report.last_run_at, "%b %d, %H:%M")}
                   <% else %>
@@ -192,7 +186,7 @@
                       phx-click="run_now"
                       phx-value-id={report.id}
                       title="Run now"
-                      class="text-cool-steel-400 hover:text-cerulean-600 dark:hover:text-cerulean-400"
+                      class="text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
                     >
                       <.icon name="hero-play" class="w-4 h-4" />
                     </button>
@@ -200,7 +194,7 @@
                       phx-click="toggle"
                       phx-value-id={report.id}
                       title={if report.enabled, do: "Disable", else: "Enable"}
-                      class="text-cool-steel-400 hover:text-wheat-600 dark:hover:text-wheat-400"
+                      class="text-gray-400 hover:text-yellow-600 dark:hover:text-yellow-400"
                     >
                       <.icon
                         name={if report.enabled, do: "hero-pause", else: "hero-play"}
@@ -212,7 +206,7 @@
                       phx-value-id={report.id}
                       data-confirm="Delete this report?"
                       title="Delete"
-                      class="text-cool-steel-400 hover:text-sweet-salmon-600 dark:hover:text-sweet-salmon-400"
+                      class="text-gray-400 hover:text-red-600 dark:hover:text-red-400"
                     >
                       <.icon name="hero-trash" class="w-4 h-4" />
                     </button>
@@ -225,20 +219,20 @@
       </div>
     </div>
   <% else %>
-    <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-12 text-center">
+    <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-12 text-center">
       <.icon
         name="hero-document-chart-bar"
-        class="w-12 h-12 mx-auto text-cool-steel-300 dark:text-cool-steel-600"
+        class="w-12 h-12 mx-auto text-gray-300 dark:text-gray-600"
       />
-      <h3 class="mt-4 text-sm font-semibold text-cool-steel-900 dark:text-white">
+      <h3 class="mt-4 text-sm font-semibold text-gray-900 dark:text-white">
         {t("No scheduled reports")}
       </h3>
-      <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
         {t("Create a report to start receiving automated updates via email.")}
       </p>
       <button
         phx-click="show_form"
-        class="mt-4 inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-white bg-cerulean-600 hover:bg-cerulean-700 rounded-lg transition-colors"
+        class="mt-4 inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
       >
         <.icon name="hero-plus" class="w-4 h-4" />
         {t("Create First Report")}
diff --git a/lib/towerops_web/live/rf_link_health_live.ex b/lib/towerops_web/live/rf_link_health_live.ex
index 3b68dc97..1c1d4f63 100644
--- a/lib/towerops_web/live/rf_link_health_live.ex
+++ b/lib/towerops_web/live/rf_link_health_live.ex
@@ -82,18 +82,15 @@ defmodule ToweropsWeb.RfLinkHealthLive do
 
   @doc false
   def health_color(:healthy), do: "text-green-600 dark:text-green-400"
-  def health_color(:degraded), do: "text-wheat-600 dark:text-wheat-400"
-  def health_color(:critical), do: "text-sweet-salmon-600 dark:text-sweet-salmon-400"
-  def health_color(_), do: "text-cool-steel-400 dark:text-cool-steel-500"
+  def health_color(:degraded), do: "text-yellow-600 dark:text-yellow-400"
+  def health_color(:critical), do: "text-red-600 dark:text-red-400"
+  def health_color(_), do: "text-gray-400 dark:text-gray-500"
 
   @doc false
   def health_bg(:healthy), do: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300"
-  def health_bg(:degraded), do: "bg-wheat-100 text-wheat-700 dark:bg-wheat-900/50 dark:text-wheat-300"
-
-  def health_bg(:critical),
-    do: "bg-sweet-salmon-100 text-sweet-salmon-700 dark:bg-sweet-salmon-900/50 dark:text-sweet-salmon-300"
-
-  def health_bg(_), do: "bg-cool-steel-100 text-cool-steel-700 dark:bg-cool-steel-800 dark:text-cool-steel-300"
+  def health_bg(:degraded), do: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-300"
+  def health_bg(:critical), do: "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300"
+  def health_bg(_), do: "bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300"
 
   @doc false
   def health_label(:healthy), do: "Healthy"
@@ -111,10 +108,10 @@ defmodule ToweropsWeb.RfLinkHealthLive do
   end
 
   @doc false
-  def signal_bar_color(nil), do: "bg-cool-steel-300 dark:bg-cool-steel-600"
+  def signal_bar_color(nil), do: "bg-gray-300 dark:bg-gray-600"
   def signal_bar_color(signal) when signal > -65, do: "bg-green-500"
-  def signal_bar_color(signal) when signal > -75, do: "bg-wheat-500"
-  def signal_bar_color(_), do: "bg-sweet-salmon-500"
+  def signal_bar_color(signal) when signal > -75, do: "bg-yellow-500"
+  def signal_bar_color(_), do: "bg-red-500"
 
   @doc false
   def snr_bar_width(nil), do: 0
@@ -126,10 +123,10 @@ defmodule ToweropsWeb.RfLinkHealthLive do
   end
 
   @doc false
-  def snr_bar_color(nil), do: "bg-cool-steel-300 dark:bg-cool-steel-600"
+  def snr_bar_color(nil), do: "bg-gray-300 dark:bg-gray-600"
   def snr_bar_color(snr) when snr > 25, do: "bg-green-500"
-  def snr_bar_color(snr) when snr > 15, do: "bg-wheat-500"
-  def snr_bar_color(_), do: "bg-sweet-salmon-500"
+  def snr_bar_color(snr) when snr > 15, do: "bg-yellow-500"
+  def snr_bar_color(_), do: "bg-red-500"
 
   @doc false
   def format_signal(nil), do: "-"
@@ -174,8 +171,8 @@ defmodule ToweropsWeb.RfLinkHealthLive do
   end
 
   @doc false
-  def stat_card_class(:all, _), do: "ring-2 ring-cerulean-500"
-  def stat_card_class(filter, filter), do: "ring-2 ring-cerulean-500"
+  def stat_card_class(:all, _), do: "ring-2 ring-blue-500"
+  def stat_card_class(filter, filter), do: "ring-2 ring-blue-500"
   def stat_card_class(_, _), do: ""
 
   @doc false
diff --git a/lib/towerops_web/live/rf_link_health_live.html.heex b/lib/towerops_web/live/rf_link_health_live.html.heex
index 7571328d..166f1c8b 100644
--- a/lib/towerops_web/live/rf_link_health_live.html.heex
+++ b/lib/towerops_web/live/rf_link_health_live.html.heex
@@ -10,8 +10,8 @@
   ]} />
 
   <div class="mb-6">
-    <h1 class="text-2xl font-bold text-cool-steel-900 dark:text-white">{t("RF Link Health")}</h1>
-    <p class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{t("RF Link Health")}</h1>
+    <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
       {t("Wireless link quality triage — weakest links first")}
     </p>
   </div>
@@ -21,12 +21,12 @@
     <button
       phx-click="filter"
       phx-value-filter="all"
-      class={"bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-4 text-left cursor-pointer hover:border-cerulean-300 dark:hover:border-cerulean-700 transition-colors #{stat_card_class(@filter, :all)}"}
+      class={"bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-4 text-left cursor-pointer hover:border-blue-300 dark:hover:border-blue-700 transition-colors #{stat_card_class(@filter, :all)}"}
     >
-      <div class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+      <div class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
         {t("Total Links")}
       </div>
-      <div class="mt-1 text-2xl font-bold text-cool-steel-900 dark:text-white">
+      <div class="mt-1 text-2xl font-bold text-gray-900 dark:text-white">
         {@summary.total}
       </div>
     </button>
@@ -34,9 +34,9 @@
     <button
       phx-click="filter"
       phx-value-filter="healthy"
-      class={"bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-4 text-left cursor-pointer hover:border-green-300 dark:hover:border-green-700 transition-colors #{stat_card_class(@filter, :healthy)}"}
+      class={"bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-4 text-left cursor-pointer hover:border-green-300 dark:hover:border-green-700 transition-colors #{stat_card_class(@filter, :healthy)}"}
     >
-      <div class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+      <div class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
         {t("Healthy")}
       </div>
       <div class="mt-1 text-2xl font-bold text-green-600 dark:text-green-400">
@@ -47,12 +47,12 @@
     <button
       phx-click="filter"
       phx-value-filter="degraded"
-      class={"bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-4 text-left cursor-pointer hover:border-wheat-300 dark:hover:border-wheat-700 transition-colors #{stat_card_class(@filter, :degraded)}"}
+      class={"bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-4 text-left cursor-pointer hover:border-yellow-300 dark:hover:border-yellow-700 transition-colors #{stat_card_class(@filter, :degraded)}"}
     >
-      <div class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+      <div class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
         {t("Degraded")}
       </div>
-      <div class="mt-1 text-2xl font-bold text-wheat-600 dark:text-wheat-400">
+      <div class="mt-1 text-2xl font-bold text-yellow-600 dark:text-yellow-400">
         {@summary.degraded}
       </div>
     </button>
@@ -60,12 +60,12 @@
     <button
       phx-click="filter"
       phx-value-filter="critical"
-      class={"bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-4 text-left cursor-pointer hover:border-sweet-salmon-300 dark:hover:border-sweet-salmon-700 transition-colors #{stat_card_class(@filter, :critical)}"}
+      class={"bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-4 text-left cursor-pointer hover:border-red-300 dark:hover:border-red-700 transition-colors #{stat_card_class(@filter, :critical)}"}
     >
-      <div class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider">
+      <div class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
         {t("Critical")}
       </div>
-      <div class="mt-1 text-2xl font-bold text-sweet-salmon-600 dark:text-sweet-salmon-400">
+      <div class="mt-1 text-2xl font-bold text-red-600 dark:text-red-400">
         {@summary.critical}
       </div>
     </button>
@@ -73,19 +73,19 @@
 
   <%!-- Weakest Links Table --%>
   <%= if @links != [] do %>
-    <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10">
-      <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-        <h2 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+    <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10">
+      <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+        <h2 class="text-sm font-semibold text-gray-900 dark:text-white">
           {t("RF Links")}
-          <span class="text-cool-steel-400 font-normal ml-1">
+          <span class="text-gray-400 font-normal ml-1">
             ({length(@links)})
           </span>
         </h2>
       </div>
       <div class="overflow-x-auto">
-        <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-          <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/75">
-            <tr class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+        <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+          <thead class="bg-gray-50 dark:bg-gray-800/75">
+            <tr class="text-xs text-gray-600 dark:text-gray-400">
               <th class="px-4 py-2 text-left font-medium">{t("Client")}</th>
               <th class="px-4 py-2 text-left font-medium">{t("AP / Device")}</th>
               <th class="px-4 py-2 text-left font-medium">{t("Signal")}</th>
@@ -95,19 +95,19 @@
               <th class="px-4 py-2 text-left font-medium">{t("Last Seen")}</th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-cool-steel-200 dark:divide-white/10">
+          <tbody class="divide-y divide-gray-200 dark:divide-white/10">
             <%= for link <- @links do %>
               <%!-- Main row --%>
               <tr
                 phx-click="toggle_expand"
                 phx-value-id={link.id}
-                class="text-sm hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800 transition-colors cursor-pointer"
+                class="text-sm hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer"
               >
                 <td class="px-4 py-3">
-                  <div class="font-medium text-cool-steel-900 dark:text-white">
+                  <div class="font-medium text-gray-900 dark:text-white">
                     {link_name(link)}
                   </div>
-                  <div class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                  <div class="text-xs text-gray-500 dark:text-gray-400">
                     {link.mac_address}
                   </div>
                 </td>
@@ -115,17 +115,17 @@
                   <%= if link.device do %>
                     <.link
                       navigate={~p"/devices/#{link.device_id}"}
-                      class="text-cool-steel-900 dark:text-white hover:text-cerulean-600 dark:hover:text-cerulean-400 hover:underline"
+                      class="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 hover:underline"
                     >
                       {device_name(link)}
                     </.link>
                   <% else %>
-                    <span class="text-cool-steel-400">-</span>
+                    <span class="text-gray-400">-</span>
                   <% end %>
                 </td>
                 <td class="px-4 py-3">
                   <div class="flex items-center gap-2">
-                    <div class="w-16 h-2 rounded-full bg-cool-steel-200 dark:bg-cool-steel-700 overflow-hidden">
+                    <div class="w-16 h-2 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
                       <div
                         class={"h-full rounded-full #{signal_bar_color(link.signal_strength)}"}
                         style={"width: #{signal_bar_width(link.signal_strength)}%"}
@@ -139,21 +139,21 @@
                 </td>
                 <td class="px-4 py-3">
                   <div class="flex items-center gap-2">
-                    <div class="w-12 h-2 rounded-full bg-cool-steel-200 dark:bg-cool-steel-700 overflow-hidden">
+                    <div class="w-12 h-2 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
                       <div
                         class={"h-full rounded-full #{snr_bar_color(link.snr)}"}
                         style={"width: #{snr_bar_width(link.snr)}%"}
                       >
                       </div>
                     </div>
-                    <span class="text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                    <span class="text-xs text-gray-600 dark:text-gray-400">
                       {format_snr(link.snr)}
                     </span>
                   </div>
                 </td>
-                <td class="px-4 py-3 text-xs text-cool-steel-600 dark:text-cool-steel-400">
+                <td class="px-4 py-3 text-xs text-gray-600 dark:text-gray-400">
                   <span>{format_rate(link.tx_rate)}</span>
-                  <span class="text-cool-steel-300 dark:text-cool-steel-600 mx-1">/</span>
+                  <span class="text-gray-300 dark:text-gray-600 mx-1">/</span>
                   <span>{format_rate(link.rx_rate)}</span>
                 </td>
                 <td class="px-4 py-3">
@@ -161,7 +161,7 @@
                     {health_label(link.health)}
                   </span>
                 </td>
-                <td class="px-4 py-3 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                <td class="px-4 py-3 text-xs text-gray-500 dark:text-gray-400">
                   <%= if link.last_seen_at do %>
                     <time datetime={DateTime.to_iso8601(link.last_seen_at)}>
                       {Calendar.strftime(link.last_seen_at, "%H:%M")}
@@ -174,16 +174,16 @@
 
               <%!-- Expandable detail row --%>
               <%= if @expanded_id == link.id do %>
-                <tr class="bg-cool-steel-50/50 dark:bg-cool-steel-800/30">
+                <tr class="bg-gray-50/50 dark:bg-gray-800/30">
                   <td colspan="7" class="px-4 py-4">
                     <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                       <%!-- Signal Strength Detail --%>
                       <div>
-                        <h4 class="text-xs font-semibold text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider mb-2">
+                        <h4 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
                           {t("Signal Strength")}
                         </h4>
                         <div class="flex items-center gap-3">
-                          <div class="flex-1 h-3 rounded-full bg-cool-steel-200 dark:bg-cool-steel-700 overflow-hidden">
+                          <div class="flex-1 h-3 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
                             <div
                               class={"h-full rounded-full transition-all #{signal_bar_color(link.signal_strength)}"}
                               style={"width: #{signal_bar_width(link.signal_strength)}%"}
@@ -194,9 +194,9 @@
                             {format_signal(link.signal_strength)}
                           </span>
                         </div>
-                        <div class="mt-2 flex justify-between text-[10px] text-cool-steel-400">
+                        <div class="mt-2 flex justify-between text-[10px] text-gray-400">
                           <span>-100 dBm</span>
-                          <span class="text-wheat-500">-75</span>
+                          <span class="text-yellow-500">-75</span>
                           <span class="text-green-500">-65</span>
                           <span>-30 dBm</span>
                         </div>
@@ -204,24 +204,24 @@
 
                       <%!-- SNR Detail --%>
                       <div>
-                        <h4 class="text-xs font-semibold text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider mb-2">
+                        <h4 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
                           {t("Signal-to-Noise Ratio")}
                         </h4>
                         <div class="flex items-center gap-3">
-                          <div class="flex-1 h-3 rounded-full bg-cool-steel-200 dark:bg-cool-steel-700 overflow-hidden">
+                          <div class="flex-1 h-3 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
                             <div
                               class={"h-full rounded-full transition-all #{snr_bar_color(link.snr)}"}
                               style={"width: #{snr_bar_width(link.snr)}%"}
                             >
                             </div>
                           </div>
-                          <span class="text-sm font-bold text-cool-steel-900 dark:text-white">
+                          <span class="text-sm font-bold text-gray-900 dark:text-white">
                             {format_snr(link.snr)}
                           </span>
                         </div>
-                        <div class="mt-2 flex justify-between text-[10px] text-cool-steel-400">
+                        <div class="mt-2 flex justify-between text-[10px] text-gray-400">
                           <span>0 dB</span>
-                          <span class="text-wheat-500">15</span>
+                          <span class="text-yellow-500">15</span>
                           <span class="text-green-500">25</span>
                           <span>40 dB</span>
                         </div>
@@ -229,48 +229,38 @@
 
                       <%!-- Additional Metrics --%>
                       <div>
-                        <h4 class="text-xs font-semibold text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider mb-2">
+                        <h4 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
                           {t("Link Details")}
                         </h4>
                         <dl class="space-y-1 text-sm">
                           <div class="flex justify-between">
-                            <dt class="text-cool-steel-500 dark:text-cool-steel-400">
-                              {t("Distance")}
-                            </dt>
-                            <dd class="text-cool-steel-900 dark:text-white font-medium">
+                            <dt class="text-gray-500 dark:text-gray-400">{t("Distance")}</dt>
+                            <dd class="text-gray-900 dark:text-white font-medium">
                               {format_distance(link.distance)}
                             </dd>
                           </div>
                           <div class="flex justify-between">
-                            <dt class="text-cool-steel-500 dark:text-cool-steel-400">
-                              {t("TX Rate")}
-                            </dt>
-                            <dd class="text-cool-steel-900 dark:text-white font-medium">
+                            <dt class="text-gray-500 dark:text-gray-400">{t("TX Rate")}</dt>
+                            <dd class="text-gray-900 dark:text-white font-medium">
                               {format_rate(link.tx_rate)}
                             </dd>
                           </div>
                           <div class="flex justify-between">
-                            <dt class="text-cool-steel-500 dark:text-cool-steel-400">
-                              {t("RX Rate")}
-                            </dt>
-                            <dd class="text-cool-steel-900 dark:text-white font-medium">
+                            <dt class="text-gray-500 dark:text-gray-400">{t("RX Rate")}</dt>
+                            <dd class="text-gray-900 dark:text-white font-medium">
                               {format_rate(link.rx_rate)}
                             </dd>
                           </div>
                           <div class="flex justify-between">
-                            <dt class="text-cool-steel-500 dark:text-cool-steel-400">
-                              {t("Uptime")}
-                            </dt>
-                            <dd class="text-cool-steel-900 dark:text-white font-medium">
+                            <dt class="text-gray-500 dark:text-gray-400">{t("Uptime")}</dt>
+                            <dd class="text-gray-900 dark:text-white font-medium">
                               {format_uptime(link.uptime_seconds)}
                             </dd>
                           </div>
                           <%= if link.capacity_utilization do %>
                             <div class="flex justify-between">
-                              <dt class="text-cool-steel-500 dark:text-cool-steel-400">
-                                {t("Capacity")}
-                              </dt>
-                              <dd class="text-cool-steel-900 dark:text-white font-medium">
+                              <dt class="text-gray-500 dark:text-gray-400">{t("Capacity")}</dt>
+                              <dd class="text-gray-900 dark:text-white font-medium">
                                 {link.capacity_utilization}%
                               </dd>
                             </div>
@@ -281,8 +271,8 @@
 
                     <%!-- 24h Sparkline --%>
                     <%= if sparkline = @sparkline_data[link.id] do %>
-                      <div class="mt-4 pt-4 border-t border-cool-steel-200 dark:border-white/10">
-                        <h4 class="text-xs font-semibold text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider mb-2">
+                      <div class="mt-4 pt-4 border-t border-gray-200 dark:border-white/10">
+                        <h4 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
                           {t("Signal Strength — Last 24 Hours")}
                         </h4>
                         <svg
@@ -295,7 +285,7 @@
                             fill="none"
                             stroke="currentColor"
                             stroke-width="1.5"
-                            class="text-cerulean-500"
+                            class="text-blue-500"
                           />
                         </svg>
                       </div>
@@ -309,15 +299,12 @@
       </div>
     </div>
   <% else %>
-    <div class="bg-white dark:bg-cool-steel-800/50 rounded-lg border border-cool-steel-200 dark:border-white/10 p-12 text-center">
-      <.icon
-        name="hero-signal"
-        class="w-12 h-12 mx-auto text-cool-steel-300 dark:text-cool-steel-600"
-      />
-      <h3 class="mt-4 text-sm font-semibold text-cool-steel-900 dark:text-white">
+    <div class="bg-white dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-white/10 p-12 text-center">
+      <.icon name="hero-signal" class="w-12 h-12 mx-auto text-gray-300 dark:text-gray-600" />
+      <h3 class="mt-4 text-sm font-semibold text-gray-900 dark:text-white">
         {t("No RF links found")}
       </h3>
-      <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
         {t("RF links will appear here when wireless clients are discovered via SNMP polling.")}
       </p>
     </div>
diff --git a/lib/towerops_web/live/schedule_live/form.html.heex b/lib/towerops_web/live/schedule_live/form.html.heex
index 17978e7d..7a60f1c4 100644
--- a/lib/towerops_web/live/schedule_live/form.html.heex
+++ b/lib/towerops_web/live/schedule_live/form.html.heex
@@ -7,11 +7,11 @@
   <div class="flex items-center gap-3 mb-6">
     <.link
       navigate={~p"/schedules"}
-      class="text-cool-steel-400 hover:text-cool-steel-600 dark:hover:text-cool-steel-300"
+      class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
     >
       <.icon name="hero-arrow-left" class="h-5 w-5" />
     </.link>
-    <h1 class="text-xl font-bold text-cool-steel-900 dark:text-white">{@page_title}</h1>
+    <h1 class="text-xl font-bold text-gray-900 dark:text-white">{@page_title}</h1>
   </div>
 
   <div class="max-w-2xl">
@@ -37,7 +37,7 @@
         </.button>
         <.link
           navigate={~p"/schedules"}
-          class="text-sm text-cool-steel-600 dark:text-cool-steel-400 hover:text-cool-steel-900 dark:hover:text-white"
+          class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
         >
           {t("Cancel")}
         </.link>
diff --git a/lib/towerops_web/live/schedule_live/index.html.heex b/lib/towerops_web/live/schedule_live/index.html.heex
index 5c037e2f..41aec2ae 100644
--- a/lib/towerops_web/live/schedule_live/index.html.heex
+++ b/lib/towerops_web/live/schedule_live/index.html.heex
@@ -5,14 +5,12 @@
   unresolved_alert_count={assigns[:unresolved_alert_count] || 0}
 >
   <div class="flex items-center justify-between mb-1">
-    <h1 class="text-xl font-bold text-cool-steel-900 dark:text-white">
-      {t("On-Call & Schedules")}
-    </h1>
+    <h1 class="text-xl font-bold text-gray-900 dark:text-white">{t("On-Call & Schedules")}</h1>
     <div class="flex items-center gap-2">
       <%= if @tab == "escalation-policies" do %>
         <.link
           navigate={~p"/schedules/escalation-policies/new"}
-          class="inline-flex items-center gap-2 rounded-lg bg-cerulean-600 px-4 py-2 text-sm font-semibold text-white hover:bg-cerulean-500 transition-colors"
+          class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500 transition-colors"
         >
           <.icon name="hero-plus" class="h-4 w-4" />
           {t("New Policy")}
@@ -20,7 +18,7 @@
       <% else %>
         <.link
           navigate={~p"/schedules/new"}
-          class="inline-flex items-center gap-2 rounded-lg bg-cerulean-600 px-4 py-2 text-sm font-semibold text-white hover:bg-cerulean-500 transition-colors"
+          class="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500 transition-colors"
         >
           <.icon name="hero-plus" class="h-4 w-4" />
           {t("New Schedule")}
@@ -28,7 +26,7 @@
       <% end %>
     </div>
   </div>
-  <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400 mb-6">
+  <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
     {t("Define on-call rotations and escalation policies for alert notifications.")}
   </p>
 
@@ -37,10 +35,9 @@
       patch={~p"/schedules?tab=schedules"}
       class={[
         "inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium transition-colors",
-        @tab == "schedules" &&
-          "bg-cool-steel-900 text-white dark:bg-white dark:text-cool-steel-900",
+        @tab == "schedules" && "bg-gray-900 text-white dark:bg-white dark:text-gray-900",
         @tab != "schedules" &&
-          "bg-cool-steel-100 text-cool-steel-700 hover:bg-cool-steel-200 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700"
+          "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
       ]}
     >
       {t("Schedules")}
@@ -49,10 +46,9 @@
       patch={~p"/schedules?tab=escalation-policies"}
       class={[
         "inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium transition-colors",
-        @tab == "escalation-policies" &&
-          "bg-cool-steel-900 text-white dark:bg-white dark:text-cool-steel-900",
+        @tab == "escalation-policies" && "bg-gray-900 text-white dark:bg-white dark:text-gray-900",
         @tab != "escalation-policies" &&
-          "bg-cool-steel-100 text-cool-steel-700 hover:bg-cool-steel-200 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700"
+          "bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
       ]}
     >
       {t("Escalation Policies")}
@@ -65,39 +61,39 @@
         <div class="text-center">
           <.icon
             name="hero-arrow-trending-up"
-            class="h-12 w-12 text-cool-steel-300 dark:text-cool-steel-600 mx-auto mb-4"
+            class="h-12 w-12 text-gray-300 dark:text-gray-600 mx-auto mb-4"
           />
-          <h3 class="text-lg font-semibold text-cool-steel-700 dark:text-cool-steel-300">
+          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">
             {t("No escalation policies")}
           </h3>
-          <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
             {t("Create an escalation policy to define how alerts are escalated to on-call users.")}
           </p>
         </div>
       </div>
     <% else %>
-      <div class="overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10">
-        <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-          <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/50">
+      <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
+        <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+          <thead class="bg-gray-50 dark:bg-gray-800/50">
             <tr>
-              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                 {t("Name")}
               </th>
-              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                 {t("Levels")}
               </th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-cool-steel-100 dark:divide-white/5 bg-white dark:bg-cool-steel-900">
+          <tbody class="divide-y divide-gray-100 dark:divide-white/5 bg-white dark:bg-gray-900">
             <%= for policy <- @policies do %>
               <tr
-                class="hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800/30 transition-colors cursor-pointer"
+                class="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors cursor-pointer"
                 phx-click={JS.navigate(~p"/schedules/escalation-policies/#{policy.id}")}
               >
-                <td class="px-4 py-3 text-sm font-medium text-cool-steel-900 dark:text-white">
+                <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">
                   {policy.name}
                 </td>
-                <td class="px-4 py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                   {length(policy.rules)}
                 </td>
               </tr>
@@ -111,7 +107,7 @@
     <form phx-change="search" phx-submit="search" class="mb-4">
       <div class="relative max-w-md">
         <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2.5">
-          <.icon name="hero-magnifying-glass" class="h-4 w-4 text-cool-steel-400" />
+          <.icon name="hero-magnifying-glass" class="h-4 w-4 text-gray-400" />
         </span>
         <input
           type="text"
@@ -119,7 +115,7 @@
           value={@search}
           placeholder={t("Search schedules…")}
           phx-debounce="300"
-          class="block w-full rounded-md border-cool-steel-300 dark:border-cool-steel-600 dark:bg-cool-steel-800 dark:text-white text-sm pl-9 py-1.5"
+          class="block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white text-sm pl-9 py-1.5"
         />
       </div>
     </form>
@@ -129,32 +125,32 @@
       <div class="flex items-center gap-2">
         <button
           phx-click="today"
-          class="rounded-md border border-cool-steel-300 dark:border-cool-steel-600 bg-white dark:bg-cool-steel-800 px-3 py-1.5 text-sm font-medium text-cool-steel-700 dark:text-cool-steel-200 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-700"
+          class="rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700"
         >
           {t("Today")}
         </button>
         <button
           phx-click="prev"
-          class="rounded-md border border-cool-steel-300 dark:border-cool-steel-600 bg-white dark:bg-cool-steel-800 p-1.5 text-cool-steel-500 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-700"
+          class="rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 p-1.5 text-gray-500 hover:bg-gray-50 dark:hover:bg-gray-700"
           title={t("Previous range")}
         >
           <.icon name="hero-chevron-left" class="h-4 w-4" />
         </button>
         <button
           phx-click="next"
-          class="rounded-md border border-cool-steel-300 dark:border-cool-steel-600 bg-white dark:bg-cool-steel-800 p-1.5 text-cool-steel-500 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-700"
+          class="rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 p-1.5 text-gray-500 hover:bg-gray-50 dark:hover:bg-gray-700"
           title={t("Next range")}
         >
           <.icon name="hero-chevron-right" class="h-4 w-4" />
         </button>
-        <span class="ml-2 text-sm font-semibold text-cool-steel-900 dark:text-white">
+        <span class="ml-2 text-sm font-semibold text-gray-900 dark:text-white">
           {window_label(@start_date, @range_days)}
         </span>
       </div>
       <form phx-change="set_range" class="inline-flex">
         <select
           name="range"
-          class="rounded-md border-cool-steel-300 dark:border-cool-steel-600 dark:bg-cool-steel-800 dark:text-white text-sm py-1.5"
+          class="rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white text-sm py-1.5"
         >
           <option value="7" selected={@range_days == 7}>{t("1 Week")}</option>
           <option value="14" selected={@range_days == 14}>{t("2 Weeks")}</option>
@@ -168,12 +164,12 @@
         <div class="text-center">
           <.icon
             name="hero-calendar-days"
-            class="h-12 w-12 text-cool-steel-300 dark:text-cool-steel-600 mx-auto mb-4"
+            class="h-12 w-12 text-gray-300 dark:text-gray-600 mx-auto mb-4"
           />
-          <h3 class="text-lg font-semibold text-cool-steel-700 dark:text-cool-steel-300">
+          <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">
             {t("No schedules")}
           </h3>
-          <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
             {t("Create an on-call schedule to define rotation coverage.")}
           </p>
         </div>
@@ -183,23 +179,21 @@
         <%= for schedule <- @schedules do %>
           <% days = days_in_window(@start_date, @range_days) %>
           <% today_idx = today_offset(@start_date, @range_days) %>
-          <div class="rounded-lg border border-cool-steel-200 dark:border-white/10 bg-white dark:bg-cool-steel-900 p-4">
+          <div class="rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-gray-900 p-4">
             <div class="flex items-center justify-between mb-3">
               <div>
                 <.link
                   navigate={~p"/schedules/#{schedule.id}"}
-                  class="text-base font-semibold text-cerulean-600 dark:text-cerulean-400 hover:underline"
+                  class="text-base font-semibold text-blue-600 dark:text-blue-400 hover:underline"
                 >
                   {schedule.name}
                 </.link>
-                <p class="text-xs text-cool-steel-500 dark:text-cool-steel-400 mt-0.5">
+                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                   {schedule.timezone}
                 </p>
               </div>
               <div class="text-right">
-                <p class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
-                  {t("On-Call Now")}
-                </p>
+                <p class="text-xs text-gray-500 dark:text-gray-400">{t("On-Call Now")}</p>
                 <%= if schedule.current_on_call do %>
                   <span class="inline-flex items-center gap-1.5">
                     <span class={[
@@ -207,27 +201,25 @@
                       schedule.current_on_call_color
                     ]}>
                     </span>
-                    <span class="text-sm font-medium text-cool-steel-900 dark:text-white">
+                    <span class="text-sm font-medium text-gray-900 dark:text-white">
                       {schedule.current_on_call_name}
                     </span>
                   </span>
                 <% else %>
-                  <span class="text-sm text-cool-steel-400 dark:text-cool-steel-500">
-                    {t("No one")}
-                  </span>
+                  <span class="text-sm text-gray-400 dark:text-gray-500">{t("No one")}</span>
                 <% end %>
               </div>
             </div>
 
             <%!-- Day header row --%>
             <div
-              class="grid gap-px text-xs text-cool-steel-500 dark:text-cool-steel-400 mb-1"
+              class="grid gap-px text-xs text-gray-500 dark:text-gray-400 mb-1"
               style={"grid-template-columns: repeat(#{@range_days}, minmax(0, 1fr));"}
             >
               <%= for {day, idx} <- Enum.with_index(days) do %>
                 <div class={[
                   "px-1 py-0.5 text-center",
-                  today_idx == idx && "font-bold text-sweet-salmon-600 dark:text-sweet-salmon-400"
+                  today_idx == idx && "font-bold text-red-600 dark:text-red-400"
                 ]}>
                   <div class="leading-tight">{Calendar.strftime(day, "%a")}</div>
                   <div class="leading-tight">{Calendar.strftime(day, "%-d")}</div>
@@ -237,7 +229,7 @@
 
             <%!-- Gantt strip --%>
             <div
-              class="relative grid gap-px h-8 rounded-md overflow-hidden bg-cool-steel-100 dark:bg-cool-steel-800"
+              class="relative grid gap-px h-8 rounded-md overflow-hidden bg-gray-100 dark:bg-gray-800"
               style={"grid-template-columns: repeat(#{@range_days}, minmax(0, 1fr));"}
             >
               <%= for segment <- schedule.segments do %>
@@ -254,7 +246,7 @@
               <% end %>
               <%= if today_idx do %>
                 <div
-                  class="pointer-events-none absolute top-0 bottom-0 w-px bg-sweet-salmon-500"
+                  class="pointer-events-none absolute top-0 bottom-0 w-px bg-red-500"
                   style={"left: calc((100% / #{@range_days}) * #{today_idx});"}
                 >
                 </div>
diff --git a/lib/towerops_web/live/schedule_live/show.html.heex b/lib/towerops_web/live/schedule_live/show.html.heex
index 8d1575aa..9b6550dd 100644
--- a/lib/towerops_web/live/schedule_live/show.html.heex
+++ b/lib/towerops_web/live/schedule_live/show.html.heex
@@ -8,21 +8,19 @@
     <div class="flex items-center gap-3 min-w-0">
       <.link
         navigate={~p"/schedules"}
-        class="shrink-0 text-cool-steel-400 hover:text-cool-steel-600 dark:hover:text-cool-steel-300"
+        class="shrink-0 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
       >
         <.icon name="hero-arrow-left" class="h-5 w-5" />
       </.link>
       <div class="min-w-0">
-        <h1 class="text-xl font-bold text-cool-steel-900 dark:text-white truncate">
-          {@schedule.name}
-        </h1>
-        <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">{@schedule.timezone}</p>
+        <h1 class="text-xl font-bold text-gray-900 dark:text-white truncate">{@schedule.name}</h1>
+        <p class="text-sm text-gray-500 dark:text-gray-400">{@schedule.timezone}</p>
       </div>
     </div>
     <div class="flex items-center gap-2 shrink-0">
       <.link
         navigate={~p"/schedules/#{@schedule.id}/edit"}
-        class="inline-flex items-center gap-2 rounded-lg bg-white dark:bg-cool-steel-800 px-3 py-2 text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300 border border-cool-steel-300 dark:border-cool-steel-600 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-700 transition-colors"
+        class="inline-flex items-center gap-2 rounded-lg bg-white dark:bg-gray-800 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
       >
         <.icon name="hero-pencil" class="h-4 w-4" />
         <span class="hidden sm:inline">{t("Edit")}</span>
@@ -30,7 +28,7 @@
       <button
         phx-click="delete"
         data-confirm={t("Are you sure you want to delete this schedule?")}
-        class="inline-flex items-center gap-2 rounded-lg bg-white dark:bg-cool-steel-800 px-3 py-2 text-sm font-medium text-sweet-salmon-600 dark:text-sweet-salmon-400 border border-cool-steel-300 dark:border-cool-steel-600 hover:bg-sweet-salmon-50 dark:hover:bg-sweet-salmon-900/20 transition-colors"
+        class="inline-flex items-center gap-2 rounded-lg bg-white dark:bg-gray-800 px-3 py-2 text-sm font-medium text-red-600 dark:text-red-400 border border-gray-300 dark:border-gray-600 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
       >
         <.icon name="hero-trash" class="h-4 w-4" />
         <span class="hidden sm:inline">{t("Delete")}</span>
@@ -39,38 +37,36 @@
   </div>
 
   <%= if @schedule.description do %>
-    <p class="mb-6 text-sm text-cool-steel-600 dark:text-cool-steel-400">
-      {@schedule.description}
-    </p>
+    <p class="mb-6 text-sm text-gray-600 dark:text-gray-400">{@schedule.description}</p>
   <% end %>
 
   <%!-- On-Call Status --%>
-  <div class="mb-8 rounded-lg border border-cool-steel-200 dark:border-white/10 bg-white dark:bg-cool-steel-900 p-4">
+  <div class="mb-8 rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-gray-900 p-4">
     <div class="flex items-center gap-3">
       <div class={[
         "h-10 w-10 rounded-full flex items-center justify-center",
         @on_call && "bg-green-100 dark:bg-green-900/40",
-        !@on_call && "bg-cool-steel-100 dark:bg-cool-steel-800"
+        !@on_call && "bg-gray-100 dark:bg-gray-800"
       ]}>
         <.icon
           name="hero-user"
           class={[
             "h-5 w-5",
             @on_call && "text-green-600 dark:text-green-400",
-            !@on_call && "text-cool-steel-400 dark:text-cool-steel-500"
+            !@on_call && "text-gray-400 dark:text-gray-500"
           ]}
         />
       </div>
       <div>
-        <p class="text-xs font-medium uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+        <p class="text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
           {t("Currently On-Call")}
         </p>
         <%= if @on_call do %>
-          <p class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+          <p class="text-sm font-semibold text-gray-900 dark:text-white">
             {display_name(@on_call)}
           </p>
         <% else %>
-          <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="text-sm text-gray-500 dark:text-gray-400">
             {t("No one is currently on-call")}
           </p>
         <% end %>
@@ -85,30 +81,30 @@
       <div class="flex items-center gap-2">
         <button
           phx-click="timeline_today"
-          class="rounded-md border border-cool-steel-300 dark:border-cool-steel-600 bg-white dark:bg-cool-steel-800 px-3 py-1.5 text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-700"
+          class="rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
         >
           {t("Today")}
         </button>
         <button
           phx-click="timeline_prev"
-          class="rounded-md border border-cool-steel-300 dark:border-cool-steel-600 bg-white dark:bg-cool-steel-800 p-1.5 text-cool-steel-500 dark:text-cool-steel-400 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-700"
+          class="rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 p-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
         >
           <.icon name="hero-chevron-left" class="h-4 w-4" />
         </button>
         <button
           phx-click="timeline_next"
-          class="rounded-md border border-cool-steel-300 dark:border-cool-steel-600 bg-white dark:bg-cool-steel-800 p-1.5 text-cool-steel-500 dark:text-cool-steel-400 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-700"
+          class="rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 p-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
         >
           <.icon name="hero-chevron-right" class="h-4 w-4" />
         </button>
-        <span class="text-sm font-semibold text-cool-steel-900 dark:text-white ml-2">
+        <span class="text-sm font-semibold text-gray-900 dark:text-white ml-2">
           {Calendar.strftime(@timeline_start, "%b %-d")} – {Calendar.strftime(
             @timeline_end,
             "%b %-d, %Y"
           )}
         </span>
       </div>
-      <span class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+      <span class="text-sm text-gray-500 dark:text-gray-400">
         {t("2 Weeks")}
       </span>
     </div>
@@ -116,8 +112,8 @@
     <%!-- Layer timelines --%>
     <%= if @layer_timelines != [] do %>
       <div class="overflow-x-auto">
-        <div class="rounded-lg border border-cool-steel-200 dark:border-white/10 bg-white dark:bg-cool-steel-900 p-4 mb-4 min-w-[320px]">
-          <h3 class="text-sm font-semibold text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider mb-4">
+        <div class="rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-gray-900 p-4 mb-4 min-w-[320px]">
+          <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">
             {t("Configuration Layers")}
           </h3>
 
@@ -128,8 +124,8 @@
                 <div class="w-28 shrink-0"></div>
                 <div class="flex-1 flex">
                   <%= for day <- @timeline_days do %>
-                    <div class="flex-1 text-center border-l first:border-l-0 border-cool-steel-200 dark:border-cool-steel-700">
-                      <span class="text-[10px] text-cool-steel-400 dark:text-cool-steel-500">
+                    <div class="flex-1 text-center border-l first:border-l-0 border-gray-200 dark:border-gray-700">
+                      <span class="text-[10px] text-gray-400 dark:text-gray-500">
                         {Calendar.strftime(day, "%-d %a")}
                       </span>
                     </div>
@@ -139,16 +135,16 @@
               <%!-- Timeline bar --%>
               <div class="flex items-center">
                 <div class="w-28 shrink-0 pr-2 text-right">
-                  <span class="text-xs font-medium text-cool-steel-700 dark:text-cool-steel-300 truncate">
+                  <span class="text-xs font-medium text-gray-700 dark:text-gray-300 truncate">
                     {lt.layer.name}
                   </span>
                 </div>
-                <div class="flex-1 relative h-8 bg-cool-steel-100 dark:bg-cool-steel-800 rounded overflow-hidden">
+                <div class="flex-1 relative h-8 bg-gray-100 dark:bg-gray-800 rounded overflow-hidden">
                   <%= for span <- lt.spans do %>
                     <div
                       class={[
                         "absolute inset-y-0 flex items-center px-1 overflow-hidden",
-                        @user_colors[span.user.id] || "bg-cool-steel-400"
+                        @user_colors[span.user.id] || "bg-gray-400"
                       ]}
                       style={"left: #{span.start_offset / span.total_hours * 100}%; width: #{span.duration / span.total_hours * 100}%;"}
                     >
@@ -161,7 +157,7 @@
                   <% today_offset = Date.diff(Date.utc_today(), @timeline_start) %>
                   <%= if today_offset >= 0 and today_offset < @timeline_days do %>
                     <div
-                      class="absolute inset-y-0 w-px bg-sweet-salmon-500 z-10"
+                      class="absolute inset-y-0 w-px bg-red-500 z-10"
                       style={"left: #{(today_offset * 24 + DateTime.utc_now().hour) / (length(@timeline_days) * 24) * 100}%;"}
                     >
                     </div>
@@ -175,8 +171,8 @@
 
       <%!-- Final Schedule --%>
       <div class="overflow-x-auto">
-        <div class="rounded-lg border border-cool-steel-200 dark:border-white/10 bg-white dark:bg-cool-steel-900 p-4 min-w-[320px]">
-          <h3 class="text-sm font-semibold text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider mb-4">
+        <div class="rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-gray-900 p-4 min-w-[320px]">
+          <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-4">
             {t("Final Schedule")}
           </h3>
           <%!-- Day headers --%>
@@ -184,8 +180,8 @@
             <div class="w-28 shrink-0"></div>
             <div class="flex-1 flex">
               <%= for day <- @timeline_days do %>
-                <div class="flex-1 text-center border-l first:border-l-0 border-cool-steel-200 dark:border-cool-steel-700">
-                  <span class="text-[10px] text-cool-steel-400 dark:text-cool-steel-500">
+                <div class="flex-1 text-center border-l first:border-l-0 border-gray-200 dark:border-gray-700">
+                  <span class="text-[10px] text-gray-400 dark:text-gray-500">
                     {Calendar.strftime(day, "%-d %a")}
                   </span>
                 </div>
@@ -195,12 +191,12 @@
           <%!-- Timeline bar --%>
           <div class="flex items-center">
             <div class="w-28 shrink-0"></div>
-            <div class="flex-1 relative h-8 bg-cool-steel-100 dark:bg-cool-steel-800 rounded overflow-hidden">
+            <div class="flex-1 relative h-8 bg-gray-100 dark:bg-gray-800 rounded overflow-hidden">
               <%= for span <- @final_spans do %>
                 <div
                   class={[
                     "absolute inset-y-0 flex items-center px-1 overflow-hidden",
-                    @user_colors[span.user.id] || "bg-cool-steel-400"
+                    @user_colors[span.user.id] || "bg-gray-400"
                   ]}
                   style={"left: #{span.start_offset / span.total_hours * 100}%; width: #{span.duration / span.total_hours * 100}%;"}
                 >
@@ -213,7 +209,7 @@
               <% today_offset = Date.diff(Date.utc_today(), @timeline_start) %>
               <%= if today_offset >= 0 and today_offset < @timeline_days do %>
                 <div
-                  class="absolute inset-y-0 w-px bg-sweet-salmon-500 z-10"
+                  class="absolute inset-y-0 w-px bg-red-500 z-10"
                   style={"left: #{(today_offset * 24 + DateTime.utc_now().hour) / (length(@timeline_days) * 24) * 100}%;"}
                 >
                 </div>
@@ -228,10 +224,10 @@
   <%!-- Layers --%>
   <div class="mb-8">
     <div class="flex items-center justify-between mb-4">
-      <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white">{t("Layers")}</h2>
+      <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{t("Layers")}</h2>
       <button
         phx-click="toggle_add_layer"
-        class="inline-flex items-center gap-1.5 text-sm font-medium text-cerulean-600 dark:text-cerulean-400 hover:text-cerulean-500"
+        class="inline-flex items-center gap-1.5 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500"
       >
         <.icon name="hero-plus" class="h-4 w-4" />
         {t("Add Layer")}
@@ -239,7 +235,7 @@
     </div>
 
     <%= if @show_add_layer do %>
-      <div class="mb-4 rounded-lg border border-cerulean-200 dark:border-cerulean-800 bg-cerulean-50/50 dark:bg-cerulean-900/10 p-4">
+      <div class="mb-4 rounded-lg border border-blue-200 dark:border-blue-800 bg-blue-50/50 dark:bg-blue-900/10 p-4">
         <.form for={@layer_form} phx-change="validate_layer" phx-submit="save_layer">
           <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
             <.input
@@ -284,19 +280,19 @@
 
           <%!-- User selection for new layer --%>
           <div class="mb-4">
-            <label class="block text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300 mb-2">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
               {t("Members")}
             </label>
             <%= if @new_layer_members != [] do %>
               <div class="flex flex-wrap gap-2 mb-2">
                 <%= for user <- @new_layer_members do %>
-                  <span class="inline-flex items-center gap-1 rounded-full bg-cerulean-100 dark:bg-cerulean-900/40 pl-2.5 pr-1 py-0.5 text-xs font-medium text-cerulean-700 dark:text-cerulean-300">
+                  <span class="inline-flex items-center gap-1 rounded-full bg-blue-100 dark:bg-blue-900/40 pl-2.5 pr-1 py-0.5 text-xs font-medium text-blue-700 dark:text-blue-300">
                     {display_name(user)}
                     <button
                       type="button"
                       phx-click="new_layer_remove_user"
                       phx-value-id={user.id}
-                      class="ml-0.5 rounded-full p-0.5 hover:bg-cerulean-200 dark:hover:bg-cerulean-800 transition-colors"
+                      class="ml-0.5 rounded-full p-0.5 hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors"
                     >
                       <.icon name="hero-x-mark" class="h-3 w-3" />
                     </button>
@@ -310,7 +306,7 @@
               <select
                 phx-change="new_layer_add_user"
                 name="user_id"
-                class="block w-full max-w-xs rounded-md border-cool-steel-300 dark:border-cool-steel-600 dark:bg-cool-steel-800 dark:text-white text-sm py-1.5"
+                class="block w-full max-w-xs rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white text-sm py-1.5"
               >
                 <option value="">{t("Select a user")}</option>
                 <%= for user <- available do %>
@@ -327,7 +323,7 @@
             <button
               type="button"
               phx-click="toggle_add_layer"
-              class="text-sm text-cool-steel-600 dark:text-cool-steel-400 hover:text-cool-steel-900 dark:hover:text-white"
+              class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
             >
               {t("Cancel")}
             </button>
@@ -337,8 +333,8 @@
     <% end %>
 
     <%= if Enum.empty?(@schedule.layers) do %>
-      <div class="rounded-lg border border-dashed border-cool-steel-300 dark:border-cool-steel-600 p-6 text-center">
-        <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+      <div class="rounded-lg border border-dashed border-gray-300 dark:border-gray-600 p-6 text-center">
+        <p class="text-sm text-gray-500 dark:text-gray-400">
           {t("No layers configured. Add a layer to define rotation coverage.")}
         </p>
       </div>
@@ -355,16 +351,16 @@
           <div
             data-id={layer.id}
             draggable="true"
-            class="rounded-lg border border-cool-steel-200 dark:border-white/10 bg-white dark:bg-cool-steel-900 p-4 cursor-move"
+            class="rounded-lg border border-gray-200 dark:border-white/10 bg-white dark:bg-gray-900 p-4 cursor-move"
           >
             <div class="flex items-start justify-between mb-3 gap-3">
               <div class="flex items-start gap-2 min-w-0">
-                <.icon name="hero-bars-3" class="h-4 w-4 text-cool-steel-400 mt-0.5 shrink-0" />
+                <.icon name="hero-bars-3" class="h-4 w-4 text-gray-400 mt-0.5 shrink-0" />
                 <div class="min-w-0">
-                  <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white truncate">
+                  <h3 class="text-sm font-semibold text-gray-900 dark:text-white truncate">
                     {layer.name}
                   </h3>
-                  <p class="text-xs text-cool-steel-500 dark:text-cool-steel-400 truncate">
+                  <p class="text-xs text-gray-500 dark:text-gray-400 truncate">
                     {String.capitalize(layer.rotation_type)} rotation, every {layer.rotation_interval}
                     <%= case layer.rotation_type do %>
                       <% "daily" -> %>
@@ -383,7 +379,7 @@
                   phx-click="move_layer"
                   phx-value-id={layer.id}
                   phx-value-direction="up"
-                  class="text-cool-steel-400 hover:text-cool-steel-600 dark:hover:text-cool-steel-300 disabled:opacity-30 disabled:hover:text-cool-steel-400"
+                  class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-30 disabled:hover:text-gray-400"
                   disabled={idx == 0}
                   title={t("Move up")}
                 >
@@ -393,7 +389,7 @@
                   phx-click="move_layer"
                   phx-value-id={layer.id}
                   phx-value-direction="down"
-                  class="text-cool-steel-400 hover:text-cool-steel-600 dark:hover:text-cool-steel-300 disabled:opacity-30 disabled:hover:text-cool-steel-400"
+                  class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-30 disabled:hover:text-gray-400"
                   disabled={idx == layer_count - 1}
                   title={t("Move down")}
                 >
@@ -403,7 +399,7 @@
                   phx-click="delete_layer"
                   phx-value-id={layer.id}
                   data-confirm={t("Are you sure you want to delete this layer?")}
-                  class="text-cool-steel-400 hover:text-sweet-salmon-500 dark:hover:text-sweet-salmon-400 transition-colors ml-1"
+                  class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors ml-1"
                   title={t("Delete")}
                 >
                   <.icon name="hero-trash" class="h-4 w-4" />
@@ -413,22 +409,22 @@
 
             <%!-- Members --%>
             <div class="mb-2">
-              <p class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 mb-2">
+              <p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">
                 {t("Members")}
               </p>
               <%= if Enum.empty?(layer.members) do %>
-                <p class="text-xs text-cool-steel-400 dark:text-cool-steel-500 mb-2">
+                <p class="text-xs text-gray-400 dark:text-gray-500 mb-2">
                   {t("No members yet")}
                 </p>
               <% else %>
                 <div class="flex flex-wrap gap-2 mb-2">
                   <%= for member <- Enum.sort_by(layer.members, & &1.position) do %>
-                    <span class="inline-flex items-center gap-1 rounded-full bg-cool-steel-100 dark:bg-cool-steel-800 pl-2.5 pr-1 py-0.5 text-xs font-medium text-cool-steel-700 dark:text-cool-steel-300">
+                    <span class="inline-flex items-center gap-1 rounded-full bg-gray-100 dark:bg-gray-800 pl-2.5 pr-1 py-0.5 text-xs font-medium text-gray-700 dark:text-gray-300">
                       {display_name(member.user)}
                       <button
                         phx-click="remove_member"
                         phx-value-id={member.id}
-                        class="ml-0.5 rounded-full p-0.5 hover:bg-cool-steel-200 dark:hover:bg-cool-steel-700 transition-colors"
+                        class="ml-0.5 rounded-full p-0.5 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
                       >
                         <.icon name="hero-x-mark" class="h-3 w-3" />
                       </button>
@@ -445,7 +441,7 @@
                   phx-change="add_member"
                   name="user_id"
                   phx-value-layer_id={layer.id}
-                  class="block w-full max-w-xs rounded-md border-cool-steel-300 dark:border-cool-steel-600 dark:bg-cool-steel-800 dark:text-white text-sm py-1.5"
+                  class="block w-full max-w-xs rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white text-sm py-1.5"
                 >
                   <option value="">{t("Select a user")}</option>
                   <%= for user <- available_users do %>
@@ -456,8 +452,8 @@
             </div>
 
             <%!-- Restrictions editor --%>
-            <div class="mt-3 pt-3 border-t border-cool-steel-100 dark:border-white/5">
-              <p class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 mb-2">
+            <div class="mt-3 pt-3 border-t border-gray-100 dark:border-white/5">
+              <p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">
                 {t("Restrict on-call shifts")}
               </p>
               <form
@@ -468,7 +464,7 @@
                 <input type="hidden" name="layer_id" value={layer.id} />
                 <select
                   name="restriction_type"
-                  class="block rounded-md border-cool-steel-300 dark:border-cool-steel-600 dark:bg-cool-steel-800 dark:text-white text-xs py-1"
+                  class="block rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white text-xs py-1"
                 >
                   <option value="" selected={is_nil(layer.restriction_type)}>
                     {t("Always on call (no restriction)")}
@@ -481,25 +477,25 @@
                   </option>
                 </select>
                 <%= if layer.restriction_type in ["time_of_day", "time_of_week"] do %>
-                  <div class="flex items-center gap-2 text-xs text-cool-steel-700 dark:text-cool-steel-300">
+                  <div class="flex items-center gap-2 text-xs text-gray-700 dark:text-gray-300">
                     <span>{t("From")}</span>
                     <input
                       type="time"
                       name="start_time"
                       value={layer.restrictions["start_time"] || "09:00"}
-                      class="rounded-md border-cool-steel-300 dark:border-cool-steel-600 dark:bg-cool-steel-800 dark:text-white text-xs py-1"
+                      class="rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white text-xs py-1"
                     />
                     <span>{t("to")}</span>
                     <input
                       type="time"
                       name="end_time"
                       value={layer.restrictions["end_time"] || "17:00"}
-                      class="rounded-md border-cool-steel-300 dark:border-cool-steel-600 dark:bg-cool-steel-800 dark:text-white text-xs py-1"
+                      class="rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white text-xs py-1"
                     />
                   </div>
                 <% end %>
                 <%= if layer.restriction_type == "time_of_week" do %>
-                  <div class="flex flex-wrap gap-2 text-xs text-cool-steel-700 dark:text-cool-steel-300">
+                  <div class="flex flex-wrap gap-2 text-xs text-gray-700 dark:text-gray-300">
                     <% selected_days =
                       ((layer.restrictions || %{})["days"] || [])
                       |> Enum.map(fn d ->
@@ -515,7 +511,7 @@
                           name={"days[#{day}]"}
                           value="true"
                           checked={day in selected_days}
-                          class="rounded border-cool-steel-300 dark:border-cool-steel-600 dark:bg-cool-steel-800"
+                          class="rounded border-gray-300 dark:border-gray-600 dark:bg-gray-800"
                         />
                         <span>{label}</span>
                       </label>
@@ -533,10 +529,10 @@
   <%!-- Overrides --%>
   <div>
     <div class="flex items-center justify-between mb-4">
-      <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white">{t("Overrides")}</h2>
+      <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{t("Overrides")}</h2>
       <button
         phx-click="toggle_add_override"
-        class="inline-flex items-center gap-1.5 text-sm font-medium text-cerulean-600 dark:text-cerulean-400 hover:text-cerulean-500"
+        class="inline-flex items-center gap-1.5 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500"
       >
         <.icon name="hero-plus" class="h-4 w-4" />
         {t("Add Override")}
@@ -544,7 +540,7 @@
     </div>
 
     <%= if @show_add_override do %>
-      <div class="mb-4 rounded-lg border border-cerulean-200 dark:border-cerulean-800 bg-cerulean-50/50 dark:bg-cerulean-900/10 p-4">
+      <div class="mb-4 rounded-lg border border-blue-200 dark:border-blue-800 bg-blue-50/50 dark:bg-blue-900/10 p-4">
         <.form for={@override_form} phx-change="validate_override" phx-submit="save_override">
           <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-4">
             <.input
@@ -572,7 +568,7 @@
             <button
               type="button"
               phx-click="toggle_add_override"
-              class="text-sm text-cool-steel-600 dark:text-cool-steel-400 hover:text-cool-steel-900 dark:hover:text-white"
+              class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
             >
               {t("Cancel")}
             </button>
@@ -582,38 +578,38 @@
     <% end %>
 
     <%= if Enum.empty?(@schedule.overrides) do %>
-      <div class="rounded-lg border border-dashed border-cool-steel-300 dark:border-cool-steel-600 p-6 text-center">
-        <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+      <div class="rounded-lg border border-dashed border-gray-300 dark:border-gray-600 p-6 text-center">
+        <p class="text-sm text-gray-500 dark:text-gray-400">
           {t("No overrides configured.")}
         </p>
       </div>
     <% else %>
-      <div class="overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10">
-        <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-          <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/50">
+      <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
+        <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+          <thead class="bg-gray-50 dark:bg-gray-800/50">
             <tr>
-              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                 {t("User")}
               </th>
-              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                 {t("Start")}
               </th>
-              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400">
+              <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                 {t("End")}
               </th>
               <th class="px-4 py-3"></th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-cool-steel-100 dark:divide-white/5 bg-white dark:bg-cool-steel-900">
+          <tbody class="divide-y divide-gray-100 dark:divide-white/5 bg-white dark:bg-gray-900">
             <%= for override <- @schedule.overrides do %>
               <tr>
-                <td class="px-4 py-3 text-sm text-cool-steel-900 dark:text-white">
+                <td class="px-4 py-3 text-sm text-gray-900 dark:text-white">
                   {display_name(override.user)}
                 </td>
-                <td class="px-4 py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                   {Calendar.strftime(override.start_time, "%Y-%m-%d %H:%M")}
                 </td>
-                <td class="px-4 py-3 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
                   {Calendar.strftime(override.end_time, "%Y-%m-%d %H:%M")}
                 </td>
                 <td class="px-4 py-3 text-right">
@@ -621,7 +617,7 @@
                     phx-click="delete_override"
                     phx-value-id={override.id}
                     data-confirm={t("Are you sure?")}
-                    class="text-cool-steel-400 hover:text-sweet-salmon-500 dark:hover:text-sweet-salmon-400 transition-colors"
+                    class="text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors"
                   >
                     <.icon name="hero-trash" class="h-4 w-4" />
                   </button>
diff --git a/lib/towerops_web/live/site_live/form.html.heex b/lib/towerops_web/live/site_live/form.html.heex
index 4d94bba2..45c2e654 100644
--- a/lib/towerops_web/live/site_live/form.html.heex
+++ b/lib/towerops_web/live/site_live/form.html.heex
@@ -10,7 +10,7 @@
           do: ~p"/sites/#{@site.id}",
           else: ~p"/sites"
       }
-      class="inline-flex items-center gap-1 text-sm text-cool-steel-600 hover:text-cool-steel-900 dark:text-cool-steel-400 dark:hover:text-white"
+      class="inline-flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
     >
       <.icon name="hero-arrow-left" class="h-4 w-4" />
       {if @live_action == :edit, do: "Back to Site", else: "Back to Sites"}
@@ -32,16 +32,14 @@
 
       <div class="mb-4">
         <label>
-          <span class="block text-sm font-medium text-cool-steel-900 dark:text-white mb-2">
+          <span class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
             {t("Parent Site")}
-            <span class="text-cool-steel-400 dark:text-cool-steel-500 font-normal">
-              (optional)
-            </span>
+            <span class="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
           </span>
           <select
             id={@form[:parent_site_id].id}
             name={@form[:parent_site_id].name}
-            class="block w-full rounded-lg border-0 py-2 px-3 text-cool-steel-900 shadow-sm ring-1 ring-inset ring-cool-steel-300 focus:ring-2 focus:ring-inset focus:ring-cerulean-600 sm:text-sm sm:leading-6 dark:bg-cool-steel-800/50 dark:text-white dark:ring-white/10 dark:focus:ring-cerulean-500"
+            class="block w-full rounded-lg border-0 py-2 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:focus:ring-blue-500"
           >
             <option value="">No parent site</option>
             {Phoenix.HTML.Form.options_for_select(
@@ -54,18 +52,15 @@
 
       <div class="mb-4">
         <label>
-          <span class="block text-sm font-medium text-cool-steel-900 dark:text-white mb-2">
-            Location
-            <span class="text-cool-steel-400 dark:text-cool-steel-500 font-normal">
-              (optional)
-            </span>
+          <span class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
+            Location <span class="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
           </span>
           <input
             type="text"
             id={@form[:location].id}
             name={@form[:location].name}
             value={@form[:location].value}
-            class="block w-full rounded-lg border-0 py-2 px-3 text-cool-steel-900 shadow-sm ring-1 ring-inset ring-cool-steel-300 focus:ring-2 focus:ring-inset focus:ring-cerulean-600 sm:text-sm sm:leading-6 dark:bg-cool-steel-800/50 dark:text-white dark:ring-white/10 dark:focus:ring-cerulean-500"
+            class="block w-full rounded-lg border-0 py-2 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:focus:ring-blue-500"
           />
         </label>
       </div>
@@ -74,16 +69,16 @@
       <div class="mt-6 border-t pt-6">
         <h3 class="text-base font-medium mb-4">
           {t("Geographic Location")}
-          <span class="text-cool-steel-400 dark:text-cool-steel-500 font-normal">(optional)</span>
+          <span class="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
         </h3>
-        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
           {t("Add geographic coordinates to enable network mapping and spatial analysis.")}
         </p>
 
         <div class="space-y-4">
           <div>
             <label>
-              <span class="block text-sm font-medium text-cool-steel-900 dark:text-white mb-2">
+              <span class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
                 {t("Address")}
               </span>
               <div class="flex gap-2">
@@ -93,17 +88,17 @@
                   name={@form[:address].name}
                   value={@form[:address].value}
                   placeholder="123 Main St, City, State, Country"
-                  class="flex-1 rounded-lg border-0 py-2 px-3 text-cool-steel-900 shadow-sm ring-1 ring-inset ring-cool-steel-300 focus:ring-2 focus:ring-inset focus:ring-cerulean-600 sm:text-sm sm:leading-6 dark:bg-cool-steel-800/50 dark:text-white dark:ring-white/10 dark:focus:ring-cerulean-500"
+                  class="flex-1 rounded-lg border-0 py-2 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:focus:ring-blue-500"
                 />
                 <button
                   type="button"
                   phx-click="geocode"
-                  class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-cerulean-600 hover:bg-cerulean-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cerulean-500 dark:focus:ring-offset-cool-steel-800"
+                  class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800"
                 >
                   {t("Geocode")}
                 </button>
               </div>
-              <p class="mt-1 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                 {t(
                   "Enter a full address and click Geocode to automatically fill latitude/longitude"
                 )}
@@ -114,7 +109,7 @@
           <div class="grid grid-cols-2 gap-4">
             <div>
               <label>
-                <span class="block text-sm font-medium text-cool-steel-900 dark:text-white mb-2">
+                <span class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
                   {t("Latitude")}
                 </span>
                 <input
@@ -126,9 +121,9 @@
                   placeholder="40.7128"
                   min="-90"
                   max="90"
-                  class="block w-full rounded-lg border-0 py-2 px-3 text-cool-steel-900 shadow-sm ring-1 ring-inset ring-cool-steel-300 focus:ring-2 focus:ring-inset focus:ring-cerulean-600 sm:text-sm sm:leading-6 dark:bg-cool-steel-800/50 dark:text-white dark:ring-white/10 dark:focus:ring-cerulean-500"
+                  class="block w-full rounded-lg border-0 py-2 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:focus:ring-blue-500"
                 />
-                <p class="mt-1 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                   -90 to 90
                 </p>
               </label>
@@ -136,7 +131,7 @@
 
             <div>
               <label>
-                <span class="block text-sm font-medium text-cool-steel-900 dark:text-white mb-2">
+                <span class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
                   {t("Longitude")}
                 </span>
                 <input
@@ -148,9 +143,9 @@
                   placeholder="-74.0060"
                   min="-180"
                   max="180"
-                  class="block w-full rounded-lg border-0 py-2 px-3 text-cool-steel-900 shadow-sm ring-1 ring-inset ring-cool-steel-300 focus:ring-2 focus:ring-inset focus:ring-cerulean-600 sm:text-sm sm:leading-6 dark:bg-cool-steel-800/50 dark:text-white dark:ring-white/10 dark:focus:ring-cerulean-500"
+                  class="block w-full rounded-lg border-0 py-2 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:focus:ring-blue-500"
                 />
-                <p class="mt-1 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                   -180 to 180
                 </p>
               </label>
@@ -160,10 +155,10 @@
 <!-- Map Preview -->
           <%= if @form[:latitude].value && @form[:longitude].value do %>
             <div class="mt-4">
-              <span class="block text-sm font-medium text-cool-steel-900 dark:text-white mb-2">
+              <span class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
                 {t("Map Preview")}
               </span>
-              <div class="border border-cool-steel-300 dark:border-cool-steel-600 rounded-lg overflow-hidden">
+              <div class="border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
                 <img
                   src={"https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/#{@form[:longitude].value},#{@form[:latitude].value},14,0/400x200?access_token=pk.1234"}
                   alt="Location preview"
@@ -171,7 +166,7 @@
                   onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDQwMCAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSI0MDAiIGhlaWdodD0iMjAwIiBmaWxsPSIjRjNGNEY2Ii8+Cjx0ZXh0IHg9IjIwMCIgeT0iMTAwIiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNiIgZmlsbD0iIzZCNzI4MCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZG9taW5hbnQtYmFzZWxpbmU9ImNlbnRyYWwiPk1hcCBwcmV2aWV3IG5vdCBhdmFpbGFibGU8L3RleHQ+Cjwvc3ZnPgo='; this.alt='Map preview not available';"
                 />
               </div>
-              <p class="mt-1 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                 Coordinates: {@form[:latitude].value}, {@form[:longitude].value}
               </p>
             </div>
@@ -181,16 +176,14 @@
 
       <div class="mb-4">
         <label>
-          <span class="block text-sm font-medium text-cool-steel-900 dark:text-white mb-2">
+          <span class="block text-sm font-medium text-gray-900 dark:text-white mb-2">
             {t("Description")}
-            <span class="text-cool-steel-400 dark:text-cool-steel-500 font-normal">
-              (optional)
-            </span>
+            <span class="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
           </span>
           <textarea
             id={@form[:description].id}
             name={@form[:description].name}
-            class="block w-full rounded-lg border-0 py-2 px-3 text-cool-steel-900 shadow-sm ring-1 ring-inset ring-cool-steel-300 focus:ring-2 focus:ring-inset focus:ring-cerulean-600 sm:text-sm sm:leading-6 dark:bg-cool-steel-800/50 dark:text-white dark:ring-white/10 dark:focus:ring-cerulean-500"
+            class="block w-full rounded-lg border-0 py-2 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:focus:ring-blue-500"
           >{Phoenix.HTML.Form.normalize_value("textarea", @form[:description].value)}</textarea>
         </label>
       </div>
@@ -199,11 +192,9 @@
         <div class="mt-6 border-t pt-6">
           <h3 class="text-base font-medium mb-4">
             {t("Agent Configuration")}
-            <span class="text-cool-steel-400 dark:text-cool-steel-500 font-normal">
-              (optional)
-            </span>
+            <span class="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
           </h3>
-          <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
             {t(
               "Set a default agent for SNMP polling at this site. This will override the organization default for all devices at this site. Leave blank to inherit from organization."
             )}
@@ -218,17 +209,17 @@
           />
 
           <%= if @live_action == :edit and @site.agent_token_id do %>
-            <p class="mt-1 text-sm text-wheat-600 dark:text-wheat-400 flex items-center gap-1">
+            <p class="mt-1 text-sm text-amber-600 dark:text-amber-400 flex items-center gap-1">
               <.icon name="hero-exclamation-triangle" class="h-4 w-4" />
               <strong>{t("Overriding")}</strong> organization default -
               all devices at this site will use this agent
             </p>
 
-            <div class="mt-4 p-3 bg-wheat-50 dark:bg-wheat-900/20 border border-wheat-200 dark:border-wheat-800 rounded-lg">
-              <p class="text-sm font-medium text-wheat-900 dark:text-wheat-200 mb-2">
+            <div class="mt-4 p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
+              <p class="text-sm font-medium text-amber-900 dark:text-amber-200 mb-2">
                 {t("Force Apply to Site Device")}
               </p>
-              <p class="text-sm text-wheat-700 dark:text-wheat-300 mb-3">
+              <p class="text-sm text-amber-700 dark:text-amber-300 mb-3">
                 {t("This will assign this agent to ALL devices at this site.")}
               </p>
               <.button
@@ -246,12 +237,12 @@
             </div>
           <% else %>
             <%= if Map.get(assigns, :org_agent) do %>
-              <p class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400 flex items-center gap-1">
+              <p class="mt-1 text-sm text-gray-600 dark:text-gray-400 flex items-center gap-1">
                 <.icon name="hero-building-office-2" class="h-4 w-4" />
                 Currently inheriting organization default: <strong>{@org_agent.name}</strong>
               </p>
             <% else %>
-              <p class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                 {t(
                   "Set a default agent for all devices at this site. Device can override this setting individually."
                 )}
@@ -264,9 +255,9 @@
       <div class="mt-6 border-t pt-6">
         <h3 class="text-base font-medium mb-4">
           {t("SNMP Configuration")}
-          <span class="text-cool-steel-400 dark:text-cool-steel-500 font-normal">(optional)</span>
+          <span class="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
         </h3>
-        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
           {t(
             "Override organization SNMP defaults for all devices at this site. Leave blank to inherit from organization."
           )}
@@ -371,11 +362,11 @@
         />
 
         <%= if @live_action == :edit and @site.snmp_community do %>
-          <div class="mt-4 p-3 bg-wheat-50 dark:bg-wheat-900/20 border border-wheat-200 dark:border-wheat-800 rounded-lg">
-            <p class="text-sm font-medium text-wheat-900 dark:text-wheat-200 mb-2">
+          <div class="mt-4 p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg">
+            <p class="text-sm font-medium text-amber-900 dark:text-amber-200 mb-2">
               {t("Force Apply to Site Device")}
             </p>
-            <p class="text-sm text-wheat-700 dark:text-wheat-300 mb-3">
+            <p class="text-sm text-amber-700 dark:text-amber-300 mb-3">
               {t("This will override SNMP settings for ALL devices at this site.")}
             </p>
             <.button
@@ -396,17 +387,15 @@
         <div class="mt-6 border-t pt-6">
           <h3 class="text-base font-medium mb-4">
             {t("MikroTik API Configuration")}
-            <span class="text-cool-steel-400 dark:text-cool-steel-500 font-normal">
-              (optional)
-            </span>
+            <span class="text-gray-400 dark:text-gray-500 font-normal">(optional)</span>
           </h3>
-          <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+          <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
             {t(
               "Override organization MikroTik API defaults for all devices at this site. Leave blank to inherit from organization. Only applies to MikroTik devices."
             )}
           </p>
-          <div class="mb-4 rounded-md bg-cerulean-50 dark:bg-cerulean-900/20 p-3">
-            <p class="text-xs text-cerulean-700 dark:text-cerulean-300">
+          <div class="mb-4 rounded-md bg-blue-50 dark:bg-blue-900/20 p-3">
+            <p class="text-xs text-blue-700 dark:text-blue-300">
               <.icon name="hero-beaker" class="h-4 w-4 inline" />
               <strong>{t("Experimental Feature:")}</strong>
               {t("MikroTik API integration is under active development.")}
@@ -448,8 +437,8 @@
             />
 
             <%= if @form[:mikrotik_use_ssl].value == false do %>
-              <div class="mt-3 rounded-md bg-sweet-salmon-50 dark:bg-sweet-salmon-900/20 p-4">
-                <p class="text-sm text-sweet-salmon-700 dark:text-sweet-salmon-300">
+              <div class="mt-3 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
+                <p class="text-sm text-red-700 dark:text-red-300">
                   <strong>🚨 Critical Security Warning:</strong>
                   {t(
                     "Plain API (port 8728) sends credentials unencrypted over the network. This setting is"
@@ -459,8 +448,8 @@
                 </p>
               </div>
             <% else %>
-              <div class="mt-3 rounded-md bg-wheat-50 dark:bg-wheat-900/20 p-4">
-                <p class="text-sm text-wheat-700 dark:text-wheat-300">
+              <div class="mt-3 rounded-md bg-yellow-50 dark:bg-yellow-900/20 p-4">
+                <p class="text-sm text-yellow-700 dark:text-yellow-300">
                   <strong>⚠️ Security Warning:</strong>
                   {t(
                     "Plain API (port 8728) sends credentials unencrypted. Use SSL (port 8729) whenever possible."
@@ -479,11 +468,11 @@
     </.form>
 
     <%= if @live_action == :edit do %>
-      <div class="mt-12 pt-8 border-t border-cool-steel-200 dark:border-white/10">
-        <h3 class="text-lg font-semibold text-sweet-salmon-600 dark:text-sweet-salmon-500 mb-4">
+      <div class="mt-12 pt-8 border-t border-gray-200 dark:border-white/10">
+        <h3 class="text-lg font-semibold text-red-600 dark:text-red-500 mb-4">
           {t("Danger Zone")}
         </h3>
-        <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400 mb-4">
+        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
           {t(
             "Once you delete a site, there is no going back. This will also delete all devices at this site."
           )}
diff --git a/lib/towerops_web/live/site_live/index.ex b/lib/towerops_web/live/site_live/index.ex
index 92d3b914..22e36d59 100644
--- a/lib/towerops_web/live/site_live/index.ex
+++ b/lib/towerops_web/live/site_live/index.ex
@@ -55,33 +55,32 @@ defmodule ToweropsWeb.SiteLive.Index do
   def format_qoe(score), do: :erlang.float_to_binary(score / 1, decimals: 1)
 
   @doc false
-  def qoe_color(nil), do: "text-cool-steel-400 dark:text-cool-steel-500"
-  def qoe_color(score) when score < 2.0, do: "text-sweet-salmon-600 dark:text-sweet-salmon-400"
-  def qoe_color(score) when score < 4.0, do: "text-wheat-600 dark:text-wheat-400"
+  def qoe_color(nil), do: "text-gray-400 dark:text-gray-500"
+  def qoe_color(score) when score < 2.0, do: "text-red-600 dark:text-red-400"
+  def qoe_color(score) when score < 4.0, do: "text-yellow-600 dark:text-yellow-400"
   def qoe_color(_), do: "text-green-600 dark:text-green-400"
 
   @doc false
-  def health_dot(nil), do: "bg-cool-steel-400"
-  def health_dot(:red), do: "bg-sweet-salmon-500"
-  def health_dot(:yellow), do: "bg-wheat-500"
+  def health_dot(nil), do: "bg-gray-400"
+  def health_dot(:red), do: "bg-red-500"
+  def health_dot(:yellow), do: "bg-yellow-500"
   def health_dot(_), do: "bg-green-500"
 
   @doc false
-  def urgency_classes("critical"),
-    do: "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"
+  def urgency_classes("critical"), do: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
 
-  def urgency_classes("warning"), do: "bg-wheat-100 text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400"
+  def urgency_classes("warning"), do: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"
 
-  def urgency_classes("info"), do: "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-400"
+  def urgency_classes("info"), do: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
 
-  def urgency_classes(_), do: "bg-cool-steel-100 text-cool-steel-600 dark:bg-cool-steel-800 dark:text-cool-steel-400"
+  def urgency_classes(_), do: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
 
   @doc false
   def source_classes("preseem"), do: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400"
 
   def source_classes("snmp"), do: "bg-cyan-100 text-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-400"
 
-  def source_classes("gaiia"), do: "bg-wheat-100 text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400"
+  def source_classes("gaiia"), do: "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400"
 
-  def source_classes(_), do: "bg-cool-steel-100 text-cool-steel-600 dark:bg-cool-steel-800 dark:text-cool-steel-400"
+  def source_classes(_), do: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
 end
diff --git a/lib/towerops_web/live/site_live/index.html.heex b/lib/towerops_web/live/site_live/index.html.heex
index c2529651..bbbe9b17 100644
--- a/lib/towerops_web/live/site_live/index.html.heex
+++ b/lib/towerops_web/live/site_live/index.html.heex
@@ -24,16 +24,11 @@
     <div class="flex items-center justify-center py-16">
       <div class="card shadow-md border dark:border-white/10 max-w-md w-full">
         <div class="items-center text-center">
-          <div class="rounded-full bg-cerulean-100 dark:bg-cerulean-900/40 p-4 mb-2">
-            <.icon
-              name="hero-map-pin-solid"
-              class="h-12 w-12 text-cerulean-500 dark:text-cerulean-400"
-            />
+          <div class="rounded-full bg-blue-100 dark:bg-blue-900/40 p-4 mb-2">
+            <.icon name="hero-map-pin-solid" class="h-12 w-12 text-blue-500 dark:text-blue-400" />
           </div>
-          <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white">
-            {t("No Sites Yet")}
-          </h3>
-          <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">{t("No Sites Yet")}</h3>
+          <p class="text-sm text-gray-600 dark:text-gray-400">
             {t("Create your first site to organize devices by tower location.")}
           </p>
           <div class="mt-4 flex gap-2">
@@ -46,45 +41,45 @@
     </div>
   <% else %>
     <%!-- Sites table --%>
-    <div class="mt-6 overflow-x-auto rounded-lg border border-cool-steel-200 dark:border-white/10">
-      <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
-        <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/80">
+    <div class="mt-6 overflow-x-auto rounded-lg border border-gray-200 dark:border-white/10">
+      <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
+        <thead class="bg-gray-50 dark:bg-gray-800/80">
           <tr>
-            <th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-cool-steel-500 dark:text-cool-steel-400">
+            <th class="px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
               {t("Site")}
             </th>
-            <th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-cool-steel-500 dark:text-cool-steel-400">
+            <th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
               {t("Devices")}
             </th>
-            <th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-cool-steel-500 dark:text-cool-steel-400">
+            <th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
               {t("Down")}
             </th>
             <th
-              class="hidden sm:table-cell px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-cool-steel-500 dark:text-cool-steel-400"
+              class="hidden sm:table-cell px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400"
               title={t("Quality of Experience — Preseem network quality score (0–100)")}
             >
               {t("QoE")}
             </th>
-            <th class="hidden sm:table-cell px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-cool-steel-500 dark:text-cool-steel-400">
+            <th class="hidden sm:table-cell px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
               {t("Subscribers")}
             </th>
-            <th class="hidden md:table-cell px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-cool-steel-500 dark:text-cool-steel-400">
+            <th class="hidden md:table-cell px-4 py-2 text-left text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
               {t("Location")}
             </th>
-            <th class="hidden lg:table-cell px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-cool-steel-500 dark:text-cool-steel-400">
+            <th class="hidden lg:table-cell px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
               {t("Coordinates")}
             </th>
-            <th class="hidden lg:table-cell px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-cool-steel-500 dark:text-cool-steel-400">
+            <th class="hidden lg:table-cell px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
               {t("Last Check")}
             </th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-cool-steel-100 bg-white dark:divide-white/5 dark:bg-cool-steel-800/50">
-          <tr :for={site <- @sites} class="hover:bg-cool-steel-50 dark:hover:bg-white/5">
+        <tbody class="divide-y divide-gray-100 bg-white dark:divide-white/5 dark:bg-gray-800/50">
+          <tr :for={site <- @sites} class="hover:bg-gray-50 dark:hover:bg-white/5">
             <td class="px-4 py-2.5">
               <.link
                 navigate={~p"/sites/#{site.id}"}
-                class="flex items-center gap-2 text-sm font-medium text-cool-steel-900 hover:text-cerulean-600 dark:text-white dark:hover:text-cerulean-400"
+                class="flex items-center gap-2 text-sm font-medium text-gray-900 hover:text-blue-600 dark:text-white dark:hover:text-blue-400"
               >
                 <span class={[
                   "h-3 w-3 rounded-full flex-shrink-0",
@@ -93,23 +88,20 @@
                 </span>
                 {site.name}
               </.link>
-              <p
-                :if={site.parent_site}
-                class="text-xs text-cool-steel-500 dark:text-cool-steel-400 ml-4"
-              >
+              <p :if={site.parent_site} class="text-xs text-gray-500 dark:text-gray-400 ml-4">
                 ↳ {site.parent_site.name}
               </p>
             </td>
-            <td class="px-4 py-2.5 text-right text-sm text-cool-steel-600 dark:text-cool-steel-400">
+            <td class="px-4 py-2.5 text-right text-sm text-gray-600 dark:text-gray-400">
               {if @summary_map[site.id], do: @summary_map[site.id].device_count, else: 0}
             </td>
             <td class="px-4 py-2.5 text-right text-sm">
               <%= if @summary_map[site.id] && @summary_map[site.id].devices_down > 0 do %>
-                <span class="text-sweet-salmon-600 dark:text-sweet-salmon-400">
+                <span class="text-red-600 dark:text-red-400">
                   {@summary_map[site.id].devices_down}
                 </span>
               <% else %>
-                <span class="text-cool-steel-400 dark:text-cool-steel-500">0</span>
+                <span class="text-gray-400 dark:text-gray-500">0</span>
               <% end %>
             </td>
             <td class="hidden sm:table-cell px-4 py-2.5 text-right text-sm">
@@ -118,30 +110,30 @@
                   {format_qoe(@summary_map[site.id].avg_qoe)}
                 </span>
               <% else %>
-                <span class="text-cool-steel-400 dark:text-cool-steel-500">—</span>
+                <span class="text-gray-400 dark:text-gray-500">—</span>
               <% end %>
             </td>
-            <td class="hidden sm:table-cell px-4 py-2.5 text-right text-sm text-cool-steel-600 dark:text-cool-steel-400">
+            <td class="hidden sm:table-cell px-4 py-2.5 text-right text-sm text-gray-600 dark:text-gray-400">
               <%= if @summary_map[site.id] && @summary_map[site.id].subscribers do %>
                 {@summary_map[site.id].subscribers}
               <% else %>
-                <span class="text-cool-steel-400 dark:text-cool-steel-500">—</span>
+                <span class="text-gray-400 dark:text-gray-500">—</span>
               <% end %>
             </td>
-            <td class="hidden md:table-cell px-4 py-2.5 text-sm text-cool-steel-500 dark:text-cool-steel-400 max-w-xs truncate">
+            <td class="hidden md:table-cell px-4 py-2.5 text-sm text-gray-500 dark:text-gray-400 max-w-xs truncate">
               {site.location || "—"}
             </td>
             <td class="hidden lg:table-cell px-4 py-2.5 text-right">
               <%= if site.latitude && site.longitude do %>
-                <span class="text-xs font-mono text-cool-steel-400 dark:text-cool-steel-500">
+                <span class="text-xs font-mono text-gray-400 dark:text-gray-500">
                   {Float.round(site.latitude, 4)}, {Float.round(site.longitude, 4)}
                 </span>
               <% else %>
-                <span class="text-cool-steel-400 dark:text-cool-steel-500 text-sm">—</span>
+                <span class="text-gray-400 dark:text-gray-500 text-sm">—</span>
               <% end %>
             </td>
-            <td class="hidden lg:table-cell px-4 py-2.5 text-right text-xs text-cool-steel-500 dark:text-cool-steel-400">
-              <span class="text-cool-steel-400 dark:text-cool-steel-500">—</span>
+            <td class="hidden lg:table-cell px-4 py-2.5 text-right text-xs text-gray-500 dark:text-gray-400">
+              <span class="text-gray-400 dark:text-gray-500">—</span>
             </td>
           </tr>
         </tbody>
@@ -152,21 +144,21 @@
     <%= if @insights != [] do %>
       <div class="mt-8">
         <div class="flex items-center justify-between mb-3">
-          <h2 class="text-sm font-semibold uppercase tracking-wide text-cool-steel-500 dark:text-cool-steel-400">
+          <h2 class="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
             {t("Insights")}
           </h2>
           <.link
             navigate={~p"/insights"}
-            class="text-xs font-medium text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400"
+            class="text-xs font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400"
           >
             View all →
           </.link>
         </div>
-        <div class="overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10 divide-y divide-cool-steel-100 dark:divide-white/5">
+        <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-white/10 divide-y divide-gray-100 dark:divide-white/5">
           <div
             :for={insight <- @insights}
             id={"insight-#{insight.id}"}
-            class="flex items-start justify-between gap-3 px-4 py-3 bg-white dark:bg-cool-steel-800/50 hover:bg-cool-steel-50 dark:hover:bg-white/5"
+            class="flex items-start justify-between gap-3 px-4 py-3 bg-white dark:bg-gray-800/50 hover:bg-gray-50 dark:hover:bg-white/5"
           >
             <div class="min-w-0 flex-1">
               <div class="flex items-center gap-1.5">
@@ -183,12 +175,12 @@
                   {insight.source}
                 </span>
               </div>
-              <p class="mt-1 text-sm font-medium text-cool-steel-900 dark:text-white">
+              <p class="mt-1 text-sm font-medium text-gray-900 dark:text-white">
                 {insight.title}
               </p>
               <p
                 :if={insight.description}
-                class="mt-0.5 text-xs text-cool-steel-500 dark:text-cool-steel-400 line-clamp-1"
+                class="mt-0.5 text-xs text-gray-500 dark:text-gray-400 line-clamp-1"
               >
                 {insight.description}
               </p>
@@ -197,7 +189,7 @@
               type="button"
               phx-click="dismiss_insight"
               phx-value-id={insight.id}
-              class="flex-shrink-0 rounded p-1 text-cool-steel-300 hover:bg-cool-steel-100 hover:text-cool-steel-500 dark:text-cool-steel-600 dark:hover:bg-white/10 dark:hover:text-cool-steel-400"
+              class="flex-shrink-0 rounded p-1 text-gray-300 hover:bg-gray-100 hover:text-gray-500 dark:text-gray-600 dark:hover:bg-white/10 dark:hover:text-gray-400"
               title="Dismiss"
             >
               <.icon name="hero-x-mark" class="h-3.5 w-3.5" />
diff --git a/lib/towerops_web/live/site_live/show.ex b/lib/towerops_web/live/site_live/show.ex
index 647abc84..50bd0362 100644
--- a/lib/towerops_web/live/site_live/show.ex
+++ b/lib/towerops_web/live/site_live/show.ex
@@ -168,30 +168,30 @@ defmodule ToweropsWeb.SiteLive.Show do
   defp format_number(number), do: to_string(number)
 
   @doc false
-  def qoe_color(nil), do: "text-cool-steel-400 dark:text-cool-steel-500"
+  def qoe_color(nil), do: "text-gray-400 dark:text-gray-500"
   def qoe_color(score) when score >= 8.0, do: "text-green-600 dark:text-green-400"
-  def qoe_color(score) when score >= 6.0, do: "text-wheat-600 dark:text-wheat-400"
-  def qoe_color(_), do: "text-sweet-salmon-600 dark:text-sweet-salmon-400"
+  def qoe_color(score) when score >= 6.0, do: "text-yellow-600 dark:text-yellow-400"
+  def qoe_color(_), do: "text-red-600 dark:text-red-400"
 
   @doc false
-  def qoe_bg(nil), do: "bg-cool-steel-50 border-cool-steel-200 dark:bg-cool-steel-800/50 dark:border-white/10"
+  def qoe_bg(nil), do: "bg-gray-50 border-gray-200 dark:bg-gray-800/50 dark:border-white/10"
   def qoe_bg(score) when score >= 8.0, do: "bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800/30"
 
-  def qoe_bg(score) when score >= 6.0, do: "bg-wheat-50 border-wheat-200 dark:bg-wheat-900/20 dark:border-wheat-800/30"
+  def qoe_bg(score) when score >= 6.0,
+    do: "bg-yellow-50 border-yellow-200 dark:bg-yellow-900/20 dark:border-yellow-800/30"
 
-  def qoe_bg(_),
-    do: "bg-sweet-salmon-50 border-sweet-salmon-200 dark:bg-sweet-salmon-900/20 dark:border-sweet-salmon-800/30"
+  def qoe_bg(_), do: "bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800/30"
 
   @doc false
-  def capacity_bar_color(nil), do: "bg-cool-steel-300"
+  def capacity_bar_color(nil), do: "bg-gray-300"
   def capacity_bar_color(score) when score >= 70, do: "bg-green-500"
-  def capacity_bar_color(score) when score >= 40, do: "bg-wheat-500"
-  def capacity_bar_color(_), do: "bg-sweet-salmon-500"
+  def capacity_bar_color(score) when score >= 40, do: "bg-yellow-500"
+  def capacity_bar_color(_), do: "bg-red-500"
 
   @doc false
   def status_dot_class(:up), do: "bg-green-500"
-  def status_dot_class(:down), do: "bg-sweet-salmon-500"
-  def status_dot_class(_), do: "bg-cool-steel-400"
+  def status_dot_class(:down), do: "bg-red-500"
+  def status_dot_class(_), do: "bg-gray-400"
 
   @doc false
   def time_ago(nil), do: "—"
@@ -218,18 +218,17 @@ defmodule ToweropsWeb.SiteLive.Show do
   def change_size_label(_), do: "Large"
 
   @doc false
-  def change_size_color(size) when size < 100,
-    do: "bg-cool-steel-100 text-cool-steel-600 dark:bg-cool-steel-700 dark:text-cool-steel-300"
+  def change_size_color(size) when size < 100, do: "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300"
 
-  def change_size_color(size) when size < 500, do: "bg-wheat-100 text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400"
+  def change_size_color(size) when size < 500,
+    do: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"
 
-  def change_size_color(_),
-    do: "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"
+  def change_size_color(_), do: "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
 
   @doc false
-  def insight_urgency_class("critical"), do: "text-sweet-salmon-600 dark:text-sweet-salmon-400"
-  def insight_urgency_class("warning"), do: "text-wheat-600 dark:text-wheat-400"
-  def insight_urgency_class(_), do: "text-cerulean-600 dark:text-cerulean-400"
+  def insight_urgency_class("critical"), do: "text-red-600 dark:text-red-400"
+  def insight_urgency_class("warning"), do: "text-yellow-600 dark:text-yellow-400"
+  def insight_urgency_class(_), do: "text-blue-600 dark:text-blue-400"
 
   @doc false
   def insight_urgency_icon("critical"), do: "hero-exclamation-triangle"
@@ -250,13 +249,13 @@ defmodule ToweropsWeb.SiteLive.Show do
   def format_capacity(_), do: "-"
 
   @doc false
-  def utilization_bar_color(pct) when pct >= 90, do: "bg-sweet-salmon-500"
-  def utilization_bar_color(pct) when pct >= 70, do: "bg-wheat-500"
+  def utilization_bar_color(pct) when pct >= 90, do: "bg-red-500"
+  def utilization_bar_color(pct) when pct >= 70, do: "bg-yellow-500"
   def utilization_bar_color(_pct), do: "bg-green-500"
 
   @doc false
-  def utilization_text_color(pct) when pct >= 90, do: "text-sweet-salmon-600 dark:text-sweet-salmon-400"
-  def utilization_text_color(pct) when pct >= 70, do: "text-wheat-600 dark:text-wheat-400"
+  def utilization_text_color(pct) when pct >= 90, do: "text-red-600 dark:text-red-400"
+  def utilization_text_color(pct) when pct >= 70, do: "text-yellow-600 dark:text-yellow-400"
   def utilization_text_color(_pct), do: "text-green-600 dark:text-green-400"
 
   # Enqueue discovery job - safe to call in test environment
diff --git a/lib/towerops_web/live/site_live/show.html.heex b/lib/towerops_web/live/site_live/show.html.heex
index 0ce56725..56c44253 100644
--- a/lib/towerops_web/live/site_live/show.html.heex
+++ b/lib/towerops_web/live/site_live/show.html.heex
@@ -11,11 +11,11 @@
   ]} />
   <!-- Prominent site header -->
   <div class="mb-6">
-    <h1 class="text-2xl font-bold text-cool-steel-900 dark:text-white">{@site.name}</h1>
-    <p :if={@site.location} class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{@site.name}</h1>
+    <p :if={@site.location} class="mt-1 text-sm text-gray-600 dark:text-gray-400">
       <.icon name="hero-map-pin" class="h-4 w-4 inline" /> {@site.location}
       <%= if @site.latitude && @site.longitude do %>
-        <span class="ml-2 font-mono text-xs text-cool-steel-400">
+        <span class="ml-2 font-mono text-xs text-gray-400">
           ({Float.round(@site.latitude, 4)}, {Float.round(@site.longitude, 4)})
         </span>
       <% end %>
@@ -32,7 +32,7 @@
       data-lng={@site.longitude}
       data-zoom="14"
       data-marker-title={@site.name}
-      class="h-48 w-full rounded-lg border border-cool-steel-200 dark:border-white/10 mb-6 z-0"
+      class="h-48 w-full rounded-lg border border-gray-200 dark:border-white/10 mb-6 z-0"
     >
     </div>
   <% end %>
@@ -77,35 +77,35 @@
   <%!-- Summary Stat Cards --%>
   <div class="mt-6 grid grid-cols-2 gap-4 sm:grid-cols-4">
     <%!-- Subscribers --%>
-    <div class="rounded-lg border border-cool-steel-200 bg-white dark:border-white/10 dark:bg-cool-steel-800/50 p-4 transition-shadow hover:shadow-sm">
-      <div class="flex items-center gap-2 text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
+    <div class="rounded-lg border border-gray-200 bg-white dark:border-white/10 dark:bg-gray-800/50 p-4 transition-shadow hover:shadow-sm">
+      <div class="flex items-center gap-2 text-sm font-medium text-gray-500 dark:text-gray-400">
         <.icon name="hero-users" class="h-4 w-4" /> {t("Subscribers")}
       </div>
-      <p class="mt-1 text-2xl font-bold text-cool-steel-900 dark:text-white font-mono">
+      <p class="mt-1 text-2xl font-bold text-gray-900 dark:text-white font-mono">
         {format_number(@site_summary.subscribers || 0)}
       </p>
     </div>
     <%!-- Financial data: role-gated --%>
     <%= if @can_view_financials do %>
       <%!-- MRR --%>
-      <div class="rounded-lg border border-cool-steel-200 bg-white dark:border-white/10 dark:bg-cool-steel-800/50 p-4 transition-shadow hover:shadow-sm">
-        <div class="flex items-center gap-2 text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
+      <div class="rounded-lg border border-gray-200 bg-white dark:border-white/10 dark:bg-gray-800/50 p-4 transition-shadow hover:shadow-sm">
+        <div class="flex items-center gap-2 text-sm font-medium text-gray-500 dark:text-gray-400">
           <.icon name="hero-currency-dollar" class="h-4 w-4" /> {t("Monthly Revenue")}
         </div>
-        <p class="mt-1 text-2xl font-bold text-cool-steel-900 dark:text-white">
+        <p class="mt-1 text-2xl font-bold text-gray-900 dark:text-white">
           {format_mrr(@site_summary.mrr)}
         </p>
       </div>
     <% end %>
     <%!-- Device Count --%>
-    <div class="rounded-lg border border-cool-steel-200 bg-white dark:border-white/10 dark:bg-cool-steel-800/50 p-4 transition-shadow hover:shadow-sm">
-      <div class="flex items-center gap-2 text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
+    <div class="rounded-lg border border-gray-200 bg-white dark:border-white/10 dark:bg-gray-800/50 p-4 transition-shadow hover:shadow-sm">
+      <div class="flex items-center gap-2 text-sm font-medium text-gray-500 dark:text-gray-400">
         <.icon name="hero-server" class="h-4 w-4" /> {t("Devices")}
       </div>
-      <p class="mt-1 text-2xl font-bold text-cool-steel-900 dark:text-white font-mono">
+      <p class="mt-1 text-2xl font-bold text-gray-900 dark:text-white font-mono">
         {format_number(@site_summary.device_count)}
         <%= if @site_summary.devices_down > 0 do %>
-          <span class="text-sm font-medium text-sweet-salmon-600 dark:text-sweet-salmon-400">
+          <span class="text-sm font-medium text-red-600 dark:text-red-400">
             ({@site_summary.devices_down} {t("down")})
           </span>
         <% end %>
@@ -113,20 +113,20 @@
     </div>
     <%!-- Active Alerts --%>
     <div class={[
-      "rounded-lg border bg-white dark:bg-cool-steel-800/50 p-4 transition-shadow hover:shadow-sm",
+      "rounded-lg border bg-white dark:bg-gray-800/50 p-4 transition-shadow hover:shadow-sm",
       if(length(@active_alerts) > 0,
-        do: "border-sweet-salmon-200 dark:border-sweet-salmon-900/50",
-        else: "border-cool-steel-200 dark:border-white/10"
+        do: "border-red-200 dark:border-red-900/50",
+        else: "border-gray-200 dark:border-white/10"
       )
     ]}>
-      <div class="flex items-center gap-2 text-sm font-medium text-cool-steel-500 dark:text-cool-steel-400">
+      <div class="flex items-center gap-2 text-sm font-medium text-gray-500 dark:text-gray-400">
         <.icon name="hero-bell-alert" class="h-4 w-4" /> {t("Active Alerts")}
       </div>
       <p class={[
         "mt-1 text-2xl font-bold font-mono",
         if(length(@active_alerts) > 0,
-          do: "text-sweet-salmon-600 dark:text-sweet-salmon-400",
-          else: "text-cool-steel-900 dark:text-white"
+          do: "text-red-600 dark:text-red-400",
+          else: "text-gray-900 dark:text-white"
         )
       ]}>
         {length(@active_alerts)}
@@ -136,17 +136,17 @@
 
   <%!-- Backhaul Capacity Card --%>
   <%= if @capacity_summary.interfaces != [] do %>
-    <div class="mt-6 rounded-lg border border-cool-steel-200 bg-white dark:border-white/10 dark:bg-cool-steel-800/50 p-4">
+    <div class="mt-6 rounded-lg border border-gray-200 bg-white dark:border-white/10 dark:bg-gray-800/50 p-4">
       <div class="flex items-center justify-between mb-3">
-        <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+        <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
           <.icon name="hero-signal" class="h-4 w-4 inline mr-1" />{t("Backhaul Capacity")}
         </h3>
-        <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
+        <span class="text-xs text-gray-500 dark:text-gray-400">
           {format_capacity(@capacity_summary.total_capacity_bps)} {t("total")}
         </span>
       </div>
       <div class="flex items-center gap-3 mb-3">
-        <div class="flex-1 bg-cool-steel-200 dark:bg-cool-steel-700 rounded-full h-3 overflow-hidden">
+        <div class="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-3 overflow-hidden">
           <div
             class={[
               "h-full rounded-full transition-all",
@@ -165,14 +165,14 @@
       </div>
       <div class="grid grid-cols-3 gap-2 text-xs">
         <div>
-          <span class="text-cool-steel-500 dark:text-cool-steel-400">{t("Throughput")}</span>
-          <p class="font-mono font-medium text-cool-steel-900 dark:text-white">
+          <span class="text-gray-500 dark:text-gray-400">{t("Throughput")}</span>
+          <p class="font-mono font-medium text-gray-900 dark:text-white">
             {format_capacity(@capacity_summary.total_throughput_bps)}
           </p>
         </div>
         <div>
-          <span class="text-cool-steel-500 dark:text-cool-steel-400">{t("Headroom")}</span>
-          <p class="font-mono font-medium text-cool-steel-900 dark:text-white">
+          <span class="text-gray-500 dark:text-gray-400">{t("Headroom")}</span>
+          <p class="font-mono font-medium text-gray-900 dark:text-white">
             {format_capacity(
               max(
                 0,
@@ -182,8 +182,8 @@
           </p>
         </div>
         <div>
-          <span class="text-cool-steel-500 dark:text-cool-steel-400">{t("Interfaces")}</span>
-          <p class="font-mono font-medium text-cool-steel-900 dark:text-white">
+          <span class="text-gray-500 dark:text-gray-400">{t("Interfaces")}</span>
+          <p class="font-mono font-medium text-gray-900 dark:text-white">
             {length(@capacity_summary.interfaces)}
           </p>
         </div>
@@ -196,7 +196,7 @@
     <div class={["mt-6 rounded-lg border p-4", qoe_bg(@qoe_summary[:score])]}>
       <div class="flex items-center justify-between">
         <div>
-          <h3 class="text-sm font-semibold text-cool-steel-700 dark:text-cool-steel-300">
+          <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">
             {t("Preseem QoE Score")}
           </h3>
           <p class={["mt-1 text-3xl font-bold", qoe_color(@qoe_summary[:score])]}>
@@ -205,17 +205,15 @@
         </div>
         <%= if @qoe_summary[:capacity_score] do %>
           <div class="text-right">
-            <p class="text-sm font-medium text-cool-steel-600 dark:text-cool-steel-400">
-              Capacity
-            </p>
+            <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Capacity</p>
             <div class="mt-1 w-32">
-              <div class="h-2 w-full rounded-full bg-cool-steel-200 dark:bg-cool-steel-700">
+              <div class="h-2 w-full rounded-full bg-gray-200 dark:bg-gray-700">
                 <div
                   class={["h-2 rounded-full", capacity_bar_color(@qoe_summary[:capacity_score])]}
                   style={"width: #{min(@qoe_summary[:capacity_score], 100)}%"}
                 />
               </div>
-              <p class="mt-0.5 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
                 {@qoe_summary[:capacity_score]}%
               </p>
             </div>
@@ -227,13 +225,13 @@
 
   <%!-- Subscriber Impact Breakdown by Device --%>
   <%= if @site_impact && @site_impact.subscriber_count > 0 do %>
-    <div class="mt-6 rounded-lg border border-cerulean-200 bg-cerulean-50 dark:border-cerulean-800/50 dark:bg-cerulean-950/30">
-      <div class="px-4 py-3 border-b border-cerulean-200 dark:border-cerulean-800/50">
+    <div class="mt-6 rounded-lg border border-indigo-200 bg-indigo-50 dark:border-indigo-800/50 dark:bg-indigo-950/30">
+      <div class="px-4 py-3 border-b border-indigo-200 dark:border-indigo-800/50">
         <div class="flex items-center justify-between">
-          <h3 class="text-sm font-semibold text-cerulean-900 dark:text-cerulean-200 flex items-center gap-1.5">
+          <h3 class="text-sm font-semibold text-indigo-900 dark:text-indigo-200 flex items-center gap-1.5">
             <.icon name="hero-users" class="h-4 w-4" /> {t("Subscriber Impact")}
           </h3>
-          <div class="flex items-center gap-4 text-sm font-medium text-cerulean-900 dark:text-cerulean-200">
+          <div class="flex items-center gap-4 text-sm font-medium text-indigo-900 dark:text-indigo-200">
             <span>{format_number(@site_impact.subscriber_count)} subscribers</span>
             <%= if @can_view_financials && @site_impact.mrr do %>
               <span>{format_mrr(@site_impact.mrr)}/mo</span>
@@ -243,9 +241,9 @@
       </div>
       <%= if @site_impact.devices != [] do %>
         <div class="overflow-x-auto">
-          <table class="min-w-full divide-y divide-cerulean-200 dark:divide-cerulean-800/50">
+          <table class="min-w-full divide-y divide-indigo-200 dark:divide-indigo-800/50">
             <thead>
-              <tr class="text-xs text-cerulean-700 dark:text-cerulean-300">
+              <tr class="text-xs text-indigo-700 dark:text-indigo-300">
                 <th class="px-4 py-2 text-left font-medium">{t("Device")}</th>
                 <th class="px-4 py-2 text-right font-medium">{t("Subscribers")}</th>
                 <%= if @can_view_financials do %>
@@ -253,17 +251,17 @@
                 <% end %>
               </tr>
             </thead>
-            <tbody class="divide-y divide-cerulean-100 dark:divide-cerulean-900/30">
+            <tbody class="divide-y divide-indigo-100 dark:divide-indigo-900/30">
               <%= for dev <- @site_impact.devices do %>
                 <tr class="text-sm">
-                  <td class="px-4 py-2 text-cerulean-900 dark:text-cerulean-200 font-medium">
+                  <td class="px-4 py-2 text-indigo-900 dark:text-indigo-200 font-medium">
                     {dev.name || dev.device_id}
                   </td>
-                  <td class="px-4 py-2 text-right text-cerulean-800 dark:text-cerulean-300 font-mono">
+                  <td class="px-4 py-2 text-right text-indigo-800 dark:text-indigo-300 font-mono">
                     {dev.count}
                   </td>
                   <%= if @can_view_financials do %>
-                    <td class="px-4 py-2 text-right text-cerulean-800 dark:text-cerulean-300 font-mono">
+                    <td class="px-4 py-2 text-right text-indigo-800 dark:text-indigo-300 font-mono">
                       {format_mrr(dev.mrr)}
                     </td>
                   <% end %>
@@ -280,17 +278,15 @@
     <%!-- Left Column --%>
     <div class="space-y-6 min-w-0">
       <%!-- Site Details --%>
-      <div class="rounded-lg border border-cool-steel-200 bg-white dark:border-white/10 dark:bg-cool-steel-800/50">
+      <div class="rounded-lg border border-gray-200 bg-white dark:border-white/10 dark:bg-gray-800/50">
         <div class="p-4">
-          <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white flex items-center gap-1.5">
+          <h3 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center gap-1.5">
             {t("Site Details")}
           </h3>
           <dl class="mt-2 space-y-3">
             <%= if @site.parent_site do %>
               <div>
-                <dt class="text-sm font-medium text-cool-steel-600 dark:text-cool-steel-400">
-                  Parent Site
-                </dt>
+                <dt class="text-sm font-medium text-gray-600 dark:text-gray-400">Parent Site</dt>
                 <dd class="mt-0.5">
                   <.link
                     navigate={~p"/sites/#{@site.parent_site.id}"}
@@ -303,28 +299,20 @@
             <% end %>
             <%= if @site.location do %>
               <div>
-                <dt class="text-sm font-medium text-cool-steel-600 dark:text-cool-steel-400">
-                  Location
-                </dt>
-                <dd class="mt-0.5 text-sm text-cool-steel-900 dark:text-white">
-                  {@site.location}
-                </dd>
+                <dt class="text-sm font-medium text-gray-600 dark:text-gray-400">Location</dt>
+                <dd class="mt-0.5 text-sm text-gray-900 dark:text-white">{@site.location}</dd>
               </div>
             <% end %>
             <%= if @site.description do %>
               <div>
-                <dt class="text-sm font-medium text-cool-steel-600 dark:text-cool-steel-400">
-                  Description
-                </dt>
-                <dd class="mt-0.5 text-sm text-cool-steel-900 dark:text-white">
-                  {@site.description}
-                </dd>
+                <dt class="text-sm font-medium text-gray-600 dark:text-gray-400">Description</dt>
+                <dd class="mt-0.5 text-sm text-gray-900 dark:text-white">{@site.description}</dd>
               </div>
             <% end %>
           </dl>
           <%= if @site.child_sites != [] do %>
             <div class="mt-4 border-t border-cool-steel-300 dark:border-cool-steel-600 pt-3">
-              <h4 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+              <h4 class="text-sm font-semibold text-gray-900 dark:text-white">
                 {t("Child Sites")}
               </h4>
               <ul class="mt-2 space-y-1">
@@ -343,18 +331,18 @@
       </div>
 
       <%!-- Active Alerts Panel --%>
-      <div class="rounded-lg border border-cool-steel-200 bg-white dark:border-white/10 dark:bg-cool-steel-800/50">
+      <div class="rounded-lg border border-gray-200 bg-white dark:border-white/10 dark:bg-gray-800/50">
         <div class="p-4">
-          <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white flex items-center gap-1.5">
+          <h3 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center gap-1.5">
             <.icon name="hero-bell-alert" class="h-5 w-5" /> Active Alerts
             <%= if @active_alerts != [] do %>
-              <span class="ml-2 inline-flex items-center rounded-full bg-sweet-salmon-100 px-2 py-0.5 text-xs font-medium text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400">
+              <span class="ml-2 inline-flex items-center rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-800 dark:bg-red-900/30 dark:text-red-400">
                 {length(@active_alerts)}
               </span>
             <% end %>
           </h3>
           <%= if @active_alerts == [] do %>
-            <div class="mt-2 text-center py-6 text-cool-steel-500 dark:text-cool-steel-400">
+            <div class="mt-2 text-center py-6 text-gray-500 dark:text-gray-400">
               <.icon name="hero-check-circle" class="mx-auto h-8 w-8 text-green-500" />
               <p class="mt-2 text-sm">No active alerts</p>
             </div>
@@ -362,7 +350,7 @@
             <div class="mt-2 space-y-2">
               <div
                 :for={alert <- @active_alerts}
-                class="flex items-start gap-3 rounded-lg border border-cool-steel-200 dark:border-white/10 p-3"
+                class="flex items-start gap-3 rounded-lg border border-gray-200 dark:border-white/10 p-3"
               >
                 <.icon
                   name={insight_urgency_icon(alert_severity(alert.alert_type))}
@@ -372,10 +360,8 @@
                   ]}
                 />
                 <div class="min-w-0 flex-1">
-                  <p class="text-sm font-medium text-cool-steel-900 dark:text-white">
-                    {alert.message}
-                  </p>
-                  <p class="mt-0.5 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                  <p class="text-sm font-medium text-gray-900 dark:text-white">{alert.message}</p>
+                  <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
                     {time_ago(alert.triggered_at)}
                   </p>
                 </div>
@@ -386,26 +372,26 @@
       </div>
 
       <%!-- Recent Config Changes Panel — hidden, feature temporarily disabled --%>
-      <div class="hidden rounded-lg border border-cool-steel-200 bg-white dark:border-white/10 dark:bg-cool-steel-800/50">
+      <div class="hidden rounded-lg border border-gray-200 bg-white dark:border-white/10 dark:bg-gray-800/50">
         <div class="p-4">
-          <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white flex items-center gap-1.5">
+          <h3 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center gap-1.5">
             <.icon name="hero-document-text" class="h-5 w-5" /> Recent Config Changes
           </h3>
           <%= if @config_changes == [] do %>
-            <div class="mt-2 text-center py-6 text-cool-steel-500 dark:text-cool-steel-400">
+            <div class="mt-2 text-center py-6 text-gray-500 dark:text-gray-400">
               <p class="text-sm">No config changes in the last 30 days</p>
             </div>
           <% else %>
             <div class="mt-2 space-y-2">
               <div
                 :for={change <- @config_changes}
-                class="flex items-center justify-between rounded-lg border border-cool-steel-200 dark:border-white/10 p-3"
+                class="flex items-center justify-between rounded-lg border border-gray-200 dark:border-white/10 p-3"
               >
                 <div class="min-w-0 flex-1">
-                  <p class="text-sm font-medium text-cool-steel-900 dark:text-white truncate">
+                  <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
                     {change.device_name || "Unknown device"}
                   </p>
-                  <p class="mt-0.5 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                  <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
                     {time_ago(change.detected_at)}
                   </p>
                 </div>
@@ -425,10 +411,10 @@
     <%!-- Right Column --%>
     <div class="space-y-6 min-w-0">
       <%!-- Device Health Grid --%>
-      <div class="rounded-lg border border-cool-steel-200 bg-white dark:border-white/10 dark:bg-cool-steel-800/50">
+      <div class="rounded-lg border border-gray-200 bg-white dark:border-white/10 dark:bg-gray-800/50">
         <div class="p-4">
           <div class="flex items-center justify-between">
-            <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white flex items-center gap-1.5">
+            <h3 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center gap-1.5">
               <.icon name="hero-server" class="h-5 w-5" /> Device Health
             </h3>
             <.button
@@ -440,15 +426,15 @@
             </.button>
           </div>
           <%= if @device == [] do %>
-            <div class="mt-2 rounded-lg border-2 border-dashed border-cool-steel-300 dark:border-cool-steel-600 p-8 text-center">
+            <div class="mt-2 rounded-lg border-2 border-dashed border-gray-300 dark:border-gray-600 p-8 text-center">
               <.icon
                 name="hero-server"
-                class="mx-auto h-12 w-12 text-cool-steel-400 dark:text-cool-steel-500"
+                class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500"
               />
-              <h4 class="mt-4 text-base font-semibold text-cool-steel-900 dark:text-white">
+              <h4 class="mt-4 text-base font-semibold text-gray-900 dark:text-white">
                 {t("Add your first device")}
               </h4>
-              <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+              <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                 {t("Start monitoring by adding network devices to this site.")}
               </p>
               <div class="mt-4">
@@ -459,9 +445,9 @@
             </div>
           <% else %>
             <div class="mt-2 overflow-x-auto">
-              <table class="min-w-full divide-y divide-cool-steel-200 dark:divide-white/10">
+              <table class="min-w-full divide-y divide-gray-200 dark:divide-white/10">
                 <thead>
-                  <tr class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                  <tr class="text-xs text-gray-500 dark:text-gray-400">
                     <th class="px-3 py-2 text-left font-medium">{t("Device")}</th>
                     <th class="hidden sm:table-cell px-3 py-2 text-left font-medium">
                       {t("IP Address")}
@@ -477,10 +463,10 @@
                     <th class="px-3 py-2 text-right font-medium">{t("Latency")}</th>
                   </tr>
                 </thead>
-                <tbody class="divide-y divide-cool-steel-100 dark:divide-white/5">
+                <tbody class="divide-y divide-gray-100 dark:divide-white/5">
                   <tr
                     :for={eq <- @device}
-                    class="hover:bg-cool-steel-50 dark:hover:bg-cool-steel-800 transition-colors cursor-pointer"
+                    class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors cursor-pointer"
                     phx-click={JS.navigate(~p"/devices/#{eq.id}")}
                   >
                     <td class="px-3 py-2">
@@ -489,15 +475,15 @@
                           "h-2 w-2 shrink-0 rounded-full",
                           status_dot_class(eq.status)
                         ]} />
-                        <span class="text-sm font-medium text-cool-steel-900 dark:text-white truncate">
+                        <span class="text-sm font-medium text-gray-900 dark:text-white truncate">
                           {eq.name}
                         </span>
                       </div>
                     </td>
-                    <td class="hidden sm:table-cell px-3 py-2 font-mono text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                    <td class="hidden sm:table-cell px-3 py-2 font-mono text-xs text-gray-500 dark:text-gray-400">
                       {eq.ip_address}
                     </td>
-                    <td class="hidden sm:table-cell px-3 py-2 text-right font-mono text-xs text-cool-steel-700 dark:text-cool-steel-300">
+                    <td class="hidden sm:table-cell px-3 py-2 text-right font-mono text-xs text-gray-700 dark:text-gray-300">
                       <%= if di = @device_impact[eq.id] do %>
                         {if di.count > 0, do: di.count, else: "—"}
                       <% else %>
@@ -505,7 +491,7 @@
                       <% end %>
                     </td>
                     <%= if @can_view_financials do %>
-                      <td class="hidden md:table-cell px-3 py-2 text-right font-mono text-xs text-cool-steel-700 dark:text-cool-steel-300">
+                      <td class="hidden md:table-cell px-3 py-2 text-right font-mono text-xs text-gray-700 dark:text-gray-300">
                         <%= if di = @device_impact[eq.id] do %>
                           {if Decimal.gt?(di.mrr, 0), do: format_mrr(di.mrr), else: "—"}
                         <% else %>
@@ -516,10 +502,10 @@
                     <td class={[
                       "px-3 py-2 text-right font-mono text-xs",
                       case @response_times[eq.id] do
-                        nil -> "text-cool-steel-400"
+                        nil -> "text-gray-400"
                         ms when ms < 50 -> "text-green-600 dark:text-green-400"
-                        ms when ms < 200 -> "text-wheat-600 dark:text-wheat-400"
-                        _ -> "text-sweet-salmon-600 dark:text-sweet-salmon-400"
+                        ms when ms < 200 -> "text-yellow-600 dark:text-yellow-400"
+                        _ -> "text-red-600 dark:text-red-400"
                       end
                     ]}>
                       {format_response_time(@response_times[eq.id])}
@@ -534,26 +520,24 @@
 
       <%!-- Insights Panel --%>
       <%= if @insights != [] do %>
-        <div class="rounded-lg border border-cool-steel-200 bg-white dark:border-white/10 dark:bg-cool-steel-800/50">
+        <div class="rounded-lg border border-gray-200 bg-white dark:border-white/10 dark:bg-gray-800/50">
           <div class="p-4">
-            <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white flex items-center gap-1.5">
+            <h3 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center gap-1.5">
               <.icon name="hero-light-bulb" class="h-5 w-5" /> Preseem Insights
             </h3>
             <div class="mt-2 space-y-2">
               <div
                 :for={insight <- @insights}
-                class="flex items-start gap-3 rounded-lg border border-cool-steel-200 dark:border-white/10 p-3"
+                class="flex items-start gap-3 rounded-lg border border-gray-200 dark:border-white/10 p-3"
               >
                 <.icon
                   name={insight_urgency_icon(insight.urgency)}
                   class={["h-5 w-5 mt-0.5 shrink-0", insight_urgency_class(insight.urgency)]}
                 />
                 <div class="min-w-0 flex-1">
-                  <p class="text-sm font-medium text-cool-steel-900 dark:text-white">
-                    {insight.title}
-                  </p>
+                  <p class="text-sm font-medium text-gray-900 dark:text-white">{insight.title}</p>
                   <%= if insight.description do %>
-                    <p class="mt-0.5 text-xs text-cool-steel-500 dark:text-cool-steel-400 line-clamp-2">
+                    <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400 line-clamp-2">
                       {insight.description}
                     </p>
                   <% end %>
@@ -569,9 +553,9 @@
   <%!-- Latency Chart --%>
   <%= if @latency_chart_data do %>
     <div class="mt-6">
-      <div class="rounded-lg border border-cool-steel-200 bg-white dark:border-white/10 dark:bg-cool-steel-800/50">
-        <div class="px-4 py-3 border-b border-cool-steel-200 dark:border-white/10">
-          <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white flex items-center gap-1.5">
+      <div class="rounded-lg border border-gray-200 bg-white dark:border-white/10 dark:bg-gray-800/50">
+        <div class="px-4 py-3 border-b border-gray-200 dark:border-white/10">
+          <h3 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center gap-1.5">
             <.icon name="hero-chart-bar" class="h-4 w-4" /> {t("Site Latency — Last 24 Hours")}
           </h3>
         </div>
@@ -588,9 +572,9 @@
           >
             <div class="absolute inset-0 flex items-center justify-center" data-loading>
               <div class="flex flex-col items-center gap-2">
-                <div class="h-8 w-8 animate-spin rounded-full border-2 border-cool-steel-200 dark:border-cool-steel-700 border-t-cerulean-500">
+                <div class="h-8 w-8 animate-spin rounded-full border-2 border-gray-200 dark:border-gray-700 border-t-blue-500">
                 </div>
-                <span class="text-xs text-cool-steel-400">{t("Loading chart...")}</span>
+                <span class="text-xs text-gray-400">{t("Loading chart...")}</span>
               </div>
             </div>
             <canvas></canvas>
diff --git a/lib/towerops_web/live/status_page_live.ex b/lib/towerops_web/live/status_page_live.ex
index 5b34ac00..988fed7c 100644
--- a/lib/towerops_web/live/status_page_live.ex
+++ b/lib/towerops_web/live/status_page_live.ex
@@ -105,11 +105,11 @@ defmodule ToweropsWeb.StatusPageLive do
 
   @doc false
   def overall_color(:operational), do: "bg-green-500"
-  def overall_color(:degraded), do: "bg-wheat-500"
+  def overall_color(:degraded), do: "bg-yellow-500"
   def overall_color(:partial_outage), do: "bg-orange-500"
-  def overall_color(:major_outage), do: "bg-sweet-salmon-500"
-  def overall_color(:maintenance), do: "bg-cerulean-500"
-  def overall_color(_), do: "bg-cool-steel-500"
+  def overall_color(:major_outage), do: "bg-red-500"
+  def overall_color(:maintenance), do: "bg-blue-500"
+  def overall_color(_), do: "bg-gray-500"
 
   @doc false
   def overall_text(:operational), do: "All Systems Operational"
@@ -121,11 +121,11 @@ defmodule ToweropsWeb.StatusPageLive do
 
   @doc false
   def component_color("operational"), do: "bg-green-500"
-  def component_color("degraded"), do: "bg-wheat-500"
+  def component_color("degraded"), do: "bg-yellow-500"
   def component_color("partial_outage"), do: "bg-orange-500"
-  def component_color("major_outage"), do: "bg-sweet-salmon-500"
-  def component_color("maintenance"), do: "bg-cerulean-500"
-  def component_color(_), do: "bg-cool-steel-400"
+  def component_color("major_outage"), do: "bg-red-500"
+  def component_color("maintenance"), do: "bg-blue-500"
+  def component_color(_), do: "bg-gray-400"
 
   @doc false
   def component_label("operational"), do: "Operational"
@@ -136,9 +136,9 @@ defmodule ToweropsWeb.StatusPageLive do
   def component_label(s), do: s
 
   @doc false
-  def severity_color("critical"), do: "text-sweet-salmon-600"
+  def severity_color("critical"), do: "text-red-600"
   def severity_color("major"), do: "text-orange-600"
-  def severity_color(_), do: "text-wheat-600"
+  def severity_color(_), do: "text-yellow-600"
 
   @doc false
   def incident_status_label("investigating"), do: "Investigating"
diff --git a/lib/towerops_web/live/status_page_live.html.heex b/lib/towerops_web/live/status_page_live.html.heex
index d82e692b..e52c5330 100644
--- a/lib/towerops_web/live/status_page_live.html.heex
+++ b/lib/towerops_web/live/status_page_live.html.heex
@@ -5,10 +5,10 @@
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <title>Status Page Not Found</title>
     </head>
-    <body class="bg-cool-steel-50 flex items-center justify-center min-h-screen">
+    <body class="bg-gray-50 flex items-center justify-center min-h-screen">
       <div class="text-center">
-        <h1 class="text-2xl font-bold text-cool-steel-900">Status Page Not Found</h1>
-        <p class="mt-2 text-cool-steel-600">
+        <h1 class="text-2xl font-bold text-gray-900">Status Page Not Found</h1>
+        <p class="mt-2 text-gray-600">
           The requested status page does not exist or is not enabled.
         </p>
       </div>
@@ -29,14 +29,14 @@
         </style>
       <% end %>
     </head>
-    <body class="bg-cool-steel-50 dark:bg-cool-steel-950 min-h-screen">
+    <body class="bg-gray-50 dark:bg-gray-950 min-h-screen">
       <div class="max-w-3xl mx-auto px-4 py-8">
         <%!-- Header --%>
         <header class="text-center mb-8">
           <%= if @config.logo_url do %>
             <img src={@config.logo_url} alt={@config.company_name} class="h-10 mx-auto mb-4" />
           <% end %>
-          <h1 class="text-2xl font-bold text-cool-steel-900 dark:text-white">
+          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
             {@config.company_name || "System Status"}
           </h1>
         </header>
@@ -52,28 +52,28 @@
         <%!-- Active Incidents --%>
         <%= if @active_incidents != [] do %>
           <div class="mb-8">
-            <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-4">
+            <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
               Active Incidents
             </h2>
             <div class="space-y-4">
               <%= for incident <- @active_incidents do %>
-                <div class="bg-white dark:bg-cool-steel-800 rounded-lg border border-cool-steel-200 dark:border-cool-steel-700 p-4">
+                <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
                   <div class="flex items-start justify-between">
                     <div>
                       <h3 class={"font-semibold #{severity_color(incident.severity)}"}>
                         {incident.title}
                       </h3>
                       <%= if incident.body do %>
-                        <p class="mt-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
                           {incident.body}
                         </p>
                       <% end %>
                     </div>
-                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-wheat-100 text-wheat-800 dark:bg-wheat-900/50 dark:text-wheat-300">
+                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-300">
                       {incident_status_label(incident.status)}
                     </span>
                   </div>
-                  <p class="mt-2 text-xs text-cool-steel-500">
+                  <p class="mt-2 text-xs text-gray-500">
                     Started: {Calendar.strftime(incident.started_at, "%b %d, %H:%M UTC")}
                   </p>
                 </div>
@@ -84,23 +84,21 @@
 
         <%!-- Components --%>
         <div class="mb-8">
-          <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-4">
-            Components
-          </h2>
-          <div class="bg-white dark:bg-cool-steel-800 rounded-lg border border-cool-steel-200 dark:border-cool-steel-700 divide-y divide-cool-steel-200 dark:divide-cool-steel-700">
+          <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Components</h2>
+          <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700">
             <%= if @components == [] do %>
-              <div class="p-4 text-center text-cool-steel-500 dark:text-cool-steel-400">
+              <div class="p-4 text-center text-gray-500 dark:text-gray-400">
                 No components configured
               </div>
             <% else %>
               <%= for component <- @components do %>
                 <div class="px-4 py-3 flex items-center justify-between">
                   <div>
-                    <span class="font-medium text-cool-steel-900 dark:text-white">
+                    <span class="font-medium text-gray-900 dark:text-white">
                       {component.name}
                     </span>
                     <%= if component.description do %>
-                      <p class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                      <p class="text-xs text-gray-500 dark:text-gray-400">
                         {component.description}
                       </p>
                     <% end %>
@@ -108,7 +106,7 @@
                   <div class="flex items-center gap-2">
                     <div class={"w-2.5 h-2.5 rounded-full #{component_color(component.status)}"}>
                     </div>
-                    <span class="text-sm text-cool-steel-600 dark:text-cool-steel-400">
+                    <span class="text-sm text-gray-600 dark:text-gray-400">
                       {component_label(component.status)}
                     </span>
                   </div>
@@ -120,26 +118,26 @@
 
         <%!-- Recent Incidents --%>
         <div class="mb-8">
-          <h2 class="text-lg font-semibold text-cool-steel-900 dark:text-white mb-4">
+          <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
             Recent Incidents
           </h2>
           <%= if @recent_incidents == [] do %>
-            <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400 bg-white dark:bg-cool-steel-800 rounded-lg border border-cool-steel-200 dark:border-cool-steel-700 p-4 text-center">
+            <p class="text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 text-center">
               No recent incidents — looking good!
             </p>
           <% else %>
             <div class="space-y-3">
               <%= for incident <- @recent_incidents do %>
-                <div class="bg-white dark:bg-cool-steel-800 rounded-lg border border-cool-steel-200 dark:border-cool-steel-700 p-4">
+                <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
                   <div class="flex items-center justify-between">
-                    <h3 class="text-sm font-medium text-cool-steel-900 dark:text-white">
+                    <h3 class="text-sm font-medium text-gray-900 dark:text-white">
                       {incident.title}
                     </h3>
-                    <span class={"text-xs px-2 py-0.5 rounded font-medium " <> if(incident.status == "resolved", do: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300", else: "bg-wheat-100 text-wheat-700 dark:bg-wheat-900/50 dark:text-wheat-300")}>
+                    <span class={"text-xs px-2 py-0.5 rounded font-medium " <> if(incident.status == "resolved", do: "bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300", else: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-300")}>
                       {incident_status_label(incident.status)}
                     </span>
                   </div>
-                  <p class="mt-1 text-xs text-cool-steel-500">
+                  <p class="mt-1 text-xs text-gray-500">
                     {Calendar.strftime(incident.started_at, "%b %d, %Y")}
                     <%= if incident.resolved_at do %>
                       — Resolved {Calendar.strftime(incident.resolved_at, "%b %d, %H:%M UTC")}
@@ -152,13 +150,13 @@
         </div>
 
         <%!-- Footer --%>
-        <footer class="text-center text-xs text-cool-steel-400 dark:text-cool-steel-600 mt-12">
+        <footer class="text-center text-xs text-gray-400 dark:text-gray-600 mt-12">
           <%= if @config.support_email do %>
             <p>
               Need help? Contact
               <a
                 href={"mailto:#{@config.support_email}"}
-                class="underline hover:text-cool-steel-600 dark:hover:text-cool-steel-400"
+                class="underline hover:text-gray-600 dark:hover:text-gray-400"
               >
                 {@config.support_email}
               </a>
diff --git a/lib/towerops_web/live/trace_live/index.ex b/lib/towerops_web/live/trace_live/index.ex
index 5527bee3..9a156383 100644
--- a/lib/towerops_web/live/trace_live/index.ex
+++ b/lib/towerops_web/live/trace_live/index.ex
@@ -54,8 +54,8 @@ defmodule ToweropsWeb.TraceLive.Index do
     color =
       case assigns.quality do
         :good -> "border-green-200 dark:border-green-800"
-        :warning -> "border-wheat-200 dark:border-wheat-800"
-        :bad -> "border-sweet-salmon-200 dark:border-sweet-salmon-800"
+        :warning -> "border-yellow-200 dark:border-yellow-800"
+        :bad -> "border-red-200 dark:border-red-800"
         _ -> "border-cool-steel-200 dark:border-cool-steel-700"
       end
 
@@ -140,12 +140,9 @@ defmodule ToweropsWeb.TraceLive.Index do
     do: "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"
 
   def type_badge_class(:inventory_item), do: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400"
-  def type_badge_class(:site), do: "bg-wheat-100 text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400"
+  def type_badge_class(:site), do: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"
   def type_badge_class(:device), do: "bg-cyan-100 text-cyan-800 dark:bg-cyan-900/30 dark:text-cyan-400"
-
-  def type_badge_class(:access_point),
-    do: "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-400"
-
+  def type_badge_class(:access_point), do: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
   def type_badge_class(_), do: "text-cool-steel-700 dark:text-cool-steel-300"
 
   def type_badge_label(:account), do: "Account"
@@ -157,7 +154,7 @@ defmodule ToweropsWeb.TraceLive.Index do
 
   @doc false
   def status_badge_class("active"), do: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400"
-  def status_badge_class("suspended"), do: "bg-wheat-100 text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400"
+  def status_badge_class("suspended"), do: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400"
 
   def status_badge_class("cancelled"),
     do: "bg-sweet-salmon-100 text-sweet-salmon-800 dark:bg-sweet-salmon-900/30 dark:text-sweet-salmon-400"
@@ -166,8 +163,8 @@ defmodule ToweropsWeb.TraceLive.Index do
 
   @doc false
   def device_status_color(:up), do: "text-green-600 dark:text-green-400"
-  def device_status_color(:down), do: "text-sweet-salmon-600 dark:text-sweet-salmon-400"
-  def device_status_color(_), do: "text-cool-steel-500 dark:text-cool-steel-400"
+  def device_status_color(:down), do: "text-red-600 dark:text-red-400"
+  def device_status_color(_), do: "text-gray-500 dark:text-gray-400"
 
   @doc false
   def format_speed(nil), do: "—"
@@ -221,45 +218,45 @@ defmodule ToweropsWeb.TraceLive.Index do
   def score_quality(_), do: :bad
 
   @doc false
-  def score_color(nil), do: "text-cool-steel-400"
+  def score_color(nil), do: "text-gray-400"
   def score_color(s) when s >= 80, do: "text-green-600 dark:text-green-400"
-  def score_color(s) when s >= 50, do: "text-wheat-600 dark:text-wheat-400"
-  def score_color(_), do: "text-sweet-salmon-600 dark:text-sweet-salmon-400"
+  def score_color(s) when s >= 50, do: "text-yellow-600 dark:text-yellow-400"
+  def score_color(_), do: "text-red-600 dark:text-red-400"
 
   @doc false
-  def latency_color(nil), do: "text-cool-steel-400"
+  def latency_color(nil), do: "text-gray-400"
   def latency_color(v) when v <= 30, do: "text-green-600 dark:text-green-400"
-  def latency_color(v) when v <= 80, do: "text-wheat-600 dark:text-wheat-400"
-  def latency_color(_), do: "text-sweet-salmon-600 dark:text-sweet-salmon-400"
+  def latency_color(v) when v <= 80, do: "text-yellow-600 dark:text-yellow-400"
+  def latency_color(_), do: "text-red-600 dark:text-red-400"
 
   @doc false
-  def jitter_color(nil), do: "text-cool-steel-400"
+  def jitter_color(nil), do: "text-gray-400"
   def jitter_color(v) when v <= 10, do: "text-green-600 dark:text-green-400"
-  def jitter_color(v) when v <= 30, do: "text-wheat-600 dark:text-wheat-400"
-  def jitter_color(_), do: "text-sweet-salmon-600 dark:text-sweet-salmon-400"
+  def jitter_color(v) when v <= 30, do: "text-yellow-600 dark:text-yellow-400"
+  def jitter_color(_), do: "text-red-600 dark:text-red-400"
 
   @doc false
-  def loss_color(nil), do: "text-cool-steel-400"
+  def loss_color(nil), do: "text-gray-400"
   def loss_color(v) when v <= 1, do: "text-green-600 dark:text-green-400"
-  def loss_color(v) when v <= 5, do: "text-wheat-600 dark:text-wheat-400"
-  def loss_color(_), do: "text-sweet-salmon-600 dark:text-sweet-salmon-400"
+  def loss_color(v) when v <= 5, do: "text-yellow-600 dark:text-yellow-400"
+  def loss_color(_), do: "text-red-600 dark:text-red-400"
 
   @doc false
   def device_status_dot(:up), do: "bg-green-500"
-  def device_status_dot(:down), do: "bg-sweet-salmon-500"
-  def device_status_dot(_), do: "bg-cool-steel-400"
+  def device_status_dot(:down), do: "bg-red-500"
+  def device_status_dot(_), do: "bg-gray-400"
 
   @doc false
-  def alert_dot(%{severity: "critical"}), do: "bg-sweet-salmon-500"
-  def alert_dot(%{severity: "warning"}), do: "bg-wheat-500"
-  def alert_dot(%{alert_type: "down"}), do: "bg-sweet-salmon-500"
+  def alert_dot(%{severity: "critical"}), do: "bg-red-500"
+  def alert_dot(%{severity: "warning"}), do: "bg-yellow-500"
+  def alert_dot(%{alert_type: "down"}), do: "bg-red-500"
   def alert_dot(_), do: "bg-orange-400"
 
   @doc false
-  def urgency_dot("critical"), do: "bg-sweet-salmon-500"
+  def urgency_dot("critical"), do: "bg-red-500"
   def urgency_dot("high"), do: "bg-orange-500"
-  def urgency_dot("medium"), do: "bg-wheat-500"
-  def urgency_dot(_), do: "bg-cerulean-400"
+  def urgency_dot("medium"), do: "bg-yellow-500"
+  def urgency_dot(_), do: "bg-blue-400"
 
   @doc false
   def airtime_quality(nil), do: :unknown
diff --git a/lib/towerops_web/live/trace_live/index.html.heex b/lib/towerops_web/live/trace_live/index.html.heex
index 3b2f30a7..d005161f 100644
--- a/lib/towerops_web/live/trace_live/index.html.heex
+++ b/lib/towerops_web/live/trace_live/index.html.heex
@@ -13,18 +13,18 @@
       end
   } />
   <div class="mb-1">
-    <h1 class="text-xl font-bold text-cool-steel-900 dark:text-white">{t("Trace")}</h1>
-    <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+    <h1 class="text-xl font-bold text-gray-900 dark:text-white">{t("Trace")}</h1>
+    <p class="text-sm text-gray-500 dark:text-gray-400">
       {t("Investigate subscriber impact, site health, and network path issues.")}
     </p>
   </div>
 
   <div class="space-y-6">
     <%!-- Search Bar --%>
-    <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-cool-steel-900">
+    <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900">
       <div class="p-4 sm:p-6">
         <div class="flex items-center gap-3">
-          <.icon name="hero-magnifying-glass" class="h-6 w-6 text-cool-steel-400 flex-shrink-0" />
+          <.icon name="hero-magnifying-glass" class="h-6 w-6 text-gray-400 flex-shrink-0" />
           <form phx-change="search" phx-submit="search" class="flex-1 flex gap-2">
             <input
               type="text"
@@ -35,7 +35,7 @@
                   "Search by customer name, IP address, account ID, serial number, site name, or device name..."
                 )
               }
-              class="w-full rounded-field border border-cool-steel-300 bg-cool-steel-50 px-3 py-2 text-sm text-cool-steel-900 placeholder:text-cool-steel-400 focus:border-cerulean-500 focus:ring-1 focus:ring-cerulean-500 dark:border-cool-steel-600 dark:bg-cool-steel-900 dark:text-cool-steel-100 dark:placeholder:text-cool-steel-500 w-full dark:bg-cool-steel-800 dark:border-white/10 dark:text-white"
+              class="w-full rounded-field border border-cool-steel-300 bg-cool-steel-50 px-3 py-2 text-sm text-cool-steel-900 placeholder:text-cool-steel-400 focus:border-cerulean-500 focus:ring-1 focus:ring-cerulean-500 dark:border-cool-steel-600 dark:bg-cool-steel-900 dark:text-cool-steel-100 dark:placeholder:text-cool-steel-500 w-full dark:bg-gray-800 dark:border-white/10 dark:text-white"
               phx-debounce="300"
               autofocus
             />
@@ -54,7 +54,7 @@
     <%!-- Search Results --%>
     <div
       :if={@results != [] && !@trace}
-      class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-cool-steel-900"
+      class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900"
     >
       <div class="p-0">
         <div class="divide-y divide-cool-steel-200 dark:divide-cool-steel-700 dark:divide-white/10">
@@ -72,17 +72,12 @@
               {type_badge_label(result.type)}
             </span>
             <div class="flex-1 min-w-0">
-              <div class="font-medium text-cool-steel-900 dark:text-white truncate">
-                {result.label}
-              </div>
-              <div
-                :if={result.sublabel}
-                class="text-sm text-cool-steel-500 dark:text-cool-steel-400 truncate"
-              >
+              <div class="font-medium text-gray-900 dark:text-white truncate">{result.label}</div>
+              <div :if={result.sublabel} class="text-sm text-gray-500 dark:text-gray-400 truncate">
                 {result.sublabel}
               </div>
             </div>
-            <.icon name="hero-chevron-right" class="h-4 w-4 text-cool-steel-400 flex-shrink-0" />
+            <.icon name="hero-chevron-right" class="h-4 w-4 text-gray-400 flex-shrink-0" />
           </button>
         </div>
       </div>
@@ -91,7 +86,7 @@
     <%!-- No Results --%>
     <div
       :if={@query != "" && @results == [] && !@trace}
-      class="text-center py-12 text-cool-steel-500 dark:text-cool-steel-400"
+      class="text-center py-12 text-gray-500 dark:text-gray-400"
     >
       <.icon name="hero-magnifying-glass" class="h-12 w-12 mx-auto mb-3 opacity-50" />
       <p class="text-lg font-medium">No results found</p>
@@ -103,29 +98,23 @@
     <%!-- Site Trace View --%>
     <div :if={@trace && @trace_type == :site} class="space-y-4">
       <%!-- Site Info --%>
-      <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-cool-steel-900">
+      <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900">
         <div class="p-4 sm:p-6">
-          <h3 class="text-lg font-semibold text-cool-steel-900 dark:text-white flex items-center gap-2">
-            <.icon name="hero-building-office-2" class="h-5 w-5 text-cool-steel-400" />
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
+            <.icon name="hero-building-office-2" class="h-5 w-5 text-gray-400" />
             {@trace.site.name}
           </h3>
-          <div class="mt-2 space-y-1 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+          <div class="mt-2 space-y-1 text-sm text-gray-600 dark:text-gray-400">
             <p :if={@trace.site.location}>
-              <span class="font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                Location:
-              </span>
+              <span class="font-medium text-gray-500 dark:text-gray-400">Location:</span>
               {@trace.site.location}
             </p>
             <p :if={@trace.site.address}>
-              <span class="font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                Address:
-              </span>
+              <span class="font-medium text-gray-500 dark:text-gray-400">Address:</span>
               {@trace.site.address}
             </p>
             <p>
-              <span class="font-medium text-cool-steel-500 dark:text-cool-steel-400">
-                Devices:
-              </span>
+              <span class="font-medium text-gray-500 dark:text-gray-400">Devices:</span>
               {length(@trace.devices)}
             </p>
           </div>
@@ -134,16 +123,16 @@
       <%!-- Devices at Site --%>
       <div
         :if={length(@trace.devices) > 0}
-        class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-cool-steel-900"
+        class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900"
       >
         <div class="p-4 sm:p-6">
-          <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-3">
+          <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">
             {t("Devices")}
           </h3>
           <div class="overflow-x-auto">
             <table class="min-w-full text-sm">
               <thead>
-                <tr class="text-xs text-cool-steel-500 dark:text-cool-steel-400 uppercase">
+                <tr class="text-xs text-gray-500 dark:text-gray-400 uppercase">
                   <th>{t("Name")}</th>
                   <th>{t("IP Address")}</th>
                   <th>{t("Status")}</th>
@@ -157,7 +146,7 @@
                   <td>
                     <.link
                       navigate={~p"/devices/#{device.id}"}
-                      class="font-medium text-cerulean-600 dark:text-cerulean-400 hover:underline"
+                      class="font-medium text-blue-600 dark:text-blue-400 hover:underline"
                     >
                       {device.name || device.ip_address}
                     </.link>
@@ -181,10 +170,10 @@
       <%!-- Recent Alerts --%>
       <div
         :if={@trace.alerts != []}
-        class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-cool-steel-900"
+        class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900"
       >
         <div class="p-4 sm:p-6">
-          <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white mb-3">
+          <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">
             {t("Recent Alerts")}
           </h3>
           <div class="space-y-2">
@@ -196,13 +185,10 @@
               </span>
               <div class="flex-1 min-w-0">
                 <div class="flex items-center gap-2">
-                  <span class="text-sm font-medium text-cool-steel-900 dark:text-white">
+                  <span class="text-sm font-medium text-gray-900 dark:text-white">
                     {format_alert_type(alert.alert_type)}
                   </span>
-                  <span
-                    :if={alert.device}
-                    class="text-xs text-cool-steel-500 dark:text-cool-steel-400"
-                  >
+                  <span :if={alert.device} class="text-xs text-gray-500 dark:text-gray-400">
                     {alert.device.name}
                   </span>
                   <span
@@ -212,10 +198,10 @@
                     {t("Resolved")}
                   </span>
                 </div>
-                <p class="text-sm text-cool-steel-600 dark:text-cool-steel-400 truncate">
+                <p class="text-sm text-gray-600 dark:text-gray-400 truncate">
                   {alert.message}
                 </p>
-                <span class="text-xs text-cool-steel-400 dark:text-cool-steel-500">
+                <span class="text-xs text-gray-400 dark:text-gray-500">
                   {format_relative_time(alert.triggered_at)}
                 </span>
               </div>
@@ -233,20 +219,17 @@
       <%!-- Subscriber + Connection --%>
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <%!-- Subscriber Info --%>
-        <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-cool-steel-900">
+        <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900">
           <div class="p-4 sm:p-6">
-            <h3 class="font-semibold text-sm uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 mb-3">
+            <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
               <.icon name="hero-user" class="h-4 w-4 inline" /> Subscriber
             </h3>
             <%= if @trace.subscriber do %>
               <div class="space-y-2">
-                <div class="text-xl font-bold text-cool-steel-900 dark:text-white">
+                <div class="text-xl font-bold text-gray-900 dark:text-white">
                   {@trace.subscriber.name}
                 </div>
-                <div
-                  :if={@trace.subscriber.plan}
-                  class="text-sm text-cool-steel-600 dark:text-cool-steel-300"
-                >
+                <div :if={@trace.subscriber.plan} class="text-sm text-gray-600 dark:text-gray-300">
                   {String.capitalize(@trace.subscriber.plan)}
                   <%!-- Financial data: role-gated --%>
                   <%= if @can_view_financials do %>
@@ -260,24 +243,24 @@
                 </div>
                 <div
                   :if={@trace.subscriber.speed_download}
-                  class="text-sm text-cool-steel-500 dark:text-cool-steel-400"
+                  class="text-sm text-gray-500 dark:text-gray-400"
                 >
                   ↓ {format_speed(@trace.subscriber.speed_download)} / ↑ {format_speed(
                     @trace.subscriber.speed_upload
                   )}
                 </div>
-                <div class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                <div class="text-sm text-gray-500 dark:text-gray-400">
                   Account #: {@trace.subscriber.account_id}
                 </div>
                 <div
                   :if={@trace.subscriber.address}
-                  class="text-sm text-cool-steel-500 dark:text-cool-steel-400"
+                  class="text-sm text-gray-500 dark:text-gray-400"
                 >
                   <.icon name="hero-map-pin" class="h-3.5 w-3.5 inline" /> {@trace.subscriber.address}
                 </div>
                 <div
                   :if={@trace.subscriber.customer_since}
-                  class="text-sm text-cool-steel-500 dark:text-cool-steel-400"
+                  class="text-sm text-gray-500 dark:text-gray-400"
                 >
                   Customer since: {Calendar.strftime(@trace.subscriber.customer_since, "%b %Y")}
                 </div>
@@ -292,7 +275,7 @@
                   <%= if @can_view_financials do %>
                     <span
                       :if={@trace.subscriber.mrr}
-                      class="text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300"
+                      class="text-sm font-medium text-gray-700 dark:text-gray-300"
                     >
                       MRR: ${if(is_struct(@trace.subscriber.mrr, Decimal),
                         do: Decimal.round(@trace.subscriber.mrr, 2),
@@ -303,7 +286,7 @@
                 </div>
               </div>
             <% else %>
-              <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400 italic">
+              <p class="text-sm text-gray-500 dark:text-gray-400 italic">
                 {t("No subscriber info available")}
               </p>
             <% end %>
@@ -311,36 +294,31 @@
         </div>
 
         <%!-- Connection / Device Info --%>
-        <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-cool-steel-900">
+        <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900">
           <div class="p-4 sm:p-6">
-            <h3 class="font-semibold text-sm uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 mb-3">
+            <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
               <.icon name="hero-signal" class="h-4 w-4 inline" /> Connection
             </h3>
             <%= if @trace.device do %>
               <div class="space-y-2">
-                <div class="text-xl font-bold text-cool-steel-900 dark:text-white">
+                <div class="text-xl font-bold text-gray-900 dark:text-white">
                   <.link
                     navigate={~p"/devices/#{@trace.device.id}"}
-                    class="hover:text-cerulean-600 dark:hover:text-cerulean-400"
+                    class="hover:text-blue-600 dark:hover:text-blue-400"
                   >
                     {@trace.device.name || @trace.device.ip_address}
                   </.link>
                 </div>
-                <div
-                  :if={@trace.device.site}
-                  class="text-sm text-cool-steel-600 dark:text-cool-steel-300"
-                >
+                <div :if={@trace.device.site} class="text-sm text-gray-600 dark:text-gray-300">
                   <.link
                     navigate={~p"/sites/#{@trace.device.site.id}"}
-                    class="hover:text-cerulean-600"
+                    class="hover:text-blue-600"
                   >
                     {@trace.device.site.name}
                   </.link>
                 </div>
                 <div class="flex items-center gap-2">
-                  <span class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
-                    Status:
-                  </span>
+                  <span class="text-sm text-gray-500 dark:text-gray-400">Status:</span>
                   <span class={[
                     "inline-flex items-center gap-1 text-sm font-medium",
                     device_status_color(@trace.device.status)
@@ -353,12 +331,12 @@
                     {String.capitalize(to_string(@trace.device.status))}
                   </span>
                 </div>
-                <div class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                <div class="text-sm text-gray-500 dark:text-gray-400">
                   IP: {@trace.device.ip_address}
                 </div>
                 <div
                   :if={@trace.device.last_checked_at}
-                  class="text-sm text-cool-steel-500 dark:text-cool-steel-400"
+                  class="text-sm text-gray-500 dark:text-gray-400"
                 >
                   Last checked: {format_relative_time(@trace.device.last_checked_at)}
                 </div>
@@ -366,24 +344,22 @@
                   :if={@trace.access_point}
                   class="mt-2 pt-2 border-t border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10"
                 >
-                  <div class="text-xs font-semibold uppercase tracking-wider text-cool-steel-400 mb-1">
+                  <div class="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-1">
                     {t("Preseem AP")}
                   </div>
-                  <div class="text-sm text-cool-steel-700 dark:text-cool-steel-300">
+                  <div class="text-sm text-gray-700 dark:text-gray-300">
                     {@trace.access_point.name}
                   </div>
                   <div
                     :if={@trace.access_point.model}
-                    class="text-xs text-cool-steel-500 dark:text-cool-steel-400"
+                    class="text-xs text-gray-500 dark:text-gray-400"
                   >
                     {@trace.access_point.model}
                   </div>
                 </div>
               </div>
             <% else %>
-              <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400 italic">
-                No device linked
-              </p>
+              <p class="text-sm text-gray-500 dark:text-gray-400 italic">No device linked</p>
             <% end %>
           </div>
         </div>
@@ -392,9 +368,9 @@
       <%!-- QoE Metrics + Peer Impact --%>
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <%!-- QoE Metrics --%>
-        <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-cool-steel-900">
+        <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900">
           <div class="p-4 sm:p-6">
-            <h3 class="font-semibold text-sm uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 mb-3">
+            <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
               <.icon name="hero-chart-bar" class="h-4 w-4 inline" /> QoE Metrics
               <span class="text-xs font-normal normal-case">(from Preseem)</span>
             </h3>
@@ -423,12 +399,12 @@
               </div>
               <%= if @trace.qoe_metrics.latest_metric do %>
                 <div class="mt-4 pt-3 border-t border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10">
-                  <div class="text-xs font-semibold uppercase tracking-wider text-cool-steel-400 mb-2">
+                  <div class="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-2">
                     {t("Latest Metrics")}
                   </div>
                   <div class="grid grid-cols-2 gap-2 text-sm">
                     <div class="flex justify-between">
-                      <span class="text-cool-steel-500 dark:text-cool-steel-400">Latency</span>
+                      <span class="text-gray-500 dark:text-gray-400">Latency</span>
                       <span class={[
                         "font-medium",
                         latency_color(@trace.qoe_metrics.latest_metric.avg_latency)
@@ -437,7 +413,7 @@
                       </span>
                     </div>
                     <div class="flex justify-between">
-                      <span class="text-cool-steel-500 dark:text-cool-steel-400">Jitter</span>
+                      <span class="text-gray-500 dark:text-gray-400">Jitter</span>
                       <span class={[
                         "font-medium",
                         jitter_color(@trace.qoe_metrics.latest_metric.avg_jitter)
@@ -446,7 +422,7 @@
                       </span>
                     </div>
                     <div class="flex justify-between">
-                      <span class="text-cool-steel-500 dark:text-cool-steel-400">Loss</span>
+                      <span class="text-gray-500 dark:text-gray-400">Loss</span>
                       <span class={[
                         "font-medium",
                         loss_color(@trace.qoe_metrics.latest_metric.avg_loss)
@@ -455,8 +431,8 @@
                       </span>
                     </div>
                     <div class="flex justify-between">
-                      <span class="text-cool-steel-500 dark:text-cool-steel-400">Throughput</span>
-                      <span class="font-medium text-cool-steel-900 dark:text-white">
+                      <span class="text-gray-500 dark:text-gray-400">Throughput</span>
+                      <span class="font-medium text-gray-900 dark:text-white">
                         {format_throughput(@trace.qoe_metrics.latest_metric.avg_throughput)}
                       </span>
                     </div>
@@ -464,7 +440,7 @@
                 </div>
               <% end %>
             <% else %>
-              <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400 italic">
+              <p class="text-sm text-gray-500 dark:text-gray-400 italic">
                 {t("No Preseem data available")}
               </p>
             <% end %>
@@ -472,37 +448,37 @@
         </div>
 
         <%!-- Peer Impact --%>
-        <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-cool-steel-900">
+        <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900">
           <div class="p-4 sm:p-6">
-            <h3 class="font-semibold text-sm uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 mb-3">
+            <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
               <.icon name="hero-users" class="h-4 w-4 inline" /> Peer Impact
             </h3>
             <%= if @trace.peer_impact do %>
               <div class="space-y-3">
                 <div class="flex items-center justify-between">
-                  <span class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="text-sm text-gray-500 dark:text-gray-400">
                     {t("Subscribers on this AP")}
                   </span>
-                  <span class="text-2xl font-bold text-cool-steel-900 dark:text-white">
+                  <span class="text-2xl font-bold text-gray-900 dark:text-white">
                     {@trace.peer_impact.subscriber_count}
                   </span>
                 </div>
                 <div class="flex items-center justify-between">
-                  <span class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="text-sm text-gray-500 dark:text-gray-400">
                     {t("Other APs on device")}
                   </span>
-                  <span class="text-lg font-semibold text-cool-steel-700 dark:text-cool-steel-300">
+                  <span class="text-lg font-semibold text-gray-700 dark:text-gray-300">
                     {@trace.peer_impact.peer_ap_count}
                   </span>
                 </div>
                 <div class="flex items-center justify-between">
-                  <span class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                  <span class="text-sm text-gray-500 dark:text-gray-400">
                     {t("Active alerts on device")}
                   </span>
                   <span class={[
                     "text-lg font-semibold",
                     if(@trace.peer_impact.active_alert_count > 0,
-                      do: "text-sweet-salmon-600",
+                      do: "text-red-600",
                       else: "text-green-600"
                     )
                   ]}>
@@ -513,7 +489,7 @@
                   :if={@trace.peer_impact.peer_aps != []}
                   class="mt-3 pt-3 border-t border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10"
                 >
-                  <div class="text-xs font-semibold uppercase tracking-wider text-cool-steel-400 mb-2">
+                  <div class="text-xs font-semibold uppercase tracking-wider text-gray-400 mb-2">
                     {t("Peer APs")}
                   </div>
                   <div class="space-y-1">
@@ -521,11 +497,9 @@
                       :for={ap <- @trace.peer_impact.peer_aps}
                       class="flex items-center justify-between text-sm"
                     >
-                      <span class="text-cool-steel-700 dark:text-cool-steel-300 truncate">
-                        {ap.name}
-                      </span>
+                      <span class="text-gray-700 dark:text-gray-300 truncate">{ap.name}</span>
                       <div class="flex items-center gap-2">
-                        <span class="text-cool-steel-500 dark:text-cool-steel-400">
+                        <span class="text-gray-500 dark:text-gray-400">
                           {ap.subscriber_count || 0} subs
                         </span>
                         <span
@@ -540,7 +514,7 @@
                 </div>
               </div>
             <% else %>
-              <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400 italic">
+              <p class="text-sm text-gray-500 dark:text-gray-400 italic">
                 {t("No peer data available")}
               </p>
             <% end %>
@@ -549,9 +523,9 @@
       </div>
 
       <%!-- Active Alerts --%>
-      <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-cool-steel-900">
+      <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900">
         <div class="p-4 sm:p-6">
-          <h3 class="font-semibold text-sm uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 mb-3">
+          <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
             <.icon name="hero-bell-alert" class="h-4 w-4 inline" /> Recent Alerts
           </h3>
           <%= if @trace.alerts == [] do %>
@@ -571,17 +545,14 @@
                 ]}>
                 </span>
                 <div class="flex-1 min-w-0">
-                  <span class="text-sm font-medium text-cool-steel-900 dark:text-white">
+                  <span class="text-sm font-medium text-gray-900 dark:text-white">
                     {format_alert_type(alert.alert_type)}
                   </span>
-                  <span
-                    :if={alert.message}
-                    class="text-sm text-cool-steel-500 dark:text-cool-steel-400 ml-1"
-                  >
+                  <span :if={alert.message} class="text-sm text-gray-500 dark:text-gray-400 ml-1">
                     — {alert.message}
                   </span>
                 </div>
-                <div class="text-xs text-cool-steel-500 dark:text-cool-steel-400 flex-shrink-0">
+                <div class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">
                   {format_relative_time(alert.triggered_at)}
                 </div>
                 <span
@@ -605,9 +576,9 @@
       <%!-- Recent Activity: Config Changes + Insights --%>
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <%!-- Config Changes — hidden, feature temporarily disabled --%>
-        <div class="hidden card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-cool-steel-900">
+        <div class="hidden card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900">
           <div class="p-4 sm:p-6">
-            <h3 class="font-semibold text-sm uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 mb-3">
+            <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
               <.icon name="hero-document-text" class="h-4 w-4 inline" /> Config Changes (24h)
             </h3>
             <%= if @trace.config_changes == [] do %>
@@ -619,16 +590,16 @@
               <div class="space-y-2">
                 <div :for={change <- @trace.config_changes} class="text-sm">
                   <div class="flex items-center justify-between">
-                    <span class="font-medium text-cool-steel-900 dark:text-white">
+                    <span class="font-medium text-gray-900 dark:text-white">
                       {Map.get(change, :changed_sections, []) |> Enum.join(", ")}
                     </span>
-                    <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                    <span class="text-xs text-gray-500 dark:text-gray-400">
                       {format_relative_time(change.changed_at)}
                     </span>
                   </div>
                   <div
                     :if={Map.get(change, :diff_summary)}
-                    class="text-xs text-cool-steel-500 dark:text-cool-steel-400 mt-0.5 font-mono truncate"
+                    class="text-xs text-gray-500 dark:text-gray-400 mt-0.5 font-mono truncate"
                   >
                     {change.diff_summary}
                   </div>
@@ -639,9 +610,9 @@
         </div>
 
         <%!-- Active Insights --%>
-        <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-cool-steel-900">
+        <div class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900">
           <div class="p-4 sm:p-6">
-            <h3 class="font-semibold text-sm uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 mb-3">
+            <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
               <.icon name="hero-light-bulb" class="h-4 w-4 inline" /> Active Insights
             </h3>
             <%= if @trace.insights == [] do %>
@@ -658,12 +629,12 @@
                   ]}>
                   </span>
                   <div class="min-w-0">
-                    <div class="text-sm font-medium text-cool-steel-900 dark:text-white">
+                    <div class="text-sm font-medium text-gray-900 dark:text-white">
                       {insight.title}
                     </div>
                     <div
                       :if={insight.description}
-                      class="text-xs text-cool-steel-500 dark:text-cool-steel-400 line-clamp-2"
+                      class="text-xs text-gray-500 dark:text-gray-400 line-clamp-2"
                     >
                       {insight.description}
                     </div>
@@ -678,16 +649,16 @@
       <%!-- Inventory Items --%>
       <div
         :if={@trace.inventory_items != []}
-        class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-cool-steel-900"
+        class="card shadow-sm border border-cool-steel-200 dark:border-cool-steel-700 dark:border-white/10 dark:bg-gray-900"
       >
         <div class="p-4 sm:p-6">
-          <h3 class="font-semibold text-sm uppercase tracking-wider text-cool-steel-500 dark:text-cool-steel-400 mb-3">
+          <h3 class="font-semibold text-sm uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-3">
             <.icon name="hero-cube" class="h-4 w-4 inline" /> Equipment (from Gaiia)
           </h3>
           <div class="overflow-x-auto">
             <table class="min-w-full text-sm">
               <thead>
-                <tr class="text-xs uppercase text-cool-steel-500 dark:text-cool-steel-400">
+                <tr class="text-xs uppercase text-gray-500 dark:text-gray-400">
                   <th>Name</th>
                   <th>IP</th>
                   <th>Model</th>
@@ -700,7 +671,7 @@
                   :for={item <- @trace.inventory_items}
                   class="hover:bg-cool-steel-100/50 dark:hover:bg-cool-steel-800/50"
                 >
-                  <td class="font-medium text-cool-steel-900 dark:text-white">{item.name}</td>
+                  <td class="font-medium text-gray-900 dark:text-white">{item.name}</td>
                   <td class="font-mono text-sm">{item.ip_address}</td>
                   <td>{item.model_name}</td>
                   <td class="font-mono text-xs">{item.serial_number}</td>
@@ -724,12 +695,12 @@
     <div :if={@query == "" && !@trace} class="text-center py-16">
       <.icon
         name="hero-magnifying-glass-circle"
-        class="h-16 w-16 mx-auto mb-4 text-cool-steel-300 dark:text-cool-steel-600"
+        class="h-16 w-16 mx-auto mb-4 text-gray-300 dark:text-gray-600"
       />
-      <h2 class="text-xl font-semibold text-cool-steel-900 dark:text-white mb-2">
+      <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
         {t("Subscriber Trace")}
       </h2>
-      <p class="text-cool-steel-500 dark:text-cool-steel-400 max-w-md mx-auto">
+      <p class="text-gray-500 dark:text-gray-400 max-w-md mx-auto">
         {t(
           "Search for a customer by name, IP address, account ID, site name, or device name to see their full network status at a glance."
         )}
diff --git a/lib/towerops_web/live/user_registration_live.ex b/lib/towerops_web/live/user_registration_live.ex
index c3134cb8..de4e6949 100644
--- a/lib/towerops_web/live/user_registration_live.ex
+++ b/lib/towerops_web/live/user_registration_live.ex
@@ -180,7 +180,7 @@ defmodule ToweropsWeb.UserRegistrationLive do
               Already registered?
               <.link
                 navigate={~p"/users/log-in"}
-                class="font-semibold text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                class="font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
               >
                 Log in
               </.link>
@@ -189,8 +189,8 @@ defmodule ToweropsWeb.UserRegistrationLive do
           </.header>
 
           <%= if @invitation do %>
-            <div class="mt-6 rounded-lg bg-cerulean-50 dark:bg-cerulean-900/20 p-4 border border-cerulean-200 dark:border-cerulean-800">
-              <p class="text-sm text-cerulean-900 dark:text-cerulean-100">
+            <div class="mt-6 rounded-lg bg-blue-50 dark:bg-blue-900/20 p-4 border border-blue-200 dark:border-blue-800">
+              <p class="text-sm text-blue-900 dark:text-blue-100">
                 You've been invited to join
                 <span class="font-semibold">{@invitation.organization.name}</span>
                 as
@@ -198,11 +198,11 @@ defmodule ToweropsWeb.UserRegistrationLive do
               </p>
             </div>
           <% else %>
-            <div class="mt-6 rounded-lg bg-cerulean-50 dark:bg-cerulean-900/20 p-4 border border-cerulean-200 dark:border-cerulean-800">
-              <p class="text-sm font-medium text-cerulean-900 dark:text-cerulean-100">
+            <div class="mt-6 rounded-lg bg-blue-50 dark:bg-blue-900/20 p-4 border border-blue-200 dark:border-blue-800">
+              <p class="text-sm font-medium text-blue-900 dark:text-blue-100">
                 Free tier includes:
               </p>
-              <ul class="mt-2 text-sm text-cerulean-800 dark:text-cerulean-200 space-y-1">
+              <ul class="mt-2 text-sm text-blue-800 dark:text-blue-200 space-y-1">
                 <li>✓ Monitor up to 10 devices</li>
                 <li>✓ Real-time alerts and notifications</li>
                 <li>✓ Performance charts and historical data</li>
@@ -250,16 +250,16 @@ defmodule ToweropsWeb.UserRegistrationLive do
             />
 
             <%= if @password_breach_count && @password_breach_count > 0 do %>
-              <div class="mt-2 rounded-md bg-wheat-50 dark:bg-wheat-900/20 p-4">
+              <div class="mt-2 rounded-md bg-yellow-50 dark:bg-yellow-900/20 p-4">
                 <div class="flex">
                   <div class="flex-shrink-0">
-                    <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-wheat-400" />
+                    <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-yellow-400" />
                   </div>
                   <div class="ml-3">
-                    <h3 class="text-sm font-medium text-wheat-800 dark:text-wheat-200">
+                    <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
                       Password found in data breaches
                     </h3>
-                    <div class="mt-2 text-sm text-wheat-700 dark:text-wheat-300">
+                    <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
                       <p>
                         This password has appeared {@password_breach_count}
                         {if @password_breach_count == 1, do: "time", else: "times"} in known data breaches. We strongly recommend choosing a different,
@@ -291,7 +291,7 @@ defmodule ToweropsWeb.UserRegistrationLive do
                     type="checkbox"
                     checked={@privacy_policy_consent}
                     required
-                    class="h-4 w-4 rounded border-zinc-300 text-cerulean-600 focus:ring-cerulean-500 dark:border-zinc-600 dark:bg-zinc-800 dark:checked:bg-cerulean-500 dark:checked:border-cerulean-500"
+                    class="h-4 w-4 rounded border-zinc-300 text-blue-600 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:checked:bg-blue-500 dark:checked:border-blue-500"
                   />
                 </div>
                 <div class="ml-3 text-sm">
@@ -303,12 +303,12 @@ defmodule ToweropsWeb.UserRegistrationLive do
                     <.link
                       href={~p"/privacy"}
                       target="_blank"
-                      class="font-medium text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                      class="font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
                       onclick="event.stopPropagation()"
                     >
                       Privacy Policy
                     </.link>
-                    <span class="text-sweet-salmon-600 dark:text-sweet-salmon-400">*</span>
+                    <span class="text-red-600 dark:text-red-400">*</span>
                   </label>
                 </div>
               </div>
@@ -321,7 +321,7 @@ defmodule ToweropsWeb.UserRegistrationLive do
                     type="checkbox"
                     checked={@terms_of_service_consent}
                     required
-                    class="h-4 w-4 rounded border-zinc-300 text-cerulean-600 focus:ring-cerulean-500 dark:border-zinc-600 dark:bg-zinc-800 dark:checked:bg-cerulean-500 dark:checked:border-cerulean-500"
+                    class="h-4 w-4 rounded border-zinc-300 text-blue-600 focus:ring-blue-500 dark:border-zinc-600 dark:bg-zinc-800 dark:checked:bg-blue-500 dark:checked:border-blue-500"
                   />
                 </div>
                 <div class="ml-3 text-sm">
@@ -333,12 +333,12 @@ defmodule ToweropsWeb.UserRegistrationLive do
                     <.link
                       href={~p"/terms"}
                       target="_blank"
-                      class="font-medium text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+                      class="font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
                       onclick="event.stopPropagation()"
                     >
                       Terms of Service
                     </.link>
-                    <span class="text-sweet-salmon-600 dark:text-sweet-salmon-400">*</span>
+                    <span class="text-red-600 dark:text-red-400">*</span>
                   </label>
                 </div>
               </div>
diff --git a/lib/towerops_web/live/user_reset_password_live.ex b/lib/towerops_web/live/user_reset_password_live.ex
index 23ad5fa6..bbee5a3d 100644
--- a/lib/towerops_web/live/user_reset_password_live.ex
+++ b/lib/towerops_web/live/user_reset_password_live.ex
@@ -123,16 +123,16 @@ defmodule ToweropsWeb.UserResetPasswordLive do
             />
 
             <%= if @password_breach_count && @password_breach_count > 0 do %>
-              <div class="mt-2 rounded-md bg-wheat-50 dark:bg-wheat-900/20 p-4">
+              <div class="mt-2 rounded-md bg-yellow-50 dark:bg-yellow-900/20 p-4">
                 <div class="flex">
                   <div class="flex-shrink-0">
-                    <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-wheat-400" />
+                    <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-yellow-400" />
                   </div>
                   <div class="ml-3">
-                    <h3 class="text-sm font-medium text-wheat-800 dark:text-wheat-200">
+                    <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
                       Password found in data breaches
                     </h3>
-                    <div class="mt-2 text-sm text-wheat-700 dark:text-wheat-300">
+                    <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
                       <p>
                         This password has appeared {@password_breach_count}
                         {if @password_breach_count == 1, do: "time", else: "times"} in known data breaches. We strongly recommend choosing a different,
@@ -161,7 +161,7 @@ defmodule ToweropsWeb.UserResetPasswordLive do
           <div class="mt-6 text-center">
             <.link
               navigate={~p"/users/log-in"}
-              class="text-sm font-semibold text-cerulean-600 hover:text-cerulean-700 dark:text-cerulean-400 dark:hover:text-cerulean-300"
+              class="text-sm font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
             >
               Back to log in
             </.link>
diff --git a/lib/towerops_web/live/user_settings_live.html.heex b/lib/towerops_web/live/user_settings_live.html.heex
index 8b03223a..be8a5654 100644
--- a/lib/towerops_web/live/user_settings_live.html.heex
+++ b/lib/towerops_web/live/user_settings_live.html.heex
@@ -4,24 +4,24 @@
   unresolved_alert_count={assigns[:unresolved_alert_count] || 0}
 >
   <div class="pb-5">
-    <h1 class="text-3xl font-semibold tracking-tight text-cool-steel-900 dark:text-white">
+    <h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
       {t("Account Settings")}
     </h1>
-    <p class="mt-2 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+    <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
       {t("Manage your account email address, password, and security settings")}
     </p>
   </div>
 
-  <div class="border-b border-cool-steel-200 dark:border-white/10">
+  <div class="border-b border-gray-200 dark:border-white/10">
     <nav class="-mb-px flex space-x-8 overflow-x-auto">
       <.link
         patch={~p"/users/settings?tab=personal"}
         class={[
           "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors",
           if(@active_tab == "personal",
-            do: "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold",
+            do: "border-indigo-500 text-indigo-600 dark:text-indigo-400 font-semibold",
             else:
-              "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+              "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
           )
         ]}
       >
@@ -34,9 +34,9 @@
         class={[
           "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors",
           if(@active_tab == "account",
-            do: "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold",
+            do: "border-indigo-500 text-indigo-600 dark:text-indigo-400 font-semibold",
             else:
-              "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+              "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
           )
         ]}
       >
@@ -49,9 +49,9 @@
         class={[
           "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors",
           if(@active_tab == "sessions",
-            do: "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold",
+            do: "border-indigo-500 text-indigo-600 dark:text-indigo-400 font-semibold",
             else:
-              "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+              "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
           )
         ]}
       >
@@ -64,9 +64,9 @@
         class={[
           "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors",
           if(@active_tab == "api",
-            do: "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold",
+            do: "border-indigo-500 text-indigo-600 dark:text-indigo-400 font-semibold",
             else:
-              "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+              "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
           )
         ]}
       >
@@ -79,9 +79,9 @@
         class={[
           "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors",
           if(@active_tab == "notifications",
-            do: "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold",
+            do: "border-indigo-500 text-indigo-600 dark:text-indigo-400 font-semibold",
             else:
-              "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+              "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
           )
         ]}
       >
@@ -94,9 +94,9 @@
         class={[
           "whitespace-nowrap py-4 px-1 border-b-2 text-sm transition-colors",
           if(@active_tab == "security",
-            do: "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400 font-semibold",
+            do: "border-indigo-500 text-indigo-600 dark:text-indigo-400 font-semibold",
             else:
-              "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 font-medium"
+              "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 font-medium"
           )
         ]}
       >
@@ -106,7 +106,7 @@
       </.link>
       <.link
         navigate={~p"/users/my-data"}
-        class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent text-sm font-medium text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300 transition-colors"
+        class="whitespace-nowrap py-4 px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 transition-colors"
       >
         <span class="flex items-center gap-1.5">
           <.icon name="hero-arrow-down-tray" class="h-4 w-4" /> {t("My Data")}
@@ -115,15 +115,15 @@
     </nav>
   </div>
 
-  <div class="divide-y divide-cool-steel-200 dark:divide-white/10">
+  <div class="divide-y divide-gray-200 dark:divide-white/10">
     <!-- Personal Information Section -->
     <%= if @active_tab == "personal" do %>
       <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
         <div>
-          <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+          <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
             {t("Personal Information")}
           </h2>
-          <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
             {t("Update your name and timezone preferences.")}
           </p>
         </div>
@@ -138,7 +138,7 @@
             <div class="sm:col-span-3">
               <label
                 for="first_name"
-                class="block text-sm/6 font-medium text-cool-steel-900 dark:text-white"
+                class="block text-sm/6 font-medium text-gray-900 dark:text-white"
               >
                 {t("First name")}
               </label>
@@ -149,7 +149,7 @@
                   id="first_name"
                   value={@profile_form[:first_name].value}
                   autocomplete="given-name"
-                  class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-cool-steel-900 outline-1 -outline-offset-1 outline-cool-steel-300 placeholder:text-cool-steel-400 focus:outline-2 focus:-outline-offset-2 focus:outline-cerulean-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-cool-steel-500 dark:focus:outline-cerulean-500"
+                  class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
                 />
               </div>
             </div>
@@ -157,7 +157,7 @@
             <div class="sm:col-span-3">
               <label
                 for="last_name"
-                class="block text-sm/6 font-medium text-cool-steel-900 dark:text-white"
+                class="block text-sm/6 font-medium text-gray-900 dark:text-white"
               >
                 {t("Last name")}
               </label>
@@ -168,7 +168,7 @@
                   id="last_name"
                   value={@profile_form[:last_name].value}
                   autocomplete="family-name"
-                  class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-cool-steel-900 outline-1 -outline-offset-1 outline-cool-steel-300 placeholder:text-cool-steel-400 focus:outline-2 focus:-outline-offset-2 focus:outline-cerulean-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-cool-steel-500 dark:focus:outline-cerulean-500"
+                  class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
                 />
               </div>
             </div>
@@ -176,7 +176,7 @@
             <div class="col-span-full">
               <label
                 for="timezone"
-                class="block text-sm/6 font-medium text-cool-steel-900 dark:text-white"
+                class="block text-sm/6 font-medium text-gray-900 dark:text-white"
               >
                 {t("Timezone")}
               </label>
@@ -184,7 +184,7 @@
                 <select
                   name={@profile_form[:timezone].name}
                   id="timezone"
-                  class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-cool-steel-900 outline-1 -outline-offset-1 outline-cool-steel-300 placeholder:text-cool-steel-400 focus:outline-2 focus:-outline-offset-2 focus:outline-cerulean-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-cool-steel-800 dark:focus:outline-cerulean-500"
+                  class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-gray-800 dark:focus:outline-indigo-500"
                 >
                   <option value="UTC" selected={@profile_form[:timezone].value == "UTC"}>
                     {t("UTC (Coordinated Universal Time)")}
@@ -255,7 +255,7 @@
                   fill="currentColor"
                   data-slot="icon"
                   aria-hidden="true"
-                  class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-cool-steel-400 sm:size-4"
+                  class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-400 sm:size-4"
                 >
                   <path
                     d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
@@ -269,7 +269,7 @@
             <div class="col-span-full">
               <label
                 for="time_format"
-                class="block text-sm/6 font-medium text-cool-steel-900 dark:text-white"
+                class="block text-sm/6 font-medium text-gray-900 dark:text-white"
               >
                 {t("Time Format")}
               </label>
@@ -277,7 +277,7 @@
                 <select
                   name={@profile_form[:time_format].name}
                   id="time_format"
-                  class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-cool-steel-900 outline-1 -outline-offset-1 outline-cool-steel-300 placeholder:text-cool-steel-400 focus:outline-2 focus:-outline-offset-2 focus:outline-cerulean-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-cool-steel-800 dark:focus:outline-cerulean-500"
+                  class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-gray-800 dark:focus:outline-indigo-500"
                 >
                   <option value="24h" selected={@profile_form[:time_format].value == "24h"}>
                     24-hour (14:30)
@@ -291,7 +291,7 @@
                   fill="currentColor"
                   data-slot="icon"
                   aria-hidden="true"
-                  class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-cool-steel-400 sm:size-4"
+                  class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-400 sm:size-4"
                 >
                   <path
                     d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
@@ -305,7 +305,7 @@
             <div class="col-span-full">
               <label
                 for="language"
-                class="block text-sm/6 font-medium text-cool-steel-900 dark:text-white"
+                class="block text-sm/6 font-medium text-gray-900 dark:text-white"
               >
                 {t("Language")}
               </label>
@@ -313,7 +313,7 @@
                 <select
                   name={@profile_form[:language].name}
                   id="language"
-                  class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-cool-steel-900 outline-1 -outline-offset-1 outline-cool-steel-300 placeholder:text-cool-steel-400 focus:outline-2 focus:-outline-offset-2 focus:outline-cerulean-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-cool-steel-800 dark:focus:outline-cerulean-500"
+                  class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-gray-800 dark:focus:outline-indigo-500"
                 >
                   <option value="en" selected={@profile_form[:language].value == "en"}>
                     English
@@ -327,7 +327,7 @@
                   fill="currentColor"
                   data-slot="icon"
                   aria-hidden="true"
-                  class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-cool-steel-400 sm:size-4"
+                  class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-400 sm:size-4"
                 >
                   <path
                     fill-rule="evenodd"
@@ -341,11 +341,11 @@
             <div :if={@organizations != []} class="col-span-full">
               <label
                 for="default_organization_id"
-                class="block text-sm/6 font-medium text-cool-steel-900 dark:text-white"
+                class="block text-sm/6 font-medium text-gray-900 dark:text-white"
               >
                 {t("Default Organization")}
               </label>
-              <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
                 {t(
                   "Choose which organization you see by default when logging in or navigating to pages without an organization context."
                 )}
@@ -354,7 +354,7 @@
                 <select
                   name={@profile_form[:default_organization_id].name}
                   id="default_organization_id"
-                  class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-cool-steel-900 outline-1 -outline-offset-1 outline-cool-steel-300 placeholder:text-cool-steel-400 focus:outline-2 focus:-outline-offset-2 focus:outline-cerulean-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-cool-steel-800 dark:focus:outline-cerulean-500"
+                  class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-gray-800 dark:focus:outline-indigo-500"
                 >
                   <option value="">None (use first organization)</option>
                   <%= for org <- @organizations do %>
@@ -371,7 +371,7 @@
                   fill="currentColor"
                   data-slot="icon"
                   aria-hidden="true"
-                  class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-cool-steel-400 sm:size-4"
+                  class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-400 sm:size-4"
                 >
                   <path
                     d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
@@ -387,7 +387,7 @@
             <button
               type="submit"
               phx-disable-with={t("Saving...")}
-              class="rounded-md bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-cerulean-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cerulean-600 dark:bg-cerulean-500 dark:shadow-none dark:hover:bg-cerulean-400 dark:focus-visible:outline-cerulean-500"
+              class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:shadow-none dark:hover:bg-indigo-400 dark:focus-visible:outline-indigo-500"
             >
               {t("Save")}
             </button>
@@ -399,10 +399,10 @@
     <%= if @active_tab == "personal" do %>
       <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
         <div>
-          <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+          <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
             {t("Appearance")}
           </h2>
-          <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
             {t("Choose your preferred interface theme.")}
           </p>
         </div>
@@ -419,11 +419,11 @@
               aria-pressed="false"
               data-phx-theme="system"
               phx-click={JS.dispatch("phx:set-theme")}
-              class="flex flex-1 flex-col items-center gap-2 rounded-lg border border-cool-steel-200 px-4 py-5 text-sm font-medium text-cool-steel-700 transition-colors hover:border-cerulean-300 hover:bg-cerulean-50 dark:border-white/10 dark:text-cool-steel-300 dark:hover:border-cerulean-500 dark:hover:bg-cerulean-900/20"
+              class="flex flex-1 flex-col items-center gap-2 rounded-lg border border-gray-200 px-4 py-5 text-sm font-medium text-gray-700 transition-colors hover:border-indigo-300 hover:bg-indigo-50 dark:border-white/10 dark:text-gray-300 dark:hover:border-indigo-500 dark:hover:bg-indigo-900/20"
             >
               <.icon name="hero-computer-desktop" class="h-6 w-6" />
               {t("Auto")}
-              <span class="text-xs font-normal text-cool-steel-400 dark:text-cool-steel-500">
+              <span class="text-xs font-normal text-gray-400 dark:text-gray-500">
                 {t("System default")}
               </span>
             </button>
@@ -432,11 +432,11 @@
               aria-pressed="false"
               data-phx-theme="light"
               phx-click={JS.dispatch("phx:set-theme")}
-              class="flex flex-1 flex-col items-center gap-2 rounded-lg border border-cool-steel-200 px-4 py-5 text-sm font-medium text-cool-steel-700 transition-colors hover:border-cerulean-300 hover:bg-cerulean-50 dark:border-white/10 dark:text-cool-steel-300 dark:hover:border-cerulean-500 dark:hover:bg-cerulean-900/20"
+              class="flex flex-1 flex-col items-center gap-2 rounded-lg border border-gray-200 px-4 py-5 text-sm font-medium text-gray-700 transition-colors hover:border-indigo-300 hover:bg-indigo-50 dark:border-white/10 dark:text-gray-300 dark:hover:border-indigo-500 dark:hover:bg-indigo-900/20"
             >
               <.icon name="hero-sun" class="h-6 w-6" />
               {t("Light")}
-              <span class="text-xs font-normal text-cool-steel-400 dark:text-cool-steel-500">
+              <span class="text-xs font-normal text-gray-400 dark:text-gray-500">
                 {t("Always light")}
               </span>
             </button>
@@ -445,11 +445,11 @@
               aria-pressed="false"
               data-phx-theme="dark"
               phx-click={JS.dispatch("phx:set-theme")}
-              class="flex flex-1 flex-col items-center gap-2 rounded-lg border border-cool-steel-200 px-4 py-5 text-sm font-medium text-cool-steel-700 transition-colors hover:border-cerulean-300 hover:bg-cerulean-50 dark:border-white/10 dark:text-cool-steel-300 dark:hover:border-cerulean-500 dark:hover:bg-cerulean-900/20"
+              class="flex flex-1 flex-col items-center gap-2 rounded-lg border border-gray-200 px-4 py-5 text-sm font-medium text-gray-700 transition-colors hover:border-indigo-300 hover:bg-indigo-50 dark:border-white/10 dark:text-gray-300 dark:hover:border-indigo-500 dark:hover:bg-indigo-900/20"
             >
               <.icon name="hero-moon" class="h-6 w-6" />
               {t("Dark")}
-              <span class="text-xs font-normal text-cool-steel-400 dark:text-cool-steel-500">
+              <span class="text-xs font-normal text-gray-400 dark:text-gray-500">
                 {t("Always dark")}
               </span>
             </button>
@@ -463,10 +463,10 @@
       <!-- Email Address Section -->
       <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
         <div>
-          <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+          <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
             {t("Email Address")}
           </h2>
-          <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
             {t(
               "Update your email address. You'll receive a confirmation link to verify the new address."
             )}
@@ -481,10 +481,7 @@
         >
           <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
             <div class="col-span-full">
-              <label
-                for="email"
-                class="block text-sm/6 font-medium text-cool-steel-900 dark:text-white"
-              >
+              <label for="email" class="block text-sm/6 font-medium text-gray-900 dark:text-white">
                 {t("Email address")}
               </label>
               <div class="mt-2">
@@ -495,7 +492,7 @@
                   value={@email_form[:email].value}
                   autocomplete="email"
                   required
-                  class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-cool-steel-900 outline-1 -outline-offset-1 outline-cool-steel-300 placeholder:text-cool-steel-400 focus:outline-2 focus:-outline-offset-2 focus:outline-cerulean-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-cool-steel-500 dark:focus:outline-cerulean-500"
+                  class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
                 />
               </div>
             </div>
@@ -505,7 +502,7 @@
             <button
               type="submit"
               phx-disable-with={t("Changing...")}
-              class="rounded-md bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-cerulean-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cerulean-600 dark:bg-cerulean-500 dark:shadow-none dark:hover:bg-cerulean-400 dark:focus-visible:outline-cerulean-500"
+              class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:shadow-none dark:hover:bg-indigo-400 dark:focus-visible:outline-indigo-500"
             >
               {t("Change Email")}
             </button>
@@ -516,10 +513,10 @@
 <!-- Password Section -->
       <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
         <div>
-          <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+          <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
             {t("Change Password")}
           </h2>
-          <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
             {t(
               "Update your password. You'll be logged out and need to sign in again with your new password."
             )}
@@ -536,7 +533,7 @@
             <div class="col-span-full">
               <label
                 for="new-password"
-                class="block text-sm/6 font-medium text-cool-steel-900 dark:text-white"
+                class="block text-sm/6 font-medium text-gray-900 dark:text-white"
               >
                 {t("New password")}
               </label>
@@ -548,21 +545,21 @@
                   autocomplete="new-password"
                   phx-blur="check_password_breach"
                   required
-                  class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-cool-steel-900 outline-1 -outline-offset-1 outline-cool-steel-300 placeholder:text-cool-steel-400 focus:outline-2 focus:-outline-offset-2 focus:outline-cerulean-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-cool-steel-500 dark:focus:outline-cerulean-500"
+                  class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
                 />
               </div>
 
               <%= if @password_breach_count && @password_breach_count > 0 do %>
-                <div class="mt-2 rounded-md bg-wheat-50 dark:bg-wheat-900/20 p-4">
+                <div class="mt-2 rounded-md bg-yellow-50 dark:bg-yellow-900/20 p-4">
                   <div class="flex">
                     <div class="flex-shrink-0">
-                      <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-wheat-400" />
+                      <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-yellow-400" />
                     </div>
                     <div class="ml-3">
-                      <h3 class="text-sm font-medium text-wheat-800 dark:text-wheat-200">
+                      <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
                         {t("Password found in data breaches")}
                       </h3>
-                      <div class="mt-2 text-sm text-wheat-700 dark:text-wheat-300">
+                      <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
                         <p>
                           This password has appeared {@password_breach_count}
                           {if @password_breach_count == 1, do: "time", else: "times"} in known data breaches. We strongly recommend choosing a different,
@@ -578,7 +575,7 @@
             <div class="col-span-full">
               <label
                 for="confirm-password"
-                class="block text-sm/6 font-medium text-cool-steel-900 dark:text-white"
+                class="block text-sm/6 font-medium text-gray-900 dark:text-white"
               >
                 {t("Confirm password")}
               </label>
@@ -589,7 +586,7 @@
                   id="confirm-password"
                   autocomplete="new-password"
                   required
-                  class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-cool-steel-900 outline-1 -outline-offset-1 outline-cool-steel-300 placeholder:text-cool-steel-400 focus:outline-2 focus:-outline-offset-2 focus:outline-cerulean-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-cool-steel-500 dark:focus:outline-cerulean-500"
+                  class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
                 />
               </div>
             </div>
@@ -599,7 +596,7 @@
             <button
               type="submit"
               phx-disable-with={t("Changing...")}
-              class="rounded-md bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-cerulean-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cerulean-600 dark:bg-cerulean-500 dark:shadow-none dark:hover:bg-cerulean-400 dark:focus-visible:outline-cerulean-500"
+              class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:shadow-none dark:hover:bg-indigo-400 dark:focus-visible:outline-indigo-500"
             >
               {t("Save Password")}
             </button>
@@ -608,12 +605,12 @@
       </div>
       
 <!-- Delete Account Danger Zone -->
-      <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8 border-t border-sweet-salmon-200 dark:border-sweet-salmon-900/50">
+      <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8 border-t border-red-200 dark:border-red-900/50">
         <div>
-          <h2 class="text-base/7 font-semibold text-sweet-salmon-600 dark:text-sweet-salmon-400">
+          <h2 class="text-base/7 font-semibold text-red-600 dark:text-red-400">
             {t("Delete Account")}
           </h2>
-          <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
             {t(
               "Permanently delete your account and all associated data. This action cannot be undone."
             )}
@@ -621,17 +618,17 @@
         </div>
 
         <div class="md:col-span-2">
-          <div class="rounded-lg border border-sweet-salmon-200 bg-sweet-salmon-50 p-6 dark:border-sweet-salmon-900/50 dark:bg-sweet-salmon-950/20">
+          <div class="rounded-lg border border-red-200 bg-red-50 p-6 dark:border-red-900/50 dark:bg-red-950/20">
             <div class="flex items-start gap-3">
               <.icon
                 name="hero-exclamation-triangle"
-                class="h-6 w-6 text-sweet-salmon-600 dark:text-sweet-salmon-400 flex-shrink-0 mt-0.5"
+                class="h-6 w-6 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5"
               />
               <div>
-                <h3 class="text-sm font-semibold text-sweet-salmon-800 dark:text-sweet-salmon-300">
+                <h3 class="text-sm font-semibold text-red-800 dark:text-red-300">
                   {t("Danger Zone")}
                 </h3>
-                <p class="mt-1 text-sm text-sweet-salmon-700 dark:text-sweet-salmon-400">
+                <p class="mt-1 text-sm text-red-700 dark:text-red-400">
                   {t(
                     "Once you delete your account, all of your data will be permanently removed. Before deleting, you can export your data from the My Data page."
                   )}
@@ -640,7 +637,7 @@
                   <button
                     type="button"
                     phx-click="show_delete_modal"
-                    class="rounded-md bg-sweet-salmon-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-sweet-salmon-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sweet-salmon-600 dark:bg-sweet-salmon-500 dark:shadow-none dark:hover:bg-sweet-salmon-400"
+                    class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-red-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 dark:bg-red-500 dark:shadow-none dark:hover:bg-red-400"
                   >
                     {t("Delete My Account")}
                   </button>
@@ -657,10 +654,10 @@
       <!-- API Tokens Section -->
       <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
         <div>
-          <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+          <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
             {t("API Tokens")}
           </h2>
-          <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
             {t(
               "Create API tokens to access Towerops programmatically. Tokens are scoped to a specific organization."
             )}
@@ -669,12 +666,12 @@
 
         <div class="md:col-span-2">
           <%= if Enum.empty?(@api_tokens) do %>
-            <div class="text-center rounded-lg border border-dashed border-cool-steel-300 px-6 py-10 dark:border-cool-steel-700">
-              <.icon name="hero-code-bracket" class="mx-auto h-12 w-12 text-cool-steel-400" />
-              <h3 class="mt-2 text-sm font-semibold text-cool-steel-900 dark:text-white">
+            <div class="text-center rounded-lg border border-dashed border-gray-300 px-6 py-10 dark:border-gray-700">
+              <.icon name="hero-code-bracket" class="mx-auto h-12 w-12 text-gray-400" />
+              <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
                 {t("No API tokens")}
               </h3>
-              <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                 {t("Get started by creating a new API token.")}
               </p>
               <div class="mt-6">
@@ -682,23 +679,23 @@
                   id="show-add-token-modal-empty"
                   type="button"
                   phx-click="show_add_token_modal"
-                  class="inline-flex items-center gap-x-1.5 rounded-md bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-cerulean-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cerulean-600 dark:bg-cerulean-500 dark:hover:bg-cerulean-400"
+                  class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
                 >
                   <.icon name="hero-plus" class="-ml-0.5 h-5 w-5" /> New Token
                 </button>
               </div>
             </div>
           <% else %>
-            <ul role="list" class="divide-y divide-cool-steel-200 dark:divide-white/10">
+            <ul role="list" class="divide-y divide-gray-200 dark:divide-white/10">
               <%= for token <- @api_tokens do %>
                 <li class="flex items-center justify-between gap-x-6 py-5">
                   <div class="min-w-0">
                     <div class="flex items-start gap-x-3">
-                      <p class="text-sm/6 font-semibold text-cool-steel-900 dark:text-white">
+                      <p class="text-sm/6 font-semibold text-gray-900 dark:text-white">
                         {token.name}
                       </p>
                     </div>
-                    <div class="mt-1 flex items-center gap-x-2 text-xs/5 text-cool-steel-500 dark:text-cool-steel-400">
+                    <div class="mt-1 flex items-center gap-x-2 text-xs/5 text-gray-500 dark:text-gray-400">
                       <p class="whitespace-nowrap">{token.organization.name}</p>
                       <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 fill-current">
                         <circle r="1" cx="1" cy="1" />
@@ -724,7 +721,7 @@
                         "Are you sure you want to delete this API token? This action cannot be undone."
                       )
                     }
-                    class="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-cool-steel-900 shadow-xs inset-ring-1 inset-ring-cool-steel-300 hover:bg-cool-steel-100 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/10 dark:hover:bg-white/20"
+                    class="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-100 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/10 dark:hover:bg-white/20"
                   >
                     {t("Delete")}
                   </button>
@@ -736,7 +733,7 @@
               <button
                 type="button"
                 phx-click="show_add_token_modal"
-                class="inline-flex items-center gap-x-1.5 rounded-md bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-cerulean-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cerulean-600 dark:bg-cerulean-500 dark:hover:bg-cerulean-400"
+                class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
               >
                 <.icon name="hero-plus" class="-ml-0.5 h-5 w-5" /> New Token
               </button>
@@ -751,43 +748,40 @@
       <!-- Mobile Devices Section -->
       <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
         <div>
-          <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+          <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
             {t("Mobile Devices")}
           </h2>
-          <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
             {t("Manage mobile devices that receive push notifications for alerts.")}
           </p>
         </div>
 
         <div class="md:col-span-2">
           <%= if Enum.empty?(@mobile_sessions) do %>
-            <div class="text-center rounded-lg border border-dashed border-cool-steel-300 px-6 py-10 dark:border-cool-steel-700">
-              <.icon
-                name="hero-device-phone-mobile"
-                class="mx-auto h-12 w-12 text-cool-steel-400"
-              />
-              <h3 class="mt-2 text-sm font-semibold text-cool-steel-900 dark:text-white">
+            <div class="text-center rounded-lg border border-dashed border-gray-300 px-6 py-10 dark:border-gray-700">
+              <.icon name="hero-device-phone-mobile" class="mx-auto h-12 w-12 text-gray-400" />
+              <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
                 {t("No mobile devices")}
               </h3>
-              <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                 {t("Add a mobile device to receive push notifications for alerts.")}
               </p>
               <div class="mt-6">
                 <.link
                   navigate={~p"/mobile/qr-login"}
-                  class="inline-flex items-center gap-x-1.5 rounded-md bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-cerulean-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cerulean-600 dark:bg-cerulean-500 dark:hover:bg-cerulean-400"
+                  class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
                 >
                   <.icon name="hero-qr-code" class="-ml-0.5 h-5 w-5" /> Add Device
                 </.link>
               </div>
             </div>
           <% else %>
-            <ul role="list" class="divide-y divide-cool-steel-200 dark:divide-white/10">
+            <ul role="list" class="divide-y divide-gray-200 dark:divide-white/10">
               <%= for session <- @mobile_sessions do %>
                 <li class="flex items-center justify-between gap-x-6 py-5">
                   <div class="min-w-0 flex-1">
                     <div class="flex items-start gap-x-3">
-                      <p class="text-sm/6 font-semibold text-cool-steel-900 dark:text-white">
+                      <p class="text-sm/6 font-semibold text-gray-900 dark:text-white">
                         {session.device_name || "Unknown Device"}
                       </p>
                       <%= if session.alerts_enabled do %>
@@ -795,12 +789,12 @@
                           <.icon name="hero-bell" class="h-3 w-3" /> Alerts On
                         </span>
                       <% else %>
-                        <span class="inline-flex items-center gap-x-0.5 rounded-md bg-cool-steel-50 px-2 py-1 text-xs font-medium text-cool-steel-600 inset-ring-1 inset-ring-cool-steel-500/10 dark:bg-cool-steel-400/10 dark:text-cool-steel-400 dark:inset-ring-cool-steel-400/20">
+                        <span class="inline-flex items-center gap-x-0.5 rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 inset-ring-1 inset-ring-gray-500/10 dark:bg-gray-400/10 dark:text-gray-400 dark:inset-ring-gray-400/20">
                           <.icon name="hero-bell-slash" class="h-3 w-3" /> Alerts Off
                         </span>
                       <% end %>
                     </div>
-                    <div class="mt-1 flex items-center gap-x-2 text-xs/5 text-cool-steel-500 dark:text-cool-steel-400">
+                    <div class="mt-1 flex items-center gap-x-2 text-xs/5 text-gray-500 dark:text-gray-400">
                       <p>{session.device_os} • {session.app_version}</p>
                       <svg viewBox="0 0 2 2" class="h-0.5 w-0.5 fill-current">
                         <circle r="1" cx="1" cy="1" />
@@ -819,7 +813,7 @@
                       phx-click="toggle_device_alerts"
                       phx-value-session-id={session.id}
                       phx-value-enabled={if session.alerts_enabled, do: "false", else: "true"}
-                      class="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-cool-steel-900 shadow-xs inset-ring-1 inset-ring-cool-steel-300 hover:bg-cool-steel-100 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/10 dark:hover:bg-white/20"
+                      class="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-100 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/10 dark:hover:bg-white/20"
                     >
                       {t("Toggle")}
                     </button>
@@ -828,7 +822,7 @@
                       phx-click="revoke_mobile_device"
                       phx-value-session-id={session.id}
                       data-confirm={t("Are you sure you want to remove this device?")}
-                      class="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-cool-steel-900 shadow-xs inset-ring-1 inset-ring-cool-steel-300 hover:bg-cool-steel-100 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/10 dark:hover:bg-white/20"
+                      class="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-100 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/10 dark:hover:bg-white/20"
                     >
                       {t("Remove")}
                     </button>
@@ -840,7 +834,7 @@
             <div class="mt-6 flex">
               <.link
                 navigate={~p"/mobile/qr-login"}
-                class="inline-flex items-center gap-x-1.5 rounded-md bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-cerulean-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cerulean-600 dark:bg-cerulean-500 dark:hover:bg-cerulean-400"
+                class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
               >
                 <.icon name="hero-qr-code" class="-ml-0.5 h-5 w-5" /> Add Device
               </.link>
@@ -855,16 +849,16 @@
       <!-- Security Alert Banner -->
       <%= if @show_security_alert do %>
         <div class="px-4 py-6 sm:px-6 lg:px-8">
-          <div class="rounded-lg bg-wheat-50 p-4 dark:bg-wheat-900/20">
+          <div class="rounded-lg bg-amber-50 p-4 dark:bg-amber-900/20">
             <div class="flex">
               <div class="flex-shrink-0">
-                <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-wheat-400" />
+                <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-amber-400" />
               </div>
               <div class="ml-3">
-                <h3 class="text-sm font-medium text-wheat-800 dark:text-wheat-200">
+                <h3 class="text-sm font-medium text-amber-800 dark:text-amber-200">
                   {t("Security Alert")}
                 </h3>
-                <div class="mt-2 text-sm text-wheat-700 dark:text-wheat-300">
+                <div class="mt-2 text-sm text-amber-700 dark:text-amber-300">
                   <p>
                     We detected {@failed_login_count} failed login attempts in the last 24 hours. {t(
                       "Please review your login history below and ensure all activity is authorized."
@@ -880,44 +874,41 @@
 <!-- Active Sessions Section -->
       <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
         <div>
-          <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+          <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
             {t("Active Sessions")}
           </h2>
-          <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
             {t("Manage browser sessions where you're currently logged in.")}
           </p>
         </div>
 
         <div class="md:col-span-2">
           <%= if Enum.empty?(@browser_sessions) do %>
-            <div class="text-center rounded-lg border border-dashed border-cool-steel-300 px-6 py-10 dark:border-cool-steel-700">
-              <.icon name="hero-computer-desktop" class="mx-auto h-12 w-12 text-cool-steel-400" />
-              <h3 class="mt-2 text-sm font-semibold text-cool-steel-900 dark:text-white">
+            <div class="text-center rounded-lg border border-dashed border-gray-300 px-6 py-10 dark:border-gray-700">
+              <.icon name="hero-computer-desktop" class="mx-auto h-12 w-12 text-gray-400" />
+              <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
                 {t("No active sessions")}
               </h3>
-              <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                 {t("Your current session will appear here after your next login.")}
               </p>
             </div>
           <% else %>
-            <ul role="list" class="divide-y divide-cool-steel-200 dark:divide-white/10">
+            <ul role="list" class="divide-y divide-gray-200 dark:divide-white/10">
               <%= for session <- @browser_sessions do %>
                 <% is_current = current_session?(session, get_current_token_id(assigns)) %>
                 <li class="flex items-center justify-between gap-x-6 py-5">
                   <div class="flex items-start gap-x-3 min-w-0 flex-1">
                     <div class="flex-shrink-0 mt-1">
                       <%= if session.device_type in ["mobile", "tablet"] do %>
-                        <.icon
-                          name="hero-device-phone-mobile"
-                          class="h-6 w-6 text-cool-steel-400"
-                        />
+                        <.icon name="hero-device-phone-mobile" class="h-6 w-6 text-gray-400" />
                       <% else %>
-                        <.icon name="hero-computer-desktop" class="h-6 w-6 text-cool-steel-400" />
+                        <.icon name="hero-computer-desktop" class="h-6 w-6 text-gray-400" />
                       <% end %>
                     </div>
                     <div class="min-w-0 flex-1">
                       <div class="flex items-start gap-x-3">
-                        <p class="text-sm/6 font-semibold text-cool-steel-900 dark:text-white">
+                        <p class="text-sm/6 font-semibold text-gray-900 dark:text-white">
                           {format_browser_info(session)}
                         </p>
                         <%= if is_current do %>
@@ -926,11 +917,11 @@
                           </span>
                         <% end %>
                       </div>
-                      <div class="mt-1 flex flex-col gap-y-1 text-xs/5 text-cool-steel-500 dark:text-cool-steel-400">
+                      <div class="mt-1 flex flex-col gap-y-1 text-xs/5 text-gray-500 dark:text-gray-400">
                         <div class="flex items-center gap-x-2">
                           <.icon name="hero-map-pin" class="h-3 w-3" />
                           <span>{format_location(session)}</span>
-                          <span class="text-cool-steel-400 dark:text-cool-steel-600">•</span>
+                          <span class="text-gray-400 dark:text-gray-600">•</span>
                           <span class="font-mono">{session.ip_address}</span>
                         </div>
                         <div class="flex items-center gap-x-2">
@@ -954,9 +945,9 @@
                     }
                     class={"rounded-md px-2.5 py-1.5 text-sm font-semibold shadow-xs inset-ring-1 " <>
                           if is_current do
-                            "bg-cool-steel-100 text-cool-steel-400 inset-ring-cool-steel-200 cursor-not-allowed dark:bg-cool-steel-800 dark:text-cool-steel-600 dark:inset-ring-cool-steel-700"
+                            "bg-gray-100 text-gray-400 inset-ring-gray-200 cursor-not-allowed dark:bg-gray-800 dark:text-gray-600 dark:inset-ring-gray-700"
                           else
-                            "bg-white text-cool-steel-900 inset-ring-cool-steel-300 hover:bg-cool-steel-100 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/10 dark:hover:bg-white/20"
+                            "bg-white text-gray-900 inset-ring-gray-300 hover:bg-gray-100 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/10 dark:hover:bg-white/20"
                           end
                         }
                   >
@@ -971,7 +962,7 @@
                 <button
                   type="button"
                   phx-click="show_revoke_all_modal"
-                  class="inline-flex items-center gap-x-1.5 rounded-md bg-sweet-salmon-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-sweet-salmon-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sweet-salmon-600 dark:bg-sweet-salmon-500 dark:hover:bg-sweet-salmon-400"
+                  class="inline-flex items-center gap-x-1.5 rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-red-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 dark:bg-red-500 dark:hover:bg-red-400"
                 >
                   <.icon name="hero-x-mark" class="-ml-0.5 h-5 w-5" /> Revoke All Other Sessions
                 </button>
@@ -982,13 +973,13 @@
       </div>
       
 <!-- Login History Section -->
-      <div class="max-w-7xl px-4 py-16 sm:px-6 lg:px-8 border-t border-cool-steel-200 dark:border-white/10">
+      <div class="max-w-7xl px-4 py-16 sm:px-6 lg:px-8 border-t border-gray-200 dark:border-white/10">
         <div class="sm:flex sm:items-center">
           <div class="sm:flex-auto">
-            <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+            <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
               {t("Login History")}
             </h2>
-            <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+            <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
               {t(
                 "Recent login attempts to your account, including successful and failed attempts."
               )}
@@ -998,56 +989,56 @@
 
         <div class="mt-8">
           <%= if Enum.empty?(@login_history) do %>
-            <div class="text-center rounded-lg border border-dashed border-cool-steel-300 px-6 py-10 dark:border-cool-steel-700">
-              <.icon name="hero-clock" class="mx-auto h-12 w-12 text-cool-steel-400" />
-              <h3 class="mt-2 text-sm font-semibold text-cool-steel-900 dark:text-white">
+            <div class="text-center rounded-lg border border-dashed border-gray-300 px-6 py-10 dark:border-gray-700">
+              <.icon name="hero-clock" class="mx-auto h-12 w-12 text-gray-400" />
+              <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
                 {t("No login history")}
               </h3>
-              <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                 {t("Your login attempts will appear here.")}
               </p>
             </div>
           <% else %>
             <div class="overflow-x-auto shadow ring-1 ring-black ring-opacity-5 dark:ring-white/10 sm:rounded-lg">
-              <table class="min-w-full divide-y divide-cool-steel-300 dark:divide-cool-steel-700">
-                <thead class="bg-cool-steel-50 dark:bg-cool-steel-800/50">
+              <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
+                <thead class="bg-gray-50 dark:bg-gray-800/50">
                   <tr>
                     <th
                       scope="col"
-                      class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-cool-steel-900 dark:text-white sm:pl-6"
+                      class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-white sm:pl-6"
                     >
                       {t("Date & Time")}
                     </th>
                     <th
                       scope="col"
-                      class="px-3 py-3.5 text-left text-sm font-semibold text-cool-steel-900 dark:text-white"
+                      class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white"
                     >
                       {t("Status")}
                     </th>
                     <th
                       scope="col"
-                      class="px-3 py-3.5 text-left text-sm font-semibold text-cool-steel-900 dark:text-white"
+                      class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white"
                     >
                       {t("Method")}
                     </th>
                     <th
                       scope="col"
-                      class="px-3 py-3.5 text-left text-sm font-semibold text-cool-steel-900 dark:text-white"
+                      class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white"
                     >
                       {t("Location")}
                     </th>
                     <th
                       scope="col"
-                      class="py-3.5 pl-3 pr-4 text-right text-sm font-semibold text-cool-steel-900 dark:text-white sm:pr-6"
+                      class="py-3.5 pl-3 pr-4 text-right text-sm font-semibold text-gray-900 dark:text-white sm:pr-6"
                     >
                       {t("IP Address")}
                     </th>
                   </tr>
                 </thead>
-                <tbody class="divide-y divide-cool-steel-200 bg-white dark:divide-cool-steel-800 dark:bg-cool-steel-900">
+                <tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-800 dark:bg-gray-900">
                   <%= for attempt <- @login_history do %>
                     <tr>
-                      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-cool-steel-900 dark:text-white sm:pl-6">
+                      <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-900 dark:text-white sm:pl-6">
                         {format_timestamp_in_timezone(
                           attempt.inserted_at,
                           @current_scope.timezone,
@@ -1060,21 +1051,21 @@
                             <.icon name="hero-check-circle" class="h-3 w-3" /> Success
                           </span>
                         <% else %>
-                          <span class="inline-flex items-center gap-x-1 rounded-md bg-sweet-salmon-50 px-2 py-1 text-xs font-medium text-sweet-salmon-700 inset-ring-1 inset-ring-sweet-salmon-600/20 dark:bg-sweet-salmon-500/10 dark:text-sweet-salmon-400 dark:inset-ring-sweet-salmon-500/20">
+                          <span class="inline-flex items-center gap-x-1 rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 inset-ring-1 inset-ring-red-600/20 dark:bg-red-500/10 dark:text-red-400 dark:inset-ring-red-500/20">
                             <.icon name="hero-x-circle" class="h-3 w-3" /> Failed
                           </span>
                         <% end %>
                       </td>
-                      <td class="whitespace-nowrap px-3 py-4 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                      <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                         <% {icon, text} = login_method_info(attempt.method) %>
                         <span class="inline-flex items-center gap-x-1">
                           <.icon name={icon} class="h-3 w-3" /> {text}
                         </span>
                       </td>
-                      <td class="whitespace-nowrap px-3 py-4 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                      <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
                         {format_location(attempt)}
                       </td>
-                      <td class="whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-mono text-cool-steel-500 dark:text-cool-steel-400 sm:pr-6">
+                      <td class="whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-mono text-gray-500 dark:text-gray-400 sm:pr-6">
                         {attempt.ip_address}
                       </td>
                     </tr>
@@ -1084,7 +1075,7 @@
             </div>
 
             <%= if @login_history_pagination.total_pages > 1 do %>
-              <div class="mt-6 flex items-center justify-between border-t border-cool-steel-200 dark:border-white/10 pt-6">
+              <div class="mt-6 flex items-center justify-between border-t border-gray-200 dark:border-white/10 pt-6">
                 <!-- Mobile: Previous/Next only -->
                 <div class="flex flex-1 justify-between sm:hidden">
                   <.link
@@ -1092,7 +1083,7 @@
                     patch={
                       ~p"/users/settings?tab=#{@active_tab}&page=#{@login_history_pagination.page - 1}"
                     }
-                    class="relative inline-flex items-center rounded-md border border-cool-steel-300 bg-white px-4 py-2 text-sm font-medium text-cool-steel-700 hover:bg-cool-steel-50 dark:border-white/10 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700"
+                    class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
                   >
                     {t("Previous")}
                   </.link>
@@ -1101,7 +1092,7 @@
                     patch={
                       ~p"/users/settings?tab=#{@active_tab}&page=#{@login_history_pagination.page + 1}"
                     }
-                    class="relative ml-3 inline-flex items-center rounded-md border border-cool-steel-300 bg-white px-4 py-2 text-sm font-medium text-cool-steel-700 hover:bg-cool-steel-50 dark:border-white/10 dark:bg-cool-steel-800 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700"
+                    class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-white/10 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
                   >
                     {t("Next")}
                   </.link>
@@ -1110,7 +1101,7 @@
 <!-- Desktop: Full pagination with page numbers -->
                 <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
                   <div>
-                    <p class="text-sm text-cool-steel-700 dark:text-cool-steel-400">
+                    <p class="text-sm text-gray-700 dark:text-gray-400">
                       {t("Showing")}
                       <span class="font-medium">
                         {(@login_history_pagination.page - 1) * @login_history_pagination.per_page +
@@ -1138,7 +1129,7 @@
                         patch={
                           ~p"/users/settings?tab=#{@active_tab}&page=#{@login_history_pagination.page - 1}"
                         }
-                        class="relative inline-flex items-center rounded-l-md px-2 py-2 text-cool-steel-400 ring-1 ring-inset ring-cool-steel-300 hover:bg-cool-steel-50 dark:ring-white/10 dark:hover:bg-cool-steel-800"
+                        class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:ring-white/10 dark:hover:bg-gray-800"
                       >
                         <span class="sr-only">Previous</span>
                         <.icon name="hero-chevron-left" class="h-5 w-5" />
@@ -1146,18 +1137,18 @@
                       <!-- Page numbers with ellipsis -->
                       <%= for page_num <- pagination_range(@login_history_pagination.page, @login_history_pagination.total_pages) do %>
                         <%= if page_num == :ellipsis do %>
-                          <span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-cool-steel-700 ring-1 ring-inset ring-cool-steel-300 dark:text-cool-steel-400 dark:ring-white/10">
+                          <span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 dark:text-gray-400 dark:ring-white/10">
                             ...
                           </span>
                         <% else %>
                           <.link
                             patch={~p"/users/settings?tab=#{@active_tab}&page=#{page_num}"}
                             class={[
-                              "relative inline-flex items-center px-4 py-2 text-sm font-semibold ring-1 ring-inset ring-cool-steel-300 dark:ring-white/10",
+                              "relative inline-flex items-center px-4 py-2 text-sm font-semibold ring-1 ring-inset ring-gray-300 dark:ring-white/10",
                               if @login_history_pagination.page == page_num do
-                                "z-10 bg-cerulean-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cerulean-600"
+                                "z-10 bg-blue-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
                               else
-                                "text-cool-steel-900 hover:bg-cool-steel-50 dark:text-cool-steel-300 dark:hover:bg-cool-steel-800"
+                                "text-gray-900 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-gray-800"
                               end
                             ]}
                           >
@@ -1173,7 +1164,7 @@
                         patch={
                           ~p"/users/settings?tab=#{@active_tab}&page=#{@login_history_pagination.page + 1}"
                         }
-                        class="relative inline-flex items-center rounded-r-md px-2 py-2 text-cool-steel-400 ring-1 ring-inset ring-cool-steel-300 hover:bg-cool-steel-50 dark:ring-white/10 dark:hover:bg-cool-steel-800"
+                        class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:ring-white/10 dark:hover:bg-gray-800"
                       >
                         <span class="sr-only">Next</span>
                         <.icon name="hero-chevron-right" class="h-5 w-5" />
@@ -1193,10 +1184,10 @@
       <!-- Authenticator Apps Section -->
       <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
         <div>
-          <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+          <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
             {t("Authenticator Apps")}
           </h2>
-          <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
             {t(
               "Manage TOTP devices for two-factor authentication. You must have at least one device configured."
             )}
@@ -1205,15 +1196,12 @@
 
         <div class="md:col-span-2">
           <%= if Enum.empty?(@totp_devices) do %>
-            <div class="text-center rounded-lg border border-dashed border-cool-steel-300 px-6 py-10 dark:border-cool-steel-700">
-              <.icon
-                name="hero-device-phone-mobile"
-                class="mx-auto h-12 w-12 text-cool-steel-400"
-              />
-              <h3 class="mt-2 text-sm font-semibold text-cool-steel-900 dark:text-white">
+            <div class="text-center rounded-lg border border-dashed border-gray-300 px-6 py-10 dark:border-gray-700">
+              <.icon name="hero-device-phone-mobile" class="mx-auto h-12 w-12 text-gray-400" />
+              <h3 class="mt-2 text-sm font-semibold text-gray-900 dark:text-white">
                 {t("No authenticator apps")}
               </h3>
-              <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+              <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                 {t("Add your first authenticator app to enable two-factor authentication.")}
               </p>
               <div class="mt-6">
@@ -1221,23 +1209,23 @@
                   id="show-add-device-modal"
                   type="button"
                   phx-click="show_add_device_modal"
-                  class="inline-flex items-center gap-x-1.5 rounded-md bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-cerulean-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cerulean-600 dark:bg-cerulean-500 dark:hover:bg-cerulean-400"
+                  class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
                 >
                   <.icon name="hero-plus" class="-ml-0.5 h-5 w-5" /> Add Device
                 </button>
               </div>
             </div>
           <% else %>
-            <ul role="list" class="divide-y divide-cool-steel-200 dark:divide-white/10">
+            <ul role="list" class="divide-y divide-gray-200 dark:divide-white/10">
               <%= for device <- @totp_devices do %>
                 <li class="flex items-center justify-between gap-x-6 py-5">
                   <div class="min-w-0 flex-1">
                     <div class="flex items-start gap-x-3">
-                      <p class="text-sm/6 font-semibold text-cool-steel-900 dark:text-white">
+                      <p class="text-sm/6 font-semibold text-gray-900 dark:text-white">
                         {device.name}
                       </p>
                     </div>
-                    <div class="mt-1 flex items-center gap-x-2 text-xs/5 text-cool-steel-500 dark:text-cool-steel-400">
+                    <div class="mt-1 flex items-center gap-x-2 text-xs/5 text-gray-500 dark:text-gray-400">
                       <p class="whitespace-nowrap">
                         Added {ToweropsWeb.TimeHelpers.format_date(
                           device.inserted_at,
@@ -1266,9 +1254,9 @@
                     class={
                           "rounded-md px-2.5 py-1.5 text-sm font-semibold shadow-xs inset-ring-1 " <>
                             if length(@totp_devices) == 1 do
-                              "bg-cool-steel-100 text-cool-steel-400 inset-ring-cool-steel-200 cursor-not-allowed dark:bg-cool-steel-800 dark:text-cool-steel-600 dark:inset-ring-cool-steel-700"
+                              "bg-gray-100 text-gray-400 inset-ring-gray-200 cursor-not-allowed dark:bg-gray-800 dark:text-gray-600 dark:inset-ring-gray-700"
                             else
-                              "bg-white text-cool-steel-900 inset-ring-cool-steel-300 hover:bg-cool-steel-100 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/10 dark:hover:bg-white/20"
+                              "bg-white text-gray-900 inset-ring-gray-300 hover:bg-gray-100 dark:bg-white/10 dark:text-white dark:shadow-none dark:inset-ring-white/10 dark:hover:bg-white/20"
                             end
                         }
                   >
@@ -1283,7 +1271,7 @@
                 id="show-add-device-modal-with-devices"
                 type="button"
                 phx-click="show_add_device_modal"
-                class="inline-flex items-center gap-x-1.5 rounded-md bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-cerulean-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cerulean-600 dark:bg-cerulean-500 dark:hover:bg-cerulean-400"
+                class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
               >
                 <.icon name="hero-plus" class="-ml-0.5 h-5 w-5" /> Add Device
               </button>
@@ -1293,32 +1281,32 @@
       </div>
       
 <!-- Recovery Codes Section -->
-      <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8 border-t border-cool-steel-200 dark:border-white/10">
+      <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8 border-t border-gray-200 dark:border-white/10">
         <div>
-          <h2 class="text-base/7 font-semibold text-cool-steel-900 dark:text-white">
+          <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
             {t("Recovery Codes")}
           </h2>
-          <p class="mt-1 text-sm/6 text-cool-steel-500 dark:text-cool-steel-400">
+          <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
             {t("Single-use backup codes for account access if you lose your authenticator app.")}
           </p>
         </div>
 
         <div class="md:col-span-2">
-          <div class="rounded-lg border border-cool-steel-200 bg-white px-6 py-5 dark:border-white/10 dark:bg-white/5">
+          <div class="rounded-lg border border-gray-200 bg-white px-6 py-5 dark:border-white/10 dark:bg-white/5">
             <div class="flex items-center justify-between">
               <div class="flex-1">
-                <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+                <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                   {t("Available Recovery Codes")}
                 </h3>
-                <p class="mt-1 text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                   <%= if @unused_recovery_codes_count == 0 do %>
-                    <span class="text-sweet-salmon-600 dark:text-sweet-salmon-400 font-medium">
+                    <span class="text-red-600 dark:text-red-400 font-medium">
                       {t("No recovery codes available")}
                     </span>
                     - Generate new codes immediately
                   <% else %>
                     {t("You have")}
-                    <span class="font-medium text-cool-steel-900 dark:text-white">
+                    <span class="font-medium text-gray-900 dark:text-white">
                       {@unused_recovery_codes_count}
                     </span>
                     unused recovery code{if @unused_recovery_codes_count != 1, do: "s"}
@@ -1332,7 +1320,7 @@
                   data-confirm={
                     t("This will invalidate all existing unused recovery codes. Continue?")
                   }
-                  class="inline-flex items-center gap-x-1.5 rounded-md bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-cerulean-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cerulean-600 dark:bg-cerulean-500 dark:hover:bg-cerulean-400"
+                  class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 dark:bg-indigo-500 dark:hover:bg-indigo-400"
                 >
                   <.icon name="hero-arrow-path" class="-ml-0.5 h-5 w-5" /> Regenerate
                 </button>
@@ -1341,16 +1329,16 @@
           </div>
 
           <%= if @unused_recovery_codes_count == 0 do %>
-            <div class="mt-4 rounded-lg bg-wheat-50 p-4 dark:bg-wheat-900/20">
+            <div class="mt-4 rounded-lg bg-amber-50 p-4 dark:bg-amber-900/20">
               <div class="flex">
                 <div class="flex-shrink-0">
-                  <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-wheat-400" />
+                  <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-amber-400" />
                 </div>
                 <div class="ml-3">
-                  <h3 class="text-sm font-medium text-wheat-800 dark:text-wheat-200">
+                  <h3 class="text-sm font-medium text-amber-800 dark:text-amber-200">
                     {t("No Recovery Codes")}
                   </h3>
-                  <div class="mt-2 text-sm text-wheat-700 dark:text-wheat-300">
+                  <div class="mt-2 text-sm text-amber-700 dark:text-amber-300">
                     <p>
                       {t(
                         "You have no recovery codes available. If you lose access to your authenticator app,"
@@ -1377,7 +1365,7 @@
       <div class="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
         <div
           phx-click="cancel_revoke_all"
-          class="fixed inset-0 z-0 bg-cool-steel-500 bg-opacity-75 transition-opacity dark:bg-cool-steel-950 dark:bg-opacity-75"
+          class="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-950 dark:bg-opacity-75"
           aria-hidden="true"
         >
         </div>
@@ -1388,23 +1376,23 @@
           &#8203;
         </span>
 
-        <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-cool-steel-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
+        <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-gray-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
           <div>
-            <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-sweet-salmon-100 dark:bg-sweet-salmon-900">
+            <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-900">
               <.icon
                 name="hero-exclamation-triangle"
-                class="h-6 w-6 text-sweet-salmon-600 dark:text-sweet-salmon-400"
+                class="h-6 w-6 text-red-600 dark:text-red-400"
               />
             </div>
             <div class="mt-3 text-center sm:mt-5">
               <h3
-                class="text-lg font-semibold leading-6 text-cool-steel-900 dark:text-white"
+                class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"
                 id="revoke-all-modal-title"
               >
                 {t("Revoke All Other Sessions?")}
               </h3>
               <div class="mt-2">
-                <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                <p class="text-sm text-gray-500 dark:text-gray-400">
                   {t(
                     "This will log you out from all other browsers and devices. Your current session will remain active."
                   )}
@@ -1416,14 +1404,14 @@
             <button
               type="button"
               phx-click="confirm_revoke_all"
-              class="inline-flex w-full justify-center rounded-lg bg-sweet-salmon-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-sweet-salmon-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sweet-salmon-600 sm:col-start-2"
+              class="inline-flex w-full justify-center rounded-lg bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 sm:col-start-2"
             >
               {t("Revoke All")}
             </button>
             <button
               type="button"
               phx-click="cancel_revoke_all"
-              class="mt-3 inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-cool-steel-900 shadow-sm ring-1 ring-inset ring-cool-steel-300 hover:bg-cool-steel-50 dark:bg-cool-steel-800/50 dark:text-white dark:ring-white/10 dark:hover:bg-cool-steel-800 sm:col-start-1 sm:mt-0"
+              class="mt-3 inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:hover:bg-gray-800 sm:col-start-1 sm:mt-0"
             >
               {t("Cancel")}
             </button>
@@ -1444,7 +1432,7 @@
       <div class="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
         <div
           phx-click="cancel_add_token"
-          class="fixed inset-0 z-0 bg-cool-steel-500 bg-opacity-75 transition-opacity dark:bg-cool-steel-950 dark:bg-opacity-75"
+          class="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-950 dark:bg-opacity-75"
           aria-hidden="true"
         >
         </div>
@@ -1455,24 +1443,21 @@
           &#8203;
         </span>
 
-        <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-cool-steel-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
+        <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-gray-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
           <.form id="create-api-token-form" for={%{}} as={:token} phx-submit="create_api_token">
             <div>
-              <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-cerulean-100 dark:bg-cerulean-900">
-                <.icon
-                  name="hero-code-bracket"
-                  class="h-6 w-6 text-cerulean-600 dark:text-cerulean-400"
-                />
+              <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900">
+                <.icon name="hero-code-bracket" class="h-6 w-6 text-blue-600 dark:text-blue-400" />
               </div>
               <div class="mt-3 text-center sm:mt-5">
                 <h3
-                  class="text-lg font-semibold leading-6 text-cool-steel-900 dark:text-white"
+                  class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"
                   id="create-api-token-modal-title"
                 >
                   {t("Create API Token")}
                 </h3>
                 <div class="mt-2">
-                  <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                  <p class="text-sm text-gray-500 dark:text-gray-400">
                     {t(
                       "Give this token a name and select the organization it will have access to."
                     )}
@@ -1484,13 +1469,13 @@
                     name="name"
                     placeholder="e.g., Production API"
                     required
-                    class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-cool-steel-900 outline-1 -outline-offset-1 outline-cool-steel-300 placeholder:text-cool-steel-400 focus:outline-2 focus:-outline-offset-2 focus:outline-cerulean-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-cool-steel-500 dark:focus:outline-cerulean-500"
+                    class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
                   />
                   <div class="grid grid-cols-1">
                     <select
                       name="organization_id"
                       required
-                      class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-cool-steel-900 outline-1 -outline-offset-1 outline-cool-steel-300 placeholder:text-cool-steel-400 focus:outline-2 focus:-outline-offset-2 focus:outline-cerulean-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-cool-steel-800 dark:focus:outline-cerulean-500"
+                      class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:*:bg-gray-800 dark:focus:outline-indigo-500"
                     >
                       <%= for org <- @organizations do %>
                         <option value={org.id}>{org.name}</option>
@@ -1501,7 +1486,7 @@
                       fill="currentColor"
                       data-slot="icon"
                       aria-hidden="true"
-                      class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-cool-steel-400 sm:size-4"
+                      class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-400 sm:size-4"
                     >
                       <path
                         d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
@@ -1516,7 +1501,7 @@
             <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
               <button
                 type="submit"
-                class="inline-flex w-full justify-center rounded-lg bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-cerulean-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cerulean-600 disabled:opacity-50 disabled:cursor-not-allowed sm:col-start-2"
+                class="inline-flex w-full justify-center rounded-lg bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:opacity-50 disabled:cursor-not-allowed sm:col-start-2"
               >
                 {t("Create Token")}
               </button>
@@ -1524,7 +1509,7 @@
                 id="cancel-add-token"
                 type="button"
                 phx-click="cancel_add_token"
-                class="mt-3 inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-cool-steel-900 shadow-sm ring-1 ring-inset ring-cool-steel-300 hover:bg-cool-steel-50 dark:bg-cool-steel-800/50 dark:text-white dark:ring-white/10 dark:hover:bg-cool-steel-800 sm:col-start-1 sm:mt-0"
+                class="mt-3 inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:hover:bg-gray-800 sm:col-start-1 sm:mt-0"
               >
                 {t("Cancel")}
               </button>
@@ -1547,7 +1532,7 @@
       <div class="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
         <div
           phx-click="close_token_modal"
-          class="fixed inset-0 z-0 bg-cool-steel-500 bg-opacity-75 transition-opacity dark:bg-cool-steel-950 dark:bg-opacity-75"
+          class="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-950 dark:bg-opacity-75"
           aria-hidden="true"
         >
         </div>
@@ -1558,7 +1543,7 @@
           &#8203;
         </span>
 
-        <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-cool-steel-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
+        <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-gray-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
           <div>
             <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
               <.icon name="hero-check" class="h-6 w-6 text-green-600 dark:text-green-400" />
@@ -1566,12 +1551,12 @@
             <div class="mt-3 text-center sm:mt-5">
               <h3
                 id="token-success-modal-title"
-                class="text-lg font-semibold leading-6 text-cool-steel-900 dark:text-white"
+                class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"
               >
                 {t("API Token Created")}
               </h3>
               <div class="mt-2">
-                <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                <p class="text-sm text-gray-500 dark:text-gray-400">
                   {t("Copy this token now. You won't be able to see it again.")}
                 </p>
               </div>
@@ -1581,7 +1566,7 @@
                     type="text"
                     readonly
                     value={String.trim(@created_token)}
-                    class="w-full font-mono text-sm bg-cool-steel-50 dark:bg-cool-steel-800 border border-cool-steel-300 dark:border-cool-steel-700 rounded px-3 py-2 pr-28 text-cool-steel-900 dark:text-white select-all"
+                    class="w-full font-mono text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded px-3 py-2 pr-28 text-gray-900 dark:text-white select-all"
                     id="api-token-input"
                     onclick="this.select()"
                   />
@@ -1591,13 +1576,13 @@
                     phx-update="ignore"
                     data-target="#api-token-input"
                     id="copy-api-token"
-                    class="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1.5 text-xs font-medium text-white bg-cerulean-600 hover:bg-cerulean-700 dark:bg-cerulean-500 dark:hover:bg-cerulean-600 rounded shadow-sm transition-colors flex items-center gap-1.5"
+                    class="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1.5 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 rounded shadow-sm transition-colors flex items-center gap-1.5"
                   >
                     <.icon name="hero-clipboard" class="h-3.5 w-3.5" />
                     <span>{t("Copy")}</span>
                   </button>
                 </div>
-                <p class="mt-1.5 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                <p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">
                   {t("Click the token to select all, or use the Copy button")}
                 </p>
               </div>
@@ -1607,7 +1592,7 @@
             <button
               type="button"
               phx-click="close_token_modal"
-              class="inline-flex w-full justify-center rounded-lg bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-cerulean-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cerulean-600"
+              class="inline-flex w-full justify-center rounded-lg bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
             >
               {t("Done")}
             </button>
@@ -1628,7 +1613,7 @@
       <div class="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
         <div
           phx-click="cancel_add_device"
-          class="fixed inset-0 z-0 bg-cool-steel-500 bg-opacity-75 transition-opacity dark:bg-cool-steel-950 dark:bg-opacity-75"
+          class="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-950 dark:bg-opacity-75"
           aria-hidden="true"
         >
         </div>
@@ -1639,24 +1624,24 @@
           &#8203;
         </span>
 
-        <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-cool-steel-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
+        <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-gray-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
           <.form for={%{}} as={:device} phx-submit="create_device">
             <div>
-              <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-cerulean-100 dark:bg-cerulean-900">
+              <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-900">
                 <.icon
                   name="hero-device-phone-mobile"
-                  class="h-6 w-6 text-cerulean-600 dark:text-cerulean-400"
+                  class="h-6 w-6 text-indigo-600 dark:text-indigo-400"
                 />
               </div>
               <div class="mt-3 text-center sm:mt-5">
                 <h3
-                  class="text-lg font-semibold leading-6 text-cool-steel-900 dark:text-white"
+                  class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"
                   id="add-device-modal-title"
                 >
                   {t("Add Authenticator Device")}
                 </h3>
                 <div class="mt-2">
-                  <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                  <p class="text-sm text-gray-500 dark:text-gray-400">
                     Give this device a name to help you identify it (e.g., "iPhone 15", "iPad Pro").
                   </p>
                 </div>
@@ -1667,7 +1652,7 @@
                     placeholder="e.g., iPhone 15"
                     required
                     autofocus
-                    class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-cool-steel-900 outline-1 -outline-offset-1 outline-cool-steel-300 placeholder:text-cool-steel-400 focus:outline-2 focus:-outline-offset-2 focus:outline-cerulean-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-cool-steel-500 dark:focus:outline-cerulean-500"
+                    class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
                   />
                 </div>
               </div>
@@ -1675,7 +1660,7 @@
             <div class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
               <button
                 type="submit"
-                class="inline-flex w-full justify-center rounded-lg bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-cerulean-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cerulean-600 sm:col-start-2"
+                class="inline-flex w-full justify-center rounded-lg bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
               >
                 {t("Continue")}
               </button>
@@ -1683,7 +1668,7 @@
                 id="cancel-add-device"
                 type="button"
                 phx-click="cancel_add_device"
-                class="mt-3 inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-cool-steel-900 shadow-sm ring-1 ring-inset ring-cool-steel-300 hover:bg-cool-steel-50 dark:bg-cool-steel-800/50 dark:text-white dark:ring-white/10 dark:hover:bg-cool-steel-800 sm:col-start-1 sm:mt-0"
+                class="mt-3 inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:hover:bg-gray-800 sm:col-start-1 sm:mt-0"
               >
                 {t("Cancel")}
               </button>
@@ -1705,7 +1690,7 @@
       <div class="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
         <div
           phx-click="close_device_qr_modal"
-          class="fixed inset-0 z-0 bg-cool-steel-500 bg-opacity-75 transition-opacity dark:bg-cool-steel-950 dark:bg-opacity-75"
+          class="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-950 dark:bg-opacity-75"
           aria-hidden="true"
         >
         </div>
@@ -1716,14 +1701,14 @@
           &#8203;
         </span>
 
-        <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-cool-steel-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
+        <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-gray-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
           <div>
-            <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-cerulean-100 dark:bg-cerulean-900">
-              <.icon name="hero-qr-code" class="h-6 w-6 text-cerulean-600 dark:text-cerulean-400" />
+            <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-900">
+              <.icon name="hero-qr-code" class="h-6 w-6 text-indigo-600 dark:text-indigo-400" />
             </div>
             <div class="mt-3 text-center sm:mt-5">
               <h3
-                class="text-lg font-semibold leading-6 text-cool-steel-900 dark:text-white"
+                class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"
                 id="device-qr-modal-title"
               >
                 {t("Scan QR Code")}
@@ -1731,28 +1716,28 @@
               <div class="mt-4 text-left">
                 <div class="space-y-3">
                   <div class="flex items-start gap-3">
-                    <span class="flex-shrink-0 flex h-6 w-6 items-center justify-center rounded-full bg-cerulean-100 text-xs font-bold text-cerulean-600 dark:bg-cerulean-900 dark:text-cerulean-400">
+                    <span class="flex-shrink-0 flex h-6 w-6 items-center justify-center rounded-full bg-indigo-100 text-xs font-bold text-indigo-600 dark:bg-indigo-900 dark:text-indigo-400">
                       1
                     </span>
-                    <p class="text-sm text-cool-steel-600 dark:text-cool-steel-300">
+                    <p class="text-sm text-gray-600 dark:text-gray-300">
                       {t(
                         "Install an authenticator app (Google Authenticator, Authy, 1Password, etc.)"
                       )}
                     </p>
                   </div>
                   <div class="flex items-start gap-3">
-                    <span class="flex-shrink-0 flex h-6 w-6 items-center justify-center rounded-full bg-cerulean-100 text-xs font-bold text-cerulean-600 dark:bg-cerulean-900 dark:text-cerulean-400">
+                    <span class="flex-shrink-0 flex h-6 w-6 items-center justify-center rounded-full bg-indigo-100 text-xs font-bold text-indigo-600 dark:bg-indigo-900 dark:text-indigo-400">
                       2
                     </span>
-                    <p class="text-sm text-cool-steel-600 dark:text-cool-steel-300">
+                    <p class="text-sm text-gray-600 dark:text-gray-300">
                       {t("Scan the QR code below with your authenticator app")}
                     </p>
                   </div>
                   <div class="flex items-start gap-3">
-                    <span class="flex-shrink-0 flex h-6 w-6 items-center justify-center rounded-full bg-cerulean-100 text-xs font-bold text-cerulean-600 dark:bg-cerulean-900 dark:text-cerulean-400">
+                    <span class="flex-shrink-0 flex h-6 w-6 items-center justify-center rounded-full bg-indigo-100 text-xs font-bold text-indigo-600 dark:bg-indigo-900 dark:text-indigo-400">
                       3
                     </span>
-                    <p class="text-sm text-cool-steel-600 dark:text-cool-steel-300">
+                    <p class="text-sm text-gray-600 dark:text-gray-300">
                       {t("Enter the 6-digit code from your app to verify setup")}
                     </p>
                   </div>
@@ -1768,7 +1753,7 @@
               
 <!-- Verification Code Input -->
               <div class="mt-6">
-                <p class="mb-2 text-sm font-medium text-cool-steel-900 dark:text-white">
+                <p class="mb-2 text-sm font-medium text-gray-900 dark:text-white">
                   {t("Enter the 6-digit code from your app to verify")}
                 </p>
                 <.form for={%{}} as={:verification} phx-submit="verify_new_device">
@@ -1783,11 +1768,11 @@
                       autocomplete="one-time-code"
                       required
                       autofocus
-                      class="block w-32 rounded-md bg-white px-3 py-2 text-center text-lg font-mono text-cool-steel-900 outline-1 -outline-offset-1 outline-cool-steel-300 placeholder:text-cool-steel-400 focus:outline-2 focus:-outline-offset-2 focus:outline-cerulean-600 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-cool-steel-500 dark:focus:outline-cerulean-500"
+                      class="block w-32 rounded-md bg-white px-3 py-2 text-center text-lg font-mono text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-indigo-500"
                     />
                     <button
                       type="submit"
-                      class="inline-flex items-center gap-x-1.5 rounded-md bg-cerulean-600 px-4 py-2 text-sm font-semibold text-white shadow-xs hover:bg-cerulean-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cerulean-600"
+                      class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                     >
                       {t("Verify")}
                     </button>
@@ -1800,7 +1785,7 @@
             <button
               type="button"
               phx-click="close_device_qr_modal"
-              class="inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-cool-steel-900 shadow-sm ring-1 ring-inset ring-cool-steel-300 hover:bg-cool-steel-50 dark:bg-cool-steel-800/50 dark:text-white dark:ring-white/10 dark:hover:bg-cool-steel-800"
+              class="inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:hover:bg-gray-800"
             >
               {t("Cancel")}
             </button>
@@ -1820,7 +1805,7 @@
     >
       <div class="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
         <div
-          class="fixed inset-0 z-0 bg-cool-steel-500 bg-opacity-75 transition-opacity dark:bg-cool-steel-950 dark:bg-opacity-75"
+          class="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-950 dark:bg-opacity-75"
           aria-hidden="true"
         >
         </div>
@@ -1831,30 +1816,30 @@
           &#8203;
         </span>
 
-        <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-cool-steel-800/95 sm:my-8 sm:w-full sm:max-w-2xl sm:p-6 sm:align-middle">
+        <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-gray-800/95 sm:my-8 sm:w-full sm:max-w-2xl sm:p-6 sm:align-middle">
           <div>
             <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900">
               <.icon name="hero-shield-check" class="h-6 w-6 text-green-600 dark:text-green-400" />
             </div>
             <div class="mt-3 text-center sm:mt-5">
               <h3
-                class="text-lg font-semibold leading-6 text-cool-steel-900 dark:text-white"
+                class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"
                 id="recovery-codes-modal-title"
               >
                 {t("Recovery Codes Generated")}
               </h3>
               <div class="mt-2">
-                <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                <p class="text-sm text-gray-500 dark:text-gray-400">
                   {t("Save these codes in a secure location. Each code can only be used once.")}
                 </p>
               </div>
               
 <!-- Recovery Codes Grid -->
               <div class="mt-6">
-                <div class="rounded-lg bg-cool-steel-50 p-6 dark:bg-cool-steel-900/50">
+                <div class="rounded-lg bg-gray-50 p-6 dark:bg-gray-900/50">
                   <div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
                     <%= for code <- @generated_recovery_codes do %>
-                      <div class="rounded-md bg-white px-3 py-2 font-mono text-sm text-cool-steel-900 shadow-xs dark:bg-cool-steel-800 dark:text-white">
+                      <div class="rounded-md bg-white px-3 py-2 font-mono text-sm text-gray-900 shadow-xs dark:bg-gray-800 dark:text-white">
                         {code}
                       </div>
                     <% end %>
@@ -1870,7 +1855,7 @@
                   phx-update="ignore"
                   data-target="#recovery-codes-text"
                   id="copy-recovery-codes"
-                  class="inline-flex items-center gap-x-1.5 rounded-md bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-cerulean-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cerulean-600"
+                  class="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                 >
                   <.icon name="hero-clipboard" class="-ml-0.5 h-5 w-5" /> Copy All
                 </button>
@@ -1884,16 +1869,16 @@
               >{Enum.join(@generated_recovery_codes, "\n")}</textarea>
               
 <!-- Warning -->
-              <div class="mt-6 rounded-lg bg-wheat-50 p-4 dark:bg-wheat-900/20">
+              <div class="mt-6 rounded-lg bg-amber-50 p-4 dark:bg-amber-900/20">
                 <div class="flex">
                   <div class="flex-shrink-0">
-                    <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-wheat-400" />
+                    <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-amber-400" />
                   </div>
                   <div class="ml-3">
-                    <h3 class="text-sm font-medium text-wheat-800 dark:text-wheat-200">
+                    <h3 class="text-sm font-medium text-amber-800 dark:text-amber-200">
                       {t("Important")}
                     </h3>
-                    <div class="mt-2 text-sm text-wheat-700 dark:text-wheat-300">
+                    <div class="mt-2 text-sm text-amber-700 dark:text-amber-300">
                       <p>
                         {t(
                           "These codes won't be shown again. Store them securely (password manager, encrypted file, etc.)."
@@ -1912,7 +1897,7 @@
             <button
               type="button"
               phx-click="close_recovery_codes_modal"
-              class="inline-flex w-full justify-center rounded-lg bg-cerulean-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-cerulean-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cerulean-600"
+              class="inline-flex w-full justify-center rounded-lg bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
             >
               {t("I've Saved These Codes")}
             </button>
@@ -1933,7 +1918,7 @@
       <div class="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
         <div
           phx-click="close_delete_modal"
-          class="fixed inset-0 z-0 bg-cool-steel-500 bg-opacity-75 transition-opacity dark:bg-cool-steel-950 dark:bg-opacity-75"
+          class="fixed inset-0 z-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-950 dark:bg-opacity-75"
           aria-hidden="true"
         >
         </div>
@@ -1944,23 +1929,23 @@
           &#8203;
         </span>
 
-        <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-cool-steel-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
+        <div class="relative z-10 inline-block transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left align-bottom shadow-xl transition-all dark:bg-gray-800/95 sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
           <div>
-            <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-sweet-salmon-100 dark:bg-sweet-salmon-900">
+            <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-900">
               <.icon
                 name="hero-exclamation-triangle"
-                class="h-6 w-6 text-sweet-salmon-600 dark:text-sweet-salmon-400"
+                class="h-6 w-6 text-red-600 dark:text-red-400"
               />
             </div>
             <div class="mt-3 text-center sm:mt-5">
               <h3
-                class="text-lg font-semibold leading-6 text-cool-steel-900 dark:text-white"
+                class="text-lg font-semibold leading-6 text-gray-900 dark:text-white"
                 id="delete-account-modal-title"
               >
                 {t("Are you sure you want to delete your account?")}
               </h3>
               <div class="mt-2">
-                <p class="text-sm text-cool-steel-500 dark:text-cool-steel-400">
+                <p class="text-sm text-gray-500 dark:text-gray-400">
                   {t(
                     "This action cannot be undone. All of your data will be permanently removed."
                   )}
@@ -1970,16 +1955,16 @@
           </div>
 
           <%= if @sole_owner_orgs != [] do %>
-            <div class="mt-4 rounded-md bg-wheat-50 p-4 dark:bg-wheat-900/20">
+            <div class="mt-4 rounded-md bg-yellow-50 p-4 dark:bg-yellow-900/20">
               <div class="flex">
                 <div class="flex-shrink-0">
-                  <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-wheat-400" />
+                  <.icon name="hero-exclamation-triangle" class="h-5 w-5 text-yellow-400" />
                 </div>
                 <div class="ml-3">
-                  <h3 class="text-sm font-medium text-wheat-800 dark:text-wheat-200">
+                  <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
                     {t("You are the sole owner of these organizations:")}
                   </h3>
-                  <div class="mt-2 text-sm text-wheat-700 dark:text-wheat-300">
+                  <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
                     <ul class="list-disc space-y-1 pl-5">
                       <%= for org <- @sole_owner_orgs do %>
                         <li>{org.name}</li>
@@ -1999,7 +1984,7 @@
               <button
                 type="button"
                 phx-click="close_delete_modal"
-                class="inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-cool-steel-900 shadow-sm ring-1 ring-inset ring-cool-steel-300 hover:bg-cool-steel-50 dark:bg-cool-steel-800/50 dark:text-white dark:ring-white/10 dark:hover:bg-cool-steel-800"
+                class="inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:hover:bg-gray-800"
               >
                 {t("Close")}
               </button>
@@ -2015,7 +2000,7 @@
                 <div>
                   <label
                     for="delete-password"
-                    class="block text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300"
+                    class="block text-sm font-medium text-gray-700 dark:text-gray-300"
                   >
                     {t("Enter your password")}
                   </label>
@@ -2026,14 +2011,14 @@
                       id="delete-password"
                       required
                       autocomplete="current-password"
-                      class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-cool-steel-900 outline-1 -outline-offset-1 outline-cool-steel-300 placeholder:text-cool-steel-400 focus:outline-2 focus:-outline-offset-2 focus:outline-sweet-salmon-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-cool-steel-500 dark:focus:outline-sweet-salmon-500"
+                      class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-red-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-red-500"
                     />
                   </div>
                 </div>
                 <div>
                   <label
                     for="delete-confirmation"
-                    class="block text-sm font-medium text-cool-steel-700 dark:text-cool-steel-300"
+                    class="block text-sm font-medium text-gray-700 dark:text-gray-300"
                   >
                     {t("Type DELETE to confirm")}
                   </label>
@@ -2045,7 +2030,7 @@
                       required
                       placeholder="DELETE"
                       autocomplete="off"
-                      class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-cool-steel-900 outline-1 -outline-offset-1 outline-cool-steel-300 placeholder:text-cool-steel-400 focus:outline-2 focus:-outline-offset-2 focus:outline-sweet-salmon-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-cool-steel-500 dark:focus:outline-sweet-salmon-500"
+                      class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-red-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:placeholder:text-gray-500 dark:focus:outline-red-500"
                     />
                   </div>
                 </div>
@@ -2055,14 +2040,14 @@
                 <button
                   type="submit"
                   phx-disable-with={t("Deleting...")}
-                  class="inline-flex w-full justify-center rounded-lg bg-sweet-salmon-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-sweet-salmon-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sweet-salmon-600 sm:col-start-2"
+                  class="inline-flex w-full justify-center rounded-lg bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600 sm:col-start-2"
                 >
                   {t("Permanently Delete Account")}
                 </button>
                 <button
                   type="button"
                   phx-click="close_delete_modal"
-                  class="mt-3 inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-cool-steel-900 shadow-sm ring-1 ring-inset ring-cool-steel-300 hover:bg-cool-steel-50 dark:bg-cool-steel-800/50 dark:text-white dark:ring-white/10 dark:hover:bg-cool-steel-800 sm:col-start-1 sm:mt-0"
+                  class="mt-3 inline-flex w-full justify-center rounded-lg bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:bg-gray-800/50 dark:text-white dark:ring-white/10 dark:hover:bg-gray-800 sm:col-start-1 sm:mt-0"
                 >
                   {t("Cancel")}
                 </button>
diff --git a/lib/towerops_web/live/weathermap_live.html.heex b/lib/towerops_web/live/weathermap_live.html.heex
index fe2f0a94..49c46bd3 100644
--- a/lib/towerops_web/live/weathermap_live.html.heex
+++ b/lib/towerops_web/live/weathermap_live.html.heex
@@ -1,6 +1,6 @@
 <div class={[
   "h-screen flex flex-col",
-  if(@fullscreen, do: "fixed inset-0 z-50 bg-white dark:bg-cool-steel-900")
+  if(@fullscreen, do: "fixed inset-0 z-50 bg-white dark:bg-gray-900")
 ]}>
   <%= if not @fullscreen do %>
     <Layouts.authenticated
@@ -20,7 +20,7 @@
         <:subtitle>{t("Real-time network utilization visualization")}</:subtitle>
         <:actions>
           <div class="flex items-center gap-3">
-            <div class="flex items-center gap-1.5 text-xs text-cool-steel-400 dark:text-cool-steel-500 font-mono">
+            <div class="flex items-center gap-1.5 text-xs text-gray-400 dark:text-gray-500 font-mono">
               <span class="relative flex h-2 w-2">
                 <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75">
                 </span>
@@ -30,7 +30,7 @@
             </div>
             <button
               phx-click="toggle_fullscreen"
-              class="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-cool-steel-700 bg-white border border-cool-steel-300 rounded-md hover:bg-cool-steel-50 dark:bg-cool-steel-800 dark:border-cool-steel-600 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700"
+              class="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
             >
               <.icon name="hero-arrows-pointing-out" class="h-4 w-4" />
               {t("Fullscreen")}
@@ -41,18 +41,16 @@
     </Layouts.authenticated>
   <% else %>
     <!-- Fullscreen header -->
-    <div class="flex items-center justify-between p-4 border-b border-cool-steel-200 dark:border-white/10 bg-white dark:bg-cool-steel-900">
+    <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-white/10 bg-white dark:bg-gray-900">
       <div class="flex items-center gap-3">
         <.icon name="hero-signal" class="h-6 w-6 text-green-600" />
-        <h1 class="text-xl font-semibold text-cool-steel-900 dark:text-white">
-          Network Weathermap
-        </h1>
+        <h1 class="text-xl font-semibold text-gray-900 dark:text-white">Network Weathermap</h1>
         <span class="inline-flex items-center rounded-full bg-green-50 px-2 py-0.5 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-700/10 dark:bg-green-400/10 dark:text-green-400 dark:ring-green-400/30">
           Live
         </span>
       </div>
       <div class="flex items-center gap-3">
-        <div class="flex items-center gap-1.5 text-xs text-cool-steel-400 dark:text-cool-steel-500 font-mono">
+        <div class="flex items-center gap-1.5 text-xs text-gray-400 dark:text-gray-500 font-mono">
           <span class="relative flex h-2 w-2">
             <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75">
             </span>
@@ -62,7 +60,7 @@
         </div>
         <button
           phx-click="toggle_fullscreen"
-          class="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-cool-steel-700 bg-white border border-cool-steel-300 rounded-md hover:bg-cool-steel-50 dark:bg-cool-steel-800 dark:border-cool-steel-600 dark:text-cool-steel-300 dark:hover:bg-cool-steel-700"
+          class="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
         >
           <.icon name="hero-arrows-pointing-in" class="h-4 w-4" />
           {t("Exit Fullscreen")}
@@ -72,16 +70,16 @@
   <% end %>
   
 <!-- Tab Navigation -->
-  <div class="border-b border-cool-steel-200 dark:border-white/10 px-4 bg-white dark:bg-cool-steel-900">
+  <div class="border-b border-gray-200 dark:border-white/10 px-4 bg-white dark:bg-gray-900">
     <nav class="-mb-px flex space-x-8">
       <.link
         patch={~p"/weathermap?tab=added#{if(@fullscreen, do: "&fullscreen=true", else: "")}"}
         class={[
           "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
           if @active_tab == "added" do
-            "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400"
+            "border-blue-500 text-blue-600 dark:text-blue-400"
           else
-            "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300"
+            "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
           end
         ]}
       >
@@ -93,14 +91,14 @@
         class={[
           "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
           if @active_tab == "all" do
-            "border-cerulean-500 text-cerulean-600 dark:text-cerulean-400"
+            "border-blue-500 text-blue-600 dark:text-blue-400"
           else
-            "border-transparent text-cool-steel-500 hover:text-cool-steel-700 hover:border-cool-steel-300 dark:text-cool-steel-400 dark:hover:text-cool-steel-300"
+            "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300"
           end
         ]}
       >
         {t("All Devices")}
-        <span class="ml-2 inline-flex items-center rounded-full bg-cool-steel-100 px-2 py-0.5 text-xs font-medium text-cool-steel-700 dark:bg-cool-steel-700 dark:text-cool-steel-300">
+        <span class="ml-2 inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700 dark:bg-gray-700 dark:text-gray-300">
           {@topology.stats.discovered_devices}
         </span>
       </.link>
@@ -108,29 +106,27 @@
   </div>
 
   <%= if @loading do %>
-    <div class="flex-1 flex items-center justify-center bg-white dark:bg-cool-steel-900">
+    <div class="flex-1 flex items-center justify-center bg-white dark:bg-gray-900">
       <div class="text-center">
-        <.icon name="hero-arrow-path" class="h-12 w-12 text-cool-steel-400 animate-spin mx-auto" />
-        <p class="mt-4 text-sm text-cool-steel-600 dark:text-cool-steel-400">
-          Loading network weathermap...
-        </p>
+        <.icon name="hero-arrow-path" class="h-12 w-12 text-gray-400 animate-spin mx-auto" />
+        <p class="mt-4 text-sm text-gray-600 dark:text-gray-400">Loading network weathermap...</p>
       </div>
     </div>
   <% else %>
     <!-- Stats Bar -->
-    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-6 p-4 bg-cool-steel-50 dark:bg-cool-steel-800/50">
-      <div class="bg-white dark:bg-cool-steel-800 overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10">
+    <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-6 p-4 bg-gray-50 dark:bg-gray-800/50">
+      <div class="bg-white dark:bg-gray-800 overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
         <div class="p-4">
           <div class="flex items-center">
             <div class="flex-shrink-0">
-              <.icon name="hero-server" class="h-5 w-5 text-cool-steel-400" />
+              <.icon name="hero-server" class="h-5 w-5 text-gray-400" />
             </div>
             <div class="ml-3 w-0 flex-1">
               <dl>
-                <dt class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 truncate">
+                <dt class="text-xs font-medium text-gray-500 dark:text-gray-400 truncate">
                   {t("Devices")}
                 </dt>
-                <dd class="text-lg font-medium text-cool-steel-900 dark:text-white">
+                <dd class="text-lg font-medium text-gray-900 dark:text-white">
                   {@topology.stats.total_devices}
                 </dd>
               </dl>
@@ -139,18 +135,18 @@
         </div>
       </div>
 
-      <div class="bg-white dark:bg-cool-steel-800 overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10">
+      <div class="bg-white dark:bg-gray-800 overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
         <div class="p-4">
           <div class="flex items-center">
             <div class="flex-shrink-0">
-              <.icon name="hero-link" class="h-5 w-5 text-cerulean-400" />
+              <.icon name="hero-link" class="h-5 w-5 text-blue-400" />
             </div>
             <div class="ml-3 w-0 flex-1">
               <dl>
-                <dt class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 truncate">
+                <dt class="text-xs font-medium text-gray-500 dark:text-gray-400 truncate">
                   {t("Links")}
                 </dt>
-                <dd class="text-lg font-medium text-cool-steel-900 dark:text-white">
+                <dd class="text-lg font-medium text-gray-900 dark:text-white">
                   {@topology.stats.total_links}
                 </dd>
               </dl>
@@ -159,7 +155,7 @@
         </div>
       </div>
 
-      <div class="bg-white dark:bg-cool-steel-800 overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10">
+      <div class="bg-white dark:bg-gray-800 overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
         <div class="p-4">
           <div class="flex items-center">
             <div class="flex-shrink-0">
@@ -167,10 +163,10 @@
             </div>
             <div class="ml-3 w-0 flex-1">
               <dl>
-                <dt class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 truncate">
+                <dt class="text-xs font-medium text-gray-500 dark:text-gray-400 truncate">
                   {t("Low (0-30%)")}
                 </dt>
-                <dd class="text-lg font-medium text-cool-steel-900 dark:text-white">
+                <dd class="text-lg font-medium text-gray-900 dark:text-white">
                   {@topology.stats.low_utilization_links || 0}
                 </dd>
               </dl>
@@ -179,18 +175,18 @@
         </div>
       </div>
 
-      <div class="bg-white dark:bg-cool-steel-800 overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10">
+      <div class="bg-white dark:bg-gray-800 overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
         <div class="p-4">
           <div class="flex items-center">
             <div class="flex-shrink-0">
-              <div class="w-5 h-5 rounded bg-wheat-400"></div>
+              <div class="w-5 h-5 rounded bg-yellow-400"></div>
             </div>
             <div class="ml-3 w-0 flex-1">
               <dl>
-                <dt class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 truncate">
+                <dt class="text-xs font-medium text-gray-500 dark:text-gray-400 truncate">
                   {t("Medium (30-60%)")}
                 </dt>
-                <dd class="text-lg font-medium text-cool-steel-900 dark:text-white">
+                <dd class="text-lg font-medium text-gray-900 dark:text-white">
                   {@topology.stats.medium_utilization_links || 0}
                 </dd>
               </dl>
@@ -199,7 +195,7 @@
         </div>
       </div>
 
-      <div class="bg-white dark:bg-cool-steel-800 overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10">
+      <div class="bg-white dark:bg-gray-800 overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
         <div class="p-4">
           <div class="flex items-center">
             <div class="flex-shrink-0">
@@ -207,10 +203,10 @@
             </div>
             <div class="ml-3 w-0 flex-1">
               <dl>
-                <dt class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 truncate">
+                <dt class="text-xs font-medium text-gray-500 dark:text-gray-400 truncate">
                   {t("High (60-80%)")}
                 </dt>
-                <dd class="text-lg font-medium text-cool-steel-900 dark:text-white">
+                <dd class="text-lg font-medium text-gray-900 dark:text-white">
                   {@topology.stats.high_utilization_links || 0}
                 </dd>
               </dl>
@@ -219,18 +215,18 @@
         </div>
       </div>
 
-      <div class="bg-white dark:bg-cool-steel-800 overflow-hidden rounded-lg border border-cool-steel-200 dark:border-white/10">
+      <div class="bg-white dark:bg-gray-800 overflow-hidden rounded-lg border border-gray-200 dark:border-white/10">
         <div class="p-4">
           <div class="flex items-center">
             <div class="flex-shrink-0">
-              <div class="w-5 h-5 rounded bg-sweet-salmon-400"></div>
+              <div class="w-5 h-5 rounded bg-red-400"></div>
             </div>
             <div class="ml-3 w-0 flex-1">
               <dl>
-                <dt class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 truncate">
+                <dt class="text-xs font-medium text-gray-500 dark:text-gray-400 truncate">
                   {t("Critical (80%+)")}
                 </dt>
-                <dd class="text-lg font-medium text-cool-steel-900 dark:text-white">
+                <dd class="text-lg font-medium text-gray-900 dark:text-white">
                   {@topology.stats.overutilized_links || 0}
                 </dd>
               </dl>
@@ -241,7 +237,7 @@
     </div>
     
 <!-- Filter Bar -->
-    <div class="bg-white dark:bg-cool-steel-800 border-b border-cool-steel-200 dark:border-white/10 p-3">
+    <div class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-white/10 p-3">
       <div class="flex items-center justify-between gap-4 flex-wrap">
         <div class="flex items-center gap-2">
           <button
@@ -250,10 +246,8 @@
             class={[
               "px-3 py-1.5 text-xs font-medium rounded-md transition-colors",
               if(@filter == "all",
-                do:
-                  "bg-cerulean-100 text-cerulean-700 dark:bg-cerulean-400/20 dark:text-cerulean-400",
-                else:
-                  "text-cool-steel-600 hover:bg-cool-steel-100 dark:text-cool-steel-400 dark:hover:bg-cool-steel-700"
+                do: "bg-blue-100 text-blue-700 dark:bg-blue-400/20 dark:text-blue-400",
+                else: "text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
               )
             ]}
           >
@@ -266,8 +260,7 @@
               "px-3 py-1.5 text-xs font-medium rounded-md transition-colors",
               if(@filter == "high_util",
                 do: "bg-orange-100 text-orange-700 dark:bg-orange-400/20 dark:text-orange-400",
-                else:
-                  "text-cool-steel-600 hover:bg-cool-steel-100 dark:text-cool-steel-400 dark:hover:bg-cool-steel-700"
+                else: "text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
               )
             ]}
           >
@@ -285,16 +278,14 @@
             class={[
               "px-3 py-1.5 text-xs font-medium rounded-md transition-colors",
               if(@filter == "critical",
-                do:
-                  "bg-sweet-salmon-100 text-sweet-salmon-700 dark:bg-sweet-salmon-400/20 dark:text-sweet-salmon-400",
-                else:
-                  "text-cool-steel-600 hover:bg-cool-steel-100 dark:text-cool-steel-400 dark:hover:bg-cool-steel-700"
+                do: "bg-red-100 text-red-700 dark:bg-red-400/20 dark:text-red-400",
+                else: "text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
               )
             ]}
           >
             Critical (80%+)
             <%= if (@topology.stats[:overutilized_links] || 0) > 0 do %>
-              <span class="ml-1 inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-sweet-salmon-800 bg-sweet-salmon-200 rounded-full dark:bg-sweet-salmon-900 dark:text-sweet-salmon-300">
+              <span class="ml-1 inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-red-800 bg-red-200 rounded-full dark:bg-red-900 dark:text-red-300">
                 {@topology.stats.overutilized_links}
               </span>
             <% end %>
@@ -304,7 +295,7 @@
           <div class="relative">
             <.icon
               name="hero-magnifying-glass"
-              class="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-cool-steel-400"
+              class="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400"
             />
             <input
               type="text"
@@ -313,21 +304,19 @@
               phx-key="Enter"
               phx-debounce="300"
               value={@search_query}
-              class="pl-8 pr-3 py-1.5 text-xs border border-cool-steel-300 dark:border-cool-steel-600 rounded-md bg-white dark:bg-cool-steel-700 text-cool-steel-900 dark:text-white placeholder-cool-steel-400 focus:ring-1 focus:ring-cerulean-500 focus:border-cerulean-500 w-48"
+              class="pl-8 pr-3 py-1.5 text-xs border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 w-48"
             />
           </div>
           <%= if @topology[:has_geo] do %>
-            <div class="flex items-center gap-1 border-l border-cool-steel-200 dark:border-cool-steel-600 pl-3">
+            <div class="flex items-center gap-1 border-l border-gray-200 dark:border-gray-600 pl-3">
               <button
                 phx-click="toggle_layout"
                 phx-value-mode="force"
                 class={[
                   "px-2 py-1 text-xs rounded transition-colors",
                   if(@layout_mode == "force",
-                    do:
-                      "bg-cool-steel-200 dark:bg-cool-steel-600 text-cool-steel-900 dark:text-white font-medium",
-                    else:
-                      "text-cool-steel-500 hover:bg-cool-steel-100 dark:hover:bg-cool-steel-700"
+                    do: "bg-gray-200 dark:bg-gray-600 text-gray-900 dark:text-white font-medium",
+                    else: "text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700"
                   )
                 ]}
                 title="Force-directed layout"
@@ -340,10 +329,8 @@
                 class={[
                   "px-2 py-1 text-xs rounded transition-colors",
                   if(@layout_mode == "geo",
-                    do:
-                      "bg-cool-steel-200 dark:bg-cool-steel-600 text-cool-steel-900 dark:text-white font-medium",
-                    else:
-                      "text-cool-steel-500 hover:bg-cool-steel-100 dark:hover:bg-cool-steel-700"
+                    do: "bg-gray-200 dark:bg-gray-600 text-gray-900 dark:text-white font-medium",
+                    else: "text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700"
                   )
                 ]}
                 title="Geographic layout"
@@ -357,8 +344,8 @@
     </div>
     
 <!-- Network Weathermap Container -->
-    <div class="flex-1 bg-white dark:bg-cool-steel-800 relative overflow-hidden">
-      <div class="absolute inset-0 border-t border-cool-steel-200 dark:border-white/10">
+    <div class="flex-1 bg-white dark:bg-gray-800 relative overflow-hidden">
+      <div class="absolute inset-0 border-t border-gray-200 dark:border-white/10">
         <div
           id="cy-weathermap-container"
           phx-hook="WeathermapViewer"
@@ -374,7 +361,7 @@
             id="cy-zoom-in"
             type="button"
             title="Zoom in"
-            class="flex items-center justify-center w-8 h-8 bg-white dark:bg-cool-steel-700 border border-cool-steel-200 dark:border-white/10 rounded shadow-sm text-cool-steel-600 dark:text-cool-steel-300 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-600 hover:text-cool-steel-900 dark:hover:text-white transition-colors"
+            class="flex items-center justify-center w-8 h-8 bg-white dark:bg-gray-700 border border-gray-200 dark:border-white/10 rounded shadow-sm text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-white transition-colors"
           >
             <.icon name="hero-plus" class="h-4 w-4" />
           </button>
@@ -382,7 +369,7 @@
             id="cy-zoom-out"
             type="button"
             title="Zoom out"
-            class="flex items-center justify-center w-8 h-8 bg-white dark:bg-cool-steel-700 border border-cool-steel-200 dark:border-white/10 rounded shadow-sm text-cool-steel-600 dark:text-cool-steel-300 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-600 hover:text-cool-steel-900 dark:hover:text-white transition-colors"
+            class="flex items-center justify-center w-8 h-8 bg-white dark:bg-gray-700 border border-gray-200 dark:border-white/10 rounded shadow-sm text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-white transition-colors"
           >
             <.icon name="hero-minus" class="h-4 w-4" />
           </button>
@@ -390,40 +377,38 @@
             id="cy-fit"
             type="button"
             title="Fit to screen"
-            class="flex items-center justify-center w-8 h-8 bg-white dark:bg-cool-steel-700 border border-cool-steel-200 dark:border-white/10 rounded shadow-sm text-cool-steel-600 dark:text-cool-steel-300 hover:bg-cool-steel-50 dark:hover:bg-cool-steel-600 hover:text-cool-steel-900 dark:hover:text-white transition-colors"
+            class="flex items-center justify-center w-8 h-8 bg-white dark:bg-gray-700 border border-gray-200 dark:border-white/10 rounded shadow-sm text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 hover:text-gray-900 dark:hover:text-white transition-colors"
           >
             <.icon name="hero-arrows-pointing-out" class="h-4 w-4" />
           </button>
         </div>
         
 <!-- Utilization Legend -->
-        <div class="absolute bottom-4 right-4 bg-white dark:bg-cool-steel-800 border border-cool-steel-200 dark:border-white/10 rounded-lg shadow-lg p-4 z-10">
-          <h4 class="text-sm font-medium text-cool-steel-900 dark:text-white mb-3">
-            Link Utilization
-          </h4>
+        <div class="absolute bottom-4 right-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-white/10 rounded-lg shadow-lg p-4 z-10">
+          <h4 class="text-sm font-medium text-gray-900 dark:text-white mb-3">Link Utilization</h4>
           <div class="space-y-2 text-xs">
             <div class="flex items-center gap-2">
               <div class="w-6 h-1 rounded bg-green-500"></div>
-              <span class="text-cool-steel-700 dark:text-cool-steel-300">0-30% (Good)</span>
+              <span class="text-gray-700 dark:text-gray-300">0-30% (Good)</span>
             </div>
             <div class="flex items-center gap-2">
-              <div class="w-6 h-1 rounded bg-wheat-500"></div>
-              <span class="text-cool-steel-700 dark:text-cool-steel-300">30-60% (Moderate)</span>
+              <div class="w-6 h-1 rounded bg-yellow-500"></div>
+              <span class="text-gray-700 dark:text-gray-300">30-60% (Moderate)</span>
             </div>
             <div class="flex items-center gap-2">
               <div class="w-6 h-1 rounded bg-orange-500"></div>
-              <span class="text-cool-steel-700 dark:text-cool-steel-300">60-80% (High)</span>
+              <span class="text-gray-700 dark:text-gray-300">60-80% (High)</span>
             </div>
             <div class="flex items-center gap-2">
-              <div class="w-6 h-1 rounded bg-sweet-salmon-500"></div>
-              <span class="text-cool-steel-700 dark:text-cool-steel-300">80%+ (Critical)</span>
+              <div class="w-6 h-1 rounded bg-red-500"></div>
+              <span class="text-gray-700 dark:text-gray-300">80%+ (Critical)</span>
             </div>
             <div class="flex items-center gap-2">
-              <div class="w-6 h-1 border border-cool-steel-300 dark:border-cool-steel-600"></div>
-              <span class="text-cool-steel-500 dark:text-cool-steel-400">No capacity data</span>
+              <div class="w-6 h-1 border border-gray-300 dark:border-gray-600"></div>
+              <span class="text-gray-500 dark:text-gray-400">No capacity data</span>
             </div>
           </div>
-          <div class="mt-3 pt-3 border-t border-cool-steel-200 dark:border-white/10 text-xs text-cool-steel-500 dark:text-cool-steel-400">
+          <div class="mt-3 pt-3 border-t border-gray-200 dark:border-white/10 text-xs text-gray-500 dark:text-gray-400">
             Last updated: <.timestamp datetime={@topology.last_updated} timezone={@timezone} />
           </div>
         </div>
@@ -432,17 +417,17 @@
         <%= if @selected_node_detail do %>
           <div
             id="node-detail-panel"
-            class="absolute top-0 right-0 h-full w-80 bg-white dark:bg-cool-steel-800 border-l border-cool-steel-200 dark:border-white/10 shadow-lg overflow-y-auto transition-transform duration-200"
+            class="absolute top-0 right-0 h-full w-80 bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-white/10 shadow-lg overflow-y-auto transition-transform duration-200"
           >
             <div class="p-4">
               <!-- Header -->
               <div class="flex items-center justify-between mb-4">
-                <h3 class="text-sm font-semibold text-cool-steel-900 dark:text-white">
+                <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                   {t("Node Details")}
                 </h3>
                 <button
                   phx-click="close_detail_panel"
-                  class="text-cool-steel-400 hover:text-cool-steel-600 dark:hover:text-cool-steel-300"
+                  class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                 >
                   <.icon name="hero-x-mark" class="h-5 w-5" />
                 </button>
@@ -451,11 +436,11 @@
 <!-- Device Info -->
               <div class="space-y-3">
                 <div>
-                  <h4 class="text-base font-medium text-cool-steel-900 dark:text-white">
+                  <h4 class="text-base font-medium text-gray-900 dark:text-white">
                     {@selected_node_detail.name}
                   </h4>
                   <%= if @selected_node_detail.type == :discovered do %>
-                    <span class="inline-flex items-center rounded-full bg-cool-steel-100 px-2 py-0.5 text-xs font-medium text-cool-steel-600 dark:bg-cool-steel-700 dark:text-cool-steel-300 mt-1">
+                    <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300 mt-1">
                       {t("Discovered")}
                     </span>
                   <% end %>
@@ -463,11 +448,8 @@
 
                 <%= if @selected_node_detail.ip_address do %>
                   <div class="flex items-center text-sm">
-                    <.icon
-                      name="hero-globe-alt"
-                      class="h-4 w-4 text-cool-steel-400 mr-2 flex-shrink-0"
-                    />
-                    <span class="text-cool-steel-700 dark:text-cool-steel-300">
+                    <.icon name="hero-globe-alt" class="h-4 w-4 text-gray-400 mr-2 flex-shrink-0" />
+                    <span class="text-gray-700 dark:text-gray-300">
                       {@selected_node_detail.ip_address}
                     </span>
                   </div>
@@ -475,11 +457,8 @@
 
                 <%= if @selected_node_detail.site_name do %>
                   <div class="flex items-center text-sm">
-                    <.icon
-                      name="hero-map-pin"
-                      class="h-4 w-4 text-cool-steel-400 mr-2 flex-shrink-0"
-                    />
-                    <span class="text-cool-steel-700 dark:text-cool-steel-300">
+                    <.icon name="hero-map-pin" class="h-4 w-4 text-gray-400 mr-2 flex-shrink-0" />
+                    <span class="text-gray-700 dark:text-gray-300">
                       {@selected_node_detail.site_name}
                     </span>
                   </div>
@@ -489,17 +468,17 @@
                   <div class="flex items-center text-sm">
                     <.icon
                       name="hero-building-office"
-                      class="h-4 w-4 text-cool-steel-400 mr-2 flex-shrink-0"
+                      class="h-4 w-4 text-gray-400 mr-2 flex-shrink-0"
                     />
-                    <span class="text-cool-steel-700 dark:text-cool-steel-300">
+                    <span class="text-gray-700 dark:text-gray-300">
                       {@selected_node_detail.manufacturer}
                     </span>
                   </div>
                 <% end %>
 
                 <div class="flex items-center text-sm">
-                  <.icon name="hero-tag" class="h-4 w-4 text-cool-steel-400 mr-2 flex-shrink-0" />
-                  <span class="text-cool-steel-700 dark:text-cool-steel-300 capitalize">
+                  <.icon name="hero-tag" class="h-4 w-4 text-gray-400 mr-2 flex-shrink-0" />
+                  <span class="text-gray-700 dark:text-gray-300 capitalize">
                     {@selected_node_detail.role}
                   </span>
                 </div>
@@ -510,11 +489,11 @@
                       "inline-block h-2 w-2 rounded-full mr-2",
                       if(@selected_node_detail.status == :up,
                         do: "bg-green-400",
-                        else: "bg-sweet-salmon-400"
+                        else: "bg-red-400"
                       )
                     ]}>
                     </span>
-                    <span class="text-cool-steel-700 dark:text-cool-steel-300 capitalize">
+                    <span class="text-gray-700 dark:text-gray-300 capitalize">
                       {@selected_node_detail.status}
                     </span>
                   </div>
@@ -523,31 +502,31 @@
               
 <!-- Utilization Stats (for devices with bandwidth data) -->
               <%= if @selected_node_detail[:utilization_stats] do %>
-                <div class="mt-4 pt-3 border-t border-cool-steel-200 dark:border-white/10">
-                  <h4 class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider mb-2">
+                <div class="mt-4 pt-3 border-t border-gray-200 dark:border-white/10">
+                  <h4 class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
                     Interface Utilization
                   </h4>
                   <div class="space-y-2">
                     <%= for stat <- @selected_node_detail.utilization_stats do %>
-                      <div class="bg-cool-steel-50 dark:bg-cool-steel-700/50 rounded-md p-3">
+                      <div class="bg-gray-50 dark:bg-gray-700/50 rounded-md p-3">
                         <div class="flex items-center justify-between mb-1">
-                          <div class="text-xs font-medium text-cool-steel-900 dark:text-white">
+                          <div class="text-xs font-medium text-gray-900 dark:text-white">
                             {stat.interface_name}
                           </div>
                           <div class={[
                             "text-xs font-semibold",
                             case stat.utilization_level do
                               :low -> "text-green-600 dark:text-green-400"
-                              :medium -> "text-wheat-600 dark:text-wheat-400"
+                              :medium -> "text-yellow-600 dark:text-yellow-400"
                               :high -> "text-orange-600 dark:text-orange-400"
-                              :critical -> "text-sweet-salmon-600 dark:text-sweet-salmon-400"
-                              _ -> "text-cool-steel-500 dark:text-cool-steel-400"
+                              :critical -> "text-red-600 dark:text-red-400"
+                              _ -> "text-gray-500 dark:text-gray-400"
                             end
                           ]}>
                             {stat.utilization_pct}%
                           </div>
                         </div>
-                        <div class="text-xs text-cool-steel-500 dark:text-cool-steel-400">
+                        <div class="text-xs text-gray-500 dark:text-gray-400">
                           {stat.throughput_text} / {stat.capacity_text}
                         </div>
                       </div>
@@ -558,38 +537,38 @@
               
 <!-- Connections -->
               <%= if length(@selected_node_detail.connections) > 0 do %>
-                <div class="mt-5 pt-4 border-t border-cool-steel-200 dark:border-white/10">
-                  <h4 class="text-xs font-medium text-cool-steel-500 dark:text-cool-steel-400 uppercase tracking-wider mb-3">
+                <div class="mt-5 pt-4 border-t border-gray-200 dark:border-white/10">
+                  <h4 class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3">
                     {t("Connections")} ({length(@selected_node_detail.connections)})
                   </h4>
                   <div class="space-y-2">
                     <%= for conn <- @selected_node_detail.connections do %>
-                      <div class="flex items-center justify-between py-1.5 px-2 rounded bg-cool-steel-50 dark:bg-cool-steel-700/50 text-sm">
+                      <div class="flex items-center justify-between py-1.5 px-2 rounded bg-gray-50 dark:bg-gray-700/50 text-sm">
                         <div class="flex-1 min-w-0">
-                          <p class="text-cool-steel-900 dark:text-white truncate font-medium text-xs">
+                          <p class="text-gray-900 dark:text-white truncate font-medium text-xs">
                             {conn.device_name}
                           </p>
                           <%= if conn.interface do %>
-                            <p class="text-cool-steel-500 dark:text-cool-steel-400 text-xs">
+                            <p class="text-gray-500 dark:text-gray-400 text-xs">
                               {conn.interface}
                             </p>
                           <% end %>
                           <%= if conn[:utilization_text] do %>
-                            <p class="text-xs text-cerulean-600 dark:text-cerulean-400 mt-1">
+                            <p class="text-xs text-blue-600 dark:text-blue-400 mt-1">
                               {conn.utilization_text}
                             </p>
                           <% end %>
                         </div>
                         <div class="flex items-center space-x-2 ml-2 flex-shrink-0">
-                          <span class="text-xs text-cool-steel-500 dark:text-cool-steel-400 uppercase">
+                          <span class="text-xs text-gray-500 dark:text-gray-400 uppercase">
                             {conn.link_type}
                           </span>
                           <span class={[
                             "text-xs font-medium",
                             cond do
                               conn.confidence > 0.9 -> "text-green-600 dark:text-green-400"
-                              conn.confidence >= 0.5 -> "text-wheat-600 dark:text-wheat-400"
-                              true -> "text-cool-steel-500 dark:text-cool-steel-400"
+                              conn.confidence >= 0.5 -> "text-yellow-600 dark:text-yellow-400"
+                              true -> "text-gray-500 dark:text-gray-400"
                             end
                           ]}>
                             {trunc(conn.confidence * 100)}%
@@ -606,7 +585,7 @@
                 <div class="mt-4">
                   <.link
                     navigate={~p"/devices/#{@selected_node_detail.id}"}
-                    class="flex items-center justify-center w-full px-3 py-2 text-sm font-medium text-cerulean-600 dark:text-cerulean-400 bg-cerulean-50 dark:bg-cerulean-400/10 rounded-md hover:bg-cerulean-100 dark:hover:bg-cerulean-400/20"
+                    class="flex items-center justify-center w-full px-3 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-400/10 rounded-md hover:bg-blue-100 dark:hover:bg-blue-400/20"
                   >
                     <.icon name="hero-arrow-top-right-on-square" class="h-4 w-4 mr-1.5" />
                     {t("View Device")}
@@ -623,14 +602,11 @@
     <%= if @topology.stats.total_devices == 0 do %>
       <div class="flex-1 flex items-center justify-center">
         <div class="text-center py-16">
-          <.icon
-            name="hero-signal"
-            class="mx-auto h-12 w-12 text-cool-steel-400 dark:text-cool-steel-500"
-          />
-          <h3 class="mt-4 text-lg font-semibold text-cool-steel-900 dark:text-white">
+          <.icon name="hero-signal" class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" />
+          <h3 class="mt-4 text-lg font-semibold text-gray-900 dark:text-white">
             {t("No network data available")}
           </h3>
-          <p class="mt-2 text-sm text-cool-steel-600 dark:text-cool-steel-400">
+          <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
             {t(
               "Add devices with SNMP enabled and configure interface capacities to view utilization."
             )}
diff --git a/test/towerops_web/live/config_timeline_live_helpers_test.exs b/test/towerops_web/live/config_timeline_live_helpers_test.exs
index a7e1b64d..41f72b4a 100644
--- a/test/towerops_web/live/config_timeline_live_helpers_test.exs
+++ b/test/towerops_web/live/config_timeline_live_helpers_test.exs
@@ -13,26 +13,25 @@ defmodule ToweropsWeb.ConfigTimelineLiveHelpersTest do
     end
 
     test "21..50 returns warning styling" do
-      assert "bg-wheat-100 text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400" ==
+      assert "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400" ==
                ConfigTimelineLive.change_size_class(21)
 
-      assert "bg-wheat-100 text-wheat-800 dark:bg-wheat-900/30 dark:text-wheat-400" ==
+      assert "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400" ==
                ConfigTimelineLive.change_size_class(50)
     end
 
     test "<= 20 returns info styling" do
-      assert "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-400" ==
-               ConfigTimelineLive.change_size_class(0)
+      assert "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400" == ConfigTimelineLive.change_size_class(0)
 
-      assert "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-400" ==
+      assert "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400" ==
                ConfigTimelineLive.change_size_class(20)
     end
 
     test "non-integer returns info styling" do
-      assert "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-400" ==
+      assert "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400" ==
                ConfigTimelineLive.change_size_class(nil)
 
-      assert "bg-cerulean-100 text-cerulean-800 dark:bg-cerulean-900/30 dark:text-cerulean-400" ==
+      assert "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400" ==
                ConfigTimelineLive.change_size_class("foo")
     end
   end
diff --git a/test/towerops_web/live/site_live/index_helpers_test.exs b/test/towerops_web/live/site_live/index_helpers_test.exs
index d69cc3b0..513fb8b9 100644
--- a/test/towerops_web/live/site_live/index_helpers_test.exs
+++ b/test/towerops_web/live/site_live/index_helpers_test.exs
@@ -16,18 +16,18 @@ defmodule ToweropsWeb.SiteLive.IndexHelpersTest do
   end
 
   describe "qoe_color/1" do
-    test "nil is cool-steel" do
-      assert Index.qoe_color(nil) =~ "cool-steel"
+    test "nil is gray" do
+      assert Index.qoe_color(nil) =~ "gray"
     end
 
-    test "< 2.0 is sweet-salmon" do
-      assert Index.qoe_color(1.9) =~ "sweet-salmon"
-      assert Index.qoe_color(0.0) =~ "sweet-salmon"
+    test "< 2.0 is red" do
+      assert Index.qoe_color(1.9) =~ "red"
+      assert Index.qoe_color(0.0) =~ "red"
     end
 
-    test "2.0..4.0 is wheat" do
-      assert Index.qoe_color(2.0) =~ "wheat"
-      assert Index.qoe_color(3.9) =~ "wheat"
+    test "2.0..4.0 is yellow" do
+      assert Index.qoe_color(2.0) =~ "yellow"
+      assert Index.qoe_color(3.9) =~ "yellow"
     end
 
     test ">= 4.0 is green" do
@@ -37,27 +37,27 @@ defmodule ToweropsWeb.SiteLive.IndexHelpersTest do
   end
 
   describe "health_dot/1" do
-    test "nil is cool-steel" do
-      assert "bg-cool-steel-400" == Index.health_dot(nil)
+    test "nil is gray" do
+      assert "bg-gray-400" == Index.health_dot(nil)
     end
 
     test "atoms map to colors" do
-      assert "bg-sweet-salmon-500" == Index.health_dot(:red)
-      assert "bg-wheat-500" == Index.health_dot(:yellow)
+      assert "bg-red-500" == Index.health_dot(:red)
+      assert "bg-yellow-500" == Index.health_dot(:yellow)
       assert "bg-green-500" == Index.health_dot(:green)
     end
   end
 
   describe "urgency_classes/1" do
     test "known classes" do
-      assert Index.urgency_classes("critical") =~ "sweet-salmon"
-      assert Index.urgency_classes("warning") =~ "wheat"
-      assert Index.urgency_classes("info") =~ "cerulean"
+      assert Index.urgency_classes("critical") =~ "red"
+      assert Index.urgency_classes("warning") =~ "yellow"
+      assert Index.urgency_classes("info") =~ "blue"
     end
 
-    test "fallback is cool-steel" do
-      assert Index.urgency_classes("foo") =~ "cool-steel"
-      assert Index.urgency_classes(nil) =~ "cool-steel"
+    test "fallback is gray" do
+      assert Index.urgency_classes("foo") =~ "gray"
+      assert Index.urgency_classes(nil) =~ "gray"
     end
   end
 
@@ -65,11 +65,11 @@ defmodule ToweropsWeb.SiteLive.IndexHelpersTest do
     test "known sources" do
       assert Index.source_classes("preseem") =~ "purple"
       assert Index.source_classes("snmp") =~ "cyan"
-      assert Index.source_classes("gaiia") =~ "wheat"
+      assert Index.source_classes("gaiia") =~ "amber"
     end
 
-    test "fallback is cool-steel" do
-      assert Index.source_classes("other") =~ "cool-steel"
+    test "fallback is gray" do
+      assert Index.source_classes("other") =~ "gray"
     end
   end
 end