diff --git a/packages/fiori/src/FlexibleColumnLayoutTemplate.tsx b/packages/fiori/src/FlexibleColumnLayoutTemplate.tsx
index 0b0a43e21212..b8f7706ab732 100644
--- a/packages/fiori/src/FlexibleColumnLayoutTemplate.tsx
+++ b/packages/fiori/src/FlexibleColumnLayoutTemplate.tsx
@@ -100,20 +100,26 @@ function arrowStart(this: FlexibleColumnLayout) {
 
 function gripStart(this: FlexibleColumnLayout) {
 	return (
-		<Icon
-			name={verticalGripIcon}
+		<div
 			class="ui5-fcl-grip ui5-fcl-grip--start"
-			style={{ display: this.showStartSeparatorGrip ? "inline-block" : "none" }}
-		/>
+			style={{ display: this.showStartSeparatorGrip ? "flex" : "none" }}>
+			<Icon
+				name={verticalGripIcon}
+				class="ui5-fcl-grip-icon"
+			/>
+		</div>
 	);
 }
 
 function gripEnd(this: FlexibleColumnLayout) {
 	return (
-		<Icon
-			name={verticalGripIcon}
+		<div
 			class="ui5-fcl-grip ui5-fcl-grip--end"
-			style={{ display: this.showEndSeparatorGrip ? "inline-block" : "none" }}
-		/>
+			style={{ display: this.showEndSeparatorGrip ? "flex" : "none" }}>
+			<Icon
+				name={verticalGripIcon}
+				class="ui5-fcl-grip-icon"
+			/>
+		</div>
 	);
 }
diff --git a/packages/fiori/src/themes/FlexibleColumnLayout.css b/packages/fiori/src/themes/FlexibleColumnLayout.css
index cf780f048925..b49d6e6ec242 100644
--- a/packages/fiori/src/themes/FlexibleColumnLayout.css
+++ b/packages/fiori/src/themes/FlexibleColumnLayout.css
@@ -36,6 +36,7 @@
 /* separator */
 .ui5-fcl-separator {
 	display: flex;
+	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 	width: 1rem;
@@ -50,13 +51,20 @@
 	border:var(--_ui5_fcl_separator_focus_border);
 	outline: none;
 }
+
 .ui5-fcl-grip {
 	cursor: col-resize;
 	overflow: visible;
-	z-index: 1;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 1.5rem;
+	height: 2rem;
+	z-index: 10;
+}
+
+.ui5-fcl-grip-icon {
 	color: var(--sapButton_TextColor);
-	padding-top: 0.3125rem;
-	padding-bottom: 0.3125rem;
 }
 
 .ui5-fcl-arrow {
@@ -101,8 +109,8 @@
 }
 
 /* Only apply shorter height when arrow is visible */
-.ui5-fcl-separator:hover .ui5-fcl-arrow + .ui5-fcl-grip::before  {
-	height: calc(40% - 1rem);
+.ui5-fcl-separator:hover .ui5-fcl-arrow + .ui5-fcl-grip::before {
+    height: calc(40% - 1rem);
 }
 
 [aria-hidden] ::slotted([slot="startColumn"]),