diff --git a/frontend/app/projects/[projectId]/runs/RunDialog.tsx b/frontend/app/projects/[projectId]/runs/RunDialog.tsx
index ff48d58..8a89173 100644
--- a/frontend/app/projects/[projectId]/runs/RunDialog.tsx
+++ b/frontend/app/projects/[projectId]/runs/RunDialog.tsx
@@ -5,19 +5,31 @@ 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: (name: string, detail: string) => void;
+  onSubmit: (testRun: RunType) => void;
 };
 
 export default function RunDialog({
@@ -26,73 +38,71 @@ export default function RunDialog({
   onCancel,
   onSubmit,
 }: Props) {
-  const [runName, setRunName] = useState({
-    text: editingRun ? editingRun.name : "",
-    isValid: false,
-    errorMessage: "",
-  });
+  const [testRun, setTestRun] = useState<RunType>(
+    editingRun ? editingRun : defaultTestRun
+  );
+  const [isNameInvalid, setIsNameInvalid] = useState<boolean>(false);
 
-  const [runDetail, setRunDetail] = useState({
-    text: editingRun ? editingRun.detail : "",
-    isValid: false,
-    errorMessage: "",
-  });
+  // const [runName, setRunName] = useState({
+  //   text: editingRun ? editingRun.name : "",
+  //   isValid: false,
+  //   errorMessage: "",
+  // });
 
-  useEffect(() => {
-    if (editingRun) {
-      setRunName({
-        ...runName,
-        text: editingRun.name,
-      });
+  // const [runDetail, setRunDetail] = useState({
+  //   text: editingRun ? editingRun.detail : "",
+  //   isValid: false,
+  //   errorMessage: "",
+  // });
 
-      setRunDetail({
-        ...runDetail,
-        text: editingRun.detail ? editingRun.detail : "",
-      });
-    } else {
-      setRunName({
-        ...runName,
-        text: "",
-      });
+  // useEffect(() => {
+  //   if (editingRun) {
+  //     setRunName({
+  //       ...runName,
+  //       text: editingRun.name,
+  //     });
 
-      setRunDetail({
-        ...runDetail,
-        text: "",
-      });
-    }
-  }, [editingRun]);
+  //     setRunDetail({
+  //       ...runDetail,
+  //       text: editingRun.detail ? editingRun.detail : "",
+  //     });
+  //   } else {
+  //     setRunName({
+  //       ...runName,
+  //       text: "",
+  //     });
 
-  const clear = () => {
-    setRunName({
-      isValid: false,
-      text: "",
-      errorMessage: "",
-    });
-    setRunDetail({
-      isValid: false,
-      text: "",
-      errorMessage: "",
-    });
-  };
+  //     setRunDetail({
+  //       ...runDetail,
+  //       text: "",
+  //     });
+  //   }
+  // }, [editingRun]);
+
+  // const clear = () => {
+  //   setRunName({
+  //     isValid: false,
+  //     text: "",
+  //     errorMessage: "",
+  //   });
+  //   setRunDetail({
+  //     isValid: false,
+  //     text: "",
+  //     errorMessage: "",
+  //   });
+  // };
 
   const validate = () => {
-    if (!runName.text) {
-      setRunName({
-        text: "",
-        isValid: false,
-        errorMessage: "Please enter run name",
-      });
+    // do validation
 
-      return;
-    }
-
-    onSubmit(runName.text, runDetail.text);
-    clear();
+    onSubmit(testRun);
+    // clear();
   };
 
   return (
     <Modal
       isOpen={isOpen}
+      size="3xl"
       onOpenChange={() => {
         onCancel();
       }}
@@ -100,31 +110,63 @@ export default function RunDialog({
       <ModalContent>
         <ModalHeader className="flex flex-col gap-1">Run</ModalHeader>
         <ModalBody>
-          <Input
-            type="text"
-            label="Run Name"
-            value={runName.text}
-            isInvalid={runName.isValid}
-            errorMessage={runName.errorMessage}
-            onChange={(e) => {
-              setRunName({
-                ...runName,
-                text: e.target.value,
-              });
-            }}
-          />
-          <Textarea
-            label="Run Detail"
-            value={runDetail.text}
-            isInvalid={runDetail.isValid}
-            errorMessage={runDetail.errorMessage}
-            onChange={(e) => {
-              setRunDetail({
-                ...runDetail,
-                text: e.target.value,
-              });
-            }}
-          />
+          <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}>
diff --git a/frontend/config/selection.ts b/frontend/config/selection.ts
index 954e0e2..c4b334d 100644
--- a/frontend/config/selection.ts
+++ b/frontend/config/selection.ts
@@ -33,4 +33,13 @@ const templates = [
   { name: "Step", uid: "step-template" },
 ];
 
-export { priorities, testTypes, automationStatus, templates };
+const testRunStatus = [
+  { name: "New", uid: "new" },
+  { name: "In progress", uid: "in-progress" },
+  { name: "Under review", uid: "under-review" },
+  { name: "Rejected", uid: "rejected" },
+  { name: "Done", uid: "done" },
+  { name: "Closed", uid: "closed" },
+]
+
+export { priorities, testTypes, automationStatus, templates, testRunStatus };