diff --git a/DPR-5-FE.rar b/DPR-5-FE.rar
new file mode 100644
index 0000000..721150b
Binary files /dev/null and b/DPR-5-FE.rar differ
diff --git a/package-lock.json b/package-lock.json
index 07a5eef..3218a56 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,15 +8,23 @@
       "name": "landing-page",
       "version": "0.1.0",
       "dependencies": {
+        "@emailjs/browser": "^3.11.0",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.4.0",
+        "ethers": "^6.6.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-icons": "^4.8.0",
         "react-router-dom": "^6.11.2",
         "react-scripts": "5.0.1",
+        "styled-components": "^5.3.0",
+        "valtio": "^1.10.5",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "@types/styled-components": "^5.1.11"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -24,6 +32,11 @@
       "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.2.0.tgz",
       "integrity": "sha512-E09FiIft46CmH5Qnjb0wsW54/YQd69LsxeKUOWawmws1XWvyFGURnAChH0mlr7YPFR1ofwvUQfcL0J3lMxXqPA=="
     },
+    "node_modules/@adraffy/ens-normalize": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@adraffy/ens-normalize/-/ens-normalize-1.9.2.tgz",
+      "integrity": "sha512-0h+FrQDqe2Wn+IIGFkTCd4aAwTJ+7834Ek1COohCyV26AXhwQ7WQaz+4F/nLOeVl/3BtWHOHLPsq46V8YB46Eg=="
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -2139,6 +2152,37 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emailjs/browser": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-3.11.0.tgz",
+      "integrity": "sha512-RkY3FKZ3fPdK++OeF46mRTFpmmQWCHUVHZH209P3NE4D5sg2Atg7S2wa3gw5062Gl4clt4Wn5SyC4WhlVZC5pA==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
+      "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -3034,6 +3078,28 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/@noble/hashes": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.1.2.tgz",
+      "integrity": "sha512-KYRCASVTv6aeUi1tsF8/vpyR7zpfs3FUzy2Jqm+MU+LmUKhQ0y2FpfwqkCcxSg2ua4GALJd8k2R76WxwZGbQpA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ]
+    },
+    "node_modules/@noble/secp256k1": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@noble/secp256k1/-/secp256k1-1.7.1.tgz",
+      "integrity": "sha512-hOUk6AyBFmqVrv7k5WAw/LpszxVbj9gGN4JRkIX52fdFAj1UA61KXmZDvqVEm+pOyec3+fIeZB02LYa/pWOArw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ]
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3871,6 +3937,16 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -4271,6 +4347,17 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
     },
+    "node_modules/@types/styled-components": {
+      "version": "5.1.26",
+      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.26.tgz",
+      "integrity": "sha512-KuKJ9Z6xb93uJiIyxo/+ksS7yLjS1KzG6iv5i78dhVg/X3u5t1H7juRWqVmodIdz6wGVaIApo1u01kmFRdJHVw==",
+      "dev": true,
+      "dependencies": {
+        "@types/hoist-non-react-statics": "*",
+        "@types/react": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.6",
       "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.6.tgz",
@@ -4756,6 +4843,11 @@
         "node": ">=8.9"
       }
     },
+    "node_modules/aes-js": {
+      "version": "4.0.0-beta.5",
+      "resolved": "https://registry.npmjs.org/aes-js/-/aes-js-4.0.0-beta.5.tgz",
+      "integrity": "sha512-G965FqalsNyrPqgEGON7nIx1e/OVENSgiEIzyC63haUMuvNnwIgIjMs52hlTCKhkBny7A2ORNlfY9Zu+jmGk1Q=="
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -5094,6 +5186,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
@@ -5317,6 +5432,26 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/babel-plugin-styled-components": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.3.tgz",
+      "integrity": "sha512-jBioLwBVHpOMU4NsueH/ADcHrjS0Y/WTpt2eGVmmuSFNEv2DF3XhcMncuZlbbjxQ4vzxg+yEr6E6TNjrIQbsJQ==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-module-imports": "^7.21.4",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.21",
+        "picomatch": "^2.3.1"
+      },
+      "peerDependencies": {
+        "styled-components": ">= 2"
+      }
+    },
+    "node_modules/babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw=="
+    },
     "node_modules/babel-plugin-transform-react-remove-prop-types": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
@@ -5630,6 +5765,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -6065,6 +6208,14 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/css-declaration-sorter": {
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.0.tgz",
@@ -6246,6 +6397,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "node_modules/css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -7771,6 +7932,63 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/ethers": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/ethers/-/ethers-6.6.0.tgz",
+      "integrity": "sha512-7D2U+n8eZYmh592VZqap9vBu50jN7YUDHqAmwBYTMntmUKC9RVgcqcFbd+3DTCOQ1jMyK6QHv1usbcfgiGaHOA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/ethers-io/"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.buymeacoffee.com/ricmoo"
+        }
+      ],
+      "dependencies": {
+        "@adraffy/ens-normalize": "1.9.2",
+        "@noble/hashes": "1.1.2",
+        "@noble/secp256k1": "1.7.1",
+        "@types/node": "18.15.13",
+        "aes-js": "4.0.0-beta.5",
+        "tslib": "2.4.0",
+        "ws": "8.5.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/ethers/node_modules/@types/node": {
+      "version": "18.15.13",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.13.tgz",
+      "integrity": "sha512-N+0kuo9KgrUQ1Sn/ifDXsvg0TTleP7rIy4zOBGECxAljqvqfqpTfzx0Q1NUedOixRMBfe2Whhb056a42cWs26Q=="
+    },
+    "node_modules/ethers/node_modules/tslib": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
+      "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
+    },
+    "node_modules/ethers/node_modules/ws": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz",
+      "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -8711,6 +8929,19 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -14079,6 +14310,16 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-compare": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-2.5.1.tgz",
+      "integrity": "sha512-oyfc0Tx87Cpwva5ZXezSp5V9vht1c7dZBhvuV/y3ctkgMVUmiAGDVeeB0dKhGSyT0v1ZTEQYpe/RXlBVBNuCLA=="
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -15203,6 +15444,11 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -15605,6 +15851,35 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/styled-components": {
+      "version": "5.3.11",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz",
+      "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^1.1.0",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0",
+        "react-is": ">= 16.8.0"
+      }
+    },
     "node_modules/stylehacks": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz",
@@ -16351,6 +16626,14 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -16404,6 +16687,26 @@
         "node": ">=10.12.0"
       }
     },
+    "node_modules/valtio": {
+      "version": "1.10.5",
+      "resolved": "https://registry.npmjs.org/valtio/-/valtio-1.10.5.tgz",
+      "integrity": "sha512-jTp0k63VXf4r5hPoaC6a6LCG4POkVSh629WLi1+d5PlajLsbynTMd7qAgEiOSPxzoX5iNvbN7iZ/k/g29wrNiQ==",
+      "dependencies": {
+        "proxy-compare": "2.5.1",
+        "use-sync-external-store": "1.2.0"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/package.json b/package.json
index 3ba2bcf..d913f72 100644
--- a/package.json
+++ b/package.json
@@ -3,16 +3,24 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emailjs/browser": "^3.11.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.4.0",
+    "ethers": "^6.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",
     "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
+    "styled-components": "^5.3.0",
+    "valtio": "^1.10.5",
     "web-vitals": "^2.1.4"
   },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.11"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
diff --git a/public/index.html b/public/index.html
index d088778..e434795 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,7 +9,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/medisync-logo3.png" />
     <!--
       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/
diff --git a/src/App.js b/src/App.js
index abe4186..ccfe995 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,49 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import Home from './pages/Home';
-import Demo from './pages/Demo';
-import About from './pages/About';
-import Services from './pages/Services';
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+
+import Home from "./pages/Home";
+import Demo from "./pages/Demo";
+import About from "./pages/About";
+import Services from "./pages/Services";
+import Web3 from "./pages/Web3";
+import Welcome from "./pages/Welcome";
+import Register from "./pages/Register";
+import Login from "./pages/Login";
+import DashboardLayout from "./components/DashboardLayout";
+import ViewMedicalRecords from "./pages/ViewMedicalRecords";
+import ViewOtherRecords from "./pages/ViewOtherRecords";
+import ManageAccess from "./pages/ManageAccess";
+import ConnectWallet from "./components/ConnectWalletBtn";
 
 const App = () => {
   return (
     <div>
       <BrowserRouter>
         <Routes>
-          <Route index element={<Home/>} />
+          <Route index element={<Home />} />
           <Route path="/home" element={<Home />} />
           <Route path="/about" element={<About />} />
           <Route path="/demo" element={<Demo />} />
           <Route path="/services" element={<Services />} />
+          <Route path="/web3" element={<Web3 />} />
+          <Route path="/welcome" element={<Welcome />} />
+          <Route path="/register" element={<Register />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/dashboard" element={<DashboardLayout />}>
+            <Route
+              path="/dashboard/connectwallet"
+              element={<ConnectWallet />}
+            />
+            <Route
+              path="/dashboard/medicalrecords"
+              element={<ViewMedicalRecords />}
+            />
+            <Route path="/dashboard/medical" element={<ViewOtherRecords />} />
+            <Route path="/dashboard/manageaccess" element={<ManageAccess />} />
+          </Route>
         </Routes>
       </BrowserRouter>
     </div>
-  )
-}
+  );
+};
 
-export default App
\ No newline at end of file
+export default App;
diff --git a/src/assets/web3.png b/src/assets/web3.png
new file mode 100644
index 0000000..48f71cb
Binary files /dev/null and b/src/assets/web3.png differ
diff --git a/src/assets/welcome.png b/src/assets/welcome.png
new file mode 100644
index 0000000..1111370
Binary files /dev/null and b/src/assets/welcome.png differ
diff --git a/src/assets/whatsapp.png b/src/assets/whatsapp.png
new file mode 100644
index 0000000..dfd226f
Binary files /dev/null and b/src/assets/whatsapp.png differ
diff --git a/src/components/Allergies.js b/src/components/Allergies.js
new file mode 100644
index 0000000..36ee32c
--- /dev/null
+++ b/src/components/Allergies.js
@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import AllergyModal from "../components/AllergyModal";
+import no_records from "../images/no_record.png";
+import entry from "../images/entry.png";
+
+const Allergies = () => {
+  const [show, setShow] = useState(false);
+
+  return (
+    <div className="allergy">
+      <h3>Allergies</h3>
+      <span>
+        <div className="allergies_card">
+          <img src={no_records} alt="" />
+          <p>No Record Yet</p>
+        </div>
+        <div className="new-entry_section" onClick={() => setShow(true)}>
+          <img src={entry} alt="" />
+          <h3>New Entry</h3>
+        </div>
+        <AllergyModal onClose={() => setShow(false)} show={show} />
+      </span>
+    </div>
+  );
+};
+
+export default Allergies;
diff --git a/src/components/AllergyModal.js b/src/components/AllergyModal.js
new file mode 100644
index 0000000..44175d9
--- /dev/null
+++ b/src/components/AllergyModal.js
@@ -0,0 +1,48 @@
+import React from "react";
+
+const AllergyModal = (props) => {
+  if (!props.show) {
+    return null;
+  }
+  return (
+    <div className="modal allergy_modal" onClick={props.onClose}>
+      <div className="modal_content" onClick={(e) => e.stopPropagation()}>
+        <div className="modal_title">
+          <h2>Add Allergy</h2>
+        </div>
+        <div className="modal_body">
+          <h4>Allergy Type</h4>
+          <form>
+            <select>
+              <option>Allergy Type</option>
+              <option>Hay fever</option>
+              <option>Atopic dermatitis</option>
+              <option>Anaphylaxis</option>
+              <option>Latex</option>
+              <option>Beciomethasone nasal</option>
+              <option>Aceta-Gesic</option>
+              <option>Acuflex</option>
+              <option>Loratadine</option>
+              <option>Verbena</option>
+              <option>Zymine</option>
+            </select>
+          </form>
+          <input type="text" placeholder="Enter Allergy Name" />
+          <h4>Diagnosed date</h4>
+          <input type="date" className="calendar" />
+          <input type="text" placeholder="Disease" />
+          <input type="text" placeholder="Description" />
+          <input type="text" placeholder="Medication" />
+        </div>
+        <div className="modal_footer">
+          <button>Add</button>
+          <button onClick={props.onClose} className="close_button">
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AllergyModal;
diff --git a/src/components/BloodGroup.js b/src/components/BloodGroup.js
new file mode 100644
index 0000000..1cbe002
--- /dev/null
+++ b/src/components/BloodGroup.js
@@ -0,0 +1,20 @@
+import React from "react";
+
+const BloodGroup = () => {
+  return (
+    <div className="patient-details_first-section">
+      <h3>Blood Group</h3>
+      <form action="">
+        <select name="" id="">
+          <option value="">None</option>
+          <option value="">A</option>
+          <option value="">B</option>
+          <option value="">AB</option>
+          <option value="">O</option>
+        </select>
+      </form>
+    </div>
+  );
+};
+
+export default BloodGroup;
diff --git a/src/components/ConnectWalletBtn.jsx b/src/components/ConnectWalletBtn.jsx
new file mode 100644
index 0000000..92b329c
--- /dev/null
+++ b/src/components/ConnectWalletBtn.jsx
@@ -0,0 +1,159 @@
+import React from "react";
+import { useState } from "react";
+import styled, { keyframes } from "styled-components";
+import { ethers } from "ethers";
+
+const ConnectWallet = () => {
+  const [data, setdata] = useState({
+    address: "",
+    balance: null,
+  });
+  const [isLoading, setIsLoading] = useState(false);
+
+  const btnhandler = () => {
+    setIsLoading(true);
+    // Asking if metamask is already present or not
+    if (window.ethereum) {
+      // res[0] for fetching the first wallet
+      window.ethereum
+        .request({ method: "eth_requestAccounts" })
+        .then((res) => getWalletDetails(res[0]))
+        .catch((error) => {
+          // Handle error
+          alert(error.message);
+
+          // Stop loader if error occured
+          // For example, when user cancelled request
+          // and closed plugin
+          setIsLoading(false);
+        });
+    } else {
+      window.open("https://metamask.io/download/", "_blank");
+    }
+  };
+
+  const getWalletDetails = (address) => {
+    // Requesting balance method in
+    // a right format with help of ethers
+    window.ethereum
+      .request({
+        method: "eth_getBalance",
+        params: [address, "latest"],
+      })
+      .then((balance) => {
+        // Setting balance and address
+        setdata({
+          address,
+          balance: ethers.formatEther(balance),
+        });
+      });
+
+    setIsLoading(false);
+  };
+
+  return (
+    <Container>
+      {/* only show connect wallet button when wallet is not yet connected */}
+      {!data.address && (
+        <ConnectBtn onClick={() => btnhandler()}>
+          {/* <img src="./images/metamask.png" alt="metamask logo" /> */}
+          Connect Wallet
+          <Loading id="loading" $isloading={isLoading}>
+            <span>&bull;</span>
+            <span>&bull;</span>
+            <span>&bull;</span>
+          </Loading>
+        </ConnectBtn>
+      )}
+      {data.balance && <span>{data.balance}</span>}
+      {data.address && <span>{data.address}</span>}
+
+      {/* mobile warning for metamask pluggin, implement after deployment */}
+      {/* <MobileWarning id="mobileDeviceWarning">
+        If you are on a mobile phone, please use MetaMask application's browser
+        to connect.
+      </MobileWarning> */}
+    </Container>
+  );
+};
+
+export default ConnectWallet;
+
+const Container = styled.div`
+  position: relative;
+  display: flex;
+  gap: 10px;
+`;
+
+const ConnectBtn = styled.button`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  outline: none;
+  box-shadow: 0 1px 5px 0 #e6e9ef;
+  background: #ffffff;
+  color: #eb874b;
+  border-radius: 99px;
+  padding: 16px 32px;
+  font-family: "Quicksand", sans-serif;
+  font-size: 24px;
+  font-weight: 500;
+  opacity: 0.8;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+// const MobileWarning = styled.div`
+//   display: none;
+//   margin-top: 24px;
+//   color: rgb(247, 47, 47);
+
+//   .show {
+//     display: block;
+//   }
+// `;
+
+/* Loading dots styles animation */
+const animateOpacity = keyframes`
+  0% { opacity: 1; }
+  100% { opacity: 0; }
+`;
+
+const Loading = styled.span`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: ${({ $isloading }) => ($isloading ? `flex` : `none`)};
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  border-radius: 99px;
+
+  span:not(:last-child) {
+    margin-right: 5px;
+  }
+
+  span {
+    animation-name: ${animateOpacity};
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+  }
+
+  span:nth-child(2) {
+    animation-delay: 100ms;
+    animation-delay: 100ms;
+  }
+
+  span:nth-child(3) {
+    animation-delay: 300ms;
+    animation-delay: 300ms;
+  }
+`;
diff --git a/src/components/DashboardLayout.js b/src/components/DashboardLayout.js
new file mode 100644
index 0000000..3f85ad1
--- /dev/null
+++ b/src/components/DashboardLayout.js
@@ -0,0 +1,25 @@
+import React, { useEffect } from "react";
+import "../css/styles.css";
+import SideBar from "../components/SideBar";
+import Navbar from "../components/NavBar";
+import { Outlet, useNavigate } from "react-router-dom";
+
+const DashboardLayout = () => {
+  const navigate = useNavigate();
+  useEffect(() => {
+    navigate("connectwallet");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className="app_container">
+      <SideBar />
+      <section>
+        <Navbar />
+        <Outlet />
+      </section>
+    </div>
+  );
+};
+
+export default DashboardLayout;
diff --git a/src/components/Disabilities.js b/src/components/Disabilities.js
new file mode 100644
index 0000000..7af65f4
--- /dev/null
+++ b/src/components/Disabilities.js
@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import no_records from "../images/no_record.png";
+import entry from "../images/entry.png";
+import DisabilitiesModal from "./DisabilitiesModal";
+
+const Disabilities = () => {
+  const [show, setShow] = useState(false);
+
+  return (
+    <>
+      <h3>Disabilities</h3>
+      <span>
+        <div className="disabilities_card">
+          <img src={no_records} alt="" />
+          <p>No Record Yet</p>
+        </div>
+        <div className="new-entry_section" onClick={() => setShow(true)}>
+          <img src={entry} alt="" />
+          <h3>New Entry</h3>
+        </div>
+        <DisabilitiesModal onClose={() => setShow(false)} show={show} />
+      </span>
+    </>
+  );
+};
+
+export default Disabilities;
diff --git a/src/components/DisabilitiesModal.js b/src/components/DisabilitiesModal.js
new file mode 100644
index 0000000..156a78b
--- /dev/null
+++ b/src/components/DisabilitiesModal.js
@@ -0,0 +1,33 @@
+import React from "react";
+
+const DisabilitiesModal = (props) => {
+  if (!props.show) {
+    return null;
+  }
+  return (
+    <div className="modal disabilities_modal" onClick={props.onClose}>
+      <div className="modal_content" onClick={(e) => e.stopPropagation()}>
+        <div className="modal_title">
+          <h2>Add Disability</h2>
+        </div>
+        <div className="modal_body">
+          <h4>Disability Type</h4>
+          <input type="checkbox" />
+          <p>Learning Disability</p>
+          <h4>Diagnosed date</h4>
+          <input type="date" className="calendar" />
+          <input type="text" placeholder="Description" />
+          <input type="text" placeholder="Medication" />
+        </div>
+        <div className="modal_footer">
+          <button>Add</button>
+          <button onClick={props.onClose} className="close_button">
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DisabilitiesModal;
diff --git a/src/components/Genotype.js b/src/components/Genotype.js
new file mode 100644
index 0000000..03ec834
--- /dev/null
+++ b/src/components/Genotype.js
@@ -0,0 +1,22 @@
+import React from "react";
+
+const Genotype = () => {
+  return (
+    <div className="patient-details_first-section">
+      <h3>Genotype</h3>
+      <form action="">
+        <select name="" id="">
+          <option value="">None</option>
+          <option value="">AA</option>
+          <option value="">AC</option>
+          <option value="">AS</option>
+          <option value="">CC</option>
+          <option value="">SC</option>
+          <option value="">SS</option>
+        </select>
+      </form>
+    </div>
+  );
+};
+
+export default Genotype;
diff --git a/src/components/Main.js b/src/components/Main.js
new file mode 100644
index 0000000..0e34dfb
--- /dev/null
+++ b/src/components/Main.js
@@ -0,0 +1,19 @@
+import React from "react";
+
+const Main = () => {
+  return (
+    <div>
+      <div className="main_container">
+        <h3>Settings</h3>
+        <form action="">
+          <select>
+            <option value="">All Appointments</option>
+            <option value=""></option>
+          </select>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Main;
diff --git a/src/components/Medication.js b/src/components/Medication.js
new file mode 100644
index 0000000..c73206e
--- /dev/null
+++ b/src/components/Medication.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+const Medication = () => {
+  return (
+    <div className="medication">
+      <h4>Medication and Dosage</h4>
+      <div id="med"></div>
+    </div>
+  );
+};
+
+export default Medication;
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
new file mode 100644
index 0000000..7cb463c
--- /dev/null
+++ b/src/components/NavBar.js
@@ -0,0 +1,16 @@
+import React from "react";
+// import state from "../store/Index";
+// import { useSnapshot } from "valtio";
+
+const NavBar = () => {
+  // const snap = useSnapshot(state);
+  // console.log(snap.userData);
+  // const fullName = `${snap.userData.firstName}`;
+  return (
+    <div className="nav_bar">
+      <h2>John Okoro</h2>
+    </div>
+  );
+};
+
+export default NavBar;
diff --git a/src/components/OtherInformationModal.js b/src/components/OtherInformationModal.js
new file mode 100644
index 0000000..2d49500
--- /dev/null
+++ b/src/components/OtherInformationModal.js
@@ -0,0 +1,32 @@
+import React from "react";
+
+const OtherInformationModal = (props) => {
+  if (!props.show) {
+    return null;
+  }
+  return (
+    <div className="modal other-information_modal" onClick={props.onClose}>
+      <div className="modal_content" onClick={(e) => e.stopPropagation()}>
+        <div className="modal_title">
+          <h2>Title</h2>
+          <input type="text" placeholder="Enter title here" />
+        </div>
+        <div className="modal_body">
+          <h4>Diagnosed date</h4>
+          <input type="date" className="calendar" />
+          <input type="text" placeholder="Disease" />
+          <input type="text" placeholder="Description" />
+          <input type="text" placeholder="Medication" />
+        </div>
+        <div className="modal_footer">
+          <button>Add</button>
+          <button onClick={props.onClose} className="close_button">
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OtherInformationModal;
diff --git a/src/components/OtherInformations.js b/src/components/OtherInformations.js
new file mode 100644
index 0000000..3fe6560
--- /dev/null
+++ b/src/components/OtherInformations.js
@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import no_records from "../images/no_record.png";
+import entry from "../images/entry.png";
+import OtherInformationModal from "./OtherInformationModal";
+
+const OtherInformations = () => {
+  const [show, setShow] = useState(false);
+
+  return (
+    <>
+      <h3>Other Informations</h3>
+      <span>
+        <div className="other-information_card">
+          <img src={no_records} alt="" />
+          <p>No Record Yet</p>
+        </div>
+        <div className="new-entry_section" onClick={() => setShow(true)}>
+          <img src={entry} alt="" />
+          <h3>New Entry</h3>
+        </div>
+        <OtherInformationModal onClose={() => setShow(false)} show={show} />
+      </span>
+    </>
+  );
+};
+
+export default OtherInformations;
diff --git a/src/components/SideBar.js b/src/components/SideBar.js
new file mode 100644
index 0000000..15f92cd
--- /dev/null
+++ b/src/components/SideBar.js
@@ -0,0 +1,51 @@
+import React from "react";
+import logo from "../images/logo.png";
+import patient from "../images/patient.png";
+import view_medical_record from "../../src/images/upload.png";
+import medical from "../images/view.png";
+import access from "../images/access.png";
+import logout from "../images/logout.png";
+import "../css/styles.css";
+import { Link, useMatch, useResolvedPath } from "react-router-dom";
+
+const SideBar = () => {
+  return (
+    <div className="side_bar">
+      <img className="logo" src={logo} alt="" />
+      <img className="patient_image" src={patient} alt="" />
+      <ul>
+        <CustomLink to="/dashboard/medicalrecords" className="dashboard_link">
+          <img src={view_medical_record} alt="" />
+          <p>View Medical Record</p>
+        </CustomLink>
+        <CustomLink to="/dashboard/medical" className="dashboard_link">
+          <img src={medical} alt="" />
+          <p>My Records</p>
+        </CustomLink>
+        <CustomLink to="/dashboard/manageaccess" className="dashboard_link">
+          <img src={access} alt="" />
+          <p>Manage Access</p>
+        </CustomLink>
+        <CustomLink to="/" className="dashboard_link">
+          <img src={logout} alt="" />
+          <p>Logout</p>
+        </CustomLink>
+      </ul>
+    </div>
+  );
+};
+
+function CustomLink({ to, children, ...props }) {
+  const resolvedPath = useResolvedPath(to);
+  const isActive = useMatch({ path: resolvedPath.pathname, end: true });
+
+  return (
+    <li className={isActive ? "active" : ""}>
+      <Link to={to} {...props}>
+        {children}
+      </Link>
+    </li>
+  );
+}
+
+export default SideBar;
diff --git a/src/components/WalletNavBar.js b/src/components/WalletNavBar.js
new file mode 100644
index 0000000..0ac0313
--- /dev/null
+++ b/src/components/WalletNavBar.js
@@ -0,0 +1,21 @@
+import React from "react";
+import notification_icon from "../images/notification2.png";
+import hamburger_icon from "../images/menu-2.png";
+import "../css/walletnavbar.css";
+
+const WalletNavBar = () => {
+  return (
+    <div className="nav_bar wallet_nav-bar">
+      <span>
+        <h2>Hello John</h2>
+        <h4>Wallet Address</h4>
+      </span>
+      <div className="icon">
+        <img className="notifictaion_icon" src={notification_icon} alt="" />
+        <img src={hamburger_icon} alt="" />
+      </div>
+    </div>
+  );
+};
+
+export default WalletNavBar;
diff --git a/src/components/Weight.js b/src/components/Weight.js
new file mode 100644
index 0000000..98bfe46
--- /dev/null
+++ b/src/components/Weight.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+const Weight = () => {
+  return (
+    <div className="patient-details_first-section">
+      <h3>Weight (kg)</h3>
+      <input type="text" placeholder="0" />
+    </div>
+  );
+};
+
+export default Weight;
diff --git a/src/components/navbar/Navbar.jsx b/src/components/navbar/Navbar.jsx
index 9404895..a13326a 100644
--- a/src/components/navbar/Navbar.jsx
+++ b/src/components/navbar/Navbar.jsx
@@ -1,20 +1,28 @@
-import React, {useState} from 'react';
-import { RiMenu3Line, RiCloseLine } from 'react-icons/ri';
-import logo from '../../assets/logo.png';
-import './navbar.css';
-import { Link } from 'react-router-dom';
+import React, { useState } from "react";
+import { RiMenu3Line, RiCloseLine } from "react-icons/ri";
+import logo from "../../assets/logo.png";
+import "./navbar.css";
+import { Link } from "react-router-dom";
 
 const Menu = () => (
   <>
-  <p><Link to="/home">Home</Link></p>
-  <p><Link to="/about">About</Link></p>
-  <p><Link to="/demo">Demo</Link></p>
-  <p><Link to="/services">Services</Link></p>
+    <p>
+      <Link to="/">Home</Link>
+    </p>
+    <p>
+      <Link to="/about">About</Link>
+    </p>
+    <p>
+      <Link to="/demo">Demo</Link>
+    </p>
+    <p>
+      <Link to="/services">Services</Link>
+    </p>
   </>
-)
+);
 
 const Navbar = () => {
-const [toggleMenu, setToggleMenu] = useState(false);
+  const [toggleMenu, setToggleMenu] = useState(false);
 
   return (
     <div className="medisync__navbar">
@@ -32,23 +40,34 @@ const [toggleMenu, setToggleMenu] = useState(false);
         </div>
       </div>
       <div className="medisync__navbar-menu">
-        {toggleMenu
-          ? <RiCloseLine color="#460570" size={27} onClick={() => setToggleMenu(false)} />
-          : <RiMenu3Line color="#460570" size={27} onClick={() => setToggleMenu(true)} />
-        }
+        {toggleMenu ? (
+          <RiCloseLine
+            color="#460570"
+            size={27}
+            onClick={() => setToggleMenu(false)}
+          />
+        ) : (
+          <RiMenu3Line
+            color="#460570"
+            size={27}
+            onClick={() => setToggleMenu(true)}
+          />
+        )}
         {toggleMenu && (
           <div className="medisync__navbar-menu_container .scale-up-ver-top">
             <div className="medisync__navbar-menu_container-links">
               <Menu />
               <div className="medisync__navbar-menu_container-links-wallet">
-                <button type="button">Get Started</button>
+                <button type="button">
+                  <Link to="/dashboard">Get Started</Link>
+                </button>
               </div>
             </div>
           </div>
         )}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Navbar
\ No newline at end of file
+export default Navbar;
diff --git a/src/components/navbar/navbar.css b/src/components/navbar/navbar.css
index 3583f61..5c763e7 100644
--- a/src/components/navbar/navbar.css
+++ b/src/components/navbar/navbar.css
@@ -24,7 +24,6 @@
 
 .medisync__navbar-left img {
     position: relative;
-    width: 118.87px;
     height: 28.07px;
     padding-right: 100px;
 }
@@ -88,7 +87,7 @@
     color: #460570;
     background: #cecece;
     box-shadow: 0 0 2px #1B1A1A;
-    transition: 1s;
+    transition: 1s ease-in-out;
 }
 
 .medisync__navbar-menu {
diff --git a/src/containers/benefits/Benefits.jsx b/src/containers/benefits/Benefits.jsx
index e3f8546..22e8d4c 100644
--- a/src/containers/benefits/Benefits.jsx
+++ b/src/containers/benefits/Benefits.jsx
@@ -3,6 +3,7 @@ import './benefits.css';
 import Laptop from '../../assets/laptop.png'
 import Call from '../../assets/call.png'
 import Privacy from '../../assets/privacy.png'
+import { Link } from 'react-router-dom';
 
 const Benefits = () => {
   return (
@@ -23,7 +24,7 @@ const Benefits = () => {
             <img src={Laptop} alt="Laptop" />
           </div>
           <p>Save Your Health Records Online and Offline</p>
-          <button type='button'>Explore</button>
+            <Link to="/welcome"><button type='button'>Explore</button></Link>
         </div>
 
         <div className="medisync__benefits-tabs_tab">
@@ -31,7 +32,7 @@ const Benefits = () => {
             <img src={Call} alt="Call" />
           </div>
           <p>Connect  with a  Wallet</p>
-          <button type='button'>Explore</button>
+          <Link to="/welcome"><button type='button'>Explore</button></Link>
         </div>
 
         <div className="medisync__benefits-tabs_tab">
@@ -39,7 +40,7 @@ const Benefits = () => {
             <img src={Privacy} alt="Privacy" />
           </div>
           <p>Your Health Record protected with Blockchain security</p>
-          <button type='button'>Explore</button>
+          <Link to="/welcome"><button type='button'>Explore</button></Link>
         </div>
       </div>
     </div>
diff --git a/src/containers/benefits/benefits.css b/src/containers/benefits/benefits.css
index d37cd48..50ae969 100644
--- a/src/containers/benefits/benefits.css
+++ b/src/containers/benefits/benefits.css
@@ -53,7 +53,7 @@
 }
 
 .medisync__benefits-tabs_tab p {
-    font-weight: 500;
+    font-weight: 600;
     font-size: 14px;
     line-height: 20px;
     padding: 1rem 2rem;
diff --git a/src/containers/demo/Demo.jsx b/src/containers/demo/Demo.jsx
index 519b7e2..4690e3b 100644
--- a/src/containers/demo/Demo.jsx
+++ b/src/containers/demo/Demo.jsx
@@ -2,6 +2,8 @@ import React from 'react';
 import './demo.css';
 import Frame from '../../assets/frame.png';
 
+import { Link } from 'react-router-dom';
+
 const Demo = () => {
   return (
     <div className="medisync__demo_bg" 
@@ -14,7 +16,7 @@ const Demo = () => {
         symptoms, examination results and also share it with other authorized 
         wallet address despite location.It remains secure and safe with use of web3 and blockchain technology
       </p>
-      <button type='button'>Learn  About Web3</button>
+      <Link to="/web3"><button type='button'>Learn About Web3</button></Link>
     </div>
   )
 }
diff --git a/src/containers/feature/Feature.jsx b/src/containers/feature/Feature.jsx
new file mode 100644
index 0000000..0183d8a
--- /dev/null
+++ b/src/containers/feature/Feature.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import './feature.css';
+import Privacy from '../../assets/privacy.png';
+
+const Feature = () => {
+  return (
+    <div className="medisync__feature">
+      <div className="medisync__feature-privacy">
+        <div className="medisync__feature-image">
+          <img src={Privacy} alt="Privacy" />
+        </div>
+          <div className="medisync__feature-text">
+            <h1>Privacy</h1>
+            <p>Your data is private to you</p>
+          </div>
+      </div>
+
+      <div className="medisync__feature-privacy">
+        <div className="medisync__feature-image">
+          <img src={Privacy} alt="Privacy" />
+        </div>
+          <div className="medisync__feature-text">
+            <h1>Secured Data</h1>
+            <p>Save record with Web3</p>
+          </div>
+      </div>
+
+      <div className="medisync__feature-privacy">
+        <div className="medisync__feature-image">
+          <img src={Privacy} alt="Privacy" />
+        </div>
+          <div className="medisync__feature-text">
+          <h1>Share Record</h1>
+          <p>Share record with wallet Address</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Feature
\ No newline at end of file
diff --git a/src/containers/feature/feature.css b/src/containers/feature/feature.css
new file mode 100644
index 0000000..dd0c423
--- /dev/null
+++ b/src/containers/feature/feature.css
@@ -0,0 +1,60 @@
+.medisync__feature {
+    display: flex;
+    justify-content: space-evenly;
+    margin: 20px 40px;
+    padding: 21px 0;
+    font-family: var(--font-family);
+    border-radius: 5px;
+    background: #fff;
+    box-shadow: 0px 16px 32px rgba(190, 190, 190, 0.2);
+}
+
+.medisync__feature-privacy {
+    display: flex;
+    align-items: center;
+}
+
+.medisync__feature-image img{
+    width: 70px;
+    padding-right: 10px;
+}
+
+.medisync__feature-text h1 {
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 0px;
+    color: #460570;
+}
+
+.medisync__feature-text p {
+    font-weight: 400;
+    font-size: 16px;
+    color: #656462;
+}
+
+@media screen and (max-width: 1050px) {
+    .medisync__feature {
+        flex-direction: column;
+        padding: 30px;
+        margin: 20px 40px;
+    }
+
+    .medisync__feature-privacy {
+        padding: 10px;
+    }
+}
+
+@media screen and (max-width: 700px) {
+    .medisync__feature {
+        margin: 30px 0;
+        padding: 20px;
+    }
+
+    .medisync__feature-text h1 {
+        font-size: 16px;
+    }
+    
+    .medisync__feature-text p {
+        font-size: 12px;
+    }
+}
\ No newline at end of file
diff --git a/src/containers/feedback/Feedback.jsx b/src/containers/feedback/Feedback.jsx
index 52a34c1..fcf63a8 100644
--- a/src/containers/feedback/Feedback.jsx
+++ b/src/containers/feedback/Feedback.jsx
@@ -19,7 +19,6 @@ const Feedback = () => {
         </div>
         <div className="medisync__feedback_client-Name">
           <h1>Hope Atam <br/>Lifestyle Blogger</h1>
-          <p></p>
         </div>
       </div>
     </div>
diff --git a/src/containers/feedback/feedback.css b/src/containers/feedback/feedback.css
index a312af4..1118883 100644
--- a/src/containers/feedback/feedback.css
+++ b/src/containers/feedback/feedback.css
@@ -44,17 +44,11 @@
 .medisync__feedback_client-Name h1 {
     font-weight: 500;
     font-size: 20px;
+    line-height: 30px;
     text-align: center;
     color: #000000;
 }
 
-.medisync__feedback_client-Name p {
-    font-weight: 700;
-    font-size: 20px;
-    text-align: center;
-    color: #460570;
-}
-
 @media screen and (max-width: 1050px) {
     .medisync__feedback_client {
         margin: 0 4rem;
diff --git a/src/containers/footer/Footer.jsx b/src/containers/footer/Footer.jsx
index e37df4f..6782dee 100644
--- a/src/containers/footer/Footer.jsx
+++ b/src/containers/footer/Footer.jsx
@@ -1,11 +1,14 @@
 import React from 'react';
 import './footer.css';
+import { Link } from 'react-router-dom'
 
 import Logo from '../../assets/logo.png';
-import Facebook from '../../assets/facebook.png';
-import Twitter from '../../assets/twitter.png';
 import Linkedin from '../../assets/linkedin.png';
-import Instagram from '../../assets/instagram.png';
+import Whatsapp from '../../assets/whatsapp.png';
+
+// import Facebook from '../../assets/facebook.png';
+// import Twitter from '../../assets/twitter.png';
+// import Instagram from '../../assets/instagram.png';
 
 const Footer = () => {
   return (
@@ -19,26 +22,25 @@ const Footer = () => {
             Keep your health under control.
           </p>
           <div className="medisync__footer_sections_contact-icons">
+            <a href="https://wa.me/+2349061404988" target="blank"><img src={Whatsapp} alt="Whatsapp" /></a>
+            <a href="https://www.linkedin.com/in/medisync-incoporation-70616527a" target="blank"><img src={Linkedin} alt="Linkedin" /></a>
+            {/* <img src={Facebook} alt="Facebook" />
             <img src={Twitter} alt="Twitter" />
-            <img src={Facebook} alt="Facebook" />
-            <img src={Linkedin} alt="Linkedin" />
-            <img src={Instagram} alt="Instagram" />
+            <img src={Instagram} alt="Instagram" /> */}
           </div>
         </div>
 
         <div className="medisync__footer_sections_section">
           <h1>Company</h1>
-          <p>About Us</p>
-          <p>Pricing</p>
-          <p>Blog</p>
-          <p>Terms of Use</p>
+          <Link to="/about"><p>About Us</p></Link>
+          <Link to="/demo"><p>Demo</p></Link>
         </div>
 
         <div className="medisync__footer_sections_section">
-          <h1>Services</h1>
-          <p>Emergency Services</p>
-          <p>Secure data based platform</p>
-          <p>Qualified doctors</p>
+          <Link to="/services"><h1>Services</h1></Link>
+          <Link to="/services"><p>Privacy</p></Link>
+          <Link to="/services"><p>Anonymity</p></Link>
+          <Link to="/services"><p>Security</p></Link>
         </div>
 
       </div>
diff --git a/src/containers/footer/footer.css b/src/containers/footer/footer.css
index 1b29762..d105b73 100644
--- a/src/containers/footer/footer.css
+++ b/src/containers/footer/footer.css
@@ -19,11 +19,11 @@
     font-size: 16px;
     line-height: 28px;
     color: #000000;
-    padding: 0 0 0 24px;
+    padding: 0 0 0 31px;
 }
 
 .medisync__footer_sections_contact-icons {
-    padding: 0 0 0 24px;
+    padding: 0 0 0 25px;
 }
 
 .medisync__footer_sections_contact-icons img {
@@ -32,18 +32,28 @@
 
 .medisync__footer_sections_section h1 {
     font-weight: 400;
-    font-size: 32px;
+    font-size: 28px;
     line-height: 44px;
     letter-spacing: -0.02em;
     color: #000000;
 }
 
+.medisync__footer_sections_section h1:hover {
+    color: #919191;
+    transition: 1s;
+}
+
 .medisync__footer_sections_section p {
     font-weight: 500;
     font-size: 16px;
     line-height: 12px;
-    padding-left: 24px;
+    padding-left: 0;
+    color: #919191;
+}
+
+.medisync__footer_sections_section p:hover {
     color: #000000;
+    transition: 1s;
 }
 
 .medisync__footer-copyright {
diff --git a/src/containers/header/Header.jsx b/src/containers/header/Header.jsx
index 4eba91e..ac09fe0 100644
--- a/src/containers/header/Header.jsx
+++ b/src/containers/header/Header.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom'
 import './header.css';
 import Image1 from '../../assets/image1.png'
 
@@ -9,7 +10,7 @@ const Header = () => {
           <h1>Take your Medical record to the next level with Web3 Technology.</h1>
           <p>Medisync simplifies healthcare by  collecting data , processing it and saving on the blockchain</p>
           <div className="medisync__header-content__demo">
-            <button type='button'>Request for Demo</button>
+          <Link to="/demo"><button type='button'>Request for Demo</button></Link>
           </div>
         </div>
 
diff --git a/src/containers/index.js b/src/containers/index.js
index 7fbd365..a3d2a7c 100644
--- a/src/containers/index.js
+++ b/src/containers/index.js
@@ -6,4 +6,11 @@ export { default as Header } from './header/Header';
 export { default as Joinus } from './joinus/Joinus';
 export { default as Whyus } from './whyus/Whyus';
 export { default as Ourservices } from './ourservices/Ourservices';
-export { default as Aboutus } from './aboutus/Aboutus';
\ No newline at end of file
+export { default as Aboutus } from './aboutus/Aboutus';
+export { default as Whatweb3 } from './whatweb3/Whatweb3';
+export { default as Thedemo } from './thedemo/Thedemo';
+export { default as Feature } from './feature/Feature';
+export { default as Navbar } from './navbar/Navbar';
+export { default as Welcomepage } from './welcomepage/Welcomepage';
+export { default as Registerpage } from './registerpage/Registerpage';
+export { default as Loginpage } from './loginpage/Loginpage';
\ No newline at end of file
diff --git a/src/containers/joinus/Joinus.jsx b/src/containers/joinus/Joinus.jsx
index 54c993f..ff6136a 100644
--- a/src/containers/joinus/Joinus.jsx
+++ b/src/containers/joinus/Joinus.jsx
@@ -1,15 +1,31 @@
-import React from 'react';
+import { useRef } from 'react';
+import emailjs from '@emailjs/browser';
 import './joinus.css';
 
 const Joinus = () => {
+    const form = useRef()
+
+    const sendEmail = (e) => {
+    e.preventDefault();
+
+      emailjs.sendForm('service_6qqzkpp', 'template_aua4rvl', form.current, 'GJo2Q12wkHi0pT6Wu')
+        .then((result) => {
+            console.log(result.text);
+        }, (error) => {
+            console.log(error.text);
+        });
+        e.target.reset()
+    };
   return (
     <div className="medisync__joinus">
       <h2>Newsletter</h2>
       <h1>JOIN US</h1>
       <p>Get informed about our latest services or product</p>
       <div className="medisync__joinus_input">
-        <input type='email' placeholder='Your email'/>
-        <button type='button'>Subscribe</button>
+        <form ref={form} onSubmit={sendEmail}>
+          <input type='email' placeholder='Your email' name='user_email' required/>
+          <button type='submit'>Subscribe</button>
+        </form>
       </div>
     </div>
   )
diff --git a/src/containers/joinus/joinus.css b/src/containers/joinus/joinus.css
index 31133bb..c387396 100644
--- a/src/containers/joinus/joinus.css
+++ b/src/containers/joinus/joinus.css
@@ -42,34 +42,35 @@ a {
 .medisync__joinus_input {
     display: flex;
     justify-content: center;
+    align-items: center;
+    
 }
 
-.medisync__joinus_input input {
+.medisync__joinus_input form input {
     min-height: 50px;
+    min-width: 300px;
     background: #FFFFFF;
     border: 1px solid #CBCAC8;
     border-radius: 5px 0 0 5px;
     font-weight: 400;
     font-size: 14px;
-    line-height: 27px;
     color: #656462;
-    padding: 0 200px 0 20px;
+    padding: 0 50px 0 20px;
+    margin: 0;
 }
 
-.medisync__joinus_input button {
+.medisync__joinus_input form button {
     min-height: 50px;
     background: #460570;
-    border-left: 1px solid #CBCAC8;
-    border-top: 1px solid #CBCAC8;
-    border-bottom: 1px solid #CBCAC8;
+    border: 1px solid #CBCAC8;
     border-radius: 0px 5px 5px 0px;
-    font-weight: 400;
+    font-weight: 500;
     font-size: 14px;
     line-height: 28px;
     text-align: center;
     letter-spacing: 0.2px;
     color: #FFFFFF;
-    padding: 0 60px;
+    padding: 0 50px;
 }
 
 @media screen and (max-width: 650px) {
diff --git a/src/containers/loginpage/Loginpage.jsx b/src/containers/loginpage/Loginpage.jsx
new file mode 100644
index 0000000..732203f
--- /dev/null
+++ b/src/containers/loginpage/Loginpage.jsx
@@ -0,0 +1,174 @@
+import React, { useState } from "react";
+import "./loginpage.css";
+import { Link } from "react-router-dom";
+import Logo from "../../assets/logo.png";
+import Welcome from "../../assets/welcome.png";
+import state from "../../store/Index";
+import { useSnapshot } from "valtio";
+
+const Loginpage = () => {
+  // const [email, setEmail] = useState('');
+  // const [password, setPassword] = useState('');
+  // const [error, setError] = useState('');
+
+  // const handleSubmit = async (e) => {
+  //   e.preventDefault();
+
+  //   try {
+  //     const response = await axios.post('https://medisync-instance.onrender.com/api/v1/user/login', {
+  //       email,
+  //       password
+  //     });
+
+  //     // Handle the successful login response
+  //     console.log(response.data);
+  //   } catch (error) {
+  //     // Handle the error
+  //     setError('Invalid email or password');
+  //   }
+
+  // };
+
+  const [loginDetails, setLoginDetails] = useState({
+    email: "",
+    password: "",
+  });
+
+  const [profile, setProfile] = useState();
+
+  const snap = useSnapshot(state);
+
+  const handleChange = (ev) => {
+    setLoginDetails({
+      ...loginDetails,
+      [ev.target.name]: ev.target.value,
+    });
+  };
+  console.log({ loginDetails });
+  // console.log(profile);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    fetch("https://medisync-instance.onrender.com/api/v1/user/login", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Access-Control-Allow-Origin": "*",
+      },
+      body: JSON.stringify(loginDetails),
+    })
+      .then((response) => {
+        return response.json();
+      })
+      .then((res) => {
+        snap.userData = res.data.user;
+      })
+      .catch((err) => {
+        console.log("Not sent", err);
+      });
+  };
+
+  // I cmmented this off because it was affecting the Dashboard page
+  //  const userid = localStorage.setItem("id",loginDetails.data)
+  // // console.log(userid)
+
+  return (
+    <div className="medisync__loginpage">
+      <div className="medisync__loginpage-logo">
+        <Link to="/">
+          <img src={Logo} alt="Logo" />
+        </Link>
+      </div>
+      <div className="medisync__loginpage-body">
+        <div className="medisync__loginpage-body_form">
+          <h1>Login</h1>
+
+          <form className="login-form" onSubmit={handleSubmit}>
+            <label htmlFor="email">Email</label>
+            <input
+              value={loginDetails.email}
+              onChange={handleChange}
+              type="email"
+              id="email"
+              name="email"
+              required
+            />
+
+            <label htmlFor="password">Password</label>
+            <input
+              value={loginDetails.password}
+              onChange={handleChange}
+              type="password"
+              id="password"
+              name="password"
+              required
+            />
+            <button type="submit">Login</button>
+
+            {
+              // (signupDetails.status==="fail") ?
+              // (<span className="successful">{signupDetails.message}</span>) :
+              // (<span className="successful">{signupDetails.status}</span>)
+              loginDetails.status === "success" ? (
+                <Link to="/dashboard/connectwallet">
+                  <button type="submit">Connect Wallet</button>
+                </Link>
+              ) : (
+                <span className="successful">{loginDetails.message}</span>
+              )
+            }
+          </form>
+          <Link to="/register">
+            <button className="medisync__loginpage-login">
+              Don’t have an account? <span>SIGN UP</span>
+            </button>
+          </Link>
+        </div>
+        <div className="medisync__loginpage-body_image">
+          <img src={Welcome} alt="Welcome" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// const Loginpage = (props) => {
+//   const [email, setEmail] = useState('');
+//   const [pass, setPass] = useState('');
+
+//   const handleSubmit = (e) => {
+//       e.preventDefault();
+//       console.log(email);
+//   }
+
+//   return (
+//     <div className="medisync__loginpage">
+//       <div className="medisync__loginpage-logo">
+//         <img src={Logo} alt="Logo"/>
+//       </div>
+//       <div className="medisync__loginpage-body">
+//         <div className="medisync__loginpage-body_form">
+//           <h1>Login</h1>
+
+//           <form className='login-form' onSubmit={handleSubmit}>
+
+//             <label htmlFor="email">Email</label>
+//               <input value={email} onChange={(e) => setEmail(e.target.value)} type="email" id="email" name="email" />
+
+//             <label htmlFor="password">Password</label>
+//               <input value={pass} onChange={(e) => setPass(e.target.value)} type="password" id="password" name="password" />
+//             <button type="submit">Login</button>
+//           </form>
+//           <Link to="/register">
+//             <button className='medisync__loginpage-login'>Don’t have an account? Sign up</button>
+//           </Link>
+//         </div>
+//         <div className="medisync__loginpage-body_image">
+//           <img src={Welcome} alt='Welcome'/>
+//         </div>
+//       </div>
+//     </div>
+//   )
+// }
+
+export default Loginpage;
diff --git a/src/containers/loginpage/loginpage.css b/src/containers/loginpage/loginpage.css
new file mode 100644
index 0000000..1f1884b
--- /dev/null
+++ b/src/containers/loginpage/loginpage.css
@@ -0,0 +1,145 @@
+body {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.medisync__loginpage {
+    background: #F1E6F8;
+    padding: 40px;
+    font-family: var(--font-family);
+}
+
+.medisync__loginpage-body {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.medisync__loginpage-body_form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 80px;
+}
+
+.medisync__loginpage-body_form h1 {
+    font-weight: 700;
+    font-size: 36px;
+    line-height: 30px;
+    letter-spacing: -0.02em;
+    color: #7209B7;
+    margin: 0;
+}
+
+.login-form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.login-form label {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 28px;
+    text-align: left;
+    color: #C59AE1;
+}
+
+.login-form input {
+    width: 375px;
+    height: 35px;
+    background: #F1E6F8;
+    border: 2px solid #9412ED;
+    border-radius: 8px;
+    margin-bottom: 10px;
+
+    font-weight: 400;
+    padding-left: 10px;
+    font-size: 14px;
+    line-height: 28px;
+    text-align: left;
+    color: #4e4e4e;
+}
+
+.login-form input:hover {
+    border: 2px solid #ffffff;
+    transition: 0.6s;
+}
+
+.login-form button {
+    width: 385px;
+    height: 40px;
+    background: #8A33C3;
+    border: none;
+    border-radius: 8px;
+
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 28px;
+    text-align: center;
+    color: #F1E6F8;
+    margin-top: 20px;
+    cursor: pointer;
+}
+
+.login-form button:hover {
+    background: #bbbbbb;
+    color: #8A33C3;
+    transition: 0.6s;
+}
+
+.medisync__loginpage-login {
+    display: flex;
+    gap: 5px;
+    background: none;
+    color: #6b6b6b;
+    border: none;
+    margin: 5px 0;
+}
+
+.medisync__loginpage-login span {
+    font-weight: 600;
+    color: #7209B7;
+    cursor: pointer;
+}
+
+.medisync__loginpage-body_image {
+    min-width: 50%;
+}
+
+.medisync__loginpage-body_image img {
+    max-width: 100%;
+}
+
+@media screen and (max-width: 1100px) {
+    .medisync__loginpage-body {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-direction: column;
+    }
+    
+    .medisync__loginpage-body_image img {
+        max-width: 100%;
+        border-radius: 20px;
+    }
+
+    .medisync__loginpage-body_form {
+        padding: 30px 80px;
+    }
+}
+
+@media screeen and (max-width: 490px) {
+    .medisync__loginpage {
+        padding: 10px;
+    }
+
+    .login-form input {
+        width: 200px;
+    }
+
+    .login-form button {
+        width: 200px;
+    }
+}
\ No newline at end of file
diff --git a/src/containers/navbar/Navbar.jsx b/src/containers/navbar/Navbar.jsx
new file mode 100644
index 0000000..a2e6d27
--- /dev/null
+++ b/src/containers/navbar/Navbar.jsx
@@ -0,0 +1,56 @@
+import React, {useState} from 'react';
+import { RiMenu3Line, RiCloseLine } from 'react-icons/ri';
+import logo from '../../assets/logo.png';
+import './navbar.css';
+import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
+
+const Menu = () => (
+  <>
+  <p><NavLink exact to="/" activeClassName="active">Home</NavLink></p>
+  {/* <p><NavLink to="/home"  activeClassName="active">Home</NavLink></p> */}
+  <p><NavLink to="/about"  activeClassName="active">About</NavLink></p>
+  <p><NavLink to="/demo"  activeClassName="active">Demo</NavLink></p>
+  <p><NavLink to="/services"  activeClassName="active">Services</NavLink></p>
+  </>
+)
+
+const Navbar = () => {
+const [toggleMenu, setToggleMenu] = useState(false);
+
+  return (
+    <div className="medisync__navbar">
+      <div className="medisync__navbar-container">
+        <div className="medisync__navbar-left">
+          <img src={logo} alt="logo" />
+
+          <div className="medisync__navbar-links">
+            <Menu />
+          </div>
+        </div>
+
+        <div className="medisync__navbar-right">
+          <Link to="/welcome"><button type="button">Get Started</button></Link>
+        </div>
+      </div>
+      <div className="medisync__navbar-menu">
+        {toggleMenu
+          ? <RiCloseLine color="#460570" size={27} onClick={() => setToggleMenu(false)} />
+          : <RiMenu3Line color="#460570" size={27} onClick={() => setToggleMenu(true)} />
+        }
+        {toggleMenu && (
+          <div className="medisync__navbar-menu_container .scale-up-ver-top">
+            <div className="medisync__navbar-menu_container-links">
+              <Menu />
+              <div className="medisync__navbar-menu_container-links-wallet">
+                <Link to="/welcome"><button type="button">Get Started</button></Link>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Navbar
\ No newline at end of file
diff --git a/src/containers/navbar/navbar.css b/src/containers/navbar/navbar.css
new file mode 100644
index 0000000..6158a69
--- /dev/null
+++ b/src/containers/navbar/navbar.css
@@ -0,0 +1,160 @@
+.medisync__navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 13px 40px;
+    background: #f6f6f6;
+    font-family: var(--font-family);
+    
+}
+
+.medisync__navbar-container {
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.medisync__navbar-left {
+    display: flex;
+    justify-content: flex-start;
+    padding-right: 0px;
+    align-items: center;
+}
+
+.medisync__navbar-left img {
+    position: relative;
+    width: 118.87px;
+    height: 28.07px;
+    padding-right: 100px;
+}
+
+.medisync__navbar-links {
+    display: flex;
+    justify-content: flex;
+}
+
+.medisync__navbar-links p {
+    color: #1B1A1A;
+    font-family: var(--font-family);
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 28px;
+    padding-left: 56px;
+    cursor: pointer;
+}
+
+.medisync__navbar-menu_container p {
+    color: #1B1A1A;
+    font-family: var(--font-family);
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 28px;
+    padding: 0 20px;
+
+    cursor: pointer;
+}
+
+.medisync__navbar-links p:hover,
+.medisync__navbar-menu_container p:hover {
+    color: #460570;
+    font-weight: 700;
+    transition: 2s;
+    transform-style: flats;
+}
+
+.medisync__navbar-right button,
+.medisync__navbar-menu_container-links-wallet button {
+    padding: 10px 55px;
+    color: #fff;
+    font-family: var(--font-family);
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 32px;
+    background: #460570;
+    border-radius: 8px;
+    border: none;
+    outline: none;
+    cursor: pointer;
+}
+
+.medisync__navbar-right button:hover,
+.medisync__navbar-menu_container-links-wallet button:hover {
+    color: #460570;
+    background: #cecece;
+    box-shadow: 0 0 2px #1B1A1A;
+    transition: 1s;
+}
+
+.medisync__navbar-menu {
+    position: relative;
+    display: none;
+}
+
+.medisync__navbar-menu svg {
+    cursor: pointer;
+}
+
+.medisync__navbar-menu_container {
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+    flex-direction: column;
+
+    text-align: end;
+    background: #fff;
+    padding: 10px;
+    position: absolute;
+    top: 100px;
+    right: 0;
+    margin-top: 1rem;
+    border-radius: 5px;
+    box-shadow: 0 0 5 rgba(0,0,0,0.2)
+}
+
+.medisync__navbar-menu_container-links button {
+    padding: 7px 10px;
+    font-size: 15px;
+}
+
+.medisync__navbar-menu_container p {
+    margin: 1rem 0;
+}
+
+.medisync__navbar-menu_container-links-wallet {
+    display: none;
+}
+
+.active {
+    color: #530885;
+    font-weight: 700;
+}
+
+@media screen and (max-width: 1050px) {
+    .medisync__navbar-links {
+        display: none;
+    }
+
+    .medisync__navbar-menu {
+        display: flex;
+    }
+}
+
+@media screen and (max-width: 650px) {
+    .medisync__navbar {
+        padding: 20px 10px;
+    }
+
+    .medisync__navbar-right {
+        display: none;
+    }
+
+    .medisync__navbar-menu_container {
+        top: 40px;
+    }
+
+    .medisync__navbar-menu_container-links-wallet {
+        display: block;
+    }
+}
\ No newline at end of file
diff --git a/src/containers/ourservices/ourservices.css b/src/containers/ourservices/ourservices.css
index ef75bad..ba15c1a 100644
--- a/src/containers/ourservices/ourservices.css
+++ b/src/containers/ourservices/ourservices.css
@@ -39,7 +39,7 @@
 .medisync__ourservices_tabs-tab p {
     font-weight: 500;
     font-size: 16px;
-    line-height: 22px;
+    line-height: 30px;
     color: #000000;
 }
 
diff --git a/src/containers/registerpage/Registerpage.jsx b/src/containers/registerpage/Registerpage.jsx
new file mode 100644
index 0000000..9f7048b
--- /dev/null
+++ b/src/containers/registerpage/Registerpage.jsx
@@ -0,0 +1,223 @@
+import React, { useState } from "react";
+import "./registerpage.css";
+import { Link } from "react-router-dom";
+import Logo from "../../assets/logo.png";
+import Welcome from "../../assets/welcome.png";
+
+// import axios from 'axios';
+
+const Registerpage = () => {
+  // const [name, setName] = useState('');
+  // const [email, setEmail] = useState('');
+  // const [password, setPassword] = useState('');
+  // const [error, setError] = useState('');
+
+  // const handleSignup = async (e) => {
+  //   e.preventDefault();
+
+  //   try {
+  //     const response = await axios.post('https://medisync-instance.onrender.com/api/v1/user/signup', {
+  //       name,
+  //       email,
+  //       password
+  //     });
+
+  //     console.log(response.data); // Handle the successful response here
+
+  //     // Reset the form
+  //     setName('');
+  //     setEmail('');
+  //     setPassword('');
+  //     setError('');
+  //   } catch (error) {
+  //     console.error(error);
+  //     setError('An error occurred. Please try again.'); // Handle the error here
+  //   }
+  // };
+
+  const [signupDetails, setSignupDetails] = useState({
+    firstName: "",
+    lastName: "",
+    email: "",
+    password: "",
+    confirmPassword: "",
+  });
+
+  const handleChange = (ev) => {
+    setSignupDetails({
+      ...signupDetails,
+      [ev.target.name]: ev.target.value,
+    });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    const data = {
+      firstName: signupDetails.firstName,
+      lastName: signupDetails.lastName,
+      email: signupDetails.email,
+      password: signupDetails.password,
+      confirmPassword: signupDetails.confirmPassword,
+    };
+
+    fetch("https://medisync-instance.onrender.com/api/v1/user/signup", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Access-Control-Allow-Origin": "*",
+      },
+      body: JSON.stringify(data),
+    })
+      .then((response) => {
+        return response.json();
+      })
+      .then((data) => {
+        // console.log(data)
+        setSignupDetails(data);
+      })
+      .catch((err) => {
+        console.log("Not sent", err);
+      });
+  };
+
+  const userid = localStorage.setItem("id", signupDetails.data);
+  // console.log(userid)
+
+  return (
+    <div>
+      <div className="medisync__registerpage">
+        <div className="medisync__registerpage-logo">
+          <Link to="/">
+            <img src={Logo} alt="Logo" />
+          </Link>
+        </div>
+        <div className="medisync__registerpage-body">
+          <div className="medisync__registerpage-body_form">
+            <h1>Get Started</h1>
+            <p>Fill the form below to sign up</p>
+
+            <form className="register-form" onSubmit={handleSubmit}>
+              <label htmlFor="firstName">First Name</label>
+              <input
+                value={signupDetails.firstName}
+                onChange={handleChange}
+                type="text"
+                id="firstName"
+                name="firstName"
+                required
+              />
+
+              <label htmlFor="LastName">Last Name</label>
+              <input
+                value={signupDetails.lastName}
+                onChange={handleChange}
+                type="text"
+                id="lastName"
+                name="lastName"
+                required
+              />
+
+              <label htmlFor="email">Email</label>
+              <input
+                value={signupDetails.email}
+                onChange={handleChange}
+                type="email"
+                id="email"
+                name="email"
+                required
+              />
+
+              <label htmlFor="password">Password</label>
+              <input
+                value={signupDetails.password}
+                onChange={handleChange}
+                type="password"
+                id="password"
+                name="password"
+                required
+              />
+
+              <label htmlFor="confirmPassword">Confirm Password</label>
+              <input
+                value={signupDetails.confirmPassword}
+                onChange={handleChange}
+                type="password"
+                id="confirmPassword"
+                name="confirmPassword"
+                required
+              />
+              <button type="submit">Sign Up</button>
+
+              {/* <span className="successful">{signupDetails.message}</span> */}
+              {
+                // (signupDetails.status==="fail") ?
+                // (<span className="successful">{signupDetails.message}</span>) :
+                // (<span className="successful">{signupDetails.status}</span>)
+                signupDetails.status === "success" ? (
+                  <Link to="/dashboard/connectwallet">
+                    <button type="submit">Connect Wallet</button>
+                  </Link>
+                ) : (
+                  <span className="successful">{signupDetails.message}</span>
+                )
+              }
+            </form>
+            <Link to="/login">
+              <button className="medisync__registerpage-login">
+                Already have an Account? <span>LOGIN</span>
+              </button>
+            </Link>
+            {/* {error && <p>{error}</p>} */}
+          </div>
+          <div className="medisync__registerpage-body_image">
+            <img src={Welcome} alt="Welcome" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  // const Registerpage = (props) => {
+  //   const [email, setEmail] = useState('');
+  //   const [pass, setPass] = useState('');
+  //   const [name, setName] = useState('');
+
+  //   const handleSubmit = (e) => {
+  //       e.preventDefault();
+  //       console.log(email);
+  //   }
+
+  //   return (
+  //     <div className="medisync__registerpage">
+  //       <div className="medisync__registerpage-logo">
+  //         <img src={Logo} alt="Logo"/>
+  //       </div>
+  //       <div className="medisync__registerpage-body">
+  //         <div className="medisync__registerpage-body_form">
+  //           <h1>Get Started</h1>
+  //           <p>Fill the form below to sign up</p>
+  //           <form className='register-form' onSubmit={handleSubmit}>
+  //             <label htmlFor="name">Full Name</label>
+  //               <input value={name} onChange={(e) => setName(e.target.value)} type="text" id="name" name="name" />
+
+  //             <label htmlFor="email">Email</label>
+  //               <input value={email} onChange={(e) => setEmail(e.target.value)} type="email" id="email" name="email" />
+
+  //             <label htmlFor="password">Password</label>
+  //               <input value={pass} onChange={(e) => setPass(e.target.value)} type="password" id="password" name="password" />
+  //             <button type="submit">Sign Up</button>
+  //           </form>
+  //           <Link to="/login">
+  //             <button className='medisync__registerpage-login'>Already have an Account? Log in</button>
+  //           </Link>
+  //         </div>
+  //         <div className="medisync__registerpage-body_image">
+  //           <img src={Welcome} alt='Welcome'/>
+  //         </div>
+  //       </div>
+  //     </div>
+  //   )
+};
+
+export default Registerpage;
diff --git a/src/containers/registerpage/registerpage.css b/src/containers/registerpage/registerpage.css
new file mode 100644
index 0000000..e0c4b00
--- /dev/null
+++ b/src/containers/registerpage/registerpage.css
@@ -0,0 +1,152 @@
+body {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.medisync__registerpage {
+    background: #F1E6F8;
+    padding: 40px;
+    font-family: var(--font-family);
+}
+
+.medisync__registerpage-body {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.medisync__registerpage-body_form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 80px;
+}
+
+.medisync__registerpage-body_form h1 {
+    font-weight: 700;
+    font-size: 36px;
+    line-height: 30px;
+    letter-spacing: -0.02em;
+    color: #7209B7;
+    margin: 0;
+}
+
+.medisync__registerpage-body_form p {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 20px;
+    text-align: center;
+    color: #747474;
+}
+
+.register-form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.register-form label {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 28px;
+    text-align: left;
+    color: #C59AE1;
+}
+
+.register-form input {
+    width: 375px;
+    height: 35px;
+    background: #F1E6F8;
+    border: 2px solid #9412ED;
+    border-radius: 8px;
+    margin-bottom: 10px;
+
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 28px;
+    text-align: left;
+    color: #777777;
+    padding-left: 15px;
+}
+
+.register-form input:hover {
+    border: 2px solid #ffffff;
+    transition: 1s;
+}
+
+.register-form button {
+    width: 395px;
+    height: 40px;
+    background: #8A33C3;
+    border: none;
+    border-radius: 8px;
+
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 28px;
+    text-align: center;
+    color: #F1E6F8;
+    margin-top: 20px;
+    cursor: pointer;
+}
+
+.register-form button:hover {
+    background: #c9c9c9;
+    color: #383838;
+}
+
+.medisync__registerpage-login {
+    display: flex;
+    gap: 5px;
+    background: none;
+    color: #6b6b6b;
+    border: none;
+    margin: 5px 0;
+}
+
+.medisync__registerpage-login span {
+    font-weight: 600;
+    color: #7209B7;
+    cursor: pointer;
+}
+
+.medisync__registerpage-body_image {
+    min-width: 50%;
+}
+
+.medisync__registerpage-body_image img {
+    max-width: 100%;
+}
+
+@media screen and (max-width: 1100px) {
+    .medisync__registerpage-body {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        flex-direction: column;
+    }
+    
+    .medisync__registerpage-body_image img {
+        max-width: 100%;
+        border-radius: 20px;
+    }
+
+    .medisync__registerpage-body_form {
+        padding: 30px 80px;
+    }
+}
+
+@media screeen and (max-width: 490px) {
+    .medisync__registerpage {
+        padding: 10px;
+    }
+
+    .register-form input {
+        width: 200px;
+    }
+
+    .register-form button {
+        width: 200px;
+    }
+}
\ No newline at end of file
diff --git a/src/containers/thedemo/Thedemo.jsx b/src/containers/thedemo/Thedemo.jsx
new file mode 100644
index 0000000..cff082a
--- /dev/null
+++ b/src/containers/thedemo/Thedemo.jsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import './thedemo.css'
+
+const Thedemo = () => {
+  return (
+    <div className="demo">
+        <hr />
+        <div className="medisync__thedemo">
+            <h1>Demo Video</h1>
+            <iframe src="https://youtu.be/FExp9YuTzbY" title="Demo Video" allowFullScreen></iframe>
+        </div>
+    </div>
+  )
+}
+
+export default Thedemo
\ No newline at end of file
diff --git a/src/containers/thedemo/thedemo.css b/src/containers/thedemo/thedemo.css
new file mode 100644
index 0000000..7bd7d5a
--- /dev/null
+++ b/src/containers/thedemo/thedemo.css
@@ -0,0 +1,13 @@
+.medisync__thedemo {
+    font-family: var(--font-family);
+    padding: 60px 40px;
+}
+
+.medisync__thedemo h1 {
+    text-align: center;
+    padding-bottom: 20px;
+}
+
+.medisync__thedemo iframe {
+    width: 100%;
+}
\ No newline at end of file
diff --git a/src/containers/welcomepage/Welcomepage.jsx b/src/containers/welcomepage/Welcomepage.jsx
new file mode 100644
index 0000000..e475576
--- /dev/null
+++ b/src/containers/welcomepage/Welcomepage.jsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import './welcomepage.css'
+import { Link } from 'react-router-dom'
+import Logo from '../../assets/logo.png'
+import Welcome from '../../assets/welcome.png'
+
+const Welcomepage = () => {
+  return (
+    <div className="medisync__welcomepage">
+      <div className="medisync__welcomepage-logo">
+        <Link to="/"><img src={Logo} alt="Logo"/></Link>
+      </div>
+      <div className="medisync__welcomepage-body">
+        <div className="medisync__welcomepage-body_text">
+          <h1>Welcome!</h1>
+          <h2>Connect as a user </h2>
+          <p>Are you a user looking forward to accessing your medical records at anytime despite your location?</p>
+          <Link to="/register"><button type="button">Join as a User</button></Link>
+        </div>
+        <div className="medisync__welcomepage-body_image">
+          <img src={Welcome} alt='Welcome'/>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Welcomepage
\ No newline at end of file
diff --git a/src/containers/welcomepage/welcomepage.css b/src/containers/welcomepage/welcomepage.css
new file mode 100644
index 0000000..893b927
--- /dev/null
+++ b/src/containers/welcomepage/welcomepage.css
@@ -0,0 +1,131 @@
+body {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.medisync__welcomepage {
+    background: #F1E6F8;
+    padding: 40px;
+    font-family: var(--font-family);
+}
+
+.medisync__welcomepage-body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.medisync__welcomepage-body_text {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 80px;
+}
+
+.medisync__welcomepage-body_text h1 {
+    font-weight: 700;
+    font-size: 36px;
+    line-height: 30px;
+    margin: 0;
+    letter-spacing: -0.02em;
+    color: #7209B7;
+    text-align: center;
+}
+
+.medisync__welcomepage-body_text h2 {
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 70px;
+    margin: 0;
+    text-align: center;
+    color: #4d4d4d;
+}
+
+.medisync__welcomepage-body_text p {
+    font-weight: 500;
+    font-size: 18px;
+    margin: 0;
+    line-height: 32px;
+    padding-bottom: 40px;
+    text-align: center;
+    color: #6b6b6b;
+}
+
+.medisync__welcomepage-body_text button {
+    padding: 12px 55px;
+    margin: 0 auto;
+    background: #8A33C3;
+    border: none;
+    outline: none;
+    box-shadow: 0px 2px 4px rgba(190, 190, 190, 0.2);
+    border-radius: 8px;
+
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 32px;
+    color: #FFFFFF;
+}
+
+.medisync__welcomepage-body_image {
+    min-width: 50%;
+}
+
+.medisync__welcomepage-body_image img {
+    max-width: 100%;
+}
+
+@media screen and (max-width: 1050px) {
+    .medisync__welcomepage-body {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+    
+    }
+
+    .medisync__welcomepage-body_text {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 30px 80px;
+    }
+
+    .medisync__welcomepage-body_image img {
+        border-radius: 20px;
+    }
+}
+
+@media screen and (max-width: 550px) {
+    .medisync__welcomepage {
+        padding: 10px;
+    }
+
+    .medisync__welcomepage-body_text h1 {
+        font-size: 24px;
+        line-height: 40px;
+    }
+    
+    .medisync__welcomepage-body_text h2 {
+        font-size: 18px;
+        line-height: 60px;
+    }
+    
+    .medisync__welcomepage-body_text p {
+        font-size: 12px;
+        padding-bottom: 20px;
+        line-height: 20px;
+    }
+    
+    .medisync__welcomepage-body_text button {
+        padding: 10px 55px;
+        font-size: 14px;
+    }
+
+    .medisync__welcomepage-body_text {
+        padding: 30px 40px;
+    }
+
+    
+    
+}
\ No newline at end of file
diff --git a/src/containers/whatweb3/Whatweb3.jsx b/src/containers/whatweb3/Whatweb3.jsx
new file mode 100644
index 0000000..ba0de35
--- /dev/null
+++ b/src/containers/whatweb3/Whatweb3.jsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import './whatweb3.css'
+import Web3 from '../../assets/web3.png';
+
+const Whatweb3 = () => {
+  return (
+    <div className="web3">
+        <hr />
+        <div className="medisync__whatweb3">
+            <div className="medisync__whatweb3-text">
+                <h1>WHAT IS BLOCKCHAIN?</h1>
+                    <p>
+                        Blockchain is a decentralized technology that supports a secure and transparent 
+                        record-keeping system. Medsync is developed with Blockchain technology because
+                        we value our users privacy and overall security.  
+                        Connecting to your wallet gives you total control over your data stored on the blockchain as 
+                        you will be able to determine who has access to it and when the person can access it.
+                    </p>
+
+                <h1>WHAT IS A WALLET?</h1>
+                    <p>
+                        A blockchain wallet is a unique and private digital wallet that is used by a user(patient) 
+                        to store data on the blockchain. You can think of it as your bank account (Blockchain wallet) 
+                        that allows you to store money(your data) in the bank(the blockchain).
+                    </p>
+
+                <h1>WHAT IS A WALLET ADDRESS?</h1>
+                    <p>
+                        A wallet address serves as a unique identifier associated with a your digital wallet on the blockchain, 
+                        ensuring secure storage and transfer of digital assets. Having your data on Medsync, blockchain and wallet 
+                        addresses enhance privacy, data integrity, and  control(mostly as a patient). Your overall data can be securely stored, 
+                        accessed, and shared, while wallet addresses grant You ownership of their health information. This empowers You to 
+                        control who can access their data, promoting trust, and efficient healthcare processes within our decentralized EHR ecosystem.
+                    </p>
+            </div>
+            <div className="medisync__whatweb3-image">
+                <img src={ Web3 } alt='Web3' />
+            </div>
+        </div>
+    </div>
+  )
+}
+
+export default Whatweb3
\ No newline at end of file
diff --git a/src/containers/whatweb3/whatweb3.css b/src/containers/whatweb3/whatweb3.css
new file mode 100644
index 0000000..2cd4b94
--- /dev/null
+++ b/src/containers/whatweb3/whatweb3.css
@@ -0,0 +1,60 @@
+.medisync__whatweb3 {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 60px 40px;
+    font-family: var(--font-family);
+}
+
+.medisync__whatweb3-image img {
+
+}
+
+.medisync__whatweb3-text h1 {
+    font-weight: 600;
+    font-size: 30px;
+    line-height: 44px;
+    letter-spacing: -0.02em;
+    color: #1CB335;
+}
+
+.medisync__whatweb3-text p {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 28px;
+    text-align: justify;
+    color: #1B1A1A;
+    padding-right: 60px;
+}
+
+@media screen and (max-width: 1050px) {
+    .medisync__whatweb3 {
+        flex-wrap: wrap;
+    }
+    
+    .medisync__whatweb3-text p {
+        padding-right: 0;
+    }
+}
+
+@media screen and (max-width: 750px) {
+    .medisync__whatweb3-image img {
+        max-width: 100%;
+    }
+}
+
+@media screen and (max-width:490px) {
+    .medisync__whatweb3 {
+        padding: 40px 10px;
+    }
+
+    .medisync__whatweb3-text h1 {
+        font-size: 22px;
+        line-height: 20px;
+    }
+    
+    .medisync__whatweb3-text p {
+        font-size: 12px;
+        line-height: 26px;
+    }
+}
\ No newline at end of file
diff --git a/src/css/medical.css b/src/css/medical.css
new file mode 100644
index 0000000..57dfaae
--- /dev/null
+++ b/src/css/medical.css
@@ -0,0 +1,78 @@
+.medical-records {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+/* form {
+    display: flex;
+    gap: 20px;
+} */
+  
+.date {
+    display: flex;
+    gap: 10px;
+}
+
+.from,
+.to {
+    border: 1px solid grey;
+    border-radius: 5px;
+    padding: 7px;
+    width: 120px;
+    font-size: 14px;
+    color: grey;
+}
+
+.details {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    width: 100%;
+}
+
+.symptoms,
+.sickness,
+.medication {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin: 20px 70px 0 0;
+    width: 60%;
+}
+
+.symptoms h4 {
+    font-size: 20px;
+}
+
+#symptoms_card {
+    border: 1px solid lightgray;
+    border-radius: 5px;
+    width: 100%;
+    padding: 15px;
+    box-shadow: 5px 5px 30px lightgray;
+}
+
+#symptoms_card h4 {
+    font-size: 20px;
+    color: #460570;
+}
+
+#sickness_card {
+    width: 45%;
+    border: 2px solid #460570;
+    border-radius: 10px;
+    padding: 10px;
+}
+
+#med {
+    width: 45%;
+    border-radius: 10px;
+    padding: 10px;
+    background-color: aqua;
+}
+
+.search_icon {
+    position: absolute;
+    left: 76.5%;
+}
\ No newline at end of file
diff --git a/src/css/styles.css b/src/css/styles.css
new file mode 100644
index 0000000..c4d8ba3
--- /dev/null
+++ b/src/css/styles.css
@@ -0,0 +1,289 @@
+@media screen and (min-width: 300px) {
+body{
+  overflow-x: hidden;
+  font-family: 'Poppins', sans-serif;
+}
+
+/* font-family: 'Poppins', sans-serif; */
+
+.app_container {
+  display: flex;
+  width: 100%;
+}
+
+.side_bar {
+  display: flex;
+  flex-direction: column;
+  gap: 35px;
+  width: 20%;
+  padding: 30px 0 0 10px;
+  border-right: 2px solid lightgrey;
+}
+
+.patient_image {
+  width: 70px;
+  margin-left: 80px;
+}
+
+.logo {
+  width: 90%;
+}
+
+ul {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  padding: 0;
+  margin: 0;
+}
+
+li {
+  list-style: none;
+}
+
+.dashboard_link {  
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  font-size: 15px;
+  font-weight: 600;
+  padding-left: 10px;
+  width: 95%;
+  text-decoration: none;
+  color: black;
+  transition: 0.3s ease-in-out;
+}
+
+.dashboard_link:hover {
+  color: white;
+  background-color: #436CDF;
+  width: 90%;
+  border-radius: 10px;
+}
+
+section {
+  width: 80%;
+}
+
+.nav_bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 50px;
+  height: 100px;
+  width: 100%;
+  background: #436CDF;
+  color: white;
+  border-bottom: 1px solid gray;
+}
+
+button {
+  border: 1px solid  #436CDF;
+  border-radius: 5px;
+  padding: 10px;
+  background-color:  #436CDF;
+  color: white;
+  font-size: 12px;
+  margin-right: 20px;
+}
+
+span {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+
+
+.main_container {
+  display: flex;
+  justify-content: space-between;
+  padding: 50px;
+  padding-bottom: 0;
+  position: relative;
+  /* overflow-y: scroll; */
+}
+
+.wallet_details {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100%;
+}
+
+.wallet_details button {
+  height: 50px;
+  width: 150px;
+  font-size: 15px;
+}
+
+select {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  width: 180px;
+  font-weight: 600;
+  font-size: 12px;
+  padding: 5px;
+  border-radius: 5px;
+}
+
+.hamburger_icon {
+  display: none;
+}
+
+.info_section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 50px;
+}
+
+input {
+  height: 40px;
+  width: 200px;
+  border-radius: 5px;
+  outline: none;
+  border: 1px solid lightgrey;
+  padding: 0;
+}
+
+.first_section,
+.second_section {
+  display: flex;
+  gap: 20px;
+  height: 300px;
+  width: 100%;
+  margin-top: 10px;
+}
+
+.copyright {
+  font-size: 20px;
+  margin: 50px 0 50px 50px;
+  color: gray;
+}
+
+.notification_icon {
+  border: 1px solid #fff;
+  border-radius: 7px;
+  padding: 5px;
+}
+
+.patient-details_first-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+}
+
+select {
+  width: 200px;
+  border: 1px solid lightgrey;
+  outline: none;
+}
+
+.disabilities_card,
+.allergies_card,
+.other-information_card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  height: 150px;
+  width: 600px;
+  border: 2px solid lightgrey;
+  border-radius: 10px;
+  font-weight: 600;
+  margin: 20px 50px 40px 0;
+}
+
+.new-entry_section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+}
+
+.allergy {
+  position: relative;
+}
+
+.modal {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background-color: white;
+  padding: 30px;
+  border-radius: 10px;
+  width: 800px;
+}
+
+.modal_title {
+  margin-bottom: 30px;
+}
+
+.modal_body {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.modal_body h4:last-of-type {
+  margin: 10px 0 -20px 0;
+}
+
+.modal_body input {
+  width: 100%;
+  padding: 5px 20px;
+}
+
+.calendar{
+  border: none;
+  border-radius: 0;
+  border-bottom: 1px solid black;
+}
+
+.modal_footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.modal button {
+  width: 70px;
+  cursor: pointer;
+}
+
+.close_button {
+  background-color: white;
+  border: 1px solid #436CDF;
+  color: #436CDF;
+  font-weight: 600;
+}
+
+.disabilities_modal {
+  position: absolute;
+  top: 27%;
+  z-index: 1;
+}
+
+.allergy_modal {
+  position: absolute;
+  top: 20%;
+  z-index: 1;
+}
+
+.other-information_modal {
+  position: absolute;
+  top: 78%;
+  z-index: 1;
+}
+
+
+
+}
\ No newline at end of file
diff --git a/src/css/walletnavbar.css b/src/css/walletnavbar.css
new file mode 100644
index 0000000..ae0979a
--- /dev/null
+++ b/src/css/walletnavbar.css
@@ -0,0 +1,16 @@
+.wallet_nav-bar {
+  background-color: #C59AE1;
+}
+
+.wallet_nav-bar span{
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+}
\ No newline at end of file
diff --git a/src/images/access.png b/src/images/access.png
new file mode 100644
index 0000000..5752f1b
Binary files /dev/null and b/src/images/access.png differ
diff --git a/src/images/appointments.png b/src/images/appointments.png
new file mode 100644
index 0000000..0313867
Binary files /dev/null and b/src/images/appointments.png differ
diff --git a/src/images/billing.png b/src/images/billing.png
new file mode 100644
index 0000000..a14cbb7
Binary files /dev/null and b/src/images/billing.png differ
diff --git a/src/images/chat.png b/src/images/chat.png
new file mode 100644
index 0000000..2e2acd3
Binary files /dev/null and b/src/images/chat.png differ
diff --git a/src/images/clock.png b/src/images/clock.png
new file mode 100644
index 0000000..34ed6e3
Binary files /dev/null and b/src/images/clock.png differ
diff --git a/src/images/delete.png b/src/images/delete.png
new file mode 100644
index 0000000..da56ac7
Binary files /dev/null and b/src/images/delete.png differ
diff --git a/src/images/doc_cards.png b/src/images/doc_cards.png
new file mode 100644
index 0000000..db763d2
Binary files /dev/null and b/src/images/doc_cards.png differ
diff --git a/src/images/doctors.png b/src/images/doctors.png
new file mode 100644
index 0000000..4b8bbb5
Binary files /dev/null and b/src/images/doctors.png differ
diff --git a/src/images/document.png b/src/images/document.png
new file mode 100644
index 0000000..3f07f65
Binary files /dev/null and b/src/images/document.png differ
diff --git a/src/images/document1.png b/src/images/document1.png
new file mode 100644
index 0000000..9b0fc4d
Binary files /dev/null and b/src/images/document1.png differ
diff --git a/src/images/entry.png b/src/images/entry.png
new file mode 100644
index 0000000..8a12ac4
Binary files /dev/null and b/src/images/entry.png differ
diff --git a/src/images/folder.png b/src/images/folder.png
new file mode 100644
index 0000000..c5a36be
Binary files /dev/null and b/src/images/folder.png differ
diff --git a/src/images/hamburger.svg b/src/images/hamburger.svg
new file mode 100644
index 0000000..37b7b5f
--- /dev/null
+++ b/src/images/hamburger.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="18"><g fill="#000" fill-rule="evenodd"><path d="M0 0h25v4H0zM0 7h25v4H0zM0 14h25v4H0z"/></g></svg>
\ No newline at end of file
diff --git a/src/images/health.png b/src/images/health.png
new file mode 100644
index 0000000..e9b6fe2
Binary files /dev/null and b/src/images/health.png differ
diff --git a/src/images/home.png b/src/images/home.png
new file mode 100644
index 0000000..0c191bc
Binary files /dev/null and b/src/images/home.png differ
diff --git a/src/images/lab-image.png b/src/images/lab-image.png
new file mode 100644
index 0000000..22e2e53
Binary files /dev/null and b/src/images/lab-image.png differ
diff --git a/src/images/logo.png b/src/images/logo.png
new file mode 100644
index 0000000..17fff05
Binary files /dev/null and b/src/images/logo.png differ
diff --git a/src/images/logout.png b/src/images/logout.png
new file mode 100644
index 0000000..062687b
Binary files /dev/null and b/src/images/logout.png differ
diff --git a/src/images/medical-black.png b/src/images/medical-black.png
new file mode 100644
index 0000000..3a0bff8
Binary files /dev/null and b/src/images/medical-black.png differ
diff --git a/src/images/medical.png b/src/images/medical.png
new file mode 100644
index 0000000..7044f97
Binary files /dev/null and b/src/images/medical.png differ
diff --git a/src/images/medications.png b/src/images/medications.png
new file mode 100644
index 0000000..7d21057
Binary files /dev/null and b/src/images/medications.png differ
diff --git a/src/images/meds.png b/src/images/meds.png
new file mode 100644
index 0000000..a242364
Binary files /dev/null and b/src/images/meds.png differ
diff --git a/src/images/menu-2.png b/src/images/menu-2.png
new file mode 100644
index 0000000..8d92a5d
Binary files /dev/null and b/src/images/menu-2.png differ
diff --git a/src/images/new_entry.png b/src/images/new_entry.png
new file mode 100644
index 0000000..b2faba0
Binary files /dev/null and b/src/images/new_entry.png differ
diff --git a/src/images/no_record.png b/src/images/no_record.png
new file mode 100644
index 0000000..e0d3bdd
Binary files /dev/null and b/src/images/no_record.png differ
diff --git a/src/images/notification.png b/src/images/notification.png
new file mode 100644
index 0000000..5318157
Binary files /dev/null and b/src/images/notification.png differ
diff --git a/src/images/notification2.png b/src/images/notification2.png
new file mode 100644
index 0000000..4233494
Binary files /dev/null and b/src/images/notification2.png differ
diff --git a/src/images/nurses.png b/src/images/nurses.png
new file mode 100644
index 0000000..acc3af3
Binary files /dev/null and b/src/images/nurses.png differ
diff --git a/src/images/patient.png b/src/images/patient.png
new file mode 100644
index 0000000..63e3aa2
Binary files /dev/null and b/src/images/patient.png differ
diff --git a/src/images/patient_document.png b/src/images/patient_document.png
new file mode 100644
index 0000000..4dfbc61
Binary files /dev/null and b/src/images/patient_document.png differ
diff --git a/src/images/phone.png b/src/images/phone.png
new file mode 100644
index 0000000..d7a045f
Binary files /dev/null and b/src/images/phone.png differ
diff --git a/src/images/profile_circle.png b/src/images/profile_circle.png
new file mode 100644
index 0000000..d8f4451
Binary files /dev/null and b/src/images/profile_circle.png differ
diff --git a/src/images/replay.png b/src/images/replay.png
new file mode 100644
index 0000000..9036e9a
Binary files /dev/null and b/src/images/replay.png differ
diff --git a/src/images/search_icon.png b/src/images/search_icon.png
new file mode 100644
index 0000000..86caaee
Binary files /dev/null and b/src/images/search_icon.png differ
diff --git a/src/images/setting.png b/src/images/setting.png
new file mode 100644
index 0000000..ae87c0b
Binary files /dev/null and b/src/images/setting.png differ
diff --git a/src/images/toggle.png b/src/images/toggle.png
new file mode 100644
index 0000000..607ee0e
Binary files /dev/null and b/src/images/toggle.png differ
diff --git a/src/images/update.png b/src/images/update.png
new file mode 100644
index 0000000..e2365e5
Binary files /dev/null and b/src/images/update.png differ
diff --git a/src/images/upload.png b/src/images/upload.png
new file mode 100644
index 0000000..5724e7c
Binary files /dev/null and b/src/images/upload.png differ
diff --git a/src/images/view.png b/src/images/view.png
new file mode 100644
index 0000000..8f838a7
Binary files /dev/null and b/src/images/view.png differ
diff --git a/src/medical_records-navbar/Profile.js b/src/medical_records-navbar/Profile.js
new file mode 100644
index 0000000..46a22ed
--- /dev/null
+++ b/src/medical_records-navbar/Profile.js
@@ -0,0 +1,22 @@
+import React from "react";
+import "../../css/styles.css";
+import SideBar from "../SideBar";
+import NavBar from "../NavBar";
+import profile from "../../images/profile_circle.png";
+
+const MedicalRecords = () => {
+  return (
+    <>
+      <SideBar />
+      <section>
+        <NavBar />
+        <ul>
+          <img src={profile} alt="" />
+          <p>Profile Page</p>
+        </ul>
+      </section>
+    </>
+  );
+};
+
+export default MedicalRecords;
diff --git a/src/pages/About.js b/src/pages/About.js
index 2b0403c..5b7f8ee 100644
--- a/src/pages/About.js
+++ b/src/pages/About.js
@@ -1,5 +1,4 @@
-import { Navbar } from '../components';
-import { Aboutus, Footer } from '../containers';
+import { Aboutus, Footer, Navbar } from '../containers';
 
 const About = () => {
   return (
diff --git a/src/pages/ConnectWallet.js b/src/pages/ConnectWallet.js
new file mode 100644
index 0000000..872c200
--- /dev/null
+++ b/src/pages/ConnectWallet.js
@@ -0,0 +1,33 @@
+// import React, { useEffect, useState } from "react";
+// import "../css/styles.css";
+
+// const getWallet = () => window.ethereum;
+// const eth = getWallet();
+
+// const ConnectWallets = () => {
+//   const [currentAccount, setCurrentAccount] = useState("");
+
+//   const connectWallet = async () => {
+//     if (typeof eth !== "undefined") {
+//       const accounts = await eth.request({
+//         method: "eth_requestAccounts",
+//       });
+
+//       //setCheck(1);
+
+//       setCurrentAccount(accounts[0]);
+//       alert("welcome User " + accounts[0]);
+//     } else {
+//       alert("🔴Metamask Not Installed, Please Add Metamask To Your Browser 🔴");
+//     }
+//   };
+//   return (
+//     <div className="wallet_details main_container">
+//       <button className="connect" onClick={connectWallet}>
+//         Connect Wallet
+//       </button>
+//     </div>
+//   );
+// };
+
+// export default ConnectWallets;
diff --git a/src/pages/Demo.js b/src/pages/Demo.js
index 67d8990..11cca13 100644
--- a/src/pages/Demo.js
+++ b/src/pages/Demo.js
@@ -1,11 +1,12 @@
-import { Navbar } from '../components';
+import { Navbar, Thedemo, Footer } from '../containers';
 
 const Demo = () => {
   return (
     <div>
         <div className="Demo">
           <Navbar />
-          <h1>Demo Page</h1>
+          <Thedemo />
+          <Footer />
         </div>
     </div>
   )
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 625ec75..52d8745 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -1,5 +1,4 @@
-import { Benefits, Demo, Feedback, Footer, Header, Joinus, Whyus} from '../containers';
-import { Navbar, Feature } from '../components';
+import { Navbar, Feature, Benefits, Demo, Feedback, Footer, Header, Joinus, Whyus} from '../containers';
 
 const Home = () => {
   return (
diff --git a/src/pages/Login.js b/src/pages/Login.js
new file mode 100644
index 0000000..b7824e7
--- /dev/null
+++ b/src/pages/Login.js
@@ -0,0 +1,13 @@
+import { Loginpage } from '../containers';
+
+const Login = () => {
+  return (
+    <div>
+        <div className="Login">
+          <Loginpage />
+        </div>
+    </div>
+  )
+}
+
+export default Login
\ No newline at end of file
diff --git a/src/pages/ManageAccess.jsx b/src/pages/ManageAccess.jsx
new file mode 100644
index 0000000..a9107cb
--- /dev/null
+++ b/src/pages/ManageAccess.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+const ManageAccess = () => {
+  return (
+    <div>
+      <h2>manage access</h2>
+    </div>
+  );
+};
+
+export default ManageAccess;
diff --git a/src/pages/RecordHistory.js b/src/pages/RecordHistory.js
new file mode 100644
index 0000000..d3509a2
--- /dev/null
+++ b/src/pages/RecordHistory.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+const RecordHistory = () => {
+  return (
+    <div>
+      <h2>Hello reord history</h2>
+    </div>
+  );
+};
+
+export default RecordHistory;
diff --git a/src/pages/Register.js b/src/pages/Register.js
new file mode 100644
index 0000000..9ad4c26
--- /dev/null
+++ b/src/pages/Register.js
@@ -0,0 +1,13 @@
+import { Registerpage } from '../containers';
+
+const Register = () => {
+  return (
+    <div>
+        <div className="Register">
+          <Registerpage />
+        </div>
+    </div>
+  )
+}
+
+export default Register
\ No newline at end of file
diff --git a/src/pages/Services.js b/src/pages/Services.js
index e12dcd6..5c507b0 100644
--- a/src/pages/Services.js
+++ b/src/pages/Services.js
@@ -1,5 +1,4 @@
-import { Navbar } from '../components';
-import { Ourservices, Footer } from '../containers';
+import { Navbar, Ourservices, Footer } from '../containers';
 
 const Services = () => {
   return (
diff --git a/src/pages/ViewMedicalRecords.js b/src/pages/ViewMedicalRecords.js
new file mode 100644
index 0000000..6d1e4ca
--- /dev/null
+++ b/src/pages/ViewMedicalRecords.js
@@ -0,0 +1,24 @@
+import Allergies from "../components/Allergies";
+import BloodGroup from "../components/BloodGroup";
+import Disabilities from "../components/Disabilities";
+import Genotype from "../components/Genotype";
+import OtherInformations from "../components/OtherInformations";
+import Weight from "../components/Weight";
+import "../css/medical.css";
+
+const ViewMedicalRecords = () => {
+  return (
+    <div className="medical-records main_container">
+      <div className="info_section">
+        <BloodGroup />
+        <Genotype />
+        <Weight />
+      </div>
+      <Disabilities />
+      <Allergies />
+      <OtherInformations />
+    </div>
+  );
+};
+
+export default ViewMedicalRecords;
diff --git a/src/pages/ViewOtherRecords.js b/src/pages/ViewOtherRecords.js
new file mode 100644
index 0000000..430574f
--- /dev/null
+++ b/src/pages/ViewOtherRecords.js
@@ -0,0 +1,7 @@
+import "../css/styles.css";
+
+const ViewOtherRecords = () => {
+  return <div className="medical-records main_container"></div>;
+};
+
+export default ViewOtherRecords;
diff --git a/src/pages/Web3.js b/src/pages/Web3.js
new file mode 100644
index 0000000..93c0670
--- /dev/null
+++ b/src/pages/Web3.js
@@ -0,0 +1,15 @@
+import { Navbar, Whatweb3, Footer } from '../containers';
+
+const Web3 = () => {
+  return (
+    <div>
+        <div className="Web3">
+          <Navbar />
+          <Whatweb3 />
+          <Footer />
+        </div>
+    </div>
+  )
+}
+
+export default Web3
\ No newline at end of file
diff --git a/src/pages/Welcome.js b/src/pages/Welcome.js
new file mode 100644
index 0000000..9adaf38
--- /dev/null
+++ b/src/pages/Welcome.js
@@ -0,0 +1,13 @@
+import { Welcomepage } from '../containers';
+
+const Welcome = () => {
+  return (
+    <div>
+        <div className="Welcome">
+          <Welcomepage />
+        </div>
+    </div>
+  )
+}
+
+export default Welcome
\ No newline at end of file
diff --git a/src/store/Index.js b/src/store/Index.js
new file mode 100644
index 0000000..7dc8ada
--- /dev/null
+++ b/src/store/Index.js
@@ -0,0 +1,7 @@
+import { proxy } from "valtio";
+
+const state = proxy({
+  userData: null,
+});
+
+export default state;