diff --git a/package.json b/package.json
index d306d8e..482316c 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,6 @@
   "dependencies": {
     "@lucide/vue": "^1.16.0",
     "@vee-validate/zod": "^4.15.1",
-    "@vueuse/core": "^14.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "pinia": "^3.0.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d9abe51..0a409bb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,9 +14,6 @@ importers:
       '@vee-validate/zod':
         specifier: ^4.15.1
         version: 4.15.1(vue@3.5.34(typescript@6.0.3))(zod@3.25.76)
-      '@vueuse/core':
-        specifier: ^14.3.0
-        version: 14.3.0(vue@3.5.34(typescript@6.0.3))
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
diff --git a/src/components/SiteHeader.vue b/src/components/SiteHeader.vue
index 4498007..285caf1 100644
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -1,30 +1,15 @@
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RouterLink, useRoute } from 'vue-router'
-import { cn } from '@/lib/utils'
 import cosmicStag from '@/assets/cosmic-stag.avif'
-import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
-} from '@/components/ui/navigation-menu'
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from '@/components/ui/sheet'
 
 const { t, locale } = useI18n()
 const route = useRoute()
 
+const openGroup = ref<string | null>(null)
 const mobileOpen = ref(false)
+const headerEl = ref<HTMLElement | null>(null)
 
 interface NavItem {
   to: string
@@ -72,7 +57,12 @@ const groups = computed<NavGroup[]>(() => [
   },
 ])
 
-function closeMobile() {
+function toggle(id: string) {
+  openGroup.value = openGroup.value === id ? null : id
+}
+
+function closeAll() {
+  openGroup.value = null
   mobileOpen.value = false
 }
 
@@ -80,16 +70,35 @@ function toggleLocale() {
   locale.value = locale.value === 'fr' ? 'en' : 'fr'
 }
 
-watch(() => route.path, closeMobile)
+function onClickOutside(e: MouseEvent) {
+  if (!headerEl.value) return
+  if (!headerEl.value.contains(e.target as Node)) openGroup.value = null
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') closeAll()
+}
+
+watch(() => route.path, closeAll)
+
+onMounted(() => {
+  document.addEventListener('click', onClickOutside)
+  document.addEventListener('keydown', onKeydown)
+})
+onUnmounted(() => {
+  document.removeEventListener('click', onClickOutside)
+  document.removeEventListener('keydown', onKeydown)
+})
 </script>
 
 <template>
   <header
+    ref="headerEl"
     class="sticky top-0 z-40 border-b border-white/10 bg-background/65 backdrop-blur-xl backdrop-saturate-150"
   >
     <div class="mx-auto max-w-7xl px-4 lg:px-6">
       <div class="flex h-16 items-center justify-between gap-4">
-        <RouterLink to="/" class="flex items-center gap-3" @click="closeMobile">
+        <RouterLink to="/" class="flex items-center gap-3" @click="closeAll">
           <img :src="cosmicStag" alt="" class="h-9 w-9 shrink-0" />
           <span class="leading-tight">
             <span class="block font-serif text-base tracking-tight text-foreground">
@@ -101,47 +110,38 @@ watch(() => route.path, closeMobile)
           </span>
         </RouterLink>
 
-        <div class="hidden items-center gap-1 lg:flex">
-          <NavigationMenu>
-            <NavigationMenuList>
-              <NavigationMenuItem v-for="g in groups" :key="g.id">
-                <NavigationMenuTrigger
-                  class="bg-transparent font-light hover:bg-muted hover:text-primary focus:bg-muted focus:text-primary data-[state=open]:bg-muted data-[state=open]:text-primary"
+        <nav class="hidden items-center gap-1 lg:flex">
+          <div v-for="g in groups" :key="g.id" class="relative">
+            <button
+              type="button"
+              class="rounded-md px-3 py-2 text-sm hover:bg-muted hover:text-primary"
+              :aria-expanded="openGroup === g.id"
+              @click.stop="toggle(g.id)"
+            >
+              {{ g.label }}
+              <span class="ml-1 inline-block text-xs">▾</span>
+            </button>
+            <ul
+              v-show="openGroup === g.id"
+              class="absolute right-0 top-full z-50 mt-1 min-w-52 rounded-md border border-border bg-popover py-1 shadow-md"
+            >
+              <li v-for="i in g.items" :key="i.to">
+                <RouterLink
+                  :to="i.to"
+                  class="block px-4 py-2 text-sm hover:bg-muted"
+                  @click="closeAll"
                 >
-                  {{ g.label }}
-                </NavigationMenuTrigger>
-                <NavigationMenuContent>
-                  <ul class="min-w-52 p-1">
-                    <li v-for="i in g.items" :key="i.to">
-                      <NavigationMenuLink as-child>
-                        <RouterLink
-                          :to="i.to"
-                          class="block rounded-sm px-4 py-2 text-sm hover:bg-muted hover:text-primary"
-                        >
-                          {{ i.label }}
-                        </RouterLink>
-                      </NavigationMenuLink>
-                    </li>
-                  </ul>
-                </NavigationMenuContent>
-              </NavigationMenuItem>
-              <NavigationMenuItem>
-                <NavigationMenuLink as-child>
-                  <RouterLink
-                    to="/marketplace"
-                    :class="
-                      cn(
-                        navigationMenuTriggerStyle(),
-                        'bg-transparent font-light hover:bg-muted hover:text-primary focus:bg-muted focus:text-primary',
-                      )
-                    "
-                  >
-                    {{ t('nav.marketplace') }}
-                  </RouterLink>
-                </NavigationMenuLink>
-              </NavigationMenuItem>
-            </NavigationMenuList>
-          </NavigationMenu>
+                  {{ i.label }}
+                </RouterLink>
+              </li>
+            </ul>
+          </div>
+          <RouterLink
+            to="/marketplace"
+            class="rounded-md px-3 py-2 text-sm hover:bg-muted hover:text-primary"
+          >
+            {{ t('nav.marketplace') }}
+          </RouterLink>
           <button
             type="button"
             class="ml-2 rounded-md border border-border px-2 py-1 text-xs uppercase tracking-wider text-muted-foreground hover:bg-muted"
@@ -149,58 +149,47 @@ watch(() => route.path, closeMobile)
           >
             {{ locale === 'fr' ? 'EN' : 'FR' }}
           </button>
-        </div>
+        </nav>
 
-        <Sheet v-model:open="mobileOpen">
-          <SheetTrigger as-child>
-            <button
-              type="button"
-              class="rounded-md p-2 lg:hidden"
-              :aria-label="t('nav.menu')"
-            >
-              <span class="mb-1.5 block h-0.5 w-6 bg-foreground"></span>
-              <span class="mb-1.5 block h-0.5 w-6 bg-foreground"></span>
-              <span class="block h-0.5 w-6 bg-foreground"></span>
-            </button>
-          </SheetTrigger>
-          <SheetContent
-            side="right"
-            class="w-full overflow-y-auto border-white/10 bg-background/65 backdrop-blur-xl backdrop-saturate-150 sm:max-w-sm"
+        <button
+          type="button"
+          class="rounded-md p-2 lg:hidden"
+          :aria-label="t('nav.menu')"
+          :aria-expanded="mobileOpen"
+          @click="mobileOpen = !mobileOpen"
+        >
+          <span class="mb-1.5 block h-0.5 w-6 bg-foreground"></span>
+          <span class="mb-1.5 block h-0.5 w-6 bg-foreground"></span>
+          <span class="block h-0.5 w-6 bg-foreground"></span>
+        </button>
+      </div>
+
+      <div v-show="mobileOpen" class="border-t border-border py-3 lg:hidden">
+        <div v-for="g in groups" :key="g.id" class="py-2">
+          <div
+            class="px-2 pb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground"
           >
-            <SheetHeader>
-              <SheetTitle class="font-display uppercase tracking-wider">
-                {{ t('nav.menu') }}
-              </SheetTitle>
-            </SheetHeader>
-            <nav class="mt-6 space-y-4">
-              <div v-for="g in groups" :key="g.id" class="space-y-1">
-                <div
-                  class="px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground"
-                >
-                  {{ g.label }}
-                </div>
-                <RouterLink
-                  v-for="i in g.items"
-                  :key="i.to"
-                  :to="i.to"
-                  class="block rounded-md px-4 py-2 hover:bg-muted"
-                >
-                  {{ i.label }}
-                </RouterLink>
-              </div>
-              <RouterLink to="/marketplace" class="block rounded-md px-4 py-2 hover:bg-muted">
-                {{ t('nav.marketplace') }}
-              </RouterLink>
-              <button
-                type="button"
-                class="mt-2 block w-full rounded-md border border-border px-4 py-2 text-left text-sm text-muted-foreground hover:bg-muted"
-                @click="toggleLocale"
-              >
-                {{ locale === 'fr' ? 'Switch to English' : 'Passer en français' }}
-              </button>
-            </nav>
-          </SheetContent>
-        </Sheet>
+            {{ g.label }}
+          </div>
+          <RouterLink
+            v-for="i in g.items"
+            :key="i.to"
+            :to="i.to"
+            class="block rounded-md px-4 py-2 hover:bg-muted"
+          >
+            {{ i.label }}
+          </RouterLink>
+        </div>
+        <RouterLink to="/marketplace" class="block rounded-md px-4 py-2 hover:bg-muted">
+          {{ t('nav.marketplace') }}
+        </RouterLink>
+        <button
+          type="button"
+          class="mt-2 block w-full rounded-md border border-border px-4 py-2 text-left text-sm text-muted-foreground hover:bg-muted"
+          @click="toggleLocale"
+        >
+          {{ locale === 'fr' ? 'Switch to English' : 'Passer en français' }}
+        </button>
       </div>
     </div>
   </header>
diff --git a/src/components/ui/alert/Alert.vue b/src/components/ui/alert/Alert.vue
deleted file mode 100644
index 9feea31..0000000
--- a/src/components/ui/alert/Alert.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import type { AlertVariants } from "."
-import { cn } from "@/lib/utils"
-import { alertVariants } from "."
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-  variant?: AlertVariants["variant"]
-}>()
-</script>
-
-<template>
-  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
-    <slot />
-  </div>
-</template>
diff --git a/src/components/ui/alert/AlertDescription.vue b/src/components/ui/alert/AlertDescription.vue
deleted file mode 100644
index afeaa01..0000000
--- a/src/components/ui/alert/AlertDescription.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
-    <slot />
-  </div>
-</template>
diff --git a/src/components/ui/alert/AlertTitle.vue b/src/components/ui/alert/AlertTitle.vue
deleted file mode 100644
index 1f98d11..0000000
--- a/src/components/ui/alert/AlertTitle.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
-    <slot />
-  </h5>
-</template>
diff --git a/src/components/ui/alert/index.ts b/src/components/ui/alert/index.ts
deleted file mode 100644
index 1106fd0..0000000
--- a/src/components/ui/alert/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
-
-export { default as Alert } from "./Alert.vue"
-export { default as AlertDescription } from "./AlertDescription.vue"
-export { default as AlertTitle } from "./AlertTitle.vue"
-
-export const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-)
-
-export type AlertVariants = VariantProps<typeof alertVariants>
diff --git a/src/components/ui/badge/Badge.vue b/src/components/ui/badge/Badge.vue
deleted file mode 100644
index 0374568..0000000
--- a/src/components/ui/badge/Badge.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import type { BadgeVariants } from "."
-import { cn } from "@/lib/utils"
-import { badgeVariants } from "."
-
-const props = defineProps<{
-  variant?: BadgeVariants["variant"]
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div :class="cn(badgeVariants({ variant }), props.class)">
-    <slot />
-  </div>
-</template>
diff --git a/src/components/ui/badge/index.ts b/src/components/ui/badge/index.ts
deleted file mode 100644
index 98a768d..0000000
--- a/src/components/ui/badge/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
-
-export { default as Badge } from "./Badge.vue"
-
-export const badgeVariants = cva(
-  "inline-flex gap-1 items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-)
-
-export type BadgeVariants = VariantProps<typeof badgeVariants>
diff --git a/src/components/ui/card/Card.vue b/src/components/ui/card/Card.vue
deleted file mode 100644
index db8c07a..0000000
--- a/src/components/ui/card/Card.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div
-    :class="
-      cn(
-        'rounded-lg border bg-card text-card-foreground shadow-sm',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </div>
-</template>
diff --git a/src/components/ui/card/CardContent.vue b/src/components/ui/card/CardContent.vue
deleted file mode 100644
index 4c4dfc7..0000000
--- a/src/components/ui/card/CardContent.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div :class="cn('p-6 pt-0', props.class)">
-    <slot />
-  </div>
-</template>
diff --git a/src/components/ui/card/CardDescription.vue b/src/components/ui/card/CardDescription.vue
deleted file mode 100644
index 02bddba..0000000
--- a/src/components/ui/card/CardDescription.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <p :class="cn('text-sm text-muted-foreground', props.class)">
-    <slot />
-  </p>
-</template>
diff --git a/src/components/ui/card/CardFooter.vue b/src/components/ui/card/CardFooter.vue
deleted file mode 100644
index fad3928..0000000
--- a/src/components/ui/card/CardFooter.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div :class="cn('flex items-center p-6 pt-0', props.class)">
-    <slot />
-  </div>
-</template>
diff --git a/src/components/ui/card/CardHeader.vue b/src/components/ui/card/CardHeader.vue
deleted file mode 100644
index 119700c..0000000
--- a/src/components/ui/card/CardHeader.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
-    <slot />
-  </div>
-</template>
diff --git a/src/components/ui/card/CardTitle.vue b/src/components/ui/card/CardTitle.vue
deleted file mode 100644
index d0c0ea7..0000000
--- a/src/components/ui/card/CardTitle.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
-</script>
-
-<template>
-  <h3
-    :class="
-      cn('text-2xl font-semibold leading-none tracking-tight', props.class)
-    "
-  >
-    <slot />
-  </h3>
-</template>
diff --git a/src/components/ui/card/index.ts b/src/components/ui/card/index.ts
deleted file mode 100644
index e5c7cb2..0000000
--- a/src/components/ui/card/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export { default as Card } from "./Card.vue"
-export { default as CardContent } from "./CardContent.vue"
-export { default as CardDescription } from "./CardDescription.vue"
-export { default as CardFooter } from "./CardFooter.vue"
-export { default as CardHeader } from "./CardHeader.vue"
-export { default as CardTitle } from "./CardTitle.vue"
diff --git a/src/components/ui/navigation-menu/NavigationMenu.vue b/src/components/ui/navigation-menu/NavigationMenu.vue
deleted file mode 100644
index 48d0931..0000000
--- a/src/components/ui/navigation-menu/NavigationMenu.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuRootEmits, NavigationMenuRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  NavigationMenuRoot,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import NavigationMenuViewport from "./NavigationMenuViewport.vue"
-
-const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes["class"] }>()
-
-const emits = defineEmits<NavigationMenuRootEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <NavigationMenuRoot
-    v-bind="forwarded"
-    :class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)"
-  >
-    <slot />
-    <NavigationMenuViewport />
-  </NavigationMenuRoot>
-</template>
diff --git a/src/components/ui/navigation-menu/NavigationMenuContent.vue b/src/components/ui/navigation-menu/NavigationMenuContent.vue
deleted file mode 100644
index 35729f9..0000000
--- a/src/components/ui/navigation-menu/NavigationMenuContent.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuContentEmits, NavigationMenuContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  NavigationMenuContent,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes["class"] }>()
-
-const emits = defineEmits<NavigationMenuContentEmits>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <NavigationMenuContent
-    v-bind="forwarded"
-    :class="cn(
-      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
-      props.class,
-    )"
-  >
-    <slot />
-  </NavigationMenuContent>
-</template>
diff --git a/src/components/ui/navigation-menu/NavigationMenuIndicator.vue b/src/components/ui/navigation-menu/NavigationMenuIndicator.vue
deleted file mode 100644
index 80bfdf4..0000000
--- a/src/components/ui/navigation-menu/NavigationMenuIndicator.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuIndicatorProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { NavigationMenuIndicator, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <NavigationMenuIndicator
-    v-bind="forwardedProps"
-    :class="cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)"
-  >
-    <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
-  </NavigationMenuIndicator>
-</template>
diff --git a/src/components/ui/navigation-menu/NavigationMenuItem.vue b/src/components/ui/navigation-menu/NavigationMenuItem.vue
deleted file mode 100644
index 0d3b9c7..0000000
--- a/src/components/ui/navigation-menu/NavigationMenuItem.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuItemProps } from "reka-ui"
-import { NavigationMenuItem } from "reka-ui"
-
-const props = defineProps<NavigationMenuItemProps>()
-</script>
-
-<template>
-  <NavigationMenuItem v-bind="props">
-    <slot />
-  </NavigationMenuItem>
-</template>
diff --git a/src/components/ui/navigation-menu/NavigationMenuLink.vue b/src/components/ui/navigation-menu/NavigationMenuLink.vue
deleted file mode 100644
index e8240b9..0000000
--- a/src/components/ui/navigation-menu/NavigationMenuLink.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from "reka-ui"
-import {
-  NavigationMenuLink,
-  useForwardPropsEmits,
-} from "reka-ui"
-
-const props = defineProps<NavigationMenuLinkProps>()
-const emits = defineEmits<NavigationMenuLinkEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <NavigationMenuLink v-bind="forwarded">
-    <slot />
-  </NavigationMenuLink>
-</template>
diff --git a/src/components/ui/navigation-menu/NavigationMenuList.vue b/src/components/ui/navigation-menu/NavigationMenuList.vue
deleted file mode 100644
index 4c175f0..0000000
--- a/src/components/ui/navigation-menu/NavigationMenuList.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuListProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { NavigationMenuList, useForwardProps } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <NavigationMenuList
-    v-bind="forwardedProps"
-    :class="
-      cn(
-        'group flex flex-1 list-none items-center justify-center gap-x-1',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </NavigationMenuList>
-</template>
diff --git a/src/components/ui/navigation-menu/NavigationMenuTrigger.vue b/src/components/ui/navigation-menu/NavigationMenuTrigger.vue
deleted file mode 100644
index 4c138ba..0000000
--- a/src/components/ui/navigation-menu/NavigationMenuTrigger.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ChevronDown } from "@lucide/vue"
-import {
-  NavigationMenuTrigger,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import { navigationMenuTriggerStyle } from "."
-
-const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <NavigationMenuTrigger
-    v-bind="forwardedProps"
-    :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
-  >
-    <slot />
-    <ChevronDown
-      class="relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
-      aria-hidden="true"
-    />
-  </NavigationMenuTrigger>
-</template>
diff --git a/src/components/ui/navigation-menu/NavigationMenuViewport.vue b/src/components/ui/navigation-menu/NavigationMenuViewport.vue
deleted file mode 100644
index 9618846..0000000
--- a/src/components/ui/navigation-menu/NavigationMenuViewport.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import type { NavigationMenuViewportProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  NavigationMenuViewport,
-  useForwardProps,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <div class="absolute left-0 top-full flex justify-center">
-    <NavigationMenuViewport
-      v-bind="forwardedProps"
-      :class="
-        cn(
-          'origin-top-center relative mt-1.5 h-[var(--reka-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--reka-navigation-menu-viewport-width)] left-[var(--reka-navigation-menu-viewport-left)]',
-          props.class,
-        )
-      "
-    />
-  </div>
-</template>
diff --git a/src/components/ui/navigation-menu/index.ts b/src/components/ui/navigation-menu/index.ts
deleted file mode 100644
index e7efa86..0000000
--- a/src/components/ui/navigation-menu/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { cva } from "class-variance-authority"
-
-export { default as NavigationMenu } from "./NavigationMenu.vue"
-export { default as NavigationMenuContent } from "./NavigationMenuContent.vue"
-export { default as NavigationMenuIndicator } from "./NavigationMenuIndicator.vue"
-export { default as NavigationMenuItem } from "./NavigationMenuItem.vue"
-export { default as NavigationMenuLink } from "./NavigationMenuLink.vue"
-export { default as NavigationMenuList } from "./NavigationMenuList.vue"
-export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.vue"
-export { default as NavigationMenuViewport } from "./NavigationMenuViewport.vue"
-
-export const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
-)
diff --git a/src/components/ui/sheet/Sheet.vue b/src/components/ui/sheet/Sheet.vue
deleted file mode 100644
index 47b0968..0000000
--- a/src/components/ui/sheet/Sheet.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from "reka-ui"
-import { DialogRoot, useForwardPropsEmits } from "reka-ui"
-
-const props = defineProps<DialogRootProps>()
-const emits = defineEmits<DialogRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DialogRoot v-bind="forwarded">
-    <slot />
-  </DialogRoot>
-</template>
diff --git a/src/components/ui/sheet/SheetClose.vue b/src/components/ui/sheet/SheetClose.vue
deleted file mode 100644
index 0295976..0000000
--- a/src/components/ui/sheet/SheetClose.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import type { DialogCloseProps } from "reka-ui"
-import { DialogClose } from "reka-ui"
-
-const props = defineProps<DialogCloseProps>()
-</script>
-
-<template>
-  <DialogClose v-bind="props">
-    <slot />
-  </DialogClose>
-</template>
diff --git a/src/components/ui/sheet/SheetContent.vue b/src/components/ui/sheet/SheetContent.vue
deleted file mode 100644
index 59e668c..0000000
--- a/src/components/ui/sheet/SheetContent.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { SheetVariants } from "."
-import { reactiveOmit } from "@vueuse/core"
-import { X } from "@lucide/vue"
-import {
-  DialogClose,
-  DialogContent,
-  DialogOverlay,
-  DialogPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "@/lib/utils"
-import { sheetVariants } from "."
-
-interface SheetContentProps extends DialogContentProps {
-  class?: HTMLAttributes["class"]
-  side?: SheetVariants["side"]
-}
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<SheetContentProps>()
-
-const emits = defineEmits<DialogContentEmits>()
-
-const delegatedProps = reactiveOmit(props, "class", "side")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DialogPortal>
-    <DialogOverlay
-      class="fixed inset-0 z-50 bg-black/30 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-    />
-    <DialogContent
-      :class="cn(sheetVariants({ side }), props.class)"
-      v-bind="{ ...forwarded, ...$attrs }"
-    >
-      <slot />
-
-      <DialogClose
-        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
-      >
-        <X class="w-4 h-4 text-muted-foreground" />
-      </DialogClose>
-    </DialogContent>
-  </DialogPortal>
-</template>
diff --git a/src/components/ui/sheet/SheetDescription.vue b/src/components/ui/sheet/SheetDescription.vue
deleted file mode 100644
index 455c2f4..0000000
--- a/src/components/ui/sheet/SheetDescription.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import type { DialogDescriptionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogDescription } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <DialogDescription
-    :class="cn('text-sm text-muted-foreground', props.class)"
-    v-bind="delegatedProps"
-  >
-    <slot />
-  </DialogDescription>
-</template>
diff --git a/src/components/ui/sheet/SheetFooter.vue b/src/components/ui/sheet/SheetFooter.vue
deleted file mode 100644
index 5f481e5..0000000
--- a/src/components/ui/sheet/SheetFooter.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
-</script>
-
-<template>
-  <div
-    :class="
-      cn(
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </div>
-</template>
diff --git a/src/components/ui/sheet/SheetHeader.vue b/src/components/ui/sheet/SheetHeader.vue
deleted file mode 100644
index f97d24a..0000000
--- a/src/components/ui/sheet/SheetHeader.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<{ class?: HTMLAttributes["class"] }>()
-</script>
-
-<template>
-  <div
-    :class="
-      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
-    "
-  >
-    <slot />
-  </div>
-</template>
diff --git a/src/components/ui/sheet/SheetTitle.vue b/src/components/ui/sheet/SheetTitle.vue
deleted file mode 100644
index 5870787..0000000
--- a/src/components/ui/sheet/SheetTitle.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import type { DialogTitleProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { DialogTitle } from "reka-ui"
-import { cn } from "@/lib/utils"
-
-const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
-
-const delegatedProps = reactiveOmit(props, "class")
-</script>
-
-<template>
-  <DialogTitle
-    :class="cn('text-lg font-semibold text-foreground', props.class)"
-    v-bind="delegatedProps"
-  >
-    <slot />
-  </DialogTitle>
-</template>
diff --git a/src/components/ui/sheet/SheetTrigger.vue b/src/components/ui/sheet/SheetTrigger.vue
deleted file mode 100644
index a4fc3ee..0000000
--- a/src/components/ui/sheet/SheetTrigger.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import type { DialogTriggerProps } from "reka-ui"
-import { DialogTrigger } from "reka-ui"
-
-const props = defineProps<DialogTriggerProps>()
-</script>
-
-<template>
-  <DialogTrigger v-bind="props">
-    <slot />
-  </DialogTrigger>
-</template>
diff --git a/src/components/ui/sheet/index.ts b/src/components/ui/sheet/index.ts
deleted file mode 100644
index a370633..0000000
--- a/src/components/ui/sheet/index.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-import { cva } from "class-variance-authority"
-
-export { default as Sheet } from "./Sheet.vue"
-export { default as SheetClose } from "./SheetClose.vue"
-export { default as SheetContent } from "./SheetContent.vue"
-export { default as SheetDescription } from "./SheetDescription.vue"
-export { default as SheetFooter } from "./SheetFooter.vue"
-export { default as SheetHeader } from "./SheetHeader.vue"
-export { default as SheetTitle } from "./SheetTitle.vue"
-export { default as SheetTrigger } from "./SheetTrigger.vue"
-
-export const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
-            "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
-            "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: {
-      side: "right",
-    },
-  },
-)
-
-export type SheetVariants = VariantProps<typeof sheetVariants>
diff --git a/src/views/AccommodationView.vue b/src/views/AccommodationView.vue
index a84aad4..73f1b8f 100644
--- a/src/views/AccommodationView.vue
+++ b/src/views/AccommodationView.vue
@@ -2,8 +2,6 @@
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
 
 const { t, tm, rt } = useI18n()
 
@@ -84,35 +82,41 @@ const exteriorItems = tm('accommodation.exterior.items') as string[]
         <p class="mt-3 text-muted-foreground">{{ t('accommodation.rooms.subtitle') }}</p>
       </div>
       <ul class="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-        <li v-for="room in rooms" :key="room.key">
-          <Card class="overflow-hidden">
-            <img
-              :src="room.image"
-              alt=""
-              class="aspect-[4/3] w-full object-cover"
-              loading="lazy"
-            />
-            <CardContent class="p-5 pt-5">
-              <div class="flex items-baseline justify-between gap-3">
-                <h3 class="font-serif text-xl font-semibold">
-                  {{ t(`accommodation.rooms.${room.key}.name`) }}
-                </h3>
-                <Badge
-                  :variant="room.open ? 'default' : 'outline'"
-                  class="text-[10px] uppercase tracking-wider"
-                >
-                  {{
-                    room.open
-                      ? t('accommodation.statusOpen')
-                      : t('accommodation.statusComingSoon')
-                  }}
-                </Badge>
-              </div>
-              <p class="mt-3 text-sm leading-relaxed text-foreground/85">
-                {{ t(`accommodation.rooms.${room.key}.summary`) }}
-              </p>
-            </CardContent>
-          </Card>
+        <li
+          v-for="room in rooms"
+          :key="room.key"
+          class="overflow-hidden rounded-lg border border-border bg-card"
+        >
+          <img
+            :src="room.image"
+            alt=""
+            class="aspect-[4/3] w-full object-cover"
+            loading="lazy"
+          />
+          <div class="p-5">
+            <div class="flex items-baseline justify-between gap-3">
+              <h3 class="font-serif text-xl font-semibold">
+                {{ t(`accommodation.rooms.${room.key}.name`) }}
+              </h3>
+              <span
+                class="rounded-full px-2 py-0.5 text-[10px] uppercase tracking-wider"
+                :class="
+                  room.open
+                    ? 'bg-primary/10 text-primary'
+                    : 'border border-border text-muted-foreground'
+                "
+              >
+                {{
+                  room.open
+                    ? t('accommodation.statusOpen')
+                    : t('accommodation.statusComingSoon')
+                }}
+              </span>
+            </div>
+            <p class="mt-3 text-sm leading-relaxed text-foreground/85">
+              {{ t(`accommodation.rooms.${room.key}.summary`) }}
+            </p>
+          </div>
         </li>
       </ul>
     </section>
@@ -127,26 +131,27 @@ const exteriorItems = tm('accommodation.exterior.items') as string[]
           <p class="mt-3 text-muted-foreground">{{ t('accommodation.cabins.subtitle') }}</p>
         </div>
         <ul class="mt-8 grid gap-6 md:grid-cols-3">
-          <li v-for="cabin in cabins" :key="cabin.key">
-            <Card class="overflow-hidden bg-background">
-              <img
-                :src="cabin.image"
-                alt=""
-                class="aspect-[4/3] w-full object-cover"
-                loading="lazy"
-              />
-              <div class="flex items-baseline justify-between gap-3 p-5">
-                <h3 class="font-serif text-xl font-semibold">
-                  {{ t(`accommodation.cabins.${cabin.key}`) }}
-                </h3>
-                <Badge
-                  variant="outline"
-                  class="text-[10px] uppercase tracking-wider text-muted-foreground"
-                >
-                  {{ t('accommodation.statusComingSoon') }}
-                </Badge>
-              </div>
-            </Card>
+          <li
+            v-for="cabin in cabins"
+            :key="cabin.key"
+            class="overflow-hidden rounded-lg border border-border bg-background"
+          >
+            <img
+              :src="cabin.image"
+              alt=""
+              class="aspect-[4/3] w-full object-cover"
+              loading="lazy"
+            />
+            <div class="flex items-baseline justify-between gap-3 p-5">
+              <h3 class="font-serif text-xl font-semibold">
+                {{ t(`accommodation.cabins.${cabin.key}`) }}
+              </h3>
+              <span
+                class="rounded-full border border-border px-2 py-0.5 text-[10px] uppercase tracking-wider text-muted-foreground"
+              >
+                {{ t('accommodation.statusComingSoon') }}
+              </span>
+            </div>
           </li>
         </ul>
       </div>
@@ -161,10 +166,12 @@ const exteriorItems = tm('accommodation.exterior.items') as string[]
         <p class="mt-3 text-muted-foreground">{{ t('accommodation.exterior.subtitle') }}</p>
       </div>
       <ul class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-        <li v-for="(item, i) in exteriorItems" :key="i">
-          <Card class="border-dashed bg-secondary/20 p-5 text-sm text-foreground/85">
-            {{ rt(item) }}
-          </Card>
+        <li
+          v-for="(item, i) in exteriorItems"
+          :key="i"
+          class="rounded-lg border border-dashed border-border bg-secondary/20 p-5 text-sm text-foreground/85"
+        >
+          {{ rt(item) }}
         </li>
       </ul>
     </section>
diff --git a/src/views/ConceptView.vue b/src/views/ConceptView.vue
index d099c19..50d04d6 100644
--- a/src/views/ConceptView.vue
+++ b/src/views/ConceptView.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
-import { Card } from '@/components/ui/card'
 
 const { t } = useI18n()
 
@@ -97,14 +96,18 @@ const pillars = [
           <p class="mt-3 text-muted-foreground">{{ t('concept.slowFarming.body') }}</p>
         </div>
         <div class="mt-8 grid gap-6 md:grid-cols-3">
-          <Card v-for="p in pillars" :key="p.key" class="p-6">
+          <article
+            v-for="p in pillars"
+            :key="p.key"
+            class="rounded-lg border border-border bg-card p-6"
+          >
             <h3 class="font-serif text-xl font-semibold">
               {{ t(`concept.slowFarming.${p.key}Title`) }}
             </h3>
             <p class="mt-3 text-sm leading-relaxed text-foreground/85">
               {{ t(`concept.slowFarming.${p.key}Body`) }}
             </p>
-          </Card>
+          </article>
         </div>
       </div>
     </section>
diff --git a/src/views/EventsView.vue b/src/views/EventsView.vue
index b060aac..dc8c653 100644
--- a/src/views/EventsView.vue
+++ b/src/views/EventsView.vue
@@ -2,8 +2,6 @@
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 
 const { t } = useI18n()
 
@@ -49,14 +47,14 @@ const events = [
         <p class="mt-6 max-w-prose text-lg leading-relaxed text-foreground/90">
           {{ t('events.page.lede') }}
         </p>
-        <Alert class="mt-8 max-w-prose bg-card text-foreground/85">
-          <AlertTitle class="text-xs uppercase tracking-wider text-accent">
+        <aside
+          class="mt-8 max-w-prose rounded-md border border-border bg-card p-4 text-sm text-foreground/85"
+        >
+          <p class="text-xs font-semibold uppercase tracking-wider text-accent">
             {{ t('events.page.noteHeading') }}
-          </AlertTitle>
-          <AlertDescription>
-            {{ t('events.page.calendarNote') }}
-          </AlertDescription>
-        </Alert>
+          </p>
+          <p class="mt-1">{{ t('events.page.calendarNote') }}</p>
+        </aside>
       </div>
     </section>
 
@@ -66,30 +64,28 @@ const events = [
           <component
             :is="e.to ? 'RouterLink' : 'article'"
             v-bind="e.to ? { to: e.to } : {}"
-            class="group block h-full"
+            class="group block h-full overflow-hidden rounded-lg border border-border bg-card transition hover:shadow-md"
           >
-            <Card class="h-full overflow-hidden transition hover:shadow-md">
-              <img
-                :src="e.image"
-                alt=""
-                class="aspect-[4/3] w-full object-cover transition group-hover:scale-[1.02]"
-                loading="lazy"
-              />
-              <CardContent class="p-5 pt-5">
-                <p class="text-xs uppercase tracking-wider text-accent">
-                  {{ t(`events.${e.key}.date`) }}
-                </p>
-                <h2 class="mt-1 font-serif text-xl font-semibold">
-                  {{ t(`events.${e.key}.title`) }}
-                </h2>
-                <p class="mt-1 text-xs text-muted-foreground">
-                  {{ t(`events.${e.key}.location`) }}
-                </p>
-                <p class="mt-3 text-sm leading-relaxed text-foreground/85">
-                  {{ t(`events.${e.key}.description`) }}
-                </p>
-              </CardContent>
-            </Card>
+            <img
+              :src="e.image"
+              alt=""
+              class="aspect-[4/3] w-full object-cover transition group-hover:scale-[1.02]"
+              loading="lazy"
+            />
+            <div class="p-5">
+              <p class="text-xs uppercase tracking-wider text-accent">
+                {{ t(`events.${e.key}.date`) }}
+              </p>
+              <h2 class="mt-1 font-serif text-xl font-semibold">
+                {{ t(`events.${e.key}.title`) }}
+              </h2>
+              <p class="mt-1 text-xs text-muted-foreground">
+                {{ t(`events.${e.key}.location`) }}
+              </p>
+              <p class="mt-3 text-sm leading-relaxed text-foreground/85">
+                {{ t(`events.${e.key}.description`) }}
+              </p>
+            </div>
           </component>
         </li>
       </ul>
diff --git a/src/views/GalleryView.vue b/src/views/GalleryView.vue
index ed895a4..d82889f 100644
--- a/src/views/GalleryView.vue
+++ b/src/views/GalleryView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { Card } from '@/components/ui/card'
 
 const { t } = useI18n()
 
@@ -48,22 +47,24 @@ const items = [
 
     <section class="mx-auto max-w-7xl px-4 py-16 lg:px-6">
       <ul class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-        <li v-for="item in items" :key="item.key" class="group">
-          <Card class="overflow-hidden">
-            <figure>
-              <img
-                :src="item.src"
-                :alt="t(`gallery.captions.${item.key}`)"
-                class="aspect-square w-full object-cover transition group-hover:scale-[1.02]"
-                loading="lazy"
-              />
-              <figcaption
-                class="border-t border-border px-4 py-3 font-serif text-sm text-foreground/85"
-              >
-                {{ t(`gallery.captions.${item.key}`) }}
-              </figcaption>
-            </figure>
-          </Card>
+        <li
+          v-for="item in items"
+          :key="item.key"
+          class="group overflow-hidden rounded-lg border border-border bg-card"
+        >
+          <figure>
+            <img
+              :src="item.src"
+              :alt="t(`gallery.captions.${item.key}`)"
+              class="aspect-square w-full object-cover transition group-hover:scale-[1.02]"
+              loading="lazy"
+            />
+            <figcaption
+              class="border-t border-border px-4 py-3 font-serif text-sm text-foreground/85"
+            >
+              {{ t(`gallery.captions.${item.key}`) }}
+            </figcaption>
+          </figure>
         </li>
       </ul>
     </section>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index e2c31b8..0660f9e 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -2,7 +2,6 @@
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
 import cosmicStag from '@/assets/cosmic-stag.avif'
 import heroLandscape from '@/assets/hero-landscape.webp'
 import sectionTile from '@/assets/section-tile.webp'
@@ -193,27 +192,25 @@ const featuredEvents = [
             v-for="e in featuredEvents"
             :key="e.key"
             :to="e.to"
-            class="group block"
+            class="group overflow-hidden rounded-lg border border-border bg-card transition hover:shadow-md"
           >
-            <Card class="overflow-hidden transition hover:shadow-md">
-              <img
-                :src="e.image"
-                alt=""
-                class="aspect-[4/3] w-full object-cover transition group-hover:scale-[1.02]"
-                loading="lazy"
-              />
-              <CardContent class="p-5 pt-5">
-                <p class="text-xs uppercase tracking-wider text-accent">
-                  {{ t(`events.${e.key}.date`) }}
-                </p>
-                <h3 class="mt-2 font-display text-lg uppercase tracking-wider">
-                  {{ t(`events.${e.key}.title`) }}
-                </h3>
-                <p class="mt-1 text-xs text-foreground/70">
-                  {{ t(`events.${e.key}.location`) }}
-                </p>
-              </CardContent>
-            </Card>
+            <img
+              :src="e.image"
+              alt=""
+              class="aspect-[4/3] w-full object-cover transition group-hover:scale-[1.02]"
+              loading="lazy"
+            />
+            <div class="p-5">
+              <p class="text-xs uppercase tracking-wider text-accent">
+                {{ t(`events.${e.key}.date`) }}
+              </p>
+              <h3 class="mt-2 font-display text-lg uppercase tracking-wider">
+                {{ t(`events.${e.key}.title`) }}
+              </h3>
+              <p class="mt-1 text-xs text-foreground/70">
+                {{ t(`events.${e.key}.location`) }}
+              </p>
+            </div>
           </RouterLink>
         </div>
         <div class="mt-10 text-center">
diff --git a/src/views/LongStaysView.vue b/src/views/LongStaysView.vue
index 355a7f0..c5f8bc5 100644
--- a/src/views/LongStaysView.vue
+++ b/src/views/LongStaysView.vue
@@ -2,7 +2,6 @@
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
 
 const { t } = useI18n()
 
@@ -32,14 +31,18 @@ const paths = ['exchange', 'rental', 'partial', 'funded'] as const
         {{ t('longStays.pathsTitle') }}
       </h2>
       <div class="mt-8 grid gap-6 md:grid-cols-2">
-        <Card v-for="key in paths" :key="key" class="p-6">
+        <article
+          v-for="key in paths"
+          :key="key"
+          class="rounded-lg border border-border bg-card p-6"
+        >
           <h3 class="font-serif text-xl font-semibold">
             {{ t(`longStays.paths.${key}Title`) }}
           </h3>
           <p class="mt-3 text-base leading-relaxed text-foreground/85">
             {{ t(`longStays.paths.${key}Body`) }}
           </p>
-        </Card>
+        </article>
       </div>
     </section>
 
diff --git a/src/views/MarketplaceView.vue b/src/views/MarketplaceView.vue
index cb79bc2..dd0124a 100644
--- a/src/views/MarketplaceView.vue
+++ b/src/views/MarketplaceView.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
 
 const { t } = useI18n()
 
@@ -29,14 +28,18 @@ const categories = ['fresh', 'pantry', 'craft'] as const
         {{ t('marketplace.categoriesTitle') }}
       </h2>
       <div class="mt-8 grid gap-6 md:grid-cols-3">
-        <Card v-for="key in categories" :key="key" class="border-dashed p-6">
+        <article
+          v-for="key in categories"
+          :key="key"
+          class="rounded-lg border border-dashed border-border bg-card p-6"
+        >
           <h3 class="font-serif text-xl font-semibold">
             {{ t(`marketplace.categories.${key}Title`) }}
           </h3>
           <p class="mt-3 text-base leading-relaxed text-foreground/85">
             {{ t(`marketplace.categories.${key}Body`) }}
           </p>
-        </Card>
+        </article>
       </div>
     </section>
 
diff --git a/src/views/OpportunitiesView.vue b/src/views/OpportunitiesView.vue
index cfca7c2..1e35cc1 100644
--- a/src/views/OpportunitiesView.vue
+++ b/src/views/OpportunitiesView.vue
@@ -2,7 +2,6 @@
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
 
 const { t } = useI18n()
 
@@ -44,15 +43,17 @@ const applyKeys = ['model', 'window', 'open'] as const
         <p class="mt-3 text-muted-foreground">{{ t('opportunities.groupsSubtitle') }}</p>
       </div>
       <ul class="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-        <li v-for="key in groups" :key="key">
-          <Card class="p-6">
-            <h3 class="font-serif text-xl font-semibold">
-              {{ t(`opportunities.groups.${key}Title`) }}
-            </h3>
-            <p class="mt-3 text-sm leading-relaxed text-foreground/85">
-              {{ t(`opportunities.groups.${key}Positions`) }}
-            </p>
-          </Card>
+        <li
+          v-for="key in groups"
+          :key="key"
+          class="rounded-lg border border-border bg-card p-6"
+        >
+          <h3 class="font-serif text-xl font-semibold">
+            {{ t(`opportunities.groups.${key}Title`) }}
+          </h3>
+          <p class="mt-3 text-sm leading-relaxed text-foreground/85">
+            {{ t(`opportunities.groups.${key}Positions`) }}
+          </p>
         </li>
       </ul>
     </section>
@@ -64,14 +65,18 @@ const applyKeys = ['model', 'window', 'open'] as const
           {{ t('opportunities.applyTitle') }}
         </h2>
         <div class="mt-8 grid gap-6 md:grid-cols-3">
-          <Card v-for="key in applyKeys" :key="key" class="p-6">
+          <article
+            v-for="key in applyKeys"
+            :key="key"
+            class="rounded-lg border border-border bg-card p-6"
+          >
             <h3 class="font-serif text-lg font-semibold">
               {{ t(`opportunities.apply.${key}Title`) }}
             </h3>
             <p class="mt-3 text-sm leading-relaxed text-foreground/85">
               {{ t(`opportunities.apply.${key}Body`) }}
             </p>
-          </Card>
+          </article>
         </div>
         <div class="mt-10 flex flex-wrap items-center gap-3">
           <Button as-child>
diff --git a/src/views/ReservationsView.vue b/src/views/ReservationsView.vue
index de0dd7d..eca6e2f 100644
--- a/src/views/ReservationsView.vue
+++ b/src/views/ReservationsView.vue
@@ -2,7 +2,6 @@
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
 
 const { t } = useI18n()
 
@@ -32,14 +31,18 @@ const kinds = ['weekend', 'retreat', 'gathering', 'residency'] as const
         {{ t('reservations.kindsTitle') }}
       </h2>
       <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
-        <Card v-for="key in kinds" :key="key" class="p-6">
+        <article
+          v-for="key in kinds"
+          :key="key"
+          class="rounded-lg border border-border bg-card p-6"
+        >
           <h3 class="font-serif text-xl font-semibold">
             {{ t(`reservations.kinds.${key}Title`) }}
           </h3>
           <p class="mt-3 text-sm leading-relaxed text-foreground/85">
             {{ t(`reservations.kinds.${key}Body`) }}
           </p>
-        </Card>
+        </article>
       </div>
     </section>
 
@@ -84,7 +87,7 @@ const kinds = ['weekend', 'retreat', 'gathering', 'residency'] as const
           </div>
         </div>
 
-        <Card class="p-6 lg:col-span-2">
+        <aside class="rounded-lg border border-border bg-card p-6 lg:col-span-2">
           <h3 class="font-serif text-xl font-semibold">
             {{ t('reservations.contactCard.title') }}
           </h3>
@@ -115,7 +118,7 @@ const kinds = ['weekend', 'retreat', 'gathering', 'residency'] as const
               <dd class="mt-1">{{ t('reservations.contactCard.openingValue') }}</dd>
             </div>
           </dl>
-        </Card>
+        </aside>
       </div>
     </section>
   </div>
diff --git a/src/views/SymposiumView.vue b/src/views/SymposiumView.vue
index e494ca0..cac3995 100644
--- a/src/views/SymposiumView.vue
+++ b/src/views/SymposiumView.vue
@@ -2,7 +2,6 @@
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
 
 const { t } = useI18n()
 
@@ -57,14 +56,18 @@ const applySteps = ['stepOne', 'stepTwo', 'stepThree'] as const
           {{ t('symposium.includedTitle') }}
         </h2>
         <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
-          <Card v-for="key in included" :key="key" class="bg-background p-6">
+          <article
+            v-for="key in included"
+            :key="key"
+            class="rounded-lg border border-border bg-background p-6"
+          >
             <h3 class="font-serif text-lg font-semibold">
               {{ t(`symposium.included.${key}Title`) }}
             </h3>
             <p class="mt-3 text-sm leading-relaxed text-foreground/85">
               {{ t(`symposium.included.${key}Body`) }}
             </p>
-          </Card>
+          </article>
         </div>
       </div>
     </section>
@@ -86,15 +89,17 @@ const applySteps = ['stepOne', 'stepTwo', 'stepThree'] as const
           {{ t('symposium.applyTitle') }}
         </h2>
         <ol class="mt-8 grid gap-6 md:grid-cols-3">
-          <li v-for="step in applySteps" :key="step">
-            <Card class="p-6">
-              <h3 class="font-serif text-lg font-semibold">
-                {{ t(`symposium.apply.${step}Title`) }}
-              </h3>
-              <p class="mt-3 text-sm leading-relaxed text-foreground/85">
-                {{ t(`symposium.apply.${step}Body`) }}
-              </p>
-            </Card>
+          <li
+            v-for="step in applySteps"
+            :key="step"
+            class="rounded-lg border border-border bg-card p-6"
+          >
+            <h3 class="font-serif text-lg font-semibold">
+              {{ t(`symposium.apply.${step}Title`) }}
+            </h3>
+            <p class="mt-3 text-sm leading-relaxed text-foreground/85">
+              {{ t(`symposium.apply.${step}Body`) }}
+            </p>
           </li>
         </ol>
         <div class="mt-10 flex flex-wrap items-center gap-3">
diff --git a/src/views/VisionValuesView.vue b/src/views/VisionValuesView.vue
index 9c9b2e8..96a36f5 100644
--- a/src/views/VisionValuesView.vue
+++ b/src/views/VisionValuesView.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
-import { Card } from '@/components/ui/card'
 
 const { t } = useI18n()
 
@@ -56,7 +55,11 @@ const team = ['patrick', 'coco', 'charlie'] as const
           <p class="mt-3 text-muted-foreground">{{ t('vision.philosophySubtitle') }}</p>
         </div>
         <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-5">
-          <Card v-for="(p, i) in philosophy" :key="p" class="bg-background p-5">
+          <article
+            v-for="(p, i) in philosophy"
+            :key="p"
+            class="rounded-lg border border-border bg-background p-5"
+          >
             <div class="font-serif text-2xl text-accent">{{ i + 1 }}</div>
             <h3 class="mt-2 font-serif text-lg font-semibold">
               {{ t(`vision.philosophy.${p}Title`) }}
@@ -64,7 +67,7 @@ const team = ['patrick', 'coco', 'charlie'] as const
             <p class="mt-2 text-sm leading-relaxed text-foreground/85">
               {{ t(`vision.philosophy.${p}Body`) }}
             </p>
-          </Card>
+          </article>
         </div>
       </div>
     </section>
@@ -78,12 +81,16 @@ const team = ['patrick', 'coco', 'charlie'] as const
         <p class="mt-3 text-muted-foreground">{{ t('vision.pillarsSubtitle') }}</p>
       </div>
       <div class="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-        <Card v-for="p in pillars" :key="p" class="p-6">
+        <article
+          v-for="p in pillars"
+          :key="p"
+          class="rounded-lg border border-border bg-card p-6"
+        >
           <h3 class="font-serif text-xl font-semibold">{{ t(`vision.pillars.${p}Title`) }}</h3>
           <p class="mt-3 text-sm leading-relaxed text-foreground/85">
             {{ t(`vision.pillars.${p}Body`) }}
           </p>
-        </Card>
+        </article>
       </div>
     </section>
 
@@ -94,7 +101,11 @@ const team = ['patrick', 'coco', 'charlie'] as const
           {{ t('vision.teamTitle') }}
         </h2>
         <div class="mt-8 grid gap-6 md:grid-cols-3">
-          <Card v-for="m in team" :key="m" class="p-6">
+          <article
+            v-for="m in team"
+            :key="m"
+            class="rounded-lg border border-border bg-card p-6"
+          >
             <h3 class="font-serif text-xl font-semibold">{{ t(`vision.team.${m}Name`) }}</h3>
             <p class="mt-1 text-xs uppercase tracking-wider text-accent">
               {{ t(`vision.team.${m}Role`) }}
@@ -102,7 +113,7 @@ const team = ['patrick', 'coco', 'charlie'] as const
             <p class="mt-3 text-sm leading-relaxed text-foreground/85">
               {{ t(`vision.team.${m}Body`) }}
             </p>
-          </Card>
+          </article>
         </div>
       </div>
     </section>