diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx b/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
new file mode 100644
index 0000000..cfda8e9
--- /dev/null
+++ b/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
@@ -0,0 +1,18 @@
+"use client";
+import { Button } from "@nextui-org/react";
+import { useRouter } from "next/navigation";
+
+export default function Page() {
+  const router = useRouter();
+  return (
+    <>
+      <Button
+        className="ms-5 mt-3"
+        onClick={() => router.push(`/projects/1/folders/1/cases/`)}
+      >
+        Back
+      </Button>
+      <div>This is each test case</div>
+    </>
+  );
+}
diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/page.tsx b/frontend/app/projects/[projectId]/folders/[folderId]/cases/page.tsx
new file mode 100644
index 0000000..79228c4
--- /dev/null
+++ b/frontend/app/projects/[projectId]/folders/[folderId]/cases/page.tsx
@@ -0,0 +1,69 @@
+"use client";
+import { useEffect, useState } from "react";
+import Config from "@/config/config";
+const apiServer = Config.apiServer;
+import { Listbox, ListboxItem } from "@nextui-org/react";
+import { useRouter } from "next/navigation";
+
+/**
+ * fetch folder records
+ *
+ * @param {string} url - API endpoint url
+ * @returns {Promise<Array>} - project record array
+ * @throws {Error}
+ */
+async function fetchCases(url) {
+  try {
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error fetching data:", error.message);
+  }
+}
+
+export default function Page({ params }: { params: { folderId: string } }) {
+  const router = useRouter();
+  const [cases, setCases] = useState([]);
+  const url = `${apiServer}/cases?folderId=${params.folderId}`;
+
+  useEffect(() => {
+    async function fetchDataEffect() {
+      try {
+        const data = await fetchCases(url);
+        setCases(data);
+      } catch (error) {
+        console.error("Error in effect:", error.message);
+      }
+    }
+
+    fetchDataEffect();
+  }, []);
+
+  return (
+    <Listbox aria-label="Listbox Variants">
+      {cases.map((testCase, index) => (
+        <ListboxItem
+          key={index}
+          onClick={() =>
+            router.push(
+              `/projects/1/folders/${params.folderId}/cases/${testCase.id}`
+            )
+          }
+        >
+          {testCase.title}
+        </ListboxItem>
+      ))}
+    </Listbox>
+  );
+}
diff --git a/frontend/app/projects/[id]/folders/page.tsx b/frontend/app/projects/[projectId]/folders/layout.tsx
similarity index 55%
rename from frontend/app/projects/[id]/folders/page.tsx
rename to frontend/app/projects/[projectId]/folders/layout.tsx
index dbdbc06..0845b4a 100644
--- a/frontend/app/projects/[id]/folders/page.tsx
+++ b/frontend/app/projects/[projectId]/folders/layout.tsx
@@ -4,6 +4,7 @@ import Config from "@/config/config";
 const apiServer = Config.apiServer;
 import { Listbox, ListboxItem } from "@nextui-org/react";
 import { FolderIcon } from "@/components/icons";
+import { useRouter } from "next/navigation";
 
 /**
  * fetch folder records
@@ -32,9 +33,15 @@ async function fetchFolders(url) {
   }
 }
 
-export default function Page({ params }: { params: { id: string } }) {
+export default function ProjectsLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: { projectId: string };
+}) {
   const [folders, setFolders] = useState([]);
-  const url = `${apiServer}/folders?projectId=${params.id}`;
+  const url = `${apiServer}/folders?projectId=${params.projectId}`;
 
   useEffect(() => {
     async function fetchDataEffect() {
@@ -49,20 +56,29 @@ export default function Page({ params }: { params: { id: string } }) {
     fetchDataEffect();
   }, []);
 
+  const router = useRouter();
   return (
-    <div className="w-64 min-h-screen border-r-1">
-      <Listbox aria-label="Listbox Variants">
-        {folders.map((folder, index) => (
-          <ListboxItem
-            key={index}
-            startContent={<FolderIcon size={16} className="text-gray-600" />}
-          >
-            {folder.name}
-            {/* {folder.detail}
+    <div className="flex">
+      <div className="w-64 min-h-screen border-r-1">
+        <Listbox aria-label="Listbox Variants">
+          {folders.map((folder, index) => (
+            <ListboxItem
+              key={index}
+              onClick={() =>
+                router.push(
+                  `/projects/${params.projectId}/folders/${folder.id}/cases`
+                )
+              }
+              startContent={<FolderIcon size={16} className="text-gray-600" />}
+            >
+              {folder.name}
+              {/* {folder.detail}
             {folder.projectId} */}
-          </ListboxItem>
-        ))}
-      </Listbox>
+            </ListboxItem>
+          ))}
+        </Listbox>
+      </div>
+      <div className="flex-grow">{children}</div>
     </div>
   );
 }
diff --git a/frontend/app/projects/[projectId]/folders/page.tsx b/frontend/app/projects/[projectId]/folders/page.tsx
new file mode 100644
index 0000000..beba86f
--- /dev/null
+++ b/frontend/app/projects/[projectId]/folders/page.tsx
@@ -0,0 +1,9 @@
+export default function Page() {
+  return (
+    <>
+      This is folders page.
+    </>
+  );
+}
+
+// TODO Automatically navigate to head folder page
\ No newline at end of file
diff --git a/frontend/app/projects/[id]/home/page.tsx b/frontend/app/projects/[projectId]/home/page.tsx
similarity index 100%
rename from frontend/app/projects/[id]/home/page.tsx
rename to frontend/app/projects/[projectId]/home/page.tsx
diff --git a/frontend/app/projects/[id]/layout.tsx b/frontend/app/projects/[projectId]/layout.tsx
similarity index 100%
rename from frontend/app/projects/[id]/layout.tsx
rename to frontend/app/projects/[projectId]/layout.tsx
diff --git a/frontend/app/projects/[id]/runs/page.tsx b/frontend/app/projects/[projectId]/runs/page.tsx
similarity index 100%
rename from frontend/app/projects/[id]/runs/page.tsx
rename to frontend/app/projects/[projectId]/runs/page.tsx
diff --git a/frontend/app/projects/[id]/sidebar.tsx b/frontend/app/projects/[projectId]/sidebar.tsx
similarity index 100%
rename from frontend/app/projects/[id]/sidebar.tsx
rename to frontend/app/projects/[projectId]/sidebar.tsx