diff --git a/dev/storybook/src/stories/shared/Button.stories.ts b/dev/storybook/src/stories/shared/Button.stories.ts
index 3569bafad..aaa2b85ba 100644
--- a/dev/storybook/src/stories/shared/Button.stories.ts
+++ b/dev/storybook/src/stories/shared/Button.stories.ts
@@ -9,13 +9,33 @@ const meta = {
   component: FSButton,
   tags: ['autodocs'],
   argTypes: {
-    onClick: { action: 'clicked' }
+    ...addSubcomponentsArgTypes([FSCard], FSButton),
+    ...addComponentEmits(FSButton),
+    variant: {
+      control: { type: 'radio' },
+      options: ['standard', 'full', 'icon']
+    }
   }
 } satisfies Meta<typeof FSButton>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+export const Default: Story = {
+  args: {
+    label: "I am a button",
+    icon: "mdi-plus-circle-outline"
+  },
+  render: (args) => ({
+    components: { FSButton },
+    setup() {
+      return { args };
+    },
+    template: `
+    <FSButton v-bind="args" />`
+  })
+}
+
 export const Variations: Story = {
   render: () => ({
     components: { FSButton, FSIcon, FSSpan },
@@ -131,30 +151,33 @@ export const ColorVariations: Story = {
   })
 }
 
-import FSClickable from  "@dative-gpi/foundation-shared-components/components/FSClickable.vue";
 import FSText from  "@dative-gpi/foundation-shared-components/components/FSText.vue";
 import FSRow from  "@dative-gpi/foundation-shared-components/components/FSRow.vue";
 
 export const ContentVariant: Story = {
-  render: () => ({
-    components: { FSClickable, FSRow, FSIcon, FSText },
+  args: {
+    variant: 'standard',
+    color: 'primary',
+    padding: '12px'
+  },
+  render: (args) => ({
+    components: { FSCard, FSRow, FSIcon, FSText },
+    setup() {
+      return { args };
+    },
     template: `
-    <div style="display: flex; flex-direction: column; gap: 10px;">
-      <div style="display: flex; gap: 10px;">
-        <FSClickable color="primary" padding="12px">
-          <template #default="{ contentVariant }">
-            <FSRow align="center-center">
-              <FSIcon color="success" :variant="contentVariant">
-                mdi-plus-circle-outline
-              </FSIcon>
-              <FSText color="error" :variant="contentVariant">
-                Create
-              </FSText>
-            </FSRow>
-          </template>
-        </FSClickable>
-      </div>
-    </div>`
+    <FSCard>
+      <template #default="{ contentVariant }">
+        <FSRow align="center-center">
+          <FSIcon color="success" :variant="contentVariant">
+            mdi-plus-circle-outline
+          </FSIcon>
+          <FSText color="warning" :variant="contentVariant">
+            Create
+          </FSText>
+        </FSRow>
+      </template>
+    </FSCard>`
   })
 }
 
@@ -469,6 +492,8 @@ export const Submit: Story = {
 
 import FSButtonCheckbox from  "@dative-gpi/foundation-shared-components/components/buttons/FSButtonCheckbox.vue";
 import FSTagField from '@dative-gpi/foundation-shared-components/components/fields/FSTagField.vue';
+import { addComponentEmits, addSubcomponentsArgTypes } from '@/utils/properties';
+import FSCard from '@dative-gpi/foundation-shared-components/components/FSCard.vue';
 
 export const Checkbox: Story = {
   args: {
diff --git a/dev/storybook/src/stories/shared/Calendar.stories.ts b/dev/storybook/src/stories/shared/Calendar.stories.ts
index 48b6b8a15..ac4f854d7 100644
--- a/dev/storybook/src/stories/shared/Calendar.stories.ts
+++ b/dev/storybook/src/stories/shared/Calendar.stories.ts
@@ -6,7 +6,7 @@ import type { Meta, StoryObj } from '@storybook/vue3';
 import FSCol from "@dative-gpi/foundation-shared-components/components/FSCol.vue";
 import FSSimpleCalendarHeader from "@dative-gpi/foundation-shared-components/components/calendar/FSSimpleCalendarHeader.vue";
 import FSSimpleCalendar from "@dative-gpi/foundation-shared-components/components/calendar/FSSimpleCalendar.vue";
-import FSClickable from "@dative-gpi/foundation-shared-components/components/FSClickable.vue";
+import FSCard from "@dative-gpi/foundation-shared-components/components/FSCard.vue";
 
 const meta = {
   title: 'Foundation/Shared/Calendar',
@@ -21,7 +21,7 @@ export const Default: Story = {
   args: {
   },
   render: (args, { argTypes }) => ({
-    components: { FSCol, FSSimpleCalendarHeader, FSSimpleCalendar, FSClickable },
+    components: { FSCol, FSSimpleCalendarHeader, FSSimpleCalendar, FSCard },
     props: Object.keys(argTypes),
     setup() {
       const disabledDates = ref<Date[]>([]);
@@ -48,18 +48,18 @@ export const Default: Story = {
         <FSSimpleCalendarHeader v-model:month="month" v-model:year="year" width="500px" />
         <FSSimpleCalendar v-model:month="month" v-model:year="year">
           <template #day="{ date, isToday, isPast, isFutur, isNextMonth, isPreviousMonth, isCurrentMonth }">
-            <FSClickable
+            <FSCard
               height="100px"
               width="100%"
               :disabled="isPast"
               padding="8px"
-              :variant="!isCurrentMonth ? 'full' : undefined"
-              :color="isDisabled(date) ? 'error' : undefined"
+              :variant="!isCurrentMonth ? 'full' : 'standard'"
+              :color="isDisabled(date) ? 'error' : 'light'"
               @click="toggleDate(date)"
             >
-              <FSClickable v-if="isToday" color="primary" padding="0 4px" variant="full">{{ date.getDate() }}</FSClickable>
+              <FSCard v-if="isToday" color="primary" padding="0 4px" variant="full">{{ date.getDate() }}</FSCard>
               <template v-else>{{ date.getDate() }}</template>
-            </FSClickable>
+            </FSCard>
           </template>
         </FSSimpleCalendar>
 
diff --git a/dev/storybook/src/stories/shared/Card.stories.ts b/dev/storybook/src/stories/shared/Card.stories.ts
index 9c3261780..f090157f0 100644
--- a/dev/storybook/src/stories/shared/Card.stories.ts
+++ b/dev/storybook/src/stories/shared/Card.stories.ts
@@ -1,73 +1,162 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
 
-import { VDivider } from 'vuetify/lib/components/index.mjs';
-
-import FSButton from "@dative-gpi/foundation-shared-components/components/FSButton.vue";
 import FSCard from "@dative-gpi/foundation-shared-components/components/FSCard.vue";
-import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
-import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+import { ColorEnum } from '@dative-gpi/foundation-shared-components/models';
+import { CardVariants } from '@dative-gpi/foundation-shared-components/models';
+import FSIcon from '@dative-gpi/foundation-shared-components/components/FSIcon.vue';
+import { addComponentEmits } from '@/utils/properties';
+import FSSpan from '@dative-gpi/foundation-shared-components/components/FSSpan.vue';
 
 const meta = {
   title: 'Foundation/Shared/Card',
   component: FSCard,
   tags: ['autodocs'],
   argTypes: {
-    onClick: { action: 'clicked' }
+    variant: {
+      control: { type: 'select' },
+      options: [CardVariants.Standard, CardVariants.Background, CardVariants.Gradient, CardVariants.Full],
+      description: 'Mode of the agenda view',
+    },
+    clickable: {
+      control: { type: 'boolean' }
+    },
+    ...addComponentEmits(FSCard)
   },
 } satisfies Meta<typeof FSCard>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Variations: Story = {
-  render: () => ({
-    components: { VDivider, FSCard, FSText, FSRow, FSButton },
+export const Default: Story = {
+  render: (args) => ({
+    components: { FSCard, FSSpan },
+    setup() {
+      return { args };
+    },
+    template: `
+    <FSCard
+      v-bind="args"
+    >
+      <FSSpan>I am a card content</FSSpan>
+    </FSCard>`
+  }),
+  args: {
+    padding: '16px',
+    clickable: false,
+  },
+};
+
+export const Variants: Story = {
+  render: (args) => ({
+    components: { FSCard, FSSpan },
+    setup() {
+      return { args, ColorEnum };
+    },
+    inheritAttrs: false,
     template: `
-    <div style="display: flex; flex-direction: column; gap: 10px;">
-        <div style="display: flex; gap: 10px;">
-            <FSCard>
-                <template #header>
-                    <FSText font="text-button">Obiwan kenobi</FSText>
-                </template>
-                <template #body>
-                    <FSText> - Hello there!</FSText>
-                </template>
-            </FSCard>
-        </div>
-        <div style="display: flex; gap: 10px;">
-            <FSCard>
-                <template #header>
-                    <FSText font="text-button">General Grievous</FSText>
-                </template>
-                <template #body>
-                    <FSText> - General Kenobi!</FSText>
-                </template>
-                <template #footer>
-                    <FSText font="text-overline">(suprised)</FSText>
-                </template>
-            </FSCard>
-            <FSCard>
-                <template #header>
-                    <FSText font="text-button">General Grievous</FSText>
-                </template>
-                <template #body>
-                    <FSText> - You are a bold one.</FSText>
-                </template>
-            </FSCard>
-        </div>
-        <div style="width: 100%; border-bottom: 2px dotted lightgrey" />
-        <div style="display: flex; gap: 10px;">
-            <FSCard color="primary">
-                <FSRow>
-                    <FSButton color="primary" variant="icon" icon="mdi-format-header-1" />
-                    <FSButton color="primary" variant="icon" icon="mdi-format-header-2" />
-                    <FSButton color="primary" variant="icon" icon="mdi-format-header-3" />
-                    <v-divider vertical />
-                    <FSButton color="primary" variant="icon" icon="mdi-format-bold" />
-                    <FSButton color="primary" variant="icon" icon="mdi-format-italic" />
-                </FSRow>
-            </FSCard>
-        </div>
-    </div>`
-  })
-}
\ No newline at end of file
+    <div
+        style="display: flex; flex-direction: row; gap: 16px;"
+    >
+        <FSCard
+        v-bind="args"
+        variant="background"
+        >
+        <FSSpan>Variant : background</FSSpan>
+        </FSCard>
+        <FSCard
+        v-bind="args"
+        variant="standard"
+        >
+        <FSSpan>Variant : standard</FSSpan>
+        </FSCard>
+        <FSCard
+        v-bind="args"
+        variant="full"
+        >
+        <FSSpan>Variant : full</FSSpan>
+        </FSCard>
+        <FSCard
+        v-bind="args"
+        :color="[ColorEnum.Primary, ColorEnum.Error]"
+        variant="gradient"
+        >
+        <FSSpan>Variant : gradient</FSSpan>
+        </FSCard>
+    </div>
+    `
+  }),
+  args: {
+    padding: '16px',
+    color: ColorEnum.Primary
+  },
+};
+
+export const Clickables: Story = {
+  render: (args) => ({
+    components: {
+      FSCard,
+      FSSpan,
+      FSIcon
+    },
+    setup() {
+      return { args, ColorEnum };
+    },
+    inheritAttrs: false,
+    template: `
+    <div
+        style="display: flex; flex-direction: row; gap: 16px;"
+    >
+        <FSCard
+            v-bind="args"
+            href="https://dative-gpi.com"
+        >
+          <FSSpan>
+            Href
+          </FSSpan>
+        </FSCard>
+        <FSCard
+            v-bind="args"
+            :to="{ name: 'About' }"
+        >
+          <FSSpan>
+            Router Link
+          </FSSpan>
+        </FSCard>
+       <FSCard
+            v-bind="args" 
+            @click="() => console.log('Card clicked')"
+        >
+            <template #default="{ contentVariant }">
+                <FSIcon
+                    icon="mdi-check"
+                    :variant="contentVariant"
+                    color="error"
+                    size="16"
+                />
+                <FSSpan>
+                  Clickable event
+                </FSSpan>
+            </template>
+        </FSCard>
+        <FSCard
+          :clickable="true"
+          type="submit"
+          v-bind="args"
+        >
+            <FSIcon
+                icon="mdi-check"
+                size="16"
+            />
+            <FSSpan>
+              Clickable submit
+            </FSSpan>
+        </FSCard>
+    </div>
+    `
+  }),
+  args: {
+    padding: '16px',
+    color: ColorEnum.Primary,
+    variant: 'standard'
+  },
+};
diff --git a/dev/storybook/src/stories/shared/Chip.stories.ts b/dev/storybook/src/stories/shared/Chip.stories.ts
index 04563066c..008dbdef9 100644
--- a/dev/storybook/src/stories/shared/Chip.stories.ts
+++ b/dev/storybook/src/stories/shared/Chip.stories.ts
@@ -1,18 +1,20 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
 
+import { addComponentEmits, addSubcomponentsArgTypes } from '@/utils/properties';
+
 import FSText from "@dative-gpi/foundation-shared-components/components/FSText.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
 import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
 import FSChip from "@dative-gpi/foundation-shared-components/components/FSChip.vue";
-import { addSubcomponentsArgTypes } from '@/utils/properties';
-import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
+import FSCard from '@dative-gpi/foundation-shared-components/components/FSCard.vue';
 
 const meta = {
   title: 'Foundation/Shared/Chip',
   component: FSChip,
   tags: ['autodocs'],
   argTypes: {
-    ...addSubcomponentsArgTypes([FSRow], FSChip)
+    ...addSubcomponentsArgTypes([FSCard], FSChip),
+    ...addComponentEmits(FSChip)
   },
 } satisfies Meta<typeof FSChip>;
 
@@ -23,8 +25,8 @@ export const Default: Story = {
   args: {
     color: 'primary',
     variant: 'standard',
-    label: 'I am a chip',
-    to: { name: 'About' }
+    label: 'I am a chip to dative-gpi',
+    clickable: false,
   },
   render: (args) => ({
     components: { FSChip, FSText, FSSpan, FSIcon },
@@ -40,52 +42,77 @@ export const Default: Story = {
 }
 
 export const Variations: Story = {
-  render: () => ({
+  args: {
+    clickable: true
+  },
+  render: (args) => ({
     components: { FSChip, FSText, FSSpan, FSIcon },
+    inheritAttrs: false,
+    setup() {
+      return { args }
+    },
     template: `
     <div style="display: flex; flex-direction: column; gap: 10px;">
       <FSText> With slots (default & button) </FSText>
       <div style="display: flex; gap: 10px; flex-wrap: wrap;">
-        <FSChip color="primary" :clickable="true">
+        <FSChip color="primary" v-bind="args">
           <FSIcon size="s"> mdi-emoticon-cool-outline </FSIcon>
-          <FSSpan font="text-overline"> Primary, full, clickable </FSSpan>
+          <FSSpan font="text-overline"> Primary, full</FSSpan>
         </FSChip>
-        <FSChip color="success" variant="standard">
-          <FSSpan font="text-overline"> Success, standard, unclickable </FSSpan>
+        <FSChip color="success" variant="standard" v-bind="args">
+          <FSSpan font="text-overline"> Success, standard</FSSpan>
         </FSChip>
-        <FSChip color="warning" :clickable="true">
-          <FSSpan font="text-overline"> Warning, full, clickable </FSSpan>
+        <FSChip color="warning" v-bind="args">
+          <FSSpan font="text-overline"> Warning, full</FSSpan>
         </FSChip>
-        <FSChip color="error" variant="standard">
+        <FSChip color="error" variant="standard" v-bind="args">
           <FSIcon size="s"> mdi-thermometer </FSIcon>
-          <FSSpan font="text-overline"> Error, standard, unclickable </FSSpan>
+          <FSSpan font="text-overline"> Error, standard </FSSpan>
         </FSChip>
-        <FSChip color="light">
-          <FSSpan font="text-overline"> Light, full, unclickable </FSSpan>
+        <FSChip color="light" v-bind="args">
+          <FSSpan font="text-overline"> Light, full </FSSpan>
         </FSChip>
-        <FSChip color="dark" variant="standard" :clickable="true">
-          <FSSpan font="text-overline"> Dark, standard, clickable </FSSpan>
+        <FSChip color="dark" variant="standard" v-bind="args">
+          <template #default="{ contentVariant }">
+            <FSIcon
+              icon="mdi-check"
+              :variant="contentVariant"
+              color="error"
+              size="16"
+            />
+            <FSSpan font="text-button">contentVariant slot passage</FSSpan>
+          </template>
         </FSChip>
       </div>
       <div style="width: 100%; border-bottom: 2px dotted lightgrey" />
       <FSText> With props </FSText>
       <div style="display: flex; gap: 10px;">
-        <FSChip color="primary" variant="standard" label="Primary, standard, unclickable" />
-        <FSChip color="success" :clickable="true" prependIcon="mdi-check" label="Success, full, clickable"     />
-        <FSChip color="warning" variant="standard" label="Warning, standard, unclickable" />
-        <FSChip color="error" :clickable="true" label="Error, full, clickable" appendIcon="mdi-close" />
-        <FSChip color="light" variant="standard" :clickable="true" label="Light, standard, clickable" />
-        <FSChip color="dark" label="Dark, full, unclickable" />
+        <FSChip color="primary" variant="standard" label="Primary, standard" v-bind="args" />
+        <FSChip color="success" prependIcon="mdi-check" label="Success, full" v-bind="args" />
+        <FSChip color="warning" variant="standard" label="Warning, standard" v-bind="args" />
+        <FSChip color="error" label="Error, full" appendIcon="mdi-close" v-bind="args" />
+        <FSChip color="light" variant="standard" label="Light, standard" v-bind="args" />
+        <FSChip color="dark" label="Dark, full" v-bind="args" />
+      </div>
+      <div style="width: 100%; border-bottom: 2px dotted lightgrey" />
+      <FSText>Variants</FSText>
+      <div style="display: flex; gap: 10px;">
+        <FSChip width="200px" color="primary" variant="standard" label="standard" v-bind="args" />
+        <FSChip width="200px" color="primary" variant="standard" :border="false" label="standard no border" v-bind="args" />
+        <FSChip width="200px" color="primary" variant="full" label="full (default)" v-bind="args" />
+        <FSChip width="200px" color="primary" variant="background" label="background" v-bind="args" />
+        <FSChip width="200px" :color="['primary', 'aqua']" variant="gradient" label="gradient" v-bind="args" />
+        <FSChip width="200px" :color="['primary', 'aqua']" variant="gradient" label="gradient no border" :border="false" v-bind="args" />
       </div>
       <div style="width: 100%; border-bottom: 2px dotted lightgrey" />
       <FSText> Text align </FSText>
       <div style="display: flex; gap: 10px;">
-        <FSChip width="200px" color="primary" variant="standard" label="200px with long labelllllllllllllllllllllllll" />
-        <FSChip width="500px" align="center-center" color="primary" variant="standard" label="500px with align center-center" />
+        <FSChip width="200px" color="primary" variant="standard" label="200px with long labelllllllllllllllllllllllll" v-bind="args" />
+        <FSChip width="500px" align="center-center" color="primary" variant="standard" label="500px with align center-center" v-bind="args" />
       </div>
       <div style="display: flex; gap: 10px;">
-        <FSChip width="fill" align="center-left" color="primary" variant="standard" label="fill with align center-left" />
-        <FSChip width="fill" color="primary" variant="standard" label="fill without align center-left" />
+        <FSChip width="100%" align="center-left" color="primary" variant="standard" label="100% with align center-left" v-bind="args" />
+        <FSChip width="100%" color="primary" variant="standard" label="100% without align center-left" v-bind="args" />
       </div>
     </div>`
   })
diff --git a/dev/storybook/src/stories/shared/EditImageUI.stories.ts b/dev/storybook/src/stories/shared/EditImageUI.stories.ts
index 5539ee1a9..1e9f4e8e8 100644
--- a/dev/storybook/src/stories/shared/EditImageUI.stories.ts
+++ b/dev/storybook/src/stories/shared/EditImageUI.stories.ts
@@ -89,7 +89,7 @@ export const VariationFull: Story = {
         v-model="args.modelValue"
         @update:modelValue="args['onUpdate:modelValue']"
         @update:source="args['onUpdate:source']"
-      >`
+      />`
   })
 }
 
@@ -124,6 +124,6 @@ export const VariationFullSource: Story = {
         v-model="args.modelValue"
         @update:modelValue="args['onUpdate:modelValue']"
         @update:source="args['onUpdate:source']"
-      >`
+      />`
   })
 }
\ No newline at end of file
diff --git a/dev/storybook/src/stories/shared/Link.stories.ts b/dev/storybook/src/stories/shared/Link.stories.ts
index b95ffcc75..36174178b 100644
--- a/dev/storybook/src/stories/shared/Link.stories.ts
+++ b/dev/storybook/src/stories/shared/Link.stories.ts
@@ -7,7 +7,6 @@ const meta = {
   component: FSLink,
   tags: ['autodocs'],
   argTypes: {
-    onClick: { action: 'clicked' }
   }
 } satisfies Meta<typeof FSLink>;
 
@@ -16,8 +15,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Variations: Story = {
   args: {
-    args: {
-    }
   },
   render: (args, { argTypes }) => ({
     components: { FSLink },
diff --git a/src/core/foundation-core-components/components/lists/dataCategories/FSBaseDataCategoriesList.vue b/src/core/foundation-core-components/components/lists/dataCategories/FSBaseDataCategoriesList.vue
index 681ef790f..5b2e5efdb 100644
--- a/src/core/foundation-core-components/components/lists/dataCategories/FSBaseDataCategoriesList.vue
+++ b/src/core/foundation-core-components/components/lists/dataCategories/FSBaseDataCategoriesList.vue
@@ -41,17 +41,18 @@
         <template
           #item.tile="{ index, item }"
         >
-          <FSClickable
+          <FSCard
             :key="index"
             padding="12px"
             height="60px"
             width="233px"
-            :color="isSelected(item.id) ? ColorEnum.Primary : ColorEnum.Dark"
+            :variant="isSelected(item.id) ? CardVariants.Standard : CardVariants.Background"
+            :color="ColorEnum.Primary"
             @click="$emit('update:modelValue', [item.id])"
             v-bind="$attrs"
           >
             <template
-              #default
+              #default="{ contentVariant }"
             >
               <FSRow
                 align="center-center"
@@ -66,11 +67,11 @@
                 <FSIcon
                   :color="item.correlated ? ColorEnum.Primary : ColorEnum.Light"
                   :icon="item.correlated ? 'mdi-link' : 'mdi-link-off'"
-                  variant="dark"
+                  :variant="contentVariant"
                 />
               </FSRow>
             </template>
-          </FSClickable>
+          </FSCard>
         </template>
       </FSDataTable>
     </FSFadeOut>
@@ -81,7 +82,7 @@
 import { defineComponent, type PropType, ref, watch } from "vue";
 import _ from "lodash";
 
-import {ColorEnum} from "@dative-gpi/foundation-shared-components/models";
+import {CardVariants, ColorEnum} from "@dative-gpi/foundation-shared-components/models";
 
 import { useDataCategories } from "@dative-gpi/foundation-core-services/composables";
 import type { DataCategoryFilters } from "@dative-gpi/foundation-core-domain/models";
@@ -89,10 +90,10 @@ import type { DataCategoryFilters } from "@dative-gpi/foundation-core-domain/mod
 import FSDataTable from "../FSDataTable.vue";
 import FSCol from "@dative-gpi/foundation-shared-components/components/FSCol.vue";
 import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
+import FSCard from "@dative-gpi/foundation-shared-components/components/FSCard.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
 import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
 import FSFadeOut from "@dative-gpi/foundation-shared-components/components/FSFadeOut.vue";
-import FSClickable from "@dative-gpi/foundation-shared-components/components/FSClickable.vue";
 import FSSearchField from "@dative-gpi/foundation-shared-components/components/fields/FSSearchField.vue";
 import FSButtonCheckbox from "@dative-gpi/foundation-shared-components/components/buttons/FSButtonCheckbox.vue";
 
@@ -102,7 +103,7 @@ export default defineComponent({
     FSDataTable,
     FSCol,
     FSFadeOut,
-    FSClickable,
+    FSCard,
     FSRow,
     FSSpan,
     FSSearchField,
@@ -146,6 +147,7 @@ export default defineComponent({
     return {
       fetchingDataCategories,
       dataCategories,
+      CardVariants,
       ColorEnum,
       search,
       correlated,
diff --git a/src/core/foundation-core-components/components/lists/dataDefinitions/FSBaseDataDefinitionsList.vue b/src/core/foundation-core-components/components/lists/dataDefinitions/FSBaseDataDefinitionsList.vue
index 2d7e0df85..0379a32fa 100644
--- a/src/core/foundation-core-components/components/lists/dataDefinitions/FSBaseDataDefinitionsList.vue
+++ b/src/core/foundation-core-components/components/lists/dataDefinitions/FSBaseDataDefinitionsList.vue
@@ -28,17 +28,18 @@
     <template
       #item.tile="{ index, item }"
     >
-      <FSClickable
+      <FSCard
         :key="index"
         padding="12px"
         height="60px"
         width="233px"
-        :color="isSelected(item.id) ? ColorEnum.Primary : ColorEnum.Light"
+        :color="ColorEnum.Primary"
+        :variant="isSelected(item.id) ? CardVariants.Standard : CardVariants.Background"
         @click="$emit('update:modelValue', [item.id])"
         v-bind="$attrs"
       >
         <template
-          #default
+          #default="{ contentVariant }"
         >
           <FSRow
             align="center-center"
@@ -54,11 +55,12 @@
             <v-spacer/>
             <FSIcon
               :color="ColorEnum.Primary"
+              :variant="contentVariant"
               icon="mdi-link"
             />
           </FSRow>
         </template>
-      </FSClickable>
+      </FSCard>
     </template>
   </FSDataTable>
 </template>
@@ -67,7 +69,7 @@
 import { defineComponent, type PropType, watch } from "vue";
 import _ from "lodash";
 
-import {ColorEnum} from "@dative-gpi/foundation-shared-components/models";
+import { CardVariants, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import { useDataDefinitions } from "@dative-gpi/foundation-core-services/composables";
 import type { DataDefinitionFilters } from "@dative-gpi/foundation-core-domain/models";
@@ -76,7 +78,7 @@ import FSDataTable from "../FSDataTable.vue";
 import FSRow from "@dative-gpi/foundation-shared-components/components/FSRow.vue";
 import FSSpan from "@dative-gpi/foundation-shared-components/components/FSSpan.vue";
 import FSIcon from "@dative-gpi/foundation-shared-components/components/FSIcon.vue";
-import FSClickable from "@dative-gpi/foundation-shared-components/components/FSClickable.vue";
+import FSCard from "@dative-gpi/foundation-shared-components/components/FSCard.vue";
 import FSButtonCheckbox from "@dative-gpi/foundation-shared-components/components/buttons/FSButtonCheckbox.vue";
 
 export default defineComponent({
@@ -84,7 +86,7 @@ export default defineComponent({
   components: {
     FSButtonCheckbox,
     FSDataTable,
-    FSClickable,
+    FSCard,
     FSSpan,
     FSIcon,
     FSRow,
@@ -123,6 +125,7 @@ export default defineComponent({
     return {
       fetchingDataDefinitions,
       dataDefinitions,
+      CardVariants,
       ColorEnum,
       isSelected
     };
diff --git a/src/shared/foundation-shared-components/components/FSButton.vue b/src/shared/foundation-shared-components/components/FSButton.vue
index 164fac212..1c02eeece 100644
--- a/src/shared/foundation-shared-components/components/FSButton.vue
+++ b/src/shared/foundation-shared-components/components/FSButton.vue
@@ -1,6 +1,7 @@
 <template>
-  <FSClickable
+  <FSCard
     v-if="$props.variant !== 'icon'"
+    :clickable="true"
     :disabled="$props.disabled"
     :padding="padding"
     :variant="$props.variant"
@@ -8,7 +9,6 @@
     :load="$props.load"
     :href="$props.href"
     :to="$props.to"
-    :style="style"
     @click.stop="onClick"
     v-bind="$attrs"
   >
@@ -87,93 +87,62 @@
         </FSIcon>
       </slot>
     </FSCol>
-  </FSClickable>
-  <FSRow
+  </FSCard>
+  <FSRouterLink
     v-else
-    width="hug"
+    :to="$props.to"
+    :href="$props.href"
     :class="iconClasses"
-    :style="style"
     @click.stop="onClick"
-    v-bind="$attrs"
   >
-    <template
-      v-if="$props.load"
-    >
-      <v-progress-circular
-        class="fs-button-load"
-        width="2"
-        size="20"
-        :indeterminate="true"
-        :color="loadColor"
-      />
-    </template>
-    <template
-      v-else-if="$props.href"
+    <FSRow
+      width="hug"
+      align="center-left"
+      v-bind="$attrs"
     >
-      <a
-        :href="$props.href"
+      <template
+        v-if="$props.load"
       >
-        <FSIcon
-          v-if="$props.icon"
-          :size="$props.iconSize"
-        >
-          {{ $props.icon }}
-        </FSIcon>
-        <FSSpan
-          v-if="$props.label"
-        >
-          {{ $props.label }}
-        </FSSpan>
-      </a>
-    </template>
-    <template
-      v-else-if="$props.to"
-    >
-      <FSRouterLink
-        :to="$props.to"
+        <v-progress-circular
+          class="fs-button-load"
+          width="2"
+          size="20"
+          :indeterminate="true"
+          :color="loadColor"
+        />
+      </template>
+      <template
+        v-else
       >
         <FSIcon
           v-if="$props.icon"
+          :color="iconVariantColor"
           :size="$props.iconSize"
         >
           {{ $props.icon }}
         </FSIcon>
-        <FSSpan
+        <FSText
           v-if="$props.label"
+          :color="iconVariantColor"
         >
           {{ $props.label }}
-        </FSSpan>
-      </FSRouterLink>
-    </template>
-    <template
-      v-else
-    >
-      <FSIcon
-        v-if="$props.icon"
-        :size="$props.iconSize"
-      >
-        {{ $props.icon }}
-      </FSIcon>
-      <FSSpan
-        v-if="$props.label"
-      >
-        {{ $props.label }}
-      </FSSpan>
-    </template>
-  </FSRow>
+        </FSText>
+      </template>
+    </FSRow>
+  </FSRouterLink>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue, useSlots } from "vue";
+import { computed, defineComponent, type PropType, useSlots } from "vue";
 import { type RouteLocation } from "vue-router";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
-import FSRouterLink from "./FSRouterLink.vue";
-import FSClickable from "./FSClickable.vue";
-import FSSpan from "./FSSpan.vue";
+import FSRouterLink from './FSRouterLink.vue';
+import FSText from "./FSText.vue";
 import FSIcon from "./FSIcon.vue";
+import FSCard from './FSCard.vue';
 import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
 
@@ -187,8 +156,8 @@ export default defineComponent({
   name: "FSButton",
   components: {
     FSRouterLink,
-    FSClickable,
-    FSSpan,
+    FSCard,
+    FSText,
     FSIcon,
     FSCol,
     FSRow
@@ -265,32 +234,17 @@ export default defineComponent({
     const { getColors } = useColors();
 
     const colors = computed(() => getColors(props.color));
-    const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
     const slots = useSlots();
 
-    const style = computed((): StyleValue => {
+    const iconVariantColor = computed((): string => {
       if (props.disabled) {
-        switch (props.variant) {
-          case "icon": return {
-            "--fs-button-color": lights.dark,
-          };
-        }
+        return ColorEnum.Light;
       }
-      switch (props.variant) {
-        case "icon": switch (props.color) {
-          case ColorEnum.Dark:
-          case ColorEnum.Light: return {
-            "--fs-button-color"      : darks.base,
-            "--fs-button-hover-color": darks.dark,
-          };
-          default: return {
-            "--fs-button-color"      : colors.value.base,
-            "--fs-button-hover-color": colors.value.dark,
-          };
-        }
+      if (props.color === ColorEnum.Light) {
+        return ColorEnum.Dark;
       }
-      return {};
+      return props.color;
     });
 
     const iconClasses = computed((): string[] => {
@@ -337,11 +291,11 @@ export default defineComponent({
     };
 
     return {
-      iconClasses,
-      loadColor,
       colors,
-      style,
       padding,
+      loadColor,
+      iconClasses,
+      iconVariantColor,
       onClick
     };
   }
diff --git a/src/shared/foundation-shared-components/components/FSCard.vue b/src/shared/foundation-shared-components/components/FSCard.vue
index 17b32d3c5..018e43028 100644
--- a/src/shared/foundation-shared-components/components/FSCard.vue
+++ b/src/shared/foundation-shared-components/components/FSCard.vue
@@ -1,142 +1,187 @@
 <template>
-  <div
-    :class="classes"
+  <FSRouterLink
     :style="style"
+    :to="$props.to"
+    :href="$props.href"
+    :type="actualWrapperType"
+    :passive="actualClickable ? false : true"
+    :class="['fs-card-wrapper', $props.class]"
+    v-on="wrapperListeners"
   >
-    <slot>
-      <FSCol
-        :gap="$props.gap"
-      >
-        <FSRow
-          v-if="$slots.header"
-        >
-          <slot
-            name="header"
-          />
-        </FSRow>
-        <FSRow
-          v-if="$slots.body"
-        >
-          <slot
-            name="body"
-          />
-        </FSRow>
-        <FSRow
-          v-if="$slots.footer"
-        >
-          <slot
-            name="footer"
-          />
-        </FSRow>
-      </FSCol>
-    </slot>
-    <FSRow
-      v-if="$slots['top-right']"
-      class="fs-card-top-right"
+    <div
+      :class="classes"
     >
       <slot
-        name="top-right"
+        name="default"
+        v-bind="{ contentVariant }"
+      />
+      <v-progress-circular
+        v-if="$props.load"
+        class="fs-card-load__spinner"
+        width="2"
+        size="24"
+        :indeterminate="true"
+        :color="loadColor"
       />
-    </FSRow>
-  </div>
+      <FSRow
+        v-if="$slots['top-right'] && !$props.load"
+        class="fs-card-top-right"
+      >
+        <slot
+          name="top-right"
+        />
+      </FSRow>
+    </div>
+  </FSRouterLink>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+import { computed, defineComponent, ref, type PropType, type StyleValue } from "vue";
+import { type RouteLocation } from "vue-router";
 
-import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { type CardVariant, type ColorBase, ColorEnum, CardVariants, type ColorBaseVariations } from "@dative-gpi/foundation-shared-components/models";
 
-import FSCol from "./FSCol.vue";
 import FSRow from "./FSRow.vue";
+import FSRouterLink from "./FSRouterLink.vue";
 
 export default defineComponent({
   name: "FSCard",
   components: {
-    FSCol,
+    FSRouterLink,
     FSRow
   },
   props: {
     height: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
       default: null
     },
     width: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
       default: null
     },
     maxWidth: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
       default: null
     },
     padding: {
       type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
       default: "0"
     },
-    gap: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+    class: {
+      type: [String, Array] as PropType<string | string[] | null>,
+      default: null
+    },
+    to: {
+      type: Object as PropType<RouteLocation | null>,
+      default: null
+    },
+    href: {
+      type: String as PropType<string | null>,
+      default: null
+    },
+    onClick: {
+      type: Function as PropType<(event: MouseEvent) => void | null>,
       required: false,
-      default: "8px"
+      default: null
     },
     variant: {
-      type: String as PropType<"background" | "standard" | "full" | "gradient">,
+      type: String as PropType<CardVariant>,
       required: false,
-      default: "background"
+      default: CardVariants.Background
+    },
+    clickable: {
+      type: Boolean as PropType<boolean | null>,
+      default: null
     },
     color: {
       type: [Array, String] as PropType<ColorBase | ColorBase[]>,
-      required: false,
       default: ColorEnum.Background
     },
     border: {
       type: Boolean,
-      required: false,
       default: true
     },
     borderRadius: {
       type: [String, Number],
-      required: false,
       default: "4px"
     },
     borderStyle: {
       type: String as PropType<"solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "inset" | "outset" | "none">,
-      required: false,
       default: "solid"
     },
     borderColor: {
       type: [Array, String] as PropType<ColorBase | null | string>,
-      required: false,
       default: null
     },
     elevation: {
       type: Boolean,
-      required: false,
       default: false
     },
     topRightPadding: {
       type: [String, Number],
-      required: false,
       default: "4px"
+    },
+    type: {
+      type: String as PropType<"button" | "submit" | "reset" | null>,
+      default: null
+    },
+    load: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
-  setup(props) {
+  setup(props, { emit }) {
     const { getColors, getGradients } = useColors();
 
+    const active = ref(false);
+    const hover = ref(false);
+
+    const backgrounds = getColors(ColorEnum.Background);
+    const lights = getColors(ColorEnum.Light);
+
     const colors = computed(() => {
       if (Array.isArray(props.color)) {
         return getColors(props.color[0]);
       }
       return getColors(props.color);
     });
+
     const gradients = computed(() => getGradients(props.color, 135));
-    const backgrounds = getColors(ColorEnum.Background);
-    const lights = getColors(ColorEnum.Light);
-    const darks = getColors(ColorEnum.Dark);
+
+    const actualClickable = computed((): boolean => {
+      if (props.clickable === false || props.disabled) {
+        return false;
+      }
+      return props.clickable || !!props.to || !!props.href || !!props.onClick;
+    });
+
+    const actualWrapperType = computed(() => {
+      if (props.type) {
+        return props.type;
+      }
+      return "button";
+    });
+
+    const contentVariant = computed((): ColorBaseVariations => {
+      if (active.value) {
+        return "darkContrast";
+      }
+      if (hover.value) {
+        return "baseContrast";
+      }
+      switch (props.variant) {
+        case "standard"  : return "lightContrast";
+        case "background": return "base";
+        case "full"      : return "baseContrast";
+      }
+      return "base";
+    });
 
     const borderColor = computed((): ColorBase => {
       if (props.borderColor) {
@@ -159,59 +204,76 @@ export default defineComponent({
       }
     });
 
+    const loadColor = computed((): string => {
+      return colors.value[contentVariant.value] ?? colors.value.baseContrast!;
+    });
+
     const style = computed((): StyleValue => {
+      const baseStyle = {
+        "--fs-card-border-size"     : props.border ? "1px" : "0",
+        "--fs-card-border-style"    : props.borderStyle,
+        "--fs-card-border-radius"   : sizeToVar(props.borderRadius),
+        "--fs-card-padding"         : sizeToVar(props.padding),
+        "--fs-card-height"          : sizeToVar(props.height),
+        "--fs-card-width"           : sizeToVar(props.width),
+        "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
+        "--fs-card-top-right-padding": sizeToVar(props.topRightPadding)
+      };
+      if (props.disabled) {
+        return {
+          ...baseStyle,
+          "--fs-card-background-color": lights.light,
+          "--fs-card-border-color"    : lights.dark,
+          "--fs-card-color"           : lights.lightContrast!
+        };
+      }
+      
       switch (props.variant) {
         case "background": return {
-          "--fs-card-border-size"     : props.border ? "1px" : "0",
-          "--fs-card-border-style"    : props.borderStyle,
-          "--fs-card-border-radius"   : sizeToVar(props.borderRadius),
-          "--fs-card-padding"         : sizeToVar(props.padding),
-          "--fs-card-height"          : sizeToVar(props.height),
-          "--fs-card-width"           : sizeToVar(props.width),
-          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
+          ...baseStyle,
           "--fs-card-background-color": backgrounds.base,
           "--fs-card-border-color"    : borderColor.value,
-          "--fs-card-color"           : darks.base,
-          "--fs-card-top-right-padding": sizeToVar(props.topRightPadding)
+          "--fs-card-color"           : backgrounds.baseContrast!,
+          "--fs-card-hover-background-color" : colors.value.base,
+          "--fs-card-hover-border-color"     : colors.value.baseContrast!,
+          "--fs-card-hover-color"            : colors.value.baseContrast!
         }
-        case "standard": return {
-          "--fs-card-border-size"     : props.border ? "1px" : "0",
-          "--fs-card-border-style"    : props.borderStyle,
-          "--fs-card-border-radius"   : sizeToVar(props.borderRadius),
-          "--fs-card-padding"         : sizeToVar(props.padding),
-          "--fs-card-height"          : sizeToVar(props.height),
-          "--fs-card-width"           : sizeToVar(props.width),
-          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
-          "--fs-card-background-color": colors.value.light,
-          "--fs-card-border-color"    : borderColor.value,
-          "--fs-card-color"           : colors.value.lightContrast!,
-          "--fs-card-top-right-padding": sizeToVar(props.topRightPadding)
+        case "standard": {
+          if (actualClickable.value && !Array.isArray(props.color) && [ColorEnum.Light, ColorEnum.Dark].includes(props.color as ColorEnum)) {
+            return {
+              ...baseStyle,
+              "--fs-card-background-color": backgrounds.base,
+              "--fs-card-border-color"    : lights.dark,
+              "--fs-card-color"           : backgrounds.baseContrast!,
+              "--fs-card-hover-background-color" : lights.base,
+              "--fs-card-hover-border-color"     : lights.dark,
+              "--fs-card-hover-color"            : lights.baseContrast!
+            };
+          }
+          return {
+            ...baseStyle,
+            "--fs-card-background-color": colors.value.light,
+            "--fs-card-border-color"    : borderColor.value,
+            "--fs-card-color"           : colors.value.lightContrast!,
+            "--fs-card-hover-background-color" : colors.value.base,
+            "--fs-card-hover-border-color"     : colors.value.base,
+            "--fs-card-hover-color"            : colors.value.baseContrast!
+          };
         }
         case "full": return {
-          "--fs-card-border-size"     : props.border ? "1px" : "0",
-          "--fs-card-border-style"    : props.borderStyle,
-          "--fs-card-border-radius"   : sizeToVar(props.borderRadius),
-          "--fs-card-padding"         : sizeToVar(props.padding),
-          "--fs-card-height"          : sizeToVar(props.height),
-          "--fs-card-width"           : sizeToVar(props.width),
-          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
+          ...baseStyle,
           "--fs-card-background-color": colors.value.base,
           "--fs-card-border-color"    : borderColor.value,
           "--fs-card-color"           : colors.value.baseContrast!,
-          "--fs-card-top-right-padding": sizeToVar(props.topRightPadding)
+          "--fs-card-hover-background-color" : colors.value.base,
+          "--fs-card-hover-border-color"     : colors.value.base,
+          "--fs-card-hover-color"            : colors.value.baseContrast!
         }
         case "gradient": return {
-          "--fs-card-border-size"     : props.border ? "1px" : "0",
-          "--fs-card-border-style"    : props.borderStyle,
-          "--fs-card-border-radius"   : sizeToVar(props.borderRadius),
-          "--fs-card-padding"         : sizeToVar(props.padding),
-          "--fs-card-height"          : sizeToVar(props.height),
-          "--fs-card-width"           : sizeToVar(props.width),
-          "--fs-card-max-width"       : sizeToVar(props.maxWidth, "unset"),
+          ...baseStyle,
           "--fs-card-background-color": gradients.value.base,
           "--fs-card-border-color"    : borderColor.value,
-          "--fs-card-color"           : colors.value.lightContrast!,
-          "--fs-card-top-right-padding": sizeToVar(props.topRightPadding)
+          "--fs-card-color"           : colors.value.lightContrast!
         }
       }
     });
@@ -224,21 +286,60 @@ export default defineComponent({
           break;
         case "background":
           classNames.push("fs-card-background");
-          classNames.push("fs-card-clickable");
           break;
         default:
           classNames.push("fs-card-background");
           break;
       }
+
+      if (actualClickable.value) {
+        classNames.push("fs-card-clickable");
+      }
+      if (props.disabled) {
+        classNames.push("fs-card-disabled");
+      }
+      if (props.load) {
+        classNames.push("fs-card-load");
+      }
       if (props.elevation) {
         classNames.push("fs-card-elevation");
       }
+      
       return classNames;
     });
+    
+    const wrapperListeners = computed(() => {
+      if (actualClickable.value && !props.disabled) {
+        return {
+          mouseover: () => { hover.value = true },
+          mouseleave: () => { hover.value = false },
+          mousedown: () => { active.value = true },
+          mouseup: () => { active.value = false },
+          "click": onClick
+        };
+      }
+      return {};
+    });
+
+    const onClick = (event: MouseEvent) => {
+      if (!actualClickable.value || props.disabled || props.load || props.href || props.to) {
+        return;
+      }
+      emit("click", event);
+    };
 
     return {
+      actualWrapperType,
+      actualClickable,
+      contentVariant,
+      FSRouterLink,
+      loadColor,
       classes,
-      style
+      active,
+      hover,
+      style,
+      onClick,
+      wrapperListeners
     };
   }
 });
diff --git a/src/shared/foundation-shared-components/components/FSCardPlaceholder.vue b/src/shared/foundation-shared-components/components/FSCardPlaceholder.vue
index 1f4058a0a..485e26a0f 100644
--- a/src/shared/foundation-shared-components/components/FSCardPlaceholder.vue
+++ b/src/shared/foundation-shared-components/components/FSCardPlaceholder.vue
@@ -1,40 +1,46 @@
 <template>
-  <component
-    :is="$attrs.onClick ? FSClickable : FSCard"
+  <FSCard
     borderStyle="dashed"
     padding="24px"
     :height="$props.height"
+    :variant="CardVariants.Standard"
+    :color="ColorEnum.Light"
     :width="$props.width"
     :border="true"
     v-bind="$attrs"
   >
-    <FSRow
-      align="center-center"
+    <template
+      #default
     >
-      <FSIcon
-        v-if="$props.icon"
-        :color="ColorEnum.Light"
-        variant="dark"
-      >
-        {{ $props.icon }}
-      </FSIcon>
-      <FSText
-        v-if="$props.label"
-        :color="ColorEnum.Light"
-        variant="dark"
-      >
-        {{ $props.label }}
-      </FSText>
-    </FSRow>
-  </component>
+      <slot>
+        <FSRow
+          align="center-center"
+        >
+          <FSIcon
+            v-if="$props.icon"
+            :color="ColorEnum.Light"
+            variant="dark"
+          >
+            {{ $props.icon }}
+          </FSIcon>
+          <FSText
+            v-if="$props.label"
+            :color="ColorEnum.Light"
+            variant="dark"
+          >
+            {{ $props.label }}
+          </FSText>
+        </FSRow>
+      </slot>
+    </template>
+  </FSCard>
 </template>
 
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
 
-import { ColorEnum } from "../models";
+import { CardVariants, ColorEnum } from "../models";
 
-import FSClickable from "./FSClickable.vue";
 import FSCard from "./FSCard.vue";
 import FSIcon from "./FSIcon.vue";
 import FSText from "./FSText.vue";
@@ -43,7 +49,6 @@ import FSRow from "./FSRow.vue";
 export default defineComponent({
   name: "FSCardPlaceholder",
   components: {
-    FSClickable,
     FSCard,
     FSIcon,
     FSText,
@@ -74,8 +79,7 @@ export default defineComponent({
   setup() {
     return {
       ColorEnum,
-      FSClickable,
-      FSCard,
+      CardVariants
     };
   }
 });
diff --git a/src/shared/foundation-shared-components/components/FSChip.vue b/src/shared/foundation-shared-components/components/FSChip.vue
index 8aace0f2e..25290dc6e 100644
--- a/src/shared/foundation-shared-components/components/FSChip.vue
+++ b/src/shared/foundation-shared-components/components/FSChip.vue
@@ -1,72 +1,72 @@
 <template>
-  <component
-    :is="$props.to && $props.clickable ? 'FSRouterLink' : 'div'"
-    class="fs-chip-container"
-    v-bind="$props.to ? { to: $props.to } : {}"
+  <FSCard
+    class="fs-chip"
+    padding="2px 20px"
+    :borderRadius="50"
+    :color="$props.color"
+    :variant="$props.variant"
+    :height="$props.height"
     @click="$emit('click', $event)"
+    v-bind="$attrs"
   >
-    <FSRow
-      :align="$props.align"
-      :width="$props.width"
-      :class="classes"
-      :style="style"
-      :wrap="false"
-      v-bind="$attrs"
+    <template
+      #default="{ contentVariant }"
     >
-      <slot
-        name="prepend"
-        v-bind="{ color: $props.color, colors }"
+      <FSRow
+        :align="$props.align"
+        :wrap="false"
       >
-        <FSIcon
-          v-if="$props.prependIcon"
-          size="s"
+        <slot
+          name="prepend"
+          v-bind="{ color: $props.color, contentVariant }"
         >
-          {{ $props.prependIcon }}
-        </FSIcon>
-      </slot>
-      <slot
-        v-bind="{ color: $props.color, colors }"
-      >
-        <FSSpan
-          v-if="$props.label"
-          font="text-overline"
-          class="fs-chip-label"
+          <FSIcon
+            v-if="$props.prependIcon"
+            size="s"
+          >
+            {{ $props.prependIcon }}
+          </FSIcon>
+        </slot>
+        <slot
+          v-bind="{ color: $props.color, contentVariant }"
         >
-          {{ $props.label }}
-        </FSSpan>
-      </slot>
-      <slot
-        name="append"
-        v-bind="{ color: $props.color, colors }"
-      >
-        <FSIcon
-          v-if="$props.appendIcon"
-          size="s"
+          <FSSpan
+            v-if="$props.label"
+            font="text-overline"
+          >
+            {{ $props.label }}
+          </FSSpan>
+        </slot>
+        <slot
+          name="append"
+          v-bind="{ color: $props.color, contentVariant }"
         >
-          {{ $props.appendIcon }}
-        </FSIcon>
-      </slot>
-    </FSRow>
-  </component>
+          <FSIcon
+            v-if="$props.appendIcon"
+            size="s"
+          >
+            {{ $props.appendIcon }}
+          </FSIcon>
+        </slot>
+      </FSRow>
+    </template>
+  </FSCard>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, type StyleValue } from "vue";
-import { type RouteLocation } from "vue-router";
+import { defineComponent, type PropType } from "vue";
 
-import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
+import { type CardVariant, CardVariants, type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSIcon from "./FSIcon.vue";
 import FSSpan from "./FSSpan.vue";
 import FSRow from "./FSRow.vue";
-import FSRouterLink from '@dative-gpi/foundation-shared-components/components/FSRouterLink.vue';
+import FSCard from './FSCard.vue';
 
 export default defineComponent({
   name: "FSChip",
   components: {
-    FSRouterLink,
+    FSCard,
     FSIcon,
     FSSpan,
     FSRow
@@ -92,100 +92,27 @@ export default defineComponent({
       required: false,
       default: () => [24, 20]
     },
-    width: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: "hug"
-    },
     variant: {
-      type: String as PropType<"standard" | "full" | "borderless">,
+      type: String as PropType<CardVariant>,
       required: false,
-      default: "full"
+      default: CardVariants.Full
     },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Primary
     },
-    clickable: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     align: {
-      type: String as PropType<"center-center" | "center-left">,
+      type: String as PropType<"top-left" | "top-center" | "top-right" | "center-left" | "center-center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right">,
       required: false,
       default: "center-center"
-    },
-    to: {
-      type: Object as PropType<RouteLocation | null>,
-      required: false,
-      default: null
-    },
+    }
   },
   inheritsAttrs: false,
   emits: ['click'],
-  setup(props) {
-    const { getColors } = useColors();
-
-    const colors = computed(() => getColors(props.color));
-    const backgrounds = getColors(ColorEnum.Background);
-    const darks = getColors(ColorEnum.Dark);
-
-    const style = computed((): StyleValue => {
-      switch (props.variant) {
-        case "standard": return {
-          "--fs-chip-height"                 : sizeToVar(props.height),
-          "--fs-chip-background-color"       : backgrounds.base,
-          "--fs-chip-border-color"           : colors.value.base,
-          "--fs-chip-color"                  : colors.value.base,
-          "--fs-chip-hover-background-color" : colors.value.base,
-          "--fs-chip-hover-border-color"     : colors.value.base,
-          "--fs-chip-hover-color"            : colors.value.baseContrast!,
-          "--fs-chip-active-background-color": backgrounds.base,
-          "--fs-chip-active-border-color"    : colors.value.dark,
-          "--fs-chip-active-color"           : colors.value.dark
-        };
-        case "full": return {
-          "--fs-chip-height"                 : sizeToVar(props.height),
-          "--fs-chip-background-color"       : colors.value.base,
-          "--fs-chip-border-color"           : colors.value.base,
-          "--fs-chip-color"                  : colors.value.baseContrast!,
-          "--fs-chip-hover-background-color" : colors.value.soft,
-          "--fs-chip-hover-border-color"     : colors.value.soft,
-          "--fs-chip-hover-color"            : colors.value.baseContrast!,
-          "--fs-chip-active-background-color": colors.value.dark,
-          "--fs-chip-active-border-color"    : colors.value.darkContrast!,
-          "--fs-chip-active-color"           : colors.value.darkContrast!
-        };
-        case "borderless": return {
-          "--fs-chip-height"                 : sizeToVar(props.height),
-          "--fs-chip-background-color"       : backgrounds.base,
-          "--fs-chip-border-color"           : backgrounds.base,
-          "--fs-chip-color"                  : darks.base,
-          "--fs-chip-hover-background-color" : colors.value.light,
-          "--fs-chip-hover-border-color"     : colors.value.light,
-          "--fs-chip-hover-color"            : colors.value.base,
-          "--fs-chip-active-background-color": colors.value.light,
-          "--fs-chip-active-border-color"    : colors.value.light,
-          "--fs-chip-active-color"           : colors.value.base
-        };
-      }
-    });
-
-    const classes = computed((): string[] => {
-      const classNames: string[] = ["fs-chip"];
-      if (props.clickable) {
-        classNames.push("fs-chip-clickable");
-      }
-      return classNames;
-    });
+  setup() {
 
     return {
-      FSRouterLink,
-      classes,
-      colors,
-      style
     };
   }
 });
diff --git a/src/shared/foundation-shared-components/components/FSChipGroup.vue b/src/shared/foundation-shared-components/components/FSChipGroup.vue
index 1d8cfb86f..a7ea7c3d9 100644
--- a/src/shared/foundation-shared-components/components/FSChipGroup.vue
+++ b/src/shared/foundation-shared-components/components/FSChipGroup.vue
@@ -30,7 +30,7 @@
   <script lang="ts">
 import { defineComponent, type PropType } from "vue";
   
-import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type CardVariant, CardVariants, type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
   
 import FSSlideGroup from "./FSSlideGroup.vue";
 import FSWrapGroup from "./FSWrapGroup.vue";
@@ -55,9 +55,9 @@ export default defineComponent({
       default: "wrap"
     },
     chipVariant: {
-      type: String as PropType<"standard" | "full" | "borderless">,
+      type: String as PropType<CardVariant>,
       required: false,
-      default: "full"
+      default: CardVariants.Full
     },
     color: {
       type: String as PropType<ColorBase>,
diff --git a/src/shared/foundation-shared-components/components/FSClickable.vue b/src/shared/foundation-shared-components/components/FSClickable.vue
index f8c41ea00..b6388732d 100644
--- a/src/shared/foundation-shared-components/components/FSClickable.vue
+++ b/src/shared/foundation-shared-components/components/FSClickable.vue
@@ -1,363 +1,61 @@
 <template>
-  <a
-    v-if="$props.href"
-    :href="$props.href"
-    :style="style"
-    :class="$props.class"
-    @mouseover="hover = true"
-    @mouseleave="hover = false"
-    @mousedown="active = true"
-    @mouseup="active = false"
+  <FSCard
+    :variant="$props.variant"
+    :color="$props.color"
+    :clickable="$props.clickable"
+    v-bind="$attrs"
   >
-    <FSCard
-      height="100%"
-      width="100%"
-      :borderRadius="$props.borderRadius"
-      :borderStyle="$props.borderStyle"
-      :padding="$props.padding"
-      :class="classes"
-      v-bind="$attrs"
-    >
-      <template
-        v-for="(_, name) in $slots"
-        v-slot:[name]="slotData"
-      >
-        <slot
-          :name="name"
-          v-bind="{ ...slotData, contentVariant }"
-        />
-      </template>
-    </FSCard>
-    <template
-      v-if="$props.load"
-    >
-      <v-progress-circular
-        class="fs-clickable-load"
-        width="2"
-        size="24"
-        :indeterminate="true"
-        :color="loadColor"
-      />
-    </template>
-  </a>
-  <FSRouterLink
-    v-else-if="$props.to"
-    :style="style"
-    :to="$props.to"
-    :class="$props.class"
-    @mouseover="hover = true"
-    @mouseleave="hover = false"
-    @mousedown="active = true"
-    @mouseup="active = false"
-  >
-    <FSCard
-      height="100%"
-      width="100%"
-      :borderRadius="$props.borderRadius"
-      :borderStyle="$props.borderStyle"
-      :padding="$props.padding"
-      :class="classes"
-      v-bind="$attrs"
-    >
-      <template
-        v-for="(_, name) in $slots"
-        v-slot:[name]="slotData"
-      >
-        <slot
-          :name="name"
-          v-bind="{ ...slotData, contentVariant }"
-        />
-      </template>
-    </FSCard>
-    <template
-      v-if="$props.load"
-    >
-      <v-progress-circular
-        class="fs-clickable-load"
-        width="2"
-        size="24"
-        :indeterminate="true"
-        :color="loadColor"
-      />
-    </template>
-  </FSRouterLink>
-  <button
-    v-else
-    :type="$props.type"
-    :style="style"
-    :class="$props.class"
-    :disabled="$props.load || $props.disabled"
-    @click.stop="onClick"
-    @mouseover="hover = true"
-    @mouseleave="hover = false"
-    @mousedown="active = true"
-    @mouseup="active = false"
-  >
-    <FSCard
-      height="100%"
-      width="100%"
-      :borderRadius="$props.borderRadius"
-      :borderStyle="$props.borderStyle"
-      :padding="$props.padding"
-      :class="classes"
-      v-bind="$attrs"
-    >
-      <template
-        v-for="(_, name) in $slots"
-        v-slot:[name]="slotData"
-      >
-        <slot
-          :name="name"
-          v-bind="{ ...slotData, contentVariant }"
-        />
-      </template>
-    </FSCard>
     <template
-      v-if="$props.load"
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
     >
-      <v-progress-circular
-        class="fs-clickable-load"
-        width="2"
-        size="24"
-        :indeterminate="true"
-        :color="loadColor"
+      <slot
+        :name="name"
+        v-bind="{ ...slotData }"
       />
     </template>
-  </button>
+  </FSCard>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
-import { type RouteLocation } from "vue-router";
+/**
+ * @deprecated FSClickable is deprecated. Please use <FSCard :clickable="true" :variant="CardVariants.Standard" :color="ColorEnum.Light" ... /> instead.
+ * Clickable prop to true is not necessary as it is will listen to any click listener or href, to prop.
+ * This component will be removed in a future release.
+ */
+import { defineComponent, type PropType, onMounted } from "vue";
 
-import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
-import { sizeToVar } from "@dative-gpi/foundation-shared-components/utils";
+import { type CardVariant, CardVariants, type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
-import FSRouterLink from "./FSRouterLink.vue";
 import FSCard from "./FSCard.vue";
 
 export default defineComponent({
   name: "FSClickable",
   components: {
-    FSRouterLink,
     FSCard
   },
   props: {
-    height: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: null
-    },
-    width: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: null
-    },
-    padding: {
-      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
-      required: false,
-      default: "0"
-    },
-    class: {
-      type: [String, Array] as PropType<string | string[] | null>,
-      required: false,
-      default: null
-    },
-    to: {
-      type: Object as PropType<RouteLocation | null>,
-      required: false,
-      default: null
-    },
-    href: {
-      type: String as PropType<string | null>,
-      required: false,
-      default: null
-    },
     variant: {
-      type: String as PropType<"standard" | "background" | "full">,
+      type: String as PropType<CardVariant>,
       required: false,
-      default: "standard"
-    },
-    type: {
-      type: String as PropType<"button" | "submit">,
-      required: false,
-      default: "button"
+      default: CardVariants.Standard
     },
     color: {
       type: String as PropType<ColorBase>,
       required: false,
       default: ColorEnum.Light
     },
-    border: {
+    clickable: {
       type: Boolean,
       required: false,
       default: true
-    },
-    borderRadius: {
-      type: [String, Number],
-      required: false,
-      default: "4px"
-    },
-    borderStyle: {
-      type: String as PropType<"solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "inset" | "outset" | "none">,
-      required: false,
-      default: "solid"
-    },
-    load: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false
     }
   },
-  emits: ["click"],
-  setup(props, { emit }) {
-    const { getColors } = useColors();
-
-    const colors = computed(() => getColors(props.color));
-    const backgrounds = getColors(ColorEnum.Background);
-    const lights = getColors(ColorEnum.Light);
-    const darks = getColors(ColorEnum.Dark);
-
-    const hover = ref(false);
-    const active = ref(false);
-
-    const style = computed((): StyleValue => {
-      if (props.disabled) {
-        return {
-          "--fs-clickable-border-size"     : props.border ? "1px" : "0",
-          "--fs-clickable-border-style"    : props.borderStyle,
-          "--fs-clickable-border-radius"   : sizeToVar(props.borderRadius),
-          "--fs-clickable-background-color": lights.light,
-          "--fs-clickable-border-color"    : lights.dark,
-          "--fs-clickable-color"           : lights.dark,
-          "--fs-clickable-height"          : sizeToVar(props.height),
-          "--fs-clickable-width"           : sizeToVar(props.width)
-        };
-      }
-      switch (props.variant) {
-        case "standard":
-          switch (props.color) {
-            case ColorEnum.Dark :
-            case ColorEnum.Light: return {
-              "--fs-clickable-border-size"            : props.border ? "1px" : "0",
-              "--fs-clickable-border-style"           : props.borderStyle,
-              "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
-              "--fs-clickable-background-color"       : backgrounds.base,
-              "--fs-clickable-border-color"           : lights.dark,
-              "--fs-clickable-color"                  : lights.lightContrast!,
-              "--fs-clickable-hover-background-color" : lights.base,
-              "--fs-clickable-hover-border-color"     : lights.dark,
-              "--fs-clickable-hover-color"            : lights.baseContrast!,
-              "--fs-clickable-active-background-color": lights.dark,
-              "--fs-clickable-active-border-color"    : lights.dark,
-              "--fs-clickable-active-color"           : lights.darkContrast!,
-              "--fs-clickable-height"                 : sizeToVar(props.height),
-              "--fs-clickable-width"                  : sizeToVar(props.width)
-            };
-            default: return {
-              "--fs-clickable-border-size"            : props.border ? "1px" : "0",
-              "--fs-clickable-border-style"           : props.borderStyle,
-              "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
-              "--fs-clickable-background-color"       : colors.value.light,
-              "--fs-clickable-border-color"           : colors.value.lightContrast!,
-              "--fs-clickable-color"                  : colors.value.lightContrast!,
-              "--fs-clickable-hover-background-color" : colors.value.base,
-              "--fs-clickable-hover-border-color"     : colors.value.base,
-              "--fs-clickable-hover-color"            : colors.value.baseContrast!,
-              "--fs-clickable-active-background-color": colors.value.dark,
-              "--fs-clickable-active-border-color"    : colors.value.darkContrast!,
-              "--fs-clickable-active-color"           : colors.value.darkContrast!,
-              "--fs-clickable-height"                 : sizeToVar(props.height),
-              "--fs-clickable-width"                  : sizeToVar(props.width)
-            };
-          }
-        case "background": return {
-          "--fs-clickable-border-size"            : props.border ? "1px" : "0",
-          "--fs-clickable-border-style"           : props.borderStyle,
-          "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
-          "--fs-clickable-background-color"       : backgrounds.base,
-          "--fs-clickable-border-color"           : lights.dark,
-          "--fs-clickable-color"                  : darks.base,
-          "--fs-clickable-hover-background-color" : colors.value.base,
-          "--fs-clickable-hover-border-color"     : colors.value.baseContrast!,
-          "--fs-clickable-hover-color"            : colors.value.baseContrast!,
-          "--fs-clickable-active-background-color": colors.value.dark,
-          "--fs-clickable-active-border-color"    : colors.value.darkContrast!,
-          "--fs-clickable-active-color"           : colors.value.darkContrast!,
-          "--fs-clickable-height"                 : sizeToVar(props.height),
-          "--fs-clickable-width"                  : sizeToVar(props.width)
-        };
-        case "full": return {
-          "--fs-clickable-border-size"            : props.border ? "1px" : "0",
-          "--fs-clickable-border-style"           : props.borderStyle,
-          "--fs-clickable-border-radius"          : sizeToVar(props.borderRadius),
-          "--fs-clickable-background-color"       : colors.value.base,
-          "--fs-clickable-border-color"           : colors.value.base,
-          "--fs-clickable-color"                  : colors.value.baseContrast!,
-          "--fs-clickable-hover-background-color" : colors.value.base,
-          "--fs-clickable-hover-border-color"     : colors.value.base,
-          "--fs-clickable-hover-color"            : colors.value.baseContrast!,
-          "--fs-clickable-active-background-color": colors.value.dark,
-          "--fs-clickable-active-border-color"    : colors.value.dark,
-          "--fs-clickable-active-color"           : colors.value.darkContrast!,
-          "--fs-clickable-height"                 : sizeToVar(props.height),
-          "--fs-clickable-width"                  : sizeToVar(props.width)
-        };
-      }
-    });
-
-    const contentVariant = computed((): "base" | "baseContrast" | "light" | "lightContrast" | "dark" | "darkContrast" => {
-      if (active.value) {
-        return "darkContrast";
-      }
-      if (hover.value) {
-        return "baseContrast";
-      }
-      switch (props.variant) {
-        case "standard"  : return "lightContrast";
-        case "background": return "base";
-        case "full"      : return "baseContrast";
-      }
-    });
-
-    const classes = computed((): string[] => {
-      const classNames: string[] = ["fs-clickable"];
-      if (props.disabled) {
-        classNames.push("fs-clickable-disabled");
-      }
-      return classNames;
-    });
-
-    const loadColor = computed((): string => {
-      switch (props.color) {
-        case ColorEnum.Primary:
-        case ColorEnum.Success:
-        case ColorEnum.Warning:
-        case ColorEnum.Error  : return ["full"].includes(props.variant) ? colors.value.light : colors.value.dark;
-        default               : return ["full"].includes(props.variant) ? darks.soft : darks.dark;
-      }
+  setup() {
+    onMounted(() => {
+      console.warn('[DEPRECATED] <FSClickable> is deprecated. Please use <FSCard :clickable="true" :variant="CardVariants.Standard"  :color="ColorEnum.Light" ... /> instead. Clickable prop to true is not necessary as it is will listen to any click listener or href, to prop. This component will be removed in a future release.');
     });
-
-    const onClick = (event: MouseEvent) => {
-      if (!props.to && !props.href && !props.disabled && !props.load) {
-        emit("click", event);
-      }
-    };
-
     return {
-      contentVariant,
-      loadColor,
-      classes,
-      active,
-      hover,
-      style,
-      onClick
     };
   }
 });
diff --git a/src/shared/foundation-shared-components/components/FSDialogContent.vue b/src/shared/foundation-shared-components/components/FSDialogContent.vue
index 830fb2b03..f5ffc6954 100644
--- a/src/shared/foundation-shared-components/components/FSDialogContent.vue
+++ b/src/shared/foundation-shared-components/components/FSDialogContent.vue
@@ -6,37 +6,46 @@
     :color="$props.color"
     :width="cardWidth"
   >
-    <template
-      #header
-    >
-      <FSCol>
-        <FSRow
-          align="center-left"
-          :wrap="false"
-        >
-          <FSText
-            font="text-h2"
-          >
-            {{ $props.title }}
-          </FSText>
+    <FSCol>
+      <slot
+        name="header"
+        v-bind="{ title: $props.title, subtitle: $props.subtitle }"
+      >
+        <FSCol>
           <FSRow
-            align="center-right"
+            align="center-left"
+            :wrap="false"
           >
-            <FSButton
-              icon="mdi-close"
-              variant="icon"
-              :color="ColorEnum.Dark"
-              @click="$emit('update:modelValue', false)"
-            />
+            <FSText
+              font="text-h2"
+            >
+              {{ $props.title }}
+            </FSText>
+            <FSRow
+              align="center-right"
+            >
+              <FSButton
+                icon="mdi-close"
+                variant="icon"
+                :color="ColorEnum.Dark"
+                @click="$emit('update:modelValue', false)"
+              />
+            </FSRow>
           </FSRow>
-        </FSRow>
-        <FSText
-          v-if="$props.subtitle"
-        >
-          {{ $props.subtitle }}
-        </FSText>
-      </FSCol>
-    </template>
+          <FSText
+            v-if="$props.subtitle"
+          >
+            {{ $props.subtitle }}
+          </FSText>
+        </FSCol>
+      </slot>
+      <slot
+        name="body"
+      />
+      <slot
+        name="footer"
+      />
+    </FSCol>
     <template
       v-for="(_, name) in $slots"
       v-slot:[name]="slotData"
diff --git a/src/shared/foundation-shared-components/components/FSEditImageUI.vue b/src/shared/foundation-shared-components/components/FSEditImageUI.vue
index 8694d5924..aff9bed15 100644
--- a/src/shared/foundation-shared-components/components/FSEditImageUI.vue
+++ b/src/shared/foundation-shared-components/components/FSEditImageUI.vue
@@ -135,36 +135,25 @@
         />
       </FSRow>
     </FSRow>
-    <FSClickable
+    <template
       v-else
-      borderStyle="dashed"
-      variant="background"
-      :height="$props.height"
-      :width="$props.width"
-      @click="() => invisibleButtonRef.input.click()"
     >
-      <FSRow
-        align="center-center"
-        :wrap="false"
-      >
-        <FSIcon>
-          mdi-plus-box-outline
-        </FSIcon>
-        <FSText
-          font="text-body"
-          :lineClamp="2"
-        >
-          {{ $tr('edit-image.add-image', 'Add an image.') }}
-        </FSText>
-        <FSButtonFileMini
-          class="fs-edit-image-hidden-button"
-          ref="invisibleButtonRef"
-          accept=".jpg,.jpeg,.png"
-          :readFile="false"
-          @update:metadata="onUpload"
-        />
-      </FSRow>
-    </FSClickable>
+      <FSButtonFileMini
+        class="fs-edit-image-hidden-button"
+        ref="invisibleButtonRef"
+        accept=".jpg,.jpeg,.png"
+        :readFile="false"
+        @update:metadata="onUpload"
+      />
+      <FSCardPlaceholder
+        v-if="invisibleButtonRef"
+        :height="$props.height"
+        :width="$props.width"
+        icon="mdi-plus-box-outline"
+        :label="$tr('edit-image.add-image', 'Add an image.')"
+        @click="() => invisibleButtonRef!.input.click()"
+      />
+    </template>
   </FSCol>
 </template>
 
@@ -177,7 +166,7 @@ import { useFiles } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSButtonRemoveMini from "./buttons/FSButtonRemoveMini.vue";
 import FSButtonFileMini from "./buttons/FSButtonFileMini.vue";
-import FSClickable from "./FSClickable.vue";
+import FSCardPlaceholder from "./FSCardPlaceholder.vue";
 import FSImageUI from "./FSImageUI.vue";
 import FSCard from "./FSCard.vue";
 import FSText from "./FSText.vue";
@@ -188,8 +177,8 @@ export default defineComponent({
   name: "FSEditImageUI",
   components: {
     FSButtonRemoveMini,
+    FSCardPlaceholder,
     FSButtonFileMini,
-    FSClickable,
     FSImageUI,
     FSCard,
     FSText,
diff --git a/src/shared/foundation-shared-components/components/FSImageCard.vue b/src/shared/foundation-shared-components/components/FSImageCard.vue
index 0158c9f39..4a9131846 100644
--- a/src/shared/foundation-shared-components/components/FSImageCard.vue
+++ b/src/shared/foundation-shared-components/components/FSImageCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <FSClickable
+  <FSCard
     class="fs-image-card"
     :height="height"
     :width="width"
@@ -22,20 +22,20 @@
         </FSSpan>
       </FSRow>
     </FSRow>
-  </FSClickable>
+  </FSCard>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
-import FSClickable from "./FSClickable.vue";
+import FSCard from "./FSCard.vue";
 import FSSpan from "./FSSpan.vue";
 import FSRow from "./FSRow.vue";
 
 export default defineComponent({
   name: "FSImageCard",
   components: {
-    FSClickable,
+    FSCard,
     FSSpan,
     FSRow
   },
diff --git a/src/shared/foundation-shared-components/components/FSLink.vue b/src/shared/foundation-shared-components/components/FSLink.vue
index 3b889c10c..72368a41e 100644
--- a/src/shared/foundation-shared-components/components/FSLink.vue
+++ b/src/shared/foundation-shared-components/components/FSLink.vue
@@ -1,19 +1,7 @@
 <template>
-  <a
-    v-if="$props.href"
-    :href="$props.href"
-    :class="classes"
-    :style="style"
-  >
-    <slot>
-      <FSSpan>
-        {{ $props.label }}
-      </FSSpan>
-    </slot>
-  </a>
   <FSRouterLink
-    v-else-if="$props.to"
     :to="$props.to"
+    :href="$props.href"
     :class="classes"
     :style="style"
     v-bind="$attrs"
diff --git a/src/shared/foundation-shared-components/components/FSOptionItem.vue b/src/shared/foundation-shared-components/components/FSOptionItem.vue
index 1daadf7ef..1a24b7d38 100644
--- a/src/shared/foundation-shared-components/components/FSOptionItem.vue
+++ b/src/shared/foundation-shared-components/components/FSOptionItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <FSClickable
+  <FSCard
     :disabled="$props.disabled"
     :height="['32px', '28px']"
     :padding="$props.padding"
@@ -47,7 +47,7 @@
         </FSIcon>
       </slot>
     </FSRow>
-  </FSClickable>
+  </FSCard>
 </template>
 
 <script lang="ts">
@@ -56,7 +56,7 @@ import { computed, defineComponent, type PropType } from "vue";
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
-import FSClickable from "./FSClickable.vue";
+import FSCard from "./FSCard.vue";
 import FSSpan from "./FSSpan.vue";
 import FSIcon from "./FSIcon.vue";
 import FSRow from "./FSRow.vue";
@@ -64,7 +64,7 @@ import FSRow from "./FSRow.vue";
 export default defineComponent({
   name: "FSOptionItem",
   components: {
-    FSClickable,
+    FSCard,
     FSSpan,
     FSIcon,
     FSRow
diff --git a/src/shared/foundation-shared-components/components/FSOptionsMenu.vue b/src/shared/foundation-shared-components/components/FSOptionsMenu.vue
index d564ca965..d4a00ebaa 100644
--- a/src/shared/foundation-shared-components/components/FSOptionsMenu.vue
+++ b/src/shared/foundation-shared-components/components/FSOptionsMenu.vue
@@ -41,12 +41,13 @@
             :scrollOutside="false"
             maxHeight="80dvh"
           >
-            <FSClickable
+            <FSCard
               v-for="(item, index) in $props.items"
               width="100%"
               padding="8px"
               height="40px"
               :key="index"
+              :color="ColorEnum.Light"
               :border="false"
               @click="onClickItem(item)"
             >
@@ -68,7 +69,7 @@
                   </FSText>
                 </FSRow>
               </slot>
-            </FSClickable>
+            </FSCard>
           </FSFadeOut>
         </FSCol>
       </slot>
@@ -81,7 +82,7 @@ import { defineComponent, ref, type PropType } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
-import { ColorEnum, type ColorBase } from '@dative-gpi/foundation-shared-components/models';
+import { CardVariants, ColorEnum, type ColorBase } from '@dative-gpi/foundation-shared-components/models';
 
 import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
 import FSCol from '@dative-gpi/foundation-shared-components/components/FSCol.vue';
@@ -90,7 +91,6 @@ import FSMenu from '@dative-gpi/foundation-shared-components/components/FSMenu.v
 import FSCard from '@dative-gpi/foundation-shared-components/components/FSCard.vue';
 import FSText from '@dative-gpi/foundation-shared-components/components/FSText.vue';
 import FSButton from '@dative-gpi/foundation-shared-components/components/FSButton.vue';
-import FSClickable from '@dative-gpi/foundation-shared-components/components/FSClickable.vue';
 
 export default defineComponent({
   name: "FSInformationsMenu",
@@ -101,8 +101,7 @@ export default defineComponent({
     FSText,
     FSButton,
     FSCol,
-    FSIcon,
-    FSClickable
+    FSIcon
   },
   props: {
     items: {
@@ -158,6 +157,7 @@ export default defineComponent({
       ColorEnum,
       modelValue,
       lightColors,
+      CardVariants,
       onClickItem
     };
   }
diff --git a/src/shared/foundation-shared-components/components/FSPlayButtons.vue b/src/shared/foundation-shared-components/components/FSPlayButtons.vue
index b0f00dab4..aab54af8b 100644
--- a/src/shared/foundation-shared-components/components/FSPlayButtons.vue
+++ b/src/shared/foundation-shared-components/components/FSPlayButtons.vue
@@ -3,7 +3,7 @@
     width="hug"
     gap="4px"
   >
-    <FSClickable
+    <FSCard
       variant="full"
       :color="ColorEnum.Light"
       borderRadius="50%"
@@ -14,8 +14,8 @@
         size="18px"
         icon="mdi-skip-backward"
       />
-    </FSClickable>
-    <FSClickable
+    </FSCard>
+    <FSCard
       variant="full"
       :color="ColorEnum.Light"
       borderRadius="50%"
@@ -26,8 +26,8 @@
         size="18px"
         :icon="$props.modelValue ? 'mdi-pause' : 'mdi-play'"
       />
-    </FSClickable>
-    <FSClickable
+    </FSCard>
+    <FSCard
       variant="full"
       :color="ColorEnum.Light"
       borderRadius="50%"
@@ -38,7 +38,7 @@
         size="18px"
         icon="mdi-skip-forward"
       />
-    </FSClickable>
+    </FSCard>
   </FSRow>
 </template>
 
@@ -48,12 +48,12 @@ import { defineComponent } from "vue";
 import { ColorEnum } from '@dative-gpi/foundation-shared-components/models';
 
 import FSIcon from '@dative-gpi/foundation-shared-components/components/FSIcon.vue';
-import FSClickable from '@dative-gpi/foundation-shared-components/components/FSClickable.vue';
+import FSCard from '@dative-gpi/foundation-shared-components/components/FSCard.vue';
 
 export default defineComponent({
   name: "FSPlayButtons",
   components: {
-    FSClickable,
+    FSCard,
     FSIcon
   },
   props: {
diff --git a/src/shared/foundation-shared-components/components/FSRouterLink.vue b/src/shared/foundation-shared-components/components/FSRouterLink.vue
index 08fdea66a..59de49b1b 100644
--- a/src/shared/foundation-shared-components/components/FSRouterLink.vue
+++ b/src/shared/foundation-shared-components/components/FSRouterLink.vue
@@ -1,9 +1,9 @@
 <template>
-  <router-link
-    :to="$props.to"
-    @auxclick="handleRoutingEvent($event, $props.to)"
-    @click="handleRoutingEvent($event, $props.to)"
-    v-bind="$attrs"
+  <component
+    :is="wrapperComponent"
+    v-bind="mergedProps"
+    @click="onClick"
+    @auxclick="onAuxClick"
   >
     <template
       v-for="(_, name) in $slots"
@@ -14,29 +14,99 @@
         v-bind="{ ...slotData }"
       />
     </template>
-  </router-link>
+  </component>
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType } from "vue";
-import { type RouteLocation } from "vue-router";
-
+import { computed, defineComponent, type PropType } from "vue";
+import { RouterLink, type RouteLocation } from "vue-router";
 import { useRouting } from "@dative-gpi/foundation-shared-services/composables";
 
 export default defineComponent({
   name: "FSRouterLink",
   props: {
     to: {
-      type: Object as PropType<RouteLocation>,
-      required: true
+      type: Object as PropType<RouteLocation | null>,
+      default: null
+    },
+    href: {
+      type: String as PropType<string | null>,
+      default: null
+    },
+    passive: {
+      type: Boolean as PropType<boolean | null>,
+      default: null
+    },
+    type: {
+      type: String as PropType<"button" | "submit" | "reset">,
+      default: "button"
+    },
+    defaultWrapper: {
+      type: String as PropType<"div" | "a" | "button">,
+      default: "button"
+    },
+    passiveWrapper: {
+      type: String as PropType<"div" | "a" | "button">,
+      default: "div"
     }
   },
-  setup() {
+  setup(props, { attrs, slots }) {
     const { handleRoutingEvent } = useRouting();
 
+    const actualPassive = computed(() => {
+      if (props.passive !== null) {return props.passive;}
+      return !props.to && !props.href && !attrs.onClick;
+    });
+
+    const wrapperComponent = computed(() => {
+      if (actualPassive.value) {
+        return props.passiveWrapper;
+      }
+      if (props.href) {
+        return "a";
+      }
+      if (props.to) {
+        return RouterLink;
+      }
+      return props.defaultWrapper;
+    });
+
+    const componentProps = computed(() => {
+      if (wrapperComponent.value === RouterLink) {
+        return { to: props.to };
+      } else if (wrapperComponent.value === "a") {
+        return { href: props.href };
+      } else if (wrapperComponent.value === "button") {
+        return { type: props.type };
+      } else {
+        return {};
+      }
+    });
+
+    const mergedProps = computed(() => ({
+      ...componentProps.value,
+      ...attrs
+    }));
+
+    const onClick = (event: MouseEvent) => {
+      if (props.to) {
+        handleRoutingEvent(event, props.to);
+      }
+    };
+
+    const onAuxClick = (event: MouseEvent) => {
+      if (props.to) {
+        handleRoutingEvent(event, props.to);
+      }
+    };
+
     return {
-      handleRoutingEvent
+      wrapperComponent,
+      mergedProps,
+      slots,
+      onClick,
+      onAuxClick
     };
   }
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/src/shared/foundation-shared-components/components/agenda/FSAgendaHorizontalEvent.vue b/src/shared/foundation-shared-components/components/agenda/FSAgendaHorizontalEvent.vue
index aa9e3766f..73af93414 100644
--- a/src/shared/foundation-shared-components/components/agenda/FSAgendaHorizontalEvent.vue
+++ b/src/shared/foundation-shared-components/components/agenda/FSAgendaHorizontalEvent.vue
@@ -29,7 +29,7 @@
       />
     </template>
   </FSAgendaHorizontalEvent>
-  <FSClickable
+  <FSCard
     v-if="$props.variant !== 'current' || $props.dayStart < $props.now"
     :class="`fs-agenda-event fs-agenda-event-${$props.variant}`"
     :variant="$props.variant === 'current' ? 'full' : 'standard'"
@@ -50,7 +50,7 @@
       :variant="$props.variant"
       :width="width"
     />
-  </FSClickable>
+  </FSCard>
 </template>
 
 <script lang="ts">
@@ -58,13 +58,13 @@ import { defineComponent, computed, type StyleValue, type PropType } from 'vue';
 
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
-import FSClickable from '../FSClickable.vue';
+import FSCard from '../FSCard.vue';
 
 
 export default defineComponent({
   name: 'FSAgendaHorizontalEvent',
   components: {
-    FSClickable
+    FSCard
   },
   emits: ['click'],
   props: {
diff --git a/src/shared/foundation-shared-components/components/agenda/FSAgendaVerticalEvent.vue b/src/shared/foundation-shared-components/components/agenda/FSAgendaVerticalEvent.vue
index c784df2ca..40c383539 100644
--- a/src/shared/foundation-shared-components/components/agenda/FSAgendaVerticalEvent.vue
+++ b/src/shared/foundation-shared-components/components/agenda/FSAgendaVerticalEvent.vue
@@ -28,7 +28,7 @@
       />
     </template>
   </FSAgendaVerticalEvent>
-  <FSClickable
+  <FSCard
     v-if="$props.variant !== 'current' || $props.dayStart < $props.now"
     :class="`fs-agenda-event fs-agenda-vertical-event fs-agenda-event-${$props.variant}`"
     :variant="$props.variant === 'current' ? 'full' : 'standard'"
@@ -48,7 +48,7 @@
       :timeEnd="epochToShortTimeOnlyFormat($props.end)"
       :variant="$props.variant"
     />
-  </FSClickable>
+  </FSCard>
 </template>
 
 <script lang="ts">
@@ -56,12 +56,12 @@ import { defineComponent, computed, type StyleValue, type PropType } from 'vue';
 
 import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
-import FSClickable from '../FSClickable.vue';
+import FSCard from '../FSCard.vue';
 
 export default defineComponent({
   name: 'FSAgendaVerticalEvent',
   components: {
-    FSClickable
+    FSCard
   },
   emits: ['click'],
   props: {
diff --git a/src/shared/foundation-shared-components/components/deviceOrganisations/FSStatusRichCard.vue b/src/shared/foundation-shared-components/components/deviceOrganisations/FSStatusRichCard.vue
index 1e02d3695..66bb7c6a5 100644
--- a/src/shared/foundation-shared-components/components/deviceOrganisations/FSStatusRichCard.vue
+++ b/src/shared/foundation-shared-components/components/deviceOrganisations/FSStatusRichCard.vue
@@ -1,10 +1,9 @@
 <template>
-  <component
+  <FSCard
     v-if="$props.modelStatus"
     class="fs-status-rich-card"
     topRightPadding="2px"
     variant="standard"
-    :is="$attrs.onClick ? FSClickable : FSCard"
     :padding="$props.padding"
     :height="$props.height"
     :width="$props.width"
@@ -50,7 +49,7 @@
         v-bind="{ color }"
       />
     </template>
-  </component>
+  </FSCard>
 </template>
 
 <script lang="ts">
@@ -59,7 +58,6 @@ import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 import { ColorEnum, type FSDeviceStatusGroup, type FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 
-import FSClickable from "../FSClickable.vue";
 import FSCard from "../FSCard.vue";
 import FSIcon from "../FSChip.vue";
 import FSText from "../FSText.vue";
@@ -68,7 +66,6 @@ import FSCol from "../FSCol.vue";
 export default defineComponent({
   name: "FSStatusRichCard",
   components: {
-    FSClickable,
     FSCard,
     FSIcon,
     FSText,
@@ -158,8 +155,6 @@ export default defineComponent({
     }));
 
     return {
-      FSClickable,
-      FSCard,
       color,
       style,
       title,
diff --git a/src/shared/foundation-shared-components/components/lists/FSFilterButton.vue b/src/shared/foundation-shared-components/components/lists/FSFilterButton.vue
index b1c6865c4..9740278e5 100644
--- a/src/shared/foundation-shared-components/components/lists/FSFilterButton.vue
+++ b/src/shared/foundation-shared-components/components/lists/FSFilterButton.vue
@@ -40,6 +40,7 @@
             :height="['30px', '24px']"
             :variant="getAllVariant()"
             :color="$props.color"
+            align="center-left"
             :clickable="true"
             @click="onToggleAll"
           />
@@ -63,7 +64,9 @@
               :height="['30px', '24px']"
               :color="$props.color"
               :label="filter.text"
+              align="center-left"
               :clickable="true"
+              :border="false"
               :key="index"
               @click="() => onToggle(filter)"
             >
@@ -85,7 +88,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType, ref } from "vue";
 
-import { type ColorBase, ColorEnum, type FSDataTableColumn, type FSDataTableFilter } from "@dative-gpi/foundation-shared-components/models";
+import { type CardVariant, CardVariants, type ColorBase, ColorEnum, type FSDataTableColumn, type FSDataTableFilter } from "@dative-gpi/foundation-shared-components/models";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
 import FSSearchField from "../fields/FSSearchField.vue";
@@ -153,21 +156,21 @@ export default defineComponent({
       return props.filters;
     });
 
-    const getVariant = (filter: FSDataTableFilter): "standard" | "full" | "borderless" => {
+    const getVariant = (filter: FSDataTableFilter): CardVariant => {
       if (singlePick.value || props.filters.filter(f => f.hidden).length > 0) {
         if (filter.hidden) {
-          return "borderless";
+          return CardVariants.Background;
         }
-        return "full";
+        return CardVariants.Full;
       }
-      return "borderless";
+      return CardVariants.Background;
     };
 
-    const getAllVariant = (): "standard" | "full" => {
+    const getAllVariant = (): CardVariant => {
       if (singlePick.value || props.filters.filter(f => f.hidden).length > 0) {
-        return "standard";
+        return CardVariants.Background;
       }
-      return "full";
+      return CardVariants.Full;
     };
 
     const onToggle = (filter: FSDataTableFilter): void => {
diff --git a/src/shared/foundation-shared-components/components/lists/FSHeaderButton.vue b/src/shared/foundation-shared-components/components/lists/FSHeaderButton.vue
index 74ace8d96..905695657 100644
--- a/src/shared/foundation-shared-components/components/lists/FSHeaderButton.vue
+++ b/src/shared/foundation-shared-components/components/lists/FSHeaderButton.vue
@@ -32,7 +32,8 @@
           <FSChip
             prependIcon="mdi-eye-off-outline"
             class="fs-header-button-chip"
-            variant="borderless"
+            variant="background"
+            :border="false"
             :label="$tr('data-table.hide-column', 'Hide column')"
             :height="[30, 24]"
             :clickable="true"
@@ -41,7 +42,8 @@
           <FSChip
             v-if="!$props.first"
             class="fs-header-button-chip"
-            variant="borderless"
+            variant="background"
+            :border="false"
             prependIcon="mdi-chevron-left"
             :label="$tr('data-table.move-left', 'Move to the left')"
             :height="[30, 24]"
@@ -51,7 +53,8 @@
           <FSChip
             v-if="!$props.last"
             class="fs-header-button-chip"
-            variant="borderless"
+            variant="background"
+            :border="false"
             prependIcon="mdi-chevron-right"
             :label="$tr('data-table.move-right', 'Move to the right')"
             :height="[30, 24]"
diff --git a/src/shared/foundation-shared-components/components/tiles/FSTile.vue b/src/shared/foundation-shared-components/components/tiles/FSTile.vue
index c4c4ccbe0..50c7a0d15 100644
--- a/src/shared/foundation-shared-components/components/tiles/FSTile.vue
+++ b/src/shared/foundation-shared-components/components/tiles/FSTile.vue
@@ -1,67 +1,26 @@
 <template>
   <FSCol
     class="fs-tile"
-    :height="$props.height"
+    :style="style"
     :width="$props.width"
+    :height="$props.height"
   >
-    <FSClickable
-      v-if="($props.href || $props.to || $attrs.onClick)"
-      variant="background"
-      class="fs-tile"
-      padding="12px"
-      :href="$props.href"
-      width="100%"
-      height="100%"
-      topRightPadding="1px"
-      :to="$props.to"
-      :style="style"
-      v-bind="$attrs"
-    >
-      <slot />
-      <template 
-        v-if="$props.selectable"
-        #top-right
-      >
-        <FSCard
-          padding="8px"
-          :border="false"
-        >
-          <FSCheckbox
-            :modelValue="$props.modelValue"
-            @update:modelValue="() => $emit('update:modelValue', !$props.modelValue)"
-          />
-        </FSCard>
-      </template>
-    </FSClickable>
-
-    <FSClickable
-      v-else-if="$props.selectable && $props.singleSelect"
-      padding="12px"
-      :variant="variant"
-      :color="color"
-      :style="style"
-      width="100%"
-      height="100%"
-      @click="() => $emit('update:modelValue', !$props.modelValue)"
-      v-bind="$attrs"
-    >
-      <slot />
-    </FSClickable>
-    
     <FSCard
-      v-else
-      variant="background"
       class="fs-tile"
+      :variant="selectionState.variant"
+      :color="selectionState.color"
       padding="12px"
-      :style="style"
       width="100%"
       height="100%"
       topRightPadding="1px"
+      :to="$props.to"
+      :href="$props.href"
+      v-on="selectionState.listeners"
       v-bind="$attrs"
     >
       <slot />
       <template 
-        v-if="$props.selectable"
+        v-if="selectionState.showCheckbox"
         #top-right
       >
         <FSCard
@@ -74,8 +33,7 @@
           />
         </FSCard>
       </template>
-    </FSCard>  
-    
+    </FSCard>
     <div
       v-if="$props.leftColor"
       class="fs-tile-left"
@@ -96,17 +54,15 @@ import { type RouteLocation } from "vue-router";
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum, type ColorBase } from "@dative-gpi/foundation-shared-components/models";
 
-import FSClickable from "../FSClickable.vue";
-import FSCheckbox from "../FSCheckbox.vue";
 import FSCard from "../FSCard.vue";
+import FSCheckbox from "../FSCheckbox.vue";
 
 export default defineComponent({
   name: "FSTile",
   inheritAttrs: false,
   components: {
-    FSClickable,
-    FSCheckbox,
-    FSCard
+    FSCard,
+    FSCheckbox
   },
   props: {
     to: {
@@ -161,7 +117,7 @@ export default defineComponent({
     },
   },
   emits: ["update:modelValue"],
-  setup(props) {
+  setup(props, { emit }) {
     const { getGradients } = useColors();
 
     const style = computed((): StyleValue => {
@@ -177,18 +133,28 @@ export default defineComponent({
       return result;
     });
 
-    const variant = computed((): "standard" | "background" => {
-      return (props.singleSelect && props.modelValue) ? "standard" : "background";
-    });
-
-    const color = computed((): ColorBase => {
-      return (props.singleSelect && props.modelValue) ? props.activeColor : ColorEnum.Background;
+    const selectionState = computed(() => {
+      const isSingleSelect = props.selectable && props.singleSelect && !props.href && !props.to;
+      const showCheckbox = props.selectable && !isSingleSelect;
+      const variant: "standard" | "background" = (isSingleSelect && props.modelValue) ? "standard" : "background";
+      const color: ColorBase = (isSingleSelect && props.modelValue) ? props.activeColor : ColorEnum.Background;
+      const onClick = () => { emit("update:modelValue", !props.modelValue); };
+      const listeners: Record<string, (...args: any[]) => void> = {};
+      if (isSingleSelect) {
+        listeners.click = onClick;
+      }
+      return {
+        isSingleSelect,
+        showCheckbox,
+        variant,
+        color,
+        listeners
+      };
     });
 
     return {
+      selectionState,
       ColorEnum,
-      variant,
-      color,
       style
     };
   }
diff --git a/src/shared/foundation-shared-components/models/index.ts b/src/shared/foundation-shared-components/models/index.ts
index a97b34aff..c65eeb9bb 100644
--- a/src/shared/foundation-shared-components/models/index.ts
+++ b/src/shared/foundation-shared-components/models/index.ts
@@ -12,4 +12,5 @@ export * from "./modelStatuses";
 export * from "./rules";
 export * from "./tables";
 export * from "./toggleSets";
-export * from "./translations";
\ No newline at end of file
+export * from "./variants";
+export * from "./translations";
diff --git a/src/shared/foundation-shared-components/models/variants.ts b/src/shared/foundation-shared-components/models/variants.ts
new file mode 100644
index 000000000..0a4e17192
--- /dev/null
+++ b/src/shared/foundation-shared-components/models/variants.ts
@@ -0,0 +1,7 @@
+export type CardVariant = "background" | "standard" | "full" | "gradient";
+export enum CardVariants {
+  Background = "background",
+  Standard = "standard",
+  Full = "full",
+  Gradient = "gradient"
+}
\ No newline at end of file
diff --git a/src/shared/foundation-shared-components/styles/components/fs_button.scss b/src/shared/foundation-shared-components/styles/components/fs_button.scss
index 3e40d91c5..be735898f 100644
--- a/src/shared/foundation-shared-components/styles/components/fs_button.scss
+++ b/src/shared/foundation-shared-components/styles/components/fs_button.scss
@@ -1,20 +1,15 @@
 .fs-button-icon {
+    text-decoration: none;
     transition: color 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    color: var(--fs-button-color) !important;
 
     &.fs-button-disabled,
     &:has(.fs-button-load) {
         cursor: default !important;
     }
 
-    & > a, a:hover, a:visited, a:active {
-        color: inherit;
-        text-decoration: none;
-    }
-
     @include clickscreen {
         &:not(.fs-button-disabled, :has(.fs-button-load)):hover {
-            color: var(--fs-button-hover-color) !important;
+            filter: brightness(0.8) !important;
             cursor: pointer !important;
         }
     }
diff --git a/src/shared/foundation-shared-components/styles/components/fs_card.scss b/src/shared/foundation-shared-components/styles/components/fs_card.scss
index c27eacd61..4d254b0a1 100644
--- a/src/shared/foundation-shared-components/styles/components/fs_card.scss
+++ b/src/shared/foundation-shared-components/styles/components/fs_card.scss
@@ -2,11 +2,11 @@
     border: var(--fs-card-border-size) var(--fs-card-border-style);
     border-radius: var(--fs-card-border-radius);
     padding: var(--fs-card-padding);
-    height: var(--fs-card-height);
-    width: var(--fs-card-width);
-    max-width: var(--fs-card-max-width);
+    height: 100%;
+    width: 100%;
     position: relative;
     display: flex;
+    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     
     border-color: var(--fs-card-border-color);
     color: var(--fs-card-color);
@@ -24,10 +24,81 @@
         background: var(--fs-card-background-color);
     }
 
+    &-load {
+        content: "";
+
+        & > *:not(.fs-card-load__spinner) {
+            opacity: 0;
+        }
+    }
+
+    &-clickable {
+        cursor: pointer;
+
+        &.fs-card-disabled {
+            cursor: default;
+        }
+
+        &:not(.fs-card-disabled):active:not(:has( .fs-stopclick:hover)) {
+            background-color: var(--fs-card-active-background-color) !important;
+            border-color: var(--fs-card-active-border-color) !important;
+            color: var(--fs-card-active-color) !important;
+
+            & .fs-card-clickable {
+                transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+                background-color: var(--fs-card-active-background-color);
+            }
+        }
+
+        @include clickscreen {
+            &:not(.fs-card-disabled):hover:not(:has( .fs-stopclick:hover)) {
+                background-color: var(--fs-card-hover-background-color) !important;
+                border-color: var(--fs-card-hover-border-color) !important;
+                color: var(--fs-card-hover-color) !important;
+
+                & .fs-card-clickable {
+                    transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+                    background-color: var(--fs-card-hover-background-color);
+                }
+            }
+            // Désactive le hover si un parent a .fs-card-load
+            .fs-card-load & {
+                pointer-events: none;
+            }
+        }
+    }
+
     .fs-card-top-right {
         position: absolute;
         line-height: normal;
         right: var(--fs-card-top-right-padding);
         top: var(--fs-card-top-right-padding);
     }
-}
\ No newline at end of file
+}
+
+.fs-card-wrapper {
+    display: block;
+    position: relative;
+    padding: 0 !important;
+    height: var(--fs-card-height);
+    width: var(--fs-card-width);
+    max-width: var(--fs-card-max-width);
+    background: none;
+    border: none;
+    text-decoration: none;
+    box-sizing: border-box;
+}
+
+.fs-card-load__spinner {
+    cursor: default;
+    position: absolute !important;
+    height: 100% !important;
+    width: 100% !important;
+    left: 0;
+    top: 0;
+    
+    & > svg {
+        height: 24px !important;
+    }
+}
+
diff --git a/src/shared/foundation-shared-components/styles/components/fs_chip.scss b/src/shared/foundation-shared-components/styles/components/fs_chip.scss
index 0e4b49b2e..b88c05d56 100644
--- a/src/shared/foundation-shared-components/styles/components/fs_chip.scss
+++ b/src/shared/foundation-shared-components/styles/components/fs_chip.scss
@@ -1,32 +1,3 @@
-.fs-chip-container {
-    text-decoration: none;
-}
-
 .fs-chip {
     user-select: none;
-    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    background-color: var(--fs-chip-background-color) !important;
-    border: 1px solid var(--fs-chip-border-color) !important;
-    height: var(--fs-chip-height) !important;
-    color: var(--fs-chip-color) !important;
-    border-radius: 50px !important;
-    padding: 2px 20px !important;
-}
-
-.fs-chip-clickable {
-    cursor: pointer !important;
-
-    &:active {
-        background-color: var(--fs-chip-active-background-color) !important;
-        border-color: var(--fs-chip-active-border-color) !important;
-        color: var(--fs-chip-active-color) !important;
-    }
-
-    @include clickscreen {
-        &:hover {
-            background-color: var(--fs-chip-hover-background-color) !important;
-            border-color: var(--fs-chip-hover-border-color) !important;
-            color: var(--fs-chip-hover-color) !important;
-        }
-    }
 }
\ No newline at end of file
diff --git a/src/shared/foundation-shared-components/styles/components/fs_clickable.scss b/src/shared/foundation-shared-components/styles/components/fs_clickable.scss
deleted file mode 100644
index 389b9b860..000000000
--- a/src/shared/foundation-shared-components/styles/components/fs_clickable.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-.fs-clickable {
-    border: var(--fs-clickable-border-size) var(--fs-clickable-border-style) !important;
-    border-radius: var(--fs-clickable-border-radius) !important;
-    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-    cursor: pointer;
-    
-    background-color: var(--fs-clickable-background-color) !important;
-    border-color: var(--fs-clickable-border-color) !important;
-    color: var(--fs-clickable-color) !important;
-
-    &.fs-clickable-disabled {
-        cursor: default;
-    }
-    
-    &:not(.fs-clickable-disabled):active:not(:has( .fs-stopclick:hover)) {
-        background-color: var(--fs-clickable-active-background-color) !important;
-        border-color: var(--fs-clickable-active-border-color) !important;
-        color: var(--fs-clickable-active-color) !important;
-
-        & .fs-card-clickable {
-            transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-            background-color: var(--fs-clickable-active-background-color);
-        }
-    }
-
-    @include clickscreen {
-        &:not(.fs-clickable-disabled):hover:not(:has( .fs-stopclick:hover)) {
-            background-color: var(--fs-clickable-hover-background-color) !important;
-            border-color: var(--fs-clickable-hover-border-color) !important;
-            color: var(--fs-clickable-hover-color) !important;
-    
-            & .fs-card-clickable {
-                transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-                background-color: var(--fs-clickable-hover-background-color);
-            }
-        }
-    }
-}
-
-a:has(.fs-clickable) {
-    position: relative !important;
-    text-decoration: none;
-    padding: 0 !important;
-    height: var(--fs-clickable-height);
-    width: var(--fs-clickable-width);
-}
-
-button:has(.fs-clickable) {
-    position: relative;
-    height: var(--fs-clickable-height);
-    width: var(--fs-clickable-width);
-}
-
-.fs-clickable-load {
-    cursor: default;
-    position: absolute !important;
-    height: 100% !important;
-    width: 100% !important;
-    left: 0;
-    top: 0;
-    
-    & > svg {
-        height: 24px !important;
-    }
-}
-
-*:has(~ .fs-clickable-load) > * {
-    opacity: 0;
-}
\ No newline at end of file
diff --git a/src/shared/foundation-shared-components/styles/components/index.scss b/src/shared/foundation-shared-components/styles/components/index.scss
index ca70bb2c3..b3ae715af 100644
--- a/src/shared/foundation-shared-components/styles/components/index.scss
+++ b/src/shared/foundation-shared-components/styles/components/index.scss
@@ -12,7 +12,6 @@
 @import "fs_card.scss";
 @import "fs_checkbox.scss";
 @import "fs_chip.scss";
-@import "fs_clickable.scss";
 @import "fs_clock.scss";
 @import "fs_col.scss";
 @import "fs_color_field.scss";