diff --git a/latosa-frontend/app/(main)/gallery/page.tsx b/latosa-frontend/app/(main)/gallery/page.tsx
deleted file mode 100644
index 5a9a15b..0000000
--- a/latosa-frontend/app/(main)/gallery/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Gallery() {
-	return <></>;
-}
diff --git a/latosa-frontend/app/(main)/history/[slug]/page.tsx b/latosa-frontend/app/(main)/history/[slug]/page.tsx
index bea6a2e..ee9451c 100644
--- a/latosa-frontend/app/(main)/history/[slug]/page.tsx
+++ b/latosa-frontend/app/(main)/history/[slug]/page.tsx
@@ -1,80 +1,31 @@
 "use server";
 
+import { BlogInterface, posts } from "@/components/blog";
+import BlogItem, { BlogItemParams } from "@/components/blogItem";
+
 export default async function HistoryDetails({
 	params,
 }: {
 	params: Promise<{ slug: string }>;
 }) {
 	const { slug } = await params;
-	const default_img: string =
-		"https://shadcnblocks.com/images/block/placeholder-dark-1.svg";
-	const default_style: string =
-		"blog-paragraph mb-5 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg";
-	const sub_header_style: string =
-		"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";
 
-	return (
-		<main className="flex flex-col w-full lg:md:py-24 sm:py-24">
-			<section className="container self-center max-w-2xl">
-				<div className="blog-title w-full h-28 justify-center">
-					<h1 className="mb-3 text-pretty text-3xl font-semibold lg:text-5xl">
-						{slug}
-					</h1>
-				</div>
-				<div className="content">
-					<div>
-						<h2 className={sub_header_style}>Subtitle 1</h2>
-						<p className={default_style}>
-							Lorem ipsum dolor sit amet, consectetur adipisicing
-							elit. Deleniti architecto incidunt, hic in
-							consectetur eligendi nobis numquam tenetur sit
-							repellat et unde, maxime ducimus autem esse
-							temporibus omnis eum molestias!
-						</p>
-					</div>
-					<div>
-						<img
-							src={default_img}
-							alt={slug}
-							className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
-						/>
-					</div>
-					<div>
-						<h2 className={sub_header_style}>Subtitle 2</h2>
-						<p className={default_style}>
-							Lorem ipsm dolor sit amet, consectetur adipisicing
-							elit. Deleniti architecto incidunt, hic in
-							consectetur eligendi nobis numquam tenetur sit
-							repellat et unde, maxime ducimus autem esse
-							temporibus omnis eum molestias!
-						</p>
-					</div>
-					<div>
-						<img
-							src={default_img}
-							alt={slug}
-							className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
-						/>
-					</div>
-					<div>
-						<h2 className={sub_header_style}>Subtitle 3</h2>
-						<p className={default_style}>
-							Lorem ipsum dolor sit amet, consectetur adipisicing
-							elit. Deleniti architecto incidunt, hic in
-							consectetur eligendi nobis numquam tenetur sit
-							repellat et unde, maxime ducimus autem esse
-							temporibus omnis eum molestias!
-						</p>
-						<p className={default_style}>
-							Lorem ipsum dolor sit amet, consectetur adipisicing
-							elit. Deleniti architecto incidunt, hic in
-							consectetur eligendi nobis numquam tenetur sit
-							repellat et unde, maxime ducimus autem esse
-							temporibus omnis eum molestias!
-						</p>
-					</div>
-				</div>
-			</section>
-		</main>
-	);
+	const blog_item: BlogInterface = posts.find(
+		(value) => value.slug == slug,
+	) as BlogInterface;
+
+	const blog_item_params: BlogItemParams = {
+		slug: slug,
+		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_content: blog_item,
+	};
+
+	return <BlogItem params={blog_item_params} />;
 }
diff --git a/latosa-frontend/components/blog.tsx b/latosa-frontend/components/blog.tsx
index 19acb74..a898b63 100644
--- a/latosa-frontend/components/blog.tsx
+++ b/latosa-frontend/components/blog.tsx
@@ -2,92 +2,111 @@ import { ArrowRight } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 
-const posts = [
-  {
-    id: "post-1",
-    title: "Duis sem sem, gravida vel porttitor eu, volutpat ut arcu",
-    summary:
-      "Pellentesque eget quam ligula. Sed felis ante, consequat nec ultrices ut, ornare quis metus. Vivamus sit amet tortor vel enim sollicitudin hendrerit.",
-    label: "Ut varius dolor turpis",
-    author: "Jane Doe",
-    published: "1 Jan 2024",
-    href: "#",
-    image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
-  },
-  {
-    id: "post-2",
-    title: "Duis sem sem, gravida vel porttitor eu, volutpat ut arcu",
-    summary:
-      "Pellentesque eget quam ligula. Sed felis ante, consequat nec ultrices ut, ornare quis metus. Vivamus sit amet tortor vel enim sollicitudin hendrerit.",
-    label: "Ut varius dolor turpis",
-    author: "Jane Doe",
-    published: "1 Jan 2024",
-    href: "#",
-    image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
-  },
-  {
-    id: "post-3",
-    title: "Duis sem sem, gravida vel porttitor eu, volutpat ut arcu",
-    summary:
-      "Pellentesque eget quam ligula. Sed felis ante, consequat nec ultrices ut, ornare quis metus. Vivamus sit amet tortor vel enim sollicitudin hendrerit.",
-    label: "Ut varius dolor turpis",
-    author: "Jane Doe",
-    published: "1 Jan 2024",
-    href: "#",
-    image: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
-  },
+export interface BlogInterface {
+	id: string,
+	slug: string,
+	title: string,
+	content: string,
+	label: string,
+	author: string,
+	published: string,
+}
+
+export interface BlogSummaryInterface extends BlogInterface {
+	summary: string,
+	image: string, 
+	href: string
+}
+
+export const posts: BlogSummaryInterface[] = [
+	{
+		id: 'a1b2c3d4-e5f6-7g8h-9i0j-k1l2m3n4o5p6',
+		slug: 'tech-advancements-2025',
+		title: 'Tech Advancements in 2025',
+		content: 'The year 2025 promises groundbreaking technologies that will reshape industries. In this article, we explore the key advancements that could transform how we work, live, and communicate.',
+		label: 'Technology',
+		author: 'd3f5e6g7-h8i9j0k1-l2m3n4o5p6q7',
+		published: '2025-01-14',
+		summary: 'A look at the tech trends to expect in 2025 and beyond, from AI to quantum computing.',
+		image: 'https://via.placeholder.com/600x400?text=Tech+2025',
+		href: 'history/tech-advancements-2025'
+	},
+	{
+		id: 'f7g8h9i0-j1k2l3m4-n5o6p7q8r9s0t1u2v3',
+		slug: 'sustainable-fashion-2025',
+		title: 'Sustainable Fashion in 2025',
+		content: 'Sustainability is no longer a trend, but a movement within the fashion industry. This article discusses how eco-friendly practices are influencing fashion designs and consumer behavior in 2025.',
+		label: 'Fashion',
+		author: 'w4x5y6z7-a8b9c0d1-e2f3g4h5i6j7',
+		published: '2025-01-12',
+		summary: 'Exploring how sustainable fashion is evolving in 2025 with innovative materials and ethical brands.',
+		image: 'https://via.placeholder.com/600x400?text=Sustainable+Fashion',
+		href: 'history/sustainable-fashion-2025'
+	},
+	{
+		id: 'v1w2x3y4-z5a6b7c8-d9e0f1g2h3i4j5k6l7',
+		slug: 'mental-health-awareness-2025',
+		title: 'Mental Health Awareness in 2025',
+		content: 'As mental health awareness continues to grow, 2025 brings new challenges and opportunities to address psychological well-being. This article focuses on emerging trends in mental health support and public perception.',
+		label: 'Health',
+		author: 'm8n9o0p1-q2r3s4t5-u6v7w8x9y0z1a2b3',
+		published: '2025-01-10',
+		summary: 'Highlighting the importance of mental health awareness in 2025, focusing on new treatments and societal changes.',
+		image: 'https://via.placeholder.com/600x400?text=Mental+Health+2025',
+		href: '/history/mental-health-awareness-2025'
+	}
 ];
 
 const Blog = () => {
-  return (
-    <section className="self-center lg:md:py-24 sm:py-12">
-      <div className="container flex flex-col items-center gap-16 lg:px-16">
-        <div className="text-center">
-		  <h2 className="mb-3 text-pretty text-3xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl">
-			En savoir plus sur ce sport
-          </h2>
-          <p className="mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Elig
-            doloremque mollitia fugiat omnis! Porro facilis quo animi
-            consequatur. Explicabo.
-          </p>
-          <Button variant="link" className="w-full sm:w-auto">
-            Explore all posts
-            <ArrowRight className="ml-2 size-4" />
-          </Button>
-        </div>
-        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
-          {posts.map((post) => (
-            <a
-              key={post.id}
-              href={post.href}
-              className="flex flex-col overflow-clip rounded-xl border border-border"
-            >
-              <div>
-                <img
-                  src={post.image}
-                  alt={post.title}
-                  className="aspect-[16/9] h-full w-full object-cover object-center"
-                />
-              </div>
-              <div className="px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
-                <h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
-                  {post.title}
-                </h3>
-                <p className="mb-3 text-muted-foreground md:mb-4 lg:mb-6">
-                  {post.summary}
-                </p>
-                <p className="flex items-center hover:underline">
-                  Read more
-                  <ArrowRight className="ml-2 size-4" />
-                </p>
-              </div>
-            </a>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
+	return (
+		<section className="self-center lg:md:py-24 sm:py-12">
+			<div className="container flex flex-col items-center gap-16 lg:px-16">
+				<div className="text-center">
+					<h2 className="mb-3 text-pretty text-3xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl">
+						En savoir plus sur ce sport
+					</h2>
+					<p className="mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg">
+						Lorem ipsum dolor sit amet consectetur adipisicing elit. Elig
+						doloremque mollitia fugiat omnis! Porro facilis quo animi
+						consequatur. Explicabo.
+					</p>
+					<Button variant="link" className="w-full sm:w-auto">
+						Explore all posts
+						<ArrowRight className="ml-2 size-4" />
+					</Button>
+				</div>
+				<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
+					{posts.map((post) => (
+						<a
+							key={post.id}
+							href={post.href}
+							className="flex flex-col overflow-clip rounded-xl border border-border"
+						>
+							<div>
+								<img
+									src={post.image}
+									alt={post.title}
+									className="aspect-[16/9] h-full w-full object-cover object-center"
+								/>
+							</div>
+							<div className="px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
+								<h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
+									{post.title}
+								</h3>
+								<p className="mb-3 text-muted-foreground md:mb-4 lg:mb-6">
+									{post.summary}
+								</p>
+								<p className="flex items-center hover:underline">
+									Read more
+									<ArrowRight className="ml-2 size-4" />
+								</p>
+							</div>
+						</a>
+					))}
+				</div>
+			</div>
+		</section>
+	);
 };
 
 export default Blog;
diff --git a/latosa-frontend/components/blogItem.tsx b/latosa-frontend/components/blogItem.tsx
new file mode 100644
index 0000000..e20ff0d
--- /dev/null
+++ b/latosa-frontend/components/blogItem.tsx
@@ -0,0 +1,65 @@
+import { BlogInterface } from "@/components/blog";
+
+export interface BlogItemParams {
+	slug: string
+	title_style: string,
+	subtitle_style: string,
+	p_style: string, 
+	default_img: string
+	blog_content: BlogInterface
+}
+
+export default function BlogItem({ params } 
+	: { params: BlogItemParams }
+) {
+	return (
+		<main className="flex flex-col w-full lg:md:py-24 sm:py-24">
+			<section className="container self-center max-w-2xl">
+				<div className="blog-title w-full h-28 justify-center">
+					<h1 className="mb-3 text-pretty text-3xl font-semibold lg:text-5xl">
+						{params.slug}
+					</h1>
+				</div>
+				<div className="content">
+					<div>
+						<h2 className={params.subtitle_style}>Subtitle 1</h2>
+						<p className={params.p_style}>
+							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias!
+						</p>
+					</div>
+					<div>
+						<img
+							src={params.default_img}
+							alt={params.slug}
+							className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
+						/>
+
+					</div>
+					<div>
+						<h2 className={params.subtitle_style}>Subtitle 2</h2>
+						<p className={params.p_style}>
+							Lorem ipsm dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias!
+						</p>
+					</div>
+					<div>
+						<img
+							src={params.default_img}
+						alt={params.slug}
+							className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
+						/>
+
+					</div>
+					<div>
+						<h2 className={params.subtitle_style}>Subtitle 3</h2>
+						<p className={params.p_style}>
+							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias!
+						</p>
+						<p className={params.p_style}>
+							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias!
+						</p>
+					</div>
+				</div>
+			</section>
+		</main>
+	)
+}
diff --git a/latosa-frontend/components/nav-bar.tsx b/latosa-frontend/components/nav-bar.tsx
index ad287f5..fa91969 100644
--- a/latosa-frontend/components/nav-bar.tsx
+++ b/latosa-frontend/components/nav-bar.tsx
@@ -9,15 +9,7 @@ import {
 	AccordionTrigger,
 } from "@/components/ui/accordion";
 import { Button, buttonVariants } from "@/components/ui/button";
-import {
-	NavigationMenu,
-	NavigationMenuContent,
-	NavigationMenuItem,
-	NavigationMenuLink,
-	NavigationMenuList,
-	NavigationMenuTrigger,
-	navigationMenuTriggerStyle,
-} from "@/components/ui/navigation-menu";
+import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
 import {
 	Sheet,
 	SheetContent,
@@ -103,85 +95,18 @@ const Navbar = () => {
 							>
 								Accueil
 							</Link>
-							<NavigationMenu>
-								<NavigationMenuList>
-									<NavigationMenuItem className="text-muted-foreground">
-										<NavigationMenuTrigger>
-											<span>Products</span>
-										</NavigationMenuTrigger>
-										<NavigationMenuContent>
-											<ul className="w-80 p-3">
-												<NavigationMenuLink>
-													{subMenuItemsOne.map(
-														(item, idx) => (
-															<li key={idx}>
-																<a
-																	className={cn(
-																		"flex select-none gap-4 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-																	)}
-																	href="#"
-																>
-																	{item.icon}
-																	<div>
-																		<div className="text-sm font-semibold">
-																			{
-																				item.title
-																			}
-																		</div>
-																		<p className="text-sm leading-snug text-muted-foreground">
-																			{
-																				item.description
-																			}
-																		</p>
-																	</div>
-																</a>
-															</li>
-														),
-													)}
-												</NavigationMenuLink>
-											</ul>
-										</NavigationMenuContent>
-									</NavigationMenuItem>
-									<NavigationMenuItem className="text-muted-foreground">
-										<NavigationMenuTrigger>
-											Resources
-										</NavigationMenuTrigger>
-										<NavigationMenuContent>
-											<ul className="w-80 p-3">
-												<NavigationMenuLink>
-													{subMenuItemsTwo.map(
-														(item, idx) => (
-															<li key={idx}>
-																<a
-																	className={cn(
-																		"flex select-none gap-4 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-																	)}
-																	href="#"
-																>
-																	{item.icon}
-																	<div>
-																		<div className="text-sm font-semibold">
-																			{
-																				item.title
-																			}
-																		</div>
-																		<p className="text-sm leading-snug text-muted-foreground">
-																			{
-																				item.description
-																			}
-																		</p>
-																	</div>
-																</a>
-															</li>
-														),
-													)}
-												</NavigationMenuLink>
-											</ul>
-										</NavigationMenuContent>
-									</NavigationMenuItem>
-								</NavigationMenuList>
-							</NavigationMenu>
-
+							<a
+								className={cn(
+									"text-muted-foreground",
+									navigationMenuTriggerStyle,
+									buttonVariants({
+										variant: "ghost",
+									}),
+								)}
+								href="/"
+							>
+								Calendar
+							</a>
 							<a
 								className={cn(
 									"text-muted-foreground",
@@ -202,7 +127,7 @@ const Navbar = () => {
 										variant: "ghost",
 									}),
 								)}
-								href="#"
+								href="/history"
 							>
 								Blog
 							</a>