Index: frontend/src/components/SubjectView/SkeletonSubjectView.tsx
===================================================================
--- frontend/src/components/SubjectView/SkeletonSubjectView.tsx	(revision c5d16e2ac38de5385b577dc0147290d017f1880c)
+++ frontend/src/components/SubjectView/SkeletonSubjectView.tsx	(revision c5d16e2ac38de5385b577dc0147290d017f1880c)
@@ -0,0 +1,85 @@
+function SkeletonSubjectView() {
+	return (
+		<div className="min-h-screen bg-gray-50">
+			<div className="bg-white shadow-s mb-5 py-4">
+				<div className="max-w-6xl mx-auto px-4 py-1.5 skeleton-pulse mb-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>
+				</div>
+			</div>
+			<div className="max-w-6xl mx-auto px-4 py-8 bg-gray-50">
+				<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 skeleton-pulse">
+							<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 skeleton-pulse">
+							<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 skeleton-pulse">
+							<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 skeleton-pulse">
+							<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>
+	);
+}
+
+export default SkeletonSubjectView;
Index: frontend/src/index.css
===================================================================
--- frontend/src/index.css	(revision b192b52ea3a0a90e7ec0905e423bd1a8ad79cb52)
+++ frontend/src/index.css	(revision c5d16e2ac38de5385b577dc0147290d017f1880c)
@@ -28,4 +28,17 @@
 }
 
+@keyframes skeleton-pulse {
+	0%,
+	100% {
+		background-color: #ffffff; /* white */
+	}
+	50% {
+		background-color: #f9fafb; /* gray-50 */
+	}
+}
+.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 */
Index: frontend/src/pages/SubjectView.tsx
===================================================================
--- frontend/src/pages/SubjectView.tsx	(revision b192b52ea3a0a90e7ec0905e423bd1a8ad79cb52)
+++ frontend/src/pages/SubjectView.tsx	(revision c5d16e2ac38de5385b577dc0147290d017f1880c)
@@ -3,4 +3,5 @@
 import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { getSubjectPrerequisites } from "../components/SubjectCatalog/utils";
+import SkeletonSubjectView from "../components/SubjectView/SkeletonSubjectView";
 import { Subject } from "../components/types";
 import { EVALUATION_MAP_TO_MK } from "../constants/subjects";
@@ -61,90 +62,6 @@
 			});
 	}, []);
-	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>
-		);
+	if (isLoading) return <SkeletonSubjectView />;
+
 	return (
 		<div className="min-h-screen bg-gray-50">
Index: frontend/tailwind.config.cjs
===================================================================
--- frontend/tailwind.config.cjs	(revision b192b52ea3a0a90e7ec0905e423bd1a8ad79cb52)
+++ frontend/tailwind.config.cjs	(revision c5d16e2ac38de5385b577dc0147290d017f1880c)
@@ -3,5 +3,15 @@
 	content: ["./src/**/*.{js,jsx,ts,tsx}"],
 	theme: {
-		extend: {},
+		extend: {
+			animation: {
+				"skeleton-pulse": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+			},
+			keyframes: {
+				"skeleton-pulse": {
+					"0%, 100%": { backgroundColor: "#ffffff" }, // white
+					"50%": { backgroundColor: "#f9fafb" },
+				},
+			},
+		},
 	},
 	plugins: [],