diff --git a/.eslintrc.json b/.eslintrc.json
index f3acca8a..99c267f6 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -22,5 +22,8 @@
     "project": "./tsconfig.json"
   },
   "plugins": ["react", "@typescript-eslint"],
-  "rules": {}
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-shadow": "off"
+  }
 }
diff --git a/package-lock.json b/package-lock.json
index 03b0acf1..c0a6d767 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,10 @@
       "name": "langchat",
       "version": "0.1.0",
       "dependencies": {
+        "@emotion/react": "^11.11.1",
+        "@emotion/styled": "^11.11.0",
+        "@mui/icons-material": "^5.14.16",
+        "@mui/material": "^5.14.17",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -16,6 +20,7 @@
         "@types/react": "^18.2.36",
         "@types/react-dom": "^18.2.14",
         "@types/react-router-dom": "^5.3.3",
+        "axios": "^1.6.0",
         "firebase": "^10.5.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -2295,6 +2300,75 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "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.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+    },
+    "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/babel-plugin/node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/cache/node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
     "node_modules/@emotion/is-prop-valid": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
@@ -2308,11 +2382,91 @@
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
       "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
     },
+    "node_modules/@emotion/react": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz",
+      "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz",
+      "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz",
+      "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/is-prop-valid": "^1.2.1",
+        "@emotion/serialize": "^1.1.2",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@emotion/unitless": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
       "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
     },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -2900,6 +3054,40 @@
       "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.10.3.tgz",
       "integrity": "sha512-+ZplYUN3HOpgCfgInqgdDAbkGGVzES1cs32JJpeqoh87SkRobGXElJx+1GZSaDqzFL+bYiX18qEcBK76mYs8uA=="
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
+      "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "dependencies": {
+        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.2.tgz",
+      "integrity": "sha512-5qhlDvjaLmAst/rKb3VdlCinwTF4EYMiVxuuc/HVUjs46W0zgtbMmAZ1UTsDrRTxRmUEzl92mOtWbeeXL26lSQ==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
+      "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
+    },
     "node_modules/@grpc/grpc-js": {
       "version": "1.9.9",
       "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.9.tgz",
@@ -3722,6 +3910,261 @@
       "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-beta.23",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.23.tgz",
+      "integrity": "sha512-9L8SQUGAWtd/Qi7Qem26+oSSgpY7f2iQTuvcz/rsGpyZjSomMMO6lwYeQSA0CpWM7+aN7eGoSY/WV6wxJiIxXw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@floating-ui/react-dom": "^2.0.2",
+        "@mui/types": "^7.2.8",
+        "@mui/utils": "^5.14.17",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.0.0",
+        "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",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "5.14.17",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.17.tgz",
+      "integrity": "sha512-eE0uxrpJAEL2ZXkeGLKg8HQDafsiXY+6eNpP4lcv3yIjFfGbU6Hj9/P7Adt8jpU+6JIhmxvILGj2r27pX+zdrQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      }
+    },
+    "node_modules/@mui/icons-material": {
+      "version": "5.14.16",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.16.tgz",
+      "integrity": "sha512-wmOgslMEGvbHZjFLru8uH5E+pif/ciXAvKNw16q6joK6EWVWU5rDYWFknDaZhCvz8ZE/K8ZnJQ+lMG6GgHzXbg==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      },
+      "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.14.17",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.17.tgz",
+      "integrity": "sha512-+y0VeOLWfEA4Z98We/UH6KCo8+f2HLZDK45FY+sJf8kSojLy3VntadKtC/u0itqnXXb1Pr4wKB2tSIBW02zY4Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@mui/base": "5.0.0-beta.23",
+        "@mui/core-downloads-tracker": "^5.14.17",
+        "@mui/system": "^5.14.17",
+        "@mui/types": "^7.2.8",
+        "@mui/utils": "^5.14.17",
+        "@types/react-transition-group": "^4.4.8",
+        "clsx": "^2.0.0",
+        "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.14.17",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.17.tgz",
+      "integrity": "sha512-u4zxsCm9xmQrlhVPug+Ccrtsjv7o2+rehvrgHoh0siSguvVgVQq5O3Hh10+tp/KWQo2JR4/nCEwquSXgITS1+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@mui/utils": "^5.14.17",
+        "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.14.17",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.17.tgz",
+      "integrity": "sha512-AqpVjBEA7wnBvKPW168bNlqB6EN7HxTjLOY7oi275AzD/b1C7V0wqELy6NWoJb2yya5sRf7ENf4iNi3+T5cOgw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@emotion/cache": "^11.11.0",
+        "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.14.17",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.17.tgz",
+      "integrity": "sha512-Ccz3XlbCqka6DnbHfpL3o3TfOeWQPR+ewvNAgm8gnS9M0yVMmzzmY6z0w/C1eebb+7ZP7IoLUj9vojg/GBaTPg==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@mui/private-theming": "^5.14.17",
+        "@mui/styled-engine": "^5.14.17",
+        "@mui/types": "^7.2.8",
+        "@mui/utils": "^5.14.17",
+        "clsx": "^2.0.0",
+        "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.8",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.8.tgz",
+      "integrity": "sha512-9u0ji+xspl96WPqvrYJF/iO+1tQ1L5GTaDOeG3vCR893yy7VcWwRNiVMmPdPNpMDqx0WV1wtEW9OMwK9acWJzQ==",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.14.17",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.14.17.tgz",
+      "integrity": "sha512-yxnWgSS4J6DMFPw2Dof85yBkG02VTbEiqsikymMsnZnXDurtVGTIhlNuV24GTmFTuJMzEyTTU9UF+O7zaL8LEQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@types/prop-types": "^15.7.9",
+        "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"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "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/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",
@@ -3861,6 +4304,15 @@
         }
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@protobufjs/aspromise": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
@@ -4846,6 +5298,14 @@
         "@types/react-router": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.8",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.8.tgz",
+      "integrity": "sha512-QmQ22q+Pb+HQSn04NL3HtrqHwYMf4h3QKArOy5F8U5nEVMaihBs3SR10WiOM1iwPz5jIo8x/u11al+iEGZZrvg==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -6060,6 +6520,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.0.tgz",
+      "integrity": "sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -6803,6 +7286,14 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -7898,6 +8389,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",
@@ -9313,6 +9813,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",
@@ -9988,7 +10493,6 @@
       "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==",
-      "dev": true,
       "dependencies": {
         "react-is": "^16.7.0"
       }
@@ -9996,8 +10500,7 @@
     "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==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/hoopy": {
       "version": "0.1.4",
@@ -15619,6 +16122,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -16169,6 +16677,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",
diff --git a/package.json b/package.json
index 080c9b4e..93cf077c 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.17",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -11,6 +15,7 @@
     "@types/react": "^18.2.36",
     "@types/react-dom": "^18.2.14",
     "@types/react-router-dom": "^5.3.3",
+    "axios": "^1.6.0",
     "firebase": "^10.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/public/index.html b/public/index.html
index aa069f27..c4aca94f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,13 +1,16 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
+    <meta name="description" content="Web site created using create-react-app" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Bungee&family=Noto+Sans+KR:wght@300;400;700&display=swap"
+      rel="stylesheet"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
diff --git a/public/logo-horizontal-w.png b/public/logo-horizontal-w.png
new file mode 100644
index 00000000..90cd9f44
Binary files /dev/null and b/public/logo-horizontal-w.png differ
diff --git a/public/logo-horizontal.png b/public/logo-horizontal.png
new file mode 100644
index 00000000..09724a66
Binary files /dev/null and b/public/logo-horizontal.png differ
diff --git a/public/logo-square-w.png b/public/logo-square-w.png
new file mode 100644
index 00000000..76e7c68d
Binary files /dev/null and b/public/logo-square-w.png differ
diff --git a/public/logo-square.png b/public/logo-square.png
new file mode 100644
index 00000000..7c739b94
Binary files /dev/null and b/public/logo-square.png differ
diff --git a/public/mobile-app-bg.jpg b/public/mobile-app-bg.jpg
new file mode 100644
index 00000000..57fdee45
Binary files /dev/null and b/public/mobile-app-bg.jpg differ
diff --git a/src/App.tsx b/src/App.tsx
index 0145aead..1859dbcb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,7 +2,9 @@ import React from 'react';
 import './App.css';
 import { Route, Routes } from 'react-router-dom';
 import Layout from './components/common/Layout';
-import Auth from './components/auth';
+import SignIn from './pages/auth/SignIn';
+import SignUp from './pages/auth/SignUp';
+import AuthLayout from './components/common/AuthLayout';
 
 function App() {
   return (
@@ -14,11 +16,12 @@ function App() {
         <Route path="/mypage" />
         {/* 홍규님 부분 */}
         <Route path="chat" />
+      </Route>
+      <Route element={<AuthLayout />}>
         {/* 성겸 부분 */}
-        <Route index element={<Auth />} />
+        <Route index element={<SignIn />} />
+        <Route path="signup" element={<SignUp />} />
       </Route>
-
-      
     </Routes>
   );
 }
diff --git a/src/atoms.ts b/src/atoms.ts
new file mode 100644
index 00000000..cedadb4a
--- /dev/null
+++ b/src/atoms.ts
@@ -0,0 +1,7 @@
+/* eslint-disable import/prefer-default-export */
+import { atom } from 'recoil';
+
+export const accessTokenState = atom({
+  key: 'accessTokenState', // unique ID (with respect to other atoms/selectors)
+  default: localStorage.getItem('accessToken'), // default value (aka initial value)
+});
diff --git a/src/components/auth/SignUpForm.tsx b/src/components/auth/SignUpForm.tsx
new file mode 100644
index 00000000..a32ae32a
--- /dev/null
+++ b/src/components/auth/SignUpForm.tsx
@@ -0,0 +1,77 @@
+import { Button, TextField } from '@mui/material';
+import React, { useState } from 'react';
+import { publicApi } from '../../libs/axios';
+
+interface RequestBody {
+  id: string; // 사용자 아이디 (필수!, 영어만)
+  password: string; // 사용자 비밀번호, 5자 이상 (필수!)
+  name: string; // 사용자 이름, 20자 이하 (필수!)
+  picture?: string; // 사용자 이미지(url or base64, under 1MB)
+}
+
+function SignUpForm() {
+  const [uid, setUid] = useState('');
+  const [name, setName] = useState('');
+  const [password, setPassword] = useState('');
+  const [password2, setPassword2] = useState('');
+
+  const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    publicApi.post('signup', {
+      id: uid,
+      password,
+      name,
+    } as RequestBody);
+    // .then((response) => {
+    //   console.log(response);
+    // });
+  };
+
+  return (
+    <form onSubmit={onSubmit}>
+      <div>
+        <TextField
+          variant="outlined"
+          label="아이디"
+          value={uid}
+          onChange={(e) => setUid(e.target.value)}
+          margin="normal"
+          autoComplete="off"
+        />
+      </div>
+      <div>
+        <TextField
+          variant="outlined"
+          label="닉네임"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          margin="normal"
+          autoComplete="off"
+        />
+      </div>
+      <div>
+        <TextField
+          variant="outlined"
+          label="비밀번호"
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          margin="normal"
+        />
+      </div>
+      <div>
+        <TextField
+          variant="outlined"
+          label="비밀번호 확인"
+          type="password"
+          value={password2}
+          onChange={(e) => setPassword2(e.target.value)}
+          margin="normal"
+        />
+      </div>
+      <Button type="submit">다음단계</Button>
+    </form>
+  );
+}
+
+export default SignUpForm;
diff --git a/src/components/common/AuthLayout.tsx b/src/components/common/AuthLayout.tsx
new file mode 100644
index 00000000..129b8277
--- /dev/null
+++ b/src/components/common/AuthLayout.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { Box, Typography, Grid } from '@mui/material';
+import { Link, Outlet } from 'react-router-dom';
+import { AuthContainer } from '../../styles/AuthStyles';
+
+function AuthLayout() {
+  return (
+    <Box
+      component="main"
+      sx={{
+        display: 'flex',
+        flex: '1 1 auto',
+        minHeight: '100vh',
+      }}
+    >
+      <Grid container sx={{ flex: '1 1 auto' }}>
+        <Grid
+          item
+          xs={12}
+          lg={6}
+          sx={{
+            backgroundColor: 'background.paper',
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+          }}
+        >
+          <Box sx={{ p: 3 }}>
+            <Typography variant="h1" sx={{ fontSize: '2rem', color: 'primary.main', fontFamily: 'Bungee' }}>
+              <Link to="/">Langchat</Link>
+            </Typography>
+          </Box>
+
+          <AuthContainer>
+            <Outlet />
+          </AuthContainer>
+        </Grid>
+        <Grid
+          item
+          xs={12}
+          lg={6}
+          sx={{
+            alignItems: 'center',
+            backgroundColor: 'primary.main',
+            color: 'white',
+            display: { xs: 'none', lg: 'flex' },
+            justifyContent: 'center',
+            position: 'relative',
+            '& img': {
+              maxWidth: '100%',
+            },
+            '&::before': {
+              content: '""',
+              display: 'block',
+              position: 'absolute',
+              left: 0,
+              top: 0,
+              width: '100%',
+              height: '100%',
+              opacity: 0.4,
+              background: 'url(mobile-app-bg.jpg) 50% 50%/cover no-repeat',
+            },
+          }}
+        >
+          <Box sx={{ p: 3, position: 'relative' }}>
+            <Typography
+              align="center"
+              color="inherit"
+              sx={{
+                fontSize: '24px',
+                lineHeight: '32px',
+                mb: 1,
+              }}
+              variant="h1"
+            >
+              새로운 언어를 알아가는 즐거움 <br />
+              <Box component="a" sx={{ color: '#15B79E' }} target="_blank">
+                Langchat
+              </Box>
+            </Typography>
+            {/* <span>
+              사진:{' '}
+              <a href="https://unsplash.com/ko/%EC%82%AC%EC%A7%84/%ED%9D%B0%EC%83%89%EA%B3%BC-%EB%85%B9%EC%83%89-%EC%9B%90%EA%B2%A9-%EC%A0%9C%EC%96%B4-zs-41Br0WhQ?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">
+                Unsplash
+              </a>
+              의
+              <a href="https://unsplash.com/ko/@ademay?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">
+                Adem AY
+              </a>
+            </span> */}
+          </Box>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}
+
+export default AuthLayout;
diff --git a/src/components/common/Layout.tsx b/src/components/common/Layout.tsx
index a22cf7fb..6e563a81 100644
--- a/src/components/common/Layout.tsx
+++ b/src/components/common/Layout.tsx
@@ -1,14 +1,31 @@
-import React from 'react'
-import { Outlet } from 'react-router-dom'
-import Sidebar from './Sidebar'
+import React from 'react';
+import { Grid } from '@mui/material';
+import { Outlet } from 'react-router-dom';
+import Sidebar from './Sidebar';
 
 function Layout() {
   return (
-    <>
-      <Sidebar />
-      <Outlet />
-    </>
-  )
+    <Grid
+      container
+      sx={{
+        minHeight: '100vh',
+      }}
+    >
+      <Grid
+        item
+        xs={0}
+        sm={2}
+        sx={{
+          display: { xs: 'none', sm: 'block' },
+        }}
+      >
+        <Sidebar />
+      </Grid>
+      <Grid item xs={12} sm={10}>
+        <Outlet />
+      </Grid>
+    </Grid>
+  );
 }
 
-export default Layout
\ No newline at end of file
+export default Layout;
diff --git a/src/components/common/Sidebar.tsx b/src/components/common/Sidebar.tsx
index 8bfebc89..8bb02631 100644
--- a/src/components/common/Sidebar.tsx
+++ b/src/components/common/Sidebar.tsx
@@ -1,9 +1,72 @@
-import React from 'react'
+import React, { useMemo } from 'react';
+import { Avatar, Box, Divider, Typography } from '@mui/material';
+import { Home, Message, SportsEsports, Person } from '@mui/icons-material';
+import { Link, useLocation } from 'react-router-dom';
+import {
+  SidebarLogo,
+  SidebarContainer,
+  SidebarNavWrap,
+  SidebarNavListItem,
+  StyledBadge,
+} from '../../styles/SidebarStyles';
 
 function Sidebar() {
+  const { pathname } = useLocation();
+
   return (
-    <div>Sidebar</div>
-  )
+    <SidebarContainer>
+      <Box
+        sx={{
+          padding: '1.6rem',
+        }}
+      >
+        <Typography variant="h1" sx={{ fontSize: '2rem', color: 'white', mt: 2, mb: 4, fontFamily: 'Bungee' }}>
+          <Link to="/">Langchat</Link>
+        </Typography>
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: 2,
+            backgroundColor: 'rgba(255, 255, 255, 0.04)',
+            padding: '1rem',
+            borderRadius: 2,
+            color: '#fff',
+          }}
+        >
+          <StyledBadge overlap="circular" anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} variant="dot">
+            <Avatar />
+          </StyledBadge>
+          유저 이름
+        </Box>
+      </Box>
+      <Divider sx={{ borderColor: 'rgba(255, 255, 255, 0.04)' }} />
+      <SidebarNavWrap>
+        <ul>
+          <SidebarNavListItem isActive={pathname === '/home'}>
+            <Link to="/home">
+              <Home /> 홈
+            </Link>
+          </SidebarNavListItem>
+          <SidebarNavListItem isActive={pathname === '/chat'}>
+            <Link to="/chat">
+              <Message /> 메시지
+            </Link>
+          </SidebarNavListItem>
+          <SidebarNavListItem isActive={pathname === '/game'}>
+            <Link to="/game">
+              <SportsEsports /> 게임
+            </Link>
+          </SidebarNavListItem>
+          <SidebarNavListItem isActive={pathname === '/profile'}>
+            <Link to="/profile">
+              <Person /> 프로필
+            </Link>
+          </SidebarNavListItem>
+        </ul>
+      </SidebarNavWrap>
+    </SidebarContainer>
+  );
 }
 
-export default Sidebar
\ No newline at end of file
+export default Sidebar;
diff --git a/src/index.css b/src/index.css
index 7323ae85..b2ee2080 100644
--- a/src/index.css
+++ b/src/index.css
@@ -9,3 +9,17 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
+
+#root img {
+  max-width: 100%;
+}
+ul,
+ol {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
diff --git a/src/index.tsx b/src/index.tsx
index b1a2d2a1..fc150840 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,19 +1,23 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { ThemeProvider } from '@mui/material/styles';
 import './index.css';
 import { BrowserRouter } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import theme from './libs/mui';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
   <React.StrictMode>
-    <RecoilRoot>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    </RecoilRoot>
+    <ThemeProvider theme={theme}>
+      <RecoilRoot>
+        <BrowserRouter>
+          <App />
+        </BrowserRouter>
+      </RecoilRoot>
+    </ThemeProvider>
   </React.StrictMode>,
 );
 
diff --git a/src/libs/axios.ts b/src/libs/axios.ts
new file mode 100644
index 00000000..dfe0f437
--- /dev/null
+++ b/src/libs/axios.ts
@@ -0,0 +1,54 @@
+import axios from 'axios';
+
+export const publicApi = axios.create({
+  baseURL: 'https://fastcampus-chat.net/',
+  headers: {
+    'content-type': 'application/json',
+    serverId: '9b9a6496',
+  },
+});
+
+export const privateApi = axios.create({
+  baseURL: 'https://fastcampus-chat.net/',
+  headers: {
+    'content-type': 'application/json',
+    serverId: '9b9a6496',
+    Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
+  },
+});
+
+// 토큰을 함께보내는 privateApi에 interceptor를 적용합니다
+privateApi.interceptors.response.use(
+  // 200번대 응답이 올때 처리
+  (response) => response,
+  // 200번대 응답이 아닐 경우 처리
+  async (error) => {
+    const originalConfig = error.config;
+    // const msg = error.response.data.message;
+    const { status } = error.response;
+
+    if (status === 401) {
+      // if (msg === 'access token expired') {
+      await axios({
+        url: `https://fastcampus-chat.net/refresh`,
+        method: 'POST',
+        headers: {
+          'content-type': 'application/json',
+          serverId: '9b9a6496',
+          Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
+        },
+        data: {
+          refreshToken: localStorage.getItem('refreshToken'),
+        },
+      }).then((res) => {
+        localStorage.setItem('accessToken', res.data.accessToken);
+        originalConfig.headers.Authorization = `Bearer ${res.data.accessToken}`;
+        return publicApi(originalConfig);
+      });
+      // }
+    } else if (status === 400 || status === 404 || status === 409) {
+      // window.alert(msg);
+    }
+    return Promise.reject(error);
+  },
+);
diff --git a/src/libs/mui.ts b/src/libs/mui.ts
new file mode 100644
index 00000000..bc67f11c
--- /dev/null
+++ b/src/libs/mui.ts
@@ -0,0 +1,24 @@
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  typography: {
+    fontFamily: [
+      // 'Bungee',
+      '"Noto Sans KR"',
+      'sans-serif',
+      '"Apple Color Emoji"',
+      '"Segoe UI Emoji"',
+      '"Segoe UI Symbol"',
+    ].join(','),
+  },
+  palette: {
+    primary: {
+      main: '#1D3557',
+    },
+    secondary: {
+      main: '#A8DADC',
+    },
+  },
+});
+
+export default theme;
diff --git a/src/pages/auth/SignIn.tsx b/src/pages/auth/SignIn.tsx
new file mode 100644
index 00000000..96b91b81
--- /dev/null
+++ b/src/pages/auth/SignIn.tsx
@@ -0,0 +1,75 @@
+import axios from 'axios';
+import { Box, Button, Container, TextField, Typography, Link as MuiLink } from '@mui/material';
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { publicApi } from '../../libs/axios';
+
+interface ResponseValue {
+  accessToken: string; // 사용자 접근 토큰
+  refreshToken: string; // access token 발급용 토큰
+}
+
+function SignIn() {
+  const [uid, setUid] = useState('');
+  const [password, setPassword] = useState('');
+  const [errorMsg, setErrorMsg] = useState('');
+
+  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    try {
+      const res = await publicApi.post<ResponseValue>('login', {
+        id: uid,
+        password,
+      });
+
+      localStorage.setItem('accessToken', res.data.accessToken);
+      localStorage.setItem('refreshToken', res.data.refreshToken);
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        // axios에서 발생한 error
+        if (error.code === 'ERR_BAD_REQUEST') {
+          setErrorMsg('아이디 혹은 비밀번호를 잘못 입력하셨습니다.');
+        }
+      }
+    }
+  };
+
+  return (
+    <Container sx={{ height: '100%' }}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          minHeight: '80%',
+        }}
+      >
+        <Box component="form" noValidate autoComplete="off" onSubmit={onSubmit}>
+          <Typography variant="h4">로그인</Typography>
+          <Typography color="text.secondary" variant="body1" sx={{ my: 3 }}>
+            계정이 없으신가요? &nbsp;
+            <MuiLink component={Link} to="/signup" underline="hover" variant="subtitle2">
+              회원가입
+            </MuiLink>
+          </Typography>
+          <TextField fullWidth label="아이디" value={uid} onChange={(e) => setUid(e.target.value)} margin="normal" />
+          <TextField
+            fullWidth
+            type="password"
+            label="비밀번호"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            margin="normal"
+          />
+          <p>{errorMsg}</p>
+          <Button fullWidth type="submit" size="large" variant="contained" sx={{ mt: 3 }}>
+            로그인
+          </Button>
+        </Box>
+      </Box>
+    </Container>
+  );
+}
+
+export default SignIn;
diff --git a/src/pages/auth/SignUp.tsx b/src/pages/auth/SignUp.tsx
new file mode 100644
index 00000000..ebfcd47b
--- /dev/null
+++ b/src/pages/auth/SignUp.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Container } from '@mui/material';
+import SignUpForm from '../../components/auth/SignUpForm'
+
+function SignUp() {
+  return (
+    <Container>
+      <SignUpForm />
+    </Container>
+  )
+}
+
+export default SignUp
\ No newline at end of file
diff --git a/src/styles/AuthStyles.ts b/src/styles/AuthStyles.ts
new file mode 100644
index 00000000..72464fdd
--- /dev/null
+++ b/src/styles/AuthStyles.ts
@@ -0,0 +1,13 @@
+/* eslint-disable import/prefer-default-export */
+import { styled } from '@mui/material';
+
+export const AuthContainer = styled('div')({
+  maxWidth: '640px',
+  margin: '0 auto',
+  height: '100%',
+});
+
+export const AuthBgWrap = styled('div')({
+  maxWidth: '480px',
+  margin: '0 auto',
+});
diff --git a/src/styles/SidebarStyles.ts b/src/styles/SidebarStyles.ts
new file mode 100644
index 00000000..a727ddc4
--- /dev/null
+++ b/src/styles/SidebarStyles.ts
@@ -0,0 +1,61 @@
+import Badge from '@mui/material/Badge';
+import { styled } from '@mui/material/styles';
+
+export const SidebarLogo = styled('h1')`
+  width: 140px;
+  margin: 0 0 20px;
+`;
+
+export const SidebarContainer = styled('div')`
+  background-color: #1d3557;
+  height: 100%;
+`;
+
+type ListItemProps = {
+  isActive?: boolean;
+};
+
+export const SidebarNavListItem = styled('li')<ListItemProps>(({ isActive = false }) => ({
+  alignItems: 'center',
+  borderRadius: 10,
+  display: 'flex',
+  justifyContent: 'flex-start',
+  padding: '6px 16px',
+  marginBottom: '10px',
+  backgroundColor: isActive ? 'rgba(255, 255, 255, 0.04)' : 'transparent',
+  '&:hover': {
+    backgroundColor: 'rgba(255, 255, 255, 0.04)',
+  },
+  svg: {
+    verticalAlign: 'top',
+    color: isActive ? '#457b9d' : 'rgba(255, 255, 255, 0.4)',
+  },
+  a: {
+    width: '100%',
+    display: 'block',
+    color: isActive ? '#fff' : 'rgba(255, 255, 255, 0.7)',
+    padding: '6px 0',
+  },
+}));
+
+export const SidebarNavWrap = styled('nav')`
+  padding: 1rem;
+`;
+
+export const StyledBadge = styled(Badge)(({ theme }) => ({
+  '& .MuiBadge-badge': {
+    backgroundColor: '#44b700',
+    color: '#44b700',
+    boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
+    '&::after': {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      borderRadius: '50%',
+      border: '1px solid currentColor',
+      content: '""',
+    },
+  },
+}));
diff --git a/src/types/User.ts b/src/types/User.ts
new file mode 100644
index 00000000..a95f7084
--- /dev/null
+++ b/src/types/User.ts
@@ -0,0 +1,7 @@
+export interface User {
+  id: string;
+  password: string;
+  name: string;
+  picture: string;
+  chats: string[]; // chat id만 속합니다.
+}