diff --git a/src/App.vue b/src/App.vue
index 3e11f067af7be7944457f7bc96e765d8abdf0dea..d80fae0b5000eaab01e06674f5084b3da957048d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
 import ErrorBoundaryCatcher from '@/components/Exceptions/ErrorBoundaryCatcher.vue';
-let apiUrl = import.meta.env.VITE_APP_API_URL;
-console.log("apiUrl: ", apiUrl);
 </script>
 
 <template>
diff --git a/src/components/BaseComponents/NavBar.vue b/src/components/BaseComponents/NavBar.vue
index 6b54c7187cf5ff808eb928e2413d7c0f62df6932..4e997eea3c0d0a65ede97fea1f7054fb52f0049d 100644
--- a/src/components/BaseComponents/NavBar.vue
+++ b/src/components/BaseComponents/NavBar.vue
@@ -164,15 +164,6 @@ const route = useRoute();
 
 const userStore: any = useUserInfoStore();
 
-let profileImage: any = ref('');
-
-if (useUserInfoStore().profileImage !== 0) {
-    profileImage = 'http://localhost:8080/api/images/' + useUserInfoStore().profileImage;
-} else {
-    profileImage = 'src/assets/userprofile.png';
-}
-
-
 let path = ref('#');
 
 let notificationListRef = ref<NotificationDTO[]>([]);
diff --git a/src/components/Friends/UserFriends.vue b/src/components/Friends/UserFriends.vue
index d6adc455830f7c3f22e892b395fb1bf44dd4d5c3..f9abe5c0484048e7d4c88ec34af2840aba01d1f3 100644
--- a/src/components/Friends/UserFriends.vue
+++ b/src/components/Friends/UserFriends.vue
@@ -19,7 +19,7 @@
                         <div class="card card-one">
                             <div class="header">
                                 <div v-if="friend.profileImage" class="avatar">
-                                    <img :src="'http://localhost:8080/api/images/' + friend.profileImage" alt="">
+                                    <img :src="apiUrl + '/api/images/' + friend.profileImage" alt="">
                                 </div>
                                 <div v-else class="avatar">
                                     <img :src="'../src/assets/userprofile.png'" alt="">
@@ -53,7 +53,7 @@
                 <div v-if="elementsInFriendRequest" id="requests">
                     <div class="request" v-for="(friend) in friendRequests" :key="friend.id">
                         <div v-if="friend.profileImage !== null"><img id="profilePicture"
-                                :src="'http://localhost:8080/api/images/' + friend.profileImage" alt="bruker"
+                                :src="apiUrl + '/api/images/' + friend.profileImage" alt="bruker"
                                 class="profile-photo-lg"></div>
                         <div v-else><img id="profilePicture" :src="'../src/assets/userprofile.png'" alt="bruker"
                                 class="profile-photo-lg"></div>
@@ -86,7 +86,7 @@
                                     <div class="row d-flex align-items-center">
                                         <div class="col-md-2 col-sm-2">
                                             <div v-if="user.profileImage !== null"><img id="profilePicture"
-                                                    :src="'http://localhost:8080/api/images/' + user.profileImage"
+                                                    :src="apiUrl + '/api/images/' + user.profileImage"
                                                     alt="bruker" class="profile-photo-lg"></div>
                                             <div v-else><img id="profilePicture" :src="'../src/assets/userprofile.png'"
                                                     alt="bruker" class="profile-photo-lg"></div>
@@ -124,6 +124,8 @@ import { FriendService, UserService } from '@/api';
 import type { UserDTO } from '@/api';
 import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
 
+let apiUrl = import.meta.env.VITE_APP_API_URL;
+
 const router = useRouter();
 const friends = ref();
 const showFriends = ref(true);
diff --git a/src/components/Settings/SettingsProfile.vue b/src/components/Settings/SettingsProfile.vue
index 6d083ff4f9f60eba55a1e33ef3eb05aa6651c159..ea526eb7a1546ebdc7bb4b3b5b4f3002550a0a37 100644
--- a/src/components/Settings/SettingsProfile.vue
+++ b/src/components/Settings/SettingsProfile.vue
@@ -5,6 +5,8 @@ import { useUserInfoStore } from "@/stores/UserStore";
 import { UserService, ImageService } from '@/api';
 import type { UserUpdateDTO } from '@/api';
 
+let apiUrl = import.meta.env.VITE_APP_API_URL;
+
 const firstNameRef = ref()
 const surnameRef = ref('')
 const emailRef = ref('')
@@ -42,7 +44,7 @@ const uploadImage = async (file: any) => {
 
   try {
     const response = await ImageService.uploadImage({ formData });
-    iconSrc.value = "http://localhost:8080/api/images/" + response;
+    iconSrc.value = apiUrl + "/api/images/" + response;
 
     const updateUserPayload: UserUpdateDTO = {
       profileImage: response,
@@ -65,7 +67,7 @@ async function setupForm() {
       surnameRef.value = response.lastName;
     }
     if (response.profileImage != null) {
-      iconSrc.value = "http://localhost:8080/api/images/" + response.profileImage;
+      iconSrc.value = apiUrl + "/api/images/" + response.profileImage;
     } else {
       iconSrc.value = "../src/assets/userprofile.png";
     }
@@ -133,7 +135,7 @@ onMounted(() => {
       <h6>Stilsett din profil banner</h6>
       <div class="bannerHolder">
         <div v-for="x in imageRange" :key="x">
-          <img :src="'http://localhost:8080/api/images/' + x" style="width: 400px; height: 40px; margin: 10px">
+          <img :src="apiUrl + '/api/images/' + x" style="width: 400px; height: 40px; margin: 10px">
         </div>
       </div>
     </div>
diff --git a/src/components/Shop/ItemShop.vue b/src/components/Shop/ItemShop.vue
index d6f14fdca2bad7a27b7df6daef35e0db166199f7..2cec70f76a1fce6ed78374bc822cd623277f4041 100644
--- a/src/components/Shop/ItemShop.vue
+++ b/src/components/Shop/ItemShop.vue
@@ -37,7 +37,7 @@
             <div class="category row mb-2 m-2">
               <div v-for="product in products" :key="product.id" class="card text-center d-flex justify-content-center align-items-center"
                    style="width: 8rem; border: none">
-                <img :src="`http://localhost:8080/api/images/${product.imageId}`" style="width: 100px; height: 100px;" class="card-img-top" alt="..." />
+                <img :src="apiUrl + `/api/images/${product.imageId}`" style="width: 100px; height: 100px;" class="card-img-top" alt="..." />
                 <div class="card-body">
                   <h5 class="card-title">{{ product.itemName }}</h5>
                   <h6>{{ product.price }}<img src="../../assets/items/pigcoin.png" style="width: 2rem" /></h6>
@@ -105,7 +105,8 @@
   import { useUserInfoStore } from '@/stores/UserStore';
   import { ItemService } from '@/api';
   import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
-  
+
+  let apiUrl = import.meta.env.VITE_APP_API_URL;
   const products = ref([] as any);
   const points = ref();
   
diff --git a/src/components/UserProfile/ExternalProfile.vue b/src/components/UserProfile/ExternalProfile.vue
index 3852752e2e3d7889edfec0f7f4862375072fc5e5..1d654b491ef3c07d675efbfa1d4f659a84bf8778 100644
--- a/src/components/UserProfile/ExternalProfile.vue
+++ b/src/components/UserProfile/ExternalProfile.vue
@@ -6,6 +6,7 @@ import {UserService, BadgeService, GoalService, type GoalDTO, type BadgeDTO, Fri
 import { ItemService } from "@/api";
 import handleUnknownError from '@/components/Exceptions/unkownErrorHandler'
 
+let apiUrl = import.meta.env.VITE_APP_API_URL;
 let numberOfHistory = 6;
 let cardTitles = ["Spain tour", "Food waste", "Coffee", "Concert", "New book", "Pretty clothes"]
 let firstname = ref();
@@ -65,7 +66,7 @@ async function setupForm() {
       streak.value = response.streak?.currentStreak;
     }
     if (response.profileImage) {
-      imageUrl.value = "http://localhost:8080/api/images/" + response.profileImage;
+      imageUrl.value = apiUrl + "/api/images/" + response.profileImage;
     }
     getInventory();
     getBadges();
@@ -177,7 +178,7 @@ const removeFriend = () => {
                   <div v-if="hasInventory" class="scrolling-wrapper-badges row flex-row flex-nowrap mt-2 pb-2 pt-2">
                     <div v-for="product in inventory" :key="product.id" class="card text-center"
                         style="width: 12rem; border: none; cursor: pointer; margin: 1rem; border: 2px solid black" @click="selectItem(product)">
-                        <img :src="`http://localhost:8080/api/images/${product.imageId}`" class="card-img-top"
+                        <img :src="apiUrl + `/api/images/${product.imageId}`" class="card-img-top"
                             alt="..." />
                         <div class="card-body">
                             <h5 class="card-title">{{ product.itemName }}</h5>
@@ -202,7 +203,7 @@ const removeFriend = () => {
                         style="width: 12rem; border: none; cursor: pointer; margin: 1rem; 
                         border: 2px solid black" data-bs-toggle="tooltip" data-bs-placement="top" 
                         data-bs-custom-class="custom-tooltip" :data-bs-title="badge.criteria">
-                        <img :src="`http://localhost:8080/api/images/${badge.imageId}`" class="card-img-top"
+                        <img :src="apiUrl + `/api/images/${badge.imageId}`" class="card-img-top"
                             alt="..." />
                         <div class="card-body">
                             <h5 class="card-title">{{ badge.badgeName }}</h5>
diff --git a/src/components/UserProfile/MyProfile.vue b/src/components/UserProfile/MyProfile.vue
index 6f4e2ab6c80dd4dda4b2f471bcf64e9c8e1c76a2..e6473bda0ef9671e6f7f56702177771707aa514a 100644
--- a/src/components/UserProfile/MyProfile.vue
+++ b/src/components/UserProfile/MyProfile.vue
@@ -6,6 +6,7 @@ import {UserService, BadgeService, GoalService, type GoalDTO, type BadgeDTO} fro
 import { ItemService } from "@/api";
 import handleUnknownError from '@/components/Exceptions/unkownErrorHandler'
 
+let apiUrl = import.meta.env.VITE_APP_API_URL;
 let numberOfHistory = 6;
 let cardTitles = ["Spain tour", "Food waste", "Coffee", "Concert", "New book", "Pretty clothes"]
 let firstname = ref();
@@ -62,7 +63,7 @@ async function setupForm() {
       streak.value = response.streak?.currentStreak;
     }
     if (response.profileImage) {
-      imageUrl.value = "http://localhost:8080/api/images/" + response.profileImage;
+      imageUrl.value = apiUrl + "/api/images/" + response.profileImage;
     }
     getInventory();
     getBadges();
@@ -171,7 +172,7 @@ const toUpdateUserSettings = () => {
                   <div v-if="hasInventory" class="scrolling-wrapper-badges row flex-row flex-nowrap mt-2 pb-2 pt-2">
                     <div v-for="product in inventory" :key="product.id" class="card text-center"
                         style="width: 12rem; border: none; cursor: pointer; margin: 1rem; border: 2px solid black" @click="selectItem(product)">
-                        <img :src="`http://localhost:8080/api/images/${product.imageId}`" class="card-img-top"
+                        <img :src="apiUrl + `/api/images/${product.imageId}`" class="card-img-top"
                             alt="..." />
                         <div class="card-body">
                             <h5 class="card-title">{{ product.itemName }}</h5>
@@ -196,7 +197,7 @@ const toUpdateUserSettings = () => {
                         style="width: 12rem; border: none; cursor: pointer; margin: 1rem; 
                         border: 2px solid black" data-bs-toggle="tooltip" data-bs-placement="top" 
                         data-bs-custom-class="custom-tooltip" :data-bs-title="badge.criteria">
-                        <img :src="`http://localhost:8080/api/images/${badge.imageId}`" class="card-img-top"
+                        <img :src="apiUrl + `/api/images/${badge.imageId}`" class="card-img-top"
                             alt="..." />
                         <div class="card-body">
                             <h5 class="card-title">{{ badge.badgeName }}</h5>
diff --git a/src/views/BankID/RedirectView.vue b/src/views/BankID/RedirectView.vue
index 93e690d2e9aef70d6f2fa374d997ee1cc5909309..56b8d8b888bc4d4b0d3f7c411adfd5396aa308f4 100644
--- a/src/views/BankID/RedirectView.vue
+++ b/src/views/BankID/RedirectView.vue
@@ -5,6 +5,7 @@ import { useUserInfoStore } from '@/stores/UserStore'
 import axios from 'axios'
 import router from '@/router'
 
+let apiUrl = import.meta.env.VITE_APP_API_URL;
 onMounted(() => {
   const query = new URLSearchParams(window.location.search);
   const code = query.get('code');
@@ -18,7 +19,7 @@ onMounted(() => {
 });
 
 async function exchangeCodeForToken(code: string, state: string) {
-  axios.post<AuthenticationResponse>('http://localhost:8080/api/auth/bank-id', { code: code, state: state })
+  axios.post<AuthenticationResponse>(apiUrl + '/api/auth/bank-id', { code: code, state: state })
     .then(response => {
       OpenAPI.TOKEN = response.data.token;
       useUserInfoStore().setUserInfo({