diff --git a/src/components/ConnectionsModal.tsx b/src/components/ConnectionsModal.tsx
index 5d3bb89..0ee7e87 100644
--- a/src/components/ConnectionsModal.tsx
+++ b/src/components/ConnectionsModal.tsx
@@ -14,6 +14,7 @@ import {
   useDragDropContext,
 } from '@thisbeyond/solid-dnd'
 import { For, Show, createSignal } from 'solid-js'
+import { Button } from '~/components/Button'
 import {
   AccessorKey,
   initColumnOrder,
@@ -109,15 +110,15 @@ export default (props: {
             </DragOverlay>
           </DragDropProvider>
 
-          <button
-            class="btn btn-neutral btn-sm ml-auto mt-4 block"
+          <Button
+            class="btn-neutral btn-sm ml-auto mt-4 block"
             onClick={() => {
               props.onOrderChange(initColumnOrder)
               props.onVisibleChange(initColumnVisibility)
             }}
           >
             {t('reset')}
-          </button>
+          </Button>
         </div>
 
         <label class="modal-backdrop" for="connection-modal" />
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 919b44a..186a47b 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -15,6 +15,7 @@ import {
 } from '@tabler/icons-solidjs'
 import { For, ParentComponent, Show, createMemo, createSignal } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
+import { Button } from '~/components/Button'
 import { LANG, ROUTE } from '~/config/enum'
 import { themes } from '~/constants'
 import { setCurTheme, setSelectedEndpoint } from '~/signals'
@@ -181,8 +182,8 @@ export const Header = () => {
 
       <div class="navbar-end">
         <div class="flex items-center gap-2">
-          <button
-            class="btn btn-circle btn-sm"
+          <Button
+            class="btn-circle btn-sm"
             onClick={() => {
               const curLocale = locale()
 
@@ -190,16 +191,16 @@ export const Header = () => {
             }}
           >
             <IconLanguage />
-          </button>
+          </Button>
 
           <ThemeSwitcher />
 
-          <button
-            class="btn btn-circle btn-secondary btn-sm"
+          <Button
+            class="btn-circle btn-secondary btn-sm"
             onClick={onSwitchEndpointClick}
           >
             <IconArrowsExchange />
-          </button>
+          </Button>
         </div>
       </div>
     </ul>
diff --git a/src/pages/Connections.tsx b/src/pages/Connections.tsx
index 97c1cfc..454a7f8 100644
--- a/src/pages/Connections.tsx
+++ b/src/pages/Connections.tsx
@@ -20,6 +20,7 @@ import byteSize from 'byte-size'
 import { isIPv6 } from 'is-ip'
 import { For, createEffect, createSignal } from 'solid-js'
 import { twMerge } from 'tailwind-merge'
+import { Button } from '~/components/Button'
 import ConnectionsModal from '~/components/ConnectionsModal'
 import {
   AccessorKey,
@@ -111,22 +112,22 @@ export default () => {
       accessorKey: AccessorKey.Close,
       header: () => (
         <div class="flex h-full items-center">
-          <button
-            class="btn btn-circle btn-xs"
+          <Button
+            class="btn-circle btn-xs"
             onClick={() => request.delete('connections')}
           >
             <IconCircleX size="18" />
-          </button>
+          </Button>
         </div>
       ),
       cell: ({ row }) => (
         <div class="flex h-full items-center">
-          <button
-            class="btn btn-circle btn-xs"
+          <Button
+            class="btn-circle btn-xs"
             onClick={() => onCloseConnection(row.id)}
           >
             <IconCircleX size="18" />
-          </button>
+          </Button>
         </div>
       ),
     },
diff --git a/src/pages/Proxies.tsx b/src/pages/Proxies.tsx
index c552642..a443e22 100644
--- a/src/pages/Proxies.tsx
+++ b/src/pages/Proxies.tsx
@@ -1,6 +1,7 @@
 import { useI18n } from '@solid-primitives/i18n'
 import { IconBrandSpeedtest } from '@tabler/icons-solidjs'
 import { Show, createSignal } from 'solid-js'
+import { Button } from '~/components/Button'
 import Collapse from '~/components/Collpase'
 import ForTwoColumns from '~/components/ForTwoColumns'
 import ProxyCardGroups from '~/components/ProxyCardGroups'
@@ -42,12 +43,12 @@ export default () => {
             <>
               <div class="mr-10 flex items-center justify-between">
                 <span>{proxy.name}</span>
-                <button
-                  class="btn btn-circle btn-sm"
+                <Button
+                  class="btn-circle btn-sm"
                   onClick={(e) => onSpeedTestClick(e, proxy.name)}
                 >
                   <IconBrandSpeedtest />
-                </button>
+                </Button>
               </div>
               <div class="text-sm text-slate-500">
                 {proxy.type} :: {proxy.now}
diff --git a/src/pages/ProxyProvider.tsx b/src/pages/ProxyProvider.tsx
index e487113..0565762 100644
--- a/src/pages/ProxyProvider.tsx
+++ b/src/pages/ProxyProvider.tsx
@@ -1,6 +1,7 @@
 import { useI18n } from '@solid-primitives/i18n'
 import { IconBrandSpeedtest, IconReload } from '@tabler/icons-solidjs'
 import { Show, createSignal } from 'solid-js'
+import { Button } from '~/components/Button'
 import Collapse from '~/components/Collpase'
 import ForTwoColumns from '~/components/ForTwoColumns'
 import ProxyCardGroups from '~/components/ProxyCardGroups'
@@ -53,12 +54,13 @@ export default () => {
     <div class="flex flex-col gap-2">
       <h1 class="flex h-8 items-center pb-2 text-lg font-semibold">
         {t('proxyProviders')}
-        <button
-          class="btn btn-circle btn-ghost btn-sm ml-2"
+
+        <Button
+          class="btn-circle btn-ghost btn-sm ml-2"
           onClick={(e) => onUpdateAllProviderClick(e)}
         >
           <IconReload />
-        </button>
+        </Button>
       </h1>
       <ForTwoColumns
         subChild={proxyProviders().map((proxyProvider) => {
@@ -67,20 +69,21 @@ export default () => {
               <div class="mr-8 flex items-center justify-between">
                 <span>{proxyProvider.name}</span>
                 <div>
-                  <button
+                  <Button
                     class="btn btn-circle btn-sm mr-2"
                     onClick={(e) =>
                       onUpdateProviderClick(e, proxyProvider.name)
                     }
                   >
                     <IconReload />
-                  </button>
-                  <button
+                  </Button>
+
+                  <Button
                     class="btn btn-circle btn-sm"
                     onClick={(e) => onHealthCheckClick(e, proxyProvider.name)}
                   >
                     <IconBrandSpeedtest />
-                  </button>
+                  </Button>
                 </div>
               </div>
               <SubscriptionInfo
diff --git a/src/pages/Rules.tsx b/src/pages/Rules.tsx
index efcee44..615f899 100644
--- a/src/pages/Rules.tsx
+++ b/src/pages/Rules.tsx
@@ -2,6 +2,7 @@ import { useI18n } from '@solid-primitives/i18n'
 import { IconReload } from '@tabler/icons-solidjs'
 import InfiniteScroll from 'solid-infinite-scroll'
 import { For, Show, createMemo, createSignal, onMount } from 'solid-js'
+import { Button } from '~/components/Button'
 import { useRules } from '~/signals/rules'
 import { formatTimeFromNow, getBtnElFromClickEvent } from '~/utils/proxies'
 
@@ -67,12 +68,12 @@ export default () => {
         <div class="flex-1">
           <h1 class="flex h-11 items-center pb-4 text-lg font-semibold">
             {t('ruleProviders')}
-            <button
-              class="btn btn-circle btn-ghost btn-sm ml-2"
+            <Button
+              class="btn-circle btn-ghost btn-sm ml-2"
               onClick={(e) => onUpdateAllProviderClick(e)}
             >
               <IconReload />
-            </button>
+            </Button>
           </h1>
 
           <For each={rulesProviders()}>
@@ -83,14 +84,14 @@ export default () => {
                     {rulesProvider.name} ({rulesProvider.ruleCount})
                   </span>
                   <div>
-                    <button
-                      class="btn btn-circle btn-sm mr-2"
+                    <Button
+                      class="btn-circle btn-sm mr-2"
                       onClick={(e) =>
                         onUpdateProviderClick(e, rulesProvider.name)
                       }
                     >
                       <IconReload />
-                    </button>
+                    </Button>
                   </div>
                 </div>
                 <div class="text-xs text-slate-500">
diff --git a/src/pages/Setup.tsx b/src/pages/Setup.tsx
index 94d9ecc..6014f97 100644
--- a/src/pages/Setup.tsx
+++ b/src/pages/Setup.tsx
@@ -7,6 +7,7 @@ import ky from 'ky'
 import { For, onMount } from 'solid-js'
 import { v4 as uuid } from 'uuid'
 import { z } from 'zod'
+import { Button } from '~/components/Button'
 import { endpointList, setEndpointList, setSelectedEndpoint } from '~/signals'
 
 const schema = z.object({
@@ -122,9 +123,9 @@ export default () => {
             placeholder="secret"
           />
 
-          <button type="submit" class="btn btn-primary join-item uppercase">
+          <Button type="submit" class="btn-primary join-item uppercase">
             {t('add')}
-          </button>
+          </Button>
         </div>
       </form>
 
@@ -137,15 +138,15 @@ export default () => {
             >
               {url}
 
-              <button
-                class="btn btn-circle btn-ghost btn-xs text-white"
+              <Button
+                class="btn-circle btn-ghost btn-xs text-white"
                 onClick={(e) => {
                   e.stopPropagation()
                   onRemove(id)
                 }}
               >
                 <IconX />
-              </button>
+              </Button>
             </div>
           )}
         </For>