diff --git a/src/components/Button.vue b/src/components/Button.vue
index ebd3e46c..1cea2fcc 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -41,8 +41,8 @@ function handleClick(evt: MouseEvent) {
     :style="{
       'backgroundColor': color,
       'color': textColor,
-      '--b-radius': round ? '50px' : '',
-      'width': block ? '100%' : 'unset',
+      '--b-button-radius': round ? '50px' : '',
+      'width': block ? '100%' : 'var(--b-button-width)',
       'justifyContent': center ? 'center' : ''
     }"
     @click="handleClick"
@@ -55,27 +55,28 @@ function handleClick(evt: MouseEvent) {
 
 <style lang="scss" scoped>
 .b-button {
-  --b-color: var(--bew-content-solid-1);
-  --b-color-hover: var(--bew-content-solid-1-hover);
-  --b-text-color: var(--bew-text-1);
-  --b-radius: var(--bew-radius);
-  --b-padding: 0 14px;
-  --b-font-size: 14px;
-  --b-icon-size: 15px;
-  --b-line-height: 35px;
+  --b-button-color: var(--bew-content-solid-1);
+  --b-button-color-hover: var(--bew-content-solid-1-hover);
+  --b-button-text-color: var(--bew-text-1);
+  --b-button-radius: var(--bew-radius);
+  --b-button-padding: 14px;
+  --b-button-font-size: 14px;
+  --b-button-icon-size: 15px;
+  --b-button-height: 35px;
+  --b-button-width: fit-content;
 
-  --at-apply: bg-$b-color hover:bg-$b-color-hover
-    rounded-$b-radius p-$b-padding transform-gpu active:scale-95
-    duration-300 flex items-center gap-2 text-size-$b-font-size
-    text-$b-text-color lh-$b-line-height h-$b-line-height;
+  --at-apply: bg-$b-button-color hover:bg-$b-button-color-hover
+    rounded-$b-button-radius p-x-$b-button-padding transform-gpu active:scale-95
+    duration-300 flex items-center gap-2 text-size-$b-button-font-size
+    text-$b-button-text-color lh-$b-button-height h-$b-button-height;
 
     & svg {
-      --at-apply: text-size-$b-icon-size
+      --at-apply: text-size-$b-button-icon-size
     }
 
     &.frosted-glass {
-      --b-color: var(--bew-content-1);
-      --b-color-hover: var(--bew-content-1-hover);
+      --b-button-color: var(--bew-content-1);
+      --b-button-color-hover: var(--bew-content-1-hover);
       backdrop-filter: var(--bew-filter-glass);
     }
 
@@ -83,35 +84,35 @@ function handleClick(evt: MouseEvent) {
   }
 
   &--type-primary {
-    --b-color: var(--bew-theme-color);
-    --b-color-hover: var(--bew-theme-color);
-    --b-text-color: white;
+    --b-button-color: var(--bew-theme-color);
+    --b-button-color-hover: var(--bew-theme-color);
+    --b-button-text-color: white;
   }
 
   &--type-secondary {
-    --b-color: var(--bew-fill-1);
-    --b-color-hover: var(--bew-fill-2);
-    --b-text-color: var(--bew-text-1);
+    --b-button-color: var(--bew-fill-1);
+    --b-button-color-hover: var(--bew-fill-2);
+    --b-button-text-color: var(--bew-text-1);
   }
 
   &--type-error {
-    --b-color: var(--bew-error-color);
-    --b-color-hover: var(--bew-error-color)
-    --b-text-color: white;
+    --b-button-color: var(--bew-error-color);
+    --b-button-color-hover: var(--bew-error-color)
+    --b-button-text-color: white;
   }
 
   &--size-small {
-    --b-padding: 6px 12px;
-    --b-font-size: 14px;
-    --b-icon-size: 14px;
-    --b-line-height: 30px;
+    --b-button-padding: 6px;
+    --b-button-font-size: 14px;
+    --b-button-icon-size: 14px;
+    --b-button-height: 30px;
   }
 
   &--size-large {
-    --b-padding: 12px 16px;
-    --b-font-size: 15px;
-    --b-icon-size: 16px;
-    --b-line-height: 40px;
+    --b-button-padding: 12px;
+    --b-button-font-size: 15px;
+    --b-button-icon-size: 16px;
+    --b-button-height: 40px;
   }
 
   &--custom-color {
diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
index e7b8a970..81823800 100644
--- a/src/contentScripts/views/Favorites/Favorites.vue
+++ b/src/contentScripts/views/Favorites/Favorites.vue
@@ -253,7 +253,7 @@ function handleUnfavorite(favoriteResource: FavoriteResource) {
         </h3>
         <p flex="~ col" gap-4>
           <Button
-            color="rgba(255,255,255,.35)" text-color="white" strong flex-1
+            color="rgba(255,255,255,.35)" block text-color="white" strong flex-1
             @click="handlePlayAll"
           >
             <template #left>
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index d77bedcc..636fd082 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -486,7 +486,8 @@ function jumpToLoginPage() {
           v-model.lazy.trim="keyword"
           type="text"
           :placeholder="t('history.search_watch_history')"
-          p="x-14px y-10px"
+          p="x-14px"
+          lh-35px h-35px
           rounded="$bew-radius"
           bg="$bew-content-solid-1"
           shadow="$bew-shadow-1"
@@ -494,7 +495,7 @@ function jumpToLoginPage() {
           w-full
           @keyup.enter="handleSearch"
         >
-        <Button shadow="$bew-shadow-1" @click="handleClearAllWatchHistory">
+        <Button shadow="$bew-shadow-1" block @click="handleClearAllWatchHistory">
           <template #left>
             <tabler:trash />
           </template>
@@ -503,6 +504,7 @@ function jumpToLoginPage() {
         <Button
           v-if="!historyStatus"
           shadow="$bew-shadow-1"
+          block
           @click="handlePauseWatchHistory"
         >
           <template #left>
@@ -510,7 +512,7 @@ function jumpToLoginPage() {
           </template>
           {{ $t('history.pause_watch_history') }}
         </Button>
-        <Button v-else shadow="$bew-shadow-1" @click="handleTurnOnWatchHistory">
+        <Button v-else shadow="$bew-shadow-1" block @click="handleTurnOnWatchHistory">
           <template #left>
             <ph:play-circle-bold />
           </template>
diff --git a/src/contentScripts/views/WatchLater/WatchLater.vue b/src/contentScripts/views/WatchLater/WatchLater.vue
index c003d148..51b21d9d 100644
--- a/src/contentScripts/views/WatchLater/WatchLater.vue
+++ b/src/contentScripts/views/WatchLater/WatchLater.vue
@@ -296,7 +296,7 @@ function jumpToLoginPage() {
         </h3>
         <p v-if="watchLaterList.length > 0" flex="~ col" gap-4>
           <Button
-            color="rgba(255,255,255,.35)" text-color="white" strong flex-1
+            color="rgba(255,255,255,.35)" block text-color="white" strong flex-1
             @click="handlePlayAll"
           >
             <template #left>
@@ -305,7 +305,7 @@ function jumpToLoginPage() {
             {{ t('watch_later.play_all') }}
           </Button>
           <Button
-            color="rgba(255,255,255,.35)" text-color="white" strong flex-1
+            color="rgba(255,255,255,.35)" block text-color="white" strong flex-1
             @click="handleClearAllWatchLater"
           >
             <template #left>
@@ -314,7 +314,7 @@ function jumpToLoginPage() {
             {{ t('watch_later.clear_all') }}
           </Button>
           <Button
-            color="rgba(255,255,255,.35)" text-color="white" strong flex-1
+            color="rgba(255,255,255,.35)" block text-color="white" strong flex-1
             @click="handleRemoveWatchedVideos"
           >
             <template #left>