diff --git a/package-lock.json b/package-lock.json
index f3f5b53..2cbfd36 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "react-redux": "^8.1.3",
         "react-router-dom": "^6.16.0",
         "react-scripts": "5.0.1",
+        "recoil": "^0.7.7",
         "redux": "^4.2.1",
         "redux-promise": "^0.6.0",
         "redux-thunk": "^2.4.2",
@@ -9164,6 +9165,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/hamt_plus": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
+      "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA=="
+    },
     "node_modules/handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -15327,6 +15333,25 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/recoil": {
+      "version": "0.7.7",
+      "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.7.tgz",
+      "integrity": "sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==",
+      "dependencies": {
+        "hamt_plus": "1.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/recursive-readdir": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
@@ -25013,6 +25038,11 @@
         "duplexer": "^0.1.2"
       }
     },
+    "hamt_plus": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz",
+      "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA=="
+    },
     "handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -29283,6 +29313,14 @@
         "picomatch": "^2.2.1"
       }
     },
+    "recoil": {
+      "version": "0.7.7",
+      "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.7.tgz",
+      "integrity": "sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==",
+      "requires": {
+        "hamt_plus": "1.0.2"
+      }
+    },
     "recursive-readdir": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
diff --git a/package.json b/package.json
index 4edd67c..8ab0a3c 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
+    "recoil": "^0.7.7",
     "redux": "^4.2.1",
     "redux-promise": "^0.6.0",
     "redux-thunk": "^2.4.2",
diff --git a/src/App.js b/src/App.js
index ba25e17..c617c87 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,4 @@
 import { Route, Routes } from "react-router-dom";
-import Footer from "../src/components/views/Footer/Footer";
 import Header from "../src/components/views/Header/Header";
 import Inventory from "../src/pages/Inventory/Inventory";
 import Mypage from "../src/pages/Mypage/Mypage";
@@ -18,7 +17,7 @@ function App() {
         <Route path="/Mypage" element={<Mypage />} />
       </Routes>
 
-      <Footer />
+      {/* <Footer /> */}
     </div>
   );
 }
diff --git a/src/Atom/status.jsx b/src/Atom/status.jsx
new file mode 100644
index 0000000..98133e7
--- /dev/null
+++ b/src/Atom/status.jsx
@@ -0,0 +1,8 @@
+import { atom } from "recoil";
+
+const storeStatus = atom({
+  key: "storeStatus", // 전역적으로 고유한 값
+  default: false, // 초깃값
+});
+
+export default storeStatus;
diff --git a/src/assets/Designer.png b/src/assets/Designer.png
deleted file mode 100644
index 434b26e..0000000
Binary files a/src/assets/Designer.png and /dev/null differ
diff --git a/src/components/views/Header/Header.css b/src/components/views/Header/Header.css
index 75388b5..c3c727c 100644
--- a/src/components/views/Header/Header.css
+++ b/src/components/views/Header/Header.css
@@ -1,5 +1,5 @@
 .header {
-  width: 73.75rem;
+  width: 100%;
   height: 5.5rem;
   background-color: #2e2d2d;
 }
diff --git a/src/components/views/Header/Header.jsx b/src/components/views/Header/Header.jsx
index b31489f..7d56e28 100644
--- a/src/components/views/Header/Header.jsx
+++ b/src/components/views/Header/Header.jsx
@@ -1,11 +1,17 @@
 import React from "react";
+import { Col, Row } from "react-bootstrap";
 import LOGO from "../../../assets/icons/Header/LOGO.svg"; //로고
 import "./Header.css";
 
 const Header = () => {
   return (
     <div className="header">
-      <img src={LOGO} className="LOGO" alt="LOGO" />
+      <Row>
+        <Col>
+          <img src={LOGO} className="LOGO" alt="LOGO" />
+        </Col>
+        <Col></Col>
+      </Row>
     </div>
   );
 };
diff --git a/src/components/views/NavBar/NavBar.css b/src/components/views/NavBar/NavBar.css
index edbb2a3..cf593fc 100644
--- a/src/components/views/NavBar/NavBar.css
+++ b/src/components/views/NavBar/NavBar.css
@@ -16,9 +16,6 @@
   flex-direction: column;
 }
 
-.navbarStore {
-}
-
 .icon-group {
   display: flex;
   flex-direction: column;
diff --git a/src/components/views/NavBar/NavBar.jsx b/src/components/views/NavBar/NavBar.jsx
index ae323a2..53c3bd7 100644
--- a/src/components/views/NavBar/NavBar.jsx
+++ b/src/components/views/NavBar/NavBar.jsx
@@ -12,6 +12,11 @@ const NavBar = () => {
   const currentPath = window.location.pathname; // 현재 경로 가져오기
 
   const [Store, setStore] = useState(1); // 영업여부
+  const onClickHandler = (e) => {
+    setStore((prevStore) => {
+      setStore(!prevStore);
+    });
+  };
 
   return (
     <div className="navbar">
@@ -73,12 +78,12 @@ const NavBar = () => {
         </Nav.Link>
       </div>
 
-      <Nav.Link className="navbarStore">
+      <Nav.Link>
         {Store ? (
           <div className="icon-group">
             <img
               className="icon"
-              onClick={setStore(0)}
+              onClick={onClickHandler}
               src={StoreOn}
               alt="Open"
             />
@@ -88,7 +93,7 @@ const NavBar = () => {
           <div className="icon-off">
             <img
               className="icon"
-              onClick={setStore(1)}
+              onClick={onClickHandler}
               src={StoreOn}
               alt="Close"
             />
diff --git a/src/pages/Home/Complete.jsx b/src/pages/Home/Complete.jsx
new file mode 100644
index 0000000..b8dd236
--- /dev/null
+++ b/src/pages/Home/Complete.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Complete = () => {
+  return <div>Complete</div>;
+};
+
+export default Complete;
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
index 20c3372..ca09e2f 100644
--- a/src/pages/Home/Home.jsx
+++ b/src/pages/Home/Home.jsx
@@ -2,17 +2,27 @@ import React from "react";
 import { Col, Row } from "react-bootstrap";
 import NavBar from "../../components/views/NavBar/NavBar";
 import MainHome from "./MainHome";
+import Receipt from "./Receipt";
 
 const Home = () => {
   return (
     <div>
       <Row>
-        <Col xs={1}>
+        <Col
+          xs={1}
+          style={{ width: "8.875rem", height: "46.25rem", padding: "0" }}
+        >
           <NavBar />
         </Col>
-        <Col>
+        <Col style={{ padding: "0" }}>
           <MainHome />
         </Col>
+        <Col
+          xs={1}
+          style={{ width: "23.75rem", height: "44.875rem", padding: "0" }}
+        >
+          <Receipt />
+        </Col>
       </Row>
     </div>
   );
diff --git a/src/pages/Home/MainHome.css b/src/pages/Home/MainHome.css
new file mode 100644
index 0000000..b826fb8
--- /dev/null
+++ b/src/pages/Home/MainHome.css
@@ -0,0 +1,10 @@
+.Box {
+  width: 100%; /* 너비 설정 */
+  height: 95%; /* 높이 설정 */
+  padding-top: 5%;
+}
+
+.status-header {
+  padding-left: 1%;
+  border-bottom: 8px solid #d82356;
+}
diff --git a/src/pages/Home/MainHome.jsx b/src/pages/Home/MainHome.jsx
index 87b8f1a..d0627d9 100644
--- a/src/pages/Home/MainHome.jsx
+++ b/src/pages/Home/MainHome.jsx
@@ -1,5 +1,9 @@
 import React, { useState } from "react";
 import { Button, Col, Container, Row } from "react-bootstrap";
+import Complete from "./Complete";
+import "./MainHome.css";
+import Progress from "./Progress";
+import Wait from "./Wait";
 
 const MainHome = () => {
   const [status, setStatus] = useState({
@@ -9,12 +13,9 @@ const MainHome = () => {
   });
 
   const onClickHandler = (e) => {
-    console.log(status);
     const { name } = e.target;
-
     // 현재 선택된 상태
     const currentStatus = status[name];
-
     if (!currentStatus) {
       setStatus((prevStatus) => {
         const updatedStatus = { ...prevStatus };
@@ -26,34 +27,78 @@ const MainHome = () => {
             updatedStatus[key] = false;
           }
         }
-
         return updatedStatus;
       });
     }
   };
 
   return (
-    <Container>
-      <Row>
+    <Container className="Box">
+      <Row className="status-header">
         <Col>
-          <Button name="Wait" onClick={onClickHandler}>
-            대기중
+          <Button
+            name="Wait"
+            onClick={onClickHandler}
+            style={{
+              width: "100%",
+              borderRadius: "0.875rem",
+              backgroundColor: status.Wait ? "#d82356" : "#FFFFFF",
+              fontFamily: status.Wait ? "ExtraBold" : "SemiBold",
+              fontSize: "1.5625rem",
+              color: status.Wait ? "#FFFFFF" : "#838383",
+              border: "none",
+            }}
+          >
+            대기 4
           </Button>
         </Col>
         <Col>
-          <Button name="Progress" onClick={onClickHandler}>
-            진행중
+          <Button
+            name="Progress"
+            onClick={onClickHandler}
+            style={{
+              width: "100%",
+              borderRadius: "0.875rem",
+              backgroundColor: status.Progress ? "#d82356" : "#FFFFFF",
+              fontFamily: status.Wait ? "ExtraBold" : "SemiBold",
+              fontSize: "1.5625rem",
+              color: status.Progress ? "#FFFFFF" : "#838383",
+              border: "none",
+            }}
+          >
+            제조중 2
           </Button>
         </Col>
         <Col>
-          <Button name="Complete" onClick={onClickHandler}>
-            완료
+          <Button
+            name="Complete"
+            onClick={onClickHandler}
+            style={{
+              width: "100%",
+              borderRadius: "0.875rem",
+              backgroundColor: status.Complete ? "#d82356" : "#FFFFFF",
+              fontFamily: status.Wait ? "ExtraBold" : "SemiBold",
+              fontSize: "1.5625rem",
+              color: status.Complete ? "#FFFFFF" : "#838383",
+              border: "none",
+            }}
+          >
+            제조•픽업완료 3
           </Button>
         </Col>
       </Row>
       <Row>
-        <Col>1 of 1</Col>
-        <Col>2 of 2</Col>
+        <Col>
+          {status.Wait ? (
+            <Wait />
+          ) : status.Progress ? (
+            <Progress />
+          ) : status.Complete ? (
+            <Complete />
+          ) : (
+            <div>ERROR</div>
+          )}
+        </Col>
       </Row>
     </Container>
   );
diff --git a/src/pages/Home/Progress.jsx b/src/pages/Home/Progress.jsx
new file mode 100644
index 0000000..82994ac
--- /dev/null
+++ b/src/pages/Home/Progress.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Progress = () => {
+  return <div>Progress</div>;
+};
+
+export default Progress;
diff --git a/src/pages/Home/Receipt.css b/src/pages/Home/Receipt.css
new file mode 100644
index 0000000..bd184c8
--- /dev/null
+++ b/src/pages/Home/Receipt.css
@@ -0,0 +1,28 @@
+.rounded-rectangle {
+  width: 100%; /* 너비 설정 */
+  height: 97%; /* 높이 설정 */
+  background-color: #f5f5f5; /* 배경색 설정 */
+  border-radius: 20px; /* 모서리를 둥글게 만드는 값 */
+  text-align: center; /* 가운데 정렬 */
+  color: #000; /* 텍스트 색상 설정 */
+  font-size: 18px; /* 폰트 크기 설정 */
+  line-height: 100px; /* 수직 가운데 정렬을 위한 높이 설정 */
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
+}
+
+.Box {
+  width: 100%; /* 너비 설정 */
+  height: 100%; /* 높이 설정 */
+  padding-top: 5%;
+  padding-left: 0;
+}
+
+.top-font {
+  color: #000;
+  font-family: Pretendard;
+  font-size: 1.25rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 130%; /* 1.625rem */
+  letter-spacing: -0.0125rem;
+}
diff --git a/src/pages/Home/Receipt.jsx b/src/pages/Home/Receipt.jsx
new file mode 100644
index 0000000..1880c47
--- /dev/null
+++ b/src/pages/Home/Receipt.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { Container } from "react-bootstrap";
+import "./Receipt.css";
+
+const Receipt = () => {
+  return (
+    <Container className="Box">
+      <div className="rounded-rectangle">
+        <div className="top-font">주문번호 531</div>
+      </div>
+    </Container>
+  );
+};
+
+export default Receipt;
diff --git a/src/pages/Home/Wait.jsx b/src/pages/Home/Wait.jsx
new file mode 100644
index 0000000..1e3ca54
--- /dev/null
+++ b/src/pages/Home/Wait.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Wait = () => {
+  return <div>Wait</div>;
+};
+
+export default Wait;
diff --git a/src/style/theme/theme.jsx b/src/style/theme/theme.jsx
index 6c08536..e6e8b73 100644
--- a/src/style/theme/theme.jsx
+++ b/src/style/theme/theme.jsx
@@ -1,7 +1,7 @@
 const theme = {
   colors: {
     MainColor: "#D82356",
-    HoverColor: "#3CB371",
+    SubColor: "#3CB371",
     accent: "#e0234e",
   },
   fontSize: {