diff --git a/restaurantapp/package-lock.json b/restaurantapp/package-lock.json
index b11c773..69cc262 100644
--- a/restaurantapp/package-lock.json
+++ b/restaurantapp/package-lock.json
@@ -1203,6 +1203,157 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@date-io/core": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.11.0.tgz",
+      "integrity": "sha512-DvPBnNoeuLaoSJZaxgpu54qzRhRKjSYVyQjhznTFrllKuDpm0sDFjHo6lvNLCM/cfMx2gb2PM2zY2kc9C8nmuw=="
+    },
+    "@date-io/date-fns": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.11.0.tgz",
+      "integrity": "sha512-mPQ71plBeFrArvBSHtjWMHXA89IUbZ6kuo2dsjlRC/1uNOybo91spIb+wTu03NxKTl8ut07s0jJ9svF71afpRg==",
+      "requires": {
+        "@date-io/core": "^2.11.0"
+      }
+    },
+    "@date-io/dayjs": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@date-io/dayjs/-/dayjs-2.11.0.tgz",
+      "integrity": "sha512-w67vRK56NZJIKhJM/CrNbfnIcuMvR3ApfxzNZiCZ5w29sxgBDeKuX4M+P7A9r5HXOMGcsOcpgaoTDINNGkdpGQ==",
+      "requires": {
+        "@date-io/core": "^2.11.0"
+      }
+    },
+    "@date-io/luxon": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/@date-io/luxon/-/luxon-2.11.1.tgz",
+      "integrity": "sha512-JUXo01kdPQxLORxqdENrgdUhooKgDUggsNRSdi2BcUhASIY2KGwwWXu8ikVHHGkw+DUF4FOEKGfkQd0RHSvX6g==",
+      "requires": {
+        "@date-io/core": "^2.11.0"
+      }
+    },
+    "@date-io/moment": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.11.0.tgz",
+      "integrity": "sha512-QSL+83qezQ9Ty0dtFgAkk6eC0GMl/lgYfDajeVUDB3zVA2A038hzczRLBg29ifnBGhQMPABxuOafgWwhDjlarg==",
+      "requires": {
+        "@date-io/core": "^2.11.0"
+      }
+    },
+    "@emotion/babel-plugin": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz",
+      "integrity": "sha512-UZKwBV2rADuhRp+ZOGgNWg2eYgbzKzQXfQPtJbu/PLy8onurxlNCLvxMQEvlr1/GudguPI5IU9qIY1+2z1M5bA==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/plugin-syntax-jsx": "^7.12.13",
+        "@babel/runtime": "^7.13.10",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.5",
+        "@emotion/serialize": "^1.0.2",
+        "babel-plugin-macros": "^2.6.1",
+        "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.3"
+      },
+      "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=="
+        }
+      }
+    },
+    "@emotion/cache": {
+      "version": "11.5.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.5.0.tgz",
+      "integrity": "sha512-mAZ5QRpLriBtaj/k2qyrXwck6yeoz1V5lMt/jfj6igWU35yYlNKs2LziXVgvH81gnJZ+9QQNGelSsnuoAy6uIw==",
+      "requires": {
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.0.3",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "^4.0.10"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "@emotion/is-prop-valid": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz",
+      "integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==",
+      "requires": {
+        "@emotion/memoize": "^0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "@emotion/react": {
+      "version": "11.5.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.5.0.tgz",
+      "integrity": "sha512-MYq/bzp3rYbee4EMBORCn4duPQfgpiEB5XzrZEBnUZAL80Qdfr7CEv/T80jwaTl/dnZmt9SnTa8NkTrwFNpLlw==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/cache": "^11.5.0",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/sheet": "^1.0.3",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
+      "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
+      "requires": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.3.tgz",
+      "integrity": "sha512-YoX5GyQ4db7LpbmXHMuc8kebtBGP6nZfRC5Z13OKJMixBEwdZrJ914D6yJv/P+ZH/YY3F5s89NYX2hlZAf3SRQ=="
+    },
+    "@emotion/styled": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.3.0.tgz",
+      "integrity": "sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.3.0",
+        "@emotion/is-prop-valid": "^1.1.0",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/utils": "^1.0.0"
+      }
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "@emotion/utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+      "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -1786,6 +1937,139 @@
         }
       }
     },
+    "@mui/core": {
+      "version": "5.0.0-alpha.51",
+      "resolved": "https://registry.npmjs.org/@mui/core/-/core-5.0.0-alpha.51.tgz",
+      "integrity": "sha512-Dum1SM5qk9eGeC6TLw6Au/53yuHqpkFM65hFYEtZccjJhUtdQMve+XVsmhgYPNkhiC0HyWgIR8Q5E1q5Fkc+pQ==",
+      "requires": {
+        "@babel/runtime": "^7.15.4",
+        "@emotion/is-prop-valid": "^1.1.0",
+        "@mui/utils": "^5.0.1",
+        "clsx": "^1.1.1",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+        }
+      }
+    },
+    "@mui/lab": {
+      "version": "5.0.0-alpha.51",
+      "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.51.tgz",
+      "integrity": "sha512-eV7C9G5kWLh4TOQN0Jzu8ri/6ozdvja3C9yTbXhX4bpnG8T9Y7lU/qhZTZZ2j4QovTUwbwNV4bX5nSeY6vwkPg==",
+      "requires": {
+        "@babel/runtime": "^7.15.4",
+        "@date-io/date-fns": "^2.11.0",
+        "@date-io/dayjs": "^2.11.0",
+        "@date-io/luxon": "^2.11.1",
+        "@date-io/moment": "^2.11.0",
+        "@mui/core": "5.0.0-alpha.51",
+        "@mui/system": "^5.0.4",
+        "@mui/utils": "^5.0.1",
+        "clsx": "^1.1.1",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2",
+        "react-transition-group": "^4.4.2",
+        "rifm": "^0.12.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+        }
+      }
+    },
+    "@mui/material": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.0.4.tgz",
+      "integrity": "sha512-075EXSBHoEYeFkE5WDtXyxfd+bNIQRvqlgiouukvMqLGta1EmLq9H6+ONYV4I0Luug8NvNyRocVyRwdjH0Ufmw==",
+      "requires": {
+        "@babel/runtime": "^7.15.4",
+        "@mui/core": "5.0.0-alpha.51",
+        "@mui/system": "^5.0.4",
+        "@mui/types": "^7.0.0",
+        "@mui/utils": "^5.0.1",
+        "@popperjs/core": "^2.4.4",
+        "@types/react-transition-group": "^4.4.3",
+        "clsx": "^1.1.1",
+        "csstype": "^3.0.9",
+        "hoist-non-react-statics": "^3.3.2",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2",
+        "react-transition-group": "^4.4.2"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+        }
+      }
+    },
+    "@mui/private-theming": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.0.1.tgz",
+      "integrity": "sha512-R8Cf2+32cG1OXFAqTighA5Mx9R5BQ57cN1ZVaNgfgdbI87Yig2fVMdFSPrw3txcjKlnwsvFJF8AdwQMqq1tJ3Q==",
+      "requires": {
+        "@babel/runtime": "^7.15.4",
+        "@mui/utils": "^5.0.1",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@mui/styled-engine": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.0.1.tgz",
+      "integrity": "sha512-j40nCbaKr1HAZYqpX61XvZYsadYskjo3u6+pRFFaewSViAkkD1rjjbubpnh15nqVfYmijtHMZJ9/l1x1hamvfQ==",
+      "requires": {
+        "@babel/runtime": "^7.15.4",
+        "@emotion/cache": "^11.4.0",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@mui/system": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.0.4.tgz",
+      "integrity": "sha512-d+7dhT0eBGrPoah91GX1Q2i4S/5QsiVAp7e06lIMC/LXFWQSrsSnvNbVnW8TgttCvo0ypQ/RHNmWZ/f1eAbd/Q==",
+      "requires": {
+        "@babel/runtime": "^7.15.4",
+        "@mui/private-theming": "^5.0.1",
+        "@mui/styled-engine": "^5.0.1",
+        "@mui/types": "^7.0.0",
+        "@mui/utils": "^5.0.1",
+        "clsx": "^1.1.1",
+        "csstype": "^3.0.9",
+        "prop-types": "^15.7.2"
+      }
+    },
+    "@mui/types": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.0.0.tgz",
+      "integrity": "sha512-M/tkF2pZ4uoPhZ8pnNhlVnOFtz6F3dnYKIsnj8MuXKT6d26IE2u0UjA8B0275ggN74dR9rlHG5xJt5jgDx/Ung=="
+    },
+    "@mui/utils": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.0.1.tgz",
+      "integrity": "sha512-GWO104N+o9KG5fKiTEYnAg7kONKEg3vLN+VROAU0f3it6lFGLCVPcQYex/1gJ4QAy96u6Ez8/Hmmhi1+3cX0tQ==",
+      "requires": {
+        "@babel/runtime": "^7.15.4",
+        "@types/prop-types": "^15.7.4",
+        "@types/react-is": "^16.7.1 || ^17.0.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "17.0.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+        }
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1864,6 +2148,44 @@
         }
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
+      "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
+    },
+    "@react-aria/ssr": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.1.0.tgz",
+      "integrity": "sha512-RxqQKmE8sO7TGdrcSlHTcVzMP450hqowtBSd2bBS9oPlcokVkaGq28c3Rwa8ty5ctw4EBCjXqjP7xdcKMGDzug==",
+      "requires": {
+        "@babel/runtime": "^7.6.2"
+      }
+    },
+    "@restart/hooks": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.5.tgz",
+      "integrity": "sha512-tLGtY0aHeIfT7aPwUkvQuhIy3+q3w4iqmUzFLPlOAf/vNUacLaBt1j/S//jv/dQhenRh8jvswyMojCwmLvJw8A==",
+      "requires": {
+        "dequal": "^2.0.2"
+      }
+    },
+    "@restart/ui": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-0.2.5.tgz",
+      "integrity": "sha512-3dP8pMFickPpvAG5MVQW53HnJl0c17h7MwvI4nNy9QF66sHSYVchudlqlI8eOSaqnmc5YVjGura63vMb9LTNbQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.16",
+        "@popperjs/core": "^2.10.1",
+        "@react-aria/ssr": "^3.0.1",
+        "@restart/hooks": "^0.4.0",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.2",
+        "dom-helpers": "^5.2.0",
+        "prop-types": "^15.7.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
     "@rollup/plugin-node-resolve": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
@@ -2286,6 +2608,11 @@
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz",
       "integrity": "sha512-h4lTMgMJctJybDp8CQrxTUiiYmedihHWkjnF/8Pxseu2S6Nlfcy8kwboQ8yejh456rP2yWoEVm1sS/FVsfM48w=="
     },
+    "@types/invariant": {
+      "version": "2.2.35",
+      "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz",
+      "integrity": "sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg=="
+    },
     "@types/istanbul-lib-coverage": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
@@ -2480,6 +2807,14 @@
         "csstype": "^3.0.2"
       }
     },
+    "@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-router": {
       "version": "5.1.17",
       "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.17.tgz",
@@ -2499,6 +2834,14 @@
         "@types/react-router": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.4.4",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
+      "integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@@ -2550,6 +2893,11 @@
         }
       }
     },
+    "@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
+    },
     "@types/webpack": {
       "version": "4.41.31",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.31.tgz",
@@ -4230,6 +4578,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -4260,6 +4613,11 @@
         "wrap-ansi": "^6.2.0"
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -4949,6 +5307,11 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.25.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.25.0.tgz",
+      "integrity": "sha512-ovYRFnTrbGPD4nqaEqescPEv1mNwvt+UTqI3Ay9SzNtey9NZnYu6E2qCcBBgJ6/2VF1zGGygpyTDITqpQQ5e+w=="
+    },
     "debug": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
@@ -5120,6 +5483,11 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
       "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
     },
+    "dequal": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
+      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug=="
+    },
     "des.js": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
@@ -5241,6 +5609,15 @@
         "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"
+      }
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -6645,6 +7022,11 @@
         "pkg-dir": "^3.0.0"
       }
     },
+    "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": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -7665,6 +8047,14 @@
         "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"
+      }
+    },
     "ip": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@@ -11963,6 +12353,15 @@
         "react-is": "^16.8.1"
       }
     },
+    "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"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -12146,6 +12545,43 @@
         "whatwg-fetch": "^3.4.1"
       }
     },
+<<<<<<< Updated upstream
+    "react-datepicker": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.3.0.tgz",
+      "integrity": "sha512-cg+gp4YnPcZc6iZ0+v7VuRgcFG22KL7izHYrCxXeSLOn5VGkyxTfcu5qA/cGIsngurCt/u0NtgVTlHB1Fwap1g==",
+      "requires": {
+        "@popperjs/core": "^2.9.2",
+        "classnames": "^2.2.6",
+        "date-fns": "^2.24.0",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.12.0",
+        "react-popper": "^2.2.5"
+=======
+    "react-bootstrap": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.1.0.tgz",
+      "integrity": "sha512-ZbEq8in6XzoDh4dyrANVwqeqrj1oRqL56unlBYzjsvdWPIaBP/B7qLMHCvnwuzpANwMrh/hSNpIocKn6rvOFIQ==",
+      "requires": {
+        "@babel/runtime": "^7.14.0",
+        "@restart/hooks": "^0.4.5",
+        "@restart/ui": "^0.2.5",
+        "@types/invariant": "^2.2.33",
+        "@types/prop-types": "^15.7.3",
+        "@types/react": ">=16.14.8",
+        "@types/react-transition-group": "^4.4.1",
+        "@types/warning": "^3.0.0",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.1",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+>>>>>>> Stashed changes
+      }
+    },
     "react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -12280,11 +12716,21 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
     },
+    "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-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "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-loader-spinner": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-4.0.0.tgz",
@@ -12293,6 +12739,20 @@
         "prop-types": "^15.7.2"
       }
     },
+    "react-onclickoutside": {
+      "version": "6.12.0",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.0.tgz",
+      "integrity": "sha512-oPlOTYcISLHfpMog2lUZMFSbqOs4LFcA4+vo7fpfevB5v9Z0D5VBDBkfeO5lv+hpEcGoaGk67braLT+QT+eICA=="
+    },
+    "react-popper": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
+      "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
+      "requires": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -12410,6 +12870,17 @@
         "workbox-webpack-plugin": "5.1.4"
       }
     },
+    "react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -12852,6 +13323,11 @@
       "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
       "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
     },
+    "rifm": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.12.0.tgz",
+      "integrity": "sha512-PqOl+Mo2lyqrKiD34FPlnQ+ksD3F+a62TQlphiZshgriyHdfjn6jGyqUZhd+s3nsMYXwXYDdjrrv8wX7QsOG3g=="
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -13987,6 +14463,11 @@
         }
       }
     },
+    "stylis": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz",
+      "integrity": "sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg=="
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -14502,6 +14983,17 @@
         "which-boxed-primitive": "^1.0.2"
       }
     },
+    "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",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -14819,6 +15311,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "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"
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
diff --git a/restaurantapp/package.json b/restaurantapp/package.json
index 731d6c1..6ea3dca 100644
--- a/restaurantapp/package.json
+++ b/restaurantapp/package.json
@@ -3,6 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.5.0",
+    "@emotion/styled": "^11.3.0",
+    "@mui/lab": "^5.0.0-alpha.51",
+    "@mui/material": "^5.0.4",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
@@ -10,6 +14,7 @@
     "@types/react-router-dom": "^5.3.1",
     "jquery": "^3.6.0",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.1.0",
     "react-dom": "^17.0.2",
     "react-loader-spinner": "^4.0.0",
     "react-router-dom": "^5.3.0",
diff --git a/restaurantapp/public/css/templatemo-style.css b/restaurantapp/public/css/templatemo-style.css
index f9a2e80..7d2c3be 100644
--- a/restaurantapp/public/css/templatemo-style.css
+++ b/restaurantapp/public/css/templatemo-style.css
@@ -140,7 +140,7 @@ p {
 .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
 	background-color: #f2745f;
 }
-bootstrap.min.css:5
+
 .navbar-toggle {
     position: relative;
     float: right;
@@ -1169,4 +1169,4 @@ section.map #map {
 }
 @media (max-width: 480px) {
 
-}
\ No newline at end of file
+}
diff --git a/restaurantapp/src/App.js b/restaurantapp/src/App.js
index a1164ed..1563f14 100644
--- a/restaurantapp/src/App.js
+++ b/restaurantapp/src/App.js
@@ -15,133 +15,133 @@ import ReservationPage from './component/ReservationPage';
 import AdminReservationPage from "./component/AdminReservationPage";
 
 export default class App extends React.Component {
-  constructor(props){
-    super(props);
-    this.state = {
-      reservationsStatus: LocalReservationsStatus(Reservations.getLocalReservations())
-    };
-  }
-
-  componentDidMount(){
-    Reservations.listen("app", () => {
-      this.setState({reservationsStatus: LocalReservationsStatus(Reservations.getLocalReservations())});
-    });
-  }
-
-  componentWillUnmount(){
-    Reservations.unlisten("app");
-  }
-
-  render(){
-    const isLoggedIn = localStorage.getItem('jwt') !== null;
-
-    return (
-      <Router>
-        <div className="header">
-          <div className="container">
-              <nav className="navbar">
-                  <Link to="/" className="navbar-brand">Restaurant App</Link>
-              </nav>
-            <nav className="navbar navbar-inverse" role="navigation">
-              <div className="navbar-header">
-                <button type="button" id="nav-toggle" className="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
-                  <span className="sr-only">Toggle navigation</span>
-                  <span className="icon-bar"></span>
-                  <span className="icon-bar"></span>
-                  <span className="icon-bar"></span>
-                </button>
-              </div>
-              <div id="main-nav" className="collapse navbar-collapse">
-                <ul className="nav navbar-nav">
-                  <li><Link to="/">Acasă</Link></li>
-                  <li><Link to="/menu">Meniu</Link></li>
-                  <li><Link to="/contact">Contact</Link></li>
-                  {isLoggedIn && 
-                  <li><Link to="/admin">Admin</Link></li>
-                  }
-                </ul>
-              </div>
-            </nav>
-            {this.state.reservationsStatus.length > 0 && <>
-              <div><Link to="/myres">{this.state.reservationsStatus}</Link></div>
-              <br/>
-              </>
-            }
-          </div>
-        </div>
-
-        <Switch>
-          <Route path="/admin">
-            {isLoggedIn &&
-              <>
-              <HeaderBar title="Pagină administrativă" body="Esti logat" />
-              <Adminpage/>
-              </>
-            }
-            {!isLoggedIn &&
-              <Redirect to="/login"/>
-            }
-          </Route>
-
-          <Route path="/reservations">
-            {isLoggedIn &&
-            <>
-              <HeaderBar title="Rezervări" body="Esti logat" />
-              <AdminReservationPage/>
-            </>
-            }
-            {!isLoggedIn &&
-            <Redirect to="/login"/>
-            }
-          </Route>
-
-          <Route path="/login">
-            {isLoggedIn &&
-              <Redirect to="/admin"/>
-            }
-            {!isLoggedIn &&
-              <>
-              <HeaderBar title="Pagină administrativă" body="Dacă ai drepturi administrative, autentifică-te cu formularul de mai jos!" />
-              <Loginpage/>
-              </>
-            }
-            
-          </Route>
-
-          <Route path="/menu">
-            <HeaderBar title="Meniu"/>
-            <MenuPage/>
-          </Route>
-
-          <Route path="/edit/:id" render={(props)=>(<>
-            <HeaderBar title="Edit" body="Edit"/>
-            <Editpage id={props.match.params.id}/>
-          </>)}
-          />
-
-          <Route path="/contact">
-            <HeaderBar title="Contact" body="Vrei să ne trimiți un feedback sau să ne contactezi pentru relații de business? Folosește chestionarul de mai jos pentru a lua legătura cu noi!" />
-            <Contact/>
-          </Route>
-
-          <Route path="/myres">
-            <HeaderBar title="Rezervări" body="Aici poti vedea rezervările tale actuale"/>
-            <ReservationPage/>
-          </Route>
-  
-          <Route path="/" exact={true}>
-          {/* <HeaderBar title="Specialități cu gust" body="Te așteptăm la cel mai bun loc unde îți poți răsfăța papilele gustative cu mâncăruri pe alese... și alte vrăjeli..." /> */}
-            <Mainpage/>
-          </Route>
-  
-          <Redirect to="/" />
-          
-        </Switch>
-
-          <Footer/>
-      </Router>
-
-      
-    );
-  }
+    constructor(props){
+        super(props);
+        this.state = {
+            reservationsStatus: LocalReservationsStatus(Reservations.getLocalReservations())
+        };
+    }
+
+    componentDidMount(){
+        Reservations.listen("app", () => {
+            this.setState({reservationsStatus: LocalReservationsStatus(Reservations.getLocalReservations())});
+        });
+    }
+
+    componentWillUnmount(){
+        Reservations.unlisten("app");
+    }
+
+    render(){
+        const isLoggedIn = localStorage.getItem('jwt') !== null;
+
+        return (
+            <Router>
+                <div className="header">
+                    <div className="container">
+                        <nav className="navbar">
+                            <Link to="/" className="navbar-brand">Restaurant App</Link>
+                        </nav>
+                        <nav className="navbar navbar-inverse" role="navigation">
+                            <div className="navbar-header">
+                                <button type="button" id="nav-toggle" className="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
+                                    <span className="sr-only">Toggle navigation</span>
+                                    <span className="icon-bar"></span>
+                                    <span className="icon-bar"></span>
+                                    <span className="icon-bar"></span>
+                                </button>
+                            </div>
+                            <div id="main-nav" className="collapse navbar-collapse">
+                                <ul className="nav navbar-nav">
+                                    <li><Link to="/">Acasă</Link></li>
+                                    <li><Link to="/menu">Meniu</Link></li>
+                                    <li><Link to="/contact">Contact</Link></li>
+                                    {isLoggedIn &&
+                                    <li><Link to="/admin">Admin</Link></li>
+                                    }
+                                </ul>
+                            </div>
+                        </nav>
+                        {this.state.reservationsStatus.length > 0 && <>
+                            <div><Link to="/myres">{this.state.reservationsStatus}</Link></div>
+                            <br/>
+                        </>
+                        }
+                    </div>
+                </div>
+
+                <Switch>
+                    <Route path="/admin">
+                        {isLoggedIn &&
+                        <>
+                            <HeaderBar title="Pagină administrativă" body="Esti logat" />
+                            <Adminpage/>
+                        </>
+                        }
+                        {!isLoggedIn &&
+                        <Redirect to="/login"/>
+                        }
+                    </Route>
+
+                    <Route path="/reservations">
+                        {isLoggedIn &&
+                        <>
+                            <HeaderBar title="Rezervări" body="Esti logat" />
+                            <AdminReservationPage/>
+                        </>
+                        }
+                        {!isLoggedIn &&
+                        <Redirect to="/login"/>
+                        }
+                    </Route>
+
+                    <Route path="/login">
+                        {isLoggedIn &&
+                        <Redirect to="/admin"/>
+                        }
+                        {!isLoggedIn &&
+                        <>
+                            <HeaderBar title="Pagină administrativă" body="Dacă ai drepturi administrative, autentifică-te cu formularul de mai jos!" />
+                            <Loginpage/>
+                        </>
+                        }
+
+                    </Route>
+
+                    <Route path="/menu">
+                        <HeaderBar title="Meniu"/>
+                        <MenuPage/>
+                    </Route>
+
+                    <Route path="/edit/:id" render={(props)=>(<>
+                        <HeaderBar title="Edit" body="Edit"/>
+                        <Editpage id={props.match.params.id}/>
+                    </>)}
+                    />
+
+                    <Route path="/contact">
+                        <HeaderBar title="Contact" body="Vrei să ne trimiți un feedback sau să ne contactezi pentru relații de business? Folosește chestionarul de mai jos pentru a lua legătura cu noi!" />
+                        <Contact/>
+                    </Route>
+
+                    <Route path="/myres">
+                        <HeaderBar title="Rezervări" body="Aici poti vedea rezervările tale actuale"/>
+                        <ReservationPage/>
+                    </Route>
+
+                    <Route path="/" exact={true}>
+                        {/* <HeaderBar title="Specialități cu gust" body="Te așteptăm la cel mai bun loc unde îți poți răsfăța papilele gustative cu mâncăruri pe alese... și alte vrăjeli..." /> */}
+                        <Mainpage/>
+                    </Route>
+
+                    <Redirect to="/" />
+
+                </Switch>
+
+                <Footer/>
+            </Router>
+
+
+        );
+    }
 }
diff --git a/restaurantapp/src/component/BookTable.tsx b/restaurantapp/src/component/BookTable.tsx
index 6e2c673..81a1ed4 100644
--- a/restaurantapp/src/component/BookTable.tsx
+++ b/restaurantapp/src/component/BookTable.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { LocalReservationType } from "../model/LocalReservation";
 import Reservations from "../service/Reservations";
 import Service from "../service/Service";
+import Row from 'react-bootstrap/Row';
 import {getDates, getStr} from "../util/dateUtil"
 
 type State = {
@@ -51,6 +52,7 @@ export default class BookTable extends React.Component<{}, State>{
 
     validateForm(){
         const fields = this.state.fields;
+      console.log(fields)
         if (fields.day === '') return "Te rog alege ziua!";
         if (fields.hour === '') return "Te rog alege ora!";
         if (fields.name === '') return "Te rog completează numele!";
@@ -65,8 +67,9 @@ export default class BookTable extends React.Component<{}, State>{
         event.stopPropagation();
 
         let error = this.validateForm();
+
         this.setState({error: error, success: ''});
-        
+
         if (error === ''){
             this.setState({sending: true});
             Service.reserveTable(this.state.fields)
@@ -95,51 +98,43 @@ export default class BookTable extends React.Component<{}, State>{
                         </div>
                         <div className="col-md-4 col-md-offset-2">
                             <div className="left-image">
-                                <img src="img/book_left_image.jpg" alt="" />
+                                <img src="img/book_left_image.jpg" alt=""/>
                             </div>
                         </div>
                         <div className="col-md-4">
-                            <div className="right-info">
+                            <div className="right-info container-fluid">
                                 <h4>Rezervare</h4>
                                 <span style={{ color: "red" }}>{this.state.error}</span>
                                 <span style={{ color: "green" }}>{this.state.success}</span>
-                                <div className="row">
-                                    <form>
-                                        <div className="col-md-6">
+                                <Row className="row form-group ">
+                                    <form className='form-group-sm ' >
+                                      <div className='container-fluid'>
+                                      <Row className='row form-horizontal '>
+                                        <div className="col-sm-6">
                                             <fieldset>
-                                                <select required name='day' onChange={this.setValue}>
-                                                    <option value="">Alege ziua</option>
-                                                    {dates.map(
-                                                        date => <option value={getStr(date)}>{getStr(date)}</option>
-                                                    )}
-                                                </select>
+                                              <input type='date' required name='day' id='day' className='form-control' onChange={this.setValue}/>
                                             </fieldset>
                                         </div>
-                                        <div className="col-md-6">
+                                        <div className="col-sm-6 ">
                                             <fieldset>
-                                                <select required name='hour' onChange={this.setValue} >
-                                                    <option value="">Alege ora</option>
-                                                    <option value="10:00">10:00</option>
-                                                    <option value="12:00">12:00</option>
-                                                    <option value="14:00">14:00</option>
-                                                    <option value="16:00">16:00</option>
-                                                    <option value="18:00">18:00</option>
-                                                    <option value="20:00">20:00</option>
-                                                    <option value="22:00">22:00</option>
-                                                </select>
+                                              <input type='time' required name='hour' id='hour' className='form-control' onChange={this.setValue}/>
                                             </fieldset>
                                         </div>
-                                        <div className="col-md-6">
+                                      </Row>
+                                      <Row className='form-horizontal '>
+                                        <div className="col-sm-6">
                                             <fieldset>
                                                 <input name="name" type="name" className="form-control" id="name" placeholder="Numele tău" onChange={this.setValue} required />
                                             </fieldset> 
                                         </div>
-                                        <div className="col-md-6">
+                                        <div className="col-sm-6">
                                             <fieldset>
                                                 <input name="phone" type="phone" className="form-control" id="phone" placeholder="Număr de telefon" onChange={this.setValue} required />
                                             </fieldset>
                                         </div>
-                                        <div className="col-md-6">
+                                      </Row>
+                                      <Row className='row form-horizontal'>
+                                        <div className="col-sm-6">
                                             <fieldset>
                                                 <select required className="person" name='tableSize' onChange={this.setValue}>
                                                     <option value="">Câte persoane?</option>
@@ -151,12 +146,16 @@ export default class BookTable extends React.Component<{}, State>{
                                                     <option value="6">6 Persoane</option>
                                                 </select>
                                             </fieldset>
+
                                         </div>
-                                        <div className="col-md-6">
+
+                                        <div className="col-sm-6">
                                             <button disabled={this.state.sending} type="submit" id="form-submit" className="btn" onClick={this.onSubmit}>Rezervă masă</button>
                                         </div>
+                                      </Row>
+                                      </div>
                                     </form>
-                                </div>
+                                </Row>
                             </div>
                         </div>
                     </div>
diff --git a/restaurantapp/src/component/HeaderBar.tsx b/restaurantapp/src/component/HeaderBar.tsx
index 8b2ed75..1bd0d27 100644
--- a/restaurantapp/src/component/HeaderBar.tsx
+++ b/restaurantapp/src/component/HeaderBar.tsx
@@ -25,5 +25,5 @@ export default class HeaderBar extends React.Component<Props, State>{
             </section>
         );
     }
-    
-}
\ No newline at end of file
+
+}
diff --git a/restaurantapp/tsconfig.json b/restaurantapp/tsconfig.json
index a273b0c..4a501cc 100644
--- a/restaurantapp/tsconfig.json
+++ b/restaurantapp/tsconfig.json
@@ -10,7 +10,7 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "strict": true,
+    "strict": false,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
     "module": "esnext",