diff --git a/assets/js/common/Filter/Filter.stories.jsx b/assets/js/common/Filter/Filter.stories.jsx
index 97a281c981..4db91fecf5 100644
--- a/assets/js/common/Filter/Filter.stories.jsx
+++ b/assets/js/common/Filter/Filter.stories.jsx
@@ -6,74 +6,70 @@ import Filter from '.';
 export default {
   title: 'Components/Filter',
   component: Filter,
-};
-
-// storybook stories for the Filter component
-export function Default() {
-  const [value, setValue] = useState([]);
-  const options = [
-    'Tony Kekw',
-    'Chad Carbonara',
-    'Chuck Amatriciana',
-    'K.C.O. Pepe',
-    'Virgin Gricia',
-  ];
+  argTypes: {
+    options: {
+      type: { name: 'array', required: true },
+      description: 'List of options available',
+      control: { type: 'object' },
+    },
+    title: {
+      type: { name: 'string', required: true },
+      description:
+        'Title of the filter, will appear as placeholder when no value is selected',
+      control: { type: 'text' },
+    },
+    value: {
+      type: { name: 'array', required: false, defaultValue: [] },
+      description: 'Selected options',
+      control: { type: 'object' },
+    },
+    onChange: {
+      type: { name: 'function', required: false },
+      description: 'Function to call when the selected options change',
+      control: { type: null },
+    },
+  },
+  render: (args) => {
+    const [value, setValue] = useState(args.value);
 
-  return (
-    <Filter
-      title="Title"
-      options={options}
-      value={value}
-      onChange={(newValue) => {
-        setValue(newValue);
-        action('onChange')(newValue);
-      }}
-    />
-  );
-}
-
-export function WithValue() {
-  const [value, setValue] = useState(['Tony Kekw']);
-  const options = [
-    'Tony Kekw',
-    'Chad Carbonara',
-    'Chuck Amatriciana',
-    'K.C.O. Pepe',
-    'Virgin Gricia',
-  ];
+    return (
+      <Filter
+        title={args.title}
+        options={args.options}
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+          action('onChange')(newValue);
+        }}
+      />
+    );
+  },
+};
 
-  return (
-    <Filter
-      title="Title"
-      options={options}
-      value={value}
-      onChange={(newValue) => {
-        setValue(newValue);
-        action('onChange')(newValue);
-      }}
-    />
-  );
-}
+export const Default = {
+  args: {
+    title: 'Title',
+    options: [
+      'Tony Kekw',
+      'Chad Carbonara',
+      'Chuck Amatriciana',
+      'K.C.O. Pepe',
+      'Virginia Gricia',
+    ],
+    value: [],
+  },
+};
 
-export function withMultipleValues() {
-  const [value, setValue] = useState(['Tony Kekw', 'Chad Carbonara']);
-  const options = [
-    'Tony Kekw',
-    'Chad Carbonara',
-    'Chuck Amatriciana',
-    'K.C.O. Pepe',
-    'Virgin Gricia',
-  ];
+export const WithValue = {
+  args: {
+    ...Default.args,
+    value: ['Tony Kekw'],
+  },
+};
 
-  return (
-    <Filter
-      title="Title"
-      options={options}
-      value={value}
-      onChange={(newValue) => {
-        setValue(newValue);
-        action('onChange')(newValue);
-      }}
-    />
-  );
-}
+export const WithMultipleValues = {
+  args: {
+    ...Default.args,
+    value: ['Tony Kekw', 'Chad Carbonara'],
+  },
+};