diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index ad42295e..9ae1d63d 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -21,7 +21,7 @@
         "react-dom": "^18.2.0",
         "react-i18next": "^14.0.5",
         "react-icons": "^5.0.1",
-        "react-router-dom": "^6.22.2",
+        "react-router-dom": "^6.22.3",
         "react-scripts": "^5.0.1",
         "web-vitals": "^3.5.1"
       },
@@ -5050,9 +5050,9 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.2.tgz",
-      "integrity": "sha512-+Rnav+CaoTE5QJc4Jcwh5toUpnVLKYbpU6Ys0zqbakqbaLQHeglLVHPfxOiQqdNmUy5C2lXz5dwC6tQNX2JW2Q==",
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
+      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -22195,11 +22195,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.22.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.2.tgz",
-      "integrity": "sha512-YD3Dzprzpcq+tBMHBS822tCjnWD3iIZbTeSXMY9LPSG541EfoBGyZ3bS25KEnaZjLcmQpw2AVLkFyfgXY8uvcw==",
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
+      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
       "dependencies": {
-        "@remix-run/router": "1.15.2"
+        "@remix-run/router": "1.15.3"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -22209,12 +22209,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.22.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.2.tgz",
-      "integrity": "sha512-WgqxD2qySEIBPZ3w0sHH+PUAiamDeszls9tzqMPBDA1YYVucTBXLU7+gtRfcSnhe92A3glPnvSxK2dhNoAVOIQ==",
+      "version": "6.22.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
+      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
       "dependencies": {
-        "@remix-run/router": "1.15.2",
-        "react-router": "6.22.2"
+        "@remix-run/router": "1.15.3",
+        "react-router": "6.22.3"
       },
       "engines": {
         "node": ">=14.0.0"
diff --git a/webapp/package.json b/webapp/package.json
index f31b2a0c..aab06447 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -16,7 +16,7 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^14.0.5",
     "react-icons": "^5.0.1",
-    "react-router-dom": "^6.22.2",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "^5.0.1",
     "web-vitals": "^3.5.1"
   },
diff --git a/webapp/src/components/loginAndRegistration/Login.js b/webapp/src/components/loginAndRegistration/Login.js
index 167b5ca8..b33e629c 100644
--- a/webapp/src/components/loginAndRegistration/Login.js
+++ b/webapp/src/components/loginAndRegistration/Login.js
@@ -1,50 +1,80 @@
 import React from "react";
-import { FaUser, FaLock } from "react-icons/fa";
 import { Link } from "react-router-dom";
-import Button from "@mui/material/Button";
 import { useTranslation } from "react-i18next";
 import "../../custom.css";
+import axios from 'axios';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 const Login = () => {
+  const navigate = useNavigate();
+  const apiUrl = (process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000') + "/login";
   const { t } = useTranslation("global");
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    try {
+        const response = await axios.post(apiUrl, { username, password });
+        console.log("Hello " + response.username);
+        //Used to redirect to the menu to start playing
+        navigate('/menu');
+    } catch (error) {
+      console.error('Error adding user:', error);
+    }
+  };
 
   return (
-    <div className="wrapper">
-      <form action="">
-        <div className="wrapper2">
+    <div className="general">
+
+    <div className="card">
+      <div className="card2">
+        <form className="form" onSubmit={handleSubmit}>
           <h1>{t("login.title")}</h1>
           <div className="input-box">
-            <input type="text" placeholder={t("login.username_placeholder")} />
-            <FaUser className="icon" />
+              <input
+                type="text"
+                placeholder={t("addUser.username_placeholder")}
+                required
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+              />
           </div>
           <div className="input-box">
-            <input type="password" placeholder={t("login.password_placeholder")} />
-            <FaLock className="icon" />
+              <input
+                type="password"
+                placeholder={t("addUser.password_placeholder")}
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
           </div>
-
+          {//TODO: Study this option and see if it is viable
+          } 
           <div className="remember-forgot">
             <label>
               <input type="checkbox" /> {t("login.remember_me")}
             </label>
-            <a href="#">{t("login.forgot_password")}</a>
           </div>
 
-          <ButtonMenu />
+          <button type="submit">{t("login.login_button")}</button>
           <LinkRegister />
-        </div>
-      </form>
+        </form>
+      </div>
+    </div>
     </div>
   );
 };
 
-function ButtonMenu() {
-  const { t } = useTranslation("global");
-  return (
-    <Link to="/menu" className="button-menu">
-      <Button>{t("login.login_button")}</Button>
-    </Link>
-  );
-}
+// function ButtonMenu() {
+//   const { t } = useTranslation("global");
+//   return (
+//     <Link to="/menu" className="button-menu">
+      
+//     </Link>
+//   );
+// }
 
 function LinkRegister() {
   const { t } = useTranslation("global");
@@ -57,7 +87,6 @@ function LinkRegister() {
 
 export default Login;
 
-
 // // src/components/Login.js
 // import React, { useState } from 'react';
 // import axios from 'axios';
@@ -137,4 +166,4 @@ export default Login;
 //   );
 // };
 
-// export default Login;
+// export default Login;
\ No newline at end of file