diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
index 01aab75..ef98b4c 100644
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@@ -1,20 +1,40 @@
-import type { ButtonHTMLAttributes, FC, ReactNode } from "react";
+import {
+  useMemo,
+  type ButtonHTMLAttributes,
+  type FC,
+  type ReactNode,
+} from "react";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   children: ReactNode;
   className?: string;
   loading?: boolean;
+  variant?: "contained" | "outlined" | "text";
 }
 
 export const Button: FC<ButtonProps> = ({
   children,
   className,
   loading,
+  variant = "contained",
   ...props
 }) => {
+  const appearance = useMemo(() => {
+    switch (variant) {
+      case "contained":
+        return "bg-blue-600 text-white hover:bg-blue-700";
+      case "outlined":
+        return "border border-blue-600 text-blue-600 hover:text-blue-700 font-medium";
+      case "text":
+        return "text-blue-600 hover:text-blue-700 font-medium";
+    }
+
+    return "";
+  }, [variant]);
+
   return (
     <button
-      className={`bg-blue-600 text-white cursor-pointer py-2 px-4 rounded-md hover:bg-blue-700 transition-colors ${
+      className={`cursor-pointer py-2 px-4 rounded-md transition-colors ${appearance} ${
         className || ""
       }${
         loading