diff --git a/src/components/Settings/SettingsProfile.vue b/src/components/Settings/SettingsProfile.vue
index eaa7ac4b964a90292e027ea12653790897e55be0..1b1ce4d7ec303975a302f6bd45e14df3d2036172 100644
--- a/src/components/Settings/SettingsProfile.vue
+++ b/src/components/Settings/SettingsProfile.vue
@@ -76,6 +76,7 @@ const getInventory = async () => {
 };
 
 const selectItem = async (bannerId: any) => {
+  console.log(bannerId)
   try {
     const bannerImagePayload: UserUpdateDTO = {
       bannerImage: bannerId,
@@ -101,9 +102,8 @@ async function setupForm() {
     } else {
       iconSrc.value = "../src/assets/userprofile.png";
     }
-    if (response.bannerImage != null) {
-      selectedBanner.value = response.bannerImage;
-    }
+    selectedBanner.value = response.bannerImage;
+    console.log(response.bannerImage)
   } catch (err) {
     handleUnknownError(err);
     console.error(err)
@@ -116,7 +116,7 @@ const handleSubmit = async () => {
     lastName: surnameRef.value,
   };
   try {
-    UserService.update({ requestBody: updateUserPayload })
+    await UserService.update({ requestBody: updateUserPayload })
     useUserInfoStore().setUserInfo({
       firstname: firstNameRef.value,
       lastname: surnameRef.value,
@@ -168,11 +168,10 @@ onMounted(() => {
     <div>
       <h6>Banners</h6>
       <div v-if="hasBanners" class="scrolling-wrapper-badges row flex-row flex-wrap mt-2 pb-2 pt-2">
-        <div v-for="banner in banners" :key="banner.id" class="card text-center banner justify-content-center d-flex align-items-center" @click="selectItem(banner.id)"
-          :class="{ 'selected-banner': banner.id === selectedBannerId }" data-bs-toggle="tooltip"
+        <div v-for="banner in banners" :key="banner.id" class="card text-center banner justify-content-center d-flex align-items-center"
+           data-bs-toggle="tooltip"
           data-bs-placement="top" data-bs-custom-class="custom-tooltip" :data-bs-title="banner.criteria">
-          <img :src="apiUrl + `/api/images/${banner.imageId}`" class="card-img-top" alt="Banner" style="width: 100px; height: 100px" />
-            <h5 class="card-title">{{ selectedBanner }}</h5>
+          <img :src="apiUrl + `/api/images/${banner.imageId}`" class="card-img-top" :class="{ 'selected-banner': banner.id === selectedBanner }" alt="Banner" style="width: 200px; height: 100px" @click="selectItem(banner.imageId)" />
         </div>
       </div>
       <div v-else>
@@ -215,7 +214,7 @@ onMounted(() => {
 }
 
 .selected-banner {
-  border: 2px solid #1a81b5;
+  border: 5px solid #1cd516;
   display: flex;
 }
 
diff --git a/src/components/UserProfile/MyProfile.vue b/src/components/UserProfile/MyProfile.vue
index a0d8f8b342b63b4360b6f3cb8e195d437d8cbb10..20c1aa5dc09fad57a39f19bcd6e44d3d002b3fa0 100644
--- a/src/components/UserProfile/MyProfile.vue
+++ b/src/components/UserProfile/MyProfile.vue
@@ -182,12 +182,12 @@ const toUpdateUserSettings = () => {
                 <div class="container-fluid">
                   <h1 class="mt-1 text-start badges-text">Merker</h1>
                   <div v-if="hasBadges" class="scrolling-wrapper-badges row flex-row flex-nowrap mt-2 pb-2 pt-2">
-                    <div v-for="badge in badges" :key="badge.id" class="card text-center"
+                    <div v-for="badge in badges" :key="badge.id" class="card text-center d-flex align-items-center justify-content-center"
                         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="apiUrl + `/api/images/${badge.imageId}`" class="card-img-top"
-                            alt="..." />
+                        <img :src="apiUrl + `/api/images/${badge.imageId}`" class="card-img-top mt-2"
+                            alt="..." style="width: 150px; height: 150px;"/>
                         <div class="card-body">
                             <h5 class="card-title">{{ badge.badgeName }}</h5>
                         </div>