diff --git a/example/cypress/e2e/button.cy.ts b/example/cypress/e2e/button.cy.ts
index 9f5abe9..5081a91 100644
--- a/example/cypress/e2e/button.cy.ts
+++ b/example/cypress/e2e/button.cy.ts
@@ -32,8 +32,7 @@ describe('Button', () => {
     cy.get('@primaryButton').find('span[class*=_label]');
 
     // disabled buttons not emit click
-    cy.get('@disabledButton').click({ force: true });
-    cy.get('@disabledButton').dblclick({ force: true });
+    cy.get('@disabledButton').should('be.disabled');
     cy.get('@disabledButton').contains('0');
   });
 });
diff --git a/example/cypress/e2e/data-table.cy.ts b/example/cypress/e2e/data-table.cy.ts
index 7ca1be6..40a979f 100644
--- a/example/cypress/e2e/data-table.cy.ts
+++ b/example/cypress/e2e/data-table.cy.ts
@@ -16,7 +16,7 @@ describe('DataTable', () => {
       .should('not.exist');
 
     cy.get('@columnsDefined')
-      .find('table tbody td[class*=_align__left_]')
+      .find('table tbody td[class*=_align__start_]')
       .contains('1')
       .should('exist');
 
@@ -42,7 +42,7 @@ describe('DataTable', () => {
       .should('exist');
 
     cy.get('@columnsNotDefined')
-      .find('table tbody td[class*=_align__left_]')
+      .find('table tbody td[class*=_align__start_]')
       .contains('1')
       .should('exist');
   });
diff --git a/example/cypress/e2e/overlays/tooltip.cy.ts b/example/cypress/e2e/overlays/tooltip.cy.ts
index 956957d..45d148d 100644
--- a/example/cypress/e2e/overlays/tooltip.cy.ts
+++ b/example/cypress/e2e/overlays/tooltip.cy.ts
@@ -10,22 +10,26 @@ describe('Tooltip', () => {
 
     cy.get('div[data-cy=tooltip-0]').as('defaultTooltip');
 
-    cy.get('@defaultTooltip').find('div[class*=_trigger_]');
+    cy.get('@defaultTooltip').find('div[class*=_activator_]');
     cy.get('@defaultTooltip').trigger('mouseover');
     cy.get('@defaultTooltip').find('div[role=tooltip]');
     cy.get('@defaultTooltip').trigger('mouseleave');
-    cy.get('@defaultTooltip').find('div[role=tooltip]').should('not.exist');
+    cy.get('@defaultTooltip')
+      .find('div[role=tooltip-content]')
+      .should('not.exist');
   });
 
   it('checks for and trigger arrow tooltip', () => {
     cy.get('div[data-cy=tooltip-4]').as('tooltipWithArrow');
 
-    cy.get('@tooltipWithArrow').find('div[class*=_trigger_]');
+    cy.get('@tooltipWithArrow').find('div[class*=_activator_]');
     cy.get('@tooltipWithArrow').trigger('mouseover');
     cy.get('@tooltipWithArrow').find('div[role=tooltip]');
     cy.get('@tooltipWithArrow').find('span[data-popper-arrow]');
     cy.get('@tooltipWithArrow').trigger('mouseleave');
-    cy.get('@tooltipWithArrow').find('div[role=tooltip]').should('not.exist');
+    cy.get('@tooltipWithArrow')
+      .find('div[role=tooltip-content]')
+      .should('not.exist');
     cy.get('@tooltipWithArrow')
       .find('span[data-popper-arrow]')
       .should('not.exist');
@@ -34,8 +38,10 @@ describe('Tooltip', () => {
   it('disabled should not trigger tooltip', () => {
     cy.get('div[data-cy=tooltip-8]').as('disabledTooltip');
 
-    cy.get('@disabledTooltip').find('div[class*=_trigger_]');
+    cy.get('@disabledTooltip').find('div[class*=_activator_]');
     cy.get('@disabledTooltip').trigger('mouseover');
-    cy.get('@disabledTooltip').find('div[role=tooltip]').should('not.exist');
+    cy.get('@disabledTooltip')
+      .find('div[role=tooltip-content]')
+      .should('not.exist');
   });
 });
diff --git a/example/src/components/AppFootNav.vue b/example/src/components/AppFootNav.vue
index 60c1e45..44793d5 100644
--- a/example/src/components/AppFootNav.vue
+++ b/example/src/components/AppFootNav.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { computed, toRefs, useCssModule } from 'vue';
 import { get } from '@vueuse/shared';
+import { useRoute } from 'vue-router/composables';
 import { type SideNavLink } from '@/types';
-import router from '@/router';
 
 const props = defineProps<{
   navigation: Array<{
@@ -11,7 +11,7 @@ const props = defineProps<{
   }>;
 }>();
 
-const route = computed(() => router.currentRoute);
+const route = useRoute();
 const css = useCssModule();
 
 const { navigation } = toRefs(props);
@@ -19,7 +19,7 @@ const links = computed(() =>
   get(navigation).flatMap((section) => section.links),
 );
 const currentPage = computed(() =>
-  get(links).find((link) => link.to.name === route.value.name),
+  get(links).find((link) => link.to.name === route.name),
 );
 const currentPageIndex = computed(() => {
   const current = get(currentPage);
diff --git a/example/src/components/AppSideNav.vue b/example/src/components/AppSideNav.vue
index 0be8c01..b87396f 100644
--- a/example/src/components/AppSideNav.vue
+++ b/example/src/components/AppSideNav.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { computed, useCssModule } from 'vue';
+import { useCssModule } from 'vue';
+import { useRoute } from 'vue-router/composables';
 import { type SideNavLink } from '@/types';
-import router from '@/router';
 
 defineProps<{
   navigation: Array<{
@@ -10,7 +10,7 @@ defineProps<{
   }>;
 }>();
 
-const route = computed(() => router.currentRoute);
+const route = useRoute();
 const css = useCssModule();
 </script>
 
diff --git a/example/src/main.ts b/example/src/main.ts
index e235ed9..a1d663a 100644
--- a/example/src/main.ts
+++ b/example/src/main.ts
@@ -42,6 +42,7 @@ const pinia = createPinia();
 setActivePinia(pinia);
 
 new Vue({
+  // @ts-ignore
   pinia,
   router,
   render: (h) => h(App),
diff --git a/example/src/views/CardView.vue b/example/src/views/CardView.vue
index 8b5871c..fbed9f5 100644
--- a/example/src/views/CardView.vue
+++ b/example/src/views/CardView.vue
@@ -450,6 +450,41 @@ const sections = ref<
         divide: true,
         dense: true,
       },
+      {
+        content: 'Lorem ipsum dolor sit amet consect '.repeat(4),
+        header: 'Card with small border radius',
+        subheader: 'Card subheader',
+        variant: 'outlined',
+        prepend: 'OP',
+        rounded: 'sm',
+      },
+      {
+        content: 'Lorem ipsum dolor sit amet consect '.repeat(4),
+        header: 'Divided Card with large border radius',
+        subheader: 'Card subheader',
+        variant: 'outlined',
+        prepend: 'OP',
+        rounded: 'lg',
+        divide: true,
+      },
+      {
+        content: 'Lorem ipsum dolor sit amet consect '.repeat(4),
+        header: 'Card with image and small border radius',
+        subheader: 'Card subheader',
+        variant: 'outlined',
+        prepend: 'OP',
+        rounded: 'sm',
+        image: 'https://placehold.co/480x160',
+      },
+      {
+        content: 'Lorem ipsum dolor sit amet consect '.repeat(4),
+        header: 'Card with image and large border radius',
+        subheader: 'Card subheader',
+        variant: 'outlined',
+        prepend: 'OP',
+        rounded: 'lg',
+        image: 'https://placehold.co/480x160',
+      },
     ],
   },
 ]);
diff --git a/example/src/views/CheckboxView.vue b/example/src/views/CheckboxView.vue
index d938aee..b1f8a37 100644
--- a/example/src/views/CheckboxView.vue
+++ b/example/src/views/CheckboxView.vue
@@ -73,8 +73,8 @@ const checkboxes = ref([
         v-for="(checkbox, i) in checkboxes"
         :key="i"
         v-model="checkbox.value"
-        :indeterminate="checkbox.indeterminate"
         v-bind="checkbox"
+        @update:indeterminate="checkbox.indeterminate = $event"
       >
         <span class="capitalize"> {{ checkbox.color }} </span>
       </RuiCheckbox>
diff --git a/example/src/views/DataTableView.vue b/example/src/views/DataTableView.vue
index 86dacda..98f1b1c 100644
--- a/example/src/views/DataTableView.vue
+++ b/example/src/views/DataTableView.vue
@@ -50,16 +50,19 @@ const columns: DataTableColumn[] = [
     key: 'name',
     label: 'Full name',
     sortable: true,
+    align: 'start',
   },
   {
     key: 'username',
     label: 'Username',
     sortable: true,
+    align: 'center',
   },
   {
     key: 'email',
     label: 'Email address',
     sortable: true,
+    align: 'end',
   },
   {
     key: 'address.street',
@@ -82,7 +85,7 @@ const columns: DataTableColumn[] = [
   {
     key: 'phone',
     label: 'Phone',
-    align: 'right',
+    align: 'end',
   },
   {
     key: 'action',
@@ -125,7 +128,7 @@ const fixedColumns: DataTableColumn[] = [
   {
     key: 'phone',
     label: 'Phone',
-    align: 'right',
+    align: 'end',
   },
   {
     key: 'action',
@@ -624,7 +627,7 @@ onBeforeMount(() => {
             @update:pagination="table.pagination = $event"
             @update:sort="table.sort = $event"
           >
-            <template #action-data>
+            <template #item.action>
               <RuiButton icon variant="text" size="sm">
                 <RuiIcon name="more-fill" color="primary" />
               </RuiButton>
@@ -672,7 +675,7 @@ onBeforeMount(() => {
             @update:pagination="table.pagination = $event"
             @update:sort="table.sort = $event"
           >
-            <template #action-data>
+            <template #item.action>
               <RuiButton icon variant="text" size="sm">
                 <RuiIcon name="more-fill" color="primary" />
               </RuiButton>
@@ -716,7 +719,7 @@ onBeforeMount(() => {
             @update:pagination="table.pagination = $event"
             @update:sort="table.sort = $event"
           >
-            <template #action-data>
+            <template #item.action>
               <RuiButton icon variant="text" size="sm">
                 <RuiIcon name="more-fill" color="primary" />
               </RuiButton>
diff --git a/example/src/views/RadioView.vue b/example/src/views/RadioView.vue
index 1e02796..0a227d5 100644
--- a/example/src/views/RadioView.vue
+++ b/example/src/views/RadioView.vue
@@ -225,7 +225,12 @@ const radioGroups = ref([
   <div>
     <h2 class="text-h4 mb-6" data-cy="radio-buttons">Radio Buttons</h2>
     <div class="grid gap-4 grid-cols-6 mb-14" data-cy="radio-wrapper">
-      <RuiRadio v-for="(radio, j) in radios" :key="j" v-bind="radio">
+      <RuiRadio
+        v-for="(radio, j) in radios"
+        :key="j"
+        v-model="radio.value"
+        v-bind="radio"
+      >
         <span v-if="radio.label" class="capitalize"> {{ radio.label }} </span>
       </RuiRadio>
     </div>
diff --git a/example/src/views/TooltipView.vue b/example/src/views/TooltipView.vue
index 00ec8a0..24e5819 100644
--- a/example/src/views/TooltipView.vue
+++ b/example/src/views/TooltipView.vue
@@ -8,94 +8,138 @@ import {
 import { objectOmit } from '@vueuse/shared';
 import { ref } from 'vue';
 
-const tooltips = ref<(TooltipProps & { buttonColor?: ButtonProps['color'] })[]>(
-  [
-    {
-      disabled: false,
-      hideArrow: true,
-      text: 'Bottom',
-      buttonColor: 'primary',
-      popper: { placement: 'bottom' },
-    },
-    {
-      disabled: false,
-      hideArrow: true,
-      text: 'Top',
-      buttonColor: 'secondary',
-      popper: { placement: 'top' },
-    },
-    {
-      disabled: false,
-      hideArrow: true,
-      text: 'Left',
-      buttonColor: 'error',
-      popper: { placement: 'left' },
-    },
-    {
-      disabled: false,
-      hideArrow: true,
-      text: 'Right',
-      buttonColor: 'info',
-      popper: { placement: 'right' },
-    },
-    {
-      disabled: false,
-      hideArrow: false,
-      text: 'Bottom With arrow',
-      buttonColor: 'primary',
-      popper: { placement: 'bottom' },
-    },
-    {
-      disabled: false,
-      hideArrow: false,
-      text: 'Top With arrow',
-      buttonColor: 'secondary',
-      popper: { placement: 'top' },
-    },
-    {
-      disabled: false,
-      hideArrow: false,
-      text: 'Left With arrow',
-      buttonColor: 'error',
-      popper: { placement: 'left' },
-    },
-    {
-      disabled: false,
-      hideArrow: false,
-      text: 'Right With arrow',
-      buttonColor: 'info',
-      popper: { placement: 'right' },
-    },
-    {
-      disabled: true,
-      hideArrow: false,
-      text: 'Tooltip disabled',
-      buttonColor: 'primary',
-      popper: { placement: 'bottom' },
-    },
-    {
-      disabled: true,
-      hideArrow: false,
-      text: 'Tooltip disabled',
-      buttonColor: 'secondary',
-      popper: { placement: 'top' },
-    },
-    {
-      disabled: true,
-      hideArrow: false,
-      text: 'Tooltip disabled',
-      buttonColor: 'error',
-      popper: { placement: 'left' },
-    },
-    {
-      disabled: true,
-      hideArrow: false,
-      text: 'Tooltip disabled',
-      buttonColor: 'info',
-      popper: { placement: 'right' },
-    },
-  ],
-);
+const tooltips = ref<
+  (TooltipProps & { buttonColor?: ButtonProps['color']; buttonText: string })[]
+>([
+  {
+    disabled: false,
+    hideArrow: true,
+    text: 'Bottom',
+    buttonText: 'Bottom',
+    buttonColor: 'primary',
+    popper: { placement: 'bottom' },
+  },
+  {
+    disabled: false,
+    hideArrow: true,
+    text: 'Top',
+    buttonText: 'Top',
+    buttonColor: 'secondary',
+    popper: { placement: 'top' },
+  },
+  {
+    disabled: false,
+    hideArrow: true,
+    text: 'Left',
+    buttonText: 'Left',
+    buttonColor: 'error',
+    popper: { placement: 'left' },
+  },
+  {
+    disabled: false,
+    hideArrow: true,
+    text: 'Right',
+    buttonText: 'Right',
+    buttonColor: 'info',
+    popper: { placement: 'right' },
+  },
+  {
+    disabled: false,
+    hideArrow: false,
+    text: 'Bottom With arrow',
+    buttonText: 'Bottom With arrow',
+    buttonColor: 'primary',
+    popper: { placement: 'bottom' },
+  },
+  {
+    disabled: false,
+    hideArrow: false,
+    text: 'Top With arrow',
+    buttonText: 'Top With arrow',
+    buttonColor: 'secondary',
+    popper: { placement: 'top' },
+  },
+  {
+    disabled: false,
+    hideArrow: false,
+    text: 'Left With arrow',
+    buttonText: 'Left With arrow',
+    buttonColor: 'error',
+    popper: { placement: 'left' },
+  },
+  {
+    disabled: false,
+    hideArrow: false,
+    text: 'Right With arrow',
+    buttonText: 'Right With arrow',
+    buttonColor: 'info',
+    popper: { placement: 'right' },
+  },
+  {
+    disabled: false,
+    hideArrow: false,
+    text: 'Bottom With long content, lorem ipsum dolor sit amet consecteur lorem ipsum dolor sit amet consecteur lorem ipsum dolor sit amet consecteur lorem ipsum dolor sit amet consecteur lorem ipsum dolor sit amet consecteur lorem ipsum dolor sit amet consecteur',
+    buttonText: 'Bottom With long content',
+    buttonColor: 'primary',
+    popper: { placement: 'bottom' },
+  },
+  {
+    disabled: false,
+    hideArrow: false,
+    text: 'Top With long content, lorem ipsum dolor sit amet consecteur lorem ipsum dolor sit amet consecteur lorem ipsum dolor sit amet consecteur lorem ipsum dolor sit amet consecteur lorem ipsum dolor sit amet consecteur lorem ipsum dolor sit amet consecteur',
+    buttonText: 'Top With long content',
+    buttonColor: 'secondary',
+    popper: { placement: 'top' },
+  },
+  {
+    disabled: false,
+    hideArrow: false,
+    text: 'Left With long content, lorem ipsum dolor sit amet consecteur lorem ipsum dolor sit amet consecteur lorem ipsum dolor sit amet consecteur lorem ipsum dolor sit amet consecteur lorem ipsum dolor sit amet consecteur lorem ipsum dolor sit amet consecteur',
+    buttonText: 'Left With long content',
+    buttonColor: 'error',
+    popper: { placement: 'left' },
+  },
+  {
+    disabled: false,
+    hideArrow: false,
+    text: 'Right With long content, lorem ipsum dolor sit amet consecteur lorem ipsum dolor sit amet consecteur lorem ipsum dolor sit amet consecteur lorem ipsum dolor sit amet consecteur lorem ipsum dolor sit amet consecteur lorem ipsum dolor sit amet consecteur',
+    buttonText: 'Right With long content',
+    buttonColor: 'info',
+    popper: { placement: 'right' },
+  },
+  {
+    disabled: true,
+    hideArrow: false,
+    text: 'Tooltip disabled',
+    buttonText: 'Tooltip disabled',
+    buttonColor: 'primary',
+    popper: { placement: 'bottom' },
+  },
+  {
+    disabled: true,
+    hideArrow: false,
+    text: 'Tooltip disabled',
+    buttonText: 'Tooltip disabled',
+    buttonColor: 'secondary',
+    popper: { placement: 'top' },
+  },
+  {
+    disabled: true,
+    hideArrow: false,
+    text: 'Tooltip disabled',
+    buttonText: 'Tooltip disabled',
+    buttonColor: 'error',
+    popper: { placement: 'left' },
+  },
+  {
+    disabled: true,
+    hideArrow: false,
+    text: 'Tooltip disabled',
+    buttonText: 'Tooltip disabled',
+    buttonColor: 'info',
+    popper: { placement: 'right' },
+  },
+]);
 </script>
 
 <template>
@@ -107,9 +151,11 @@ const tooltips = ref<(TooltipProps & { buttonColor?: ButtonProps['color'] })[]>(
           v-bind="objectOmit(tooltip, ['buttonColor'])"
           :data-cy="`tooltip-${i}`"
         >
-          <RuiButton :color="tooltip.buttonColor">
-            {{ tooltip.text }}
-          </RuiButton>
+          <template #activator>
+            <RuiButton :color="tooltip.buttonColor">
+              {{ tooltip.buttonText }}
+            </RuiButton>
+          </template>
         </RuiTooltip>
       </div>
     </div>
diff --git a/src/components/alerts/Alert.vue b/src/components/alerts/Alert.vue
index 864469a..5da0368 100644
--- a/src/components/alerts/Alert.vue
+++ b/src/components/alerts/Alert.vue
@@ -77,7 +77,7 @@ const slots = useSlots();
           </slot>
         </div>
 
-        <div class="text-body-2">
+        <div v-if="slots.default || description" class="text-body-2">
           <slot>
             {{ description }}
           </slot>
diff --git a/src/components/cards/Card.spec.ts b/src/components/cards/Card.spec.ts
index 423adf7..7a244f1 100644
--- a/src/components/cards/Card.spec.ts
+++ b/src/components/cards/Card.spec.ts
@@ -40,6 +40,7 @@ describe('Card', () => {
         subheader: 'Card subheader',
         default: { template: `<p>Lorem ipsum dolor sit amet</p>` },
         footer: ['Action 1', 'Action 2'].map((action, i) => ({
+          components: { 'rui-button': Button },
           template: `<rui-button :key="${i}">${action}</rui-button>`,
         })),
       },
diff --git a/src/components/cards/Card.stories.ts b/src/components/cards/Card.stories.ts
index 6e08cf1..9a66ce0 100644
--- a/src/components/cards/Card.stories.ts
+++ b/src/components/cards/Card.stories.ts
@@ -59,6 +59,11 @@ const meta: Meta<Props> = {
     header: { control: 'text' },
     image: { control: 'text' },
     prepend: { control: 'text' },
+    rounded: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      defaultValue: 'md',
+    },
     elevation: { control: 'number', max: 24, min: 1 },
     subheader: { control: 'text' },
     content: { control: 'text' },
diff --git a/src/components/cards/Card.vue b/src/components/cards/Card.vue
index 4d641e8..3338eb9 100644
--- a/src/components/cards/Card.vue
+++ b/src/components/cards/Card.vue
@@ -7,6 +7,7 @@ export interface Props {
   divide?: boolean;
   elevation?: number;
   variant?: 'flat' | 'outlined';
+  rounded?: 'sm' | 'md' | 'lg';
 }
 
 defineOptions({
@@ -18,6 +19,7 @@ withDefaults(defineProps<Props>(), {
   dense: false,
   elevation: 0,
   variant: 'outlined',
+  rounded: 'md',
 });
 
 const css = useCssModule();
@@ -31,6 +33,7 @@ const hasHeadContent = computed(() => !!slots.header || !!slots.subheader);
     :class="[
       css.card,
       `shadow-${elevation}`,
+      css[`rounded__${rounded}`],
       {
         [css.outlined]: variant === 'outlined',
         [css.dense]: dense,
@@ -65,10 +68,31 @@ const hasHeadContent = computed(() => !!slots.header || !!slots.subheader);
 
 <style lang="scss" module>
 .card {
-  @apply flex flex-col h-full w-full rounded bg-white;
+  @apply flex flex-col h-full w-full bg-white;
+  &.rounded__sm {
+    @apply rounded-[.25rem];
+
+    .image {
+      @apply rounded-t-[.25rem];
+    }
+  }
+  &.rounded__md {
+    @apply rounded-[.5rem];
+
+    .image {
+      @apply rounded-t-[.5rem];
+    }
+  }
+  &.rounded__lg {
+    @apply rounded-[1rem];
+
+    .image {
+      @apply rounded-t-[1rem];
+    }
+  }
 
   .image {
-    @apply rounded-t overflow-hidden;
+    @apply overflow-hidden;
   }
 
   .content {
diff --git a/src/components/chips/Chip.vue b/src/components/chips/Chip.vue
index 10ab9d9..df4114b 100644
--- a/src/components/chips/Chip.vue
+++ b/src/components/chips/Chip.vue
@@ -44,7 +44,9 @@ const slots = useSlots();
     <div v-if="slots.prepend" :class="css.chip__prepend">
       <slot name="prepend" />
     </div>
-    <span :class="css.chip__label">{{ label }}</span>
+    <span :class="css.chip__label">
+      {{ label }}
+    </span>
     <button
       v-if="dismissible"
       :class="css.chip__close"
diff --git a/src/components/forms/checkbox/Checkbox.stories.ts b/src/components/forms/checkbox/Checkbox.stories.ts
index e44d476..cfc3dcb 100644
--- a/src/components/forms/checkbox/Checkbox.stories.ts
+++ b/src/components/forms/checkbox/Checkbox.stories.ts
@@ -9,10 +9,10 @@ const render: StoryFn<PropsAndLabel> = (args) => ({
   setup() {
     const modelValue = computed({
       get() {
-        return args.modelValue;
+        return args.value;
       },
       set(val) {
-        args.modelValue = val;
+        args.value = val;
       },
     });
 
@@ -26,7 +26,13 @@ const render: StoryFn<PropsAndLabel> = (args) => ({
     });
     return { args, modelValue, indeterminate };
   },
-  template: `<Checkbox v-bind="args" v-model="modelValue" v-model:indeterminate="indeterminate">
+  template: `
+  <Checkbox
+    v-bind="args"
+    v-model="modelValue"
+    :indeterminate="indeterminate"
+    @update:indeterminate="indeterminate = $event"
+  >
     {{ args.label }}
   </Checkbox>`,
 });
@@ -38,7 +44,7 @@ const meta: Meta<PropsAndLabel> = {
   render,
   argTypes: {
     label: { control: 'text' },
-    modelValue: { control: 'boolean' },
+    value: { control: 'boolean' },
     indeterminate: { control: 'boolean' },
     hint: { control: 'text' },
     errorMessages: { control: 'array', defaultValue: [] },
@@ -58,7 +64,7 @@ type Story = StoryObj<PropsAndLabel>;
 
 export const Checked: Story = {
   args: {
-    modelValue: true,
+    value: true,
   },
 };
 
diff --git a/src/components/forms/checkbox/Checkbox.vue b/src/components/forms/checkbox/Checkbox.vue
index 7f00387..fa78a4c 100644
--- a/src/components/forms/checkbox/Checkbox.vue
+++ b/src/components/forms/checkbox/Checkbox.vue
@@ -19,7 +19,7 @@ defineOptions({
 });
 
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: false,
+  value: false,
   indeterminate: false,
   disabled: false,
   color: undefined,
@@ -30,14 +30,17 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const emit = defineEmits<{
-  (e: 'input', modelValue: boolean): void;
+  (e: 'input', value: boolean): void;
   (e: 'update:indeterminate', indeterminate: boolean): void;
 }>();
 
-const { size } = toRefs(props);
+const { size, value } = toRefs(props);
 
-const input = (event: Event) => {
-  const checked = (event.target as HTMLInputElement).checked;
+const input = (target: EventTarget | null) => {
+  if (!target) {
+    return;
+  }
+  const { checked } = target as HTMLInputElement;
   if (checked) {
     emit('update:indeterminate', false);
   }
@@ -76,7 +79,7 @@ const attrs = useAttrs();
         :class="css.input"
         :disabled="disabled"
         v-bind="objectOmit(attrs, ['class'])"
-        @input="input($event)"
+        @input="input($event.target)"
       />
       <div
         :class="[
diff --git a/src/components/forms/radio-button/radio-group/RadioGroup.stories.ts b/src/components/forms/radio-button/radio-group/RadioGroup.stories.ts
index 9fa22dc..6579a5e 100644
--- a/src/components/forms/radio-button/radio-group/RadioGroup.stories.ts
+++ b/src/components/forms/radio-button/radio-group/RadioGroup.stories.ts
@@ -7,10 +7,10 @@ const render: StoryFn<Props> = (args) => ({
   setup() {
     const modelValue = computed({
       get() {
-        return args.modelValue;
+        return args.value;
       },
       set(val) {
-        args.modelValue = val;
+        args.value = val;
       },
     });
 
@@ -30,7 +30,7 @@ const meta: Meta<Props> = {
   tags: ['autodocs'],
   render,
   argTypes: {
-    modelValue: { control: 'text' },
+    value: { control: 'text' },
     inline: { control: 'boolean' },
     hint: { control: 'text' },
     errorMessages: { control: 'array', defaultValue: [] },
diff --git a/src/components/forms/radio-button/radio/Radio.stories.ts b/src/components/forms/radio-button/radio/Radio.stories.ts
index 8293287..cc133fa 100644
--- a/src/components/forms/radio-button/radio/Radio.stories.ts
+++ b/src/components/forms/radio-button/radio/Radio.stories.ts
@@ -9,10 +9,10 @@ const render: StoryFn<PropsAndLabel> = (args) => ({
   setup() {
     const modelValue = computed({
       get() {
-        return args.modelValue;
+        return args.value;
       },
       set(val) {
-        args.modelValue = val;
+        args.value = val;
       },
     });
     return { args, modelValue };
@@ -29,8 +29,8 @@ const meta: Meta<PropsAndLabel> = {
   render,
   argTypes: {
     label: { control: 'text' },
-    modelValue: { control: 'text' },
     value: { control: 'text' },
+    internalValue: { control: 'text' },
     hint: { control: 'text' },
     errorMessages: { control: 'array', defaultValue: [] },
     hideDetails: { control: 'boolean' },
@@ -49,36 +49,40 @@ type Story = StoryObj<PropsAndLabel>;
 
 export const Checked: Story = {
   args: {
-    modelValue: 'test',
-    value: 'test',
+    value: '',
+    internalValue: 'test',
   },
 };
 
 export const Large: Story = {
   args: {
     size: 'lg',
-    value: 'test',
+    value: '',
+    internalValue: 'test',
   },
 };
 
 export const Small: Story = {
   args: {
     size: 'sm',
-    value: 'test',
+    value: '',
+    internalValue: 'test',
   },
 };
 
 export const Primary: Story = {
   args: {
     color: 'primary',
-    value: 'test',
+    value: '',
+    internalValue: 'test',
   },
 };
 
 export const WithLabel: Story = {
   args: {
     label: 'With Label',
-    value: 'test',
+    value: '',
+    internalValue: 'test',
   },
 };
 
@@ -86,7 +90,7 @@ export const Disabled: Story = {
   args: {
     disabled: true,
     label: 'Disabled',
-    value: 'test',
+    internalValue: 'test',
   },
 };
 
@@ -94,7 +98,7 @@ export const WithErrorMessage: Story = {
   args: {
     label: 'Label',
     errorMessages: ['With error messages'],
-    value: 'test',
+    internalValue: 'test',
   },
 };
 
@@ -102,7 +106,7 @@ export const WithHint: Story = {
   args: {
     label: 'Label',
     hint: 'With hint',
-    value: 'test',
+    internalValue: 'test',
   },
 };
 
@@ -111,7 +115,7 @@ export const HideDetails: Story = {
     label: 'Label',
     hint: 'Hint (should be invisible)',
     hideDetails: true,
-    value: 'test',
+    internalValue: 'test',
   },
 };
 
diff --git a/src/components/forms/radio-button/radio/Radio.vue b/src/components/forms/radio-button/radio/Radio.vue
index ce82bd0..68f7798 100644
--- a/src/components/forms/radio-button/radio/Radio.vue
+++ b/src/components/forms/radio-button/radio/Radio.vue
@@ -34,13 +34,6 @@ const emit = defineEmits<{
 
 const { value, size, internalValue } = toRefs(props);
 
-const input = (event: Event) => {
-  const checked = (event.target as HTMLInputElement).checked;
-  if (checked) {
-    emit('input', get(internalValue));
-  }
-};
-
 const iconSize: ComputedRef<number> = computed(() => {
   const sizeVal = get(size);
   if (sizeVal === 'lg') {
@@ -54,6 +47,16 @@ const iconSize: ComputedRef<number> = computed(() => {
 
 const selected = computed(() => get(value) === get(internalValue));
 
+const input = (target: EventTarget | null) => {
+  if (!target) {
+    return;
+  }
+  const { checked } = target as HTMLInputElement;
+  if (checked && !get(selected)) {
+    emit('input', get(internalValue));
+  }
+};
+
 const css = useCssModule();
 const attrs = useAttrs();
 </script>
@@ -76,7 +79,7 @@ const attrs = useAttrs();
         :disabled="disabled"
         v-bind="objectOmit(attrs, ['class'])"
         :value="value"
-        @input="input($event)"
+        @input="input($event.target)"
       />
       <div
         :class="[
diff --git a/src/components/forms/revealable-text-field/RevealableTextField.stories.ts b/src/components/forms/revealable-text-field/RevealableTextField.stories.ts
index 94852bb..276f0f6 100644
--- a/src/components/forms/revealable-text-field/RevealableTextField.stories.ts
+++ b/src/components/forms/revealable-text-field/RevealableTextField.stories.ts
@@ -8,10 +8,10 @@ const render: StoryFn<Props> = (args) => ({
   setup() {
     const modelValue = computed({
       get() {
-        return args.modelValue;
+        return args.value;
       },
       set(val) {
-        args.modelValue = val;
+        args.value = val;
       },
     });
 
@@ -26,7 +26,7 @@ const meta: Meta<Props> = {
   tags: ['autodocs'],
   render,
   argTypes: {
-    modelValue: { control: 'text' },
+    value: { control: 'text' },
     label: { control: 'text' },
     placeholder: { control: 'text' },
     hint: { control: 'text' },
diff --git a/src/components/forms/select/SimpleSelect.spec.ts b/src/components/forms/select/SimpleSelect.spec.ts
index 6d1d177..44041d7 100644
--- a/src/components/forms/select/SimpleSelect.spec.ts
+++ b/src/components/forms/select/SimpleSelect.spec.ts
@@ -16,7 +16,7 @@ describe('Simple select', () => {
           'Option 4',
           'Option 5',
         ],
-        modelValue: 'Option 5',
+        value: 'Option 5',
       },
     });
 
@@ -35,7 +35,7 @@ describe('Simple select', () => {
           'Option 4',
           'Option 5',
         ],
-        modelValue: 'Option 5',
+        value: 'Option 5',
         disabled: true,
       },
     });
diff --git a/src/components/forms/text-field/TextField.spec.ts b/src/components/forms/text-field/TextField.spec.ts
index df7deb5..bf8889a 100644
--- a/src/components/forms/text-field/TextField.spec.ts
+++ b/src/components/forms/text-field/TextField.spec.ts
@@ -25,6 +25,17 @@ describe('Forms/TextField', () => {
     expect(wrapper.find('input').attributes('disabled')).toBeUndefined();
   });
 
+  it('passes readonly props', async () => {
+    const wrapper = createWrapper();
+    expect(wrapper.find('input').attributes('readonly')).toBeUndefined();
+
+    await wrapper.setProps({ readonly: true });
+    expect(wrapper.find('input').attributes('readonly')).toBeDefined();
+
+    await wrapper.setProps({ readonly: false });
+    expect(wrapper.find('input').attributes('readonly')).toBeUndefined();
+  });
+
   it('passes color props', async () => {
     const wrapper = createWrapper();
     expect(wrapper.find('div[class*=wrapper]').classes()).toMatch(/_grey_/);
diff --git a/src/components/forms/text-field/TextField.stories.ts b/src/components/forms/text-field/TextField.stories.ts
index 06b57e8..ea559ea 100644
--- a/src/components/forms/text-field/TextField.stories.ts
+++ b/src/components/forms/text-field/TextField.stories.ts
@@ -7,10 +7,10 @@ const render: StoryFn<Props> = (args) => ({
   setup() {
     const modelValue = computed({
       get() {
-        return args.modelValue;
+        return args.value;
       },
       set(val) {
-        args.modelValue = val;
+        args.value = val;
       },
     });
 
@@ -25,10 +25,11 @@ const meta: Meta<Props> = {
   tags: ['autodocs'],
   render,
   argTypes: {
-    modelValue: { control: 'text' },
+    value: { control: 'text' },
     label: { control: 'text' },
     placeholder: { control: 'text' },
     hint: { control: 'text' },
+    readonly: { control: 'boolean' },
     appendIcon: { control: 'text' },
     prependIcon: { control: 'text' },
     errorMessages: { control: 'array', defaultValue: [] },
@@ -151,4 +152,14 @@ export const WithAppendIcon: Story = {
   },
 };
 
+export const Readonly: Story = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    variant: 'outlined',
+    readonly: true,
+    value: 'Readonly text',
+  },
+};
+
 export default meta;
diff --git a/src/components/forms/text-field/TextField.vue b/src/components/forms/text-field/TextField.vue
index 9887b70..3efe6e8 100644
--- a/src/components/forms/text-field/TextField.vue
+++ b/src/components/forms/text-field/TextField.vue
@@ -18,6 +18,7 @@ export interface Props {
   hideDetails?: boolean;
   prependIcon?: RuiIcons;
   appendIcon?: RuiIcons;
+  readonly?: boolean;
 }
 
 defineOptions({
@@ -38,6 +39,7 @@ const props = withDefaults(defineProps<Props>(), {
   hideDetails: false,
   prependIcon: undefined,
   appendIcon: undefined,
+  readonly: false,
 });
 
 const emit = defineEmits<{
@@ -54,6 +56,10 @@ const input = (event: Event) => {
   emit('input', value);
 };
 
+const focusInput = (event: unknown) => {
+  emit('focus-input', event as Event);
+};
+
 const labelWithQuote = computed(() => {
   const labelVal = get(label);
   if (!labelVal) {
@@ -110,7 +116,7 @@ const slots = useSlots();
       <div
         ref="innerWrapper"
         class="flex flex-1 overflow-hidden"
-        @click="emit('focus-input', $event)"
+        @click="focusInput($event)"
       >
         <Component
           :is="as"
@@ -121,6 +127,7 @@ const slots = useSlots();
           :dense="dense"
           :variant="variant"
           :wrapper-width="width"
+          :readonly="readonly"
           v-bind="objectOmit(attrs, ['class'])"
           @input="input($event)"
           @blur="emit('blur', $event)"
diff --git a/src/components/overlays/tooltip/Tooltip.spec.ts b/src/components/overlays/tooltip/Tooltip.spec.ts
index 3cf2499..b5bfe87 100644
--- a/src/components/overlays/tooltip/Tooltip.spec.ts
+++ b/src/components/overlays/tooltip/Tooltip.spec.ts
@@ -7,7 +7,8 @@ const createWrapper = (options?: any) =>
   mount(Tooltip, {
     ...options,
     slots: {
-      default: '<rui-button>Tooltip trigger</rui-button>',
+      activator: { template: '<rui-button>Tooltip trigger</rui-button>' },
+      default: options?.props?.text ?? '',
     },
     stubs: { RuiButton: Button },
   });
@@ -42,7 +43,7 @@ describe('Tooltip', () => {
         disabled: true,
       },
     });
-    expect(wrapper.get('div[class*=_trigger_]')).toBeTruthy();
+    expect(wrapper.get('div[class*=_activator_]')).toBeTruthy();
     expect(wrapper.find('div[role=tooltip]').exists()).toBeFalsy();
   });
 
@@ -99,13 +100,14 @@ describe('Tooltip', () => {
     ).toBeTruthy();
     expect(wrapper.find('span[data-popper-arrow]').exists()).toBeTruthy();
 
-    await delay(1000);
+    await delay(1100);
 
     expect(wrapper.find('div[role=tooltip]').exists()).toBeFalsy();
     expect(
       wrapper.find('div[data-popper-placement=bottom]').exists(),
     ).toBeFalsy();
     expect(wrapper.find('span[data-popper-arrow]').exists()).toBeFalsy();
-    await wrapper.setProps({ disabled: false });
+    await wrapper.setProps({ disabled: true });
+    expect(wrapper.find('span[data-popper-arrow]').exists()).toBeFalsy();
   });
 });
diff --git a/src/components/overlays/tooltip/Tooltip.stories.ts b/src/components/overlays/tooltip/Tooltip.stories.ts
index 649aa27..8bb0183 100644
--- a/src/components/overlays/tooltip/Tooltip.stories.ts
+++ b/src/components/overlays/tooltip/Tooltip.stories.ts
@@ -1,14 +1,20 @@
 import { DEFAULT_POPPER_OPTIONS } from '@/composables/popper';
 import Tooltip, { type Props } from './Tooltip.vue';
-import type { Meta, StoryFn, StoryObj } from '@storybook/vue3';
+import type { Meta, StoryFn, StoryObj } from '@storybook/vue';
 
 const render: StoryFn<Props> = (args) => ({
   components: { Tooltip },
   setup() {
     return { args };
   },
-  template:
-    '<div class="text-center p-4"><Tooltip v-bind="args"><span class="text-rui-primary"> Tooltip </span></Tooltip></div>',
+  template: `
+    <div class="text-center p-4">
+      <Tooltip v-bind="args">
+        <template #activator>
+          <span class="text-rui-primary"> Tooltip </span>
+        </template>
+      </Tooltip>
+    </div>`,
 });
 
 const meta: Meta<Props> = {
diff --git a/src/components/overlays/tooltip/Tooltip.vue b/src/components/overlays/tooltip/Tooltip.vue
index c380dc0..9e0e939 100644
--- a/src/components/overlays/tooltip/Tooltip.vue
+++ b/src/components/overlays/tooltip/Tooltip.vue
@@ -8,6 +8,7 @@ export interface Props {
   openDelay?: number;
   closeDelay?: number;
   popper?: PopperOptions;
+  tooltipClass?: string;
 }
 
 defineOptions({
@@ -21,6 +22,7 @@ const props = withDefaults(defineProps<Props>(), {
   openDelay: 0,
   closeDelay: 500,
   popper: () => ({}),
+  tooltipClass: '',
 });
 
 const css = useCssModule();
@@ -28,72 +30,91 @@ const css = useCssModule();
 const { closeDelay, openDelay, popper, disabled } = toRefs(props);
 
 const {
-  reference: trigger,
+  reference: activator,
   popper: tooltip,
   open,
+  popperEnter,
   onMouseOver,
   onMouseLeave,
+  onPopperLeave,
 } = usePopper(popper, disabled, openDelay, closeDelay);
 </script>
 
 <template>
   <div
-    ref="trigger"
+    ref="activator"
     :class="css.wrapper"
     :data-tooltip-disabled="disabled"
     @mouseover="onMouseOver()"
     @mouseleave="onMouseLeave()"
   >
-    <div :class="css.trigger">
-      <slot :open="open" />
+    <div :class="css.activator">
+      <slot name="activator" :open="open" />
     </div>
-    <div
-      v-if="open && !disabled"
+    <TransitionGroup
+      v-if="!disabled && popperEnter"
       ref="tooltip"
-      :class="css.tooltip"
+      :class="[
+        css.tooltip,
+        tooltipClass,
+        css[`tooltip__${popper?.strategy ?? 'absolute'}`],
+      ]"
+      enter-class="opacity-0 translate-y-1"
+      enter-active-class="ease-out duration-200"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-class="opacity-100 translate-y-0"
+      leave-active-class="ease-in duration-150"
+      leave-to-class="opacity-0 translate-y-1"
+      tag="div"
       role="tooltip"
+      @afterLeave="onPopperLeave()"
     >
-      <Transition
-        appear
-        enter-active-class="transition ease-out duration-200"
-        enter-from-class="opacity-0 translate-y-1"
-        enter-to-class="opacity-100 translate-y-0"
-        leave-active-class="transition ease-in duration-150"
-        leave-from-class="opacity-100 translate-y-0"
-        leave-to-class="opacity-0 translate-y-1"
-      >
-        <div>
-          <div :class="css.base">
-            <slot name="text">
-              {{ text }}
-            </slot>
-          </div>
-          <span v-if="!hideArrow" data-popper-arrow :class="css.arrow" />
-        </div>
-      </Transition>
-    </div>
+      <div v-if="open" key="tooltip" :class="css.base" role="tooltip-content">
+        <slot>
+          {{ text }}
+        </slot>
+      </div>
+      <span
+        v-if="!hideArrow"
+        key="arrow"
+        data-popper-arrow
+        :class="[css.arrow, { [css.arrow__open]: open }]"
+      />
+    </TransitionGroup>
   </div>
 </template>
 
 <style lang="scss" module>
+$arrowSize: 0.625rem;
 .wrapper {
   @apply relative inline-flex;
 
-  .trigger {
+  .activator {
     @apply inline;
   }
 
   .tooltip {
-    @apply max-w-xs;
-    @apply z-20;
+    @apply w-max max-w-xs transform transition-opacity delay-0 z-50;
+
+    &__fixed {
+      @apply fixed;
+    }
+
+    &__absolute {
+      @apply absolute;
+    }
 
     .base {
-      @apply h-6 px-2 py-1 text-xs font-normal truncate;
+      @apply px-2 py-1 text-xs font-normal;
       @apply bg-rui-grey-700/90 text-white rounded shadow;
     }
 
     .arrow {
-      @apply w-2.5 h-2.5 absolute;
+      @apply w-2.5 h-2.5 transition-opacity opacity-0;
+
+      &__open {
+        @apply opacity-100;
+      }
 
       &::before {
         @apply block border-[0.3125rem] origin-center;
@@ -105,7 +126,7 @@ const {
     }
 
     &[data-popper-placement*='bottom'] .arrow {
-      top: calc(0.5px + 0.625rem * -1 / 2);
+      top: calc(0.5px - #{$arrowSize} / 2);
 
       &::before {
         @apply -rotate-45;
@@ -113,7 +134,7 @@ const {
     }
 
     &[data-popper-placement*='top'] .arrow {
-      bottom: calc(0.5px + 0.625rem * -1 / 2);
+      bottom: calc(0.5px - #{$arrowSize} / 2);
 
       &::before {
         @apply rotate-[135deg];
@@ -121,7 +142,7 @@ const {
     }
 
     &[data-popper-placement*='left'] .arrow {
-      right: calc(0.5px + 0.625rem * -1 / 2);
+      right: calc(0.5px - #{$arrowSize} / 2);
 
       &::before {
         @apply rotate-45;
@@ -129,7 +150,7 @@ const {
     }
 
     &[data-popper-placement*='right'] .arrow {
-      left: calc(0.5px + 0.625rem * -1 / 2);
+      left: calc(0.5px - #{$arrowSize} / 2);
 
       &::before {
         @apply -rotate-[135deg];
diff --git a/src/components/progress/Progress.vue b/src/components/progress/Progress.vue
index b87b02b..715bae6 100644
--- a/src/components/progress/Progress.vue
+++ b/src/components/progress/Progress.vue
@@ -81,8 +81,8 @@ const circularViewSize = computed(() => 40 + get(circularScaledThickness));
         css[variant ?? ''],
         css[color ?? ''],
       ]"
-      aria-valuemax="100"
-      aria-valuemin="0"
+      :aria-valuemax="100"
+      :aria-valuemin="0"
       role="progressbar"
     >
       <svg
diff --git a/src/components/steppers/FooterStepper.spec.ts b/src/components/steppers/FooterStepper.spec.ts
index a7cd4e5..5202a0c 100644
--- a/src/components/steppers/FooterStepper.spec.ts
+++ b/src/components/steppers/FooterStepper.spec.ts
@@ -9,7 +9,7 @@ describe('FooterStepper', () => {
     const wrapper = createWrapper({
       propsData: {
         pages: 5,
-        modelValue: 1,
+        value: 1,
       },
     });
     expect(wrapper.classes()).toMatch(/_footer-stepper_/);
@@ -21,7 +21,7 @@ describe('FooterStepper', () => {
       propsData: {
         pages: 5,
         variant: 'bullet',
-        modelValue: 1,
+        value: 1,
       },
     });
 
diff --git a/src/components/steppers/Stepper.vue b/src/components/steppers/Stepper.vue
index cae02ca..99e1122 100644
--- a/src/components/steppers/Stepper.vue
+++ b/src/components/steppers/Stepper.vue
@@ -122,8 +122,9 @@ watch(step, () => {
             v-if="description"
             :class="[css.subtitle, { [subtitleClass]: custom }]"
             class="text-caption"
-            >{{ description }}</span
           >
+            {{ description }}
+          </span>
         </div>
       </div>
     </template>
diff --git a/src/components/tables/DataTable.spec.ts b/src/components/tables/DataTable.spec.ts
index a7f37f9..0dd665e 100644
--- a/src/components/tables/DataTable.spec.ts
+++ b/src/components/tables/DataTable.spec.ts
@@ -23,18 +23,19 @@ describe('DataTable', () => {
       key: 'name',
       label: 'Full name',
       sortable: true,
-      align: 'right',
+      align: 'end',
     },
     {
       key: 'title',
       label: 'Job position',
       sortable: true,
-      align: 'left',
+      align: 'start',
     },
     {
       key: 'email',
       label: 'Email address',
       sortable: true,
+      align: 'center',
     },
     {
       key: 'action',
@@ -76,10 +77,13 @@ describe('DataTable', () => {
       wrapper.find('table tbody td[class*=_checkbox_]').exists(),
     ).toBeTruthy();
     expect(
-      wrapper.find('table tbody td[class*=_align__left_]').exists(),
+      wrapper.find('table tbody td[class*=_align__start_]').exists(),
     ).toBeTruthy();
     expect(
-      wrapper.find('table tbody td[class*=_align__left_]').exists(),
+      wrapper.find('table tbody td[class*=_align__end_]').exists(),
+    ).toBeTruthy();
+    expect(
+      wrapper.find('table tbody td[class*=_align__center_]').exists(),
     ).toBeTruthy();
     expect(wrapper.find('div div[class*=_limit_]').exists()).toBeTruthy();
     expect(wrapper.find('div div[class*=_limit_]').exists()).toBeTruthy();
diff --git a/src/components/tables/DataTable.stories.ts b/src/components/tables/DataTable.stories.ts
index 1ff00b9..125c8d7 100644
--- a/src/components/tables/DataTable.stories.ts
+++ b/src/components/tables/DataTable.stories.ts
@@ -65,10 +65,10 @@ const render: StoryFn<Props> = (args) => ({
         @update:pagination="pagination = $event"
         @update:sort="sort = $event"
       >
-        <template #action-data>
-          <Button icon variant="text" size="sm"
-            ><Icon name="more-fill" color="primary"
-          /></Button>
+        <template #item.action>
+          <Button icon variant="text" size="sm">
+            <Icon name="more-fill" color="primary" />
+          </Button>
         </template>
       </DataTable>
     </div>`,
@@ -150,18 +150,19 @@ const columns: TableColumn[] = [
     key: 'name',
     label: 'Full name',
     sortable: true,
-    align: 'right',
+    align: 'end',
   },
   {
     key: 'title',
     label: 'Job position',
     sortable: true,
-    align: 'left',
+    align: 'start',
   },
   {
     key: 'email',
     label: 'Email address',
     sortable: true,
+    align: 'center',
   },
   {
     key: 'role',
@@ -198,8 +199,8 @@ const meta: Meta<Props> = {
           'tfoot',
           'no-data',
           'empty-description',
-          '`${column.key}-header`',
-          '`${column.key}-data`',
+          'header.`${column.key}`',
+          'item.`${column.key}`',
         ],
       },
     },
@@ -339,7 +340,7 @@ export const LoadingWithoutData: Story = {
 export const EmptyState: Story = {
   args: {
     rows: [],
-    modelValue: [],
+    value: [],
     cols: columns,
     outlined: true,
     pagination: { limit: 5, page: 1, total: 0 },
diff --git a/src/components/tables/DataTable.vue b/src/components/tables/DataTable.vue
index 4f5322b..f4f7f5f 100644
--- a/src/components/tables/DataTable.vue
+++ b/src/components/tables/DataTable.vue
@@ -12,7 +12,7 @@ export interface TableColumn {
   key: string;
   sortable?: boolean;
   direction?: 'asc' | 'desc';
-  align?: 'left' | 'right';
+  align?: 'start' | 'center' | 'end';
   class?: string;
   [key: string]: any;
 }
@@ -99,6 +99,8 @@ export interface Props {
    * @example :empty="{ icon: 'transactions-line', label: 'No transactions found' }"
    */
   empty?: { label?: string; description?: string };
+
+  rounded?: 'sm' | 'md' | 'lg';
 }
 
 defineOptions({
@@ -116,6 +118,7 @@ const props = withDefaults(defineProps<Props>(), {
   paginationModifiers: undefined,
   sortModifiers: undefined,
   empty: () => ({ label: 'No item found' }),
+  rounded: 'md',
 });
 
 const emit = defineEmits<{
@@ -477,7 +480,13 @@ watch(search, () => {
 </script>
 
 <template>
-  <div :class="[css.wrapper, { [css.outlined]: outlined }]">
+  <div
+    :class="[
+      css.wrapper,
+      css[`rounded__${rounded}`],
+      { [css.outlined]: outlined },
+    ]"
+  >
     <div :class="css.scroller">
       <table :class="[css.table, { [css.dense]: dense }]">
         <thead :class="css.thead">
@@ -501,14 +510,14 @@ watch(search, () => {
               :class="[
                 css.th,
                 column.class,
-                column.align === 'right' ? css.align__right : css.align__left,
+                css[`align__${column.align ?? 'start'}`],
                 {
                   capitalize: !cols,
                   [css.sortable]: column.sortable,
                 },
               ]"
             >
-              <slot :name="`${column.key}-header`" :column="column">
+              <slot :name="`header.${column.key}`" :column="column">
                 <Button
                   v-if="column.sortable"
                   :class="[
@@ -527,7 +536,7 @@ watch(search, () => {
                     {{ column[columnAttr] }}
                   </span>
 
-                  <template v-if="column.align === 'right'" #prepend>
+                  <template v-if="column.align === 'end'" #prepend>
                     <Icon
                       :class="css.sort__icon"
                       name="arrow-down-line"
@@ -535,11 +544,9 @@ watch(search, () => {
                     />
                   </template>
 
-                  <template
-                    v-if="!column.align || column.align === 'left'"
-                    #append
-                  >
+                  <template #append>
                     <Icon
+                      v-if="column.align != 'end'"
                       :class="css.sort__icon"
                       name="arrow-down-line"
                       size="18"
@@ -551,14 +558,6 @@ watch(search, () => {
                       color="grey"
                     />
                   </template>
-
-                  <template v-else-if="getSortIndex(column.key) >= 0" #append>
-                    <Chip
-                      :label="`${getSortIndex(column.key) + 1}`"
-                      size="sm"
-                      color="grey"
-                    />
-                  </template>
                 </Button>
                 <span v-else :class="css.column__text">
                   {{ column[columnAttr] }}
@@ -607,13 +606,10 @@ watch(search, () => {
             <td
               v-for="(column, subIndex) in columns"
               :key="subIndex"
-              :class="[
-                css.td,
-                column.align === 'right' ? css.align__right : css.align__left,
-              ]"
+              :class="[css.td, css[`align__${column.align ?? 'start'}`]]"
             >
               <slot
-                :name="`${column.key}-data`"
+                :name="`item.${column.key}`"
                 :column="column"
                 :row="row"
                 :index="index"
@@ -678,7 +674,29 @@ watch(search, () => {
 .wrapper {
   @apply relative divide-y divide-black/[0.12] overflow-hidden;
   &.outlined {
-    @apply rounded-xl border border-black/[0.12];
+    @apply border border-black/[0.12];
+  }
+
+  &.rounded__sm {
+    @apply rounded-[.25rem];
+
+    .image {
+      @apply rounded-t-[.25rem];
+    }
+  }
+  &.rounded__md {
+    @apply rounded-[.5rem];
+
+    .image {
+      @apply rounded-t-[.5rem];
+    }
+  }
+  &.rounded__lg {
+    @apply rounded-[1rem];
+
+    .image {
+      @apply rounded-t-[1rem];
+    }
   }
 
   .scroller {
@@ -695,21 +713,32 @@ watch(search, () => {
         .th {
           @apply p-4;
 
-          &.align__left {
+          &.align__start {
             @apply text-left rtl:text-right;
           }
 
-          &.align__right {
+          &.align__center {
+            @apply text-center;
+          }
+
+          &.align__end {
             @apply text-right rtl:text-left;
           }
 
           &.sortable {
-            &.align__left {
-              @apply pl-2;
+            &.align__start {
+              @apply pl-3;
+            }
+
+            &.align__center {
+              @apply pl-3;
+              .sort__button {
+                @apply ml-6;
+              }
             }
 
-            &.align__right {
-              @apply pr-2;
+            &.align__end {
+              @apply pr-3;
             }
 
             .sort__button {
@@ -786,11 +815,15 @@ watch(search, () => {
       .td {
         @apply whitespace-nowrap p-4 text-rui-text text-body-2;
 
-        &.align__left {
+        &.align__start {
           @apply text-left rtl:text-right;
         }
 
-        &.align__right {
+        &.align__center {
+          @apply text-center;
+        }
+
+        &.align__end {
           @apply text-right rtl:text-left;
         }
 
diff --git a/src/components/tables/TablePagination.vue b/src/components/tables/TablePagination.vue
index 9fa670a..33d5a8c 100644
--- a/src/components/tables/TablePagination.vue
+++ b/src/components/tables/TablePagination.vue
@@ -62,13 +62,17 @@ const indicatorText = computed(() => {
 const hasPrev = computed(() => get(value).page > 1);
 const hasNext = computed(() => get(pages) > get(value).page);
 
-const onNavigate = (delta: number) => {
+const goToPage = (page: number) => {
   emit('input', {
     ...get(value),
-    page: get(value).page + delta,
+    page,
   });
 };
 
+const onNavigate = (delta: number) => {
+  goToPage(get(value).page + delta);
+};
+
 const onPrev = () => {
   if (!get(hasPrev)) {
     return;
@@ -82,6 +86,20 @@ const onNext = () => {
   }
   onNavigate(1);
 };
+
+const onFirst = () => {
+  if (!get(hasPrev)) {
+    return;
+  }
+  goToPage(1);
+};
+
+const onLast = () => {
+  if (!get(hasNext)) {
+    return;
+  }
+  goToPage(get(pages));
+};
 </script>
 
 <template>
@@ -99,6 +117,15 @@ const onNext = () => {
       {{ indicatorText }}
     </span>
     <div :class="css.navigation">
+      <Button
+        :size="dense ? 'sm' : undefined"
+        :disabled="!hasPrev"
+        variant="text"
+        icon
+        @click="onFirst()"
+      >
+        <Icon name="arrow-left-double-line" />
+      </Button>
       <Button
         :size="dense ? 'sm' : undefined"
         :disabled="!hasPrev"
@@ -117,6 +144,15 @@ const onNext = () => {
       >
         <Icon name="arrow-right-s-line" />
       </Button>
+      <Button
+        :size="dense ? 'sm' : undefined"
+        :disabled="!hasNext"
+        variant="text"
+        icon
+        @click="onLast()"
+      >
+        <Icon name="arrow-right-double-line" />
+      </Button>
     </div>
   </div>
 </template>
diff --git a/src/composables/icons.ts b/src/composables/icons.ts
index 5dba0a6..815f956 100644
--- a/src/composables/icons.ts
+++ b/src/composables/icons.ts
@@ -4,8 +4,10 @@ import {
   RiAlertLine,
   RiArrowDownLine,
   RiArrowDropDownFill,
+  RiArrowLeftDoubleLine,
   RiArrowLeftLine,
   RiArrowLeftSLine,
+  RiArrowRightDoubleLine,
   RiArrowRightLine,
   RiArrowRightSLine,
   RiCheckLine,
@@ -36,8 +38,10 @@ export const useIcons = createGlobalState(() => {
     RiAlertLine,
     RiArrowDownLine,
     RiArrowDropDownFill,
+    RiArrowLeftDoubleLine,
     RiArrowLeftLine,
     RiArrowLeftSLine,
+    RiArrowRightDoubleLine,
     RiArrowRightLine,
     RiArrowRightSLine,
     RiCheckLine,
diff --git a/src/composables/popper.ts b/src/composables/popper.ts
index 2fe7db2..ca78de5 100644
--- a/src/composables/popper.ts
+++ b/src/composables/popper.ts
@@ -37,7 +37,7 @@ export const DEFAULT_POPPER_OPTIONS: PopperOptions = {
   scroll: true,
   resize: true,
   placement: 'bottom',
-  strategy: 'fixed',
+  strategy: 'absolute',
 };
 
 export const createPopper = popperGenerator({
@@ -61,10 +61,15 @@ export const usePopper = (
 ) => {
   const reference: Ref<MaybeElement | null> = ref(null);
   const popper: Ref<MaybeElement | null> = ref(null);
-  const instance = ref<Instance | null>(null);
-  const open = ref(false);
-  const openTimeout = ref<NodeJS.Timeout>();
-  const closeTimeout = ref<NodeJS.Timeout>();
+  const instance: Ref<Instance | null> = ref(null);
+  const open: Ref<boolean> = ref(false);
+  const openTimeout: Ref<NodeJS.Timeout | undefined> = ref();
+  const closeTimeout: Ref<NodeJS.Timeout | undefined> = ref();
+  const popperEnter: Ref<boolean> = ref(false);
+
+  const onPopperLeave = () => {
+    set(popperEnter, false);
+  };
 
   const onMouseOver = () => {
     if (get(disabled)) {
@@ -79,8 +84,11 @@ export const usePopper = (
       return;
     }
 
+    set(popperEnter, true);
+
     const timeout = setTimeout(() => {
       set(open, true);
+      get(instance)?.update();
       set(openTimeout, undefined);
     }, get(openDelay));
 
@@ -171,6 +179,12 @@ export const usePopper = (
               resize,
             },
           },
+          {
+            name: 'arrow',
+            options: {
+              padding: 4,
+            },
+          },
         ],
       });
 
@@ -180,5 +194,14 @@ export const usePopper = (
     });
   });
 
-  return { reference, popper, instance, open, onMouseOver, onMouseLeave };
+  return {
+    reference,
+    popper,
+    instance,
+    open,
+    popperEnter,
+    onMouseOver,
+    onMouseLeave,
+    onPopperLeave,
+  };
 };
diff --git a/src/index.ts b/src/index.ts
index defc420..b98ab3f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,5 @@
 /* eslint-disable max-lines,import/max-dependencies */
 import { type VueConstructor } from 'vue';
-import { useRotkiTheme } from '@/composables/theme';
 import { StepperState } from '@/types/stepper';
 import type { InitThemeOptions } from '@/types/theme';
 import '@/style.scss';