diff --git a/apps/lightsaver_user_client/src/app/login/login.module.css b/apps/lightsaver_user_client/src/app/login/login.module.css
new file mode 100644
index 0000000..1477cc3
--- /dev/null
+++ b/apps/lightsaver_user_client/src/app/login/login.module.css
@@ -0,0 +1,22 @@
+.heading {
+  font-size: 24px;
+  color: white;
+  margin-bottom: 20px;
+}
+.loginInput {
+  margin-bottom: 12px;
+  border: white 1px solid;
+}
+
+.submitButton {
+  background-color: #4CAF50; /* Green */
+  border: none;
+  color: white;
+  padding: 10px 20px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/apps/lightsaver_user_client/src/app/login/page.tsx b/apps/lightsaver_user_client/src/app/login/page.tsx
new file mode 100644
index 0000000..9916a0f
--- /dev/null
+++ b/apps/lightsaver_user_client/src/app/login/page.tsx
@@ -0,0 +1,38 @@
+"use client";
+import styles from "./login.module.css";
+import { useState } from "react";
+
+export default function LoginPage() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  function handleSubmit(e: React.MouseEvent<HTMLButtonElement>) {
+      e.preventDefault();
+      
+  };
+
+  return (
+    <div>
+      <h1 className={styles.heading}>Login</h1>
+      <form>
+        <label>
+          Username:
+          <input className={styles.loginInput} type="text" name="username" value={username} onChange={(e) => setUsername(e.target.value)} />
+        </label>
+        <br />
+        <label>
+          Password:
+          <input
+            className={styles.loginInput}
+            type="password"
+                      name="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </label>
+        <br />
+        <button className={styles.submitButton} type="submit" onClick={handleSubmit}>Submit</button>
+      </form>
+    </div>
+  );
+}
diff --git a/package.json b/package.json
index 9bab91e..b3d3899 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,9 @@
     "node": ">=22.17.0"
   },
   "dependencies": {
-    "lightsaver": "workspace:*"
+    "lightsaver": "workspace:*",
+    "@apollo/client": "^3.13.8",
+    "graphql": "^16.11.0"
   },
   "devDependencies": {
     "pnpm": "^10.13.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1931f53..f84ad4e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,12 @@ importers:
 
   .:
     dependencies:
+      '@apollo/client':
+        specifier: ^3.13.8
+        version: 3.13.8(@types/react@19.1.8)(graphql@16.11.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      graphql:
+        specifier: ^16.11.0
+        version: 16.11.0
       lightsaver:
         specifier: workspace:*
         version: 'link:'