diff --git a/assets/js/components/Accordion/Accordion.jsx b/assets/js/components/Accordion/Accordion.jsx
new file mode 100644
index 0000000000..c88637d620
--- /dev/null
+++ b/assets/js/components/Accordion/Accordion.jsx
@@ -0,0 +1,83 @@
+import React, { isValidElement } from 'react';
+
+import { Disclosure, Transition } from '@headlessui/react';
+import { EOS_KEYBOARD_ARROW_DOWN } from 'eos-icons-react';
+
+import classNames from 'classnames';
+
+function Accordion({
+  className,
+  header,
+  headerClassnames,
+  withHandle = true,
+  withTransition = false,
+  rounded = true,
+  defaultOpen = false,
+  children,
+}) {
+  const disclosurePanel = (
+    <Disclosure.Panel aria-label="accordion-panel">{children}</Disclosure.Panel>
+  );
+  const isHeaderAnElement = isValidElement(header);
+  return (
+    <Disclosure
+      as="div"
+      defaultOpen={defaultOpen}
+      className={classNames(
+        'bg-white shadow overflow-hidden',
+        { 'rounded-md': rounded },
+        className
+      )}
+    >
+      {({ open }) => (
+        <>
+          <Disclosure.Button
+            aria-label="accordion-header"
+            as="div"
+            className={classNames(
+              'cursor-pointer flex w-full justify-between border-b border-gray-200',
+              headerClassnames
+            )}
+          >
+            {isHeaderAnElement ? (
+              header
+            ) : (
+              <div className="bg-white p-6 sm:px-6">
+                <h3 className="text-lg leading-6 font-semibold text-gray-900">
+                  {header}
+                </h3>
+              </div>
+            )}
+
+            {withHandle && (
+              <div className="flex p-6" aria-label="accordion-handle">
+                <EOS_KEYBOARD_ARROW_DOWN
+                  className={classNames('self-center fill-gray-500', {
+                    'transform rotate-180': open,
+                  })}
+                />
+              </div>
+            )}
+          </Disclosure.Button>
+          {withTransition ? (
+            <Transition
+              aria-label="accordion-transition-panel"
+              enter="transition duration-100 ease-out"
+              enterFrom="transform opacity-0"
+              enterTo="transform opacity-100"
+              leave="transition duration-100 ease-out"
+              leaveFrom="transform opacity-100"
+              leaveTo="transform opacity-0"
+            >
+              {disclosurePanel}
+            </Transition>
+          ) : (
+            disclosurePanel
+          )}
+        </>
+      )}
+    </Disclosure>
+  );
+}
+
+export default Accordion;
diff --git a/assets/js/components/Accordion/Accordion.stories.jsx b/assets/js/components/Accordion/Accordion.stories.jsx
new file mode 100644
index 0000000000..229d795cae
--- /dev/null
+++ b/assets/js/components/Accordion/Accordion.stories.jsx
@@ -0,0 +1,92 @@
+import React from 'react';
+
+import PremiumPill from '@components/PremiumPill';
+import Accordion from '.';
+
+export default {
+  title: 'Accordion',
+  component: Accordion,
+  argTypes: {
+    header: {
+      type: 'string',
+      description:
+        'The content of the accordion header. It can be a plain string or a Component',
+      control: {
+        type: 'text',
+      },
+    },
+    children: {
+      description:
+        'The content of the accordion panel. It should be a Component',
+      control: {
+        type: 'text',
+      },
+    },
+    withHandle: {
+      description:
+        'Whether the accordion header should have a chevron icon handle or not',
+      control: {
+        type: 'boolean',
+      },
+    },
+    withTransition: {
+      description:
+        'Whether the accordion panel should open/close with a transition animation',
+      control: {
+        type: 'boolean',
+      },
+    },
+    defaultOpen: {
+      description: 'Whether the accordion should render open by default',
+      control: {
+        type: 'boolean',
+      },
+    },
+    rounded: {
+      description: 'Whether the accordion container should be rounded or not',
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    header: 'Accordion Header',
+    children: <div className="p-6">Accordion content</div>,
+  },
+};
+
+export const WithoutHandle = {
+  args: {
+    ...Default.args,
+    withHandle: false,
+  },
+};
+
+export const WithCustomHeader = {
+  args: {
+    ...WithoutHandle.args,
+    header: (
+      <div className="check-row px-4 py-4 sm:px-6">
+        <div className="flex items-center">
+          <p className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+            AAAA
+          </p>
+          <PremiumPill className="ml-1" />
+        </div>
+        <div className="mt-2 sm:flex sm:justify-between">
+          <div className="sm:flex">Accordion with custom header</div>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const WithTransition = {
+  args: {
+    ...Default.args,
+    withTransition: true,
+  },
+};
diff --git a/assets/js/components/Accordion/Accordion.test.jsx b/assets/js/components/Accordion/Accordion.test.jsx
new file mode 100644
index 0000000000..03c1cd2a3a
--- /dev/null
+++ b/assets/js/components/Accordion/Accordion.test.jsx
@@ -0,0 +1,90 @@
+import React from 'react';
+
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import { faker } from '@faker-js/faker';
+import Accordion from './Accordion';
+
+describe('Accordion Component', () => {
+  it('should render an Accordion', () => {
+    const accordionHeader = faker.lorem.sentence();
+    const accordionContent = faker.lorem.paragraph();
+
+    render(
+      <Accordion header={accordionHeader}>
+        <div>{accordionContent}</div>
+      </Accordion>
+    );
+
+    const header = screen.getByLabelText('accordion-header');
+
+    expect(screen.getByLabelText('accordion-handle')).toBeVisible();
+    expect(header).toHaveTextContent(accordionHeader);
+    expect(screen.queryByLabelText('accordion-panel')).not.toBeInTheDocument();
+
+    expect(
+      screen.queryByLabelText('accordion-transition-panel')
+    ).not.toBeInTheDocument();
+
+    fireEvent.click(header);
+    expect(screen.getByLabelText('accordion-panel')).toHaveTextContent(
+      accordionContent
+    );
+    expect(
+      screen.queryByLabelText('accordion-transition-panel')
+    ).not.toBeInTheDocument();
+  });
+
+  it('should render an Accordion with a custom header', () => {
+    const accordionHeader = faker.lorem.sentence();
+
+    render(
+      <Accordion
+        header={<div data-testid="custom-header">{accordionHeader}</div>}
+      >
+        <div>{faker.lorem.paragraph()}</div>
+      </Accordion>
+    );
+
+    expect(screen.getByTestId('custom-header')).toBeVisible();
+    expect(screen.getByLabelText('accordion-header')).toHaveTextContent(
+      accordionHeader
+    );
+  });
+
+  it('should render an Accordion without a handle', () => {
+    render(
+      <Accordion header={faker.lorem.sentence()} withHandle={false}>
+        <div>{faker.lorem.paragraph()}</div>
+      </Accordion>
+    );
+
+    expect(screen.queryByLabelText('accordion-handle')).not.toBeInTheDocument();
+  });
+
+  it('should render an Accordion with a transitioning panel', async () => {
+    const accordionContent = faker.lorem.paragraph();
+
+    render(
+      <Accordion header={faker.lorem.sentence()} withTransition>
+        <div>{accordionContent}</div>
+      </Accordion>
+    );
+
+    expect(
+      screen.queryByLabelText('accordion-transition-panel')
+    ).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByLabelText('accordion-header'));
+    await waitFor(() => {
+      const transitionPanel = screen.getByLabelText(
+        'accordion-transition-panel'
+      );
+      expect(transitionPanel).toBeVisible();
+      expect(screen.getByLabelText('accordion-panel')).toHaveTextContent(
+        accordionContent
+      );
+    });
+  });
+});
diff --git a/assets/js/components/Accordion/index.js b/assets/js/components/Accordion/index.js
new file mode 100644
index 0000000000..29f531dd87
--- /dev/null
+++ b/assets/js/components/Accordion/index.js
@@ -0,0 +1,3 @@
+import Accordion from './Accordion';
+
+export default Accordion;
diff --git a/assets/js/components/ChecksCatalog/CheckItem.jsx b/assets/js/components/ChecksCatalog/CheckItem.jsx
index ec2009ec75..8ccfa79bfe 100644
--- a/assets/js/components/ChecksCatalog/CheckItem.jsx
+++ b/assets/js/components/ChecksCatalog/CheckItem.jsx
@@ -1,20 +1,20 @@
 import React from 'react';
 
-import { Disclosure, Transition } from '@headlessui/react';
-
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 
 import PremiumPill from '@components/PremiumPill';
+import Accordion from '@components/Accordion';
 
 function CheckItem({ checkID, premium = false, description, remediation }) {
   return (
     <li>
-      <Disclosure>
-        <Disclosure.Button
-          as="div"
-          className="flex justify-between w-full cursor-pointer hover:bg-gray-100"
-        >
+      <Accordion
+        withHandle={false}
+        withTransition
+        rounded={false}
+        headerClassnames="hover:bg-gray-100"
+        header={
           <div className="check-row px-4 py-4 sm:px-6">
             <div className="flex items-center">
               <p className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
@@ -33,26 +33,16 @@ function CheckItem({ checkID, premium = false, description, remediation }) {
               </div>
             </div>
           </div>
-        </Disclosure.Button>
-        <Transition
-          enter="transition duration-100 ease-out"
-          enterFrom="transform opacity-0"
-          enterTo="transform opacity-100"
-          leave="transition duration-100 ease-out"
-          leaveFrom="transform opacity-100"
-          leaveTo="transform opacity-0"
-        >
-          <Disclosure.Panel className="check-panel border-none">
-            <div className="px-8 py-4 sm:px-8">
-              <div className="px-4 py-4 sm:px-4 bg-slate-100 rounded">
-                <ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]}>
-                  {remediation}
-                </ReactMarkdown>
-              </div>
-            </div>
-          </Disclosure.Panel>
-        </Transition>
-      </Disclosure>
+        }
+      >
+        <div className="check-panel px-8 py-4 sm:px-8 border-none">
+          <div className="px-4 py-4 sm:px-4 bg-slate-100 rounded">
+            <ReactMarkdown className="markdown" remarkPlugins={[remarkGfm]}>
+              {remediation}
+            </ReactMarkdown>
+          </div>
+        </div>
+      </Accordion>
     </li>
   );
 }
diff --git a/assets/js/components/ChecksCatalog/CheckItem.test.jsx b/assets/js/components/ChecksCatalog/CheckItem.test.jsx
index d359b2a662..fdc03907af 100644
--- a/assets/js/components/ChecksCatalog/CheckItem.test.jsx
+++ b/assets/js/components/ChecksCatalog/CheckItem.test.jsx
@@ -55,8 +55,7 @@ describe('ChecksCatalog CheckItem component', () => {
       />
     );
 
-    const checks = screen.getAllByRole('listitem');
-    const checkDiv = checks[0].querySelector('div');
+    const checkDiv = screen.getByText(check.id);
 
     expect(screen.queryByText(check.remediation)).not.toBeInTheDocument();
     await user.click(checkDiv);
diff --git a/assets/js/components/ChecksCatalog/ChecksCatalog.jsx b/assets/js/components/ChecksCatalog/ChecksCatalog.jsx
index 1e89447926..5c64a7d20e 100644
--- a/assets/js/components/ChecksCatalog/ChecksCatalog.jsx
+++ b/assets/js/components/ChecksCatalog/ChecksCatalog.jsx
@@ -11,6 +11,7 @@ import {
   checkProviderExists,
 } from '@components/ProviderLabel/ProviderLabel';
 import PageHeader from '@components/PageHeader';
+import Accordion from '@components/Accordion';
 import CatalogContainer from './CatalogContainer';
 import CheckItem from './CheckItem';
 import ProviderSelection from './ProviderSelection';
@@ -61,16 +62,12 @@ function ChecksCatalog() {
         <div>
           {Object.entries(groupBy(catalogData, 'group')).map(
             ([group, checks], idx) => (
-              <div
-                key={idx}
-                className="check-group bg-white shadow overflow-hidden sm:rounded-md mb-8"
-              >
-                <div className="bg-white px-4 py-5 border-b border-gray-200 sm:px-6">
-                  <h3 className="text-lg leading-6 font-medium text-gray-900">
-                    {group}
-                  </h3>
-                </div>
-                <ul className="divide-y divide-gray-200">
+              <ul key={idx}>
+                <Accordion
+                  defaultOpen
+                  className="check-group mb-4"
+                  header={group}
+                >
                   {checks.map((check) => (
                     <CheckItem
                       key={check.id}
@@ -80,8 +77,8 @@ function ChecksCatalog() {
                       remediation={check.remediation}
                     />
                   ))}
-                </ul>
-              </div>
+                </Accordion>
+              </ul>
             )
           )}
         </div>
diff --git a/assets/js/components/ChecksCatalog/ProviderSelection.jsx b/assets/js/components/ChecksCatalog/ProviderSelection.jsx
index 70e768b660..c4a8e7330d 100644
--- a/assets/js/components/ChecksCatalog/ProviderSelection.jsx
+++ b/assets/js/components/ChecksCatalog/ProviderSelection.jsx
@@ -36,7 +36,7 @@ function ProviderSelection({ className, providers, selected, onChange }) {
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Listbox.Options className="absolute w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+            <Listbox.Options className="absolute w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-[1]">
               {providers.map((provider, providerIdx) => (
                 <Listbox.Option
                   key={/* eslint-disable */ providerIdx}
diff --git a/assets/js/components/ClusterDetails/ChecksSelectionGroup.jsx b/assets/js/components/ClusterDetails/ChecksSelectionGroup.jsx
index e992f93839..42e277d3fa 100644
--- a/assets/js/components/ClusterDetails/ChecksSelectionGroup.jsx
+++ b/assets/js/components/ClusterDetails/ChecksSelectionGroup.jsx
@@ -2,9 +2,9 @@ import React from 'react';
 
 import classNames from 'classnames';
 
-import { Disclosure, Switch, Transition } from '@headlessui/react';
+import { Switch } from '@headlessui/react';
 
-import { EOS_KEYBOARD_ARROW_RIGHT } from 'eos-icons-react';
+import Accordion from '@components/Accordion';
 
 export const NONE_CHECKED = 'none';
 export const SOME_CHECKED = 'some';
@@ -31,71 +31,43 @@ function ChecksSelectionGroup({
   onChange = () => {},
 }) {
   return (
-    <div className="bg-white shadow overflow-hidden sm:rounded-md mb-1">
-      <Disclosure>
-        {({ open }) => (
-          <>
-            <div className="flex hover:bg-gray-100 border-b border-gray-200">
-              <Switch.Group
-                as="div"
-                className="flex items-center hover:bg-white pl-2"
-              >
-                <Switch
-                  checked={allSelected(selected)}
-                  className={classNames(
-                    switchClasses[selected],
-                    'tn-check-switch relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer focus:outline-none transition-colors ease-in-out duration-200'
-                  )}
-                  onChange={onChange}
-                >
-                  <span
-                    aria-hidden="true"
-                    className={classNames(
-                      translateClasses[selected],
-                      'inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
-                    )}
-                  />
-                </Switch>
-              </Switch.Group>
-              <Disclosure.Button
-                as="div"
-                className="flex justify-between w-full cursor-pointer bg-white px-4 py-5 sm:px-6 hover:bg-gray-100"
-              >
-                <h3 className="tn-check-switch text-lg leading-6 font-medium text-gray-900">
-                  {group}
-                </h3>
-
-                <EOS_KEYBOARD_ARROW_RIGHT
-                  className={`${open ? 'transform rotate-90' : ''}`}
-                />
-              </Disclosure.Button>
-            </div>
-
-            {open && (
-              <div>
-                <Transition
-                  enter="transition duration-100 ease-out"
-                  enterFrom="transform opacity-0"
-                  enterTo="transform opacity-100"
-                  leave="transition duration-100 ease-out"
-                  leaveFrom="transform opacity-100"
-                  leaveTo="transform opacity-0"
-                >
-                  <Disclosure.Panel className="border-none">
-                    <ul
-                      data-testid="check-selection-panel"
-                      className="divide-y divide-gray-200"
-                    >
-                      {children}
-                    </ul>
-                  </Disclosure.Panel>
-                </Transition>
-              </div>
-            )}
-          </>
-        )}
-      </Disclosure>
-    </div>
+    <Accordion
+      className="mb-1"
+      withTransition
+      headerClassnames="hover:bg-gray-100"
+      header={
+        <div className="flex">
+          <Switch.Group as="div" className="flex items-center pl-2">
+            <Switch
+              checked={allSelected(selected)}
+              className={classNames(
+                switchClasses[selected],
+                'tn-check-switch relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer focus:outline-none transition-colors ease-in-out duration-200'
+              )}
+              onChange={onChange}
+            >
+              <span
+                aria-hidden="true"
+                className={classNames(
+                  translateClasses[selected],
+                  'inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
+                )}
+              />
+            </Switch>
+          </Switch.Group>
+          <h3 className="tn-check-switch text-lg leading-6 font-medium text-gray-900 self-center p-6">
+            {group}
+          </h3>
+        </div>
+      }
+    >
+      <ul
+        data-testid="check-selection-panel"
+        className="divide-y divide-gray-200"
+      >
+        {children}
+      </ul>
+    </Accordion>
   );
 }
 
diff --git a/test/e2e/cypress/e2e/checks_catalog.cy.js b/test/e2e/cypress/e2e/checks_catalog.cy.js
index 9ad9e2214b..1eb5ae0afb 100644
--- a/test/e2e/cypress/e2e/checks_catalog.cy.js
+++ b/test/e2e/cypress/e2e/checks_catalog.cy.js
@@ -29,7 +29,7 @@ context('Checks catalog', () => {
   describe('Checks grouping and identification is correct', () => {
     Object.entries(groupBy(catalog, 'group')).forEach(([group, checks]) => {
       it(`should include group '${group}'`, () => {
-        cy.get('.check-group > div > h3').should('contain', group);
+        cy.get('.check-group > div > div > h3').should('contain', group);
       });
       checks.forEach(({ id }) => {
         it(`should include check '${id}'`, () => {