diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index fa535592..7e043d6f 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -27,6 +27,11 @@ jobs:
       - name: Install dependencies
         run: yarn
         working-directory: ${{ matrix.project }}
+      
+      - name: Set environment variables
+        env: 
+          VITE_CLERK_PUBLISHABLE_KEY: "${{ secrets.VITE_CLERK_PUBLISHABLE_KEY }}"
+        run: echo "VITE_CLERK_PUBLISHABLE_KEY=${VITE_CLERK_PUBLISHABLE_KEY}" >> "$GITHUB_ENV"
 
       - name: Run tests
         run: yarn test
diff --git a/database/docker-compose.yml b/database/docker-compose.yml
index c43b6ef7..ba0beeab 100644
--- a/database/docker-compose.yml
+++ b/database/docker-compose.yml
@@ -9,7 +9,7 @@ services:
       POSTGRES_PASSWORD: GuryIsGoat
       POSTGRES_DB: AUIS
     ports:
-      - 5432:5432
+      - 5435:5432
     expose:
       - 5432
 
diff --git a/package.json b/package.json
index c2cd59ef..0ad8ebd5 100644
--- a/package.json
+++ b/package.json
@@ -10,5 +10,6 @@
   },
   "devDependencies": {
     "concurrently": "^8.2.2"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/web/__test__/screens/SignInScreen.test.tsx b/web/__test__/screens/SignInScreen.test.tsx
new file mode 100644
index 00000000..ddc5edcb
--- /dev/null
+++ b/web/__test__/screens/SignInScreen.test.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { describe, it, expect, beforeEach } from "vitest";
+import SignInScreen from "../../src/screens/SignInScreen";
+import { ClerkProvider } from "@clerk/clerk-react";
+
+const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
+
+describe("Sign In Screen", () => {
+  beforeEach(() => {
+    render(
+      <MemoryRouter>
+        <ClerkProvider  publishableKey={PUBLISHABLE_KEY}>
+            <SignInScreen />
+        </ClerkProvider>
+      </MemoryRouter>
+    );
+  });
+
+  const resizeWindow = (width: number) => {
+    global.innerWidth = width;
+    fireEvent(window, new Event("resize"));
+  };
+
+  it("should render the Peacock logo", () => {
+    const peacockLogo = screen.getByAltText("AUIS Peacock Logo");
+    expect(peacockLogo).toBeInTheDocument();
+  });
+
+  it("should render the Clerk component", () => {
+    const peacockLogo = screen.getByTestId("clerk-sign-in");
+    expect(peacockLogo).toBeInTheDocument();
+  });
+
+  it("should render the AUIS logo", () => {
+    const auisLogo = screen.getByAltText("AUIS Logo");
+    expect(auisLogo).toBeInTheDocument();
+  });
+
+  it("should not render the AUIS logo on small screens", () => {
+    resizeWindow(500); // Simulate a small screen
+    expect(screen.queryByTestId("AUIS Logo")).toBeNull();
+  });
+
+  it("should not render the Peacock logo on small screens", () => {
+    resizeWindow(500); // Simulate a small screen
+    expect(screen.queryByTestId("AUIS Peacock Logo")).toBeNull();
+  });
+});
diff --git a/web/__test__/screens/SignUpScreen.test.tsx b/web/__test__/screens/SignUpScreen.test.tsx
new file mode 100644
index 00000000..546bd488
--- /dev/null
+++ b/web/__test__/screens/SignUpScreen.test.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { describe, it, expect, beforeEach } from "vitest";
+import { ClerkProvider } from "@clerk/clerk-react";
+import SignUpScreen from "../../src/screens/SignUpScreen";
+
+
+const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
+
+describe("Sign Up Screen", () => {
+  beforeEach(() => {
+    render(
+      <MemoryRouter>
+        <ClerkProvider  publishableKey={PUBLISHABLE_KEY}>
+            <SignUpScreen />
+        </ClerkProvider>
+      </MemoryRouter>
+    );
+  });
+
+  const resizeWindow = (width: number) => {
+    global.innerWidth = width;
+    fireEvent(window, new Event("resize"));
+  };
+
+  it("should render the Peacock logo", () => {
+    const peacockLogo = screen.getByAltText("AUIS Peacock Logo");
+    expect(peacockLogo).toBeInTheDocument();
+  });
+
+  it("should render the Clerk component", () => {
+    const peacockLogo = screen.getByTestId("clerk-sign-in");
+    expect(peacockLogo).toBeInTheDocument();
+  });
+
+  it("should render the AUIS logo", () => {
+    const auisLogo = screen.getByAltText("AUIS Logo");
+    expect(auisLogo).toBeInTheDocument();
+  });
+
+  it("should not render the AUIS logo on small screens", () => {
+    resizeWindow(500); // Simulate a small screen
+    expect(screen.queryByTestId("AUIS Logo")).toBeNull();
+  });
+
+  it("should not render the Peacock logo on small screens", () => {
+    resizeWindow(500); // Simulate a small screen
+    expect(screen.queryByTestId("AUIS Peacock Logo")).toBeNull();
+  });
+});
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 5b385a3f..524a59ac 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -15,4 +15,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/web/src/assets/peacock_white_inner_big.png b/web/src/assets/peacock_white_inner_big.png
new file mode 100644
index 00000000..1283106b
Binary files /dev/null and b/web/src/assets/peacock_white_inner_big.png differ
diff --git a/web/src/components/FormInput.tsx b/web/src/components/FormInput.tsx
new file mode 100644
index 00000000..f31fd98f
--- /dev/null
+++ b/web/src/components/FormInput.tsx
@@ -0,0 +1,52 @@
+
+interface FormInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    placeholder?: string;
+    type?: string;
+    id?: string;
+    className?: string;
+    name?: string;
+    options?: string[];
+    errorMessage?: string
+}
+
+const FormInput: React.FC<FormInputProps> = ({
+                                                 label,
+                                                 placeholder,
+                                                 type = "text", id,
+                                                 className = "mt-2 w-full px-3 py-2 border border-black rounded-lg focus:outline-none focus:border-black focus:ring-black",
+                                                 options = [""],
+                                                 ...props
+}) => {
+    if(type==="radio" && options.length > 0){
+        return (
+            <div className="mb-4 mt-4">
+                <div className="mt-2">
+                    {options.map((option,index) => (
+                        <label key={option} className={`inline-flex items-center ${index !== 0 ? 'ml-6' : ''}`}>
+                            <input type="radio" name={props.name} value={option} />
+                            <span className="ml-2">{option}</span>
+                        </label>
+                    ))}
+                </div>
+            </div>
+        )
+    }else{
+        return (
+            <div className="form-input">
+                {label && <label htmlFor={id} className="">{label}</label>}
+                <input
+                    placeholder={placeholder}
+                    type={type}
+                    id={id}
+                    className={` ${className}`}
+                    {...props}
+                />
+                {props.errorMessage && <span className="text-red-500">{props.errorMessage}</span>}
+            </div>
+        );
+    }
+
+}
+
+export default FormInput;
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 611328d4..9c536d3a 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -9,7 +9,7 @@ function Header() {
   const { pathname } = useLocation();
 
   const titles = [
-    { title: "Events", page: "/" },
+    { title: "Events", page: "/events" },
     { title: "About Us", page: "/pvv" },
     { title: "Team", page: "/exec" },
     { title: "Partners", page: "/sponsors" },
@@ -120,4 +120,4 @@ function Header() {
   );
 }
 
-export default Header;
+export default Header;
\ No newline at end of file
diff --git a/web/src/components/UserInformationForm.tsx b/web/src/components/UserInformationForm.tsx
new file mode 100644
index 00000000..24325808
--- /dev/null
+++ b/web/src/components/UserInformationForm.tsx
@@ -0,0 +1,57 @@
+import FormInput from "@components/FormInput.tsx";
+import {useState} from "react";
+
+
+function UserInformationForm() {
+    const [values, setValues] = useState({
+        firstName: "",
+        lastName: "",
+        university: "",
+        graudationYear: "",
+        UPI: "",
+        studentID: "",
+        studyOption: ""
+    });
+
+    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        // Need to do validation here
+        setValues({ ...values, [e.target.name]: e.target.value });
+        console.log(values)
+    };
+
+    const residencyOptions = ["International", "Domestic"];
+    const paymentOptions = ["One Semester ($8)", "Two Semesters ($15)"];
+
+    function handleSubmit(e: React.FormEvent<HTMLFormElement>){
+        e.preventDefault();
+        console.log("submitted");
+    }
+    return (
+        <div className="flex items-center justify-center  ">
+            <div className="bg-white p-8 rounded-lg shadow-lg max-w-lg w-full">
+                <h2 className="text-2xl font-semibold mb-6 text-center">We need some more information for your membership</h2>
+
+                <form onSubmit={handleSubmit} >
+                    <FormInput placeholder={"First Name"} id="firstName" errorMessage="First Name is Required" onChange={onChange} />
+                    <FormInput placeholder={"Last Name"} id="lastName" errorMessage="Last Name is Required" onChange={onChange}/>
+                    <FormInput placeholder={"University (or alumni)"} id="university" errorMessage="Your Univeristiy is Required" onChange={onChange}/>
+                    <FormInput placeholder={"What year are you in (or alumni)"} id="year" errorMessage="Your Graduation Year is Required" onChange={onChange}/>
+                    <FormInput placeholder={"UPI (if you have one)"} id="upi" onChange={onChange}/>
+                    <FormInput placeholder={"Student ID (if you have one)"} id="studentId" onChange={onChange}/>
+                    <FormInput placeholder={"What are you studying)"} id="study" onChange={onChange}/>
+
+                    <FormInput type="radio" name="residency" options={residencyOptions}/>
+                    <FormInput type="radio" name="duration" options={paymentOptions}/>
+
+                    <button className="w-full bg-black text-white py-2 rounded-lg hover:bg-gray-800" >
+                        Purchase membership
+                    </button>
+                </form>
+
+            </div>
+        </div>
+
+    );
+}
+
+export default UserInformationForm;
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 6307d6dd..51dcd352 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -17,10 +17,10 @@ import ExecScreen from "./screens/ExecScreen.tsx";
 import SignUpScreen from "./screens/SignUpScreen.tsx";
 import PhotosScreen from "./screens/PhotosScreen.tsx";
 import PVVScreen from "./screens/PVVScreen.tsx";
-import LoginScreen from "./screens/LoginScreen.tsx";
 import { ClerkProvider } from "@clerk/clerk-react";
 import { graphqlClient } from "./graphql/client.ts";
 import CreditsScreen from "./screens/CreditsScreen.tsx";
+import SignInScreen from "./screens/SignInScreen.tsx";
 
 //Add any routes for screens below
 const router = createBrowserRouter(
@@ -30,14 +30,14 @@ const router = createBrowserRouter(
       <Route path="/test" element={<TestScreen />} />
       <Route path="/credits" element={<CreditsScreen />} />
       <Route path="/exec" element={<ExecScreen />} />
-      <Route path="/login" element={<LoginScreen />} />
+      <Route path="/login" element={<SignInScreen />} />
       <Route path="/signup" element={<SignUpScreen />} />
       <Route path="/pvv" element={<PVVScreen />} />
       <Route path="/photos" element={<PhotosScreen />} />
     </Route>
   )
 );
-// Import your publishable key
+
 const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
 
 if (!PUBLISHABLE_KEY) {
diff --git a/web/src/screens/InformationScreen.tsx b/web/src/screens/InformationScreen.tsx
new file mode 100644
index 00000000..026b5fe6
--- /dev/null
+++ b/web/src/screens/InformationScreen.tsx
@@ -0,0 +1,11 @@
+import UserInformationForm from "@components/UserInformationForm.tsx";
+
+function InformationScreen() {
+    return (
+        <div className="flex-grow flex flex-col justify-center  bg-gradient-to-t from-blue-500 via-blue-400 to-blue-300">
+            <UserInformationForm />
+        </div>
+    );
+}
+
+export default InformationScreen;
diff --git a/web/src/screens/LoginScreen.tsx b/web/src/screens/LoginScreen.tsx
index 0a56b9f2..d033d7d0 100644
--- a/web/src/screens/LoginScreen.tsx
+++ b/web/src/screens/LoginScreen.tsx
@@ -1,9 +1,27 @@
+import { SignIn } from "@clerk/clerk-react";
+
 function LoginScreen() {
-  return (
-    <div>
-      <h2> Login Screen</h2>
-    </div>
-  );
+    return (
+        <div className="flex-grow flex flex-col h-full">
+            <div className="flex flex-grow justify-center">
+                <div className="flex flex-1 items-center justify-center">
+                    <SignIn  />
+                </div>
+                <div className="flex flex-col flex-1 items-center justify-top text-center pt-20 "
+                     style={{
+                         background: 'linear-gradient(to top, #ccf2ff 50%, #ffffff 100%)',
+                     }}
+                >
+                    <div className="mb-5">
+                        <img src="/src/assets/peacock.png" alt="Descriptive Text" className="max-w-[300px] max-h-[300px] " />
+                    </div>
+                    <div>
+                        <img src="/src/assets/AUIS_black_3.png" alt="Descriptive Text" className="max-w-xs max-h-xs" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
 }
 
 export default LoginScreen;
diff --git a/web/src/screens/SignInScreen.tsx b/web/src/screens/SignInScreen.tsx
index 0474b4b0..5d9230eb 100644
--- a/web/src/screens/SignInScreen.tsx
+++ b/web/src/screens/SignInScreen.tsx
@@ -1,14 +1,31 @@
-import {SignIn} from "@clerk/clerk-react";
+import { SignIn } from "@clerk/clerk-react";
+import Header from "../components/Header";
+import auisLogo from "../assets/peacock_white_inner_big.png";
+import auisAbbrev from "../assets/auis_no_depth.png";
 
 function SignInScreen() {
-    return (
-        <div>
-            <h1>
-                Custom Sign In Screen
-            </h1>
+  return (
+    <div className=" min-h-[calc(100vh)] bg-gradient-to-b from-AUIS-dark-teal to-AUIS-teal">
+      <Header />
+      <div className="flex">
+        <div className="hidden lg:flex flex-grow justify-center xl:justify-end xl:pr-24">
+          <div className=" flex-row">
+            <img
+              src={auisLogo}
+              alt="AUIS Peacock Logo"
+              className=" w-[350px]"
+            ></img>
+            <img src={auisAbbrev} alt="AUIS Logo" className="w-[350px]"></img>
+          </div>
+        </div>
+        <div className="flex flex-grow justify-center xl:justify-start pb-12 xl:pl-24">
+          <div data-testid="clerk-sign-in" className="flex">
             <SignIn />
+          </div>
         </div>
-    )
+      </div>
+    </div>
+  );
 }
 
-export default SignInScreen
\ No newline at end of file
+export default SignInScreen;
diff --git a/web/src/screens/SignUpScreen.tsx b/web/src/screens/SignUpScreen.tsx
index cca798a4..dbfb28a3 100644
--- a/web/src/screens/SignUpScreen.tsx
+++ b/web/src/screens/SignUpScreen.tsx
@@ -1,31 +1,31 @@
-import {SignUp} from "@clerk/clerk-react";
+import { SignUp } from "@clerk/clerk-react";
+import Header from "../components/Header";
+import auisLogo from "../assets/peacock_white_inner_big.png";
+import auisAbbrev from "../assets/auis_no_depth.png";
 
 function SignUpScreen() {
-    return (
-        <div className="flex-grow bg-white flex flex-col">
-            <div className="flex justify-center my-5">
-                <h1 className="text-black font-bold">Join Our Vibrant Community Today </h1>
-            </div>
-            <div className="flex flex-row justify-center mt-5">
-                <div className="flex flex-col flex-1 items-center justify-center text-center p-4">
-                    <div className="mb-5">
-                        <img src="/src/assets/react.svg" alt="Descriptive Text" className="min-w-1000 min-h-1000"/>
-                    </div>
-                    <div>
-                        <h1>Ready to Join Us? Let's get started and set up your account.</h1>
-                        <h2>If you already have one, sign in here to access your profile.</h2>
-                    </div>
-                </div>
-
-                <div className="w-px bg-gray-300 mt-15">a</div>
-
-                <div className="flex flex-1 items-center justify-center mt-15">
-                    <SignUp/>
-                </div>
-            </div>
-
+  return (
+    <div className=" min-h-[calc(100vh)] bg-gradient-to-b from-AUIS-dark-teal to-AUIS-teal">
+      <Header />
+      <div className="flex">
+        <div className="hidden lg:flex flex-grow justify-center xl:justify-end xl:pr-24">
+          <div className=" flex-row">
+            <img
+              src={auisLogo}
+              alt="AUIS Peacock Logo"
+              className=" w-[350px]"
+            ></img>
+            <img src={auisAbbrev} alt="AUIS Logo" className="w-[350px]"></img>
+          </div>
+        </div>
+        <div className="flex flex-grow justify-center xl:justify-start pb-12 xl:pl-24">
+          <div data-testid="clerk-sign-in" className="flex">
+            <SignUp />
+          </div>
         </div>
-    )
+      </div>
+    </div>
+  );
 }
 
-export default SignUpScreen
+export default SignUpScreen;