diff --git a/Gemfile b/Gemfile
index 0cde951b..b7215262 100644
--- a/Gemfile
+++ b/Gemfile
@@ -12,6 +12,7 @@ gem "csv"
 gem "herb", "~> 0.8.9"
 gem "image_processing", "~> 1.14"
 gem "importmap-rails"
+gem "inline_svg"
 gem "jbuilder"
 gem "kamal", require: false
 gem "mission_control-jobs"
diff --git a/Gemfile.lock b/Gemfile.lock
index f8dec835..c476b4c9 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -236,6 +236,9 @@ GEM
       actionpack (>= 6.0.0)
       activesupport (>= 6.0.0)
       railties (>= 6.0.0)
+    inline_svg (1.10.0)
+      activesupport (>= 3.0)
+      nokogiri (>= 1.6)
     io-console (0.8.2)
     irb (1.16.0)
       pp (>= 0.6.0)
@@ -635,6 +638,7 @@ DEPENDENCIES
   hotwire-spark
   image_processing (~> 1.14)
   importmap-rails
+  inline_svg
   jbuilder
   kamal
   letter_opener
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index dfb9ac40..a08eeeb3 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -19,3 +19,10 @@ body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
     background-color: #f9fafb;
 }
+
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation: none !important;
+        transition: none !important;
+    }
+}
diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css
index e2152a86..c55530db 100644
--- a/app/assets/tailwind/application.css
+++ b/app/assets/tailwind/application.css
@@ -1,137 +1,6 @@
 @import "tailwindcss";
 @import "./components/sidebar.css";
-
-/* Tom Select Tailwind Styles */
-
-/* Hide the original select element */
-.ts-wrapper .ts-control + select,
-.ts-wrapper + select {
-  @apply hidden;
-}
-
-select[data-select-tags-target="tagList"] {
-  @apply hidden;
-}
-
-.ts-wrapper {
-  @apply relative;
-}
-
-.ts-wrapper.single .ts-control,
-.ts-wrapper.multi .ts-control {
-  @apply w-full px-3.5 py-2.5 border border-gray-300 rounded-lg text-sm bg-white transition-all duration-200;
-  min-height: 42px;
-}
-
-.ts-wrapper.multi .ts-control {
-  @apply flex flex-wrap items-center gap-1.5;
-  padding: 0.375rem 0.625rem;
-}
-
-.ts-wrapper .ts-control:focus-within {
-  @apply border-blue-500 outline-none ring-4 ring-blue-500/10;
-}
-
-.ts-wrapper.single .ts-control:hover:not(:focus-within),
-.ts-wrapper.multi .ts-control:hover:not(:focus-within) {
-  @apply border-gray-400 bg-gray-50;
-}
-
-.ts-wrapper .ts-control > input {
-  @apply flex-grow outline-none bg-transparent text-sm;
-  min-width: 60px;
-  padding: 0.25rem;
-}
-
-.ts-wrapper .ts-control > input::placeholder {
-  @apply text-gray-400;
-}
-
-/* Selected items (tags/badges) */
-.ts-wrapper.multi .ts-control > div {
-  @apply inline-flex items-center gap-1.5 px-2.5 py-1 bg-blue-500 text-white text-sm rounded-md;
-  max-width: 100%;
-}
-
-.ts-wrapper.multi .ts-control > div.active {
-  @apply bg-blue-600;
-}
-
-/* Remove button */
-.ts-wrapper .ts-control .remove {
-  @apply inline-flex items-center justify-center ml-1 text-white/80 hover:text-white cursor-pointer;
-  font-size: 1.125rem;
-  line-height: 1;
-  padding: 0;
-  border: none;
-  background: none;
-}
-
-.ts-wrapper .ts-control .remove:hover {
-  @apply text-white;
-}
-
-/* Dropdown */
-.ts-dropdown {
-  @apply absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden;
-  max-height: 280px;
-  overflow-y: auto;
-}
-
-.ts-dropdown .ts-dropdown-content {
-  @apply py-1;
-}
-
-/* Dropdown options */
-.ts-dropdown .option {
-  @apply px-3.5 py-2 text-sm text-gray-700 cursor-pointer transition-colors duration-150;
-}
-
-.ts-dropdown .option:hover,
-.ts-dropdown .option.active {
-  @apply bg-blue-500 text-white;
-}
-
-.ts-dropdown .option.selected {
-  @apply hidden;
-}
-
-/* No results message */
-.ts-dropdown .no-results {
-  @apply px-3.5 py-2 text-sm text-gray-500 italic;
-}
-
-/* Loading state */
-.ts-wrapper.loading::after {
-  content: "";
-  @apply absolute right-3 top-1/2 w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin;
-  margin-top: -0.5rem;
-}
-
-/* Disabled state */
-.ts-wrapper.disabled .ts-control {
-  @apply bg-gray-100 text-gray-500 cursor-not-allowed border-gray-200;
-}
-
-/* Single select caret */
-.ts-wrapper.single .ts-control::after {
-  content: "";
-  @apply absolute right-3 top-1/2 w-0 h-0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 5px solid #6b7280;
-  margin-top: -2.5px;
-  pointer-events: none;
-}
-
-.ts-wrapper.single.input-active .ts-control::after {
-  border-top-color: #3b82f6;
-}
-
-/* Focus visible for accessibility */
-.ts-wrapper .ts-control:focus-visible {
-  @apply outline-none ring-4 ring-blue-500/10;
-}
+@import "./components/tom-select.css";
 
 /* Form Styles */
 .form-label {
@@ -285,7 +154,7 @@ nav.pagy a.gap {
 }
 
 .content-wrapper {
-  @apply max-w-7xl mx-auto overflow-x-hidden p-4 min-h-screen;
+  @apply max-w-7xl mx-auto overflow-x-hidden p-4 pb-16 min-h-screen;
 }
 
 .section-spacing {
diff --git a/app/assets/tailwind/components/tom-select.css b/app/assets/tailwind/components/tom-select.css
new file mode 100644
index 00000000..0a707e3d
--- /dev/null
+++ b/app/assets/tailwind/components/tom-select.css
@@ -0,0 +1,131 @@
+/* Tom Select Tailwind Styles, used for Tags management */
+
+/* Hide the original select element */
+.ts-wrapper .ts-control + select,
+.ts-wrapper + select {
+    @apply hidden;
+}
+
+select[data-select-tags-target="tagList"] {
+    @apply hidden;
+}
+
+.ts-wrapper {
+    @apply relative;
+}
+
+.ts-wrapper.single .ts-control,
+.ts-wrapper.multi .ts-control {
+    @apply w-full px-3.5 py-2.5 border border-gray-300 rounded-lg text-sm bg-white transition-all duration-200;
+    min-height: 42px;
+}
+
+.ts-wrapper.multi .ts-control {
+    @apply flex flex-wrap items-center gap-1.5;
+    padding: 0.375rem 0.625rem;
+}
+
+.ts-wrapper .ts-control:focus-within {
+    @apply border-blue-500 outline-none ring-4 ring-blue-500/10;
+}
+
+.ts-wrapper.single .ts-control:hover:not(:focus-within),
+.ts-wrapper.multi .ts-control:hover:not(:focus-within) {
+    @apply border-gray-400 bg-gray-50;
+}
+
+.ts-wrapper .ts-control > input {
+    @apply flex-grow outline-none bg-transparent text-sm;
+    min-width: 60px;
+    padding: 0.25rem;
+}
+
+.ts-wrapper .ts-control > input::placeholder {
+    @apply text-gray-400;
+}
+
+/* Selected items (tags/badges) */
+.ts-wrapper.multi .ts-control > div {
+    @apply inline-flex items-center gap-1.5 px-2.5 py-1 bg-blue-500 text-white text-sm rounded-md;
+    max-width: 100%;
+}
+
+.ts-wrapper.multi .ts-control > div.active {
+    @apply bg-blue-600;
+}
+
+/* Remove button */
+.ts-wrapper .ts-control .remove {
+    @apply inline-flex items-center justify-center ml-1 text-white/80 hover:text-white cursor-pointer;
+    font-size: 1.125rem;
+    line-height: 1;
+    padding: 0;
+    border: none;
+    background: none;
+}
+
+.ts-wrapper .ts-control .remove:hover {
+    @apply text-white;
+}
+
+/* Dropdown */
+.ts-dropdown {
+    @apply absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden;
+    max-height: 280px;
+    overflow-y: auto;
+}
+
+.ts-dropdown .ts-dropdown-content {
+    @apply py-1;
+}
+
+/* Dropdown options */
+.ts-dropdown .option {
+    @apply px-3.5 py-2 text-sm text-gray-700 cursor-pointer transition-colors duration-150;
+}
+
+.ts-dropdown .option:hover,
+.ts-dropdown .option.active {
+    @apply bg-blue-500 text-white;
+}
+
+.ts-dropdown .option.selected {
+    @apply hidden;
+}
+
+/* No results message */
+.ts-dropdown .no-results {
+    @apply px-3.5 py-2 text-sm text-gray-500 italic;
+}
+
+/* Loading state */
+.ts-wrapper.loading::after {
+    content: "";
+    @apply absolute right-3 top-1/2 w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin;
+    margin-top: -0.5rem;
+}
+
+/* Disabled state */
+.ts-wrapper.disabled .ts-control {
+    @apply bg-gray-100 text-gray-500 cursor-not-allowed border-gray-200;
+}
+
+/* Single select caret */
+.ts-wrapper.single .ts-control::after {
+    content: "";
+    @apply absolute right-3 top-1/2 w-0 h-0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid #6b7280;
+    margin-top: -2.5px;
+    pointer-events: none;
+}
+
+.ts-wrapper.single.input-active .ts-control::after {
+    border-top-color: #3b82f6;
+}
+
+/* Focus visible for accessibility */
+.ts-wrapper .ts-control:focus-visible {
+    @apply outline-none ring-4 ring-blue-500/10;
+}
diff --git a/app/javascript/controllers/home_controller.js b/app/javascript/controllers/home_controller.js
index 5a8ef171..76444425 100644
--- a/app/javascript/controllers/home_controller.js
+++ b/app/javascript/controllers/home_controller.js
@@ -3,28 +3,7 @@ import { Controller } from "@hotwired/stimulus";
 // Connects to data-controller="home"
 export default class extends Controller {
   connect() {
-    this.setupNavbarScroll();
     this.setupSmoothScroll();
-    this.setupIntersectionObserver();
-    this.setupLoadingStates();
-    this.setupIconErrorHandling();
-  }
-
-  disconnect() {
-    window.removeEventListener("scroll", this.handleNavbarScroll);
-  }
-
-  // Navbar scroll effect
-  setupNavbarScroll() {
-    this.handleNavbarScroll = () => {
-      const navbar = document.querySelector(".navbar");
-      if (navbar && window.scrollY > 50) {
-        navbar.classList.add("scrolled");
-      } else if (navbar) {
-        navbar.classList.remove("scrolled");
-      }
-    };
-    window.addEventListener("scroll", this.handleNavbarScroll);
   }
 
   // Smooth scroll for anchor links
@@ -46,74 +25,4 @@ export default class extends Controller {
       });
     });
   }
-
-  // Add loading animation for cards with intersection observer
-  setupIntersectionObserver() {
-    const observerOptions = {
-      threshold: 0.1,
-      rootMargin: "0px 0px -50px 0px",
-    };
-
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach((entry, index) => {
-        if (entry.isIntersecting) {
-          setTimeout(() => {
-            entry.target.style.opacity = "1";
-            entry.target.style.transform = "translateY(0)";
-          }, index * 100);
-          observer.unobserve(entry.target);
-        }
-      });
-    }, observerOptions);
-
-    // Observe cards
-    const cards = document.querySelectorAll(".card");
-    cards.forEach((card) => {
-      card.style.opacity = "0";
-      card.style.transform = "translateY(20px)";
-      card.style.transition = "all 0.6s ease";
-      observer.observe(card);
-    });
-
-    // Handle statistics animation
-    const statistics = document.querySelectorAll(".statistic h3");
-    statistics.forEach((stat) => {
-      observer.observe(stat.parentElement);
-    });
-  }
-
-  // Handle button loading states
-  setupLoadingStates() {
-    document
-      .querySelectorAll('a[href*="session"], button[type="submit"]')
-      .forEach((button) => {
-        button.addEventListener("click", function () {
-          if (!this.classList.contains("loading")) {
-            this.classList.add("loading");
-            const originalText = this.innerHTML;
-            this.innerHTML =
-              '<i class="bi bi-hourglass-split me-2"></i>Loading...';
-
-            // Reset after 3 seconds if still loading
-            setTimeout(() => {
-              if (this.classList.contains("loading")) {
-                this.classList.remove("loading");
-                this.innerHTML = originalText;
-              }
-            }, 3000);
-          }
-        });
-      });
-  }
-
-  // Add error handling for missing icons
-  setupIconErrorHandling() {
-    const icons = document.querySelectorAll('i[class*="bi-"]');
-    icons.forEach((icon) => {
-      const computedStyle = window.getComputedStyle(icon, "::before");
-      if (!computedStyle.content || computedStyle.content === "none") {
-        console.warn("Icon not loading:", icon.className);
-      }
-    });
-  }
 }
diff --git a/app/views/layouts/_sidebar.html.erb b/app/views/layouts/_sidebar.html.erb
index 0a4528c3..c65b9a46 100644
--- a/app/views/layouts/_sidebar.html.erb
+++ b/app/views/layouts/_sidebar.html.erb
@@ -3,7 +3,7 @@
   <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 transition-opacity duration-200 no-underline block") do %>
+        <%= link_to(root_path, class: "hover:opacity-80 transition-opacity duration-200 no-underline block cursor-pointer") do %>
           <%= image_tag("skill.svg", alt: "SkillRx", class: "h-16") %>
         <% end %>
       </div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 0c2f2ef3..696d18b7 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -33,7 +33,7 @@
       </div>
 
       <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">
+        <div class="flex-1 overflow-y-auto main-content">
           <%= render "shared/flash" %>
           <%= yield %>
         </div>
diff --git a/app/views/layouts/home.html.erb b/app/views/layouts/home.html.erb
index d3100c4b..1f24b411 100644
--- a/app/views/layouts/home.html.erb
+++ b/app/views/layouts/home.html.erb
@@ -17,193 +17,9 @@
     <%= javascript_importmap_tags %>
   </head>
 
-  <body class="d-flex flex-column min-vh-100" data-controller="home">
-    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/static/js/initTheme.js"></script>
-
-    <style>
-      /* Modern animations and effects */
-      @keyframes fadeInUp {
-        from {
-          opacity: 0;
-          transform: translateY(30px);
-        }
-        to {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
-      
-      @keyframes fadeInRight {
-        from {
-          opacity: 0;
-          transform: translateX(30px);
-        }
-        to {
-          opacity: 1;
-          transform: translateX(0);
-        }
-      }
-      
-      @keyframes bounce {
-        0%, 20%, 50%, 80%, 100% {
-          transform: translateY(0);
-        }
-        40% {
-          transform: translateY(-10px);
-        }
-        60% {
-          transform: translateY(-5px);
-        }
-      }
-      
-      /* Smooth scrolling */
-      html {
-        scroll-behavior: smooth;
-      }
-      
-      /* Custom scrollbar */
-      ::-webkit-scrollbar {
-        width: 8px;
-      }
-      
-      ::-webkit-scrollbar-track {
-        background: #f1f1f1;
-      }
-      
-      ::-webkit-scrollbar-thumb {
-        background: #c1c1c1;
-        border-radius: 4px;
-      }
-      
-      ::-webkit-scrollbar-thumb:hover {
-        background: #a8a8a8;
-      }
-      
-      /* Navbar blur effect when scrolled */
-      .navbar.scrolled {
-        backdrop-filter: blur(10px);
-        background-color: rgba(255, 255, 255, 0.95) !important;
-      }
-      
-      /* Button hover effects */
-      .btn {
-        transition: all 0.3s ease;
-      }
-      
-      .btn:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
-      }
-      
-      /* Card hover effects */
-      .card {
-        transition: all 0.3s ease;
-      }
-      
-      .feature-card:hover {
-        transform: translateY(-10px);
-        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-      }
-      
-      .contact-card:hover {
-        transform: translateY(-5px);
-        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-      }
-      
-      /* Gradient text */
-      .text-gradient {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
-      }
-      
-      /* Hero section enhancements */
-      .hero-content h1 {
-        text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-      }
-      
-      /* Feature icons */
-      .feature-icon {
-        transition: all 0.3s ease;
-      }
-      
-      .card:hover .feature-icon {
-        transform: scale(1.1);
-      }
-      
-      /* Statistics counter animation */
-      .statistic h3 {
-        transition: all 0.3s ease;
-      }
-      
-      .statistic:hover h3 {
-        transform: scale(1.1);
-      }
-      
-      /* Ensure proper spacing for fixed navbar */
-      body {
-        padding-top: 76px;
-      }
-      
-      /* Mobile responsiveness fixes */
-      @media (max-width: 768px) {
-        body {
-          padding-top: 70px;
-        }
-        
-        .hero-content h1 {
-          font-size: 2.5rem;
-        }
-        
-        .display-5 {
-          font-size: 2rem;
-        }
-      }
-      
-      /* Loading states */
-      .loading {
-        opacity: 0.7;
-        pointer-events: none;
-        position: relative;
-      }
-      
-      /* Icon fallbacks */
-      .bi::before {
-        font-family: "bootstrap-icons" !important;
-      }
-      
-      /* Improved accessibility */
-      @media (prefers-reduced-motion: reduce) {
-        * {
-          animation: none !important;
-          transition: none !important;
-        }
-      }
-      
-      /* Print styles */
-      @media print {
-        .navbar, .btn, footer {
-          display: none !important;
-        }
-        
-        .hero-content {
-          color: black !important;
-        }
-      }
-    </style>
-
+  <body class="min-vh-100 pt-16" data-controller="home">
     <!-- Start content here -->
     <%= yield %>
     <!-- End content -->
-
-    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/static/js/components/dark.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/extensions/perfect-scrollbar/perfect-scrollbar.min.js"></script>
-
-    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/js/app.js"></script>
-
-    <!-- Need: Apexcharts -->
-    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/extensions/apexcharts/apexcharts.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/static/js/pages/dashboard.js"></script>
   </body>
 </html>
diff --git a/app/views/layouts/session.html.erb b/app/views/layouts/session.html.erb
index ff512c03..3bee4eba 100644
--- a/app/views/layouts/session.html.erb
+++ b/app/views/layouts/session.html.erb
@@ -16,66 +16,13 @@
     <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
     <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
 
-
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/css/app.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/css/app-dark.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/css/iconly.css">
-
     <%# Includes all stylesheet files in app/assets/stylesheets %>
     <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
   </head>
-
   <body style="background: #f8f9fa;">
-    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/static/js/initTheme.js"></script>
-
     <!-- Start content here -->
     <%= yield %>
     <!-- End content -->
-
-    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/static/js/components/dark.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/extensions/perfect-scrollbar/perfect-scrollbar.min.js"></script>
-
-    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/js/app.js"></script>
-
-    <!-- Need: Apexcharts -->
-    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/extensions/apexcharts/apexcharts.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/static/js/pages/dashboard.js"></script>
-
-    <script>
-      // Enhanced form interactions
-      document.addEventListener('DOMContentLoaded', function() {
-        // Password visibility toggle (if needed)
-        const passwordFields = document.querySelectorAll('input[type="password"]');
-        passwordFields.forEach(field => {
-          // Create wrapper div for the input field
-          const wrapper = document.createElement('div');
-          wrapper.style.position = 'relative';
-          wrapper.style.display = 'block';
-
-          // Insert wrapper before the field and move field into wrapper
-          field.parentNode.insertBefore(wrapper, field);
-          wrapper.appendChild(field);
-
-          // Create toggle button
-          const toggleBtn = document.createElement('button');
-          toggleBtn.type = 'button';
-          toggleBtn.className = 'btn btn-link position-absolute end-0 top-50 translate-middle-y me-3';
-          toggleBtn.innerHTML = '<i class="bi bi-eye"></i>';
-          toggleBtn.style.zIndex = '10';
-          toggleBtn.style.border = 'none';
-          toggleBtn.style.background = 'none';
-
-          // Append button to wrapper
-          wrapper.appendChild(toggleBtn);
-
-          toggleBtn.addEventListener('click', function() {
-            const type = field.getAttribute('type') === 'password' ? 'text' : 'password';
-            field.setAttribute('type', type);
-            this.innerHTML = type === 'password' ? '<i class="bi bi-eye"></i>' : '<i class="bi bi-eye-slash"></i>';
-          });
-        });
-      });
-    </script>
   </body>
 </html>
diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
index c353dce7..f3fa8a8d 100644
--- a/app/views/sessions/new.html.erb
+++ b/app/views/sessions/new.html.erb
@@ -38,10 +38,10 @@
       <!-- Logo and branding -->
       <div class="text-center">
         <%= image_tag("skill.svg", alt: "SkillRx", class: "mx-auto h-20 w-auto mb-6") %>
-        <h2 class="mt-6 text-3xl font-extrabold text-gray-900">
+        <h2 class="mt-6 text-3xl font-extrabold text-gray-400">
           Welcome back
         </h2>
-        <p class="mt-2 text-sm text-gray-600">
+        <p class="mt-2 text-sm text-gray-500">
           Sign in to continue your medical education journey
         </p>
       </div>
diff --git a/app/views/topics/index.html.erb b/app/views/topics/index.html.erb
index a58e75fe..df5b3a1e 100644
--- a/app/views/topics/index.html.erb
+++ b/app/views/topics/index.html.erb
@@ -83,14 +83,14 @@
             <table class="w-full border-collapse table-fixed">
               <thead>
                 <tr class="bg-gradient-gray border-b-2 border-gray-200">
-                  <th class="px-6 py-5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider overflow-hidden text-ellipsis">Title</th>
-                  <th class="hide-mobile px-6 py-5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider overflow-hidden text-ellipsis">Description</th>
-                  <th class="hide-mobile px-6 py-5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider overflow-hidden text-ellipsis">UID</th>
-                  <th class="px-6 py-5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider overflow-hidden text-ellipsis">Language</th>
-                  <th class="hide-mobile px-6 py-5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider overflow-hidden text-ellipsis">Provider</th>
-                  <th class="px-6 py-5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider overflow-hidden text-ellipsis"># of Documents</th>
-                  <th class="px-6 py-5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider overflow-hidden text-ellipsis">State</th>
-                  <th class="actions-col px-6 py-5 text-right text-xs font-bold text-gray-600 uppercase tracking-wider w-40">Actions</th>
+                  <th class="px-6 py-5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider truncate">Title</th>
+                  <th class="px-6 py-5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider truncate hide-mobile">Description</th>
+                  <th class="px-6 py-5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider truncate hide-mobile">UID</th>
+                  <th class="px-6 py-5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider truncate">Language</th>
+                  <th class="px-6 py-5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider truncate hide-mobile">Provider</th>
+                  <th class="px-6 py-5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider truncate"># of Documents</th>
+                  <th class="px-6 py-5 text-left text-xs font-bold text-gray-600 uppercase tracking-wider truncate">State</th>
+                  <th class="px-6 py-5 text-right text-xs font-bold text-gray-600 uppercase tracking-wider w-40 actions-col">Actions</th>
                 </tr>
               </thead>
               <%= render "list", topics: @topics, params: search_params %>