diff --git a/www/components/Hero.tsx b/www/components/Hero.tsx
index b601e736d9b..d0a286c120d 100644
--- a/www/components/Hero.tsx
+++ b/www/components/Hero.tsx
@@ -64,11 +64,6 @@ const Hero = () => {
                             src="images/logos/mozilla--grey.png"
                             alt="Mozilla"
                           />
-                          <img
-                            className="h-3 sm:h-5 pr-10"
-                            src="images/logos/coatue.png"
-                            alt="Coatue"
-                          />
                         </div>
                       </div>
                     </div>
diff --git a/www/components/Nav/index.tsx b/www/components/Nav/index.tsx
index b4a24d7b680..85adc806c1a 100644
--- a/www/components/Nav/index.tsx
+++ b/www/components/Nav/index.tsx
@@ -17,6 +17,10 @@ const Nav = (props: Props) => {
   const { darkMode } = props
   const [open, setOpen] = useState(false)
 
+  const [openProduct, setOpenProduct] = useState(false)
+  const [openDevelopers, setOpenDevelopers] = useState(false)
+  const [openCompany, setOpenCompany] = useState(false)
+
   React.useEffect(() => {
     if (open) {
       console.log('open if')
@@ -25,11 +29,25 @@ const Nav = (props: Props) => {
     } else {
       document.body.style.overflow = 'auto'
     }
+
+    // window is accessible here.
+    window.addEventListener('scroll', function (e) {
+      // close Fly Outs window if user scrolls past 96px from top
+      if (window.pageYOffset > 96) {
+        handleCancel()
+      }
+    })
   }, [open])
 
-  function handleNavClick() {
-    // @ts-ignore
-    ref.current
+  function handleToggle(callback: any) {
+    handleCancel()
+    callback()
+  }
+
+  function handleCancel() {
+    setOpenProduct(false)
+    setOpenDevelopers(false)
+    setOpenCompany(false)
   }
 
   const iconSections = Object.values(SolutionsData).map((solution: any, idx: number) => {
@@ -135,6 +153,36 @@ const Nav = (props: Props) => {
     </div>
   )
 
+  const FlyOutNavButton = (props: any) => (
+    <div
+      className={`
+                  inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700
+                  dark:text-dark-100
+                `}
+      onClick={props.onClick}
+    >
+      <>
+        <span>{props.title}</span>
+        <svg
+          className={
+            'ml-2 h-5 w-5 text-gray-300 group-hover:text-gray-300 transition ease-in-out duration-150' +
+            (props.active && ' transform rotate-180')
+          }
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          aria-hidden="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>
+      </>
+    </div>
+  )
+
   return (
     <nav className="bg-white dark:bg-dark-700 z-50 sticky">
       <div className="lg:container mx-auto relative flex justify-between h-16 lg:px-10 xl:px-0">
@@ -155,13 +203,29 @@ const Nav = (props: Props) => {
               />
             </div>
             <div className="pl-4 hidden sm:ml-6 lg:flex sm:space-x-8">
-              <FlyOut title={'Product'}>
+              <FlyOutNavButton
+                title={'Product'}
+                onClick={() => handleToggle(() => setOpenProduct(!openProduct))}
+                active={openProduct}
+              />
+              <FlyOutNavButton
+                title={'Developers'}
+                onClick={() => handleToggle(() => setOpenDevelopers(!openDevelopers))}
+                active={openDevelopers}
+              />
+              <FlyOutNavButton
+                title={'Company'}
+                onClick={() => handleToggle(() => setOpenCompany(!openCompany))}
+                active={openCompany}
+              />
+
+              <FlyOut open={openProduct} handleCancel={handleCancel}>
                 <Solutions />
               </FlyOut>
-              <FlyOut title={'Developers'}>
+              <FlyOut open={openDevelopers} handleCancel={handleCancel}>
                 <Developers />
               </FlyOut>
-              <FlyOut title={'Company'}>
+              <FlyOut open={openCompany} handleCancel={handleCancel}>
                 <Company />
               </FlyOut>
               <a
@@ -181,11 +245,9 @@ const Nav = (props: Props) => {
               href="https://app.supabase.io?auth=signup"
               className={`
                 inline-flex items-center border-b-2 border-transparent text-sm font-normal transition
-                rounded-md px-3 py-1 mr-5 bg-brand-600 text-white hover:bg-brand-700 hidden lg:block
+                rounded-md px-3 py-1 mr-5 bg-brand-700 text-white hover:bg-brand-800 hidden lg:block
               `}
-            >
-              Start your project
-            </a>
+            >Start your project</a>
             <a
               href="https://app.supabase.io?auth=signin"
               className={`
diff --git a/www/components/UI/FlyOut.tsx b/www/components/UI/FlyOut.tsx
index b3fa6874660..219a67340c1 100644
--- a/www/components/UI/FlyOut.tsx
+++ b/www/components/UI/FlyOut.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useImperativeHandle } from 'react'
+import React, { useState, useEffect, useImperativeHandle, forwardRef } from 'react'
 import Transition from 'lib/Transition'
 
 type Props = {
@@ -6,6 +6,8 @@ type Props = {
   children?: React.ReactNode
   className?: string
   renderTriggerElement?: any
+  open?: boolean
+  handleCancel?: any
   singleBgColor?: boolean
 }
 
@@ -13,55 +15,48 @@ const FlyOut = (props: Props) => {
   const { title = '', children, className = '', renderTriggerElement = null, singleBgColor = false } = props
   const [show, setShow] = useState(false)
 
-  function handleToggle() {
-    setShow(!show)
-  }
 
-  useEffect(() => {
-    // window is accessible here.
-    window.addEventListener('scroll', function (e) {
-      // close Fly Out window if user scrolls past 96px from top
-      if (window.pageYOffset > 96) {
-        setShow(false)
-      }
-    })
-  }, [])
+  // function handleToggle() {
+  //   setShow(!show)
+  //   props.handleClick()
+  // }
+
+  // useImperativeHandle(
+  //   ref,
+  //   () => ({
+  //       close() {
+  //         setShow(false)
+  //       }
+  //   }),
+  // )
+
+  // useEffect(() => {
+  //   // window is accessible here.
+  //   window.addEventListener('scroll', function (e) {
+  //     // close Fly Out window if user scrolls past 96px from top
+  //     if (window.pageYOffset > 96) {
+  //       setShow(false)
+  //     }
+  //   })
+  // }, [])
 
   return (
     <>
-      <div
-        className={`
+      {renderTriggerElement && (
+        <div
+          className={`
           inline-flex items-center px-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:text-gray-700
           dark:text-dark-100 ${
             renderTriggerElement === null ? 'hover:border-gray-300 dark:hover:border-dark-100' : ''
           }
         `}
-        onClick={() => handleToggle()}
-      >
-        {renderTriggerElement !== null ? (
-          <>{renderTriggerElement()}</>
-        ) : (
-          <>
-            <span>{title}</span>
-            <svg
-              className="ml-2 h-5 w-5 text-gray-300 group-hover:text-gray-300 transition ease-in-out duration-150"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-              aria-hidden="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>
-          </>
-        )}
-      </div>
+        >
+          {renderTriggerElement()}
+        </div>
+      )}
       <Transition
         appear={true}
-        show={show}
+        show={props.open}
         enter="transition ease-out duration-200"
         enterFrom="opacity-0 translate-y-1"
         enterTo="opacity-100 translate-y-0"
@@ -95,13 +90,14 @@ const FlyOut = (props: Props) => {
             </div>
           </div>
           <div
-            className="fixed inset-0 transition-opacity bg-red"
+            className="fixed inset-0 t-63 transition-opacity bg-red"
             style={{
-              zIndex: 100,
+              zIndex: 10,
+              top: '63px',
               marginLeft: 0,
               pointerEvents: 'visiblePainted',
             }}
-            onClick={() => handleToggle()}
+            onClick={() => props.handleCancel()}
           >
             <div className="absolute inset-0 opacity-0"></div>
           </div>