diff --git a/frontend/peerprep/app/error.tsx b/frontend/peerprep/app/(default)/error.tsx
similarity index 100%
rename from frontend/peerprep/app/error.tsx
rename to frontend/peerprep/app/(default)/error.tsx
diff --git a/frontend/peerprep/app/leaderboard/layout.tsx b/frontend/peerprep/app/(default)/home/layout.tsx
similarity index 56%
rename from frontend/peerprep/app/leaderboard/layout.tsx
rename to frontend/peerprep/app/(default)/home/layout.tsx
index e4697e5b71..b28d2b3636 100644
--- a/frontend/peerprep/app/leaderboard/layout.tsx
+++ b/frontend/peerprep/app/(default)/home/layout.tsx
@@ -1,11 +1,11 @@
-export default function LeaderboardLayout({
+export default function HomeLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
-      <div className="inline-block max-w-lg text-center justify-center">
+    <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-6">
+      <div className="inline-block w-full min-w-lg text-center justify-center">
         {children}
       </div>
     </section>
diff --git a/frontend/peerprep/app/(default)/home/page.tsx b/frontend/peerprep/app/(default)/home/page.tsx
new file mode 100644
index 0000000000..8bc95e37e8
--- /dev/null
+++ b/frontend/peerprep/app/(default)/home/page.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import {
+  Progress,
+  Button,
+  Avatar,
+  Badge,
+  Spacer,
+  Divider,
+} from "@nextui-org/react";
+
+import { Card, CardHeader, CardBody, CardFooter } from "@nextui-org/card";
+
+export default function Home() {
+  const friends = [
+    { name: "s_name", status: "online" },
+    { name: "thisisalongusername", status: "online" },
+    { name: "Friend3", status: "hidden" },
+    { name: "Friend4", status: "offline" },
+  ];
+
+  return (
+    <div className="flex flex-col items-center p-8">
+      <h1 className="text-3xl font-bold text-center">
+        Hey there! Ready for some coding challenges? 🧑‍💻
+      </h1>
+
+      {/* Layout container */}
+      <div className="flex flex-wrap justify-center gap-8 w-full mt-8">
+        {/* Left Column */}
+        <div className="flex-1 min-w-[300px]">
+          {/* Start a new session */}
+          <div className="flex gap-4">
+            <Card className="flex-1">
+              <CardBody>
+                <h3 className="text-lg font-semibold mb-2 p-3">
+                  Are you ready?
+                </h3>
+              </CardBody>
+              <CardFooter className="flex justify-end p-5">
+                <Button color="primary">Start a new session</Button>
+              </CardFooter>
+            </Card>
+            <Card className="flex-1">
+              <CardBody>
+                <h3 className="text-lg font-semibold mb-2 p-3">
+                  Current Score
+                </h3>
+                <h3 className="text-4xl font-bold">1600</h3>
+                <Progress value={75} color="primary" className="w" />
+                <span>75%</span>
+              </CardBody>
+            </Card>
+          </div>
+
+          <Spacer y={5} />
+
+          {/* Activity Heatmap */}
+          <Card>
+            <CardBody>
+              <h3 className="text-lg font-semibold mb-2">
+                Activities in the last year
+              </h3>
+              <div className="h-[100px] bg-gray-200">
+                {/* Placeholder for heatmap */}
+              </div>
+            </CardBody>
+          </Card>
+        </div>
+
+        {/* Right Column (Friends List) */}
+        <div className="flex-shrink-0 min-w-[250px]">
+          <Card>
+            <CardBody>
+              <h3 className="text-lg font-semibold mb-4">Friends</h3>
+              <ul className="space-y-4">
+                {friends.map((friend, idx) => (
+                  <li key={idx} className="flex items-center">
+                    <Avatar name={friend.name} />
+                    <div className="ml-4">
+                      <h4 className="font-medium">{friend.name}</h4>
+                      <Badge
+                        color={
+                          friend.status === "online"
+                            ? "success"
+                            : friend.status === "hidden"
+                              ? "warning"
+                              : "danger"
+                        }
+                      >
+                        {friend.status}
+                      </Badge>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </CardBody>
+          </Card>
+        </div>
+      </div>
+
+      {/* Activity Feed */}
+      <div className="w-full mt-8">
+        <Card>
+          <CardBody>
+            <h3 className="text-lg font-semibold mb-4">Activity Feed</h3>
+            <Divider />
+            <div className="space-y-4 mt-4">
+              {/* Mock activity feed */}
+              <div>
+                <h4 className="font-medium">
+                  JayCee completed 'Split Linked List in Parts'
+                </h4>
+                <p className="text-sm">
+                  With jweng5551 | Linked List - Medium | +200 points
+                </p>
+              </div>
+              <div>
+                <h4 className="font-medium">
+                  jweng5551 completed 'Split Linked List in Parts'
+                </h4>
+                <p className="text-sm">
+                  With JayCee | Linked List - Medium | +200 points
+                </p>
+              </div>
+              <div>
+                <h4 className="font-medium">
+                  DelilShad completed 'Regular Expression Matching'
+                </h4>
+                <p className="text-sm">
+                  With You | Dynamic Programming - Hard | +500 points
+                </p>
+              </div>
+            </div>
+          </CardBody>
+        </Card>
+      </div>
+
+      <Spacer y={2} />
+    </div>
+  );
+}
diff --git a/frontend/peerprep/app/layout.tsx b/frontend/peerprep/app/(default)/layout.tsx
similarity index 98%
rename from frontend/peerprep/app/layout.tsx
rename to frontend/peerprep/app/(default)/layout.tsx
index cb2f705479..5f8e46b4a4 100644
--- a/frontend/peerprep/app/layout.tsx
+++ b/frontend/peerprep/app/(default)/layout.tsx
@@ -45,7 +45,7 @@ export default function RootLayout({
       <body
         className={clsx(
           "min-h-screen bg-background font-sans antialiased",
-          fontSans.variable,
+          fontSans.variable
         )}
       >
         <Providers themeProps={{ attribute: "class", defaultTheme: "light" }}>
diff --git a/frontend/peerprep/app/providers.tsx b/frontend/peerprep/app/(default)/providers.tsx
similarity index 100%
rename from frontend/peerprep/app/providers.tsx
rename to frontend/peerprep/app/(default)/providers.tsx
diff --git a/frontend/peerprep/app/questions-management/add/layout.tsx b/frontend/peerprep/app/(default)/questions-management/add/layout.tsx
similarity index 100%
rename from frontend/peerprep/app/questions-management/add/layout.tsx
rename to frontend/peerprep/app/(default)/questions-management/add/layout.tsx
diff --git a/frontend/peerprep/app/questions-management/add/page.tsx b/frontend/peerprep/app/(default)/questions-management/add/page.tsx
similarity index 100%
rename from frontend/peerprep/app/questions-management/add/page.tsx
rename to frontend/peerprep/app/(default)/questions-management/add/page.tsx
diff --git a/frontend/peerprep/app/questions-management/list/columns.tsx b/frontend/peerprep/app/(default)/questions-management/columns.tsx
similarity index 100%
rename from frontend/peerprep/app/questions-management/list/columns.tsx
rename to frontend/peerprep/app/(default)/questions-management/columns.tsx
diff --git a/frontend/peerprep/app/questions-management/edit/[id]/layout.tsx b/frontend/peerprep/app/(default)/questions-management/edit/[id]/layout.tsx
similarity index 100%
rename from frontend/peerprep/app/questions-management/edit/[id]/layout.tsx
rename to frontend/peerprep/app/(default)/questions-management/edit/[id]/layout.tsx
diff --git a/frontend/peerprep/app/questions-management/edit/[id]/page.tsx b/frontend/peerprep/app/(default)/questions-management/edit/[id]/page.tsx
similarity index 100%
rename from frontend/peerprep/app/questions-management/edit/[id]/page.tsx
rename to frontend/peerprep/app/(default)/questions-management/edit/[id]/page.tsx
diff --git a/frontend/peerprep/app/questions-management/list/layout.tsx b/frontend/peerprep/app/(default)/questions-management/layout.tsx
similarity index 100%
rename from frontend/peerprep/app/questions-management/list/layout.tsx
rename to frontend/peerprep/app/(default)/questions-management/layout.tsx
diff --git a/frontend/peerprep/app/questions-management/mockdata/sample_getAllQuestions.json b/frontend/peerprep/app/(default)/questions-management/mockdata/sample_getAllQuestions.json
similarity index 100%
rename from frontend/peerprep/app/questions-management/mockdata/sample_getAllQuestions.json
rename to frontend/peerprep/app/(default)/questions-management/mockdata/sample_getAllQuestions.json
diff --git a/frontend/peerprep/app/questions-management/mockdata/sample_getSingleQuestion.json b/frontend/peerprep/app/(default)/questions-management/mockdata/sample_getSingleQuestion.json
similarity index 100%
rename from frontend/peerprep/app/questions-management/mockdata/sample_getSingleQuestion.json
rename to frontend/peerprep/app/(default)/questions-management/mockdata/sample_getSingleQuestion.json
diff --git a/frontend/peerprep/app/questions-management/list/page.tsx b/frontend/peerprep/app/(default)/questions-management/page.tsx
similarity index 100%
rename from frontend/peerprep/app/questions-management/list/page.tsx
rename to frontend/peerprep/app/(default)/questions-management/page.tsx
diff --git a/frontend/peerprep/app/settings/layout.tsx b/frontend/peerprep/app/(default)/settings/layout.tsx
similarity index 100%
rename from frontend/peerprep/app/settings/layout.tsx
rename to frontend/peerprep/app/(default)/settings/layout.tsx
diff --git a/frontend/peerprep/app/settings/page.tsx b/frontend/peerprep/app/(default)/settings/page.tsx
similarity index 100%
rename from frontend/peerprep/app/settings/page.tsx
rename to frontend/peerprep/app/(default)/settings/page.tsx
diff --git a/frontend/peerprep/app/(landing)/layout.tsx b/frontend/peerprep/app/(landing)/layout.tsx
new file mode 100644
index 0000000000..fd7cd247e9
--- /dev/null
+++ b/frontend/peerprep/app/(landing)/layout.tsx
@@ -0,0 +1,13 @@
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        <div>{children}</div>;
+      </body>
+    </html>
+  );
+}
diff --git a/frontend/peerprep/app/(landing)/login/layout.tsx b/frontend/peerprep/app/(landing)/login/layout.tsx
new file mode 100644
index 0000000000..c6adee81b3
--- /dev/null
+++ b/frontend/peerprep/app/(landing)/login/layout.tsx
@@ -0,0 +1,7 @@
+export default function LoginLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <div>{children}</div>;
+}
diff --git a/frontend/peerprep/app/(landing)/login/page.tsx b/frontend/peerprep/app/(landing)/login/page.tsx
new file mode 100644
index 0000000000..5e6cdf384a
--- /dev/null
+++ b/frontend/peerprep/app/(landing)/login/page.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+export default function Home() {
+  return (
+    <div className="flex flex-col items-center p-8">
+      <h1 className="text-3xl font-bold text-center">Placeholder login page</h1>
+    </div>
+  );
+}
diff --git a/frontend/peerprep/app/(landing)/page.tsx b/frontend/peerprep/app/(landing)/page.tsx
new file mode 100644
index 0000000000..20db970014
--- /dev/null
+++ b/frontend/peerprep/app/(landing)/page.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+export default function Landing() {
+  return (
+    <div className="flex flex-col items-center p-8">
+      <h1 className="text-3xl font-bold text-center">
+        Placeholder Landing page
+      </h1>
+    </div>
+  );
+}
diff --git a/frontend/peerprep/app/leaderboard/page.tsx b/frontend/peerprep/app/leaderboard/page.tsx
deleted file mode 100644
index da889a4e0c..0000000000
--- a/frontend/peerprep/app/leaderboard/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { title } from "@/components/primitives";
-
-export default function LeaderboardPage() {
-  return (
-    <div>
-      <h1 className={title()}>Leaderboard</h1>
-    </div>
-  );
-}
diff --git a/frontend/peerprep/app/page.tsx b/frontend/peerprep/app/page.tsx
deleted file mode 100644
index 87fcb86fd0..0000000000
--- a/frontend/peerprep/app/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-"use client";
-
-import QuestionsTable from "@/components/questionstable";
-
-export default function Home() {
-  return (
-    <div>
-      <QuestionsTable />
-    </div>
-  );
-}
diff --git a/frontend/peerprep/components/addquestionform.tsx b/frontend/peerprep/components/addquestionform.tsx
index 07ef51d88d..b304a558db 100644
--- a/frontend/peerprep/components/addquestionform.tsx
+++ b/frontend/peerprep/components/addquestionform.tsx
@@ -21,7 +21,7 @@ import { WysiMarkEditor } from "./wysimarkeditor";
 import BoxIcon from "./boxicons";
 
 import { capitalize, languages } from "@/utils/utils";
-import { complexityColorMap } from "@/app/questions-management/list/columns";
+import { complexityColorMap } from "@/app/(default)/questions-management/columns";
 
 interface AddQuestionFormProps {
   initialTitle?: string;
@@ -43,7 +43,7 @@ export default function AddQuestionForm({
   initialTestCases = [{ input: "", output: "" }],
 }: AddQuestionFormProps) {
   const NEXT_PUBLIC_QUESTION_SERVICE_URL = env(
-    "NEXT_PUBLIC_QUESTION_SERVICE_URL",
+    "NEXT_PUBLIC_QUESTION_SERVICE_URL"
   );
   const router = useRouter();
   const { theme } = useTheme();
@@ -67,7 +67,7 @@ export default function AddQuestionForm({
 
   const { data: categoryData, isLoading: categoryLoading } = useSWR(
     `${NEXT_PUBLIC_QUESTION_SERVICE_URL}/api/questions/categories/unique`,
-    fetcher,
+    fetcher
   );
 
   const uniqueCategories = React.useMemo(() => {
@@ -88,7 +88,7 @@ export default function AddQuestionForm({
   // Handle removing a category
   const removeCategory = (category: string) => {
     setCategories((prevCategories) =>
-      prevCategories.filter((cat) => cat !== category),
+      prevCategories.filter((cat) => cat !== category)
     );
   };
 
@@ -117,7 +117,7 @@ export default function AddQuestionForm({
   // Handle input change for test case
   const handleInputChange = (
     index: number,
-    event: React.ChangeEvent<HTMLInputElement>,
+    event: React.ChangeEvent<HTMLInputElement>
   ) => {
     const updatedTestCases = [...testCases];
 
@@ -160,11 +160,11 @@ export default function AddQuestionForm({
       !templateCode.trim() ||
       !testCases.every(
         (testCase) =>
-          testCase.input.trim() !== "" && testCase.output.trim() !== "",
+          testCase.input.trim() !== "" && testCase.output.trim() !== ""
       )
     ) {
       setErrorMessage(
-        "Please fill in all the required fields before submitting.",
+        "Please fill in all the required fields before submitting."
       );
       setErrorModalOpen(true); // Show error modal with the validation message
 
@@ -179,7 +179,7 @@ export default function AddQuestionForm({
       complexity: selectedTab,
       templateCode,
       testCases: testCases.map(
-        (testCase) => `${testCase.input} -> ${testCase.output}`,
+        (testCase) => `${testCase.input} -> ${testCase.output}`
       ),
     };
 
@@ -195,7 +195,7 @@ export default function AddQuestionForm({
             "Content-Type": "application/json",
           },
           body: JSON.stringify(formData), // Convert data to JSON
-        },
+        }
       );
 
       if (response.ok) {
@@ -207,21 +207,21 @@ export default function AddQuestionForm({
         const errorData = await response.json();
 
         setErrorMessage(
-          errorData.error || "Failed to submit the question. Please try again.",
+          errorData.error || "Failed to submit the question. Please try again."
         );
         setErrorModalOpen(true);
       }
     } catch (error) {
       // Show error modal with generic error message
       setErrorMessage(
-        "An error occurred while submitting the question. Please try again later",
+        "An error occurred while submitting the question. Please try again later"
       );
       setErrorModalOpen(true);
     }
   };
 
   const handleCancel = () => {
-    router.push("/");
+    router.push("/questions-management");
   };
 
   return (
@@ -427,11 +427,11 @@ export default function AddQuestionForm({
         message={successMessage}
         onConfirm={() => {
           setSuccessModalOpen(false);
-          router.push("/");
+          router.push("/questions-management");
         }}
         onOpenChange={() => {
           setSuccessModalOpen;
-          router.push("/");
+          router.push("/questions-management");
         }}
       />
       <ErrorModal
diff --git a/frontend/peerprep/components/editquestionform.tsx b/frontend/peerprep/components/editquestionform.tsx
index 31cb707b9e..3429eebdaf 100644
--- a/frontend/peerprep/components/editquestionform.tsx
+++ b/frontend/peerprep/components/editquestionform.tsx
@@ -26,7 +26,7 @@ import { capitalize, languages } from "@/utils/utils";
 import {
   complexityColorMap,
   Question,
-} from "@/app/questions-management/list/columns";
+} from "@/app/(default)/questions-management/columns";
 
 interface EditQuestionFormProps {
   initialTitle?: string;
@@ -48,7 +48,7 @@ export default function EditQuestionForm({
   initialTestCases = [{ input: "", output: "" }],
 }: EditQuestionFormProps) {
   const NEXT_PUBLIC_QUESTION_SERVICE_URL = env(
-    "NEXT_PUBLIC_QUESTION_SERVICE_URL",
+    "NEXT_PUBLIC_QUESTION_SERVICE_URL"
   );
   const params = useParams();
   const router = useRouter();
@@ -72,18 +72,18 @@ export default function EditQuestionForm({
   const [testCases, setTestCases] =
     useState<{ input: string; output: string }[]>(initialTestCases);
   const [questionToDelete, setQuestionToDelete] = useState<Question | null>(
-    null,
+    null
   );
   const [question, setQuestion] = useState<Question | null>(null);
 
   const { data: categoryData, isLoading: categoryLoading } = useSWR(
     `${NEXT_PUBLIC_QUESTION_SERVICE_URL}/api/questions/categories/unique`,
-    fetcher,
+    fetcher
   );
 
   const { data: questionData, isLoading: questionLoading } = useSWR(
     `${NEXT_PUBLIC_QUESTION_SERVICE_URL}/api/questions/${params.id ? params.id : ""}`,
-    fetcher,
+    fetcher
   );
 
   useEffect(() => {
@@ -101,8 +101,8 @@ export default function EditQuestionForm({
               .map((str) => str.trim());
 
             return { input, output };
-          }),
-        ) || [],
+          })
+        ) || []
       );
       setQuestion(questionData?.question);
     }
@@ -146,7 +146,7 @@ export default function EditQuestionForm({
   // Handle removing a category
   const removeCategory = (category: string) => {
     setCategories((prevCategories) =>
-      prevCategories.filter((cat) => cat !== category),
+      prevCategories.filter((cat) => cat !== category)
     );
   };
 
@@ -175,7 +175,7 @@ export default function EditQuestionForm({
   // Handle input change for test case
   const handleInputChange = (
     index: number,
-    event: React.ChangeEvent<HTMLInputElement>,
+    event: React.ChangeEvent<HTMLInputElement>
   ) => {
     const updatedTestCases = [...testCases];
     const { name, value } = event.target;
@@ -220,11 +220,11 @@ export default function EditQuestionForm({
       !templateCode.trim() ||
       !testCases.every(
         (testCase) =>
-          testCase.input.trim() !== "" && testCase.output.trim() !== "",
+          testCase.input.trim() !== "" && testCase.output.trim() !== ""
       )
     ) {
       setErrorMessage(
-        "Please fill in all the required fields before submitting.",
+        "Please fill in all the required fields before submitting."
       );
       setErrorModalOpen(true); // Show error modal with the validation message
 
@@ -238,7 +238,7 @@ export default function EditQuestionForm({
       complexity: selectedTab,
       templateCode,
       testCases: testCases.map(
-        (testCase) => `${testCase.input} -> ${testCase.output}`,
+        (testCase) => `${testCase.input} -> ${testCase.output}`
       ),
     };
 
@@ -251,7 +251,7 @@ export default function EditQuestionForm({
             "Content-Type": "application/json",
           },
           body: JSON.stringify(formData),
-        },
+        }
       );
 
       if (response.ok) {
@@ -261,7 +261,7 @@ export default function EditQuestionForm({
         const errorData = await response.json();
 
         setErrorMessage(
-          errorData.error || "Failed to update the question. Please try again.",
+          errorData.error || "Failed to update the question. Please try again."
         );
         setErrorModalOpen(true);
       }
@@ -278,7 +278,7 @@ export default function EditQuestionForm({
         `${NEXT_PUBLIC_QUESTION_SERVICE_URL}/api/questions/${params.id}`,
         {
           method: "DELETE",
-        },
+        }
       );
 
       if (response.ok) {
@@ -296,7 +296,7 @@ export default function EditQuestionForm({
   };
 
   const handleCancel = () => {
-    router.push("/");
+    router.push("/questions-management");
   };
 
   return (
@@ -498,7 +498,7 @@ export default function EditQuestionForm({
       <SuccessModal
         isOpen={isSuccessModalOpen}
         message={successMessage}
-        onConfirm={() => router.push("/")} // Redirect to list after confirmation
+        onConfirm={() => router.push("/questions-management")} // Redirect to list after confirmation
         onOpenChange={setSuccessModalOpen}
       />
       <ErrorModal
diff --git a/frontend/peerprep/components/questionstable.tsx b/frontend/peerprep/components/questionstable.tsx
index c319a7dbdc..e056e21251 100644
--- a/frontend/peerprep/components/questionstable.tsx
+++ b/frontend/peerprep/components/questionstable.tsx
@@ -32,18 +32,18 @@ import {
   Question,
   RenderCell,
   complexityOptions,
-} from "@/app/questions-management/list/columns";
+} from "@/app/(default)/questions-management/columns";
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
 export default function QuestionsTable() {
   const NEXT_PUBLIC_QUESTION_SERVICE_URL = env(
-    "NEXT_PUBLIC_QUESTION_SERVICE_URL",
+    "NEXT_PUBLIC_QUESTION_SERVICE_URL"
   );
   const router = useRouter();
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
   const [questionToDelete, setQuestionToDelete] = useState<Question | null>(
-    null,
+    null
   );
 
   const handleDelete = (question: Question) => {
@@ -58,7 +58,7 @@ export default function QuestionsTable() {
           `${NEXT_PUBLIC_QUESTION_SERVICE_URL}/api/questions/${questionToDelete.question_id}`,
           {
             method: "DELETE",
-          },
+          }
         );
         onOpenChange();
         location.reload();
@@ -88,12 +88,12 @@ export default function QuestionsTable() {
             .join("&") + "&"
         : ""
     }${`sort=${sortDescriptor.direction === "descending" ? "-" : ""}${sortDescriptor.column}&`}page=${page}`,
-    fetcher,
+    fetcher
   );
 
   const { data: categoryData, isLoading: categoryLoading } = useSWR(
     `${NEXT_PUBLIC_QUESTION_SERVICE_URL}/api/questions/categories/unique`,
-    fetcher,
+    fetcher
   );
 
   const uniqueCategories = React.useMemo(() => {
diff --git a/frontend/peerprep/components/sidebar.tsx b/frontend/peerprep/components/sidebar.tsx
index 7ce728e77d..712cfc49dc 100644
--- a/frontend/peerprep/components/sidebar.tsx
+++ b/frontend/peerprep/components/sidebar.tsx
@@ -1,57 +1,56 @@
 "use client";
 import { useTheme } from "next-themes";
-import { Listbox, ListboxItem } from "@nextui-org/listbox";
-import { Button } from "@nextui-org/react";
 
+import { Listbox, ListboxItem, ListboxSection } from "@nextui-org/listbox";
 import BoxIcon from "./boxicons";
-
+import { Button, Divider } from "@nextui-org/react";
 import { siteConfig } from "@/config/site";
+import { usePathname } from "next/navigation";
 
 export const Sidebar = () => {
   const { theme } = useTheme();
+  const currentPath = usePathname();
 
   return (
     <div className="h-fit flex flex-col fixed w-fit pr-4 relative">
       <Listbox
-        aria-label="Listbox menu with sections"
-        className="w-fit"
         variant="flat"
+        aria-label="Listbox menu with sections"
+        className="w-fit "
       >
-        {siteConfig.navItems
-          .map((item: any) => (
-            <ListboxItem
-              key={item.label}
-              className="py-3 my-1"
-              href={item.href}
-              startContent={
-                <BoxIcon
-                  color={theme === "dark" ? "#d1d5db" : "#4b5563"}
-                  name={item.icon}
-                />
-              }
-            >
-              <span className="text-base text-gray-600 dark:text-gray-300">
-                {item.label}
-              </span>
-            </ListboxItem>
-          ))
-          .concat(
-            <ListboxItem
-              key="Question Management"
-              className="py-3 my-1 text-primary"
-              color="primary"
-              href="/"
-              startContent={
-                <BoxIcon color="primary" name="bxs-message-square-edit" />
+        {siteConfig.navItems.map((item) => (
+          <ListboxItem
+            key={item.label}
+            startContent={
+              <BoxIcon
+                name={item.icon}
+                color={
+                  currentPath.startsWith(item.href)
+                    ? "#3B82F6"
+                    : theme === "dark"
+                      ? "#d1d5db"
+                      : "#4b5563"
+                }
+              />
+            }
+            className="py-3 my-1"
+            href={item.href}
+          >
+            <span
+              className={
+                currentPath.startsWith(item.href)
+                  ? "text-primary font-bold"
+                  : "text-gray-600 dark:text-gray-300"
               }
             >
-              <span className="text-base">Question Management</span>
-            </ListboxItem>,
-          )}
+              {item.label}
+            </span>
+          </ListboxItem>
+        ))}
       </Listbox>
       <Button
         className="fixed bottom-5 left-10 flex items-center justify-center bg-transparent text-danger"
-        startContent={<BoxIcon color="danger" name="bx-log-out" />}
+        startContent={<BoxIcon name="bx-log-out" color="danger" />}
       >
         Sign out
       </Button>
diff --git a/frontend/peerprep/config/site.ts b/frontend/peerprep/config/site.ts
index d36b8ac0b7..56b4d01418 100644
--- a/frontend/peerprep/config/site.ts
+++ b/frontend/peerprep/config/site.ts
@@ -3,5 +3,16 @@ export type SiteConfig = typeof siteConfig;
 export const siteConfig = {
   name: "Next.js + NextUI",
   description: "Make beautiful websites regardless of your design experience.",
-  navItems: [],
+  navItems: [
+    {
+      label: "Home",
+      href: "/home",
+      icon: "bxs-home",
+    },
+    {
+      label: "Question Management",
+      href: "/questions-management",
+      icon: "bxs-message-square-edit"
+    },
+  ],
 };