diff --git a/src/frontend/src/components/ui/sidebar.tsx b/src/frontend/src/components/ui/sidebar.tsx
index 0ea0817d7..72c83dc0b 100644
--- a/src/frontend/src/components/ui/sidebar.tsx
+++ b/src/frontend/src/components/ui/sidebar.tsx
@@ -131,6 +131,7 @@ const SidebarProvider = React.forwardRef<
               "group/sidebar-wrapper flex h-full w-full text-foreground has-[[data-variant=inset]]:bg-background",
               className,
             )}
+            data-open={open}
             ref={ref}
             {...props}
           >
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index 2397fef21..c2313a4e5 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -6,7 +6,7 @@ import CanvasControls, {
 import FlowToolbar from "@/components/flowToolbarComponent";
 import ForwardedIconComponent from "@/components/genericIconComponent";
 import LoadingComponent from "@/components/loadingComponent";
-import { SidebarTrigger, useSidebar } from "@/components/ui/sidebar";
+import { SidebarTrigger } from "@/components/ui/sidebar";
 import {
   COLOR_OPTIONS,
   NOTE_NODE_MIN_HEIGHT,
@@ -504,8 +504,6 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
     reactFlowWrapper.current?.style.setProperty("--selected", accentColor);
   };
 
-  const { open } = useSidebar();
-
   useEffect(() => {
     const handleGlobalMouseMove = (event) => {
       if (isAddingNote) {
@@ -592,9 +590,7 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
             <Panel
               className={cn(
                 "react-flow__controls !m-2 flex gap-1.5 rounded-md border border-secondary-hover bg-background fill-foreground stroke-foreground p-1.5 text-primary shadow transition-all duration-300 [&>button]:border-0 [&>button]:bg-background hover:[&>button]:bg-accent",
-                open
-                  ? "pointer-events-none -translate-x-full opacity-0"
-                  : "pointer-events-auto opacity-100",
+                "pointer-events-auto opacity-100 group-data-[open=true]/sidebar-wrapper:pointer-events-none group-data-[open=true]/sidebar-wrapper:-translate-x-full group-data-[open=true]/sidebar-wrapper:opacity-0",
               )}
               position="top-left"
             >
@@ -603,7 +599,7 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
                   name="PanelRightClose"
                   className="h-4 w-4"
                 />
-                Components
+                <span className="text-foreground">Components</span>
               </SidebarTrigger>
             </Panel>
             <SelectionMenu
diff --git a/src/frontend/src/pages/MainPage/components/header/index.tsx b/src/frontend/src/pages/MainPage/components/header/index.tsx
index 9976f524a..5fffda559 100644
--- a/src/frontend/src/pages/MainPage/components/header/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/header/index.tsx
@@ -2,8 +2,7 @@ import ForwardedIconComponent from "@/components/genericIconComponent";
 import ShadTooltip from "@/components/shadTooltipComponent";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { SidebarTrigger, useSidebar } from "@/components/ui/sidebar";
-import { cn } from "@/utils/utils";
+import { SidebarTrigger } from "@/components/ui/sidebar";
 import { debounce } from "lodash";
 import { useCallback, useEffect, useState } from "react";
 
@@ -29,7 +28,6 @@ const HeaderComponent = ({
   isEmptyFolder,
 }: HeaderComponentProps) => {
   const [debouncedSearch, setDebouncedSearch] = useState("");
-  const { open } = useSidebar();
 
   // Debounce the setSearch function from the parent
   const debouncedSetSearch = useCallback(
@@ -57,15 +55,8 @@ const HeaderComponent = ({
         className="flex items-center pb-8 text-xl font-semibold"
         data-testid="mainpage_title"
       >
-        <div
-          className={cn("h-7 w-10 transition-all lg:hidden", open && "md:w-0")}
-        >
-          <div
-            className={cn(
-              "relative left-0 opacity-100 transition-all",
-              open ? "md:opacity-0" : "",
-            )}
-          >
+        <div className="h-7 w-10 transition-all group-data-[open=true]/sidebar-wrapper:md:w-0 lg:hidden">
+          <div className="relative left-0 opacity-100 transition-all group-data-[open=true]/sidebar-wrapper:md:opacity-0">
             <SidebarTrigger>
               <ForwardedIconComponent
                 name="PanelLeftOpen"