diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index f5c4d908..dfb9ac40 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -10,3 +10,12 @@
  *
  * Note: Tailwind CSS is loaded separately via stylesheet_link_tag in the layout.
  */
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    background-color: #f9fafb;
+}
diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css
index da1c97d5..e2152a86 100644
--- a/app/assets/tailwind/application.css
+++ b/app/assets/tailwind/application.css
@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "./components/sidebar.css";
 
 /* Tom Select Tailwind Styles */
 
@@ -280,15 +281,11 @@ nav.pagy a.gap {
 
 /* Layout Utilities */
 .page-container {
-  min-height: 100vh;
-  padding: 2rem 0;
+  @apply min-h-screen py-1;
 }
 
 .content-wrapper {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 1rem;
-  overflow-x: hidden;
+  @apply max-w-7xl mx-auto overflow-x-hidden p-4 min-h-screen;
 }
 
 .section-spacing {
@@ -517,3 +514,7 @@ nav.pagy a.current {
 .table-container table td.actions-col {
   white-space: nowrap;
 }
+
+.help-text {
+  @apply mt-2 text-xs text-gray-500 m-0;
+}
diff --git a/app/assets/tailwind/components/sidebar.css b/app/assets/tailwind/components/sidebar.css
new file mode 100644
index 00000000..35334dd0
--- /dev/null
+++ b/app/assets/tailwind/components/sidebar.css
@@ -0,0 +1,7 @@
+.sidebar__link {
+    @apply hover:bg-gray-100 flex items-center px-4 py-3 gap-3 rounded-lg;
+}
+
+.sidebar__logout-button {
+    @apply py-3 px-4 w-full text-white bg-red-600 hover:bg-red-700 font-medium rounded-lg flex justify-center items-center gap-2 cursor-pointer;
+}
\ No newline at end of file
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index cfc8a987..400bb844 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -21,13 +21,7 @@ def tailwind_flash_class(level)
     end
   end
 
-  def nav_link_class(path)
-    base_style = "display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; text-decoration: none; border-radius: 0.5rem; transition: all 0.2s; font-weight: 500;"
-
-    if current_page?(path)
-      base_style + " background-color: #dbeafe; color: #1d4ed8;"
-    else
-      base_style + " color: #374151;"
-    end
+  def active_link_class(path)
+    current_page?(path) ? "!bg-blue-100" : ""
   end
 end
diff --git a/app/views/languages/_form.html.erb b/app/views/languages/_form.html.erb
index 2f1ed58d..643bc66f 100644
--- a/app/views/languages/_form.html.erb
+++ b/app/views/languages/_form.html.erb
@@ -10,7 +10,7 @@
       <%= f.text_field :name,
           placeholder: "Enter language name (e.g., English, Spanish, French)",
           class: "input-field bg-gray-50" %>
-      <p class="mt-2 text-xs text-gray-500 m-0">This will be used to identify the language throughout the system.</p>
+      <p class="help-text">This will be used to identify the language throughout the system.</p>
     </div>
 
     <div class="flex justify-between items-center pt-8 border-t border-gray-100 mt-8">
diff --git a/app/views/layouts/_sidebar.html.erb b/app/views/layouts/_sidebar.html.erb
index d07d7e29..0a4528c3 100644
--- a/app/views/layouts/_sidebar.html.erb
+++ b/app/views/layouts/_sidebar.html.erb
@@ -1,73 +1,74 @@
 
-<div class="w-full h-full bg-white shadow-lg overflow-y-auto" style="border-right: 1px solid #e5e7eb; display: flex; flex-direction: column;">
-  <div class="p-6" style="border-bottom: 1px solid #f3f4f6;">
-    <div class="flex justify-start items-center mb-6">
+<div class="w-full h-full bg-white shadow-lg overflow-y-auto border-r-1 border-gray-200 flex flex-col">
+  <div class="p-6 border-b-1 border-gray-200">
+    <div class="flex justify-start items-center">
       <div class="text-xl font-bold text-gray-800">
-        <%= link_to(root_path, class: "hover:opacity-80", style: "text-decoration: none; transition: opacity 0.2s;") do %>
-          <%= image_tag("skill.svg", alt: "SkillRx", style: "height: 4rem; width: auto;") %>
+        <%= link_to(root_path, class: "hover:opacity-80 transition-opacity duration-200 no-underline block") do %>
+          <%= image_tag("skill.svg", alt: "SkillRx", class: "h-16") %>
         <% end %>
       </div>
     </div>
   </div>
 
-  <nav class="sidebar-nav px-4 py-2" style="flex: 1;">
-    <ul style="list-style: none; padding: 0; margin: 0;">
-      <li style="margin-bottom: 0.5rem;">
-        <%= link_to topics_path, style: nav_link_class(topics_path) do %>
-          <span style="font-size: 1.1rem;">🏷️</span>
+  <nav class="sidebar-nav px-4 py-2 flex-1">
+    <ul class="list-none p-0">
+      <li class="mb-2">
+        <%= link_to topics_path, class: "sidebar__link #{active_link_class(topics_path)}" do %>
+          <span class="text-lg">🏷️</span>
           <span>Topics</span>
         <% end %>
       </li>
 
       <% if Current.user.is_admin? %>
-        <li style="margin: 1.5rem 0 1rem 0;">
-          <div style="padding: 0.5rem 1rem; font-size: 0.75rem; font-weight: 600; color: #6b7280; letter-spacing: 0.05em; border-bottom: 1px solid #f3f4f6; margin-bottom: 0.75rem;">Administration</div>
+        <li class="mt-6 mb-4">
+          <div class="px-4 py-2 text-xs font-semibold border-b-1 border-gray-200 text-gray-500 tracking-wider">Administration</div>
         </li>
-        <li style="margin-bottom: 0.5rem;">
-          <%= link_to regions_path, style: nav_link_class(regions_path) do %>
-            <span style="font-size: 1.1rem;">🌍</span>
+
+        <li class="mb-2">
+          <%= link_to regions_path, class: "sidebar__link #{active_link_class(regions_path)}" do %>
+            <span class="text-lg">🌍</span>
             <span>Regions</span>
           <% end %>
         </li>
 
-        <li style="margin-bottom: 0.5rem;">
-          <%= link_to providers_path, style: nav_link_class(providers_path) do %>
-            <span style="font-size: 1.1rem;">🏥</span>
+        <li class="mb-2">
+          <%= link_to providers_path, class: "sidebar__link #{active_link_class(providers_path)}" do %>
+            <span class="text-lg">🏥</span>
             <span>Providers</span>
           <% end %>
         </li>
 
-        <li style="margin-bottom: 0.5rem;">
-          <%= link_to languages_path, style: nav_link_class(languages_path) do %>
-            <span style="font-size: 1.1rem;">🌐</span>
+        <li class="mb-2">
+          <%= link_to languages_path, class: "sidebar__link #{active_link_class(languages_path)}" do %>
+            <span class="text-lg">🌐</span>
             <span>Languages</span>
           <% end %>
         </li>
 
-        <li style="margin-bottom: 0.5rem;">
-          <%= link_to tags_path, style: nav_link_class(tags_path) do %>
-            <span style="font-size: 1.1rem;">🏷️</span>
+        <li class="mb-2">
+          <%= link_to tags_path, class: "sidebar__link #{active_link_class(tags_path)}" do %>
+            <span class="text-lg">🏷️</span>
             <span>Tags</span>
           <% end %>
         </li>
 
-        <li style="margin-bottom: 0.5rem;">
-          <%= link_to users_path, style: nav_link_class(users_path) do %>
-            <span style="font-size: 1.1rem;">👥</span>
+        <li class="mb-2">
+          <%= link_to users_path, class: "sidebar__link #{active_link_class(users_path)}" do %>
+            <span class="text-lg">👥</span>
             <span>Users</span>
           <% end %>
         </li>
 
-        <li style="margin-bottom: 0.5rem;">
-          <%= link_to import_reports_path, style: nav_link_class(import_reports_path) do %>
-            <span style="font-size: 1.1rem;">📊</span>
+        <li class="mb-2">
+          <%= link_to import_reports_path, class: "sidebar__link #{active_link_class(import_reports_path)}" do %>
+            <span class="text-lg">📊</span>
             <span>Import Reports</span>
           <% end %>
         </li>
 
-        <li style="margin-bottom: 0.5rem;">
-          <%= link_to "/jobs", style: nav_link_class("/jobs"), target: "_blank" do %>
-            <span style="font-size: 1.1rem;">🛠️</span>
+        <li class="mb-2">
+          <%= link_to "/jobs", class: "sidebar__link #{active_link_class("/jobs")}", target: "_blank" do %>
+            <span class="text-lg">🛠️</span>
             <span>Jobs</span>
           <% end %>
         </li>
@@ -75,40 +76,10 @@
     </ul>
   </nav>
 
-  <div class="p-6" style="border-top: 1px solid #f3f4f6;">
-    <%= button_to session_path, method: :delete, style: "width: 100%; background-color: #dc2626; color: white; font-weight: 500; padding: 0.75rem 1rem; border-radius: 0.5rem; border: none; cursor: pointer; transition: background-color 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.5rem;" do %>
-      <span style="font-size: 1.1rem;">↗</span>
+  <div class="p-6 border-t-1 border-gray-200">
+    <%= button_to session_path, method: :delete, class: "sidebar__logout-button" do %>
+      <span class="text-lg">↗</span>
       <span>Log out</span>
     <% end %>
   </div>
 </div>
-
-<style>
-  /* Sidebar hover effects - scoped to sidebar only */
-  .sidebar-nav a:hover {
-    background-color: #f3f4f6 !important;
-    color: #2563eb !important;
-  }
-
-  /* Active link styling - you can add logic to detect current page */
-  .sidebar-nav a[href*="languages"]:hover {
-    background-color: #dbeafe !important;
-    color: #1d4ed8 !important;
-  }
-
-  /* Logout button hover */
-  button[form]:hover {
-    background-color: #b91c1c !important;
-  }
-
-  /* Logo hover */
-  a[href="/"]:hover {
-    color: #2563eb !important;
-  }
-
-  /* Theme toggle hover */
-  div[title]:hover {
-    color: #374151 !important;
-    transform: scale(1.1);
-  }
-</style>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 496e1674..0c2f2ef3 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -23,272 +23,17 @@
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag "animations", "data-turbo-track": "reload" %>
 
-    <style>
-      /* Basic reset and layout styles */
-      * {
-        box-sizing: border-box;
-      }
-
-      body {
-        margin: 0;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-        background-color: #f9fafb;
-      }
-
-      .flex {
-        display: flex;
-      }
-
-      .min-h-screen {
-        min-height: 100vh;
-      }
-
-      .w-64 {
-        width: 16rem;
-      }
-
-      .fixed {
-        position: fixed;
-      }
-
-      .left-0 {
-        left: 0;
-      }
-
-      .top-0 {
-        top: 0;
-      }
-
-      .ml-64 {
-        margin-left: 16rem;
-      }
-
-      .z-40 {
-        z-index: 40;
-      }
-
-      .z-30 {
-        z-index: 30;
-      }
-
-      .bottom-0 {
-        bottom: 0;
-      }
-
-      .right-0 {
-        right: 0;
-      }
-
-      .overflow-y-auto {
-        overflow-y: auto;
-      }
-
-      .mt-auto {
-        margin-top: auto;
-      }
-
-      .flex-1 {
-        flex: 1;
-      }
-
-      .bg-white {
-        background-color: white;
-      }
-
-      .shadow-lg {
-        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-      }
-
-      .p-4 {
-        padding: 1rem;
-      }
-
-      .p-6 {
-        padding: 1.5rem;
-      }
-
-      .rounded-lg {
-        border-radius: 0.5rem;
-      }
-
-      .text-xl {
-        font-size: 1.25rem;
-      }
-
-      .font-bold {
-        font-weight: 700;
-      }
-
-      .text-gray-800 {
-        color: #1f2937;
-      }
-
-      .hover\:text-blue-600:hover {
-        color: #2563eb;
-      }
-
-      .bg-red-600 {
-        background-color: #dc2626;
-      }
-
-      .hover\:bg-red-700:hover {
-        background-color: #b91c1c;
-      }
-
-      .text-white {
-        color: white;
-      }
-
-      .py-2 {
-        padding-top: 0.5rem;
-        padding-bottom: 0.5rem;
-      }
-
-      .px-4 {
-        padding-left: 1rem;
-        padding-right: 1rem;
-      }
-
-      .rounded-md {
-        border-radius: 0.375rem;
-      }
-
-      .transition-colors {
-        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
-      }
-
-      .duration-200 {
-        transition-duration: 200ms;
-      }
-
-      .w-full {
-        width: 100%;
-      }
-
-      .justify-center {
-        justify-content: center;
-      }
-
-      .items-center {
-        align-items: center;
-      }
-
-      .space-x-2 > * + * {
-        margin-left: 0.5rem;
-      }
-
-      .pb-16 {
-        padding-bottom: 4rem;
-      }
-
-      .overflow-x-hidden {
-        overflow-x: hidden;
-      }
-
-      .mb-4 {
-        margin-bottom: 1rem;
-      }
-
-      .absolute {
-        position: absolute;
-      }
-
-      .bottom-0 {
-        bottom: 0;
-      }
-
-      .h-16 {
-        height: 4rem;
-      }
-
-      .border-t {
-        border-top-width: 1px;
-      }
-
-      .border-gray-200 {
-        border-color: #e5e7eb;
-      }
-
-      .z-50 {
-        z-index: 50;
-      }
-
-      .justify-between {
-        justify-content: space-between;
-      }
-
-      .h-full {
-        height: 100%;
-      }
-
-      .text-gray-600 {
-        color: #4b5563;
-      }
-
-      .text-sm {
-        font-size: 0.875rem;
-      }
-
-      .space-x-1 > * + * {
-        margin-left: 0.25rem;
-      }
-
-      .w-4 {
-        width: 1rem;
-      }
-
-      .h-4 {
-        height: 1rem;
-      }
-
-      .text-red-500 {
-        color: #ef4444;
-      }
-
-      .text-blue-600 {
-        color: #2563eb;
-      }
-
-      .hover\:text-blue-800:hover {
-        color: #1e40af;
-      }
-
-      /* Responsive design for mobile */
-      @media (max-width: 768px) {
-        .w-64.fixed {
-          transform: translateX(-100%);
-          transition: transform 0.3s ease-in-out;
-        }
-
-        .ml-64 {
-          margin-left: 0 !important;
-        }
-
-        /* Adjust footer for mobile */
-        footer div[style*="width: 16rem"] {
-          width: 0 !important;
-        }
-
-        /* You can add a mobile menu toggle here if needed */
-      }
-
-      /* Ensure main content can scroll independently */
-      .main-content {
-        height: 100vh;
-        overflow-y: auto;
-      }
-    </style>
-
     <%= javascript_importmap_tags %>
   </head>
 
   <body class="bg-gray-50">
     <div class="flex">
-      <div class="w-64 fixed left-0 top-0 h-full z-40">
+      <div class="w-64 fixed left-0 top-0 h-full z-40 ease-in-out duration-300 -translate-x-full md:translate-none">
         <%= render "layouts/sidebar" %>
       </div>
-      <div class="flex-1 ml-64 flex flex-col min-h-screen relative">
-        <div class="flex-1 overflow-y-auto main-content" style="padding-bottom: 4rem;">
+
+      <div class="flex-1 md:ml-64 flex flex-col min-h-screen relative">
+        <div class="flex-1 overflow-y-auto main-content pb-4">
           <%= render "shared/flash" %>
           <%= yield %>
         </div>
@@ -297,10 +42,7 @@
 
     <!-- Fixed footer that spans full width -->
     <footer class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-30">
-      <div class="flex justify-between items-center text-gray-600 text-sm px-4 py-3">
-        <!-- Left side empty space to account for sidebar -->
-        <div style="width: 16rem;"></div>
-
+      <div class="flex justify-center items-center text-gray-600 text-sm px-4 py-3 md:pl-64">
         <!-- Center content -->
         <div class="flex items-center space-x-1">
           <span>Built with</span>
@@ -310,9 +52,6 @@
           <span>by</span>
           <a href="https://rubyforgood.org" class="text-blue-600 hover:text-blue-800">Ruby for Good</a>
         </div>
-
-        <!-- Right side empty -->
-        <div style="width: 16rem;"></div>
       </div>
     </footer>
   </body>
diff --git a/app/views/providers/_form.html.erb b/app/views/providers/_form.html.erb
index 34e8ee77..ee97b2f2 100644
--- a/app/views/providers/_form.html.erb
+++ b/app/views/providers/_form.html.erb
@@ -14,7 +14,7 @@
             placeholder: "Enter provider name (e.g., Johns Hopkins, Mayo Clinic)",
             autofocus: true,
             class: "input-field bg-gray-50" %>
-        <p class="mt-2 text-xs text-gray-500 m-0">The official name of the healthcare provider or organization.</p>
+        <p class="help-text">The official name of the healthcare provider or organization.</p>
       </div>
 
       <!-- Provider Type -->
@@ -26,7 +26,7 @@
         <%= form.text_field :provider_type,
             placeholder: "e.g., Hospital, Clinic, Health System",
             class: "input-field bg-gray-50" %>
-        <p class="mt-2 text-xs text-gray-500 m-0">The type or category of healthcare provider.</p>
+        <p class="help-text">The type or category of healthcare provider.</p>
       </div>
 
       <!-- Regions -->
@@ -38,7 +38,7 @@
             { include_hidden: false },
             multiple: true,
             class: "input-field bg-gray-50 min-h-[120px]" %>
-        <p class="mt-2 text-xs text-gray-500 m-0">Select one or more regions this provider serves. Hold Ctrl/Cmd to select multiple.</p>
+        <p class="help-text">Select one or more regions this provider serves. Hold Ctrl/Cmd to select multiple.</p>
       </div>
     </div>
 
diff --git a/app/views/regions/_form.html.erb b/app/views/regions/_form.html.erb
index 1fd4ada2..66263498 100644
--- a/app/views/regions/_form.html.erb
+++ b/app/views/regions/_form.html.erb
@@ -34,11 +34,10 @@
           autofocus: true,
           placeholder: "Enter region name (e.g., North America, Europe, Asia-Pacific)",
           class: "input-field" %>
-      <p class="text-xs text-gray-500 mt-2 m-0">
+      <p class="help-text">
         Provide a clear, descriptive name for the geographical region this service area covers.
       </p>
     </div>
-
   </div>
 
   <!-- Form Actions -->
diff --git a/app/views/topics/index.html.erb b/app/views/topics/index.html.erb
index 326f180c..a58e75fe 100644
--- a/app/views/topics/index.html.erb
+++ b/app/views/topics/index.html.erb
@@ -1,7 +1,7 @@
 <% content_for :title, "Topics" %>
 
-<div class="min-h-screen py-8 bg-gradient-page">
-  <div class="max-w-7xl mx-auto px-4 overflow-x-hidden">
+<div class="bg-gradient-page page-container">
+  <div class="content-wrapper">
 
     <!-- Header Section -->
     <div class="mb-8">
diff --git a/config/brakeman.ignore b/config/brakeman.ignore
index ae08eaa1..afdddbfb 100644
--- a/config/brakeman.ignore
+++ b/config/brakeman.ignore
@@ -24,5 +24,5 @@
       "note": ""
     }
   ],
-  "brakeman_version": "8.0.1"
+  "brakeman_version": "8.0.2"
 }
diff --git a/config/puma.rb b/config/puma.rb
index a248513b..eec8576e 100644
--- a/config/puma.rb
+++ b/config/puma.rb
@@ -39,3 +39,6 @@
 # Specify the PID file. Defaults to tmp/pids/server.pid in development.
 # In other environments, only set the PID file if requested.
 pidfile ENV["PIDFILE"] if ENV["PIDFILE"]
+
+# `rails server` (or just puma) will run the Tailwind watch process in the background.
+plugin :tailwindcss if ENV.fetch("RAILS_ENV", "development") == "development"