diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 996bfac..4444f3d 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -21,7 +21,7 @@ export default function UserPage() {
         onSubmit={async (e) => {
           e.preventDefault();
           const response = await fetch(
-            process.env.MODE === "PROD"
+            process.env.NEXT_PUBLIC_MODE === "PROD"
               ? "https://d2jam.com/api/v1/login"
               : "http://localhost:3005/api/v1/login",
             {
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
new file mode 100644
index 0000000..f1b8ed0
--- /dev/null
+++ b/src/app/signup/page.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { Button, Form, Input } from "@nextui-org/react";
+import { redirect } from "next/navigation";
+import { useState } from "react";
+
+export default function UserPage() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [password2, setPassword2] = useState("");
+  const [error, setError] = useState("");
+
+  return (
+    <div className="absolute flex items-center justify-center top-0 left-0 w-screen h-screen">
+      <Form
+        className="w-full max-w-xs flex flex-col gap-4"
+        validationBehavior="native"
+        onReset={() => {
+          setUsername("");
+          setPassword("");
+        }}
+        onSubmit={async (e) => {
+          e.preventDefault();
+          const response = await fetch(
+            process.env.NEXT_PUBLIC_MODE === "PROD"
+              ? "https://d2jam.com/api/v1/login"
+              : "http://localhost:3005/api/v1/login",
+            {
+              body: JSON.stringify({ username: username, password: password }),
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+            }
+          );
+
+          if (response.status == 401) {
+            setError("Invalid username or password");
+            setPassword("");
+            return;
+          }
+
+          const token = await response.json();
+          document.cookie = `token=${token}`;
+
+          redirect("/");
+        }}
+      >
+        <Input
+          isRequired
+          errorMessage="Please enter a valid username"
+          label="Username"
+          labelPlacement="outside"
+          name="username"
+          placeholder="Enter your username"
+          type="text"
+          value={username}
+          onValueChange={setUsername}
+        />
+
+        <Input
+          isRequired
+          errorMessage="Please enter a valid password"
+          label="Password"
+          labelPlacement="outside"
+          name="password"
+          placeholder="Enter your password"
+          type="password"
+          value={password}
+          onValueChange={setPassword}
+        />
+        <Input
+          isRequired
+          errorMessage="Please enter a valid password"
+          label="Password"
+          labelPlacement="outside"
+          name="password"
+          placeholder="Enter your password"
+          type="password"
+          value={password}
+          onValueChange={setPassword}
+        />
+        <div className="flex gap-2">
+          <Button color="primary" type="submit">
+            Submit
+          </Button>
+          <Button type="reset" variant="flat">
+            Reset
+          </Button>
+        </div>
+        <p>Sign up is being worked on currently</p>
+        {error && <p className="text-red-500">{error}</p>}
+        {}
+      </Form>
+    </div>
+  );
+}
diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
index 0009a95..a274260 100644
--- a/src/components/navbar/index.tsx
+++ b/src/components/navbar/index.tsx
@@ -19,7 +19,7 @@ import {
   Tooltip,
 } from "@nextui-org/react";
 import { SiDiscord, SiForgejo, SiGithub } from "@icons-pack/react-simple-icons";
-import { LogInIcon } from "lucide-react";
+import { LogInIcon, NotebookPen } from "lucide-react";
 import { useEffect, useState } from "react";
 import { hasCookie, getCookies } from "@/helpers/cookie";
 import { usePathname } from "next/navigation";
@@ -37,7 +37,7 @@ export default function Navbar() {
       }
 
       const response = await fetch(
-        process.env.MODE === "PROD"
+        process.env.NEXT_PUBLIC_MODE === "PROD"
           ? "https://d2jam.com/api/v1/self"
           : "http://localhost:3005/api/v1/self",
         {
@@ -139,7 +139,7 @@ export default function Navbar() {
                 </Button>
               </Link>
             </NavbarItem>
-            {/* <NavbarItem>
+            <NavbarItem>
               <Link href="/signup">
                 <Button
                   endContent={<NotebookPen />}
@@ -149,7 +149,7 @@ export default function Navbar() {
                   Sign up
                 </Button>
               </Link>
-            </NavbarItem> */}
+            </NavbarItem>
           </div>
         ) : (
           <Dropdown>
diff --git a/src/components/posts/index.tsx b/src/components/posts/index.tsx
index 7763a44..64f398e 100644
--- a/src/components/posts/index.tsx
+++ b/src/components/posts/index.tsx
@@ -10,7 +10,7 @@ export default function Posts() {
   useEffect(() => {
     const fetchPosts = async () => {
       const response = await fetch(
-        process.env.MODE === "PROD"
+        process.env.NEXT_PUBLIC_MODE === "PROD"
           ? "https://d2jam.com/api/v1/posts"
           : "http://localhost:3005/api/v1/posts"
       );