add image

frontend/src/pages/Login.jsx

@@ -1,9 +1,3 @@
-/**
- * Login Page
- *
- * Allows existing users to sign in with email and password
- */
-
 import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
@@ -39,13 +33,24 @@ export default function Login() {
   }
 
   return (
+    <div
+      style={{
+        minHeight: "100vh",
+        backgroundImage: "url(/ping.png)",
+        backgroundSize: "67%",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+      }}
+    >
     <div
       style={{
         maxWidth: "400px",
-                margin: "4rem auto",
+        margin: "0 auto",
         padding: "2rem",
+        paddingTop: "8rem",
         border: "1px solid #333",
         borderRadius: "8px",
+        backgroundColor: "rgba(0, 0, 0, 0.75)",
       }}
     >
       <h1 style={{ marginBottom: "2rem", textAlign: "center" }}>
@@ -80,7 +85,7 @@ export default function Login() {
             style={{
               width: "100%",
               padding: "0.5rem",
-                            fontSize: "1rem",
+              fontSize: "1.2rem",
               backgroundColor: "#242424",
               border: "1px solid #444",
               borderRadius: "4px",
@@ -102,7 +107,7 @@ export default function Login() {
             style={{
               width: "100%",
               padding: "0.5rem",
-                            fontSize: "1rem",
+              fontSize: "1.2rem",
               backgroundColor: "#242424",
               border: "1px solid #444",
               borderRadius: "4px",
@@ -118,7 +123,7 @@ export default function Login() {
           style={{
             width: "100%",
             padding: "0.75rem",
-                        fontSize: "1rem",
+            fontSize: "1.2rem",
             backgroundColor: loading ? "#333" : "#0066cc",
             color: "white",
             border: "none",
@@ -142,5 +147,6 @@ export default function Login() {
         </p>
       </div>
     </div>
+    </div>
   );
 }