diff --git a/front/components/assistant/conversation/ConversationLayout.tsx b/front/components/assistant/conversation/ConversationLayout.tsx
index ba3b22f7c54e..d315cfe9a8d9 100644
--- a/front/components/assistant/conversation/ConversationLayout.tsx
+++ b/front/components/assistant/conversation/ConversationLayout.tsx
@@ -79,7 +79,6 @@ export default function ConversationLayout({
         <AppLayout
           subscription={subscription}
           owner={owner}
-          isWideMode={!!conversation}
           pageTitle={
             conversation?.title
               ? `Dust - ${conversation?.title}`
diff --git a/front/components/assistant/conversation/input_bar/InputBar.tsx b/front/components/assistant/conversation/input_bar/InputBar.tsx
index 4a4aadd4bd1b..e4fb0936875f 100644
--- a/front/components/assistant/conversation/input_bar/InputBar.tsx
+++ b/front/components/assistant/conversation/input_bar/InputBar.tsx
@@ -375,8 +375,8 @@ export function FixedAssistantInputBar({
   disableAutoFocus?: boolean;
 }) {
   return (
-    <div className="4xl:px-0 fixed bottom-0 left-0 right-0 z-20 flex-initial lg:left-80">
-      <div className="mx-auto max-h-screen max-w-4xl pb-0 sm:pb-8">
+    <div className="4xl:px-0 fixed bottom-0 z-20 w-full flex-initial">
+      <div className="max-h-screen max-w-4xl pb-0 sm:pb-8">
         <AssistantInputBar
           owner={owner}
           onSubmit={onSubmit}
diff --git a/front/components/assistant_builder/AssistantBuilder.tsx b/front/components/assistant_builder/AssistantBuilder.tsx
index 6cf5e68f6696..2660a534e321 100644
--- a/front/components/assistant_builder/AssistantBuilder.tsx
+++ b/front/components/assistant_builder/AssistantBuilder.tsx
@@ -545,7 +545,6 @@ export default function AssistantBuilder({
       <AppLayout
         subscription={subscription}
         hideSidebar
-        isWideMode
         owner={owner}
         gaTrackingId={gaTrackingId}
         topNavigationCurrent="assistants"
diff --git a/front/components/sparkle/AppLayout.tsx b/front/components/sparkle/AppLayout.tsx
index 8238c4b4a60d..c217139ce959 100644
--- a/front/components/sparkle/AppLayout.tsx
+++ b/front/components/sparkle/AppLayout.tsx
@@ -1,4 +1,11 @@
-import { Banner, Item, Logo, Tab, XMarkIcon } from "@dust-tt/sparkle";
+import {
+  Banner,
+  CollapseButton,
+  Item,
+  Logo,
+  Tab,
+  XMarkIcon,
+} from "@dust-tt/sparkle";
 import type { SubscriptionType, WorkspaceType } from "@dust-tt/types";
 import { Dialog, Transition } from "@headlessui/react";
 import { Bars3Icon } from "@heroicons/react/20/solid";
@@ -7,7 +14,14 @@ import Link from "next/link";
 import type { NextRouter } from "next/router";
 import { useRouter } from "next/router";
 import Script from "next/script";
-import React, { Fragment, useContext, useEffect, useState } from "react";
+import React, {
+  Fragment,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 
 import { CONVERSATION_PARENT_SCROLL_DIV_ID } from "@app/components/assistant/conversation/lib";
 import type {
@@ -26,6 +40,37 @@ import { classNames } from "@app/lib/utils";
  */
 const SHOW_INCIDENT_BANNER = false;
 
+function ToggleSideBarButton({
+  isNavigationBarOpened,
+  toggleNavigationBarVisibility,
+}: {
+  isNavigationBarOpened: boolean;
+  toggleNavigationBarVisibility: (isOpened: boolean) => void;
+}) {
+  const buttonRef = useRef<HTMLDivElement>(null);
+  const [direction, setDirection] = useState<"left" | "right">("left");
+
+  const handleClick = useCallback(() => {
+    toggleNavigationBarVisibility(!isNavigationBarOpened);
+    setDirection((prevDirection) =>
+      prevDirection === "left" ? "right" : "left"
+    );
+  }, [isNavigationBarOpened, toggleNavigationBarVisibility]);
+
+  return (
+    <div
+      ref={buttonRef}
+      onClick={handleClick}
+      className={classNames(
+        "hidden lg:fixed lg:top-1/2 lg:flex lg:w-5",
+        isNavigationBarOpened ? "lg:left-80" : "lg:left-0"
+      )}
+    >
+      <CollapseButton direction={direction} />
+    </div>
+  );
+}
+
 function NavigationBar({
   owner,
   subscription,
@@ -191,7 +236,6 @@ export const appLayoutBack = async (
 export default function AppLayout({
   owner,
   subscription,
-  isWideMode = false,
   hideSidebar = false,
   topNavigationCurrent,
   subNavigation,
@@ -214,6 +258,7 @@ export default function AppLayout({
   children: React.ReactNode;
 }) {
   const { sidebarOpen, setSidebarOpen } = useContext(SidebarContext);
+  const [isNavigationBarOpened, setNavigationBarOpened] = useState(true);
   const [loaded, setLoaded] = useState(false);
   const router = useRouter();
   const user = useUser();
@@ -355,7 +400,7 @@ export default function AppLayout({
           </Transition.Root>
         )}
 
-        {!hideSidebar && (
+        {!hideSidebar && isNavigationBarOpened && (
           <div className="hidden lg:fixed lg:inset-y-0 lg:z-0 lg:flex lg:w-80 lg:flex-col">
             {loaded && (
               <NavigationBar
@@ -373,7 +418,7 @@ export default function AppLayout({
         <div
           className={classNames(
             "mt-0 h-full flex-1",
-            !hideSidebar ? "lg:pl-80" : ""
+            !hideSidebar ? (isNavigationBarOpened ? "lg:pl-80" : "lg:pl-0") : ""
           )}
         >
           <div
@@ -394,8 +439,9 @@ export default function AppLayout({
             className={classNames(
               "fixed left-0 right-0 top-0 z-30 flex flex-col pl-12 lg:pl-0",
               !hideSidebar
-                ? "border-b border-structure-300/30 bg-white/80 backdrop-blur lg:left-80"
+                ? "border-b border-structure-300/30 bg-white/80 backdrop-blur"
                 : "",
+              isNavigationBarOpened ? "lg:left-80" : "",
               titleChildren ? "fixed" : "lg:hidden"
             )}
           >
@@ -417,16 +463,18 @@ export default function AppLayout({
               titleChildren ? "" : "lg:pt-8"
             )}
           >
-            <div
-              className={classNames(
-                "mx-auto h-full",
-                isWideMode ? "w-full" : "max-w-4xl px-6"
-              )}
-            >
-              {loaded && children}
-            </div>
+            <div className="mx-auto h-full max-w-4xl">{loaded && children}</div>
           </main>
         </div>
+
+        <div>
+          <ToggleSideBarButton
+            isNavigationBarOpened={isNavigationBarOpened}
+            toggleNavigationBarVisibility={(isVisible) =>
+              setNavigationBarOpened(isVisible)
+            }
+          />
+        </div>
       </div>
       <>
         <Script
diff --git a/front/pages/w/[wId]/assistant/new.tsx b/front/pages/w/[wId]/assistant/new.tsx
index 982a359562dd..33fc91d1f3b1 100644
--- a/front/pages/w/[wId]/assistant/new.tsx
+++ b/front/pages/w/[wId]/assistant/new.tsx
@@ -242,7 +242,7 @@ export default function AssistantNew({
           onClose={() => setConversationHelperModal(null)}
         />
       )}
-      <div className="flex h-full items-center pb-20">
+      <div className="flex h-full items-center px-6 pb-20">
         <div className="flex text-sm font-normal text-element-800">
           <Page.Vertical gap="md" align="left">
             {/* FEATURED AGENTS */}