diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md
index 35b5167..8b4fcfd 100644
--- a/.github/CODE_OF_CONDUCT.md
+++ b/.github/CODE_OF_CONDUCT.md
@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the overall
+- Focusing on what is best not just for us as individuals, but for the overall
   community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or advances of
+- The use of sexualized language or imagery, and sexual attention or advances of
   any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email address,
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email address,
   without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
diff --git a/.github/REQUEST_TEMPLATE.md b/.github/REQUEST_TEMPLATE.md
deleted file mode 100644
index cef1849..0000000
--- a/.github/REQUEST_TEMPLATE.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Thanks for creating this pull request 🤗
-
-Please make sure that the pull request is limited to one type (docs, feature, etc.) and keep it as small as possible. You can open multiple prs instead of opening a huge one.
-
-If this pull request closes an issue, please mention the issue number below.
-
-Closes # <!-- Issue # here -->
-
-## 📑 Description
-
-<!-- Add a brief description of the pr -->
-
-You can also choose to add a list of changes and if they have been completed or not by using the markdown to-do list syntax
-
-- [ ] Not Completed
-- [ x ] Completed
-
-## ✅ Checks
-
-<!-- Make sure your pr passes the CI checks and do check the following fields as needed - -->
-
-- [ ] My pull request adheres to the code style of this project
-- [ ] My code requires changes to the documentation
-- [ ] I have updated the documentation as required
-- [ ] All the tests have passed
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index fb8a9e5..cef1849 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -1,28 +1,25 @@
-<!--- Provide a general summary of your changes in the Title above -->
-
-## Description
-<!--- Describe your changes in detail -->
-
-## Motivation and Context
-<!--- Why is this change required? What problem does it solve? -->
-<!--- If it fixes an open issue, please link to the issue here. -->
-
-## How has this been tested?
-<!--- Please describe in detail how you tested your changes. -->
-<!--- Include details of your testing environment, tests ran to see how -->
-<!--- your change affects other areas of the code, etc. -->
-
-## Screenshots (if appropriate):
-
-## Types of changes
-<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
-- [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] New feature (non-breaking change which adds functionality)
-- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
-
-## Checklist:
-<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
-<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
-- [ ] My code follows the code style of this project.
-- [ ] My change requires a change to the documentation.
-- [ ] I have updated the documentation accordingly.
+# Thanks for creating this pull request 🤗
+
+Please make sure that the pull request is limited to one type (docs, feature, etc.) and keep it as small as possible. You can open multiple prs instead of opening a huge one.
+
+If this pull request closes an issue, please mention the issue number below.
+
+Closes # <!-- Issue # here -->
+
+## 📑 Description
+
+<!-- Add a brief description of the pr -->
+
+You can also choose to add a list of changes and if they have been completed or not by using the markdown to-do list syntax
+
+- [ ] Not Completed
+- [ x ] Completed
+
+## ✅ Checks
+
+<!-- Make sure your pr passes the CI checks and do check the following fields as needed - -->
+
+- [ ] My pull request adheres to the code style of this project
+- [ ] My code requires changes to the documentation
+- [ ] I have updated the documentation as required
+- [ ] All the tests have passed
diff --git a/.github/workflows/lint_chacks.yml b/.github/workflows/lint_chacks.yml
index 66885b2..f63cbca 100644
--- a/.github/workflows/lint_chacks.yml
+++ b/.github/workflows/lint_chacks.yml
@@ -16,18 +16,18 @@ jobs:
       - name: Setup Node.js 🫡
         uses: actions/setup-node@v2
         with:
-          node-version: "20.9.0"
+          node-version: "20.9.0" # Use a specific Node.js version, adjust as needed
 
       - name: Install Dependencies ☘️
-        run: |
-          npm install
+        run: npm i # Use npm i for faster and more consistent installs
 
-      - name: lint Chacks ✅
+      - name: Tests and Linting ✅
         run: |
-          npm run lint
+          npm run format  # Run Prettier to format code
+          npm run lint    # Run linting checks
+        # If any of the above steps fail, the workflow will stop
 
-      - name: production build ✨
-        run: |
-          npm run build
+      - name: Production build ✨
+        run: npm run build
         env:
-          GENERATIVE_API_KEY: ${{ secrets.GENERATIVE_API_KEY }}
\ No newline at end of file
+          GENERATIVE_API_KEY: ${{ secrets.GENERATIVE_API_KEY }}
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..c4e51d7
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,5 @@
+# Ignore artifacts:
+
+.next
+.vercel
+node_modules
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1 @@
+{}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index a58c77c..f5b66ae 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -36,5 +36,6 @@
     "glassit.step": 500,
     // "bitoAI.codeCompletion.enableCommentToCode": true,
     // "bitoAI.codeCompletion.enableAutoCompletion": true,
-    "cmake.options.statusBarVisibility": "hidden"
+    "cmake.options.statusBarVisibility": "hidden",
+    "editor.cursorBlinking": "smooth"
 }
\ No newline at end of file
diff --git a/actions/admin.ts b/actions/admin.ts
index bf05b08..72c78dc 100644
--- a/actions/admin.ts
+++ b/actions/admin.ts
@@ -10,5 +10,5 @@ export const admin = async () => {
     return { success: "Allowed Server Action!" };
   }
 
-  return { error: "Forbidden Server Action!" }
+  return { error: "Forbidden Server Action!" };
 };
diff --git a/actions/login.ts b/actions/login.ts
index 1791ec3..792d1a5 100644
--- a/actions/login.ts
+++ b/actions/login.ts
@@ -18,7 +18,7 @@ import { getTwoFactorConfirmationByUserId } from "@/data/two-factor-confirmation
 
 export const login = async (
   values: z.infer<typeof LoginSchema>,
-  callbackUrl?: string | null
+  callbackUrl?: string | null,
 ) => {
   const validatedFields = LoginSchema.safeParse(values);
 
@@ -36,12 +36,12 @@ export const login = async (
 
   if (!existingUser.emailVerified) {
     const verificationToken = await generateVerificationToken(
-      existingUser.email
+      existingUser.email,
     );
 
     await sendVerificationEmail(
       verificationToken.email,
-      verificationToken.token
+      verificationToken.token,
     );
 
     return { success: "Confirmation email sent!" };
@@ -70,7 +70,7 @@ export const login = async (
       });
 
       const existingConfirmation = await getTwoFactorConfirmationByUserId(
-        existingUser.id
+        existingUser.id,
       );
 
       if (existingConfirmation) {
diff --git a/actions/new-password.ts b/actions/new-password.ts
index b032d4e..06d4d76 100644
--- a/actions/new-password.ts
+++ b/actions/new-password.ts
@@ -9,7 +9,7 @@ import { getUserByEmail } from "@/data/user";
 import { db } from "@/lib/db";
 
 export const newPassword = async (
-  values: z.infer<typeof NewPasswordSchema> ,
+  values: z.infer<typeof NewPasswordSchema>,
   token?: string | null,
 ) => {
   if (!token) {
@@ -39,7 +39,7 @@ export const newPassword = async (
   const existingUser = await getUserByEmail(existingToken.email);
 
   if (!existingUser) {
-    return { error: "Email does not exist!" }
+    return { error: "Email does not exist!" };
   }
 
   const hashedPassword = await bcrypt.hash(password, 10);
@@ -50,7 +50,7 @@ export const newPassword = async (
   });
 
   await db.passwordResetToken.delete({
-    where: { id: existingToken.id }
+    where: { id: existingToken.id },
   });
 
   return { success: "Password updated!" };
diff --git a/actions/repo/branchCount.ts b/actions/repo/branchCount.ts
index 2a9fe6b..74eba53 100644
--- a/actions/repo/branchCount.ts
+++ b/actions/repo/branchCount.ts
@@ -13,6 +13,6 @@ export const fetchrepo = async (username: string, repository: string) => {
       author: username,
     },
   });
-  console.log(repo)
+  console.log(repo);
   return { repo: repo };
 };
diff --git a/actions/repo/create.ts b/actions/repo/create.ts
index 88ca92d..8fd2ef5 100644
--- a/actions/repo/create.ts
+++ b/actions/repo/create.ts
@@ -8,7 +8,7 @@ import { User } from "@prisma/client";
 
 export const create = async (
   values: z.infer<typeof RepoSchema>,
-  user: User
+  user: User,
 ) => {
   const validatedFields = RepoSchema.safeParse(values);
 
@@ -28,7 +28,7 @@ export const create = async (
     },
   });
 
-  console.log(existingRepo);
+  // console.log(existingRepo);
 
   if (existingRepo) {
     return { error: "Repository already exist with this name!" };
diff --git a/actions/repo/fetch.ts b/actions/repo/fetch.ts
index 7fafae5..e2e9fbd 100644
--- a/actions/repo/fetch.ts
+++ b/actions/repo/fetch.ts
@@ -6,7 +6,7 @@ import { User } from "@prisma/client";
 export const fetchRepo = async (
   username: string,
   repository: string,
-  user?: User | null
+  user?: User | null,
 ) => {
   if (!username || !repository) {
     return { error: "Invalid user or repository!" };
diff --git a/actions/reset.ts b/actions/reset.ts
index 79e6a53..370ed92 100644
--- a/actions/reset.ts
+++ b/actions/reset.ts
@@ -29,4 +29,4 @@ export const reset = async (values: z.infer<typeof ResetSchema>) => {
   );
 
   return { success: "Reset email sent!" };
-}
\ No newline at end of file
+};
diff --git a/actions/settings.ts b/actions/settings.ts
index a092724..e4804d2 100644
--- a/actions/settings.ts
+++ b/actions/settings.ts
@@ -11,19 +11,17 @@ import { currentUser } from "@/lib/auth";
 import { generateVerificationToken } from "@/lib/tokens";
 import { sendVerificationEmail } from "@/lib/mail";
 
-export const settings = async (
-  values: z.infer<typeof SettingsSchema>
-) => {
+export const settings = async (values: z.infer<typeof SettingsSchema>) => {
   const user = await currentUser();
 
   if (!user || !user.id) {
-    return { error: "Unauthorized" }
+    return { error: "Unauthorized" };
   }
 
   const dbUser = await getUserById(user.id);
 
   if (!dbUser) {
-    return { error: "Unauthorized" }
+    return { error: "Unauthorized" };
   }
 
   if (user.isOAuth) {
@@ -37,12 +35,10 @@ export const settings = async (
     const existingUser = await getUserByEmail(values.email);
 
     if (existingUser && existingUser.id !== user.id) {
-      return { error: "Email already in use!" }
+      return { error: "Email already in use!" };
     }
 
-    const verificationToken = await generateVerificationToken(
-      values.email
-    );
+    const verificationToken = await generateVerificationToken(values.email);
     await sendVerificationEmail(
       verificationToken.email,
       verificationToken.token,
@@ -61,10 +57,7 @@ export const settings = async (
       return { error: "Incorrect password!" };
     }
 
-    const hashedPassword = await bcrypt.hash(
-      values.newPassword,
-      10,
-    );
+    const hashedPassword = await bcrypt.hash(values.newPassword, 10);
     values.password = hashedPassword;
     values.newPassword = undefined;
   }
@@ -73,7 +66,7 @@ export const settings = async (
     where: { id: dbUser.id },
     data: {
       ...values,
-    }
+    },
   });
 
   update({
@@ -82,8 +75,8 @@ export const settings = async (
       email: updatedUser.email,
       isTwoFactorEnabled: updatedUser.isTwoFactorEnabled,
       role: updatedUser.role,
-    }
+    },
   });
 
-  return { success: "Settings Updated!" }
-}
\ No newline at end of file
+  return { success: "Settings Updated!" };
+};
diff --git a/actions/user/update-bio.ts b/actions/user/update-bio.ts
new file mode 100644
index 0000000..ff1b143
--- /dev/null
+++ b/actions/user/update-bio.ts
@@ -0,0 +1,17 @@
+"use server";
+
+import { db } from "@/lib/db";
+
+export const updateBio = async (username: string, bio: string) => {
+  if (!username) {
+    return { error: "Invalid user!" };
+  }
+  await db.user.update({
+    where: { username: username },
+    data: {
+      bio: bio,
+    },
+  });
+
+  return { success: "Profile update Successfully! 🎉" };
+};
diff --git a/app/(auth)/error/page.tsx b/app/(auth)/error/page.tsx
index 75baf36..22eb590 100644
--- a/app/(auth)/error/page.tsx
+++ b/app/(auth)/error/page.tsx
@@ -1,9 +1,7 @@
 import { ErrorCard } from "@/components/auth/error-card";
 
 const AuthErrorPage = () => {
-  return ( 
-    <ErrorCard />
-  );
+  return <ErrorCard />;
 };
- 
+
 export default AuthErrorPage;
diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
index f62a60c..3d45083 100644
--- a/app/(auth)/layout.tsx
+++ b/app/(auth)/layout.tsx
@@ -1,13 +1,7 @@
-const AuthLayout = ({ 
-  children
-}: { 
-  children: React.ReactNode
-}) => {
-  return ( 
-    <div className="h-full flex items-center justify-center ">
-      {children}
-    </div>
-   );
-}
- 
-export default AuthLayout;
\ No newline at end of file
+const AuthLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="h-full flex items-center justify-center ">{children}</div>
+  );
+};
+
+export default AuthLayout;
diff --git a/app/(auth)/new-password/page.tsx b/app/(auth)/new-password/page.tsx
index 24561de..c304b9f 100644
--- a/app/(auth)/new-password/page.tsx
+++ b/app/(auth)/new-password/page.tsx
@@ -1,9 +1,7 @@
 import { NewPasswordForm } from "@/components/auth/new-password-form";
 
 const NewPasswordPage = () => {
-  return ( 
-    <NewPasswordForm />
-   );
-}
- 
-export default NewPasswordPage;
\ No newline at end of file
+  return <NewPasswordForm />;
+};
+
+export default NewPasswordPage;
diff --git a/app/(auth)/new-verification/page.tsx b/app/(auth)/new-verification/page.tsx
index 1fb40a7..3b44bc7 100644
--- a/app/(auth)/new-verification/page.tsx
+++ b/app/(auth)/new-verification/page.tsx
@@ -1,9 +1,7 @@
 import { NewVerificationForm } from "@/components/auth/new-verification-form";
 
 const NewVerificationPage = () => {
-  return ( 
-    <NewVerificationForm />
-   );
-}
- 
-export default NewVerificationPage;
\ No newline at end of file
+  return <NewVerificationForm />;
+};
+
+export default NewVerificationPage;
diff --git a/app/(auth)/register/page.tsx b/app/(auth)/register/page.tsx
index 61744b3..8871c46 100644
--- a/app/(auth)/register/page.tsx
+++ b/app/(auth)/register/page.tsx
@@ -1,15 +1,13 @@
 import { RegisterForm } from "@/components/auth/register-form";
-import type { Metadata } from 'next'
- 
+import type { Metadata } from "next";
+
 export const metadata: Metadata = {
-  title: 'Cocola - Register',
-  description: 'Cocola • Register your account. ✨',
-  keywords: ['register', 'cocola', 'Cocola - Register'],
-}
+  title: "Cocola - Register",
+  description: "Cocola • Register your account. ✨",
+  keywords: ["register", "cocola", "Cocola - Register"],
+};
 const RegisterPage = () => {
-  return ( 
-    <RegisterForm />
-  );
-}
- 
-export default RegisterPage;
\ No newline at end of file
+  return <RegisterForm />;
+};
+
+export default RegisterPage;
diff --git a/app/(auth)/reset/page.tsx b/app/(auth)/reset/page.tsx
index 46bcacd..700540a 100644
--- a/app/(auth)/reset/page.tsx
+++ b/app/(auth)/reset/page.tsx
@@ -1,9 +1,7 @@
 import { ResetForm } from "@/components/auth/reset-form";
 
 const ResetPage = () => {
-  return ( 
-    <ResetForm />
-  );
-}
- 
-export default ResetPage;
\ No newline at end of file
+  return <ResetForm />;
+};
+
+export default ResetPage;
diff --git a/app/(protected)/_components/navbar.tsx b/app/(protected)/_components/navbar.tsx
index cefd523..417d5ce 100644
--- a/app/(protected)/_components/navbar.tsx
+++ b/app/(protected)/_components/navbar.tsx
@@ -12,37 +12,26 @@ export const Navbar = () => {
   return (
     <nav className="bg-secondary flex justify-between items-center p-4 rounded-xl w-[600px] shadow-sm">
       <div className="flex gap-x-2">
-        <Button 
+        <Button
           asChild
           variant={pathname === "/server" ? "default" : "outline"}
         >
-          <Link href="/server">
-            Server
-          </Link>
+          <Link href="/server">Server</Link>
         </Button>
-        <Button 
+        <Button
           asChild
           variant={pathname === "/client" ? "default" : "outline"}
         >
-          <Link href="/client">
-            Client
-          </Link>
+          <Link href="/client">Client</Link>
         </Button>
-        <Button 
-          asChild
-          variant={pathname === "/admin" ? "default" : "outline"}
-        >
-          <Link href="/admin">
-            Admin
-          </Link>
+        <Button asChild variant={pathname === "/admin" ? "default" : "outline"}>
+          <Link href="/admin">Admin</Link>
         </Button>
-        <Button 
+        <Button
           asChild
           variant={pathname === "/settings" ? "default" : "outline"}
         >
-          <Link href="/settings">
-            Settings
-          </Link>
+          <Link href="/settings">Settings</Link>
         </Button>
       </div>
       <UserButton />
diff --git a/app/(protected)/admin/page.tsx b/app/(protected)/admin/page.tsx
index 51d5dfd..a5c308d 100644
--- a/app/(protected)/admin/page.tsx
+++ b/app/(protected)/admin/page.tsx
@@ -10,58 +10,44 @@ import { toast } from "sonner";
 
 const AdminPage = () => {
   const onServerActionClick = () => {
-    admin()
-      .then((data) => {
-        if (data.error) {
-          toast.error(data.error);
-        }
+    admin().then((data) => {
+      if (data.error) {
+        toast.error(data.error);
+      }
+
+      if (data.success) {
+        toast.success(data.success);
+      }
+    });
+  };
 
-        if (data.success) {
-          toast.success(data.success);
-        }
-      })
-  }
-  
   const onApiRouteClick = () => {
-    fetch("/api/admin")
-      .then((response) => {
-        if (response.ok) {
-          toast.success("Allowed API Route!");
-        } else {
-          toast.error("Forbidden API Route!");
-        }
-      })
-  }
+    fetch("/api/admin").then((response) => {
+      if (response.ok) {
+        toast.success("Allowed API Route!");
+      } else {
+        toast.error("Forbidden API Route!");
+      }
+    });
+  };
 
   return (
     <Card className="w-[600px]">
       <CardHeader>
-        <p className="text-2xl font-semibold text-center">
-          🔑 Admin
-        </p>
+        <p className="text-2xl font-semibold text-center">🔑 Admin</p>
       </CardHeader>
       <CardContent className="space-y-4">
         <RoleGate allowedRole={UserRole.ADMIN}>
-          <FormSuccess
-            message="You are allowed to see this content!"
-          />
+          <FormSuccess message="You are allowed to see this content!" />
         </RoleGate>
         <div className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-md">
-          <p className="text-sm font-medium">
-            Admin-only API Route
-          </p>
-          <Button onClick={onApiRouteClick}>
-            Click to test
-          </Button>
+          <p className="text-sm font-medium">Admin-only API Route</p>
+          <Button onClick={onApiRouteClick}>Click to test</Button>
         </div>
 
         <div className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-md">
-          <p className="text-sm font-medium">
-            Admin-only Server Action
-          </p>
-          <Button onClick={onServerActionClick}>
-            Click to test
-          </Button>
+          <p className="text-sm font-medium">Admin-only Server Action</p>
+          <Button onClick={onServerActionClick}>Click to test</Button>
         </div>
       </CardContent>
     </Card>
diff --git a/app/(protected)/client/page.tsx b/app/(protected)/client/page.tsx
index ab9df00..4b020de 100644
--- a/app/(protected)/client/page.tsx
+++ b/app/(protected)/client/page.tsx
@@ -6,12 +6,7 @@ import { useCurrentUser } from "@/hooks/use-current-user";
 const ClientPage = () => {
   const user = useCurrentUser();
 
-  return ( 
-    <UserInfo
-      label="📱 Client component"
-      user={user}
-    />
-   );
-}
- 
-export default ClientPage;
\ No newline at end of file
+  return <UserInfo label="📱 Client component" user={user} />;
+};
+
+export default ClientPage;
diff --git a/app/(protected)/layout.tsx b/app/(protected)/layout.tsx
index a853c7f..406a7c9 100644
--- a/app/(protected)/layout.tsx
+++ b/app/(protected)/layout.tsx
@@ -2,15 +2,15 @@ import { Navbar } from "./_components/navbar";
 
 interface ProtectedLayoutProps {
   children: React.ReactNode;
-};
+}
 
 const ProtectedLayout = ({ children }: ProtectedLayoutProps) => {
-  return ( 
+  return (
     <div className="h-full w-full flex flex-col gap-y-10 items-center justify-center ">
       <Navbar />
       {children}
     </div>
-   );
-}
- 
-export default ProtectedLayout;
\ No newline at end of file
+  );
+};
+
+export default ProtectedLayout;
diff --git a/app/(protected)/server/page.tsx b/app/(protected)/server/page.tsx
index 8771d40..c1edacf 100644
--- a/app/(protected)/server/page.tsx
+++ b/app/(protected)/server/page.tsx
@@ -4,12 +4,7 @@ import { UserInfo } from "@/components/user-info";
 const ServerPage = async () => {
   const user = await currentUser();
 
-  return ( 
-    <UserInfo
-      label="💻 Server component"
-      user={user}
-    />
-   );
-}
- 
-export default ServerPage;
\ No newline at end of file
+  return <UserInfo label="💻 Server component" user={user} />;
+};
+
+export default ServerPage;
diff --git a/app/(protected)/settings/page.tsx b/app/(protected)/settings/page.tsx
index 2d81573..ab35332 100644
--- a/app/(protected)/settings/page.tsx
+++ b/app/(protected)/settings/page.tsx
@@ -15,11 +15,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { SettingsSchema } from "@/schemas";
-import {
-  Card,
-  CardHeader,
-  CardContent,
-} from "@/components/ui/card";
+import { Card, CardHeader, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { settings } from "@/actions/settings";
 import {
@@ -54,7 +50,7 @@ const SettingsPage = () => {
       email: user?.email || undefined,
       role: user?.role || undefined,
       isTwoFactorEnabled: user?.isTwoFactorEnabled || undefined,
-    }
+    },
   });
 
   const onSubmit = (values: z.infer<typeof SettingsSchema>) => {
@@ -72,21 +68,16 @@ const SettingsPage = () => {
         })
         .catch(() => setError("Something went wrong!"));
     });
-  }
+  };
 
-  return ( 
+  return (
     <Card className="w-[600px]">
       <CardHeader>
-        <p className="text-2xl font-semibold text-center">
-          ⚙️ Settings
-        </p>
+        <p className="text-2xl font-semibold text-center">⚙️ Settings</p>
       </CardHeader>
       <CardContent>
         <Form {...form}>
-          <form 
-            className="space-y-6" 
-            onSubmit={form.handleSubmit(onSubmit)}
-          >
+          <form className="space-y-6" onSubmit={form.handleSubmit(onSubmit)}>
             <div className="space-y-4">
               <FormField
                 control={form.control}
@@ -180,12 +171,8 @@ const SettingsPage = () => {
                         </SelectTrigger>
                       </FormControl>
                       <SelectContent>
-                        <SelectItem value={UserRole.ADMIN}>
-                          Admin
-                        </SelectItem>
-                        <SelectItem value={UserRole.USER}>
-                          User
-                        </SelectItem>
+                        <SelectItem value={UserRole.ADMIN}>Admin</SelectItem>
+                        <SelectItem value={UserRole.USER}>User</SelectItem>
                       </SelectContent>
                     </Select>
                     <FormMessage />
@@ -218,17 +205,14 @@ const SettingsPage = () => {
             </div>
             <FormError message={error} />
             <FormSuccess message={success} />
-            <Button
-              disabled={isPending}
-              type="submit"
-            >
+            <Button disabled={isPending} type="submit">
               Save
             </Button>
           </form>
         </Form>
       </CardContent>
     </Card>
-   );
-}
- 
-export default SettingsPage;
\ No newline at end of file
+  );
+};
+
+export default SettingsPage;
diff --git a/app/[username]/[repository]/components/Code.tsx b/app/[username]/[repository]/components/Code.tsx
index a4a8c4c..b2eee6d 100644
--- a/app/[username]/[repository]/components/Code.tsx
+++ b/app/[username]/[repository]/components/Code.tsx
@@ -119,7 +119,7 @@ export function Code({ repodata }: { repodata: Repository }) {
         </div>
         <div className="flex">
           <Button
-            className="mr-1 hover:border-[#51d89f] hover:bg-[#10241b] hover:text-[#51d89f]"
+            className="mr-1 dark:hover:border-[#51d89f] hover:border-[#166534] dark:hover:bg-[#10241b] hover:bg-[#a7f3d0] hover:text-[#166534]  dark:hover:text-[#51d89f]"
             variant={"outline"}
           >
             <Heart className="w-4 h-4 mr-2" />
@@ -293,9 +293,13 @@ export function Code({ repodata }: { repodata: Repository }) {
               </Button>
               <Dialog>
                 <DialogTrigger asChild>
-                  <Button variant="outline" className="ml-auto">
-                    Add File
-                  </Button>
+                  <Link
+                    href={`${repodata.name}/upload/${repodata.DefualtBranch}`}
+                  >
+                    <Button variant="outline" className="ml-auto ">
+                      Add File
+                    </Button>
+                  </Link>
                 </DialogTrigger>
               </Dialog>
             </div>
diff --git a/app/[username]/[repository]/issues/page.tsx b/app/[username]/[repository]/issues/page.tsx
index 6df1b54..d3e131c 100644
--- a/app/[username]/[repository]/issues/page.tsx
+++ b/app/[username]/[repository]/issues/page.tsx
@@ -4,12 +4,9 @@ import { findImageUrlByUserName } from "@/actions/findImageUrlByUserName";
 import React from "react";
 
 const issuespage = () => {
-
   return (
     <div>
-      hello issues{" "}
-      <div>
-      </div>
+      hello issues <div></div>
     </div>
   );
 };
diff --git a/app/[username]/[repository]/layout.tsx b/app/[username]/[repository]/layout.tsx
index 4a9e41b..72a1bb8 100644
--- a/app/[username]/[repository]/layout.tsx
+++ b/app/[username]/[repository]/layout.tsx
@@ -53,12 +53,12 @@ const Layout = ({
                   {currentallissues?.length}
                 </Badge>
               ) : null} */}
-                <Badge
-                  className="ml-3 text-muted-foreground rounded-full"
-                  variant="secondary"
-                >
-                    2
-                </Badge>
+              <Badge
+                className="ml-3 text-muted-foreground rounded-full"
+                variant="secondary"
+              >
+                2
+              </Badge>
             </Link>
           </li>
           <li className="me-2">
diff --git a/app/[username]/[repository]/page.tsx b/app/[username]/[repository]/page.tsx
index 15d7bba..1249a17 100644
--- a/app/[username]/[repository]/page.tsx
+++ b/app/[username]/[repository]/page.tsx
@@ -39,7 +39,6 @@ const Page = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [user]);
 
- 
   return (
     <main>
       {isloading ? (
@@ -49,9 +48,7 @@ const Page = ({
       ) : repoNotFound ? (
         <NotFound />
       ) : (
-        <div>
-          {repodata && <Code repodata={repodata} />}
-        </div>
+        <div>{repodata && <Code repodata={repodata} />}</div>
       )}
     </main>
   );
diff --git a/app/[username]/[repository]/upload/[branch]/[[...path]]/page.tsx b/app/[username]/[repository]/upload/[branch]/[[...path]]/page.tsx
new file mode 100644
index 0000000..305e2f3
--- /dev/null
+++ b/app/[username]/[repository]/upload/[branch]/[[...path]]/page.tsx
@@ -0,0 +1,11 @@
+import Upload from "../../components/Upload";
+
+export default function Page() {
+  return (
+    <main className="mx-6 my-5 xl:mx-60">
+      <div>
+        <Upload />
+      </div>
+    </main>
+  );
+}
diff --git a/app/[username]/[repository]/upload/components/Upload.tsx b/app/[username]/[repository]/upload/components/Upload.tsx
new file mode 100644
index 0000000..21065a9
--- /dev/null
+++ b/app/[username]/[repository]/upload/components/Upload.tsx
@@ -0,0 +1,157 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import Dropzone from "react-dropzone";
+import { FileWithPath } from "file-selector";
+import {
+  FileCode2,
+  GitCommitHorizontal,
+  GitPullRequestArrow,
+} from "lucide-react";
+import { Card } from "@/components/ui/card";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { useAuth } from "@/context/userContext";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { useParams } from "next/navigation";
+import Link from "next/link";
+
+const Upload = () => {
+  const { user } = useAuth();
+  const params = useParams<{
+    username: string;
+    repository: string;
+    branch: string;
+  }>();
+  console.log(params);
+  const [files, setFiles] = useState<FileWithPath[]>([]);
+
+  const handlechange = async (acceptFiles: FileWithPath[]) => {
+    // Items to ignore
+    const ignoreList = [
+      ".env",
+      "node_modules",
+      ".git",
+      ".next",
+      ".vercel",
+      "dist",
+    ];
+
+    // console.log(acceptFiles);
+    // Filter out files or folders listed in the ignoreList
+
+    const filteredFiles = acceptFiles.filter((file) => {
+      const fileName = file.path && file.path.toLowerCase();
+      return !ignoreList.some((item) => fileName?.includes(item.toLowerCase()));
+    });
+
+    setFiles((prevFiles) => [...prevFiles, ...filteredFiles]);
+  };
+
+  useEffect(() => {
+    console.log(files);
+  }, [files]);
+
+  return (
+    <div>
+      <div className="my-2 text-xl">
+        <Link
+          className=" hover:text-blue-700 hover:underline"
+          href={`/${params.username}/${params.repository}`}
+        >
+          {params.repository}{" "}
+        </Link>{" "}
+        /
+      </div>
+      <div className="items-center justify-center w-full p-5 border rounded-md">
+        <Dropzone onDrop={(acceptedFiles) => handlechange(acceptedFiles)}>
+          {({ getRootProps, getInputProps, isDragActive }) => (
+            <section className="flex items-center justify-center h-96">
+              <div
+                className="flex items-center justify-center w-full h-full "
+                {...getRootProps()}
+              >
+                <input {...getInputProps()} />
+                {isDragActive ? (
+                  <div className="flex items-center justify-center w-full h-full border-4 border-dashed rounded-md">
+                    <div className="grid place-items-center">
+                      <FileCode2
+                        className="mb-5 text-muted-foreground"
+                        size={50}
+                      />
+                      <p className="text-muted-foreground">
+                        Drop to Upload file
+                      </p>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="grid w-full place-items-center">
+                    <FileCode2
+                      className="mb-5 text-muted-foreground"
+                      size={50}
+                    />
+
+                    <p className="text-muted-foreground">
+                      Drag files here to add them to your repository
+                    </p>
+                    <p className="text-muted-foreground">
+                      or
+                      <span className="text-blue-600 cursor-pointer hover:underline">
+                        choose your file
+                      </span>
+                    </p>
+                  </div>
+                )}
+              </div>
+            </section>
+          )}
+        </Dropzone>
+      </div>
+
+      <Card className="flex my-5 border-none rounded-md">
+        <div>
+          <Avatar>
+            <AvatarImage
+              src={user?.image || "https://asset-cocola.vercel.app/copilot.png"}
+              alt={user?.username || "profile"}
+            />
+            <AvatarFallback> </AvatarFallback>
+          </Avatar>
+        </div>
+        <div className="w-full ml-4 comment-box">
+          <Card className="w-full p-4 rounded-md">
+            <h1 className="text-xl ">Commit changes</h1>
+            <Input className="my-3" placeholder="Add file via upload" />
+            <Textarea
+              rows={5}
+              placeholder="Add an optional extended description..."
+            />
+            <RadioGroup className="mt-3" defaultValue="main">
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="main" id="r1" />
+                <GitCommitHorizontal size={25} />
+                <p className="ml-2">Commit directly to the main branch.</p>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem className="mr-1" value="new" id="r2" />
+                <GitPullRequestArrow size={20} />
+                <p className="ml-2">
+                  Create a new branch for this commit and start a pull request.
+                </p>
+              </div>
+            </RadioGroup>
+          </Card>
+          <div className="flex gap-3 my-4">
+            <Button variant={"default"}>Commit changes</Button>
+            <Button variant={"danger2"}>Cancel</Button>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default Upload;
diff --git a/app/[username]/components/Overview.tsx b/app/[username]/components/Overview.tsx
index 0c10a4b..d6d586c 100644
--- a/app/[username]/components/Overview.tsx
+++ b/app/[username]/components/Overview.tsx
@@ -18,7 +18,7 @@ const Overview = ({ userrepo }: { userrepo: RepoInterface[] | null }) => {
       </div>
       <Card className="grid grid-cols-2 gap-4 border-none shadow-none">
         {userrepo?.map((item, index) => (
-          <Card key={index} className="p-4 h hover:bg-muted" >
+          <Card key={index} className="p-4 h hover:bg-muted">
             <div className="flex justify-between">
               <Link
                 href={`${item.name}`}
@@ -91,7 +91,7 @@ const Overview = ({ userrepo }: { userrepo: RepoInterface[] | null }) => {
               }}
               legendRender={(props) => <rect {...props} rx={2.5} />}
               rectProps={{
-                rx: 2.5
+                rx: 2.5,
               }}
             />
           </div>
diff --git a/app/[username]/components/UserSide.tsx b/app/[username]/components/UserSide.tsx
index 3cdd42f..0476cf2 100644
--- a/app/[username]/components/UserSide.tsx
+++ b/app/[username]/components/UserSide.tsx
@@ -1,10 +1,43 @@
-import React from "react";
+import React, { useState } from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { User } from "@prisma/client";
 import { Button } from "@/components/ui/button";
 import { ASSET_BASE_URL } from "@/resources";
-
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { updateBio } from "@/actions/user/update-bio";
+import Alert from "@/components/alert/Alert";
 const UserSide = ({ userdata, user }: { userdata: User; user: User }) => {
+  const [error, setError] = useState<string | undefined>("");
+  const [success, setSuccess] = useState<string | undefined>("");
+  const [bio, setBio] = useState<string>();
+
+  const updateUserBio = () => {
+    setError("");
+    setSuccess("");
+
+    if (user?.username && bio) {
+      updateBio(user?.username, bio).then((data) => {
+        if (data?.error) {
+          setError(data.error);
+        }
+        if (data?.success) {
+          setSuccess(data.success);
+          setBio("");
+        }
+      });
+    }
+  };
+
   return (
     <div className="w-72">
       <Avatar className="overflow-visible mt-3 w-72 h-72">
@@ -25,15 +58,50 @@ const UserSide = ({ userdata, user }: { userdata: User; user: User }) => {
         </div>
 
         {userdata?.bio ? (
-          <p className="mt-4 text-sm text-justify">
-            {userdata?.bio}
-          </p>
+          <p className="mt-4 text-sm text-justify">{userdata?.bio}</p>
         ) : null}
 
         {userdata?.username === user?.username ? (
-          <Button className="w-full mt-4" variant={"outline"}>
-            Edit profile
-          </Button>
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button className="w-full mt-4" variant={"outline"}>
+                Edit profile
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-[425px]">
+              <DialogHeader>
+                <DialogTitle>Edit profile</DialogTitle>
+                <DialogDescription>
+                  Make changes to your profile here. Click save when you&apos;re
+                  done.
+                </DialogDescription>
+              </DialogHeader>
+              <div className="grid gap-4 py-4">
+                <div className="grid grid-cols-4 items-center gap-4">
+                  <Label htmlFor="bio" className="text-right">
+                    Bio
+                  </Label>
+                  <Textarea
+                    id="bio"
+                    className="col-span-3"
+                    value={bio}
+                    onChange={(e) => setBio(e.target.value)}
+                  />
+                </div>
+              </div>
+              <div className="my-4">
+                {error ? <Alert message={error} variant={"alert"} /> : null}
+                {success ? (
+                  <Alert message={success} variant={"success"} />
+                ) : null}
+              </div>
+              <DialogFooter>
+                <Button onClick={updateUserBio} type="submit">
+                  Save changes
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
         ) : (
           <Button className="w-full mt-4" variant={"outline"}>
             Follow
diff --git a/app/api/auth/[...nextauth]/route.ts b/app/api/auth/[...nextauth]/route.ts
index b44a389..2e06971 100644
--- a/app/api/auth/[...nextauth]/route.ts
+++ b/app/api/auth/[...nextauth]/route.ts
@@ -1 +1 @@
-export { GET, POST } from "@/auth"
+export { GET, POST } from "@/auth";
diff --git a/app/api/bot2/route.ts b/app/api/bot2/route.ts
index f6d6651..72f0677 100644
--- a/app/api/bot2/route.ts
+++ b/app/api/bot2/route.ts
@@ -42,11 +42,19 @@ export async function POST(req: Request) {
     history: [
       {
         role: "user",
-        parts: [{ text: "you r a AI chatBot that gime me the answer to the question., your name is Cocola AI, cocola chatBot or Cocola is your famous name. u need to try give answer as posible, give answer like u r chating with someone that is your friend. don't give me response in MD formate u can give me response in simple text formate. i hope u understand what i am saying to you."}],
+        parts: [
+          {
+            text: "you r a AI chatBot that gime me the answer to the question., your name is Cocola AI, cocola chatBot or Cocola is your famous name. u need to try give answer as posible, give answer like u r chating with someone that is your friend. don't give me response in MD formate u can give me response in simple text formate. i hope u understand what i am saying to you.",
+          },
+        ],
       },
       {
         role: "model",
-        parts: [{ text: "SureHey there! I'm Cocola, your friendly chatbot. 😊\n\nFeel free to ask me anything, and I'll do my best to help. I'm still under development, but I'm learning new things all the time.\n\nLet's chat! 💬"}],
+        parts: [
+          {
+            text: "SureHey there! I'm Cocola, your friendly chatbot. 😊\n\nFeel free to ask me anything, and I'll do my best to help. I'm still under development, but I'm learning new things all the time.\n\nLet's chat! 💬",
+          },
+        ],
       },
     ],
   });
@@ -57,4 +65,3 @@ export async function POST(req: Request) {
 
   return Response.json({ text });
 }
-
diff --git a/app/chat/[user]/loading.tsx b/app/chat/[user]/loading.tsx
index 247b5a8..c34c83c 100644
--- a/app/chat/[user]/loading.tsx
+++ b/app/chat/[user]/loading.tsx
@@ -6,7 +6,7 @@ const Loading = () => {
     <div className="ml-4 h-full w-full border-slate-100">
       <Card className="h-full">
         <div className="px-2 h-full flex justify-center items-center">
-          <Loader2 />
+          <Loader2 size={30} />
         </div>
       </Card>
     </div>
diff --git a/app/chat/[user]/page.tsx b/app/chat/[user]/page.tsx
index b36ef81..5c58bc1 100644
--- a/app/chat/[user]/page.tsx
+++ b/app/chat/[user]/page.tsx
@@ -18,7 +18,7 @@ const Page = () => {
     e.preventDefault();
     setIstypeing(true);
     setPromt("");
-    
+
     const newMsg = {
       role: "user",
       parts: [{ text: promt }],
diff --git a/app/chat/components/Chats.tsx b/app/chat/components/Chats.tsx
index 34a0153..fd1adff 100644
--- a/app/chat/components/Chats.tsx
+++ b/app/chat/components/Chats.tsx
@@ -66,7 +66,9 @@ const Chats = ({
                         </Card>
                       </div>
                     ) : null}
-                    <div className="mx-1 max-w-[600px]">{items?.parts[0].text}</div>
+                    <div className="mx-1 max-w-[600px]">
+                      {items?.parts[0].text}
+                    </div>
                   </Card>
                 ) : (
                   <div className="flex justify-end w-full">
@@ -85,7 +87,9 @@ const Chats = ({
                             </Card>
                           </div>
                         ) : null}
-                        <div className="mx-1 max-w-[600px]">{items?.parts[0].text}</div>
+                        <div className="mx-1 max-w-[600px]">
+                          {items?.parts[0].text}
+                        </div>
                       </div>
                     </Card>
                   </div>
diff --git a/app/chat/components/TypingAnimation.tsx b/app/chat/components/TypingAnimation.tsx
index 54913dc..f208e6c 100644
--- a/app/chat/components/TypingAnimation.tsx
+++ b/app/chat/components/TypingAnimation.tsx
@@ -1,4 +1,3 @@
-
 const TypingAnimation = () => {
   return (
     <div className=" h-6 flex justify-center items-center">
diff --git a/app/chat/layout.tsx b/app/chat/layout.tsx
index 07dfe51..2fca50a 100644
--- a/app/chat/layout.tsx
+++ b/app/chat/layout.tsx
@@ -24,7 +24,7 @@ export default function DashboardLayout({
     },
     {
       id: 2,
-      name: "Ruru",
+      name: "ruru",
       lastMessage: "Hello! How are you?",
       time: "12:00",
       avatar: "https://asset-cocola.vercel.app/ruru_m07.png",
@@ -56,7 +56,11 @@ export default function DashboardLayout({
                 <div>
                   <CardContent className="grid p-0 px-1 mt-2">
                     {chatlistUsers.map((user, index) => (
-                      <Link href={`/chat/${user.name}`} onClick={() => console.log(user)} key={index}>
+                      <Link
+                        href={`/chat/${user.name}`}
+                        onClick={() => console.log(user)}
+                        key={index}
+                      >
                         <div className="flex items-center h-14 rounded-md p-2 hover:bg-accent mb-2 justify-between space-x-4">
                           <div className="flex items-center space-x-4">
                             <Avatar className="overflow-visible">
diff --git a/app/chat/loading.tsx b/app/chat/loading.tsx
new file mode 100644
index 0000000..c34c83c
--- /dev/null
+++ b/app/chat/loading.tsx
@@ -0,0 +1,16 @@
+import Loader2 from "@/components/Loader2";
+import { Card } from "@/components/ui/card";
+
+const Loading = () => {
+  return (
+    <div className="ml-4 h-full w-full border-slate-100">
+      <Card className="h-full">
+        <div className="px-2 h-full flex justify-center items-center">
+          <Loader2 size={30} />
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default Loading;
diff --git a/app/favicon.ico b/app/favicon.ico
index 718d6fe..b1a8b5a 100644
Binary files a/app/favicon.ico and b/app/favicon.ico differ
diff --git a/app/globals.css b/app/globals.css
index c3bc16a..5827c43 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -5,6 +5,8 @@
 html,
 body,
 :root {
+  padding: 0;
+  margin: 0;
   height: 100%;
 }
 
@@ -65,8 +67,6 @@ body::-webkit-scrollbar-thumb {
 
 /* ################################################################################################################################# */
 
-
-
 /* ################################################################################################################################# */
 /* loader */
 
@@ -181,3 +181,57 @@ body::-webkit-scrollbar-thumb {
     @apply bg-background text-foreground;
   }
 }
+
+/* .comment-box {
+  position: relative;
+ }
+ 
+ .comment-box:before, .comment-box:after {
+  content: '';
+  height: 0;
+  width: 0;
+  position: absolute;
+  display: block;
+  border-width: 10px 12px 10px 0;
+  border-style: solid;
+  border-color: transparent #0a0a0a;
+  top: 8px;
+  left: -11px;
+ }
+ 
+ .comment-box:before {
+  border-width: 11px 13px 11px 0;
+  border-color: transparent #262626;
+  left: -12px;
+ }
+ 
+ .reply-list .comment-box {
+  width: 610px;
+ } */
+.comment-box {
+  position: relative;
+}
+
+.comment-box:before,
+.comment-box:after {
+  position: absolute;
+  top: 11px;
+  right: 100%;
+  left: -8px;
+  display: block;
+  width: 8px;
+  height: 16px;
+  pointer-events: none;
+  content: " ";
+  clip-path: polygon(0 50%, 100% 0, 100% 100%);
+}
+
+.comment-box::before {
+  background-color: #262626;
+}
+
+.comment-box::after {
+  display: table;
+  clear: both;
+  content: "";
+}
diff --git a/app/issues/page.tsx b/app/issues/page.tsx
index 3f88113..966e64b 100644
--- a/app/issues/page.tsx
+++ b/app/issues/page.tsx
@@ -1,11 +1,7 @@
-import React from 'react'
+import React from "react";
 
 const Page = () => {
-  return (
-    <div>
-      hello issues page
-    </div>
-  )
-}
+  return <div>hello issues page</div>;
+};
 
-export default Page
+export default Page;
diff --git a/app/loading.tsx b/app/loading.tsx
index d6c9e20..e3a5eba 100644
--- a/app/loading.tsx
+++ b/app/loading.tsx
@@ -1,10 +1,10 @@
-import Loader from "@/components/Loader";
+import Loader2 from "@/components/Loader2";
 
 export default function Loading() {
   return (
     <>
-      <div className="h-screen flex w-full">
-        <Loader />
+      <div className="h-screen justify-center items-center flex w-full">
+        <Loader2 />
       </div>
     </>
   );
diff --git a/app/page.tsx b/app/page.tsx
index e156ed6..4cf7280 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,10 +1,172 @@
+"use client";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useAuth } from "@/context/userContext";
+import { cn } from "@/lib/utils";
+import { withAuth } from "@/protectedRouter";
+import Image from "next/image";
 import Link from "next/link";
+import React from "react";
+
+const Page = () => {
+  const { user } = useAuth();
+
+  const accounts = [
+    {
+      label: user?.username || "",
+      icon: (
+        <>
+          <Image
+            src={user?.image || "https://asset-cocola.vercel.app/ruru_m07.png"}
+            className="rounded-full"
+            alt="user"
+            width={25}
+            height={25}
+          />
+        </>
+      ),
+    },
+  ];
+
+  const repository = [
+    {
+      image: "https://asset-cocola.vercel.app/ruru_m07.png",
+      auther: "ruru_m07",
+      repository: "test",
+    },
+    {
+      image: "https://asset-cocola.vercel.app/copilot.png",
+      auther: "copilot",
+      repository: "AI",
+    },
+    {
+      image: "https://asset-cocola.vercel.app/ruru_m07.png",
+      auther: "ruru-m07",
+      repository: "test",
+    },
+    {
+      image: "https://asset-cocola.vercel.app/black_logo_png.png",
+      auther: "cocola-dev",
+      repository: "cocola",
+    },
+  ];
+
+  const [selectedAccount, setSelectedAccount] = React.useState<string>(
+    accounts[0].label,
+  );
+
+  const isCollapsed = false;
 
-export default function Page() {
   return (
-    <main>
-      <h1>Home</h1>
-      <Link href="/auth/login">login</Link>
+    <main className="h-full w-full border-t flex justify-between">
+      <ScrollArea className="w-[550px] border-r p-4 h-[93vh] sticky top-0">
+        <div className="w-40">
+          <Select
+            defaultValue={selectedAccount}
+            onValueChange={setSelectedAccount}
+          >
+            <SelectTrigger
+              className={cn(
+                "flex items-center gap-2 [&>span]:line-clamp-1 [&>span]:flex [&>span]:w-full [&>span]:items-center [&>span]:gap-1 [&>span]:truncate [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0",
+                isCollapsed &&
+                  "flex h-9 w-9 shrink-0 items-center justify-center p-0 [&>span]:w-auto [&>svg]:hidden",
+              )}
+              aria-label="Select account"
+            >
+              <SelectValue placeholder="Select an account">
+                {
+                  accounts.find((account) => account.label === selectedAccount)
+                    ?.icon
+                }
+                <span className={cn("ml-2", isCollapsed && "hidden")}>
+                  {
+                    accounts.find(
+                      (account) => account.label === selectedAccount,
+                    )?.label
+                  }
+                </span>
+              </SelectValue>
+            </SelectTrigger>
+            <SelectContent>
+              {accounts.map((account) => (
+                <SelectItem key={account.label} value={account.label}>
+                  <div className="flex items-center gap-3 [&_svg]:h-4 [&_svg]:w-4 [&_svg]:shrink-0 [&_svg]:text-foreground">
+                    {account.icon}
+                    {account.label}
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        {/* Top Repositories */}
+
+        <div className="w-full ">
+          <div className="flex items-center my-3 justify-between">
+            <h1 className="w-full text-lg">Top Repositories</h1>
+            <Button size={"sm"}> New </Button>
+          </div>
+          <div>
+            <Input placeholder="Find a repository" />
+          </div>
+          <div className="my-3 mt-5">
+            {repository.map((repo, index) => (
+              <div key={index} className="flex items-center my-2 ">
+                <Avatar className="w-5 h-5">
+                  <AvatarImage
+                    src={repo.image}
+                    alt="repository"
+                    width={2}
+                    height={2}
+                  />
+                  <AvatarFallback></AvatarFallback>
+                </Avatar>
+                <span className="ml-2 text-sm">
+                  <Link href={`/${repo.auther}`}>{repo.auther}</Link> /{" "}
+                  <Link href={`/${repo.auther}/${repo.repository}`}>
+                    {repo.repository}
+                  </Link>
+                </span>
+              </div>
+            ))}
+            <Button
+              className="m-0 p-0 hover:text-blue-700 text-muted-foreground"
+              variant={"link"}
+            >
+              see more
+            </Button>
+          </div>
+        </div>
+
+        {/* Recent activity */}
+
+        <div className="w-full ">
+          <div className="flex items-center my-3 justify-between">
+            <h1 className="w-full text-lg">Recent activity</h1>
+          </div>
+          <div className="my-3 mt-5">
+            <h1 className="text-muted-foreground">
+              don&apos;t have any recent activity
+            </h1>
+          </div>
+        </div>
+      </ScrollArea>
+      <ScrollArea className="w-full border-r p-4 h-[93vh]">
+        <h1 className="text-2xl">Home</h1>
+      </ScrollArea>
+      <ScrollArea className="w-[550px] border-r p-4 h-[93vh]"></ScrollArea>
     </main>
   );
-}
+};
+
+export default withAuth(Page);
diff --git a/app/pulls/page.tsx b/app/pulls/page.tsx
index aa98688..a606afd 100644
--- a/app/pulls/page.tsx
+++ b/app/pulls/page.tsx
@@ -1,11 +1,7 @@
-import React from 'react'
+import React from "react";
 
 const Page = () => {
-  return (
-    <div>
-      hello pulls page
-    </div>
-  )
-}
+  return <div>hello pulls page</div>;
+};
 
-export default Page
+export default Page;
diff --git a/auth.config.ts b/auth.config.ts
index 3188190..53dc956 100644
--- a/auth.config.ts
+++ b/auth.config.ts
@@ -23,20 +23,17 @@ export default {
 
         if (validatedFields.success) {
           const { email, password } = validatedFields.data;
-          
+
           const user = await getUserByEmail(email);
           if (!user || !user.password) return null;
 
-          const passwordsMatch = await bcrypt.compare(
-            password,
-            user.password,
-          );
+          const passwordsMatch = await bcrypt.compare(password, user.password);
 
           if (passwordsMatch) return user;
         }
 
         return null;
-      }
-    })
+      },
+    }),
   ],
-} satisfies NextAuthConfig
\ No newline at end of file
+} satisfies NextAuthConfig;
diff --git a/auth.ts b/auth.ts
index 1cc5dd7..7f7bbe7 100644
--- a/auth.ts
+++ b/auth.ts
@@ -1,4 +1,4 @@
-import NextAuth from "next-auth"
+import NextAuth from "next-auth";
 import { UserRole } from "@prisma/client";
 import { PrismaAdapter } from "@auth/prisma-adapter";
 
@@ -23,9 +23,9 @@ export const {
     async linkAccount({ user }) {
       await db.user.update({
         where: { id: user.id },
-        data: { emailVerified: new Date() }
-      })
-    }
+        data: { emailVerified: new Date() },
+      });
+    },
   },
   callbacks: {
     async signIn({ user, account }) {
@@ -38,13 +38,15 @@ export const {
       if (!existingUser?.emailVerified) return false;
 
       if (existingUser.isTwoFactorEnabled) {
-        const twoFactorConfirmation = await getTwoFactorConfirmationByUserId(existingUser.id);
+        const twoFactorConfirmation = await getTwoFactorConfirmationByUserId(
+          existingUser.id,
+        );
 
         if (!twoFactorConfirmation) return false;
 
         // Delete two factor confirmation for next sign in
         await db.twoFactorConfirmation.delete({
-          where: { id: twoFactorConfirmation.id }
+          where: { id: twoFactorConfirmation.id },
         });
       }
 
@@ -78,9 +80,7 @@ export const {
 
       if (!existingUser) return token;
 
-      const existingAccount = await getAccountByUserId(
-        existingUser.id
-      );
+      const existingAccount = await getAccountByUserId(existingUser.id);
 
       token.isOAuth = !!existingAccount;
       token.name = existingUser.name;
@@ -89,7 +89,7 @@ export const {
       token.isTwoFactorEnabled = existingUser.isTwoFactorEnabled;
 
       return token;
-    }
+    },
   },
   adapter: PrismaAdapter(db),
   session: { strategy: "jwt" },
diff --git a/axios/index.ts b/axios/index.ts
index 93cc52b..edfef1f 100644
--- a/axios/index.ts
+++ b/axios/index.ts
@@ -14,19 +14,14 @@ apiClient.interceptors.request.use(
   },
   function (error) {
     return Promise.reject(error);
-  }
+  },
 );
 
 // API functions for different actions
-export const gemini = (data: {
-  prompt: string;
-}) => {
+export const gemini = (data: { prompt: string }) => {
   return apiClient.post("/api/gemini", data);
 };
 
-export const bot = (data: {
-  prompt: string;
-  history: any[];
-}) => {
+export const bot = (data: { prompt: string; history: any[] }) => {
   return apiClient.post("/api/bot", data);
 };
diff --git a/components.json b/components.json
index 05f9e72..bd85d8a 100644
--- a/components.json
+++ b/components.json
@@ -14,4 +14,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
\ No newline at end of file
+}
diff --git a/components/ComponentLoader.tsx b/components/ComponentLoader.tsx
index 02b89dc..f48bc83 100644
--- a/components/ComponentLoader.tsx
+++ b/components/ComponentLoader.tsx
@@ -3,9 +3,9 @@ import React from "react";
 
 const CompoLoader = () => {
   return (
-      <div className="w-full flex justify-center items-center">
-        <Loader2 size={30} className="animate-spin w-full mt-48" />
-      </div>
+    <div className="w-full flex justify-center items-center">
+      <Loader2 size={30} className="animate-spin w-full mt-48" />
+    </div>
   );
 };
 
diff --git a/components/Loader2.tsx b/components/Loader2.tsx
index 094cf20..9cc6157 100644
--- a/components/Loader2.tsx
+++ b/components/Loader2.tsx
@@ -1,21 +1,38 @@
-const Loader2 = () => {
+const Loader2 = ({ size }: { size?: number }) => {
   return (
     <div className="flex space-x-2 w-full fixed bg-card  justify-center items-center">
       <div className=" flex justify-center items-center">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          className="lucide lucide-loader-2 animate-spin"
-        >
-          <path d="M21 12a9 9 0 1 1-6.219-8.56" />
-        </svg>
+        {size ? (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            className="lucide lucide-loader-2 animate-spin"
+          >
+            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+          </svg>
+        ) : (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            className="lucide lucide-loader-2 animate-spin"
+          >
+            <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+          </svg>
+        )}
       </div>
     </div>
   );
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index ab364b5..c6d4d03 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -24,7 +24,8 @@ const Navbar = ({ isAuthenticated }: { isAuthenticated: any }) => {
           <div className="flex items-center ml-4">
             {isAuthenticated ? <Leftside /> : <div className="-mb-10" />}
             <Logo />
-            {params ? (
+
+            {params && isAuthenticated ? (
               <div>
                 <Link
                   href={`/${params.username}`}
@@ -54,7 +55,7 @@ const Navbar = ({ isAuthenticated }: { isAuthenticated: any }) => {
         ) : (
           <div className="flex items-center justify-center h-auto gap-3 mr-4">
             {pathname === "/login" || pathname === "/register" ? (
-              <Link href={'/login'}>
+              <Link href={"/login"}>
                 <Button variant={"ghost"}>Sign in</Button>
               </Link>
             ) : (
diff --git a/components/alert/Alert.tsx b/components/alert/Alert.tsx
index 17d6f84..296a639 100644
--- a/components/alert/Alert.tsx
+++ b/components/alert/Alert.tsx
@@ -9,7 +9,8 @@ const alertVariants = cva("flex items-center w-full h-10 px-4 rounded-lg ", {
       default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
       denger: "border-[#5b3b04] bg-[#191001] text-[#e5d07b]",
       // success: "border-[#51d89f] bg-[#10241b] text-[#51d89f]",
-      success: "bg-emerald-500/15 rounded-md flex items-center text-sm border border-emerald-500 text-emerald-500",
+      success:
+        "bg-emerald-500/15 rounded-md flex items-center text-sm border border-emerald-500 text-emerald-500",
       alert: "border-[#671e21] bg-destructive/15 text-[#d93136]",
     },
   },
@@ -25,9 +26,8 @@ const Alert = ({
   message: string;
   variant: "default" | "denger" | "success" | "alert";
 }) => {
-
   if (!message) return null;
-  
+
   return (
     <Card className={cn(alertVariants({ variant }))}>
       {variant === "denger" ? (
diff --git a/components/auth/back-button.tsx b/components/auth/back-button.tsx
index 507abf0..2bb97d9 100644
--- a/components/auth/back-button.tsx
+++ b/components/auth/back-button.tsx
@@ -7,22 +7,12 @@ import { Button } from "@/components/ui/button";
 interface BackButtonProps {
   href: string;
   label: string;
-};
+}
 
-export const BackButton = ({
-  href,
-  label,
-}: BackButtonProps) => {
+export const BackButton = ({ href, label }: BackButtonProps) => {
   return (
-    <Button
-      variant="link"
-      className="font-normal w-full"
-      size="sm"
-      asChild
-    >
-      <Link href={href}>
-        {label}
-      </Link>
+    <Button variant="link" className="font-normal w-full" size="sm" asChild>
+      <Link href={href}>{label}</Link>
     </Button>
   );
 };
diff --git a/components/auth/card-wrapper.tsx b/components/auth/card-wrapper.tsx
index f69dcd3..8bb9899 100644
--- a/components/auth/card-wrapper.tsx
+++ b/components/auth/card-wrapper.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { 
+import {
   Card,
   CardContent,
   CardFooter,
-  CardHeader
+  CardHeader,
 } from "@/components/ui/card";
 import { Header } from "@/components/auth/header";
 import { Social } from "@/components/auth/social";
@@ -16,33 +16,28 @@ interface CardWrapperProps {
   backButtonLabel: string;
   backButtonHref: string;
   showSocial?: boolean;
-};
+}
 
 export const CardWrapper = ({
   children,
   headerLabel,
   backButtonLabel,
   backButtonHref,
-  showSocial
+  showSocial,
 }: CardWrapperProps) => {
   return (
     <Card className="w-[400px] my-10 shadow-md">
       <CardHeader>
         <Header label={headerLabel} />
       </CardHeader>
-      <CardContent>
-        {children}
-      </CardContent>
+      <CardContent>{children}</CardContent>
       {showSocial && (
         <CardFooter>
           <Social />
         </CardFooter>
       )}
       <CardFooter>
-        <BackButton
-          label={backButtonLabel}
-          href={backButtonHref}
-        />
+        <BackButton label={backButtonLabel} href={backButtonHref} />
       </CardFooter>
     </Card>
   );
diff --git a/components/auth/error-card.tsx b/components/auth/error-card.tsx
index ed366ef..61ee91d 100644
--- a/components/auth/error-card.tsx
+++ b/components/auth/error-card.tsx
@@ -10,7 +10,7 @@ export const ErrorCard = () => {
       backButtonLabel="Back to login"
     >
       <div className="w-full flex justify-center items-center">
-      <ExclamationTriangleIcon className="text-destructive" />
+        <ExclamationTriangleIcon className="text-destructive" />
       </div>
     </CardWrapper>
   );
diff --git a/components/auth/header.tsx b/components/auth/header.tsx
index 83777c1..ccc5d47 100644
--- a/components/auth/header.tsx
+++ b/components/auth/header.tsx
@@ -18,7 +18,7 @@ export const Header = ({ label }: HeaderProps) => {
       <div
         className={cn(
           "text-3xl flex items-center justify-center font-semibold -mb-6 -ml-7",
-          font.className
+          font.className,
         )}
       >
         <Image
diff --git a/components/auth/login-button.tsx b/components/auth/login-button.tsx
index c282532..aa0c1a4 100644
--- a/components/auth/login-button.tsx
+++ b/components/auth/login-button.tsx
@@ -2,23 +2,19 @@
 
 import { useRouter } from "next/navigation";
 
-import {
-  Dialog,
-  DialogContent,
-  DialogTrigger,
-} from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { LoginForm } from "@/components/auth/login-form";
 
 interface LoginButtonProps {
   children: React.ReactNode;
-  mode?: "modal" | "redirect",
+  mode?: "modal" | "redirect";
   asChild?: boolean;
-};
+}
 
 export const LoginButton = ({
   children,
   mode = "redirect",
-  asChild
+  asChild,
 }: LoginButtonProps) => {
   const router = useRouter();
 
@@ -29,14 +25,12 @@ export const LoginButton = ({
   if (mode === "modal") {
     return (
       <Dialog>
-        <DialogTrigger asChild={asChild}>
-          {children}
-        </DialogTrigger>
+        <DialogTrigger asChild={asChild}>{children}</DialogTrigger>
         <DialogContent className="p-0 w-auto bg-transparent border-none">
           <LoginForm />
         </DialogContent>
       </Dialog>
-    )
+    );
   }
 
   return (
diff --git a/components/auth/logout-button.tsx b/components/auth/logout-button.tsx
index 0ad91be..8d7b4d9 100644
--- a/components/auth/logout-button.tsx
+++ b/components/auth/logout-button.tsx
@@ -4,11 +4,9 @@ import { logout } from "@/actions/logout";
 
 interface LogoutButtonProps {
   children?: React.ReactNode;
-};
+}
 
-export const LogoutButton = ({
-  children
-}: LogoutButtonProps) => {
+export const LogoutButton = ({ children }: LogoutButtonProps) => {
   const onClick = () => {
     logout();
   };
diff --git a/components/auth/new-password-form.tsx b/components/auth/new-password-form.tsx
index 16064e1..7147f3f 100644
--- a/components/auth/new-password-form.tsx
+++ b/components/auth/new-password-form.tsx
@@ -14,9 +14,9 @@ import {
   FormField,
   FormItem,
   FormLabel,
-  FormMessage,  
+  FormMessage,
 } from "@/components/ui/form";
-import { CardWrapper } from "@/components/auth/card-wrapper"
+import { CardWrapper } from "@/components/auth/card-wrapper";
 import { Button } from "@/components/ui/button";
 import { FormError } from "@/components/form-error";
 import { FormSuccess } from "@/components/form-success";
@@ -42,11 +42,10 @@ export const NewPasswordForm = () => {
     setSuccess("");
 
     startTransition(() => {
-      newPassword(values, token)
-        .then((data) => {
-          setError(data?.error);
-          setSuccess(data?.success);
-        });
+      newPassword(values, token).then((data) => {
+        setError(data?.error);
+        setSuccess(data?.success);
+      });
     });
   };
 
@@ -57,10 +56,7 @@ export const NewPasswordForm = () => {
       backButtonHref="/auth/login"
     >
       <Form {...form}>
-        <form 
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-6"
-        >
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
           <div className="space-y-4">
             <FormField
               control={form.control}
@@ -83,11 +79,7 @@ export const NewPasswordForm = () => {
           </div>
           <FormError message={error} />
           <FormSuccess message={success} />
-          <Button
-            disabled={isPending}
-            type="submit"
-            className="w-full"
-          >
+          <Button disabled={isPending} type="submit" className="w-full">
             Reset password
           </Button>
         </form>
diff --git a/components/auth/new-verification-form.tsx b/components/auth/new-verification-form.tsx
index eae514b..f43aa80 100644
--- a/components/auth/new-verification-form.tsx
+++ b/components/auth/new-verification-form.tsx
@@ -32,7 +32,7 @@ export const NewVerificationForm = () => {
       })
       .catch(() => {
         setError("Something went wrong!");
-      })
+      });
   }, [token, success, error]);
 
   useEffect(() => {
@@ -46,14 +46,10 @@ export const NewVerificationForm = () => {
       backButtonHref="/auth/login"
     >
       <div className="flex items-center w-full justify-center">
-        {!success && !error && (
-          <BeatLoader />
-        )}
+        {!success && !error && <BeatLoader />}
         <FormSuccess message={success} />
-        {!success && (
-          <FormError message={error} />
-        )}
+        {!success && <FormError message={error} />}
       </div>
     </CardWrapper>
-  )
-}
\ No newline at end of file
+  );
+};
diff --git a/components/auth/reset-form.tsx b/components/auth/reset-form.tsx
index 132f018..bd5af2b 100644
--- a/components/auth/reset-form.tsx
+++ b/components/auth/reset-form.tsx
@@ -13,9 +13,9 @@ import {
   FormField,
   FormItem,
   FormLabel,
-  FormMessage,  
+  FormMessage,
 } from "@/components/ui/form";
-import { CardWrapper } from "@/components/auth/card-wrapper"
+import { CardWrapper } from "@/components/auth/card-wrapper";
 import { Button } from "@/components/ui/button";
 import { FormError } from "@/components/form-error";
 import { FormSuccess } from "@/components/form-success";
@@ -38,11 +38,10 @@ export const ResetForm = () => {
     setSuccess("");
 
     startTransition(() => {
-      reset(values)
-        .then((data) => {
-          setError(data?.error);
-          setSuccess(data?.success);
-        });
+      reset(values).then((data) => {
+        setError(data?.error);
+        setSuccess(data?.success);
+      });
     });
   };
 
@@ -53,10 +52,7 @@ export const ResetForm = () => {
       backButtonHref="/auth/login"
     >
       <Form {...form}>
-        <form 
-          onSubmit={form.handleSubmit(onSubmit)}
-          className="space-y-6"
-        >
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
           <div className="space-y-4">
             <FormField
               control={form.control}
@@ -79,11 +75,7 @@ export const ResetForm = () => {
           </div>
           <FormError message={error} />
           <FormSuccess message={success} />
-          <Button
-            disabled={isPending}
-            type="submit"
-            className="w-full"
-          >
+          <Button disabled={isPending} type="submit" className="w-full">
             Send reset email
           </Button>
         </form>
diff --git a/components/auth/role-gate.tsx b/components/auth/role-gate.tsx
index 465b991..b31c537 100644
--- a/components/auth/role-gate.tsx
+++ b/components/auth/role-gate.tsx
@@ -8,23 +8,16 @@ import { FormError } from "@/components/form-error";
 interface RoleGateProps {
   children: React.ReactNode;
   allowedRole: UserRole;
-};
+}
 
-export const RoleGate = ({
-  children,
-  allowedRole,
-}: RoleGateProps) => {
+export const RoleGate = ({ children, allowedRole }: RoleGateProps) => {
   const role = useCurrentRole();
 
   if (role !== allowedRole) {
     return (
       <FormError message="You do not have permission to view this content!" />
-    )
+    );
   }
 
-  return (
-    <>
-      {children}
-    </>
-  );
+  return <>{children}</>;
 };
diff --git a/components/auth/social.tsx b/components/auth/social.tsx
index bdcbef8..479df41 100644
--- a/components/auth/social.tsx
+++ b/components/auth/social.tsx
@@ -16,7 +16,7 @@ export const Social = () => {
     signIn(provider, {
       callbackUrl: callbackUrl || DEFAULT_LOGIN_REDIRECT,
     });
-  }
+  };
 
   return (
     <div className="flex items-center w-full gap-x-2">
diff --git a/components/auth/user-button.tsx b/components/auth/user-button.tsx
index 4c0cf02..eb8d96d 100644
--- a/components/auth/user-button.tsx
+++ b/components/auth/user-button.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { FaUser } from "react-icons/fa";
-import { ExitIcon } from "@radix-ui/react-icons"
+import { ExitIcon } from "@radix-ui/react-icons";
 
 import {
   DropdownMenu,
@@ -9,11 +9,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import {
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-} from "@/components/ui/avatar";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
 import { useCurrentUser } from "@/hooks/use-current-user";
 import { LogoutButton } from "@/components/auth/logout-button";
 
diff --git a/components/form-error.tsx b/components/form-error.tsx
index c8e9fd3..0479b0d 100644
--- a/components/form-error.tsx
+++ b/components/form-error.tsx
@@ -2,11 +2,9 @@ import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 
 interface FormErrorProps {
   message?: string;
-};
+}
 
-export const FormError = ({
-  message,
-}: FormErrorProps) => {
+export const FormError = ({ message }: FormErrorProps) => {
   if (!message) return null;
 
   return (
diff --git a/components/form-success.tsx b/components/form-success.tsx
index 0cfaa7f..148e931 100644
--- a/components/form-success.tsx
+++ b/components/form-success.tsx
@@ -2,11 +2,9 @@ import { CheckCircledIcon } from "@radix-ui/react-icons";
 
 interface FormSuccessProps {
   message?: string;
-};
+}
 
-export const FormSuccess = ({
-  message,
-}: FormSuccessProps) => {
+export const FormSuccess = ({ message }: FormSuccessProps) => {
   if (!message) return null;
 
   return (
diff --git a/components/nav/Side.tsx b/components/nav/Side.tsx
index 287a4db..fc2540e 100644
--- a/components/nav/Side.tsx
+++ b/components/nav/Side.tsx
@@ -39,14 +39,17 @@ export function Side({ links, isCollapsed }: NavProps) {
                     buttonVariants({ variant: link.variant, size: "icon" }),
                     "h-9 w-9",
                     link.variant === "default" &&
-                      "dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white"
+                      "dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white",
                   )}
                 >
                   <link.icon className="w-4 h-4" />
                   <span className="sr-only">{link.title}</span>
                 </Link>
               </TooltipTrigger>
-              <TooltipContent side="right" className="flex items-center gap-4">
+              <TooltipContent
+                side="right"
+                className="flex bg-card text-card-foreground border items-center gap-4"
+              >
                 {link.title}
                 {link.label && (
                   <span className="ml-auto text-muted-foreground">
@@ -63,7 +66,7 @@ export function Side({ links, isCollapsed }: NavProps) {
                 buttonVariants({ variant: link.variant, size: "sm" }),
                 link.variant === "default" &&
                   "dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white",
-                "justify-start"
+                "justify-start",
               )}
             >
               <link.icon className="w-4 h-4 mr-2" />
@@ -73,14 +76,14 @@ export function Side({ links, isCollapsed }: NavProps) {
                   className={cn(
                     "ml-auto",
                     link.variant === "default" &&
-                      "text-background dark:text-white"
+                      "text-background dark:text-white",
                   )}
                 >
                   {link.label}
                 </span>
               )}
             </Link>
-          )
+          ),
         )}
       </nav>
     </div>
diff --git a/components/nav/leftside.tsx b/components/nav/leftside.tsx
index 71c5614..64fe9b7 100644
--- a/components/nav/leftside.tsx
+++ b/components/nav/leftside.tsx
@@ -1,6 +1,6 @@
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import {
-    AlignLeft,
+  AlignLeft,
   Archive,
   Book,
   Cog,
@@ -16,7 +16,6 @@ import { Side } from "./Side";
 import { cn } from "@/lib/utils";
 import { Separator } from "../ui/separator";
 
-
 const Leftside = () => {
   const isCollapsed = true;
 
@@ -50,11 +49,11 @@ const Leftside = () => {
                   path: "/messages",
                 },
                 {
-                  title: "Forums",
+                  title: "Chat",
                   label: "4",
                   icon: MessagesSquare,
                   variant: "ghost",
-                  path: "/messages",
+                  path: "/chat",
                 },
                 {
                   title: "Analytics",
diff --git a/components/nav/navItems.tsx b/components/nav/navItems.tsx
index d2d02be..5643bc6 100644
--- a/components/nav/navItems.tsx
+++ b/components/nav/navItems.tsx
@@ -5,7 +5,7 @@ const NavItems = () => {
   return (
     <div className={"text-muted-foreground"}>
       <div>
-        <Button className="mx-2" variant={"ghost"}>
+        <Button className="mx-2 ml-4" variant={"ghost"}>
           Documentation
         </Button>
         <Button className="mx-2" variant={"ghost"}>
diff --git a/components/nav/rightside.tsx b/components/nav/rightside.tsx
index 7855345..5986eae 100644
--- a/components/nav/rightside.tsx
+++ b/components/nav/rightside.tsx
@@ -149,9 +149,7 @@ const Rightside = ({ user }: { user: User | null }) => {
                         <BookMarked size={16} />
                         <p className="ml-2">Add repositories</p>
                       </Link>
-                      <LogoutButton>
-                        logout
-                      </LogoutButton>
+                      <LogoutButton>logout</LogoutButton>
                     </div>
                   </div>
                 </div>
diff --git a/components/repository/new/Heder.tsx b/components/repository/new/Heder.tsx
index e7b34bd..53e2e72 100644
--- a/components/repository/new/Heder.tsx
+++ b/components/repository/new/Heder.tsx
@@ -9,7 +9,7 @@ const Heder = () => {
         A repository contains all project files, including the revision history.
         Already have a project repository elsewhere?
       </p>
-      <Separator className="mt-5" /> 
+      <Separator className="mt-5" />
     </div>
   );
 };
diff --git a/components/repository/new/New.tsx b/components/repository/new/New.tsx
index c50c62a..f76e0bf 100644
--- a/components/repository/new/New.tsx
+++ b/components/repository/new/New.tsx
@@ -46,7 +46,7 @@ import Alert from "@/components/alert/Alert";
 const New = () => {
   const router = useRouter();
   const [alertmsg, setAlertmsg] = useState<string>(
-    "You are creating a public repository in your personal account."
+    "You are creating a public repository in your personal account.",
   );
   const [error, setError] = useState<string | undefined>("");
   const [success, setSuccess] = useState<string | undefined>("");
@@ -245,7 +245,7 @@ const New = () => {
                               value="public"
                               onClick={() =>
                                 setAlertmsg(
-                                  "You are creating a public repository in your personal account."
+                                  "You are creating a public repository in your personal account.",
                                 )
                               }
                             />
@@ -271,7 +271,7 @@ const New = () => {
                               value="private"
                               onClick={() =>
                                 setAlertmsg(
-                                  "You are creating a private repository in your personal account."
+                                  "You are creating a private repository in your personal account.",
                                 )
                               }
                             />
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
index 51e507b..09cd14d 100644
--- a/components/ui/avatar.tsx
+++ b/components/ui/avatar.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -13,12 +13,12 @@ const Avatar = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
+      className,
     )}
     {...props}
   />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
@@ -29,8 +29,8 @@ const AvatarImage = React.forwardRef<
     className={cn("aspect-square h-full w-full", className)}
     {...props}
   />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
@@ -40,11 +40,11 @@ const AvatarFallback = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
+      className,
     )}
     {...props}
   />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
index b367ca7..7ac5108 100644
--- a/components/ui/badge.tsx
+++ b/components/ui/badge.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -15,14 +15,14 @@ const badgeVariants = cva(
         destructive:
           "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
         outline: "text-foreground",
-        success: "border-transparent bg-emerald-500 text-primary-foreground"
+        success: "border-transparent bg-emerald-500 text-primary-foreground",
       },
     },
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -31,7 +31,7 @@ export interface BadgeProps
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
     <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 0270f64..70edf4d 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
@@ -19,6 +19,12 @@ const buttonVariants = cva(
           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
+        danger:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground mr-1 dark:hover:border-red-500 hover:border-[#166534] dark:hover:bg-red-950 hover:bg-[#a7f3d0] hover:text-[#166534]  dark:hover:text-red-500",
+        danger2:
+          "text-red-700 border hover:border-red-700 hover:text-primary hover:bg-red-700 ",
+        success:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground mr-1 dark:hover:border-[#51d89f] hover:border-[#166534] dark:hover:bg-[#10241b] hover:bg-[#a7f3d0] hover:text-[#166534]  dark:hover:text-[#51d89f]",
       },
       size: {
         default: "h-9 px-4 py-2",
@@ -31,27 +37,27 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Button.displayName = "Button"
+    );
+  },
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index 77e9fb7..75cc369 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -10,12 +10,12 @@ const Card = React.forwardRef<
     ref={ref}
     className={cn(
       "rounded-xl border bg-card text-card-foreground shadow",
-      className
+      className,
     )}
     {...props}
   />
-))
-Card.displayName = "Card"
+));
+Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -26,8 +26,8 @@ const CardHeader = React.forwardRef<
     className={cn("flex flex-col space-y-1.5 p-6", className)}
     {...props}
   />
-))
-CardHeader.displayName = "CardHeader"
+));
+CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -38,8 +38,8 @@ const CardTitle = React.forwardRef<
     className={cn("font-semibold leading-none tracking-tight", className)}
     {...props}
   />
-))
-CardTitle.displayName = "CardTitle"
+));
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -50,16 +50,16 @@ const CardDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-CardDescription.displayName = "CardDescription"
+));
+CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+));
+CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -70,7 +70,14 @@ const CardFooter = React.forwardRef<
     className={cn("flex items-center p-6 pt-0", className)}
     {...props}
   />
-))
-CardFooter.displayName = "CardFooter"
+));
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
diff --git a/components/ui/command.tsx b/components/ui/command.tsx
index 30ef57d..0fc0016 100644
--- a/components/ui/command.tsx
+++ b/components/ui/command.tsx
@@ -1,12 +1,12 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { MagnifyingGlassIcon } from "@radix-ui/react-icons"
-import { Command as CommandPrimitive } from "cmdk"
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { Command as CommandPrimitive } from "cmdk";
 
-import { cn } from "@/lib/utils"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -16,12 +16,12 @@ const Command = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
+      className,
     )}
     {...props}
   />
-))
-Command.displayName = CommandPrimitive.displayName
+));
+Command.displayName = CommandPrimitive.displayName;
 
 interface CommandDialogProps extends DialogProps {}
 
@@ -34,8 +34,8 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
         </Command>
       </DialogContent>
     </Dialog>
-  )
-}
+  );
+};
 
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
@@ -47,14 +47,14 @@ const CommandInput = React.forwardRef<
       ref={ref}
       className={cn(
         "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     />
   </div>
-))
+));
 
-CommandInput.displayName = CommandPrimitive.Input.displayName
+CommandInput.displayName = CommandPrimitive.Input.displayName;
 
 const CommandList = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.List>,
@@ -65,9 +65,9 @@ const CommandList = React.forwardRef<
     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
     {...props}
   />
-))
+));
 
-CommandList.displayName = CommandPrimitive.List.displayName
+CommandList.displayName = CommandPrimitive.List.displayName;
 
 const CommandEmpty = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Empty>,
@@ -78,9 +78,9 @@ const CommandEmpty = React.forwardRef<
     className="py-6 text-center text-sm"
     {...props}
   />
-))
+));
 
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
 const CommandGroup = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Group>,
@@ -90,13 +90,13 @@ const CommandGroup = React.forwardRef<
     ref={ref}
     className={cn(
       "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
+      className,
     )}
     {...props}
   />
-))
+));
 
-CommandGroup.displayName = CommandPrimitive.Group.displayName
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
 const CommandSeparator = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Separator>,
@@ -107,8 +107,8 @@ const CommandSeparator = React.forwardRef<
     className={cn("-mx-1 h-px bg-border", className)}
     {...props}
   />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
 const CommandItem = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Item>,
@@ -118,13 +118,13 @@ const CommandItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   />
-))
+));
 
-CommandItem.displayName = CommandPrimitive.Item.displayName
+CommandItem.displayName = CommandPrimitive.Item.displayName;
 
 const CommandShortcut = ({
   className,
@@ -134,13 +134,13 @@ const CommandShortcut = ({
     <span
       className={cn(
         "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
+        className,
       )}
       {...props}
     />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
 
 export {
   Command,
@@ -152,4 +152,4 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-}
+};
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 95b0d38..3db2a7d 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -1,18 +1,18 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { Cross2Icon } from "@radix-ui/react-icons"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -22,12 +22,12 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
   />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -39,7 +39,7 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+        className,
       )}
       {...props}
     >
@@ -50,8 +50,8 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
   className,
@@ -60,12 +60,12 @@ const DialogHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
-)
-DialogHeader.displayName = "DialogHeader"
+);
+DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({
   className,
@@ -74,12 +74,12 @@ const DialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -89,12 +89,12 @@ const DialogTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -105,8 +105,8 @@ const DialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
@@ -119,4 +119,4 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-}
+};
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
index 242b07a..9dc361e 100644
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@@ -1,31 +1,31 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import {
   CheckIcon,
   ChevronRightIcon,
   DotFilledIcon,
-} from "@radix-ui/react-icons"
+} from "@radix-ui/react-icons";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
@@ -33,16 +33,16 @@ const DropdownMenuSubTrigger = React.forwardRef<
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   >
     {children}
     <ChevronRightIcon className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
-))
+));
 DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+  DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -52,13 +52,13 @@ const DropdownMenuSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      className,
     )}
     {...props}
   />
-))
+));
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+  DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -71,18 +71,18 @@ const DropdownMenuContent = React.forwardRef<
       className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        className,
       )}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
@@ -90,12 +90,12 @@ const DropdownMenuItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -105,7 +105,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     checked={checked}
     {...props}
@@ -117,9 +117,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-))
+));
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+  DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -129,7 +129,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -140,13 +140,13 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
@@ -154,12 +154,12 @@ const DropdownMenuLabel = React.forwardRef<
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -170,8 +170,8 @@ const DropdownMenuSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({
   className,
@@ -182,9 +182,9 @@ const DropdownMenuShortcut = ({
       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
       {...props}
     />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {
   DropdownMenu,
@@ -202,4 +202,4 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
-}
+};
diff --git a/components/ui/form.tsx b/components/ui/form.tsx
index f6afdaf..670c325 100644
--- a/components/ui/form.tsx
+++ b/components/ui/form.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
 import {
   Controller,
   ControllerProps,
@@ -8,27 +8,27 @@ import {
   FieldValues,
   FormProvider,
   useFormContext,
-} from "react-hook-form"
+} from "react-hook-form";
 
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
 
-const Form = FormProvider
+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>,
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
@@ -36,21 +36,21 @@ const FormField = <
     <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,
@@ -59,36 +59,36 @@ 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, ...props }, ref) => {
-  const id = React.useId()
+  const id = React.useId();
 
   return (
     <FormItemContext.Provider value={{ id }}>
       <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, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
+  const { error, formItemId } = useFormField();
 
   return (
     <Label
@@ -97,15 +97,16 @@ const FormLabel = React.forwardRef<
       htmlFor={formItemId}
       {...props}
     />
-  )
-})
-FormLabel.displayName = "FormLabel"
+  );
+});
+FormLabel.displayName = "FormLabel";
 
 const FormControl = React.forwardRef<
   React.ElementRef<typeof Slot>,
   React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
 
   return (
     <Slot
@@ -119,15 +120,15 @@ const FormControl = React.forwardRef<
       aria-invalid={!!error}
       {...props}
     />
-  )
-})
-FormControl.displayName = "FormControl"
+  );
+});
+FormControl.displayName = "FormControl";
 
 const FormDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
+  const { formDescriptionId } = useFormField();
 
   return (
     <p
@@ -136,19 +137,19 @@ const FormDescription = React.forwardRef<
       className={cn("text-[0.8rem] text-muted-foreground", className)}
       {...props}
     />
-  )
-})
-FormDescription.displayName = "FormDescription"
+  );
+});
+FormDescription.displayName = "FormDescription";
 
 const FormMessage = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message) : children
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
 
   if (!body) {
-    return null
+    return null;
   }
 
   return (
@@ -160,9 +161,9 @@ const FormMessage = React.forwardRef<
     >
       {body}
     </p>
-  )
-})
-FormMessage.displayName = "FormMessage"
+  );
+});
+FormMessage.displayName = "FormMessage";
 
 export {
   useFormField,
@@ -173,4 +174,4 @@ export {
   FormDescription,
   FormMessage,
   FormField,
-}
+};
diff --git a/components/ui/hover-card.tsx b/components/ui/hover-card.tsx
index e54d91c..9e8c62d 100644
--- a/components/ui/hover-card.tsx
+++ b/components/ui/hover-card.tsx
@@ -1,13 +1,13 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const HoverCard = HoverCardPrimitive.Root
+const HoverCard = HoverCardPrimitive.Root;
 
-const HoverCardTrigger = HoverCardPrimitive.Trigger
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
 
 const HoverCardContent = React.forwardRef<
   React.ElementRef<typeof HoverCardPrimitive.Content>,
@@ -19,11 +19,11 @@ const HoverCardContent = React.forwardRef<
     sideOffset={sideOffset}
     className={cn(
       "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      className,
     )}
     {...props}
   />
-))
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
-export { HoverCard, HoverCardTrigger, HoverCardContent }
+export { HoverCard, HoverCardTrigger, HoverCardContent };
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
index a92b8e0..14fcc54 100644
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -12,14 +12,14 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         type={type}
         className={cn(
           "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          className,
         )}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Input.displayName = "Input"
+    );
+  },
+);
+Input.displayName = "Input";
 
-export { Input }
+export { Input };
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
index 5341821..84f8b0c 100644
--- a/components/ui/label.tsx
+++ b/components/ui/label.tsx
@@ -1,14 +1,14 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
@@ -20,7 +20,7 @@ const Label = React.forwardRef<
     className={cn(labelVariants(), className)}
     {...props}
   />
-))
-Label.displayName = LabelPrimitive.Root.displayName
+));
+Label.displayName = LabelPrimitive.Root.displayName;
 
-export { Label }
+export { Label };
diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx
index 5841fb3..6e00b3d 100644
--- a/components/ui/navigation-menu.tsx
+++ b/components/ui/navigation-menu.tsx
@@ -1,9 +1,9 @@
-import * as React from "react"
-import { ChevronDownIcon } from "@radix-ui/react-icons"
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
-import { cva } from "class-variance-authority"
+import * as React from "react";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,
@@ -13,15 +13,15 @@ const NavigationMenu = React.forwardRef<
     ref={ref}
     className={cn(
       "relative z-10 flex max-w-max flex-1 items-center justify-center",
-      className
+      className,
     )}
     {...props}
   >
     {children}
     <NavigationMenuViewport />
   </NavigationMenuPrimitive.Root>
-))
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
 
 const NavigationMenuList = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.List>,
@@ -31,18 +31,18 @@ const NavigationMenuList = React.forwardRef<
     ref={ref}
     className={cn(
       "group flex flex-1 list-none items-center justify-center space-x-1",
-      className
+      className,
     )}
     {...props}
   />
-))
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 
-const NavigationMenuItem = NavigationMenuPrimitive.Item
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
-)
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
+);
 
 const NavigationMenuTrigger = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
@@ -59,8 +59,8 @@ const NavigationMenuTrigger = React.forwardRef<
       aria-hidden="true"
     />
   </NavigationMenuPrimitive.Trigger>
-))
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
 
 const NavigationMenuContent = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Content>,
@@ -70,14 +70,14 @@ const NavigationMenuContent = React.forwardRef<
     ref={ref}
     className={cn(
       "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
-      className
+      className,
     )}
     {...props}
   />
-))
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 
-const NavigationMenuLink = NavigationMenuPrimitive.Link
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
 
 const NavigationMenuViewport = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
@@ -87,15 +87,15 @@ const NavigationMenuViewport = React.forwardRef<
     <NavigationMenuPrimitive.Viewport
       className={cn(
         "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
-        className
+        className,
       )}
       ref={ref}
       {...props}
     />
   </div>
-))
+));
 NavigationMenuViewport.displayName =
-  NavigationMenuPrimitive.Viewport.displayName
+  NavigationMenuPrimitive.Viewport.displayName;
 
 const NavigationMenuIndicator = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
@@ -105,15 +105,15 @@ const NavigationMenuIndicator = React.forwardRef<
     ref={ref}
     className={cn(
       "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
-      className
+      className,
     )}
     {...props}
   >
     <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuPrimitive.Indicator>
-))
+));
 NavigationMenuIndicator.displayName =
-  NavigationMenuPrimitive.Indicator.displayName
+  NavigationMenuPrimitive.Indicator.displayName;
 
 export {
   navigationMenuTriggerStyle,
@@ -125,4 +125,4 @@ export {
   NavigationMenuLink,
   NavigationMenuIndicator,
   NavigationMenuViewport,
-}
+};
diff --git a/components/ui/otp.tsx b/components/ui/otp.tsx
index 32aaad1..7409e87 100644
--- a/components/ui/otp.tsx
+++ b/components/ui/otp.tsx
@@ -11,7 +11,7 @@ let currentOtpIndex: number = 0;
 
 const Otp = ({ length, otp, onOtpChange }: OtpInputProps): JSX.Element => {
   const [tempOtp, setTempOtp] = useState<string[]>(
-    new Array(length || 6).fill("")
+    new Array(length || 6).fill(""),
   );
   const [activeOtpIndex, setActiveOtpIndex] = useState<number>(0);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -28,14 +28,14 @@ const Otp = ({ length, otp, onOtpChange }: OtpInputProps): JSX.Element => {
 
     setTempOtp(newOtp);
     onOtpChange(
-      isNaN(parseInt(newOtp.join(""))) ? 0 : parseInt(newOtp.join(""))
+      isNaN(parseInt(newOtp.join(""))) ? 0 : parseInt(newOtp.join("")),
     );
     otp = isNaN(parseInt(tempOtp.join(""))) ? 0 : parseInt(tempOtp.join(""));
   };
 
   const handleOnKeyDown = (
     { key }: React.KeyboardEvent<HTMLInputElement>,
-    index: number
+    index: number,
   ) => {
     currentOtpIndex = index;
     if (key === "Backspace") {
@@ -71,4 +71,4 @@ const Otp = ({ length, otp, onOtpChange }: OtpInputProps): JSX.Element => {
   );
 };
 
-export default Otp;
\ No newline at end of file
+export default Otp;
diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx
index 29c7bd2..bd49501 100644
--- a/components/ui/popover.tsx
+++ b/components/ui/popover.tsx
@@ -1,15 +1,15 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;
 
-const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverTrigger = PopoverPrimitive.Trigger;
 
-const PopoverAnchor = PopoverPrimitive.Anchor
+const PopoverAnchor = PopoverPrimitive.Anchor;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
@@ -22,12 +22,12 @@ const PopoverContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        className,
       )}
       {...props}
     />
   </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/components/ui/radio-group.tsx b/components/ui/radio-group.tsx
index dd0ed89..3ba70e6 100644
--- a/components/ui/radio-group.tsx
+++ b/components/ui/radio-group.tsx
@@ -28,7 +28,7 @@ const RadioGroupItem = React.forwardRef<
       ref={ref}
       className={cn(
         "aspect-square h-4 w-4 rounded-full border-2 border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     >
diff --git a/components/ui/scroll-area.tsx b/components/ui/scroll-area.tsx
index 0b4a48d..b1f1127 100644
--- a/components/ui/scroll-area.tsx
+++ b/components/ui/scroll-area.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
@@ -20,8 +20,8 @@ const ScrollArea = React.forwardRef<
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
@@ -36,13 +36,13 @@ const ScrollBar = React.forwardRef<
         "h-full w-2.5 border-l border-l-transparent p-[1px]",
       orientation === "horizontal" &&
         "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
+      className,
     )}
     {...props}
   >
     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index ac2a8f2..11fc181 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -1,21 +1,21 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
 import {
   CaretSortIcon,
   CheckIcon,
   ChevronDownIcon,
   ChevronUpIcon,
-} from "@radix-ui/react-icons"
-import * as SelectPrimitive from "@radix-ui/react-select"
+} from "@radix-ui/react-icons";
+import * as SelectPrimitive from "@radix-ui/react-select";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
 
-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;
 
-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -25,7 +25,7 @@ const SelectTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
+      className,
     )}
     {...props}
   >
@@ -34,8 +34,8 @@ const SelectTrigger = React.forwardRef<
       <CaretSortIcon className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@@ -45,14 +45,14 @@ const SelectScrollUpButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1",
-      className
+      className,
     )}
     {...props}
   >
     <ChevronUpIcon />
   </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -62,15 +62,15 @@ const SelectScrollDownButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1",
-      className
+      className,
     )}
     {...props}
   >
     <ChevronDownIcon />
   </SelectPrimitive.ScrollDownButton>
-))
+));
 SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+  SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -83,7 +83,7 @@ const SelectContent = React.forwardRef<
         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
+        className,
       )}
       position={position}
       {...props}
@@ -93,7 +93,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           "p-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
         )}
       >
         {children}
@@ -101,8 +101,8 @@ const SelectContent = React.forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
@@ -113,8 +113,8 @@ const SelectLabel = React.forwardRef<
     className={cn("px-2 py-1.5 text-sm font-semibold", className)}
     {...props}
   />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -124,7 +124,7 @@ const SelectItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -135,8 +135,8 @@ const SelectItem = React.forwardRef<
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -147,8 +147,8 @@ const SelectSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
@@ -161,4 +161,4 @@ export {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
-}
+};
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
index 12d81c4..9ac3b95 100644
--- a/components/ui/separator.tsx
+++ b/components/ui/separator.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
@@ -11,7 +11,7 @@ const Separator = React.forwardRef<
 >(
   (
     { className, orientation = "horizontal", decorative = true, ...props },
-    ref
+    ref,
   ) => (
     <SeparatorPrimitive.Root
       ref={ref}
@@ -20,12 +20,12 @@ const Separator = React.forwardRef<
       className={cn(
         "shrink-0 bg-border",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
+        className,
       )}
       {...props}
     />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-export { Separator }
+export { Separator };
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
index b3a996b..3a70801 100644
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@@ -1,19 +1,19 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { Cross2Icon } from "@radix-ui/react-icons"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Sheet = SheetPrimitive.Root
+const Sheet = SheetPrimitive.Root;
 
-const SheetTrigger = SheetPrimitive.Trigger
+const SheetTrigger = SheetPrimitive.Trigger;
 
-const SheetClose = SheetPrimitive.Close
+const SheetClose = SheetPrimitive.Close;
 
-const SheetPortal = SheetPrimitive.Portal
+const SheetPortal = SheetPrimitive.Portal;
 
 const SheetOverlay = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Overlay>,
@@ -22,13 +22,13 @@ const SheetOverlay = React.forwardRef<
   <SheetPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
     ref={ref}
   />
-))
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
@@ -46,8 +46,8 @@ const sheetVariants = cva(
     defaultVariants: {
       side: "right",
     },
-  }
-)
+  },
+);
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
@@ -71,8 +71,8 @@ const SheetContent = React.forwardRef<
       </SheetPrimitive.Close> */}
     </SheetPrimitive.Content>
   </SheetPortal>
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 const SheetHeader = ({
   className,
@@ -81,12 +81,12 @@ const SheetHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-2 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
-)
-SheetHeader.displayName = "SheetHeader"
+);
+SheetHeader.displayName = "SheetHeader";
 
 const SheetFooter = ({
   className,
@@ -95,12 +95,12 @@ const SheetFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
-)
-SheetFooter.displayName = "SheetFooter"
+);
+SheetFooter.displayName = "SheetFooter";
 
 const SheetTitle = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Title>,
@@ -111,8 +111,8 @@ const SheetTitle = React.forwardRef<
     className={cn("text-lg font-semibold text-foreground", className)}
     {...props}
   />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 const SheetDescription = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Description>,
@@ -123,8 +123,8 @@ const SheetDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
   Sheet,
@@ -137,4 +137,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-}
+};
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
index d7e45f7..c26c4ea 100644
--- a/components/ui/skeleton.tsx
+++ b/components/ui/skeleton.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Skeleton({
   className,
@@ -9,7 +9,7 @@ function Skeleton({
       className={cn("animate-pulse rounded-md bg-primary/10", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Skeleton }
+export { Skeleton };
diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx
index 452f4d9..549cf84 100644
--- a/components/ui/sonner.tsx
+++ b/components/ui/sonner.tsx
@@ -1,12 +1,12 @@
-"use client"
+"use client";
 
-import { useTheme } from "next-themes"
-import { Toaster as Sonner } from "sonner"
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
 
-type ToasterProps = React.ComponentProps<typeof Sonner>
+type ToasterProps = React.ComponentProps<typeof Sonner>;
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
+  const { theme = "system" } = useTheme();
 
   return (
     <Sonner
@@ -25,7 +25,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
       }}
       {...props}
     />
-  )
-}
+  );
+};
 
-export { Toaster }
+export { Toaster };
diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx
index 5f4117f..d692565 100644
--- a/components/ui/switch.tsx
+++ b/components/ui/switch.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -12,18 +12,18 @@ const Switch = React.forwardRef<
   <SwitchPrimitives.Root
     className={cn(
       "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className
+      className,
     )}
     {...props}
     ref={ref}
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
       )}
     />
   </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
-export { Switch }
+export { Switch };
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
index c0df655..d109c2a 100644
--- a/components/ui/table.tsx
+++ b/components/ui/table.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Table = React.forwardRef<
   HTMLTableElement,
@@ -13,16 +13,16 @@ const Table = React.forwardRef<
       {...props}
     />
   </div>
-))
-Table.displayName = "Table"
+));
+Table.displayName = "Table";
 
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
+));
+TableHeader.displayName = "TableHeader";
 
 const TableBody = React.forwardRef<
   HTMLTableSectionElement,
@@ -33,8 +33,8 @@ const TableBody = React.forwardRef<
     className={cn("[&_tr:last-child]:border-0", className)}
     {...props}
   />
-))
-TableBody.displayName = "TableBody"
+));
+TableBody.displayName = "TableBody";
 
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
@@ -44,12 +44,12 @@ const TableFooter = React.forwardRef<
     ref={ref}
     className={cn(
       "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
+      className,
     )}
     {...props}
   />
-))
-TableFooter.displayName = "TableFooter"
+));
+TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
@@ -59,12 +59,12 @@ const TableRow = React.forwardRef<
     ref={ref}
     className={cn(
       "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
+      className,
     )}
     {...props}
   />
-))
-TableRow.displayName = "TableRow"
+));
+TableRow.displayName = "TableRow";
 
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
@@ -74,12 +74,12 @@ const TableHead = React.forwardRef<
     ref={ref}
     className={cn(
       "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
+      className,
     )}
     {...props}
   />
-))
-TableHead.displayName = "TableHead"
+));
+TableHead.displayName = "TableHead";
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
@@ -89,12 +89,12 @@ const TableCell = React.forwardRef<
     ref={ref}
     className={cn(
       "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className
+      className,
     )}
     {...props}
   />
-))
-TableCell.displayName = "TableCell"
+));
+TableCell.displayName = "TableCell";
 
 const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
@@ -105,8 +105,8 @@ const TableCaption = React.forwardRef<
     className={cn("mt-4 text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-TableCaption.displayName = "TableCaption"
+));
+TableCaption.displayName = "TableCaption";
 
 export {
   Table,
@@ -117,4 +117,4 @@ export {
   TableRow,
   TableCell,
   TableCaption,
-}
+};
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
index d1258e4..0e546bb 100644
--- a/components/ui/textarea.tsx
+++ b/components/ui/textarea.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 export interface TextareaProps
   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
@@ -11,14 +11,14 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <textarea
         className={cn(
           "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          className,
         )}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Textarea.displayName = "Textarea"
+    );
+  },
+);
+Textarea.displayName = "Textarea";
 
-export { Textarea }
+export { Textarea };
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
index 9e74821..92a97e4 100644
--- a/components/ui/tooltip.tsx
+++ b/components/ui/tooltip.tsx
@@ -1,15 +1,15 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const TooltipProvider = TooltipPrimitive.Provider
+const TooltipProvider = TooltipPrimitive.Provider;
 
-const Tooltip = TooltipPrimitive.Root
+const Tooltip = TooltipPrimitive.Root;
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -20,11 +20,11 @@ const TooltipContent = React.forwardRef<
     sideOffset={sideOffset}
     className={cn(
       "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      className,
     )}
     {...props}
   />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/components/user-info.tsx b/components/user-info.tsx
index 3f7cdc4..d8c338c 100644
--- a/components/user-info.tsx
+++ b/components/user-info.tsx
@@ -1,72 +1,51 @@
 import { ExtendedUser } from "@/next-auth";
-import { 
-  Card, 
-  CardContent, 
-  CardHeader
-} from "@/components/ui/card";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 
 interface UserInfoProps {
   user?: ExtendedUser;
   label: string;
-};
+}
 
-export const UserInfo = ({
-  user,
-  label,
-}: UserInfoProps) => {
+export const UserInfo = ({ user, label }: UserInfoProps) => {
   return (
     <Card className="w-[600px] shadow-md">
       <CardHeader>
-        <p className="text-2xl font-semibold text-center">
-          {label}
-        </p>
+        <p className="text-2xl font-semibold text-center">{label}</p>
       </CardHeader>
       <CardContent className="space-y-4">
         <div className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-          <p className="text-sm font-medium">
-            ID
-          </p>
+          <p className="text-sm font-medium">ID</p>
           <p className="truncate text-xs text-black max-w-[180px] font-mono p-1 bg-slate-100 rounded-md">
             {user?.id}
           </p>
         </div>
         <div className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-          <p className="text-sm font-medium">
-            Name
-          </p>
+          <p className="text-sm font-medium">Name</p>
           <p className="truncate text-xs text-black max-w-[180px] font-mono p-1 bg-slate-100 rounded-md">
             {user?.name}
           </p>
         </div>
         <div className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-          <p className="text-sm font-medium">
-            Email
-          </p>
+          <p className="text-sm font-medium">Email</p>
           <p className="truncate text-xs text-black max-w-[180px] font-mono p-1 bg-slate-100 rounded-md">
             {user?.email}
           </p>
         </div>
         <div className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-          <p className="text-sm font-medium">
-            Role
-          </p>
+          <p className="text-sm font-medium">Role</p>
           <p className="truncate text-xs text-black max-w-[180px] font-mono p-1 bg-slate-100 rounded-md">
             {user?.role}
           </p>
         </div>
 
         <div className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
-          <p className="text-sm font-medium">
-            Two Factor Authentication
-          </p>
-          <Badge 
-            variant={user?.isTwoFactorEnabled ? "success" : "destructive"}
-          >
+          <p className="text-sm font-medium">Two Factor Authentication</p>
+          <Badge variant={user?.isTwoFactorEnabled ? "success" : "destructive"}>
             {user?.isTwoFactorEnabled ? "ON" : "OFF"}
           </Badge>
         </div>
       </CardContent>
     </Card>
-  )
-}
\ No newline at end of file
+  );
+};
diff --git a/context/userContext.tsx b/context/userContext.tsx
index 893a6cc..137a36b 100644
--- a/context/userContext.tsx
+++ b/context/userContext.tsx
@@ -5,8 +5,7 @@ import Loader from "@/components/Loader";
 import { User } from "@prisma/client";
 import { useCurrentUser } from "@/hooks/use-current-user";
 import { whoami } from "@/actions/whoami";
-import { debounce, set } from "lodash";
-import { notFound } from "next/navigation";
+import { debounce } from "lodash";
 
 const AuthContext = createContext<{
   user: User | null;
diff --git a/data/account.ts b/data/account.ts
index d9d4a01..73dc882 100644
--- a/data/account.ts
+++ b/data/account.ts
@@ -3,7 +3,7 @@ import { db } from "@/lib/db";
 export const getAccountByUserId = async (userId: string) => {
   try {
     const account = await db.account.findFirst({
-      where: { userId }
+      where: { userId },
     });
 
     return account;
diff --git a/data/password-reset-token.ts b/data/password-reset-token.ts
index 677c730..92b4496 100644
--- a/data/password-reset-token.ts
+++ b/data/password-reset-token.ts
@@ -3,7 +3,7 @@ import { db } from "@/lib/db";
 export const getPasswordResetTokenByToken = async (token: string) => {
   try {
     const passwordResetToken = await db.passwordResetToken.findUnique({
-      where: { token }
+      where: { token },
     });
 
     return passwordResetToken;
@@ -15,11 +15,11 @@ export const getPasswordResetTokenByToken = async (token: string) => {
 export const getPasswordResetTokenByEmail = async (email: string) => {
   try {
     const passwordResetToken = await db.passwordResetToken.findFirst({
-      where: { email }
+      where: { email },
     });
 
     return passwordResetToken;
   } catch {
     return null;
   }
-};
\ No newline at end of file
+};
diff --git a/data/two-factor-confirmation.ts b/data/two-factor-confirmation.ts
index 5ed106c..d4dd095 100644
--- a/data/two-factor-confirmation.ts
+++ b/data/two-factor-confirmation.ts
@@ -1,11 +1,9 @@
 import { db } from "@/lib/db";
 
-export const getTwoFactorConfirmationByUserId = async (
-  userId: string
-) => {
+export const getTwoFactorConfirmationByUserId = async (userId: string) => {
   try {
     const twoFactorConfirmation = await db.twoFactorConfirmation.findUnique({
-      where: { userId }
+      where: { userId },
     });
 
     return twoFactorConfirmation;
diff --git a/data/two-factor-token.ts b/data/two-factor-token.ts
index 6def123..80dbc03 100644
--- a/data/two-factor-token.ts
+++ b/data/two-factor-token.ts
@@ -3,7 +3,7 @@ import { db } from "@/lib/db";
 export const getTwoFactorTokenByToken = async (token: string) => {
   try {
     const twoFactorToken = await db.twoFactorToken.findUnique({
-      where: { token }
+      where: { token },
     });
 
     return twoFactorToken;
@@ -15,7 +15,7 @@ export const getTwoFactorTokenByToken = async (token: string) => {
 export const getTwoFactorTokenByEmail = async (email: string) => {
   try {
     const twoFactorToken = await db.twoFactorToken.findFirst({
-      where: { email }
+      where: { email },
     });
 
     return twoFactorToken;
diff --git a/data/verificiation-token.ts b/data/verificiation-token.ts
index 2db9ad2..908647b 100644
--- a/data/verificiation-token.ts
+++ b/data/verificiation-token.ts
@@ -1,29 +1,25 @@
 import { db } from "@/lib/db";
 
-export const getVerificationTokenByToken = async (
-  token: string
-) => {
+export const getVerificationTokenByToken = async (token: string) => {
   try {
     const verificationToken = await db.verificationToken.findUnique({
-      where: { token }
+      where: { token },
     });
 
     return verificationToken;
   } catch {
     return null;
   }
-}
+};
 
-export const getVerificationTokenByEmail = async (
-  email: string
-) => {
+export const getVerificationTokenByEmail = async (email: string) => {
   try {
     const verificationToken = await db.verificationToken.findFirst({
-      where: { email }
+      where: { email },
     });
 
     return verificationToken;
   } catch {
     return null;
   }
-}
\ No newline at end of file
+};
diff --git a/lib/db.ts b/lib/db.ts
index 9565411..0e6a5bf 100644
--- a/lib/db.ts
+++ b/lib/db.ts
@@ -6,4 +6,4 @@ declare global {
 
 export const db = globalThis.prisma || new PrismaClient();
 
-if (process.env.NODE_ENV !== "production") globalThis.prisma = db;
\ No newline at end of file
+if (process.env.NODE_ENV !== "production") globalThis.prisma = db;
diff --git a/lib/genAI.ts b/lib/genAI.ts
index 8abeac3..1bd9bd7 100644
--- a/lib/genAI.ts
+++ b/lib/genAI.ts
@@ -1,10 +1,8 @@
-import {
-  GoogleGenerativeAI,
-} from "@google/generative-ai";
+import { GoogleGenerativeAI } from "@google/generative-ai";
 
 if (!process.env.GENERATIVE_API_KEY) {
   throw new Error(
-    "You must define the GENERATIVE_API_KEY environment variable"
+    "You must define the GENERATIVE_API_KEY environment variable",
   );
 }
 export const genAI = new GoogleGenerativeAI(process.env.GENERATIVE_API_KEY);
diff --git a/lib/tokens.ts b/lib/tokens.ts
index 2b6484f..1a2c84d 100644
--- a/lib/tokens.ts
+++ b/lib/tokens.ts
@@ -16,7 +16,7 @@ export const generateTwoFactorToken = async (email: string) => {
     await db.twoFactorToken.delete({
       where: {
         id: existingToken.id,
-      }
+      },
     });
   }
 
@@ -25,11 +25,11 @@ export const generateTwoFactorToken = async (email: string) => {
       email,
       token,
       expires,
-    }
+    },
   });
 
   return twoFactorToken;
-}
+};
 
 export const generatePasswordResetToken = async (email: string) => {
   const token = uuidv4();
@@ -39,7 +39,7 @@ export const generatePasswordResetToken = async (email: string) => {
 
   if (existingToken) {
     await db.passwordResetToken.delete({
-      where: { id: existingToken.id }
+      where: { id: existingToken.id },
     });
   }
 
@@ -47,12 +47,12 @@ export const generatePasswordResetToken = async (email: string) => {
     data: {
       email,
       token,
-      expires
-    }
+      expires,
+    },
   });
 
   return passwordResetToken;
-}
+};
 
 export const generateVerificationToken = async (email: string) => {
   const token = uuidv4();
@@ -73,7 +73,7 @@ export const generateVerificationToken = async (email: string) => {
       email,
       token,
       expires,
-    }
+    },
   });
 
   return verficationToken;
diff --git a/lib/utils.ts b/lib/utils.ts
index d084cca..365058c 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,6 +1,6 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }
diff --git a/middleware.ts b/middleware.ts
deleted file mode 100644
index 8e4ef74..0000000
--- a/middleware.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import NextAuth from "next-auth";
-import authConfig from "@/auth.config";
-import {
-  DEFAULT_LOGIN_REDIRECT,
-  apiAuthPrefix,
-  authRoutes,
-  publicRoutes,
-} from "@/routes";
-
-const { auth } = NextAuth(authConfig);
-
-export default auth((req) => {
-  const { nextUrl } = req;
-  const isLoggedIn = !!req.auth;
-
-  const isApiAuthRoute = nextUrl.pathname.startsWith(apiAuthPrefix);
-  const isPublicRoute = publicRoutes.some(route => {
-    // Check if the route is a dynamic parameter route
-    if (route.includes('/:')) {
-      const regex = new RegExp(route.replace(/:[^/]+/g, '[^/]+'));
-      return regex.test(nextUrl.pathname);
-    }
-    return route === nextUrl.pathname;
-  });
-  const isAuthRoute = authRoutes.includes(nextUrl.pathname);
-
-  if (isApiAuthRoute) {
-    return null;
-  }
-
-  if (isAuthRoute) {
-    if (isLoggedIn) {
-      return Response.redirect(new URL(DEFAULT_LOGIN_REDIRECT, nextUrl));
-    }
-    return null;
-  }
-
-  if (!isLoggedIn && !isPublicRoute) {
-    let callbackUrl = nextUrl.pathname;
-    if (nextUrl.search) {
-      callbackUrl += nextUrl.search;
-    }
-
-    const encodedCallbackUrl = encodeURIComponent(callbackUrl);
-
-    return Response.redirect(new URL(
-      `/login?callbackUrl=${encodedCallbackUrl}`,
-      nextUrl
-    ));
-  }
-
-  return null;
-});
-
-// Optionally, don't invoke Middleware on some paths
-export const config = {
-  matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
-};
diff --git a/package-lock.json b/package-lock.json
index 5751019..fde30b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55,6 +55,7 @@
         "nextjs-toploader": "^1.6.6",
         "react": "^18",
         "react-dom": "^18",
+        "react-dropzone": "^14.2.3",
         "react-hook-form": "^7.49.3",
         "react-icons": "^5.0.1",
         "react-otp-input": "^3.1.1",
@@ -86,6 +87,7 @@
         "jest": "^29.7.0",
         "jsdom": "^24.0.0",
         "postcss": "^8",
+        "prettier": "3.2.5",
         "prisma": "^5.9.1",
         "tailwindcss": "^3.3.0",
         "typescript": "^5",
@@ -5418,6 +5420,14 @@
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
+    "node_modules/attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.17",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.17.tgz",
@@ -7858,6 +7868,17 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -12943,6 +12964,21 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "3.8.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz",
@@ -13124,6 +13160,22 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-dropzone": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
+      "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
+      "dependencies": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8 || 18.0.0"
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.49.3",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.49.3.tgz",
diff --git a/package.json b/package.json
index 555e075..29f2a27 100644
--- a/package.json
+++ b/package.json
@@ -4,12 +4,13 @@
   "private": true,
   "scripts": {
     "postinstall": "prisma generate",
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "build": "prisma generate && next build",
     "start": "next start",
     "lint": "next lint",
     "prisma": "prisma generate && prisma db push ",
-    "test": "next lint"
+    "format": "prettier . --write",
+    "prettier": "prettier . --write"
   },
   "dependencies": {
     "@auth/mongodb-adapter": "^2.1.0",
@@ -58,6 +59,7 @@
     "nextjs-toploader": "^1.6.6",
     "react": "^18",
     "react-dom": "^18",
+    "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.49.3",
     "react-icons": "^5.0.1",
     "react-otp-input": "^3.1.1",
@@ -89,6 +91,7 @@
     "jest": "^29.7.0",
     "jsdom": "^24.0.0",
     "postcss": "^8",
+    "prettier": "3.2.5",
     "prisma": "^5.9.1",
     "tailwindcss": "^3.3.0",
     "typescript": "^5",
diff --git a/protectedRouter.tsx b/protectedRouter.tsx
index d04940c..ed2bfc2 100644
--- a/protectedRouter.tsx
+++ b/protectedRouter.tsx
@@ -1,15 +1,15 @@
 import { NextComponentType } from "next";
-import LoginRequired from "./components/LoginRequired";
 import { useSession } from "next-auth/react";
+import { redirect } from "next/navigation";
 
 export function withAuth(Component: NextComponentType) {
-  return async function AuthComponent(props: any) {
-    const session = useSession();
+  return function AuthComponent(props: any) {
+    const { data: session } = useSession();
 
-    if (session.status === "unauthenticated") {
-      return <LoginRequired />;
+    if (!session) {
+      return redirect(`/login`);
     }
 
-    return session ? <Component {...props} /> : null;
+    return <Component {...props} />;
   };
 }
diff --git a/routes.ts b/routes.ts
index b97baa0..5121316 100644
--- a/routes.ts
+++ b/routes.ts
@@ -29,4 +29,4 @@ export const apiAuthPrefix = "/api/auth";
  * The default redirect path after logging in
  * @type {string}
  */
-export const DEFAULT_LOGIN_REDIRECT = "/";
\ No newline at end of file
+export const DEFAULT_LOGIN_REDIRECT = "/";
diff --git a/schemas/index.ts b/schemas/index.ts
index 310e3ac..220045e 100644
--- a/schemas/index.ts
+++ b/schemas/index.ts
@@ -23,7 +23,7 @@ export const SettingsSchema = z
     {
       message: "New password is required!",
       path: ["newPassword"],
-    }
+    },
   )
   .refine(
     (data) => {
@@ -36,7 +36,7 @@ export const SettingsSchema = z
     {
       message: "Password is required!",
       path: ["password"],
-    }
+    },
   );
 
 export const NewPasswordSchema = z.object({
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 84287e8..41668a3 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,13 +1,13 @@
-import type { Config } from "tailwindcss"
+import type { Config } from "tailwindcss";
 
 const config = {
   darkMode: ["class"],
   content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-	],
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+  ],
   prefix: "",
   theme: {
     container: {
@@ -75,6 +75,6 @@ const config = {
     },
   },
   plugins: [require("tailwindcss-animate")],
-} satisfies Config
+} satisfies Config;
 
-export default config
\ No newline at end of file
+export default config;
diff --git a/types/RepoInterface.ts b/types/RepoInterface.ts
index 3e3f32e..de62957 100644
--- a/types/RepoInterface.ts
+++ b/types/RepoInterface.ts
@@ -1,24 +1,23 @@
 export interface RepoInterface {
-    _id: string;
-    author: string;
-    authorId: string;
-    name: string;
-    stars: number;
-    mostusedlanguage: string;
-    description: string;
-    isprivate: boolean;
-    commiteId: CommiteIdInterface[];
-    createdAt: string;
-    updatedAt: string;
-    __v: number;
-  }
-  
-  export interface CommiteIdInterface {
-    username: string;
-    commiteId: string;
-    title: string;
-    description: string;
-    _id: string;
-    time: string;
-  }
-  
\ No newline at end of file
+  _id: string;
+  author: string;
+  authorId: string;
+  name: string;
+  stars: number;
+  mostusedlanguage: string;
+  description: string;
+  isprivate: boolean;
+  commiteId: CommiteIdInterface[];
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+}
+
+export interface CommiteIdInterface {
+  username: string;
+  commiteId: string;
+  title: string;
+  description: string;
+  _id: string;
+  time: string;
+}