diff --git a/web/app/hacker/HackerForm/HackathonProfileForm.tsx b/web/app/hacker/HackerForm/HackathonProfileForm.tsx
index b2f3256a..dd686f53 100644
--- a/web/app/hacker/HackerForm/HackathonProfileForm.tsx
+++ b/web/app/hacker/HackerForm/HackathonProfileForm.tsx
@@ -167,7 +167,7 @@ export default function Component() {
                 <span className="text-lg font-medium text-purple-400">Disagree</span>
                 <RadioGroup
                   id={`question-${question.id}`}
-                  onValueChange={(value) => handleAnswer(question.id, value)}
+                  onValueChange={(value: any) => handleAnswer(question.id, value)}
                   className="flex justify-center items-center space-x-6"
                 >
                   {[1, 2, 3, 4, 5].map((value) => (
@@ -182,16 +182,20 @@ export default function Component() {
                         key={value}
                         value={value.toString()}
                         id={`q${question.id}-${value}`}
-                        className={`h-8 w-8 border-4 rounded-full transition-colors duration-300 ${
-                          value <= 2 ? 'hover:bg-[#e4b4f9] border-[#d393f7]' : 
-                          value >= 4 ? 'hover:bg-[#baf2df] border-[#8ee9c2]' : 
-                          'hover:bg-gray-200 border-gray-400'
+                        className={`h-8 w-8 rounded-full transition-colors duration-300 ${
+                          answers[question.id] === value.toString() 
+                            ? (value <= 2 ? 'bg-[#d393f7] border-[#d393f7]' 
+                            : value >= 4 ? 'bg-[#8ee9c2] border-[#8ee9c2]' 
+                            : 'bg-gray-400 border-gray-400') 
+                            : 'border-4 ' + (value <= 2 ? 'hover:bg-[#e4b4f9] border-[#d393f7]' 
+                            : value >= 4 ? 'hover:bg-[#baf2df] border-[#8ee9c2]' 
+                            : 'hover:bg-gray-200 border-gray-400')
                         }`}
+                        onClick={() => handleAnswer(question.id, value.toString())}
                       />
                     </div>
                   ))}
                 </RadioGroup>
-
                 <span className="text-lg font-medium text-green-400">Agree</span>
               </div>
               <p className="text-base text-gray-500 text-center">{question.category}</p>
diff --git a/web/app/matching/MatchingPage/Matching.tsx b/web/app/matching/MatchingPage/Matching.tsx
new file mode 100644
index 00000000..197d6ffa
--- /dev/null
+++ b/web/app/matching/MatchingPage/Matching.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+
+const Match = () => {
+  const matches = [
+    { name: 'David', role: '3rd Year Software Engineer', skills: 'Java, Python, React', photo: 'https://via.placeholder.com/150' },
+    { name: 'David', role: '3rd Year Software Engineer', skills: 'Java, Python, React', photo: 'https://via.placeholder.com/150' },
+    { name: 'David', role: '3rd Year Software Engineer', skills: 'Java, Python, React', photo: 'https://via.placeholder.com/150' },
+    { name: 'David', role: '3rd Year Software Engineer', skills: 'Java, Python, React', photo: 'https://via.placeholder.com/150' },
+    { name: 'David', role: '3rd Year Software Engineer', skills: 'Java, Python, React', photo: 'https://via.placeholder.com/150' }
+  ];
+
+  return (
+    <div className="min-h-screen" style={{ backgroundColor: '#f6f1e7', padding: '2rem' }}>
+      {/* Header Section */}
+      <div className="text-center mb-8">
+        <h1 className="text-5xl font-bold text-[#707853] mb-4">Let’s find your match!</h1>
+        <div className="flex justify-center items-center mb-6">
+          <img src="https://via.placeholder.com/150x150" alt="Pie Chart" className="w-60 h-60 rounded-full mr-8 shadow-lg transition-transform duration-300 hover:scale-105" />
+          <div className="text-[#7f5747] text-lg font-bold bg-white p-4 rounded-lg shadow-md">
+            <p>Python - 71.7%</p>
+            <p>JavaScript - 22.9%</p>
+            <p>Other - 2.7%</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Middle Section - Brown Bar and White Box */}
+      <div className="relative mb-10">
+        <div className="bg-[#a57d57] h-4 w-full absolute top-0"></div>
+        <div className="bg-white p-6 rounded-lg shadow-md text-center">
+          <p className="text-lg text-gray-700">
+            Here are the 5 people attending <span className="text-[#fc823e] font-bold">Hack The North</span> that we think you should meet. Take the next step and reach out!
+          </p>
+        </div>
+      </div>
+
+      {/* Profiles Section - 3 on top, 2 on bottom */}
+      <div className="grid grid-cols-3 gap-16 justify-items-center mb-8">
+        {matches.slice(0, 3).map((match, index) => (
+          <div
+            key={index}
+            className="relative bg-white p-8 rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300 transform hover:scale-105 text-center w-80"
+          >
+            <img
+              src={match.photo}
+              alt={match.name}
+              className="w-24 h-24 mx-auto rounded-full mb-4"
+            />
+            <h2 className="text-xl font-bold mb-2">{match.name}</h2>
+            <p className="text-gray-700">{match.role}</p>
+            <p className="text-gray-700">{match.skills}</p>
+            <a href="#" className="text-[#fc823e] mt-2 block">Contact</a>
+          </div>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-2 gap-16 justify-items-center">
+        {matches.slice(3).map((match, index) => (
+          <div
+            key={index}
+            className="relative bg-white p-8 rounded-lg shadow-lg hover:shadow-2xl transition-shadow duration-300 transform hover:scale-105 text-center w-80"
+          >
+            <img
+              src={match.photo}
+              alt={match.name}
+              className="w-24 h-24 mx-auto rounded-full mb-4"
+            />
+            <h2 className="text-xl font-bold mb-2">{match.name}</h2>
+            <p className="text-gray-700">{match.role}</p>
+            <p className="text-gray-700">{match.skills}</p>
+            <a href="#" className="text-[#fc823e] mt-2 block">Contact</a>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Match;
diff --git a/web/app/matching/layout.tsx b/web/app/matching/layout.tsx
new file mode 100644
index 00000000..0373c309
--- /dev/null
+++ b/web/app/matching/layout.tsx
@@ -0,0 +1,64 @@
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import Link from "next/link";
+import { ReactNode } from "react";
+
+export default function SplashPageLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <div className="flex min-h-screen w-full flex-col">
+      <header className="sticky top-0 z-10 flex h-20 border-b bg-background/80 px-4 backdrop-blur md:px-6">
+        <nav className="container hidden w-full justify-between gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
+          <Link href="/">
+          
+            <Image
+              src="/Hackd.png"
+              alt="Logo"
+              width={128}
+              height={128}
+              className="rounded-full"/>
+          </Link>
+          <div className="flex items-center gap-4">
+            <SplashPageNav />
+          </div>
+        </nav>
+      </header>
+      <main className="flex grow flex-col">{children}</main>
+      <footer className="border-t">
+        <div className="container py-4 text-sm leading-loose">
+          Built with ❤️ at{" "}
+          <FooterLink href="https://hackthenorth2024.devpost.com/">HackTheNorth2024</FooterLink>.
+          Powered by Convex,{" "}
+          <FooterLink href="https://nextjs.org/">Next.js</FooterLink> and{" "}
+          <FooterLink href="https://ui.shadcn.com/">shadcn/ui</FooterLink>.
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+function FooterLink({ href, children }: { href: string; children: ReactNode }) {
+  return (
+    <Link
+      href={href}
+      className="underline underline-offset-4 hover:no-underline"
+      target="_blank"
+    >
+      {children}
+    </Link>
+  );
+}
+
+function SplashPageNav() {
+  return (
+    <>
+    
+      <Link href="/product">
+        <Button>Get Started</Button>
+      </Link>
+    </>
+  );
+}
diff --git a/web/app/matching/page.tsx b/web/app/matching/page.tsx
new file mode 100644
index 00000000..1a068260
--- /dev/null
+++ b/web/app/matching/page.tsx
@@ -0,0 +1,5 @@
+import SurveyForm from "./MatchingPage/Matching";
+
+export default function HomePage() {
+  return <SurveyForm/>;
+}
\ No newline at end of file