diff --git a/.gitignore b/.gitignore
index 321926c2..a7e10a12 100644
--- a/.gitignore
+++ b/.gitignore
@@ -105,3 +105,6 @@ htmlcov/
 
 # Poetry
 poetry.lock
+
+# Odoo DB backups (local only, not source-controlled)
+backups/
diff --git a/backend/custom_addons/encoach_ai/controllers/ai_controller.py b/backend/custom_addons/encoach_ai/controllers/ai_controller.py
index 18655c9f..fdfeca8b 100644
--- a/backend/custom_addons/encoach_ai/controllers/ai_controller.py
+++ b/backend/custom_addons/encoach_ai/controllers/ai_controller.py
@@ -24,6 +24,25 @@ def _get_json():
         return {}
 
 
+def _request_language():
+    """Return the caller's UI language from ``Accept-Language``.
+
+    The frontend ``api-client`` forwards the active i18n language (e.g. ``ar``
+    or ``en``) via this header so AI-generated natural-language strings can
+    be returned in the same language as the UI chrome.
+    """
+    try:
+        return request.httprequest.headers.get("Accept-Language", "") or ""
+    except Exception:
+        return ""
+
+
+def _openai_for_request():
+    """Construct an OpenAIService bound to the caller's UI language."""
+    from odoo.addons.encoach_ai.services.openai_service import OpenAIService
+    return OpenAIService(request.env, language=_request_language())
+
+
 class AIController(http.Controller):
     """Handles /api/ai/* endpoints consumed by frontend AI components."""
 
@@ -37,7 +56,7 @@ class AIController(http.Controller):
             return _json_response({"answer": "", "suggestions": []})
         try:
             from odoo.addons.encoach_ai.services.openai_service import OpenAIService
-            ai = OpenAIService(request.env)
+            ai = OpenAIService(request.env, language=_request_language())
             result = ai.search_with_rag(query, context=body.get("context", ""))
             return _json_response(result)
         except Exception as e:
@@ -69,7 +88,7 @@ class AIController(http.Controller):
         body = _get_json()
         try:
             from odoo.addons.encoach_ai.services.openai_service import OpenAIService
-            ai = OpenAIService(request.env)
+            ai = OpenAIService(request.env, language=_request_language())
             result = ai.generate_insights(
                 body.get("data", {}),
                 insight_type=body.get("type", "general"),
@@ -85,7 +104,7 @@ class AIController(http.Controller):
     def ai_alerts(self, **kw):
         try:
             from odoo.addons.encoach_ai.services.openai_service import OpenAIService
-            ai = OpenAIService(request.env)
+            ai = OpenAIService(request.env, language=_request_language())
             context = request.params.get("context", "dashboard")
             result = ai.generate_insights(
                 {"context": context, "request": "alerts"},
@@ -103,7 +122,7 @@ class AIController(http.Controller):
         body = _get_json()
         try:
             from odoo.addons.encoach_ai.services.openai_service import OpenAIService
-            ai = OpenAIService(request.env)
+            ai = OpenAIService(request.env, language=_request_language())
             narrative = ai.generate_report_narrative(
                 body.get("report_type", "performance"),
                 body.get("data", {}),
@@ -119,7 +138,7 @@ class AIController(http.Controller):
         body = _get_json()
         try:
             from odoo.addons.encoach_ai.services.openai_service import OpenAIService
-            ai = OpenAIService(request.env)
+            ai = OpenAIService(request.env, language=_request_language())
             result = ai.batch_optimize(
                 body.get("items", []),
                 optimization_type=body.get("type", "schedule"),
@@ -135,7 +154,7 @@ class AIController(http.Controller):
         body = _get_json()
         try:
             from odoo.addons.encoach_ai.services.openai_service import OpenAIService
-            ai = OpenAIService(request.env)
+            ai = OpenAIService(request.env, language=_request_language())
             skill = body.get("skill", "writing")
             if skill == "speaking":
                 result = ai.grade_speaking(
@@ -160,7 +179,7 @@ class AIController(http.Controller):
         body = _get_json()
         try:
             from odoo.addons.encoach_ai.services.openai_service import OpenAIService
-            ai = OpenAIService(request.env)
+            ai = OpenAIService(request.env, language=_request_language())
             result = ai.generate_content_dedup(
                 body.get("content_type", "reading_passage"),
                 body.get("brief", {}),
@@ -204,7 +223,7 @@ class AIController(http.Controller):
         body = _get_json()
         try:
             from odoo.addons.encoach_ai.services.openai_service import OpenAIService
-            ai = OpenAIService(request.env)
+            ai = OpenAIService(request.env, language=_request_language())
             messages = [
                 {"role": "system", "content": (
                     "You are an educational taxonomy expert. Suggest topics for the given domain and level. "
@@ -224,7 +243,7 @@ class AIController(http.Controller):
         body = _get_json()
         try:
             from odoo.addons.encoach_ai.services.openai_service import OpenAIService
-            ai = OpenAIService(request.env)
+            ai = OpenAIService(request.env, language=_request_language())
             messages = [
                 {"role": "system", "content": (
                     "Create a personalized learning plan. Return JSON: "
@@ -246,7 +265,7 @@ class AIController(http.Controller):
         body = _get_json()
         try:
             from odoo.addons.encoach_ai.services.openai_service import OpenAIService
-            ai = OpenAIService(request.env)
+            ai = OpenAIService(request.env, language=_request_language())
             messages = [
                 {"role": "system", "content": (
                     "Generate a course outline. Return JSON: {\"chapters\": "
@@ -264,7 +283,7 @@ class AIController(http.Controller):
         body = _get_json()
         try:
             from odoo.addons.encoach_ai.services.openai_service import OpenAIService
-            ai = OpenAIService(request.env)
+            ai = OpenAIService(request.env, language=_request_language())
             messages = [
                 {"role": "system", "content": (
                     "Generate detailed chapter content for a course. Return JSON: "
@@ -283,7 +302,7 @@ class AIController(http.Controller):
         body = _get_json()
         try:
             from odoo.addons.encoach_ai.services.openai_service import OpenAIService
-            ai = OpenAIService(request.env)
+            ai = OpenAIService(request.env, language=_request_language())
             messages = [
                 {"role": "system", "content": (
                     "Create an assessment rubric. Return JSON: {\"rubric\": "
@@ -350,7 +369,7 @@ class AIController(http.Controller):
 
         try:
             from odoo.addons.encoach_ai.services.openai_service import OpenAIService
-            ai = OpenAIService(request.env)
+            ai = OpenAIService(request.env, language=_request_language())
             if not ai.client:
                 raise RuntimeError("OpenAI not configured")
 
@@ -480,7 +499,7 @@ class AIController(http.Controller):
         body = _get_json()
         try:
             from odoo.addons.encoach_ai.services.openai_service import OpenAIService
-            ai = OpenAIService(request.env)
+            ai = OpenAIService(request.env, language=_request_language())
             has_ai = bool(ai.client)
         except Exception:
             ai, has_ai = None, False
@@ -1618,7 +1637,7 @@ class AIController(http.Controller):
         body = _get_json()
         try:
             from odoo.addons.encoach_ai.services.openai_service import OpenAIService
-            ai = OpenAIService(request.env)
+            ai = OpenAIService(request.env, language=_request_language())
             messages = [
                 {"role": "system", "content": (
                     "You are an educational materials expert. Suggest learning materials "
@@ -1639,7 +1658,7 @@ class AIController(http.Controller):
         body = _get_json()
         try:
             from odoo.addons.encoach_ai.services.openai_service import OpenAIService
-            ai = OpenAIService(request.env)
+            ai = OpenAIService(request.env, language=_request_language())
             result = ai.generate_content(
                 body.get("content_type", "explanation"),
                 {"topic_id": topic_id, **body},
diff --git a/backend/custom_addons/encoach_ai/controllers/coach_controller.py b/backend/custom_addons/encoach_ai/controllers/coach_controller.py
index 340d001f..73abcb32 100644
--- a/backend/custom_addons/encoach_ai/controllers/coach_controller.py
+++ b/backend/custom_addons/encoach_ai/controllers/coach_controller.py
@@ -23,12 +23,25 @@ def _get_json():
         return {}
 
 
+def _request_language():
+    """Read the caller's UI language from the ``Accept-Language`` header.
+
+    The frontend ``api-client`` automatically attaches this header from the
+    active i18n language so AI-generated text can be localized. Falls back
+    to English if the header is missing or malformed.
+    """
+    try:
+        return request.httprequest.headers.get("Accept-Language", "") or ""
+    except Exception:
+        return ""
+
+
 class CoachController(http.Controller):
     """Handles /api/coach/* endpoints consumed by frontend AI coaching components."""
 
     def _get_coach(self):
         from odoo.addons.encoach_ai.services.coach_service import CoachService
-        return CoachService(request.env)
+        return CoachService(request.env, language=_request_language())
 
     # ── POST /api/coach/chat — AiAssistantDrawer.tsx ──
     @http.route("/api/coach/chat", type="http", auth="none", methods=["POST"], csrf=False)
diff --git a/backend/custom_addons/encoach_ai/models/ai_feedback.py b/backend/custom_addons/encoach_ai/models/ai_feedback.py
index ea5cf00d..4a9bef2c 100644
--- a/backend/custom_addons/encoach_ai/models/ai_feedback.py
+++ b/backend/custom_addons/encoach_ai/models/ai_feedback.py
@@ -89,7 +89,7 @@ class EncoachAIFeedback(models.Model):
         "encoach.entity", ondelete="set null", index=True,
     )
     course_id = fields.Many2one(
-        "encoach.course", ondelete="set null", index=True,
+        "op.course", ondelete="set null", index=True,
     )
 
     # ------------------------------------------------------------------
diff --git a/backend/custom_addons/encoach_ai/services/coach_service.py b/backend/custom_addons/encoach_ai/services/coach_service.py
index 8b0bf2e4..5bf10cf4 100644
--- a/backend/custom_addons/encoach_ai/services/coach_service.py
+++ b/backend/custom_addons/encoach_ai/services/coach_service.py
@@ -9,10 +9,10 @@ _logger = logging.getLogger(__name__)
 class CoachService:
     """High-level AI coaching: chat, tips, explanations, writing help, study plans."""
 
-    def __init__(self, env):
+    def __init__(self, env, *, language=None):
         from .openai_service import OpenAIService
         self.env = env
-        self.ai = OpenAIService(env)
+        self.ai = OpenAIService(env, language=language)
 
     def _log(self, action, latency_ms=0, status="success", error=None, inp=None, out=None):
         try:
diff --git a/backend/custom_addons/encoach_ai/services/openai_service.py b/backend/custom_addons/encoach_ai/services/openai_service.py
index ac9b9475..2570fff9 100644
--- a/backend/custom_addons/encoach_ai/services/openai_service.py
+++ b/backend/custom_addons/encoach_ai/services/openai_service.py
@@ -12,10 +12,45 @@ except ImportError:
     _openai_mod = None
 
 
+# Human-readable names for the UI languages we support. Kept in sync with the
+# frontend i18n language set. When a user has the UI in Arabic (`ar`), we want
+# the LLM to reply in Arabic too — otherwise the user sees Arabic chrome with
+# English AI content, which is what they reported as "not translated correct".
+_LANGUAGE_NAMES = {
+    "en": "English",
+    "ar": "Arabic",
+    "fr": "French",
+    "es": "Spanish",
+    "de": "German",
+    "ru": "Russian",
+    "tr": "Turkish",
+    "fa": "Persian",
+    "ur": "Urdu",
+    "hi": "Hindi",
+    "zh": "Chinese",
+    "ja": "Japanese",
+    "ko": "Korean",
+}
+
+
+def _normalize_language(code):
+    """Pull a short ISO-639-1 code out of a raw Accept-Language-style string.
+
+    Handles ``ar``, ``ar-EG``, ``ar-EG,en;q=0.9`` and friends. Falls back to
+    ``en`` for anything we don't recognise so the AI always has a concrete
+    target language and never reverts to an empty prompt.
+    """
+    if not code:
+        return "en"
+    token = str(code).strip().split(",")[0].split(";")[0].strip().lower()
+    short = token.split("-")[0]
+    return short if short in _LANGUAGE_NAMES else "en"
+
+
 class OpenAIService:
     """Wraps the OpenAI Python SDK with Odoo settings and logging."""
 
-    def __init__(self, env):
+    def __init__(self, env, *, language=None):
         self.env = env
         self._get_param = env["ir.config_parameter"].sudo().get_param
         self.enabled = self._get_param("encoach_ai.enabled", "True").lower() in ("1", "true", "yes")
@@ -34,6 +69,49 @@ class OpenAIService:
             self.client = None
         self.model = self._get_param("encoach_ai.openai_model", "gpt-4o")
         self.fast_model = self._get_param("encoach_ai.openai_fast_model", "gpt-4o-mini")
+        self.language = _normalize_language(language)
+
+    def _language_system_message(self):
+        """Return a system message that forces the LLM to answer in the user's
+        UI language, or ``None`` for English (the model's default).
+
+        We keep the original English prompts (which are tuned for JSON
+        structure) and simply tack a language instruction on the end. This
+        preserves behaviour for ``en`` users while giving Arabic users Arabic
+        output without having to translate every prompt in the codebase.
+        """
+        if not self.language or self.language == "en":
+            return None
+        lang_name = _LANGUAGE_NAMES.get(self.language, "English")
+        return {
+            "role": "system",
+            "content": (
+                f"LOCALIZATION: Write every user-facing natural-language string "
+                f"(titles, descriptions, explanations, feedback, recommendations, "
+                f"suggestions, motivation, narrative) in {lang_name}. "
+                "Keep JSON keys, enum values (e.g. 'info', 'warning', 'critical', "
+                "'TRUE', 'FALSE', 'NOT GIVEN'), CEFR band codes (A1-C2), band numbers, "
+                "and identifiers in their original form. Do not translate rubric "
+                "category names that appear as JSON keys."
+            ),
+        }
+
+    def _inject_language(self, messages):
+        """Prepend the localization instruction after the existing system
+        prompt(s) so it doesn't displace the structural prompt but is still
+        heeded by the model."""
+        lang_msg = self._language_system_message()
+        if not lang_msg:
+            return messages
+        messages = list(messages)
+        # Find the index of the last system message so we append after it.
+        last_system = -1
+        for i, m in enumerate(messages):
+            if isinstance(m, dict) and m.get("role") == "system":
+                last_system = i
+        insert_at = last_system + 1 if last_system >= 0 else 0
+        messages.insert(insert_at, lang_msg)
+        return messages
 
     def _log(self, action, model, usage, latency, status="success", error=None, inp=None, out=None):
         try:
@@ -82,6 +160,7 @@ class OpenAIService:
         if not self.client:
             raise RuntimeError("OpenAI not configured — set API key in AI Settings")
         model = model or self.model
+        messages = self._inject_language(messages)
         t0 = time.time()
         try:
             def _call():
@@ -108,6 +187,7 @@ class OpenAIService:
         if not self.client:
             raise RuntimeError("OpenAI not configured — set API key in AI Settings")
         model = model or self.model
+        messages = self._inject_language(messages)
         t0 = time.time()
         try:
             def _call():
diff --git a/frontend/index.html b/frontend/index.html
index ea5a3388..173935e1 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -17,7 +17,7 @@
     <meta property="og:type" content="website" />
     <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;700&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 497f4fad..0bd05df2 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -80,6 +80,7 @@
         "lovable-tagger": "^1.1.13",
         "postcss": "^8.5.6",
         "tailwindcss": "^3.4.17",
+        "tailwindcss-rtl": "^0.9.0",
         "typescript": "^5.8.3",
         "typescript-eslint": "^8.38.0",
         "vite": "^5.4.19",
@@ -7300,6 +7301,13 @@
         "tailwindcss": ">=3.0.0 || insiders"
       }
     },
+    "node_modules/tailwindcss-rtl": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss-rtl/-/tailwindcss-rtl-0.9.0.tgz",
+      "integrity": "sha512-y7yC8QXjluDBEFMSX33tV6xMYrf0B3sa+tOB5JSQb6/G6laBU313a+Z+qxu55M1Qyn8tDMttjomsA8IsJD+k+w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tailwindcss/node_modules/postcss-selector-parser": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 230daf3a..eac4bdb1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -87,6 +87,7 @@
     "lovable-tagger": "^1.1.13",
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.17",
+    "tailwindcss-rtl": "^0.9.0",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.38.0",
     "vite": "^5.4.19",
diff --git a/frontend/src/components/AdminLmsLayout.tsx b/frontend/src/components/AdminLmsLayout.tsx
index cc95573f..b734e537 100644
--- a/frontend/src/components/AdminLmsLayout.tsx
+++ b/frontend/src/components/AdminLmsLayout.tsx
@@ -34,115 +34,123 @@ import {
   Library, Activity, Warehouse, UserCog, Sparkles,
 } from "lucide-react";
 import React from "react";
+import { useTranslation } from "react-i18next";
 
 // ============= Navigation Config =============
-interface NavItem { title: string; url: string; icon: LucideIcon }
+// Items store i18n keys (`titleKey`) rather than literal strings so Arabic
+// language switches update the sidebar without the component having to
+// re-mount.
+interface NavItem { titleKey: string; url: string; icon: LucideIcon }
 
 const overviewItems: NavItem[] = [
-  { title: "Admin Dashboard", url: "/admin/dashboard", icon: LayoutDashboard },
-  { title: "Platform Dashboard", url: "/admin/platform", icon: BarChart3 },
+  { titleKey: "nav.adminDashboard", url: "/admin/dashboard", icon: LayoutDashboard },
+  { titleKey: "nav.platformDashboard", url: "/admin/platform", icon: BarChart3 },
 ];
 
 const lmsItems: NavItem[] = [
-  { title: "Courses", url: "/admin/courses", icon: BookOpen },
-  { title: "Students", url: "/admin/students", icon: Users },
-  { title: "Teachers", url: "/admin/teachers", icon: GraduationCap },
-  { title: "Batches", url: "/admin/batches", icon: Layers },
-  { title: "Timetable", url: "/admin/timetable", icon: Calendar },
-  { title: "Reports", url: "/admin/reports", icon: BarChart3 },
+  { titleKey: "nav.courses", url: "/admin/courses", icon: BookOpen },
+  { titleKey: "nav.students", url: "/admin/students", icon: Users },
+  { titleKey: "nav.teachers", url: "/admin/teachers", icon: GraduationCap },
+  { titleKey: "nav.batches", url: "/admin/batches", icon: Layers },
+  { titleKey: "nav.timetable", url: "/admin/timetable", icon: Calendar },
+  { titleKey: "nav.reports", url: "/admin/reports", icon: BarChart3 },
 ];
 
 const academicItems: NavItem[] = [
-  { title: "Assignments", url: "/admin/assignments", icon: ClipboardList },
-  { title: "Exams List", url: "/admin/examsList", icon: FileText },
-  { title: "Exam Structures", url: "/admin/exam-structures", icon: Layers },
-  { title: "Rubrics", url: "/admin/rubrics", icon: BookOpen },
-  { title: "Generation", url: "/admin/generation", icon: Wand2 },
-  { title: "Review Queue", url: "/admin/exam/review-queue", icon: Sparkles },
-  { title: "AI Prompts", url: "/admin/ai/prompts", icon: Wand2 },
-  { title: "AI Feedback", url: "/admin/ai/feedback", icon: Sparkles },
-  { title: "Approval Workflows", url: "/admin/approval-workflows", icon: GitBranch },
+  { titleKey: "nav.assignments", url: "/admin/assignments", icon: ClipboardList },
+  { titleKey: "nav.examsList", url: "/admin/examsList", icon: FileText },
+  { titleKey: "nav.examStructures", url: "/admin/exam-structures", icon: Layers },
+  { titleKey: "nav.rubrics", url: "/admin/rubrics", icon: BookOpen },
+  { titleKey: "nav.generation", url: "/admin/generation", icon: Wand2 },
+  { titleKey: "nav.reviewQueue", url: "/admin/exam/review-queue", icon: Sparkles },
+  { titleKey: "nav.aiPrompts", url: "/admin/ai/prompts", icon: Wand2 },
+  { titleKey: "nav.aiFeedback", url: "/admin/ai/feedback", icon: Sparkles },
+  { titleKey: "nav.approvalWorkflows", url: "/admin/approval-workflows", icon: GitBranch },
 ];
 
 const adaptiveItems: NavItem[] = [
-  { title: "Taxonomy", url: "/admin/taxonomy", icon: Target },
-  { title: "Resources", url: "/admin/resources", icon: FolderOpen },
+  { titleKey: "nav.taxonomy", url: "/admin/taxonomy", icon: Target },
+  { titleKey: "nav.resources", url: "/admin/resources", icon: FolderOpen },
 ];
 
 const institutionalItems: NavItem[] = [
-  { title: "Academic Years", url: "/admin/academic-years", icon: CalendarDays },
-  { title: "Departments", url: "/admin/departments", icon: Landmark },
-  { title: "Admissions", url: "/admin/admissions", icon: UserPlus },
-  { title: "Admission Register", url: "/admin/admission-register", icon: ScrollText },
-  { title: "Exam Sessions", url: "/admin/exam-sessions", icon: FileText },
-  { title: "Marksheets", url: "/admin/marksheets", icon: Award },
-  { title: "Student Leave", url: "/admin/student-leave", icon: CalendarOff },
-  { title: "Fees & Payments", url: "/admin/fees", icon: DollarSign },
-  { title: "Lessons", url: "/admin/lessons", icon: BookMarked },
-  { title: "Gradebook", url: "/admin/gradebook", icon: BarChartHorizontal },
-  { title: "Student Progress", url: "/admin/student-progress", icon: TrendingUp },
-  { title: "Library", url: "/admin/library", icon: Library },
-  { title: "Activities", url: "/admin/activities", icon: Activity },
-  { title: "Facilities", url: "/admin/facilities", icon: Warehouse },
+  { titleKey: "nav.academicYears", url: "/admin/academic-years", icon: CalendarDays },
+  { titleKey: "nav.departments", url: "/admin/departments", icon: Landmark },
+  { titleKey: "nav.admissions", url: "/admin/admissions", icon: UserPlus },
+  { titleKey: "nav.admissionRegister", url: "/admin/admission-register", icon: ScrollText },
+  { titleKey: "nav.examSessions", url: "/admin/exam-sessions", icon: FileText },
+  { titleKey: "nav.marksheets", url: "/admin/marksheets", icon: Award },
+  { titleKey: "nav.studentLeave", url: "/admin/student-leave", icon: CalendarOff },
+  { titleKey: "nav.fees", url: "/admin/fees", icon: DollarSign },
+  { titleKey: "nav.lessons", url: "/admin/lessons", icon: BookMarked },
+  { titleKey: "nav.gradebook", url: "/admin/gradebook", icon: BarChartHorizontal },
+  { titleKey: "nav.studentProgress", url: "/admin/student-progress", icon: TrendingUp },
+  { titleKey: "nav.library", url: "/admin/library", icon: Library },
+  { titleKey: "nav.activities", url: "/admin/activities", icon: Activity },
+  { titleKey: "nav.facilities", url: "/admin/facilities", icon: Warehouse },
 ];
 
 const managementItems: NavItem[] = [
-  { title: "Users", url: "/admin/users", icon: Users },
-  { title: "Entities", url: "/admin/entities", icon: Building2 },
-  { title: "Classrooms", url: "/admin/classrooms", icon: GraduationCap },
-  { title: "User Roles", url: "/admin/user-roles", icon: UserCog },
-  { title: "Roles & Permissions", url: "/admin/roles-permissions", icon: Settings },
-  { title: "Authority Matrix", url: "/admin/authority-matrix", icon: Workflow },
+  { titleKey: "nav.users", url: "/admin/users", icon: Users },
+  { titleKey: "nav.entities", url: "/admin/entities", icon: Building2 },
+  { titleKey: "nav.classrooms", url: "/admin/classrooms", icon: GraduationCap },
+  { titleKey: "nav.userRoles", url: "/admin/user-roles", icon: UserCog },
+  { titleKey: "nav.rolesPermissions", url: "/admin/roles-permissions", icon: Settings },
+  { titleKey: "nav.authorityMatrix", url: "/admin/authority-matrix", icon: Workflow },
 ];
 
 const reportItems: NavItem[] = [
-  { title: "Student Performance", url: "/admin/student-performance", icon: BarChart3 },
-  { title: "Stats Corporate", url: "/admin/stats-corporate", icon: Building2 },
-  { title: "Record", url: "/admin/record", icon: History },
+  { titleKey: "nav.studentPerformance", url: "/admin/student-performance", icon: BarChart3 },
+  { titleKey: "nav.statsCorporate", url: "/admin/stats-corporate", icon: Building2 },
+  { titleKey: "nav.record", url: "/admin/record", icon: History },
 ];
 
 const trainingItems: NavItem[] = [
-  { title: "Vocabulary", url: "/admin/training/vocabulary", icon: BookA },
-  { title: "Grammar", url: "/admin/training/grammar", icon: PenTool },
+  { titleKey: "nav.vocabulary", url: "/admin/training/vocabulary", icon: BookA },
+  { titleKey: "nav.grammar", url: "/admin/training/grammar", icon: PenTool },
 ];
 
 const configItems: NavItem[] = [
-  { title: "FAQ Manager", url: "/admin/faq", icon: FaqIcon },
-  { title: "Notification Rules", url: "/admin/notification-rules", icon: Bell },
-  { title: "Approval Config", url: "/admin/approval-config", icon: Workflow },
+  { titleKey: "nav.faqManager", url: "/admin/faq", icon: FaqIcon },
+  { titleKey: "nav.notificationRules", url: "/admin/notification-rules", icon: Bell },
+  { titleKey: "nav.approvalConfig", url: "/admin/approval-config", icon: Workflow },
 ];
 
 const supportItems: NavItem[] = [
-  { title: "Payment Record", url: "/admin/payment-record", icon: CreditCard },
-  { title: "Tickets", url: "/admin/tickets", icon: Ticket },
-  { title: "Settings", url: "/admin/settings-platform", icon: Settings },
+  { titleKey: "nav.paymentRecord", url: "/admin/payment-record", icon: CreditCard },
+  { titleKey: "nav.tickets", url: "/admin/tickets", icon: Ticket },
+  { titleKey: "nav.settings", url: "/admin/settings-platform", icon: Settings },
 ];
 
 // ============= Reusable sidebar group =============
-function SidebarNavGroup({ label, items }: { label: string; items: NavItem[] }) {
+function SidebarNavGroup({ labelKey, items }: { labelKey: string; items: NavItem[] }) {
   const { state } = useSidebar();
+  const { t } = useTranslation();
   const collapsed = state === "collapsed";
 
   return (
     <SidebarGroup>
-      <SidebarGroupLabel>{label}</SidebarGroupLabel>
+      <SidebarGroupLabel>{t(labelKey)}</SidebarGroupLabel>
       <SidebarGroupContent>
         <SidebarMenu>
-          {items.map((item) => (
-            <SidebarMenuItem key={item.url}>
-              <SidebarMenuButton asChild tooltip={item.title}>
-                <NavLink
-                  to={item.url}
-                  end={item.url.endsWith("/dashboard") || item.url.endsWith("/platform")}
-                  className="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-sidebar-foreground hover:bg-sidebar-accent transition-colors"
-                  activeClassName="bg-sidebar-accent text-sidebar-accent-foreground font-medium"
-                >
-                  <item.icon className="h-4 w-4 shrink-0" />
-                  {!collapsed && <span>{item.title}</span>}
-                </NavLink>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          ))}
+          {items.map((item) => {
+            const label = t(item.titleKey);
+            return (
+              <SidebarMenuItem key={item.url}>
+                <SidebarMenuButton asChild tooltip={label}>
+                  <NavLink
+                    to={item.url}
+                    end={item.url.endsWith("/dashboard") || item.url.endsWith("/platform")}
+                    className="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-sidebar-foreground hover:bg-sidebar-accent transition-colors"
+                    activeClassName="bg-sidebar-accent text-sidebar-accent-foreground font-medium"
+                  >
+                    <item.icon className="h-4 w-4 shrink-0" />
+                    {!collapsed && <span>{label}</span>}
+                  </NavLink>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            );
+          })}
         </SidebarMenu>
       </SidebarGroupContent>
     </SidebarGroup>
@@ -150,42 +158,52 @@ function SidebarNavGroup({ label, items }: { label: string; items: NavItem[] })
 }
 
 // ============= Breadcrumbs =============
-const routeLabels: Record<string, string> = {
-  admin: "Admin", dashboard: "Dashboard", platform: "Platform", courses: "Courses",
-  students: "Students", teachers: "Teachers", batches: "Batches", timetable: "Timetable",
-  reports: "Reports", assignments: "Assignments", examsList: "Exams List",
-  "exam-structures": "Exam Structures", rubrics: "Rubrics", generation: "Generation",
-  "review-queue": "Review Queue", review: "Review", prompts: "AI Prompts", ai: "AI",
-  feedback: "Feedback",
-  "approval-workflows": "Approval Workflows", users: "Users", entities: "Entities",
-  classrooms: "Classrooms", "student-performance": "Student Performance",
-  "stats-corporate": "Stats Corporate", record: "Record", training: "Training",
-  vocabulary: "Vocabulary", grammar: "Grammar", "payment-record": "Payment Record",
-  tickets: "Tickets", "settings-platform": "Settings", settings: "Settings",
-  profile: "Profile", exam: "Exam",
-  "academic-years": "Academic Years", departments: "Departments",
-  admissions: "Admissions", "admission-register": "Admission Register",
-  "exam-sessions": "Exam Sessions", marksheets: "Marksheets",
-  faq: "FAQ Manager", "notification-rules": "Notification Rules",
-  "approval-config": "Approval Config",
-  "student-leave": "Student Leave", fees: "Fees & Payments", lessons: "Lessons",
-  gradebook: "Gradebook", "student-progress": "Student Progress",
-  library: "Library", activities: "Activities", facilities: "Facilities",
+// Map URL segments to i18n keys so breadcrumbs follow the active locale.
+// Segments without an entry fall back to a Title-cased version of the slug.
+const routeLabelKeys: Record<string, string> = {
+  admin: "breadcrumb.admin", dashboard: "breadcrumb.dashboard",
+  platform: "breadcrumb.platform", courses: "nav.courses",
+  students: "nav.students", teachers: "nav.teachers", batches: "nav.batches",
+  timetable: "nav.timetable", reports: "nav.reports",
+  assignments: "nav.assignments", examsList: "nav.examsList",
+  "exam-structures": "nav.examStructures", rubrics: "nav.rubrics",
+  generation: "nav.generation", "review-queue": "nav.reviewQueue",
+  review: "breadcrumb.review", prompts: "nav.aiPrompts", ai: "breadcrumb.ai",
+  feedback: "breadcrumb.feedback",
+  "approval-workflows": "nav.approvalWorkflows", users: "nav.users",
+  entities: "nav.entities", classrooms: "nav.classrooms",
+  "student-performance": "nav.studentPerformance",
+  "stats-corporate": "nav.statsCorporate", record: "nav.record",
+  training: "sidebarGroup.training", vocabulary: "nav.vocabulary",
+  grammar: "nav.grammar", "payment-record": "nav.paymentRecord",
+  tickets: "nav.tickets", "settings-platform": "nav.settings",
+  settings: "nav.settings", profile: "nav.profile", exam: "breadcrumb.exam",
+  "academic-years": "nav.academicYears", departments: "nav.departments",
+  admissions: "nav.admissions", "admission-register": "nav.admissionRegister",
+  "exam-sessions": "nav.examSessions", marksheets: "nav.marksheets",
+  faq: "nav.faqManager", "notification-rules": "nav.notificationRules",
+  "approval-config": "nav.approvalConfig",
+  "student-leave": "nav.studentLeave", fees: "nav.fees",
+  lessons: "nav.lessons", gradebook: "nav.gradebook",
+  "student-progress": "nav.studentProgress", library: "nav.library",
+  activities: "nav.activities", facilities: "nav.facilities",
 };
 
 function AppBreadcrumbs() {
   const location = useLocation();
+  const { t } = useTranslation();
   const segments = location.pathname.split("/").filter(Boolean);
 
   return (
     <Breadcrumb>
       <BreadcrumbList>
         <BreadcrumbItem>
-          <BreadcrumbLink asChild><Link to="/admin/dashboard">Home</Link></BreadcrumbLink>
+          <BreadcrumbLink asChild><Link to="/admin/dashboard">{t("common.home")}</Link></BreadcrumbLink>
         </BreadcrumbItem>
         {segments.map((seg, i) => {
           const path = "/" + segments.slice(0, i + 1).join("/");
-          const label = routeLabels[seg] || seg.charAt(0).toUpperCase() + seg.slice(1);
+          const key = routeLabelKeys[seg];
+          const label = key ? t(key) : seg.charAt(0).toUpperCase() + seg.slice(1);
           const isLast = i === segments.length - 1;
           return (
             <React.Fragment key={path}>
@@ -205,6 +223,7 @@ function AppBreadcrumbs() {
 export default function AdminLmsLayout() {
   const { user, logout } = useAuth();
   const navigate = useNavigate();
+  const { t } = useTranslation();
 
   const initials = user?.name?.split(" ").map(w => w[0]).join("").slice(0, 2).toUpperCase() ?? "??";
 
@@ -220,7 +239,7 @@ export default function AdminLmsLayout() {
         <div className="flex-1 flex flex-col min-w-0">
           <header className="h-14 border-b bg-card flex items-center justify-between px-4 shrink-0">
             <div className="flex items-center gap-3">
-              <SidebarTrigger />
+              <SidebarTrigger aria-label={t("chrome.toggleSidebar")} />
               <AppBreadcrumbs />
             </div>
             <AiSearchBar />
@@ -228,7 +247,7 @@ export default function AdminLmsLayout() {
               <LanguageToggle />
               <ThemeToggle />
               <NotificationDropdown />
-              <Button variant="ghost" size="icon" onClick={() => navigate("/admin/tickets")} className="text-muted-foreground hover:text-foreground">
+              <Button variant="ghost" size="icon" aria-label={t("chrome.ticketsTooltip")} onClick={() => navigate("/admin/tickets")} className="text-muted-foreground hover:text-foreground">
                 <Ticket className="h-4 w-4" />
               </Button>
               <DropdownMenu>
@@ -241,19 +260,19 @@ export default function AdminLmsLayout() {
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" className="w-48">
                   <div className="px-3 py-2">
-                    <p className="text-sm font-medium">{user?.name ?? "User"}</p>
+                    <p className="text-sm font-medium">{user?.name ?? t("userMenu.userFallback")}</p>
                     <p className="text-xs text-muted-foreground">{user?.email ?? ""}</p>
                   </div>
                   <DropdownMenuSeparator />
                   <DropdownMenuItem onClick={() => navigate("/admin/profile")}>
-                    <User className="mr-2 h-4 w-4" /> Profile
+                    <User className="me-2 h-4 w-4" /> {t("userMenu.profile")}
                   </DropdownMenuItem>
                   <DropdownMenuItem onClick={() => navigate("/admin/settings-platform")}>
-                    <Settings className="mr-2 h-4 w-4" /> Settings
+                    <Settings className="me-2 h-4 w-4" /> {t("userMenu.settings")}
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
                   <DropdownMenuItem onClick={handleLogout}>
-                    <LogOut className="mr-2 h-4 w-4" /> Logout
+                    <LogOut className="me-2 h-4 w-4" /> {t("userMenu.logout")}
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
@@ -267,10 +286,10 @@ export default function AdminLmsLayout() {
       <AiAssistantDrawer />
       <Link
         to="/admin/tickets"
-        className="fixed bottom-6 right-6 z-50 flex items-center gap-2 rounded-full bg-primary px-4 py-2.5 text-primary-foreground shadow-lg hover:opacity-90 transition-opacity"
+        className="fixed bottom-6 end-6 z-50 flex items-center gap-2 rounded-full bg-primary px-4 py-2.5 text-primary-foreground shadow-lg hover:opacity-90 transition-opacity"
       >
         <HelpCircle className="h-4 w-4" />
-        <span className="text-sm font-medium">Need help?</span>
+        <span className="text-sm font-medium">{t("chrome.needHelp")}</span>
       </Link>
     </SidebarProvider>
   );
@@ -282,25 +301,27 @@ function AdminSidebar() {
   const collapsed = state === "collapsed";
   const { user } = useAuth();
   const { hasAnyPermission, isAdmin } = usePermissions();
+  const { t, i18n } = useTranslation();
+  const sidebarSide = i18n.dir() === "rtl" ? "right" : "left";
 
   const showManagement = isAdmin || hasAnyPermission(["view_entities", "view_students", "view_teachers"]);
   const showReports = isAdmin || hasAnyPermission(["view_statistics", "view_student_performance", "view_entity_statistics"]);
   const showPayments = isAdmin || hasAnyPermission(["view_payment_record", "pay_entity"]);
 
   return (
-    <Sidebar collapsible="icon">
+    <Sidebar side={sidebarSide} collapsible="icon">
       <SidebarHeader className="p-4">
         <div className="flex items-center gap-2">
           {collapsed ? (
             <img
               src="/logo.png"
-              alt="EnCoach"
+              alt={t("chrome.adminAlt")}
               className="h-9 w-9 shrink-0 rounded-lg object-contain"
             />
           ) : (
             <img
               src="/logo.png"
-              alt="EnCoach — Unlock your potential with AI powered platform"
+              alt={t("chrome.adminAltLong")}
               className="h-14 w-auto shrink-0 object-contain"
             />
           )}
@@ -308,47 +329,50 @@ function AdminSidebar() {
       </SidebarHeader>
       <SidebarSeparator />
       <SidebarContent>
-        <SidebarNavGroup label="Overview" items={overviewItems} />
-        <SidebarNavGroup label="LMS" items={lmsItems} />
-        <SidebarNavGroup label="Adaptive Learning" items={adaptiveItems} />
-        <SidebarNavGroup label="Institutional" items={institutionalItems} />
-        <SidebarNavGroup label="Academic" items={academicItems} />
-        {showManagement && <SidebarNavGroup label="Management" items={managementItems} />}
-        {showReports && <SidebarNavGroup label="Reports" items={reportItems} />}
-        <SidebarNavGroup label="Configuration" items={configItems} />
+        <SidebarNavGroup labelKey="sidebarGroup.overview" items={overviewItems} />
+        <SidebarNavGroup labelKey="sidebarGroup.lms" items={lmsItems} />
+        <SidebarNavGroup labelKey="sidebarGroup.adaptiveLearning" items={adaptiveItems} />
+        <SidebarNavGroup labelKey="sidebarGroup.institutional" items={institutionalItems} />
+        <SidebarNavGroup labelKey="sidebarGroup.academic" items={academicItems} />
+        {showManagement && <SidebarNavGroup labelKey="sidebarGroup.management" items={managementItems} />}
+        {showReports && <SidebarNavGroup labelKey="sidebarGroup.reports" items={reportItems} />}
+        <SidebarNavGroup labelKey="sidebarGroup.configuration" items={configItems} />
 
         <SidebarGroup>
           <Collapsible defaultOpen className="group/collapsible">
             <SidebarGroupLabel asChild>
               <CollapsibleTrigger className="flex w-full items-center justify-between">
-                Training
+                {t("sidebarGroup.training")}
                 {!collapsed && <ChevronDown className="h-4 w-4 transition-transform group-data-[state=open]/collapsible:rotate-180" />}
               </CollapsibleTrigger>
             </SidebarGroupLabel>
             <CollapsibleContent>
               <SidebarGroupContent>
                 <SidebarMenu>
-                  {trainingItems.map((item) => (
-                    <SidebarMenuItem key={item.url}>
-                      <SidebarMenuButton asChild tooltip={item.title}>
-                        <NavLink
-                          to={item.url}
-                          className="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-sidebar-foreground hover:bg-sidebar-accent transition-colors"
-                          activeClassName="bg-sidebar-accent text-sidebar-accent-foreground font-medium"
-                        >
-                          <item.icon className="h-4 w-4 shrink-0" />
-                          {!collapsed && <span>{item.title}</span>}
-                        </NavLink>
-                      </SidebarMenuButton>
-                    </SidebarMenuItem>
-                  ))}
+                  {trainingItems.map((item) => {
+                    const label = t(item.titleKey);
+                    return (
+                      <SidebarMenuItem key={item.url}>
+                        <SidebarMenuButton asChild tooltip={label}>
+                          <NavLink
+                            to={item.url}
+                            className="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-sidebar-foreground hover:bg-sidebar-accent transition-colors"
+                            activeClassName="bg-sidebar-accent text-sidebar-accent-foreground font-medium"
+                          >
+                            <item.icon className="h-4 w-4 shrink-0" />
+                            {!collapsed && <span>{label}</span>}
+                          </NavLink>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    );
+                  })}
                 </SidebarMenu>
               </SidebarGroupContent>
             </CollapsibleContent>
           </Collapsible>
         </SidebarGroup>
 
-        <SidebarNavGroup label="Support" items={showPayments ? supportItems : supportItems.filter(i => i.url !== "/admin/payment-record")} />
+        <SidebarNavGroup labelKey="sidebarGroup.support" items={showPayments ? supportItems : supportItems.filter(i => i.url !== "/admin/payment-record")} />
       </SidebarContent>
       <SidebarSeparator />
       <SidebarFooter className="p-3">
@@ -358,7 +382,7 @@ function AdminSidebar() {
           </div>
           {!collapsed && (
             <div className="flex flex-col min-w-0">
-              <span className="text-sm font-medium truncate text-sidebar-foreground">{user?.name ?? "User"}</span>
+              <span className="text-sm font-medium truncate text-sidebar-foreground">{user?.name ?? t("userMenu.userFallback")}</span>
               <span className="text-xs text-muted-foreground truncate">{user?.email ?? ""}</span>
             </div>
           )}
diff --git a/frontend/src/components/AppSidebar.tsx b/frontend/src/components/AppSidebar.tsx
index f557045b..9f0bfb9f 100644
--- a/frontend/src/components/AppSidebar.tsx
+++ b/frontend/src/components/AppSidebar.tsx
@@ -5,6 +5,7 @@ import {
 } from "lucide-react";
 import { NavLink } from "@/components/NavLink";
 import { useLocation } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import {
   Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent,
   SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem,
@@ -81,9 +82,11 @@ export function AppSidebar() {
   const { state } = useSidebar();
   const collapsed = state === "collapsed";
   const location = useLocation();
+  const { i18n } = useTranslation();
+  const sidebarSide = i18n.dir() === "rtl" ? "right" : "left";
 
   return (
-    <Sidebar collapsible="icon">
+    <Sidebar side={sidebarSide} collapsible="icon">
       <SidebarHeader className="p-4">
         <div className="flex items-center gap-2">
           <div className="h-8 w-8 rounded-lg bg-primary flex items-center justify-center shrink-0">
diff --git a/frontend/src/components/ErrorBoundary.tsx b/frontend/src/components/ErrorBoundary.tsx
index 5bb83327..18556978 100644
--- a/frontend/src/components/ErrorBoundary.tsx
+++ b/frontend/src/components/ErrorBoundary.tsx
@@ -1,6 +1,7 @@
 import { Component, type ErrorInfo, type ReactNode } from "react";
+import { withTranslation, type WithTranslation } from "react-i18next";
 
-interface Props {
+interface Props extends WithTranslation {
   children: ReactNode;
   fallback?: ReactNode;
 }
@@ -10,7 +11,12 @@ interface State {
   error: Error | null;
 }
 
-export class ErrorBoundary extends Component<Props, State> {
+/**
+ * Error boundary is a classical React class component, so we bridge it to
+ * i18next via the `withTranslation` HOC. That keeps the tree-shaking of
+ * `react-i18next`'s hook path intact while giving us a `t` prop here.
+ */
+class ErrorBoundaryInner extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -27,6 +33,7 @@ export class ErrorBoundary extends Component<Props, State> {
   render() {
     if (this.state.hasError) {
       if (this.props.fallback) return this.props.fallback;
+      const { t } = this.props;
 
       return (
         <div className="min-h-screen flex items-center justify-center bg-background p-6">
@@ -36,13 +43,13 @@ export class ErrorBoundary extends Component<Props, State> {
                 <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
               </svg>
             </div>
-            <h2 className="text-xl font-semibold">Something went wrong</h2>
+            <h2 className="text-xl font-semibold">{t("errors.somethingWrong")}</h2>
             <p className="text-muted-foreground text-sm">
-              An unexpected error occurred. Please try refreshing the page.
+              {t("errors.unexpectedDescription")}
             </p>
             {this.state.error && (
-              <details className="text-left text-xs text-muted-foreground bg-muted rounded-lg p-3">
-                <summary className="cursor-pointer font-medium">Error details</summary>
+              <details className="text-start text-xs text-muted-foreground bg-muted rounded-lg p-3">
+                <summary className="cursor-pointer font-medium">{t("errors.errorDetails")}</summary>
                 <pre className="mt-2 whitespace-pre-wrap break-words">{this.state.error.message}</pre>
               </details>
             )}
@@ -50,7 +57,7 @@ export class ErrorBoundary extends Component<Props, State> {
               onClick={() => window.location.reload()}
               className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
             >
-              Refresh Page
+              {t("errors.refreshPage")}
             </button>
           </div>
         </div>
@@ -60,3 +67,5 @@ export class ErrorBoundary extends Component<Props, State> {
     return this.props.children;
   }
 }
+
+export const ErrorBoundary = withTranslation()(ErrorBoundaryInner);
diff --git a/frontend/src/components/LanguageToggle.tsx b/frontend/src/components/LanguageToggle.tsx
index ae6d1f5a..b27cc589 100644
--- a/frontend/src/components/LanguageToggle.tsx
+++ b/frontend/src/components/LanguageToggle.tsx
@@ -12,18 +12,23 @@ import {
 import { SUPPORTED_LANGS, type SupportedLang } from "@/i18n";
 
 export function LanguageToggle() {
-  const { i18n } = useTranslation();
+  const { i18n, t } = useTranslation();
   const current = (i18n.language?.split("-")[0] || "en") as SupportedLang;
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon" aria-label="Change language">
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label={t("language.change")}
+          title={t("language.change")}
+        >
           <Languages className="h-5 w-5" />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
-        <DropdownMenuLabel>Language</DropdownMenuLabel>
+        <DropdownMenuLabel>{t("language.label")}</DropdownMenuLabel>
         {SUPPORTED_LANGS.map((lang) => (
           <DropdownMenuCheckboxItem
             key={lang.code}
diff --git a/frontend/src/components/NotificationDropdown.tsx b/frontend/src/components/NotificationDropdown.tsx
index caa9f8de..d1c5c7e1 100644
--- a/frontend/src/components/NotificationDropdown.tsx
+++ b/frontend/src/components/NotificationDropdown.tsx
@@ -1,35 +1,50 @@
 import { Bell } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu, DropdownMenuContent, DropdownMenuItem,
   DropdownMenuSeparator, DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+
 export default function NotificationDropdown() {
+  const { t } = useTranslation();
   const notifications: { id: string; title: string; message: string; time: string; read: boolean; type: string }[] = [];
   const unread = notifications.filter((n) => !n.read).length;
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon" className="relative text-muted-foreground hover:text-foreground">
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label={t("notifications.ariaLabel")}
+          title={t("notifications.ariaLabel")}
+          className="relative text-muted-foreground hover:text-foreground"
+        >
           <Bell className="h-4 w-4" />
           {unread > 0 && (
-            <span className="absolute -top-0.5 -right-0.5 h-4 w-4 rounded-full bg-destructive text-[10px] font-bold text-destructive-foreground flex items-center justify-center">
+            <span className="absolute -top-0.5 -end-0.5 h-4 w-4 rounded-full bg-destructive text-[10px] font-bold text-destructive-foreground flex items-center justify-center">
               {unread}
             </span>
           )}
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-80">
-        <div className="px-3 py-2 font-semibold text-sm">Notifications</div>
+        <div className="px-3 py-2 font-semibold text-sm">{t("notifications.title")}</div>
         <DropdownMenuSeparator />
-        {notifications.slice(0, 4).map((n) => (
-          <DropdownMenuItem key={n.id} className="flex flex-col items-start gap-0.5 py-2.5 cursor-pointer">
-            <span className={`text-sm font-medium ${!n.read ? "text-foreground" : "text-muted-foreground"}`}>{n.title}</span>
-            <span className="text-xs text-muted-foreground line-clamp-1">{n.message}</span>
-            <span className="text-[10px] text-muted-foreground/70">{n.time}</span>
-          </DropdownMenuItem>
-        ))}
+        {notifications.length === 0 ? (
+          <div className="px-3 py-6 text-center text-xs text-muted-foreground">
+            {t("notifications.empty")}
+          </div>
+        ) : (
+          notifications.slice(0, 4).map((n) => (
+            <DropdownMenuItem key={n.id} className="flex flex-col items-start gap-0.5 py-2.5 cursor-pointer">
+              <span className={`text-sm font-medium ${!n.read ? "text-foreground" : "text-muted-foreground"}`}>{n.title}</span>
+              <span className="text-xs text-muted-foreground line-clamp-1">{n.message}</span>
+              <span className="text-[10px] text-muted-foreground/70">{n.time}</span>
+            </DropdownMenuItem>
+          ))
+        )}
       </DropdownMenuContent>
     </DropdownMenu>
   );
diff --git a/frontend/src/components/RoleLayout.tsx b/frontend/src/components/RoleLayout.tsx
index 57c94001..d0698840 100644
--- a/frontend/src/components/RoleLayout.tsx
+++ b/frontend/src/components/RoleLayout.tsx
@@ -1,4 +1,5 @@
-import { Outlet, Link, useNavigate, useLocation } from "react-router-dom";
+import { Outlet, useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
 import {
   Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent,
@@ -15,17 +16,21 @@ import {
   DropdownMenu, DropdownMenuContent, DropdownMenuItem,
   DropdownMenuSeparator, DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { LogOut, User, Settings, LucideIcon } from "lucide-react";
-import React from "react";
+import { LogOut, User, LucideIcon } from "lucide-react";
 
+/**
+ * Non-admin portal shell (student / teacher / etc.). Nav items hold i18n
+ * keys (`titleKey` / `labelKey`) rather than literal strings so they react
+ * to language changes without re-mounting the layout.
+ */
 export interface NavItem {
-  title: string;
+  titleKey: string;
   url: string;
   icon: LucideIcon;
 }
 
 export interface NavGroup {
-  label: string;
+  labelKey: string;
   items: NavItem[];
 }
 
@@ -36,30 +41,34 @@ interface RoleLayoutProps {
 
 function SidebarNav({ navGroups }: { navGroups: NavGroup[] }) {
   const { state } = useSidebar();
+  const { t } = useTranslation();
   const collapsed = state === "collapsed";
 
   return (
     <>
       {navGroups.map((group) => (
-        <SidebarGroup key={group.label}>
-          <SidebarGroupLabel>{group.label}</SidebarGroupLabel>
+        <SidebarGroup key={group.labelKey}>
+          <SidebarGroupLabel>{t(group.labelKey)}</SidebarGroupLabel>
           <SidebarGroupContent>
             <SidebarMenu>
-              {group.items.map((item) => (
-                <SidebarMenuItem key={item.url}>
-                  <SidebarMenuButton asChild tooltip={item.title}>
-                    <NavLink
-                      to={item.url}
-                      end={item.url.endsWith("/dashboard")}
-                      className="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-sidebar-foreground hover:bg-sidebar-accent transition-colors"
-                      activeClassName="bg-sidebar-accent text-sidebar-accent-foreground font-medium"
-                    >
-                      <item.icon className="h-4 w-4 shrink-0" />
-                      {!collapsed && <span>{item.title}</span>}
-                    </NavLink>
-                  </SidebarMenuButton>
-                </SidebarMenuItem>
-              ))}
+              {group.items.map((item) => {
+                const label = t(item.titleKey);
+                return (
+                  <SidebarMenuItem key={item.url}>
+                    <SidebarMenuButton asChild tooltip={label}>
+                      <NavLink
+                        to={item.url}
+                        end={item.url.endsWith("/dashboard")}
+                        className="flex items-center gap-2 px-2 py-1.5 rounded-md text-sm text-sidebar-foreground hover:bg-sidebar-accent transition-colors"
+                        activeClassName="bg-sidebar-accent text-sidebar-accent-foreground font-medium"
+                      >
+                        <item.icon className="h-4 w-4 shrink-0" />
+                        {!collapsed && <span>{label}</span>}
+                      </NavLink>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                );
+              })}
             </SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
@@ -71,6 +80,8 @@ function SidebarNav({ navGroups }: { navGroups: NavGroup[] }) {
 export default function RoleLayout({ navGroups, role }: RoleLayoutProps) {
   const { user, logout } = useAuth();
   const navigate = useNavigate();
+  const { t, i18n } = useTranslation();
+  const sidebarSide = i18n.dir() === "rtl" ? "right" : "left";
 
   const initials = user?.name?.split(" ").map(w => w[0]).join("").slice(0, 2).toUpperCase() ?? "??";
 
@@ -79,20 +90,23 @@ export default function RoleLayout({ navGroups, role }: RoleLayoutProps) {
     navigate("/login");
   };
 
+  const roleLabel = t(`roles.${role}`, { defaultValue: role });
+  const portalTitle = `${roleLabel} ${t("chrome.portalSuffix")}`.trim();
+
   return (
     <SidebarProvider>
       <div className="min-h-screen flex w-full">
-        <Sidebar collapsible="icon">
+        <Sidebar side={sidebarSide} collapsible="icon">
           <SidebarHeader className="p-4">
             <div className="flex items-center gap-2">
               <img
                 src="/logo.png"
-                alt="EnCoach"
+                alt={t("chrome.adminAlt")}
                 className="h-9 w-9 shrink-0 rounded-lg object-contain group-data-[collapsible=icon]:block hidden"
               />
               <img
                 src="/logo.png"
-                alt="EnCoach — Unlock your potential with AI powered platform"
+                alt={t("chrome.adminAltLong")}
                 className="h-14 w-auto shrink-0 object-contain group-data-[collapsible=icon]:hidden"
               />
             </div>
@@ -108,7 +122,9 @@ export default function RoleLayout({ navGroups, role }: RoleLayoutProps) {
                 <span className="text-xs font-semibold text-primary">{initials}</span>
               </div>
               <div className="flex flex-col min-w-0 group-data-[collapsible=icon]:hidden">
-                <span className="text-sm font-medium truncate text-sidebar-foreground">{user?.name}</span>
+                <span className="text-sm font-medium truncate text-sidebar-foreground">
+                  {user?.name ?? t("userMenu.userFallback")}
+                </span>
                 <span className="text-xs text-muted-foreground truncate">{user?.email}</span>
               </div>
             </div>
@@ -118,8 +134,8 @@ export default function RoleLayout({ navGroups, role }: RoleLayoutProps) {
         <div className="flex-1 flex flex-col min-w-0">
           <header className="h-14 border-b bg-card flex items-center justify-between px-4 shrink-0">
             <div className="flex items-center gap-3">
-              <SidebarTrigger />
-              <span className="text-sm font-medium text-muted-foreground capitalize">{role} Portal</span>
+              <SidebarTrigger aria-label={t("chrome.toggleSidebar")} />
+              <span className="text-sm font-medium text-muted-foreground">{portalTitle}</span>
             </div>
             <div className="flex items-center gap-2">
               <LanguageToggle />
@@ -135,16 +151,16 @@ export default function RoleLayout({ navGroups, role }: RoleLayoutProps) {
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" className="w-48">
                   <div className="px-3 py-2">
-                    <p className="text-sm font-medium">{user?.name}</p>
+                    <p className="text-sm font-medium">{user?.name ?? t("userMenu.userFallback")}</p>
                     <p className="text-xs text-muted-foreground">{user?.email}</p>
                   </div>
                   <DropdownMenuSeparator />
                   <DropdownMenuItem onClick={() => navigate(`/${role}/profile`)}>
-                    <User className="mr-2 h-4 w-4" /> Profile
+                    <User className="me-2 h-4 w-4" /> {t("userMenu.profile")}
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
                   <DropdownMenuItem onClick={handleLogout}>
-                    <LogOut className="mr-2 h-4 w-4" /> Logout
+                    <LogOut className="me-2 h-4 w-4" /> {t("userMenu.logout")}
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
diff --git a/frontend/src/components/StudentLayout.tsx b/frontend/src/components/StudentLayout.tsx
index 9fca00fd..201c0606 100644
--- a/frontend/src/components/StudentLayout.tsx
+++ b/frontend/src/components/StudentLayout.tsx
@@ -2,47 +2,52 @@ import RoleLayout, { NavGroup } from "./RoleLayout";
 import ExamPopup from "./student/ExamPopup";
 import {
   LayoutDashboard, BookOpen, ClipboardList, BarChart3,
-  CalendarCheck, Calendar, User, Target, GraduationCap, ListChecks,
+  CalendarCheck, Calendar, User, Target, ListChecks,
   MessageSquare, Megaphone, Mail, TrendingUp,
 } from "lucide-react";
 
+/**
+ * Student portal shell. Nav items hold i18n keys which `RoleLayout`
+ * resolves via `useTranslation`, so switching language does not require
+ * re-mounting the layout.
+ */
 const navGroups: NavGroup[] = [
   {
-    label: "Learning",
+    labelKey: "sidebarGroup.learning",
     items: [
-      { title: "Dashboard", url: "/student/dashboard", icon: LayoutDashboard },
-      { title: "My Courses", url: "/student/courses", icon: BookOpen },
-      { title: "Subject Registration", url: "/student/subject-registration", icon: ListChecks },
-      { title: "Assignments", url: "/student/assignments", icon: ClipboardList },
+      { titleKey: "nav.dashboard", url: "/student/dashboard", icon: LayoutDashboard },
+      { titleKey: "nav.myCourses", url: "/student/courses", icon: BookOpen },
+      { titleKey: "nav.subjectRegistration", url: "/student/subject-registration", icon: ListChecks },
+      { titleKey: "nav.assignments", url: "/student/assignments", icon: ClipboardList },
     ],
   },
   {
-    label: "Adaptive Learning",
+    labelKey: "sidebarGroup.adaptiveLearning",
     items: [
-      { title: "My Subjects", url: "/student/subjects", icon: Target },
+      { titleKey: "nav.mySubjects", url: "/student/subjects", icon: Target },
     ],
   },
   {
-    label: "Progress",
+    labelKey: "sidebarGroup.progress",
     items: [
-      { title: "Grades", url: "/student/grades", icon: BarChart3 },
-      { title: "Attendance", url: "/student/attendance", icon: CalendarCheck },
-      { title: "Timetable", url: "/student/timetable", icon: Calendar },
-      { title: "My Journey", url: "/student/journey", icon: TrendingUp },
+      { titleKey: "nav.grades", url: "/student/grades", icon: BarChart3 },
+      { titleKey: "nav.attendance", url: "/student/attendance", icon: CalendarCheck },
+      { titleKey: "nav.timetable", url: "/student/timetable", icon: Calendar },
+      { titleKey: "nav.myJourney", url: "/student/journey", icon: TrendingUp },
     ],
   },
   {
-    label: "Communication",
+    labelKey: "sidebarGroup.communication",
     items: [
-      { title: "Discussions", url: "/student/discussions", icon: MessageSquare },
-      { title: "Messages", url: "/student/messages", icon: Mail },
-      { title: "Announcements", url: "/student/announcements", icon: Megaphone },
+      { titleKey: "nav.discussions", url: "/student/discussions", icon: MessageSquare },
+      { titleKey: "nav.messages", url: "/student/messages", icon: Mail },
+      { titleKey: "nav.announcements", url: "/student/announcements", icon: Megaphone },
     ],
   },
   {
-    label: "Account",
+    labelKey: "sidebarGroup.account",
     items: [
-      { title: "Profile", url: "/student/profile", icon: User },
+      { titleKey: "nav.profile", url: "/student/profile", icon: User },
     ],
   },
 ];
diff --git a/frontend/src/components/TeacherLayout.tsx b/frontend/src/components/TeacherLayout.tsx
index a939eb84..768d4813 100644
--- a/frontend/src/components/TeacherLayout.tsx
+++ b/frontend/src/components/TeacherLayout.tsx
@@ -1,39 +1,40 @@
 import RoleLayout, { NavGroup } from "./RoleLayout";
 import {
-  LayoutDashboard, BookOpen, ClipboardList, FileText,
+  LayoutDashboard, BookOpen, ClipboardList,
   CalendarCheck, Users, Calendar, User, MessageSquare,
-  Megaphone, Wand2, Library,
+  Megaphone, Library,
 } from "lucide-react";
 
+/** Teacher portal shell. See `StudentLayout` for the nav-config rationale. */
 const navGroups: NavGroup[] = [
   {
-    label: "Teaching",
+    labelKey: "sidebarGroup.teaching",
     items: [
-      { title: "Dashboard", url: "/teacher/dashboard", icon: LayoutDashboard },
-      { title: "Courses", url: "/teacher/courses", icon: BookOpen },
-      { title: "Resource Library", url: "/teacher/library", icon: Library },
-      { title: "Assignments", url: "/teacher/assignments", icon: ClipboardList },
+      { titleKey: "nav.dashboard", url: "/teacher/dashboard", icon: LayoutDashboard },
+      { titleKey: "nav.courses", url: "/teacher/courses", icon: BookOpen },
+      { titleKey: "nav.resourceLibrary", url: "/teacher/library", icon: Library },
+      { titleKey: "nav.assignments", url: "/teacher/assignments", icon: ClipboardList },
     ],
   },
   {
-    label: "Management",
+    labelKey: "sidebarGroup.management",
     items: [
-      { title: "Attendance", url: "/teacher/attendance", icon: CalendarCheck },
-      { title: "Students", url: "/teacher/students", icon: Users },
-      { title: "Timetable", url: "/teacher/timetable", icon: Calendar },
+      { titleKey: "nav.attendance", url: "/teacher/attendance", icon: CalendarCheck },
+      { titleKey: "nav.students", url: "/teacher/students", icon: Users },
+      { titleKey: "nav.timetable", url: "/teacher/timetable", icon: Calendar },
     ],
   },
   {
-    label: "Communication",
+    labelKey: "sidebarGroup.communication",
     items: [
-      { title: "Discussions", url: "/teacher/discussions", icon: MessageSquare },
-      { title: "Announcements", url: "/teacher/announcements", icon: Megaphone },
+      { titleKey: "nav.discussions", url: "/teacher/discussions", icon: MessageSquare },
+      { titleKey: "nav.announcements", url: "/teacher/announcements", icon: Megaphone },
     ],
   },
   {
-    label: "Account",
+    labelKey: "sidebarGroup.account",
     items: [
-      { title: "Profile", url: "/teacher/profile", icon: User },
+      { titleKey: "nav.profile", url: "/teacher/profile", icon: User },
     ],
   },
 ];
diff --git a/frontend/src/components/ThemeToggle.tsx b/frontend/src/components/ThemeToggle.tsx
index 3569fed9..bb7ef40a 100644
--- a/frontend/src/components/ThemeToggle.tsx
+++ b/frontend/src/components/ThemeToggle.tsx
@@ -1,6 +1,7 @@
 import { Moon, Sun, Monitor } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -20,6 +21,7 @@ import {
 export function ThemeToggle() {
   const { theme, setTheme, resolvedTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
+  const { t } = useTranslation();
 
   useEffect(() => {
     setMounted(true);
@@ -33,7 +35,8 @@ export function ThemeToggle() {
         <Button
           variant="ghost"
           size="icon"
-          aria-label="Toggle theme"
+          aria-label={t("theme.toggleLabel")}
+          title={t("theme.toggleLabel")}
           className="text-muted-foreground hover:text-foreground"
         >
           {mounted ? (
@@ -49,16 +52,16 @@ export function ThemeToggle() {
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="w-36">
         <DropdownMenuItem onClick={() => setTheme("light")}>
-          <Sun className="mr-2 h-4 w-4" /> Light
-          {theme === "light" && <span className="ml-auto text-xs text-muted-foreground">✓</span>}
+          <Sun className="me-2 h-4 w-4" /> {t("theme.light")}
+          {theme === "light" && <span className="ms-auto text-xs text-muted-foreground">✓</span>}
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setTheme("dark")}>
-          <Moon className="mr-2 h-4 w-4" /> Dark
-          {theme === "dark" && <span className="ml-auto text-xs text-muted-foreground">✓</span>}
+          <Moon className="me-2 h-4 w-4" /> {t("theme.dark")}
+          {theme === "dark" && <span className="ms-auto text-xs text-muted-foreground">✓</span>}
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => setTheme("system")}>
-          <Monitor className="mr-2 h-4 w-4" /> System
-          {theme === "system" && <span className="ml-auto text-xs text-muted-foreground">✓</span>}
+          <Monitor className="me-2 h-4 w-4" /> {t("theme.system")}
+          {theme === "system" && <span className="ms-auto text-xs text-muted-foreground">✓</span>}
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
diff --git a/frontend/src/components/ai/AiAlertBanner.tsx b/frontend/src/components/ai/AiAlertBanner.tsx
index f60a9ada..c0a6347d 100644
--- a/frontend/src/components/ai/AiAlertBanner.tsx
+++ b/frontend/src/components/ai/AiAlertBanner.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
 import { AlertTriangle, X, Sparkles, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { analyticsService } from "@/services/analytics.service";
@@ -7,6 +8,7 @@ import { analyticsService } from "@/services/analytics.service";
 export default function AiAlertBanner() {
   const [dismissedIds, setDismissedIds] = useState<Set<string>>(() => new Set());
   const [errorDismissed, setErrorDismissed] = useState(false);
+  const { t } = useTranslation();
 
   const { data: resp, isLoading, isError, error } = useQuery({
     queryKey: ["ai", "alerts"],
@@ -20,20 +22,20 @@ export default function AiAlertBanner() {
     return (
       <div className="rounded-lg border border-warning/30 bg-warning/10 p-4 flex items-center gap-3">
         <Loader2 className="h-5 w-5 animate-spin text-warning shrink-0" />
-        <p className="text-sm text-muted-foreground">Loading alerts…</p>
+        <p className="text-sm text-muted-foreground">{t("ai.loadingAlerts")}</p>
       </div>
     );
   }
 
   if (isError && !errorDismissed) {
     return (
-      <div className="rounded-lg border border-warning/30 bg-warning/10 p-4 flex items-start gap-3">
+      <div className="rounded-lg border border-warning/30 bg-warning/10 p-4 flex items-start gap-3" dir="auto">
         <AlertTriangle className="h-5 w-5 text-warning shrink-0 mt-0.5" />
-        <div className="flex-1">
+        <div className="flex-1 min-w-0">
           <p className="text-sm font-medium flex items-center gap-1">
-            <Sparkles className="h-3 w-3 text-primary" /> Alerts unavailable
+            <Sparkles className="h-3 w-3 text-primary shrink-0" /> {t("ai.alertsUnavailable")}
           </p>
-          <p className="text-sm text-muted-foreground mt-1">{error instanceof Error ? error.message : "Could not load alerts."}</p>
+          <p className="text-sm text-muted-foreground mt-1">{error instanceof Error ? error.message : t("ai.couldNotLoadAlerts")}</p>
         </div>
         <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0" onClick={() => setErrorDismissed(true)}>
           <X className="h-4 w-4" />
@@ -48,7 +50,7 @@ export default function AiAlertBanner() {
     return (
       <div className="rounded-lg border border-muted bg-muted/20 p-4 flex items-start gap-3">
         <Sparkles className="h-5 w-5 text-muted-foreground shrink-0 mt-0.5" />
-        <p className="text-sm text-muted-foreground">No AI alerts right now.</p>
+        <p className="text-sm text-muted-foreground">{t("ai.noAlertsRightNow")}</p>
       </div>
     );
   }
@@ -58,11 +60,11 @@ export default function AiAlertBanner() {
   return (
     <div className="space-y-3">
       {visible.map((alert, idx) => (
-        <div key={idx} className="rounded-lg border border-warning/30 bg-warning/10 p-4 flex items-start gap-3">
+        <div key={idx} className="rounded-lg border border-warning/30 bg-warning/10 p-4 flex items-start gap-3" dir="auto">
           <AlertTriangle className="h-5 w-5 text-warning shrink-0 mt-0.5" />
-          <div className="flex-1">
+          <div className="flex-1 min-w-0">
             <p className="text-sm font-medium flex items-center gap-1">
-              <Sparkles className="h-3 w-3 text-primary" /> {alert.title}
+              <Sparkles className="h-3 w-3 text-primary shrink-0" /> {alert.title}
             </p>
             <p className="text-sm text-muted-foreground mt-1">{alert.description}</p>
           </div>
diff --git a/frontend/src/components/ai/AiAssistantDrawer.tsx b/frontend/src/components/ai/AiAssistantDrawer.tsx
index 7e52fc4b..0e8c2d5b 100644
--- a/frontend/src/components/ai/AiAssistantDrawer.tsx
+++ b/frontend/src/components/ai/AiAssistantDrawer.tsx
@@ -1,6 +1,7 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useMutation } from "@tanstack/react-query";
 import { useLocation } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -8,19 +9,27 @@ import { Sparkles, Send, Loader2 } from "lucide-react";
 import { coachingService } from "@/services/coaching.service";
 import { useToast } from "@/hooks/use-toast";
 
-const quickActions = [
-  "Platform health summary",
-  "Show dropout risks",
-  "Compare course performance",
-  "Suggest batch improvements",
-];
-
 export default function AiAssistantDrawer() {
   const [open, setOpen] = useState(false);
   const [messages, setMessages] = useState<{ role: "user" | "ai"; text: string }[]>([]);
   const [input, setInput] = useState("");
   const location = useLocation();
   const { toast } = useToast();
+  const { t } = useTranslation();
+
+  // Re-compute when language switches so quick-action chips show translated
+  // labels immediately. Chips are stored by label (what we send to the
+  // backend), so localizing the label is safe here — the backend treats
+  // them as free-form prompts.
+  const quickActions = useMemo(
+    () => [
+      t("ai.quickHealth"),
+      t("ai.quickDropouts"),
+      t("ai.quickCompare"),
+      t("ai.quickBatch"),
+    ],
+    [t],
+  );
 
   const chatMutation = useMutation({
     mutationFn: (message: string) =>
@@ -31,15 +40,12 @@ export default function AiAssistantDrawer() {
     onError: (err: Error) => {
       toast({
         variant: "destructive",
-        title: "Could not get a reply",
-        description: err.message || "Something went wrong. Try again.",
+        title: t("ai.replyErrorTitle"),
+        description: err.message || t("ai.replyErrorDesc"),
       });
       setMessages((prev) => [
         ...prev,
-        {
-          role: "ai",
-          text: "Sorry, I could not reach the assistant. Please try again in a moment.",
-        },
+        { role: "ai", text: t("ai.fallbackReply") },
       ]);
     },
   });
@@ -56,8 +62,9 @@ export default function AiAssistantDrawer() {
     <>
       <button
         onClick={() => setOpen(true)}
-        className="fixed bottom-20 right-6 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg hover:opacity-90 transition-opacity"
-        aria-label="AI Assistant"
+        className="fixed bottom-20 end-6 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg hover:opacity-90 transition-opacity"
+        aria-label={t("ai.assistantLabel")}
+        title={t("ai.assistantLabel")}
       >
         <Sparkles className="h-5 w-5" />
       </button>
@@ -67,7 +74,7 @@ export default function AiAssistantDrawer() {
           <SheetHeader>
             <SheetTitle className="flex items-center gap-2">
               <Sparkles className="h-5 w-5 text-primary" />
-              EnCoach AI Assistant
+              {t("ai.assistantTitle")}
             </SheetTitle>
           </SheetHeader>
 
@@ -90,8 +97,8 @@ export default function AiAssistantDrawer() {
             {messages.length === 0 && (
               <div className="text-center text-muted-foreground text-sm py-8">
                 <Sparkles className="h-8 w-8 mx-auto mb-3 text-primary/40" />
-                <p>Ask me anything about the platform,</p>
-                <p>or click a quick action above.</p>
+                <p>{t("ai.emptyLine1")}</p>
+                <p>{t("ai.emptyLine2")}</p>
               </div>
             )}
             {messages.map((msg, i) => (
@@ -99,27 +106,27 @@ export default function AiAssistantDrawer() {
                 key={i}
                 className={`rounded-lg p-3 text-sm ${
                   msg.role === "user"
-                    ? "bg-primary text-primary-foreground ml-8"
-                    : "bg-muted mr-8"
+                    ? "bg-primary text-primary-foreground ms-8"
+                    : "bg-muted me-8"
                 }`}
               >
                 {msg.role === "ai" && (
-                  <Sparkles className="h-3 w-3 text-primary inline mr-1.5 -mt-0.5" />
+                  <Sparkles className="h-3 w-3 text-primary inline me-1.5 -mt-0.5" />
                 )}
                 {msg.text}
               </div>
             ))}
             {chatMutation.isPending && (
-              <div className="bg-muted rounded-lg p-3 text-sm mr-8 flex items-center gap-2">
+              <div className="bg-muted rounded-lg p-3 text-sm me-8 flex items-center gap-2">
                 <Loader2 className="h-4 w-4 animate-spin text-primary" />
-                <span className="text-muted-foreground">Thinking...</span>
+                <span className="text-muted-foreground">{t("ai.thinking")}</span>
               </div>
             )}
           </div>
 
           <div className="flex gap-2 pt-3 border-t mt-auto">
             <Input
-              placeholder="Ask anything..."
+              placeholder={t("ai.placeholder")}
               value={input}
               onChange={(e) => setInput(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && handleSend(input)}
@@ -128,6 +135,8 @@ export default function AiAssistantDrawer() {
               size="icon"
               onClick={() => handleSend(input)}
               disabled={!input.trim() || chatMutation.isPending}
+              aria-label={t("ai.send")}
+              title={t("ai.send")}
             >
               <Send className="h-4 w-4" />
             </Button>
diff --git a/frontend/src/components/ai/AiInsightsPanel.tsx b/frontend/src/components/ai/AiInsightsPanel.tsx
index 4bb83f21..ccc82206 100644
--- a/frontend/src/components/ai/AiInsightsPanel.tsx
+++ b/frontend/src/components/ai/AiInsightsPanel.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useMemo } from "react";
 import { useMutation } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Sparkles, TrendingUp, AlertTriangle, Info, Loader2 } from "lucide-react";
 import { analyticsService, type AiInsightItem } from "@/services/analytics.service";
@@ -35,14 +36,15 @@ interface Props {
 
 export default function AiInsightsPanel({ data = EMPTY_PAYLOAD }: Props) {
   const { toast } = useToast();
+  const { t } = useTranslation();
   const payloadKey = useMemo(() => JSON.stringify(data), [data]);
 
   const mutation = useMutation({
     mutationFn: (payload: Record<string, unknown>) => analyticsService.getInsights(payload),
     onError: (err: Error) => {
       toast({
-        title: "Insights unavailable",
-        description: err.message || "Could not load AI insights.",
+        title: t("ai.insightsUnavailable"),
+        description: err.message || t("ai.couldNotLoadInsights"),
         variant: "destructive",
       });
     },
@@ -60,21 +62,21 @@ export default function AiInsightsPanel({ data = EMPTY_PAYLOAD }: Props) {
       <CardHeader className="pb-3">
         <CardTitle className="text-base font-semibold flex items-center gap-2">
           <Sparkles className="h-4 w-4 text-primary" />
-          AI Platform Insights
+          {t("ai.platformInsightsTitle")}
         </CardTitle>
       </CardHeader>
       <CardContent>
         {mutation.isPending && (
           <div className="flex items-center gap-2 text-sm text-muted-foreground py-8 justify-center">
             <Loader2 className="h-5 w-5 animate-spin text-primary" />
-            Loading insights…
+            {t("ai.loadingInsights")}
           </div>
         )}
         {mutation.isError && !mutation.isPending && (
-          <p className="text-sm text-muted-foreground py-4 text-center">Could not load insights.</p>
+          <p className="text-sm text-muted-foreground py-4 text-center">{t("ai.couldNotLoadInsights")}</p>
         )}
         {mutation.isSuccess && items.length === 0 && (
-          <p className="text-sm text-muted-foreground py-4 text-center">No insights available for this view.</p>
+          <p className="text-sm text-muted-foreground py-4 text-center">{t("ai.noInsightsAvailable")}</p>
         )}
         {!mutation.isPending && items.length > 0 && (
           <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
@@ -82,10 +84,10 @@ export default function AiInsightsPanel({ data = EMPTY_PAYLOAD }: Props) {
               const Icon = insightIcon(item.severity);
               const color = insightColor(item.severity);
               return (
-                <div key={idx} className="rounded-lg border bg-muted/30 p-4">
+                <div key={idx} className="rounded-lg border bg-muted/30 p-4" dir="auto">
                   <div className="flex items-center gap-2 mb-2">
-                    <Icon className={`h-4 w-4 ${color}`} />
-                    <span className="text-sm font-semibold">{item.title}</span>
+                    <Icon className={`h-4 w-4 shrink-0 ${color}`} />
+                    <span className="text-sm font-semibold min-w-0">{item.title}</span>
                   </div>
                   <p className="text-sm text-muted-foreground">{item.description}</p>
                   {item.recommendation && (
diff --git a/frontend/src/components/ai/AiSearchBar.tsx b/frontend/src/components/ai/AiSearchBar.tsx
index 9a31c526..f67b1736 100644
--- a/frontend/src/components/ai/AiSearchBar.tsx
+++ b/frontend/src/components/ai/AiSearchBar.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useMutation } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
 import { Input } from "@/components/ui/input";
 import { Sparkles, Search, Loader2, X } from "lucide-react";
 import { useNavigate } from "react-router-dom";
@@ -10,14 +11,15 @@ export default function AiSearchBar() {
   const [query, setQuery] = useState("");
   const navigate = useNavigate();
   const { toast } = useToast();
+  const { t } = useTranslation();
 
   const searchMutation = useMutation({
     mutationFn: (q: string) => analyticsService.search(q),
     onError: (err: Error) => {
       toast({
         variant: "destructive",
-        title: "Search failed",
-        description: err.message || "Could not complete AI search.",
+        title: t("chrome.aiSearchFailedTitle"),
+        description: err.message || t("chrome.aiSearchFailedDesc"),
       });
     },
   });
@@ -32,11 +34,11 @@ export default function AiSearchBar() {
   return (
     <div className="relative max-w-md w-full">
       <div className="relative">
-        <Sparkles className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-primary" />
-        <Search className="absolute left-7 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+        <Sparkles className="absolute start-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-primary" />
+        <Search className="absolute start-7 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
         <Input
-          placeholder="Ask anything... e.g. 'Show students with low attendance'"
-          className="pl-12 pr-8 h-9 text-sm bg-muted/50 border-0 focus-visible:ring-1"
+          placeholder={t("chrome.aiSearchPlaceholder")}
+          className="ps-12 pe-8 h-9 text-sm bg-muted/50 border-0 focus-visible:ring-1"
           value={query}
           onChange={(e) => {
             setQuery(e.target.value);
@@ -50,7 +52,7 @@ export default function AiSearchBar() {
               setQuery("");
               searchMutation.reset();
             }}
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            className="absolute end-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
           >
             <X className="h-3.5 w-3.5" />
           </button>
@@ -58,11 +60,11 @@ export default function AiSearchBar() {
       </div>
 
       {(searchMutation.isPending || result !== undefined) && (
-        <div className="absolute top-full mt-1 left-0 right-0 z-50 rounded-lg border bg-popover p-3 shadow-md">
+        <div className="absolute top-full mt-1 start-0 end-0 z-50 rounded-lg border bg-popover p-3 shadow-md">
           {searchMutation.isPending ? (
             <div className="flex items-center gap-2 text-sm text-muted-foreground">
               <Loader2 className="h-4 w-4 animate-spin text-primary" />
-              AI is searching...
+              {t("chrome.aiSearching")}
             </div>
           ) : result?.answer ? (
             <div className="text-sm space-y-2 max-h-64 overflow-y-auto">
@@ -72,7 +74,7 @@ export default function AiSearchBar() {
               </div>
               {result.suggestions?.length > 0 && (
                 <div className="border-t pt-2 space-y-1">
-                  <p className="text-xs font-semibold text-primary">Related queries</p>
+                  <p className="text-xs font-semibold text-primary">{t("chrome.aiRelatedQueries")}</p>
                   {result.suggestions.map((s, i) => (
                     <button
                       key={i}
@@ -99,9 +101,7 @@ export default function AiSearchBar() {
           ) : (
             <div className="text-sm flex items-start gap-2">
               <Sparkles className="h-4 w-4 text-primary shrink-0 mt-0.5" />
-              <p>
-                No results for &quot;{query}&quot;. Try a different question or keyword.
-              </p>
+              <p>{t("chrome.aiNoResults", { q: query })}</p>
             </div>
           )}
         </div>
diff --git a/frontend/src/components/ai/AiTipBanner.tsx b/frontend/src/components/ai/AiTipBanner.tsx
index 3484e704..48893143 100644
--- a/frontend/src/components/ai/AiTipBanner.tsx
+++ b/frontend/src/components/ai/AiTipBanner.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
 import { Sparkles, X, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { coachingService } from "@/services/coaching.service";
@@ -12,6 +13,7 @@ interface Props {
 
 export default function AiTipBanner({ context = "dashboard", variant = "tip", dismissible = true }: Props) {
   const [dismissed, setDismissed] = useState(false);
+  const { t } = useTranslation();
 
   const { data, isLoading, isError, error } = useQuery({
     queryKey: ["ai", "tip", context],
@@ -22,23 +24,30 @@ export default function AiTipBanner({ context = "dashboard", variant = "tip", di
 
   const bgClass = variant === "recommendation" ? "bg-accent/50 border-accent" : variant === "insight" ? "bg-primary/5 border-primary/20" : "bg-muted/50 border-muted-foreground/10";
 
+  const variantLabel =
+    variant === "insight"
+      ? t("ai.insightLabel")
+      : variant === "recommendation"
+      ? t("ai.recommendationLabel")
+      : t("ai.tipLabel");
+
   if (isLoading) {
     return (
       <div className={`rounded-lg border ${bgClass} p-3 flex items-center gap-3`}>
         <Loader2 className="h-4 w-4 animate-spin text-primary shrink-0" />
-        <span className="text-sm text-muted-foreground">Loading AI tip…</span>
+        <span className="text-sm text-muted-foreground">{t("ai.loadingTip")}</span>
       </div>
     );
   }
 
   if (isError || !data) {
     return (
-      <div className={`rounded-lg border ${bgClass} p-3 flex items-start gap-3`}>
+      <div className={`rounded-lg border ${bgClass} p-3 flex items-start gap-3`} dir="auto">
         <Sparkles className="h-4 w-4 text-primary shrink-0 mt-0.5" />
-        <div className="flex-1">
-          <span className="text-xs font-semibold text-primary">AI Tip</span>
+        <div className="flex-1 min-w-0">
+          <span className="block text-xs font-semibold text-primary">{t("ai.tipLabel")}</span>
           <p className="text-sm text-muted-foreground mt-0.5">
-            {isError ? (error instanceof Error ? error.message : "Could not load tip.") : "No tip available."}
+            {isError ? (error instanceof Error ? error.message : t("ai.couldNotLoadTip")) : t("ai.noTipAvailable")}
           </p>
         </div>
         {dismissible && (
@@ -52,25 +61,25 @@ export default function AiTipBanner({ context = "dashboard", variant = "tip", di
 
   if (!data.tip?.trim()) {
     return (
-      <div className={`rounded-lg border ${bgClass} p-3 flex items-start gap-3`}>
+      <div className={`rounded-lg border ${bgClass} p-3 flex items-start gap-3`} dir="auto">
         <Sparkles className="h-4 w-4 text-primary shrink-0 mt-0.5" />
-        <div className="flex-1">
-          <span className="text-xs font-semibold text-primary">AI {variant === "tip" ? "Tip" : variant === "insight" ? "Insight" : "Recommendation"}</span>
-          <p className="text-sm text-muted-foreground mt-0.5">No tip for this context yet.</p>
+        <div className="flex-1 min-w-0">
+          <span className="block text-xs font-semibold text-primary">{variantLabel}</span>
+          <p className="text-sm text-muted-foreground mt-0.5">{t("ai.noTipForContext")}</p>
         </div>
       </div>
     );
   }
 
   const label = data.category && data.category !== "general"
-    ? `AI ${data.category.charAt(0).toUpperCase() + data.category.slice(1)} Tip`
-    : `AI ${variant === "tip" ? "Tip" : variant === "insight" ? "Insight" : "Recommendation"}`;
+    ? t("ai.categoryTipLabel", { category: data.category.charAt(0).toUpperCase() + data.category.slice(1) })
+    : variantLabel;
 
   return (
-    <div className={`rounded-lg border ${bgClass} p-3 flex items-start gap-3 animate-in fade-in slide-in-from-top-2 duration-300`}>
+    <div className={`rounded-lg border ${bgClass} p-3 flex items-start gap-3 animate-in fade-in slide-in-from-top-2 duration-300`} dir="auto">
       <Sparkles className="h-4 w-4 text-primary shrink-0 mt-0.5" />
-      <div className="flex-1">
-        <span className="text-xs font-semibold text-primary">{label}</span>
+      <div className="flex-1 min-w-0">
+        <span className="block text-xs font-semibold text-primary">{label}</span>
         <p className="text-sm text-muted-foreground mt-0.5">{data.tip}</p>
       </div>
       {dismissible && (
diff --git a/frontend/src/components/student/ExamPopup.tsx b/frontend/src/components/student/ExamPopup.tsx
index 5fc037f1..7370c1a1 100644
--- a/frontend/src/components/student/ExamPopup.tsx
+++ b/frontend/src/components/student/ExamPopup.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
@@ -10,6 +11,7 @@ import type { StudentExamAssignment } from "@/types";
 
 export default function ExamPopup() {
   const navigate = useNavigate();
+  const { t, i18n } = useTranslation();
   const [open, setOpen] = useState(false);
   const [dismissed, setDismissed] = useState<Set<number>>(new Set());
 
@@ -30,11 +32,14 @@ export default function ExamPopup() {
 
   if (pendingExams.length === 0) return null;
 
+  // Localize dates with the active language so Arabic users see ar-EG
+  // month names instead of "Apr 19, 2026". The locale is taken from i18n.
+  const dateLocale = i18n.language?.startsWith("ar") ? "ar-EG" : "en-US";
   const formatDate = (iso: string | null) => {
     if (!iso) return "—";
     const d = new Date(iso);
-    return d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }) +
-      " " + d.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" });
+    return d.toLocaleDateString(dateLocale, { month: "short", day: "numeric", year: "numeric" }) +
+      " " + d.toLocaleTimeString(dateLocale, { hour: "2-digit", minute: "2-digit" });
   };
 
   const handleStart = (exam: StudentExamAssignment) => {
@@ -54,10 +59,10 @@ export default function ExamPopup() {
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <AlertCircle className="h-5 w-5 text-primary" />
-            Upcoming Exams ({pendingExams.length})
+            {t("examPopup.title", { n: pendingExams.length })}
           </DialogTitle>
         </DialogHeader>
-        <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-1">
+        <div className="space-y-3 max-h-[60vh] overflow-y-auto pe-1">
           {pendingExams.map((exam) => (
             <div key={exam.id} className="border rounded-lg p-4 space-y-3">
               <div className="flex items-center justify-between">
@@ -66,7 +71,7 @@ export default function ExamPopup() {
                   variant={exam.schedule_state === "active" ? "default" : "secondary"}
                   className="capitalize text-xs"
                 >
-                  {exam.schedule_state === "active" ? "Active Now" : exam.schedule_state}
+                  {exam.schedule_state === "active" ? t("examPopup.activeNow") : exam.schedule_state}
                 </Badge>
               </div>
 
@@ -77,11 +82,11 @@ export default function ExamPopup() {
               <div className="flex items-center gap-4 text-xs text-muted-foreground">
                 <span className="flex items-center gap-1">
                   <Calendar className="h-3 w-3" />
-                  From: {formatDate(exam.start_date)}
+                  {t("examPopup.from")} {formatDate(exam.start_date)}
                 </span>
                 <span className="flex items-center gap-1">
                   <Clock className="h-3 w-3" />
-                  To: {formatDate(exam.end_date)}
+                  {t("examPopup.to")} {formatDate(exam.end_date)}
                 </span>
               </div>
 
@@ -93,20 +98,20 @@ export default function ExamPopup() {
                   className="gap-1.5"
                 >
                   <PlayCircle className="h-3.5 w-3.5" />
-                  {exam.can_start ? "Start Exam" : "Not Available Yet"}
+                  {exam.can_start ? t("examPopup.startExam") : t("examPopup.notAvailableYet")}
                 </Button>
                 <Button
                   size="sm"
                   variant="ghost"
                   onClick={() => handleDismiss(exam.id)}
                 >
-                  Dismiss
+                  {t("common.dismiss")}
                 </Button>
                 {!exam.can_start && (
-                  <span className="text-[11px] text-muted-foreground italic ml-auto">
+                  <span className="text-[11px] text-muted-foreground italic ms-auto">
                     {exam.schedule_state === "planned"
-                      ? "Exam will be available once it becomes active"
-                      : "Exam is not currently active"}
+                      ? t("examPopup.willBeAvailable")
+                      : t("examPopup.notActive")}
                   </span>
                 )}
               </div>
diff --git a/frontend/src/components/ui/breadcrumb.tsx b/frontend/src/components/ui/breadcrumb.tsx
index ca91ff53..8adff199 100644
--- a/frontend/src/components/ui/breadcrumb.tsx
+++ b/frontend/src/components/ui/breadcrumb.tsx
@@ -60,7 +60,12 @@ const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWit
 BreadcrumbPage.displayName = "BreadcrumbPage";
 
 const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
-  <li role="presentation" aria-hidden="true" className={cn("[&>svg]:size-3.5", className)} {...props}>
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:size-3.5 rtl:[&>svg]:rotate-180", className)}
+    {...props}
+  >
     {children ?? <ChevronRight />}
   </li>
 );
diff --git a/frontend/src/components/ui/calendar.tsx b/frontend/src/components/ui/calendar.tsx
index 900a69e4..16c08099 100644
--- a/frontend/src/components/ui/calendar.tsx
+++ b/frontend/src/components/ui/calendar.tsx
@@ -42,8 +42,8 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         ...classNames,
       }}
       components={{
-        IconLeft: ({ ..._props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ..._props }) => <ChevronRight className="h-4 w-4" />,
+        IconLeft: ({ ..._props }) => <ChevronLeft className="h-4 w-4 rtl:rotate-180" />,
+        IconRight: ({ ..._props }) => <ChevronRight className="h-4 w-4 rtl:rotate-180" />,
       }}
       {...props}
     />
diff --git a/frontend/src/components/ui/carousel.tsx b/frontend/src/components/ui/carousel.tsx
index 3aa0f31f..0fd41339 100644
--- a/frontend/src/components/ui/carousel.tsx
+++ b/frontend/src/components/ui/carousel.tsx
@@ -185,7 +185,7 @@ const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProp
         onClick={scrollPrev}
         {...props}
       >
-        <ArrowLeft className="h-4 w-4" />
+        <ArrowLeft className="h-4 w-4 rtl:rotate-180" />
         <span className="sr-only">Previous slide</span>
       </Button>
     );
@@ -213,7 +213,7 @@ const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<ty
         onClick={scrollNext}
         {...props}
       >
-        <ArrowRight className="h-4 w-4" />
+        <ArrowRight className="h-4 w-4 rtl:rotate-180" />
         <span className="sr-only">Next slide</span>
       </Button>
     );
diff --git a/frontend/src/components/ui/context-menu.tsx b/frontend/src/components/ui/context-menu.tsx
index b5d9db06..0d154ff6 100644
--- a/frontend/src/components/ui/context-menu.tsx
+++ b/frontend/src/components/ui/context-menu.tsx
@@ -32,7 +32,7 @@ const ContextMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
+    <ChevronRight className="ms-auto h-4 w-4 rtl:rotate-180" />
   </ContextMenuPrimitive.SubTrigger>
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
diff --git a/frontend/src/components/ui/dropdown-menu.tsx b/frontend/src/components/ui/dropdown-menu.tsx
index ddabcfdd..8249f84e 100644
--- a/frontend/src/components/ui/dropdown-menu.tsx
+++ b/frontend/src/components/ui/dropdown-menu.tsx
@@ -32,7 +32,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
+    <ChevronRight className="ms-auto h-4 w-4 rtl:rotate-180" />
   </DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
diff --git a/frontend/src/components/ui/menubar.tsx b/frontend/src/components/ui/menubar.tsx
index 15687e4c..f2924af6 100644
--- a/frontend/src/components/ui/menubar.tsx
+++ b/frontend/src/components/ui/menubar.tsx
@@ -57,7 +57,7 @@ const MenubarSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
+    <ChevronRight className="ms-auto h-4 w-4 rtl:rotate-180" />
   </MenubarPrimitive.SubTrigger>
 ));
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
diff --git a/frontend/src/components/ui/pagination.tsx b/frontend/src/components/ui/pagination.tsx
index 31ae1be1..25ead1fd 100644
--- a/frontend/src/components/ui/pagination.tsx
+++ b/frontend/src/components/ui/pagination.tsx
@@ -47,17 +47,17 @@ const PaginationLink = ({ className, isActive, size = "icon", ...props }: Pagina
 PaginationLink.displayName = "PaginationLink";
 
 const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink aria-label="Go to previous page" size="default" className={cn("gap-1 pl-2.5", className)} {...props}>
-    <ChevronLeft className="h-4 w-4" />
+  <PaginationLink aria-label="Go to previous page" size="default" className={cn("gap-1 ps-2.5", className)} {...props}>
+    <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
     <span>Previous</span>
   </PaginationLink>
 );
 PaginationPrevious.displayName = "PaginationPrevious";
 
 const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink aria-label="Go to next page" size="default" className={cn("gap-1 pr-2.5", className)} {...props}>
+  <PaginationLink aria-label="Go to next page" size="default" className={cn("gap-1 pe-2.5", className)} {...props}>
     <span>Next</span>
-    <ChevronRight className="h-4 w-4" />
+    <ChevronRight className="h-4 w-4 rtl:rotate-180" />
   </PaginationLink>
 );
 PaginationNext.displayName = "PaginationNext";
diff --git a/frontend/src/components/ui/sidebar.tsx b/frontend/src/components/ui/sidebar.tsx
index beb1a591..cb48f4b3 100644
--- a/frontend/src/components/ui/sidebar.tsx
+++ b/frontend/src/components/ui/sidebar.tsx
@@ -217,7 +217,7 @@ const Sidebar = React.forwardRef<
 Sidebar.displayName = "Sidebar";
 
 const SidebarTrigger = React.forwardRef<React.ElementRef<typeof Button>, React.ComponentProps<typeof Button>>(
-  ({ className, onClick, ...props }, ref) => {
+  ({ className, onClick, "aria-label": ariaLabel, ...props }, ref) => {
     const { toggleSidebar } = useSidebar();
 
     return (
@@ -226,6 +226,7 @@ const SidebarTrigger = React.forwardRef<React.ElementRef<typeof Button>, React.C
         data-sidebar="trigger"
         variant="ghost"
         size="icon"
+        aria-label={ariaLabel ?? "Toggle sidebar"}
         className={cn("h-7 w-7", className)}
         onClick={(event) => {
           onClick?.(event);
@@ -233,8 +234,8 @@ const SidebarTrigger = React.forwardRef<React.ElementRef<typeof Button>, React.C
         }}
         {...props}
       >
-        <PanelLeft />
-        <span className="sr-only">Toggle Sidebar</span>
+        <PanelLeft className="rtl:rotate-180" />
+        <span className="sr-only">{ariaLabel ?? "Toggle sidebar"}</span>
       </Button>
     );
   },
diff --git a/frontend/src/i18n/locales/ar.ts b/frontend/src/i18n/locales/ar.ts
index 5f5bfb9f..1a978882 100644
--- a/frontend/src/i18n/locales/ar.ts
+++ b/frontend/src/i18n/locales/ar.ts
@@ -1,6 +1,6 @@
 import type { Translations } from "./en";
 
-/** Arabic (RTL) translations. */
+/** Arabic (RTL) translations. Keep key parity with `en.ts`. */
 const ar: Translations = {
   common: {
     cancel: "إلغاء",
@@ -20,30 +20,293 @@ const ar: Translations = {
     status: "الحالة",
     settings: "الإعدادات",
     signOut: "تسجيل الخروج",
+    viewAll: "عرض الكل",
+    dismiss: "تجاهل",
+    pending: "قيد الانتظار",
+    active: "نشط",
+    inactive: "غير نشط",
+    available: "متاح",
+    unavailable: "غير متاح",
+    name: "الاسم",
+    email: "البريد الإلكتروني",
+    user: "المستخدم",
+    home: "الرئيسية",
   },
   auth: {
     signIn: "تسجيل الدخول",
     signInTitle: "تسجيل الدخول إلى EnCoach",
+    welcomeBack: "مرحباً بعودتك",
+    signInDescription: "سجّل الدخول إلى حسابك للمتابعة",
     email: "البريد الإلكتروني",
+    emailPlaceholder: "you@example.com",
     password: "كلمة المرور",
+    rememberMe: "تذكرني",
     forgotPassword: "هل نسيت كلمة المرور؟",
     needAccount: "ليس لديك حساب؟",
     signUp: "إنشاء حساب",
     invalidCredentials: "البريد الإلكتروني أو كلمة المرور غير صحيحة",
+    missingCredentials: "يرجى إدخال البريد الإلكتروني وكلمة المرور",
+    loginFailedTitle: "فشل تسجيل الدخول",
+    errorTitle: "خطأ",
   },
   nav: {
+    adminDashboard: "لوحة الإدارة",
+    platformDashboard: "لوحة المنصّة",
     dashboard: "لوحة التحكم",
     courses: "الدورات",
+    myCourses: "دوراتي",
     students: "الطلاب",
     teachers: "المعلمون",
-    exams: "الاختبارات",
+    batches: "الدفعات",
+    timetable: "الجدول الدراسي",
     reports: "التقارير",
-    settings: "الإعدادات",
-    profile: "الملف الشخصي",
-    privacy: "مركز الخصوصية",
+    assignments: "الواجبات",
+    examsList: "قائمة الاختبارات",
+    examStructures: "هياكل الاختبارات",
+    rubrics: "معايير التقييم",
+    generation: "التوليد",
     reviewQueue: "قائمة المراجعة",
     aiPrompts: "تعليمات الذكاء الاصطناعي",
     aiFeedback: "ملاحظات الذكاء الاصطناعي",
+    approvalWorkflows: "سير عمل الموافقات",
+    taxonomy: "التصنيف",
+    resources: "الموارد",
+    resourceLibrary: "مكتبة الموارد",
+    academicYears: "السنوات الأكاديمية",
+    departments: "الأقسام",
+    admissions: "القبول",
+    admissionRegister: "سجل القبول",
+    examSessions: "جلسات الاختبارات",
+    marksheets: "كشوفات الدرجات",
+    studentLeave: "إجازات الطلاب",
+    fees: "الرسوم والمدفوعات",
+    lessons: "الدروس",
+    gradebook: "سجل الدرجات",
+    studentProgress: "تقدم الطالب",
+    library: "المكتبة",
+    activities: "الأنشطة",
+    facilities: "المرافق",
+    users: "المستخدمون",
+    entities: "الكيانات",
+    classrooms: "الفصول",
+    userRoles: "أدوار المستخدمين",
+    rolesPermissions: "الأدوار والصلاحيات",
+    authorityMatrix: "مصفوفة الصلاحيات",
+    studentPerformance: "أداء الطلاب",
+    statsCorporate: "إحصاءات الشركات",
+    record: "السجل",
+    vocabulary: "المفردات",
+    grammar: "القواعد",
+    faqManager: "إدارة الأسئلة الشائعة",
+    notificationRules: "قواعد الإشعارات",
+    approvalConfig: "إعدادات الموافقات",
+    paymentRecord: "سجل المدفوعات",
+    tickets: "التذاكر",
+    settings: "الإعدادات",
+    profile: "الملف الشخصي",
+    privacy: "مركز الخصوصية",
+    subjectRegistration: "تسجيل المواد",
+    mySubjects: "موادي",
+    grades: "الدرجات",
+    attendance: "الحضور",
+    myJourney: "رحلتي",
+    discussions: "المناقشات",
+    messages: "الرسائل",
+    announcements: "الإعلانات",
+  },
+  sidebarGroup: {
+    overview: "نظرة عامة",
+    lms: "نظام التعلم",
+    adaptiveLearning: "التعلم التكيّفي",
+    institutional: "المؤسسي",
+    academic: "الأكاديمي",
+    management: "الإدارة",
+    reports: "التقارير",
+    configuration: "الإعدادات",
+    training: "التدريب",
+    support: "الدعم",
+    learning: "التعلم",
+    progress: "التقدم",
+    communication: "التواصل",
+    account: "الحساب",
+    teaching: "التدريس",
+  },
+  breadcrumb: {
+    home: "الرئيسية",
+    admin: "الإدارة",
+    dashboard: "لوحة التحكم",
+    platform: "المنصّة",
+    exam: "الاختبار",
+    review: "مراجعة",
+    ai: "الذكاء الاصطناعي",
+    feedback: "ملاحظات",
+  },
+  userMenu: {
+    profile: "الملف الشخصي",
+    settings: "الإعدادات",
+    logout: "تسجيل الخروج",
+    userFallback: "مستخدم",
+  },
+  chrome: {
+    needHelp: "هل تحتاج مساعدة؟",
+    ticketsTooltip: "تذاكر الدعم",
+    aiSearchPlaceholder: "اسأل عن أي شيء… مثال: «اعرض الطلاب ذوي الحضور المنخفض»",
+    aiSearching: "الذكاء الاصطناعي يبحث…",
+    aiRelatedQueries: "استفسارات ذات صلة",
+    aiNoResults: "لا توجد نتائج لـ «{{q}}». جرّب سؤالاً أو كلمة مفتاحية مختلفة.",
+    aiSearchFailedTitle: "فشل البحث",
+    aiSearchFailedDesc: "تعذّر إكمال بحث الذكاء الاصطناعي.",
+    portalSuffix: "البوابة",
+    adminAlt: "EnCoach",
+    adminAltLong: "EnCoach — أطلق إمكاناتك مع منصّة مدعومة بالذكاء الاصطناعي",
+    toggleSidebar: "إظهار/إخفاء الشريط الجانبي",
+  },
+  notifications: {
+    title: "الإشعارات",
+    empty: "ليست لديك إشعارات جديدة.",
+    ariaLabel: "الإشعارات",
+  },
+  theme: {
+    title: "المظهر",
+    light: "فاتح",
+    dark: "داكن",
+    system: "النظام",
+    toggleLabel: "تبديل المظهر",
+  },
+  language: {
+    change: "تغيير اللغة",
+    label: "اللغة",
+  },
+  roles: {
+    student: "طالب",
+    teacher: "معلّم",
+    admin: "مسؤول",
+    developer: "مطوّر",
+    corporate: "شركة",
+    mastercorporate: "شركة رئيسية",
+    agent: "وكيل",
+  },
+  dashboard: {
+    greetingFallback: "الطالب",
+  },
+  studentDash: {
+    welcome: "مرحباً بعودتك، {{name}}!",
+    subtitle: "إليك نظرة عامة على تقدّمك الدراسي.",
+    enrolledCourses: "الدورات المسجّلة",
+    overallProgress: "التقدم العام",
+    averageGrade: "متوسط الدرجات",
+    totalChapters: "إجمالي الفصول",
+    myCourses: "دوراتي",
+    noEnrolledCourses: "لم تسجّل في أي دورة بعد.",
+    chaptersMaterials: "{{chapters}} فصل · {{materials}} مادة",
+    quickActions: "إجراءات سريعة",
+    enrollToStart: "سجّل في دورة للبدء.",
+    continue: "متابعة",
+    start: "ابدأ",
+    chaptersDone: "{{done}}/{{total}} فصل مكتمل",
+    recentGrades: "آخر الدرجات",
+    noGradesYet: "لا توجد درجات بعد.",
+  },
+  teacherDash: {
+    title: "لوحة المعلّم",
+    subtitle: "نظرة عامة على نشاطك التدريسي.",
+    activeCourses: "الدورات النشطة",
+    totalStudents: "إجمالي الطلاب",
+    pendingGrading: "تقييمات قيد الانتظار",
+    avgPassRate: "متوسط نسبة النجاح",
+    myCourses: "دوراتي",
+    colCourse: "الدورة",
+    colStudents: "الطلاب",
+    colStatus: "الحالة",
+    recentActivity: "النشاط الأخير",
+    submitted: "تم الإرسال {{when}}",
+    pending: "قيد الانتظار",
+  },
+  adminDash: {
+    title: "لوحة الإدارة",
+    subtitle: "نظرة عامة على المنصّة والمؤشرات الرئيسية.",
+    addStudent: "إضافة طالب",
+    newCourse: "دورة جديدة",
+    totalStudents: "إجمالي الطلاب",
+    activeCourses: "الدورات النشطة",
+    teachers: "المعلمون",
+    activeBatches: "الدفعات النشطة",
+    openTickets: "تذاكر مفتوحة",
+    revenue: "الإيرادات",
+    departments: "الأقسام",
+    classrooms: "الفصول",
+    subjects: "المواد",
+    resources: "الموارد",
+    coursesOverview: "نظرة عامة على الدورات",
+    batchCapacity: "سعة الدفعات",
+    noCourseData: "لا توجد بيانات دورات متاحة.",
+    noBatchData: "لا توجد بيانات دفعات متاحة.",
+    quickSummary: "ملخّص سريع",
+    colModule: "الوحدة",
+    colCount: "العدد",
+    colStatus: "الحالة",
+    exams: "الاختبارات",
+    examSessionsCount: "{{n}} جلسة",
+    assignments: "الواجبات",
+    acrossCourses: "عبر جميع الدورات",
+    supportTickets: "تذاكر الدعم",
+    ticketsOpenCount: "{{n}} مفتوحة",
+    payments: "المدفوعات",
+    revenueTotal: "{{amount}} إجمالاً",
+    chartCapacity: "السعة",
+    chartEnrolled: "المسجّلون",
+  },
+  examPopup: {
+    title: "اختبارات قادمة ({{n}})",
+    activeNow: "متاح الآن",
+    from: "من:",
+    to: "إلى:",
+    startExam: "ابدأ الاختبار",
+    notAvailableYet: "غير متاح بعد",
+    willBeAvailable: "سيتاح الاختبار عندما يصبح نشطاً",
+    notActive: "الاختبار غير نشط حالياً",
+  },
+  errors: {
+    somethingWrong: "حدث خطأ ما",
+    unexpectedDescription: "حدث خطأ غير متوقع. يرجى تحديث الصفحة والمحاولة مرة أخرى.",
+    errorDetails: "تفاصيل الخطأ",
+    refreshPage: "تحديث الصفحة",
+    notFoundCode: "404",
+    notFoundMessage: "عذراً! الصفحة غير موجودة",
+    returnHome: "العودة إلى الرئيسية",
+  },
+  ai: {
+    assistantLabel: "مساعد الذكاء الاصطناعي",
+    assistantTitle: "مساعد EnCoach الذكي",
+    placeholder: "اسأل عن أي شيء…",
+    send: "إرسال",
+    thinking: "يفكّر…",
+    emptyLine1: "اسألني عن أي شيء يخص المنصّة،",
+    emptyLine2: "أو اختر إجراءً سريعاً من الأعلى.",
+    fallbackReply: "عذراً، تعذّر الوصول إلى المساعد. يرجى المحاولة مرة أخرى بعد قليل.",
+    replyErrorTitle: "تعذّر الحصول على ردّ",
+    replyErrorDesc: "حدث خطأ ما. يرجى المحاولة مرة أخرى.",
+    quickHealth: "ملخّص حالة المنصّة",
+    quickDropouts: "عرض مخاطر التسرّب",
+    quickCompare: "مقارنة أداء الدورات",
+    quickBatch: "اقتراحات لتحسين الدفعات",
+    tipLabel: "نصيحة الذكاء الاصطناعي",
+    insightLabel: "رؤية الذكاء الاصطناعي",
+    recommendationLabel: "توصية الذكاء الاصطناعي",
+    categoryTipLabel: "نصيحة {{category}} من الذكاء الاصطناعي",
+    loadingTip: "جارٍ تحميل النصيحة…",
+    loadingInsights: "جارٍ تحميل الرؤى…",
+    loadingAlerts: "جارٍ تحميل التنبيهات…",
+    couldNotLoadTip: "تعذّر تحميل النصيحة.",
+    couldNotLoadInsights: "تعذّر تحميل الرؤى.",
+    couldNotLoadAlerts: "تعذّر تحميل التنبيهات.",
+    noTipAvailable: "لا توجد نصيحة متاحة.",
+    noTipForContext: "لا توجد نصيحة لهذا السياق بعد.",
+    noInsightsAvailable: "لا توجد رؤى متاحة لهذا العرض.",
+    noAlertsRightNow: "لا توجد تنبيهات ذكاء اصطناعي حالياً.",
+    alertsUnavailable: "التنبيهات غير متاحة",
+    insightsUnavailable: "الرؤى غير متاحة",
+    platformInsightsTitle: "رؤى المنصّة من الذكاء الاصطناعي",
   },
   privacy: {
     title: "مركز الخصوصية",
@@ -74,12 +337,6 @@ const ar: Translations = {
     commentRequired: "من فضلك أخبرنا بالخطأ.",
     submit: "إرسال الملاحظات",
   },
-  theme: {
-    title: "المظهر",
-    light: "فاتح",
-    dark: "داكن",
-    system: "النظام",
-  },
 };
 
 export default ar;
diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index 0e668459..0c083503 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -3,14 +3,33 @@
  * We deliberately annotate the literal with `Translations` (not `as const`)
  * so sibling locale files can widen their string values without fighting
  * literal-string type mismatches.
+ *
+ * Adding a new key: add it here FIRST (English is the source of truth), then
+ * mirror it in `ar.ts`. The `Translations` interface is intentionally
+ * permissive (`Record<string, string>` per group) so we don't have to update
+ * a giant type every time we add a string.
  */
 export interface Translations {
   common: Record<string, string>;
   auth: Record<string, string>;
   nav: Record<string, string>;
+  sidebarGroup: Record<string, string>;
+  breadcrumb: Record<string, string>;
+  userMenu: Record<string, string>;
+  chrome: Record<string, string>;
+  notifications: Record<string, string>;
+  theme: Record<string, string>;
+  language: Record<string, string>;
+  roles: Record<string, string>;
+  dashboard: Record<string, string>;
+  studentDash: Record<string, string>;
+  teacherDash: Record<string, string>;
+  adminDash: Record<string, string>;
+  examPopup: Record<string, string>;
+  errors: Record<string, string>;
+  ai: Record<string, string>;
   privacy: Record<string, string>;
   feedback: Record<string, string>;
-  theme: Record<string, string>;
 }
 
 const en: Translations = {
@@ -32,30 +51,293 @@ const en: Translations = {
     status: "Status",
     settings: "Settings",
     signOut: "Sign out",
+    viewAll: "View All",
+    dismiss: "Dismiss",
+    pending: "Pending",
+    active: "Active",
+    inactive: "Inactive",
+    available: "Available",
+    unavailable: "Unavailable",
+    name: "Name",
+    email: "Email",
+    user: "User",
+    home: "Home",
   },
   auth: {
     signIn: "Sign in",
     signInTitle: "Sign in to EnCoach",
+    welcomeBack: "Welcome back",
+    signInDescription: "Sign in to your account to continue",
     email: "Email",
+    emailPlaceholder: "you@example.com",
     password: "Password",
+    rememberMe: "Remember me",
     forgotPassword: "Forgot password?",
     needAccount: "Don't have an account?",
     signUp: "Sign up",
     invalidCredentials: "Invalid email or password",
+    missingCredentials: "Please enter email and password",
+    loginFailedTitle: "Login Failed",
+    errorTitle: "Error",
   },
   nav: {
+    adminDashboard: "Admin Dashboard",
+    platformDashboard: "Platform Dashboard",
     dashboard: "Dashboard",
     courses: "Courses",
+    myCourses: "My Courses",
     students: "Students",
     teachers: "Teachers",
-    exams: "Exams",
+    batches: "Batches",
+    timetable: "Timetable",
     reports: "Reports",
-    settings: "Settings",
-    profile: "Profile",
-    privacy: "Privacy Center",
+    assignments: "Assignments",
+    examsList: "Exams List",
+    examStructures: "Exam Structures",
+    rubrics: "Rubrics",
+    generation: "Generation",
     reviewQueue: "Review Queue",
     aiPrompts: "AI Prompts",
     aiFeedback: "AI Feedback",
+    approvalWorkflows: "Approval Workflows",
+    taxonomy: "Taxonomy",
+    resources: "Resources",
+    resourceLibrary: "Resource Library",
+    academicYears: "Academic Years",
+    departments: "Departments",
+    admissions: "Admissions",
+    admissionRegister: "Admission Register",
+    examSessions: "Exam Sessions",
+    marksheets: "Marksheets",
+    studentLeave: "Student Leave",
+    fees: "Fees & Payments",
+    lessons: "Lessons",
+    gradebook: "Gradebook",
+    studentProgress: "Student Progress",
+    library: "Library",
+    activities: "Activities",
+    facilities: "Facilities",
+    users: "Users",
+    entities: "Entities",
+    classrooms: "Classrooms",
+    userRoles: "User Roles",
+    rolesPermissions: "Roles & Permissions",
+    authorityMatrix: "Authority Matrix",
+    studentPerformance: "Student Performance",
+    statsCorporate: "Stats Corporate",
+    record: "Record",
+    vocabulary: "Vocabulary",
+    grammar: "Grammar",
+    faqManager: "FAQ Manager",
+    notificationRules: "Notification Rules",
+    approvalConfig: "Approval Config",
+    paymentRecord: "Payment Record",
+    tickets: "Tickets",
+    settings: "Settings",
+    profile: "Profile",
+    privacy: "Privacy Center",
+    subjectRegistration: "Subject Registration",
+    mySubjects: "My Subjects",
+    grades: "Grades",
+    attendance: "Attendance",
+    myJourney: "My Journey",
+    discussions: "Discussions",
+    messages: "Messages",
+    announcements: "Announcements",
+  },
+  sidebarGroup: {
+    overview: "Overview",
+    lms: "LMS",
+    adaptiveLearning: "Adaptive Learning",
+    institutional: "Institutional",
+    academic: "Academic",
+    management: "Management",
+    reports: "Reports",
+    configuration: "Configuration",
+    training: "Training",
+    support: "Support",
+    learning: "Learning",
+    progress: "Progress",
+    communication: "Communication",
+    account: "Account",
+    teaching: "Teaching",
+  },
+  breadcrumb: {
+    home: "Home",
+    admin: "Admin",
+    dashboard: "Dashboard",
+    platform: "Platform",
+    exam: "Exam",
+    review: "Review",
+    ai: "AI",
+    feedback: "Feedback",
+  },
+  userMenu: {
+    profile: "Profile",
+    settings: "Settings",
+    logout: "Logout",
+    userFallback: "User",
+  },
+  chrome: {
+    needHelp: "Need help?",
+    ticketsTooltip: "Support tickets",
+    aiSearchPlaceholder: "Ask anything... e.g. 'Show students with low attendance'",
+    aiSearching: "AI is searching…",
+    aiRelatedQueries: "Related queries",
+    aiNoResults: "No results for \"{{q}}\". Try a different question or keyword.",
+    aiSearchFailedTitle: "Search failed",
+    aiSearchFailedDesc: "Could not complete AI search.",
+    portalSuffix: "Portal",
+    adminAlt: "EnCoach",
+    adminAltLong: "EnCoach — Unlock your potential with AI powered platform",
+    toggleSidebar: "Toggle sidebar",
+  },
+  notifications: {
+    title: "Notifications",
+    empty: "You're all caught up.",
+    ariaLabel: "Notifications",
+  },
+  theme: {
+    title: "Theme",
+    light: "Light",
+    dark: "Dark",
+    system: "System",
+    toggleLabel: "Toggle theme",
+  },
+  language: {
+    change: "Change language",
+    label: "Language",
+  },
+  roles: {
+    student: "student",
+    teacher: "teacher",
+    admin: "admin",
+    developer: "developer",
+    corporate: "corporate",
+    mastercorporate: "master corporate",
+    agent: "agent",
+  },
+  dashboard: {
+    greetingFallback: "Student",
+  },
+  studentDash: {
+    welcome: "Welcome back, {{name}}!",
+    subtitle: "Here's an overview of your learning progress.",
+    enrolledCourses: "Enrolled Courses",
+    overallProgress: "Overall Progress",
+    averageGrade: "Average Grade",
+    totalChapters: "Total Chapters",
+    myCourses: "My Courses",
+    noEnrolledCourses: "No enrolled courses yet.",
+    chaptersMaterials: "{{chapters}} chapters · {{materials}} materials",
+    quickActions: "Quick Actions",
+    enrollToStart: "Enroll in a course to get started.",
+    continue: "Continue",
+    start: "Start",
+    chaptersDone: "{{done}}/{{total}} chapters done",
+    recentGrades: "Recent Grades",
+    noGradesYet: "No grades yet.",
+  },
+  teacherDash: {
+    title: "Teacher Dashboard",
+    subtitle: "Overview of your teaching activities.",
+    activeCourses: "Active Courses",
+    totalStudents: "Total Students",
+    pendingGrading: "Pending Grading",
+    avgPassRate: "Avg. Pass Rate",
+    myCourses: "My Courses",
+    colCourse: "Course",
+    colStudents: "Students",
+    colStatus: "Status",
+    recentActivity: "Recent Activity",
+    submitted: "Submitted {{when}}",
+    pending: "Pending",
+  },
+  adminDash: {
+    title: "Admin Dashboard",
+    subtitle: "Platform overview and key metrics.",
+    addStudent: "Add Student",
+    newCourse: "New Course",
+    totalStudents: "Total Students",
+    activeCourses: "Active Courses",
+    teachers: "Teachers",
+    activeBatches: "Active Batches",
+    openTickets: "Open Tickets",
+    revenue: "Revenue",
+    departments: "Departments",
+    classrooms: "Classrooms",
+    subjects: "Subjects",
+    resources: "Resources",
+    coursesOverview: "Courses Overview",
+    batchCapacity: "Batch Capacity",
+    noCourseData: "No course data available.",
+    noBatchData: "No batch data available.",
+    quickSummary: "Quick Summary",
+    colModule: "Module",
+    colCount: "Count",
+    colStatus: "Status",
+    exams: "Exams",
+    examSessionsCount: "{{n}} sessions",
+    assignments: "Assignments",
+    acrossCourses: "across courses",
+    supportTickets: "Support Tickets",
+    ticketsOpenCount: "{{n}} open",
+    payments: "Payments",
+    revenueTotal: "{{amount}} total",
+    chartCapacity: "Capacity",
+    chartEnrolled: "Enrolled",
+  },
+  examPopup: {
+    title: "Upcoming Exams ({{n}})",
+    activeNow: "Active Now",
+    from: "From:",
+    to: "To:",
+    startExam: "Start Exam",
+    notAvailableYet: "Not Available Yet",
+    willBeAvailable: "Exam will be available once it becomes active",
+    notActive: "Exam is not currently active",
+  },
+  errors: {
+    somethingWrong: "Something went wrong",
+    unexpectedDescription: "An unexpected error occurred. Please try refreshing the page.",
+    errorDetails: "Error details",
+    refreshPage: "Refresh Page",
+    notFoundCode: "404",
+    notFoundMessage: "Oops! Page not found",
+    returnHome: "Return to Home",
+  },
+  ai: {
+    assistantLabel: "AI Assistant",
+    assistantTitle: "EnCoach AI Assistant",
+    placeholder: "Ask anything...",
+    send: "Send",
+    thinking: "Thinking…",
+    emptyLine1: "Ask me anything about the platform,",
+    emptyLine2: "or click a quick action above.",
+    fallbackReply: "Sorry, I could not reach the assistant. Please try again in a moment.",
+    replyErrorTitle: "Could not get a reply",
+    replyErrorDesc: "Something went wrong. Try again.",
+    quickHealth: "Platform health summary",
+    quickDropouts: "Show dropout risks",
+    quickCompare: "Compare course performance",
+    quickBatch: "Suggest batch improvements",
+    tipLabel: "AI Tip",
+    insightLabel: "AI Insight",
+    recommendationLabel: "AI Recommendation",
+    categoryTipLabel: "AI {{category}} Tip",
+    loadingTip: "Loading AI tip…",
+    loadingInsights: "Loading insights…",
+    loadingAlerts: "Loading alerts…",
+    couldNotLoadTip: "Could not load tip.",
+    couldNotLoadInsights: "Could not load insights.",
+    couldNotLoadAlerts: "Could not load alerts.",
+    noTipAvailable: "No tip available.",
+    noTipForContext: "No tip for this context yet.",
+    noInsightsAvailable: "No insights available for this view.",
+    noAlertsRightNow: "No AI alerts right now.",
+    alertsUnavailable: "Alerts unavailable",
+    insightsUnavailable: "Insights unavailable",
+    platformInsightsTitle: "AI Platform Insights",
   },
   privacy: {
     title: "Privacy Center",
@@ -86,12 +368,6 @@ const en: Translations = {
     commentRequired: "Please tell us what was wrong.",
     submit: "Submit feedback",
   },
-  theme: {
-    title: "Theme",
-    light: "Light",
-    dark: "Dark",
-    system: "System",
-  },
 };
 
 export default en;
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f316264d..a6a9bc97 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -134,3 +134,103 @@
     font-family: 'JetBrains Mono', monospace;
   }
 }
+
+/* -------------------------------------------------------------------------
+ * RTL / Arabic support
+ *
+ * `tailwindcss-rtl` handles the bulk of the work: physical margin / padding /
+ * position / border / rounded / text-align / space-x utilities are mirrored
+ * automatically when `html[dir="rtl"]` is active.
+ *
+ * Below we cover the things Tailwind can't: the webfont (Inter has weak
+ * Arabic glyphs, so swap in Cairo), recharts tooltips/axes which have their
+ * own DOM, and a few icons that should NOT mirror (arrows used as pure
+ * visual affordance e.g. ChevronRight in a dropdown).
+ * ------------------------------------------------------------------------- */
+
+html[dir="rtl"] body,
+html[dir="rtl"] h1,
+html[dir="rtl"] h2,
+html[dir="rtl"] h3,
+html[dir="rtl"] h4,
+html[dir="rtl"] h5,
+html[dir="rtl"] h6,
+html[dir="rtl"] input,
+html[dir="rtl"] textarea,
+html[dir="rtl"] button,
+html[dir="rtl"] select {
+  font-family: 'Cairo', 'Inter', system-ui, sans-serif;
+}
+
+html[dir="rtl"] code,
+html[dir="rtl"] pre {
+  font-family: 'JetBrains Mono', monospace;
+}
+
+html[dir="rtl"] .recharts-wrapper,
+html[dir="rtl"] .recharts-legend-wrapper {
+  direction: ltr;
+}
+
+/* Breadcrumb and submenu chevrons: always pointing "forward" in reading
+   direction. Lucide's ChevronRight is ">" which is forward in LTR, but in
+   RTL the same arrow must become "<". We flip via CSS so no component has
+   to know about direction. */
+html[dir="rtl"] nav[aria-label="breadcrumb"] li[role="presentation"] > svg,
+html[dir="rtl"] [data-radix-menu-content] [role="menuitem"] > svg:last-child,
+html[dir="rtl"] [data-radix-popper-content-wrapper] [role="menuitem"] > svg:last-child {
+  transform: rotate(180deg);
+}
+
+/* Numbers, percentages, emails, URLs, dates should stay LTR-isolated even
+   when embedded in Arabic paragraphs, otherwise slashes / percent signs /
+   dashes drift to the wrong side and the value becomes unreadable.
+   <bdi> already gives us this per-element; the helper classes below are
+   for places where adding a wrapper element is awkward. */
+.ltr-nums,
+.dir-ltr {
+  direction: ltr;
+  unicode-bidi: isolate;
+}
+
+/* Pure-number cells & badges align to the end (right in LTR, left in RTL)
+   but the digits themselves still read left-to-right. */
+html[dir="rtl"] .numeric {
+  text-align: end;
+  direction: ltr;
+  unicode-bidi: isolate;
+}
+
+/* Some lucide icons are pure affordances (play, external-link, send) and
+   should NOT be mirrored even if tailwindcss-rtl would otherwise flip the
+   button that contains them. Authors opt-in with data-no-flip. */
+html[dir="rtl"] [data-no-flip] {
+  transform: none !important;
+}
+
+/* Keep code snippets, identifiers, and file paths readable in RTL. */
+html[dir="rtl"] code,
+html[dir="rtl"] pre,
+html[dir="rtl"] kbd,
+html[dir="rtl"] samp,
+html[dir="rtl"] [data-monospace] {
+  direction: ltr;
+  unicode-bidi: isolate;
+  text-align: start;
+}
+
+/* Scrollbars inside horizontally-scrollable tables already flip naturally
+   in RTL, but the shadow Radix portals (dropdowns, tooltips, dialogs) use
+   `right-0` / `left-0` positioning computed in JS. For safety, make sure
+   they inherit the document direction. */
+html[dir="rtl"] [data-radix-popper-content-wrapper] {
+  direction: rtl;
+}
+
+/* Inputs with dir="ltr" (email, password, URL) override but keep the
+   placeholder aligned to the visual start (right in RTL, left in LTR). */
+html[dir="rtl"] input[dir="ltr"]::placeholder,
+html[dir="rtl"] textarea[dir="ltr"]::placeholder {
+  text-align: right;
+}
+
diff --git a/frontend/src/lib/api-client.ts b/frontend/src/lib/api-client.ts
index 1fcf691f..bdce30b0 100644
--- a/frontend/src/lib/api-client.ts
+++ b/frontend/src/lib/api-client.ts
@@ -130,12 +130,32 @@ function refreshOnce(): Promise<boolean> {
   return refreshPromise;
 }
 
+function getCurrentLanguage(): string {
+  try {
+    const stored = localStorage.getItem("encoach-lang");
+    if (stored) return stored;
+  } catch {
+    // localStorage unavailable (SSR, sandboxing, etc.)
+  }
+  if (typeof navigator !== "undefined" && navigator.language) {
+    return navigator.language.split("-")[0];
+  }
+  return "en";
+}
+
 function buildHeaders(extra?: Record<string, string>, withJson = true): Record<string, string> {
   const headers: Record<string, string> = { ...extra };
   if (withJson) headers["Content-Type"] = headers["Content-Type"] || "application/json";
 
   const token = getAccessToken();
   if (token) headers["Authorization"] = `Bearer ${token}`;
+
+  // Tell the backend which UI language the user is on so AI-generated content
+  // (coaching tips, insights, alerts, narratives) can be returned in the same
+  // language instead of always defaulting to English.
+  if (!headers["Accept-Language"]) {
+    headers["Accept-Language"] = getCurrentLanguage();
+  }
   return headers;
 }
 
diff --git a/frontend/src/pages/ExamStructuresPage.tsx b/frontend/src/pages/ExamStructuresPage.tsx
index 32a1faf4..98cdb477 100644
--- a/frontend/src/pages/ExamStructuresPage.tsx
+++ b/frontend/src/pages/ExamStructuresPage.tsx
@@ -1355,11 +1355,11 @@ export default function ExamStructuresPage() {
           const examType = getExamTypeBadge(s);
           return (
             <Card key={s.id} className="border-0 shadow-sm hover:shadow-md transition-shadow cursor-pointer" onClick={() => setEditTarget(s)}>
-              <CardHeader className="pb-3">
-                <div className="flex items-center justify-between">
-                  <CardTitle className="text-base font-semibold flex items-center gap-2">
-                    <Layers className="h-4 w-4 text-primary" />{s.name}
-                  </CardTitle>
+            <CardHeader className="pb-3">
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-base font-semibold flex items-center gap-2">
+                  <Layers className="h-4 w-4 text-primary" />{s.name}
+                </CardTitle>
                   <div className="flex gap-1">
                     <Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-primary"
                       onClick={(e) => { e.stopPropagation(); setEditTarget(s); }}>
@@ -1370,9 +1370,9 @@ export default function ExamStructuresPage() {
                       <Trash2 className="h-4 w-4" />
                     </Button>
                   </div>
-                </div>
-              </CardHeader>
-              <CardContent>
+              </div>
+            </CardHeader>
+            <CardContent>
                 <div className="flex items-center gap-3 text-sm text-muted-foreground mb-3 flex-wrap">
                   {s.entity_name && <span>Entity: <span className="text-foreground font-medium">{s.entity_name}</span></span>}
                   {s.industry && <span>Industry: <span className="text-foreground font-medium">{s.industry}</span></span>}
@@ -1382,9 +1382,9 @@ export default function ExamStructuresPage() {
                   {(Array.isArray(s.modules) ? s.modules : []).map((m) => (
                     <Badge key={m} variant="secondary" className="capitalize text-xs">{m}</Badge>
                   ))}
-                </div>
-              </CardContent>
-            </Card>
+              </div>
+            </CardContent>
+          </Card>
           );
         })}
       </div>
diff --git a/frontend/src/pages/ForgotPassword.tsx b/frontend/src/pages/ForgotPassword.tsx
index 29902c00..bf0050fe 100644
--- a/frontend/src/pages/ForgotPassword.tsx
+++ b/frontend/src/pages/ForgotPassword.tsx
@@ -48,7 +48,7 @@ export default function ForgotPassword() {
             ) : null}
             <div className="mt-6 text-center">
               <Link to="/login" className="inline-flex items-center gap-1 text-sm text-primary hover:underline">
-                <ArrowLeft className="h-3 w-3" /> Back to sign in
+                <ArrowLeft className="h-3 w-3 rtl:rotate-180" /> Back to sign in
               </Link>
             </div>
           </CardContent>
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 792d7a8d..7794816d 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -10,6 +11,7 @@ import { useAuth } from "@/contexts/AuthContext";
 import { useToast } from "@/hooks/use-toast";
 import { ApiError } from "@/lib/api-client";
 import type { UserRole } from "@/types/auth";
+import { LanguageToggle } from "@/components/LanguageToggle";
 
 /** Keep in sync with `ProtectedRoute` post-login targets */
 function getRoleDashboard(role: string): string {
@@ -48,11 +50,16 @@ export default function Login() {
   const navigate = useNavigate();
   const { login } = useAuth();
   const { toast } = useToast();
+  const { t } = useTranslation();
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!email || !password) {
-      toast({ title: "Error", description: "Please enter email and password", variant: "destructive" });
+      toast({
+        title: t("auth.errorTitle"),
+        description: t("auth.missingCredentials"),
+        variant: "destructive",
+      });
       return;
     }
 
@@ -61,7 +68,11 @@ export default function Login() {
       const user = await login(email, password);
       navigate(getRoleDashboard(user.user_type));
     } catch (err: unknown) {
-      toast({ title: "Login Failed", description: loginErrorMessage(err), variant: "destructive" });
+      toast({
+        title: t("auth.loginFailedTitle"),
+        description: loginErrorMessage(err),
+        variant: "destructive",
+      });
     } finally {
       setLoading(false);
     }
@@ -69,6 +80,9 @@ export default function Login() {
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-background p-4">
+      <div className="absolute top-4 right-4">
+        <LanguageToggle />
+      </div>
       <div className="w-full max-w-md">
         <div className="flex items-center justify-center mb-8">
           <img
@@ -80,24 +94,25 @@ export default function Login() {
 
         <Card className="shadow-lg border-0 bg-card">
           <CardHeader className="text-center pb-4">
-            <CardTitle className="text-xl">Welcome back</CardTitle>
-            <CardDescription>Sign in to your account to continue</CardDescription>
+            <CardTitle className="text-xl">{t("auth.welcomeBack")}</CardTitle>
+            <CardDescription>{t("auth.signInDescription")}</CardDescription>
           </CardHeader>
           <CardContent>
             <form onSubmit={handleSubmit} className="space-y-4">
               <div className="space-y-2">
-                <Label htmlFor="email">Email</Label>
+                <Label htmlFor="email">{t("auth.email")}</Label>
                 <Input
                   id="email"
                   type="text"
-                  placeholder="you@example.com"
+                  placeholder={t("auth.emailPlaceholder")}
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   disabled={loading}
+                  dir="ltr"
                 />
               </div>
               <div className="space-y-2">
-                <Label htmlFor="password">Password</Label>
+                <Label htmlFor="password">{t("auth.password")}</Label>
                 <div className="relative">
                   <Input
                     id="password"
@@ -106,11 +121,13 @@ export default function Login() {
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
                     disabled={loading}
+                    dir="ltr"
                   />
                   <button
                     type="button"
                     onClick={() => setShowPassword(!showPassword)}
-                    className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                    aria-label={showPassword ? t("auth.password") : t("auth.password")}
+                    className="absolute end-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                   >
                     {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                   </button>
@@ -119,19 +136,25 @@ export default function Login() {
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-2">
                   <Checkbox id="remember" />
-                  <Label htmlFor="remember" className="text-sm font-normal cursor-pointer">Remember me</Label>
+                  <Label htmlFor="remember" className="text-sm font-normal cursor-pointer">
+                    {t("auth.rememberMe")}
+                  </Label>
                 </div>
-                <Link to="/forgot-password" className="text-sm text-primary hover:underline">Forgot password?</Link>
+                <Link to="/forgot-password" className="text-sm text-primary hover:underline">
+                  {t("auth.forgotPassword")}
+                </Link>
               </div>
               <Button type="submit" className="w-full" disabled={loading}>
-                {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-                Sign in
+                {loading && <Loader2 className="me-2 h-4 w-4 animate-spin" />}
+                {t("auth.signIn")}
               </Button>
             </form>
 
             <p className="mt-6 text-center text-sm text-muted-foreground">
-              Don't have an account?{" "}
-              <Link to="/register" className="text-primary font-medium hover:underline">Sign up</Link>
+              {t("auth.needAccount")}{" "}
+              <Link to="/register" className="text-primary font-medium hover:underline">
+                {t("auth.signUp")}
+              </Link>
             </p>
           </CardContent>
         </Card>
diff --git a/frontend/src/pages/NotFound.tsx b/frontend/src/pages/NotFound.tsx
index 7bc22346..fcd571e2 100644
--- a/frontend/src/pages/NotFound.tsx
+++ b/frontend/src/pages/NotFound.tsx
@@ -1,8 +1,10 @@
 import { useLocation } from "react-router-dom";
 import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 
 const NotFound = () => {
   const location = useLocation();
+  const { t } = useTranslation();
 
   useEffect(() => {
     console.error("404 Error: User attempted to access non-existent route:", location.pathname);
@@ -11,10 +13,10 @@ const NotFound = () => {
   return (
     <div className="flex min-h-screen items-center justify-center bg-muted">
       <div className="text-center">
-        <h1 className="mb-4 text-4xl font-bold">404</h1>
-        <p className="mb-4 text-xl text-muted-foreground">Oops! Page not found</p>
+        <h1 className="mb-4 text-4xl font-bold">{t("errors.notFoundCode")}</h1>
+        <p className="mb-4 text-xl text-muted-foreground">{t("errors.notFoundMessage")}</p>
         <a href="/" className="text-primary underline hover:text-primary/90">
-          Return to Home
+          {t("errors.returnHome")}
         </a>
       </div>
     </div>
diff --git a/frontend/src/pages/admin/AdminBatchDetail.tsx b/frontend/src/pages/admin/AdminBatchDetail.tsx
index 8a2714fe..71975bd0 100644
--- a/frontend/src/pages/admin/AdminBatchDetail.tsx
+++ b/frontend/src/pages/admin/AdminBatchDetail.tsx
@@ -35,7 +35,7 @@ export default function AdminBatchDetail() {
   return (
     <div className="space-y-6">
       <div className="flex items-center gap-3">
-        <Button variant="ghost" size="icon" asChild><Link to="/admin/batches"><ArrowLeft className="h-4 w-4" /></Link></Button>
+        <Button variant="ghost" size="icon" asChild><Link to="/admin/batches"><ArrowLeft className="h-4 w-4 rtl:rotate-180" /></Link></Button>
         <div>
           <h1 className="text-2xl font-bold">{batch.name}</h1>
           <p className="text-muted-foreground">{batch.course_name} · {batch.teacher_name}</p>
diff --git a/frontend/src/pages/admin/AdminLmsDashboard.tsx b/frontend/src/pages/admin/AdminLmsDashboard.tsx
index e09eb5b1..7ad4512c 100644
--- a/frontend/src/pages/admin/AdminLmsDashboard.tsx
+++ b/frontend/src/pages/admin/AdminLmsDashboard.tsx
@@ -3,6 +3,7 @@ import { Button } from "@/components/ui/button";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Users, BookOpen, GraduationCap, Layers, Ticket, DollarSign, Plus, BarChart3, FolderOpen } from "lucide-react";
 import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import { useCourses, useBatches, useStudents, useTeachers } from "@/hooks/queries";
 import { useQuery } from "@tanstack/react-query";
 import { api } from "@/lib/api-client";
@@ -32,6 +33,7 @@ interface DashboardStats {
 }
 
 export default function AdminLmsDashboard() {
+  const { t } = useTranslation();
   const { data: coursesData, isLoading: lc } = useCourses();
   const { data: studentsData, isLoading: ls } = useStudents({ size: 500 });
   const { data: teachersData, isLoading: lt } = useTeachers({ size: 500 });
@@ -58,12 +60,12 @@ export default function AdminLmsDashboard() {
   const openTickets = dbStats?.open_tickets ?? 0;
 
   const statCards = [
-    { label: "Total Students", value: String(students.length), icon: Users, color: "text-primary" },
-    { label: "Active Courses", value: `${courses.filter(c => c.status === "active").length} / ${courses.length}`, icon: BookOpen, color: "text-info" },
-    { label: "Teachers", value: String(teachers.length), icon: GraduationCap, color: "text-success" },
-    { label: "Active Batches", value: `${batches.filter(b => b.status === "active").length} / ${batches.length}`, icon: Layers, color: "text-warning" },
-    { label: "Open Tickets", value: String(openTickets), icon: Ticket, color: "text-destructive" },
-    { label: "Revenue", value: `$${revenue.toLocaleString()}`, icon: DollarSign, color: "text-success" },
+    { label: t("adminDash.totalStudents"), value: String(students.length), icon: Users, color: "text-primary" },
+    { label: t("adminDash.activeCourses"), value: `${courses.filter(c => c.status === "active").length} / ${courses.length}`, icon: BookOpen, color: "text-info" },
+    { label: t("adminDash.teachers"), value: String(teachers.length), icon: GraduationCap, color: "text-success" },
+    { label: t("adminDash.activeBatches"), value: `${batches.filter(b => b.status === "active").length} / ${batches.length}`, icon: Layers, color: "text-warning" },
+    { label: t("adminDash.openTickets"), value: String(openTickets), icon: Ticket, color: "text-destructive" },
+    { label: t("adminDash.revenue"), value: `$${revenue.toLocaleString()}`, icon: DollarSign, color: "text-success" },
   ];
 
   const courseChartData = courses.map(c => {
@@ -82,12 +84,16 @@ export default function AdminLmsDashboard() {
     <div className="space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-bold">Admin Dashboard</h1>
-          <p className="text-muted-foreground">Platform overview and key metrics.</p>
+          <h1 className="text-2xl font-bold">{t("adminDash.title")}</h1>
+          <p className="text-muted-foreground">{t("adminDash.subtitle")}</p>
         </div>
         <div className="flex gap-2">
-          <Button variant="outline" asChild><Link to="/admin/students"><Plus className="mr-1 h-3 w-3" />Add Student</Link></Button>
-          <Button asChild><Link to="/admin/courses"><Plus className="mr-1 h-3 w-3" />New Course</Link></Button>
+          <Button variant="outline" asChild>
+            <Link to="/admin/students"><Plus className="me-1 h-3 w-3" />{t("adminDash.addStudent")}</Link>
+          </Button>
+          <Button asChild>
+            <Link to="/admin/courses"><Plus className="me-1 h-3 w-3" />{t("adminDash.newCourse")}</Link>
+          </Button>
         </div>
       </div>
 
@@ -99,7 +105,7 @@ export default function AdminLmsDashboard() {
           <Card key={s.label}>
             <CardContent className="pt-4 pb-4">
               <s.icon className={`h-5 w-5 ${s.color} mb-1`} />
-              <p className="text-lg font-bold">{s.value}</p>
+              <p className="text-lg font-bold"><bdi>{s.value}</bdi></p>
               <p className="text-xs text-muted-foreground">{s.label}</p>
             </CardContent>
           </Card>
@@ -108,16 +114,16 @@ export default function AdminLmsDashboard() {
 
       <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
         {[
-          { label: "Departments", value: dbStats?.total_departments ?? 0, icon: FolderOpen },
-          { label: "Classrooms", value: dbStats?.total_classrooms ?? 0, icon: BarChart3 },
-          { label: "Subjects", value: dbStats?.total_subjects ?? 0, icon: BookOpen },
-          { label: "Resources", value: dbStats?.total_resources ?? 0, icon: Layers },
+          { label: t("adminDash.departments"), value: dbStats?.total_departments ?? 0, icon: FolderOpen },
+          { label: t("adminDash.classrooms"), value: dbStats?.total_classrooms ?? 0, icon: BarChart3 },
+          { label: t("adminDash.subjects"), value: dbStats?.total_subjects ?? 0, icon: BookOpen },
+          { label: t("adminDash.resources"), value: dbStats?.total_resources ?? 0, icon: Layers },
         ].map(s => (
           <Card key={s.label}>
             <CardContent className="pt-3 pb-3 flex items-center gap-3">
-              <s.icon className="h-4 w-4 text-muted-foreground" />
-              <div>
-                <p className="text-sm font-semibold">{s.value}</p>
+              <s.icon className="h-4 w-4 text-muted-foreground shrink-0" />
+              <div className="min-w-0">
+                <p className="text-sm font-semibold"><bdi>{s.value}</bdi></p>
                 <p className="text-xs text-muted-foreground">{s.label}</p>
               </div>
             </CardContent>
@@ -127,7 +133,7 @@ export default function AdminLmsDashboard() {
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <Card>
-          <CardHeader><CardTitle className="text-lg">Courses Overview</CardTitle></CardHeader>
+          <CardHeader><CardTitle className="text-lg">{t("adminDash.coursesOverview")}</CardTitle></CardHeader>
           <CardContent>
             {courseChartData.length > 0 ? (
               <ResponsiveContainer width="100%" height={220}>
@@ -136,18 +142,18 @@ export default function AdminLmsDashboard() {
                   <XAxis dataKey="course" className="fill-muted-foreground" tick={{ fontSize: 10 }} />
                   <YAxis className="fill-muted-foreground" tick={{ fontSize: 12 }} />
                   <Tooltip />
-                  <Bar dataKey="capacity" name="Capacity" fill="hsl(var(--primary))" radius={[4, 4, 0, 0]} />
-                  <Bar dataKey="enrolled" name="Enrolled" fill="hsl(var(--info))" radius={[4, 4, 0, 0]} />
+                  <Bar dataKey="capacity" name={t("adminDash.chartCapacity")} fill="hsl(var(--primary))" radius={[4, 4, 0, 0]} />
+                  <Bar dataKey="enrolled" name={t("adminDash.chartEnrolled")} fill="hsl(var(--info))" radius={[4, 4, 0, 0]} />
                 </BarChart>
               </ResponsiveContainer>
             ) : (
-              <p className="text-sm text-muted-foreground py-8 text-center">No course data available.</p>
+              <p className="text-sm text-muted-foreground py-8 text-center">{t("adminDash.noCourseData")}</p>
             )}
           </CardContent>
         </Card>
 
         <Card>
-          <CardHeader><CardTitle className="text-lg">Batch Capacity</CardTitle></CardHeader>
+          <CardHeader><CardTitle className="text-lg">{t("adminDash.batchCapacity")}</CardTitle></CardHeader>
           <CardContent>
             {batchChartData.length > 0 ? (
               <ResponsiveContainer width="100%" height={220}>
@@ -156,11 +162,11 @@ export default function AdminLmsDashboard() {
                   <XAxis dataKey="batch" className="fill-muted-foreground" tick={{ fontSize: 10 }} />
                   <YAxis className="fill-muted-foreground" tick={{ fontSize: 12 }} />
                   <Tooltip />
-                  <Bar dataKey="capacity" name="Capacity" fill="hsl(var(--info))" radius={[4, 4, 0, 0]} />
+                  <Bar dataKey="capacity" name={t("adminDash.chartCapacity")} fill="hsl(var(--info))" radius={[4, 4, 0, 0]} />
                 </BarChart>
               </ResponsiveContainer>
             ) : (
-              <p className="text-sm text-muted-foreground py-8 text-center">No batch data available.</p>
+              <p className="text-sm text-muted-foreground py-8 text-center">{t("adminDash.noBatchData")}</p>
             )}
           </CardContent>
         </Card>
@@ -168,31 +174,43 @@ export default function AdminLmsDashboard() {
 
       <Card>
         <CardHeader className="flex flex-row items-center justify-between pb-2">
-          <CardTitle className="text-lg">Quick Summary</CardTitle>
+          <CardTitle className="text-lg">{t("adminDash.quickSummary")}</CardTitle>
         </CardHeader>
         <CardContent>
           <Table>
-            <TableHeader><TableRow><TableHead>Module</TableHead><TableHead className="text-right">Count</TableHead><TableHead>Status</TableHead></TableRow></TableHeader>
+            <TableHeader>
+              <TableRow>
+                <TableHead>{t("adminDash.colModule")}</TableHead>
+                <TableHead className="text-end">{t("adminDash.colCount")}</TableHead>
+                <TableHead>{t("adminDash.colStatus")}</TableHead>
+              </TableRow>
+            </TableHeader>
             <TableBody>
               <TableRow>
-                <TableCell className="font-medium">Exams</TableCell>
-                <TableCell className="text-right">{dbStats?.total_exams ?? 0}</TableCell>
-                <TableCell className="text-muted-foreground">{dbStats?.total_exam_sessions ?? 0} sessions</TableCell>
+                <TableCell className="font-medium">{t("adminDash.exams")}</TableCell>
+                <TableCell className="text-end"><bdi>{dbStats?.total_exams ?? 0}</bdi></TableCell>
+                <TableCell className="text-muted-foreground">
+                  {t("adminDash.examSessionsCount", { n: dbStats?.total_exam_sessions ?? 0 })}
+                </TableCell>
               </TableRow>
               <TableRow>
-                <TableCell className="font-medium">Assignments</TableCell>
-                <TableCell className="text-right">{dbStats?.total_assignments ?? 0}</TableCell>
-                <TableCell className="text-muted-foreground">across courses</TableCell>
+                <TableCell className="font-medium">{t("adminDash.assignments")}</TableCell>
+                <TableCell className="text-end"><bdi>{dbStats?.total_assignments ?? 0}</bdi></TableCell>
+                <TableCell className="text-muted-foreground">{t("adminDash.acrossCourses")}</TableCell>
               </TableRow>
               <TableRow>
-                <TableCell className="font-medium">Support Tickets</TableCell>
-                <TableCell className="text-right">{dbStats?.total_tickets ?? 0}</TableCell>
-                <TableCell className="text-muted-foreground">{openTickets} open</TableCell>
+                <TableCell className="font-medium">{t("adminDash.supportTickets")}</TableCell>
+                <TableCell className="text-end"><bdi>{dbStats?.total_tickets ?? 0}</bdi></TableCell>
+                <TableCell className="text-muted-foreground">
+                  {t("adminDash.ticketsOpenCount", { n: openTickets })}
+                </TableCell>
               </TableRow>
               <TableRow>
-                <TableCell className="font-medium">Payments</TableCell>
-                <TableCell className="text-right">{dbStats?.total_payments ?? 0}</TableCell>
-                <TableCell className="text-muted-foreground">${revenue.toLocaleString()} total</TableCell>
+                <TableCell className="font-medium">{t("adminDash.payments")}</TableCell>
+                <TableCell className="text-end"><bdi>{dbStats?.total_payments ?? 0}</bdi></TableCell>
+                <TableCell className="text-muted-foreground">
+                  {t("adminDash.revenueTotal", { amount: `$${revenue.toLocaleString()}` })}
+                </TableCell>
               </TableRow>
             </TableBody>
           </Table>
diff --git a/frontend/src/pages/admin/AdmissionDetail.tsx b/frontend/src/pages/admin/AdmissionDetail.tsx
index eb16fdf7..9c52d278 100644
--- a/frontend/src/pages/admin/AdmissionDetail.tsx
+++ b/frontend/src/pages/admin/AdmissionDetail.tsx
@@ -57,7 +57,7 @@ export default function AdmissionDetail() {
     <div className="space-y-6">
       <div className="flex items-center gap-4">
         <Button variant="ghost" size="icon" onClick={() => navigate("/admin/admissions")}>
-          <ArrowLeft className="h-4 w-4" />
+          <ArrowLeft className="h-4 w-4 rtl:rotate-180" />
         </Button>
         <div className="flex-1">
           <h1 className="text-2xl font-bold">{admission.first_name} {admission.last_name}</h1>
diff --git a/frontend/src/pages/admin/ApprovalWorkflowConfig.tsx b/frontend/src/pages/admin/ApprovalWorkflowConfig.tsx
index f93434a2..10d65ff7 100644
--- a/frontend/src/pages/admin/ApprovalWorkflowConfig.tsx
+++ b/frontend/src/pages/admin/ApprovalWorkflowConfig.tsx
@@ -216,7 +216,7 @@ export default function ApprovalWorkflowConfig() {
                       <span className="h-5 w-5 rounded-full bg-primary/10 text-primary flex items-center justify-center text-xs font-medium">{step.order}</span>
                       <span>{step.approver_name}</span>
                     </div>
-                    {i < wf.steps.length - 1 && <ArrowRight className="h-4 w-4 text-muted-foreground" />}
+                    {i < wf.steps.length - 1 && <ArrowRight className="h-4 w-4 text-muted-foreground rtl:rotate-180" />}
                   </div>
                 ))}
               </div>
diff --git a/frontend/src/pages/admin/ExamReviewDetail.tsx b/frontend/src/pages/admin/ExamReviewDetail.tsx
index 34dfa0a7..a865207e 100644
--- a/frontend/src/pages/admin/ExamReviewDetail.tsx
+++ b/frontend/src/pages/admin/ExamReviewDetail.tsx
@@ -155,7 +155,7 @@ export default function ExamReviewDetail() {
         <div className="space-y-1">
           <Button asChild variant="ghost" size="sm" className="-ml-2">
             <Link to="/admin/exam/review-queue">
-              <ArrowLeft className="h-4 w-4 mr-1" /> Back to queue
+              <ArrowLeft className="h-4 w-4 me-1 rtl:rotate-180" /> Back to queue
             </Link>
           </Button>
           <h1 className="text-2xl font-bold tracking-tight">{exam.title}</h1>
diff --git a/frontend/src/pages/student/DiagnosticTest.tsx b/frontend/src/pages/student/DiagnosticTest.tsx
index 0ae3f7af..7dcdf114 100644
--- a/frontend/src/pages/student/DiagnosticTest.tsx
+++ b/frontend/src/pages/student/DiagnosticTest.tsx
@@ -117,7 +117,7 @@ export default function DiagnosticTest() {
             )}
             <Button className="w-full" onClick={handleAnswer} disabled={!selectedAnswer || answerMutation.isPending}>
               {answerMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-              Submit Answer <ArrowRight className="ml-1 h-4 w-4" />
+              Submit Answer <ArrowRight className="ms-1 h-4 w-4 rtl:rotate-180" />
             </Button>
           </CardContent>
         </Card>
diff --git a/frontend/src/pages/student/LearningPlan.tsx b/frontend/src/pages/student/LearningPlan.tsx
index 2b1dbd78..4bab24c4 100644
--- a/frontend/src/pages/student/LearningPlan.tsx
+++ b/frontend/src/pages/student/LearningPlan.tsx
@@ -106,7 +106,7 @@ export default function LearningPlanPage() {
                 </div>
                 {(item.status === "available" || item.status === "in_progress") && (
                   <Button size="sm" onClick={() => navigate(`/student/topic/${item.topic_id}`)}>
-                    {item.status === "in_progress" ? "Continue" : "Start"} <ArrowRight className="ml-1 h-3 w-3" />
+                    {item.status === "in_progress" ? "Continue" : "Start"} <ArrowRight className="ms-1 h-3 w-3 rtl:rotate-180" />
                   </Button>
                 )}
                 {item.status === "completed" && (
diff --git a/frontend/src/pages/student/ProficiencyProfile.tsx b/frontend/src/pages/student/ProficiencyProfile.tsx
index 23c56c91..db765fab 100644
--- a/frontend/src/pages/student/ProficiencyProfile.tsx
+++ b/frontend/src/pages/student/ProficiencyProfile.tsx
@@ -41,7 +41,7 @@ export default function ProficiencyProfile() {
         </div>
         <div className="flex gap-2">
           <Button variant="outline" onClick={() => navigate(`/student/diagnostic/${subjectId}`)}>Retake Diagnostic</Button>
-          <Button onClick={() => navigate(`/student/plan/${subjectId}`)}>Learning Plan <ArrowRight className="ml-1 h-4 w-4" /></Button>
+          <Button onClick={() => navigate(`/student/plan/${subjectId}`)}>Learning Plan <ArrowRight className="ms-1 h-4 w-4 rtl:rotate-180" /></Button>
         </div>
       </div>
 
diff --git a/frontend/src/pages/student/StudentCourseDetail.tsx b/frontend/src/pages/student/StudentCourseDetail.tsx
index 8cae969b..f51193e7 100644
--- a/frontend/src/pages/student/StudentCourseDetail.tsx
+++ b/frontend/src/pages/student/StudentCourseDetail.tsx
@@ -28,7 +28,7 @@ export default function StudentCourseDetail() {
   return (
     <div className="space-y-6">
       <div className="flex items-center gap-3">
-        <Button variant="ghost" size="icon" asChild><Link to="/student/courses"><ArrowLeft className="h-4 w-4" /></Link></Button>
+        <Button variant="ghost" size="icon" asChild><Link to="/student/courses"><ArrowLeft className="h-4 w-4 rtl:rotate-180" /></Link></Button>
         <div>
           <h1 className="text-2xl font-bold">{course.title}</h1>
           <p className="text-muted-foreground">{course.code} · {chapters.length} chapters</p>
diff --git a/frontend/src/pages/student/StudentDashboard.tsx b/frontend/src/pages/student/StudentDashboard.tsx
index e0526005..d92f4c14 100644
--- a/frontend/src/pages/student/StudentDashboard.tsx
+++ b/frontend/src/pages/student/StudentDashboard.tsx
@@ -4,6 +4,7 @@ import { Badge } from "@/components/ui/badge";
 import { Progress } from "@/components/ui/progress";
 import { BookOpen, ClipboardList, BarChart3, Calendar, ArrowRight, Play } from "lucide-react";
 import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import { useMyEnrolledCourses, useGrades } from "@/hooks/queries";
 import { useAuth } from "@/contexts/AuthContext";
 import AiStudyCoach from "@/components/ai/AiStudyCoach";
@@ -11,6 +12,7 @@ import AiTipBanner from "@/components/ai/AiTipBanner";
 
 export default function StudentDashboard() {
   const { user } = useAuth();
+  const { t } = useTranslation();
   const { data: enrolledData, isLoading: lc } = useMyEnrolledCourses();
   const { data: gradesData, isLoading: lg } = useGrades();
   const myCourses = enrolledData?.items ?? [];
@@ -22,20 +24,20 @@ export default function StudentDashboard() {
   const avgGrade = gradeRecords.length > 0
     ? Math.round(gradeRecords.reduce((s, g) => s + (g.grade / g.max_grade) * 100, 0) / gradeRecords.length)
     : 0;
-  const firstName = user?.name?.split(" ")[0] || "Student";
+  const firstName = user?.name?.split(" ")[0] || t("dashboard.greetingFallback");
 
   const stats = [
-    { label: "Enrolled Courses", value: String(myCourses.length), icon: BookOpen, color: "text-primary" },
-    { label: "Overall Progress", value: `${avgProgress}%`, icon: ClipboardList, color: "text-warning" },
-    { label: "Average Grade", value: gradeRecords.length > 0 ? `${avgGrade}%` : "N/A", icon: BarChart3, color: "text-success" },
-    { label: "Total Chapters", value: String(myCourses.reduce((s, c) => s + c.chapter_count, 0)), icon: Calendar, color: "text-info" },
+    { label: t("studentDash.enrolledCourses"), value: String(myCourses.length), icon: BookOpen, color: "text-primary" },
+    { label: t("studentDash.overallProgress"), value: `${avgProgress}%`, icon: ClipboardList, color: "text-warning" },
+    { label: t("studentDash.averageGrade"), value: gradeRecords.length > 0 ? `${avgGrade}%` : "N/A", icon: BarChart3, color: "text-success" },
+    { label: t("studentDash.totalChapters"), value: String(myCourses.reduce((s, c) => s + c.chapter_count, 0)), icon: Calendar, color: "text-info" },
   ];
 
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-2xl font-bold">Welcome back, {firstName}!</h1>
-        <p className="text-muted-foreground">Here's an overview of your learning progress.</p>
+        <h1 className="text-2xl font-bold">{t("studentDash.welcome", { name: firstName })}</h1>
+        <p className="text-muted-foreground">{t("studentDash.subtitle")}</p>
       </div>
 
       <AiTipBanner context="student-dashboard" variant="tip" />
@@ -46,12 +48,12 @@ export default function StudentDashboard() {
         {stats.map((s) => (
           <Card key={s.label}>
             <CardContent className="pt-6">
-              <div className="flex items-center justify-between">
-                <div>
+              <div className="flex items-center justify-between gap-3">
+                <div className="min-w-0">
                   <p className="text-sm text-muted-foreground">{s.label}</p>
-                  <p className="text-2xl font-bold">{s.value}</p>
+                  <p className="text-2xl font-bold"><bdi>{s.value}</bdi></p>
                 </div>
-                <s.icon className={`h-8 w-8 ${s.color} opacity-80`} />
+                <s.icon className={`h-8 w-8 ${s.color} opacity-80 shrink-0`} />
               </div>
             </CardContent>
           </Card>
@@ -61,22 +63,28 @@ export default function StudentDashboard() {
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <Card>
           <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <CardTitle className="text-lg">My Courses</CardTitle>
-            <Button variant="ghost" size="sm" asChild><Link to="/student/courses">View All <ArrowRight className="ml-1 h-3 w-3" /></Link></Button>
+            <CardTitle className="text-lg">{t("studentDash.myCourses")}</CardTitle>
+            <Button variant="ghost" size="sm" asChild>
+              <Link to="/student/courses">
+                {t("common.viewAll")} <ArrowRight className="ms-1 h-3 w-3 rtl:rotate-180" />
+              </Link>
+            </Button>
           </CardHeader>
           <CardContent className="space-y-4">
             {myCourses.length === 0 ? (
-              <p className="text-sm text-muted-foreground text-center py-4">No enrolled courses yet.</p>
+              <p className="text-sm text-muted-foreground text-center py-4">{t("studentDash.noEnrolledCourses")}</p>
             ) : myCourses.map((c) => (
               <Link to={`/student/courses/${c.id}`} key={c.id} className="block">
                 <div className="flex items-center justify-between p-3 rounded-lg border hover:bg-muted/50 transition-colors">
                   <div className="min-w-0">
                     <p className="font-medium text-sm truncate">{c.title || c.name}</p>
-                    <p className="text-xs text-muted-foreground">{c.chapter_count} chapters · {c.total_materials} materials</p>
+                    <p className="text-xs text-muted-foreground">
+                      {t("studentDash.chaptersMaterials", { chapters: c.chapter_count, materials: c.total_materials })}
+                    </p>
                   </div>
                   <div className="flex items-center gap-3 shrink-0">
                     <div className="w-24"><Progress value={c.progress} className="h-2" /></div>
-                    <span className="text-xs font-medium w-8 text-right">{c.progress}%</span>
+                    <span className="text-xs font-medium w-8 text-end"><bdi>{c.progress}%</bdi></span>
                   </div>
                 </div>
               </Link>
@@ -87,35 +95,45 @@ export default function StudentDashboard() {
         <div className="space-y-6">
           <Card>
             <CardHeader className="flex flex-row items-center justify-between pb-2">
-              <CardTitle className="text-lg">Quick Actions</CardTitle>
+              <CardTitle className="text-lg">{t("studentDash.quickActions")}</CardTitle>
             </CardHeader>
             <CardContent className="space-y-3">
               {myCourses.slice(0, 3).map(c => (
                 <Link key={c.id} to={`/student/courses/${c.id}`} className="flex items-center gap-3 p-3 rounded-lg border hover:bg-muted/50 transition-colors">
                   <Play className="h-4 w-4 text-primary shrink-0" />
                   <div className="flex-1 min-w-0">
-                    <p className="text-sm font-medium truncate">{c.progress > 0 ? "Continue" : "Start"} {c.title || c.name}</p>
-                    <p className="text-xs text-muted-foreground">{c.completed_chapters}/{c.chapter_count} chapters done</p>
+                    <p className="text-sm font-medium truncate">
+                      {c.progress > 0 ? t("studentDash.continue") : t("studentDash.start")} {c.title || c.name}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {t("studentDash.chaptersDone", { done: c.completed_chapters, total: c.chapter_count })}
+                    </p>
                   </div>
-                  <Badge variant="outline">{c.progress}%</Badge>
+                  <Badge variant="outline"><bdi>{c.progress}%</bdi></Badge>
                 </Link>
               ))}
-              {myCourses.length === 0 && <p className="text-sm text-muted-foreground text-center py-4">Enroll in a course to get started.</p>}
+              {myCourses.length === 0 && (
+                <p className="text-sm text-muted-foreground text-center py-4">{t("studentDash.enrollToStart")}</p>
+              )}
             </CardContent>
           </Card>
 
           <Card>
             <CardHeader className="flex flex-row items-center justify-between pb-2">
-              <CardTitle className="text-lg">Recent Grades</CardTitle>
-              <Button variant="ghost" size="sm" asChild><Link to="/student/grades">View All <ArrowRight className="ml-1 h-3 w-3" /></Link></Button>
+              <CardTitle className="text-lg">{t("studentDash.recentGrades")}</CardTitle>
+              <Button variant="ghost" size="sm" asChild>
+                <Link to="/student/grades">
+                  {t("common.viewAll")} <ArrowRight className="ms-1 h-3 w-3 rtl:rotate-180" />
+                </Link>
+              </Button>
             </CardHeader>
             <CardContent className="space-y-3">
               {recentGrades.length === 0 ? (
-                <p className="text-sm text-muted-foreground text-center py-4">No grades yet.</p>
+                <p className="text-sm text-muted-foreground text-center py-4">{t("studentDash.noGradesYet")}</p>
               ) : recentGrades.map((g) => (
-                <div key={g.id} className="flex items-center justify-between p-2 rounded border">
-                  <div><p className="text-sm font-medium">{g.assignment_title}</p><p className="text-xs text-muted-foreground">{g.course_name}</p></div>
-                  <span className="text-sm font-bold text-primary">{g.grade}/{g.max_grade}</span>
+                <div key={g.id} className="flex items-center justify-between p-2 rounded border gap-3">
+                  <div className="min-w-0"><p className="text-sm font-medium truncate" dir="auto">{g.assignment_title}</p><p className="text-xs text-muted-foreground truncate" dir="auto">{g.course_name}</p></div>
+                  <span className="text-sm font-bold text-primary shrink-0"><bdi>{g.grade}/{g.max_grade}</bdi></span>
                 </div>
               ))}
             </CardContent>
diff --git a/frontend/src/pages/student/StudentDiscussionBoard.tsx b/frontend/src/pages/student/StudentDiscussionBoard.tsx
index 5d44c7f1..1f886eb7 100644
--- a/frontend/src/pages/student/StudentDiscussionBoard.tsx
+++ b/frontend/src/pages/student/StudentDiscussionBoard.tsx
@@ -133,7 +133,7 @@ export default function StudentDiscussionBoard() {
         <div className="space-y-4">
           <div className="flex items-center justify-between">
             <Button variant="ghost" onClick={() => setSelectedBoardId(null)}>
-              <ArrowLeft className="mr-2 h-4 w-4" /> Back to Boards
+              <ArrowLeft className="me-2 h-4 w-4 rtl:rotate-180" /> Back to Boards
             </Button>
             <Dialog open={showNewPost} onOpenChange={setShowNewPost}>
               <Button onClick={() => setShowNewPost(true)}><MessageSquare className="mr-2 h-4 w-4" /> New Post</Button>
diff --git a/frontend/src/pages/student/SubjectSelection.tsx b/frontend/src/pages/student/SubjectSelection.tsx
index c066c695..4b9773d3 100644
--- a/frontend/src/pages/student/SubjectSelection.tsx
+++ b/frontend/src/pages/student/SubjectSelection.tsx
@@ -58,7 +58,7 @@ export default function SubjectSelection() {
                         View Profile
                       </Button>
                       <Button size="sm" className="flex-1" onClick={() => navigate(`/student/plan/${subject.id}`)}>
-                        Learning Plan <ArrowRight className="ml-1 h-3 w-3" />
+                        Learning Plan <ArrowRight className="ms-1 h-3 w-3 rtl:rotate-180" />
                       </Button>
                     </div>
                   </>
@@ -66,7 +66,7 @@ export default function SubjectSelection() {
                   <>
                     <p className="text-sm text-muted-foreground">Take a diagnostic assessment to discover your proficiency level and get a personalized learning plan.</p>
                     <Button className="w-full" onClick={() => navigate(`/student/diagnostic/${subject.id}`)}>
-                      Start Diagnostic <ArrowRight className="ml-1 h-4 w-4" />
+                      Start Diagnostic <ArrowRight className="ms-1 h-4 w-4 rtl:rotate-180" />
                     </Button>
                   </>
                 )}
diff --git a/frontend/src/pages/teacher/TeacherAssignmentDetail.tsx b/frontend/src/pages/teacher/TeacherAssignmentDetail.tsx
index 04da86e6..caf97d40 100644
--- a/frontend/src/pages/teacher/TeacherAssignmentDetail.tsx
+++ b/frontend/src/pages/teacher/TeacherAssignmentDetail.tsx
@@ -32,7 +32,7 @@ export default function TeacherAssignmentDetail() {
   return (
     <div className="space-y-6">
       <div className="flex items-center gap-3">
-        <Button variant="ghost" size="icon" asChild><Link to="/teacher/assignments"><ArrowLeft className="h-4 w-4" /></Link></Button>
+        <Button variant="ghost" size="icon" asChild><Link to="/teacher/assignments"><ArrowLeft className="h-4 w-4 rtl:rotate-180" /></Link></Button>
         <div>
           <h1 className="text-2xl font-bold">{assignment.title}</h1>
           <p className="text-muted-foreground">{assignment.entity_name} · Due: {assignment.end_date}</p>
diff --git a/frontend/src/pages/teacher/TeacherDashboard.tsx b/frontend/src/pages/teacher/TeacherDashboard.tsx
index 543076c0..303a3b40 100644
--- a/frontend/src/pages/teacher/TeacherDashboard.tsx
+++ b/frontend/src/pages/teacher/TeacherDashboard.tsx
@@ -4,11 +4,13 @@ import { Badge } from "@/components/ui/badge";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { BookOpen, Users, ClipboardList, TrendingUp, ArrowRight } from "lucide-react";
 import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import { useCourses, useAssignments } from "@/hooks/queries";
 import AiInsightsPanel from "@/components/ai/AiInsightsPanel";
 import AiTipBanner from "@/components/ai/AiTipBanner";
 
 export default function TeacherDashboard() {
+  const { t } = useTranslation();
   const { data: coursesData, isLoading: lc } = useCourses();
   const { data: assignmentsData, isLoading: la } = useAssignments();
   const courses = coursesData?.items ?? [];
@@ -21,17 +23,17 @@ export default function TeacherDashboard() {
   const pendingGrading = (submissions as { id: string; studentName: string; submittedAt: string; status: string }[]).filter(s => s.status === "pending");
 
   const stats = [
-    { label: "Active Courses", value: String(teacherCourses.filter(c => c.status === "active").length), icon: BookOpen, color: "text-primary" },
-    { label: "Total Students", value: "55", icon: Users, color: "text-info" },
-    { label: "Pending Grading", value: String(pendingGrading.length), icon: ClipboardList, color: "text-warning" },
-    { label: "Avg. Pass Rate", value: "82%", icon: TrendingUp, color: "text-success" },
+    { label: t("teacherDash.activeCourses"), value: String(teacherCourses.filter(c => c.status === "active").length), icon: BookOpen, color: "text-primary" },
+    { label: t("teacherDash.totalStudents"), value: "55", icon: Users, color: "text-info" },
+    { label: t("teacherDash.pendingGrading"), value: String(pendingGrading.length), icon: ClipboardList, color: "text-warning" },
+    { label: t("teacherDash.avgPassRate"), value: "82%", icon: TrendingUp, color: "text-success" },
   ];
 
   return (
     <div className="space-y-6">
       <div>
-        <h1 className="text-2xl font-bold">Teacher Dashboard</h1>
-        <p className="text-muted-foreground">Overview of your teaching activities.</p>
+        <h1 className="text-2xl font-bold">{t("teacherDash.title")}</h1>
+        <p className="text-muted-foreground">{t("teacherDash.subtitle")}</p>
       </div>
 
       <AiTipBanner context="teacher-dashboard" variant="recommendation" />
@@ -42,9 +44,9 @@ export default function TeacherDashboard() {
         {stats.map(s => (
           <Card key={s.label}>
             <CardContent className="pt-6">
-              <div className="flex items-center justify-between">
-                <div><p className="text-sm text-muted-foreground">{s.label}</p><p className="text-2xl font-bold">{s.value}</p></div>
-                <s.icon className={`h-8 w-8 ${s.color} opacity-80`} />
+              <div className="flex items-center justify-between gap-3">
+                <div className="min-w-0"><p className="text-sm text-muted-foreground">{s.label}</p><p className="text-2xl font-bold"><bdi>{s.value}</bdi></p></div>
+                <s.icon className={`h-8 w-8 ${s.color} opacity-80 shrink-0`} />
               </div>
             </CardContent>
           </Card>
@@ -54,17 +56,27 @@ export default function TeacherDashboard() {
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <Card>
           <CardHeader className="flex flex-row items-center justify-between pb-2">
-            <CardTitle className="text-lg">My Courses</CardTitle>
-            <Button variant="ghost" size="sm" asChild><Link to="/teacher/courses">View All <ArrowRight className="ml-1 h-3 w-3" /></Link></Button>
+            <CardTitle className="text-lg">{t("teacherDash.myCourses")}</CardTitle>
+            <Button variant="ghost" size="sm" asChild>
+              <Link to="/teacher/courses">
+                {t("common.viewAll")} <ArrowRight className="ms-1 h-3 w-3 rtl:rotate-180" />
+              </Link>
+            </Button>
           </CardHeader>
           <CardContent>
             <Table>
-              <TableHeader><TableRow><TableHead>Course</TableHead><TableHead>Students</TableHead><TableHead>Status</TableHead></TableRow></TableHeader>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>{t("teacherDash.colCourse")}</TableHead>
+                  <TableHead>{t("teacherDash.colStudents")}</TableHead>
+                  <TableHead>{t("teacherDash.colStatus")}</TableHead>
+                </TableRow>
+              </TableHeader>
               <TableBody>
                 {teacherCourses.map(c => (
                   <TableRow key={c.id}>
-                    <TableCell className="font-medium">{c.title}</TableCell>
-                    <TableCell>{c.enrolled}/{c.max_capacity}</TableCell>
+                    <TableCell className="font-medium" dir="auto">{c.title}</TableCell>
+                    <TableCell><bdi>{c.enrolled}/{c.max_capacity}</bdi></TableCell>
                     <TableCell><Badge variant={c.status === "active" ? "default" : "secondary"} className="capitalize">{c.status}</Badge></TableCell>
                   </TableRow>
                 ))}
@@ -76,26 +88,35 @@ export default function TeacherDashboard() {
         <div className="space-y-6">
           <Card>
             <CardHeader className="flex flex-row items-center justify-between pb-2">
-              <CardTitle className="text-lg">Pending Grading</CardTitle>
-              <Button variant="ghost" size="sm" asChild><Link to="/teacher/assignments">View All <ArrowRight className="ml-1 h-3 w-3" /></Link></Button>
+              <CardTitle className="text-lg">{t("teacherDash.pendingGrading")}</CardTitle>
+              <Button variant="ghost" size="sm" asChild>
+                <Link to="/teacher/assignments">
+                  {t("common.viewAll")} <ArrowRight className="ms-1 h-3 w-3 rtl:rotate-180" />
+                </Link>
+              </Button>
             </CardHeader>
             <CardContent className="space-y-3">
               {pendingGrading.slice(0, 4).map(s => (
                 <div key={s.id} className="flex items-center justify-between p-2 rounded border">
-                  <div><p className="text-sm font-medium">{s.studentName}</p><p className="text-xs text-muted-foreground">Submitted {s.submittedAt}</p></div>
-                  <Badge variant="secondary">Pending</Badge>
+                  <div>
+                    <p className="text-sm font-medium">{s.studentName}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {t("teacherDash.submitted", { when: s.submittedAt })}
+                    </p>
+                  </div>
+                  <Badge variant="secondary">{t("teacherDash.pending")}</Badge>
                 </div>
               ))}
             </CardContent>
           </Card>
 
           <Card>
-            <CardHeader><CardTitle className="text-lg">Recent Activity</CardTitle></CardHeader>
+            <CardHeader><CardTitle className="text-lg">{t("teacherDash.recentActivity")}</CardTitle></CardHeader>
             <CardContent className="space-y-2">
               {activityFeed.slice(0, 4).map(a => (
                 <div key={a.id} className="text-sm">
                   <span className="font-medium">{a.user}</span> <span className="text-muted-foreground">{a.action}</span> <span>{a.target}</span>
-                  <span className="text-xs text-muted-foreground ml-2">· {a.time}</span>
+                  <span className="text-xs text-muted-foreground ms-2">· {a.time}</span>
                 </div>
               ))}
             </CardContent>
diff --git a/frontend/src/pages/teacher/TeacherDiscussionBoard.tsx b/frontend/src/pages/teacher/TeacherDiscussionBoard.tsx
index ea39410e..1f756d35 100644
--- a/frontend/src/pages/teacher/TeacherDiscussionBoard.tsx
+++ b/frontend/src/pages/teacher/TeacherDiscussionBoard.tsx
@@ -155,7 +155,7 @@ export default function TeacherDiscussionBoard() {
         <div className="space-y-4">
           <div className="flex items-center justify-between">
             <Button variant="ghost" onClick={() => setSelectedBoardId(null)}>
-              <ArrowLeft className="mr-2 h-4 w-4" /> Back to Boards
+              <ArrowLeft className="me-2 h-4 w-4 rtl:rotate-180" /> Back to Boards
             </Button>
             <Dialog open={showNewPost} onOpenChange={setShowNewPost}>
               <Button onClick={() => setShowNewPost(true)}><MessageSquare className="mr-2 h-4 w-4" /> New Post</Button>
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 5a464bd0..40d85d4a 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -96,5 +96,12 @@ export default {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [
+    require("tailwindcss-animate"),
+    // Mirrors physical utilities (ml-*, mr-*, pl-*, pr-*, left-*, right-*,
+    // text-left/right, border-l/r, rounded-l/r, space-x-*) under `dir="rtl"`
+    // so the whole app flips visually when Arabic is selected, without
+    // having to rewrite every component to use logical properties.
+    require("tailwindcss-rtl"),
+  ],
 } satisfies Config;