diff --git a/frontend/assets/css/button.comp.css b/frontend/assets/css/button.comp.css
new file mode 100644
index 0000000..05a12d5
--- /dev/null
+++ b/frontend/assets/css/button.comp.css
@@ -0,0 +1,112 @@
+@utility btn-xl {
+    @apply typo-label-lg py-4 px-6 gap-3;
+    svg {
+        @apply size-[20px]
+    }
+}
+
+@utility btn-lg {
+    @apply typo-label-md py-3 px-4 gap-2.5;
+    svg {
+        @apply size-[20px]
+    }
+}
+
+@utility btn-md {
+    @apply typo-label-sm py-[10px] px-[14px] gap-2;
+    svg {
+        @apply size-[16px]
+    }
+}
+
+@utility btn-solid {
+    @apply text-white bg-black border-[1.5px] border-transparent;
+    @apply btn-lg;
+
+    svg[class~=iconify] path {
+        @apply stroke-white;
+    }
+
+    &:hover {
+        @apply bg-white border-black text-black;
+
+        svg[class~=iconify] path {
+            @apply stroke-black;
+        }
+    }
+
+    &:disabled {
+        @apply bg-slate-50 text-slate-300;
+
+        svg[class~=iconify] path {
+            @apply stroke-slate-300;
+        }
+    }
+}
+
+@utility btn-secondary {
+    @apply text-black bg-slate-100;
+    @apply btn-lg;
+
+    svg[class~=iconify] path {
+        @apply stroke-black;
+    }
+
+    &:hover {
+        @apply bg-slate-200;
+    }
+
+    &:disabled {
+        @apply bg-slate-100 text-slate-300;
+
+        svg[class~=iconify] path {
+            @apply stroke-slate-300;
+        }
+    }
+}
+
+@utility btn-outlined {
+    @apply text-black border-[1.5px] border-slate-200;
+    @apply btn-lg;
+
+    svg[class~=iconify] path {
+        @apply stroke-black;
+    }
+
+    &:hover {
+        @apply bg-slate-50 border-slate-200;
+    }
+
+    &:disabled {
+        @apply text-slate-300;
+
+        svg[class~=iconify] path {
+            @apply stroke-slate-300;
+        }
+    }
+}
+
+@utility btn-ghost {
+    @apply text-black bg-white;
+    @apply btn-lg;
+
+    svg[class~=iconify] path {
+        @apply stroke-black;
+    }
+
+    &:hover {
+        @apply text-slate-500;
+
+        svg[class~=iconify] path {
+            @apply stroke-slate-500;
+        }
+    }
+
+    &:disabled {
+        @apply text-slate-300;
+
+        svg[class~=iconify] path {
+            @apply stroke-slate-300;
+        }
+    }
+}