diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index a4b7e48..c885b3c 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -38,7 +38,7 @@ export default function RootLayout({
         )}
       >
         <Providers themeProps={{ attribute: "class", defaultTheme: "dark" }}>
-          <div className="relative flex flex-col h-screen">
+          <div className="relative flex flex-col h-screen bg-slate-100">
             <Navbar />
             <main className="container mx-auto max-w-7xl pt-16 px-6 flex-grow">
               {children}
diff --git a/frontend/app/projects/[id]/main.tsx b/frontend/app/projects/[id]/main.tsx
new file mode 100644
index 0000000..1bea9bb
--- /dev/null
+++ b/frontend/app/projects/[id]/main.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import Sidebar from "./sidebar";
+
+export default function Main() {
+  return (
+    <Sidebar>
+      {/* ここにページの内容を配置 */}
+      <div className="p-4">
+        <h1 className="text-2xl font-bold">Main Content</h1>
+        <p>This is the main content of the page.</p>
+      </div>
+    </Sidebar>
+  );
+}
diff --git a/frontend/app/projects/[id]/page.tsx b/frontend/app/projects/[id]/page.tsx
index bd07329..0ce80ea 100644
--- a/frontend/app/projects/[id]/page.tsx
+++ b/frontend/app/projects/[id]/page.tsx
@@ -2,6 +2,7 @@
 import { useEffect, useState } from "react";
 import Config from "@/config/config";
 const apiServer = Config.apiServer;
+import Main from "./main";
 
 /**
  * fetch folder records
@@ -48,8 +49,8 @@ export default function Page({ params }: { params: { id: string } }) {
   }, []);
 
   return (
-    <div>
-      <div>Project: {params.id}</div>
+    <>
+      {/* <div>Project: {params.id}</div>
       <div className="flex flex-wrap gap-4 mt-5">
         {folders.map((folder, index) => (
           <div key={index}>
@@ -58,7 +59,8 @@ export default function Page({ params }: { params: { id: string } }) {
             <div>{folder.projectId}</div>
           </div>
         ))}
-      </div>
-    </div>
+      </div> */}
+      <Main />
+    </>
   );
 }
diff --git a/frontend/app/projects/[id]/sidebar.tsx b/frontend/app/projects/[id]/sidebar.tsx
new file mode 100644
index 0000000..f95a4af
--- /dev/null
+++ b/frontend/app/projects/[id]/sidebar.tsx
@@ -0,0 +1,16 @@
+import { Menu, MenuItem } from "@nextui-org/react";
+
+export default function Sidebar({ children }) {
+  return (
+    <div className="flex">
+      <div className="w-64 bg-white rounded-lg m-2">
+        <Menu openMode="multiple" aria-label="Main Menu">
+          <MenuItem>Menu Item 1</MenuItem>
+          <MenuItem>Menu Item 2</MenuItem>
+          <MenuItem>Menu Item 3</MenuItem>
+        </Menu>
+      </div>
+      <div className="flex-grow bg-white rounded-lg m-2">{children}</div>
+    </div>
+  );
+}
diff --git a/frontend/app/projects/page.tsx b/frontend/app/projects/page.tsx
index 7e10c73..b094408 100644
--- a/frontend/app/projects/page.tsx
+++ b/frontend/app/projects/page.tsx
@@ -134,16 +134,6 @@ export default function ProjectsPage() {
       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,
diff --git a/frontend/app/projects/project-card.tsx b/frontend/app/projects/project-card.tsx
index ca784e7..6208545 100644
--- a/frontend/app/projects/project-card.tsx
+++ b/frontend/app/projects/project-card.tsx
@@ -11,8 +11,8 @@ import NextLink from "next/link";
 export function ProjectCard({ projectName, projectDetail }) {
   return (
     <NextLink href={`/projects/${1}`}>
-      <Card className="w-[250px] hover:bg-slate-200">
-        <CardHeader className="flex gap-3">
+      <Card className="w-[250px] h-36 hover:bg-slate-200">
+        <CardHeader className="flex gap-3 h-16">
           <Image
             alt="nextui logo"
             height={40}