diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index c2a7182..80dffdd 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,59 +1,32 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
-import { Inter } from "next/font/google";
-import { Source_Sans_3 } from "next/font/google";
+import "./styles/variables.css";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
-
-const halant = Halant({
-  variable: "--font-halant",  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
-});
-
-const inter = Inter({
-  variable: "--font-inter",  subsets: ["latin"],
-});
-
-const sourceSans3 = Source_Sans_3({
-  variable: "--font-source-sans-3",  subsets: ["latin"],
-});
+import { Tag } from "@/components/tag";
 
 export const metadata: Metadata = {
-  title: "PhishGuard - Advanced Phishing Detection & Email Security",  description: "Detect phishing threats instantly. AI-powered URL scanning, email analysis, and real-time threat intelligence. Protect your organization with 99.8% accuracy.",  keywords: "phishing detection, email security, URL scanner, cyber threats, email verification, security tool",  metadataBase: new URL("https://phishguard.io"),
-  alternates: {
-    canonical: "https://phishguard.io"
-  },
-  openGraph: {
-    title: "PhishGuard - Advanced Phishing Detection",    description: "Real-time AI-powered phishing detection protecting 50,000+ users. Scan URLs and emails instantly.",    siteName: "PhishGuard",    type: "website",    images: [
-      {
-        url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOrBixe1z05uBeh3k07FPm07dP/sophisticated-cybersecurity-background-w-1772967669760-2b04d6bb.png",        alt: "PhishGuard phishing detection platform"
-      }
-    ]
-  },
-  twitter: {
-    card: "summary_large_image",    title: "PhishGuard - Phishing Detection Made Easy",    description: "Advanced email security with 99.8% threat detection rate. Protect your team now.",    images: ["https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AOrBixe1z05uBeh3k07FPm07dP/sophisticated-cybersecurity-background-w-1772967669760-2b04d6bb.png"]
-  },
-  robots: {
-    index: true,
-    follow: true
-  }
-};
+  title: "PhishGuard - Advanced Phishing Detection",  description: "Detect phishing threats before they strike with AI-powered detection protecting millions of users daily."};
 
-export default function RootLayout({
+const RootLayout = ({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) => {
   return (
     <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${halant.variable} ${inter.variable} ${sourceSans3.variable} antialiased`}
-        >
+      <body>
+        <ServiceWrapper>
           <Tag />
           {children}
-        
+        </ServiceWrapper>
+        <script
+          src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"
+          async
+        />
+        <script
+          src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/ScrollTrigger.min.js"
+          async
+        />
+      
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1421,7 +1394,13 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
-}
+};
+
+export default RootLayout;
+
+// ServiceWrapper component
+const ServiceWrapper = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3222db9..ee342e3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -37,7 +37,7 @@ export default function LandingPage() {
             { name: "Pricing", id: "pricing" },
             { name: "Contact", id: "contact" }
           ]}
-          button={{ text: "Start Free Scan", href: "#detection" }}
+          button={{ text: "Start Free Scan", href: "/scan" }}
           animateOnLoad={true}
         />
       </div>
@@ -60,7 +60,7 @@ export default function LandingPage() {
           ]}
           avatarText="Trusted by 10,000+ security teams"
           buttons={[
-            { text: "Start Free Scan", href: "#detection" },
+            { text: "Start Free Scan", href: "/scan" },
             { text: "View Documentation", href: "#howitworks" }
           ]}
           buttonAnimation="blur-reveal"
@@ -97,7 +97,7 @@ export default function LandingPage() {
           ]}
           gridVariant="three-columns-all-equal-width"
           animationType="slide-up"
-          buttons={[{ text: "Try All Methods", href: "#contact" }]}
+          buttons={[{ text: "Try All Methods", href: "/scan" }]}
           buttonAnimation="opacity"
         />
       </div>
@@ -148,7 +148,7 @@ export default function LandingPage() {
           ]}
           useInvertedBackground={false}
           showBorder={true}
-          buttons={[{ text: "Start Your Free Scan", href: "#detection" }]}
+          buttons={[{ text: "Start Your Free Scan", href: "/scan" }]}
         />
       </div>
 
@@ -243,7 +243,7 @@ export default function LandingPage() {
           background={{ variant: "sparkles-gradient" }}
           useInvertedBackground={false}
           buttons={[
-            { text: "Start Free Scan", href: "#detection" },
+            { text: "Start Free Scan", href: "/scan" },
             { text: "Request Demo", href: "#" }
           ]}
         />
@@ -255,8 +255,8 @@ export default function LandingPage() {
           columns={[
             {
               title: "Product",              items: [
-                { label: "URL Scanner", href: "#detection" },
-                { label: "Email Analysis", href: "#detection" },
+                { label: "URL Scanner", href: "/scan" },
+                { label: "Email Analysis", href: "/scan" },
                 { label: "API Documentation", href: "#" },
                 { label: "Pricing", href: "#" }
               ]
diff --git a/src/app/scan/page.tsx b/src/app/scan/page.tsx
new file mode 100644
index 0000000..b059928
--- /dev/null
+++ b/src/app/scan/page.tsx
@@ -0,0 +1,273 @@
+"use client";
+
+import { useState } from "react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import { Upload, Link as LinkIcon, AlertCircle, CheckCircle2 } from "lucide-react";
+
+export default function ScanPage() {
+  const [urlInput, setUrlInput] = useState("");
+  const [imageFile, setImageFile] = useState<File | null>(null);
+  const [imagePreview, setImagePreview] = useState<string>("");
+  const [scanMode, setScanMode] = useState<"url" | "image">("url");
+  const [isScanning, setIsScanning] = useState(false);
+  const [scanResults, setScanResults] = useState<any>(null);
+
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setImageFile(file);
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setImagePreview(reader.result as string);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleScan = async () => {
+    setIsScanning(true);
+    // Simulate scanning delay
+    setTimeout(() => {
+      setScanResults({
+        status: "safe",        message: "This item appears to be legitimate.",        timestamp: new Date().toLocaleString(),
+      });
+      setIsScanning(false);
+    }, 2000);
+  };
+
+  const handleReset = () => {
+    setUrlInput("");
+    setImageFile(null);
+    setImagePreview("");
+    setScanResults(null);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="small"
+      sizing="mediumLargeSizeLargeTitles"
+      background="grid"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="layered"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="PhishGuard"
+          navItems={[
+            { name: "Features", id: "features" },
+            { name: "How It Works", id: "howitworks" },
+            { name: "Pricing", id: "pricing" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{ text: "Back to Home", href: "/" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <main className="min-h-screen flex items-center justify-center px-4 py-20">
+        <div className="w-full max-w-2xl">
+          {/* Header */}
+          <div className="text-center mb-12">
+            <h1 className="text-5xl md:text-6xl font-bold mb-4" style={{ color: "var(--foreground)" }}>
+              Scan for Threats
+            </h1>
+            <p className="text-lg md:text-xl" style={{ color: "var(--foreground)", opacity: 0.8 }}>
+              Paste a URL or upload an email screenshot to check for phishing threats
+            </p>
+          </div>
+
+          {/* Mode Selection */}
+          <div className="flex gap-4 mb-8">
+            <button
+              onClick={() => setScanMode("url")}
+              className={`flex-1 py-4 px-6 rounded-lg font-semibold transition-all ${
+                scanMode === "url"
+                  ? "text-white"
+                  : "opacity-60 hover:opacity-80"
+              }`}
+              style={{
+                backgroundColor:
+                  scanMode === "url"
+                    ? "var(--primary-cta)"
+                    : "var(--card)"}}
+            >
+              <LinkIcon className="inline-block mr-2" size={20} />
+              URL Scan
+            </button>
+            <button
+              onClick={() => setScanMode("image")}
+              className={`flex-1 py-4 px-6 rounded-lg font-semibold transition-all ${
+                scanMode === "image"
+                  ? "text-white"
+                  : "opacity-60 hover:opacity-80"
+              }`}
+              style={{
+                backgroundColor:
+                  scanMode === "image"
+                    ? "var(--primary-cta)"
+                    : "var(--card)"}}
+            >
+              <Upload className="inline-block mr-2" size={20} />
+              Image Scan
+            </button>
+          </div>
+
+          {/* Scan Input Section */}
+          {!scanResults && (
+            <div className="rounded-lg p-8" style={{ backgroundColor: "var(--card)" }}>
+              {scanMode === "url" ? (
+                <div className="space-y-4">
+                  <label className="block" style={{ color: "var(--foreground)" }}>
+                    <span className="font-semibold mb-2 block">Enter URL to Scan</span>
+                    <input
+                      type="url"
+                      value={urlInput}
+                      onChange={(e) => setUrlInput(e.target.value)}
+                      placeholder="https://example.com"
+                      className="w-full px-4 py-3 rounded-lg border-2 border-transparent focus:outline-none focus:border-2 transition-all"
+                      style={{
+                        backgroundColor: "var(--background)",                        color: "var(--foreground)",                        borderColor: "var(--accent)"}}
+                    />
+                  </label>
+                </div>
+              ) : (
+                <div className="space-y-4">
+                  <label
+                    className="block border-2 border-dashed rounded-lg p-8 text-center cursor-pointer hover:opacity-80 transition-opacity"
+                    style={{
+                      borderColor: "var(--accent)",                      backgroundColor: "var(--background)"}}
+                  >
+                    <input
+                      type="file"
+                      accept="image/*"
+                      onChange={handleImageUpload}
+                      className="hidden"
+                    />
+                    <Upload size={32} className="mx-auto mb-3" style={{ color: "var(--primary-cta)" }} />
+                    <p className="font-semibold" style={{ color: "var(--foreground)" }}>
+                      Click to upload or drag and drop
+                    </p>
+                    <p style={{ color: "var(--foreground)", opacity: 0.6 }}>
+                      PNG, JPG, GIF up to 10MB
+                    </p>
+                  </label>
+                  {imagePreview && (
+                    <div className="mt-4">
+                      <img
+                        src={imagePreview}
+                        alt="Preview"
+                        className="max-h-64 mx-auto rounded-lg"
+                      />
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {/* Scan Button */}
+              <div className="mt-6 flex gap-4">
+                <button
+                  onClick={handleScan}
+                  disabled={isScanning || (scanMode === "url" && !urlInput) || (scanMode === "image" && !imageFile)}
+                  className="flex-1 py-4 px-6 rounded-lg font-semibold text-white transition-all disabled:opacity-50 disabled:cursor-not-allowed hover:opacity-90"
+                  style={{ backgroundColor: "var(--primary-cta)" }}
+                >
+                  {isScanning ? (
+                    <>
+                      <span className="inline-block animate-spin mr-2">⏳</span>
+                      Scanning...
+                    </>
+                  ) : (
+                    "Start Scan"
+                  )}
+                </button>
+              </div>
+            </div>
+          )}
+
+          {/* Scan Results */}
+          {scanResults && (
+            <div className="rounded-lg p-8" style={{ backgroundColor: "var(--card)" }}>
+              <div className="text-center space-y-4">
+                {scanResults.status === "safe" ? (
+                  <CheckCircle2 size={64} className="mx-auto" style={{ color: "#10b981" }} />
+                ) : (
+                  <AlertCircle size={64} className="mx-auto" style={{ color: "#ef4444" }} />
+                )}
+                <h2
+                  className="text-3xl font-bold"
+                  style={{
+                    color: scanResults.status === "safe" ? "#10b981" : "#ef4444"}}
+                >
+                  {scanResults.status === "safe" ? "Safe" : "Threat Detected"}
+                </h2>
+                <p style={{ color: "var(--foreground)", opacity: 0.8 }}>
+                  {scanResults.message}
+                </p>
+                <p style={{ color: "var(--foreground)", opacity: 0.6, fontSize: "0.875rem" }}>
+                  Scanned at: {scanResults.timestamp}
+                </p>
+              </div>
+
+              {/* Reset Button */}
+              <button
+                onClick={handleReset}
+                className="w-full mt-6 py-4 px-6 rounded-lg font-semibold text-white transition-all hover:opacity-90"
+                style={{ backgroundColor: "var(--primary-cta)" }}
+              >
+                Scan Another
+              </button>
+            </div>
+          )}
+        </div>
+      </main>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="PhishGuard"
+          columns={[
+            {
+              title: "Product",              items: [
+                { label: "URL Scanner", href: "/scan" },
+                { label: "Email Analysis", href: "/scan" },
+                { label: "API Documentation", href: "#" },
+                { label: "Pricing", href: "#" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Contact", href: "/" }
+              ]
+            },
+            {
+              title: "Resources",              items: [
+                { label: "Security Guide", href: "#" },
+                { label: "Threat Reports", href: "#" },
+                { label: "FAQ", href: "/" },
+                { label: "Support", href: "#" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Security Policy", href: "#" },
+                { label: "GDPR Compliance", href: "#" }
+              ]
+            }
+          ]}
+          copyrightText="© 2025 PhishGuard. All rights reserved. Security is our priority."
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
