diff --git a/packages/fiori/src/SearchFieldScopeOption.ts b/packages/fiori/src/SearchFieldScopeOption.ts
index dacef5242489..561f39a0765f 100644
--- a/packages/fiori/src/SearchFieldScopeOption.ts
+++ b/packages/fiori/src/SearchFieldScopeOption.ts
@@ -12,6 +12,7 @@ import type { ISearchFieldScopeOption } from "./SearchField.js";
  * @implements {ISearchFieldScopeOption}
  * @public
  * @since 2.9.0
+ * @experimental
  */
 @customElement("ui5-search-field-scope-option")
 class SearchFieldScopeOption extends UI5Element implements ISearchFieldScopeOption {
diff --git a/packages/website/docs/_components_pages/fiori/Search/Search.mdx b/packages/website/docs/_components_pages/fiori/Search/Search.mdx
new file mode 100644
index 000000000000..5133936b1719
--- /dev/null
+++ b/packages/website/docs/_components_pages/fiori/Search/Search.mdx
@@ -0,0 +1,22 @@
+---
+sidebar_class_name: newComponentBadge
+---
+
+import Basic from "../../../_samples/fiori/Search/Basic/Basic.md";
+import Advanced from "../../../_samples/fiori/Search/Advanced/Advanced.md";
+
+<%COMPONENT_OVERVIEW%>
+
+## Basic Sample
+A Search component with enabled scope and items and filtering by scope.
+
+<Basic />
+
+<%COMPONENT_METADATA%>
+
+## More Samples
+
+### Filtering
+The examples shows filtering per user input, typeahead and highlighting suggestions per user input.
+
+<Advanced />
\ No newline at end of file
diff --git a/packages/website/docs/_components_pages/fiori/Search/SearchFieldScopeOption.mdx b/packages/website/docs/_components_pages/fiori/Search/SearchFieldScopeOption.mdx
new file mode 100644
index 000000000000..a7cbaf998713
--- /dev/null
+++ b/packages/website/docs/_components_pages/fiori/Search/SearchFieldScopeOption.mdx
@@ -0,0 +1,8 @@
+---
+slug: ../SearchFieldScopeOption
+sidebar_class_name: newComponentBadge
+---
+
+<%COMPONENT_OVERVIEW%>
+
+<%COMPONENT_METADATA%>
\ No newline at end of file
diff --git a/packages/website/docs/_components_pages/fiori/Search/SearchItem.mdx b/packages/website/docs/_components_pages/fiori/Search/SearchItem.mdx
new file mode 100644
index 000000000000..ea9000632ff0
--- /dev/null
+++ b/packages/website/docs/_components_pages/fiori/Search/SearchItem.mdx
@@ -0,0 +1,8 @@
+---
+slug: ../SearchItem
+sidebar_class_name: newComponentBadge
+---
+
+<%COMPONENT_OVERVIEW%>
+
+<%COMPONENT_METADATA%>
\ No newline at end of file
diff --git a/packages/website/docs/_components_pages/fiori/Search/SearchItemGroup.mdx b/packages/website/docs/_components_pages/fiori/Search/SearchItemGroup.mdx
new file mode 100644
index 000000000000..0aa07ed2df23
--- /dev/null
+++ b/packages/website/docs/_components_pages/fiori/Search/SearchItemGroup.mdx
@@ -0,0 +1,8 @@
+---
+slug: ../SearchItemGroup
+sidebar_class_name: newComponentBadge
+---
+
+<%COMPONENT_OVERVIEW%>
+
+<%COMPONENT_METADATA%>
\ No newline at end of file
diff --git a/packages/website/docs/_samples/fiori/Search/Advanced/Advanced.md b/packages/website/docs/_samples/fiori/Search/Advanced/Advanced.md
new file mode 100644
index 000000000000..17798ecc59ab
--- /dev/null
+++ b/packages/website/docs/_samples/fiori/Search/Advanced/Advanced.md
@@ -0,0 +1,4 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+
+<Editor html={html} js={js} />
diff --git a/packages/website/docs/_samples/fiori/Search/Advanced/main.js b/packages/website/docs/_samples/fiori/Search/Advanced/main.js
new file mode 100644
index 000000000000..d6f88aa7cedf
--- /dev/null
+++ b/packages/website/docs/_samples/fiori/Search/Advanced/main.js
@@ -0,0 +1,45 @@
+
+import "@ui5/webcomponents-fiori/dist/Search.js";
+import "@ui5/webcomponents-fiori/dist/SearchItem.js";
+
+const data = [
+    { name: "Red Apple", category: "Fruit" },
+    { name: "Apple", category: "Fruit" },
+    { name: "Cucumber", category: "Vegetable" },
+    { name: "Orange", category: "Fruit" },
+    { name: "Tomato", category: "Vegetable" },
+];
+
+function onDelete(event) {
+    const item = event.target;
+    if (item) {
+        item.remove();
+    }
+}
+
+function createItems(parent, data) {
+    data.forEach(item => {
+        const searchItem = document.createElement("ui5-search-item");
+        searchItem.headingText = item.name;
+        searchItem.icon = "search";
+        searchItem.addEventListener("ui5-delete", onDelete);
+        parent.appendChild(searchItem);
+    });
+}
+
+const filtering = document.getElementById("filtering");
+createItems(filtering, data);
+filtering.addEventListener("ui5-input", (event) => {
+    const value = event.target.value.toLowerCase();
+    const filteredData = data.filter(item => item.name.toLowerCase().includes(value));
+    
+    // clear search items
+    filtering.innerHTML = "";
+
+    filtering.getSlottedNodes("items").forEach(item => {
+        item.remove();
+    });
+
+    // create search items based on search
+    createItems(filtering, filteredData);
+});
diff --git a/packages/website/docs/_samples/fiori/Search/Advanced/sample.html b/packages/website/docs/_samples/fiori/Search/Advanced/sample.html
new file mode 100644
index 000000000000..bfca2989303f
--- /dev/null
+++ b/packages/website/docs/_samples/fiori/Search/Advanced/sample.html
@@ -0,0 +1,20 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor); height: 350px">
+    <!-- playground-fold-end -->
+        <ui5-search id="filtering" show-popup-action popup-action-text="Show all search results" expanded show-clear-icon placeholder="Start typing ..."></ui5-search>
+	</div>
+    <!-- playground-fold -->
+    <script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->
diff --git a/packages/website/docs/_samples/fiori/Search/Basic/Basic.md b/packages/website/docs/_samples/fiori/Search/Basic/Basic.md
new file mode 100644
index 000000000000..17798ecc59ab
--- /dev/null
+++ b/packages/website/docs/_samples/fiori/Search/Basic/Basic.md
@@ -0,0 +1,4 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+
+<Editor html={html} js={js} />
diff --git a/packages/website/docs/_samples/fiori/Search/Basic/main.js b/packages/website/docs/_samples/fiori/Search/Basic/main.js
new file mode 100644
index 000000000000..89b645d09049
--- /dev/null
+++ b/packages/website/docs/_samples/fiori/Search/Basic/main.js
@@ -0,0 +1,44 @@
+
+import "@ui5/webcomponents-fiori/dist/Search.js";
+import "@ui5/webcomponents-fiori/dist/SearchItem.js";
+import "@ui5/webcomponents-fiori/dist/SearchFieldScopeOption.js";
+
+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.headingText = 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.items.forEach(item => {
+        item.remove();
+    });
+
+    createScopeItems(scope);
+});
diff --git a/packages/website/docs/_samples/fiori/Search/Basic/sample.html b/packages/website/docs/_samples/fiori/Search/Basic/sample.html
new file mode 100644
index 000000000000..c6cf11c25ee6
--- /dev/null
+++ b/packages/website/docs/_samples/fiori/Search/Basic/sample.html
@@ -0,0 +1,24 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor); height: 350px">
+    <!-- playground-fold-end -->
+		<ui5-search id="search-scope" mode="Scoped" expanded show-clear-icon placeholder="Search Apps, Products">
+			<ui5-search-field-scope-option text="All" selected slot="scopeOptions"></ui5-search-field-scope-option>
+			<ui5-search-field-scope-option text="Apps" slot="scopeOptions"></ui5-search-field-scope-option>
+			<ui5-search-field-scope-option text="Products" slot="scopeOptions"></ui5-search-field-scope-option>
+		</ui5-search>
+	</div>
+    <!-- playground-fold -->
+    <script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->