diff --git a/package-lock.json b/package-lock.json
index 12188ff..12da966 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@headlessui/react": "^2.1.1",
         "dompurify": "^3.1.6",
         "emailjs-com": "^3.2.0",
+        "lucide-react": "^0.436.0",
         "prismjs": "^1.29.0",
         "react": "^18.2.0",
         "react-copy-to-clipboard": "^5.1.0",
@@ -3961,6 +3962,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.436.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.436.0.tgz",
+      "integrity": "sha512-N292bIxoqm1aObAg0MzFtvhYwgQE6qnIOWx/GLj5ONgcTPH6N0fD9bVq/GfdeC9ZORBXozt/XeEKDpiB3x3vlQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
diff --git a/package.json b/package.json
index f3612cc..0148cee 100644
--- a/package.json
+++ b/package.json
@@ -13,17 +13,15 @@
     "@headlessui/react": "^2.1.1",
     "dompurify": "^3.1.6",
     "emailjs-com": "^3.2.0",
+    "lucide-react": "^0.436.0",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-ga4": "^2.1.0",
     "react-router-dom": "^6.23.0",
-
     "react-syntax-highlighter": "^15.5.0",
-
     "react-toastify": "^10.0.5",
-
     "tesseract.js": "^5.1.0"
   },
   "devDependencies": {
diff --git a/public/hero-img-osc-min.png b/public/hero-img-osc-min.png
new file mode 100644
index 0000000..4219eac
Binary files /dev/null and b/public/hero-img-osc-min.png differ
diff --git a/src/Components/Card.jsx b/src/Components/Card.jsx
index 0be7b43..1ab6e3f 100644
--- a/src/Components/Card.jsx
+++ b/src/Components/Card.jsx
@@ -1,28 +1,31 @@
+import { ArrowRight } from "lucide-react";
 import { Link } from "react-router-dom";
 
 const Card = ({
   name = "no name",
   description = `Because it's about motivating the doers. Because I'm here to follow my dreams and inspire others.`,
-  linkName = "stopwatch"
+  linkName = "stopwatch",
 }) => {
-    return (
-         <div className="isolate aspect-video w-[22rem] h-auto sm:w-96 rounded-xl bg-[#000]/20 shadow-lg ring-1 ring-black/5 border border-slate-700	"> 
-          <Link className="no-underline hover:no-underline" to={`/${linkName}`}>
-            <div className="p-6">
-              <h5 className="block mb-2 font-sans text-3xl antialiased font-semibold leading-snug tracking-normal text-white">
-                {name}
-              </h5>
-              <p className="block text-sm font-sans antialiased font-light leading-relaxed text-inherit text-white">
-                {description}
-              </p>
-              <p className="mt-10 sm:mt-16 flex-row-reverse flex  text-sm font-sans antialiased font-light leading-relaxed text-inherit text-white">
-                Learn more
-              </p>
-            </div>
-            
-          </Link>
+  return (
+    <div className="w-full h-full rounded-md bg-[#000]/20 shadow-lg ring-1 ring-black/5 border border-slate-700	">
+      <Link className="no-underline hover:no-underline" to={`/${linkName}`}>
+        <div className="p-6">
+          <h5 className="block mb-2 font-sans text-3xl antialiased font-semibold leading-snug tracking-normal text-white">
+            {name}
+          </h5>
+          <p className="block text-sm font-sans antialiased font-light leading-relaxed text-inherit text-white">
+            {description}
+          </p>
+          <p className="mt-10 sm:mt-16 gap-x-2 flex text-sm font-sans antialiased font-light leading-relaxed text-inherit text-white">
+            Learn more{" "}
+            <span>
+              <ArrowRight />
+            </span>
+          </p>
         </div>
-      );
+      </Link>
+    </div>
+  );
 };
 
 export default Card;
diff --git a/src/Home.jsx b/src/Home.jsx
index f5be3ba..ca2ce32 100644
--- a/src/Home.jsx
+++ b/src/Home.jsx
@@ -9,65 +9,97 @@ import Footer from "./Components/Footer";
 
 const Home = () => {
   const gaEventTracker = useAnalyticsEventTracker("Home");
-
+  //bwgradient
   return (
-    <div className="bwgradient min-h-screen flex flex-col items-center justify-center p-4 ">
-      <Marquee />
-      {/* <Feedback/> */}
-      <h1 className="text-4xl sm:text-5xl md:text-6xl text-center font-bold mb-8 bg-gradient-to-r from-[#9A8D9B] via-[#575A79] to-[#2C2E4D] inline-block text-transparent bg-clip-text">
-        Practice Interview Problems
-      </h1>
-      <p className="m-10 text-white text-center">
-        {" "}
-        Help us improve! Share your honest{" "}
-        <Link to={`/feedback`}>
-          <strong className="text-lime-400 underline text-xl">feedback</strong>
-        </Link>{" "}
-        for a better user experience.
-      </p>{" "}
-      <Link
-        to={`/problems`}
-        onClick={() => gaEventTracker("click", "All Problems Button")}
-      >
-      <p className="mb-10 relative inline-flex items-center justify-center p-4 px-6 py-3 overflow-hidden font-medium text-gray-500 transition duration-300 ease-out border-2 border-slate-700 rounded-full shadow-md group w-72">
-        <span className="absolute inset-0 flex items-center justify-center w-full h-full text-white duration-300 -translate-x-full bg-black group-hover:translate-x-0 ease">
-          <svg
-            className="w-6 h-6"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M14 5l7 7m0 0l-7 7m7-7H3"
-            />
-          </svg>
-        </span>
-        <span className="absolute flex items-center justify-center w-full h-full text-gray-200 transition-all duration-300 transform group-hover:translate-x-full ease">
-          All problems
-        </span>
-        <span className="relative invisible">All problems</span>
-      </p>
-      </Link>
-      <div className="flex justify-center w-full">
-        <div className="px-10 sm:px-0 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 w-full max-w-6xl justify-items-center mb-10">
-          {buttonDetails.map(({ name, description }) => (
-            <Card
-              key={name}
-              name={name}
-              description={description}
-              linkName={name}
-              onClick={() => gaEventTracker("click", `Card - ${name}`)}
+    <main className="min-h-screen relative text-white/70">
+      <div class="w-full h-full absolute top-0 z-[-10] bg-neutral-950 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"></div>
+      <div className="container mx-auto max-w-6xl mt-48 flex flex-col gap-y-12 p-4 xl:p-0">
+        {/* <Feedback/> */}
+        <div className="w-full grid lg:grid-cols-2 place-items-center mx-auto ">
+          <div className="flex flex-col gap-y-6 items-center lg:items-start text-center lg:text-left">
+            <h1 className="text-white/70 text-5xl md:text-6xl leading-snug font-bold mb-8 lg:mb-12">
+              Nail your next <span className="text-white">interview</span>
+            </h1>
+
+            <h3 className="font-light max-w-prose">
+              Get ready for your front-end interview with confidence. Explore
+              the key topics commonly asked by FAANG companies and dive into
+              code examples to sharpen your skills and ace your next interview.
+            </h3>
+
+            <Link
+              to={`/problems`}
+              onClick={() => gaEventTracker("click", "All Problems Button")}
+              className=""
+            >
+              <p className="relative inline-flex items-center py-2 overflow-hidden transition duration-300 ease-out border-2 border-slate-700 rounded-md hover:border-slate-300 shadow-md group w-48">
+                <span className="absolute inset-0 flex items-center justify-center w-full h-full  duration-300 -translate-x-full bg-transparent group-hover:translate-x-0 ease">
+                  <svg
+                    className="w-6 h-6"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M14 5l7 7m0 0l-7 7m7-7H3"
+                    />
+                  </svg>
+                </span>
+                <span className="absolute font-bold text-base flex items-center justify-center w-full h-full  transition-all duration-300 transform group-hover:translate-x-full ease">
+                  All problems
+                </span>
+                <span className="relative invisible">All problems</span>
+              </p>
+            </Link>
+          </div>
+
+          <div className="">
+            <img
+              src="/hero-img-osc-min.png"
+              alt="Hero Image"
+              className="max-w-sm md:w-full h-full"
             />
-          ))}
+          </div>
+        </div>
+
+        <div>
+          <Marquee />
+        </div>
+
+        <div className="flex flex-col justify-center">
+          <h2 className="font-bold py-1 text-center lg:text-left text-3xl lg:text-4xl mb-8">
+            Questions
+          </h2>
+          <div className="mx-auto grid md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {buttonDetails.map(({ name, description }) => (
+              <Card
+                key={name}
+                name={name}
+                description={description}
+                linkName={name}
+                onClick={() => gaEventTracker("click", `Card - ${name}`)}
+              />
+            ))}
+          </div>
         </div>
+
+        <div>
+          <p className="max-w-prose font-light  leading-8">
+            Help us improve! Share your honest{" "}
+            <Link to={`/feedback`}>
+              <strong className="text-lime-400 font-bold">feedback</strong>
+            </Link>{" "}
+            for a better user experience.
+          </p>
+        </div>
+
+        <Footer />
       </div>
-     
-      <Footer />
-    </div>
+    </main>
   );
 };
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 87b43f7..064c047 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,33 +6,33 @@ export default {
       colors: {
         lightblue: "#add8e6",
         primary: {
-          "50": "#eff6ff",
-          "100": "#dbeafe",
-          "200": "#bfdbfe",
-          "300": "#93c5fd",
-          "400": "#60a5fa",
-          "500": "#3b82f6",
-          "600": "#2563eb",
-          "700": "#1d4ed8",
-          "800": "#1e40af",
-          "900": "#1e3a8a",
-          "950": "#172554"
-        }
+          50: "#eff6ff",
+          100: "#dbeafe",
+          200: "#bfdbfe",
+          300: "#93c5fd",
+          400: "#60a5fa",
+          500: "#3b82f6",
+          600: "#2563eb",
+          700: "#1d4ed8",
+          800: "#1e40af",
+          900: "#1e3a8a",
+          950: "#172554",
+        },
       },
       animation: {
-        marquee: "marquee 450s linear infinite",
-        marquee2: "marquee2 25s linear infinite"
+        marquee: "marquee 25s linear infinite",
+        marquee2: "marquee2 25s linear infinite",
       },
       keyframes: {
         marquee: {
           "0%": { transform: "translateX(0%)" },
-          "100%": { transform: "translateX(-100%)" }
+          "100%": { transform: "translateX(-100%)" },
         },
         marquee2: {
           "0%": { transform: "translateX(100%)" },
-          "100%": { transform: "translateX(0%)" }
-        }
-      }
+          "100%": { transform: "translateX(0%)" },
+        },
+      },
     },
     fontFamily: {
       body: [
@@ -50,7 +50,7 @@ export default {
         "Apple Color Emoji",
         "Segoe UI Emoji",
         "Segoe UI Symbol",
-        "Noto Color Emoji"
+        "Noto Color Emoji",
       ],
       sans: [
         "Inter",
@@ -67,9 +67,9 @@ export default {
         "Apple Color Emoji",
         "Segoe UI Emoji",
         "Segoe UI Symbol",
-        "Noto Color Emoji"
-      ]
-    }
+        "Noto Color Emoji",
+      ],
+    },
   },
-  plugins: []
+  plugins: [],
 };