diff --git a/backend/src/errors/index.ts b/backend/src/errors/index.ts
index 9afb7cf0..290f2cf1 100644
--- a/backend/src/errors/index.ts
+++ b/backend/src/errors/index.ts
@@ -78,3 +78,19 @@ export class RateLimitError extends AppError {
     super('Too Many Requests', 429, detail, 'https://syncro.app/errors/too-many-requests', { retryAfter });
   }
 }
+
+/**
+ * Thrown when an external dependency (Redis, email provider, payment gateway, etc.)
+ * is unavailable or returns an unexpected error (HTTP 502).
+ */
+export class ExternalDependencyError extends AppError {
+  constructor(detail: string, public dependency: string) {
+    super(
+      'External Dependency Error',
+      502,
+      detail,
+      'https://syncro.app/errors/external-dependency',
+      { dependency }
+    );
+  }
+}
diff --git a/backend/src/lib/redis-store.ts b/backend/src/lib/redis-store.ts
index 1d23b96e..8b7c5b93 100644
--- a/backend/src/lib/redis-store.ts
+++ b/backend/src/lib/redis-store.ts
@@ -105,12 +105,21 @@ export class RateLimitRedisStore {
     return this.isConnected && this.store !== null;
   }
 
+  /**
+   * Returns true when Redis was configured but is currently unavailable,
+   * meaning the system is operating in degraded mode with a memory fallback.
+   */
+  isDegraded(): boolean {
+    return !!(rateLimitConfig.redis.enabled && rateLimitConfig.redis.url && !this.isConnected);
+  }
+
   /**
    * Get Redis connection health status
    */
-  getHealthStatus(): { connected: boolean; reconnectAttempts: number; error?: string } {
+  getHealthStatus(): { connected: boolean; degraded: boolean; reconnectAttempts: number; error?: string } {
     return {
       connected: this.isConnected,
+      degraded: this.isDegraded(),
       reconnectAttempts: this.reconnectAttempts,
       error: this.isConnected ? undefined : 'Redis connection unavailable',
     };
diff --git a/backend/src/middleware/rate-limit-factory.ts b/backend/src/middleware/rate-limit-factory.ts
index 50fad311..e2e1fb43 100644
--- a/backend/src/middleware/rate-limit-factory.ts
+++ b/backend/src/middleware/rate-limit-factory.ts
@@ -202,12 +202,16 @@ export class RateLimiterFactory {
   }
 
   /**
-   * Get Redis store status for health monitoring
+   * Get Redis store status for health monitoring.
+   * When `degraded` is true the app is running with the in-memory fallback
+   * because Redis was configured but is currently unreachable.
    */
-  static getStoreStatus(): { type: 'redis' | 'memory'; available: boolean } {
+  static getStoreStatus(): { type: 'redis' | 'memory'; available: boolean; degraded: boolean } {
+    const degraded = this.redisStoreInitialized && !this.redisStore;
     return {
       type: this.redisStore ? 'redis' : 'memory',
       available: this.redisStoreInitialized,
+      degraded,
     };
   }
 }
diff --git a/backend/tests/error-taxonomy.test.ts b/backend/tests/error-taxonomy.test.ts
new file mode 100644
index 00000000..dfbb5c83
--- /dev/null
+++ b/backend/tests/error-taxonomy.test.ts
@@ -0,0 +1,156 @@
+import { createServer } from 'http';
+import express, { Request, Response } from 'express';
+import request from 'supertest';
+import {
+  AppError,
+  NotFoundError,
+  ValidationError,
+  UnauthorizedError,
+  ForbiddenError,
+  ConflictError,
+  BadRequestError,
+  RateLimitError,
+  ExternalDependencyError,
+} from '../src/errors';
+import { errorHandler } from '../src/middleware/errorHandler';
+
+function buildApp(thrower: (req: Request, res: Response, next: any) => void) {
+  const app = express();
+  app.use(express.json());
+  app.get('/test', thrower);
+  app.use(errorHandler);
+  return app;
+}
+
+describe('error taxonomy – class shapes', () => {
+  it('NotFoundError has correct status and type', () => {
+    const err = new NotFoundError('Widget not found');
+    expect(err.status).toBe(404);
+    expect(err.title).toBe('Not Found');
+    expect(err.type).toBe('https://syncro.app/errors/not-found');
+    expect(err.detail).toBe('Widget not found');
+    expect(err).toBeInstanceOf(AppError);
+  });
+
+  it('ValidationError carries field errors', () => {
+    const err = new ValidationError('Invalid input', { email: ['must be valid'] });
+    expect(err.status).toBe(400);
+    expect(err.errors).toEqual({ email: ['must be valid'] });
+  });
+
+  it('UnauthorizedError defaults message', () => {
+    const err = new UnauthorizedError();
+    expect(err.status).toBe(401);
+    expect(err.detail).toBe('Authentication required.');
+  });
+
+  it('ForbiddenError defaults message', () => {
+    const err = new ForbiddenError();
+    expect(err.status).toBe(403);
+    expect(err.detail).toBe('Access denied.');
+  });
+
+  it('ConflictError has 409 status', () => {
+    const err = new ConflictError('Resource already exists');
+    expect(err.status).toBe(409);
+    expect(err.type).toBe('https://syncro.app/errors/conflict');
+  });
+
+  it('RateLimitError carries retryAfter', () => {
+    const err = new RateLimitError('Slow down', 60);
+    expect(err.status).toBe(429);
+    expect(err.retryAfter).toBe(60);
+    expect(err.extensions).toMatchObject({ retryAfter: 60 });
+  });
+
+  it('ExternalDependencyError has 502 status and dependency field', () => {
+    const err = new ExternalDependencyError('Stripe is unreachable', 'stripe');
+    expect(err.status).toBe(502);
+    expect(err.dependency).toBe('stripe');
+    expect(err.type).toBe('https://syncro.app/errors/external-dependency');
+    expect(err).toBeInstanceOf(AppError);
+  });
+});
+
+describe('error taxonomy – HTTP response shapes via errorHandler', () => {
+  it('NotFoundError → 404 Problem Details', async () => {
+    const app = buildApp((_req, _res, next) => next(new NotFoundError('Widget not found')));
+    const res = await request(app).get('/test');
+    expect(res.status).toBe(404);
+    expect(res.headers['content-type']).toMatch(/application\/problem\+json/);
+    expect(res.body).toMatchObject({
+      type: 'https://syncro.app/errors/not-found',
+      title: 'Not Found',
+      status: 404,
+      detail: 'Widget not found',
+    });
+  });
+
+  it('ValidationError → 400 with errors array', async () => {
+    const app = buildApp((_req, _res, next) =>
+      next(new ValidationError('Bad input', { name: ['required'] }))
+    );
+    const res = await request(app).get('/test');
+    expect(res.status).toBe(400);
+    expect(res.body).toMatchObject({
+      type: 'https://syncro.app/errors/validation',
+      status: 400,
+      errors: { name: ['required'] },
+    });
+  });
+
+  it('UnauthorizedError → 401', async () => {
+    const app = buildApp((_req, _res, next) => next(new UnauthorizedError()));
+    const res = await request(app).get('/test');
+    expect(res.status).toBe(401);
+    expect(res.body.status).toBe(401);
+  });
+
+  it('ForbiddenError → 403', async () => {
+    const app = buildApp((_req, _res, next) => next(new ForbiddenError()));
+    const res = await request(app).get('/test');
+    expect(res.status).toBe(403);
+    expect(res.body.status).toBe(403);
+  });
+
+  it('ConflictError → 409', async () => {
+    const app = buildApp((_req, _res, next) => next(new ConflictError('Duplicate key')));
+    const res = await request(app).get('/test');
+    expect(res.status).toBe(409);
+    expect(res.body.status).toBe(409);
+  });
+
+  it('RateLimitError → 429 with retryAfter in body', async () => {
+    const app = buildApp((_req, _res, next) => next(new RateLimitError('Too fast', 30)));
+    const res = await request(app).get('/test');
+    expect(res.status).toBe(429);
+    expect(res.body).toMatchObject({ status: 429, retryAfter: 30 });
+  });
+
+  it('ExternalDependencyError → 502 with dependency in body', async () => {
+    const app = buildApp((_req, _res, next) =>
+      next(new ExternalDependencyError('Redis unavailable', 'redis'))
+    );
+    const res = await request(app).get('/test');
+    expect(res.status).toBe(502);
+    expect(res.body).toMatchObject({
+      type: 'https://syncro.app/errors/external-dependency',
+      status: 502,
+      dependency: 'redis',
+    });
+  });
+
+  it('unknown error → 500 without leaking internals in production', async () => {
+    const original = process.env.NODE_ENV;
+    process.env.NODE_ENV = 'production';
+
+    const app = buildApp((_req, _res, next) => next(new Error('secret internal error')));
+    const res = await request(app).get('/test');
+
+    expect(res.status).toBe(500);
+    expect(res.body.detail).toBe('An unexpected error occurred.');
+    expect(res.body.detail).not.toContain('secret');
+
+    process.env.NODE_ENV = original;
+  });
+});
diff --git a/backend/tests/redis-store.test.ts b/backend/tests/redis-store.test.ts
index c1e6b49a..5dbfa748 100644
--- a/backend/tests/redis-store.test.ts
+++ b/backend/tests/redis-store.test.ts
@@ -138,6 +138,7 @@ describe('RateLimitRedisStore', () => {
 
       expect(status).toEqual({
         connected: false,
+        degraded: true,
         reconnectAttempts: 0,
         error: 'Redis connection unavailable',
       });
@@ -155,6 +156,7 @@ describe('RateLimitRedisStore', () => {
 
       expect(status).toEqual({
         connected: true,
+        degraded: false,
         reconnectAttempts: 0,
         error: undefined,
       });
@@ -187,6 +189,93 @@ describe('RateLimitRedisStore', () => {
       expect(reconnectStrategy(4)).toBe(30000); // Capped at 30 seconds
     });
   });
+
+  describe('outage scenarios', () => {
+    it('isDegraded returns false when redis is not configured', () => {
+      const { rateLimitConfig } = require('../src/config/rate-limit');
+      const savedEnabled = rateLimitConfig.redis.enabled;
+      rateLimitConfig.redis.enabled = false;
+
+      const store = RateLimitRedisStore.getInstance();
+      expect(store.isDegraded()).toBe(false);
+
+      rateLimitConfig.redis.enabled = savedEnabled;
+    });
+
+    it('isDegraded returns true when redis is configured but disconnected', () => {
+      const store = RateLimitRedisStore.getInstance();
+      // Store is configured (mocked config has enabled: true) but not yet connected
+      expect(store.isDegraded()).toBe(true);
+    });
+
+    it('isDegraded returns false after successful connection', async () => {
+      const store = RateLimitRedisStore.getInstance();
+      await store.initialize();
+
+      // Simulate connect event
+      const connectHandler = mockRedisClient.on.mock.calls.find((c: any[]) => c[0] === 'connect')[1];
+      connectHandler();
+
+      expect(store.isDegraded()).toBe(false);
+    });
+
+    it('falls back to memory store and is marked degraded on connection failure', async () => {
+      mockRedisClient.connect.mockRejectedValue(new Error('ECONNREFUSED'));
+      const store = RateLimitRedisStore.getInstance();
+
+      await expect(store.initialize()).rejects.toThrow('ECONNREFUSED');
+
+      expect(store.isAvailable()).toBe(false);
+      expect(store.getStore()).toBeNull();
+    });
+
+    it('falls back silently via createRedisStore when redis is unreachable', async () => {
+      const mockStoreInstance = {
+        initialize: jest.fn().mockRejectedValue(new Error('timeout')),
+        getStore: jest.fn().mockReturnValue(null),
+      };
+      jest.spyOn(RateLimitRedisStore, 'getInstance').mockReturnValue(mockStoreInstance as any);
+
+      const result = await createRedisStore();
+
+      expect(result).toBeUndefined();
+    });
+
+    it('getHealthStatus includes degraded flag', async () => {
+      const store = RateLimitRedisStore.getInstance();
+      await store.initialize();
+
+      const status = store.getHealthStatus();
+      expect(status).toHaveProperty('degraded');
+      expect(typeof status.degraded).toBe('boolean');
+    });
+
+    it('transitions from degraded to healthy on reconnect event', async () => {
+      const store = RateLimitRedisStore.getInstance();
+      await store.initialize();
+
+      expect(store.isDegraded()).toBe(true);
+
+      const connectHandler = mockRedisClient.on.mock.calls.find((c: any[]) => c[0] === 'connect')[1];
+      connectHandler();
+
+      expect(store.isDegraded()).toBe(false);
+      expect(store.getHealthStatus().degraded).toBe(false);
+    });
+
+    it('transitions back to degraded after disconnect event', async () => {
+      const store = RateLimitRedisStore.getInstance();
+      await store.initialize();
+
+      const connectHandler = mockRedisClient.on.mock.calls.find((c: any[]) => c[0] === 'connect')[1];
+      connectHandler();
+      expect(store.isDegraded()).toBe(false);
+
+      const disconnectHandler = mockRedisClient.on.mock.calls.find((c: any[]) => c[0] === 'disconnect')[1];
+      disconnectHandler();
+      expect(store.isDegraded()).toBe(true);
+    });
+  });
 });
 
 describe('createRedisStore', () => {
diff --git a/client/app/dashboard/analytics/error.tsx b/client/app/dashboard/analytics/error.tsx
new file mode 100644
index 00000000..c2cadce8
--- /dev/null
+++ b/client/app/dashboard/analytics/error.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import { useEffect } from "react"
+import { AlertTriangle } from "lucide-react"
+
+interface AnalyticsErrorProps {
+  error: Error & { digest?: string }
+  reset: () => void
+}
+
+export default function AnalyticsError({ error, reset }: AnalyticsErrorProps) {
+  useEffect(() => {
+    console.error("Analytics route error:", error)
+  }, [error])
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[40vh] p-8 text-center gap-4">
+      <AlertTriangle className="h-10 w-10 text-red-500" aria-hidden="true" />
+      <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+        Failed to load analytics
+      </h2>
+      <p className="text-sm text-gray-500 dark:text-gray-400 max-w-sm">
+        Something went wrong while fetching your spending data. Please try again.
+      </p>
+      <button
+        onClick={reset}
+        className="mt-2 px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 transition-colors"
+      >
+        Try again
+      </button>
+    </div>
+  )
+}
diff --git a/client/app/dashboard/analytics/loading.tsx b/client/app/dashboard/analytics/loading.tsx
new file mode 100644
index 00000000..92f16125
--- /dev/null
+++ b/client/app/dashboard/analytics/loading.tsx
@@ -0,0 +1,21 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+export default function AnalyticsLoading() {
+  return (
+    <div className="p-4 sm:p-8 space-y-8">
+      {/* Stats row */}
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6">
+        <Skeleton className="h-28 w-full rounded-xl" />
+        <Skeleton className="h-28 w-full rounded-xl" />
+        <Skeleton className="h-28 w-full rounded-xl" />
+      </div>
+      {/* Charts row */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8">
+        <Skeleton className="h-64 sm:h-80 w-full rounded-xl" />
+        <Skeleton className="h-64 sm:h-80 w-full rounded-xl" />
+      </div>
+      {/* Top subscriptions */}
+      <Skeleton className="h-48 w-full rounded-xl" />
+    </div>
+  )
+}
diff --git a/client/app/dashboard/analytics/page.tsx b/client/app/dashboard/analytics/page.tsx
index 0e84a993..490e0ae5 100644
--- a/client/app/dashboard/analytics/page.tsx
+++ b/client/app/dashboard/analytics/page.tsx
@@ -5,6 +5,7 @@ import AnalyticsPage from "@/components/pages/analytics"
 import { analyticsApi, AnalyticsSummary } from "@/lib/api/analytics"
 import { useTheme } from "next-themes"
 import { Skeleton } from "@/components/ui/skeleton"
+import { BarChart3, AlertTriangle } from "lucide-react"
 
 export default function AnalyticsRoute() {
   const [summary, setSummary] = useState<AnalyticsSummary | null>(null)
@@ -13,52 +14,79 @@ export default function AnalyticsRoute() {
   const { theme } = useTheme()
   const darkMode = theme === "dark"
 
-  useEffect(() => {
-    const fetchAnalytics = async () => {
-      try {
-        const data = await analyticsApi.getSummary()
-        setSummary(data)
-      } catch (err) {
-        console.error("Failed to fetch analytics:", err)
-        setError("Failed to load analytics data. Please try again later.")
-      } finally {
-        setLoading(false)
-      }
+  const fetchAnalytics = async () => {
+    setError(null)
+    setLoading(true)
+    try {
+      const data = await analyticsApi.getSummary()
+      setSummary(data)
+    } catch (err) {
+      console.error("Failed to fetch analytics:", err)
+      setError("Failed to load analytics data. Please try again later.")
+    } finally {
+      setLoading(false)
     }
+  }
 
+  useEffect(() => {
     fetchAnalytics()
   }, [])
 
   if (loading) {
     return (
-      <div className="p-8 space-y-8">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <Skeleton className="h-32 w-full rounded-xl" />
-          <Skeleton className="h-32 w-full rounded-xl" />
-          <Skeleton className="h-32 w-full rounded-xl" />
+      <div className="p-4 sm:p-8 space-y-8">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6">
+          <Skeleton className="h-28 w-full rounded-xl" />
+          <Skeleton className="h-28 w-full rounded-xl" />
+          <Skeleton className="h-28 w-full rounded-xl" />
         </div>
-        <Skeleton className="h-64 w-full rounded-xl" />
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-          <Skeleton className="h-80 w-full rounded-xl" />
-          <Skeleton className="h-80 w-full rounded-xl" />
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8">
+          <Skeleton className="h-64 sm:h-80 w-full rounded-xl" />
+          <Skeleton className="h-64 sm:h-80 w-full rounded-xl" />
         </div>
+        <Skeleton className="h-48 w-full rounded-xl" />
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-[40vh] p-8 text-center gap-4">
+        <AlertTriangle className="h-10 w-10 text-red-500" aria-hidden="true" />
+        <p className={`text-base font-medium ${darkMode ? "text-red-400" : "text-red-600"}`}>{error}</p>
+        <button
+          onClick={fetchAnalytics}
+          className="mt-2 px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 transition-colors"
+        >
+          Try again
+        </button>
       </div>
     )
   }
 
-  if (error || !summary) {
+  if (!summary || summary.active_subscriptions === 0) {
     return (
-      <div className="p-8 text-center">
-        <p className="text-red-500">{error || "Something went wrong"}</p>
+      <div className="flex flex-col items-center justify-center min-h-[40vh] p-8 text-center gap-4">
+        <BarChart3 className={`h-12 w-12 ${darkMode ? "text-gray-600" : "text-gray-300"}`} aria-hidden="true" />
+        <h2 className={`text-xl font-semibold ${darkMode ? "text-white" : "text-gray-900"}`}>
+          No analytics yet
+        </h2>
+        <p className={`text-sm max-w-sm ${darkMode ? "text-gray-400" : "text-gray-500"}`}>
+          Add your first subscription to start tracking spending trends and category breakdowns.
+        </p>
       </div>
     )
   }
 
   return (
-    <div className="p-8">
-      <div className="mb-8">
-        <h1 className={`text-3xl font-bold ${darkMode ? "text-white" : "text-gray-900"}`}>Spending Analytics</h1>
-        <p className={darkMode ? "text-gray-400" : "text-gray-600"}>Track your subscription spend and stay within budget.</p>
+    <div className="p-4 sm:p-8">
+      <div className="mb-6 sm:mb-8">
+        <h1 className={`text-2xl sm:text-3xl font-bold ${darkMode ? "text-white" : "text-gray-900"}`}>
+          Spending Analytics
+        </h1>
+        <p className={`text-sm sm:text-base mt-1 ${darkMode ? "text-gray-400" : "text-gray-600"}`}>
+          Track your subscription spend and stay within budget.
+        </p>
       </div>
       <AnalyticsPage summary={summary} darkMode={darkMode} />
     </div>
diff --git a/client/components/pages/analytics.tsx b/client/components/pages/analytics.tsx
index 07690ad4..dac42be7 100644
--- a/client/components/pages/analytics.tsx
+++ b/client/components/pages/analytics.tsx
@@ -54,24 +54,24 @@ export default function AnalyticsPage({ summary, darkMode, savedBySyncroCount =
   }
 
   return (
-    <div className="space-y-8">
+    <div className="space-y-6 sm:space-y-8">
       {/* Stats Overview */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <div className={`p-6 rounded-xl border ${darkMode ? "bg-[#2D3748] border-[#374151]" : "bg-white border-gray-200"}`}>
-          <p className="text-sm text-gray-400 mb-1">Total Monthly Spend</p>
-          <p className={`text-3xl font-bold ${darkMode ? "text-white" : "text-gray-900"}`}>
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 sm:gap-6">
+        <div className={`p-4 sm:p-6 rounded-xl border ${darkMode ? "bg-[#2D3748] border-[#374151]" : "bg-white border-gray-200"}`}>
+          <p className="text-xs sm:text-sm text-gray-400 mb-1">Total Monthly Spend</p>
+          <p className={`text-2xl sm:text-3xl font-bold ${darkMode ? "text-white" : "text-gray-900"}`}>
             {formatCurrency(summary.total_monthly_spend, currency)}
           </p>
         </div>
-        <div className={`p-6 rounded-xl border ${darkMode ? "bg-[#2D3748] border-[#374151]" : "bg-white border-gray-200"}`}>
-          <p className="text-sm text-gray-400 mb-1">Active Subscriptions</p>
-          <p className={`text-3xl font-bold ${darkMode ? "text-white" : "text-gray-900"}`}>
+        <div className={`p-4 sm:p-6 rounded-xl border ${darkMode ? "bg-[#2D3748] border-[#374151]" : "bg-white border-gray-200"}`}>
+          <p className="text-xs sm:text-sm text-gray-400 mb-1">Active Subscriptions</p>
+          <p className={`text-2xl sm:text-3xl font-bold ${darkMode ? "text-white" : "text-gray-900"}`}>
             {summary.active_subscriptions}
           </p>
         </div>
-        <div className={`p-6 rounded-xl border ${darkMode ? "bg-[#2D3748] border-[#374151]" : "bg-white border-gray-200"}`}>
-          <p className="text-sm text-gray-400 mb-1">Upcoming (7 days)</p>
-          <p className={`text-3xl font-bold ${darkMode ? "text-white" : "text-gray-900"}`}>
+        <div className={`p-4 sm:p-6 rounded-xl border ${darkMode ? "bg-[#2D3748] border-[#374151]" : "bg-white border-gray-200"}`}>
+          <p className="text-xs sm:text-sm text-gray-400 mb-1">Upcoming (7 days)</p>
+          <p className={`text-2xl sm:text-3xl font-bold ${darkMode ? "text-white" : "text-gray-900"}`}>
             {summary.upcoming_renewals_count}
           </p>
         </div>
@@ -79,10 +79,10 @@ export default function AnalyticsPage({ summary, darkMode, savedBySyncroCount =
 
       {/* Budget Progress */}
       {summary.budget_status.overall_limit && (
-        <div className={`p-6 rounded-xl border ${darkMode ? "bg-[#2D3748] border-[#374151]" : "bg-white border-gray-200"}`}>
-          <div className="flex justify-between items-center mb-4">
+        <div className={`p-4 sm:p-6 rounded-xl border ${darkMode ? "bg-[#2D3748] border-[#374151]" : "bg-white border-gray-200"}`}>
+          <div className="flex flex-wrap justify-between items-center gap-2 mb-4">
             <h3 className={`font-semibold ${darkMode ? "text-white" : "text-gray-900"}`}>Monthly Budget</h3>
-            <span className={darkMode ? "text-gray-400" : "text-gray-600"}>
+            <span className={`text-sm ${darkMode ? "text-gray-400" : "text-gray-600"}`}>
               {formatCurrency(summary.budget_status.current_spend, currency)} / {formatCurrency(summary.budget_status.overall_limit, currency)}
             </span>
           </div>
@@ -94,27 +94,31 @@ export default function AnalyticsPage({ summary, darkMode, savedBySyncroCount =
       )}
 
       {/* Main Charts */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-        <div className={`p-6 rounded-xl border ${darkMode ? "bg-[#2D3748] border-[#374151]" : "bg-white border-gray-200"}`}>
-          <h3 className={`font-semibold mb-6 ${darkMode ? "text-white" : "text-gray-900"}`}>Spending Trend</h3>
-          <ResponsiveContainer width="100%" height={300}>
-            <LineChart data={summary.monthly_trend}>
-              <CartesianGrid strokeDasharray="3 3" stroke={darkMode ? "#374151" : "#e5e7eb"} />
-              <XAxis dataKey="month" stroke={darkMode ? "#9ca3af" : "#9ca3af"} />
-              <YAxis stroke={darkMode ? "#9ca3af" : "#9ca3af"} />
-              <Tooltip
-                formatter={(value) => formatCurrency(Number(value), currency)}
-                contentStyle={{ backgroundColor: darkMode ? "#1F2937" : "#FFF", border: "none", borderRadius: "8px" }}
-                itemStyle={{ color: "#6366F1" }}
-              />
-              <Line type="monotone" dataKey="total_spend" stroke="#6366F1" strokeWidth={3} dot={{ fill: "#6366F1", r: 5 }} />
-            </LineChart>
-          </ResponsiveContainer>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8">
+        <div className={`p-4 sm:p-6 rounded-xl border ${darkMode ? "bg-[#2D3748] border-[#374151]" : "bg-white border-gray-200"}`}>
+          <h3 className={`font-semibold mb-4 sm:mb-6 ${darkMode ? "text-white" : "text-gray-900"}`}>Spending Trend</h3>
+          <div className="w-full overflow-x-auto">
+            <div style={{ minWidth: 280 }}>
+              <ResponsiveContainer width="100%" height={240}>
+                <LineChart data={summary.monthly_trend}>
+                  <CartesianGrid strokeDasharray="3 3" stroke={darkMode ? "#374151" : "#e5e7eb"} />
+                  <XAxis dataKey="month" stroke={darkMode ? "#9ca3af" : "#9ca3af"} tick={{ fontSize: 11 }} />
+                  <YAxis stroke={darkMode ? "#9ca3af" : "#9ca3af"} tick={{ fontSize: 11 }} width={55} />
+                  <Tooltip
+                    formatter={(value) => formatCurrency(Number(value), currency)}
+                    contentStyle={{ backgroundColor: darkMode ? "#1F2937" : "#FFF", border: "none", borderRadius: "8px" }}
+                    itemStyle={{ color: "#6366F1" }}
+                  />
+                  <Line type="monotone" dataKey="total_spend" stroke="#6366F1" strokeWidth={3} dot={{ fill: "#6366F1", r: 4 }} />
+                </LineChart>
+              </ResponsiveContainer>
+            </div>
+          </div>
         </div>
 
-        <div className={`p-6 rounded-xl border ${darkMode ? "bg-[#2D3748] border-[#374151]" : "bg-white border-gray-200"}`}>
-          <h3 className={`font-semibold mb-6 ${darkMode ? "text-white" : "text-gray-900"}`}>Category Breakdown</h3>
-          <ResponsiveContainer width="100%" height={300}>
+        <div className={`p-4 sm:p-6 rounded-xl border ${darkMode ? "bg-[#2D3748] border-[#374151]" : "bg-white border-gray-200"}`}>
+          <h3 className={`font-semibold mb-4 sm:mb-6 ${darkMode ? "text-white" : "text-gray-900"}`}>Category Breakdown</h3>
+          <ResponsiveContainer width="100%" height={200}>
             <PieChart>
               <Pie
                 data={summary.category_breakdown}
@@ -122,8 +126,8 @@ export default function AnalyticsPage({ summary, darkMode, savedBySyncroCount =
                 nameKey="category"
                 cx="50%"
                 cy="50%"
-                innerRadius={60}
-                outerRadius={100}
+                innerRadius={50}
+                outerRadius={80}
                 paddingAngle={5}
               >
                 {summary.category_breakdown.map((entry, index) => (
@@ -133,11 +137,11 @@ export default function AnalyticsPage({ summary, darkMode, savedBySyncroCount =
               <Tooltip formatter={(value) => formatCurrency(Number(value), currency)} />
             </PieChart>
           </ResponsiveContainer>
-          <div className="mt-4 grid grid-cols-2 gap-2">
+          <div className="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-1.5">
             {summary.category_breakdown.map((cat, idx) => (
-              <div key={idx} className="flex items-center gap-2 text-sm">
-                <div className="w-2 h-2 rounded-full" style={{ backgroundColor: COLORS[idx % COLORS.length] }}></div>
-                <span className="text-gray-400">{cat.category}: {formatCurrency(cat.total_spend, currency)}</span>
+              <div key={idx} className="flex items-center gap-2 text-xs sm:text-sm">
+                <div className="w-2 h-2 flex-shrink-0 rounded-full" style={{ backgroundColor: COLORS[idx % COLORS.length] }}></div>
+                <span className="text-gray-400 truncate">{cat.category}: {formatCurrency(cat.total_spend, currency)}</span>
               </div>
             ))}
           </div>
@@ -160,23 +164,27 @@ export default function AnalyticsPage({ summary, darkMode, savedBySyncroCount =
       )}
 
       {/* Top Subscriptions */}
-      <div className={`p-6 rounded-xl border ${darkMode ? "bg-[#2D3748] border-[#374151]" : "bg-white border-gray-200"}`}>
-        <h3 className={`font-semibold mb-6 ${darkMode ? "text-white" : "text-gray-900"}`}>Top Subscriptions (Monthly)</h3>
-        <div className="space-y-4">
-          {summary.top_subscriptions.map((sub, idx) => (
-            <div key={idx} className="flex justify-between items-center pb-4 border-b border-gray-700 last:border-0">
-              <div>
-                <p className={`font-medium ${darkMode ? "text-white" : "text-gray-900"}`}>{sub.name}</p>
-                <p className="text-xs text-gray-400">{sub.billing_cycle}</p>
-              </div>
-              <div className="text-right">
-                <p className={`font-bold ${darkMode ? "text-white" : "text-gray-900"}`}>
-                  {formatCurrency(sub.monthly_normalized_price, currency)}
-                </p>
-                <p className="text-xs text-green-600">Active</p>
-              </div>
+      <div className={`p-4 sm:p-6 rounded-xl border ${darkMode ? "bg-[#2D3748] border-[#374151]" : "bg-white border-gray-200"}`}>
+        <h3 className={`font-semibold mb-4 sm:mb-6 ${darkMode ? "text-white" : "text-gray-900"}`}>Top Subscriptions (Monthly)</h3>
+        <div className="overflow-x-auto -mx-4 sm:mx-0 px-4 sm:px-0">
+          <div className="min-w-[320px]">
+            <div className="space-y-3 sm:space-y-4">
+              {summary.top_subscriptions.map((sub, idx) => (
+                <div key={idx} className="flex justify-between items-center pb-3 sm:pb-4 border-b border-gray-700 last:border-0 gap-4">
+                  <div className="min-w-0">
+                    <p className={`font-medium truncate ${darkMode ? "text-white" : "text-gray-900"}`}>{sub.name}</p>
+                    <p className="text-xs text-gray-400">{sub.billing_cycle}</p>
+                  </div>
+                  <div className="text-right flex-shrink-0">
+                    <p className={`font-bold text-sm sm:text-base ${darkMode ? "text-white" : "text-gray-900"}`}>
+                      {formatCurrency(sub.monthly_normalized_price, currency)}
+                    </p>
+                    <p className="text-xs text-green-600">Active</p>
+                  </div>
+                </div>
+              ))}
             </div>
-          ))}
+          </div>
         </div>
       </div>
     </div>