diff --git a/packages/features/shell/navigation/NavigationItem.tsx b/packages/features/shell/navigation/NavigationItem.tsx
index 535a0f060f..a66e1e790a 100644
--- a/packages/features/shell/navigation/NavigationItem.tsx
+++ b/packages/features/shell/navigation/NavigationItem.tsx
@@ -1,16 +1,38 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import React, { Fragment } from "react";
+import React, { Fragment, useState, useEffect } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { SkeletonText } from "@calcom/ui/components/skeleton";
 import classNames from "@calcom/ui/classNames";
 import { Icon } from "@calcom/ui/components/icon";
 import type { IconName } from "@calcom/ui/components/icon";
+import { SkeletonText } from "@calcom/ui/components/skeleton";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 
 import { useShouldDisplayNavigationItem } from "./useShouldDisplayNavigationItem";
 
+const usePersistedExpansionState = (itemName: string) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  useEffect(() => {
+    try {
+      const stored = sessionStorage.getItem(`nav-expansion-${itemName}`);
+      if (stored !== null) {
+        setIsExpanded(JSON.parse(stored));
+      }
+    } catch (_error) {}
+  }, [itemName]);
+
+  const setPersistedExpansion = (expanded: boolean) => {
+    setIsExpanded(expanded);
+    try {
+      sessionStorage.setItem(`nav-expansion-${itemName}`, JSON.stringify(expanded));
+    } catch (_error) {}
+  };
+
+  return [isExpanded, setPersistedExpansion] as const;
+};
+
 export type NavigationItemType = {
   name: string;
   href: string;
@@ -50,55 +72,106 @@ export const NavigationItem: React.FC<{
   const isCurrent: NavigationItemType["isCurrent"] = item.isCurrent || defaultIsCurrent;
   const current = isCurrent({ isChild: !!isChild, item, pathname });
   const shouldDisplayNavigationItem = useShouldDisplayNavigationItem(props.item);
+  const [isExpanded, setIsExpanded] = usePersistedExpansionState(item.name);
 
   if (!shouldDisplayNavigationItem) return null;
 
+  const hasChildren = item.child && item.child.length > 0;
+  const hasActiveChild =
+    hasChildren && item.child?.some((child) => isCurrent({ isChild: true, item: child, pathname }));
+  const shouldShowChildren = isExpanded || hasActiveChild || isCurrent({ pathname, isChild, item });
+  const shouldShowChevron = hasChildren && !hasActiveChild;
+  const isParentNavigationItem = hasChildren && !isChild;
+
   return (
     <Fragment>
-      <Tooltip side="right" content={t(item.name)} className="lg:hidden">
-        <Link
-          data-test-id={item.name}
-          href={item.href}
-          aria-label={t(item.name)}
-          target={item.target}
-          className={classNames(
-            "todesktop:py-[7px] text-default group flex items-center rounded-md px-2 py-1.5 text-sm font-medium transition",
-            item.child ? `[&[aria-current='page']]:!bg-transparent` : `[&[aria-current='page']]:bg-emphasis`,
-            isChild
-              ? `[&[aria-current='page']]:text-emphasis [&[aria-current='page']]:bg-emphasis hidden h-8 pl-16 lg:flex lg:pl-11 ${
-                  props.index === 0 ? "mt-0" : "mt-px"
-                }`
-              : "[&[aria-current='page']]:text-emphasis mt-0.5 text-sm",
-            isLocaleReady
-              ? "hover:bg-subtle todesktop:[&[aria-current='page']]:bg-emphasis todesktop:hover:bg-transparent hover:text-emphasis"
-              : ""
-          )}
-          aria-current={current ? "page" : undefined}>
-          {item.icon && (
-            <Icon
-              name={item.isLoading ? "rotate-cw" : item.icon}
-              className={classNames(
-                "todesktop:!text-blue-500 mr-2 h-4 w-4 flex-shrink-0 rtl:ml-2 md:ltr:mx-auto lg:ltr:mr-2 [&[aria-current='page']]:text-inherit",
-                item.isLoading && "animate-spin"
-              )}
-              aria-hidden="true"
-              aria-current={current ? "page" : undefined}
-            />
-          )}
-          {isLocaleReady ? (
-            <span
-              className="hidden w-full justify-between truncate text-ellipsis lg:flex"
-              data-testid={`${item.name}-test`}>
-              {t(item.name)}
-              {item.badge && item.badge}
-            </span>
-          ) : (
-            <SkeletonText className="h-[20px] w-full" />
-          )}
-        </Link>
-      </Tooltip>
+      {isParentNavigationItem ? (
+        <Tooltip side="right" content={t(item.name)} className="lg:hidden">
+          <button
+            data-test-id={item.name}
+            aria-label={t(item.name)}
+            aria-expanded={isExpanded}
+            aria-current={current ? "page" : undefined}
+            onClick={() => setIsExpanded(!isExpanded)}
+            className={classNames(
+              "todesktop:py-[7px] text-default group flex w-full items-center rounded-md px-2 py-1.5 text-sm font-medium transition",
+              "[&[aria-current='page']]:!bg-transparent",
+              "[&[aria-current='page']]:text-emphasis mt-0.5 text-sm",
+              isLocaleReady
+                ? "hover:bg-subtle todesktop:[&[aria-current='page']]:bg-emphasis todesktop:hover:bg-transparent hover:text-emphasis"
+                : ""
+            )}>
+            {item.icon && (
+              <Icon
+                name={item.isLoading ? "rotate-cw" : item.icon}
+                className={classNames(
+                  "todesktop:!text-blue-500 mr-2 h-4 w-4 flex-shrink-0 rtl:ml-2 md:ltr:mx-auto lg:ltr:mr-2",
+                  item.isLoading && "animate-spin"
+                )}
+                aria-hidden="true"
+              />
+            )}
+            {isLocaleReady ? (
+              <span className="hidden w-full justify-between truncate text-ellipsis lg:flex">
+                {t(item.name)}
+                {item.badge && item.badge}
+              </span>
+            ) : (
+              <SkeletonText className="h-[20px] w-full" />
+            )}
+            {shouldShowChevron && (
+              <Icon name={isExpanded ? "chevron-up" : "chevron-down"} className="ml-auto h-4 w-4" />
+            )}
+          </button>
+        </Tooltip>
+      ) : (
+        <Tooltip side="right" content={t(item.name)} className="lg:hidden">
+          <Link
+            data-test-id={item.name}
+            href={item.href}
+            aria-label={t(item.name)}
+            target={item.target}
+            className={classNames(
+              "todesktop:py-[7px] text-default group flex items-center rounded-md px-2 py-1.5 text-sm font-medium transition",
+              item.child
+                ? `[&[aria-current='page']]:!bg-transparent`
+                : `[&[aria-current='page']]:bg-emphasis`,
+              isChild
+                ? `[&[aria-current='page']]:text-emphasis [&[aria-current='page']]:bg-emphasis hidden h-8 pl-16 lg:flex lg:pl-11 ${
+                    props.index === 0 ? "mt-0" : "mt-px"
+                  }`
+                : "[&[aria-current='page']]:text-emphasis mt-0.5 text-sm",
+              isLocaleReady
+                ? "hover:bg-subtle todesktop:[&[aria-current='page']]:bg-emphasis todesktop:hover:bg-transparent hover:text-emphasis"
+                : ""
+            )}
+            aria-current={current ? "page" : undefined}>
+            {item.icon && (
+              <Icon
+                name={item.isLoading ? "rotate-cw" : item.icon}
+                className={classNames(
+                  "todesktop:!text-blue-500 mr-2 h-4 w-4 flex-shrink-0 rtl:ml-2 md:ltr:mx-auto lg:ltr:mr-2 [&[aria-current='page']]:text-inherit",
+                  item.isLoading && "animate-spin"
+                )}
+                aria-hidden="true"
+                aria-current={current ? "page" : undefined}
+              />
+            )}
+            {isLocaleReady ? (
+              <span
+                className="hidden w-full justify-between truncate text-ellipsis lg:flex"
+                data-testid={`${item.name}-test`}>
+                {t(item.name)}
+                {item.badge && item.badge}
+              </span>
+            ) : (
+              <SkeletonText className="h-[20px] w-full" />
+            )}
+          </Link>
+        </Tooltip>
+      )}
       {item.child &&
-        isCurrent({ pathname, isChild, item }) &&
+        shouldShowChildren &&
         item.child.map((item, index) => <NavigationItem index={index} key={item.name} item={item} isChild />)}
     </Fragment>
   );
@@ -144,20 +217,58 @@ export const MobileNavigationMoreItem: React.FC<{
   const { item } = props;
   const { t, isLocaleReady } = useLocale();
   const shouldDisplayNavigationItem = useShouldDisplayNavigationItem(props.item);
+  const [isExpanded, setIsExpanded] = usePersistedExpansionState(item.name);
 
   if (!shouldDisplayNavigationItem) return null;
 
+  const hasChildren = item.child && item.child.length > 0;
+
   return (
     <li className="border-subtle border-b last:border-b-0" key={item.name}>
-      <Link href={item.href} className="hover:bg-subtle flex items-center justify-between p-5 transition">
-        <span className="text-default flex items-center font-semibold ">
-          {item.icon && (
-            <Icon name={item.icon} className="h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3" aria-hidden="true" />
+      {hasChildren ? (
+        <>
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="hover:bg-subtle flex w-full items-center justify-between p-5 text-left transition">
+            <span className="text-default flex items-center font-semibold">
+              {item.icon && (
+                <Icon
+                  name={item.icon}
+                  className="h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
+                  aria-hidden="true"
+                />
+              )}
+              {isLocaleReady ? t(item.name) : <SkeletonText />}
+            </span>
+            <Icon name={isExpanded ? "chevron-up" : "chevron-down"} className="text-subtle h-5 w-5" />
+          </button>
+          {isExpanded && item.child && (
+            <ul className="bg-subtle">
+              {item.child.map((childItem) => (
+                <li key={childItem.name} className="border-subtle border-t">
+                  <Link
+                    href={childItem.href}
+                    className="hover:bg-muted flex items-center p-4 pl-12 transition">
+                    <span className="text-default font-medium">
+                      {isLocaleReady ? t(childItem.name) : <SkeletonText />}
+                    </span>
+                  </Link>
+                </li>
+              ))}
+            </ul>
           )}
-          {isLocaleReady ? t(item.name) : <SkeletonText />}
-        </span>
-        <Icon name="arrow-right" className="text-subtle h-5 w-5" />
-      </Link>
+        </>
+      ) : (
+        <Link href={item.href} className="hover:bg-subtle flex items-center justify-between p-5 transition">
+          <span className="text-default flex items-center font-semibold ">
+            {item.icon && (
+              <Icon name={item.icon} className="h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3" aria-hidden="true" />
+            )}
+            {isLocaleReady ? t(item.name) : <SkeletonText />}
+          </span>
+          <Icon name="arrow-right" className="text-subtle h-5 w-5" />
+        </Link>
+      )}
     </li>
   );
 };