diff --git a/src/App.tsx b/src/App.tsx
index abd038b..0102d9d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,20 +1,13 @@
 import "@styles/font.css";
 import GlobalStyles from "./styles/GlobalStyle";
-import Modal from "./components/ui/modal/Modal";
-import Toast from "./components/ui/toast/Toast";
 import { RouterProvider } from "react-router-dom";
 import { router } from "./routes/router";
-import { useModalStore } from "./store/useModalStore";
 
 function App() {
-  const { showModal } = useModalStore();
-
   return (
     <>
       <GlobalStyles />
       <RouterProvider router={router} />
-      <Toast />
-      {showModal && <Modal />}
     </>
   );
 }
diff --git a/src/components/layout/layout/Layout.tsx b/src/components/layout/layout/Layout.tsx
index 0604215..1f3219c 100644
--- a/src/components/layout/layout/Layout.tsx
+++ b/src/components/layout/layout/Layout.tsx
@@ -1,12 +1,16 @@
 import Header from "@components/layout/header/Header";
 import GameRoomHeader from "@components/layout/gameRoomHeader/GameRoomHeader";
 import Footer from "@components/layout/footer/Footer";
+import Modal from "@components/ui/modal/Modal";
+import Toast from "@components/ui/toast/Toast";
 import { Outlet, useLocation } from "react-router-dom";
 import { Wrapper, Container } from "./LayoutStyle";
+import { useModalStore } from "@store/useModalStore";
 
 const HIDDEN_HEADERS = "/game/room/";
 
 export default function Layout() {
+  const { showModal } = useModalStore();
   const location = useLocation();
   const pathname = location.pathname;
   const isHiddenHeader = pathname.includes(HIDDEN_HEADERS);
@@ -20,6 +24,9 @@ export default function Layout() {
         </Container>
         <Footer />
       </Wrapper>
+
+      <Toast />
+      {showModal && <Modal />}
     </>
   );
 }
diff --git a/src/components/ui/modal/Modal.tsx b/src/components/ui/modal/Modal.tsx
index 01b2560..2578d09 100644
--- a/src/components/ui/modal/Modal.tsx
+++ b/src/components/ui/modal/Modal.tsx
@@ -1,10 +1,12 @@
-import { useModalStore } from "../../../store/useModalStore";
 import ModalPortal from "./ModalPortal";
-import SelectDeckModal from "./SelectDeckModal";
+import FirstSelect from "../modalContents/FirstSelect";
+import MakeRoom from "../modalContents/MakeRoom";
+import { useModalStore } from "../../../store/useModalStore";
 import { Inside, ModalFrame, Overlay } from "./modalStyle";
 
 const modalComponents: Record<string, React.ReactNode> = {
-  selectDeck: <SelectDeckModal />,
+  firstSelect: <FirstSelect />,
+  makeRoom: <MakeRoom />,
 };
 
 export default function Modal() {
diff --git a/src/components/ui/modal/modalStyle.ts b/src/components/ui/modal/modalStyle.ts
index 6f863e7..9f0c41e 100644
--- a/src/components/ui/modal/modalStyle.ts
+++ b/src/components/ui/modal/modalStyle.ts
@@ -1,12 +1,13 @@
 import styled, { css } from "styled-components";
 
 const baseStyle = css`
-  width: 460px;
+  width: 480px;
   min-height: 400px;
   height: fit-content;
   border-radius: 50px;
   overflow: hidden;
   font-size: 20px;
+  padding: 45px;
 `;
 
 const modalStyles = {
diff --git a/src/components/ui/modalContents/FirstSelect.tsx b/src/components/ui/modalContents/FirstSelect.tsx
new file mode 100644
index 0000000..2d2a0f7
--- /dev/null
+++ b/src/components/ui/modalContents/FirstSelect.tsx
@@ -0,0 +1,16 @@
+import DeckChoice from "../DeckChoice/DeckChoice";
+import * as S from "./firstSelectStyle";
+export default function FirstSelect() {
+  return (
+    <S.container>
+      <S.title>처음 가져올 타이틀 조합을 선택해주세요.</S.title>
+      <S.deckContainer>
+        <DeckChoice whiteCount={4} blackCount={0} />
+        <DeckChoice whiteCount={3} blackCount={1} />
+        <DeckChoice whiteCount={2} blackCount={2} />
+        <DeckChoice whiteCount={1} blackCount={3} />
+        <DeckChoice whiteCount={0} blackCount={4} />
+      </S.deckContainer>
+    </S.container>
+  );
+}
diff --git a/src/components/ui/modalContents/MakeRoom.tsx b/src/components/ui/modalContents/MakeRoom.tsx
new file mode 100644
index 0000000..16fa0fe
--- /dev/null
+++ b/src/components/ui/modalContents/MakeRoom.tsx
@@ -0,0 +1,61 @@
+import Input from "../input/Input";
+import Button from "../button/Button";
+import * as S from "./makeRoomStyle";
+import { FormProvider, useForm } from "react-hook-form";
+import { useModal } from "@hooks/useModal";
+import { IRoomNameSchema } from "./schema";
+import { useCreateRoomMutation } from "@hooks/useMutation";
+
+export default function MakeRoom() {
+  const methods = useForm();
+  const mutation = useCreateRoomMutation();
+  const { closeModal } = useModal();
+
+  const onClickClose = () => {
+    closeModal();
+  };
+
+  const onClickMakeRoom = async (data: IRoomNameSchema) => {
+    const result = mutation.mutate(data);
+    console.log(result);
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <S.container>
+        <S.title>방 만들기</S.title>
+        <S.inputContainer>
+          <S.label>방 이름</S.label>
+          <Input type="text" keyname="roomName" />
+        </S.inputContainer>
+        <S.warningContainer>
+          욕설이나 이용자에게 불쾌감을 줄 수 있는 단어가 포함되지 않도록 주의해
+          주세요.
+        </S.warningContainer>
+        <S.buttonContainer>
+          <Button
+            type="button"
+            size="l"
+            textcolor="white"
+            bgcolor="black"
+            onClick={onClickClose}
+            width="50%"
+          >
+            닫기
+          </Button>
+
+          <Button
+            type="button"
+            size="l"
+            textcolor="black"
+            bgcolor="green"
+            onClick={onClickMakeRoom}
+            width="50%"
+          >
+            방 만들기
+          </Button>
+        </S.buttonContainer>
+      </S.container>
+    </FormProvider>
+  );
+}
diff --git a/src/components/ui/modalcontents/firstSelectStyle.ts b/src/components/ui/modalContents/firstSelectStyle.ts
similarity index 80%
rename from src/components/ui/modalcontents/firstSelectStyle.ts
rename to src/components/ui/modalContents/firstSelectStyle.ts
index 66ccb6b..577fb9b 100644
--- a/src/components/ui/modalcontents/firstSelectStyle.ts
+++ b/src/components/ui/modalContents/firstSelectStyle.ts
@@ -22,9 +22,3 @@ export const deckContainer = styled.div`
   gap: 20px;
   justify-content: center;
 `;
-
-export const testBox = styled.div`
-  width: 460px;
-  border-radius: 50px;
-  background-color: var(--color-gray-0);
-`;
diff --git a/src/components/ui/modalcontents/makeRoomStyle.ts b/src/components/ui/modalContents/makeRoomStyle.ts
similarity index 83%
rename from src/components/ui/modalcontents/makeRoomStyle.ts
rename to src/components/ui/modalContents/makeRoomStyle.ts
index 66d2d15..67c9d98 100644
--- a/src/components/ui/modalcontents/makeRoomStyle.ts
+++ b/src/components/ui/modalContents/makeRoomStyle.ts
@@ -34,11 +34,10 @@ export const warningContainer = styled.div`
   font-weight: 300;
   font-size: 13px;
   color: var(--color-gray-600);
+  line-height: 1.5rem;
 `;
 
-export const testBox = styled.div`
-  width: 460px;
-  height: 460px;
-  border-radius: 50px;
-  background-color: var(--color-gray-0);
+export const buttonContainer = styled.div`
+  display: flex;
+  gap: 30px;
 `;
diff --git a/src/pages/testInput/schema.ts b/src/components/ui/modalContents/schema.ts
similarity index 100%
rename from src/pages/testInput/schema.ts
rename to src/components/ui/modalContents/schema.ts
diff --git a/src/components/ui/modalcontents/FirstSelect.tsx b/src/components/ui/modalcontents/FirstSelect.tsx
deleted file mode 100644
index 4412a0e..0000000
--- a/src/components/ui/modalcontents/FirstSelect.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import DeckChoice from "../DeckChoice/DeckChoice";
-import * as S from "./firstSelectStyle";
-export default function FirstSelect() {
-  return (
-    <S.testBox>
-      <S.container>
-        <S.title>처음 가져올 타이틀 조합을 선택해주세요.</S.title>
-        <S.deckContainer>
-          <DeckChoice whiteCount={4} blackCount={0} />
-          <DeckChoice whiteCount={3} blackCount={1} />
-          <DeckChoice whiteCount={2} blackCount={2} />
-          <DeckChoice whiteCount={1} blackCount={3} />
-          <DeckChoice whiteCount={0} blackCount={4} />
-        </S.deckContainer>
-      </S.container>
-    </S.testBox>
-  );
-}
diff --git a/src/components/ui/modalcontents/MakeRoom.tsx b/src/components/ui/modalcontents/MakeRoom.tsx
deleted file mode 100644
index 0f4a2c3..0000000
--- a/src/components/ui/modalcontents/MakeRoom.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { FormProvider, useForm } from "react-hook-form";
-import Input from "../input/Input";
-import * as S from "./makeRoomStyle";
-
-export default function MakeRoom() {
-  const methods = useForm();
-
-  return (
-    <FormProvider {...methods}>
-      <S.testBox>
-        <S.container>
-          <S.title>방 만들기</S.title>
-          <S.inputContainer>
-            <S.label>방이름</S.label>
-            <Input type="text" keyname="roomName" />
-          </S.inputContainer>
-          <S.warningContainer>
-            욕설이나 이용자에게 불쾌감을 줄 수 있는 단어가 포함되지 않도록
-            주의해 주세요.
-          </S.warningContainer>
-        </S.container>
-      </S.testBox>
-    </FormProvider>
-  );
-}
diff --git a/src/pages/game/gameRoomList.tsx b/src/pages/game/gameRoomList.tsx
index 8b20b30..fa346df 100644
--- a/src/pages/game/gameRoomList.tsx
+++ b/src/pages/game/gameRoomList.tsx
@@ -2,7 +2,7 @@ import Button from "../../components/ui/button/Button";
 import * as S from "./gameRoomListStyle";
 import GameRoomCard from "../../components/ui/card/cardList/GameRoomCard";
 import { useGetGameRoomList } from "../../hooks/useQuery";
-import { useNavigate } from "react-router-dom";
+import { useModal } from "../../hooks/useModal";
 
 interface IGameRoom {
   id: number;
@@ -13,13 +13,14 @@ interface IGameRoom {
 }
 
 export default function GameRoomList() {
+  const { openModal } = useModal();
   const { data: gameRooms } = useGetGameRoomList();
   console.log("gameRooms✅", gameRooms);
-  const navigate = useNavigate();
 
-  const onClickButton = () => {
-    navigate("/test");
+  const onClickModalOpen = () => {
+    openModal("makeRoom", "white");
   };
+
   return (
     <S.container>
       <S.buttonContainer>
@@ -29,9 +30,9 @@ export default function GameRoomList() {
           bgcolor="green"
           textcolor="black"
           width="180px"
-          onClick={onClickButton}
+          onClick={onClickModalOpen}
         >
-          + 방만들기
+          + 방 만들기
         </Button>
       </S.buttonContainer>
       <S.gameroomListContainer>
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
index 09dc105..02c907f 100644
--- a/src/pages/home/Home.tsx
+++ b/src/pages/home/Home.tsx
@@ -1,57 +1,3 @@
-import useToast from "@hooks/useToast";
-import { useModal } from "../../hooks/useModal";
-
 export default function Home() {
-  const openToast = useToast();
-  const { openModal } = useModal();
-
-  const onClickModal = () => {
-    openModal("selectDeck", "white");
-  };
-
-  const onClickToast = () => {
-    openToast("나부터 시작합니다!");
-  };
-
-  const onClickToast2 = () => {
-    openToast("나부터 시작합니다!");
-  };
-
-  const onClickToast3 = () => {
-    openToast("나부터 시작합니다!");
-  };
-
-  const onClickToast4 = () => {
-    openToast("나부터 시작합니다!");
-  };
-
-  return (
-    <>
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <br />
-      <button onClick={onClickToast}>토스트</button>
-      <br />
-      <button onClick={onClickToast2}>토스트2</button>
-      <br />
-      <button onClick={onClickToast3}>토스트3</button>
-      <br />
-      <button onClick={onClickToast4}>토스트4</button>
-      <br />
-      <button onClick={onClickModal}>모달</button>
-    </>
-  );
+  return <>Home</>;
 }
diff --git a/src/pages/testInput/TestInput.tsx b/src/pages/testInput/TestInput.tsx
deleted file mode 100644
index 33e518c..0000000
--- a/src/pages/testInput/TestInput.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { FormProvider, useForm } from "react-hook-form";
-import Input from "../../components/ui/input/Input";
-import { IRoomNameSchema } from "./schema";
-import { useCreateRoomMutation } from "../../hooks/useMutation";
-
-export function TestInput() {
-  const methods = useForm<IRoomNameSchema>();
-  const mutation = useCreateRoomMutation();
-  const onClickSubmit = async (data: IRoomNameSchema) => {
-    console.log("방만들기실행");
-    const result = mutation.mutate(data);
-    console.log("방만들기 결과 확인", result);
-  };
-
-  return (
-    <FormProvider {...methods}>
-      <form onSubmit={methods.handleSubmit(onClickSubmit)}>
-        <Input<IRoomNameSchema> type="text" keyname="roomName" />
-        <button>방만들기</button>
-      </form>
-    </FormProvider>
-  );
-}