diff --git a/frontend/app/(authenticated)/profile/page.tsx b/frontend/app/(authenticated)/profile/page.tsx
index 54cddbf14f..ae5c513785 100644
--- a/frontend/app/(authenticated)/profile/page.tsx
+++ b/frontend/app/(authenticated)/profile/page.tsx
@@ -18,7 +18,7 @@ export default function Home() {
         email: "john@example.com",
         password: "abcdefgh",
     });
-    const initialUserData  = useRef({
+    const initialUserData = useRef({
         username: "johndoe",
         email: "john@example.com",
         password: "abcdefgh",
@@ -51,7 +51,7 @@ export default function Home() {
 
                 const data = (await response.json()).data;
                 // placeholder for password *Backend wont expose password via any API call
-                const password = "********";
+                const password = "";
 
                 setUserData({
                     username: data.username,
@@ -73,7 +73,7 @@ export default function Home() {
     }, []);
 
      // Validate the password before making the API call
-     const validatePassword = (password: string) => {
+    const validatePassword = (password: string) => {
         let errorMessage = "";
         if (!/[A-Z]/.test(password)) {
             errorMessage += "Must contain at least one uppercase letter.\n";
@@ -163,7 +163,7 @@ export default function Home() {
                     throw new Error("Error during email verification process.");
                 }                
             }
-              
+
             if (userData.password !== initialUserData.current.password) {
                 console.log("detect password change: original:", initialUserData.current.password, " new pw: ", userData.password)
                 // Check for password validity
@@ -232,8 +232,8 @@ export default function Home() {
     }
 
     return (
-        <main className="flex items-center justify-center min-h-screen p-4 font-sans text-black">
-            <Card className="w-full max-w-xl rounded-2xl">
+        <main className="flex items-start justify-center min-h-screen p-4 font-sans text-black">
+            <Card className="mt-40 w-full max-w-xl rounded-2xl">
                 <CardHeader className="flex flex-row items-center justify-between">
                     <CardTitle className="font-serif font-normal tracking-tight text-3xl">Profile</CardTitle>
                     {isEditing ? (
@@ -253,7 +253,7 @@ export default function Home() {
                 </CardHeader>
                 <CardContent>
                     {feedback.message && (
-                        <Alert variant={feedback.type === 'error' ? 'destructive' : 'default'}>
+                        <Alert variant={feedback.type === 'error' ? 'destructive' : 'default'} className="mb-4">
                             <AlertCircle className="h-4 w-4" />
                             <AlertTitle className="font-semibold">
                                 {feedback.type === 'error' ? 'Error' : 'Check your email'}
diff --git a/frontend/app/(authenticated)/questions/page.tsx b/frontend/app/(authenticated)/questions/page.tsx
index cc576c3694..c4bb82bb9b 100644
--- a/frontend/app/(authenticated)/questions/page.tsx
+++ b/frontend/app/(authenticated)/questions/page.tsx
@@ -3,12 +3,14 @@
 import { Badge, BadgeProps } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
 import { MultiSelect } from "@/components/ui/multi-select";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { Flag, MessageSquareText } from "lucide-react";
-import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { Check, ChevronsRight, Flag, MessageSquareText, Plus, X } from "lucide-react";
 import { useRouter } from "next/navigation";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 
 type Question = {
     id: number;
@@ -48,7 +50,7 @@ const categoryList: Array<{
         { value: "strings", label: "Strings", badgeVariant: "category" },
     ];
 
-export default function Home() {
+export default function Questions() {
     const router = useRouter();
     const [selectedComplexities, setSelectedComplexities] = useState<string[]>(
         complexityList.map((diff) => diff.value)
@@ -62,9 +64,17 @@ export default function Home() {
         useState<Question | null>(null);
     const [isSelectAll, setIsSelectAll] = useState(false);
     const [reset, setReset] = useState(false);
+    
+    const [isMatching, setIsMatching] = useState(false);
+    const [isHovering, setIsHovering] = useState(false);
+    const [matchTime, setMatchTime] = useState(0);
+    const [redirectTime, setRedirectTime] = useState(5);
+    const matchTimerRef = useRef<NodeJS.Timeout | null>(null);
+    const [isMatchFoundDialogOpen, setMatchFoundDialogOpen] = useState(false);
+    const [isMatchFailDialogOpen, setMatchFailDialogOpen] = useState(false);
 
-     // authenticate user else redirect them to login page
-     useEffect(() => {
+    // authenticate user else redirect them to login page
+    useEffect(() => {
         const authenticateUser = async () => {
             try {
                 const token = localStorage.getItem('token');
@@ -89,7 +99,7 @@ export default function Home() {
                 }
 
                 const data = (await response.json()).data;
-                
+
                 // if needed
                 // setUsername(data.username);
                 // setEmail(data.email);
@@ -100,8 +110,8 @@ export default function Home() {
                 console.error('Error during authentication:', error);
                 router.push('/login'); // Redirect to login in case of any error
             }
-    };
-    authenticateUser();
+        };
+        authenticateUser();
     }, []);
 
     // Fetch questions from backend API
@@ -114,7 +124,7 @@ export default function Home() {
                 const data = await response.json();
 
                 // Map backend data to match the frontend Question type
-                const mappedQuestions: Question[] = data.map((q: {id: number, title: string, complexity: string, category: string[], description: string, link: string,selected: boolean}) => ({
+                const mappedQuestions: Question[] = data.map((q: { id: number, title: string, complexity: string, category: string[], description: string, link: string, selected: boolean }) => ({
                     id: q.id,
                     title: q.title,
                     complexity: complexityList.find(
@@ -140,7 +150,7 @@ export default function Home() {
         if (filtersElement) {
             const filtersRect = filtersElement.getBoundingClientRect();
             const totalHeight = filtersRect.bottom;
-            setFiltersHeight(totalHeight+16);
+            setFiltersHeight(totalHeight + 16);
         }
     }, []);
 
@@ -219,7 +229,81 @@ export default function Home() {
 
     useEffect(() => {
         console.log("Selected complexities:", selectedComplexities);
-    }, [selectedComplexities]); // This effect runs every time selectedComplexities change 
+    }, [selectedComplexities]); // This effect runs every time selectedcomplexities change 
+
+    const handleMatch = useCallback(() => {
+        setIsMatching(prev => !prev);
+        setIsHovering(false);
+    }, []);
+
+    useEffect(() => {
+        if (isMatching) {
+            setMatchTime(0);
+            matchTimerRef.current = setInterval(() => {
+                setMatchTime((prevTime) => {
+                    if (prevTime >= 32) { // we use 32 so there is buffer
+                        clearInterval(matchTimerRef.current as NodeJS.Timeout);
+                        setMatchFailDialogOpen(true);
+                        // setMatchFoundDialogOpen(true); // use this to open match found dialog
+                        return 32;
+                    }
+                    return prevTime + 1;
+                });
+            }, 1000);
+        } else {
+            if (matchTimerRef.current) {
+                clearInterval(matchTimerRef.current);
+            }
+            setMatchTime(0);
+        }
+    }, [isMatching]);   
+
+    useEffect(() => {
+        if (isMatchFoundDialogOpen) {
+            setRedirectTime(5);
+            const redirectTimer = setInterval(() => {
+                setRedirectTime((prevTime) => {
+                    if (prevTime <= 1) {
+                        clearInterval(redirectTimer);
+                        // router.push('/questions');  Redirect to question page
+                        setMatchFoundDialogOpen(false);
+                        setIsMatching(false);
+                        return 0;
+                    }
+                    return prevTime - 1;
+                });
+            }, 1000);
+    
+            return () => clearInterval(redirectTimer);
+        }
+    }, [isMatchFoundDialogOpen, router]);
+    
+    useEffect(() => {
+        if (isMatchFailDialogOpen) {
+            setRedirectTime(5);
+            const redirectTimer = setInterval(() => {
+                setRedirectTime((prevTime) => {
+                    if (prevTime <= 1) {
+                        clearInterval(redirectTimer);
+                        setMatchFailDialogOpen(false);
+                        setIsMatching(false);
+                        return 0;
+                    }
+                    return prevTime - 1;
+                });
+            }, 1000);
+    
+            return () => clearInterval(redirectTimer);
+        }
+    }, [isMatchFailDialogOpen, router]);
+
+    const handleMouseEnter = useCallback(() => {
+        setIsHovering(true);
+    }, []);
+
+    const handleMouseLeave = useCallback(() => {
+        setIsHovering(false);
+    }, []);
 
     return (
         <main className="flex min-h-screen flex-row px-4 mx-8 mt-0 pt-0 gap-4 font-sans text-black">
@@ -262,8 +346,9 @@ export default function Home() {
                                 variant="outline"
                                 className="uppercase rounded-3xl"
                                 onClick={handleSelectAll}
+                                disabled={isMatching}
                             >
-                                {isSelectAll ? "Deselect All" : "Select All"}
+                                {isSelectAll ? "Remove all" : "Add all"}
                             </Button>
                         )}
                     </div>
@@ -274,7 +359,6 @@ export default function Home() {
                         type="hover"
                     >
                         <div className="flex flex-col gap-2 overflow-auto pl-4 pr-4 pb-4" style={{ paddingTop: `${filtersHeight}px` }}>
-                            
                             {filteredQuestions.length == 0 ? (
                                 <div className="flex flex-col pt-80 gap-6 items-center justify-center text-center">
                                     <p className="text-base">No questions found</p>
@@ -289,7 +373,7 @@ export default function Home() {
                                         >
                                             <div className="flex-1">
                                                 <h3 className="text-xl font-serif font-semibold tracking-tight">
-                                                    {question.title}
+                                                    {question.id}. {question.title}
                                                 </h3>
                                                 <div className="flex items-center gap-2 mt-3">
                                                     <Badge
@@ -309,9 +393,15 @@ export default function Home() {
                                             <Button
                                                 variant={question.selected ? "default" : "outline"}
                                                 className="ml-4"
+                                                size="sm"
                                                 onClick={() => handleSelectQuestion(question.id)}
+                                                disabled={isMatching}
                                             >
-                                                {question.selected ? "Selected" : "Select"}
+                                                    {question.selected ? (
+                                                        <div className="flex justify-center items-center"><Check className="h-4 w-4 mr-2" />Added</div>
+                                                    ) : (
+                                                        <div className="flex justify-center items-center"><Plus className="h-4 w-4 mr-2" />Add</div>
+                                                    )}
                                             </Button>
                                         </Card>
                                     </div>
@@ -321,43 +411,152 @@ export default function Home() {
                     </ScrollArea>
                 </div>
             </div>
-            <div className="hidden desktop:block desktop:w-1/2 mt-24 mb-8 p-6 bg-white drop-shadow-question-details rounded-xl">
-                {!selectedViewQuestion ? (
-                    <div className="flex items-center justify-center h-full text-muted-foreground">Select a question to view</div>
-                ) : (
-                    <div className="desktop:flex desktop:flex-col">
-                        <h3 className="text-2xl font-serif font-medium tracking-tight">
-                            {selectedViewQuestion.title}
-                        </h3>
-                        <div className="flex items-center gap-10 mt-3">
-                            <div className="flex items-center gap-2">
-                                <Flag className="h-4 w-4 text-icon" />
-                                <Badge
-                                    variant={
-                                        selectedViewQuestion.complexity as BadgeProps["variant"]
-                                    }
-                                >
-                                    {selectedViewQuestion.complexity}
-                                </Badge>
+            <div className="hidden mt-24 mb-8 desktop:w-1/2 desktop:flex desktop:flex-col space-y-4 px-4">
+                <div className="flex gap-4 justify-between items-end">
+                    <div className="flex flex-col w-[70%] items-start text-sm">
+                        <div className="font-medium pb-1.5 pl-2.5">Questions added for matching</div>
+                        {questionList.filter((question) => question.selected).length == 0 ? (
+                            <div className="flex p-1 h-20 w-full bg-gray-50 rounded-xl text-xs text-muted-foreground items-center justify-center">No questions added for matching</div>
+                        ) : (
+                            <div className="w-full p-1 h-20 bg-gray-50 rounded-xl">
+                                <ScrollArea type="auto" barOffset={1} className="h-full">
+                                    <div className="flex flex-wrap gap-0.5 mr-4">
+                                        {questionList
+                                            .filter((question) => question.selected)
+                                            .map((question) => (
+                                                <HoverCard key={question.id} openDelay={300}>
+                                                    <HoverCardTrigger>
+                                                        <Badge variant={question.complexity as BadgeProps["variant"]} className="w-fit">
+                                                            {question.title}
+                                                        </Badge>
+                                                    </HoverCardTrigger>
+                                                    <HoverCardContent className="rounded-xl p-2 w-fit">
+                                                        <div className="flex items-center gap-2">
+                                                            <MessageSquareText className="h-4 w-4 text-icon" />
+                                                            {question.categories.map((category) => (
+                                                                <Badge
+                                                                    key={category}
+                                                                    variant="category"
+                                                                    className="uppercase text-category-text bg-category-bg"
+                                                                >
+                                                                    {category}
+                                                                </Badge>
+                                                            ))}
+                                                        </div>
+                                                    </HoverCardContent>
+                                                </HoverCard>
+                                            ))}
+
+                                    </div>
+                                </ScrollArea>
                             </div>
-                            <div className="flex items-center gap-2">
-                                <MessageSquareText className="h-4 w-4 text-icon" />
-                                {selectedViewQuestion.categories.map((category) => (
+                        )}
+                    </div>
+                    <div className="">
+                        <Button
+                            variant="match"
+                            className={cn(
+                                "group min-w-[150px] max-w-[150px] font-brand uppercase",
+                                isMatching && !isHovering && "bg-brand-600 hover:bg-brand-600 text-white",
+                                isMatching && isHovering && "text-destructive-foreground hover:bg-destructive/90"
+                            )}
+                            onClick={handleMatch}
+                            onMouseEnter={handleMouseEnter}
+                            onMouseLeave={handleMouseLeave}
+                        >
+                            {isMatching 
+                                ? (isHovering ? 'Cancel' : 'Matching') 
+                                : 'Match'}
+                            {isMatching ? (
+                                isHovering ? (
+                                    <X className="ml-2" />
+                                ) : (
+                                    <span className="ml-3 text-white/60 lowercase font-mono">{Math.min(matchTime, 30)}s</span>
+                                )
+                            ) : (
+                                <ChevronsRight className="ml-2 group-hover:translate-x-2 transition" />
+                            )}
+                        </Button>
+                    </div>
+                </div>
+                <div className="bg-white drop-shadow-question-details rounded-xl p-6 h-full">
+                    {!selectedViewQuestion ? (
+                        <div className="flex items-center justify-center h-full text-muted-foreground">Click on a question to view its details</div>
+                    ) : (
+                        <div className="desktop:flex desktop:flex-col">
+                            <h3 className="text-2xl font-serif font-medium tracking-tight">
+                                {selectedViewQuestion.title}
+                            </h3>
+                            <div className="flex items-center gap-10 mt-3">
+                                <div className="flex items-center gap-2">
+                                    <Flag className="h-4 w-4 text-icon" />
                                     <Badge
-                                        key={category}
-                                        variant="category"
-                                        className="uppercase text-category-text bg-category-bg"
+                                        variant={
+                                            selectedViewQuestion.complexity as BadgeProps["variant"]
+                                        }
                                     >
-                                        {category}
+                                        {selectedViewQuestion.complexity}
                                     </Badge>
-                                ))}
+                                </div>
+                                <div className="flex items-center gap-2">
+                                    <MessageSquareText className="h-4 w-4 text-icon" />
+                                    {selectedViewQuestion.categories.map((category) => (
+                                        <Badge
+                                            key={category}
+                                            variant="category"
+                                            className="uppercase text-category-text bg-category-bg"
+                                        >
+                                            {category}
+                                        </Badge>
+                                    ))}
+                                </div>
                             </div>
+                            <p className="mt-8 text-sm text-foreground">
+                                {selectedViewQuestion.description}
+                            </p>
                         </div>
-                        <p className="mt-8 text-sm text-foreground">
-                            {selectedViewQuestion.description}
-                        </p>
-                    </div>
-                )}
+                    )}
+                </div>
+
+                <Dialog open={isMatchFoundDialogOpen}>
+                    <DialogContent
+                        className="laptop:max-w-[40vw] bg-white text-black font-sans rounded-2xl [&>button]:hidden"
+                        onPointerDownOutside={(e) => e.preventDefault()}
+                        onInteractOutside={(e) => e.preventDefault()}
+                        onEscapeKeyDown={(e) => e.preventDefault()}
+                    >
+                        <DialogHeader className="items-start">
+                        <DialogTitle className="font-serif font-normal tracking-tight text-3xl">
+                            Match found
+                        </DialogTitle>
+                        <DialogDescription className="hidden"></DialogDescription>
+                        </DialogHeader>
+                        <div className="flex flex-col w-full gap-1 py-4 justify-start">
+                            <p>You have been matched with <span className="font-semibold">username</span></p>
+                            <p>Redirecting you back to the question page in {redirectTime} {redirectTime === 1 ? "second" : "seconds"}...</p>
+                        </div>
+                    </DialogContent>
+                </Dialog>
+
+                <Dialog open={isMatchFailDialogOpen}>
+                    <DialogContent
+                        className="laptop:max-w-[40vw] bg-white text-black font-sans rounded-2xl [&>button]:hidden"
+                        onPointerDownOutside={(e) => e.preventDefault()}
+                        onInteractOutside={(e) => e.preventDefault()}
+                        onEscapeKeyDown={(e) => e.preventDefault()}
+                    >
+                        <DialogHeader className="items-start">
+                        <DialogTitle className="font-serif font-normal tracking-tight text-3xl">
+                            Match not found
+                        </DialogTitle>
+                        <DialogDescription className="hidden"></DialogDescription>
+                        </DialogHeader>
+                        <div className="flex flex-col w-full gap-1 py-4 justify-start">
+                            <p>Please try again.</p>
+                            <p>Redirecting you back to the question page in {redirectTime} {redirectTime === 1 ? "second" : "seconds"}...</p>
+                        </div>
+                    </DialogContent>
+                </Dialog>
             </div>
         </main>
     );
diff --git a/frontend/app/auth/forgot-password/page.tsx b/frontend/app/auth/forgot-password/page.tsx
index 231cf44afa..963a7d5cfe 100644
--- a/frontend/app/auth/forgot-password/page.tsx
+++ b/frontend/app/auth/forgot-password/page.tsx
@@ -91,7 +91,7 @@ export default function ForgottenPassword() {
 
     return (
         <div className="flex flex-col min-h-screen w-screen px-10 items-start justify-center bg-white font-sans">
-            <div className="-mt-80 mx-auto flex flex-col justify-center gap-6 w-[350px]">
+            <div className="-mt-48 mx-auto flex flex-col justify-center gap-6 w-[350px]">
                 <div className="pb-10">
                     <Button asChild variant="ghost" size="sm" className="pl-0 py-1 pr-2 -ml-1"><Link href="/auth/login" className="text-muted-foreground"><ChevronLeft className="h-5 w-5" />Back to Login</Link></Button>
                 </div>
diff --git a/frontend/app/auth/forgot-password/verify-code/page.tsx b/frontend/app/auth/forgot-password/verify-code/page.tsx
index 40bc46bfec..97aac66b36 100644
--- a/frontend/app/auth/forgot-password/verify-code/page.tsx
+++ b/frontend/app/auth/forgot-password/verify-code/page.tsx
@@ -174,18 +174,18 @@ export default function OTPForm() {
   }
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100">
-      <div className="bg-white px-6 pt-10 pb-9 shadow-xl mx-auto w-full max-w-2xl rounded-2xl">
-        <div className="flex flex-col items-center justify-center text-center space-y-2 mb-5">
-          <div className="font-semibold text-3xl">
-            <p>Email Verification</p>
-          </div>
-          <div className="flex flex-row text-sm font-medium text-gray-400">
-            <p>We have sent a code to your email {param_email && ":" + param_email}<br/>Please check your email.</p>
-          </div>
+    <div className="flex items-center justify-center min-h-screen bg-gray-100 font-sans">
+      <div className="flex flex-col bg-white px-6 pt-10 pb-9 shadow-xl w-full max-w-2xl rounded-2xl">
+        <div className="flex flex-col gap-2 text-center">
+            <span className="font-serif font-light text-4xl text-primary tracking-tight">
+              Email Verification
+            </span>
+            <p className="text-sm text-muted-foreground">
+              We have sent a code to your email{param_email && ": " + param_email}
+            </p>
         </div>
         {error && (
-            <Alert variant="destructive">
+            <Alert variant="destructive" className="mt-4">
                 <AlertCircle className="h-4 w-4" />
                 <AlertTitle className="font-semibold">Error</AlertTitle>
                 <AlertDescription>
@@ -206,7 +206,7 @@ export default function OTPForm() {
                   <FormControl>
                     <OTPInput
                         maxLength={6}
-                        containerClassName="group flex items-center has-[:disabled]:opacity-30"
+                        containerClassName="group flex text-black items-center has-[:disabled]:opacity-30"
                         render={({ slots }) => (
                             <>
                             <div className="flex">
@@ -226,7 +226,7 @@ export default function OTPForm() {
                 {isLoading ? (
                     <LoaderCircle className="animate-spin" />
                 ) : (
-                    "Verify Account"
+                    "Verify"
                 )}
             </Button>
           </form>
diff --git a/frontend/app/auth/login/page.tsx b/frontend/app/auth/login/page.tsx
index 9a668f9604..9b565904bb 100644
--- a/frontend/app/auth/login/page.tsx
+++ b/frontend/app/auth/login/page.tsx
@@ -98,7 +98,7 @@ export default function Login() {
     }
 
     return (
-        <div className="flex min-h-screen w-screen px-10 items-center justify-center bg-white font-sans">
+        <div className="flex min-h-screen w-screen -mt-12 px-10 items-center justify-center bg-white font-sans">
             <div className="mx-auto flex flex-col justify-center gap-6 w-[350px]">
                 <div className="flex flex-col gap-2 text-left pb-1">
                     <span className="font-serif font-light text-4xl text-primary tracking-tight">
diff --git a/frontend/app/auth/reset-password/success/page.tsx b/frontend/app/auth/reset-password/success/page.tsx
index 85dc67ab6b..d4a5c46c66 100644
--- a/frontend/app/auth/reset-password/success/page.tsx
+++ b/frontend/app/auth/reset-password/success/page.tsx
@@ -8,21 +8,27 @@ const PasswordChangeSuccess = () => {
   const router = useRouter();
 
   const handleReturn = () => {
-    router.push('/');
+    router.push('/auth/login');
   };
 
   return (
-      <div className="flex flex-col items-center justify-center min-h-screen bg-white p-8 rounded-lg shadow-lg text-center">
+      <div className="flex flex-col items-center justify-center min-h-screen bg-white p-8 rounded-lg shadow-lg text-center font-sans gap-8">
         <div className="flex flex-col items-center mb-4">
         <svg className="w-24 h-24 text-green-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48" stroke="currentColor">
             <circle cx="24" cy="24" r="22" stroke="currentColor" strokeWidth="3" fill="none" />
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M14 24l6 6L34 16" />
           </svg>
         </div>
-        <h1 className="text-2xl font-semibold text-gray-800">Password Changed!</h1>
-        <p className="mt-2 text-gray-600">Your password has been changed successfully.</p>
+        <div className="flex flex-col gap-2 text-center">
+          <span className="font-serif font-light text-4xl text-primary tracking-tight">
+            Password Changed
+          </span>
+          <p className="text text-muted-foreground">
+            Your password has been changed successfully.
+          </p>
+        </div>
         <Button onClick={handleReturn} className="mt-6 w-full max-w-xs" variant="default">
-          Go to Login
+          Sign in
         </Button>
       </div>
   );
diff --git a/frontend/app/auth/sign-up/page.tsx b/frontend/app/auth/sign-up/page.tsx
index d04569b1f2..4c3640f773 100644
--- a/frontend/app/auth/sign-up/page.tsx
+++ b/frontend/app/auth/sign-up/page.tsx
@@ -230,7 +230,7 @@ export default function Signup() {
         await fetch(`${process.env.NEXT_PUBLIC_USER_API_EMAIL_URL}/send-verification-email`, {
             method: 'POST',
             headers: {
-              'Content-Type': 'application/json',
+                'Content-Type': 'application/json',
             },
             body: JSON.stringify({
                 username: username, 
@@ -244,11 +244,11 @@ export default function Signup() {
     return (
 
     <div className="min-h-screen w-screen laptop:flex">
-        <div className="hidden min-h-screen bg-brand-50 laptop:w-screen laptop:flex laptop:items-center laptop:justify-center">
-            <span className="text-4xl font-bold font-branding tracking-tight text-brand-700">PeerPrep</span>
+        <div className="hidden min-h-screen bg-brand-50 -mt-12 laptop:w-screen laptop:flex laptop:items-center laptop:justify-center">
+            <span className="text-4xl font-bold font-brand tracking-tight text-brand-700">PeerPrep</span>
         </div>
 
-        <div className="min-h-screen laptop:w-screen text-black font-sans flex flex-col items-center justify-center gap-6 mx-auto w-[350px]">
+        <div className="min-h-screen laptop:w-screen text-black font-sans flex flex-col items-center justify-center gap-6 mx-auto -mt-8 w-[350px]">
             <div className="flex flex-col gap-2 text-center">
                 <span className="font-serif font-light text-4xl text-primary tracking-tight">
                     Create an account
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 6fcee12e33..b818b83abf 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -35,7 +35,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${brandFont.variable} ${matterFont.variable} ${recklessNeueFont.variable} antialiased bg-white`}
+        className={`${brandFont.variable} ${matterFont.variable} ${recklessNeueFont.variable} font-sans antialiased bg-white`}
       >
         {children}
       </body>
diff --git a/frontend/app/question/page.tsx b/frontend/app/question/page.tsx
deleted file mode 100644
index 94ee5a931c..0000000000
--- a/frontend/app/question/page.tsx
+++ /dev/null
@@ -1,407 +0,0 @@
-"use client";
-
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Badge, BadgeProps } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
-import { MultiSelect } from "@/components/ui/multi-select";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Flag, MessageSquareText } from "lucide-react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import React, { useEffect, useState } from "react";
-
-type Question = {
-    id: number;
-    title: string;
-    complexity: string | undefined;
-    categories: (string | undefined)[];
-    description: string;
-    selected: boolean;
-};
-
-const complexityList: Array<{
-    value: string;
-    label: string;
-    badgeVariant: BadgeProps["variant"];
-}> = [
-        { value: "easy", label: "Easy", badgeVariant: "easy" },
-        { value: "medium", label: "Medium", badgeVariant: "medium" },
-        { value: "hard", label: "Hard", badgeVariant: "hard" },
-    ];
-
-const categoryList: Array<{
-    value: string;
-    label: string;
-    badgeVariant: BadgeProps["variant"];
-}> = [
-        { value: "algorithms", label: "Algorithms", badgeVariant: "category" },
-        { value: "arrays", label: "Arrays", badgeVariant: "category" },
-        {
-            value: "bitmanipulation",
-            label: "Bit Manipulation",
-            badgeVariant: "category",
-        },
-        { value: "brainteaser", label: "Brainteaser", badgeVariant: "category" },
-        { value: "databases", label: "Databases", badgeVariant: "category" },
-        { value: "datastructures", label: "Data Structures", badgeVariant: "category" },
-        { value: "recursion", label: "Recursion", badgeVariant: "category" },
-        { value: "strings", label: "Strings", badgeVariant: "category" },
-    ];
-
-export default function Home() {
-    const router = useRouter();
-    const [selectedComplexities, setSelectedComplexities] = useState<string[]>(
-        complexityList.map((diff) => diff.value)
-    );
-    const [selectedCategories, setSelectedCategories] = useState<string[]>(
-        categoryList.map((category) => category.value)
-    );
-    const [filtersHeight, setFiltersHeight] = useState(0);
-    const [questionList, setQuestionList] = useState<Question[]>([]); // Complete list of questions
-    const [selectedViewQuestion, setSelectedViewQuestion] =
-        useState<Question | null>(null);
-    const [isSelectAll, setIsSelectAll] = useState(false);
-    const [reset, setReset] = useState(false);
-
-    // authenticate user else redirect them to login page
-    useEffect(() => {
-        const authenticateUser = async () => {
-            try {
-                const token = localStorage.getItem('token');
-
-                if (!token) {
-                    router.push('/'); // Redirect to login if no token
-                    return;
-                }
-
-                // Call the API to verify the token
-                const response = await fetch(`${process.env.NEXT_PUBLIC_USER_API_AUTH_URL}/verify-token`, {
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Authorization': `Bearer ${token}`,
-                    },
-                });
-
-                if (!response.ok) {
-                    localStorage.removeItem("token"); // remove invalid token from browser
-                    router.push('/'); // Redirect to login if not authenticated
-                    return;
-                }
-
-                const data = (await response.json()).data;
-                
-                // if needed
-                // setUsername(data.username);
-                // setEmail(data.email);
-                // form.setValue("username", data.username);
-                // form.setValue("email", data.email);
-                // userId.current = data.id;
-            } catch (error) {
-                console.error('Error during authentication:', error);
-                router.push('/login'); // Redirect to login in case of any error
-            }
-    };
-    authenticateUser();
-    }, []);
-
-    // Fetch questions from backend API
-    useEffect(() => {
-        async function fetchQuestions() {
-            try {
-                const response = await fetch(`${process.env.NEXT_PUBLIC_QUESTION_API_BASE_URL}/all`, {
-                    cache: "no-store",
-                });
-                const data = await response.json();
-
-                // Map backend data to match the frontend Question type
-                const mappedQuestions: Question[] = data.map((q: {id: number, title: string, complexity: string, category: string[], description: string, link: string,selected: boolean}) => ({
-                    id: q.id,
-                    title: q.title,
-                    complexity: complexityList.find(
-                        (complexity) => complexity.value === q.complexity.toLowerCase()
-                    )?.value,
-                    categories: q.category.sort((a: string, b: string) => a.localeCompare(b)),
-                    description: q.description,
-                    link: q.link,
-                    selected: false, // Set selected to false initially
-                }));
-
-                setQuestionList(mappedQuestions); // Set the fetched data to state
-            } catch (error) {
-                console.error("Error fetching questions:", error);
-            }
-        }
-
-        fetchQuestions();
-    }, []);
-
-    useEffect(() => {
-        const filtersElement = document.getElementById("filters");
-        if (filtersElement) {
-            setFiltersHeight(filtersElement.offsetHeight);
-        }
-    }, []);
-
-    // Handle filtered questions based on user-selected complexities and categories
-    const filteredQuestions = questionList.filter((question) => {
-        const selectedcategoryLabels = selectedCategories.map(
-            (categoryValue) =>
-                categoryList.find((category) => category.value === categoryValue)?.label
-        );
-
-        const matchesComplexity =
-            selectedComplexities.length === 0 ||
-            (question.complexity &&
-                selectedComplexities.includes(question.complexity));
-
-        const matchesCategories =
-            selectedCategories.length === 0 ||
-            selectedcategoryLabels.some((category) => question.categories.includes(category));
-
-        return matchesComplexity && matchesCategories;
-    });
-
-    // Function to reset filters
-    const resetFilters = () => {
-        setSelectedComplexities(complexityList.map((diff) => diff.value));
-        setSelectedCategories(categoryList.map((category) => category.value));
-        setReset(true);
-    };
-
-    // Function to handle "Select All" button click
-    const handleSelectAll = () => {
-        const newIsSelectAll = !isSelectAll;
-        setIsSelectAll(newIsSelectAll);
-
-        // Toggle selection of all questions
-        const updatedQuestions = questionList.map((question) =>
-            filteredQuestions.map((f_qns) => f_qns.id).includes(question.id)
-                ? {
-                    ...question,
-                    selected: newIsSelectAll, // Select or unselect all questions
-                }
-                : question
-        );
-        setQuestionList(updatedQuestions);
-    };
-
-    // Function to handle individual question selection
-    const handleSelectQuestion = (id: number) => {
-        const updatedQuestions = questionList.map((question) =>
-            question.id === id
-                ? { ...question, selected: !question.selected }
-                : question
-        );
-        setQuestionList(updatedQuestions);
-    };
-
-    useEffect(() => {
-        const allSelected =
-            questionList.length > 0 && questionList.every((q) => q.selected);
-        const noneSelected =
-            questionList.length > 0 && questionList.every((q) => !q.selected);
-
-        if (allSelected) {
-            setIsSelectAll(true);
-        } else if (noneSelected) {
-            setIsSelectAll(false);
-        }
-    }, [questionList]);
-
-    useEffect(() => {
-        if (filteredQuestions.length === 0) {
-            setSelectedViewQuestion(null);
-        }
-    }, [filteredQuestions]);
-
-
-    useEffect(() => {
-        console.log("Selected complexities:", selectedComplexities);
-    }, [selectedComplexities]); // This effect runs every time selectedcomplexities change 
-
-    const handleProfileRedirect = () => {
-        router.push('/profile'); // Update with your actual profile page path
-    };
-
-    return (
-        // <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-        <div className="min-h-screen p-4 bg-white">
-            <header className="flex items-center justify-between p-4">
-                <div className="flex items-center gap-2">
-                    <Link
-                        href="/questions"
-                        className="text-2xl font-bold font-branding tracking-tight text-brand-700"
-                        prefetch={false}
-                    >
-                        PeerPrep
-                    </Link>
-                    {process.env.NODE_ENV == "development" && (
-                        <Badge variant="dev" className="ml-2 font-branding">
-                            DEV
-                        </Badge>
-                    )}
-                </div>
-                <div className="hidden desktop:flex items-center gap-4">
-                    <nav className="flex items-center gap-10 font-branding">
-                        <Link href="" className="text-lg font-semibold uppercase text-gray-700 drop-shadow-md" prefetch={false}>
-                            Questions
-                        </Link>
-                        <Link href="/question-repo" className="text-lg font-semibold uppercase text-gray-700/50 hover:text-gray-700 transition duration-150" prefetch={false}>
-                            Repository
-                        </Link>
-                        <Button variant="ghost" size="icon" className="rounded-full" onClick={handleProfileRedirect}>
-                            <Avatar>
-                                <AvatarImage src="/placeholder-user.jpg" alt="CR" />
-                                <AvatarFallback className="font-branding">CR</AvatarFallback>
-                            </Avatar>
-                        </Button>
-                    </nav>
-                </div>
-            </header>
-
-            <main className="flex flex-col desktop:flex-row p-2 desktop:mx-8 desktop:mt-0 desktop:pt-0 gap-4 font-sans text-black">
-                <div className="flex-1 overflow-auto desktop:w-1/2 desktop:mx-auto">
-                    <div className="relative h-[90vh]">
-                        <div
-                            id="filters"
-                            className="absolute top-0 left-0 right-0 hidden tablet:flex gap-2 desktop:ml-8 desktop:mr-10 desktop:mt-2 p-2 desktop:rounded-3xl bg-opacity-90 backdrop-blur desktop:drop-shadow-xl bg-white z-10"
-                        >
-
-                            <div className="flex grow flex-col gap-2 2xl:flex-row">
-                                <MultiSelect
-                                    options={complexityList}
-                                    onValueChange={setSelectedComplexities}
-                                    defaultValue={selectedComplexities}
-                                    placeholder="Select complexities"
-                                    variant="inverted"
-                                    animation={2}
-                                    maxCount={3}
-                                    selectIcon={Flag}
-                                    className={"font-sans"}
-                                    reset={reset}
-                                    onResetComplete={setReset}
-                                />
-                                <MultiSelect
-                                    options={categoryList}
-                                    onValueChange={setSelectedCategories}
-                                    defaultValue={selectedCategories}
-                                    placeholder="Select categories"
-                                    variant="inverted"
-                                    animation={2}
-                                    maxCount={1}
-                                    selectIcon={MessageSquareText}
-                                    className={"font-sans"}
-                                    reset={reset}
-                                    onResetComplete={setReset}
-                                />
-                            </div>
-                            {filteredQuestions.length > 0 && (
-                                <Button
-                                    variant="outline"
-                                    className="uppercase rounded-3xl"
-                                    onClick={handleSelectAll}
-                                >
-                                    {isSelectAll ? "Deselect All" : "Select All"}
-                                </Button>
-                            )}
-                        </div>
-
-                        <ScrollArea
-                            className="h-[90vh]"
-                            barOffset={filtersHeight + 24}
-                            type="hover"
-                        >
-                            <div className="space-y-1 overflow-auto mr-2">
-                                <div
-                                    className="hidden tablet:block mb-6"
-                                    style={{ height: `${filtersHeight}px` }}
-                                ></div>
-                                {filteredQuestions.length == 0 ? (
-                                    <div className="flex flex-col pt-80 gap-6 items-center justify-center text-center">
-                                        <p className="text-base">No questions found</p>
-                                        <Button onClick={resetFilters}>Reset filters</Button>
-                                    </div>
-                                ) : (
-                                    filteredQuestions.map((question) => (
-                                        <div id="qns" key={question.id} className="relative mr-2">
-                                            <Card
-                                                className="rounded-lg flex items-start border-none shadow-none p-4 w-full cursor-pointer hover:bg-gray-100 transition ease-in-out duration-150"
-                                                onClick={() => setSelectedViewQuestion(question)}
-                                            >
-                                                <div className="flex-1">
-                                                    <h3 className="text-xl font-serif font-semibold tracking-tight">
-                                                        {question.title}
-                                                    </h3>
-                                                    <div className="flex items-center gap-2 mt-3">
-                                                        <Badge
-                                                            variant={
-                                                                `${question.complexity}` as BadgeProps["variant"]
-                                                            }
-                                                        >
-                                                            {question.complexity}
-                                                        </Badge>
-                                                        {question.categories.map((category, index) => (
-                                                            <Badge key={index} variant="category">
-                                                                {category}
-                                                            </Badge>
-                                                        ))}
-                                                    </div>
-                                                </div>
-                                                <Button
-                                                    variant={question.selected ? "default" : "outline"}
-                                                    className="ml-4"
-                                                    onClick={() => handleSelectQuestion(question.id)}
-                                                >
-                                                    {question.selected ? "Selected" : "Select"}
-                                                </Button>
-                                            </Card>
-                                        </div>
-                                    ))
-                                )}
-                            </div>
-                        </ScrollArea>
-                    </div>
-                </div>
-                <div className="hidden desktop:block desktop:w-1/2 mt-8 p-4 border rounded-xl">
-                    {!selectedViewQuestion ? (
-                        <div className="flex items-center justify-center h-full text-muted-foreground">Select a question to view</div>
-                    ) : (
-                        <div className="desktop:flex desktop:flex-col">
-                            <h3 className="text-2xl font-serif font-medium tracking-tight">
-                                {selectedViewQuestion.title}
-                            </h3>
-                            <div className="flex items-center gap-10 mt-3">
-                                <div className="flex items-center gap-2">
-                                    <Flag className="h-4 w-4 text-icon" />
-                                    <Badge
-                                        variant={
-                                            selectedViewQuestion.complexity as BadgeProps["variant"]
-                                        }
-                                    >
-                                        {selectedViewQuestion.complexity}
-                                    </Badge>
-                                </div>
-                                <div className="flex items-center gap-2">
-                                    <MessageSquareText className="h-4 w-4 text-icon" />
-                                    {selectedViewQuestion.categories.map((category) => (
-                                        <Badge
-                                            key={category}
-                                            variant="category"
-                                            className="uppercase text-category-text bg-category-bg"
-                                        >
-                                            {category}
-                                        </Badge>
-                                    ))}
-                                </div>
-                            </div>
-                            <p className="mt-8 text-sm text-foreground">
-                                {selectedViewQuestion.description}
-                            </p>
-                        </div>
-                    )}
-                </div>
-            </main>
-        </div>
-    );
-}
\ No newline at end of file
diff --git a/frontend/components/ui/badge.tsx b/frontend/components/ui/badge.tsx
index 98a9e6b417..5e31783df2 100644
--- a/frontend/components/ui/badge.tsx
+++ b/frontend/components/ui/badge.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "cursor-default inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx
index 3d357d3016..224c10840b 100644
--- a/frontend/components/ui/button.tsx
+++ b/frontend/components/ui/button.tsx
@@ -18,6 +18,7 @@ const buttonVariants = cva(
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
+        match: "bg-brand-200 text-brand-800 hover:bg-brand-300 font-branding font-bold tracking-tight",
       },
       size: {
         default: "h-10 px-4 py-2",