diff --git a/front/src/components/ui/Card.vue b/front/src/components/ui/Card.vue
index cda5ea888..2c9c81c43 100644
--- a/front/src/components/ui/Card.vue
+++ b/front/src/components/ui/Card.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 
 import { type RouterLinkProps, RouterLink } from 'vue-router';
-import { type ColorProps, type PastelProps, type RaisedProps, type VariantProps, propsToColor } from '~/composables/colors'
+import { type ColorProps, type DefaultProps, type PastelProps, type RaisedProps, type VariantProps, propsToColor } from '~/composables/colors'
 
 import Pill from './Pill.vue'
 import Alert from './Alert.vue'
@@ -14,22 +14,25 @@ interface Props extends Partial<RouterLinkProps> {
   category?: true | "h1" | "h2" | "h3" | "h4" | "h5"
   image?: string | { src: string, style?: "withPadding" }
   tags?: string[]
+  small?: true
 }
 
-const props = defineProps<Props & (PastelProps | ColorProps) & RaisedProps & VariantProps>()
+const props = defineProps<Props & (PastelProps | ColorProps | DefaultProps) & RaisedProps & VariantProps>()
 
 const image = typeof props.image === 'string' ? { src: props.image } : props.image
 
 const isExternalLink = computed(() => {
   return typeof props.to === 'string' && props.to.startsWith('http')
 })
+
+// const fallbackWidth =
 </script>
 
 <style module>
 .card {
   /* Override --width with your preferred value */
-  --fw-card-width: var(--width, 320px);
-  --fw-card-padding: 24px;
+  --fw-card-width: var(--width, v-bind("props.small ? 'min-content' : '320px'"));
+  --fw-card-padding: v-bind("props.small ? '16px' : '24px'");
 
   position: relative;
 
@@ -82,6 +85,7 @@ const isExternalLink = computed(() => {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+    flex-shrink: 0;
   }
 
   &.is-category>.title {
@@ -161,7 +165,7 @@ const isExternalLink = computed(() => {
     </div>
     <img v-else-if="image" :src="image?.src"
       :class="{ [$style.image]: true, [$style['with-padding']]: image?.style === 'withPadding' }" />
-    <Spacer v-else style="--size:12px" />
+    <Spacer v-else :size="props.small? 4 : 12" />
 
     <!-- Content -->
     <component :class="$style.title" :is="typeof category === 'string' ? category : 'h6'">{{ title }}</component>
@@ -176,9 +180,9 @@ const isExternalLink = computed(() => {
       </Pill>
     </div>
 
-    <div v-if="$slots.default" :class="$style.content">
+    <Layout no-gap v-if="$slots.default" :class="$style.content">
       <slot />
-    </div>
+    </Layout>
 
     <!-- Footer and Action -->
     <div v-if="$slots.footer" :class="$style.footer">
@@ -188,7 +192,8 @@ const isExternalLink = computed(() => {
     <div v-if="$slots.action" :class="$style.action">
       <slot name="action" />
     </div>
-    <Spacer v-else-if="!$slots.footer" style="--size:16px" />
+
+    <Spacer v-if="!$slots.footer && !$slots.action" :size="props.small? 8 : 16" />
 
   </Layout>
 </template>