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/faqs/page.tsx b/src/app/faqs/page.tsx
index e3dbc0f..e05776f 100644
--- a/src/app/faqs/page.tsx
+++ b/src/app/faqs/page.tsx
@@ -1,110 +1,17 @@
-"use client"
+import type { Metadata } from "next"
+import { FaqsTabs } from "@/components/faqs/faqs-tabs"
+import { Hero } from "@/components/ui/hero"
 
-import { FiBookOpen, FiDollarSign, FiEdit, FiFileText, FiSend } from "react-icons/fi"
-import AccordionList from "@/components/accordion-list"
-import CalloutItem from "@/components/callout-item"
-import TabsNavigation from "@/components/tabs"
-import { Tabs } from "@/components/tabs/tabs"
-import { TabsContent } from "@/components/tabs/tabs-content"
-
-const faqItems = [
-  {
-    value: "tab1",
-    label: "Lezioni",
-    content: "Content for Tab 1",
-    icon: FiBookOpen,
-  },
-  {
-    value: "tab2",
-    label: "Tasse",
-    content: "Content for Tab 2",
-    icon: FiDollarSign,
-  },
-  {
-    value: "tab3",
-    label: "Esami",
-    content: "Content for Tab 3",
-    icon: FiEdit,
-  },
-  {
-    value: "tab4",
-    label: "Piano di Studi",
-    content: "Content for Tab 4",
-    icon: FiFileText,
-  },
-  {
-    value: "tab5",
-    label: "Mobilitá Internazionale",
-    content: (
-      <div className="flex flex-col items-start py-4">
-        <h1 className="typo-title-large">Content for Tab 5</h1>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua.
-        </p>
-      </div>
-    ),
-    icon: FiSend,
-  },
-]
-
-const accordionItems = [
-  {
-    value: "item-1",
-    trigger: "Per le lauree le lezioni sono sospese? ",
-    content:
-      "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.",
-  },
-  {
-    value: "item-2",
-    trigger: "Per le lauree le lezioni sono sospese? ",
-    content:
-      "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.",
-  },
-  {
-    value: "item-3",
-    trigger: "Per le lauree le lezioni sono sospese? ",
-    content:
-      "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.",
-  },
-  {
-    value: "item-4",
-    trigger: "Per le lauree le lezioni sono sospese? ",
-    content:
-      "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.",
-  },
-  {
-    value: "item-5",
-    trigger: "Per le lauree le lezioni sono sospese? ",
-    content:
-      "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell’esercitatore.",
-  },
-]
+export const metadata: Metadata = {
+  title: "FAQs",
+  description: "Risposte chiare per vivere al meglio la community",
+}
 
 export default function FAQsPage() {
   return (
-    <main className="w-full">
-      <div className="mx-auto w-225 py-12">
-        <AccordionList items={accordionItems} defaultValue="item-1" />
-      </div>
-      <div className="mx-auto w-225 py-12">
-        <Tabs defaultValue="tab5" className="flex flex-col items-center">
-          <TabsNavigation items={faqItems} />
-          {faqItems.map((item) => (
-            <TabsContent value={item.value} key={item.value}>
-              {item.content}
-            </TabsContent>
-          ))}
-        </Tabs>
-      </div>
-      <div className="flex flex-col items-center py-12">
-        <CalloutItem
-          title="Non trovi ciò che stai cercando?"
-          href="/guides"
-          buttonText="Esplora le Guide"
-          className="max-w-4xl"
-        />
-      </div>
+    <main className="mx-auto flex min-h-screen w-full max-w-400 flex-col items-center justify-center gap-24 px-4 py-49">
+      <Hero title="FAQs" description="Risposte chiare per vivere al meglio la community" />
+      <FaqsTabs />
     </main>
   )
 }
diff --git a/src/components/callout-item/types.ts b/src/components/callout-item/types.ts
index e4d35f8..f78554d 100644
--- a/src/components/callout-item/types.ts
+++ b/src/components/callout-item/types.ts
@@ -1,6 +1,8 @@
+import type React from "react"
+
 export type CalloutItemProps = {
   title: string
   href: string
-  buttonText: string
+  buttonText: React.ReactNode
   className?: string
 }
diff --git a/src/components/faqs/faqs-tabs.tsx b/src/components/faqs/faqs-tabs.tsx
new file mode 100644
index 0000000..5d1af7c
--- /dev/null
+++ b/src/components/faqs/faqs-tabs.tsx
@@ -0,0 +1,137 @@
+"use client"
+
+import type { IconType } from "react-icons"
+import { FiBookOpen, FiDollarSign, FiEdit, FiFileText, FiSend } from "react-icons/fi"
+import AccordionList from "@/components/accordion-list"
+import type { AccordionListItem } from "@/components/accordion-list/types"
+import CalloutItem from "@/components/callout-item"
+import TabsNavigation from "@/components/tabs"
+import { Tabs } from "@/components/tabs/tabs"
+import { TabsContent } from "@/components/tabs/tabs-content"
+
+const faqItems: {
+  value: string
+  label: string
+  icon: IconType
+  accordionItems: AccordionListItem[]
+}[] = [
+  {
+    value: "tab1",
+    label: "Lezioni",
+    icon: FiBookOpen,
+    accordionItems: [
+      {
+        value: "item-1",
+        trigger: "Per le lauree le lezioni sono sospese?",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+    ],
+  },
+  {
+    value: "tab2",
+    label: "Tasse",
+    icon: FiDollarSign,
+    accordionItems: [
+      {
+        value: "item-1",
+        trigger: "Per le lauree le lezioni sono sospese?",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+    ],
+  },
+  {
+    value: "tab3",
+    label: "Esami",
+    icon: FiEdit,
+    accordionItems: [
+      {
+        value: "item-1",
+        trigger: "Per le lauree le lezioni sono sospese?",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+    ],
+  },
+  {
+    value: "tab4",
+    label: "Piano di Studi",
+    icon: FiFileText,
+    accordionItems: [
+      {
+        value: "item-1",
+        trigger: "Per le lauree le lezioni sono sospese?",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+    ],
+  },
+  {
+    value: "tab5",
+    label: "Mobilità Internazionale",
+    icon: FiSend,
+    accordionItems: [
+      {
+        value: "item-1",
+        trigger: "Per le lauree le lezioni sono sospese? ",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+      {
+        value: "item-2",
+        trigger: "Per le lauree le lezioni sono sospese? ",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+      {
+        value: "item-3",
+        trigger: "Per le lauree le lezioni sono sospese? ",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+      {
+        value: "item-4",
+        trigger: "Per le lauree le lezioni sono sospese? ",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+      {
+        value: "item-5",
+        trigger: "Per le lauree le lezioni sono sospese? ",
+        content:
+          "Spesso, la prima settimana, i Professori utilizzano le ore destinate alle esercitazioni per qualche ora di lezione in più: saranno quindi i docenti a specificare come verranno utilizzate queste ore. Dunque, le esercitazioni non sono da considerarsi annullate, salvo diversa comunicazione da parte del docente o dell'esercitatore.",
+      },
+    ],
+  },
+]
+
+export function FaqsTabs() {
+  return (
+    <div className="mx-auto flex w-full max-w-255 flex-col gap-68 sm:gap-79">
+      <Tabs defaultValue="tab5" className="flex w-full flex-col items-center">
+        <TabsNavigation
+          items={faqItems}
+          className="max-md:-mx-2 mb-19 max-md:w-[calc(100%+1rem)] max-md:rounded-none"
+        />
+        {faqItems.map((item) => (
+          <TabsContent value={item.value} key={item.value} className="w-full min-w-0">
+            <AccordionList items={item.accordionItems} defaultValue={item.accordionItems[0]?.value} />
+          </TabsContent>
+        ))}
+      </Tabs>
+
+      <CalloutItem
+        title="Non trovi ciò che stai cercando?"
+        href="/guides"
+        buttonText={
+          <>
+            <span className="sm:hidden">Guide</span>
+            <span className="hidden sm:inline">Esplora le Guide</span>
+          </>
+        }
+        className="w-full"
+      />
+    </div>
+  )
+}
diff --git a/src/components/header/constants.ts b/src/components/header/constants.ts
index 38a1e4f..d65fef6 100644
--- a/src/components/header/constants.ts
+++ b/src/components/header/constants.ts
@@ -8,7 +8,7 @@ export const headerMenuItems: HeaderMenuItem[] = [
       { title: "Materials", href: "#", icon: FiChevronRight },
       { title: "Guides", href: "#", icon: FiChevronRight },
       { title: "Computer Recs", href: "#", icon: FiChevronRight },
-      { title: "FAQs", href: "#", icon: FiChevronRight },
+      { title: "FAQs", href: "/faqs", icon: FiChevronRight },
       { title: "Rankings", href: "#", icon: FiArrowUpRight },
       { title: "Tol Project", href: "#", icon: FiArrowUpRight },
     ],
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/tabs/tabs-list.tsx b/src/components/tabs/tabs-list.tsx
index 804ef07..5a8a09c 100644
--- a/src/components/tabs/tabs-list.tsx
+++ b/src/components/tabs/tabs-list.tsx
@@ -6,15 +6,23 @@ import { Glass } from "../glass"
 
 export function TabsList({ className, children, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
   return (
-    <TabsPrimitive.List data-slot="tabs-list" {...props}>
+    <div className="w-full sm:flex sm:justify-center">
       <Glass
         className={cn(
-          "inline-flex items-center gap-2 rounded-3xl border-white/50 bg-background-blur p-2.5 text-card-foreground",
+          "scroll-fade-x w-full overflow-hidden rounded-3xl border-white/50 bg-background-blur px-0 py-2.5 text-card-foreground sm:w-fit",
           className
         )}
       >
-        {children}
+        <div className="overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+          <TabsPrimitive.List
+            data-slot="tabs-list"
+            className="flex min-w-max items-center gap-2 px-2.5 max-md:px-10"
+            {...props}
+          >
+            {children}
+          </TabsPrimitive.List>
+        </div>
       </Glass>
-    </TabsPrimitive.List>
+    </div>
   )
 }
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/item.tsx b/src/components/ui/item.tsx
index 9ee61ab..6e9fe15 100644
--- a/src/components/ui/item.tsx
+++ b/src/components/ui/item.tsx
@@ -27,7 +27,13 @@ function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 function ItemTitle({ className, ...props }: React.ComponentProps<"p">) {
-  return <p data-slot="item-title" className={cn("typo-title-medium text-blue-secondary", className)} {...props} />
+  return (
+    <p
+      data-slot="item-title"
+      className={cn("typo-label-small sm:typo-title-medium text-blue-secondary", className)}
+      {...props}
+    />
+  )
 }
 
 function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 2086df8..2560003 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -31,3 +31,11 @@
     margin-right: 0px !important;
   }
 }
+
+@media (max-width: 767px) {
+  /* max-md */
+  .scroll-fade-x {
+    mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 36px), transparent);
+    -webkit-mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent);
+  }
+}