diff --git a/src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte b/src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte
index 05bd94e..e9e320a 100644
--- a/src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte
+++ b/src/features/SetupFont/ui/TypographyMenu/TypographyMenu.svelte
@@ -13,6 +13,7 @@ import {
 } from '$entities/Font';
 import type { ResponsiveManager } from '$shared/lib';
 import {
+    Button,
     ComboControl,
     ControlGroup,
     Slider,
@@ -68,25 +69,15 @@ $effect(() => {
 </script>
 
 {#if !hidden}
-    {#if responsive.isMobile}
+    {#if responsive.isMobileOrTablet}
         <Popover.Root bind:open={isOpen}>
             <Popover.Trigger>
                 {#snippet child({ props })}
-                    <button
-                        {...props}
-                        class={clsx(
-                            'inline-flex items-center justify-center',
-                            'size-8 p-0',
-                            'border border-transparent rounded-none',
-                            'transition-colors duration-150',
-                            'hover:bg-white/50 dark:hover:bg-white/5',
-                            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/30',
-                            isOpen && 'bg-paper dark:bg-dark-card border-subtle shadow-sm',
-                            className,
-                        )}
-                    >
-                        <Settings2Icon class="size-4" />
-                    </button>
+                    <Button class={className} variant="primary" {...props}>
+                        {#snippet icon()}
+                            <Settings2Icon class="size-4" />
+                        {/snippet}
+                    </Button>
                 {/snippet}
             </Popover.Trigger>