diff --git a/themes/default/views/home.blade.php b/themes/default/views/home.blade.php
index b178a56fe..a2d922adc 100644
--- a/themes/default/views/home.blade.php
+++ b/themes/default/views/home.blade.php
@@ -1,41 +1,81 @@
-<div>
-    <div class="flex flex-col gap-6">
-        <div class="mx-auto container bg-background-secondary p-4 rounded-md">
-            <article class="prose dark:prose-invert max-w-full">
-                {!! Str::markdown(theme('home_page_text', 'Welcome to Paymenter'), [
-                'allow_unsafe_links' => false,
-                'renderer' => [
-                    'soft_break' => "<br>"
-                ]]) !!}
-            </article>
+<style>
+/* Lightweight raw CSS overrides for the home page only */
+.hero-gradient{background:linear-gradient(135deg,#171717 0%,#111827 100%)}
+.icon-box{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border:1px solid rgba(255,255,255,.08);border-radius:.75rem;background:rgba(255,255,255,.03);transition:all .3s ease-in-out}
+.icon-box:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.15)}
+.icon-box svg{width:22px;height:22px}
+.announcements-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:.75rem;padding:1.25rem;margin-top:2rem}
+.announcements-card h3{margin-bottom:1rem;font-weight:600;font-size:1.125rem}
+.announcements-item{padding:.5rem 0;border-bottom:1px dashed rgba(255,255,255,.08)}
+.announcements-item:last-child{border-bottom:none}
+</style>
+
+<section class="hero-gradient text-center py-16 md:py-24 text-white">
+    <div class="container mx-auto px-4">
+        <h1 class="text-4xl md:text-6xl font-extrabold mb-4 tracking-tight">Experience Powerful Hosting</h1>
+        <p class="text-lg md:text-xl max-w-2xl mx-auto opacity-80">Deploy, manage and scale your services effortlessly with real-time insights and a sleek client portal.</p>
+        <div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
+            <a href="#products" class="inline-block px-6 py-3 rounded-md bg-primary hover:bg-primary/90 text-white font-medium">Browse Products</a>
+            <a href="#features" class="inline-block px-6 py-3 rounded-md border border-white/20 hover:bg-white/10 font-medium">Portal Features</a>
         </div>
-        <div class="mx-auto container rounded-md grid md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
-            @foreach ($categories as $category)
-                <div class="flex flex-col bg-background-secondary hover:bg-background-secondary/80 border border-neutral p-4 rounded-lg">
-                    @if(theme('small_images', false))
-                        <div class="flex gap-x-3 items-center">
-                    @endif
-                    @if ($category->image)
-                        <img src="{{ Storage::url($category->image) }}" alt="{{ $category->name }}"
-                            class="rounded-md {{ theme('small_images', false) ? 'w-14 h-fit' : 'w-full object-cover object-center' }}">
-                    @endif
-                    <h2 class="text-xl font-bold">{{ $category->name }}</h2>
-                    @if(theme('small_images', false))
-                        </div>
-                    @endif
-                    @if(theme('show_category_description', true))
-                        <article class="mt-2 prose dark:prose-invert">
-                            {!! $category->description !!}
-                        </article>
-                    @endif
-                    <a href="{{ route('category.show', ['category' => $category->slug]) }}" wire:navigate class="mt-2">
-                        <x-button.primary>
-                            {{ __('general.view') }}
-                        </x-button.primary>
-                    </a>
+    </div>
+</section>
+
+<!-- Quick feature highlights -->
+<section id="features" class="container mx-auto px-4 -mt-20 mb-14 relative z-10">
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <div class="icon-box">
+            <x-ri-global-line class="text-primary" />
+            <span class="text-sm font-semibold">Full IPv4 / IPv6 Access</span>
+        </div>
+        <div class="icon-box">
+            <x-ri-router-line class="text-success" />
+            <span class="text-sm font-semibold">Live Network States</span>
+        </div>
+        <div class="icon-box">
+            <x-ri-shield-keyhole-line class="text-warning" />
+            <span class="text-sm font-semibold">Adjustable Firewall Rules</span>
+        </div>
+        <div class="icon-box">
+            <x-ri-speed-up-line class="text-info" />
+            <span class="text-sm font-semibold">Resource Graphs &amp; Metrics</span>
+        </div>
+    </div>
+</section>
+
+<!-- Category Showcase (products) -->
+<section id="products" class="container mx-auto px-4 mb-16">
+    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+        @foreach ($categories as $category)
+            <div class="bg-background-secondary border border-neutral/40 rounded-xl p-5 hover:shadow-xl transition shadow-md flex flex-col">
+                @if ($category->image)
+                    <img src="{{ Storage::url($category->image) }}" alt="{{ $category->name }}" class="rounded-lg w-full h-28 object-cover mb-4">
+                @endif
+                <h2 class="text-lg font-bold mb-2">{{ $category->name }}</h2>
+                @if(theme('show_category_description', true))
+                    <p class="text-sm opacity-80 flex-grow">{!! Str::words(strip_tags($category->description), 18) !!}</p>
+                @endif
+                <a href="{{ route('category.show', ['category' => $category->slug]) }}" wire:navigate class="mt-4 inline-block text-center px-4 py-2 rounded-md bg-primary text-white hover:bg-primary/90">{{ __('general.view') }}</a>
+            </div>
+        @endforeach
+    </div>
+</section>
+
+<!-- Announcements -->
+@php($announcements = \App\Models\Announcement::latest()->take(3)->get())
+@if($announcements->count())
+    <section class="container mx-auto px-4">
+        <div class="announcements-card">
+            <h3 class="flex items-center gap-2"><x-ri-megaphone-fill class="text-primary"/>Latest Announcements</h3>
+            @foreach($announcements as $note)
+                <div class="announcements-item flex justify-between items-center">
+                    <span>{!! $note->title !!}</span>
+                    <span class="text-xs opacity-60">{{ $note->created_at->format('M d, Y') }}</span>
                 </div>
             @endforeach
         </div>
-    </div>
-    {!! hook('pages.home') !!}
+    </section>
+@endif
+
+{!! hook('pages.home') !!}
 </div>