diff --git a/frontend/app/projects/page.tsx b/frontend/app/projects/page.tsx
index 39a2fa3..6163a46 100644
--- a/frontend/app/projects/page.tsx
+++ b/frontend/app/projects/page.tsx
@@ -2,7 +2,16 @@
 import { useEffect, useState } from "react";
 import { title } from "@/components/primitives";
 import { ProjectCard } from "./project-card";
-import { Button } from "@nextui-org/react";
+import {
+  Button,
+  Input,
+  Textarea,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+} from "@nextui-org/react";
 
 import Config from "@/config/config";
 const apiServer = Config.apiServer;
@@ -41,10 +50,10 @@ async function fetchProjects(url) {
  * @function
  * @throws {Error}
  */
-async function createProject() {
+async function createProject(name, detail) {
   const newProjectData = {
-    name: "新しいプロジェクト",
-    detail: "新しいプロジェクトの詳細説明がここにくるよ",
+    name: name,
+    detail: detail,
   };
 
   const fetchOptions = {
@@ -56,22 +65,22 @@ async function createProject() {
   };
 
   const url = `${apiServer}/projects`;
-  fetch(url, fetchOptions)
-    .then((response) => {
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
-      }
-      return response.json();
-    })
-    .then((data) => {
-      console.log("New project created:", data);
-    })
-    .catch((error) => {
-      console.error("Error creating new project:", error);
-    });
+
+  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 new project:", error);
+    throw error;
+  }
 }
 
 export default function ProjectsPage() {
+  // projects
   const [projects, setProjects] = useState([]);
   const url = `${apiServer}/projects`;
 
@@ -81,22 +90,120 @@ export default function ProjectsPage() {
         const data = await fetchProjects(url);
         setProjects(data);
       } catch (error) {
-        console.error('Error in effect:', error.message);
+        console.error("Error in effect:", error.message);
       }
     }
 
     fetchDataEffect();
   }, []);
 
+  // new project data
+  const [projectName, setProjectName] = useState({
+    text: "",
+    isValid: false,
+    errorMessage: "",
+  });
+  const [projectDetail, setProjectDetail] = useState({
+    text: "",
+    isValid: false,
+    errorMessage: "",
+  });
+
+  // modal
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const openModal = () => {
+    setIsCreateDialogOpen(true);
+  };
+
+  const closeModal = () => {
+    setProjectName({ text: "", isValid: false, errorMessage: "" });
+    setProjectDetail({ text: "", isValid: false, errorMessage: "" });
+    setIsCreateDialogOpen(false);
+  };
+
+  const onCreateClicked = async () => {
+    let isValid = true;
+
+    // validate projectName
+    if (!projectName.text) {
+      setProjectName({
+        text: "",
+        isValid: false,
+        errorMessage: "Please enter project name",
+      });
+      isValid = false;
+    }
+
+    // validate projectDetail
+    if (!projectDetail.text) {
+      setProjectDetail({
+        text: "",
+        isValid: true,
+        errorMessage: "Please enter project detail",
+      });
+      isValid = false;
+    }
+
+    if (isValid) {
+      const newProject = await createProject(
+        projectName.text,
+        projectDetail.text
+      );
+      setProjects([...projects, newProject])
+      closeModal();
+    }
+  };
+
   return (
     <div>
       <div className="flex h-full items-center">
         <h1 className={title()}>Projects</h1>
-        <Button variant="bordered" onClick={createProject} className="ms-5 mt-3">
+        <Button color="primary" onClick={openModal} className="ms-5 mt-3">
           Create
         </Button>
       </div>
 
+      <Modal isOpen={isCreateDialogOpen}>
+        <ModalContent>
+          <ModalHeader className="flex flex-col gap-1">Modal Title</ModalHeader>
+          <ModalBody>
+            <Input
+              type="text"
+              label="Project Name"
+              value={projectName.text}
+              isInvalid={projectName.isValid}
+              errorMessage={projectName.errorMessage}
+              onChange={(e) => {
+                setProjectName({
+                  ...projectName,
+                  text: e.target.value,
+                });
+              }}
+            />
+            <Textarea
+              label="Project Detail"
+              value={projectDetail.text}
+              isInvalid={projectDetail.isValid}
+              errorMessage={projectDetail.errorMessage}
+              onChange={(e) => {
+                setProjectDetail({
+                  ...projectDetail,
+                  text: e.target.value,
+                });
+              }}
+            />
+          </ModalBody>
+          <ModalFooter>
+            <Button color="danger" variant="light" onPress={closeModal}>
+              Close
+            </Button>
+            <Button color="primary" onPress={onCreateClicked}>
+              Create
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+
       <div className="flex flex-wrap gap-4 mt-5">
         {projects.map((project, index) => (
           <ProjectCard