diff --git a/components/pages/home/LoginButton.tsx b/components/pages/home/LoginButton.tsx
index 91bd44b..10b2982 100644
--- a/components/pages/home/LoginButton.tsx
+++ b/components/pages/home/LoginButton.tsx
@@ -1,20 +1,23 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
-import { useSession } from "next-auth/react";
+import { signIn, signOut, useSession } from "next-auth/react";
 import Link from "next/link";
 
 export function LoginButton() {
   const { data: session } = useSession();
 
-  if (session || true) {
+  if (session) {
     return (
       <>
-        <Link href={"/panel"}>
+        <Link href="/panel">
           <Button variant="outline">continue</Button>
         </Link>
+        <Button variant="destructive" onClick={() => signOut()}>
+          log out
+        </Button>
         <img
-          src={`https://api.gifbox.me/file/posts/QF8HezSH-AtTM9hT4pKISu-foBzdRC4e.webp`}
+          src={`https://api.gifbox.me/file/posts/aYON6GqiqpwSpiZmAbJoOtw8tM2uYsEU.webp`}
           height={320}
         />
       </>
@@ -23,9 +26,9 @@ export function LoginButton() {
 
   return (
     <>
-      <Link href={"/panel"}>
-        <Button variant="outline">login with revolt sso</Button>
-      </Link>
+      <Button variant="outline" onClick={() => signIn()}>
+        login with revolt sso
+      </Button>
       <img
         src={`https://api.gifbox.me/file/posts/w7iUJfiyKA_zGkHN7Rr625WpaTHYgm4v.webp`}
         height={320}
diff --git a/middleware.js b/middleware.js
new file mode 100644
index 0000000..b0201c2
--- /dev/null
+++ b/middleware.js
@@ -0,0 +1,3 @@
+export { default } from "next-auth/middleware";
+
+export const config = { matcher: ["/panel"] };