diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
index 74d2ffc44..a1a859a93 100644
--- a/components/ui/checkbox.tsx
+++ b/components/ui/checkbox.tsx
@@ -25,7 +25,7 @@ function Checkbox({
     >
       <CheckboxPrimitive.Indicator
         data-slot='checkbox-indicator'
-        className='flex items-center justify-center text-current transition-none'
+        className='flex items-center justify-center text-current transition-none w-full h-full'
       >
         <CheckIcon className='size-3.5' />
       </CheckboxPrimitive.Indicator>
diff --git a/components/ui/collapsible.tsx b/components/ui/collapsible.tsx
new file mode 100644
index 000000000..35708a6c7
--- /dev/null
+++ b/components/ui/collapsible.tsx
@@ -0,0 +1,33 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable react/react-in-jsx-scope */
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot='collapsible' {...props} />;
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot='collapsible-trigger'
+      {...props}
+    />
+  );
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot='collapsible-content'
+      {...props}
+    />
+  );
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/components/ui/radio-group.tsx b/components/ui/radio-group.tsx
new file mode 100644
index 000000000..b8ec9e4ff
--- /dev/null
+++ b/components/ui/radio-group.tsx
@@ -0,0 +1,45 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable react/prop-types */
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { CircleIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+function RadioGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot='radio-group'
+      className={cn('grid gap-3', className)}
+      {...props}
+    />
+  );
+}
+
+function RadioGroupItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot='radio-group-item'
+      className={cn(
+        'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot='radio-group-indicator'
+        className='relative flex items-center justify-center'
+      >
+        <CircleIcon className='fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2' />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+export { RadioGroup, RadioGroupItem };
diff --git a/cypress/components/Button.cy.tsx b/cypress/components/Button.cy.tsx
new file mode 100644
index 000000000..518d6cc4b
--- /dev/null
+++ b/cypress/components/Button.cy.tsx
@@ -0,0 +1,99 @@
+/* eslint-disable linebreak-style */
+import React from 'react';
+import { Button } from '@/components/ui/button';
+
+describe('Button Component', () => {
+  it('renders with default variant and size', () => {
+    cy.mount(<Button>Click me</Button>);
+
+    cy.get('button')
+      .should('have.class', 'bg-primary')
+      .and('have.class', 'h-9')
+      .and('have.class', 'px-4')
+      .and('have.class', 'py-2');
+  });
+
+  it('renders with different variants', () => {
+    cy.mount(
+      <div className='flex gap-2'>
+        <Button variant='default'>Default</Button>
+        <Button variant='destructive'>Destructive</Button>
+        <Button variant='outline'>Outline</Button>
+        <Button variant='secondary'>Secondary</Button>
+        <Button variant='ghost'>Ghost</Button>
+        <Button variant='link'>Link</Button>
+      </div>,
+    );
+
+    cy.get('button').eq(0).should('have.class', 'bg-primary');
+    cy.get('button').eq(1).should('have.class', 'bg-destructive');
+    cy.get('button').eq(2).should('have.class', 'border');
+    cy.get('button').eq(3).should('have.class', 'bg-secondary');
+    cy.get('button').eq(4).should('have.class', 'hover:bg-accent');
+    cy.get('button').eq(5).should('have.class', 'text-primary');
+  });
+
+  it('renders with different sizes', () => {
+    cy.mount(
+      <div className='flex gap-2'>
+        <Button size='default'>Default</Button>
+        <Button size='sm'>Small</Button>
+        <Button size='lg'>Large</Button>
+        <Button size='icon'>Icon</Button>
+      </div>,
+    );
+
+    cy.get('button').eq(0).should('have.class', 'h-9');
+    cy.get('button').eq(1).should('have.class', 'h-8');
+    cy.get('button').eq(2).should('have.class', 'h-10');
+    cy.get('button').eq(3).should('have.class', 'size-9');
+  });
+
+  it('handles disabled state', () => {
+    cy.mount(<Button disabled>Disabled Button</Button>);
+
+    cy.get('button')
+      .should('be.disabled')
+      .and('have.class', 'disabled:opacity-50')
+      .and('have.class', 'disabled:pointer-events-none');
+  });
+
+  it('renders with icon', () => {
+    cy.mount(
+      <Button>
+        <svg data-testid='test-icon' />
+        Button with Icon
+      </Button>,
+    );
+
+    cy.get('button').should('have.class', 'has-[>svg]:px-3');
+    cy.get('[data-testid="test-icon"]').should('exist');
+  });
+
+  it('applies custom className', () => {
+    cy.mount(<Button className='custom-class'>Custom Button</Button>);
+
+    cy.get('button').should('have.class', 'custom-class');
+  });
+
+  it('handles click events', () => {
+    const onClickSpy = cy.spy().as('onClickSpy');
+
+    cy.mount(<Button onClick={onClickSpy}>Click me</Button>);
+
+    cy.get('button').click();
+    cy.get('@onClickSpy').should('have.been.calledOnce');
+  });
+
+  it('renders as child component when asChild is true', () => {
+    cy.mount(
+      <Button asChild>
+        <a href='#test'>Link Button</a>
+      </Button>,
+    );
+
+    cy.get('a')
+      .should('have.attr', 'href', '#test')
+      .and('have.class', 'bg-primary');
+  });
+});
diff --git a/cypress/components/Checkbox.cy.tsx b/cypress/components/Checkbox.cy.tsx
index a301188eb..115dfdd24 100644
--- a/cypress/components/Checkbox.cy.tsx
+++ b/cypress/components/Checkbox.cy.tsx
@@ -66,6 +66,35 @@ describe('Checkbox Component', () => {
         .and('have.class', 'data-[state=checked]:border-blue-500')
         .and('have.class', 'data-[state=checked]:text-white');
     });
+
+    it('has properly centered icon when checked', () => {
+      cy.mount(
+        <Checkbox
+          label='Test Checkbox'
+          value='test'
+          name='test-checkbox'
+          checked={true}
+        />,
+      );
+
+      // Check that the indicator container has proper centering classes
+      cy.get('[data-slot="checkbox-indicator"]')
+        .should('have.class', 'flex')
+        .and('have.class', 'items-center')
+        .and('have.class', 'justify-center')
+        .and('have.class', 'w-full')
+        .and('have.class', 'h-full');
+
+      // Check that the icon exists and has proper sizing
+      cy.get('[data-slot="checkbox-indicator"] svg')
+        .should('exist')
+        .and('have.class', 'size-3.5');
+
+      // Verify the checkbox has the correct dimensions for centering
+      cy.get('button[role="checkbox"]')
+        .should('have.class', 'size-4')
+        .and('have.class', 'rounded-[4px]');
+    });
   });
 
   describe('Dark Mode', () => {
diff --git a/cypress/components/DropdownMenu.cy.tsx b/cypress/components/DropdownMenu.cy.tsx
new file mode 100644
index 000000000..d84a90aea
--- /dev/null
+++ b/cypress/components/DropdownMenu.cy.tsx
@@ -0,0 +1,101 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React from 'react';
+import DropdownMenu from '@/pages/tools/components/ui/DropdownMenu';
+import mockNextRouter, { MockRouter } from '../plugins/mockNextRouterUtils';
+
+describe('DropdownMenu Component', () => {
+  let mockRouter: MockRouter;
+  const mockIcon = <svg data-testid='test-icon' />;
+  const mockChildren = <div data-testid='test-content'>Test Content</div>;
+
+  beforeEach(() => {
+    mockRouter = mockNextRouter();
+  });
+
+  it('renders with basic props', () => {
+    cy.mount(
+      <DropdownMenu label='Test Menu' icon={mockIcon} testMode={true}>
+        {mockChildren}
+      </DropdownMenu>,
+    );
+
+    cy.contains('Test Menu').should('be.visible');
+    cy.get('[data-testid="test-icon"]').should('exist');
+  });
+
+  it('shows content when clicked', () => {
+    cy.mount(
+      <DropdownMenu label='Test Menu' icon={mockIcon} testMode={true}>
+        {mockChildren}
+      </DropdownMenu>,
+    );
+
+    cy.get('button').click();
+    cy.get('[data-testid="test-content"]').should('be.visible');
+  });
+
+  it('displays count badge when count is provided', () => {
+    cy.mount(
+      <DropdownMenu label='Test Menu' icon={mockIcon} count={5} testMode={true}>
+        {mockChildren}
+      </DropdownMenu>,
+    );
+
+    cy.contains('5').should('be.visible');
+  });
+
+  it('does not show count badge when count is 0', () => {
+    cy.mount(
+      <DropdownMenu label='Test Menu' icon={mockIcon} count={0} testMode={true}>
+        {mockChildren}
+      </DropdownMenu>,
+    );
+
+    cy.contains('0').should('not.exist');
+  });
+
+  it('rotates arrow icon when dropdown is toggled', () => {
+    cy.mount(
+      <DropdownMenu label='Test Menu' icon={mockIcon} testMode={true}>
+        {mockChildren}
+      </DropdownMenu>,
+    );
+
+    // Initially arrow should point down
+    cy.get('#arrow')
+      .should('have.attr', 'style')
+      .and('include', 'rotate(0deg)');
+
+    // Click to open
+    cy.get('button').click();
+    cy.get('#arrow')
+      .should('have.attr', 'style')
+      .and('include', 'rotate(180deg)');
+
+    // Click to close
+    cy.get('button').click();
+    cy.get('#arrow')
+      .should('have.attr', 'style')
+      .and('include', 'rotate(0deg)');
+  });
+
+  it('toggles content visibility multiple times', () => {
+    cy.mount(
+      <DropdownMenu label='Test Menu' icon={mockIcon} testMode={true}>
+        {mockChildren}
+      </DropdownMenu>,
+    );
+
+    // First toggle
+    cy.get('button').click();
+    cy.get('[data-testid="test-content"]').should('be.visible');
+
+    // Second toggle
+    cy.get('button').click();
+    cy.get('[data-testid="test-content"]').should('not.exist');
+
+    // Third toggle
+    cy.get('button').click();
+    cy.get('[data-testid="test-content"]').should('be.visible');
+  });
+});
diff --git a/cypress/components/Radio.cy.tsx b/cypress/components/Radio.cy.tsx
new file mode 100644
index 000000000..c53feec15
--- /dev/null
+++ b/cypress/components/Radio.cy.tsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import Radio from '@/pages/tools/components/ui/Radio';
+
+describe('Radio Component', () => {
+  it('renders with label and value', () => {
+    cy.mount(
+      <Radio
+        label='Test Radio'
+        value='test'
+        selectedValue=''
+        onChange={() => {}}
+      />,
+    );
+
+    cy.get('[role="radiogroup"]').should('exist');
+    cy.get('[role="radio"]').should('exist');
+    cy.contains('Test Radio').should('be.visible');
+  });
+
+  it('handles selection change', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+
+    cy.mount(
+      <Radio
+        label='Test Radio'
+        value='test'
+        selectedValue=''
+        onChange={onChangeSpy}
+      />,
+    );
+
+    cy.get('[role="radio"]').click();
+    cy.get('@onChangeSpy').should('have.been.calledWith', 'test');
+  });
+
+  it('shows correct selected state', () => {
+    cy.mount(
+      <Radio
+        label='Test Radio'
+        value='test'
+        selectedValue='test'
+        onChange={() => {}}
+      />,
+    );
+
+    cy.get('[role="radio"]').should('have.attr', 'data-state', 'checked');
+  });
+
+  it('has correct styling classes', () => {
+    cy.mount(
+      <Radio
+        label='Test Radio'
+        value='test'
+        selectedValue=''
+        onChange={() => {}}
+      />,
+    );
+
+    cy.get('label').should('have.class', 'flex');
+    cy.get('label').should('have.class', 'items-center');
+    cy.get('label').should('have.class', 'gap-3');
+    cy.get('label').should('have.class', 'px-4');
+    cy.get('label').should('have.class', 'py-2');
+  });
+
+  it('maintains selection state when re-rendered', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+
+    cy.mount(
+      <Radio
+        label='Test Radio'
+        value='test'
+        selectedValue=''
+        onChange={onChangeSpy}
+      />,
+    );
+
+    // First click to select
+    cy.get('[role="radio"]').click();
+    cy.get('@onChangeSpy').should('have.been.calledWith', 'test');
+
+    // Re-mount with the selected value
+    cy.mount(
+      <Radio
+        label='Test Radio'
+        value='test'
+        selectedValue='test'
+        onChange={onChangeSpy}
+      />,
+    );
+
+    // Verify the selection state is maintained
+    cy.get('[role="radio"]').should('have.attr', 'data-state', 'checked');
+  });
+});
diff --git a/package.json b/package.json
index ed3214aa7..bbec23239 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,9 @@
   "dependencies": {
     "@docsearch/react": "3.9.0",
     "@radix-ui/react-checkbox": "^1.3.1",
-    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-slot": "^1.2.2",
     "@types/jsonpath": "^0.2.4",
     "axios": "1.9.0",
     "babel-loader": "^9.2.1",
@@ -59,7 +61,6 @@
     "slugify": "^1.6.5",
     "tailwind-merge": "^3.3.0",
     "tw-animate-css": "^1.2.9",
-    "yarn": "1.22.22",
     "zero-fill": "^2.2.4",
     "zustand": "^5.0.0"
   },
diff --git a/pages/tools/components/GroupByMenu.tsx b/pages/tools/components/GroupByMenu.tsx
index b0c7bfafa..3af4fe0f0 100644
--- a/pages/tools/components/GroupByMenu.tsx
+++ b/pages/tools/components/GroupByMenu.tsx
@@ -1,4 +1,5 @@
 import React, { Dispatch, SetStateAction } from 'react';
+import { Button } from '~/components/ui/button';
 import { Transform } from '../hooks/useToolsTransform';
 
 interface GroupByMenuProps {
@@ -39,14 +40,15 @@ const GroupByMenu = ({ transform, setTransform }: GroupByMenuProps) => {
       <span className='text-slate-600 dark:text-slate-300'>GROUP BY:</span>
       {groupBy.map((group) => {
         return (
-          <button
+          <Button
             key={group.accessorKey}
             value={group.accessorKey}
             onClick={setGroupBy}
-            className={`px-4 py-2 self-stretch border dark:border-slate-800 rounded ${groupedBy === group.accessorKey ? 'bg-primary text-white' : 'bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200'}`}
+            variant={groupedBy === group.accessorKey ? 'default' : 'outline'}
+            className={`${groupedBy === group.accessorKey ? 'text-white dark:text-slate-900 dark:bg-[#bfdbfe]' : 'dark:bg-[#0f172a] text-black dark:text-slate-300 dark:border-transparent'}`}
           >
             {group.label}
-          </button>
+          </Button>
         );
       })}
     </div>
diff --git a/pages/tools/components/SearchBar.tsx b/pages/tools/components/SearchBar.tsx
index a4f281d72..05b54cae2 100644
--- a/pages/tools/components/SearchBar.tsx
+++ b/pages/tools/components/SearchBar.tsx
@@ -2,11 +2,18 @@ import React, { useEffect, useState } from 'react';
 import { Input } from '@/components/ui/input';
 import type { Transform } from '../hooks/useToolsTransform';
 
-const SearchBar = ({ transform }: { transform: Transform }) => {
+interface SearchBarProps {
+  transform: Transform;
+  onQueryChange?: (query: string) => void;
+}
+
+const SearchBar = ({ transform, onQueryChange }: SearchBarProps) => {
   const [query, setQuery] = useState(transform.query);
 
   const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setQuery(e.target.value);
+    const newQuery = e.target.value;
+    setQuery(newQuery);
+    onQueryChange?.(newQuery);
   };
 
   useEffect(() => {
diff --git a/pages/tools/components/Sidebar.tsx b/pages/tools/components/Sidebar.tsx
index 0d1571761..e6673b813 100644
--- a/pages/tools/components/Sidebar.tsx
+++ b/pages/tools/components/Sidebar.tsx
@@ -1,9 +1,16 @@
-import React, { Dispatch, SetStateAction, useRef } from 'react';
+import React, {
+  Dispatch,
+  SetStateAction,
+  useRef,
+  useState,
+  useEffect,
+} from 'react';
 import LanguageIcon from '~/public/icons/language.svg';
 import ToolingIcon from '~/public/icons/tooling.svg';
 import EnvironmentIcon from '~/public/icons/environment.svg';
 import DialectIcon from '~/public/icons/dialect.svg';
 import LicenseIcon from '~/public/icons/license.svg';
+import { Button } from '~/components/ui/button';
 import DropdownMenu from './ui/DropdownMenu';
 import Checkbox from './ui/Checkbox';
 import SearchBar from './SearchBar';
@@ -36,6 +43,13 @@ export default function Sidebar({
   setIsSidebarOpen,
 }: SidebarProps) {
   const filterFormRef = useRef<HTMLFormElement>(null);
+  const [pendingSelections, setPendingSelections] =
+    useState<Transform>(transform);
+
+  // Sync pendingSelections with transform when transform changes
+  useEffect(() => {
+    setPendingSelections(transform);
+  }, [transform]);
 
   const filters = [
     { label: 'Language', accessorKey: 'languages' },
@@ -45,39 +59,28 @@ export default function Sidebar({
     { label: 'License', accessorKey: 'licenses' },
   ];
 
+  const handleCheckboxChange = (
+    name: string,
+    value: string,
+    checked: boolean,
+  ) => {
+    setPendingSelections((prev) => {
+      const currentValues = prev[name as keyof Transform] as string[];
+      const newValues = checked
+        ? [...currentValues, value]
+        : currentValues.filter((v) => v !== value);
+
+      return {
+        ...prev,
+        [name]: newValues,
+      };
+    });
+  };
+
   const applyFilters = (e: React.FormEvent) => {
     e.preventDefault();
-    if (!filterFormRef.current) return;
-    const formData = new FormData(filterFormRef.current);
-    setTransform((prev) => {
-      const newTransform = {
-        query: (formData.get('query') as Transform['query']) || '',
-        sortBy: prev.sortBy || 'name',
-        sortOrder: prev.sortOrder || 'ascending',
-        groupBy: prev.groupBy || 'toolingTypes',
-        languages: formData.getAll('languages').map((value) => value as string),
-        licenses: formData.getAll('licenses').map((value) => value as string),
-        drafts: formData
-          .getAll('drafts')
-          .map((value) => value) as Transform['drafts'],
-        toolingTypes: formData
-          .getAll('toolingTypes')
-          .map((value) => value as string),
-        environments: formData
-          .getAll('environments')
-          .map((value) => value as string),
-        showObsolete:
-          (formData.get('showObsolete') as string) === 'showObsolete'
-            ? 'true'
-            : 'false',
-        supportsBowtie:
-          (formData.get('supportsBowtie') as string) === 'supportsBowtie'
-            ? 'true'
-            : 'false',
-      } satisfies Transform;
-      postAnalytics({ eventType: 'query', eventPayload: newTransform });
-      return newTransform;
-    });
+    setTransform(pendingSelections);
+    postAnalytics({ eventType: 'query', eventPayload: pendingSelections });
     setIsSidebarOpen((prev) => !prev);
   };
 
@@ -85,6 +88,23 @@ export default function Sidebar({
     if (filterFormRef.current) {
       filterFormRef.current.reset();
     }
+
+    // Reset pending selections to initial empty state
+    const initialTransform: Transform = {
+      query: '',
+      sortBy: 'name',
+      sortOrder: 'ascending',
+      groupBy: 'toolingTypes',
+      languages: [],
+      licenses: [],
+      drafts: [],
+      toolingTypes: [],
+      environments: [],
+      showObsolete: 'false',
+      supportsBowtie: 'false',
+    };
+
+    setPendingSelections(initialTransform);
     resetTransform();
     setIsSidebarOpen((prev) => !prev);
   };
@@ -92,9 +112,15 @@ export default function Sidebar({
   return (
     <div className='pb-4 top-12 mx-auto lg:ml-4 lg:mt-8 w-4/5 h-fit'>
       <form onSubmit={applyFilters} ref={filterFormRef} className='w-full'>
-        <SearchBar transform={transform} />
+        <SearchBar
+          transform={pendingSelections}
+          onQueryChange={(query) =>
+            setPendingSelections((prev) => ({ ...prev, query }))
+          }
+        />
         {filters.map(({ label, accessorKey }) => {
-          const checkedValues = transform[accessorKey as keyof Transform] || [];
+          const checkedValues =
+            pendingSelections[accessorKey as keyof Transform] || [];
           const IconComponent =
             filterIcons[accessorKey as keyof typeof filterIcons];
           return (
@@ -102,6 +128,7 @@ export default function Sidebar({
               key={accessorKey}
               label={label}
               icon={<IconComponent />}
+              count={checkedValues.length}
             >
               {filterCriteria[accessorKey as FilterCriteriaFields]
                 ?.map(String)
@@ -116,6 +143,9 @@ export default function Sidebar({
                     value={filterOption}
                     name={accessorKey}
                     checked={checkedValues.includes(filterOption)}
+                    onChange={(checked) =>
+                      handleCheckboxChange(accessorKey, filterOption, checked)
+                    }
                   />
                 ))}
             </DropdownMenu>
@@ -125,28 +155,42 @@ export default function Sidebar({
           label='Show obsolete'
           value='showObsolete'
           name='showObsolete'
-          checked={transform['showObsolete'] === 'true'}
+          checked={pendingSelections['showObsolete'] === 'true'}
+          onChange={(checked) =>
+            setPendingSelections((prev) => ({
+              ...prev,
+              showObsolete: checked ? 'true' : 'false',
+            }))
+          }
         />
         <Checkbox
           label='Support Bowtie'
           value='supportsBowtie'
           name='supportsBowtie'
-          checked={transform['supportsBowtie'] === 'true'}
+          checked={pendingSelections['supportsBowtie'] === 'true'}
+          onChange={(checked) =>
+            setPendingSelections((prev) => ({
+              ...prev,
+              supportsBowtie: checked ? 'true' : 'false',
+            }))
+          }
         />
         <div className='w-full flex items-center justify-between mt-4 gap-2'>
-          <button
+          <Button
             type='submit'
-            className='bg-primary text-white px-4 py-2 rounded hover:bg-blue-700 focus:outline-none'
+            variant='default'
+            className='flex-1 text-white dark:bg-[#bfdbfe] dark:text-slate-900'
           >
             Apply Filters
-          </button>
-          <button
+          </Button>
+          <Button
             type='button'
-            className='bg-slate-200 dark:bg-slate-900 text-gray-700 dark:text-slate-200 px-4 py-2 rounded hover:bg-slate-300 focus:outline-none'
+            variant='outline'
             onClick={clearFilters}
+            className='flex-1 text-red-600 border-red-600 hover:bg-red-50 dark:bg-[#0f172a] dark:text-[#bfdbfe] dark:border-transparent'
           >
             Clear Filters
-          </button>
+          </Button>
         </div>
       </form>
     </div>
diff --git a/pages/tools/components/ToolingDetailModal.tsx b/pages/tools/components/ToolingDetailModal.tsx
index 36438448e..9bdcb82b8 100644
--- a/pages/tools/components/ToolingDetailModal.tsx
+++ b/pages/tools/components/ToolingDetailModal.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 
 import CancelIcon from '~/public/icons/cancel.svg';
+import { Button } from '~/components/ui/button';
 
 import Badge from './ui/Badge';
 import type { JSONSchemaTool } from '../JSONSchemaTool';
@@ -47,12 +48,14 @@ export default function ToolingDetailModal({
         style={{ overflowWrap: 'anywhere' }}
       >
         <div className='flex justify-end absolute top-0 right-0 mt-6 mr-6'>
-          <button
+          <Button
             onClick={onClose}
+            variant='ghost'
+            size='icon'
             className='text-gray-500 hover:text-gray-300'
           >
             <CancelIcon className='fill-current stroke-current w-4 h-4' />
-          </button>
+          </Button>
         </div>
         <div className='mt-4 flex flex-row items-center justify-start gap-2'>
           {tool.landscape?.logo && (
diff --git a/pages/tools/components/ToolingTable.tsx b/pages/tools/components/ToolingTable.tsx
index ba68efb1b..95bdc6ec7 100644
--- a/pages/tools/components/ToolingTable.tsx
+++ b/pages/tools/components/ToolingTable.tsx
@@ -9,6 +9,7 @@ import React, {
 import { Headline2 } from '~/components/Headlines';
 import InfoIcon from '~/public/icons/icons8-info.svg';
 import OutLinkIcon from '~/public/icons/outlink.svg';
+import { Button } from '~/components/ui/button';
 
 import toTitleCase from '../lib/toTitleCase';
 import type { GroupedTools, Transform } from '../hooks/useToolsTransform';
@@ -400,7 +401,8 @@ const TableSortableColumnHeader = ({
 
   return (
     <TableColumnHeader attributes={propAttributes}>
-      <button
+      <Button
+        variant='ghost'
         className='flex items-center focus:outline-none'
         onClick={sortByColumn}
       >
@@ -421,7 +423,7 @@ const TableSortableColumnHeader = ({
             />
           </svg>
         )}
-      </button>
+      </Button>
     </TableColumnHeader>
   );
 };
diff --git a/pages/tools/components/ui/Checkbox.tsx b/pages/tools/components/ui/Checkbox.tsx
index 934a93f1b..4337e945a 100644
--- a/pages/tools/components/ui/Checkbox.tsx
+++ b/pages/tools/components/ui/Checkbox.tsx
@@ -7,12 +7,14 @@ export default function Checkbox({
   name,
   checked,
   disabled,
+  onChange,
 }: {
   label: string;
   value: string;
   name: string;
   checked?: boolean;
   disabled?: boolean;
+  onChange?: (checked: boolean) => void;
 }) {
   return (
     <label className='flex items-center gap-3 px-4 py-2 cursor-pointer bg-slate-200 dark:bg-slate-900 hover:bg-slate-300 dark:hover:bg-slate-800 transition-colors duration-200 border border-slate-300 dark:border-slate-700 rounded-md my-2'>
@@ -21,6 +23,7 @@ export default function Checkbox({
         name={name}
         defaultChecked={checked}
         disabled={disabled}
+        onCheckedChange={onChange}
         className='h-5 w-5 border data-[state=checked]:bg-blue-500 data-[state=checked]:border-blue-500 data-[state=checked]:text-white dark:data-[state=checked]:bg-[#bfdbfe] dark:data-[state=checked]:border-[#bfdbfe] dark:data-[state=checked]:text-black border-gray-500 dark:border-slate-600'
       />
       <span className='text-gray-700 dark:text-slate-300 font-medium'>
diff --git a/pages/tools/components/ui/DropdownMenu.tsx b/pages/tools/components/ui/DropdownMenu.tsx
index 78beb8144..3b7ba470b 100644
--- a/pages/tools/components/ui/DropdownMenu.tsx
+++ b/pages/tools/components/ui/DropdownMenu.tsx
@@ -1,4 +1,6 @@
-import classnames from 'classnames';
+/* eslint-disable linebreak-style */
+/* eslint-disable react-hooks/rules-of-hooks */
+/* eslint-disable linebreak-style */
 import { useRouter } from 'next/router';
 import React, {
   type ReactElement,
@@ -6,17 +8,25 @@ import React, {
   useEffect,
   useState,
 } from 'react';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
 
 interface DropdownMenuProps {
   children: ReactNode;
   label: string;
   icon: ReactElement;
+  count?: number;
+  testMode?: boolean;
 }
 
 export default function DropdownMenu({
   children,
   label,
   icon,
+  count = 0,
 }: DropdownMenuProps) {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const router = useRouter();
@@ -26,53 +36,53 @@ export default function DropdownMenu({
   }, [router]);
 
   return (
-    <div className='my-2 bg-slate-200 dark:bg-slate-900 p-2 rounded cursor-pointer'>
-      <div
-        className='w-full flex justify-between items-center align-middle cursor-pointer'
-        onClick={() => {
-          setIsDropdownOpen((prev) => !prev);
-        }}
-      >
-        {React.cloneElement(icon, {
-          className: 'mr-2 ml-2',
-        })}
-        <div className='text-slate-900 dark:text-slate-300 font-bold mr-auto'>
-          {label}
-        </div>
-        <svg
-          style={{
-            transform: `${isDropdownOpen ? 'rotate(180deg)' : 'rotate(0)'}`,
-            transition: 'all 0.2s linear',
-            cursor: 'pointer',
-          }}
-          id='arrow'
-          xmlns='http://www.w3.org/2000/svg'
-          fill='none'
-          height='32'
-          viewBox='0 0 24 24'
-          width='24'
-        >
-          <path
-            clipRule='evenodd'
-            d='m16.5303 8.96967c.2929.29289.2929.76777 0 1.06063l-4 4c-.2929.2929-.7677.2929-1.0606 0l-4.00003-4c-.29289-.29286-.29289-.76774 0-1.06063s.76777-.29289 1.06066 0l3.46967 3.46963 3.4697-3.46963c.2929-.29289.7677-.29289 1.0606 0z'
-            fill='#707070'
-            fillRule='evenodd'
-          />
-        </svg>
-      </div>
+    <div className='my-2 bg-slate-200 dark:bg-slate-900 p-2 rounded cursor-pointer transition-all duration-200 group'>
+      <Collapsible open={isDropdownOpen} onOpenChange={setIsDropdownOpen}>
+        <CollapsibleTrigger className='w-full flex justify-between items-center align-middle cursor-pointer'>
+          <div className='flex items-center'>
+            {React.cloneElement(icon, {
+              className:
+                'mr-2 ml-2 transition-transform duration-200 group-hover:scale-110',
+            })}
+            <div className='text-slate-900 dark:text-slate-300 font-bold transition-all duration-200 group-hover:text-blue-600 dark:group-hover:text-[#bfdbfe] group-hover:scale-105'>
+              {label}
+            </div>
+          </div>
+          <div className='flex items-center gap-2'>
+            {count > 0 && (
+              <span className='bg-primary text-white dark:bg-[#bfdbfe] dark:text-slate-900 text-xs px-2 py-0.5 rounded-full transition-transform duration-200 group-hover:scale-105'>
+                {count}
+              </span>
+            )}
+            <svg
+              style={{
+                transform: `${isDropdownOpen ? 'rotate(180deg)' : 'rotate(0)'}`,
+                transition: 'all 0.2s linear',
+                cursor: 'pointer',
+              }}
+              id='arrow'
+              xmlns='http://www.w3.org/2000/svg'
+              fill='none'
+              height='32'
+              viewBox='0 0 24 24'
+              width='24'
+            >
+              <path
+                clipRule='evenodd'
+                d='m16.5303 8.96967c.2929.29289.2929.76777 0 1.06063l-4 4c-.2929.2929-.7677.2929-1.0606 0l-4.00003-4c-.29289-.29286-.29289-.76774 0-1.06063s.76777-.29289 1.06066 0l3.46967 3.46963 3.4697-3.46963c.2929-.29289.7677-.29289 1.0606 0z'
+                fill='#707070'
+                fillRule='evenodd'
+              />
+            </svg>
+          </div>
+        </CollapsibleTrigger>
 
-      <div
-        className={classnames(
-          'tools-dropdown-menu',
-          'ml-0 mt-0 overflow-hidden transition-all duration-500 ease-in-out',
-          {
-            'max-h-0 opacity-0 invisible': !isDropdownOpen,
-            'max-h-80 overflow-y-auto opacity-100 visible': isDropdownOpen,
-          },
-        )}
-      >
-        {children}
-      </div>
+        <CollapsibleContent className='ml-0 mt-0 overflow-hidden transition-all duration-500 ease-in-out data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up'>
+          <div className='max-h-80 overflow-y-auto transition-all duration-500 ease-in-out'>
+            {children}
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
     </div>
   );
 }
diff --git a/pages/tools/components/ui/Radio.tsx b/pages/tools/components/ui/Radio.tsx
index 911500ff7..cccb85361 100644
--- a/pages/tools/components/ui/Radio.tsx
+++ b/pages/tools/components/ui/Radio.tsx
@@ -1,4 +1,5 @@
-import React, { ChangeEventHandler } from 'react';
+import React from 'react';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
 
 export default function Radio({
   label,
@@ -9,24 +10,14 @@ export default function Radio({
   label: string;
   value: string;
   selectedValue: string;
-  onChange: ChangeEventHandler<HTMLInputElement>;
+  onChange: (value: string) => void;
 }) {
   return (
-    <label className='flex items-center gap-3 px-4 py-2'>
-      <input
-        type='radio'
-        value={value}
-        checked={selectedValue === value}
-        onChange={onChange}
-        className='hidden'
-        id={value}
-      />
-      <span className='w-4 h-4 inline-block rounded-full border-2 border-gray-300 flex-shrink-0 relative'>
-        <span
-          className={`w-2 h-2 bg-blue-600 rounded-full absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 transition-opacity duration-200 ${selectedValue === value ? 'opacity-100' : 'opacity-0'}`}
-        ></span>
-      </span>
-      <span className='text-gray-700 font-medium'>{label}</span>
-    </label>
+    <RadioGroup value={selectedValue} onValueChange={onChange}>
+      <label className='flex items-center gap-3 px-4 py-2'>
+        <RadioGroupItem value={value} id={value} className='border-gray-300' />
+        <span className='text-gray-700 font-medium'>{label}</span>
+      </label>
+    </RadioGroup>
   );
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 45f25144e..30c6ce84c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -45,6 +45,20 @@ module.exports = {
     },
 
     extend: {
+      keyframes: {
+        'collapsible-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-collapsible-content-height)' },
+        },
+        'collapsible-up': {
+          from: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'collapsible-down': 'collapsible-down 0.5s ease-in-out',
+        'collapsible-up': 'collapsible-up 0.5s ease-in-out',
+      },
       backgroundImage: {
         'gradient-radial':
           'linear-gradient(72.68deg, #002CC4 28.97%, #5468FF 145.47%)',
diff --git a/yarn.lock b/yarn.lock
index 279aa1e66..d3f9b419d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3324,6 +3324,54 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-collapsible@npm:^1.1.11":
+  version: 1.1.11
+  resolution: "@radix-ui/react-collapsible@npm:1.1.11"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.2"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-id": "npm:1.1.1"
+    "@radix-ui/react-presence": "npm:1.1.4"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-use-controllable-state": "npm:1.2.2"
+    "@radix-ui/react-use-layout-effect": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/fa2de539ef06e2b2d18acebb12a34ce1534ca88bd484b7359aac05534d1e551fe83eaafbf60915c00161bb370f0dc9fc303903133510dea0a59fd018155b7db5
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-collection@npm:1.1.7":
+  version: 1.1.7
+  resolution: "@radix-ui/react-collection@npm:1.1.7"
+  dependencies:
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-slot": "npm:1.2.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/fa321a7300095508491f75414f02b243f0c3f179dc0728cfd115e2ea9f6f48f1516532b59f526d9ac81bbab63cd98a052074b4703ec0b9428fac945ebabec5fd
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-compose-refs@npm:1.1.2":
   version: 1.1.2
   resolution: "@radix-ui/react-compose-refs@npm:1.1.2"
@@ -3350,6 +3398,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-direction@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-direction@npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/7a89d9291f846a3105e45f4df98d6b7a08f8d7b30acdcd253005dc9db107ee83cbbebc9e47a9af1e400bcd47697f1511ceab23a399b0da854488fc7220482ac9
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-id@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-id@npm:1.1.1"
+  dependencies:
+    "@radix-ui/react-use-layout-effect": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/7d12e76818763d592c331277ef62b197e2e64945307e650bd058f0090e5ae48bbd07691b23b7e9e977901ef4eadcb3e2d5eaeb17a13859083384be83fc1292c7
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-presence@npm:1.1.4":
   version: 1.1.4
   resolution: "@radix-ui/react-presence@npm:1.1.4"
@@ -3389,7 +3465,81 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:1.2.2":
+"@radix-ui/react-primitive@npm:2.1.3":
+  version: 2.1.3
+  resolution: "@radix-ui/react-primitive@npm:2.1.3"
+  dependencies:
+    "@radix-ui/react-slot": "npm:1.2.3"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/fdff9b84913bb4172ef6d3af7442fca5f9bba5f2709cba08950071f819d7057aec3a4a2d9ef44cf9cbfb8014d02573c6884a04cff175895823aaef809ebdb034
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-radio-group@npm:^1.3.7":
+  version: 1.3.7
+  resolution: "@radix-ui/react-radio-group@npm:1.3.7"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.2"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-direction": "npm:1.1.1"
+    "@radix-ui/react-presence": "npm:1.1.4"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-roving-focus": "npm:1.1.10"
+    "@radix-ui/react-use-controllable-state": "npm:1.2.2"
+    "@radix-ui/react-use-previous": "npm:1.1.1"
+    "@radix-ui/react-use-size": "npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/3989806adaa0db05495951ecd00d813bad49c97685064c6e1714a37c5c4db7f563848c159e530d2554aadf0bca8d1292d22263f549b0709f8356ad75f42cf8b3
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-roving-focus@npm:1.1.10":
+  version: 1.1.10
+  resolution: "@radix-ui/react-roving-focus@npm:1.1.10"
+  dependencies:
+    "@radix-ui/primitive": "npm:1.1.2"
+    "@radix-ui/react-collection": "npm:1.1.7"
+    "@radix-ui/react-compose-refs": "npm:1.1.2"
+    "@radix-ui/react-context": "npm:1.1.2"
+    "@radix-ui/react-direction": "npm:1.1.1"
+    "@radix-ui/react-id": "npm:1.1.1"
+    "@radix-ui/react-primitive": "npm:2.1.3"
+    "@radix-ui/react-use-callback-ref": "npm:1.1.1"
+    "@radix-ui/react-use-controllable-state": "npm:1.2.2"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/afc8faed4d43807cb6b9e163995f5224fc11d4480aa8033274c858a2fc01f04d190e9fbf209db21be4f6d6f48689698ab900a8bd39e453ef55d00d58c2b840bb
+  languageName: node
+  linkType: hard
+
+"@radix-ui/react-slot@npm:1.2.2, @radix-ui/react-slot@npm:^1.2.2":
   version: 1.2.2
   resolution: "@radix-ui/react-slot@npm:1.2.2"
   dependencies:
@@ -3404,7 +3554,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:^1.2.3":
+"@radix-ui/react-slot@npm:1.2.3":
   version: 1.2.3
   resolution: "@radix-ui/react-slot@npm:1.2.3"
   dependencies:
@@ -3419,6 +3569,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-use-callback-ref@npm:1.1.1":
+  version: 1.1.1
+  resolution: "@radix-ui/react-use-callback-ref@npm:1.1.1"
+  peerDependencies:
+    "@types/react": "*"
+    react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 10c0/5f6aff8592dea6a7e46589808912aba3fb3b626cf6edd2b14f01638b61dbbe49eeb9f67cd5601f4c15b2fb547b9a7e825f7c4961acd4dd70176c969ae405f8d8
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-use-controllable-state@npm:1.2.2":
   version: 1.2.2
   resolution: "@radix-ui/react-use-controllable-state@npm:1.2.2"
@@ -8549,7 +8712,9 @@ __metadata:
     "@docsearch/react": "npm:3.9.0"
     "@next/eslint-plugin-next": "npm:^14.0.1"
     "@radix-ui/react-checkbox": "npm:^1.3.1"
-    "@radix-ui/react-slot": "npm:^1.2.3"
+    "@radix-ui/react-collapsible": "npm:^1.1.11"
+    "@radix-ui/react-radio-group": "npm:^1.3.7"
+    "@radix-ui/react-slot": "npm:^1.2.2"
     "@svgr/webpack": "npm:^8.1.0"
     "@types/babel__core": "npm:^7"
     "@types/babel__preset-env": "npm:^7"
@@ -8613,7 +8778,6 @@ __metadata:
     tw-animate-css: "npm:^1.2.9"
     typescript: "npm:5.7.2"
     webpack: "npm:^5.94.0"
-    yarn: "npm:1.22.22"
     zero-fill: "npm:^2.2.4"
     zustand: "npm:^5.0.0"
   languageName: unknown
@@ -12387,16 +12551,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yarn@npm:1.22.22":
-  version: 1.22.22
-  resolution: "yarn@npm:1.22.22"
-  bin:
-    yarn: bin/yarn.js
-    yarnpkg: bin/yarn.js
-  checksum: 10c0/8c77198c93d7542e7f4e131c63b66de357b7076ecfbcfe709ec0d674115c2dd9edaa45196e5510e6e9366d368707a802579e3402071002e1c9d9a99d491478de
-  languageName: node
-  linkType: hard
-
 "yauzl@npm:^2.10.0":
   version: 2.10.0
   resolution: "yauzl@npm:2.10.0"