diff --git a/package-lock.json b/package-lock.json
index bda87bb..7e9c8bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,7 +43,6 @@
         "react-responsive-carousel": "^3.2.22",
         "react-router-dom": "^6.2.2",
         "react-scripts": "4.0.3",
-        "react-use": "^17.3.1",
         "typescript": "^4.4.4",
         "web-vitals": "^1.1.2",
         "webln": "^0.2.2"
@@ -8378,11 +8377,6 @@
         "pretty-format": "^26.0.0"
       }
     },
-    "node_modules/@types/js-cookie": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
-      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
-    },
     "node_modules/@types/js-levenshtein": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/js-levenshtein/-/js-levenshtein-1.1.1.tgz",
@@ -9149,11 +9143,6 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/@xobotyi/scrollbar-width": {
-      "version": "1.9.5",
-      "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
-      "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ=="
-    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -13225,15 +13214,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/css-in-js-utils": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
-      "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==",
-      "dependencies": {
-        "hyphenate-style-name": "^1.0.2",
-        "isobject": "^3.0.1"
-      }
-    },
     "node_modules/css-loader": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-4.3.0.tgz",
@@ -16068,16 +16048,6 @@
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
     },
-    "node_modules/fast-shallow-equal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
-      "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
-    },
-    "node_modules/fastest-stable-stringify": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
-      "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q=="
-    },
     "node_modules/fastq": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
@@ -18167,11 +18137,6 @@
         "node": ">=8.12.0"
       }
     },
-    "node_modules/hyphenate-style-name": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
-      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
-    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -18379,14 +18344,6 @@
       "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==",
       "dev": true
     },
-    "node_modules/inline-style-prefixer": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.1.tgz",
-      "integrity": "sha512-AsqazZ8KcRzJ9YPN1wMH2aNM7lkWQ8tSPrW5uDk1ziYwiAPWSZnUsC7lfZq+BDqLqz0B4Pho5wscWcJzVvRzDQ==",
-      "dependencies": {
-        "css-in-js-utils": "^2.0.0"
-      }
-    },
     "node_modules/inquirer": {
       "version": "7.3.3",
       "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz",
@@ -22980,50 +22937,6 @@
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
       "dev": true
     },
-    "node_modules/nano-css": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.4.tgz",
-      "integrity": "sha512-wfcviJB6NOxDIDfr7RFn/GlaN7I/Bhe4d39ZRCJ3xvZX60LVe2qZ+rDqM49nm4YT81gAjzS+ZklhKP/Gnfnubg==",
-      "dependencies": {
-        "css-tree": "^1.1.2",
-        "csstype": "^3.0.6",
-        "fastest-stable-stringify": "^2.0.2",
-        "inline-style-prefixer": "^6.0.0",
-        "rtl-css-js": "^1.14.0",
-        "sourcemap-codec": "^1.4.8",
-        "stacktrace-js": "^2.0.2",
-        "stylis": "^4.0.6"
-      },
-      "peerDependencies": {
-        "react": "*",
-        "react-dom": "*"
-      }
-    },
-    "node_modules/nano-css/node_modules/css-tree": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
-      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
-      "dependencies": {
-        "mdn-data": "2.0.14",
-        "source-map": "^0.6.1"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/nano-css/node_modules/mdn-data": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
-    },
-    "node_modules/nano-css/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/nano-time": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz",
@@ -50134,45 +50047,6 @@
         "react": "^16.8.0 || ^17.0.0"
       }
     },
-    "node_modules/react-universal-interface": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
-      "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==",
-      "peerDependencies": {
-        "react": "*",
-        "tslib": "*"
-      }
-    },
-    "node_modules/react-use": {
-      "version": "17.3.1",
-      "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.3.1.tgz",
-      "integrity": "sha512-hs7+tS4rRm1QLHPfanLCqXIi632tP4V7Sai1ENUP2WTufU6am++tU9uSw9YrNCFqbABiEv0ndKU1XCUcfu2tXA==",
-      "dependencies": {
-        "@types/js-cookie": "^2.2.6",
-        "@xobotyi/scrollbar-width": "^1.9.5",
-        "copy-to-clipboard": "^3.3.1",
-        "fast-deep-equal": "^3.1.3",
-        "fast-shallow-equal": "^1.0.0",
-        "js-cookie": "^2.2.1",
-        "nano-css": "^5.3.1",
-        "react-universal-interface": "^0.6.2",
-        "resize-observer-polyfill": "^1.5.1",
-        "screenfull": "^5.1.0",
-        "set-harmonic-interval": "^1.0.1",
-        "throttle-debounce": "^3.0.1",
-        "ts-easing": "^0.2.0",
-        "tslib": "^2.1.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0  || ^17.0.0",
-        "react-dom": "^16.8.0  || ^17.0.0"
-      }
-    },
-    "node_modules/react-use/node_modules/js-cookie": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
-      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
-    },
     "node_modules/read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -50772,11 +50646,6 @@
       "version": "4.1.3",
       "integrity": "sha512-TVpMknnmdSRNhLPgTDSCQKw32zt1ZIJtEcSxfL/ihtDqShEMUs2X2UY/g96YAVynUXxqLWSXObLGIcqKHQObHw=="
     },
-    "node_modules/resize-observer-polyfill": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
-    },
     "node_modules/resolve": {
       "version": "1.18.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz",
@@ -51111,14 +50980,6 @@
         "node": "6.* || >= 7.*"
       }
     },
-    "node_modules/rtl-css-js": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.15.0.tgz",
-      "integrity": "sha512-99Cu4wNNIhrI10xxUaABHsdDqzalrSRTie4GeCmbGVuehm4oj+fIy8fTzB+16pmKe8Bv9rl+hxIBez6KxExTew==",
-      "dependencies": {
-        "@babel/runtime": "^7.1.2"
-      }
-    },
     "node_modules/run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -51558,17 +51419,6 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/screenfull": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
-      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==",
-      "engines": {
-        "node": ">=0.10.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/scuid": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/scuid/-/scuid-1.1.0.tgz",
@@ -51780,14 +51630,6 @@
       "integrity": "sha512-edRH8mBKEWNVIVMKejNnuJxleqYE/ZSdcT8/Nem9/mmosx12pctd80s2Oy00KNZzrogMZS5mauK2/ymL1bvlvg==",
       "dev": true
     },
-    "node_modules/set-harmonic-interval": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
-      "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==",
-      "engines": {
-        "node": ">=6.9"
-      }
-    },
     "node_modules/set-value": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
@@ -52394,14 +52236,6 @@
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
       "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w=="
     },
-    "node_modules/stack-generator": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.5.tgz",
-      "integrity": "sha512-/t1ebrbHkrLrDuNMdeAcsvynWgoH/i4o8EGGfX7dEYDoTXOYVAkEpFdtshlvabzc6JlJ8Kf9YdFEoz7JkzGN9Q==",
-      "dependencies": {
-        "stackframe": "^1.1.1"
-      }
-    },
     "node_modules/stack-utils": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.5.tgz",
@@ -52426,33 +52260,6 @@
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz",
       "integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA=="
     },
-    "node_modules/stacktrace-gps": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.0.4.tgz",
-      "integrity": "sha512-qIr8x41yZVSldqdqe6jciXEaSCKw1U8XTXpjDuy0ki/apyTn/r3w9hDAAQOhZdxvsC93H+WwwEu5cq5VemzYeg==",
-      "dependencies": {
-        "source-map": "0.5.6",
-        "stackframe": "^1.1.1"
-      }
-    },
-    "node_modules/stacktrace-gps/node_modules/source-map": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
-      "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/stacktrace-js": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
-      "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
-      "dependencies": {
-        "error-stack-parser": "^2.0.6",
-        "stack-generator": "^2.0.5",
-        "stacktrace-gps": "^3.0.4"
-      }
-    },
     "node_modules/state-toggle": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",
@@ -52919,10 +52726,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/stylis": {
-      "version": "4.0.12",
-      "integrity": "sha512-eVXQEZqRRFRvl8Aor1kNWN7ViNss9tYhphVBFNxyCJWKdK+FO5sOVKEHk7Dg/vLAr1xYQBpUb+7weU4AlDUm8g=="
-    },
     "node_modules/subscriptions-transport-ws": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/subscriptions-transport-ws/-/subscriptions-transport-ws-0.11.0.tgz",
@@ -53725,6 +53528,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
       "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -53948,11 +53752,6 @@
         "node": ">=6.10"
       }
     },
-    "node_modules/ts-easing": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
-      "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ=="
-    },
     "node_modules/ts-essentials": {
       "version": "2.0.12",
       "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-2.0.12.tgz",
@@ -62596,11 +62395,6 @@
         "pretty-format": "^26.0.0"
       }
     },
-    "@types/js-cookie": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz",
-      "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA=="
-    },
     "@types/js-levenshtein": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/js-levenshtein/-/js-levenshtein-1.1.1.tgz",
@@ -63264,11 +63058,6 @@
       "integrity": "sha512-V3BIhmY36fXZ1OtVcI9W+FxQqxVLsPKcNjWigIaa81dLC9IolJl5Mt4Cvhmr0flUnjSpTdrbMTSbXqYqV5dT6A==",
       "dev": true
     },
-    "@xobotyi/scrollbar-width": {
-      "version": "1.9.5",
-      "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
-      "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ=="
-    },
     "@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -66502,15 +66291,6 @@
         }
       }
     },
-    "css-in-js-utils": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
-      "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==",
-      "requires": {
-        "hyphenate-style-name": "^1.0.2",
-        "isobject": "^3.0.1"
-      }
-    },
     "css-loader": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-4.3.0.tgz",
@@ -68684,16 +68464,6 @@
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
     },
-    "fast-shallow-equal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
-      "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
-    },
-    "fastest-stable-stringify": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
-      "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q=="
-    },
     "fastq": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
@@ -70321,11 +70091,6 @@
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
       "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw=="
     },
-    "hyphenate-style-name": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
-      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
-    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -70473,14 +70238,6 @@
       "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==",
       "dev": true
     },
-    "inline-style-prefixer": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.1.tgz",
-      "integrity": "sha512-AsqazZ8KcRzJ9YPN1wMH2aNM7lkWQ8tSPrW5uDk1ziYwiAPWSZnUsC7lfZq+BDqLqz0B4Pho5wscWcJzVvRzDQ==",
-      "requires": {
-        "css-in-js-utils": "^2.0.0"
-      }
-    },
     "inquirer": {
       "version": "7.3.3",
       "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz",
@@ -73937,42 +73694,6 @@
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
       "dev": true
     },
-    "nano-css": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.4.tgz",
-      "integrity": "sha512-wfcviJB6NOxDIDfr7RFn/GlaN7I/Bhe4d39ZRCJ3xvZX60LVe2qZ+rDqM49nm4YT81gAjzS+ZklhKP/Gnfnubg==",
-      "requires": {
-        "css-tree": "^1.1.2",
-        "csstype": "^3.0.6",
-        "fastest-stable-stringify": "^2.0.2",
-        "inline-style-prefixer": "^6.0.0",
-        "rtl-css-js": "^1.14.0",
-        "sourcemap-codec": "^1.4.8",
-        "stacktrace-js": "^2.0.2",
-        "stylis": "^4.0.6"
-      },
-      "dependencies": {
-        "css-tree": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
-          "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
-          "requires": {
-            "mdn-data": "2.0.14",
-            "source-map": "^0.6.1"
-          }
-        },
-        "mdn-data": {
-          "version": "2.0.14",
-          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-          "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-        }
-      }
-    },
     "nano-time": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz",
@@ -94829,40 +94550,6 @@
         "use-latest": "^1.0.0"
       }
     },
-    "react-universal-interface": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
-      "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==",
-      "requires": {}
-    },
-    "react-use": {
-      "version": "17.3.1",
-      "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.3.1.tgz",
-      "integrity": "sha512-hs7+tS4rRm1QLHPfanLCqXIi632tP4V7Sai1ENUP2WTufU6am++tU9uSw9YrNCFqbABiEv0ndKU1XCUcfu2tXA==",
-      "requires": {
-        "@types/js-cookie": "^2.2.6",
-        "@xobotyi/scrollbar-width": "^1.9.5",
-        "copy-to-clipboard": "^3.3.1",
-        "fast-deep-equal": "^3.1.3",
-        "fast-shallow-equal": "^1.0.0",
-        "js-cookie": "^2.2.1",
-        "nano-css": "^5.3.1",
-        "react-universal-interface": "^0.6.2",
-        "resize-observer-polyfill": "^1.5.1",
-        "screenfull": "^5.1.0",
-        "set-harmonic-interval": "^1.0.1",
-        "throttle-debounce": "^3.0.1",
-        "ts-easing": "^0.2.0",
-        "tslib": "^2.1.0"
-      },
-      "dependencies": {
-        "js-cookie": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
-          "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
-        }
-      }
-    },
     "read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -95345,11 +95032,6 @@
       "version": "4.1.3",
       "integrity": "sha512-TVpMknnmdSRNhLPgTDSCQKw32zt1ZIJtEcSxfL/ihtDqShEMUs2X2UY/g96YAVynUXxqLWSXObLGIcqKHQObHw=="
     },
-    "resize-observer-polyfill": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
-      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
-    },
     "resolve": {
       "version": "1.18.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz",
@@ -95615,14 +95297,6 @@
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
       "integrity": "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA=="
     },
-    "rtl-css-js": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.15.0.tgz",
-      "integrity": "sha512-99Cu4wNNIhrI10xxUaABHsdDqzalrSRTie4GeCmbGVuehm4oj+fIy8fTzB+16pmKe8Bv9rl+hxIBez6KxExTew==",
-      "requires": {
-        "@babel/runtime": "^7.1.2"
-      }
-    },
     "run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -95946,11 +95620,6 @@
         "ajv-keywords": "^3.5.2"
       }
     },
-    "screenfull": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz",
-      "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA=="
-    },
     "scuid": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/scuid/-/scuid-1.1.0.tgz",
@@ -96145,11 +95814,6 @@
       "integrity": "sha512-edRH8mBKEWNVIVMKejNnuJxleqYE/ZSdcT8/Nem9/mmosx12pctd80s2Oy00KNZzrogMZS5mauK2/ymL1bvlvg==",
       "dev": true
     },
-    "set-harmonic-interval": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
-      "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g=="
-    },
     "set-value": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
@@ -96664,14 +96328,6 @@
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
       "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w=="
     },
-    "stack-generator": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.5.tgz",
-      "integrity": "sha512-/t1ebrbHkrLrDuNMdeAcsvynWgoH/i4o8EGGfX7dEYDoTXOYVAkEpFdtshlvabzc6JlJ8Kf9YdFEoz7JkzGN9Q==",
-      "requires": {
-        "stackframe": "^1.1.1"
-      }
-    },
     "stack-utils": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.5.tgz",
@@ -96692,32 +96348,6 @@
       "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz",
       "integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA=="
     },
-    "stacktrace-gps": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.0.4.tgz",
-      "integrity": "sha512-qIr8x41yZVSldqdqe6jciXEaSCKw1U8XTXpjDuy0ki/apyTn/r3w9hDAAQOhZdxvsC93H+WwwEu5cq5VemzYeg==",
-      "requires": {
-        "source-map": "0.5.6",
-        "stackframe": "^1.1.1"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.5.6",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
-          "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI="
-        }
-      }
-    },
-    "stacktrace-js": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
-      "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
-      "requires": {
-        "error-stack-parser": "^2.0.6",
-        "stack-generator": "^2.0.5",
-        "stacktrace-gps": "^3.0.4"
-      }
-    },
     "state-toggle": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",
@@ -97071,10 +96701,6 @@
         }
       }
     },
-    "stylis": {
-      "version": "4.0.12",
-      "integrity": "sha512-eVXQEZqRRFRvl8Aor1kNWN7ViNss9tYhphVBFNxyCJWKdK+FO5sOVKEHk7Dg/vLAr1xYQBpUb+7weU4AlDUm8g=="
-    },
     "subscriptions-transport-ws": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/subscriptions-transport-ws/-/subscriptions-transport-ws-0.11.0.tgz",
@@ -97678,7 +97304,8 @@
     "throttle-debounce": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
-      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg=="
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
+      "dev": true
     },
     "through": {
       "version": "2.3.8",
@@ -97853,11 +97480,6 @@
       "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==",
       "dev": true
     },
-    "ts-easing": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
-      "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ=="
-    },
     "ts-essentials": {
       "version": "2.0.12",
       "resolved": "https://registry.npmjs.org/ts-essentials/-/ts-essentials-2.0.12.tgz",
diff --git a/package.json b/package.json
index 6249f40..4c3f012 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "makers.bolt.fun",
   "version": "0.1.0",
-  "private": true, 
+  "private": true,
   "dependencies": {
     "@apollo/client": "^3.5.5",
     "@prisma/client": "3.5.0",
@@ -38,7 +38,6 @@
     "react-responsive-carousel": "^3.2.22",
     "react-router-dom": "^6.2.2",
     "react-scripts": "4.0.3",
-    "react-use": "^17.3.1",
     "typescript": "^4.4.4",
     "web-vitals": "^1.1.2",
     "webln": "^0.2.2"
diff --git a/src/Components/Navbar/CategoriesList/CategoriesList.stories.tsx b/src/Components/Navbar/CategoriesList/CategoriesList.stories.tsx
new file mode 100644
index 0000000..85b0e74
--- /dev/null
+++ b/src/Components/Navbar/CategoriesList/CategoriesList.stories.tsx
@@ -0,0 +1,17 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { MOCK_DATA } from 'src/mocks/data';
+
+import CategoriesList from './CategoriesList';
+
+export default {
+  title: 'Shared/Navbar/CategoriesList',
+  component: CategoriesList,
+
+} as ComponentMeta<typeof CategoriesList>;
+
+const Template: ComponentStory<typeof CategoriesList> = (args) => <CategoriesList {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+}
+
diff --git a/src/Components/Navbar/CategoriesList/CategoriesList.tsx b/src/Components/Navbar/CategoriesList/CategoriesList.tsx
new file mode 100644
index 0000000..b699b2a
--- /dev/null
+++ b/src/Components/Navbar/CategoriesList/CategoriesList.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { MOCK_DATA } from 'src/mocks/data'
+import { ProjectCategory } from 'src/utils/interfaces'
+
+interface Props {
+    // categories: Pick<ProjectCategory, 'id' | 'title' | 'icon' | 'votes_sum'>[]
+    classes?: Partial<{ list: string, item: string }>
+    onClick?: (categoryId: number) => void
+}
+
+const categories = MOCK_DATA['categories']
+
+export default function CategoriesList({ classes = {}, onClick }: Props) {
+    return (
+        <ul className={classes.list}>
+            {categories.map(category =>
+                <Link
+                    onClick={() => onClick?.(category.id)}
+                    key={category.id}
+                    to={`/category/${category.id}`}>
+                    <li className={`flex p-16 text-body4 font-semibold items-center hover:bg-gray-100 rounded-8 ${classes.item}`} >
+                        <span className="text-body3 mr-8">{category.icon}</span> {category.title} <span className="ml-auto text-body5 font-normal text-gray-400">{category.votes_sum}</span>
+                    </li>
+                </Link>)}
+        </ul>
+    )
+}
diff --git a/src/Components/Navbar/NavDesktop.tsx b/src/Components/Navbar/NavDesktop.tsx
index e36d9fd..33eb1a0 100644
--- a/src/Components/Navbar/NavDesktop.tsx
+++ b/src/Components/Navbar/NavDesktop.tsx
@@ -8,15 +8,27 @@ import ASSETS from "src/assets";
 import Search from "./Search/Search";
 import IconButton from "../IconButton/IconButton";
 import { toggleSearch } from "src/redux/features/ui.slice";
+import { navLinks } from "./Navbar";
+import { Link } from "react-router-dom";
+import CategoriesList from "./CategoriesList/CategoriesList";
+import { useEffect, useRef, useState } from "react";
+import { IoExtensionPuzzle } from "react-icons/io5";
+import { useClickOutside, useToggle } from "@react-hookz/web";
 
 
 export default function NavDesktop() {
     const dispatch = useAppDispatch();
+    const [categoriesOpen, toggleCategories] = useToggle(false)
+    const categoriesRef = useRef<HTMLLIElement>(null)
+    useClickOutside(categoriesRef, () => toggleCategories(false))
+
+
     const { isWalletConnected, searchOpen } = useAppSelector((state) => ({
         isWalletConnected: state.wallet.isConnected,
         searchOpen: state.ui.isSearchOpen
     }));
 
+
     const handleSearchClick = () => {
         dispatch(toggleSearch())
     };
@@ -47,12 +59,44 @@ export default function NavDesktop() {
                 <img className='h-40' src={ASSETS.Logo} alt="Bolt fun logo" />
             </h2>
         </a>
-        {/* <ul className="flex gap-32 xl:gap-64">
-                    {navLinks.map((link, idx) => <li key={idx} className="text-body4 hover:text-primary-600">
-                        <Link to={link.url}><link.icon className={`text-body2 align-middle inline-block mr-8 ${link.color}`} /> {link.text}</Link></li>
-                    )}
-
-                </ul> */}
+        <ul className="flex gap-32 xl:gap-64">
+            {navLinks.map((link, idx) => <li key={idx} className=" relative">
+                <Link to={link.url} className='text-body4 hover:text-primary-600'>
+                    <link.icon className={`text-body2  inline-block mr-8 text-primary-600`} />
+                    <span className="align-middle">{link.text}</span>
+                </Link>
+                {link.text === 'Categories' && <div className="absolute top-full left-0 w-[256px] border border-primary-50 rounded-8 shadow-2xl translate-y-16">
+                    <CategoriesList />
+                </div>}
+            </li>
+            )}
+            <li
+                ref={categoriesRef}
+                className="relative cursor-pointer" onClick={() => toggleCategories(!categoriesOpen)}>
+                <p className='text-body4 hover:text-primary-600'>
+                    <IoExtensionPuzzle className={`text-body2  inline-block mr-8 text-primary-600`} />
+                    <span className="align-middle">Categories</span>
+                </p>
+                {<motion.div
+                    initial={{ opacity: 0, y: 200, display: 'none' }}
+                    animate={categoriesOpen ? {
+                        opacity: 1, y: 16, display: 'initial',
+                        transition: { ease: 'easeOut' }
+                    } : {
+                        opacity: 0, y: 200,
+                        transition: {
+                            ease: "easeIn",
+                            duration: .4
+                        },
+                        transitionEnd: {
+                            display: 'none'
+                        }
+                    }}
+                    className="absolute top-full left-0 w-[256px] border border-primary-50 rounded-8 shadow-2xl">
+                    <CategoriesList />
+                </motion.div>}
+            </li>
+        </ul>
 
         <div className="ml-auto"></div>
         <motion.div
diff --git a/src/Components/Navbar/NavMobile.tsx b/src/Components/Navbar/NavMobile.tsx
index 70622f4..75d67fa 100644
--- a/src/Components/Navbar/NavMobile.tsx
+++ b/src/Components/Navbar/NavMobile.tsx
@@ -1,12 +1,24 @@
 import { motion } from "framer-motion";
 import { useEffect, useState } from "react";
-import { BsSearch } from "react-icons/bs";
+import { BsChevronDown, BsSearch } from "react-icons/bs";
+import { GrClose } from "react-icons/gr";
 import Button from "../Button/Button";
 import ASSETS from "src/assets";
 import Search from "./Search/Search";
 import IconButton from "../IconButton/IconButton";
 import { useAppDispatch, useAppSelector } from "src/utils/hooks";
 import { toggleSearch } from "src/redux/features/ui.slice";
+import { FiMenu } from "react-icons/fi";
+import { navLinks } from "./Navbar";
+import { Link } from "react-router-dom";
+import { IoExtensionPuzzle } from "react-icons/io5";
+import CategoriesList from "./CategoriesList/CategoriesList";
+import { useToggle } from "@react-hookz/web";
+import styles from './styles.module.css'
+
+interface Props {
+}
+
 
 const navBtnVariant = {
   menuHide: { rotate: 90, opacity: 0 },
@@ -14,37 +26,58 @@ const navBtnVariant = {
   closeHide: { rotate: -90, opacity: 0 },
   closeShow: { rotate: 0, opacity: 1 },
 };
+
 const navListVariants = {
   init: { x: 0 },
   show: { x: "-100%" },
   hide: { x: 0 },
 };
 
-interface Props {
+const categoriesListVariants = {
+  open: {
+    opacity: 1, y: 0, display: 'block',
+    transition: { ease: 'easeOut' }
+  },
+  closed: {
+    opacity: 0, y: -50,
+    transition: {
+      ease: "easeIn",
+      duration: .2
+    },
+    transitionEnd: {
+      display: 'none'
+    }
+  }
 }
 
+const categoriesArrowVariants = {
+  open: { rotate: 180 },
+  closed: { rotate: 0 }
+}
+
+
 export default function NavMobile({ }: Props) {
-  const [open, setOpen] = useState(false);
   const dispatch = useAppDispatch();
   const { searchOpen } = useAppSelector((state) => ({
     isWalletConnected: state.wallet.isConnected,
     searchOpen: state.ui.isSearchOpen
   }));
 
+  const [drawerOpen, toggleDrawerOpen] = useToggle(false);
+  const [categoriesOpen, toggleCategories] = useToggle(false)
+
 
 
-  const handleClick = () => {
-    setOpen((open) => !open);
-  };
 
   useEffect(() => {
-    if (open) document.body.style.overflowY = "hidden";
+    if (drawerOpen) document.body.style.overflowY = "hidden";
     else document.body.style.overflowY = "initial";
-  }, [open]);
+  }, [drawerOpen]);
 
 
 
   const handleSearchClick = () => {
+    toggleDrawerOpen(false)
     dispatch(toggleSearch())
   };
 
@@ -52,8 +85,8 @@ export default function NavMobile({ }: Props) {
 
 
   return (
-    <div className="w-screen z-[2010]">
-      <nav className="bg-white fixed top-0 left-0  h-[67px] w-full p-16 px-32 flex justify-between items-center z-[2010]">
+    <div className={`${styles.navMobile} w-screen z-[2010]`}>
+      <nav className={`bg-white fixed top-0 left-0  h-[67px] w-full p-16 px-32 flex justify-between items-center z-[2010]`}>
         {/* <div className="w-40 h-40 bg-gray-100 rounded-8 mr-auto">
                     <img className="w-full h-full object-cover" src="https://www.figma.com/file/OFowr5RJk9YZCW35KT7D5K/image/07b85d84145942255afd215b3da26dbbf1dd03bd?fuid=772401335362859303" alt="" />
                 </div> */}
@@ -66,39 +99,39 @@ export default function NavMobile({ }: Props) {
           animate={searchOpen ? { opacity: 0 } : { opacity: 1 }}
           className="flex"
         >
-          <Button size="sm"
+          {/* <Button size="sm"
             color="primary"
             className="rounded-24"
             href="https://form.jotform.com/220301236112030"
             newTab>
             Submit App️
-          </Button>
-          <IconButton className='ml-8  self-center' onClick={handleSearchClick}>
+          </Button> */}
+          {/* <IconButton className='ml-8  self-center' onClick={handleSearchClick}>
             <BsSearch className="text-gray-400" />
+          </IconButton> */}
+          <IconButton className='auto text-2xl w-[50px] h-[50px] hover:bg-gray-200 self-center' onClick={() => toggleDrawerOpen()}>
+            {!drawerOpen ? (<motion.div key={drawerOpen ? 1 : 0} variants={navBtnVariant} initial='menuHide' animate='menuShow'><FiMenu /></motion.div>)
+              : (<motion.div key={drawerOpen ? 1 : 0} variants={navBtnVariant} initial='closeHide' animate='closeShow'><GrClose /></motion.div>)}
           </IconButton>
         </motion.div>
         <Search width='calc(100vw - 64px)' />
 
-        {/* <button className='rounded-full ml-auto text-2xl w-[50px] h-[50px] hover:bg-gray-200' onClick={handleClick}>
-
-                    {!open ? (<motion.div key={open ? 1 : 0} variants={navBtnVariant} initial='menuHide' animate='menuShow'><FiMenu /></motion.div>)
-                        : (<motion.div key={open ? 1 : 0} variants={navBtnVariant} initial='closeHide' animate='closeShow'><GrClose /></motion.div>)}
-                </button> */}
       </nav>
 
       <div className="fixed  left-0 pointer-events-none z-[2010] w-full min-h-[calc(100vh-76px)]">
-        {open && (
+        {drawerOpen && (
           <div
-            onClick={handleClick}
+            onClick={() => toggleDrawerOpen()}
             className="pointer-events-auto absolute left-0 w-full min-h-full bg-gray-400 opacity-20"
           ></div>
         )}
         <motion.div
-          className="pointer-events-auto bg-white w-full sm:max-w-[400px] min-h-full absolute left-full  border shadow-2xl pt-32 sm:p-32 flex flex-col"
+          className="pointer-events-auto bg-white w-full sm:max-w-[400px] overflow-y-scroll absolute left-full  border shadow-2xl px-16 flex flex-col"
           variants={navListVariants}
-          animate={open ? "show" : "hide"}
+          style={{ height: 'calc(100vh - 67px)' }}
+          animate={drawerOpen ? "show" : "hide"}
         >
-          <div className="px-16">
+          <div className="flex flex-col gap-16 py-16">
             {/* <form className='relative' onSubmit={handleSubmit}>
                             <BsSearch className='absolute top-1/2 left-20 transform -translate-x-1/2  -translate-y-1/2 text-gray-500' />
                             <input
@@ -116,19 +149,54 @@ export default function NavMobile({ }: Props) {
               <Button
                 color="primary"
                 fullWidth
-                className="py-12 px-40 rounded-24 mt-40"
+                className="py-12 px-40 rounded-24 "
               >
                 Submit App️
               </Button>
             </a>
+
+            <Button
+              color='gray'
+              fullWidth
+              className="py-12 px-40 rounded-24"
+              onClick={() => handleSearchClick()}
+
+            >
+              <BsSearch className='inline-block transform scale-125' />
+              <span className="align-middle"> Search Apps</span>
+            </Button>
             {/* <Button color='gray' fullWidth className="py-12 px-40 rounded-24 my-16"> <AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> Connect Wallet </Button> */}
           </div>
-          {/* <ul className="py-16 gap-64 border-t">
-                        {navLinks.map((link, idx) => <li key={idx} className="text-body3 p-16 hover:bg-gray-200">
-                            <Link to={link.url}><link.icon className={`text-body2  inline-block mr-12 ${link.color}`} /> {link.text} </Link></li>
-                        )}
-                    </ul> */}
-          <ul className="px-16 py-16 pb-32 flex flex-wrap gap-y-12  border-t mt-32">
+          <ul className="py-16 gap-64 border-t">
+            {navLinks.map((link, idx) => <li key={idx} className="text-body3 p-16 active:bg-gray-200">
+              <Link to={link.url}><link.icon className={`text-body2  inline-block mr-12 text-primary-600`} /> <span className="align-middle">{link.text}</span> </Link></li>
+            )}
+            <li >
+              <p className="text-body3 flex items-center p-16 active:bg-gray-200 cursor-pointer"
+                onClick={() => toggleCategories(!categoriesOpen)}
+              >
+                <IoExtensionPuzzle className={`text-body2  inline-block mr-12 text-primary-600`} /> Categories
+                <motion.span
+                  variants={categoriesArrowVariants}
+                  initial={'closed'}
+                  animate={categoriesOpen ? 'open' : 'closed'}
+                  className="ml-auto">
+                  <BsChevronDown className=" text-gray-400" />
+                </motion.span>
+              </p>
+              {<motion.div
+                variants={categoriesListVariants}
+                initial={'closed'}
+                animate={categoriesOpen ? 'open' : 'closed'}
+              >
+                <CategoriesList
+                  classes={{ list: "pl-32" }}
+                  onClick={() => toggleDrawerOpen(false)}
+                />
+              </motion.div>}
+            </li>
+          </ul>
+          <ul className="px-16 py-16 pb-32 flex flex-wrap gap-y-12  border-t pt-32 mt-auto">
             <li className="text-body4 text-gray-500 hover:text-gray-700 w-1/2">
               <a href="/">About Us</a>
             </li>
@@ -153,6 +221,7 @@ export default function NavMobile({ }: Props) {
             <li className="text-body4 text-gray-500 hover:text-gray-700 w-1/2">
               <a href="/">Cookies Settings</a>
             </li>
+
           </ul>
         </motion.div>
       </div>
diff --git a/src/Components/Navbar/Navbar.tsx b/src/Components/Navbar/Navbar.tsx
index 6a58443..44ee414 100644
--- a/src/Components/Navbar/Navbar.tsx
+++ b/src/Components/Navbar/Navbar.tsx
@@ -1,6 +1,5 @@
 import NavMobile from "./NavMobile";
-import { FaHome } from "react-icons/fa";
-import { MdLocalFireDepartment } from "react-icons/md";
+import { MdHomeFilled, MdLocalFireDepartment } from "react-icons/md";
 import { IoExtensionPuzzle } from "react-icons/io5";
 import { useCallback } from "react";
 import { useAppDispatch, useAppSelector } from "src/utils/hooks";
@@ -8,21 +7,23 @@ import { openModal } from "src/redux/features/modals.slice";
 import { setNavHeight } from "src/redux/features/ui.slice";
 import { useResizeListener } from "src/utils/hooks";
 import NavDesktop from "./NavDesktop";
+import { useMediaQuery } from "@react-hookz/web";
+import { MEDIA_QUERIES } from "src/utils/theme/media_queries";
 
 export const navLinks = [
-  { text: "Explore", url: "/", icon: FaHome, color: "text-primary-600" },
+  { text: "Explore", url: "/", icon: MdHomeFilled, color: "text-primary-600" },
   {
     text: "Hottest",
     url: "/categories/hottest",
     icon: MdLocalFireDepartment,
     color: "text-primary-600",
   },
-  {
-    text: "Categories",
-    url: "/categories",
-    icon: IoExtensionPuzzle,
-    color: "text-primary-600",
-  },
+  // {
+  //   text: "Categories",
+  //   url: "/categories",
+  //   icon: IoExtensionPuzzle,
+  //   color: "text-primary-600",
+  // },
 ];
 
 export default function Navbar() {
@@ -33,6 +34,8 @@ export default function Navbar() {
     isMobileScreen: state.ui.isMobileScreen
   }));
 
+  const isLargeScreen = useMediaQuery(MEDIA_QUERIES.isLarge)
+
 
   const onConnectWallet = () => {
     dispatch(
@@ -70,10 +73,10 @@ export default function Navbar() {
 
   return (
     <>
-      {!isMobileScreen ?
-        <NavDesktop />
-        :
+      {(isMobileScreen || !isLargeScreen) ?
         <NavMobile />
+        :
+        <NavDesktop />
       }
     </>
   );
diff --git a/src/Components/Navbar/styles.module.css b/src/Components/Navbar/styles.module.css
new file mode 100644
index 0000000..f17b340
--- /dev/null
+++ b/src/Components/Navbar/styles.module.css
@@ -0,0 +1,20 @@
+/* width */
+.navMobile ::-webkit-scrollbar {
+  width: 4px;
+}
+
+/* Track */
+.navMobile ::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Handle */
+.navMobile ::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #aaa;
+}
+
+/* Handle on hover */
+.navMobile ::-webkit-scrollbar-thumb:hover {
+  background-color: #999;
+}
diff --git a/src/assets/index.ts b/src/assets/index.ts
index a0a52ff..b754304 100644
--- a/src/assets/index.ts
+++ b/src/assets/index.ts
@@ -3,6 +3,5 @@ import Images_ExploreHeader2 from './images/shock-the-web.png'
 import Logo from './images/logo.png'
 
 const ASSETS = { Images_ExploreHeader1, Images_ExploreHeader2, Logo }
-console.log(ASSETS);
 
 export default ASSETS;
\ No newline at end of file
diff --git a/src/mocks/data.ts b/src/mocks/data.ts
index 693a3eb..c4481a2 100644
--- a/src/mocks/data.ts
+++ b/src/mocks/data.ts
@@ -5,52 +5,72 @@ let categories = [
     {
         "id": 10,
         "title": "Video",
-        cover_image: ASSETS.Images_ExploreHeader1
+        cover_image: ASSETS.Images_ExploreHeader1,
+        icon: '📹',
+        votes_sum: 1200,
     },
     {
         "id": 8,
         "title": "Shopping",
-        cover_image: ASSETS.Images_ExploreHeader1
+        cover_image: ASSETS.Images_ExploreHeader1,
+        icon: '🛒',
+        votes_sum: 850,
     },
     {
         "id": 5,
         "title": "Music",
-        cover_image: ASSETS.Images_ExploreHeader1
+        cover_image: ASSETS.Images_ExploreHeader1,
+        icon: '🎭',
+        votes_sum: 820,
     },
     {
         "id": 9,
         "title": "Miscellaneous",
-        cover_image: ASSETS.Images_ExploreHeader1
+        cover_image: ASSETS.Images_ExploreHeader1,
+        icon: '🎁',
+        votes_sum: 675,
     },
     {
         "id": 4,
         "title": "Gaming",
-        cover_image: ASSETS.Images_ExploreHeader1
+        cover_image: ASSETS.Images_ExploreHeader1,
+        icon: '🎮',
+        votes_sum: 675,
     },
     {
         "id": 1,
         "title": "Finance",
-        cover_image: ASSETS.Images_ExploreHeader1
+        cover_image: ASSETS.Images_ExploreHeader1,
+        icon: '💵',
+        votes_sum: 250,
     },
     {
         "id": 2,
         "title": "Digital Print",
-        cover_image: ASSETS.Images_ExploreHeader1
+        cover_image: ASSETS.Images_ExploreHeader1,
+        icon: '🚨',
+        votes_sum: 200,
     },
     {
         "id": 7,
         "title": "Digital Content",
-        cover_image: ASSETS.Images_ExploreHeader1
+        cover_image: ASSETS.Images_ExploreHeader1,
+        icon: '💱',
+        votes_sum: 180,
     },
     {
         "id": 3,
-        "title": "Art",
-        cover_image: ASSETS.Images_ExploreHeader1
+        "title": "Art & Collectibles",
+        cover_image: ASSETS.Images_ExploreHeader1,
+        icon: '🎨',
+        votes_sum: 120,
     },
     {
         "id": 6,
         "title": "Analytics",
-        cover_image: ASSETS.Images_ExploreHeader1
+        cover_image: ASSETS.Images_ExploreHeader1,
+        icon: '💸',
+        votes_sum: 100,
     },
 
 ]
diff --git a/src/pages/ProjectPage/VoteCard/VoteCard.tsx b/src/pages/ProjectPage/VoteCard/VoteCard.tsx
index d312aa2..a4beef3 100644
--- a/src/pages/ProjectPage/VoteCard/VoteCard.tsx
+++ b/src/pages/ProjectPage/VoteCard/VoteCard.tsx
@@ -5,11 +5,11 @@ import { IoClose } from 'react-icons/io5'
 import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer';
 import { useAppSelector } from 'src/utils/hooks';
 import { gql, useMutation, useApolloClient } from "@apollo/client";
-import useWindowSize from "react-use/lib/useWindowSize";
 import Confetti from "react-confetti";
 import { Wallet_Service } from 'src/services';
 import styles from './style.module.css'
 import { CONFIRM_VOTE_QUERY, CONFIRM_VOTE_QUERY_RES_TYPE, VOTE_QUERY, VOTE_QUERY_RES_TYPE } from './query';
+import { useWindowSize } from '@react-hookz/web';
 
 const defaultOptions = [
     { text: '100 sat', value: 100 },
diff --git a/src/utils/interfaces/project.interfaces.ts b/src/utils/interfaces/project.interfaces.ts
index 5abbb0e..6a258c5 100644
--- a/src/utils/interfaces/project.interfaces.ts
+++ b/src/utils/interfaces/project.interfaces.ts
@@ -17,8 +17,10 @@ export interface Project {
 export interface ProjectCategory {
     id: number;
     title: string;
-    cover_image: string
-    apps_count: number
+    cover_image: string;
+    icon: string;
+    apps_count: number;
+    votes_sum: number;
 }
 
 export interface ProjectCard {
diff --git a/src/utils/theme/index.ts b/src/utils/theme/index.ts
new file mode 100644
index 0000000..2bc2db3
--- /dev/null
+++ b/src/utils/theme/index.ts
@@ -0,0 +1,6 @@
+export * as THEME from './media_queries'
+
+const THEME = {}
+
+
+export default THEME;
\ No newline at end of file
diff --git a/src/utils/theme/media_queries.js b/src/utils/theme/media_queries.js
new file mode 100644
index 0000000..e41f09d
--- /dev/null
+++ b/src/utils/theme/media_queries.js
@@ -0,0 +1,14 @@
+export const screens = {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1536,
+}
+
+export const MEDIA_QUERIES = {
+    isSmall: `only screen and (min-width : ${screens.sm}px)`,
+    isMedium: `only screen and (min-width : ${screens.md}px)`,
+    isLarge: `only screen and (min-width : ${screens.lg}px)`,
+    isXLarge: `only screen and (min-width : ${screens["2xl"]}px))`,
+}
\ No newline at end of file