diff --git a/frontend/components/ui/Button.vue b/frontend/components/ui/Button.vue
index 46ea375..4624e10 100644
--- a/frontend/components/ui/Button.vue
+++ b/frontend/components/ui/Button.vue
@@ -5,6 +5,7 @@ type Props = {
     size?: "xl" | "lg" | "md";
     startIcon?: string;
     endIcon?: string;
+    loading?: boolean;
 };
 
 // props
@@ -35,8 +36,9 @@ const classes = computed(() => {
 
 <template>
     <button :class="classes">
-        <Icon v-if="startIcon" :name="startIcon" />
-        <slot />
-        <Icon v-if="endIcon" :name="endIcon" />
+        <Icon v-if="!loading && startIcon" :name="startIcon" />
+        <slot v-if="!loading" />
+        <Icon v-if="!loading && endIcon" :name="endIcon" />
+        <Icon v-if="loading" name="svg-spinners:3-dots-fade" class="my-0.5" />
     </button>
 </template>