diff --git a/crescendo-web/.DS_Store b/crescendo-web/.DS_Store
new file mode 100644
index 0000000..639e3d2
Binary files /dev/null and b/crescendo-web/.DS_Store differ
diff --git a/crescendo-web/src/image/.DS_Store b/crescendo-web/src/image/.DS_Store
index 9850ed6..830fe13 100644
Binary files a/crescendo-web/src/image/.DS_Store and b/crescendo-web/src/image/.DS_Store differ
diff --git a/crescendo-web/src/image/button.png b/crescendo-web/src/image/button.png
new file mode 100644
index 0000000..9c06142
Binary files /dev/null and b/crescendo-web/src/image/button.png differ
diff --git a/crescendo-web/src/image/var.png b/crescendo-web/src/image/var.png
new file mode 100644
index 0000000..d047538
Binary files /dev/null and b/crescendo-web/src/image/var.png differ
diff --git a/crescendo-web/src/pages/Main.css b/crescendo-web/src/pages/Main.css
index c7651b9..fcef006 100644
--- a/crescendo-web/src/pages/Main.css
+++ b/crescendo-web/src/pages/Main.css
@@ -2,4 +2,56 @@
     background-color: #895D3C;
     width: 100%;
     height: 15px;
-  }
\ No newline at end of file
+    margin-bottom: 10px;
+  }
+.container {
+    display: flex;
+    flex-direction: column; /* 세로 방향으로 배치 */
+    align-items: center; /* 수평 가운데 정렬 */
+    justify-content: flex-start; /* 상단에 붙이기 */
+    height: 100vh; /* 전체 화면 높이 */
+    padding: 0; /* 패딩 제거 */
+    margin: 0; /* 기본 여백 제거 */
+    box-sizing: border-box; /* 패딩과 테두리가 전체 크기에 포함되도록 설정 */
+  }
+.text {
+  background-color: none;
+  border-radius: 50px;
+  border: solid 0.2px #714C2F;
+  height: 42px;
+  width: 380px;
+  margin-top: 10px;
+  font-size: 20px;
+}
+h4 {
+  font-size: 24px;
+  color: #714C2F;
+  margin-right: 150px;
+}
+h5 {
+  font-size: 24px;
+  color: #714C2F;
+  margin-right: 260px;
+}
+.Todo {
+  background-color: none;
+  border-radius: 20px;
+  border: solid 1px #714C2F;
+  width: 380px;
+  height: 273px;
+}
+.underline {
+  background-color: #714C2F;
+  width: 380px;
+  height: 2px;
+}
+.plus {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;;
+}
+.under {
+  position: fixed;
+  margin-top: 700px;
+  margin-left: 340px;
+}
\ No newline at end of file
diff --git a/crescendo-web/src/pages/Main.js b/crescendo-web/src/pages/Main.js
index e5b5df9..1b03286 100644
--- a/crescendo-web/src/pages/Main.js
+++ b/crescendo-web/src/pages/Main.js
@@ -3,7 +3,20 @@ import "./Main.css";
 
 function Main() {
     return (
+      <div className="container">
         <div className="box"></div>
+        <img src={require("../image/var.png")} width="440px"/>
+        <input className="text"></input>
+        <h4>오늘의 추천 Todo 🔥</h4>
+        <div className="Todo"></div>
+        <h5>My Todo</h5>
+        <div className="underline"></div>
+        <div className="under">
+        <button className="plus">
+          <img src={require("../image/button.png")} className="plus"></img>
+        </button>
+        </div>
+      </div>
     );
   }
 
diff --git a/images/.DS_Store b/images/.DS_Store
new file mode 100644
index 0000000..d95a03b
Binary files /dev/null and b/images/.DS_Store differ