diff --git a/components/tools/Filters.tsx b/components/tools/Filters.tsx
index 4938828086c6..50e3a8e5faf1 100644
--- a/components/tools/Filters.tsx
+++ b/components/tools/Filters.tsx
@@ -19,6 +19,13 @@ interface FiltersProps {
   setOpenFilter: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
+enum OpenedFiltersDropdownType {
+  NONE = '',
+  LANGUAGE = 'language',
+  TECHNOLOGY = 'technology',
+  CATEGORY = 'category'
+}
+
 /**
  * @description This component displays Filters.
  * @param {FiltersProps} props - Props for Filters component.
@@ -30,9 +37,9 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
   const { isPaid, isAsyncAPIOwner, languages, technologies, categories } = useContext(ToolFilterContext);
 
   // State variables to operate dropdowns of respective filters
-  const [openLanguage, setopenLanguage] = useState<boolean>(false);
-  const [openTechnology, setopenTechnology] = useState<boolean>(false);
-  const [openCategory, setopenCategory] = useState<boolean>(false);
+  const [openedFiltersDropown, setOpenedFiltersDropown] = useState<OpenedFiltersDropdownType>(
+    OpenedFiltersDropdownType.NONE
+  );
 
   // Filter state variables for user checked values are created, initialising it with the values already set by user.
   const [checkPaid, setCheckPaid] = useState<string>(isPaid);
@@ -182,9 +189,15 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
           <div className='w-full'>
             <div
               className={twMerge(
-                `px-4 py-2 flex justify-between rounded-lg border border-gray-400 w-full bg-gray-200 text-gray-700 shadow text-sm cursor-pointer ${openLanguage ? 'rounded-b-none' : ''}`
+                `px-4 py-2 flex justify-between rounded-lg border border-gray-400 w-full bg-gray-200 text-gray-700 shadow text-sm cursor-pointer ${openedFiltersDropown === OpenedFiltersDropdownType.LANGUAGE ? 'rounded-b-none' : ''}`
               )}
-              onClick={() => setopenLanguage(!openLanguage)}
+              onClick={() => {
+                if (openedFiltersDropown === OpenedFiltersDropdownType.LANGUAGE) {
+                  setOpenedFiltersDropown(OpenedFiltersDropdownType.NONE);
+                } else {
+                  setOpenedFiltersDropown(OpenedFiltersDropdownType.LANGUAGE);
+                }
+              }}
             >
               <div className='flex items-center text-dark'>
                 {/* eslint-disable-next-line no-nested-ternary */}
@@ -194,9 +207,11 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
                     : `${checkedLanguage.length} options selected`
                   : 'Select Languages...'}
               </div>
-              <ArrowDown className={`my-auto ${openLanguage ? 'rotate-180' : ''}`} />
+              <ArrowDown
+                className={`my-auto ${openedFiltersDropown === OpenedFiltersDropdownType.LANGUAGE ? 'rotate-180' : ''}`}
+              />
             </div>
-            {openLanguage && (
+            {openedFiltersDropown === OpenedFiltersDropdownType.LANGUAGE && (
               <div className='w-auto overflow-x-auto rounded-b-lg border border-gray-400 bg-gray-200 duration-150'>
                 <FiltersDropdown
                   dataList={languageList}
@@ -222,9 +237,15 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
           <div className='w-full'>
             <div
               className={twMerge(
-                `px-4 py-2 flex justify-between rounded-lg border border-gray-400 w-full bg-gray-200 text-gray-700 shadow text-sm cursor-pointer ${openTechnology ? 'rounded-b-none' : ''}`
+                `px-4 py-2 flex justify-between rounded-lg border border-gray-400 w-full bg-gray-200 text-gray-700 shadow text-sm cursor-pointer ${openedFiltersDropown === OpenedFiltersDropdownType.TECHNOLOGY ? 'rounded-b-none' : ''}`
               )}
-              onClick={() => setopenTechnology(!openTechnology)}
+              onClick={() => {
+                if (openedFiltersDropown === OpenedFiltersDropdownType.TECHNOLOGY) {
+                  setOpenedFiltersDropown(OpenedFiltersDropdownType.NONE);
+                } else {
+                  setOpenedFiltersDropown(OpenedFiltersDropdownType.TECHNOLOGY);
+                }
+              }}
             >
               <div className='flex items-center text-dark'>
                 {/* eslint-disable-next-line no-nested-ternary */}
@@ -234,9 +255,11 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
                     : `${checkedTechnology.length} options selected`
                   : 'Select Technologies...'}
               </div>
-              <ArrowDown className={`my-auto ${openTechnology ? 'rotate-180' : ''}`} />
+              <ArrowDown
+                className={`my-auto ${openedFiltersDropown === OpenedFiltersDropdownType.TECHNOLOGY ? 'rotate-180' : ''}`}
+              />
             </div>
-            {openTechnology && (
+            {openedFiltersDropown === OpenedFiltersDropdownType.TECHNOLOGY && (
               <div className='w-auto overflow-x-auto rounded-b-lg border border-gray-400 bg-gray-200 duration-150'>
                 <FiltersDropdown
                   dataList={technologyList}
@@ -262,9 +285,15 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
           <div className='w-full'>
             <div
               className={twMerge(
-                `px-4 py-2 flex justify-between rounded-lg border border-gray-400 w-full bg-gray-200 text-gray-700 shadow text-sm cursor-pointer ${openCategory ? 'rounded-b-none' : ''}`
+                `px-4 py-2 flex justify-between rounded-lg border border-gray-400 w-full bg-gray-200 text-gray-700 shadow text-sm cursor-pointer ${openedFiltersDropown === OpenedFiltersDropdownType.CATEGORY ? 'rounded-b-none' : ''}`
               )}
-              onClick={() => setopenCategory(!openCategory)}
+              onClick={() => {
+                if (openedFiltersDropown === OpenedFiltersDropdownType.CATEGORY) {
+                  setOpenedFiltersDropown(OpenedFiltersDropdownType.NONE);
+                } else {
+                  setOpenedFiltersDropown(OpenedFiltersDropdownType.CATEGORY);
+                }
+              }}
             >
               <div className='flex items-center text-dark'>
                 {/* eslint-disable-next-line no-nested-ternary */}
@@ -274,9 +303,11 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
                     : `${checkedCategory.length} options selected`
                   : 'Select Categories...'}
               </div>
-              <ArrowDown className={`my-auto ${openCategory ? 'rotate-180' : ''}`} />
+              <ArrowDown
+                className={`my-auto ${openedFiltersDropown === OpenedFiltersDropdownType.CATEGORY ? 'rotate-180' : ''}`}
+              />
             </div>
-            {openCategory && (
+            {openedFiltersDropown === OpenedFiltersDropdownType.CATEGORY && (
               <div className='w-auto overflow-x-auto rounded-b-lg border border-gray-400 bg-gray-200 duration-150'>
                 <FiltersDropdown
                   dataList={categoryList}
diff --git a/components/tools/FiltersDropdown.stories.tsx b/components/tools/FiltersDropdown.stories.tsx
new file mode 100644
index 000000000000..3b586c39b9a5
--- /dev/null
+++ b/components/tools/FiltersDropdown.stories.tsx
@@ -0,0 +1,75 @@
+import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import type { Language, Technology } from '@/types/components/tools/ToolDataType';
+
+import tags from '../../config/all-tags.json';
+import FiltersDropdown from './FiltersDropdown';
+
+const meta: Meta<typeof FiltersDropdown> = {
+  title: 'Components/FiltersDropdown',
+  component: FiltersDropdown,
+  argTypes: {
+    dataList: {
+      control: false
+    },
+    checkedOptions: {
+      control: {
+        type: 'object'
+      }
+    },
+    setCheckedOptions: {
+      control: false
+    }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FiltersDropdown>;
+
+const Dropdown: Story = {
+  args: {
+    checkedOptions: []
+  },
+
+  render: (args) => {
+    const [{ checkedOptions }, updateArgs] = useArgs();
+
+    const setCheckedOptions: React.Dispatch<React.SetStateAction<string[]>> = (newValue) => {
+      if (typeof newValue === 'function') {
+        const updatedValue = (newValue as (prevState: string[]) => string[])(checkedOptions);
+
+        updateArgs({ checkedOptions: updatedValue });
+      } else {
+        updateArgs({ checkedOptions: newValue });
+      }
+    };
+
+    return <FiltersDropdown {...args} checkedOptions={checkedOptions} setCheckedOptions={setCheckedOptions} />;
+  }
+};
+
+const languageList = tags.languages as Language[];
+
+export const LanguageDropdown: Story = {
+  ...Dropdown,
+
+  args: {
+    ...Dropdown.args,
+    dataList: languageList,
+    checkedOptions: []
+  }
+};
+
+const technologyList = tags.technologies as Technology[];
+
+export const TechnologyDropdown: Story = {
+  ...Dropdown,
+
+  args: {
+    ...Dropdown.args,
+    dataList: technologyList,
+    checkedOptions: []
+  }
+};
diff --git a/components/tools/FiltersDropdown.tsx b/components/tools/FiltersDropdown.tsx
index 6c473541e871..4589412e71df 100644
--- a/components/tools/FiltersDropdown.tsx
+++ b/components/tools/FiltersDropdown.tsx
@@ -3,11 +3,9 @@ import { twMerge } from 'tailwind-merge';
 
 import type { Category, Language, Technology } from '@/types/components/tools/ToolDataType';
 
-import Checkbox from './Checkbox';
-
 type DataList = Language[] | Technology[] | Category[];
 
-interface FiltersDropdownProps {
+export interface FiltersDropdownProps {
   dataList?: DataList;
   checkedOptions?: string[];
   setCheckedOptions: React.Dispatch<React.SetStateAction<string[]>>;
@@ -28,7 +26,7 @@ export default function FiltersDropdown({
   setCheckedOptions,
   className = ''
 }: FiltersDropdownProps) {
-  const handleClickOption = (option: string) => {
+  const handleClickOption = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, option: string) => {
     const isChecked = checkedOptions.includes(option);
     const updatedOptions = isChecked ? checkedOptions.filter((item) => item !== option) : [...checkedOptions, option];
 
@@ -37,13 +35,30 @@ export default function FiltersDropdown({
 
   return (
     <div
-      className={twMerge(`max-w-lg flex gap-2 flex-wrap p-2 duration-200 delay-150 ${className}`)}
+      className={twMerge(
+        `max-w-lg flex flex-col max-h-[20vh] gap-1 overflow-y-auto p-2 px-0 duration-200 delay-150 bg-gray-200 ${className}`
+      )}
       data-testid='FiltersDropdown-div'
     >
       {dataList.map((data, index) => {
         const checked = checkedOptions.includes(data.name);
 
-        return <Checkbox key={index} name={data.name} checked={checked} handleClickOption={handleClickOption} />;
+        return (
+          <div
+            key={index}
+            className={twMerge(
+              `hover:bg-gray-300 text-black p-1 py-2 gap-1 flex cursor-pointer items-start ${checked ? 'bg-gray-400' : ''}`
+            )}
+            onClick={(event) => handleClickOption(event, data.name)}
+          >
+            {checked ? (
+              <img src='/img/illustrations/icons/CheckedIcon.svg' alt='checked' />
+            ) : (
+              <img src='/img/illustrations/icons/UncheckedIcon.svg' alt='unchecked' />
+            )}
+            <div className='-mt-px mb-px text-xs'>{data.name}</div>
+          </div>
+        );
       })}
     </div>
   );
diff --git a/package-lock.json b/package-lock.json
index 5e84331a4117..4785b784a680 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "@next/mdx": "^14.1.0",
         "@octokit/graphql": "^7.0.2",
         "@slack/web-api": "^7.0.2",
+        "@storybook/addons": "^7.6.17",
         "@storybook/preview-api": "^8.2.2",
         "@tailwindcss/aspect-ratio": "^0.4.2",
         "@tailwindcss/forms": "^0.5.7",
@@ -2477,6 +2478,15 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz",
+      "integrity": "sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
@@ -6344,6 +6354,93 @@
         "storybook": "^8.2.9"
       }
     },
+    "node_modules/@storybook/addons": {
+      "version": "7.6.17",
+      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-7.6.17.tgz",
+      "integrity": "sha512-Ok18Y698Ccyg++MoUNJNHY0cXUvo8ETFIRLJk1g9ElJ70j6kPgNnzW2pAtZkBNmswHtofZ7pT156cj96k/LgfA==",
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/manager-api": "7.6.17",
+        "@storybook/preview-api": "7.6.17",
+        "@storybook/types": "7.6.17"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addons/node_modules/@storybook/manager-api": {
+      "version": "7.6.17",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.6.17.tgz",
+      "integrity": "sha512-IJIV1Yc6yw1dhCY4tReHCfBnUKDqEBnMyHp3mbXpsaHxnxJZrXO45WjRAZIKlQKhl/Ge1CrnznmHRCmYgqmrWg==",
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/channels": "7.6.17",
+        "@storybook/client-logger": "7.6.17",
+        "@storybook/core-events": "7.6.17",
+        "@storybook/csf": "^0.1.2",
+        "@storybook/global": "^5.0.0",
+        "@storybook/router": "7.6.17",
+        "@storybook/theming": "7.6.17",
+        "@storybook/types": "7.6.17",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "memoizerific": "^1.11.3",
+        "store2": "^2.14.2",
+        "telejson": "^7.2.0",
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addons/node_modules/@storybook/preview-api": {
+      "version": "7.6.17",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.17.tgz",
+      "integrity": "sha512-wLfDdI9RWo1f2zzFe54yRhg+2YWyxLZvqdZnSQ45mTs4/7xXV5Wfbv3QNTtcdw8tT3U5KRTrN1mTfTCiRJc0Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/channels": "7.6.17",
+        "@storybook/client-logger": "7.6.17",
+        "@storybook/core-events": "7.6.17",
+        "@storybook/csf": "^0.1.2",
+        "@storybook/global": "^5.0.0",
+        "@storybook/types": "7.6.17",
+        "@types/qs": "^6.9.5",
+        "dequal": "^2.0.2",
+        "lodash": "^4.17.21",
+        "memoizerific": "^1.11.3",
+        "qs": "^6.10.0",
+        "synchronous-promise": "^2.0.15",
+        "ts-dedent": "^2.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/addons/node_modules/@storybook/theming": {
+      "version": "7.6.17",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.17.tgz",
+      "integrity": "sha512-ZbaBt3KAbmBtfjNqgMY7wPMBshhSJlhodyMNQypv+95xLD/R+Az6aBYbpVAOygLaUQaQk4ar7H/Ww6lFIoiFbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
+        "@storybook/client-logger": "7.6.17",
+        "@storybook/global": "^5.0.0",
+        "memoizerific": "^1.11.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@storybook/blocks": {
       "version": "8.2.9",
       "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.2.9.tgz",
@@ -6439,6 +6536,35 @@
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@storybook/channels": {
+      "version": "7.6.17",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.17.tgz",
+      "integrity": "sha512-GFG40pzaSxk1hUr/J/TMqW5AFDDPUSu+HkeE/oqSWJbOodBOLJzHN6CReJS6y1DjYSZLNFt1jftPWZZInG/XUA==",
+      "dependencies": {
+        "@storybook/client-logger": "7.6.17",
+        "@storybook/core-events": "7.6.17",
+        "@storybook/global": "^5.0.0",
+        "qs": "^6.10.0",
+        "telejson": "^7.2.0",
+        "tiny-invariant": "^1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
+    "node_modules/@storybook/client-logger": {
+      "version": "7.6.17",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.17.tgz",
+      "integrity": "sha512-6WBYqixAXNAXlSaBWwgljWpAu10tPRBJrcFvx2gPUne58EeMM20Gi/iHYBz2kMCY+JLAgeIH7ZxInqwO8vDwiQ==",
+      "dependencies": {
+        "@storybook/global": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
     "node_modules/@storybook/codemod": {
       "version": "8.2.9",
       "resolved": "https://registry.npmjs.org/@storybook/codemod/-/codemod-8.2.9.tgz",
@@ -6539,6 +6665,19 @@
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/@storybook/core-events": {
+      "version": "7.6.17",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.17.tgz",
+      "integrity": "sha512-AriWMCm/k1cxlv10f+jZ1wavThTRpLaN3kY019kHWbYT9XgaSuLU67G7GPr3cGnJ6HuA6uhbzu8qtqVCd6OfXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ts-dedent": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
     "node_modules/@storybook/core-webpack": {
       "version": "8.2.9",
       "resolved": "https://registry.npmjs.org/@storybook/core-webpack/-/core-webpack-8.2.9.tgz",
@@ -6600,8 +6739,7 @@
     "node_modules/@storybook/global": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@storybook/global/-/global-5.0.0.tgz",
-      "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==",
-      "dev": true
+      "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ=="
     },
     "node_modules/@storybook/icons": {
       "version": "1.2.10",
@@ -6883,6 +7021,21 @@
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@storybook/router": {
+      "version": "7.6.17",
+      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.6.17.tgz",
+      "integrity": "sha512-GnyC0j6Wi5hT4qRhSyT8NPtJfGmf82uZw97LQRWeyYu5gWEshUdM7aj40XlNiScd5cZDp0owO1idduVF2k2l2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/client-logger": "7.6.17",
+        "memoizerific": "^1.11.3",
+        "qs": "^6.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
     "node_modules/@storybook/test": {
       "version": "8.2.9",
       "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.2.9.tgz",
@@ -6919,6 +7072,22 @@
         "storybook": "^8.2.9"
       }
     },
+    "node_modules/@storybook/types": {
+      "version": "7.6.17",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.17.tgz",
+      "integrity": "sha512-GRY0xEJQ0PrL7DY2qCNUdIfUOE0Gsue6N+GBJw9ku1IUDFLJRDOF+4Dx2BvYcVCPI5XPqdWKlEyZdMdKjiQN7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@storybook/channels": "7.6.17",
+        "@types/babel__core": "^7.0.0",
+        "@types/express": "^4.7.0",
+        "file-system-cache": "2.3.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      }
+    },
     "node_modules/@swc/counter": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
@@ -7096,7 +7265,6 @@
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
       "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
-      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.20.7",
         "@babel/types": "^7.20.7",
@@ -7109,7 +7277,6 @@
       "version": "7.6.8",
       "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz",
       "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.0.0"
       }
@@ -7118,7 +7285,6 @@
       "version": "7.4.4",
       "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
       "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
-      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.1.0",
         "@babel/types": "^7.0.0"
@@ -7128,7 +7294,6 @@
       "version": "7.20.6",
       "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.6.tgz",
       "integrity": "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==",
-      "dev": true,
       "dependencies": {
         "@babel/types": "^7.20.7"
       }
@@ -13878,6 +14043,30 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-system-cache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/file-system-cache/-/file-system-cache-2.3.0.tgz",
+      "integrity": "sha512-l4DMNdsIPsVnKrgEXbJwDJsA5mB8rGwHYERMgqQx/xAUtChPJMre1bXBzDEqqVbWv9AIbFezXMxeEkZDSrXUOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "fs-extra": "11.1.1",
+        "ramda": "0.29.0"
+      }
+    },
+    "node_modules/file-system-cache/node_modules/fs-extra": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+      "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
     "node_modules/filesize": {
       "version": "10.1.2",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-10.1.2.tgz",
@@ -18179,8 +18368,7 @@
     "node_modules/map-or-similar": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz",
-      "integrity": "sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==",
-      "dev": true
+      "integrity": "sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg=="
     },
     "node_modules/markdown-extensions": {
       "version": "2.0.0",
@@ -19785,7 +19973,6 @@
       "version": "1.11.3",
       "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
       "integrity": "sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==",
-      "dev": true,
       "dependencies": {
         "map-or-similar": "^1.5.0"
       }
@@ -24505,6 +24692,16 @@
       "integrity": "sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==",
       "dev": true
     },
+    "node_modules/ramda": {
+      "version": "0.29.0",
+      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.29.0.tgz",
+      "integrity": "sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ramda"
+      }
+    },
     "node_modules/randomatic": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.1.tgz",
@@ -27083,6 +27280,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/store2": {
+      "version": "2.14.3",
+      "resolved": "https://registry.npmjs.org/store2/-/store2-2.14.3.tgz",
+      "integrity": "sha512-4QcZ+yx7nzEFiV4BMLnr/pRa5HYzNITX2ri0Zh6sT9EyQHbBHacC6YigllUPU9X3D0f/22QCgfokpKs52YRrUg==",
+      "license": "MIT"
+    },
     "node_modules/storybook": {
       "version": "8.2.9",
       "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.2.9.tgz",
@@ -27913,6 +28116,12 @@
         "node": ">= 4.7.0"
       }
     },
+    "node_modules/synchronous-promise": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.17.tgz",
+      "integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/synckit": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.0.tgz",
@@ -28141,7 +28350,6 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/telejson/-/telejson-7.2.0.tgz",
       "integrity": "sha512-1QTEcJkJEhc8OnStBx/ILRu5J2p0GjvWsBx56bmZRqnrkdBMUe+nX92jxV+p3dB4CP6PZCdJMQJwCggkNBMzkQ==",
-      "dev": true,
       "dependencies": {
         "memoizerific": "^1.11.3"
       }
diff --git a/package.json b/package.json
index 22c6192d66fa..3eaf39e28ba2 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "@next/mdx": "^14.1.0",
     "@octokit/graphql": "^7.0.2",
     "@slack/web-api": "^7.0.2",
+    "@storybook/addons": "^7.6.17",
     "@storybook/preview-api": "^8.2.2",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.7",
diff --git a/public/img/illustrations/icons/CheckedIcon.svg b/public/img/illustrations/icons/CheckedIcon.svg
index 591b807daf7b..50697b1ac6e9 100644
--- a/public/img/illustrations/icons/CheckedIcon.svg
+++ b/public/img/illustrations/icons/CheckedIcon.svg
@@ -2,7 +2,7 @@
 <circle cx="6" cy="6.5" r="4" fill="white"/>
 <circle cx="6" cy="6.5" r="5.5" stroke="white"/>
 <g clip-path="url(#clip0_827_2273)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M7.893 4.85427C8.01692 4.96125 8.03599 5.155 7.93559 5.28704L5.79656 8.10022C5.7446 8.16855 5.66769 8.20993 5.58524 8.2139C5.50278 8.21787 5.42268 8.18406 5.36514 8.12101L4.08172 6.71442C3.97055 6.59258 3.97313 6.39778 4.08747 6.27932C4.20182 6.16087 4.38464 6.16361 4.49582 6.28545L5.55254 7.44359L7.48685 4.89965C7.58724 4.76761 7.76909 4.7473 7.893 4.85427Z" fill="#0B81C4" stroke="#0B81C4" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.893 4.85427C8.01692 4.96125 8.03599 5.155 7.93559 5.28704L5.79656 8.10022C5.7446 8.16855 5.66769 8.20993 5.58524 8.2139C5.50278 8.21787 5.42268 8.18406 5.36514 8.12101L4.08172 6.71442C3.97055 6.59258 3.97313 6.39778 4.08747 6.27932C4.20182 6.16087 4.38464 6.16361 4.49582 6.28545L5.55254 7.44359L7.48685 4.89965C7.58724 4.76761 7.76909 4.7473 7.893 4.85427Z" fill="#636363" stroke="#636363" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 <defs>
 <clipPath id="clip0_827_2273">
diff --git a/public/img/illustrations/icons/UncheckedIcon.svg b/public/img/illustrations/icons/UncheckedIcon.svg
index d57fb6e3885b..57d4281a6c90 100644
--- a/public/img/illustrations/icons/UncheckedIcon.svg
+++ b/public/img/illustrations/icons/UncheckedIcon.svg
@@ -1,3 +1,3 @@
 <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="6" cy="6.5" r="5.5" stroke="#0B81C4"/>
+<circle cx="6" cy="6.5" r="5.5" stroke="#636363"/>
 </svg>