diff --git a/packages/website/docs/_components_pages/fiori/ShellBar/ShellBar.mdx b/packages/website/docs/_components_pages/fiori/ShellBar/ShellBar.mdx
index 82f8039d26e9..c48200d2bef4 100644
--- a/packages/website/docs/_components_pages/fiori/ShellBar/ShellBar.mdx
+++ b/packages/website/docs/_components_pages/fiori/ShellBar/ShellBar.mdx
@@ -1,5 +1,9 @@
import Basic from "../../../_samples/fiori/ShellBar/Basic/Basic.md";
import Advanced from "../../../_samples/fiori/ShellBar/Advanced/Advanced.md";
+import EmbeddedBackNavigation from "../../../_samples/fiori/ShellBar/EmbeddedBackNavigation/EmbeddedBackNavigation.md";
+import MultipleNonProductiveInstances from "../../../_samples/fiori/ShellBar/MultipleNonProductiveInstances/MultipleNonProductiveInstances.md";
+import MultipleProductiveInstances from "../../../_samples/fiori/ShellBar/MultipleProductiveInstances/MultipleProductiveInstances.md";
+import TrialExample from "../../../_samples/fiori/ShellBar/TrialExample/TrialExample.md";
<%COMPONENT_OVERVIEW%>
@@ -12,7 +16,27 @@ The ShellBar includes Back button, Logo, Title and Profile image.
## More Samples
-### Profile Area
-Press the profile image on the right-most side to open a simple popup that one can implment its own profile area.
+### All Features
+A comprehensive ShellBar demonstrating all available features including notifications, search, content items, and profile.
-
\ No newline at end of file
+
+
+### Embedded Back Navigation
+ShellBar with embedded back navigation button in the start area.
+
+
+
+### Trial Example
+ShellBar configured for trial environments with trial tags and remaining days indicator.
+
+
+
+### Multiple Productive Instances
+ShellBar setup for multiple productive system instances with region indicators.
+
+
+
+### Multiple Non-Productive Instances
+ShellBar setup for multiple non-productive system instances with system and region tags.
+
+
\ No newline at end of file
diff --git a/packages/website/docs/_samples/fiori/ShellBar/Advanced/Advanced.md b/packages/website/docs/_samples/fiori/ShellBar/Advanced/Advanced.md
index 17798ecc59ab..ffccbf6dd13e 100644
--- a/packages/website/docs/_samples/fiori/ShellBar/Advanced/Advanced.md
+++ b/packages/website/docs/_samples/fiori/ShellBar/Advanced/Advanced.md
@@ -1,4 +1,4 @@
import html from '!!raw-loader!./sample.html';
import js from '!!raw-loader!./main.js';
-
+
\ No newline at end of file
diff --git a/packages/website/docs/_samples/fiori/ShellBar/Advanced/main.js b/packages/website/docs/_samples/fiori/ShellBar/Advanced/main.js
index 81755ad81c73..bce5940958df 100644
--- a/packages/website/docs/_samples/fiori/ShellBar/Advanced/main.js
+++ b/packages/website/docs/_samples/fiori/ShellBar/Advanced/main.js
@@ -1,72 +1,16 @@
import "@ui5/webcomponents/dist/Avatar.js";
import "@ui5/webcomponents/dist/Button.js";
-import "@ui5/webcomponents/dist/Input.js";
-import "@ui5/webcomponents/dist/Title.js";
-import "@ui5/webcomponents/dist/ToggleButton.js";
-import "@ui5/webcomponents-fiori/dist/UserMenu.js";
-import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";
-import "@ui5/webcomponents-fiori/dist/UserMenuItem.js";
+import "@ui5/webcomponents/dist/Text.js";
+import "@ui5/webcomponents/dist/Tag.js";
+import "@ui5/webcomponents/dist/Switch.js";
+import "@ui5/webcomponents/dist/Label.js";
import "@ui5/webcomponents-fiori/dist/ShellBar.js";
+import "@ui5/webcomponents-fiori/dist/ShellBarItem.js";
+import "@ui5/webcomponents-fiori/dist/ShellBarSpacer.js";
import "@ui5/webcomponents-fiori/dist/ShellBarSearch.js";
-import "@ui5/webcomponents-fiori/dist/SearchItem.js";
-import "@ui5/webcomponents-fiori/dist/SearchScope.js";
-import "@ui5/webcomponents-icons/dist/da.js";
-import "@ui5/webcomponents-icons/dist/da-2.js";
+import "@ui5/webcomponents-icons/dist/menu2.js";
import "@ui5/webcomponents-icons/dist/nav-back.js";
-import "@ui5/webcomponents-icons/dist/action-settings.js";
-import "@ui5/webcomponents-icons/dist/official-service.js";
-
-const shellbar = document.getElementById("shellbar");
-const menu = document.getElementById("userMenu");
-
-shellbar.addEventListener("ui5-profile-click", (event) => {
- menu.opener = event.detail.targetRef;
- menu.open = true;
-});
-
-[...document.querySelectorAll("ui5-toggle-button")].forEach(el => {
- el.addEventListener("click", event => {
- const toggleButton = event.target;
- toggleButton.icon = toggleButton.pressed ? "sap-icon://da-2" : "sap-icon://da";
- });
-});
-
-const scopeData = [
- { name: "Laptop", scope: "products" },
- { name: "Leave Requests", scope: "apps" },
- { name: "Log work", scope: "apps" },
- { name: "Manage Products", scope: "apps" },
- { name: "Mobile Phones", scope: "products" },
- { name: "Tablet", scope: "products" },
-];
-
-function createScopeItems(scope) {
- let filterData = [];
-
- if (!scope) {
- filterData = scopeData;
- } else {
- filterData = scopeData.filter(item => item.scope === scope);
- }
-
- filterData.forEach(item => {
- const searchItem = document.createElement("ui5-search-item");
- searchItem.text = item.name;
- searchItem.scopeName = item.scope;
- searchScope.appendChild(searchItem);
- });
-}
-
-const searchScope = document.getElementById("search-scope");
-
-createScopeItems();
-
-searchScope.addEventListener("ui5-scope-change", (event) => {
- const scope = event.detail.scope.text === "All" ? "" : event.detail.scope.text.toLowerCase();
-
- searchScope.innerHTML = "";
-
- createScopeItems(scope);
-});
+import "@ui5/webcomponents-icons/dist/sys-help.js";
+import "@ui5/webcomponents-icons/dist/customer.js";
\ No newline at end of file
diff --git a/packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html b/packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html
index f2a4edd94d0e..fe5160c018ab 100644
--- a/packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html
+++ b/packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html
@@ -6,43 +6,36 @@
Sample
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+ Trial
+ 30 days remaining
+
+
+
+ Try Beta Version
+
+
+
+
+
+
+
+
+
+
-
+
\ No newline at end of file
diff --git a/packages/website/docs/_samples/fiori/ShellBar/Basic/main.js b/packages/website/docs/_samples/fiori/ShellBar/Basic/main.js
index aec0379b0378..f129e7dbe1e4 100644
--- a/packages/website/docs/_samples/fiori/ShellBar/Basic/main.js
+++ b/packages/website/docs/_samples/fiori/ShellBar/Basic/main.js
@@ -1,22 +1,10 @@
-
import "@ui5/webcomponents/dist/Avatar.js";
import "@ui5/webcomponents/dist/Button.js";
-import "@ui5/webcomponents/dist/Label.js";
-import "@ui5/webcomponents/dist/Switch.js";
-import "@ui5/webcomponents/dist/ToggleButton.js";
-import "@ui5/webcomponents/dist/Input.js";
-import "@ui5/webcomponents/dist/ListItemStandard.js";
-import "@ui5/webcomponents/dist/Popover.js";
-import "@ui5/webcomponents/dist/Title.js";
-import "@ui5/webcomponents/dist/ToggleButton.js";
-import "@ui5/webcomponents/dist/List.js";
-import "@ui5/webcomponents/dist/Text.js";
-import "@ui5/webcomponents/dist/Tag.js";
import "@ui5/webcomponents-fiori/dist/ShellBar.js";
-import "@ui5/webcomponents-fiori/dist/ShellBarSpacer.js";
+import "@ui5/webcomponents-fiori/dist/ShellBarItem.js";
import "@ui5/webcomponents-fiori/dist/ShellBarSearch.js";
-import "@ui5/webcomponents-icons/dist/customer.js";
-import "@ui5/webcomponents-icons/dist/nav-back.js";
-import "@ui5/webcomponents-icons/dist/edit.js";
+import "@ui5/webcomponents-icons/dist/menu2.js";
+import "@ui5/webcomponents-icons/dist/sys-help.js";
+import "@ui5/webcomponents-icons/dist/customer.js";
\ No newline at end of file
diff --git a/packages/website/docs/_samples/fiori/ShellBar/Basic/sample.html b/packages/website/docs/_samples/fiori/ShellBar/Basic/sample.html
index 8b3da25b7703..e3f02abe24c6 100644
--- a/packages/website/docs/_samples/fiori/ShellBar/Basic/sample.html
+++ b/packages/website/docs/_samples/fiori/ShellBar/Basic/sample.html
@@ -11,29 +11,21 @@
-
-
+
+
- Trial
- EMEA
-
-
-
- Edit
-
- New Version
-
-
-
-
-
+
+
+
+
+