diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs
index a877845a3783..b06bfe628c84 100644
--- a/packages/main/src/TabContainer.hbs
+++ b/packages/main/src/TabContainer.hbs
@@ -25,16 +25,10 @@
 							?disabled="{{this.disabled}}"
 							aria-labelledby="{{this.ariaLabelledBy}}"
 						>
-							{{#if this.isTextOnlyTab}}
-								{{> textOnlyTab}}
-							{{/if}}
-
-							{{#if this.isIconTab}}
-								{{> iconTab}}
-							{{/if}}
-
-							{{#if this.isMixedModeTab}}
-								{{> mixedModeTab}}
+							{{#if this.isInline}}
+								{{> inlineTab}}
+							{{else}}
+								{{> standardTab}}
 							{{/if}}
 						</li>
 					{{/unless}}
@@ -71,23 +65,12 @@
 	</div>
 </div>
 
-{{#*inline "textOnlyTab"}}
-	<div class="{{this.headerItemContentClasses}}">
-		<span class="{{this.headerItemTextClasses}}" id="{{this.item._id}}-text">
-			<span class="{{this.headerItemSemanticIconClasses}}"></span>
-			{{this.item.text}}
-		</span>
-
-		{{#if this.item.additionalText}}
-			<span class="{{this.headerItemAdditionalTextClasses}}" id="{{this.item._id}}-additionalText">({{this.item.additionalText}})</span>
-		{{/if}}
-	</div>
-{{/inline}}
-
-{{#*inline "iconTab"}}
-	<div id="{{this.item._id}}" class="ui5-tc-headerItemIcon-outer">
-		<ui5-icon name="{{this.item.icon}}" class="{{this.headerItemIconClasses}}"></ui5-icon>
-	</div>
+{{#*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}}
@@ -103,17 +86,23 @@
 	</div>
 {{/inline}}
 
-{{#*inline "mixedModeTab"}}
-	<div class="{{this.headerItemContentClasses}}">
-		{{#if this.item.additionalText}}
-			<span class="{{this.headerItemAdditionalTextClasses}}" id="{{this.item._id}}-additionalText">{{this.item.additionalText}}</span>
-		{{/if}}
+{{#*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}}
+{{/inline}}
\ No newline at end of file
diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js
index 970389863adf..6108af3f98b6 100644
--- a/packages/main/src/TabContainer.js
+++ b/packages/main/src/TabContainer.js
@@ -25,6 +25,7 @@ import TabContainerPopoverTemplate from "./generated/templates/TabContainerPopov
 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;
 
@@ -51,7 +52,7 @@ const metadata = {
 	},
 	properties: /** @lends  sap.ui.webcomponents.main.TabContainer.prototype */ {
 		/**
-		 * Determines whether the tabs are in a fixed state that is not
+		 * Defines whether the tabs are in a fixed state that is not
 		 * expandable/collapsible by user interaction.
 		 *
 		 * @type {Boolean}
@@ -63,7 +64,7 @@ const metadata = {
 		},
 
 		/**
-		 * Determines whether the tab content is collapsed.
+		 * Defines whether the tab content is collapsed.
 		 *
 		 * @type {Boolean}
 		 * @defaultvalue false
@@ -74,7 +75,7 @@ const metadata = {
 		},
 
 		/**
-		 * Specifies if the overflow select list is displayed.
+		 * Defines whether the overflow select list is displayed.
 		 * <br><br>
 		 * The overflow select list represents a list, where all tab filters are displayed
 		 * so that it's easier for the user to select a specific tab filter.
@@ -87,6 +88,28 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the alignment of the <code>main text</code> and the <code>additionalText</code> of a tab.
+		 * <br>
+		 * <b>Note:</b>
+		 * The <code>main text</code> and the <code>additionalText</code> would be displayed vertically by defualt,
+		 * but when set to <code>Inline</code>, they would be displayed horizontally.
+		 * <br><br>
+		 * Available options are:
+		 * <ul>
+		 * <li><code>Standard</code></li>
+		 * <li><code>Inline</code></li>
+		 * <ul>
+		 *
+		 * @type {String}
+		 * @defaultvalue "Standard"
+		 * @public
+		 */
+		tabLayout: {
+			type: String,
+			defaultValue: TabLayout.Standard,
+		},
+
 		_selectedTab: {
 			type: Object,
 		},
@@ -226,6 +249,7 @@ class TabContainer extends UI5Element {
 
 			return {
 				item,
+				isInline: this.tabLayout === TabLayout.Inline,
 				isMixedModeTab: !item.icon && this.mixedMode,
 				isTextOnlyTab: !item.icon && !this.mixedMode,
 				isIconTab: item.icon,
@@ -491,6 +515,10 @@ const calculateHeaderItemClasses = (item, mixedMode) => {
 		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");
 	}
diff --git a/packages/main/src/themes/TabContainer.css b/packages/main/src/themes/TabContainer.css
index 8ca7333c04d5..1707c003c8e8 100644
--- a/packages/main/src/themes/TabContainer.css
+++ b/packages/main/src/themes/TabContainer.css
@@ -98,8 +98,12 @@
 }
 
 .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--textOnly:focus .ui5-tc__headerItemContent {
+.ui5-tc__headerItem--inline.ui5-tc__headerItem--textOnly:focus .ui5-tc__headerItemContent {
 	outline: var(--_ui5_tc_headerItem_focus_border);
 }
 
@@ -161,10 +165,18 @@
 	text-shadow: none;
 }
 
-.ui5-tc__headerItem--withIcon .ui5-tc__headerItemAdditionalText + .ui5-tc__headerItemText {
+.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 ***/
diff --git a/packages/main/src/types/TabLayout.js b/packages/main/src/types/TabLayout.js
new file mode 100644
index 000000000000..cdafc4a13065
--- /dev/null
+++ b/packages/main/src/types/TabLayout.js
@@ -0,0 +1,40 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * @lends sap.ui.webcomponents.main.types.TabLayout.prototype
+ * @public
+ */
+const TabLayouts = {
+	/**
+	 * Inline type, the tab <code>main text</code> and <code>additionalText</code> are displayed horizotally.
+	 * @public
+	 * @type {Inline}
+	 */
+	Inline: "Inline",
+
+	/**
+	 * Standard type, the tab <code>main text</code> and <code>additionalText</code> are displayed vertically.
+	 * @public
+	 * @type {Standard}
+	 */
+	Standard: "Standard",
+};
+
+/**
+ * @class
+ * Different types of Tab layouts.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.TabLayout
+ * @public
+ * @enum {string}
+ */
+class TabLayout extends DataType {
+	static isValid(value) {
+		return !!TabLayouts[value];
+	}
+}
+
+TabLayout.generataTypeAcessors(TabLayouts);
+
+export default TabLayout;
diff --git a/packages/main/test/pages/TabContainer.html b/packages/main/test/pages/TabContainer.html
index 5c235c91270e..bcb2b53a1856 100644
--- a/packages/main/test/pages/TabContainer.html
+++ b/packages/main/test/pages/TabContainer.html
@@ -226,14 +226,34 @@ <h2>Text only</h2>
 		<h2>Icon and Text</h2>
 
 		<ui5-tabcontainer show-overflow="true">
-			<ui5-tab icon="sap-icon://card" text="Tab 1" additional-text="123" selected>
+			<ui5-tab icon="sap-icon://card" text="Tab 1" additional-text="123">
 				<div style="height: 300px">
 					<h4>Content with set height: 300px</h4>
 					<ui5-button>Button 11</ui5-button>
 					<ui5-button>Button 12</ui5-button>
 				</div>
 			</ui5-tab>
-			<ui5-tab icon="sap-icon://menu2" text="Tab 2" additional-text="444">
+			<ui5-tab icon="sap-icon://menu2" text="Tab 2" additional-text="444" selected>
+				<ui5-button>Button 2</ui5-button>
+			</ui5-tab>
+			<ui5-tab icon="sap-icon://employee" text="Tab 3" additional-text="123">
+				<ui5-button>Button 3</ui5-button>
+			</ui5-tab>
+		</ui5-tabcontainer>
+	</section>
+
+	<section>
+		<h2>Icon and Text with tabLayout="Inline"</h2>
+
+		<ui5-tabcontainer show-overflow="true" tab-layout="Inline">
+			<ui5-tab icon="sap-icon://card" text="Tab 1" additional-text="123">
+				<div style="height: 300px">
+					<h4>Content with set height: 300px</h4>
+					<ui5-button>Button 11</ui5-button>
+					<ui5-button>Button 12</ui5-button>
+				</div>
+			</ui5-tab>
+			<ui5-tab icon="sap-icon://menu2" text="Tab 2" additional-text="444" selected>
 				<ui5-button>Button 2</ui5-button>
 			</ui5-tab>
 			<ui5-tab icon="sap-icon://employee" text="Tab 3" additional-text="123">
@@ -246,11 +266,11 @@ <h4>Content with set height: 300px</h4>
 		<h2>Text and additional text</h2>
 
 		<ui5-tabcontainer show-overflow="true">
-			<ui5-tab text="Tab 1" additional-text="additional" selected>
+			<ui5-tab text="Tab 1" additional-text="additional">
 				<ui5-button>Button 11</ui5-button>
 				<ui5-button>Button 12</ui5-button>
 			</ui5-tab>
-			<ui5-tab text="Tab 2" additional-text="additional">
+			<ui5-tab text="Tab 2" additional-text="additional" selected>
 				<ui5-button>Button 2</ui5-button>
 			</ui5-tab>
 			<ui5-tab text="Tab 3" additional-text="additional">
@@ -259,6 +279,23 @@ <h2>Text and additional text</h2>
 		</ui5-tabcontainer>
 	</section>
 
+	<section>
+		<h2>Text and additional text with tabLayout="Inline"</h2>
+
+		<ui5-tabcontainer show-overflow="true" tab-layout="Inline">
+			<ui5-tab text="Monitors" additional-text="10">
+				<ui5-button>Button 11</ui5-button>
+				<ui5-button>Button 12</ui5-button>
+			</ui5-tab>
+			<ui5-tab text="Cameras" additional-text="2" selected>
+				<ui5-button>Button 2</ui5-button>
+			</ui5-tab>
+			<ui5-tab text="Rooms" additional-text="16">
+				<ui5-button>Button 3</ui5-button>
+			</ui5-tab>
+		</ui5-tabcontainer>
+	</section>
+
 	<section>
 		<h2>Tabs with input elements</h2>
 
diff --git a/packages/main/test/samples/TabContainer.sample.html b/packages/main/test/samples/TabContainer.sample.html
index f6b6ad97295d..dfb5786f681c 100644
--- a/packages/main/test/samples/TabContainer.sample.html
+++ b/packages/main/test/samples/TabContainer.sample.html
@@ -50,8 +50,9 @@ <h3>Basic TabContainer</h3>
 	</xmp></pre>
 </section>
 
+<!-- text only -->
 <section>
-	<h3>Text Only TabContainer</h3>
+	<h3>TabContainer with text only tabs</h3>
 	<div class="snippet">
 		<ui5-tabcontainer class="full-width" collapsed fixed show-overflow>
 			<ui5-tab text="Home"></ui5-tab>
@@ -72,4 +73,76 @@ <h3>Text Only TabContainer</h3>
 	</xmp></pre>
 </section>
 
+<!-- text and additional-text -->
+<section>
+	<h3>TabContainer with text and additional-text</h3>
+	<div class="snippet">
+		<ui5-tabcontainer show-overflow="true" collapsed fixed>
+			<ui5-tab text="Info" additional-text="3">
+			</ui5-tab>
+			<ui5-tab text="Attachments" additional-text="24" selected>
+			</ui5-tab>
+			<ui5-tab text="Notes" additional-text="16">
+			</ui5-tab>
+			<ui5-tab text="People" additional-text="34">
+			</ui5-tab>
+		</ui5-tabcontainer>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-tabcontainer show-overflow="true" collapsed fixed>
+	<ui5-tab text="Info" additional-text="3">
+	</ui5-tab>
+	<ui5-tab text="Attachments" additional-text="24" selected>
+	</ui5-tab>
+	<ui5-tab text="Notes" additional-text="16">
+	</ui5-tab>
+	<ui5-tab text="People" additional-text="34">
+	</ui5-tab>
+</ui5-tabcontainer>
+	</xmp></pre>
+</section>
+
+<!-- Inline tabs -->
+<section>
+	<h3>TabContainer with tabLayout="Inline"</h3>
+	<div class="snippet">
+		<ui5-tabcontainer tab-layout="Inline" show-overflow="true" collapsed fixed>
+			<ui5-tab text="Monitors" additional-text="(10)">
+			</ui5-tab>
+			<ui5-tab text="Cameras" additional-text="(2)" selected>
+			</ui5-tab>
+			<ui5-tab text="Rooms" additional-text="(16)">
+			</ui5-tab>
+		</ui5-tabcontainer>
+
+		<ui5-tabcontainer tab-layout="Inline" show-overflow="true" collapsed fixed>
+			<ui5-tab icon="laptop" ext="Monitors" additional-text="(10)">
+			</ui5-tab>
+			<ui5-tab icon="video" text="Cameras" additional-text="(2)" selected>
+			</ui5-tab>
+			<ui5-tab icon="home" text="Rooms" additional-text="(16)">
+			</ui5-tab>
+		</ui5-tabcontainer>
+	</div>
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-tabcontainer tab-layout="Inline" show-overflow="true" collapsed fixed>
+	<ui5-tab text="Monitors" additional-text="(10)">
+	</ui5-tab>
+	<ui5-tab text="Cameras" additional-text="(2)" selected>
+	</ui5-tab>
+	<ui5-tab text="Rooms" additional-text="(16)">
+	</ui5-tab>
+</ui5-tabcontainer>
+
+<ui5-tabcontainer tab-layout="Inline" show-overflow="true" collapsed fixed>
+	<ui5-tab icon="laptop" ext="Monitors" additional-text="(10)">
+	</ui5-tab>
+	<ui5-tab icon="video" text="Cameras" additional-text="(2)" selected>
+	</ui5-tab>
+	<ui5-tab icon="home" text="Rooms" additional-text="(16)">
+	</ui5-tab>
+</ui5-tabcontainer>
+	</xmp></pre>
+</section>
+
 <!-- JSDoc marker -->