diff --git a/src/core/Flyout.tsx b/src/core/Flyout.tsx
index 88ee095d..e3bf174e 100644
--- a/src/core/Flyout.tsx
+++ b/src/core/Flyout.tsx
@@ -9,6 +9,7 @@ import {
   NavigationMenuLink,
 } from "@radix-ui/react-navigation-menu";
 import cn from "./utils/cn";
+import { componentMaxHeight, HEADER_HEIGHT } from "./utils/heights";
 
 /**
  * Props for the Flyout component.
@@ -65,13 +66,15 @@ const DEFAULT_VIEWPORT_STYLING =
 const PANEL_ANIMATION =
   "data-[motion=from-end]:animate-enter-from-right data-[motion=from-start]:animate-enter-from-left data-[motion=to-end]:animate-exit-to-right data-[motion=to-start]:animate-exit-to-left";
 
-export const FlyOverlay = ({ className }: { className: string }) => {
-  return (
-    <div
-      className={cn("absolute left-0 right-0 h-screen w-full", className)}
-    ></div>
-  );
-};
+export const FlyOverlay = ({ className }: { className: string }) => (
+  <div
+    className={cn(
+      "absolute left-0 right-0 h-screen w-full opacity-0 animate-fade-in",
+      className,
+    )}
+    style={{ height: componentMaxHeight(HEADER_HEIGHT) }}
+  ></div>
+);
 
 const Flyout = ({
   menuItems,
@@ -85,7 +88,7 @@ const Flyout = ({
   return (
     <NavigationMenu
       className={cn(className, "flex w-full")}
-      onValueChange={(val) => (val ? setIsOpen(true) : setIsOpen(false))}
+      onValueChange={(val) => setIsOpen(!!val)}
     >
       <NavigationMenuList className="flex list-none center">
         {menuItems.map(({ label, content, link, panelStyling }) =>
diff --git a/src/core/Flyout/Flyout.stories.tsx b/src/core/Flyout/Flyout.stories.tsx
index be9b5af4..56d890c5 100644
--- a/src/core/Flyout/Flyout.stories.tsx
+++ b/src/core/Flyout/Flyout.stories.tsx
@@ -126,21 +126,18 @@ const menuItems = [
 const FlyoutStory = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
-  const flyOutDefaultArgs = {
-    menuItems: menuItems,
-    className: "justify-center relative z-40 ui-standard-container",
-    flyOutClassName: "flex w-full justify-center",
-    viewPortClassName:
-      "ui-shadow-lg-medium border border-neutral-000 dark:border-neutral-1300 rounded-2xl mt-8",
-    hasAnimation: true,
-    setIsOpen: setIsOpen,
-  };
-
   return (
     <div>
-      <Flyout {...flyOutDefaultArgs} />
+      <Flyout
+        menuItems={menuItems}
+        className="justify-center relative z-40 ui-standard-container"
+        flyOutClassName="flex w-full justify-center"
+        viewPortClassName="ui-shadow-lg-medium border border-neutral-000 dark:border-neutral-1300 rounded-2xl mt-8"
+        hasAnimation={true}
+        setIsOpen={setIsOpen}
+      />
       {isOpen && (
-        <FlyOverlay className="top-[52px] bg-neutral-1300 opacity-10 z-20" />
+        <FlyOverlay className="bg-neutral-1300 opacity-10 z-20 h-screen" />
       )}
     </div>
   );
diff --git a/tailwind.config.js b/tailwind.config.js
index 05b2288e..1af6b5f1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -360,6 +360,7 @@ module.exports = {
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        "fade-in": "fadeInTenPercent 250ms ease",
         "scale-in": "scale-in 200ms ease",
         "scale-out": "scale-out 200ms ease",
         "enter-from-left": "enter-from-left 250ms ease",