diff --git a/backend/routes/cases/index.js b/backend/routes/cases/index.js
index e23a1ea..ed7e483 100644
--- a/backend/routes/cases/index.js
+++ b/backend/routes/cases/index.js
@@ -1,25 +1,30 @@
 const express = require("express");
 const router = express.Router();
 const defineCase = require("../../models/cases");
-const { DataTypes } = require('sequelize');
+const { DataTypes } = require("sequelize");
 
-module.exports = function(sequelize) {
-  const Run = defineCase(sequelize, DataTypes)
+module.exports = function (sequelize) {
+  const Case = defineCase(sequelize, DataTypes);
 
   router.get("/", async (req, res) => {
-    const { folderId } = req.query;
+    const { caseId, folderId } = req.query;
 
-    if (!folderId) {
-      return res.status(400).json({ error: 'folderId is required' });
+    if (!caseId && !folderId) {
+      return res.status(400).json({ error: "caseId or folderId is required" });
+    }
+
+    if (caseId) {
+      const testcase = await Case.findByPk(caseId);
+      return res.json(testcase);
     }
 
     try {
-      const runs = await Run.findAll({
+      const cases = await Case.findAll({
         where: {
-          folderId: folderId
-        }
+          folderId: folderId,
+        },
       });
-      res.json(runs);
+      res.json(cases);
     } catch (error) {
       console.error(error);
       res.status(500).send("Internal Server Error");
@@ -27,4 +32,4 @@ module.exports = function(sequelize) {
   });
 
   return router;
-};
\ No newline at end of file
+};
diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx b/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
index 5d90c12..927f1ed 100644
--- a/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
+++ b/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/page.tsx
@@ -1,18 +1,110 @@
 "use client";
-import { Button } from "@nextui-org/react";
-import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { Select, SelectItem } from "@nextui-org/react";
+import priorities from "../priorities";
+import Config from "@/config/config";
+const apiServer = Config.apiServer;
+
+type CaseType = {
+  id: number;
+  title: string;
+  state: number;
+  priority: number;
+  type: number;
+  automationStatus: number;
+  description: string;
+  template: number;
+  preConditions: string;
+  expectedResults: string;
+  folderId: number;
+};
+
+const defaultTestCase = {
+  id: 0,
+  title: "",
+  state: 0,
+  priority: 0,
+  type: 0,
+  automationStatus: 0,
+  description: "",
+  template: 0,
+  preConditions: "",
+  expectedResults: "",
+  folderId: 0,
+};
+
+/**
+ * fetch case
+ */
+async function fetchCase(url: string) {
+  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: { projectId: string; folderId: string; caseId: string };
+}) {
+  const [testCase, setTestCase] = useState<CaseType>(defaultTestCase);
+
+  const url = `${apiServer}/cases?caseId=${params.caseId}`;
+  useEffect(() => {
+    async function fetchDataEffect() {
+      try {
+        const data = await fetchCase(url);
+        setTestCase(data);
+      } catch (error) {
+        console.error("Error in effect:", error.message);
+      }
+    }
+
+    fetchDataEffect();
+  }, []);
 
-export default function Page({ params }: { params: { projectId: string, folderId: string } }) {
-  const router = useRouter();
   return (
-    <>
-      <Button
-        className="ms-5 mt-3"
-        onClick={() => router.push(`/projects/${params.projectId}/folders/${params.folderId}/cases/`)}
+    <div className="p-5">
+      <h4 className="font-bold">{testCase.title}</h4>
+      <Select
+        selectedKeys={[priorities[testCase.priority].uid]}
+        onSelectionChange={(e) => {
+          const selectedUid = e.anchorKey;
+          const index = priorities.findIndex(
+            (priority) => priority.uid === selectedUid
+          );
+          setTestCase({ ...testCase, priority: index });
+        }}
+        label="Priority"
+        className="mt-3 max-w-xs"
       >
-        Back
-      </Button>
-      <div>This is each test case</div>
-    </>
+        {priorities.map((priority, index) => (
+          <SelectItem key={priority.uid} value={index}>
+            {priority.name}
+          </SelectItem>
+        ))}
+      </Select>
+
+      <div>type: {testCase.type}</div>
+      <div>automationStatus: {testCase.automationStatus}</div>
+      <div>description: {testCase.description}</div>
+      <div>template: {testCase.template}</div>
+      <div>preConditions: {testCase.preConditions}</div>
+      <div>expectedResults: {testCase.expectedResults}</div>
+    </div>
   );
 }
diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/page.tsx b/frontend/app/projects/[projectId]/folders/[folderId]/cases/page.tsx
index d499b1f..de2f2e5 100644
--- a/frontend/app/projects/[projectId]/folders/[folderId]/cases/page.tsx
+++ b/frontend/app/projects/[projectId]/folders/[folderId]/cases/page.tsx
@@ -2,8 +2,6 @@
 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";
 import TestCaseTable from "./test-case-table";
 
 /**
@@ -38,7 +36,6 @@ export default function Page({
 }: {
   params: { projectId: string; folderId: string };
 }) {
-  const router = useRouter();
   const [cases, setCases] = useState([]);
   const url = `${apiServer}/cases?folderId=${params.folderId}`;
 
diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/priorities.ts b/frontend/app/projects/[projectId]/folders/[folderId]/cases/priorities.ts
new file mode 100644
index 0000000..ba20d78
--- /dev/null
+++ b/frontend/app/projects/[projectId]/folders/[folderId]/cases/priorities.ts
@@ -0,0 +1,8 @@
+const priorities = [
+  { name: "Critical", uid: "critical", color: "danger" },
+  { name: "High", uid: "high", color: "warning" },
+  { name: "Medium", uid: "medium", color: "primary" },
+  { name: "Low", uid: "low", color: "success" },
+];
+
+export default priorities
\ No newline at end of file
diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/test-case-table.tsx b/frontend/app/projects/[projectId]/folders/[folderId]/cases/test-case-table.tsx
index bbca07a..52713f3 100644
--- a/frontend/app/projects/[projectId]/folders/[folderId]/cases/test-case-table.tsx
+++ b/frontend/app/projects/[projectId]/folders/[folderId]/cases/test-case-table.tsx
@@ -18,19 +18,14 @@ import {
 } from "@nextui-org/react";
 import { MoreVertical } from "lucide-react";
 
-const columns = [
+const headerColumns = [
   { name: "ID", uid: "id", sortable: true },
   { name: "Title", uid: "title", sortable: true },
   { name: "Priority", uid: "priority", sortable: true },
   { name: "Actions", uid: "actions" },
 ];
 
-const priorities = [
-  { name: "Critical", uid: "critical", color: "danger" },
-  { name: "High", uid: "high", color: "warning" },
-  { name: "Medium", uid: "medium", color: "primary" },
-  { name: "Low", uid: "low", color: "success" },
-];
+import priorities from "./priorities";
 
 type Case = {
   id: number;
@@ -54,7 +49,6 @@ export default function TestCaseTable({ projectId, cases }) {
     column: "id",
     direction: "ascending",
   });
-  const headerColumns = columns;
 
   const sortedItems = useMemo(() => {
     return [...cases].sort((a: Case, b: Case) => {