diff --git a/package-lock.json b/package-lock.json
index fbd7334..bd08d03 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11509,7 +11509,7 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
       "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/stack-utils": {
       "version": "2.0.1",
@@ -11520,7 +11520,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz",
       "integrity": "sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.5",
@@ -11539,7 +11539,7 @@
       "version": "3.17.1",
       "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.17.1.tgz",
       "integrity": "sha512-GkewRA4i5oXacU/n4MA9+bLgt5/L3F1mKrYvFGm7r2ouLXhRKjuWwo9XHNnbx6WF3vlGW21S3fCvgqxvxXXc5g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "source-map": "^0.6.1"
       }
@@ -11548,7 +11548,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11563,7 +11563,7 @@
       "version": "4.41.33",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.33.tgz",
       "integrity": "sha512-PPajH64Ft2vWevkerISMtnZ8rTs4YmRbs+23c402J0INmxDKCrhZNvwZYtzx96gY2wAtXdrK1BS2fiC8MlLr3g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/node": "*",
         "@types/tapable": "^1",
@@ -11583,7 +11583,7 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-3.2.0.tgz",
       "integrity": "sha512-Ft7YH3lEVRQ6ls8k4Ff1oB4jN6oy/XmU6tQISKdhfh+1mR+viZFphS6WL0IrtDOzvefmJg5a0s7ZQoRXwqTEFg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/node": "*",
         "@types/source-list-map": "*",
@@ -11594,7 +11594,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -31362,7 +31362,7 @@
       "version": "2.25.2",
       "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.25.2.tgz",
       "integrity": "sha512-CVgm3NAQyfdIonRvXisRwPTUYuSbyZ6BY7782tMeUzWOO7RmVI2NaBYuCp41qyD4gYCkJyTneAJdK69A13B0+A==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "ansi-html-community": "0.0.8",
         "html-entities": "^2.1.0",
@@ -33600,12 +33600,14 @@
     "@csstools/postcss-unset-value": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.2.tgz",
-      "integrity": "sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g=="
+      "integrity": "sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==",
+      "requires": {}
     },
     "@csstools/selector-specificity": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz",
-      "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg=="
+      "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==",
+      "requires": {}
     },
     "@design-systems/utils": {
       "version": "2.12.0",
@@ -33860,7 +33862,8 @@
     "@emotion/use-insertion-effect-with-fallbacks": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz",
-      "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A=="
+      "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==",
+      "requires": {}
     },
     "@emotion/utils": {
       "version": "1.2.0",
@@ -34913,7 +34916,8 @@
           "version": "1.6.22",
           "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz",
           "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "@types/yargs": {
           "version": "15.0.14",
@@ -36322,7 +36326,8 @@
           "version": "1.2.1",
           "resolved": "https://registry.npmjs.org/webpack-filter-warnings-plugin/-/webpack-filter-warnings-plugin-1.2.1.tgz",
           "integrity": "sha512-Ez6ytc9IseDMLPo0qCuNNYzgtUl8NovOqjIq4uAU8LTD4uoa1w1KpZyyzFtLTEMZpkkOkLfL9eN+KGYdk1Qtwg==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "webpack-sources": {
           "version": "1.4.3",
@@ -38127,7 +38132,8 @@
           "version": "8.9.0",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.9.0.tgz",
           "integrity": "sha512-Ja7nszREasGaYUYCI2k4lCKIRTt+y7XuqVoHR44YpI49TtryyqbqvDMn5eqfW7e6HzTukDRIsXqzVHScqRcafg==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "y18n": {
           "version": "4.0.3",
@@ -40600,7 +40606,7 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
       "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==",
-      "dev": true
+      "devOptional": true
     },
     "@types/stack-utils": {
       "version": "2.0.1",
@@ -40611,7 +40617,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz",
       "integrity": "sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==",
-      "dev": true
+      "devOptional": true
     },
     "@types/testing-library__jest-dom": {
       "version": "5.14.5",
@@ -40630,7 +40636,7 @@
       "version": "3.17.1",
       "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.17.1.tgz",
       "integrity": "sha512-GkewRA4i5oXacU/n4MA9+bLgt5/L3F1mKrYvFGm7r2ouLXhRKjuWwo9XHNnbx6WF3vlGW21S3fCvgqxvxXXc5g==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "source-map": "^0.6.1"
       },
@@ -40639,7 +40645,7 @@
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "devOptional": true
         }
       }
     },
@@ -40653,7 +40659,7 @@
       "version": "4.41.33",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.33.tgz",
       "integrity": "sha512-PPajH64Ft2vWevkerISMtnZ8rTs4YmRbs+23c402J0INmxDKCrhZNvwZYtzx96gY2wAtXdrK1BS2fiC8MlLr3g==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@types/node": "*",
         "@types/tapable": "^1",
@@ -40667,7 +40673,7 @@
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "devOptional": true
         }
       }
     },
@@ -40681,7 +40687,7 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-3.2.0.tgz",
       "integrity": "sha512-Ft7YH3lEVRQ6ls8k4Ff1oB4jN6oy/XmU6tQISKdhfh+1mR+viZFphS6WL0IrtDOzvefmJg5a0s7ZQoRXwqTEFg==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@types/node": "*",
         "@types/source-list-map": "*",
@@ -41118,12 +41124,14 @@
     "acorn-import-assertions": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
-      "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw=="
+      "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
+      "requires": {}
     },
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "requires": {}
     },
     "acorn-node": {
       "version": "1.8.2",
@@ -41219,7 +41227,8 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
       "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ajv-formats": {
       "version": "2.1.1",
@@ -41250,7 +41259,8 @@
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "requires": {}
     },
     "ansi-align": {
       "version": "3.0.1",
@@ -41780,7 +41790,8 @@
     "babel-plugin-named-asset-import": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.8.tgz",
-      "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q=="
+      "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==",
+      "requires": {}
     },
     "babel-plugin-named-exports-order": {
       "version": "0.0.2",
@@ -43483,7 +43494,8 @@
     "css-declaration-sorter": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
-      "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w=="
+      "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==",
+      "requires": {}
     },
     "css-has-pseudo": {
       "version": "3.0.4",
@@ -43566,7 +43578,8 @@
     "css-prefers-color-scheme": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz",
-      "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA=="
+      "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==",
+      "requires": {}
     },
     "css-select": {
       "version": "4.3.0",
@@ -43676,7 +43689,8 @@
     "cssnano-utils": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
-      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA=="
+      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
+      "requires": {}
     },
     "csso": {
       "version": "4.2.0",
@@ -44585,7 +44599,8 @@
       "version": "8.5.0",
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz",
       "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-config-react-app": {
       "version": "7.0.1",
@@ -44790,13 +44805,15 @@
     "eslint-plugin-react-hooks": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
-      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g=="
+      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
+      "requires": {}
     },
     "eslint-plugin-simple-import-sort": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-8.0.0.tgz",
       "integrity": "sha512-bXgJQ+lqhtQBCuWY/FUWdB27j4+lqcvXv5rUARkzbeWLwea+S5eBZEQrhnO+WgX3ZoJHVj0cn943iyXwByHHQw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-plugin-testing-library": {
       "version": "5.7.2",
@@ -46550,7 +46567,8 @@
     "icss-utils": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA=="
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "requires": {}
     },
     "idb": {
       "version": "7.1.0",
@@ -47850,7 +47868,8 @@
     "jest-pnp-resolver": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
-      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w=="
+      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
+      "requires": {}
     },
     "jest-regex-util": {
       "version": "27.5.1",
@@ -50605,7 +50624,8 @@
     "postcss-browser-comments": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-browser-comments/-/postcss-browser-comments-4.0.0.tgz",
-      "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg=="
+      "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==",
+      "requires": {}
     },
     "postcss-calc": {
       "version": "8.2.4",
@@ -50703,22 +50723,26 @@
     "postcss-discard-comments": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
-      "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ=="
+      "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
+      "requires": {}
     },
     "postcss-discard-duplicates": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
-      "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw=="
+      "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
+      "requires": {}
     },
     "postcss-discard-empty": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
-      "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A=="
+      "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
+      "requires": {}
     },
     "postcss-discard-overridden": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
-      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw=="
+      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
+      "requires": {}
     },
     "postcss-double-position-gradients": {
       "version": "3.1.2",
@@ -50740,7 +50764,8 @@
     "postcss-flexbugs-fixes": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz",
-      "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ=="
+      "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==",
+      "requires": {}
     },
     "postcss-focus-visible": {
       "version": "6.0.4",
@@ -50761,12 +50786,14 @@
     "postcss-font-variant": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz",
-      "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA=="
+      "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==",
+      "requires": {}
     },
     "postcss-gap-properties": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.5.tgz",
-      "integrity": "sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg=="
+      "integrity": "sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==",
+      "requires": {}
     },
     "postcss-image-set-function": {
       "version": "4.0.7",
@@ -50789,7 +50816,8 @@
     "postcss-initial": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz",
-      "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ=="
+      "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==",
+      "requires": {}
     },
     "postcss-js": {
       "version": "4.0.0",
@@ -50830,12 +50858,14 @@
     "postcss-logical": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz",
-      "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g=="
+      "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==",
+      "requires": {}
     },
     "postcss-media-minmax": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz",
-      "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ=="
+      "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==",
+      "requires": {}
     },
     "postcss-merge-longhand": {
       "version": "5.1.6",
@@ -50896,7 +50926,8 @@
     "postcss-modules-extract-imports": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
-      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw=="
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -50954,7 +50985,8 @@
     "postcss-normalize-charset": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
-      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg=="
+      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
+      "requires": {}
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -51047,7 +51079,8 @@
     "postcss-page-break": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz",
-      "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ=="
+      "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==",
+      "requires": {}
     },
     "postcss-place": {
       "version": "7.0.5",
@@ -51141,7 +51174,8 @@
     "postcss-replace-overflow-wrap": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz",
-      "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw=="
+      "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
+      "requires": {}
     },
     "postcss-selector-not": {
       "version": "6.0.1",
@@ -51735,7 +51769,8 @@
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz",
       "integrity": "sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "react-dom": {
       "version": "18.2.0",
@@ -53819,7 +53854,8 @@
     "style-loader": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
-      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ=="
+      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
+      "requires": {}
     },
     "style-to-object": {
       "version": "0.3.0",
@@ -55597,7 +55633,8 @@
         "ws": {
           "version": "8.9.0",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.9.0.tgz",
-          "integrity": "sha512-Ja7nszREasGaYUYCI2k4lCKIRTt+y7XuqVoHR44YpI49TtryyqbqvDMn5eqfW7e6HzTukDRIsXqzVHScqRcafg=="
+          "integrity": "sha512-Ja7nszREasGaYUYCI2k4lCKIRTt+y7XuqVoHR44YpI49TtryyqbqvDMn5eqfW7e6HzTukDRIsXqzVHScqRcafg==",
+          "requires": {}
         }
       }
     },
@@ -55605,7 +55642,7 @@
       "version": "2.25.2",
       "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.25.2.tgz",
       "integrity": "sha512-CVgm3NAQyfdIonRvXisRwPTUYuSbyZ6BY7782tMeUzWOO7RmVI2NaBYuCp41qyD4gYCkJyTneAJdK69A13B0+A==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "ansi-html-community": "0.0.8",
         "html-entities": "^2.1.0",
@@ -56108,7 +56145,8 @@
     "ws": {
       "version": "7.5.9",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q=="
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "requires": {}
     },
     "x-default-browser": {
       "version": "0.4.0",
diff --git a/src/components/atoms/info-box/index.tsx b/src/components/atoms/info-box/index.tsx
new file mode 100644
index 0000000..032706c
--- /dev/null
+++ b/src/components/atoms/info-box/index.tsx
@@ -0,0 +1,20 @@
+import { CatInfoBox, Description, Image, ImageWrapper } from '@components/main/CatDetail.style';
+import { IMAGE_PATH } from '@utils/assets';
+import React from 'react';
+interface Props {
+  isValidUrl: boolean;
+  image: string;
+  description: string;
+}
+const InfoBox = ({isValidUrl, image, description}: Props) => {
+  return (
+    <CatInfoBox>
+      <ImageWrapper>
+        <Image src={isValidUrl ? image ?? IMAGE_PATH.DEFAULT : IMAGE_PATH.DEFAULT} />
+      </ImageWrapper>
+      <Description>{description}</Description>
+    </CatInfoBox>
+  );
+};
+
+export default InfoBox;
diff --git a/src/components/atoms/info-box/info-box.stories.tsx b/src/components/atoms/info-box/info-box.stories.tsx
new file mode 100644
index 0000000..c5b5d57
--- /dev/null
+++ b/src/components/atoms/info-box/info-box.stories.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import InfoBox from './';
+import catImg from '@assets/icons/cat3.svg';
+
+export default {
+  title: 'Components/CatDetail/info-box',
+  component: InfoBox,
+} as ComponentMeta<typeof InfoBox>;
+
+const Template: ComponentStory<typeof InfoBox> = args => <InfoBox {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  isValidUrl: true,
+  image: catImg,
+  description: '귀여운 길고양이',
+};
diff --git a/src/components/atoms/like-button/index.tsx b/src/components/atoms/like-button/index.tsx
new file mode 100644
index 0000000..c8e1d37
--- /dev/null
+++ b/src/components/atoms/like-button/index.tsx
@@ -0,0 +1,23 @@
+import Icon from '@components/icon';
+import { Button, LikeText } from '@components/main/CatDetail.style';
+import React from 'react';
+interface Props {
+  isLiked:boolean;
+  onLike: () => void;
+  likes: number;
+}
+const LikeButton = ({isLiked, onLike, likes}:Props) => {
+  return (
+    <>
+      {!isLiked ? (
+        <Button onClick={onLike}>Like</Button>
+      ) : (
+        <LikeText>
+          <Icon type='HEART' /> {likes}
+        </LikeText>
+      )}
+    </>
+  );
+};
+
+export default LikeButton;
diff --git a/src/components/atoms/like-button/like-button.stories.tsx b/src/components/atoms/like-button/like-button.stories.tsx
new file mode 100644
index 0000000..ffd2c0b
--- /dev/null
+++ b/src/components/atoms/like-button/like-button.stories.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import LikeButton from './';
+
+export default {
+  title: 'Components/CatDetail/like-button',
+  component: LikeButton,
+} as ComponentMeta<typeof LikeButton>;
+
+const Template: ComponentStory<typeof LikeButton> = args => <LikeButton {...args} />;
+
+export const UnLiked = Template.bind({});
+UnLiked.args = {
+  isLiked: false,
+  likes: 0,
+  onLike: () => ({}),
+};
+
+export const Liked = Template.bind({});
+Liked.args = {
+  isLiked: true,
+  likes: 1,
+  onLike: () => ({}),
+};
diff --git a/src/components/layout/TabBar.tsx b/src/components/layout/TabBar.tsx
index a36638b..3129bd5 100644
--- a/src/components/layout/TabBar.tsx
+++ b/src/components/layout/TabBar.tsx
@@ -1,27 +1,28 @@
 import React from 'react';
 import { CustomLink, LayoutTabBar, TabBarName } from './Layout.style';
 import Icon from '@components/icon';
+import tw from 'twin.macro';
 
 const TabBar = () => {
   const TabItem = [
     {
       path: '/main',
-      icon: <Icon type='MAP' fill='black' />,
+      icon: <Icon type='MAP' fill='#4B4A47' />,
       text: '메인',
     },
     {
       path: '/ranking',
-      icon: <Icon type='RANK' fill='black' />,
+      icon: <Icon type='RANK' fill='#4B4A47' />,
       text: '짱 고양이',
     },
     {
       path: '/upload',
-      icon: <Icon type='UPLOAD' fill='black' />,
+      icon: <Icon type='UPLOAD' fill='#4B4A47' />,
       text: '업로드',
     },
     {
       path: '/my-page',
-      icon: <Icon type='PERSON' fill='black' />,
+      icon: <Icon type='PERSON' fill='#4B4A47' />,
       text: '집사',
     },
   ];
diff --git a/src/components/main/CatDetail.style.ts b/src/components/main/CatDetail.style.ts
index 8499cd4..7de4fc3 100644
--- a/src/components/main/CatDetail.style.ts
+++ b/src/components/main/CatDetail.style.ts
@@ -36,7 +36,7 @@ export const Image = styled.img`
 
 export const Description = styled.div``;
 
-export const LikeButton = styled.button`
+export const Button = styled.button`
   padding: 8px 12px;
   border-radius: 8px;
   background-color: #fabe93;
@@ -44,5 +44,8 @@ export const LikeButton = styled.button`
 `;
 
 export const LikeText = styled.span`
+  display: flex;
+  align-items: center;
+  gap: 10px;
   font-weight: bold;
 `;
diff --git a/src/components/main/CatDetail.tsx b/src/components/main/CatDetail.tsx
index 637cfc9..cd63654 100644
--- a/src/components/main/CatDetail.tsx
+++ b/src/components/main/CatDetail.tsx
@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react';
 import { Cat } from '@models/cat';
-import { CatInfoBox, Container, Description, Image, ImageWrapper, LikeButton, LikeText } from './CatDetail.style';
+import { Container } from './CatDetail.style';
 import { UseLike } from '@hooks/useLike';
-import defaultImg from '../../assets/images/defaultImg.png';
-import Icon from '@components/icon';
+import InfoBox from '@components/atoms/info-box';
+import LikeButton from '@components/atoms/like-button';
 
 interface Props {
   cat: Cat;
@@ -20,19 +20,8 @@ const CatDetail = ({ cat }: Props) => {
 
   return (
     <Container>
-      <CatInfoBox>
-        <ImageWrapper>
-          <Image src={isValidUrl ? cat?.image ?? defaultImg : defaultImg} />
-        </ImageWrapper>
-        <Description>{cat.description}</Description>
-      </CatInfoBox>
-      {!cat.isLiked ? (
-        <LikeButton onClick={onLike}>Like</LikeButton>
-      ) : (
-        <LikeText>
-          <Icon type='HEART'/> {cat._count.likes}
-        </LikeText>
-      )}
+      <InfoBox isValidUrl={isValidUrl} image={cat?.image} description={cat.description} />
+      <LikeButton isLiked={cat.isLiked} onLike={onLike} likes={cat._count.likes} />
     </Container>
   );
 };