diff --git a/code/frontend/src/App.tsx b/code/frontend/src/App.tsx
index 90e803a..0e2c589 100644
--- a/code/frontend/src/App.tsx
+++ b/code/frontend/src/App.tsx
@@ -8,9 +8,9 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
 function App() {
   return (
-    <div className="App">
-      <Header />
-      <Router>
+    <Router>
+      <div className="App">
+        <Header />
         <Routes>
           <Route
             path="/login"
@@ -21,10 +21,9 @@ function App() {
             element={<LoginAndSignUpPage signupProp={true} />}
           ></Route>
         </Routes>
-      </Router>
-
-      <Footer />
-    </div>
+        <Footer />
+      </div>
+    </Router>
   );
 }
 
diff --git a/code/frontend/src/components/Footer.tsx b/code/frontend/src/components/Footer.tsx
index 2393399..6de60d4 100644
--- a/code/frontend/src/components/Footer.tsx
+++ b/code/frontend/src/components/Footer.tsx
@@ -1,16 +1,16 @@
 import "./footer.css";
-
+import { Link } from "react-router-dom";
 function Footer() {
   return (
     <footer className="footer">
       <div className="footer-left">
-        <a href="" className="footer-link feather">
+        <Link to="/" className="footer-link feather">
           <img src="/assets/icons/feather_black.svg" alt="Feather icon" />
           <span className="small-title">Feather Feed</span>
-        </a>
+        </Link>
         <a
           href="https://github.com/bubblecup-12/VogelSocialMedia"
-          target="_blank "
+          target="_blank"
           className="footer-link github"
         >
           <img src="/assets/icons/github-mark.svg" alt="GitHub mark" />
@@ -20,24 +20,21 @@ function Footer() {
       </div>
 
       <div className="footer-right">
-        <a className="footer-link" href="#">
-          Home
-        </a>
-        <a className="footer-link" href="#">
-          About
-        </a>
-        <a className="footer-link" href="#">
-          Login
-        </a>
-        <a className="footer-link" href="#">
-          Sign up
-        </a>
-        <a className="footer-link" href="#">
-          Create Post
-        </a>
-        <a className="footer-link" href="#">
+        <Link className="footer-link" to="/">
           Feed
-        </a>
+        </Link>
+        <Link className="footer-link" to="login">
+          Login
+        </Link>
+        <Link className="footer-link" to="/register">
+          Sign up
+        </Link>
+        <Link className="footer-link" to="/">
+          Create Post
+        </Link>
+        <Link className="footer-link" to="/about">
+          About
+        </Link>
       </div>
     </footer>
   );
diff --git a/code/frontend/src/pages/LoginAndSignUpPage.tsx b/code/frontend/src/pages/LoginAndSignUpPage.tsx
index 34e3914..253174e 100644
--- a/code/frontend/src/pages/LoginAndSignUpPage.tsx
+++ b/code/frontend/src/pages/LoginAndSignUpPage.tsx
@@ -1,5 +1,5 @@
 import "./loginAndSignUpPage.css";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import axios from "axios";
 
 type FormData = {
@@ -14,6 +14,9 @@ function LoginAndSignUpPage({ signupProp }: { signupProp: boolean }) {
     error: String;
     details: { message: string }[];
   }>();
+  useEffect(() => {
+    setSignup(signupProp);
+  }, [signupProp]);
   const toggleLogin = (event: React.MouseEvent<HTMLElement>) => {
     event.preventDefault();
     setErrorMessages(undefined);