diff --git a/app/components/addUserModel/addUserModal.tsx b/app/components/addUserModel/addUserModal.tsx
new file mode 100644
index 00000000..d6693a20
--- /dev/null
+++ b/app/components/addUserModel/addUserModal.tsx
@@ -0,0 +1,39 @@
+import clsx from "clsx";
+import { XIcon } from "lucide-react";
+
+import { useModal } from "../../context/modalContext";
+import { InputForm } from "../ui/formComponents/formComponent";
+import { UploadPicture } from "../ui/formComponents/uploadPicture";
+
+const AddUserModal = () => {
+  const { isOpen, handleClose } = useModal();
+  return (
+    <>
+      {isOpen && (
+        <div
+          className={clsx(
+            "fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50",
+            { "animate-pop-in": isOpen, "animate-pop-out": !isOpen },
+          )}
+        >
+          <div className="relative h-[514px] w-[422px] rounded border bg-white p-[43px] max-[530px]:w-[90%]">
+            <button
+              onClick={handleClose}
+              className="absolute right-2 top-2 rounded-full bg-red-500 p-1 text-white"
+              aria-label="Close"
+            >
+              <XIcon />
+            </button>
+            <h2 className="text-[18px] text-lg font-bold">Add new user</h2>
+            <p className="mb-4 mt-0 text-[12px]">Create New User</p>
+            <UploadPicture />
+            <InputForm />
+          </div>
+        </div>
+      )}
+      ;
+    </>
+  );
+};
+
+export default AddUserModal;
diff --git a/app/components/ui/form.tsx b/app/components/ui/form.tsx
index 86972146..43abe65a 100644
--- a/app/components/ui/form.tsx
+++ b/app/components/ui/form.tsx
@@ -1,3 +1,4 @@
+
 "use client";
 
 import * as LabelPrimitive from "@radix-ui/react-label";
@@ -5,6 +6,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { Label } from "app/components/ui/label";
 import { cn } from "app/lib/utils/cn";
 import * as React from "react";
+
 import {
   Controller,
   ControllerProps,
@@ -12,46 +14,51 @@ import {
   FieldValues,
   FormProvider,
   useFormContext,
-} from "react-hook-form";
 
-const Form = FormProvider;
+} from "react-hook-form"
+
+import { cn } from "app/lib/utils/cn"
+import { Label } from "app/components/ui/label"
+
+const Form = FormProvider
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 > = {
-  name: TName;
-};
+  name: TName
+}
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue,
-);
+  {} as FormFieldContextValue
+)
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 >({
-  ...properties
+  ...props
 }: ControllerProps<TFieldValues, TName>) => {
   return (
-    <FormFieldContext.Provider value={{ name: properties.name }}>
-      <Controller {...properties} />
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
     </FormFieldContext.Provider>
-  );
-};
+  )
+}
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
 
-  const fieldState = getFieldState(fieldContext.name, formState);
+  const fieldState = getFieldState(fieldContext.name, formState)
 
   if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
+    throw new Error("useFormField should be used within <FormField>")
   }
 
-  const { id } = itemContext;
+  const { id } = itemContext
+
 
   return {
     id,
@@ -60,113 +67,124 @@ const useFormField = () => {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
-  };
-};
+
+  }
+}
 
 type FormItemContextValue = {
-  id: string;
-};
+  id: string
+}
 
 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue,
-);
+  {} as FormItemContextValue
+)
+
 
 const FormItem = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
->(({ className, ...properties }, reference) => {
-  const id = React.useId();
+
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
 
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div
-        ref={reference}
-        className={cn("space-y-2", className)}
-        {...properties}
-      />
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
     </FormItemContext.Provider>
-  );
-});
-FormItem.displayName = "FormItem";
+  )
+})
+FormItem.displayName = "FormItem"
+
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...properties }, reference) => {
-  const { error, formItemId } = useFormField();
+
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
 
   return (
     <Label
-      ref={reference}
+      ref={ref}
       className={cn(error && "text-destructive", className)}
       htmlFor={formItemId}
-      {...properties}
+      {...props}
     />
-  );
-});
-FormLabel.displayName = "FormLabel";
+  )
+})
+FormLabel.displayName = "FormLabel"
+
 
 const FormControl = React.forwardRef<
   React.ElementRef<typeof Slot>,
   React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...properties }, reference) => {
-  const { error, formItemId, formDescriptionId, formMessageId } =
-    useFormField();
+
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
 
   return (
     <Slot
-      ref={reference}
+      ref={ref}
       id={formItemId}
       aria-describedby={
-        error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
       }
       aria-invalid={!!error}
-      {...properties}
+      {...props}
     />
-  );
-});
-FormControl.displayName = "FormControl";
+  )
+})
+FormControl.displayName = "FormControl"
+
 
 const FormDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...properties }, reference) => {
-  const { formDescriptionId } = useFormField();
+
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
 
   return (
     <p
-      ref={reference}
+      ref={ref}
       id={formDescriptionId}
       className={cn("text-sm text-muted-foreground", className)}
-      {...properties}
+      {...props}
     />
-  );
-});
-FormDescription.displayName = "FormDescription";
+  )
+})
+FormDescription.displayName = "FormDescription"
+
 
 const FormMessage = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...properties }, reference) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
+
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
 
   if (!body) {
-    return;
+    return null
+
   }
 
   return (
     <p
-      ref={reference}
+
+      ref={ref}
       id={formMessageId}
       className={cn("text-sm font-medium text-destructive", className)}
-      {...properties}
+      {...props}
     >
       {body}
     </p>
-  );
-});
-FormMessage.displayName = "FormMessage";
+  )
+})
+FormMessage.displayName = "FormMessage"
+
 
 export {
   useFormField,
@@ -177,4 +195,6 @@ export {
   FormDescription,
   FormMessage,
   FormField,
+
 };
+
diff --git a/app/components/ui/formComponents/form.module.css b/app/components/ui/formComponents/form.module.css
new file mode 100644
index 00000000..84d97bf6
--- /dev/null
+++ b/app/components/ui/formComponents/form.module.css
@@ -0,0 +1,12 @@
+/* InputForm.module.css */
+.placeholderCustom::placeholder {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    text-align: left;
+    color: #94A3B8;
+    ;
+  }
+  
+
+  
\ No newline at end of file
diff --git a/app/components/ui/formComponents/formComponent.tsx b/app/components/ui/formComponents/formComponent.tsx
new file mode 100644
index 00000000..27850cba
--- /dev/null
+++ b/app/components/ui/formComponents/formComponent.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import clsx from "clsx";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "~/components/ui/form";
+import { Input } from "~/components/ui/input";
+import { toast } from "~/components/ui/use-toast";
+import { Button } from "../button";
+import styles from "./form.module.css";
+import { FormSchema } from "./formSchema";
+
+export function InputForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      name: "",
+      email: "",
+      number: "",
+    },
+  });
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    console.log(data);
+    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, undefined, 2)}
+          </code>
+        </pre>
+      ),
+    });
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel
+                className={clsx({
+                  "text-red-500": form.formState.errors.name,
+                })}
+              >
+                Name
+              </FormLabel>
+              <FormControl>
+                <Input
+                  placeholder="e.g Joh Doe"
+                  {...field}
+                  className={clsx(`w-full ${styles.placholderCustom}`, {
+                    "border-red-500": form.formState.errors.name,
+                  })}
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel
+                className={clsx({
+                  "text-red-500": form.formState.errors.email,
+                })}
+              >
+                Email
+              </FormLabel>
+              <FormControl>
+                <Input
+                  placeholder="e.g johndoe@gmail.com"
+                  {...field}
+                  className={clsx(`w-full ${styles.placholderCustom}`, {
+                    "border-red-500": form.formState.errors.email,
+                  })}
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="number"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel
+                className={clsx({
+                  "text-red-500": form.formState.errors.number,
+                })}
+              >
+                Phone Number
+              </FormLabel>
+              <FormControl>
+                <Input
+                  placeholder="e.g 08123456789"
+                  {...field}
+                  className={clsx(`w-full ${styles.placholderCustom}`, {
+                    "border-red-500": form.formState.errors.number,
+                  })}
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+        <div className="flex pt-3">
+          <Button type="submit" className="ml-auto" >Add New User</Button>
+        </div>
+      </form>
+    </Form>
+  );
+}
diff --git a/app/components/ui/formComponents/formSchema.tsx b/app/components/ui/formComponents/formSchema.tsx
new file mode 100644
index 00000000..dc4560d3
--- /dev/null
+++ b/app/components/ui/formComponents/formSchema.tsx
@@ -0,0 +1,8 @@
+import { z } from "zod";
+
+const phoneRegex = new RegExp(/^(\+?[\d\s]+)?(\d{3}|\(?\d+\))?(-?\s?\d)+$/);
+export const FormSchema = z.object({
+  name: z.string().min(2),
+  email: z.string().email(),
+  number: z.string().regex(phoneRegex, "Invalid Number!"),
+});
diff --git a/app/components/ui/formComponents/formSubmit.tsx b/app/components/ui/formComponents/formSubmit.tsx
new file mode 100644
index 00000000..c0bbf843
--- /dev/null
+++ b/app/components/ui/formComponents/formSubmit.tsx
@@ -0,0 +1,16 @@
+import z from "zod";
+
+import { FormSchema } from "./formSchema";
+
+import { toast } from "./use-toast"
+
+export function submit(data: z.infer<typeof FormSchema>) {
+   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>
+    ),
+  })
+}
diff --git a/app/components/ui/formComponents/handleImageUpload.tsx b/app/components/ui/formComponents/handleImageUpload.tsx
new file mode 100644
index 00000000..d77a316d
--- /dev/null
+++ b/app/components/ui/formComponents/handleImageUpload.tsx
@@ -0,0 +1,15 @@
+import { ChangeEvent } from "react";
+
+export const handleImageUpload = (
+  event: ChangeEvent<HTMLInputElement>,
+  setBackgroundImage: (image: string | null) => void,
+) => {
+  const file = event.target.files?.[0];
+  if (file && file.type.startsWith("image/")) {
+    const reader = new FileReader();
+    reader.addEventListener("load", () => {
+      setBackgroundImage(reader.result as string);
+    });
+    reader.readAsDataURL(file);
+  }
+};
diff --git a/app/components/ui/formComponents/uploadPicture.tsx b/app/components/ui/formComponents/uploadPicture.tsx
new file mode 100644
index 00000000..fd551e28
--- /dev/null
+++ b/app/components/ui/formComponents/uploadPicture.tsx
@@ -0,0 +1,46 @@
+import clsx from "clsx";
+import { ChangeEvent, useState } from "react";
+
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { handleImageUpload } from "./handleImageUpload";
+
+export function UploadPicture() {
+  const [backgroundImage, setBackgroundImage] = useState<
+    string | null | undefined
+  >();
+  return (
+    <div className="mb-3 flex items-center gap-[13px]">
+      <div
+        className={clsx(
+          "image h-[59px] w-[59px] rounded-full bg-[#D9D9D9] bg-cover bg-center bg-no-repeat",
+          {
+            "image-background": backgroundImage,
+          },
+        )}
+        style={
+          backgroundImage ? { backgroundImage: `url(${backgroundImage})` } : {}
+        }
+      ></div>
+      <div className="flex flex-col gap-1">
+        <Label>Upload Picture</Label>
+        <Label
+          htmlFor="picture"
+          className="cursor-pointer text-xs text-orange-500"
+        >
+          Click to Upload
+        </Label>
+        <Input
+          id="picture"
+          type="file"
+          accept="image/*"
+          hidden
+          className="hidden"
+          onChange={(event: ChangeEvent<HTMLInputElement>) =>
+            handleImageUpload(event, setBackgroundImage)
+          }
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/ui/toast.tsx b/app/components/ui/toast.tsx
new file mode 100644
index 00000000..33a35698
--- /dev/null
+++ b/app/components/ui/toast.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "app/lib/utils/cn"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}
diff --git a/app/components/ui/toaster.tsx b/app/components/ui/toaster.tsx
new file mode 100644
index 00000000..69aea1f8
--- /dev/null
+++ b/app/components/ui/toaster.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "app/components/ui/toast"
+import { useToast } from "app/components/ui/use-toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
diff --git a/app/components/ui/use-toast.ts b/app/components/ui/use-toast.ts
new file mode 100644
index 00000000..8a1df22e
--- /dev/null
+++ b/app/components/ui/use-toast.ts
@@ -0,0 +1,194 @@
+"use client"
+
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "app/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }
diff --git a/app/context/modalContext.tsx b/app/context/modalContext.tsx
new file mode 100644
index 00000000..1ea2383c
--- /dev/null
+++ b/app/context/modalContext.tsx
@@ -0,0 +1,33 @@
+// app/context/ModalContext.tsx
+import { createContext, ReactNode, useContext, useState } from "react";
+
+interface ModalContextProperties {
+  isOpen: boolean;
+  handleOpen: () => void;
+  handleClose: () => void;
+}
+
+const ModalContext = createContext<ModalContextProperties | undefined>(
+  undefined,
+);
+
+export const ModalProvider = ({ children }: { children: ReactNode }) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const handleOpen = () => setIsOpen(true);
+  const handleClose = () => setIsOpen(false);
+
+  return (
+    <ModalContext.Provider value={{ isOpen, handleOpen, handleClose }}>
+      {children}
+    </ModalContext.Provider>
+  );
+};
+
+export const useModal = () => {
+  const context = useContext(ModalContext);
+  if (context === undefined) {
+    throw new Error("useModal must be used within a ModalProvider");
+  }
+  return context;
+};
diff --git a/app/root.tsx b/app/root.tsx
index 4cca3357..14a7c9a9 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -9,6 +9,13 @@ import {
 } from "@remix-run/react";
 import type { ReactNode } from "react";
 
+
+
+ import FooterLight from "./components/ui/footerLight";
+import { AdminSideNavBar } from "./components/SuperAdminSideBar/SuperAdminSideNavBar";
+import { ModalProvider } from "./context/modalContext";
+import { AdminSideNavBar } from "./components/SuperAdminSideBar/SuperAdminSideNavBar";
+
 import styles from "./styles/global.css?url";
 
 export const links: LinksFunction = () => [
@@ -27,6 +34,15 @@ export function Layout({ children }: { children: ReactNode }) {
       </head>
       <body>
         <div className="flex">
+
+
+          <main className="flex-1">
+            {children}
+            {/* <FooterLight /> */}
+          </main>
+          ,
+          <AdminSideNavBar />
+
           <main className="flex-1">{children}</main>,
           <ScrollRestoration />
           <Scripts />
@@ -37,5 +53,9 @@ export function Layout({ children }: { children: ReactNode }) {
 }
 
 export default function App() {
-  return <Outlet />;
+  return (
+    <ModalProvider>
+      <Outlet />;
+    </ModalProvider>
+  );
 }
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 2f45d32a..63785dc3 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -1,5 +1,20 @@
 import type { MetaFunction } from "@remix-run/node";
+import { Link } from "@remix-run/react";
 
+
+import { useState } from "react";
+
+import AddUserModal from "~/components/addUserModel/addUserModal";
+import BlogPost from "~/components/BlogPost";
+import HeroSection from "~/components/HeroSection";
+import { Button } from "~/components/ui/button";
+import CardPlatform from "~/components/ui/card/card-platform";
+import Footer from "~/components/ui/footer";
+import Header from "~/components/ui/header";
+import OtpAuth from "~/components/ui/otp/OtpAuth";
+import { useModal } from "~/context/modalContext";
+
+import { Input } from "~/types/otpauth";
 import FindSection from "~/components/pages/home/FindSection";
 import HeroSection from "~/components/pages/home/HeroSection";
 import HowSection from "~/components/pages/home/HowSection";
@@ -14,7 +29,87 @@ export const meta: MetaFunction = () => {
 };
 
 export default function Index() {
+  const [openModal, setOpenModal] = useState(false);
+  const { handleOpen } = useModal();
   return (
+
+    <div className="p-4 font-sans">
+      <h1 className="text-3xl">Welcome to Remix</h1>
+      <ul className="mt-4 list-disc space-y-2 pl-6">
+        <li>
+          <a
+            className="text-blue-700 underline visited:text-purple-900"
+            target="_blank"
+            href="https://remix.run/start/quickstart"
+            rel="noreferrer"
+          >
+            5m Quick Start
+          </a>
+        </li>
+        <li>
+          <a
+            className="text-blue-700 underline visited:text-purple-900"
+            target="_blank"
+            href="https://remix.run/start/tutorial"
+            rel="noreferrer"
+          >
+            30m Tutorial
+          </a>
+        </li>
+        <Button>Hello</Button>
+        <div>
+          <Button onClick={() => setOpenModal(true)}>Open OTP modal</Button>
+        </div>
+        <div className="p-2">
+          <CardPlatform
+            logo="/images/g-drive-icon.svg"
+            heading="Drive"
+            description="Store, share, and collaborate on documents and files securely"
+            containerClassName="max-w-[341px]"
+          />
+        </div>
+        <li>
+          <a
+            className="text-blue-700 underline visited:text-purple-900"
+            target="_blank"
+            href="https://remix.run/docs"
+            rel="noreferrer"
+          >
+            Remix Docs
+          </a>
+        </li>
+        <li>
+          <Link
+            className="text-blue-700 underline visited:text-purple-900"
+            to="/magic-success"
+          >
+            Magic Link Login Success
+          </Link>
+        </li>
+      </ul>
+      <OtpAuth
+        isModalOpen={openModal}
+        setIsModalOpen={() => setOpenModal(!openModal)}
+        inputs={[
+          { name: "input1", value: "" },
+          { name: "input1", value: "" },
+          { name: "input1", value: "" },
+          { name: "input1", value: "" },
+          { name: "input1", value: "" },
+          { name: "input1", value: "" },
+        ]}
+        handleSubmit={handleSubmit}
+      />
+      {/* ADDED THE MODAL HERE FOR TESTING USER PAGE NOT AVAILABLE, REMOVE AND ASSIGN TO THE PROPER PAGE */}
+      <AddUserModal />
+      {/* MODAL OPEN BUTTON< PLEASE REMOVE AND ASSIGN TO THE PROPER PAGE*/}
+      <button
+        onClick={handleOpen}
+        className="rounded bg-orange-500 px-4 py-2 text-white"
+      >
+        Add New User
+      </button>
+    </div>
     <>
       <HeroSection />
       <UsersSection />
diff --git a/package.json b/package.json
index f406b075..41420480 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.1",
     "@react-email/components": "^0.0.21",
     "@remix-run/css-bundle": "^2.10.3",
     "@remix-run/node": "^2.10.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 42d896a4..74e347f9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@heroicons/react':
+        specifier: ^2.1.5
+        version: 2.1.5(react@18.3.1)
       '@hookform/resolvers':
         specifier: ^3.9.0
         version: 3.9.0(react-hook-form@7.52.1(react@18.3.1))
@@ -38,6 +41,9 @@ importers:
       '@radix-ui/react-tabs':
         specifier: ^1.1.0
         version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toast':
+        specifier: ^1.2.1
+        version: 1.2.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@react-email/components':
         specifier: ^0.0.21
         version: 0.0.21(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -798,6 +804,11 @@ packages:
   '@floating-ui/utils@0.2.4':
     resolution: {integrity: sha512-dWO2pw8hhi+WrXq1YJy2yCuWoL20PddgGaqTgVe4cOS9Q6qklXCiA1tJEqX6BEwRNSCP84/afac9hd4MS+zEUA==}
 
+  '@heroicons/react@2.1.5':
+    resolution: {integrity: sha512-FuzFN+BsHa+7OxbvAERtgBTNeZpUjgM/MIizfVkSCL2/edriN0Hx/DWRCR//aPYwO5QX/YlgLGXk+E3PcfZwjA==}
+    peerDependencies:
+      react: '>= 16'
+
   '@hookform/resolvers@3.9.0':
     resolution: {integrity: sha512-bU0Gr4EepJ/EQsH/IwEzYLsT/PEj5C0ynLQ4m+GSHS+xKH4TfSelhluTgOaoc4kA5s7eCsQbM4wvZLzELmWzUg==}
     peerDependencies:
@@ -1274,6 +1285,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-toast@1.2.1':
+    resolution: {integrity: sha512-5trl7piMXcZiCq7MW6r8YYmu0bK5qDpTWz+FdEPdKyft2UixkspheYbjbrLXVN5NGKHFbOP7lm8eD0biiSqZqg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-toggle-group@1.1.0':
     resolution: {integrity: sha512-PpTJV68dZU2oqqgq75Uzto5o/XfOVgkrJ9rulVmfTKxWp3HfUjHE6CP/WLRR4AzPX9HWxw7vFow2me85Yu+Naw==}
     peerDependencies:
@@ -5781,6 +5805,10 @@ snapshots:
 
   '@floating-ui/utils@0.2.4': {}
 
+  '@heroicons/react@2.1.5(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+
   '@hookform/resolvers@3.9.0(react-hook-form@7.52.1(react@18.3.1))':
     dependencies:
       react-hook-form: 7.52.1(react@18.3.1)
@@ -6443,6 +6471,26 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-toast@1.2.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.3.3)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-toggle-group@1.1.0(@types/react-dom@18.3.0)(@types/react@18.2.47)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.0
diff --git a/tailwind.config.js b/tailwind.config.js
index 1dd3769b..85d696e2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -75,10 +75,20 @@ const tailwindConfig = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
+        popIn: {
+          "0%": { transform: "scale(0.5)", opacity: "0" },
+          "100%": { transform: "scale(1)", opacity: "1" },
+        },
+        popOut: {
+          "0%": { transform: "scale(1)", opacity: "1" },
+          "100%": { transform: "scale(0.5)", opacity: "0" },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        "pop-in": "popIn 0.5s ease-out",
+        "pop-out": "popOut 0.5s ease-in",
       },
     },
   },
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0869d646..0055d22f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -14,6 +14,7 @@ const config = {
       center: true,
       padding: "2rem",
       screens: {
+        "1sm": "368px",
         "2xl": "1400px",
       },
     },
@@ -112,10 +113,23 @@ const config = {
           from: { height: "var(--radix-accordion-content-height)" },
           to: { height: "0" },
         },
+        popIn: {
+          "0%": { transform: "scale(0.5)", opacity: "0" },
+          "100%": { transform: "scale(1)", opacity: "1" },
+        },
+        popOut: {
+          "0%": { transform: "scale(1)", opacity: "1" },
+          "100%": { transform: "scale(0.5)", opacity: "0" },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        "pop-in": "popIn 0.5s ease-out",
+        "pop-out": "popOut 0.5s ease-in",
+      },
+      fontFamily: {
+        inter: ["Inter", "sans-serif"],
       },
     },
   },