diff --git a/latosa-frontend/app/history/[slug]/page.tsx b/latosa-frontend/app/history/[slug]/page.tsx
new file mode 100644
index 0000000..d37d138
--- /dev/null
+++ b/latosa-frontend/app/history/[slug]/page.tsx
@@ -0,0 +1,63 @@
+"use server"
+
+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>
+	)
+}
diff --git a/latosa-frontend/app/history/page.tsx b/latosa-frontend/app/history/page.tsx
new file mode 100644
index 0000000..893b516
--- /dev/null
+++ b/latosa-frontend/app/history/page.tsx
@@ -0,0 +1,9 @@
+import Blog from "@/components/blog";
+
+export default function History() {
+	return(
+		<div className="flex flex-col">
+			<Blog />			
+		</div>
+	)
+}
diff --git a/latosa-frontend/components/blog.tsx b/latosa-frontend/components/blog.tsx
new file mode 100644
index 0000000..19acb74
--- /dev/null
+++ b/latosa-frontend/components/blog.tsx
@@ -0,0 +1,93 @@
+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",
+  },
+];
+
+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>
+  );
+};
+
+export default Blog;
diff --git a/latosa-frontend/components/testimonial.tsx b/latosa-frontend/components/testimonial.tsx
index 33f3d63..0f37703 100644
--- a/latosa-frontend/components/testimonial.tsx
+++ b/latosa-frontend/components/testimonial.tsx
@@ -56,7 +56,7 @@ const Testimonial = () => {
 	}, [api]);
 
 	return (
-		<section className="py-32">
+		<section className="lg:md:py-24 sm:py-12">
 			<Carousel setApi={setApi}>
 				<CarouselContent>
 					{testimonials.map((testimonial) => (