diff --git a/TaskTracker.Web/index.html b/TaskTracker.Web/index.html
index 0e0d40d..22fe403 100644
--- a/TaskTracker.Web/index.html
+++ b/TaskTracker.Web/index.html
@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <title>tasktracker-web</title>
   </head>
   <body>
diff --git a/TaskTracker.Web/src/components/KanbanColumn.tsx b/TaskTracker.Web/src/components/KanbanColumn.tsx
index 4e70a3c..da46bb3 100644
--- a/TaskTracker.Web/src/components/KanbanColumn.tsx
+++ b/TaskTracker.Web/src/components/KanbanColumn.tsx
@@ -31,8 +31,8 @@ export default function KanbanColumn({
     <div
       className={`
         flex flex-col min-h-[400px] rounded-xl
-        bg-white/[0.02] border transition-colors duration-150
-        ${isOver ? 'border-white/20 bg-white/[0.04]' : 'border-white/5'}
+        bg-white/[0.02] border transition-all duration-200
+        ${isOver ? 'border-indigo-500/30 bg-white/[0.04] shadow-lg shadow-indigo-500/5' : 'border-white/5'}
       `}
     >
       {/* Column header */}
@@ -74,7 +74,7 @@ export default function KanbanColumn({
               onClick={() => setShowForm(true)}
               className="flex items-center justify-center gap-1.5 w-full py-2 rounded-lg
                 text-xs text-[#64748b] border border-dashed border-white/10
-                hover:text-white hover:border-white/20 transition-colors duration-150"
+                hover:text-white hover:border-white/20 transition-all duration-200"
             >
               <Plus size={14} />
               Add Task
diff --git a/TaskTracker.Web/src/components/Layout.tsx b/TaskTracker.Web/src/components/Layout.tsx
index f64fbd0..0aef1e5 100644
--- a/TaskTracker.Web/src/components/Layout.tsx
+++ b/TaskTracker.Web/src/components/Layout.tsx
@@ -29,7 +29,7 @@ export default function Layout() {
               key={to}
               to={to}
               className={({ isActive }) =>
-                `flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors duration-150 ${
+                `flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 ${
                   isActive
                     ? 'bg-[#6366f1] text-white'
                     : 'text-[#94a3b8] hover:text-white hover:bg-white/5'
@@ -44,7 +44,7 @@ export default function Layout() {
 
         <button
           onClick={() => setCollapsed(!collapsed)}
-          className="flex items-center justify-center p-3 mb-2 mx-2 rounded-lg text-[#94a3b8] hover:text-white hover:bg-white/5 transition-colors duration-150"
+          className="flex items-center justify-center p-3 mb-2 mx-2 rounded-lg text-[#94a3b8] hover:text-white hover:bg-white/5 transition-all duration-200"
           title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
         >
           {collapsed ? <PanelLeftOpen size={20} /> : <PanelLeftClose size={20} />}
diff --git a/TaskTracker.Web/src/components/TaskCard.tsx b/TaskTracker.Web/src/components/TaskCard.tsx
index 1e72794..dcb414b 100644
--- a/TaskTracker.Web/src/components/TaskCard.tsx
+++ b/TaskTracker.Web/src/components/TaskCard.tsx
@@ -65,9 +65,9 @@ export default function TaskCard({ task, onClick }: TaskCardProps) {
       onClick={() => onClick(task.id)}
       className={`
         relative rounded-lg cursor-grab active:cursor-grabbing
-        bg-[#1a1d27] hover:-translate-y-0.5 hover:shadow-lg
-        transition-all duration-150
-        ${isActive ? 'ring-1 ring-cyan-400/60 shadow-[0_0_12px_rgba(6,182,212,0.25)] animate-pulse-glow' : ''}
+        bg-[#1a1d27] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-indigo-500/5
+        transition-all duration-200
+        ${isActive ? 'ring-1 ring-cyan-400/60 shadow-[0_0_12px_rgba(6,182,212,0.25)] animate-pulse-glow' : 'shadow-md shadow-black/20'}
       `}
     >
       {/* Category left border */}
diff --git a/TaskTracker.Web/src/index.css b/TaskTracker.Web/src/index.css
index 8b7e66b..9540225 100644
--- a/TaskTracker.Web/src/index.css
+++ b/TaskTracker.Web/src/index.css
@@ -1,14 +1,36 @@
 @import "tailwindcss";
 
+@theme {
+  --font-sans: 'Inter', system-ui, sans-serif;
+}
+
 @keyframes pulse-glow {
   0%, 100% {
-    box-shadow: 0 0 8px rgba(6, 182, 212, 0.2);
+    box-shadow: 0 0 8px rgba(6, 182, 212, 0.3);
   }
   50% {
-    box-shadow: 0 0 16px rgba(6, 182, 212, 0.4);
+    box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
   }
 }
 
 .animate-pulse-glow {
   animation: pulse-glow 2s ease-in-out infinite;
 }
+
+/* Custom scrollbar for dark theme */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #2a2d37;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #3a3d47;
+}
