diff --git a/src/services/components/ServiceListPage/ServiceListPage.stories.tsx b/src/services/components/ServiceListPage/ServiceListPage.stories.tsx
index cfa666b1e..d3f5d74e1 100644
--- a/src/services/components/ServiceListPage/ServiceListPage.stories.tsx
+++ b/src/services/components/ServiceListPage/ServiceListPage.stories.tsx
@@ -6,7 +6,8 @@ import {
   pageListProps,
   searchPageProps,
   tabPageProps,
-  sortPageProps
+  sortPageProps,
+  filterPageProps
 } from "@saleor/fixtures";
 import ServiceListPage, {
   ServiceListPageProps
@@ -21,6 +22,13 @@ const props: ServiceListPageProps = {
   ...searchPageProps,
   ...sortPageProps,
   ...tabPageProps,
+  ...filterPageProps,
+  filterOpts: {
+    isActive: {
+      active: false,
+      value: true
+    }
+  },
   onBack: () => undefined,
   onRemove: () => undefined,
   services: serviceList,
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 12e4a7e72..6583d0ca9 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -111719,8 +111719,21 @@ exports[`Storyshots Views / Services / Service list default 1`] = `
         </div>
       </div>
       <div
-        class="SearchBar-root-id"
+        class="FilterBar-root-id"
       >
+        <div>
+          <button
+            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
+            tabindex="0"
+            type="button"
+          >
+            <div
+              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
+            >
+              Filters
+            </div>
+          </button>
+        </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
@@ -112198,8 +112211,21 @@ exports[`Storyshots Views / Services / Service list loading 1`] = `
         </div>
       </div>
       <div
-        class="SearchBar-root-id"
+        class="FilterBar-root-id"
       >
+        <div>
+          <button
+            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
+            tabindex="0"
+            type="button"
+          >
+            <div
+              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
+            >
+              Filters
+            </div>
+          </button>
+        </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >
@@ -112550,8 +112576,21 @@ exports[`Storyshots Views / Services / Service list no data 1`] = `
         </div>
       </div>
       <div
-        class="SearchBar-root-id"
+        class="FilterBar-root-id"
       >
+        <div>
+          <button
+            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
+            tabindex="0"
+            type="button"
+          >
+            <div
+              class="MuiTypography-root-id Filter-addFilterText-id MuiTypography-body1-id"
+            >
+              Filters
+            </div>
+          </button>
+        </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
         >