diff --git a/package-lock.json b/package-lock.json
index 7953984..1277f4c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,14 +8,26 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@emotion/react": "^11.10.6",
+        "@emotion/styled": "^11.10.6",
+        "@mui/icons-material": "^5.13.7",
+        "@mui/material": "^5.11.16",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.3.4",
+        "ci": "^2.2.0",
+        "crypto-js": "^4.1.1",
+        "date-fns": "^2.30.0",
         "http-proxy-middleware": "^2.0.6",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-i18next": "^12.2.0",
+        "react-icons": "^4.10.1",
+        "react-responsive": "^9.0.2",
+        "react-router-dom": "^6.11.1",
         "react-scripts": "5.0.1",
+        "styled-components": "^6.0.0-rc.1",
         "web-vitals": "^2.1.4"
       }
     },
@@ -36,6 +48,78 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/cli": {
+      "version": "7.21.5",
+      "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.21.5.tgz",
+      "integrity": "sha512-TOKytQ9uQW9c4np8F+P7ZfPINy5Kv+pizDIUwSVH8X5zHgYHV4AA8HE5LA450xXeu4jEfmUckTYvv1I4S26M/g==",
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.17",
+        "commander": "^4.0.1",
+        "convert-source-map": "^1.1.0",
+        "fs-readdir-recursive": "^1.1.0",
+        "glob": "^7.2.0",
+        "make-dir": "^2.1.0",
+        "slash": "^2.0.0"
+      },
+      "bin": {
+        "babel": "bin/babel.js",
+        "babel-external-helpers": "bin/babel-external-helpers.js"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "optionalDependencies": {
+        "@nicolo-ribaudo/chokidar-2": "2.1.8-no-fsevents.3",
+        "chokidar": "^3.4.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/cli/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/@babel/cli/node_modules/make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dependencies": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@babel/cli/node_modules/pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@babel/cli/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/@babel/cli/node_modules/slash": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
+      "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.18.6",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz",
@@ -533,6 +617,20 @@
         "@babel/core": "^7.13.0"
       }
     },
+    "node_modules/@babel/plugin-external-helpers": {
+      "version": "7.18.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-external-helpers/-/plugin-external-helpers-7.18.6.tgz",
+      "integrity": "sha512-wNqc87qjLvsD1PIMQBzLn1bMuTlGzqLzM/1VGQ22Wm51cbCWS9k71ydp5iZS4hjwQNuTWSn/xbZkkusNENwtZg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-proposal-async-generator-functions": {
       "version": "7.20.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz",
@@ -1801,9 +1899,9 @@
       "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
     },
     "node_modules/@babel/runtime": {
-      "version": "7.21.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
-      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
+      "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -2132,6 +2230,158 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.10.6",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz",
+      "integrity": "sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.0",
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/serialize": "^1.1.1",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.1.3"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.10.7",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.7.tgz",
+      "integrity": "sha512-VLl1/2D6LOjH57Y8Vem1RoZ9haWF4jesHDGiHtKozDQuBIkJm2gimVo0I02sWCuzZtVACeixTVB4jeE8qvCBoQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/sheet": "^1.2.1",
+        "@emotion/utils": "^1.2.0",
+        "@emotion/weak-memoize": "^0.3.0",
+        "stylis": "4.1.3"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz",
+      "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ=="
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz",
+      "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.0"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
+      "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.10.6",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.6.tgz",
+      "integrity": "sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.10.6",
+        "@emotion/cache": "^11.10.5",
+        "@emotion/serialize": "^1.1.1",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@emotion/utils": "^1.2.0",
+        "@emotion/weak-memoize": "^0.3.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz",
+      "integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.0",
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/unitless": "^0.8.0",
+        "@emotion/utils": "^1.2.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz",
+      "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA=="
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.10.6",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.6.tgz",
+      "integrity": "sha512-OXtBzOmDSJo5Q0AFemHCfl+bUueT8BIcPSxu0EGTpGk6DmI5dnhSzQANm1e1ze0YZL7TDyAyy6s/b/zmGOS3Og==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.10.6",
+        "@emotion/is-prop-valid": "^1.2.0",
+        "@emotion/serialize": "^1.1.1",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@emotion/utils": "^1.2.0"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
+      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz",
+      "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz",
+      "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
+      "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.3.0.tgz",
@@ -3006,6 +3256,268 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-alpha.124",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.124.tgz",
+      "integrity": "sha512-I6M+FrjRCybQCr8I8JTu6L2MkUobSQFgNIpOJyDNKL5zq/73LvZIQXvsKumAzthVGvI1PYaarM9vGDrDYbumKA==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@emotion/is-prop-valid": "^1.2.0",
+        "@mui/types": "^7.2.3",
+        "@mui/utils": "^5.11.13",
+        "@popperjs/core": "^2.11.7",
+        "clsx": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/base/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "5.11.16",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.16.tgz",
+      "integrity": "sha512-GxRfZ/HquQ/1nUc9qQVGReP6oOMS8/3QjPJ+23a7TMrxl2wjlmXrMNn7tRa30vZcGcDgEG+J0aseefUN0AoawQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      }
+    },
+    "node_modules/@mui/icons-material": {
+      "version": "5.13.7",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.13.7.tgz",
+      "integrity": "sha512-zoVtkb9jYVUGfI7CobOdDBEAlpg3XESiO6cWqSDGwEma69+CBDIAwGpnO5truvQDJHBGSAfzFj3nObwxjkyA7Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.11.16",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.16.tgz",
+      "integrity": "sha512-++glQqbZ3rMzOWB77yOvqRG+k8+scYTUKVWZpWff+GWsf6L10g9L2wgRhhAS8bDLuxCbXZlPNbSZowXDDw6z6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@mui/base": "5.0.0-alpha.124",
+        "@mui/core-downloads-tracker": "^5.11.16",
+        "@mui/system": "^5.11.16",
+        "@mui/types": "^7.2.3",
+        "@mui/utils": "^5.11.13",
+        "@types/react-transition-group": "^4.4.5",
+        "clsx": "^1.2.1",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "5.11.13",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.13.tgz",
+      "integrity": "sha512-PJnYNKzW5LIx3R+Zsp6WZVPs6w5sEKJ7mgLNnUXuYB1zo5aX71FVLtV7geyPXRcaN2tsoRNK7h444ED0t7cIjA==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@mui/utils": "^5.11.13",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "5.11.16",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.11.16.tgz",
+      "integrity": "sha512-8dJRR/LqtGGaZN21p1vU9euwrKERlgtQIWyuzBKZ8/cuSlW5rIzlp46liP+Uh0+7d9NcHU0H4hBMoPt3ax64PA==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@emotion/cache": "^11.10.5",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "5.11.16",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.16.tgz",
+      "integrity": "sha512-JY7CNm7ik2Gr4kQpz1+C9N/f4ET3QjVBo/iaHcmlSOgjdxnOzFbv+vCdb1DMzBGew+UbqckppZpZwbgbrBE2Rw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@mui/private-theming": "^5.11.13",
+        "@mui/styled-engine": "^5.11.16",
+        "@mui/types": "^7.2.3",
+        "@mui/utils": "^5.11.13",
+        "clsx": "^1.2.1",
+        "csstype": "^3.1.2",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.3.tgz",
+      "integrity": "sha512-tZ+CQggbe9Ol7e/Fs5RcKwg/woU+o8DCtOnccX6KmbBc7YrfqMYEYuaIcXHuhpT880QwNkZZ3wQwvtlDFA2yOw==",
+      "peerDependencies": {
+        "@types/react": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.11.13",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.13.tgz",
+      "integrity": "sha512-5ltA58MM9euOuUcnvwFJqpLdEugc9XFsRR8Gt4zZNb31XzMfSKJPR4eumulyhsOTK1rWf7K4D63NKFPfX0AxqA==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@types/prop-types": "^15.7.5",
+        "@types/react-is": "^16.7.1 || ^17.0.0",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@mui/utils/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
+    "node_modules/@nicolo-ribaudo/chokidar-2": {
+      "version": "2.1.8-no-fsevents.3",
+      "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz",
+      "integrity": "sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==",
+      "optional": true
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -3115,6 +3627,23 @@
         }
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.1.tgz",
+      "integrity": "sha512-YUkWj+xs0oOzBe74OgErsuR3wVn+efrFhXBWrit50kOiED+pvQe2r6MWY0iJMQU/mSVKxvNzL4ZaYvjdX+G7ZA==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -4200,6 +4729,22 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-is": {
+      "version": "17.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz",
+      "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -5651,6 +6196,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -5756,6 +6309,17 @@
         "node": ">=6.0"
       }
     },
+    "node_modules/ci": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/ci/-/ci-2.2.0.tgz",
+      "integrity": "sha512-lBkEN6XclyW0jnprtFQ+dsbP+9zwmo37Z1cV38h4FSDgI2QzFqwknJnVSvRxK9UXkPC4ZcVOVFyCVrNylTX52Q==",
+      "bin": {
+        "ci": "lib/ci.js"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/ci?sponsor=1"
+      }
+    },
     "node_modules/ci-info": {
       "version": "3.8.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.8.0.tgz",
@@ -5804,6 +6368,14 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -6057,6 +6629,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.1.1.tgz",
+      "integrity": "sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw=="
+    },
     "node_modules/crypto-random-string": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
@@ -6082,6 +6659,14 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/css-declaration-sorter": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
@@ -6135,6 +6720,11 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/css-mediaquery": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+      "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q=="
+    },
     "node_modules/css-minimizer-webpack-plugin": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz",
@@ -6263,6 +6853,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -6450,9 +7050,9 @@
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
     },
     "node_modules/csstype": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
-      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -6472,6 +7072,21 @@
         "node": ">=10"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -6732,6 +7347,15 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -8106,6 +8730,11 @@
         "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -8380,6 +9009,11 @@
       "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
       "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q=="
     },
+    "node_modules/fs-readdir-recursive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz",
+      "integrity": "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA=="
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -8734,6 +9368,19 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -8826,6 +9473,14 @@
         "node": ">=12"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/html-webpack-plugin": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz",
@@ -8960,6 +9615,34 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
+    "node_modules/i18next": {
+      "version": "22.4.14",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-22.4.14.tgz",
+      "integrity": "sha512-VtLPtbdwGn0+DAeE00YkiKKXadkwg+rBUV+0v8v0ikEjwdiJ0gmYChVE4GIa9HXymY6wKapkL93vGT7xpq6aTw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.20.6"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -11924,6 +12607,14 @@
         "tmpl": "1.0.5"
       }
     },
+    "node_modules/matchmediaquery": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
+      "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
+      "dependencies": {
+        "css-mediaquery": "^0.1.2"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -14367,6 +15058,35 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-i18next": {
+      "version": "12.2.0",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-12.2.0.tgz",
+      "integrity": "sha512-5XeVgSygaGfyFmDd2WcXvINRw2WEC1XviW1LXY/xLOEMzsCFRwKqfnHN+hUjla8ZipbVJR27GCMSuTr0BhBBBQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.6",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 19.0.0",
+        "react": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-icons": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz",
+      "integrity": "sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -14380,6 +15100,53 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-responsive": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-9.0.2.tgz",
+      "integrity": "sha512-+4CCab7z8G8glgJoRjAwocsgsv6VA2w7JPxFWHRc7kvz8mec1/K5LutNC2MG28Mn8mu6+bu04XZxHv5gyfT7xQ==",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.3.0",
+        "prop-types": "^15.6.1",
+        "shallow-equal": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=0.10"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "6.11.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.1.tgz",
+      "integrity": "sha512-OZINSdjJ2WgvAi7hgNLazrEV8SGn6xrKA+MkJe9wVDMZ3zQ6fdJocUjpCUCI0cNrelWjcvon0S/QK/j0NzL3KA==",
+      "dependencies": {
+        "@remix-run/router": "1.6.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.11.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.1.tgz",
+      "integrity": "sha512-dPC2MhoPeTQ1YUOt5uIK376SMNWbwUxYRWk2ZmTT4fZfwlOvabF8uduRKKJIyfkCZvMgiF0GSCQckmkGGijIrg==",
+      "dependencies": {
+        "@remix-run/router": "1.6.1",
+        "react-router": "6.11.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -14452,6 +15219,21 @@
         }
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -15158,6 +15940,16 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "node_modules/shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+    },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -15560,6 +16352,50 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/styled-components": {
+      "version": "6.0.0-rc.1",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.0.0-rc.1.tgz",
+      "integrity": "sha512-v+VqSeqCQboUqSxTxIW/wmBYB0BGDBV30tTMWcUaicapSy0VYNmZanOcFCxyfbViY/Bk2h+VKURMytx2jaTrwA==",
+      "dependencies": {
+        "@babel/cli": "^7.21.0",
+        "@babel/core": "^7.21.0",
+        "@babel/helper-module-imports": "^7.18.6",
+        "@babel/plugin-external-helpers": "^7.18.6",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+        "@babel/preset-env": "^7.20.2",
+        "@babel/preset-react": "^7.18.6",
+        "@babel/preset-typescript": "^7.21.0",
+        "@babel/traverse": "^7.21.2",
+        "@emotion/unitless": "^0.8.0",
+        "css-to-react-native": "^3.2.0",
+        "shallowequal": "^1.1.0",
+        "stylis": "^4.2.0",
+        "tslib": "^2.5.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "babel-plugin-styled-components": ">= 2",
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "babel-plugin-styled-components": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/styled-components/node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -15575,6 +16411,11 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
+      "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA=="
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -16299,6 +17140,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
diff --git a/package.json b/package.json
index 0c65e8b..0d1312c 100644
--- a/package.json
+++ b/package.json
@@ -3,21 +3,34 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.13.7",
+    "@mui/material": "^5.11.16",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.3.4",
+    "ci": "^2.2.0",
+    "crypto-js": "^4.1.1",
+    "date-fns": "^2.30.0",
     "http-proxy-middleware": "^2.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^12.2.0",
+    "react-icons": "^4.10.1",
+    "react-responsive": "^9.0.2",
+    "react-router-dom": "^6.11.1",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.0.0-rc.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "deploy": "aws s3 sync ./build s3://suitcarrier-front --profile=INSIGHT_FRONT_S3+CF"
   },
   "eslintConfig": {
     "extends": [
diff --git a/public/Image/ad.png b/public/Image/ad.png
new file mode 100644
index 0000000..d1d21e5
Binary files /dev/null and b/public/Image/ad.png differ
diff --git a/public/Image/alarm.png b/public/Image/alarm.png
new file mode 100644
index 0000000..e8160dd
Binary files /dev/null and b/public/Image/alarm.png differ
diff --git a/public/Image/bell.png b/public/Image/bell.png
new file mode 100644
index 0000000..724fedf
Binary files /dev/null and b/public/Image/bell.png differ
diff --git a/public/Image/c_logo.png b/public/Image/c_logo.png
new file mode 100644
index 0000000..f35d59b
Binary files /dev/null and b/public/Image/c_logo.png differ
diff --git a/public/Image/calculator.png b/public/Image/calculator.png
new file mode 100644
index 0000000..ccea102
Binary files /dev/null and b/public/Image/calculator.png differ
diff --git a/public/Image/card.png b/public/Image/card.png
new file mode 100644
index 0000000..39d2ce2
Binary files /dev/null and b/public/Image/card.png differ
diff --git a/public/Image/carrier.png b/public/Image/carrier.png
new file mode 100644
index 0000000..58d3663
Binary files /dev/null and b/public/Image/carrier.png differ
diff --git a/public/Image/circle.png b/public/Image/circle.png
new file mode 100644
index 0000000..d1360ce
Binary files /dev/null and b/public/Image/circle.png differ
diff --git a/public/Image/email.png b/public/Image/email.png
new file mode 100644
index 0000000..fb7e6ee
Binary files /dev/null and b/public/Image/email.png differ
diff --git a/public/Image/example.png b/public/Image/example.png
new file mode 100644
index 0000000..8220876
Binary files /dev/null and b/public/Image/example.png differ
diff --git a/public/Image/gift.png b/public/Image/gift.png
new file mode 100644
index 0000000..24cb58a
Binary files /dev/null and b/public/Image/gift.png differ
diff --git a/public/Image/logo.png b/public/Image/logo.png
new file mode 100644
index 0000000..465901e
Binary files /dev/null and b/public/Image/logo.png differ
diff --git a/public/Image/phone.png b/public/Image/phone.png
new file mode 100644
index 0000000..40f78d9
Binary files /dev/null and b/public/Image/phone.png differ
diff --git a/public/Image/place.png b/public/Image/place.png
new file mode 100644
index 0000000..a8649d7
Binary files /dev/null and b/public/Image/place.png differ
diff --git a/public/Image/suit-carrier.png b/public/Image/suit-carrier.png
new file mode 100644
index 0000000..957a0eb
Binary files /dev/null and b/public/Image/suit-carrier.png differ
diff --git a/public/Image/user.png b/public/Image/user.png
new file mode 100644
index 0000000..4e94da2
Binary files /dev/null and b/public/Image/user.png differ
diff --git a/src/App.js b/src/App.js
index cddc757..7bb592a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,21 +1,53 @@
-import './App.css';
-import React, {useEffect, useState} from 'react';
-import axios from 'axios';
+import "./App.css";
+import React, { useEffect, useState } from "react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import axios from "axios";
+import SelfAuth from "./Page/SignUp/SelfAuth";
+import InputInfo from "./Page/SignUp/InputInfo";
+import MemberAgree from "./Page/SignUp/MemberAgree";
+import MemberSuccess from "./Page/SignUp/MemberSuccess";
+
+import LoginPage from "./Page/LoginPage";
+import KakaoLogin from "./Page/KaKaoLogin";
+import Auth from "./Page/Auth";
+import Profile from "./Page/Profile";
+import FindPw from "./Page/FindPw";
+import MainPage from "./Page/MainPage";
+import Sign from "./Page/Sign";
+import PhoneAuth from "./Page/SignUp/PhoneAuth";
 
 function App() {
-  const [hello, setHello] = useState('')
+  const [hello, setHello] = useState("");
+
+  //    useEffect(() => {
+  //        axios.get('http://localhost:8080/api/hello')
+  //        .then(response => setHello(response.data))
+  //        .catch(error => console.log(error))
+  //    }, []);
 
-   useEffect(() => {
-       axios.get('http://localhost:8080/api/hello')
-       .then(response => setHello(response.data))
-       .catch(error => console.log(error))
-   }, []);
+  return (
+    <div className="App">
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<MainPage />}></Route>
+          <Route path="/oauth/kakao/callback" element={<Auth />}></Route>
+          <Route path="/profile" element={<Profile />}></Route>
+          <Route path="/findPw" element={<FindPw />}></Route>
+          <Route path="/login" element={<LoginPage />}></Route>
 
-   return (
-       <div>
-           백엔드에서 가져온 데이터입니다: {hello}
-       </div>
-   );
+          {/* <Route path="/oauth/kakao/callback" element={<Auth />}></Route>
+        <Route path="/profile" element={<Profile />}></Route>
+        <Route path="/findPw" element={<FindPw />}></Route> */}
+          <Route path="/selfAuth" element={<SelfAuth />}></Route>
+          <Route path="/inputInfo" element={<InputInfo />}></Route>
+          <Route path="/memberAgree" element={<MemberAgree />}></Route>
+          <Route path="/memberSuccess" element={<MemberSuccess />}></Route>
+          <Route path="/sign" element={<Sign />}></Route>
+          <Route path="/phone" element={<PhoneAuth />}></Route>
+        </Routes>
+      </BrowserRouter>
+    </div>
+  );
 }
 
 export default App;
diff --git a/src/Components/bottom.js b/src/Components/bottom.js
new file mode 100644
index 0000000..8b2d9fb
--- /dev/null
+++ b/src/Components/bottom.js
@@ -0,0 +1,162 @@
+import styled from "styled-components";
+const Bottom1 = styled.div`
+  background-color: #007b59;
+  height: 700px;
+`;
+const SubTitle = styled.h2`
+  font-size: ${(props) => props.fontSize};
+  font-weight: ${(props) => props.fontWeight};
+  text-align: left;
+  color: white;
+`;
+const Div3 = styled.div`
+  padding: 144px;
+  padding-left: 50px;
+  display: flex;
+  justify-content: space-between;
+`;
+const Dis = styled.div`
+  padding-right: 80px;
+  font-weight: bold;
+  font-size: 60px;
+  color: white;
+  width: 582px;
+  align-items: end;
+  display: flex;
+  flex-direction: row;
+`;
+const IMG = styled.img`
+  width: 362px;
+  height: 362px;
+`;
+const LookBtn = styled.button`
+  font-size: 24px;
+  width: 198px;
+  height: 68px;
+  border: 1px solid white;
+  border-radius: 50px;
+  background-color: #007b59;
+  color: white;
+`;
+const Bottom2 = styled.div`
+  display: flex;
+  background-color: #eae9e4;
+  height: 380px;
+  width: 1920px;
+  padding-left: 42px;
+`;
+const Div4 = styled.div`
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+  font-size: 24px;
+  font-weight: bold;
+  width: 80%;
+  white-space: nowrap;
+  overflow: visible;
+  text-overflow: ellipsis;
+`;
+const Div5 = styled.div`
+  margin-left: 10px;
+  margin-right: 86px;
+`;
+const Div6 = styled.div`
+  font-size: 28px;
+  align-items: end;
+  justify-content: end;
+  margin-right: 68px;
+  margin-bottom: 75px;
+  width: 40%;
+  display: flex;
+  text-align: right;
+  white-space: nowrap;
+  overflow: visible;
+  text-overflow: ellipsis;
+  & > img {
+    width: 204px;
+    height: 204px;
+  }
+`;
+const Bottom = () => {
+  return (
+    <div>
+      <Bottom1>
+        <div>
+          <Div3>
+            <div>
+              <SubTitle
+                fontSize="35px"
+                fontWeight="bold"
+                style={{ marginBottom: "22px" }}
+              >
+                SUIT CARRIER에 대해 더 알고 싶다면?
+              </SubTitle>
+              <SubTitle fontSize="28px" fontWeight="normal">
+                우리 집 창고 속 캐리어를, 우리 동네 캐리어로 !
+              </SubTitle>
+              <SubTitle fontSize="28px" fontWeight="normal">
+                공간 차지가 큰 캐리어를 SUIT CARRIER를 활용해보세요.
+              </SubTitle>
+              <SubTitle fontSize="28px" fontWeight="normal">
+                요즘 인기있는 캐리어 디자인, 사이즈를 확인해보세요
+              </SubTitle>
+              <div
+                style={{
+                  display: "flex",
+                  marginTop: "46px",
+                  width: "450px",
+                  justifyContent: "space-between",
+                }}
+              >
+                <LookBtn>케리어 둘러보기</LookBtn>
+                <LookBtn>CONTACT_US </LookBtn>
+              </div>
+            </div>
+            <div>
+              <Dis>
+                <IMG src="/Image/c_logo.png" alt="logo" />
+                SUIT-
+                <br />
+                CARRIER
+              </Dis>
+            </div>
+          </Div3>
+        </div>
+      </Bottom1>
+      <Bottom2>
+        <Div4>
+          <h2>Contact Us</h2>
+          gogoogle13@gmail.com
+          <div
+            style={{ display: "flex", marginTop: "20px", marginBottom: "35px" }}
+          >
+            Tel |
+            <Div5 style={{ lineHeight: "170%" }}>
+              010-1234-5678
+              <br />
+              02-1234-5678
+            </Div5>
+            <div style={{ display: "flex", flexDirection: "column" }}>
+              <div style={{ display: "flex", marginBottom: "14px" }}>
+                Fax |<Div5>010-1234-5678</Div5>
+              </div>
+              <div style={{ display: "flex" }}>
+                Lns |<Div5>@suit_carrier0703</Div5>
+              </div>
+            </div>
+            서울시 관악구 봉천동 100-3 (캐리어 빌딩)
+          </div>
+          E-mail | suitcarrier_@naver.com
+        </Div4>
+        <Div6>
+          <div style={{ marginRight: "27px" }}>
+            <h2>SUIT-CARRIER</h2>
+            우리 집 창고 속 캐리어를, 우리 동네 캐리어로 !
+          </div>
+          <img src="Image/logo.png" alt="로고" />
+        </Div6>
+      </Bottom2>
+    </div>
+  );
+};
+export default Bottom;
diff --git a/src/Components/cards.js b/src/Components/cards.js
new file mode 100644
index 0000000..6c5e20d
--- /dev/null
+++ b/src/Components/cards.js
@@ -0,0 +1,63 @@
+import {
+    Card,
+    CardActions,
+    CardMedia,
+    IconButton,
+    Typography,
+  } from "@mui/material";
+  import Favorite from "@mui/icons-material/Favorite";
+  
+  const Cards = () => {
+    return (
+      <Card width="307px">
+        <CardMedia
+          component="img"
+          height="215"
+          width="307px"
+          image="/Image/example.png"
+          alt="사진"
+        />
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <Typography
+            width="100%"
+            variant="body2"
+            color="text.secondary"
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+          >
+            <h2>성남시 분당구</h2>
+            <div style={{ display: "flex" }}>
+              <h3
+                style={{
+                  color: "#007B59",
+                  marginRight: "7px",
+                  fontSize: "16px",
+                }}
+              >
+                추천
+              </h3>
+              <h3 style={{ color: "#FF2E2E", fontSize: "16px" }}>HOT</h3>
+              <CardActions>
+                <IconButton style={{ padding: "0px" }}>
+                  <Favorite />
+                </IconButton>
+              </CardActions>
+            </div>
+          </Typography>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+            }}
+          >
+            <h3 style={{ fontSize: "20px" }}>3월 27일 ~ 4월 1일</h3>
+            <h5 style={{ fontSize: "16px" }}>35,000 원 / 박</h5>
+          </div>
+        </div>
+      </Card>
+    );
+  };
+  export default Cards;
+  
\ No newline at end of file
diff --git a/src/Components/head.js b/src/Components/head.js
new file mode 100644
index 0000000..0f049cb
--- /dev/null
+++ b/src/Components/head.js
@@ -0,0 +1,81 @@
+import styled from "styled-components";
+import { useNavigate } from "react-router-dom";
+const Heads = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: white;
+  width: 100vw;
+  height: 70px;
+`;
+const Center = styled.div`
+  width: 1280px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const Title = styled.div`
+  width: 750px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 18px;
+  font-weight: bold;
+`;
+const Logo = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 220px;
+  border: none;
+  background-color: white;
+`;
+const User = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 250px;
+  align-items: center;
+  & > button {
+    width: 138px;
+    height: 37px;
+    border-radius: 15px;
+    background-color: #007b59;
+    color: white;
+    border: none;
+  }
+  & > div > img {
+    margin-left: 10px;
+  }
+`;
+const Head = () => {
+  const navigate = useNavigate();
+  return (
+    <div className="Head">
+      <Heads>
+        <Center>
+          <Title>
+            <Logo onClick={() => navigate("/")}>
+              <img
+                src="Image/logo.png"
+                alt="logo"
+                style={{ width: "34px", height: "34px" }}
+              />
+              <img src="Image/suit-carrier.png" alt="suit-carrier" />
+            </Logo>
+            <div>인기매물 확인</div>
+            <div>매물 등록하기</div>
+            <div>CONTACT_US</div>
+          </Title>
+          <User>
+            <button onClick={() => navigate("/login")}>Sign Up</button>
+            <div>
+              <img src="Image/bell.png" />
+              <img src="Image/user.png" />
+            </div>
+          </User>
+        </Center>
+      </Heads>
+    </div>
+  );
+};
+export default Head;
diff --git a/src/Page/Auth.js b/src/Page/Auth.js
new file mode 100644
index 0000000..6c771ea
--- /dev/null
+++ b/src/Page/Auth.js
@@ -0,0 +1,41 @@
+import { useEffect } from "react";
+import axios from "axios";
+import qs from "qs";
+import { useNavigate } from "react-router-dom";
+const Auth = () => {
+  const REST_API_KEY = process.env.REST_API_KEY;
+  const REDIRECT_URI = "http://localhost:3000/oauth/kakao/callback";
+  const CLIENT_SECRET = process.env.CLIENT_SECRET;
+
+  const code = new URL(window.location.href).searchParams.get("code");
+  const navigate = useNavigate();
+  const getToken = async () => {
+    const payload = qs.stringify({
+      grant_type: "authorization_code",
+      client_id: REST_API_KEY,
+      redirect_uri: REDIRECT_URI,
+      code: code,
+      client_secret: CLIENT_SECRET,
+    });
+    try {
+      // access token 가져오기
+      const res = await axios.post(
+        "https://kauth.kakao.com/oauth/token",
+        payload
+      );
+
+      // Kakao Javascript SDK 초기화
+      window.Kakao.init(REST_API_KEY);
+      // access token 설정
+      window.Kakao.Auth.setAccessToken(res.data.access_token);
+      navigate("/profile");
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  useEffect(() => {
+    getToken();
+  }, []);
+  return null;
+};
+export default Auth;
diff --git a/src/Page/FindPw.js b/src/Page/FindPw.js
new file mode 100644
index 0000000..719a81a
--- /dev/null
+++ b/src/Page/FindPw.js
@@ -0,0 +1,133 @@
+import styled from "styled-components";
+const Div = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`;
+const Center = styled.div`
+  margin-top: 41px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+const Title1 = styled.div`
+  font-size: 32px;
+  font-weight: bold;
+`;
+const Title2 = styled.div`
+  font-size: 15px;
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  & > div {
+    display: flex;
+    align-items: center;
+
+    height: 68px;
+  }
+  & > button {
+    background-color: white;
+    border: none;
+  }
+`;
+const Box = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 14px;
+  width: 653px;
+  height: 530px;
+  border-radius: 30px;
+  border: 1px solid #b5b5b5;
+  font-size: 15px;
+`;
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  & > input {
+    display: flex;
+    width: 510px;
+    height: 45px;
+    border-radius: 15px;
+    border: 1px solid #c5c5c5;
+    font-size: 20px;
+    padding-left: 20px;
+  }
+`;
+const Name = styled.div`
+  color: #4f4747;
+  width: 100%;
+  display: flex;
+  margin-top: 49px;
+  margin-left: 15px;
+  font-size: 24px;
+  height: 68px;
+  font-weight: bold;
+  align-items: center;
+`;
+const Div1 = styled.div`
+  margin-top: 50px;
+  margin-bottom: 86px;
+  width: 510px;
+  display: flex;
+  justify-content: space-between;
+`;
+const Div2 = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  width: 242px;
+  height: 243px;
+
+  & > button {
+    height: 46px;
+    width: 242px;
+    border: none;
+    background-color: #007b59;
+    color: white;
+    border-radius: 30px;
+  }
+
+  & > img {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 195px;
+    height: 178px;
+  }
+`;
+
+const FindPw = () => {
+  return (
+    <Div>
+      <Center>
+        <Title1>비밀번호 찾기</Title1>
+        <Title2>
+          <div>비밀번호가 기억나지 않으세요? 원하시는 방법을 선택해주세요</div>
+          <button>|회원가입</button>
+        </Title2>
+        <Box>
+          <Content>
+            <Name>새 비밀번호 설정</Name>
+            <input placeholder="아이디를 입력해주세요"></input>
+            <Div1>
+              <Div2>
+                <img src="Image/phone.png" alt="phone" />
+                <button>휴대전화 인증</button>
+              </Div2>
+              <Div2>
+                <img src="Image/email.png" alt="phone" />
+                <button>이메일 인증</button>
+              </Div2>
+            </Div1>
+          </Content>
+        </Box>
+      </Center>
+    </Div>
+  );
+};
+export default FindPw;
diff --git a/src/Page/KaKaoLogin.js b/src/Page/KaKaoLogin.js
new file mode 100644
index 0000000..6d781e2
--- /dev/null
+++ b/src/Page/KaKaoLogin.js
@@ -0,0 +1,5 @@
+const KakaoLogin = () => {
+    return <div>dd</div>;
+  };
+  export default KakaoLogin;
+  
\ No newline at end of file
diff --git a/src/Page/LoginPage.js b/src/Page/LoginPage.js
new file mode 100644
index 0000000..2120bc8
--- /dev/null
+++ b/src/Page/LoginPage.js
@@ -0,0 +1,282 @@
+import styled from "styled-components";
+import Auth from "./Auth";
+import { useNavigate } from "react-router-dom";
+const Div = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+const StyledHead = styled.div`
+  width: 100%;
+  height: 80px;
+  border-width: 1px 0px;
+  border-style: solid;
+  border-color: #353535;
+  color: red;
+  display: flex;
+  justify-content: center;
+`;
+const Div1 = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 1267px;
+  height: 59px;
+  margin-top: 9px;
+`;
+const MainButton = styled.button`
+  font-size: 24px;
+  background-color: white;
+  border: none;
+  font-weight: bold;
+`;
+const SubButton1 = styled.button`
+  font-size: 18px;
+  background-color: white;
+  border: none;
+`;
+const SignUpBtn = styled.button`
+  width: 106px;
+  height: 59px;
+  background-color: black;
+  color: white;
+  border-radius: 5px;
+`;
+const Main = styled.div`
+  display: flex;
+  background-color: #eae9e4;
+  justify-content: center;
+  /* height: 100vh; */
+  /* align-items: center; */
+`;
+const Box = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 1054px;
+  width: 571px;
+  background-color: white;
+  margin-top: 99px;
+
+  padding: 25px;
+  & > .h3 {
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+  & > .Input {
+    font-size: 20px;
+    width: 509px;
+    height: 67px;
+    margin-bottom: 17px;
+    border: 1px solid #747474;
+  }
+  & > .div {
+    display: flex;
+    flex-direction: row;
+  }
+`;
+const LoginBtn = styled.button`
+  height: 67px;
+  width: 509px;
+  background-color: #007b59;
+  border: none;
+  color: white;
+  font-size: 22px;
+`;
+const Div2 = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 509px;
+
+  padding-top: 27px;
+  font-size: 15px;
+  & > div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+`;
+const FindBtn = styled.button`
+  background-color: white;
+  border: none;
+`;
+const ProductBtn = styled.button`
+  display: flex;
+  margin-top: 36px;
+  margin-bottom: 4px;
+  border-radius: 50%;
+  width: 59px;
+  height: 59px;
+`;
+const KakaBtn = styled.button`
+  width: 509px;
+  height: 67px;
+  background-color: #f6e24b;
+  margin-top: 6px;
+  font-size: 22px;
+  color: #4f4747;
+  border: none;
+`;
+const SignBtn = styled.button`
+  width: 509px;
+  height: 67px;
+  margin-top: 15px;
+  font-size: 20px;
+  color: #686868;
+  border: 1px solid #a8a8a8;
+  background-color: white;
+`;
+const AdverBtn = styled.button`
+  margin-top: 63px;
+  width: 506px;
+  height: 243px;
+`;
+const Bottom1 = styled.footer`
+  background-color: #007b59;
+  height: 514px;
+`;
+const SubTitle = styled.h2`
+  font-size: ${(props) => props.fontSize};
+  font-weight: ${(props) => props.fontWeight};
+  color: white;
+`;
+const Div3 = styled.div`
+  margin-top: 102px;
+  margin-left: 50px;
+  display: flex;
+  justify-content: space-between;
+`;
+const IMG = styled.div`
+  width: 362px;
+  height: 362px;
+  border: 1px solid black;
+  margin-right: 141px;
+`;
+const LookBtn = styled.button`
+  font-size: 20px;
+  width: 187px;
+  height: 64px;
+  border: 1px solid white;
+  border-radius: 50px;
+  background-color: #007b59;
+  color: white;
+`;
+const Bottom2 = styled.footer`
+  background-color: #eae9e4;
+  height: 186px;
+  padding-left: 42px;
+`;
+const Div4 = styled.div`
+  width: ${(props) => props.width};
+  display: flex;
+  justify-content: space-between;
+`;
+const H3 = styled.h3`
+  font-size: 24px;
+  font-weight: ${(props) => props.fontWeight};
+`;
+const H4 = styled.h4`
+  font-size: 20px;
+  margin-top: 0px;
+`;
+const LoginPage = () => {
+  const REST_API_KEY = "089967149185843522d3d4b4ae9a3b3d";
+  const REDIRECT_URI = "http://localhost:3000/oauth/kakao/callback";
+  const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
+
+  const navigate = useNavigate();
+
+  return (
+    <Div>
+      <StyledHead>
+        <Div1>
+          <div>
+            <MainButton>SUIT-CARRIER</MainButton>
+            <SubButton1>SUIT-CARRIER</SubButton1>
+            <SubButton1>SUIT-CARRIER</SubButton1>
+          </div>
+          <SignUpBtn onClick={() => navigate("/sign")}>Sign Up</SignUpBtn>
+        </Div1>
+      </StyledHead>
+      <Main>
+        <Box>
+          <h3>로그인</h3>
+          <input className="Input" placeholder="이메일"></input>
+          <input
+            className="Input"
+            placeholder="비밀번호 영문, 특수문자, 숫자혼합 8~12자"
+          ></input>
+          <LoginBtn>로그인</LoginBtn>
+          <div>
+            <Div2>
+              <div>
+                <div>
+                  <input type="radio" />
+                  아이디 저장
+                </div>
+                <div>
+                  <FindBtn>이메일 찾기</FindBtn>|
+                  <FindBtn onClick={() => navigate("/findPw")}>
+                    비밀번호 찾기
+                  </FindBtn>
+                </div>
+              </div>
+              <div>
+                <div>
+                  <ProductBtn>카카오톡 사진</ProductBtn>카카오톡
+                </div>
+                <div>
+                  <ProductBtn>네이버 사진</ProductBtn>네이버
+                </div>
+                <div>
+                  <ProductBtn>네이버 사진</ProductBtn>네이버
+                </div>
+                <div>
+                  <ProductBtn>휴대폰 사진</ProductBtn>휴대폰
+                </div>
+              </div>
+              <KakaBtn>
+                <a href={KAKAO_AUTH_URL}>카카오로 회원가입</a>
+              </KakaBtn>
+              <SignBtn onClick={() => navigate("/sign")}>회원가입</SignBtn>
+
+              <AdverBtn>광고자리</AdverBtn>
+            </Div2>
+          </div>
+        </Box>
+      </Main>
+      <Bottom1>
+        <div>
+          <Div3>
+            <div>
+              <SubTitle fontSize="32px" fontWeight="bold">
+                SUIT CARRIER에 대해 더 알고 싶다면?
+              </SubTitle>
+              <SubTitle fontSize="20px" fontWeight="normal">
+                요즘 인기있는 캐리어 디자인, 사이즈를 확인해보세요
+              </SubTitle>
+              <SubTitle fontSize="20px" fontWeight="normal">
+                요즘 인기있는 캐리어 디자인, 사이즈를 확인해보세요
+              </SubTitle>
+              <LookBtn>케리어 둘러보기</LookBtn>
+            </div>
+            <IMG>이미지넣기</IMG>
+          </Div3>
+        </div>
+      </Bottom1>
+      <Bottom2>
+        <Div4 width="70%">
+          <H3 fontWeight="bold">Contact Us</H3>
+          <H3 fontWeight="bold">gogoogle13@gamil.com</H3>
+          <H3 fontWeight="normal">서울시 관악구 봉천동 100-3 (캐리어빌딩)</H3>
+        </Div4>
+        <Div4 width="30%">
+          <H4>Tel | 010-1234-5678</H4>
+          <H4>Tel | 010-1234-5678</H4>
+        </Div4>
+        <H4>E-mail | suitcarrier_@naver.com</H4>
+      </Bottom2>
+    </Div>
+  );
+};
+export default LoginPage;
diff --git a/src/Page/MP.js b/src/Page/MP.js
new file mode 100644
index 0000000..0b21d2c
--- /dev/null
+++ b/src/Page/MP.js
@@ -0,0 +1,175 @@
+import { useState } from "react";
+// import ReactDatePicker from "react-datepicker";
+import styled from "styled-components";
+// import "react-datepicker/dist/react-datepicker.css";
+const Div = styled.div`
+  object-fit: cover;
+  width: 1920px;
+  height: 1080px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+`;
+const Head = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: white;
+  width: 100vw;
+  height: 70px;
+`;
+const Center = styled.div`
+  width: 1280px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const Title = styled.div`
+  width: 800px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 18px;
+  font-weight: bold;
+`;
+const Logo = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const User = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 250px;
+  align-items: center;
+  & > button {
+    width: 138px;
+    height: 37px;
+    border-radius: 15px;
+    background-color: #007b59;
+    color: white;
+    border: none;
+  }
+  & > div > img {
+    margin-left: 10px;
+  }
+`;
+const Main1 = styled.div`
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  /* justify-content: space-between; */
+  background-image: url(${"/Image/carrier.png"});
+  background-repeat: no-repeat;
+  background-size: cover; /* 이미지를 화면에 꽉 채우도록 설정할 수 있습니다. */
+`;
+const Name = styled.div`
+  display: flex;
+  flex-direction: column;
+  & > h1 {
+    margin-bottom: 20px;
+    font-size: 96px;
+  }
+  & > h4 {
+    font-size: 28px;
+    margin: 0px;
+    color: #494949;
+  }
+`;
+const Bottom = styled.footer`
+  height: 500px;
+  background-color: #f6f6f6;
+  width: 1600px;
+  border-radius: 20px 20px 0px 0px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+const Cen = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 1000px;
+
+  align-items: stretch;
+`;
+const Row1 = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+const MainPage = () => {
+  const [startDate, setStartDate] = useState(new Date());
+  const [endDate, setEndDate] = useState(new Date());
+  return (
+    <Div>
+      <Head>
+        <Center>
+          <Title>
+            <Logo>
+              <img src="Image/logo.png" alt="logo" />
+              <img src="Image/suit-carrier.png" alt="suit-carrier" />
+            </Logo>
+            <div>인기매물 확인</div>
+            <div>매물 등록하기</div>
+            <div>CONTACT_US</div>
+          </Title>
+          <User>
+            <button>Sign Up</button>
+            <div>
+              <img src="Image/alarm.png" />
+              <img src="Image/user.png" />
+            </div>
+          </User>
+        </Center>
+      </Head>
+      <Main1>
+        <Name>
+          <h1>Suit-carrier</h1>
+          <h4>
+            사기는 아깝지만 여행에 꼭 필요한 캐리어, 이제는 대여로 해결하세요
+          </h4>
+        </Name>
+        <Bottom>
+          <Cen>
+            <Row1>
+              <div>
+                <div>
+                  <img src="Image/place.png" />
+                  <h3>동네 선택</h3>
+                </div>
+                <select>
+                  <option>서울시</option>
+                </select>
+              </div>
+              <div>
+                <h3>대여 기간</h3>
+                <div>
+                  {/* <ReactDatePicker
+                    selected={startDate}
+                    onChange={(date) => setStartDate(date)}
+                    selectsStart
+                    startDate={startDate}
+                    endDate={endDate}
+                  />
+                  <ReactDatePicker
+                    selected={endDate}
+                    onChange={(date) => setEndDate(date)}
+                    selectsEnd
+                    startDate={startDate}
+                    endDate={endDate}
+                    minDate={startDate}
+                  /> */}
+                </div>
+              </div>
+            </Row1>
+            <div></div>
+          </Cen>
+        </Bottom>
+      </Main1>
+    </Div>
+  );
+};
+export default MainPage;
diff --git a/src/Page/MainPage.js b/src/Page/MainPage.js
new file mode 100644
index 0000000..9c4b293
--- /dev/null
+++ b/src/Page/MainPage.js
@@ -0,0 +1,457 @@
+import styled from "styled-components";
+import { AiOutlineRight } from "react-icons/ai";
+import { useNavigate } from "react-router-dom";
+import Bottom from "../Components/bottom";
+import Cards from "../Components/cards";
+
+// import DatePicker from "react-datepicker";
+import { ko } from "date-fns/esm/locale";
+// import "react-datepicker/dist/react-datepicker.css";
+import { useState } from "react";
+import Head from "../Components/head";
+
+const Div = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 4320px;
+`;
+const Main1 = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-image: url(/Image/carrier.png);
+  background-repeat: no-repeat;
+  background-position: top center;
+  background-size: cover;
+  width: 1920px;
+  height: 1080px;
+`;
+
+const Name = styled.div`
+  display: flex;
+  flex-direction: column;
+  & > h1 {
+    margin-bottom: 20px;
+    font-size: 96px;
+  }
+  & > h4 {
+    font-size: 28px;
+    margin: 0px;
+    color: #494949;
+  }
+`;
+const Box = styled.div`
+  font-weight: bold;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 1585px;
+  height: 654px;
+  background-color: rgba(222, 222, 222, 0.71);
+  margin-top: 110px;
+  & > button {
+    width: 246px;
+    height: 68px;
+    border-radius: 30px;
+    background-color: #007b59;
+    color: white;
+    border: none;
+    font-size: 18px;
+    margin-top: 77px;
+    margin-left: 1200px;
+  }
+`;
+const Div3 = styled.div`
+  width: 1000px;
+  margin-top: 70px;
+  display: flex;
+  justify-content: space-between;
+`;
+const Div4 = styled.div`
+  text-align: left;
+  font-size: 24px;
+  margin-left: 5px;
+`;
+// const DatePickerWrapper = styled(DatePicker)`
+//   width: 315px;
+//   height: 38px;
+//   background-color: rgba(222, 222, 222, 0.71);
+//   border: 1px solid #000000;
+//   font-weight: bold;
+//   font-size: 16px;
+//   border-radius: 30px;
+//   margin-top: 5px;
+// `;
+const Div5 = styled.div`
+  display: flex;
+  font-size: 24px;
+  font-weight: bold;
+  width: 1100px;
+  justify-content: space-between;
+  margin-top: 112px;
+`;
+const Select = styled.select`
+  background-color: rgba(222, 222, 222, 0.71);
+  width: 315px;
+  height: 38px;
+  border: 1px solid #000000;
+  margin-top: 5px;
+  border-radius: 30px;
+  font-weight: bold;
+  font-size: 16px;
+`;
+const Select2 = styled.select`
+  height: 33px;
+  background-color: rgba(222, 222, 222, 0.71);
+  border: none;
+  border-bottom: 1px solid black;
+  font-size: 24px;
+  font-weight: bold;
+  width: 150%;
+  margin-top: 30px;
+`;
+const Main2 = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 1920px;
+  height: 1080px;
+  background-color: white;
+`;
+const Ti = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const Div1 = styled.div`
+  height: 48px;
+  width: 180px;
+  justify-content: space-between;
+  display: flex;
+  margin-right: 36px;
+  align-items: center;
+  font-size: 24px;
+`;
+const Div2 = styled.div`
+  height: 88px;
+  display: flex;
+  align-items: center;
+  text-align: left;
+  font-size: 20px;
+`;
+const Bell = styled.div`
+  display: flex;
+  margin-top: 124px;
+`;
+const Dis = styled.div`
+  margin-top: 150px;
+  display: flex;
+  justify-content: space-between;
+  width: 1500px;
+`;
+const Con = styled.div`
+  & > div {
+    position: relative;
+    background-image: url(/Image/circle.png);
+    background-repeat: no-repeat;
+    background-position: top center;
+    background-size: cover;
+    width: 249px;
+    height: 249px;
+    margin-bottom: 30px;
+  }
+`;
+const InnerImg = styled.img`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+const Btns = styled.div`
+  display: flex;
+  /* width: 531px; */
+  justify-content: flex-end;
+  margin-top: 174px;
+  & > button {
+    border-radius: 30px;
+    width: 246px;
+    height: 68px;
+    margin-left: 40px;
+    color: ${(props) => props.color || "white"};
+    background: ${(props) => props.background || "#007B59"};
+    border: ${(props) => props.border || "#007B59"};
+  }
+`;
+const Main3 = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 1920px;
+  height: 1080px;
+  background-color: white;
+`;
+const Txt = styled.div`
+  display: flex;
+  align-items: center;
+  width: 1600px;
+  justify-content: space-between;
+  & > div {
+    display: flex;
+    font-size: 32px;
+  }
+`;
+const Items = styled.div`
+  /* height: 316px; */
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+`;
+const Main4 = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 1920px;
+  height: 1080px;
+`;
+const MainPage = () => {
+  const navigate = useNavigate();
+
+  const [startDate, setStartDate] = useState(null);
+  const [endDate, setEndDate] = useState(null);
+
+  const setChangeDate = (dates) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+  };
+  const today = new Date();
+  const futureDate = new Date(
+    today.getFullYear() + 1,
+    today.getMonth(),
+    today.getDate()
+  );
+  return (
+    <Div>
+      <Main1>
+        <Head />
+        <Name>
+          <h1>Suit-carrier</h1>
+          <h4>
+            사기는 아깝지만 여행에 꼭 필요한 캐리어, 이제는 대여로 해결하세요
+          </h4>
+        </Name>
+        <Box>
+          <Div3>
+            <div style={{ display: "flex" }}>
+              <img
+                src="Image/place.png"
+                style={{ width: "32px", height: "32px" }}
+              />
+              <Div4>
+                동네 선택
+                <br />
+                <Select>
+                  <option>성남시 이매동</option>
+                  <option>용인시 역북동</option>
+                </Select>
+              </Div4>
+            </div>
+            <Div4>
+              대여 기간
+              <div>
+                {/* <DatePickerWrapper
+                  selectsRange={true}
+                  locale={ko}
+                  dateFormat="yyyy년 MM월 dd일"
+                  selected={startDate}
+                  startDate={startDate}
+                  endDate={endDate}
+                  minDate={today}
+                  maxDate={futureDate}
+                  onChange={(dates) => setChangeDate(dates)}
+                /> */}
+              </div>
+            </Div4>
+          </Div3>
+          <Div5>
+            <div>
+              색상
+              <br />
+              <Select2>
+                <option>빨간색</option>
+                <option>주황색</option>
+                <option>노란색</option>
+                <option>초록색</option>
+                <option>파란색</option>
+                <option>남색</option>
+                <option>보라색</option>
+              </Select2>
+            </div>
+            <div>
+              사이즈
+              <br />
+              <Select2>
+                <option>18인치</option>
+                <option>20인치</option>
+                <option>24인치</option>
+                <option>27인치</option>
+              </Select2>
+            </div>
+            <div>
+              예산
+              <br />
+              <Select2>
+                <option>10만원 이내</option>
+                <option>20민원 이내</option>
+                <option>30만원 이내</option>
+              </Select2>
+            </div>
+            <div>
+              브랜드
+              <br />
+              <Select2>
+                <option>Samsonite</option>
+                <option>리모와</option>
+                <option>투미</option>
+                <option>샤오미</option>
+              </Select2>
+            </div>
+          </Div5>
+          <button>매물 확인하기</button>
+        </Box>
+      </Main1>
+      <Main2>
+        <Bell>
+          <div>
+            <Ti>
+              <Div1>
+                <img src="Image/bell.png" />
+                <div>공지사항</div>
+                <div>|</div>
+              </Div1>
+              <Div2>
+                현재 태풍으로 인해 고객님의 지역(성남시 분당구)의 거래가
+                지연되고 있습니다.
+                <br />
+                판매자와의 연락을 통해 거래 일정을 조율하시기 바랍니다.
+              </Div2>
+            </Ti>
+            <Dis>
+              <Con>
+                <div>
+                  <InnerImg src="Image/calculator.png" />
+                </div>
+                캐리어 대여하기
+              </Con>
+              <Con>
+                <div>
+                  <InnerImg src="Image/card.png" />
+                </div>
+                캐리어 빌려주기
+              </Con>
+              <Con>
+                <div>
+                  <InnerImg src="Image/alarm.png" />
+                </div>
+                거래 규칙 살펴보기
+              </Con>
+              <Con>
+                <div>
+                  <InnerImg src="Image/gift.png" />
+                </div>
+                서비스 둘러보기
+              </Con>
+            </Dis>
+            <Btns>
+              <button
+                style={{
+                  color: "white",
+                  background: "#007B59",
+                  border: "1px solid #007B59",
+                  fontSize: "18px",
+                }}
+              >
+                매물 확인하기
+              </button>
+              <button
+                style={{
+                  color: "#3E4659",
+                  background: "white",
+                  border: "1px solid #3E4659",
+                  fontSize: "18px",
+                }}
+              >
+                우리집 캐리어 대여
+              </button>
+            </Btns>
+          </div>
+        </Bell>
+      </Main2>
+      <Main3>
+        <Txt>
+          <div>
+            <h2 style={{ color: "#3E4659", marginRight: "10px" }}>내 검색과</h2>
+            <h2 style={{ color: "#007B59" }}>비슷한 제품</h2>
+          </div>
+          <div>
+            <button
+              style={{
+                fontSize: "20px",
+                height: "44px",
+                border: "none",
+                borderBottom: "1px solid #6e6e6e",
+                color: "#6e6e6e",
+                backgroundColor: "white",
+              }}
+            >
+              전체 매물 보러가기
+            </button>
+            <button
+              style={{
+                fontSize: "20px",
+                height: "44px",
+                border: "none",
+                color: "#6e6e6e",
+                backgroundColor: "white",
+              }}
+            >
+              <AiOutlineRight />
+            </button>
+          </div>
+        </Txt>
+        <Items>
+          <Cards />
+          <Cards />
+          <Cards />
+          <Cards />
+          <Cards />
+        </Items>
+        <h2
+          style={{
+            color: "#3E4659",
+            marginRight: "10px",
+            fontSize: "45px",
+            fontWeight: "bold",
+            width: "1600px",
+            textAlign: "start",
+            marginTop: "60px",
+          }}
+        >
+          SUIT-CARRER가 추천해요
+        </h2>
+        <Items>
+          <Cards />
+          <Cards />
+          <Cards />
+          <Cards />
+          <Cards />
+        </Items>
+      </Main3>
+      <Main4>
+        <Bottom />
+      </Main4>
+    </Div>
+  );
+};
+export default MainPage;
diff --git a/src/Page/Profile.js b/src/Page/Profile.js
new file mode 100644
index 0000000..ba7b09e
--- /dev/null
+++ b/src/Page/Profile.js
@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from "react";
+const Profile = () => {
+  const [user_id, setUserId] = useState();
+  const [nickName, setNickName] = useState();
+  const [profileImage, setProfileImage] = useState();
+  const getProfile = async () => {
+    try {
+      // Kakao SDK API를 이용해 사용자 정보 획득
+      let data = await window.Kakao.API.request({
+        url: "/v2/user/me",
+      });
+      // 사용자 정보 변수에 저장
+      setUserId(data.id);
+      setNickName(data.properties.nickname);
+      setProfileImage(data.properties.profile_image);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  useEffect(() => {
+    getProfile();
+  }, []);
+  return (
+    <div>
+      <h2>{user_id}</h2>
+      <h2>{nickName}</h2>
+      <img src={profileImage}></img>
+    </div>
+  );
+};
+export default Profile;
diff --git a/src/Page/Sign.js b/src/Page/Sign.js
new file mode 100644
index 0000000..69a251c
--- /dev/null
+++ b/src/Page/Sign.js
@@ -0,0 +1,577 @@
+import styled from "styled-components";
+import Button from "@mui/material/Button";
+import React from "react";
+import { ReactComponent as Success } from "../assets/img/memberSuccess.svg";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import AgreeTerms from "./SignUp/AgreeTerms";
+import { useState } from "react";
+import MemberAgree from "./SignUp/MemberAgree";
+import { useNavigate } from "react-router";
+import Head from "../Components/head";
+import Bottom from "../Components/bottom";
+
+const Total = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+const Main = styled.div`
+  height: 1080px;
+`;
+const Div = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`;
+const Center = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+//페이지 종류
+const Title1 = styled.div`
+  margin-top: 140px;
+  height: 68px;
+
+  font-size: 42px;
+  font-weight: semiBold;
+  color: #4f4747;
+`;
+
+//네비게이션 바
+const NavDiv = styled(Div)`
+  height: 65px;
+  margin-top: 8px;
+`;
+
+const Hr = styled.div`
+  width: 72px;
+  border-top: 3px solid #f2f2f2;
+  margin-top: 23px;
+`;
+
+const Hrmid = styled(Hr)`
+  width: 222px;
+  border-top: 3px solid #f2f2f2;
+  margin-top: 23px;
+`;
+
+const ActiveCircle = styled.div`
+  border-radius: 50px;
+  height: 51px;
+  width: 51px;
+  background-color: #007b59;
+  justify-content: column;
+`;
+
+const Circle = styled(ActiveCircle)`
+  border-radius: 50px;
+  height: 38px;
+  width: 38px;
+  margin-top: 5px;
+  background-color: #f2f2f2;
+`;
+
+const SubDiv = styled(Div)`
+  height: 50px;
+  align-items: row;
+`;
+
+const SubText = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  color: #b5b5b5;
+  font-size: 20px;
+  font-weight: regular;
+`;
+
+const ActivesubText = styled(SubText)`
+  width: 80px;
+  height: 35px;
+
+  color: #007b59;
+  font-size: 20px;
+  font-weight: regular;
+`;
+
+// 주의 문구
+const Title2 = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+  align-items: center;
+  height: 68px;
+  margin-top: 19px;
+
+  & > div {
+    display: flex;
+    align-items: center;
+    margin-bottom: 21px;
+
+    font-weight: regular;
+    font-size: 24px;
+    color: #1d1d1d;
+  }
+`;
+
+const Box = styled.div`
+  width: 606px;
+  height: 353px;
+  display: flex;
+  justify-content: center;
+  margin-top: 50px;
+
+  border-radius: 30px;
+  border: 1px solid #b5b5b5;
+  font-size: 15px;
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Div1 = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  & > p {
+    margin-left: 41px;
+    margin-top: 116px;
+    display: flex;
+    font-weight: regular;
+    font-size: 24px;
+    color: #1d1d1d;
+    width: 60px;
+  }
+
+  & > input {
+    margin-top: 106px;
+    margin-left: 112px;
+    width: 304px;
+    height: 36px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+  }
+`;
+
+const Div2 = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 60px;
+
+  & > p {
+    margin-left: 41px;
+    margin-top: 20px;
+    display: flex;
+    font-weight: regular;
+    font-size: 24px;
+    color: #1d1d1d;
+    width: 147px;
+    height: 68px;
+  }
+
+  & > input {
+    margin-top: 13.5px;
+    margin-left: 22px;
+    width: 304px;
+    height: 36px;
+    display: flex;
+    flex-direction: col;
+    justify-content: center;
+  }
+`;
+
+const Div3 = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-left: 325px;
+  margin-top: 49px;
+  width: 230px;
+  height: 68px;
+
+  & > p {
+    margin-top: 20px;
+    //margin-left: 200px;
+    display: flex;
+    font-weight: regular;
+    font-size: 15px;
+    color: #1d1d1d;
+  }
+
+  & > button {
+    display: flex;
+    margin-top: 10px;
+    margin-left: 13px;
+
+    font-size: 13px;
+    font-weight: bold;
+    border-radius: 15px;
+    background-color: #007b59;
+  }
+`;
+
+const Div4 = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 555px;
+  height: 117px;
+
+  & > p {
+    height: 68px;
+    margin-left: 40px;
+    margin-top: 27px;
+    display: flex;
+    align-items: center;
+
+    font-weight: regular;
+    font-size: 24px;
+    color: #1d1d1d;
+  }
+
+  & > input {
+    margin-top: 43px;
+    margin-left: 37px;
+    width: 304px;
+    height: 36px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+`;
+const SubTitle = styled.div`
+  width: 150px;
+  height: 68px;
+  display: flex;
+  justify-content: space-between;
+
+  color: #4f4747;
+  font-size: 16px;
+  font-weight: bold;
+`;
+const H1 = styled.div`
+  display: flex;
+  align-items: flex-start;
+  width: 525px;
+
+  line-height: 140%;
+  font-weight: medium;
+  font-size: 13px;
+  color: #1d1d1d;
+`;
+const Box1 = styled.div`
+  width: 606px;
+  height: 458px;
+  display: flex;
+  justify-content: center;
+  margin-top: 49px;
+  //margin-bottom: 116px;
+
+  border-radius: 30px;
+  border: 1px solid #b5b5b5;
+  font-size: 15px;
+`;
+const Div5 = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 555px;
+  height: 117px;
+
+  & > p {
+    height: 68px;
+    margin-left: 40px;
+    margin-top: 9px;
+    display: flex;
+    align-items: center;
+
+    font-weight: regular;
+    font-size: 24px;
+    color: #1d1d1d;
+  }
+
+  & > input {
+    width: 304px;
+    height: 36px;
+    margin-top: 19px;
+    margin-left: 17px;
+    display: flex;
+    align-items: center;
+  }
+`;
+const Div6 = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 555px;
+  height: 45px;
+
+  & > p {
+    margin-left: 40px;
+    margin-top: 10px;
+    display: flex;
+    font-weight: regular;
+    font-size: 24px;
+    color: #1d1d1d;
+    height: 68px;
+  }
+
+  & > input {
+    width: 304px;
+    height: 36px;
+    margin-top: 3px;
+    margin-left: 17px;
+    display: flex;
+    justify-content: center;
+  }
+`;
+
+const Div7 = styled.div`
+  display: flex;
+  align-items: center;
+  height: 68px;
+
+  font-weight: bold;
+  font-size: 24px;
+`;
+
+const Icon = styled.div`
+  width: 175px;
+  height: 175px;
+  margin-top: 124px;
+`;
+const Btn = styled.div`
+  margin-top: 10px;
+  & > button {
+    width: 116px;
+    height: 58px;
+    border-radius: 30px;
+    border: none;
+    background-color: #e1e1e1;
+    font-weight: Bold;
+    font-size: 23px;
+    color: white;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+`;
+const Main2 = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 1920px;
+  height: 1080px;
+`;
+const Sign = () => {
+  const [useremail, setUseremail] = useState("");
+  const [userpw, setUserpw] = useState("");
+
+  const [Next, setNext] = useState(false);
+  const [checked, setChecked] = useState(false);
+  const [num, setNum] = useState(0);
+
+  const navigate = useNavigate();
+  //const [user]
+
+  //email, 비밀번호 정규식
+  const emailRegEx =
+    /^[A-Za-z0-9]([-_.]?[A-Za-z0-9])*@[A-Za-z0-9]([-_.]?[A-Za-z0-9])*\.[A-Za-z]{2,3}$/i;
+  const pwRegEx = /^[A-Za-z0-9]{8,20}$/;
+
+  const emailChk = (useremail) => {
+    return emailRegEx.test(useremail);
+  };
+  const pwChk = (userpw) => {
+    if (userpw.match(pwRegEx) === null) {
+      alert("비밀번호 형식을 확인해주세요.");
+      console.log("비밀번호 형식 확인");
+      return;
+    } else {
+      console.log("형식이 맞아요");
+    }
+  };
+
+  const addNum = () => {
+    setNum(num + 1);
+  };
+  const minusNum = () => {
+    setNum(num - 1);
+  };
+  return (
+    <Total>
+      <Main>
+        <Head />
+        <Div>
+          <Center>
+            <Title1>회원가입</Title1>
+
+            <NavDiv>
+              {num == 0 ? <ActiveCircle></ActiveCircle> : <Circle></Circle>}
+              <Hr />
+              {num == 1 ? <ActiveCircle></ActiveCircle> : <Circle></Circle>}
+              <Hrmid />
+              {num == 2 ? <ActiveCircle></ActiveCircle> : <Circle></Circle>}
+              <Hr />
+              {num == 3 ? <ActiveCircle></ActiveCircle> : <Circle></Circle>}
+            </NavDiv>
+            <SubDiv>
+              {num == 0 ? (
+                <ActivesubText>본인인증</ActivesubText>
+              ) : (
+                <SubText>본인인증</SubText>
+              )}
+              {num == 1 ? (
+                <ActivesubText
+                  style={{ marginLeft: "40px", marginRight: "111px" }}
+                >
+                  정보입력
+                </ActivesubText>
+              ) : (
+                <SubText style={{ marginLeft: "40px", marginRight: "111px" }}>
+                  정보입력
+                </SubText>
+              )}
+              {num == 2 ? (
+                <ActivesubText style={{ marginLeft: "80px" }}>
+                  약관동의
+                </ActivesubText>
+              ) : (
+                <SubText style={{ marginLeft: "80px" }}>약관동의</SubText>
+              )}
+              {num == 3 ? (
+                <ActivesubText style={{ marginLeft: "40px" }}>
+                  가입완료
+                </ActivesubText>
+              ) : (
+                <SubText style={{ marginLeft: "40px" }}>가입완료</SubText>
+              )}
+            </SubDiv>
+
+            <Title2>
+              <div style={{ fontSize: "24px" }}>
+                실제와 일치하는 정보를 입력하셔야 회원가입이 완료됩니다.
+              </div>
+              <div style={{ fontSize: "20px", color: "#939393" }}>
+                *입력하신 정보는 회원가입 여부에만 사용되며 저장되지 않습니다.
+              </div>
+            </Title2>
+            {num == 0 && (
+              <div>
+                <Box>
+                  <Content>
+                    <Div1>
+                      <p>성명</p>
+                      <input placeholder="이름"></input>
+                    </Div1>
+                    <Div2>
+                      <p>법적생년월일</p>
+                      <input placeholder="nnnn-nn-nn"></input>
+                    </Div2>
+                    <Div3>
+                      <p>본인인증하러가기</p>
+                      <Button
+                        variant="contained"
+                        style={{
+                          width: "96px",
+                          height: "37px",
+                          backgroundColor: "#007B59",
+                        }}
+                        onClick={() => navigate("/phone")}
+                      >
+                        본인인증
+                      </Button>
+                    </Div3>
+                  </Content>
+                </Box>
+                <Btn>
+                  <button onClick={addNum}>다음단계</button>
+                </Btn>
+              </div>
+            )}
+            {num == 1 && (
+              <div>
+                <Box>
+                  <Content>
+                    <Div4>
+                      <p>아이디</p>
+                      <input
+                        _onchange={(e) => {
+                          setUseremail(e.target.value);
+                          emailChk(e.target.value);
+                        }}
+                        placeholder="이메일"
+                        type="email"
+                      ></input>
+                    </Div4>
+                    <Div5>
+                      <p>비밀번호</p>
+                      <input
+                        _onchange={(e) => {
+                          setUserpw(e.target.value);
+                          pwChk(e.target.value);
+                        }}
+                        placeholder="영문 대소문자, 숫자를 혼합해 8자 이상 입력"
+                        type="password"
+                      ></input>
+                    </Div5>
+                    <Div6>
+                      <p>거주지역</p>
+                      <input placeholder="드롭다운"></input>
+                    </Div6>
+                  </Content>
+                </Box>
+                <Btn>
+                  <button onClick={minusNum}>이전단계</button>
+                  <button onClick={addNum}>다음단계</button>
+                </Btn>
+              </div>
+            )}
+            {num == 2 && (
+              <div>
+                <Box1>
+                  <Content>
+                    <SubTitle>
+                      <FormControlLabel
+                        value="start"
+                        control={<Checkbox color="success" />}
+                        label="약관동의하기"
+                        labelPlacement="start"
+                        // onChange={handleChange}
+                      />
+                    </SubTitle>
+
+                    <H1>{AgreeTerms}</H1>
+                  </Content>
+                </Box1>
+                <Btn>
+                  <button onClick={minusNum}>이전단계</button>
+                  <button onClick={addNum}>다음단계</button>
+                </Btn>
+              </div>
+            )}
+            {num == 3 && (
+              <Content>
+                <Icon>
+                  <Success onClick={() => navigate("/")} />
+                </Icon>
+                <Div7>가입이 완료되었습니다.</Div7>
+              </Content>
+            )}
+          </Center>
+        </Div>
+      </Main>
+      <Main2>
+        <Bottom />
+      </Main2>
+    </Total>
+  );
+};
+export default Sign;
diff --git a/src/Page/SignUp/AgreeTerms.js b/src/Page/SignUp/AgreeTerms.js
new file mode 100644
index 0000000..d3dbec9
--- /dev/null
+++ b/src/Page/SignUp/AgreeTerms.js
@@ -0,0 +1,8 @@
+const AgreeTerms =
+  //[{
+  //    content:
+  "① 개인정보처리자는 다음 각 호의 사항이 포함된 개인정보의 처리 방침(이하 “개인정보 처리방침”이라 한다)을 정하여야 한다. 이 경우 공공기관은 제32조에 따라 등록대상이 되는 개인정보파일에 대하여 개인정보 처리방침을 정한다. 1. 개인정보의 처리 목적 2. 개인정보의 처리 및 보유 기간 3. 개인정보의 제3자 제공에 관한 사항(해당되는 경우에만 정한다) 3의2. 개인정보의 파기절차 및 파기방법(제21조제1항 단서에 따라 개인정보를 보존하여야 하는 경우에는 그 보존근거와 보존하는 개인정보 항목을 포함한다) 4. 개인정보 처리의 위탁에 관한 사항(해당되는 경우에만 정한다) 5. 정보주체와 법정대리인의 권리·의무 및 그 행사방법에 관한 사항 6. 제31조에 따른 개인정보 보호책임자의 성명 또는 개인정보 보호업무 및 관련 고충사항을 처리하는 부서의 명칭과 전화번호 등 연락처 7. 인터넷 접속정보파일 등 개인정보를 자동으로 수집하는 장치의 설치·운영 및 그 거부에 관한 사항(해당하는 경우에만 정한다) 8. 그 밖에 개인정보의 처리에 관하여 대통령령으로 정한 사항 ② 개인정보처리자가 개인정보 처리방침을 수립하거나 변경하는 경우에는 정보주체가 쉽게 확인할 수 있도록 대통령령으로 정하는 방법에 따라 공개하여야 한다. ③ 개인정보 처리방침의 내용과 개인정보처리자와 정보주체 간에 체결한 계약의 내용이 다른 경우에는 정보주체에게 유리한 것을 적용한다. ④ 보호위원회는 개인정보 처리방침의 작성지침을 정하여 개인정보처리자에 게 그 준수를 권장할 수 있다. 12 | 개인정보 처리방침 작성지침 일반 시행령 제31조(개인정보 처리방침의 내용 및 공개방법 등) ① 법 제30조제1항제8호에서 “대통령령 으로 정한 사항”이란 다음 각 호의 사항을 말한다. 1. 처리하는 개인정보의 항목 2. 삭제 <2020. 8. 4.> 3. 제30조 또는 제48조의2에 따른 개인정보의 안전성 확보 조치에 관한 사항 표준지침 제18조(개인정보 처리방침의 작성기준 등) ① 개인정보처리자가 개인정보 처리방침을 작성하는 때에는 법 제30조제1항 각 호 및 영 제31조제1항 각 호의 사항을 명시적으로 구분하되, 알기 쉬운 용어로 구체적이고 명확하게 표현하여야 한다. ② 개인정보처리자는 처리하는 개인정보가 개인정보의 처리 목적에 필요한 최소한이라는 점을 밝혀야 한다.";
+
+// }]
+
+export default AgreeTerms;
diff --git a/src/Page/SignUp/InputInfo.js b/src/Page/SignUp/InputInfo.js
new file mode 100644
index 0000000..bab5fb4
--- /dev/null
+++ b/src/Page/SignUp/InputInfo.js
@@ -0,0 +1,331 @@
+import styled from "styled-components";
+import Button from "@mui/material/Button";
+import React from "react";
+
+const Div = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`;
+const Center = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+//페이지 종류
+const Title1 = styled.div`
+  margin-top: 152px;
+  width: 146px;
+  height: 68px;
+
+  font-size: 42px;
+  font-weight: semiBold;
+  color: #4f4747;
+`;
+
+//네비게이션 바
+const NavDiv = styled(Div)`
+  height: 65px;
+  margin-top: 8px;
+`;
+
+const Hr = styled.div`
+  width: 72px;
+  border-top: 3px solid #f2f2f2;
+  margin-top: 23px;
+`;
+
+const Hrmid = styled(Hr)`
+  width: 222px;
+  border-top: 3px solid #f2f2f2;
+  margin-top: 23px;
+`;
+
+const ActiveCircle = styled.div`
+  border-radius: 50px;
+  height: 51px;
+  width: 51px;
+  background-color: #007b59;
+  justify-content: column;
+`;
+
+const Circle = styled(ActiveCircle)`
+  border-radius: 50px;
+  height: 38px;
+  width: 38px;
+  margin-top: 5px;
+  background-color: #f2f2f2;
+`;
+
+const SubDiv = styled(Div)`
+  height: 50px;
+  align-items: row;
+`;
+
+const SubText = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  color: #b5b5b5;
+  font-size: 20px;
+  font-weight: regular;
+`;
+
+const ActivesubText = styled(SubText)`
+  width: 80px;
+  height: 35px;
+
+  color: #007b59;
+  font-size: 20px;
+  font-weight: regular;
+`;
+
+// 주의 문구
+const Title2 = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+  align-items: center;
+  height: 68px;
+  margin-top: 19px;
+
+  & > div {
+    display: flex;
+    align-items: center;
+    margin-bottom: 21px;
+
+    font-weight: regular;
+    font-size: 24px;
+    color: #1d1d1d;
+  }
+`;
+
+const Box = styled.div`
+  width: 606px;
+  height: 353px;
+  display: flex;
+  justify-content: center;
+  margin-top: 99px;
+  margin-bottom: 174px;
+
+  border-radius: 30px;
+  border: 1px solid #b5b5b5;
+  font-size: 15px;
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Div1 = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 555px;
+  height: 117px;
+
+  & > p {
+    width: 63px;
+    height: 68px;
+    margin-left: 40px;
+    margin-top: 27px;
+    display: flex;
+    align-items: center;
+
+    font-weight: regular;
+    font-size: 24px;
+    color: #1d1d1d;
+  }
+
+  & > input {
+    margin-top: 43px;
+    margin-left: 37px;
+    width: 304px;
+    height: 36px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+`;
+
+const Div2 = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 555px;
+  height: 117px;
+
+  & > p {
+    height: 68px;
+    margin-left: 40px;
+    margin-top: 9px;
+    display: flex;
+    align-items: center;
+
+    font-weight: regular;
+    font-size: 24px;
+    color: #1d1d1d;
+  }
+
+  & > input {
+    width: 304px;
+    height: 36px;
+    margin-top: 19px;
+    margin-left: 17px;
+    display: flex;
+    align-items: center;
+  }
+`;
+
+const Div3 = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 555px;
+  height: 45px;
+
+  & > p {
+    margin-left: 40px;
+    margin-top: 10px;
+    display: flex;
+    font-weight: regular;
+    font-size: 24px;
+    color: #1d1d1d;
+    height: 68px;
+  }
+
+  & > input {
+    width: 304px;
+    height: 36px;
+    margin-top: 3px;
+    margin-left: 17px;
+    display: flex;
+    justify-content: center;
+  }
+`;
+
+const Div4 = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-left: 265px;
+  margin-top: 15px;
+  height: 68px;
+
+  & > button {
+    display: flex;
+    margin-top: 10px;
+    margin-left: 13px;
+
+    font-size: 12px;
+    font-weight: bold;
+    border-radius: 15px;
+    background-color: #007b59;
+  }
+`;
+
+const InputInfo = () => {
+  const [useremail, setUseremail] = React.useState("");
+  const [userpw, setUserpw] = React.useState("");
+  //const [user]
+
+  //email, 비밀번호 정규식
+  const emailRegEx =
+    /^[A-Za-z0-9]([-_.]?[A-Za-z0-9])*@[A-Za-z0-9]([-_.]?[A-Za-z0-9])*\.[A-Za-z]{2,3}$/i;
+  const pwRegEx = /^[A-Za-z0-9]{8,20}$/;
+
+  const emailChk = (useremail) => {
+    return emailRegEx.test(useremail);
+  };
+  const pwChk = (userpw) => {
+    if (userpw.match(pwRegEx) === null) {
+      alert("비밀번호 형식을 확인해주세요.");
+      console.log("비밀번호 형식 화긴");
+      return;
+    } else {
+      console.log("형식이 맞아요");
+    }
+  };
+
+  return (
+    <Div>
+      <Center>
+        <Title1>회원가입</Title1>
+
+        <NavDiv>
+          <Circle></Circle>
+          <Hr />
+          <ActiveCircle></ActiveCircle>
+          <Hrmid />
+          <Circle></Circle>
+          <Hr />
+          <Circle></Circle>
+        </NavDiv>
+
+        <SubDiv>
+          <SubText>본인인증</SubText>
+          <ActivesubText style={{ marginLeft: "40px", marginRight: "111px" }}>
+            정보입력
+          </ActivesubText>
+          <SubText style={{ marginLeft: "80px" }}>약관동의</SubText>
+          <SubText style={{ marginLeft: "40px" }}>가입완료</SubText>
+        </SubDiv>
+
+        <Title2>
+          <div style={{ fontSize: "24px" }}>
+            실제와 일치하는 정보를 입력하셔야 회원가입이 완료됩니다.
+          </div>
+          <div style={{ fontSize: "20px", color: "#939393" }}>
+            *입력하신 정보는 회원가입 여부에만 사용되며 저장되지 않습니다.
+          </div>
+        </Title2>
+
+        <Box>
+          <Content>
+            <Div1>
+              <p>아이디</p>
+              <input
+                _onchange={(e) => {
+                  setUseremail(e.target.value);
+                  emailChk(e.target.value);
+                }}
+                placeholder="이메일"
+                type="email"
+              ></input>
+            </Div1>
+            <Div2>
+              <p>비밀번호</p>
+              <input
+                _onchange={(e) => {
+                  setUserpw(e.target.value);
+                  pwChk(e.target.value);
+                }}
+                placeholder="영문 대소문자, 숫자를 혼합해 8자 이상 입력"
+                type="password"
+              ></input>
+            </Div2>
+            <Div3>
+              <p>거주지역</p>
+              <input placeholder="드롭다운"></input>
+            </Div3>
+            <Div4>
+              <Button
+                variant="contained"
+                style={{
+                  width: "75px",
+                  height: "36px",
+                  backgroundColor: "#007B59",
+                }}
+              >
+                다음단계
+              </Button>
+            </Div4>
+          </Content>
+        </Box>
+      </Center>
+    </Div>
+  );
+};
+
+export default InputInfo;
diff --git a/src/Page/SignUp/MemberAgree.js b/src/Page/SignUp/MemberAgree.js
new file mode 100644
index 0000000..8def498
--- /dev/null
+++ b/src/Page/SignUp/MemberAgree.js
@@ -0,0 +1,246 @@
+import styled from "styled-components";
+import Button from "@mui/material/Button";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import { useState } from "react";
+import AgreeTerms from "./AgreeTerms";
+
+const Div = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`;
+const Center = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+//페이지 종류
+const Title1 = styled.div`
+  margin-top: 121px;
+  width: 146px;
+  height: 68px;
+
+  font-size: 42px;
+  font-weight: semiBold;
+  color: #4f4747;
+`;
+
+//네비게이션 바
+const NavDiv = styled(Div)`
+  height: 65px;
+  margin-top: 31px;
+`;
+
+const Hr = styled.div`
+  width: 72px;
+  border-top: 3px solid #f2f2f2;
+  margin-top: 23px;
+`;
+
+const Hrmid = styled(Hr)`
+  width: 222px;
+  border-top: 3px solid #f2f2f2;
+  margin-top: 23px;
+`;
+
+const ActiveCircle = styled.div`
+  border-radius: 50px;
+  height: 51px;
+  width: 51px;
+  background-color: #007b59;
+  justify-content: column;
+`;
+
+const Circle = styled(ActiveCircle)`
+  border-radius: 50px;
+  height: 38px;
+  width: 38px;
+  margin-top: 5px;
+  background-color: #f2f2f2;
+`;
+
+const SubDiv = styled(Div)`
+  height: 50px;
+  align-items: row;
+`;
+
+const SubText = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  color: #b5b5b5;
+  font-size: 20px;
+  font-weight: regular;
+`;
+
+const ActivesubText = styled(SubText)`
+  width: 80px;
+  height: 35px;
+
+  color: #007b59;
+  font-size: 20px;
+  font-weight: regular;
+`;
+
+// 주의 문구
+const Title2 = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+  align-items: center;
+  height: 68px;
+  margin-top: 41px;
+
+  & > div {
+    display: flex;
+    align-items: center;
+    margin-bottom: 21px;
+
+    font-weight: regular;
+    font-size: 24px;
+    color: #1d1d1d;
+  }
+`;
+
+const Box = styled.div`
+  width: 606px;
+  height: 458px;
+  display: flex;
+  justify-content: center;
+  margin-top: 49px;
+  //margin-bottom: 116px;
+
+  border-radius: 30px;
+  border: 1px solid #b5b5b5;
+  font-size: 15px;
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  //align-items: center;
+  align-items: flex-start;
+`;
+
+const SubTitle = styled.div`
+  width: 150px;
+  height: 68px;
+  display: flex;
+  justify-content: space-between;
+
+  color: #4f4747;
+  font-size: 16px;
+  font-weight: bold;
+`;
+
+const Div1 = styled.div`
+  display: flex;
+  align-items: flex-start;
+  width: 525px;
+
+  line-height: 140%;
+  font-weight: medium;
+  font-size: 13px;
+  color: #1d1d1d;
+`;
+
+const Div2 = styled(Div)`
+  width: 116px;
+  height: 58px;
+  margin-top: 12px;
+  margin-left: 490px;
+
+  & > button {
+    width: 116px;
+    height: 58px;
+    border-radius: 30px;
+    border: none;
+    background-color: #e1e1e1;
+    //background-color: $(props=>props.bg);
+    // background-color: { Next==true ? ${(props) =>
+      (props.bg = "#007B59")} : ${(props) => (props.bg = "#1D1D1D")}};
+
+    font-weight: Bold;
+    font-size: 23px;
+    color: white;
+  }
+`;
+
+const MemberAgree = (props) => {
+  // 체크되었을 때(=true)일 때 Next를 true로 바꿔라(=bg color=녹색)
+
+  const [Next, setNext] = useState(false);
+  const [checked, setChecked] = useState(false);
+
+  // const handleChange = (event) => {()=>
+  //   setChecked(true, event.target.checked);
+  // };
+
+  return (
+    <Div>
+      <Center>
+        <Title1>회원가입</Title1>
+
+        <NavDiv>
+          <Circle></Circle>
+          <Hr />
+          <Circle></Circle>
+          <Hrmid />
+          <ActiveCircle></ActiveCircle>
+          <Hr />
+          <Circle></Circle>
+        </NavDiv>
+
+        <SubDiv>
+          <SubText>본인인증</SubText>
+          <SubText style={{ marginLeft: "40px", marginRight: "111px" }}>
+            정보입력
+          </SubText>
+          <ActivesubText style={{ marginLeft: "80px" }}>약관동의</ActivesubText>
+          <SubText style={{ marginLeft: "40px" }}>가입완료</SubText>
+        </SubDiv>
+
+        <Title2>
+          <div style={{ fontSize: "24px" }}>
+            실제와 일치하는 정보를 입력하셔야 회원가입이 완료됩니다.
+          </div>
+          <div style={{ fontSize: "20px", color: "#939393" }}>
+            *입력하신 정보는 회원가입 여부에만 사용되며 저장되지 않습니다.
+          </div>
+        </Title2>
+
+        {/* 체크되었을 때(=true)일 때 Next를 true로 바꿔라(=bg color=녹색) */}
+
+        <Box>
+          <Content>
+            <SubTitle>
+              <FormControlLabel
+                value="start"
+                control={<Checkbox color="success" />}
+                label="약관동의하기"
+                labelPlacement="start"
+                // onChange={handleChange}
+              />
+            </SubTitle>
+
+            <Div1>{AgreeTerms}</Div1>
+          </Content>
+        </Box>
+        {/* { checked==true ? setNext(true) : setNext(false)} */}
+        {/* { Next==true ? props.bg='#007B59' :  props.bg='#1D1D1D'} */}
+        <Div2>
+          <button variant="contained" bg="#1D1D1D">
+            {/* // style={{width:'116px', height:'58px', marginTop:'12px', marginLeft:'490px', background: 'blue',fontweight:'Bold', fontSize:'23px', borderRadius:'30px'}} disabled */}
+            다음단계
+          </button>
+        </Div2>
+      </Center>
+    </Div>
+  );
+};
+
+export default MemberAgree;
diff --git a/src/Page/SignUp/MemberSuccess.js b/src/Page/SignUp/MemberSuccess.js
new file mode 100644
index 0000000..66966a5
--- /dev/null
+++ b/src/Page/SignUp/MemberSuccess.js
@@ -0,0 +1,180 @@
+import styled from "styled-components";
+import { ReactComponent as Success } from "../../assets/img/memberSuccess.svg";
+
+const Div = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`;
+const Center = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+//페이지 종류
+const Title1 = styled.div`
+  margin-top: 121px;
+  width: 146px;
+  height: 68px;
+
+  font-size: 42px;
+  font-weight: semiBold;
+  color: #4F4747;
+`;
+
+//네비게이션 바
+const NavDiv = styled(Div)`
+   height: 65px;
+    margin-top: 31px;
+`;
+
+const Hr = styled.div`
+    width: 72px;
+    border-top: 3px solid #F2F2F2;
+    margin-top: 23px;
+`;
+
+const Hrmid = styled(Hr)`
+    width: 222px;
+    border-top: 3px solid #F2F2F2;
+    margin-top: 23px;
+`;
+
+const ActiveCircle=styled.div`
+    border-radius: 50px;
+    height: 51px;
+    width: 51px;
+    background-color: #007B59;
+    justify-content: column;
+`;
+
+const Circle=styled(ActiveCircle)`
+    border-radius: 50px;
+    height: 38px;
+    width: 38px;
+    margin-top: 5px;
+    background-color: #F2F2F2;
+`;
+
+const SubDiv = styled(Div)`
+  height: 50px;
+  align-items: row;
+`;
+
+const SubText = styled.div`
+    display: flex;
+    flex-direction: column;
+
+    color: #B5B5B5;
+    font-size: 20px;
+    font-weight: regular;
+`;
+
+const ActivesubText = styled(SubText)`
+    width: 80px;
+    height: 35px;
+
+    color: #007B59;
+    font-size: 20px;
+    font-weight: regular;
+`;
+
+// 주의 문구
+const Title2 = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-around; 
+  flex-direction: column;
+  align-items: center;
+  height: 68px;
+  margin-top: 41px;
+}
+
+  & > div {
+    display: flex;
+    align-items: center;
+    margin-bottom: 21px;
+
+    font-weight: regular;
+    font-size: 24px;
+    color: #1D1D1D;
+    }
+`;
+
+const Box = styled.div`
+  width: 606px;
+  height: 458px;
+  display: flex;
+  justify-content: center;
+  margin-top: 49px;
+
+  border-radius: 30px;
+  border: 1px solid #b5b5b5;
+  font-size: 15px;
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  }
+`;
+
+const Icon=styled.div`
+  width: 175px;
+  height: 175px;
+  margin-top: 124px;
+`;
+
+const Div1 = styled.div`
+  display: flex;
+  align-items: center;
+  height: 68px;
+
+  font-weight: bold;
+  font-size: 24px;
+`;
+
+const MemberSuccess = () => {
+
+  return (
+
+    <Div>
+      <Center>
+        <Title1>회원가입</Title1>
+
+        <NavDiv>
+            <Circle></Circle>
+            <Hr/>
+            <Circle></Circle>
+            <Hrmid/>
+            <Circle></Circle>
+            <Hr/>
+            <ActiveCircle></ActiveCircle>
+        </NavDiv>
+
+        <SubDiv>
+            <SubText>본인인증</SubText>
+            <SubText style={{marginLeft:'40px',marginRight:'111px'}}>정보입력</SubText>
+            <SubText style={{marginLeft:'80px'}}>약관동의</SubText>
+            <ActivesubText style={{marginLeft:'40px'}}>가입완료</ActivesubText>
+        </SubDiv>
+
+        <Title2>
+          <div style={{fontSize:'24px'}}>실제와 일치하는 정보를 입력하셔야 회원가입이 완료됩니다.</div>
+          <div style={{fontSize:'20px', color:'#939393'}}>*입력하신 정보는 회원가입 여부에만 사용되며 저장되지 않습니다.</div>
+        </Title2>
+
+        <Content>
+          <Icon><Success/></Icon>
+          <Div1>가입이 완료되었습니다.</Div1>     
+        </Content>
+        
+      </Center>
+    </Div>
+  );
+};
+
+export default MemberSuccess;
diff --git a/src/Page/SignUp/PhoneAuth.js b/src/Page/SignUp/PhoneAuth.js
new file mode 100644
index 0000000..8d89103
--- /dev/null
+++ b/src/Page/SignUp/PhoneAuth.js
@@ -0,0 +1,279 @@
+import styled from "styled-components";
+import Button from "@mui/material/Button";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import { useNavigate } from "react-router";
+
+const Div = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`;
+const Center = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+//페이지 종류
+const Title1 = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 169px;
+  height: 68px;
+
+  font-size: 42px;
+  font-weight: semiBold;
+  color: #4f4747;
+`;
+
+// 주의 문구
+const Title2 = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 68px;
+  margin-top: 3px;
+
+  & > div {
+    display: flex;
+    align-items: center;
+    margin-bottom: 21px;
+
+    font-weight: regular;
+    font-size: 24px;
+    color: #1d1d1d;
+  }
+`;
+
+const Box = styled.div`
+  width: 792px;
+  height: 500px;
+  display: flex;
+  justify-content: center;
+  //margin-bottom: 174px;
+
+  border-radius: 30px;
+  border: 1px solid #b5b5b5;
+  font-size: 15px;
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const Div1 = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 555px;
+  height: 117px;
+  margin-top: 70px;
+
+  & > p {
+    width: 63px;
+    height: 68px;
+    margin-left: 20px;
+    margin-top: 27px;
+    display: flex;
+    align-items: center;
+
+    font-weight: regular;
+    font-size: 24px;
+    color: #1d1d1d;
+  }
+
+  & > input {
+    margin-top: 43px;
+    //margin-left: 37px;
+    margin-left: 60px;
+    width: 304px;
+    height: 36px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+`;
+
+const Div2 = styled.div`
+  display: flex;
+  flex-direction: row;
+  //width: 555px;
+  height: 60px;
+  margin-top: 20px;
+
+  & > p {
+    height: 68px;
+    margin-left: 40px;
+    margin-right: 10px;
+    margin-top: 2px;
+    display: flex;
+    align-items: center;
+
+    font-weight: regular;
+    font-size: 24px;
+    color: #1d1d1d;
+  }
+
+  & > input {
+    width: 304px;
+    height: 36px;
+    margin-top: 19px;
+    display: flex;
+    align-items: center;
+  }
+
+  & > button {
+    display: flex;
+    margin-top: 19px;
+    margin-left: 13px;
+
+    font-size: 13px;
+    font-weight: bold;
+    border-radius: 15px;
+    background-color: #007b59;
+  }
+`;
+
+const Div3 = styled.div`
+  display: flex;
+  justify-content: row;
+  flex-direction: column;
+  width: 555px;
+  height: 100px;
+
+  & > input {
+    width: 304px;
+    height: 36px;
+    margin-top: 11px;
+    margin-left: 141px;
+
+    display: flex;
+    justify-content: center;
+  }
+
+  // a {
+  //   display: flex;
+  //   flex-direction: row;
+  //   & : visited{
+  //     color: none;
+  //   }
+  // }
+
+  & > div {
+    width: 310px;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+    margin-left: 138px;
+  }
+`;
+
+const A = styled.a`
+  display: flex;
+  flex-direction: row;
+  &:visited {
+    text-decoration: none;
+  }
+`;
+
+const Div4 = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-left: 265px;
+  margin-top: 15px;
+  height: 68px;
+
+  & > button {
+    display: flex;
+    margin-right: 230px;
+
+    font-size: 20px;
+    font-weight: bold;
+  }
+`;
+
+const PhoneAuth = () => {
+  const navigate = useNavigate();
+  return (
+    <Div>
+      <Center>
+        <Title1>핸드폰번호 인증하기</Title1>
+
+        <Title2>
+          <div style={{ fontSize: "20px" }}>
+            핸드폰 인증을 통해 본인인증을 쉽게 하세요.
+          </div>
+        </Title2>
+
+        <Box>
+          <Content>
+            <Div1>
+              <p>성명</p>
+              <input placeholder=""></input>
+            </Div1>
+            <Div2>
+              <p>휴대폰번호</p>
+              <input
+                placeholder=" (-) 없이 입력 (예 01012345678)"
+                type=""
+              ></input>
+
+              <Button
+                variant="contained"
+                style={{
+                  width: "118px",
+                  height: "43px",
+                  backgroundColor: "#007B59",
+                }}
+              >
+                인증번호 발송
+              </Button>
+            </Div2>
+            <Div3>
+              <input placeholder=" 인증번호 입력"></input>
+              <div>
+                <FormControlLabel
+                  value="end"
+                  control={<Checkbox color="success" />}
+                  label="약관동의하기"
+                  labelPlacement="end"
+                />
+
+                <button
+                  style={{
+                    margin: "0px",
+                    backgroundColor: "white",
+                    padding: "0px",
+                    border: "none",
+                  }}
+                  onClick={() => navigate("/sign")}
+                >
+                  | 회원가입
+                </button>
+              </div>
+            </Div3>
+            <Div4>
+              <Button
+                variant="contained"
+                style={{
+                  width: "312px",
+                  height: "42px",
+                  backgroundColor: "#B2B2B2",
+                }}
+              >
+                다음
+              </Button>
+            </Div4>
+          </Content>
+        </Box>
+      </Center>
+    </Div>
+  );
+};
+
+export default PhoneAuth;
diff --git a/src/Page/SignUp/SelfAuth.js b/src/Page/SignUp/SelfAuth.js
new file mode 100644
index 0000000..dc57a3c
--- /dev/null
+++ b/src/Page/SignUp/SelfAuth.js
@@ -0,0 +1,260 @@
+import styled from "styled-components";
+import Button from '@mui/material/Button';
+
+const Div = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`;
+const Center = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+//페이지 종류
+const Title1 = styled.div`
+  font-size: 42px;
+  font-weight: semiBold;
+  color: #4F4747;
+
+  margin-top: 152px;
+  width: 146px;
+  height: 68px;
+`;
+
+//네비게이션 바
+const NavDiv = styled(Div)`
+    height: 65px;
+    margin-top: 31px;
+`;
+
+const Hr = styled.div`
+    width: 72px;
+    border-top: 3px solid #F2F2F2;
+    margin-top: 23px;
+`;
+
+const Hrmid = styled(Hr)`
+    width: 222px;
+    border-top: 3px solid #F2F2F2;
+    margin-top: 23px;
+`;
+
+const ActiveCircle=styled.div`
+    border-radius: 50px;
+    height: 51px;
+    width: 51px;
+    background-color: #007B59;
+    justify-content: column;
+`;
+
+const Circle=styled(ActiveCircle)`
+    border-radius: 50px;
+    height: 38px;
+    width: 38px;
+    margin-top: 5px;
+    background-color: #F2F2F2;
+`;
+
+const SubDiv = styled(Div)`
+  height: 50px;
+  align-items: row;
+`;
+
+const SubText = styled.div`
+    display: flex;
+    flex-direction: column;
+
+    color: #B5B5B5;
+    font-size: 20px;
+    font-weight: regular;
+`;
+
+const ActivesubText = styled(SubText)`
+    width: 80px;
+    height: 35px;
+
+    color: #007B59;
+    font-size: 20px;
+    font-weight: regular;
+`;
+
+// 주의 문구
+const Title2 = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-around; 
+  flex-direction: column;
+  align-items: center;
+  height: 68px;
+  margin-top: 19px;
+}
+
+  & > div {
+    display: flex;
+    align-items: center;
+    margin-bottom: 21px;
+
+    font-weight: regular;
+    font-size: 24px;
+    font-color: #1D1D1D;
+    }
+`;
+
+const Box = styled.div`
+  width: 615px;
+  height: 376px;
+  display: flex;
+  justify-content: center;
+  margin-top: 31px;
+  margin-bottom: 196px;
+  border-radius: 30px;
+  border: 1px solid #b5b5b5;
+  font-size: 15px;
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  }
+`;
+
+const Div1 = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+& > p {
+    margin-left: 41px;
+    margin-top: 116px;
+    display: flex;
+    font-weight: regular;
+    font-size: 24px;
+    font-color: #1D1D1D;
+    width: 60px;
+  }
+
+  & > input {
+    margin-top: 106px;
+    margin-left: 112px;
+    width: 304px;
+    height: 36px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+`;
+const Div2 = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 60px;
+
+  & > p {
+    margin-left: 41px;
+    margin-top: 20px;
+    display: flex;
+    font-weight: regular;
+    font-size: 24px;
+    font-color: #1D1D1D;
+    width: 147px;
+    height:68px;
+  }
+
+  & > input {
+    margin-top: 13.5px;
+    margin-left: 22px;
+    width: 304px;
+    height: 36px;
+    display: flex;
+    flex-direction: col;
+    justify-content: center;
+  }
+`;
+
+const Div3 = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-left: 325px;
+  margin-top: 49px;
+  width: 230px;
+  height: 68px;
+
+  & > p {
+    margin-top: 20px;
+    //margin-left: 200px;
+    display: flex;
+    font-weight: regular;
+    font-size: 15px;
+    font-color: #1D1D1D;
+  }
+
+  & > button {
+    display: flex;
+    margin-top: 10px;
+    margin-left: 13px;
+
+    font-size: 13px;
+    font-weight: bold;
+    border-radius: 15px;
+    background-color: #007B59;
+  }
+`;
+
+const Link=styled.div`
+
+`;
+
+const SelfAuth = () => {
+  return (
+    <Div>
+      <Center>
+        <Title1>회원가입</Title1>
+
+        <NavDiv>
+            <ActiveCircle></ActiveCircle>
+            <Hr/>
+            <Circle></Circle>
+            <Hrmid/>
+            <Circle></Circle>
+            <Hr/>
+            <Circle></Circle>
+        </NavDiv>
+
+        <SubDiv>
+            <ActivesubText>본인인증</ActivesubText>
+            <SubText style={{marginLeft:'40px',marginRight:'111px'}}>정보입력</SubText>
+            <SubText style={{marginLeft:'80px'}}>약관동의</SubText>
+            <SubText style={{marginLeft:'40px'}}>가입완료</SubText>
+        </SubDiv>
+
+        <Title2>
+          <div style={{fontSize:'24px'}}>실제와 일치하는 정보를 입력하셔야 회원가입이 완료됩니다.</div>
+          <div style={{fontSize:'20px', color:'#939393'}}>*입력하신 정보는 회원가입 여부에만 사용되며 저장되지 않습니다.</div>
+        </Title2>
+
+        <Box>
+          <Content>
+              <Div1 >
+               <p>성명</p>
+               <input placeholder="이름"></input>   
+              </Div1>    
+              <Div2 >
+                <p>법적생년월일</p>
+                <input placeholder="nnnn-nn-nn"></input>
+              </Div2>
+              <Div3 >
+                <p>본인인증하러가기</p>
+                <Button variant="contained" style={{width:"96px", height:"37px", backgroundColor:'#007B59'}}>
+                  <Link to="./PhoneAuth">본인인증</Link>
+                </Button>
+              </Div3>
+          </Content>
+        </Box>
+      </Center>
+    </Div>
+  );
+};
+export default SelfAuth;
diff --git a/src/assets/img/memberSuccess.svg b/src/assets/img/memberSuccess.svg
new file mode 100644
index 0000000..341e731
--- /dev/null
+++ b/src/assets/img/memberSuccess.svg
@@ -0,0 +1,10 @@
+
+<svg width="175" height="175" 
+viewBox="0 0 175 175" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+<circle cx="87.5" cy="87.5" r="87.5" fill="#F0C101"/>
+
+<path d="M43 81.5L80.5 120.5L146 55" 
+stroke="white" stroke-width="7" stroke-linecap="round"/>
+
+</svg>