diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php
new file mode 100644
index 0000000..8826d9e
--- /dev/null
+++ b/app/Http/Controllers/HomeController.php
@@ -0,0 +1,11 @@
+<?php
+
+namespace App\Http\Controllers;
+
+class HomeController extends Controller
+{
+    public function __invoke()
+    {
+        return view('home');
+    }
+}
diff --git a/resources/css/app.css b/resources/css/app.css
index 3e6abea..8e565d6 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -7,5 +7,21 @@
 
 @theme {
     --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-        'Segoe UI Symbol', 'Noto Color Emoji';
+    'Segoe UI Symbol', 'Noto Color Emoji';
+
+    --color-primary-700: oklch(0.13 0.03 244);
+    --color-primary-600: oklch(0.22 0.03 257);
+    --color-accent-600: oklch(0.45 0.01 232);
+}
+
+@layer components{
+    @import "./button.css";
+
+    .wrapper {
+        @apply px-4 md:px-12
+    }
+
+    .card {
+        @apply bg-white rounded-lg p-4
+    }
 }
diff --git a/resources/css/button.css b/resources/css/button.css
new file mode 100644
index 0000000..7d9054c
--- /dev/null
+++ b/resources/css/button.css
@@ -0,0 +1,6 @@
+.ui-btn {
+    @apply px-4 py-2 rounded-lg font-medium
+}
+.ui-btn-neutral {
+    @apply bg-primary-600 text-white
+}
diff --git a/resources/views/components/hero.blade.php b/resources/views/components/hero.blade.php
new file mode 100644
index 0000000..f937c68
--- /dev/null
+++ b/resources/views/components/hero.blade.php
@@ -0,0 +1,48 @@
+<section class="hero py-30 bg-[#f5f5ff] wrapper">
+    <div class="grid xl:grid-cols-2 gap-y-10">
+
+        <!-- Left section -->
+        <div class="md:pr-23 flex flex-col justify-center space-y-4">
+            <h1 class="text-4xl sm:text-[4rem] font-black">
+                <p class="">
+                    Discover Trusted
+                    <br/>
+                    Deals &
+                    <br/>
+                    Recommendation
+                </p>
+            </h1>
+            <p class=" text-accent-600">
+                Find the best deals, services and places recommended by verified experts.
+                Connect with trusted brokers and discover opportunities you can count on.
+            </p>
+            <div class="mt-6 flex flex-col gap-4 md:flex-row">
+                <a href="" class="ui-btn ui-btn-neutral">Explore Deals</a>
+                <a href="" class="ui-btn ui-btn bg-white/80 border border-gray-300">Become a Broker</a>
+            </div>
+        </div>
+        <!-- Left section end -->
+
+        <!-- Right section -->
+        <div class="relative">
+            <div class="hero-image">
+                <img class="rounded-2xl shadow-lg " src="{{asset('storage/images/hero-image.webp')}}" alt="" />
+            </div>
+
+            <!-- Stats card, top right of the image -->
+            <div class="card shadow-xl absolute -top-5 -right-5">
+                <p class="text-3xl font-black text-[#8669ED]">10K+</p>
+                <p class="text-accent-600 text-xs">Active Deals</p>
+            </div>
+
+            <!-- Stats card, bottom left of the image -->
+            <div class="card shadow-xl absolute -bottom-5 -left-5">
+                <p class="text-3xl font-black text-[#0070EB]">500+</p>
+                <p class="text-accent-600 text-xs">Verified Brokers</p>
+            </div>
+
+        </div>
+        <!-- Right section end -->
+
+    </div>
+</section>
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
new file mode 100644
index 0000000..5b09944
--- /dev/null
+++ b/resources/views/components/layout.blade.php
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>{{ config('app.name', 'Laravel') }}</title>
+
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.bunny.net">
+    <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />
+
+    <!-- Styles / Scripts -->
+    @vite(['resources/css/app.css', 'resources/js/app.js'])
+
+</head>
+<body class="bg-[#FFFFFF text-[#1b1b18] flex  min-h-screen flex-col">
+    {{$slot}}
+</body>
+</html>
diff --git a/resources/views/components/nav-links.blade.php b/resources/views/components/nav-links.blade.php
new file mode 100644
index 0000000..07c1547
--- /dev/null
+++ b/resources/views/components/nav-links.blade.php
@@ -0,0 +1,4 @@
+@props(['link' => '', 'name' => ''])
+<li>
+    <a class="hover:underline" href="{{$link}}">{{$name}}</a>
+</li>
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
new file mode 100644
index 0000000..96a2477
--- /dev/null
+++ b/resources/views/components/navbar.blade.php
@@ -0,0 +1,19 @@
+<nav class="grid grid-cols-3 items-center wrapper py-6 shadow-xl">
+    <div class="logo">
+        <a href="" class="font-bold text-2xl">{{config('app.name')}}</a>
+    </div>
+
+    <div class="nav-links place-self-center">
+        <ul class="flex space-x-8 text-accent-600">
+            <x-nav-links :link="route('home')" name="Home" />
+            <x-nav-links :link="route('home')" name="Explore deals" />
+            <x-nav-links :link="route('home')" name="About" />
+            <x-nav-links :link="route('home')" name="Contact" />
+        </ul>
+    </div>
+
+    <div class="nav-buttons space-x-4 place-self-end font-medium">
+        <a href="">Login</a>
+        <a href="" class="ui-btn ui-btn-neutral">Register</a>
+    </div>
+</nav>
diff --git a/resources/views/home.blade.php b/resources/views/home.blade.php
new file mode 100644
index 0000000..132d116
--- /dev/null
+++ b/resources/views/home.blade.php
@@ -0,0 +1,4 @@
+<x-layout>
+    <x-navbar />
+    <x-hero />
+</x-layout>
diff --git a/routes/web.php b/routes/web.php
index 86a06c5..8e01cc8 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,7 +1,6 @@
 <?php
 
+use App\Http\Controllers\HomeController;
 use Illuminate\Support\Facades\Route;
 
-Route::get('/', function () {
-    return view('welcome');
-});
+Route::get('/', HomeController::class)->name('home');
