diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte
index b812f89db..6d2083eec 100644
--- a/apps/web/src/routes/+page.svelte
+++ b/apps/web/src/routes/+page.svelte
@@ -1,12 +1,12 @@
 <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'
-  import { DayChip } from '@repo/ui/day-chip'
-  import { GenedChip } from '@repo/ui/gened-chip'
-  import { Input } from '@repo/ui/input'
-  import { RecommendedTag } from '@repo/ui/recommended-tag'
+  import * as Accordion from '@repo/ui/atom/accordion'
+  import { Button } from '@repo/ui/atom/button'
+  import { Chip } from '@repo/ui/atom/chip'
+  import { DayChip } from '@repo/ui/atom/day-chip'
+  import { GenedChip } from '@repo/ui/atom/gened-chip'
+  import { Input } from '@repo/ui/atom/input'
+  import { RecommendedTag } from '@repo/ui/atom/recommended-tag'
+  import { CourseCard } from '@repo/ui/molecule/course-card'
 
   let counter = $state(0)
 
diff --git a/apps/web/src/routes/dbdemo/+page.svelte b/apps/web/src/routes/dbdemo/+page.svelte
index 237ab3574..4872c03a0 100644
--- a/apps/web/src/routes/dbdemo/+page.svelte
+++ b/apps/web/src/routes/dbdemo/+page.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
   import type { PageData } from './$types'
 
-  export let data: PageData
+  interface Props {
+    data: PageData
+  }
+
+  let { data }: Props = $props()
 </script>
 
 <h1 class="text-h1">DB Demo</h1>
diff --git a/packages/ui/src/components/accordion/accordion-content.svelte b/packages/ui/src/components/atom/accordion/accordion-content.svelte
similarity index 95%
rename from packages/ui/src/components/accordion/accordion-content.svelte
rename to packages/ui/src/components/atom/accordion/accordion-content.svelte
index ee54b2c3c..1ed2392ce 100644
--- a/packages/ui/src/components/accordion/accordion-content.svelte
+++ b/packages/ui/src/components/atom/accordion/accordion-content.svelte
@@ -3,7 +3,7 @@
   import type { Snippet } from 'svelte'
   import { slide } from 'svelte/transition'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = AccordionPrimitive.ContentProps
 
diff --git a/packages/ui/src/components/accordion/accordion-item.svelte b/packages/ui/src/components/atom/accordion/accordion-item.svelte
similarity index 92%
rename from packages/ui/src/components/accordion/accordion-item.svelte
rename to packages/ui/src/components/atom/accordion/accordion-item.svelte
index 07131739e..57c10f5d6 100644
--- a/packages/ui/src/components/accordion/accordion-item.svelte
+++ b/packages/ui/src/components/atom/accordion/accordion-item.svelte
@@ -2,7 +2,7 @@
   import { Accordion as AccordionPrimitive } from 'bits-ui'
   import type { Snippet } from 'svelte'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = AccordionPrimitive.ItemProps
 
diff --git a/packages/ui/src/components/accordion/accordion-trigger.svelte b/packages/ui/src/components/atom/accordion/accordion-trigger.svelte
similarity index 95%
rename from packages/ui/src/components/accordion/accordion-trigger.svelte
rename to packages/ui/src/components/atom/accordion/accordion-trigger.svelte
index 8d5cec5e6..7705c3437 100644
--- a/packages/ui/src/components/accordion/accordion-trigger.svelte
+++ b/packages/ui/src/components/atom/accordion/accordion-trigger.svelte
@@ -3,7 +3,7 @@
   import { ChevronDown } from 'lucide-svelte'
   import type { Snippet } from 'svelte'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = AccordionPrimitive.TriggerProps
   type $$Events = AccordionPrimitive.TriggerEvents
diff --git a/packages/ui/src/components/accordion/accordion.stories.svelte b/packages/ui/src/components/atom/accordion/accordion.stories.svelte
similarity index 100%
rename from packages/ui/src/components/accordion/accordion.stories.svelte
rename to packages/ui/src/components/atom/accordion/accordion.stories.svelte
diff --git a/packages/ui/src/components/accordion/index.ts b/packages/ui/src/components/atom/accordion/index.ts
similarity index 100%
rename from packages/ui/src/components/accordion/index.ts
rename to packages/ui/src/components/atom/accordion/index.ts
diff --git a/packages/ui/src/components/button/button.stories.svelte b/packages/ui/src/components/atom/button/button.stories.svelte
similarity index 100%
rename from packages/ui/src/components/button/button.stories.svelte
rename to packages/ui/src/components/atom/button/button.stories.svelte
diff --git a/packages/ui/src/components/button/button.svelte b/packages/ui/src/components/atom/button/button.svelte
similarity index 95%
rename from packages/ui/src/components/button/button.svelte
rename to packages/ui/src/components/atom/button/button.svelte
index 06a8afe2d..cb0f1a994 100644
--- a/packages/ui/src/components/button/button.svelte
+++ b/packages/ui/src/components/atom/button/button.svelte
@@ -2,7 +2,7 @@
   import { Button as ButtonPrimitive } from 'bits-ui'
   import type { Snippet } from 'svelte'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
   import { buttonVariants, type Events, type Props } from './index.js'
 
   type $$Props = Props
diff --git a/packages/ui/src/components/button/index.ts b/packages/ui/src/components/atom/button/index.ts
similarity index 100%
rename from packages/ui/src/components/button/index.ts
rename to packages/ui/src/components/atom/button/index.ts
diff --git a/packages/ui/src/components/checkbox/checkbox.stories.svelte b/packages/ui/src/components/atom/checkbox/checkbox.stories.svelte
similarity index 100%
rename from packages/ui/src/components/checkbox/checkbox.stories.svelte
rename to packages/ui/src/components/atom/checkbox/checkbox.stories.svelte
diff --git a/packages/ui/src/components/checkbox/checkbox.svelte b/packages/ui/src/components/atom/checkbox/checkbox.svelte
similarity index 97%
rename from packages/ui/src/components/checkbox/checkbox.svelte
rename to packages/ui/src/components/atom/checkbox/checkbox.svelte
index 5cdb2d1fb..407dea688 100644
--- a/packages/ui/src/components/checkbox/checkbox.svelte
+++ b/packages/ui/src/components/atom/checkbox/checkbox.svelte
@@ -2,7 +2,7 @@
   import { Checkbox as CheckboxPrimitive, Label } from 'bits-ui'
   import { Check } from 'lucide-svelte'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = CheckboxPrimitive.Props & {
     label?: string | undefined | null
diff --git a/packages/ui/src/components/checkbox/index.ts b/packages/ui/src/components/atom/checkbox/index.ts
similarity index 100%
rename from packages/ui/src/components/checkbox/index.ts
rename to packages/ui/src/components/atom/checkbox/index.ts
diff --git a/packages/ui/src/components/chip/chip.stories.svelte b/packages/ui/src/components/atom/chip/chip.stories.svelte
similarity index 100%
rename from packages/ui/src/components/chip/chip.stories.svelte
rename to packages/ui/src/components/atom/chip/chip.stories.svelte
diff --git a/packages/ui/src/components/chip/chip.svelte b/packages/ui/src/components/atom/chip/chip.svelte
similarity index 94%
rename from packages/ui/src/components/chip/chip.svelte
rename to packages/ui/src/components/atom/chip/chip.svelte
index 58b5f98c7..4bf6ce8a3 100644
--- a/packages/ui/src/components/chip/chip.svelte
+++ b/packages/ui/src/components/atom/chip/chip.svelte
@@ -2,7 +2,7 @@
   import { X } from 'lucide-svelte'
   import type { Snippet } from 'svelte'
 
-  import { cn } from '../../utils.js'
+  import { cn } from '../../../utils.js'
   import { chipVariants } from './index.js'
 
   interface Props {
diff --git a/packages/ui/src/components/chip/index.ts b/packages/ui/src/components/atom/chip/index.ts
similarity index 100%
rename from packages/ui/src/components/chip/index.ts
rename to packages/ui/src/components/atom/chip/index.ts
diff --git a/packages/ui/src/components/day-chip/day-chip.stories.svelte b/packages/ui/src/components/atom/day-chip/day-chip.stories.svelte
similarity index 100%
rename from packages/ui/src/components/day-chip/day-chip.stories.svelte
rename to packages/ui/src/components/atom/day-chip/day-chip.stories.svelte
diff --git a/packages/ui/src/components/day-chip/day-chip.svelte b/packages/ui/src/components/atom/day-chip/day-chip.svelte
similarity index 89%
rename from packages/ui/src/components/day-chip/day-chip.svelte
rename to packages/ui/src/components/atom/day-chip/day-chip.svelte
index 8e7c257fb..12ba346ab 100644
--- a/packages/ui/src/components/day-chip/day-chip.svelte
+++ b/packages/ui/src/components/atom/day-chip/day-chip.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { cn } from '../../utils'
-  import { Chip } from '../chip'
+  import { cn } from '../../../utils.js'
+  import { Chip } from '../chip/index.js'
   import { chipVariants, type Day } from './index.js'
 
   interface Props {
diff --git a/packages/ui/src/components/day-chip/index.ts b/packages/ui/src/components/atom/day-chip/index.ts
similarity index 100%
rename from packages/ui/src/components/day-chip/index.ts
rename to packages/ui/src/components/atom/day-chip/index.ts
diff --git a/packages/ui/src/components/gened-chip/gened-chip.stories.svelte b/packages/ui/src/components/atom/gened-chip/gened-chip.stories.svelte
similarity index 100%
rename from packages/ui/src/components/gened-chip/gened-chip.stories.svelte
rename to packages/ui/src/components/atom/gened-chip/gened-chip.stories.svelte
diff --git a/packages/ui/src/components/gened-chip/gened-chip.svelte b/packages/ui/src/components/atom/gened-chip/gened-chip.svelte
similarity index 88%
rename from packages/ui/src/components/gened-chip/gened-chip.svelte
rename to packages/ui/src/components/atom/gened-chip/gened-chip.svelte
index f82ac3ef9..c335c9b0b 100644
--- a/packages/ui/src/components/gened-chip/gened-chip.svelte
+++ b/packages/ui/src/components/atom/gened-chip/gened-chip.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { cn } from '../../utils'
-  import { Chip } from '../chip'
+  import { cn } from '../../../utils.js'
+  import { Chip } from '../chip/index.js'
   import { chipVariants, type Type } from './index.js'
 
   interface Props {
diff --git a/packages/ui/src/components/gened-chip/index.ts b/packages/ui/src/components/atom/gened-chip/index.ts
similarity index 100%
rename from packages/ui/src/components/gened-chip/index.ts
rename to packages/ui/src/components/atom/gened-chip/index.ts
diff --git a/packages/ui/src/components/icon-button/icon-button.svelte b/packages/ui/src/components/atom/icon-button/icon-button.svelte
similarity index 95%
rename from packages/ui/src/components/icon-button/icon-button.svelte
rename to packages/ui/src/components/atom/icon-button/icon-button.svelte
index e941e84d1..58f291a82 100644
--- a/packages/ui/src/components/icon-button/icon-button.svelte
+++ b/packages/ui/src/components/atom/icon-button/icon-button.svelte
@@ -2,7 +2,7 @@
   import { Button as ButtonPrimitive } from 'bits-ui'
   import type { Snippet } from 'svelte'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
   import { buttonVariants, type Events, type Props } from './index.js'
   type $$Props = Props
   type $$Events = Events
diff --git a/packages/ui/src/components/icon-button/index.ts b/packages/ui/src/components/atom/icon-button/index.ts
similarity index 100%
rename from packages/ui/src/components/icon-button/index.ts
rename to packages/ui/src/components/atom/icon-button/index.ts
diff --git a/packages/ui/src/components/input/index.ts b/packages/ui/src/components/atom/input/index.ts
similarity index 100%
rename from packages/ui/src/components/input/index.ts
rename to packages/ui/src/components/atom/input/index.ts
diff --git a/packages/ui/src/components/input/input.svelte b/packages/ui/src/components/atom/input/input.svelte
similarity index 94%
rename from packages/ui/src/components/input/input.svelte
rename to packages/ui/src/components/atom/input/input.svelte
index 9ec571c23..ad455e5c8 100644
--- a/packages/ui/src/components/input/input.svelte
+++ b/packages/ui/src/components/atom/input/input.svelte
@@ -4,8 +4,8 @@
   const bubble = createBubbler()
   import type { HTMLInputAttributes } from 'svelte/elements'
 
-  import { cn } from '../../utils'
-  import type { InputEvents } from '.'
+  import { cn } from '../../../utils.js'
+  import type { InputEvents } from './index.js'
 
   type $$Props = HTMLInputAttributes
   type $$Events = InputEvents
diff --git a/packages/ui/src/components/radio-group/index.ts b/packages/ui/src/components/atom/radio-group/index.ts
similarity index 100%
rename from packages/ui/src/components/radio-group/index.ts
rename to packages/ui/src/components/atom/radio-group/index.ts
diff --git a/packages/ui/src/components/radio-group/radio-group-item.svelte b/packages/ui/src/components/atom/radio-group/radio-group-item.svelte
similarity index 97%
rename from packages/ui/src/components/radio-group/radio-group-item.svelte
rename to packages/ui/src/components/atom/radio-group/radio-group-item.svelte
index 50b0fd6b6..0121b081d 100644
--- a/packages/ui/src/components/radio-group/radio-group-item.svelte
+++ b/packages/ui/src/components/atom/radio-group/radio-group-item.svelte
@@ -2,7 +2,7 @@
   import { Label, RadioGroup as RadioGroupPrimitive } from 'bits-ui'
   import { Circle } from 'lucide-svelte'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = RadioGroupPrimitive.ItemProps & {
     id: string
diff --git a/packages/ui/src/components/radio-group/radio-group.stories.svelte b/packages/ui/src/components/atom/radio-group/radio-group.stories.svelte
similarity index 100%
rename from packages/ui/src/components/radio-group/radio-group.stories.svelte
rename to packages/ui/src/components/atom/radio-group/radio-group.stories.svelte
diff --git a/packages/ui/src/components/radio-group/radio-group.svelte b/packages/ui/src/components/atom/radio-group/radio-group.svelte
similarity index 93%
rename from packages/ui/src/components/radio-group/radio-group.svelte
rename to packages/ui/src/components/atom/radio-group/radio-group.svelte
index 7a46f169d..4490a63d5 100644
--- a/packages/ui/src/components/radio-group/radio-group.svelte
+++ b/packages/ui/src/components/atom/radio-group/radio-group.svelte
@@ -2,7 +2,7 @@
   import { RadioGroup as RadioGroupPrimitive } from 'bits-ui'
   import type { Snippet } from 'svelte'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = RadioGroupPrimitive.Props
 
diff --git a/packages/ui/src/components/recommended-tag/index.ts b/packages/ui/src/components/atom/recommended-tag/index.ts
similarity index 100%
rename from packages/ui/src/components/recommended-tag/index.ts
rename to packages/ui/src/components/atom/recommended-tag/index.ts
diff --git a/packages/ui/src/components/recommended-tag/recommended-tag.stories.svelte b/packages/ui/src/components/atom/recommended-tag/recommended-tag.stories.svelte
similarity index 100%
rename from packages/ui/src/components/recommended-tag/recommended-tag.stories.svelte
rename to packages/ui/src/components/atom/recommended-tag/recommended-tag.stories.svelte
diff --git a/packages/ui/src/components/recommended-tag/recommended-tag.svelte b/packages/ui/src/components/atom/recommended-tag/recommended-tag.svelte
similarity index 94%
rename from packages/ui/src/components/recommended-tag/recommended-tag.svelte
rename to packages/ui/src/components/atom/recommended-tag/recommended-tag.svelte
index 75b892204..aaa5d9915 100644
--- a/packages/ui/src/components/recommended-tag/recommended-tag.svelte
+++ b/packages/ui/src/components/atom/recommended-tag/recommended-tag.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Sparkles } from 'lucide-svelte'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   interface Props {
     class?: string | undefined | null
diff --git a/packages/ui/src/components/subject-details/description.svelte b/packages/ui/src/components/atom/subject-details/description.svelte
similarity index 100%
rename from packages/ui/src/components/subject-details/description.svelte
rename to packages/ui/src/components/atom/subject-details/description.svelte
diff --git a/packages/ui/src/components/subject-details/index.ts b/packages/ui/src/components/atom/subject-details/index.ts
similarity index 100%
rename from packages/ui/src/components/subject-details/index.ts
rename to packages/ui/src/components/atom/subject-details/index.ts
diff --git a/packages/ui/src/components/subject-details/label.svelte b/packages/ui/src/components/atom/subject-details/label.svelte
similarity index 100%
rename from packages/ui/src/components/subject-details/label.svelte
rename to packages/ui/src/components/atom/subject-details/label.svelte
diff --git a/packages/ui/src/components/subject-details/subject-details.svelte b/packages/ui/src/components/atom/subject-details/subject-details.svelte
similarity index 100%
rename from packages/ui/src/components/subject-details/subject-details.svelte
rename to packages/ui/src/components/atom/subject-details/subject-details.svelte
diff --git a/packages/ui/src/components/switch/index.ts b/packages/ui/src/components/atom/switch/index.ts
similarity index 100%
rename from packages/ui/src/components/switch/index.ts
rename to packages/ui/src/components/atom/switch/index.ts
diff --git a/packages/ui/src/components/switch/switch.stories.svelte b/packages/ui/src/components/atom/switch/switch.stories.svelte
similarity index 100%
rename from packages/ui/src/components/switch/switch.stories.svelte
rename to packages/ui/src/components/atom/switch/switch.stories.svelte
diff --git a/packages/ui/src/components/switch/switch.svelte b/packages/ui/src/components/atom/switch/switch.svelte
similarity index 97%
rename from packages/ui/src/components/switch/switch.svelte
rename to packages/ui/src/components/atom/switch/switch.svelte
index 1f59509e6..6994d252c 100644
--- a/packages/ui/src/components/switch/switch.svelte
+++ b/packages/ui/src/components/atom/switch/switch.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Label, Switch as SwitchPrimitive } from 'bits-ui'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = SwitchPrimitive.Props & {
     label?: string | undefined | null
diff --git a/packages/ui/src/components/table/index.ts b/packages/ui/src/components/atom/table/index.ts
similarity index 100%
rename from packages/ui/src/components/table/index.ts
rename to packages/ui/src/components/atom/table/index.ts
diff --git a/packages/ui/src/components/table/table-body.svelte b/packages/ui/src/components/atom/table/table-body.svelte
similarity index 91%
rename from packages/ui/src/components/table/table-body.svelte
rename to packages/ui/src/components/atom/table/table-body.svelte
index 8010074f2..47cf87320 100644
--- a/packages/ui/src/components/table/table-body.svelte
+++ b/packages/ui/src/components/atom/table/table-body.svelte
@@ -2,7 +2,7 @@
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = HTMLAttributes<HTMLTableSectionElement>
 
diff --git a/packages/ui/src/components/table/table-caption.svelte b/packages/ui/src/components/atom/table/table-caption.svelte
similarity index 92%
rename from packages/ui/src/components/table/table-caption.svelte
rename to packages/ui/src/components/atom/table/table-caption.svelte
index 0e783f06d..d7d3b25c0 100644
--- a/packages/ui/src/components/table/table-caption.svelte
+++ b/packages/ui/src/components/atom/table/table-caption.svelte
@@ -2,7 +2,7 @@
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = HTMLAttributes<HTMLTableCaptionElement>
 
diff --git a/packages/ui/src/components/table/table-cell.svelte b/packages/ui/src/components/atom/table/table-cell.svelte
similarity index 94%
rename from packages/ui/src/components/table/table-cell.svelte
rename to packages/ui/src/components/atom/table/table-cell.svelte
index cf5bd8ffa..e899b8382 100644
--- a/packages/ui/src/components/table/table-cell.svelte
+++ b/packages/ui/src/components/atom/table/table-cell.svelte
@@ -5,7 +5,7 @@
   const bubble = createBubbler()
   import type { HTMLTdAttributes } from 'svelte/elements'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = HTMLTdAttributes
 
diff --git a/packages/ui/src/components/table/table-footer.svelte b/packages/ui/src/components/atom/table/table-footer.svelte
similarity index 92%
rename from packages/ui/src/components/table/table-footer.svelte
rename to packages/ui/src/components/atom/table/table-footer.svelte
index 40ded0a6f..0f07372f1 100644
--- a/packages/ui/src/components/table/table-footer.svelte
+++ b/packages/ui/src/components/atom/table/table-footer.svelte
@@ -2,7 +2,7 @@
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = HTMLAttributes<HTMLTableSectionElement>
 
diff --git a/packages/ui/src/components/table/table-head.svelte b/packages/ui/src/components/atom/table/table-head.svelte
similarity index 93%
rename from packages/ui/src/components/table/table-head.svelte
rename to packages/ui/src/components/atom/table/table-head.svelte
index cb39310a2..bee5bf99b 100644
--- a/packages/ui/src/components/table/table-head.svelte
+++ b/packages/ui/src/components/atom/table/table-head.svelte
@@ -2,7 +2,7 @@
   import type { Snippet } from 'svelte'
   import type { HTMLThAttributes } from 'svelte/elements'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = HTMLThAttributes
 
diff --git a/packages/ui/src/components/table/table-header.svelte b/packages/ui/src/components/atom/table/table-header.svelte
similarity index 94%
rename from packages/ui/src/components/table/table-header.svelte
rename to packages/ui/src/components/atom/table/table-header.svelte
index 9c7de42f8..008cf3cce 100644
--- a/packages/ui/src/components/table/table-header.svelte
+++ b/packages/ui/src/components/atom/table/table-header.svelte
@@ -5,7 +5,7 @@
   const bubble = createBubbler()
   import type { HTMLAttributes } from 'svelte/elements'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = HTMLAttributes<HTMLTableSectionElement>
 
diff --git a/packages/ui/src/components/table/table-row.svelte b/packages/ui/src/components/atom/table/table-row.svelte
similarity index 94%
rename from packages/ui/src/components/table/table-row.svelte
rename to packages/ui/src/components/atom/table/table-row.svelte
index a3c222d35..7b8f5233d 100644
--- a/packages/ui/src/components/table/table-row.svelte
+++ b/packages/ui/src/components/atom/table/table-row.svelte
@@ -5,7 +5,7 @@
   const bubble = createBubbler()
   import type { HTMLAttributes } from 'svelte/elements'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = HTMLAttributes<HTMLTableRowElement> & {
     'data-state'?: unknown
diff --git a/packages/ui/src/components/table/table.stories.svelte b/packages/ui/src/components/atom/table/table.stories.svelte
similarity index 100%
rename from packages/ui/src/components/table/table.stories.svelte
rename to packages/ui/src/components/atom/table/table.stories.svelte
diff --git a/packages/ui/src/components/table/table.svelte b/packages/ui/src/components/atom/table/table.svelte
similarity index 92%
rename from packages/ui/src/components/table/table.svelte
rename to packages/ui/src/components/atom/table/table.svelte
index ec687bcb3..c6e8fd90b 100644
--- a/packages/ui/src/components/table/table.svelte
+++ b/packages/ui/src/components/atom/table/table.svelte
@@ -2,7 +2,7 @@
   import type { Snippet } from 'svelte'
   import type { HTMLTableAttributes } from 'svelte/elements'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = HTMLTableAttributes
 
diff --git a/packages/ui/src/components/course-card/course-card.stories.svelte b/packages/ui/src/components/molecule/course-card/course-card.stories.svelte
similarity index 100%
rename from packages/ui/src/components/course-card/course-card.stories.svelte
rename to packages/ui/src/components/molecule/course-card/course-card.stories.svelte
diff --git a/packages/ui/src/components/course-card/course-card.svelte b/packages/ui/src/components/molecule/course-card/course-card.svelte
similarity index 90%
rename from packages/ui/src/components/course-card/course-card.svelte
rename to packages/ui/src/components/molecule/course-card/course-card.svelte
index 9d1deee47..be345930e 100644
--- a/packages/ui/src/components/course-card/course-card.svelte
+++ b/packages/ui/src/components/molecule/course-card/course-card.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { Check, Dot, Plus } from 'lucide-svelte'
 
-  import { cn } from '../../utils'
-  import { Button } from '../button'
-  import { DayChip } from '../day-chip'
-  import { GenedChip } from '../gened-chip'
-  import { RecommendedTag } from '../recommended-tag'
+  import { cn } from '../../../utils.js'
+  import { Button } from '../../atom/button/index.js'
+  import { DayChip } from '../../atom/day-chip/index.js'
+  import { GenedChip } from '../../atom/gened-chip/index.js'
+  import { RecommendedTag } from '../../atom/recommended-tag/index.js'
 
   interface Props {
     class?: string | undefined | null
diff --git a/packages/ui/src/components/course-card/index.ts b/packages/ui/src/components/molecule/course-card/index.ts
similarity index 100%
rename from packages/ui/src/components/course-card/index.ts
rename to packages/ui/src/components/molecule/course-card/index.ts