diff --git a/ui/src/components/Button.tsx b/ui/src/components/Button.tsx
index 7655415..9e4f191 100644
--- a/ui/src/components/Button.tsx
+++ b/ui/src/components/Button.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { JSXElement, Show } from 'solid-js'
+import { JSX, JSXElement, Show } from 'solid-js'
 
 type DaisyUIButtonColor =
   | 'neutral'
@@ -15,14 +15,9 @@ type DaisyUIButtonVariant = 'outline' | 'dash' | 'soft' | 'ghost' | 'link'
 
 type DaisyUIButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 
-/**
- * Renders a button component with an optional loading state.
- * If the loading state is passed the button will be disabled and show
- * a loader ball while loading.
- */
-export function Button(props: {
-  label: string
-  icon?: string
+type DaisyUIButtonShape = 'square' | 'circle'
+
+interface ButtonBaseProps {
   onClick?: (event?: MouseEvent) => void
   isLoading?: boolean
   disabled?: boolean
@@ -30,68 +25,99 @@ export function Button(props: {
   color?: DaisyUIButtonColor
   size?: DaisyUIButtonSize
   variant?: DaisyUIButtonVariant
+  shape?: DaisyUIButtonShape
+  block?: boolean
   class?: string
+  style?: JSX.CSSProperties
   dataCy?: string
-}): JSXElement {
+  ref?: (el: HTMLButtonElement) => void
+}
+
+/**
+ * Renders a button component with an optional loading state.
+ * If the loading state is passed the button will be disabled and show
+ * a loader ball while loading.
+ */
+export function Button(
+  props: ButtonBaseProps & {
+    label: JSXElement
+    icon?: string
+    trailingIcon?: string
+  }
+): JSXElement {
+  const isDisabled = () => props.disabled || props.isLoading
+
   return (
     <button
+      ref={props.ref}
       class={clsx(
         'btn',
-        props.color ? `btn-${props.color}` : undefined,
-        props.variant ? `btn-${props.variant}` : undefined,
-        props.size ? `btn-${props.size}` : undefined,
-        (props.isLoading || props.disabled) && 'btn-disabled',
+        props.color && `btn-${props.color}`,
+        props.variant && `btn-${props.variant}`,
+        props.size && `btn-${props.size}`,
+        props.shape && `btn-${props.shape}`,
+        props.block && 'btn-block',
         props.class
       )}
       type={props.type ?? 'button'}
+      disabled={isDisabled()}
+      style={props.style}
       onClick={(event) => props.onClick?.(event)}
       data-cy={props.dataCy}
     >
-      <Show when={props.icon}>
-        <i class={props.icon} />
-      </Show>
-
-      {props.label}
-
-      <Show when={props.isLoading}>
+      <Show
+        when={props.isLoading}
+        fallback={
+          <Show when={props.icon}>
+            <i class={props.icon} />
+          </Show>
+        }
+      >
         <span
           class={clsx(
             'loading loading-ball',
-            props.size ? `loading-${props.size}` : undefined
+            props.size && `loading-${props.size}`
           )}
         />
       </Show>
+
+      {props.label}
+
+      <Show when={props.trailingIcon && !props.isLoading}>
+        <i class={props.trailingIcon} />
+      </Show>
     </button>
   )
 }
 
-export function IconButton(props: {
-  icon: string
-  onClick?: () => void
-  isLoading?: boolean
-  disabled?: boolean
-  color?: DaisyUIButtonColor
-  size?: DaisyUIButtonSize
-  variant?: DaisyUIButtonVariant
-  class?: string
-  dataCy?: string
-}): JSXElement {
+export function IconButton(
+  props: ButtonBaseProps & {
+    icon: string
+  }
+): JSXElement {
+  const isDisabled = () => props.disabled || props.isLoading
+
   return (
     <button
+      ref={props.ref}
       class={clsx(
         'btn',
         props.variant ? `btn-${props.variant}` : 'btn-ghost',
         props.size ? `btn-${props.size}` : 'btn-sm',
-        props.isLoading && 'btn-disabled',
+        props.shape && `btn-${props.shape}`,
         props.class
       )}
-      onClick={() => props.onClick?.()}
-      disabled={props.disabled}
+      type={props.type ?? 'button'}
+      disabled={isDisabled()}
+      style={props.style}
+      onClick={(event) => props.onClick?.(event)}
       data-cy={props.dataCy}
     >
       <Show
         when={props.isLoading}
-        fallback={<i class={clsx(props.icon, `text-${props.color}`)} />}
+        fallback={
+          <i class={clsx(props.icon, props.color && `text-${props.color}`)} />
+        }
       >
         <span class="loading loading-ball loading-xs" />
       </Show>
diff --git a/ui/src/components/FrozenWorkspaceModal.tsx b/ui/src/components/FrozenWorkspaceModal.tsx
index d48a17e..ece9dac 100644
--- a/ui/src/components/FrozenWorkspaceModal.tsx
+++ b/ui/src/components/FrozenWorkspaceModal.tsx
@@ -2,6 +2,7 @@ import { JSXElement, Show } from 'solid-js'
 import { Portal } from 'solid-js/web'
 import clsx from 'clsx'
 
+import { Button } from './Button'
 import { useLocale } from '../context/LocaleProvider'
 import type { FrozenReason } from '../models/Workspace'
 
@@ -81,26 +82,31 @@ export function FrozenWorkspaceModal(props: Props): JSXElement {
 
           {/* Actions */}
           <div class="flex justify-end gap-3">
-            <button
-              class="btn btn-ghost btn-sm h-10 px-6 text-sm font-semibold"
+            <Button
+              variant="ghost"
+              size="sm"
+              class="h-10 px-6 text-sm font-semibold"
               onClick={() => props.onClose()}
-            >
-              <Show when={isTrialExpired()} fallback={t('close')}>
-                {t('later')}
-              </Show>
-            </button>
-            <button
-              class="btn btn-sm h-10 px-6 text-sm font-semibold border-0 text-white btn-disabled"
+              label={
+                <Show when={isTrialExpired()} fallback={t('close')}>
+                  {t('later')}
+                </Show>
+              }
+            />
+            <Button
+              size="sm"
+              class="h-10 px-6 text-sm font-semibold border-0 text-white"
               style={{ background: '#95a5a6' }}
               disabled={true}
-            >
-              <Show
-                when={isTrialExpired()}
-                fallback={t('frozen_subscribe_button')}
-              >
-                {t('frozen_upgrade_button')}
-              </Show>
-            </button>
+              label={
+                <Show
+                  when={isTrialExpired()}
+                  fallback={t('frozen_subscribe_button')}
+                >
+                  {t('frozen_upgrade_button')}
+                </Show>
+              }
+            />
           </div>
           <p class="text-xs text-base-content/50 mt-2 text-right">
             {t('upgrade_available_soon')}
diff --git a/ui/src/components/LanguageSelector.tsx b/ui/src/components/LanguageSelector.tsx
index ad671fd..0118c46 100644
--- a/ui/src/components/LanguageSelector.tsx
+++ b/ui/src/components/LanguageSelector.tsx
@@ -1,5 +1,6 @@
 import { createEffect, JSXElement, For } from 'solid-js'
 
+import { Button } from './Button'
 import { useLocale, locales } from '../context/LocaleProvider'
 
 export function LanguageSelector(): JSXElement {
@@ -23,19 +24,20 @@ export function LanguageSelector(): JSXElement {
         <For each={locales}>
           {(language) => (
             <li>
-              <button
-                class="btn btn-ghost"
-                data-cy={`language-${language}`}
+              <Button
+                variant="ghost"
+                dataCy={`language-${language}`}
                 onClick={() => {
                   setLocale(language)
                   detailsRef?.removeAttribute('open')
                 }}
-              >
-                <div class="flex gap-2 mr-2">
-                  <CountryFlag countryCode={language} />
-                  <span>{language}</span>
-                </div>
-              </button>
+                label={
+                  <div class="flex gap-2 mr-2">
+                    <CountryFlag countryCode={language} />
+                    <span>{language}</span>
+                  </div>
+                }
+              />
             </li>
           )}
         </For>
diff --git a/ui/src/components/Modal.tsx b/ui/src/components/Modal.tsx
index abba0c4..3d0710b 100644
--- a/ui/src/components/Modal.tsx
+++ b/ui/src/components/Modal.tsx
@@ -2,6 +2,8 @@ import clsx from 'clsx'
 import { createSignal, JSXElement } from 'solid-js'
 import { Portal } from 'solid-js/web'
 
+import { Button } from './Button'
+
 /**
  * Creates a modal state that can be used to open and close modals
  * the keys passed in are used as identifiers for identifying differnent modals.
@@ -43,12 +45,14 @@ export function Modal(props: {
         class={clsx('modal z-1000', isOpen() ? 'modal-open' : 'modal-close')}
       >
         <div class="modal-box w-90vw max-w-sm sm:max-w-md">
-          <button
-            class="btn btn-sm btn-circle btn-ghost absolute right-4 top-4"
+          <Button
+            variant="ghost"
+            shape="circle"
+            size="sm"
+            class="absolute right-4 top-4"
             onClick={() => props.onClose()}
-          >
-            ✕
-          </button>
+            label="✕"
+          />
           <h3 class="font-bold text-lg">{props.title}</h3>
           {props.children}
         </div>
diff --git a/ui/src/components/ProfileMenu.tsx b/ui/src/components/ProfileMenu.tsx
index 0c91952..7b9aca0 100644
--- a/ui/src/components/ProfileMenu.tsx
+++ b/ui/src/components/ProfileMenu.tsx
@@ -1,9 +1,9 @@
 import { createSignal, JSXElement, Show } from 'solid-js'
 import { A, useNavigate } from '@solidjs/router'
-import { clsx } from 'clsx'
 
 import { useUser } from '../context/UserProvider'
 import { useLocale } from '../context/LocaleProvider'
+import { Button } from './Button'
 import { Toast } from './Toast'
 
 import { logout } from '../api'
@@ -65,24 +65,17 @@ export function ProfileMenu(): JSXElement {
         </Show>
 
         <li>
-          <button
-            class={clsx(
-              'btn',
-              'btn-ghost',
-              'justify-start',
-              loggingOut() && 'btn-disabled'
-            )}
+          <Button
+            variant="ghost"
+            class="justify-start"
+            icon={
+              loggingOut() ? undefined : 'fa-solid fa-arrow-right-from-bracket'
+            }
+            isLoading={loggingOut()}
             onClick={onLogout}
-            data-cy="logout"
-          >
-            <Show
-              when={loggingOut()}
-              fallback={<i class="fa-solid fa-arrow-right-from-bracket" />}
-            >
-              <span class="loading loading-ball text-neutral loading-sm" />
-            </Show>
-            {t('logout')}
-          </button>
+            dataCy="logout"
+            label={t('logout')}
+          />
         </li>
       </ul>
 
diff --git a/ui/src/components/TopBar.tsx b/ui/src/components/TopBar.tsx
index 2675118..a45a8dc 100644
--- a/ui/src/components/TopBar.tsx
+++ b/ui/src/components/TopBar.tsx
@@ -5,6 +5,7 @@ import { clsx } from 'clsx'
 import { useUser } from '../context/UserProvider'
 import { useLocale } from '../context/LocaleProvider'
 
+import { Button, IconButton } from '../components/Button'
 import { ThemeSwitcher } from '../components/ThemeSwitcher'
 import { LanguageSelector } from '../components/LanguageSelector'
 import { LoginModal } from '../components/LoginModal'
@@ -22,12 +23,12 @@ export function TopBar(): JSXElement {
     <>
       <div class="navbar fixed bg-base-100 top-0 left-0 z-20">
         <div class="flex-none md:hidden">
-          <button
-            class="btn btn-square btn-ghost"
+          <IconButton
+            icon="fa-solid fa-bars"
+            shape="square"
+            size="md"
             onClick={() => setSidebarOpen(!sidebarOpen())}
-          >
-            <i class="fa-solid fa-bars" />
-          </button>
+          />
         </div>
 
         <div class="flex-1 text-center md:text-left">
@@ -51,21 +52,19 @@ export function TopBar(): JSXElement {
               </A>
             }
           >
-            <button
-              class="btn btn-ghost"
+            <Button
+              variant="ghost"
               onClick={() => setOpenLoginModal(true)}
-              data-cy="open-login-modal"
-            >
-              {t('login')}
-            </button>
+              dataCy="open-login-modal"
+              label={t('login')}
+            />
 
-            <button
-              class="btn btn-ghost"
+            <Button
+              variant="ghost"
               onClick={() => setOpenRegisterModal(true)}
-              data-cy="open-register-modal"
-            >
-              {t('register')}
-            </button>
+              dataCy="open-register-modal"
+              label={t('register')}
+            />
           </Show>
         </div>
       </div>
@@ -82,12 +81,12 @@ export function TopBar(): JSXElement {
             <A class="text-xl font-bold" href="">
               My solid app
             </A>
-            <button
-              class="btn btn-square btn-ghost"
+            <IconButton
+              icon="fa-solid fa-xmark"
+              shape="square"
+              size="md"
               onClick={() => setSidebarOpen(false)}
-            >
-              <i class="fa-solid fa-xmark" />
-            </button>
+            />
           </div>
 
           <div class="flex flex-col">
@@ -104,29 +103,31 @@ export function TopBar(): JSXElement {
               }
             >
               <div class="space-y-2 mb-6">
-                <button
-                  class="btn btn-ghost w-full justify-start"
+                <Button
+                  variant="ghost"
+                  block
+                  class="justify-start"
+                  icon="fa-solid fa-sign-in-alt mr-2"
                   onClick={() => {
                     setOpenLoginModal(true)
                     setSidebarOpen(false)
                   }}
-                  data-cy="open-login-modal-mobile"
-                >
-                  <i class="fa-solid fa-sign-in-alt mr-2" />
-                  {t('login')}
-                </button>
+                  dataCy="open-login-modal-mobile"
+                  label={t('login')}
+                />
 
-                <button
-                  class="btn btn-ghost w-full justify-start"
+                <Button
+                  variant="ghost"
+                  block
+                  class="justify-start"
+                  icon="fa-solid fa-user-plus mr-2"
                   onClick={() => {
                     setOpenRegisterModal(true)
                     setSidebarOpen(false)
                   }}
-                  data-cy="open-login-modal-mobile"
-                >
-                  <i class="fa-solid fa-user-plus mr-2" />
-                  {t('register')}
-                </button>
+                  dataCy="open-login-modal-mobile"
+                  label={t('register')}
+                />
               </div>
             </Show>
           </div>
diff --git a/ui/src/index.css b/ui/src/index.css
index ebb654c..3500304 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -473,6 +473,7 @@
 .register-btn-submit {
   width: 100%;
   height: 46px;
+  min-height: 46px;
   background: var(--color-primary);
   color: white;
   font-family: inherit;
@@ -485,6 +486,7 @@
   align-items: center;
   justify-content: center;
   gap: 7px;
+  padding: 0;
   transition:
     background 0.2s,
     transform 0.15s,
@@ -583,7 +585,10 @@
 
 .login-back-btn {
   width: 100%;
+  min-height: 0;
+  height: auto;
   font-size: 12px;
+  font-weight: 400;
   color: #9ca3af;
   background: none;
   border: none;
diff --git a/ui/src/pages/Base.tsx b/ui/src/pages/Base.tsx
index 2ed4be6..f8695ef 100644
--- a/ui/src/pages/Base.tsx
+++ b/ui/src/pages/Base.tsx
@@ -2,6 +2,7 @@ import { JSXElement, createSignal, onCleanup, onMount } from 'solid-js'
 import { A } from '@solidjs/router'
 
 import { FrozenWorkspaceModal } from '../components/FrozenWorkspaceModal'
+import { IconButton } from '../components/Button'
 import { ProfileMenu } from '../components/ProfileMenu'
 import { ThemeSwitcher } from '../components/ThemeSwitcher'
 import { LanguageSelector } from '../components/LanguageSelector'
@@ -72,12 +73,13 @@ export function BasePage(props: BasePageProps): JSXElement {
               >
                 {t('my_solid_app')}
               </A>
-              <button
-                class="btn btn-square btn-ghost lg:hidden"
+              <IconButton
+                icon="fa-solid fa-xmark"
+                shape="square"
+                size="md"
+                class="lg:hidden"
                 onClick={() => setDrawerOpen(false)}
-              >
-                <i class="fa-solid fa-xmark" />
-              </button>
+              />
             </div>
           </div>
 
diff --git a/ui/src/pages/Login.tsx b/ui/src/pages/Login.tsx
index dd133a6..a838c7f 100644
--- a/ui/src/pages/Login.tsx
+++ b/ui/src/pages/Login.tsx
@@ -12,6 +12,7 @@ import { User, UserAttributes } from '../models/User'
 import { useUser } from '../context/UserProvider'
 import { useLocale } from '../context/LocaleProvider'
 import { Alert } from '../components/Alert'
+import { Button } from '../components/Button'
 import { createFormState } from '../form_helpers'
 
 export function LoginPage(): JSXElement {
@@ -238,32 +239,30 @@ function LoginForm(): JSXElement {
                     />
                   </Show>
 
-                  <button
-                    data-cy="login-button"
+                  <Button
+                    dataCy="login-button"
                     class="register-btn-submit"
                     type="submit"
-                    disabled={loginState.submitting}
-                  >
-                    <Show
-                      when={!loginState.submitting}
-                      fallback={<div class="register-spinner" />}
-                    >
-                      {t('login')}
-                      <svg
-                        width="15"
-                        height="15"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2.5"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      >
-                        <line x1="5" y1="12" x2="19" y2="12" />
-                        <polyline points="12 5 19 12 12 19" />
-                      </svg>
-                    </Show>
-                  </button>
+                    isLoading={loginState.submitting}
+                    label={
+                      <Show when={!loginState.submitting}>
+                        {t('login')}
+                        <svg
+                          width="15"
+                          height="15"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2.5"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        >
+                          <line x1="5" y1="12" x2="19" y2="12" />
+                          <polyline points="12 5 19 12 12 19" />
+                        </svg>
+                      </Show>
+                    }
+                  />
                 </div>
               </Login.Form>
 
@@ -330,43 +329,39 @@ function LoginForm(): JSXElement {
                     <Alert type="error" message={totpState.response.message} />
                   </Show>
 
-                  <button
+                  <Button
                     class="register-btn-submit"
                     type="submit"
-                    disabled={totpState.submitting}
-                  >
-                    <Show
-                      when={!totpState.submitting}
-                      fallback={<div class="register-spinner" />}
-                    >
-                      {t('login')}
-                      <svg
-                        width="15"
-                        height="15"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2.5"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      >
-                        <line x1="5" y1="12" x2="19" y2="12" />
-                        <polyline points="12 5 19 12 12 19" />
-                      </svg>
-                    </Show>
-                  </button>
+                    isLoading={totpState.submitting}
+                    label={
+                      <Show when={!totpState.submitting}>
+                        {t('login')}
+                        <svg
+                          width="15"
+                          height="15"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2.5"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        >
+                          <line x1="5" y1="12" x2="19" y2="12" />
+                          <polyline points="12 5 19 12 12 19" />
+                        </svg>
+                      </Show>
+                    }
+                  />
 
-                  <button
-                    type="button"
+                  <Button
                     class="login-back-btn"
                     onClick={() => {
                       setAt2FAStep(false)
                       reset(loginState)
                       reset(totpState)
                     }}
-                  >
-                    ← {t('back')}
-                  </button>
+                    label={`← ${t('back')}`}
+                  />
                 </div>
               </Totp.Form>
             </Show>
diff --git a/ui/src/pages/Register.tsx b/ui/src/pages/Register.tsx
index 81ca2b5..adf9ac2 100644
--- a/ui/src/pages/Register.tsx
+++ b/ui/src/pages/Register.tsx
@@ -16,6 +16,7 @@ import { useUser } from '../context/UserProvider'
 import { useLocale } from '../context/LocaleProvider'
 import { useWorkspace } from '../context/WorkspaceProvider'
 import { Alert } from '../components/Alert'
+import { Button } from '../components/Button'
 import { createFormState } from '../form_helpers'
 import { mustMatch } from '../validators'
 
@@ -492,34 +493,32 @@ function RegisterForm(): JSXElement {
                   />
                 </Show>
 
-                <button
-                  data-cy="register-button"
+                <Button
+                  dataCy="register-button"
                   class="register-btn-submit"
                   type="submit"
-                  disabled={state.submitting}
-                >
-                  <Show
-                    when={!state.submitting}
-                    fallback={<div class="register-spinner" />}
-                  >
-                    {isInvite()
-                      ? t('invite_join_workspace')
-                      : t('register_create_free_account')}
-                    <svg
-                      width="15"
-                      height="15"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2.5"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    >
-                      <line x1="5" y1="12" x2="19" y2="12" />
-                      <polyline points="12 5 19 12 12 19" />
-                    </svg>
-                  </Show>
-                </button>
+                  isLoading={state.submitting}
+                  label={
+                    <Show when={!state.submitting}>
+                      {isInvite()
+                        ? t('invite_join_workspace')
+                        : t('register_create_free_account')}
+                      <svg
+                        width="15"
+                        height="15"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <line x1="5" y1="12" x2="19" y2="12" />
+                        <polyline points="12 5 19 12 12 19" />
+                      </svg>
+                    </Show>
+                  }
+                />
 
                 <p class="register-terms">
                   {t('register_terms_prefix')}{' '}
diff --git a/ui/src/pages/admin_page/UsersAdmin.tsx b/ui/src/pages/admin_page/UsersAdmin.tsx
index d17ed02..867607f 100644
--- a/ui/src/pages/admin_page/UsersAdmin.tsx
+++ b/ui/src/pages/admin_page/UsersAdmin.tsx
@@ -20,7 +20,7 @@ import { useLocale } from '../../context/LocaleProvider'
 import { pattern, email, minLength, required } from '@modular-forms/solid'
 import { Table, TableRow } from '../../components/Table'
 import { Tooltip } from '../../components/Tooltip'
-import { Button } from '../../components/Button'
+import { Button, IconButton } from '../../components/Button'
 import { createFormState } from '../../form_helpers'
 
 export function UsersAdmin(): JSXElement {
@@ -82,13 +82,13 @@ export function UsersAdmin(): JSXElement {
 
   const DeleteUserButton = (props: { user: UserAttributes }): JSXElement => {
     return (
-      <button
-        class="btn btn-ghost btn-sm mx-1"
+      <IconButton
+        icon="fa-solid fa-trash"
+        color="error"
+        class="mx-1"
         onClick={() => handleDelete(props.user)}
-        data-cy={`delete-user-${props.user.email}`}
-      >
-        <i class="fa-solid fa-trash text-error" />
-      </button>
+        dataCy={`delete-user-${props.user.email}`}
+      />
     )
   }
 
@@ -108,14 +108,14 @@ export function UsersAdmin(): JSXElement {
           t('id'),
           t('email'),
           t('verified'),
-          <button
-            class="btn btn-primary btn-sm"
+          <Button
+            color="primary"
+            size="sm"
+            icon="fa-solid fa-plus"
             onClick={() => openModal('createUser')}
-            data-cy="create-new-user"
-          >
-            <i class="fa-solid fa-plus" />
-            <p class="hidden md:block">{t('create_new_user')}</p>
-          </button>,
+            dataCy="create-new-user"
+            label={<p class="hidden md:block">{t('create_new_user')}</p>}
+          />,
         ]}
       >
         <Show when={!users.loading && !users.error}>
diff --git a/ui/src/pages/workspace_modals/DeleteWorkspaceModal.tsx b/ui/src/pages/workspace_modals/DeleteWorkspaceModal.tsx
index 53c4877..89738d9 100644
--- a/ui/src/pages/workspace_modals/DeleteWorkspaceModal.tsx
+++ b/ui/src/pages/workspace_modals/DeleteWorkspaceModal.tsx
@@ -61,13 +61,13 @@ export function DeleteWorkspaceModal(props: Props): JSXElement {
 
           {/* Footer */}
           <div class="flex items-center justify-end gap-2 px-6 py-4 border-t border-base-100">
-            <button
-              type="button"
+            <Button
+              variant="ghost"
+              size="sm"
               class="px-4 py-2 rounded-[10px] text-[13.5px] font-semibold text-base-content/60 border-[1.5px] border-base-200 hover:border-base-300 hover:bg-base-200/50 hover:text-base-content transition-all"
               onClick={() => props.onCancel()}
-            >
-              {t('cancel')}
-            </button>
+              label={t('cancel')}
+            />
             <Button
               label={t('yes_delete')}
               color="error"