diff --git a/packages/fiori/cypress/specs/ShellBar.cy.tsx b/packages/fiori/cypress/specs/ShellBar.cy.tsx
index 5527304ed42c..488fd1c7c288 100644
--- a/packages/fiori/cypress/specs/ShellBar.cy.tsx
+++ b/packages/fiori/cypress/specs/ShellBar.cy.tsx
@@ -24,8 +24,7 @@ describe("Responsiveness", () => {
 			showNotifications={true}
 			showProductSwitch={true}
 		>
-			{/* <ToggleButton id="assistant" icon={da} slot="assistant" text="Button3"></ToggleButton> */}
-			<ToggleButton id="assistant" icon={da} slot="assistant">Button3</ToggleButton>
+			<ToggleButton id="assistant" icon={da} slot="assistant"></ToggleButton>
 
 			<Avatar slot="profile">
 				<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
@@ -198,8 +197,8 @@ describe("Responsiveness", () => {
 		cy.get("@productSwitchIcon").should("be.visible");
 	});
 
-	it("tests S Breakpoint and overflow 510px", () => {
-		cy.viewport(510, 1680);
+	it("tests S Breakpoint and overflow 520px", () => {
+		cy.viewport(520, 1680);
 
 		cy.get("@shellbar").should("have.prop", "breakpointSize", "S");
 
diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
index ef5062c1f654..a8188d5ed463 100644
--- a/packages/fiori/src/ShellBar.ts
+++ b/packages/fiori/src/ShellBar.ts
@@ -504,7 +504,9 @@ class ShellBar extends UI5Element {
 	_overflowNotifications: string | null;
 	_lastOffsetWidth = 0;
 	_observableContent: Array<HTMLElement> = [];
+	_isAnimating: boolean = false;
 	_autoRestoreSearchField = false;
+	_handleAnimationEndRef = this._handleAnimationEnd.bind(this);
 
 	_headerPress: () => void;
 
@@ -737,7 +739,9 @@ class ShellBar extends UI5Element {
 
 	onAfterRendering() {
 		this._lastOffsetWidth = this.offsetWidth;
-		this._overflowActions();
+		if (!this._isAnimating) {
+			this._overflowActions();
+		}
 		this.onInitialRendering();
 	}
 
@@ -785,7 +789,7 @@ class ShellBar extends UI5Element {
 
 	_resetItemsVisibility(items: Array<HTMLElement>) {
 		items.forEach(item => {
-			item.classList.remove("ui5-shellbar-hidden-button");
+			item.classList.contains("ui5-shellbar-hidden-button") && item.classList.remove("ui5-shellbar-hidden-button");
 		});
 	}
 
@@ -855,12 +859,33 @@ class ShellBar extends UI5Element {
 		ResizeHandler.deregister(this, this._handleResize);
 	}
 
+	_handleAnimationEnd() {
+		this._overflowActions();
+		this._isAnimating = false;
+		this.searchField[0].removeEventListener("animationend", this._handleAnimationEndRef);
+		this.shadowRoot!.querySelector("header")!.classList.remove("ui5-shellbar-animating");
+	}
+
+	_attachAnimationEndHandlers() {
+		const searchWrapper = this.shadowRoot!.querySelector(".ui5-shellbar-search-field");
+		this._isAnimating = true;
+		this.shadowRoot!.querySelector("header")!.classList.add("ui5-shellbar-animating");
+		searchWrapper?.addEventListener("animationend", this._handleAnimationEndRef);
+		setTimeout(() => {
+			if (this._isAnimating) {
+				this._handleAnimationEnd();
+			}
+		}, RESIZE_THROTTLE_RATE);
+	}
+
 	_handleSearchIconPress() {
 		const searchButtonRef = this.shadowRoot!.querySelector<Button>(".ui5-shellbar-search-button")!;
 		const defaultPrevented = !this.fireDecoratorEvent("search-button-click", {
 			targetRef: searchButtonRef,
 			searchFieldVisible: this.showSearchField,
 		});
+		this._attachAnimationEndHandlers();
+
 		if (defaultPrevented) {
 			return;
 		}
@@ -932,6 +957,7 @@ class ShellBar extends UI5Element {
 
 	_handleCancelButtonPress() {
 		this.showSearchField = false;
+		this._attachAnimationEndHandlers();
 	}
 
 	_handleProductSwitchPress(e: MouseEvent) {
@@ -1261,7 +1287,7 @@ class ShellBar extends UI5Element {
 	get styles() {
 		return {
 			searchField: {
-				"display": this.showSearchField ? "flex" : "none",
+				"display": this.showSearchField || this._isAnimating ? "flex" : "none",
 			},
 		};
 	}
@@ -1424,7 +1450,7 @@ class ShellBar extends UI5Element {
 		return this.contentItems.length > 0;
 	}
 
-	get hidableDomElements(): HTMLElement [] {
+	get hidableDomElements(): HTMLElement[] {
 		const items = Array.from(this.shadowRoot!.querySelectorAll<HTMLElement>(".ui5-shellbar-button:not(.ui5-shellbar-search-button):not(.ui5-shellbar-overflow-button):not(.ui5-shellbar-cancel-button):not(.ui5-shellbar-no-overflow-button)"));
 		const assistant = this.shadowRoot!.querySelector<HTMLElement>(".ui5-shellbar-assistant-button");
 		const searchButton = this.shadowRoot!.querySelector<HTMLElement>(".ui5-shellbar-search-button");
diff --git a/packages/fiori/src/ShellBarTemplate.tsx b/packages/fiori/src/ShellBarTemplate.tsx
index a6b4bca39a69..261d2f294596 100644
--- a/packages/fiori/src/ShellBarTemplate.tsx
+++ b/packages/fiori/src/ShellBarTemplate.tsx
@@ -85,7 +85,7 @@ export default function ShellBarTemplate(this: ShellBar) {
 								{this.startContent.map(item => {
 									const itemInfo = this._contentInfo.find(info => info.id === item._individualSlot);
 									return (
-										<div key={item._individualSlot} id={item._individualSlot} class={itemInfo?.classes}>
+										<div key={item._individualSlot} id={item._individualSlot} class={itemInfo?.classes} data-hide-order={`${item.getAttribute("data-hide-order")}`}>
 											{this.shouldIncludeSeparator(itemInfo, this.startContentInfoSorted) && (
 												// never displayed, only "packed" with last item that was hidden, used for measurement purposes
 												<div class={{
@@ -101,7 +101,7 @@ export default function ShellBarTemplate(this: ShellBar) {
 								{this.endContent.map(item => {
 									const itemInfo = this._contentInfo.find(info => info.id === item._individualSlot);
 									return (
-										<div key={item._individualSlot} id={item._individualSlot} class={itemInfo?.classes}>
+										<div key={item._individualSlot} id={item._individualSlot} class={itemInfo?.classes} data-hide-order={item.getAttribute("data-hide-order")}>
 											<slot name={item._individualSlot}></slot>
 											{this.shouldIncludeSeparator(itemInfo, this.endContentInfoSorted) && (
 												// never displayed, only "packed" with last item that was hidden, used for measurement purposes
diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css
index c626ddf21a53..3a1f0f43b3e6 100644
--- a/packages/fiori/src/themes/ShellBar.css
+++ b/packages/fiori/src/themes/ShellBar.css
@@ -54,6 +54,7 @@
 	line-height: inherit;
 	letter-spacing: inherit;
 	word-spacing: inherit;
+	flex-shrink: 0;
 }
 
 ::slotted([ui5-toggle-button][slot="assistant"]) {
@@ -445,11 +446,17 @@ slot[name="profile"] {
 }
 
 .ui5-shellbar-search-field {
-	padding-inline-start: var(--_ui5-shellbar-content-margin-start);
-	min-width: var(--_ui5_shellbar_search_field_width);
 	align-items: center;
 	flex-grow: 1;
 	margin-inline-start: 0.5rem;
+	display: flex;
+	width: 0;
+	overflow: hidden;
+}
+
+:host([show-search-field]:not(.ui5-shellbar-animating)) .ui5-shellbar-search-field {
+	min-width: var(--_ui5_shellbar_search_field_width);
+	padding-inline-start: var(--_ui5-shellbar-content-margin-start);
 }
 
 .ui5-shellbar-overflow-container-right-child > :first-child,
@@ -486,7 +493,6 @@ slot[name="profile"] {
 	color: var(--_ui5_shellbar_search_field_color);
 	height: 2.25rem;
 	width: 100%;
-	min-width: var(--_ui5_shellbar_search_field_width);
 }
 
 :host([breakpoint-size="M"]) ::slotted([ui5-input]),
@@ -533,12 +539,17 @@ slot[name="profile"] {
 	width: auto;
 }
 
+.ui5-shellbar-content-item {
+	width: auto;
+	opacity: 1;
+}
+
 /* if class contains ui5-shellbar-hidden-button */
 ::slotted(.ui5-shellbar-hidden-button),
 .ui5-shellbar-hidden-button,
 .ui5-shellbar-invisible-button {
-	visibility: hidden;
 	order: -1;
+	visibility: hidden;
 	opacity: 0;
 	min-width: 0;
 	width: 0;
@@ -547,4 +558,68 @@ slot[name="profile"] {
 	padding-inline-start: 0;
 	border: 0;
 	margin-inline-start: 0;
+	transition: opacity,width 0.2s cubic-bezier(0.2, 0.2, 0.38, 0.9);
+}
+
+.ui5-shellbar-content-item[data-hide-order = "1"]	{
+	transition-duration: 0.01s;
+}
+.ui5-shellbar-content-item[data-hide-order = "2"]	{
+	transition-duration: 0.1s;
+}
+.ui5-shellbar-content-item[data-hide-order = "3"]	{
+	transition-duration: 0.15s;
+}
+.ui5-shellbar-content-item[data-hide-order = "4"]	{
+	transition-duration: 0.2s;
+}
+.ui5-shellbar-content-item[data-hide-order = "5"]	{
+	transition-duration: 0.25s;
+}
+.ui5-shellbar-content-item[data-hide-order = "6"]	{
+	transition-duration: 0.3s;
+}
+.ui5-shellbar-content-item[data-hide-order = "7"]	{
+	transition-duration: 0.35s;
+}
+.ui5-shellbar-content-item[data-hide-order = "8"]	{
+	transition-duration: 0.4s;
+}
+.ui5-shellbar-content-item[data-hide-order = "9"]	{
+	transition-duration: 0.45s;
+}
+.ui5-shellbar-content-item[data-hide-order = "10"] {
+	transition-duration: 0.5s;
+}
+
+.ui5-shellbar-animating .ui5-shellbar-search-field {
+	animation: expand-shrink 0.2s cubic-bezier(0.2, 0.2, 0.38, 0.9);
+}
+
+:host([show-search-field]) .ui5-shellbar-animating .ui5-shellbar-search-field,
+:host([show-search-field]) .ui5-shellbar-animating .ui5-shellbar-search-full-width-wrapper {
+ 	animation: expand-grow 0.2s cubic-bezier(0.2, 0.2, 0.38, 0.9) forwards;
+}
+
+@keyframes expand-grow {
+	from {
+		min-width: 0;
+		opacity: 0;
+	}
+	to {
+		min-width: var(--_ui5_shellbar_search_field_width);
+		opacity: 1;
+	}
+}
+
+@keyframes expand-shrink {
+	from {
+		min-width: var(--_ui5_shellbar_search_field_width);
+		opacity: 1;
+	}
+	to {
+		min-width: 0;
+		opacity: 0;
+		padding-inline-start: 0;
+	}
 }
\ No newline at end of file