Index: backend/auth_form/serializers.py
===================================================================
--- backend/auth_form/serializers.py	(revision 35d0383d3aa6f2701b00bb6feeb10273f1a1d2fe)
+++ backend/auth_form/serializers.py	(revision 3eb43361eb4cc515a2e51fee88f7cf218094b89b)
@@ -15,4 +15,6 @@
         data = super().validate(attrs)
         data['user_type'] = self.user.user_type
+        if hasattr(self.user, 'full_name'):
+            data['full_name'] = self.user.full_name
         return data
 
Index: frontend/src/components/Navbar.tsx
===================================================================
--- frontend/src/components/Navbar.tsx	(revision 35d0383d3aa6f2701b00bb6feeb10273f1a1d2fe)
+++ frontend/src/components/Navbar.tsx	(revision 3eb43361eb4cc515a2e51fee88f7cf218094b89b)
@@ -1,4 +1,4 @@
 import axios from "axios";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
@@ -9,8 +9,25 @@
 const Navbar: React.FC = () => {
 	const [menuOpen, setMenuOpen] = useState(false);
+	const [profileMenuOpen, setProfileMenuOpen] = useState(false);
 	const [, setRecommendations] = useRecommendations();
-	const { isAuthenticated, logout } = useAuth();
+	const { isAuthenticated, logout, login, user } = useAuth();
 	const navigate = useNavigate();
-	const { login } = useAuth();
+	const profileMenuRef = useRef<HTMLDivElement>(null);
+	const userInitial = user?.full_name.charAt(0).toUpperCase() || "?";
+	// Close dropdown when clicking outside
+	useEffect(() => {
+		const handleClickOutside = (event: MouseEvent) => {
+			if (
+				profileMenuRef.current &&
+				!profileMenuRef.current.contains(event.target as Node)
+			) {
+				setProfileMenuOpen(false);
+			}
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+		};
+	}, []);
 
 	const handleLogout = () => {
@@ -28,6 +45,9 @@
 				password: "testTestTEST123",
 			});
-			const { access, refresh } = response.data;
-			login(access, refresh);
+			const { access, refresh, full_name, user_type } = response.data;
+			login(access, refresh, {
+				full_name,
+				user_type,
+			});
 			navigate("/");
 		} catch (err: unknown) {
@@ -76,4 +96,5 @@
 				</button>
 
+				{/* Desktop Menu */}
 				<div className="hidden sm:flex space-x-4 items-center text-sm sm:text-base">
 					<button onClick={testAccountLogin}>quick login</button>
@@ -81,62 +102,91 @@
 						Предмети
 					</Link>
-					{isAuthenticated && (
-						<Link to="/recommendations" className="hover:underline">
-							Препораки
+					{isAuthenticated ? (
+						<div className="relative" ref={profileMenuRef}>
+							<button
+								onClick={() => setProfileMenuOpen(!profileMenuOpen)}
+								className="w-10 h-10 rounded-full bg-blue-800 flex items-center justify-center font-bold text-xl hover:bg-blue-700 transition"
+							>
+								{userInitial}
+							</button>
+							{profileMenuOpen && (
+								<div className="absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg py-1 text-black z-20">
+									<Link
+										to="/account"
+										className="block px-4 py-2 text-sm hover:bg-gray-100 hover:underline"
+										onClick={() => setProfileMenuOpen(false)}
+									>
+										Профил
+									</Link>
+
+									<Link
+										to="/recommendations"
+										className="block px-4 py-2 text-sm hover:bg-gray-100 hover:underline"
+										onClick={() => setProfileMenuOpen(false)}
+									>
+										Препораки
+									</Link>
+
+									<button
+										onClick={() => {
+											handleLogout();
+											setProfileMenuOpen(false);
+										}}
+										className="w-full text-left block px-4 py-2 text-sm text-red-600 hover:bg-gray-100 hover:underline"
+									>
+										Одјави се
+									</button>
+								</div>
+							)}
+						</div>
+					) : (
+						<Link to="/login" className="hover:underline">
+							Најави се
 						</Link>
-					)}
-					{isAuthenticated && (
-						<Link to="/account" className="hover:underline">
-							Профил
-						</Link>
-					)}
-					{isAuthenticated ? (
-						<button
-							onClick={handleLogout}
-							className="bg-red-500 hover:bg-red-600 px-3 py-1 rounded"
-						>
-							Одјави се
-						</button>
-					) : (
-						<>
-							<Link to="/login" className="hover:underline">
-								Најави се
-							</Link>
-						</>
 					)}
 				</div>
 			</div>
 
+			{/* Mobile Menu */}
 			{menuOpen && (
 				<div className="sm:hidden mt-3 flex flex-col space-y-2 text-sm">
-					<Link to="/subjects" className="hover:underline">
+					<Link
+						to="/subjects"
+						className="hover:underline"
+						onClick={() => setMenuOpen(false)}
+					>
 						Предмети
 					</Link>
 					{isAuthenticated && (
-						<Link to="/account" className="hover:underline">
-							Профил
+						<>
+							<Link
+								to="/recommendations"
+								className="hover:underline"
+								onClick={() => setMenuOpen(false)}
+							>
+								Препораки
+							</Link>
+							<Link
+								to="/account"
+								className="hover:underline"
+								onClick={() => setMenuOpen(false)}
+							>
+								Профил
+							</Link>
+							<button
+								onClick={() => {
+									handleLogout();
+									setMenuOpen(false);
+								}}
+								className="text-left text-red-400 hover:underline"
+							>
+								Одјави се
+							</button>
+						</>
+					)}
+					{!isAuthenticated && (
+						<Link to="/login" onClick={() => setMenuOpen(false)}>
+							Најави се
 						</Link>
-					)}
-					{isAuthenticated && (
-						<Link to="/recommendations" className="hover:underline">
-							Препораки
-						</Link>
-					)}
-					{isAuthenticated ? (
-						<button
-							onClick={() => {
-								handleLogout();
-								setMenuOpen(false);
-							}}
-							className="bg-red-500 hover:bg-red-600 px-3 py-1 rounded"
-						>
-							Одјави се
-						</button>
-					) : (
-						<>
-							<Link to="/login" onClick={() => setMenuOpen(false)}>
-								Најави се
-							</Link>
-						</>
 					)}
 				</div>
Index: frontend/src/components/SubjectCatalog/FavoriteButton.tsx
===================================================================
--- frontend/src/components/SubjectCatalog/FavoriteButton.tsx	(revision 35d0383d3aa6f2701b00bb6feeb10273f1a1d2fe)
+++ frontend/src/components/SubjectCatalog/FavoriteButton.tsx	(revision 3eb43361eb4cc515a2e51fee88f7cf218094b89b)
@@ -23,14 +23,4 @@
         >
             <HeartIcon filled={isFavorite} />
-            <span 
-                className="
-                    absolute bottom-full left-1/2 -translate-x-1/2 mb-2  /* Positioning */
-                    w-max px-2 py-1 bg-gray-800 text-white text-xs rounded-md /* Styling */
-                    opacity-0 group-hover:opacity-100 transition-opacity duration-300 /* Visibility */
-                    pointer-events-none /* So it doesn't interfere with clicks */
-                "
-            >
-                {isFavorite ? 'Отстрани од омилени' : 'Додади во омилени'}
-            </span>
         </button>
     );
Index: frontend/src/components/SubjectCatalog/SubjectList.tsx
===================================================================
--- frontend/src/components/SubjectCatalog/SubjectList.tsx	(revision 35d0383d3aa6f2701b00bb6feeb10273f1a1d2fe)
+++ frontend/src/components/SubjectCatalog/SubjectList.tsx	(revision 3eb43361eb4cc515a2e51fee88f7cf218094b89b)
@@ -47,13 +47,9 @@
 							))}
 						</div> */}
-						<FavoriteButton subjectId={subject.id} />
 						<div className="flex justify-between mt-auto gap-3">
-							<button
-								onClick={() => openSubjectDetails(subject)}
-								className="flex items-center text-sm text-gray-600 hover:text-gray-800 transition-colors"
-							>
-								<img src="src/assets/eye.svg" className="w-4 h-4 mr-1" />
-								Краток преглед
+							<button onClick={() => openSubjectDetails(subject)}>
+								<img src="src/assets/eye.svg" className="w-5 h-5" />
 							</button>
+							<FavoriteButton subjectId={subject.id} />
 							<button
 								onClick={() => openSubjectView(subject)}
Index: frontend/src/context/AuthContext.tsx
===================================================================
--- frontend/src/context/AuthContext.tsx	(revision 35d0383d3aa6f2701b00bb6feeb10273f1a1d2fe)
+++ frontend/src/context/AuthContext.tsx	(revision 3eb43361eb4cc515a2e51fee88f7cf218094b89b)
@@ -1,4 +1,9 @@
 import { createContext } from 'react';
 import { StudentData } from '../components/types';
+
+export interface User {
+    full_name: string;
+    user_type: string;
+}
 export interface AuthContextType {
     accessToken: string | null;
@@ -6,5 +11,6 @@
     formData: StudentData | null;
     setFormData: (data: StudentData | null) => void;
-    login: (accessToken: string, refreshToken: string) => void;
+    user: User | null; 
+    login: (accessToken: string, refreshToken: string, userData: User) => void;
     logout: () => void;
     isAuthenticated: boolean;
Index: frontend/src/context/AuthProvider.tsx
===================================================================
--- frontend/src/context/AuthProvider.tsx	(revision 35d0383d3aa6f2701b00bb6feeb10273f1a1d2fe)
+++ frontend/src/context/AuthProvider.tsx	(revision 3eb43361eb4cc515a2e51fee88f7cf218094b89b)
@@ -5,4 +5,5 @@
 import { toast } from "react-toastify";
 import { StudentData } from "../components/types";
+import { User } from "../context/AuthContext";
 
 interface DecodedToken {
@@ -17,4 +18,5 @@
   children,
 }) => {
+  const [user, setUser] = useState<User | null>(null);
   const [accessToken, setAccessToken] = useState<string | null>(
     localStorage.getItem("access")
@@ -69,4 +71,5 @@
     setRefreshToken(null);
     setFormData(null);
+    setUser(null);
   };
 
@@ -76,5 +79,5 @@
     }
 
-    try {
+    try {    
         const decodedToken = jwtDecode<DecodedToken>(token);
         const expirationTime = decodedToken.exp * 1000; 
@@ -156,7 +159,8 @@
   }, [axiosAuth, accessToken]); 
 
-  const login = async (newAccessToken: string, newRefreshToken: string) => {
+  const login = async (newAccessToken: string, newRefreshToken: string, userData: User) => {
     localStorage.setItem("access", newAccessToken);
     localStorage.setItem("refresh", newRefreshToken);
+    setUser(userData);
     setAccessToken(newAccessToken);
     setRefreshToken(newRefreshToken);
@@ -189,4 +193,5 @@
     formData,
     setFormData,
+    user,
     login,
     logout,
Index: frontend/src/context/SubjectsContext.tsx
===================================================================
--- frontend/src/context/SubjectsContext.tsx	(revision 35d0383d3aa6f2701b00bb6feeb10273f1a1d2fe)
+++ frontend/src/context/SubjectsContext.tsx	(revision 3eb43361eb4cc515a2e51fee88f7cf218094b89b)
@@ -24,5 +24,5 @@
 		const fetchSubjects = async () => {
 			try {
-				const resSubjects = await fetch("http://localhost:8000/subjects");
+				const resSubjects = await fetch("http://localhost:8000/subjects/");
 				if (resSubjects.ok) {
 					const subJson: Subject[] = await resSubjects.json();
Index: frontend/src/pages/Login.tsx
===================================================================
--- frontend/src/pages/Login.tsx	(revision 35d0383d3aa6f2701b00bb6feeb10273f1a1d2fe)
+++ frontend/src/pages/Login.tsx	(revision 3eb43361eb4cc515a2e51fee88f7cf218094b89b)
@@ -37,10 +37,12 @@
 				access: string;
 				refresh: string;
+				full_name: string;
+				user_type: string;
 			}>("http://localhost:8000/auth/login/", {
 				email: formData.email,
 				password: formData.password,
 			});
-			const { access, refresh } = response.data;
-			login(access, refresh);
+			const { access, refresh, full_name, user_type } = response.data;
+			login(access, refresh, { full_name, user_type });
 			navigate("/");
 			toast.success("Успешно сте најавени!");
Index: frontend/src/pages/Recommendations.tsx
===================================================================
--- frontend/src/pages/Recommendations.tsx	(revision 35d0383d3aa6f2701b00bb6feeb10273f1a1d2fe)
+++ frontend/src/pages/Recommendations.tsx	(revision 3eb43361eb4cc515a2e51fee88f7cf218094b89b)
@@ -8,4 +8,5 @@
 import { useAuth } from "../hooks/useAuth";
 import useAxiosAuth from "../hooks/useAxiosAuth";
+import FavoriteButton from "../components/SubjectCatalog/FavoriteButton";
 
 const Recommendations = () => {
@@ -208,14 +209,8 @@
 
 												<div className="flex justify-between mt-auto gap-3">
-													<button
-														onClick={() => openSubjectDetails(subject)}
-														className="flex items-center text-sm text-gray-600 hover:text-gray-800 transition-colors"
-													>
-														<img
-															src="src/assets/eye.svg"
-															className="w-4 h-4 mr-1"
-														/>
-														Краток преглед
+													<button onClick={() => openSubjectDetails(subject)}>
+														<img src="src/assets/eye.svg" className="w-5 h-5" />
 													</button>
+													<FavoriteButton subjectId={subject.id} />
 													<button
 														onClick={() => openSubjectView(subject)}