diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts
index 0af5c780cf14..5c863a0b918a 100644
--- a/packages/main/src/Button.ts
+++ b/packages/main/src/Button.ts
@@ -101,6 +101,11 @@ let activeButton: Button | null = null;
  * @native
  */
 @event("click")
+/**
+ * Fired whenever the active state of the component changes.
+ * @private
+ */
+@event("_active-state-change")
 class Button extends UI5Element implements IFormElement {
 	/**
 	 * Defines the component design.
@@ -337,7 +342,7 @@ class Button extends UI5Element implements IFormElement {
 
 		this._deactivate = () => {
 			if (activeButton) {
-				activeButton.active = false;
+				activeButton._setActiveState(false);
 			}
 		};
 
@@ -354,7 +359,7 @@ class Button extends UI5Element implements IFormElement {
 				return;
 			}
 
-			this.active = true;
+			this._setActiveState(true);
 		};
 
 		this._ontouchstart = {
@@ -407,7 +412,7 @@ class Button extends UI5Element implements IFormElement {
 		}
 
 		markEvent(e, "button");
-		this.active = true;
+		this._setActiveState(true);
 		activeButton = this; // eslint-disable-line
 	}
 
@@ -417,10 +422,12 @@ class Button extends UI5Element implements IFormElement {
 			e.stopPropagation();
 		}
 
-		this.active = false;
+		if (this.active) {
+			this._setActiveState(false);
+		}
 
 		if (activeButton) {
-			activeButton.active = false;
+			activeButton._setActiveState(false);
 		}
 	}
 
@@ -432,13 +439,15 @@ class Button extends UI5Element implements IFormElement {
 		markEvent(e, "button");
 
 		if (isSpace(e) || isEnter(e)) {
-			this.active = true;
+			this._setActiveState(true);
 		}
 	}
 
 	_onkeyup(e: KeyboardEvent) {
 		if (isSpace(e) || isEnter(e)) {
-			this.active = false;
+			if (this.active) {
+				this._setActiveState(false);
+			}
 		}
 	}
 
@@ -446,7 +455,11 @@ class Button extends UI5Element implements IFormElement {
 		if (this.nonInteractive) {
 			return;
 		}
-		this.active = false;
+
+		if (this.active) {
+			this._setActiveState(false);
+		}
+
 		if (isDesktop()) {
 			this.focused = false;
 		}
@@ -463,6 +476,16 @@ class Button extends UI5Element implements IFormElement {
 		}
 	}
 
+	_setActiveState(active: boolean) {
+		const eventPrevented = !this.fireEvent("_active-state-change", null, true);
+
+		if (eventPrevented) {
+			return;
+		}
+
+		this.active = active;
+	}
+
 	get hasButtonType() {
 		return this.design !== ButtonDesign.Default && this.design !== ButtonDesign.Transparent;
 	}
diff --git a/packages/main/src/SplitButton.hbs b/packages/main/src/SplitButton.hbs
index bd8504e7ffa1..fdda448627c9 100644
--- a/packages/main/src/SplitButton.hbs
+++ b/packages/main/src/SplitButton.hbs
@@ -17,11 +17,11 @@
 		tabindex="-1"
 		?disabled="{{disabled}}"
 		?active="{{_textButtonActive}}"
-		@click="{{_fireClick}}"
+		@click="{{_handleMouseClick}}"
 		@touchstart={{_textButtonPress}}
 		@mousedown={{_textButtonPress}}
 		@mouseup={{_textButtonRelease}}
-		@focusin={{_setTabIndexValue}}
+		@focusin={{_textButtonFocusIn}}
 		@focusout={{_onFocusOut}}
 	>
 		{{#if isTextButton}}
@@ -39,12 +39,14 @@
 			icon="slim-arrow-down"
 			tabindex="-1"
 			?disabled="{{disabled}}"
-			?active="{{_arrowButtonActive}}"
+			?active="{{effectiveActiveArrowButton}}"
 			aria-expanded="{{accessibilityInfo.ariaExpanded}}"
 			aria-haspopup="{{accessibilityInfo.ariaHaspopup}}"
-			@click="{{_fireArrowClick}}"
+			@click="{{_handleArrowButtonAction}}"
+			@mousedown={{_arrowButtonPress}}
+			@mouseup={{_arrowButtonRelease}}
 			@focusin={{_setTabIndexValue}}
-			@focusout={{_onFocusOut}}
+			@ui5-_active-state-change={{_onArrowButtonActiveStateChange}}
 		>
 		</ui5-button>
 	</div>
diff --git a/packages/main/src/SplitButton.ts b/packages/main/src/SplitButton.ts
index 4d2e89622258..d7f6594b7748 100644
--- a/packages/main/src/SplitButton.ts
+++ b/packages/main/src/SplitButton.ts
@@ -13,6 +13,8 @@ import {
 	isUpAlt,
 	isF4,
 	isShift,
+	isTabNext,
+	isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -132,6 +134,18 @@ class SplitButton extends UI5Element {
 	@property()
 	activeIcon!: string;
 
+	/**
+	 * Defines whether the arrow button should have the active state styles or not.
+	 *
+	 * @type {boolean}
+	 * @name sap.ui.webc.main.SplitButton.prototype.activeArrowButton
+	 * @defaultvalue false
+	 * @public
+	 * @since 1.20.0
+	 */
+	@property({ type: Boolean })
+	activeArrowButton!: boolean;
+
 	/**
 	 * Defines the component design.
 	 *
@@ -231,13 +245,14 @@ class SplitButton extends UI5Element {
 	_textButtonIcon!: string;
 
 	/**
-	 * Defines the active state of the arrow button
+	 * Defines the state of the internal Button used for the Arrow button of the SplitButton.
+	 *
 	 * @type {boolean}
 	 * @defaultvalue false
 	 * @private
 	 */
 	@property({ type: Boolean, noAttribute: true })
-	_arrowButtonActive!: boolean;
+	_activeArrowButton!: boolean;
 
 	/**
 	 * Defines the text of the component.
@@ -253,6 +268,8 @@ class SplitButton extends UI5Element {
 	text!: Array<Node>;
 
 	_textButtonPress: { handleEvent: () => void, passive: boolean };
+	_isDefaultActionPressed = false;
+	_isKeyDownOperation = false;
 
 	static i18nBundle: I18nBundle;
 
@@ -266,7 +283,7 @@ class SplitButton extends UI5Element {
 		const handleTouchStartEvent = () => {
 			this._textButtonActive = true;
 			this.focused = false;
-			this._setTabIndexValue();
+			this._tabIndex = "-1";
 		};
 
 		this._textButtonPress = {
@@ -275,6 +292,18 @@ class SplitButton extends UI5Element {
 		};
 	}
 
+	/**
+	 * Function that makes sure the focus is properly managed.
+	 * @private
+	 */
+	_manageFocus(button?: Button | SplitButton) {
+		const buttons: Array<Button | SplitButton> = [this.textButton!, this.arrowButton!, this];
+
+		buttons.forEach(btn => {
+			btn.focused = btn === button;
+		});
+	}
+
 	onBeforeRendering() {
 		this._textButtonIcon = this.textButton && this.activeIcon !== "" && (this._textButtonActive) && !this._shiftOrEscapePressed ? this.activeIcon : this.icon;
 		if (this.disabled) {
@@ -282,13 +311,21 @@ class SplitButton extends UI5Element {
 		}
 	}
 
+	_handleMouseClick(e: MouseEvent) {
+		const target = e.target as Button;
+
+		this._manageFocus(target);
+		this._fireClick(e);
+	}
+
 	_onFocusOut(e: FocusEvent) {
 		if (this.disabled || getEventMark(e)) {
 			return;
 		}
+
 		this._shiftOrEscapePressed = false;
-		this.focused = false;
 		this._setTabIndexValue();
+		this._manageFocus();
 	}
 
 	_onFocusIn(e: FocusEvent) {
@@ -296,45 +333,62 @@ class SplitButton extends UI5Element {
 			return;
 		}
 		this._shiftOrEscapePressed = false;
-		this.focused = true;
+		this._manageFocus(this);
+	}
+
+	_textButtonFocusIn(e?: FocusEvent) {
+		e?.stopPropagation();
+		this._manageFocus(this.textButton!);
+
+		this._setTabIndexValue();
 	}
 
 	_onKeyDown(e: KeyboardEvent) {
-		if (isDown(e) || isUp(e) || isDownAlt(e) || isUpAlt(e) || isF4(e)) {
-			e.preventDefault();
-			this._arrowButtonActive = true;
-			this._fireArrowClick();
-		} else if (isSpace(e) || isEnter(e)) {
-			e.preventDefault();
-			this._textButtonActive = true;
-			if (isEnter(e)) {
-				this._fireClick();
-			} else {
-				this._spacePressed = true;
-			}
+		this._isKeyDownOperation = true;
+		if (this._isArrowKeyAction(e)) {
+			this._handleArrowButtonAction(e);
+			this._activeArrowButton = true;
+		} else if (this._isDefaultAction(e)) {
+			this._handleDefaultAction(e);
+			this._isDefaultActionPressed = true;
+		}
+
+		if (this._spacePressed && this._isShiftOrEscape(e)) {
+			this._handleShiftOrEscapePressed();
 		}
-		if (this._spacePressed && (isEscape(e) || isShift(e))) {
-			this._shiftOrEscapePressed = true;
+
+		// Handles button freeze issue when pressing Enter/Space and navigating with Tab/Shift+Tab simultaneously.
+		if (this._isDefaultActionPressed && (isTabNext(e) || isTabPrevious(e))) {
+			this._activeArrowButton = false;
 			this._textButtonActive = false;
 		}
 
-		this._setTabIndexValue();
+		this._tabIndex = "-1";
 	}
 
 	_onKeyUp(e: KeyboardEvent) {
-		if (isDown(e) || isUp(e) || isDownAlt(e) || isUpAlt(e) || isF4(e)) {
-			this._arrowButtonActive = false;
-		} else if (isSpace(e) || isEnter(e)) {
+		this._isKeyDownOperation = false;
+		if (this._isArrowKeyAction(e)) {
+			e.preventDefault();
+			this._activeArrowButton = false;
+			this._textButtonActive = false;
+		} else if (this._isDefaultAction(e)) {
+			this._isDefaultActionPressed = false;
 			this._textButtonActive = false;
 			if (isSpace(e)) {
 				e.preventDefault();
 				e.stopPropagation();
 				this._fireClick();
 				this._spacePressed = false;
+				this._textButtonActive = false;
 			}
 		}
 
-		this._setTabIndexValue();
+		if (this._isShiftOrEscape(e)) {
+			this._handleShiftOrEscapePressed();
+		}
+
+		this._tabIndex = "-1";
 	}
 
 	_fireClick(e?: Event) {
@@ -347,22 +401,124 @@ class SplitButton extends UI5Element {
 
 	_fireArrowClick(e?: Event) {
 		e?.stopPropagation();
+
 		this.fireEvent("arrow-click");
 	}
 
 	_textButtonRelease() {
 		this._textButtonActive = false;
 		this._textButtonIcon = this.textButton && this.activeIcon !== "" && (this._textButtonActive) && !this._shiftOrEscapePressed ? this.activeIcon : this.icon;
-		this._setTabIndexValue();
+		this._tabIndex = "-1";
+	}
+
+	_arrowButtonPress(e: MouseEvent) {
+		e.preventDefault();
+		this.arrowButton!.focus();
+
+		this._tabIndex = "-1";
+	}
+
+	_arrowButtonRelease(e: MouseEvent) {
+		e.preventDefault();
+
+		this._tabIndex = "-1";
 	}
 
 	_setTabIndexValue() {
-		const textButton = this.textButton,
-			arrowButton = this.arrowButton,
-			buttonsAction = (textButton && (textButton.focused || textButton.active))
-						 || (arrowButton && (arrowButton.focused || arrowButton.active));
+		this._tabIndex = this.disabled ? "-1" : "0";
+
+		if (this._tabIndex === "-1" && (this.textButton?.focused || this.arrowButton?.focused)) {
+			this._tabIndex = "0";
+		}
+	}
+
+	_onArrowButtonActiveStateChange(e: CustomEvent) {
+		if (this.activeArrowButton) {
+			e.preventDefault();
+		}
+	}
+
+	/**
+	 * Checks if the pressed key is an arrow key.
+	 *
+	 * @param {KeyboardEvent} e - keyboard event
+	 * @returns {boolean}
+	 * @private
+	 */
+	_isArrowKeyAction(e: KeyboardEvent): boolean {
+		return isDown(e) || isUp(e) || isDownAlt(e) || isUpAlt(e) || isF4(e);
+	}
+
+	/**
+	 * Checks if the pressed key is a default action key (Space or Enter).
+	 *
+	 * @param {KeyboardEvent} e - keyboard event
+	 * @returns {boolean}
+	 * @private
+	 */
+	_isDefaultAction(e: KeyboardEvent): boolean {
+		return isSpace(e) || isEnter(e);
+	}
+
+	/**
+	 * Checks if the pressed key is an escape key or shift key.
+	 *
+	 * @param {KeyboardEvent} e - keyboard event
+	 * @returns {boolean}
+	 * @private
+	 */
+	_isShiftOrEscape(e: KeyboardEvent): boolean {
+		return isEscape(e) || isShift(e);
+	}
+
+	/**
+	 * Handles the click event and the focus on the arrow button.
+	 * @param {KeyboardEvent} e - keyboard event
+	 * @private
+	 */
+	_handleArrowButtonAction(e: KeyboardEvent | MouseEvent) {
+		e.preventDefault();
+
+		this._fireArrowClick(e);
+
+		if (isSpace((e as KeyboardEvent))) {
+			this._spacePressed = true;
+		}
+	}
+
+	/**
+	 * Handles the default action and the active state of the respective button.
+	 * @param {KeyboardEvent} e - keyboard event
+	 * @private
+	 */
+	_handleDefaultAction(e: KeyboardEvent) {
+		e.preventDefault();
+		const wasSpacePressed = isSpace(e);
+
+		if (this.focused || this.textButton?.focused) {
+			this._textButtonActive = true;
+			this._fireClick();
+			if (wasSpacePressed) {
+				this._spacePressed = true;
+			}
+		} else if (this.arrowButton && this.arrowButton.focused) {
+			this._activeArrowButton = true;
+			this._fireArrowClick();
+			if (wasSpacePressed) {
+				this._spacePressed = true;
+				this._textButtonActive = false;
+			}
+		}
+	}
+
+	_handleShiftOrEscapePressed() {
+		this._shiftOrEscapePressed = true;
+		this._textButtonActive = false;
+		this._isKeyDownOperation = false;
+	}
 
-		this._tabIndex = this.disabled || buttonsAction ? "-1" : "0";
+	get effectiveActiveArrowButton() {
+		return this.activeArrowButton || this._activeArrowButton;
 	}
 
 	get textButtonAccText() {
diff --git a/packages/main/src/themes/SplitButton.css b/packages/main/src/themes/SplitButton.css
index 19136bcf2b29..6062ec00e7d6 100644
--- a/packages/main/src/themes/SplitButton.css
+++ b/packages/main/src/themes/SplitButton.css
@@ -9,6 +9,43 @@
 	box-shadow: var(--_ui5_split_button_host_default_box_shadow);
 }
 
+:host([active-arrow-button][design="Negative"]) .ui5-split-arrow-button,
+:host([design="Negative"]) .ui5-split-arrow-button[active] {
+	background-color: var(--sapButton_Reject_Selected_Background);
+	border: 0.0625rem solid var(--sapButton_Reject_Active_BorderColor);
+	color: var(--sapButton_Reject_Active_TextColor);
+}
+
+:host([active-arrow-button][design="Positive"]) .ui5-split-arrow-button,
+:host([design="Positive"]) .ui5-split-arrow-button[active] {
+	background-color: var(--sapButton_Accept_Selected_Background);
+	border: 0.0625rem solid var(--sapButton_Accept_Active_BorderColor);
+	color: var(--sapButton_Accept_Active_TextColor);
+}
+
+:host([active-arrow-button][design="Attention"]) .ui5-split-arrow-button,
+:host([design="Attention"]) .ui5-split-arrow-button[active] {
+	background-color: var(--sapButton_Attention_Selected_Background);
+	border: 0.0625rem solid var(--sapButton_Attention_Active_BorderColor);
+	color: var(--sapButton_Attention_Active_TextColor);
+}
+
+:host([active-arrow-button][design="Emphasized"]) .ui5-split-arrow-button,
+:host([design="Emphasized"]) .ui5-split-arrow-button[active] {
+	background-color: var(--sapButton_Selected_Background);
+	border: 0.0625rem solid var(--sapButton_Emphasized_Active_BorderColor);
+}
+
+:host([active-arrow-button][design="Transparent"]) .ui5-split-arrow-button,
+:host([active-arrow-button]) .ui5-split-arrow-button,
+:host([design="Transparent"]) .ui5-split-arrow-button[active],
+:host([design="Default"]) .ui5-split-arrow-button[active],
+.ui5-split-arrow-button[active], .ui5-split-arrow-button[active]:hover {
+	background-color: var(--sapButton_Selected_Background);
+	border: 0.0625rem solid var(--sapButton_Lite_Active_BorderColor);
+	color: var(--sapButton_Active_TextColor);
+}
+
 :host([disabled]:not([hidden])) {
 	pointer-events: none;
 }
@@ -79,6 +116,12 @@
 	width: inherit;
 }
 
+.ui5-split-button-root:focus,
+.ui5-split-text-button:focus,
+.ui5-split-arrow-button:focus {
+	outline: 0;
+}
+
 .ui5-split-text-button {
 	border-top-right-radius: var(--_ui5_split_button_hover_border_radius);
 	border-bottom-right-radius: var(--_ui5_split_button_hover_border_radius);
@@ -135,33 +178,39 @@
 	border-left: var(--_ui5_split_text_button_transparent_hover_border_left);
 }
 
-.ui5-split-text-button[active] {
-	outline: 0;
-}
-
 .ui5-split-text-button[active][design="Emphasized"] {
 	background-color: var(--sapButton_Selected_Background);
 	color: var(--sapButton_Emphasized_Active_TextColor);
+	border-color: var(--sapButton_Emphasized_Active_BorderColor);
 }
 .ui5-split-text-button[active][design="Negative"] {
 	background-color: var(--sapButton_Reject_Selected_Background);
 	color: var(--sapButton_Reject_Active_TextColor);
+	border-color: var(--sapButton_Reject_Active_BorderColor);
 }
 .ui5-split-text-button[active][design="Positive"] {
 	background-color: var(--sapButton_Accept_Selected_Background);
 	color: var(--sapButton_Accept_Active_TextColor);
+	border-color: var(--sapButton_Accept_Active_BorderColor);
 }
 .ui5-split-text-button[active][design="Attention"] {
 	background-color: var(--sapButton_Attention_Selected_Background);
 	color: var(--sapButton_Attention_Active_TextColor);
+	border-color: var(--sapButton_Attention_Active_BorderColor);
 }
 .ui5-split-text-button[active][design="Default"] {
 	background-color: var(--sapButton_Active_Background);
 	color: var(--sapButton_Active_TextColor);
+	border-color: var(--sapButton_Active_BorderColor);
 }
 .ui5-split-text-button[active][design="Transparent"] {
 	background-color: var(--sapButton_Active_Background);
 	color: var(--sapButton_Active_TextColor);
+	border-color: var(--sapButton_Active_BorderColor);
+}
+
+.ui5-split-text-button[active] {
+	outline: 0;
 }
 
 .ui5-split-arrow-button-wrapper {
@@ -317,7 +366,7 @@
 }
 
 .ui5-split-arrow-button[design="Attention"]:before {
-	border-color: var(--_ui5_split_button_attention_separator_color);
+	border-color: var(--_ui5_split_button_attention_separator_color_default);
 }
 
 .ui5-split-text-button[dir="rtl"] {
@@ -366,32 +415,53 @@
 	border-bottom-right-radius: var(--_ui5_split_button_inner_focused_border_radius_outer);
 }
 
+.ui5-split-text-button[active][design="Emphasized"] {
+	color: var(--sapButton_Emphasized_Active_TextColor);
+	background-color: var(--sapButton_Selected_Background);
+}
+
+:host([design="Emphasized"][active-arrow-button]) .ui5-split-arrow-button,
 .ui5-split-arrow-button[active][design="Emphasized"] {
 	background-color: var(--sapButton_Selected_Background);
 	color: var(--sapButton_Emphasized_Active_TextColor);
+	border: var(--_ui5_split_arrow_button_emphasized_hover_border);
 }
 
-.ui5-split-arrow-button[active][design="Negative"] {
-	background-color: var(--sapButton_Reject_Selected_Background);
-	color: var(--sapButton_Reject_Active_TextColor);
+:host([design="Transparent"][active-arrow-button]:not([hidden]):not([disabled]):hover) .ui5-split-arrow-button {
+	color: var(--sapButton_Active_TextColor);
 }
 
-.ui5-split-arrow-button[active][design="Positive"] {
-	background-color: var(--sapButton_Accept_Selected_Background);
-	color: var(--sapButton_Accept_Active_TextColor);
+
+:host([active-arrow-button]) .ui5-split-arrow-button {
+	border: 0.0625rem solid var(--sapButton_Lite_Active_BorderColor);
 }
 
-.ui5-split-arrow-button[active][design="Attention"] {
-	background-color: var(--sapButton_Attention_Selected_Background);
-	color: var(--sapButton_Attention_Active_TextColor);
+:host([active-arrow-button]) .ui5-split-arrow-button::before,
+.ui5-split-arrow-button[active]::before,
+.ui5-split-text-button[active] + .ui5-split-arrow-button-wrapper > .ui5-split-arrow-button::before {
+	border-color: transparent;
 }
 
-.ui5-split-arrow-button[active][design="Default"] {
-	background-color: var(--sapButton_Active_Background);
-	color: var(--sapButton_Active_TextColor);
+:host([design="Emphasized"][active-arrow-button]) .ui5-split-arrow-button::before,
+:host([design="Emphasized"]) .ui5-split-arrow-button[active]::before,
+:host([design="Emphasized"]) .ui5-split-text-button[active] + .ui5-split-arrow-button-wrapper > .ui5-split-arrow-button::before {
+	border-color: var(--_ui5_split_button_emphasized_separator_color);
 }
 
-.ui5-split-arrow-button[active][design="Transparent"] {
-	background-color: var(--sapButton_Active_Background);
-	color: var(--sapButton_Active_TextColor);
+:host([design="Positive"][active-arrow-button]) .ui5-split-arrow-button::before,
+:host([design="Positive"]) .ui5-split-arrow-button[active]::before,
+:host([design="Positive"]) .ui5-split-text-button[active] + .ui5-split-arrow-button-wrapper > .ui5-split-arrow-button::before {
+	border-color: var(--_ui5_split_button_positive_separator_color);
+}
+
+:host([design="Negative"][active-arrow-button]) .ui5-split-arrow-button::before,
+:host([design="Negative"]) .ui5-split-arrow-button[active]::before,
+:host([design="Negative"]) .ui5-split-text-button[active] + .ui5-split-arrow-button-wrapper > .ui5-split-arrow-button::before {
+	border-color: var(--_ui5_split_button_negative_separator_color);
+}
+
+:host([design="Attention"][active-arrow-button]) .ui5-split-arrow-button::before,
+:host([design="Attention"]) .ui5-split-arrow-button[active]::before,
+:host([design="Attention"]) .ui5-split-text-button[active] + .ui5-split-arrow-button-wrapper > .ui5-split-arrow-button::before {
+	border-color: var(--_ui5_split_button_attention_separator_color);
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/base/SplitButton-parameters.css b/packages/main/src/themes/base/SplitButton-parameters.css
index 97651414dfc5..17a2f5c11ab4 100644
--- a/packages/main/src/themes/base/SplitButton-parameters.css
+++ b/packages/main/src/themes/base/SplitButton-parameters.css
@@ -3,7 +3,6 @@
 	--_ui5_split_button_focused_border_radius: 0.125rem;
 	--_ui5_split_button_hover_border_radius: 0;
 	--_ui5_split_button_hover_border_radius: 0;
-	--_ui5_split_button_attention_separator_color: var(--sapButton_Attention_BorderColor);
 	--_ui5_split_button_middle_separator_width: 0;
 	--_ui5_split_button_middle_separator_left: 0;
 	--_ui5_split_button_middle_separator_hover_display: block;
@@ -16,6 +15,14 @@
 	--_ui5_split_button_inner_focused_border_radius_outer: 0.25rem;
 	--_ui5_split_button_inner_focused_border_radius_inner: 0;
 	
+	/* Separator colors */
+	--_ui5_split_button_emphasized_separator_color: var(--sapButton_Emphasized_TextColor);
+	--_ui5_split_button_positive_separator_color: var(--sapButton_Accept_BorderColor);
+	--_ui5_split_button_negative_separator_color: var(--sapButton_Reject_BorderColor);
+	--_ui5_split_button_attention_separator_color: var(--sapButton_Attention_BorderColor);
+	--_ui5_split_button_attention_separator_color_default: var(--sapButton_Attention_BorderColor);
+
+
 	--_ui5_split_button_host_default_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor);
 	--_ui5_split_button_host_attention_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_Attention_BorderColor);
 	--_ui5_split_button_host_emphasized_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_Emphasized_BorderColor);
diff --git a/packages/main/src/themes/sap_horizon/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon/SplitButton-parameters.css
index 71336fa0e150..4596e032b102 100644
--- a/packages/main/src/themes/sap_horizon/SplitButton-parameters.css
+++ b/packages/main/src/themes/sap_horizon/SplitButton-parameters.css
@@ -4,7 +4,6 @@
 	--_ui5_split_button_focused_border: 0.125rem solid var(--sapContent_FocusColor);
 	--_ui5_split_button_focused_border_radius: 0.375rem;
 	--_ui5_split_button_hover_border_radius: var(--_ui5_button_border_radius);
-	--_ui5_split_button_attention_separator_color: var(--sapButton_Attention_TextColor);
 	--_ui5_split_button_middle_separator_width: 0;
 	--_ui5_split_button_middle_separator_left: -0.0625rem;
 	--_ui5_split_button_middle_separator_hover_display: none;
@@ -16,6 +15,13 @@
 	--_ui5_split_button_inner_focused_border_radius_outer: 0.375rem;
 	--_ui5_split_button_inner_focused_border_radius_inner: 0.375rem;
 
+	/* Separator colors */
+	--_ui5_split_button_emphasized_separator_color: transparent;
+	--_ui5_split_button_positive_separator_color: transparent;
+	--_ui5_split_button_negative_separator_color: transparent;
+	--_ui5_split_button_attention_separator_color: transparent;
+	--_ui5_split_button_attention_separator_color_default: var(--sapButton_Attention_TextColor);
+
 	--_ui5_split_text_button_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
 	--_ui5_split_text_button_emphasized_hover_border_right: none;
 	--_ui5_split_text_button_positive_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
diff --git a/packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css
index 71336fa0e150..4596e032b102 100644
--- a/packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css
+++ b/packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css
@@ -4,7 +4,6 @@
 	--_ui5_split_button_focused_border: 0.125rem solid var(--sapContent_FocusColor);
 	--_ui5_split_button_focused_border_radius: 0.375rem;
 	--_ui5_split_button_hover_border_radius: var(--_ui5_button_border_radius);
-	--_ui5_split_button_attention_separator_color: var(--sapButton_Attention_TextColor);
 	--_ui5_split_button_middle_separator_width: 0;
 	--_ui5_split_button_middle_separator_left: -0.0625rem;
 	--_ui5_split_button_middle_separator_hover_display: none;
@@ -16,6 +15,13 @@
 	--_ui5_split_button_inner_focused_border_radius_outer: 0.375rem;
 	--_ui5_split_button_inner_focused_border_radius_inner: 0.375rem;
 
+	/* Separator colors */
+	--_ui5_split_button_emphasized_separator_color: transparent;
+	--_ui5_split_button_positive_separator_color: transparent;
+	--_ui5_split_button_negative_separator_color: transparent;
+	--_ui5_split_button_attention_separator_color: transparent;
+	--_ui5_split_button_attention_separator_color_default: var(--sapButton_Attention_TextColor);
+
 	--_ui5_split_text_button_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
 	--_ui5_split_text_button_emphasized_hover_border_right: none;
 	--_ui5_split_text_button_positive_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
diff --git a/packages/main/src/themes/sap_horizon_dark_exp/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/SplitButton-parameters.css
index 71336fa0e150..4596e032b102 100644
--- a/packages/main/src/themes/sap_horizon_dark_exp/SplitButton-parameters.css
+++ b/packages/main/src/themes/sap_horizon_dark_exp/SplitButton-parameters.css
@@ -4,7 +4,6 @@
 	--_ui5_split_button_focused_border: 0.125rem solid var(--sapContent_FocusColor);
 	--_ui5_split_button_focused_border_radius: 0.375rem;
 	--_ui5_split_button_hover_border_radius: var(--_ui5_button_border_radius);
-	--_ui5_split_button_attention_separator_color: var(--sapButton_Attention_TextColor);
 	--_ui5_split_button_middle_separator_width: 0;
 	--_ui5_split_button_middle_separator_left: -0.0625rem;
 	--_ui5_split_button_middle_separator_hover_display: none;
@@ -16,6 +15,13 @@
 	--_ui5_split_button_inner_focused_border_radius_outer: 0.375rem;
 	--_ui5_split_button_inner_focused_border_radius_inner: 0.375rem;
 
+	/* Separator colors */
+	--_ui5_split_button_emphasized_separator_color: transparent;
+	--_ui5_split_button_positive_separator_color: transparent;
+	--_ui5_split_button_negative_separator_color: transparent;
+	--_ui5_split_button_attention_separator_color: transparent;
+	--_ui5_split_button_attention_separator_color_default: var(--sapButton_Attention_TextColor);
+
 	--_ui5_split_text_button_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
 	--_ui5_split_text_button_emphasized_hover_border_right: none;
 	--_ui5_split_text_button_positive_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
diff --git a/packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css
index 71336fa0e150..4596e032b102 100644
--- a/packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css
+++ b/packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css
@@ -4,7 +4,6 @@
 	--_ui5_split_button_focused_border: 0.125rem solid var(--sapContent_FocusColor);
 	--_ui5_split_button_focused_border_radius: 0.375rem;
 	--_ui5_split_button_hover_border_radius: var(--_ui5_button_border_radius);
-	--_ui5_split_button_attention_separator_color: var(--sapButton_Attention_TextColor);
 	--_ui5_split_button_middle_separator_width: 0;
 	--_ui5_split_button_middle_separator_left: -0.0625rem;
 	--_ui5_split_button_middle_separator_hover_display: none;
@@ -16,6 +15,13 @@
 	--_ui5_split_button_inner_focused_border_radius_outer: 0.375rem;
 	--_ui5_split_button_inner_focused_border_radius_inner: 0.375rem;
 
+	/* Separator colors */
+	--_ui5_split_button_emphasized_separator_color: transparent;
+	--_ui5_split_button_positive_separator_color: transparent;
+	--_ui5_split_button_negative_separator_color: transparent;
+	--_ui5_split_button_attention_separator_color: transparent;
+	--_ui5_split_button_attention_separator_color_default: var(--sapButton_Attention_TextColor);
+
 	--_ui5_split_text_button_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
 	--_ui5_split_text_button_emphasized_hover_border_right: none;
 	--_ui5_split_text_button_positive_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor);
diff --git a/packages/main/test/pages/SplitButton.html b/packages/main/test/pages/SplitButton.html
index 7871e5f1933b..2a10f8ab9396 100644
--- a/packages/main/test/pages/SplitButton.html
+++ b/packages/main/test/pages/SplitButton.html
@@ -71,10 +71,15 @@ <h3>Test textContent</h3>
 	<ui5-split-button id="emptySpBtn" design="Default"></ui5-split-button>
 	<ui5-split-button id="defaultSpBtn" design="Default">Default</ui5-split-button>
 
-	<ui5-split-button id="splitBtnWithMenuDefaultActionDefaultAction" design="Default">openMenu</ui5-split-button>
+	<ui5-split-button id="splitBtnWithMenuDefaultActionDefaultAction">openMenu</ui5-split-button>
 	<ui5-menu id="menu">
 		<ui5-menu-item text="New File" accessible-name="Opens a file explorer" additional-text="Ctrl+Alt+Shift+N" icon="add-document"></ui5-menu-item>
 		<ui5-menu-item text="New Folder with very long title for a menu item" additional-text="Ctrl+F" icon="add-folder" disabled></ui5-menu-item>
+		<ui5-menu-item text="Open" icon="open-folder" starts-section="">
+			<ui5-menu-item text="Open Locally" icon="open-folder"></ui5-menu-item>
+			<ui5-menu-item text="Open from Cloud"></ui5-menu-item>
+		</ui5-menu-item>
+		<ui5-menu-item text="Save" icon="save"></ui5-menu-item>
 	</ui5-menu>
 
 	<ui5-split-button id="splitBtnWithMenuWithAssociatedLastAction" design="Default">openMenu</ui5-split-button>
@@ -85,6 +90,23 @@ <h3>Test textContent</h3>
 	</ui5-menu>
 </body>
 <script>
+const splitBtn = document.getElementById("splitBtnWithMenuDefaultActionDefaultAction");
+const menu = document.getElementById("menu");
+
+splitBtn.addEventListener("ui5-arrow-click", function() {
+	if (menu.open) {
+		menu.close();
+		splitBtn.activeArrowButton = false;
+	} else {
+		menu.showAt(splitBtn);
+		splitBtn.activeArrowButton = true;
+	}
+});
+
+menu.addEventListener("after-close", function() {
+	splitBtn.activeArrowButton = false;
+});
+
 	var displayEvent = document.getElementById("displayEvent"),
 		displayElement = document.getElementById("displayElement"),
 		directionSwitch =  document.getElementById("direction");
@@ -94,9 +116,6 @@ <h3>Test textContent</h3>
 		item.addEventListener("ui5-arrow-click", displayEventDetails);
 	});
 
-	splitBtnWithMenuDefaultActionDefaultAction.addEventListener("ui5-arrow-click", function() {
-		menu.open ? menu.close() : menu.showAt(splitBtnWithMenuDefaultActionDefaultAction);
-	})
 
 	splitBtnWithMenuWithAssociatedLastAction.addEventListener("ui5-arrow-click", function() {
 		menuInSplitBtnAssociatedLastAction.open ? 
diff --git a/packages/playground/_stories/main/SplitButton/SplitButton.stories.ts b/packages/playground/_stories/main/SplitButton/SplitButton.stories.ts
index 3939f737629d..e383cf93047e 100644
--- a/packages/playground/_stories/main/SplitButton/SplitButton.stories.ts
+++ b/packages/playground/_stories/main/SplitButton/SplitButton.stories.ts
@@ -55,14 +55,34 @@ OpeningMenu.decorators = [
 		</ui5-menu>
 	${story()}
 	<script>
-		var splitBtnWithMenuDefaultAction = document.querySelector("ui5-split-button");
-		var menuInSplitBtn = document.getElementById("menuInSplitBtnDefaultAction");
-		splitBtnWithMenuDefaultAction.addEventListener("ui5-arrow-click", function () {
-			menuInSplitBtn.open ? menuInSplitBtn.close() : menuInSplitBtn.showAt(splitBtnWithMenuDefaultAction);
-		});
+	var splitBtn = document.querySelector("ui5-split-button");
+	var menu = document.getElementById("menuInSplitBtnDefaultAction");
+	
+	splitBtn.addEventListener("ui5-arrow-click", function() {
+		if (menu.open) {
+			menu.close();
+			splitBtn.activeArrowButton = false;
+		} else {
+			menu.showAt(splitBtn);
+			splitBtn.activeArrowButton = true;
+		}
+	});
+	
+	menu.addEventListener("after-close", function() {
+		splitBtn.activeArrowButton = false;
+	});
 	</script>`;}
 ];
 
+OpeningMenu.parameters = {
+	docs: {
+		story: {
+			inline: false,
+			iframeHeight: "150px",
+		},
+	}
+};
+
 export const DifferentDesigns: StoryFn = () => html`
 	<ui5-split-button design="${ButtonDesign.Emphasized}"> Emphasized </ui5-split-button>
 	<ui5-split-button design="${ButtonDesign.Attention}"> Attention </ui5-split-button>