diff --git a/packages/ui/v2/core/Shell.tsx b/packages/ui/v2/core/Shell.tsx
index 5f6379499e..b1999a75e2 100644
--- a/packages/ui/v2/core/Shell.tsx
+++ b/packages/ui/v2/core/Shell.tsx
@@ -828,7 +828,7 @@ function MainContainer({
{/* The following is used for settings navigation on medium and smaller screens */}
{
diff --git a/packages/ui/v2/core/layouts/SettingsLayout.tsx b/packages/ui/v2/core/layouts/SettingsLayout.tsx
index b429372087..55b6b78dec 100644
--- a/packages/ui/v2/core/layouts/SettingsLayout.tsx
+++ b/packages/ui/v2/core/layouts/SettingsLayout.tsx
@@ -1,6 +1,7 @@
import { MembershipRole, UserPermissionRole } from "@prisma/client";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";
import React, { ComponentProps, useEffect, useState } from "react";
import { classNames } from "@calcom/lib";
@@ -291,6 +292,7 @@ export default function SettingsLayout({
children,
...rest
}: { children: React.ReactNode } & ComponentProps) {
+ const router = useRouter();
const state = useState(false);
const [sideContainerOpen, setSideContainerOpen] = state;
@@ -307,6 +309,12 @@ export default function SettingsLayout({
};
}, []);
+ useEffect(() => {
+ if (sideContainerOpen) {
+ setSideContainerOpen(!sideContainerOpen);
+ }
+ }, [router.asPath]);
+
return (