diff --git a/app/components/malio/button/Button.vue b/app/components/malio/button/Button.vue
index 11037c9..81f5e9f 100644
--- a/app/components/malio/button/Button.vue
+++ b/app/components/malio/button/Button.vue
@@ -84,7 +84,7 @@ const variantClasses = computed(() => {
 
 const mergedButtonClass = computed(() =>
   twMerge(
-    'inline-flex w-[180px] h-[38px] items-center justify-center gap-1 p-[10px] rounded-md text-base font-bold leading-[150%] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-m-primary/50',
+    'inline-flex w-[180px] h-[38px] items-center justify-center gap-1 p-[10px] rounded-md text-base font-bold leading-[150%] transition-colors duration-150 m-focus-ring',
     variantClasses.value,
     props.buttonClass,
   ),
diff --git a/app/components/malio/button/ButtonIcon.vue b/app/components/malio/button/ButtonIcon.vue
index 9534324..645d93e 100644
--- a/app/components/malio/button/ButtonIcon.vue
+++ b/app/components/malio/button/ButtonIcon.vue
@@ -52,7 +52,7 @@ const isFilled = computed(() => props.variant === 'filled')
 
 const mergedButtonClass = computed(() =>
   twMerge(
-    'inline-flex items-center justify-center rounded-md p-1 transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-m-primary/50',
+    'inline-flex items-center justify-center rounded-md p-1 transition-colors duration-150 m-focus-ring',
     isFilled.value
       ? props.disabled
         ? 'bg-m-disabled text-white cursor-not-allowed'