diff --git a/frontend/app/projects/[id]/page.tsx b/frontend/app/projects/[id]/folders/page.tsx
similarity index 71%
rename from frontend/app/projects/[id]/page.tsx
rename to frontend/app/projects/[id]/folders/page.tsx
index f0490a0..dbdbc06 100644
--- a/frontend/app/projects/[id]/page.tsx
+++ b/frontend/app/projects/[id]/folders/page.tsx
@@ -2,8 +2,8 @@
 import { useEffect, useState } from "react";
 import Config from "@/config/config";
 const apiServer = Config.apiServer;
-import Main from "./main";
-import Sidebar from "./sidebar";
+import { Listbox, ListboxItem } from "@nextui-org/react";
+import { FolderIcon } from "@/components/icons";
 
 /**
  * fetch folder records
@@ -50,21 +50,19 @@ export default function Page({ params }: { params: { id: string } }) {
   }, []);
 
   return (
-    <>
-      {/* <div>Project: {params.id}</div>
-      <div className="flex flex-wrap gap-4 mt-5">
+    <div className="w-64 min-h-screen border-r-1">
+      <Listbox aria-label="Listbox Variants">
         {folders.map((folder, index) => (
-          <div key={index}>
-            <div>{folder.name}</div>
-            <div>{folder.detail}</div>
-            <div>{folder.projectId}</div>
-          </div>
+          <ListboxItem
+            key={index}
+            startContent={<FolderIcon size={16} className="text-gray-600" />}
+          >
+            {folder.name}
+            {/* {folder.detail}
+            {folder.projectId} */}
+          </ListboxItem>
         ))}
-      </div> */}
-      <div className="flex border-t-1 min-h-screen">
-        <Sidebar />
-        <Main />
-      </div>
-    </>
+      </Listbox>
+    </div>
   );
 }
diff --git a/frontend/app/projects/[id]/home/page.tsx b/frontend/app/projects/[id]/home/page.tsx
new file mode 100644
index 0000000..f55192f
--- /dev/null
+++ b/frontend/app/projects/[id]/home/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <>This is Home tab</>;
+}
diff --git a/frontend/app/projects/[id]/layout.tsx b/frontend/app/projects/[id]/layout.tsx
index 7259ddf..deaf7c1 100644
--- a/frontend/app/projects/[id]/layout.tsx
+++ b/frontend/app/projects/[id]/layout.tsx
@@ -1,7 +1,18 @@
+import Sidebar from "./sidebar";
+
 export default function ProjectsLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return <>{children}</>;
+  return (
+    <>
+      <div className="flex border-t-1 min-h-screen">
+        <Sidebar />
+        <div className="flex">
+          <div className="flex-grow bg-white rounded-lg">{children}</div>
+        </div>
+      </div>
+    </>
+  );
 }
diff --git a/frontend/app/projects/[id]/main.tsx b/frontend/app/projects/[id]/main.tsx
deleted file mode 100644
index 31053cf..0000000
--- a/frontend/app/projects/[id]/main.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from "react";
-
-export default function Main() {
-  return (
-    <div className="flex">
-      <div className="flex-grow bg-white rounded-lg m-2">
-        aaa
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/app/projects/[id]/runs/page.tsx b/frontend/app/projects/[id]/runs/page.tsx
new file mode 100644
index 0000000..9624f12
--- /dev/null
+++ b/frontend/app/projects/[id]/runs/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <>This is Runs tab</>;
+}
diff --git a/frontend/app/projects/[id]/sidebar.tsx b/frontend/app/projects/[id]/sidebar.tsx
index cfb5811..83942a1 100644
--- a/frontend/app/projects/[id]/sidebar.tsx
+++ b/frontend/app/projects/[id]/sidebar.tsx
@@ -1,17 +1,32 @@
+"use client";
 import { Menu, MenuItem } from "@nextui-org/react";
 import { HomeIcon, PagesIcon, PlayIcon } from "@/components/icons";
+import { useRouter } from "next/navigation";
 
 export default function Sidebar() {
+  const router = useRouter();
   return (
     <div className="w-64 bg-white border-r-1">
       <Menu aria-label="sidebar">
-        <MenuItem startContent={<HomeIcon size={28} />} className="p-3">
+        <MenuItem
+          startContent={<HomeIcon size={28} />}
+          className="p-3"
+          onClick={() => router.push("/projects/1/home")}
+        >
           Home
         </MenuItem>
-        <MenuItem startContent={<PagesIcon size={28} />} className="p-3">
+        <MenuItem
+          startContent={<PagesIcon size={28} />}
+          className="p-3"
+          onClick={() => router.push("/projects/1/folders")}
+        >
           Test Cases
         </MenuItem>
-        <MenuItem startContent={<PlayIcon size={28} />} className="p-3">
+        <MenuItem
+          startContent={<PlayIcon size={28} />}
+          className="p-3"
+          onClick={() => router.push("/projects/1/runs")}
+        >
           Test Runs
         </MenuItem>
       </Menu>
diff --git a/frontend/app/projects/project-card.tsx b/frontend/app/projects/project-card.tsx
index e4b2ae9..41d22b0 100644
--- a/frontend/app/projects/project-card.tsx
+++ b/frontend/app/projects/project-card.tsx
@@ -10,7 +10,7 @@ import NextLink from "next/link";
 
 export function ProjectCard({ projectName, projectDetail }) {
   return (
-    <NextLink href={`/projects/${1}`}>
+    <NextLink href={`/projects/${1}/home`}>
       <Card className="w-[250px] bg-white hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800">
         <CardHeader className="flex gap-3">
           <Image
diff --git a/frontend/components/icons.tsx b/frontend/components/icons.tsx
index f381447..b047c84 100644
--- a/frontend/components/icons.tsx
+++ b/frontend/components/icons.tsx
@@ -265,3 +265,22 @@ export const PlayIcon: React.FC<IconSvgProps> = ({
     </svg>
   );
 };
+
+export const FolderIcon: React.FC<IconSvgProps> = ({
+  size = 24,
+  width,
+  height,
+  ...props
+}) => {
+  return (
+    <svg
+      viewBox="0 0 512 512"
+      fill="currentColor"
+      height={size || height}
+      width={size || height}
+      {...props}
+    >
+      <path d="M64 480h384c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H298.5c-17 0-33.3-6.7-45.3-18.7l-26.5-26.6c-12-12-28.3-18.7-45.3-18.7H64C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64z" />
+    </svg>
+  );
+};