diff --git a/src/app/page.tsx b/src/app/page.tsx
index ecc1240..7422510 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,22 +1,5 @@
-import { Users } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { ButtonWithIcon } from "@/components/ui/buttonWithIcon"
+import { Hero } from "@/components/home/hero"
 
 export default function Home() {
-  return (
-    <main className="container mx-auto px-4 py-8">
-      <h2 className="mb-4 typo-headline-large font-bold bg">Welcome to PoliNetwork</h2>
-      <p className="mb-4">
-        PoliNetwork is a student association dedicated to connecting and supporting students at Politecnico.
-      </p>
-      <div className="bg-red rounded-rectangles w-90 py-8 flex justify-center items-center flex-col gap-2">
-        <p className="text-text-accent-darkbg typo-body-medium">Test with figma variables</p>
-        <div className="bg-background-blur w-20 h-20 rounded-images" />
-        <ButtonWithIcon variant="primary" icon={Users} iconPosition="left" text="Diventa socio" />
-        <ButtonWithIcon variant="tertiary" icon={Users} iconPosition="right" text="Diventa socio" />
-        <ButtonWithIcon variant="tertiaryBlur" icon={Users} iconPosition="left" text="Diventa socio" />
-        <Button variant="link">Link</Button>
-      </div>
-    </main>
-  )
+  return <Hero />
 }
diff --git a/src/components/home/hero.tsx b/src/components/home/hero.tsx
new file mode 100644
index 0000000..57442c8
--- /dev/null
+++ b/src/components/home/hero.tsx
@@ -0,0 +1,42 @@
+import { Search, Send, UserPlus } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+
+export function Hero() {
+  return (
+    <main className="flex w-full justify-center px-4 sm:px-6">
+      <section className="flex min-h-[calc(100vh-var(--header-height))] w-full flex-col justify-between py-8 sm:py-12">
+        <div className="flex flex-1 flex-col items-center justify-center gap-10 text-center md:gap-16">
+          <h1 className="max-w-5xl text-text-primary typo-display-medium lg:typo-display-large">
+            Trova gruppi, risorse e supporto
+            <br className="hidden md:block" />
+            <span className="md:block">tra gli studenti del Polimi</span>
+          </h1>
+
+          <div className="flex w-full flex-col items-center gap-8 md:gap-16">
+            <Input
+              icon={<Search className="h-5 w-5" />}
+              type="text"
+              placeholder="Find your group"
+              aria-label="Find your group"
+              containerClassName="max-w-xl"
+              className="typo-body-medium"
+            />
+
+            <Button variant="primary" size="sm">
+              More groups
+              <Send />
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex justify-center md:justify-end">
+          <Button variant="tertiaryBlur" size="lg" className="text-blue-secondary">
+            <UserPlus />
+            Sei una matricola?
+          </Button>
+        </div>
+      </section>
+    </main>
+  )
+}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 731f4d9..e597cd5 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -22,7 +22,7 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
+        sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5 text-xs",
         lg: "h-10 px-6 has-[>svg]:px-4",
         icon: "size-9",
         "icon-sm": "size-8",