diff --git a/packages/fiori/src/FlexibleColumnLayout.ts b/packages/fiori/src/FlexibleColumnLayout.ts
index 0a8f900b4dcd..684fdbba67d1 100644
--- a/packages/fiori/src/FlexibleColumnLayout.ts
+++ b/packages/fiori/src/FlexibleColumnLayout.ts
@@ -10,6 +10,8 @@ import { supportsTouch } from "@ui5/webcomponents-base/dist/Device.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
 import "@ui5/webcomponents-icons/dist/vertical-grip.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import {
@@ -19,12 +21,15 @@ import {
 	isRightShift,
 	isHome,
 	isEnd,
+	isEnter,
+	isSpace,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import type { PassiveEventListenerObject, AriaLandmarkRole } from "@ui5/webcomponents-base";
 import FCLLayout from "./types/FCLLayout.js";
 import type { LayoutConfiguration } from "./fcl-utils/FCLLayout.js";
 import {
 	getLayoutsByMedia,
+	getNextLayoutByArrowPress,
 } from "./fcl-utils/FCLLayout.js";
 
 // Texts
@@ -167,6 +172,7 @@ type UserDefinedColumnLayouts = {
 	renderer: jsxRenderer,
 	styles: FlexibleColumnLayoutCss,
 	template: FlexibleColumnLayoutTemplate,
+	dependencies: [Icon, Button],
 })
 
 /**
@@ -476,6 +482,9 @@ class FlexibleColumnLayout extends UI5Element {
 	}
 
 	onSeparatorPress(e: TouchEvent | MouseEvent) {
+		if (e.target as HTMLElement === this.startArrowDOM) {
+			return;
+		}
 		const pressedSeparator = (e.target as HTMLElement).closest(".ui5-fcl-separator") as HTMLElement;
 		if (pressedSeparator.classList.contains("ui5-fcl-separator-start") && !this.showStartSeparatorGrip) {
 			return;
@@ -654,11 +663,26 @@ class FlexibleColumnLayout extends UI5Element {
 		return columnLayoutToAdjust;
 	}
 
-	async _onkeydown(e: KeyboardEvent) {
+	_onArrowKeydown(e: KeyboardEvent) {
+		if (isEnter(e) || isSpace(e)) {
+		  e.preventDefault();
+		  const focusedElement = e.target as HTMLElement;
+		  if (focusedElement === this.startArrowDOM) {
+				this.switchLayoutOnArrowPress();
+		  }
+		}
+	  }
+
+	async _onSeparatorKeydown(e: KeyboardEvent) {
+		const separator = e.target as HTMLElement;
+		if (!separator.classList.contains("ui5-fcl-separator")) {
+			return;
+		}
 		const stepSize = 2,
 			bigStepSize = this._width,
 			isRTL = this.effectiveDir === "rtl";
 		let step = 0;
+
 		if (isLeft(e)) {
 			step = -stepSize * 10;
 		} else if (isRight(e)) {
@@ -679,7 +703,6 @@ class FlexibleColumnLayout extends UI5Element {
 			return;
 		}
 
-		const separator = e.target as HTMLElement;
 		if (!this.separatorMovementSession) {
 			this.separatorMovementSession = this.initSeparatorMovementSession(separator, 0, false);
 		}
@@ -693,7 +716,7 @@ class FlexibleColumnLayout extends UI5Element {
 		separator.focus();
 	}
 
-	_onkeyup() {
+	_onSeparatorKeyUp() {
 		if (this.separatorMovementSession) {
 			this.onSeparatorMoveEnd();
 		}
@@ -818,6 +841,30 @@ class FlexibleColumnLayout extends UI5Element {
 			return FCLLayout.ThreeColumnsMidExpanded;
 		}
 
+		if (moved({
+			separator: "start",
+			from: FCLLayout.ThreeColumnsStartHiddenMidExpanded,
+			forward: true,
+		}) && !isTablet && Math.ceil(startColumnPxWidth) >= COLUMN_MIN_WIDTH) {
+			return FCLLayout.ThreeColumnsMidExpanded;
+		}
+
+		if (moved({
+			separator: "end",
+			from: FCLLayout.ThreeColumnsStartHiddenMidExpanded,
+			forward: false,
+		}) && newColumnWidths.mid < newColumnWidths.end) {
+			return FCLLayout.ThreeColumnsStartHiddenEndExpanded;
+		}
+
+		if (moved({
+			separator: "end",
+			from: FCLLayout.ThreeColumnsStartHiddenEndExpanded,
+			forward: true,
+		}) && newColumnWidths.mid >= newColumnWidths.end) {
+			return FCLLayout.ThreeColumnsStartHiddenMidExpanded;
+		}
+
 		if (moved({
 			separator: "end",
 			from: FCLLayout.ThreeColumnsMidExpandedEndHidden,
@@ -880,6 +927,14 @@ class FlexibleColumnLayout extends UI5Element {
 		return fclLayoutBeforeMove; // no layout change
 	}
 
+	switchLayoutOnArrowPress() {
+		const lastUsedLayout = this.layout as FCLLayout;
+		this.layout = getNextLayoutByArrowPress()[lastUsedLayout as keyof typeof getNextLayoutByArrowPress];
+		if (this.layout !== lastUsedLayout) {
+			this.fireLayoutChange(true, false);
+		}
+	}
+
 	get _availableWidthForColumns() {
 		let width = this._width;
 		if (this.showStartSeparator) {
@@ -982,6 +1037,10 @@ class FlexibleColumnLayout extends UI5Element {
 		return this.disableResizing ? false : this.startSeparatorGripVisibility;
 	}
 
+	get showStartSeparatorArrow() {
+		return this.disableResizing ? false : this.startSeparatorArrowVisibility;
+	}
+
 	get showEndSeparatorGrip() {
 		return this.disableResizing ? false : this.endSeparatorGripVisibility;
 	}
@@ -994,6 +1053,18 @@ class FlexibleColumnLayout extends UI5Element {
 		return this.effectiveSeparatorsInfo[1].gripVisible;
 	}
 
+	get startSeparatorArrowVisibility() {
+		return this.effectiveSeparatorsInfo[0].arrowVisible;
+	}
+
+	get startArrowDirection() {
+		return this.effectiveSeparatorsInfo[0].arrowDirection;
+	}
+
+	get startArrowDOM() {
+		return this.shadowRoot!.querySelector<HTMLElement>(".ui5-fcl-arrow--start")!;
+	}
+
 	get effectiveSeparatorsInfo() {
 		return this._effectiveLayoutsByMedia[this.media][this.effectiveLayout].separators;
 	}
diff --git a/packages/fiori/src/FlexibleColumnLayoutTemplate.tsx b/packages/fiori/src/FlexibleColumnLayoutTemplate.tsx
index 8241bfa1d9b3..f71620202f74 100644
--- a/packages/fiori/src/FlexibleColumnLayoutTemplate.tsx
+++ b/packages/fiori/src/FlexibleColumnLayoutTemplate.tsx
@@ -2,6 +2,7 @@ import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/InitialConfiguration.js";
 import verticalGrip from "@ui5/webcomponents-icons/dist/vertical-grip.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
 import type FlexibleColumnLayout from "./FlexibleColumnLayout.js";
 
 export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout) {
@@ -31,9 +32,10 @@ export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout)
 				tabindex={this.startSeparatorTabIndex}
 				onMouseDown={this.onSeparatorPress}
 				onTouchStart={this.onSeparatorPress}
-				onKeyDown={this._onkeydown}
-				onKeyUp={this._onkeyup}
+				onKeyDown={this._onSeparatorKeydown}
+				onKeyUp={this._onSeparatorKeyUp}
 			>
+				{ this.showStartSeparatorArrow && arrowStart.call(this) }
 				{ gripStart.call(this) }
 			</div>
 
@@ -59,8 +61,8 @@ export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout)
 				tabindex={this.endSeparatorTabIndex}
 				onMouseDown={this.onSeparatorPress}
 				onTouchStart={this.onSeparatorPress}
-				onKeyDown={this._onkeydown}
-				onKeyUp={this._onkeyup}
+				onKeyDown={this._onSeparatorKeydown}
+				onKeyUp={this._onSeparatorKeyUp}
 			>
 				{ gripEnd.call(this) }
 			</div>
@@ -82,6 +84,18 @@ export default function FlexibleColumnLayoutTemplate(this: FlexibleColumnLayout)
 	);
 }
 
+function arrowStart(this: FlexibleColumnLayout) {
+	return (
+		<Button
+			icon={this.startArrowDirection === "backward" ? "slim-arrow-left" : "slim-arrow-right"}
+			design="Transparent"
+			onClick={this.switchLayoutOnArrowPress}
+			onKeyDown={this._onArrowKeydown}
+			class="ui5-fcl-arrow ui5-fcl-arrow--start"
+		/>
+	);
+}
+
 function gripStart(this: FlexibleColumnLayout) {
 	return (
 		<Icon
diff --git a/packages/fiori/src/fcl-utils/FCLLayout.ts b/packages/fiori/src/fcl-utils/FCLLayout.ts
index edeb472a245b..25cefad2d518 100644
--- a/packages/fiori/src/fcl-utils/FCLLayout.ts
+++ b/packages/fiori/src/fcl-utils/FCLLayout.ts
@@ -8,6 +8,8 @@ type LayoutConfiguration = {
 			separators: Array<{
 				visible: boolean;
 				gripVisible?: boolean;
+				arrowVisible?: boolean;
+				arrowDirection?: "forward" | "backward";
 			}>;
 		};
 	};
@@ -40,14 +42,24 @@ const getLayoutsByMedia = (): LayoutConfiguration => {
 			"ThreeColumnsMidExpanded": {
 				layout: ["25%", "50%", "25%"],
 				separators:	[
-					{ visible: true, gripVisible: true },
+					{
+						visible: true,
+						gripVisible: true,
+						arrowVisible: true,
+						arrowDirection: "backward",
+					},
 					{ visible: true, gripVisible: true },
 				],
 			},
 			"ThreeColumnsEndExpanded": {
 				layout: ["25%", "25%", "50%"],
 				separators: [
-					{ visible: true, gripVisible: false },
+					{
+						visible: true,
+						gripVisible: false,
+						arrowVisible: true,
+						arrowDirection: "backward",
+					},
 					{ visible: true, gripVisible: true },
 				],
 			},
@@ -65,6 +77,30 @@ const getLayoutsByMedia = (): LayoutConfiguration => {
 					{ visible: true, gripVisible: true },
 				],
 			},
+			"ThreeColumnsStartHiddenMidExpanded": {
+				layout: ["0px", "33%", "67%"],
+				separators: [
+					{
+						visible: true,
+						gripVisible: true,
+						arrowVisible: true,
+						arrowDirection: "forward",
+					},
+					{ visible: true, gripVisible: true },
+				],
+			},
+			"ThreeColumnsStartHiddenEndExpanded": {
+				layout: ["0px", "33%", "67%"],
+				separators: [
+					{
+						visible: true,
+						gripVisible: false,
+						arrowVisible: true,
+						arrowDirection: "forward",
+					},
+					{ visible: true, gripVisible: true },
+				],
+			},
 			"MidColumnFullScreen": {
 				layout: ["0px", "100%", "0px"],
 				separators: [
@@ -130,6 +166,20 @@ const getLayoutsByMedia = (): LayoutConfiguration => {
 					{ visible: true, gripVisible: true },
 				],
 			},
+			"ThreeColumnsStartHiddenMidExpanded": {
+				layout: ["0px", "67%", "33%"],
+				separators: [
+					{ visible: true, gripVisible: true },
+					{ visible: true, gripVisible: true },
+				],
+			},
+			"ThreeColumnsStartHiddenEndExpanded": {
+				layout: ["0px", "33%", "67%"],
+				separators: [
+					{ visible: false },
+					{ visible: true, gripVisible: true },
+				],
+			},
 			"MidColumnFullScreen": {
 				layout: ["0px", "100%", "0px"],
 				separators: [
@@ -195,6 +245,20 @@ const getLayoutsByMedia = (): LayoutConfiguration => {
 					{ visible: false },
 				],
 			},
+			"ThreeColumnsStartHiddenMidExpanded": {
+				layout: ["0px", "0px", "100%"],
+				separators: [
+					{ visible: false },
+					{ visible: false },
+				],
+			},
+			"ThreeColumnsStartHiddenEndExpanded": {
+				layout: ["0px", "0px", "100%"],
+				separators: [
+					{ visible: false },
+					{ visible: false },
+				],
+			},
 			"MidColumnFullScreen": {
 				layout: ["0px", "100%", "0px"],
 				separators: [
@@ -213,8 +277,18 @@ const getLayoutsByMedia = (): LayoutConfiguration => {
 	};
 };
 
+const getNextLayoutByArrowPress = () => {
+	return {
+		"ThreeColumnsMidExpanded": "ThreeColumnsStartHiddenMidExpanded",
+		"ThreeColumnsEndExpanded": "ThreeColumnsStartHiddenEndExpanded",
+		"ThreeColumnsStartHiddenMidExpanded": "ThreeColumnsMidExpanded",
+		"ThreeColumnsStartHiddenEndExpanded": "ThreeColumnsEndExpanded",
+	};
+};
+
 export {
 	getLayoutsByMedia,
+	getNextLayoutByArrowPress,
 };
 
 export type {
diff --git a/packages/fiori/src/themes/FlexibleColumnLayout.css b/packages/fiori/src/themes/FlexibleColumnLayout.css
index b779b7fb7b67..cf780f048925 100644
--- a/packages/fiori/src/themes/FlexibleColumnLayout.css
+++ b/packages/fiori/src/themes/FlexibleColumnLayout.css
@@ -33,7 +33,7 @@
 	display: none;
 }
 
-/* arrow */
+/* separator */
 .ui5-fcl-separator {
 	display: flex;
 	align-items: center;
@@ -59,7 +59,19 @@
 	padding-bottom: 0.3125rem;
 }
 
-/* arrow decoration */
+.ui5-fcl-arrow {
+	position: absolute;
+    top: 1rem;
+	width: 1.5rem;
+	height: 1.5rem;
+	min-width: 1.5rem;
+	will-change: transform;
+	overflow: visible;
+	z-index: 10;
+	cursor: pointer;
+}
+
+/* grip decoration */
 .ui5-fcl-grip:before {
 	background-image: var(--_ui5_fcl_decoration_top);
 	bottom: calc(50% + 1rem);
@@ -88,6 +100,11 @@
 	height: calc(50% - 1rem);
 }
 
+/* Only apply shorter height when arrow is visible */
+.ui5-fcl-separator:hover .ui5-fcl-arrow + .ui5-fcl-grip::before  {
+	height: calc(40% - 1rem);
+}
+
 [aria-hidden] ::slotted([slot="startColumn"]),
 [aria-hidden] ::slotted([slot="midColumn"]),
 [aria-hidden] ::slotted([slot="endColumn"]){
diff --git a/packages/fiori/src/types/FCLLayout.ts b/packages/fiori/src/types/FCLLayout.ts
index 358d32fbb8b7..0cdb40740aab 100644
--- a/packages/fiori/src/types/FCLLayout.ts
+++ b/packages/fiori/src/types/FCLLayout.ts
@@ -72,6 +72,26 @@ enum FCLLayout {
 	 */
 	ThreeColumnsMidExpandedEndHidden = "ThreeColumnsMidExpandedEndHidden",
 
+	 /**
+     * Desktop: Defaults to 0 - 67 - 33 percent widths of columns. Start is hidden, Mid (expanded) and End columns are displayed.
+     * Tablet:  Defaults to 0 - 67 - 33 percent widths of columns. Start is hidden, Mid (expanded) and End columns are displayed.
+     * Phone:   Fixed -- 100 percent width of the Mid column, only the Mid column is displayed.
+     *
+     * Use to display the Mid and End columns while the Start column is hidden.
+     * @public
+     */
+	 ThreeColumnsStartHiddenMidExpanded = "ThreeColumnsStartHiddenMidExpanded",
+
+	 /**
+	  * Desktop: Defaults to 0 - 33 - 67 percent widths of columns. Start is hidden, Mid and End (expanded) columns are displayed.
+	  * Tablet:  Defaults to 0 - 33 - 67 percent widths of columns. Start is hidden, Mid and End (expanded) columns are displayed.
+	  * Phone:   Fixed -- 100 percent width of the End column, only the End column is displayed.
+	  *
+	  * Use to display the Mid column and expanded End column while the grip of the separator is not visible.
+	  * @public
+	  */
+	 ThreeColumnsStartHiddenEndExpanded = "ThreeColumnsStartHiddenEndExpanded",
+
 	/**
 	 * Desktop: Fixed -- 100 -- percent widths of columns, only the Mid column is displayed
 	 * Tablet:  Fixed -- 100 -- percent widths of columns, only the Mid column is displayed
diff --git a/packages/fiori/test/pages/FCL.html b/packages/fiori/test/pages/FCL.html
index 28c025644eb0..0f14be12f2a3 100644
--- a/packages/fiori/test/pages/FCL.html
+++ b/packages/fiori/test/pages/FCL.html
@@ -496,8 +496,62 @@
 		</div>
 	</ui5-flexible-column-layout>
 
-	<br><br>
 	<!-- ex7 -->
+	<br><br>
+	<ui5-title class="sectionTitle">Arrow Icon: Start Column Hidden by Default</ui5-title>
+	<br><br>
+
+		<ui5-flexible-column-layout id="fcl10" layout="ThreeColumnsStartHiddenMidExpanded">
+			<!-- start column -->
+			<div class="fcl4auto" slot="startColumn">
+				<div class="fcl5auto">
+					<ui5-title>Column 1</ui5-title>
+				</div>
+				<ui5-list>
+					<ui5-li>Hello worild!</ui5-li>
+					<ui5-li>Hello worild!</ui5-li>
+					<ui5-li>Hello worild!</ui5-li>
+					<ui5-li>Hello worild!</ui5-li>
+					<ui5-li>Hello worild!</ui5-li>
+					<ui5-li>Hello worild!</ui5-li>
+					<ui5-li>Hello worild!</ui5-li>
+					<ui5-li>Hello worild!</ui5-li>
+				</ui5-list>
+			</div>
+	
+			<!-- mid column -->
+			<div class="fcl4auto" slot="midColumn">
+				<div class="fcl5auto">
+					<ui5-title>Column 2</ui5-title>
+				</div>
+				<ui5-list>
+					<ui5-li>Hello worild!</ui5-li>
+					<ui5-li>Hello worild!</ui5-li>
+					<ui5-li>Hello worild!</ui5-li>
+					<ui5-li>Hello worild!</ui5-li>
+					<ui5-li>Hello worild!</ui5-li>
+					<ui5-li>Hello worild!</ui5-li>
+					<ui5-li>Hello worild!</ui5-li>
+					<ui5-li>Hello worild!</ui5-li>
+				</ui5-list>
+			</div>
+	
+			<!-- end column -->
+			<div class="fcl4auto" slot="endColumn">
+				<div class="fcl5auto">
+					<ui5-title>Column 3</ui5-title>
+				</div>
+	
+				<ui5-list>
+					<ui5-li>Hello worild!</ui5-li>
+					<ui5-li>Hello worild!</ui5-li>
+					<ui5-li>Hello worild!</ui5-li>
+				</ui5-list>
+			</div>
+		</ui5-flexible-column-layout>
+
+	<br><br>
+	<!-- ex8 -->
 	<ui5-flexible-column-layout id="fclApp" class="fcl14auto">
 		<!-- start column -->
 		<div class="col" slot="startColumn">
diff --git a/packages/fiori/test/specs/FCL.spec.js b/packages/fiori/test/specs/FCL.spec.js
index d3911608fe78..20e69f7f4822 100644
--- a/packages/fiori/test/specs/FCL.spec.js
+++ b/packages/fiori/test/specs/FCL.spec.js
@@ -567,3 +567,23 @@ describe("ACC", () => {
 			"Middle column is hidden from the acc tree.");
 	});
 });
+
+describe("First column closing arrow behavior", () => {
+	it("should switch layout and update arrow icon on desktop", async () => {
+		const fcl = await browser.$("#fcl10");
+		const arrowBtn = await fcl.shadow$(".ui5-fcl-arrow--start");
+	
+		await fcl.setProperty("layout", "ThreeColumnsStartHiddenMidExpanded");
+		assert.strictEqual(await arrowBtn.getAttribute("icon"), "slim-arrow-right", "Arrow should point right");
+	
+		await arrowBtn.click();
+	
+		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsMidExpanded", "Layout should switch to ThreeColumnsMidExpanded");
+		assert.strictEqual(await arrowBtn.getAttribute("icon"), "slim-arrow-left", "Arrow should point left");
+
+		await arrowBtn.click();
+
+		assert.strictEqual(await fcl.getProperty("layout"), "ThreeColumnsStartHiddenMidExpanded", "Layout should switch to ThreeColumnsStartHiddenMidExpanded");
+		assert.strictEqual(await arrowBtn.getAttribute("icon"), "slim-arrow-right", "Arrow should point right");
+	});
+});
\ No newline at end of file