diff --git a/package-lock.json b/package-lock.json
index 97dcc3a..2d402a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,11 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-scripts": "5.0.1",
+        "styled-components": "^6.1.13",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -627,9 +631,18 @@
       }
     },
     "node_modules/@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.21.0-placeholder-for-preset-env.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
-      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "version": "7.21.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
+      "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==",
+      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
       "engines": {
         "node": ">=6.9.0"
       },
@@ -1888,6 +1901,18 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/preset-env/node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -2280,6 +2305,27 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
+      "license": "MIT"
+    },
     "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",
@@ -4465,6 +4511,12 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw=="
     },
+    "node_modules/@types/stylis": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==",
+      "license": "MIT"
+    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.9",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz",
@@ -5931,6 +5983,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -6358,6 +6419,15 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/css-declaration-sorter": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
@@ -6499,6 +6569,17 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -15823,6 +15904,12 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -16382,6 +16469,68 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/styled-components": {
+      "version": "6.1.13",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz",
+      "integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/is-prop-valid": "1.2.2",
+        "@emotion/unitless": "0.8.1",
+        "@types/stylis": "4.2.5",
+        "css-to-react-native": "3.2.0",
+        "csstype": "3.1.3",
+        "postcss": "8.4.38",
+        "shallowequal": "1.1.0",
+        "stylis": "4.3.2",
+        "tslib": "2.6.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      }
+    },
+    "node_modules/styled-components/node_modules/postcss": {
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/styled-components/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "license": "0BSD"
+    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -16397,6 +16546,12 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
+      "license": "MIT"
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -18653,10 +18808,16 @@
       }
     },
     "@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.21.0-placeholder-for-preset-env.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
-      "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
-      "requires": {}
+      "version": "7.21.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
+      "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      }
     },
     "@babel/plugin-syntax-async-generators": {
       "version": "7.8.4",
@@ -19461,6 +19622,12 @@
         "semver": "^6.3.1"
       },
       "dependencies": {
+        "@babel/plugin-proposal-private-property-in-object": {
+          "version": "7.21.0-placeholder-for-preset-env.2",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+          "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+          "requires": {}
+        },
         "semver": {
           "version": "6.3.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -19681,6 +19848,24 @@
       "integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==",
       "requires": {}
     },
+    "@emotion/is-prop-valid": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+      "requires": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
     "@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -21307,6 +21492,11 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.3.tgz",
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw=="
     },
+    "@types/stylis": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw=="
+    },
     "@types/testing-library__jest-dom": {
       "version": "5.14.9",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz",
@@ -22367,6 +22557,11 @@
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
     },
+    "camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -22682,6 +22877,11 @@
         "postcss-selector-parser": "^6.0.9"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg=="
+    },
     "css-declaration-sorter": {
       "version": "6.4.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz",
@@ -22754,6 +22954,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -29258,6 +29468,11 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -29678,6 +29893,39 @@
       "integrity": "sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==",
       "requires": {}
     },
+    "styled-components": {
+      "version": "6.1.13",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz",
+      "integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==",
+      "requires": {
+        "@emotion/is-prop-valid": "1.2.2",
+        "@emotion/unitless": "0.8.1",
+        "@types/stylis": "4.2.5",
+        "css-to-react-native": "3.2.0",
+        "csstype": "3.1.3",
+        "postcss": "8.4.38",
+        "shallowequal": "1.1.0",
+        "stylis": "4.3.2",
+        "tslib": "2.6.2"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "8.4.38",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+          "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+          "requires": {
+            "nanoid": "^3.3.7",
+            "picocolors": "^1.0.0",
+            "source-map-js": "^1.2.0"
+          }
+        },
+        "tslib": {
+          "version": "2.6.2",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+          "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+        }
+      }
+    },
     "stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -29687,6 +29935,11 @@
         "postcss-selector-parser": "^6.0.4"
       }
     },
+    "stylis": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg=="
+    },
     "sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
diff --git a/package.json b/package.json
index af506b2..f3774f7 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.13",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -34,5 +35,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }
diff --git a/public/index.html b/public/index.html
index aa069f2..81c7378 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,6 +14,10 @@
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index 777b355..0000000
--- a/src/App.js
+++ /dev/null
@@ -1,9 +0,0 @@
-function App() {
-  return (
-    <div className="App">
-      <h1>🐶CEOS 20기 프론트엔드 최고🐶</h1>
-    </div>
-  );
-}
-
-export default App;
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000..a4e4f07
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,122 @@
+import styled from "styled-components";
+import { createGlobalStyle } from "styled-components";
+import Header from "./components/Header";
+import List from "./components/List";
+import Editor from "./components/Editor";
+import { useRef, useReducer } from "react";
+
+const mockDate = [
+  {
+    id: 0,
+    isDone: false,
+    content: "React 공부하기",
+    date: new Date().getTime(),
+  },
+  {
+    id: 1,
+    isDone: false,
+    content: "고양이 밥 주기",
+    date: new Date().getTime(),
+  },
+  {
+    id: 2,
+    isDone: false,
+    content: "고양이 놀아주기",
+    date: new Date().getTime(),
+  },
+];
+
+function reducer(state, action) {
+  switch (action.type) {
+    case "CREATE":
+      return [action.data, ...state];
+    case "UPDATE":
+      return state.map((item) =>
+        item.id === action.targetId ? { ...item, isDone: !item.isDone } : item
+      );
+    case "DELETE":
+      return state.filter((item) => item.id !== action.targetId);
+    default:
+      return state;
+  }
+}
+
+function App() {
+  const [todos, dispatch] = useReducer(reducer, mockDate);
+  const idRef = useRef(3);
+
+  const onCreate = (content) => {
+    dispatch({
+      type: "CREATE",
+      data: {
+        id: idRef.current++,
+        isDone: false,
+        content: content,
+        date: new Date().getTime(),
+      },
+    });
+  };
+
+  const onUpdate = (targetId) => {
+    dispatch({ type: "UPDATE", targetId: targetId });
+  };
+
+  const removeTodo = (targetId) => {
+    dispatch({
+      type: "DELETE",
+      targetId: targetId,
+    });
+  };
+  return (
+    <>
+      <GlobalStyle />
+      <AppContainer>
+        <Header />
+        <Editor onCreate={onCreate} />
+        <List todos={todos} onUpdate={onUpdate} removeTodo={removeTodo} />
+      </AppContainer>
+    </>
+  );
+}
+
+const AppContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 500px;
+  margin: 0 auto;
+  background-color: #f1f3ff;
+  border-radius: 5px;
+  padding: 30px;
+  box-shadow: inset 0 0 20px #d6ddff;
+  height: 80vh;
+  box-sizing: border-box;
+
+  /* 모바일 반응형 */
+  @media (max-width: 768px) {
+    width: 360px;
+    height: 560px;
+    padding: 20px;
+  }
+`;
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    background-color: #788bff;
+    margin: 0;
+    padding: 0;
+    font-family: 'Arial', sans-serif;
+    display:flex;
+    height:100vh;
+    justify-content:center;
+    align-items:center;
+
+    /* 모바일 반응형 */
+    @media (max-width: 768px) {
+       height:100vh;
+       width:100%;
+    }
+  }
+`;
+
+export default App;
diff --git a/src/components/Editor.jsx b/src/components/Editor.jsx
new file mode 100644
index 0000000..d2e35b3
--- /dev/null
+++ b/src/components/Editor.jsx
@@ -0,0 +1,76 @@
+import styled from "styled-components";
+import { useRef, useState } from "react";
+
+const Editor = ({ onCreate }) => {
+  const [content, setContent] = useState("");
+
+  const contentRef = useRef();
+
+  const onChangeContent = (e) => {
+    setContent(e.target.value);
+  };
+
+  const onkeyUp = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      onSubmit();
+    }
+  };
+
+  const onSubmit = () => {
+    if (content.trim() === "") {
+      contentRef.current.focus();
+      return;
+    }
+    onCreate(content.trim());
+    setContent("");
+  };
+
+  return (
+    <EditorContainer>
+      <Input
+        ref={contentRef}
+        type="text"
+        placeholder="새로운 Todo..."
+        onChange={onChangeContent}
+        onKeyUp={onkeyUp}
+        value={content}
+      />
+      <Button onClick={onSubmit}>Add</Button>
+    </EditorContainer>
+  );
+};
+
+const EditorContainer = styled.div`
+  display: flex;
+  gap: 10px;
+`;
+
+const Input = styled.input`
+  flex: 1;
+  padding: 15px;
+  border: 1px solid rgb(220, 220, 220);
+  border-radius: 5px;
+  background-color: #d6ddff;
+  color: #788bff;
+  outline: none;
+  border: none;
+  font-weight: 500;
+
+  &::placeholder {
+    color: #788bff;
+    opacity: 1;
+  }
+`;
+
+const Button = styled.button`
+  cursor: pointer;
+  width: 80px;
+  border: none;
+  background-color: #788bff;
+  color: white;
+  border-radius: 10px;
+  font-size: 1rem;
+`;
+
+export default Editor;
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
new file mode 100644
index 0000000..0405028
--- /dev/null
+++ b/src/components/Header.jsx
@@ -0,0 +1,21 @@
+import styled from "styled-components";
+
+const Header = () => {
+  return (
+    <HeaderContainer>
+      <h1>TO DO</h1>
+      <span>{new Date().toDateString()}</span>
+    </HeaderContainer>
+  );
+};
+
+const HeaderContainer = styled.div`
+  h1 {
+    color: #788bff;
+  }
+  span {
+    color: #8790ca;
+  }
+`;
+
+export default Header;
diff --git a/src/components/List.jsx b/src/components/List.jsx
new file mode 100644
index 0000000..287975b
--- /dev/null
+++ b/src/components/List.jsx
@@ -0,0 +1,129 @@
+import styled from "styled-components";
+import TodoItem from "./TodoItem";
+import { useState, useMemo } from "react";
+
+const List = ({ todos, onUpdate, setTodos, removeTodo }) => {
+  const [search, setSearch] = useState("");
+
+  const onChangeSearch = (e) => {
+    setSearch(e.target.value);
+  };
+
+  const getFilteredDate = () => {
+    if (search === "") {
+      return todos;
+    }
+    return todos.filter((todos) => {
+      return todos.content.toLowerCase().includes(search.toLowerCase());
+    });
+  };
+
+  const filteredTodos = getFilteredDate();
+
+  const { doneCount, notDoneCount } = useMemo(() => {
+    const totalCount = todos.length;
+    const doneCount = todos.filter((todo) => todo.isDone).length;
+    const notDoneCount = totalCount - doneCount;
+
+    return {
+      totalCount,
+      doneCount,
+      notDoneCount,
+    };
+  }, [todos]);
+
+  return (
+    <ListContainer>
+      <TopWrapper>
+        <h4>Todo List 🌱</h4>
+        <CountWrapper>
+          <span>todo : {notDoneCount}</span>
+          <span>done : {doneCount}</span>
+        </CountWrapper>
+      </TopWrapper>
+      <SearchInput
+        type="text"
+        placeholder="검색어를 입력하세요"
+        value={search}
+        onChange={onChangeSearch}
+      />
+      <TodoWrapper>
+        {filteredTodos.map((todos) => {
+          return (
+            <TodoItem
+              key={todos.id}
+              {...todos}
+              onUpdate={onUpdate}
+              todos={todos}
+              setTodos={setTodos}
+              removeTodo={removeTodo}
+            />
+          );
+        })}
+      </TodoWrapper>
+    </ListContainer>
+  );
+};
+
+const ListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 40px;
+  overflow-y: auto;
+  scrollbar-width: none;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const TopWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+  h4 {
+    color: #788bff;
+    margin: 0;
+  }
+`;
+
+const CountWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  span {
+    color: #8790ca;
+    font-size: 0.8rem;
+  }
+`;
+
+const SearchInput = styled.input`
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid #d9dfff;
+  padding: 15px 0;
+  color: #788bff;
+  margin-bottom: 20px;
+  background: transparent;
+
+  &:focus {
+    outline: none;
+    color: #788bff;
+    border-bottom: 1px solid #788bff;
+  }
+
+  &::placeholder {
+    color: #788bff;
+  }
+`;
+
+const TodoWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+export default List;
diff --git a/src/components/TodoItem.jsx b/src/components/TodoItem.jsx
new file mode 100644
index 0000000..afdb4d9
--- /dev/null
+++ b/src/components/TodoItem.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import styled, { keyframes } from "styled-components";
+
+const TodoItem = ({ id, isDone, content, date, onUpdate, removeTodo }) => {
+  const [isRemoving, setIsRemoving] = useState(false); // 삭제 애니메이션 상태
+
+  const onChangeCheckbox = () => {
+    onUpdate(id);
+  };
+
+  const handleRemove = () => {
+    setIsRemoving(true); // 삭제 애니메이션 시작
+    setTimeout(() => {
+      removeTodo(id); // 애니메이션 후 삭제
+    }, 200); // 애니메이션이 끝난 후 200ms 대기 후 삭제
+  };
+
+  return (
+    <TodoItemContainer isRemoving={isRemoving}>
+      <Checkbox
+        type="checkbox"
+        id={id}
+        checked={isDone}
+        onChange={onChangeCheckbox}
+      />
+      <Content className={`content ${isDone ? "completed" : ""}`}>
+        {content}
+      </Content>
+      <DateText>{new Date(date).toLocaleDateString()}</DateText>
+      <DeleteButton onClick={handleRemove}>Del</DeleteButton>
+    </TodoItemContainer>
+  );
+};
+
+// 할 일 추가 애니메이션 정의
+const slideDownFadeIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+// 할 일 삭제 애니메이션 정의
+const fadeOutScaleDown = keyframes`
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.9) translateY(+10px);
+  }
+`;
+
+const TodoItemContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgb(240, 240, 240);
+  animation: ${({ isRemoving }) =>
+      isRemoving ? fadeOutScaleDown : slideDownFadeIn}
+    0.3s ease-out forwards;
+`;
+
+const Checkbox = styled.input`
+  width: 20px;
+`;
+
+const Content = styled.div`
+  flex: 1;
+  color: #788bff;
+  word-break: break-word;
+
+  &.completed {
+    text-decoration: line-through;
+    color: gray;
+  }
+`;
+
+const DateText = styled.div`
+  font-size: 14px;
+  color: #8790ca;
+`;
+
+const DeleteButton = styled.button`
+  cursor: pointer;
+  color: white;
+  font-size: 0.7rem;
+  border: none;
+  border-radius: 5px;
+  padding: 5px;
+  background-color: #788bff;
+`;
+
+export default TodoItem;
diff --git a/src/index.js b/src/index.jsx
similarity index 100%
rename from src/index.js
rename to src/index.jsx