diff --git a/package-lock.json b/package-lock.json
index 889d159..26dcbe9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
+        "sass": "^1.56.0",
         "typescript": "^4.8.4",
         "web-vitals": "^2.1.4"
       },
@@ -9019,6 +9020,11 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -14919,6 +14925,22 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "node_modules/sass": {
+      "version": "1.56.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.56.0.tgz",
+      "integrity": "sha512-WFJ9XrpkcnqZcYuLRJh5qiV6ibQOR4AezleeEjTjMsCocYW59dEG19U3fwTTXxzi2Ed3yjPBp727hbbj53pHFw==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@@ -18596,14 +18618,12 @@
     "@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==",
-      "requires": {}
+      "integrity": "sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g=="
     },
     "@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==",
-      "requires": {}
+      "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg=="
     },
     "@eslint/eslintrc": {
       "version": "1.3.3",
@@ -20412,14 +20432,12 @@
     "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==",
-      "requires": {}
+      "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw=="
     },
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "requires": {}
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="
     },
     "acorn-node": {
       "version": "1.8.2",
@@ -20505,8 +20523,7 @@
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "requires": {}
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
     },
     "ansi-escapes": {
       "version": "4.3.2",
@@ -20794,8 +20811,7 @@
     "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==",
-      "requires": {}
+      "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q=="
     },
     "babel-plugin-polyfill-corejs2": {
       "version": "0.3.3",
@@ -21509,8 +21525,7 @@
     "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==",
-      "requires": {}
+      "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w=="
     },
     "css-has-pseudo": {
       "version": "3.0.4",
@@ -21593,8 +21608,7 @@
     "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==",
-      "requires": {}
+      "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA=="
     },
     "css-select": {
       "version": "4.3.0",
@@ -21699,8 +21713,7 @@
     "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==",
-      "requires": {}
+      "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA=="
     },
     "csso": {
       "version": "4.2.0",
@@ -22399,8 +22412,7 @@
       "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,
-      "requires": {}
+      "dev": true
     },
     "eslint-config-react-app": {
       "version": "7.0.1",
@@ -22596,8 +22608,7 @@
     "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==",
-      "requires": {}
+      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g=="
     },
     "eslint-plugin-testing-library": {
       "version": "5.9.1",
@@ -23594,8 +23605,7 @@
     "icss-utils": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "requires": {}
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA=="
     },
     "idb": {
       "version": "7.1.0",
@@ -23620,6 +23630,11 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
       "integrity": "sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ=="
     },
+    "immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -24684,8 +24699,7 @@
     "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==",
-      "requires": {}
+      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w=="
     },
     "jest-regex-util": {
       "version": "27.5.1",
@@ -26354,8 +26368,7 @@
     "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==",
-      "requires": {}
+      "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg=="
     },
     "postcss-calc": {
       "version": "8.2.4",
@@ -26453,26 +26466,22 @@
     "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==",
-      "requires": {}
+      "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ=="
     },
     "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==",
-      "requires": {}
+      "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw=="
     },
     "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==",
-      "requires": {}
+      "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A=="
     },
     "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==",
-      "requires": {}
+      "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw=="
     },
     "postcss-double-position-gradients": {
       "version": "3.1.2",
@@ -26494,8 +26503,7 @@
     "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==",
-      "requires": {}
+      "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ=="
     },
     "postcss-focus-visible": {
       "version": "6.0.4",
@@ -26516,14 +26524,12 @@
     "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==",
-      "requires": {}
+      "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA=="
     },
     "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==",
-      "requires": {}
+      "integrity": "sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg=="
     },
     "postcss-image-set-function": {
       "version": "4.0.7",
@@ -26546,8 +26552,7 @@
     "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==",
-      "requires": {}
+      "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ=="
     },
     "postcss-js": {
       "version": "4.0.0",
@@ -26588,14 +26593,12 @@
     "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==",
-      "requires": {}
+      "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g=="
     },
     "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==",
-      "requires": {}
+      "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ=="
     },
     "postcss-merge-longhand": {
       "version": "5.1.7",
@@ -26656,8 +26659,7 @@
     "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==",
-      "requires": {}
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw=="
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -26715,8 +26717,7 @@
     "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==",
-      "requires": {}
+      "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg=="
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -26809,8 +26810,7 @@
     "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==",
-      "requires": {}
+      "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ=="
     },
     "postcss-place": {
       "version": "7.0.5",
@@ -26904,8 +26904,7 @@
     "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==",
-      "requires": {}
+      "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw=="
     },
     "postcss-selector-not": {
       "version": "6.0.1",
@@ -27682,6 +27681,16 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "sass": {
+      "version": "1.56.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.56.0.tgz",
+      "integrity": "sha512-WFJ9XrpkcnqZcYuLRJh5qiV6ibQOR4AezleeEjTjMsCocYW59dEG19U3fwTTXxzi2Ed3yjPBp727hbbj53pHFw==",
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@@ -28158,8 +28167,7 @@
     "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==",
-      "requires": {}
+      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ=="
     },
     "stylehacks": {
       "version": "5.1.1",
@@ -28924,8 +28932,7 @@
         "ws": {
           "version": "8.10.0",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.10.0.tgz",
-          "integrity": "sha512-+s49uSmZpvtAsd2h37vIPy1RBusaLawVe8of+GyEPsaJTCMpj/2v8NpeK1SHXjBlQ95lQTmQofOJnFiLoaN3yw==",
-          "requires": {}
+          "integrity": "sha512-+s49uSmZpvtAsd2h37vIPy1RBusaLawVe8of+GyEPsaJTCMpj/2v8NpeK1SHXjBlQ95lQTmQofOJnFiLoaN3yw=="
         }
       }
     },
@@ -29385,8 +29392,7 @@
     "ws": {
       "version": "7.5.9",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "requires": {}
+      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q=="
     },
     "xml-name-validator": {
       "version": "3.0.0",
diff --git a/package.json b/package.json
index ddcf845..0673e64 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "sass": "^1.56.0",
     "typescript": "^4.8.4",
     "web-vitals": "^2.1.4"
   },
diff --git a/src/index.tsx b/src/index.tsx
index cda403b..aa65413 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom/client';
 import '../src/assets/index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+// import sass styles
+import './sass/styles.scss';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
diff --git a/src/sass/_color-variables.scss b/src/sass/_color-variables.scss
new file mode 100644
index 0000000..67fa330
--- /dev/null
+++ b/src/sass/_color-variables.scss
@@ -0,0 +1,80 @@
+//colors variables
+// true white
+$color-true-white: #f5fffd;
+//primary green
+$color-primary-green-100: #f5fffd;
+$color-primary-green-200: #ccfff3;
+$color-primary-green-300: #99ffe7;
+$color-primary-green-400: #66ffdb;
+$color-primary-green-500: #33ffcf;
+$color-primary-green-600: #00ffc3;
+$color-primary-green-700: #00cc9c;
+$color-primary-green-800: #009975;
+$color-primary-green-900: #00664e;
+$color-primary-green-1000: #003327;
+$color-primary-green-1100: #000f0c;
+
+//neutral
+$color-neutral-100: #f7f7f7;
+$color-neutral-200: #e5e6e6;
+$color-neutral-300: #cbcdcc;
+$color-neutral-400: #b2b3b3;
+$color-neutral-500: #009975;
+$color-neutral-600: #7e8180;
+$color-neutral-700: #656767;
+$color-neutral-800: #4c4d4d;
+$color-neutral-900: #00664e;
+$color-neutral-1000: #003327;
+$color-neutral-1100: #080808;
+
+// red
+$color-red-100: #fff0f0;
+$color-red-200: #ffcccc;
+$color-red-300: #ff9999;
+$color-red-400: #fe6767;
+$color-red-500: #fe3434;
+$color-red-600: #fe0101;
+$color-red-700: #cb0101;
+$color-red-800: #980101;
+$color-red-900: #660000;
+$color-red-1000: #330000;
+$color-red-1100: #0f0000;
+
+// blue
+$color-blue-100: #e8f3ff;
+$color-blue-200: #b5d8ff;
+$color-blue-300: #82beff;
+$color-blue-400: #4fa3ff;
+$color-blue-500: #197be5;
+$color-blue-600: #0061cc;
+$color-blue-700: #2f6299;
+$color-blue-800: #204166;
+$color-blue-900: #102133;
+$color-blue-1000: #08101a;
+$color-blue-1100: #04080d;
+
+// yellow
+$color-yellow-100: #fffcf2;
+$color-yellow-200: #fff4cc;
+$color-yellow-300: #ffe999;
+$color-yellow-400: #ffdd66;
+$color-yellow-500: #ffd233;
+$color-yellow-600: #ffc700;
+$color-yellow-700: #cc9f00;
+$color-yellow-800: #997700;
+$color-yellow-900: #665000;
+$color-yellow-1000: #332800;
+$color-yellow-1100: #1a1400;
+
+// usage example
+// use varible to color fonts, container backgrounds...
+// element to be styled
+/* 
+body {
+   //call the varible with the color you want
+   // backgroud color
+   background-color: $color-blue-100;
+   // as font color
+   color: $color-primary-green-600;
+ }
+ */
diff --git a/src/sass/_fonts.scss b/src/sass/_fonts.scss
new file mode 100644
index 0000000..715c7c3
--- /dev/null
+++ b/src/sass/_fonts.scss
@@ -0,0 +1,136 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+// desktop
+@mixin desktop-title {
+  size: xxxx-large;
+  font-size: 3.815 rem;
+  font-weight: bold;
+  line-height: 5.719 rem;
+}
+@mixin desktop-h1 {
+  size: xxx-large;
+  font-size: 3.052 rem;
+  font-weight: semi-bold;
+  line-height: 4.594 rem;
+}
+@mixin desktop-h2 {
+  size: xx-large;
+  font-size: 2.441 rem;
+  font-weight: medium;
+  line-height: 3.656 rem;
+}
+@mixin desktop-h3 {
+  size: x-large;
+  font-size: 1.953 rem;
+  font-weight: medium;
+  line-height: 2.906 rem;
+}
+@mixin desktop-h4 {
+  size: large;
+  font-size: 1.562 rem;
+  font-weight: regular;
+  line-height: 2.344 rem;
+}
+@mixin desktop-h4-bold {
+  size: large;
+  font-size: 1.562 rem;
+  font-weight: bold;
+  line-height: 2.344 rem;
+}
+@mixin desktop-paragraph-big {
+  size: medium;
+  font-size: 1.25 rem;
+  font-weight: regular;
+  line-height: 1.875 rem;
+}
+@mixin desktop-paragraph-big-bold {
+  size: medium;
+  font-size: 1.25 rem;
+  font-weight: bold;
+  line-height: 1.875 rem;
+}
+@mixin desktop-paragraph-standard {
+  size: base;
+  font-size: 1 rem;
+  font-weight: regular;
+  line-height: 1.5 rem;
+}
+@mixin desktop-paragraph-standard-bold {
+  size: base;
+  font-size: 1 rem;
+  font-weight: bold;
+  line-height: 1.5 rem;
+}
+@mixin desktop-captions {
+  size: caption;
+  font-size: 0.8 rem;
+  font-weight: bold;
+  line-height: 1.219 rem;
+}
+// mobile
+@mixin mobile-title {
+  size: xxx-large;
+  font-size: 3.052 rem;
+  font-weight: semi-bold;
+  line-height: 4.594 rem;
+}
+@mixin mobile-h1 {
+  size: xx-large;
+  font-size: 2.441 rem;
+  font-weight: medium;
+  line-height: 3.656 rem;
+}
+@mixin mobile-h2 {
+  size: x-large;
+  font-size: 1.953 rem;
+  font-weight: medium;
+  line-height: 2.906 rem;
+}
+@mixin mobile-h3-bold {
+  size: x-large;
+  font-size: 1.562 rem;
+  font-weight: regular;
+  line-height: 2.344 rem;
+}
+@mixin mobile-paragraph-big {
+  size: medium;
+  font-size: 1.25 rem;
+  font-weight: regular;
+  line-height: 1.875 rem;
+}
+@mixin mobile-paragraph-big-bold {
+  size: medium;
+  font-size: 1.25 rem;
+  font-weight: bold;
+  line-height: 1.875 rem;
+}
+@mixin mobile-paragraph-standard {
+  size: base;
+  font-size: 1 rem;
+  font-weight: regular;
+  line-height: 1.5 rem;
+}
+@mixin mobile-paragraph-standard-bold {
+  size: base;
+  font-size: 1 rem;
+  font-weight: bold;
+  line-height: 1.5 rem;
+}
+@mixin mobile-captions {
+  size: caption;
+  font-size: 0.8 rem;
+  font-weight: bold;
+  line-height: 1.219 rem;
+}
+
+// usage example
+// use refrence to design spec
+/*
+.section-className{
+  // your paragraph element
+  .paragraph-className{
+    //call mixin style you want to apply
+    @include desktop-paragraph-standard //applies styles defined in the mixin
+  }
+}
+*/
diff --git a/src/sass/_module-name.scss b/src/sass/_module-name.scss
new file mode 100644
index 0000000..1b3b833
--- /dev/null
+++ b/src/sass/_module-name.scss
@@ -0,0 +1,7 @@
+// example style file, (create your component's style file)
+// create a file and name it beginning with underscore
+// example:
+// _footer.scss
+// import your file on the main style file
+// @import './your-file-name';
+// write your sass style import any varible you need directly.
diff --git a/src/sass/_spacing.scss b/src/sass/_spacing.scss
new file mode 100644
index 0000000..c02ce34
--- /dev/null
+++ b/src/sass/_spacing.scss
@@ -0,0 +1,26 @@
+// spacing variables
+$spacing-01: 0.125rem;
+$spacing-02: 0.25rem;
+$spacing-03: 0.5rem;
+$spacing-04: 0.75rem;
+$spacing-05: 1rem;
+$spacing-06: 1.25rem;
+$spacing-07: 1.5rem;
+$spacing-08: 2rem;
+$spacing-09: 2.5rem;
+$spacing-10: 3rem;
+$spacing-11: 4rem;
+$spacing-12: 5rem;
+$spacing-13: 6rem;
+$spacing-14: 8rem;
+
+// usage example
+// use to space any element or apply marging and spacing in refrence to design spec
+/*
+button{
+    padding: $spacing-01 $spacing-02;
+}
+div{
+    margin-top: $spacing-04;
+}
+*/
diff --git a/src/sass/styles.scss b/src/sass/styles.scss
new file mode 100644
index 0000000..51a547d
--- /dev/null
+++ b/src/sass/styles.scss
@@ -0,0 +1,22 @@
+// color variables
+@import './color-variables';
+// font variables
+@import './fonts';
+// spacing variables
+@import './spacing';
+
+// import your file module after this comment
+// @import './file-name';
+
+// global stylings
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Poppins', sans-serif;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 6d07d1b..7c8712e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,7 +2,98 @@
 module.exports = {
   content: ['./src/**/*.{ts,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      screens: {
+        sm: '480px',
+        md: '768px',
+        lg: '976px',
+        xl: '1440px',
+      },
+      colors: {
+        white: '#f5fffd',
+        green: {
+          100: '#f5fffd',
+          200: '#ccfff3',
+          300: '#99ffe7',
+          400: '#66ffdb',
+          500: '#33ffcf',
+          600: '#00ffc3',
+          700: '#00cc9c',
+          800: '#009975',
+          900: '#00664e',
+          1000: '#003327',
+          1100: '#000f0c',
+        },
+        neutral: {
+          100: '#f7f7f7',
+          200: '#e5e6e6',
+          300: '#cbcdcc',
+          400: '#b2b3b3',
+          500: '#009975',
+          600: '#7e8180',
+          700: '#656767',
+          800: '#4c4d4d',
+          900: '#00664e',
+          1000: '#003327',
+          1100: '#080808',
+        },
+        red: {
+          100: '#fff0f0',
+          200: '#ffcccc',
+          300: '#ff9999',
+          400: '#fe6767',
+          500: '#fe3434',
+          600: '#fe0101',
+          700: '#cb0101',
+          800: '#980101',
+          900: '#660000',
+          1000: '#330000',
+          1100: '#0f0000',
+        },
+        blue: {
+          100: '#e8f3ff',
+          200: '#b5d8ff',
+          300: '#82beff',
+          400: '#4fa3ff',
+          500: '#197be5',
+          600: '#0061cc',
+          700: '#2f6299',
+          800: '#204166',
+          900: '#102133',
+          1000: ' #08101a',
+          1100: ' #04080d',
+        },
+        yellow: {
+          100: '#fffcf2',
+          200: '#fff4cc',
+          300: '#ffe999',
+          400: '#ffdd66',
+          500: '#ffd233',
+          600: '#ffc700',
+          700: '#cc9f00',
+          800: '#997700',
+          900: '#665000',
+          1000: '#332800',
+          1100: '#1a1400',
+        },
+      },
+      spacing: {
+        1: '0.125rem',
+        2: '0.25rem',
+        3: '0.5rem',
+        4: '0.75rem',
+        5: '1rem',
+        6: '1.25rem',
+        7: '1.5rem',
+        8: '2rem',
+        9: '2.5rem',
+        10: '3rem',
+        11: '4rem',
+        12: '5rem',
+        13: '6rem',
+        14: '8rem',
+      },
+    },
   },
   plugins: [],
 };