diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 0db8e70..251ef51 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -1,37 +1,22 @@
-/*
- * This is a manifest file that'll be compiled into application.css.
- *
- * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
- * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
- * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
- * depending on specificity.
- *
- * Consider organizing styles into separate files for maintainability.
- */
-
-/* Phantom Sans Font Faces */
 @font-face {
-  font-family: 'Phantom Sans';
-  src: url('/fonts/Regular.woff2') format('woff2'),
-       url('/fonts/Regular.woff') format('woff');
+  font-family: "Phantom Sans";
+  src: url("/fonts/Regular.woff2") format("woff2"), url("/fonts/Regular.woff") format("woff");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Phantom Sans';
-  src: url('/fonts/Italic.woff2') format('woff2'),
-       url('/fonts/Italic.woff') format('woff');
+  font-family: "Phantom Sans";
+  src: url("/fonts/Italic.woff2") format("woff2"), url("/fonts/Italic.woff") format("woff");
   font-weight: normal;
   font-style: italic;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Phantom Sans';
-  src: url('/fonts/Bold.woff2') format('woff2'),
-       url('/fonts/Bold.woff') format('woff');
+  font-family: "Phantom Sans";
+  src: url("/fonts/Bold.woff2") format("woff2"), url("/fonts/Bold.woff") format("woff");
   font-weight: bold;
   font-style: normal;
   font-display: swap;
@@ -40,48 +25,31 @@
 @import "https://uchu.style/color.css";
 @import "settings.css";
 
-body, html {
-  font-family: 'Phantom Sans', 'Segoe UI', sans-serif;
+body,
+html {
+  font-family: "Phantom Sans", "Segoe UI", sans-serif;
 }
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   font-family: inherit;
 }
 
-code, pre, kbd, samp {
+code,
+pre,
+kbd,
+samp {
   font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
 }
 
-
-/* Force dark mode for all elements */
-*, *::before, *::after {
-  color-scheme: dark;
-}
-
 /* Ensure forms and inputs respect dark mode */
-input, textarea, select {
+input,
+textarea,
+select {
   color-scheme: dark;
 }
 
-/* colors */
-
-:root {
-  --muted-color: var(--uchu-gray);
-  --black: rgb(42, 42, 42);
-  --smoke: rgb(242, 242, 242);
-  /* Force dark mode colors */
-  color-scheme: dark;
-}
-
-:root.development {
-  --primary-color: var(--color-green);
-}
-:root.production {
-  --primary-color: var(--color-primary);
-}
-
-
-
 .admin-tool {
   border-radius: 5px;
   border: 1px dashed hsl(24.9, 100%, 67.8%);
@@ -109,7 +77,6 @@ input, textarea, select {
 }
 
 .auto-scroll {
-  /* flash a little bit yellow & leave a little bit of a border */
   animation: flash 1s ease-in-out;
   border: 2px solid var(--uchu-yellow);
   border-radius: 5px;
@@ -128,5 +95,3 @@ select {
     background-color: transparent;
   }
 }
-
-
diff --git a/app/assets/stylesheets/tools.css b/app/assets/stylesheets/tools.css
deleted file mode 100644
index 308e7f5..0000000
--- a/app/assets/stylesheets/tools.css
+++ /dev/null
@@ -1,69 +0,0 @@
-/* Admin and Dev Tool styles */
-.admin-tool {
-  border-radius: 5px;
-  border: 1px dashed var(--uchu-orange);
-  position: relative;
-  transition: all 0.2s ease;
-}
-
-.admin-tool::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--uchu-orange);
-  opacity: 0.1;
-  z-index: -1;
-  border-radius: 4px;
-}
-
-.dev-tool {
-  border-radius: 5px;
-  border: 1px dashed var(--uchu-green);
-  position: relative;
-  transition: all 0.2s ease;
-}
-
-.dev-tool::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--uchu-green);
-  opacity: 0.1;
-  z-index: -1;
-  border-radius: 4px;
-}
-
-
-  .admin-tool::before {
-    opacity: 1;
-    background-color: rgba(255, 166, 0, 0.02); /* Orange with very low opacity */
-  }
-
-  .dev-tool::before {
-    opacity: 1;
-    background-color: rgba(0, 255, 0, 0.02); /* Green with very low opacity */
-  }
-
-  /* Improve text contrast in dark mode */
-  .admin-tool,
-  .dev-tool {
-    background-color: rgba(255, 255, 255, 0.02);
-    color: rgba(255, 255, 255, 0.9);
-  }
-
-  /* Make links more visible */
-  .admin-tool a,
-  .dev-tool a {
-    color: var(--uchu-yellow);
-  }
-
-  .admin-tool a:hover,
-  .dev-tool a:hover {
-    color: var(--uchu-orange);
-  }
diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css
index 4256ffd..79563ff 100644
--- a/app/assets/tailwind/application.css
+++ b/app/assets/tailwind/application.css
@@ -15,6 +15,10 @@
   --color-secondary: #8492A6;
 }
 
+:root.development {
+  --color-primary: var(--color-green);
+}
+
 /* for some reason tailwind just does not want to work, so lets make sure it does */
 .bg-darker { background-color: var(--color-darker) !important; }
 .bg-dark { background-color: var(--color-dark) !important; }
diff --git a/app/views/leaderboards/_mini_leaderboard.html.erb b/app/views/leaderboards/_mini_leaderboard.html.erb
index 0e59e97..3d6ec32 100644
--- a/app/views/leaderboards/_mini_leaderboard.html.erb
+++ b/app/views/leaderboards/_mini_leaderboard.html.erb
@@ -19,7 +19,7 @@
     %>
 
     <% if mini_leaderboard_entries&.any? %>
-      <div class="bg-elevated rounded-xl border border-red p-4 shadow-lg">
+      <div class="bg-elevated rounded-xl border border-primary p-4 shadow-lg">
         <p class="text-xs italic text-muted mb-4">
           <% if leaderboard.respond_to?(:scope_name) %>
             <strong>Showing others in <%= link_to "your timezone", my_settings_path(anchor: "user_timezone"), data: { turbo: false }, class: "text-accent hover:text-cyan-400 transition-colors" %></strong>
@@ -37,7 +37,7 @@
               is_separator_needed = show_user_separately && idx == 3 && actual_rank > 3
             %>
 
-            <div class="flex items-center p-3 rounded-lg bg-dark transition-colors duration-200 <%= 'bg-dark border border-red' if entry.user_id == current_user&.id %>">
+            <div class="flex items-center p-3 rounded-lg bg-dark transition-colors duration-200 <%= 'bg-dark border border-primary' if entry.user_id == current_user&.id %>">
               <% rank_emoji = case actual_rank
                    when 0 then "🥇"
                    when 1 then "🥈"
diff --git a/app/views/leaderboards/_mini_leaderboard_loading.html.erb b/app/views/leaderboards/_mini_leaderboard_loading.html.erb
index eaa1c63..8a25e63 100644
--- a/app/views/leaderboards/_mini_leaderboard_loading.html.erb
+++ b/app/views/leaderboards/_mini_leaderboard_loading.html.erb
@@ -1,4 +1,4 @@
-<div class="bg-elevated rounded-xl border border-red p-4 shadow-lg">
+<div class="bg-elevated rounded-xl border border-primary p-4 shadow-lg">
   <p class="text-xs italic text-muted mb-4 opacity-70">
     This leaderboard is in <%= Leaderboard::GLOBAL_TIMEZONE %>.
     <% if current_user && timezone_difference_in_seconds(Leaderboard::GLOBAL_TIMEZONE, current_user.timezone) != 0 %>
diff --git a/app/views/leaderboards/index.html.erb b/app/views/leaderboards/index.html.erb
index 630d500..0089fa3 100644
--- a/app/views/leaderboards/index.html.erb
+++ b/app/views/leaderboards/index.html.erb
@@ -31,7 +31,7 @@
     </div>
 
     <% if current_user && current_user.github_uid.blank? %>
-      <div class="bg-dark border border-red rounded-lg p-4 mb-6">
+      <div class="bg-dark border border-primary rounded-lg p-4 mb-6">
         <%= link_to "Connect your GitHub", "/auth/github", class: "bg-primary hover:bg-red-600 text-white font-medium px-4 py-2 rounded-lg transition-colors duration-200" %> to qualify for the leaderboard.
       </div>
     <% end %>
@@ -59,7 +59,7 @@
     </div>
   </div>
 
-  <div class="bg-elevated rounded-xl border border-red overflow-hidden">
+  <div class="bg-elevated rounded-xl border border-primary overflow-hidden">
     <% if @entries&.any? %>
       <div class="divide-y divide-gray-800">
         <% @entries.each_with_index do |entry, index| %>
@@ -101,7 +101,7 @@
               <%= short_time_detailed entry.total_seconds %>
             </div>
             <% admin_tool do %>
-              <select class="ml-4 bg-dark border border-red rounded px-2 py-1 text-sm text-white"
+              <select class="ml-4 bg-dark border border-primary rounded px-2 py-1 text-sm text-white"
                   data-controller="trust-level"
                   data-trust-level-target="select"
                   data-user-id="<%= entry.user.id %>"
@@ -116,7 +116,7 @@
         <% end %>
       </div>
       <% unless @user_on_leaderboard && @untracked_entries != 0 %>
-        <div class="px-4 py-3 text-sm text-muted border-t border-red">
+        <div class="px-4 py-3 text-sm text-muted border-t border-primary">
           Don't see yourself on the leaderboard? You're probably one of the
           <%= pluralize(@untracked_entries, "user") %>
           who haven't
@@ -124,7 +124,7 @@
         </div>
       <% end %>
       <% if @leaderboard.finished_generating? && @leaderboard.persisted? %>
-        <div class="px-4 py-2 text-xs italic text-muted border-t border-red">
+        <div class="px-4 py-2 text-xs italic text-muted border-t border-primary">
           Generated in <%= @leaderboard.finished_generating_at - @leaderboard.created_at %> seconds
         </div>
       <% end %>
diff --git a/app/views/shared/_nav.html.erb b/app/views/shared/_nav.html.erb
index 9d1d53d..83bcc6b 100644
--- a/app/views/shared/_nav.html.erb
+++ b/app/views/shared/_nav.html.erb
@@ -25,86 +25,86 @@
     <div>
       <div class="space-y-1 text-lg">
         <div>
-          <%= link_to root_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(root_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
+          <%= link_to root_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(root_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
             Home
           <% end %>
         </div>
         <div>
-          <%= link_to leaderboards_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(leaderboards_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
+          <%= link_to leaderboards_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(leaderboards_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
             Leaderboards
           <% end %>
         </div>
         <% unless current_user %>
           <div>
-            <%= link_to docs_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(docs_path) || request.path.start_with?('/docs') ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
+            <%= link_to docs_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(docs_path) || request.path.start_with?('/docs') ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
               Docs
             <% end %>
           </div>
         <% end %>
         <% if current_user %>
           <div>
-            <%= link_to my_projects_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(my_projects_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
+            <%= link_to my_projects_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(my_projects_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
               Projects
             <% end %>
           </div>
           <div>
-            <%= link_to docs_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(docs_path) || request.path.start_with?('/docs') ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
+            <%= link_to docs_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(docs_path) || request.path.start_with?('/docs') ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
               Docs
             <% end %>
           </div>
           <% admin_tool(nil, "div") do %>
-            <%= link_to my_mailing_address_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(my_mailing_address_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
+            <%= link_to my_mailing_address_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(my_mailing_address_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
               Mailing Address
             <% end %>
           <% end %>
           <div>
-            <%= link_to my_mailroom_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(my_mailroom_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
+            <%= link_to my_mailroom_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(my_mailroom_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
               Mailroom
             <% end %>
           </div>
           <div>
-            <%= link_to my_settings_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(my_settings_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
+            <%= link_to my_settings_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(my_settings_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
               Settings
             <% end %>
           </div>
           <div>
-            <%= link_to signout_path, class: "block px-2 py-1 rounded-lg transition hover:bg-[#23272a] hover:text-primary", data: { turbo_method: :delete, action: "click->nav#clickLink" } do %>
+            <%= link_to signout_path, class: "block px-2 py-1 rounded-lg transition hover:bg-[#23272a]", data: { turbo_method: :delete, action: "click->nav#clickLink" } do %>
               Logout
             <% end %>
           </div>
         <% end %>
         <% dev_tool(nil, "div") do %>
-          <%= link_to letter_opener_web_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(letter_opener_web_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
+          <%= link_to letter_opener_web_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(letter_opener_web_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
             Letter Opener
           <% end %>
         <% end %>
         <% dev_tool(nil, "div") do %>
-          <%= link_to '/rails/mailers', class: "block px-2 py-1 rounded-lg transition #{current_page?('/rails/mailers') ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
+          <%= link_to '/rails/mailers', class: "block px-2 py-1 rounded-lg transition #{current_page?('/rails/mailers') ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
             Mailers
           <% end %>
         <% end %>
         <% admin_tool(nil, "div") do %>
-          <%= link_to admin_timeline_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(admin_timeline_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
+          <%= link_to admin_timeline_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(admin_timeline_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
             Review Timeline
           <% end %>
         <% end %>
         <% admin_tool(nil, "div") do %>
-          <%= link_to ahoy_captain_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(ahoy_captain_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
+          <%= link_to ahoy_captain_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(ahoy_captain_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
             Ahoy Captain
           <% end %>
         <% end %>
         <% admin_tool(nil, "div") do %>
-          <%= link_to good_job_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(good_job_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
+          <%= link_to good_job_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(good_job_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
             GoodJob
           <% end %>
         <% end %>
         <% admin_tool(nil, "div") do %>
-          <%= link_to oauth_applications_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(oauth_applications_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
+          <%= link_to oauth_applications_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(oauth_applications_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
             OAuth2 apps
           <% end %>
         <% end %>
         <% admin_tool(nil, "div") do %>
-          <%= link_to flipper_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(flipper_path) ? 'bg-[rgba(225,57,80,0.12)] text-primary' : 'hover:bg-[#23272a] hover:text-primary'}", data: { action: "click->nav#clickLink" } do %>
+          <%= link_to flipper_path, class: "block px-2 py-1 rounded-lg transition #{current_page?(flipper_path) ? 'bg-primary/50 text-primary' : 'hover:bg-[#23272a]'}", data: { action: "click->nav#clickLink" } do %>
             Feature Flags
           <% end %>
         <% end %>
diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb
index f6c9893..78670f0 100644
--- a/app/views/users/edit.html.erb
+++ b/app/views/users/edit.html.erb
@@ -11,7 +11,7 @@
   </header>
 
   <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-    <div class="border border-red rounded-xl p-6 bg-dark transition-all duration-200">
+    <div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
       <div class="flex items-center gap-3 mb-4">
         <div class="p-2 bg-red-600/10 rounded">
           <span class="text-2xl">🚀</span>
@@ -23,7 +23,7 @@
           class: "inline-flex items-center gap-2 px-4 py-2 bg-primary text-white font-medium rounded transition-colors duration-200" %>
     </div>
 
-    <div class="border border-red rounded-xl p-6 bg-dark transition-all duration-200">
+    <div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
       <div class="flex items-center gap-3 mb-4">
         <div class="p-2 bg-red-600/10 rounded">
           <span class="text-2xl">🌍</span>
@@ -39,14 +39,14 @@
           <%= f.select :timezone, 
               TZInfo::Timezone.all.map(&:identifier).sort,
               { include_blank: @user.timezone.blank? },
-              { class: "w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-red focus:ring-1 focus:ring-primary" } %>
+              { class: "w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-primary focus:ring-1 focus:ring-primary" } %>
         </div>
         <p class="text-xs text-gray-400">This affects how your activity graph and other time-based features are displayed.</p>
         <%= f.submit "Save Settings", class: "w-full px-4 py-2 bg-primary text-white font-medium rounded transition-colors duration-200" %>
       <% end %>
     </div>
 
-    <div class="border border-red rounded-xl p-6 bg-dark transition-all duration-200">
+    <div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
       <div class="flex items-center gap-3 mb-4">
         <div class="p-2 bg-red-600/10 rounded">
           <span class="text-2xl">⚙️</span>
@@ -62,13 +62,13 @@
           <%= f.select :hackatime_extension_text_type,
               User.hackatime_extension_text_types.keys.map { |key| [key.humanize, key] },
               {},
-              { class: "w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-red focus:ring-1 focus:ring-primary" } %>
+              { class: "w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-primary focus:ring-1 focus:ring-primary" } %>
         </div>
         <%= f.submit "Save Settings", class: "w-full px-4 py-2 bg-primary text-white font-medium rounded transition-colors duration-200" %>
       <% end %>
     </div>
 
-    <div class="border border-red rounded-xl p-6 bg-dark transition-all duration-200">
+    <div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
       <div class="flex items-center gap-3 mb-4">
         <div class="p-2 bg-red-600/10 rounded">
           <span class="text-2xl">💬</span>
@@ -118,7 +118,7 @@
       </div>
     </div>
 
-    <div class="border border-red rounded-xl p-6 bg-dark transition-all duration-200">
+    <div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
       <div class="flex items-center gap-3 mb-4">
         <div class="p-2 bg-red-600/10 rounded">
           <span class="text-2xl">🔒</span>
@@ -140,7 +140,7 @@
       <% end %>
     </div>
 
-    <div class="border border-red rounded-xl p-6 bg-dark transition-all duration-200">
+    <div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
       <div class="flex items-center gap-3 mb-4">
         <div class="p-2 bg-red-600/10 rounded">
           <span class="text-2xl">🏆</span>
@@ -151,7 +151,7 @@
       <%= render "timezone_leaderboard_toggle", user: @user %>
     </div>
 
-    <div class="border border-red rounded-xl p-6 bg-dark transition-all duration-200 md:col-span-2">
+    <div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200 md:col-span-2">
       <div class="flex items-center gap-3 mb-4">
         <div class="p-2 bg-red-600/10 rounded">
           <span class="text-2xl">🔗</span>
@@ -199,14 +199,14 @@
             <%= email_field_tag :email, nil, 
                 placeholder: "Add another email address", 
                 required: true,
-                class: "w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-red focus:ring-1 focus:ring-primary text-sm" %>
+                class: "w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-primary focus:ring-1 focus:ring-primary text-sm" %>
             <%= submit_tag "Add Email", class: "w-full px-3 py-2 bg-primary hover:bg-primary/80 text-white text-sm font-medium rounded transition-colors duration-200" %>
           <% end %>
         </div>
       </div>
     </div>
 
-    <div class="border border-red rounded-xl p-6 bg-dark transition-all duration-200">
+    <div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200">
       <div class="flex items-center gap-3 mb-4">
         <div class="p-2 bg-red-600/10 rounded">
           <span class="text-2xl">📊</span>
@@ -223,7 +223,7 @@
             <div>
               <label class="block text-sm font-medium text-gray-200 mb-2">Theme</label>
               <select name="theme" id="theme-select" onchange="up1(this.value)" 
-                      class="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-red focus:ring-1 focus:ring-primary">
+                      class="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-primary focus:ring-1 focus:ring-primary">
                 <% GithubReadmeStats.themes.each do |theme| %>
                   <option value="<%= theme %>"><%= theme.humanize %></option>
                 <% end %>
@@ -244,7 +244,7 @@
             <div class="space-y-2">
               <label class="block text-sm font-medium text-gray-200">Project</label>
               <select name="project" id="project-select" onchange="up2(this.value)"
-                      class="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-red focus:ring-1 focus:ring-primary">
+                      class="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-primary focus:ring-1 focus:ring-primary">
                 <% @projects.each do |project| %>
                   <option value="<%= project %>"><%= project %></option>
                 <% end %>
@@ -279,7 +279,7 @@
       </script>
     </div>
 
-    <div class="border border-red rounded-xl p-6 bg-dark transition-all duration-200 space-y-6">
+    <div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200 space-y-6">
       <div>
         <div class="flex items-center gap-3 mb-4">
           <div class="p-2 bg-red-600/10 rounded">
@@ -322,7 +322,7 @@
       </div>
     </div>
 
-    <div class="border border-red rounded-xl p-6 bg-dark transition-all duration-200 md:col-span-2">
+    <div class="border border-primary rounded-xl p-6 bg-dark transition-all duration-200 md:col-span-2">
       <div class="flex items-center gap-3 mb-4">
         <div class="p-2 bg-red-600/10 rounded">
           <span class="text-2xl">📝</span>
@@ -374,11 +374,11 @@
           <div class="grid grid-cols-1 gap-4">
             <div>
               <%= f.label :endpoint_url, class: "block text-sm font-medium text-gray-200 mb-2" %>
-              <%= f.url_field :endpoint_url, value: "https://wakatime.com/api/v1", class: "w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-red focus:ring-1 focus:ring-primary" %>
+              <%= f.url_field :endpoint_url, value: "https://wakatime.com/api/v1", class: "w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-primary focus:ring-1 focus:ring-primary" %>
             </div>
             <div>
               <%= f.label :encrypted_api_key, "WakaTime API Key", class: "block text-sm font-medium text-gray-200 mb-2" %>
-              <%= f.password_field :encrypted_api_key, placeholder: "Enter your WakaTime API key", class: "w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-red focus:ring-1 focus:ring-primary" %>
+              <%= f.password_field :encrypted_api_key, placeholder: "Enter your WakaTime API key", class: "w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded text-white focus:border-primary focus:ring-1 focus:ring-primary" %>
             </div>
           </div>
           <%= f.submit "Add Mirror", class: "px-4 py-2 bg-primary text-white font-medium rounded transition-colors duration-200" %>
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
deleted file mode 100644
index 35375d3..0000000
--- a/config/tailwind.config.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    './app/**/*',
-  ],
-  theme: {
-    extend: {
-      colors: {
-        'darker': '#121217',
-        'dark': '#17171D',
-        'darkless': '#252429',
-        'red': '#EC3750',
-        'orange': '#FF8C37',
-        'yellow': '#F1C40F',
-        'green': '#33D6A6',
-        'cyan': '#5BC0DE',
-        'blue': '#338EDA',
-        'purple': '#A633D6',
-        'primary': '#EC3750',
-        'secondary': '#8492A6'
-      }
-    },
-  },
-  plugins: [],
-}