Index: imaps-frontend/src/pages/Login/Login.jsx
===================================================================
--- imaps-frontend/src/pages/Login/Login.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/Login/Login.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,131 +1,88 @@
-import React, {useContext, useState} from "react";
-import {Link, useLocation, useNavigate} from "react-router-dom";
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
 import styles from "./Login.module.css";
 import illustration from "../../assets/illustration_img.png";
-import Logo from "../../components/Logo/Logo.jsx";
-import HttpService from "../../scripts/net/HttpService.js";
-import {useAppContext} from "../../components/AppContext/AppContext.jsx";
-import config, {API_BASE_URL} from "../../scripts/net/netconfig.js";
-import google_icon from "../../assets/Logo-google-icon-PNG.png"
-import github_icon from "../../assets/github-mark-white.png";
-import { v4 as uuidv4 } from 'uuid';
 
-const LoginPage = () => {
-    const [formUsername, setFormUsername] = useState("");
-    const [password, setPassword] = useState("");
-    const [error, setError] = useState(null);
-    const navigate = useNavigate();
-    const location = useLocation();
+const LoginPage = ({onLogin}) => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState(null);
+  const navigate = useNavigate();
 
-    const {setUsername, setIsAuthenticated} = useAppContext();
+  const payload = {
+    username: username,
+    password: password
+  };
 
-    const {targetPath} = location.state || {targetPath: {pathname: "/"}};
+  const handleLogin = (e) => {
+    e.preventDefault();
 
-    const payload = {
-        username: formUsername,
-        password: password,
-    };
+    fetch("http://localhost:8080/api/auth/login", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(payload),
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Login failed: resp = " + response.statusText); 
+        }
+        return response.json();
+      })
+      .then((data) => {
+        if (data.token) {
+          navigate("/Maps/FinkiMaps/Draw");
+          onLogin(data.token)
+        } else {
+          setError("Invalid username or password.");
+        }
+      })
+      .catch((error) => {
+        console.error("Login failed", error);
+        setError("Login failed. Please try again.");
+      });
+    
+  };
 
-    const handleLogin = async () => {
-        const httpService = new HttpService();
-        return httpService.post(config.auth.login, payload);
-    };
-
-    const login = async (e) => {
-        e.preventDefault();
-
-        handleLogin()
-            .then(resp => {
-                if (resp.token) {
-                    navigate(targetPath);
-                    localStorage.setItem("token", resp.token);
-                    setUsername(resp.username);
-                    setIsAuthenticated(true);
-                    console.log("ROLES", resp.roles);
-                } else {
-                    setError("Invalid username or password.");
-                }
-            }).catch(reason => {
-            console.error("Login failed", reason);
-            setError("Login failed. Please try again.");
-        });
-    };
-
-    const continueWithGitHub = async () => {
-        const httpService = new HttpService();
-        httpService.setResponseType('text');
-        const state = await httpService.get(config.auth.oauth.github.state)
-        const clientId = 'Iv23liqzhX5wMYNDHtnz';
-        const redirectUri = encodeURI(`${API_BASE_URL}/oauth/callback/github`);
-
-        const githubAuthUrl = `https://github.com/login/oauth/authorize?client_id=${encodeURI(clientId)}&redirect_uri=${redirectUri}&state=${encodeURI(state)}&scope=user:email`;
-
-        window.location.href = githubAuthUrl;
-
-    };
-
-    const continueWithGoogle = async () => {
-        console.log("Continue with Google");
-        const httpService = new HttpService();
-        httpService.setResponseType('text');
-        const state = await httpService.get(config.auth.oauth.github.state)
-        const clientId = '1024418489231-ml40ukvqcg9ad1h5ejor5dm6ipt6p8fo.apps.googleusercontent.com';
-        const redirectUri = encodeURI(`${API_BASE_URL}/oauth/callback/google`);
-        const googleAuthUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${encodeURIComponent(clientId)}
-        &redirect_uri=${encodeURIComponent(redirectUri)}&state=${encodeURIComponent(state)}&response_type=code&scope=${encodeURIComponent("openid profile email")}`;
-        window.location.href = googleAuthUrl
-    };
-
-    return (
-        <div className={styles.wrapper}>
-            <Logo></Logo>
-            <div className={styles.illustration}>
-                <img src={illustration} alt="illustration"/>
-            </div>
-            <div className={styles.form}>
-                <div className={styles.heading}>LOGIN</div>
-                <form onSubmit={login}>
-                    <div>
-                        <label htmlFor="username">Username</label>
-                        <input
-                            type="text"
-                            id="name"
-                            placeholder="Enter your username"
-                            onChange={(e) => setFormUsername(e.target.value)}
-                            value={formUsername}
-                            required
-                        />
-                    </div>
-                    <div>
-                        <label htmlFor="password">Password</label>
-                        <input
-                            type="password"
-                            id="password"
-                            placeholder="Enter your password"
-                            onChange={(e) => setPassword(e.target.value)}
-                            value={password}
-                            required
-                        />
-                    </div>
-                    {error && <p className={styles.error}>{error}</p>}
-                    <button type="submit">Submit</button>
-                </form>
-                <div className={styles.or}>OR</div>
-                <div className={styles.socialButtons}>
-                    <button className={styles.socialButton} onClick={continueWithGoogle}>
-                        <img src={google_icon} alt="Facebook Icon" className={styles.socialIcon}/>
-                        Sign In With Google
-                    </button>
-                    <button className={styles.socialButton} onClick={continueWithGitHub}>
-                        <img src={github_icon} alt="GitHub Icon" className={styles.socialIcon}/>
-                        Sign In With GitHub
-                    </button>
-                </div>
-                <p>
-                    Don't have an account? <Link to="/Signup"> Sign Up </Link>
-                </p>
-            </div>
-        </div>
-    );
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.illustration}>
+        <img src={illustration} alt="illustration" />
+      </div>
+      <div className={styles.form}>
+        <div className={styles.heading}>LOGIN</div>
+        <form onSubmit={handleLogin}>
+          <div>
+            <label htmlFor="username">Username</label>
+            <input
+              type="text"
+              id="name"
+              placeholder="Enter your username"
+              onChange={(e) => setUsername(e.target.value)}
+              value={username}
+              required
+            />
+          </div>
+          <div>
+            <label htmlFor="password">Password</label>
+            <input
+              type="password"
+              id="password"
+              placeholder="Enter your password"
+              onChange={(e) => setPassword(e.target.value)}
+              value={password}
+              required
+            />
+          </div>
+          {error && <p className={styles.error}>{error}</p>}
+          <button type="submit">Submit</button>
+        </form>
+        <p>
+          Don't have an account? <Link to="/Signup"> Sign Up </Link>
+        </p>
+      </div>
+    </div>
+  );
 };
 
Index: imaps-frontend/src/pages/Login/Login.module.css
===================================================================
--- imaps-frontend/src/pages/Login/Login.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/Login/Login.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -13,39 +13,32 @@
 
 .wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  justify-content: flex-end; /* Move content towards the right */
-  align-items: center; /* Center content vertically */
   height: 100vh;
-  margin-left: 30%;
-  padding: 2rem;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
-
+.wrapper p {
+  font-size: 0.85rem;
+  margin-top: 1rem;
+}
 
 .form {
-  padding: 2rem;
-  display: flex;
-  flex-direction: column; /* Stack form elements vertically */
-  align-items: center; /* Center form elements horizontally */
-  justify-content: center; /* Vertically center the form */
-  background-color: #fff;
-  border-radius: 8px; /* Rounded corners for the form */
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add subtle shadow to form */
-  width: 100%;
-  max-width: 400px; /* Restrict the form width for better appearance */
+  padding: 1.5rem;
+  -ms-flex-preferred-size: 100vw;
+  flex-basis: 100vw;
 }
 
 .form .heading {
-  font-size: 1.8rem;
+  font-size: 1.5rem;
   font-weight: bold;
   text-align: center;
-  margin-bottom: 1.5rem; /* Spacing between heading and form */
 }
 
 .or {
-  margin-top: 1em;
-  text-align: center;
-  font-weight: bold;
-  color: #666;
+  margin: 1rem 0;
 }
 
@@ -53,6 +46,4 @@
   display: block;
   margin: 1.25rem 0 1rem 0;
-  font-size: 0.95rem;
-  color: #333;
 }
 
@@ -60,11 +51,8 @@
   height: 40px;
   width: 100%;
-  max-width: 350px; /* Slightly larger max-width */
   padding: 15px;
   background-color: #f1f9ff;
   border: 2px solid #bce0fd;
   border-radius: 8px;
-  box-sizing: border-box;
-  font-size: 1rem; /* Make input text a bit larger */
 }
 
@@ -72,6 +60,4 @@
   height: 40px;
   width: 100%;
-  max-width: 350px;
-  margin-top: 1.5rem;
   background-color: #258de6;
   color: white;
@@ -79,89 +65,42 @@
   letter-spacing: 1px;
   border: none;
+  display: block;
+  margin: 0 auto;
   font-weight: bold;
+  margin-top: 1.5rem;
   border-radius: 8px;
-  font-size: 1rem; /* Increase font size for better readability */
-}
-
-.socialButtons {
-  display: flex;
-  flex-direction: column; /* Stack social buttons vertically */
-  align-items: center; /* Center them horizontally */
-}
-
-.socialButton {
-  display: inline-flex; /* Align text and image inline */
-  align-items: center; /* Vertically center content */
-  justify-content: flex-start; /* Align items to the left */
-  padding: 10px 15px;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 0.8rem;
-  font-weight: bold;
-  transition: background-color 0.2s, transform 0.2s;
-  width: 100%;
-  max-width: 350px; /* Limit max width */
-}
-
-.socialButton img {
-  width: 20px;
-  height: 20px;
-  margin-right: 10px;
-  vertical-align: middle;
-}
-
-.socialButton:hover {
-  filter: brightness(95%);
-}
-
-.socialButton:active {
-  transform: scale(0.98);
-}
-
-.socialButton:nth-child(2) {
-  background-color: #333; /* GitHub button */
-  color: white;
-}
-
-.socialButton:nth-child(1) {
-  background-color: #ffffff; /* Google button */
-  color: #000000;
-  box-shadow: 1px 2px #2f2525;
 }
 
 @media (min-width: 542px) {
   body {
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
     justify-content: center;
   }
-
   .wrapper {
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
     height: 100vh;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
     align-items: center;
-    justify-content: flex-end; /* Keep the form to the right */
-    padding: 2rem;
+    -ms-flex-pack: distribute;
+    justify-content: space-around;
+    padding: 1.5rem;
     max-width: 1100px;
   }
-
   .form {
+    -ms-flex-preferred-size: auto;
     flex-basis: auto;
-    align-items: center; /* Center form in larger screens */
-    width: 100%;
-    max-width: 400px; /* Keep form max width consistent */
   }
-
   .form input {
-    width: 100%; /* Ensures the input expands fully */
-    max-width: 350px;
+    width: 250px;
   }
-
-  .illustration{
-    margin-right: 40%;
-  }
-
   .illustration img {
-    max-width: 100%;
+    max-width: 80%;
     height: auto;
   }
@@ -169,25 +108,13 @@
 
 @media (max-width: 680px) {
-  .wrapper {
-    flex-direction: column; /* Stack form and illustration vertically */
-    align-items: center; /* Center content horizontally */
-    padding: 1rem;
+  .illustration {
+    display: none;
   }
+}
 
-  .illustration {
-    display: none; /* Hide the illustration on mobile */
-  }
-
-  .form {
-    width: 100%; /* Full width for mobile */
-    align-items: center; /* Center form elements horizontally */
-  }
-
-  .form input,
-  .form button,
-  .socialButton {
-    width: 100%; /* Full width for mobile */
-    max-width: 300px; /* Optional: Limit max width */
-  }
+.signUp .illustration {
+  order: 2;
+  justify-self: flex-end;
+  margin-left: 2rem;
 }
 
@@ -199,8 +126,2 @@
   transform: scale(0.98);
 }
-
-.error {
-  color: red;
-  font-size: 0.9rem;
-  margin-top: 0.5rem;
-}
