Index: frontend/package-lock.json
===================================================================
--- frontend/package-lock.json	(revision 3c906619c6626922bbed7a5782cbbcb4dc0c5b15)
+++ frontend/package-lock.json	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -9,9 +9,22 @@
       "version": "0.1.0",
       "dependencies": {
+        "@emotion/react": "^11.10.0",
+        "@emotion/styled": "^11.10.0",
+        "@fortawesome/fontawesome-svg-core": "^6.1.2",
+        "@fortawesome/free-regular-svg-icons": "^6.1.2",
+        "@fortawesome/free-solid-svg-icons": "^6.1.2",
+        "@mui/icons-material": "^5.8.4",
+        "@mui/material": "^5.10.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^0.27.2",
+        "bootstrap": "^5.2.0",
+        "font-awesome": "^4.7.0",
         "react": "^18.2.0",
+        "react-bootstrap": "^2.5.0",
         "react-dom": "^18.2.0",
+        "react-helmet-async": "^1.3.0",
+        "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
@@ -2119,4 +2132,158 @@
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.0.tgz",
+      "integrity": "sha512-xVnpDAAbtxL1dsuSelU5A7BnY/lftws0wUexNJZTPsvX/1tM4GZJbclgODhvW4E+NH7E5VFcH0bBn30NvniPJA==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/plugin-syntax-jsx": "^7.17.12",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.0",
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/serialize": "^1.1.0",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.0.13"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.10.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.1.tgz",
+      "integrity": "sha512-uZTj3Yz5D69GE25iFZcIQtibnVCFsc/6+XIozyL3ycgWvEdif2uEw9wlUt6umjLr4Keg9K6xRPHmD8LGi+6p1A==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/sheet": "^1.2.0",
+        "@emotion/utils": "^1.2.0",
+        "@emotion/weak-memoize": "^0.3.0",
+        "stylis": "4.0.13"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz",
+      "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ=="
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz",
+      "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.0"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
+      "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.0.tgz",
+      "integrity": "sha512-K6z9zlHxxBXwN8TcpwBKcEsBsOw4JWCCmR+BeeOWgqp8GIU1yA2Odd41bwdAAr0ssbQrbJbVnndvv7oiv1bZeQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.10.0",
+        "@emotion/cache": "^11.10.0",
+        "@emotion/serialize": "^1.1.0",
+        "@emotion/utils": "^1.2.0",
+        "@emotion/weak-memoize": "^0.3.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.0.tgz",
+      "integrity": "sha512-F1ZZZW51T/fx+wKbVlwsfchr5q97iW8brAnXmsskz4d0hVB4O3M/SiA3SaeH06x02lSNzkkQv+n3AX3kCXKSFA==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.0",
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/unitless": "^0.8.0",
+        "@emotion/utils": "^1.2.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.0.tgz",
+      "integrity": "sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w=="
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.0.tgz",
+      "integrity": "sha512-V9oaEH6V4KePeQpgUE83i8ht+4Ri3E8Djp/ZPJ4DQlqWhSKITvgzlR3/YQE2hdfP4Jw3qVRkANJz01LLqK9/TA==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.10.0",
+        "@emotion/is-prop-valid": "^1.2.0",
+        "@emotion/serialize": "^1.1.0",
+        "@emotion/utils": "^1.2.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
+      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz",
+      "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
+      "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "1.3.0",
@@ -2177,4 +2344,49 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.2.tgz",
+      "integrity": "sha512-wBaAPGz1Awxg05e0PBRkDRuTsy4B3dpBm+zreTTyd9TH4uUM27cAL4xWyWR0rLJCrRwzVsQ4hF3FvM6rqydKPA==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.2.tgz",
+      "integrity": "sha512-853G/Htp0BOdXnPoeCPTjFrVwyrJHpe8MhjB/DYE9XjwhnNDfuBCd3aKc2YUYbEfHEcBws4UAA0kA9dymZKGjA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.2.tgz",
+      "integrity": "sha512-xR4hA+tAwsaTHGfb+25H1gVU/aJ0Rzu+xIUfnyrhaL13yNQ7TWiI2RvzniAaB+VGHDU2a+Pk96Ve+pkN3/+TTQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.2.tgz",
+      "integrity": "sha512-lTgZz+cMpzjkHmCwOG3E1ilUZrnINYdqMmrkv30EC3XbRsGlbIOL8H9LaNp5SV4g0pNJDfQ4EdTWWaMvdwyLiQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.1.2"
+      },
+      "engines": {
+        "node": ">=6"
       }
     },
@@ -2938,4 +3150,250 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-alpha.92",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.92.tgz",
+      "integrity": "sha512-ZgnSLrTXL4iUdLQhjp01dAOTQPQlnwrqjZRwDT3E6LZXEYn6cMv1MY6LZkWcF/zxrUnyasnsyMAgZ5d8AXS7bA==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@emotion/is-prop-valid": "^1.1.3",
+        "@mui/types": "^7.1.5",
+        "@mui/utils": "^5.9.3",
+        "@popperjs/core": "^2.11.5",
+        "clsx": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/base/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
+    "node_modules/@mui/icons-material": {
+      "version": "5.8.4",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.8.4.tgz",
+      "integrity": "sha512-9Z/vyj2szvEhGWDvb+gG875bOGm8b8rlHBKOD1+nA3PcgC3fV6W1AU6pfOorPeBfH2X4mb9Boe97vHvaSndQvA==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.0.tgz",
+      "integrity": "sha512-MSEzkE2vhpM37m8Gh3+TcZCWL70p+MxzNvS8FHugBB6YZpafhBFmFKX7/pYJ2kVD87PpUhNR4szWub7/ohE02Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@mui/base": "5.0.0-alpha.92",
+        "@mui/system": "^5.10.0",
+        "@mui/types": "^7.1.5",
+        "@mui/utils": "^5.9.3",
+        "@types/react-transition-group": "^4.4.5",
+        "clsx": "^1.2.1",
+        "csstype": "^3.1.0",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.9.3.tgz",
+      "integrity": "sha512-Ys3WO39WqoGciGX9k5AIi/k2zJhlydv4FzlEEwtw9OqdMaV0ydK/TdZekKzjP9sTI/JcdAP3H5DWtUaPLQJjWg==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@mui/utils": "^5.9.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.10.0.tgz",
+      "integrity": "sha512-V0MmOx7KBDomDYg2/dRItVsvrpHpd51uZZiNqeuXiZruUJ1vPwtxztpvtSjX/xKvIxN7C0mxf8jmuwVUn6uaEA==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@emotion/cache": "^11.9.3",
+        "csstype": "^3.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.0.tgz",
+      "integrity": "sha512-HNu3LdA+37cWqgJBEhOF4F5LX4WVmvg6SoHRfajRO0neKXLdooibMP3W1bhSd27QcPxyMUmvY9/Dlp9znDeCRw==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@mui/private-theming": "^5.9.3",
+        "@mui/styled-engine": "^5.10.0",
+        "@mui/types": "^7.1.5",
+        "@mui/utils": "^5.9.3",
+        "clsx": "^1.2.1",
+        "csstype": "^3.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.1.5",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.5.tgz",
+      "integrity": "sha512-HnRXrxgHJYJcT8ZDdDCQIlqk0s0skOKD7eWs9mJgBUu70hyW4iA6Kiv3yspJR474RFH8hysKR65VVSzUSzkuwA==",
+      "peerDependencies": {
+        "@types/react": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.9.3.tgz",
+      "integrity": "sha512-l0N5bcrenE9hnwZ/jPecpIRqsDFHkPXoFUcmkgysaJwVZzJ3yQkGXB47eqmXX5yyGrSc6HksbbqXEaUya+siew==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@types/prop-types": "^15.7.5",
+        "@types/react-is": "^16.7.1 || ^17.0.0",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@mui/utils/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
@@ -3019,4 +3477,55 @@
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.3.0.tgz",
+      "integrity": "sha512-yNqUDuOVZIUGP81R87BJVi/ZUZp/nYOBXbPsRe7oltJOfErQZD+UezMpw4vM2KRz18cURffvmC8tJ6JTeyDtaQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
+      "integrity": "sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A==",
+      "dependencies": {
+        "dequal": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.3.1.tgz",
+      "integrity": "sha512-MYvMs2eeZTHu2dBJHOXKx72vxzEZeWbZx2z1QjeXq62iYjpjIyukBC2ZEy8x+sb9Gl0AiOiHkPXrl1wn95aOGQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@popperjs/core": "^2.11.5",
+        "@react-aria/ssr": "^3.2.0",
+        "@restart/hooks": "^0.4.7",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.2",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
@@ -3942,4 +4451,20 @@
       }
     },
+    "node_modules/@types/react-is": {
+      "version": "17.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz",
+      "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
@@ -4002,4 +4527,9 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
+    },
+    "node_modules/@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
     },
     "node_modules/@types/ws": {
@@ -4792,4 +5322,26 @@
       "engines": {
         "node": ">=4"
+      }
+    },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
       }
     },
@@ -5203,4 +5755,22 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "node_modules/bootstrap": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.0.tgz",
+      "integrity": "sha512-qlnS9GL6YZE6Wnef46GxGv1UpGGzAwO0aPL1yOjzDIJpeApeMvqV24iL+pjr2kU4dduoBA9fINKWKgMToobx9A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.5"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
@@ -5450,4 +6020,9 @@
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.1",
@@ -5477,4 +6052,12 @@
         "strip-ansi": "^6.0.0",
         "wrap-ansi": "^7.0.0"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
       }
     },
@@ -6267,4 +6850,12 @@
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destroy": {
       "version": "1.2.0",
@@ -6401,4 +6992,13 @@
       "dependencies": {
         "utila": "~0.4"
+      }
+    },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
       }
     },
@@ -7767,4 +8367,9 @@
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
@@ -7816,4 +8421,12 @@
           "optional": true
         }
+      }
+    },
+    "node_modules/font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg==",
+      "engines": {
+        "node": ">=0.10.3"
       }
     },
@@ -8356,4 +8969,25 @@
       }
     },
+    "node_modules/history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
@@ -8714,4 +9348,12 @@
       "engines": {
         "node": ">= 0.4"
+      }
+    },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
       }
     },
@@ -13527,4 +14169,21 @@
       }
     },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/prop-types-extra/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
@@ -13700,4 +14359,33 @@
       "engines": {
         "node": ">=14"
+      }
+    },
+    "node_modules/react-bootstrap": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.5.0.tgz",
+      "integrity": "sha512-j/aLR+okzbYk61TM3eDOU1NqOqnUdwyVrF+ojoCRUxPdzc2R0xXvqyRsjSoyRoCo7n82Fs/LWjPCin/QJNdwvA==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@restart/hooks": "^0.4.6",
+        "@restart/ui": "^1.3.1",
+        "@types/react-transition-group": "^4.4.4",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
@@ -13836,4 +14524,25 @@
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
+    "node_modules/react-helmet-async": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.3.0.tgz",
+      "integrity": "sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.2.0",
+        "shallowequal": "^1.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.6.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
@@ -13841,4 +14550,9 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
@@ -13847,4 +14561,28 @@
       "engines": {
         "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "dependencies": {
+        "history": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "dependencies": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
       }
     },
@@ -13921,4 +14659,19 @@
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
@@ -14610,4 +15363,9 @@
       "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=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
@@ -15014,4 +15772,9 @@
         "postcss": "^8.2.15"
       }
+    },
+    "node_modules/stylis": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+      "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
     },
     "node_modules/supports-color": {
@@ -15544,4 +16307,18 @@
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
@@ -15745,4 +16522,12 @@
       "dependencies": {
         "makeerror": "1.0.12"
+      }
+    },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
       }
     },
@@ -18008,4 +18793,123 @@
       "requires": {}
     },
+    "@emotion/babel-plugin": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.0.tgz",
+      "integrity": "sha512-xVnpDAAbtxL1dsuSelU5A7BnY/lftws0wUexNJZTPsvX/1tM4GZJbclgODhvW4E+NH7E5VFcH0bBn30NvniPJA==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/plugin-syntax-jsx": "^7.17.12",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.0",
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/serialize": "^1.1.0",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.0.13"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
+        }
+      }
+    },
+    "@emotion/cache": {
+      "version": "11.10.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.1.tgz",
+      "integrity": "sha512-uZTj3Yz5D69GE25iFZcIQtibnVCFsc/6+XIozyL3ycgWvEdif2uEw9wlUt6umjLr4Keg9K6xRPHmD8LGi+6p1A==",
+      "requires": {
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/sheet": "^1.2.0",
+        "@emotion/utils": "^1.2.0",
+        "@emotion/weak-memoize": "^0.3.0",
+        "stylis": "4.0.13"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz",
+      "integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ=="
+    },
+    "@emotion/is-prop-valid": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz",
+      "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==",
+      "requires": {
+        "@emotion/memoize": "^0.8.0"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
+      "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
+    },
+    "@emotion/react": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.0.tgz",
+      "integrity": "sha512-K6z9zlHxxBXwN8TcpwBKcEsBsOw4JWCCmR+BeeOWgqp8GIU1yA2Odd41bwdAAr0ssbQrbJbVnndvv7oiv1bZeQ==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.10.0",
+        "@emotion/cache": "^11.10.0",
+        "@emotion/serialize": "^1.1.0",
+        "@emotion/utils": "^1.2.0",
+        "@emotion/weak-memoize": "^0.3.0",
+        "hoist-non-react-statics": "^3.3.1"
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.0.tgz",
+      "integrity": "sha512-F1ZZZW51T/fx+wKbVlwsfchr5q97iW8brAnXmsskz4d0hVB4O3M/SiA3SaeH06x02lSNzkkQv+n3AX3kCXKSFA==",
+      "requires": {
+        "@emotion/hash": "^0.9.0",
+        "@emotion/memoize": "^0.8.0",
+        "@emotion/unitless": "^0.8.0",
+        "@emotion/utils": "^1.2.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.0.tgz",
+      "integrity": "sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w=="
+    },
+    "@emotion/styled": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.0.tgz",
+      "integrity": "sha512-V9oaEH6V4KePeQpgUE83i8ht+4Ri3E8Djp/ZPJ4DQlqWhSKITvgzlR3/YQE2hdfP4Jw3qVRkANJz01LLqK9/TA==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.10.0",
+        "@emotion/is-prop-valid": "^1.2.0",
+        "@emotion/serialize": "^1.1.0",
+        "@emotion/utils": "^1.2.0"
+      }
+    },
+    "@emotion/unitless": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
+      "integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
+    },
+    "@emotion/utils": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz",
+      "integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
+      "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
+    },
     "@eslint/eslintrc": {
       "version": "1.3.0",
@@ -18050,4 +18954,33 @@
           "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ=="
         }
+      }
+    },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.2.tgz",
+      "integrity": "sha512-wBaAPGz1Awxg05e0PBRkDRuTsy4B3dpBm+zreTTyd9TH4uUM27cAL4xWyWR0rLJCrRwzVsQ4hF3FvM6rqydKPA=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.2.tgz",
+      "integrity": "sha512-853G/Htp0BOdXnPoeCPTjFrVwyrJHpe8MhjB/DYE9XjwhnNDfuBCd3aKc2YUYbEfHEcBws4UAA0kA9dymZKGjA==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.2"
+      }
+    },
+    "@fortawesome/free-regular-svg-icons": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.2.tgz",
+      "integrity": "sha512-xR4hA+tAwsaTHGfb+25H1gVU/aJ0Rzu+xIUfnyrhaL13yNQ7TWiI2RvzniAaB+VGHDU2a+Pk96Ve+pkN3/+TTQ==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.2"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.2.tgz",
+      "integrity": "sha512-lTgZz+cMpzjkHmCwOG3E1ilUZrnINYdqMmrkv30EC3XbRsGlbIOL8H9LaNp5SV4g0pNJDfQ4EdTWWaMvdwyLiQ==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.1.2"
       }
     },
@@ -18618,4 +19551,120 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "@mui/base": {
+      "version": "5.0.0-alpha.92",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.92.tgz",
+      "integrity": "sha512-ZgnSLrTXL4iUdLQhjp01dAOTQPQlnwrqjZRwDT3E6LZXEYn6cMv1MY6LZkWcF/zxrUnyasnsyMAgZ5d8AXS7bA==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@emotion/is-prop-valid": "^1.1.3",
+        "@mui/types": "^7.1.5",
+        "@mui/utils": "^5.9.3",
+        "@popperjs/core": "^2.11.5",
+        "clsx": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+        }
+      }
+    },
+    "@mui/icons-material": {
+      "version": "5.8.4",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.8.4.tgz",
+      "integrity": "sha512-9Z/vyj2szvEhGWDvb+gG875bOGm8b8rlHBKOD1+nA3PcgC3fV6W1AU6pfOorPeBfH2X4mb9Boe97vHvaSndQvA==",
+      "requires": {
+        "@babel/runtime": "^7.17.2"
+      }
+    },
+    "@mui/material": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.0.tgz",
+      "integrity": "sha512-MSEzkE2vhpM37m8Gh3+TcZCWL70p+MxzNvS8FHugBB6YZpafhBFmFKX7/pYJ2kVD87PpUhNR4szWub7/ohE02Q==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@mui/base": "5.0.0-alpha.92",
+        "@mui/system": "^5.10.0",
+        "@mui/types": "^7.1.5",
+        "@mui/utils": "^5.9.3",
+        "@types/react-transition-group": "^4.4.5",
+        "clsx": "^1.2.1",
+        "csstype": "^3.1.0",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+        }
+      }
+    },
+    "@mui/private-theming": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.9.3.tgz",
+      "integrity": "sha512-Ys3WO39WqoGciGX9k5AIi/k2zJhlydv4FzlEEwtw9OqdMaV0ydK/TdZekKzjP9sTI/JcdAP3H5DWtUaPLQJjWg==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@mui/utils": "^5.9.3",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/styled-engine": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.10.0.tgz",
+      "integrity": "sha512-V0MmOx7KBDomDYg2/dRItVsvrpHpd51uZZiNqeuXiZruUJ1vPwtxztpvtSjX/xKvIxN7C0mxf8jmuwVUn6uaEA==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@emotion/cache": "^11.9.3",
+        "csstype": "^3.1.0",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/system": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.0.tgz",
+      "integrity": "sha512-HNu3LdA+37cWqgJBEhOF4F5LX4WVmvg6SoHRfajRO0neKXLdooibMP3W1bhSd27QcPxyMUmvY9/Dlp9znDeCRw==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@mui/private-theming": "^5.9.3",
+        "@mui/styled-engine": "^5.10.0",
+        "@mui/types": "^7.1.5",
+        "@mui/utils": "^5.9.3",
+        "clsx": "^1.2.1",
+        "csstype": "^3.1.0",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/types": {
+      "version": "7.1.5",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.5.tgz",
+      "integrity": "sha512-HnRXrxgHJYJcT8ZDdDCQIlqk0s0skOKD7eWs9mJgBUu70hyW4iA6Kiv3yspJR474RFH8hysKR65VVSzUSzkuwA==",
+      "requires": {}
+    },
+    "@mui/utils": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.9.3.tgz",
+      "integrity": "sha512-l0N5bcrenE9hnwZ/jPecpIRqsDFHkPXoFUcmkgysaJwVZzJ3yQkGXB47eqmXX5yyGrSc6HksbbqXEaUya+siew==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@types/prop-types": "^15.7.5",
+        "@types/react-is": "^16.7.1 || ^17.0.0",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+        }
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
@@ -18655,4 +19704,41 @@
         "schema-utils": "^3.0.0",
         "source-map": "^0.7.3"
+      }
+    },
+    "@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
+    },
+    "@react-aria/ssr": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.3.0.tgz",
+      "integrity": "sha512-yNqUDuOVZIUGP81R87BJVi/ZUZp/nYOBXbPsRe7oltJOfErQZD+UezMpw4vM2KRz18cURffvmC8tJ6JTeyDtaQ==",
+      "requires": {
+        "@babel/runtime": "^7.6.2"
+      }
+    },
+    "@restart/hooks": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
+      "integrity": "sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A==",
+      "requires": {
+        "dequal": "^2.0.2"
+      }
+    },
+    "@restart/ui": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.3.1.tgz",
+      "integrity": "sha512-MYvMs2eeZTHu2dBJHOXKx72vxzEZeWbZx2z1QjeXq62iYjpjIyukBC2ZEy8x+sb9Gl0AiOiHkPXrl1wn95aOGQ==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@popperjs/core": "^2.11.5",
+        "@react-aria/ssr": "^3.2.0",
+        "@restart/hooks": "^0.4.7",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.2",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
       }
     },
@@ -19349,4 +20435,20 @@
       }
     },
+    "@types/react-is": {
+      "version": "17.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz",
+      "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
@@ -19409,4 +20511,9 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
+    },
+    "@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
     },
     "@types/ws": {
@@ -19972,4 +21079,25 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz",
       "integrity": "sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w=="
+    },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
     },
     "axobject-query": {
@@ -20297,4 +21425,10 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "bootstrap": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.0.tgz",
+      "integrity": "sha512-qlnS9GL6YZE6Wnef46GxGv1UpGGzAwO0aPL1yOjzDIJpeApeMvqV24iL+pjr2kU4dduoBA9fINKWKgMToobx9A==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "1.1.11",
@@ -20467,4 +21601,9 @@
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "clean-css": {
       "version": "5.3.1",
@@ -20491,4 +21630,9 @@
         "wrap-ansi": "^7.0.0"
       }
+    },
+    "clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
     },
     "co": {
@@ -21048,4 +22192,9 @@
       "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
     },
+    "dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="
+    },
     "destroy": {
       "version": "1.2.0",
@@ -21152,4 +22301,13 @@
       "requires": {
         "utila": "~0.4"
+      }
+    },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
       }
     },
@@ -22162,4 +23320,9 @@
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "find-up": {
       "version": "5.0.0",
@@ -22189,4 +23352,9 @@
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
       "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA=="
+    },
+    "font-awesome": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
+      "integrity": "sha512-U6kGnykA/6bFmg1M/oT9EkFeIYv7JlX3bozwQJWiiLz6L0w3F5vBVPxHlwyX/vtNq1ckcpRKOB9f2Qal/VtFpg=="
     },
     "fork-ts-checker-webpack-plugin": {
@@ -22558,4 +23726,27 @@
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
@@ -22820,4 +24011,12 @@
         "has": "^1.0.3",
         "side-channel": "^1.0.4"
+      }
+    },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
       }
     },
@@ -26118,4 +27317,20 @@
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "proxy-addr": {
       "version": "2.0.7",
@@ -26233,4 +27448,23 @@
         "regenerator-runtime": "^0.13.9",
         "whatwg-fetch": "^3.6.2"
+      }
+    },
+    "react-bootstrap": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.5.0.tgz",
+      "integrity": "sha512-j/aLR+okzbYk61TM3eDOU1NqOqnUdwyVrF+ojoCRUxPdzc2R0xXvqyRsjSoyRoCo7n82Fs/LWjPCin/QJNdwvA==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@restart/hooks": "^0.4.6",
+        "@restart/ui": "^1.3.1",
+        "@types/react-transition-group": "^4.4.4",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
       }
     },
@@ -26335,4 +27569,21 @@
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
+    "react-helmet-async": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.3.0.tgz",
+      "integrity": "sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.2.0",
+        "shallowequal": "^1.1.0"
+      }
+    },
     "react-is": {
       "version": "17.0.2",
@@ -26340,8 +27591,30 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
+    },
+    "react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      }
     },
     "react-scripts": {
@@ -26400,4 +27673,15 @@
       }
     },
+    "react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
@@ -26905,4 +28189,9 @@
       "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",
@@ -27205,4 +28494,9 @@
         "postcss-selector-parser": "^6.0.4"
       }
+    },
+    "stylis": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+      "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
     },
     "supports-color": {
@@ -27603,4 +28897,15 @@
       }
     },
+    "uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
@@ -27745,4 +29050,12 @@
       "requires": {
         "makeerror": "1.0.12"
+      }
+    },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
       }
     },
Index: frontend/package.json
===================================================================
--- frontend/package.json	(revision 3c906619c6626922bbed7a5782cbbcb4dc0c5b15)
+++ frontend/package.json	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -1,12 +1,26 @@
 {
   "name": "frontend",
+  "proxy": "http://localhost:5000",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "@fortawesome/fontawesome-svg-core": "^6.1.2",
+    "@fortawesome/free-regular-svg-icons": "^6.1.2",
+    "@fortawesome/free-solid-svg-icons": "^6.1.2",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.10.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.27.2",
+    "bootstrap": "^5.2.0",
+    "font-awesome": "^4.7.0",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.5.0",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^1.3.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
Index: frontend/public/manifest.json
===================================================================
--- frontend/public/manifest.json	(revision 3c906619c6626922bbed7a5782cbbcb4dc0c5b15)
+++ frontend/public/manifest.json	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -7,14 +7,4 @@
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
Index: frontend/src/App.css
===================================================================
--- frontend/src/App.css	(revision 3c906619c6626922bbed7a5782cbbcb4dc0c5b15)
+++ frontend/src/App.css	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -1,38 +1,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
Index: frontend/src/App.js
===================================================================
--- frontend/src/App.js	(revision 3c906619c6626922bbed7a5782cbbcb4dc0c5b15)
+++ frontend/src/App.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -1,23 +1,32 @@
-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
+import Home from "./screens/HomeWithJumbo";
+import ProductScreen from "./screens/ProductScreen";
+import Test from "./screens/ProductScreenBootstrap";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { useContext } from "react";
+import { Store } from "./Store";
+import Header from "./components/Header";
+import Footer from "./components/Footer";
+import CartScreen from "./screens/CartScreen";
+import CategoryScreen from "./screens/CategoryScreen";
+import SigninScreen from "./screens/SigninScreen";
 
 function App() {
+  const { state } = useContext(Store);
+  const { cart } = state;
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <BrowserRouter>
+      <Header />
+
+      <Routes>
+        <Route path="/product/:slug" element={<Test />} />
+        <Route path="/" element={<Home />} />
+        <Route path="/cart" element={<CartScreen />} />
+        <Route path="/signin" element={<SigninScreen />} />
+        <Route path="/products" element={<CategoryScreen />} />
+      </Routes>
+
+      <Footer />
+    </BrowserRouter>
   );
 }
Index: frontend/src/Images/icon1.svg
===================================================================
--- frontend/src/Images/icon1.svg	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/Images/icon1.svg	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.5, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 38.03 37.92" style="enable-background:new 0 0 38.03 37.92;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#808285;}
+</style>
+<path class="st0" d="M36.76,20.51c-0.38-0.46-0.9-0.76-1.51-0.87l-0.09-0.02l-0.31-4.23h0.13c0.23,0,0.43-0.17,0.47-0.4l0.11-0.64
+	c0.12-0.66-0.04-1.3-0.44-1.77c-0.39-0.47-0.97-0.73-1.63-0.73H28.9l0.25-1.37c0.05-0.31-0.03-0.62-0.22-0.85s-0.48-0.36-0.79-0.36
+	H18.09v0.96h10.13l-1.95,11.05c-0.02,0.12,0,0.25,0.08,0.36c0.07,0.1,0.18,0.17,0.39,0.2c0.23,0,0.43-0.17,0.47-0.39l0.16-0.9h7.34
+	c0.54,0,1,0.2,1.31,0.57c0.21,0.25,0.34,0.57,0.37,0.92l0.01,0.13h-2.15c-0.23,0-0.43,0.17-0.47,0.4l-0.23,1.29
+	c-0.08,0.48,0.04,0.96,0.33,1.31c0.29,0.34,0.73,0.54,1.21,0.54h0.72l-0.52,2.91h-1.8l-0.02-0.1c-0.1-0.52-0.32-0.98-0.66-1.38
+	c-0.59-0.71-1.47-1.1-2.46-1.1c-1.58,0-3.15,1.01-3.9,2.51l-0.03,0.07h-0.47l0.81-4.59c0.02-0.13-0.01-0.26-0.08-0.36
+	c-0.07-0.11-0.19-0.18-0.4-0.21c-0.23,0-0.43,0.17-0.47,0.4l-0.84,4.76h-11.4l-0.02-0.1c-0.1-0.52-0.32-0.98-0.66-1.38
+	c-0.59-0.71-1.47-1.1-2.46-1.1c-1.58,0-3.15,1.01-3.9,2.51L6.5,28.62H2.8L3.09,27H2.11l-0.24,1.38C1.82,28.69,1.89,29,2.09,29.23
+	c0.19,0.22,0.47,0.35,0.78,0.35h3.3l-0.02,0.15c-0.16,0.99,0.08,1.92,0.67,2.62c0.6,0.71,1.47,1.1,2.47,1.1c2,0,3.91-1.62,4.26-3.62
+	l0.04-0.25h12.5l-0.02,0.15c-0.16,0.99,0.08,1.92,0.67,2.62c0.6,0.71,1.47,1.1,2.47,1.1c2,0,3.91-1.62,4.27-3.62l0.03-0.25h2.19
+	c0.23,0,0.43-0.16,0.47-0.39l1.14-6.45C37.46,21.9,37.26,21.1,36.76,20.51z M27.54,19.59l0.74-4.2h5.6l0.31,4.2H27.54z M34.57,14.43
+	h-6.12l0.29-1.62h4.75c0.37,0,0.69,0.14,0.9,0.38c0.21,0.26,0.29,0.61,0.23,0.99L34.57,14.43z M12.61,29.66
+	c-0.28,1.57-1.77,2.83-3.32,2.83c-0.71,0-1.33-0.26-1.73-0.75c-0.42-0.5-0.59-1.18-0.46-1.91C7.38,28.27,8.87,27,10.43,27
+	c0.7,0,1.32,0.27,1.73,0.76C12.58,28.26,12.74,28.94,12.61,29.66z M32.53,29.66c-0.27,1.57-1.76,2.83-3.32,2.83
+	c-0.71,0-1.32-0.26-1.73-0.75c-0.42-0.5-0.58-1.18-0.46-1.91C27.3,28.27,28.79,27,30.35,27c0.7,0,1.32,0.27,1.73,0.76
+	C32.5,28.26,32.66,28.94,32.53,29.66z M35.98,24.75h-0.89c-0.2,0-0.36-0.07-0.47-0.2c-0.12-0.13-0.16-0.32-0.12-0.52l0.16-0.9h1.6
+	L35.98,24.75z"/>
+<path class="st0" d="M9.74,30.87c-0.31,0-0.6-0.13-0.79-0.36c-0.19-0.23-0.27-0.54-0.22-0.85c0.1-0.58,0.64-1.04,1.23-1.04
+	c0.31,0,0.6,0.13,0.79,0.36c0.19,0.23,0.27,0.54,0.22,0.85C10.87,30.42,10.33,30.87,9.74,30.87z"/>
+<path class="st0" d="M29.66,30.87c-0.31,0-0.6-0.13-0.79-0.36c-0.19-0.23-0.27-0.54-0.22-0.85c0.1-0.58,0.64-1.04,1.23-1.04
+	c0.31,0,0.6,0.13,0.79,0.36c0.19,0.23,0.27,0.54,0.22,0.85C30.79,30.42,30.25,30.87,29.66,30.87z"/>
+<path class="st0" d="M1.98,27.75l0.54-3.05c0.04-0.23,0.24-0.4,0.47-0.4c0.21,0.03,0.32,0.1,0.39,0.2c0.07,0.1,0.1,0.23,0.08,0.36
+	l-0.69,3.89"/>
+<path class="st0" d="M18.96,10.23l-3.62-0.01c-0.23,0-0.43-0.17-0.47-0.4C14.86,9.62,14.91,9.49,15,9.4
+	c0.09-0.09,0.21-0.14,0.34-0.14l4.47,0.01"/>
+<g>
+	<path class="st0" d="M3.89,22.83c-0.1,0-0.2-0.03-0.29-0.09c-0.23-0.16-0.28-0.47-0.12-0.7l8.6-12.32c0.16-0.23,0.47-0.28,0.7-0.12
+		c0.23,0.16,0.28,0.47,0.12,0.7L4.3,22.62C4.2,22.75,4.05,22.83,3.89,22.83z"/>
+</g>
+<g>
+	<path class="st0" d="M12.1,22.05c-1.64,0-2.98-1.33-2.98-2.98s1.33-2.98,2.98-2.98s2.98,1.33,2.98,2.98S13.74,22.05,12.1,22.05z
+		 M12.1,17.1c-1.09,0-1.98,0.89-1.98,1.98s0.89,1.98,1.98,1.98s1.98-0.89,1.98-1.98S13.19,17.1,12.1,17.1z"/>
+</g>
+<g>
+	<path class="st0" d="M4.33,16.26c-1.64,0-2.98-1.33-2.98-2.98s1.33-2.98,2.98-2.98s2.98,1.33,2.98,2.98S5.97,16.26,4.33,16.26z
+		 M4.33,11.31c-1.09,0-1.98,0.89-1.98,1.98s0.89,1.98,1.98,1.98s1.98-0.89,1.98-1.98S5.42,11.31,4.33,11.31z"/>
+</g>
+</svg>
Index: frontend/src/Images/icon2.svg
===================================================================
--- frontend/src/Images/icon2.svg	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/Images/icon2.svg	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.5, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 39.69 39.69" style="enable-background:new 0 0 39.69 39.69;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#808285;}
+</style>
+<g>
+	<g>
+		<g>
+			<path class="st0" d="M6.56,34.33c-0.7,0-1.36-0.3-1.94-0.88c-0.59-0.59-0.89-1.24-0.89-1.94V14.55
+				c-1.58-0.97-2.59-2.73-2.59-4.57c0-1.91,1.02-3.67,2.66-4.61c0.17-0.09,0.37-0.09,0.53,0C4.5,5.48,4.6,5.65,4.6,5.84v3.53
+				l1.85,1.04l1.86-1.04V5.84c0-0.19,0.1-0.37,0.27-0.46c0.17-0.1,0.37-0.1,0.53,0c1.64,0.93,2.66,2.7,2.66,4.61
+				c0,1.81-0.91,3.49-2.39,4.46v17.07C9.38,33.04,8.09,34.33,6.56,34.33z M3.53,6.91C2.7,7.69,2.21,8.8,2.21,9.98
+				c0,1.55,0.91,3.04,2.31,3.78c0.18,0.09,0.28,0.28,0.28,0.47v17.27c0,0.41,0.19,0.79,0.57,1.18c1.26,1.26,2.93,0.18,2.93-1.18
+				V14.14c0-0.19,0.1-0.37,0.27-0.47c1.33-0.75,2.12-2.13,2.12-3.69c0-1.18-0.49-2.29-1.32-3.08v2.78c0,0.19-0.1,0.37-0.27,0.47
+				L6.71,11.5c-0.16,0.09-0.36,0.09-0.53,0L3.8,10.15c-0.17-0.09-0.27-0.27-0.27-0.47V6.91z"/>
+		</g>
+	</g>
+	<g>
+		<path class="st0" d="M31.89,21.66H20.41c-0.3,0-0.54-0.24-0.54-0.54v-9.19c0-1.56,1.27-2.83,2.83-2.83h6.48
+			c1.79,0,3.24,1.45,3.24,3.24v8.77C32.42,21.42,32.18,21.66,31.89,21.66z M20.94,20.58h10.41v-8.24c0-1.2-0.97-2.17-2.17-2.17H22.7
+			c-0.97,0-1.76,0.79-1.76,1.76V20.58z M18.57,21.66H11.2c-0.3,0-0.54-0.24-0.54-0.54s0.24-0.54,0.54-0.54h6.84v-8.65
+			c0-0.97-0.79-1.76-1.76-1.76h-2.9c-0.3,0-0.54-0.24-0.54-0.54s0.24-0.54,0.54-0.54h2.9c1.56,0,2.83,1.27,2.83,2.83v9.19
+			C19.11,21.42,18.87,21.66,18.57,21.66z"/>
+	</g>
+	<g>
+		<path class="st0" d="M35.4,34.38h-2.95c-0.27,0-0.5-0.2-0.53-0.47l-0.56-4.17c-0.02-0.15,0.03-0.31,0.13-0.42
+			c0.1-0.12,0.25-0.18,0.4-0.18h2.95c0.27,0,0.5,0.2,0.53,0.47l0.56,4.17c0.02,0.15-0.03,0.31-0.13,0.42
+			C35.7,34.31,35.55,34.38,35.4,34.38z M32.91,33.3h1.87l-0.41-3.1H32.5L32.91,33.3z"/>
+	</g>
+	<g>
+		<path class="st0" d="M38.55,30.2H11.2c-0.3,0-0.54-0.24-0.54-0.54c0-0.3,0.24-0.54,0.54-0.54h26.27V18.06c0-0.49-0.4-0.9-0.9-0.9
+			h-1.37v6.15c0,0.58-0.47,1.06-1.06,1.06H11.2c-0.3,0-0.54-0.24-0.54-0.54c0-0.3,0.24-0.54,0.54-0.54h22.95l-0.02-7.21h2.44
+			c1.09,0,1.97,0.88,1.97,1.97V30.2z"/>
+	</g>
+</g>
+</svg>
Index: frontend/src/Images/icon3.svg
===================================================================
--- frontend/src/Images/icon3.svg	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/Images/icon3.svg	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.5, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 39.69 39.69" style="enable-background:new 0 0 39.69 39.69;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#808285;}
+</style>
+<g>
+	<path class="st0" d="M8.19,20.26c-0.26,0-0.47-0.21-0.47-0.47s0.21-0.47,0.47-0.47h16.57c0.26,0,0.47,0.21,0.47,0.47
+		s-0.21,0.47-0.47,0.47H8.19z"/>
+	<path class="st0" d="M30.88,31.93c-1,0-1.87-0.39-2.47-1.1c-0.59-0.7-0.83-1.64-0.67-2.63l0.02-0.14h-12.5l-0.04,0.25
+		c-0.35,2-2.27,3.62-4.27,3.62c-1,0-1.87-0.39-2.47-1.1c-0.59-0.7-0.83-1.64-0.67-2.63l0.02-0.14h-3.3c-0.31,0-0.6-0.13-0.79-0.36
+		c-0.19-0.23-0.27-0.54-0.22-0.85l0.24-1.37H1.13c-0.26,0-0.48-0.22-0.48-0.48s0.22-0.48,0.48-0.48h6.45c0.26,0,0.48,0.22,0.48,0.48
+		s-0.22,0.48-0.48,0.48H4.76L4.48,27.1h3.69l0.03-0.07c0.75-1.5,2.32-2.51,3.9-2.51c1,0,1.87,0.39,2.47,1.1
+		c0.33,0.4,0.55,0.86,0.66,1.38l0.02,0.1h11.4l0.84-4.76c0.04-0.23,0.24-0.4,0.47-0.4c0.21,0.03,0.32,0.1,0.39,0.2
+		c0.07,0.1,0.1,0.23,0.08,0.36l-0.81,4.6h0.47l0.03-0.07c0.75-1.5,2.32-2.51,3.9-2.51c1,0,1.87,0.39,2.47,1.1
+		c0.33,0.4,0.55,0.86,0.66,1.38l0.02,0.1h1.8l0.51-2.91h-0.72c-0.48,0-0.92-0.2-1.21-0.54c-0.29-0.35-0.41-0.83-0.33-1.31l0.23-1.29
+		c0.04-0.23,0.24-0.4,0.47-0.4h2.15l-0.01-0.14c-0.03-0.35-0.16-0.66-0.37-0.92c-0.31-0.37-0.77-0.57-1.31-0.57h-7.34l-0.16,0.89
+		c-0.04,0.23-0.24,0.4-0.47,0.4c-0.21-0.03-0.32-0.1-0.39-0.21c-0.07-0.1-0.1-0.23-0.08-0.36l1.95-11.05H7.96
+		c-0.12,0-0.26,0.12-0.29,0.25L5.74,19.93c-0.04,0.23-0.24,0.4-0.47,0.4c-0.34-0.05-0.52-0.3-0.47-0.56L6.73,8.79
+		c0.1-0.58,0.64-1.04,1.23-1.04h21.86c0.31,0,0.6,0.13,0.79,0.36c0.19,0.23,0.27,0.54,0.22,0.85l-0.24,1.37h4.59
+		c0.66,0,1.23,0.26,1.63,0.73c0.39,0.47,0.55,1.12,0.44,1.77l-0.11,0.65c-0.04,0.23-0.24,0.39-0.47,0.4l-0.13,0l0.31,4.23l0.09,0.02
+		c0.6,0.11,1.12,0.41,1.5,0.86c0.5,0.6,0.7,1.39,0.55,2.23l-1.14,6.45c-0.04,0.23-0.24,0.4-0.47,0.4h-2.19l-0.04,0.25
+		C34.8,30.31,32.88,31.93,30.88,31.93z M32.02,25.48c-1.56,0-3.05,1.27-3.32,2.83c-0.13,0.73,0.03,1.41,0.45,1.91
+		c0.41,0.49,1.02,0.76,1.73,0.76c1.56,0,3.05-1.27,3.32-2.83c0.13-0.73-0.03-1.41-0.45-1.91C33.35,25.75,32.73,25.48,32.02,25.48z
+		 M12.1,25.48c-1.56,0-3.05,1.27-3.32,2.83c-0.13,0.73,0.03,1.41,0.45,1.91c0.41,0.49,1.02,0.76,1.73,0.76
+		c1.56,0,3.05-1.27,3.32-2.83c0.13-0.73-0.03-1.41-0.45-1.91C13.42,25.75,12.81,25.48,12.1,25.48z M36.17,22.51
+		c-0.04,0.21,0.01,0.39,0.12,0.53c0.11,0.13,0.27,0.2,0.47,0.2l0.89,0l0.29-1.62h-1.61L36.17,22.51z M29.22,18.07h6.65l-0.31-4.2
+		h-5.6L29.22,18.07z M30.13,12.91h6.12l0.04-0.25c0.07-0.38-0.01-0.73-0.23-0.99c-0.21-0.25-0.52-0.38-0.89-0.38h-4.76L30.13,12.91z
+		"/>
+	<path class="st0" d="M11.42,29.35c-0.31,0-0.6-0.13-0.79-0.36c-0.19-0.23-0.27-0.54-0.22-0.85c0.1-0.58,0.64-1.04,1.23-1.04
+		c0.31,0,0.6,0.13,0.79,0.36c0.19,0.23,0.27,0.54,0.22,0.85C12.55,28.9,12.01,29.35,11.42,29.35z"/>
+	<path class="st0" d="M31.34,29.35c-0.31,0-0.6-0.13-0.79-0.36c-0.19-0.23-0.27-0.54-0.22-0.85c0.1-0.58,0.64-1.04,1.23-1.04
+		c0.31,0,0.6,0.13,0.79,0.36c0.19,0.23,0.27,0.54,0.22,0.85C32.47,28.9,31.93,29.35,31.34,29.35z"/>
+	<path class="st0" d="M2.88,22.9c-0.26,0-0.48-0.22-0.48-0.48c0-0.26,0.22-0.48,0.48-0.48h11.16c0.26,0,0.48,0.22,0.48,0.48
+		c0,0.26-0.22,0.48-0.48,0.48H2.88z"/>
+</g>
+</svg>
Index: frontend/src/Store.js
===================================================================
--- frontend/src/Store.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/Store.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,43 @@
+import { createContext, useReducer } from "react";
+
+export const Store = createContext();
+
+const initialState = {
+  cart: {
+    cartItems: localStorage.getItem("cartItems")
+      ? JSON.parse(localStorage.getItem("cartItems"))
+      : [],
+  },
+};
+
+function reducer(state, action) {
+  switch (action.type) {
+    case "CART_ADD_ITEM":
+      const newItem = action.payload;
+      const existItem = state.cart.cartItems.find(
+        (item) => item._id === newItem._id
+      );
+      const cartItems = existItem
+        ? state.cart.cartItems.map((item) =>
+            item._id === existItem._id ? newItem : item
+          )
+        : [...state.cart.cartItems, newItem];
+      localStorage.setItem("cartItems", JSON.stringify(cartItems));
+      return { ...state, cart: { ...state.cart, cartItems } };
+    case "CART_REMOVE_ITEM": {
+      const cartItems = state.cart.cartItems.filter(
+        (item) => item._id !== action.payload._id
+      );
+      localStorage.setItem("cartItems", JSON.stringify(cartItems));
+      return { ...state, cart: { ...state.cart, cartItems } };
+    }
+    default:
+      return state;
+  }
+}
+
+export function StoreProvider(props) {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  const value = { state, dispatch };
+  return <Store.Provider value={value}>{props.children}</Store.Provider>;
+}
Index: frontend/src/components/Footer.js
===================================================================
--- frontend/src/components/Footer.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/components/Footer.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,41 @@
+import React from "react";
+import "../styles/Footer.css";
+import fbIcon from "../Images/facebook.png";
+import igIcon from "../Images/instragram.png";
+import twIcon from "../Images/twitter.png";
+import piIcon from "../Images/pinterest.png";
+
+function Footer() {
+  return (
+    <div className="footer">
+      <div className="footer__contact">
+        <h2>Контакти</h2>
+        <p>E-mail: mebelcity@gmail.com</p>
+        <p>Од понеделник до сабота: 08:00 - 19:00</p>
+        <p>Недела: 09:00 - 16:00</p>
+        <p>Call Center: 0123456789 </p>
+      </div>
+      <div className="footer__social">
+        <h2>Следете не</h2>
+        <div className="socialIconText">
+          <img alt="facebook" src={fbIcon}></img>
+          <span>Facebook</span>
+        </div>
+        <div className="socialIconText">
+          <img alt="instagram" src={igIcon}></img>
+          <span>Instagram</span>
+        </div>
+        <div className="socialIconText">
+          <img alt="twitter" src={twIcon}></img>
+          <span>Twitter</span>
+        </div>
+        <div className="socialIconText">
+          <img alt="pinterest" src={piIcon}></img>
+          <span>Pinterest</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Footer;
Index: frontend/src/components/Header.js
===================================================================
--- frontend/src/components/Header.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/components/Header.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,519 @@
+import React from "react";
+import logo from "../Images/logo.png";
+import "../styles/Header.css";
+import SearchIcon from "@mui/icons-material/Search";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+//import ShoppingBasketIcon from '@mui/icons-material/ShoppingBasket';
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import WeekendIcon from "@mui/icons-material/Weekend";
+import MeetingRoomIcon from "@mui/icons-material/MeetingRoom";
+import TableRestaurantIcon from "@mui/icons-material/TableRestaurant";
+import BedIcon from "@mui/icons-material/Bed";
+import KitchenIcon from "@mui/icons-material/Kitchen";
+import ChairAltIcon from "@mui/icons-material/ChairAlt";
+import BedroomChildIcon from "@mui/icons-material/BedroomChild";
+import DeckIcon from "@mui/icons-material/Deck";
+import ShoppingBasketIcon from "@mui/icons-material/ShoppingCart";
+import MenuIcon from "@mui/icons-material/Menu";
+import { Link } from "react-router-dom";
+import logo2 from "../Images/logo2.png";
+import Badge from "react-bootstrap/Badge";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import { Store } from "../Store";
+import { useContext } from "react";
+
+const toggleMenu = (event) => {
+  let menu = document.querySelector(".mobile-menu-container");
+  menu.classList.remove("hidden");
+  menu.classList.add("visible");
+};
+
+const toggleSubMenu = (event) => {
+  let menu = document.querySelector(".subDropdown");
+  menu.classList.remove("hidden");
+  menu.classList.add("visible");
+  let tog = document.querySelector(".subMenu");
+  tog.removeAttribute("onClick");
+  console.log("SubMenu Visible");
+};
+
+const categoryMenuTrigger = (event) => {
+  event.stopPropagation();
+  let span = event.target;
+  let menu = document.querySelector(`.${span.classList[0]}-menu`);
+  menu.classList.remove("hidden");
+  menu.classList.add("visible");
+};
+
+const closeMenu = (event) => {
+  let menu = document.querySelector(".mobile-menu-container");
+  menu.classList.remove("visible");
+  menu.classList.add("hidden");
+};
+
+const backToMenu = (event) => {
+  event.stopPropagation();
+  let menu1 = document.querySelector(".subDropdown");
+  menu1.classList.remove("visible");
+  menu1.classList.add("hidden");
+  console.log("SubMenu Invisible");
+};
+
+const backToSubMenu = (event) => {
+  event.stopPropagation();
+  let menu = document.querySelector(`.${event.target.classList[0]}-menu`);
+  menu.classList.remove("visible");
+  menu.classList.add("hidden");
+};
+
+function Header() {
+  const { state } = useContext(Store);
+  const { cart } = state;
+  return (
+    <div className="header">
+      <div className="header__iconContainer">
+        <MenuIcon
+          className="header__icon"
+          fontSize="large"
+          onClick={toggleMenu}
+        />
+        <img className="header__icon" src={logo2} alt="logo"></img>
+      </div>
+      <div className="mobile-menu-container hidden">
+        <div className="closeBtn" onClick={closeMenu}>
+          x
+        </div>
+        <ul className="mobile-menu">
+          <li>Почетна</li>
+          <li onClick={toggleSubMenu} className="subMenu">
+            Производи <ArrowDropDownIcon />
+            <div className="subDropdown hidden">
+              <div className="backBtn" onClick={backToMenu}>
+                <ArrowBackIcon />
+                Назад
+              </div>
+              <ul className="mobile-submenu">
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="dnevna">
+                    <WeekendIcon /> Дневна
+                  </span>
+                  <div className="category-menu dnevna-menu hidden">
+                    <div onClick={backToSubMenu} className="dnevna">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Аголни гарнитури</li>
+                      <li>Софи</li>
+                      <li>Фотелји</li>
+                      <li>Табуретки</li>
+                      <li>Клуб Маси</li>
+                      <li>ТВ комоди</li>
+                      <li>Комоди</li>
+                    </ul>
+                  </div>
+                </li>
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="hodnik">
+                    <MeetingRoomIcon />
+                    Ходник
+                  </span>
+                  <div className="category-menu hodnik-menu hidden">
+                    <div onClick={backToSubMenu} className="hodnik">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Шкафови за чевли</li>
+                      <li>Закачалки и огледала</li>
+                      <li>Колекции за ходник</li>
+                    </ul>
+                  </div>
+                </li>
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="kujna">
+                    <KitchenIcon />
+                    Кујна
+                  </span>
+                  <div className="category-menu kujna-menu hidden">
+                    <div onClick={backToSubMenu} className="kujna">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Кујнски аголни гарнитури</li>
+                      <li>Стандардни кујни</li>
+                    </ul>
+                  </div>
+                </li>
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="spalna">
+                    <BedIcon />
+                    Спална
+                  </span>
+                  <div className="category-menu spalna-menu hidden">
+                    <div onClick={backToSubMenu} className="spalna">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Спални комплети</li>
+                      <li>Лежаи</li>
+                      <li>Кревети</li>
+                      <li>Плакари</li>
+                      <li>Ноќни шкафчиња</li>
+                      <li>Тоалетни маси</li>
+                    </ul>
+                  </div>
+                </li>
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="gradina">
+                    <DeckIcon />
+                    Градина
+                  </span>
+                  <div className="category-menu gradina-menu hidden">
+                    <div onClick={backToSubMenu} className="gradina">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Градинарски комплети</li>
+                      <li>Градинарски лулки</li>
+                      <li>Градинарски чадори</li>
+                      <li>Градинарски маси</li>
+                      <li>Градинарски столови</li>
+                      <li>Градинарско осветлување</li>
+                    </ul>
+                  </div>
+                </li>
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="kancelarija">
+                    <ChairAltIcon />
+                    Канцеларија
+                  </span>
+                  <div className="category-menu kancelarija-menu hidden">
+                    <div onClick={backToSubMenu} className="kancelarija">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Бироа</li>
+                      <li>Канцелариски столови</li>
+                      <li>Гејмерски столови</li>
+                      <li>Канцелариски шкафови</li>
+                    </ul>
+                  </div>
+                </li>
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="trpezarija">
+                    <TableRestaurantIcon />
+                    Трпезарија
+                  </span>
+                  <div className="category-menu trpezarija-menu hidden">
+                    <div onClick={backToSubMenu} className="trpezarija">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Трпезариски маси</li>
+                      <li>Трпезариски столови</li>
+                      <li>Кујнски гарнитури</li>
+                      <li>Бар столови и маси</li>
+                    </ul>
+                  </div>
+                </li>
+                <li
+                  className="category-menu-trigger"
+                  onClick={categoryMenuTrigger}
+                >
+                  <span className="detska">
+                    <BedroomChildIcon />
+                    Детска соба
+                  </span>
+                  <div className="category-menu detska-menu hidden">
+                    <div onClick={backToSubMenu} className="detska">
+                      <ArrowBackIcon />
+                      Назад
+                    </div>
+                    <ul>
+                      <li>Колекции за детска соба</li>
+                      <li>Детски бироа</li>
+                      <li>Лежаи</li>
+                    </ul>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </li>
+          <li>За Нас</li>
+          <li>Контакти</li>
+        </ul>
+      </div>
+      <nav className="header__menu">
+        <img src={logo} alt="logo"></img>
+        <li>
+          <Link to={"/"} className="link">
+            Почетна
+          </Link>
+        </li>
+        <li className="header__products">
+          <span className="header__productsSpan">
+            Производи <ArrowDropDownIcon />
+          </span>
+          <div className="header__dropdown">
+            <div className="header__dropdownColumn">
+              <ul>
+                <li>
+                  <a href="#">
+                    <span>
+                      <WeekendIcon /> Дневна
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Аголни гарнитури</a>
+                    </li>
+                    <li>
+                      <a href="#">Софи</a>
+                    </li>
+                    <li>
+                      <a href="#">Фотелји</a>
+                    </li>
+                    <li>
+                      <a href="#">Табуретки</a>
+                    </li>
+                    <li>
+                      <a href="#">Клуб Маси</a>
+                    </li>
+                    <li>
+                      <a href="#">ТВ Комоди</a>
+                    </li>
+                    <li>
+                      <a href="#">Комоди</a>
+                    </li>
+                  </ul>
+                </li>
+                <li>
+                  <a href="#">
+                    <span>
+                      <MeetingRoomIcon />
+                      Ходник
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Шкафови за чевли</a>
+                    </li>
+                    <li>
+                      <a href="#">Закачалки и огледала</a>
+                    </li>
+                    <li>
+                      <a href="#">Колекции за ходник</a>
+                    </li>
+                  </ul>
+                </li>
+                <li>
+                  <a href="#">
+                    <span>
+                      <KitchenIcon />
+                      Кујна
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Кујнски аголни гарнитури</a>
+                    </li>
+                    <li>
+                      <a href="#">Стандардни кујни</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+            <div className="header__dropdownColumn">
+              <ul>
+                <li>
+                  <a href="#">
+                    <span>
+                      <BedIcon />
+                      Спална
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Спални комплети</a>
+                    </li>
+
+                    <li>
+                      <a href="#">Лежаи</a>
+                    </li>
+
+                    <li>
+                      <a href="#">Кревети</a>
+                    </li>
+
+                    <li>
+                      <a href="#">Плакари</a>
+                    </li>
+                    <li>
+                      <a href="#">Ноќни шкафчиња</a>
+                    </li>
+                    <li>
+                      <a href="#">Тоалетни маси</a>
+                    </li>
+                  </ul>
+                </li>
+                <li>
+                  <a href="#">
+                    <span>
+                      <DeckIcon />
+                      Мебел за градина
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Градинарски комплети</a>
+                    </li>
+                    <li>
+                      <a href="#">Градинарски лулки</a>
+                    </li>
+                    <li>
+                      <a href="#">Градинарски чадори</a>
+                    </li>
+                    <li>
+                      <a href="#">Градинарски маси</a>
+                    </li>
+                    <li>
+                      <a href="#">Градинарски столови</a>
+                    </li>
+                    <li>
+                      <a href="#">Градинарско осветлување</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+            <div className="header__dropdownColumn">
+              <ul>
+                <li>
+                  <a href="#">
+                    <span>
+                      <ChairAltIcon />
+                      Канцеларија
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Бироа</a>
+                    </li>
+                    <li>
+                      <a href="#">Канцелариски столови</a>
+                    </li>
+                    <li>
+                      <a href="#">Гејмерски столови</a>
+                    </li>
+                    <li>
+                      <a href="#">Канцелариски шкафови</a>
+                    </li>
+                  </ul>
+                </li>
+                <li>
+                  <a href="#">
+                    <span>
+                      <TableRestaurantIcon />
+                      Трпезарија
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Трпезариски маси</a>
+                    </li>
+                    <li>
+                      <a href="#">Трпезариски столови</a>
+                    </li>
+                    <li>
+                      <a href="#">Кујнски гарнитури</a>
+                    </li>
+                    <li>
+                      <a href="#">Бар столови и маси</a>
+                    </li>
+                  </ul>
+                </li>
+                <li>
+                  <a href="#">
+                    <span>
+                      <BedroomChildIcon />
+                      Детска соба
+                    </span>
+                  </a>
+                  <ul>
+                    <li>
+                      <a href="#">Колекции за детска соба</a>
+                    </li>
+                    <li>
+                      <a href="#">Детски бироа</a>
+                    </li>
+                    <li>
+                      <a href="#">Лежаи</a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+            <div className="header__dropdownColumn">
+              <ul></ul>
+            </div>
+          </div>
+        </li>
+        <li className="header__aboutUs">За Нас</li>
+        <li className="header__contacts">Контакти</li>
+      </nav>
+      <div className="header__right">
+        <div className="header__buttons">
+          <span>
+            <AccountCircleIcon className="header__login" fontSize="large" />
+            <p>Најави се</p>
+          </span>
+          <Link to="/cart" className="badgee">
+            <span>
+              <ShoppingBasketIcon className="header__cart" fontSize="large" />
+
+              {cart.cartItems.length > 0 && (
+                <Badge pill bg="danger">
+                  {cart.cartItems.reduce((a, c) => a + c.quantity, 0)}
+                </Badge>
+              )}
+            </span>
+          </Link>
+        </div>
+        <div className="header__search">
+          <input className="header__searchInput" type="text" />
+          <SearchIcon className="header__searchIcon" fontSize="large" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Header;
Index: frontend/src/components/ImageSlider.js
===================================================================
--- frontend/src/components/ImageSlider.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/components/ImageSlider.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,96 @@
+import React from 'react'
+import { useState } from 'react'
+
+
+const ImageSlider = ({ slides }) => {
+    const [currentIndex, setCurrentIndex] = useState(0);
+
+    const sliderStyles = {
+        height: "100%",
+        position: "relative",
+    }
+
+    const slideStyles = {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        width: "100%",
+        height: "100%",
+        backgroundPosition: "center",
+        backgroundSize: 'cover',
+        backgroundImage: `url(${slides[currentIndex].url})`
+    }
+
+    const leftArrowStyle = {
+        fontSize: '60px',
+        color: '#fff',
+        userSelect: 'none',
+        zIndex: 2,
+        cursor: 'pointer',
+        marginLeft: "10px",
+    };
+
+    const rightArrowStyle = {
+        fontSize: '60px',
+        userSelect: 'none',
+        color: '#fff',
+        zIndex: 2,
+        cursor: 'pointer',
+        marginRight: "10px",
+    };
+
+    const goToPrevious = () =>{
+        const isFirstSlide = currentIndex === 0;
+        const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
+        setCurrentIndex(newIndex);
+    }
+
+    const goToNext = () =>{
+        const isLastSlide = currentIndex === slides.length - 1;
+        const newIndex = isLastSlide ? 0 : currentIndex + 1;
+        setCurrentIndex(newIndex);
+    }
+
+    /*
+    const slideBtnContainer = {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        marginTop: "5px",
+
+    }
+
+    const slideBtn = {
+        marginLeft: "5px",
+        width: "20px",
+        height: "20px",
+        borderRadius: "50%",
+        backgroundColor: "grey",
+        cursor: "pointer",
+    }
+    
+    const changeSlide = (index) =>{
+        setCurrentIndex(index);
+    }
+
+     <div style={slideBtnContainer}>
+                <button style={slideBtn} onClick={()=>changeSlide(0)}></button>
+                <button style={slideBtn} onClick={()=>changeSlide(1)}></button>
+                <button style={slideBtn} onClick={()=>changeSlide(2)}></button>
+            </div>
+    */
+
+    return(
+        <div style={sliderStyles}>
+            
+            <div style={slideStyles}>
+                <div style={leftArrowStyle} onClick={goToPrevious}>{"<"}</div>
+                <div style={rightArrowStyle} onClick={goToNext}>{">"}</div>
+            </div>
+           
+            
+        </div>
+    )
+}
+
+export default ImageSlider
Index: frontend/src/components/JumboSlider.js
===================================================================
--- frontend/src/components/JumboSlider.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/components/JumboSlider.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,21 @@
+import Carousel from "react-bootstrap/Carousel";
+import image1 from "../Images/slideshow1.png";
+import image2 from "../Images/slideshow2.png";
+import image3 from "../Images/slideshow3.png";
+function CarouselFadeExample() {
+  return (
+    <Carousel fade>
+      <Carousel.Item>
+        <img className="d-block w-100" src={image1} alt="First slide" />
+      </Carousel.Item>
+      <Carousel.Item>
+        <img className="d-block w-100" src={image2} alt="Second slide" />
+      </Carousel.Item>
+      <Carousel.Item>
+        <img className="d-block w-100" src={image3} alt="Third slide" />
+      </Carousel.Item>
+    </Carousel>
+  );
+}
+
+export default CarouselFadeExample;
Index: frontend/src/components/LoadingBox.js
===================================================================
--- frontend/src/components/LoadingBox.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/components/LoadingBox.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,12 @@
+import Spinner from "react-bootstrap/Spinner";
+import Header from "./Header";
+
+export default function LoadingBox() {
+  return (
+    <div>
+      <Spinner animation="border" role="status">
+        <span className="visually-hidden">Loading...</span>
+      </Spinner>
+    </div>
+  );
+}
Index: frontend/src/components/MessageBox.js
===================================================================
--- frontend/src/components/MessageBox.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/components/MessageBox.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,10 @@
+import Alert from "react-bootstrap/Alert";
+import Header from "./Header";
+
+export default function MessageBox(props) {
+  return (
+    <div>
+      <Alert variant={props.variant || "info"}>{props.children}</Alert>
+    </div>
+  );
+}
Index: frontend/src/components/Product.js
===================================================================
--- frontend/src/components/Product.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/components/Product.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,41 @@
+import React, { useContext } from "react";
+import "../styles/Product.css";
+import ShoppingBasketIcon from "@mui/icons-material/ShoppingCart";
+import { Link } from "react-router-dom";
+import { Store } from "../Store";
+
+function Product({ product }) {
+  const { state, dispatch: ctxDispatch } = useContext(Store);
+  const addToCartHandler = () => {
+    ctxDispatch({
+      type: "CART_ADD_ITEM",
+      payload: { ...product, quantity: 1 },
+    });
+  };
+  return (
+    <div className="product__container">
+      <Link to={`/product/${product.slug}`}>
+        <div className="product__img">
+          <img src={product.image} alt="product"></img>
+        </div>
+      </Link>
+      <div className="product__textContainer">
+        <Link to={`/product/${product.slug}`}>
+          <div className="product__name">
+            <h3>{product.name}</h3>
+          </div>
+        </Link>
+        <div className="product__price">
+          <h5>{product.price}ден</h5>
+        </div>
+      </div>
+      <div className="product__addToCart">
+        <button onClick={addToCartHandler}>
+          <ShoppingBasketIcon />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default Product;
Index: frontend/src/components/utils.js
===================================================================
--- frontend/src/components/utils.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/components/utils.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,5 @@
+export const getError = (error) => {
+  return error.response && error.response.data.message
+    ? error.response.data.message
+    : error.message;
+};
Index: frontend/src/data.js
===================================================================
--- frontend/src/data.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/data.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,32 @@
+const data = {
+  products: [
+    {
+      name: "Арин",
+      slug: "gejmerski-stol-arin",
+      category: "office",
+      subCategory: "gaming-chair",
+      image: "/products/arin_0.jpg",
+      price: 4400,
+      countInStock: 20,
+      description:
+        "Димензии:\n- L58 B58 H92-102 см.\nЛицев материјал:\n- еко кожа\nГрадба:\n- пластика\n- челик\n* амортизер на гас",
+      dimension: "/products/arin_dp_0.jpg",
+      scheme: "products/arin_ap_0.jpg",
+    },
+    {
+      name: "Торин",
+      slug: "gejmerski-stol-torin",
+      category: "office",
+      subCategory: "gaming-chair",
+      image: "/products/torin_0.jpg",
+      price: 6300,
+      countInStock: 20,
+      description:
+        "Димензии:\n-  L63 B62 H108 / 115 см.\nЛицев материјал:\n- еко кожа\nГрадба:\n- пластика\n- челик\n* амортизер на гас",
+      dimension: "/products/arin_dp_0.jpg",
+      scheme: "products/arin_ap_0.jpg",
+    },
+  ],
+};
+
+export default data;
Index: frontend/src/index.css
===================================================================
--- frontend/src/index.css	(revision 3c906619c6626922bbed7a5782cbbcb4dc0c5b15)
+++ frontend/src/index.css	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -1,13 +1,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
Index: frontend/src/index.js
===================================================================
--- frontend/src/index.js	(revision 3c906619c6626922bbed7a5782cbbcb4dc0c5b15)
+++ frontend/src/index.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -1,12 +1,18 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { HelmetProvider } from "react-helmet-async";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { StoreProvider } from "./Store";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <App />
+    <StoreProvider>
+      <HelmetProvider>
+        <App />
+      </HelmetProvider>
+    </StoreProvider>
   </React.StrictMode>
 );
Index: frontend/src/logo.svg
===================================================================
--- frontend/src/logo.svg	(revision 3c906619c6626922bbed7a5782cbbcb4dc0c5b15)
+++ 	(revision )
@@ -1,1 +1,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
Index: frontend/src/screens/CartScreen.js
===================================================================
--- frontend/src/screens/CartScreen.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/screens/CartScreen.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,148 @@
+import React, { useContext } from "react";
+import "../styles/CartScreen.css";
+import { Store } from "../Store";
+import { Helmet } from "react-helmet-async";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import MessageBox from "../components/MessageBox";
+import ListGroup from "react-bootstrap/ListGroup";
+import Button from "react-bootstrap/Button";
+import { Link, useNavigate } from "react-router-dom";
+import "bootstrap/dist/css/bootstrap.min.css";
+import AddCircleIcon from "@mui/icons-material/AddCircle";
+import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";
+import DeleteIcon from "@mui/icons-material/Delete";
+import axios from "axios";
+function CartScreen() {
+  const navigate = useNavigate();
+  const { state, dispatch: ctxDispatch } = useContext(Store);
+  const {
+    cart: { cartItems },
+  } = state;
+
+  const updateCartHandler = async (item, quantity) => {
+    const { data } = await axios.get(`/api/products/${item._id}`);
+    if (data.countInStock < quantity) {
+      window.alert("Sorry. Product is out of stock");
+      return;
+    }
+    ctxDispatch({
+      type: "CART_ADD_ITEM",
+      payload: { ...item, quantity },
+    });
+  };
+
+  const removeItemHandler = (item) => {
+    ctxDispatch({ type: "CART_REMOVE_ITEM", payload: item });
+  };
+
+  const checkoutHandler = () => {
+    navigate("/signin?redirect=/shipping");
+  };
+
+  return (
+    <div className="d-flex flex-column pageContainer">
+      <Helmet>
+        <title>Кошничка</title>
+      </Helmet>
+      <main>
+        <h2>Кошничка</h2>
+        <Row className="productRow">
+          <Col>
+            {cartItems.length === 0 ? (
+              <MessageBox>Кошничката е празна</MessageBox>
+            ) : (
+              <ListGroup>
+                {cartItems.map((item) => (
+                  <ListGroup.Item
+                    variant="dark"
+                    key={item._id}
+                    className="item"
+                  >
+                    <div className="itemContainer ">
+                      <div className="trashImgContainer">
+                        <div className="trashIconContainer">
+                          <Button
+                            variant="dark"
+                            onClick={() => removeItemHandler(item)}
+                          >
+                            <DeleteIcon />
+                          </Button>
+                        </div>
+                        <div>
+                          <Link className="link" to={`/product/${item.slug}`}>
+                            <img
+                              src={item.image}
+                              alt={item.name}
+                              className="img-fluid rounded img-thumbnail"
+                            ></img>
+                            <p>{item.name}</p>
+                          </Link>
+                        </div>
+                      </div>
+                      <div className="btnsPriceContainer">
+                        <div className="">
+                          <Button
+                            variant="danger"
+                            onClick={() =>
+                              updateCartHandler(item, item.quantity - 1)
+                            }
+                            disabled={item.quantity === 1}
+                          >
+                            <RemoveCircleIcon />
+                          </Button>{" "}
+                          <input
+                            className="quantityInput"
+                            readOnly
+                            value={item.quantity}
+                          ></input>{" "}
+                          <Button
+                            variant="danger"
+                            className="marginBtn"
+                            onClick={() =>
+                              updateCartHandler(item, item.quantity + 1)
+                            }
+                            disabled={item.quantity === item.countInStock}
+                          >
+                            <AddCircleIcon />
+                          </Button>
+                        </div>
+                        <div>
+                          <h3>{item.price}ден</h3>
+                        </div>
+                      </div>
+                    </div>
+                  </ListGroup.Item>
+                ))}
+              </ListGroup>
+            )}
+          </Col>
+        </Row>
+        {cartItems.length === 0 ? (
+          <h2></h2>
+        ) : (
+          <Row className="productRow lastRow">
+            <div className="totalPriceContainer">
+              <h3>Вкупно:</h3>
+              <h3>
+                {cartItems.reduce((a, c) => a + c.price * c.quantity, 0)}ден
+              </h3>
+            </div>
+            <div className="checkoutBtnContainer">
+              <Button
+                variant="danger"
+                size="lg"
+                onClick={checkoutHandler}
+                disabled={cartItems.length === 0}
+              >
+                НАРАЧАЈТЕ
+              </Button>
+            </div>
+          </Row>
+        )}
+      </main>
+    </div>
+  );
+}
+
+export default CartScreen;
Index: frontend/src/screens/CategoryScreen.js
===================================================================
--- frontend/src/screens/CategoryScreen.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/screens/CategoryScreen.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,64 @@
+import React, { useEffect, useReducer, useState } from "react";
+import "../styles/Home.css";
+// import data from "./data";
+import Product from "../components/Product";
+import axios from "axios";
+import { Helmet } from "react-helmet-async";
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "FETCH_REQUEST":
+      return { ...state, loading: true };
+    case "FETCH_SUCCESS":
+      return { ...state, products: action.payload, loading: false };
+    case "FETCH_FAIL":
+      return { ...state, loading: false, error: action.payload };
+    default:
+      return state;
+  }
+};
+
+function Home() {
+  const [{ loading, error, products }, dispatch] = useReducer(reducer, {
+    products: [],
+    loading: true,
+    error: "",
+  });
+  //const [products, setProducts] = useState([]);
+  useEffect(() => {
+    const fetchData = async () => {
+      dispatch({ type: "FETCH_REQUEST" });
+      try {
+        const result = await axios.get("/api/products");
+        dispatch({ type: "FETCH_SUCCESS", payload: result.data });
+      } catch (err) {
+        dispatch({ type: "FETCH_FAIL", payload: err.message });
+      }
+
+      //setProducts(result.data);
+    };
+    fetchData();
+  }, []);
+
+  return (
+    <div>
+      <Helmet>
+        <title>MebelCity</title>
+      </Helmet>
+
+      <div className="most-popular-products">
+        {loading ? (
+          <div>Loading...</div>
+        ) : error ? (
+          <div>{error}</div>
+        ) : (
+          products.map((product) => (
+            <Product key={product.slug} product={product} />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Home;
Index: frontend/src/screens/Home.js
===================================================================
--- frontend/src/screens/Home.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/screens/Home.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,175 @@
+import React, { useEffect, useReducer, useState } from "react";
+import "../styles/Home.css";
+import Header from "../components/Header";
+import ImageSlider from "../components/ImageSlider";
+import image1 from "../Images/slideshow1.png";
+import image2 from "../Images/slideshow2.png";
+import image3 from "../Images/slideshow3.png";
+import icon1 from "../Images/icon1.svg";
+import icon2 from "../Images/icon2.svg";
+import icon3 from "../Images/icon3.svg";
+import Footer from "../components/Footer";
+// import data from "./data";
+import Product from "../components/Product";
+import axios from "axios";
+import { Helmet } from "react-helmet-async";
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "FETCH_REQUEST":
+      return { ...state, loading: true };
+    case "FETCH_SUCCESS":
+      return { ...state, products: action.payload, loading: false };
+    case "FETCH_FAIL":
+      return { ...state, loading: false, error: action.payload };
+    default:
+      return state;
+  }
+};
+
+function Home() {
+  const [{ loading, error, products }, dispatch] = useReducer(reducer, {
+    products: [],
+    loading: true,
+    error: "",
+  });
+  //const [products, setProducts] = useState([]);
+  useEffect(() => {
+    const fetchData = async () => {
+      dispatch({ type: "FETCH_REQUEST" });
+      try {
+        const result = await axios.get("/api/products");
+        dispatch({ type: "FETCH_SUCCESS", payload: result.data });
+      } catch (err) {
+        dispatch({ type: "FETCH_FAIL", payload: err.message });
+      }
+
+      //setProducts(result.data);
+    };
+    fetchData();
+  }, []);
+
+  const slides = [
+    { url: image1, title: "Shiping" },
+    { url: image2, title: "SchoolDiscount" },
+    { url: image3, title: "OfficeDiscount" },
+  ];
+
+  const clearActive = () => {
+    let icon1 = document.getElementById("icon1");
+    icon1.classList.remove("activeIcon");
+    let icon2 = document.getElementById("icon2");
+    icon2.classList.remove("activeIcon");
+    let icon3 = document.getElementById("icon3");
+    icon3.classList.remove("activeIcon");
+
+    let icon1Text = document.getElementById("icon1-text");
+    icon1Text.classList.remove("activeIcon");
+    let icon2Text = document.getElementById("icon2-text");
+    icon2Text.classList.remove("activeIcon");
+    let icon3Text = document.getElementById("icon3-text");
+    icon3Text.classList.remove("activeIcon");
+
+    let icon1Container = document.getElementById("1");
+    icon1Container.classList.remove("activeIconContainer");
+    let icon2Container = document.getElementById("2");
+    icon2Container.classList.remove("activeIconContainer");
+    let icon3Container = document.getElementById("3");
+    icon3Container.classList.remove("activeIconContainer");
+  };
+
+  const handleClick = (event) => {
+    let clickedIcon = document.getElementById("icon" + event.currentTarget.id);
+    let clickedIconText = document.getElementById(
+      "icon" + event.currentTarget.id + "-text"
+    );
+    clearActive();
+    clickedIcon.classList.add("activeIcon");
+    clickedIconText.classList.add("activeIcon");
+
+    let iconContainer = document.getElementById(event.currentTarget.id);
+    iconContainer.classList.add("activeIconContainer");
+
+    const icon1Text = "Бесплатна достава за нарачки над 1500 ден.";
+    const icon2Text =
+      "Ние можеме да го монтираме мебелот наместо Вас – брзо, лесно и чисто.";
+    const icon3Text = "Доставуваме над 1000 производи до 10 дена.";
+
+    let p = document.querySelector(".icon-description");
+    if (event.currentTarget.id === "1") p.textContent = icon1Text;
+    else if (event.currentTarget.id === "2") p.textContent = icon2Text;
+    else p.textContent = icon3Text;
+  };
+
+  return (
+    <div>
+      <Helmet>
+        <title>MebelCity</title>
+      </Helmet>
+      <Header />
+      <div className="sliderContainer">
+        <ImageSlider slides={slides} />
+      </div>
+      <div className="section">
+        <div className="iconWrapper">
+          <div
+            className="iconContainer activeIconContainer"
+            id="1"
+            onClick={handleClick}
+          >
+            <img
+              src={icon1}
+              alt="бесплатна достава"
+              className="icon activeIcon"
+              id="icon1"
+            />
+            <p className="icon-text activeIcon" id="icon1-text">
+              Бесплатна достава
+            </p>
+          </div>
+          <div className="iconContainer" id="2" onClick={handleClick}>
+            <img src={icon2} className="icon" alt="монтажа" id="icon2" />
+            <p className="icon-text" id="icon2-text">
+              Монтажа
+            </p>
+          </div>
+          <div className="iconContainer" onClick={handleClick} id="3">
+            <img src={icon3} alt="брза достава" className="icon" id="icon3" />
+            <p className="icon-text" id="icon3-text">
+              Брза достава
+            </p>
+          </div>
+        </div>
+        <div className="descriptionContainer">
+          <p className="icon-description">
+            Бесплатна достава за нарачки над 1500 ден.
+          </p>
+        </div>
+      </div>
+      <div className="grid-container">
+        <div className="grid-item item1">Дневна</div>
+        <div className="grid-item item2">Ходник</div>
+        <div className="grid-item item3">Трпезарија</div>
+        <div className="grid-item item4">Спална</div>
+        <div className="grid-item item5">Кујна</div>
+        <div className="grid-item item6">Канцеларија</div>
+        <div className="grid-item item7">Детска соба</div>
+        <div className="grid-item item8">Мебел за градина</div>
+      </div>
+      <div className="most-popular-products">
+        {loading ? (
+          <div>Loading...</div>
+        ) : error ? (
+          <div>{error}</div>
+        ) : (
+          products.map((product) => (
+            <Product key={product.slug} product={product} />
+          ))
+        )}
+      </div>
+      <Footer />
+    </div>
+  );
+}
+
+export default Home;
Index: frontend/src/screens/HomeWithJumbo.js
===================================================================
--- frontend/src/screens/HomeWithJumbo.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/screens/HomeWithJumbo.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,123 @@
+import React from "react";
+import "../styles/Home.css";
+import Header from "../components/Header";
+
+import image1 from "../Images/slideshow1.png";
+import image2 from "../Images/slideshow2.png";
+import image3 from "../Images/slideshow3.png";
+import icon1 from "../Images/icon1.svg";
+import icon2 from "../Images/icon2.svg";
+import icon3 from "../Images/icon3.svg";
+import Footer from "../components/Footer";
+// import data from "./data";
+
+import { Helmet } from "react-helmet-async";
+import Jumbo from "../components/JumboSlider";
+
+function Home() {
+  const clearActive = () => {
+    let icon1 = document.getElementById("icon1");
+    icon1.classList.remove("activeIcon");
+    let icon2 = document.getElementById("icon2");
+    icon2.classList.remove("activeIcon");
+    let icon3 = document.getElementById("icon3");
+    icon3.classList.remove("activeIcon");
+
+    let icon1Text = document.getElementById("icon1-text");
+    icon1Text.classList.remove("activeIcon");
+    let icon2Text = document.getElementById("icon2-text");
+    icon2Text.classList.remove("activeIcon");
+    let icon3Text = document.getElementById("icon3-text");
+    icon3Text.classList.remove("activeIcon");
+
+    let icon1Container = document.getElementById("1");
+    icon1Container.classList.remove("activeIconContainer");
+    let icon2Container = document.getElementById("2");
+    icon2Container.classList.remove("activeIconContainer");
+    let icon3Container = document.getElementById("3");
+    icon3Container.classList.remove("activeIconContainer");
+  };
+
+  const handleClick = (event) => {
+    let clickedIcon = document.getElementById("icon" + event.currentTarget.id);
+    let clickedIconText = document.getElementById(
+      "icon" + event.currentTarget.id + "-text"
+    );
+    clearActive();
+    clickedIcon.classList.add("activeIcon");
+    clickedIconText.classList.add("activeIcon");
+
+    let iconContainer = document.getElementById(event.currentTarget.id);
+    iconContainer.classList.add("activeIconContainer");
+
+    const icon1Text = "Бесплатна достава за нарачки над 1500 ден.";
+    const icon2Text =
+      "Ние можеме да го монтираме мебелот наместо Вас – брзо, лесно и чисто.";
+    const icon3Text = "Доставуваме над 1000 производи до 10 дена.";
+
+    let p = document.querySelector(".icon-description");
+    if (event.currentTarget.id === "1") p.textContent = icon1Text;
+    else if (event.currentTarget.id === "2") p.textContent = icon2Text;
+    else p.textContent = icon3Text;
+  };
+
+  return (
+    <div>
+      <Helmet>
+        <title>MebelCity</title>
+      </Helmet>
+
+      <div className="sliderContainer">
+        <Jumbo />
+      </div>
+      <div className="section">
+        <div className="iconWrapper">
+          <div
+            className="iconContainer activeIconContainer"
+            id="1"
+            onClick={handleClick}
+          >
+            <img
+              src={icon1}
+              alt="бесплатна достава"
+              className="icon activeIcon"
+              id="icon1"
+            />
+            <p className="icon-text activeIcon" id="icon1-text">
+              Бесплатна достава
+            </p>
+          </div>
+          <div className="iconContainer" id="2" onClick={handleClick}>
+            <img src={icon2} className="icon" alt="монтажа" id="icon2" />
+            <p className="icon-text" id="icon2-text">
+              монтажа
+            </p>
+          </div>
+          <div className="iconContainer" onClick={handleClick} id="3">
+            <img src={icon3} alt="брза достава" className="icon" id="icon3" />
+            <p className="icon-text" id="icon3-text">
+              Брза достава
+            </p>
+          </div>
+        </div>
+        <div className="descriptionContainer">
+          <p className="icon-description">
+            Бесплатна достава за нарачки над 1500 ден.
+          </p>
+        </div>
+      </div>
+      <div className="grid-container">
+        <div className="grid-item item1">Дневна</div>
+        <div className="grid-item item2">Ходник</div>
+        <div className="grid-item item3">Трпезарија</div>
+        <div className="grid-item item4">Спална</div>
+        <div className="grid-item item5">Кујна</div>
+        <div className="grid-item item6">Канцеларија</div>
+        <div className="grid-item item7">Детска соба</div>
+        <div className="grid-item item8">Мебел за градина</div>
+      </div>
+    </div>
+  );
+}
+
+export default Home;
Index: frontend/src/screens/ProductScreen.js
===================================================================
--- frontend/src/screens/ProductScreen.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/screens/ProductScreen.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,112 @@
+import axios from "axios";
+import React, { useEffect, useReducer } from "react";
+import { Helmet } from "react-helmet-async";
+import { useParams } from "react-router-dom";
+import Footer from "../components/Footer";
+import "bootstrap/dist/css/bootstrap.min.css";
+import Header from "../components/Header";
+import icon1 from "../Images/icon3.svg";
+import ShoppingBasketIcon from "@mui/icons-material/ShoppingCart";
+import "../styles/ProductScreen.css";
+import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "FETCH_REQUEST":
+      return { ...state, loading: true };
+    case "FETCH_SUCCESS":
+      return { ...state, product: action.payload, loading: false };
+    case "FETCH_FAIL":
+      return { ...state, loading: false, error: action.payload };
+    default:
+      return state;
+  }
+};
+
+function ProductScreen() {
+  const params = useParams();
+  const { slug } = params;
+
+  const [{ loading, error, product }, dispatch] = useReducer(reducer, {
+    product: [],
+    loading: true,
+    error: "",
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      dispatch({ type: "FETCH_REQUEST" });
+      try {
+        const result = await axios.get(`/api/products/slug/${slug}`);
+        dispatch({ type: "FETCH_SUCCESS", payload: result.data });
+      } catch (err) {
+        dispatch({ type: "FETCH_FAIL", payload: err.message });
+      }
+    };
+    fetchData();
+  }, [slug]);
+
+  return loading ? (
+    <div>Loading...</div>
+  ) : error ? (
+    <div>{error}</div>
+  ) : (
+    <div>
+      <Helmet>
+        <title>{product.name}</title>
+      </Helmet>
+      <div>
+        <Header />
+        <Container>
+          <div className="left-side">
+            <div className="mainImg">
+              <img src={product.image} alt={product.name}></img>
+            </div>
+            <div className="sideImgContainer">
+              <div className="sideImg">
+                <img src={product.image} alt={product.name}></img>
+              </div>
+              <div className="sideImg">
+                <img src={product.sideImage} alt={product.name}></img>
+              </div>
+            </div>
+          </div>
+          <div className="right-side">
+            <div className="name-container">
+              <h2>{product.name}</h2>
+            </div>
+            <div className="price-container">
+              <div className="price-left">
+                <h2>{product.price} ден</h2>
+                <span>
+                  <img src={icon1} alt="10-day-delivery"></img>Бесплатна
+                  достава: 10 дена
+                </span>
+              </div>
+              <div className="price-right">
+                <button className="addToCartBtn">
+                  <ShoppingBasketIcon />
+                  ДОДАЈ ВО КОШНИЧКА
+                </button>
+              </div>
+            </div>
+
+            <div className="informationContainer">
+              <div className="table">
+                <div>Опис</div>
+                <div>Димензии</div>
+                <div>Монтажа</div>
+                <div>Шема за монтажа</div>
+              </div>
+            </div>
+          </div>
+        </Container>
+        <Footer />
+      </div>
+    </div>
+  );
+}
+
+export default ProductScreen;
Index: frontend/src/screens/ProductScreenBootstrap.js
===================================================================
--- frontend/src/screens/ProductScreenBootstrap.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/screens/ProductScreenBootstrap.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,226 @@
+import axios from "axios";
+import React, { useContext, useEffect, useReducer } from "react";
+import { Helmet } from "react-helmet-async";
+import { useNavigate, useParams } from "react-router-dom";
+import Footer from "../components/Footer";
+import "bootstrap/dist/css/bootstrap.min.css";
+import Header from "../components/Header";
+import icon1 from "../Images/icon3.svg";
+import ShoppingBasketIcon from "@mui/icons-material/ShoppingCart";
+import "../styles/ProductScreen.css";
+import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import Button from "react-bootstrap/Button";
+import Table from "react-bootstrap/Table";
+import LoadingBox from "../components/LoadingBox";
+import MessageBox from "../components/MessageBox";
+import { getError } from "../components/utils";
+import { Store } from "../Store";
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "FETCH_REQUEST":
+      return { ...state, loading: true };
+    case "FETCH_SUCCESS":
+      return { ...state, product: action.payload, loading: false };
+    case "FETCH_FAIL":
+      return { ...state, loading: false, error: action.payload };
+    default:
+      return state;
+  }
+};
+
+function ProductScreen() {
+  const navigate = useNavigate();
+  const params = useParams();
+  const { slug } = params;
+
+  const [{ loading, error, product }, dispatch] = useReducer(reducer, {
+    product: [],
+    loading: true,
+    error: "",
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      dispatch({ type: "FETCH_REQUEST" });
+      try {
+        const result = await axios.get(`/api/products/slug/${slug}`);
+        dispatch({ type: "FETCH_SUCCESS", payload: result.data });
+      } catch (err) {
+        dispatch({ type: "FETCH_FAIL", payload: getError(err) });
+      }
+    };
+    fetchData();
+  }, [slug]);
+
+  const handleClick = (event) => {
+    let tmp = document.querySelector("#tmp");
+    if (tmp != null) {
+      tmp.parentNode.removeChild(tmp);
+      if (document.querySelector("#tmp") != null) {
+        let tmp = document.querySelector("#tmp");
+        tmp.parentNode.removeChild(tmp);
+      }
+    }
+    if (event.target.textContent === "Опис") {
+      let pre = document.createElement("pre");
+      pre.setAttribute("id", "tmp");
+      pre.textContent = product.description;
+      event.target.appendChild(pre);
+    } else if (event.target.textContent === "Монтажа") {
+      let table = document.createElement("table");
+      let thModel = document.createElement("th");
+      let thPrice = document.createElement("th");
+      let tdName = document.createElement("td");
+      let tdPrice = document.createElement("td");
+      let tr1 = document.createElement("tr");
+      let tr2 = document.createElement("tr");
+      thModel.innerHTML = "Модел";
+      thPrice.innerHTML = "Цена";
+      tdName.innerHTML = product.name;
+      tdPrice.innerHTML = product.priceMontaza;
+      tr1.appendChild(thModel);
+      tr1.appendChild(thPrice);
+      tr2.appendChild(tdName);
+      tr2.appendChild(tdPrice);
+      table.appendChild(tr1);
+      table.appendChild(tr2);
+      table.setAttribute("id", "tmp");
+      let p = document.createElement("p");
+      p.innerHTML = "Цената за монтажа е посочена на секој производ посебно.";
+      p.setAttribute("id", "tmp");
+
+      event.target.appendChild(table);
+      event.target.appendChild(p);
+    } else {
+      let p = document.createElement("p");
+      let a = document.createElement("a");
+      let img = document.createElement("img");
+      if (event.target.textContent === "Димензии") {
+        a.setAttribute("href", product.dimension);
+        img.src = product.dimension;
+      } else {
+        a.setAttribute("href", product.scheme);
+        img.src = product.scheme;
+      }
+      p.appendChild(img);
+      a.setAttribute("id", "tmp");
+      a.appendChild(p);
+      event.target.appendChild(a);
+    }
+  };
+
+  const changePhoto = (event) => {
+    let main = document.getElementById("main");
+    main.setAttribute("src", event.target.src);
+  };
+
+  const { state, dispatch: ctxDispatch } = useContext(Store);
+  const { cart } = state;
+  const addToCartHandler = async () => {
+    const existItem = cart.cartItems.find((x) => x._id === product._id);
+    const quantity = existItem ? existItem.quantity + 1 : 1;
+    const { data } = await axios.get(`/api/products/${product._id}`);
+    if (data.countInStock < quantity) {
+      window.alert("Sorry. Product is out of stock");
+      return;
+    }
+    ctxDispatch({
+      type: "CART_ADD_ITEM",
+      payload: { ...product, quantity },
+    });
+    navigate("/cart");
+  };
+
+  return loading ? (
+    <LoadingBox />
+  ) : error ? (
+    <MessageBox variant="danger">{error}</MessageBox>
+  ) : (
+    <div>
+      <Helmet>
+        <title>{product.name}</title>
+      </Helmet>
+      <div>
+        <Container>
+          <Row>
+            <Col>
+              <Row>
+                <img id="main" src={product.image} alt={product.name}></img>
+              </Row>
+              <Row className="imgRow">
+                <img
+                  id="sec"
+                  src={product.image}
+                  alt={product.name}
+                  onClick={changePhoto}
+                ></img>
+
+                <img
+                  id="sec"
+                  src={product.sideImage}
+                  alt={product.name}
+                  onClick={changePhoto}
+                ></img>
+              </Row>
+
+              {/*</div>*/}
+            </Col>
+            <Col sm>
+              <Row>
+                <h2 id="name">{product.name}</h2>
+              </Row>
+              <Row>
+                <h2 id="price">{product.price} ден</h2>
+                <span>
+                  <img id="icon" src={icon1} alt="10-day-delivery"></img>
+                  Бесплатна достава: 10 дена
+                </span>
+              </Row>
+              <Row>
+                <Button
+                  onClick={addToCartHandler}
+                  className="addToCartBtn"
+                  variant="danger"
+                >
+                  <ShoppingBasketIcon />
+                  ДОДАЈ ВО КОШНИЧКА
+                </Button>
+              </Row>
+              <Row>
+                <Table id="table">
+                  <tbody>
+                    <tr>
+                      <td>
+                        <div onClick={handleClick}>Опис</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <div onClick={handleClick}>Димензии</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <div onClick={handleClick}>Монтажа</div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <div onClick={handleClick}>Шема за монтажа</div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </Table>
+              </Row>
+            </Col>
+          </Row>
+        </Container>
+      </div>
+    </div>
+  );
+}
+
+export default ProductScreen;
Index: frontend/src/screens/SigninScreen.js
===================================================================
--- frontend/src/screens/SigninScreen.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/screens/SigninScreen.js	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,44 @@
+import Container from "react-bootstrap/Container";
+import Form from "react-bootstrap/Form";
+import { Helmet } from "react-helmet-async";
+import Button from "react-bootstrap/Button";
+import "../styles/SigninScreen.css";
+import React from "react";
+import { Link, useLocation } from "react-router-dom";
+
+function SigninScreen() {
+  const { search } = useLocation();
+  const redirectInUrl = new URLSearchParams(search).get("redirect");
+  const redirect = redirectInUrl ? redirectInUrl : "/";
+  return (
+    <div className="pageContainer">
+      <Container className="main">
+        <Helmet>
+          <title>Најави се</title>
+        </Helmet>
+        <h1>Најави се</h1>
+        <Form className="formCointainer">
+          <Form.Group controlId="email">
+            <Form.Label>Email</Form.Label>
+            <Form.Control type="email" required />
+          </Form.Group>
+          <Form.Group controlId="password">
+            <Form.Label>Лозинка</Form.Label>
+            <Form.Control type="email" required />
+          </Form.Group>
+          <div className="submitBtnContainer">
+            <Button variant="danger" size="lg" type="submit">
+              Најави се
+            </Button>
+          </div>
+          <div className="registerParagraph">
+            Нов корисник?{" "}
+            <Link to={`/signup?redirect=${redirect}`}>Регистрирај се</Link>
+          </div>
+        </Form>
+      </Container>
+    </div>
+  );
+}
+
+export default SigninScreen;
Index: frontend/src/styles/CartScreen.css
===================================================================
--- frontend/src/styles/CartScreen.css	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/styles/CartScreen.css	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,114 @@
+.img-thumbnail {
+  height: 80px;
+  margin-left: 20px;
+}
+
+.pageContainer {
+  min-height: 100vh;
+}
+
+main {
+  margin-top: 20px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.itemContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.trashImgContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.link {
+  color: black;
+  display: flex;
+  text-decoration: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btnsPriceContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.productRow {
+  width: 800px;
+}
+
+.quantityInput {
+  height: 40px;
+  width: 40px;
+  text-align: center;
+}
+
+.marginBtn {
+  margin-right: 20px;
+}
+
+.lastRow {
+  border-top: 1px solid black;
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.totalPriceContainer {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.checkoutBtnContainer {
+  display: flex;
+  justify-content: right;
+}
+
+@media only screen and (max-width: 801px) {
+  .productRow {
+    width: 100vw;
+  }
+}
+
+@media only screen and (max-width: 554px) {
+  .productRow {
+    width: 100vw;
+  }
+
+  .itemContainer {
+    flex-direction: column;
+  }
+
+  .trashImgContainer {
+    width: 100%;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+  }
+
+  .trashIconContainer {
+    display: flex;
+    justify-content: right;
+  }
+
+  .btnsPriceContainer {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .checkoutBtnContainer button {
+    width: 100%;
+  }
+}
Index: frontend/src/styles/Footer.css
===================================================================
--- frontend/src/styles/Footer.css	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/styles/Footer.css	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,63 @@
+.footer {
+  box-sizing: border-box;
+  margin-top: 40px;
+  padding-top: 10px;
+  border-top: 5px solid red;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.footer__social {
+  display: flex;
+  flex-direction: column;
+}
+
+.footer__social img {
+  width: 30px;
+  margin-top: 7px;
+}
+
+.socialIconText {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.socialIconText span {
+  margin-left: 5px;
+}
+
+.footer__newsletter {
+  display: flex;
+  flex-direction: column;
+}
+
+.footer__newsletter div {
+  width: auto;
+  display: flex;
+}
+
+.footer__newsletter input {
+  background-color: #e9e9e9;
+  border: none;
+  height: 30px;
+}
+
+#email {
+  flex: 1;
+}
+#submit {
+  height: 32px;
+  cursor: pointer;
+  user-select: none;
+}
+
+#email:focus {
+  outline: none;
+}
+
+@media only screen and (max-width: 440px) {
+  .footer {
+    flex-direction: column;
+  }
+}
Index: frontend/src/styles/Header.css
===================================================================
--- frontend/src/styles/Header.css	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/styles/Header.css	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,283 @@
+* {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.header {
+  margin: 0;
+  padding: 0;
+  height: 70px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 5px;
+  border-bottom: 1px solid rgb(166, 165, 165);
+}
+
+span {
+  display: flex;
+  align-items: center;
+}
+
+span p {
+  display: flex;
+  align-items: center;
+  margin: 0;
+}
+
+.header__menu {
+  display: flex;
+  list-style: none;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.header__menu li {
+  margin-left: 20px;
+}
+
+.header__right {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.header__search {
+  display: flex;
+}
+
+.header__searchInput {
+  width: 300px;
+}
+
+.header__buttons {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.link {
+  color: black;
+  text-decoration: none;
+}
+
+.link:hover {
+  color: black;
+}
+
+.header__cart {
+  color: black;
+}
+
+.badgee {
+  text-decoration: none;
+}
+
+.header__dropdown {
+  width: 700px;
+  padding-top: 28px;
+  background-color: #ffffff;
+  border: 1px solid rgb(166, 165, 165);
+  box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
+  padding-right: 10px;
+  position: absolute;
+  display: none;
+  z-index: 10;
+}
+
+.header__products {
+  position: relative;
+  cursor: pointer;
+}
+
+.header__products:hover .header__dropdown {
+  display: flex;
+}
+
+.header__dropdown a {
+  display: block;
+}
+
+.header__dropdownColumn ul {
+  list-style: none;
+  padding: 0;
+}
+
+.header__dropdownColumn ul li {
+  font-weight: bold;
+  margin-top: 4px;
+}
+
+.header__dropdownColumn ul li a {
+  color: rgb(45, 44, 44);
+  text-decoration: 0;
+}
+
+.header__dropdownColumn ul li ul {
+  margin-bottom: 15px;
+}
+
+.header__dropdownColumn ul li ul li {
+  font-weight: 100;
+  text-decoration: none;
+  color: rgb(107, 106, 106);
+}
+
+.header__dropdownColumn ul li:hover span {
+  border-bottom: 1px solid rgb(45, 44, 44);
+}
+
+.header__dropdownColumn ul li ul li a:hover {
+  text-decoration: underline;
+  color: red;
+}
+
+.header__icon {
+  display: none !important;
+}
+
+.header__iconContainer {
+  display: none;
+}
+
+.header__iconContainer img {
+  margin-left: 10px;
+}
+
+.mobile-menu-container {
+  background-color: white;
+  box-shadow: 0 10px 15px rgb(0 0 0 / 40%);
+  height: 100vh;
+  z-index: 20;
+  position: absolute;
+  top: 0;
+}
+
+.closeBtn {
+  margin-right: 20px;
+  text-align: right;
+  cursor: pointer;
+  font-size: 40px;
+}
+
+.mobile-menu-container ul {
+  list-style: none;
+  padding: 0px;
+  margin-top: 10px;
+}
+
+.mobile-menu-container ul li {
+  cursor: pointer;
+  border-top: 1px solid grey;
+  font-size: 20px;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  height: 50px;
+}
+
+.subDropdown {
+  background-color: white;
+  height: 100vh;
+  z-index: 21;
+  position: absolute;
+  top: 0;
+}
+
+.visible {
+  display: block;
+}
+
+.hidden {
+  display: none;
+}
+
+.category-menu {
+  position: absolute;
+  background-color: #ffffff;
+  top: 0;
+  z-index: 22;
+  height: 100vh;
+}
+
+@media only screen and (max-width: 1015px) {
+  .header__dropdown {
+    margin-left: -200px;
+  }
+}
+
+@media only screen and (max-width: 873px) {
+  .header__menu {
+    display: none;
+  }
+
+  .header__icon {
+    display: block !important;
+    cursor: pointer;
+  }
+
+  .header__iconContainer {
+    display: flex;
+  }
+
+  .mobile-menu-container {
+    width: 40vw;
+  }
+
+  .subDropdown {
+    width: 40vw;
+  }
+
+  .category-menu {
+    width: 40vw;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  .mobile-menu-container {
+    width: 50vw;
+  }
+
+  .subDropdown {
+    width: 50vw;
+  }
+
+  .category-menu {
+    width: 50vw;
+  }
+}
+
+@media only screen and (max-width: 400px) {
+  .header__search {
+    display: none;
+  }
+
+  .mobile-menu-container {
+    width: 80vw;
+  }
+
+  .subDropdown {
+    width: 80vw;
+  }
+
+  .category-menu {
+    width: 80vw;
+  }
+}
+
+@media only screen and (max-width: 355px) {
+  span p {
+    display: none;
+  }
+
+  .mobile-menu-container {
+    width: 100vw;
+  }
+
+  .subDropdown {
+    width: 100vw;
+  }
+
+  .category-menu {
+    width: 100vw;
+  }
+}
Index: frontend/src/styles/Home.css
===================================================================
--- frontend/src/styles/Home.css	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/styles/Home.css	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,192 @@
+.sliderContainer {
+  width: auto;
+  margin: 0 auto;
+  margin-top: 10px;
+}
+
+.iconWrapper {
+  width: 100%;
+  height: 120px;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  margin-top: 5px;
+}
+
+.iconContainer {
+  width: 200px;
+  height: 100%;
+  text-transform: uppercase;
+  font-weight: bold;
+  color: #808285;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+}
+
+.icon {
+  width: 100px;
+  height: 100px;
+}
+
+.icon-text {
+  margin: 0px;
+  text-align: center;
+}
+
+.activeIcon {
+  filter: invert(42%) sepia(100%) saturate(7464%) hue-rotate(349deg)
+    brightness(86%) contrast(96%);
+}
+
+.activeIconContainer {
+  background-color: #dbd8d8;
+  border-top-left-radius: 10%;
+  border-top-right-radius: 10%;
+}
+
+.descriptionContainer {
+  width: 100%;
+  height: 40px;
+  background-color: #dbd8d8;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  grid-template-rows: 300px 300px 300px 300px;
+  gap: 10px;
+  margin-top: 20px;
+  padding: 10px;
+}
+
+.grid-item {
+  text-align: center;
+  font-size: 30px;
+  border-radius: 20px;
+  box-shadow: 0 3px 5px rgb(0 0 0 / 100%);
+  color: #ffffff;
+  text-shadow: 3px 3px 3px rgb(0 0 0 / 100%);
+  cursor: pointer;
+}
+
+.item1 {
+  background-image: url("../Images/dnevna.jpg");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  grid-row: 1 / 3;
+}
+.item2 {
+  background-image: url("../Images/hodnik.jpg");
+  background-size: cover;
+}
+.item3 {
+  background-image: url("../Images/trpezarija.jpg");
+  background-size: cover;
+}
+.item4 {
+  background-image: url("../Images/spalna.jpg");
+  background-size: cover;
+  background-position: center;
+  grid-column: 2 / 4;
+}
+.item5 {
+  background-image: url("../Images/kujna.jpg");
+  background-size: cover;
+}
+.item6 {
+  background-image: url("../Images/kancelarija.jpg");
+  background-size: cover;
+}
+.item7 {
+  background-image: url("../Images/detska.jpg");
+  background-size: cover;
+  grid-column: 3;
+  grid-row: 3 / 5;
+}
+.item8 {
+  background-image: url("../Images/gradina.jpg");
+  background-size: cover;
+  grid-column: 1 / 3;
+}
+
+.most-popular-products {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.icon-description {
+  margin-top: 2px;
+}
+
+@media only screen and (max-width: 650px) {
+  .grid-container {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-rows: 300px 300px 300px 300px;
+    gap: 10px;
+    margin-top: 20px;
+    padding: 10px;
+  }
+
+  .grid-container .grid-item {
+    grid-row: auto;
+    grid-column: auto;
+  }
+
+  .iconWrapper {
+    height: 70px;
+  }
+
+  .iconContainer {
+    width: 120px;
+  }
+
+  .icon {
+    width: 50px;
+    height: 50px;
+  }
+
+  .icon-text {
+    font-size: 10px;
+  }
+}
+
+@media only screen and (max-width: 560px) {
+  .icon-description {
+    font-size: 15px;
+  }
+}
+
+@media only screen and (max-width: 534px) {
+  .descriptionContainer {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 400px) {
+  .grid-container {
+    display: grid;
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    grid-template-rows: repeat(8, minmax(0, 200px));
+    gap: 10px;
+    margin-top: 20px;
+    padding: 10px;
+  }
+
+  .grid-container .grid-item {
+    grid-row: auto;
+    grid-column: auto;
+  }
+}
Index: frontend/src/styles/Product.css
===================================================================
--- frontend/src/styles/Product.css	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/styles/Product.css	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,50 @@
+.product__container {
+  height: 300px;
+  width: 300px;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid grey;
+  padding: 2px;
+  box-shadow: 0 3px 5px rgb(0 0 0 / 100%);
+}
+
+.product__img img {
+  width: 100%;
+}
+
+.product__textContainer {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.product__name {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.product__price {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.product__addToCart {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.product__addToCart button {
+  width: 40%;
+  height: 30px;
+  background-color: red;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  color: white;
+  font-size: 19px;
+}
Index: frontend/src/styles/ProductScreen.css
===================================================================
--- frontend/src/styles/ProductScreen.css	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/styles/ProductScreen.css	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,154 @@
+.container {
+  display: flex;
+}
+
+.container img {
+  height: 100%;
+}
+
+.left-side {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.right-side {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.mainImg {
+  height: 500px;
+}
+
+.sideImgContainer {
+  height: 150px;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.sideImg {
+  height: 100%;
+}
+
+.name-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.price-container {
+  display: flex;
+}
+
+.price-left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: left;
+  align-items: center;
+}
+
+.price-left h2 {
+  color: red;
+}
+
+.price-left img {
+  width: 40px;
+  height: 40px;
+}
+
+.price-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.price-right button {
+  height: 80%;
+  width: 80%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: red;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  color: white;
+  font-size: 19px;
+}
+
+#name {
+  text-align: center;
+}
+
+#price {
+  color: red;
+}
+
+#icon {
+  width: 40px;
+  height: 40px;
+  filter: invert(0%) sepia(00%) saturate(8000%) hue-rotate(8deg) brightness(0%)
+    contrast(234%);
+}
+
+#table {
+  margin-top: 10px;
+}
+
+tr {
+  cursor: pointer;
+}
+
+.imgRow {
+  display: flex !important;
+  justify-content: center !important;
+}
+
+#sec {
+  width: 100px;
+  height: 100px;
+}
+
+table img {
+  width: 200px;
+}
+#tmp {
+  margin-left: 20px;
+}
+#tmp tr,
+#tmp td,
+#tmp th {
+  border: 1px solid black;
+  height: 40px;
+  padding: 3px;
+}
+
+@media only screen and (max-width: 750) {
+  #main {
+    height: 300px;
+  }
+}
+
+@media only screen and (max-width: 400px) {
+  #sec {
+    height: 50px;
+  }
+}
+
+@media only screen and (max-width: 768) {
+  #main {
+    height: 260px !important;
+  }
+}
+
+@media only screen and (max-width: 575) {
+  #main {
+    height: auto !important;
+  }
+}
Index: frontend/src/styles/SigninScreen.css
===================================================================
--- frontend/src/styles/SigninScreen.css	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
+++ frontend/src/styles/SigninScreen.css	(revision 717ceae0194e473720ee8817b1deb266a288a17f)
@@ -0,0 +1,33 @@
+.pageContainer {
+  min-height: 100vh;
+}
+
+.main {
+  margin-top: 20px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.formCointainer {
+  width: 400px;
+}
+
+.submitBtnContainer {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.registerParagraph {
+  margin-top: 10px;
+  text-align: center;
+}
+
+@media only screen and (max-width: 440px) {
+  .formCointainer {
+    width: 100%;
+  }
+}
