diff --git a/backend/index.js b/backend/index.js
index 2e05077..9c15d3e 100644
--- a/backend/index.js
+++ b/backend/index.js
@@ -79,8 +79,10 @@ app.use("/attachments", attachmentsDownloadRoute);
 
 // "/runs"
 const runsIndexRoute = require("./routes/runs/index")(sequelize);
+const runsShowRoute = require("./routes/cases/show")(sequelize);
 const runsNewRoute = require("./routes/runs/new")(sequelize);
 app.use("/runs", runsIndexRoute);
+app.use("/runs", runsShowRoute);
 app.use("/runs", runsNewRoute);
 
 const PORT = process.env.PORT || 3001;
diff --git a/backend/routes/runs/show.js b/backend/routes/runs/show.js
new file mode 100644
index 0000000..f23cfda
--- /dev/null
+++ b/backend/routes/runs/show.js
@@ -0,0 +1,29 @@
+const express = require("express");
+const router = express.Router();
+const defineRun = require("../../models/runs");
+const { DataTypes } = require("sequelize");
+
+module.exports = function (sequelize) {
+  const Run = defineRun(sequelize, DataTypes);
+
+  router.get("/:runId", async (req, res) => {
+    const runId = req.params.runId;
+
+    if (!runId) {
+      return res.status(400).json({ error: "runId is required" });
+    }
+
+    try {
+      const project = await Run.findByPk(runId);
+      if (!project) {
+        return res.status(404).send("Run not found");
+      }
+      res.json(project);
+    } catch (error) {
+      console.error(error);
+      res.status(500).send("Internal Server Error");
+    }
+  });
+
+  return router;
+};
diff --git a/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/caseControl.ts b/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/caseControl.ts
index 2be6553..378492f 100644
--- a/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/caseControl.ts
+++ b/frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/caseControl.ts
@@ -1,5 +1,6 @@
 import Config from "@/config/config";
 const apiServer = Config.apiServer;
+import { CaseType } from "@/types/case";
 
 /**
  * fetch case
@@ -76,7 +77,7 @@ async function fetchDeleteStep(stepId: number, parentCaseId: number) {
 }
 
 /**
- * Update folder
+ * Update case
  */
 async function updateCase(updateCaseData: CaseType) {
   const fetchOptions = {
diff --git a/frontend/app/projects/[projectId]/runs/RunDialog.tsx b/frontend/app/projects/[projectId]/runs/RunDialog.tsx
deleted file mode 100644
index 8a89173..0000000
--- a/frontend/app/projects/[projectId]/runs/RunDialog.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-"use client";
-import React from "react";
-import { useState, useEffect } from "react";
-import {
-  Button,
-  Input,
-  Textarea,
-  Select,
-  SelectItem,
-  Modal,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-} from "@nextui-org/react";
-import { testRunStatus } from "@/config/selection";
-import { RunType } from "@/types/run";
-
-const defaultTestRun = {
-  id: 0,
-  name: "",
-  configurations: 0,
-  description: "",
-  state: 0,
-  projectId: 0,
-};
-
-type Props = {
-  isOpen: boolean;
-  editingRun: RunType;
-  onCancel: () => void;
-  onSubmit: (testRun: RunType) => void;
-};
-
-export default function RunDialog({
-  isOpen,
-  editingRun,
-  onCancel,
-  onSubmit,
-}: Props) {
-  const [testRun, setTestRun] = useState<RunType>(
-    editingRun ? editingRun : defaultTestRun
-  );
-  const [isNameInvalid, setIsNameInvalid] = useState<boolean>(false);
-
-  // const [runName, setRunName] = useState({
-  //   text: editingRun ? editingRun.name : "",
-  //   isValid: false,
-  //   errorMessage: "",
-  // });
-
-  // const [runDetail, setRunDetail] = useState({
-  //   text: editingRun ? editingRun.detail : "",
-  //   isValid: false,
-  //   errorMessage: "",
-  // });
-
-  // useEffect(() => {
-  //   if (editingRun) {
-  //     setRunName({
-  //       ...runName,
-  //       text: editingRun.name,
-  //     });
-
-  //     setRunDetail({
-  //       ...runDetail,
-  //       text: editingRun.detail ? editingRun.detail : "",
-  //     });
-  //   } else {
-  //     setRunName({
-  //       ...runName,
-  //       text: "",
-  //     });
-
-  //     setRunDetail({
-  //       ...runDetail,
-  //       text: "",
-  //     });
-  //   }
-  // }, [editingRun]);
-
-  // const clear = () => {
-  //   setRunName({
-  //     isValid: false,
-  //     text: "",
-  //     errorMessage: "",
-  //   });
-  //   setRunDetail({
-  //     isValid: false,
-  //     text: "",
-  //     errorMessage: "",
-  //   });
-  // };
-
-  const validate = () => {
-    // do validation
-
-    onSubmit(testRun);
-    // clear();
-  };
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      size="3xl"
-      onOpenChange={() => {
-        onCancel();
-      }}
-    >
-      <ModalContent>
-        <ModalHeader className="flex flex-col gap-1">Run</ModalHeader>
-        <ModalBody>
-          <div className="container mx-auto">
-            <div className="flex flex-wrap-mx-4">
-              <div className="w-1/2 px-4">
-                <Input
-                  size="sm"
-                  type="text"
-                  variant="bordered"
-                  label="Run Name"
-                  value={testRun.name}
-                  isInvalid={isNameInvalid}
-                  errorMessage={isNameInvalid ? "please enter name" : ""}
-                  onChange={(e) => {
-                    setTestRun({ ...testRun, name: e.target.value });
-                  }}
-                  className="mt-3"
-                />
-
-                <Textarea
-                  size="sm"
-                  variant="bordered"
-                  label="Run Detail"
-                  value={testRun.description}
-                  onValueChange={(changeValue) => {
-                    setTestRun({ ...testRun, description: changeValue });
-                  }}
-                  className="mt-3"
-                />
-
-                <Select
-                  size="sm"
-                  variant="bordered"
-                  selectedKeys={[testRunStatus[testRun.state].uid]}
-                  onSelectionChange={(e) => {
-                    const selectedUid = e.anchorKey;
-                    const index = testRunStatus.findIndex(
-                      (template) => template.uid === selectedUid
-                    );
-                    setTestRun({ ...testRun, state: index });
-                  }}
-                  label="template"
-                  className="mt-3 max-w-xs"
-                >
-                  {testRunStatus.map((state, index) => (
-                    <SelectItem key={state.uid} value={index}>
-                      {state.name}
-                    </SelectItem>
-                  ))}
-                </Select>
-              </div>
-
-              <div className="w-1/2 px-4">
-                <Button color="primary" onPress={onCancel}>
-                  Select Test Cases
-                </Button>
-              </div>
-            </div>
-          </div>
-        </ModalBody>
-        <ModalFooter>
-          <Button variant="light" onPress={onCancel}>
-            Close
-          </Button>
-          <Button color="primary" onPress={validate}>
-            {editingRun ? "Update" : "Create"}
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-}
diff --git a/frontend/app/projects/[projectId]/runs/RunsPage.tsx b/frontend/app/projects/[projectId]/runs/RunsPage.tsx
index f578bf3..f9ca342 100644
--- a/frontend/app/projects/[projectId]/runs/RunsPage.tsx
+++ b/frontend/app/projects/[projectId]/runs/RunsPage.tsx
@@ -2,15 +2,8 @@
 import { useEffect, useState } from "react";
 import { Button } from "@nextui-org/react";
 import { Plus } from "lucide-react";
-import { RunType } from "@/types/run";
 import RunsTable from "./RunsTable";
-import RunDialog from "./RunDialog";
-import {
-  fetchRuns,
-  createRun,
-  updateRun,
-  deleteRun,
-} from "./runsControl";
+import { fetchRuns, createRun, deleteRun } from "./runsControl";
 
 type Props = {
   projectId: string;
@@ -32,42 +25,15 @@ export default function RunsPage({ projectId }: Props) {
     fetchDataEffect();
   }, []);
 
-  // dialog
-  const [isRunDialogOpen, setIsRunDialogOpen] = useState(false);
-  const [editingRun, setEditingRun] = useState<RunType | null>(
-    null
-  );
-  const openDialogForCreate = () => {
-    setIsRunDialogOpen(true);
-    setEditingRun(null);
-  };
-
-  const closeDialog = () => {
-    setIsRunDialogOpen(false);
-    setEditingRun(null);
-  };
-
-  const onSubmit = async (name: string, detail: string) => {
-    if (editingRun) {
-      const updatedRun = await updateRun(
-        editingRun.id,
-        name,
-        detail
-      );
-      const updatedRuns = runs.map((run) =>
-        run.id === updatedRun.id ? updatedRun : run
-      );
-      setRuns(updatedRuns);
-    } else {
-      const newRun = await createRun(name, detail);
-      setRuns([...runs, newRun]);
+  const onCreateClick = async () => {
+    try {
+      const newRun = await createRun(projectId);
+      const updateRuns = [...runs];
+      updateRuns.push(newRun);
+      setRuns(updateRuns);
+    } catch (error) {
+      console.error("Error deleting run:", error);
     }
-    closeDialog();
-  };
-
-  const onEditClick = (run: RunType) => {
-    setEditingRun(run);
-    setIsRunDialogOpen(true);
   };
 
   const onDeleteClick = async (runId: number) => {
@@ -80,7 +46,7 @@ export default function RunsPage({ projectId }: Props) {
   };
 
   return (
-    <div className="container mx-auto max-w-3xl pt-16 px-6 flex-grow">
+    <div className="container mx-auto max-w-3xl pt-6 px-6 flex-grow">
       <div className="w-full p-3 flex items-center justify-between">
         <h3 className="font-bold">Runs</h3>
         <div>
@@ -88,7 +54,7 @@ export default function RunsPage({ projectId }: Props) {
             startContent={<Plus size={16} />}
             size="sm"
             color="primary"
-            onClick={openDialogForCreate}
+            onClick={onCreateClick}
           >
             New Run
           </Button>
@@ -96,17 +62,10 @@ export default function RunsPage({ projectId }: Props) {
       </div>
 
       <RunsTable
+        projectId={projectId}
         runs={runs}
-        onEditRun={onEditClick}
         onDeleteRun={onDeleteClick}
       />
-
-      <RunDialog
-        isOpen={isRunDialogOpen}
-        editingRun={editingRun}
-        onCancel={closeDialog}
-        onSubmit={onSubmit}
-      />
     </div>
   );
 }
diff --git a/frontend/app/projects/[projectId]/runs/RunsTable.tsx b/frontend/app/projects/[projectId]/runs/RunsTable.tsx
index 781a8c2..4920f9e 100644
--- a/frontend/app/projects/[projectId]/runs/RunsTable.tsx
+++ b/frontend/app/projects/[projectId]/runs/RunsTable.tsx
@@ -27,12 +27,12 @@ const headerColumns = [
 ];
 
 type Props = {
+  projectId: string;
   runs: RunType[];
-  onEditRun: (run: RunType) => void;
   onDeleteRun: (runId: number) => void;
 };
 
-export default function RunsTable({ runs, onEditRun, onDeleteRun }: Props) {
+export default function RunsTable({ projectId, runs, onDeleteRun }: Props) {
   const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
     column: "id",
     direction: "ascending",
@@ -62,7 +62,7 @@ export default function RunsTable({ runs, onEditRun, onDeleteRun }: Props) {
         return (
           <Link
             underline="hover"
-            href={`/runs/${run.id}/home`}
+            href={`/projects/${projectId}/runs/${run.id}`}
             className="text-blue-500"
           >
             {cellValue}
@@ -87,9 +87,6 @@ export default function RunsTable({ runs, onEditRun, onDeleteRun }: Props) {
               </Button>
             </DropdownTrigger>
             <DropdownMenu aria-label="run actions">
-              <DropdownItem onClick={() => onEditRun(run)}>
-                Edit run
-              </DropdownItem>
               <DropdownItem
                 className="text-danger"
                 onClick={() => onDeleteRun(run.id)}
diff --git a/frontend/app/projects/[projectId]/runs/[runId]/RunEditor.tsx b/frontend/app/projects/[projectId]/runs/[runId]/RunEditor.tsx
new file mode 100644
index 0000000..f22fa8a
--- /dev/null
+++ b/frontend/app/projects/[projectId]/runs/[runId]/RunEditor.tsx
@@ -0,0 +1,144 @@
+"use client";
+import React from "react";
+import { useState, useEffect } from "react";
+import {
+  Button,
+  Input,
+  Textarea,
+  Select,
+  SelectItem,
+  Tooltip,
+} from "@nextui-org/react";
+import { useRouter } from "next/navigation";
+import { Save, ArrowLeft, Plus } from "lucide-react";
+import { testRunStatus } from "@/config/selection";
+import { RunType } from "@/types/run";
+import { fetchRun, updateRun } from "../runsControl";
+
+const defaultTestRun = {
+  id: 0,
+  title: "",
+  configurations: 0,
+  description: "",
+  state: 0,
+  projectId: 0,
+};
+
+type Props = {
+  projectId: string;
+  runId: string;
+};
+
+export default function RunEditor({ projectId, runId }: Props) {
+  const [testRun, setTestRun] = useState<RunType>(defaultTestRun);
+  const [isTitleInvalid, setIsTitleInvalid] = useState<boolean>(false);
+  const [isUpdating, setIsUpdating] = useState<boolean>(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    async function fetchDataEffect() {
+      try {
+        const data = await fetchRun(runId);
+        setTestRun(data);
+      } catch (error) {
+        console.error("Error in effect:", error.message);
+      }
+    }
+
+    fetchDataEffect();
+  }, []);
+
+  return (
+    <>
+      <div className="border-b-1 dark:border-neutral-700 w-full p-3 flex items-center justify-between">
+        <div className="flex items-center">
+          <Tooltip content="Back to runs" placement="left">
+            <Button
+              isIconOnly
+              size="sm"
+              className="rounded-full bg-neutral-50 dark:bg-neutral-600"
+              onPress={() => router.push(`/projects/${projectId}/runs`)}
+            >
+              <ArrowLeft size={16} />
+            </Button>
+          </Tooltip>
+          <h3 className="font-bold ms-2">{testRun.title}</h3>
+        </div>
+        <Button
+          startContent={<Save size={16} />}
+          size="sm"
+          color="primary"
+          isLoading={isUpdating}
+          onPress={async () => {
+            setIsUpdating(true);
+            await updateRun(testRun);
+            setIsUpdating(false);
+          }}
+        >
+          {isUpdating ? "Updating..." : "Update"}
+        </Button>
+      </div>
+
+      <div className="container mx-auto max-w-3xl pt-6 px-6 flex-grow">
+        <Input
+          size="sm"
+          type="text"
+          variant="bordered"
+          label="Title"
+          value={testRun.title}
+          isInvalid={isTitleInvalid}
+          errorMessage={isTitleInvalid ? "please enter title" : ""}
+          onChange={(e) => {
+            setTestRun({ ...testRun, title: e.target.value });
+          }}
+          className="mt-3"
+        />
+
+        <Button
+          startContent={<Plus size={16} />}
+          size="sm"
+          color="primary"
+          onPress={async () => {}}
+          className="mt-3"
+        >
+          Select test case
+        </Button>
+
+        <Textarea
+          size="sm"
+          variant="bordered"
+          label="Description"
+          placeholder="Test run description"
+          value={testRun.description}
+          onValueChange={(changeValue) => {
+            setTestRun({ ...testRun, description: changeValue });
+          }}
+          className="mt-3"
+        />
+
+        <div>
+          <Select
+            size="sm"
+            variant="bordered"
+            selectedKeys={[testRunStatus[testRun.state].uid]}
+            onSelectionChange={(e) => {
+              const selectedUid = e.anchorKey;
+              const index = testRunStatus.findIndex(
+                (template) => template.uid === selectedUid
+              );
+              setTestRun({ ...testRun, state: index });
+            }}
+            label="template"
+            className="mt-3 max-w-xs"
+          >
+            {testRunStatus.map((state, index) => (
+              <SelectItem key={state.uid} value={index}>
+                {state.name}
+              </SelectItem>
+            ))}
+          </Select>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/frontend/app/projects/[projectId]/runs/[runId]/page.tsx b/frontend/app/projects/[projectId]/runs/[runId]/page.tsx
new file mode 100644
index 0000000..bc8c2bb
--- /dev/null
+++ b/frontend/app/projects/[projectId]/runs/[runId]/page.tsx
@@ -0,0 +1,9 @@
+import RunEditor from "./RunEditor";
+
+export default function Page({
+  params,
+}: {
+  params: { projectId: string; runId: string };
+}) {
+  return <RunEditor projectId={params.projectId} runId={params.runId} />;
+}
diff --git a/frontend/app/projects/[projectId]/runs/runsControl.ts b/frontend/app/projects/[projectId]/runs/runsControl.ts
index 54f9f82..0b485b9 100644
--- a/frontend/app/projects/[projectId]/runs/runsControl.ts
+++ b/frontend/app/projects/[projectId]/runs/runsControl.ts
@@ -1,5 +1,28 @@
 import Config from "@/config/config";
 const apiServer = Config.apiServer;
+import { RunType } from "@/types/run";
+
+async function fetchRun(runId: string) {
+  const url = `${apiServer}/runs/${runId}`;
+
+  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 fetchRuns(projectId: string) {
   const url = `${apiServer}/runs?projectId=${projectId}`;
@@ -23,10 +46,13 @@ async function fetchRuns(projectId: string) {
   }
 }
 
-async function createRun(name: string, detail: string) {
-  const newProjectData = {
-    name: name,
-    detail: detail,
+async function createRun(projectId: string) {
+  const newTestRun = {
+    name: "untitled run",
+    configurations: 0,
+    description: "",
+    state: 0,
+    projectId: projectId,
   };
 
   const fetchOptions = {
@@ -34,7 +60,7 @@ async function createRun(name: string, detail: string) {
     headers: {
       "Content-Type": "application/json",
     },
-    body: JSON.stringify(newProjectData),
+    body: JSON.stringify(newTestRun),
   };
 
   const url = `${apiServer}/runs`;
@@ -47,26 +73,21 @@ async function createRun(name: string, detail: string) {
     const data = await response.json();
     return data;
   } catch (error) {
-    console.error("Error creating new project:", error);
+    console.error("Error creating new test run:", error);
     throw error;
   }
 }
 
-async function updateRun(runId: number, name: string, detail: string) {
-  const updatedProjectData = {
-    name: name,
-    detail: detail,
-  };
-
+async function updateRun(updateTestRun: RunType) {
   const fetchOptions = {
     method: "PUT",
     headers: {
       "Content-Type": "application/json",
     },
-    body: JSON.stringify(updatedProjectData),
+    body: JSON.stringify(updateTestRun),
   };
 
-  const url = `${apiServer}/runs/${runId}`;
+  const url = `${apiServer}/cases/${updateTestRun.id}`;
 
   try {
     const response = await fetch(url, fetchOptions);
@@ -102,4 +123,4 @@ async function deleteRun(runId: number) {
   }
 }
 
-export { fetchRuns, createRun, updateRun, deleteRun };
+export { fetchRun, fetchRuns, createRun, updateRun, deleteRun };
diff --git a/frontend/types/run.ts b/frontend/types/run.ts
index c09d99c..535abe3 100644
--- a/frontend/types/run.ts
+++ b/frontend/types/run.ts
@@ -1,6 +1,6 @@
 export type RunType = {
   id: number;
-  name: string;
+  title: string;
   configurations: number;
   description: string;
   state: number;