diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..13566b8
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/.idea/Cropwatch-website.iml b/.idea/Cropwatch-website.iml
new file mode 100644
index 0000000..24643cc
--- /dev/null
+++ b/.idea/Cropwatch-website.iml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml
new file mode 100644
index 0000000..5055868
--- /dev/null
+++ b/.idea/codeStyles/Project.xml
@@ -0,0 +1,63 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <HTMLCodeStyleSettings>
+      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
+    </HTMLCodeStyleSettings>
+    <JSCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </JSCodeStyleSettings>
+    <TypeScriptCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="Remove" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </TypeScriptCodeStyleSettings>
+    <VueCodeStyleSettings>
+      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
+      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
+    </VueCodeStyleSettings>
+    <codeStyleSettings language="HTML">
+      <option name="SOFT_MARGINS" value="100" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+        <option name="USE_TAB_CHARACTER" value="true" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="JavaScript">
+      <option name="SOFT_MARGINS" value="100" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+        <option name="USE_TAB_CHARACTER" value="true" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="TypeScript">
+      <option name="SOFT_MARGINS" value="100" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="2" />
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="TAB_SIZE" value="2" />
+        <option name="USE_TAB_CHARACTER" value="true" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="Vue">
+      <option name="SOFT_MARGINS" value="100" />
+      <indentOptions>
+        <option name="CONTINUATION_INDENT_SIZE" value="2" />
+        <option name="USE_TAB_CHARACTER" value="true" />
+      </indentOptions>
+    </codeStyleSettings>
+  </code_scheme>
+</component>
\ No newline at end of file
diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml
new file mode 100644
index 0000000..79ee123
--- /dev/null
+++ b/.idea/codeStyles/codeStyleConfig.xml
@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>
\ No newline at end of file
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 0000000..03d9549
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..a1da8a1
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/Cropwatch-website.iml" filepath="$PROJECT_DIR$/.idea/Cropwatch-website.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/prettier.xml b/.idea/prettier.xml
new file mode 100644
index 0000000..b0c1c68
--- /dev/null
+++ b/.idea/prettier.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myConfigurationMode" value="AUTOMATIC" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/package.json b/package.json
index 460ae97..2fbbff6 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
 	},
 	"dependencies": {
 		"@inlang/paraglide-sveltekit": "^0.15.5",
+		"@lucide/svelte": "^0.511.0",
 		"nodemailer": "^6.10.0",
 		"recaptcha-v3": "^1.11.3"
 	},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 74230ca..e1f1b39 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@inlang/paraglide-sveltekit':
         specifier: ^0.15.5
         version: 0.15.5(@sveltejs/kit@2.16.0(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.18.0)(vite@5.4.11(@types/node@22.10.7)))(svelte@5.18.0)(vite@5.4.11(@types/node@22.10.7)))
+      '@lucide/svelte':
+        specifier: ^0.511.0
+        version: 0.511.0(svelte@5.18.0)
       nodemailer:
         specifier: ^6.10.0
         version: 6.10.0
@@ -575,6 +578,11 @@ packages:
   '@lix-js/fs@2.2.0':
     resolution: {integrity: sha512-B9X3FjD8WmdG7tbA44JuniSO0KdKBWnjfxl8zpgrDCkavrp/GP7U0xxBkc0WgeeoHjQ/pkqq9VqtWB2kS9jIUg==}
 
+  '@lucide/svelte@0.511.0':
+    resolution: {integrity: sha512-aLCSPMUJmHlCuLXzXENXa4Z1NV2mN1iAZAFKk4bEbey+/MdsNlu+/DqwVkgW3Yvj6p8y8Vn5xZ2v9CLmPlA6Vw==}
+    peerDependencies:
+      svelte: ^5
+
   '@mapbox/node-pre-gyp@2.0.0-rc.0':
     resolution: {integrity: sha512-nhSMNprz3WmeRvd8iUs5JqkKr0Ncx46JtPxM3AhXes84XpSJfmIwKeWXRpsr53S7kqPkQfPhzrMFUxSNb23qSA==}
     engines: {node: '>=18'}
@@ -2898,6 +2906,10 @@ snapshots:
     dependencies:
       typescript: 5.2.2
 
+  '@lucide/svelte@0.511.0(svelte@5.18.0)':
+    dependencies:
+      svelte: 5.18.0
+
   '@mapbox/node-pre-gyp@2.0.0-rc.0':
     dependencies:
       consola: 3.4.0
diff --git a/src/lib/components/UI/Header.svelte b/src/lib/components/UI/Header.svelte
index 89de99f..cedadae 100644
--- a/src/lib/components/UI/Header.svelte
+++ b/src/lib/components/UI/Header.svelte
@@ -1,92 +1,239 @@
-<script lang="ts">
-	import CropWatchLogo from '$lib/images/favicon.svg';
-	import LanguagePicker from './LanguagePicker.svelte';
-	import * as m from '$lib/paraglide/messages.js';
-	let isMenuOpen = false;
+<script>
+  import { onMount } from 'svelte';
+  import CropWatchLogo from '$lib/images/favicon.svg';
+  let mobileMenuOpen = $state(false);
+  let announcementVisible = $state(true);
+
+  function toggleMobileMenu() {
+    mobileMenuOpen = !mobileMenuOpen;
+  }
+
+  function closeAnnouncement() {
+    announcementVisible = false;
+  }
+
+  // Close mobile menu when clicking outside
+  function handleClickOutside(event) {
+    if (!event.target.closest('.mobile-menu') && !event.target.closest('.mobile-menu-btn')) {
+      mobileMenuOpen = false;
+    }
+  }
+
+  onMount(() => {
+    document.addEventListener('click', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  });
 </script>
 
-<header class="sticky top-0 z-50 bg-[#cfecff] shadow-md">
-	<!-- Desktop & Tablet Header -->
-	<div class="container mx-auto flex items-center justify-between px-6 py-4">
-		<!-- Left: Logo and Site Name -->
-		<a href="/" class="flex flex-row items-center gap-2">
-			<img src={CropWatchLogo} alt="CropWatch Logo" class="h-10" width="40px" height="40px" />
-			<h1 class="text-xl font-bold">
-				CropWatch<sup><small>®</small></sup>
-			</h1>
-		</a>
-
-		<!-- Center: Navigation Menu Items (hidden on mobile) -->
-		<nav class="hidden flex-1 justify-center space-x-4 md:flex">
-			<!-- <a href="/" class="hover:text-blue-600">{m.header_home()}</a> -->
-			<!-- <a href="/about-us" class="hover:text-blue-600">About Us</a> -->
-			<!-- <a href="#pricing" class="hover:text-blue-600">Pricing</a> -->
-			<!-- <a href="/contact-us" class="hover:text-blue-600">{m.contact_us()}</a> -->
-		</nav>
-
-		<!-- Right: App Login Button and LanguagePicker (hidden on mobile) -->
-		<div class="hidden items-center gap-4 md:flex">
-			<a
-				href="https://app.cropwatch.io"
-				target="_blank"
-				rel="noopener"
-				class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
-			>
-				{m.app_login()}
-			</a>
-			<LanguagePicker />
-		</div>
-
-		<!-- Mobile: Hamburger Menu Button (shown on mobile only) -->
-		<div class="block md:hidden">
-			<button
-				onclick={() => (isMenuOpen = !isMenuOpen)}
-				aria-label="Toggle menu"
-				class="text-gray-700 focus:text-gray-900 focus:outline-none"
-			>
-				<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					{#if !isMenuOpen}
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M4 6h16M4 12h16M4 18h16"
-						/>
-					{:else}
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M6 18L18 6M6 6l12 12"
-						/>
-					{/if}
-				</svg>
-			</button>
-		</div>
-	</div>
-
-	<!-- Mobile Navigation Menu -->
-	{#if isMenuOpen}
-		<nav class="bg-white shadow-md md:hidden">
-			<div class="space-y-2 px-6 py-4 text-center">
-				<a href="#home" class="block hover:text-blue-600">{m.header_home()}</a>
-				<!-- <a href="about-us" class="block hover:text-blue-600">About Us</a> -->
-				<a href="solutions" class="block hover:text-blue-600">Solutions</a>
-				<!-- <a href="#pricing" class="block hover:text-blue-600">Pricing</a> -->
-				<a href="contact-us" class="block hover:text-blue-600">{m.contact_us()}</a>
-				<a
-					href="https://app.cropwatch.io"
-					target="_blank"
-					rel="noopener"
-					class="block rounded bg-blue-600 px-4 py-2 text-center text-white hover:bg-blue-700"
-				>
-					App Login
-				</a>
-				<!-- Optionally, include the language selector for mobile -->
-				<div class="mt-4">
-					<LanguagePicker />
-				</div>
-			</div>
-		</nav>
-	{/if}
+<!-- Announcement/Utility Bar -->
+{#if announcementVisible}
+  <div class="bg-gradient-to-r from-green-600 to-emerald-600 text-white text-sm">
+    <div class="max-w-6xl mx-auto px-4 py-2 flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <svg class="w-4 h-4 text-green-200" fill="currentColor" viewBox="0 0 20 20">
+          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
+        </svg>
+        <span class="font-medium">New: Enhanced LoRaWAN connectivity now available!</span>
+        <a href="#learn-more" class="underline hover:no-underline ml-2 hover:translate-x-2 transition-all ease-in-out">Learn more →</a>
+      </div>
+      <button onclick={closeAnnouncement} class="text-green-200 hover:text-white transition-colors">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+{/if}
+
+<!-- Utility Navigation Bar -->
+<div class="bg-blue-300 backdrop-blur-sm border-b border-slate-700/50">
+  <div class="max-w-6xl mx-auto px-4 py-2">
+    <div class="flex items-center justify-between text-sm">
+      <!-- Left side - Quick links -->
+      <div class="hidden md:flex items-center gap-6 text-slate-900">
+        <a href="/support" class="hover:text-blue-700 transition-colors flex items-center gap-1">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M12 2.25a9.75 9.75 0 11-6.697 2.697M12 21.75a9.75 9.75 0 01-6.697-2.697"/>
+          </svg>
+          24/7 Support
+        </a>
+        <a href="/docs" class="hover:text-blue-700 transition-colors flex items-center gap-1">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+          </svg>
+          Documentation
+        </a>
+        <a href="/api" class="hover:text-blue-700 transition-colors flex items-center gap-1">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
+          </svg>
+          API
+        </a>
+      </div>
+
+      <!-- Right side - Status and contact -->
+      <div class="flex items-center gap-4">
+        <div class="hidden sm:flex items-center gap-2 text-green-400 bg-blue-950 p-2 rounded-lg">
+          <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
+          <span class="text-xs">All Systems Operational</span>
+        </div>
+        <div class="flex items-center gap-3 text-slate-800">
+          <a href="tel:+1234567890" class="hover:text-slate-600 transition-colors text-xs">
+            📞 Support: +1 (234) 567-890
+          </a>
+          <span class="text-slate-600">|</span>
+          <a href="/login" class="hover:text-white bg-blue-300 p-2 hover:bg-gradient-to-r hover:from-green-500 hover:to-emerald-500 rounded-lg transition-colors text-xs ">Login</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Main Header -->
+<header class="relative bg-gradient-to-br from-slate-900 via-slate-800 to-slate-700 overflow-hidden border-b border-green-500/20">
+  <!-- Animated background pattern -->
+  <div class="absolute inset-0 opacity-10">
+    <div class="absolute inset-0 bg-[radial-gradient(circle_at_25%_25%,_#22c55e_2px,_transparent_2px),radial-gradient(circle_at_75%_75%,_#10b981_1px,_transparent_1px)] bg-[length:60px_60px] animate-[drift_20s_linear_infinite]"></div>
+  </div>
+
+  <nav class="relative max-w-6xl mx-auto flex items-center justify-between p-4 lg:px-8 z-10">
+    <!-- Logo -->
+    <a href="/" class="flex items-center gap-3 transition-transform hover:scale-105">
+      <!-- <div class="relative w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-500 rounded-xl flex items-center justify-center shadow-lg shadow-green-500/30"> -->
+        <img src={CropWatchLogo} alt="CropWatch Logo" class="h-10" width="40px" height="40px" />
+      <!-- </div> -->
+<div class="text-2xl font-bold text-white tracking-tight">
+		  CropWatch<sup><small>®</small></sup>
+      </div>
+    </a>
+
+    <!-- Desktop Navigation -->
+    <ul class="hidden lg:flex items-center gap-8">
+      <li class="relative group">
+        <a href="#solutions" class="relative px-4 py-2 text-white/80 font-medium rounded-lg backdrop-blur-sm transition-all duration-300 hover:text-green-400 hover:bg-green-500/10 hover:-translate-y-0.5 after:absolute after:bottom-0 after:left-1/2 after:w-0 after:h-0.5 after:bg-gradient-to-r after:from-green-500 after:to-emerald-500 after:-translate-x-1/2 after:transition-all after:duration-300 hover:after:w-4/5 flex items-center gap-1">
+          Solutions
+          <svg class="w-4 h-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="#pricing" class="relative px-4 py-2 text-white/80 font-medium rounded-lg backdrop-blur-sm transition-all duration-300 hover:text-green-400 hover:bg-green-500/10 hover:-translate-y-0.5 after:absolute after:bottom-0 after:left-1/2 after:w-0 after:h-0.5 after:bg-gradient-to-r after:from-green-500 after:to-emerald-500 after:-translate-x-1/2 after:transition-all after:duration-300 hover:after:w-4/5">
+          Pricing
+        </a>
+      </li>
+      <li class="relative group">
+        <a href="#devices" class="relative px-4 py-2 text-white/80 font-medium rounded-lg backdrop-blur-sm transition-all duration-300 hover:text-green-400 hover:bg-green-500/10 hover:-translate-y-0.5 after:absolute after:bottom-0 after:left-1/2 after:w-0 after:h-0.5 after:bg-gradient-to-r after:from-green-500 after:to-emerald-500 after:-translate-x-1/2 after:transition-all after:duration-300 hover:after:w-4/5 flex items-center gap-1">
+          Devices
+          <svg class="w-4 h-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="#resources" class="relative px-4 py-2 text-white/80 font-medium rounded-lg backdrop-blur-sm transition-all duration-300 hover:text-green-400 hover:bg-green-500/10 hover:-translate-y-0.5 after:absolute after:bottom-0 after:left-1/2 after:w-0 after:h-0.5 after:bg-gradient-to-r after:from-green-500 after:to-emerald-500 after:-translate-x-1/2 after:transition-all after:duration-300 hover:after:w-4/5">
+          Resources
+        </a>
+      </li>
+      <li>
+        <a href="#about" class="relative px-4 py-2 text-white/80 font-medium rounded-lg backdrop-blur-sm transition-all duration-300 hover:text-green-400 hover:bg-green-500/10 hover:-translate-y-0.5 after:absolute after:bottom-0 after:left-1/2 after:w-0 after:h-0.5 after:bg-gradient-to-r after:from-green-500 after:to-emerald-500 after:-translate-x-1/2 after:transition-all after:duration-300 hover:after:w-4/5">
+          About
+        </a>
+      </li>
+    </ul>
+
+    <!-- CTA Button -->
+    <div class="hidden md:flex items-center gap-3">
+      <a href="/demo" class="px-4 py-2 text-white/80 hover:text-green-400 font-medium transition-colors">
+        Demo
+      </a>
+      <a href="/contact-us" class="relative inline-flex items-center px-6 py-3 bg-gradient-to-r from-green-500 to-emerald-500 text-white font-semibold rounded-xl shadow-lg shadow-green-500/30 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-xl hover:shadow-green-500/40 overflow-hidden group">
+        <span class="relative z-10">App Login</span>
+        <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-500"></div>
+      </a>
+    </div>
+
+    <!-- Mobile menu button -->
+    <button
+      onclick={toggleMobileMenu}
+      class="lg:hidden p-2 text-white hover:bg-white/10 rounded-lg transition-colors mobile-menu-btn"
+    >
+      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+      </svg>
+    </button>
+  </nav>
 </header>
+
+<!-- Secondary Navigation/Breadcrumb Bar -->
+<div class="bg-slate-800/50 backdrop-blur-sm border-b border-slate-700/30">
+  <div class="max-w-6xl mx-auto px-4 lg:px-8 py-3">
+    <div class="flex items-center justify-between">
+      <!-- Breadcrumb or secondary nav -->
+      <div class="flex items-center gap-2 text-sm text-slate-600">
+        <a href="/" class="hover:text-slate-500 transition-colors">Home</a>
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+        </svg>
+        <span class="text-white">IoT Solutions</span>
+      </div>
+
+      <!-- Quick actions -->
+      <div class="hidden md:flex items-center gap-4 text-sm">
+        <a href="/marketplace" class="text-slate-900 hover:text-green-400 transition-colors flex items-center gap-1">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
+          </svg>
+          Marketplace
+        </a>
+        <a href="/partners" class="text-slate-900 hover:text-green-400 transition-colors flex items-center gap-1">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
+          </svg>
+          Partners
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Mobile Menu -->
+{#if mobileMenuOpen}
+  <div class="lg:hidden absolute top-full left-0 right-0 bg-slate-900/95 backdrop-blur-lg border-t border-green-500/20 mobile-menu z-50">
+    <div class="p-4 space-y-2">
+      <a href="#solutions" class="block px-4 py-3 text-white/80 hover:text-green-400 hover:bg-green-500/10 rounded-lg transition-colors">
+        Solutions
+      </a>
+      <a href="#pricing" class="block px-4 py-3 text-white/80 hover:text-green-400 hover:bg-green-500/10 rounded-lg transition-colors">
+        Pricing
+      </a>
+      <a href="#devices" class="block px-4 py-3 text-white/80 hover:text-green-400 hover:bg-green-500/10 rounded-lg transition-colors">
+        Devices
+      </a>
+      <a href="#resources" class="block px-4 py-3 text-white/80 hover:text-green-400 hover:bg-green-500/10 rounded-lg transition-colors">
+        Resources
+      </a>
+      <a href="#about" class="block px-4 py-3 text-white/80 hover:text-green-400 hover:bg-green-500/10 rounded-lg transition-colors">
+        About
+      </a>
+      <div class="pt-2 border-t border-white/10 space-y-2">
+        <a href="/demo" class="block px-4 py-3 text-white/80 hover:text-green-400 hover:bg-green-500/10 rounded-lg transition-colors">
+          Demo
+        </a>
+        <a href="/contact-us" class="block px-4 py-3 bg-gradient-to-r from-green-500 to-emerald-500 text-white font-semibold rounded-lg text-center">
+          Get Started
+        </a>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  @keyframes drift {
+    0% { transform: translateX(0) translateY(0); }
+    100% { transform: translateX(-60px) translateY(-60px); }
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/components/UI/LanguagePicker.svelte b/src/lib/components/UI/LanguagePicker.svelte
index f12bb66..7dc0518 100644
--- a/src/lib/components/UI/LanguagePicker.svelte
+++ b/src/lib/components/UI/LanguagePicker.svelte
@@ -45,7 +45,7 @@
 	<button
 		onclick={toggleDropdown}
 		type="button"
-		class="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-black shadow-sm hover:bg-gray-50 focus:outline-none"
+		class="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-6 py-3 text-sm font-medium text-black shadow-sm hover:bg-gray-50 focus:outline-none"
 	>
 		<span>{languageFlags[selectedLanguage]} {selectedLanguage.toUpperCase()}</span>
 		<svg
diff --git a/src/lib/components/UI/Price-Card.svelte b/src/lib/components/UI/Price-Card.svelte
index 5e03770..15dc73e 100644
--- a/src/lib/components/UI/Price-Card.svelte
+++ b/src/lib/components/UI/Price-Card.svelte
@@ -10,10 +10,10 @@
 		$props();
 </script>
 
-<div class="flex flex-col rounded-lg border border-gray-300 shadow-md">
-	<div class="bg-blue-600 p-6">
-		<h3 class="text-3xl font-bold text-white">{title}</h3>
-		<p class="mt-2 text-xl font-extrabold text-gray-300">{description}</p>
+<div class="flex flex-col border border-gray-300 shadow-md rounded-md lg:mx-16">
+	<div class="bg-green-950 p-6 rounded-t-md">
+		<h3 class="text-3xl font-bold text-green-100 mb-4">{title}</h3>
+		<p class="mt-2 text-xl font-light text-green-200">{description}</p>
 	</div>
 	<ul class="mt-4 space-y-2 p-6 text-left">
 		{#each features as feature}
@@ -35,7 +35,7 @@
 	<span class="flex-grow"></span>
 	<a
 		href={link}
-		class="mt-6 inline-block rounded bg-blue-600 px-4 py-2 text-white transition hover:bg-blue-700 text-nowrap"
+		class="mt-6 inline-block rounded-b-md bg-green-500 px-4 py-4 text-green-100 hover:bg-blue-700 text-nowrap text-lg"
 	>
 		{buttonLabel ? buttonLabel : 'Get Started'}
 	</a>
diff --git a/src/lib/components/UI/Section-Card.svelte b/src/lib/components/UI/Section-Card.svelte
index 62bdc89..548e973 100644
--- a/src/lib/components/UI/Section-Card.svelte
+++ b/src/lib/components/UI/Section-Card.svelte
@@ -2,10 +2,15 @@
 	const { image, title, description, link, class: ClassName } = $props();
 </script>
 
-<div class="{ClassName} m-2 rounded shadow-md hover:m-0 hover:shadow-lg cursor-pointer">
-	<a href={link} class="block">
-		<img src={image} alt="Agriculture" loading="lazy" class="h-52 mx-auto w-full" height="208px" width="344px" />
-		<h3 class="mt-4 font-bold">{title}</h3>
-		<p class="mt-2 px-6 pb-6">{description}</p>
-	</a>
+<div class="m-2 mx-4 rounded-md bg-white shadow-md  text-left ">
+	<img src={image} alt="Agriculture" loading="lazy" class="h-60 mx-auto w-full rounded-t-md" />
+	<div class="px-6">
+		<h3 class="mt-4 font-bold text-2xl">{title}</h3>
+		<p class="pb-2 font-light mt-4">{description}</p>
+		<p class="text-center">
+		<a href={link} class="block {ClassName} text-white my-6 py-3 rounded font-light transition-all hover:scale-105">
+			Learn more
+		</a>
+		</p>
+	</div>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 65318b7..07d7761 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -12,6 +12,8 @@
 	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';
 
 	let canvas;
 	let ctx;
@@ -24,6 +26,7 @@
 		canvas.width = width;
 		canvas.height = height;
 	}
+	let loaded = $state(false)
 
 	onMount(() => {
 		canvas = document.getElementById('lines');
@@ -43,6 +46,7 @@
 			requestAnimationFrame(loop);
 		}
 		requestAnimationFrame(loop);
+		loaded = true;
 	});
 </script>
 
@@ -75,41 +79,46 @@
 <!-- Hero Section -->
 <section
 	id="home"
-	class="relative bg-blue-200 py-32 text-white"
+	class="relative bg-blue-200 py-32 text-white bg-[url(/images/sensor-field2.jpg)] bg-cover bg-fixed min-h-screen"
 	style="background-image: url('{SAITO_IMAGE}'); background-size: cover; background-position: top;"
+
 >
 	<!-- Overlay for blur and darkening -->
 	<div class="backdrop-blur-xs absolute inset-0 bg-black bg-opacity-40"></div>
 	<!-- Content -->
-	<div class="container relative mx-auto text-center">
-		<h1 class="text-4xl font-bold text-yellow-400 xl:text-6xl">{m.home_hero_title()}</h1>
-		<p class="mt-4 text-lg">
+	<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="mt-4 text-lg pt-10 lg:w-1/2 lg:mx-auto" transition:fly={{ y: 100, duration: 1000 , delay: 200 }}>
 			{m.home_hero_subtitle()}
 		</p>
-		<div class="mt-6">
-			<a href="/use-cases" class="rounded bg-white px-6 py-3 text-blue-600 hover:bg-gray-200">
-				{m.home_hero_button_label()}
+		<div class="mt-6 lg:w-1/2 lg:mx-auto pt-20" 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"></canvas>
-	<div class="container relative z-10 mx-auto text-center">
+	<canvas id="lines" class="absolute inset-0 z-0 h-full w-full filter"></canvas>
+	<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>
 		<div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-3">
 			<SectionCard
-				image={PLANT_IMAGE}
+				image="/images/sensor-field.jpg"
 				title={m.home_solutions_farming_title()}
 				description={m.home_solutions_farming_description()}
 				link="/product/cw-ss"
-				class="bg-green-100 border border-green-200"
+				class="bg-green-600"
+
 			/>
 
 			<SectionCard
@@ -117,7 +126,7 @@
 				title={m.home_solutions_cold_storage_title()}
 				description={m.home_solutions_cold_storage_description()}
 				link="/product/cw-air-th"
-				class="bg-blue-100 border border-blue-200"
+				class="bg-blue-500"
 			/>
 
 			<SectionCard
@@ -125,11 +134,17 @@
 				title={m.home_solutions_heat_safety_title()}
 				description={m.home_solutions_heat_safety_description()}
 				link="/product/cw-air-th-safety"
-				class="bg-red-50 border border-red-200"
+				class="bg-orange-500"
 			/>
 		</div>
 	</div>
 </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>
+</section>
 
 <!-- Products Quickview Section -->
 <!-- <section id="products-quickview" class="bg-gray-600 py-10 text-white">
@@ -143,10 +158,10 @@
 </section> -->
 
 <!-- Pricing Section -->
-<section id="pricing" class="bg-white py-20">
+<section id="pricing" class="bg-gradient-to-t from-white to-[#cfecff]  py-20 px-4">
 	<div class="container mx-auto text-center">
-		<h2 class="text-3xl font-bold">{m.home_pricing_title()}</h2>
-		<p class="mt-4">{m.home_pricing_subtitle()}</p>
+		<h2 class="text-3xl font-bold lg:text-5xl">{m.home_pricing_title()}</h2>
+		<p class="mt-4 font-light py-6 lg:text-2xl">{m.home_pricing_subtitle()}</p>
 		<div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-2">
 			<PriceCard
 				title="IoT"
diff --git a/static/images/field.jpg b/static/images/field.jpg
new file mode 100644
index 0000000..cea3beb
Binary files /dev/null and b/static/images/field.jpg differ
diff --git a/static/images/installation.jpg b/static/images/installation.jpg
new file mode 100644
index 0000000..09205d8
Binary files /dev/null and b/static/images/installation.jpg differ
diff --git a/static/images/sensor-field.jpg b/static/images/sensor-field.jpg
new file mode 100644
index 0000000..385c531
Binary files /dev/null and b/static/images/sensor-field.jpg differ
diff --git a/static/images/sensor-field2.jpg b/static/images/sensor-field2.jpg
new file mode 100644
index 0000000..84961e2
Binary files /dev/null and b/static/images/sensor-field2.jpg differ
diff --git a/static/images/sensor-underground.png b/static/images/sensor-underground.png
new file mode 100644
index 0000000..dd0752e
Binary files /dev/null and b/static/images/sensor-underground.png differ
diff --git a/static/images/water-sensor.jpg b/static/images/water-sensor.jpg
new file mode 100644
index 0000000..3c9b6fe
Binary files /dev/null and b/static/images/water-sensor.jpg differ
diff --git a/static/images/welcome.webp b/static/images/welcome.webp
new file mode 100644
index 0000000..2915db2
Binary files /dev/null and b/static/images/welcome.webp differ