diff --git a/app/components/pub/ui/button/index.ts b/app/components/pub/ui/button/index.ts
index c16fb713..c1aa89a8 100644
--- a/app/components/pub/ui/button/index.ts
+++ b/app/components/pub/ui/button/index.ts
@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority'
 export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md md:tex-xs xl:text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md md:text-xs 2xl:text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
@@ -19,7 +19,7 @@ export const buttonVariants = cva(
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'md:h8 xl:h-9 px-4 py-2',
+        default: 'md:h8 2xl:h-9 px-4 py-2',
         xs: 'h-7 rounded px-2',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',
diff --git a/app/components/pub/ui/checkbox/Checkbox.vue b/app/components/pub/ui/checkbox/Checkbox.vue
index f8b25c7a..1e01933d 100644
--- a/app/components/pub/ui/checkbox/Checkbox.vue
+++ b/app/components/pub/ui/checkbox/Checkbox.vue
@@ -21,7 +21,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <CheckboxRoot
     v-bind="forwarded"
     :class="
-      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      cn('peer h-6 w-6 md:h-5 md:w-5 2xl:h-6 2xl:w-6 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
          props.class)"
   >
     <CheckboxIndicator class="h-full w-full flex items-center justify-center text-current">
diff --git a/app/components/pub/ui/form/FormDescription.vue b/app/components/pub/ui/form/FormDescription.vue
index 60bc8767..b8508491 100644
--- a/app/components/pub/ui/form/FormDescription.vue
+++ b/app/components/pub/ui/form/FormDescription.vue
@@ -14,7 +14,7 @@ const { formDescriptionId } = useFormField()
 <template>
   <p
     :id="formDescriptionId"
-    :class="cn('text-sm text-muted-foreground', props.class)"
+    :class="cn('md:text-xs 2xl:text-sm text-muted-foreground', props.class)"
   >
     <slot />
   </p>
diff --git a/app/components/pub/ui/label/Label.vue b/app/components/pub/ui/label/Label.vue
index 46a01863..c3c34a8b 100644
--- a/app/components/pub/ui/label/Label.vue
+++ b/app/components/pub/ui/label/Label.vue
@@ -19,7 +19,7 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'md:!text-xs xl:text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        'md:!text-xs 2xl:text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
         props.class,
       )
     "
diff --git a/app/components/pub/ui/table/Table.vue b/app/components/pub/ui/table/Table.vue
index e7c79d4c..fb8a5e04 100644
--- a/app/components/pub/ui/table/Table.vue
+++ b/app/components/pub/ui/table/Table.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
 
 <template>
   <div class="relative w-full overflow-x-auto">
-    <table :class="cn('min-w-full table-fixed caption-bottom text-sm', props.class)">
+    <table :class="cn('min-w-full table-fixed caption-bottom md:text-xs 2xl:text-sm', props.class)">
       <slot />
     </table>
   </div>
diff --git a/app/components/pub/ui/table/TableCaption.vue b/app/components/pub/ui/table/TableCaption.vue
index f2a6c194..eeb57252 100644
--- a/app/components/pub/ui/table/TableCaption.vue
+++ b/app/components/pub/ui/table/TableCaption.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)">
+  <caption :class="cn('mt-4 md:text-xs 2xl:text-sm text-muted-foreground', props.class)">
     <slot />
   </caption>
 </template>
diff --git a/app/components/pub/ui/table/TableEmpty.vue b/app/components/pub/ui/table/TableEmpty.vue
index ff2f887e..96fafe2d 100644
--- a/app/components/pub/ui/table/TableEmpty.vue
+++ b/app/components/pub/ui/table/TableEmpty.vue
@@ -25,7 +25,7 @@ const delegatedProps = computed(() => {
     <TableCell
       :class="
         cn(
-          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+          'p-4 whitespace-nowrap align-middle md:text-xs 2xl:text-sm text-foreground',
           props.class,
         )
       "
diff --git a/app/components/pub/ui/tabs/TabsTrigger.vue b/app/components/pub/ui/tabs/TabsTrigger.vue
index 784f5b36..af9ddeb5 100644
--- a/app/components/pub/ui/tabs/TabsTrigger.vue
+++ b/app/components/pub/ui/tabs/TabsTrigger.vue
@@ -20,7 +20,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   <TabsTrigger
     v-bind="forwardedProps"
     :class="cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 md:text-xs 2xl:text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
       props.class,
     )"
   >
diff --git a/app/components/pub/ui/textarea/Textarea.vue b/app/components/pub/ui/textarea/Textarea.vue
index a946b49a..a29bb1b7 100644
--- a/app/components/pub/ui/textarea/Textarea.vue
+++ b/app/components/pub/ui/textarea/Textarea.vue
@@ -20,5 +20,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </script>
 
 <template>
-  <textarea v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-slate-400 bg-white dark:bg-slate-950 px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
+  <textarea v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-slate-400 bg-white dark:bg-slate-950 px-3 py-2 md:text-xs 2xl:text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
 </template>
diff --git a/app/components/pub/ui/toast/ToastAction.vue b/app/components/pub/ui/toast/ToastAction.vue
index 0a4bacc6..577b1f65 100644
--- a/app/components/pub/ui/toast/ToastAction.vue
+++ b/app/components/pub/ui/toast/ToastAction.vue
@@ -15,7 +15,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ToastAction v-bind="delegatedProps" :class="cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)">
+  <ToastAction v-bind="delegatedProps" :class="cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 md:text-xs 2xl:text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)">
     <slot />
   </ToastAction>
 </template>
diff --git a/app/components/pub/ui/toast/ToastDescription.vue b/app/components/pub/ui/toast/ToastDescription.vue
index 66d36e2b..23b80db3 100644
--- a/app/components/pub/ui/toast/ToastDescription.vue
+++ b/app/components/pub/ui/toast/ToastDescription.vue
@@ -15,7 +15,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ToastDescription :class="cn('text-sm opacity-90', props.class)" v-bind="delegatedProps">
+  <ToastDescription :class="cn('md:text-xs 2xl:text-sm opacity-90', props.class)" v-bind="delegatedProps">
     <slot />
   </ToastDescription>
 </template>
diff --git a/app/components/pub/ui/toast/ToastTitle.vue b/app/components/pub/ui/toast/ToastTitle.vue
index c3eb3ffc..fc62fd61 100644
--- a/app/components/pub/ui/toast/ToastTitle.vue
+++ b/app/components/pub/ui/toast/ToastTitle.vue
@@ -15,7 +15,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ToastTitle v-bind="delegatedProps" :class="cn('text-sm font-semibold [&+div]:text-xs', props.class)">
+  <ToastTitle v-bind="delegatedProps" :class="cn('md:text-xs 2xl:text-sm font-semibold [&+div]:text-xs', props.class)">
     <slot />
   </ToastTitle>
 </template>