diff --git a/.env.example b/.env.example
index 78748e2..4ec494b 100644
--- a/.env.example
+++ b/.env.example
@@ -1,4 +1,4 @@
 # Example environment variables
 DATABASE_URL=postgres://user:password@localhost:5432/cloud_costs?sslmode=disable
 JWT_SECRET=your_jwt_secret_here
-NEXT_PUBLIC_API_URL=http://localhost:8000
\ No newline at end of file
+NEXT_PUBLIC_API_URL=http://localhost:8080
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 7e14a8c..c580ce8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,4 +38,13 @@ Thumbs.db
 
 # Build outputs
 dist/
-build/
\ No newline at end of file
+build/
+*.tsbuildinfo
+
+# Claude / AI tooling (never commit)
+.claude/
+CLAUDE.md
+.qodo/
+
+# Local-only compose overrides
+docker-compose.override.yml
\ No newline at end of file
diff --git a/frontend/app/accounts/page.tsx b/frontend/app/accounts/page.tsx
index 087b40e..6627043 100644
--- a/frontend/app/accounts/page.tsx
+++ b/frontend/app/accounts/page.tsx
@@ -3,11 +3,16 @@
 import { useState, useEffect } from 'react'
 import { useRouter } from 'next/navigation'
 import api from '@/lib/api'
+import { withMinDuration } from '@/lib/utils'
+import { AccountRowSkeleton } from '@/components/ui/Skeleton'
+import { Spinner } from '@/components/ui/Spinner'
+import { ThemeToggle } from '@/components/theme/ThemeToggle'
 
 export default function AccountsPage() {
   const router = useRouter()
   const [activeTab, setActiveTab] = useState('aws')
   const [loading, setLoading] = useState(false)
+  const [accountsLoading, setAccountsLoading] = useState(true)
   const [error, setError] = useState('')
   const [success, setSuccess] = useState('')
   const [existingAccounts, setExistingAccounts] = useState<any[]>([])
@@ -50,10 +55,12 @@ export default function AccountsPage() {
 
   const fetchAccounts = async () => {
     try {
-      const response = await api.get('/accounts')
+      const response = await withMinDuration(api.get('/accounts'), 1000)
       setExistingAccounts(response.data)
     } catch (error) {
       console.error('Failed to fetch accounts:', error)
+    } finally {
+      setAccountsLoading(false)
     }
   }
 
@@ -145,31 +152,33 @@ export default function AccountsPage() {
 
   const getProviderBadgeColor = (provider: string) => {
     switch(provider) {
-      case 'aws': return 'bg-orange-500/20 text-orange-400'
-      case 'gcp': return 'bg-blue-500/20 text-blue-400'
-      case 'azure': return 'bg-blue-600/20 text-blue-400'
-      default: return 'bg-gray-500/20 text-gray-400'
+      case 'aws': return 'bg-orange-500/20 text-orange-700 dark:text-orange-400'
+      case 'gcp': return 'bg-blue-500/20 text-blue-600 dark:text-blue-400'
+      case 'azure': return 'bg-cyan-600/20 text-cyan-700 dark:text-cyan-400'
+      default: return 'bg-gray-500/20 text-gray-600 dark:text-gray-400'
     }
   }
 
   return (
-    <div className="min-h-screen bg-slate-950">
-      <header className="bg-slate-900 border-b border-slate-800 sticky top-0 z-10">
-        <div className="flex items-center justify-between px-6 py-4">
-          <h1 className="text-xl font-bold text-white">Cloud Cost Optimization Hub</h1>
-          <div className="flex items-center gap-4">
-            <a href="/dashboard" className="text-slate-400 hover:text-white transition">
+    <div className="min-h-screen bg-slate-50 dark:bg-slate-950">
+      <header className="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 sticky top-0 z-10">
+        <div className="flex flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6">
+          <h1 className="text-xl font-bold text-slate-900 dark:text-white">Cloud Cost Optimization Hub</h1>
+          <div className="flex flex-wrap items-center gap-3 sm:gap-4">
+            <a href="/dashboard" className="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition">
               Dashboard
             </a>
-            <a href="/recommendations" className="text-slate-400 hover:text-white transition">
+            <a href="/recommendations" className="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition">
               Recommendations
             </a>
+            <ThemeToggle />
             <button
+              type="button"
               onClick={() => {
                 localStorage.removeItem('token')
                 router.push('/login')
               }}
-              className="text-slate-400 hover:text-white transition"
+              className="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition"
             >
               Sign Out
             </button>
@@ -177,25 +186,34 @@ export default function AccountsPage() {
         </div>
       </header>
 
-      <main className="p-6 max-w-4xl mx-auto">
+      <main className="p-4 sm:p-6 max-w-4xl mx-auto">
         {/* Existing Accounts Section */}
-        {existingAccounts.length > 0 && (
+        {accountsLoading ? (
           <div className="mb-8">
-            <h2 className="text-lg font-semibold text-white mb-4">Connected Accounts</h2>
+            <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">Connected Accounts</h2>
+            <div className="space-y-2">
+              {Array.from({ length: 2 }).map((_, i) => (
+                <AccountRowSkeleton key={i} />
+              ))}
+            </div>
+          </div>
+        ) : existingAccounts.length > 0 && (
+          <div className="mb-8 animate-fade-in">
+            <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">Connected Accounts</h2>
             <div className="space-y-2">
               {existingAccounts.map((account) => (
-                <div key={account.id} className="bg-slate-900 rounded-lg border border-slate-800 p-4 flex items-center justify-between">
+                <div key={account.id} className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm transition-shadow hover:shadow-md hover:border-slate-300 dark:shadow-none dark:hover:border-slate-700 p-4 flex items-center justify-between">
                   <div className="flex items-center gap-3">
                     <span className={`px-2 py-1 rounded text-xs font-medium ${getProviderBadgeColor(account.provider)}`}>
                       {account.provider.toUpperCase()}
                     </span>
                     <div>
-                      <p className="text-white font-medium">{account.name}</p>
-                      <p className="text-slate-400 text-sm">Account ID: {account.account_id}</p>
+                      <p className="text-slate-900 dark:text-white font-medium">{account.name}</p>
+                      <p className="text-slate-600 dark:text-slate-400 text-sm">Account ID: {account.account_id}</p>
                     </div>
                   </div>
                   <span className={`text-xs px-2 py-1 rounded ${
-                    account.status === 'active' ? 'bg-green-500/20 text-green-400' : 'bg-red-500/20 text-red-400'
+                    account.status === 'active' ? 'bg-green-500/20 text-green-700 dark:text-green-400' : 'bg-red-500/20 text-red-600 dark:text-red-400'
                   }`}>
                     {account.status}
                   </span>
@@ -206,35 +224,38 @@ export default function AccountsPage() {
         )}
 
         {/* Add Account Section with Tabs */}
-        <div className="bg-slate-900 rounded-lg border border-slate-800">
-          <div className="border-b border-slate-800">
-            <div className="flex">
+        <div className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm transition-shadow hover:shadow-md hover:border-slate-300 dark:shadow-none dark:hover:border-slate-700">
+          <div className="border-b border-slate-200 dark:border-slate-800">
+            <div className="flex overflow-x-auto">
               <button
+                type="button"
                 onClick={() => setActiveTab('aws')}
                 className={`px-6 py-3 text-sm font-medium transition ${
                   activeTab === 'aws'
-                    ? 'text-orange-400 border-b-2 border-orange-400'
-                    : 'text-slate-400 hover:text-white'
+                    ? 'text-orange-700 dark:text-orange-400 border-b-2 border-orange-600 dark:border-orange-400'
+                    : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white'
                 }`}
               >
                 AWS
               </button>
               <button
+                type="button"
                 onClick={() => setActiveTab('gcp')}
                 className={`px-6 py-3 text-sm font-medium transition ${
                   activeTab === 'gcp'
-                    ? 'text-blue-400 border-b-2 border-blue-400'
-                    : 'text-slate-400 hover:text-white'
+                    ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
+                    : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white'
                 }`}
               >
                 Google Cloud
               </button>
               <button
+                type="button"
                 onClick={() => setActiveTab('azure')}
                 className={`px-6 py-3 text-sm font-medium transition ${
                   activeTab === 'azure'
-                    ? 'text-blue-400 border-b-2 border-blue-400'
-                    : 'text-slate-400 hover:text-white'
+                    ? 'text-cyan-700 dark:text-cyan-400 border-b-2 border-cyan-600 dark:border-cyan-400'
+                    : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white'
                 }`}
               >
                 Azure
@@ -244,13 +265,13 @@ export default function AccountsPage() {
 
           <div className="p-6">
             {error && (
-              <div className="mb-4 bg-red-500/10 border border-red-500/50 text-red-400 px-4 py-2 rounded-lg">
+              <div className="mb-4 bg-red-500/10 border border-red-500/50 text-red-600 dark:text-red-400 px-4 py-2 rounded-lg">
                 {error}
               </div>
             )}
 
             {success && (
-              <div className="mb-4 bg-green-500/10 border border-green-500/50 text-green-400 px-4 py-2 rounded-lg">
+              <div className="mb-4 bg-green-500/10 border border-green-500/50 text-green-700 dark:text-green-400 px-4 py-2 rounded-lg">
                 {success}
               </div>
             )}
@@ -259,7 +280,7 @@ export default function AccountsPage() {
             {activeTab === 'aws' && (
               <form onSubmit={handleAwsSubmit} className="space-y-4">
                 <div>
-                  <label className="block text-sm font-medium text-slate-300 mb-1">
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                     Account Name
                   </label>
                   <input
@@ -268,13 +289,13 @@ export default function AccountsPage() {
                     value={awsForm.name}
                     onChange={handleAwsChange}
                     required
-                    className="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-orange-500"
+                    className="w-full px-4 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-orange-500"
                     placeholder="Production AWS Account"
                   />
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-slate-300 mb-1">
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                     AWS Account ID
                   </label>
                   <input
@@ -283,13 +304,13 @@ export default function AccountsPage() {
                     value={awsForm.account_id}
                     onChange={handleAwsChange}
                     required
-                    className="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-orange-500"
+                    className="w-full px-4 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-orange-500"
                     placeholder="123456789012"
                   />
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-slate-300 mb-1">
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                     Access Key ID
                   </label>
                   <input
@@ -298,13 +319,13 @@ export default function AccountsPage() {
                     value={awsForm.access_key_id}
                     onChange={handleAwsChange}
                     required
-                    className="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-orange-500"
+                    className="w-full px-4 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-orange-500"
                     placeholder="AKIA..."
                   />
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-slate-300 mb-1">
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                     Secret Access Key
                   </label>
                   <input
@@ -313,20 +334,20 @@ export default function AccountsPage() {
                     value={awsForm.secret_access_key}
                     onChange={handleAwsChange}
                     required
-                    className="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-orange-500"
+                    className="w-full px-4 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-orange-500"
                     placeholder="..."
                   />
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-slate-300 mb-1">
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                     Region
                   </label>
                   <select
                     name="region"
                     value={awsForm.region}
                     onChange={handleAwsChange}
-                    className="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-orange-500"
+                    className="w-full px-4 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-orange-500"
                   >
                     <option value="us-east-1">US East (N. Virginia)</option>
                     <option value="us-east-2">US East (Ohio)</option>
@@ -341,11 +362,11 @@ export default function AccountsPage() {
                 </div>
 
                 <div className="pt-2">
-                  <h3 className="text-sm font-medium text-slate-300 mb-2">Required IAM Permissions</h3>
-                  <p className="text-xs text-slate-400 mb-2">
+                  <h3 className="text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Required IAM Permissions</h3>
+                  <p className="text-xs text-slate-600 dark:text-slate-400 mb-2">
                     Your AWS access key needs these permissions:
                   </p>
-                  <pre className="bg-slate-800 p-3 rounded-lg text-xs text-slate-300 overflow-x-auto">
+                  <pre className="bg-slate-100 dark:bg-slate-800 p-3 rounded-lg text-xs text-slate-700 dark:text-slate-300 overflow-x-auto">
 {`{
   "Version": "2012-10-17",
   "Statement": [
@@ -365,8 +386,9 @@ export default function AccountsPage() {
                 <button
                   type="submit"
                   disabled={loading}
-                  className="w-full py-2 px-4 bg-orange-600 hover:bg-orange-700 text-white font-medium rounded-lg transition disabled:opacity-50"
+                  className="inline-flex w-full items-center justify-center gap-2 py-2 px-4 bg-orange-600 hover:bg-orange-700 text-white font-medium rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
                 >
+                  {loading && <Spinner />}
                   {loading ? 'Adding Account...' : 'Add AWS Account'}
                 </button>
               </form>
@@ -376,7 +398,7 @@ export default function AccountsPage() {
             {activeTab === 'gcp' && (
               <form onSubmit={handleGcpSubmit} className="space-y-4">
                 <div>
-                  <label className="block text-sm font-medium text-slate-300 mb-1">
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                     Account Name
                   </label>
                   <input
@@ -385,13 +407,13 @@ export default function AccountsPage() {
                     value={gcpForm.name}
                     onChange={handleGcpChange}
                     required
-                    className="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-full px-4 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                     placeholder="Production GCP Account"
                   />
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-slate-300 mb-1">
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                     Project ID
                   </label>
                   <input
@@ -400,13 +422,13 @@ export default function AccountsPage() {
                     value={gcpForm.project_id}
                     onChange={handleGcpChange}
                     required
-                    className="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-full px-4 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                     placeholder="my-project-123"
                   />
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-slate-300 mb-1">
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                     Client Email
                   </label>
                   <input
@@ -415,13 +437,13 @@ export default function AccountsPage() {
                     value={gcpForm.client_email}
                     onChange={handleGcpChange}
                     required
-                    className="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-full px-4 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                     placeholder="service-account@project.iam.gserviceaccount.com"
                   />
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-slate-300 mb-1">
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                     Private Key (JSON)
                   </label>
                   <textarea
@@ -430,7 +452,7 @@ export default function AccountsPage() {
                     onChange={handleGcpChange}
                     required
                     rows={6}
-                    className="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-full px-4 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-slate-900 dark:text-white font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                     placeholder='{"type": "service_account", "project_id": "...", ...}'
                   />
                   <p className="text-xs text-slate-500 mt-1">
@@ -439,11 +461,11 @@ export default function AccountsPage() {
                 </div>
 
                 <div className="pt-2">
-                  <h3 className="text-sm font-medium text-slate-300 mb-2">Required GCP Permissions</h3>
-                  <p className="text-xs text-slate-400">
+                  <h3 className="text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Required GCP Permissions</h3>
+                  <p className="text-xs text-slate-600 dark:text-slate-400">
                     Your service account needs the following roles:
                   </p>
-                  <ul className="text-xs text-slate-400 list-disc list-inside mt-2">
+                  <ul className="text-xs text-slate-600 dark:text-slate-400 list-disc list-inside mt-2">
                     <li>roles/billing.viewer</li>
                     <li>roles/billing.costsViewer</li>
                   </ul>
@@ -452,8 +474,9 @@ export default function AccountsPage() {
                 <button
                   type="submit"
                   disabled={loading}
-                  className="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition disabled:opacity-50"
+                  className="inline-flex w-full items-center justify-center gap-2 py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
                 >
+                  {loading && <Spinner />}
                   {loading ? 'Adding Account...' : 'Add GCP Account'}
                 </button>
               </form>
@@ -463,7 +486,7 @@ export default function AccountsPage() {
             {activeTab === 'azure' && (
               <form onSubmit={handleAzureSubmit} className="space-y-4">
                 <div>
-                  <label className="block text-sm font-medium text-slate-300 mb-1">
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                     Account Name
                   </label>
                   <input
@@ -472,13 +495,13 @@ export default function AccountsPage() {
                     value={azureForm.name}
                     onChange={handleAzureChange}
                     required
-                    className="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-full px-4 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                     placeholder="Production Azure Account"
                   />
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-slate-300 mb-1">
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                     Subscription ID
                   </label>
                   <input
@@ -487,13 +510,13 @@ export default function AccountsPage() {
                     value={azureForm.subscription_id}
                     onChange={handleAzureChange}
                     required
-                    className="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-full px-4 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                     placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
                   />
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-slate-300 mb-1">
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                     Tenant ID
                   </label>
                   <input
@@ -502,13 +525,13 @@ export default function AccountsPage() {
                     value={azureForm.tenant_id}
                     onChange={handleAzureChange}
                     required
-                    className="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-full px-4 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                     placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
                   />
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-slate-300 mb-1">
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                     Client ID
                   </label>
                   <input
@@ -517,13 +540,13 @@ export default function AccountsPage() {
                     value={azureForm.client_id}
                     onChange={handleAzureChange}
                     required
-                    className="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-full px-4 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                     placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
                   />
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-slate-300 mb-1">
+                  <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                     Client Secret
                   </label>
                   <input
@@ -532,17 +555,17 @@ export default function AccountsPage() {
                     value={azureForm.client_secret}
                     onChange={handleAzureChange}
                     required
-                    className="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    className="w-full px-4 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
                     placeholder="..."
                   />
                 </div>
 
                 <div className="pt-2">
-                  <h3 className="text-sm font-medium text-slate-300 mb-2">Required Azure Permissions</h3>
-                  <p className="text-xs text-slate-400">
+                  <h3 className="text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Required Azure Permissions</h3>
+                  <p className="text-xs text-slate-600 dark:text-slate-400">
                     Your service principal needs the following role:
                   </p>
-                  <ul className="text-xs text-slate-400 list-disc list-inside mt-2">
+                  <ul className="text-xs text-slate-600 dark:text-slate-400 list-disc list-inside mt-2">
                     <li>Reader role on the subscription</li>
                     <li>Cost Management Reader</li>
                   </ul>
@@ -551,8 +574,9 @@ export default function AccountsPage() {
                 <button
                   type="submit"
                   disabled={loading}
-                  className="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition disabled:opacity-50"
+                  className="inline-flex w-full items-center justify-center gap-2 py-2 px-4 bg-cyan-600 hover:bg-cyan-700 text-white font-medium rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
                 >
+                  {loading && <Spinner />}
                   {loading ? 'Adding Account...' : 'Add Azure Account'}
                 </button>
               </form>
@@ -562,4 +586,4 @@ export default function AccountsPage() {
       </main>
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/app/dashboard/page.tsx b/frontend/app/dashboard/page.tsx
index eb5ff9d..8290f55 100644
--- a/frontend/app/dashboard/page.tsx
+++ b/frontend/app/dashboard/page.tsx
@@ -4,7 +4,11 @@ import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import axios from 'axios'
 import { getDashboardSummary, DashboardSummary } from '@/lib/api'
-import { formatCurrency } from '@/lib/utils'
+import { formatCurrency, withMinDuration } from '@/lib/utils'
+import { Skeleton, StatCardSkeleton, ChartSkeleton, RecRowSkeleton } from '@/components/ui/Skeleton'
+import { ThemeToggle } from '@/components/theme/ThemeToggle'
+import { useTheme } from '@/components/theme/ThemeProvider'
+import { DollarSign, Lightbulb, TrendingDown, Bell } from 'lucide-react'
 import {
   LineChart,
   Line,
@@ -26,6 +30,11 @@ export default function DashboardPage() {
   const router = useRouter()
   const [data, setData] = useState<DashboardSummary | null>(null)
   const [loading, setLoading] = useState(true)
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === 'dark'
+  const gridColor = isDark ? '#334155' : '#e2e8f0'
+  const axisColor = isDark ? '#94a3b8' : '#64748b'
+  const tooltipBg = isDark ? '#1e293b' : '#ffffff'
 
   useEffect(() => {
     const token = localStorage.getItem('token')
@@ -36,7 +45,7 @@ export default function DashboardPage() {
 
     const fetchData = async () => {
       try {
-        const summary = await getDashboardSummary()
+        const summary = await withMinDuration(getDashboardSummary(), 1000)
         setData(summary)
       } catch (error) {
         console.error('Failed to fetch dashboard data:', error)
@@ -52,39 +61,33 @@ export default function DashboardPage() {
     fetchData()
   }, [router])
 
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
-      </div>
-    )
-  }
-
   // Prepare pie chart data
   const pieData = data?.cost_by_service
     ? Object.entries(data.cost_by_service).map(([name, value]) => ({ name, value }))
     : []
 
   return (
-    <div className="min-h-screen bg-slate-950">
+    <div className="min-h-screen bg-slate-50 dark:bg-slate-950">
       {/* Header */}
-      <header className="bg-slate-900 border-b border-slate-800 sticky top-0 z-10">
-        <div className="flex items-center justify-between px-6 py-4">
-          <h1 className="text-xl font-bold text-white">Cloud Cost Optimization Hub</h1>
-          <div className="flex items-center gap-4">
+      <header className="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 sticky top-0 z-10">
+        <div className="flex flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6">
+          <h1 className="text-xl font-bold text-slate-900 dark:text-white">Cloud Cost Optimization Hub</h1>
+          <div className="flex flex-wrap items-center gap-3 sm:gap-4">
             <a
               href="/accounts"
-              className="text-slate-400 hover:text-white transition"
+              className="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition"
             >
               Add Account
             </a>
+            <ThemeToggle />
             <button
+              type="button"
               onClick={() => {
                 localStorage.removeItem('token')
                 localStorage.removeItem('user')
                 router.push('/login')
               }}
-              className="text-slate-400 hover:text-white transition"
+              className="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition"
             >
               Sign Out
             </button>
@@ -92,40 +95,87 @@ export default function DashboardPage() {
         </div>
       </header>
 
-      <main className="p-6">
+      <main className="p-4 sm:p-6">
+        {loading ? (
+          <>
+            {/* Skeleton: Stat cards */}
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+              {Array.from({ length: 4 }).map((_, i) => (
+                <StatCardSkeleton key={i} />
+              ))}
+            </div>
+            {/* Skeleton: Charts */}
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+              <ChartSkeleton />
+              <ChartSkeleton />
+            </div>
+            {/* Skeleton: Top recommendations */}
+            <div className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm transition-shadow hover:shadow-md hover:border-slate-300 dark:shadow-none dark:hover:border-slate-700">
+              <div className="px-6 py-4 border-b border-slate-200 dark:border-slate-800">
+                <Skeleton className="h-5 w-44" />
+              </div>
+              <div className="divide-y divide-slate-200 dark:divide-slate-800">
+                {Array.from({ length: 3 }).map((_, i) => (
+                  <RecRowSkeleton key={i} />
+                ))}
+              </div>
+            </div>
+          </>
+        ) : (
+        <div className="animate-fade-in">
         {/* Stats Cards */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-          <div className="bg-slate-900 rounded-lg p-6 border border-slate-800">
-            <p className="text-slate-400 text-sm mb-1">Total Cost (30d)</p>
-            <p className="text-3xl font-bold text-white">{formatCurrency(data?.total_cost || 0)}</p>
+          <div className="bg-white dark:bg-slate-900 rounded-xl p-6 border border-slate-200 dark:border-slate-800 shadow-sm transition-shadow hover:shadow-md hover:border-slate-300 dark:shadow-none dark:hover:border-slate-700">
+            <div className="flex items-center gap-3 mb-3">
+              <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-blue-100 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400">
+                <DollarSign className="h-5 w-5" />
+              </span>
+              <p className="text-slate-600 dark:text-slate-400 text-sm">Total Cost (30d)</p>
+            </div>
+            <p className="text-3xl font-bold text-slate-900 dark:text-white">{formatCurrency(data?.total_cost || 0)}</p>
           </div>
-          <div className="bg-slate-900 rounded-lg p-6 border border-slate-800">
-            <p className="text-slate-400 text-sm mb-1">Active Recommendations</p>
-            <p className="text-3xl font-bold text-white">{data?.recommendations_count || 0}</p>
+          <div className="bg-white dark:bg-slate-900 rounded-xl p-6 border border-slate-200 dark:border-slate-800 shadow-sm transition-shadow hover:shadow-md hover:border-slate-300 dark:shadow-none dark:hover:border-slate-700">
+            <div className="flex items-center gap-3 mb-3">
+              <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-violet-100 text-violet-600 dark:bg-violet-500/10 dark:text-violet-400">
+                <Lightbulb className="h-5 w-5" />
+              </span>
+              <p className="text-slate-600 dark:text-slate-400 text-sm">Active Recommendations</p>
+            </div>
+            <p className="text-3xl font-bold text-slate-900 dark:text-white">{data?.recommendations_count || 0}</p>
           </div>
-          <div className="bg-slate-900 rounded-lg p-6 border border-slate-800">
-            <p className="text-slate-400 text-sm mb-1">Potential Savings</p>
-            <p className="text-3xl font-bold text-green-400">{formatCurrency(data?.potential_savings || 0)}</p>
+          <div className="bg-white dark:bg-slate-900 rounded-xl p-6 border border-slate-200 dark:border-slate-800 shadow-sm transition-shadow hover:shadow-md hover:border-slate-300 dark:shadow-none dark:hover:border-slate-700">
+            <div className="flex items-center gap-3 mb-3">
+              <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-700 dark:bg-green-500/10 dark:text-green-400">
+                <TrendingDown className="h-5 w-5" />
+              </span>
+              <p className="text-slate-600 dark:text-slate-400 text-sm">Potential Savings</p>
+            </div>
+            <p className="text-3xl font-bold text-green-700 dark:text-green-400">{formatCurrency(data?.potential_savings || 0)}</p>
           </div>
-          <div className="bg-slate-900 rounded-lg p-6 border border-slate-800">
-            <p className="text-slate-400 text-sm mb-1">Unread Alerts</p>
-            <p className="text-3xl font-bold text-yellow-400">{data?.unread_alerts || 0}</p>
+          <div className="bg-white dark:bg-slate-900 rounded-xl p-6 border border-slate-200 dark:border-slate-800 shadow-sm transition-shadow hover:shadow-md hover:border-slate-300 dark:shadow-none dark:hover:border-slate-700">
+            <div className="flex items-center gap-3 mb-3">
+              <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400">
+                <Bell className="h-5 w-5" />
+              </span>
+              <p className="text-slate-600 dark:text-slate-400 text-sm">Unread Alerts</p>
+            </div>
+            <p className="text-3xl font-bold text-yellow-700 dark:text-yellow-400">{data?.unread_alerts || 0}</p>
           </div>
         </div>
 
         {/* Charts Row */}
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
           {/* Daily Cost Trend */}
-          <div className="bg-slate-900 rounded-lg p-6 border border-slate-800">
-            <h2 className="text-lg font-semibold text-white mb-4">Daily Cost Trend</h2>
+          <div className="bg-white dark:bg-slate-900 rounded-xl p-6 border border-slate-200 dark:border-slate-800 shadow-sm transition-shadow hover:shadow-md hover:border-slate-300 dark:shadow-none dark:hover:border-slate-700">
+            <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">Daily Cost Trend</h2>
             <div className="h-80">
               <ResponsiveContainer width="100%" height="100%">
                 <LineChart data={data?.daily_costs || []}>
-                  <CartesianGrid strokeDasharray="3 3" stroke="#334155" />
-                  <XAxis dataKey="date" stroke="#94a3b8" />
-                  <YAxis stroke="#94a3b8" tickFormatter={(value) => `$${value}`} />
+                  <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
+                  <XAxis dataKey="date" stroke={axisColor} />
+                  <YAxis stroke={axisColor} tickFormatter={(value) => `$${value}`} />
                   <Tooltip
-                    contentStyle={{ backgroundColor: '#1e293b', border: 'none' }}
+                    contentStyle={{ backgroundColor: tooltipBg, border: `1px solid ${gridColor}`, borderRadius: 8, color: axisColor }}
                     formatter={(value: number) => [`$${value.toFixed(2)}`, 'Cost']}
                   />
                   <Line type="monotone" dataKey="cost" stroke="#3b82f6" strokeWidth={2} dot={false} />
@@ -135,8 +185,8 @@ export default function DashboardPage() {
           </div>
 
           {/* Cost by Service (Pie Chart) */}
-          <div className="bg-slate-900 rounded-lg p-6 border border-slate-800">
-            <h2 className="text-lg font-semibold text-white mb-4">Cost by Service</h2>
+          <div className="bg-white dark:bg-slate-900 rounded-xl p-6 border border-slate-200 dark:border-slate-800 shadow-sm transition-shadow hover:shadow-md hover:border-slate-300 dark:shadow-none dark:hover:border-slate-700">
+            <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">Cost by Service</h2>
             <div className="h-80">
               {pieData.length > 0 ? (
                 <ResponsiveContainer width="100%" height="100%">
@@ -169,28 +219,28 @@ export default function DashboardPage() {
         </div>
 
         {/* Recommendations Section */}
-        <div className="bg-slate-900 rounded-lg border border-slate-800">
-          <div className="px-6 py-4 border-b border-slate-800 flex justify-between items-center">
-            <h2 className="text-lg font-semibold text-white">Top Recommendations</h2>
-            <a href="/recommendations" className="text-blue-400 hover:text-blue-300 text-sm">
+        <div className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm transition-shadow hover:shadow-md hover:border-slate-300 dark:shadow-none dark:hover:border-slate-700">
+          <div className="px-6 py-4 border-b border-slate-200 dark:border-slate-800 flex justify-between items-center">
+            <h2 className="text-lg font-semibold text-slate-900 dark:text-white">Top Recommendations</h2>
+            <a href="/recommendations" className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 text-sm">
               View All →
             </a>
           </div>
-          <div className="divide-y divide-slate-800">
+          <div className="divide-y divide-slate-200 dark:divide-slate-800">
             {data?.top_recommendations && data.top_recommendations.length > 0 ? (
               data.top_recommendations.map((rec) => (
                 <div key={rec.id} className="px-6 py-4 flex items-center justify-between">
                   <div>
-                    <h3 className="text-white font-medium">{rec.title}</h3>
-                    <p className="text-slate-400 text-sm mt-1">
+                    <h3 className="text-slate-900 dark:text-white font-medium">{rec.title}</h3>
+                    <p className="text-slate-600 dark:text-slate-400 text-sm mt-1">
                       Type: {rec.type}
                     </p>
                   </div>
                   <div className="text-right">
-                    <p className="text-green-400 font-semibold">
+                    <p className="text-green-700 dark:text-green-400 font-semibold">
                       Save {formatCurrency(rec.potential_savings)}
                     </p>
-                    <a href="/recommendations" className="mt-2 text-sm text-blue-400 hover:text-blue-300 inline-block">
+                    <a href="/recommendations" className="mt-2 text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 inline-block">
                       View Details
                     </a>
                   </div>
@@ -199,14 +249,16 @@ export default function DashboardPage() {
             ) : (
               <div className="px-6 py-8 text-center text-slate-500">
                 No recommendations yet.{' '}
-                <a href="/recommendations" className="text-blue-400 hover:text-blue-300">
+                <a href="/recommendations" className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">
                   Generate recommendations
                 </a>
               </div>
             )}
           </div>
         </div>
+        </div>
+        )}
       </main>
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index a062624..f5674d4 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -3,7 +3,28 @@
 @tailwind utilities;
 
 @layer base {
+  /* Light theme (default) */
   :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --radius: 0.5rem;
+  }
+
+  /* Dark theme */
+  .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
     --card: 222.2 84% 4.9%;
@@ -19,7 +40,6 @@
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
     --border: 217.2 32.6% 17.5%;
-    --radius: 0.5rem;
   }
 }
 
@@ -27,7 +47,16 @@
   * {
     @apply border-border;
   }
+  html {
+    scroll-behavior: smooth;
+  }
   body {
     @apply bg-background text-foreground;
   }
-}
\ No newline at end of file
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 38664f8..30e6058 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
+import { ThemeProvider } from '@/components/theme/ThemeProvider'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -9,14 +10,22 @@ export const metadata: Metadata = {
   description: 'Multi-cloud cost observability and optimization platform',
 }
 
+// Runs before paint to apply the saved theme and prevent a flash of the wrong theme.
+const noFlashScript = `(function(){try{var t=localStorage.getItem('theme')||'system';var d=t==='dark'||(t==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);document.documentElement.classList.toggle('dark',d);}catch(e){}})();`
+
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: noFlashScript }} />
+      </head>
+      <body className={inter.className}>
+        <ThemeProvider>{children}</ThemeProvider>
+      </body>
     </html>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/app/login/page.tsx b/frontend/app/login/page.tsx
index 656e687..74ee844 100644
--- a/frontend/app/login/page.tsx
+++ b/frontend/app/login/page.tsx
@@ -4,6 +4,8 @@ import { useState } from 'react'
 import { useRouter } from 'next/navigation'
 import Link from 'next/link'
 import { login } from '@/lib/api'
+import { Spinner } from '@/components/ui/Spinner'
+import { ThemeToggle } from '@/components/theme/ThemeToggle'
 
 export default function LoginPage() {
   const router = useRouter()
@@ -30,22 +32,25 @@ export default function LoginPage() {
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-900 to-slate-800">
-      <div className="w-full max-w-md p-8 space-y-6 bg-slate-900 rounded-xl shadow-2xl border border-slate-700">
+    <div className="relative flex min-h-screen items-center justify-center p-4 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-900 dark:to-slate-800">
+      <div className="absolute top-4 right-4">
+        <ThemeToggle />
+      </div>
+      <div className="w-full max-w-md p-8 space-y-6 bg-white dark:bg-slate-900 rounded-xl shadow-2xl border border-slate-200 dark:border-slate-700">
         <div className="text-center">
-          <h1 className="text-3xl font-bold text-white">Cloud Cost Hub</h1>
-          <p className="text-slate-400 mt-2">Sign in to your account</p>
+          <h1 className="text-3xl font-bold text-slate-900 dark:text-white">Cloud Cost Hub</h1>
+          <p className="text-slate-600 dark:text-slate-400 mt-2">Sign in to your account</p>
         </div>
 
         {error && (
-          <div className="bg-red-500/10 border border-red-500/50 text-red-400 px-4 py-2 rounded-lg text-sm">
+          <div className="bg-red-500/10 border border-red-500/50 text-red-600 dark:text-red-400 px-4 py-2 rounded-lg text-sm">
             {error}
           </div>
         )}
 
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
-            <label className="block text-sm font-medium text-slate-300 mb-1">
+            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
               Email
             </label>
             <input
@@ -53,13 +58,13 @@ export default function LoginPage() {
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               required
-              className="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full px-4 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
               placeholder="you@example.com"
             />
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-slate-300 mb-1">
+            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
               Password
             </label>
             <input
@@ -67,7 +72,7 @@ export default function LoginPage() {
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               required
-              className="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full px-4 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
               placeholder="••••••••"
             />
           </div>
@@ -75,15 +80,16 @@ export default function LoginPage() {
           <button
             type="submit"
             disabled={loading}
-            className="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+            className="inline-flex w-full items-center justify-center gap-2 py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
           >
+            {loading && <Spinner />}
             {loading ? 'Signing in...' : 'Sign In'}
           </button>
         </form>
 
-        <p className="text-center text-slate-400 text-sm">
+        <p className="text-center text-slate-600 dark:text-slate-400 text-sm">
           Don't have an account?{' '}
-          <Link href="/register" className="text-blue-400 hover:text-blue-300">
+          <Link href="/register" className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">
             Create one
           </Link>
         </p>
diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx
index 64d19c1..99ba9e4 100644
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -18,7 +18,7 @@ export default function HomePage() {
   }, [router])
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-slate-950">
+    <div className="flex items-center justify-center min-h-screen bg-slate-50 dark:bg-slate-950">
       <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
     </div>
   )
diff --git a/frontend/app/recommendations/page.tsx b/frontend/app/recommendations/page.tsx
index ebeb8fe..4002582 100644
--- a/frontend/app/recommendations/page.tsx
+++ b/frontend/app/recommendations/page.tsx
@@ -3,8 +3,11 @@
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import api from '@/lib/api'
-import { formatCurrency } from '@/lib/utils'
+import { formatCurrency, withMinDuration } from '@/lib/utils'
 import { Recommendation } from '@/types'
+import { RecCardSkeleton } from '@/components/ui/Skeleton'
+import { Spinner } from '@/components/ui/Spinner'
+import { ThemeToggle } from '@/components/theme/ThemeToggle'
 
 export default function RecommendationsPage() {
   const router = useRouter()
@@ -12,6 +15,8 @@ export default function RecommendationsPage() {
   const [loading, setLoading] = useState(true)
   const [generating, setGenerating] = useState(false)
   const [filter, setFilter] = useState('all')
+  // id + action of the row currently being applied/dismissed (per-row loading)
+  const [actioning, setActioning] = useState<{ id: string; action: 'apply' | 'dismiss' } | null>(null)
 
   useEffect(() => {
     const token = localStorage.getItem('token')
@@ -24,7 +29,7 @@ export default function RecommendationsPage() {
 
   const fetchRecommendations = async () => {
     try {
-      const response = await api.get('/recommendations')
+      const response = await withMinDuration(api.get('/recommendations'), 1000)
       setRecommendations(response.data)
     } catch (error) {
       console.error('Failed to fetch recommendations:', error)
@@ -47,20 +52,26 @@ export default function RecommendationsPage() {
   }
 
   const handleDismiss = async (id: string) => {
+    setActioning({ id, action: 'dismiss' })
     try {
       await api.patch(`/recommendations/${id}/dismiss`)
       setRecommendations(recommendations.filter(r => r.id !== id))
     } catch (error) {
       console.error('Failed to dismiss recommendation:', error)
+    } finally {
+      setActioning(null)
     }
   }
 
   const handleApply = async (id: string) => {
+    setActioning({ id, action: 'apply' })
     try {
       await api.post(`/recommendations/${id}/apply`)
       setRecommendations(recommendations.filter(r => r.id !== id))
     } catch (error) {
       console.error('Failed to apply recommendation:', error)
+    } finally {
+      setActioning(null)
     }
   }
 
@@ -73,10 +84,10 @@ export default function RecommendationsPage() {
 
   const getTypeColor = (type: string) => {
     switch(type) {
-      case 'rightsizing': return 'text-blue-400 bg-blue-400/10'
-      case 'orphaned': return 'text-yellow-400 bg-yellow-400/10'
-      case 'reserved_instance': return 'text-green-400 bg-green-400/10'
-      default: return 'text-gray-400 bg-gray-400/10'
+      case 'rightsizing': return 'text-blue-600 dark:text-blue-400 bg-blue-400/10'
+      case 'orphaned': return 'text-yellow-700 dark:text-yellow-400 bg-yellow-400/10'
+      case 'reserved_instance': return 'text-green-700 dark:text-green-400 bg-green-400/10'
+      default: return 'text-gray-600 dark:text-gray-400 bg-gray-400/10'
     }
   }
 
@@ -90,23 +101,25 @@ export default function RecommendationsPage() {
   }
 
   return (
-    <div className="min-h-screen bg-slate-950">
-      <header className="bg-slate-900 border-b border-slate-800 sticky top-0 z-10">
-        <div className="flex items-center justify-between px-6 py-4">
-          <h1 className="text-xl font-bold text-white">Cloud Cost Optimization Hub</h1>
-          <div className="flex items-center gap-4">
-            <a href="/dashboard" className="text-slate-400 hover:text-white transition">
+    <div className="min-h-screen bg-slate-50 dark:bg-slate-950">
+      <header className="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 sticky top-0 z-10">
+        <div className="flex flex-col gap-3 px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6">
+          <h1 className="text-xl font-bold text-slate-900 dark:text-white">Cloud Cost Optimization Hub</h1>
+          <div className="flex flex-wrap items-center gap-3 sm:gap-4">
+            <a href="/dashboard" className="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition">
               Dashboard
             </a>
-            <a href="/accounts" className="text-slate-400 hover:text-white transition">
+            <a href="/accounts" className="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition">
               Accounts
             </a>
+            <ThemeToggle />
             <button
+              type="button"
               onClick={() => {
                 localStorage.removeItem('token')
                 router.push('/login')
               }}
-              className="text-slate-400 hover:text-white transition"
+              className="text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition"
             >
               Sign Out
             </button>
@@ -114,55 +127,61 @@ export default function RecommendationsPage() {
         </div>
       </header>
 
-      <main className="p-6 max-w-7xl mx-auto">
-        <div className="flex justify-between items-center mb-6">
+      <main className="p-4 sm:p-6 max-w-7xl mx-auto">
+        <div className="flex flex-col gap-4 mb-6 sm:flex-row sm:justify-between sm:items-center">
           <div>
-            <h2 className="text-2xl font-bold text-white">Cost Optimization Recommendations</h2>
-            <p className="text-slate-400 mt-1">
+            <h2 className="text-2xl font-bold text-slate-900 dark:text-white">Cost Optimization Recommendations</h2>
+            <p className="text-slate-600 dark:text-slate-400 mt-1">
               Actionable insights to reduce your cloud spending
             </p>
           </div>
           <button
+            type="button"
             onClick={handleGenerate}
             disabled={generating}
-            className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition disabled:opacity-50"
+            className="inline-flex items-center justify-center gap-2 w-full sm:w-auto px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
           >
+            {generating && <Spinner />}
             {generating ? 'Generating...' : 'Generate Recommendations'}
           </button>
         </div>
 
         {/* Summary Card */}
-        <div className="bg-gradient-to-r from-blue-900/30 to-purple-900/30 rounded-lg p-6 border border-blue-800/50 mb-6">
-          <p className="text-slate-400 text-sm mb-1">Total Potential Monthly Savings</p>
-          <p className="text-4xl font-bold text-green-400">{formatCurrency(totalSavings)}</p>
-          <p className="text-slate-400 text-sm mt-2">
+        <div className="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/30 dark:to-purple-900/30 rounded-lg p-6 border border-blue-200 dark:border-blue-800/50 mb-6">
+          <p className="text-slate-600 dark:text-slate-400 text-sm mb-1">Total Potential Monthly Savings</p>
+          <p className="text-4xl font-bold text-green-700 dark:text-green-400">{formatCurrency(totalSavings)}</p>
+          <p className="text-slate-600 dark:text-slate-400 text-sm mt-2">
             Based on {filteredRecommendations.length} active recommendations
           </p>
         </div>
 
         {/* Filter Tabs */}
-        <div className="flex gap-2 mb-6 border-b border-slate-800">
+        <div className="flex gap-2 mb-6 border-b border-slate-200 dark:border-slate-800">
           <button
+            type="button"
             onClick={() => setFilter('all')}
-            className={`px-4 py-2 ${filter === 'all' ? 'text-blue-400 border-b-2 border-blue-400' : 'text-slate-400'}`}
+            className={`px-4 py-2 ${filter === 'all' ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400' : 'text-slate-600 dark:text-slate-400'}`}
           >
             All ({recommendations.length})
           </button>
           <button
+            type="button"
             onClick={() => setFilter('pending')}
-            className={`px-4 py-2 ${filter === 'pending' ? 'text-blue-400 border-b-2 border-blue-400' : 'text-slate-400'}`}
+            className={`px-4 py-2 ${filter === 'pending' ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400' : 'text-slate-600 dark:text-slate-400'}`}
           >
             Pending
           </button>
           <button
+            type="button"
             onClick={() => setFilter('applied')}
-            className={`px-4 py-2 ${filter === 'applied' ? 'text-blue-400 border-b-2 border-blue-400' : 'text-slate-400'}`}
+            className={`px-4 py-2 ${filter === 'applied' ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400' : 'text-slate-600 dark:text-slate-400'}`}
           >
             Applied
           </button>
           <button
+            type="button"
             onClick={() => setFilter('dismissed')}
-            className={`px-4 py-2 ${filter === 'dismissed' ? 'text-blue-400 border-b-2 border-blue-400' : 'text-slate-400'}`}
+            className={`px-4 py-2 ${filter === 'dismissed' ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400' : 'text-slate-600 dark:text-slate-400'}`}
           >
             Dismissed
           </button>
@@ -170,71 +189,88 @@ export default function RecommendationsPage() {
 
         {/* Recommendations List */}
         {loading ? (
-          <div className="flex items-center justify-center py-12">
-            <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-400"></div>
+          <div className="space-y-4">
+            {Array.from({ length: 3 }).map((_, i) => (
+              <RecCardSkeleton key={i} />
+            ))}
           </div>
         ) : filteredRecommendations.length === 0 ? (
-          <div className="text-center py-12 bg-slate-900 rounded-lg border border-slate-800">
-            <p className="text-slate-400">No recommendations found</p>
+          <div className="text-center py-12 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm transition-shadow hover:shadow-md hover:border-slate-300 dark:shadow-none dark:hover:border-slate-700">
+            <p className="text-slate-600 dark:text-slate-400">No recommendations found</p>
             <p className="text-slate-500 text-sm mt-2">
               Click "Generate Recommendations" to analyze your cloud infrastructure
             </p>
           </div>
         ) : (
-          <div className="space-y-4">
+          <div className="space-y-4 animate-fade-in">
             {filteredRecommendations.map((rec) => (
-              <div key={rec.id} className="bg-slate-900 rounded-lg border border-slate-800 p-6">
-                <div className="flex items-start justify-between">
+              <div key={rec.id} className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm transition-shadow hover:shadow-md hover:border-slate-300 dark:shadow-none dark:hover:border-slate-700 p-6">
+                <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                   <div className="flex-1">
                     <div className="flex items-center gap-3 mb-2">
                       <span className={`px-2 py-1 rounded text-xs font-medium ${getTypeColor(rec.type)}`}>
                         {getTypeLabel(rec.type)}
                       </span>
                       <span className={`text-xs px-2 py-1 rounded ${
-                        rec.status === 'pending' ? 'bg-yellow-400/10 text-yellow-400' :
-                        rec.status === 'applied' ? 'bg-green-400/10 text-green-400' :
-                        'bg-gray-400/10 text-gray-400'
+                        rec.status === 'pending' ? 'bg-yellow-400/10 text-yellow-700 dark:text-yellow-400' :
+                        rec.status === 'applied' ? 'bg-green-400/10 text-green-700 dark:text-green-400' :
+                        'bg-gray-400/10 text-gray-600 dark:text-gray-400'
                       }`}>
                         {rec.status}
                       </span>
                     </div>
-                    <h3 className="text-lg font-semibold text-white mb-2">{rec.title}</h3>
-                    <p className="text-slate-400 text-sm mb-4">{rec.description}</p>
+                    <h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">{rec.title}</h3>
+                    <p className="text-slate-600 dark:text-slate-400 text-sm mb-4">{rec.description}</p>
                     
                     <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                       <div>
                         <p className="text-slate-500">Resource ID</p>
-                        <p className="text-white font-mono text-xs">{rec.resource_id}</p>
+                        <p className="text-slate-900 dark:text-white font-mono text-xs">{rec.resource_id}</p>
                       </div>
                       <div>
                         <p className="text-slate-500">Resource Type</p>
-                        <p className="text-white">{rec.resource_type}</p>
+                        <p className="text-slate-900 dark:text-white">{rec.resource_type}</p>
                       </div>
                       <div>
                         <p className="text-slate-500">Current Monthly Cost</p>
-                        <p className="text-white">{formatCurrency(rec.current_value)}</p>
+                        <p className="text-slate-900 dark:text-white">{formatCurrency(rec.current_value)}</p>
                       </div>
                       <div>
                         <p className="text-slate-500">Potential Savings</p>
-                        <p className="text-green-400 font-semibold">{formatCurrency(rec.potential_savings)}</p>
+                        <p className="text-green-700 dark:text-green-400 font-semibold">{formatCurrency(rec.potential_savings)}</p>
                       </div>
                     </div>
                   </div>
                   
                   {rec.status === 'pending' && (
-                    <div className="flex gap-2 ml-4">
-                      <button
-                        onClick={() => handleApply(rec.id)}
-                        className="px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-sm rounded transition"
-                      >
-                        Apply
-                      </button>
-                      <button
-                        onClick={() => handleDismiss(rec.id)}
-                        className="px-3 py-1 bg-slate-700 hover:bg-slate-600 text-white text-sm rounded transition"
-                      >
-                        Dismiss
-                      </button>
+                    <div className="flex gap-2 sm:ml-4">
+                      {(() => {
+                        const isApplying = actioning?.id === rec.id && actioning.action === 'apply'
+                        const isDismissing = actioning?.id === rec.id && actioning.action === 'dismiss'
+                        const busy = actioning?.id === rec.id
+                        return (
+                          <>
+                            <button
+                              type="button"
+                              onClick={() => handleApply(rec.id)}
+                              disabled={busy}
+                              className="inline-flex items-center justify-center gap-1.5 px-3 py-1 bg-green-600 hover:bg-green-700 text-white text-sm rounded transition disabled:opacity-50 disabled:cursor-not-allowed"
+                            >
+                              {isApplying && <Spinner className="h-3.5 w-3.5" />}
+                              {isApplying ? 'Applying...' : 'Apply'}
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => handleDismiss(rec.id)}
+                              disabled={busy}
+                              className="inline-flex items-center justify-center gap-1.5 px-3 py-1 bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-900 dark:text-white text-sm rounded transition disabled:opacity-50 disabled:cursor-not-allowed"
+                            >
+                              {isDismissing && <Spinner className="h-3.5 w-3.5" />}
+                              {isDismissing ? 'Dismissing...' : 'Dismiss'}
+                            </button>
+                          </>
+                        )
+                      })()}
                     </div>
                   )}
                 </div>
@@ -245,4 +281,4 @@ export default function RecommendationsPage() {
       </main>
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/frontend/app/register/page.tsx b/frontend/app/register/page.tsx
index 22e67c2..d71b2f5 100644
--- a/frontend/app/register/page.tsx
+++ b/frontend/app/register/page.tsx
@@ -4,18 +4,29 @@ import { useState } from 'react'
 import { useRouter } from 'next/navigation'
 import Link from 'next/link'
 import { register } from '@/lib/api'
+import { Spinner } from '@/components/ui/Spinner'
+import { ThemeToggle } from '@/components/theme/ThemeToggle'
 
 export default function RegisterPage() {
   const router = useRouter()
   const [name, setName] = useState('')
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
   const [error, setError] = useState('')
   const [loading, setLoading] = useState(false)
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setError('')
+
+    // Client-side only: confirm the passwords match before submitting.
+    // confirmPassword is never sent to the backend.
+    if (password !== confirmPassword) {
+      setError('Passwords do not match')
+      return
+    }
+
     setLoading(true)
 
     try {
@@ -31,35 +42,38 @@ export default function RegisterPage() {
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-slate-900 to-slate-800">
-      <div className="w-full max-w-md p-8 space-y-6 bg-slate-900 rounded-xl shadow-2xl border border-slate-700">
+    <div className="relative flex min-h-screen items-center justify-center p-4 bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-900 dark:to-slate-800">
+      <div className="absolute top-4 right-4">
+        <ThemeToggle />
+      </div>
+      <div className="w-full max-w-md p-8 space-y-6 bg-white dark:bg-slate-900 rounded-xl shadow-2xl border border-slate-200 dark:border-slate-700">
         <div className="text-center">
-          <h1 className="text-3xl font-bold text-white">Cloud Cost Hub</h1>
-          <p className="text-slate-400 mt-2">Create your free account</p>
+          <h1 className="text-3xl font-bold text-slate-900 dark:text-white">Cloud Cost Hub</h1>
+          <p className="text-slate-600 dark:text-slate-400 mt-2">Create your free account</p>
         </div>
 
         {error && (
-          <div className="bg-red-500/10 border border-red-500/50 text-red-400 px-4 py-2 rounded-lg text-sm">
+          <div className="bg-red-500/10 border border-red-500/50 text-red-600 dark:text-red-400 px-4 py-2 rounded-lg text-sm">
             {error}
           </div>
         )}
 
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
-            <label className="block text-sm font-medium text-slate-300 mb-1">
+            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
               Name
             </label>
             <input
               type="text"
               value={name}
               onChange={(e) => setName(e.target.value)}
-              className="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full px-4 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
               placeholder="John Doe"
             />
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-slate-300 mb-1">
+            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
               Email
             </label>
             <input
@@ -67,13 +81,13 @@ export default function RegisterPage() {
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               required
-              className="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full px-4 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
               placeholder="you@example.com"
             />
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-slate-300 mb-1">
+            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
               Password
             </label>
             <input
@@ -82,24 +96,40 @@ export default function RegisterPage() {
               onChange={(e) => setPassword(e.target.value)}
               required
               minLength={6}
-              className="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full px-4 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
               placeholder="••••••••"
             />
             <p className="text-xs text-slate-500 mt-1">Minimum 6 characters</p>
           </div>
 
+          <div>
+            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
+              Confirm Password
+            </label>
+            <input
+              type="password"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              required
+              minLength={6}
+              className="w-full px-4 py-2 bg-slate-100 dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="••••••••"
+            />
+          </div>
+
           <button
             type="submit"
             disabled={loading}
-            className="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+            className="inline-flex w-full items-center justify-center gap-2 py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
           >
+            {loading && <Spinner />}
             {loading ? 'Creating account...' : 'Create Account'}
           </button>
         </form>
 
-        <p className="text-center text-slate-400 text-sm">
+        <p className="text-center text-slate-600 dark:text-slate-400 text-sm">
           Already have an account?{' '}
-          <Link href="/login" className="text-blue-400 hover:text-blue-300">
+          <Link href="/login" className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">
             Sign in
           </Link>
         </p>
diff --git a/frontend/components/theme/ThemeProvider.tsx b/frontend/components/theme/ThemeProvider.tsx
new file mode 100644
index 0000000..5422e93
--- /dev/null
+++ b/frontend/components/theme/ThemeProvider.tsx
@@ -0,0 +1,77 @@
+'use client'
+
+import { createContext, useCallback, useContext, useEffect, useState } from 'react'
+
+export type Theme = 'light' | 'dark' | 'system'
+export type ResolvedTheme = 'light' | 'dark'
+
+const STORAGE_KEY = 'theme'
+
+interface ThemeContextValue {
+  theme: Theme
+  resolvedTheme: ResolvedTheme
+  setTheme: (theme: Theme) => void
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined)
+
+function getSystemTheme(): ResolvedTheme {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+function applyResolved(resolved: ResolvedTheme) {
+  document.documentElement.classList.toggle('dark', resolved === 'dark')
+}
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>('system')
+  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>('dark')
+
+  // Hydrate from localStorage on mount.
+  useEffect(() => {
+    const stored = (typeof window !== 'undefined' &&
+      (localStorage.getItem(STORAGE_KEY) as Theme | null)) || 'system'
+    setThemeState(stored)
+  }, [])
+
+  // Resolve + apply whenever the chosen theme changes.
+  useEffect(() => {
+    const resolved = theme === 'system' ? getSystemTheme() : theme
+    setResolvedTheme(resolved)
+    applyResolved(resolved)
+  }, [theme])
+
+  // Follow the OS preference live while in "system" mode.
+  useEffect(() => {
+    if (theme !== 'system') return
+    const mq = window.matchMedia('(prefers-color-scheme: dark)')
+    const onChange = () => {
+      const resolved = getSystemTheme()
+      setResolvedTheme(resolved)
+      applyResolved(resolved)
+    }
+    mq.addEventListener('change', onChange)
+    return () => mq.removeEventListener('change', onChange)
+  }, [theme])
+
+  const setTheme = useCallback((next: Theme) => {
+    try {
+      localStorage.setItem(STORAGE_KEY, next)
+    } catch {
+      /* ignore storage errors (private mode, etc.) */
+    }
+    setThemeState(next)
+  }, [])
+
+  return (
+    <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext)
+  if (!ctx) throw new Error('useTheme must be used within a ThemeProvider')
+  return ctx
+}
diff --git a/frontend/components/theme/ThemeToggle.tsx b/frontend/components/theme/ThemeToggle.tsx
new file mode 100644
index 0000000..87257ed
--- /dev/null
+++ b/frontend/components/theme/ThemeToggle.tsx
@@ -0,0 +1,89 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { Sun, Moon, Monitor, Check, ChevronDown } from 'lucide-react'
+import { useTheme, type Theme } from '@/components/theme/ThemeProvider'
+
+const OPTIONS: { value: Theme; label: string; Icon: typeof Sun }[] = [
+  { value: 'light', label: 'Light', Icon: Sun },
+  { value: 'dark', label: 'Dark', Icon: Moon },
+  { value: 'system', label: 'System', Icon: Monitor },
+]
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const [open, setOpen] = useState(false)
+  // Avoid hydration mismatch: only reflect the chosen theme after mount.
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+
+  const ref = useRef<HTMLDivElement>(null)
+
+  // Close on outside click or Escape.
+  useEffect(() => {
+    if (!open) return
+    const onClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('mousedown', onClick)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onClick)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [open])
+
+  const current = OPTIONS.find((o) => o.value === (mounted ? theme : 'system')) ?? OPTIONS[2]
+  const CurrentIcon = current.Icon
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-haspopup="menu"
+        aria-expanded={open ? 'true' : 'false'}
+        aria-label={`Theme: ${current.label}`}
+        className="inline-flex items-center gap-1.5 rounded-lg border border-slate-300 bg-slate-100 px-2.5 py-1.5 text-sm text-slate-700 transition-colors hover:bg-slate-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700"
+      >
+        <CurrentIcon className="h-4 w-4" />
+        <ChevronDown className={`h-3.5 w-3.5 transition-transform ${open ? 'rotate-180' : ''}`} />
+      </button>
+
+      {open && (
+        <div
+          role="menu"
+          aria-label="Select theme"
+          className="absolute right-0 z-50 mt-2 w-40 overflow-hidden rounded-lg border border-slate-200 bg-white py-1 shadow-lg dark:border-slate-700 dark:bg-slate-900"
+        >
+          {OPTIONS.map(({ value, label, Icon }) => {
+            const active = mounted && theme === value
+            return (
+              <button
+                key={value}
+                type="button"
+                role="menuitem"
+                onClick={() => {
+                  setTheme(value)
+                  setOpen(false)
+                }}
+                className={`flex w-full items-center gap-2.5 px-3 py-2 text-sm transition-colors ${
+                  active
+                    ? 'text-blue-600 dark:text-blue-400'
+                    : 'text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800'
+                }`}
+              >
+                <Icon className="h-4 w-4 shrink-0" />
+                <span className="flex-1 text-left">{label}</span>
+                {active && <Check className="h-4 w-4 shrink-0" />}
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/components/ui/Skeleton.tsx b/frontend/components/ui/Skeleton.tsx
new file mode 100644
index 0000000..c26ac27
--- /dev/null
+++ b/frontend/components/ui/Skeleton.tsx
@@ -0,0 +1,89 @@
+import { clsx } from 'clsx'
+
+/**
+ * Base skeleton placeholder. Pulses while content loads; respects
+ * prefers-reduced-motion (motion-reduce:animate-none).
+ */
+export function Skeleton({ className }: { className?: string }) {
+  return (
+    <div
+      aria-hidden="true"
+      className={clsx(
+        'animate-pulse rounded bg-slate-200 dark:bg-slate-700/50 motion-reduce:animate-none',
+        className
+      )}
+    />
+  )
+}
+
+/** Skeleton for a dashboard stat card. Matches the real card's footprint. */
+export function StatCardSkeleton() {
+  return (
+    <div className="bg-white dark:bg-slate-900 rounded-xl p-6 border border-slate-200 dark:border-slate-800 shadow-sm transition-shadow hover:shadow-md hover:border-slate-300 dark:shadow-none dark:hover:border-slate-700">
+      <Skeleton className="h-4 w-24 mb-3" />
+      <Skeleton className="h-9 w-32" />
+    </div>
+  )
+}
+
+/** Skeleton for a dashboard chart panel (line or pie). */
+export function ChartSkeleton() {
+  return (
+    <div className="bg-white dark:bg-slate-900 rounded-xl p-6 border border-slate-200 dark:border-slate-800 shadow-sm transition-shadow hover:shadow-md hover:border-slate-300 dark:shadow-none dark:hover:border-slate-700">
+      <Skeleton className="h-5 w-40 mb-4" />
+      <Skeleton className="h-80 w-full" />
+    </div>
+  )
+}
+
+/** Compact skeleton row for the dashboard "Top Recommendations" list. */
+export function RecRowSkeleton() {
+  return (
+    <div className="px-6 py-4 flex items-center justify-between">
+      <div className="flex-1">
+        <Skeleton className="h-5 w-2/3 mb-2" />
+        <Skeleton className="h-4 w-24" />
+      </div>
+      <Skeleton className="h-5 w-20" />
+    </div>
+  )
+}
+
+/** Full recommendation card skeleton for the Recommendations page. */
+export function RecCardSkeleton() {
+  return (
+    <div className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm transition-shadow hover:shadow-md hover:border-slate-300 dark:shadow-none dark:hover:border-slate-700 p-6">
+      <div className="flex items-center gap-3 mb-3">
+        <Skeleton className="h-6 w-24" />
+        <Skeleton className="h-6 w-16" />
+      </div>
+      <Skeleton className="h-6 w-1/2 mb-3" />
+      <Skeleton className="h-4 w-full mb-2" />
+      <Skeleton className="h-4 w-3/4 mb-6" />
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i}>
+            <Skeleton className="h-3 w-20 mb-2" />
+            <Skeleton className="h-4 w-16" />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+/** Skeleton row for a connected cloud account on the Accounts page. */
+export function AccountRowSkeleton() {
+  return (
+    <div className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm transition-shadow hover:shadow-md hover:border-slate-300 dark:shadow-none dark:hover:border-slate-700 p-4 flex items-center justify-between">
+      <div className="flex items-center gap-3">
+        <Skeleton className="h-6 w-14" />
+        <div>
+          <Skeleton className="h-4 w-32 mb-2" />
+          <Skeleton className="h-3 w-40" />
+        </div>
+      </div>
+      <Skeleton className="h-6 w-16" />
+    </div>
+  )
+}
diff --git a/frontend/components/ui/Spinner.tsx b/frontend/components/ui/Spinner.tsx
new file mode 100644
index 0000000..ea13f09
--- /dev/null
+++ b/frontend/components/ui/Spinner.tsx
@@ -0,0 +1,25 @@
+import { clsx } from 'clsx'
+
+/**
+ * Inline loading spinner for buttons and small async regions.
+ * Spins via Tailwind's animate-spin; respects prefers-reduced-motion.
+ */
+export function Spinner({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      fill="none"
+      className={clsx('h-4 w-4 animate-spin motion-reduce:animate-none', className)}
+    >
+      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" className="opacity-25" />
+      <path
+        d="M12 2a10 10 0 0 1 10 10"
+        stroke="currentColor"
+        strokeWidth="4"
+        strokeLinecap="round"
+        className="opacity-90"
+      />
+    </svg>
+  )
+}
diff --git a/frontend/lib/utils.ts b/frontend/lib/utils.ts
index 817e549..cdad899 100644
--- a/frontend/lib/utils.ts
+++ b/frontend/lib/utils.ts
@@ -20,4 +20,13 @@ export function formatDate(date: string): string {
     month: 'short',
     day: 'numeric',
   })
+}
+
+/** Resolve a promise, but never faster than `minMs` so loading skeletons stay visible. */
+export async function withMinDuration<T>(promise: Promise<T>, minMs: number = 1000): Promise<T> {
+  const [result] = await Promise.all([
+    promise,
+    new Promise((resolve) => setTimeout(resolve, minMs)),
+  ])
+  return result
 }
\ No newline at end of file
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 80db265..739c55f 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
   content: [
     './pages/**/*.{js,ts,jsx,tsx,mdx}',
     './components/**/*.{js,ts,jsx,tsx,mdx}',
@@ -41,6 +42,16 @@ module.exports = {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      keyframes: {
+        "fade-in": {
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" },
+        },
+      },
+      animation: {
+        // ease-out entrance for content swapping in after a skeleton.
+        "fade-in": "fade-in 250ms ease-out",
+      },
     },
   },
   plugins: [],