diff --git a/components.json b/components.json
index f0a7d4e..8de717f 100644
--- a/components.json
+++ b/components.json
@@ -1,14 +1,14 @@
 {
-	"$schema": "https://shadcn-svelte.com/schema.json",
-	"style": "default",
-	"tailwind": {
-		"config": "tailwind.config.js",
-		"css": "src/index.css",
-		"baseColor": "slate"
-	},
-	"aliases": {
-		"components": "src/lib/shadcnComponents",
-		"utils": "src/utils"
-	},
-	"typescript": true
-}
\ No newline at end of file
+  "$schema": "https://shadcn-svelte.com/schema.json",
+  "style": "default",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate"
+  },
+  "aliases": {
+    "components": "$src/lib/shadcnComponents",
+    "utils": "$src/utils"
+  },
+  "typescript": true
+}
diff --git a/package-lock.json b/package-lock.json
index 176c8be..65d0d1d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "Apache-2.0",
       "dependencies": {
         "@storybook/addons": "^7.6.17",
-        "bits-ui": "^0.21.15",
+        "bits-ui": "^0.21.16",
         "clsx": "^2.1.1",
         "svelte": "^4.2.19",
         "tailwind-merge": "^2.5.2"
@@ -2860,9 +2860,9 @@
       }
     },
     "node_modules/bits-ui": {
-      "version": "0.21.15",
-      "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.21.15.tgz",
-      "integrity": "sha512-+m5WSpJnFdCcNdXSTIVC1WYBozipO03qRh03GFWgrdxoHiolCfwW71EYG4LPCWYPG6KcTZV0Cj6iHSiZ7cdKdg==",
+      "version": "0.21.16",
+      "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.21.16.tgz",
+      "integrity": "sha512-XFZ7/bK7j/K+5iktxX/ZpmoFHjYjpPzP5EOO/4bWiaFg5TG1iMcfjDhlBTQnJxD6BoVoHuqeZPHZvaTgF4Iv3Q==",
       "dependencies": {
         "@internationalized/date": "^3.5.1",
         "@melt-ui/svelte": "0.76.2",
diff --git a/package.json b/package.json
index 544a072..a2ba883 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
   },
   "dependencies": {
     "@storybook/addons": "^7.6.17",
-    "bits-ui": "^0.21.15",
+    "bits-ui": "^0.21.16",
     "clsx": "^2.1.1",
     "svelte": "^4.2.19",
     "tailwind-merge": "^2.5.2"
diff --git a/src/assets/Check.svelte b/src/assets/Check.svelte
deleted file mode 100644
index 0b643fc..0000000
--- a/src/assets/Check.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_2578_353)">
-        <path d="M9.80685 1.78353L3.65879 9.16121L0.23584 5.64046L1.43083 4.47867L3.56344 6.67221L8.52648 0.716553L9.80685 1.78353Z" fill="black"/>
-    </g>
-    <defs>
-        <clipPath id="clip0_2578_353">
-            <rect width="10" height="10" fill="black"/>
-        </clipPath>
-    </defs>
-</svg>
diff --git a/src/assets/Chevron.svelte b/src/assets/Chevron.svelte
deleted file mode 100644
index 9f16e7f..0000000
--- a/src/assets/Chevron.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.792969 5.20706L2.20718 3.79285L8.00008 9.58574L13.793 3.79285L15.2072 5.20706L8.00008 12.4142L0.792969 5.20706Z" fill="black"/>
-</svg>
diff --git a/src/icons/Check.svelte b/src/icons/Check.svelte
new file mode 100644
index 0000000..f8bbd09
--- /dev/null
+++ b/src/icons/Check.svelte
@@ -0,0 +1,20 @@
+<svg
+  width="10"
+  height="10"
+  viewBox="0 0 10 10"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class={$$restProps.class}
+>
+  <g clip-path="url(#clip0_2578_353)">
+    <path
+      d="M9.80685 1.78353L3.65879 9.16121L0.23584 5.64046L1.43083 4.47867L3.56344 6.67221L8.52648 0.716553L9.80685 1.78353Z"
+      fill="black"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_2578_353">
+      <rect width="10" height="10" fill="black" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/src/icons/Chevron.svelte b/src/icons/Chevron.svelte
new file mode 100644
index 0000000..a9291df
--- /dev/null
+++ b/src/icons/Chevron.svelte
@@ -0,0 +1,6 @@
+<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg" class={$$restProps.class}>
+  <path
+    d="M10.4711 0.229856L6.93879 4.08615L5.99461 5.1117L5.05522 4.08615L1.5325 0.229856C1.15866 -0.0945539 0.617074 -0.0788567 0.276785 0.297878C-0.0922616 0.700774 -0.0922616 1.34959 0.276785 1.75249L5.06001 6.97445L5.9994 8L6.94358 6.97445L11.7268 1.75249C11.9089 1.55366 12 1.2868 12 1.02518C12 0.763563 11.9089 0.49671 11.7268 0.297878C11.3817 -0.0788567 10.8401 -0.0945539 10.4711 0.229856Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/src/icons/Chevron.svelte.d.ts b/src/icons/Chevron.svelte.d.ts
new file mode 100644
index 0000000..b51ca73
--- /dev/null
+++ b/src/icons/Chevron.svelte.d.ts
@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export type ChevronProps = typeof __propDef.props;
+export type ChevronEvents = typeof __propDef.events;
+export type ChevronSlots = typeof __propDef.slots;
+export default class Chevron extends SvelteComponent<ChevronProps, ChevronEvents, ChevronSlots> {
+}
+export {};
diff --git a/src/assets/Error.svelte b/src/icons/Error.svelte
similarity index 77%
rename from src/assets/Error.svelte
rename to src/icons/Error.svelte
index 46a3a70..17b5a31 100644
--- a/src/assets/Error.svelte
+++ b/src/icons/Error.svelte
@@ -1,4 +1,11 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class={$$restProps.class}
+>
   <path
     fill-rule="evenodd"
     clip-rule="evenodd"
diff --git a/src/icons/Icons.stories.svelte b/src/icons/Icons.stories.svelte
new file mode 100644
index 0000000..91b7bd7
--- /dev/null
+++ b/src/icons/Icons.stories.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { Meta, Story } from '@storybook/addon-svelte-csf';
+  import Check from './Check.svelte';
+  import Chevron from './Chevron.svelte';
+  import Error from './Error.svelte';
+
+  const icons = {
+    Check,
+    Chevron,
+    Error,
+  };
+</script>
+
+<Meta title="Icons/IconList" />
+
+<Story name="IconList">
+  <div class="grid grid-cols-1 gap-4 p-4 md:grid-cols-2 lg:grid-cols-4">
+    {#each Object.entries(icons) as [name, Icon]}
+      <div class="p-4">
+        <h2 class="mb-2 text-lg font-semibold">{name}</h2>
+        <svelte:component this={Icon} class="mb-1 h-8 w-8" />
+      </div>
+    {/each}
+  </div>
+</Story>
diff --git a/src/lib/features/Accordion.stories.svelte b/src/lib/features/Accordion.stories.svelte
new file mode 100644
index 0000000..09bae4f
--- /dev/null
+++ b/src/lib/features/Accordion.stories.svelte
@@ -0,0 +1,12 @@
+<script>
+  import { Meta, Story } from '@storybook/addon-svelte-csf';
+
+  import Accordion from './Accordion.svelte';
+</script>
+
+<Meta title="Design System/Features/Accordion" component={Accordion} />
+
+<!-- Primary -->
+<Story name="Accordion">
+  <Accordion trigger="Hello world." content="Hello there." />
+</Story>
diff --git a/src/lib/features/Accordion.svelte b/src/lib/features/Accordion.svelte
new file mode 100644
index 0000000..3f8303b
--- /dev/null
+++ b/src/lib/features/Accordion.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { Root, Item, Trigger, Content } from '../shadcnComponents/ui/accordion';
+
+  export let trigger = '';
+  export let content = '';
+</script>
+
+<Root>
+  <Item value="item-1">
+    <Trigger>{trigger}</Trigger>
+    <Content>{content}</Content>
+  </Item>
+</Root>
diff --git a/src/lib/features/AccordionList.stories.svelte b/src/lib/features/AccordionList.stories.svelte
new file mode 100644
index 0000000..0c41506
--- /dev/null
+++ b/src/lib/features/AccordionList.stories.svelte
@@ -0,0 +1,18 @@
+<script>
+  import { Meta, Story } from '@storybook/addon-svelte-csf';
+
+  import AccordionList from './AccordionList.svelte';
+  import Accordion from './Accordion.svelte';
+</script>
+
+<Meta title="Design System/Features/AccordionList" component={AccordionList} />
+
+<!-- Primary -->
+<Story name="AccordionList">
+  <AccordionList>
+    <Accordion trigger="Hello world." content="Hello there." />
+  </AccordionList>
+  <AccordionList>
+    <Accordion trigger="Are you there?" content="Yes I am!" />
+  </AccordionList>
+</Story>
diff --git a/src/lib/features/AccordionList.svelte b/src/lib/features/AccordionList.svelte
new file mode 100644
index 0000000..5eddfd9
--- /dev/null
+++ b/src/lib/features/AccordionList.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Root } from '../shadcnComponents/ui/accordion';
+</script>
+
+<Root>
+  <slot />
+</Root>
diff --git a/src/lib/shadcnComponents/ui/accordion/accordion-content.svelte b/src/lib/shadcnComponents/ui/accordion/accordion-content.svelte
new file mode 100644
index 0000000..3d065d3
--- /dev/null
+++ b/src/lib/shadcnComponents/ui/accordion/accordion-content.svelte
@@ -0,0 +1,25 @@
+<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 text-normal">
+    <slot />
+  </div>
+</AccordionPrimitive.Content>
diff --git a/src/lib/shadcnComponents/ui/accordion/accordion-item.svelte b/src/lib/shadcnComponents/ui/accordion/accordion-item.svelte
new file mode 100644
index 0000000..dc14460
--- /dev/null
+++ b/src/lib/shadcnComponents/ui/accordion/accordion-item.svelte
@@ -0,0 +1,14 @@
+<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("border-b", className)} {...$$restProps}>
+	<slot />
+</AccordionPrimitive.Item>
diff --git a/src/lib/shadcnComponents/ui/accordion/accordion-trigger.svelte b/src/lib/shadcnComponents/ui/accordion/accordion-trigger.svelte
new file mode 100644
index 0000000..caca9e6
--- /dev/null
+++ b/src/lib/shadcnComponents/ui/accordion/accordion-trigger.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { Accordion as AccordionPrimitive } from 'bits-ui';
+  import Chevron from '../../../../icons/Chevron.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 text-md font-bold transition-all [&[data-state=open]>svg]:rotate-180',
+      className
+    )}
+    {...$$restProps}
+    on:click
+  >
+    <slot />
+    <Chevron class="h-5 w-5 bg-black p-1 text-white transition-transform duration-200" />
+  </AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>
diff --git a/src/lib/shadcnComponents/ui/accordion/index.ts b/src/lib/shadcnComponents/ui/accordion/index.ts
new file mode 100644
index 0000000..ed49213
--- /dev/null
+++ b/src/lib/shadcnComponents/ui/accordion/index.ts
@@ -0,0 +1,17 @@
+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,
+	Content,
+	Item,
+	Trigger,
+	//
+	Root as Accordion,
+	Content as AccordionContent,
+	Item as AccordionItem,
+	Trigger as AccordionTrigger,
+};
diff --git a/src/lib/shadcnComponents/ui/select/select-item.svelte b/src/lib/shadcnComponents/ui/select/select-item.svelte
index 5bf52e6..5cab81e 100644
--- a/src/lib/shadcnComponents/ui/select/select-item.svelte
+++ b/src/lib/shadcnComponents/ui/select/select-item.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Check from '../../../../assets/Check.svelte';
+  import Check from '../../../../icons/Check.svelte';
   import { Select as SelectPrimitive } from 'bits-ui';
   import { cn } from '../../../../utils';
 
diff --git a/src/lib/shadcnComponents/ui/select/select-trigger.svelte b/src/lib/shadcnComponents/ui/select/select-trigger.svelte
index a1cb8d3..83d89cc 100644
--- a/src/lib/shadcnComponents/ui/select/select-trigger.svelte
+++ b/src/lib/shadcnComponents/ui/select/select-trigger.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Select as SelectPrimitive } from 'bits-ui';
-  import Chevron from '../../../../assets/Chevron.svelte';
-  import Error from '../../../../assets/Error.svelte';
+  import Chevron from '../../../../icons/Chevron.svelte';
+  import Error from '../../../../icons/Error.svelte';
   import { cn } from '../../../../utils';
 
   export let error: string | undefined;
@@ -16,7 +16,7 @@
 <div class="flex items-center gap-3">
   <SelectPrimitive.Trigger
     class={cn(
-      'flex h-10 w-full max-w-[388px] items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-destructive [&>span]:line-clamp-1 data-[placeholder]:[&>span]:text-muted-foreground',
+      'border-input bg-background ring-offset-background focus-visible:ring-ring aria-[invalid]:border-destructive data-[placeholder]:[&>span]:text-muted-foreground flex h-10 w-full max-w-[388px] items-center justify-between rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       error ? 'border-2 border-error' : 'border border-gray3',
       className
     )}
diff --git a/svelte.config.js b/svelte.config.js
index b1d3120..e3f5a25 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -15,6 +15,7 @@ export default {
       $atoms: resolve('./src/lib/atoms'),
       $typography: resolve('./src/lib/typography'),
       $colors: resolve('./src/lib/tailwindColors'),
+      $icons: resolve('./src/icons'),
     },
   },
 };