diff --git a/public/translations/en-US.json b/public/translations/en-US.json
index a73e8f6b1..62c0ef274 100644
--- a/public/translations/en-US.json
+++ b/public/translations/en-US.json
@@ -308,8 +308,10 @@
   },
   "sidebar": {
     "collapse": "Collapse sidebar",
+    "collapseInstructions": "Collapse project instructions",
     "download": "Download project",
     "expand": "Expand sidebar",
+    "expandInstructions": "Open project instructions",
     "file": "Project files",
     "images": "Image gallery",
     "settings": "Settings",
@@ -355,4 +357,4 @@
   "common": {
     "or": "or"
   }
-}
\ No newline at end of file
+}
diff --git a/public/translations/en.json b/public/translations/en.json
index 0ecc5f9e4..178693e70 100644
--- a/public/translations/en.json
+++ b/public/translations/en.json
@@ -308,8 +308,10 @@
   },
   "sidebar": {
     "collapse": "Collapse sidebar",
+    "collapseInstructions": "Collapse project instructions",
     "download": "Download project",
     "expand": "Expand sidebar",
+    "expandInstructions": "Open project instructions",
     "file": "Project files",
     "images": "Image gallery",
     "settings": "Settings",
diff --git a/src/assets/stylesheets/Project.scss b/src/assets/stylesheets/Project.scss
index d9fe8c518..3323ef8f3 100644
--- a/src/assets/stylesheets/Project.scss
+++ b/src/assets/stylesheets/Project.scss
@@ -50,6 +50,32 @@
     overflow: hidden;
   }
 
+  .project-bar-row {
+    display: flex;
+    align-items: stretch;
+    gap: var(--project-wrapper-grid-gap, #{$space-0-5});
+
+    .project-bar {
+      flex: 1 1 auto;
+      min-inline-size: 0;
+    }
+  }
+
+  .project-bar-row__expand {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    padding: $space-0-5;
+    border-radius: $space-0-5;
+    background-color: var(--editor-color-layer-3);
+    border: 1px solid var(--editor-color-outline);
+
+    .rpf-button {
+      border: none;
+    }
+  }
+
   .proj-editor-wrapper {
     display: flex;
     flex: 0 1 auto;
diff --git a/src/assets/stylesheets/Sidebar.scss b/src/assets/stylesheets/Sidebar.scss
index 916669c3a..14ec3dea3 100644
--- a/src/assets/stylesheets/Sidebar.scss
+++ b/src/assets/stylesheets/Sidebar.scss
@@ -122,9 +122,41 @@
 
 .sidebar__panel-heading {
   margin: 0;
+  min-inline-size: 0;
   @include font-size-1-5(regular);
 }
 
+.sidebar__panel-heading-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-0-5);
+
+  .rpf-button {
+    border: none;
+  }
+}
+
+.sidebar__panel-collapse {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  margin: 0;
+  border: 1px solid var(--sidebar-border);
+  border-radius: var(--space-1);
+  padding: var(--space-1);
+  color: var(--editor-color-text);
+
+  svg {
+    margin: 0;
+  }
+
+  &:hover {
+    background-color: var(--sidebar-option-hover);
+  }
+}
+
 .sidebar__panel-header {
   display: flex;
   flex-direction: column;
diff --git a/src/components/Editor/Project/Project.jsx b/src/components/Editor/Project/Project.jsx
index a99fe0c36..bbb61fd5f 100644
--- a/src/components/Editor/Project/Project.jsx
+++ b/src/components/Editor/Project/Project.jsx
@@ -10,6 +10,7 @@ import { showSavedMessage } from "../../../utils/Notifications";
 import ProjectBar from "../../ProjectBar/ProjectBar";
 import ScratchProjectBar from "../../ProjectBar/ScratchProjectBar";
 import Sidebar from "../../Menus/Sidebar/Sidebar";
+import SidebarExpandButton from "../../Menus/Sidebar/SidebarExpandButton";
 import EditorInput from "../EditorInput/EditorInput";
 import ResizableWithHandle from "../../../utils/ResizableWithHandle";
 import { useContainerMinWidth } from "../../../hooks/useContainerMinWidth";
@@ -69,12 +70,20 @@ const Project = (props) => {
           />
         )}
         <div className="project-wrapper" ref={containerRef}>
-          {withProjectbar &&
-            (isCodeEditorScratchProject ? (
-              <ScratchProjectBar nameEditable={nameEditable} />
-            ) : (
-              <ProjectBar nameEditable={nameEditable} />
-            ))}
+          {withProjectbar && (
+            <div className="project-bar-row">
+              {withSidebar && (
+                <SidebarExpandButton
+                  allowMobileView={!isCodeEditorScratchProject}
+                />
+              )}
+              {isCodeEditorScratchProject ? (
+                <ScratchProjectBar nameEditable={nameEditable} />
+              ) : (
+                <ProjectBar nameEditable={nameEditable} />
+              )}
+            </div>
+          )}
           {!loading && !isCodeEditorScratchProject && (
             <div className="proj-editor-wrapper">
               <ResizableWithHandle
diff --git a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
index 6794a930a..b95efc425 100644
--- a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
+++ b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.jsx
@@ -1,12 +1,13 @@
 /* eslint-disable jsx-a11y/anchor-has-content */
 // This is disabled because the empty anchor tag is used for translation and will have content when rendered.
 
-import React, { useRef, useState } from "react";
+import { Button } from "@raspberrypifoundation/design-system-react";
+import { useRef, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
-import SidebarPanel from "../SidebarPanel";
-
+import BinIcon from "../../../../assets/icons/bin.svg";
+import DoubleArrowLeft from "../../../../assets/icons/double_arrow_left.svg";
 import PlusIcon from "../../../../assets/icons/plus.svg";
 import demoInstructions from "../../../../assets/markdown/demoInstructions.md?raw";
 import "../../../../assets/stylesheets/Instructions.scss?inline";
@@ -17,22 +18,21 @@ import {
 } from "../../../../redux/InstructionsSlice";
 import {
   insertStepAfter,
-  removeStepAt,
-  updateStepMarkdown,
   REMOVE_ALL_STEPS,
   REMOVE_CURRENT_STEP,
+  removeStepAt,
+  updateStepMarkdown,
 } from "../../../../utils/instructionSteps";
 import populateMarkdownTemplate from "../../../../utils/populateMarkdownTemplate";
-import { Button } from "@raspberrypifoundation/design-system-react";
 import RemoveInstructionStepModal from "../../../Modals/RemoveInstructionStepModal";
+import SidebarPanel from "../SidebarPanel";
 import InstructionsStep from "./InstructionsStep/InstructionsStep";
 import ProgressBar from "./ProgressBar/ProgressBar";
-import BinIcon from "../../../../assets/icons/bin.svg";
 
 const INSTRUCTIONS_GUIDE_URL =
   "https://help.editor.raspberrypi.org/hc/en-us/articles/52495086715028-How-to-write-project-instructions";
 
-const InstructionsPanel = () => {
+const InstructionsPanel = ({ toggleOption, isMobile }) => {
   const [tabIndex, setTabIndex] = useState(0);
   const [showRemoveStepModal, setShowRemoveStepModal] = useState(false);
   const [removeScope, setRemoveScope] = useState(REMOVE_CURRENT_STEP);
@@ -110,11 +110,31 @@ const InstructionsPanel = () => {
 
   const panelRef = useRef(null);
 
+  const collapsePanel = () => {
+    toggleOption("instructions");
+    if (window.plausible) {
+      window.plausible("Collapse file pane");
+    }
+  };
+
   return (
     <SidebarPanel
       defaultWidth="30vw"
       panelRef={panelRef}
       heading={t("instructionsPanel.projectSteps")}
+      headingPrefix={
+        !isMobile && toggleOption ? (
+          <Button
+            className="sidebar__panel-collapse"
+            icon={<DoubleArrowLeft />}
+            iconOnly
+            text={t("sidebar.collapseInstructions")}
+            onClick={collapsePanel}
+            size="small"
+            type="tertiary"
+          />
+        ) : undefined
+      }
       buttons={
         instructionsEditable && !hasInstructions
           ? [
diff --git a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.test.jsx b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.test.jsx
index 218233655..090723285 100644
--- a/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.test.jsx
+++ b/src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.test.jsx
@@ -42,6 +42,44 @@ const selectRemoveModalScope = (scope) =>
     fireEvent.click(removeModalScopeRadio(scope));
   });
 
+describe("The panel header collapse button", () => {
+  const renderPanel = (props = {}) =>
+    renderWithProviders(<InstructionsPanel {...props} />, {
+      preloadedState: {
+        editor: {
+          project: { instructions: [{ markdown_content: "instructions" }] },
+          instructionsEditable: true,
+        },
+        instructions: { permitOverride: true, currentStepPosition: 0 },
+      },
+    });
+
+  test("is not rendered when the panel cannot be toggled", () => {
+    renderPanel();
+
+    expect(
+      screen.queryByTitle("sidebar.collapseInstructions"),
+    ).not.toBeInTheDocument();
+  });
+
+  test("is not rendered on mobile", () => {
+    renderPanel({ toggleOption: vi.fn(), isMobile: true });
+
+    expect(
+      screen.queryByTitle("sidebar.collapseInstructions"),
+    ).not.toBeInTheDocument();
+  });
+
+  test("closes the instructions panel when clicked", () => {
+    const toggleOption = vi.fn();
+    renderPanel({ toggleOption });
+
+    fireEvent.click(screen.getByTitle("sidebar.collapseInstructions"));
+
+    expect(toggleOption).toHaveBeenCalledWith("instructions");
+  });
+});
+
 describe("When instructionsEditable changes from false to true", () => {
   test("does not leave the rendered preview above the edit/view tabs", () => {
     const { container, store } = renderWithProviders(<InstructionsPanel />, {
diff --git a/src/components/Menus/Sidebar/Sidebar.jsx b/src/components/Menus/Sidebar/Sidebar.jsx
index 79d3157b0..0605b4a00 100644
--- a/src/components/Menus/Sidebar/Sidebar.jsx
+++ b/src/components/Menus/Sidebar/Sidebar.jsx
@@ -212,6 +212,8 @@ const Sidebar = ({
     } else if (!optionIsAvailable) {
       setOption(nextDefaultOption);
       dispatch(setSidebarOption(nextDefaultOption));
+    } else {
+      setOption(selectedSidebarOption);
     }
   }, [dispatch, nextDefaultOption, optionIsAvailable, selectedSidebarOption]);
 
@@ -245,7 +247,7 @@ const Sidebar = ({
     >
       <SidebarBar
         menuOptions={menuOptions}
-        option={activeOption}
+        activeOption={activeOption}
         toggleOption={toggleOption}
         instructions={instructionsSteps}
         allowMobileView={allowMobileView}
@@ -253,6 +255,7 @@ const Sidebar = ({
       {activeOption && (
         <CustomSidebarPanel
           isMobile={isMobile}
+          toggleOption={toggleOption}
           {...(optionDict.panelProps || {})}
         />
       )}
diff --git a/src/components/Menus/Sidebar/SidebarBar.jsx b/src/components/Menus/Sidebar/SidebarBar.jsx
index 78c38f655..4bbeff0a7 100644
--- a/src/components/Menus/Sidebar/SidebarBar.jsx
+++ b/src/components/Menus/Sidebar/SidebarBar.jsx
@@ -16,7 +16,7 @@ import { MOBILE_MEDIA_QUERY } from "../../../utils/mediaQueryBreakpoints";
 const SidebarBar = (props) => {
   const {
     menuOptions,
-    option,
+    activeOption,
     toggleOption,
     instructions = false,
     allowMobileView = true,
@@ -59,7 +59,7 @@ const SidebarBar = (props) => {
   };
 
   const collapsePopOut = () => {
-    toggleOption(option);
+    toggleOption(activeOption);
     if (window.plausible) {
       window.plausible("Collapse file pane");
     }
@@ -81,7 +81,7 @@ const SidebarBar = (props) => {
   return (
     <div
       className={classNames("sidebar__bar", {
-        "sidebar__bar--selected": option,
+        "sidebar__bar--selected": activeOption,
       })}
     >
       <div className={`sidebar__bar-options--top`}>
@@ -95,7 +95,7 @@ const SidebarBar = (props) => {
             key={i}
             Icon={menuOption.icon}
             title={menuOption.title}
-            isActive={option === menuOption.name}
+            isActive={activeOption === menuOption.name}
             toggleOption={toggleOption}
             name={menuOption.name}
           />
@@ -107,13 +107,13 @@ const SidebarBar = (props) => {
             key={i}
             Icon={menuOption.icon}
             title={menuOption.title}
-            isActive={option === menuOption.name}
+            isActive={activeOption === menuOption.name}
             toggleOption={toggleOption}
             name={menuOption.name}
           />
         ))}
         {!isMobile &&
-          (option ? (
+          (activeOption ? (
             <div className="sidebar__bar-option-wrapper">
               <Button
                 className="sidebar__bar-option"
diff --git a/src/components/Menus/Sidebar/SidebarExpandButton.jsx b/src/components/Menus/Sidebar/SidebarExpandButton.jsx
new file mode 100644
index 000000000..f6e14cbb6
--- /dev/null
+++ b/src/components/Menus/Sidebar/SidebarExpandButton.jsx
@@ -0,0 +1,64 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useDispatch, useSelector } from "react-redux";
+import { useTranslation } from "react-i18next";
+import { useMediaQuery } from "react-responsive";
+
+import DoubleArrowRight from "../../../assets/icons/double_arrow_right.svg";
+import { Button } from "@raspberrypifoundation/design-system-react";
+
+import { setSidebarOption } from "../../../redux/EditorSlice";
+import { selectInstructionSteps } from "../../../redux/InstructionsSlice";
+import { MOBILE_MEDIA_QUERY } from "../../../utils/mediaQueryBreakpoints";
+
+// Sits alongside the project bar and reopens the project instructions panel
+// while the sidebar is collapsed. The equivalent collapse control lives in the
+// instructions panel header.
+const SidebarExpandButton = ({ allowMobileView = true }) => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
+  const selectedSidebarOption = useSelector(
+    (state) => state.editor.selectedSidebarOption,
+  );
+  const instructionsEditable = useSelector(
+    (state) => state.editor.instructionsEditable,
+  );
+  const instructionsSteps = useSelector(selectInstructionSteps);
+  const viewportIsMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
+  const isMobile = allowMobileView && viewportIsMobile;
+
+  const hasInstructions = instructionsSteps && instructionsSteps.length > 0;
+  const instructionsAvailable = instructionsEditable || hasInstructions;
+  const isCollapsed = selectedSidebarOption === null;
+
+  if (isMobile || !isCollapsed || !instructionsAvailable) {
+    return null;
+  }
+
+  const expandPanel = () => {
+    dispatch(setSidebarOption("instructions"));
+    if (window.plausible) {
+      window.plausible("Expand file pane");
+    }
+  };
+
+  return (
+    <div className="project-bar-row__expand">
+      <Button
+        className="sidebar__panel-collapse"
+        icon={<DoubleArrowRight />}
+        iconOnly
+        text={t("sidebar.expandInstructions")}
+        onClick={expandPanel}
+        size="small"
+        type="tertiary"
+      />
+    </div>
+  );
+};
+
+SidebarExpandButton.propTypes = {
+  allowMobileView: PropTypes.bool,
+};
+
+export default SidebarExpandButton;
diff --git a/src/components/Menus/Sidebar/SidebarExpandButton.test.jsx b/src/components/Menus/Sidebar/SidebarExpandButton.test.jsx
new file mode 100644
index 000000000..9f302310b
--- /dev/null
+++ b/src/components/Menus/Sidebar/SidebarExpandButton.test.jsx
@@ -0,0 +1,83 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import configureStore from "redux-mock-store";
+import { Provider } from "react-redux";
+
+import SidebarExpandButton from "./SidebarExpandButton";
+import { setSidebarOption } from "../../../redux/EditorSlice";
+
+const renderButton = (editorState = {}, instructionsState = {}, props = {}) => {
+  const mockStore = configureStore([]);
+  const store = mockStore({
+    editor: {
+      project: { components: [] },
+      ...editorState,
+    },
+    instructions: instructionsState,
+  });
+
+  return {
+    store,
+    ...render(
+      <Provider store={store}>
+        <SidebarExpandButton {...props} />
+      </Provider>,
+    ),
+  };
+};
+
+describe("SidebarExpandButton", () => {
+  test("is hidden while the sidebar panel is open", () => {
+    renderButton({ selectedSidebarOption: "instructions" });
+
+    expect(
+      screen.queryByTitle("sidebar.expandInstructions"),
+    ).not.toBeInTheDocument();
+  });
+
+  test("is hidden before a sidebar option has been stored", () => {
+    renderButton({ instructionsEditable: true });
+
+    expect(
+      screen.queryByTitle("sidebar.expandInstructions"),
+    ).not.toBeInTheDocument();
+  });
+
+  test("is hidden when the project has no instructions to show", () => {
+    renderButton({ selectedSidebarOption: null, instructionsEditable: false });
+
+    expect(
+      screen.queryByTitle("sidebar.expandInstructions"),
+    ).not.toBeInTheDocument();
+  });
+
+  test("is shown when the panel is collapsed and instructions are editable", () => {
+    renderButton({ selectedSidebarOption: null, instructionsEditable: true });
+
+    expect(
+      screen.queryByTitle("sidebar.expandInstructions"),
+    ).toBeInTheDocument();
+  });
+
+  test("is shown when the panel is collapsed and the project has steps", () => {
+    renderButton(
+      { selectedSidebarOption: null, instructionsEditable: false },
+      { project: { steps: [{ content: "<p>step 0</p>" }] } },
+    );
+
+    expect(
+      screen.queryByTitle("sidebar.expandInstructions"),
+    ).toBeInTheDocument();
+  });
+
+  test("opens the instructions panel when clicked", () => {
+    const { store } = renderButton({
+      selectedSidebarOption: null,
+      instructionsEditable: true,
+    });
+
+    fireEvent.click(screen.getByTitle("sidebar.expandInstructions"));
+
+    expect(store.getActions()).toEqual([setSidebarOption("instructions")]);
+  });
+});
diff --git a/src/components/Menus/Sidebar/SidebarPanel.jsx b/src/components/Menus/Sidebar/SidebarPanel.jsx
index 713eead77..15af5feeb 100644
--- a/src/components/Menus/Sidebar/SidebarPanel.jsx
+++ b/src/components/Menus/Sidebar/SidebarPanel.jsx
@@ -13,6 +13,7 @@ const SidebarPanel = (props) => {
     className,
     buttons,
     headerContent,
+    headingPrefix,
     panelRef,
     defaultWidth = "320px",
   } = props;
@@ -24,7 +25,10 @@ const SidebarPanel = (props) => {
   const panelContent = (
     <>
       <div className="sidebar__panel-header">
-        <h2 className="sidebar__panel-heading">{heading}</h2>
+        <div className="sidebar__panel-heading-row">
+          {headingPrefix}
+          <h2 className="sidebar__panel-heading">{heading}</h2>
+        </div>
         {buttons && !buttonsIsEmptyArray && (
           <div className="sidebar__panel-buttons">{buttons}</div>
         )}
@@ -65,6 +69,7 @@ SidebarPanel.propTypes = {
   className: PropTypes.string,
   buttons: PropTypes.arrayOf(PropTypes.node),
   headerContent: PropTypes.node,
+  headingPrefix: PropTypes.node,
 };
 
 export default SidebarPanel;