diff --git a/packages/main/src/Tab.js b/packages/main/src/Tab.js
index 10cefe13e1d2..dab979e7c2c0 100644
--- a/packages/main/src/Tab.js
+++ b/packages/main/src/Tab.js
@@ -1,11 +1,20 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import SemanticColor from "./types/SemanticColor.js";
+import TabLayout from "./types/TabLayout.js";
+import TabContainer from "./TabContainer.js";
 import Icon from "./Icon.js";
+import CustomListItem from "./CustomListItem.js";
+
+// Templates
 import TabTemplate from "./generated/templates/TabTemplate.lit.js";
+import TabInStripTemplate from "./generated/templates/TabInStripTemplate.lit.js";
+import TabInOverflowTemplate from "./generated/templates/TabInOverflowTemplate.lit.js";
 
 // Styles
 import css from "./generated/themes/Tab.css.js";
+import stripCss from "./generated/themes/TabInStrip.css.js";
+import overflowCss from "./generated/themes/TabInOverflow.css.js";
 
 /**
  * @public
@@ -140,18 +149,37 @@ class Tab extends UI5Element {
 		return TabTemplate;
 	}
 
+	static get stripTemplate() {
+		return TabInStripTemplate;
+	}
+
+	static get overflowTemplate() {
+		return TabInOverflowTemplate;
+	}
+
 	static get styles() {
 		return css;
 	}
 
 	static async onDefine() {
-		await Icon.define();
+		await Promise.all([
+			Icon.define(),
+			CustomListItem.define(),
+		]);
 	}
 
 	get isSeparator() {
 		return false;
 	}
 
+	get stripPresentation() {
+		return this.constructor.stripTemplate(this);
+	}
+
+	get overflowPresentation() {
+		return this.constructor.overflowTemplate(this);
+	}
+
 	getFocusDomRef() {
 		let focusedDomRef = super.getFocusDomRef();
 
@@ -161,8 +189,115 @@ class Tab extends UI5Element {
 
 		return focusedDomRef;
 	}
+
+	get isMixedModeTab() {
+		return !this.icon && this._mixedMode;
+	}
+
+	get isTextOnlyTab() {
+		return !this.icon && !this._mixedMode;
+	}
+
+	get isIconTab() {
+		return !!this.icon;
+	}
+
+	get effectiveDisabled() {
+		return this.disabled || undefined;
+	}
+
+	get effectiveSelected() {
+		return this.selected || false;
+	}
+
+	get effectiveHidden() {
+		return !this.selected;
+	}
+
+	get ariaLabelledBy() {
+		const labels = [];
+
+		if (this.text) {
+			labels.push(`${this._id}-text`);
+		}
+
+		if (this.additionalText) {
+			labels.push(`${this._id}-additionalText`);
+		}
+
+		if (this.icon) {
+			labels.push(`${this._id}-icon`);
+		}
+
+		return labels.join(" ");
+	}
+
+	get headerClasses() {
+		const classes = ["ui5-tab-strip-item"];
+
+		if (this.selected) {
+			classes.push("ui5-tab-strip-item--selected");
+		}
+
+		if (this.disabled) {
+			classes.push("ui5-tab-strip-item--disabled");
+		}
+
+		if (this.tabLayout === TabLayout.Inline) {
+			classes.push("ui5-tab-strip-item--inline");
+		}
+
+		if (!this.icon && !this._mixedMode) {
+			classes.push("ui5-tab-strip-item--textOnly");
+		}
+
+		if (this.icon) {
+			classes.push("ui5-tab-strip-item--withIcon");
+		}
+
+		if (!this.icon && this._mixedMode) {
+			classes.push("ui5-tab-strip-item--mixedMode");
+		}
+
+		if (this.semanticColor !== SemanticColor.Default) {
+			classes.push(`ui5-tab-strip-item--${this.semanticColor.toLowerCase()}`);
+		}
+
+		return classes.join(" ");
+	}
+
+	get headerSemanticIconClasses() {
+		const classes = ["ui5-tab-strip-item-semanticIcon"];
+
+		if (this.semanticColor !== SemanticColor.Default) {
+			classes.push(`ui5-tab-strip-item-semanticIcon--${this.semanticColor.toLowerCase()}`);
+		}
+
+		return classes.join(" ");
+	}
+
+	get overflowClasses() {
+		const classes = ["ui5-tab-overflow-item"];
+
+		if (this.semanticColor !== SemanticColor.Default) {
+			classes.push(`ui5-tab-overflow-item--${this.semanticColor.toLowerCase()}`);
+		}
+
+		if (this.disabled) {
+			classes.push("ui5-tab-overflow-item--disabled");
+		}
+
+		return classes.join(" ");
+	}
+
+	get overflowState() {
+		return this.disabled ? "Inactive" : "Active";
+	}
 }
 
 Tab.define();
 
+TabContainer.registerTabStyles(stripCss);
+TabContainer.registerStaticAreaTabStyles(overflowCss);
+
 export default Tab;
diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs
index e88f496f8abf..0149d2b18288 100644
--- a/packages/main/src/TabContainer.hbs
+++ b/packages/main/src/TabContainer.hbs
@@ -11,30 +11,16 @@
 
 		<!-- tab items -->
 		<div class="{{classes.headerScrollContainer}}" id="{{_id}}-headerScrollContainer">
-			<ul role="tablist" class="{{classes.headerList}}">
-				{{#each renderItems}}
+			<ul
+				role="tablist"
+				class="{{classes.headerList}}"
+				@click="{{_onHeaderClick}}"
+				@keydown="{{_onHeaderKeyDown}}"
+				@keyup="{{_onHeaderKeyUp}}"
+			>
+				{{#each items}}
 					{{#unless this.isSeparator}}
-						<li class="{{this.headerItemClasses}}"
-							id="{{this.item._id}}"
-							tabindex="{{this.item._tabIndex}}"
-							@click="{{../_onHeaderItemSelect}}"
-							@keydown="{{../	_onHeaderItemKeyDown}}"
-							@keyup="{{../_onHeaderItemKeyUp}}"
-							role="tab"
-							aria-posinset="{{this.position}}"
-							aria-setsize="{{../renderItems.length}}"
-							aria-controls="ui5-tc-contentItem-{{this.position}}"
-							aria-selected="{{this.selected}}"
-							?aria-disabled="{{this.disabled}}"
-							?disabled="{{this.disabled}}"
-							aria-labelledby="{{this.ariaLabelledBy}}"
-						>
-							{{#if this.isInline}}
-								{{> inlineTab}}
-							{{else}}
-								{{> standardTab}}
-							{{/if}}
-						</li>
+						{{this.stripPresentation}}
 					{{/unless}}
 					{{#if this.isSeparator}}
 						<li id="{{this._id}}" role="separator" class="{{../classes.separator}}"></li>
@@ -66,54 +52,12 @@
 
 {{#*inline "contentArea"}}
 	<div class="{{classes.content}}">
-		{{#each renderItems}}
+		{{#each items}}
 			{{#unless this.isSeparator}}
-				<div class="{{this.contentItemClasses}}" id="ui5-tc-contentItem-{{this.position}}" ?hidden="{{this.hidden}}" role="tabpanel" aria-labelledby="{{item._id}}">
-					<slot name="{{this.item._individualSlot}}"></slot>
+				<div class="ui5-tc__contentItem" id="ui5-tc-contentItem-{{this._position}}" ?hidden="{{this.effectiveHidden}}" role="tabpanel" aria-labelledby="{{this._id}}">
+					<slot name="{{this._individualSlot}}"></slot>
 				</div>
 			{{/unless}}
 		{{/each}}
 	</div>
 {{/inline}}
-
-{{#*inline "standardTab"}}
-	{{#if this.item.icon}}
-		<div id="{{this.item._id}}" class="ui5-tc-headerItemIcon-outer">
-			<ui5-icon name="{{this.item.icon}}" class="{{this.headerItemIconClasses}}"></ui5-icon>
-		</div>
-	{{/if}}
-
-	<div class="{{this.headerItemContentClasses}}">
-		{{#if this.item.additionalText}}
-			<span class="{{this.headerItemAdditionalTextClasses}}" id="{{this.item._id}}-additionalText">{{this.item.additionalText}}</span>
-		{{/if}}
-
-		{{#if this.item.text}}
-			<span class="{{this.headerItemTextClasses}}" id="{{this.item._id}}-text">
-				<span class="{{this.headerItemSemanticIconClasses}}"></span>
-				{{this.item.text}}
-			</span>
-		{{/if}}
-	</div>
-{{/inline}}
-
-{{#*inline "inlineTab"}}
-	{{#if this.item.icon}}
-		<div id="{{this.item._id}}" class="ui5-tc-headerItemIcon-outer">
-			<ui5-icon name="{{this.item.icon}}" class="{{this.headerItemIconClasses}}"></ui5-icon>
-		</div>
-	{{/if}}
-
-	<div class="{{this.headerItemContentClasses}}">
-		{{#if this.item.text}}
-			<span class="{{this.headerItemTextClasses}}" id="{{this.item._id}}-text">
-				<span class="{{this.headerItemSemanticIconClasses}}"></span>
-				{{this.item.text}}
-			</span>
-		{{/if}}
-
-		{{#if this.item.additionalText}}
-			<span class="{{this.headerItemAdditionalTextClasses}}" id="{{this.item._id}}-additionalText">{{this.item.additionalText}}</span>
-		{{/if}}
-	</div>
-{{/inline}}
diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js
index 02f814a776f2..54bd12c5652f 100644
--- a/packages/main/src/TabContainer.js
+++ b/packages/main/src/TabContainer.js
@@ -12,11 +12,9 @@ import "@ui5/webcomponents-icons/dist/icons/slim-arrow-left.js";
 import "@ui5/webcomponents-icons/dist/icons/slim-arrow-right.js";
 import { TABCONTAINER_PREVIOUS_ICON_ACC_NAME, TABCONTAINER_NEXT_ICON_ACC_NAME, TABCONTAINER_OVERFLOW_MENU_TITLE } from "./generated/i18n/i18n-defaults.js";
 import Button from "./Button.js";
-import CustomListItem from "./CustomListItem.js";
 import Icon from "./Icon.js";
 import List from "./List.js";
 import ResponsivePopover from "./ResponsivePopover.js";
-import SemanticColor from "./types/SemanticColor.js";
 import TabContainerTabsPlacement from "./types/TabContainerTabsPlacement.js";
 
 // Templates
@@ -25,12 +23,14 @@ import TabContainerPopoverTemplate from "./generated/templates/TabContainerPopov
 
 // Styles
 import tabContainerCss from "./generated/themes/TabContainer.css.js";
-import tabContainerPopoverCss from "./generated/themes/TabContainerPopup.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import TabLayout from "./types/TabLayout.js";
 
 const SCROLL_STEP = 128;
 
+const tabStyles = [];
+const staticAreaTabStyles = [];
+
 /**
  * @public
  */
@@ -151,10 +151,6 @@ const metadata = {
 			type: Boolean,
 			noAttribute: true,
 		},
-		_textOnly: {
-			type: Boolean,
-			noAttribute: true,
-		},
 	},
 	events: /** @lends  sap.ui.webcomponents.main.TabContainer.prototype */ {
 
@@ -212,11 +208,11 @@ class TabContainer extends UI5Element {
 	}
 
 	static get styles() {
-		return tabContainerCss;
+		return [...tabStyles, tabContainerCss];
 	}
 
 	static get staticAreaStyles() {
-		return [tabContainerPopoverCss, ResponsivePopoverCommonCss];
+		return [...staticAreaTabStyles, ResponsivePopoverCommonCss];
 	}
 
 	static get render() {
@@ -231,6 +227,14 @@ class TabContainer extends UI5Element {
 		return TabContainerPopoverTemplate;
 	}
 
+	static registerTabStyles(styles) {
+		tabStyles.push(styles);
+	}
+
+	static registerStaticAreaTabStyles(styles) {
+		staticAreaTabStyles.push(styles);
+	}
+
 	constructor() {
 		super();
 
@@ -247,52 +251,23 @@ class TabContainer extends UI5Element {
 	}
 
 	onBeforeRendering() {
+		// Set selected
 		const hasSelected = this.items.some(item => item.selected);
-		this._textOnly = this.items.every(item => !item.icon);
-
-		this.items.forEach(item => {
-			item._getTabContainerHeaderItemCallback = _ => {
-				return this.getDomRef().querySelector(`#${item._id}`);
-			};
-		});
 		if (this.items.length && !hasSelected) {
 			this.items[0].selected = true;
 		}
 
-		this.calculateRenderItems();
-	}
-
-	calculateRenderItems() {
-		this.renderItems = this.items.map((item, index) => {
-			const isSeparator = item.isSeparator;
-
-			if (isSeparator) {
-				return { isSeparator, _tabIndex: item._tabIndex, _id: item._id };
-			}
-
-			return {
-				item,
-				isInline: this.tabLayout === TabLayout.Inline,
-				isMixedModeTab: !item.icon && this.mixedMode,
-				isTextOnlyTab: !item.icon && !this.mixedMode,
-				isIconTab: item.icon,
-				position: index + 1,
-				disabled: item.disabled || undefined,
-				selected: item.selected || false,
-				hidden: !item.selected,
-				ariaLabelledBy: calculateAriaLabelledBy(item),
-				contentItemClasses: calculateContentItemClasses(item),
-				headerItemClasses: calculateHeaderItemClasses(item, this.mixedMode),
-				headerItemContentClasses: calculateHeaderItemContentClasses(item),
-				headerItemIconClasses: calculateHeaderItemIconClasses(item),
-				headerItemSemanticIconClasses: calculateHeaderItemSemanticIconClasses(item),
-				headerItemTextClasses: calculateHeaderItemTextClasses(item),
-				headerItemAdditionalTextClasses: calculateHeaderItemAdditionalTextClasses(item),
-				overflowItemClasses: calculateOverflowItemClasses(item),
-				overflowItemContentClasses: calculateOverflowItemContentClasses(item),
-				overflowItemState: calculateOverflowItemState(item),
+		// Set external properties to items
+		this.items.forEach((item, index) => {
+			item._isInline = this.tabLayout === TabLayout.Inline;
+			item._mixedMode = this.mixedMode;
+			item._posinset = index + 1;
+			item._setsize = this.items.length;
+			item._getTabContainerHeaderItemCallback = _ => {
+				return this.getDomRef().querySelector(`#${item._id}`);
 			};
-		}, this);
+			item._itemSelectCallback = this._onItemSelect.bind(this);
+		});
 	}
 
 	onAfterRendering() {
@@ -308,7 +283,19 @@ class TabContainer extends UI5Element {
 		ResizeHandler.deregister(this._getHeader(), this._handleHeaderResize);
 	}
 
-	_onHeaderItemKeyDown(event) {
+	_onHeaderClick(event) {
+		if (!tabIsClicked(event.target)) {
+			return;
+		}
+
+		this._onHeaderItemSelect(event);
+	}
+
+	_onHeaderKeyDown(event) {
+		if (!tabIsClicked(event.target)) {
+			return;
+		}
+
 		if (isEnter(event)) {
 			this._onHeaderItemSelect(event);
 		}
@@ -319,7 +306,11 @@ class TabContainer extends UI5Element {
 		}
 	}
 
-	_onHeaderItemKeyUp(event) {
+	_onHeaderKeyUp(event) {
+		if (!tabIsClicked(event.target)) {
+			return;
+		}
+
 		if (isSpace(event)) {
 			this._onHeaderItemSelect(event);
 		}
@@ -429,7 +420,7 @@ class TabContainer extends UI5Element {
 		return {
 			root: {
 				"ui5-tc-root": true,
-				"ui5-tc--textOnly": this._textOnly,
+				"ui5-tc--textOnly": this.textOnly,
 			},
 			header: {
 				"ui5-tc__header": true,
@@ -469,6 +460,10 @@ class TabContainer extends UI5Element {
 		return this.items.some(item => item.icon) && this.items.some(item => item.text);
 	}
 
+	get textOnly() {
+		return this.items.every(item => !item.icon);
+	}
+
 	get previousIconACCName() {
 		return this.i18nBundle.getText(TABCONTAINER_PREVIOUS_ICON_ACC_NAME);
 	}
@@ -496,7 +491,6 @@ class TabContainer extends UI5Element {
 	static async onDefine() {
 		await Promise.all([
 			Button.define(),
-			CustomListItem.define(),
 			Icon.define(),
 			List.define(),
 			ResponsivePopover.define(),
@@ -505,6 +499,10 @@ class TabContainer extends UI5Element {
 	}
 }
 
+const tabIsClicked = el => {
+	return el.localName === "li" && el.getAttribute("role") === "tab";
+};
+
 const findIndex = (arr, predicate) => {
 	for (let i = 0; i < arr.length; i++) {
 		const result = predicate(arr[i]);
@@ -517,124 +515,6 @@ const findIndex = (arr, predicate) => {
 	return -1;
 };
 
-/* CSS classes calculation helpers */
-
-const calculateAriaLabelledBy = item => {
-	const labels = [];
-
-	if (item.text) {
-		labels.push(`${item._id}-text`);
-	}
-
-	if (item.additionalText) {
-		labels.push(`${item._id}-additionalText`);
-	}
-
-	if (item.icon) {
-		labels.push(`${item._id}-icon`);
-	}
-
-	return labels.join(" ");
-};
-
-const calculateHeaderItemClasses = (item, mixedMode) => {
-	const classes = ["ui5-tc__headerItem"];
-
-	if (item.selected) {
-		classes.push("ui5-tc__headerItem--selected");
-	}
-
-	if (item.disabled) {
-		classes.push("ui5-tc__headerItem--disabled");
-	}
-
-	if (item.tabLayout === TabLayout.Inline) {
-		classes.push("ui5-tc__headerItem--inline");
-	}
-
-	if (!item.icon && !mixedMode) {
-		classes.push("ui5-tc__headerItem--textOnly");
-	}
-
-	if (item.icon) {
-		classes.push("ui5-tc__headerItem--withIcon");
-	}
-
-	if (!item.icon && mixedMode) {
-		classes.push("ui5-tc__headerItem--mixedMode");
-	}
-
-	if (item.semanticColor !== SemanticColor.Default) {
-		classes.push(`ui5-tc__headerItem--${item.semanticColor.toLowerCase()}`);
-	}
-
-	return classes.join(" ");
-};
-
-const calculateHeaderItemContentClasses = item => {
-	const classes = ["ui5-tc__headerItemContent"];
-
-	return classes.join(" ");
-};
-
-const calculateHeaderItemIconClasses = item => {
-	const classes = ["ui5-tc-headerItemIcon"];
-
-	return classes.join(" ");
-};
-
-const calculateHeaderItemSemanticIconClasses = item => {
-	const classes = ["ui5-tc-headerItemSemanticIcon"];
-
-	if (item.semanticColor !== SemanticColor.Default) {
-		classes.push(`ui5-tc-headerItemSemanticIcon--${item.semanticColor.toLowerCase()}`);
-	}
-
-	return classes.join(" ");
-};
-
-const calculateHeaderItemTextClasses = item => {
-	const classes = ["ui5-tc__headerItemText"];
-
-	return classes.join(" ");
-};
-
-const calculateHeaderItemAdditionalTextClasses = item => {
-	const classes = ["ui5-tc__headerItemAdditionalText"];
-
-	return classes.join(" ");
-};
-
-const calculateOverflowItemClasses = item => {
-	const classes = ["ui5-tc__overflowItem"];
-
-	if (item.semanticColor !== SemanticColor.Default) {
-		classes.push(`ui5-tc__overflowItem--${item.semanticColor.toLowerCase()}`);
-	}
-
-	if (item.disabled) {
-		classes.push("ui5-tc__overflowItem--disabled");
-	}
-
-	return classes.join(" ");
-};
-
-const calculateOverflowItemContentClasses = item => {
-	const classes = ["ui5-tc__overflowItemContent"];
-
-	return classes.join(" ");
-};
-
-const calculateOverflowItemState = item => {
-	return item.disabled ? "Inactive" : "Active";
-};
-
-const calculateContentItemClasses = item => {
-	const classes = ["ui5-tc__contentItem"];
-
-	return classes.join(" ");
-};
-
 TabContainer.define();
 
 export default TabContainer;
diff --git a/packages/main/src/TabContainerPopover.hbs b/packages/main/src/TabContainerPopover.hbs
index a87ee7aaf745..9ea32a417f93 100644
--- a/packages/main/src/TabContainerPopover.hbs
+++ b/packages/main/src/TabContainerPopover.hbs
@@ -8,26 +8,9 @@
 	_hide-header
 >
 	<ui5-list @ui5-itemPress="{{_onOverflowListItemSelect}}">
-		{{#each renderItems}}
+		{{#each items}}
 			{{#unless this.isSeparator}}
-				<ui5-li-custom id="{{this.item._id}}"
-					class="{{this.overflowItemClasses}}"
-					type="{{this.overflowItemState}}"
-					?selected="{{this.selected}}"
-					?disabled="{{this.disabled}}"
-				>
-					<div class="{{this.overflowItemContentClasses}}">
-						{{#if this.item.icon}}
-							<ui5-icon name="{{this.item.icon}}"></ui5-icon>
-						{{/if}}
-
-						{{this.item.text}}
-
-						{{#if this.item.additionalText}}
-							({{this.item.additionalText}})
-						{{/if}}
-					</div>
-				</ui5-li-custom>
+				{{this.overflowPresentation}}
 			{{/unless}}
 		{{/each}}
 	</ui5-list>
@@ -37,4 +20,4 @@
 			@click="{{_closeRespPopover}}"
 		>Cancel</ui5-button>
 	</div>
-</ui5-responsive-popover>
\ No newline at end of file
+</ui5-responsive-popover>
diff --git a/packages/main/src/TabInOverflow.hbs b/packages/main/src/TabInOverflow.hbs
new file mode 100644
index 000000000000..117827993d5c
--- /dev/null
+++ b/packages/main/src/TabInOverflow.hbs
@@ -0,0 +1,19 @@
+<ui5-li-custom
+	id="{{this._id}}"
+	class="{{this.overflowClasses}}"
+	type="{{this.overflowState}}"
+	?selected="{{this.effectiveSelected}}"
+	?disabled="{{this.effectiveDisabled}}"
+>
+	<div class="ui5-tab-overflow-itemContent">
+		{{#if this.icon}}
+			<ui5-icon name="{{this.icon}}"></ui5-icon>
+		{{/if}}
+
+		{{this.text}}
+
+		{{#if this.additionalText}}
+			({{this.additionalText}})
+		{{/if}}
+	</div>
+</ui5-li-custom>
diff --git a/packages/main/src/TabInStrip.hbs b/packages/main/src/TabInStrip.hbs
new file mode 100644
index 000000000000..379dc752c79f
--- /dev/null
+++ b/packages/main/src/TabInStrip.hbs
@@ -0,0 +1,46 @@
+<li id="{{this._id}}"
+	class="{{this.headerClasses}}"
+	tabindex="{{this._tabIndex}}"
+	role="tab"
+	aria-posinset="{{this._posinset}}"
+	aria-setsize="{{this._setsize}}"
+	aria-controls="ui5-tc-contentItem-{{this._posinset}}"
+	aria-selected="{{this.effectiveSelected}}"
+	?aria-disabled="{{this.effectiveDisabled}}"
+	?disabled="{{this.effectiveDisabled}}"
+	aria-labelledby="{{this.ariaLabelledBy}}"
+>
+
+	{{#if this.icon}}
+		<div id="{{this._id}}" class="ui5-tab-strip-item-icon-outer">
+			<ui5-icon name="{{this.icon}}" class="ui5-tab-strip-item-icon"></ui5-icon>
+		</div>
+	{{/if}}
+
+	<div class="ui5-tab-strip-itemContent">
+
+		{{#unless this._isInline}}
+			{{> additionalText}}
+		{{/unless}}
+
+		{{#if this.text}}
+			<span class="ui5-tab-strip-itemText" id="{{this._id}}-text">
+				<span class="{{this.headerSemanticIconClasses}}"></span>
+				{{this.text}}
+			</span>
+		{{/if}}
+
+		{{#if this._isInline}}
+			{{> additionalText}}
+		{{/if}}
+
+	</div>
+
+</li>
+
+<!-- Additional text -->
+{{#*inline additionalText}}
+	{{#if this.additionalText}}
+		<span class="ui5-tab-strip-itemAdditionalText" id="{{this._id}}-additionalText">{{this.additionalText}}</span>
+	{{/if}}
+{{/inline}}
diff --git a/packages/main/src/themes/TabContainer.css b/packages/main/src/themes/TabContainer.css
index 6c536856ee1d..4d8708e77241 100644
--- a/packages/main/src/themes/TabContainer.css
+++ b/packages/main/src/themes/TabContainer.css
@@ -52,160 +52,10 @@
 	margin: 0.5rem 0.25rem;
 }
 
-.ui5-tc__headerItem {
-	color: var(--_ui5_tc_headerItem_color);
-	cursor: pointer;
-	flex-shrink: 0;
-	margin: 0 1rem;
-	font-size: var(--sapFontSmallSize);
-	text-shadow: var(--sapContent_TextShadow);
-	position: relative;
-	display: inline-flex;
-	align-items: center;
-}
-
-.ui5-tc__headerItem:last-child {
-	margin-right: 0;
-}
-
-.ui5-tc__headerItemContent {
-	pointer-events: none;
-}
-
-.ui5-tc__headerItem--selected.ui5-tc__headerItem--textOnly {
-	color: var(--_ui5_tc_headeritem_text_selected_color);
-}
-
-.ui5-tc__headerItem--selected.ui5-tc__headerItem--textOnly .ui5-tc__headerItemContent::after,
-.ui5-tc__headerItem--selected.ui5-tc__headerItem--mixedMode .ui5-tc__headerItemContent::after,
-.ui5-tc__headerItem--selected .ui5-tc-headerItemIcon-outer::after {
-	content: "";
-	position: absolute;
-	width: 100%;
-	bottom: 0;
-	left: 0;
-	border-bottom: var(--_ui5_tc_headerItemContent_border_bottom);
-}
-
-.ui5-tc__headerItem--selected .ui5-tc-headerItemIcon-outer::after {
-	bottom: -0.8rem;
-}
-
-.ui5-tc__headerItem--disabled {
-	cursor: default;
-	opacity: 0.5;
-}
-
-.ui5-tc__headerItem:focus,
 .ui5-tc__separator:focus {
-	outline: none;
-}
-
-.ui5-tc__headerItem--withIcon:focus .ui5-tc-headerItemIcon-outer,
-.ui5-tc__headerItem--textOnly:not(.ui5-tc__headerItem--inline):focus .ui5-tc__headerItemText {
-	outline: var(--_ui5_tc_headerItem_focus_border);
-}
-
-.ui5-tc__headerItem--mixedMode:focus .ui5-tc__headerItemContent,
-.ui5-tc__headerItem--inline.ui5-tc__headerItem--textOnly:focus .ui5-tc__headerItemContent {
-	outline: var(--_ui5_tc_headerItem_focus_border);
-}
-
-.ui5-tc-headerItemSemanticIcon::before {
-	display: var(--_ui5_tc_headerItemSemanticIcon_display);
-	font-family: "SAP-icons";
-	font-size: 0.75rem;
-	margin-right: 0.25rem;
-	speak: none;
-	-webkit-font-smoothing: antialiased;
-}
-
-.ui5-tc-headerItemSemanticIcon--positive::before {
-	content: "\e1ab";
-}
-
-.ui5-tc-headerItemSemanticIcon--negative::before {
-	content: "\e1ac";
-}
-
-.ui5-tc-headerItemSemanticIcon--critical::before {
-	content: "\e1ae";
-}
-
-/*** Icon and text Tab styles ***/
-.ui5-tc__headerItem--withIcon,
-.ui5-tc__headerItem--mixedMode {
-	margin-top: 0.75rem;
-	padding-bottom: 0.75rem;
-}
-
-.ui5-tc-headerItemIcon-outer {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	position: relative;
-	border: var(--_ui5_tc_headerItemIcon_border);
-	border-radius: 50%;
-	margin-right: 0.25rem;
-	height: var(--_ui5_tc_item_text);
-	width: var(--_ui5_tc_item_text);
-	pointer-events: none;
-}
-
-.ui5-tc-headerItemIcon {
-	width: var(--_ui5_tc_item_icon_size);
-	height: var(--_ui5_tc_item_icon_size);
-	color: var(--_ui5_tc_headerItemIcon_color);
-	text-shadow: var(--sapContent_TextShadow);
-	pointer-events: none;
-}
-
-.ui5-tc__headerItem--selected .ui5-tc-headerItemIcon-outer {
-	background-color: var(--_ui5_tc_headerItemIcon_selected_background);
-}
-
-.ui5-tc__headerItem--selected .ui5-tc-headerItemIcon {
-	color: var(--_ui5_tc_headerItemIcon_selected_color);
-	text-shadow: none;
-}
-
-.ui5-tc__headerItemAdditionalText + .ui5-tc__headerItemText {
-	display: block;
-}
-
-.ui5-tc__headerItem--inline .ui5-tc__headerItemAdditionalText + .ui5-tc__headerItemText {
-	display: inline;
-}
-
-.ui5-tc__headerItem--withIcon .ui5-tc__headerItemAdditionalText + .ui5-tc__headerItemText {
-	margin-top: var(--_ui5_tc_item_add_text_margin_top);
-}
-
-/*** END Icon and text Tab styles ***/
-
-/*** TextOnly Tab styles ***/
-.ui5-tc__headerItem--textOnly {
-	font-size: var(--sapFontSize);
-	height: var(--_ui5_tc_item_text_text_only);
-	display: flex;
-	align-items: center;
-	line-height: var(--_ui5_tc_item_text_line_height);
-}
-/*** END TextOnly Tab styles ***/
-
-/*** Mixed Mode Tab styles ***/
-.ui5-tc__headerItem--mixedMode .ui5-tc__headerItemText,
-.ui5-tc__headerItem--mixedMode .ui5-tc__headerItemAdditionalText {
-	display: inline-block;
-	vertical-align: middle;
+    outline: none;
 }
 
-.ui5-tc__headerItem--mixedMode .ui5-tc__headerItemAdditionalText {
-	font-size: 1.5rem;
-	margin-right: 0.5rem;
-}
-/*** END TextOnly Tab styles ***/
-
 .ui5-tc__headerArrow {
 	cursor: pointer;
 	color: var(--sapContent_IconColor);
@@ -266,123 +116,7 @@
 	display: none;
 }
 
-/*** Semantic states ***/
-.ui5-tc__headerItem--positive.ui5-tc__headerItem--textOnly,
-.ui5-tc__headerItem--positive .ui5-tc-headerItemIcon-outer,
-.ui5-tc-headerItemSemanticIcon--positive::before {
-	color: var(--sapPositiveColor);
-	border-color: var(--_ui5_tc_headerItem_positive_selected_border_color);
-}
-
-.ui5-tc__headerItem--positive .ui5-tc-headerItemIcon {
-	color: var(--sapPositiveColor);
-}
-
-.ui5-tc__headerItem--positive.ui5-tc__headerItem--selected .ui5-tc-headerItemIcon-outer {
-	background-color: var(--_ui5_tc_headerItemIcon_positive_selected_background);
-	color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
-}
-
-.ui5-tc__headerItem--positive.ui5-tc__headerItem--selected .ui5-tc-headerItemIcon {
-	color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
-}
-
-.ui5-tc__headerItem.ui5-tc__headerItem--positive .ui5-tc__headerItemContent::after,
-.ui5-tc__headerItem--positive .ui5-tc-headerItemIcon-outer::after {
-	border-color: var(--sapPositiveColor);
-}
-
-.ui5-tc__headerItem--negative.ui5-tc__headerItem--textOnly,
-.ui5-tc__headerItem--negative .ui5-tc-headerItemIcon-outer,
-.ui5-tc-headerItemSemanticIcon--negative::before {
-	color: var(--sapNegativeColor);
-	border-color: var(--_ui5_tc_headerItem_negative_selected_border_color);
-}
-
-.ui5-tc__headerItem--negative .ui5-tc-headerItemIcon {
-	color: var(--sapNegativeColor);
-}
-
-.ui5-tc__headerItem--negative.ui5-tc__headerItem--selected .ui5-tc-headerItemIcon-outer {
-	background-color: var(--_ui5_tc_headerItemIcon_negative_selected_background);
-}
-
-.ui5-tc__headerItem--negative.ui5-tc__headerItem--selected .ui5-tc-headerItemIcon {
-	color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
-}
-
-.ui5-tc__headerItem.ui5-tc__headerItem--negative .ui5-tc__headerItemContent::after,
-.ui5-tc__headerItem--negative .ui5-tc-headerItemIcon-outer::after {
-	border-color: var(--sapNegativeColor);
-}
-
-.ui5-tc__headerItem--critical.ui5-tc__headerItem--textOnly,
-.ui5-tc__headerItem--critical .ui5-tc-headerItemIcon-outer,
-.ui5-tc-headerItemSemanticIcon--critical::before {
-	color: var(--sapCriticalColor);
-	border-color: var(--_ui5_tc_headerItem_critical_selected_border_color);
-}
-
-.ui5-tc__headerItem--critical .ui5-tc-headerItemIcon {
-	color: var(--sapCriticalColor);
-}
-
-.ui5-tc__headerItem--critical.ui5-tc__headerItem--selected .ui5-tc-headerItemIcon-outer {
-	background-color: var(--_ui5_tc_headerItemIcon_critical_selected_background);
-}
-
-.ui5-tc__headerItem--critical.ui5-tc__headerItem--selected .ui5-tc-headerItemIcon {
-	color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
-}
-
-.ui5-tc__headerItem.ui5-tc__headerItem--critical .ui5-tc__headerItemContent::after,
-.ui5-tc__headerItem--critical .ui5-tc-headerItemIcon-outer::after {
-	border-color: var(--sapCriticalColor);
-}
-
-.ui5-tc__headerItem--nutral.ui5-tc__headerItem--textOnly,
-.ui5-tc__headerItem--neutral .ui5-tc-headerItemIcon-outer {
-	color: var(--sapNeutralColor);
-	border-color: var(--_ui5_tc_headerItem_neutral_selected_border_color);
-}
-
-.ui5-tc__headerItem--neutral .ui5-tc-headerItemIcon {
-	color: var(--sapNeutralColor);
-}
-
-.ui5-tc__headerItem--neutral.ui5-tc__headerItem--selected .ui5-tc-headerItemIcon-outer {
-	background-color: var(--_ui5_tc_headerItemIcon_neutral_selected_background);
-}
-
-.ui5-tc__headerItem--neutral.ui5-tc__headerItem--selected .ui5-tc-headerItemIcon {
-	color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
-}
-
-.ui5-tc__headerItems.ui5-tc__headerItem--neutral .ui5-tc__headerItemContent::after,
-.ui5-tc__headerItem--neutral .ui5-tc-headerItemIcon::after {
-	border-color: var(--sapNeutralColor);
-}
-
 /*** RTL ***/
-[dir=rtl] .ui5-tc__headerItem:last-child {
-	margin-left: 0;
-}
-
-[dir=rtl] .ui5-tc-headerItemSemanticIcon::before {
-	margin-left: 0.25rem;
-	margin-right: 0;
-}
-
-[dir=rtl] .ui5-tc-headerItemIcon-outer {
-	margin-left: 0.25rem;
-	margin-right: 0;
-}
-
-[dir=rtl] .ui5-tc__headerItem--mixedMode .ui5-tc__headerItemAdditionalText {
-	margin-right: 0;
-	margin-left: 0.5rem;
-}
-
 [dir=rtl] .ui-tc__overflowButton {
 	margin-right: auto;
 	margin-left: 0.25rem;
diff --git a/packages/main/src/themes/TabContainerPopup.css b/packages/main/src/themes/TabContainerPopup.css
deleted file mode 100644
index 93785dd128d7..000000000000
--- a/packages/main/src/themes/TabContainerPopup.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.ui5-tc__overflowItem {
-	color: var(--_ui5_tc_overflowItem_default_color);
-}
-
-.ui5-tc__overflowItem--disabled {
-	cursor: default;
-	opacity: 0.5;
-}
-
-.ui5-tc__overflowItem--positive {
-	color: var(--sapPositiveColor);
-	border-color: var(--_ui5_tc_headerItem_positive_selected_border_color);
-}
-
-.ui5-tc__overflowItem--negative {
-	color: var(--sapNegativeColor);
-	border-color: var(--_ui5_tc_headerItem_negative_selected_border_color);
-}
-
-.ui5-tc__overflowItem--critical {
-	color: var(--sapCriticalColor);
-	border-color: var(--_ui5_tc_headerItem_critical_selected_border_color);
-}
-
-.ui5-tc__overflowItem--neutral {
-	color: var(--sapNeutralColor);
-	border-color: var(--_ui5_tc_headerItem_neutral_selected_border_color);
-}
-
-.ui5-tc__overflowItem[active] .ui5-tc__overflowItemContent {
-	color: var(--sapList_Active_TextColor);
-}
-
-.ui5-tc__overflowItemContent {
-	display: flex;
-	align-items: center;
-	padding: 0 0.5rem;
-	height: var(--_ui5_tc_item_text);
-	pointer-events: none;
-}
-
-.ui5-tc__overflowItem ui5-icon {
-	width: 1.375rem;
-	height: 1.375rem;
-	padding-right: 1rem;
-	color: currentColor;
-}
\ No newline at end of file
diff --git a/packages/main/src/themes/TabInOverflow.css b/packages/main/src/themes/TabInOverflow.css
new file mode 100644
index 000000000000..75b2e3b9e393
--- /dev/null
+++ b/packages/main/src/themes/TabInOverflow.css
@@ -0,0 +1,47 @@
+.ui5-tab-overflow-item {
+    color: var(--_ui5_tc_overflowItem_default_color);
+}
+
+.ui5-tab-overflow-item--disabled {
+    cursor: default;
+    opacity: 0.5;
+}
+
+.ui5-tab-overflow-item--positive {
+    color: var(--sapPositiveColor);
+    border-color: var(--_ui5_tc_headerItem_positive_selected_border_color);
+}
+
+.ui5-tab-overflow-item--negative {
+    color: var(--sapNegativeColor);
+    border-color: var(--_ui5_tc_headerItem_negative_selected_border_color);
+}
+
+.ui5-tab-overflow-item--critical {
+    color: var(--sapCriticalColor);
+    border-color: var(--_ui5_tc_headerItem_critical_selected_border_color);
+}
+
+.ui5-tab-overflow-item--neutral {
+    color: var(--sapNeutralColor);
+    border-color: var(--_ui5_tc_headerItem_neutral_selected_border_color);
+}
+
+.ui5-tab-overflow-item[active] .ui5-tab-overflow-itemContent {
+    color: var(--sapList_Active_TextColor);
+}
+
+.ui5-tab-overflow-itemContent {
+    display: flex;
+    align-items: center;
+    padding: 0 0.5rem;
+    height: var(--_ui5_tc_item_text);
+    pointer-events: none;
+}
+
+.ui5-tab-overflow-item ui5-icon {
+    width: 1.375rem;
+    height: 1.375rem;
+    padding-right: 1rem;
+    color: currentColor;
+}
diff --git a/packages/main/src/themes/TabInStrip.css b/packages/main/src/themes/TabInStrip.css
new file mode 100644
index 000000000000..90f8c323810c
--- /dev/null
+++ b/packages/main/src/themes/TabInStrip.css
@@ -0,0 +1,268 @@
+.ui5-tab-strip-item {
+    color: var(--_ui5_tc_headerItem_color);
+    cursor: pointer;
+    flex-shrink: 0;
+    margin: 0 1rem;
+    font-size: var(--sapFontSmallSize);
+    text-shadow: var(--sapContent_TextShadow);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+}
+
+.ui5-tab-strip-item:last-child {
+    margin-right: 0;
+}
+
+.ui5-tab-strip-itemContent {
+    pointer-events: none;
+}
+
+.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly {
+    color: var(--_ui5_tc_headeritem_text_selected_color);
+}
+
+.ui5-tab-strip-item--selected.ui5-tab-strip-item--textOnly .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--selected.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    border-bottom: var(--_ui5_tc_headerItemContent_border_bottom);
+}
+
+.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer::after {
+    bottom: -0.8rem;
+}
+
+.ui5-tab-strip-item--disabled {
+    cursor: default;
+    opacity: 0.5;
+}
+
+.ui5-tab-strip-item:focus {
+    outline: none;
+}
+
+.ui5-tab-strip-item--withIcon:focus .ui5-tab-strip-item-icon-outer,
+.ui5-tab-strip-item--textOnly:not(.ui5-tab-strip-item--inline):focus .ui5-tab-strip-itemText {
+    outline: var(--_ui5_tc_headerItem_focus_border);
+}
+
+.ui5-tab-strip-item--mixedMode:focus .ui5-tab-strip-itemContent,
+.ui5-tab-strip-item--inline.ui5-tab-strip-item--textOnly:focus .ui5-tab-strip-itemContent {
+    outline: var(--_ui5_tc_headerItem_focus_border);
+}
+
+.ui5-tab-strip-item-semanticIcon::before {
+    display: var(--_ui5_tc_headerItemSemanticIcon_display);
+    font-family: "SAP-icons";
+    font-size: 0.75rem;
+    margin-right: 0.25rem;
+    speak: none;
+    -webkit-font-smoothing: antialiased;
+}
+
+.ui5-tab-strip-item-semanticIcon--positive::before {
+    content: "\e1ab";
+}
+
+.ui5-tab-strip-item-semanticIcon--negative::before {
+    content: "\e1ac";
+}
+
+.ui5-tab-strip-item-semanticIcon--critical::before {
+    content: "\e1ae";
+}
+
+/*** Icon and text Tab styles ***/
+.ui5-tab-strip-item--withIcon,
+.ui5-tab-strip-item--mixedMode {
+    margin-top: 0.75rem;
+    padding-bottom: 0.75rem;
+}
+
+.ui5-tab-strip-item-icon-outer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    border: var(--_ui5_tc_headerItemIcon_border);
+    border-radius: 50%;
+    margin-right: 0.25rem;
+    height: var(--_ui5_tc_item_text);
+    width: var(--_ui5_tc_item_text);
+    pointer-events: none;
+}
+
+.ui5-tab-strip-item-icon {
+    width: var(--_ui5_tc_item_icon_size);
+    height: var(--_ui5_tc_item_icon_size);
+    color: var(--_ui5_tc_headerItemIcon_color);
+    text-shadow: var(--sapContent_TextShadow);
+    pointer-events: none;
+}
+
+.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer {
+    background-color: var(--_ui5_tc_headerItemIcon_selected_background);
+}
+
+.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
+    color: var(--_ui5_tc_headerItemIcon_selected_color);
+    text-shadow: none;
+}
+
+.ui5-tab-strip-itemAdditionalText + .ui5-tab-strip-itemText {
+    display: block;
+}
+
+.ui5-tab-strip-item--inline .ui5-tab-strip-itemAdditionalText + .ui5-tab-strip-itemText {
+    display: inline;
+}
+
+.ui5-tab-strip-item--withIcon .ui5-tab-strip-itemAdditionalText + .ui5-tab-strip-itemText {
+    margin-top: var(--_ui5_tc_item_add_text_margin_top);
+}
+
+/*** END Icon and text Tab styles ***/
+
+/*** TextOnly Tab styles ***/
+.ui5-tab-strip-item--textOnly {
+    font-size: var(--sapFontSize);
+    height: var(--_ui5_tc_item_text_text_only);
+    display: flex;
+    align-items: center;
+    line-height: var(--_ui5_tc_item_text_line_height);
+}
+/*** END TextOnly Tab styles ***/
+
+/*** Mixed Mode Tab styles ***/
+.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemText,
+.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemAdditionalText {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemAdditionalText {
+    font-size: 1.5rem;
+    margin-right: 0.5rem;
+}
+
+/*** Semantic states ***/
+.ui5-tab-strip-item--positive.ui5-tab-strip-item--textOnly,
+.ui5-tab-strip-item--positive .ui5-tab-strip-item-icon-outer,
+.ui5-tab-strip-item-semanticIcon--positive::before {
+    color: var(--sapPositiveColor);
+    border-color: var(--_ui5_tc_headerItem_positive_selected_border_color);
+}
+
+.ui5-tab-strip-item--positive .ui5-tab-strip-item-icon {
+    color: var(--sapPositiveColor);
+}
+
+.ui5-tab-strip-item--positive.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer {
+    background-color: var(--_ui5_tc_headerItemIcon_positive_selected_background);
+    color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
+}
+
+.ui5-tab-strip-item--positive.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
+    color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
+}
+
+.ui5-tab-strip-item.ui5-tab-strip-item--positive .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--positive .ui5-tab-strip-item-icon-outer::after {
+    border-color: var(--sapPositiveColor);
+}
+
+.ui5-tab-strip-item--negative.ui5-tab-strip-item--textOnly,
+.ui5-tab-strip-item--negative .ui5-tab-strip-item-icon-outer,
+.ui5-tab-strip-item-semanticIcon--negative::before {
+    color: var(--sapNegativeColor);
+    border-color: var(--_ui5_tc_headerItem_negative_selected_border_color);
+}
+
+.ui5-tab-strip-item--negative .ui5-tab-strip-item-icon {
+    color: var(--sapNegativeColor);
+}
+
+.ui5-tab-strip-item--negative.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer {
+    background-color: var(--_ui5_tc_headerItemIcon_negative_selected_background);
+}
+
+.ui5-tab-strip-item--negative.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
+    color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
+}
+
+.ui5-tab-strip-item.ui5-tab-strip-item--negative .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--negative .ui5-tab-strip-item-icon-outer::after {
+    border-color: var(--sapNegativeColor);
+}
+
+.ui5-tab-strip-item--critical.ui5-tab-strip-item--textOnly,
+.ui5-tab-strip-item--critical .ui5-tab-strip-item-icon-outer,
+.ui5-tab-strip-item-semanticIcon--critical::before {
+    color: var(--sapCriticalColor);
+    border-color: var(--_ui5_tc_headerItem_critical_selected_border_color);
+}
+
+.ui5-tab-strip-item--critical .ui5-tab-strip-item-icon {
+    color: var(--sapCriticalColor);
+}
+
+.ui5-tab-strip-item--critical.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer {
+    background-color: var(--_ui5_tc_headerItemIcon_critical_selected_background);
+}
+
+.ui5-tab-strip-item--critical.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
+    color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
+}
+
+.ui5-tab-strip-item.ui5-tab-strip-item--critical .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--critical .ui5-tab-strip-item-icon-outer::after {
+    border-color: var(--sapCriticalColor);
+}
+
+.ui5-tab-strip-item--nutral.ui5-tab-strip-item--textOnly,
+.ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon-outer {
+    color: var(--sapNeutralColor);
+    border-color: var(--_ui5_tc_headerItem_neutral_selected_border_color);
+}
+
+.ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon {
+    color: var(--sapNeutralColor);
+}
+
+.ui5-tab-strip-item--neutral.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon-outer {
+    background-color: var(--_ui5_tc_headerItemIcon_neutral_selected_background);
+}
+
+.ui5-tab-strip-item--neutral.ui5-tab-strip-item--selected .ui5-tab-strip-item-icon {
+    color: var(--_ui5_tc_headerItemIcon_semantic_selected_color);
+}
+
+.ui5-tab-strip-items.ui5-tab-strip-item--neutral .ui5-tab-strip-itemContent::after,
+.ui5-tab-strip-item--neutral .ui5-tab-strip-item-icon::after {
+    border-color: var(--sapNeutralColor);
+}
+
+/*** RTL ***/
+[dir=rtl] .ui5-tab-strip-item:last-child {
+    margin-left: 0;
+}
+
+[dir=rtl] .ui5-tab-strip-item-semanticIcon::before {
+    margin-left: 0.25rem;
+    margin-right: 0;
+}
+
+[dir=rtl] .ui5-tab-strip-item-icon-outer {
+    margin-left: 0.25rem;
+    margin-right: 0;
+}
+
+[dir=rtl] .ui5-tab-strip-item--mixedMode .ui5-tab-strip-itemAdditionalText {
+    margin-right: 0;
+    margin-left: 0.5rem;
+}
diff --git a/packages/main/test/specs/TabContainer.spec.js b/packages/main/test/specs/TabContainer.spec.js
index 7e7333c21c8c..adf4630bacbf 100644
--- a/packages/main/test/specs/TabContainer.spec.js
+++ b/packages/main/test/specs/TabContainer.spec.js
@@ -6,15 +6,15 @@ describe("TabContainer general interaction", () => {
 	it("tests initially selected tab", () => {
 		const tabContainer = browser.$("#tabContainer1");
 		const selectedTab = tabContainer.$("[selected]");
-		const selectedFilter = tabContainer.shadow$(".ui5-tc__headerItem:nth-child(4)");
-		const SELECTION_CSS_CLASS = "ui5-tc__headerItem--selected";
+		const selectedFilter = tabContainer.shadow$(".ui5-tab-strip-item:nth-child(4)");
+		const SELECTION_CSS_CLASS = "ui5-tab-strip-item--selected";
 
 		assert.ok(selectedFilter.getHTML().indexOf(SELECTION_CSS_CLASS) > -1, "The item has the selection css class set.");
 		assert.strictEqual(selectedFilter.id, selectedTab.id, "The IDs of the ui5-tab and the rendered tab filter matches.");
 	});
 
 	it("tests tabSelect event", () => {
-		const item = browser.$("#tabContainer1").shadow$(".ui5-tc__headerItem:nth-child(3)");
+		const item = browser.$("#tabContainer1").shadow$(".ui5-tab-strip-item:nth-child(3)");
 		const result = browser.$("#result");
 		const resultIdx = browser.$("#resultIdx");
 
@@ -74,7 +74,7 @@ describe("TabContainer general interaction", () => {
 	it("tests if content is scrollable when tabcontainer takes limited height by its parent", () => {
 		const { tcHeight, tcScrollHeight } = browser.execute(() => {
 			const scrollableContent = document.getElementById("tc-scrollable-child");
-	
+
 			return {
 				tcHeight: scrollableContent.offsetHeight,
 				tcScrollHeight: scrollableContent.scrollHeight,
@@ -83,13 +83,13 @@ describe("TabContainer general interaction", () => {
 
 		const { tabHeight, tabScrollHeight } = browser.execute(() => {
 			const scrollableContent = document.getElementById("scrollable-tab").shadowRoot.querySelector("div");
-	
+
 			return {
 				tabHeight: scrollableContent.offsetHeight,
 				tabScrollHeight: scrollableContent.scrollHeight,
 			}
 		});
-	
+
 		assert.ok(tabHeight < tabScrollHeight, "Tab Content is scrollable");
 		assert.ok(tcHeight >= tcScrollHeight, "TabContainer is not scrollable scrollable");
 	});