diff --git a/.eslintrc.js b/.eslintrc.js
index cb854af6..8ba45437 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -30,6 +30,8 @@ module.exports = {
     'react/jsx-props-no-spreading': 'off',
     'no-use-before-define': 'off',
     '@typescript-eslint/no-use-before-define': ['off'],
+    'react/require-default-props': 'off',
+    'react/self-closing-comp': 'off',
   },
   settings: {
     react: {
diff --git a/package-lock.json b/package-lock.json
index 1df42c85..9fb61474 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,12 +23,14 @@
         "axios": "^1.7.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
-        "lucide-react": "^0.407.0",
+        "lucide-react": "^0.402.0",
         "next": "14.2.4",
         "qs": "^6.12.2",
         "react": "^18",
         "react-dom": "^18",
         "react-hook-form": "^7.52.1",
+        "react-toastify": "^10.0.5",
+        "sharp": "^0.33.4",
         "tailwind-merge": "^2.4.0",
         "tailwindcss-animate": "^1.0.7",
         "zod": "^3.23.8"
@@ -75,6 +77,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.2.0.tgz",
+      "integrity": "sha512-bV21/9LQmcQeCPEg3BDFtvwL6cwiTMksYNWQQ4KOxCZikEGalWtenoZ0wCiukJINlGCIi2KXx01g4FoH/LxpzQ==",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "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",
@@ -252,6 +263,437 @@
       "deprecated": "Use @eslint/object-schema instead",
       "dev": true
     },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.4.tgz",
+      "integrity": "sha512-p0suNqXufJs9t3RqLBO6vvrgr5OhgbWp76s5gTRvdmxmuv9E1rcaqGUsl3l4mKVmXPkTkTErXediAui4x+8PSA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.4.tgz",
+      "integrity": "sha512-0l7yRObwtTi82Z6ebVI2PnHT8EB2NxBgpK2MiKJZJ7cz32R4lxd001ecMhzzsZig3Yv9oclvqqdV93jo9hy+Dw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.2.tgz",
+      "integrity": "sha512-tcK/41Rq8IKlSaKRCCAuuY3lDJjQnYIW1UXU1kxcEKrfL8WR7N6+rzNoOxoQRJWTAECuKwgAHnPvqXGN8XfkHA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "macos": ">=11",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.2.tgz",
+      "integrity": "sha512-Ofw+7oaWa0HiiMiKWqqaZbaYV3/UGL2wAPeLuJTx+9cXpCRdvQhCLG0IH8YGwM0yGWGLpsF4Su9vM1o6aer+Fw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "macos": ">=10.13",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.2.tgz",
+      "integrity": "sha512-iLWCvrKgeFoglQxdEwzu1eQV04o8YeYGFXtfWU26Zr2wWT3q3MTzC+QTCO3ZQfWd3doKHT4Pm2kRmLbupT+sZw==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.2.tgz",
+      "integrity": "sha512-x7kCt3N00ofFmmkkdshwj3vGPCnmiDh7Gwnd4nUwZln2YjqPxV1NlTyZOvoDWdKQVDL911487HOueBvrpflagw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.2.tgz",
+      "integrity": "sha512-cmhQ1J4qVhfmS6szYW7RT+gLJq9dH2i4maq+qyXayUSn9/3iY2ZeWpbAgSpSVbV2E1JUL2Gg7pwnYQ1h8rQIog==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.2.tgz",
+      "integrity": "sha512-E441q4Qdb+7yuyiADVi5J+44x8ctlrqn8XgkDTwr4qPJzWkaHwD489iZ4nGDgcuya4iMN3ULV6NwbhRZJ9Z7SQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.2.tgz",
+      "integrity": "sha512-3CAkndNpYUrlDqkCM5qhksfE+qSIREVpyoeHIU6jd48SJZViAmznoQQLAv4hVXF7xyUB9zf+G++e2v1ABjCbEQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.2.tgz",
+      "integrity": "sha512-VI94Q6khIHqHWNOh6LLdm9s2Ry4zdjWJwH56WoiJU7NTeDwyApdZZ8c+SADC8OH98KWNQXnE01UdJ9CSfZvwZw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.4.tgz",
+      "integrity": "sha512-RUgBD1c0+gCYZGCCe6mMdTiOFS0Zc/XrN0fYd6hISIKcDUbAW5NtSQW9g/powkrXYm6Vzwd6y+fqmExDuCdHNQ==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.28",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.4.tgz",
+      "integrity": "sha512-2800clwVg1ZQtxwSoTlHvtm9ObgAax7V6MTAB/hDT945Tfyy3hVkmiHpeLPCKYqYR1Gcmv1uDZ3a4OFwkdBL7Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.4.tgz",
+      "integrity": "sha512-h3RAL3siQoyzSoH36tUeS0PDmb5wINKGYzcLB5C6DIiAn2F3udeFAum+gj8IbA/82+8RGCTn7XW8WTFnqag4tQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.31",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.4.tgz",
+      "integrity": "sha512-GoR++s0XW9DGVi8SUGQ/U4AeIzLdNjHka6jidVwapQ/JebGVQIpi52OdyxCNVRE++n1FCLzjDovJNozif7w/Aw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "glibc": ">=2.26",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.4.tgz",
+      "integrity": "sha512-nhr1yC3BlVrKDTl6cO12gTpXMl4ITBUZieehFvMntlCXFzH2bvKG76tBL2Y/OqhupZt81pR7R+Q5YhJxW0rGgQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.4.tgz",
+      "integrity": "sha512-uCPTku0zwqDmZEOi4ILyGdmW76tH7dm8kKlOIV1XC5cLyJ71ENAAqarOHQh0RLfpIpbV5KOpXzdU6XkJtS0daw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "musl": ">=1.2.2",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.2"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.4.tgz",
+      "integrity": "sha512-Bmmauh4sXUsUqkleQahpdNXKvo+wa1V9KhT2pDA4VJGKwnKMJXiSTGphn0gnJrlooda0QxCtXc6RX1XAU6hMnQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.1.1"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.4.tgz",
+      "integrity": "sha512-99SJ91XzUhYHbx7uhK3+9Lf7+LjwMGQZMDlO/E/YVJ7Nc3lyDFZPGhjwiYdctoH2BOzW9+TnfqcaMKt0jHLdqw==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.4.tgz",
+      "integrity": "sha512-3QLocdTRVIrFNye5YocZl+KKpYKP+fksi1QhmOArgx7GyhIbQp/WrJRu176jm8IxromS7RIkzMiMINVdBtC8Aw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
+        "npm": ">=9.6.5",
+        "pnpm": ">=7.1.0",
+        "yarn": ">=3.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -2302,6 +2744,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2318,6 +2772,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -2541,6 +3004,14 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
+      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/detect-node-es": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
@@ -4156,6 +4627,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/is-async-function": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
@@ -4686,7 +5162,8 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
     },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
@@ -4801,9 +5278,9 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.407.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.407.0.tgz",
-      "integrity": "sha512-+dRIu9Sry+E8wPF9+sY5eKld2omrU4X5IKXxrgqBt+o11IIHVU0QOfNoVWFuj0ZRDrxr4Wci26o2mKZqLGE0lA==",
+      "version": "0.402.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.402.0.tgz",
+      "integrity": "sha512-V2ModWMXzoZbQy4dhVUY4snrOplw+DwH0tsr8SLf8N0+irwO5okFcMS4eFHrXHttt24sLFZP3IJQo832o3fUWQ==",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
@@ -5861,6 +6338,18 @@
         }
       }
     },
+    "node_modules/react-toastify": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
+      "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==",
+      "dependencies": {
+        "clsx": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -6096,7 +6585,6 @@
       "version": "7.6.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz",
       "integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -6135,6 +6623,45 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/sharp": {
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.4.tgz",
+      "integrity": "sha512-7i/dt5kGl7qR4gwPRD2biwD2/SvBn3O04J77XKFgL2OnZtQw+AG9wnuS/csmu80nPRHLYE9E41fyEiG8nhH6/Q==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.3",
+        "semver": "^7.6.0"
+      },
+      "engines": {
+        "libvips": ">=8.15.2",
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.33.4",
+        "@img/sharp-darwin-x64": "0.33.4",
+        "@img/sharp-libvips-darwin-arm64": "1.0.2",
+        "@img/sharp-libvips-darwin-x64": "1.0.2",
+        "@img/sharp-libvips-linux-arm": "1.0.2",
+        "@img/sharp-libvips-linux-arm64": "1.0.2",
+        "@img/sharp-libvips-linux-s390x": "1.0.2",
+        "@img/sharp-libvips-linux-x64": "1.0.2",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.2",
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.2",
+        "@img/sharp-linux-arm": "0.33.4",
+        "@img/sharp-linux-arm64": "0.33.4",
+        "@img/sharp-linux-s390x": "0.33.4",
+        "@img/sharp-linux-x64": "0.33.4",
+        "@img/sharp-linuxmusl-arm64": "0.33.4",
+        "@img/sharp-linuxmusl-x64": "0.33.4",
+        "@img/sharp-wasm32": "0.33.4",
+        "@img/sharp-win32-ia32": "0.33.4",
+        "@img/sharp-win32-x64": "0.33.4"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -6182,6 +6709,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
diff --git a/package.json b/package.json
index fd2f3859..a84b4b59 100644
--- a/package.json
+++ b/package.json
@@ -28,12 +28,14 @@
     "axios": "^1.7.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.407.0",
+    "lucide-react": "^0.402.0",
     "next": "14.2.4",
     "qs": "^6.12.2",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.52.1",
+    "react-toastify": "^10.0.5",
+    "sharp": "^0.33.4",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"
diff --git a/public/ProfileTestImage.jpg b/public/ProfileTestImage.jpg
new file mode 100644
index 00000000..3d7e85d8
Binary files /dev/null and b/public/ProfileTestImage.jpg differ
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index 718d6fea..00000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/icon/BW/AngryFaceBWIcon.svg b/public/icon/BW/AngryFaceBWIcon.svg
new file mode 100644
index 00000000..c499add3
--- /dev/null
+++ b/public/icon/BW/AngryFaceBWIcon.svg
@@ -0,0 +1,19 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 65">
+<g id="Group 51">
+<path id="Vector" d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#DDE2E9"/>
+<path id="Vector_2" d="M26.8385 19.0977H5.16116C4.59103 19.0977 4.12891 19.5598 4.12891 20.1299V27.3557C4.12891 27.9258 4.59109 28.388 5.16116 28.388H26.8386C27.4087 28.388 27.8708 27.9258 27.8708 27.3557V20.13C27.8708 19.5598 27.4087 19.0977 26.8385 19.0977Z" fill="#BABFC8"/>
+<path id="Vector_3" d="M24.7298 25.033L25.1391 24.6238C25.3407 24.4222 25.3407 24.0955 25.1391 23.894C24.9374 23.6924 24.6108 23.6924 24.4092 23.894L24 24.3032L23.6384 23.9416C24.0123 23.6587 24.2581 23.2145 24.2581 22.7105C24.2581 21.8567 23.5635 21.1621 22.7097 21.1621C21.8559 21.1621 21.1613 21.8567 21.1613 22.7105C21.1613 22.8759 21.1942 23.0322 21.2425 23.1818C20.832 23.5559 20.6041 24.1058 20.6517 24.6732C20.7304 25.5985 21.555 26.3234 22.5292 26.3234C23.0682 26.3234 23.5914 26.1132 23.9917 25.7545L24.4092 26.1721C24.5101 26.2729 24.6421 26.3233 24.7742 26.3233C24.9062 26.3233 25.0383 26.2729 25.1391 26.1721C25.3407 25.9705 25.3407 25.6439 25.1391 25.4423L24.7298 25.033ZM22.7097 22.1944C22.9944 22.1944 23.2258 22.4257 23.2258 22.7105C23.2258 22.9952 22.9944 23.2266 22.7097 23.2266C22.4249 23.2266 22.1936 22.9952 22.1936 22.7105C22.1936 22.4257 22.4249 22.1944 22.7097 22.1944ZM22.5292 25.2911C22.0942 25.2911 21.7132 24.9745 21.6799 24.5865C21.6619 24.3689 21.7349 24.1646 21.8717 24.0089C22.0499 24.1243 22.2536 24.2008 22.4719 24.2349L23.2618 25.0247C23.0554 25.1922 22.7965 25.2911 22.5292 25.2911Z" fill="#EBEFF4"/>
+<path id="Vector_4" d="M11.148 21.2651C10.9202 21.0948 10.5966 21.1401 10.4258 21.3684L7.32904 25.4975C7.15766 25.7253 7.20404 26.0489 7.43235 26.2198C7.5251 26.2893 7.63348 26.3231 7.74135 26.3231C7.8986 26.3231 8.05335 26.252 8.15466 26.1164L11.2514 21.9874C11.4227 21.7596 11.3764 21.436 11.148 21.2651Z" fill="#EBEFF4"/>
+<path id="Vector_5" d="M13.4194 24.775C13.7048 24.775 13.9356 24.5441 13.9356 24.2589V21.6782C13.9356 21.3929 13.7047 21.1621 13.4194 21.1621C13.1341 21.1621 12.9033 21.393 12.9033 21.6782V24.2589C12.9033 24.5442 13.1341 24.775 13.4194 24.775Z" fill="#EBEFF4"/>
+<path id="Vector_6" d="M13.4194 25.291C13.1341 25.291 12.9033 25.5219 12.9033 25.8071C12.9033 26.0924 13.1342 26.3233 13.4194 26.3233H13.4245C13.7098 26.3233 13.9381 26.0924 13.9381 25.8071C13.9381 25.5219 13.7047 25.291 13.4194 25.291Z" fill="#EBEFF4"/>
+<path id="Vector_7" d="M19.6129 22.1932H19.4995L19.5973 21.802C19.6668 21.5258 19.4985 21.2456 19.2218 21.1765C18.9451 21.105 18.6653 21.2748 18.5963 21.552L18.436 22.1932H17.435L17.5328 21.802C17.6024 21.5258 17.434 21.2456 17.1573 21.1765C16.8796 21.105 16.6004 21.2748 16.5318 21.552L16.3715 22.1932H16C15.7147 22.1932 15.4839 22.424 15.4839 22.7093C15.4839 22.9945 15.7148 23.2254 16 23.2254H16.1135L15.8554 24.2577H15.4839C15.1986 24.2577 14.9678 24.4885 14.9678 24.7738C14.9678 25.059 15.1986 25.2899 15.4839 25.2899H15.5973L15.4995 25.681C15.43 25.9572 15.5983 26.2375 15.875 26.3065C15.9168 26.3171 15.9592 26.3222 16.0005 26.3222C16.2319 26.3222 16.4421 26.1659 16.5005 25.931L16.6608 25.2899H17.6618L17.564 25.681C17.4945 25.9572 17.6628 26.2375 17.9395 26.3065C17.9813 26.3171 18.0237 26.3222 18.065 26.3222C18.2964 26.3222 18.5066 26.1659 18.565 25.931L18.7253 25.2899H19.0968C19.3821 25.2899 19.613 25.059 19.613 24.7738C19.613 24.4885 19.3821 24.2577 19.0968 24.2577H18.9834L19.2415 23.2254H19.613C19.8983 23.2254 20.1291 22.9945 20.1291 22.7093C20.1291 22.424 19.8982 22.1932 19.6129 22.1932ZM17.9199 24.2577H16.9189L17.177 23.2254H18.178L17.9199 24.2577Z" fill="#EBEFF4"/>
+<path id="Vector_8" d="M8.77397 22.1944C8.77397 21.6253 8.31079 21.1621 7.74172 21.1621C7.17266 21.1621 6.70947 21.6253 6.70947 22.1944C6.70947 22.7634 7.17266 23.2266 7.74172 23.2266C8.31079 23.2266 8.77397 22.7634 8.77397 22.1944Z" fill="#EBEFF4"/>
+<path id="Vector_9" d="M10.8389 24.2578C10.2698 24.2578 9.80664 24.721 9.80664 25.2901C9.80664 25.8591 10.2698 26.3223 10.8389 26.3223C11.408 26.3223 11.8711 25.8591 11.8711 25.2901C11.8711 24.721 11.408 24.2578 10.8389 24.2578Z" fill="#EBEFF4"/>
+</g>
+<path id="Vector 8 (Stroke)" d="M23.8412 8.71678C23.6652 8.46134 23.3727 8.4522 23.0599 8.5721C23.0599 8.5721 21.6467 9.2191 20.7788 9.43949C19.911 9.65988 18.4976 9.8635 18.4976 9.8635C18.2141 9.91933 17.8926 10.1629 17.9113 10.4729C17.9299 10.783 18.1963 11.0193 18.5064 11.0007L18.5649 10.9966C18.6005 10.9939 18.6518 10.9897 18.7174 10.9835C18.8486 10.9713 19.0371 10.9512 19.2716 10.9199C19.7402 10.8572 20.395 10.7489 21.1449 10.566C21.9191 10.3772 22.5494 10.1154 22.9883 9.89956C23.208 9.7915 23.3808 9.69447 23.5007 9.62304C23.5606 9.58731 23.6075 9.55792 23.6405 9.53669L23.6973 9.49914C23.9531 9.32285 24.0175 8.97258 23.8412 8.71678Z" fill="#BABFC8"/>
+<path id="Vector 8 (Stroke)_2" d="M8.1451 8.71678C8.32114 8.46134 8.61358 8.4522 8.9264 8.5721C8.9264 8.5721 10.3396 9.2191 11.2075 9.43949C12.0754 9.65988 13.4887 9.8635 13.4887 9.8635C13.7722 9.91933 14.0937 10.1629 14.0751 10.4729C14.0565 10.783 13.79 11.0193 13.4799 11.0007L13.4214 10.9966C13.3858 10.9939 13.3345 10.9897 13.2689 10.9835C13.1377 10.9713 12.9492 10.9512 12.7147 10.9199C12.2461 10.8572 11.5914 10.7489 10.8414 10.566C10.0672 10.3772 9.43692 10.1154 8.99808 9.89956C8.77833 9.7915 8.60557 9.69447 8.48568 9.62304C8.4257 9.58731 8.37885 9.55792 8.34586 9.53669L8.28905 9.49914C8.03326 9.32285 7.96881 8.97258 8.1451 8.71678Z" fill="#BABFC8"/>
+<path id="Eye_01" d="M11.875 16C12.8415 16 13.625 15.2165 13.625 14.25C13.625 13.2835 12.8415 12.5 11.875 12.5C10.9085 12.5 10.125 13.2835 10.125 14.25C10.125 15.2165 10.9085 16 11.875 16Z" fill="#BABFC8"/>
+<path id="Eye_01_2" d="M20.125 16C21.0915 16 21.875 15.2165 21.875 14.25C21.875 13.2835 21.0915 12.5 20.125 12.5C19.1585 12.5 18.375 13.2835 18.375 14.25C18.375 15.2165 19.1585 16 20.125 16Z" fill="#BABFC8"/>
+</g>
+</svg>
diff --git a/public/icon/BW/HeartFaceBWIcon.svg b/public/icon/BW/HeartFaceBWIcon.svg
new file mode 100644
index 00000000..5702c0f9
--- /dev/null
+++ b/public/icon/BW/HeartFaceBWIcon.svg
@@ -0,0 +1,13 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="012-heart face" clip-path="url(#clip0_0_9806)">
+<path id="Background" d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#DDE2E9"/>
+<path id="Mouth" d="M21.8103 21.7776C21.7958 22.5118 21.1514 24.2955 18.8702 25.4008C17.9754 25.8363 16.9941 26.0625 16 26.0625C15.0059 26.0625 14.0246 25.8363 13.1298 25.4008C10.8446 24.2995 10.2042 22.5118 10.1897 21.7776C10.1633 21.3654 10.3742 20.8724 10.9329 21.0301C11.8449 21.3641 13.276 21.5602 14.3857 21.6623C15.4595 21.7643 16.5405 21.7643 17.6143 21.6623C18.724 21.5562 20.1551 21.3641 21.0671 21.0301C21.6258 20.8724 21.8367 21.3654 21.8103 21.7776Z" fill="#BABFC8"/>
+<path id="Eye 02" d="M17.6765 10.0602C17.445 10.9293 17.5549 11.8106 18.0259 12.8363C18.4454 13.7541 19.1351 14.755 19.9347 15.9136C20.2076 16.3094 20.5152 16.759 20.8337 17.2327C20.9183 17.358 21.045 17.4489 21.1908 17.4887C21.3376 17.5292 21.4941 17.5138 21.6301 17.4454C22.144 17.1927 22.6254 16.9533 23.0699 16.753C24.3416 16.1485 25.4394 15.6267 26.2615 15.0434C27.1817 14.3889 27.718 13.6816 27.9517 12.8119C28.1824 12.0057 28.0999 11.1421 27.7208 10.3941C27.5366 10.0394 27.2798 9.72749 26.9673 9.47843C26.6547 9.22937 26.2933 9.04876 25.9065 8.94833C25.3195 8.78754 24.6951 8.83233 24.1371 9.07528C23.8354 9.20246 23.5537 9.37284 23.301 9.58109C23.1863 9.27451 23.0285 8.98584 22.8324 8.7238C22.4699 8.23815 21.9538 7.88942 21.368 7.73432C20.9825 7.62864 20.5793 7.60469 20.1841 7.66401C19.7889 7.72332 19.4104 7.86459 19.073 8.07874C18.3752 8.54044 17.8767 9.2478 17.6765 10.0602Z" fill="#BABFC8"/>
+<path id="Eye 01" d="M12.9234 8.08763C12.586 7.87347 12.2076 7.73221 11.8123 7.67289C11.4171 7.61358 11.0139 7.63753 10.6284 7.7432C10.0426 7.89831 9.52652 8.24704 9.16404 8.73269C8.96788 8.99473 8.81008 9.2834 8.69538 9.58997C8.44269 9.38173 8.16105 9.21135 7.85932 9.08417C7.30127 8.84122 6.67693 8.79642 6.08991 8.95721C5.70309 9.05765 5.34168 9.23825 5.02912 9.48731C4.71657 9.73637 4.45983 10.0483 4.27557 10.403C3.89648 11.151 3.81404 12.0146 4.04475 12.8208C4.27837 13.6905 4.81473 14.3977 5.73491 15.0523C6.55699 15.6355 7.65476 16.1574 8.9265 16.7619C9.36037 16.9683 9.85241 17.2016 10.3663 17.4543C10.5023 17.5226 10.6588 17.5381 10.8056 17.4976C10.9514 17.4577 11.0781 17.3669 11.1627 17.2416C11.4812 16.7679 11.7888 16.3183 12.0617 15.9225C12.8613 14.7639 13.5426 13.7607 13.9706 12.8452C14.4415 11.8195 14.5514 10.9382 14.3199 10.0691C14.1198 9.25669 13.6212 8.54933 12.9234 8.08763Z" fill="#BABFC8"/>
+</g>
+<defs>
+<clipPath id="clip0_0_9806">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/icon/BW/SadFaceBWIcon.svg b/public/icon/BW/SadFaceBWIcon.svg
new file mode 100644
index 00000000..90df96bd
--- /dev/null
+++ b/public/icon/BW/SadFaceBWIcon.svg
@@ -0,0 +1,14 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="034-sad" clip-path="url(#clip0_0_9861)">
+<path id="Background" d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#DDE2E9"/>
+<path id="Watter Drop" d="M12.8861 23.0795C12.8861 24.9263 11.4964 26.4221 9.77752 26.4221C8.05866 26.4221 6.66895 24.9263 6.66895 23.0795C6.66895 21.6166 8.6054 18.967 9.4118 17.9156C9.45257 17.86 9.50584 17.8148 9.56731 17.7837C9.62878 17.7526 9.69672 17.7363 9.76563 17.7363C9.83454 17.7363 9.90248 17.7526 9.96395 17.7837C10.0254 17.8148 10.0787 17.86 10.1195 17.9156C10.9496 18.967 12.8861 21.6221 12.8861 23.0795Z" fill="#BABFC8"/>
+<path id="Eye_01" d="M11.875 14.5C12.8415 14.5 13.625 13.7165 13.625 12.75C13.625 11.7835 12.8415 11 11.875 11C10.9085 11 10.125 11.7835 10.125 12.75C10.125 13.7165 10.9085 14.5 11.875 14.5Z" fill="#BABFC8"/>
+<path id="Eye_01_2" d="M20.125 14.5C21.0915 14.5 21.875 13.7165 21.875 12.75C21.875 11.7835 21.0915 11 20.125 11C19.1585 11 18.375 11.7835 18.375 12.75C18.375 13.7165 19.1585 14.5 20.125 14.5Z" fill="#BABFC8"/>
+<path id="Ellipse 22" d="M20.5 23.375C19.3291 22.2893 17.7581 21.625 16.0312 21.625C15.6804 21.625 15.3359 21.6524 15 21.7052" stroke="#BABFC8" stroke-width="2.15054" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_0_9861">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/icon/BW/SmileFaceBWIcon.svg b/public/icon/BW/SmileFaceBWIcon.svg
new file mode 100644
index 00000000..58be6715
--- /dev/null
+++ b/public/icon/BW/SmileFaceBWIcon.svg
@@ -0,0 +1,13 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="035-smiling face" clip-path="url(#clip0_0_9822)">
+<path id="Background" d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#DDE2E9"/>
+<path id="Eye_01" d="M11.875 14.5C12.8415 14.5 13.625 13.7165 13.625 12.75C13.625 11.7835 12.8415 11 11.875 11C10.9085 11 10.125 11.7835 10.125 12.75C10.125 13.7165 10.9085 14.5 11.875 14.5Z" fill="#BABFC8"/>
+<path id="Eye_01_2" d="M20.125 14.5C21.0915 14.5 21.875 13.7165 21.875 12.75C21.875 11.7835 21.0915 11 20.125 11C19.1585 11 18.375 11.7835 18.375 12.75C18.375 13.7165 19.1585 14.5 20.125 14.5Z" fill="#BABFC8"/>
+<path id="Ellipse 22" d="M23 19.9375C21.6756 22.3914 19.0518 24.0625 16.0312 24.0625C13.0107 24.0625 10.3869 22.3914 9.0625 19.9375" stroke="#BABFC8" stroke-width="2.15054" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_0_9822">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/icon/BW/ThinkFaceBWIcon.svg b/public/icon/BW/ThinkFaceBWIcon.svg
new file mode 100644
index 00000000..2ac21adc
--- /dev/null
+++ b/public/icon/BW/ThinkFaceBWIcon.svg
@@ -0,0 +1,11 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="044-thinking">
+<path id="Background" d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#DDE2E9"/>
+<path id="Hand" d="M13.8851 27.5607L13.7023 26.6574L16.0209 26.1856C16.1937 26.1473 16.3568 26.0736 16.4997 25.9691C16.6425 25.8646 16.7622 25.7316 16.8511 25.5785C17.0344 25.2801 17.0996 24.9241 17.0339 24.5801C17.0325 24.5655 17.0325 24.5508 17.0339 24.5362C16.9512 24.2011 16.744 23.9101 16.4543 23.7225C16.3113 23.6265 16.1509 23.5597 15.9821 23.5258C15.8133 23.4919 15.6394 23.4916 15.4705 23.525L8.95714 24.8507C8.90644 24.8626 8.85379 24.8636 8.8027 24.8535C8.75162 24.8434 8.70327 24.8225 8.66091 24.7922C8.57832 24.7334 8.52037 24.6461 8.49817 24.5472C8.48473 24.4788 8.48978 24.4081 8.5128 24.3424L9.07051 22.7735V22.7588C9.13889 22.5033 9.14093 22.2346 9.07645 21.9781C9.01196 21.7216 8.88308 21.4857 8.702 21.2929C8.52092 21.1001 8.29363 20.9567 8.04165 20.8763C7.78968 20.7959 7.52134 20.7811 7.26205 20.8334C7.04878 20.8763 6.84693 20.9637 6.66958 21.0897C6.49222 21.2157 6.34334 21.3775 6.23257 21.5648L4.71485 24.1431C3.91751 25.499 3.65044 27.102 3.96514 28.6432C4.25162 30.0542 5.08673 31.2938 6.28686 32.0893C7.487 32.8848 8.95392 33.1712 10.3651 32.8855C11.5384 32.6475 12.5692 31.9532 13.2307 30.9553C13.8921 29.9574 14.1302 28.7377 13.8925 27.5643L13.8851 27.5607Z" fill="#BABFC8"/>
+<path id="Vector 8" d="M22.0234 8.5002C22.0234 8.5002 20.9334 8.70078 19.6546 9.47807C18.3759 10.2553 17.5626 10.9766 17.5626 10.9766" stroke="#BABFC8" stroke-width="1.79211" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector 9" d="M8.93741 12.5069C8.93741 12.5069 9.99721 12.2652 11.4921 12.1978C12.0193 12.1741 12.4915 12.2019 12.8819 12.248" stroke="#BABFC8" stroke-width="1.79211" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Eye_01" d="M11.375 17C12.3415 17 13.125 16.2165 13.125 15.25C13.125 14.2835 12.3415 13.5 11.375 13.5C10.4085 13.5 9.625 14.2835 9.625 15.25C9.625 16.2165 10.4085 17 11.375 17Z" fill="#BABFC8"/>
+<rect id="Rectangle 258" x="19.3125" y="12" width="2.6875" height="4.6875" rx="1.34375" fill="#BABFC8"/>
+<path id="Ellipse 22" d="M19.9136 22.0098C18.5912 21.1146 16.9376 20.6969 15.2307 20.9594C14.884 21.0127 14.5477 21.0922 14.2237 21.1954" stroke="#BABFC8" stroke-width="2.15054" stroke-linecap="round"/>
+</g>
+</svg>
diff --git a/public/icon/Color/AngryFaceColorIcon.svg b/public/icon/Color/AngryFaceColorIcon.svg
new file mode 100644
index 00000000..ca6e754a
--- /dev/null
+++ b/public/icon/Color/AngryFaceColorIcon.svg
@@ -0,0 +1,19 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 65">
+<g id="Group 51">
+<path id="Vector" d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#E46E80"/>
+<path id="Vector_2" d="M26.8385 19.0977H5.16116C4.59103 19.0977 4.12891 19.5598 4.12891 20.1299V27.3557C4.12891 27.9258 4.59109 28.388 5.16116 28.388H26.8386C27.4087 28.388 27.8708 27.9258 27.8708 27.3557V20.13C27.8708 19.5598 27.4087 19.0977 26.8385 19.0977Z" fill="#494D59"/>
+<path id="Vector_3" d="M24.7298 25.033L25.1391 24.6238C25.3407 24.4222 25.3407 24.0955 25.1391 23.894C24.9374 23.6924 24.6108 23.6924 24.4092 23.894L24 24.3032L23.6384 23.9416C24.0123 23.6587 24.2581 23.2145 24.2581 22.7105C24.2581 21.8567 23.5635 21.1621 22.7097 21.1621C21.8559 21.1621 21.1613 21.8567 21.1613 22.7105C21.1613 22.8759 21.1942 23.0322 21.2425 23.1818C20.832 23.5559 20.6041 24.1058 20.6517 24.6732C20.7304 25.5985 21.555 26.3234 22.5292 26.3234C23.0682 26.3234 23.5914 26.1132 23.9917 25.7545L24.4092 26.1721C24.5101 26.2729 24.6421 26.3233 24.7742 26.3233C24.9062 26.3233 25.0383 26.2729 25.1391 26.1721C25.3407 25.9705 25.3407 25.6439 25.1391 25.4423L24.7298 25.033ZM22.7097 22.1944C22.9944 22.1944 23.2258 22.4257 23.2258 22.7105C23.2258 22.9952 22.9944 23.2266 22.7097 23.2266C22.4249 23.2266 22.1936 22.9952 22.1936 22.7105C22.1936 22.4257 22.4249 22.1944 22.7097 22.1944ZM22.5292 25.2911C22.0942 25.2911 21.7132 24.9745 21.6799 24.5865C21.6619 24.3689 21.7349 24.1646 21.8717 24.0089C22.0499 24.1243 22.2536 24.2008 22.4719 24.2349L23.2618 25.0247C23.0554 25.1922 22.7965 25.2911 22.5292 25.2911Z" fill="#F9FAFC"/>
+<path id="Vector_4" d="M11.148 21.2651C10.9202 21.0948 10.5966 21.1401 10.4258 21.3684L7.32904 25.4975C7.15766 25.7253 7.20404 26.0489 7.43235 26.2198C7.5251 26.2893 7.63348 26.3231 7.74135 26.3231C7.8986 26.3231 8.05335 26.252 8.15466 26.1164L11.2514 21.9874C11.4227 21.7596 11.3764 21.436 11.148 21.2651Z" fill="#F9FAFC"/>
+<path id="Vector_5" d="M13.4194 24.775C13.7048 24.775 13.9356 24.5441 13.9356 24.2589V21.6782C13.9356 21.3929 13.7047 21.1621 13.4194 21.1621C13.1341 21.1621 12.9033 21.393 12.9033 21.6782V24.2589C12.9033 24.5442 13.1341 24.775 13.4194 24.775Z" fill="#F9FAFC"/>
+<path id="Vector_6" d="M13.4194 25.291C13.1341 25.291 12.9033 25.5219 12.9033 25.8071C12.9033 26.0924 13.1342 26.3233 13.4194 26.3233H13.4245C13.7098 26.3233 13.9381 26.0924 13.9381 25.8071C13.9381 25.5219 13.7047 25.291 13.4194 25.291Z" fill="#F9FAFC"/>
+<path id="Vector_7" d="M19.6129 22.1932H19.4995L19.5973 21.802C19.6668 21.5258 19.4985 21.2456 19.2218 21.1765C18.9451 21.105 18.6653 21.2748 18.5963 21.552L18.436 22.1932H17.435L17.5328 21.802C17.6024 21.5258 17.434 21.2456 17.1573 21.1765C16.8796 21.105 16.6004 21.2748 16.5318 21.552L16.3715 22.1932H16C15.7147 22.1932 15.4839 22.424 15.4839 22.7093C15.4839 22.9945 15.7148 23.2254 16 23.2254H16.1135L15.8554 24.2577H15.4839C15.1986 24.2577 14.9678 24.4885 14.9678 24.7738C14.9678 25.059 15.1986 25.2899 15.4839 25.2899H15.5973L15.4995 25.681C15.43 25.9572 15.5983 26.2375 15.875 26.3065C15.9168 26.3171 15.9592 26.3222 16.0005 26.3222C16.2319 26.3222 16.4421 26.1659 16.5005 25.931L16.6608 25.2899H17.6618L17.564 25.681C17.4945 25.9572 17.6628 26.2375 17.9395 26.3065C17.9813 26.3171 18.0237 26.3222 18.065 26.3222C18.2964 26.3222 18.5066 26.1659 18.565 25.931L18.7253 25.2899H19.0968C19.3821 25.2899 19.613 25.059 19.613 24.7738C19.613 24.4885 19.3821 24.2577 19.0968 24.2577H18.9834L19.2415 23.2254H19.613C19.8983 23.2254 20.1291 22.9945 20.1291 22.7093C20.1291 22.424 19.8982 22.1932 19.6129 22.1932ZM17.9199 24.2577H16.9189L17.177 23.2254H18.178L17.9199 24.2577Z" fill="#F9FAFC"/>
+<path id="Vector_8" d="M8.77397 22.1944C8.77397 21.6253 8.31079 21.1621 7.74172 21.1621C7.17266 21.1621 6.70947 21.6253 6.70947 22.1944C6.70947 22.7634 7.17266 23.2266 7.74172 23.2266C8.31079 23.2266 8.77397 22.7634 8.77397 22.1944Z" fill="#F9FAFC"/>
+<path id="Vector_9" d="M10.8389 24.2578C10.2698 24.2578 9.80664 24.721 9.80664 25.2901C9.80664 25.8591 10.2698 26.3223 10.8389 26.3223C11.408 26.3223 11.8711 25.8591 11.8711 25.2901C11.8711 24.721 11.408 24.2578 10.8389 24.2578Z" fill="#F9FAFC"/>
+</g>
+<path id="Vector 8 (Stroke)" d="M23.8412 8.71678C23.6652 8.46134 23.3727 8.4522 23.0599 8.5721C23.0599 8.5721 21.6467 9.2191 20.7788 9.43949C19.911 9.65988 18.4976 9.8635 18.4976 9.8635C18.2141 9.91933 17.8926 10.1629 17.9113 10.4729C17.9299 10.783 18.1963 11.0193 18.5064 11.0007L18.5649 10.9966C18.6005 10.9939 18.6518 10.9897 18.7174 10.9835C18.8486 10.9713 19.0371 10.9512 19.2716 10.9199C19.7402 10.8572 20.395 10.7489 21.1449 10.566C21.9191 10.3772 22.5494 10.1154 22.9883 9.89956C23.208 9.7915 23.3808 9.69447 23.5007 9.62304C23.5606 9.58731 23.6075 9.55792 23.6405 9.53669L23.6973 9.49914C23.9531 9.32285 24.0175 8.97258 23.8412 8.71678Z" fill="#3E414D"/>
+<path id="Vector 8 (Stroke)_2" d="M8.1451 8.71678C8.32114 8.46134 8.61358 8.4522 8.9264 8.5721C8.9264 8.5721 10.3396 9.2191 11.2075 9.43949C12.0754 9.65988 13.4887 9.8635 13.4887 9.8635C13.7722 9.91933 14.0937 10.1629 14.0751 10.4729C14.0565 10.783 13.79 11.0193 13.4799 11.0007L13.4214 10.9966C13.3858 10.9939 13.3345 10.9897 13.2689 10.9835C13.1377 10.9713 12.9492 10.9512 12.7147 10.9199C12.2461 10.8572 11.5914 10.7489 10.8414 10.566C10.0672 10.3772 9.43692 10.1154 8.99808 9.89956C8.77833 9.7915 8.60557 9.69447 8.48568 9.62304C8.4257 9.58731 8.37885 9.55792 8.34586 9.53669L8.28905 9.49914C8.03326 9.32285 7.96881 8.97258 8.1451 8.71678Z" fill="#3E414D"/>
+<path id="Eye_01" d="M11.875 16C12.8415 16 13.625 15.2165 13.625 14.25C13.625 13.2835 12.8415 12.5 11.875 12.5C10.9085 12.5 10.125 13.2835 10.125 14.25C10.125 15.2165 10.9085 16 11.875 16Z" fill="#3E414D"/>
+<path id="Eye_01_2" d="M20.125 16C21.0915 16 21.875 15.2165 21.875 14.25C21.875 13.2835 21.0915 12.5 20.125 12.5C19.1585 12.5 18.375 13.2835 18.375 14.25C18.375 15.2165 19.1585 16 20.125 16Z" fill="#3E414D"/>
+</g>
+</svg>
diff --git a/public/icon/Color/HeartFaceColorIcon.svg b/public/icon/Color/HeartFaceColorIcon.svg
new file mode 100644
index 00000000..9db0bbd0
--- /dev/null
+++ b/public/icon/Color/HeartFaceColorIcon.svg
@@ -0,0 +1,13 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="012-heart face" clip-path="url(#clip0_0_9582)">
+<path id="Background" d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#FBC85B"/>
+<path id="Mouth" d="M21.8103 21.7776C21.7958 22.5118 21.1514 24.2955 18.8702 25.4008C17.9754 25.8363 16.9941 26.0625 16 26.0625C15.0059 26.0625 14.0246 25.8363 13.1298 25.4008C10.8446 24.2995 10.2042 22.5118 10.1897 21.7776C10.1633 21.3654 10.3742 20.8724 10.9329 21.0301C11.8449 21.3641 13.276 21.5602 14.3857 21.6623C15.4595 21.7643 16.5405 21.7643 17.6143 21.6623C18.724 21.5562 20.1551 21.3641 21.0671 21.0301C21.6258 20.8724 21.8367 21.3654 21.8103 21.7776Z" fill="#9A695E"/>
+<path id="Eye 02" d="M17.6765 10.0602C17.445 10.9293 17.5549 11.8106 18.0259 12.8363C18.4454 13.7541 19.1351 14.755 19.9347 15.9136C20.2076 16.3094 20.5152 16.759 20.8337 17.2327C20.9183 17.358 21.045 17.4489 21.1908 17.4887C21.3376 17.5292 21.4941 17.5138 21.6301 17.4454C22.144 17.1927 22.6254 16.9533 23.0699 16.753C24.3416 16.1485 25.4394 15.6267 26.2615 15.0434C27.1817 14.3889 27.718 13.6816 27.9517 12.8119C28.1824 12.0057 28.0999 11.1421 27.7208 10.3941C27.5366 10.0394 27.2798 9.72749 26.9673 9.47843C26.6547 9.22937 26.2933 9.04876 25.9065 8.94833C25.3195 8.78754 24.6951 8.83233 24.1371 9.07528C23.8354 9.20246 23.5537 9.37284 23.301 9.58109C23.1863 9.27451 23.0285 8.98584 22.8324 8.7238C22.4699 8.23815 21.9538 7.88942 21.368 7.73432C20.9825 7.62864 20.5793 7.60469 20.1841 7.66401C19.7889 7.72332 19.4104 7.86459 19.073 8.07874C18.3752 8.54044 17.8767 9.2478 17.6765 10.0602Z" fill="#E46E80"/>
+<path id="Eye 01" d="M12.9234 8.08763C12.586 7.87347 12.2076 7.73221 11.8123 7.67289C11.4171 7.61358 11.0139 7.63753 10.6284 7.7432C10.0426 7.89831 9.52652 8.24704 9.16404 8.73269C8.96788 8.99473 8.81008 9.2834 8.69538 9.58997C8.44269 9.38173 8.16105 9.21135 7.85932 9.08417C7.30127 8.84122 6.67693 8.79642 6.08991 8.95721C5.70309 9.05765 5.34168 9.23825 5.02912 9.48731C4.71657 9.73637 4.45983 10.0483 4.27557 10.403C3.89648 11.151 3.81404 12.0146 4.04475 12.8208C4.27837 13.6905 4.81473 14.3977 5.73491 15.0523C6.55699 15.6355 7.65476 16.1574 8.9265 16.7619C9.36037 16.9683 9.85241 17.2016 10.3663 17.4543C10.5023 17.5226 10.6588 17.5381 10.8056 17.4976C10.9514 17.4577 11.0781 17.3669 11.1627 17.2416C11.4812 16.7679 11.7888 16.3183 12.0617 15.9225C12.8613 14.7639 13.5426 13.7607 13.9706 12.8452C14.4415 11.8195 14.5514 10.9382 14.3199 10.0691C14.1198 9.25669 13.6212 8.54933 12.9234 8.08763Z" fill="#E46E80"/>
+</g>
+<defs>
+<clipPath id="clip0_0_9582">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/icon/Color/SadFaceColorIcon.svg b/public/icon/Color/SadFaceColorIcon.svg
new file mode 100644
index 00000000..58e96e31
--- /dev/null
+++ b/public/icon/Color/SadFaceColorIcon.svg
@@ -0,0 +1,14 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="034-sad" clip-path="url(#clip0_0_9852)">
+<path id="Background" d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#FBC85B"/>
+<path id="Watter Drop" d="M12.8861 23.0795C12.8861 24.9263 11.4964 26.4221 9.77752 26.4221C8.05866 26.4221 6.66895 24.9263 6.66895 23.0795C6.66895 21.6166 8.6054 18.967 9.4118 17.9156C9.45257 17.86 9.50584 17.8148 9.56731 17.7837C9.62878 17.7526 9.69672 17.7363 9.76563 17.7363C9.83454 17.7363 9.90248 17.7526 9.96395 17.7837C10.0254 17.8148 10.0787 17.86 10.1195 17.9156C10.9496 18.967 12.8861 21.6221 12.8861 23.0795Z" fill="#5195EE"/>
+<path id="Eye_01" d="M11.875 14.5C12.8415 14.5 13.625 13.7165 13.625 12.75C13.625 11.7835 12.8415 11 11.875 11C10.9085 11 10.125 11.7835 10.125 12.75C10.125 13.7165 10.9085 14.5 11.875 14.5Z" fill="#3E414D"/>
+<path id="Eye_01_2" d="M20.125 14.5C21.0915 14.5 21.875 13.7165 21.875 12.75C21.875 11.7835 21.0915 11 20.125 11C19.1585 11 18.375 11.7835 18.375 12.75C18.375 13.7165 19.1585 14.5 20.125 14.5Z" fill="#3E414D"/>
+<path id="Ellipse 22" d="M20.5 23.375C19.3291 22.2893 17.7581 21.625 16.0312 21.625C15.6804 21.625 15.3359 21.6524 15 21.7052" stroke="#9A695E" stroke-width="2.15054" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_0_9852">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/icon/Color/SmileFaceColorIcon.svg b/public/icon/Color/SmileFaceColorIcon.svg
new file mode 100644
index 00000000..3e66c738
--- /dev/null
+++ b/public/icon/Color/SmileFaceColorIcon.svg
@@ -0,0 +1,13 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="035-smiling face" clip-path="url(#clip0_0_9814)">
+<path id="Background" d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#FBC85B"/>
+<path id="Eye_01" d="M11.875 14.5C12.8415 14.5 13.625 13.7165 13.625 12.75C13.625 11.7835 12.8415 11 11.875 11C10.9085 11 10.125 11.7835 10.125 12.75C10.125 13.7165 10.9085 14.5 11.875 14.5Z" fill="#3E414D"/>
+<path id="Eye_01_2" d="M20.125 14.5C21.0915 14.5 21.875 13.7165 21.875 12.75C21.875 11.7835 21.0915 11 20.125 11C19.1585 11 18.375 11.7835 18.375 12.75C18.375 13.7165 19.1585 14.5 20.125 14.5Z" fill="#3E414D"/>
+<path id="Ellipse 22" d="M23 19.9375C21.6756 22.3914 19.0518 24.0625 16.0312 24.0625C13.0107 24.0625 10.3869 22.3914 9.0625 19.9375" stroke="#9A695E" stroke-width="2.15054" stroke-linecap="round"/>
+</g>
+<defs>
+<clipPath id="clip0_0_9814">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/icon/Color/ThinkFaceColorIcon.svg b/public/icon/Color/ThinkFaceColorIcon.svg
new file mode 100644
index 00000000..0e2bab7d
--- /dev/null
+++ b/public/icon/Color/ThinkFaceColorIcon.svg
@@ -0,0 +1,11 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="044-thinking">
+<path id="Background" d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#FBC85B"/>
+<path id="Hand" d="M13.8851 27.5607L13.7023 26.6574L16.0209 26.1856C16.1937 26.1473 16.3568 26.0736 16.4997 25.9691C16.6425 25.8646 16.7622 25.7316 16.8511 25.5785C17.0344 25.2801 17.0996 24.9241 17.0339 24.5801C17.0325 24.5655 17.0325 24.5508 17.0339 24.5362C16.9512 24.2011 16.744 23.9101 16.4543 23.7225C16.3113 23.6265 16.1509 23.5597 15.9821 23.5258C15.8133 23.4919 15.6394 23.4916 15.4705 23.525L8.95714 24.8507C8.90644 24.8626 8.85379 24.8636 8.8027 24.8535C8.75162 24.8434 8.70327 24.8225 8.66091 24.7922C8.57832 24.7334 8.52037 24.6461 8.49817 24.5472C8.48473 24.4788 8.48978 24.4081 8.5128 24.3424L9.07051 22.7735V22.7588C9.13889 22.5033 9.14093 22.2346 9.07645 21.9781C9.01196 21.7216 8.88308 21.4857 8.702 21.2929C8.52092 21.1001 8.29363 20.9567 8.04165 20.8763C7.78968 20.7959 7.52134 20.7811 7.26205 20.8334C7.04878 20.8763 6.84693 20.9637 6.66958 21.0897C6.49222 21.2157 6.34334 21.3775 6.23257 21.5648L4.71485 24.1431C3.91751 25.499 3.65044 27.102 3.96514 28.6432C4.25162 30.0542 5.08673 31.2938 6.28686 32.0893C7.487 32.8848 8.95392 33.1712 10.3651 32.8855C11.5384 32.6475 12.5692 31.9532 13.2307 30.9553C13.8921 29.9574 14.1302 28.7377 13.8925 27.5643L13.8851 27.5607Z" fill="#E8AA26"/>
+<path id="Vector 8" d="M22.0234 8.5002C22.0234 8.5002 20.9334 8.70078 19.6546 9.47807C18.3759 10.2553 17.5626 10.9766 17.5626 10.9766" stroke="#3E414D" stroke-width="1.79211" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector 9" d="M8.93741 12.5069C8.93741 12.5069 9.99721 12.2652 11.4921 12.1978C12.0193 12.1741 12.4915 12.2019 12.8819 12.248" stroke="#3E414D" stroke-width="1.79211" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Eye_01" d="M11.375 17C12.3415 17 13.125 16.2165 13.125 15.25C13.125 14.2835 12.3415 13.5 11.375 13.5C10.4085 13.5 9.625 14.2835 9.625 15.25C9.625 16.2165 10.4085 17 11.375 17Z" fill="#3E414D"/>
+<rect id="Rectangle 258" x="19.3125" y="12" width="2.6875" height="4.6875" rx="1.34375" fill="#494D59"/>
+<path id="Ellipse 22" d="M19.9136 22.0098C18.5912 21.1146 16.9376 20.6969 15.2307 20.9594C14.884 21.0127 14.5477 21.0922 14.2237 21.1954" stroke="#9A695E" stroke-width="2.15054" stroke-linecap="round"/>
+</g>
+</svg>
diff --git a/public/icon/arrow-left-icon.svg b/public/icon/arrow-left-icon.svg
new file mode 100644
index 00000000..a54a7cb4
--- /dev/null
+++ b/public/icon/arrow-left-icon.svg
@@ -0,0 +1,5 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ic/chevron-left/md">
+<path id="Vector" d="M23 28L13 18L23 8" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/icon/profile-icon.svg b/public/icon/profile-icon.svg
new file mode 100644
index 00000000..e7109ea6
--- /dev/null
+++ b/public/icon/profile-icon.svg
@@ -0,0 +1,6 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ic/search/md">
+<path id="Vector" d="M28 29.25V26.75C28 25.4239 27.4732 24.1521 26.5355 23.2145C25.5978 22.2768 24.3261 21.75 23 21.75H13C11.6739 21.75 10.4021 22.2768 9.46447 23.2145C8.52678 24.1521 8 25.4239 8 26.75V29.25" stroke="#050505" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M18 16.75C20.7614 16.75 23 14.5114 23 11.75C23 8.98858 20.7614 6.75 18 6.75C15.2386 6.75 13 8.98858 13 11.75C13 14.5114 15.2386 16.75 18 16.75Z" stroke="#050505" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/icon/search-icon.svg b/public/icon/search-icon.svg
new file mode 100644
index 00000000..02de48b2
--- /dev/null
+++ b/public/icon/search-icon.svg
@@ -0,0 +1,6 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ic/search/md">
+<path id="Vector" d="M16.75 26.75C22.2728 26.75 26.75 22.2728 26.75 16.75C26.75 11.2272 22.2728 6.75 16.75 6.75C11.2272 6.75 6.75 11.2272 6.75 16.75C6.75 22.2728 11.2272 26.75 16.75 26.75Z" stroke="#050505" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M29.25 29.25L23.8125 23.8125" stroke="#050505" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/icon/share-icon.svg b/public/icon/share-icon.svg
new file mode 100644
index 00000000..4d1c6d03
--- /dev/null
+++ b/public/icon/share-icon.svg
@@ -0,0 +1,7 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ic/share/md">
+<path id="Vector" d="M9 18V26C9 26.5304 9.23705 27.0391 9.65901 27.4142C10.081 27.7893 10.6533 28 11.25 28H24.75C25.3467 28 25.919 27.7893 26.341 27.4142C26.7629 27.0391 27 26.5304 27 26V18" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M22 11L18 7L14 11" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M18 7V21" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/public/lg.svg b/public/lg.svg
new file mode 100644
index 00000000..a4d3364f
--- /dev/null
+++ b/public/lg.svg
@@ -0,0 +1,5 @@
+<svg width="172" height="48" viewBox="0 0 172 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42 14L25.9583 6.20066C25.6963 6.07327 25.3918 6.06648 25.1243 6.18205L7.03437 14L25.0813 22.7743C25.3726 22.9159 25.7144 22.9077 25.9985 22.7523L42 14Z" fill="#2B2B2B"/>
+<path d="M7.03437 14L25.0813 22.7743C25.3726 22.9159 25.7144 22.9077 25.9985 22.7523L42 14L25.9583 6.20066C25.6963 6.07327 25.3918 6.06648 25.1243 6.18205L7.03437 14ZM7.03437 14C7.03437 14 6.08474 16.3916 6.00597 18C5.90857 19.989 7.03437 23 7.03437 23M42 23L25.9985 31.7523C25.7144 31.9077 25.3726 31.9159 25.0813 31.7743L7.03437 23M7.03437 23C7.03437 23 6.00597 26.0087 6.00597 28C6.00597 29.9913 7.03437 33 7.03437 33L25.0813 41.7743C25.3726 41.9159 25.7144 41.9077 25.9985 41.7523L42 33" stroke="#2B2B2B" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M69.208 18.712H63.15V21.988H68.87V26.304H63.15V29.684H69.208V34H58.054V14.396H69.208V18.712ZM83.0741 27.37C83.0741 26.954 82.9961 26.564 82.8401 26.2C82.7015 25.8187 82.4935 25.4893 82.2161 25.212C81.9388 24.9347 81.6095 24.718 81.2281 24.562C80.8641 24.3887 80.4655 24.302 80.0321 24.302C79.6161 24.302 79.2261 24.38 78.8621 24.536C78.4981 24.692 78.1775 24.9087 77.9001 25.186C77.6401 25.4633 77.4235 25.7927 77.2501 26.174C77.0941 26.538 77.0161 26.928 77.0161 27.344C77.0161 27.76 77.0941 28.15 77.2501 28.514C77.4061 28.878 77.6228 29.1987 77.9001 29.476C78.1775 29.736 78.4981 29.9527 78.8621 30.126C79.2435 30.282 79.6421 30.36 80.0581 30.36C80.4741 30.36 80.8641 30.282 81.2281 30.126C81.5921 29.97 81.9041 29.7533 82.1641 29.476C82.4415 29.1987 82.6581 28.878 82.8141 28.514C82.9875 28.15 83.0741 27.7687 83.0741 27.37ZM77.1461 40.656H72.4401V20.662H77.1461V22.144C78.1515 20.8787 79.5208 20.246 81.2541 20.246C82.2075 20.246 83.0915 20.4367 83.9061 20.818C84.7381 21.182 85.4575 21.6847 86.0641 22.326C86.6708 22.9673 87.1388 23.7213 87.4681 24.588C87.8148 25.4547 87.9881 26.382 87.9881 27.37C87.9881 28.358 87.8148 29.2767 87.4681 30.126C87.1388 30.9753 86.6708 31.7207 86.0641 32.362C85.4748 33.0033 84.7728 33.506 83.9581 33.87C83.1435 34.234 82.2595 34.416 81.3061 34.416C79.6421 34.416 78.2555 33.844 77.1461 32.7V40.656ZM95.3766 20.662V34H90.6706V20.662H95.3766ZM90.3586 15.54C90.3586 15.176 90.4279 14.838 90.5666 14.526C90.7053 14.1967 90.8959 13.9107 91.1386 13.668C91.3813 13.4253 91.6586 13.2347 91.9706 13.096C92.2999 12.9573 92.6466 12.888 93.0106 12.888C93.3746 12.888 93.7126 12.9573 94.0246 13.096C94.3539 13.2347 94.6399 13.4253 94.8826 13.668C95.1253 13.9107 95.3159 14.1967 95.4546 14.526C95.5933 14.838 95.6626 15.176 95.6626 15.54C95.6626 15.904 95.5933 16.2507 95.4546 16.58C95.3159 16.892 95.1253 17.1693 94.8826 17.412C94.6399 17.6547 94.3539 17.8453 94.0246 17.984C93.7126 18.1227 93.3746 18.192 93.0106 18.192C92.6466 18.192 92.2999 18.1227 91.9706 17.984C91.6586 17.8453 91.3813 17.6547 91.1386 17.412C90.8959 17.1693 90.7053 16.892 90.5666 16.58C90.4279 16.2507 90.3586 15.904 90.3586 15.54ZM102.96 27.266C102.96 27.6993 103.038 28.1067 103.194 28.488C103.35 28.852 103.558 29.1727 103.818 29.45C104.096 29.7273 104.416 29.944 104.78 30.1C105.162 30.256 105.569 30.334 106.002 30.334C106.418 30.334 106.808 30.256 107.172 30.1C107.554 29.944 107.874 29.7273 108.134 29.45C108.412 29.1727 108.628 28.852 108.784 28.488C108.958 28.1067 109.044 27.708 109.044 27.292C109.044 26.8587 108.958 26.46 108.784 26.096C108.628 25.732 108.412 25.4113 108.134 25.134C107.857 24.8567 107.528 24.64 107.146 24.484C106.782 24.328 106.401 24.25 106.002 24.25C105.586 24.25 105.196 24.3367 104.832 24.51C104.468 24.666 104.148 24.8827 103.87 25.16C103.593 25.42 103.368 25.732 103.194 26.096C103.038 26.46 102.96 26.85 102.96 27.266ZM113.516 20.662V33.09C113.516 33.8353 113.473 34.5027 113.386 35.092C113.3 35.6813 113.178 36.2013 113.022 36.652C112.814 37.224 112.485 37.7527 112.034 38.238C111.601 38.7407 111.072 39.174 110.448 39.538C109.824 39.902 109.114 40.188 108.316 40.396C107.536 40.604 106.687 40.708 105.768 40.708C104.728 40.708 103.775 40.578 102.908 40.318C102.042 40.058 101.279 39.694 100.62 39.226C99.9791 38.7753 99.4505 38.238 99.0345 37.614C98.6185 37.0073 98.3411 36.34 98.2025 35.612H103.506C103.836 36.496 104.581 36.938 105.742 36.938C106.73 36.938 107.484 36.6607 108.004 36.106C108.542 35.5513 108.81 34.78 108.81 33.792V32.518C108.464 32.8473 108.126 33.1247 107.796 33.35C107.484 33.558 107.164 33.7313 106.834 33.87C106.505 34.0087 106.158 34.104 105.794 34.156C105.43 34.2253 105.032 34.26 104.598 34.26C103.645 34.26 102.77 34.0953 101.972 33.766C101.175 33.4367 100.482 32.9773 99.8925 32.388C99.3205 31.7987 98.8698 31.0967 98.5405 30.282C98.2285 29.45 98.0725 28.5313 98.0725 27.526C98.0725 26.5033 98.2458 25.5587 98.5925 24.692C98.9391 23.808 99.4071 23.0453 99.9965 22.404C100.603 21.7453 101.314 21.234 102.128 20.87C102.96 20.4887 103.862 20.298 104.832 20.298C106.41 20.298 107.736 20.8873 108.81 22.066V20.662H113.516ZM117.178 20.662H121.884V22.846C122.387 22.0487 123.002 21.442 123.73 21.026C124.458 20.5927 125.308 20.376 126.278 20.376C126.4 20.376 126.53 20.376 126.668 20.376C126.824 20.376 126.998 20.3933 127.188 20.428V24.926C126.564 24.614 125.888 24.458 125.16 24.458C124.068 24.458 123.245 24.7873 122.69 25.446C122.153 26.0873 121.884 27.032 121.884 28.28V34H117.178V20.662ZM133.81 27.292C133.81 27.7253 133.888 28.1327 134.044 28.514C134.2 28.878 134.408 29.1987 134.668 29.476C134.945 29.7533 135.266 29.97 135.63 30.126C136.011 30.282 136.419 30.36 136.852 30.36C137.268 30.36 137.658 30.282 138.022 30.126C138.403 29.97 138.724 29.7533 138.984 29.476C139.261 29.1987 139.478 28.878 139.634 28.514C139.807 28.15 139.894 27.76 139.894 27.344C139.894 26.928 139.807 26.538 139.634 26.174C139.478 25.7927 139.261 25.4633 138.984 25.186C138.724 24.9087 138.403 24.692 138.022 24.536C137.658 24.38 137.268 24.302 136.852 24.302C136.419 24.302 136.011 24.38 135.63 24.536C135.266 24.692 134.945 24.9087 134.668 25.186C134.408 25.4633 134.2 25.784 134.044 26.148C133.888 26.4947 133.81 26.876 133.81 27.292ZM139.738 20.662H144.47V34H139.738V32.518C138.733 33.7833 137.372 34.416 135.656 34.416C134.685 34.416 133.793 34.2427 132.978 33.896C132.163 33.532 131.453 33.0293 130.846 32.388C130.239 31.7467 129.763 30.9927 129.416 30.126C129.087 29.2593 128.922 28.3147 128.922 27.292C128.922 26.3387 129.087 25.4373 129.416 24.588C129.745 23.7213 130.205 22.9673 130.794 22.326C131.383 21.6847 132.085 21.182 132.9 20.818C133.715 20.4367 134.616 20.246 135.604 20.246C137.268 20.246 138.646 20.8267 139.738 21.988V20.662ZM147.673 20.662H152.379V22.3C153.661 21.0693 155.1 20.454 156.695 20.454C158.671 20.454 160.179 21.286 161.219 22.95C162.276 21.2687 163.784 20.428 165.743 20.428C166.367 20.428 166.956 20.5233 167.511 20.714C168.065 20.8873 168.542 21.1733 168.941 21.572C169.339 21.9533 169.651 22.456 169.877 23.08C170.119 23.704 170.241 24.458 170.241 25.342V34H165.535V27.422C165.535 26.746 165.483 26.1913 165.379 25.758C165.292 25.3247 165.153 24.9867 164.963 24.744C164.789 24.5013 164.581 24.3367 164.339 24.25C164.096 24.1633 163.836 24.12 163.559 24.12C162.051 24.12 161.297 25.2207 161.297 27.422V34H156.591V27.422C156.591 26.746 156.547 26.1913 156.461 25.758C156.374 25.3073 156.244 24.952 156.071 24.692C155.915 24.432 155.707 24.2587 155.447 24.172C155.187 24.068 154.883 24.016 154.537 24.016C154.242 24.016 153.965 24.0593 153.705 24.146C153.445 24.2327 153.211 24.406 153.003 24.666C152.812 24.9087 152.656 25.2553 152.535 25.706C152.431 26.1393 152.379 26.7113 152.379 27.422V34H147.673V20.662Z" fill="#2B2B2B"/>
+</svg>
diff --git a/public/logo-google.svg b/public/logo-google.svg
new file mode 100644
index 00000000..5b169484
--- /dev/null
+++ b/public/logo-google.svg
@@ -0,0 +1,15 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 59.25C3.105 59.25 0.75 56.895 0.75 54V6C0.75 3.105 3.105 0.75 6 0.75H54C56.895 0.75 59.25 3.105 59.25 6V54C59.25 56.895 56.895 59.25 54 59.25H6Z" fill="#F5F7FA"/>
+<path d="M54 1.5C56.475 1.5 58.5 3.525 58.5 6V54C58.5 56.475 56.475 58.5 54 58.5H6C3.525 58.5 1.5 56.475 1.5 54V6C1.5 3.525 3.525 1.5 6 1.5H54ZM54 0H6C2.7 0 0 2.7 0 6V54C0 57.3 2.7 60 6 60H54C57.3 60 60 57.3 60 54V6C60 2.7 57.3 0 54 0Z" fill="#E6E6EA"/>
+<g clip-path="url(#clip0_2103_2506)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.5001 30.3072C43.5012 29.381 43.4174 28.4565 43.2496 27.5449H30.272V32.7669H37.6861C37.5322 33.592 37.2093 34.378 36.7369 35.0775C36.2645 35.777 35.6524 36.3754 34.9374 36.8366V40.2246H39.3888C41.9934 37.8744 43.4962 34.4126 43.4962 30.3047L43.5001 30.3072Z" fill="#3E82F1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.2759 43.4993C33.9953 43.4993 37.1139 42.2911 39.3927 40.2295L34.9414 36.8415C33.7072 37.6516 32.1291 38.1311 30.2759 38.1311C26.6876 38.1311 23.6508 35.7554 22.5685 32.5645H17.9653V36.0631C19.112 38.2993 20.8706 40.1789 23.0445 41.4921C25.2185 42.8053 27.7222 43.5002 30.2759 43.4993Z" fill="#32A753"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.5683 32.5633C21.9921 30.9003 21.9921 29.0973 22.5683 27.4342V23.9355H17.9651C17.0017 25.8173 16.5 27.8935 16.5 29.9988C16.5 32.1041 17.0017 34.1803 17.9651 36.062L22.5683 32.5633Z" fill="#F9BB00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30.2758 21.8682C32.299 21.8682 34.1146 22.5499 35.5421 23.8878L39.4925 20.0152C37.1072 17.8366 33.9887 16.5 30.2784 16.5C27.7246 16.4991 25.2209 17.194 23.047 18.5072C20.873 19.8203 19.1145 21.7 17.9678 23.9361L22.5709 27.4348C23.6533 24.2439 26.6901 21.8682 30.2784 21.8682H30.2758Z" fill="#E74133"/>
+</g>
+<defs>
+<clipPath id="clip0_2103_2506">
+<rect width="27" height="27" fill="white" transform="translate(16.5 16.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/logo-kakao.svg b/public/logo-kakao.svg
new file mode 100644
index 00000000..f546e64d
--- /dev/null
+++ b/public/logo-kakao.svg
@@ -0,0 +1,13 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 59.25C3.105 59.25 0.75 56.895 0.75 54V6C0.75 3.105 3.105 0.75 6 0.75H54C56.895 0.75 59.25 3.105 59.25 6V54C59.25 56.895 56.895 59.25 54 59.25H6Z" fill="#F5F7FA"/>
+<path d="M54 1.5C56.475 1.5 58.5 3.525 58.5 6V54C58.5 56.475 56.475 58.5 54 58.5H6C3.525 58.5 1.5 56.475 1.5 54V6C1.5 3.525 3.525 1.5 6 1.5H54ZM54 0H6C2.7 0 0 2.7 0 6V54C0 57.3 2.7 60 6 60H54C57.3 60 60 57.3 60 54V6C60 2.7 57.3 0 54 0Z" fill="#E6E6EA"/>
+<g clip-path="url(#clip0_2103_2515)">
+<path d="M25.9629 30.5875H27.6908L26.8268 28.1934L25.9629 30.5875Z" fill="#331D1E"/>
+<path d="M30 18C21.7154 18 15 23.164 15 29.5349C15 33.6536 17.8082 37.2716 22.0312 39.3085C21.8019 40.0808 20.5543 44.2798 20.5053 44.6103C20.5053 44.6103 20.475 44.8579 20.6394 44.9522C20.6944 44.9792 20.7545 44.9951 20.816 44.9987C20.8775 45.0023 20.9392 44.9937 20.9971 44.9733C21.4702 44.9086 26.4779 41.4833 27.3433 40.8939C28.2235 41.0131 29.1113 41.0718 30 41.0697C38.2846 41.0697 45 35.9058 45 29.5349C45 23.164 38.2846 18 30 18ZM22.5764 27.7441C22.5577 29.3759 22.5909 31.0921 22.5635 32.6985C22.5548 33.2119 22.2519 33.3653 21.8423 33.5116C21.796 33.5275 21.7462 33.5309 21.6981 33.5214C21.2293 33.4314 20.8558 33.2682 20.8442 32.6999C20.8111 31.0949 20.8543 29.3759 20.8313 27.7441C20.4346 27.7287 19.8692 27.7596 19.5014 27.7441C18.9909 27.7118 18.6361 27.3953 18.6577 26.924C18.6793 26.4528 18.9375 26.1138 19.5101 26.1053C20.863 26.0857 22.5389 26.0857 23.8918 26.1053C24.4688 26.1138 24.7255 26.4542 24.7428 26.924C24.7601 27.3939 24.4111 27.7118 23.9019 27.7441C23.5385 27.7596 22.9745 27.7287 22.5764 27.7441ZM29.8457 33.4342C29.6727 33.511 29.4848 33.5508 29.2947 33.551C28.9341 33.551 28.6587 33.4103 28.5736 33.1782L28.1409 32.0838H25.5072L25.0745 33.1782C24.9909 33.4075 24.7154 33.551 24.3534 33.551C24.1637 33.551 23.9763 33.5111 23.8038 33.4342C23.5644 33.3273 23.3351 33.0319 23.5976 32.2357L25.6731 26.9212C25.7601 26.6871 25.916 26.4833 26.1212 26.3351C26.3265 26.187 26.5719 26.1012 26.8269 26.0885C27.0817 26.1026 27.3267 26.1891 27.5317 26.3373C27.7367 26.4855 27.8928 26.689 27.9808 26.9226L30.049 32.2343C30.313 33.0319 30.0837 33.3329 29.8457 33.4342ZM34.2188 33.4342H31.4423C31.2273 33.4384 31.0193 33.3593 30.8639 33.2143C30.7085 33.0693 30.6183 32.8702 30.613 32.6605V26.9325C30.6222 26.71 30.7193 26.4996 30.884 26.3454C31.0486 26.1911 31.2681 26.105 31.4964 26.105C31.7247 26.105 31.9442 26.1911 32.1088 26.3454C32.2735 26.4996 32.3706 26.71 32.3798 26.9325V31.8911H34.2188C34.3269 31.8847 34.4353 31.9 34.5373 31.936C34.6392 31.972 34.7325 32.0279 34.8114 32.1004C34.8903 32.1729 34.9532 32.2603 34.9962 32.3574C35.0391 32.4544 35.0613 32.559 35.0613 32.6647C35.0613 32.7705 35.0391 32.8751 34.9962 32.9721C34.9532 33.0692 34.8903 33.1566 34.8114 33.2291C34.7325 33.3015 34.6392 33.3575 34.5373 33.3935C34.4353 33.4295 34.3269 33.4448 34.2188 33.4384V33.4342ZM40.9976 32.7984C40.9751 32.9649 40.9022 33.121 40.7881 33.2469C40.6741 33.3727 40.5242 33.4625 40.3576 33.5048C40.1909 33.5471 40.0152 33.54 39.8527 33.4843C39.6903 33.4286 39.5485 33.3269 39.4457 33.1922L37.4163 30.5716L37.1163 30.8642V32.7055C37.1163 32.9294 37.0252 33.1441 36.8629 33.3023C36.7006 33.4606 36.4805 33.5495 36.251 33.5495C36.0214 33.5495 35.8013 33.4606 35.639 33.3023C35.4768 33.1441 35.3856 32.9294 35.3856 32.7055V26.9381C35.3856 26.7143 35.4768 26.4996 35.639 26.3413C35.8013 26.183 36.0214 26.0941 36.251 26.0941C36.4805 26.0941 36.7006 26.183 36.8629 26.3413C37.0252 26.4996 37.1163 26.7143 37.1163 26.9381V28.7471L39.5308 26.3923C39.594 26.3314 39.669 26.2833 39.7515 26.2509C39.8339 26.2186 39.9222 26.2025 40.0111 26.2038C40.2272 26.2093 40.4335 26.2925 40.5906 26.4374C40.7477 26.5823 40.8443 26.7786 40.862 26.9887C40.8698 27.0825 40.857 27.1768 40.8244 27.2654C40.7918 27.3539 40.7402 27.4346 40.6731 27.5022L38.6971 29.4251L40.8274 32.178C40.9653 32.3566 41.025 32.5812 40.9933 32.8026L40.9976 32.7984Z" fill="#331D1E"/>
+</g>
+<defs>
+<clipPath id="clip0_2103_2515">
+<rect width="30" height="27" fill="white" transform="translate(15 18)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/logo-naver.svg b/public/logo-naver.svg
new file mode 100644
index 00000000..dbec93dd
--- /dev/null
+++ b/public/logo-naver.svg
@@ -0,0 +1,5 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 59.25C3.105 59.25 0.75 56.895 0.75 54V6C0.75 3.105 3.105 0.75 6 0.75H54C56.895 0.75 59.25 3.105 59.25 6V54C59.25 56.895 56.895 59.25 54 59.25H6Z" fill="#F5F7FA"/>
+<path d="M54 1.5C56.475 1.5 58.5 3.525 58.5 6V54C58.5 56.475 56.475 58.5 54 58.5H6C3.525 58.5 1.5 56.475 1.5 54V6C1.5 3.525 3.525 1.5 6 1.5H54ZM54 0H6C2.7 0 0 2.7 0 6V54C0 57.3 2.7 60 6 60H54C57.3 60 60 57.3 60 54V6C60 2.7 57.3 0 54 0Z" fill="#E6E6EA"/>
+<path d="M34.0952 30.8096L25.5752 18.5996H18.5103V41.3996H25.9052V29.1896L34.4252 41.3996H41.4902V18.5996H34.0952V30.8096Z" fill="#03C75A"/>
+</svg>
diff --git a/public/next.svg b/public/next.svg
deleted file mode 100644
index 5174b28c..00000000
--- a/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/public/vercel.svg b/public/vercel.svg
deleted file mode 100644
index d2f84222..00000000
--- a/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file
diff --git a/src/apis/auth.ts b/src/apis/auth.ts
new file mode 100644
index 00000000..8244a9b4
--- /dev/null
+++ b/src/apis/auth.ts
@@ -0,0 +1,9 @@
+import type { PostSigninRequestType, PostSigninResponseType } from '@/schema/auth';
+import httpClient from '.';
+
+const postSignin = async (request: PostSigninRequestType): Promise<PostSigninResponseType> => {
+  const response = await httpClient.post('/auth/signIn', request);
+  return response.data;
+};
+
+export default postSignin;
diff --git a/src/apis/index.ts b/src/apis/index.ts
index 29949fc2..4167407d 100644
--- a/src/apis/index.ts
+++ b/src/apis/index.ts
@@ -8,3 +8,45 @@ const httpClient = axios.create({
 });
 
 export default httpClient;
+
+// NOTE: eslint-disable no-param-reassign 미해결로 인한 설정
+httpClient.interceptors.request.use((config) => {
+  const accessToken = localStorage.getItem('accessToken');
+  /* eslint-disable no-param-reassign */
+  if (accessToken) config.headers.Authorization = `Bearer ${accessToken}`;
+  /* eslint-enable no-param-reassign */
+  return config;
+});
+
+httpClient.interceptors.response.use(
+  (response) => response,
+
+  (error) => {
+    if (error.response && error.response.status === 401) {
+      const refreshToken = localStorage.getItem('refreshToken');
+
+      if (!refreshToken) {
+        window.location.href = '/auth/SignIn';
+        return Promise.reject(error);
+      }
+
+      return httpClient
+        .post('/auth/refresh-token', null, {
+          headers: { Authorization: `Bearer ${refreshToken}` },
+        })
+        .then((response) => {
+          const { accessToken, refreshToken: newRefreshToken } = response.data;
+          localStorage.setItem('accessToken', accessToken);
+          localStorage.setItem('refreshToken', newRefreshToken);
+
+          const originalRequest = error.config;
+          return httpClient(originalRequest);
+        })
+        .catch(() => {
+          window.location.href = '/auth/SignIn';
+          return Promise.reject(error);
+        });
+    }
+    return Promise.reject(error);
+  },
+);
diff --git a/src/components/Card/CommentCard.tsx b/src/components/Card/CommentCard.tsx
new file mode 100644
index 00000000..a58f0e6f
--- /dev/null
+++ b/src/components/Card/CommentCard.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import Image from 'next/image';
+import { sizeStyles, textSizeStyles, gapStyles, paddingStyles, contentWidthStyles } from '@/styles/CommentCardStyles';
+
+export interface CommentCardProps {
+  status: 'edit' | 'complete';
+}
+
+function CommentCard({ status }: CommentCardProps) {
+  return (
+    <div
+      className={`bg-slate-100 border-t border-slate-300 flex-col justify-start items-start gap-2.5 inline-flex ${sizeStyles.sm} ${sizeStyles.md} ${sizeStyles.lg} ${paddingStyles.sm} ${paddingStyles.md} ${paddingStyles.lg}`}
+    >
+      <div className='justify-start items-start gap-4 inline-flex'>
+        <div className='w-12 h-12 relative'>
+          <div className='w-12 h-12 bg-zinc-300 rounded-full overflow-hidden flex items-center justify-center'>
+            <Image src='/ProfileTestImage.jpg' alt='프로필 이미지' layout='fill' objectFit='cover' className='rounded-full' />{' '}
+          </div>
+        </div>
+        <div className={`flex-col justify-start items-start ${gapStyles.sm} ${gapStyles.md} ${gapStyles.lg} inline-flex ${contentWidthStyles.sm} ${contentWidthStyles.md} ${contentWidthStyles.lg}`}>
+          <div className='justify-between items-center w-full inline-flex'>
+            <div className='justify-start items-start gap-2 flex'>
+              <div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.name} ${textSizeStyles.md.name} ${textSizeStyles.lg.name}`}>
+                {/* 테스트 텍스트입니다. */}
+                지킬과 하이드
+              </div>
+              <div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.time} ${textSizeStyles.md.time} ${textSizeStyles.lg.time}`}>
+                {/* 테스트 텍스트입니다. */}
+                1시간 전
+              </div>
+            </div>
+            {status === 'edit' && (
+              <div className='justify-start items-start gap-4 flex'>
+                <div className={`text-neutral-700 underline leading-[18px] cursor-pointer ${textSizeStyles.sm.action} ${textSizeStyles.md.action} ${textSizeStyles.lg.action}`}>수정</div>
+                <div className={`text-red-400 underline leading-[18px] cursor-pointer ${textSizeStyles.sm.action} ${textSizeStyles.md.action} ${textSizeStyles.lg.action}`}>삭제</div>
+              </div>
+            )}
+          </div>
+          <div
+            className={`w-full text-zinc-800 font-normal font-pretendard ${textSizeStyles.sm.content} ${textSizeStyles.md.content} ${textSizeStyles.lg.content} ${contentWidthStyles.sm} ${contentWidthStyles.md} ${contentWidthStyles.lg}`}
+          >
+            {/* 테스트 텍스트입니다. */}
+            오늘 하루 우울했었는데 덕분에 많은 힘 얻고 갑니다. 연금술사 책 다시 사서 오랜만에 읽어봐야겠어요!
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default CommentCard;
diff --git a/src/components/Card/EpigramCard.tsx b/src/components/Card/EpigramCard.tsx
new file mode 100644
index 00000000..07ceb392
--- /dev/null
+++ b/src/components/Card/EpigramCard.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+
+// figma 상으로는 sm ~ 3xl 사이즈로 구현되어 있는데, tailwind 환경을 반영해
+// xs ~ 2xl 으로 정의했습니다.
+const sizeStyles = {
+  xs: 'w-[286px] max-h-[132px]',
+  sm: 'sm:w-[312px] sm:max-h-[152px]',
+  md: 'md:w-[384px] md:max-h-[180px]',
+  lg: 'lg:w-[540px] lg:max-h-[160px]',
+  xl: 'xl:w-[640px] xl:max-h-[196px]',
+  '2xl': '2xl:w-[744px] 2xl:max-h-[196px]',
+};
+
+const textSizeStyles = {
+  xs: 'text-xs',
+  sm: 'sm:text-sm',
+  md: 'md:text-base',
+  lg: 'lg:text-xl',
+  xl: 'xl:text-2xl',
+  '2xl': '2xl:text-2xl',
+};
+
+function EpigramCard() {
+  return (
+    <div className={`relative flex-col justify-start items-end gap-2 inline-flex ${sizeStyles.xs} ${sizeStyles.sm} ${sizeStyles.md} ${sizeStyles.lg} ${sizeStyles.xl} ${sizeStyles['2xl']}`}>
+      <div className='w-full p-[22px] bg-white rounded-[14.67px] shadow border border-zinc-100 flex-col justify-start items-start flex relative overflow-hidden'>
+        {/* eslint-disable-next-line */}
+        <div className='absolute inset-0 bg-stripes w-full h-full'></div> {/* 줄무늬를 만들려면 비어있는 div가 필요합니다. */}
+        <div className='relative w-full z-10 flex flex-col justify-start items-start flex-1'>
+          <div className='self-stretch flex-col justify-start items-start gap-2 flex'>
+            <div
+              className={`self-stretch ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-neutral-700 font-normal font-iropkeBatang leading-normal`}
+            >
+              {/* 테스트 텍스트입니다. */}
+              오랫동안 꿈을 그리는 사람은 마침내 그 꿈을 닮아 간다.
+            </div>
+            <div
+              className={`self-stretch ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-right text-slate-400 font-normal font-iropkeBatang leading-normal`}
+            >
+              {/* 테스트 텍스트입니다. */}- 앙드레 말로 -
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className='justify-start items-start gap-2 inline-flex'>
+        <div
+          className={`text-right ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-slate-400 font-normal font-iropkeBatang leading-normal`}
+        >
+          {/* 테스트 텍스트입니다. */}
+          #나아가야할때
+        </div>
+        <div
+          className={`text-right ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-slate-400 font-normal font-iropkeBatang leading-normal`}
+        >
+          {/* 테스트 텍스트입니다. */}
+          #꿈을이루고싶을때
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default EpigramCard;
diff --git a/src/components/Emotion/EmotionCard.tsx b/src/components/Emotion/EmotionCard.tsx
new file mode 100644
index 00000000..1896f7cd
--- /dev/null
+++ b/src/components/Emotion/EmotionCard.tsx
@@ -0,0 +1,113 @@
+/*
+  1개의 감정 아이콘 카드를 랜더링 합니다.
+  아이콘의 타입, 상태, 크기, 클릭 이벤트를 관리합니다.
+  아이콘 타입과 상태에 따라 아이콘의 모양과 스타일을 조정합니다.
+ */
+
+import React from 'react';
+import cn from '@/lib/utils';
+import Image from 'next/image';
+import { EmotionIconCardProps } from '@/types/EmotionTypes';
+
+// 아이콘 파일 경로 매핑
+const iconPaths = {
+  Color: {
+    감동: '/icon/Color/HeartFaceColorIcon.svg',
+    기쁨: '/icon/Color/SmileFaceColorIcon.svg',
+    고민: '/icon/Color/ThinkFaceColorIcon.svg',
+    슬픔: '/icon/Color/SadFaceColorIcon.svg',
+    분노: '/icon/Color/AngryFaceColorIcon.svg',
+  },
+  BW: {
+    감동: '/icon/BW/HeartFaceBWIcon.svg',
+    기쁨: '/icon/BW/SmileFaceBWIcon.svg',
+    고민: '/icon/BW/ThinkFaceBWIcon.svg',
+    슬픔: '/icon/BW/SadFaceBWIcon.svg',
+    분노: '/icon/BW/AngryFaceBWIcon.svg',
+  },
+};
+
+// EmotionIconCard 컴포넌트 함수 선언
+function EmotionIconCard({ iconType = '감동', state = 'Default', size = 'sm', onClick }: EmotionIconCardProps) {
+  // 크기에 따른 클래스 설정
+  let sizeClass = '';
+  let iconSizeClass = '';
+  let textSizeClass = '';
+  switch (size) {
+    case 'lg':
+      sizeClass = 'w-20 h-28';
+      iconSizeClass = 'w-12 h-12';
+      textSizeClass = 'text-base leading-relaxed';
+      break;
+    case 'md':
+      sizeClass = 'w-16 h-24';
+      iconSizeClass = 'w-10 h-10';
+      textSizeClass = 'text-sm leading-normal';
+      break;
+    case 'sm':
+    default:
+      sizeClass = 'w-14 h-21';
+      iconSizeClass = 'w-8 h-8';
+      textSizeClass = 'text-xs leading-tight';
+      break;
+  }
+
+  // 상태에 따른 아이콘 경로 설정
+  const iconPath = state === 'Clicked' || state === 'Default' ? iconPaths.Color[iconType] : iconPaths.BW[iconType];
+
+  // 상태에 따른 클래스 설정
+  let borderClass = '';
+  const textColorClass = 'text-neutral-400';
+  let backgroundClass = 'bg-slate-400/20';
+  let textVisibilityClass = '';
+
+  if (state === 'Clicked') {
+    textVisibilityClass = 'hidden';
+    backgroundClass = 'bg-transparent';
+
+    // iconType에 따라 다른 border 색상을 설정
+    switch (iconType) {
+      case '감동':
+        borderClass = 'border-4 border-illust-yellow';
+        break;
+      case '기쁨':
+        borderClass = 'border-4 border-illust-green';
+        break;
+      case '고민':
+        borderClass = 'border-4 border-illust-purple';
+        break;
+      case '슬픔':
+        borderClass = 'border-4 border-illust-blue';
+        break;
+      case '분노':
+        borderClass = 'border-4 border-illust-red';
+        break;
+      default:
+        borderClass = 'border-4 border-sub_blue_1';
+        break;
+    }
+  }
+
+  return (
+    <div
+      className={cn(sizeClass, 'flex-col justify-start items-center gap-2 inline-flex')}
+      onClick={onClick}
+      role='button'
+      tabIndex={0}
+      onKeyPress={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          if (onClick) {
+            onClick();
+          }
+        }
+      }}
+    >
+      <div className={cn('w-full aspect-square rounded-2xl justify-center items-center gap-2 inline-flex', borderClass, backgroundClass)}>
+        <Image src={iconPath} alt={iconType} width={32} height={32} className={iconSizeClass} />
+      </div>
+      <div className={cn('text-center font-semibold font-["Pretendard"]', textColorClass, textSizeClass, textVisibilityClass)}>{iconType}</div>
+    </div>
+  );
+}
+
+export default EmotionIconCard;
diff --git a/src/components/Emotion/EmotionSelector.tsx b/src/components/Emotion/EmotionSelector.tsx
new file mode 100644
index 00000000..5a73639e
--- /dev/null
+++ b/src/components/Emotion/EmotionSelector.tsx
@@ -0,0 +1,66 @@
+/*
+  여러 개의 EmotionIconCard를 관리합니다.
+  사용자 인터페이스에 필요한 상호 작용 로직을 포함합니다.
+ */
+
+import React, { useState } from 'react';
+import EmotionIconCard from '@/components/Emotion/EmotionCard';
+import useMediaQuery from '@/hooks/useMediaQuery';
+import { EmotionType, EmotionState } from '@/types/EmotionTypes';
+
+// EmotionSelector 컴포넌트 함수 선언
+function EmotionSelector() {
+  const isTablet = useMediaQuery('(min-width: 768px) and (max-width: 1024px)');
+  const isMobile = useMediaQuery('(max-width: 767px)');
+
+  // 감정 카드 상태 관리
+  const [states, setStates] = useState<Record<EmotionType, EmotionState>>({
+    감동: 'Default',
+    기쁨: 'Default',
+    고민: 'Default',
+    슬픔: 'Default',
+    분노: 'Default',
+  });
+
+  // 감정 카드 클릭 핸들러
+  const handleCardClick = (iconType: EmotionType) => {
+    setStates((prevStates) => {
+      const newStates = { ...prevStates };
+
+      if (prevStates[iconType] === 'Clicked') {
+        // 현재 클릭된 카드가 다시 클릭되면 모두 Default로 설정
+        Object.keys(newStates).forEach((key) => {
+          newStates[key as EmotionType] = 'Default';
+        });
+      } else {
+        // 하나의 카드가 클릭되면 그 카드만 Clicked, 나머지는 Unclicked로 설정
+        Object.keys(newStates).forEach((key) => {
+          newStates[key as EmotionType] = key === iconType ? 'Clicked' : 'Unclicked';
+        });
+      }
+
+      return newStates;
+    });
+  };
+
+  let containerClass = 'w-[544px] h-[136px] gap-4';
+  let cardSize: 'lg' | 'md' | 'sm' = 'lg';
+
+  if (isTablet) {
+    containerClass = 'w-[352px] h-[96px] gap-2';
+    cardSize = 'md';
+  } else if (isMobile) {
+    containerClass = 'w-[312px] h-[84px] gap-2';
+    cardSize = 'sm';
+  }
+
+  return (
+    <div className={`justify-start items-start inline-flex ${containerClass}`}>
+      {(['감동', '기쁨', '고민', '슬픔', '분노'] as const).map((iconType) => (
+        <EmotionIconCard key={iconType} iconType={iconType} size={cardSize} state={states[iconType]} onClick={() => handleCardClick(iconType)} />
+      ))}
+    </div>
+  );
+}
+
+export default EmotionSelector;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
new file mode 100644
index 00000000..d342347f
--- /dev/null
+++ b/src/components/Header/Header.tsx
@@ -0,0 +1,119 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import Image from 'next/image';
+import { useToast } from '../ui/use-toast';
+import LOGO_ICON from '../../../public/epigram-icon.png';
+import ARROW_LEFT_ICON from '../../../public/icon/arrow-left-icon.svg';
+import PROFILE_ICON from '../../../public/icon/profile-icon.svg';
+import SEARCH_ICON from '../../../public/icon/search-icon.svg';
+import SHARE_ICON from '../../../public/icon/share-icon.svg';
+
+// NOTE 네비게이션 바를 나타내는 컴포넌트 입니다.
+// NOTE 상위 컴포넌트에서 Props를 받아 원하는 스타일을 보여줍니다.
+// NOTE 사용 예시
+// NOTE <Header icon='back' routerPage='원하는 페이지 주소' isLogo={false} insteadOfLogo='센터 텍스트' isProfileIcon={false} isShareIcon={false} isButton textInButton='버튼 텍스트' disabled={false} onClick={동작할 함수} />
+// NOTE <Header icon='search' routerPage='/search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />;
+// NOTE icon: 'back'을 사용할 경우 routerPage의 값을 무조건 지정해줘야 합니다.
+// NOTE isLogo={false}일 경우 insteadOfLogo의 값을 무조건 지정해줘야 합니다.
+// NOTE isButton 일 경우 textInButton의 값을 무조건 지정해줘야 합니다.
+// NOTE SHARE_ICON 추가 시 토스트 기능도 사용하려면 해당 컴포넌트 아래 <Toaster /> 를 추가해주세요.
+
+export interface HeaderProps {
+  icon: 'back' | 'search' | '';
+  routerPage: string;
+  isLogo: boolean;
+  insteadOfLogo: string;
+  isProfileIcon: boolean;
+  isShareIcon: boolean;
+  isButton: boolean;
+  textInButton: string;
+  disabled: boolean;
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+function Header({ isLogo, icon, insteadOfLogo, isButton, isProfileIcon, isShareIcon, textInButton, routerPage, disabled, onClick }: HeaderProps) {
+  const router = useRouter();
+  const { toast } = useToast();
+
+  // 페이지 이동 함수
+  const handleNavigateTo = (path: string) => {
+    router.push(path);
+  };
+
+  // 현재 링크 복사 함수
+  const handleCopyToClipboard = async () => {
+    try {
+      // 현재 URL 가져오기
+      const currentURL = window.location.href;
+      // 클립보드에 복사하기
+      await navigator.clipboard.writeText(currentURL);
+      toast({
+        title: '성공',
+        description: '링크가 클립보드에 복사되었습니다!',
+      });
+    } catch (err) {
+      toast({
+        title: '실패',
+        description: '링크 복사에 실패했습니다. 다시 시도해 주세요.',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <nav className='bg-white h-13 px-6 py-4 md:px-28 md:py-5 lg:px-30 lg:py-6'>
+      <div className='container flex justify-between items-center'>
+        <div className='flex items-center space-x-4'>
+          {icon === 'back' && (
+            <button className='w-5 h-5 lg:w-9 lg:h-9' type='button' onClick={() => handleNavigateTo(routerPage)} aria-label='뒤로가기 버튼'>
+              <Image src={ARROW_LEFT_ICON} alt='뒤로가기 버튼 이미지' />
+            </button>
+          )}
+          {icon === 'search' && (
+            <button className='w-5 h-5 lg:w-9 lg:h-9' type='button' onClick={() => handleNavigateTo('/search')} aria-label='검색 버튼'>
+              <Image src={SEARCH_ICON} alt='검색 버튼 이미지' />
+            </button>
+          )}
+        </div>
+        <div className='flex-grow flex justify-center'>
+          {isLogo ? (
+            <button className='flex items-center gap-2' type='button' onClick={() => handleNavigateTo('/')} aria-label='홈으로 이동'>
+              <Image className='w-5 h-5 lg:w-9 lg:h-9' src={LOGO_ICON} alt='logo' />
+              <span className='text-black-700 text-6 lg:text-[26px] leading-6 font-bold'>Epigram</span>
+            </button>
+          ) : (
+            <span className='text-black-700 text-6 lg:text-[26px] leading-6 font-bold'>{insteadOfLogo}</span>
+          )}
+        </div>
+        <div className='flex items-center space-x-4'>
+          {isProfileIcon && (
+            <button className='w-5 h-5 lg:w-9 lg:h-9' type='button' onClick={() => handleNavigateTo('/mypage')} aria-label='프로필 페이지로 이동'>
+              <Image src={PROFILE_ICON} alt='프로필 이미지' />
+            </button>
+          )}
+          {isShareIcon && (
+            <button className='w-5 h-5 lg:w-9 lg:h-9' type='button' onClick={handleCopyToClipboard} aria-label='링크 복사'>
+              <Image src={SHARE_ICON} alt='프로필 이미지' />
+            </button>
+          )}
+          {isButton && (
+            <button
+              className='flex justify-center items-center h-8 lg:h-11 px-4 rounded-lg bg-black-500 
+                      hover:bg-black-600 
+                      active:bg-black-700 
+                      disabled:bg-blue-400 border-blue-300
+                      disabled:cursor-not-allowed'
+              type='button'
+              disabled={disabled}
+              onClick={onClick}
+            >
+              <span className='text-blue-100 text-xs lg:text-base font-pretendard font-semibold leading-5'>{textInButton}</span>
+            </button>
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+export default Header;
diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts
new file mode 100644
index 00000000..899c0fce
--- /dev/null
+++ b/src/hooks/useMediaQuery.ts
@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => setMatches(media.matches);
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [matches, query]);
+
+  return matches;
+}
+
+export default useMediaQuery;
diff --git a/src/hooks/useSignInMutation.ts b/src/hooks/useSignInMutation.ts
new file mode 100644
index 00000000..eaf9fd76
--- /dev/null
+++ b/src/hooks/useSignInMutation.ts
@@ -0,0 +1,22 @@
+import postSignin from '@/apis/auth';
+import { toast } from '@/components/ui/use-toast';
+import { useMutation } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
+
+const useSigninMutation = () => {
+  const router = useRouter();
+
+  return useMutation({
+    mutationFn: postSignin,
+    onSuccess: (data) => {
+      localStorage.setItem('accessToken', data.accessToken);
+      localStorage.setItem('refreshToken', data.refreshToken);
+      router.push('/');
+    },
+    onError: () => {
+      toast({ description: '이메일 혹은 비밀번호를 확인해주세요.', className: 'border-state-error text-state-error font-semibold' });
+    },
+  });
+};
+
+export default useSigninMutation;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 37d2f8d3..107acf01 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -3,6 +3,7 @@ import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
 import { HydrationBoundary, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import Toaster from '@/components/ui/toaster';
 
 export default function App({ Component, pageProps }: AppProps) {
   const [queryClient] = React.useState(() => new QueryClient());
@@ -10,6 +11,7 @@ export default function App({ Component, pageProps }: AppProps) {
     <QueryClientProvider client={queryClient}>
       <HydrationBoundary state={pageProps.dehydratedState}>
         <Component {...pageProps} />
+        <Toaster />
       </HydrationBoundary>
       <ReactQueryDevtools />
     </QueryClientProvider>
diff --git a/src/pages/auth/SignIn.tsx b/src/pages/auth/SignIn.tsx
new file mode 100644
index 00000000..400d0edd
--- /dev/null
+++ b/src/pages/auth/SignIn.tsx
@@ -0,0 +1,100 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form';
+import { PostSigninRequest, PostSigninRequestType } from '@/schema/auth';
+import useSigninMutation from '@/hooks/useSignInMutation';
+
+export default function SignIn() {
+  const mutationSignin = useSigninMutation();
+  // 폼 정의
+  const form = useForm<PostSigninRequestType>({
+    resolver: zodResolver(PostSigninRequest),
+    mode: 'onBlur',
+    defaultValues: {
+      email: '',
+      password: '',
+    },
+  });
+
+  // TODO: 나중에 컴포넌트 분리하기
+  return (
+    <div className='flex flex-col justify-center items-center bg-background-100 w-full h-screen'>
+      <header className='mb-[50px] md:mb-[60px]'>
+        <Link href='/'>
+          <Image src='/lg.svg' alt='logo' width={172} height={48} />
+        </Link>
+      </header>
+
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit((values: PostSigninRequestType) => mutationSignin.mutate(values))} className='flex flex-col items-center lg:gap-6 gap-5 w-full px-6'>
+          <div className='flex flex-col items-center lg:gap-4 gap-[10px] w-full lg:max-w-[640px] md:max-w-[384px]'>
+            <FormField
+              control={form.control}
+              name='email'
+              render={({ field, fieldState }) => (
+                <FormItem className='w-full space-y-0'>
+                  <FormControl>
+                    <Input
+                      type='text'
+                      placeholder='이메일'
+                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage className='flex justify-end text-[13px] text-state-error' />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='password'
+              render={({ field, fieldState }) => (
+                <FormItem className='w-full space-y-0'>
+                  <FormControl>
+                    <Input
+                      type='password'
+                      placeholder='비밀번호'
+                      className={`lg:h-16 h-11 px-4 lg:text-xl md:text-base placeholder-blue-400 rounded-xl bg-blue-200 ${fieldState.invalid ? 'border-2 border-state-error' : ''}`}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage className='flex justify-end font-pretendard text-[13px] text-state-error' />
+                </FormItem>
+              )}
+            />
+          </div>
+          <Button
+            type='submit'
+            disabled={!form.formState.isValid}
+            className={`w-full lg:max-w-[640px] md:max-w-[384px] lg:h-16 h-11 bg-black-500 text-white lg:text-xl md:text-base rounded-xl md:mb-[10px] mb-[11px] ${!form.formState.isValid ? 'bg-blue-300' : 'bg-black-500'}`}
+          >
+            로그인
+          </Button>
+        </form>
+      </Form>
+      <div className=' flex justify-end items-center gap-2 w-full lg:max-w-[640px] md:max-w-[384px] md:px-0 px-6 md:mb-[60px] mb-[50px]'>
+        <h2 className=' text-blue-400 lg:text-xl md:text-base sm:text-sm'>회원이 아니신가요?</h2>
+        <Link href='/'>
+          <Button type='button' variant='link' className='lg:text-xl md:text-base sm:text-sm p-0 underline'>
+            가입하기
+          </Button>
+        </Link>
+      </div>
+      <div className='flex gap-4'>
+        <Button type='button' className='md:size-[60px] p-0'>
+          <Image src='/logo-naver.svg' alt='logo-naver' width={60} height={60} className='md:size-[60px] size-10' />
+        </Button>
+        <Button type='button' className='md:size-[60px] p-0'>
+          <Image src='/logo-google.svg' alt='logo-google' width={60} height={60} className='md:size-[60px] size-10' />
+        </Button>
+        <Button type='button' className='md:size-[60px] p-0'>
+          <Image src='/logo-kakao.svg' alt='logo-kakao' width={60} height={60} className='md:size-[60px] size-10' />
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6a3a652a..1bbe9ac9 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -29,7 +29,6 @@ export default function Home() {
       </Head>
       <main>
         <div>Epigram Main</div>
-
         <p className='font-pretendard text-gray-100 bg-blue-700'>Pretendard</p>
         <p className='font-iropkeBatang text-illust-yellow bg-error'>Iropke Batang</p>
       </main>
diff --git a/src/schema/auth.ts b/src/schema/auth.ts
new file mode 100644
index 00000000..33466608
--- /dev/null
+++ b/src/schema/auth.ts
@@ -0,0 +1,25 @@
+import * as z from 'zod';
+
+export const PostSigninRequest = z.object({
+  email: z.string().min(1, { message: '이메일은 필수 입력입니다.' }).email({ message: '올바른 이메일 주소가 아닙니다.' }),
+  password: z.string().min(1, { message: '비밀번호는 필수 입력입니다.' }),
+});
+
+const User = z.object({
+  id: z.number(),
+  email: z.string().email(),
+  nickname: z.string(),
+  teamId: z.string(),
+  updatedAt: z.coerce.date(),
+  createdAt: z.coerce.date(),
+  image: z.string(),
+});
+
+export const PostSigninResponse = z.object({
+  accessToken: z.string(),
+  refreshToken: z.string(),
+  user: User,
+});
+
+export type PostSigninRequestType = z.infer<typeof PostSigninRequest>;
+export type PostSigninResponseType = z.infer<typeof PostSigninResponse>;
diff --git a/src/styles/CommentCardStyles.ts b/src/styles/CommentCardStyles.ts
new file mode 100644
index 00000000..6d7a6a66
--- /dev/null
+++ b/src/styles/CommentCardStyles.ts
@@ -0,0 +1,44 @@
+export const sizeStyles = {
+  sm: 'w-[360px] h-[130px]',
+  md: 'md:w-[384px] md:h-[162px]',
+  lg: 'lg:w-[640px] lg:h-[176px]',
+};
+
+export const textSizeStyles = {
+  sm: {
+    name: 'text-xs',
+    time: 'text-xs',
+    action: 'text-xs',
+    content: 'text-sm',
+  },
+  md: {
+    name: 'md:text-sm',
+    time: 'md:text-sm',
+    action: 'md:text-sm',
+    content: 'md:text-base',
+  },
+  lg: {
+    name: 'lg:text-base',
+    time: 'lg:text-base',
+    action: 'lg:text-base',
+    content: 'lg:text-xl',
+  },
+};
+
+export const gapStyles = {
+  sm: 'gap-2',
+  md: 'md:gap-3',
+  lg: 'lg:gap-4',
+};
+
+export const paddingStyles = {
+  sm: 'py-4 px-6', // 위아래 16px, 양 옆 24px
+  md: 'md:p-6', // 위아래, 양옆 24px
+  lg: 'lg:py-[35px] lg:px-6', // 위아래 35px, 양 옆 24px
+};
+
+export const contentWidthStyles = {
+  sm: 'w-[248px]',
+  md: 'md:w-[272px]',
+  lg: 'lg:w-[528px]',
+};
diff --git a/src/types/EmotionTypes.ts b/src/types/EmotionTypes.ts
new file mode 100644
index 00000000..e64f3d3f
--- /dev/null
+++ b/src/types/EmotionTypes.ts
@@ -0,0 +1,14 @@
+export type EmotionType = '감동' | '기쁨' | '고민' | '슬픔' | '분노';
+export type EmotionState = 'Default' | 'Unclicked' | 'Clicked';
+
+export interface EmotionIconCardProps {
+  iconType: EmotionType; // 아이콘 종류
+  state: EmotionState; // 상태
+  size: 'sm' | 'md' | 'lg'; // 크기
+  onClick?: () => void; // 클릭 이벤트 핸들러
+}
+
+export interface InteractiveEmotionIconCardProps extends Omit<EmotionIconCardProps, 'state'> {
+  state: EmotionState;
+  onClick: () => void;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 3b6e9ee8..383e106d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,235 +2,7 @@
 module.exports = {
   content: ['./pages/**/*.{js,ts,jsx,tsx,mdx}', './src/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {
-    extend: {
-      fontFamily: {
-        pretendard: ['Pretendard'],
-        iropkeBatang: ['IropkeBatang'],
-      },
-      fontSize: {
-        // Pretendard settings
-        'pretendard-3xl': [
-          '32px',
-          {
-            lineHeight: '42px',
-            fontWeight: '700',
-          },
-        ],
-        'pretendard-2xl-bold': [
-          '24px',
-          {
-            lineHeight: '32px',
-            fontWeight: '700',
-          },
-        ],
-        'pretendard-2xl-semibold': [
-          '24px',
-          {
-            lineHeight: '32px',
-            fontWeight: '600',
-          },
-        ],
-        'pretendard-2xl-medium': [
-          '24px',
-          {
-            lineHeight: '32px',
-            fontWeight: '500',
-          },
-        ],
-        'pretendard-2xl-regular': [
-          '24px',
-          {
-            lineHeight: '32px',
-            fontWeight: '400',
-          },
-        ],
-        'pretendard-xl-semibold': [
-          '20px',
-          {
-            lineHeight: '32px',
-            fontWeight: '600',
-          },
-        ],
-        'pretendard-xl-medium': [
-          '20px',
-          {
-            lineHeight: '32px',
-            fontWeight: '500',
-          },
-        ],
-        'pretendard-xl-regular': [
-          '20px',
-          {
-            lineHeight: '32px',
-            fontWeight: '400',
-          },
-        ],
-        'pretendard-lg-semibold': [
-          '16px',
-          {
-            lineHeight: '26px',
-            fontWeight: '600',
-          },
-        ],
-        'pretendard-lg-medium': [
-          '16px',
-          {
-            lineHeight: '26px',
-            fontWeight: '500',
-          },
-        ],
-        'pretendard-lg-regular': [
-          '16px',
-          {
-            lineHeight: '26px',
-            fontWeight: '400',
-          },
-        ],
-        'pretendard-md-bold': [
-          '14px',
-          {
-            lineHeight: '24px',
-            fontWeight: '700',
-          },
-        ],
-        'pretendard-md-semibold': [
-          '14px',
-          {
-            lineHeight: '24px',
-            fontWeight: '600',
-          },
-        ],
-        'pretendard-md-medium': [
-          '14px',
-          {
-            lineHeight: '24px',
-            fontWeight: '500',
-          },
-        ],
-        'pretendard-md-regular': [
-          '14px',
-          {
-            lineHeight: '24px',
-            fontWeight: '400',
-          },
-        ],
-        'pretendard-sm-medium': [
-          '13px',
-          {
-            lineHeight: '22px',
-            fontWeight: '500',
-          },
-        ],
-        'pretendard-xs-semibold': [
-          '12px',
-          {
-            lineHeight: '20px',
-            fontWeight: '600',
-          },
-        ],
-        'pretendard-xs-regular': [
-          '12px',
-          {
-            lineHeight: '18px',
-            fontWeight: '400',
-          },
-        ],
-
-        // IropkeBatang settings
-        'iropke-4xl': [
-          '40px',
-          {
-            lineHeight: '52px',
-            fontWeight: '500',
-          },
-        ],
-        'iropke-3xl': [
-          '32px',
-          {
-            lineHeight: '48px',
-            fontWeight: '500',
-          },
-        ],
-        'iropke-2xl': [
-          '24px',
-          {
-            lineHeight: '40px',
-            fontWeight: '500',
-          },
-        ],
-        'iropke-xl': [
-          '20px',
-          {
-            lineHeight: '28px',
-            fontWeight: '500',
-          },
-        ],
-        'iropke-lg': [
-          '16px',
-          {
-            lineHeight: '26px',
-            fontWeight: '500',
-          },
-        ],
-        'iropke-md': [
-          '14px',
-          {
-            lineHeight: '24px',
-            fontWeight: '500',
-          },
-        ],
-        'iropke-xs': [
-          '12px',
-          {
-            lineHeight: '18px',
-            fontWeight: '500',
-          },
-        ],
-      },
-      colors: {
-        'black-100': '#787878',
-        'black-200': '#6B6B6B',
-        'black-300': '#5E5E5E',
-        'black-400': '#525252',
-        'black-500': '#454545',
-        'black-600': '#373737',
-        'black-700': '#2B2B2B',
-        'black-800': '#1F1F1F',
-        'black-900': '#121212',
-        'black-950': '#050505',
-        'blue-100': '#FFFFFF',
-        'blue-200': '#ECEFF4',
-        'blue-300': '#CBD3E1',
-        'blue-400': '#ABB8CE',
-        'blue-500': '#8B9DBC',
-        'blue-600': '#6A82A9',
-        'blue-700': '#52698E',
-        'blue-800': '#40516E',
-        'blue-900': '#2D394E',
-        'blue-950': '#1A212D',
-        'gray-100': '#DEDEDE',
-        'gray-200': '#C4C4C4',
-        'gray-300': '#ABABAB',
-        'gray-400': '#919191',
-        'background-100': '#F5F7FA',
-        'state-error': '#FF6577',
-        'line-100': '#F2F2F2',
-        'line-200': '#CFDBEA',
-        'illust-yellow': '#FBC85B',
-        'illust-green': '#48BB98',
-        'illust-purple': '#8E80E3',
-        'illust-blue': '#5195EE',
-        'illust-red': '#E46E80',
-        'illust-brown': '#9A695E',
-        'sub-yellow': '#E8AA26',
-        'sub-blue_1': '#3E3E3E',
-        'sub-blue_2': '#3E414D',
-        'sub-blue_3': '#494D59',
-        'sub-gray_1': '#C7D1E0',
-        'sub-gray_2': '#E3E9F1',
-        'sub-gray_3': '#EFF3F8',
-      },
-    },
+    extend: {},
   },
   plugins: [],
 };