diff --git a/package-lock.json b/package-lock.json
index e2a29b41..f911dc30 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "react-flow": "^1.0.3",
         "react-flow-renderer": "^10.3.17",
         "react-router": "^6.22.1",
-        "react-router-dom": "^6.22.1",
+        "react-router-dom": "^6.23.0",
         "react-scripts": "5.0.1",
         "reactflow": "^11.10.4",
         "typescript": "^4.9.5",
@@ -3608,9 +3608,9 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.15.1",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.1.tgz",
-      "integrity": "sha512-zcU0gM3z+3iqj8UX45AmWY810l3oUmXM7uH4dt5xtzvMhRtYVhKGOmgOd1877dOPPepfCjUv57w+syamWIYe7w==",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
+      "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -15303,11 +15303,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.22.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.1.tgz",
-      "integrity": "sha512-0pdoRGwLtemnJqn1K0XHUbnKiX0S4X8CgvVVmHGOWmofESj31msHo/1YiqcJWK7Wxfq2a4uvvtS01KAQyWK/CQ==",
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
+      "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
       "dependencies": {
-        "@remix-run/router": "1.15.1"
+        "@remix-run/router": "1.16.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -15317,12 +15317,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.22.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.1.tgz",
-      "integrity": "sha512-iwMyyyrbL7zkKY7MRjOVRy+TMnS/OPusaFVxM2P11x9dzSzGmLsebkCvYirGq0DWB9K9hOspHYYtDz33gE5Duw==",
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
+      "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
       "dependencies": {
-        "@remix-run/router": "1.15.1",
-        "react-router": "6.22.1"
+        "@remix-run/router": "1.16.0",
+        "react-router": "6.23.0"
       },
       "engines": {
         "node": ">=14.0.0"
diff --git a/package.json b/package.json
index 2c00f926..5b0bdadc 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "react-flow": "^1.0.3",
     "react-flow-renderer": "^10.3.17",
     "react-router": "^6.22.1",
-    "react-router-dom": "^6.22.1",
+    "react-router-dom": "^6.23.0",
     "react-scripts": "5.0.1",
     "reactflow": "^11.10.4",
     "typescript": "^4.9.5",
diff --git a/src/Components/LogIn.tsx b/src/Components/LogIn.tsx
index b3379a95..36d5c266 100644
--- a/src/Components/LogIn.tsx
+++ b/src/Components/LogIn.tsx
@@ -1,4 +1,5 @@
 import HumaaansWireframe from '../Images/Humaaans Wireframe.png';
+import React, { useState } from 'react';
 import '../Styles/login.modules.css';
 
 interface Props {
@@ -6,6 +7,44 @@ interface Props {
 }
 
 function LogIn({backToHomeHandler}: Props) {
+    const url = 'http://localhost:4000/login';
+
+
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [errorMessage, setErrorMessage] = useState('');
+    const [successMessage, setSuccessMessage] = useState('');
+
+    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        
+        try {
+            const response = await fetch(url, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ email, password })
+            });
+
+            if (response.ok) {
+                setSuccessMessage('Login successful');
+                setEmail('');
+                setPassword('');
+                window.location.href = '/profile';
+            } else if (response.status === 404) {
+                setErrorMessage('User not found');
+            } else if (response.status === 401) {
+                setErrorMessage('Invalid credentials');
+            } else {
+                setErrorMessage('Error connecting to server');
+            }
+        } catch (error) {
+            console.error('Error:', error);
+            setErrorMessage('Error connecting to server');
+        }
+    };
+
     return (
         <div style={{
             margin: 0,
@@ -37,18 +76,33 @@ function LogIn({backToHomeHandler}: Props) {
                         If you are already a member you can login with your email address and password.
                     </div>
 
+
                     <div id="username-and-password">
-                        <form>
-                            <label htmlFor="username"> User name</label><br />
-                            <input type="text" id="user-name" name="username" /><br />
+                        <form onSubmit={handleSubmit}>
+                            <label htmlFor="username"> Email address</label><br />
+                            <input 
+                                type="email" 
+                                id="user-email" 
+                                name="email" 
+                                value={email} 
+                                onChange={(e) => setEmail(e.target.value)} 
+                                required 
+                            /><br />
 
                             <label htmlFor="password"> Password</label><br />
-                            <input type="text" id="password" name="password" /><br />
+                            <input 
+                                type="password" 
+                                id="password" 
+                                name="password" 
+                                value={password} 
+                                onChange={(e) => setPassword(e.target.value)} 
+                                required 
+                            /><br />
 
-                            <input type="checkbox" id="rememberme" defaultChecked />
-                            Remember me <br />
                             <button type="submit" id="login"> Log In </button>
                         </form>
+                        {errorMessage && <div>{errorMessage}</div>}
+                        {successMessage && <div>{successMessage}</div>}
                     </div>
                     <div>
                         Don't have an account? <a href="/SignUp">Sign up here</a>
diff --git a/src/Components/SignUp.tsx b/src/Components/SignUp.tsx
index 79b59a6f..7133ab20 100644
--- a/src/Components/SignUp.tsx
+++ b/src/Components/SignUp.tsx
@@ -1,11 +1,45 @@
 import HumaaansWireframe from '../Images/Humaaans Wireframe.png';
 import '../Styles/SignUp.modules.css';
+import React, { useState } from 'react';
 
 interface Props {
     backToLoginHandler: () => void;
 }
 
 function SignUp({backToLoginHandler}: Props) {
+
+    const url = 'http://localhost:4000/register';
+    
+
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [message, setMessage] = useState('');
+
+    const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+
+        try {
+            const response = await fetch('http://localhost:4000/register', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ email, password }),
+            });
+
+            if (response.ok) {
+                setMessage('Registration successful!');
+                window.location.href = '/login';
+            } else {
+                const errorMessage = await response.text();
+                setMessage(`Registration failed: ${errorMessage}`);
+            }
+        } catch (error) {
+           
+            setMessage('Failed to connect to the server.');
+        }
+    };
+
     return (
         <div style={{
             margin: 0,
@@ -30,7 +64,7 @@ function SignUp({backToLoginHandler}: Props) {
                         Become a member and enjoy pro learning
                     </div>
 
-                    <div id="sign-up-form">
+                    {/* <div id="sign-up-form">
                         <form>
                             <div id="sign-up-fields">
                                 <div id="float-left">
@@ -41,6 +75,7 @@ function SignUp({backToLoginHandler}: Props) {
                                     <label htmlFor="last-name" >Last name</label><br />
                                     <input type="text" className="name" name="last-name"/>
                                 </div>
+                                
                             </div>
                             <label htmlFor="emailaddress"> Email address</label><br />
                             <input type="text" id="emailaddress" name="email-address"/><br />
@@ -50,7 +85,22 @@ function SignUp({backToLoginHandler}: Props) {
                             <button type="submit" id="submitt"> Submit </button>
                             
                         </form>
+                    </div> */}
+
+
+                    
+
+                    <div id="sign-up-form">
+                        <form onSubmit={handleSubmit}>
+                            <label htmlFor="emailaddress"> Email address</label><br />
+                            <input type="text" id="emailaddress" name="email-address" value={email} onChange={(e) => setEmail(e.target.value)} /><br />
+                            <label htmlFor="pass-word"> password</label><br />
+                            <input type="password" id="pass-word" name="pass-word" value={password} onChange={(e) => setPassword(e.target.value)} /><br />
+
+                            <button type="submit" id="submitt"> Submit </button>
+                        </form>
                     </div>
+                    {message && <div>{message}</div>}
                 </div>
             </div>
         </div>