diff --git a/frontend/assets/css/button.comp.css b/frontend/assets/css/button.comp.css
index 1ab15d2..76cf8de 100644
--- a/frontend/assets/css/button.comp.css
+++ b/frontend/assets/css/button.comp.css
@@ -44,6 +44,31 @@
     }
 }
 
+@utility btn-primary {
+    @apply text-white bg-blue-500 border-[1.5px] border-transparent;
+    @apply btn-lg;
+
+    svg[class~="iconify"] path {
+        @apply stroke-white;
+    }
+
+    &:hover {
+        @apply bg-blue-200 border-blue-500 text-blue-500;
+
+        svg[class~="iconify"] path {
+            @apply stroke-blue-500;
+        }
+    }
+
+    &:disabled {
+        @apply bg-slate-100 text-slate-400;
+
+        svg[class~="iconify"] path {
+            @apply stroke-slate-400;
+        }
+    }
+}
+
 @utility btn-secondary {
     @apply text-black bg-slate-100;
     @apply btn-lg;
diff --git a/frontend/components/global/Button.vue b/frontend/components/global/Button.vue
index 13213d0..dec5399 100644
--- a/frontend/components/global/Button.vue
+++ b/frontend/components/global/Button.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // types
 type Props = {
-    variant?: "solid" | "secondary" | "outlined" | "ghost";
+    variant?: "solid" | "secondary" | "outlined" | "ghost" | "primary";
     size?: "xl" | "lg" | "md";
     startIcon?: string;
     endIcon?: string;
@@ -24,6 +24,7 @@ const classes = computed(() => {
             "btn-secondary": variant.value === "secondary",
             "btn-outlined": variant.value === "outlined",
             "btn-ghost": variant.value === "ghost",
+            "btn-primary": variant.value === "primary",
         },
         {
             "btn-xl": size.value === "xl",