diff --git a/www/components/Nav/Developers.tsx b/www/components/Nav/Developers.tsx
index 93c5a90920e..5cce019ab17 100644
--- a/www/components/Nav/Developers.tsx
+++ b/www/components/Nav/Developers.tsx
@@ -67,27 +67,27 @@ const Developers = () => {
           <ul className="mt-6 space-y-12">
             {AnnouncementsData.map((caseStudy: any, idx: number) => (
               <li className="flow-root" key={`flyout_case_${idx}`}>
-              <a
-                href={caseStudy.url}
-                className="-m-3 p-3 flex rounded-lg hover:bg-gray-100 dark:hover:bg-dark-600 transition ease-in-out duration-150"
-              >
-                <div className="hidden sm:block flex-shrink-0">
-                  <img
-                    className="w-32 h-20 object-cover rounded-md"
-                    src={caseStudy.imgUrl}
-                    alt="caseStudyThumb"
-                  />
-                </div>
-                <div className="min-w-0 flex-1 sm:ml-8">
-                  <h4 className="text-base font-medium text-gray-900 dark:text-white truncate">
-                    {caseStudy.title}
-                  </h4>
-                  <p className="mt-1 text-sm text-gray-500 dark:text-dark-300">
-                    {caseStudy.description}
-                  </p>
-                </div>
-              </a>
-            </li>
+                <a
+                  href={caseStudy.url}
+                  className="-m-3 p-3 flex rounded-lg hover:bg-gray-100 dark:hover:bg-dark-600 transition ease-in-out duration-150"
+                >
+                  <div className="hidden sm:block flex-shrink-0">
+                    <img
+                      className="w-32 h-20 object-cover rounded-md"
+                      src={caseStudy.imgUrl}
+                      alt="caseStudyThumb"
+                    />
+                  </div>
+                  <div className="min-w-0 flex-1 sm:ml-8">
+                    <h4 className="text-base font-medium text-gray-900 dark:text-white truncate">
+                      {caseStudy.title}
+                    </h4>
+                    <p className="mt-1 text-sm text-gray-500 dark:text-dark-300">
+                      {caseStudy.description}
+                    </p>
+                  </div>
+                </a>
+              </li>
             ))}
           </ul>
         </div>
diff --git a/www/components/Nav/index.tsx b/www/components/Nav/index.tsx
index 0e389f906b8..b4a24d7b680 100644
--- a/www/components/Nav/index.tsx
+++ b/www/components/Nav/index.tsx
@@ -27,7 +27,6 @@ const Nav = (props: Props) => {
     }
   }, [open])
 
-
   function handleNavClick() {
     // @ts-ignore
     ref.current
@@ -160,10 +159,10 @@ const Nav = (props: Props) => {
                 <Solutions />
               </FlyOut>
               <FlyOut title={'Developers'}>
-                <Developers/>
+                <Developers />
               </FlyOut>
               <FlyOut title={'Company'}>
-                <Company/>
+                <Company />
               </FlyOut>
               <a
                 href="https://supabase.io/docs/pricing"
diff --git a/www/components/UI/FlyOut.tsx b/www/components/UI/FlyOut.tsx
index 16ebcfc9f42..dd1a7f1d18c 100644
--- a/www/components/UI/FlyOut.tsx
+++ b/www/components/UI/FlyOut.tsx
@@ -3,15 +3,15 @@ import Transition from 'lib/Transition'
 
 type Props = {
   title?: string
-  children?: React.ReactNode,
-  className?: string,
-  renderTriggerElement?: any,
+  children?: React.ReactNode
+  className?: string
+  renderTriggerElement?: any
 }
 
-const FlyOut = (props :Props) => {
+const FlyOut = (props: Props) => {
   const { title = '', children, className = '', renderTriggerElement = null } = props
   const [show, setShow] = useState(false)
-  
+
   function handleToggle() {
     setShow(!show)
   }
@@ -31,32 +31,32 @@ const FlyOut = (props :Props) => {
       <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' : ''}
+          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>
-              </>
-            )
-        }
+        {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>
       <Transition
         appear={true}
@@ -87,7 +87,9 @@ const FlyOut = (props :Props) => {
               <div className="bg-gray-50 dark:bg-dark-500 sm:w-full sm:h-1/2 lg:w-1/2 lg:h-full"></div>
               {/* <div className="bg-gray-50 dark:bg-dark-300 md:hidden lg:block lg:w-1/2"></div> */}
             </div>
-            <div className={`relative max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 ${className}`}>
+            <div
+              className={`relative max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 ${className}`}
+            >
               {children}
             </div>
           </div>
diff --git a/www/pages/beta.tsx b/www/pages/beta.tsx
index 4dc075effb1..355aceba112 100644
--- a/www/pages/beta.tsx
+++ b/www/pages/beta.tsx
@@ -15,7 +15,7 @@ const site_title = `${APP_NAME} | We are now in Beta`
 const NavFlyOutMenu = (props: any) => {
   const { scrollTo } = props
   const segments = IntroductionSegments.map((segment: any) => segment.chapters)
-  
+
   return (
     <>
       <div className="col-span-12 grid grid-cols-12 items-center">
@@ -25,7 +25,9 @@ const NavFlyOutMenu = (props: any) => {
             className="col-span-4 px-6 py-8 text-dark-300 dark:text-dark-400 cursor-pointer bg-white hover:bg-dark-100"
           >
             <p className="flex items-center text-black dark:text-white">
-              <span className="font-mono text-xs text-dark-300 dark:text-dark-400 mr-2">0{segment.no}</span>
+              <span className="font-mono text-xs text-dark-300 dark:text-dark-400 mr-2">
+                0{segment.no}
+              </span>
               <span>{segment.name}</span>
             </p>
           </div>