diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 17ec0d8..02345a6 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -14,3 +14,7 @@ Please ensure the following before submitting your PR:
 
 ## Screenshots (if applicable)
 <!-- Add screenshots to help explain your changes -->
+
+## Closes 
+<!-- Close your Issue here  -->
+
diff --git a/app/(main)/components/HeroPage.tsx b/app/(main)/components/HeroPage.tsx
new file mode 100644
index 0000000..19af0b6
--- /dev/null
+++ b/app/(main)/components/HeroPage.tsx
@@ -0,0 +1,74 @@
+import Link from "next/link";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Home",
+  description: "StellarAid — Empowering communities through technology",
+};
+
+const HeroPage = () => {
+  return (
+    <section className="w-full max-w-3xl mx-auto text-center relative overflow-hidden rounded-2xl">
+      {/* Foreground content sits above the canvas */}
+      <div className="relative z-10 py-20 px-6">
+        {/* Heading */}
+        <h1 className="text-4xl sm:text-5xl font-extrabold text-gray-900 leading-tight mb-5 tracking-tight">
+          Know that your donation
+          <br />
+          is making a difference
+        </h1>
+
+        {/* Sub-copy */}
+        <p className="text-sm sm:text-base text-gray-500 max-w-lg mx-auto mb-8 leading-relaxed">
+          StellarAid uses blockchain transparency to prove every single project
+          you fund, complete with verification and real-time impact tracking.
+        </p>
+
+        {/* CTA Buttons */}
+        <div className="flex flex-wrap justify-center gap-3 mb-14">
+          <Link
+            href="/dashboard"
+            className="px-6 py-2.5 rounded-lg text-white text-sm font-semibold shadow-sm transition-colors"
+            style={{ backgroundColor: "#5575df" }}
+          >
+            Donate Now
+          </Link>
+          <Link
+            href="/about"
+            className="px-6 py-2.5 rounded-lg border border-gray-300 bg-white text-gray-700 text-sm font-semibold hover:bg-gray-50 transition-colors"
+          >
+            Learn More
+          </Link>
+        </div>
+
+        {/* Stats Card — frosted glass so particles show through */}
+        <div className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-sm border border-gray-100 py-7 px-6 flex flex-wrap justify-center gap-10 sm:gap-16">
+          <div className="flex flex-col items-center gap-1">
+            <span className="text-3xl font-extrabold text-blue-600">$2.4M</span>
+            <span className="text-xs text-gray-400 font-medium uppercase tracking-wide">
+              Donated
+            </span>
+          </div>
+          <div className="hidden sm:block w-px bg-gray-100 self-stretch" />
+          <div className="flex flex-col items-center gap-1">
+            <span className="text-3xl font-extrabold text-yellow-500">
+              12.5K
+            </span>
+            <span className="text-xs text-gray-400 font-medium uppercase tracking-wide">
+              Projects
+            </span>
+          </div>
+          <div className="hidden sm:block w-px bg-gray-100 self-stretch" />
+          <div className="flex flex-col items-center gap-1">
+            <span className="text-3xl font-extrabold text-green-500">89K</span>
+            <span className="text-xs text-gray-400 font-medium uppercase tracking-wide">
+              Donors
+            </span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroPage;
diff --git a/app/(main)/components/WhyChooseUs.tsx b/app/(main)/components/WhyChooseUs.tsx
index 16c8857..70c37bf 100644
--- a/app/(main)/components/WhyChooseUs.tsx
+++ b/app/(main)/components/WhyChooseUs.tsx
@@ -40,7 +40,7 @@ const WhyChooseUs: React.FC = () => {
           {features.map((feature, index) => (
             <div
               key={index}
-              className="bg-white p-8 rounded-xl border border-[#E2E8F0] shadow-sm 
+              className="bg-white cursor-pointer p-8 rounded-xl border border-[#E2E8F0] shadow-sm 
                          transition-all duration-300 ease-in-out 
                          hover:shadow-md hover:-translate-y-1 hover:border-[#CBD5E1]"
             >
diff --git a/app/(main)/page.tsx b/app/(main)/page.tsx
index 01cd616..0594c68 100644
--- a/app/(main)/page.tsx
+++ b/app/(main)/page.tsx
@@ -1,71 +1,12 @@
-import type { Metadata } from "next";
-import Link from "next/link";
 import { WhyChooseUs } from "./components/WhyChooseUs";
 import Footer from "./components/Footer";
-
-
-export const metadata: Metadata = {
-  title: "Home",
-  description: "StellarAid — Empowering communities through technology",
-};
+import HeroPage from "./components/HeroPage";
 
 export default function HomePage() {
   return (
     <div className="min-h-screen bg-[#f0f4fa] flex flex-col">
       {/* ── Hero ─────────────────────────────────────────────────────── */}
-      <section className="w-full max-w-3xl mx-auto text-center relative overflow-hidden rounded-2xl">
-
-        {/* Foreground content sits above the canvas */}
-        <div className="relative z-10 py-20 px-6">
-          {/* Heading */}
-          <h1 className="text-4xl sm:text-5xl font-extrabold text-gray-900 leading-tight mb-5 tracking-tight">
-            Know that your donation
-            <br />
-            is making a difference
-          </h1>
-
-          {/* Sub-copy */}
-          <p className="text-sm sm:text-base text-gray-500 max-w-lg mx-auto mb-8 leading-relaxed">
-            StellarAid uses blockchain transparency to prove every single project you fund,
-            complete with verification and real-time impact tracking.
-          </p>
-
-          {/* CTA Buttons */}
-          <div className="flex flex-wrap justify-center gap-3 mb-14">
-            <Link
-              href="/dashboard"
-              className="px-6 py-2.5 rounded-lg text-white text-sm font-semibold shadow-sm transition-colors"
-              style={{ backgroundColor: "#1e40af" }}
-            >
-              Donate Now
-            </Link>
-            <Link
-              href="/about"
-              className="px-6 py-2.5 rounded-lg border border-gray-300 bg-white text-gray-700 text-sm font-semibold hover:bg-gray-50 transition-colors"
-            >
-              Learn More
-            </Link>
-          </div>
-
-          {/* Stats Card — frosted glass so particles show through */}
-          <div className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-sm border border-gray-100 py-7 px-6 flex flex-wrap justify-center gap-10 sm:gap-16">
-            <div className="flex flex-col items-center gap-1">
-              <span className="text-3xl font-extrabold text-blue-600">$2.4M</span>
-              <span className="text-xs text-gray-400 font-medium uppercase tracking-wide">Donated</span>
-            </div>
-            <div className="hidden sm:block w-px bg-gray-100 self-stretch" />
-            <div className="flex flex-col items-center gap-1">
-              <span className="text-3xl font-extrabold text-yellow-500">12.5K</span>
-              <span className="text-xs text-gray-400 font-medium uppercase tracking-wide">Projects</span>
-            </div>
-            <div className="hidden sm:block w-px bg-gray-100 self-stretch" />
-            <div className="flex flex-col items-center gap-1">
-              <span className="text-3xl font-extrabold text-green-500">89K</span>
-              <span className="text-xs text-gray-400 font-medium uppercase tracking-wide">Donors</span>
-            </div>
-          </div>
-        </div>
-      </section>
+      <HeroPage />
       <section>
         <WhyChooseUs />
       </section>
diff --git a/package-lock.json b/package-lock.json
index 28b9182..56e0809 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -940,7 +940,6 @@
       "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -1385,7 +1384,6 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1879,7 +1877,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -2612,7 +2609,6 @@
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -2781,7 +2777,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -5253,7 +5248,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -5470,7 +5464,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -5483,7 +5476,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -5497,7 +5489,6 @@
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.71.2.tgz",
       "integrity": "sha512-1CHvcDYzuRUNOflt4MOq3ZM46AronNJtQ1S7tnX6YN4y72qhgiUItpacZUAQ0TyWYci3yz1X+rXaSxiuEm86PA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18.0.0"
       },
@@ -6467,7 +6458,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6669,7 +6659,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"