Index: frontend/src/assets/open.svg
===================================================================
--- frontend/src/assets/open.svg	(revision a90fe3b49cea51c1289df2d840257729ac5a0416)
+++ frontend/src/assets/open.svg	(revision a90fe3b49cea51c1289df2d840257729ac5a0416)
@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class="w-4 h-4 mr-1"
+  fill="none"
+  stroke="#ffffff"
+  viewBox="0 0 24 24"
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+  />
+</svg>
Index: frontend/src/assets/search.svg
===================================================================
--- frontend/src/assets/search.svg	(revision a90fe3b49cea51c1289df2d840257729ac5a0416)
+++ frontend/src/assets/search.svg	(revision a90fe3b49cea51c1289df2d840257729ac5a0416)
@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="64" height="64"
+  fill="none"
+  stroke="#9ca3af"
+  viewBox="0 0 24 24"
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="1"
+    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+  />
+</svg>
Index: frontend/src/assets/tick.svg
===================================================================
--- frontend/src/assets/tick.svg	(revision a90fe3b49cea51c1289df2d840257729ac5a0416)
+++ frontend/src/assets/tick.svg	(revision a90fe3b49cea51c1289df2d840257729ac5a0416)
@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class="w-4 h-4"
+  fill="none"
+  stroke="white"
+  viewBox="0 0 24 24"
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M5 13l4 4L19 7"
+  />
+</svg>
Index: frontend/src/components/StudentForm/SubjectsSelector.tsx
===================================================================
--- frontend/src/components/StudentForm/SubjectsSelector.tsx	(revision d4646d06e8b7e94b35c03bf0fd8da43cda338254)
+++ frontend/src/components/StudentForm/SubjectsSelector.tsx	(revision a90fe3b49cea51c1289df2d840257729ac5a0416)
@@ -18,20 +18,4 @@
 	invalidSubjects: Subject[];
 }
-
-const TickSvg = () => (
-	<svg
-		className="w-4 h-4"
-		fill="none"
-		stroke="currentColor"
-		viewBox="0 0 24 24"
-	>
-		<path
-			strokeLinecap="round"
-			strokeLinejoin="round"
-			strokeWidth="2"
-			d="M5 13l4 4L19 7"
-		></path>
-	</svg>
-);
 
 function SubjectsSelector({
@@ -188,5 +172,10 @@
 																aria-pressed={isSelected}
 															>
-																{isSelected && !isInvalid && <TickSvg />}
+																{isSelected && !isInvalid && (
+																	<img
+																		src="src/assets/tick.svg"
+																		className="w-4 h-4 mr-1"
+																	/>
+																)}
 																<span>{subject.name}</span>
 															</button>
@@ -245,5 +234,10 @@
 																		aria-pressed={true}
 																	>
-																		{!isInvalid && <TickSvg />}
+																		{!isInvalid && (
+																			<img
+																				src="src/assets/tick.svg"
+																				className="w-4 h-4 mr-1"
+																			/>
+																		)}
 																		<span>{subject.name}</span>
 																	</button>
Index: frontend/src/components/SubjectCatalog/SubjectList.tsx
===================================================================
--- frontend/src/components/SubjectCatalog/SubjectList.tsx	(revision d4646d06e8b7e94b35c03bf0fd8da43cda338254)
+++ frontend/src/components/SubjectCatalog/SubjectList.tsx	(revision a90fe3b49cea51c1289df2d840257729ac5a0416)
@@ -60,17 +60,5 @@
 								className="flex items-center px-3 py-2 bg-blue-600 hover:bg-blue-900 text-white text-sm font-medium rounded-md transition-colors"
 							>
-								<svg
-									className="w-4 h-4 mr-1"
-									fill="none"
-									stroke="currentColor"
-									viewBox="0 0 24 24"
-								>
-									<path
-										strokeLinecap="round"
-										strokeLinejoin="round"
-										strokeWidth={2}
-										d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-									/>
-								</svg>
+								<img src="src/assets/open.svg" className="w-4 h-4 mr-1" />
 								Отвори предмет
 							</button>
Index: frontend/src/pages/Recommendations.tsx
===================================================================
--- frontend/src/pages/Recommendations.tsx	(revision d4646d06e8b7e94b35c03bf0fd8da43cda338254)
+++ frontend/src/pages/Recommendations.tsx	(revision a90fe3b49cea51c1289df2d840257729ac5a0416)
@@ -46,7 +46,6 @@
 	};
 
-	// Now we use the context to get the subjects, but we can also fetch them directly from the backend if needed!
-	// need to fetch subject data so that we can compare the subject IDs (prerequisites store IDs, but we need names)
-	// in the modals for the recommendations
+	// (new) Now we use the context to get the subjects, but we can also fetch them directly from the backend if needed!
+	// (old) need to fetch subject data so that we can compare the subject IDs (prerequisites store IDs, but we need names) in the modals for the recommendations
 	// useEffect(() => {
 	// 	const fetchData = async () => {
@@ -112,5 +111,4 @@
 			) : (
 				<div className="flex h-[90vh] bg-gray-50">
-					{/* <div className="flex h-screen 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="text-center">
@@ -119,9 +117,9 @@
 							</h1>
 							<p className="text-gray-600 text-lg">
-								Предметите што ќе ги добиеш од алгоритамот се базирани на она
+								Предметите што ќе ги добиеш од алгоритамот се базирани на тоа
 								што си го пополнил во формата.
 								<br />
 								Тие се подредени според тоа колку твоите интереси се совпаѓаат
-								со она што го нудат предметите.
+								со тоа што го нудат предметите.
 							</p>
 						</div>
@@ -224,17 +222,8 @@
 														className="flex items-center px-3 py-2 bg-blue-600 hover:bg-blue-900 text-white text-sm font-medium rounded-md transition-colors"
 													>
-														<svg
+														<img
+															src="src/assets/open.svg"
 															className="w-4 h-4 mr-1"
-															fill="none"
-															stroke="currentColor"
-															viewBox="0 0 24 24"
-														>
-															<path
-																strokeLinecap="round"
-																strokeLinejoin="round"
-																strokeWidth={2}
-																d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-															/>
-														</svg>
+														/>
 														Отвори предмет
 													</button>
@@ -244,23 +233,13 @@
 									))}
 								</div>
-								{/* Fade gradient at bottom-right to signal scrollability */}
 								<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="text-gray-400 mb-6">
-									<svg
+								<div className="mb-6 text-gray-400">
+									<img
+										src="src/assets/search.svg"
 										className="w-16 h-16 mx-auto"
-										fill="none"
-										stroke="currentColor"
-										viewBox="0 0 24 24"
-									>
-										<path
-											strokeLinecap="round"
-											strokeLinejoin="round"
-											strokeWidth={1}
-											d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-										/>
-									</svg>
+									/>
 								</div>
 								<h3 className="text-2xl font-bold text-gray-600 mb-4">