diff --git a/app/generate/page.tsx b/app/generate/page.tsx
new file mode 100644
index 0000000..db2a9bf
--- /dev/null
+++ b/app/generate/page.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { useState } from "react";
+
+export default function UploadPage() {
+  const [file, setFile] = useState<File | null>(null);
+  const [data, setData] = useState<string | null>(null);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      setFile(e.target.files[0]);
+    }
+  };
+
+  const handleUpload = async () => {
+    if (!file) return;
+
+    const formData = new FormData();
+    formData.append("image", file);
+
+    const res = await fetch("/api/upload", {
+      method: "POST",
+      body: formData,
+    });
+
+    const data = await res.json();
+    setData(data.url + "\n\n" + data.svg);
+    console.log("Response:", data);
+  };
+
+  return (
+    <div>
+      <input type="file" accept="image/*" onChange={handleFileChange} />
+      <button onClick={handleUpload}>Upload</button>
+      <p>{data}</p>
+    </div>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 74575cd..5cc1b8c 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,6 +2,7 @@ import Navbar from "@/components/NavbarComponents/Navbar";
 import { ThemeProvider } from "@/components/NavbarComponents/ThemeProvider";
 import { Space_Grotesk } from "next/font/google";
 import "./globals.css";
+import Footer from "@/components/Footer/Footer";
 
 const spaceGrotesk = Space_Grotesk({
   variable: "--font-space-grotesk",
@@ -25,6 +26,7 @@ export default function RootLayout({
         >
           <Navbar />
           <main>{children}</main>
+          <Footer />
         </ThemeProvider>
       </body>
     </html>
diff --git a/app/page.tsx b/app/page.tsx
index db2a9bf..b7a4ce7 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,38 +1,7 @@
 "use client";
 
-import { useState } from "react";
+import HeroSection from "@/components/Home/HeroSection";
 
-export default function UploadPage() {
-  const [file, setFile] = useState<File | null>(null);
-  const [data, setData] = useState<string | null>(null);
-
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files) {
-      setFile(e.target.files[0]);
-    }
-  };
-
-  const handleUpload = async () => {
-    if (!file) return;
-
-    const formData = new FormData();
-    formData.append("image", file);
-
-    const res = await fetch("/api/upload", {
-      method: "POST",
-      body: formData,
-    });
-
-    const data = await res.json();
-    setData(data.url + "\n\n" + data.svg);
-    console.log("Response:", data);
-  };
-
-  return (
-    <div>
-      <input type="file" accept="image/*" onChange={handleFileChange} />
-      <button onClick={handleUpload}>Upload</button>
-      <p>{data}</p>
-    </div>
-  );
+export default function Page() {
+  return <HeroSection />;
 }
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
new file mode 100644
index 0000000..a2bc40b
--- /dev/null
+++ b/components/Footer/Footer.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import Link from "next/link";
+
+const Footer = () => {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className="z-50 bg-white dark:bg-neutral-900 border-t border-slate-200 dark:border-neutral-800 text-center w-full mx-auto px-4 sm:px-6 lg:px-8 pt-6 pb-6">
+      <p className="text-xs text-slate-500 dark:text-slate-400">
+        © {currentYear} SVG From Img. All rights reserved. | Made with ❤️ by{" "}
+        <Link className="underline" href="https://github.com/ShitanshuKumar607">
+          Shitanshu Kumar
+        </Link>
+      </p>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/components/Home/HeroSection.tsx b/components/Home/HeroSection.tsx
new file mode 100644
index 0000000..7abb2dc
--- /dev/null
+++ b/components/Home/HeroSection.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { motion, Variants } from "framer-motion";
+import { ArrowRight, Trophy } from "lucide-react";
+import Link from "next/link";
+
+const container: Variants = {
+  hidden: { opacity: 0 },
+  show: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+      delayChildren: 0.3,
+    },
+  },
+};
+
+const item: Variants = {
+  hidden: { opacity: 0, y: 20 },
+  show: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      type: "spring",
+      stiffness: 100,
+      damping: 15,
+    },
+  },
+};
+
+const HeroSection = () => {
+  return (
+    <section className="relative overflow-hidden bg-zinc-50 dark:bg-neutral-900/80">
+      {/* Accent Corner Lines */}
+      <div className="hidden sm:block absolute top-10 left-10 h-16 w-16 border-t-2 border-l-2 border-emerald-400 dark:border-violet-500 opacity-60 rounded-tl-lg" />
+      <div className="hidden sm:block absolute bottom-10 right-10 h-20 w-20 border-b-2 border-r-2 border-emerald-400 dark:border-violet-500 opacity-60 rounded-br-lg" />
+
+      {/* Geometric Shape Decorations */}
+      <div className="absolute top-1/3 -left-6 w-24 h-24 border border-emerald-300 dark:border-violet-400/40 rounded-full opacity-30" />
+      <div className="absolute bottom-1/4 -right-8 w-20 h-20 border border-emerald-300 dark:border-violet-400/40 rotate-12 opacity-30" />
+
+      {/* Hero Content */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32 relative">
+        <motion.div
+          className="text-center"
+          initial="hidden"
+          animate="show"
+          variants={container}
+        >
+          {/* Badge */}
+          <motion.div
+            variants={item}
+            className="inline-flex items-center gap-2 bg-emerald-100 text-emerald-700 dark:bg-violet-700/30 dark:text-violet-300 text-sm font-medium px-4 py-2 rounded-full mb-6"
+          >
+            <Trophy className="h-4 w-4" />
+            <span>Fast & Secure Converter</span>
+          </motion.div>
+
+          {/* Heading */}
+          <motion.h1
+            className="text-4xl sm:text-6xl font-bold tracking-tight max-w-4xl mx-auto leading-tight mb-6 text-slate-900 dark:text-neutral-100"
+            variants={item}
+          >
+            Your Ultimate
+            <span className="text-emerald-600 dark:text-violet-500"> SVG </span>
+            Companion
+          </motion.h1>
+
+          {/* Subtext */}
+          <motion.p
+            className="text-lg text-slate-600 dark:text-neutral-400 max-w-3xl mx-auto lg:text-xl mb-10"
+            variants={item}
+          >
+            Effortlessly transform your PNG, JPG, and other raster images into
+            high-quality, editable SVG vectors with a single click. Perfect for
+            any creator.
+          </motion.p>
+
+          <motion.div
+            className="flex flex-col sm:flex-row gap-4 justify-center"
+            variants={{
+              hidden: { opacity: 0, y: 20 },
+              show: {
+                opacity: 1,
+                y: 0,
+                transition: {
+                  staggerChildren: 0.1,
+                  delayChildren: 0.4,
+                },
+              },
+            }}
+          >
+            <motion.div
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.98 }}
+              variants={item}
+            >
+              <Link href="/generate">
+                <Button
+                  size="lg"
+                  className="gap-2 bg-emerald-600 text-white hover:bg-emerald-700 dark:bg-violet-600 dark:hover:bg-violet-700 transition-transform cursor-pointer"
+                >
+                  Upload Image & Convert
+                  <ArrowRight className="h-5 w-5" />
+                </Button>
+              </Link>
+            </motion.div>
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroSection;
diff --git a/components/NavbarComponents/Navbar.tsx b/components/NavbarComponents/Navbar.tsx
index 56dd27d..dc0bd57 100644
--- a/components/NavbarComponents/Navbar.tsx
+++ b/components/NavbarComponents/Navbar.tsx
@@ -22,9 +22,8 @@ export default function Navbar() {
             className="text-lg font-bold text-slate-800 dark:text-neutral-100"
           >
             SVG{" "}
-            <span className="text-emerald-600 dark:text-violet-500">
-              From Img
-            </span>
+            <span className="text-emerald-600 dark:text-violet-500">From</span>{" "}
+            Img
           </Link>
         </div>
 
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
new file mode 100644
index 0000000..1dd187c
--- /dev/null
+++ b/components/ui/button.tsx
@@ -0,0 +1,60 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };
diff --git a/package-lock.json b/package-lock.json
index 1134d6c..8f1db8a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,11 @@
       "name": "imgtosvg",
       "version": "0.1.0",
       "dependencies": {
+        "@radix-ui/react-slot": "^1.2.3",
         "class-variance-authority": "^0.7.1",
         "cloudinary": "^2.7.0",
         "clsx": "^2.1.1",
+        "framer-motion": "^12.23.22",
         "imagetracerjs": "^1.2.6",
         "lucide-react": "^0.544.0",
         "next": "15.5.4",
@@ -970,6 +972,39 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1325,7 +1360,7 @@
       "version": "19.1.15",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.15.tgz",
       "integrity": "sha512-+kLxJpaJzXybyDyFXYADyP1cznTO8HSuBpenGlnKOAkH4hyNINiywvXS/tGJhsrGGP/gM185RA3xpjY0Yg4erA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
@@ -2408,7 +2443,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -3393,6 +3428,33 @@
         "node": ">=12.20.0"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.22",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.22.tgz",
+      "integrity": "sha512-ZgGvdxXCw55ZYvhoZChTlG6pUuehecgvEAJz0BHoC5pQKW1EC5xf1Mul1ej5+ai+pVY0pylyFfdl45qnM1/GsA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.21",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -4663,6 +4725,21 @@
         "node": ">= 18"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.23.21",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.21.tgz",
+      "integrity": "sha512-5xDXx/AbhrfgsQmSE7YESMn4Dpo6x5/DTZ4Iyy4xqDvVHWvFVoV+V2Ri2S/ksx+D40wrZ7gPYiMWshkdoqNgNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/package.json b/package.json
index 944fb9d..27340e8 100644
--- a/package.json
+++ b/package.json
@@ -11,9 +11,11 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.2.3",
     "class-variance-authority": "^0.7.1",
     "cloudinary": "^2.7.0",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.23.22",
     "imagetracerjs": "^1.2.6",
     "lucide-react": "^0.544.0",
     "next": "15.5.4",