diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
new file mode 100644
index 0000000..a944e89
--- /dev/null
+++ b/app/components/Hero.tsx
@@ -0,0 +1,68 @@
+import Image from "next/image";
+import { Navbar } from "./Navbar";
+
+export function Hero() {
+  return (
+    <section className="relative h-screen overflow-hidden bg-[#c5c8c9]">
+      {/* Background photo */}
+      <Image
+        src="/hero-bg.jpg"
+        alt="Harvey Specter"
+        fill
+        priority
+        className="object-cover object-[center_15%]"
+      />
+
+      {/* Backdrop blur band — desktop only */}
+      <div className="absolute hidden md:block backdrop-blur-[10px] bg-[rgba(217,217,217,0.01)] inset-x-0 h-[349px] top-[498px]" />
+
+      {/* Content */}
+      <div className="relative z-10 h-full flex flex-col px-4 md:px-8">
+        <Navbar />
+
+        {/* Desktop: spacer pushes hero text down */}
+        <div className="hidden md:block md:h-[240px] shrink-0" />
+
+        {/* Hero content — fills remaining space on mobile, fixed layout on desktop */}
+        <div className="flex-1 md:flex-none flex flex-col justify-between md:justify-start md:gap-0 pb-6 md:pb-0">
+
+          {/* Name block */}
+          <div className="flex flex-col items-center md:items-start w-full">
+            <div className="px-[18px] mb-[-15px]">
+              <span className="font-mono font-normal text-sm text-white mix-blend-overlay uppercase leading-[1.1]">
+                [ Hello I&apos;m ]
+              </span>
+            </div>
+            <h1
+              className="
+                text-white font-medium mix-blend-overlay capitalize text-center w-full
+                text-[96px] leading-[0.8] tracking-[-6.72px]
+                md:text-[198px] md:leading-[1.1] md:tracking-[-13.86px]
+              "
+            >
+              Harvey&nbsp;&nbsp;&nbsp;Specter
+            </h1>
+          </div>
+
+          {/* Description + CTA */}
+          <div className="flex md:justify-end w-full md:mt-4">
+            <div className="flex flex-col gap-[17px] items-start w-[294px]">
+              <p className="font-bold italic text-[#1f1f1f] text-sm tracking-[-0.035em] uppercase leading-[1.1]">
+                H.Studio is a{" "}
+                <span className="font-normal">full-service</span>
+                {" "}creative studio creating beautiful digital experiences and
+                products. We are an{" "}
+                <span className="font-normal">award winning</span>
+                {" "}desing and art group specializing in branding, web design
+                and engineering.
+              </p>
+              <button className="bg-black text-white font-medium text-sm tracking-[-0.035em] px-4 py-3 rounded-3xl hover:bg-neutral-800 transition-colors">
+                Let&apos;s talk
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
new file mode 100644
index 0000000..bc4e0e6
--- /dev/null
+++ b/app/components/Navbar.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { useState } from "react";
+
+const links = ["About", "Services", "Projects", "News", "Contact"];
+
+export function Navbar() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <nav className="relative z-10 flex items-center justify-between py-6">
+      <span className="font-semibold text-base tracking-[-0.04em] capitalize text-black">
+        H.Studio
+      </span>
+
+      {/* Desktop links */}
+      <div className="hidden md:flex items-center gap-14">
+        {links.map((link) => (
+          <a
+            key={link}
+            href={`#${link.toLowerCase()}`}
+            className="font-semibold text-base tracking-[-0.04em] text-black capitalize hover:opacity-70 transition-opacity"
+          >
+            {link}
+          </a>
+        ))}
+      </div>
+
+      {/* Desktop CTA */}
+      <button className="hidden md:flex items-center justify-center bg-black text-white font-medium text-sm tracking-[-0.035em] px-4 py-3 rounded-3xl hover:bg-neutral-800 transition-colors">
+        Let&apos;s talk
+      </button>
+
+      {/* Mobile hamburger */}
+      <button
+        className="md:hidden p-1"
+        onClick={() => setOpen(!open)}
+        aria-label="Toggle menu"
+      >
+        <img src="/menu.svg" alt="" className="w-6 h-6" />
+      </button>
+
+      {/* Mobile menu */}
+      {open && (
+        <div className="absolute top-full left-0 right-0 bg-white/95 backdrop-blur-sm py-6 flex flex-col gap-4 px-4 md:hidden">
+          {links.map((link) => (
+            <a
+              key={link}
+              href={`#${link.toLowerCase()}`}
+              className="font-semibold text-base tracking-[-0.04em] text-black capitalize"
+              onClick={() => setOpen(false)}
+            >
+              {link}
+            </a>
+          ))}
+          <button className="mt-2 self-start bg-black text-white font-medium text-sm tracking-[-0.035em] px-4 py-3 rounded-3xl">
+            Let&apos;s talk
+          </button>
+        </div>
+      )}
+    </nav>
+  );
+}
diff --git a/app/globals.css b/app/globals.css
index a2dc41e..f1addae 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -8,7 +8,7 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
+  --font-sans: var(--font-inter);
   --font-mono: var(--font-geist-mono);
 }
 
diff --git a/app/layout.tsx b/app/layout.tsx
index 976eb90..4e50b9a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,9 +1,9 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Inter, Geist_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const inter = Inter({
+  variable: "--font-inter",
   subsets: ["latin"],
 });
 
@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "H.Studio",
+  description: "A full-service creative studio",
 };
 
 export default function RootLayout({
@@ -25,7 +25,7 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      className={`${inter.variable} ${geistMono.variable} h-full antialiased`}
     >
       <body className="min-h-full flex flex-col">{children}</body>
     </html>
diff --git a/app/page.tsx b/app/page.tsx
index 99b551a..d481ba9 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,9 @@
+import { Hero } from "./components/Hero";
+
 export default function Home() {
   return (
-    <main className="flex min-h-screen items-center justify-center">
-      <h1 className="text-4xl font-bold">Hello Marco</h1>
+    <main>
+      <Hero />
     </main>
   );
 }
diff --git a/public/hero-bg.jpg b/public/hero-bg.jpg
new file mode 100644
index 0000000..4384816
Binary files /dev/null and b/public/hero-bg.jpg differ
diff --git a/public/menu.svg b/public/menu.svg
new file mode 100644
index 0000000..20431e7
--- /dev/null
+++ b/public/menu.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame">
+<path id="Vector" d="M3 18V16H21V18H3ZM3 13V11H21V13H3ZM3 8V6H21V8H3Z" fill="var(--fill-0, black)"/>
+</g>
+</svg>