diff --git a/docusaurus.config.js b/docusaurus.config.js
index 7cabdd47b8..88c2a3c938 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -34,57 +34,23 @@ module.exports = {
     navbar: {
       title: 'Uniswap Docs',
       logo: {
-        alt: 'Uniswap Unicorn',
-        src: 'img/uni_dark_icon.svg',
+        alt: 'Site Logo',
+        src: 'img/uni_light_icon.svg',
+        srcDark: 'img/uni_dark_icon.svg',
+        href: 'https://docusaurus.io/',
+        target: '_self',
+        width: 32,
+        height: 32,
       },
       items: [
         {
-          to: '/concepts/overview',
-          label: 'Concepts',
+          type: 'search',
           position: 'left',
-          className: 'V3_active',
         },
         {
-          to: '/contracts/v4/overview',
-          label: 'Contracts',
-          position: 'left',
-          className: 'V3_active',
-        },
-        {
-          to: '/sdk/v3/overview',
-          label: 'SDKs',
-          position: 'left',
-          className: 'V3_active',
-        },
-        {
-          to: '/api/subgraph/overview',
-          label: 'APIs',
-          position: 'left',
-          className: 'V3_active',
-        },
-        {
-          label: 'Give Feedback',
-          to: 'https://forms.gle/13XtjmkwdXQ2jMn26',
-          position: 'right',
-          className: 'persistent',
-        },
-        {
-          label: 'Whitepaper',
-          to: 'https://uniswap.org/whitepaper-v3.pdf',
-          position: 'right',
-          className: 'persistent',
-        },
-        {
-          href: 'https://github.com/uniswap/uniswap-docs',
-          label: 'GitHub',
-          position: 'right',
-          className: 'persistent',
-        },
-        {
-          href: 'https://unigrants.org/',
-          label: 'Grants',
+          type: 'html',
           position: 'right',
-          className: 'persistent',
+          value: '<button>Give feedback</button>',
         },
       ],
     },
@@ -180,7 +146,7 @@ module.exports = {
           ],
         },
       ],
-      // copyright: `unlicensed`,
+      copyright: `unlicensed`,
     },
     colorMode: {
       // "light" | "dark"
diff --git a/package.json b/package.json
index 7425841e12..8fbff6b7f1 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@docusaurus/preset-classic": "2.4.3",
     "@docusaurus/remark-plugin-npm2yarn": "2.4.3",
     "@docusaurus/theme-search-algolia": "2.4.3",
+    "@headlessui/react": "^2.2.0",
     "@mdx-js/react": "^1.6.21",
     "@saucelabs/theme-github-codeblock": "https://github.com/Uniswap/docusaurus-theme-github-codeblock.git#f55fe4caed9fce974c9b82bf2164f76cc5509eef",
     "@types/react": "^17.0.11",
@@ -33,9 +34,11 @@
     "@uniswap/analytics-events": "2.0.0",
     "algoliasearch": "^4.9.1",
     "caniuse-lite": "^1.0.30001519",
+    "classnames": "^2.5.1",
     "clsx": "^1.1.1",
     "hast-util-is-element": "1.1.0",
     "intl-locales-supported": "^1.8.12",
+    "js-cookie": "^3.0.5",
     "license-checker": "^25.0.1",
     "react": "18",
     "react-dom": "18",
diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx
new file mode 100644
index 0000000000..582104ebe1
--- /dev/null
+++ b/src/components/Icons/index.tsx
@@ -0,0 +1,152 @@
+import React, { FC } from 'react'
+
+import cn from 'classnames'
+
+export const MiniUnicon: FC<{
+  className?: string
+  color?: 'accent-1' | 'neutral-1'
+}> = ({ className, color = 'accent-1' }) => {
+  return (
+    <svg className={cn('MiniUnicon', className)} viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M32.1304 9.55767C30.947 9.37684 30.8971 9.35561 31.454 9.27131C32.5212 9.10963 35.0413 9.32997 36.7779 9.73674C40.8321 10.686 44.5213 13.1178 48.4591 17.4366L49.5053 18.5839L51.0019 18.3469C57.3068 17.3489 63.7208 18.1421 69.0855 20.5832C70.5613 21.2548 72.8883 22.5917 73.179 22.9353C73.2716 23.0448 73.4417 23.7495 73.5569 24.5016C73.9554 27.1034 73.7559 29.0978 72.9481 30.5873C72.5084 31.3979 72.4839 31.6548 72.7794 32.3485C73.0154 32.9021 73.6732 33.3118 74.3245 33.3109C75.6577 33.3091 77.0927 31.1863 77.7575 28.2325L78.0216 27.0592L78.5448 27.643C81.4146 30.8457 83.6686 35.2134 84.0558 38.3224L84.1566 39.133L83.6743 38.3961C82.8441 37.128 82.01 36.2648 80.9418 35.5686C79.0164 34.3137 76.9805 33.8866 71.5888 33.6067C66.7192 33.3539 63.9632 32.9442 61.2304 32.0664C56.5808 30.5732 54.2369 28.5845 48.7138 21.4466C46.2606 18.2762 44.7443 16.5221 43.236 15.1094C39.8088 11.8997 36.4412 10.2163 32.1304 9.55767Z"
+        className={cn({
+          'fill-light-accent-1 dark:fill-dark-accent-1': color === 'accent-1',
+          'fill-light-neutral-1 dark:fill-dark-neutral-1': color === 'neutral-1',
+        })}
+      />
+      <path
+        d="M74.2773 16.6364C74.3999 14.512 74.6924 13.1107 75.2804 11.831C75.5131 11.3244 75.7312 10.9099 75.7649 10.9099C75.7986 10.9099 75.6974 11.2838 75.54 11.7406C75.1125 12.9826 75.0423 14.6813 75.3368 16.6577C75.7106 19.1653 75.9232 19.5271 78.6139 22.236C79.8759 23.5065 81.3439 25.109 81.876 25.7969L82.8437 27.0479L81.876 26.1539C80.6928 25.0606 77.9714 22.9285 77.3703 22.6237C76.9673 22.4193 76.9073 22.4228 76.6587 22.6666C76.4296 22.8912 76.3813 23.2287 76.3495 24.8242C76.3 27.3109 75.956 28.9071 75.1254 30.503C74.6763 31.3662 74.6055 31.182 75.012 30.2077C75.3154 29.4802 75.3462 29.1604 75.344 26.7531C75.3393 21.9163 74.7564 20.7535 71.3376 18.7615C70.4716 18.2569 69.0446 17.5291 68.1666 17.1441C67.2886 16.7592 66.5912 16.4239 66.6166 16.3989C66.7134 16.3039 70.0474 17.2625 71.3893 17.771C73.3854 18.5273 73.7149 18.6253 73.9573 18.5341C74.1198 18.4729 74.1984 18.0068 74.2773 16.6364Z"
+        className={cn({
+          'fill-light-accent-1 dark:fill-dark-accent-1': color === 'accent-1',
+          'fill-light-neutral-1 dark:fill-dark-neutral-1': color === 'neutral-1',
+        })}
+      />
+      <path
+        d="M34.4292 24.9109C32.0267 21.6528 30.5402 16.6574 30.862 12.9231L30.9615 11.7675L31.5084 11.8658C32.5354 12.0503 34.3061 12.6995 35.1353 13.1956C37.4106 14.5568 38.3957 16.3489 39.3978 20.9508C39.6914 22.2987 40.0765 23.8241 40.2537 24.3405C40.539 25.1717 41.6171 27.1133 42.4936 28.3743C43.1249 29.2824 42.7056 29.7128 41.31 29.5887C39.1787 29.3992 36.2917 27.4365 34.4292 24.9109Z"
+        className={cn({
+          'fill-light-accent-1 dark:fill-dark-accent-1': color === 'accent-1',
+          'fill-light-neutral-1 dark:fill-dark-neutral-1': color === 'neutral-1',
+        })}
+      />
+      <path
+        d="M71.3633 49.1593C60.1356 44.7064 56.1812 40.8412 56.1812 34.3196C56.1812 33.3598 56.2148 32.5746 56.2557 32.5746C56.2965 32.5746 56.7309 32.8913 57.221 33.2785C59.4977 35.0772 62.0472 35.8455 69.1052 36.8598C73.2585 37.4567 75.5958 37.9387 77.7518 38.6431C84.6046 40.8818 88.8445 45.4249 89.8555 51.6129C90.1494 53.4109 89.9771 56.7828 89.5007 58.5599C89.1247 59.9635 87.9771 62.4936 87.6727 62.5905C87.5884 62.6175 87.5056 62.2989 87.4839 61.8654C87.3685 59.5419 86.1765 57.2797 84.1746 55.5852C81.8985 53.6586 78.8404 52.1247 71.3633 49.1593Z"
+        className={cn({
+          'fill-light-accent-1 dark:fill-dark-accent-1': color === 'accent-1',
+          'fill-light-neutral-1 dark:fill-dark-neutral-1': color === 'neutral-1',
+        })}
+      />
+      <path
+        d="M63.4811 51.0092C63.3404 50.1846 63.0964 49.1316 62.9389 48.6691L62.6524 47.8283L63.1845 48.4167C63.9209 49.2308 64.5028 50.2726 64.996 51.6602C65.3724 52.7192 65.4148 53.0342 65.4119 54.7551C65.4091 56.4447 65.362 56.7988 65.0145 57.7521C64.4664 59.2552 63.7862 60.3211 62.6449 61.4652C60.5939 63.5212 57.9571 64.6596 54.1519 65.1318C53.4905 65.2137 51.5627 65.352 49.8679 65.4388C45.5968 65.6577 42.7857 66.1097 40.2597 66.9833C39.8966 67.109 39.5723 67.1854 39.5394 67.153C39.4372 67.0528 41.157 66.0429 42.5775 65.3689C44.5805 64.4185 46.5743 63.8999 51.0416 63.1671C53.2484 62.805 55.5274 62.3658 56.1061 62.191C61.571 60.5405 64.3801 56.2813 63.4811 51.0092Z"
+        className={cn({
+          'fill-light-accent-1 dark:fill-dark-accent-1': color === 'accent-1',
+          'fill-light-neutral-1 dark:fill-dark-neutral-1': color === 'neutral-1',
+        })}
+      />
+      <path
+        d="M68.628 60.013C67.1362 56.8543 66.7936 53.8044 67.6109 50.9601C67.6984 50.6562 67.8389 50.4075 67.9236 50.4075C68.008 50.4075 68.3601 50.5949 68.7057 50.824C69.3931 51.2798 70.7718 52.0475 74.4448 54.0202C79.0283 56.4817 81.6416 58.3877 83.4186 60.5654C84.975 62.4726 85.9381 64.6446 86.4017 67.2933C86.6641 68.7936 86.5103 72.4036 86.1195 73.9144C84.8872 78.678 82.0231 82.4198 77.938 84.6032C77.3395 84.923 76.8022 85.1857 76.744 85.1869C76.6859 85.188 76.904 84.6418 77.2287 83.973C78.6029 81.1434 78.7594 78.3909 77.7204 75.3272C77.0842 73.4514 75.7872 71.1624 73.1683 67.2939C70.1235 62.7961 69.377 61.5991 68.628 60.013Z"
+        className={cn({
+          'fill-light-accent-1 dark:fill-dark-accent-1': color === 'accent-1',
+          'fill-light-neutral-1 dark:fill-dark-neutral-1': color === 'neutral-1',
+        })}
+      />
+      <path
+        d="M26.4558 77.0564C30.6223 73.5911 35.8064 71.1292 40.5287 70.3736C42.5638 70.0479 45.9541 70.1772 47.8386 70.6523C50.8594 71.4138 53.5617 73.1194 54.967 75.1515C56.3404 77.1376 56.9297 78.8683 57.5431 82.719C57.7851 84.238 58.0483 85.7634 58.128 86.1087C58.5887 88.1044 59.4852 89.6996 60.5962 90.5008C62.3608 91.7729 65.3993 91.8521 68.3884 90.7035C68.8957 90.5086 69.3361 90.3739 69.3671 90.4042C69.4754 90.5103 67.9703 91.5028 66.9085 92.0252C65.4797 92.7282 64.3436 93 62.834 93C60.0964 93 57.8236 91.6282 55.9271 88.8311C55.5538 88.2806 54.715 86.6318 54.0629 85.1671C52.0606 80.6684 51.0718 79.2979 48.7468 77.798C46.7235 76.493 44.1142 76.2592 42.1512 77.2073C39.5726 78.4527 38.8532 81.6985 40.7 83.7555C41.434 84.573 42.8028 85.2782 43.9221 85.4153C46.016 85.6719 47.8154 84.1027 47.8154 82.0203C47.8154 80.6682 47.2878 79.8965 45.9596 79.3061C44.1456 78.4998 42.1957 79.4423 42.205 81.121C42.2091 81.8368 42.5255 82.2863 43.2539 82.611C43.7213 82.8192 43.7321 82.8357 43.351 82.7578C41.6866 82.4178 41.2966 80.4412 42.6349 79.129C44.2416 77.5538 47.5641 78.2488 48.705 80.3991C49.1844 81.3022 49.24 83.101 48.8221 84.187C47.8869 86.6181 45.1598 87.8964 42.3934 87.2008C40.5099 86.7271 39.743 86.2142 37.4721 83.9103C33.5261 79.9063 31.9942 79.1304 26.3055 78.2556L25.2153 78.088L26.4558 77.0564Z"
+        className={cn({
+          'fill-light-accent-1 dark:fill-dark-accent-1': color === 'accent-1',
+          'fill-light-neutral-1 dark:fill-dark-neutral-1': color === 'neutral-1',
+        })}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.94072 5.39491C21.1185 21.1494 30.1946 27.6495 31.2033 29.0228C32.036 30.1567 31.7226 31.1761 30.2959 31.9751C29.5026 32.4193 27.8715 32.8694 27.0548 32.8694C26.1311 32.8694 25.814 32.5184 25.814 32.5184C25.2784 32.018 24.9767 32.1055 22.2264 27.2966C18.408 21.4603 15.2126 16.6189 15.1254 16.5379C14.9238 16.3504 14.9273 16.3568 21.8371 28.5351C22.9535 31.0734 22.0591 32.0051 22.0591 32.3666C22.0591 33.1021 21.8554 33.4886 20.9344 34.5005C19.3991 36.1877 18.7128 38.0835 18.2173 42.0069C17.6619 46.4049 16.1001 49.5117 11.7718 54.8288C9.23824 57.9413 8.82367 58.5118 8.18437 59.7663C7.37912 61.3461 7.1577 62.2309 7.06796 64.2259C6.97311 66.335 7.15784 67.6975 7.81203 69.7141C8.38474 71.4796 8.98255 72.6453 10.5108 74.977C11.8297 76.9892 12.5891 78.4845 12.5891 79.0694C12.5891 79.5349 12.6793 79.5355 14.723 79.0809C19.6139 77.993 23.5853 76.0796 25.8189 73.7348C27.2012 72.2834 27.5257 71.4819 27.5363 69.4931C27.5432 68.1921 27.4967 67.9198 27.1397 67.1714C26.5586 65.9533 25.5007 64.9405 23.1689 63.3703C20.1137 61.3131 18.8088 59.6568 18.4484 57.3791C18.1527 55.5102 18.4957 54.1916 20.1859 50.7022C21.9353 47.0904 22.3688 45.5513 22.6621 41.9108C22.8515 39.5587 23.1138 38.6311 23.7998 37.8866C24.5153 37.1102 25.1594 36.8473 26.9302 36.6089C29.817 36.2205 31.6553 35.4847 33.1663 34.1132C34.477 32.9234 35.0255 31.777 35.1097 30.0512L35.1736 28.743L34.4411 27.9018C31.7884 24.8552 6.16425 3 6.00101 3C5.96614 3 6.83904 4.07778 7.94072 5.39491ZM14.0782 66.6124C14.6779 65.5661 14.3593 64.221 13.3561 63.564C12.4081 62.9431 10.9356 63.2355 10.9356 64.0446C10.9356 64.2915 11.0742 64.4711 11.3866 64.6295C11.9125 64.8961 11.9507 65.1959 11.5369 65.8086C11.1178 66.429 11.1516 66.9746 11.6324 67.3453C12.4071 67.9429 13.5038 67.6142 14.0782 66.6124Z"
+        className={cn({
+          'fill-light-accent-1 dark:fill-dark-accent-1': color === 'accent-1',
+          'fill-light-neutral-1 dark:fill-dark-neutral-1': color === 'neutral-1',
+        })}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M36.9954 37.2951C35.6402 37.7051 34.3228 39.12 33.915 40.6035C33.6662 41.5086 33.8074 43.0961 34.18 43.5865C34.782 44.3783 35.3642 44.587 36.9406 44.5761C40.0269 44.5549 42.7099 43.251 43.0218 41.621C43.2775 40.2849 42.0992 38.4332 40.476 37.6203C39.6385 37.201 37.8572 37.0346 36.9954 37.2951ZM40.6034 40.0741C41.0793 39.408 40.8711 38.688 40.0616 38.2011C38.5201 37.2739 36.189 38.0412 36.189 39.4756C36.189 40.1897 37.4046 40.9687 38.5189 40.9687C39.2606 40.9687 40.2755 40.5331 40.6034 40.0741Z"
+        className={cn({
+          'fill-light-accent-1 dark:fill-dark-accent-1': color === 'accent-1',
+          'fill-light-neutral-1 dark:fill-dark-neutral-1': color === 'neutral-1',
+        })}
+      />
+    </svg>
+  )
+}
+
+export const Sun: FC<{
+  className?: string
+  color?: 'neutral-2'
+}> = ({ className, color = 'neutral-2' }) => {
+  return (
+    <svg className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        className={cn({
+          'fill-light-neutral-2 dark:fill-dark-neutral-2': color === 'neutral-2',
+        })}
+        d="M11 8C11 9.654 9.654 11 8 11C6.346 11 5 9.654 5 8C5 6.346 6.346 5 8 5C9.654 5 11 6.346 11 8ZM8.5 3.33333V2C8.5 1.724 8.276 1.5 8 1.5C7.724 1.5 7.5 1.724 7.5 2V3.33333C7.5 3.60933 7.724 3.83333 8 3.83333C8.276 3.83333 8.5 3.60933 8.5 3.33333ZM8.5 14V12.6667C8.5 12.3907 8.276 12.1667 8 12.1667C7.724 12.1667 7.5 12.3907 7.5 12.6667V14C7.5 14.276 7.724 14.5 8 14.5C8.276 14.5 8.5 14.276 8.5 14ZM3.83333 8C3.83333 7.724 3.60933 7.5 3.33333 7.5H2C1.724 7.5 1.5 7.724 1.5 8C1.5 8.276 1.724 8.5 2 8.5H3.33333C3.60933 8.5 3.83333 8.276 3.83333 8ZM14.5 8C14.5 7.724 14.276 7.5 14 7.5H12.6667C12.3907 7.5 12.1667 7.724 12.1667 8C12.1667 8.276 12.3907 8.5 12.6667 8.5H14C14.276 8.5 14.5 8.276 14.5 8ZM5.054 5.054C5.24933 4.85866 5.24933 4.54199 5.054 4.34666L4.11133 3.40399C3.91599 3.20866 3.59933 3.20866 3.40399 3.40399C3.20866 3.59933 3.20866 3.91599 3.40399 4.11133L4.34666 5.054C4.44399 5.15133 4.57199 5.20066 4.69999 5.20066C4.82799 5.20066 4.956 5.15133 5.054 5.054ZM12.596 12.596C12.7913 12.4007 12.7913 12.084 12.596 11.8887L11.6533 10.946C11.458 10.7507 11.1413 10.7507 10.946 10.946C10.7507 11.1413 10.7507 11.458 10.946 11.6533L11.8887 12.596C11.986 12.6933 12.114 12.7427 12.242 12.7427C12.37 12.7427 12.4987 12.694 12.596 12.596ZM4.11133 12.596L5.054 11.6533C5.24933 11.458 5.24933 11.1413 5.054 10.946C4.85866 10.7507 4.54199 10.7507 4.34666 10.946L3.40399 11.8887C3.20866 12.084 3.20866 12.4007 3.40399 12.596C3.50133 12.6933 3.62932 12.7427 3.75732 12.7427C3.88532 12.7427 4.01333 12.694 4.11133 12.596ZM11.6533 5.054L12.596 4.11133C12.7913 3.91599 12.7913 3.59933 12.596 3.40399C12.4007 3.20866 12.084 3.20866 11.8887 3.40399L10.946 4.34666C10.7507 4.54199 10.7507 4.85866 10.946 5.054C11.0433 5.15133 11.1713 5.20066 11.2993 5.20066C11.4273 5.20066 11.5553 5.15133 11.6533 5.054Z"
+      />
+    </svg>
+  )
+}
+
+export const Menu: FC<{
+  className?: string
+  color?: 'neutral-2'
+}> = ({ className, color = 'neutral-2' }) => {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2 6C2 5.448 2.448 5 3 5H21C21.552 5 22 5.448 22 6C22 6.552 21.552 7 21 7H3C2.448 7 2 6.552 2 6ZM21 11H3C2.448 11 2 11.448 2 12C2 12.552 2.448 13 3 13H21C21.552 13 22 12.552 22 12C22 11.448 21.552 11 21 11ZM21 17H3C2.448 17 2 17.448 2 18C2 18.552 2.448 19 3 19H21C21.552 19 22 18.552 22 18C22 17.448 21.552 17 21 17Z"
+        className={cn({
+          'fill-light-neutral-2 dark:fill-dark-neutral-2': color === 'neutral-2',
+        })}
+      />
+    </svg>
+  )
+}
+export const Moon: FC<{
+  className?: string
+  color?: 'neutral-2'
+}> = ({ className, color = 'neutral-2' }) => {
+  return (
+    <svg className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        className={cn({
+          'fill-light-neutral-2 dark:fill-dark-neutral-2': color === 'neutral-2',
+        })}
+        d="M8.75534 1.33337C8.75734 1.33337 8.76001 1.33337 8.76201 1.33337C8.97468 1.33337 9.06667 1.59538 8.90667 1.73338C7.786 2.69804 7.17002 4.2147 7.48402 5.84937C7.83268 7.66337 9.32535 9.04403 11.182 9.29203C12.3547 9.4487 13.4407 9.15203 14.304 8.55937C14.4793 8.4387 14.712 8.59804 14.6594 8.80204C13.9234 11.6794 11.084 13.73 7.84467 13.268C5.15401 12.884 3.02935 10.7247 2.71068 8.06337C2.54402 6.67537 2.85933 5.36738 3.51333 4.28005C4.57333 2.51605 6.52401 1.33337 8.75534 1.33337Z"
+      />
+    </svg>
+  )
+}
+
+export type Icon = 'sun' | 'moon'
+
+export const IconMap: FC<{
+  icon: Icon
+  className?: string
+  color?: 'neutral-2'
+}> = ({ icon, color, className }) => {
+  switch (icon) {
+    case 'sun':
+      return <Sun color={color} className={className} />
+    case 'moon':
+      return <Moon color={color} className={className} />
+    default:
+      console.warn(`Icon ${icon} not found`)
+      return null
+  }
+}
diff --git a/src/components/ThemeSwitch/index.tsx b/src/components/ThemeSwitch/index.tsx
new file mode 100644
index 0000000000..7f12fe5aa9
--- /dev/null
+++ b/src/components/ThemeSwitch/index.tsx
@@ -0,0 +1,57 @@
+import React, { FC, useState, useEffect } from 'react'
+
+import { Switch } from '@headlessui/react'
+import { IconMap, Sun, Moon } from '../Icons'
+
+import { ThemeManager } from '../../utils/storage'
+
+import cn from 'classnames'
+
+const ThemeSwitch: FC<{ className?: string }> = ({ className }) => {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light')
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const currentTheme = ThemeManager.get()
+
+      if (!currentTheme) {
+        ThemeManager.set('light')
+      } else {
+        setTheme(currentTheme)
+      }
+    }
+  }, [])
+
+  const toggleTheme = () => {
+    setTheme((prev) => {
+      const newTheme = prev === 'dark' ? 'light' : 'dark'
+      ThemeManager.set(newTheme)
+      return newTheme
+    })
+  }
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme)
+    document.documentElement.setAttribute('class', theme)
+  }, [theme])
+
+  return (
+    <Switch
+      checked={theme === 'dark'}
+      onChange={toggleTheme}
+      className={cn('group relative inline-flex h-8 w-[3.75rem] items-center rounded-full', className, {
+        'bg-light-surface-3': theme === 'light',
+        'bg-dark-surface-3': theme === 'dark',
+      })}
+      aria-label="Toggle theme"
+    >
+      <span className="flex h-6 w-6 translate-x-1 items-center justify-center rounded-full bg-white transition group-data-[checked]:translate-x-8">
+        <IconMap className="h-4 w-4" icon={theme === 'dark' ? 'moon' : 'sun'} />
+      </span>
+      <Sun className="absolute left-2 h-4 w-4" />
+      <Moon className="absolute right-2 h-4 w-4" />
+    </Switch>
+  )
+}
+
+export default ThemeSwitch
diff --git a/src/css/custom.css b/src/css/custom.css
index 1ad2d6461e..5a25024124 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -6,6 +6,7 @@
  */
 
 /* You can override the default Infima variables here. */
+@import './infma-overrides.css';
 
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
@@ -15,5 +16,8 @@
 @import './types.css';
 
 :root {
-  /* add override here */
+  .Navbar {
+    .Navbar__logo-text {
+    }
+  }
 }
diff --git a/src/css/font.css b/src/css/font.css
index b5f1af37e4..67a8aef4f8 100644
--- a/src/css/font.css
+++ b/src/css/font.css
@@ -2,45 +2,45 @@
 
 @font-face {
   font-family: 'Basel Grotesk';
-  src: url('/fonts/baselGrotesk/Basel-Grotesk-Regular.woff2');
+  src: url('/fonts/Basel-Grotesk-Regular.woff2') format('woff2');
   font-weight: '400';
   font-style: 'normal';
 }
 
-@font-face {
+/* @font-face {
   font-family: 'Basel Grotesk';
-  src: url('/fonts/baselGrotesk/Basel-Grotesk-Regular-Italic.woff2');
+  src: url('/fonts/Basel-Grotesk-Regular-Italic.woff2') format('woff2');
   font-weight: '400';
   font-style: 'italic';
-}
+} */
 
 @font-face {
   font-family: 'Basel Grotesk';
-  src: url('/fonts/baselGrotesk/Basel-Grotesk-Book.woff2');
+  src: url('/fonts/Basel-Grotesk-Book.woff2') format('woff2');
   font-weight: '500';
   font-style: 'normal';
 }
 
-@font-face {
+/* @font-face {
   font-family: 'Basel Grotesk';
-  src: url('/fonts/baselGrotesk/Basel-Grotesk-Book-Italic.woff2');
+  src: url('/fonts/Basel-Grotesk-Book-Italic.woff2') format('woff2');
   font-weight: '500';
   font-style: 'italic';
-}
+} */
 
 @font-face {
   font-family: 'Basel Grotesk';
-  src: url('/fonts/baselGrotesk/Basel-Grotesk-Medium.woff2');
+  src: url('/fonts/Basel-Grotesk-Medium.woff2') format('woff2');
   font-weight: '600';
   font-style: 'normal';
 }
 
-@font-face {
+/* @font-face {
   font-family: 'Basel Grotesk';
-  src: url('/fonts/baselGrotesk/Basel-Grotesk-Medium-Italic.woff2');
+  src: url('/fonts/Basel-Grotesk-Medium-Italic.woff2') format('woff2');
   font-weight: '600';
   font-style: 'italic';
-}
+} */
 
 @font-face {
   font-family: 'Riegraf';
@@ -56,12 +56,12 @@
   font-style: 'normal';
 }
 
-@font-face {
+/* @font-face {
   font-family: 'Riegraf';
   src: url('/fonts/riegraf/Riegraf-Regular-Italic.otf');
   font-weight: '400';
   font-style: 'italic';
-}
+} */
 
 @font-face {
   font-family: 'Riegraf';
diff --git a/src/css/infma-overrides.css b/src/css/infma-overrides.css
new file mode 100644
index 0000000000..05853c06fc
--- /dev/null
+++ b/src/css/infma-overrides.css
@@ -0,0 +1,102 @@
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default padding */
+ul[class],
+ol[class] {
+  padding: 0;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+ul[class],
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  scroll-behavior: smooth;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* Remove list styles on ul, ol elements with a class attribute */
+ul[class],
+ol[class] {
+  list-style: none;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img {
+  max-width: 100%;
+  display: block;
+}
+
+/* Natural flow and rhythm in articles by default */
+article > * + * {
+  margin-top: 1em;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Remove all animations and transitions for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+button {
+  text-rendering: unset;
+  color: unset;
+  letter-spacing: unset;
+  word-spacing: unset;
+  line-height: unset;
+  text-transform: unset;
+  text-indent: unset;
+  text-shadow: unset;
+  display: unset;
+  text-align: unset;
+  align-items: unset;
+  cursor: pointer;
+  box-sizing: unset;
+  background-color: unset;
+  margin: unset;
+  padding-block: unset;
+  padding-inline: unset;
+  border-width: unset;
+  border-style: unset;
+  border-color: unset;
+  border-image: unset;
+}
diff --git a/src/css/types.css b/src/css/types.css
index c96aafc958..ae8532769d 100644
--- a/src/css/types.css
+++ b/src/css/types.css
@@ -4,7 +4,6 @@
   .serif-heading-0 {
     @apply font-riegraf;
     font-size: 4rem;
-    font-style: normal;
     font-weight: 300;
     line-height: 4rem;
     letter-spacing: -0.08rem;
@@ -15,7 +14,6 @@
   .heading-0 {
     @apply font-basel-grotesk;
     font-size: 4rem;
-    font-style: normal;
     font-weight: 485;
     line-height: 4rem;
     letter-spacing: -0.08rem;
@@ -26,7 +24,6 @@
   .heading-1 {
     @apply font-basel-grotesk;
     font-size: 3.25rem;
-    font-style: normal;
     font-weight: 485;
     line-height: 3.75rem;
     -webkit-font-smoothing: antialiased;
@@ -36,7 +33,6 @@
   .serif-heading-2 {
     @apply font-riegraf;
     font-size: 2.25rem;
-    font-style: normal;
     font-weight: 300;
     line-height: 2.75rem;
     -webkit-font-smoothing: antialiased;
@@ -46,7 +42,6 @@
   .heading-2 {
     @apply font-basel-grotesk;
     font-size: 2.25rem;
-    font-style: normal;
     font-weight: 485;
     line-height: 2.75rem;
     -webkit-font-smoothing: antialiased;
@@ -56,7 +51,6 @@
   .heading-3 {
     @apply font-basel-grotesk;
     font-size: 1.5rem;
-    font-style: normal;
     font-weight: 485;
     line-height: 2rem;
     -webkit-font-smoothing: antialiased;
@@ -66,7 +60,6 @@
   .heading-4 {
     @apply font-basel-grotesk;
     font-size: 1.25rem;
-    font-style: normal;
     font-weight: 485;
     line-height: 1.625rem;
     -webkit-font-smoothing: antialiased;
@@ -76,7 +69,6 @@
   .serif-subheading-1 {
     @apply font-riegraf;
     font-size: 1.125rem;
-    font-style: normal;
     font-weight: 400;
     line-height: 1.25rem;
     -webkit-font-smoothing: antialiased;
@@ -86,7 +78,6 @@
   .subheading-1 {
     @apply font-basel-grotesk;
     font-size: 1.125rem;
-    font-style: normal;
     font-weight: 485;
     line-height: 1.5rem;
     -webkit-font-smoothing: antialiased;
@@ -96,7 +87,6 @@
   .subheading-2 {
     @apply font-basel-grotesk;
     font-size: 1rem;
-    font-style: normal;
     font-weight: 485;
     line-height: 1.5rem;
     -webkit-font-smoothing: antialiased;
@@ -106,7 +96,6 @@
   .body-1 {
     @apply font-basel-grotesk;
     font-size: 1.125rem;
-    font-style: normal;
     font-weight: 485;
     line-height: 1.5rem;
     -webkit-font-smoothing: antialiased;
@@ -116,7 +105,6 @@
   .body-2 {
     @apply font-basel-grotesk;
     font-size: 1rem;
-    font-style: normal;
     font-weight: 485;
     line-height: 1/5rem;
     -webkit-font-smoothing: antialiased;
@@ -126,7 +114,6 @@
   .body-3 {
     @apply font-basel-grotesk;
     font-size: 0.875rem;
-    font-style: normal;
     font-weight: 485;
     line-height: 1/25rem;
     -webkit-font-smoothing: antialiased;
@@ -136,7 +123,6 @@
   .body-4 {
     @apply font-basel-grotesk;
     font-size: 0.75rem;
-    font-style: normal;
     font-weight: 485;
     line-height: 1rem;
     -webkit-font-smoothing: antialiased;
@@ -146,7 +132,6 @@
   .serif-caption-1 {
     @apply font-riegraf;
     font-size: 0.875rem;
-    font-style: normal;
     font-weight: 400;
     line-height: 1.25rem;
     -webkit-font-smoothing: antialiased;
@@ -156,7 +141,6 @@
   .caption-1 {
     @apply font-fragment-mono;
     font-size: 0.8125rem;
-    font-style: normal;
     font-weight: 400;
     line-height: 1.25rem;
     -webkit-font-smoothing: antialiased;
@@ -186,7 +170,6 @@
   .button-label-1 {
     @apply font-basel-grotesk;
     font-size: 1.125rem;
-    font-style: normal;
     font-weight: 600;
     line-height: 1.5rem;
     -webkit-font-smoothing: antialiased;
@@ -196,7 +179,6 @@
   .button-label-2 {
     @apply font-basel-grotesk;
     font-size: 1rem;
-    font-style: normal;
     font-weight: 600;
     line-height: 1.5rem;
     -webkit-font-smoothing: antialiased;
@@ -206,7 +188,6 @@
   .button-label-3 {
     @apply font-basel-grotesk;
     font-size: 0.875rem;
-    font-style: normal;
     font-weight: 600;
     line-height: 1.25rem;
     -webkit-font-smoothing: antialiased;
@@ -216,7 +197,6 @@
   .button-label-4 {
     @apply font-basel-grotesk;
     font-size: 0.75rem;
-    font-style: normal;
     font-weight: 600;
     line-height: 1rem;
     -webkit-font-smoothing: antialiased;
diff --git a/src/theme/Navbar.tsx b/src/theme/Navbar.tsx
new file mode 100644
index 0000000000..bd4086faf0
--- /dev/null
+++ b/src/theme/Navbar.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+
+import OriginalSearchbar from '@theme-original/SearchBar'
+import { MiniUnicon, Menu } from '../components/Icons'
+import ThemeSwitch from '../components/ThemeSwitch'
+
+export default function Navbar(props: { className: string; label: string }) {
+  return (
+    <nav className="Navbar fixed left-0 right-0 z-nav flex w-screen justify-center bg-light-surface-1 dark:border-dark-surface-3 dark:bg-dark-surface-1">
+      <div className="w-full h-nav-h flex flex-row justify-between items-center px-4 py-[1.15625rem] sm:px-[0.9375rem] sm:py-3">
+        <a className="flex flex-row items-center" href="/" target="_self">
+          <MiniUnicon className="w-8 h-8 mr-3" />
+          <p className="Navbar__logo-text body-1 text-light-accent-1 dark:text-dark-accent-1 mb-0">Uniswap Docs</p>
+        </a>
+        <div className="flex flex-row items-center">
+          <OriginalSearchbar />
+          <button
+            className="ml-3 flex items-center md:hidden"
+            onClick={() => {
+              console.log('open mobile menu')
+            }}
+          >
+            <Menu />
+          </button>
+        </div>
+        <div className="hidden md:flex flex-row items-center">
+          <ThemeSwitch />
+          <a
+            className="button-label-4 text-light-accent-1 dark:text-dark-accent-1 py-2 px-3 bg-light-accent-2 dark:bg-dark-accent-2 rounded-small ml-2"
+            href="https://docs.google.com/forms/d/e/1FAIpQLSdjSkZam8KiatL9XACRVxCHjDJjaPGbls77PCXDKFn4JwykXg/viewform"
+          >
+            Submit Feedback
+          </a>
+        </div>
+      </div>
+    </nav>
+  )
+}
diff --git a/src/theme/NavbarItem.tsx b/src/theme/NavbarItem.tsx
deleted file mode 100644
index be213947ad..0000000000
--- a/src/theme/NavbarItem.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useLocation } from '@docusaurus/router'
-import OriginalNavBarItem from '@theme-original/NavbarItem'
-import { TraceEvent } from '@uniswap/analytics'
-import { BrowserEvent, DocsProtocolVersion, SharedEventName } from '@uniswap/analytics-events'
-import React from 'react'
-
-enum ProtocolVersion {
-  V1 = 'V1',
-  V2 = 'V2',
-  V3 = 'V3',
-}
-
-const UNKNOWN_PROTOCOL_VERSION = 'UNKNOWN_PROTOCOL_VERSION'
-
-const getSection = (version: string) => {
-  switch (version) {
-    case ProtocolVersion.V1:
-      return DocsProtocolVersion.V1
-    case ProtocolVersion.V2:
-      return DocsProtocolVersion.V2
-    case ProtocolVersion.V3:
-      return DocsProtocolVersion.V3
-    default:
-      return UNKNOWN_PROTOCOL_VERSION
-  }
-}
-
-const getSelectedDocVersion = (docVersion: string) => {
-  switch (docVersion) {
-    case ProtocolVersion.V1:
-    case '1.0.0':
-      return ProtocolVersion.V1
-    case ProtocolVersion.V2:
-    case '2.0.0':
-      return ProtocolVersion.V2
-    // Default to the current doc version
-    default:
-      return ProtocolVersion.V3
-  }
-}
-
-const getClassName = (className: string, version: string) => {
-  return className + ' ' + version
-}
-
-export default function NavbarItem(props: { className: string; label: string }) {
-  const { pathname } = useLocation()
-
-  const docVersionFromPath = pathname.split('/')
-  const selectedDocVersion = getSelectedDocVersion(docVersionFromPath[2])
-
-  return (
-    <>
-      <TraceEvent
-        events={[BrowserEvent.onClick]}
-        element={props.label}
-        name={SharedEventName.NAVBAR_CLICKED}
-        section={getSection(selectedDocVersion)}
-      >
-        <OriginalNavBarItem {...props} className={getClassName(props.className, selectedDocVersion)} />
-      </TraceEvent>
-    </>
-  )
-}
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
new file mode 100644
index 0000000000..cd7c54c65b
--- /dev/null
+++ b/src/utils/storage.ts
@@ -0,0 +1,33 @@
+import Cookies from 'js-cookie'
+
+export class StorageManager<T> {
+  key: string
+
+  constructor(key: string) {
+    this.key = key
+  }
+
+  set(value: T): void {
+    const valueToSet = JSON.stringify(value)
+    Cookies.set(this.key, valueToSet, { expires: 365 })
+  }
+
+  get(): T | undefined {
+    const value = Cookies.get(this.key)
+
+    if (value) {
+      return JSON.parse(value)
+    }
+
+    return undefined
+  }
+
+  remove(): void {
+    Cookies.remove(this.key)
+  }
+}
+
+export type Theme = 'dark' | 'light'
+
+const THEME_STORAGE_NAME = 'uniswap-ui-theme'
+export const ThemeManager = new StorageManager<Theme>(THEME_STORAGE_NAME)
diff --git a/static/fonts/baselGrotesk/Basel-Grotesk-Book-Italic.otf b/static/fonts/Basel-Grotesk-Book-Italic.otf
similarity index 100%
rename from static/fonts/baselGrotesk/Basel-Grotesk-Book-Italic.otf
rename to static/fonts/Basel-Grotesk-Book-Italic.otf
diff --git a/static/fonts/baselGrotesk/Basel-Grotesk-Book-Italic.woff b/static/fonts/Basel-Grotesk-Book-Italic.woff
similarity index 100%
rename from static/fonts/baselGrotesk/Basel-Grotesk-Book-Italic.woff
rename to static/fonts/Basel-Grotesk-Book-Italic.woff
diff --git a/static/fonts/baselGrotesk/Basel-Grotesk-Book-Italic.woff2 b/static/fonts/Basel-Grotesk-Book-Italic.woff2
similarity index 100%
rename from static/fonts/baselGrotesk/Basel-Grotesk-Book-Italic.woff2
rename to static/fonts/Basel-Grotesk-Book-Italic.woff2
diff --git a/static/fonts/baselGrotesk/Basel-Grotesk-Book.otf b/static/fonts/Basel-Grotesk-Book.otf
similarity index 100%
rename from static/fonts/baselGrotesk/Basel-Grotesk-Book.otf
rename to static/fonts/Basel-Grotesk-Book.otf
diff --git a/static/fonts/baselGrotesk/Basel-Grotesk-Book.woff b/static/fonts/Basel-Grotesk-Book.woff
similarity index 100%
rename from static/fonts/baselGrotesk/Basel-Grotesk-Book.woff
rename to static/fonts/Basel-Grotesk-Book.woff
diff --git a/static/fonts/baselGrotesk/Basel-Grotesk-Book.woff2 b/static/fonts/Basel-Grotesk-Book.woff2
similarity index 100%
rename from static/fonts/baselGrotesk/Basel-Grotesk-Book.woff2
rename to static/fonts/Basel-Grotesk-Book.woff2
diff --git a/static/fonts/baselGrotesk/Basel-Grotesk-Medium-Italic.otf b/static/fonts/Basel-Grotesk-Medium-Italic.otf
similarity index 100%
rename from static/fonts/baselGrotesk/Basel-Grotesk-Medium-Italic.otf
rename to static/fonts/Basel-Grotesk-Medium-Italic.otf
diff --git a/static/fonts/baselGrotesk/Basel-Grotesk-Medium-Italic.woff b/static/fonts/Basel-Grotesk-Medium-Italic.woff
similarity index 100%
rename from static/fonts/baselGrotesk/Basel-Grotesk-Medium-Italic.woff
rename to static/fonts/Basel-Grotesk-Medium-Italic.woff
diff --git a/static/fonts/baselGrotesk/Basel-Grotesk-Medium-Italic.woff2 b/static/fonts/Basel-Grotesk-Medium-Italic.woff2
similarity index 100%
rename from static/fonts/baselGrotesk/Basel-Grotesk-Medium-Italic.woff2
rename to static/fonts/Basel-Grotesk-Medium-Italic.woff2
diff --git a/static/fonts/baselGrotesk/Basel-Grotesk-Medium.otf b/static/fonts/Basel-Grotesk-Medium.otf
similarity index 100%
rename from static/fonts/baselGrotesk/Basel-Grotesk-Medium.otf
rename to static/fonts/Basel-Grotesk-Medium.otf
diff --git a/static/fonts/baselGrotesk/Basel-Grotesk-Medium.woff b/static/fonts/Basel-Grotesk-Medium.woff
similarity index 100%
rename from static/fonts/baselGrotesk/Basel-Grotesk-Medium.woff
rename to static/fonts/Basel-Grotesk-Medium.woff
diff --git a/static/fonts/baselGrotesk/Basel-Grotesk-Medium.woff2 b/static/fonts/Basel-Grotesk-Medium.woff2
similarity index 100%
rename from static/fonts/baselGrotesk/Basel-Grotesk-Medium.woff2
rename to static/fonts/Basel-Grotesk-Medium.woff2
diff --git a/static/fonts/baselGrotesk/Basel-Grotesk-Regular-Italic.otf b/static/fonts/Basel-Grotesk-Regular-Italic.otf
similarity index 100%
rename from static/fonts/baselGrotesk/Basel-Grotesk-Regular-Italic.otf
rename to static/fonts/Basel-Grotesk-Regular-Italic.otf
diff --git a/static/fonts/baselGrotesk/Basel-Grotesk-Regular-Italic.woff b/static/fonts/Basel-Grotesk-Regular-Italic.woff
similarity index 100%
rename from static/fonts/baselGrotesk/Basel-Grotesk-Regular-Italic.woff
rename to static/fonts/Basel-Grotesk-Regular-Italic.woff
diff --git a/static/fonts/baselGrotesk/Basel-Grotesk-Regular-Italic.woff2 b/static/fonts/Basel-Grotesk-Regular-Italic.woff2
similarity index 100%
rename from static/fonts/baselGrotesk/Basel-Grotesk-Regular-Italic.woff2
rename to static/fonts/Basel-Grotesk-Regular-Italic.woff2
diff --git a/static/fonts/baselGrotesk/Basel-Grotesk-Regular.otf b/static/fonts/Basel-Grotesk-Regular.otf
similarity index 100%
rename from static/fonts/baselGrotesk/Basel-Grotesk-Regular.otf
rename to static/fonts/Basel-Grotesk-Regular.otf
diff --git a/static/fonts/baselGrotesk/Basel-Grotesk-Regular.woff b/static/fonts/Basel-Grotesk-Regular.woff
similarity index 100%
rename from static/fonts/baselGrotesk/Basel-Grotesk-Regular.woff
rename to static/fonts/Basel-Grotesk-Regular.woff
diff --git a/static/fonts/baselGrotesk/Basel-Grotesk-Regular.woff2 b/static/fonts/Basel-Grotesk-Regular.woff2
similarity index 100%
rename from static/fonts/baselGrotesk/Basel-Grotesk-Regular.woff2
rename to static/fonts/Basel-Grotesk-Regular.woff2
diff --git a/tailwind.config.js b/tailwind.config.js
index 2027474462..c02a64054d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -72,8 +72,7 @@ module.exports = {
         'gap-medium': rem(12),
         'gap-small': rem(8),
         'gap-x-small': rem(4),
-        'mobile-nav-h': rem(72),
-        'nav-h': rem(59),
+        'nav-h': rem(72),
       },
       boxShadow: {
         'light-short': '0px 1px 6px 2px rgba(0, 0, 0, 0.03), 0px 1px 2px 0px rgba(0, 0, 0, 0.02)',
diff --git a/yarn.lock b/yarn.lock
index 7b4f244640..e6c7bd6e25 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1691,6 +1691,42 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@floating-ui/core@^1.6.0":
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.8.tgz#aa43561be075815879305965020f492cdb43da12"
+  integrity sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==
+  dependencies:
+    "@floating-ui/utils" "^0.2.8"
+
+"@floating-ui/dom@^1.0.0":
+  version "1.6.12"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.12.tgz#6333dcb5a8ead3b2bf82f33d6bc410e95f54e556"
+  integrity sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==
+  dependencies:
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.8"
+
+"@floating-ui/react-dom@^2.1.2":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.2.tgz#a1349bbf6a0e5cb5ded55d023766f20a4d439a31"
+  integrity sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==
+  dependencies:
+    "@floating-ui/dom" "^1.0.0"
+
+"@floating-ui/react@^0.26.16":
+  version "0.26.27"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.27.tgz#402f7b4b2702650662705fe9cbe0f1d5607846a1"
+  integrity sha512-jLP72x0Kr2CgY6eTYi/ra3VA9LOkTo4C+DUTrbFgFOExKy3omYVmwMjNKqxAHdsnyLS96BIDLcO2SlnsNf8KUQ==
+  dependencies:
+    "@floating-ui/react-dom" "^2.1.2"
+    "@floating-ui/utils" "^0.2.8"
+    tabbable "^6.0.0"
+
+"@floating-ui/utils@^0.2.8":
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
+  integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
+
 "@hapi/hoek@^9.0.0", "@hapi/hoek@^9.3.0":
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb"
@@ -1703,6 +1739,16 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
+"@headlessui/react@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-2.2.0.tgz#a8e32f0899862849a1ce1615fa280e7891431ab7"
+  integrity sha512-RzCEg+LXsuI7mHiSomsu/gBJSjpupm6A1qIZ5sWjd7JhARNlMiSA4kKfJpCKwU9tE+zMRterhhrP74PvfJrpXQ==
+  dependencies:
+    "@floating-ui/react" "^0.26.16"
+    "@react-aria/focus" "^3.17.1"
+    "@react-aria/interactions" "^3.21.3"
+    "@tanstack/react-virtual" "^3.8.1"
+
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
@@ -1859,6 +1905,57 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.28.tgz#d45e01c4a56f143ee69c54dd6b12eade9e270a73"
   integrity sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==
 
+"@react-aria/focus@^3.17.1":
+  version "3.18.4"
+  resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.18.4.tgz#a6e95896bc8680d1b5bcd855e983fc2c195a1a55"
+  integrity sha512-91J35077w9UNaMK1cpMUEFRkNNz0uZjnSwiyBCFuRdaVuivO53wNC9XtWSDNDdcO5cGy87vfJRVAiyoCn/mjqA==
+  dependencies:
+    "@react-aria/interactions" "^3.22.4"
+    "@react-aria/utils" "^3.25.3"
+    "@react-types/shared" "^3.25.0"
+    "@swc/helpers" "^0.5.0"
+    clsx "^2.0.0"
+
+"@react-aria/interactions@^3.21.3", "@react-aria/interactions@^3.22.4":
+  version "3.22.4"
+  resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.22.4.tgz#88ed61ab6a485f869bc1f65ae6688d48ca96064b"
+  integrity sha512-E0vsgtpItmknq/MJELqYJwib+YN18Qag8nroqwjk1qOnBa9ROIkUhWJerLi1qs5diXq9LHKehZDXRlwPvdEFww==
+  dependencies:
+    "@react-aria/ssr" "^3.9.6"
+    "@react-aria/utils" "^3.25.3"
+    "@react-types/shared" "^3.25.0"
+    "@swc/helpers" "^0.5.0"
+
+"@react-aria/ssr@^3.9.6":
+  version "3.9.6"
+  resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.9.6.tgz#a9e8b351acdc8238f2b5215b0ce904636c6ea690"
+  integrity sha512-iLo82l82ilMiVGy342SELjshuWottlb5+VefO3jOQqQRNYnJBFpUSadswDPbRimSgJUZuFwIEYs6AabkP038fA==
+  dependencies:
+    "@swc/helpers" "^0.5.0"
+
+"@react-aria/utils@^3.25.3":
+  version "3.25.3"
+  resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.25.3.tgz#cad9bffc07b045cdc283df2cb65c18747acbf76d"
+  integrity sha512-PR5H/2vaD8fSq0H/UB9inNbc8KDcVmW6fYAfSWkkn+OAdhTTMVKqXXrZuZBWyFfSD5Ze7VN6acr4hrOQm2bmrA==
+  dependencies:
+    "@react-aria/ssr" "^3.9.6"
+    "@react-stately/utils" "^3.10.4"
+    "@react-types/shared" "^3.25.0"
+    "@swc/helpers" "^0.5.0"
+    clsx "^2.0.0"
+
+"@react-stately/utils@^3.10.4":
+  version "3.10.4"
+  resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.10.4.tgz#310663a834b67048d305e1680ed258130092fe51"
+  integrity sha512-gBEQEIMRh5f60KCm7QKQ2WfvhB2gLUr9b72sqUdIZ2EG+xuPgaIlCBeSicvjmjBvYZwOjoOEnmIkcx2GHp/HWw==
+  dependencies:
+    "@swc/helpers" "^0.5.0"
+
+"@react-types/shared@^3.25.0":
+  version "3.25.0"
+  resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.25.0.tgz#7223baf72256e918a3c29081bb1ecc6fad4fbf58"
+  integrity sha512-OZSyhzU6vTdW3eV/mz5i6hQwQUhkRs7xwY2d1aqPvTdMe0+2cY7Fwp45PAiwYLEj73i9ro2FxF9qC4DvHGSCgQ==
+
 "@saucelabs/theme-github-codeblock@https://github.com/Uniswap/docusaurus-theme-github-codeblock.git#f55fe4caed9fce974c9b82bf2164f76cc5509eef":
   version "0.2.0"
   resolved "https://github.com/Uniswap/docusaurus-theme-github-codeblock.git#f55fe4caed9fce974c9b82bf2164f76cc5509eef"
@@ -2005,6 +2102,13 @@
     "@svgr/plugin-jsx" "^6.5.1"
     "@svgr/plugin-svgo" "^6.5.1"
 
+"@swc/helpers@^0.5.0":
+  version "0.5.15"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.15.tgz#79efab344c5819ecf83a43f3f9f811fc84b516d7"
+  integrity sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==
+  dependencies:
+    tslib "^2.8.0"
+
 "@szmarczak/http-timer@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-1.1.2.tgz#b1665e2c461a2cd92f4c1bbf50d5454de0d4b421"
@@ -2012,6 +2116,18 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
+"@tanstack/react-virtual@^3.8.1":
+  version "3.10.9"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.10.9.tgz#40606b6dd8aba8e977f576d8f7df07f69ca63eea"
+  integrity sha512-OXO2uBjFqA4Ibr2O3y0YMnkrRWGVNqcvHQXmGvMu6IK8chZl3PrDxFXdGZ2iZkSrKh3/qUYoFqYe+Rx23RoU0g==
+  dependencies:
+    "@tanstack/virtual-core" "3.10.9"
+
+"@tanstack/virtual-core@3.10.9":
+  version "3.10.9"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.10.9.tgz#55710c92b311fdaa8d8c66682a0dbdd684bc77c4"
+  integrity sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==
+
 "@trysound/sax@0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
@@ -3280,6 +3396,11 @@ ci-info@^3.2.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
   integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
 
+classnames@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
 clean-css@^5.2.2, clean-css@^5.3.0:
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.3.tgz#b330653cd3bd6b75009cc25c714cae7b93351ccd"
@@ -3332,6 +3453,11 @@ clsx@^1.1.1, clsx@^1.2.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 
+clsx@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 collapse-white-space@^1.0.2:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
@@ -5940,6 +6066,11 @@ joi@^17.6.0:
     "@sideway/formula" "^3.0.1"
     "@sideway/pinpoint" "^2.0.0"
 
+js-cookie@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -8721,6 +8852,11 @@ svgo@^2.7.0, svgo@^2.8.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
+tabbable@^6.0.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
+
 table@^6.0.9:
   version "6.8.2"
   resolved "https://registry.yarnpkg.com/table/-/table-6.8.2.tgz#c5504ccf201213fa227248bdc8c5569716ac6c58"
@@ -8892,6 +9028,11 @@ tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0, tslib@^2.4.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.7.0.tgz#d9b40c5c40ab59e8738f297df3087bf1a2690c01"
   integrity sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==
 
+tslib@^2.8.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"