diff --git a/src/components/auth/loginButton.tsx b/src/components/auth/loginButton.tsx
new file mode 100644
index 0000000..9c7c8ba
--- /dev/null
+++ b/src/components/auth/loginButton.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import Image from "next/image";
+import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
+import { Button } from "@/components/ui/button";
+
+export function LoginButton(props: { nextUrl?: string }) {
+  const supabase = createSupabaseClient();
+
+  const handleLogin = async () => {
+    await supabase.auth.signInWithOAuth({
+      provider: "google",
+      options: {
+        redirectTo: `${location.origin}/auth/callback?next=${props.nextUrl || ""}`,
+      },
+    });
+  };
+
+  return (
+    <Button className="bg-foreground gap-2 rounded-xl" onClick={handleLogin}>
+      <Image src={"/logo/google.svg"} width={30} height={30} alt={"Google"} />
+      Continue with Google
+    </Button>
+  );
+}
diff --git a/src/components/auth/logoutButton.tsx b/src/components/auth/logoutButton.tsx
new file mode 100644
index 0000000..d4cd348
--- /dev/null
+++ b/src/components/auth/logoutButton.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
+import { useRouter } from "next/navigation";
+
+export function LogoutButton() {
+  const supabase = createSupabaseClient();
+  const router = useRouter();
+
+  const handleLogout = async () => {
+    await supabase.auth.signOut();
+    router.push("/");
+  };
+
+  return <button onClick={handleLogout}>Logout</button>;
+}