diff --git a/components.json b/components.json
new file mode 100644
index 0000000..c5d91b4
--- /dev/null
+++ b/components.json
@@ -0,0 +1,16 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"tailwind": {
+		"css": "src/app.css",
+		"baseColor": "slate"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks",
+		"lib": "$lib"
+	},
+	"typescript": true,
+	"registry": "https://shadcn-svelte.com/registry"
+}
diff --git a/src/lib/components/UI/Modal.svelte b/src/lib/components/UI/Modal.svelte
new file mode 100644
index 0000000..1c3953e
--- /dev/null
+++ b/src/lib/components/UI/Modal.svelte
@@ -0,0 +1,88 @@
+<script>
+	let { showModal = $bindable(), header, children } = $props();
+
+	let dialog = $state(); // HTMLDialogElement
+
+	$effect(() => {
+		if (showModal) dialog.showModal();
+	});
+</script>
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
+<dialog
+	bind:this={dialog}
+	onclose={() => (showModal = false)}
+	onclick={(e) => { if (e.target === dialog) dialog.close(); }}
+	class="bg-green-600 text-white w-90vw lg:w-[70vw]"
+>
+	<div>
+		<div class="flex items-center justify-end">
+
+			<button autofocus onclick={() => dialog.close()}
+							class="border border-solid px-4 py-1 rounded-md hover:bg-green-900 transition ease-in-out">close
+			</button>
+		</div>
+		<h2 class="font-semibold text-3xl py-4 mb-10">
+			{@render header?.()}
+		</h2>
+		<div class="space-y-10">
+			{@render children?.()}
+		</div>
+		<hr />
+		<!-- svelte-ignore a11y_autofocus -->
+	</div>
+
+</dialog>
+
+<style>
+    dialog {
+        /*width: 70vw;*/
+        border-radius: 0.8em;
+        border: none;
+        padding: 0;
+
+    }
+
+    dialog::backdrop {
+        background: rgba(0, 0, 0, 0.3);
+    }
+
+    @media screen and (min-width: 600px) {
+        dialog > div {
+            padding: 4rem;
+        }
+    }
+
+    dialog > div {
+        padding: 1rem;
+    }
+
+    dialog[open] {
+        animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+
+    @keyframes zoom {
+        from {
+            transform: scale(0.95);
+        }
+        to {
+            transform: scale(1);
+        }
+    }
+
+    dialog[open]::backdrop {
+        animation: fade 0.2s ease-out;
+    }
+
+    @keyframes fade {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
+
+    button {
+        display: block;
+    }
+</style>
diff --git a/src/lib/components/UI/dialog/dialog-close.svelte b/src/lib/components/UI/dialog/dialog-close.svelte
new file mode 100644
index 0000000..840b2f6
--- /dev/null
+++ b/src/lib/components/UI/dialog/dialog-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {...restProps} />
diff --git a/src/lib/components/UI/dialog/dialog-content.svelte b/src/lib/components/UI/dialog/dialog-content.svelte
new file mode 100644
index 0000000..99cc73b
--- /dev/null
+++ b/src/lib/components/UI/dialog/dialog-content.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import XIcon from "@lucide/svelte/icons/x";
+	import type { Snippet } from "svelte";
+	import * as Dialog from "./index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		showCloseButton = true,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: DialogPrimitive.PortalProps;
+		children: Snippet;
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<Dialog.Portal {...portalProps}>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={cn(
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close
+				class="ring-offset-background focus:ring-ring rounded-xs focus:outline-hidden absolute right-4 top-4 opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+			>
+				<XIcon />
+				<span class="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</Dialog.Portal>
diff --git a/src/lib/components/UI/dialog/dialog-description.svelte b/src/lib/components/UI/dialog/dialog-description.svelte
new file mode 100644
index 0000000..3845023
--- /dev/null
+++ b/src/lib/components/UI/dialog/dialog-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="dialog-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/UI/dialog/dialog-footer.svelte b/src/lib/components/UI/dialog/dialog-footer.svelte
new file mode 100644
index 0000000..e7ff446
--- /dev/null
+++ b/src/lib/components/UI/dialog/dialog-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-footer"
+	class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/UI/dialog/dialog-header.svelte b/src/lib/components/UI/dialog/dialog-header.svelte
new file mode 100644
index 0000000..fc90cd9
--- /dev/null
+++ b/src/lib/components/UI/dialog/dialog-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-header"
+	class={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/UI/dialog/dialog-overlay.svelte b/src/lib/components/UI/dialog/dialog-overlay.svelte
new file mode 100644
index 0000000..f81ad83
--- /dev/null
+++ b/src/lib/components/UI/dialog/dialog-overlay.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	data-slot="dialog-overlay"
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/src/lib/components/UI/dialog/dialog-title.svelte b/src/lib/components/UI/dialog/dialog-title.svelte
new file mode 100644
index 0000000..067e55e
--- /dev/null
+++ b/src/lib/components/UI/dialog/dialog-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+	bind:ref
+	data-slot="dialog-title"
+	class={cn("text-lg font-semibold leading-none", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/UI/dialog/dialog-trigger.svelte b/src/lib/components/UI/dialog/dialog-trigger.svelte
new file mode 100644
index 0000000..9d1e801
--- /dev/null
+++ b/src/lib/components/UI/dialog/dialog-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {...restProps} />
diff --git a/src/lib/components/UI/dialog/index.ts b/src/lib/components/UI/dialog/index.ts
new file mode 100644
index 0000000..dce1d9d
--- /dev/null
+++ b/src/lib/components/UI/dialog/index.ts
@@ -0,0 +1,37 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+
+import Title from "./dialog-title.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+import Trigger from "./dialog-trigger.svelte";
+import Close from "./dialog-close.svelte";
+
+const Root = DialogPrimitive.Root;
+const Portal = DialogPrimitive.Portal;
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose,
+};
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..55b3a91
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,13 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, "child"> : T;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, "children"> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 26116fc..dd5d9a1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -12,8 +12,12 @@
 	import { languageTag } from '$lib/paraglide/runtime';
 	import { fly } from 'svelte/transition';
 	import { ChartColumnIncreasing, Sprout, CircleDollarSign, Shield, RadioTower, Route } from '@lucide/svelte';
-
+	import Modal from '$lib/components/UI/Modal.svelte';
 	// let submittingEmail = $state(false);
+	let showModalAffordable = $state(false);
+	let showModalService = $state(false);
+	let showModalHardware = $state(false);
+	let showModalCoverage = $state(false);
 
 	let loaded = $state(true); // Set to true since we no longer need to wait for canvas initialization
 </script>
@@ -78,7 +82,8 @@
 
 
 <!-- Solutions Section -->
-<section id="solutions" class="relative bg-gray-100 py-20 bg-gradient-to-t from-white to-blue-300" style="overflow: hidden;">
+<section id="solutions" class="relative bg-gray-100 py-20 bg-gradient-to-t from-white to-blue-300"
+				 style="overflow: hidden;">
 	<div class="container relative z-10 mx-auto text-center ">
 		<h2 class="text-3xl font-bold">{m.home_solutions_title()}</h2>
 		<p class="mt-4">{m.home_solutions_subtitle()}</p>
@@ -124,30 +129,94 @@
 <section class="py-20 bg-[#cfecff]">
 	<h2 class="text-6xl font-semibold p-10">Why <span class="text-green-500">Us</span>?</h2>
 	<div class="flex flex-col lg:flex-row items-center justify-between lg:px-12 px-4 space-y-10 lg:space-y-0">
-		<div
-			class="bg-emerald-900 text-white lg:w-1/3 lg:h-[45rem] lg:rounded-l-xl lg:rounded-none rounded-md text-center items-center flex flex-col justify-center space-y-12 lg:space-y-20 py-20 px-8">
+		<button onclick={() =>(showModalAffordable = true)}
+						class="bg-emerald-900 text-white lg:w-1/3 lg:h-[45rem] lg:rounded-l-xl lg:rounded-none rounded-md text-center items-center flex flex-col justify-center space-y-12 lg:space-y-20 py-20 px-8 hover:-translate-y-10 transition ease-in-out">
 			<p class="text-4xl font-semibold">Affordable Pricing</p>
 			<CircleDollarSign size={150} />
-			<p>Enjoy cost-effective solutions with transparent pricing, designed to deliver exceptional value compared to industry standards.</p>
-		</div>
-		<div
-			class="bg-green-500 text-white lg:w-1/3 lg:h-[45rem] text-center items-center rounded-md lg:rounded-none flex flex-col justify-center space-y-12 lg:space-y-20 py-20 px-8">
+			<p>Enjoy cost-effective solutions with transparent pricing, designed to deliver exceptional value compared to
+				industry standards.</p>
+		</button>
+		<Modal bind:showModal={showModalAffordable}>
+			{#snippet header()}
+				Affordable Pricing
+			{/snippet}
+			{#snippet children()}
+				<CircleDollarSign size={100} />
+				<p>Our pricing model is designed with farmers in mind, offering flexible plans that scale with your needs.
+					Whether you're managing a small family farm or a large agricultural enterprise, our IoT crop monitoring
+					solutions provide exceptional value without hidden costs. We offer straightforward subscription tiers,
+					one-time purchase options for hardware, and no long-term contracts, ensuring you only pay for what you need.
+					Compared to industry standards, our solutions deliver premium features at a fraction of the cost, empowering
+					you to maximize yields while minimizing expenses.</p>
+				<img src="https://images.unsplash.com/photo-1628282928695-29aaa1536c11?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Stack of coins representing affordable pricing" class="mt-4 w-full h-auto rounded-xl" />
+			{/snippet}
+		</Modal>
+		<button onclick={() =>(showModalService = true)}
+						class="bg-green-500 text-white lg:w-1/3 lg:h-[45rem] text-center items-center rounded-md lg:rounded-none flex flex-col justify-center space-y-12 lg:space-y-20 py-20 px-8 hover:-translate-y-10 transition ease-in-out">
 			<p class="text-4xl font-semibold">End-to-End Service</p>
 			<Route size={150} />
-			<p>Experience seamless installation and setup at your location, ensuring a fully operational product from the moment we complete the job.</p>
-		</div>
-		<div
-			class="bg-emerald-900 text-white lg:w-1/3 lg:h-[45rem] text-center items-center rounded-md lg:rounded-none flex flex-col justify-center space-y-12 lg:space-y-20 py-20 px-8">
+			<p>Experience seamless installation and setup at your location, ensuring a fully operational product from the
+				moment we complete the job.</p>
+		</button>
+		<Modal bind:showModal={showModalService}>
+			{#snippet header()}
+				End-to-End Service
+			{/snippet}
+			{#snippet children()}
+				<Route size={100} />
+				<p>Our end-to-end service ensures your IoT crop monitoring system is up and running with minimal effort on your
+					part. From initial consultation to final setup, our expert team handles everything—site assessment, hardware
+					installation, software configuration, and system testing. We provide on-site training to ensure your team is
+					confident in using the system. Post-installation, our dedicated support team is available 24/7 to address any
+					questions or issues, guaranteeing a hassle-free experience and a fully operational solution tailored to your
+					farm's unique needs.</p>
+				<img src="https://images.unsplash.com/photo-1581091226825-a6a2a5aee158" alt="Technician working on equipment for end-to-end service" class="mt-4 w-full h-auto rounded-xl" />
+			{/snippet}
+		</Modal>
+		<button onclick={() =>(showModalHardware = true)}
+						class="bg-emerald-900 text-white lg:w-1/3 lg:h-[45rem] text-center items-center rounded-md lg:rounded-none flex flex-col justify-center space-y-12 lg:space-y-20 py-20 px-8 hover:-translate-y-10 transition ease-in-out">
 			<p class="text-4xl font-semibold">Long Lasting Hardware</p>
 			<Shield size={150} />
-			<p>Benefit from durable, high-quality hardware built to withstand the test of time, minimizing maintenance and ensuring reliable performance.</p>
-		</div>
-		<div
-			class="bg-green-500 text-white lg:w-1/3 lg:h-[45rem] lg:rounded-r-xl lg:rounded-none rounded-md text-center items-center flex flex-col justify-center space-y-12 lg:space-y-20 py-20 px-8">
+			<p>Benefit from durable, high-quality hardware built to withstand the test of time, minimizing maintenance and
+				ensuring reliable performance.</p>
+		</button>
+		<Modal bind:showModal={showModalHardware}>
+			{#snippet header()}
+				Long Lasting Hardware
+			{/snippet}
+			{#snippet children()}
+				<Shield size={100} />
+				<p>Our IoT devices are engineered for durability and reliability in the harshest agricultural environments.
+					Constructed with weather-resistant materials, our sensors and monitoring equipment are designed to endure
+					extreme temperatures, moisture, and dust, ensuring consistent performance year-round. With a focus on
+					longevity, our hardware requires minimal maintenance, reducing downtime and operational costs. Each device
+					undergoes rigorous testing to meet the highest quality standards, providing you with a dependable solution
+					that supports your farm’s productivity for years to come.</p>
+				<img src="https://images.unsplash.com/photo-1516321497487-e288fb19713f" alt="Close-up of durable IoT hardware components" class="mt-4 w-full h-auto rounded-xl" />
+			{/snippet}
+		</Modal>
+		<button onclick={() =>(showModalCoverage = true)}
+						class="bg-green-500 text-white lg:w-1/3 lg:h-[45rem] lg:rounded-r-xl lg:rounded-none rounded-md text-center items-center flex flex-col justify-center space-y-12 lg:space-y-20 py-20 px-8 hover:-translate-y-10 transition ease-in-out">
 			<p class="text-4xl font-semibold">The Best Signal Coverage</p>
 			<RadioTower size={150} />
-			<p>Achieve superior connectivity with our advanced systems, delivering unmatched signal coverage and powered by long-lasting, low-maintenance batteries.</p>
-		</div>
+			<p>Achieve superior connectivity with our advanced systems, delivering unmatched signal coverage and powered by
+				long-lasting, low-maintenance batteries.</p>
+		</button>
+		<Modal bind:showModal={showModalCoverage}>
+			{#snippet header()}
+				The Best Signal Coverage
+			{/snippet}
+			{#snippet children()}
+				<RadioTower size={100} />
+				<p>Our IoT crop monitoring systems leverage cutting-edge connectivity technology to ensure seamless data
+					transmission across your entire farm, no matter the size or terrain. With advanced signal amplification and
+					low-power wide-area network (LPWAN) technology, our devices provide unmatched coverage, even in remote or
+					challenging environments. Powered by long-lasting, low-maintenance batteries, our systems minimize the need
+					for frequent replacements, ensuring continuous monitoring and real-time insights into soil health, moisture
+					levels, and crop conditions, all accessible from your smartphone or computer.</p>
+				<img src="https://images.unsplash.com/photo-1548244250-9aa08b58f204?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Radio tower ensuring superior signal coverage" class="mt-4 w-full h-auto rounded-xl" />
+			{/snippet}
+		</Modal>
 	</div>
 </section>