diff --git a/backend/src/controllers/blog.controller.js b/backend/src/controllers/blog.controller.js
index c0a839a..f4cfd9f 100644
--- a/backend/src/controllers/blog.controller.js
+++ b/backend/src/controllers/blog.controller.js
@@ -4,7 +4,7 @@ import slugify from "slugify";
 /* CREATE BLOG */
 
 export async function createBlog(req, res) {
-	const { title, writer, image, content, isActive } = req.body;
+	const {title, writer, image, content, isActive} = req.body;
 
 	try {
 		const blog = await prisma.blog.create({
@@ -20,7 +20,7 @@ export async function createBlog(req, res) {
 
 		res.json(blog);
 	} catch (error) {
-		res.status(500).json({ error: "Blog creation failed" });
+		res.status(500).json({error: "Blog creation failed"});
 	}
 }
 
@@ -29,13 +29,13 @@ export async function createBlog(req, res) {
 export async function getBlogs(req, res) {
 	try {
 		const blogs = await prisma.blog.findMany({
-			where: { isActive: true },
-			orderBy: { createdAt: "desc" },
+			where: {isActive: true},
+			orderBy: {createdAt: "desc"},
 		});
 
 		res.json(blogs);
 	} catch (error) {
-		res.status(500).json({ error: error.message });
+		res.status(500).json({error: error.message});
 	}
 }
 
@@ -44,12 +44,12 @@ export async function getBlogs(req, res) {
 export async function getAllBlogs(req, res) {
 	try {
 		const blogs = await prisma.blog.findMany({
-			orderBy: { createdAt: "desc" },
+			orderBy: {createdAt: "desc"},
 		});
 
 		res.json(blogs);
 	} catch (error) {
-		res.status(500).json({ error: error.message });
+		res.status(500).json({error: error.message});
 	}
 }
 
@@ -58,19 +58,18 @@ export async function getAllBlogs(req, res) {
 export async function getBlog(req, res) {
 	try {
 		const slug = req.params.slug;
-		console.log({ slug });
 
 		const blog = await prisma.blog.findUnique({
-			where: { slug },
+			where: {slug},
 		});
 
 		if (!blog) {
-			return res.status(404).json({ error: "Blog not found" });
+			return res.status(404).json({error: "Blog not found"});
 		}
 
 		res.json(blog);
 	} catch (error) {
-		res.status(500).json({ error: error.message });
+		res.status(500).json({error: error.message});
 	}
 }
 
@@ -81,16 +80,16 @@ export async function getBlogForAdmin(req, res) {
 		const id = Number(req.params.id);
 
 		const blog = await prisma.blog.findUnique({
-			where: { id },
+			where: {id},
 		});
 
 		if (!blog) {
-			return res.status(404).json({ error: "Blog not found" });
+			return res.status(404).json({error: "Blog not found"});
 		}
 
 		res.json(blog);
 	} catch (error) {
-		res.status(500).json({ error: error.message });
+		res.status(500).json({error: error.message});
 	}
 }
 
@@ -98,10 +97,10 @@ export async function getBlogForAdmin(req, res) {
 
 export async function updateBlog(req, res) {
 	try {
-		const { title, writer, image, content } = req.body;
+		const {title, writer, image, content} = req.body;
 
 		const blog = await prisma.blog.update({
-			where: { id: Number(req.params.id) },
+			where: {id: Number(req.params.id)},
 			data: {
 				title,
 				writer,
@@ -112,7 +111,7 @@ export async function updateBlog(req, res) {
 
 		res.json(blog);
 	} catch (error) {
-		res.status(500).json({ error: error.message });
+		res.status(500).json({error: error.message});
 	}
 }
 
@@ -123,11 +122,11 @@ export async function deleteBlog(req, res) {
 		const id = Number(req.params.id);
 
 		await prisma.blog.delete({
-			where: { id },
+			where: {id},
 		});
 
-		res.json({ message: "Blog deleted successfully" });
+		res.json({message: "Blog deleted successfully"});
 	} catch (error) {
-		res.status(500).json({ error: error.message });
+		res.status(500).json({error: error.message});
 	}
 }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e1bb47c..46ed472 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -115,7 +115,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -1760,7 +1759,6 @@
       "resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-1.3.0.tgz",
       "integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": "^14.21.3 || >=16"
       },
@@ -4093,7 +4091,6 @@
       "integrity": "sha512-GYDxsZi3ChgmckRT9HPU0WEhKLP08ev/Yfcq2AstjrDASOYCSXeyjDsHg4v5t4jOj7cyDX3vmprafKlWIG9MXQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -4104,7 +4101,6 @@
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -4115,7 +4111,6 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -4177,7 +4172,6 @@
       "integrity": "sha512-XZzOmihLIr8AD1b9hL9ccNMzEMWt/dE2u7NyTY9jJG6YNiNthaD5XtUHVF2uCXZ15ng+z2hT3MVuxnUYhq6k1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.57.0",
         "@typescript-eslint/types": "8.57.0",
@@ -4468,7 +4462,6 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4728,7 +4721,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -5558,7 +5550,6 @@
       "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -5811,7 +5802,6 @@
       "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
       "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "accepts": "^2.0.0",
         "body-parser": "^2.2.1",
@@ -6466,7 +6456,6 @@
       "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.7.tgz",
       "integrity": "sha512-jq9l1DM0zVIvsm3lv9Nw9nlJnMNPOcAtsbsgiUhWcFzPE99Gvo6yRTlszSLLYacMeQ6quHD6hMfId8crVHvexw==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=16.9.0"
       }
@@ -8131,7 +8120,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8141,7 +8129,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -8905,8 +8892,7 @@
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.1.tgz",
       "integrity": "sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/tailwindcss-animate": {
       "version": "1.0.7",
@@ -9113,7 +9099,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9314,7 +9299,6 @@
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -9659,7 +9643,6 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 17b1782..1838c21 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -20,6 +20,7 @@ import CandidatePage from "./pages/candidates";
 import InquiryPage from "./pages/inquiry";
 import AcademicsPage from "./pages/Academics";
 import NewsPage from "./pages/newsMedia";
+import BlogDetail from "./pages/BlogDetails";
 
 export default function App() {
 	return (
@@ -35,6 +36,7 @@ export default function App() {
 							<Route path="/department" element={<Department />} />
 							<Route path="/doctor" element={<Doctor />} />
 							<Route path="/blog" element={<Blog />} />
+							<Route path="/blog/:id" element={<BlogDetail />} />
 							<Route path="/blog/create" element={<BlogEditorPage />} />
 							<Route path="/blog/edit/:id" element={<BlogEditorPage />} />
 							<Route path="/appointment" element={<Appointment />} />
diff --git a/frontend/src/api/blog.ts b/frontend/src/api/blog.ts
index 7e46c5c..ceee3d3 100644
--- a/frontend/src/api/blog.ts
+++ b/frontend/src/api/blog.ts
@@ -14,7 +14,7 @@ export const getAllBlogsApi = async () => {
 };
 
 export const getBlogByIdApi = async (id: number) => {
-	const res = await apiClient.get(`/blogs/${id}`);
+	const res = await apiClient.get(`/blogs/admin/${id}`);
 	return res.data;
 };
 
diff --git a/frontend/src/pages/Blog.tsx b/frontend/src/pages/Blog.tsx
index d1fc088..444c881 100644
--- a/frontend/src/pages/Blog.tsx
+++ b/frontend/src/pages/Blog.tsx
@@ -17,7 +17,7 @@ import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 import {Button} from "@/components/ui/button";
 import {Input} from "@/components/ui/input";
 
-import {Loader2, RefreshCw, Plus, Pencil, Trash} from "lucide-react";
+import {Loader2, RefreshCw, Plus, Pencil, Trash, Eye} from "lucide-react";
 
 interface Blog {
 	id: number;
@@ -161,6 +161,13 @@ export default function BlogPage() {
 													<Pencil className="h-4 w-4" />
 												</Button>
 
+												<Button
+													size="sm"
+													variant="secondary"
+													onClick={() => navigate(`/blog/${blog.id}`)}
+												>
+													<Eye className="h-4 w-4" />
+												</Button>
 												<Button
 													size="sm"
 													variant="destructive"
diff --git a/frontend/src/pages/BlogDetails.tsx b/frontend/src/pages/BlogDetails.tsx
new file mode 100644
index 0000000..7f4c533
--- /dev/null
+++ b/frontend/src/pages/BlogDetails.tsx
@@ -0,0 +1,74 @@
+import React, {useEffect, useState} from "react";
+import {useParams, useNavigate} from "react-router-dom";
+import axios from "axios";
+
+import {Button} from "@/components/ui/button";
+import {Card, CardContent} from "@/components/ui/card";
+import {getBlogByIdApi} from "@/api/blog";
+
+const BlogDetail = () => {
+	const {id} = useParams();
+	const navigate = useNavigate();
+	const [blog, setBlog] = useState<any>(null);
+
+	const fetchBlogById = async () => {
+		try {
+			const response = await getBlogByIdApi(Number(id));
+
+			setBlog(response);
+		} catch (error) {
+			console.error("Error fetching blog", error);
+		}
+	};
+
+	useEffect(() => {
+		fetchBlogById();
+	}, [id]); // ✅ FIXED dependency
+
+	if (!blog) {
+		return <div className="mt-40 text-center text-gray-500">Loading...</div>;
+	}
+
+	return (
+		<div className=" mx-auto flex flex-col ">
+			<Card>
+				<CardContent className="p-6 space-y-4">
+					{/* Back */}
+					<Button
+						variant="ghost"
+						className="text-black-600 p-0"
+						onClick={() => navigate(-1)}
+					>
+						← Back
+					</Button>
+
+					{/* Title */}
+					<h1 className="text-2xl md:text-4xl lg:text-5xl font-bold">
+						{blog.title}
+					</h1>
+
+					{/* Meta */}
+					<p className="text-gray-500 text-sm">
+						{blog.writer} • {new Date(blog.createdAt).toLocaleDateString()}
+					</p>
+
+					{/* Image */}
+					<img
+						src={blog.image}
+						alt={blog.title}
+						className="w-full h-[220px] md:h-[400px] object-cover rounded-md"
+					/>
+
+					{/* Content */}
+					<div className="space-y-3 text-gray-800 leading-relaxed">
+						{blog.content?.blocks?.map((block: any, index: number) => (
+							<p key={index}>{block.data?.text}</p>
+						))}
+					</div>
+				</CardContent>
+			</Card>
+		</div>
+	);
+};
+
+export default BlogDetail;