Index: src/components/LanguageSwitcher.tsx
===================================================================
--- src/components/LanguageSwitcher.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
+++ src/components/LanguageSwitcher.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
@@ -0,0 +1,29 @@
+"use client";
+import { useTranslation } from 'react-i18next';
+
+export default function LanguageSwitcher() {
+  const { i18n } = useTranslation();
+
+  const changeLanguage = (lng: string) => {
+    i18n.changeLanguage(lng);
+  };
+
+  return (
+    <div className="flex gap-2 items-center">
+      <button
+        onClick={() => changeLanguage('mk')}
+        className={`px-3 py-1 rounded border-2 text-sm font-semibold transition-all duration-150 ${i18n.language === 'mk' ? 'border-blue-600 text-blue-700 bg-blue-50' : 'border-gray-300 text-gray-700 bg-white hover:border-blue-400 hover:text-blue-600'}`}
+        aria-label="Macedonian"
+      >
+        MK
+      </button>
+      <button
+        onClick={() => changeLanguage('en')}
+        className={`px-3 py-1 rounded border-2 text-sm font-semibold transition-all duration-150 ${i18n.language === 'en' ? 'border-blue-600 text-blue-700 bg-blue-50' : 'border-gray-300 text-gray-700 bg-white hover:border-blue-400 hover:text-blue-600'}`}
+        aria-label="English"
+      >
+        EN
+      </button>
+    </div>
+  );
+}
Index: src/components/exams.tsx
===================================================================
--- src/components/exams.tsx	(revision 298f9b3987050da08cb65ce62c3d1f8295faeff4)
+++ src/components/exams.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
@@ -1,4 +1,5 @@
 "use client"
 import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSort, faSortUp, faSortDown } from '@fortawesome/free-solid-svg-icons';
@@ -33,4 +34,5 @@
 
 const Exams = () => {
+  const { t } = useTranslation();
   const [sortField, setSortField] = useState<'grade' | 'date' | null>(null);
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc' | null>(null);
@@ -185,5 +187,5 @@
     return (
       <div className="bg-white rounded-lg shadow-sm p-6">
-        Loading...
+        {t('loading', 'Loading...')}
       </div>
     );
@@ -194,5 +196,5 @@
       <div className="bg-white rounded-lg shadow-sm p-6">
         <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
-          {errorMessage}
+          {t('failed_to_load_exams', errorMessage)}
         </div>
       </div>
@@ -208,5 +210,5 @@
           <div className="text-center">
             <div className="text-3xl font-bold text-gray-900">{stats.average}</div>
-            <div className="text-sm text-gray-500 mt-1">Просек</div>
+            <div className="text-sm text-gray-500 mt-1">{t('average', 'Просек')}</div>
           </div>
 
@@ -217,5 +219,5 @@
               <span className="text-lg text-gray-400">/{stats.credits.total}</span>
             </div>
-            <div className="text-sm text-gray-500 mt-1">Кредити</div>
+            <div className="text-sm text-gray-500 mt-1">{t('credits', 'Кредити')}</div>
           </div>
 
@@ -223,5 +225,5 @@
           <div className="text-center">
             <div className="text-3xl font-bold text-gray-900">{stats.passed}</div>
-            <div className="text-sm text-gray-500 mt-1">Положени</div>
+            <div className="text-sm text-gray-500 mt-1">{t('passed', 'Положени')}</div>
           </div>
 
@@ -229,11 +231,11 @@
           <div className="text-center">
             <div className="text-3xl font-bold text-gray-900">{stats.remaining}</div>
-            <div className="text-sm text-gray-500 mt-1">Останато</div>
+            <div className="text-sm text-gray-500 mt-1">{t('remaining', 'Останато')}</div>
           </div>
         </div>
-        
+
         {/* Progress Bar spanning entire statistics section */}
         <div className="w-full bg-gray-200 rounded-full h-2">
-          <div 
+          <div
             className="bg-blue-500 h-2 rounded-full transition-all duration-300"
             style={{ width: `${creditsPercentage}%` }}
@@ -244,6 +246,6 @@
       {/* Exams Table */}
       <div>
-        <h3 className="text-xl font-semibold text-gray-900 mb-4">Испити</h3>
-        
+        <h3 className="text-xl font-semibold text-gray-900 mb-4">{t('exams', 'Испити')}</h3>
+
         <div className="overflow-x-auto">
           <table className="min-w-full">
@@ -251,15 +253,15 @@
               <tr className="border-b border-gray-200">
                 <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">#</th>
-                <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Предмет</th>
-                <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Семестар</th>
-                <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Кредити</th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">{t('subject', 'Предмет')}</th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">{t('semester', 'Семестар')}</th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">{t('credits', 'Кредити')}</th>
                 <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">
-                  <button 
+                  <button
                     onClick={handleSortByDate}
                     className="flex items-center gap-2 px-2 py-1 rounded-md hover:bg-gray-100 hover:text-gray-900 transition-all duration-200 transform hover:scale-105"
                   >
-                    Датум
-                    <FontAwesomeIcon 
-                      icon={getSortIcon('date')} 
+                    {t('date', 'Датум')}
+                    <FontAwesomeIcon
+                      icon={getSortIcon('date')}
                       className={`text-xs transition-colors duration-200 ${
                         sortField === 'date' ? 'text-blue-600' : 'text-gray-400 group-hover:text-gray-600'
@@ -269,11 +271,11 @@
                 </th>
                 <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">
-                  <button 
+                  <button
                     onClick={handleSortByGrade}
                     className="flex items-center gap-2 px-2 py-1 rounded-md hover:bg-gray-100 hover:text-gray-900 transition-all duration-200 transform hover:scale-105"
                   >
-                    Оценка
-                    <FontAwesomeIcon 
-                      icon={getSortIcon('grade')} 
+                    {t('grade', 'Оценка')}
+                    <FontAwesomeIcon
+                      icon={getSortIcon('grade')}
                       className={`text-xs transition-colors duration-200 ${
                         sortField === 'grade' ? 'text-blue-600' : 'text-gray-400 group-hover:text-gray-600'
Index: src/components/header.tsx
===================================================================
--- src/components/header.tsx	(revision 298f9b3987050da08cb65ce62c3d1f8295faeff4)
+++ src/components/header.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
@@ -1,14 +1,53 @@
 "use client"
+
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUser } from '@fortawesome/free-solid-svg-icons';
 import Image from 'next/image';
 
+import { useEffect, useState } from 'react';
+import { getAccessToken, clearAuthTokens } from '@/lib/auth';
+import { useTranslation } from 'react-i18next';
+import LanguageSwitcher from './LanguageSwitcher';
+
 const Header = () => {
+
+  const [userName, setUserName] = useState<string>('');
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    async function fetchUser() {
+      const token = getAccessToken();
+      if (!token) return;
+      try {
+        const response = await fetch('https://iknow-api.onrender.com/api/user/getUser', {
+          method: 'GET',
+          headers: { Authorization: `Bearer ${token}` },
+        });
+        if (!response.ok) return;
+        const data = await response.json();
+        // Try both student and professor shape
+        if (data?.personalInfo) {
+          const p = data.personalInfo;
+          setUserName([p.firstName, p.middleName, p.lastName].filter(Boolean).join(' '));
+        }
+      } catch {}
+    }
+    fetchUser();
+    return () => {};
+  }, []);
+
+  const handleLogout = () => {
+    clearAuthTokens();
+    if (typeof window !== 'undefined') {
+      window.location.href = '/';
+    }
+  };
+
   return (
     <header className="bg-white shadow-sm border-b border-gray-200">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex justify-between items-center py-4">
+        <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center py-4 gap-4 sm:gap-0">
           {/* Left side - Logos and University Info */}
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2 justify-center sm:justify-start">
             {/* UKIM Logo */}
             <div className="flex-shrink-0">
@@ -21,5 +60,4 @@
               />
             </div>
-            
             {/* FINKI Logo */}
             <div className="flex-shrink-0">
@@ -32,32 +70,36 @@
               />
             </div>
-            
             {/* University Text */}
             <div className="hidden sm:block">
               <div className="text-gray-900 font-medium text-sm">
-                Универзитет „Св. КИРИЛ И МЕТОДИЈ“ - Скопје
+                {t('university')}
               </div>
               <div className="text-gray-700 text-sm">
-                Факултет за информатички науки и компјутерско инженерство
+                {t('faculty')}
               </div>
             </div>
           </div>
-
           {/* Right side - User Profile */}
-          <div className="flex items-center gap-4">
-            <div className="flex items-center gap-3">
+          <div className="flex flex-col sm:flex-row items-center gap-2 sm:gap-4 w-full sm:w-auto justify-center sm:justify-end">
+            {/* Language Switcher - now left of user info */}
+            <div className="sm:mr-2 w-full sm:w-auto flex justify-center sm:justify-end">
+              <LanguageSwitcher />
+            </div>
+            <div className="flex items-center gap-2 sm:gap-3 w-full sm:w-auto justify-center sm:justify-end">
               {/* User Avatar */}
-              <div className="flex items-center justify-center w-10 h-10 bg-gray-800 text-white rounded-full">
+              <div className="hidden sm:flex items-center justify-center w-10 h-10 bg-gray-800 text-white rounded-full">
                 <FontAwesomeIcon icon={faUser} className="text-sm" />
               </div>
-              
               {/* User Name */}
               <div className="hidden sm:block text-gray-900 font-medium">
-                Стефан Савески
+                {userName || '...'}
               </div>
-              
-              {/* Logout Button */}
-              <button className="text-blue-600 hover:text-blue-800 font-medium text-sm transition-colors duration-200">
-                Logout
+              {/* Logout Button - more stylish and full width on mobile */}
+              <button
+                className="w-full sm:w-auto ml-0 sm:ml-2 px-4 py-2 border-2 border-primary text-primary bg-white rounded-lg font-semibold flex items-center justify-center gap-2 hover:bg-blue-50 transition-all duration-200 shadow-sm"
+                onClick={handleLogout}
+              >
+                <svg xmlns='http://www.w3.org/2000/svg' className='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor'><path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h4a2 2 0 012 2v1' /></svg>
+                {t('logout')}
               </button>
             </div>
Index: src/components/navbar.tsx
===================================================================
--- src/components/navbar.tsx	(revision 298f9b3987050da08cb65ce62c3d1f8295faeff4)
+++ src/components/navbar.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
@@ -10,4 +10,5 @@
 import { useState } from 'react';
 import Link from 'next/link';
+import { useTranslation } from 'react-i18next';
 
 const Navbar = () => {
@@ -18,11 +19,12 @@
   };
 
+  const { t } = useTranslation();
   const menuItems = [
-    { icon: faUser, label: 'Профил', href: '/students/profile' },
-    { icon: faBookmark, label: 'Семестри', href: '/students/semesters' },
-    { icon: faBook, label: 'Предмети', href: '/students/subjects' },
-    { icon: faPenToSquare, label: 'Пријави', href: '/students/applications' },
-    { icon: faListCheck, label: 'Положени', href: '/students/exams' },
-    { icon: faFilePdf, label: 'Документи', href: '/students/documents' }
+    { icon: faUser, label: t('profile'), href: '/students/profile' },
+    { icon: faBookmark, label: t('semesters'), href: '/students/semesters' },
+    { icon: faBook, label: t('subjects'), href: '/students/subjects' },
+    { icon: faPenToSquare, label: t('applications'), href: '/students/applications' },
+    { icon: faListCheck, label: t('exams'), href: '/students/exams' },
+    { icon: faFilePdf, label: t('documents'), href: '/students/documents' }
   ];
 
Index: src/components/professor-navbar.tsx
===================================================================
--- src/components/professor-navbar.tsx	(revision 298f9b3987050da08cb65ce62c3d1f8295faeff4)
+++ src/components/professor-navbar.tsx	(revision 50f2fb4b186356bc63dde83200e8b04fe71d2c7a)
@@ -5,4 +5,5 @@
 import Link from "next/link";
 import { useState } from "react";
+import { useTranslation } from 'react-i18next';
 
 const ProfessorNavbar = () => {
@@ -13,7 +14,8 @@
   };
 
+  const { t } = useTranslation();
   const menuItems = [
-    { icon: faUser, label: "Профил", href: "/professor/profile" },
-    { icon: faUsers, label: "Студенти", href: "/professor/students" },
+    { icon: faUser, label: t('profile'), href: "/professor/profile" },
+    { icon: faUsers, label: t('students') || 'Студенти', href: "/professor/students" },
   ];