diff --git a/src/app/(dashboard)/dashboard/users/add/page.tsx b/src/app/(dashboard)/dashboard/users/add/page.tsx
new file mode 100644
index 0000000..4eeefc5
--- /dev/null
+++ b/src/app/(dashboard)/dashboard/users/add/page.tsx
@@ -0,0 +1,38 @@
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import UsersAddForm from "@/components/users-add-form";
+
+export default function SettingsDisplayPage() {
+  return (
+    <ScrollArea className="h-[calc(100vh-53px)]">
+      <div className="flex-1 space-y-4  p-4 md:p-8 pt-6 w-full h-full flex justify-center items-center">
+        <Card className="max-w-[700px] w-full">
+          <CardHeader>
+            <CardTitle className="mb-4 font-bold text-xl">
+              Create User
+            </CardTitle>
+            <Separator />
+          </CardHeader>
+
+          <CardContent>
+            <UsersAddForm />
+          </CardContent>
+          {/* <CardFooter>
+          <Button className="w-full" size="lg">
+            Submit
+          </Button>
+        </CardFooter> */}
+        </Card>
+      </div>
+      <ScrollBar />
+    </ScrollArea>
+  );
+}
diff --git a/src/components/users-add-form.tsx b/src/components/users-add-form.tsx
new file mode 100644
index 0000000..ef97558
--- /dev/null
+++ b/src/components/users-add-form.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { toast } from "@/components/ui/use-toast";
+import { Input } from "./ui/input";
+
+const items = [
+  {
+    id: "ROLE_SUPER_ADMIN",
+    label: "ROLE_SUPER_ADMIN",
+  },
+  {
+    id: "ROLE_ADMIN",
+    label: "ROLE_ADMIN",
+  },
+  {
+    id: "ROLE_SYSADMIN",
+    label: "ROLE_SYSADMIN",
+  },
+  {
+    id: "ROLE_API",
+    label: "ROLE_API",
+  },
+  {
+    id: "ROLE_ORGANISATION_ADMIN",
+    label: "ROLE_ORGANISATION_ADMIN",
+  },
+  {
+    id: "ROLE_ASSISTANT",
+    label: "ROLE_ASSISTANT",
+  },
+  {
+    id: "ROLE_USER",
+    label: "ROLE_USER",
+  },
+] as const;
+
+const displayFormSchema = z.object({
+  fullName: z.string().trim().min(1, "Full Name is required."),
+  email: z.string().trim().email("Email is required."),
+  newPassword: z.string().trim().min(1, "Password is required."),
+  repeatPassword: z.string().trim().min(1, "Repeat the new password."),
+  roles: z.array(z.string()).refine((value) => value.some((item) => item), {
+    message: "You have to select at least one role.",
+  }),
+});
+
+type DisplayFormValues = z.infer<typeof displayFormSchema>;
+
+// This can come from your database or API.
+const defaultValues: Partial<DisplayFormValues> = {
+  fullName: "",
+  email: "",
+  roles: ["ROLE_USER"],
+};
+
+export default function UsersAddForm() {
+  const form = useForm<DisplayFormValues>({
+    resolver: zodResolver(displayFormSchema),
+    defaultValues,
+  });
+
+  function onSubmit(data: DisplayFormValues) {
+    if (data.newPassword !== data.repeatPassword) {
+      toast({
+        variant: "destructive",
+        title: "Password doesn't match!",
+      });
+      return;
+    }
+
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="fullName"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Full Name</FormLabel>
+              <FormControl>
+                <Input placeholder="Enter fullName..." {...field} />
+              </FormControl>
+              {/* <FormDescription>
+                This is your public display name. It can be your real name or a
+                pseudonym. You can only change this once every 30 days.
+              </FormDescription> */}
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input type="email" placeholder="Enter email..." {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="newPassword"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>New Password</FormLabel>
+              <FormControl>
+                <Input
+                  type="password"
+                  placeholder="Enter new password..."
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="repeatPassword"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Repeat Password</FormLabel>
+              <FormControl>
+                <Input
+                  type="password"
+                  placeholder="Repeat the new password..."
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="roles"
+          render={() => (
+            <FormItem>
+              <div className="mb-4">
+                <FormLabel className="text-base">Roles</FormLabel>
+                {/* <FormDescription>
+                  Select the items you want to display in the sidebar.
+                </FormDescription> */}
+              </div>
+              {items.map((item) => (
+                <FormField
+                  key={item.id}
+                  control={form.control}
+                  name="roles"
+                  render={({ field }) => {
+                    return (
+                      <FormItem
+                        key={item.id}
+                        className="flex flex-row items-start space-x-3 space-y-0"
+                      >
+                        <FormControl>
+                          <Checkbox
+                            checked={field.value?.includes(item.id)}
+                            onCheckedChange={(checked) => {
+                              return checked
+                                ? field.onChange([...field.value, item.id])
+                                : field.onChange(
+                                    field.value?.filter(
+                                      (value) => value !== item.id
+                                    )
+                                  );
+                            }}
+                          />
+                        </FormControl>
+                        <FormLabel className="font-normal">
+                          {item.label}
+                        </FormLabel>
+                      </FormItem>
+                    );
+                  }}
+                />
+              ))}
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <div className="flex items-center gap-4">
+          <Button className="w-full" size="lg">
+            Create
+          </Button>
+          <Button variant="secondary" className="w-full" size="lg">
+            Create and add another
+          </Button>
+        </div>
+      </form>
+    </Form>
+  );
+}
diff --git a/src/components/users-table/tools-table.tsx b/src/components/users-table/tools-table.tsx
index 54078dd..7099384 100644
--- a/src/components/users-table/tools-table.tsx
+++ b/src/components/users-table/tools-table.tsx
@@ -16,13 +16,11 @@ const ToolsTable = ({ users }: { users: User[] }) => {
       <div className="flex items-start justify-between">
         <Heading title={`Users (${users.length})`} description="Manage Users" />
         <Link
-          href="#"
+          href="/dashboard/users/add"
           className={buttonVariants({
             variant: "default",
-            // size: "sm",
           })}
-          // className="text-xs md:text-sm"
-          // onClick={() => router.push(`/admin-dashboard/tools/add`)}
+         
         >
           <Plus className="mr-2 h-4 w-4" /> Add User
         </Link>