diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx b/frontend/app/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx
new file mode 100644
index 0000000..dca352e
--- /dev/null
+++ b/frontend/app/projects/[projectId]/folders/[folderId]/cases/CasesPane.tsx
@@ -0,0 +1,56 @@
+"use client";
+import { useEffect, useState } from "react";
+import TestCaseTable from "./TestCaseTable";
+import { fetchCases, createCase, deleteCase, deleteCases } from "./caseControl";
+
+type Props = {
+  projectId: string;
+  folderId: string;
+};
+
+export default function CasesPane({ projectId, folderId }: Props) {
+  const [cases, setCases] = useState([]);
+  useEffect(() => {
+    async function fetchDataEffect() {
+      try {
+        const data = await fetchCases(folderId);
+        setCases(data);
+      } catch (error) {
+        console.error("Error in effect:", error.message);
+      }
+    }
+
+    fetchDataEffect();
+  }, []);
+
+  const handleCreateCase = async (folderId: string) => {
+    const newCase = await createCase(folderId);
+    const updateCases = [...cases];
+    updateCases.push(newCase);
+    setCases(updateCases);
+  };
+
+  const handleDeleteCase = async (caseId: number) => {
+    await deleteCase(caseId);
+    const data = await fetchCases(folderId);
+    setCases(data);
+  };
+
+  const handleDeleteCases = async (deleteCaseIds: string[]) => {
+    await deleteCases(deleteCaseIds);
+    const data = await fetchCases(folderId);
+    setCases(data);
+  };
+
+  return (
+    <>
+      <TestCaseTable
+        projectId={projectId}
+        cases={cases}
+        onCreateCase={() => handleCreateCase(folderId)}
+        onDeleteCase={handleDeleteCase}
+        onDeleteCases={handleDeleteCases}
+      />
+    </>
+  );
+}
diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/test-case-table.tsx b/frontend/app/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
similarity index 99%
rename from frontend/app/projects/[projectId]/folders/[folderId]/cases/test-case-table.tsx
rename to frontend/app/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
index 7339931..b5a8fcb 100644
--- a/frontend/app/projects/[projectId]/folders/[folderId]/cases/test-case-table.tsx
+++ b/frontend/app/projects/[projectId]/folders/[folderId]/cases/TestCaseTable.tsx
@@ -44,7 +44,7 @@ type Case = {
 };
 
 type Props = {
-  projectId: boolean;
+  projectId: string;
   cases: Case[];
   onCreateCase: () => void;
   onDeleteCase: (caseId: number) => void;
diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/caseControl.ts b/frontend/app/projects/[projectId]/folders/[folderId]/cases/caseControl.ts
new file mode 100644
index 0000000..82fa869
--- /dev/null
+++ b/frontend/app/projects/[projectId]/folders/[folderId]/cases/caseControl.ts
@@ -0,0 +1,106 @@
+import Config from "@/config/config";
+const apiServer = Config.apiServer;
+
+async function fetchCases(folderId: string) {
+  const url = `${apiServer}/cases?folderId=${folderId}`;
+
+  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);
+  }
+}
+
+async function createCase(folderId: string) {
+  const newCase = {
+    title: "untitled case",
+    state: 0,
+    priority: 2,
+    type: 0,
+    automationStatus: 0,
+    description: "",
+    template: 0,
+    preConditions: "",
+    expectedResults: "",
+    folderId: folderId,
+  };
+
+  const fetchOptions = {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(newCase),
+  };
+
+  const url = `${apiServer}/cases`;
+
+  try {
+    const response = await fetch(url, fetchOptions);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data;
+  } catch (error) {
+    console.error("Error creating case:", error);
+    throw error;
+  }
+}
+
+async function deleteCase(caseId: number) {
+  const fetchOptions = {
+    method: "DELETE",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  };
+
+  const url = `${apiServer}/cases/${caseId}`;
+
+  try {
+    const response = await fetch(url, fetchOptions);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+  } catch (error) {
+    console.error("Error deleting case:", error);
+    throw error;
+  }
+}
+
+async function deleteCases(deleteCases: string[]) {
+  const fetchOptions = {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ caseIds: deleteCases }),
+  };
+
+  const url = `${apiServer}/cases/bulkdelete`;
+
+  try {
+    const response = await fetch(url, fetchOptions);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+  } catch (error) {
+    console.error("Error deleting cases:", error);
+    throw error;
+  }
+}
+
+export { fetchCases, createCase, deleteCase, deleteCases };
diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/page.tsx b/frontend/app/projects/[projectId]/folders/[folderId]/cases/page.tsx
index 66c6f95..660850b 100644
--- a/frontend/app/projects/[projectId]/folders/[folderId]/cases/page.tsx
+++ b/frontend/app/projects/[projectId]/folders/[folderId]/cases/page.tsx
@@ -1,165 +1,13 @@
-"use client";
-import { useEffect, useState } from "react";
-import Config from "@/config/config";
-const apiServer = Config.apiServer;
-import TestCaseTable from "./test-case-table";
-
-/**
- * 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);
-  }
-}
-
-async function fetchCreateCase(folderId: string) {
-  const newCase = {
-    title: "untitled case",
-    state: 0,
-    priority: 2,
-    type: 0,
-    automationStatus: 0,
-    description: "",
-    template: 0,
-    preConditions: "",
-    expectedResults: "",
-    folderId: folderId,
-  };
-
-  const fetchOptions = {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify(newCase),
-  };
-
-  const url = `${apiServer}/cases`;
-
-  try {
-    const response = await fetch(url, fetchOptions);
-    if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`);
-    }
-    const data = await response.json();
-    return data;
-  } catch (error) {
-    console.error("Error creating case:", error);
-    throw error;
-  }
-}
-
-async function fetchDeleteCase(caseId: number) {
-  const fetchOptions = {
-    method: "DELETE",
-    headers: {
-      "Content-Type": "application/json",
-    },
-  };
-
-  const url = `${apiServer}/cases/${caseId}`;
-
-  try {
-    const response = await fetch(url, fetchOptions);
-    if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`);
-    }
-  } catch (error) {
-    console.error("Error deleting case:", error);
-    throw error;
-  }
-}
-
-async function fetchDeleteCases(deleteCases: string[]) {
-  const fetchOptions = {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({ caseIds: deleteCases }),
-  };
-
-  const url = `${apiServer}/cases/bulkdelete`;
-
-  try {
-    const response = await fetch(url, fetchOptions);
-    if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`);
-    }
-  } catch (error) {
-    console.error("Error deleting cases:", error);
-    throw error;
-  }
-}
+import CasesPane from "./CasesPane";
 
 export default function Page({
   params,
 }: {
   params: { projectId: string; folderId: string };
 }) {
-  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();
-  }, []);
-
-  const handleCreateCase = async (folderId: string) => {
-    const newCase = await fetchCreateCase(folderId);
-    const updateCases = [...cases];
-    updateCases.push(newCase);
-    setCases(updateCases);
-  };
-
-  const handleDeleteCase = async (caseId: number) => {
-    await fetchDeleteCase(caseId);
-    const data = await fetchCases(url);
-    setCases(data);
-  };
-
-  const handleDeleteCases = async (deleteCases: string[]) => {
-    await fetchDeleteCases(deleteCases);
-    const data = await fetchCases(url);
-    setCases(data);
-  }
-
   return (
     <>
-      <TestCaseTable
-        projectId={params.projectId}
-        cases={cases}
-        onCreateCase={() => handleCreateCase(params.folderId)}
-        onDeleteCase={handleDeleteCase}
-        onDeleteCases={handleDeleteCases}
-      />
+      <CasesPane projectId={params.projectId} folderId={params.folderId} />
     </>
   );
 }