diff --git a/components/login.tsx b/components/login.tsx
new file mode 100644
index 0000000..a82ba5e
--- /dev/null
+++ b/components/login.tsx
@@ -0,0 +1,203 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { cn } from "@/lib/utils";
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
+
+import Link from "next/link";
+
+import { IconBrandGithub } from "@tabler/icons-react";
+import Password from "./password";
+import { Button } from "./ui/button";
+import { Logo } from "./Logo";
+
+const formSchema = z.object({
+  email: z
+    .string({
+      message: "Please enter email",
+    })
+    .email("Please enter valid email")
+    .min(1, "Please enter email"),
+  password: z
+    .string({
+      message: "Please enter password",
+    })
+    .min(1, "Please enter password"),
+});
+
+export type LoginUser = z.infer<typeof formSchema>;
+
+export function LoginForm() {
+  const form = useForm<LoginUser>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  async function onSubmit(_values: LoginUser) {
+    try {
+      // Handle login logic here
+    } catch {
+      // Handle error silently
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <div className="flex items-center w-full justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
+        <div className="mx-auto w-full max-w-md">
+          <div>
+            <div className="flex">
+              <Logo />
+            </div>
+            <h2 className="mt-8 text-2xl font-bold leading-9 tracking-tight text-black dark:text-white">
+              Sign in to your account
+            </h2>
+          </div>
+
+          <div className="mt-10">
+            <div>
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="space-y-6"
+              >
+                <div>
+                  <FormField
+                    control={form.control}
+                    name="email"
+                    render={({ field }) => (
+                      <FormItem>
+                        <label
+                          htmlFor="email"
+                          className="block text-sm font-medium leading-6 text-neutral-700 dark:text-muted-dark"
+                        >
+                          Email address
+                        </label>
+                        <FormControl>
+                          <div className="mt-2">
+                            <input
+                              id="email"
+                              type="email"
+                              placeholder="hello@johndoe.com"
+                              className="block w-full bg-white dark:bg-neutral-900 px-4 rounded-md border-0 py-1.5  shadow-aceternity text-black placeholder:text-gray-400 focus:ring-2 focus:ring-neutral-400 focus:outline-none sm:text-sm sm:leading-6 dark:text-white"
+                              {...field}
+                            />
+                          </div>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+
+                <div>
+                  <FormField
+                    control={form.control}
+                    name="password"
+                    render={({ field }) => (
+                      <FormItem>
+                        <label
+                          htmlFor="password"
+                          className="block text-sm font-medium leading-6 text-neutral-700 dark:text-muted-dark"
+                        >
+                          Password
+                        </label>
+                        <FormControl>
+                          <div className="mt-2">
+                            <Password
+                              id="password"
+                              type="password"
+                              placeholder="••••••••"
+                              className="block w-full bg-white dark:bg-neutral-900 px-4 rounded-md border-0 py-1.5  shadow-aceternity text-black placeholder:text-gray-400 focus:ring-2 focus:ring-neutral-400 focus:outline-none sm:text-sm sm:leading-6 dark:text-white"
+                              {...field}
+                            />
+                          </div>
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+                </div>
+
+                <div className="flex items-center justify-between">
+                  <div className="text-sm leading-6">
+                    <Link href="#" className="font-normal text-neutral-500">
+                      Forgot password?
+                    </Link>
+                  </div>
+                </div>
+
+                <div>
+                  <Button className="w-full">Sign in</Button>
+                  <p
+                    className={cn(
+                      "text-sm text-neutral-500 text-center mt-4 text-muted dark:text-muted-dark",
+                    )}
+                  >
+                    Don&apos; have an account?{" "}
+                    <Link href="/signup" className="text-black dark:text-white">
+                      Sign up
+                    </Link>
+                  </p>
+                </div>
+              </form>
+            </div>
+
+            <div className="mt-10">
+              <div className="relative">
+                <div
+                  className="absolute inset-0 flex items-center"
+                  aria-hidden="true"
+                >
+                  <div className="w-full border-t border-neutral-300 dark:border-neutral-700" />
+                </div>
+                <div className="relative flex justify-center text-sm font-medium leading-6">
+                  <span className="bg-white px-6 text-neutral-400 dark:text-neutral-500 dark:bg-black">
+                    Or continue with
+                  </span>
+                </div>
+              </div>
+
+              <div className="mt-6 w-full flex items-center justify-center">
+                <Button onClick={() => {}} className="w-full py-1.5">
+                  <IconBrandGithub className="h-5 w-5" />
+                  <span className="text-sm font-semibold leading-6">
+                    Github
+                  </span>
+                </Button>
+              </div>
+
+              <p className="text-neutral-600 dark:text-neutral-400 text-sm text-center mt-8">
+                By clicking on sign in, you agree to our{" "}
+                <Link
+                  href="#"
+                  className="text-neutral-500 dark:text-neutral-300"
+                >
+                  Terms of Service
+                </Link>{" "}
+                and{" "}
+                <Link
+                  href="#"
+                  className="text-neutral-500 dark:text-neutral-300"
+                >
+                  Privacy Policy
+                </Link>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Form>
+  );
+}