diff --git a/app/modules/cart.tsx b/app/modules/cart.tsx
index 0aabe2e7..fc9c1b16 100644
--- a/app/modules/cart.tsx
+++ b/app/modules/cart.tsx
@@ -281,7 +281,7 @@ function CartLineItem({ line, layout }: { line: CartLine; layout: Layouts }) {
             <div>
               {merchandise?.product?.handle ? (
                 <Link to={`/products/${merchandise.product.handle}`}>
-                  <span className="underline-animation">
+                  <span className="reveal-underline">
                     {merchandise?.product?.title || ""}
                   </span>
                 </Link>
diff --git a/app/modules/footer.tsx b/app/modules/footer.tsx
index 6cdeeec1..aced7097 100644
--- a/app/modules/footer.tsx
+++ b/app/modules/footer.tsx
@@ -198,7 +198,7 @@ function FooterMenu({
           <div className="flex flex-col gap-2">
             {items.map((item, ind) => (
               <Link to={item.to} key={ind} className="relative">
-                <span className="underline-animation">{item.title}</span>
+                <span className="reveal-underline">{item.title}</span>
               </Link>
             ))}
           </div>
diff --git a/app/modules/header/cart-count.tsx b/app/modules/header/cart-count.tsx
index adfe9a3f..34a715d6 100644
--- a/app/modules/header/cart-count.tsx
+++ b/app/modules/header/cart-count.tsx
@@ -67,10 +67,10 @@ function Badge({
               "flex items-center justify-center min-w-4 rounded-full p-0.5",
               "absolute top-0 -right-1",
               "transition-colors duration-300",
-              "group-hover/header:bg-[var(--color-header-text)] group-hover/header:text-[var(--color-header-bg)]",
+              "group-hover/header:bg-[var(--color-header-text)] group-hover/header:text-[--color-header-bg]",
               isTransparent
-                ? "text-[var(--color-header-text)] bg-[var(--color-transparent-header-text)]"
-                : "bg-[var(--color-header-text)] text-[var(--color-header-bg)]",
+                ? "text-[--color-header-text] bg-[--color-transparent-header-text]"
+                : "bg-[--color-header-text] text-[--color-header-bg]",
             )}
           >
             <span>{count}</span>
diff --git a/app/modules/header/desktop-header.tsx b/app/modules/header/desktop-header.tsx
index 815cd2e3..2fbe4715 100644
--- a/app/modules/header/desktop-header.tsx
+++ b/app/modules/header/desktop-header.tsx
@@ -74,12 +74,12 @@ export function DesktopHeader({
     >
       <div
         className={cn(
-          "h-nav flex items-center justify-between leading-none gap-8",
+          "h-nav flex items-center justify-between gap-8",
           variants({ width: headerWidth }),
         )}
       >
         <Logo isTransparent={isTransparent} shopName={shopName} />
-        {menu && <DesktopMenu menu={menu} />}
+        <DesktopMenu menu={menu} />
         <div className="flex items-center gap-1 z-1">
           <SearchToggle
             isOpen={isOpen}
diff --git a/app/modules/header/menu/desktop-menu.tsx b/app/modules/header/menu/desktop-menu.tsx
index 6e60b7a9..3fb21a9d 100644
--- a/app/modules/header/menu/desktop-menu.tsx
+++ b/app/modules/header/menu/desktop-menu.tsx
@@ -1,187 +1,184 @@
+import { CaretDown } from "@phosphor-icons/react";
+import * as Menubar from "@radix-ui/react-menubar";
 import { Image } from "@shopify/hydrogen";
+import { useThemeSettings } from "@weaverse/hydrogen";
 import clsx from "clsx";
-import React from "react";
-import { IconCaretDown } from "~/components/icons";
-import { Link } from "~/components/link";
+import { useState } from "react";
+import Link from "~/components/link";
+import { cn } from "~/lib/cn";
 import { getMaxDepth } from "~/lib/menu";
 import type { SingleMenuItem } from "~/lib/type";
 import type { EnhancedMenu } from "~/lib/utils";
 
 export function DesktopMenu({ menu }: { menu: EnhancedMenu }) {
-  let items = menu.items as unknown as SingleMenuItem[];
-  if (!items) return null;
-  return (
-    <nav className="flex items-stretch h-full">
-      {items.map((item) => {
-        let { id, items = [] } = item;
-        let level = getMaxDepth(item);
-        let isAllImageItems =
-          items.length &&
-          items.every(
-            (childItem) =>
-              childItem?.resource?.image && childItem.items.length === 0,
-          );
-        let MenuComponent: React.FC<SingleMenuItem> = isAllImageItems
-          ? ImagesMenu
-          : level > 2
-            ? MegaMenu
-            : level === 2
-              ? DropdownMenu
-              : FirstLevelMenu;
+  let { openMenuBy } = useThemeSettings();
+  let [value, setValue] = useState<string | null>(null);
+  if (menu?.items?.length) {
+    let items = menu.items as unknown as SingleMenuItem[];
+    return (
+      <Menubar.Root
+        asChild
+        value={value}
+        onValueChange={setValue}
+        onMouseLeave={() => setValue(null)}
+      >
+        <nav className="flex grow justify-center h-full">
+          {items.map((menuItem) => {
+            let { id, items = [], title, to } = menuItem;
+            let level = getMaxDepth(menuItem);
+            let hasSubmenu = level > 1;
+            let isDropdown =
+              level === 2 && items.every(({ resource }) => !resource?.image);
+            return (
+              <Menubar.Menu key={id} value={id}>
+                <Menubar.Trigger
+                  asChild={!hasSubmenu}
+                  className={clsx([
+                    "cursor-pointer px-3 py-2 h-full flex items-center gap-1.5",
+                    '[&>svg]:data-[state="open"]:rotate-180',
+                    "focus:outline-none uppercase",
+                  ])}
+                  onMouseEnter={() => {
+                    if (openMenuBy === "hover" && value !== id) {
+                      setValue(id);
+                    }
+                  }}
+                >
+                  {hasSubmenu ? (
+                    <>
+                      <span>{title}</span>
+                      <CaretDown className="w-3.5 h-3.5 transition-transform" />
+                    </>
+                  ) : (
+                    <Link to={to} className="transition-none">
+                      {title}
+                    </Link>
+                  )}
+                </Menubar.Trigger>
+                {level > 1 && (
+                  <Menubar.Content
+                    className={cn([
+                      "px-3 md:px-4 lg:px-6",
+                      "bg-[--color-header-bg] shadow-lg",
+                      isDropdown ? "py-6" : "w-screen py-8",
+                    ])}
+                  >
+                    {isDropdown ? (
+                      <DropdownSubMenu items={items} />
+                    ) : (
+                      <MegaMenu items={items} />
+                    )}
+                  </Menubar.Content>
+                )}
+              </Menubar.Menu>
+            );
+          })}
+        </nav>
+      </Menubar.Root>
+    );
+  }
+  return null;
+}
 
-        return <MenuComponent key={id} {...item} />;
-      })}
-    </nav>
+function DropdownSubMenu({ items }: { items: SingleMenuItem[] }) {
+  return (
+    <ul
+      className="space-y-1.5 animate-fade-in"
+      style={{ "--fade-in-duration": "150ms" } as React.CSSProperties}
+    >
+      {items.map(({ id, to, title }) => (
+        <Link
+          key={id}
+          to={to}
+          prefetch="intent"
+          className="transition-none block"
+        >
+          <span className="reveal-underline">{title}</span>
+        </Link>
+      ))}
+    </ul>
   );
 }
 
-function MegaMenu({ title, items, to }: SingleMenuItem) {
-  let renderList = (item: SingleMenuItem, idx: number) => (
-    <div
-      key={item.id}
-      className="flex-1 fly-in max-w-60 space-y-4"
-      style={{ "--item-index": idx } as React.CSSProperties}
-    >
-      <Link
-        to={item.to}
-        prefetch="intent"
-        className="uppercase transition-none"
-      >
-        <span className="underline-animation">{item.title}</span>
-      </Link>
-      <ul className="space-y-1.5">
-        {item.items.map((subItem) => (
-          <li key={subItem.id} className="leading-6">
+function MegaMenu({ items }: { items: SingleMenuItem[] }) {
+  return (
+    <div className="max-w-page mx-auto flex gap-4">
+      {items.map(({ id, title, to, items: children, resource }, idx) =>
+        resource?.image && children.length === 0 ? (
+          <SlideIn
+            key={id}
+            className="grow max-w-72 aspect-square relative group/item overflow-hidden"
+            style={{ "--idx": idx } as React.CSSProperties}
+          >
+            <Image
+              sizes="auto"
+              data={resource.image}
+              className="w-full h-full object-cover group-hover/item:scale-[1.03] transition-transform duration-300"
+            />
             <Link
-              to={subItem.to}
+              to={to}
               prefetch="intent"
-              className="relative transition-none"
+              className={clsx([
+                "absolute inset-0 p-2 flex items-center justify-center text-center",
+                "bg-black/20 group-hover/item:bg-black/40",
+                "h6 text-body-inverse font-medium transition-all duration-300",
+              ])}
             >
-              <span className="underline-animation">{subItem.title}</span>
+              {title}
             </Link>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-
-  let renderImageItem = (item: SingleMenuItem, idx: number) => (
-    <div
-      className="flex-1 w-full aspect-[4/5] relative group/item overflow-hidden fly-in max-w-60"
-      key={idx}
-      style={{ "--item-index": idx } as React.CSSProperties}
-    >
-      <Link to={item.to} prefetch="intent" className="transition-none">
-        <Image
-          sizes="auto"
-          data={item.resource?.image}
-          className="w-full h-full object-cover group-hover/item:scale-110 transition-transform duration-300"
-        />
-      </Link>
-      <div className="absolute w-full inset-0 text-center text-white font-medium pointer-events-none p-2 bg-black/15 group-hover/item:bg-black/30 flex items-center justify-center transition-all duration-300">
-        {item.title}
-      </div>
-    </div>
-  );
-  return (
-    <FirstLevelMenu title={title} to={to}>
-      <div className="w-screen top-full left-0 absolute shadow-lg overflow-hidden bg-white z-10 dropdown-transition">
-        <div className="container mx-auto py-8">
-          <div className="flex gap-4 w-full">
-            {items.map((item, id) =>
-              item.resource && item.items.length === 0
-                ? renderImageItem(item, id)
-                : renderList(item, id),
-            )}
-          </div>
-          <div className="flex gap-6" />
-        </div>
-      </div>
-    </FirstLevelMenu>
-  );
-}
-
-function DropdownMenu(props: SingleMenuItem) {
-  let { title, items, to } = props;
-  return (
-    <FirstLevelMenu title={title} to={to} className="relative">
-      <div className="top-full -left-3 group-hover:h-auto absolute shadow-lg overflow-hidden bg-white z-10 dropdown-transition">
-        <div className="p-6 min-w-48">
-          <ul className="space-y-1.5">
-            {items.map((childItem) => (
-              <li key={childItem.id} className="leading-6">
+          </SlideIn>
+        ) : (
+          <SlideIn
+            key={id}
+            className="grow max-w-72 space-y-4"
+            style={{ "--idx": idx } as React.CSSProperties}
+          >
+            <Link
+              to={to}
+              prefetch="intent"
+              className="uppercase inline transition-none"
+            >
+              <span className="reveal-underline">{title}</span>
+            </Link>
+            <div className="flex flex-col gap-1.5">
+              {children.map((cItem) => (
                 <Link
-                  to={childItem.to}
+                  key={cItem.id}
+                  to={cItem.to}
                   prefetch="intent"
-                  className="transition-none"
+                  className="relative inline transition-none"
                 >
-                  <span className="underline-animation">{childItem.title}</span>
+                  <span className="reveal-underline">{cItem.title}</span>
                 </Link>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    </FirstLevelMenu>
-  );
-}
-
-function ImagesMenu({ title, items, to }: SingleMenuItem) {
-  return (
-    <FirstLevelMenu title={title} to={to}>
-      <div className="w-screen top-full left-0 absolute shadow-lg overflow-hidden bg-white z-10 dropdown-transition">
-        <div className="py-8">
-          <div className="flex gap-6 w-fit container mx-auto">
-            {items.map((item, id) => (
-              <Link
-                to={item.to}
-                prefetch="intent"
-                key={item.id}
-                className="flex-1 fly-in transition-none"
-                style={{ "--item-index": id } as React.CSSProperties}
-              >
-                <div className="aspect-square relative group/item overflow-hidden">
-                  <Image
-                    data={item?.resource?.image}
-                    className="w-full h-full object-cover group-hover/item:scale-105 transition-transform duration-400"
-                    sizes="auto"
-                  />
-                  <h6 className="absolute w-full inset-0 text-center text-background p-2 bg-gray-100/15 group-hover/item:bg-gray-100/40 flex items-center justify-center transition-all duration-300">
-                    {item.title}
-                  </h6>
-                </div>
-              </Link>
-            ))}
-          </div>
-        </div>
-      </div>
-    </FirstLevelMenu>
+              ))}
+            </div>
+          </SlideIn>
+        ),
+      )}
+    </div>
   );
 }
 
-function FirstLevelMenu(props: {
+function SlideIn(props: {
   className?: string;
-  title: string;
-  to: string;
-  children?: React.ReactNode;
+  children: React.ReactNode;
+  style: React.CSSProperties;
 }) {
-  let { children, className, title, to } = props;
-  let hasChild = React.Children.count(children) > 0;
+  let { className, children, style } = props;
   return (
-    <div className={clsx("group", className)}>
-      <div className="h-full flex items-center px-3 cursor-pointer relative z-30">
-        <Link
-          to={to}
-          className="py-2 flex items-center gap-1.5 transition-none"
-        >
-          <span className="uppercase underline-animation !pb-[5px]">
-            {title}
-          </span>
-          {hasChild && (
-            <IconCaretDown className="w-3 h-3 mb-[3px] group-hover:rotate-180 transition-transform duration-400" />
-          )}
-        </Link>
-      </div>
+    <div
+      className={cn(
+        "opacity-0 animate-slide-left-and-fade [animation-delay:calc(var(--idx)*0.1s+0.1s)]",
+        className,
+      )}
+      style={
+        {
+          "--left-distance": "60px",
+          "--slide-left-and-fade-duration": "200ms",
+          ...style,
+        } as React.CSSProperties
+      }
+    >
       {children}
     </div>
   );
diff --git a/app/modules/header/mobile-header.tsx b/app/modules/header/mobile-header.tsx
index e0e0173c..fe00986c 100644
--- a/app/modules/header/mobile-header.tsx
+++ b/app/modules/header/mobile-header.tsx
@@ -38,8 +38,8 @@ export function MobileHeader({
         "h-nav z-40 top-[var(--topbar-height,var(--initial-topbar-height))] w-full leading-none",
         "flex lg:hidden justify-between items-center gap-4",
         "px-3 md:px-10",
-        "text-[var(--color-header-text)] bg-[var(--color-header-bg)]",
-        "hover:text-[var(--color-header-text)] hover:bg-[var(--color-header-bg)]",
+        "text-[var(--color-header-text)] bg-[--color-header-bg]",
+        "hover:text-[var(--color-header-text)] hover:bg-[--color-header-bg]",
         scrolled && "shadow-header",
         enableTransparentHeader && isHome
           ? [
diff --git a/app/modules/header/scrolling-announcement.tsx b/app/modules/header/scrolling-announcement.tsx
index ded3c690..283de5ca 100644
--- a/app/modules/header/scrolling-announcement.tsx
+++ b/app/modules/header/scrolling-announcement.tsx
@@ -39,7 +39,7 @@ export function ScrollingAnnouncement() {
   return (
     <div
       id="announcement-bar"
-      className="text-center z-50 relative flex items-center whitespace-nowrap"
+      className="text-center z-50 relative flex items-center whitespace-nowrap overflow-hidden"
       style={
         {
           height: `${topbarHeight}px`,
diff --git a/app/modules/predictive-search/predictive-search-results.tsx b/app/modules/predictive-search/predictive-search-results.tsx
index e5de099b..e7142b6e 100644
--- a/app/modules/predictive-search/predictive-search-results.tsx
+++ b/app/modules/predictive-search/predictive-search-results.tsx
@@ -77,7 +77,7 @@ export function PredictiveSearchResults() {
                 to={`/search?q=${searchTerm.current}`}
                 className="flex items-center gap-2"
               >
-                <span className="underline-animation">View all products</span>
+                <span className="reveal-underline">View all products</span>
                 <IconArrowRight className="w-4 h-4 mb-[3px]" />
               </Link> */}
             </div>
diff --git a/app/modules/predictive-search/result-item.tsx b/app/modules/predictive-search/result-item.tsx
index 98157788..b7d1e4c0 100644
--- a/app/modules/predictive-search/result-item.tsx
+++ b/app/modules/predictive-search/result-item.tsx
@@ -48,7 +48,7 @@ export function SearchResultItem({
           )}
           {styledTitle ? (
             <div
-              className="underline-animation"
+              className="reveal-underline"
               dangerouslySetInnerHTML={{ __html: styledTitle }}
             />
           ) : (
@@ -57,7 +57,7 @@ export function SearchResultItem({
                 __typename === "Product" ? "line-clamp-1" : "line-clamp-2",
               )}
             >
-              <span className="underline-animation">{title}</span>
+              <span className="reveal-underline">{title}</span>
             </div>
           )}
           {price && (
diff --git a/app/styles/app.css b/app/styles/app.css
index 8b7f1a7c..68e4b82a 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -170,7 +170,7 @@
   view-transition-name: product-image;
 }
 
-.underline-animation {
+.reveal-underline {
   background-image: linear-gradient(
     to right,
     var(--underline-color, rgb(15, 15, 15)),
@@ -183,7 +183,7 @@
   transition: background 200ms ease-in-out;
   background-position: left calc(1em + 4px);
 }
-.underline-animation:hover {
+.reveal-underline:hover {
   background-size: 100% 1px;
 }
 .dropdown-transition {
diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts
index 9b374675..349648d4 100644
--- a/app/weaverse/schema.server.ts
+++ b/app/weaverse/schema.server.ts
@@ -245,6 +245,22 @@ export let themeSchema: HydrogenThemeSchema = {
           },
           defaultValue: 150,
         },
+        {
+          type: "heading",
+          label: "Menu",
+        },
+        {
+          type: "select",
+          name: "openMenuBy",
+          label: "Open menu by",
+          configs: {
+            options: [
+              { value: "hover", label: "Mouse hover" },
+              { value: "click", label: "Mouse click" },
+            ],
+          },
+          defaultValue: "click",
+        },
       ],
     },
     {
diff --git a/package-lock.json b/package-lock.json
index 85a40907..0223fe1b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@phosphor-icons/react": "2.1.7",
         "@radix-ui/react-checkbox": "1.1.2",
         "@radix-ui/react-dialog": "1.1.2",
+        "@radix-ui/react-menubar": "^1.1.2",
         "@radix-ui/react-tooltip": "1.1.4",
         "@remix-run/react": "2.14.0",
         "@remix-run/server-runtime": "2.14.0",
@@ -4422,6 +4423,32 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",
+      "integrity": "sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
@@ -4499,6 +4526,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
+      "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dismissable-layer": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz",
@@ -4580,6 +4622,108 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.2.tgz",
+      "integrity": "sha512-lZ0R4qR2Al6fZ4yCCZzu/ReTFrylHFxIqy7OezIpWF4bL0o9biKo0pFIvkaew3TyZ9Fy5gYVrR5zCGZBVbO1zg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-roving-focus": "1.1.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.6.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menubar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.2.tgz",
+      "integrity": "sha512-cKmj5Gte7LVyuz+8gXinxZAZECQU+N7aq5pw7kUPpx3xjnDXDbsdzHtCCD2W72bwzy74AvrqdYnKYS42ueskUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-menu": "2.1.2",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-roving-focus": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
@@ -4680,6 +4824,37 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz",
+      "integrity": "sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
diff --git a/package.json b/package.json
index e2798d6e..6fdc5f3f 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@phosphor-icons/react": "2.1.7",
     "@radix-ui/react-checkbox": "1.1.2",
     "@radix-ui/react-dialog": "1.1.2",
+    "@radix-ui/react-menubar": "^1.1.2",
     "@radix-ui/react-tooltip": "1.1.4",
     "@remix-run/react": "2.14.0",
     "@remix-run/server-runtime": "2.14.0",
diff --git a/tailwind.config.js b/tailwind.config.js
index 25c160fd..f962d2eb 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -13,24 +13,15 @@ export default {
     extend: {
       keyframes: {
         "fade-in": {
-          from: { opacity: "0" },
+          from: { opacity: "0.5" },
           to: { opacity: "1" },
         },
-        "slide-down-and-fade": {
-          from: { opacity: "0", transform: "translateY(-6px)" },
-          to: { opacity: "1", transform: "translateY(0)" },
-        },
         "slide-left-and-fade": {
-          from: { opacity: "0", transform: "translateX(6px)" },
-          to: { opacity: "1", transform: "translateX(0)" },
-        },
-        "slide-up-and-fade": {
-          from: { opacity: "0", transform: "translateY(6px)" },
-          to: { opacity: "1", transform: "translateY(0)" },
-        },
-        "slide-right-and-fade": {
-          from: { opacity: "0", transform: "translateX(-6px)" },
-          to: { opacity: "1", transform: "translateX(0)" },
+          from: {
+            opacity: 0,
+            transform: "translateX(var(--left-distance, 6px))",
+          },
+          to: { opacity: 1, transform: "translateX(0)" },
         },
         marquee: {
           from: { transform: "translateZ(0)" },
@@ -57,15 +48,9 @@ export default {
         spin: "spin .5s linear infinite",
         marquee: "marquee var(--marquee-duration, 15s) linear infinite",
         underline: "underline 400ms linear",
-        "fade-in": "fade-in 500ms ease-in forwards",
-        "slide-down-and-fade":
-          "slide-down-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards",
+        "fade-in": "fade-in var(--fade-in-duration, .5s) ease-in forwards",
         "slide-left-and-fade":
-          "slide-left-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards",
-        "slide-up-and-fade":
-          "slide-up-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards",
-        "slide-right-and-fade":
-          "slide-right-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards",
+          "slide-left-and-fade var(--slide-left-and-fade-duration, .5s) cubic-bezier(0.14, 0.8, 0.6, 1) forwards",
       },
       borderWidth: {
         6: "6px",