diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte
index 9f0df48aa..9f5841968 100644
--- a/apps/web/src/routes/+page.svelte
+++ b/apps/web/src/routes/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import * as Accordion from '@repo/ui/accordion'
   import { Button } from '@repo/ui/button'
   import { Chip } from '@repo/ui/chip'
   import { CourseCard } from '@repo/ui/course-card'
@@ -41,3 +42,12 @@
 
 <h1>RecommendedTag</h1>
 <RecommendedTag />
+
+<Accordion.Root>
+  <Accordion.Item value="item-1">
+    <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
+    <Accordion.Content>
+      Yes. It adheres to the WAI-ARIA design pattern.
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Root>
diff --git a/packages/ui/package.json b/packages/ui/package.json
index e49d600ee..ca15644c5 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -27,7 +27,7 @@
     "vitest": "^2.1.8"
   },
   "dependencies": {
-    "bits-ui": "^0.21.16",
+    "bits-ui": "^0.22.0",
     "clsx": "^2.1.1",
     "lucide-svelte": "^0.468.0",
     "tailwind-merge": "^2.5.5",
diff --git a/packages/ui/src/components/accordion/accordion-content.svelte b/packages/ui/src/components/accordion/accordion-content.svelte
new file mode 100644
index 000000000..73ae7eb18
--- /dev/null
+++ b/packages/ui/src/components/accordion/accordion-content.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { Accordion as AccordionPrimitive } from 'bits-ui'
+  import { slide } from 'svelte/transition'
+
+  import { cn } from '../../utils'
+
+  type $$Props = AccordionPrimitive.ContentProps
+
+  let className: $$Props['class'] = undefined
+  export let transition: $$Props['transition'] = slide
+  export let transitionConfig: $$Props['transitionConfig'] = {
+    duration: 200,
+  }
+  export { className as class }
+</script>
+
+<AccordionPrimitive.Content
+  class="{cn('overflow-hidden text-sm transition-all', className)}"
+  {transition}
+  {transitionConfig}
+  {...$$restProps}
+>
+  <div class="pb-4 pt-0">
+    <slot />
+  </div>
+</AccordionPrimitive.Content>
diff --git a/packages/ui/src/components/accordion/accordion-item.svelte b/packages/ui/src/components/accordion/accordion-item.svelte
new file mode 100644
index 000000000..9babe2511
--- /dev/null
+++ b/packages/ui/src/components/accordion/accordion-item.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { Accordion as AccordionPrimitive } from 'bits-ui'
+
+  import { cn } from '../../utils'
+
+  type $$Props = AccordionPrimitive.ItemProps
+
+  let className: $$Props['class'] = undefined
+  export let value: $$Props['value']
+  export { className as class }
+</script>
+
+<AccordionPrimitive.Item {value} class="{cn('', className)}" {...$$restProps}>
+  <slot />
+</AccordionPrimitive.Item>
diff --git a/packages/ui/src/components/accordion/accordion-trigger.svelte b/packages/ui/src/components/accordion/accordion-trigger.svelte
new file mode 100644
index 000000000..fdfada8df
--- /dev/null
+++ b/packages/ui/src/components/accordion/accordion-trigger.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { Accordion as AccordionPrimitive } from 'bits-ui'
+  import { ChevronDown } from 'lucide-svelte'
+
+  import { cn } from '../../utils'
+
+  type $$Props = AccordionPrimitive.TriggerProps
+  type $$Events = AccordionPrimitive.TriggerEvents
+
+  let className: $$Props['class'] = undefined
+  export let level: AccordionPrimitive.HeaderProps['level'] = 3
+  export { className as class }
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+  <AccordionPrimitive.Trigger
+    class="{cn(
+      'flex flex-1 items-center justify-between py-4 font-medium transition-all [&[data-state=open]>svg]:rotate-180 px-2',
+      className,
+    )}"
+    {...$$restProps}
+    on:click
+  >
+    <slot />
+    <ChevronDown class="h-6 w-6 transition-transform duration-200" />
+  </AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>
diff --git a/packages/ui/src/components/accordion/accordion.stories.svelte b/packages/ui/src/components/accordion/accordion.stories.svelte
new file mode 100644
index 000000000..7b0cfcd4a
--- /dev/null
+++ b/packages/ui/src/components/accordion/accordion.stories.svelte
@@ -0,0 +1,116 @@
+<script context="module" lang="ts">
+  import type { Meta } from '@storybook/svelte'
+
+  import * as Accordion from './index.js'
+
+  export const meta = {
+    title: 'Atom/Accordion',
+
+    tags: ['autodocs'],
+    parameters: {
+      docs: {
+        description: {
+          component: `
+The **Accordion** component is used to organize content into expandable and collapsible sections. It is ideal for displaying structured data in a concise and interactive way.
+
+This example demonstrates the use of each sub-component:
+- **Accordion.Root**: The root container for the Accordion, which manages the overall state and behavior of the component.
+- **Accordion.Item**: Represents an individual section within the Accordion. Each item can be expanded or collapsed independently.
+- **Accordion.Trigger**: The clickable element that toggles the visibility of the corresponding content.
+- **Accordion.Content**: The content displayed when the associated Accordion.Item is expanded.
+
+You can use this component to improve content accessibility and maintain a clean UI design.
+          `,
+        },
+      },
+    },
+    argTypes: {},
+  } satisfies Meta<typeof Accordion.Root>
+</script>
+
+<script lang="ts">
+  import { Story } from '@storybook/addon-svelte-csf'
+</script>
+
+<!-- 👇 Example story using the Accordion component -->
+<Story name="Normal Accordion">
+  <Accordion.Root class="w-full sm:max-w-[70%]">
+    <Accordion.Item value="item-1">
+      <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
+      <Accordion.Content>
+        Yes. It adheres to the WAI-ARIA design pattern, ensuring accessibility
+        for users with assistive technologies.
+      </Accordion.Content>
+    </Accordion.Item>
+    <Accordion.Item value="item-2">
+      <Accordion.Trigger>Is it styled?</Accordion.Trigger>
+      <Accordion.Content>
+        Yes. It comes with default styles that align with the aesthetic of other
+        components, but you can customize it as needed.
+      </Accordion.Content>
+    </Accordion.Item>
+    <Accordion.Item value="item-3">
+      <Accordion.Trigger>Is it animated?</Accordion.Trigger>
+      <Accordion.Content>
+        Yes. The component includes smooth animations by default. However, you
+        can disable animations if you prefer a simpler interaction.
+      </Accordion.Content>
+    </Accordion.Item>
+  </Accordion.Root>
+</Story>
+
+<Story name="Root Example">
+  <Accordion.Root class="bg-gray-50 border border-gray-200 rounded-lg p-6">
+    <Accordion.Item value="item-1">
+      <Accordion.Trigger>What is the purpose of Root?</Accordion.Trigger>
+      <Accordion.Content>
+        The Root component serves as the container for all Accordion items. It
+        manages the state and controls the behavior of the entire Accordion.
+      </Accordion.Content>
+    </Accordion.Item>
+  </Accordion.Root>
+</Story>
+
+<Story name="Item Example">
+  <Accordion.Root>
+    <Accordion.Item value="item-1">
+      <Accordion.Trigger>What is an Item?</Accordion.Trigger>
+      <Accordion.Content>
+        The Item component represents an individual section in the Accordion.
+        Each Item has its own value and can be expanded or collapsed
+        independently.
+      </Accordion.Content>
+    </Accordion.Item>
+    <Accordion.Item value="item-2">
+      <Accordion.Trigger>Can multiple Items exist?</Accordion.Trigger>
+      <Accordion.Content>
+        Yes, multiple Items can exist within a single Accordion. Each Item is
+        treated as an independent section.
+      </Accordion.Content>
+    </Accordion.Item>
+  </Accordion.Root>
+</Story>
+
+<Story name="Trigger Example">
+  <Accordion.Root>
+    <Accordion.Item value="item-1">
+      <Accordion.Trigger>What is a Trigger?</Accordion.Trigger>
+      <Accordion.Content>
+        The Trigger component is the interactive element that toggles the
+        visibility of its associated Content.
+      </Accordion.Content>
+    </Accordion.Item>
+  </Accordion.Root>
+</Story>
+
+<Story name="Content Example">
+  <Accordion.Root>
+    <Accordion.Item value="item-1">
+      <Accordion.Trigger>What is Content?</Accordion.Trigger>
+      <Accordion.Content>
+        The Content component holds the information or elements that are
+        revealed when the Item is expanded.
+      </Accordion.Content>
+    </Accordion.Item>
+  </Accordion.Root>
+</Story>
diff --git a/packages/ui/src/components/accordion/index.ts b/packages/ui/src/components/accordion/index.ts
new file mode 100644
index 000000000..b098bfe1a
--- /dev/null
+++ b/packages/ui/src/components/accordion/index.ts
@@ -0,0 +1,18 @@
+import { Accordion as AccordionPrimitive } from 'bits-ui'
+
+import Content from './accordion-content.svelte'
+import Item from './accordion-item.svelte'
+import Trigger from './accordion-trigger.svelte'
+const Root = AccordionPrimitive.Root
+
+export {
+  //
+  Root as Accordion,
+  Content as AccordionContent,
+  Item as AccordionItem,
+  Trigger as AccordionTrigger,
+  Content,
+  Item,
+  Root,
+  Trigger,
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4feb23745..ecb5f4594 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -278,8 +278,8 @@ importers:
   packages/ui:
     dependencies:
       bits-ui:
-        specifier: ^0.21.16
-        version: 0.21.16(svelte@4.2.19)
+        specifier: ^0.22.0
+        version: 0.22.0(svelte@4.2.19)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -301,19 +301,19 @@ importers:
         version: link:../config
       '@storybook/addon-svelte-csf':
         specifier: ^4.2.0
-        version: 4.2.0(@storybook/svelte@8.4.7(storybook@8.4.7(prettier@3.4.2))(svelte@4.2.19))(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@6.0.3(@types/node@22.10.2)(jiti@1.21.6)(sass-embedded@1.83.0)(tsx@4.19.2)(yaml@2.6.1)))(storybook@8.4.7(prettier@3.4.2))(svelte@4.2.19)(vite@6.0.3(@types/node@22.10.2)(jiti@1.21.6)(sass-embedded@1.83.0)(tsx@4.19.2)(yaml@2.6.1))
+        version: 4.2.0(@storybook/svelte@8.4.7(storybook@8.4.7(prettier@3.4.2))(svelte@4.2.19))(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0)))(storybook@8.4.7(prettier@3.4.2))(svelte@4.2.19)(vite@5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0))
       '@storybook/svelte':
         specifier: ^8.4.7
         version: 8.4.7(storybook@8.4.7(prettier@3.4.2))(svelte@4.2.19)
       '@sveltejs/adapter-node':
         specifier: ^5.2.10
-        version: 5.2.10(@sveltejs/kit@2.11.1(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@6.0.3(@types/node@22.10.2)(jiti@1.21.6)(sass-embedded@1.83.0)(tsx@4.19.2)(yaml@2.6.1)))(svelte@4.2.19)(vite@6.0.3(@types/node@22.10.2)(jiti@1.21.6)(sass-embedded@1.83.0)(tsx@4.19.2)(yaml@2.6.1)))
+        version: 5.2.10(@sveltejs/kit@2.11.1(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0)))(svelte@4.2.19)(vite@5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0)))
       '@sveltejs/kit':
         specifier: ^2.11.1
-        version: 2.11.1(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@6.0.3(@types/node@22.10.2)(jiti@1.21.6)(sass-embedded@1.83.0)(tsx@4.19.2)(yaml@2.6.1)))(svelte@4.2.19)(vite@6.0.3(@types/node@22.10.2)(jiti@1.21.6)(sass-embedded@1.83.0)(tsx@4.19.2)(yaml@2.6.1))
+        version: 2.11.1(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0)))(svelte@4.2.19)(vite@5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^3.1.2
-        version: 3.1.2(svelte@4.2.19)(vite@6.0.3(@types/node@22.10.2)(jiti@1.21.6)(sass-embedded@1.83.0)(tsx@4.19.2)(yaml@2.6.1))
+        version: 3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0))
       svelte:
         specifier: ^4.2.18
         version: 4.2.19
@@ -1883,10 +1883,10 @@ packages:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
 
-  bits-ui@0.21.16:
-    resolution: {integrity: sha512-XFZ7/bK7j/K+5iktxX/ZpmoFHjYjpPzP5EOO/4bWiaFg5TG1iMcfjDhlBTQnJxD6BoVoHuqeZPHZvaTgF4Iv3Q==}
+  bits-ui@0.22.0:
+    resolution: {integrity: sha512-r7Fw1HNgA4YxZBRcozl7oP0bheQ8EHh+kfMBZJgyFISix8t4p/nqDcHLmBgIiJ3T5XjYnJRorYDjIWaCfhb5fw==}
     peerDependencies:
-      svelte: ^4.0.0 || ^5.0.0-next.118
+      svelte: ^4.0.0 || ^5.0.0
 
   brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
@@ -4889,6 +4889,21 @@ snapshots:
       storybook: 8.4.7(prettier@3.4.2)
       ts-dedent: 2.2.0
 
+  '@storybook/addon-svelte-csf@4.2.0(@storybook/svelte@8.4.7(storybook@8.4.7(prettier@3.4.2))(svelte@4.2.19))(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0)))(storybook@8.4.7(prettier@3.4.2))(svelte@4.2.19)(vite@5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0))':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@storybook/svelte': 8.4.7(storybook@8.4.7(prettier@3.4.2))(svelte@4.2.19)
+      '@storybook/types': 8.4.7(storybook@8.4.7(prettier@3.4.2))
+      dedent: 1.5.3
+      magic-string: 0.30.15
+      svelte: 4.2.19
+    optionalDependencies:
+      '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0))
+      vite: 5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0)
+    transitivePeerDependencies:
+      - babel-plugin-macros
+      - storybook
+
   '@storybook/addon-svelte-csf@4.2.0(@storybook/svelte@8.4.7(storybook@8.4.7(prettier@3.4.2))(svelte@4.2.19))(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@6.0.3(@types/node@22.10.2)(jiti@1.21.6)(sass-embedded@1.83.0)(tsx@4.19.2)(yaml@2.6.1)))(storybook@8.4.7(prettier@3.4.2))(svelte@4.2.19)(vite@6.0.3(@types/node@22.10.2)(jiti@1.21.6)(sass-embedded@1.83.0)(tsx@4.19.2)(yaml@2.6.1))':
     dependencies:
       '@babel/runtime': 7.26.0
@@ -5062,12 +5077,12 @@ snapshots:
       '@sveltejs/kit': 2.11.1(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0)))(svelte@4.2.19)(vite@5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0))
       import-meta-resolve: 4.1.0
 
-  '@sveltejs/adapter-node@5.2.10(@sveltejs/kit@2.11.1(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@6.0.3(@types/node@22.10.2)(jiti@1.21.6)(sass-embedded@1.83.0)(tsx@4.19.2)(yaml@2.6.1)))(svelte@4.2.19)(vite@6.0.3(@types/node@22.10.2)(jiti@1.21.6)(sass-embedded@1.83.0)(tsx@4.19.2)(yaml@2.6.1)))':
+  '@sveltejs/adapter-node@5.2.10(@sveltejs/kit@2.11.1(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0)))(svelte@4.2.19)(vite@5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0)))':
     dependencies:
       '@rollup/plugin-commonjs': 28.0.1(rollup@4.28.1)
       '@rollup/plugin-json': 6.1.0(rollup@4.28.1)
       '@rollup/plugin-node-resolve': 15.3.0(rollup@4.28.1)
-      '@sveltejs/kit': 2.11.1(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@6.0.3(@types/node@22.10.2)(jiti@1.21.6)(sass-embedded@1.83.0)(tsx@4.19.2)(yaml@2.6.1)))(svelte@4.2.19)(vite@6.0.3(@types/node@22.10.2)(jiti@1.21.6)(sass-embedded@1.83.0)(tsx@4.19.2)(yaml@2.6.1))
+      '@sveltejs/kit': 2.11.1(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0)))(svelte@4.2.19)(vite@5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0))
       rollup: 4.28.1
 
   '@sveltejs/kit@2.11.1(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0)))(svelte@4.2.19)(vite@5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0))':
@@ -5088,24 +5103,6 @@ snapshots:
       tiny-glob: 0.2.9
       vite: 5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0)
 
-  '@sveltejs/kit@2.11.1(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@6.0.3(@types/node@22.10.2)(jiti@1.21.6)(sass-embedded@1.83.0)(tsx@4.19.2)(yaml@2.6.1)))(svelte@4.2.19)(vite@6.0.3(@types/node@22.10.2)(jiti@1.21.6)(sass-embedded@1.83.0)(tsx@4.19.2)(yaml@2.6.1))':
-    dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@6.0.3(@types/node@22.10.2)(jiti@1.21.6)(sass-embedded@1.83.0)(tsx@4.19.2)(yaml@2.6.1))
-      '@types/cookie': 0.6.0
-      cookie: 0.6.0
-      devalue: 5.1.1
-      esm-env: 1.2.1
-      import-meta-resolve: 4.1.0
-      kleur: 4.1.5
-      magic-string: 0.30.15
-      mrmime: 2.0.0
-      sade: 1.8.1
-      set-cookie-parser: 2.7.1
-      sirv: 3.0.0
-      svelte: 4.2.19
-      tiny-glob: 0.2.9
-      vite: 6.0.3(@types/node@22.10.2)(jiti@1.21.6)(sass-embedded@1.83.0)(tsx@4.19.2)(yaml@2.6.1)
-
   '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0)))(svelte@4.2.19)(vite@5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0))':
     dependencies:
       '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.11(@types/node@22.10.2)(sass-embedded@1.83.0))
@@ -5447,7 +5444,7 @@ snapshots:
 
   binary-extensions@2.3.0: {}
 
-  bits-ui@0.21.16(svelte@4.2.19):
+  bits-ui@0.22.0(svelte@4.2.19):
     dependencies:
       '@internationalized/date': 3.6.0
       '@melt-ui/svelte': 0.76.2(svelte@4.2.19)