diff --git a/apps/web/test/viewmodels/structures/ResizerViewModel-test.ts b/apps/web/test/viewmodels/structures/ResizerViewModel-test.ts
index c71e1d8527..590a70ebba 100644
--- a/apps/web/test/viewmodels/structures/ResizerViewModel-test.ts
+++ b/apps/web/test/viewmodels/structures/ResizerViewModel-test.ts
@@ -85,7 +85,7 @@ describe("LeftPanelResizerViewModel", () => {
         expect(mockHandle.resize).not.toHaveBeenCalledWith("34%");
     });
 
-    describe("should expand panel on click()", () => {
+    describe("should expand panel on click when panel is collapsed", () => {
         it("to last non-zero width that the user set", () => {
             const vm = new ResizerViewModel();
             SettingsStore.setValue("RoomList.panelSize", null, SettingLevel.DEVICE, 34);
@@ -118,6 +118,21 @@ describe("LeftPanelResizerViewModel", () => {
         });
     });
 
+    it("should collapse panel on click when panel is expanded", () => {
+        const vm = new ResizerViewModel();
+        const mockHandle = {
+            collapse: jest.fn(),
+            isCollapsed: jest.fn().mockReturnValue(false),
+        } as unknown as PanelImperativeHandle;
+        vm.setPanelHandle(mockHandle);
+
+        // Simulate click
+        vm.onPointerDown();
+        vm.onPointerUp();
+
+        expect(mockHandle.collapse).toHaveBeenCalled();
+    });
+
     it("should resize to nearest whole number", () => {
         const vm = new ResizerViewModel();
         const mockHandle = {
diff --git a/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/hover-when-collapsed-1.png b/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/hover-when-collapsed-1.png
new file mode 100644
index 0000000000..c2f165daa3
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/hover-when-collapsed-1.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/hover-when-expanded-1.png b/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/hover-when-expanded-1.png
new file mode 100644
index 0000000000..054745a6c2
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/hover-when-expanded-1.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/keyboard-focused-1.png b/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/keyboard-focused-1.png
index 769bf9de51..a33a468b57 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/keyboard-focused-1.png and b/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/keyboard-focused-1.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/with-jump-to-date-picker-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/with-jump-to-date-picker-auto.png
index c1092c385f..2f32d098b2 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/with-jump-to-date-picker-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/with-jump-to-date-picker-auto.png differ
diff --git a/packages/shared-components/src/resize/separator/SeparatorView.stories.tsx b/packages/shared-components/src/resize/separator/SeparatorView.stories.tsx
index 127522b495..6d9a7eefb1 100644
--- a/packages/shared-components/src/resize/separator/SeparatorView.stories.tsx
+++ b/packages/shared-components/src/resize/separator/SeparatorView.stories.tsx
@@ -116,7 +116,7 @@ export const KeyboardFocused: Story = {
     },
 };
 
-export const Hover: Story = {
+export const HoverWhenCollapsed: Story = {
     // We'll manually take a screenshot for this story
     tags: ["autodocs", "!snapshot"],
     decorators: [
@@ -148,3 +148,45 @@ export const Hover: Story = {
         await expect(canvasElement).toMatchImageSnapshot();
     },
 };
+
+export const HoverWhenExpanded: Story = {
+    // We'll manually take a screenshot for this story
+    tags: ["autodocs", "!snapshot"],
+    args: {
+        isCollapsed: false,
+    },
+    decorators: [
+        (Story) => (
+            <div
+                style={{
+                    height: "600px",
+                }}
+            >
+                <ResizableGroup>
+                    <div
+                        style={{
+                            height: "600px",
+                            width: "200px",
+                        }}
+                    />
+                    <Panel collapsible defaultSize="0" minSize="200px" maxSize="400px">
+                        <Flex tabIndex={0} align="center" justify="center">
+                            LEFT CONTENT
+                        </Flex>
+                    </Panel>
+                    <Story />
+                    <Panel>
+                        <Flex align="center" justify="center">
+                            MAIN CONTENT
+                        </Flex>
+                    </Panel>
+                </ResizableGroup>
+            </div>
+        ),
+    ],
+    play: async ({ canvas, canvasElement }) => {
+        const separator = canvas.getByRole("separator");
+        separator.dataset.separator = "hover";
+        await expect(canvasElement).toMatchImageSnapshot();
+    },
+};
diff --git a/packages/shared-components/src/resize/separator/SeparatorView.test.tsx b/packages/shared-components/src/resize/separator/SeparatorView.test.tsx
index 53ddab684f..1072aca291 100644
--- a/packages/shared-components/src/resize/separator/SeparatorView.test.tsx
+++ b/packages/shared-components/src/resize/separator/SeparatorView.test.tsx
@@ -15,7 +15,7 @@ import * as stories from "./SeparatorView.stories";
 import { BaseViewModel } from "../../core/viewmodel";
 import { ResizableGroup, Panel, type ResizerViewSnapshot, SeparatorView, type SeparatorViewActions } from "..";
 
-const { Default, LeftPanelExpanded, KeyboardFocused } = composeStories(stories);
+const { Default, LeftPanelExpanded, KeyboardFocused, HoverWhenCollapsed, HoverWhenExpanded } = composeStories(stories);
 
 class MockViewModel extends BaseViewModel<ResizerViewSnapshot, unknown> implements SeparatorViewActions {
     public constructor(snapshot: ResizerViewSnapshot) {
@@ -55,6 +55,16 @@ describe("<SeparatorView />", () => {
         expect(container).toMatchSnapshot();
     });
 
+    it("renders HoverWhenCollapsed story", () => {
+        const { container } = render(<HoverWhenCollapsed />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders HoverWhenExpanded story", () => {
+        const { container } = render(<HoverWhenExpanded />);
+        expect(container).toMatchSnapshot();
+    });
+
     it("should call onPointerDown and onPointerUp on pointer events", async () => {
         const vm = renderPanel();
         const separator = screen.getByRole("separator");
diff --git a/packages/shared-components/src/resize/separator/__snapshots__/SeparatorView.test.tsx.snap b/packages/shared-components/src/resize/separator/__snapshots__/SeparatorView.test.tsx.snap
index 695dde68da..b2312eb7be 100644
--- a/packages/shared-components/src/resize/separator/__snapshots__/SeparatorView.test.tsx.snap
+++ b/packages/shared-components/src/resize/separator/__snapshots__/SeparatorView.test.tsx.snap
@@ -57,6 +57,175 @@ exports[`<SeparatorView /> > renders Default story 1`] = `
             d="M5 15a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 14q0-.424.287-.713A.97.97 0 0 1 5 13h14q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 19 15zm0-4a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 10q0-.424.287-.713A.97.97 0 0 1 5 9h14q.424 0 .712.287Q20 9.576 20 10t-.288.713A.97.97 0 0 1 19 11z"
           />
         </svg>
+        <div
+          class="SeparatorView-module_activeSeparatorContainer"
+        >
+          <div
+            class="SeparatorView-module_activeSeparator"
+          />
+        </div>
+      </div>
+      <div
+        data-panel="true"
+        data-testid="react-use-id-4"
+        id="react-use-id-4"
+        style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 100 1 0px; overflow: visible;"
+      >
+        <div
+          style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
+        >
+          <div
+            class="Flex-module_flex"
+            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+          >
+            MAIN CONTENT
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SeparatorView /> > renders HoverWhenCollapsed story 1`] = `
+<div>
+  <div
+    style="height: 600px;"
+  >
+    <div
+      data-group="true"
+      data-testid="react-use-id-1"
+      id="react-use-id-1"
+      style="height: 100%; width: 100%; overflow: hidden; display: flex; flex-flow: row; touch-action: pan-y;"
+    >
+      <div
+        data-panel="true"
+        data-testid="react-use-id-2"
+        id="react-use-id-2"
+        style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 0 1 0px; overflow: visible;"
+      >
+        <div
+          style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
+        >
+          <div
+            class="Flex-module_flex"
+            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+            tabindex="0"
+          >
+            LEFT CONTENT
+          </div>
+        </div>
+      </div>
+      <div
+        aria-controls="react-use-id-2"
+        aria-label="Click or drag to expand"
+        aria-orientation="vertical"
+        aria-valuemax="99.502"
+        aria-valuemin="0"
+        aria-valuenow="0"
+        class="SeparatorView-module_separator Separator"
+        data-separator="inactive"
+        data-separator-type="bar"
+        data-testid="react-use-id-3"
+        id="react-use-id-3"
+        role="separator"
+        style="flex: 0 0 auto; touch-action: none;"
+        tabindex="0"
+      >
+        <svg
+          fill="currentColor"
+          height="12px"
+          transform="rotate(90)"
+          viewBox="3.999704360961914 8.999704360961914 16.000295639038086 6.000591278076172"
+          width="20px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5 15a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 14q0-.424.287-.713A.97.97 0 0 1 5 13h14q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 19 15zm0-4a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 10q0-.424.287-.713A.97.97 0 0 1 5 9h14q.424 0 .712.287Q20 9.576 20 10t-.288.713A.97.97 0 0 1 19 11z"
+          />
+        </svg>
+        <div
+          class="SeparatorView-module_activeSeparatorContainer"
+        >
+          <div
+            class="SeparatorView-module_activeSeparator"
+          />
+        </div>
+      </div>
+      <div
+        data-panel="true"
+        data-testid="react-use-id-4"
+        id="react-use-id-4"
+        style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 100 1 0px; overflow: visible;"
+      >
+        <div
+          style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
+        >
+          <div
+            class="Flex-module_flex"
+            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+          >
+            MAIN CONTENT
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SeparatorView /> > renders HoverWhenExpanded story 1`] = `
+<div>
+  <div
+    style="height: 600px;"
+  >
+    <div
+      data-group="true"
+      data-testid="react-use-id-1"
+      id="react-use-id-1"
+      style="height: 100%; width: 100%; overflow: hidden; display: flex; flex-flow: row; touch-action: pan-y;"
+    >
+      <div
+        data-panel="true"
+        data-testid="react-use-id-2"
+        id="react-use-id-2"
+        style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 0 1 0px; overflow: visible;"
+      >
+        <div
+          style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
+        >
+          <div
+            class="Flex-module_flex"
+            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+            tabindex="0"
+          >
+            LEFT CONTENT
+          </div>
+        </div>
+      </div>
+      <div
+        aria-controls="react-use-id-2"
+        aria-label="Click or drag to expand"
+        aria-orientation="vertical"
+        aria-valuemax="96.618"
+        aria-valuemin="0"
+        aria-valuenow="0"
+        class="SeparatorView-module_separator Separator"
+        data-separator="inactive"
+        data-separator-type="border"
+        data-testid="react-use-id-3"
+        id="react-use-id-3"
+        role="separator"
+        style="flex: 0 0 auto; touch-action: none;"
+        tabindex="0"
+      >
+        <div
+          class="SeparatorView-module_activeSeparatorContainer"
+        >
+          <div
+            class="SeparatorView-module_activeSeparator"
+          />
+        </div>
       </div>
       <div
         data-panel="true"
@@ -95,7 +264,7 @@ exports[`<SeparatorView /> > renders KeyboardFocused story 1`] = `
         data-panel="true"
         data-testid="react-use-id-2"
         id="react-use-id-2"
-        style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 49.751 1 0px; overflow: visible;"
+        style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 48.309 1 0px; overflow: visible;"
       >
         <div
           style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
@@ -113,36 +282,31 @@ exports[`<SeparatorView /> > renders KeyboardFocused story 1`] = `
         aria-controls="react-use-id-2"
         aria-label="Click or drag to expand"
         aria-orientation="vertical"
-        aria-valuemax="99.502"
+        aria-valuemax="96.618"
         aria-valuemin="0"
-        aria-valuenow="49.751"
+        aria-valuenow="48.309"
         class="SeparatorView-module_separator Separator"
         data-separator="inactive"
-        data-separator-type="bar"
+        data-separator-type="border"
         data-testid="react-use-id-3"
         id="react-use-id-3"
         role="separator"
         style="flex: 0 0 auto; touch-action: none;"
         tabindex="0"
       >
-        <svg
-          fill="currentColor"
-          height="12px"
-          transform="rotate(90)"
-          viewBox="3.999704360961914 8.999704360961914 16.000295639038086 6.000591278076172"
-          width="20px"
-          xmlns="http://www.w3.org/2000/svg"
+        <div
+          class="SeparatorView-module_activeSeparatorContainer"
         >
-          <path
-            d="M5 15a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 14q0-.424.287-.713A.97.97 0 0 1 5 13h14q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 19 15zm0-4a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 10q0-.424.287-.713A.97.97 0 0 1 5 9h14q.424 0 .712.287Q20 9.576 20 10t-.288.713A.97.97 0 0 1 19 11z"
+          <div
+            class="SeparatorView-module_activeSeparator"
           />
-        </svg>
+        </div>
       </div>
       <div
         data-panel="true"
         data-testid="react-use-id-4"
         id="react-use-id-4"
-        style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 50.249 1 0px; overflow: visible;"
+        style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 51.691 1 0px; overflow: visible;"
       >
         <div
           style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
@@ -204,7 +368,15 @@ exports[`<SeparatorView /> > renders LeftPanelExpanded story 1`] = `
         role="separator"
         style="flex: 0 0 auto; touch-action: none;"
         tabindex="0"
-      />
+      >
+        <div
+          class="SeparatorView-module_activeSeparatorContainer"
+        >
+          <div
+            class="SeparatorView-module_activeSeparator"
+          />
+        </div>
+      </div>
       <div
         data-panel="true"
         data-testid="react-use-id-4"