diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 6c8380ea..34afdc94 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from "next"
 import Link from "next/link"
 import { FiArrowUpRight } from "react-icons/fi"
 import { ClosingCta } from "@/components/layout/closing-cta"
-import { CONTAINER, PAGE_HERO, PAGE_MAIN, SECTION_TITLE } from "@/components/layout/page"
+import { CONTAINER, PAGE_HERO, PAGE_MAIN, SECTION_STACK, SECTION_TITLE } from "@/components/layout/page"
 import { AssociationBodies } from "@/components/structure/association-bodies"
 import { BoardGallery } from "@/components/structure/board-gallery"
 import { LegalStatus } from "@/components/structure/legal-status"
@@ -17,7 +17,6 @@ export const metadata: Metadata = {
     "Un’organizzazione pensata per durare: scopri l’organigramma, il Direttivo, gli organi associativi e i ruoli di PoliNetwork APS.",
 }
 
-const containerClass = `${CONTAINER} flex flex-col gap-10 md:gap-14`
 const titleClass = `${SECTION_TITLE} text-center`
 
 export default function StructurePage() {
@@ -27,7 +26,7 @@ export default function StructurePage() {
         <Hero title="Struttura" description="Un’organizzazione pensata per durare" />
       </section>
       <OrganizationChart />
-      <section aria-labelledby="direttivo-title" className={containerClass}>
+      <section aria-labelledby="direttivo-title" className={SECTION_STACK}>
         <h2 id="direttivo-title" className={titleClass}>
           Il Direttivo in carica
         </h2>
@@ -38,13 +37,13 @@ export default function StructurePage() {
           </p>
         </div>
       </section>
-      <section aria-labelledby="associazione-title" className={containerClass}>
+      <section aria-labelledby="associazione-title" className={SECTION_STACK}>
         <h2 id="associazione-title" className={titleClass}>
           Come funziona l’associazione
         </h2>
         <AssociationBodies />
       </section>
-      <section aria-labelledby="partecipa-title" className={containerClass}>
+      <section aria-labelledby="partecipa-title" className={SECTION_STACK}>
         <h2 id="partecipa-title" className={titleClass}>
           Trova il tuo posto in PoliNetwork
         </h2>
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 256adc98..c1a8d014 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next"
 import { CollaboraSection } from "@/components/contact/collabora-section"
 import { EmailSection } from "@/components/contact/email-section"
 import { GroupsSection } from "@/components/contact/groups-section"
+import { CONTAINER, PAGE_HERO, PAGE_MAIN } from "@/components/layout/page"
 import { Hero } from "@/components/ui/hero"
 
 export const metadata: Metadata = {
@@ -11,12 +12,14 @@ export const metadata: Metadata = {
 
 export default function Contact() {
   return (
-    <main className="mx-auto flex min-h-screen w-full flex-col items-center justify-center gap-60 px-4 py-49 md:gap-75">
-      <Hero
-        title="Contattaci"
-        description="Qualunque sia la tua domanda, PoliNetwork è a disposizione."
-        gradientDescription
-      />
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO}`}>
+        <Hero
+          title="Contattaci"
+          description="Qualunque sia la tua domanda, PoliNetwork è a disposizione."
+          gradientDescription
+        />
+      </section>
       <GroupsSection />
       <CollaboraSection />
       <EmailSection />
diff --git a/src/app/groups/page.tsx b/src/app/groups/page.tsx
index 1b6a4e18..b395c918 100644
--- a/src/app/groups/page.tsx
+++ b/src/app/groups/page.tsx
@@ -30,9 +30,9 @@ export default function Home() {
     <main className="w-full">
       <div className="flex min-h-svh flex-col items-center gap-16 px-6 py-64 md:gap-20 md:py-49">
         <div className="flex w-full flex-col items-center gap-5 text-center">
-          <h2 className="typo-display-large md:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-transparent md:py-14">
+          <h1 className="typo-display-fluid-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-transparent md:py-10">
             Groups
-          </h2>
+          </h1>
           <GroupSearch />
         </div>
 
@@ -46,6 +46,7 @@ export default function Home() {
               icon={group.icon}
               cta={group.cta}
               align="start"
+              hoverEffect
               className="w-full max-w-108"
               size="compact"
             />
diff --git a/src/app/projects/[id]/page.tsx b/src/app/projects/[id]/page.tsx
index 8d1c623e..a721908d 100644
--- a/src/app/projects/[id]/page.tsx
+++ b/src/app/projects/[id]/page.tsx
@@ -2,10 +2,11 @@ import type { Metadata } from "next"
 import Image from "next/image"
 import Link from "next/link"
 import { notFound } from "next/navigation"
-import { FiArrowLeft, FiArrowUpRight, FiUploadCloud } from "react-icons/fi"
+import { FiArrowLeft, FiArrowUpRight } from "react-icons/fi"
 import { Glass } from "@/components/glass"
 import { GradientIcon } from "@/components/gradient-icon"
-import { SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
+import { ClosingCta } from "@/components/layout/closing-cta"
+import { CONTAINER, PAGE_HERO, PAGE_MAIN, SECTION_LEAD, SECTION_STACK, SECTION_TITLE } from "@/components/layout/page"
 import { getProjectResources, resourceDetails } from "@/components/projects/resources"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardTitle } from "@/components/ui/card"
@@ -39,16 +40,21 @@ export default async function ProjectPage({ params }: Props) {
   const resources = getProjectResources(project)
 
   return (
-    <main className="flex w-full flex-col gap-24 pb-24 md:gap-36 md:pb-36">
-      <section className="mx-auto flex w-full max-w-330 flex-col gap-6 px-6 pt-52 md:pt-57.5">
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO} flex flex-col gap-6`}>
         <Link
           href="/projects"
-          className="typo-body-medium flex w-fit items-center gap-2 text-blue-secondary underline-offset-4 hover:underline focus-visible:underline"
+          className="typo-body-medium flex w-fit items-center gap-2 rounded-sm text-blue-secondary underline-offset-4 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-blue-secondary"
         >
           <FiArrowLeft aria-hidden className="size-4 shrink-0" /> Tutti i progetti
         </Link>
-        <Glass className="grid items-center gap-8 rounded-rectangles border-white/50 bg-linear-to-br from-background-blur to-blue-tertiary/30 p-6 text-center sm:p-12 md:grid-cols-[auto_minmax(0,1fr)] md:gap-12 md:text-start">
-          {project.logo ? (
+        <Glass
+          className={cn(
+            "grid items-center gap-8 rounded-rectangles border-white/50 bg-background-blur p-6 text-center sm:p-12 md:gap-12 md:text-start",
+            project.logo && "md:grid-cols-[auto_minmax(0,1fr)]"
+          )}
+        >
+          {project.logo && (
             // Project logos are app icons with their own background and corners: shown as they are, not framed
             <Image
               src={project.logo}
@@ -58,10 +64,6 @@ export default async function ProjectPage({ params }: Props) {
               sizes="(min-width: 768px) 160px, 112px"
               className="mx-auto size-28 object-contain md:size-40"
             />
-          ) : (
-            <Glass className="mx-auto flex size-28 items-center justify-center rounded-rectangles border-white/50 bg-background-blur p-0 shadow-sm md:size-40">
-              <GradientIcon icon={FiUploadCloud} className="size-12 md:size-16" />
-            </Glass>
           )}
           <div className="flex min-w-0 flex-col gap-4">
             {project.category in categoryLabels && (
@@ -74,10 +76,7 @@ export default async function ProjectPage({ params }: Props) {
       </section>
 
       {resources.length > 0 && (
-        <section
-          aria-labelledby="risorse-title"
-          className="mx-auto flex w-full max-w-330 flex-col gap-10 px-6 md:gap-14"
-        >
+        <section aria-labelledby="risorse-title" className={SECTION_STACK}>
           <div className="flex flex-col gap-4 text-center md:text-start">
             <h2 id="risorse-title" className={SECTION_TITLE}>
               Come usarlo
@@ -135,19 +134,17 @@ export default async function ProjectPage({ params }: Props) {
         </section>
       )}
 
-      <section className="mx-auto w-full max-w-330 px-6">
-        <Glass className="flex flex-col items-center gap-6 rounded-rectangles border-white/50 bg-linear-to-br from-background-blur to-blue-tertiary/30 p-6 text-center sm:p-12">
-          <h2 className={SECTION_TITLE}>Scopri gli altri progetti</h2>
-          <p className={cn(SECTION_LEAD, "max-w-200 text-balance")}>
-            Strumenti e app realizzati dagli studenti del Politecnico, per gli studenti del Politecnico.
-          </p>
+      <ClosingCta
+        title="Scopri gli altri progetti"
+        lead="Strumenti e app realizzati dagli studenti del Politecnico, per gli studenti del Politecnico."
+        action={
           <Button asChild size="lg" className="w-full sm:w-fit">
             <Link href="/projects">
               Tutti i progetti <FiArrowUpRight aria-hidden />
             </Link>
           </Button>
-        </Glass>
-      </section>
+        }
+      />
     </main>
   )
 }
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index fbfb0d74..25e85bd6 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -1,7 +1,9 @@
+import { CONTAINER, PAGE_HERO, PAGE_MAIN } from "@/components/layout/page"
 import { Collection } from "@/components/projects/collection"
 import { CommunityNews } from "@/components/projects/community-news"
 import { Deprecated } from "@/components/projects/deprecated"
 import { Upload } from "@/components/projects/upload"
+import { Hero } from "@/components/ui/hero"
 import { getAllProjects } from "@/queries/projects"
 
 export const metadata = {
@@ -11,7 +13,7 @@ export const metadata = {
 
 export const dynamic = "force-dynamic"
 
-export default async function Home() {
+export default async function ProjectsPage() {
   const projects = await getAllProjects()
 
   const news = projects.filter((project) => project.category === "news")
@@ -19,9 +21,12 @@ export default async function Home() {
   const deprecated = projects.filter((project) => project.category === "deprecated")
 
   return (
-    <main className="w-full">
+    <main className={PAGE_MAIN}>
+      <section className={`${CONTAINER} ${PAGE_HERO}`}>
+        <Hero title="Projects" description="Esplora e contribuisci ai progetti degli studenti" />
+      </section>
       <CommunityNews projects={news} />
-      <Collection projects={general} />
+      <Collection projects={general} searchable={projects} />
       <Upload />
       <Deprecated projects={deprecated} />
     </main>
diff --git a/src/components/card-caption.tsx b/src/components/card-caption.tsx
index 43fe8e3b..70468f5c 100644
--- a/src/components/card-caption.tsx
+++ b/src/components/card-caption.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image"
 import Link from "next/link"
 import type { ReactNode } from "react"
 import type { IconType } from "react-icons"
@@ -9,18 +10,25 @@ export function CardCaption({
   caption,
   icon,
   iconPosition = "right",
+  image,
   href,
   footer,
   className,
+  titleClassName,
+  captionClassName,
 }: {
   title: string
   caption: ReactNode
   icon?: IconType
   iconPosition?: "top" | "right"
+  /** An image shown in place of the icon, e.g. a project's logo. */
+  image?: string
   href?: string
   /** Pinned to the bottom of the card, e.g. where a link leads to. */
   footer?: ReactNode
   className?: string
+  titleClassName?: string
+  captionClassName?: string
 }) {
   return (
     // Only cards that lead somewhere react to hover
@@ -32,10 +40,19 @@ export function CardCaption({
       <CardHeader
         className={`typo-headline-medium relative flex ${iconPosition === "right" ? "justify-between" : "flex-col-reverse"}`}
       >
-        <CardTitle className="typo-headline-medium">{title}</CardTitle>
-        {icon && <CardAction icon={icon} iconSize={iconPosition === "right" ? "md" : "lg"}></CardAction>}
+        <CardTitle gradient={false} className={cn("typo-headline-medium", titleClassName)}>
+          {/* Gradient per line (box-decoration-clone): a two-line title doesn't fade into a paler second line */}
+          <span className="bg-linear-to-b from-blue-secondary to-blue-primary box-decoration-clone bg-clip-text text-transparent">
+            {title}
+          </span>
+        </CardTitle>
+        {image ? (
+          <Image src={image} alt="" width={40} height={40} className="size-10 shrink-0 object-contain" />
+        ) : (
+          icon && <CardAction icon={icon} iconSize={iconPosition === "right" ? "md" : "lg"}></CardAction>
+        )}
       </CardHeader>
-      <CardContent className="typo-body-medium relative">
+      <CardContent className={cn("typo-body-medium relative", captionClassName)}>
         {typeof caption === "string" ? <p>{caption}</p> : caption}
       </CardContent>
       {footer && <div className="relative mt-auto">{footer}</div>}
diff --git a/src/components/card-course-group.tsx b/src/components/card-course-group.tsx
index bfd21a3a..558a8de3 100644
--- a/src/components/card-course-group.tsx
+++ b/src/components/card-course-group.tsx
@@ -10,7 +10,7 @@ import { cn } from "@/lib/utils"
 import { Card, CardAction, CardTitle } from "./ui/card"
 
 export const cardCourseGroupVariants = cva(
-  "flex h-fit w-full min-w-0 flex-1 flex-row items-center gap-3 px-5 py-4 font-normal leading-6 tracking-[0.03125rem] sm:gap-5 sm:px-7.5 sm:py-6.25",
+  "@container h-auto w-full min-w-0 px-4 py-3 font-normal leading-6 tracking-[0.03125rem] sm:px-6 sm:py-4",
   {
     variants: {
       secondary: {
@@ -33,7 +33,6 @@ export function CardCourseGroup({
   tgGroupId,
   iconTelegram: IconTelegram = LiaTelegramPlane,
   secondary = false,
-  stacked = false,
 }: {
   groupName: string
   waLink?: string
@@ -42,38 +41,42 @@ export function CardCourseGroup({
   tgLink?: string
   tgGroupId?: number
   iconTelegram?: IconType
-  stacked?: boolean
 } & VariantProps<typeof cardCourseGroupVariants>) {
-  const actionClassName = cn("rounded-full p-2 sm:p-3.75", secondary ? "bg-[#51A2FF]" : "bg-[#74D4FF]")
+  // The platform buttons are the only links in the row, so they carry the hover state, not the card
+  const actionClassName = cn(
+    "rounded-full p-2 transition-[filter] group-hover/action:brightness-90 sm:p-3",
+    secondary ? "bg-[#51A2FF]" : "bg-[#74D4FF]"
+  )
   return (
-    <Card
-      className={cn(
-        cardCourseGroupVariants({ secondary }),
-        stacked && "h-auto flex-col items-start md:h-fit md:flex-row md:items-center"
-      )}
-    >
-      <CardTitle gradient={false} className="typo-body-medium md:typo-headline-small min-w-0 grow">
-        {groupName}
-      </CardTitle>
-      <div className={cn("flex items-center gap-1.5", stacked ? "md:contents" : "contents")}>
-        <PlatformAction
-          platform="wa"
-          platformLabel="WhatsApp"
-          link={waLink}
-          groupId={waGroupId}
-          icon={IconWhatsApp}
-          groupName={groupName}
-          actionClassName={actionClassName}
-        />
-        <PlatformAction
-          platform="tg"
-          platformLabel="Telegram"
-          link={tgLink}
-          groupId={tgGroupId}
-          icon={IconTelegram}
-          groupName={groupName}
-          actionClassName={actionClassName}
-        />
+    <Card className={cardCourseGroupVariants({ secondary })}>
+      {/* In a card narrower than 20rem the name gets its own line, so it doesn't wrap word by word */}
+      <div className="flex min-w-0 @max-xs:flex-col @max-xs:items-start items-center gap-3 sm:gap-5">
+        <CardTitle
+          gradient={false}
+          className="typo-body-large sm:typo-headline-small wrap-break-word min-w-0 grow text-balance"
+        >
+          {groupName}
+        </CardTitle>
+        <div className="flex shrink-0 items-center gap-1.5">
+          <PlatformAction
+            platform="wa"
+            platformLabel="WhatsApp"
+            link={waLink}
+            groupId={waGroupId}
+            icon={IconWhatsApp}
+            groupName={groupName}
+            actionClassName={actionClassName}
+          />
+          <PlatformAction
+            platform="tg"
+            platformLabel="Telegram"
+            link={tgLink}
+            groupId={tgGroupId}
+            icon={IconTelegram}
+            groupName={groupName}
+            actionClassName={actionClassName}
+          />
+        </div>
       </div>
     </Card>
   )
@@ -100,7 +103,13 @@ function PlatformAction({
 
   return (
     <>
-      <a href={link} target="_blank" rel="noopener noreferrer" aria-label={`${groupName} su ${platformLabel}`}>
+      <a
+        href={link}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label={`${groupName} su ${platformLabel}`}
+        className="group/action rounded-full outline-none focus-visible:ring-2 focus-visible:ring-blue-secondary"
+      >
         <CardAction gradient={false} className={actionClassName} icon={icon} iconSize="sm" />
       </a>
       {groupId !== undefined && (
@@ -108,8 +117,12 @@ function PlatformAction({
           selectedReport={{ groupId, type: platform, reportType: "broken_link", reportedLink: link }}
           selectedGroupName={groupName}
           trigger={
-            <button type="button" aria-label={`Segnala il link ${platformLabel} di ${groupName} come non funzionante`}>
-              <CardAction gradient={false} className="p-2 text-text-secondary sm:p-3.75" icon={FiFlag} iconSize="xs" />
+            <button
+              type="button"
+              aria-label={`Segnala il link ${platformLabel} di ${groupName} come non funzionante`}
+              className="rounded-full text-text-secondary outline-none transition-colors hover:text-text-primary focus-visible:ring-2 focus-visible:ring-blue-secondary"
+            >
+              <CardAction gradient={false} className="p-2 text-current sm:p-3" icon={FiFlag} iconSize="xs" />
             </button>
           }
         />
diff --git a/src/components/card-course.tsx b/src/components/card-course.tsx
index 25fa7766..6e562432 100644
--- a/src/components/card-course.tsx
+++ b/src/components/card-course.tsx
@@ -18,7 +18,8 @@ export function CardCourse({
   iconSelect?: IconType
 }) {
   return (
-    <Card className="typo-body-large flex h-fit w-full flex-row items-center gap-2 px-5 py-3.75 font-normal leading-6 tracking-[0.03125rem] sm:gap-0">
+    // Always rendered inside a link or button: the row itself is the hover target
+    <Card className="typo-body-large flex h-fit w-full flex-row items-center gap-2 px-5 py-3.75 font-normal leading-6 tracking-[0.03125rem] transition-colors hover:bg-white/70 sm:gap-0">
       <div className="flex min-w-0 flex-1 flex-col gap-1 sm:contents">
         <CardContent className="min-w-0 truncate sm:flex-1">{courseName}</CardContent>
         {(location || language) && (
@@ -37,7 +38,10 @@ export function CardCourse({
         )}
       </div>
       <CardContent className="flex shrink-0 items-center">
-        <IconSelect className="h-4 w-4 text-text-primary" strokeWidth={2} />
+        <IconSelect
+          className="h-4 w-4 text-text-primary transition-transform group-hover/card:translate-x-0.5"
+          strokeWidth={2}
+        />
       </CardContent>
     </Card>
   )
diff --git a/src/components/contact-card.tsx b/src/components/contact-card.tsx
index 742a8160..716db936 100644
--- a/src/components/contact-card.tsx
+++ b/src/components/contact-card.tsx
@@ -9,12 +9,12 @@ export type ContactCardData = {
 
 export function ContactCard({ title, description, email }: ContactCardData) {
   return (
-    <Card className="h-66 w-full max-w-78 gap-6 justify-self-center p-6">
+    <Card className="h-auto w-full gap-4 p-6">
       <CardHeader>
-        <CardTitle className="typo-headline-small">{title}</CardTitle>
+        <CardTitle className="typo-headline-small xl:typo-headline-extrasmall">{title}</CardTitle>
       </CardHeader>
       <CardContent className="typo-body-medium flex-1">{description}</CardContent>
-      <CardBottomButton variant="tertiary" asChild className="mt-auto">
+      <CardBottomButton variant="tertiary" asChild className="mt-auto max-w-full">
         <a href={`mailto:${email}`}>{email}</a>
       </CardBottomButton>
     </Card>
diff --git a/src/components/contact/collabora-section.tsx b/src/components/contact/collabora-section.tsx
index e035b39e..12dd95c3 100644
--- a/src/components/contact/collabora-section.tsx
+++ b/src/components/contact/collabora-section.tsx
@@ -1,27 +1,24 @@
 import Link from "next/link"
 import { FiArrowUpRight } from "react-icons/fi"
+import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
 import { Button } from "@/components/ui/button"
 
 export function CollaboraSection() {
   return (
-    <section className="flex w-full flex-row justify-center gap-8 px-6 min-[1616px]:justify-start min-[1616px]:px-36">
-      <div className="flex max-w-[959] flex-col gap-6">
-        <h2 className="typo-headline-medium md:typo-display-medium text-center min-[1616px]:text-start">
-          Vuoi sviluppare un progetto insieme a noi?
-        </h2>
+    <section className={CONTAINER}>
+      <div className="mx-auto flex max-w-3xl flex-col items-center gap-6 text-center">
+        <h2 className={SECTION_TITLE}>Vuoi sviluppare un progetto insieme a noi?</h2>
 
-        <div className="flex min-w-0 flex-col gap-3 text-center md:text-start">
-          <p className="typo-body-large md:typo-headline-small text-center min-[1616px]:text-start">
+        <div className={`${SECTION_LEAD} flex flex-col gap-3`}>
+          <p>
             Siamo sempre felici di{" "}
-            <span className="text-blue-primary">collaborare con aziende o associazioni studentesche</span> per portare
+            <span className="text-blue-secondary">collaborare con aziende o associazioni studentesche</span> per portare
             agli studenti del PoliMi eventi e attività di valore.
           </p>
-          <p className="typo-body-large md:typo-headline-small text-center min-[1616px]:text-start">
-            Consulta la pagina dedicata per scoprire come possiamo unire le forze!
-          </p>
+          <p>Consulta la pagina dedicata per scoprire come possiamo unire le forze!</p>
         </div>
 
-        <Button variant="primary" size="lg" className="w-fit gap-2 self-center min-[1616px]:self-start" asChild>
+        <Button variant="primary" size="lg" className="mt-2" asChild>
           <Link href="/collabora">
             Collabora con noi
             <FiArrowUpRight />
diff --git a/src/components/contact/email-section.tsx b/src/components/contact/email-section.tsx
index dfa71c18..2e67be97 100644
--- a/src/components/contact/email-section.tsx
+++ b/src/components/contact/email-section.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link"
 import { ContactCard, type ContactCardData } from "../contact-card"
+import { CONTAINER, INLINE_LINK, SECTION_LEAD, SECTION_TITLE } from "../layout/page"
 
 const contactCards: ContactCardData[] = [
   {
@@ -18,8 +19,8 @@ const contactCards: ContactCardData[] = [
       <>
         Se vuoi candidarti come admin o come membro di un team, ti consigliamo di passare dal form disponibile nella
         pagina{" "}
-        <Link href="/join" className="text-blue-secondary underline underline-offset-2">
-          Struttura
+        <Link href="/join" className={INLINE_LINK}>
+          Unisciti a noi
         </Link>
         .
       </>
@@ -31,7 +32,7 @@ const contactCards: ContactCardData[] = [
     description: (
       <>
         Se sei un&apos;azienda o associazione e vuoi proporre una collaborazione, puoi anche consultare la pagina{" "}
-        <Link href="/collabora" className="text-blue-secondary underline underline-offset-2">
+        <Link href="/collabora" className={INLINE_LINK}>
           Collabora con Noi
         </Link>{" "}
         per capire cosa offriamo.
@@ -43,13 +44,11 @@ const contactCards: ContactCardData[] = [
 
 export function EmailSection() {
   return (
-    <section className="flex w-full flex-col gap-6 px-6 min-[1616px]:px-36">
-      <h2 className="typo-headline-medium md:typo-display-medium bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-center text-transparent min-[1616px]:text-start">
-        Hai una richiesta specifica?
-      </h2>
-      <p className="typo-body-large md:typo-headline-small pb-6 text-center text-text-primary min-[1616px]:text-start">
+    <section className={`${CONTAINER} flex flex-col gap-6`}>
+      <h2 className={SECTION_TITLE}>Hai una richiesta specifica?</h2>
+      <p className={SECTION_LEAD}>
         Per tutto il resto,{" "}
-        <a href="mailto:info@polinetwork.org" className="text-blue-secondary hover:underline focus-visible:underline">
+        <a href="mailto:info@polinetwork.org" className={INLINE_LINK}>
           puoi scriverci direttamente
         </a>
         .
@@ -57,7 +56,8 @@ export function EmailSection() {
         Qui sotto trovi i contatti in base al tipo di richiesta.
       </p>
 
-      <div className="flex w-full flex-wrap justify-center gap-12 xl:gap-16 min-[1616px]:justify-start">
+      {/* 2×2 between one and four columns, so no card is left alone on a row */}
+      <div className="mt-4 grid gap-4 sm:grid-cols-2 sm:gap-6 xl:grid-cols-4">
         {contactCards.map((card) => (
           <ContactCard key={card.email} {...card} />
         ))}
diff --git a/src/components/contact/groups-section.tsx b/src/components/contact/groups-section.tsx
index 37440fcd..f8cf963a 100644
--- a/src/components/contact/groups-section.tsx
+++ b/src/components/contact/groups-section.tsx
@@ -1,40 +1,44 @@
 import Image from "next/image"
 import Link from "next/link"
 import { FiArrowUpRight } from "react-icons/fi"
+import { CONTAINER, INLINE_LINK, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
 import { Button } from "@/components/ui/button"
 
 export function GroupsSection() {
   return (
-    <section className="flex w-full flex-col items-center gap-21 px-6 min-[1616px]:flex-row min-[1616px]:items-end min-[1616px]:px-36">
-      <div className="flex flex-col gap-6 text-center min-[1616px]:min-w-158 min-[1616px]:flex-1 min-[1616px]:text-start">
-        <h2 className="typo-headline-medium md:typo-display-medium text-center min-[1616px]:text-start">
+    <section className={`${CONTAINER} grid items-center gap-10 xl:grid-cols-2 xl:gap-16`}>
+      <div className="flex flex-col items-center gap-6 text-center xl:items-start xl:text-start">
+        <h2 className={SECTION_TITLE}>
           Hai mille dubbi sul Poli?
           <br />
           Siamo pronti ad aiutarti!
         </h2>
 
-        <p className="typo-body-large md:typo-headline-small pb-6 text-center min-[1616px]:text-start">
+        <p className={`${SECTION_LEAD} max-w-2xl`}>
           Il modo più rapido per ottenere risposte su esami, burocrazia universitaria o sulla vita al Politecnico è{" "}
-          <Link href="/groups" className="text-blue-secondary hover:underline focus-visible:underline">
+          <Link href="/groups" className={INLINE_LINK}>
             entrare nel gruppo del tuo corso
           </Link>
           , su Telegram o su WhatsApp, dove gli admin sono presenti ogni giorno.
         </p>
-        <Button variant="primary" size="lg" className="w-fit gap-2 self-center min-[1616px]:self-start">
-          Trova il tuo gruppo
-          <FiArrowUpRight />
+
+        <Button variant="primary" size="lg" className="mt-2" asChild>
+          <Link href="/groups">
+            Trova il tuo gruppo
+            <FiArrowUpRight />
+          </Link>
         </Button>
       </div>
 
-      <div className="flex w-full items-center justify-center min-[1616px]:w-auto min-[1616px]:flex-1">
-        <Image
-          src="/contact-group.png"
-          alt="Foto di gruppo della community PoliNetwork"
-          width={721}
-          height={342}
-          className="h-auto w-full max-w-180.25 rounded-rectangles object-cover min-[1616px]:min-w-180.25"
-        />
-      </div>
+      <Image
+        src="/contact-group.png"
+        alt="Foto di gruppo della community PoliNetwork"
+        width={512}
+        height={246}
+        sizes="(min-width: 80rem) 600px, (min-width: 42rem) 672px, 100vw"
+        // The source is only 512px wide: capped at 672px so it never stretches past ~1.3x
+        className="mx-auto h-auto w-full max-w-2xl rounded-rectangles xl:max-w-none"
+      />
     </section>
   )
 }
diff --git a/src/components/groups/extra-groups.tsx b/src/components/groups/extra-groups.tsx
index 6140f2f2..f0b25c96 100644
--- a/src/components/groups/extra-groups.tsx
+++ b/src/components/groups/extra-groups.tsx
@@ -1,6 +1,5 @@
-import Link from "next/link"
-import { FiArrowLeft } from "react-icons/fi"
 import { CardCourseGroup } from "@/components/card-course-group"
+import { GROUPS_COLUMN, GroupsPageHeader } from "@/components/groups/page-header"
 import { getVisibleGroups } from "@/queries/groups"
 import { EXTRA_LABEL, matchesLabelBranch } from "@/utils/labels"
 import { mergeGroupsByTitle } from "@/utils/merge-groups"
@@ -12,22 +11,11 @@ export async function ExtraGroups() {
   )
 
   return (
-    <main className="mx-auto flex min-h-svh w-full min-w-0 max-w-7xl flex-col gap-16 px-6 py-50 md:gap-0">
-      <header className="relative flex flex-col items-center gap-1 md:static md:flex-row md:items-center md:gap-4">
-        <Link
-          href="/groups"
-          aria-label="Indietro"
-          className="absolute top-0 left-0 grid size-10 shrink-0 place-items-center rounded-full bg-white/60 md:static"
-        >
-          <FiArrowLeft className="size-5" />
-        </Link>
-        <div className="flex min-w-0 flex-col items-center gap-1 text-center md:flex-1">
-          <h1 className="typo-title-large md:typo-display-medium text-text-primary">Gruppi Extra</h1>
-        </div>
-      </header>
+    <main className={`${GROUPS_COLUMN} flex min-h-svh flex-col gap-12 pt-36 pb-32 md:gap-16 md:pt-52`}>
+      <GroupsPageHeader title="Gruppi Extra" backHref="/groups" />
 
       {extraGroups.length > 0 ? (
-        <div className="flex flex-col gap-3 md:mt-25.75">
+        <div className="flex flex-col gap-3">
           {extraGroups.map((g) => (
             <CardCourseGroup
               key={g.key}
@@ -40,9 +28,7 @@ export async function ExtraGroups() {
           ))}
         </div>
       ) : (
-        <p className="typo-body-medium text-center text-text-secondary md:mt-25.75">
-          Nessun gruppo extra disponibile al momento.
-        </p>
+        <p className="typo-body-medium text-center text-text-secondary">Nessun gruppo extra disponibile al momento.</p>
       )}
     </main>
   )
diff --git a/src/components/groups/groups-result.tsx b/src/components/groups/groups-result.tsx
index c1b3ba6d..b0ff9c99 100644
--- a/src/components/groups/groups-result.tsx
+++ b/src/components/groups/groups-result.tsx
@@ -1,7 +1,6 @@
-import Link from "next/link"
 import { notFound } from "next/navigation"
-import { FiArrowLeft, FiX } from "react-icons/fi"
 import { CardCourseGroup } from "@/components/card-course-group"
+import { GROUPS_COLUMN, GroupsPageHeader } from "@/components/groups/page-header"
 import { getLevel, getSchool } from "@/components/wizard/constants"
 import { getVisibleGroups } from "@/queries/groups"
 import type { VisibleGroup } from "@/queries/types"
@@ -21,7 +20,7 @@ import { createStepHref } from "@/utils/step-href"
 
 const stepHref = createStepHref("/groups/didattica")
 
-function GroupCard({ group, secondary, stacked }: { group: MergedGroup; secondary?: boolean; stacked?: boolean }) {
+function GroupCard({ group, secondary }: { group: MergedGroup; secondary?: boolean }) {
   return (
     <CardCourseGroup
       key={group.key}
@@ -31,7 +30,6 @@ function GroupCard({ group, secondary, stacked }: { group: MergedGroup; secondar
       tgLink={group.tgLink}
       tgGroupId={group.tgGroupId}
       secondary={secondary}
-      stacked={stacked}
     />
   )
 }
@@ -41,19 +39,19 @@ function GroupSection({ title, groups }: { title: string; groups: VisibleGroup[]
   if (merged.length === 0) return null
 
   return (
-    <div className="flex flex-col gap-4 md:mt-16.25 md:gap-0">
-      <div className="relative flex items-center justify-center md:static md:justify-between">
-        <p className="typo-body-large md:typo-headline-small text-center text-text-primary md:text-left">{title}</p>
-        <p className="typo-label-small md:typo-label-medium -translate-y-1/2 absolute top-1/2 right-0 rounded-full border border-white/50 bg-background-blur px-3 py-1 text-text-secondary md:static md:translate-y-0 md:rounded-buttonsM md:border-0 md:py-2">
+    <section className="flex flex-col gap-4">
+      <div className="flex items-center justify-between gap-4">
+        <h2 className="typo-title-large md:typo-headline-small text-text-primary">{title}</h2>
+        <p className="typo-label-medium shrink-0 rounded-full border border-white/50 bg-background-blur px-3 py-1 text-text-secondary">
           {merged.length} Gruppi
         </p>
       </div>
-      <div className="flex flex-col gap-3 md:mt-6.75">
+      <div className="flex flex-col gap-3">
         {merged.map((g) => (
           <GroupCard key={g.key} group={g} />
         ))}
       </div>
-    </div>
+    </section>
   )
 }
 
@@ -101,50 +99,33 @@ export async function GroupsResult({
     mergedLevelGroups.length > 0 ||
     courseGroups.length > 0
 
+  const generalGroups = [
+    ...mergedSiteGroups.map((group) => ({ group, secondary: false })),
+    ...mergedSchoolGroups.map((group) => ({ group, secondary: false })),
+    ...mergedLevelGroups.map((group) => ({ group, secondary: true })),
+    ...mergedGeneralCourseGroups.map((group) => ({ group, secondary: true })),
+  ]
+
   return (
-    <main className="mx-auto flex min-h-svh w-full min-w-0 max-w-7xl flex-col gap-8 px-6 py-52 md:gap-0">
-      <header className="relative flex flex-col items-center gap-1 md:static md:flex-row md:items-center md:gap-4">
-        <Link
-          href={stepHref({ school: schoolSlug, level })}
-          replace
-          aria-label="Indietro"
-          className="absolute top-0 left-0 grid size-10 shrink-0 place-items-center rounded-full bg-white/60 md:static"
-        >
-          <FiArrowLeft className="size-5" />
-        </Link>
-        <div className="flex min-w-0 flex-col items-center gap-1 text-center md:flex-1">
-          <h1 className="typo-title-large md:typo-display-medium text-text-primary">{courseName}</h1>
-          <p className="typo-label-large md:typo-headline-small text-text-secondary md:text-text-primary">
-            Laurea {currentLevel.name}
-          </p>
-        </div>
-        <Link
-          href="/groups"
-          aria-label="Chiudi"
-          className="absolute top-0 right-0 grid size-10 shrink-0 place-items-center rounded-full bg-white/60 md:static"
-        >
-          <FiX className="size-5" />
-        </Link>
-      </header>
-
-      {(mergedSiteGroups.length > 0 ||
-        mergedSchoolGroups.length > 0 ||
-        mergedLevelGroups.length > 0 ||
-        mergedGeneralCourseGroups.length > 0) && (
-        <div className="flex flex-row flex-wrap gap-3 md:mt-25.75">
-          {mergedSiteGroups.map((g) => (
-            <GroupCard key={g.key} group={g} stacked />
-          ))}
-          {mergedSchoolGroups.map((g) => (
-            <GroupCard key={g.key} group={g} stacked />
-          ))}
-          {mergedLevelGroups.map((g) => (
-            <GroupCard key={g.key} group={g} secondary stacked />
-          ))}
-          {mergedGeneralCourseGroups.map((g) => (
-            <GroupCard key={g.key} group={g} secondary stacked />
+    <main className={`${GROUPS_COLUMN} flex min-h-svh flex-col gap-12 pt-36 pb-32 md:gap-16 md:pt-52`}>
+      <GroupsPageHeader
+        title={courseName}
+        subtitle={`Laurea ${currentLevel.name}`}
+        backHref={stepHref({ school: schoolSlug, level })}
+        replaceBack
+        closeHref="/groups"
+      />
+
+      {/* The site, school, level and course groups */}
+      {generalGroups.length > 0 && (
+        <section aria-labelledby="gruppi-generali" className="grid gap-3 lg:grid-cols-2 lg:gap-4">
+          <h2 id="gruppi-generali" className="sr-only">
+            Gruppi generali
+          </h2>
+          {generalGroups.map(({ group, secondary }) => (
+            <GroupCard key={group.key} group={group} secondary={secondary} />
           ))}
-        </div>
+        </section>
       )}
 
       {cohorts.map((cohort) => (
@@ -156,7 +137,7 @@ export async function GroupsResult({
       ))}
 
       {!hasAnyGroup && (
-        <p className="typo-body-medium text-center text-text-secondary md:mt-16.25">
+        <p className="typo-body-medium text-center text-text-secondary">
           Nessun gruppo disponibile al momento per questo corso.
         </p>
       )}
diff --git a/src/components/groups/page-header.tsx b/src/components/groups/page-header.tsx
new file mode 100644
index 00000000..ef06eb8c
--- /dev/null
+++ b/src/components/groups/page-header.tsx
@@ -0,0 +1,44 @@
+import Link from "next/link"
+import { FiArrowLeft, FiX } from "react-icons/fi"
+
+/** Figma's list column for group results (~1040px at 1728), with the shared 24/40px gutters. */
+export const GROUPS_COLUMN = "mx-auto w-full min-w-0 max-w-5xl px-6 sm:px-10"
+
+const iconLinkClass =
+  "grid size-10 shrink-0 place-items-center rounded-full bg-white/60 outline-none transition-colors hover:bg-white focus-visible:ring-2 focus-visible:ring-blue-secondary"
+
+/**
+ * Back button, centred title and optional close button. A three-column grid keeps a long course name from running
+ * under the buttons on phones.
+ */
+export function GroupsPageHeader({
+  title,
+  subtitle,
+  backHref,
+  replaceBack = false,
+  closeHref,
+}: {
+  title: string
+  subtitle?: string
+  backHref: string
+  /** Go back without leaving a history entry, as the wizard steps do. */
+  replaceBack?: boolean
+  closeHref?: string
+}) {
+  return (
+    <header className="grid grid-cols-[2.5rem_minmax(0,1fr)_2.5rem] items-start gap-3 md:items-center md:gap-6">
+      <Link href={backHref} replace={replaceBack} aria-label="Indietro" className={iconLinkClass}>
+        <FiArrowLeft className="size-5" />
+      </Link>
+      <div className="flex flex-col items-center gap-1 text-center">
+        <h1 className="typo-title-large md:typo-display-medium text-balance text-text-primary">{title}</h1>
+        {subtitle && <p className="typo-label-large md:typo-headline-small text-text-secondary">{subtitle}</p>}
+      </div>
+      {closeHref && (
+        <Link href={closeHref} aria-label="Chiudi" className={iconLinkClass}>
+          <FiX className="size-5" />
+        </Link>
+      )}
+    </header>
+  )
+}
diff --git a/src/components/home/projects.tsx b/src/components/home/projects.tsx
index d0078106..99ec6578 100644
--- a/src/components/home/projects.tsx
+++ b/src/components/home/projects.tsx
@@ -2,9 +2,9 @@ import Link from "next/link"
 import { FiArrowUpRight } from "react-icons/fi"
 import { CardCaption } from "@/components/card-caption"
 import { CONTAINER } from "@/components/layout/page"
+import { PeekCarousel } from "@/components/peek-carousel"
 import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
-import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "../ui/carousel"
 
 const featuredCards = [
   {
@@ -31,7 +31,7 @@ const featuredCards = [
   },
 ] as const
 
-function ProjectCard({ className, ...card }: (typeof featuredCards)[number] & { className?: string }) {
+function FeaturedProjectCard({ className, ...card }: (typeof featuredCards)[number] & { className?: string }) {
   return (
     <CardCaption
       {...card}
@@ -79,23 +79,16 @@ export function Projects() {
 
       <div className="mx-auto hidden w-full max-w-4xl auto-rows-fr gap-6 pt-8 sm:grid sm:grid-cols-2 xl:max-w-none xl:pt-0">
         {featuredCards.map((card) => (
-          <ProjectCard key={card.title} {...card} className="h-auto w-full p-6" />
+          <FeaturedProjectCard key={card.title} {...card} className="h-auto w-full p-6" />
         ))}
       </div>
 
-      {/* Mobile: the next card peeks in from the edge, so the row reads as scrollable */}
-      <div className="-mx-6 pt-6 sm:hidden">
-        <Carousel opts={{ align: "start" }}>
-          <CarouselContent className="mr-6 ml-2">
-            {featuredCards.map((card) => (
-              <CarouselItem key={card.title} className="basis-[85%]">
-                <ProjectCard {...card} className="h-full w-full p-6" />
-              </CarouselItem>
-            ))}
-          </CarouselContent>
-          <CarouselDots className="mt-6" />
-        </Carousel>
-      </div>
+      <PeekCarousel
+        items={featuredCards}
+        getKey={(card) => card.title}
+        render={(card) => <FeaturedProjectCard {...card} className="h-full w-full p-6" />}
+        className="pt-6 sm:hidden"
+      />
     </section>
   )
 }
diff --git a/src/components/layout/page.ts b/src/components/layout/page.ts
index ca8cc332..495b9d2a 100644
--- a/src/components/layout/page.ts
+++ b/src/components/layout/page.ts
@@ -24,3 +24,6 @@ export const PAGE_MAIN = "flex w-full flex-col gap-24 pb-24 md:gap-32 md:pb-32 x
  */
 export const PAGE_HERO_TOP = "pt-52 md:pt-57.5"
 export const PAGE_HERO = `${PAGE_HERO_TOP} pb-8 md:pb-12 xl:pb-24`
+
+/** A section made of a heading block followed by its content. */
+export const SECTION_STACK = `${CONTAINER} flex flex-col gap-10 md:gap-14`
diff --git a/src/components/peek-carousel.tsx b/src/components/peek-carousel.tsx
new file mode 100644
index 00000000..5d2afda2
--- /dev/null
+++ b/src/components/peek-carousel.tsx
@@ -0,0 +1,34 @@
+import type { ReactNode } from "react"
+import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "@/components/ui/carousel"
+import { cn } from "@/lib/utils"
+
+/**
+ * Phone carousel whose next card peeks in from the screen edge, so the row reads as scrollable.
+ * It bleeds over the CONTAINER's 24px phone gutter: use it below `sm` only.
+ */
+export function PeekCarousel<T>({
+  items,
+  getKey,
+  render,
+  className,
+}: {
+  items: readonly T[]
+  getKey: (item: T) => string | number
+  render: (item: T) => ReactNode
+  className?: string
+}) {
+  return (
+    <div className={cn("-mx-6", className)}>
+      <Carousel opts={{ align: "start" }}>
+        <CarouselContent className="mr-6 ml-2">
+          {items.map((item) => (
+            <CarouselItem key={getKey(item)} className="basis-[85%]">
+              {render(item)}
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselDots className="mt-6" />
+      </Carousel>
+    </div>
+  )
+}
diff --git a/src/components/projects/collection.tsx b/src/components/projects/collection.tsx
index 61345010..e320f5b2 100644
--- a/src/components/projects/collection.tsx
+++ b/src/components/projects/collection.tsx
@@ -1,94 +1,75 @@
 "use client"
 
-import { useId, useState } from "react"
-import { FiArrowDown, FiArrowUp, FiSearch, FiUploadCloud } from "react-icons/fi"
-import type { ApiOutput } from "@/types"
-import { CardCaption } from "../card-caption"
-import { Button } from "../ui/button"
-import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "../ui/carousel"
+import { useState } from "react"
+import { FiSearch } from "react-icons/fi"
+import { INLINE_LINK, SECTION_STACK, SECTION_TITLE } from "../layout/page"
 import { Input } from "../ui/input"
+import { ProjectList, ProjectsEmpty } from "./project-list"
+import type { Project } from "./resources"
 
-type Project = ApiOutput["web"]["projects"]["getAllProjects"][number]
-
-const INITIAL_PROJECT_COUNT = 8
+/** Case- and accent-insensitive, so "universita" finds "Università". */
+function normalize(text: string) {
+  return text
+    .normalize("NFD")
+    .replace(/\p{Diacritic}/gu, "")
+    .toLowerCase()
+}
 
-export function Collection({ projects }: { projects: Project[] }) {
-  const [expanded, setExpanded] = useState(false)
-  const gridId = useId()
-  const visibleProjects = expanded ? projects : projects.slice(0, INITIAL_PROJECT_COUNT)
+/** Lists the collection; a search looks through every project on the page, novelties and deprecated ones included. */
+export function Collection({ projects, searchable }: { projects: Project[]; searchable: Project[] }) {
+  const [query, setQuery] = useState("")
+  const needle = normalize(query.trim())
+  const words = needle.split(/\s+/)
+  const matches = needle
+    ? searchable.filter((project) => {
+        const text = normalize(`${project.title} ${project.descriptionIt}`)
+        return words.every((word) => text.includes(word))
+      })
+    : projects
 
   return (
-    <section className="mx-auto flex min-h-screen max-w-400 flex-col items-center justify-center gap-12 px-4 sm:gap-22">
-      <div className="flex flex-col items-center gap-8">
-        <h2 className="typo-headline-medium sm:typo-display-medium text-center">
+    <section aria-labelledby="raccolta-title" className={SECTION_STACK}>
+      <div className="flex flex-col items-center gap-8 text-center">
+        <h2 id="raccolta-title" className={SECTION_TITLE}>
           Esplora la raccolta completa dei progetti
         </h2>
-        <div className="flex w-full justify-center">
+        {searchable.length > 0 && (
           <Input
             icon={<FiSearch className="h-5 w-5" />}
-            type="text"
-            placeholder="Search by name"
-            aria-label="Search by name"
-            containerClassName="max-w-xl"
+            type="search"
+            placeholder="Cerca un progetto"
+            aria-label="Cerca un progetto per nome o descrizione"
+            containerClassName="w-full max-w-xl"
             className="typo-body-medium"
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
           />
-        </div>
+        )}
       </div>
 
-      {projects.length === 0 ? (
-        <p className="typo-body-large text-center">Nessun progetto disponibile al momento.</p>
-      ) : (
-        <>
-          <div className="hidden flex-col gap-12 sm:flex">
-            <div id={gridId} className="grid 1xl:grid-cols-4 grid-cols-2 justify-items-center gap-6">
-              {visibleProjects.map((project) => (
-                <CardCaption
-                  key={project.id}
-                  title={project.title}
-                  caption={project.descriptionIt}
-                  icon={FiUploadCloud}
-                  href={`/projects/${project.id}`}
-                />
-              ))}
-            </div>
-            {projects.length > INITIAL_PROJECT_COUNT && (
-              <div className="flex justify-center">
-                <Button
-                  type="button"
-                  variant="primary"
-                  size="lg"
-                  aria-expanded={expanded}
-                  aria-controls={gridId}
-                  onClick={() => setExpanded((previous) => !previous)}
-                >
-                  {expanded ? "Mostra di meno" : "Mostra di più"}
-                  {expanded ? <FiArrowUp aria-hidden="true" /> : <FiArrowDown aria-hidden="true" />}
-                </Button>
-              </div>
+      <p aria-live="polite" className="sr-only">
+        {needle && `${matches.length} progetti trovati`}
+      </p>
+      <ProjectList
+        // Remount on a new search, so the list starts collapsed and the carousel from the first card
+        key={needle}
+        projects={matches}
+        initialCount={needle ? undefined : 8}
+        empty={
+          <ProjectsEmpty>
+            {needle ? (
+              <>Nessun progetto corrisponde a “{query.trim()}”.</>
+            ) : (
+              <>
+                La raccolta è vuota per ora.{" "}
+                <a href="#proponi" className={INLINE_LINK}>
+                  Proponi il primo progetto
+                </a>
+              </>
             )}
-          </div>
-
-          <div className="flex w-full items-center justify-center sm:hidden">
-            <Carousel className="w-full">
-              <CarouselContent>
-                {projects.map((project) => (
-                  <CarouselItem key={project.id}>
-                    <div className="flex justify-center">
-                      <CardCaption
-                        title={project.title}
-                        caption={project.descriptionIt}
-                        icon={FiUploadCloud}
-                        href={`/projects/${project.id}`}
-                      />
-                    </div>
-                  </CarouselItem>
-                ))}
-              </CarouselContent>
-              <CarouselDots className="mt-8" />
-            </Carousel>
-          </div>
-        </>
-      )}
+          </ProjectsEmpty>
+        }
+      />
     </section>
   )
 }
diff --git a/src/components/projects/community-news.tsx b/src/components/projects/community-news.tsx
index ee7440ed..98a8fb75 100644
--- a/src/components/projects/community-news.tsx
+++ b/src/components/projects/community-news.tsx
@@ -1,68 +1,27 @@
-import { FiCrop } from "react-icons/fi"
-import type { ApiOutput } from "@/types"
-import { CardCaption } from "../card-caption"
-import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "../ui/carousel"
-import { Hero } from "../ui/hero"
-
-type Project = ApiOutput["web"]["projects"]["getAllProjects"][number]
+import { INLINE_LINK, SECTION_LEAD, SECTION_STACK, SECTION_TITLE } from "../layout/page"
+import { ProjectList, ProjectsEmpty } from "./project-list"
+import type { Project } from "./resources"
 
 export function CommunityNews({ projects }: { projects: Project[] }) {
   return (
-    <section className="mx-auto flex min-h-screen max-w-400 flex-col items-center justify-center gap-48 px-4 py-49">
-      <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">
-          <h3 className="typo-headline-medium sm:typo-display-medium text-center sm:text-left">
-            Le novità della community
-          </h3>
-          <p className="typo-body-large text-center sm:text-left">
-            Rimani aggiornato sulle idee appena condivise dagli studenti del Politecnico
-          </p>
-        </div>
-
-        {projects.length === 0 ? (
-          <p className="typo-body-large text-center sm:text-left">Nessuna novità disponibile al momento.</p>
-        ) : (
-          <>
-            {/* Desktop Grid */}
-            <div className="hidden 1xl:grid-cols-4 justify-items-center gap-6 md:grid md:grid-cols-2">
-              {projects.map((project) => (
-                <CardCaption
-                  key={project.id}
-                  title={project.title}
-                  caption={project.descriptionIt}
-                  icon={FiCrop}
-                  iconPosition="right"
-                  href={`/projects/${project.id}`}
-                />
-              ))}
-            </div>
-
-            {/* Mobile Carousel */}
-            <div className="sm:hidden">
-              <Carousel className="w-full">
-                <CarouselContent>
-                  {projects.map((project) => (
-                    <CarouselItem key={project.id}>
-                      <div className="flex justify-center">
-                        <CardCaption
-                          title={project.title}
-                          caption={project.descriptionIt}
-                          icon={FiCrop}
-                          iconPosition="right"
-                          href={`/projects/${project.id}`}
-                        />
-                      </div>
-                    </CarouselItem>
-                  ))}
-                </CarouselContent>
-                <CarouselDots className="mt-8" />
-              </Carousel>
-            </div>
-          </>
-        )}
+    <section aria-labelledby="novita-title" className={SECTION_STACK}>
+      <div className="flex flex-col gap-4">
+        <h2 id="novita-title" className={SECTION_TITLE}>
+          Le novità della community
+        </h2>
+        <p className={SECTION_LEAD}>Rimani aggiornato sulle idee appena condivise dagli studenti del Politecnico.</p>
       </div>
+      <ProjectList
+        projects={projects}
+        empty={
+          <ProjectsEmpty>
+            Nessuna novità al momento.{" "}
+            <a href="#proponi" className={INLINE_LINK}>
+              Hai un'idea? Proponila
+            </a>
+          </ProjectsEmpty>
+        }
+      />
     </section>
   )
 }
diff --git a/src/components/projects/deprecated.tsx b/src/components/projects/deprecated.tsx
index 34a0fd08..96b23070 100644
--- a/src/components/projects/deprecated.tsx
+++ b/src/components/projects/deprecated.tsx
@@ -1,87 +1,24 @@
-"use client"
-
-import { useId, useState } from "react"
-import { FiArrowDown, FiArrowUp, FiUploadCloud } from "react-icons/fi"
-import type { ApiOutput } from "@/types"
-import { CardCaption } from "../card-caption"
-import { Button } from "../ui/button"
-import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "../ui/carousel"
-
-type Project = ApiOutput["web"]["projects"]["getAllProjects"][number]
-
-const INITIAL_PROJECT_COUNT = 8
+import { SECTION_LEAD, SECTION_STACK, SECTION_TITLE } from "../layout/page"
+import { ProjectList, ProjectsEmpty } from "./project-list"
+import type { Project } from "./resources"
 
 export function Deprecated({ projects }: { projects: Project[] }) {
-  const [expanded, setExpanded] = useState(false)
-  const gridId = useId()
-  const visibleProjects = expanded ? projects : projects.slice(0, INITIAL_PROJECT_COUNT)
-
   return (
-    <section className="mx-auto flex min-h-screen max-w-400 flex-col items-center justify-center px-4 py-49">
-      <div className="flex w-full flex-col gap-14 sm:w-fit">
-        <div className="flex flex-col items-center gap-2 sm:items-start">
-          <h3 className="typo-headline-medium sm:typo-display-medium text-center sm:text-left">Progetti deprecati</h3>
-          <p className="typo-body-large text-center sm:text-left">
-            Qui raccogliamo i progetti non più aggiornati o attivi. <br />
-            Puoi contribuire a riportarli in vita, migliorarli o usarli come base per nuove idee.
-          </p>
-        </div>
-
-        {projects.length === 0 ? (
-          <p className="typo-body-large text-center sm:text-left">Nessun progetto deprecato al momento.</p>
-        ) : (
-          <>
-            <div className="hidden flex-col gap-12 sm:flex">
-              <div id={gridId} className="grid 1xl:grid-cols-4 grid-cols-2 justify-items-center gap-6">
-                {visibleProjects.map((project) => (
-                  <CardCaption
-                    key={project.id}
-                    title={project.title}
-                    caption={project.descriptionIt}
-                    icon={FiUploadCloud}
-                    href={`/projects/${project.id}`}
-                  />
-                ))}
-              </div>
-              {projects.length > INITIAL_PROJECT_COUNT && (
-                <div className="flex justify-center">
-                  <Button
-                    type="button"
-                    variant="primary"
-                    size="lg"
-                    aria-expanded={expanded}
-                    aria-controls={gridId}
-                    onClick={() => setExpanded((previous) => !previous)}
-                  >
-                    {expanded ? "Mostra di meno" : "Mostra di più"}
-                    {expanded ? <FiArrowUp aria-hidden="true" /> : <FiArrowDown aria-hidden="true" />}
-                  </Button>
-                </div>
-              )}
-            </div>
-
-            <div className="flex w-full items-center justify-center sm:hidden">
-              <Carousel className="w-full">
-                <CarouselContent>
-                  {projects.map((project) => (
-                    <CarouselItem key={project.id}>
-                      <div className="flex justify-center">
-                        <CardCaption
-                          title={project.title}
-                          caption={project.descriptionIt}
-                          icon={FiUploadCloud}
-                          href={`/projects/${project.id}`}
-                        />
-                      </div>
-                    </CarouselItem>
-                  ))}
-                </CarouselContent>
-                <CarouselDots className="mt-8" />
-              </Carousel>
-            </div>
-          </>
-        )}
+    <section aria-labelledby="deprecati-title" className={SECTION_STACK}>
+      <div className="flex flex-col gap-4">
+        <h2 id="deprecati-title" className={SECTION_TITLE}>
+          Progetti deprecati
+        </h2>
+        <p className={`${SECTION_LEAD} max-w-200`}>
+          Qui raccogliamo i progetti non più aggiornati o attivi. Puoi contribuire a riportarli in vita, migliorarli o
+          usarli come base per nuove idee.
+        </p>
       </div>
+      <ProjectList
+        projects={projects}
+        initialCount={8}
+        empty={<ProjectsEmpty>Nessun progetto deprecato al momento.</ProjectsEmpty>}
+      />
     </section>
   )
 }
diff --git a/src/components/projects/project-card.tsx b/src/components/projects/project-card.tsx
new file mode 100644
index 00000000..291485d4
--- /dev/null
+++ b/src/components/projects/project-card.tsx
@@ -0,0 +1,32 @@
+import { FiArrowRight } from "react-icons/fi"
+import { CardCaption } from "../card-caption"
+import { getProjectResources, type Project, resourceDetails } from "./resources"
+
+/** A project in the lists: opens the project page, and says what it offers there when the project has a link. */
+export function ProjectCard({ project }: { project: Project }) {
+  const [resource] = getProjectResources(project)
+  const details = resource && resourceDetails[resource.kind]
+
+  return (
+    <CardCaption
+      title={project.title}
+      caption={project.descriptionIt}
+      image={project.logo ?? undefined}
+      href={`/projects/${project.id}`}
+      className="h-full w-full gap-3 p-6"
+      titleClassName="typo-title-large wrap-anywhere text-balance"
+      captionClassName="line-clamp-4 text-pretty"
+      footer={
+        <span className="typo-label-large flex items-center gap-3 pt-3">
+          {details && (
+            <span className="flex items-center gap-2 text-slate-600">
+              <details.icon aria-hidden className="size-4 shrink-0" />
+              {details.title}
+            </span>
+          )}
+          <FiArrowRight aria-hidden className="ml-auto size-4 shrink-0 text-blue-secondary" />
+        </span>
+      }
+    />
+  )
+}
diff --git a/src/components/projects/project-list.tsx b/src/components/projects/project-list.tsx
new file mode 100644
index 00000000..72ee5c4a
--- /dev/null
+++ b/src/components/projects/project-list.tsx
@@ -0,0 +1,74 @@
+"use client"
+
+import { type ReactNode, useId, useState } from "react"
+import { FiArrowDown, FiArrowUp } from "react-icons/fi"
+import { PeekCarousel } from "../peek-carousel"
+import { Button } from "../ui/button"
+import { ProjectCard } from "./project-card"
+import type { Project } from "./resources"
+
+/**
+ * Cards keep a readable width at every viewport (16rem min, one fr max), so the column count follows the space
+ * instead of jumping at fixed breakpoints. On phones the list becomes a carousel with the next card peeking in.
+ */
+export function ProjectList({
+  projects,
+  initialCount,
+  empty,
+}: {
+  projects: Project[]
+  /** Show only this many cards on larger screens until expanded. */
+  initialCount?: number
+  empty: ReactNode
+}) {
+  const [expanded, setExpanded] = useState(false)
+  const gridId = useId()
+
+  if (projects.length === 0) return empty
+
+  const collapsible = initialCount !== undefined && projects.length > initialCount
+  const visible = collapsible && !expanded ? projects.slice(0, initialCount) : projects
+
+  return (
+    <>
+      <div className="hidden flex-col items-center gap-12 sm:flex">
+        <ul id={gridId} className="grid w-full grid-cols-[repeat(auto-fill,minmax(min(100%,16rem),1fr))] gap-6">
+          {visible.map((project) => (
+            <li key={project.id} className="min-w-0">
+              <ProjectCard project={project} />
+            </li>
+          ))}
+        </ul>
+        {collapsible && (
+          <Button
+            type="button"
+            variant="primary"
+            size="lg"
+            aria-expanded={expanded}
+            aria-controls={gridId}
+            onClick={() => setExpanded((previous) => !previous)}
+          >
+            {expanded ? "Mostra di meno" : `Mostra tutti (${projects.length})`}
+            {expanded ? <FiArrowUp aria-hidden="true" /> : <FiArrowDown aria-hidden="true" />}
+          </Button>
+        )}
+      </div>
+
+      <PeekCarousel
+        items={projects}
+        getKey={(project) => project.id}
+        render={(project) => <ProjectCard project={project} />}
+        className="sm:hidden"
+      />
+    </>
+  )
+}
+
+/** Shown in place of an empty list: says so plainly and points to the one thing the reader can do about it. */
+export function ProjectsEmpty({ children }: { children: ReactNode }) {
+  return (
+    <div className="typo-body-large wrap-anywhere rounded-rectangles border border-slate-300 border-dashed px-6 py-10 text-center text-slate-600">
+      {children}
+    </div>
+  )
+}
diff --git a/src/components/projects/resources.ts b/src/components/projects/resources.ts
index 09227e03..15759167 100644
--- a/src/components/projects/resources.ts
+++ b/src/components/projects/resources.ts
@@ -1,11 +1,11 @@
 import type { IconType } from "react-icons"
-import { FaAndroid, FaApple, FaGithub, FaLinux, FaWindows } from "react-icons/fa6"
+import { FaAndroid, FaApple, FaGithub, FaLinux, FaTelegram, FaWindows } from "react-icons/fa6"
 import { FiGlobe } from "react-icons/fi"
 import type { ApiOutput } from "@/types"
 
 export type Project = ApiOutput["web"]["projects"]["getAllProjects"][number]
 
-export type ProjectResourceKind = "web" | "windows" | "macos" | "linux" | "android" | "ios" | "source"
+export type ProjectResourceKind = "web" | "telegram" | "windows" | "macos" | "linux" | "android" | "ios" | "source"
 
 /** A way to use or get a project: a download for a platform, the web app or the source code. */
 export type ProjectResource = { kind: ProjectResourceKind; href: string }
@@ -20,6 +20,12 @@ export const resourceDetails: Record<
     cta: "Apri il sito",
     icon: FiGlobe,
   },
+  telegram: {
+    title: "Telegram",
+    description: "Lo trovi su Telegram, senza installare nient’altro.",
+    cta: "Apri su Telegram",
+    icon: FaTelegram,
+  },
   windows: {
     title: "Windows",
     description: "Scarica l’installer per Windows.",
@@ -40,10 +46,14 @@ export const resourceDetails: Record<
 
 /**
  * The backend does not expose per-platform downloads yet: until it does, the only resource is the project `link`,
- * shown as source code when it points to a repository and as the web app otherwise. Replace this with the API field.
+ * classified by its host: a repository, a Telegram bot or channel, or else the web app. Replace this with the API field.
  */
 export function getProjectResources(project: Project): ProjectResource[] {
   if (!project.link) return []
-  const isRepository = /^https:\/\/(github\.com|gitlab\.com)\//.test(project.link)
-  return [{ kind: isRepository ? "source" : "web", href: project.link }]
+  const kind = /^https:\/\/(github\.com|gitlab\.com)\//.test(project.link)
+    ? "source"
+    : /^https:\/\/t\.me\//.test(project.link)
+      ? "telegram"
+      : "web"
+  return [{ kind, href: project.link }]
 }
diff --git a/src/components/projects/upload.tsx b/src/components/projects/upload.tsx
index 5bcd90bf..b057c9e2 100644
--- a/src/components/projects/upload.tsx
+++ b/src/components/projects/upload.tsx
@@ -1,22 +1,24 @@
 import { FiMail } from "react-icons/fi"
 import { CardCaption } from "../card-caption"
+import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "../layout/page"
 
 const cards = [
   {
     title: "Contatti",
     caption: (
-      <div className="flex flex-col gap-2">
-        <span className="flex items-center gap-2">
-          <FiMail /> info@polinetwork.org
-        </span>
-      </div>
+      <a
+        href="mailto:info@polinetwork.org"
+        className="typo-body-large flex w-fit items-center gap-2 underline-offset-4 hover:underline focus-visible:underline"
+      >
+        <FiMail aria-hidden className="shrink-0" /> info@polinetwork.org
+      </a>
     ),
   },
   {
     title: "Requisiti",
     caption: (
-      <ul className="list-disc pl-4">
-        <li>opensource</li>
+      <ul className="typo-body-large list-disc pl-5">
+        <li>open source</li>
         <li>utile alla community</li>
         <li>senza scopo di lucro</li>
       </ul>
@@ -26,32 +28,32 @@ const cards = [
 
 export function Upload() {
   return (
-    <section className="mx-auto flex min-h-screen max-w-300 flex-col items-center justify-center gap-12 px-4 py-16 md:flex-row md:gap-24 md:px-12 lg:gap-48">
-      <div className="flex max-w-xs flex-col items-start gap-8">
-        <div className="flex flex-col gap-2">
-          <h2 className="typo-headline-medium md:typo-display-medium">Hai un'idea?</h2>
-          <p className="typo-title-large md:typo-headline-medium text-blue-primary">Proponila qui!</p>
-        </div>
-        <div className="flex flex-col gap-4">
-          <p className="typo-body-large">
+    <section id="proponi" aria-labelledby="proponi-title" className={`${CONTAINER} scroll-mt-32`}>
+      <div className="grid gap-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,22rem)] lg:items-center lg:gap-16">
+        <div className="flex flex-col gap-6">
+          <div className="flex flex-col gap-2">
+            <h2 id="proponi-title" className={SECTION_TITLE}>
+              Hai un'idea?
+            </h2>
+            <p className="typo-headline-small text-blue-secondary">Proponila qui!</p>
+          </div>
+          <p className={SECTION_LEAD}>
             Qui puoi proporre nuovi progetti o suggerire migliorie al sito. Il team di PoliNetwork può aiutarti a
             sviluppare la tua idea e, se rispetta i requisiti, pubblicarla qui.
           </p>
           <p className="typo-body-large">
             Dopo l'invio riceverai una risposta dai nostri admin con le istruzioni per proseguire.
           </p>
-        </div>
-        <div className="flex flex-col gap-4">
-          <p className="typo-body-medium text-text-secondary">
+          <p className="typo-body-small text-slate-600">
             I diritti dei progetti rimangono tutti dei rispettivi progettisti, PoliNetwork non si assume responsabilità.
           </p>
         </div>
-      </div>
 
-      <div className="flex flex-col gap-6">
-        {cards.map((card) => (
-          <CardCaption key={card.title} {...card} className="h-auto" />
-        ))}
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-1">
+          {cards.map((card) => (
+            <CardCaption key={card.title} {...card} className="h-auto w-full p-6" />
+          ))}
+        </div>
       </div>
     </section>
   )
diff --git a/src/components/wizard/course-step.tsx b/src/components/wizard/course-step.tsx
index 5f187649..a3b570ac 100644
--- a/src/components/wizard/course-step.tsx
+++ b/src/components/wizard/course-step.tsx
@@ -84,7 +84,11 @@ export async function CourseStep({
           const courseCampus = campusFacet(facets)
           const courseLanguage = languageFacet(facets)
           return (
-            <Link key={course} href={stepHref({ school: schoolSlug, level, course })} className="block">
+            <Link
+              key={course}
+              href={stepHref({ school: schoolSlug, level, course })}
+              className="block rounded-rectangles outline-none focus-visible:ring-2 focus-visible:ring-blue-secondary"
+            >
               <CardCourse
                 courseName={humanizeSlug(course)}
                 location={courseCampus ? campusLabel(courseCampus) : undefined}
diff --git a/src/components/wizard/level-step.tsx b/src/components/wizard/level-step.tsx
index e40c9589..4e3cc157 100644
--- a/src/components/wizard/level-step.tsx
+++ b/src/components/wizard/level-step.tsx
@@ -37,7 +37,10 @@ export function LevelStep({
             <Link
               key={level.slug}
               href={stepHref({ school: schoolSlug, level: level.slug })}
-              className={cn("block", isLastOdd && "md:col-span-2")}
+              className={cn(
+                "block rounded-rectangles outline-none focus-visible:ring-2 focus-visible:ring-blue-secondary",
+                isLastOdd && "md:col-span-2"
+              )}
             >
               <CardPathSelection caption={level.name} className="w-full" icon={FiBook} />
             </Link>
diff --git a/src/components/wizard/wizard-shell.tsx b/src/components/wizard/wizard-shell.tsx
index f4adad57..f3f6bd40 100644
--- a/src/components/wizard/wizard-shell.tsx
+++ b/src/components/wizard/wizard-shell.tsx
@@ -34,8 +34,8 @@ export function WizardShell({
 
   return (
     <main className="flex min-h-svh w-full min-w-0 flex-col items-center px-6 py-50 md:py-52">
-      <Glass className="relative m-auto flex min-h-146 w-full max-w-7xl flex-col gap-10 border-0 bg-transparent p-4 backdrop-blur-none md:min-h-157 md:gap-15 md:rounded-rectangles md:border md:border-white/50 md:bg-background-blur md:px-25 md:py-12.5 md:backdrop-blur-md">
-        <div className="flex shrink-0 items-end gap-4 md:gap-6">
+      <Glass className="relative m-auto flex min-h-146 w-full max-w-7xl flex-col gap-10 border-0 bg-transparent p-0 backdrop-blur-none md:min-h-157 md:gap-15 md:rounded-rectangles md:border md:border-white/50 md:bg-background-blur md:px-25 md:py-12.5 md:backdrop-blur-md">
+        <div className="flex shrink-0 items-end gap-2 sm:gap-4 md:gap-6">
           <ButtonIcon
             variant="glass"
             icon={FiArrowLeft}
diff --git a/src/queries/groups.ts b/src/queries/groups.ts
index ad99fe23..9f58890f 100644
--- a/src/queries/groups.ts
+++ b/src/queries/groups.ts
@@ -10,8 +10,13 @@ export async function searchGroups(query: string, limit: number = 6) {
 }
 
 export async function getVisibleGroups(): Promise<VisibleGroup[]> {
-  const groups = await trpc.groups.search.getAll.query()
-  return groups.filter((g): g is VisibleGroup => !g.hide && !!g.link)
+  try {
+    const groups = await trpc.groups.search.getAll.query()
+    return groups.filter((g): g is VisibleGroup => !g.hide && !!g.link)
+  } catch (error) {
+    console.error(error)
+    return []
+  }
 }
 
 export async function getCoursesForLevel(school: string, level: string) {