diff --git a/app/page.tsx b/app/page.tsx
index aefd19396..6cd9b17f5 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,6 @@
 import { Carousel } from 'components/carousel';
 import { ThreeItemGrid } from 'components/grid/three-items';
+import Hero from 'components/hero';
 import Footer from 'components/layout/footer';
 import { Suspense } from 'react';
 
@@ -15,6 +16,7 @@ export const metadata = {
 export default async function HomePage() {
   return (
     <>
+      <Hero />
       <ThreeItemGrid />
       <Suspense>
         <Carousel />
diff --git a/components/hero.tsx b/components/hero.tsx
new file mode 100644
index 000000000..2b6869aa9
--- /dev/null
+++ b/components/hero.tsx
@@ -0,0 +1,27 @@
+import Link from 'next/link';
+import Navbar from './layout/navbar';
+
+export default function Hero() {
+  return (
+    <div className="relative min-h-screen">
+      <video
+        autoPlay
+        muted
+        loop
+        className="absolute left-0 top-0 z-0 h-full w-full object-cover"
+        src="/hero.mp4"
+      ></video>
+      <Navbar />
+      <Link href="search/blommor">
+        <div className="font-petrona absolute inset-0 flex h-full w-1/2 items-center justify-center text-5xl text-white">
+          Blommor
+        </div>
+      </Link>
+      <Link href="search/gront">
+        <div className="font-petrona absolute inset-0 left-1/2 flex h-full w-1/2 items-center justify-center text-5xl text-white">
+          Grönt
+        </div>
+      </Link>
+    </div>
+  );
+}
diff --git a/public/hero.mp4 b/public/hero.mp4
new file mode 100644
index 000000000..337e01ac4
Binary files /dev/null and b/public/hero.mp4 differ