diff --git a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
index c993c64c8..72488b82e 100644
--- a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
+++ b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
@@ -20,22 +20,28 @@
               :key="status.value"
               class="status-items"
             >
-              <button
-                class="button clear status-change--dropdown-button"
-                :disabled="status.disabled"
+              <woot-button
+                variant="clear"
+                class-names="status-change--dropdown-button"
+                :is-disabled="status.disabled"
                 @click="changeAvailabilityStatus(status.value)"
               >
                 <availability-status-badge :status="status.value" />
                 {{ status.label }}
-              </button>
+              </woot-button>
             </woot-dropdown-item>
           </woot-dropdown-menu>
         </div>
       </transition>
 
-      <button class="status-change--change-button" @click="openStatusMenu">
+      <woot-button
+        variant="clear"
+        color-scheme="secondary"
+        class-names="status-change--change-button link"
+        @click="openStatusMenu"
+      >
         {{ $t('SIDEBAR_ITEMS.CHANGE_AVAILABILITY_STATUS') }}
-      </button>
+      </woot-button>
     </div>
   </div>
 </template>
@@ -156,15 +162,5 @@ export default {
     display: flex;
     align-items: baseline;
   }
-  & &--change-button {
-    color: var(--b-600);
-    font-size: var(--font-size-small);
-    cursor: pointer;
-    outline: none;
-
-    &:hover {
-      color: var(--w-600);
-    }
-  }
 }
 </style>