diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..7a73a41b
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,2 @@
+{
+}
\ No newline at end of file
diff --git a/backend/.gitignore b/backend/.gitignore
index cbba7d16..778b3011 100644
--- a/backend/.gitignore
+++ b/backend/.gitignore
@@ -4,6 +4,7 @@ src/firebase/ServiceAccountKey.json
 .env
 node_modules/
 .eslintcache
+ServiceAccountKey.json
 
 #Compiled JavaScript files
 lib/**/*.js
diff --git a/frontend/public/admin.png b/frontend/public/admin.png
new file mode 100644
index 00000000..e68efcfd
Binary files /dev/null and b/frontend/public/admin.png differ
diff --git a/frontend/public/sidebar/logo.png b/frontend/public/sidebar/logo.png
index 7c1ece06..43d59e09 100644
Binary files a/frontend/public/sidebar/logo.png and b/frontend/public/sidebar/logo.png differ
diff --git a/frontend/public/team.png b/frontend/public/team.png
new file mode 100644
index 00000000..61e2b9fe
Binary files /dev/null and b/frontend/public/team.png differ
diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx
index 1495925a..9da052c5 100644
--- a/frontend/src/components/Button.tsx
+++ b/frontend/src/components/Button.tsx
@@ -12,19 +12,31 @@ type ButtonStyles = {
   primary: string;
   small: string;
   default: string;
+  selected: string;
+  big: string;
 };
 
 const poppins = Poppins({ weight: "400", style: "normal", subsets: [] });
 
 export type ButtonProps = {
-  label: string;
+  label: React.ReactNode | string;
+
   kind?: "primary" | "secondary" | "destructive" | "destructive-secondary";
-  size?: "default" | "small";
+  size?: "default" | "small" | "big";
   disabled?: boolean;
+  selected?: boolean;
 } & React.ComponentProps<"button">;
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  { label, kind = "primary", size = "default", disabled = false, className, ...props }: ButtonProps,
+  {
+    label,
+    kind = "primary",
+    size = "default",
+    disabled = false,
+    selected = false,
+    className,
+    ...props
+  }: ButtonProps,
   ref,
 ) {
   const buttonStyles: ButtonStyles = styles as ButtonStyles;
@@ -58,11 +70,18 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function
     case "small":
       buttonClass += ` ${buttonStyles.small}`;
       break;
+    case "big":
+      buttonClass += ` ${buttonStyles.big}`;
+      break;
     default:
       buttonClass += ` ${buttonStyles.default}`;
       break;
   }
 
+  if (selected) {
+    buttonClass += ` ${buttonStyles.selected}`;
+  }
+
   // Lets developers apply their own styling
   if (className) {
     buttonClass += ` ${className}`;
@@ -70,7 +89,6 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function
 
   // Set font to poppins
   buttonClass += ` ${poppins.className}`;
-
   return (
     <button ref={ref} className={buttonClass} {...props}>
       {label}
diff --git a/frontend/src/components/Landing.tsx b/frontend/src/components/Landing.tsx
new file mode 100644
index 00000000..842c9f0a
--- /dev/null
+++ b/frontend/src/components/Landing.tsx
@@ -0,0 +1,83 @@
+/**
+ * Navigation Component
+ *
+ * Wraps the content of the current page with the navbar
+ * Uses the constant in `src/constants` to populate the actual sidebar
+ */
+import { Poppins } from "next/font/google";
+import Image from "next/image";
+import React, { useMemo } from "react";
+
+import { useWindowSize } from "../hooks/useWindowSize";
+import { cn } from "../lib/utils";
+
+const poppins = Poppins({ subsets: ["latin"], weight: "400" });
+
+// the logo and company name component
+const Logo = () => {
+  return (
+    <div className="flex h-full flex-col items-center justify-center">
+      <div className="mb-14 flex flex-col items-center">
+        <h1 className="font-[alternate-gothic] text-6xl text-white max-lg:text-5xl">Welcome to</h1>
+        <h1 className="font-[alternate-gothic] text-6xl text-white max-lg:text-5xl">
+          Plant it Again!
+        </h1>
+      </div>
+      <div className="flex h-[50%] flex-col items-center">
+        <Image alt="company logo" src="/sidebar/logo.png" width={250} height={250} className="" />
+      </div>
+    </div>
+  );
+};
+
+// Navigation component that wraps the content of the page
+function Landing({ children }: { children: React.ReactNode }) {
+  const { width } = useWindowSize();
+  const isMobile = useMemo(() => width <= 640, [width]);
+
+  return (
+    <main
+      className={cn(
+        "flex h-full w-full bg-pia_primary_light_green max-sm:relative sm:max-lg:flex-col",
+        poppins.className,
+      )}
+    >
+      {/* Login left side */}
+      {!isMobile ? (
+        <div
+          className={cn(
+            "flex h-screen w-full bg-pia_primary_light_green max-sm:relative",
+            poppins.className,
+          )}
+        >
+          <div
+            className={cn(
+              "z-10 flex h-screen w-[50%] flex-col", // Adjust the width based on the isMobile flag
+              "flex-col gap-12 bg-pia_dark_green pt-16 text-pia_accent_green transition-transform",
+            )}
+          >
+            <Logo />
+          </div>
+          <div
+            className={cn(
+              "flex h-screen w-[50%] flex-col", // Adjust the width based on the isMobile flag
+            )}
+          >
+            {children}
+          </div>
+        </div>
+      ) : (
+        <div
+          className={cn(
+            "flex h-screen w-full bg-pia_primary_light_green max-sm:relative",
+            poppins.className,
+          )}
+        >
+          {children}
+        </div>
+      )}
+    </main>
+  );
+}
+
+export default Landing;
diff --git a/frontend/src/components/Textfield.tsx b/frontend/src/components/Textfield.tsx
index ac2584c6..6b55b652 100644
--- a/frontend/src/components/Textfield.tsx
+++ b/frontend/src/components/Textfield.tsx
@@ -13,6 +13,7 @@ type BaseProps<T extends FieldValues> = {
   label?: string;
   type?: string;
   placeholder: string;
+  handleInputChange?: React.ChangeEventHandler<HTMLInputElement>;
   defaultValue?: string;
   className?: string;
 };
@@ -37,6 +38,9 @@ export function Textfield<T extends FieldValues>({
   placeholder,
   calendar = false,
   className,
+  handleInputChange = () => {
+    /* do nothing */
+  },
   type = "text",
   defaultValue = "",
 }: TextFieldProps<T>) {
@@ -66,6 +70,7 @@ export function Textfield<T extends FieldValues>({
           className="focus-visible:out w-full appearance-none bg-inherit px-2 placeholder-pia_accent outline-none"
           id={label + placeholder}
           type={type}
+          onChange={handleInputChange}
           placeholder={placeholder}
           defaultValue={
             calendar && defaultValue
diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
index 2e3e39ee..034bdbed 100644
--- a/frontend/src/pages/_app.tsx
+++ b/frontend/src/pages/_app.tsx
@@ -1,14 +1,20 @@
 import { AppProps } from "next/app";
 
-import Navigation from "../components/Navigation";
+import Landing from "../components/Landing";
+
 import "../styles/global.css";
 import "../styles/globals.css";
 
+// import Navigation from "../components/Navigation";
+
 function App({ Component, pageProps }: AppProps) {
   return (
-    <Navigation>
+    <Landing {...pageProps}>
       <Component {...pageProps} />
-    </Navigation>
+    </Landing>
+    // <Navigation>
+    //   <Component {...pageProps} />
+    // </Navigation>
   );
 }
 export default App;
diff --git a/frontend/src/pages/create_user.tsx b/frontend/src/pages/create_user.tsx
new file mode 100644
index 00000000..bc9ff34e
--- /dev/null
+++ b/frontend/src/pages/create_user.tsx
@@ -0,0 +1,185 @@
+import { AlertCircle, CheckCircle2 } from "lucide-react";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import { useMemo, useState } from "react";
+import { FieldValues, SubmitHandler, useForm } from "react-hook-form";
+
+import { Textfield } from "@/components/Textfield";
+import { useWindowSize } from "@/hooks/useWindowSize";
+import { cn } from "@/lib/utils";
+
+export default function CreateUser() {
+  const { register, setValue, handleSubmit } = useForm();
+  const _setValue = setValue;
+
+  const [passwordError, setPasswordError] = useState(true);
+  const [matchError, setMatchError] = useState(false);
+  const [emailError, setEmailError] = useState(false);
+
+  const [password, setPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+
+  const router = useRouter();
+
+  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    console.log(event.target.name);
+    switch (event.target.name) {
+      case "password":
+        console.log(event.target.value.length, passwordError);
+        setPassword(event.target.value);
+        setPasswordError(event.target.value.length < 6);
+        setMatchError(event.target.value !== confirm);
+        break;
+      case "confirm":
+        console.log(password, confirm, matchError);
+        setConfirm(event.target.value);
+        setMatchError(password !== event.target.value);
+        break;
+    }
+  };
+
+  const onSubmit: SubmitHandler<FieldValues> = (data) => {
+    setEmailError(false); // add email error logic here
+    console.log(data);
+
+    void router.push("/create_user_2");
+  };
+  const { width } = useWindowSize();
+  const isMobile = useMemo(() => width <= 640, [width]);
+
+  return (
+    <main className="flex h-screen w-full items-center justify-center">
+      <div className="flex h-full w-full items-center justify-center">
+        <div
+          className={cn(
+            "flex h-full flex-col",
+            isMobile ? "mt-[20%] w-[80%]" : "mb-[8%] w-[65%] justify-center",
+          )}
+        >
+          {isMobile && (
+            <div className="flex flex-col justify-center">
+              <div className="flex h-full flex-col justify-center">
+                <div className="flex flex-col items-center">
+                  <Image
+                    alt="company logo"
+                    src="/sidebar/logo.png"
+                    width={130}
+                    height={130}
+                    className=""
+                  />
+                </div>
+                <div className="mb-5 mt-5 flex flex-col items-center">
+                  <h1 className="font-[alternate-gothic] text-3xl max-lg:text-3xl">Welcome to</h1>
+                  <h1 className="font-[alternate-gothic] text-3xl max-lg:text-3xl">
+                    Plant it Again!
+                  </h1>
+                </div>
+              </div>
+            </div>
+          )}
+          {!isMobile && (
+            <div>
+              <h1 className="font-[alternate-gothic] text-5xl text-black max-lg:text-5xl">
+                Create an Account
+              </h1>
+              <h1 className="text-1xl max-lg:text-1xl mb-6 text-black text-pia_accent">
+                Already have an account?{" "}
+                <a className="text-1xl max-lg:text-1xl text-pia_accent text-pia_dark_green">
+                  Sign in
+                </a>
+              </h1>
+            </div>
+          )}
+
+          <div className="grid gap-5">
+            <form
+              onSubmit={handleSubmit(onSubmit)}
+              className="flex w-full flex-col justify-between gap-5"
+            >
+              <div>
+                <h1 className="text-lg font-light text-black text-pia_accent max-lg:text-lg">
+                  Full Name
+                </h1>
+                <Textfield
+                  register={register}
+                  name={"name"}
+                  label={""}
+                  placeholder="Enter your full name"
+                />
+              </div>
+              <div>
+                <h1 className="text-lg font-light text-black text-pia_accent max-lg:text-lg">
+                  Email Address
+                </h1>
+                <Textfield
+                  register={register}
+                  handleInputChange={onChange}
+                  name={"email"}
+                  label={""}
+                  placeholder="name@email.com"
+                />
+                {emailError && (
+                  <h1 className="mt-1 flex items-center text-sm font-light text-orange-700 text-pia_accent">
+                    <AlertCircle className="mr-1 text-sm" /> Account already exists for this email.
+                    Sign in?
+                  </h1>
+                )}
+              </div>
+              <div>
+                <h1 className="text-lg font-light text-black text-pia_accent max-lg:text-lg">
+                  Password
+                </h1>
+                <Textfield
+                  register={register}
+                  name={"password"}
+                  handleInputChange={onChange}
+                  label={""}
+                  type="password"
+                  placeholder="Enter password"
+                />
+                {passwordError ? (
+                  <h1 className="mt-1 flex items-center text-sm font-light text-orange-700">
+                    <AlertCircle className="mr-1 text-sm" /> At least 6 characters
+                  </h1>
+                ) : (
+                  <h1 className="mt-1 flex items-center text-sm font-light text-green-700">
+                    <CheckCircle2 className="mr-1 text-sm" /> At least 6 characters
+                  </h1>
+                )}
+              </div>
+              <div>
+                <h1 className="text-lg font-light text-pia_accent max-lg:text-lg">
+                  Confirm Password
+                </h1>
+                <Textfield
+                  register={register}
+                  handleInputChange={onChange}
+                  name={"confirm"}
+                  label=""
+                  type="password"
+                  placeholder="Re-enter Password"
+                />
+                {matchError && (
+                  <h1 className="mt-1 flex items-center text-sm font-light text-orange-700">
+                    <AlertCircle className="mr-1 text-sm" /> Passwords do not match.
+                  </h1>
+                )}
+              </div>
+              <button type="submit" className="rounded-md bg-pia_dark_green px-5 py-3 text-white">
+                Continue
+              </button>
+              {isMobile && (
+                <div className="flex items-center justify-center">
+                  <h1 className={cn("text-sm text-black text-pia_accent max-lg:text-sm")}>
+                    Already have an account?{" "}
+                    <a className="text-sm text-black text-pia_accent max-lg:text-sm">Sign in</a>
+                  </h1>
+                </div>
+              )}
+            </form>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/frontend/src/pages/create_user_2.tsx b/frontend/src/pages/create_user_2.tsx
new file mode 100644
index 00000000..ac63caa7
--- /dev/null
+++ b/frontend/src/pages/create_user_2.tsx
@@ -0,0 +1,144 @@
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import { MouseEvent, useMemo, useState } from "react";
+import { FieldValues, SubmitHandler } from "react-hook-form";
+
+import { Button } from "@/components/Button";
+import { useWindowSize } from "@/hooks/useWindowSize";
+import { cn } from "@/lib/utils";
+
+export default function CreateUser() {
+  const [isAdmin, setIsAdmin] = useState(true);
+
+  const router = useRouter();
+
+  const onSubmit: SubmitHandler<FieldValues> = (data) => {
+    console.log(data);
+    void router.push("/create_user_3");
+  };
+
+  const onBack: SubmitHandler<FieldValues> = (data) => {
+    console.log(data);
+    void router.push("/create_user");
+  };
+  const { width } = useWindowSize();
+  const isMobile = useMemo(() => width <= 640, [width]);
+
+  function handleClick(event: MouseEvent<HTMLButtonElement>): void {
+    switch (event.currentTarget.name) {
+      case "admin":
+        setIsAdmin(true);
+        break;
+      case "team":
+        setIsAdmin(false);
+        break;
+    }
+  }
+
+  return (
+    <main className="flex h-screen w-full items-center justify-center">
+      <div className="flex h-full w-full items-center justify-center">
+        <div
+          className={cn(
+            "flex h-full flex-col",
+            isMobile ? "mt-[20%] w-[80%]" : "mb-[8%] w-[65%] justify-center",
+          )}
+        >
+          {isMobile && (
+            <div className="flex flex-col pt-10">
+              <button onClick={onBack} className="flex rounded-md">
+                <ArrowLeft className="text-1xl max-lg:text-1xl mr-2 text-pia_accent text-pia_dark_green" />{" "}
+                <h1 className="text-1xl max-lg:text-1xl text-pia_accent text-pia_dark_green">
+                  Back
+                </h1>
+              </button>
+              <div className="flex h-full">
+                <div className="mb-5 mt-5 flex flex-col items-center">
+                  <h1 className="font-[alternate-gothic] text-3xl max-lg:text-3xl">
+                    Choose Account Type
+                  </h1>
+                </div>
+              </div>
+            </div>
+          )}
+          {!isMobile && (
+            <div className="mb-10">
+              <h1 className="font-[alternate-gothic] text-5xl text-black max-lg:text-5xl">
+                Choose Account Type
+              </h1>
+            </div>
+          )}
+
+          <div className="grid gap-5">
+            <div className="flex w-full flex-col justify-between gap-10">
+              <Button
+                size="big"
+                kind="secondary"
+                label={
+                  <div className="flex items-center">
+                    {/* Image on the left */}
+                    <div className="flex items-center">
+                      <Image alt="admin" src="/admin.png" width={60} height={60} className="ml-5" />
+                    </div>
+
+                    {/* Submit text centered */}
+                    <div className="flex w-full items-center justify-center">
+                      <h1 className="text-2xl font-extrabold">Admin</h1>
+                    </div>
+                  </div>
+                }
+                type="button"
+                name="admin"
+                onClick={handleClick}
+                selected={isAdmin}
+              ></Button>
+              <Button
+                size="big"
+                kind="secondary"
+                label={
+                  <div className="flex items-center">
+                    {/* Image on the left */}
+                    <div className="flex items-center">
+                      <Image alt="team" src="/team.png" width={80} height={80} className="ml-5" />
+                    </div>
+
+                    {/* Submit text centered */}
+                    <div className="flex w-full items-center justify-center">
+                      <h1 className="text-2xl font-extrabold">Team</h1>
+                    </div>
+                  </div>
+                }
+                onClick={handleClick}
+                type="button"
+                name="team"
+                selected={!isAdmin}
+              ></Button>
+              <div className="flex items-center justify-center">
+                {!isMobile && (
+                  <button
+                    onClick={onBack}
+                    className="flex w-[33%] items-center rounded-md px-5 py-3"
+                    type="button"
+                  >
+                    <ArrowLeft className="text-1xl max-lg:text-1xl mr-2 text-pia_accent text-pia_dark_green" />{" "}
+                    <h1 className="text-1xl max-lg:text-1xl text-pia_accent text-pia_dark_green">
+                      Back
+                    </h1>
+                  </button>
+                )}
+                <button
+                  type="button"
+                  onClick={onSubmit}
+                  className="flex w-full items-center justify-center rounded-md bg-pia_dark_green px-5 py-3 text-white"
+                >
+                  Submit <ArrowRight className="ml-2" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/frontend/src/pages/create_user_3.tsx b/frontend/src/pages/create_user_3.tsx
new file mode 100644
index 00000000..63d357aa
--- /dev/null
+++ b/frontend/src/pages/create_user_3.tsx
@@ -0,0 +1,78 @@
+import { ArrowLeft } from "lucide-react";
+import { useRouter } from "next/router";
+import { useMemo } from "react";
+import { FieldValues, SubmitHandler } from "react-hook-form";
+
+import { useWindowSize } from "@/hooks/useWindowSize";
+import { cn } from "@/lib/utils";
+
+export default function CreateUser() {
+  const router = useRouter();
+
+  const onBack: SubmitHandler<FieldValues> = (data) => {
+    console.log(data);
+    void router.push("/create_user_2");
+  };
+  const { width } = useWindowSize();
+  const isMobile = useMemo(() => width <= 640, [width]);
+
+  return (
+    <main className="flex h-screen w-full justify-center">
+      <div className="flex h-[85%] w-full items-center justify-center">
+        <div
+          className={cn(
+            "flex h-full flex-col",
+            isMobile ? "mt-[20%] w-[80%]" : "mb-[8%] w-[65%] justify-center",
+          )}
+        >
+          {isMobile && (
+            <div className="mt-10 flex flex-col">
+              <button onClick={onBack} className="mb-5 flex rounded-md">
+                <ArrowLeft className="text-1xl max-lg:text-1xl mr-2 text-pia_accent text-pia_dark_green" />{" "}
+                <h1 className="text-1xl max-lg:text-1xl text-pia_accent text-pia_dark_green">
+                  Back
+                </h1>
+              </button>
+              <div className="flex h-full">
+                <div className="mb-5 mt-5 flex flex-col">
+                  <h1 className="font-[alternate-gothic] text-3xl max-lg:text-3xl">
+                    We have received
+                  </h1>
+                  <h1 className="font-[alternate-gothic] text-3xl max-lg:text-3xl">
+                    your account creation!
+                  </h1>
+                </div>
+              </div>
+            </div>
+          )}
+          {!isMobile && (
+            <div>
+              <button onClick={onBack} className="mb-5 flex rounded-md">
+                <ArrowLeft className="text-1xl max-lg:text-1xl mr-2 text-pia_accent text-pia_dark_green" />{" "}
+                <h1 className="text-1xl max-lg:text-1xl text-pia_accent text-pia_dark_green">
+                  Back
+                </h1>
+              </button>
+              <div className="mb-10">
+                <h1 className="font-[alternate-gothic] text-5xl text-black max-lg:text-4xl">
+                  We have received
+                </h1>
+                <h1 className="font-[alternate-gothic] text-5xl text-black max-lg:text-4xl">
+                  your account creation!
+                </h1>
+              </div>
+            </div>
+          )}
+          <h1 className="text-lg text-black max-lg:text-lg">You will be notified by email</h1>
+          <h1 className="mb-10 text-lg text-black max-lg:text-lg">if your account is approved.</h1>
+          <h1 className="text-1xl max-lg:text-1xl mb-6 text-black text-pia_accent max-sm:text-sm">
+            Haven&lsquo;t received a response yet?{" "}
+            <a className="text-1xl max-lg:text-1xl text-pia_accent text-pia_dark_green">
+              Contact Us.
+            </a>
+          </h1>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 5416e497..42d544c3 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -1,40 +1,5 @@
-import { useForm } from "react-hook-form";
-
-import { Button } from "../components/Button";
-import { Checkbox } from "../components/Checkbox";
-import StudentFormButton from "../components/StudentFormButton";
-import { Textfield } from "../components/Textfield";
-import sampleStudentData from "../sampleStudentData.json";
-
-type FruitData = {
-  fruits: string[];
-  favoriteFruit: string;
-};
+import CreateUser from "./create_user";
 
 export default function Home() {
-  const { register, handleSubmit, reset } = useForm<FruitData>();
-
-  const onSubmit = (formData: FruitData) => {
-    console.log(formData);
-    reset();
-  };
-
-  return (
-    <div className="w-1/2">
-      <div className="flex gap-5">
-        <StudentFormButton type="edit" data={sampleStudentData} />
-        <StudentFormButton type="add" />
-      </div>
-
-      {/* Example */}
-      <div className="mt-5">
-        <h2 className="text-2xl font-bold">Example</h2>
-        <form className="grid gap-5" onSubmit={handleSubmit(onSubmit)}>
-          <Checkbox name="fruits" register={register} options={["apples", "oranges", "bananas"]} />
-          <Textfield name="favoriteFruit" register={register} placeholder="Favorite Fruit" />
-          <Button label="Submit" />
-        </form>
-      </div>
-    </div>
-  );
+  return <CreateUser />;
 }
diff --git a/frontend/src/pages/login.tsx b/frontend/src/pages/login.tsx
new file mode 100644
index 00000000..1d04f6d0
--- /dev/null
+++ b/frontend/src/pages/login.tsx
@@ -0,0 +1,115 @@
+import Image from "next/image";
+import { useMemo } from "react";
+import { FieldValues, SubmitHandler, useForm } from "react-hook-form";
+
+import { Textfield } from "@/components/Textfield";
+import { useWindowSize } from "@/hooks/useWindowSize";
+import { cn } from "@/lib/utils";
+
+export default function Login() {
+  const { register, setValue, handleSubmit } = useForm();
+  const _setValue = setValue;
+
+  const onSubmit: SubmitHandler<FieldValues> = (data) => {
+    console.log(data);
+  };
+  const { width } = useWindowSize();
+  const isMobile = useMemo(() => width <= 640, [width]);
+  const isTablet = useMemo(() => width <= 1300, [width]);
+  return (
+    <main className="flex h-screen w-full items-center justify-center">
+      <div className="flex h-full w-full items-center justify-center">
+        <div
+          className={cn(
+            "flex h-full flex-col",
+            isMobile ? "mt-[20%] w-[80%]" : "mb-[8%] w-[65%] justify-center",
+          )}
+        >
+          {isMobile && (
+            <div className="flex flex-col justify-center">
+              <div className="flex h-full flex-col justify-center">
+                <div className="flex flex-col items-center">
+                  <Image
+                    alt="company logo"
+                    src="/sidebar/logo.png"
+                    width={130}
+                    height={130}
+                    className=""
+                  />
+                </div>
+                <div className="mb-5 mt-5 flex flex-col items-center">
+                  <h1 className="font-[alternate-gothic] text-3xl max-lg:text-3xl">Welcome to</h1>
+                  <h1 className="font-[alternate-gothic] text-3xl max-lg:text-3xl">
+                    Plant it Again!
+                  </h1>
+                </div>
+              </div>
+            </div>
+          )}
+          {!isMobile && (
+            <div>
+              <h1 className="font-[alternate-gothic] text-5xl text-black max-lg:text-5xl">
+                Sign in to PIA
+              </h1>
+              <h1 className="text-1xl max-lg:text-1xl mb-6 text-black text-pia_accent">
+                Don&lsquo;t have an account?{" "}
+                <a className="text-1xl max-lg:text-1xl text-pia_accent text-pia_dark_green">
+                  Sign up
+                </a>
+              </h1>
+            </div>
+          )}
+
+          <div className="grid gap-5">
+            <form
+              onSubmit={handleSubmit(onSubmit)}
+              className="flex w-full flex-col justify-between gap-8"
+            >
+              <div>
+                <h1 className="text-lg font-light text-black text-pia_accent max-lg:text-lg">
+                  Email Address
+                </h1>
+                <Textfield
+                  register={register}
+                  name={"email"}
+                  label={""}
+                  type="email"
+                  placeholder="name@email.com"
+                />
+              </div>
+              <div>
+                <h1 className="text-lg font-light text-pia_accent max-lg:text-lg">Password</h1>
+                <Textfield
+                  register={register}
+                  name={"date"}
+                  label=""
+                  placeholder="Enter Password"
+                />
+                <h1
+                  className={cn(
+                    "mt-1 text-lg font-light text-pia_accent",
+                    isTablet ? "underline" : "text-right text-pia_dark_green",
+                    isMobile ? "text-sm underline max-lg:text-sm" : "text-lg max-lg:text-lg",
+                  )}
+                >
+                  Forgot Password?
+                </h1>
+              </div>
+              <button type="submit" className="rounded-md bg-pia_dark_green px-5 py-3 text-white">
+                Sign In
+              </button>
+              {isMobile && (
+                <div className="flex items-center justify-center">
+                  <h1 className={cn("text-sm text-black text-pia_accent max-lg:text-sm")}>
+                    Don&lsquo;t have an account?{" "}
+                    <a className="text-blue text-sm text-pia_accent max-lg:text-sm">Sign up</a>
+                  </h1>
+                </div>
+              )}
+            </form>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/frontend/src/pages/profile.tsx b/frontend/src/pages/profile.tsx
index ec4fb140..f38a5d45 100644
--- a/frontend/src/pages/profile.tsx
+++ b/frontend/src/pages/profile.tsx
@@ -1,7 +1,56 @@
+import { FieldValues, SubmitHandler, useForm } from "react-hook-form";
+
+import { Checkbox } from "../components/Checkbox";
+import Radio from "../components/Radio";
+import { Textfield } from "../components/Textfield";
+
 export default function Profile() {
+  const dietaryList = ["Nuts", "Eggs", "Seafood", "Pollen", "Dairy", "Other"];
+
+  const { register, setValue, handleSubmit } = useForm();
+
+  const onSubmit: SubmitHandler<FieldValues> = (data) => {
+    console.log(data);
+  };
   return (
     <main>
-      <h1>PIA Profile Page!</h1>
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className="flex flex-col items-center justify-between gap-10 p-12"
+      >
+        <div className="grid gap-5">
+          <Textfield register={register} name={"firstname"} label="First" placeholder="John" />
+          <Textfield
+            register={register}
+            name={"email"}
+            label={"Email"}
+            type="email"
+            placeholder="johnsmith@gmail.com"
+          />
+          <Textfield
+            register={register}
+            setCalendarValue={setValue}
+            name={"date"}
+            label="Date"
+            placeholder="00/00/0000"
+            calendar={true}
+          />
+        </div>
+
+        <div className="grid w-full sm:w-1/2 ">
+          <h2 className="mb-2 text-pia_accent">Dietary Restrictions</h2>
+          <Checkbox register={register} name="dietary" options={dietaryList} />
+        </div>
+
+        <div className="">
+          <h2 className="mb-5 text-2xl font-bold">Gender</h2>
+          <Radio register={register} name="gender" options={["Male", "Female", "Rather not say"]} />
+        </div>
+
+        <button type="submit" className="rounded-md bg-pia_dark_green px-5 py-3 text-white">
+          Submit
+        </button>
+      </form>
     </main>
   );
 }
diff --git a/frontend/src/styles/Button.module.css b/frontend/src/styles/Button.module.css
index 7356b85c..400b9dc5 100644
--- a/frontend/src/styles/Button.module.css
+++ b/frontend/src/styles/Button.module.css
@@ -14,6 +14,12 @@
   padding-right: 1.5rem;
 }
 
+.big {
+  height: 10rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
 .small {
   height: 2.5rem;
   padding-left: 1rem;
@@ -26,6 +32,10 @@
   border: none;
 }
 
+.selected {
+  background-color: rgba(var(--primary-dark-green), 20%) !important;
+}
+
 .primary {
   background-color: rgb(var(--primary-dark-green));
   color: rgb(var(--white));
@@ -44,7 +54,7 @@
   border: 0.0625rem solid rgb(var(--primary-dark-green));
 }
 .secondary:hover {
-  background-color: rgba(var(--primary-dark-green), 22%);
+  background-color: rgba(var(--primary-dark-green), 8%);
 }
 .secondary:active {
   background-color: rgba(var(--primary-dark-green), 20%);
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..8b39b8cd
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "PIA-Program-Manager",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}