diff --git a/react-components/src/architecture/base/commands/mocks/MockFilterCommand.ts b/react-components/src/architecture/base/commands/mocks/MockFilterCommand.ts
index 5b82d53f880..a0a18da8144 100644
--- a/react-components/src/architecture/base/commands/mocks/MockFilterCommand.ts
+++ b/react-components/src/architecture/base/commands/mocks/MockFilterCommand.ts
@@ -12,7 +12,7 @@ export class MockFilterCommand extends BaseFilterCommand {
   // ==================================================
 
   public override get tooltip(): TranslateKey {
-    return { fallback: 'Filter' };
+    return { fallback: 'Mock Filter' };
   }
 
   protected override createChildren(): FilterItemCommand[] {
@@ -23,6 +23,13 @@ export class MockFilterCommand extends BaseFilterCommand {
       new FilterItemCommand('Yellow', new Color(Color.NAMES.yellow)),
       new FilterItemCommand('Cyan', new Color(Color.NAMES.cyan)),
       new FilterItemCommand('Magenta', new Color(Color.NAMES.magenta)),
+      new FilterItemCommand('Light green', new Color(Color.NAMES.lightgreen)),
+      new FilterItemCommand('Blue violet', new Color(Color.NAMES.blueviolet)),
+      new FilterItemCommand('Salmon', new Color(Color.NAMES.salmon)),
+      new FilterItemCommand('Pink', new Color(Color.NAMES.pink)),
+      new FilterItemCommand('Gold', new Color(Color.NAMES.gold)),
+      new FilterItemCommand('Silver', new Color(Color.NAMES.silver)),
+      new FilterItemCommand('Goral', new Color(Color.NAMES.coral)),
       new FilterItemCommand('No color')
     ];
   }
diff --git a/react-components/src/architecture/concrete/config/StoryBookConfig.ts b/react-components/src/architecture/concrete/config/StoryBookConfig.ts
index cc8ddd0eff1..5987de7086e 100644
--- a/react-components/src/architecture/concrete/config/StoryBookConfig.ts
+++ b/react-components/src/architecture/concrete/config/StoryBookConfig.ts
@@ -58,6 +58,9 @@ export class StoryBookConfig extends BaseRevealConfig {
       new ClipTool(),
       new PointsOfInterestTool<DmsUniqueIdentifier>(),
       undefined,
+      new MockSettingsCommand(),
+      new MockFilterCommand(),
+      undefined,
       new AnnotationsSelectTool(),
       new AnnotationsCreateTool(),
       new AnnotationsShowCommand(),
@@ -65,10 +68,7 @@ export class StoryBookConfig extends BaseRevealConfig {
       undefined,
       new ExampleTool(),
       new SetTerrainVisibleCommand(),
-      new UpdateTerrainCommand(),
-      undefined,
-      new MockSettingsCommand(),
-      new MockFilterCommand()
+      new UpdateTerrainCommand()
     ];
   }
 
diff --git a/react-components/src/components/Architecture/FilterButton.tsx b/react-components/src/components/Architecture/FilterButton.tsx
index dc7913a9ec3..a64b3417f78 100644
--- a/react-components/src/components/Architecture/FilterButton.tsx
+++ b/react-components/src/components/Architecture/FilterButton.tsx
@@ -212,7 +212,9 @@ const FilterDropdown = ({
             )}
           </Button>
         </SelectPanel.Trigger>
-        <SelectPanel.Body>{PanelContent}</SelectPanel.Body>
+        <SelectPanel.Body style={{ overflow: 'hidden', zindex: 2000 }}>
+          {PanelContent}
+        </SelectPanel.Body>
       </StyledSelectPanel>
     </StyledDropdownRow>
   );
@@ -235,21 +237,20 @@ const FilterSelectPanelContent = ({
 
   return (
     <>
-      <SelectPanel.Header title={label} />
-      <SelectPanel.Body label={label}>
-        <SelectPanel.Section>
-          <SelectPanel.Item
-            key={-1}
-            variant="checkbox"
-            checked={isAllChecked}
-            indeterminate={!isAllChecked && isSomeChecked}
-            onClick={() => {
-              command.toggleAllChecked();
-            }}
-            label={BaseFilterCommand.getAllString(t)}>
-            {BaseFilterCommand.getAllString(t)}
-          </SelectPanel.Item>
-        </SelectPanel.Section>
+      <SelectPanel.Section>
+        <SelectPanel.Item
+          key={-1}
+          variant="checkbox"
+          checked={isAllChecked}
+          indeterminate={!isAllChecked && isSomeChecked}
+          onClick={() => {
+            command.toggleAllChecked();
+          }}
+          label={BaseFilterCommand.getAllString(t)}>
+          {BaseFilterCommand.getAllString(t)}
+        </SelectPanel.Item>
+      </SelectPanel.Section>
+      <SelectPanel.Body label={label} style={{ maxHeight: '300px' }}>
         <SelectPanel.Section>
           {children?.map((child, _index): ReactElement => {
             return <FilterItem key={child.uniqueId} command={child} />;