Index: frontend/src/components/Navbar.tsx
===================================================================
--- frontend/src/components/Navbar.tsx	(revision 138eb2c2a83af7fc71d6ee8f21e5164cfe08261b)
+++ frontend/src/components/Navbar.tsx	(revision 897a1912499c7ed43a40046dd1a663fa8057ac72)
@@ -11,5 +11,5 @@
 	const [profileMenuOpen, setProfileMenuOpen] = useState(false);
 	const [, setRecommendations] = useRecommendations();
-	const { isAuthenticated, logout, login, user } = useAuth();
+	const { isAuthenticated, logout, user } = useAuth();
 	const { setFavoriteIds, setLikedIds, setDislikedIds } = usePreferences();
 	const navigate = useNavigate();
@@ -186,5 +186,5 @@
 							</Link>
 							<Link
-								to="/favorite-subjects"
+								to="/subject-preferences"
 								className="hover:underline"
 								onClick={() => setMenuOpen(false)}
Index: frontend/src/components/SubjectCatalog/FilterSidebar.tsx
===================================================================
--- frontend/src/components/SubjectCatalog/FilterSidebar.tsx	(revision 138eb2c2a83af7fc71d6ee8f21e5164cfe08261b)
+++ frontend/src/components/SubjectCatalog/FilterSidebar.tsx	(revision 897a1912499c7ed43a40046dd1a663fa8057ac72)
@@ -57,4 +57,6 @@
 		{}
 	);
+	const [isFiltersVisible, setIsFiltersVisible] = useState(false);
+
 	const toggleFilter = (key: string) => {
 		setOpenFilters((prev) => ({ ...prev, [key]: !prev[key] }));
@@ -72,7 +74,21 @@
 
 	return (
-		<div className="max-w-sm mx-auto">
+		<div className="w-full">
 			<div className="flex justify-between items-center mb-4">
-				<h2 className="text-lg font-semibold">Филтри</h2>
+				<button
+					className="flex items-center space-x-2 text-left md:hidden"
+					onClick={() => setIsFiltersVisible(!isFiltersVisible)}
+				>
+					<h2 className="text-lg font-semibold">Филтри</h2>
+					<ChevronDown
+						className="h-4 w-4 text-gray-500"
+						style={{
+							transform: isFiltersVisible ? "rotate(180deg)" : "rotate(0deg)",
+							transition: "transform 0.2s ease-in-out",
+						}}
+					/>
+				</button>
+
+				<h2 className="hidden md:block text-lg font-semibold">Филтри</h2>
 				<button
 					onClick={handleResetFilters}
@@ -82,6 +98,7 @@
 				</button>
 			</div>
-			<div className="mb-4">
-				{/* SEASON */}
+			
+			<div className={`mb-4 md:block ${isFiltersVisible ? "block" : "hidden"}`}>
+
 				<FilterHeader
 					label="Сезона"
@@ -119,5 +136,5 @@
 					</div>
 				</FilterHeader>
-				{/* SEMESTER */}
+
 				<FilterHeader
 					label="Семестар"
@@ -154,5 +171,5 @@
 					</div>
 				</FilterHeader>
-				{/* LEVEL */}
+
 				<FilterHeader
 					label="Ниво"
@@ -193,5 +210,5 @@
 					</div>
 				</FilterHeader>
-				{/* ACTIVATED */}
+
 				<FilterHeader
 					label="Активирани"
@@ -231,5 +248,5 @@
 					</div>
 				</FilterHeader>
-				{/* MANDATORY */}
+
 				<FilterHeader
 					label="Задолжителен за:"
@@ -269,5 +286,5 @@
 					</div>
 				</FilterHeader>
-				{/* ELECTIVE */}
+
 				<FilterHeader
 					label="Изборен за:"
@@ -307,5 +324,5 @@
 					</div>
 				</FilterHeader>
-				{/* PREREQUISITES */}
+
 				<FilterHeader
 					label="Предуслови"
@@ -355,5 +372,5 @@
 					</div>
 				</FilterHeader>
-				{/* TAGS */}
+
 				<FilterHeader
 					label="Тагови"
@@ -392,10 +409,10 @@
 								className="text-sm text-blue-600 hover:text-blue-800"
 							>
-								{showTags ? "Прикажи помалку" : "Прикажи повеќе"}
+								{showTags ? "Прикажи помалку" : "Прикажи помалку"}
 							</button>
 						)}
 					</div>
 				</FilterHeader>
-				{/* EVALUATION */}
+
 				<FilterHeader
 					label="Евалуација"
Index: frontend/src/index.css
===================================================================
--- frontend/src/index.css	(revision 138eb2c2a83af7fc71d6ee8f21e5164cfe08261b)
+++ frontend/src/index.css	(revision 897a1912499c7ed43a40046dd1a663fa8057ac72)
@@ -37,12 +37,34 @@
 	}
 }
+
 .skeleton-pulse {
 	animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
-.custom-toast-container {
-	/* This overrides the default 'top' value from the library */
+.Toastify__toast-container.custom-toast-container {
+	/* This moves the toast container down by 8em from the top */
 	top: 8em !important;
 }
+
+@media screen and (max-width: 480px) {
+	.Toastify__toast-container.custom-toast-container {
+		top: 5em !important;
+		width: auto !important;
+		max-width: 90vw !important;
+		left: auto !important;
+		right: 1em !important;
+		transform: none !important;
+	}
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none; /* For Chrome, Safari, and Opera */
+}
+
+.hide-scrollbar {
+  -ms-overflow-style: none; /* For Internet Explorer and Edge */
+  scrollbar-width: none; /* For Firefox */
+}
+
 :root {
 	background: rgb(37 99 235 / var(--tw-bg-opacity, 1));
Index: frontend/src/pages/Recommendations.tsx
===================================================================
--- frontend/src/pages/Recommendations.tsx	(revision 138eb2c2a83af7fc71d6ee8f21e5164cfe08261b)
+++ frontend/src/pages/Recommendations.tsx	(revision 897a1912499c7ed43a40046dd1a663fa8057ac72)
@@ -26,4 +26,5 @@
 	const [showModal, setShowModal] = useState(false);
 	const [hasSearched, setHasSearched] = useState(false);
+
 	const mapToSeasonInt = (season: "winter" | "summer" | "all") => {
 		if (season == "summer") return 0;
@@ -36,5 +37,5 @@
 			fetchSubjects({ setSubjects });
 		}
-	}, []);
+	}, [subjects, setSubjects]);
 
 	const fetchRecommendations = async () => {
@@ -52,5 +53,5 @@
 			setRecommendationsLoaded(true);
 			setHasSearched(true);
-			const container = document.querySelector(".flex-1.p-8.overflow-y-auto");
+			const container = document.querySelector(".hide-scrollbar");
 			if (container) {
 				container.scrollTo({ top: 0, behavior: "smooth" });
@@ -110,22 +111,22 @@
 			setLikedIds,
 		});
-	}, [accessToken]);
+	}, [accessToken, setDislikedIds, setFavoriteIds, setLikedIds]);
 
 	return (
 		<>
 			{formData?.has_filled_form === false ? (
-				<div className="flex h-[90vh] bg-white">
-					<div className="text-red-500 font-bold text-2xl text-center flex-1 flex items-center justify-center">
+				<div className="flex min-h-[90vh] bg-white p-4">
+					<div className="text-red-500 font-bold text-xl md:text-2xl text-center flex-1 flex items-center justify-center">
 						Пополни информации за твојот профил за да добиеш препораки!
 					</div>
 				</div>
 			) : (
-				<div className="flex h-[90vh] bg-gray-50">
-					<div className="w-1/3 bg-white shadow-lg p-8 flex flex-col justify-center items-center space-y-8">
+				<div className="flex flex-col lg:flex-row lg:h-[90vh] bg-gray-50">
+					<div className="w-full lg:w-1/3 bg-white shadow-lg p-6 lg:p-8 flex flex-col justify-center items-center space-y-6 lg:space-y-8">
 						<div className="text-center">
-							<h1 className="text-4xl font-bold text-gray-800 mb-2">
+							<h1 className="text-3xl lg:text-4xl font-bold text-gray-800 mb-2">
 								Препораки
 							</h1>
-							<p className="text-gray-600 text-lg">
+							<p className="text-gray-600 text-base lg:text-lg">
 								Предметите што ќе ги добиеш од алгоритамот се базирани на тоа
 								што си го пополнил во формата.
@@ -135,14 +136,12 @@
 							</p>
 						</div>
-
 						<button onClick={cycleSeason}>
-							<div className="bg-blue-500 border border-blue-200 rounded-lg p-6 font-semibold text-white text-center hover:bg-blue-800 transition-colors duration-200">
-								<p className="text-white mb-3">
+							<div className="bg-blue-500 border border-blue-200 rounded-lg p-4 md:p-6 font-semibold text-white text-center hover:bg-blue-800 transition-colors duration-200">
+								<p className="text-white mb-2 md:mb-3">
 									{season_ === "all" ? "Избрани семестри:" : "Избран семестар:"}
 								</p>
-								<p className="text-2xl">{getSeasonText()}</p>
+								<p className="text-xl md:text-2xl">{getSeasonText()}</p>
 							</div>
 						</button>
-
 						<button
 							onClick={fetchRecommendations}
@@ -152,5 +151,5 @@
 									? "bg-gray-400 cursor-not-allowed"
 									: "bg-green-500 hover:bg-green-600 hover:scale-105 shadow-md hover:shadow-lg"
-							} text-white px-8 py-4 rounded-lg text-xl font-bold transition-all duration-200 flex items-center space-x-2`}
+							} text-white px-6 py-3 lg:px-8 lg:py-4 rounded-lg text-lg lg:text-xl font-bold transition-all duration-200 flex items-center space-x-2`}
 						>
 							{!recommendationsLoaded ? (
@@ -163,6 +162,5 @@
 							)}
 						</button>
-
-						<div className="flex flex-col items-center space-y-2">
+						<div className="flex flex-col items-center space-y-2 pt-4">
 							<label className="flex items-center space-x-2 cursor-pointer">
 								<input
@@ -172,5 +170,5 @@
 									className="form-checkbox h-5 w-5 text-blue-600"
 								/>
-								<span className="text-gray-700">
+								<span className="text-gray-700 text-center">
 									Сакам да добивам и неактивирани предмети
 								</span>
@@ -179,78 +177,81 @@
 					</div>
 
-					<div className="flex-1 p-8 overflow-y-auto">
-						{recommendations.length > 0 ? (
-							<div className="space-y-6">
-								<div className="text-center mb-8">
-									<h2 className="text-3xl font-bold text-gray-800 mb-2">
-										Вашите препораки за {getSeasonText().toLowerCase()}{" "}
-										{getSeasonText().toLowerCase() === "Зимски + Летен"
-											? "семестри"
-											: "семестар"}
-									</h2>
-									<p className="text-gray-500">
-										Помогни ни да ги подобриме алгоритамот со тоа што ќе ги
-										оцениш препораките
+					<div className="flex-1 relative">
+						<div className="h-full p-4 lg:p-8 overflow-y-auto hide-scrollbar">
+							{recommendations.length > 0 ? (
+								<div className="space-y-6">
+									<div className="text-center mb-4 md:mb-8">
+										<h2 className="text-2xl lg:text-3xl font-bold text-gray-800 mb-2">
+											Вашите препораки за {getSeasonText().toLowerCase()}{" "}
+											{getSeasonText().toLowerCase() === "Зимски + Летен"
+												? "семестри"
+												: "семестар"}
+										</h2>
+										<p className="text-gray-500">
+											Помогни ни да ги подобриме алгоритамот со тоа што ќе ги
+											оцениш препораките
+										</p>
+									</div>
+									<div
+										className={`grid grid-cols-1 md:grid-cols-2 gap-3 md:auto-rows-[300px] relative pb-4`}
+									>
+										{recommendations.map((subject, index) => (
+											<div
+												key={subject.id}
+												className={`border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-200 relative ${
+													index % 2 === 0 ? "self-start" : "self-end"
+												}`}
+												style={{
+													animationName: "fadeInUp",
+													animationDuration: "0.6s",
+													animationTimingFunction: "ease-out",
+													animationFillMode: "forwards",
+													animationDelay: `${index * 100}ms`,
+												}}
+											>
+												<SubjectCard
+													subject={subject}
+													openSubjectDetails={openSubjectDetails}
+													openSubjectView={openSubjectView}
+													canReview={true}
+													isFirst={index == 0}
+													isRecommended={true}
+													isLoading={isLoading}
+												/>
+											</div>
+										))}
+									</div>
+								</div>
+							) : !hasSearched ? (
+								<div className="flex flex-col items-center justify-center h-full text-center">
+									<div className="mb-6 text-gray-400">
+										<img
+											src="src/assets/search.svg"
+											alt="Search icon"
+											className="w-16 h-16 mx-auto"
+										/>
+									</div>
+									<h3 className="text-xl md:text-2xl font-bold text-gray-600 mb-4">
+										Започнете со пребарување!
+									</h3>
+									<p className="text-gray-500 text-base lg:text-lg max-w-md">
+										Изберете ја саканата сезона и кликнете на "Вчитај препораки"
+										за да ги откриете вашите идеални предмети!
 									</p>
 								</div>
-
-								<div
-									className={`grid grid-cols-1 lg:grid-cols-2 gap-3 auto-rows-[300px] relative pb-4`}
-								>
-									{recommendations.map((subject, index) => (
-										<div
-											key={subject.id}
-											className={`border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-200 relative ${
-												index % 2 === 0 ? "self-start" : "self-end"
-											}`}
-											style={{
-												animationName: "fadeInUp",
-												animationDuration: "0.6s",
-												animationTimingFunction: "ease-out",
-												animationFillMode: "forwards",
-												animationDelay: `${index * 100}ms`,
-											}}
-										>
-											<SubjectCard
-												subject={subject}
-												openSubjectDetails={openSubjectDetails}
-												openSubjectView={openSubjectView}
-												canReview={true}
-												isFirst={index == 0}
-												isRecommended={true}
-												isLoading={isLoading}
-											/>
-										</div>
-									))}
+							) : (
+								<div className="flex flex-col items-center justify-center h-full text-center">
+									<h3 className="text-xl md:text-2xl font-bold text-gray-600 mb-4">
+										Моментално немаме препораки за тебе :(
+									</h3>
+									<p className="text-gray-500 text-base lg:text-lg max-w-md">
+										Направи промени во профилот и обиди се повторно.
+									</p>
 								</div>
-								<div className="absolute bottom-0 right-0 h-24 w-full pointer-events-none bg-gradient-to-t from-gray-50 to-transparent" />
-							</div>
-						) : !hasSearched ? (
-							<div className="flex flex-col items-center justify-center h-full text-center">
-								<div className="mb-6 text-gray-400">
-									<img
-										src="src/assets/search.svg"
-										className="w-16 h-16 mx-auto"
-									/>
-								</div>
-								<h3 className="text-2xl font-bold text-gray-600 mb-4">
-									Започнете со пребарување!
-								</h3>
-								<p className="text-gray-500 text-lg max-w-md">
-									Изберете ја саканата сезона и кликнете на "Вчитај препораки"
-									за да ги откриете вашите идеални предмети!
-								</p>
-							</div>
-						) : (
-							<div className="flex flex-col items-center justify-center h-full text-center">
-								<h3 className="text-2xl font-bold text-gray-600 mb-4">
-									Моментално немаме препораки за тебе :(
-								</h3>
-								<p className="text-gray-500 text-lg max-w-md">
-									Направи промени во профилот и обиди се повторно.
-								</p>
-							</div>
-						)}
+							)}
+						</div>
+						<div className="hidden lg:block absolute bottom-0 right-0 h-24 w-full pointer-events-none bg-gradient-to-t from-gray-50 to-transparent" />
 					</div>
+
 					{showModal && selectedSubject && (
 						<SubjectModal