diff --git a/packages/main/src/ShellBar.hbs b/packages/main/src/ShellBar.hbs
index 86a18d2710ae..9bd9a8903ace 100644
--- a/packages/main/src/ShellBar.hbs
+++ b/packages/main/src/ShellBar.hbs
@@ -2,14 +2,14 @@
 	class="{{classes.wrapper}}"
 	dir="{{rtl}}"
 >
-	<div class="{{classes.leftContainer}}">
+	<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-left">
 
 		{{#if icon.length}}
 			<slot name="icon"></slot>
 		{{/if}}
 
 		{{#unless interactiveLogo}}
-			<img class="{{classes.logo}}" src="{{logo}}" @click="{{_logoPress}}" />
+			<img class="ui5-shellbar-logo" src="{{logo}}" @click="{{_logoPress}}" />
 		{{/unless}}
 
 		{{#if showArrowDown}}
@@ -19,35 +19,35 @@
 				{{/if}}
 
 				{{#if primaryTitle}}
-					<h1 class="{{classes.buttonTitle}}">
+					<h1 class="ui5-shellbar-menu-button-title">
 						<bdi class="{{classes.title}}">{{primaryTitle}}</bdi>
 					</h1>
 				{{/if}}
 
-				<span class="{{classes.arrow}}"></span>
+				<span class="ui5-shellbar-menu-button-arrow"></span>
 			</button>
 		{{/if}}
 
-		<ui5-popover class="sapWCShellBarMenuPopover" placement-type="Bottom">
+		<ui5-popover class="ui5-shellbar-menu-popover" placement-type="Bottom">
 			<ui5-list separators="None" mode="SingleSelect" @ui5-itemPress={{_menuItemPress}}>
 				<slot name="menuItems"></slot>
 			</ui5-list>
 		</ui5-popover>
 
-		<h2 class="{{classes.secondaryTitle}}">{{secondaryTitle}}</h2>
+		<h2 class="ui5-shellbar-secondary-title">{{secondaryTitle}}</h2>
 	</div>
 
-	<div class="sapWCShellBarOverflowContainer sapWCShellBarOverflowContainerMiddle">
+	<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-middle">
 		{{#if showCoPilot}}
 			{{> coPilot}}
 		{{else}}
-			<span class="sapWCShellBarCoPilotPlaceholder"></span>
+			<span class="ui5-shellbar-co-pilot-placeholder"></span>
 		{{/if}}
 	</div>
 
-	<div class="sapWCShellBarOverflowContainer sapWCShellBarOverflowContainerRight">
+	<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right">
 
-		<div class="sapWCShellBarOverflowContainerRightChild">
+		<div class="ui5-shellbar-overflow-container-right-child">
 			{{#each _itemsInfo}}
 				{{#if this.src}}
 					<ui5-icon
@@ -75,7 +75,7 @@
 		</div>
 	</div>
 
-	<ui5-popover class="sapWCShellBarOverflowPopover" placement-type="Bottom" horizontal-align="{{popoverHorizontalAlign}}" no-arrow>
+	<ui5-popover class="ui5-shellbar-overflow-popover" placement-type="Bottom" horizontal-align="{{popoverHorizontalAlign}}" no-arrow>
 		<ui5-list separators="None" @ui5-itemPress="{{_actionList.itemPress}}">
 			{{#each _hiddenIcons}}
 				<ui5-li
@@ -89,11 +89,11 @@
 		</ui5-list>
 	</ui5-popover>
 
-	<div class="{{classes.blockLayer}}">
+	<div class="ui5-shellbar-block-layer">
 	</div>
 
 	<div id="{{_id}}-searchfield-wrapper"
-		class="{{classes.searchField}}"
+		class="ui5-shellbar-search-field"
 		style="{{styles.searchField}}"
 		@focusout={{_searchField.focusout}}
 	>
@@ -150,6 +150,6 @@
 					begin="shell_avatar.mousedown" repeatCount="1" additive="sum"></animateTransform>
 			</path>
 		</g>
-		<circle cx="0" cy="0" r="76" class="sapWCShellBarCoPilotMiddle" id="shell_avatar"></circle>
+		<circle cx="0" cy="0" r="76" class="ui5-shellbar-co-pilot-circle" id="shell_avatar"></circle>
 	</svg>
 {{/inline}}
diff --git a/packages/main/src/ShellBar.js b/packages/main/src/ShellBar.js
index 54bca1675493..92110ab440fa 100644
--- a/packages/main/src/ShellBar.js
+++ b/packages/main/src/ShellBar.js
@@ -107,9 +107,18 @@ const metadata = {
 			type: Boolean,
 		},
 
-		_breakpointSize: {
+		/**
+		 * @private
+		 */
+		breakpointSize: {
 			type: String,
-			noAttribute: true,
+		},
+
+		/**
+		 * @private
+		 */
+		showBlockLayer: {
+			type: Boolean,
 		},
 
 		_itemsInfo: {
@@ -121,10 +130,6 @@ const metadata = {
 			type: Object,
 		},
 
-		_showBlockLayer: {
-			type: Boolean,
-			noAttribute: true,
-		},
 		_searchField: {
 			type: Object,
 		},
@@ -343,7 +348,7 @@ class ShellBar extends UI5Element {
 
 		this._actionList = {
 			itemPress: event => {
-				const popover = this.shadowRoot.querySelector(".sapWCShellBarOverflowPopover");
+				const popover = this.shadowRoot.querySelector(".ui5-shellbar-overflow-popover");
 
 				if (!this._defaultItemPressPrevented) {
 					popover.close();
@@ -355,10 +360,10 @@ class ShellBar extends UI5Element {
 
 		this._header = {
 			press: event => {
-				const menuPopover = this.shadowRoot.querySelector(".sapWCShellBarMenuPopover");
+				const menuPopover = this.shadowRoot.querySelector(".ui5-shellbar-menu-popover");
 
 				if (this.menuItems.length) {
-					menuPopover.openBy(this.shadowRoot.querySelector(".sapWCShellBarMenuButton"));
+					menuPopover.openBy(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
 				}
 			},
 		};
@@ -367,8 +372,8 @@ class ShellBar extends UI5Element {
 
 		this._itemNav.getItemsCallback = () => {
 			const items = that._itemsInfo.filter(info => {
-				const isVisible = info.classes.indexOf("sapWCShellBarHiddenIcon") === -1;
-				const isSet = info.classes.indexOf("sapWCShellBarUnsetIcon") === -1;
+				const isVisible = info.classes.indexOf("ui5-shellbar-hidden-button") === -1;
+				const isSet = info.classes.indexOf("ui5-shellbar-invisible-button") === -1;
 
 				if (isVisible && isSet) {
 					return true;
@@ -418,12 +423,12 @@ class ShellBar extends UI5Element {
 		this._searchField = {
 			left: 0,
 			focusout: event => {
-				this._showBlockLayer = false;
+				this.showBlockLayer = false;
 			},
 		};
 
 		this._handleResize = event => {
-			this.shadowRoot.querySelector(".sapWCShellBarOverflowPopover").close();
+			this.shadowRoot.querySelector(".ui5-shellbar-overflow-popover").close();
 			this._overflowActions();
 		};
 	}
@@ -436,7 +441,7 @@ class ShellBar extends UI5Element {
 
 	_logoPress(event) {
 		this.fireEvent("logoClick", {
-			targetRef: this.shadowRoot.querySelector(".sapWCShellBarLogo"),
+			targetRef: this.shadowRoot.querySelector(".ui5-shellbar-logo"),
 		});
 	}
 
@@ -453,9 +458,9 @@ class ShellBar extends UI5Element {
 		}
 
 		this._hiddenIcons = this._itemsInfo.filter(info => {
-			const isHidden = (info.classes.indexOf("sapWCShellBarHiddenIcon") !== -1);
-			const isSet = info.classes.indexOf("sapWCShellBarUnsetIcon") === -1;
-			const isOverflowIcon = info.classes.indexOf("sapWCShellBarOverflowIcon") !== -1;
+			const isHidden = (info.classes.indexOf("ui5-shellbar-hidden-button") !== -1);
+			const isSet = info.classes.indexOf("ui5-shellbar-invisible-button") === -1;
+			const isOverflowIcon = info.classes.indexOf("ui5-shellbar-overflow-button") !== -1;
 
 			return isHidden && isSet && !isOverflowIcon;
 		});
@@ -475,7 +480,7 @@ class ShellBar extends UI5Element {
 	 * @public
 	 */
 	closeOverflow() {
-		const popover = this.shadowRoot.querySelector(".sapWCShellBarOverflowPopover");
+		const popover = this.shadowRoot.querySelector(".ui5-shellbar-overflow-popover");
 
 		if (popover) {
 			popover.close();
@@ -489,8 +494,8 @@ class ShellBar extends UI5Element {
 		const size = breakpoints.filter(bp1 => width < bp1)[0] || ShellBar.FIORI_3_BREAKPOINTS[ShellBar.FIORI_3_BREAKPOINTS.length - 1];
 		const mappedSize = ShellBar.FIORI_3_BREAKPOINTS_MAP[size];
 
-		if (this._breakpointSize !== mappedSize) {
-			this._breakpointSize = mappedSize;
+		if (this.breakpointSize !== mappedSize) {
+			this.breakpointSize = mappedSize;
 		}
 
 		return mappedSize;
@@ -500,20 +505,20 @@ class ShellBar extends UI5Element {
 		const hasIcons = this.showNotifications || this.showProductSwitch || this.searchField.length || this.items.length;
 
 		this._itemsInfo = this._getAllItems(hasIcons).map(info => {
-			const isOverflowIcon = info.classes.indexOf("sapWCShellBarOverflowIcon") !== -1;
-			const isImageIcon = info.classes.indexOf("sapWCShellBarImageButton") !== -1;
+			const isOverflowIcon = info.classes.indexOf("ui5-shellbar-overflow-button") !== -1;
+			const isImageIcon = info.classes.indexOf("ui5-shellbar-image-button") !== -1;
 			const shouldStayOnScreen = isOverflowIcon || (isImageIcon && this.profile);
 
 			return Object.assign({}, info, {
-				classes: `${info.classes} ${shouldStayOnScreen ? "" : "sapWCShellBarHiddenIcon"} sapWCShellBarIconButton`,
+				classes: `${info.classes} ${shouldStayOnScreen ? "" : "ui5-shellbar-hidden-button"} ui5-shellbar-button`,
 				style: `order: ${shouldStayOnScreen ? 1 : -1}`,
 			});
 		});
 	}
 
 	_handleActionsOverflow() {
-		const rightContainerRect = this.shadowRoot.querySelector(".sapWCShellBarOverflowContainerRight").getBoundingClientRect();
-		const icons = this.shadowRoot.querySelectorAll(".sapWCShellBarIconButton:not(.sapWCShellBarOverflowIcon):not(.sapWCShellBarUnsetIcon)");
+		const rightContainerRect = this.shadowRoot.querySelector(".ui5-shellbar-overflow-container-right").getBoundingClientRect();
+		const icons = this.shadowRoot.querySelectorAll(".ui5-shellbar-button:not(.ui5-shellbar-overflow-button):not(.ui5-shellbar-invisible-button)");
 		const isRTL = getRTL();
 
 		let overflowCount = [].filter.call(icons, icon => {
@@ -556,7 +561,7 @@ class ShellBar extends UI5Element {
 
 		for (let i = 0; i < itemsByPriority.length; i++) {
 			if (i < overflowCount) {
-				itemsByPriority[i].classes = `${itemsByPriority[i].classes} sapWCShellBarHiddenIcon`;
+				itemsByPriority[i].classes = `${itemsByPriority[i].classes} ui5-shellbar-hidden-button`;
 				itemsByPriority[i].style = `order: -1`;
 			} else {
 				focusableItems.push(itemsByPriority[i]);
@@ -585,9 +590,9 @@ class ShellBar extends UI5Element {
 		});
 
 		const focusedItem = items.filter(item => {
-			return (item.classes.indexOf("sapWCShellBarUnsetIcon") === -1)
-				&& (item.classes.indexOf("sapWCShellBarOverflowIcon") === -1)
-				&& (item.classes.indexOf("sapWCShellBarHiddenIcon") === -1);
+			return (item.classes.indexOf("ui5-shellbar-invisible-button") === -1)
+				&& (item.classes.indexOf("ui5-shellbar-overflow-button") === -1)
+				&& (item.classes.indexOf("ui5-shellbar-hidden-button") === -1);
 		})[0];
 
 		return focusedItem;
@@ -605,8 +610,8 @@ class ShellBar extends UI5Element {
 	}
 
 	_toggleActionPopover() {
-		const popover = this.shadowRoot.querySelector(".sapWCShellBarOverflowPopover");
-		const overflowButton = this.shadowRoot.querySelector(".sapWCShellBarOverflowIcon");
+		const popover = this.shadowRoot.querySelector(".ui5-shellbar-overflow-popover");
+		const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
 		popover.openBy(overflowButton);
 	}
 
@@ -621,10 +626,10 @@ class ShellBar extends UI5Element {
 	}
 
 	_handleEscape() {
-		const searchButton = this.shadowRoot.querySelector(".sapWCShellBarSearchIcon");
+		const searchButton = this.shadowRoot.querySelector(".ui5-shellbar-search-button");
 
-		if (this._showBlockLayer) {
-			this._showBlockLayer = false;
+		if (this.showBlockLayer) {
+			this.showBlockLayer = false;
 
 			setTimeout(() => {
 				searchButton.focus();
@@ -643,7 +648,7 @@ class ShellBar extends UI5Element {
 	_handleSearchIconPress(event) {
 		const searchField = this.shadowRoot.querySelector(`#${this._id}-searchfield-wrapper`);
 		const triggeredByOverflow = event.target.tagName.toLowerCase() === "ui5-li";
-		const overflowButton = this.shadowRoot.querySelector(".sapWCShellBarOverflowIcon");
+		const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
 		const overflowButtonRect = overflowButton.getBoundingClientRect();
 		const isRTL = getRTL();
 		let right = "";
@@ -658,7 +663,7 @@ class ShellBar extends UI5Element {
 			"right": right,
 		});
 
-		this._showBlockLayer = true;
+		this.showBlockLayer = true;
 
 		setTimeout(() => {
 			const inputSlot = searchField.children[0];
@@ -671,7 +676,7 @@ class ShellBar extends UI5Element {
 
 	_handleCustomActionPress(event) {
 		const refItemId = event.target.getAttribute("data-ui5-external-action-item-id");
-		const actions = this.shadowRoot.querySelectorAll(".sapWCShellBarItemCustomAction");
+		const actions = this.shadowRoot.querySelectorAll(".ui5-shellbar-custom-item");
 		let elementIndex = [].indexOf.apply(actions, [event.target]);
 
 		if (this.searchField.length) {
@@ -697,19 +702,19 @@ class ShellBar extends UI5Element {
 
 	_handleNotificationsPress(event) {
 		this.fireEvent("notificationsClick", {
-			targetRef: this.shadowRoot.querySelector(".sapWCShellBarBellIcon"),
+			targetRef: this.shadowRoot.querySelector(".ui5-shellbar-bell-button"),
 		});
 	}
 
 	_handleProfilePress(event) {
 		this.fireEvent("profileClick", {
-			targetRef: this.shadowRoot.querySelector(".sapWCShellBarImageButton"),
+			targetRef: this.shadowRoot.querySelector(".ui5-shellbar-image-button"),
 		});
 	}
 
 	_handleProductSwitchPress(event) {
 		this.fireEvent("productSwitchClick", {
-			targetRef: this.shadowRoot.querySelector(".sapWCShellBarIconProductSwitch"),
+			targetRef: this.shadowRoot.querySelector(".ui5-shellbar-button-product-switch"),
 		});
 	}
 
@@ -724,7 +729,7 @@ class ShellBar extends UI5Element {
 			{
 				src: "sap-icon://search",
 				text: "Search",
-				classes: `${this.searchField.length ? "" : "sapWCShellBarUnsetIcon"} sapWCShellBarSearchIcon sapWCShellBarIconButton`,
+				classes: `${this.searchField.length ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-search-button ui5-shellbar-button`,
 				priority: 4,
 				domOrder: this.searchField.length ? (++domOrder) : -1,
 				style: `order: ${this.searchField.length ? 1 : -10}`,
@@ -738,7 +743,7 @@ class ShellBar extends UI5Element {
 					id: item._id,
 					refItemid: item._id,
 					text: item.text,
-					classes: "sapWCShellBarItemCustomAction sapWCShellBarIconButton",
+					classes: "ui5-shellbar-custom-item ui5-shellbar-button",
 					priority: 1,
 					domOrder: (++domOrder),
 					style: `order: ${2}`,
@@ -750,7 +755,7 @@ class ShellBar extends UI5Element {
 			{
 				src: "sap-icon://bell",
 				text: "Notifications",
-				classes: `${this.showNotifications ? "" : "sapWCShellBarUnsetIcon"} sapWCShellBarBellIcon sapWCShellBarIconButton`,
+				classes: `${this.showNotifications ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-bell-button ui5-shellbar-button`,
 				priority: 3,
 				style: `order: ${this.showNotifications ? 3 : -10}`,
 				id: `${this._id}-item-${2}`,
@@ -762,7 +767,7 @@ class ShellBar extends UI5Element {
 			{
 				src: "sap-icon://overflow",
 				text: "Overflow",
-				classes: `${showOverflowButton ? "" : "sapWCShellBarHiddenIcon"} sapWCOverflowButtonShown sapWCShellBarOverflowIcon sapWCShellBarIconButton`,
+				classes: `${showOverflowButton ? "" : "ui5-shellbar-hidden-button"} ui5-shellbar-overflow-button-shown ui5-shellbar-overflow-button ui5-shellbar-button`,
 				priority: 5,
 				order: 4,
 				style: `order: ${showOverflowButton ? 4 : -1}`,
@@ -774,9 +779,9 @@ class ShellBar extends UI5Element {
 			},
 			{
 				text: "Person",
-				classes: `${this.profile ? "" : "sapWCShellBarUnsetIcon"} sapWCShellBarImageButton sapWCShellBarIconButton`,
+				classes: `${this.profile ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-image-button ui5-shellbar-button`,
 				priority: 4,
-				subclasses: "sapWCShellBarImageButtonImage",
+				subclasses: "ui5-shellbar-image-buttonImage",
 				style: `order: ${this.profile ? 5 : -10};`,
 				subStyles: `${this.profile ? `background-image: url(${this.profile})` : ""}`,
 				id: `${this._id}-item-${3}`,
@@ -788,7 +793,7 @@ class ShellBar extends UI5Element {
 			{
 				src: "sap-icon://grid",
 				text: "Product Switch",
-				classes: `${this.showProductSwitch ? "" : "sapWCShellBarUnsetIcon"} sapWCShellBarIconButton sapWCShellBarIconProductSwitch`,
+				classes: `${this.showProductSwitch ? "" : "ui5-shellbar-invisible-button"} ui5-shellbar-button ui5-shellbar-button-product-switch`,
 				priority: 2,
 				style: `order: ${this.showProductSwitch ? 6 : -10}`,
 				id: `${this._id}-item-${4}`,
@@ -804,42 +809,12 @@ class ShellBar extends UI5Element {
 	get classes() {
 		return {
 			wrapper: {
-				"sapWCShellBarWrapper": true,
-				[`sapWCShellBarSize${this._breakpointSize}`]: true,
-				"sapWCShellBarHasSearchField": this.searchField.length,
-				"sapWCShellBarBlockLayerShown": this._showBlockLayer,
-				"sapWCShellBarHasNotifications": !!this.notificationCount,
-			},
-			leftContainer: {
-				"sapWCShellBarOverflowContainer": true,
-				"sapWCShellBarOverflowContainerLeft": true,
-			},
-			logo: {
-				"sapWCShellBarLogo": true,
+				"ui5-shellbar-root": true,
+				"ui5-shellbar-with-searchfield": this.searchField.length,
 			},
 			button: {
-				"sapWCShellBarMenuButtonNoTitle": !this.primaryTitle,
-				"sapWCShellBarMenuButtonNoLogo": !this.logo,
-				"sapWCShellBarMenuButtonMerged": this._breakpointSize === "S",
-				"sapWCShellBarMenuButtonInteractive": !!this.menuItems.length,
-				"sapWCShellBarMenuButton": true,
-			},
-			buttonTitle: {
-				"sapWCShellBarMenuButtonTitle": true,
-			},
-			secondaryTitle: {
-				"sapWCShellBarSecondaryTitle": true,
-			},
-			arrow: {
-				"sapWCShellBarMenuButtonArrow": true,
-			},
-			searchField: {
-				"sapWCShellBarSearchField": true,
-				"sapWCShellBarSearchFieldHidden": !this._showBlockLayer,
-			},
-			blockLayer: {
-				"sapWCShellBarBlockLayer": true,
-				"sapWCShellBarBlockLayerHidden": !this._showBlockLayer,
+				"ui5-shellbar-menu-button--interactive": !!this.menuItems.length,
+				"ui5-shellbar-menu-button": true,
 			},
 		};
 	}
@@ -854,7 +829,7 @@ class ShellBar extends UI5Element {
 	}
 
 	get interactiveLogo() {
-		return this._breakpointSize === "S";
+		return this.breakpointSize === "S";
 	}
 
 	get showArrowDown() {
diff --git a/packages/main/src/themes/ShellBar.css b/packages/main/src/themes/ShellBar.css
index 62238f90d617..dd8dde2def78 100644
--- a/packages/main/src/themes/ShellBar.css
+++ b/packages/main/src/themes/ShellBar.css
@@ -1,9 +1,9 @@
-:host(ui5-shellbar:not([hidden])) {
+:host(:not([hidden])) {
 	display: inline-block;
 	width: 100%;
 }
 
-.sapWCShellBarWrapper {
+.ui5-shellbar-root {
 	position: relative;
 	display: flex;
 	justify-content: space-between;
@@ -16,9 +16,25 @@
 	box-sizing: border-box;
 }
 
-.sapWCShellBarMenuButton,
-.sapWCShellBarIconButton,
-.sapWCShellBarImageButton,
+.ui5-shellbar-menu-button,
+.ui5-shellbar-button,
+.ui5-shellbar-image-button {
+	height: 2.25rem;
+	padding: 0;
+	margin-left: 0.5rem;
+	border: none;
+	outline: none;
+	background: transparent;
+	color: var(--sapUiShellTextColor);
+	box-sizing: border-box;
+	cursor: pointer;
+	border-radius: 0.25rem;
+	position: relative;
+	font-size: 0.75rem;
+	font-weight: bold;
+}
+
+/* IE does not apply all selectors if separated by comma and 1 is invalid; TODOs - Keep that in sync and recheck after Shady CSS */
 ::slotted(ui5-icon) {
 	height: 2.25rem;
 	padding: 0;
@@ -35,22 +51,22 @@
 	font-weight: bold;
 }
 
-.sapWCShellBarMenuButton.sapWCShellBarMenuButtonInteractive:hover,
-.sapWCShellBarIconButton:hover,
-.sapWCShellBarImageButton:hover {
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover,
+.ui5-shellbar-button:hover,
+.ui5-shellbar-image-button:hover {
 	background: var(--sapUiShellHoverBackground);
 }
 
-.sapWCShellBarMenuButton.sapWCShellBarMenuButtonInteractive:active,
-.sapWCShellBarIconButton:active,
-.sapWCShellBarImageButton:active {
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:active,
+.ui5-shellbar-button:active,
+.ui5-shellbar-image-button:active {
 	background: var(--sapUiShellActiveBackground);
 	color: var(--sapUiShellActiveTextColor);
 }
 
-.sapWCShellBarMenuButton.sapWCShellBarMenuButtonInteractive:focus::after,
-.sapWCShellBarIconButton:focus::after,
-.sapWCShellBarImageButton:focus::after {
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:focus::after,
+.ui5-shellbar-button:focus::after,
+.ui5-shellbar-image-button:focus::after {
 	content: "";
 	position: absolute;
 	width: calc(100% - 0.375rem);
@@ -62,11 +78,11 @@
 	z-index: 1;
 }
 
-.sapWCShellBarMenuButton.sapWCShellBarMenuButtonInteractive::-moz-focus-inner {
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive::-moz-focus-inner {
 	border: none;
 }
 
-.sapWCShellBarMenuButtonTitle {
+.ui5-shellbar-menu-button-title {
 	display: inline-block;
 	font-family: var(--sapUiFontFamily);
 	margin: 0;
@@ -77,20 +93,20 @@
 	flex: auto;
 }
 
-.sapWCShellBarMenuButtonNoTitle {
+:host(:not([primary-title])) .ui5-shellbar-menu-button {
 	min-width: 2.25rem;
 	justify-content: center;
 }
 
-.sapWCShellBarMenuButtonNoTitle span {
+:host(:not([primary-title])) .ui5-shellbar-menu-button span {
 	margin-left: 0;
 }
 
-.sapWCShellBarMenuButtonMerged span {
+:host([breakpoint-size="S"]) .ui5-shellbar-menu-button span {
 	margin-left: .5rem;
 }
 
-.sapWCShellBarSecondaryTitle {
+.ui5-shellbar-secondary-title {
 	display: inline-block;
 	margin: 0 0.5rem;
 	font-size: var(--sapMFontSmallSize);
@@ -102,7 +118,7 @@
 	overflow: hidden;
 }
 
-.sapWCShellBarMenuButtonInteractive .sapWCShellBarMenuButtonArrow {
+.ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow {
 	display: inline-block;
 	margin-left: 0.5rem;
 	width: 10px;
@@ -115,7 +131,7 @@
 	border-top: 5px solid var(--sapUiShellTextColor);
 }
 
-.sapWCShellBarOverflowContainer {
+.ui5-shellbar-overflow-container {
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -123,18 +139,7 @@
 	overflow: hidden;
 }
 
-.sapWCShellBarCoPilot {
-	width: 50px;
-	height: 30px;
-}
-
-.sapWCShellBarCoPilotBehindLayer {
-	animation: Behind_layer 9000ms linear;
-	animation-iteration-count: infinite;
-	transform-origin: center;
-}
-
-.sapWCShellBarOverflowContainerMiddle {
+.ui5-shellbar-overflow-container-middle {
 	align-self: center;
 	height: 2.5rem;
 	width: 3rem;
@@ -147,62 +152,56 @@
 	}
 }
 
-.sapWCShellBarCoPilotTopLayer {
-	animation: Top_layer 9000ms linear;
-	animation-iteration-count: infinite;
-	transform-origin: center;
-}
-
 @keyframes Top_layer {
 	0% {
 		transform: rotate(-360deg);
 	}
 }
 
-.sapWCShellBarSizeS {
+:host([breakpoint-size="S"]) .ui5-shellbar-root {
 	padding: 0.25rem 1rem;
 }
 
-.sapWCShellBarSizeS ::slotted(ui5-icon) {
+:host([breakpoint-size="S"]) ::slotted(ui5-icon) {
 	margin-right: 0;
 }
 
-.sapWCShellBarSizeS .sapWCShellBarSearchField {
+:host([breakpoint-size="S"]) .ui5-shellbar-search-field {
 	width: 200px;
 }
 
-.sapWCShellBarSizeM {
+:host([breakpoint-size="M"]) .ui5-shellbar-root {
 	padding: 0.25rem 2rem;
 }
 
-.sapWCShellBarSizeL {
+:host([breakpoint-size="L"]) .ui5-shellbar-root {
 	padding: 0.25rem 2rem;
 }
 
-.sapWCShellBarSizeXL {
+:host([breakpoint-size="XL"]) .ui5-shellbar-root {
 	padding: 0.25rem 3rem;
 }
 
-.sapWCShellBarSizeXXL {
+:host([breakpoint-size="XXL"]) .ui5-shellbar-root {
 	padding: 0.25rem 3rem;
 }
 
-.sapWCShellBarLogo {
+.ui5-shellbar-logo {
 	cursor: pointer;
 	height: 1.675rem;
 }
 
-.sapWCShellBarLogo:not([src]) {
+.ui5-shellbar-logo:not([src]) {
 	display: none;
 }
 
-.sapWCShellBarIconButton {
+.ui5-shellbar-button {
 	min-width: 2.25rem;
 	font-size: 1rem;
 	padding: .625rem;
 }
 
-.sapWCShellBarImageButtonImage {
+.ui5-shellbar-image-buttonImage {
 	border-radius: 50%;
 	width: 1.75rem;
 	height: 1.75rem;
@@ -210,7 +209,7 @@
 	background-size: cover;
 }
 
-.sapWCShellBarImageButton {
+.ui5-shellbar-image-button {
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -220,14 +219,14 @@
 	padding: 0;
 }
 
-.sapWCShellBarOverflowContainerLeft {
+.ui5-shellbar-overflow-container-left {
 	flex-basis: 50%;
 	max-width: calc(50% - 1.5rem);
 	justify-content: flex-start;
 	margin-right: 0.5rem;
 }
 
-.sapWCShellBarMenuButton {
+.ui5-shellbar-menu-button {
 	white-space: nowrap;
 	overflow: hidden;
 	display: flex;
@@ -240,7 +239,7 @@
 	user-select: text;
 }
 
-.sapWCShellBarMenuButton.sapWCShellBarMenuButtonInteractive {
+.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive {
 	-webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -248,11 +247,11 @@
 	cursor: pointer;
 }
 
-.sapWCShellBarMenuButton.sapWCShellBarMenuButtonNoLogo {
+:host(:not([logo])) .ui5-shellbar-menu-button {
 	margin-left: 0;
 }
 
-.sapWCShellBarOverflowContainerRight {
+.ui5-shellbar-overflow-container-right {
 	display: block;
 	overflow: hidden;
 	box-sizing: border-box;
@@ -261,37 +260,37 @@
 	flex: 1;
 }
 
-.sapWCShellBarOverflowContainerRight .sapWCShellBarOverflowContainerRightChild {
+.ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child {
 	display: flex;
 	float: right;
 }
 
-.sapWCShellBarOverflowIcon {
+.ui5-shellbar-overflow-button {
 	display: none;
 }
 
-.sapWCShellBarSizeM .sapWCShellBarSecondaryTitle {
+:host([breakpoint-size="M"]) .ui5-shellbar-secondary-title {
 	display: none;
 }
 
-.sapWCShellBarSizeS .sapWCShellBarSecondaryTitle {
+:host([breakpoint-size="S"]) .ui5-shellbar-secondary-title {
 	display: none;
 }
 
-.sapWCShellBarSizeS .sapWCShellBarMenuButtonTitle {
+:host([breakpoint-size="S"]) .ui5-shellbar-menu-button-title {
 	display: none;
 }
 
-.sapWCShellBarSizeS .sapWCShellBarOverflowContainerRight {
+:host([breakpoint-size="S"]) .ui5-shellbar-overflow-container-right {
 	margin-left: 0;
 }
 
-.sapWCOverflowButtonShown {
+.ui5-shellbar-overflow-button-shown {
 	display: inline-block;
 }
 
-.sapWCShellBarHiddenIcon,
-.sapWCShellBarUnsetIcon {
+.ui5-shellbar-hidden-button,
+.ui5-shellbar-invisible-button {
 	visibility: hidden;
 }
 
@@ -300,24 +299,24 @@
 	height: 30px;
 }
 
-.sapWCShellBarSearchFieldHidden {
+:host(:not([show-block-layer])) .ui5-shellbar-search-field {
 	display: none;
 }
 
 
-.sapWCShellBarHasSearchField.sapWCShellBarSizeL .sapWCShellBarOverflowContainerRight {
+:host([breakpoint-size="L"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right {
 	margin-left: 1rem;
 }
 
-.sapWCShellBarHasSearchField.sapWCShellBarSizeXL .sapWCShellBarOverflowContainerRight {
+:host([breakpoint-size="XL"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right {
 	margin-left: 1rem;
 }
 
-.sapWCShellBarHasNotifications .sapWCShellBarBellIcon {
+:host(:not([notification-count])) .ui5-shellbar-bell-button {
 	position: relative;
 }
 
-.sapWCShellBarHasNotifications .sapWCShellBarBellIcon::before {
+:host([notification-count]) .ui5-shellbar-bell-button::before {
 	content: attr(data-ui5-notification-count);
 	position: absolute;
 	width: auto;
@@ -338,11 +337,11 @@
 	box-sizing: border-box;
 }
 
-.sapWCShellBarMenuButton {
+.ui5-shellbar-menu-button {
 	margin-left: 0.5rem;
 }
 
-.sapWCShellBarBlockLayer {
+.ui5-shellbar-block-layer {
 	top: 0;
 	left: 0;
 	right: 0;
@@ -352,11 +351,11 @@
 	z-index: 100;
 }
 
-.sapWCShellBarBlockLayerHidden {
+:host(:not([show-block-layer])) .ui5-shellbar-block-layer {
 	display: none;
 }
 
-.sapWCShellBarSearchField {
+.ui5-shellbar-search-field {
 	z-index: 101;
 	position: absolute;
 	width: 240px;
@@ -364,78 +363,75 @@
 	height: 2.25rem;
 }
 
-:host ::slotted(ui5-input) {
+::slotted(ui5-input) {
 	background-color: var(--sapUiShellColor);
 	border: 1px solid var(--sapUiShellBorderColorLighten30);
 	color: var(--sapUiShellTextColor);
 	height: 100%;
 }
 
-:host ::slotted(ui5-input:hover) {
+::slotted(ui5-input:hover) {
 	background: var(--sapUiShellHoverBackground);
 	border: 1px solid var(--sapUiShellBorderColorLighten30);
 }
 
-:host ::slotted(ui5-input[focused]) {
+::slotted(ui5-input[focused]) {
 	outline: 1px dotted var(--sapUiContentContrastFocusColor);
 }
 
-.sapWCShellBarBlockLayerShown .sapWCShellBarSearchIcon {
+:host([show-block-layer]) .ui5-shellbar-search-button {
 	background: var(--sapUiHighlight);
 	color: var(--sapUiShellActiveTextColor);
 	border-top-left-radius: 0;
 	border-bottom-left-radius: 0;
 }
 
-.sapWCShellBarCoPilotPlaceholder {
+.ui5-shellbar-co-pilot-placeholder {
 	width: 2.75rem;
 	height: 2.75rem;
 }
 
-.sapWCShellBarCoPilotMiddle {
+.ui5-shellbar-co-pilot-circle {
 	fill: var(--sapUiShellColor);
 }
 
-.sapWCShellBarCoPilotWrapper {
-	background: var(--sapUiShellColor);
-}
-
 [dir="rtl"] ::slotted(ui5-icon) {
 	margin-left: 0.5rem;
 	margin-right: 0;
 }
 
-[dir="rtl"] .sapWCShellBarMenuButton {
+[dir="rtl"] .ui5-shellbar-menu-button {
 	margin-right: 0.5rem;
 	margin-left: 0;
 }
 
-[dir="rtl"] .sapWCShellBarMenuButtonInteractive .sapWCShellBarMenuButtonArrow {
+[dir="rtl"] .ui5-shellbar-menu-button--interactive .ui5-shellbar-menu-button-arrow {
 	margin-right: .5rem;
 	margin-left: 0;
 }
 
-[dir="rtl"] .sapWCShellBarOverflowContainerRight {
+[dir="rtl"] .ui5-shellbar-overflow-container-right {
 	margin-right: 8rem;
 	margin-left: 0;
 }
 
-[dir="rtl"] .sapWCShellBarOverflowContainerRight .sapWCShellBarOverflowContainerRightChild {
+[dir="rtl"] .ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child {
 	float: left;
 }
 
-[dir="rtl"] .sapWCShellBarSizeS .sapWCShellBarOverflowContainerRight {
+:host([breakpoint-size="S"]) [dir="rtl"] .ui5-shellbar-overflow-container-right {
 	margin-right: 0;
 }
 
 ::slotted(ui5-icon) {
-	width: 2.25rem;
-	height: 2.25rem;
+	width: .75rem;
+	height: .75rem;
 	margin-right: 0.5rem;
 	margin-left: 0;
-	display: flex;
+	padding: .75rem;
 	justify-content: center;
 	align-items: center;
+	box-sizing: content-box;
 }
 
 ::slotted(ui5-icon:hover) {
@@ -459,13 +455,132 @@
 	z-index: 1;
 }
 
-/* Remove that once ShadyCSS is adopted */
+/* Remove that once ShadyCSS is adopoted */
 
 ui5-shellbar:not([hidden]) {
 	display: inline-block;
 	width: 100%;
 }
 
+ui5-shellbar ui5-icon {
+	height: 2.25rem;
+	padding: 0;
+	margin-left: 0.5rem;
+	border: none;
+	outline: none;
+	background: transparent;
+	color: var(--sapUiShellTextColor);
+	box-sizing: border-box;
+	cursor: pointer;
+	border-radius: 0.25rem;
+	position: relative;
+	font-size: 0.75rem;
+	font-weight: bold;
+}
+
+ui5-shellbar:not([primary-title]) .ui5-shellbar-menu-button {
+	min-width: 2.25rem;
+	justify-content: center;
+}
+
+ui5-shellbar:not([primary-title]) .ui5-shellbar-menu-button span {
+	margin-left: 0;
+}
+
+ui5-shellbar[breakpoint-size="S"] .ui5-shellbar-menu-button span {
+	margin-left: .5rem;
+}
+
+ui5-shellbar[breakpoint-size="S"] .ui5-shellbar-root {
+	padding: 0.25rem 1rem;
+}
+
+ui5-shellbar[breakpoint-size="S"] ui5-icon {
+	margin-right: 0;
+}
+
+ui5-shellbar[breakpoint-size="S"] .ui5-shellbar-search-field {
+	width: 200px;
+}
+
+ui5-shellbar[breakpoint-size="M"] .ui5-shellbar-root {
+	padding: 0.25rem 2rem;
+}
+
+ui5-shellbar[breakpoint-size="L"] .ui5-shellbar-root {
+	padding: 0.25rem 2rem;
+}
+
+ui5-shellbar[breakpoint-size="XL"] .ui5-shellbar-root {
+	padding: 0.25rem 3rem;
+}
+
+ui5-shellbar[breakpoint-size="XXL"] .ui5-shellbar-root {
+	padding: 0.25rem 3rem;
+}
+
+ui5-shellbar:not([logo]) .ui5-shellbar-menu-button {
+	margin-left: 0;
+}
+
+ui5-shellbar[breakpoint-size="M"] .ui5-shellbar-secondary-title {
+	display: none;
+}
+
+ui5-shellbar[breakpoint-size="S"] .ui5-shellbar-secondary-title {
+	display: none;
+}
+
+ui5-shellbar[breakpoint-size="S"] .ui5-shellbar-menu-button-title {
+	display: none;
+}
+
+ui5-shellbar[breakpoint-size="S"] .ui5-shellbar-overflow-container-right {
+	margin-left: 0;
+}
+
+ui5-shellbar:not([show-block-layer]) .ui5-shellbar-search-field {
+	display: none;
+}
+
+
+ui5-shellbar[breakpoint-size="L"] .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right {
+	margin-left: 1rem;
+}
+
+ui5-shellbar[breakpoint-size="XL"] .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right {
+	margin-left: 1rem;
+}
+
+ui5-shellbar:not([notification-count]) .ui5-shellbar-bell-button {
+	position: relative;
+}
+
+ui5-shellbar[notification-count] .ui5-shellbar-bell-button::before {
+	content: attr(data-ui5-notification-count);
+	position: absolute;
+	width: auto;
+	height: 1rem;
+	min-width: 1rem;
+	background: var(--sapUiContentBadgeBackground);
+	color: var(--sapUiShellTextColor);
+	top: 0.125rem;
+	left: 1.5rem;
+	padding: .25rem;
+	border-radius: 1rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: var(--sapMFontSmallSize);
+	font-family: var(--sapUiFontFamily);
+	z-index: 2;
+	box-sizing: border-box;
+}
+
+ui5-shellbar:not([show-block-layer]) .ui5-shellbar-block-layer {
+	display: none;
+}
+
 ui5-shellbar ui5-input {
 	background-color: var(--sapUiShellColor);
 	border: 1px solid var(--sapUiShellBorderColorLighten30);
@@ -480,4 +595,47 @@ ui5-shellbar ui5-input:hover {
 
 ui5-shellbar ui5-input[focused] {
 	outline: 1px dotted var(--sapUiContentContrastFocusColor);
+}
+
+ui5-shellbar [show-block-layer] .ui5-shellbar-search-button {
+	background: var(--sapUiHighlight);
+	color: var(--sapUiShellActiveTextColor);
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
+ui5-shellbar [breakpoint-size="S"] [dir="rtl"] .ui5-shellbar-overflow-container-right {
+	margin-right: 0;
+}
+
+ui5-shellbar ui5-icon {
+	width: .75rem;
+	height: .75rem;
+	margin-right: 0.5rem;
+	margin-left: 0;
+	padding: .75rem;
+	justify-content: center;
+	align-items: center;
+	box-sizing: content-box;
+}
+
+ui5-shellbar ui5-icon:hover {
+	background: var(--sapUiShellHoverBackground);
+}
+
+ui5-shellbar ui5-icon:active {
+	background: var(--sapUiShellActiveBackground);
+	color: var(--sapUiShellActiveTextColor);
+}
+
+ui5-shellbar ui5-icon:focus::after {
+	content: "";
+	position: absolute;
+	width: calc(100% - 0.375rem);
+	height: calc(100% - 0.375rem);
+	border: 1px dotted var(--sapUiContentContrastFocusColor);
+	pointer-events: none;
+	left: 2px;
+	top: 2px;
+	z-index: 1;
 }
\ No newline at end of file
diff --git a/packages/main/test/specs/ShellBar.spec.js b/packages/main/test/specs/ShellBar.spec.js
index 3bfa28e881c6..a068644e8434 100644
--- a/packages/main/test/specs/ShellBar.spec.js
+++ b/packages/main/test/specs/ShellBar.spec.js
@@ -9,20 +9,19 @@ describe("Component Behaviour", () => {
 
 			browser.setWindowSize(1920, 1080);
 
-			const shellbarWrapper = browser.findElementDeep("#shellbar >>> div");
-			const overflowButton = browser.findElementDeep("#shellbar >>> .sapWCShellBarOverflowIcon");
+			const shellbar = browser.findElementDeep("#shellbar");
+			const overflowButton = browser.findElementDeep("#shellbar >>> .ui5-shellbar-overflow-button");
 			const backButton = browser.findElementDeep("#shellbar ui5-icon");
-			const primaryTitle = browser.findElementDeep("#shellbar >>> .sapWCShellBarMenuButtonTitle");
-			const secondaryTitle = browser.findElementDeep("#shellbar >>> .sapWCShellBarSecondaryTitle");
-			const searchIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarSearchIcon");
-			const customActionIcon1 = browser.findElementDeep("#shellbar >>> .sapWCShellBarItemCustomAction:first-child");
-			const customActionIcon2 = browser.findElementDeep("#shellbar >>> .sapWCShellBarItemCustomAction:nth-child(2)");
-			const notificationsIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarBellIcon");
-			const profileIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarImageButton");
-			const productSwitchIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarIconProductSwitch");
-			const html = shellbarWrapper.getHTML();
-
-			assert.strictEqual(html.indexOf("sapWCShellBarSizeXXL") !== -1, true, "XXL Breakpoint class should be set");
+			const primaryTitle = browser.findElementDeep("#shellbar >>> .ui5-shellbar-menu-button-title");
+			const secondaryTitle = browser.findElementDeep("#shellbar >>> .ui5-shellbar-secondary-title");
+			const searchIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-search-button");
+			const customActionIcon1 = browser.findElementDeep("#shellbar >>> .ui5-shellbar-custom-item:first-child");
+			const customActionIcon2 = browser.findElementDeep("#shellbar >>> .ui5-shellbar-custom-item:nth-child(2)");
+			const notificationsIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-bell-button");
+			const profileIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-image-button");
+			const productSwitchIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-button-product-switch");
+
+			assert.strictEqual(shellbar.getProperty("breakpointSize") === "XXL", true, "XXL Breakpoint class should be set");
 			assert.strictEqual(overflowButton.isDisplayed(), false, "Overflow button should be hidden");
 			assert.strictEqual(backButton.isDisplayed(), true, "Back icon is visible");
 			assert.strictEqual(primaryTitle.isDisplayed(), true, "Primary title should be visible");
@@ -39,28 +38,27 @@ describe("Component Behaviour", () => {
 			browser.setWindowSize(1820, 1080);
 
 			const shellbarWrapper = browser.findElementDeep("#shellbar >>> div");
-			const html = shellbarWrapper.getHTML();
+			const shellbar = browser.findElementDeep("#shellbar");
 
-			assert.strictEqual(html.indexOf("sapWCShellBarSizeXL") !== -1, true, "XL Breakpoint class should be set");
+			assert.strictEqual(shellbar.getProperty("breakpointSize") === "XL", true, "XL Breakpoint class should be set");
 		});
 
 		it("tests L Breakpoint 1400px", () => {
 			browser.setWindowSize(1400, 1080);
 
-			const shellbarWrapper = browser.findElementDeep("#shellbar >>> div");
-			const overflowButton = browser.findElementDeep("#shellbar >>> .sapWCShellBarOverflowIcon");
+			const shellbar = browser.findElementDeep("#shellbar");			
+			const overflowButton = browser.findElementDeep("#shellbar >>> .ui5-shellbar-overflow-button");
 			const backButton = browser.findElementDeep("#shellbar ui5-icon");
-			const primaryTitle = browser.findElementDeep("#shellbar >>> .sapWCShellBarMenuButtonTitle");
-			const secondaryTitle = browser.findElementDeep("#shellbar >>> .sapWCShellBarSecondaryTitle");
-			const searchIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarSearchIcon");
-			const customActionIcon1 = browser.findElementDeep("#shellbar >>> .sapWCShellBarItemCustomAction:first-child");
-			const customActionIcon2 = browser.findElementDeep("#shellbar >>> .sapWCShellBarItemCustomAction:nth-child(2)");
-			const notificationsIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarBellIcon");
-			const profileIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarImageButton");
-			const productSwitchIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarIconProductSwitch");
-			const html = shellbarWrapper.getHTML();
-
-			assert.strictEqual(html.indexOf("sapWCShellBarSizeL") !== -1, true, "L Breakpoint class should be set");
+			const primaryTitle = browser.findElementDeep("#shellbar >>> .ui5-shellbar-menu-button-title");
+			const secondaryTitle = browser.findElementDeep("#shellbar >>> .ui5-shellbar-secondary-title");
+			const searchIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-search-button");
+			const customActionIcon1 = browser.findElementDeep("#shellbar >>> .ui5-shellbar-custom-item:first-child");
+			const customActionIcon2 = browser.findElementDeep("#shellbar >>> .ui5-shellbar-custom-item:nth-child(2)");
+			const notificationsIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-bell-button");
+			const profileIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-image-button");
+			const productSwitchIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-button-product-switch");
+
+			assert.strictEqual(shellbar.getProperty("breakpointSize") === "L", true, "L Breakpoint class should be set");
 			assert.strictEqual(overflowButton.isDisplayed(), false, "Overflow button should be hidden");
 			assert.strictEqual(backButton.isDisplayed(), true, "Back icon is visible");
 			assert.strictEqual(primaryTitle.isDisplayed(), true, "Primary title should be visible");
@@ -76,27 +74,27 @@ describe("Component Behaviour", () => {
 		it("tests M Breakpoint and overflow 870px", () => {
 			browser.setWindowSize(870, 1080);
 
+			const shellbar = browser.findElementDeep("#shellbar");
 			const shellbarWrapper = browser.findElementDeep("#shellbar >>> div");
-			const overflowButton = browser.findElementDeep("#shellbar >>> .sapWCShellBarOverflowIcon");
+			const overflowButton = browser.findElementDeep("#shellbar >>> .ui5-shellbar-overflow-button");
 			const backButton = browser.findElementDeep("#shellbar ui5-icon");
-			const primaryTitle = browser.findElementDeep("#shellbar >>> .sapWCShellBarMenuButtonTitle");
-			const secondaryTitle = browser.findElementDeep("#shellbar >>> .sapWCShellBarSecondaryTitle");
-			const searchIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarSearchIcon");
-			const customActionIcon1 = browser.findElementDeep("#shellbar >>> .sapWCShellBarItemCustomAction:first-child");
-			const customActionIcon2 = browser.findElementDeep("#shellbar >>> .sapWCShellBarItemCustomAction:nth-child(2)");
-			const notificationsIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarBellIcon");
-			const profileIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarImageButton");
-			const productSwitchIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarIconProductSwitch");
-			const overflowPopover = browser.findElementDeep("#shellbar >>> .sapWCShellBarOverflowPopover");
-			const overflowPopoverItem1 = browser.findElementDeep("#shellbar >>> .sapWCShellBarOverflowPopover ui5-li:first-child");
-			const overflowPopoverItem2 = browser.findElementDeep("#shellbar >>> .sapWCShellBarOverflowPopover ui5-li:nth-child(2)");
-			const html = shellbarWrapper.getHTML();
+			const primaryTitle = browser.findElementDeep("#shellbar >>> .ui5-shellbar-menu-button-title");
+			const secondaryTitle = browser.findElementDeep("#shellbar >>> .ui5-shellbar-secondary-title");
+			const searchIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-search-button");
+			const customActionIcon1 = browser.findElementDeep("#shellbar >>> .ui5-shellbar-custom-item:first-child");
+			const customActionIcon2 = browser.findElementDeep("#shellbar >>> .ui5-shellbar-custom-item:nth-child(2)");
+			const notificationsIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-bell-button");
+			const profileIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-image-button");
+			const productSwitchIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-button-product-switch");
+			const overflowPopover = browser.findElementDeep("#shellbar >>> .ui5-shellbar-overflow-popover");
+			const overflowPopoverItem1 = browser.findElementDeep("#shellbar >>> .ui5-shellbar-overflow-popover ui5-li:first-child");
+			const overflowPopoverItem2 = browser.findElementDeep("#shellbar >>> .ui5-shellbar-overflow-popover ui5-li:nth-child(2)");
 
 			overflowButton.click();
 
 			const listItemsCount = overflowPopover.getHTML().split("</ui5-li>").length - 1;
 
-			assert.strictEqual(html.indexOf("sapWCShellBarSizeM") !== -1, true, "M Breakpoint class should be set");
+			assert.strictEqual(shellbar.getProperty("breakpointSize") === "M", true, "M Breakpoint class should be set");
 			assert.strictEqual(overflowButton.isDisplayed(), true, "Overflow button should be visible");
 			assert.strictEqual(backButton.isDisplayed(), true, "Back icon is visible");
 			assert.strictEqual(primaryTitle.isDisplayed(), true, "Primary title should be visible");
@@ -117,12 +115,11 @@ describe("Component Behaviour", () => {
 		it("tests M Breakpoint and overflow 780px", () => {
 			browser.setWindowSize(780, 1080);
 
-			const shellbarWrapper = browser.findElementDeep("#shellbar >>> div");
-			const html = shellbarWrapper.getHTML();
-			const productSwitchIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarIconProductSwitch");
-			const overflowPopover = browser.findElementDeep("#shellbar >>> .sapWCShellBarOverflowPopover");
+			const shellbar = browser.findElementDeep("#shellbar");
+			const productSwitchIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-button-product-switch");
+			const overflowPopover = browser.findElementDeep("#shellbar >>> .ui5-shellbar-overflow-popover");
 
-			assert.strictEqual(html.indexOf("sapWCShellBarSizeM") !== -1, true, "M Breakpoint class should be set");
+			assert.strictEqual(shellbar.getProperty("breakpointSize") === "M", true, "M Breakpoint class should be set");
 
 			const listItemsCount = overflowPopover.getHTML().split("</ui5-li>").length - 1;
 
@@ -133,13 +130,12 @@ describe("Component Behaviour", () => {
 		it("tests M Breakpoint and overflow 710px", () => {
 			browser.setWindowSize(710, 1080);
 
-			const shellbarWrapper = browser.findElementDeep("#shellbar >>> div");
-			const html = shellbarWrapper.getHTML();
-			const productSwitchIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarIconProductSwitch");
-			const overflowPopover = browser.findElementDeep("#shellbar >>> .sapWCShellBarOverflowPopover");
-			const notificationsIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarBellIcon");
+			const shellbar = browser.findElementDeep("#shellbar");
+			const productSwitchIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-button-product-switch");
+			const overflowPopover = browser.findElementDeep("#shellbar >>> .ui5-shellbar-overflow-popover");
+			const notificationsIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-bell-button");
 
-			assert.strictEqual(html.indexOf("sapWCShellBarSizeM") !== -1, true, "M Breakpoint class should be set");
+			assert.strictEqual(shellbar.getProperty("breakpointSize") === "M", true, "M Breakpoint class should be set");
 
 			const listItemsCount = overflowPopover.getHTML().split("</ui5-li>").length - 1;
 
@@ -151,8 +147,8 @@ describe("Component Behaviour", () => {
 		it("tests M Breakpoint and overflow 570px", () => {
 			browser.setWindowSize(570, 1080);
 
-			const overflowButton = browser.findElementDeep("#shellbar >>> .sapWCShellBarOverflowIcon");
-			const searchIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarSearchIcon");
+			const overflowButton = browser.findElementDeep("#shellbar >>> .ui5-shellbar-overflow-button");
+			const searchIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-search-button");
 
 			assert.strictEqual(searchIcon.isDisplayed(), false, "Search should be hidden");
 			assert.strictEqual(overflowButton.isDisplayed(), true, "Overflow should be visible");
@@ -161,20 +157,19 @@ describe("Component Behaviour", () => {
 		it("tests S Breakpoint and overflow 510px", () => {
 			browser.setWindowSize(510, 1080);
 
-			const shellbarWrapper = browser.findElementDeep("#shellbar >>> div");
-			const html = shellbarWrapper.getHTML();
-			const overflowButton = browser.findElementDeep("#shellbar >>> .sapWCShellBarOverflowIcon");
+			const shellbar = browser.findElementDeep("#shellbar");
+			const overflowButton = browser.findElementDeep("#shellbar >>> .ui5-shellbar-overflow-button");
 			const backButton = browser.findElementDeep("#shellbar ui5-icon");
-			const primaryTitle = browser.findElementDeep("#shellbar >>> .sapWCShellBarMenuButtonTitle");
-			const secondaryTitle = browser.findElementDeep("#shellbar >>> .sapWCShellBarSecondaryTitle");
-			const searchIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarSearchIcon");
-			const notificationsIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarBellIcon");
-			const profileIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarImageButton");
-			const productSwitchIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarIconProductSwitch");
-			const overflowPopover = browser.findElementDeep("#shellbar >>> .sapWCShellBarOverflowPopover");
+			const primaryTitle = browser.findElementDeep("#shellbar >>> .ui5-shellbar-menu-button-title");
+			const secondaryTitle = browser.findElementDeep("#shellbar >>> .ui5-shellbar-secondary-title");
+			const searchIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-search-button");
+			const notificationsIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-bell-button");
+			const profileIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-image-button");
+			const productSwitchIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-button-product-switch");
+			const overflowPopover = browser.findElementDeep("#shellbar >>> .ui5-shellbar-overflow-popover");
 			const listItemsCount = overflowPopover.getHTML().split("</ui5-li>").length - 1;
 
-			assert.strictEqual(html.indexOf("sapWCShellBarSizeS") !== -1, true, "S Breakpoint class should be set");
+			assert.strictEqual(shellbar.getProperty("breakpointSize") === "S", true, "S Breakpoint class should be set");
 			assert.strictEqual(overflowButton.isDisplayed(), true, "Overflow button should be visible");
 			assert.strictEqual(backButton.isDisplayed(), true, "Back icon is visible");
 			assert.strictEqual(primaryTitle.isDisplayed(), false, "Primary title should be hidden");
@@ -195,15 +190,15 @@ describe("Component Behaviour", () => {
 			});
 
 			it("tests opening of menu", () => {
-				const primaryTitle = browser.findElementDeep("#shellbar >>> .sapWCShellBarMenuButton");
-				const menuPopover = browser.findElementDeep("#shellbar >>> .sapWCShellBarMenuPopover");
+				const primaryTitle = browser.findElementDeep("#shellbar >>> .ui5-shellbar-menu-button");
+				const menuPopover = browser.findElementDeep("#shellbar >>> .ui5-shellbar-menu-popover");
 	
 				primaryTitle.click();
 				assert.ok(menuPopover.isDisplayedInViewport(), "Menu should be shown");
 			});
 
 			it("tests notificationsPress event", () => {
-				const notificationsIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarBellIcon");
+				const notificationsIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-bell-button");
 				const input = browser.findElementDeep("#press-input");
 
 				notificationsIcon.click();
@@ -213,7 +208,7 @@ describe("Component Behaviour", () => {
 			});
 
 			it("tests profilePress event", () => {
-				const profileIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarImageButton");
+				const profileIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-image-button");
 				const input = browser.findElementDeep("#press-input");
 
 				profileIcon.click();
@@ -221,7 +216,7 @@ describe("Component Behaviour", () => {
 			});
 
 			it("tests productSwitchPress event", () => {
-				const productSwitchIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarIconProductSwitch");
+				const productSwitchIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-button-product-switch");
 				const input = browser.findElementDeep("#press-input");
 
 				productSwitchIcon.click();
@@ -229,7 +224,7 @@ describe("Component Behaviour", () => {
 			});
 
 			it("tests logoPress event", () => {
-				const logo = browser.findElementDeep("#shellbar >>> .sapWCShellBarLogo");
+				const logo = browser.findElementDeep("#shellbar >>> .ui5-shellbar-logo");
 				const input = browser.findElementDeep("#press-input");
 
 				logo.click();
@@ -245,7 +240,7 @@ describe("Component Behaviour", () => {
 			});
 
 			it("tests menuItemPress event", () => {
-				const primaryTitle = browser.findElementDeep("#shellbar >>> .sapWCShellBarMenuButton");
+				const primaryTitle = browser.findElementDeep("#shellbar >>> .ui5-shellbar-menu-button");
 				const firstMenuItem = browser.findElementDeep("#shellbar #menu-item-1");
 				const secondMenuItem = browser.findElementDeep("#shellbar #menu-item-2");
 				const input = browser.findElementDeep("#press-input");
@@ -261,9 +256,9 @@ describe("Component Behaviour", () => {
 			});
 
 			it("tests if searchfield appears when clicking on search icon", () => {
-				const searchIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarSearchIcon");
+				const searchIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-search-button");
 				const searchField = browser.findElementDeep("#shellbar ui5-input");
-				const blockLayer = browser.findElementDeep("#shellbar >>> .sapWCShellBarBlockLayer");
+				const blockLayer = browser.findElementDeep("#shellbar >>> .ui5-shellbar-block-layer");
 
 				assert.strictEqual(searchField.isDisplayed(), false, "Search is hidden by default");
 
@@ -282,15 +277,15 @@ describe("Component Behaviour", () => {
 			});
 
 			it("tests opening of menu", () => {
-				const primaryTitle = browser.findElementDeep("#shellbar >>> .sapWCShellBarMenuButton");
-				const menuPopover = browser.findElementDeep("#shellbar >>> .sapWCShellBarMenuPopover");
+				const primaryTitle = browser.findElementDeep("#shellbar >>> .ui5-shellbar-menu-button");
+				const menuPopover = browser.findElementDeep("#shellbar >>> .ui5-shellbar-menu-popover");
 	
 				primaryTitle.click();
 				assert.ok(menuPopover.isDisplayedInViewport(), "Menu should be shown");
 			});
 
 			it("tests notificationsPress event", () => {
-				const overflowButton = browser.findElementDeep("#shellbar >>> .sapWCShellBarOverflowIcon");
+				const overflowButton = browser.findElementDeep("#shellbar >>> .ui5-shellbar-overflow-button");
 				const notificationListItem = browser.findElementDeep("#shellbar >>> ui5-list ui5-li:nth-child(4)");
 				const input = browser.findElementDeep("#press-input");
 
@@ -301,7 +296,7 @@ describe("Component Behaviour", () => {
 			});
 
 			it("tests profilePress event", () => {
-				const profileIcon = browser.findElementDeep("#shellbar >>> .sapWCShellBarImageButton");
+				const profileIcon = browser.findElementDeep("#shellbar >>> .ui5-shellbar-image-button");
 				const input = browser.findElementDeep("#press-input");
 
 				profileIcon.click();
@@ -309,7 +304,7 @@ describe("Component Behaviour", () => {
 			});
 
 			it("tests productSwitchPress event", () => {
-				const overflowButton = browser.findElementDeep("#shellbar >>> .sapWCShellBarOverflowIcon");
+				const overflowButton = browser.findElementDeep("#shellbar >>> .ui5-shellbar-overflow-button");
 				const productSwitchIcon = browser.findElementDeep("#shellbar >>> ui5-list ui5-li:nth-child(5)");
 				const input = browser.findElementDeep("#press-input");
 
@@ -322,8 +317,8 @@ describe("Component Behaviour", () => {
 			it("tests if searchfield appears when clicking on search icon", () => {
 				const searchListItem = browser.findElementDeep("#shellbar >>> ui5-list ui5-li:nth-child(1)");
 				const searchField = browser.findElementDeep("#shellbar ui5-input");
-				const blockLayer = browser.findElementDeep("#shellbar >>> .sapWCShellBarBlockLayer");
-				const overflowButton = browser.findElementDeep("#shellbar >>> .sapWCShellBarOverflowIcon");
+				const blockLayer = browser.findElementDeep("#shellbar >>> .ui5-shellbar-block-layer");
+				const overflowButton = browser.findElementDeep("#shellbar >>> .ui5-shellbar-overflow-button");
 
 				assert.strictEqual(searchField.isDisplayed(), false, "Search is hidden by default");