diff --git a/backend/api/blogs/blog.go b/backend/api/blogs/blog.go
index 5e50e04..405fb46 100644
--- a/backend/api/blogs/blog.go
+++ b/backend/api/blogs/blog.go
@@ -9,12 +9,12 @@ import (
 )
 
 func HandleBlog(w http.ResponseWriter, r *http.Request) {
-	blog_uuid := r.PathValue("uuid")
+	slug := r.PathValue("slug")
 
 	var blog models.Blog
 	_, err := core.DB.NewSelect().
 		Model(&blog).
-		Where("blog_id = ?", blog_uuid).
+		Where("slug = ?", slug).
 		Relation("Author").
 		ScanAndCount(context.Background())
 	if err != nil {
diff --git a/backend/api/blogs_routes.go b/backend/api/blogs_routes.go
index 9f94bc2..d3b261b 100644
--- a/backend/api/blogs_routes.go
+++ b/backend/api/blogs_routes.go
@@ -10,7 +10,7 @@ var BlogsRoutes = map[string]core.Handler{
 		Handler: blogs.HandleNew,
 		Middlewares: []core.Middleware{Methods(("POST")),
 			HasPermissions("blogs", "insert"), AuthJWT}},
-	"/blogs/{uuid}": {
+	"/blogs/{slug}": {
 		Handler:     blogs.HandleBlog,
 		Middlewares: []core.Middleware{Methods("GET")}},
 }
diff --git a/frontend/app/(main)/blogs/[slug]/page.tsx b/frontend/app/(main)/blogs/[slug]/page.tsx
index 85c3a0a..efcf224 100644
--- a/frontend/app/(main)/blogs/[slug]/page.tsx
+++ b/frontend/app/(main)/blogs/[slug]/page.tsx
@@ -1,40 +1,24 @@
 "use server";
 
-import BlogItem, { BlogItemParams } from "@/components/blogItem";
+import BlogArticle from "@/components/article";
+import request from "@/lib/request";
 import { Blog } from "@/types/types";
+import { notFound } from "next/navigation";
 
 export default async function HistoryDetails({
 	params,
 }: {
-	params: Promise<{ blog_id: string }>;
+	params: Promise<{ slug: string }>;
 }) {
-	const { blog_id } = await params;
-	let blog = {};
-	try {
-		const res = await fetch("http://localhost:3001/blogs/" + blog_id, {
-			method: "GET",
-		});
-		blog = await res.json();
-		console.log(blog as Blog);
-	} catch (e) {
-		console.log(e);
+	const { slug } = await params;
+	const blog = await request<Blog>(`/blogs/${slug}`, {
+		csrfToken: false,
+		requiresAuth: false,
+	});
+
+	if (blog.status === "Error" || !blog.data) {
+		return notFound();
 	}
 
-	if (blog == null) {
-		return <>Error</>;
-	}
-
-	const blog_item_params: BlogItemParams = {
-		title_style:
-			"py-12 mb-3 text-pretty text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-3xl",
-		subtitle_style:
-			"py-12 mb-3 text-pretty text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-3xl",
-		p_style:
-			"blog-paragraph mb-5 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg",
-		default_img:
-			"https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
-		blog: blog as Blog,
-	};
-
-	return <BlogItem params={blog_item_params} />;
+	return <BlogArticle blog={blog.data} />;
 }
diff --git a/frontend/components/article.tsx b/frontend/components/article.tsx
new file mode 100644
index 0000000..698b5e0
--- /dev/null
+++ b/frontend/components/article.tsx
@@ -0,0 +1,66 @@
+import Image from "next/image";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { CalendarIcon } from "lucide-react";
+import { Blog } from "@/types/types";
+
+const BlogArticle: React.FC<{ blog: Blog }> = ({ blog }) => {
+	return (
+		<article className="mx-auto max-w-3xl px-4 py-8 md:py-12">
+			<div className="space-y-6">
+				<div className="space-y-2">
+					<div className="flex items-center gap-2">
+						<Badge variant="secondary">{blog.category}</Badge>
+						<time className="flex items-center text-sm text-muted-foreground">
+							<CalendarIcon className="mr-1 h-4 w-4" />
+							{new Date(blog.published).toLocaleString()}
+						</time>
+					</div>
+					<h1 className="text-3xl font-bold tracking-tight sm:text-4xl">
+						{blog.title}
+					</h1>
+					{blog.summary && (
+						<p className="text-lg text-muted-foreground">
+							{blog.summary}
+						</p>
+					)}
+				</div>
+
+				<div className="flex items-center gap-3">
+					<Avatar>
+						<AvatarImage
+							src={`https://avatar.vercel.sh/blog.author.userId`}
+							alt={`${blog.author.firstname} ${blog.author.lastname}`}
+						/>
+						<AvatarFallback>
+							{(
+								blog.author.firstname[0] +
+								blog.author.lastname[0]
+							).toUpperCase()}
+						</AvatarFallback>
+					</Avatar>
+					<div>
+						<p className="font-medium">
+							{blog.author.firstname} {blog.author.lastname}
+						</p>
+						<p className="text-sm text-muted-foreground">idk</p>
+					</div>
+				</div>
+
+				<div className="relative aspect-video overflow-hidden rounded-lg">
+					<Image
+						src={blog.image ?? "/placeholder.svg"}
+						alt={blog.title}
+						className="object-cover"
+						fill
+						priority
+					/>
+				</div>
+
+				<div dangerouslySetInnerHTML={{ __html: blog.content }} />
+			</div>
+		</article>
+	);
+};
+
+export default BlogArticle;
diff --git a/frontend/lib/request.ts b/frontend/lib/request.ts
index baec34c..1c310d6 100644
--- a/frontend/lib/request.ts
+++ b/frontend/lib/request.ts
@@ -48,9 +48,5 @@ export default async function request<T>(
 
 	const apiResponse: ApiResponse<T> = await response.json();
 
-	if (apiResponse.status === "Error") {
-		throw new Error(apiResponse.message || "An unexpected error occurred");
-	}
-
 	return apiResponse;
 }
diff --git a/frontend/types/types.tsx b/frontend/types/types.tsx
index df7ab4e..11d1493 100644
--- a/frontend/types/types.tsx
+++ b/frontend/types/types.tsx
@@ -24,6 +24,7 @@ export interface Blog {
 	blogID: string;
 	slug: string;
 	content: string;
+	category?: string;
 	title: string;
 	authorID: string;
 	published: string;