diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 121ebb2..b303af4 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -10,12 +10,14 @@
             "dependencies": {
                 "@apollo/client": "^3.9.0-alpha.5",
                 "@apollo/experimental-nextjs-app-support": "^0.6.0",
+                "@gsap/react": "^2.1.0",
                 "@radix-ui/react-avatar": "^1.0.4",
                 "@radix-ui/react-dropdown-menu": "^2.0.6",
                 "@radix-ui/react-slot": "^1.0.2",
                 "@strapi/blocks-react-renderer": "^1.0.0",
                 "class-variance-authority": "^0.7.0",
                 "clsx": "^2.1.0",
+                "gsap": "^3.12.5",
                 "lucide-react": "^0.314.0",
                 "next": "14.1.0",
                 "next-themes": "^0.2.1",
@@ -32,6 +34,7 @@
                 "@graphql-codegen/client-preset": "^4.1.0",
                 "@graphql-typed-document-node/core": "^3.2.0",
                 "@iconify/react": "^4.1.1",
+                "@tailwindcss/typography": "^0.5.10",
                 "@types/node": "^20",
                 "@types/react": "^18",
                 "@types/react-dom": "^18",
@@ -3106,6 +3109,15 @@
                 "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
             }
         },
+        "node_modules/@gsap/react": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/@gsap/react/-/react-2.1.0.tgz",
+            "integrity": "sha512-pwdFXvOM5IsRZXpWTKkQoEjb3/iUjDCU1BCJDlE6pHgVjG+7Ep/7+sszUgqVZ2Jc0mR8gnhtDWyx5cQAT4kwQw==",
+            "dependencies": {
+                "gsap": "^3.12.4",
+                "react": ">=16"
+            }
+        },
         "node_modules/@humanwhocodes/config-array": {
             "version": "0.11.14",
             "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -4210,6 +4222,34 @@
                 "tslib": "^2.4.0"
             }
         },
+        "node_modules/@tailwindcss/typography": {
+            "version": "0.5.10",
+            "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.10.tgz",
+            "integrity": "sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==",
+            "dev": true,
+            "dependencies": {
+                "lodash.castarray": "^4.4.0",
+                "lodash.isplainobject": "^4.0.6",
+                "lodash.merge": "^4.6.2",
+                "postcss-selector-parser": "6.0.10"
+            },
+            "peerDependencies": {
+                "tailwindcss": ">=3.0.0 || insiders"
+            }
+        },
+        "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+            "version": "6.0.10",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+            "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+            "dev": true,
+            "dependencies": {
+                "cssesc": "^3.0.0",
+                "util-deprecate": "^1.0.2"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/@tootallnate/once": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -9281,6 +9321,11 @@
                 "graphql": ">=0.11 <=16"
             }
         },
+        "node_modules/gsap": {
+            "version": "3.12.5",
+            "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz",
+            "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ=="
+        },
         "node_modules/has-bigints": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -10540,6 +10585,18 @@
             "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
             "dev": true
         },
+        "node_modules/lodash.castarray": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+            "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+            "dev": true
+        },
+        "node_modules/lodash.isplainobject": {
+            "version": "4.0.6",
+            "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+            "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+            "dev": true
+        },
         "node_modules/lodash.merge": {
             "version": "4.6.2",
             "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index c797bb6..8861b68 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,12 +15,14 @@
     "dependencies": {
         "@apollo/client": "^3.9.0-alpha.5",
         "@apollo/experimental-nextjs-app-support": "^0.6.0",
+        "@gsap/react": "^2.1.0",
         "@radix-ui/react-avatar": "^1.0.4",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-slot": "^1.0.2",
         "@strapi/blocks-react-renderer": "^1.0.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
+        "gsap": "^3.12.5",
         "lucide-react": "^0.314.0",
         "next": "14.1.0",
         "next-themes": "^0.2.1",
@@ -37,6 +39,7 @@
         "@graphql-codegen/client-preset": "^4.1.0",
         "@graphql-typed-document-node/core": "^3.2.0",
         "@iconify/react": "^4.1.1",
+        "@tailwindcss/typography": "^0.5.10",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
diff --git a/frontend/public/images/recent-image.jpg b/frontend/public/images/recent-image.jpg
new file mode 100644
index 0000000..7df9c7a
Binary files /dev/null and b/frontend/public/images/recent-image.jpg differ
diff --git a/frontend/public/images/rocketLaunch.gif b/frontend/public/images/rocketLaunch.gif
new file mode 100644
index 0000000..697b588
Binary files /dev/null and b/frontend/public/images/rocketLaunch.gif differ
diff --git a/frontend/public/images/satellite.jpg b/frontend/public/images/satellite.jpg
new file mode 100644
index 0000000..2fb19e7
Binary files /dev/null and b/frontend/public/images/satellite.jpg differ
diff --git a/frontend/public/next.svg b/frontend/public/next.svg
deleted file mode 100644
index 5174b28..0000000
--- a/frontend/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/vercel.svg b/frontend/public/vercel.svg
deleted file mode 100644
index d2f8422..0000000
--- a/frontend/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file
diff --git a/frontend/src/app/favicon.ico b/frontend/src/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/frontend/src/app/favicon.ico and /dev/null differ
diff --git a/frontend/src/app/icon.svg b/frontend/src/app/icon.svg
new file mode 100644
index 0000000..e2b135f
--- /dev/null
+++ b/frontend/src/app/icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 36 36"><path fill="#99AAB5" d="M8.514 19.828L19.122 9.223l2.121 2.121L10.635 21.95z"/><path fill="#55ACEE" d="M8.515 29.728a2 2 0 0 1-2.828 0l-4.95-4.949a2 2 0 0 1 0-2.828L5.687 17a2 2 0 0 1 2.828 0l4.95 4.95a2 2 0 0 1 0 2.828zm16.262-16.263a1.998 1.998 0 0 1-2.827 0L17 8.515a2 2 0 0 1 0-2.828l4.951-4.95a2 2 0 0 1 2.828 0l4.949 4.95a2 2 0 0 1 .001 2.828z"/><path fill="#99AAB5" d="M12.404 10.283L10.99 6.04c-.448-1.342-1.415-1.415-2.122-.708L6.04 8.161c-.708.707-.635 1.674.707 2.122l4.243 1.414z"/><path fill="#CCD6DD" d="M17.708 21.949a2.002 2.002 0 0 1-2.829.001l-7.071-7.071a2 2 0 0 1 0-2.829l4.242-4.242a2 2 0 0 1 2.829 0l7.071 7.071c.78.781.78 2.047-.001 2.829z"/><path fill="#CCD6DD" d="M21.016 21.055c-1.952 1.953-4.802 2.269-6.364.708c-1.562-1.562.876-2.29 2.829-4.243c1.953-1.953 2.681-4.39 4.243-2.829c1.561 1.562 1.245 4.411-.708 6.364"/><path fill="#99AAB5" d="M27.96 20.182c-2.12-2.122-5.118-1.951-7.071 0c-1.952 1.954-2.121 4.95 0 7.071zm-2.828 2.829l2.121 3.535l-3.535-2.121z"/><path fill="#99AAB5" d="M27.813 27.106a.999.999 0 1 1-1.414-1.414a.999.999 0 1 1 1.414 1.414"/><path fill="#88C9F9" d="M4.27 18.416L5.686 17l7.779 7.777l-1.414 1.415zM17 5.686l1.414-1.414l7.778 7.778l-1.414 1.414zM.735 21.952l1.414-1.415l7.78 7.776l-1.414 1.414zm19.798-19.8L21.946.737l7.781 7.775l-1.413 1.414z"/><path fill="#99AAB5" d="M8.307 7.601a1 1 0 1 1-1.414-1.416A1 1 0 0 1 8.307 7.6"/><path fill="#FFAC33" d="m23.682 30.431l.002-.051a1 1 0 0 1 1.049-.949c.016.001 2.156.063 3.8-1.58c1.637-1.638 1.578-3.772 1.58-3.801a1 1 0 1 1 1.997-.1c.012.122.123 3.028-2.163 5.314c-2.288 2.287-5.191 2.17-5.314 2.164a1 1 0 0 1-.951-.997"/><path fill="#FFAC33" d="M24.238 33.989a.998.998 0 0 1 1.33-.943c.107.034 2.877.893 5.964-2.195c3.127-3.126 2.414-6.126 2.382-6.252a1.002 1.002 0 0 1 .716-1.216a.996.996 0 0 1 1.217.701c.046.17 1.077 4.205-2.9 8.181c-4.014 4.016-7.876 2.726-8.038 2.668a1 1 0 0 1-.671-.944"/></svg>
\ No newline at end of file
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index dd2929d..704f04f 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -31,7 +31,7 @@ export default function RootLayout({
                         disableTransitionOnChange
                     >
                         <Navbar />
-                        <main className="flex-grow p-5">{children}</main>
+                        <main className="flex-grow">{children}</main>
                         <Footer />
                     </ThemeProvider>
                 </ApolloWrapper>
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 2e06cdb..3047137 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,7 +1,131 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import ColoredSection from "@/components/ui/coloredSection";
+import Hero from "@/components/ui/hero";
+import Image from "next/image";
+import Link from "next/link";
+import { gsap } from "gsap";
+import { useGSAP } from "@gsap/react";
+
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { ScrollToPlugin } from "gsap/ScrollToPlugin";
+
+gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
+
 export default function Home() {
+    useGSAP(() => {
+        gsap.fromTo(
+            "#rocket",
+            { y: 100, rotation: 45, zIndex: 1 },
+            {
+                y: -200,
+                x: 300,
+                opacity: 1,
+                duration: 1,
+                scrollTrigger: {
+                    trigger: "#rocket",
+                    start: "top center",
+                    end: "bottom top",
+                    scrub: true,
+                },
+            },
+        );
+    });
+
+    function handleClick(): void {
+        gsap.to(window, { duration: 1, scrollTo: "#about-us" });
+    }
+
     return (
         <main>
-            <h1>Home</h1>
+            <Hero
+                id="intro-hero"
+                title={"SmallSatLab"}
+                description={"We launch satellites 🚀"}
+                buttonText={"About us"}
+                buttonLink=""
+                className="min-h-[calc(100vh-72px)] flex flex-col justify-center z-10"
+                handleClick={handleClick}
+            >
+                {/* eslint-disable-next-line @next/next/no-img-element */}
+                <img
+                    id="rocket"
+                    src="/images/rocketLaunch.gif"
+                    alt="rocket launching"
+                    className=""
+                />
+            </Hero>
+
+            <ColoredSection
+                id="about-us"
+                className="flex flex-col items-center py-12 px-8"
+            >
+                <div className="flex flex-col items-center text-center prose dark:prose-invert prose-img:rounded-xl">
+                    <h1>
+                        Empowering Space Exploration One Satellite at a Time
+                    </h1>
+
+                    <div className="relative w-[300px] h-[300px]">
+                        <Image
+                            alt="Satellite in orbit"
+                            src="/images/satellite.jpg"
+                            className="m-0 object-fill"
+                            layout="fill"
+                        />
+                    </div>
+                    <div className="flex flex-col gap-4 items-center col-span-2 lg:col-span-2">
+                        <div className=" self-center">
+                            <p>
+                                NTNU Small Satellite Lab is an initiative to
+                                strenghten the small satellite and space related
+                                activities at NTNU and make them more visible.
+                                At the lab, we have a group consisting of about
+                                ten PhD-students, two post.docs and many
+                                bachelor- and master students every semester.
+                                Physically, the lab consists of a concurrent
+                                design work space as well as an well-equiped
+                                ESD-safe area for development and testing of
+                                electronic and mechanical parts for payloads and
+                                platforms.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </ColoredSection>
+            <div className="pt-8 items-center text-center flex flex-col py-12 px-8">
+                <div className="prose dark:prose-invert">
+                    <h1 className="">Projects</h1>
+                    <p className="">
+                        The SmallSat Lab team is part of a variety of projects,
+                        a selection listed below. The main effort is on our two
+                        satellites; HYPSO-1 (launched January 2022) and HYPSO-2
+                        (expected to launch June 2024) - which you can read more
+                        about by visiting hypso.space. Activities and research
+                        topics include spacecraft- and systems engineering in an
+                        university setting, development of hyperspectral camera
+                        systems, onboard processing including autonomy and AI,
+                        communication infrastructure for small satellites and
+                        other satellite autonomous sensor platforms.
+                    </p>
+                    <Link href={"/projects"}>
+                        <Button id="">View more</Button>
+                    </Link>
+                </div>
+            </div>
+            <ColoredSection className="flex flex-col items-center py-12 px-8">
+                <div className="flex flex-col items-center text-center prose dark:prose-invert prose-img:rounded-xl">
+                    <h1 className="">Most recent picture</h1>
+                    <div className="relative w-[300px] h-[300px]">
+                        <Image
+                            alt="Satellite image of city"
+                            src="/images/recent-image.jpg"
+                            className="m-0"
+                            layout="fill"
+                            objectFit="cover"
+                        />
+                    </div>
+                </div>
+            </ColoredSection>
         </main>
     );
 }
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index 18d7efc..2691891 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -2,7 +2,7 @@ import Image from "next/image";
 
 export default function Footer() {
     return (
-        <footer className="p-4 bg-slate-700 dark:bg-slate-500 text-white flex flex-col items-center">
+        <footer className="p-4 bg-slate-700 text-white flex flex-col items-center">
             <div className="flex flex-row items-center justify-between w-full">
                 <div className="flex-1 flex justify-start">
                     <Image
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 18fbeee..7fca698 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -38,16 +38,20 @@ export default function Navbar() {
     };
 
     return (
-        <nav className="flex items-center justify-between p-4 bg-slate-700 dark:bg-slate-500 text-white w-full">
+        <nav className="flex items-center justify-between p-4 bg-slate-700 text-white w-full">
             <div className="flex-1">
                 <Link href="/">
-                    <Button
-                        variant={getButtonVariant("/")}
-                        className="m-0 p-0 pr-4"
-                    >
-                        <Icon icon="mdi-light:home" className="size-10" />
-                        Logo
-                    </Button>
+                    <h1 className="text-3xl font-bold flex flex-row">
+                        <Icon
+                            icon="twemoji:satellite"
+                            width="36"
+                            height="36"
+                            className="mr-2"
+                        />
+                        <span className="transition duration-300 underline decoration-transparent hover:decoration-white">
+                            SmallSatLab
+                        </span>
+                    </h1>
                 </Link>
             </div>
 
@@ -104,9 +108,17 @@ export default function Navbar() {
             <div className="flex-1 flex justify-end">
                 <Button onClick={toggleTheme} variant={"ghost"}>
                     {isLightTheme ? (
-                        <Icon icon="material-symbols:dark-mode" />
+                        <Icon
+                            icon="material-symbols:dark-mode"
+                            width="32"
+                            height="32"
+                        />
                     ) : (
-                        <Icon icon="material-symbols:light-mode" />
+                        <Icon
+                            icon="material-symbols:light-mode"
+                            width="32"
+                            height="32"
+                        />
                     )}
                 </Button>
             </div>
diff --git a/frontend/src/components/ui/coloredSection.tsx b/frontend/src/components/ui/coloredSection.tsx
new file mode 100644
index 0000000..88a6669
--- /dev/null
+++ b/frontend/src/components/ui/coloredSection.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+const ColoredSection = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("w-full bg-muted", className)} {...props} />
+));
+
+ColoredSection.displayName = "ColoredSection"; // Add display name
+
+export default ColoredSection;
diff --git a/frontend/src/components/ui/hero.tsx b/frontend/src/components/ui/hero.tsx
new file mode 100644
index 0000000..0453ca8
--- /dev/null
+++ b/frontend/src/components/ui/hero.tsx
@@ -0,0 +1,58 @@
+import Link from "next/link";
+import { Button } from "@components/ui/button";
+import { cn } from "@/lib/utils";
+import React from "react";
+
+interface HeroProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    description: string;
+    buttonLink: string;
+    buttonText: string;
+    handleClick: () => void;
+    className?: string;
+}
+
+const Hero = React.forwardRef<HTMLDivElement, HeroProps>(
+    (
+        {
+            title,
+            description,
+            buttonLink,
+            buttonText,
+            handleClick,
+            className,
+            children,
+            ...props
+        },
+        ref,
+    ) => (
+        <section
+            ref={ref}
+            {...props}
+            className={cn("w-full py-12 md:py-24 lg:py-32 xl:py-48", className)}
+        >
+            <div className="container px-4 md:px-6">
+                <div className="flex flex-col items-center space-y-4 text-center">
+                    <div className="space-y-2">
+                        <h1 className=" font-bold tracking-tighter text-6xl">
+                            {title}
+                        </h1>
+                        <p className="mx-auto max-w-[700px] text-gray-500 text-xl dark:text-gray-400">
+                            {description}
+                        </p>
+                    </div>
+                    <div className="space-x-4">
+                        <Link href={buttonLink}>
+                            <Button onClick={handleClick}>{buttonText}</Button>
+                        </Link>
+                    </div>
+                    {children}
+                </div>
+            </div>
+        </section>
+    ),
+);
+
+Hero.displayName = "Hero"; // Add display name
+
+export default Hero;
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index a23faa5..e23919a 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -74,7 +74,10 @@ const config = {
             },
         },
     },
-    plugins: [require("tailwindcss-animate")],
+    plugins: [
+        require("tailwindcss-animate"),
+        require("@tailwindcss/typography"),
+    ],
 } satisfies Config;
 
 export default config;