diff --git a/app/src/app/page.tsx b/app/src/app/page.tsx
index c37e918..00fbc98 100644
--- a/app/src/app/page.tsx
+++ b/app/src/app/page.tsx
@@ -1,4 +1,5 @@
 import EventsGrid from "@/components/EventsGrid";
+import NewsGrid from "@/components/NewsGrid";
 import SVGMask from "@/components/SVG";
 import background from "assets/background.svg";
 import clicLogo from "assets/clic_logo.svg";
@@ -19,7 +20,7 @@ function Networks() {
   }
 
   return (
-    <div className="flex p-4 mt-6 gap-6">
+    <div className="flex p-4 mt-6 mb-10 gap-6">
       <Network href="https://github.com/clicepfl" svg={githubLogo} />
       <Network href="https://www.instagram.com/clicepfl/" svg={instagramLogo} />
       <Network href="https://t.me/clicnews" svg={telegramLogo} />
@@ -47,6 +48,7 @@ export default function Home() {
       />
       <Networks />
       <EventsGrid />
+      <NewsGrid />
     </div>
   );
 }
diff --git a/app/src/components/EventsGrid.tsx b/app/src/components/EventsGrid.tsx
index ca3eb63..3482c57 100644
--- a/app/src/components/EventsGrid.tsx
+++ b/app/src/components/EventsGrid.tsx
@@ -8,13 +8,10 @@ export default async function EventsGrid() {
     "events",
     {
       fields: ["event_date"],
+      pagination: { start: 0, limit: 3 },
+      sort: "event_date:desc",
     }
   );
-  events.data.sort(
-    (a, b) =>
-      new Date(a.attributes.event_date as string).getTime() -
-      new Date(b.attributes.event_date as string).getTime()
-  );
 
   return (
     <div className="p-10 flex flex-col items-center">
diff --git a/app/src/components/NewsCard.tsx b/app/src/components/NewsCard.tsx
new file mode 100644
index 0000000..6677f62
--- /dev/null
+++ b/app/src/components/NewsCard.tsx
@@ -0,0 +1,28 @@
+import PageCard from "./PageCard";
+import strapi from "@/strapi";
+import { ApiNewsNews } from "@/types/generated/contentTypes";
+
+export default async function NewsCard({
+  id,
+  vertical,
+}: {
+  id: number;
+  vertical?: boolean;
+}) {
+  const event = await strapi.findOne<ApiNewsNews>("newss", id, {
+    populate: "picture",
+  });
+
+  return (
+    <>
+      <PageCard
+        imageUrl={event.data.attributes.picture.data?.attributes?.url}
+        title={event.data.attributes.news_title}
+        text={event.data.attributes.small_description}
+        vertical={vertical}
+        date={event.data.attributes.createdAt}
+        url={`/news/${id}`}
+      />
+    </>
+  );
+}
diff --git a/app/src/components/NewsGrid.tsx b/app/src/components/NewsGrid.tsx
new file mode 100644
index 0000000..0344fa3
--- /dev/null
+++ b/app/src/components/NewsGrid.tsx
@@ -0,0 +1,33 @@
+import NewsCard from "./NewsCard";
+import Title from "./Title";
+import strapi from "@/strapi";
+import { ApiNewsNews } from "@/types/generated/contentTypes";
+
+export default async function EventsGrid() {
+  const events = await strapi.find<(ApiNewsNews & { id: number })[]>("newss", {
+    fields: ["publication"],
+    pagination: { start: 0, limit: 3 },
+    sort: ["publication:desc"],
+  });
+  events.data.sort(
+    (a, b) =>
+      new Date(a.attributes.createdAt as string).getTime() -
+      new Date(b.attributes.createdAt as string).getTime()
+  );
+
+  return (
+    <div className="p-10 flex flex-col items-center">
+      <Title
+        text="News"
+        textSize="text-5xl font-bold"
+        lineSize="w-24 h-1"
+        dark={false}
+      />
+      <div className="grid grid-cols-3 mt-6 gap-10">
+        {events.data.map((e) => (
+          <NewsCard id={e.id} vertical />
+        ))}
+      </div>
+    </div>
+  );
+}