diff --git a/src/app/auth/callback/route.ts b/src/app/auth/callback/route.ts
new file mode 100644
index 0000000..451854e
--- /dev/null
+++ b/src/app/auth/callback/route.ts
@@ -0,0 +1,24 @@
+import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request) {
+  const { searchParams, origin } = new URL(request.url);
+
+  const code = searchParams.get("code");
+
+  // if "next" is in param, use it in the redirect URL
+  const next = searchParams.get("next") ?? "/";
+
+  if (code) {
+    const supabase = createSupabaseClient();
+
+    const { error } = await supabase.auth.exchangeCodeForSession(code);
+
+    if (!error) {
+      return NextResponse.redirect(`${origin}${next}`);
+    }
+  }
+
+  // return the user to an error page with instructions
+  return NextResponse.redirect(`${origin}/auth/error`);
+}
diff --git a/src/app/auth/error/page.tsx b/src/app/auth/error/page.tsx
new file mode 100644
index 0000000..7552b02
--- /dev/null
+++ b/src/app/auth/error/page.tsx
@@ -0,0 +1,3 @@
+export default function AuthError() {
+  return <div>Authentication Error</div>;
+}
diff --git a/src/app/login/page.tsx b/src/app/auth/page.tsx
similarity index 73%
rename from src/app/login/page.tsx
rename to src/app/auth/page.tsx
index 597d993..f5f5e10 100644
--- a/src/app/login/page.tsx
+++ b/src/app/auth/page.tsx
@@ -2,6 +2,9 @@ import Image from "next/image";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardFooter, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 
+import { LoginButton } from "@/components/auth/loginButton";
+import { LogoutButton } from "@/components/auth/logoutButton";
+
 export default function Login() {
   return (
     <div
@@ -16,14 +19,8 @@ export default function Login() {
         </CardHeader>
         <CardContent className="flex flex-col gap-y-2 mx-28">
           <p className="self-center font-semibold text-slate-800">Continue With</p>
-          <Button className="bg-foreground gap-2 rounded-xl">
-            <Image src={"/logo/google.svg"} width={30} height={30} alt={"Google"} />
-            Continue with Google
-          </Button>
-          <Button className="gap-2 rounded-xl">
-            <Image src={"/logo/facebook.svg"} width={30} height={30} alt={"Google"} />
-            Continue with Facebook
-          </Button>
+          <LoginButton />
+          <LogoutButton />
         </CardContent>
         <CardFooter className="text-xs justify-center">
           By signing up, you agree to the Terms of Service and acknowledge you’ve read our Privacy Policy.