Index: backend/backend/urls.py
===================================================================
--- backend/backend/urls.py	(revision 51b9afcad8ef84f7b224e730cb366c7fa2b2f417)
+++ backend/backend/urls.py	(revision fc2ab73830f7c6a7c107c6fe2b293719cf9da668)
@@ -17,5 +17,5 @@
 from django.contrib import admin
 from django.urls import path, include
-from subjects.views import index, all_subjects, get_suggestions
+from subjects.views import index, all_subjects, get_suggestions, subject_view
 
 urlpatterns = [
@@ -23,4 +23,5 @@
     path('subjects/', all_subjects),
     path('suggestion/', get_suggestions),
+    path('subjects/<int:pk>/', subject_view),
     path('auth/', include('auth_form.urls')),
     path('', index),
Index: backend/subjects/utils.py
===================================================================
--- backend/subjects/utils.py	(revision 51b9afcad8ef84f7b224e730cb366c7fa2b2f417)
+++ backend/subjects/utils.py	(revision fc2ab73830f7c6a7c107c6fe2b293719cf9da668)
@@ -120,6 +120,4 @@
 }
 
-pnvi = "Програмирање на видео игри"
-
 def get_recommendations(filtered_subjects_vector):
     subject_scores = {}
@@ -129,8 +127,4 @@
         score = 0
         for key in keys:
-            if subject == pnvi:
-                print(key)
-                print(WEIGHTS[key])
-                print(keys[key])
             score += WEIGHTS[key] * keys[key]
         
Index: backend/subjects/views.py
===================================================================
--- backend/subjects/views.py	(revision 51b9afcad8ef84f7b224e730cb366c7fa2b2f417)
+++ backend/subjects/views.py	(revision fc2ab73830f7c6a7c107c6fe2b293719cf9da668)
@@ -14,4 +14,11 @@
 def index(request):
     return HttpResponse("ok")
+
+
+@api_view(['GET'])
+def subject_view(reuest, pk):
+    subject = Subject.objects.get(pk=pk)
+    serializer = SubjectSerializer(subject)
+    return Response(serializer.data)
 
 @api_view(['GET'])
@@ -38,2 +45,3 @@
     # serializer = SubjectSerializer(sorted_subjects, many=True)
     return Response({"data": final_subjects}, status=status.HTTP_200_OK)
+
Index: frontend/package-lock.json
===================================================================
--- frontend/package-lock.json	(revision 51b9afcad8ef84f7b224e730cb366c7fa2b2f417)
+++ frontend/package-lock.json	(revision fc2ab73830f7c6a7c107c6fe2b293719cf9da668)
@@ -11,4 +11,5 @@
 				"axios": "^1.9.0",
 				"jwt-decode": "^4.0.0",
+				"lucide-react": "^0.513.0",
 				"react": "^19.0.0",
 				"react-dom": "^19.0.0",
@@ -3227,4 +3228,13 @@
 			}
 		},
+		"node_modules/lucide-react": {
+			"version": "0.513.0",
+			"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.513.0.tgz",
+			"integrity": "sha512-CJZKq2g8Y8yN4Aq002GahSXbG2JpFv9kXwyiOAMvUBv7pxeOFHUWKB0mO7MiY4ZVFCV4aNjv2BJFq/z3DgKPQg==",
+			"license": "ISC",
+			"peerDependencies": {
+				"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+			}
+		},
 		"node_modules/math-intrinsics": {
 			"version": "1.1.0",
Index: frontend/package.json
===================================================================
--- frontend/package.json	(revision 51b9afcad8ef84f7b224e730cb366c7fa2b2f417)
+++ frontend/package.json	(revision fc2ab73830f7c6a7c107c6fe2b293719cf9da668)
@@ -16,4 +16,5 @@
 		"axios": "^1.9.0",
 		"jwt-decode": "^4.0.0",
+		"lucide-react": "^0.513.0",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision 51b9afcad8ef84f7b224e730cb366c7fa2b2f417)
+++ frontend/src/App.tsx	(revision fc2ab73830f7c6a7c107c6fe2b293719cf9da668)
@@ -11,4 +11,5 @@
 import Recommendations from "./pages/Recommendations";
 import Register from "./pages/Register";
+import SubjectView from "./pages/SubjectView";
 
 const Layout = () => (
@@ -39,4 +40,8 @@
 				),
 			},
+			{
+				path: "subjects/:id",
+				element: <SubjectView />,
+			},
 		],
 	},
Index: frontend/src/components/SubjectCatalog/FilterSidebar.tsx
===================================================================
--- frontend/src/components/SubjectCatalog/FilterSidebar.tsx	(revision 51b9afcad8ef84f7b224e730cb366c7fa2b2f417)
+++ frontend/src/components/SubjectCatalog/FilterSidebar.tsx	(revision fc2ab73830f7c6a7c107c6fe2b293719cf9da668)
@@ -22,5 +22,5 @@
 	const [showTags, setShowTags] = useState(false);
 	return (
-		<div className="">
+		<div className="max-w-sm mx-auto">
 			<div className="flex justify-between items-center mb-4">
 				<h2 className="text-lg font-semibold">Филтри</h2>
@@ -106,5 +106,5 @@
 				<div className="space-y-1 mb-4">
 					<h3 className="font-medium mb-2">Ниво</h3>
-					<div className="grid grid-cols-3">
+					<div className="flex gap-4 sm:grid sm:grid-cols-3">
 						{Array.from(Array(3)).map((_, index) => {
 							const i = index + 1;
@@ -129,5 +129,5 @@
 									<label
 										htmlFor={`s${level}`}
-										className="text-sm text-gray-700"
+										className="text-sm text-gray-700 whitespace-nowrap"
 									>
 										{level}
Index: frontend/src/components/SubjectCatalog/SubjectCatalog.tsx
===================================================================
--- frontend/src/components/SubjectCatalog/SubjectCatalog.tsx	(revision 51b9afcad8ef84f7b224e730cb366c7fa2b2f417)
+++ frontend/src/components/SubjectCatalog/SubjectCatalog.tsx	(revision fc2ab73830f7c6a7c107c6fe2b293719cf9da668)
@@ -6,5 +6,10 @@
 import SubjectList from "./SubjectList";
 import SubjectModal from "./SubjectModal";
-import { filterSubjects, getRandomStaff, resetFilters } from "./utils";
+import {
+	filterSubjects,
+	getRandomStaff,
+	getSubjectPrerequisites,
+	resetFilters,
+} from "./utils";
 const SubjectCatalog = () => {
 	const [visibleCourses, setVisibleCourses] = useState<number>(12);
@@ -70,24 +75,4 @@
 	const closeModal = () => {
 		setShowModal(false);
-	};
-
-	const getSubjectPrerequisites = (): "Нема предуслов" | number | string[] => {
-		const prerequisite = selectedSubject?.subject_info?.prerequisite;
-
-		if (!prerequisite) return "Нема предуслов";
-
-		if ("subjects" in prerequisite && Array.isArray(prerequisite.subjects)) {
-			const names = prerequisite.subjects.map(
-				(item) =>
-					subjectData.find((subject) => subject.id === item)?.name || "/"
-			);
-			return names.length > 0 ? names : "Нема предуслов";
-		}
-
-		if ("credits" in prerequisite && typeof prerequisite.credits === "number") {
-			return prerequisite.credits;
-		}
-
-		return "Нема предуслов";
 	};
 
@@ -177,5 +162,5 @@
 					selectedSubject={selectedSubject}
 					closeModal={closeModal}
-					subjectPrerequisites={getSubjectPrerequisites()}
+					subjectPrerequisites={getSubjectPrerequisites(selectedSubject)}
 				/>
 			)}
Index: frontend/src/components/SubjectCatalog/SubjectList.tsx
===================================================================
--- frontend/src/components/SubjectCatalog/SubjectList.tsx	(revision 51b9afcad8ef84f7b224e730cb366c7fa2b2f417)
+++ frontend/src/components/SubjectCatalog/SubjectList.tsx	(revision fc2ab73830f7c6a7c107c6fe2b293719cf9da668)
@@ -1,2 +1,3 @@
+import { useNavigate } from "react-router-dom";
 import { Subject } from "../types";
 
@@ -12,4 +13,10 @@
 	openSubjectDetails,
 }: SubjectListProps) => {
+	const navigate = useNavigate();
+	const openSubjectView = (subject: Subject) => {
+		navigate(`/subjects/${subject.id}`, {
+			state: { from: "/subjects" },
+		});
+	};
 	return (
 		<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
@@ -17,6 +24,5 @@
 				<div
 					key={subject.id}
-					className="border border-gray-200 rounded-lg overflow-hidden shadow-sm 
-                                    hover:shadow-md transition-shadow duration-200"
+					className="border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-200"
 				>
 					<div className="p-4 min-h-full flex flex-col gap-1">
@@ -27,11 +33,8 @@
 							</div>
 						</div>
-
 						{/* <p className="text-gray-700 text-sm mb-4 line-clamp-2">
-							{subject.abstract}
-						</p> */}
-
+            				{subject.abstract}
+          					</p> */}
 						<div className="flex flex-wrap gap-2 mb-4">
-							{/* these tags are for listing the domains a subject covers, ex. backend, AI ...*/}
 							{subject.subject_info.tags.map((tag) => (
 								<span
@@ -43,21 +46,30 @@
 							))}
 						</div>
-
-						<div className="flex justify-end mt-auto">
-							{/* these tags could be used as certain flags for some subjects, like most picked subject, best match etc. */}
-							{/* <div className="flex gap-3">
-								<div className="bg-red-500 px-1 py-1 rounded-full text-sm font-medium">
-									TAG1
-								</div>
-								<div className="bg-green-500 px-1 py-1 rounded-full text-sm font-medium">
-									TAG2
-								</div>
-							</div> */}
+						<div className="flex justify-between mt-auto gap-3">
 							<button
 								onClick={() => openSubjectDetails(subject)}
-								className="flex items-center text-sm text-gray-700 hover:text-gray-900"
+								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>
+							<button
+								onClick={() => openSubjectView(subject)}
+								className="flex items-center px-3 py-2 bg-gray-700 hover:bg-gray-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>
+								Отвори предмет
 							</button>
 						</div>
Index: frontend/src/components/SubjectCatalog/SubjectModal.tsx
===================================================================
--- frontend/src/components/SubjectCatalog/SubjectModal.tsx	(revision 51b9afcad8ef84f7b224e730cb366c7fa2b2f417)
+++ frontend/src/components/SubjectCatalog/SubjectModal.tsx	(revision fc2ab73830f7c6a7c107c6fe2b293719cf9da668)
@@ -1,8 +1,7 @@
-import { useState } from "react";
 import { Subject } from "../types";
 
 interface SubjectModalProps {
 	selectedSubject: Subject;
-	subjectPrerequisites: string[] | number | "Нема предуслов";
+	subjectPrerequisites: string | number | "Нема предуслов";
 	closeModal: () => void;
 }
@@ -13,29 +12,12 @@
 	subjectPrerequisites,
 }: SubjectModalProps) {
-	const [isExpanded, setIsExpanded] = useState(false);
-
-	const WORD_LIMIT = 40;
-
-	const truncateText = (text: string) => {
-		if (!text) return "";
-		const words = text.split(/\s+/);
-		return words.length <= WORD_LIMIT
-			? text
-			: words.slice(0, WORD_LIMIT).join(" ") + "...";
-	};
-
-	const canToggle = selectedSubject.abstract.split(/\s+/).length > WORD_LIMIT;
-	const abstractText = isExpanded
-		? selectedSubject.abstract
-		: truncateText(selectedSubject.abstract);
 	return (
 		<>
 			<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-				<div className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+				<div className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[93vh] overflow-y-auto">
 					<div className="p-6">
 						<div className="flex justify-between items-start mb-4">
 							<div>
 								<h2 className="text-2xl font-bold">{selectedSubject.name}</h2>
-								<p className="text-gray-600">{selectedSubject.code}</p>
 							</div>
 							<button
@@ -58,18 +40,4 @@
 								</svg>
 							</button>
-						</div>
-
-						<div className="mb-4">
-							<span className="inline">
-								<span className="">{abstractText}</span>
-								{canToggle && (
-									<button
-										className="text-blue-500 hover:underline ml-1 inline"
-										onClick={() => setIsExpanded(!isExpanded)}
-									>
-										{isExpanded ? "Прочитај помалку" : "Прочитај повеќе"}
-									</button>
-								)}
-							</span>
 						</div>
 
@@ -156,9 +124,9 @@
 											<p className="text-sm text-gray-500">Предуслови:</p>
 											<p className="font-medium">
-												{Array.isArray(subjectPrerequisites)
-													? subjectPrerequisites.join(" или ")
+												{typeof subjectPrerequisites === "string"
+													? subjectPrerequisites
 													: typeof subjectPrerequisites === "number"
 													? `${subjectPrerequisites} кредити`
-													: subjectPrerequisites}
+													: "Нема предуслов"}
 											</p>
 										</div>
@@ -176,17 +144,4 @@
 									${selectedSubject.subject_info.participants[0]} студенти.`}</p>
 							)}
-						</div>
-						<div className="mt-6">
-							<h3 className="text-lg font-medium mb-2">Тагови</h3>
-							<div className="flex flex-wrap gap-2">
-								{selectedSubject.subject_info.tags.map((tag) => (
-									<span
-										key={tag}
-										className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full"
-									>
-										{tag}
-									</span>
-								))}
-							</div>
 						</div>
 
Index: frontend/src/components/SubjectCatalog/utils.ts
===================================================================
--- frontend/src/components/SubjectCatalog/utils.ts	(revision 51b9afcad8ef84f7b224e730cb366c7fa2b2f417)
+++ frontend/src/components/SubjectCatalog/utils.ts	(revision fc2ab73830f7c6a7c107c6fe2b293719cf9da668)
@@ -151,2 +151,23 @@
 	setRandomStaff([randomProfessor, randomAssistant]);
 };
+
+export const getSubjectPrerequisites = (
+	subject: Subject
+): "Нема предуслов" | number | string => {
+	const prerequisite = subject?.subject_info?.prerequisite;
+
+	if (!prerequisite) return "Нема предуслов";
+
+	if ("subjects" in prerequisite && Array.isArray(prerequisite.subjects)) {
+		return (
+			(subject && subject.subject_info.prerequisite.subjects?.join(" или ")) ||
+			"Нема предуслов"
+		);
+	}
+
+	if ("credits" in prerequisite && typeof prerequisite.credits === "number") {
+		return prerequisite.credits;
+	}
+
+	return "Нема предуслов";
+};
Index: frontend/src/pages/SubjectView.tsx
===================================================================
--- frontend/src/pages/SubjectView.tsx	(revision fc2ab73830f7c6a7c107c6fe2b293719cf9da668)
+++ frontend/src/pages/SubjectView.tsx	(revision fc2ab73830f7c6a7c107c6fe2b293719cf9da668)
@@ -0,0 +1,406 @@
+import { ArrowLeft, Tag, Users } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { getSubjectPrerequisites } from "../components/SubjectCatalog/utils";
+import { Subject } from "../components/types";
+
+function SubjectView() {
+	const [selectedSubject, setSelectedSubject] = useState<Subject>(
+		{} as Subject
+	);
+	const [subjectPrerequisites, setSubjectPrerequisites] = useState<
+		"Нема предуслов" | number | string
+	>("Нема предуслов");
+	const [isLoading, setIsLoading] = useState(true);
+	const [isExpanded, setIsExpanded] = useState(false);
+	const { id } = useParams();
+	const navigate = useNavigate();
+	const location = useLocation();
+	const WORD_LIMIT = 40;
+
+	const from = location.state?.from || "/";
+
+	const truncateText = (text: string) => {
+		if (!text) return "";
+		const words = text.split(/\s+/);
+		return words.length <= WORD_LIMIT
+			? text
+			: words.slice(0, WORD_LIMIT).join(" ") + "...";
+	};
+
+	const canToggle =
+		selectedSubject.code &&
+		selectedSubject.abstract.split(/\s+/).length > WORD_LIMIT;
+	const abstractText = isExpanded
+		? selectedSubject.abstract
+		: truncateText(selectedSubject.abstract);
+
+	const handleGoBack = () => {
+		navigate(from);
+	};
+
+	useEffect(() => {
+		fetch(`http://localhost:8000/subjects/${id}/`)
+			.then((res) => res.json())
+			.then((data) => {
+				setSelectedSubject(data);
+				setSubjectPrerequisites(getSubjectPrerequisites(selectedSubject));
+				setIsLoading(false);
+			});
+	}, []);
+	if (isLoading)
+		return (
+			<div className="min-h-screen bg-gray-50 animate-pulse">
+				<div className="bg-white shadow-sm">
+					<div className="max-w-6xl mx-auto px-4 py-4">
+						<div className="flex items-center text-gray-300 mb-4">
+							<div className="w-5 h-5 bg-gray-200 rounded mr-2" />
+							<div className="h-4 w-32 bg-gray-200 rounded" />
+						</div>
+						<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
+							<div>
+								<div className="h-8 w-80 bg-gray-200 rounded mb-2" />
+								<div className="h-5 w-24 bg-gray-200 rounded" />
+							</div>
+							<div className="mt-4 sm:mt-0 flex space-x-4">
+								<div className="h-4 w-24 bg-gray-200 rounded" />
+								<div className="h-4 w-20 bg-gray-200 rounded" />
+							</div>
+						</div>
+					</div>
+				</div>
+				<div className="max-w-6xl mx-auto px-4 py-8">
+					<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+						<div className="lg:col-span-2 space-y-8">
+							<div className="bg-white rounded-lg shadow-sm p-6">
+								<div className="h-6 w-40 bg-gray-200 rounded mb-4" />
+								<div className="space-y-2">
+									<div className="h-4 w-full bg-gray-200 rounded" />
+									<div className="h-4 w-5/6 bg-gray-200 rounded" />
+									<div className="h-4 w-2/3 bg-gray-200 rounded" />
+								</div>
+							</div>
+							<div className="bg-white rounded-lg shadow-sm p-6">
+								<div className="h-6 w-40 bg-gray-200 rounded mb-6" />
+								<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+									<div className="space-y-2">
+										<div className="h-4 w-32 bg-gray-200 rounded" />
+										<div className="h-4 w-24 bg-gray-200 rounded" />
+									</div>
+									<div className="space-y-2">
+										<div className="h-4 w-32 bg-gray-200 rounded" />
+										<div className="h-4 w-24 bg-gray-200 rounded" />
+									</div>
+								</div>
+							</div>
+							<div className="bg-white rounded-lg shadow-sm p-6">
+								<div className="h-6 w-40 bg-gray-200 rounded mb-4" />
+								<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+									<div className="space-y-2">
+										<div className="h-4 w-32 bg-gray-200 rounded" />
+										<div className="h-4 w-24 bg-gray-200 rounded" />
+									</div>
+									<div className="space-y-2">
+										<div className="h-4 w-32 bg-gray-200 rounded" />
+										<div className="h-4 w-24 bg-gray-200 rounded" />
+									</div>
+								</div>
+							</div>
+							<div className="bg-white rounded-lg shadow-sm p-6">
+								<div className="h-6 w-32 bg-gray-200 rounded mb-4" />
+								<div className="flex flex-wrap gap-3">
+									<div className="h-6 w-16 bg-gray-200 rounded-full" />
+									<div className="h-6 w-20 bg-gray-200 rounded-full" />
+									<div className="h-6 w-12 bg-gray-200 rounded-full" />
+								</div>
+							</div>
+						</div>
+
+						<div className="space-y-6">
+							<div className="bg-white rounded-lg shadow-sm p-6 space-y-4">
+								<div className="h-6 w-32 bg-gray-200 rounded mb-6" />
+								<div className="h-4 w-24 bg-gray-200 rounded" />
+								<div className="h-4 w-16 bg-gray-200 rounded" />
+								<div className="h-4 w-20 bg-gray-200 rounded" />
+								<div className="h-4 w-28 bg-gray-200 rounded" />
+								<div className="h-4 w-24 bg-gray-200 rounded" />
+							</div>
+							<div className="bg-white rounded-lg shadow-sm p-6">
+								<div className="h-6 w-32 bg-gray-200 rounded mb-4" />
+								<div className="h-4 w-40 bg-gray-200 rounded" />
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		);
+	return (
+		<div className="min-h-screen bg-gray-50">
+			<div className="bg-white shadow-sm">
+				<div className="max-w-6xl mx-auto px-4 py-4">
+					<button
+						onClick={handleGoBack}
+						className="flex items-center text-gray-600 hover:text-gray-900 mb-4"
+					>
+						<ArrowLeft className="w-5 h-5 mr-2" />
+						Назад кон
+						{from == "/subjects"
+							? " сите предмети"
+							: from == "/recommendations"
+							? " препораките"
+							: " домашната страна"}
+					</button>
+
+					<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
+						<div>
+							<h1 className="text-3xl font-bold text-gray-900">
+								{selectedSubject.name}
+							</h1>
+							<p className="text-lg text-gray-600 mt-1">
+								{selectedSubject.code}
+							</p>
+						</div>
+
+						{/* <div className="mt-4 sm:mt-0">
+							<div className="flex items-center space-x-4 text-sm text-gray-500">
+								<div className="flex items-center">
+									<Calendar className="w-4 h-4 mr-1" />
+									{subject.subject_info.season === "S"
+										? "Летен"
+										: "Зимски"}{" "}
+									семестар
+								</div>
+								<div className="flex items-center">
+									<BookOpen className="w-4 h-4 mr-1" />L
+									{subject.subject_info.level} ниво
+								</div>
+							</div>
+						</div> */}
+					</div>
+				</div>
+			</div>
+
+			<div className="max-w-6xl mx-auto px-4 py-8">
+				<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+					<div className="lg:col-span-2 space-y-8">
+						<div className="bg-white rounded-lg shadow-sm p-6">
+							<h2 className="text-xl font-semibold mb-4">Опис на предметот</h2>
+							<div className="text-gray-700 leading-relaxed">
+								<span>{abstractText}</span>
+								{canToggle && (
+									<button
+										className="text-blue-600 hover:text-blue-800 ml-2 font-medium"
+										onClick={() => setIsExpanded(!isExpanded)}
+									>
+										{isExpanded ? "Прочитај помалку" : "Прочитај повеќе"}
+									</button>
+								)}
+							</div>
+						</div>
+
+						<div className="bg-white rounded-lg shadow-sm p-6">
+							<h2 className="text-xl font-semibold mb-6">Наставен кадар</h2>
+
+							<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+								<div>
+									<h3 className="text-lg font-medium mb-3 text-gray-900">
+										Професори
+									</h3>
+									{selectedSubject.subject_info.professors.length === 0 ? (
+										<p className="text-gray-500">Нема одредени професори</p>
+									) : (
+										<ul className="space-y-2">
+											{selectedSubject.subject_info.professors.map(
+												(professor, index) => (
+													<li key={index} className="text-gray-700">
+														{professor}
+													</li>
+												)
+											)}
+										</ul>
+									)}
+								</div>
+
+								<div>
+									<h3 className="text-lg font-medium mb-3 text-gray-900">
+										Асистенти
+									</h3>
+									{selectedSubject.subject_info.assistants.length === 0 ? (
+										<p className="text-gray-500">Нема одредени асистенти</p>
+									) : (
+										<ul className="space-y-2">
+											{selectedSubject.subject_info.assistants.map(
+												(assistant, index) => (
+													<li key={index} className="text-gray-700">
+														{assistant}
+													</li>
+												)
+											)}
+										</ul>
+									)}
+								</div>
+							</div>
+						</div>
+
+						<div className="bg-white rounded-lg shadow-sm p-6">
+							<h2 className="text-xl font-semibold mb-4">
+								Информации за запишување
+							</h2>
+
+							<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+								<div>
+									<h3 className="text-lg font-medium mb-3 text-gray-900">
+										Задолжителен за:
+									</h3>
+									{selectedSubject.subject_info.mandatory_for.length === 0 ? (
+										<p className="text-gray-500">Не е задолжителен предмет</p>
+									) : (
+										<ul className="space-y-1">
+											{selectedSubject.subject_info.mandatory_for
+												.map((s) => s.replace(/\d+$/, ""))
+												.map((program, index) => (
+													<li key={index} className="text-gray-700">
+														{program}
+													</li>
+												))}
+										</ul>
+									)}
+								</div>
+
+								<div>
+									<h3 className="text-lg font-medium mb-3 text-gray-900">
+										Изборен за:
+									</h3>
+									{selectedSubject.subject_info.elective_for.length === 0 ? (
+										<p className="text-gray-500">Не е изборен предмет</p>
+									) : (
+										<ul className="space-y-1">
+											{selectedSubject.subject_info.elective_for
+												.map((s) => s.replace(/\d+$/, ""))
+												.map((program, index) => (
+													<li key={index} className="text-gray-700">
+														{program}
+													</li>
+												))}
+										</ul>
+									)}
+								</div>
+							</div>
+						</div>
+
+						{/* Tags */}
+						<div className="bg-white rounded-lg shadow-sm p-6">
+							<h2 className="text-xl font-semibold mb-4 flex items-center">
+								<Tag className="w-5 h-5 mr-2" />
+								Тагови
+							</h2>
+							<div className="flex flex-wrap gap-3">
+								{selectedSubject.subject_info.tags.map((tag, index) => (
+									<span
+										key={index}
+										className="bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium"
+									>
+										{tag}
+									</span>
+								))}
+							</div>
+						</div>
+					</div>
+
+					<div className="space-y-6">
+						<div className="bg-white rounded-lg shadow-sm p-6">
+							<h2 className="text-xl font-semibold mb-6">Некој текст</h2>
+							<div className="space-y-4">
+								<div>
+									<p className="text-sm text-gray-500 mb-1">
+										Препорачан семестар
+									</p>
+									<p className="font-medium text-lg">
+										{selectedSubject.subject_info.semester}
+									</p>
+								</div>
+
+								<div>
+									<p className="text-sm text-gray-500 mb-1">Семестар</p>
+									<p className="font-medium">
+										{selectedSubject.subject_info.season === "S"
+											? "Летен"
+											: "Зимски"}
+									</p>
+								</div>
+
+								<div>
+									<p className="text-sm text-gray-500 mb-1">Ниво</p>
+									<p className="font-medium">
+										L{selectedSubject.subject_info.level}
+									</p>
+								</div>
+
+								<div>
+									<p className="text-sm text-gray-500 mb-1">Предуслови</p>
+									<p className="font-medium">
+										{typeof subjectPrerequisites === "string"
+											? subjectPrerequisites
+											: typeof subjectPrerequisites === "number"
+											? `${subjectPrerequisites} кредити`
+											: "Нема предуслов"}
+									</p>
+								</div>
+
+								<div>
+									<p className="text-sm text-gray-500 mb-1">Технологии</p>
+									<p className="font-medium">
+										{selectedSubject.subject_info.technologies.length
+											? selectedSubject.subject_info.technologies.join(", ")
+											: "Нема одредени технологии"}
+									</p>
+								</div>
+							</div>
+						</div>
+
+						<div className="bg-white rounded-lg shadow-sm p-6">
+							<h3 className="text-lg font-semibold mb-4 flex items-center">
+								<Users className="w-5 h-5 mr-2" />
+								Статистики
+							</h3>
+
+							{selectedSubject.subject_info.participants[0] === 0 ? (
+								<div className="bg-red-50 border border-red-200 rounded-lg p-4">
+									<p className="text-red-800 font-medium">
+										Овој предмет не бил активиран минатиот семестар.
+									</p>
+								</div>
+							) : (
+								<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+									<p className="text-blue-800">
+										Овој предмет минатиот семестар бил запишан од{" "}
+										<span className="font-bold">
+											{selectedSubject.subject_info.participants[0]}
+										</span>{" "}
+										студенти.
+									</p>
+								</div>
+							)}
+						</div>
+
+						{/* <div className="bg-white rounded-lg shadow-sm p-6">
+							<div className="space-y-3">
+								<button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition-colors">
+									Запиши предмет
+								</button>
+								<button className="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-3 px-4 rounded-lg transition-colors">
+									Додај во омилени
+								</button>
+								<button className="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-3 px-4 rounded-lg transition-colors">
+									Сподели
+								</button>
+							</div>
+						</div> */}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default SubjectView;