diff --git a/src/assets/images/index-3.png b/src/assets/images/index-3.png
new file mode 100644
index 0000000..3356746
Binary files /dev/null and b/src/assets/images/index-3.png differ
diff --git a/src/assets/images/index-4.png b/src/assets/images/index-4.png
new file mode 100644
index 0000000..77614f4
Binary files /dev/null and b/src/assets/images/index-4.png differ
diff --git a/src/assets/images/index-5.png b/src/assets/images/index-5.png
new file mode 100644
index 0000000..30759fb
Binary files /dev/null and b/src/assets/images/index-5.png differ
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ac88d69..0adb4bc 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,6 +6,9 @@ import Heading from '@/components/ui/Heading.astro';
 
 import index1 from '@/assets/images/index-1.png';
 import index2 from '@/assets/images/index-2.png';
+import index3 from '@/assets/images/index-3.png';
+import index4 from '@/assets/images/index-4.png';
+import index5 from '@/assets/images/index-5.png';
 ---
 
 <BaseLayout
@@ -84,6 +87,66 @@ import index2 from '@/assets/images/index-2.png';
 			</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 lg:py-24">
+		<div class="lg:flex-1">
+			<Image
+				class="mx-auto max-h-96 w-full rounded-xl shadow-lg"
+				src={index3}
+				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">
+				Docker Integration
+			</h2>
+			<p class="text-lg text-zinc-800 dark:text-zinc-300">
+				Te Docker integration ensures smooth deployment and scalability of your Astro.js 4 project.
+				Embrace containerization technology to streamline your development process and enhance
+				efficiency.
+			</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={index4}
+				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">
+				Tailwind CSS Styling
+			</h2>
+			<p class="text-lg text-zinc-800 dark:text-zinc-300">
+				Utilizing the power of Tailwind CSS, crafting visually appealing designs that are responsive
+				and user-friendly. Bring your vision to life with customizable styles that reflect your
+				brand identity.
+			</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 lg:py-24">
+		<div class="lg:flex-1">
+			<Image
+				class="mx-auto max-h-96 w-full rounded-xl shadow-lg"
+				src={index5}
+				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">
+				MDX Blog Setup
+			</h2>
+			<p class="text-lg text-zinc-800 dark:text-zinc-300">
+				Enhance your website's content management capabilities with MDX Blog integration. Set up an
+				MDX-powered blog for seamless content creation and management, empowering you to engage your
+				audience 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