diff --git a/app-frontend/employer-panel/src/App.js b/app-frontend/employer-panel/src/App.js
index c5874838..45ab1874 100644
--- a/app-frontend/employer-panel/src/App.js
+++ b/app-frontend/employer-panel/src/App.js
@@ -1,5 +1,5 @@
 import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom';
-import { useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { attach401Handler } from './lib/http';
 
 import ExpressionOfInterest from './pages/ExpressionOfInterest';
@@ -23,15 +23,12 @@ import PageTitleHandler from './components/PageTitleHandler';
 
 import ProtectedRoute from './routes/ProtectedRoute';
 
-import Timesheet from "./pages/Timesheet";
+import Timesheet from './pages/Timesheet';
 import DailyMonitoring from './pages/DailyMonitoring';
 import Payroll from './pages/Payroll';
 import PrivacyPolicy from './pages/PrivacyPolicy';
 import TermsAndConditions from './pages/TermsAndConditions';
 
-/**
- * PUBLIC ROUTE: Task Detail (no layout)
- */
 function TaskRoute() {
   return (
     <Routes>
@@ -40,27 +37,30 @@ function TaskRoute() {
   );
 }
 
-/**
- * PROTECTED LAYOUT WRAPPER
- */
-function ProtectedLayout({ children }) {
+function ProtectedLayout({ children, language, setLanguage }) {
   return (
     <ProtectedRoute>
       <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
-        <Header />
+        <Header language={language} setLanguage={setLanguage} />
         <main style={{ flex: 1, paddingBottom: '20px' }}>{children}</main>
-        <Footer />
+        <Footer language={language} />
       </div>
     </ProtectedRoute>
   );
 }
 
-function AppRoutes() {
+function AppRoutes({ language, setLanguage }) {
   const navigate = useNavigate();
 
   useEffect(() => {
     attach401Handler(() => navigate('/login'));
-  }, []);
+  }, [navigate]);
+
+  const protectedLayout = (children) => (
+    <ProtectedLayout language={language} setLanguage={setLanguage}>
+      {children}
+    </ProtectedLayout>
+  );
 
   return (
     <>
@@ -77,28 +77,61 @@ function AppRoutes() {
         <Route path="/terms-and-condition" element={<TermsAndConditions />} />
 
         {/* PROTECTED ROUTES */}
-        <Route path="/employer-dashboard" element={<ProtectedLayout><EmployerDashboard /></ProtectedLayout>} />
-        <Route path="/create-shift" element={<ProtectedLayout><CreateShift /></ProtectedLayout>} />
-        <Route path="/timesheet" element={<ProtectedLayout><Timesheet /></ProtectedLayout>} />
-        <Route path="/manage-shift" element={<ProtectedLayout><ManageShift /></ProtectedLayout>} />
-        <Route path="/guard-profiles" element={<ProtectedLayout><GuardProfiles /></ProtectedLayout>} />
-        <Route path="/guard-profiles/:guardId" element={<ProtectedLayout><GuardProfilePage /></ProtectedLayout>} />
-        <Route path="/company-profile" element={<ProtectedLayout><CompanyProfile /></ProtectedLayout>} />
-        <Route path="/email-settings" element={<ProtectedLayout><EmailSettings /></ProtectedLayout>} />
+        <Route
+          path="/employer-dashboard"
+          element={protectedLayout(<EmployerDashboard language={language} />)}
+        />
+        <Route
+          path="/create-shift"
+          element={protectedLayout(<CreateShift language={language} />)}
+        />
+        <Route
+          path="/timesheet"
+          element={protectedLayout(<Timesheet language={language} />)}
+        />
+        <Route
+          path="/manage-shift"
+          element={protectedLayout(<ManageShift language={language} />)}
+        />
+        <Route
+          path="/guard-profiles"
+          element={protectedLayout(<GuardProfiles language={language} />)}
+        />
+        <Route
+          path="/guard-profiles/:guardId"
+          element={protectedLayout(<GuardProfilePage language={language} />)}
+        />
+        <Route
+          path="/company-profile"
+          element={protectedLayout(<CompanyProfile language={language} />)}
+        />
+        <Route
+          path="/email-settings"
+          element={protectedLayout(<EmailSettings language={language} />)}
+        />
+        <Route
+          path="/daily-monitoring"
+          element={protectedLayout(<DailyMonitoring language={language} />)}
+        />
       </Routes>
     </>
   );
 }
-/**
- * MAIN APP ROUTES
- */
+
 function App() {
+  const [language, setLanguage] = useState(
+    localStorage.getItem('language') || 'en'
+  );
+
+  useEffect(() => {
+    localStorage.setItem('language', language);
+  }, [language]);
+
   return (
     <Router>
-      
-      <AppRoutes />
+      <AppRoutes language={language} setLanguage={setLanguage} />
     </Router>
   );
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/app-frontend/employer-panel/src/components/Footer.js b/app-frontend/employer-panel/src/components/Footer.js
index ebbe21f9..c7bccde3 100644
--- a/app-frontend/employer-panel/src/components/Footer.js
+++ b/app-frontend/employer-panel/src/components/Footer.js
@@ -1,8 +1,10 @@
 import React from 'react';
 import CompanyLogo from './company_logo.svg';
 import { Link } from 'react-router-dom';
+import translations from "../i18n/translations";
 
-export default function Footer() {
+export default function Footer({ language }) {
+  const t = translations[language || "en"] || translations.en;
   const footerNavList = [
     { title: 'Privacy Policy', link: '/privacy-policy' },
     { title: 'Terms and Conditions', link: '/terms-and-condition' },
@@ -35,11 +37,11 @@ export default function Footer() {
 
   const buttonList = [
     {
-      title: 'Expression of Interest', // fixed title
+      title: t.expressionInterest, // fixed title
       link: '/expression-of-interest', // ✅ now routes correctly
     },
     {
-      title: 'Login',
+      title: t.login,
       link: '/login',
     },
   ];
diff --git a/app-frontend/employer-panel/src/components/Header.js b/app-frontend/employer-panel/src/components/Header.js
index 2eb4ef12..823f5a53 100644
--- a/app-frontend/employer-panel/src/components/Header.js
+++ b/app-frontend/employer-panel/src/components/Header.js
@@ -3,8 +3,12 @@ import { Link, useNavigate } from 'react-router-dom';
 import CompanyLogo from './company_logo.svg';
 import ProfilePicPlaceHolder from './ProfilePicPlaceHolder.svg';
 import NotificationsPopup from '../pages/NotificationsPopup';
+import translations from "../i18n/translations";
+import Logo from '../pages/logo.png';
+
+export default function Header({ language, setLanguage }) {
+  const t = translations[language || "en"] || translations.en;
 
-export default function Header() {
   const navigate = useNavigate();
   const [showMenu, setShowMenu] = useState(false);
 
@@ -48,34 +52,38 @@ export default function Header() {
       {/* Logo */}
       <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
         <img src={CompanyLogo} alt="Company Logo" style={{ height: '66px' }} />
-        <div style={{ fontWeight: '600', fontSize: '24px' }}>Secure Shift</div>
+        <div style={{ fontWeight: '600', fontSize: '24px' }}>
+          Secure Shift
+        </div>
       </div>
 
       {/* Navigation */}
       <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+
         <div onClick={handleHomeClick} style={navButtonStyle}>
-          Home
+          {t.home}
         </div>
 
         <Link to="/manage-shift" style={navButtonStyle}>
-          Shifts
+          {t.shifts}
         </Link>
 
         <Link to="/guard-profiles" style={navButtonStyle}>
-          Guard
+          {t.guard}
         </Link>
 
-        <Link to="/daily-monitoring" style={navButtonStyle}>
-          Activity
+        <Link to="/timesheet" style={navButtonStyle}>
+          {t.timesheet}
         </Link>
 
-        <Link to="/timesheet" style={navButtonStyle}>
-          Timesheet
+        <Link to="/daily-monitoring" style={navButtonStyle}>
+        {t.dailyMonitoring}
         </Link>
 
+
         {localStorage.getItem('userRole') === 'admin' && (
           <Link to="/email-settings" style={navButtonStyle}>
-            Email
+            {t.email}
           </Link>
         )}
 
@@ -83,7 +91,10 @@ export default function Header() {
 
         {/* Avatar + Dropdown */}
         <div style={{ position: 'relative' }}>
-          <div onClick={() => setShowMenu(!showMenu)} style={{ cursor: 'pointer' }}>
+          <div
+            onClick={() => setShowMenu(!showMenu)}
+            style={{ cursor: 'pointer' }}
+          >
             <img
               src={ProfilePicPlaceHolder}
               alt="Profile"
@@ -97,28 +108,104 @@ export default function Header() {
                 position: 'absolute',
                 right: 0,
                 top: '70px',
-                background: 'white',
-                color: 'black',
-                borderRadius: '8px',
-                padding: '10px',
-                boxShadow: '0 4px 10px rgba(0,0,0,0.2)',
-                minWidth: '140px',
+                width: '220px',
+                background: '#fff',
+                borderRadius: '16px',
+                boxShadow: '0 6px 18px rgba(0,0,0,0.15)',
+                overflow: 'hidden',
                 zIndex: 1000,
               }}
             >
+              {/* Profile Section */}
               <div
-                style={{ padding: '8px', cursor: 'pointer' }}
-                onClick={() => {
-                  navigate('/company-profile');
-                  setShowMenu(false);
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '12px',
+                  padding: '16px',
+                  borderBottom: '1px solid #eee',
                 }}
               >
-                Profile
+                <img
+                  src={Logo}
+                  alt="Profile"
+                  style={{
+                    width: '52px',
+                    height: '52px',
+                    borderRadius: '50%',
+                  }}
+                />
+
+                <div>
+                  <div
+                    style={{
+                      fontWeight: '700',
+                      fontSize: '15px',
+                      color: '#111',
+                    }}
+                  >
+                    ABC Security
+                  </div>
+
+                  <div
+                    style={{
+                      fontSize: '13px',
+                      color: '#666',
+                      marginTop: '2px',
+                    }}
+                  >
+                    {localStorage.getItem('email') || 'User'}
+                  </div>
+                </div>
               </div>
 
+              {/* Language Section */}
+              <div style={{ padding: '14px 16px' }}>
+                <div
+                  style={{
+                    fontWeight: '600',
+                    fontSize: '13px',
+                    marginBottom: '10px',
+                    color: '#111',
+                  }}
+                >
+                  🌐 Language
+                </div>
+
+                {[
+                  { code: 'en', label: 'English' },
+                  { code: 'hi', label: 'Hindi' },
+                  { code: 'pa', label: 'Punjabi' },
+                  { code: 'zh', label: 'Chinese' },
+                ].map((item) => (
+                  <div
+                    key={item.code}
+                    onClick={() => setLanguage(item.code)}
+                    style={{
+                      padding: '7px 0',
+                      cursor: 'pointer',
+                      fontSize: '14px',
+                      color:
+                        language === item.code ? '#274B93' : '#333',
+                      fontWeight:
+                        language === item.code ? '700' : '400',
+                    }}
+                  >
+                    {item.label}
+                  </div>
+                ))}
+              </div>
+
+              {/* Logout */}
               <div
-                style={{ padding: '8px', cursor: 'pointer', color: 'red' }}
                 onClick={handleLogout}
+                style={{
+                  padding: '14px 16px',
+                  borderTop: '1px solid #eee',
+                  cursor: 'pointer',
+                  color: 'red',
+                  fontWeight: '600',
+                }}
               >
                 Logout
               </div>
diff --git a/app-frontend/employer-panel/src/i18n/translations.js b/app-frontend/employer-panel/src/i18n/translations.js
new file mode 100644
index 00000000..d59d0de9
--- /dev/null
+++ b/app-frontend/employer-panel/src/i18n/translations.js
@@ -0,0 +1,79 @@
+const translations = {
+    en: {
+      home: "Home",
+      shifts: "Shifts",
+      guard: "Guard",
+      timesheet: "Timesheet",
+      email: "Email",
+      overview: "Overview",
+      incidentReports: "Incident Reports",
+      manageShifts: "Manage Shifts",
+      guardProfiles: "Guard Profiles",
+      timesheets: "Timesheets",
+      dailyMonitoring: "Activity",
+      backDashboard: "Back to Dashboard",
+      searchGuard: "Search guard or site...",
+      recentReview: "Recent Review",
+      expressionInterest: "Expression of Interest",
+      login: "Login",
+    },
+  
+    hi: {
+      home: "होम",
+      shifts: "शिफ्ट",
+      guard: "गार्ड",
+      timesheet: "टाइमशीट",
+      email: "ईमेल",
+      overview: "अवलोकन",
+      incidentReports: "घटना रिपोर्ट",
+      manageShifts: "शिफ्ट प्रबंधित करें",
+      guardProfiles: "गार्ड प्रोफाइल",
+      timesheets: "टाइमशीट",
+      dailyMonitoring: "गतिविधि",
+      backDashboard: "डैशबोर्ड पर वापस जाएं",
+      searchGuard: "गार्ड या साइट खोजें...",
+      recentReview: "हाल की समीक्षा",
+      expressionInterest: "रुचि की अभिव्यक्ति",
+      login: "लॉगिन",
+    },
+  
+    pa: {
+      home: "ਹੋਮ",
+      shifts: "ਸ਼ਿਫਟਾਂ",
+      guard: "ਗਾਰਡ",
+      timesheet: "ਟਾਈਮਸ਼ੀਟ",
+      email: "ਈਮੇਲ",
+      overview: "ਸੰਖੇਪ",
+      incidentReports: "ਘਟਨਾ ਰਿਪੋਰਟਾਂ",
+      manageShifts: "ਸ਼ਿਫਟਾਂ ਸੰਭਾਲੋ",
+      guardProfiles: "ਗਾਰਡ ਪ੍ਰੋਫਾਈਲ",
+      timesheets: "ਟਾਈਮਸ਼ੀਟ",
+      dailyMonitoring: "ਗਤੀਵਿਧੀ",
+      backDashboard: "ਡੈਸ਼ਬੋਰਡ ਤੇ ਵਾਪਸ ਜਾਓ",
+      searchGuard: "ਗਾਰਡ ਜਾਂ ਸਾਈਟ ਖੋਜੋ...",
+      recentReview: "ਤਾਜ਼ਾ ਸਮੀਖਿਆ",
+      expressionInterest: "ਰੁਚੀ ਦਾ ਪ੍ਰਗਟਾਵਾ",
+      login: "ਲਾਗਇਨ",
+    },
+  
+    zh: {
+      home: "首页",
+      shifts: "班次",
+      guard: "保安",
+      timesheet: "工时表",
+      email: "电子邮件",
+      overview: "概览",
+      incidentReports: "事件报告",
+      manageShifts: "管理班次",
+      guardProfiles: "保安档案",
+      timesheets: "工时表",
+      dailyMonitoring: "活动",
+      backDashboard: "返回仪表板",
+      searchGuard: "搜索保安或地点...",
+      recentReview: "最近评价",
+      expressionInterest: "意向表达",
+      login: "登录",
+    },
+  };
+  
+  export default translations;
\ No newline at end of file
diff --git a/app-frontend/employer-panel/src/pages/DailyMonitoring.js b/app-frontend/employer-panel/src/pages/DailyMonitoring.js
index f62a8cce..3f8b0292 100644
--- a/app-frontend/employer-panel/src/pages/DailyMonitoring.js
+++ b/app-frontend/employer-panel/src/pages/DailyMonitoring.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import './DailyMonitoring.css';
+import translations from '../i18n/translations';
 
 const IconLocation = () => (
   <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -197,8 +198,9 @@ const statusBg = { 'On Shift': '#e1effe', Completed: '#def7ec', Absent: '#fde8e8
 
 const filters = ['All', 'On Shift', 'Late', 'Absent', 'Completed'];
 
-export default function DailyMonitoring() {
+export default function DailyMonitoring({ language }) {
   const navigate = useNavigate();
+  const t = translations[language || "en"] || translations.en;
   const [search, setSearch] = useState('');
   const [filter, setFilter] = useState('All');
   const [selected, setSelected] = useState(guards[0]);
@@ -219,7 +221,7 @@ export default function DailyMonitoring() {
 
   return (
     <div className="dm-shell">
-      <h1 className="dm-heading">Daily Activity Monitoring</h1>
+      <h1 className="dm-heading">{t.dailyMonitoring}g</h1>
 
       <div className="dm-stats">
         {stats.map((s) => (
@@ -381,7 +383,7 @@ export default function DailyMonitoring() {
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
           <polyline points="15 18 9 12 15 6"/>
         </svg>
-        Back to Dashboard
+        {t.backDashboard}
       </button>
     </div>
   );
diff --git a/app-frontend/employer-panel/src/pages/EmployerDashboard.js b/app-frontend/employer-panel/src/pages/EmployerDashboard.js
index c9bd2ba8..1ddb4554 100644
--- a/app-frontend/employer-panel/src/pages/EmployerDashboard.js
+++ b/app-frontend/employer-panel/src/pages/EmployerDashboard.js
@@ -1,6 +1,7 @@
 import React, { useMemo, useRef, useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom"; 
 import "./EmployerDashboard.css";
+import translations from '../i18n/translations';
 
 /* --- icons --- */
 const IconCalendar = (props) => (
@@ -75,7 +76,8 @@ const parseIncidentDateTime = (incident) => {
   return baseDate.getTime();
 };
 
-export default function EmployerDashboard() {
+export default function EmployerDashboard({ language }) {
+  const t = translations[language || "en"] || translations.en;
   const [view, setView] = useState("list"); // default list view
   const overviewScroller = useRef(null);
   const reviewScroller = useRef(null);
@@ -248,7 +250,7 @@ useEffect(() => {
   
       {/* -------- Overview -------- */}
       <main className="ss-main">
-        <h2 className="ss-h1">Overview</h2>
+        <h2 className="ss-h1">{t.overview}</h2>
   
         {/* Controls ABOVE grey grid */}
         <div className="ss-controls">
@@ -373,7 +375,7 @@ useEffect(() => {
         </div>
 
         {/* Incident Reports */}
-        <h2 className="ss-h1 ss-h1--spaced">Incident Reports</h2>
+        <h2 className="ss-h1 ss-h1--spaced">{t.incidentReports}</h2>
         <div className="ss-incident-toolbar">
           <input
             className="ss-incident-search"
@@ -445,7 +447,7 @@ useEffect(() => {
         </div>
 
         {/* Reviews */}
-        <h2 className="ss-h1 ss-h1--spaced">Recent Review</h2>
+        <h2 className="ss-h1 ss-h1--spaced">{t.recentReview}</h2>
         <div className="ss-reviews">
           <button className="ss-arrow ss-arrow--left" onClick={() => scrollByAmount(reviewScroller, -300)}>‹</button>
           <div ref={reviewScroller} className="ss-reviews__track">
diff --git a/app-frontend/employer-panel/src/pages/GuardProfile.js b/app-frontend/employer-panel/src/pages/GuardProfile.js
index 1726a980..2466563e 100644
--- a/app-frontend/employer-panel/src/pages/GuardProfile.js
+++ b/app-frontend/employer-panel/src/pages/GuardProfile.js
@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import translations from "../i18n/translations";
 
 // ❌ removed local dummy guardData
 
@@ -22,7 +23,8 @@ const availabilityOptions = ['Available', 'Unavailable', 'On Leave'];
 const API_BASE = process.env.REACT_APP_API_BASE_URL || 'http://localhost:5000';
 // NEW
 
-function GuardProfiles() {
+function GuardProfiles({ language }) {
+  const t = translations[language || "en"] || translations.en;
   const navigate = useNavigate();
   const [currentPage, setCurrentPage] = useState(1);
   const [selectedSkills, setSelectedSkills] = useState([]);
@@ -251,7 +253,7 @@ function GuardProfiles() {
   return (
     <div style={pageStyle}>
       <div style={contentStyle}>
-        <h2 style={{ textAlign: 'center', marginTop: '1rem' }}>Guard Profiles</h2>
+        <h2 style={{ textAlign: 'center', marginTop: '1rem' }}>{t.guardProfiles}</h2>
         {/* NEW: loading / error / empty states */}
         {loading && <p style={{ textAlign: 'center' }}>Loading guards…</p>} {/* NEW */}
         {!loading && error /* NEW */ && (
diff --git a/app-frontend/employer-panel/src/pages/ManageShift.js b/app-frontend/employer-panel/src/pages/ManageShift.js
index 5174add0..b4c23e04 100644
--- a/app-frontend/employer-panel/src/pages/ManageShift.js
+++ b/app-frontend/employer-panel/src/pages/ManageShift.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import http from '../lib/http';
+import translations from "../i18n/translations";
 
 // Map backend status to filter display
 const statusDisplayMap = {
@@ -69,7 +70,8 @@ const normalizeShift = (s) => ({
   assignedGuard: s.assignedGuard || s.acceptedBy || null,
 });
 
-const ManageShift = () => {
+const ManageShift = ({ language }) => {
+  const t = translations[language || "en"] || translations.en;
   const navigate = useNavigate();
   const [shifts, setShifts] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -452,7 +454,7 @@ const ManageShift = () => {
   return (
     <div style={containerStyle}>
       <div style={headerStyle}>
-        <h1 style={titleStyle}>Manage Shifts</h1>
+        <h1 style={titleStyle}>{t.manageShifts}</h1>
         <button style={addButtonStyle} onClick={() => navigate('/create-shift')}>
           <img src={'/ic-add.svg'} alt="Add" style={bigIconStyle} /> Add New Shift
         </button>
diff --git a/app-frontend/employer-panel/src/pages/Timesheet.js b/app-frontend/employer-panel/src/pages/Timesheet.js
index 2e334176..837bf736 100644
--- a/app-frontend/employer-panel/src/pages/Timesheet.js
+++ b/app-frontend/employer-panel/src/pages/Timesheet.js
@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import http from "../lib/http";
 import "./Timesheet.css";
+import translations from "../i18n/translations";
 
 const LATE_GRACE_MINUTES = 5;
 const PAGE_SIZE = 10;
@@ -90,7 +91,8 @@ function buildRows(shifts, attendanceLists) {
   });
 }
 
-export default function Timesheet() {
+export default function Timesheet({ language }) {
+  const t = translations[language || "en"] || translations.en;
   const navigate = useNavigate();
   const [rows, setRows] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -183,7 +185,7 @@ export default function Timesheet() {
   return (
     <div className="timesheet-page">
       <div className="timesheet-container">
-        <h1 className="timesheet-title">Timesheets</h1>
+        <h1 className="timesheet-title">{t.timesheets}</h1>
 
         <div className="summary-cards">
           {summary.map((card) => (