diff --git a/src/assets/images/index-1.png b/src/assets/images/index-1.png
new file mode 100644
index 0000000..b7875c3
Binary files /dev/null and b/src/assets/images/index-1.png differ
diff --git a/src/assets/images/index-2.png b/src/assets/images/index-2.png
new file mode 100644
index 0000000..b43daa3
Binary files /dev/null and b/src/assets/images/index-2.png differ
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8dc8d5c..1bf87ff 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,11 +1,15 @@
 ---
+import { Image } from 'astro:assets';
 import { Icon } from 'astro-icon/components';
 import BaseLayout from '@/layouts/BaseLayout.astro';
 import Heading from '@/components/ui/Heading.astro';
+
+import index1 from '@/assets/images/index-1.png';
+import index2 from '@/assets/images/index-2.png';
 ---
 
 <BaseLayout title="Astro Deploy">
-	<div class="mx-auto px-4 pb-36 pt-24 sm:px-6 lg:px-8">
+	<div class="mx-auto px-4 pb-20 pt-28 sm:px-6 lg:px-8">
 		<Heading level={1} classes="text-center text-zinc-900 dark:text-zinc-200">
 			Deploy Your
 			<span
@@ -15,7 +19,7 @@ import Heading from '@/components/ui/Heading.astro';
 			Site!</Heading
 		>
 
-		<p class="mx-auto mt-5 max-w-3xl text-center text-lg text-zinc-900/70 dark:text-zinc-400">
+		<p class="mx-auto mt-6 max-w-3xl text-center text-lg text-zinc-900/70 dark:text-zinc-400">
 			Supercharge your website with the Astro Deploy boilerplate with Docker support for
 			out-of-this-world web experiences. Launch today!
 		</p>
@@ -28,4 +32,77 @@ import Heading from '@/components/ui/Heading.astro';
 			</a>
 		</div>
 	</div>
+	<div
+		class="mx-auto max-w-6xl px-8 py-12 text-base-900 dark:text-base-100 sm:px-6 lg:px-8 lg:py-16">
+		<Heading
+			level={2}
+			classes="max-w-3xl text-center mx-auto pb-2 bg-clip-text bg-gradient-to-r from-primary-700 to-primary-500 dark:from-primary-500 dark:to-primary-300 text-transparent">
+			Launch Stunning Websites Effortlessly with Astro Deploy
+		</Heading>
+		<p class="mx-auto mt-4 max-w-4xl text-center text-xl text-zinc-900/80 dark:text-zinc-400">
+			Empower your success with Astro Deploy. Leverage cutting-edge technologies for seamless
+			experiences.
+		</p>
+	</div>
+	<div
+		class="mx-auto flex max-w-7xl flex-col items-center gap-x-12 gap-y-8 px-8 py-16 lg:flex-row lg:py-24">
+		<div class="lg:flex-1">
+			<Image
+				class="mx-auto max-h-96 w-full rounded-xl shadow-lg"
+				src={index1}
+				alt="Abstract Tech"
+			/>
+		</div>
+		<div class="flex flex-col gap-y-4 lg:flex-1">
+			<h2 class="text-center text-3xl font-bold text-zinc-900 dark:text-zinc-100 lg:text-left">
+				Revolutionize Website Development
+			</h2>
+			<p class="text-lg text-zinc-800 dark:text-zinc-300">
+				Astro Deploy revolutionizes development with Astro.js 4 and Docker for scalable solutions.
+			</p>
+		</div>
+	</div>
+	<div
+		class="mx-auto flex max-w-7xl flex-col items-center gap-x-12 gap-y-8 px-8 py-16 lg:flex-row-reverse lg:py-24">
+		<div class="lg:flex-1">
+			<Image
+				class="mx-auto max-h-96 w-full rounded-xl shadow-lg"
+				src={index2}
+				alt="Abstract Tech"
+			/>
+		</div>
+		<div class="flex flex-col gap-y-4 lg:flex-1">
+			<h2 class="text-center text-3xl font-bold text-zinc-900 dark:text-zinc-100 lg:text-left">
+				Accelerate Website Development with Astro Deploy
+			</h2>
+			<p class="text-lg text-zinc-800 dark:text-zinc-300">
+				Astro Deploy expedites website development with pre-configured Astro.js boilerplate, Docker,
+				and Tailwind CSS, enabling businesses to launch their online presence swiftly and engage
+				customers effectively.
+			</p>
+		</div>
+	</div>
+	<div class="container relative mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-6xl">
+		<div class="absolute inset-0 -mx-2 my-6 rotate-2 -skew-y-1 rounded bg-gray-800 lg:my-20"></div>
+		<div
+			class="absolute left-6 top-3 size-12 rotate-45 -skew-y-3 rounded-full bg-primary-400 lg:left-6 lg:top-14">
+		</div>
+		<div
+			class="absolute -left-6 top-2 size-16 rotate-45 -skew-y-3 bg-primary-600 transition-all duration-500 hover:rounded-3xl lg:top-12">
+		</div>
+		<div class="relative flex flex-col items-center space-y-8 md:flex-row md:space-y-0">
+			<div class="py-5 text-center md:w-7/12 md:p-5 md:text-left">
+				<h2 class="mb-4 text-4xl font-black text-white">Deploy your site</h2>
+				<h3 class="text-xl leading-relaxed text-gray-300">Start building amazing sites, today.</h3>
+			</div>
+			<div class="grow md:p-5 md:text-center">
+				<a
+					href="https://github.com/deployn/astro-deploy"
+					class="inline-flex items-center justify-center space-x-2 rounded-full border border-primary-700 bg-primary-700 px-8 py-4 font-semibold leading-6 text-white hover:border-primary-600 hover:bg-primary-600 hover:text-white focus:ring focus:ring-primary-400 focus:ring-opacity-50 active:border-primary-700 active:bg-primary-700">
+					<span>Get Started</span>
+					<Icon name="line-md:chevron-right" class="size-3" />
+				</a>
+			</div>
+		</div>
+	</div>
 </BaseLayout>