diff --git a/src/components/ui/card/Card.vue b/src/components/ui/card/Card.vue
new file mode 100644
index 0000000..db8c07a
--- /dev/null
+++ b/src/components/ui/card/Card.vue
@@ -0,0 +1,21 @@
+<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
new file mode 100644
index 0000000..4c4dfc7
--- /dev/null
+++ b/src/components/ui/card/CardContent.vue
@@ -0,0 +1,14 @@
+<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
new file mode 100644
index 0000000..02bddba
--- /dev/null
+++ b/src/components/ui/card/CardDescription.vue
@@ -0,0 +1,14 @@
+<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
new file mode 100644
index 0000000..fad3928
--- /dev/null
+++ b/src/components/ui/card/CardFooter.vue
@@ -0,0 +1,14 @@
+<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
new file mode 100644
index 0000000..119700c
--- /dev/null
+++ b/src/components/ui/card/CardHeader.vue
@@ -0,0 +1,14 @@
+<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
new file mode 100644
index 0000000..d0c0ea7
--- /dev/null
+++ b/src/components/ui/card/CardTitle.vue
@@ -0,0 +1,18 @@
+<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
new file mode 100644
index 0000000..e5c7cb2
--- /dev/null
+++ b/src/components/ui/card/index.ts
@@ -0,0 +1,6 @@
+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/views/AccommodationView.vue b/src/views/AccommodationView.vue
index 73f1b8f..f0bab13 100644
--- a/src/views/AccommodationView.vue
+++ b/src/views/AccommodationView.vue
@@ -2,6 +2,7 @@
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
 
 const { t, tm, rt } = useI18n()
 
@@ -82,41 +83,39 @@ 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"
-          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 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>
+                <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>
+            </CardContent>
+          </Card>
         </li>
       </ul>
     </section>
@@ -131,27 +130,25 @@ 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"
-            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 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>
+                <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>
+            </Card>
           </li>
         </ul>
       </div>
@@ -166,12 +163,10 @@ 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"
-          class="rounded-lg border border-dashed border-border bg-secondary/20 p-5 text-sm text-foreground/85"
-        >
-          {{ rt(item) }}
+        <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>
       </ul>
     </section>
diff --git a/src/views/ConceptView.vue b/src/views/ConceptView.vue
index 50d04d6..d099c19 100644
--- a/src/views/ConceptView.vue
+++ b/src/views/ConceptView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
+import { Card } from '@/components/ui/card'
 
 const { t } = useI18n()
 
@@ -96,18 +97,14 @@ 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">
-          <article
-            v-for="p in pillars"
-            :key="p.key"
-            class="rounded-lg border border-border bg-card p-6"
-          >
+          <Card v-for="p in pillars" :key="p.key" class="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>
-          </article>
+          </Card>
         </div>
       </div>
     </section>
diff --git a/src/views/EventsView.vue b/src/views/EventsView.vue
index dc8c653..79fb3a1 100644
--- a/src/views/EventsView.vue
+++ b/src/views/EventsView.vue
@@ -2,6 +2,7 @@
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
 
 const { t } = useI18n()
 
@@ -64,28 +65,30 @@ const events = [
           <component
             :is="e.to ? 'RouterLink' : 'article'"
             v-bind="e.to ? { to: e.to } : {}"
-            class="group block h-full overflow-hidden rounded-lg border border-border bg-card transition hover:shadow-md"
+            class="group block h-full"
           >
-            <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>
+            <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>
           </component>
         </li>
       </ul>
diff --git a/src/views/GalleryView.vue b/src/views/GalleryView.vue
index d82889f..ed895a4 100644
--- a/src/views/GalleryView.vue
+++ b/src/views/GalleryView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import { Card } from '@/components/ui/card'
 
 const { t } = useI18n()
 
@@ -47,24 +48,22 @@ 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 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 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>
       </ul>
     </section>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 0660f9e..e2c31b8 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -2,6 +2,7 @@
 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'
@@ -192,25 +193,27 @@ const featuredEvents = [
             v-for="e in featuredEvents"
             :key="e.key"
             :to="e.to"
-            class="group overflow-hidden rounded-lg border border-border bg-card transition hover:shadow-md"
+            class="group block"
           >
-            <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>
+            <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>
           </RouterLink>
         </div>
         <div class="mt-10 text-center">
diff --git a/src/views/LongStaysView.vue b/src/views/LongStaysView.vue
index c5f8bc5..355a7f0 100644
--- a/src/views/LongStaysView.vue
+++ b/src/views/LongStaysView.vue
@@ -2,6 +2,7 @@
 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()
 
@@ -31,18 +32,14 @@ const paths = ['exchange', 'rental', 'partial', 'funded'] as const
         {{ t('longStays.pathsTitle') }}
       </h2>
       <div class="mt-8 grid gap-6 md:grid-cols-2">
-        <article
-          v-for="key in paths"
-          :key="key"
-          class="rounded-lg border border-border bg-card p-6"
-        >
+        <Card v-for="key in paths" :key="key" class="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>
-        </article>
+        </Card>
       </div>
     </section>
 
diff --git a/src/views/MarketplaceView.vue b/src/views/MarketplaceView.vue
index dd0124a..cb79bc2 100644
--- a/src/views/MarketplaceView.vue
+++ b/src/views/MarketplaceView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
 
 const { t } = useI18n()
 
@@ -28,18 +29,14 @@ const categories = ['fresh', 'pantry', 'craft'] as const
         {{ t('marketplace.categoriesTitle') }}
       </h2>
       <div class="mt-8 grid gap-6 md:grid-cols-3">
-        <article
-          v-for="key in categories"
-          :key="key"
-          class="rounded-lg border border-dashed border-border bg-card p-6"
-        >
+        <Card v-for="key in categories" :key="key" class="border-dashed 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>
-        </article>
+        </Card>
       </div>
     </section>
 
diff --git a/src/views/OpportunitiesView.vue b/src/views/OpportunitiesView.vue
index 1e35cc1..cfca7c2 100644
--- a/src/views/OpportunitiesView.vue
+++ b/src/views/OpportunitiesView.vue
@@ -2,6 +2,7 @@
 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()
 
@@ -43,17 +44,15 @@ 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"
-          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 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>
       </ul>
     </section>
@@ -65,18 +64,14 @@ const applyKeys = ['model', 'window', 'open'] as const
           {{ t('opportunities.applyTitle') }}
         </h2>
         <div class="mt-8 grid gap-6 md:grid-cols-3">
-          <article
-            v-for="key in applyKeys"
-            :key="key"
-            class="rounded-lg border border-border bg-card p-6"
-          >
+          <Card v-for="key in applyKeys" :key="key" class="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>
-          </article>
+          </Card>
         </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 eca6e2f..de0dd7d 100644
--- a/src/views/ReservationsView.vue
+++ b/src/views/ReservationsView.vue
@@ -2,6 +2,7 @@
 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()
 
@@ -31,18 +32,14 @@ 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">
-        <article
-          v-for="key in kinds"
-          :key="key"
-          class="rounded-lg border border-border bg-card p-6"
-        >
+        <Card v-for="key in kinds" :key="key" class="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>
-        </article>
+        </Card>
       </div>
     </section>
 
@@ -87,7 +84,7 @@ const kinds = ['weekend', 'retreat', 'gathering', 'residency'] as const
           </div>
         </div>
 
-        <aside class="rounded-lg border border-border bg-card p-6 lg:col-span-2">
+        <Card class="p-6 lg:col-span-2">
           <h3 class="font-serif text-xl font-semibold">
             {{ t('reservations.contactCard.title') }}
           </h3>
@@ -118,7 +115,7 @@ const kinds = ['weekend', 'retreat', 'gathering', 'residency'] as const
               <dd class="mt-1">{{ t('reservations.contactCard.openingValue') }}</dd>
             </div>
           </dl>
-        </aside>
+        </Card>
       </div>
     </section>
   </div>
diff --git a/src/views/SymposiumView.vue b/src/views/SymposiumView.vue
index cac3995..e494ca0 100644
--- a/src/views/SymposiumView.vue
+++ b/src/views/SymposiumView.vue
@@ -2,6 +2,7 @@
 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()
 
@@ -56,18 +57,14 @@ 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">
-          <article
-            v-for="key in included"
-            :key="key"
-            class="rounded-lg border border-border bg-background p-6"
-          >
+          <Card v-for="key in included" :key="key" class="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>
-          </article>
+          </Card>
         </div>
       </div>
     </section>
@@ -89,17 +86,15 @@ 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"
-            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 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>
         </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 96a36f5..9c9b2e8 100644
--- a/src/views/VisionValuesView.vue
+++ b/src/views/VisionValuesView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import { Card } from '@/components/ui/card'
 
 const { t } = useI18n()
 
@@ -55,11 +56,7 @@ 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">
-          <article
-            v-for="(p, i) in philosophy"
-            :key="p"
-            class="rounded-lg border border-border bg-background p-5"
-          >
+          <Card v-for="(p, i) in philosophy" :key="p" class="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`) }}
@@ -67,7 +64,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>
-          </article>
+          </Card>
         </div>
       </div>
     </section>
@@ -81,16 +78,12 @@ 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">
-        <article
-          v-for="p in pillars"
-          :key="p"
-          class="rounded-lg border border-border bg-card p-6"
-        >
+        <Card v-for="p in pillars" :key="p" class="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>
-        </article>
+        </Card>
       </div>
     </section>
 
@@ -101,11 +94,7 @@ const team = ['patrick', 'coco', 'charlie'] as const
           {{ t('vision.teamTitle') }}
         </h2>
         <div class="mt-8 grid gap-6 md:grid-cols-3">
-          <article
-            v-for="m in team"
-            :key="m"
-            class="rounded-lg border border-border bg-card p-6"
-          >
+          <Card v-for="m in team" :key="m" class="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`) }}
@@ -113,7 +102,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>
-          </article>
+          </Card>
         </div>
       </div>
     </section>