diff --git a/daily-thought-frontend/src/pages/register.tsx b/daily-thought-frontend/src/pages/register.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..10b304b1a9de447c9a7ea4c464e3d83dae0f2cc8
--- /dev/null
+++ b/daily-thought-frontend/src/pages/register.tsx
@@ -0,0 +1,72 @@
+import BasicField from "@/components/form/basicField";
+import NavBar from "@/components/navigation/NavBar";
+import { LockClosedIcon } from "@heroicons/react/24/outline";
+import { useEffect, useState } from "react";
+
+const Register = () => {
+  const [username, setUsername] = useState<string>("");
+  const [email, setEmail] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
+  const [passwordConfirmation, setPasswordConfirmation] = useState<string>("");
+
+  const handleSubmit = async (event) => {
+    event.preventDefault()
+
+    const JSONdata = JSON.stringify({
+      username: username,
+      email: email,
+      password: password,
+      profile: ""
+    })
+    const endpoint = '/api/form'
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSONdata,
+    }
+    const response = await fetch(endpoint, options)
+    const result = await response.json()
+    alert(`Success: ${result.data}`)
+  }
+
+ return (
+    <>
+      <div className="flex min-h-full items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
+       
+        <div className="w-full max-w-md space-y-8">
+            <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
+              Create an account
+            </h2>
+            <p className="mt-2 text-center text-sm text-gray-600">
+              Or{' '}
+              <a href="#" className="font-medium text-c-pink hover:text-indigo-500">
+                log in
+              </a>
+            </p>
+
+          <form className="mt-8 space-y-6" action="#" method="POST">
+            <input type="hidden" name="remember" defaultValue="true" />
+            <div className="rounded-md shadow-sm">
+              <BasicField name="username" placeholder="Username" onChange={setUsername}/>
+              <BasicField name="email" placeholder="Email Address" onChange={setEmail}/>
+              <BasicField name="password" placeholder="Password" onChange={setPassword}/>
+              <BasicField name="password" placeholder="Confirm Password" onChange={setPasswordConfirmation} error={password === passwordConfirmation ? null : "Confirmation doesn't match"}/>
+            </div>
+            <div>
+              <button
+                type="submit"
+                className="group relative flex w-full justify-center rounded-md bg-c-pink px-3 py-2 text-sm font-semibold text-white hover:bg-white hover:text-c-pink hover:border-c-pink focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-c-pink"
+              >
+                Sign in
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default Register;
\ No newline at end of file