diff --git a/code/frontend/src/App.tsx b/code/frontend/src/App.tsx
index 9ecb273..f87006d 100644
--- a/code/frontend/src/App.tsx
+++ b/code/frontend/src/App.tsx
@@ -1,9 +1,9 @@
 import "./App.css";
-import "./colors.css";
-import "./fonts.css";
-import LoginAndSignUpPage from "./LoginAndSignUpPage";
-import Footer from "./Footer";
-import Header from "./header";
+import "./styles/colors.css";
+import "./styles/fonts.css";
+import LoginAndSignUpPage from "./pages/LoginAndSignUpPage";
+import Footer from "./components/Footer";
+import Header from "./components/header";
 
 function App() {
   return (
diff --git a/code/frontend/src/pages/loginAndSignUpPage.css b/code/frontend/src/pages/loginAndSignUpPage.css
index b5dd45a..56460ed 100644
--- a/code/frontend/src/pages/loginAndSignUpPage.css
+++ b/code/frontend/src/pages/loginAndSignUpPage.css
@@ -143,7 +143,7 @@
 
         border-radius: 8px;
         border: 5px solid var(--Rotkehlchen-gray);
-        background-image: url("../public/assets/images/IceBirdLogin.jpg");
+        background-image: url("../../public/assets/images/IceBirdLogin.jpg");
         background-size: cover;
         background-position: 75%;
     }
@@ -159,7 +159,7 @@
 
         border-radius: 8px;
         border: 5px solid var(--Rotkehlchen-gray);
-        background-image: url("../public/assets/images/SummerOwlSignup.jpg");
+        background-image: url("../../public/assets/images/SummerOwlSignup.jpg");
         background-size: cover;
         /*background-position: 75%;*/
     }
diff --git a/code/frontend/src/styles/colors.css b/code/frontend/src/styles/colors.css
index 60f352a..fb1d5e8 100644
--- a/code/frontend/src/styles/colors.css
+++ b/code/frontend/src/styles/colors.css
@@ -6,5 +6,5 @@
     --Rotkehlchen-yellow-default: #FED640;
     --Rotkehlchen-yellow-hover: #EAC22A;
     --Rotkehlchen-orange-default: #e79a0e;
-    --gradient-blue-backround-mobile: linear-gradient(270deg, rgba(20, 15, 86, 0.27) 0%, rgba(20, 15, 86, 0.58) 24%, rgba(20, 15, 86, 0.74) 43%, rgba(17, 13, 71, 0.82) 56%, rgba(13, 10, 56, 0.90) 68%), url('../public/assets/images/BirdsSky.jpg') lightgray 50% / cover no-repeat;
+    --gradient-blue-backround-mobile: linear-gradient(270deg, rgba(20, 15, 86, 0.27) 0%, rgba(20, 15, 86, 0.58) 24%, rgba(20, 15, 86, 0.74) 43%, rgba(17, 13, 71, 0.82) 56%, rgba(13, 10, 56, 0.90) 68%), url('../../public/assets/images/BirdsSky.jpg') lightgray 50% / cover no-repeat;
   }
\ No newline at end of file
diff --git a/code/frontend/src/styles/fonts.css b/code/frontend/src/styles/fonts.css
index 4d11c5d..86cae59 100644
--- a/code/frontend/src/styles/fonts.css
+++ b/code/frontend/src/styles/fonts.css
@@ -2,7 +2,7 @@
   font-family: "Lora";
   font-style: normal;
   font-weight: 400;
-  src: url(../public/assets/fonts/Lora/Lora-VariableFont_wght.ttf);
+  src: url(../../public/assets/fonts/Lora/Lora-VariableFont_wght.ttf);
   unicode-range: U+00-52F, U+1E00-1FFF, U+2200-22FF;
 }
 .title-h1 {
@@ -32,7 +32,7 @@ h1 {
 @font-face {
   font-family: "Inter";
   font-style: normal;
-  src: url(../public/assets/fonts/Inter/static/Inter_24pt-Medium.ttf);
+  src: url(../../public/assets/fonts/Inter/Inter-VariableFont_opsz\,wght.ttf);
 }
 .body-l,
 .body-m {