diff --git a/chorechef_frontend/.env b/chorechef_frontend/.env
new file mode 100644
index 0000000000000000000000000000000000000000..39f80fdbf1639e9e55139b00be3e2119e9c807bc
--- /dev/null
+++ b/chorechef_frontend/.env
@@ -0,0 +1 @@
+VITE_BACKEND_URL=http://localhost:8001
diff --git a/chorechef_frontend/src/components/Chores.vue b/chorechef_frontend/src/components/Chores.vue
index 7e7981244984e34cb749708d23464faef68fe61c..ed4a7dcc084b2298e285623af2906b412c232714 100644
--- a/chorechef_frontend/src/components/Chores.vue
+++ b/chorechef_frontend/src/components/Chores.vue
@@ -327,6 +327,7 @@ interface User {
   user_id: number;
   username: string;
 }
+const BACKEND_URL = import.meta.env.VITE_BACKEND_URL;
 
 export default {
   data() {
@@ -367,7 +368,7 @@ export default {
             this.users.length
         ].user_id;
 
-      fetch(`http://localhost:8000/chores/${chore.chore_id}/`, {
+      fetch(`${BACKEND_URL}/chores/${chore.chore_id}/`, {
         method: "PATCH",
         headers: {
           "Content-Type": "application/json",
@@ -402,7 +403,7 @@ export default {
             this.users.length
         ].user_id;
 
-      fetch(`http://localhost:8000/chores/${chore.chore_id}/`, {
+      fetch(`${BACKEND_URL}/chores/${chore.chore_id}/`, {
         method: "PATCH",
         headers: {
           "Content-Type": "application/json",
@@ -457,7 +458,7 @@ export default {
         return;
       }
 
-      fetch("http://localhost:8000/chores/", {
+      fetch(`${BACKEND_URL}/chores/`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -494,7 +495,7 @@ export default {
       });
     },
     saveChore(chore: Chore) {
-      fetch(`http://localhost:8000/chores/${chore.chore_id}/`, {
+      fetch(`${BACKEND_URL}/chores/${chore.chore_id}/`, {
         method: "PUT",
         headers: {
           "Content-Type": "application/json",
@@ -506,7 +507,7 @@ export default {
       });
     },
     deleteChore(chore: Chore) {
-      fetch(`http://localhost:8000/chores/${chore.chore_id}/`, {
+      fetch(`${BACKEND_URL}/chores/${chore.chore_id}/`, {
         method: "DELETE",
       }).then(() => {
         this.allChores = this.allChores.filter(
@@ -575,12 +576,12 @@ export default {
     },
   },
   async mounted() {
-    fetch("http://localhost:8000/chores/")
+    fetch(`${BACKEND_URL}/chores/`)
       .then((response) => response.json())
       .then((data) => {
         this.allChores = data;
       });
-    fetch("http://localhost:8000/users/")
+    fetch(`${BACKEND_URL}/users/`)
       .then((response) => response.json())
       .then((data) => {
         // sort by id to keep the order consistent
diff --git a/chorechef_frontend/src/components/Mealplan.vue b/chorechef_frontend/src/components/Mealplan.vue
index ff36eacbfe897b9bcd899a03bc3a85a6acb814ff..51cd708b4015392f420f516c03db99339c04734f 100644
--- a/chorechef_frontend/src/components/Mealplan.vue
+++ b/chorechef_frontend/src/components/Mealplan.vue
@@ -107,6 +107,7 @@ import { ref } from "vue";
 import { format, add, setDefaultOptions } from "date-fns";
 import { de } from "date-fns/locale";
 setDefaultOptions({ locale: de });
+const BACKEND_URL = import.meta.env.VITE_BACKEND_URL;
 interface Meal {
   meal_name: string;
   meal_description: string;
@@ -165,7 +166,7 @@ export default {
     },
 
     async fetchMeals() {
-      const response = await fetch("http://localhost:8000/meals");
+      const response = await fetch(`${BACKEND_URL}/meals`);
       const data = await response.json();
       return data as Meal[];
     },
@@ -182,7 +183,7 @@ export default {
       if (index !== -1) {
         this.meals.splice(index, 1);
       }
-      fetch(`http://localhost:8000/meals/${date}/`, {
+      fetch(`${BACKEND_URL}/${date}/`, {
         method: "DELETE",
       });
     },
@@ -198,7 +199,7 @@ export default {
       console.log(JSON.stringify(this.editingMeal));
 
       if (index === -1) {
-        let resp = await fetch("http://localhost:8000/meals/", {
+        let resp = await fetch(`${BACKEND_URL}/meals/`, {
           method: "POST",
           headers: {
             "Content-Type": "application/json",
@@ -208,7 +209,7 @@ export default {
         console.log(resp);
         console.log(resp.json());
       } else {
-        fetch(`http://localhost:8000/meals/${this.editingMeal!.meal_date}/`, {
+        fetch(`${VITE_BACKEND_URL}/meals/${this.editingMeal!.meal_date}/`, {
           method: "PUT",
           headers: {
             "Content-Type": "application/json",
diff --git a/chorechef_frontend/src/components/Settings.vue b/chorechef_frontend/src/components/Settings.vue
index b2101edce7f05b220fe7fa31a87a43c570b9af5a..f8abf13b98bf85da860fb7c1ad87b33a92ef0d5a 100644
--- a/chorechef_frontend/src/components/Settings.vue
+++ b/chorechef_frontend/src/components/Settings.vue
@@ -98,6 +98,7 @@ import {
 </template>
 
 <script lang="ts">
+const BACKEND_URL = import.meta.env.VITE_BACKEND_URL;
 interface User {
   user_id: number;
   username: string;
@@ -113,7 +114,7 @@ export default {
   },
   methods: {
     async fetchUsers() {
-      const response = await fetch("http://localhost:8000/users/");
+      const response = await fetch(`${BACKEND_URL}/users/`);
       this.users = await response.json();
     },
     addUser() {
@@ -123,7 +124,7 @@ export default {
       this.userToEdit = user;
     },
     deleteUser(user: User) {
-      fetch("http://localhost:8000/users/" + user.user_id + "/", {
+      fetch(`${BACKEND_URL}/users/${user.user_id}/`, {
         method: "DELETE",
       }).then(() => {
         this.fetchUsers();
@@ -131,7 +132,7 @@ export default {
     },
     updateUser(user: User) {
       console.log(user);
-      fetch("http://localhost:8000/users/" + user.user_id + "/", {
+      fetch(`${BACKEND_URL}/users/${user.user_id}/`, {
         method: "PUT",
         headers: {
           "Content-Type": "application/json",
@@ -143,7 +144,7 @@ export default {
       });
     },
     saveUser() {
-      fetch("http://localhost:8000/users/", {
+      fetch(`${BACKEND_URL}/users/`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",