diff --git a/package-lock.json b/package-lock.json
index 3b31e22..96c484d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,15 +8,13 @@
       "name": "jazz-burger",
       "version": "0.1.0",
       "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^6.4.0",
-        "@fortawesome/free-regular-svg-icons": "^6.4.0",
-        "@fortawesome/free-solid-svg-icons": "^6.4.0",
-        "@fortawesome/react-fontawesome": "^0.2.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "bootstrap": "^5.3.0",
         "font-awesome": "^4.7.0",
         "react": "^18.2.0",
+        "react-bootstrap": "^2.7.4",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
@@ -2394,63 +2392,6 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
-    "node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz",
-      "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==",
-      "hasInstallScript": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz",
-      "integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.4.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/free-regular-svg-icons": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz",
-      "integrity": "sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.4.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/free-solid-svg-icons": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz",
-      "integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==",
-      "hasInstallScript": true,
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "6.4.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/@fortawesome/react-fontawesome": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
-      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
-      "dependencies": {
-        "prop-types": "^15.8.1"
-      },
-      "peerDependencies": {
-        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
-        "react": ">=16.3"
-      }
-    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
@@ -3334,6 +3275,65 @@
         }
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.6.0.tgz",
+      "integrity": "sha512-OFiYQdv+Yk7AO7IsQu/fAEPijbeTwrrEYvdNoJ3sblBBedD5j5fBTNWrUPNVlwC4XWWnWTCMaRIVsJujsFiWXg==",
+      "dependencies": {
+        "@swc/helpers": "^0.4.14"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.9",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.9.tgz",
+      "integrity": "sha512-3BekqcwB6Umeya+16XPooARn4qEPW6vNvwYnlofIYe6h9qG1/VeD7UvShCWx11eFz5ELYmwIEshz+MkPX3wjcQ==",
+      "dependencies": {
+        "dequal": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.6.tgz",
+      "integrity": "sha512-eC3puKuWE1SRYbojWHXnvCNHGgf3uzHCb6JOhnF4OXPibOIPEkR1sqDSkL643ydigxwh+ruCa1CmYHlzk7ikKA==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@popperjs/core": "^2.11.6",
+        "@react-aria/ssr": "^3.5.0",
+        "@restart/hooks": "^0.4.9",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.3",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^8.0.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/uncontrollable": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.2.tgz",
+      "integrity": "sha512-/GDx+K1STGtpgTsj5Dj3J51YaKxZDblbCQHTH1zHLuoBEWodj6MjtRVv3TUijj1JYLRLSFsFzN8NV4M3QV4d9w==",
+      "peerDependencies": {
+        "react": ">=16.14.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3652,6 +3652,14 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.4.14",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz",
+      "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.0.tgz",
@@ -4420,6 +4428,14 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
+      "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -4495,6 +4511,11 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz",
       "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g=="
     },
+    "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": {
       "version": "8.5.4",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz",
@@ -5709,6 +5730,24 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0.tgz",
+      "integrity": "sha512-UnBV3E3v4STVNQdms6jSGO2CvOkjUMdDAVR2V5N4uCMdaIkaQjbcEAMqRimDHIs4uqBYzDAKCQwCB+97tJgHQw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.7"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -5973,6 +6012,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -6793,6 +6837,14 @@
         "node": ">= 0.8"
       }
     },
+    "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",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -6913,6 +6965,15 @@
         "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"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -9304,6 +9365,14 @@
         "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"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz",
@@ -14276,6 +14345,23 @@
         "react-is": "^16.13.1"
       }
     },
+    "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",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -14445,6 +14531,35 @@
         "node": ">=14"
       }
     },
+    "node_modules/react-bootstrap": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.4.tgz",
+      "integrity": "sha512-EPKPwhfbxsKsNBhJBitJwqul9fvmlYWSft6jWE2EpqhEyjhqIqNihvQo2onE5XtS+QHOavUSNmA+8Lnv5YeAyg==",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.6.3",
+        "@types/react-transition-group": "^4.4.5",
+        "classnames": "^2.3.2",
+        "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.5",
+        "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
+        }
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -14593,6 +14708,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "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",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -14673,6 +14793,21 @@
         }
       }
     },
+    "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",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -16421,6 +16556,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "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",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -16633,6 +16782,14 @@
         "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"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -19082,43 +19239,6 @@
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.42.0.tgz",
       "integrity": "sha512-6SWlXpWU5AvId8Ac7zjzmIOqMOba/JWY8XZ4A7q7Gn1Vlfg/SFFIlrtHXt9nPn4op9ZPAkl91Jao+QQv3r/ukw=="
     },
-    "@fortawesome/fontawesome-common-types": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz",
-      "integrity": "sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ=="
-    },
-    "@fortawesome/fontawesome-svg-core": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz",
-      "integrity": "sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==",
-      "requires": {
-        "@fortawesome/fontawesome-common-types": "6.4.0"
-      }
-    },
-    "@fortawesome/free-regular-svg-icons": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz",
-      "integrity": "sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==",
-      "requires": {
-        "@fortawesome/fontawesome-common-types": "6.4.0"
-      }
-    },
-    "@fortawesome/free-solid-svg-icons": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz",
-      "integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==",
-      "requires": {
-        "@fortawesome/fontawesome-common-types": "6.4.0"
-      }
-    },
-    "@fortawesome/react-fontawesome": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
-      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
-      "requires": {
-        "prop-types": "^15.8.1"
-      }
-    },
     "@humanwhocodes/config-array": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
@@ -19759,6 +19879,51 @@
         "source-map": "^0.7.3"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
+    },
+    "@react-aria/ssr": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.6.0.tgz",
+      "integrity": "sha512-OFiYQdv+Yk7AO7IsQu/fAEPijbeTwrrEYvdNoJ3sblBBedD5j5fBTNWrUPNVlwC4XWWnWTCMaRIVsJujsFiWXg==",
+      "requires": {
+        "@swc/helpers": "^0.4.14"
+      }
+    },
+    "@restart/hooks": {
+      "version": "0.4.9",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.9.tgz",
+      "integrity": "sha512-3BekqcwB6Umeya+16XPooARn4qEPW6vNvwYnlofIYe6h9qG1/VeD7UvShCWx11eFz5ELYmwIEshz+MkPX3wjcQ==",
+      "requires": {
+        "dequal": "^2.0.2"
+      }
+    },
+    "@restart/ui": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.6.tgz",
+      "integrity": "sha512-eC3puKuWE1SRYbojWHXnvCNHGgf3uzHCb6JOhnF4OXPibOIPEkR1sqDSkL643ydigxwh+ruCa1CmYHlzk7ikKA==",
+      "requires": {
+        "@babel/runtime": "^7.21.0",
+        "@popperjs/core": "^2.11.6",
+        "@react-aria/ssr": "^3.5.0",
+        "@restart/hooks": "^0.4.9",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.3",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^8.0.1",
+        "warning": "^4.0.3"
+      },
+      "dependencies": {
+        "uncontrollable": {
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.2.tgz",
+          "integrity": "sha512-/GDx+K1STGtpgTsj5Dj3J51YaKxZDblbCQHTH1zHLuoBEWodj6MjtRVv3TUijj1JYLRLSFsFzN8NV4M3QV4d9w==",
+          "requires": {}
+        }
+      }
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -19953,6 +20118,14 @@
         "loader-utils": "^2.0.0"
       }
     },
+    "@swc/helpers": {
+      "version": "0.4.14",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz",
+      "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==",
+      "requires": {
+        "tslib": "^2.4.0"
+      }
+    },
     "@testing-library/dom": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.0.tgz",
@@ -20583,6 +20756,14 @@
         "@types/react": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz",
+      "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -20658,6 +20839,11 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz",
       "integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g=="
     },
+    "@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": {
       "version": "8.5.4",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz",
@@ -21557,6 +21743,12 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "bootstrap": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0.tgz",
+      "integrity": "sha512-UnBV3E3v4STVNQdms6jSGO2CvOkjUMdDAVR2V5N4uCMdaIkaQjbcEAMqRimDHIs4uqBYzDAKCQwCB+97tJgHQw==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -21727,6 +21919,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "clean-css": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -22315,6 +22512,11 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
       "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",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -22411,6 +22613,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": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -24148,6 +24359,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"
+      }
+    },
     "ipaddr.js": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz",
@@ -27553,6 +27772,22 @@
         }
       }
     },
+    "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",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -27670,6 +27905,25 @@
         "whatwg-fetch": "^3.6.2"
       }
     },
+    "react-bootstrap": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.4.tgz",
+      "integrity": "sha512-EPKPwhfbxsKsNBhJBitJwqul9fvmlYWSft6jWE2EpqhEyjhqIqNihvQo2onE5XtS+QHOavUSNmA+8Lnv5YeAyg==",
+      "requires": {
+        "@babel/runtime": "^7.21.0",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.6.3",
+        "@types/react-transition-group": "^4.4.5",
+        "classnames": "^2.3.2",
+        "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.5",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
     "react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -27782,6 +28036,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "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",
@@ -27842,6 +28101,17 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "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",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -29132,6 +29402,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",
@@ -29280,6 +29561,14 @@
         "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"
+      }
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/package.json b/package.json
index dc7bb39..7dd608b 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.3.0",
     "font-awesome": "^4.7.0",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.7.4",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
diff --git a/public/index.html b/public/index.html
index 9a5cc96..8ced92d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,36 +11,31 @@
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!-- bootstrap link -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
+      crossorigin="anonymous"
+    />
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
+      crossorigin="anonymous"
+    ></script>
   </body>
 </html>
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..e51495c
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1,191 @@
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap");
+
+.form-container {
+  border: 2px solid #eee;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+.form-control {
+  height: 40px;
+  border: 1px solid #878787;
+}
+.form-control:focus {
+  border: none;
+  box-shadow: none;
+  border: 2px solid #222;
+}
+
+a {
+  text-decoration: none;
+}
+
+input::placeholder {
+  font-family: "Open Sans";
+  font-style: normal;
+  opacity: 0.5 !important;
+  font-size: 13px;
+  line-height: 31px;
+  color: #878787;
+}
+
+.create {
+  left: calc(50% - 260px / 2 + 23.98px);
+  top: 238.81px;
+
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 25px;
+  line-height: 34px;
+
+  color: #000000;
+}
+
+.label {
+  left: 0.12px;
+  top: 333.65px;
+  font-style: normal;
+  line-height: 25px;
+  color: #878787;
+  font-size: 13px;
+}
+.label1 {
+  font-size: 13px;
+}
+.btn-create:hover {
+  background: rgba(255, 0, 0, 0.676);
+}
+.btn-create {
+  width: 100%;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  color: #ffffff;
+  background: #f31d1d;
+  border-radius: 3px;
+  border: none;
+  outline: none;
+  padding: 1.5%;
+}
+
+input[type="tel"] {
+  padding-left: 50px;
+}
+.toolkit-con {
+  position: relative;
+}
+
+.toolkit {
+  position: absolute;
+
+  bottom: 0px;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 35px;
+  color: #000000;
+  background: rgba(185, 183, 183, 0.56);
+  display: grid;
+  place-content: center;
+  height: 40px;
+  padding: 5px;
+  border: none;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.foot {
+  font-style: normal;
+  text-align: center;
+  color: #000000;
+}
+
+.login {
+  position: relative;
+}
+.btn-password {
+  position: absolute;
+  right: 2%;
+  bottom: 13%;
+  border: none;
+  outline: none;
+  background-color: #fff;
+}
+
+.error {
+  border: 1px solid red;
+}
+.keep {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 13px;
+  line-height: 31px;
+
+  color: rgba(0, 0, 0, 0.82);
+}
+
+.have {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 13px;
+  line-height: 31px;
+
+  color: #000000;
+}
+.error:focus {
+  border: 1px solid red;
+}
+.label2 {
+  margin-top: -30px;
+  margin-bottom: 20px;
+  font-size: 13px;
+}
+.label3 {
+  margin-top: -40px;
+  margin-bottom: 20px;
+  font-size: 13px;
+}
+
+.disabled {
+  width: 15%;
+  border-radius: 7px;
+  border: none;
+  background: rgba(185, 183, 183, 0.56);
+}
+
+.disabledTxt {
+  width: 85%;
+  border: none;
+  border-radius: inherit;
+}
+.disabledTxt:focus {
+  border: none;
+}
+
+.disabled-cont {
+  border: 0.6px solid rgb(121, 121, 121);
+  border-radius: 7px;
+}
+input[type="checkbox"] {
+  margin-right: 10px;
+  display: inline-block;
+  transform: scale(1.5);
+}
+.body {
+  align-items: center;
+  color: green;
+}
+.modal-cont {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 13px;
+  line-height: 31px;
+
+  color: rgba(0, 0, 0, 0.82);
+}
diff --git a/src/App.js b/src/App.js
index 9be0066..449581c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,62 +1,13 @@
-import { useState } from "react";
-import data from "./ProductStore";
-import Card from "./component/Card";
-import background1 from "./assets/background/image 4.png";
-function App() {
-  const [products, setProducts] = useState(data);
-
-  const handleIncrease = (id) => {
-    const newProducts = products.map((product) => {
-      if (product.id === id) {
-        product.count++;
-      }
-      return product;
-    });
-    setProducts(newProducts);
-  };
+import './App.css';
+import Signup from './components/Signup';
 
-  const handleReduce = (id) => {
-    const newProducts = products.map((product) => {
-      if (product.id === id && product.count > 1) {
-        product.count--;
-      }
-      return product;
-    });
-    setProducts(newProducts);
-  };
 
-  const toCartButton = (id) => {
-    const newProducts = products.map((product) => {
-      if (product.id === id) {
-        product.cart = !product.cart;
-      }
-      return product;
-    });
-    setProducts(newProducts);
-  };
 
+function App() {
   return (
     <div className="App">
-      <main className="main-section">
-        <div className="hero-section">
-          <img
-            src={background1}
-            alt="backgroung-img"
-            className="img-fluid"
-          ></img>
-        </div>
-        <div className="card-con">
-          {products.map((product) => (
-            <Card
-              product={product}
-              key={product.id}
-              handleIncrease={handleIncrease}
-              handleReduce={handleReduce}
-              toCartButton={toCartButton}
-            />
-          ))}
-        </div>
-      </main>
+      <Signup/>
+    
     </div>
   );
 }
diff --git a/src/ProductStore.js b/src/ProductStore.js
deleted file mode 100644
index a907770..0000000
--- a/src/ProductStore.js
+++ /dev/null
@@ -1,59 +0,0 @@
- import burger1 from "./assets/burger-img/burger-1.png"
-import burger2 from "./assets/burger-img/burger-2.png"
-import burger3 from "./assets/burger-img/burger-3.png"
-import burger4 from "./assets/burger-img/burger-4.png"
-import burger5 from "./assets/burger-img/burger-5.png"
-import burger6 from "./assets/burger-img/burger-6.png"
-
-const data = [
-    {
-        id: 1,
-        image: burger1,
-        price:  10500,
-        title:"Double Beef Burger",
-        count: 1,
-        cart: false
-    },
-    {
-        id: 2,
-        image: burger2,
-        price:  8500,
-        title:"Single Beef Burger",
-        count: 1,
-        cart: false
-    },
-    {
-        id: 3,
-        image: burger3,
-        price:  12000,
-        title:"Double Crunchy Chicken Burger",
-        count: 1,
-        cart: false
-    },
-    {
-        id: 4,
-        image: burger4,
-        price:  5000,
-        title:"Breakfast Burger",
-        count: 1,
-        cart: false
-    },
-    {
-        id: 5,
-        image: burger5,
-        price:  9000,
-        title:"Grilled Chicken Burger",
-        count: 1,
-        cart: false
-    },
-    {
-        id: 6,
-        image: burger6,
-        price:  11000,
-        title:"Double Grilled Chicken  Burger",
-        count: 1,
-        cart: false
-    }
-]
-
-export default data
\ No newline at end of file
diff --git a/src/assets/background/image 4.png b/src/assets/background/image 4.png
deleted file mode 100644
index c6b5cac..0000000
Binary files a/src/assets/background/image 4.png and /dev/null differ
diff --git a/src/assets/burger-img/burger-1.png b/src/assets/burger-img/burger-1.png
deleted file mode 100644
index 100d64d..0000000
Binary files a/src/assets/burger-img/burger-1.png and /dev/null differ
diff --git a/src/assets/burger-img/burger-2.png b/src/assets/burger-img/burger-2.png
deleted file mode 100644
index 0bf715e..0000000
Binary files a/src/assets/burger-img/burger-2.png and /dev/null differ
diff --git a/src/assets/burger-img/burger-3.png b/src/assets/burger-img/burger-3.png
deleted file mode 100644
index 9bcebdf..0000000
Binary files a/src/assets/burger-img/burger-3.png and /dev/null differ
diff --git a/src/assets/burger-img/burger-4.png b/src/assets/burger-img/burger-4.png
deleted file mode 100644
index 06420fd..0000000
Binary files a/src/assets/burger-img/burger-4.png and /dev/null differ
diff --git a/src/assets/burger-img/burger-5.png b/src/assets/burger-img/burger-5.png
deleted file mode 100644
index 58a86ba..0000000
Binary files a/src/assets/burger-img/burger-5.png and /dev/null differ
diff --git a/src/assets/burger-img/burger-6.png b/src/assets/burger-img/burger-6.png
deleted file mode 100644
index 0cd8b03..0000000
Binary files a/src/assets/burger-img/burger-6.png and /dev/null differ
diff --git a/src/assets/fruit-group/group1.png b/src/assets/fruit-group/group1.png
deleted file mode 100644
index 86ed02a..0000000
Binary files a/src/assets/fruit-group/group1.png and /dev/null differ
diff --git a/src/assets/fruit-group/group2.png b/src/assets/fruit-group/group2.png
deleted file mode 100644
index 439da43..0000000
Binary files a/src/assets/fruit-group/group2.png and /dev/null differ
diff --git a/src/assets/fruit-group/group3.png b/src/assets/fruit-group/group3.png
deleted file mode 100644
index bb5fdc3..0000000
Binary files a/src/assets/fruit-group/group3.png and /dev/null differ
diff --git a/src/assets/fruit-group/group4.png b/src/assets/fruit-group/group4.png
deleted file mode 100644
index 2be7704..0000000
Binary files a/src/assets/fruit-group/group4.png and /dev/null differ
diff --git a/src/assets/fruit-group/group6.png b/src/assets/fruit-group/group6.png
deleted file mode 100644
index 57c7b02..0000000
Binary files a/src/assets/fruit-group/group6.png and /dev/null differ
diff --git a/src/assets/icons8-eye-30.png b/src/assets/icons8-eye-30.png
new file mode 100644
index 0000000..9a10d1f
Binary files /dev/null and b/src/assets/icons8-eye-30.png differ
diff --git a/src/assets/icons8-hide-password-24.png b/src/assets/icons8-hide-password-24.png
new file mode 100644
index 0000000..145da66
Binary files /dev/null and b/src/assets/icons8-hide-password-24.png differ
diff --git a/src/assets/landing page for desktop/Rectangle 5 (1).png b/src/assets/landing page for desktop/Rectangle 5 (1).png
new file mode 100644
index 0000000..fa6d964
Binary files /dev/null and b/src/assets/landing page for desktop/Rectangle 5 (1).png differ
diff --git a/src/assets/landing page for desktop/Rectangle 5 (2).png b/src/assets/landing page for desktop/Rectangle 5 (2).png
new file mode 100644
index 0000000..036a135
Binary files /dev/null and b/src/assets/landing page for desktop/Rectangle 5 (2).png differ
diff --git a/src/assets/landing page for desktop/Rectangle 5 (3).png b/src/assets/landing page for desktop/Rectangle 5 (3).png
new file mode 100644
index 0000000..666d2eb
Binary files /dev/null and b/src/assets/landing page for desktop/Rectangle 5 (3).png differ
diff --git a/src/assets/landing page for desktop/Rectangle 5 (4).png b/src/assets/landing page for desktop/Rectangle 5 (4).png
new file mode 100644
index 0000000..dce481b
Binary files /dev/null and b/src/assets/landing page for desktop/Rectangle 5 (4).png differ
diff --git a/src/assets/landing page for desktop/Rectangle 5 (5).png b/src/assets/landing page for desktop/Rectangle 5 (5).png
new file mode 100644
index 0000000..0ed785d
Binary files /dev/null and b/src/assets/landing page for desktop/Rectangle 5 (5).png differ
diff --git a/src/assets/landing page for desktop/Rectangle 5.png b/src/assets/landing page for desktop/Rectangle 5.png
new file mode 100644
index 0000000..c9b7cef
Binary files /dev/null and b/src/assets/landing page for desktop/Rectangle 5.png differ
diff --git a/src/assets/landing page for desktop/Vector (1).png b/src/assets/landing page for desktop/Vector (1).png
new file mode 100644
index 0000000..a028fd6
Binary files /dev/null and b/src/assets/landing page for desktop/Vector (1).png differ
diff --git a/src/assets/landing page for desktop/Vector (2).png b/src/assets/landing page for desktop/Vector (2).png
new file mode 100644
index 0000000..9cb3d18
Binary files /dev/null and b/src/assets/landing page for desktop/Vector (2).png differ
diff --git a/src/assets/landing page for desktop/Vector.png b/src/assets/landing page for desktop/Vector.png
new file mode 100644
index 0000000..e0fec30
Binary files /dev/null and b/src/assets/landing page for desktop/Vector.png differ
diff --git a/src/assets/landing page for desktop/image 10.png b/src/assets/landing page for desktop/image 10.png
new file mode 100644
index 0000000..7a29084
Binary files /dev/null and b/src/assets/landing page for desktop/image 10.png differ
diff --git a/src/assets/landing page for desktop/image 2.png b/src/assets/landing page for desktop/image 2.png
new file mode 100644
index 0000000..cb58861
Binary files /dev/null and b/src/assets/landing page for desktop/image 2.png differ
diff --git a/src/assets/landing page for desktop/image 3 (1).png b/src/assets/landing page for desktop/image 3 (1).png
new file mode 100644
index 0000000..8be7f05
Binary files /dev/null and b/src/assets/landing page for desktop/image 3 (1).png differ
diff --git a/src/assets/landing page for desktop/image 3.png b/src/assets/landing page for desktop/image 3.png
new file mode 100644
index 0000000..ac482a2
Binary files /dev/null and b/src/assets/landing page for desktop/image 3.png differ
diff --git a/src/assets/landing page for desktop/image 4 (1).png b/src/assets/landing page for desktop/image 4 (1).png
new file mode 100644
index 0000000..ac482a2
Binary files /dev/null and b/src/assets/landing page for desktop/image 4 (1).png differ
diff --git a/src/assets/landing page for desktop/image 4.png b/src/assets/landing page for desktop/image 4.png
new file mode 100644
index 0000000..b505a6b
Binary files /dev/null and b/src/assets/landing page for desktop/image 4.png differ
diff --git a/src/assets/landing page for desktop/image 5.png b/src/assets/landing page for desktop/image 5.png
new file mode 100644
index 0000000..74b9d1f
Binary files /dev/null and b/src/assets/landing page for desktop/image 5.png differ
diff --git a/src/assets/landing page for desktop/image 6.png b/src/assets/landing page for desktop/image 6.png
new file mode 100644
index 0000000..fdea4b1
Binary files /dev/null and b/src/assets/landing page for desktop/image 6.png differ
diff --git a/src/assets/landing page for desktop/image 7.png b/src/assets/landing page for desktop/image 7.png
new file mode 100644
index 0000000..d46f035
Binary files /dev/null and b/src/assets/landing page for desktop/image 7.png differ
diff --git a/src/assets/landing page for desktop/image 8.png b/src/assets/landing page for desktop/image 8.png
new file mode 100644
index 0000000..2ff0320
Binary files /dev/null and b/src/assets/landing page for desktop/image 8.png differ
diff --git a/src/assets/landing page for desktop/image 9.png b/src/assets/landing page for desktop/image 9.png
new file mode 100644
index 0000000..f45e06f
Binary files /dev/null and b/src/assets/landing page for desktop/image 9.png differ
diff --git a/src/assets/mobile/Rectangle 5 (1).png b/src/assets/mobile/Rectangle 5 (1).png
new file mode 100644
index 0000000..9df2b86
Binary files /dev/null and b/src/assets/mobile/Rectangle 5 (1).png differ
diff --git a/src/assets/mobile/Rectangle 5 (2).png b/src/assets/mobile/Rectangle 5 (2).png
new file mode 100644
index 0000000..9df2b86
Binary files /dev/null and b/src/assets/mobile/Rectangle 5 (2).png differ
diff --git a/src/assets/mobile/Rectangle 5 (3).png b/src/assets/mobile/Rectangle 5 (3).png
new file mode 100644
index 0000000..c076068
Binary files /dev/null and b/src/assets/mobile/Rectangle 5 (3).png differ
diff --git a/src/assets/mobile/Rectangle 5 (4).png b/src/assets/mobile/Rectangle 5 (4).png
new file mode 100644
index 0000000..9df2b86
Binary files /dev/null and b/src/assets/mobile/Rectangle 5 (4).png differ
diff --git a/src/assets/mobile/Rectangle 5 (5).png b/src/assets/mobile/Rectangle 5 (5).png
new file mode 100644
index 0000000..9df2b86
Binary files /dev/null and b/src/assets/mobile/Rectangle 5 (5).png differ
diff --git a/src/assets/mobile/Rectangle 5 (6).png b/src/assets/mobile/Rectangle 5 (6).png
new file mode 100644
index 0000000..722c319
Binary files /dev/null and b/src/assets/mobile/Rectangle 5 (6).png differ
diff --git a/src/assets/mobile/Rectangle 5 (7).png b/src/assets/mobile/Rectangle 5 (7).png
new file mode 100644
index 0000000..9df2b86
Binary files /dev/null and b/src/assets/mobile/Rectangle 5 (7).png differ
diff --git a/src/assets/mobile/Rectangle 5.png b/src/assets/mobile/Rectangle 5.png
new file mode 100644
index 0000000..9df2b86
Binary files /dev/null and b/src/assets/mobile/Rectangle 5.png differ
diff --git a/src/assets/mobile/Rectangle 6 (1).png b/src/assets/mobile/Rectangle 6 (1).png
new file mode 100644
index 0000000..5e7149d
Binary files /dev/null and b/src/assets/mobile/Rectangle 6 (1).png differ
diff --git a/src/assets/mobile/Rectangle 6.png b/src/assets/mobile/Rectangle 6.png
new file mode 100644
index 0000000..240fabc
Binary files /dev/null and b/src/assets/mobile/Rectangle 6.png differ
diff --git a/src/assets/mobile/image 12.png b/src/assets/mobile/image 12.png
new file mode 100644
index 0000000..49c3e4e
Binary files /dev/null and b/src/assets/mobile/image 12.png differ
diff --git a/src/assets/mobile/image 2 (1).png b/src/assets/mobile/image 2 (1).png
new file mode 100644
index 0000000..4aa5a88
Binary files /dev/null and b/src/assets/mobile/image 2 (1).png differ
diff --git a/src/assets/mobile/image 2.png b/src/assets/mobile/image 2.png
new file mode 100644
index 0000000..4aa5a88
Binary files /dev/null and b/src/assets/mobile/image 2.png differ
diff --git a/src/assets/mobile/image 3 (1).png b/src/assets/mobile/image 3 (1).png
new file mode 100644
index 0000000..ac482a2
Binary files /dev/null and b/src/assets/mobile/image 3 (1).png differ
diff --git a/src/assets/mobile/image 3.png b/src/assets/mobile/image 3.png
new file mode 100644
index 0000000..5b8da01
Binary files /dev/null and b/src/assets/mobile/image 3.png differ
diff --git a/src/assets/mobile/image 4.png b/src/assets/mobile/image 4.png
new file mode 100644
index 0000000..bbe7cfd
Binary files /dev/null and b/src/assets/mobile/image 4.png differ
diff --git a/src/assets/vector-images/Vector.png b/src/assets/vector-images/Vector.png
deleted file mode 100644
index a945236..0000000
Binary files a/src/assets/vector-images/Vector.png and /dev/null differ
diff --git a/src/assets/vector-images/like.png b/src/assets/vector-images/like.png
deleted file mode 100644
index 9260818..0000000
Binary files a/src/assets/vector-images/like.png and /dev/null differ
diff --git a/src/assets/vector-images/like2.png b/src/assets/vector-images/like2.png
deleted file mode 100644
index a7c5364..0000000
Binary files a/src/assets/vector-images/like2.png and /dev/null differ
diff --git a/src/component/Card.js b/src/component/Card.js
deleted file mode 100644
index 4db88ec..0000000
--- a/src/component/Card.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react";
-import Counter from "./Counter";
-import ImgGallery from "./ImgGallery";
-// import like1 from "../assets/vector-images/like.png"
-// import like2 from "../assets/vector-images/like2.png"
-
-import Cart from "./Cart";
-const Card = ({ product, handleIncrease, handleReduce, toCartButton }) => {
-  return (
-    <div className="card">
-      <img src={product.image} className="card-img-top" alt="..." />
-      <div className="card-body">
-        <h5 className="card-title">{product.title}</h5>
-        <div className="d-flex justify-content-between align-items-center">
-          <div className="d-flex-column">
-            <p class="price">Total Price</p>
-            <p className="price-tag">&#8358;{product.price}.00</p>
-          </div>
-          <Counter
-            product={product}
-            handleIncrease={handleIncrease}
-            handleReduce={handleReduce}
-          />
-        </div>
-        <div>
-          <ImgGallery />
-        </div>
-        <div>
-          <Cart product={product} toCartButton={toCartButton} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Card;
diff --git a/src/component/Cart.js b/src/component/Cart.js
deleted file mode 100644
index c261b16..0000000
--- a/src/component/Cart.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import icon from "../assets/vector-images/Vector.png";
-import { FaCheck } from "react-icons/fa";
-
-const Cart = ({ product, toCartButton }) => {
-  return (
-    <button className="cart-btn" onClick={() => toCartButton(product.id)}>
-      {!product.cart && (
-        <>
-          <div className="cart-icon">
-            <img src={icon} alt="icon"></img>
-          </div>
-          <div className="cart-txt">Add to Cart</div>
-        </>
-      )}
-      {product.cart && (
-        <>
-          <div className="cart-icon">
-            <FaCheck />
-          </div>
-          <div className="cart-txt">Update Cart</div>
-        </>
-      )}
-    </button>
-  );
-};
-
-export default Cart;
diff --git a/src/component/Counter.js b/src/component/Counter.js
deleted file mode 100644
index fbd021a..0000000
--- a/src/component/Counter.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-
-
-const Counter = ({ product,handleIncrease,handleReduce}) => {
-  return (
-    <div className='counter'>
-        <button onClick={()=>handleReduce(product.id)} >-</button>
-        <label>{product.count}</label>
-        <button onClick={()=>handleIncrease(product.id)}>+</button>
-    </div>
-  )
-}
-
-export default Counter
\ No newline at end of file
diff --git a/src/component/ImgGallery.js b/src/component/ImgGallery.js
deleted file mode 100644
index a0ce19c..0000000
--- a/src/component/ImgGallery.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react'
-import img1 from "../assets/fruit-group/group1.png"
-import img2 from "../assets/fruit-group/group2.png"
-import img3 from "../assets/fruit-group/group3.png"
-import img4 from "../assets/fruit-group/group4.png"
-import img5 from "../assets/fruit-group/group6.png"
-
-const ImgGallery = () => {
-  return (
-    <div className='img-gallery'>
-        <img src={img1} alt="group1" />
-        <img src={img2} alt="group2" />
-        <img src={img3} alt="group3" />
-        <img src={img4} alt="group4" />
-        <img src={img5} alt="group6" />
-    </div>
-  )
-}
-
-export default ImgGallery
\ No newline at end of file
diff --git a/src/components/Signup.jsx b/src/components/Signup.jsx
new file mode 100644
index 0000000..bc03bdc
--- /dev/null
+++ b/src/components/Signup.jsx
@@ -0,0 +1,316 @@
+import React, { useState } from "react";
+import { Modal, Button } from "react-bootstrap";
+import mobileImg from "../assets/mobile/image 4.png";
+
+const Signup = () => {
+  const initialState = {
+    firstName: "",
+    lastName: "",
+    email: "",
+    phoneNumber: "",
+    password: "",
+    confirmPassWord: "",
+  };
+  const [user, setUser] = useState(initialState);
+  const [passwordVisible, setPasswordVisible] = useState(false);
+  const [passwordVisible1, setPasswordVisible1] = useState(false);
+  const [errors, setErrors] = useState({});
+  const [showModal, setShowModal] = useState(false); //for controlling modal visibility
+
+  const handleTogglePassword = () => {
+    setPasswordVisible(!passwordVisible);
+  };
+
+  const handleTogglePassword1 = () => {
+    setPasswordVisible1(!passwordVisible1);
+  };
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setUser({ ...user, [name]: value });
+    setErrors({ ...errors, [name]: "" });
+
+    if (name === "email") {
+      if (!value.includes("@") || !value.includes(".com")) {
+        setErrors((prevErrors) => ({
+          ...prevErrors,
+          email: "Invalid email format*",
+        }));
+      }
+    }
+
+    if (name === "phoneNumber") {
+      if (value.length < 10 || value.length > 10) {
+        setErrors((prevErrors) => ({
+          ...prevErrors,
+          phoneNumber: "Invalid Phone Number*",
+        }));
+      }
+    }
+
+    if (name === "password" || name === "confirmPassWord") {
+      if (value.length < 8) {
+        setErrors((prevErrors) => ({
+          ...prevErrors,
+          [name]: "Password too short*",
+        }));
+      }
+    }
+
+    if (name === "confirmPassWord" && value !== user.password) {
+      setErrors((prevErrors) => ({
+        ...prevErrors,
+        confirmPassWord: "Passwords do not match*",
+      }));
+    }
+  };
+
+  const { firstName, lastName, email, phoneNumber, password, confirmPassWord } =
+    user;
+  console.log(user);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const newErrors = {};
+
+    // Check for errors
+    if (firstName.length === 0) {
+      newErrors.firstName = "Required*";
+    }
+    if (lastName.length === 0) {
+      newErrors.lastName = "Required*";
+    }
+    if (email.length === 0) {
+      newErrors.email = "Required*";
+    }
+    if (phoneNumber.length <= 0) {
+      newErrors.phoneNumber = "Required*";
+    }
+
+    if (password.length < 8) {
+      newErrors.password = "Password should be at least 8 characters*";
+    }
+    if (confirmPassWord.length < 8) {
+      newErrors.confirmPassWord =
+        "Confirm password should be at least 8 characters*";
+    }
+
+    if (confirmPassWord !== password) {
+      newErrors.confirmPassWord = "Passwords do not match*";
+    }
+
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+    } else {
+      // Clear errors and show the modal
+      setErrors({});
+      setShowModal(true);
+    }
+  };
+
+  const handleCloseModal = () => {
+    // Close the modal
+    setShowModal(false);
+  };
+
+  return (
+    <div className="form-container col-10 offset-1  col-md-4 offset-md-4">
+      <div className="first text-center mt-4">
+        <img className="mb-4" src={mobileImg} alt="" height={120} />
+        <h2 className="create mb-5">Create Your account</h2>
+      </div>
+      <div className="cont col-md-10 col-10 offset-1 offset-md-1">
+        {/* <form onSubmit={handleSubmit}> */}
+        <div className="label mb-3">
+          <label className="label d-block" htmlFor="">
+            First name
+          </label>
+          <input
+            className={`form-control ${errors.firstName ? "error" : ""}`}
+            type="text"
+            id="firstName"
+            name="firstName"
+            placeholder="First Name"
+            value={firstName}
+            onChange={handleChange}
+          />
+
+          {errors.firstName && (
+            <label className="label1 text-danger">{errors.firstName}</label>
+          )}
+        </div>
+        <div className="mb-3">
+          <label className="label d-block" htmlFor="">
+            Last name
+          </label>
+          <input
+            className={`form-control ${errors.lastName ? "error" : ""}`}
+            type="text"
+            id="lastName"
+            name="lastName"
+            placeholder="Last Name"
+            value={lastName}
+            onChange={handleChange}
+          />
+          {errors.lastName && (
+            <label className="label1 text-danger">{errors.lastName}</label>
+          )}
+        </div>
+        <div className="mb-3">
+          <label className="label d-block" htmlFor="">
+            Email
+          </label>
+          <input
+            className={`form-control ${errors.email ? "error" : ""}`}
+            type="text"
+            id="email"
+            name="email"
+            placeholder="example@mail.com"
+            value={email}
+            onChange={handleChange}
+          />
+          {errors.email && (
+            <label className="label1 text-danger">{errors.email}</label>
+          )}
+        </div>
+        <div className="mb-3">
+          <label className="label d-block" htmlFor="">
+            Phone Number
+          </label>
+
+          <input
+            className={`form-control ${errors.phoneNumber ? "error" : ""}`}
+            type="tel"
+            id="phoneNumber"
+            name="phoneNumber"
+            placeholder="818 000 0000"
+            value={phoneNumber}
+            onChange={handleChange}
+          />
+          <div className="toolkit-con">
+            <button
+              className="toolkit"
+              type="button"
+              disabled
+              aria-label="Disabled button"
+            >
+              <span>+234</span>
+            </button>
+          </div>
+
+          {errors.phoneNumber && (
+            <label className="label1 text-danger">{errors.phoneNumber}</label>
+          )}
+        </div>
+        <div className="mb-3 login">
+          <label className="label d-block" htmlFor="">
+            Password (8 character minimum)
+          </label>
+          <input
+            className={`form-control ${errors.password ? "error" : ""}`}
+            type={passwordVisible ? "text" : "password"}
+            id="password"
+            name="password"
+            placeholder="Password"
+            value={password}
+            onChange={handleChange}
+          />
+
+          <button
+            className="btn-password"
+            onClick={handleTogglePassword}
+            aria-label={passwordVisible ? "Hide password" : "Show password"}
+          >
+            <i
+              className={`fa fa-sharp fa-light ${
+                passwordVisible ? "fa-eye" : "fa-eye-slash"
+              }`}
+            ></i>
+          </button>
+        </div>
+        <div className="er">
+          {errors.password && (
+            <label className="label3 text-danger">{errors.password}</label>
+          )}
+        </div>
+        <div className="mb-3 login">
+          <label className="label d-block" htmlFor="">
+            Confirm Password
+          </label>
+          <input
+            className={`form-control ${errors.confirmPassWord ? "error" : ""}`}
+            type={passwordVisible1 ? "text" : "password"}
+            id="confirmPassWord"
+            name="confirmPassWord"
+            placeholder="Confirm Password"
+            value={confirmPassWord}
+            onChange={handleChange}
+          />
+
+          <button
+            className="btn-password"
+            onClick={handleTogglePassword1}
+            aria-label={passwordVisible1 ? "Hide password" : "Show password"}
+          >
+            <i
+              className={`fa fa-sharp fa-light ${
+                passwordVisible1 ? "fa-eye" : "fa-eye-slash"
+              }`}
+            ></i>
+          </button>
+        </div>
+        <div className="er">
+          {errors.confirmPassWord && (
+            <label className="label2 text-danger">
+              {errors.confirmPassWord}
+            </label>
+          )}
+        </div>
+
+        <div className="mb-3">
+          <input type="checkbox" />
+          <label className="keep" htmlFor="">
+            Keep me signed in
+          </label>
+        </div>
+
+        <div className="btn1 text-center mb-4">
+          <button className="btn-create" onClick={handleSubmit}>
+            Create Your Account
+          </button>
+        </div>
+
+        {/* Modal */}
+        <Modal
+          className="modal-cont"
+          show={showModal}
+          onHide={handleCloseModal}
+          top
+        >
+          <Modal.Header closeButton>
+            <Modal.Title className="body text-center">Success</Modal.Title>
+          </Modal.Header>
+          <Modal.Body className="">
+            Your account has been created successfully.
+          </Modal.Body>
+          <Modal.Footer>
+            <Button variant="secondary" onClick={handleCloseModal}>
+              Close
+            </Button>
+          </Modal.Footer>
+        </Modal>
+        {/* </form> */}
+      </div>
+
+      <div className="foot p-2 text-center mb-4">
+        <p className="have">
+          Have an account? <a href="">Sign in</a>
+        </p>
+        By creating your Quickmunch account, you agree to the <br />
+        <a href="">Terms of use</a> and <a href="">Privacy Policy.</a>
+      </div>
+    </div>
+  );
+};
+
+export default Signup;
diff --git a/src/index.css b/src/index.css
index 79ded4b..ec2585e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');
-
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -13,194 +11,3 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
-
-.card {
-  font-family: "open sans";
-  width: 30%;
-  position: relative;
-  border-radius: 20px;
-  margin-bottom: 3%;
-}
-
-.card-title {
-  font-family: "Open Sans";
-  font-weight: bold;
-  font-size: 11px;
-  margin-bottom: 5%;
-  margin-top: 2%;
-}
-
-.card-body {
-  padding: 6px;
-}
-
-.price {
-  font-style: normal;
-  font-weight: 400;
-  font-size: 11px;
-  line-height: 15px;
-  color: #878787;
-  margin-bottom: 7%;
-}
-
-.price-tag {
-  font-weight: 600;
-  font-size: 17px;
-  line-height: 23px;
-  color: #000000;
-  margin: 0;
-}
-
-
-
-.counter {
-  background: rgba(225, 186, 186, 0.75);
-  border-radius: 5px;
-  width: 50%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1.5% 2%;
-}
-
-.counter button {
-  background: rgba(255, 255, 255, 0.63);
-  border-radius: 5px;
-  display: block;
-  padding: 0px 10px;
-  border: 0;
-  color: #F31D1D;
-  ;
-}
-
-.counter button:nth-child(1) {
-  padding: 0 12px;
-}
-
-.counter label {
-  font-size: 20px;
-  line-height: 10px;
-}
-
-
-.img-gallery {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  margin: 7% 0;
-}
-
-.img-gallery img {
-  max-width: 100%;
-  max-height: 100%;
-  display: block;
-}
-
-
-.cart-btn {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  background: #F31D1D;
-  border-radius: 10px;
-  border: 0;
-  padding: 3%;
-  width: 90%;
-  margin: auto;
-  margin-bottom: 5%;
-}
-
-.cart-txt {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 600;
-  font-size: 24px;
-  line-height: 33px;
-  color: #FFFFFF;
-}
-
-.cart-icon {
-  background: rgba(217, 217, 217, 0.5);
-  border-radius: 5px;
-  padding: 3% 4%;
-  display: grid;
-  place-content: center;
-}
- .cart-icon svg{
-  color: #FFFFFF;
- }
-
-/* .like{
-  position: absolute;
-  background-color: #ff0000;
-  display: inline-block;
-  border-radius: 100%;
-}
-
-.like img{
-  opacity: 0.2; 
-  position: absolute; 
-  background-color: transparent;
-}  */
-
-
-
-.main-section{
-  display: flex;
-  padding: 1%;
-}
-
-.hero-section{
-  width: 40%;
-  margin-bottom:2%;
-
-}
-
-.img-fluid{
-  height: 100%;
-  width: 100%;
-  display: block;
-  border-radius: 20px;
-}
-
-.card-con{
-  display: flex;
-  height: 45%;
-  flex-wrap: wrap;
-  justify-content: space-around;
-}
-
-@media(max-width:950px){
-  .hero-section{
-    display: none;
-  
-  }
-
-  .card {
-    font-family: "open sans";
-    width: 45%;
-    position: relative;
-    border-radius: 20px;
-    margin-bottom: 3%;
-  }
-}
-
-@media (max-width:500px){
-  .card {
-    font-family: "open sans";
-    width: 90%;
-    position: relative;
-    border-radius: 20px;
-    margin-bottom: 10%;
-  }
-}
-
-@media (max-width:360px){
-  .card {
-    font-family: "open sans";
-    width: 97%;
-    position: relative;
-    border-radius: 20px;
-    margin-bottom: 10%;
-  }
-}
\ No newline at end of file