diff --git a/src/lib/components/UI/Header.svelte b/src/lib/components/UI/Header.svelte
index d6593a3..4e75dde 100644
--- a/src/lib/components/UI/Header.svelte
+++ b/src/lib/components/UI/Header.svelte
@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import CropWatchLogo from '$lib/images/favicon.svg';
 	import LanguagePicker from './LanguagePicker.svelte';
+
 	let mobileMenuOpen = $state(false);
 	let announcementVisible = $state(true);
 
@@ -27,6 +28,17 @@
 			document.removeEventListener('click', handleClickOutside);
 		};
 	});
+
+	function handleSectionClick(event) {
+		event.preventDefault();
+		const link = event.currentTarget;
+		const anchorId = new URL(link.href).hash.replace('#', '');
+		const anchor = document.getElementById(anchorId);
+		window.scrollTo({
+			top: anchor.offsetTop,
+			behavior: 'smooth'
+		});
+	}
 </script>
 
 <!-- Announcement/Utility Bar -->
@@ -45,7 +57,7 @@
 				<a
 					href="#contact"
 					class="ml-2 underline transition-all ease-in-out hover:translate-x-2 hover:no-underline"
-					>Learn more →</a
+				>Learn more →</a
 				>
 			</div>
 			<button onclick={closeAnnouncement} class="text-green-200 transition-colors hover:text-white">
@@ -63,7 +75,7 @@
 {/if}
 
 <!-- Utility Navigation Bar -->
-<div class="relative border-b border-slate-700/50 bg-blue-300 backdrop-blur-sm overflow-visible">
+<div class="relative border-b border-slate-700/50 bg-blue-300 backdrop-blur-sm overflow-visible z-20">
 	<div class="mx-auto max-w-6xl px-4 py-2">
 		<div class="flex items-center justify-between text-sm">
 			<!-- Left side - Quick links -->
@@ -98,6 +110,7 @@
 				</a>
 				<a
 					href="https://api.cropwatch.io/swagger"
+					target="_blank" rel="noopener noreferrer"
 					class="flex items-center gap-1 transition-colors hover:text-blue-700"
 				>
 					<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -118,7 +131,7 @@
 					<div class="h-2 w-2 animate-pulse rounded-full bg-green-400"></div>
 					<span class="text-xs">
 						<a href="https://stats.uptimerobot.com/1Z6H85HuHq" target="_blank"
-							>All Systems Operational</a
+						>All Systems Operational</a
 						>
 					</span>
 				</div>
@@ -130,10 +143,10 @@
 					<a
 						href="/contact-us"
 						class="rounded-lg bg-blue-300 px-2 py-1 text-xs transition-colors hover:bg-gradient-to-r hover:from-green-500 hover:to-emerald-500 hover:text-white sm:p-2"
-						>Email Us!</a
+					>Email Us!</a
 					>
 				</div>
-				<div class="relative z-[9999]">
+				<div class="relative z-20">
 					<LanguagePicker />
 				</div>
 			</div>
@@ -165,23 +178,10 @@
 		<ul class="hidden items-center gap-8 lg:flex">
 			<li class="group relative">
 				<a
-					href="#solutions"
+					href="#solutions" onclick={() => handleSectionClick}
 					class="relative flex items-center gap-1 rounded-lg px-4 py-2 font-medium text-white/80 backdrop-blur-sm transition-all duration-300 after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:-translate-x-1/2 after:bg-gradient-to-r after:from-green-500 after:to-emerald-500 after:transition-all after:duration-300 hover:-translate-y-0.5 hover:bg-green-500/10 hover:text-green-400 hover:after:w-4/5"
 				>
 					Solutions
-					<svg
-						class="h-4 w-4 transition-transform group-hover:rotate-180"
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M19 9l-7 7-7-7"
-						/>
-					</svg>
 				</a>
 			</li>
 			<li>
@@ -198,24 +198,25 @@
 					class="relative flex items-center gap-1 rounded-lg px-4 py-2 font-medium text-white/80 backdrop-blur-sm transition-all duration-300 after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:-translate-x-1/2 after:bg-gradient-to-r after:from-green-500 after:to-emerald-500 after:transition-all after:duration-300 hover:-translate-y-0.5 hover:bg-green-500/10 hover:text-green-400 hover:after:w-4/5"
 				>
 					Devices
-					<svg
-						class="h-4 w-4 transition-transform group-hover:rotate-180"
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M19 9l-7 7-7-7"
-						/>
-					</svg>
+					<!--					<svg-->
+					<!--						class="h-4 w-4 transition-transform group-hover:rotate-180"-->
+					<!--						fill="none"-->
+					<!--						stroke="currentColor"-->
+					<!--						viewBox="0 0 24 24"-->
+					<!--					>-->
+					<!--						<path-->
+					<!--							stroke-linecap="round"-->
+					<!--							stroke-linejoin="round"-->
+					<!--							stroke-width="2"-->
+					<!--							d="M19 9l-7 7-7-7"-->
+					<!--						/>-->
+					<!--					</svg>-->
 				</a>
 			</li>
 			<li>
 				<a
-					href="#"
+					href="https://api.cropwatch.io/swagger"
+					target="_blank" rel="noopener noreferrer"
 					class="relative rounded-lg px-4 py-2 font-medium text-white/80 backdrop-blur-sm transition-all duration-300 after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:-translate-x-1/2 after:bg-gradient-to-r after:from-green-500 after:to-emerald-500 after:transition-all after:duration-300 hover:-translate-y-0.5 hover:bg-green-500/10 hover:text-green-400 hover:after:w-4/5"
 				>
 					Resources
@@ -223,7 +224,7 @@
 			</li>
 			<li>
 				<a
-					href="#"
+					href="about-us"
 					class="relative rounded-lg px-4 py-2 font-medium text-white/80 backdrop-blur-sm transition-all duration-300 after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:-translate-x-1/2 after:bg-gradient-to-r after:from-green-500 after:to-emerald-500 after:transition-all after:duration-300 hover:-translate-y-0.5 hover:bg-green-500/10 hover:text-green-400 hover:after:w-4/5"
 				>
 					About
@@ -234,7 +235,7 @@
 		<!-- CTA Button -->
 		<div class="hidden items-center gap-3 md:flex">
 			<a
-				href="#"
+				href="/demo"
 				class="px-4 py-2 font-medium text-white/80 transition-colors hover:text-green-400"
 			>
 				Demo
@@ -264,11 +265,11 @@
 					class="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/20 to-transparent transition-transform duration-500 group-hover:translate-x-full"
 				></div>
 			</a>
-			
+
 			<!-- Mobile menu button -->
 			<button
 				onclick={toggleMobileMenu}
-				class="mobile-menu-btn rounded-lg p-2 text-white transition-colors hover:bg-white/10"
+				class="mobile-menu-btn rounded-lg p-2 text-white transition-colors hover:bg-white/10" aria-label="Toggle mobile menu"
 			>
 				<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 					<path
@@ -361,12 +362,12 @@
 {/if}
 
 <style>
-	@keyframes drift {
-		0% {
-			transform: translateX(0) translateY(0);
-		}
-		100% {
-			transform: translateX(-60px) translateY(-60px);
-		}
-	}
+    @keyframes drift {
+        0% {
+            transform: translateX(0) translateY(0);
+        }
+        100% {
+            transform: translateX(-60px) translateY(-60px);
+        }
+    }
 </style>
diff --git a/src/lib/components/UI/LanguagePicker.svelte b/src/lib/components/UI/LanguagePicker.svelte
index 3686521..f32e7b5 100644
--- a/src/lib/components/UI/LanguagePicker.svelte
+++ b/src/lib/components/UI/LanguagePicker.svelte
@@ -66,7 +66,7 @@
 	<!-- Dropdown menu -->
 	{#if dropdownOpen}
 		<div
-			class="absolute right-0 top-full mt-2 w-40 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 z-[9999]"
+			class="absolute right-0 top-full mt-2 w-40 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 z-10"
 		>
 			<div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
 				{#each languages as lang}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5a49bac..db694bc 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -8,17 +8,17 @@
 	import SAITO_IMAGE from '$lib/images/saito.jpg';
 	import LinkedParticles from '$lib/components/vendor/animated-lines';
 	import { onMount } from 'svelte';
-	import LineCarasol from '$lib/components/UI/Line-Carasol.svelte';
+	// import LineCarasol from '$lib/components/UI/Line-Carasol.svelte';
 	import * as m from '$lib/paraglide/messages.js';
 	import PriceCard from '$lib/components/UI/Price-Card.svelte';
 	import { languageTag } from '$lib/paraglide/runtime';
 	import { fly } from 'svelte/transition';
-	import { ChartColumnIncreasing, Sprout } from '@lucide/svelte';
+	import { ChartColumnIncreasing, Sprout, CircleDollarSign, Shield, RadioTower, Route } from '@lucide/svelte';
 
 	let canvas;
 	let ctx;
 	let lp;
-	let submittingEmail = $state(false);
+	// let submittingEmail = $state(false);
 
 	function resizeCanvas() {
 		const section = document.getElementById('solutions');
@@ -26,7 +26,8 @@
 		canvas.width = width;
 		canvas.height = height;
 	}
-	let loaded = $state(false)
+
+	let loaded = $state(false);
 
 	onMount(() => {
 		canvas = document.getElementById('lines');
@@ -45,6 +46,7 @@
 			lp.draw();
 			requestAnimationFrame(loop);
 		}
+
 		requestAnimationFrame(loop);
 		loaded = true;
 	});
@@ -88,26 +90,30 @@
 	<!-- Content -->
 	<div class="container relative mx-auto text-center px-10 space-y-10">
 		{#if loaded}
-		<h1 class="text-5xl font-bold text-white xl:text-6xl" transition:fly={{ y: 100, duration: 1000 }}>{m.home_hero_title()}</h1>
-		<p class="w-full bg-blue-300 rounded-lg mt-10 text-xl lg:mx-auto text-white-900 font-bold bg-opacity-70 p-4" transition:fly={{ y: 100, duration: 1000 , delay: 200 }}>
-			{m.home_hero_subtitle()}
-		</p>
-		<div class="mt-6 lg:w-1/2 lg:mx-auto pt-10" transition:fly={{ y: 100, duration: 1000 , delay: 500 }}>
-			<a href="/use-cases" class="bg-green-600 px-4 py-3 text-white text-lg rounded-md hover:bg-gray-200 flex justify-center">
-				{m.home_hero_button_label()} <ChartColumnIncreasing size={30} class="ml-2 "/>
-			</a>
-		</div>
-		<div class="mt-10">
-			<!-- If you add any hero image element here, consider adding explicit width/height and loading="lazy" if offscreen -->
-		</div>
+			<h1 class="text-5xl font-bold text-white xl:text-6xl"
+					transition:fly={{ y: 100, duration: 1000 }}>{m.home_hero_title()}</h1>
+			<p class="w-full bg-blue-300 rounded-lg mt-10 text-xl lg:mx-auto text-white-900 font-bold bg-opacity-70 p-4"
+				 transition:fly={{ y: 100, duration: 1000 , delay: 200 }}>
+				{m.home_hero_subtitle()}
+			</p>
+			<div class="mt-6 lg:w-1/2 lg:mx-auto pt-10" transition:fly={{ y: 100, duration: 1000 , delay: 500 }}>
+				<a href="/use-cases"
+					 class="bg-green-600 px-4 py-3 text-white text-lg rounded-md hover:bg-gray-200 flex justify-center">
+					{m.home_hero_button_label()}
+					<ChartColumnIncreasing size={30} class="ml-2 " />
+				</a>
+			</div>
+			<div class="mt-10">
+				<!-- If you add any hero image element here, consider adding explicit width/height and loading="lazy" if offscreen -->
+			</div>
 		{/if}
 	</div>
 </section>
 
 
 <!-- Solutions Section -->
-<section id="solutions" class="relative bg-gray-100 py-20" style="overflow: hidden;">
-	<canvas id="lines" class="absolute inset-0 z-0 h-full w-full filter"></canvas>
+<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>
@@ -141,8 +147,42 @@
 </section>
 <!--Underground Pause-->
 <section id="underground-img">
-	<div class="h-60 w-full bg-[url(/images/sensor-underground.png)] bg-contain relative lg:bg-cover lg:bg-fixed lg:bg-bottom lg:h-[30rem]">
-		<p class="font-semibold text-3xl px-4 text-green-500 absolute bottom-6 right-5 mix-blend-lighten flex items-center lg:text-6xl lg:bottom-20">Know your crops <Sprout color="white" size="30" class="animate-bounce"/></p>
+	<div
+		class="h-60 w-full bg-[url(/images/sensor-underground.png)] bg-contain relative lg:bg-cover lg:bg-fixed lg:bg-bottom lg:h-[30rem]">
+		<p
+			class="font-semibold text-3xl px-4 text-green-500 absolute bottom-6 right-5 mix-blend-lighten flex items-center lg:text-6xl lg:bottom-20">
+			Know your crops
+			<Sprout color="white" size="30" class="animate-bounce" />
+		</p>
+	</div>
+</section>
+<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">
+			<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 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 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 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>
 	</div>
 </section>
 
@@ -246,7 +286,7 @@
 			<sm>※1</sm>
 			{m.home_disclaimer_1()}
 			<a class="cursor-pointer font-bold text-blue-900 underline" href="https://discord.com/"
-				>Discord</a
+			>Discord</a
 			>
 		</li>
 	</ol>