diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx
index 00cb7d09f0..ea7475c23e 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Sidebar/index.tsx
@@ -5,6 +5,7 @@ import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import OpenInNewOffIcon from "@mui/icons-material/OpenInNewOff";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
+import Collapse from "@mui/material/Collapse";
 import Container from "@mui/material/Container";
 import Link from "@mui/material/Link";
 import { styled } from "@mui/material/styles";
@@ -29,25 +30,18 @@ type SidebarTabs = "PreviewBrowser" | "History" | "Search" | "Console";
 const SIDEBAR_WIDTH = "500px";
 const SIDEBAR_WIDTH_MINIMISED = "20px";
 
-const Root = styled(Box)<{ isMinimised: boolean }>(
-  ({ theme, isMinimised }) => ({
-    position: "relative",
-    top: "0",
-    right: "0",
-    bottom: "0",
-    width: isMinimised ? SIDEBAR_WIDTH_MINIMISED : SIDEBAR_WIDTH,
-    display: "flex",
-    flexShrink: 0,
-    flexDirection: "column",
-    borderLeft: `1px solid ${theme.palette.border.main}`,
-    background: theme.palette.background.paper,
-    zIndex: 1,
-    transition: "width 200ms ease-in-out",
-    "& iframe": {
-      flex: 1,
-    },
-  }),
-);
+const Root = styled(Box)(({ theme }) => ({
+  position: "relative",
+  top: "0",
+  right: "0",
+  bottom: "0",
+  display: "flex",
+  flexShrink: 0,
+  flexDirection: "column",
+  borderLeft: `1px solid ${theme.palette.border.main}`,
+  background: theme.palette.background.paper,
+  zIndex: 1,
+}));
 
 const SidebarContainer = styled(Box)(() => ({
   overflow: "auto",
@@ -62,7 +56,7 @@ const SidebarWrapper = styled(Box)(() => ({
   flexDirection: "column",
   flexShrink: 0,
   flexGrow: 1,
-  maxHeight: "100%",
+  height: "100%",
 }));
 
 const StyledToggleButton = styled(ToggleButton)(({ theme }) => ({
@@ -132,16 +126,14 @@ const TabList = styled(Box)(({ theme }) => ({
 }));
 
 const Sidebar: React.FC = React.memo(() => {
-  const [resetPreview, isFlowPublished] = useStore((state) => [
+  const [resetPreview, isFlowPublished, toggleSidebar, showSidebar] = useStore((state) => [
     state.resetPreview,
     state.isFlowPublished,
+    state.toggleSidebar,
+    state.showSidebar,
   ]);
 
   const [activeTab, setActiveTab] = useState<SidebarTabs>("PreviewBrowser");
-  const [isSidebarMinimised, setIsSidebarMinimised] = useState<boolean>(() => {
-    const savedState = localStorage.getItem("isSidebarMinimised");
-    return savedState === "true";
-  });
 
   const handleChange = (
     _event: React.SyntheticEvent,
@@ -150,14 +142,6 @@ const Sidebar: React.FC = React.memo(() => {
     setActiveTab(newValue);
   };
 
-  const togglePreview = () => {
-    setIsSidebarMinimised((prev) => {
-      const newState = !prev;
-      localStorage.setItem("isSidebarMinimised", JSON.stringify(newState));
-      return newState;
-    });
-  };
-
   const baseUrl = `${window.location.origin}${rootFlowPath(false)}`;
 
   const urls = {
@@ -167,102 +151,114 @@ const Sidebar: React.FC = React.memo(() => {
   };
 
   return (
-    <Root isMinimised={isSidebarMinimised}>
-      <SidebarWrapper>
-        <StyledToggleButton onClick={togglePreview} value="toggleSidebar">
-          {isSidebarMinimised ? <ChevronLeftIcon /> : <ChevronRightIcon />}
-        </StyledToggleButton>
-        <Header>
-          <Box width="100%" display="flex">
-            <input type="text" disabled value={urls.preview} />
-
-            <Permission.IsPlatformAdmin>
-              <Tooltip arrow title="Open draft service">
-                <Link
-                  href={urls.draft}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  color="inherit"
-                >
-                  <OpenInNewOffIcon />
-                </Link>
-              </Tooltip>
-            </Permission.IsPlatformAdmin>
+    <Root>
+      <Collapse 
+        in={showSidebar} 
+        orientation="horizontal" 
+        collapsedSize={SIDEBAR_WIDTH_MINIMISED} 
+        sx={{ height: "100%" }}
+        easing={"ease-in-out"}
+        timeout={200}
+      >
+        <SidebarWrapper>
+          <StyledToggleButton onClick={toggleSidebar} value="toggleSidebar">
+            {showSidebar
+              ? <ChevronRightIcon />
+              : <ChevronLeftIcon />
+            }
+          </StyledToggleButton>
+          <Header>
+            <Box width="100%" display="flex">
+              <input type="text" disabled value={urls.preview} />
 
-            <Tooltip arrow title="Open preview of changes to publish">
-              <Link
-                href={urls.preview}
-                target="_blank"
-                rel="noopener noreferrer"
-                color="inherit"
-              >
-                <OpenInNewIcon />
-              </Link>
-            </Tooltip>
+              <Permission.IsPlatformAdmin>
+                <Tooltip arrow title="Open draft service">
+                  <Link
+                    href={urls.draft}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    color="inherit"
+                  >
+                    <OpenInNewOffIcon />
+                  </Link>
+                </Tooltip>
+              </Permission.IsPlatformAdmin>
 
-            {isFlowPublished ? (
-              <Tooltip arrow title="Open published service">
+              <Tooltip arrow title="Open preview of changes to publish">
                 <Link
-                  href={urls.analytics}
+                  href={urls.preview}
                   target="_blank"
                   rel="noopener noreferrer"
                   color="inherit"
                 >
-                  <LanguageIcon />
+                  <OpenInNewIcon />
                 </Link>
               </Tooltip>
-            ) : (
-              <Tooltip arrow title="Flow not yet published">
-                <Box>
-                  <Link component={"button"} disabled aria-disabled={true}>
+
+              {isFlowPublished ? (
+                <Tooltip arrow title="Open published service">
+                  <Link
+                    href={urls.analytics}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    color="inherit"
+                  >
                     <LanguageIcon />
                   </Link>
-                </Box>
-              </Tooltip>
-            )}
-          </Box>
-          <PublishFlowButton previewURL={urls.preview} />
-        </Header>
-        <TabList>
-          <Tabs onChange={handleChange} value={activeTab} aria-label="">
-            <StyledTab value="PreviewBrowser" label="Preview" />
-            <StyledTab value="History" label="History" />
-            <StyledTab value="Search" label="Search" />
-            <StyledTab value="Console" label="Console" />
-          </Tabs>
-        </TabList>
-        {activeTab === "PreviewBrowser" && (
-          <SidebarContainer>
-            <ResetToggle
-              variant="link"
-              onClick={() => {
-                resetPreview();
-              }}
-            >
-              <Reset fontSize="small" />
-              Restart
-            </ResetToggle>
-            <Questions previewEnvironment="editor" />
-          </SidebarContainer>
-        )}
-        {activeTab === "History" && (
-          <SidebarContainer py={3}>
-            <Container>
-              <EditHistory />
-            </Container>
-          </SidebarContainer>
-        )}
-        {activeTab === "Search" && (
-          <SidebarContainer>
-            <Search />
-          </SidebarContainer>
-        )}
-        {activeTab === "Console" && (
-          <SidebarContainer>
-            <DebugConsole />
-          </SidebarContainer>
-        )}
-      </SidebarWrapper>
+                </Tooltip>
+              ) : (
+                <Tooltip arrow title="Flow not yet published">
+                  <Box>
+                    <Link component={"button"} disabled aria-disabled={true}>
+                      <LanguageIcon />
+                    </Link>
+                  </Box>
+                </Tooltip>
+              )}
+            </Box>
+            <PublishFlowButton previewURL={urls.preview} />
+          </Header>
+          <TabList>
+            <Tabs onChange={handleChange} value={activeTab} aria-label="">
+              <StyledTab value="PreviewBrowser" label="Preview" />
+              <StyledTab value="History" label="History" />
+              <StyledTab value="Search" label="Search" />
+              <StyledTab value="Console" label="Console" />
+            </Tabs>
+          </TabList>
+          {activeTab === "PreviewBrowser" && (
+            <SidebarContainer>
+              <ResetToggle
+                variant="link"
+                onClick={() => {
+                  resetPreview();
+                }}
+              >
+                <Reset fontSize="small" />
+                Restart
+              </ResetToggle>
+              <Questions previewEnvironment="editor" />
+            </SidebarContainer>
+          )}
+          {activeTab === "History" && (
+            <SidebarContainer py={3}>
+              <Container>
+                <EditHistory />
+              </Container>
+            </SidebarContainer>
+          )}
+          {activeTab === "Search" && (
+            <SidebarContainer>
+              <Search />
+            </SidebarContainer>
+          )}
+          {activeTab === "Console" && (
+            <SidebarContainer>
+              <DebugConsole />
+            </SidebarContainer>
+          )}
+        </SidebarWrapper>
+      </Collapse>
     </Root>
   );
 });
diff --git a/editor.planx.uk/src/pages/FlowEditor/index.tsx b/editor.planx.uk/src/pages/FlowEditor/index.tsx
index 7524b59e3c..b5130f0f24 100644
--- a/editor.planx.uk/src/pages/FlowEditor/index.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/index.tsx
@@ -29,7 +29,6 @@ const FlowEditor = () => {
 
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   useScrollControlsAndRememberPosition(scrollContainerRef);
-  const showSidebar = useStore((state) => state.showSidebar);
 
   const isTestEnvBannerVisible = useStore(
     (state) => state.isTestEnvBannerVisible,
@@ -52,7 +51,7 @@ const FlowEditor = () => {
           <Flow flow={flow} breadcrumbs={breadcrumbs} />
         </Box>
       </Box>
-      {showSidebar && <Sidebar />}
+      <Sidebar />
     </EditorContainer>
   );
 };
diff --git a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
index bae0c5f446..d46f351c3c 100644
--- a/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
+++ b/editor.planx.uk/src/pages/FlowEditor/lib/store/editor.ts
@@ -26,6 +26,7 @@ import { customAlphabet } from "nanoid-good";
 import en from "nanoid-good/locale/en";
 import { type } from "ot-json0";
 import type { StateCreator } from "zustand";
+import { persist } from 'zustand/middleware'
 
 import { FlowLayout } from "../../components/Flow";
 import { connectToDB, getConnection } from "./../sharedb";
@@ -45,7 +46,7 @@ const send = (ops: Array<any>) => {
 export interface EditorUIStore {
   flowLayout: FlowLayout;
   showSidebar: boolean;
-  togglePreview: () => void;
+  toggleSidebar: () => void;
   isTestEnvBannerVisible: boolean;
   hideTestEnvBanner: () => void;
 }
@@ -53,21 +54,27 @@ export interface EditorUIStore {
 export const editorUIStore: StateCreator<
   SharedStore & EditorUIStore,
   [],
-  [],
+  [["zustand/persist", unknown]],
   EditorUIStore
-> = (set, get) => ({
-  flowLayout: FlowLayout.TOP_DOWN,
+> = persist(
+  (set, get) => ({
+    flowLayout: FlowLayout.TOP_DOWN,
 
-  showSidebar: true,
+    showSidebar: true,
 
-  togglePreview: () => {
-    set({ showSidebar: !get().showSidebar });
-  },
+    toggleSidebar: () => {
+      set({ showSidebar: !get().showSidebar });
+    },
 
-  isTestEnvBannerVisible: !window.location.href.includes(".uk"),
+    isTestEnvBannerVisible: !window.location.href.includes(".uk"),
 
-  hideTestEnvBanner: () => set({ isTestEnvBannerVisible: false }),
-});
+    hideTestEnvBanner: () => set({ isTestEnvBannerVisible: false }),
+  }),
+  {
+    name: "editorUIStore",
+    partialize: (state) => ({ showSidebar: state.showSidebar }),
+  }
+);
 
 interface PublishFlowResponse {
   alteredNodes: Store.Node[];