diff --git a/src/app/associations/page.tsx b/src/app/associations/page.tsx
index e0553bb..df87e64 100644
--- a/src/app/associations/page.tsx
+++ b/src/app/associations/page.tsx
@@ -12,6 +12,7 @@ import {
   FiYoutube,
 } from "react-icons/fi"
 import AccordionAssociation from "@/components/accordion-association"
+import { Hero } from "@/components/ui/hero"
 import esnLogo from "../../../public/logos/esn.svg"
 
 const accordionItems = [
@@ -158,19 +159,11 @@ const accordionItems = [
 
 export default function AssociationsPage() {
   return (
-    <main className="w-full">
-      <div className="mx-auto flex min-h-screen max-w-400 flex-col items-center justify-center gap-20 px-4 py-49 md:gap-39">
-        <div className="flex flex-col items-center gap-6">
-          <h2 className="typo-display-large md:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent md:py-14">
-            Associazioni
-          </h2>
-          <p className="typo-title-large md:typo-headline-small max-w-2xl text-center">
-            Scopri le associazioni studentesche del Politecnico
-          </p>
-        </div>
-        <div className="w-full max-w-300">
-          <AccordionAssociation accordionItems={accordionItems} defaultValue="ESN - Erasmus Student Network" />
-        </div>
+    <main className="mx-auto flex min-h-screen w-full max-w-400 flex-col items-center justify-center gap-20 px-4 py-49 md:gap-39">
+      <Hero title="Associazioni" description="Scopri le associazioni studentesche del Politecnico" />
+
+      <div className="w-full max-w-300">
+        <AccordionAssociation accordionItems={accordionItems} defaultValue="ESN - Erasmus Student Network" />
       </div>
     </main>
   )
diff --git a/src/app/guides/page.tsx b/src/app/guides/page.tsx
new file mode 100644
index 0000000..e707b52
--- /dev/null
+++ b/src/app/guides/page.tsx
@@ -0,0 +1,105 @@
+import { FiLogIn } from "react-icons/fi"
+import { CardCaption } from "@/components/card-caption"
+import type { CardResourceProps } from "@/components/card-resource/types"
+import GuideContent from "@/components/guides/content"
+import { GuideContentMobile } from "@/components/guides/content-mobile"
+import { Hero } from "@/components/ui/hero"
+
+const guidesInfo = {
+  title: "Le guide per Ingegneria Informatica",
+  description: "Rimani aggiornato sulle idee appena condivise dagli studenti del Politecnico",
+  guides: [
+    {
+      text: "Corsi a scelta Primo Anno",
+    },
+    {
+      text: "Corsi a scelta Secondo Anno",
+    },
+    {
+      text: "Corsi a scelta Terzo Anno",
+    },
+  ],
+}
+
+const guidesGeneral = {
+  title: "Le guide generali",
+  description: "Consulta le guide generali per orientarti al meglio nella vita universitaria",
+  guides: [
+    {
+      text: "Guida a Webex",
+    },
+    {
+      text: "Guida alla connessione alla rete del Polimi",
+    },
+  ],
+}
+
+const guidesInfoMobile: CardResourceProps[] = [
+  {
+    title: "Chimica Generale",
+    description: "È un esame che tratta tutti argomenti già visti in qualsiasi liceo scientifico...",
+    tag: {
+      text: "Teorico",
+      variant: "primary",
+    },
+    author: "Giulia M.",
+    date: "Ott 24",
+    href: "/guides",
+  },
+  {
+    title: "Chimica",
+    description: "È un esame che tratta tutti argomenti già visti in qualsiasi liceo scientifico...",
+    tag: [
+      {
+        text: "Teorico",
+        variant: "primary",
+      },
+      {
+        text: "2 Anno",
+        variant: "secondary",
+      },
+    ],
+    author: "Giulia M.",
+    date: "Ott 24",
+    href: "/guides",
+  },
+  {
+    title: "Generale",
+    description: "È un esame che tratta tutti argomenti già visti in qualsiasi liceo scientifico...",
+    tag: {
+      text: "Teorico",
+      variant: "primary",
+    },
+    author: "Giulia M.",
+    date: "Ott 24",
+    href: "/guides",
+  },
+]
+
+const guidesMobile = {
+  title: "Trova le guide del tuo corso",
+  caption: "Una raccolta di guide scritte dagli studenti del tuo corso",
+  icon: FiLogIn,
+}
+
+export default function GuidePage() {
+  return (
+    <section className="flex min-h-screen w-full max-w-350 flex-col gap-32 px-12 pt-58 pb-18 sm:gap-48">
+      <Hero title="Guide" description="Una raccolta di guide realizzate dai membri del Network" />
+
+      {/* Desktop */}
+      <div className="hidden w-full flex-col gap-28 sm:flex">
+        <GuideContent {...guidesInfo} />
+
+        <GuideContent {...guidesGeneral} />
+      </div>
+
+      {/* Mobile */}
+      <div className="flex w-full flex-col items-center gap-32 sm:hidden">
+        <CardCaption {...guidesMobile} className="p-6" />
+
+        <GuideContentMobile title="Guide Generali" guides={guidesInfoMobile} />
+      </div>
+    </section>
+  )
+}
diff --git a/src/components/card-resource/index.tsx b/src/components/card-resource/index.tsx
new file mode 100644
index 0000000..8648600
--- /dev/null
+++ b/src/components/card-resource/index.tsx
@@ -0,0 +1,59 @@
+"use client"
+
+import Link from "next/link"
+import { useState } from "react"
+import { FiBookmark } from "react-icons/fi"
+import { Card, CardContent, CardTitle } from "@/components/ui/card"
+import { Pill } from "@/components/ui/pill"
+import { cn } from "@/lib/utils"
+import type { CardResourceProps } from "./types"
+
+export function CardResource({
+  tag,
+  title,
+  description,
+  author,
+  date,
+  bookmarked: initialBookmarked = false,
+  href,
+  className,
+}: CardResourceProps) {
+  const [bookmarked, setBookmarked] = useState(initialBookmarked)
+
+  return (
+    <Card className={cn("h-fit w-full p-6", className)}>
+      <Link href={href} className="flex h-full flex-col">
+        <div className="flex items-center justify-between">
+          <div className="flex gap-2">
+            {(Array.isArray(tag) ? tag : [tag]).map((t) => (
+              <Pill key={t.text} variant={t.variant}>
+                {t.text}
+              </Pill>
+            ))}
+          </div>
+          <button
+            type="button"
+            aria-label={bookmarked ? "Remove bookmark" : "Add bookmark"}
+            onClick={(e) => {
+              e.preventDefault()
+              setBookmarked((b) => !b)
+            }}
+            className={cn(bookmarked ? "text-text-secondary" : "text-text-secondary hover:text-text-primary")}
+          >
+            <FiBookmark className={cn("h-5 w-5", bookmarked && "fill-current")} />
+          </button>
+        </div>
+
+        <div className="mt-5 flex flex-1 flex-col gap-2">
+          <CardTitle className="typo-title-large">{title}</CardTitle>
+          <CardContent className="typo-body-large line-clamp-3 px-0 text-text-primary">{description}</CardContent>
+        </div>
+
+        <div className="typo-body-large mt-12 flex items-center justify-between text-text-secondary">
+          <span>{author}</span>
+          <span>{date}</span>
+        </div>
+      </Link>
+    </Card>
+  )
+}
diff --git a/src/components/card-resource/types.ts b/src/components/card-resource/types.ts
new file mode 100644
index 0000000..07406f9
--- /dev/null
+++ b/src/components/card-resource/types.ts
@@ -0,0 +1,17 @@
+import type { PillVariant } from "@/components/ui/pill"
+
+export type PillTag = {
+  text: string
+  variant: PillVariant
+}
+
+export type CardResourceProps = {
+  tag: PillTag | PillTag[]
+  title: string
+  description: string
+  author: string
+  date: string
+  bookmarked?: boolean
+  href: string
+  className?: string
+}
diff --git a/src/components/card-text.tsx b/src/components/card-text.tsx
new file mode 100644
index 0000000..7b3ce95
--- /dev/null
+++ b/src/components/card-text.tsx
@@ -0,0 +1,11 @@
+import { Card, CardContent } from "./ui/card"
+
+export default function CardText({ text, className }: { text: string; className?: string }) {
+  return (
+    <Card className={`h-fit w-full rounded-3xl border-white/50 p-4 ${className || ""}`}>
+      <CardContent className="typo-headline-small bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text px-0 text-center font-normal text-transparent">
+        {text}
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/src/components/guides/content-mobile.tsx b/src/components/guides/content-mobile.tsx
new file mode 100644
index 0000000..88d49bb
--- /dev/null
+++ b/src/components/guides/content-mobile.tsx
@@ -0,0 +1,14 @@
+import { cn } from "@/lib/utils"
+import { CardResource } from "../card-resource"
+import type { GuideContentMobileProps } from "./types"
+
+export function GuideContentMobile({ title, guides, className }: GuideContentMobileProps) {
+  return (
+    <div className={cn("flex w-full flex-col gap-5 text-start", className)}>
+      <p className="typo-title-large">{title}</p>
+      {guides.map((guide) => (
+        <CardResource key={guide.title} {...guide} />
+      ))}
+    </div>
+  )
+}
diff --git a/src/components/guides/content.tsx b/src/components/guides/content.tsx
new file mode 100644
index 0000000..a157161
--- /dev/null
+++ b/src/components/guides/content.tsx
@@ -0,0 +1,19 @@
+import CardText from "@/components/card-text"
+import { cn } from "@/lib/utils"
+import type { GuideContentProps } from "./types"
+
+export default function GuideContent({ title, description, guides, className }: GuideContentProps) {
+  return (
+    <section className={cn("mx-auto flex w-full max-w-350 flex-col gap-14", className)}>
+      <div className="flex flex-col gap-2 text-start">
+        <h3 className="typo-headline-small sm:typo-display-medium w-fit">{title}</h3>
+        <p className="typo-body-large text-text-primary">{description}</p>
+      </div>
+      <div className="mx-auto flex w-full max-w-5xl flex-col gap-4">
+        {guides.map((guide) => (
+          <CardText key={guide.text} text={guide.text} />
+        ))}
+      </div>
+    </section>
+  )
+}
diff --git a/src/components/guides/types.ts b/src/components/guides/types.ts
new file mode 100644
index 0000000..b43bb57
--- /dev/null
+++ b/src/components/guides/types.ts
@@ -0,0 +1,14 @@
+import type { CardResourceProps } from "../card-resource/types"
+
+export type GuideContentProps = {
+  title: string
+  description: string
+  guides: { text: string }[]
+  className?: string
+}
+
+export type GuideContentMobileProps = {
+  title: string
+  guides: CardResourceProps[]
+  className?: string
+}
diff --git a/src/components/home/carousel-mock.tsx b/src/components/home/carousel-mock.tsx
deleted file mode 100644
index c4f9758..0000000
--- a/src/components/home/carousel-mock.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-"use client"
-
-import { CardCaption } from "@/components/card-caption"
-import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "@/components/ui/carousel"
-
-const mockCards = [
-  {
-    title: "WeBeepSync",
-    caption:
-      "WeBeep Sync è una semplice app, user-friendly e senza compromessi che serve per tenere sincronizzati tutti i tuoi file di WeBeep.",
-  },
-  {
-    title: "PolimiSchedule",
-    caption:
-      "Genera un file iCalendar (.ics) a partire dal formato testuale dell’Orario delle lezioni. Possibilità di importare su Google Calendar.",
-  },
-  {
-    title: "WiFiLinux",
-    caption: "Scarica ed esegui lo script Python per attivare la connessione permanente al WiFi Polimi.",
-  },
-  {
-    title: "The TOL Project",
-    caption: "Un simulatore gratuito del test di ammissione per le aspiranti matricole di Ingegneria del PoliMi.",
-  },
-] as const
-
-// TODO: delete this when merging
-export function CarouselMock() {
-  return (
-    <section className="mx-auto flex min-h-screen w-full max-w-4xl flex-col items-center justify-center gap-16 px-7.5">
-      <h1 className="typo-headline-medium sm:typo-display-large bg-linear-to-r from-text-primary via-blue-secondary to-blue-primary bg-clip-text text-transparent">
-        PoliNetwork
-      </h1>
-
-      <Carousel className="w-full">
-        <CarouselContent>
-          {mockCards.map((card) => (
-            <CarouselItem key={card.title}>
-              <div className="flex justify-center">
-                <CardCaption {...card} />
-              </div>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselDots className="mt-8" />
-      </Carousel>
-    </section>
-  )
-}
diff --git a/src/components/projects/collection.tsx b/src/components/projects/collection.tsx
index 81221e0..81c651d 100644
--- a/src/components/projects/collection.tsx
+++ b/src/components/projects/collection.tsx
@@ -83,7 +83,7 @@ export function Collection() {
       </div>
 
       <div className="hidden flex-col gap-12 sm:flex">
-        <div className="grid grid-cols-2 justify-items-center gap-6 xl:grid-cols-4">
+        <div className="grid 1xl:grid-cols-4 grid-cols-2 justify-items-center gap-6">
           {collectionCards.map((card) => (
             <CardCaption key={card.title} {...card} />
           ))}
diff --git a/src/components/projects/community-news.tsx b/src/components/projects/community-news.tsx
index f5881ff..1aa9e9b 100644
--- a/src/components/projects/community-news.tsx
+++ b/src/components/projects/community-news.tsx
@@ -1,6 +1,7 @@
 import { FiCrop } from "react-icons/fi"
 import { CardCaption } from "../card-caption"
 import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "../ui/carousel"
+import { Hero } from "../ui/hero"
 
 const communityCards = [
   {
@@ -36,14 +37,7 @@ const communityCards = [
 export function CommunityNews() {
   return (
     <section className="mx-auto flex min-h-screen max-w-400 flex-col items-center justify-center gap-48 px-4 py-49">
-      <div className="flex flex-col items-center gap-6">
-        <h2 className="typo-display-large sm:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-transparent sm:py-14">
-          Projects
-        </h2>
-        <p className="typo-title-large sm:typo-headline-small max-w-xl text-center">
-          Esplora e contribuisci ai progetti degli studenti
-        </p>
-      </div>
+      <Hero title="Projects" description=" Esplora e contribuisci ai progetti degli studenti" />
 
       <div className="mx-auto flex w-full flex-col gap-14 sm:w-fit">
         <div className="flex flex-col items-center gap-2 sm:items-start">
diff --git a/src/components/projects/deprecated.tsx b/src/components/projects/deprecated.tsx
index ebff0a9..67a3c07 100644
--- a/src/components/projects/deprecated.tsx
+++ b/src/components/projects/deprecated.tsx
@@ -47,7 +47,7 @@ export function Deprecated() {
         </div>
 
         <div className="hidden flex-col gap-12 sm:flex">
-          <div className="grid grid-cols-2 justify-items-center gap-6 xl:grid-cols-4">
+          <div className="grid 1xl:grid-cols-4 grid-cols-2 justify-items-center gap-6">
             {communityCards.map((card) => (
               <CardCaption key={card.title} {...card} />
             ))}
diff --git a/src/components/ui/hero.tsx b/src/components/ui/hero.tsx
new file mode 100644
index 0000000..d4ebc4b
--- /dev/null
+++ b/src/components/ui/hero.tsx
@@ -0,0 +1,10 @@
+export function Hero({ title, description }: { title: string; description: string }) {
+  return (
+    <div className="flex flex-col items-center gap-6">
+      <h2 className="typo-display-large sm:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-transparent sm:py-14">
+        {title}
+      </h2>
+      <p className="typo-title-large sm:typo-headline-small max-w-2xl text-center">{description}</p>
+    </div>
+  )
+}
diff --git a/src/components/ui/pill.tsx b/src/components/ui/pill.tsx
new file mode 100644
index 0000000..9c59873
--- /dev/null
+++ b/src/components/ui/pill.tsx
@@ -0,0 +1,31 @@
+import { cn } from "@/lib/utils"
+
+export type PillVariant = "primary" | "secondary" | "tertiary"
+
+const variantClasses: Record<PillVariant, string> = {
+  primary: "bg-blue-tertiary text-text-accent-lightbg",
+  secondary: "bg-blue-secondary text-text-accent-darkbg",
+  tertiary: "bg-blue-primary text-primary",
+}
+
+export function Pill({
+  children,
+  variant = "tertiary",
+  className,
+}: {
+  children: React.ReactNode
+  variant?: PillVariant
+  className?: string
+}) {
+  return (
+    <span
+      className={cn(
+        "typo-body-small inline-flex items-center rounded-buttonsM px-3 py-1",
+        variantClasses[variant],
+        className
+      )}
+    >
+      {children}
+    </span>
+  )
+}