diff --git a/auth.config.ts b/auth.config.ts
index 590c219..2ffd20f 100644
--- a/auth.config.ts
+++ b/auth.config.ts
@@ -16,7 +16,7 @@ declare module "next-auth" {
     firstName?: string | null;
     lastName?: string | null;
     address?: string | null;
-    phoneNumber?: string | null;
+    phoneNumber?: number | null;
   }
 }
 
diff --git a/src/app/_components/userpro/UserPro.tsx b/src/app/_components/userpro/UserPro.tsx
deleted file mode 100644
index 1cda9db..0000000
--- a/src/app/_components/userpro/UserPro.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-"use client";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { useSession } from "next-auth/react";
-import { Button } from "@/components/ui/button";
-
-import React from "react";
-
-export const UserProfile = () => {
-  const session = useSession();
-  console.log(session);
-
-  const user = session.data?.user;
-
-  return (
-    <>
-      <div
-        id="profile"
-        className="w-screen h-screen flex flex-col justify-center items-center  text-white"
-      >
-        <div className="backdrop-sepia bg-black border-2 w-[450px] h-[580px] ml-10 rounded-2xl flex flex-col items-center justify-between gap-5 p-10">
-          <Avatar className="w-[90px] h-[90px]">
-            <AvatarImage src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" />
-            <AvatarFallback>CN</AvatarFallback>
-          </Avatar>
-
-          <h1 className="text-3xl font-bold text-white">{user?.name}</h1>
-          <div className="flex justify-between flex-col w-[300px] p-2">
-            <div className="flex  justify-between">
-              <h1 className="text-xl font-bold">Email:</h1>
-              <h1 className="text-xl">{user?.email}</h1>
-            </div>
-            <div className="flex  justify-between">
-              <h1 className="text-xl font-bold">Phone:</h1>
-              <h1 className="text-xl">96750533</h1>
-            </div>
-            <div className="flex  justify-between">
-              <h1 className="text-xl font-bold">Address:</h1>
-              <h1 className="text-xl">Sapporo</h1>
-            </div>
-
-            <div className="flex flex-col gap-5">
-              <div className="flex flex-col gap-5"></div>
-            </div>
-          </div>
-
-          <Button className="bg-black w-40 text-white " variant="outline">
-            Button
-          </Button>
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/src/app/_components/userpro/UserProfile.tsx b/src/app/_components/userpro/UserProfile.tsx
new file mode 100644
index 0000000..825d72d
--- /dev/null
+++ b/src/app/_components/userpro/UserProfile.tsx
@@ -0,0 +1,197 @@
+"use client";
+import React, {
+  useState,
+  ChangeEvent,
+  FormEvent,
+  useTransition,
+  useEffect,
+} from "react";
+import { useSession } from "next-auth/react";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { Button } from "@/components/ui/button";
+import { editProfileSchema } from "@/lib/schema";
+import { Input } from "@/components/ui/input";
+
+type userDataType = {
+  firstName: string | undefined;
+  lastName: string | undefined;
+  phoneNumber: number | undefined;
+  address: string | undefined;
+  email: string | undefined;
+};
+
+function UserProfile() {
+  const session = useSession();
+  const [isPending, startTransition] = useTransition();
+  const user = session.data?.user;
+
+  const form = useForm<z.infer<typeof editProfileSchema>>({
+    resolver: zodResolver(editProfileSchema),
+    mode: "onChange",
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+      phoneNumber: 0,
+      address: "",
+      email: "",
+    },
+    reValidateMode: "onChange",
+    shouldUnregister: true,
+  });
+  console.log(user);
+
+  useEffect(() => {
+    if (user) {
+      startTransition(() => {
+        form.setValue("firstName", user?.firstName || "");
+        form.setValue("lastName", user?.lastName || "");
+        form.setValue("phoneNumber", user?.phoneNumber || 0);
+        form.setValue("address", user?.address || "");
+        form.setValue("email", user?.email || "");
+      });
+    }
+  }, [user]);
+
+  console.log(form.getValues());
+  const onSubmit = async (values: z.infer<typeof editProfileSchema>) => {
+    console.log(values);
+  };
+
+  return (
+    <div
+      className="flex flex-col items-center justify-center h-screen w-screen text-white "
+      id="cars"
+    >
+      <Form {...form}>
+        <form
+          className="space-y-6 relative w-full px-8 flex justify-center
+     
+          "
+          onSubmit={form.handleSubmit(onSubmit)}
+        >
+          <div className=" text-white w-96  ">
+            <FormField
+              control={form.control}
+              name="firstName"
+              render={({ field }) => (
+                <FormItem className="flex flex-col ">
+                  <FormLabel>Firstname</FormLabel>
+                  <FormControl>
+                    <Input
+                      disabled={isPending}
+                      {...field}
+                      placeholder={"Firstname"}
+                      type="text"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />{" "}
+            <FormField
+              control={form.control}
+              name="lastName"
+              render={({ field }) => (
+                <FormItem className="flex flex-col ">
+                  <FormLabel>Lastname</FormLabel>
+                  <FormControl>
+                    <Input
+                      // defaultValue={user?.firstName||""}
+                      disabled={isPending}
+                      {...field}
+                      placeholder="Lastname"
+                      type="text"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="phoneNumber"
+              render={({ field }) => (
+                <FormItem className="flex flex-col ">
+                  <FormLabel>PhoneNumber</FormLabel>
+                  <FormControl>
+                    <Input
+                      disabled={isPending}
+                      {...field}
+                      placeholder="Phonenumber"
+                      type="number"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="address"
+              render={({ field }) => (
+                <FormItem className="flex flex-col">
+                  <FormLabel>address</FormLabel>
+                  <FormControl>
+                    <Input
+                      disabled={isPending}
+                      {...field}
+                      placeholder="address"
+                      type="text"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem className="flex flex-col ">
+                  <FormLabel>email</FormLabel>
+                  <FormControl>
+                    <Input
+                      disabled={isPending}
+                      {...field}
+                      placeholder="email"
+                      type="text"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button
+              className="w-96 absolute mt-5"
+              size="lg"
+              type="submit"
+              disabled={isPending}
+            >
+              Submit
+            </Button>
+          </div>
+          {/* <Button
+            className="w-96 absolute"
+            size="lg"
+            type="submit"
+            disabled={isPending}
+          >
+            Submit
+          </Button> */}
+        </form>
+      </Form>
+    </div>
+  );
+}
+
+export default UserProfile;
diff --git a/src/app/userpro/page.tsx b/src/app/userpro/page.tsx
index 09d1e9e..e25bb1c 100644
--- a/src/app/userpro/page.tsx
+++ b/src/app/userpro/page.tsx
@@ -1,16 +1,16 @@
-import React from 'react'
-import { UserProfile } from '../_components/userpro/UserPro'
-import Header from '../_components/Header/Header'
-import Footer from '../_components/Footer/Footer'
- 
+import React from "react";
+import Header from "../_components/Header/Header";
+import Footer from "../_components/Footer/Footer";
+import UserProfile from "../_components/userpro/UserProfile";
+
 function userpro() {
   return (
-    <div>
-        <Header/>
-        <UserProfile/>
-      <Footer/>
-        </div>
-  )
+    <div className="w-screen h-screen">
+      <Header />
+      <UserProfile />
+      <Footer />
+    </div>
+  );
 }
- 
-export default userpro
+
+export default userpro;
diff --git a/src/lib/schema.tsx b/src/lib/schema.tsx
index 438f48a..65af742 100644
--- a/src/lib/schema.tsx
+++ b/src/lib/schema.tsx
@@ -84,3 +84,16 @@ export const NewCarSchema = z.object({
     message: "Must fill",
   }),
 });
+export const editProfileSchema = z.object({
+  firstName: z.string().min(1, {
+    message: "Must fill",
+  }),
+  lastName: z.string().min(1, {
+    message: "Must fill",
+  }),
+  phoneNumber: z.coerce.number().min(8, {
+    message: "Phone number must have 8 digits",
+  }),
+  email: z.string().email(),
+  address: z.string().optional(),
+});