diff --git a/bindings/headlessui/Headlessui.res b/bindings/headlessui/Headlessui.res
new file mode 100644
index 00000000..c2ed18d8
--- /dev/null
+++ b/bindings/headlessui/Headlessui.res
@@ -0,0 +1,83 @@
+module Popover = {
+  type popoverChildrenRenderProps = {@as("open") open_: bool}
+
+  @module("@headlessui/react") @react.component
+  external make: (
+    ~as_: string=?,
+    ~children: popoverChildrenRenderProps => React.element=?,
+    ~className: string=?,
+  ) => React.element = "Popover"
+
+  module Overlay = {
+    @module("@headlessui/react") @scope("Popover") @react.component
+    external make: (~as_: string=?, ~children: 'children=?, ~className: string=?) => React.element =
+      "Overlay"
+  }
+
+  module Button = {
+    @module("@headlessui/react") @scope("Popover") @react.component
+    external make: (~as_: string=?, ~children: 'children=?, ~className: string=?) => React.element =
+      "Button"
+  }
+
+  module Panel = {
+    @module("@headlessui/react") @scope("Popover") @react.component
+    external make: (
+      ~as_: string=?,
+      ~focus: bool=?,
+      ~static: bool=?,
+      ~unmount: bool=?,
+      ~children: 'children=?,
+      ~className: string=?,
+    ) => React.element = "Panel"
+  }
+
+  module Group = {
+    @module("@headlessui/react") @scope("Popover") @react.component
+    external make: (~as_: string=?, ~children: 'children=?, ~className: string=?) => React.element =
+      "Group"
+  }
+}
+
+module Transition = {
+  @module("@headlessui/react") @react.component
+  external make: (
+    ~show: bool,
+    ~as_: string=?,
+    ~appear: bool=?,
+    ~unmount: bool=?,
+    ~enter: string=?,
+    ~enterFrom: string=?,
+    ~enterTo: string=?,
+    ~leave: string=?,
+    ~leaveFrom: string=?,
+    ~leaveTo: string=?,
+    ~beforeEnter: unit => unit=?,
+    ~afterEnter: unit => unit=?,
+    ~beforeLeave: unit => unit=?,
+    ~afterLeave: unit => unit=?,
+    ~children: 'children=?,
+    ~className: string=?,
+  ) => React.element = "Transition"
+
+  module Child = {
+    @module("@headlessui/react") @scope("Transition") @react.component
+    external make: (
+      ~as_: string=?,
+      ~appear: bool=?,
+      ~unmount: bool=?,
+      ~enter: string=?,
+      ~enterFrom: string=?,
+      ~enterTo: string=?,
+      ~leave: string=?,
+      ~leaveFrom: string=?,
+      ~leaveTo: string=?,
+      ~beforeEnter: unit => unit=?,
+      ~afterEnter: unit => unit=?,
+      ~beforeLeave: unit => unit=?,
+      ~afterLeave: unit => unit=?,
+      ~children: 'children,
+      ~className: string=?,
+    ) => React.element = "Child"
+  }
+}
diff --git a/bsconfig.json b/bsconfig.json
index 21aabb16..b4a1b770 100644
--- a/bsconfig.json
+++ b/bsconfig.json
@@ -16,6 +16,10 @@
     {
       "dir": "src"
     },
+    {
+      "dir": "bindings",
+      "subdirs": true
+    },
     {
       "dir": "pages",
       "subdirs": true
diff --git a/package.json b/package.json
index 88296068..9a4c7077 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@glennsl/bs-json": "^5.0.2",
+    "@headlessui/react": "^1.2.0",
     "@rescript/react": "^0.10.3",
     "bs-platform": "9.0.2",
     "next": "^10.2.0",
diff --git a/src/FlyoutMenu.res b/src/FlyoutMenu.res
new file mode 100644
index 00000000..a9553fb3
--- /dev/null
+++ b/src/FlyoutMenu.res
@@ -0,0 +1,75 @@
+module Popover = Headlessui.Popover
+module Transition = Headlessui.Transition
+module Link = Next.Link
+
+type item = {
+  name: string,
+  description: string,
+  href: string,
+  icon: React.element,
+}
+
+@react.component
+let make = (~name, ~items) =>
+  <Popover className="relative">
+    {({open_}) => <>
+      <Popover.Button
+        className={(
+          open_ ? "text-gray-900 " : "text-gray-500 "
+        ) ++ "group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"}>
+        <span> {React.string(name)} </span>
+        <svg
+          className={(
+            open_ ? "text-gray-600 " : "text-gray-400 "
+          ) ++ "ml-2 h-5 w-5 group-hover:text-gray-500"}
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          ariaHidden=true>
+          <path
+            fillRule="evenodd"
+            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </Popover.Button>
+      <Transition
+        show={open_}
+        as_={"div"}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1">
+        <Popover.Panel
+          static=true
+          className="absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0">
+          <div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
+            <div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
+              {Array.mapi(
+                (idx, item: NavEntry.t) =>
+                  <Link href=item.url key={Js.Int.toString(idx)}>
+                    <a
+                      key={item.label}
+                      href={item.url}
+                      className="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
+                      <i className="flex-shrink-0 h-6 w-6 text-indigo-600" ariaHidden=true>
+                        {item.icon}
+                      </i>
+                      <div className="ml-4">
+                        <p className="text-base font-medium text-gray-900">
+                          {React.string(item.label)}
+                        </p>
+                        <p className="mt-1 text-sm text-gray-500"> {React.string(item.text)} </p>
+                      </div>
+                    </a>
+                  </Link>,
+                items,
+              )->React.array}
+            </div>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </>}
+  </Popover>
diff --git a/src/HeaderNavigation.res b/src/HeaderNavigation.res
index 8facb94a..6771c9a9 100644
--- a/src/HeaderNavigation.res
+++ b/src/HeaderNavigation.res
@@ -52,165 +52,9 @@ let make = (~content) => {
           </a>
         </div>
         <nav className="hidden md:flex space-x-10 ">
-          <div className="relative">
-            <button
-              onClick={toggleMenu(Principles)}
-              type_="button"
-              className="text-gray-500  pl-2 group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orangedark"
-              ariaExpanded=false>
-              <span> {s(content.principlesSection.header)} </span>
-              <svg
-                className="text-gray-400 ml-2 h-5 w-5 group-hover:text-gray-500"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                ariaHidden=true>
-                <path
-                  fillRule="evenodd"
-                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </button>
-            <div
-              className={"absolute z-10 left-1/2 transform -translate-x-1/4 mt-3 px-2 w-screen max-w-sm sm:px-0 " ++
-              switch activeMenu {
-              | Some(Principles) => " opacity-100 translate-y-0 "
-              | _ => " hidden "
-              }}>
-              <div
-                className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
-                <div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-6 sm:p-8">
-                  {content.principlesSection.entries
-                  |> Js.Array.mapi((e: NavEntry.t, idx) =>
-                    <Link href=e.url key={Js.Int.toString(idx)}>
-                      <a
-                        onClick=hideMenu
-                        className="-m-3 p-3 block rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
-                        <div
-                          className="h-7 w-7 float-left fill-current stroke-current text-orangedark">
-                          {e.icon}
-                        </div>
-                        <dt>
-                          <p className="ml-10 text-sm font-semibold text-gray-900">
-                            {s(e.label)}
-                          </p>
-                        </dt>
-                        <dd className="ml-10 text-sm text-gray-500"> {s(e.text)} </dd>
-                      </a>
-                    </Link>
-                  )
-                  |> React.array}
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="relative">
-            <button
-              onClick={toggleMenu(Resources)}
-              type_="button"
-              className="text-gray-500 pl-2 group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orangedark"
-              ariaExpanded=false>
-              <span> {s(content.resourcesSection.header)} </span>
-              <svg
-                className="text-gray-400 ml-2 h-5 w-5 group-hover:text-gray-500"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                ariaHidden=true>
-                <path
-                  fillRule="evenodd"
-                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </button>
-            <div
-              className={"absolute z-10 left-1/2 transform -translate-x-1/3 mt-3 px-2 w-screen max-w-sm sm:px-0 " ++
-              switch activeMenu {
-              | Some(Resources) => " opacity-100 translate-y-0 "
-              | _ => " hidden "
-              }}>
-              <div
-                className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
-                <div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-6 sm:p-8">
-                  {content.resourcesSection.entries
-                  |> Js.Array.mapi((e: NavEntry.t, idx) =>
-                    <Link href=e.url key={Js.Int.toString(idx)}>
-                      <a
-                        onClick=hideMenu
-                        className="-m-3 p-3 block rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
-                        <div
-                          className="h-7 w-7 float-left fill-current stroke-current text-orangedark">
-                          {e.icon}
-                        </div>
-                        <dt>
-                          <p className="ml-10 text-sm font-semibold text-gray-900">
-                            {s(e.label)}
-                          </p>
-                        </dt>
-                        <dd className="ml-10 text-sm text-gray-500"> {s(e.text)} </dd>
-                      </a>
-                    </Link>
-                  )
-                  |> React.array}
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="relative">
-            <button
-              onClick={toggleMenu(Community)}
-              type_="button"
-              className="text-gray-500  pl-2 group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orangedark"
-              ariaExpanded=false>
-              <span> {s(content.communitySection.header)} </span>
-              <svg
-                className="text-gray-400 ml-2 h-5 w-5 group-hover:text-gray-500"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                ariaHidden=true>
-                <path
-                  fillRule="evenodd"
-                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </button>
-            <div
-              className={"absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-sm sm:px-0 " ++
-              switch activeMenu {
-              | Some(Community) => " opacity-100 translate-y-0 "
-              | _ => " hidden "
-              }}>
-              <div
-                className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
-                <div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-6 sm:p-8">
-                  {content.communitySection.entries
-                  |> Js.Array.mapi((e: NavEntry.t, idx) =>
-                    <Link href=e.url key={Js.Int.toString(idx)}>
-                      <a
-                        onClick=hideMenu
-                        className="-m-3 p-3 block rounded-md hover:bg-gray-50 transition ease-in-out duration-150">
-                        <div
-                          className="h-7 w-7 float-left fill-current stroke-current text-orangedark">
-                          {e.icon}
-                        </div>
-                        <dt>
-                          <p className="ml-10 text-sm font-semibold text-gray-900">
-                            {s(e.label)}
-                          </p>
-                        </dt>
-                        <dd className="ml-10 text-sm text-gray-500"> {s(e.text)} </dd>
-                      </a>
-                    </Link>
-                  )
-                  |> React.array}
-                </div>
-              </div>
-            </div>
-          </div>
+          <FlyoutMenu name="Principles" items=content.principlesSection.entries />
+          <FlyoutMenu name="Resources" items=content.resourcesSection.entries />
+          <FlyoutMenu name="Community" items=content.communitySection.entries />
         </nav>
         <div className="flex-1 flex items-center justify-center px-2 md:justify-end ">
           <div className="max-w-lg w-full md:max-w-xs">
diff --git a/tailwind.config.js b/tailwind.config.js
index c9aaf7f0..eaee5d02 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,5 @@
 module.exports = {
-  future: {
-    removeDeprecatedGapUtilities: true,
-    purgeLayersByDefault: true,
-  },
+  mode: 'jit',
   purge: {
     // Specify the paths to all of the template files in your project
     content: [
diff --git a/yarn.lock b/yarn.lock
index d30b5504..f55f1cf7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -87,6 +87,11 @@
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.1.1.tgz#9daf5745156fd84b8e9889a2dc721f0c58e894aa"
   integrity sha512-CAEbWH7OIur6jEOzaai83jq3FmKmv4PmX1JYfs9IrYcGEVI/lyL1EXJGCj7eFVJ0bg5QR8LMxBlEtA+xKiLpFw==
 
+"@headlessui/react@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.2.0.tgz#e48652bfce82ddf73d7f331faeb9db6526ee6874"
+  integrity sha512-19DkLz8gDgbi+WvkoTzi9vs0NK9TJf94vbYhMzB4LYJo03Kili0gmvXT9CiKZoxXZ7YAvy/b1U1oQKEnjWrqxw==
+
 "@next/env@10.2.0":
   version "10.2.0"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-10.2.0.tgz#154dbce2efa3ad067ebd20b7d0aa9aed775e7c97"
@@ -2147,7 +2152,6 @@ once@^1.3.0:
 
 "ood@git://github.com/ocaml/ood.git#main":
   version "0.0.0"
-  uid b37db9c51a252a7152be99c53346fd565ea7df65
   resolved "git://github.com/ocaml/ood.git#b37db9c51a252a7152be99c53346fd565ea7df65"
   dependencies:
     bs-platform "9.0.2"