diff --git a/components/custom/auth-form.tsx b/components/custom/auth-form.tsx
index 08610ff..2bbd08d 100644
--- a/components/custom/auth-form.tsx
+++ b/components/custom/auth-form.tsx
@@ -1,17 +1,19 @@
-import { Input } from "../ui/input";
-import { Label } from "../ui/label";
+import Form from 'next/form';
+
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
 
 export function AuthForm({
   action,
   children,
-  defaultEmail = "",
+  defaultEmail = '',
 }: {
   action: any;
   children: React.ReactNode;
   defaultEmail?: string;
 }) {
   return (
-    <form action={action} className="flex flex-col gap-4 px-4 sm:px-16">
+    <Form action={action} className="flex flex-col gap-4 px-4 sm:px-16">
       <div className="flex flex-col gap-2">
         <Label
           htmlFor="email"
@@ -48,6 +50,6 @@ export function AuthForm({
       </div>
 
       {children}
-    </form>
+    </Form>
   );
 }
diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx
index 452a1ae..3539e6e 100644
--- a/components/custom/navbar.tsx
+++ b/components/custom/navbar.tsx
@@ -1,16 +1,17 @@
-import Link from "next/link";
+import Form from 'next/form';
+import Link from 'next/link';
 
-import { auth, signOut } from "@/app/(auth)/auth";
+import { auth, signOut } from '@/app/(auth)/auth';
 
-import { History } from "./history";
-import { ThemeToggle } from "./theme-toggle";
-import { Button } from "../ui/button";
+import { History } from './history';
+import { ThemeToggle } from './theme-toggle';
+import { Button } from '../ui/button';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "../ui/dropdown-menu";
+} from '../ui/dropdown-menu';
 
 export const Navbar = async () => {
   let session = await auth();
@@ -40,13 +41,13 @@ export const Navbar = async () => {
                 <ThemeToggle />
               </DropdownMenuItem>
               <DropdownMenuItem className="p-1 z-50">
-                <form
+                <Form
                   className="w-full"
                   action={async () => {
-                    "use server";
+                    'use server';
 
                     await signOut({
-                      redirectTo: "/",
+                      redirectTo: '/',
                     });
                   }}
                 >
@@ -56,7 +57,7 @@ export const Navbar = async () => {
                   >
                     Sign out
                   </button>
-                </form>
+                </Form>
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>