From 0e5d2856805e39a141940db5ff1502c666a44869 Mon Sep 17 00:00:00 2001
From: fahed <fahed@softhouse.io>
Date: Tue, 3 Feb 2026 15:02:29 +0300
Subject: [PATCH] feat: Complete mobile UX/UI overhaul

Major improvements:
- New CSS design system with custom properties (tokens)
- Consistent spacing scale (4px base)
- Touch-friendly sizing (44px min targets)
- Improved Carousel with better touch handling and rubber-band effect
- Enhanced FilterControls (auto-collapse on mobile)
- Better stat card styling with change indicators
- Refined chart cards and toggle switches
- Smoother transitions and micro-interactions
- Better RTL support
- Print styles
- Responsive breakpoints for tablet (1024px), mobile (768px), and small mobile (375px)
- Cleaner typography hierarchy
- Subtle shadows and depth

Components updated:
- App.css: Complete rewrite with design tokens
- Carousel.jsx: Better touch gestures with velocity detection
- StatCard.jsx: Improved change indicator styling
- FilterControls.jsx: Auto-collapse on mobile
- EmptyState.jsx: Better accessibility
- ChartExport.js: Cleaned up unused imports
---
 package-lock.json                        |   50 +
 package.json                             |    1 +
 public/index.html                        |    2 +-
 src/App.css                              | 2805 ++++++++++++----------
 src/App.js                               |   71 +-
 src/components/ChartExport.js            |  145 +-
 src/components/Comparison.js             |  240 +-
 src/components/Dashboard.js              |  177 +-
 src/components/Slides.js                 |  121 +-
 src/components/shared/Carousel.jsx       |   88 +-
 src/components/shared/EmptyState.jsx     |   29 +-
 src/components/shared/FilterControls.jsx |   75 +-
 src/components/shared/StatCard.jsx       |    9 +-
 src/config/chartConfig.js                |   10 +-
 src/contexts/LanguageContext.js          |   82 +
 src/index.js                             |    5 +-
 src/locales/ar.json                      |  155 ++
 src/locales/en.json                      |  155 ++
 18 files changed, 2610 insertions(+), 1610 deletions(-)
 create mode 100644 src/contexts/LanguageContext.js
 create mode 100644 src/locales/ar.json
 create mode 100644 src/locales/en.json

diff --git a/package-lock.json b/package-lock.json
index 98edffb..5f2520e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@testing-library/user-event": "^13.5.0",
         "chart.js": "^4.5.1",
         "chartjs-plugin-datalabels": "^2.2.0",
+        "html2canvas": "^1.4.1",
         "jszip": "^3.10.1",
         "react": "^19.2.4",
         "react-chartjs-2": "^5.3.1",
@@ -5092,6 +5093,15 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.9.19",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.19.tgz",
@@ -5995,6 +6005,15 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/css-loader": {
       "version": "6.11.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz",
@@ -8903,6 +8922,19 @@
         }
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/htmlparser2": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
@@ -15946,6 +15978,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -16509,6 +16550,15 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
diff --git a/package.json b/package.json
index af216cb..e5e449c 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "@testing-library/user-event": "^13.5.0",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
+    "html2canvas": "^1.4.1",
     "jszip": "^3.10.1",
     "react": "^19.2.4",
     "react-chartjs-2": "^5.3.1",
diff --git a/public/index.html b/public/index.html
index af9c9e9..104238a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,7 +17,7 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/App.css b/src/App.css
index 5cfea18..b2c3a16 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,42 +1,159 @@
 /* ========================================
-   HiHala Dashboard - Minimalist Luxury
+   HiHala Dashboard - Mobile Excellence
+   Design System + Premium Mobile UX
+   ======================================== */
+
+/* ========================================
+   1. CSS CUSTOM PROPERTIES (Design Tokens)
    ======================================== */
 
 :root {
-  --bg: #fafafa;
+  /* Colors - Refined palette */
+  --bg: #f8fafc;
+  --bg-elevated: #ffffff;
   --surface: #ffffff;
-  --border: #e5e5e5;
-  --text-primary: #171717;
-  --text-secondary: #525252;
-  --text-muted: #a3a3a3;
-  --accent: #2563eb;
+  --surface-hover: #f1f5f9;
+  --border: #e2e8f0;
+  --border-light: #f1f5f9;
+  
+  /* Text hierarchy */
+  --text-primary: #0f172a;
+  --text-secondary: #334155;
+  --text-muted: #64748b;
+  --text-subtle: #94a3b8;
+  
+  /* Brand colors */
   --primary: #2563eb;
-  --accent-light: #dbeafe;
+  --primary-hover: #1d4ed8;
+  --primary-light: #dbeafe;
+  --primary-subtle: #eff6ff;
+  
+  /* Semantic colors */
   --success: #059669;
   --success-light: #d1fae5;
   --danger: #dc2626;
   --danger-light: #fee2e2;
-  --gold: #b8860b;
-  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
-  --shadow: 0 4px 12px rgba(0,0,0,0.05);
-  --radius: 12px;
+  --warning: #d97706;
+  --warning-light: #fef3c7;
+  
+  /* Chart colors */
+  --chart-primary: #3b82f6;
+  --chart-secondary: #8b5cf6;
+  --chart-tertiary: #06b6d4;
+  --chart-quaternary: #f59e0b;
+  
+  /* Shadows - subtle depth */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
+  
+  /* Radii */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 18px;
+  --radius-full: 9999px;
+  
+  /* Spacing scale (4px base) */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  
+  /* Typography - Desktop */
+  --text-xs: 0.75rem;    /* 12px */
+  --text-sm: 0.8125rem;  /* 13px */
+  --text-base: 0.9375rem; /* 15px */
+  --text-lg: 1.0625rem;  /* 17px */
+  --text-xl: 1.25rem;    /* 20px */
+  --text-2xl: 1.5rem;    /* 24px */
+  --text-3xl: 1.875rem;  /* 30px */
+  
+  /* Touch targets */
+  --touch-min: 44px;
+  --touch-comfortable: 48px;
+  
+  /* Transitions */
+  --transition-fast: 150ms ease;
+  --transition-base: 200ms ease;
+  --transition-slow: 300ms ease;
+  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  
+  /* Z-index layers */
+  --z-base: 1;
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-overlay: 300;
+  --z-modal: 400;
+  --z-toast: 500;
 }
 
-* {
+/* Mobile-specific tokens */
+@media (max-width: 768px) {
+  :root {
+    --text-xs: 0.6875rem;  /* 11px */
+    --text-sm: 0.75rem;    /* 12px */
+    --text-base: 0.8125rem; /* 13px */
+    --text-lg: 0.9375rem;  /* 15px */
+    --text-xl: 1.0625rem;  /* 17px */
+    --text-2xl: 1.25rem;   /* 20px */
+    --text-3xl: 1.5rem;    /* 24px */
+  }
+}
+
+/* ========================================
+   2. RESET & BASE STYLES
+   ======================================== */
+
+*, *::before, *::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
+html {
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: transparent;
+  scroll-behavior: smooth;
+}
+
 body {
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   background: var(--bg);
   color: var(--text-primary);
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+  overflow-x: hidden;
 }
 
-/* Loading & Error */
+/* RTL Arabic font */
+[dir="rtl"] body {
+  font-family: 'Tajawal', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+/* Remove focus outline, add custom focus ring */
+:focus {
+  outline: none;
+}
+
+:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+/* ========================================
+   3. LOADING & ERROR STATES
+   ======================================== */
+
 .loading-container,
 .error-container {
   display: flex;
@@ -44,15 +161,17 @@ body {
   align-items: center;
   justify-content: center;
   min-height: 100vh;
-  gap: 16px;
-  color: var(--text-secondary);
+  min-height: 100dvh;
+  gap: var(--space-4);
+  padding: var(--space-6);
+  text-align: center;
 }
 
 .loading-spinner {
-  width: 32px;
-  height: 32px;
-  border: 2px solid var(--border);
-  border-top-color: var(--accent);
+  width: 36px;
+  height: 36px;
+  border: 3px solid var(--border);
+  border-top-color: var(--primary);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }
@@ -61,127 +180,133 @@ body {
   to { transform: rotate(360deg); }
 }
 
+.loading-container p,
+.error-container h2 {
+  font-size: var(--text-lg);
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.error-container p {
+  font-size: var(--text-base);
+  color: var(--text-muted);
+  max-width: 320px;
+}
+
 .error-container button {
-  padding: 10px 20px;
+  padding: var(--space-3) var(--space-5);
   background: var(--text-primary);
   color: white;
   border: none;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
+  font-size: var(--text-base);
+  font-weight: 600;
   cursor: pointer;
-  font-weight: 500;
-  font-size: 0.875rem;
+  min-height: var(--touch-min);
+  transition: background var(--transition-fast);
 }
 
 .error-container button:hover {
   background: var(--text-secondary);
 }
 
-/* Empty State */
+/* ========================================
+   4. EMPTY STATE
+   ======================================== */
+
 .empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 48px 24px;
+  padding: var(--space-12) var(--space-6);
   text-align: center;
-  color: var(--text-secondary);
 }
 
 .empty-state-icon {
   font-size: 3rem;
-  margin-bottom: 16px;
-  opacity: 0.5;
+  margin-bottom: var(--space-4);
+  opacity: 0.6;
 }
 
 .empty-state-title {
-  font-size: 1.125rem;
+  font-size: var(--text-xl);
   font-weight: 600;
   color: var(--text-primary);
-  margin-bottom: 8px;
+  margin-bottom: var(--space-2);
 }
 
 .empty-state-message {
-  font-size: 0.875rem;
+  font-size: var(--text-base);
   color: var(--text-muted);
-  max-width: 300px;
-  margin-bottom: 20px;
+  max-width: 280px;
+  margin-bottom: var(--space-5);
 }
 
 .empty-state-action {
-  padding: 10px 20px;
+  padding: var(--space-3) var(--space-5);
   background: var(--primary);
   color: white;
   border: none;
-  border-radius: 8px;
-  font-weight: 500;
-  font-size: 0.875rem;
+  border-radius: var(--radius-md);
+  font-size: var(--text-base);
+  font-weight: 600;
   cursor: pointer;
-  transition: all 0.2s;
+  min-height: var(--touch-min);
+  transition: all var(--transition-fast);
 }
 
 .empty-state-action:hover {
-  background: #1d4ed8;
+  background: var(--primary-hover);
+  transform: translateY(-1px);
 }
 
-/* Skeleton Loader */
-.skeleton {
-  background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
-  background-size: 200% 100%;
-  animation: skeleton-loading 1.5s infinite;
-  border-radius: 4px;
-}
+/* ========================================
+   5. NAVIGATION - TOP BAR
+   ======================================== */
 
-@keyframes skeleton-loading {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-
-.skeleton-text {
-  height: 1em;
-  margin-bottom: 0.5em;
-}
-
-.skeleton-text.lg { height: 2em; width: 60%; }
-.skeleton-text.sm { height: 0.75em; width: 40%; }
-
-/* Navigation */
 .nav-bar {
   background: var(--surface);
   border-bottom: 1px solid var(--border);
-  padding: 0 32px;
-  height: 64px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   position: sticky;
   top: 0;
-  z-index: 100;
+  z-index: var(--z-sticky);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  background: rgba(255, 255, 255, 0.9);
 }
 
 .nav-content {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 100%;
   max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 var(--space-6);
+  height: 64px;
 }
 
 .nav-brand {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--space-2);
 }
 
 .nav-brand-icon {
-  color: #3b82f6;
+  width: 24px;
+  height: 24px;
+  color: var(--primary);
 }
 
 .nav-brand-text {
   font-family: 'DM Sans', 'Inter', -apple-system, sans-serif;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: #1e3a5f;
+  font-size: var(--text-xl);
+  font-weight: 700;
+  color: var(--text-primary);
   letter-spacing: -0.02em;
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
 }
 
 .data-source-select {
@@ -189,62 +314,62 @@ body {
   -webkit-appearance: none;
   background: transparent;
   border: none;
-  color: #3b82f6;
+  color: var(--primary);
   font-family: inherit;
   font-size: inherit;
-  font-weight: 500;
+  font-weight: 600;
   cursor: pointer;
-  padding: 2px 20px 2px 6px;
-  margin-left: 4px;
-  border-radius: 6px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  padding: var(--space-1) var(--space-5) var(--space-1) var(--space-2);
+  margin-left: var(--space-1);
+  border-radius: var(--radius-sm);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 4px center;
-  transition: background-color 0.15s ease;
+  transition: background-color var(--transition-fast);
 }
 
 .data-source-select:hover {
-  background-color: rgba(59, 130, 246, 0.08);
-}
-
-.data-source-select:focus {
-  outline: none;
-  background-color: rgba(59, 130, 246, 0.12);
+  background-color: var(--primary-subtle);
 }
 
 .data-source-select option {
-  color: #1e3a5f;
+  color: var(--text-primary);
   background: white;
   font-weight: 500;
 }
 
 .data-source-select option:disabled {
-  color: #94a3b8;
+  color: var(--text-subtle);
 }
 
+/* Desktop nav links */
 .nav-links {
   display: flex;
-  gap: 8px;
+  align-items: center;
+  gap: var(--space-2);
 }
 
 .nav-link {
-  color: var(--text-secondary);
-  text-decoration: none;
-  padding: 10px 18px;
-  border-radius: 8px;
-  font-size: 0.875rem;
-  font-weight: 600;
-  transition: all 0.2s;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: var(--text-base);
+  font-weight: 600;
+  border-radius: var(--radius-md);
   background: var(--bg);
   border: 1px solid transparent;
+  transition: all var(--transition-fast);
+  min-height: var(--touch-min);
 }
 
 .nav-link svg {
-  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
   opacity: 0.7;
+  flex-shrink: 0;
 }
 
 .nav-link:hover {
@@ -263,223 +388,167 @@ body {
   border-color: var(--primary);
 }
 
-.nav-label-toggle {
+.nav-link.active svg {
+  opacity: 1;
+}
+
+.nav-lang-toggle {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 8px 14px;
-  border-radius: 8px;
-  font-size: 0.75rem;
+  justify-content: center;
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  font-size: var(--text-base);
   font-weight: 600;
   cursor: pointer;
-  transition: all 0.2s;
   background: var(--bg);
   border: 1px solid var(--border);
   color: var(--text-muted);
-  margin-left: 8px;
+  margin-inline-start: var(--space-2);
+  min-width: 50px;
+  min-height: var(--touch-min);
+  transition: all var(--transition-fast);
 }
 
-.nav-label-toggle:hover {
+.nav-lang-toggle:hover {
   background: var(--surface);
   color: var(--text-primary);
   border-color: var(--primary);
 }
 
-.nav-label-toggle.active {
-  background: #10b981;
-  color: white;
-  border-color: #10b981;
+/* ========================================
+   6. MOBILE BOTTOM NAVIGATION
+   ======================================== */
+
+.mobile-nav {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--surface);
+  border-top: 1px solid var(--border);
+  padding: var(--space-2) var(--space-3);
+  padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
+  justify-content: space-around;
+  align-items: center;
+  z-index: var(--z-sticky);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  background: rgba(255, 255, 255, 0.95);
 }
 
-.nav-label-toggle svg {
-  opacity: 0.8;
+.mobile-nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: var(--space-2) var(--space-4);
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  text-decoration: none;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+  cursor: pointer;
+  min-height: var(--touch-min);
+  position: relative;
 }
 
-.nav-link.active svg {
-  opacity: 1;
+.mobile-nav-item svg {
+  width: 22px;
+  height: 22px;
+  transition: transform var(--transition-spring);
 }
 
-/* Main Content */
+.mobile-nav-item:active svg {
+  transform: scale(0.9);
+}
+
+.mobile-nav-item.active {
+  color: var(--primary);
+}
+
+.mobile-nav-item.active::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 24px;
+  height: 3px;
+  background: var(--primary);
+  border-radius: 0 0 3px 3px;
+}
+
+/* ========================================
+   7. MAIN CONTENT LAYOUT
+   ======================================== */
+
 .dashboard,
 .comparison {
-  padding: 32px;
+  padding: var(--space-6);
   max-width: 1400px;
   margin: 0 auto;
-  overflow-x: hidden;
+  min-height: calc(100vh - 64px);
 }
 
-/* Page Title */
+/* Page titles */
 .page-title {
-  margin-bottom: 32px;
+  margin-bottom: var(--space-6);
 }
 
 .page-title h1 {
-  font-size: 1.5rem;
-  font-weight: 600;
+  font-size: var(--text-2xl);
+  font-weight: 700;
   letter-spacing: -0.02em;
-  margin-bottom: 4px;
+  color: var(--text-primary);
+  margin-bottom: var(--space-1);
 }
 
 .page-title p {
+  font-size: var(--text-base);
   color: var(--text-muted);
-  font-size: 0.875rem;
 }
 
-/* Filters - now uses .controls for consistency */
-
-/* Stats Grid */
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 16px;
-  margin-bottom: 32px;
-}
-
-.stat-card {
-  background: var(--surface);
-  padding: 24px;
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-}
-
-.stat-card h3 {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 8px;
-}
-
-.stat-value {
-  font-size: 1.75rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  letter-spacing: -0.02em;
-}
-
-.stat-change {
-  font-size: 0.75rem;
-  font-weight: 500;
-  margin-top: 4px;
-}
-
-.stat-change.positive { color: var(--success); }
-.stat-change.negative { color: var(--danger); }
-
-/* Charts */
-.charts-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 16px;
-  margin-bottom: 32px;
-}
-
-.chart-card {
-  background: var(--surface);
-  padding: 24px;
-  border-radius: var(--radius);
-  border: 1px solid var(--border);
-  position: relative;
-}
-
-.toggle-corner {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  z-index: 1;
-}
-
-.chart-card.full-width {
-  grid-column: 1 / -1;
-}
-
-.chart-card.half-width {
-  grid-column: span 1;
-}
-
-.chart-card h2 {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--text-primary);
-  margin-bottom: 20px;
-}
-
-.chart-card-header {
+.page-title-with-actions {
   display: flex;
+  align-items: flex-start;
   justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-  gap: 12px;
-  flex-wrap: wrap;
+  gap: var(--space-4);
+  margin-bottom: var(--space-6);
 }
 
-.chart-card-header h2 {
-  margin: 0;
+.page-title-with-actions .page-title {
+  margin-bottom: 0;
 }
 
-.chart-card-actions {
+.toggle-with-label {
   display: flex;
-  gap: 8px;
   align-items: center;
+  gap: var(--space-2);
+  margin-top: var(--space-1);
 }
 
-.chart-container {
-  height: 280px;
-  position: relative;
-}
-
-/* Table */
-.table-container {
-  overflow-x: auto;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.8125rem;
-}
-
-table th {
+.toggle-with-label .toggle-text {
+  font-size: var(--text-sm);
   font-weight: 500;
-  font-size: 0.6875rem;
   color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  padding: 12px;
-  text-align: right;
-  border-bottom: 1px solid var(--border);
 }
 
-table th:first-child { text-align: left; }
+/* ========================================
+   8. FILTER CONTROLS
+   ======================================== */
 
-table td {
-  padding: 12px;
-  text-align: right;
-  border-bottom: 1px solid var(--border);
-  color: var(--text-secondary);
-}
-
-table td:first-child { text-align: left; }
-
-table tbody tr:hover {
-  background: var(--bg);
-}
-
-.bold { font-weight: 600; color: var(--text-primary); }
-.muted { color: var(--text-muted); }
-.primary { color: var(--accent); }
-.purple { color: #7c3aed; }
-.positive { color: var(--success); }
-.negative { color: var(--danger); }
-
-/* Comparison Page */
 .controls {
   background: var(--surface);
-  padding: 24px;
-  border-radius: var(--radius);
+  padding: var(--space-5);
+  border-radius: var(--radius-lg);
   border: 1px solid var(--border);
-  margin-bottom: 32px;
+  margin-bottom: var(--space-6);
+  box-shadow: var(--shadow-card);
 }
 
 .controls-header {
@@ -487,36 +556,35 @@ table tbody tr:hover {
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .controls-header h3 {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
   margin: 0;
 }
 
 .controls-header-actions {
   display: flex;
   align-items: center;
-  gap: 8px;
-}
-
-.controls h3 {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  gap: var(--space-2);
 }
 
 .controls-reset {
   background: transparent;
   border: 1px solid var(--border);
   color: var(--text-muted);
-  padding: 4px 12px;
-  border-radius: 6px;
-  font-size: 0.75rem;
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.2s;
+  min-height: 32px;
+  transition: all var(--transition-fast);
 }
 
 .controls-reset:hover {
@@ -529,18 +597,20 @@ table tbody tr:hover {
   background: none;
   border: none;
   color: var(--text-muted);
-  font-size: 0.75rem;
+  font-size: var(--text-sm);
+  font-weight: 500;
   cursor: pointer;
-  padding: 4px 8px;
+  padding: var(--space-1) var(--space-2);
+  min-height: 32px;
 }
 
 .controls-body {
-  margin-top: 16px;
+  margin-top: var(--space-4);
 }
 
 .control-row {
   display: flex;
-  gap: 16px;
+  gap: var(--space-4);
   flex-wrap: wrap;
   align-items: flex-end;
 }
@@ -548,121 +618,619 @@ table tbody tr:hover {
 .control-group {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: var(--space-1);
+  min-width: 150px;
 }
 
 .control-group label {
-  font-size: 0.6875rem;
-  font-weight: 500;
-  color: var(--text-muted);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
 
 .control-group select,
 .control-group input[type="date"] {
-  padding: 10px 14px;
+  padding: var(--space-3);
   border: 1px solid var(--border);
-  border-radius: 6px;
-  font-size: 0.875rem;
+  border-radius: var(--radius-md);
+  font-size: var(--text-base);
+  font-weight: 500;
   background: var(--surface);
   color: var(--text-primary);
-  min-width: 150px;
+  min-height: var(--touch-min);
+  transition: border-color var(--transition-fast);
+  cursor: pointer;
 }
 
 .control-group select:focus,
 .control-group input[type="date"]:focus {
-  outline: none;
-  border-color: var(--accent);
+  border-color: var(--primary);
 }
 
-.period-display {
-  background: var(--bg);
-  padding: 16px;
-  border-radius: 8px;
-  margin-top: 16px;
-  display: flex;
-  gap: 32px;
+/* ========================================
+   9. STAT CARDS
+   ======================================== */
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-4);
+  margin-bottom: var(--space-6);
 }
 
-.period-box .label {
-  font-size: 0.6875rem;
+.stat-card {
+  background: var(--surface);
+  padding: var(--space-5);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-card);
+  transition: all var(--transition-fast);
+}
+
+.stat-card:hover {
+  box-shadow: var(--shadow-md);
+}
+
+.stat-card h3 {
+  font-size: var(--text-xs);
+  font-weight: 600;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  margin-bottom: 4px;
+  margin-bottom: var(--space-2);
 }
 
-.period-box .dates {
-  font-size: 0.875rem;
+.stat-value {
+  font-size: var(--text-3xl);
+  font-weight: 700;
   color: var(--text-primary);
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+
+.stat-change {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  margin-top: var(--space-2);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+}
+
+.stat-change-arrow {
+  font-size: 0.9em;
+}
+
+.stat-change-value {
+  margin: 0 2px;
+}
+
+.stat-change-label {
+  opacity: 0.8;
   font-weight: 500;
 }
 
-/* Comparison Metrics */
+.stat-change.positive {
+  color: var(--success);
+  background: var(--success-light);
+}
+
+.stat-change.negative {
+  color: var(--danger);
+  background: var(--danger-light);
+}
+
+.stat-subtitle {
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+  margin-top: var(--space-1);
+}
+
+/* Stats carousel for mobile */
+.stats-carousel {
+  margin-bottom: var(--space-6);
+}
+
+.stats-carousel .stat-card {
+  margin: 0;
+}
+
+/* ========================================
+   10. CHART CARDS
+   ======================================== */
+
+.charts-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-4);
+  margin-bottom: var(--space-6);
+}
+
+.chart-card {
+  background: var(--surface);
+  padding: var(--space-5);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-card);
+  position: relative;
+}
+
+.chart-card.full-width {
+  grid-column: 1 / -1;
+}
+
+.chart-card.half-width {
+  grid-column: span 1;
+}
+
+.chart-card h2 {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: var(--space-4);
+}
+
+.chart-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-4);
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+
+.chart-card-header h2 {
+  margin: 0;
+}
+
+.chart-card-actions {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+}
+
+.chart-container {
+  height: 280px;
+  position: relative;
+}
+
+/* Corner toggle in chart cards */
+.toggle-corner {
+  position: absolute;
+  top: var(--space-4);
+  right: var(--space-4);
+  left: auto;
+  z-index: 1;
+}
+
+[dir="rtl"] .toggle-corner {
+  right: auto;
+  left: var(--space-4);
+}
+
+/* ========================================
+   11. TOGGLE SWITCH (Daily/Weekly etc.)
+   ======================================== */
+
+.toggle-switch {
+  display: inline-flex;
+  background: var(--bg);
+  padding: 3px;
+  border-radius: var(--radius-full);
+  border: 1px solid var(--border);
+  gap: 2px;
+}
+
+.toggle-switch button {
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-full);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  cursor: pointer;
+  min-height: 32px;
+  transition: all var(--transition-fast);
+}
+
+.toggle-switch button:hover:not(.active) {
+  color: var(--text-secondary);
+}
+
+.toggle-switch button.active {
+  background: var(--surface);
+  color: var(--text-primary);
+  box-shadow: var(--shadow-sm);
+}
+
+/* Data Labels Toggle */
+.label-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  border: 2px solid var(--border);
+  background: var(--surface);
+  color: var(--text-muted);
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  cursor: pointer;
+  min-height: var(--touch-min);
+  transition: all var(--transition-fast);
+}
+
+.label-toggle:hover {
+  border-color: var(--primary);
+  color: var(--text-primary);
+}
+
+.label-toggle.active {
+  background: var(--primary);
+  border-color: var(--primary);
+  color: white;
+}
+
+/* Chart metric selector pills */
+.chart-metric-selector {
+  display: inline-flex;
+  gap: 2px;
+  background: var(--bg);
+  padding: 3px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+}
+
+.chart-metric-selector button {
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  padding: var(--space-1) var(--space-2);
+  border-radius: 4px;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.chart-metric-selector button:hover {
+  color: var(--text-secondary);
+}
+
+.chart-metric-selector button.active {
+  background: var(--surface);
+  color: var(--text-primary);
+  box-shadow: var(--shadow-xs);
+}
+
+/* ========================================
+   12. CAROUSEL - Touch-optimized
+   ======================================== */
+
+.carousel {
+  outline: none;
+  touch-action: pan-y pinch-zoom;
+}
+
+.carousel:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 4px;
+  border-radius: var(--radius-md);
+}
+
+.carousel-container {
+  position: relative;
+  overflow: hidden;
+}
+
+.carousel-viewport {
+  overflow: hidden;
+  width: 100%;
+}
+
+.carousel-track {
+  display: flex;
+  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  will-change: transform;
+}
+
+.carousel-slide {
+  min-width: 100%;
+  max-width: 100%;
+  flex-shrink: 0;
+  padding: 0 2px;
+  box-sizing: border-box;
+}
+
+.carousel-slide .chart-card,
+.carousel-slide .stat-card,
+.carousel-slide .metric-card {
+  width: 100%;
+  margin: 0;
+  height: 100%;
+}
+
+/* Carousel dots - pill navigation */
+.carousel-dots {
+  display: flex;
+  justify-content: center;
+  gap: var(--space-2);
+  margin-top: var(--space-4);
+  padding: var(--space-2) 0;
+  flex-wrap: wrap;
+}
+
+.carousel-dot {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  width: auto;
+  min-width: 32px;
+  height: 32px;
+  border-radius: var(--radius-full);
+  padding: 0 var(--space-3);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-fast);
+}
+
+.carousel-dot .dot-label {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.carousel-dot:hover {
+  border-color: var(--primary);
+}
+
+.carousel-dot.active {
+  background: var(--primary);
+  border-color: var(--primary);
+}
+
+.carousel-dot.active .dot-label {
+  color: white;
+}
+
+/* Labeled variant (larger pills) */
+.carousel-dots.labeled .carousel-dot {
+  min-width: auto;
+  height: auto;
+  padding: var(--space-2) var(--space-4);
+  min-height: 36px;
+}
+
+/* Hide arrows on touch devices */
+.carousel-arrow {
+  display: none;
+}
+
+/* Charts carousel */
+.charts-carousel {
+  margin-bottom: var(--space-6);
+}
+
+.charts-carousel .chart-container {
+  height: 240px;
+}
+
+/* Cards carousel */
+.cards-carousel {
+  margin-bottom: var(--space-6);
+}
+
+/* Chart selectors inline (mobile) */
+.chart-selectors-inline {
+  display: flex;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  margin-bottom: var(--space-3);
+}
+
+.chart-selectors-inline .chart-metric-selector {
+  flex-wrap: wrap;
+}
+
+.chart-selectors-inline .chart-metric-selector button {
+  padding: var(--space-1) var(--space-2);
+  font-size: var(--text-xs);
+}
+
+/* ========================================
+   13. TABLE STYLES
+   ======================================== */
+
+.table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  margin: 0 calc(var(--space-4) * -1);
+  padding: 0 var(--space-4);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+
+table th {
+  font-weight: 600;
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: var(--space-3);
+  text-align: right;
+  border-bottom: 2px solid var(--border);
+  white-space: nowrap;
+}
+
+table th:first-child {
+  text-align: left;
+}
+
+table td {
+  padding: var(--space-3);
+  text-align: right;
+  border-bottom: 1px solid var(--border-light);
+  color: var(--text-secondary);
+}
+
+table td:first-child {
+  text-align: left;
+}
+
+table tbody tr:hover {
+  background: var(--surface-hover);
+}
+
+table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+/* Table text variants */
+.bold { font-weight: 600; color: var(--text-primary); }
+.muted { color: var(--text-muted); }
+.primary { color: var(--primary); font-weight: 600; }
+.purple { color: #7c3aed; font-weight: 600; }
+.positive { color: var(--success); font-weight: 600; }
+.negative { color: var(--danger); font-weight: 600; }
+
+/* ========================================
+   14. COMPARISON PAGE SPECIFIC
+   ======================================== */
+
+/* Period Display Banner */
+.period-display-banner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-6);
+  background: var(--bg);
+  padding: var(--space-5);
+  border-radius: var(--radius-lg);
+  margin-bottom: var(--space-6);
+}
+
+.period-display-banner .period-box {
+  text-align: center;
+  min-width: 160px;
+}
+
+.period-display-banner .period-label {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  margin-bottom: var(--space-1);
+}
+
+.period-display-banner .period-value {
+  font-size: var(--text-2xl);
+  font-weight: 700;
+  margin-bottom: var(--space-1);
+}
+
+.period-display-banner .period-box.prev .period-value {
+  color: var(--text-secondary);
+}
+
+.period-display-banner .period-box.curr .period-value {
+  color: var(--text-primary);
+}
+
+.period-display-banner .period-dates {
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+}
+
+.period-display-banner .period-vs {
+  font-size: var(--text-base);
+  font-weight: 600;
+  color: var(--text-subtle);
+  padding: 0 var(--space-2);
+}
+
+/* Comparison metric cards */
 .comparison-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 16px;
-  margin-bottom: 32px;
+  gap: var(--space-4);
+  margin-bottom: var(--space-6);
 }
 
 .metric-card {
   background: var(--surface);
-  padding: 20px;
-  border-radius: var(--radius);
+  padding: var(--space-4);
+  border-radius: var(--radius-lg);
   border: 1px solid var(--border);
+  box-shadow: var(--shadow-card);
 }
 
 .metric-card h4 {
-  font-size: 0.75rem;
-  font-weight: 500;
+  font-size: var(--text-xs);
+  font-weight: 600;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  margin-bottom: 12px;
+  margin-bottom: var(--space-3);
 }
 
 .metric-values {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
+  gap: var(--space-3);
 }
 
 .metric-period {
   text-align: center;
 }
 
-.metric-period .year {
-  font-size: 0.625rem;
+.metric-period .year,
+.metric-period .label {
+  font-size: var(--text-xs);
   color: var(--text-muted);
   text-transform: uppercase;
   margin-bottom: 2px;
 }
 
 .metric-period .value {
-  font-size: 1.125rem;
-  font-weight: 600;
+  font-size: var(--text-lg);
+  font-weight: 700;
 }
 
-.metric-period.previous .value { color: var(--text-muted); }
-.metric-period.current .value { color: var(--text-primary); }
+.metric-period.previous .value {
+  color: var(--text-muted);
+}
+
+.metric-period.current .value {
+  color: var(--text-primary);
+}
 
 .metric-change {
   text-align: center;
-  padding: 6px 10px;
-  border-radius: 6px;
-  min-width: 70px;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+  min-width: 60px;
 }
 
 .metric-change .pct {
-  font-size: 0.875rem;
-  font-weight: 600;
+  font-size: var(--text-sm);
+  font-weight: 700;
 }
 
 .metric-change .abs {
-  font-size: 0.625rem;
+  font-size: var(--text-xs);
   opacity: 0.8;
 }
 
@@ -677,332 +1245,226 @@ table tbody tr:hover {
 }
 
 .metric-change.pending {
-  background: var(--muted-light, #f1f5f9);
-  color: var(--text-muted, #64748b);
+  background: var(--bg);
+  color: var(--text-muted);
 }
 
 .metric-change .pending-msg {
-  font-size: 11px;
+  font-size: var(--text-xs);
   font-style: italic;
-  text-align: center;
-  line-height: 1.3;
 }
 
-/* Chart Header with Metric Selector */
-.chart-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-  flex-wrap: wrap;
-  gap: 12px;
-}
-
-.chart-header h2 {
-  margin: 0;
-}
-
-.chart-selectors {
-  display: flex;
-  gap: 8px;
-}
-
-.chart-metric-selector {
-  display: flex;
-  gap: 4px;
+/* Period display (legacy) */
+.period-display {
   background: var(--bg);
-  padding: 4px;
-  border-radius: 8px;
-}
-
-/* Toggle switch style (Daily/Weekly) */
-.toggle-switch {
+  padding: var(--space-4);
+  border-radius: var(--radius-md);
+  margin-top: var(--space-4);
   display: flex;
-  background: var(--border);
-  padding: 2px;
-  border-radius: 12px;
-  gap: 0;
+  gap: var(--space-6);
 }
 
-.toggle-switch button {
-  border: none;
-  background: transparent;
-  color: var(--text-muted);
-  padding: 3px 10px;
-  border-radius: 10px;
-  font-size: 0.625rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.25s ease;
-}
-
-.toggle-switch button:hover:not(.active) {
-  color: var(--text-secondary);
-}
-
-.toggle-switch button.active {
-  background: var(--surface);
-  color: var(--text-primary);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-
-/* Data Labels Toggle */
-.label-toggle {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  border: 2px solid var(--border);
-  background: var(--surface);
-  color: var(--text-muted);
-  padding: 8px 14px;
-  border-radius: 10px;
-  font-size: 0.8rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.25s ease;
-}
-
-.label-toggle:hover {
-  border-color: var(--primary);
-  color: var(--text-primary);
-}
-
-.label-toggle.active {
-  background: var(--primary);
-  border-color: var(--primary);
-  color: white;
-}
-
-.chart-metric-selector button {
-  border: none;
-  background: transparent;
-  color: var(--text-muted);
-  padding: 6px 12px;
-  border-radius: 6px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.chart-metric-selector button:hover {
-  color: var(--text-primary);
-  background: rgba(0,0,0,0.05);
-}
-
-.chart-metric-selector button.active {
-  background: var(--surface);
-  color: var(--primary);
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+.period-box .label {
+  font-size: var(--text-xs);
   font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  margin-bottom: var(--space-1);
 }
 
-/* Charts Carousel */
-.charts-carousel {
-  margin-bottom: 32px;
+.period-box .dates {
+  font-size: var(--text-base);
+  font-weight: 600;
+  color: var(--text-primary);
 }
 
-.chart-selectors-bar {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 16px;
-  flex-wrap: wrap;
-}
+/* ========================================
+   15. CHART EXPORT
+   ======================================== */
 
-/* Inline selectors inside chart cards (mobile) */
-.chart-selectors-inline {
-  display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  margin-bottom: 12px;
-}
-
-.chart-selectors-inline .chart-metric-selector {
-  flex-wrap: wrap;
-}
-
-.chart-selectors-inline .chart-metric-selector button {
-  padding: 4px 8px;
-  font-size: 0.6875rem;
-}
-
-/* Carousel - elegant card slider */
-.carousel {
-  outline: none;
-}
-
-.carousel:focus-visible {
-  outline: 2px solid var(--primary);
-  outline-offset: 4px;
-  border-radius: 8px;
-}
-
-.carousel-container {
+.exportable-chart-wrapper,
+.exportable-chart {
+  width: 100%;
   position: relative;
-  margin: 0 -6px;
 }
 
-.carousel-viewport {
-  overflow: hidden;
-  width: 100%;
-}
-
-.carousel-track {
+.chart-header-with-export {
   display: flex;
-  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-3);
+  gap: var(--space-2);
 }
 
-.carousel-slide {
-  min-width: 100%;
-  max-width: 100%;
-  flex-shrink: 0;
-  padding: 0 6px;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.carousel-slide .chart-section,
-.carousel-slide .metric-card,
-.carousel-slide .stat-card,
-.carousel-slide .chart-card {
-  width: 100%;
+.chart-header-with-export h2 {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-secondary);
   margin: 0;
-  box-shadow: none;
+}
+
+.chart-header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.chart-export-btn {
+  width: 36px;
+  height: 36px;
   border: 1px solid var(--border);
   background: var(--surface);
-}
-
-.carousel-slide .chart-section .chart-container,
-.carousel-slide .chart-card .chart-container {
-  height: 240px;
-}
-
-/* Hide arrows on mobile - use swipe */
-.carousel-arrow {
-  display: none;
-}
-
-/* Dots / Pagination */
-.carousel-dots {
-  display: flex;
-  justify-content: center;
-  gap: 6px;
-  margin-top: 20px;
-  padding: 8px 0;
-}
-
-.carousel-dot {
-  background: var(--border);
-  border: none;
-  width: 8px;
-  height: 8px;
-  border-radius: 4px;
-  padding: 0;
+  border-radius: var(--radius-md);
   cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.carousel-dot .dot-label {
-  display: none;
-}
-
-.carousel-dot:hover {
-  background: var(--text-muted);
-}
-
-.carousel-dot.active {
-  background: var(--primary);
-  width: 24px;
-}
-
-/* Labeled dots variant (for named tabs) */
-.carousel-dots.labeled {
-  gap: 8px;
-}
-
-.carousel-dots.labeled .carousel-dot {
-  width: auto;
-  height: auto;
-  padding: 8px 16px;
-  border-radius: 20px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-}
-
-.carousel-dots.labeled .carousel-dot .dot-label {
-  display: inline;
-  font-size: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: var(--text-muted);
-  font-weight: 500;
+  transition: all var(--transition-fast);
+  flex-shrink: 0;
 }
 
-.carousel-dots.labeled .carousel-dot:hover {
-  border-color: var(--primary);
+.chart-export-btn:hover {
   background: var(--bg);
-}
-
-.carousel-dots.labeled .carousel-dot.active {
-  width: auto;
-  background: var(--primary);
+  color: var(--text-primary);
   border-color: var(--primary);
 }
 
-.carousel-dots.labeled .carousel-dot.active .dot-label {
+.btn-export-all {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  background: var(--primary);
   color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  cursor: pointer;
+  min-height: var(--touch-min);
+  transition: all var(--transition-fast);
 }
 
-/* Chart Sections */
+.btn-export-all:hover:not(:disabled) {
+  background: var(--primary-hover);
+}
+
+.btn-export-all:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* ========================================
+   16. CHART SECTIONS (Used in Comparison)
+   ======================================== */
+
 .chart-section {
   background: var(--surface);
-  padding: 20px;
-  border-radius: var(--radius);
+  padding: var(--space-5);
+  border-radius: var(--radius-lg);
   border: 1px solid var(--border);
-  margin-bottom: 16px;
-}
-
-.carousel-slide .chart-section {
-  margin-bottom: 0;
-  padding: 16px;
-  overflow: hidden;
-}
-
-.carousel-slide .chart-section .chart-header {
-  flex-direction: row !important;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-  gap: 8px;
-}
-
-.carousel-slide .chart-section .chart-header h2 {
-  font-size: 0.8125rem;
-  white-space: nowrap;
-  margin: 0;
-}
-
-.carousel-slide .chart-section .chart-header .chart-metric-selector {
-  flex-shrink: 0;
-}
-
-.carousel-slide .chart-section .chart-container,
-.carousel-slide .chart-card .chart-container {
-  width: 100%;
-  overflow: hidden;
+  margin-bottom: var(--space-4);
+  box-shadow: var(--shadow-card);
 }
 
 .chart-section h2 {
-  font-size: 0.875rem;
+  font-size: var(--text-sm);
   font-weight: 600;
-  margin-bottom: 20px;
+  color: var(--text-secondary);
+  margin-bottom: var(--space-4);
 }
 
 .chart-section .chart-container {
   height: 300px;
 }
 
-/* Desktop/Mobile visibility */
+.chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-3);
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.chart-header h2 {
+  margin: 0;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.chart-controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-2);
+  margin-bottom: var(--space-3);
+}
+
+.chart-selectors {
+  display: flex;
+  gap: var(--space-2);
+}
+
+/* ========================================
+   17. SLIDES BUILDER
+   ======================================== */
+
+.slides-builder {
+  padding: var(--space-6);
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.slides-toolbar {
+  display: flex;
+  gap: var(--space-3);
+  margin-bottom: var(--space-6);
+  flex-wrap: wrap;
+}
+
+.btn-primary,
+.btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-md);
+  font-size: var(--text-base);
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  border: none;
+  min-height: var(--touch-min);
+}
+
+.btn-primary {
+  background: var(--primary);
+  color: white;
+}
+
+.btn-primary:hover {
+  background: var(--primary-hover);
+}
+
+.btn-secondary {
+  background: var(--bg);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
+}
+
+.btn-secondary:hover {
+  background: var(--surface-hover);
+}
+
+/* ========================================
+   18. VISIBILITY UTILITIES
+   ======================================== */
+
 .mobile-only {
   display: none;
 }
@@ -1011,31 +1473,10 @@ table tbody tr:hover {
   display: grid;
 }
 
-/* Removed old .filters-* styles - now using .controls-* for consistency */
+/* ========================================
+   19. RESPONSIVE - TABLET (max-width: 1024px)
+   ======================================== */
 
-/* Stats Carousel (mobile) */
-.stats-carousel {
-  margin-bottom: 32px;
-}
-
-/* Cards Carousel (mobile) */
-.cards-carousel {
-  margin-bottom: 32px;
-}
-
-.cards-carousel .carousel-dots {
-  flex-wrap: wrap;
-}
-
-.cards-carousel .carousel-dot {
-  padding: 6px 10px;
-}
-
-.cards-carousel .dot-label {
-  font-size: 0.6875rem;
-}
-
-/* Responsive */
 @media (max-width: 1024px) {
   .stats-grid,
   .comparison-grid {
@@ -1045,100 +1486,120 @@ table tbody tr:hover {
   .charts-grid {
     grid-template-columns: 1fr;
   }
+  
+  .chart-card.half-width {
+    grid-column: span 1;
+  }
 }
 
-/* Mobile Bottom Navigation */
-.mobile-nav {
-  display: none;
-}
+/* ========================================
+   20. RESPONSIVE - MOBILE (max-width: 768px)
+   ======================================== */
 
 @media (max-width: 768px) {
-  /* Hide desktop nav links, show only brand */
+  /* Show mobile nav, hide desktop nav links */
+  .mobile-nav {
+    display: flex;
+  }
+  
   .nav-links {
     display: none;
   }
   
+  /* Compact top nav */
   .nav-bar {
-    padding: 12px 16px;
-    height: auto;
+    padding: 0;
   }
   
   .nav-content {
+    padding: 0 var(--space-4);
+    height: 52px;
     justify-content: center;
   }
   
-  .nav-brand-text {
-    font-size: 1rem;
+  .nav-brand-icon {
+    width: 20px;
+    height: 20px;
   }
   
-  .nav-brand-icon {
-    width: 18px;
-    height: 18px;
+  .nav-brand-text {
+    font-size: var(--text-lg);
   }
   
   .data-source-select {
-    font-size: 0.9rem;
-    padding: 2px 18px 2px 4px;
+    font-size: var(--text-base);
+    padding: var(--space-1) var(--space-4) var(--space-1) var(--space-1);
   }
   
-  /* Mobile Bottom Navigation */
-  .mobile-nav {
-    display: flex;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: var(--surface);
-    border-top: 1px solid var(--border);
-    padding: 8px 16px;
-    padding-bottom: max(8px, env(safe-area-inset-bottom));
-    justify-content: space-around;
-    align-items: center;
-    z-index: 1000;
-    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
-  }
-  
-  .mobile-nav-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 4px;
-    padding: 8px 16px;
-    border: none;
-    background: transparent;
-    color: var(--text-muted);
-    text-decoration: none;
-    font-size: 0.65rem;
-    font-weight: 600;
-    border-radius: 12px;
-    transition: all 0.2s;
-    cursor: pointer;
-  }
-  
-  .mobile-nav-item:hover,
-  .mobile-nav-item.active {
-    color: var(--primary);
-    background: rgba(37, 99, 235, 0.08);
-  }
-  
-  .mobile-nav-item.active svg {
-    stroke-width: 2.5;
-  }
-  
-  /* Add padding to main content for bottom nav */
+  /* Main content padding for bottom nav */
   .dashboard,
   .comparison {
-    padding-bottom: 80px;
+    padding: var(--space-4);
+    padding-bottom: calc(80px + env(safe-area-inset-bottom));
+    min-height: auto;
   }
   
-  .data-source-toggle {
-    margin-left: 8px;
-    padding: 2px;
+  /* Page title */
+  .page-title h1 {
+    font-size: var(--text-xl);
   }
   
-  .data-source-toggle button {
-    padding: 4px 8px;
-    font-size: 0.6875rem;
+  .page-title p {
+    font-size: var(--text-sm);
+  }
+  
+  .page-title-with-actions {
+    flex-direction: row;
+    align-items: flex-start;
+    margin-bottom: var(--space-4);
+  }
+  
+  .toggle-with-label {
+    margin-top: var(--space-1);
+    gap: var(--space-1);
+  }
+  
+  .toggle-with-label .toggle-text {
+    font-size: var(--text-xs);
+  }
+  
+  .page-title-with-actions .toggle-switch button {
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--text-xs);
+    min-height: 28px;
+  }
+  
+  /* Controls - collapsible */
+  .controls {
+    padding: var(--space-4);
+    margin-bottom: var(--space-4);
+  }
+  
+  .controls-toggle {
+    display: block;
+  }
+  
+  .controls.collapsed .controls-body {
+    display: none;
+  }
+  
+  .controls-body {
+    margin-top: var(--space-3);
+  }
+  
+  .control-row {
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+  
+  .control-group {
+    width: 100%;
+    min-width: unset;
+  }
+  
+  .control-group select,
+  .control-group input[type="date"] {
+    width: 100%;
   }
   
   /* Desktop/Mobile visibility switch */
@@ -1150,665 +1611,477 @@ table tbody tr:hover {
     display: none;
   }
   
-  /* Collapsible controls (Comparison) */
-  .controls-toggle {
-    display: block;
+  /* Stats carousel improvements */
+  .stats-carousel {
+    margin-bottom: var(--space-4);
   }
   
-  .controls.collapsed .controls-body {
-    display: none;
+  .stats-carousel .stat-card {
+    padding: var(--space-4);
   }
   
-  .controls.collapsed {
-    padding: 16px;
+  .stats-carousel .stat-card h3 {
+    font-size: var(--text-xs);
   }
   
-  /* Dashboard now uses .controls - removed duplicate .filters styles */
-  
-  /* Chart header */
-  .chart-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 12px;
+  .stats-carousel .stat-value {
+    font-size: var(--text-2xl);
   }
   
-  .chart-selectors {
-    flex-wrap: wrap;
-    width: 100%;
+  .stats-carousel .stat-change {
+    font-size: var(--text-xs);
+    padding: 2px var(--space-2);
   }
   
-  .chart-metric-selector {
-    flex-wrap: wrap;
+  /* Charts carousel improvements */
+  .charts-carousel {
+    margin-bottom: var(--space-4);
   }
   
-  /* Chart selectors bar */
-  .chart-selectors-bar {
-    justify-content: center;
+  .charts-carousel .chart-card,
+  .charts-carousel .chart-section {
+    padding: var(--space-4);
+    overflow: hidden;
   }
   
-  /* Carousel - overlay arrows on mobile */
-  .carousel-arrow {
-    width: 28px;
-    height: 28px;
-    font-size: 1rem;
-    opacity: 0.8;
+  .charts-carousel .chart-card h2,
+  .charts-carousel .chart-section h2 {
+    font-size: var(--text-sm);
+    margin-bottom: var(--space-3);
+    padding-right: 100px; /* Space for corner toggle */
   }
   
-  .carousel-arrow.prev {
-    left: 4px;
+  .charts-carousel .chart-container {
+    height: 220px;
   }
   
-  .carousel-arrow.next {
-    right: 4px;
+  .charts-carousel .toggle-corner {
+    top: var(--space-3);
+    right: var(--space-3);
   }
   
+  .charts-carousel .toggle-corner .toggle-switch button {
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--text-xs);
+    min-height: 26px;
+  }
+  
+  /* Chart section header in carousel */
+  .charts-carousel .chart-section .chart-header {
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-2);
+    margin-bottom: var(--space-2);
+  }
+  
+  .charts-carousel .chart-section .chart-header h2 {
+    font-size: var(--text-sm);
+    white-space: nowrap;
+    margin: 0;
+    padding-right: 0;
+  }
+  
+  .charts-carousel .chart-section .toggle-switch button {
+    padding: var(--space-1) var(--space-2);
+    font-size: 10px;
+    min-height: 24px;
+  }
+  
+  /* Inline selectors in chart carousel */
+  .chart-selectors-inline {
+    margin-bottom: var(--space-2);
+  }
+  
+  .chart-selectors-inline .chart-metric-selector button {
+    padding: 3px 6px;
+    font-size: 10px;
+  }
+  
+  /* Carousel dots */
   .carousel-dots {
-    gap: 4px;
-    flex-wrap: wrap;
+    gap: var(--space-1);
+    margin-top: var(--space-3);
   }
   
   .carousel-dot {
-    padding: 6px 10px;
+    min-width: auto;
+    height: 28px;
+    padding: 0 var(--space-2);
   }
   
   .carousel-dot .dot-label {
-    font-size: 0.6875rem;
+    font-size: 10px;
   }
   
-  /* Control row */
-  .control-row {
+  .carousel-dots.labeled .carousel-dot {
+    padding: var(--space-1) var(--space-3);
+    min-height: 28px;
+  }
+  
+  /* Table responsive */
+  .chart-card.full-width {
+    padding: var(--space-4);
+  }
+  
+  .chart-card.full-width h2 {
+    font-size: var(--text-sm);
+  }
+  
+  .table-container {
+    margin: 0 calc(var(--space-3) * -1);
+    padding: 0 var(--space-3);
+  }
+  
+  table {
+    font-size: var(--text-xs);
+  }
+  
+  table th,
+  table td {
+    padding: var(--space-2) var(--space-2);
+  }
+  
+  table th {
+    font-size: 10px;
+  }
+  
+  /* Comparison page mobile */
+  .period-display-banner {
     flex-direction: column;
-    align-items: stretch;
+    gap: var(--space-3);
+    padding: var(--space-4);
   }
   
-  .control-group {
-    width: 100%;
-  }
-  
-  .control-group select,
-  .control-group input[type="date"] {
-    width: 100%;
+  .period-display-banner .period-box {
     min-width: unset;
   }
   
-  /* Period display */
-  .period-display {
-    flex-direction: column;
-    gap: 12px;
+  .period-display-banner .period-value {
+    font-size: var(--text-xl);
   }
   
-  /* Metric cards - keep horizontal layout on mobile */
+  .period-display {
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+  
+  /* Metric cards - horizontal layout preserved */
   .metric-card {
-    padding: 16px;
+    padding: var(--space-3);
+  }
+  
+  .metric-card h4 {
+    font-size: 10px;
+    margin-bottom: var(--space-2);
   }
   
   .metric-values {
     flex-direction: row;
-    gap: 8px;
+    gap: var(--space-2);
   }
   
   .metric-period .value {
-    font-size: 1rem;
+    font-size: var(--text-base);
+  }
+  
+  .metric-period .year,
+  .metric-period .label {
+    font-size: 10px;
   }
   
   .metric-change {
-    padding: 4px 8px;
-    min-width: 60px;
+    padding: var(--space-1);
+    min-width: 50px;
   }
   
   .metric-change .pct {
-    font-size: 0.75rem;
+    font-size: var(--text-xs);
   }
   
   .metric-change .abs {
-    font-size: 0.5625rem;
+    font-size: 10px;
+  }
+  
+  /* Chart header actions mobile */
+  .chart-header-actions {
+    gap: var(--space-1);
+  }
+  
+  .chart-header-actions .toggle-switch button,
+  .chart-header-actions .chart-metric-selector button {
+    padding: var(--space-1) var(--space-2);
+    font-size: 10px;
+    min-height: 26px;
+  }
+  
+  /* Export button mobile */
+  .btn-export-all {
+    width: 100%;
+    justify-content: center;
+    font-size: var(--text-sm);
+    padding: var(--space-3) var(--space-4);
+  }
+  
+  .chart-export-btn {
+    width: 32px;
+    height: 32px;
   }
 }
 
-@media (max-width: 640px) {
-  .dashboard, .comparison {
-    padding: 12px;
-  }
-  
-  .stats-grid,
-  .comparison-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  /* Page titles */
-  .page-title {
-    margin-bottom: 20px;
+/* ========================================
+   21. RESPONSIVE - SMALL MOBILE (max-width: 375px)
+   ======================================== */
+
+@media (max-width: 375px) {
+  .dashboard,
+  .comparison {
+    padding: var(--space-3);
+    padding-bottom: calc(80px + env(safe-area-inset-bottom));
   }
   
   .page-title h1 {
-    font-size: 1.25rem;
+    font-size: var(--text-lg);
   }
   
-  .page-title p {
-    font-size: 0.75rem;
+  .stats-carousel .stat-value {
+    font-size: var(--text-xl);
   }
   
-  /* Stat cards */
-  .stat-card {
-    padding: 16px;
-  }
-  
-  .stat-value {
-    font-size: 1.5rem;
-  }
-  
-  /* Chart section */
-  .chart-section {
-    padding: 12px;
-  }
-  
-  .chart-section h2 {
-    font-size: 0.875rem;
-    margin-bottom: 12px;
-  }
-  
-  .chart-metric-selector button {
-    padding: 5px 8px;
-    font-size: 0.625rem;
-  }
-  
-  /* Controls */
-  .controls {
-    padding: 12px;
-  }
-  
-  /* Carousel even tighter */
-  .carousel-arrow {
-    width: 24px;
-    height: 24px;
-    font-size: 0.875rem;
-  }
-  
-  .carousel-arrow.prev {
-    left: 2px;
-  }
-  
-  .carousel-arrow.next {
-    right: 2px;
-  }
-}
-
-@media (max-width: 400px) {
-  /* Very small screens */
-  .nav-bar {
-    padding: 6px 8px;
-  }
-  
-  .nav-brand {
-    font-size: 0.875rem;
-  }
-  
-  .nav-link {
-    padding: 4px 6px;
-    font-size: 0.6875rem;
-  }
-  
-  .data-source-toggle button {
-    padding: 3px 6px;
-    font-size: 0.625rem;
+  .charts-carousel .chart-container {
+    height: 200px;
   }
   
   .carousel-dot {
-    padding: 4px 6px;
+    padding: 0 var(--space-1);
+    height: 26px;
   }
   
   .carousel-dot .dot-label {
-    font-size: 0.5625rem;
+    font-size: 9px;
   }
   
-  .chart-selectors-bar {
-    gap: 4px;
-  }
-}
-
-/* ========== Slides Builder ========== */
-.slides-builder {
-  padding: 24px;
-  max-width: 1400px;
-  margin: 0 auto;
-}
-
-.slides-toolbar {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 24px;
-  flex-wrap: wrap;
-}
-
-.btn-primary, .btn-secondary {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 18px;
-  border-radius: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  border: none;
-}
-
-.btn-primary {
-  background: var(--accent);
-  color: white;
-}
-
-.btn-primary:hover {
-  background: #2563eb;
-}
-
-.btn-secondary {
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  border: 1px solid var(--border);
-}
-
-.btn-secondary:hover {
-  background: var(--bg-tertiary);
-}
-
-.slides-workspace {
-  display: grid;
-  grid-template-columns: 280px 1fr;
-  gap: 24px;
-  min-height: 600px;
-}
-
-.slides-list {
-  background: var(--bg-secondary);
-  border-radius: 12px;
-  padding: 16px;
-  border: 1px solid var(--border);
-}
-
-.slides-list h3 {
-  font-size: 14px;
-  color: var(--text-secondary);
-  margin-bottom: 16px;
-  font-weight: 500;
-}
-
-.empty-slides {
-  text-align: center;
-  padding: 40px 20px;
-  color: var(--text-secondary);
-}
-
-.empty-slides button {
-  margin-top: 16px;
-  padding: 8px 16px;
-  background: var(--accent);
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-}
-
-.slides-thumbnails {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.slide-thumbnail {
-  display: grid;
-  grid-template-columns: 32px 32px 1fr auto;
-  align-items: center;
-  gap: 8px;
-  padding: 12px;
-  background: var(--bg-primary);
-  border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  border: 2px solid transparent;
-}
-
-.slide-thumbnail:hover {
-  border-color: var(--border);
-}
-
-.slide-thumbnail.active {
-  border-color: var(--accent);
-  background: rgba(59, 130, 246, 0.05);
-}
-
-.slide-thumbnail .slide-number {
-  width: 24px;
-  height: 24px;
-  background: var(--bg-tertiary);
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-secondary);
-}
-
-.slide-thumbnail .slide-icon {
-  font-size: 18px;
-}
-
-.slide-thumbnail .slide-title-preview {
-  font-size: 13px;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.slide-thumbnail .slide-actions {
-  display: flex;
-  gap: 4px;
-  opacity: 0;
-  transition: opacity 0.15s ease;
-}
-
-.slide-thumbnail:hover .slide-actions {
-  opacity: 1;
-}
-
-.slide-actions button {
-  width: 24px;
-  height: 24px;
-  border: none;
-  background: var(--bg-tertiary);
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 12px;
-  color: var(--text-secondary);
-}
-
-.slide-actions button:hover {
-  background: var(--border);
-}
-
-.slide-actions button.delete:hover {
-  background: #fee2e2;
-  color: #dc2626;
-}
-
-/* Slide Editor */
-.slide-editor {
-  background: var(--bg-secondary);
-  border-radius: 12px;
-  padding: 24px;
-  border: 1px solid var(--border);
-}
-
-.editor-section {
-  margin-bottom: 20px;
-}
-
-.editor-section label {
-  display: block;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--text-secondary);
-  margin-bottom: 8px;
-}
-
-.editor-section input[type="text"],
-.editor-section input[type="date"],
-.editor-section select {
-  width: 100%;
-  padding: 10px 12px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  font-size: 14px;
-  background: var(--bg-primary);
-  color: var(--text-primary);
-}
-
-.editor-section input:focus,
-.editor-section select:focus {
-  outline: none;
-  border-color: var(--accent);
-}
-
-.editor-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-}
-
-.chart-type-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 8px;
-}
-
-.chart-type-btn {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  padding: 16px 12px;
-  border: 2px solid var(--border);
-  border-radius: 10px;
-  background: var(--bg-primary);
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-
-.chart-type-btn:hover {
-  border-color: var(--accent);
-}
-
-.chart-type-btn.active {
-  border-color: var(--accent);
-  background: rgba(59, 130, 246, 0.05);
-}
-
-.chart-type-btn .chart-icon {
-  font-size: 24px;
-}
-
-.chart-type-btn span:last-child {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--text-secondary);
-}
-
-.slide-preview-box {
-  margin-top: 24px;
-  padding-top: 24px;
-  border-top: 1px solid var(--border);
-}
-
-.slide-preview-box h4 {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--text-secondary);
-  margin-bottom: 16px;
-}
-
-.preview-chart {
-  background: var(--bg-primary);
-  border-radius: 8px;
-  padding: 16px;
-  height: 200px;
-}
-
-.preview-kpis {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
-}
-
-.preview-kpi {
-  background: var(--bg-primary);
-  border-radius: 8px;
-  padding: 16px;
-  text-align: center;
-}
-
-.preview-kpi .kpi-value {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--accent);
-}
-
-.preview-kpi .kpi-label {
-  font-size: 12px;
-  color: var(--text-secondary);
-  margin-top: 4px;
-}
-
-/* Preview Fullscreen */
-.preview-fullscreen {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-}
-
-.preview-slide {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 60px;
-}
-
-.preview-title {
-  color: #f8fafc;
-  font-size: 2.5rem;
-  font-weight: 600;
-  margin-bottom: 40px;
-  text-align: center;
-}
-
-.preview-content {
-  width: 100%;
-  max-width: 900px;
-}
-
-.preview-content .preview-chart {
-  height: 350px;
-  background: rgba(255, 255, 255, 0.03);
-  border-radius: 16px;
-  padding: 30px;
-}
-
-.preview-content .preview-kpis .preview-kpi {
-  background: rgba(255, 255, 255, 0.05);
-  padding: 30px;
-}
-
-.preview-content .preview-kpis .kpi-value {
-  font-size: 2.5rem;
-}
-
-.preview-content .preview-kpis .kpi-label {
-  color: #94a3b8;
-}
-
-.preview-footer {
-  color: #64748b;
-  font-size: 14px;
-  margin-top: 40px;
-}
-
-.preview-controls {
-  display: flex;
-  justify-content: center;
-  gap: 12px;
-  padding: 20px;
-  background: rgba(0, 0, 0, 0.3);
-}
-
-.preview-controls button {
-  padding: 10px 24px;
-  background: rgba(255, 255, 255, 0.1);
-  color: white;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 14px;
-}
-
-.preview-controls button:hover:not(:disabled) {
-  background: rgba(255, 255, 255, 0.2);
-}
-
-.preview-controls button:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-@media (max-width: 768px) {
-  .slides-workspace {
-    grid-template-columns: 1fr;
+  table th,
+  table td {
+    padding: var(--space-1);
+    font-size: 10px;
   }
   
-  .slides-list {
-    max-height: 200px;
-    overflow-y: auto;
+  table th {
+    font-size: 9px;
   }
   
-  .editor-row {
-    grid-template-columns: 1fr;
+  .nav-brand-text {
+    font-size: var(--text-base);
   }
   
-  .chart-type-grid {
-    grid-template-columns: repeat(4, 1fr);
+  .mobile-nav-item {
+    padding: var(--space-2) var(--space-2);
+    font-size: 9px;
   }
   
-  .preview-slide {
-    padding: 30px;
+  .mobile-nav-item svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+/* ========================================
+   22. RTL SUPPORT
+   ======================================== */
+
+[dir="rtl"] {
+  direction: rtl;
+}
+
+/* Keep header LTR - brand stays on left */
+[dir="rtl"] .nav-bar {
+  direction: ltr;
+}
+
+[dir="rtl"] .nav-links {
+  direction: rtl;
+}
+
+/* Tables */
+[dir="rtl"] table {
+  text-align: right;
+}
+
+[dir="rtl"] th,
+[dir="rtl"] td {
+  text-align: right;
+}
+
+[dir="rtl"] th:first-child,
+[dir="rtl"] td:first-child {
+  text-align: right;
+}
+
+[dir="rtl"] th:last-child,
+[dir="rtl"] td:last-child {
+  text-align: left;
+}
+
+/* Select dropdowns */
+[dir="rtl"] select {
+  text-align: right;
+  padding-right: var(--space-3);
+  padding-left: var(--space-8);
+  background-position: left var(--space-2) center;
+}
+
+/* Page titles */
+[dir="rtl"] .page-title {
+  text-align: right;
+}
+
+/* Stat cards */
+[dir="rtl"] .stat-card {
+  text-align: right;
+}
+
+/* Chart cards */
+[dir="rtl"] .chart-card h2 {
+  text-align: right;
+}
+
+/* Keep charts LTR (chart.js) */
+[dir="rtl"] canvas {
+  direction: ltr;
+}
+
+/* Period display */
+[dir="rtl"] .period-display-banner {
+  flex-direction: row-reverse;
+}
+
+/* Metric cards */
+[dir="rtl"] .metric-card {
+  text-align: right;
+}
+
+[dir="rtl"] .metric-values {
+  flex-direction: row-reverse;
+}
+
+/* Carousel */
+[dir="rtl"] .carousel-dots {
+  flex-direction: row-reverse;
+}
+
+/* Toggle switches */
+[dir="rtl"] .toggle-switch {
+  flex-direction: row-reverse;
+}
+
+/* Grids */
+[dir="rtl"] .stats-grid,
+[dir="rtl"] .charts-grid,
+[dir="rtl"] .comparison-grid {
+  direction: rtl;
+}
+
+/* Mobile nav */
+[dir="rtl"] .mobile-nav {
+  flex-direction: row-reverse;
+}
+
+/* Empty state */
+[dir="rtl"] .empty-state {
+  text-align: right;
+}
+
+/* Slides */
+[dir="rtl"] .slides-toolbar {
+  flex-direction: row-reverse;
+}
+
+/* ========================================
+   23. ANIMATIONS & MICRO-INTERACTIONS
+   ======================================== */
+
+/* Skeleton loading */
+.skeleton {
+  background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
+  background-size: 200% 100%;
+  animation: skeleton-loading 1.5s infinite;
+  border-radius: var(--radius-sm);
+}
+
+@keyframes skeleton-loading {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.skeleton-text {
+  height: 1em;
+  margin-bottom: 0.5em;
+}
+
+.skeleton-text.lg { height: 2em; width: 60%; }
+.skeleton-text.sm { height: 0.75em; width: 40%; }
+
+/* Smooth page transitions */
+.dashboard,
+.comparison {
+  animation: fadeIn 200ms ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* Card hover lift */
+@media (hover: hover) {
+  .stat-card:hover,
+  .chart-card:hover,
+  .metric-card:hover {
+    transform: translateY(-2px);
+  }
+}
+
+/* Touch feedback */
+@media (hover: none) {
+  .stat-card:active,
+  .carousel-dot:active,
+  .mobile-nav-item:active {
+    transform: scale(0.98);
+    transition: transform 50ms ease;
+  }
+}
+
+/* Button press effect */
+button:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
+/* ========================================
+   24. PRINT STYLES
+   ======================================== */
+
+@media print {
+  .nav-bar,
+  .mobile-nav,
+  .controls,
+  .carousel-dots,
+  .chart-export-btn,
+  .btn-export-all {
+    display: none !important;
   }
   
-  .preview-title {
-    font-size: 1.5rem;
+  .dashboard,
+  .comparison {
+    padding: 0;
+    max-width: none;
+  }
+  
+  .chart-card,
+  .stat-card {
+    break-inside: avoid;
+    box-shadow: none;
+    border: 1px solid #ddd;
   }
 }
-
-/* Chart Export Button */
-.exportable-chart {
-  position: relative;
-}
-
-.chart-export-btn {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 10;
-  width: 32px;
-  height: 32px;
-  border: none;
-  background: var(--bg-secondary);
-  border-radius: 6px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-secondary);
-  opacity: 0;
-  transition: opacity 0.15s ease, background 0.15s ease;
-}
-
-.exportable-chart:hover .chart-export-btn {
-  opacity: 1;
-}
-
-.chart-export-btn:hover {
-  background: var(--bg-tertiary);
-  color: var(--text-primary);
-}
-
-.chart-canvas-wrapper {
-  width: 100%;
-  height: 100%;
-}
diff --git a/src/App.js b/src/App.js
index 589550a..b58f0bb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,7 @@ import Dashboard from './components/Dashboard';
 import Comparison from './components/Comparison';
 import Slides from './components/Slides';
 import { fetchData } from './services/dataService';
+import { useLanguage } from './contexts/LanguageContext';
 import './App.css';
 
 function NavLink({ to, children }) {
@@ -17,6 +18,7 @@ function NavLink({ to, children }) {
 }
 
 function App() {
+  const { t, dir, switchLanguage } = useLanguage();
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -24,9 +26,9 @@ function App() {
   const [dataSource, setDataSource] = useState('museums');
   
   const dataSources = [
-    { id: 'museums', label: 'Museums', enabled: true },
-    { id: 'coffees', label: 'Coffees', enabled: false },
-    { id: 'ecommerce', label: 'eCommerce', enabled: false }
+    { id: 'museums', labelKey: 'dataSources.museums', enabled: true },
+    { id: 'coffees', labelKey: 'dataSources.coffees', enabled: false },
+    { id: 'ecommerce', labelKey: 'dataSources.ecommerce', enabled: false }
   ];
 
   useEffect(() => {
@@ -48,26 +50,26 @@ function App() {
 
   if (loading) {
     return (
-      <div className="loading-container">
+      <div className="loading-container" dir={dir}>
         <div className="loading-spinner"></div>
-        <p>Loading data...</p>
+        <p>{t('app.loading')}</p>
       </div>
     );
   }
 
   if (error) {
     return (
-      <div className="error-container">
-        <h2>Unable to load data</h2>
+      <div className="error-container" dir={dir}>
+        <h2>{t('app.error')}</h2>
         <p style={{maxWidth: '400px', textAlign: 'center', color: '#64748b'}}>{error}</p>
-        <button onClick={() => window.location.reload()}>Retry</button>
+        <button onClick={() => window.location.reload()}>{t('app.retry')}</button>
       </div>
     );
   }
 
   return (
     <Router>
-      <div className="app">
+      <div className="app" dir={dir}>
         <nav className="nav-bar">
           <div className="nav-content">
             <div className="nav-brand">
@@ -86,7 +88,7 @@ function App() {
                 >
                   {dataSources.map(src => (
                     <option key={src.id} value={src.id} disabled={!src.enabled}>
-                      {src.label}{!src.enabled ? ' (soon)' : ''}
+                      {t(src.labelKey)}{!src.enabled ? ` (${t('dataSources.soon')})` : ''}
                     </option>
                   ))}
                 </select>
@@ -100,7 +102,7 @@ function App() {
                   <rect x="14" y="12" width="7" height="9" rx="1"/>
                   <rect x="3" y="16" width="7" height="5" rx="1"/>
                 </svg>
-                Dashboard
+                {t('nav.dashboard')}
               </NavLink>
               <NavLink to="/comparison">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -110,33 +112,22 @@ function App() {
                   <polyline points="18 14 22 10 18 6"/>
                   <polyline points="6 10 2 14 6 18"/>
                 </svg>
-                Comparison
-              </NavLink>
-              <NavLink to="/slides">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <rect x="2" y="3" width="20" height="14" rx="2"/>
-                  <line x1="8" y1="21" x2="16" y2="21"/>
-                  <line x1="12" y1="17" x2="12" y2="21"/>
-                </svg>
-                Slides
+                {t('nav.comparison')}
               </NavLink>
               <button 
-                className={`nav-label-toggle ${showDataLabels ? 'active' : ''}`}
-                onClick={() => setShowDataLabels(!showDataLabels)}
-                title="Show values on charts"
+                className="nav-lang-toggle"
+                onClick={switchLanguage}
+                title="Switch language"
               >
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
-                </svg>
-                {showDataLabels ? 'Labels On' : 'Labels Off'}
+                {t('language.switch')}
               </button>
             </div>
           </div>
         </nav>
         
         <Routes>
-          <Route path="/" element={<Dashboard data={data} showDataLabels={showDataLabels} />} />
-          <Route path="/comparison" element={<Comparison data={data} showDataLabels={showDataLabels} />} />
+          <Route path="/" element={<Dashboard data={data} showDataLabels={showDataLabels} setShowDataLabels={setShowDataLabels} />} />
+          <Route path="/comparison" element={<Comparison data={data} showDataLabels={showDataLabels} setShowDataLabels={setShowDataLabels} />} />
           <Route path="/slides" element={<Slides data={data} />} />
         </Routes>
         
@@ -149,7 +140,7 @@ function App() {
               <rect x="14" y="12" width="7" height="9" rx="1"/>
               <rect x="3" y="16" width="7" height="5" rx="1"/>
             </svg>
-            <span>Dashboard</span>
+            <span>{t('nav.dashboard')}</span>
           </NavLink>
           <NavLink to="/comparison" className="mobile-nav-item">
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -157,24 +148,18 @@ function App() {
               <line x1="12" y1="20" x2="12" y2="4"/>
               <line x1="6" y1="20" x2="6" y2="14"/>
             </svg>
-            <span>Compare</span>
-          </NavLink>
-          <NavLink to="/slides" className="mobile-nav-item">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <rect x="2" y="3" width="20" height="14" rx="2"/>
-              <line x1="8" y1="21" x2="16" y2="21"/>
-              <line x1="12" y1="17" x2="12" y2="21"/>
-            </svg>
-            <span>Slides</span>
+            <span>{t('nav.compare')}</span>
           </NavLink>
           <button 
-            className={`mobile-nav-item ${showDataLabels ? 'active' : ''}`}
-            onClick={() => setShowDataLabels(!showDataLabels)}
+            className="mobile-nav-item"
+            onClick={switchLanguage}
           >
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
+              <circle cx="12" cy="12" r="10"/>
+              <line x1="2" y1="12" x2="22" y2="12"/>
+              <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
             </svg>
-            <span>Labels</span>
+            <span>{t('language.switch')}</span>
           </button>
         </nav>
       </div>
diff --git a/src/components/ChartExport.js b/src/components/ChartExport.js
index 29d12ad..4e984c0 100644
--- a/src/components/ChartExport.js
+++ b/src/components/ChartExport.js
@@ -1,7 +1,8 @@
 import React, { useRef } from 'react';
+import JSZip from 'jszip';
 
 // Wrapper component that adds PNG export to any chart
-export function ExportableChart({ children, filename = 'chart', className = '' }) {
+export function ExportableChart({ children, filename = 'chart', title = '', className = '', controls = null }) {
   const chartRef = useRef(null);
 
   const exportAsPNG = () => {
@@ -11,21 +12,30 @@ export function ExportableChart({ children, filename = 'chart', className = '' }
     const canvas = chartContainer.querySelector('canvas');
     if (!canvas) return;
 
-    // Create a new canvas with white background
+    // Create a new canvas with white background and title
     const exportCanvas = document.createElement('canvas');
     const ctx = exportCanvas.getContext('2d');
     
-    // Set dimensions with padding
-    const padding = 20;
+    // Set dimensions with padding and title space
+    const padding = 24;
+    const titleHeight = title ? 48 : 0;
     exportCanvas.width = canvas.width + (padding * 2);
-    exportCanvas.height = canvas.height + (padding * 2);
+    exportCanvas.height = canvas.height + (padding * 2) + titleHeight;
     
     // Fill white background
     ctx.fillStyle = '#ffffff';
     ctx.fillRect(0, 0, exportCanvas.width, exportCanvas.height);
     
+    // Draw title if provided (left-aligned, matching on-screen style)
+    if (title) {
+      ctx.fillStyle = '#1e293b';
+      ctx.font = '600 20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+      ctx.textAlign = 'left';
+      ctx.fillText(title, padding, padding + 24);
+    }
+    
     // Draw the chart
-    ctx.drawImage(canvas, padding, padding);
+    ctx.drawImage(canvas, padding, padding + titleHeight);
     
     // Export
     const link = document.createElement('a');
@@ -35,23 +45,118 @@ export function ExportableChart({ children, filename = 'chart', className = '' }
   };
 
   return (
-    <div className={`exportable-chart ${className}`}>
-      <button 
-        className="chart-export-btn" 
-        onClick={exportAsPNG}
-        title="Download as PNG"
-      >
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
-          <polyline points="7 10 12 15 17 10"/>
-          <line x1="12" y1="15" x2="12" y2="3"/>
-        </svg>
-      </button>
-      <div ref={chartRef} className="chart-canvas-wrapper">
-        {children}
+    <div className="exportable-chart-wrapper">
+      {title && (
+        <div className="chart-header-with-export">
+          <h2>{title}</h2>
+          <div className="chart-header-actions">
+            {controls}
+            <button 
+              className="chart-export-btn visible" 
+              onClick={exportAsPNG}
+              title="Download as PNG"
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                <polyline points="7 10 12 15 17 10"/>
+                <line x1="12" y1="15" x2="12" y2="3"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+      )}
+      {!title && controls && <div className="chart-controls">{controls}</div>}
+      <div className={`exportable-chart ${className}`}>
+        <div ref={chartRef} className="chart-canvas-wrapper">
+          {children}
+        </div>
       </div>
     </div>
   );
 }
 
+// Utility function to export all charts from a container as a ZIP
+export async function exportAllCharts(containerSelector, zipFilename = 'charts') {
+  const container = document.querySelector(containerSelector);
+  if (!container) return;
+
+  const zip = new JSZip();
+  const chartWrappers = container.querySelectorAll('.exportable-chart-wrapper');
+  
+  for (let i = 0; i < chartWrappers.length; i++) {
+    const wrapper = chartWrappers[i];
+    const canvas = wrapper.querySelector('canvas');
+    const titleEl = wrapper.querySelector('.chart-header-with-export h2');
+    const title = titleEl?.textContent || `chart-${i + 1}`;
+    
+    if (!canvas) continue;
+
+    // Create export canvas with white background and title
+    const exportCanvas = document.createElement('canvas');
+    const ctx = exportCanvas.getContext('2d');
+    
+    const padding = 32;
+    const titleHeight = 56;
+    exportCanvas.width = canvas.width + (padding * 2);
+    exportCanvas.height = canvas.height + (padding * 2) + titleHeight;
+    
+    // White background
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(0, 0, exportCanvas.width, exportCanvas.height);
+    
+    // Draw title
+    ctx.fillStyle = '#1e293b';
+    ctx.font = '600 24px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+    ctx.textAlign = 'left';
+    ctx.fillText(title, padding, padding + 28);
+    
+    // Draw chart
+    ctx.drawImage(canvas, padding, padding + titleHeight);
+    
+    // Convert to blob and add to zip
+    const dataUrl = exportCanvas.toDataURL('image/png', 1.0);
+    const base64Data = dataUrl.split(',')[1];
+    const safeFilename = title.replace(/[^a-zA-Z0-9\u0600-\u06FF\s-]/g, '').replace(/\s+/g, '-');
+    zip.file(`${String(i + 1).padStart(2, '0')}-${safeFilename}.png`, base64Data, { base64: true });
+  }
+
+  // Generate and download ZIP
+  const blob = await zip.generateAsync({ type: 'blob' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = `${zipFilename}-${new Date().toISOString().split('T')[0]}.zip`;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+// Button component for exporting all charts
+export function ExportAllButton({ containerSelector, zipFilename, label, loadingLabel }) {
+  const [exporting, setExporting] = React.useState(false);
+
+  const handleExport = async () => {
+    setExporting(true);
+    try {
+      await exportAllCharts(containerSelector, zipFilename);
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  return (
+    <button 
+      className="btn-export-all" 
+      onClick={handleExport}
+      disabled={exporting}
+    >
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+        <polyline points="7 10 12 15 17 10"/>
+        <line x1="12" y1="15" x2="12" y2="3"/>
+      </svg>
+      {exporting ? loadingLabel : label}
+    </button>
+  );
+}
+
 export default ExportableChart;
diff --git a/src/components/Comparison.js b/src/components/Comparison.js
index 0018fba..eea6a24 100644
--- a/src/components/Comparison.js
+++ b/src/components/Comparison.js
@@ -4,6 +4,7 @@ import { Line, Bar } from 'react-chartjs-2';
 import { EmptyState, FilterControls } from './shared';
 import { ExportableChart } from './ChartExport';
 import { chartColors, createBaseOptions } from '../config/chartConfig';
+import { useLanguage } from '../contexts/LanguageContext';
 import {
   filterDataByDateRange,
   calculateMetrics,
@@ -39,7 +40,8 @@ const generatePresetDates = (year) => ({
   'full': { start: `${year}-01-01`, end: `${year}-12-31` }
 });
 
-function Comparison({ data, showDataLabels }) {
+function Comparison({ data, showDataLabels, setShowDataLabels }) {
+  const { t } = useLanguage();
   const [searchParams, setSearchParams] = useSearchParams();
   
   // Get available years from data
@@ -140,8 +142,8 @@ function Comparison({ data, showDataLabels }) {
   };
   
   const charts = [
-    { id: 'timeseries', label: 'Trend' },
-    { id: 'museum', label: 'By Museum' }
+    { id: 'timeseries', label: t('comparison.trend') },
+    { id: 'museum', label: t('comparison.byMuseum') }
   ];
 
   // Touch swipe handlers
@@ -165,15 +167,16 @@ function Comparison({ data, showDataLabels }) {
   };
 
   const granularityOptions = [
-    { value: 'day', label: 'Daily' },
-    { value: 'week', label: 'Weekly' }
+    { value: 'day', label: t('time.daily') },
+    { value: 'week', label: t('time.weekly') },
+    { value: 'month', label: t('time.monthly') }
   ];
 
   const metricOptions = [
-    { value: 'revenue', label: 'Revenue', field: 'revenue_incl_tax', format: 'currency' },
-    { value: 'visitors', label: 'Visitors', field: 'visits', format: 'number' },
-    { value: 'tickets', label: 'Tickets', field: 'tickets', format: 'number' },
-    { value: 'avgRevenue', label: 'Avg Rev/Visitor', field: null, format: 'currency' }
+    { value: 'revenue', label: t('metrics.revenue'), field: 'revenue_incl_tax', format: 'currency' },
+    { value: 'visitors', label: t('metrics.visitors'), field: 'visits', format: 'number' },
+    { value: 'tickets', label: t('metrics.tickets'), field: 'tickets', format: 'number' },
+    { value: 'avgRevenue', label: t('metrics.avgRevenue'), field: null, format: 'currency' }
   ];
 
   const getMetricValue = useCallback((rows, metric) => {
@@ -271,19 +274,19 @@ function Comparison({ data, showDataLabels }) {
     const captureRateChange = captureRates ? calcChange(captureRates.prev || 0, captureRates.curr || 0) : null;
 
     const cards = [
-      { title: 'Revenue', prev: prevMetrics.revenue, curr: currMetrics.revenue, change: revenueChange, isCurrency: true },
-      { title: 'Visitors', prev: prevMetrics.visitors, curr: currMetrics.visitors, change: visitorsChange },
-      { title: 'Tickets', prev: prevMetrics.tickets, curr: currMetrics.tickets, change: ticketsChange },
-      { title: 'Avg Rev/Visitor', prev: prevMetrics.avgRevPerVisitor, curr: currMetrics.avgRevPerVisitor, change: avgRevChange, isCurrency: true }
+      { title: t('metrics.revenue'), prev: prevMetrics.revenue, curr: currMetrics.revenue, change: revenueChange, isCurrency: true },
+      { title: t('metrics.visitors'), prev: prevMetrics.visitors, curr: currMetrics.visitors, change: visitorsChange },
+      { title: t('metrics.tickets'), prev: prevMetrics.tickets, curr: currMetrics.tickets, change: ticketsChange },
+      { title: t('metrics.avgRevenue'), prev: prevMetrics.avgRevPerVisitor, curr: currMetrics.avgRevPerVisitor, change: avgRevChange, isCurrency: true }
     ];
     if (pilgrimCounts) {
-      cards.push({ title: 'Pilgrims', prev: pilgrimCounts.prev, curr: pilgrimCounts.curr, change: pilgrimsChange, pendingMessage: 'Data not published yet' });
+      cards.push({ title: t('metrics.pilgrims'), prev: pilgrimCounts.prev, curr: pilgrimCounts.curr, change: pilgrimsChange, pendingMessage: t('comparison.pendingData') });
     }
     if (captureRates) {
-      cards.push({ title: 'Capture Rate', prev: captureRates.prev, curr: captureRates.curr, change: captureRateChange, isPercent: true, pendingMessage: 'Data not published yet' });
+      cards.push({ title: t('metrics.captureRate'), prev: captureRates.prev, curr: captureRates.curr, change: captureRateChange, isPercent: true, pendingMessage: t('comparison.pendingData') });
     }
     return cards;
-  }, [prevMetrics, currMetrics, pilgrimCounts, captureRates]);
+  }, [prevMetrics, currMetrics, pilgrimCounts, captureRates, t]);
 
   const handleCardTouchStart = (e) => {
     touchStartCard.current = e.touches[0].clientX;
@@ -338,7 +341,11 @@ function Comparison({ data, showDataLabels }) {
         const daysDiff = Math.floor((rowDate - start) / (1000 * 60 * 60 * 24));
         
         let key;
-        if (granularity === 'week') {
+        if (granularity === 'month') {
+          // Group by month number (relative to start)
+          const monthsDiff = (rowDate.getFullYear() - start.getFullYear()) * 12 + (rowDate.getMonth() - start.getMonth());
+          key = monthsDiff + 1;
+        } else if (granularity === 'week') {
           key = Math.floor(daysDiff / 7) + 1;
         } else {
           key = daysDiff + 1; // day number from start
@@ -359,9 +366,15 @@ function Comparison({ data, showDataLabels }) {
     const currGrouped = groupByPeriod(currData, ranges.curr.start, chartMetric, chartGranularity);
     const maxKey = Math.max(...Object.keys(prevGrouped).map(Number), ...Object.keys(currGrouped).map(Number), 1);
     
-    const labels = Array.from({ length: maxKey }, (_, i) => 
-      chartGranularity === 'week' ? `W${i + 1}` : `D${i + 1}`
-    );
+    const labels = Array.from({ length: maxKey }, (_, i) => {
+      if (chartGranularity === 'month') {
+        const startDate = new Date(ranges.curr.start);
+        const monthNum = ((startDate.getMonth() + i) % 12) + 1;
+        return String(monthNum);
+      }
+      if (chartGranularity === 'week') return `W${i + 1}`;
+      return `D${i + 1}`;
+    });
 
     const prevLabel = getPeriodLabel(ranges.prev.start, ranges.prev.end);
     const currLabel = getPeriodLabel(ranges.curr.start, ranges.curr.end);
@@ -423,45 +436,54 @@ function Comparison({ data, showDataLabels }) {
     ...baseOptions,
     plugins: {
       ...baseOptions.plugins,
-      legend: { position: 'top', align: 'end', labels: { boxWidth: 12, padding: 12, font: { size: 11 } } }
+      legend: { position: 'top', align: 'end', labels: { boxWidth: 12, padding: 12, font: { size: 13 } } }
     }
   };
 
   return (
-    <div className="comparison">
-      <div className="page-title">
-        <h1>Period Comparison</h1>
-        <p>Select a period and year — automatically compares with the same period in the previous year</p>
+    <div className="comparison" id="comparison-container">
+      <div className="page-title-with-actions">
+        <div className="page-title">
+          <h1>{t('comparison.title')}</h1>
+          <p>{t('comparison.subtitle')}</p>
+        </div>
+        <div className="toggle-with-label">
+          <span className="toggle-text">{t('nav.labels')}</span>
+          <div className="toggle-switch">
+            <button className={!showDataLabels ? 'active' : ''} onClick={() => setShowDataLabels(false)}>{t('toggle.off')}</button>
+            <button className={showDataLabels ? 'active' : ''} onClick={() => setShowDataLabels(true)}>{t('toggle.on')}</button>
+          </div>
+        </div>
       </div>
 
-      <FilterControls title="Select Period" onReset={resetFilters}>
+      <FilterControls title={t('comparison.selectPeriod')} onReset={resetFilters}>
         <FilterControls.Row>
-          <FilterControls.Group label="Period">
+          <FilterControls.Group label={t('comparison.period')}>
             <select value={preset} onChange={e => setPreset(e.target.value)}>
-              <option value="custom">Custom</option>
-              <option value="jan">January</option>
-              <option value="feb">February</option>
-              <option value="mar">March</option>
-              <option value="apr">April</option>
-              <option value="may">May</option>
-              <option value="jun">June</option>
-              <option value="jul">July</option>
-              <option value="aug">August</option>
-              <option value="sep">September</option>
-              <option value="oct">October</option>
-              <option value="nov">November</option>
-              <option value="dec">December</option>
-              <option value="q1">Q1</option>
-              <option value="q2">Q2</option>
-              <option value="q3">Q3</option>
-              <option value="q4">Q4</option>
-              <option value="h1">H1</option>
-              <option value="h2">H2</option>
-              <option value="full">Full Year</option>
+              <option value="custom">{t('comparison.custom')}</option>
+              <option value="jan">{t('months.january')}</option>
+              <option value="feb">{t('months.february')}</option>
+              <option value="mar">{t('months.march')}</option>
+              <option value="apr">{t('months.april')}</option>
+              <option value="may">{t('months.may')}</option>
+              <option value="jun">{t('months.june')}</option>
+              <option value="jul">{t('months.july')}</option>
+              <option value="aug">{t('months.august')}</option>
+              <option value="sep">{t('months.september')}</option>
+              <option value="oct">{t('months.october')}</option>
+              <option value="nov">{t('months.november')}</option>
+              <option value="dec">{t('months.december')}</option>
+              <option value="q1">{t('time.q1')}</option>
+              <option value="q2">{t('time.q2')}</option>
+              <option value="q3">{t('time.q3')}</option>
+              <option value="q4">{t('time.q4')}</option>
+              <option value="h1">{t('time.h1')}</option>
+              <option value="h2">{t('time.h2')}</option>
+              <option value="full">{t('time.fullYear')}</option>
             </select>
           </FilterControls.Group>
           {preset !== 'custom' && (
-            <FilterControls.Group label="Year">
+            <FilterControls.Group label={t('filters.year')}>
               <select value={selectedYear} onChange={e => setSelectedYear(parseInt(e.target.value))}>
                 {availableYears.map(y => (
                   <option key={y} value={y}>{y}</option>
@@ -471,51 +493,55 @@ function Comparison({ data, showDataLabels }) {
           )}
           {preset === 'custom' && (
             <>
-              <FilterControls.Group label="From">
+              <FilterControls.Group label={t('comparison.from')}>
                 <input type="date" value={startDate} onChange={e => setStartDate(e.target.value)} />
               </FilterControls.Group>
-              <FilterControls.Group label="To">
+              <FilterControls.Group label={t('comparison.to')}>
                 <input type="date" value={endDate} onChange={e => setEndDate(e.target.value)} />
               </FilterControls.Group>
             </>
           )}
-          <FilterControls.Group label="District">
+          <FilterControls.Group label={t('filters.district')}>
             <select value={filters.district} onChange={e => setFilters({...filters, district: e.target.value, museum: 'all'})}>
-              <option value="all">All Districts</option>
+              <option value="all">{t('filters.allDistricts')}</option>
               {districts.map(d => <option key={d} value={d}>{d}</option>)}
             </select>
           </FilterControls.Group>
-          <FilterControls.Group label="Museum">
+          <FilterControls.Group label={t('filters.museum')}>
             <select value={filters.museum} onChange={e => setFilters({...filters, museum: e.target.value})}>
-              <option value="all">All Museums</option>
+              <option value="all">{t('filters.allMuseums')}</option>
               {availableMuseums.map(m => <option key={m} value={m}>{m}</option>)}
             </select>
           </FilterControls.Group>
         </FilterControls.Row>
-        <div className="period-display">
-          <div className="period-box">
-            <div className="label">{getPeriodLabel(ranges.prev.start, ranges.prev.end)}</div>
-            <div className="dates">{formatDate(ranges.prev.start)} → {formatDate(ranges.prev.end)}</div>
-          </div>
-          <div className="period-box">
-            <div className="label">{getPeriodLabel(ranges.curr.start, ranges.curr.end)}</div>
-            <div className="dates">{formatDate(ranges.curr.start)} → {formatDate(ranges.curr.end)}</div>
-          </div>
-        </div>
       </FilterControls>
 
+      <div className="period-display-banner" id="comparison-period">
+        <div className="period-box prev">
+          <div className="period-label">{t('comparison.previousPeriod')}</div>
+          <div className="period-value">{getPeriodLabel(ranges.prev.start, ranges.prev.end)}</div>
+          <div className="period-dates">{formatDate(ranges.prev.start)} → {formatDate(ranges.prev.end)}</div>
+        </div>
+        <div className="period-vs">{t('comparison.vs')}</div>
+        <div className="period-box curr">
+          <div className="period-label">{t('comparison.currentPeriod')}</div>
+          <div className="period-value">{getPeriodLabel(ranges.curr.start, ranges.curr.end)}</div>
+          <div className="period-dates">{formatDate(ranges.curr.start)} → {formatDate(ranges.curr.end)}</div>
+        </div>
+      </div>
+
       {!hasData ? (
         <EmptyState 
           icon="📈"
-          title="No data for this period"
-          message="No records found for the selected date range and filters."
+          title={t('comparison.noData')}
+          message={t('comparison.noDataMessage')}
           action={resetFilters}
-          actionLabel="Reset Filters"
+          actionLabel={t('filters.reset')}
         />
       ) : (
       <>
       {/* Desktop: Grid layout */}
-      <div className="comparison-grid desktop-only">
+      <div className="comparison-grid desktop-only" id="comparison-metrics">
         {metricCards.map((card, i) => (
           <MetricCard 
             key={i}
@@ -575,43 +601,48 @@ function Comparison({ data, showDataLabels }) {
       </div>
 
       {/* Desktop: Show both charts */}
-      <div className="charts-grid desktop-only">
+      <div className="charts-grid desktop-only" id="comparison-charts">
         <div className="chart-section">
-          <div className="chart-header">
-            <h2>{metricOptions.find(m => m.value === chartMetric)?.label} Trend</h2>
-            <div className="chart-selectors">
-              <div className="toggle-switch">
-                {granularityOptions.map(opt => (
-                  <button
-                    key={opt.value}
-                    className={chartGranularity === opt.value ? 'active' : ''}
-                    onClick={() => setChartGranularity(opt.value)}
-                  >
-                    {opt.label}
-                  </button>
-                ))}
-              </div>
-              <div className="chart-metric-selector">
-                {metricOptions.map(opt => (
-                  <button
-                    key={opt.value}
-                    className={chartMetric === opt.value ? 'active' : ''}
-                    onClick={() => setChartMetric(opt.value)}
-                  >
-                    {opt.label}
-                  </button>
-                ))}
-              </div>
-            </div>
-          </div>
-          <ExportableChart filename="trend-comparison" className="chart-container">
+          <ExportableChart 
+            filename="trend-comparison" 
+            title={`${metricOptions.find(m => m.value === chartMetric)?.label} - ${t('comparison.trend')}`} 
+            className="chart-container"
+            controls={
+              <>
+                <div className="toggle-switch">
+                  {granularityOptions.map(opt => (
+                    <button
+                      key={opt.value}
+                      className={chartGranularity === opt.value ? 'active' : ''}
+                      onClick={() => setChartGranularity(opt.value)}
+                    >
+                      {opt.label}
+                    </button>
+                  ))}
+                </div>
+                <div className="chart-metric-selector">
+                  {metricOptions.map(opt => (
+                    <button
+                      key={opt.value}
+                      className={chartMetric === opt.value ? 'active' : ''}
+                      onClick={() => setChartMetric(opt.value)}
+                    >
+                      {opt.label}
+                    </button>
+                  ))}
+                </div>
+              </>
+            }
+          >
             <Line data={timeSeriesChart} options={chartOptions} />
           </ExportableChart>
         </div>
         <div className="chart-section">
-          <div className="chart-header">
-            <h2>{metricOptions.find(m => m.value === chartMetric)?.label} by Museum</h2>
-            <div className="chart-selectors">
+          <ExportableChart 
+            filename="museum-comparison" 
+            title={`${metricOptions.find(m => m.value === chartMetric)?.label} - ${t('comparison.byMuseum')}`} 
+            className="chart-container"
+            controls={
               <div className="chart-metric-selector">
                 {metricOptions.map(opt => (
                   <button
@@ -623,9 +654,8 @@ function Comparison({ data, showDataLabels }) {
                   </button>
                 ))}
               </div>
-            </div>
-          </div>
-          <ExportableChart filename="museum-comparison" className="chart-container">
+            }
+          >
             <Bar data={museumChart} options={chartOptions} />
           </ExportableChart>
         </div>
@@ -644,7 +674,7 @@ function Comparison({ data, showDataLabels }) {
               <div className="carousel-slide">
                 <div className="chart-section">
                   <div className="chart-header">
-                    <h2>{metricOptions.find(m => m.value === chartMetric)?.label} Trend</h2>
+                    <h2>{metricOptions.find(m => m.value === chartMetric)?.label} - {t('comparison.trend')}</h2>
                     <div className="toggle-switch">
                       {granularityOptions.map(opt => (
                         <button
@@ -678,7 +708,7 @@ function Comparison({ data, showDataLabels }) {
               <div className="carousel-slide">
                 <div className="chart-section">
                   <div className="chart-header">
-                    <h2>{metricOptions.find(m => m.value === chartMetric)?.label} by Museum</h2>
+                    <h2>{metricOptions.find(m => m.value === chartMetric)?.label} - {t('comparison.byMuseum')}</h2>
                   </div>
                   <div className="chart-selectors-inline">
                     <div className="chart-metric-selector">
diff --git a/src/components/Dashboard.js b/src/components/Dashboard.js
index cf25e67..85d2db7 100644
--- a/src/components/Dashboard.js
+++ b/src/components/Dashboard.js
@@ -4,6 +4,7 @@ import { Line, Doughnut, Bar } from 'react-chartjs-2';
 import { Carousel, EmptyState, FilterControls, StatCard } from './shared';
 import { ExportableChart } from './ChartExport';
 import { chartColors, createBaseOptions } from '../config/chartConfig';
+import { useLanguage } from '../contexts/LanguageContext';
 import {
   filterData,
   calculateMetrics,
@@ -28,7 +29,8 @@ const defaultFilters = {
 
 const filterKeys = ['year', 'district', 'museum', 'quarter'];
 
-function Dashboard({ data, showDataLabels }) {
+function Dashboard({ data, showDataLabels, setShowDataLabels }) {
+  const { t } = useLanguage();
   const [searchParams, setSearchParams] = useSearchParams();
   
   // Initialize filters from URL or defaults
@@ -67,17 +69,17 @@ function Dashboard({ data, showDataLabels }) {
 
   // Stat cards for carousel
   const statCards = useMemo(() => [
-    { title: 'Total Revenue', value: formatCurrency(metrics.revenue), hasYoy: true },
-    { title: 'Total Visitors', value: formatNumber(metrics.visitors) },
-    { title: 'Total Tickets', value: formatNumber(metrics.tickets) },
-    { title: 'Avg Rev/Visitor', value: formatCurrency(metrics.avgRevPerVisitor) }
-  ], [metrics]);
+    { title: t('metrics.totalRevenue'), value: formatCurrency(metrics.revenue), hasYoy: true },
+    { title: t('metrics.totalVisitors'), value: formatNumber(metrics.visitors) },
+    { title: t('metrics.totalTickets'), value: formatNumber(metrics.tickets) },
+    { title: t('metrics.avgRevenue'), value: formatCurrency(metrics.avgRevPerVisitor) }
+  ], [metrics, t]);
 
   // Chart carousel labels
   const chartLabels = useMemo(() => {
-    const labels = ['Revenue Trend', 'Visitors', 'Revenue', 'Quarterly', 'District', 'Capture Rate'];
+    const labels = [t('charts.revenueTrend'), t('charts.visitors'), t('charts.revenue'), t('charts.quarterly'), t('charts.district'), t('charts.captureRate')];
     return filters.museum === 'all' ? labels : labels.filter((_, i) => i !== 1 && i !== 2);
-  }, [filters.museum]);
+  }, [filters.museum, t]);
 
   // Dynamic lists from data
   const years = useMemo(() => getUniqueYears(data), [data]);
@@ -248,7 +250,7 @@ function Dashboard({ data, showDataLabels }) {
             color: '#1e293b',
             backgroundColor: 'rgba(255, 255, 255, 0.9)',
             borderRadius: 3,
-            font: { size: 9, weight: 600 },
+            font: { size: 10, weight: 600 },
             anchor: 'end',
             align: 'top',
             offset: 6
@@ -274,7 +276,7 @@ function Dashboard({ data, showDataLabels }) {
             color: '#1e293b',
             backgroundColor: 'rgba(255, 255, 255, 0.9)',
             borderRadius: 3,
-            font: { size: 9, weight: 600 },
+            font: { size: 10, weight: 600 },
             anchor: 'start',
             align: 'bottom',
             offset: 6
@@ -314,50 +316,59 @@ function Dashboard({ data, showDataLabels }) {
   const baseOptions = useMemo(() => createBaseOptions(showDataLabels), [showDataLabels]);
 
   return (
-    <div className="dashboard">
-      <div className="page-title">
-        <h1>Dashboard</h1>
-        <p>Real-time museum analytics from Google Sheets</p>
+    <div className="dashboard" id="dashboard-container">
+      <div className="page-title-with-actions">
+        <div className="page-title">
+          <h1>{t('dashboard.title')}</h1>
+          <p>{t('dashboard.subtitle')}</p>
+        </div>
+        <div className="toggle-with-label">
+          <span className="toggle-text">{t('nav.labels')}</span>
+          <div className="toggle-switch">
+            <button className={!showDataLabels ? 'active' : ''} onClick={() => setShowDataLabels(false)}>{t('toggle.off')}</button>
+            <button className={showDataLabels ? 'active' : ''} onClick={() => setShowDataLabels(true)}>{t('toggle.on')}</button>
+          </div>
+        </div>
       </div>
 
-      <FilterControls title="Filters" onReset={resetFilters}>
+      <FilterControls title={t('filters.title')} onReset={resetFilters}>
         <FilterControls.Row>
-          <FilterControls.Group label="Year">
+          <FilterControls.Group label={t('filters.year')}>
             <select value={filters.year} onChange={e => setFilters({...filters, year: e.target.value})}>
-              <option value="all">All Years</option>
+              <option value="all">{t('filters.allYears')}</option>
               {years.map(y => <option key={y} value={y}>{y}</option>)}
             </select>
           </FilterControls.Group>
-          <FilterControls.Group label="District">
+          <FilterControls.Group label={t('filters.district')}>
             <select value={filters.district} onChange={e => setFilters({...filters, district: e.target.value, museum: 'all'})}>
-              <option value="all">All Districts</option>
+              <option value="all">{t('filters.allDistricts')}</option>
               {districts.map(d => <option key={d} value={d}>{d}</option>)}
             </select>
           </FilterControls.Group>
-          <FilterControls.Group label="Museum">
+          <FilterControls.Group label={t('filters.museum')}>
             <select value={filters.museum} onChange={e => setFilters({...filters, museum: e.target.value})}>
-              <option value="all">All Museums</option>
+              <option value="all">{t('filters.allMuseums')}</option>
               {availableMuseums.map(m => <option key={m} value={m}>{m}</option>)}
             </select>
           </FilterControls.Group>
-          <FilterControls.Group label="Quarter">
+          <FilterControls.Group label={t('filters.quarter')}>
             <select value={filters.quarter} onChange={e => setFilters({...filters, quarter: e.target.value})}>
-              <option value="all">All Quarters</option>
-              <option value="1">Q1</option>
-              <option value="2">Q2</option>
-              <option value="3">Q3</option>
-              <option value="4">Q4</option>
+              <option value="all">{t('filters.allQuarters')}</option>
+              <option value="1">{t('time.q1')}</option>
+              <option value="2">{t('time.q2')}</option>
+              <option value="3">{t('time.q3')}</option>
+              <option value="4">{t('time.q4')}</option>
             </select>
           </FilterControls.Group>
         </FilterControls.Row>
       </FilterControls>
 
       {/* Desktop: Grid */}
-      <div className="stats-grid desktop-only">
-        <StatCard title="Total Revenue" value={formatCurrency(metrics.revenue)} change={yoyChange} />
-        <StatCard title="Total Visitors" value={formatNumber(metrics.visitors)} />
-        <StatCard title="Total Tickets" value={formatNumber(metrics.tickets)} />
-        <StatCard title="Avg Revenue/Visitor" value={formatCurrency(metrics.avgRevPerVisitor)} />
+      <div className="stats-grid desktop-only" id="dashboard-stats">
+        <StatCard title={t('metrics.totalRevenue')} value={formatCurrency(metrics.revenue)} change={yoyChange} />
+        <StatCard title={t('metrics.totalVisitors')} value={formatNumber(metrics.visitors)} />
+        <StatCard title={t('metrics.totalTickets')} value={formatNumber(metrics.tickets)} />
+        <StatCard title={t('metrics.avgRevenuePerVisitor')} value={formatCurrency(metrics.avgRevPerVisitor)} />
       </div>
 
       {/* Mobile: Stats Carousel */}
@@ -381,28 +392,28 @@ function Dashboard({ data, showDataLabels }) {
       {!hasData ? (
         <EmptyState 
           icon="📊"
-          title="No data found"
-          message="No records match your current filters. Try adjusting your selection."
+          title={t('dashboard.noData')}
+          message={t('dashboard.noDataMessage')}
           action={resetFilters}
-          actionLabel="Reset Filters"
+          actionLabel={t('filters.reset')}
         />
       ) : (
       <>
-      <div className="chart-card full-width" style={{marginBottom: '16px'}}>
-        <h2>Quarterly Comparison: 2024 vs 2025</h2>
+      <div className="chart-card full-width" style={{marginBottom: '16px'}} id="quarterly-table">
+        <h2>{t('dashboard.quarterlyComparison')}</h2>
         <div className="table-container">
           <table>
             <thead>
               <tr>
-                <th>Quarter</th>
-                <th>Rev 2024</th>
-                <th>Rev 2025</th>
-                <th>Change</th>
-                <th>Visitors 2024</th>
-                <th>Visitors 2025</th>
-                <th>Change</th>
-                <th>Capture 2024</th>
-                <th>Capture 2025</th>
+                <th>{t('table.quarter')}</th>
+                <th>{t('table.rev2024')}</th>
+                <th>{t('table.rev2025')}</th>
+                <th>{t('table.change')}</th>
+                <th>{t('table.visitors2024')}</th>
+                <th>{t('table.visitors2025')}</th>
+                <th>{t('table.change')}</th>
+                <th>{t('table.capture2024')}</th>
+                <th>{t('table.capture2025')}</th>
               </tr>
             </thead>
             <tbody>
@@ -429,58 +440,58 @@ function Dashboard({ data, showDataLabels }) {
       </div>
 
       {/* Desktop: Charts Grid */}
-      <div className="charts-grid desktop-only">
+      <div className="charts-grid desktop-only" id="dashboard-charts">
         <div className="chart-card full-width">
-          <h2>Revenue Trends</h2>
-          <div className="toggle-switch toggle-corner">
-            <button className={trendGranularity === 'day' ? 'active' : ''} onClick={() => setTrendGranularity('day')}>Daily</button>
-            <button className={trendGranularity === 'week' ? 'active' : ''} onClick={() => setTrendGranularity('week')}>Weekly</button>
-          </div>
-          <ExportableChart filename="revenue-trend" className="chart-container">
+          <ExportableChart 
+            filename="revenue-trend" 
+            title={t('dashboard.revenueTrends')} 
+            className="chart-container"
+            controls={
+              <div className="toggle-switch">
+                <button className={trendGranularity === 'day' ? 'active' : ''} onClick={() => setTrendGranularity('day')}>{t('time.daily')}</button>
+                <button className={trendGranularity === 'week' ? 'active' : ''} onClick={() => setTrendGranularity('week')}>{t('time.weekly')}</button>
+              </div>
+            }
+          >
             <Line data={trendData} options={{...baseOptions, scales: {...baseOptions.scales, x: {...baseOptions.scales.x, ticks: {...baseOptions.scales.x.ticks, maxTicksLimit: trendGranularity === 'week' ? 15 : 20}}}}} />
           </ExportableChart>
         </div>
 
         {filters.museum === 'all' && (
           <div className="chart-card half-width">
-            <h2>Visitors by Museum</h2>
-            <ExportableChart filename="visitors-by-museum" className="chart-container">
-              <Doughnut data={museumData.visitors} options={{...baseOptions, plugins: {...baseOptions.plugins, legend: {display: true, position: 'bottom', labels: {boxWidth: 12, padding: 16, font: {size: 11}}}}}} />
+            <ExportableChart filename="visitors-by-museum" title={t('dashboard.visitorsByMuseum')} className="chart-container">
+              <Doughnut data={museumData.visitors} options={{...baseOptions, plugins: {...baseOptions.plugins, legend: {display: true, position: 'bottom', labels: {boxWidth: 12, padding: 16, font: {size: 13}}}}}} />
             </ExportableChart>
           </div>
         )}
 
         {filters.museum === 'all' && (
           <div className="chart-card half-width">
-            <h2>Revenue by Museum</h2>
-            <ExportableChart filename="revenue-by-museum" className="chart-container">
+            <ExportableChart filename="revenue-by-museum" title={t('dashboard.revenueByMuseum')} className="chart-container">
               <Bar data={museumData.revenue} options={baseOptions} />
             </ExportableChart>
           </div>
         )}
 
         <div className="chart-card half-width">
-          <h2>Quarterly Revenue (YoY)</h2>
-          <ExportableChart filename="quarterly-yoy" className="chart-container">
-            <Bar data={quarterlyYoYData} options={{...baseOptions, plugins: {...baseOptions.plugins, legend: {display: true, position: 'top', align: 'end', labels: {boxWidth: 12, padding: 12, font: {size: 11}}}}}} />
+          <ExportableChart filename="quarterly-yoy" title={t('dashboard.quarterlyRevenue')} className="chart-container">
+            <Bar data={quarterlyYoYData} options={{...baseOptions, plugins: {...baseOptions.plugins, legend: {display: true, position: 'top', align: 'end', labels: {boxWidth: 12, padding: 12, font: {size: 13}}}}}} />
           </ExportableChart>
         </div>
 
         <div className="chart-card half-width">
-          <h2>District Performance</h2>
-          <ExportableChart filename="district-performance" className="chart-container">
+          <ExportableChart filename="district-performance" title={t('dashboard.districtPerformance')} className="chart-container">
             <Bar data={districtData} options={{...baseOptions, indexAxis: 'y'}} />
           </ExportableChart>
         </div>
 
         <div className="chart-card full-width">
-          <h2>Capture Rate vs Umrah Pilgrims</h2>
-          <ExportableChart filename="capture-rate" className="chart-container">
+          <ExportableChart filename="capture-rate" title={t('dashboard.captureRateChart')} className="chart-container">
             <Line data={captureRateData} options={{
               ...baseOptions,
               plugins: {
                 ...baseOptions.plugins,
-                legend: { display: true, position: 'top', align: 'end', labels: { boxWidth: 12, padding: 12, font: { size: 11 } } },
+                legend: { display: true, position: 'top', align: 'end', labels: { boxWidth: 12, padding: 12, font: { size: 13 } } },
                 tooltip: {
                   ...baseOptions.plugins.tooltip,
                   callbacks: {
@@ -499,17 +510,17 @@ function Dashboard({ data, showDataLabels }) {
                   type: 'linear',
                   position: 'left',
                   grid: { color: chartColors.grid },
-                  ticks: { font: { size: 10 }, color: '#94a3b8', callback: (v) => v.toFixed(1) + '%' },
+                  ticks: { font: { size: 12 }, color: '#94a3b8', callback: (v) => v.toFixed(1) + '%' },
                   border: { display: false },
-                  title: { display: true, text: 'Capture Rate (%)', font: { size: 10 }, color: chartColors.secondary }
+                  title: { display: true, text: 'Capture Rate (%)', font: { size: 12 }, color: chartColors.secondary }
                 },
                 y1: {
                   type: 'linear',
                   position: 'right',
                   grid: { drawOnChartArea: false },
-                  ticks: { font: { size: 10 }, color: '#94a3b8', callback: (v) => (v / 1000000).toFixed(0) + 'M' },
+                  ticks: { font: { size: 12 }, color: '#94a3b8', callback: (v) => (v / 1000000).toFixed(0) + 'M' },
                   border: { display: false },
-                  title: { display: true, text: 'Pilgrims', font: { size: 10 }, color: chartColors.tertiary }
+                  title: { display: true, text: 'Pilgrims', font: { size: 12 }, color: chartColors.tertiary }
                 }
               }
             }} />
@@ -527,10 +538,10 @@ function Dashboard({ data, showDataLabels }) {
             >
               <div className="carousel-slide">
                 <div className="chart-card">
-                  <h2>Revenue Trends</h2>
+                  <h2>{t('dashboard.revenueTrends')}</h2>
                   <div className="toggle-switch toggle-corner">
-                    <button className={trendGranularity === 'day' ? 'active' : ''} onClick={() => setTrendGranularity('day')}>Daily</button>
-                    <button className={trendGranularity === 'week' ? 'active' : ''} onClick={() => setTrendGranularity('week')}>Weekly</button>
+                    <button className={trendGranularity === 'day' ? 'active' : ''} onClick={() => setTrendGranularity('day')}>{t('time.daily')}</button>
+                    <button className={trendGranularity === 'week' ? 'active' : ''} onClick={() => setTrendGranularity('week')}>{t('time.weekly')}</button>
                   </div>
                   <div className="chart-container">
                     <Line data={trendData} options={{...baseOptions, scales: {...baseOptions.scales, x: {...baseOptions.scales.x, ticks: {...baseOptions.scales.x.ticks, maxTicksLimit: 8}}}}} />
@@ -541,9 +552,9 @@ function Dashboard({ data, showDataLabels }) {
               {filters.museum === 'all' && (
                 <div className="carousel-slide">
                   <div className="chart-card">
-                    <h2>Visitors by Museum</h2>
+                    <h2>{t('dashboard.visitorsByMuseum')}</h2>
                     <div className="chart-container">
-                      <Doughnut data={museumData.visitors} options={{...baseOptions, plugins: {...baseOptions.plugins, legend: {display: true, position: 'bottom', labels: {boxWidth: 12, padding: 12, font: {size: 10}}}}}} />
+                      <Doughnut data={museumData.visitors} options={{...baseOptions, plugins: {...baseOptions.plugins, legend: {display: true, position: 'bottom', labels: {boxWidth: 12, padding: 12, font: {size: 12}}}}}} />
                     </div>
                   </div>
                 </div>
@@ -552,7 +563,7 @@ function Dashboard({ data, showDataLabels }) {
               {filters.museum === 'all' && (
                 <div className="carousel-slide">
                   <div className="chart-card">
-                    <h2>Revenue by Museum</h2>
+                    <h2>{t('dashboard.revenueByMuseum')}</h2>
                     <div className="chart-container">
                       <Bar data={museumData.revenue} options={baseOptions} />
                     </div>
@@ -562,16 +573,16 @@ function Dashboard({ data, showDataLabels }) {
 
               <div className="carousel-slide">
                 <div className="chart-card">
-                  <h2>Quarterly Revenue (YoY)</h2>
+                  <h2>{t('dashboard.quarterlyRevenue')}</h2>
                   <div className="chart-container">
-                    <Bar data={quarterlyYoYData} options={{...baseOptions, plugins: {...baseOptions.plugins, legend: {display: true, position: 'top', align: 'end', labels: {boxWidth: 12, padding: 8, font: {size: 10}}}}}} />
+                    <Bar data={quarterlyYoYData} options={{...baseOptions, plugins: {...baseOptions.plugins, legend: {display: true, position: 'top', align: 'end', labels: {boxWidth: 12, padding: 8, font: {size: 12}}}}}} />
                   </div>
                 </div>
               </div>
 
               <div className="carousel-slide">
                 <div className="chart-card">
-                  <h2>District Performance</h2>
+                  <h2>{t('dashboard.districtPerformance')}</h2>
                   <div className="chart-container">
                     <Bar data={districtData} options={{...baseOptions, indexAxis: 'y'}} />
                   </div>
@@ -580,13 +591,13 @@ function Dashboard({ data, showDataLabels }) {
 
               <div className="carousel-slide">
                 <div className="chart-card">
-                  <h2>Capture Rate vs Umrah Pilgrims</h2>
+                  <h2>{t('dashboard.captureRateChart')}</h2>
                   <div className="chart-container">
                     <Line data={captureRateData} options={{
                       ...baseOptions,
                       plugins: {
                         ...baseOptions.plugins,
-                        legend: { display: true, position: 'top', align: 'end', labels: { boxWidth: 10, padding: 8, font: { size: 9 } } },
+                        legend: { display: true, position: 'top', align: 'end', labels: { boxWidth: 10, padding: 8, font: { size: 13 } } },
                         tooltip: {
                           ...baseOptions.plugins.tooltip,
                           callbacks: {
@@ -605,14 +616,14 @@ function Dashboard({ data, showDataLabels }) {
                           type: 'linear',
                           position: 'left',
                           grid: { color: chartColors.grid },
-                          ticks: { font: { size: 9 }, color: '#94a3b8', callback: (v) => v.toFixed(1) + '%' },
+                          ticks: { font: { size: 13 }, color: '#94a3b8', callback: (v) => v.toFixed(1) + '%' },
                           border: { display: false }
                         },
                         y1: {
                           type: 'linear',
                           position: 'right',
                           grid: { drawOnChartArea: false },
-                          ticks: { font: { size: 9 }, color: '#94a3b8', callback: (v) => (v / 1000000).toFixed(0) + 'M' },
+                          ticks: { font: { size: 13 }, color: '#94a3b8', callback: (v) => (v / 1000000).toFixed(0) + 'M' },
                           border: { display: false }
                         }
                       }
diff --git a/src/components/Slides.js b/src/components/Slides.js
index 407a250..e682c2d 100644
--- a/src/components/Slides.js
+++ b/src/components/Slides.js
@@ -1,6 +1,7 @@
 import React, { useState, useMemo, useCallback } from 'react';
 import { Line, Bar } from 'react-chartjs-2';
 import { chartColors, createBaseOptions } from '../config/chartConfig';
+import { useLanguage } from '../contexts/LanguageContext';
 import {
   filterDataByDateRange,
   calculateMetrics,
@@ -12,20 +13,21 @@ import {
 } from '../services/dataService';
 import JSZip from 'jszip';
 
-const CHART_TYPES = [
-  { id: 'trend', label: 'Revenue Trend', icon: '📈' },
-  { id: 'museum-bar', label: 'By Museum', icon: '📊' },
-  { id: 'kpi-cards', label: 'KPI Summary', icon: '🎯' },
-  { id: 'comparison', label: 'YoY Comparison', icon: '⚖️' }
-];
-
-const METRICS = [
-  { id: 'revenue', label: 'Revenue', field: 'revenue_incl_tax' },
-  { id: 'visitors', label: 'Visitors', field: 'visits' },
-  { id: 'tickets', label: 'Tickets', field: 'tickets' }
-];
-
 function Slides({ data }) {
+  const { t } = useLanguage();
+  
+  const CHART_TYPES = useMemo(() => [
+    { id: 'trend', label: t('slides.revenueTrend'), icon: '📈' },
+    { id: 'museum-bar', label: t('slides.byMuseum'), icon: '📊' },
+    { id: 'kpi-cards', label: t('slides.kpiSummary'), icon: '🎯' },
+    { id: 'comparison', label: t('slides.yoyComparison'), icon: '⚖️' }
+  ], [t]);
+
+  const METRICS = useMemo(() => [
+    { id: 'revenue', label: t('metrics.revenue'), field: 'revenue_incl_tax' },
+    { id: 'visitors', label: t('metrics.visitors'), field: 'visits' },
+    { id: 'tickets', label: t('metrics.tickets'), field: 'tickets' }
+  ], [t]);
   const [slides, setSlides] = useState([]);
   const [editingSlide, setEditingSlide] = useState(null);
   const [previewMode, setPreviewMode] = useState(false);
@@ -171,6 +173,7 @@ ${generateChartScripts(slides, data, districts, districtMuseumMap)}
         currentSlide={currentPreviewSlide}
         setCurrentSlide={setCurrentPreviewSlide}
         onExit={() => setPreviewMode(false)}
+        metrics={METRICS}
       />
     );
   }
@@ -178,8 +181,8 @@ ${generateChartScripts(slides, data, districts, districtMuseumMap)}
   return (
     <div className="slides-builder">
       <div className="page-title">
-        <h1>Presentation Builder</h1>
-        <p>Create slides with charts and export as HTML or PDF</p>
+        <h1>{t('slides.title')}</h1>
+        <p>{t('slides.subtitle')}</p>
       </div>
 
       <div className="slides-toolbar">
@@ -187,7 +190,7 @@ ${generateChartScripts(slides, data, districts, districtMuseumMap)}
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
             <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
           </svg>
-          Add Slide
+          {t('slides.addSlide')}
         </button>
         {slides.length > 0 && (
           <>
@@ -195,13 +198,13 @@ ${generateChartScripts(slides, data, districts, districtMuseumMap)}
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                 <rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>
               </svg>
-              Preview
+              {t('slides.preview')}
             </button>
             <button className="btn-secondary" onClick={exportAsHTML}>
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                 <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
               </svg>
-              Export HTML
+              {t('slides.exportHtml')}
             </button>
           </>
         )}
@@ -209,11 +212,11 @@ ${generateChartScripts(slides, data, districts, districtMuseumMap)}
 
       <div className="slides-workspace">
         <div className="slides-list">
-          <h3>Slides ({slides.length})</h3>
+          <h3>{t('slides.slidesCount')} ({slides.length})</h3>
           {slides.length === 0 ? (
             <div className="empty-slides">
-              <p>No slides yet</p>
-              <button onClick={addSlide}>Add your first slide</button>
+              <p>{t('slides.noSlides')}</p>
+              <button onClick={addSlide}>{t('slides.addFirst')}</button>
             </div>
           ) : (
             <div className="slides-thumbnails">
@@ -245,6 +248,8 @@ ${generateChartScripts(slides, data, districts, districtMuseumMap)}
             districts={districts}
             districtMuseumMap={districtMuseumMap}
             data={data}
+            chartTypes={CHART_TYPES}
+            metrics={METRICS}
           />
         )}
       </div>
@@ -252,7 +257,8 @@ ${generateChartScripts(slides, data, districts, districtMuseumMap)}
   );
 }
 
-function SlideEditor({ slide, onUpdate, districts, districtMuseumMap, data }) {
+function SlideEditor({ slide, onUpdate, districts, districtMuseumMap, data, chartTypes, metrics }) {
+  const { t } = useLanguage();
   const availableMuseums = useMemo(() => 
     getMuseumsForDistrict(districtMuseumMap, slide.district),
     [districtMuseumMap, slide.district]
@@ -261,19 +267,19 @@ function SlideEditor({ slide, onUpdate, districts, districtMuseumMap, data }) {
   return (
     <div className="slide-editor">
       <div className="editor-section">
-        <label>Slide Title</label>
+        <label>{t('slides.slideTitle')}</label>
         <input 
           type="text" 
           value={slide.title} 
           onChange={e => onUpdate({ title: e.target.value })}
-          placeholder="Enter slide title"
+          placeholder={t('slides.slideTitle')}
         />
       </div>
 
       <div className="editor-section">
-        <label>Chart Type</label>
+        <label>{t('slides.chartType')}</label>
         <div className="chart-type-grid">
-          {CHART_TYPES.map(type => (
+          {chartTypes.map(type => (
             <button
               key={type.id}
               className={`chart-type-btn ${slide.chartType === type.id ? 'active' : ''}`}
@@ -287,35 +293,35 @@ function SlideEditor({ slide, onUpdate, districts, districtMuseumMap, data }) {
       </div>
 
       <div className="editor-section">
-        <label>Metric</label>
+        <label>{t('slides.metric')}</label>
         <select value={slide.metric} onChange={e => onUpdate({ metric: e.target.value })}>
-          {METRICS.map(m => <option key={m.id} value={m.id}>{m.label}</option>)}
+          {metrics.map(m => <option key={m.id} value={m.id}>{m.label}</option>)}
         </select>
       </div>
 
       <div className="editor-row">
         <div className="editor-section">
-          <label>Start Date</label>
+          <label>{t('slides.startDate')}</label>
           <input type="date" value={slide.startDate} onChange={e => onUpdate({ startDate: e.target.value })} />
         </div>
         <div className="editor-section">
-          <label>End Date</label>
+          <label>{t('slides.endDate')}</label>
           <input type="date" value={slide.endDate} onChange={e => onUpdate({ endDate: e.target.value })} />
         </div>
       </div>
 
       <div className="editor-row">
         <div className="editor-section">
-          <label>District</label>
+          <label>{t('filters.district')}</label>
           <select value={slide.district} onChange={e => onUpdate({ district: e.target.value, museum: 'all' })}>
-            <option value="all">All Districts</option>
+            <option value="all">{t('filters.allDistricts')}</option>
             {districts.map(d => <option key={d} value={d}>{d}</option>)}
           </select>
         </div>
         <div className="editor-section">
-          <label>Museum</label>
+          <label>{t('filters.museum')}</label>
           <select value={slide.museum} onChange={e => onUpdate({ museum: e.target.value })}>
-            <option value="all">All Museums</option>
+            <option value="all">{t('filters.allMuseums')}</option>
             {availableMuseums.map(m => <option key={m} value={m}>{m}</option>)}
           </select>
         </div>
@@ -329,20 +335,28 @@ function SlideEditor({ slide, onUpdate, districts, districtMuseumMap, data }) {
               checked={slide.showComparison} 
               onChange={e => onUpdate({ showComparison: e.target.checked })}
             />
-            Show Year-over-Year Comparison
+            {t('slides.showYoY')}
           </label>
         </div>
       )}
 
       <div className="slide-preview-box">
-        <h4>Preview</h4>
-        <SlidePreview slide={slide} data={data} districts={districts} districtMuseumMap={districtMuseumMap} />
+        <h4>{t('slides.preview')}</h4>
+        <SlidePreview slide={slide} data={data} districts={districts} districtMuseumMap={districtMuseumMap} metrics={metrics} />
       </div>
     </div>
   );
 }
 
-function SlidePreview({ slide, data, districts, districtMuseumMap }) {
+// Static field mapping for charts (Chart.js labels don't need i18n)
+const METRIC_FIELDS = {
+  revenue: { field: 'revenue_incl_tax', label: 'Revenue' },
+  visitors: { field: 'visits', label: 'Visitors' },
+  tickets: { field: 'tickets', label: 'Tickets' }
+};
+
+function SlidePreview({ slide, data, districts, districtMuseumMap, metrics }) {
+  const { t } = useLanguage();
   const filteredData = useMemo(() => 
     filterDataByDateRange(data, slide.startDate, slide.endDate, {
       district: slide.district,
@@ -351,7 +365,7 @@ function SlidePreview({ slide, data, districts, districtMuseumMap }) {
     [data, slide.startDate, slide.endDate, slide.district, slide.museum]
   );
 
-  const metrics = useMemo(() => calculateMetrics(filteredData), [filteredData]);
+  const metricsData = useMemo(() => calculateMetrics(filteredData), [filteredData]);
   const baseOptions = useMemo(() => createBaseOptions(false), []);
 
   const getMetricValue = useCallback((rows, metric) => {
@@ -369,10 +383,11 @@ function SlidePreview({ slide, data, districts, districtMuseumMap }) {
     });
     
     const sortedDates = Object.keys(grouped).sort();
+    const metricLabel = metrics?.find(m => m.id === slide.metric)?.label || METRIC_FIELDS[slide.metric]?.label || slide.metric;
     return {
       labels: sortedDates.map(d => d.substring(5)),
       datasets: [{
-        label: METRICS.find(m => m.id === slide.metric)?.label,
+        label: metricLabel,
         data: sortedDates.map(d => getMetricValue(grouped[d], slide.metric)),
         borderColor: chartColors.primary,
         backgroundColor: chartColors.primary + '20',
@@ -380,7 +395,7 @@ function SlidePreview({ slide, data, districts, districtMuseumMap }) {
         tension: 0.4
       }]
     };
-  }, [filteredData, slide.metric, getMetricValue]);
+  }, [filteredData, slide.metric, getMetricValue, metrics]);
 
   const museumData = useMemo(() => {
     const byMuseum = {};
@@ -391,31 +406,32 @@ function SlidePreview({ slide, data, districts, districtMuseumMap }) {
     });
     
     const museums = Object.keys(byMuseum).sort();
+    const metricLabel = metrics?.find(m => m.id === slide.metric)?.label || METRIC_FIELDS[slide.metric]?.label || slide.metric;
     return {
       labels: museums,
       datasets: [{
-        label: METRICS.find(m => m.id === slide.metric)?.label,
+        label: metricLabel,
         data: museums.map(m => getMetricValue(byMuseum[m], slide.metric)),
         backgroundColor: chartColors.primary,
         borderRadius: 6
       }]
     };
-  }, [filteredData, slide.metric, getMetricValue]);
+  }, [filteredData, slide.metric, getMetricValue, metrics]);
 
   if (slide.chartType === 'kpi-cards') {
     return (
       <div className="preview-kpis">
         <div className="preview-kpi">
-          <div className="kpi-value">{formatCompactCurrency(metrics.revenue)}</div>
-          <div className="kpi-label">Revenue</div>
+          <div className="kpi-value">{formatCompactCurrency(metricsData.revenue)}</div>
+          <div className="kpi-label">{t('metrics.revenue')}</div>
         </div>
         <div className="preview-kpi">
-          <div className="kpi-value">{formatCompact(metrics.visitors)}</div>
-          <div className="kpi-label">Visitors</div>
+          <div className="kpi-value">{formatCompact(metricsData.visitors)}</div>
+          <div className="kpi-label">{t('metrics.visitors')}</div>
         </div>
         <div className="preview-kpi">
-          <div className="kpi-value">{formatCompact(metrics.tickets)}</div>
-          <div className="kpi-label">Tickets</div>
+          <div className="kpi-value">{formatCompact(metricsData.tickets)}</div>
+          <div className="kpi-label">{t('metrics.tickets')}</div>
         </div>
       </div>
     );
@@ -436,7 +452,8 @@ function SlidePreview({ slide, data, districts, districtMuseumMap }) {
   );
 }
 
-function PreviewMode({ slides, data, districts, districtMuseumMap, currentSlide, setCurrentSlide, onExit }) {
+function PreviewMode({ slides, data, districts, districtMuseumMap, currentSlide, setCurrentSlide, onExit, metrics }) {
+  const { t } = useLanguage();
   const handleKeyDown = useCallback((e) => {
     if (e.key === 'ArrowRight' || e.key === ' ') {
       setCurrentSlide(prev => Math.min(prev + 1, slides.length - 1));
@@ -459,7 +476,7 @@ function PreviewMode({ slides, data, districts, districtMuseumMap, currentSlide,
       <div className="preview-slide">
         <h1 className="preview-title">{slide?.title}</h1>
         <div className="preview-content">
-          {slide && <SlidePreview slide={slide} data={data} districts={districts} districtMuseumMap={districtMuseumMap} />}
+          {slide && <SlidePreview slide={slide} data={data} districts={districts} districtMuseumMap={districtMuseumMap} metrics={metrics} />}
         </div>
         <div className="preview-footer">
           <span>{currentSlide + 1} / {slides.length}</span>
@@ -468,7 +485,7 @@ function PreviewMode({ slides, data, districts, districtMuseumMap, currentSlide,
       <div className="preview-controls">
         <button onClick={() => setCurrentSlide(prev => Math.max(prev - 1, 0))} disabled={currentSlide === 0}>←</button>
         <button onClick={() => setCurrentSlide(prev => Math.min(prev + 1, slides.length - 1))} disabled={currentSlide === slides.length - 1}>→</button>
-        <button onClick={onExit}>Exit</button>
+        <button onClick={onExit}>{t('slides.exit')}</button>
       </div>
     </div>
   );
diff --git a/src/components/shared/Carousel.jsx b/src/components/shared/Carousel.jsx
index 7d6637c..032ea59 100644
--- a/src/components/shared/Carousel.jsx
+++ b/src/components/shared/Carousel.jsx
@@ -1,4 +1,4 @@
-import React, { useRef, useCallback } from 'react';
+import React, { useRef, useCallback, useState } from 'react';
 
 function Carousel({ 
   children, 
@@ -8,25 +8,66 @@ function Carousel({
   showLabels = true,
   className = ''
 }) {
-  const touchStart = useRef(null);
+  const touchStartX = useRef(null);
+  const touchStartY = useRef(null);
+  const trackRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragOffset, setDragOffset] = useState(0);
   const itemCount = React.Children.count(children);
-
+  
+  // Threshold for swipe detection
+  const SWIPE_THRESHOLD = 50;
+  const VELOCITY_THRESHOLD = 0.3;
+  
   const handleTouchStart = useCallback((e) => {
-    touchStart.current = e.touches[0].clientX;
+    touchStartX.current = e.touches[0].clientX;
+    touchStartY.current = e.touches[0].clientY;
+    setIsDragging(true);
+    setDragOffset(0);
   }, []);
 
+  const handleTouchMove = useCallback((e) => {
+    if (!touchStartX.current || !isDragging) return;
+    
+    const currentX = e.touches[0].clientX;
+    const currentY = e.touches[0].clientY;
+    const diffX = currentX - touchStartX.current;
+    const diffY = currentY - touchStartY.current;
+    
+    // Only handle horizontal swipes
+    if (Math.abs(diffX) > Math.abs(diffY)) {
+      e.preventDefault();
+      // Add resistance at edges
+      let offset = diffX;
+      if ((activeIndex === 0 && diffX > 0) || (activeIndex === itemCount - 1 && diffX < 0)) {
+        offset = diffX * 0.3; // Rubber band effect
+      }
+      setDragOffset(offset);
+    }
+  }, [isDragging, activeIndex, itemCount]);
+
   const handleTouchEnd = useCallback((e) => {
-    if (!touchStart.current) return;
-    const diff = touchStart.current - e.changedTouches[0].clientX;
-    if (Math.abs(diff) > 50) {
+    if (!touchStartX.current || !isDragging) return;
+    
+    const endX = e.changedTouches[0].clientX;
+    const diff = touchStartX.current - endX;
+    const velocity = Math.abs(diff) / 200; // Rough velocity calc
+    
+    // Determine if we should change slide
+    if (Math.abs(diff) > SWIPE_THRESHOLD || velocity > VELOCITY_THRESHOLD) {
       if (diff > 0 && activeIndex < itemCount - 1) {
         setActiveIndex(activeIndex + 1);
       } else if (diff < 0 && activeIndex > 0) {
         setActiveIndex(activeIndex - 1);
       }
     }
-    touchStart.current = null;
-  }, [activeIndex, setActiveIndex, itemCount]);
+    
+    // Reset
+    touchStartX.current = null;
+    touchStartY.current = null;
+    setIsDragging(false);
+    setDragOffset(0);
+  }, [isDragging, activeIndex, setActiveIndex, itemCount]);
 
   const handleKeyDown = useCallback((e) => {
     if (e.key === 'ArrowLeft' && activeIndex > 0) {
@@ -36,18 +77,40 @@ function Carousel({
     }
   }, [activeIndex, setActiveIndex, itemCount]);
 
+  // Calculate transform
+  const baseTransform = -(activeIndex * 100);
+  const dragPercentage = trackRef.current ? (dragOffset / trackRef.current.offsetWidth) * 100 : 0;
+  const transform = baseTransform + dragPercentage;
+
   return (
-    <div className={`carousel ${className}`} onKeyDown={handleKeyDown} tabIndex={0}>
+    <div 
+      className={`carousel ${className}`} 
+      onKeyDown={handleKeyDown} 
+      tabIndex={0}
+      role="region"
+      aria-label="Carousel"
+    >
       <div className="carousel-container">
         <div className="carousel-viewport">
           <div 
+            ref={trackRef}
             className="carousel-track"
-            style={{ transform: `translateX(-${activeIndex * 100}%)` }}
+            style={{ 
+              transform: `translateX(${transform}%)`,
+              transition: isDragging ? 'none' : 'transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94)'
+            }}
             onTouchStart={handleTouchStart}
+            onTouchMove={handleTouchMove}
             onTouchEnd={handleTouchEnd}
           >
             {React.Children.map(children, (child, i) => (
-              <div className="carousel-slide" key={i}>
+              <div 
+                className="carousel-slide" 
+                key={i}
+                role="tabpanel"
+                aria-hidden={activeIndex !== i}
+                aria-label={labels[i] || `Slide ${i + 1}`}
+              >
                 {child}
               </div>
             ))}
@@ -64,6 +127,7 @@ function Carousel({
             role="tab"
             aria-selected={activeIndex === i}
             aria-label={labels[i] || `Slide ${i + 1}`}
+            aria-controls={`slide-${i}`}
           >
             {showLabels && labels[i] && (
               <span className="dot-label">{labels[i]}</span>
diff --git a/src/components/shared/EmptyState.jsx b/src/components/shared/EmptyState.jsx
index 20dab2e..bc06edd 100644
--- a/src/components/shared/EmptyState.jsx
+++ b/src/components/shared/EmptyState.jsx
@@ -2,18 +2,29 @@ import React from 'react';
 
 function EmptyState({ 
   icon = '📊', 
-  title = 'No data found', 
-  message = 'Try adjusting your filters',
-  action,
-  actionLabel = 'Reset Filters'
+  title, 
+  message, 
+  action = null, 
+  actionLabel = 'Try Again',
+  className = ''
 }) {
   return (
-    <div className="empty-state">
-      <div className="empty-state-icon">{icon}</div>
-      <h3 className="empty-state-title">{title}</h3>
-      <p className="empty-state-message">{message}</p>
+    <div className={`empty-state ${className}`}>
+      <div className="empty-state-icon" role="img" aria-hidden="true">
+        {icon}
+      </div>
+      {title && (
+        <h3 className="empty-state-title">{title}</h3>
+      )}
+      {message && (
+        <p className="empty-state-message">{message}</p>
+      )}
       {action && (
-        <button className="empty-state-action" onClick={action}>
+        <button 
+          className="empty-state-action"
+          onClick={action}
+          type="button"
+        >
           {actionLabel}
         </button>
       )}
diff --git a/src/components/shared/FilterControls.jsx b/src/components/shared/FilterControls.jsx
index e2fbbd1..481b811 100644
--- a/src/components/shared/FilterControls.jsx
+++ b/src/components/shared/FilterControls.jsx
@@ -1,33 +1,86 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { useLanguage } from '../../contexts/LanguageContext';
 
 function FilterControls({ 
   children, 
-  title = 'Filters',
+  title,
   defaultExpanded = true,
   onReset = null,
   className = ''
 }) {
-  const [expanded, setExpanded] = useState(defaultExpanded);
+  const { t } = useLanguage();
+  const displayTitle = title || t('filters.title');
+  
+  // Start collapsed on mobile
+  const [expanded, setExpanded] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return window.innerWidth > 768 ? defaultExpanded : false;
+    }
+    return defaultExpanded;
+  });
+
+  // Handle resize
+  useEffect(() => {
+    const handleResize = () => {
+      // Auto-expand on desktop, keep user preference on mobile
+      if (window.innerWidth > 768) {
+        setExpanded(true);
+      }
+    };
+    
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const toggleExpanded = () => {
+    setExpanded(!expanded);
+  };
 
   return (
     <div className={`controls ${expanded ? 'expanded' : 'collapsed'} ${className}`}>
-      <div className="controls-header" onClick={() => setExpanded(!expanded)}>
-        <h3>{title}</h3>
+      <div 
+        className="controls-header" 
+        onClick={toggleExpanded}
+        role="button"
+        aria-expanded={expanded}
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            toggleExpanded();
+          }
+        }}
+      >
+        <h3>{displayTitle}</h3>
         <div className="controls-header-actions">
           {onReset && expanded && (
             <button 
               className="controls-reset"
-              onClick={(e) => { e.stopPropagation(); onReset(); }}
+              onClick={(e) => { 
+                e.stopPropagation(); 
+                onReset(); 
+              }}
+              aria-label={t('filters.reset') || 'Reset filters'}
             >
-              Reset
+              {t('filters.reset') || 'Reset'}
             </button>
           )}
-          <button className="controls-toggle">
-            {expanded ? '▲ Hide' : '▼ Show'}
+          <button 
+            className="controls-toggle"
+            aria-hidden="true"
+          >
+            {expanded ? '▲' : '▼'}
           </button>
         </div>
       </div>
-      <div className="controls-body">
+      
+      <div 
+        className="controls-body"
+        style={{
+          display: expanded ? 'block' : 'none',
+          animation: expanded ? 'fadeIn 200ms ease' : 'none'
+        }}
+      >
         {children}
       </div>
     </div>
@@ -37,7 +90,7 @@ function FilterControls({
 function FilterGroup({ label, children }) {
   return (
     <div className="control-group">
-      <label>{label}</label>
+      {label && <label>{label}</label>}
       {children}
     </div>
   );
diff --git a/src/components/shared/StatCard.jsx b/src/components/shared/StatCard.jsx
index a8ea393..80d2e6a 100644
--- a/src/components/shared/StatCard.jsx
+++ b/src/components/shared/StatCard.jsx
@@ -1,15 +1,20 @@
 import React from 'react';
 
-function StatCard({ title, value, change = null, changeLabel = 'YoY' }) {
+function StatCard({ title, value, change = null, changeLabel = 'YoY', subtitle = null }) {
   const isPositive = change !== null && change >= 0;
   
   return (
     <div className="stat-card">
       <h3>{title}</h3>
       <div className="stat-value">{value}</div>
+      {subtitle && (
+        <div className="stat-subtitle">{subtitle}</div>
+      )}
       {change !== null && (
         <div className={`stat-change ${isPositive ? 'positive' : 'negative'}`}>
-          {isPositive ? '↑' : '↓'} {Math.abs(change).toFixed(1)}% {changeLabel}
+          <span className="stat-change-arrow">{isPositive ? '↑' : '↓'}</span>
+          <span className="stat-change-value">{Math.abs(change).toFixed(1)}%</span>
+          <span className="stat-change-label">{changeLabel}</span>
         </div>
       )}
     </div>
diff --git a/src/config/chartConfig.js b/src/config/chartConfig.js
index 1473a4f..5cebf8f 100644
--- a/src/config/chartConfig.js
+++ b/src/config/chartConfig.js
@@ -41,7 +41,7 @@ export const chartColors = {
 export const createDataLabelConfig = (showDataLabels) => ({
   display: showDataLabels,
   color: '#1e293b',
-  font: { size: 10, weight: 600 },
+  font: { size: 11, weight: 600 },
   anchor: 'end',
   align: 'end',
   offset: 4,
@@ -74,19 +74,19 @@ export const createBaseOptions = (showDataLabels) => ({
       backgroundColor: '#1e293b', 
       padding: 12, 
       cornerRadius: 8, 
-      titleFont: { size: 12 }, 
-      bodyFont: { size: 11 } 
+      titleFont: { size: 14 }, 
+      bodyFont: { size: 13 } 
     },
     datalabels: createDataLabelConfig(showDataLabels)
   },
   scales: {
     x: { 
       grid: { display: false }, 
-      ticks: { font: { size: 10 }, color: '#94a3b8' } 
+      ticks: { font: { size: 12 }, color: '#94a3b8' } 
     },
     y: { 
       grid: { color: chartColors.grid }, 
-      ticks: { font: { size: 10 }, color: '#94a3b8' }, 
+      ticks: { font: { size: 12 }, color: '#94a3b8' }, 
       border: { display: false } 
     }
   }
diff --git a/src/contexts/LanguageContext.js b/src/contexts/LanguageContext.js
new file mode 100644
index 0000000..7a4e564
--- /dev/null
+++ b/src/contexts/LanguageContext.js
@@ -0,0 +1,82 @@
+import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import en from '../locales/en.json';
+import ar from '../locales/ar.json';
+
+const translations = { en, ar };
+
+const LanguageContext = createContext();
+
+export function LanguageProvider({ children }) {
+  const [lang, setLang] = useState(() => {
+    // Check localStorage first, then browser preference
+    const saved = localStorage.getItem('hihala-lang');
+    if (saved && translations[saved]) return saved;
+    
+    // Check browser language
+    const browserLang = navigator.language?.split('-')[0];
+    if (browserLang === 'ar') return 'ar';
+    return 'en';
+  });
+
+  const dir = lang === 'ar' ? 'rtl' : 'ltr';
+
+  // Apply direction to document
+  useEffect(() => {
+    document.documentElement.dir = dir;
+    document.documentElement.lang = lang;
+    localStorage.setItem('hihala-lang', lang);
+  }, [lang, dir]);
+
+  // Translation function with dot notation support
+  const t = useCallback((key, fallback) => {
+    const keys = key.split('.');
+    let value = translations[lang];
+    
+    for (const k of keys) {
+      if (value && typeof value === 'object' && k in value) {
+        value = value[k];
+      } else {
+        // Try English fallback
+        value = translations.en;
+        for (const ek of keys) {
+          if (value && typeof value === 'object' && ek in value) {
+            value = value[ek];
+          } else {
+            return fallback || key;
+          }
+        }
+        break;
+      }
+    }
+    
+    return typeof value === 'string' ? value : (fallback || key);
+  }, [lang]);
+
+  // Switch language
+  const switchLanguage = useCallback(() => {
+    setLang(prev => prev === 'en' ? 'ar' : 'en');
+  }, []);
+
+  // Set specific language
+  const setLanguage = useCallback((newLang) => {
+    if (translations[newLang]) {
+      setLang(newLang);
+    }
+  }, []);
+
+  return (
+    <LanguageContext.Provider value={{ lang, dir, t, switchLanguage, setLanguage }}>
+      {children}
+    </LanguageContext.Provider>
+  );
+}
+
+export function useLanguage() {
+  const context = useContext(LanguageContext);
+  if (!context) {
+    throw new Error('useLanguage must be used within a LanguageProvider');
+  }
+  return context;
+}
+
+export default LanguageContext;
diff --git a/src/index.js b/src/index.js
index 593edf1..48dc746 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,10 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { LanguageProvider } from './contexts/LanguageContext';
 import App from './App';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <LanguageProvider>
+      <App />
+    </LanguageProvider>
   </React.StrictMode>
 );
diff --git a/src/locales/ar.json b/src/locales/ar.json
new file mode 100644
index 0000000..2fc8df0
--- /dev/null
+++ b/src/locales/ar.json
@@ -0,0 +1,155 @@
+{
+  "app": {
+    "name": "هاي هلا داتا",
+    "loading": "جارٍ تحميل البيانات...",
+    "error": "تعذر تحميل البيانات",
+    "retry": "إعادة المحاولة"
+  },
+  "nav": {
+    "dashboard": "لوحة التحكم",
+    "comparison": "المقارنة",
+    "compare": "مقارنة",
+    "slides": "الشرائح",
+    "labels": "التسميات",
+    "labelsOn": "التسميات مفعّلة",
+    "labelsOff": "التسميات معطّلة",
+    "labelsTooltip": "عرض القيم على الرسوم البيانية"
+  },
+  "toggle": {
+    "on": "تشغيل",
+    "off": "إيقاف"
+  },
+  "dataSources": {
+    "museums": "المتاحف",
+    "coffees": "المقاهي",
+    "ecommerce": "التجارة الإلكترونية",
+    "soon": "قريباً"
+  },
+  "filters": {
+    "title": "الفلاتر",
+    "year": "السنة",
+    "district": "المنطقة",
+    "museum": "المتحف",
+    "quarter": "الربع",
+    "allYears": "كل السنوات",
+    "allDistricts": "كل المناطق",
+    "allMuseums": "كل المتاحف",
+    "allQuarters": "كل الأرباع",
+    "reset": "إعادة تعيين الفلاتر"
+  },
+  "metrics": {
+    "revenue": "الإيرادات",
+    "totalRevenue": "إجمالي الإيرادات",
+    "visitors": "الزوار",
+    "totalVisitors": "إجمالي الزوار",
+    "tickets": "التذاكر",
+    "totalTickets": "إجمالي التذاكر",
+    "avgRevenue": "متوسط الإيراد/زائر",
+    "avgRevenuePerVisitor": "متوسط الإيراد لكل زائر",
+    "pilgrims": "المعتمرون",
+    "captureRate": "نسبة الاستقطاب"
+  },
+  "dashboard": {
+    "title": "لوحة التحكم",
+    "subtitle": "تحليلات المتاحف المباشرة من جداول بيانات Google",
+    "noData": "لا توجد بيانات",
+    "noDataMessage": "لا توجد سجلات تطابق الفلاتر الحالية. حاول تعديل اختيارك.",
+    "quarterlyComparison": "مقارنة ربع سنوية: 2024 مقابل 2025",
+    "revenueTrends": "اتجاهات الإيرادات",
+    "visitorsByMuseum": "الزوار حسب المتحف",
+    "revenueByMuseum": "الإيرادات حسب المتحف",
+    "quarterlyRevenue": "الإيرادات الربعية (سنوي)",
+    "districtPerformance": "أداء المناطق",
+    "captureRateChart": "نسبة الاستقطاب مقابل المعتمرين"
+  },
+  "table": {
+    "quarter": "الربع",
+    "rev2024": "إيرادات 2024",
+    "rev2025": "إيرادات 2025",
+    "change": "التغيير",
+    "visitors2024": "زوار 2024",
+    "visitors2025": "زوار 2025",
+    "capture2024": "استقطاب 2024",
+    "capture2025": "استقطاب 2025"
+  },
+  "time": {
+    "daily": "يومي",
+    "weekly": "أسبوعي",
+    "monthly": "شهري",
+    "q1": "ر1",
+    "q2": "ر2",
+    "q3": "ر3",
+    "q4": "ر4",
+    "h1": "ن1",
+    "h2": "ن2",
+    "fullYear": "السنة كاملة"
+  },
+  "months": {
+    "january": "يناير",
+    "february": "فبراير",
+    "march": "مارس",
+    "april": "أبريل",
+    "may": "مايو",
+    "june": "يونيو",
+    "july": "يوليو",
+    "august": "أغسطس",
+    "september": "سبتمبر",
+    "october": "أكتوبر",
+    "november": "نوفمبر",
+    "december": "ديسمبر"
+  },
+  "comparison": {
+    "title": "مقارنة الفترات",
+    "subtitle": "اختر فترة وسنة — تتم المقارنة تلقائياً مع نفس الفترة من السنة السابقة",
+    "selectPeriod": "اختر الفترة",
+    "period": "الفترة",
+    "from": "من",
+    "to": "إلى",
+    "custom": "مخصص",
+    "previousPeriod": "الفترة السابقة",
+    "currentPeriod": "الفترة الحالية",
+    "vs": "مقابل",
+    "noData": "لا توجد بيانات لهذه الفترة",
+    "noDataMessage": "لم يتم العثور على سجلات للنطاق الزمني والفلاتر المحددة.",
+    "trend": "الاتجاه",
+    "byMuseum": "حسب المتحف",
+    "pendingData": "البيانات لم تُنشر بعد"
+  },
+  "slides": {
+    "title": "منشئ العروض التقديمية",
+    "subtitle": "إنشاء شرائح مع رسوم بيانية وتصديرها كـ HTML أو PDF",
+    "addSlide": "إضافة شريحة",
+    "preview": "معاينة",
+    "exportHtml": "تصدير HTML",
+    "slidesCount": "الشرائح",
+    "noSlides": "لا توجد شرائح بعد",
+    "addFirst": "أضف شريحتك الأولى",
+    "slideTitle": "عنوان الشريحة",
+    "chartType": "نوع الرسم البياني",
+    "metric": "المقياس",
+    "startDate": "تاريخ البداية",
+    "endDate": "تاريخ النهاية",
+    "showYoY": "إظهار مقارنة سنة بسنة",
+    "exit": "خروج",
+    "revenueTrend": "اتجاه الإيرادات",
+    "byMuseum": "حسب المتحف",
+    "kpiSummary": "ملخص مؤشرات الأداء",
+    "yoyComparison": "مقارنة سنوية"
+  },
+  "charts": {
+    "revenueTrend": "اتجاه الإيرادات",
+    "visitors": "الزوار",
+    "revenue": "الإيرادات",
+    "quarterly": "ربع سنوي",
+    "district": "المنطقة",
+    "captureRate": "نسبة الاستقطاب"
+  },
+  "language": {
+    "switch": "EN"
+  },
+  "export": {
+    "exportAll": "تصدير كل الرسوم البيانية",
+    "exportSlides": "تصدير للعرض التقديمي",
+    "exporting": "جارٍ التصدير..."
+  }
+}
diff --git a/src/locales/en.json b/src/locales/en.json
new file mode 100644
index 0000000..b31cbc9
--- /dev/null
+++ b/src/locales/en.json
@@ -0,0 +1,155 @@
+{
+  "app": {
+    "name": "HiHala Data",
+    "loading": "Loading data...",
+    "error": "Unable to load data",
+    "retry": "Retry"
+  },
+  "nav": {
+    "dashboard": "Dashboard",
+    "comparison": "Comparison",
+    "compare": "Compare",
+    "slides": "Slides",
+    "labels": "Labels",
+    "labelsOn": "Labels On",
+    "labelsOff": "Labels Off",
+    "labelsTooltip": "Show values on charts"
+  },
+  "toggle": {
+    "on": "On",
+    "off": "Off"
+  },
+  "dataSources": {
+    "museums": "Museums",
+    "coffees": "Coffees",
+    "ecommerce": "eCommerce",
+    "soon": "soon"
+  },
+  "filters": {
+    "title": "Filters",
+    "year": "Year",
+    "district": "District",
+    "museum": "Museum",
+    "quarter": "Quarter",
+    "allYears": "All Years",
+    "allDistricts": "All Districts",
+    "allMuseums": "All Museums",
+    "allQuarters": "All Quarters",
+    "reset": "Reset Filters"
+  },
+  "metrics": {
+    "revenue": "Revenue",
+    "totalRevenue": "Total Revenue",
+    "visitors": "Visitors",
+    "totalVisitors": "Total Visitors",
+    "tickets": "Tickets",
+    "totalTickets": "Total Tickets",
+    "avgRevenue": "Avg Rev/Visitor",
+    "avgRevenuePerVisitor": "Avg Revenue/Visitor",
+    "pilgrims": "Pilgrims",
+    "captureRate": "Capture Rate"
+  },
+  "dashboard": {
+    "title": "Dashboard",
+    "subtitle": "Real-time museum analytics from Google Sheets",
+    "noData": "No data found",
+    "noDataMessage": "No records match your current filters. Try adjusting your selection.",
+    "quarterlyComparison": "Quarterly Comparison: 2024 vs 2025",
+    "revenueTrends": "Revenue Trends",
+    "visitorsByMuseum": "Visitors by Museum",
+    "revenueByMuseum": "Revenue by Museum",
+    "quarterlyRevenue": "Quarterly Revenue (YoY)",
+    "districtPerformance": "District Performance",
+    "captureRateChart": "Capture Rate vs Umrah Pilgrims"
+  },
+  "table": {
+    "quarter": "Quarter",
+    "rev2024": "Rev 2024",
+    "rev2025": "Rev 2025",
+    "change": "Change",
+    "visitors2024": "Visitors 2024",
+    "visitors2025": "Visitors 2025",
+    "capture2024": "Capture 2024",
+    "capture2025": "Capture 2025"
+  },
+  "time": {
+    "daily": "Daily",
+    "weekly": "Weekly",
+    "monthly": "Monthly",
+    "q1": "Q1",
+    "q2": "Q2",
+    "q3": "Q3",
+    "q4": "Q4",
+    "h1": "H1",
+    "h2": "H2",
+    "fullYear": "Full Year"
+  },
+  "months": {
+    "january": "January",
+    "february": "February",
+    "march": "March",
+    "april": "April",
+    "may": "May",
+    "june": "June",
+    "july": "July",
+    "august": "August",
+    "september": "September",
+    "october": "October",
+    "november": "November",
+    "december": "December"
+  },
+  "comparison": {
+    "title": "Period Comparison",
+    "subtitle": "Select a period and year — automatically compares with the same period in the previous year",
+    "selectPeriod": "Select Period",
+    "period": "Period",
+    "from": "From",
+    "to": "To",
+    "custom": "Custom",
+    "previousPeriod": "Previous Period",
+    "currentPeriod": "Current Period",
+    "vs": "vs",
+    "noData": "No data for this period",
+    "noDataMessage": "No records found for the selected date range and filters.",
+    "trend": "Trend",
+    "byMuseum": "By Museum",
+    "pendingData": "Data not published yet"
+  },
+  "slides": {
+    "title": "Presentation Builder",
+    "subtitle": "Create slides with charts and export as HTML or PDF",
+    "addSlide": "Add Slide",
+    "preview": "Preview",
+    "exportHtml": "Export HTML",
+    "slidesCount": "Slides",
+    "noSlides": "No slides yet",
+    "addFirst": "Add your first slide",
+    "slideTitle": "Slide Title",
+    "chartType": "Chart Type",
+    "metric": "Metric",
+    "startDate": "Start Date",
+    "endDate": "End Date",
+    "showYoY": "Show Year-over-Year Comparison",
+    "exit": "Exit",
+    "revenueTrend": "Revenue Trend",
+    "byMuseum": "By Museum",
+    "kpiSummary": "KPI Summary",
+    "yoyComparison": "YoY Comparison"
+  },
+  "charts": {
+    "revenueTrend": "Revenue Trend",
+    "visitors": "Visitors",
+    "revenue": "Revenue",
+    "quarterly": "Quarterly",
+    "district": "District",
+    "captureRate": "Capture Rate"
+  },
+  "language": {
+    "switch": "عربي"
+  },
+  "export": {
+    "exportAll": "Export All Charts",
+    "exportSlides": "Export for Slides",
+    "exporting": "Exporting..."
+  }
+}