diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..425d2a6
--- /dev/null
+++ b/.env.example
@@ -0,0 +1 @@
+API_URL="http://localhost:3001/api"
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 1571e3f..6fc4631 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "axios": "^1.6.8",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
+        "dotenv": "^16.4.5",
         "jwt-decode": "^3.1.2",
         "lucide-react": "^0.378.0",
         "react": "^18.2.0",
@@ -23,8 +24,7 @@
         "react-hook-form": "^7.51.4",
         "react-router-dom": "^6.23.1",
         "tailwind-merge": "^2.3.0",
-        "tailwindcss-animate": "^1.0.7",
-        "zod": "^3.23.8"
+        "tailwindcss-animate": "^1.0.7"
       },
       "devDependencies": {
         "@eslint/compat": "^1.0.1",
@@ -1074,6 +1074,18 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
+      "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
@@ -2833,6 +2845,14 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/call-bind": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@@ -3195,6 +3215,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -6008,6 +6039,29 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -6299,6 +6353,34 @@
         "tailwindcss": ">=3.0.0 || insiders"
       }
     },
+    "node_modules/terser": {
+      "version": "5.31.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.31.0.tgz",
+      "integrity": "sha512-Q1JFAoUKE5IMfI4Z/lkE/E6+SwgzO+x4tq4v1AyBLRj8VSYvRO6A/rQrPg1yud4g0En9EKI1TvFRF2tQFcoUkg==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.8.2",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -7026,14 +7108,6 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
-    },
-    "node_modules/zod": {
-      "version": "3.23.8",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
-      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
     }
   }
 }
diff --git a/package.json b/package.json
index 662e25c..b3fb384 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "dotenv": "^16.4.5",
     "jwt-decode": "^3.1.2",
     "lucide-react": "^0.378.0",
     "react": "^18.2.0",
@@ -24,8 +25,7 @@
     "react-hook-form": "^7.51.4",
     "react-router-dom": "^6.23.1",
     "tailwind-merge": "^2.3.0",
-    "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.23.8"
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@eslint/compat": "^1.0.1",
@@ -46,5 +46,13 @@
     "typescript": "^5.2.2",
     "typescript-eslint": "^7.9.0",
     "vite": "^5.2.0"
+  },
+  "overrides": {
+    "typescript": "^5.2.2"
+  },
+  "react-dotenv": {
+    "whitelist": [
+      "API_URL"
+    ]
   }
 }
diff --git a/public/assets/discord.svg b/public/assets/discord.svg
new file mode 100644
index 0000000..66b94ae
--- /dev/null
+++ b/public/assets/discord.svg
@@ -0,0 +1,16 @@
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="800px"
+    height="800px"
+    viewBox="0 -28.5 256 256"
+    version="1.1"
+    preserveAspectRatio="xMidYMid"
+    >
+    <g>
+        <path
+        d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z"
+        fill="#FFFFFF"
+        fill-rule="nonzero"
+        ></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/env.js b/public/env.js
new file mode 100644
index 0000000..60002fb
--- /dev/null
+++ b/public/env.js
@@ -0,0 +1,3 @@
+window.env = {
+  "API_URL": "http://localhost:3001/api"
+};
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 10c82bf..ec25d07 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,4 @@
 // import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
-
 import "./index.css";
 import { Outlet } from "react-router-dom";
 import Nav from "./components/home/NavBar";
@@ -12,7 +11,7 @@ import Footer from "./components/home/Footer";
 // });
 
 function App() {
-  console.log("Welcome to Tomodachi!");
+  console.log("Welcome to RonanServices! Want to contribute?");
   return (
     <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
       <Nav />
diff --git a/src/api/index.js b/src/api/index.js
new file mode 100644
index 0000000..5202816
--- /dev/null
+++ b/src/api/index.js
@@ -0,0 +1,17 @@
+import axios from "axios";
+
+const client = axios.create({
+  // https://api.ronanplugins.com
+  baseURL: import.meta.env.VITE_API_URL,
+  responseType: "json",
+  withCredentials: true,
+  crossdomain: true,
+});
+
+export default {
+  async loginDiscord() {
+    // const params = new URLSearchParams({ username, password });
+
+    return client.get(`/auth/discord`);
+  },
+};
diff --git a/src/components/dialogs/LoginDialog.tsx b/src/components/dialogs/LoginDialog.tsx
new file mode 100644
index 0000000..05ddf58
--- /dev/null
+++ b/src/components/dialogs/LoginDialog.tsx
@@ -0,0 +1,39 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button } from "../ui/button";
+import api from "@/api";
+
+export default function LoginDialog() {
+  const loginHandler = () => {
+    api.loginDiscord();
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger className="font-bold">Login/Register</DialogTrigger>
+      <DialogContent className="h-1/3">
+        <DialogHeader>
+          <DialogTitle>Login/Register</DialogTitle>
+          <DialogDescription className="flex h-full items-center">
+            <Button
+              style={{ backgroundColor: "#5865F2" }}
+              className="flex items-center w-full"
+              variant={"default"}
+              onClick={loginHandler}
+            >
+              <img className="h-6 w-6 mr-2" src="/assets/discord.svg" />
+
+              <span>Continue with Discord</span>
+            </Button>
+          </DialogDescription>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/forms/LoginForm.tsx b/src/components/forms/LoginForm.tsx
deleted file mode 100644
index 5847a01..0000000
--- a/src/components/forms/LoginForm.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-// import { useMutation } from "@apollo/client";
-// import AuthService from "@/utils/auth";
-// import { LOGIN } from "@/utils/mutations";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-// import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-} from "@/components/ui/card";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-
-const formSchema = z.object({
-  username: z.string().min(3, {
-    message: "Username must be at least 3 characters.",
-  }),
-  password: z.string().min(6, {
-    message: "Password must be at least 6 characters.",
-  }),
-});
-
-const LoginForm = () => {
-  const form = useForm({
-    resolver: zodResolver(formSchema),
-  });
-
-  // const [loginUser, { loading, error }] = useMutation(LOGIN);
-
-  const onSubmit = async (formData) => {
-    console.log("Login Form");
-    // try {
-    //   const { data } = await loginUser({
-    //     variables: formData,
-    //   });
-
-    //   // console.log(formData);
-    //   AuthService.login(data.login.token);
-    // } catch (error) {
-    //   console.error("Login error:", error);
-    // }
-  };
-
-  //A react form for the user to fill out that we will export from this page
-  return (
-    <div className="container mx-auto">
-      <Card>
-        <CardHeader>
-          <CardTitle>Log In</CardTitle>
-          <CardDescription>
-            You must be logged in to play the game
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Form {...form}>
-            <form
-              onSubmit={form.handleSubmit(onSubmit)}
-              className="gap-8 flex flex-col"
-            >
-              <FormField
-                control={form.control}
-                name="username"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Username</FormLabel>
-                    <FormControl>
-                      <Input placeholder="Username" {...field} />
-                    </FormControl>
-                    <FormDescription>
-                      This is your public display name.
-                    </FormDescription>
-                    {form.formState.errors.username && (
-                      <FormMessage>
-                        {form.formState.errors.username.message}
-                      </FormMessage>
-                    )}
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="password"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Password</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="password"
-                        placeholder="Password"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormDescription>This is your password.</FormDescription>
-                    {form.formState.errors.password && (
-                      <FormMessage>
-                        {form.formState.errors.password.message}
-                      </FormMessage>
-                    )}
-                  </FormItem>
-                )}
-              />
-              {/* <div className="flex justify-center">
-                <Button className="w-[200px] " type="submit" disabled={loading}>
-                  {loading ? "Logging in..." : "Log in"}
-                </Button>
-              </div>
-              {error && <p>Error: {error.message}</p>} */}
-            </form>
-          </Form>
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
-
-export default LoginForm;
diff --git a/src/components/forms/SignUpForm.tsx b/src/components/forms/SignUpForm.tsx
deleted file mode 100644
index a84d409..0000000
--- a/src/components/forms/SignUpForm.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-// import AuthService from '../utils/auth';
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-} from "@/components/ui/card";
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-
-const formSchema = z.object({
-  username: z.string().min(3, {
-    message: "Username must be at least 3 characters.",
-  }),
-  password: z.string().min(6, {
-    message: "Password must be at least 6 characters.",
-  }),
-  email: z
-    .string()
-    .min(1, "Email is required")
-    .regex(
-      new RegExp(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/),
-      "Please enter a valid email address."
-    ),
-});
-
-const SignUpForm = () => {
-  const form = useForm({
-    resolver: zodResolver(formSchema),
-  });
-
-  // const [signUpUser, { loading, error }] = useMutation(ADD_USER);
-
-  const onSubmit = async (formData) => {
-    console.log("Login button!");
-    // try {
-    //   const { data } = await signUpUser({
-    //     variables: formData,
-    //   });
-
-    //   // console.log(formData);
-    //   AuthService.login(data.addUser.token);
-    // } catch (error) {
-    //   console.error('Sign up error:', error);
-    // }
-  };
-
-  return (
-    <div className="container mx-auto">
-      <Card>
-        <CardHeader>
-          <CardTitle>Create an account</CardTitle>
-          <CardDescription>You must create an account to play</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Form {...form}>
-            <form
-              onSubmit={form.handleSubmit(onSubmit)}
-              className="gap-8 flex flex-col"
-            >
-              <FormField
-                control={form.control}
-                name="email"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Email</FormLabel>
-                    <FormControl>
-                      <Input placeholder="Email" {...field} />
-                    </FormControl>
-                    <FormDescription>
-                      This is your email address.
-                    </FormDescription>
-                    {form.formState.errors.email && (
-                      <FormMessage>
-                        {form.formState.errors.email.message}
-                      </FormMessage>
-                    )}
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="username"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Username</FormLabel>
-                    <FormControl>
-                      <Input placeholder="Username" {...field} />
-                    </FormControl>
-                    <FormDescription>
-                      This is your public display name.
-                    </FormDescription>
-                    {form.formState.errors.username && (
-                      <FormMessage>
-                        {form.formState.errors.username.message}
-                      </FormMessage>
-                    )}
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="password"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Password</FormLabel>
-                    <FormControl>
-                      <Input
-                        type="password"
-                        placeholder="Password"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormDescription>This is your password.</FormDescription>
-                    {form.formState.errors.password && (
-                      <FormMessage>
-                        {form.formState.errors.password.message}
-                      </FormMessage>
-                    )}
-                  </FormItem>
-                )}
-              />
-              {/* <div className="flex justify-center">
-                <Button className="w-[200px] " type="submit" disabled={loading}>
-                  {loading ? "Signing up..." : "Sign up"}
-                </Button>
-              </div> */}
-              {/* {error && <p>Error: {error.message}</p>} */}
-            </form>
-          </Form>
-        </CardContent>
-      </Card>
-    </div>
-  );
-};
-
-export default SignUpForm;
diff --git a/src/components/home/NavBar.tsx b/src/components/home/NavBar.tsx
index 6b3bc29..f30b18d 100644
--- a/src/components/home/NavBar.tsx
+++ b/src/components/home/NavBar.tsx
@@ -6,6 +6,7 @@ import { Sheet, SheetContent, SheetTrigger } from "../ui/sheet";
 import { Menu } from "lucide-react";
 import { useEffect, useState } from "react";
 import NavItem from "./NavItem";
+import LoginDialog from "../dialogs/LoginDialog";
 
 export default function Nav() {
   const [sheetOpen, setSheetOpen] = useState(false);
@@ -67,10 +68,7 @@ export default function Nav() {
                   <Button onClick={auth.logout}>Logout</Button>
                 </>
               ) : (
-                <>
-                  <NavItem link={"/signup"} title={"Sign Up"} />
-                  <NavItem link={"/login"} title={"Login"} />
-                </>
+                <LoginDialog />
               )}
               <ModeToggle />
             </div>
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..c23630e
--- /dev/null
+++ b/src/components/ui/dialog.tsx
@@ -0,0 +1,120 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    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
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      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
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 378dd51..846c2ba 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -40,7 +40,10 @@ export default function Home() {
       <div className="pt-20 bg-gray-100 dark:bg-secondary w-full flex flex-row flex-wrap gap-[90px] mt-[30px] justify-center text-center align-middle min-h-[300px] h-auto">
         {Features.map((feature) => {
           return (
-            <div className="w-[200px] text-[#232f3e80] dark:text-primary">
+            <div
+              key={feature.Title}
+              className="w-[200px] text-[#232f3e80] dark:text-primary"
+            >
               <div className="text-[#4ECDC4] flex align-middle justify-center">
                 {feature.Icon}
               </div>
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
deleted file mode 100644
index bc7e81f..0000000
--- a/src/pages/Login.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import LoginForm from "@components/forms/LoginForm";
-
-// Function to validate the login form
-export default function Login() {
-  return (
-    <div className="flex items-center h-screen">
-      <LoginForm />
-    </div>
-  );
-}
diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
deleted file mode 100644
index 3b55bd1..0000000
--- a/src/pages/SignUp.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import SignUpForm from "@components/forms/SignUpForm";
-// Function to validate the login form
-export default function SignUp() {
-  return (
-    <div className="flex justify-center items-center h-screen">
-      <SignUpForm />
-    </div>
-  );
-}
diff --git a/src/pages/router.tsx b/src/pages/router.tsx
index dd4cb81..559f84f 100644
--- a/src/pages/router.tsx
+++ b/src/pages/router.tsx
@@ -1,7 +1,6 @@
 import App from "../App.tsx";
 
 import Login from "./Login.jsx";
-import SignUp from "./SignUp.jsx";
 import Home from "./Home.jsx";
 import { createBrowserRouter, Navigate } from "react-router-dom";
 import Plugins from "./Plugins.tsx";
@@ -28,14 +27,6 @@ export const router = createBrowserRouter([
         path: "/plugins",
         element: <Plugins />,
       },
-      {
-        path: "/login",
-        element: <Login />,
-      },
-      {
-        path: "/signup",
-        element: <SignUp />,
-      },
       // {
       //   element: <AuthGuard />,
       //   children: [