diff --git a/frontend/app/src/components/Activities/ActivitySummaryComponent.vue b/frontend/app/src/components/Activities/ActivitySummaryComponent.vue
index 03de46876..bce38f56e 100644
--- a/frontend/app/src/components/Activities/ActivitySummaryComponent.vue
+++ b/frontend/app/src/components/Activities/ActivitySummaryComponent.vue
@@ -74,7 +74,7 @@
           v-if="activity.garminconnect_activity_id"
         >
           <img
-            src="/src/assets/garminconnect/Garmin_Connect_app_1024x1024-02.png"
+            :src="INTEGRATION_LOGOS.garminConnectApp"
             alt="Garmin Connect logo"
             height="22"
           />
@@ -336,6 +336,8 @@ import UserAvatarComponent from '@/components/Users/UserAvatarComponent.vue'
 import ModalComponentUploadFile from '@/components/Modals/ModalComponentUploadFile.vue'
 import EditActivityModalComponent from '@/components/Activities/Modals/EditActivityModalComponent.vue'
 import ModalComponent from '@/components/Modals/ModalComponent.vue'
+// Importing constants
+import { INTEGRATION_LOGOS } from '@/constants/integrationLogoConstants'
 // Importing the services
 import { users } from '@/services/usersService'
 import { activities } from '@/services/activitiesService'
diff --git a/frontend/app/src/components/FooterComponent.vue b/frontend/app/src/components/FooterComponent.vue
index 3fefa20b4..ed5c1bad4 100644
--- a/frontend/app/src/components/FooterComponent.vue
+++ b/frontend/app/src/components/FooterComponent.vue
@@ -27,14 +27,14 @@
       </p>
       <p class="text-center text-muted">
         <img
-          src="/src/assets/strava/api_logo_cptblWith_strava_horiz_light.png"
+          :src="INTEGRATION_LOGOS.strava"
           alt="Compatible with STRAVA image"
           height="25"
         />
         •
         <img
           class="ms-2"
-          src="/src/assets/garminconnect/Garmin_connect_badge_print_RESOURCE_FILE-01.png"
+          :src="INTEGRATION_LOGOS.garminConnectBadge"
           alt="Works with Garmin Connect image"
           height="25"
         />
@@ -43,13 +43,13 @@
   </footer>
 </template>
 
-<script>
-export default {
-  props: {
-    enableBackground: {
-      type: Boolean,
-      default: true
-    }
+<script setup>
+import { INTEGRATION_LOGOS } from '@/constants/integrationLogoConstants'
+
+defineProps({
+  enableBackground: {
+    type: Boolean,
+    default: true
   }
-}
+})
 </script>
diff --git a/frontend/app/src/components/Gears/GearsListComponent.vue b/frontend/app/src/components/Gears/GearsListComponent.vue
index 7e180967a..57d33ac5e 100644
--- a/frontend/app/src/components/Gears/GearsListComponent.vue
+++ b/frontend/app/src/components/Gears/GearsListComponent.vue
@@ -2,68 +2,17 @@
   <li class="list-group-item d-flex justify-content-between px-0 bg-body-tertiary">
     <div class="d-flex align-items-center">
       <img
-        src="/src/assets/avatar/bicycle1.png"
-        alt="Bycicle avatar"
+        :src="getGearAvatar(gear.gear_type)"
+        :alt="
+          $t(
+            `gearsListComponent.gearListTypeOption${
+              gear.gear_type >= 1 && gear.gear_type <= 8 ? gear.gear_type : 8
+            }`
+          ) + ' avatar'
+        "
         width="55"
         height="55"
         class="rounded-circle"
-        v-if="gear.gear_type == 1"
-      />
-      <img
-        src="/src/assets/avatar/running_shoe1.png"
-        alt="running shoe avatar"
-        width="55"
-        height="55"
-        class="rounded-circle"
-        v-else-if="gear.gear_type == 2"
-      />
-      <img
-        src="/src/assets/avatar/wetsuit1.png"
-        alt="wetsuit avatar"
-        width="55"
-        height="55"
-        class="rounded-circle"
-        v-else-if="gear.gear_type == 3"
-      />
-      <img
-        src="/src/assets/avatar/racquet1.png"
-        alt="racquet avatar"
-        width="55"
-        height="55"
-        class="rounded-circle"
-        v-else-if="gear.gear_type == 4"
-      />
-      <img
-        src="/src/assets/avatar/skis1.png"
-        alt="skis avatar"
-        width="55"
-        height="55"
-        class="rounded-circle"
-        v-else-if="gear.gear_type == 5"
-      />
-      <img
-        src="/src/assets/avatar/snowboard1.png"
-        alt="snowboard avatar"
-        width="55"
-        height="55"
-        class="rounded-circle"
-        v-else-if="gear.gear_type == 6"
-      />
-      <img
-        src="/src/assets/avatar/windsurf1.png"
-        alt="windsurf avatar"
-        width="55"
-        height="55"
-        class="rounded-circle"
-        v-else-if="gear.gear_type == 7"
-      />
-      <img
-        src="/src/assets/avatar/waterSportsBoard1.png"
-        alt="water sports board avatar"
-        width="55"
-        height="55"
-        class="rounded-circle"
-        v-else
       />
       <div class="ms-3">
         <div class="fw-bold">
@@ -103,11 +52,7 @@
         <font-awesome-icon :icon="['fab', 'fa-strava']" />
       </span>
       <span class="align-middle me-3 d-none d-sm-inline" v-if="gear.garminconnect_gear_id">
-        <img
-          src="/src/assets/garminconnect/Garmin_Connect_app_1024x1024-02.png"
-          alt="Garmin Connect logo"
-          height="22"
-        />
+        <img :src="INTEGRATION_LOGOS.garminConnectApp" alt="Garmin Connect logo" height="22" />
       </span>
       <span
         class="badge bg-danger-subtle border border-danger-subtle text-danger-emphasis align-middle d-none d-sm-inline"
@@ -156,6 +101,8 @@ import { gears } from '@/services/gearsService'
 import { push } from 'notivue'
 import ModalComponent from '@/components/Modals/ModalComponent.vue'
 import GearsAddEditGearModalComponent from '@/components/Gears/GearsAddEditGearModalComponent.vue'
+import { getGearAvatar } from '@/constants/gearAvatarConstants'
+import { INTEGRATION_LOGOS } from '@/constants/integrationLogoConstants'
 
 const props = defineProps({
   gear: {
diff --git a/frontend/app/src/components/Health/HealthWeightZone/HealthWeightListComponent.vue b/frontend/app/src/components/Health/HealthWeightZone/HealthWeightListComponent.vue
index 5541dd446..88560a7e6 100644
--- a/frontend/app/src/components/Health/HealthWeightZone/HealthWeightListComponent.vue
+++ b/frontend/app/src/components/Health/HealthWeightZone/HealthWeightListComponent.vue
@@ -22,7 +22,7 @@
         v-if="data.garminconnect_body_composition_id"
       >
         <img
-          src="/src/assets/garminconnect/Garmin_Connect_app_1024x1024-02.png"
+          :src="INTEGRATION_LOGOS.garminConnectApp"
           alt="Garmin Connect logo"
           height="22"
         />
@@ -77,6 +77,8 @@ import { health_data } from '@/services/health_dataService'
 // Import the components
 import HealthWeightAddEditModalComponent from './HealthWeightAddEditModalComponent.vue'
 import ModalComponent from '@/components/Modals/ModalComponent.vue'
+// Import constants
+import { INTEGRATION_LOGOS } from '@/constants/integrationLogoConstants'
 
 import { formatDateShort } from '@/utils/dateTimeUtils'
 import { kgToLbs } from '@/utils/unitsUtils'
@@ -133,7 +135,8 @@ export default {
       updateWeightListEdited,
       submitDeleteWeight,
       formatDateShort,
-      kgToLbs
+      kgToLbs,
+      INTEGRATION_LOGOS
     }
   }
 }
diff --git a/frontend/app/src/components/Settings/SettingsIntegrationsZone.vue b/frontend/app/src/components/Settings/SettingsIntegrationsZone.vue
index 955031182..174379f3f 100644
--- a/frontend/app/src/components/Settings/SettingsIntegrationsZone.vue
+++ b/frontend/app/src/components/Settings/SettingsIntegrationsZone.vue
@@ -91,7 +91,7 @@
           <div class="d-flex align-items-center">
             <!--<font-awesome-icon :icon="['fas', 'file-import']" size="2x" />-->
             <img
-              src="/src/assets/garminconnect/Garmin_Connect_app_1024x1024-02.png"
+              :src="INTEGRATION_LOGOS.garminConnectApp"
               alt="Garmin Connect logo"
               height="32"
             />
@@ -298,6 +298,7 @@ import ModalComponentNumberAndStringInput from '@/components/Modals/ModalCompone
 import ModalComponentNumberInput from '@/components/Modals/ModalComponentNumberInput.vue'
 import ModalComponentDateRangeInput from '@/components/Modals/ModalComponentDateRangeInput.vue'
 import GarminConnectLoginModalComponent from './SettingsIntegrations/GarminConnectLoginModalComponent.vue'
+import { INTEGRATION_LOGOS } from '@/constants/integrationLogoConstants'
 
 const authStore = useAuthStore()
 const { locale, t } = useI18n()
diff --git a/frontend/app/src/components/Users/UserAvatarComponent.vue b/frontend/app/src/components/Users/UserAvatarComponent.vue
index 7cf7b0217..fb640126b 100644
--- a/frontend/app/src/components/Users/UserAvatarComponent.vue
+++ b/frontend/app/src/components/Users/UserAvatarComponent.vue
@@ -1,44 +1,17 @@
 <template>
   <img
-    :src="userPhotoUrl"
+    :src="avatarSrc"
     :alt="altText"
     :width="width"
     :height="height"
     class="rounded-circle"
     :class="{ 'align-top': alignTopValue == 2 }"
-    v-if="user && user.photo_path"
-  />
-  <img
-    src="/src/assets/avatar/male1.png"
-    alt="Default Female Avatar"
-    :width="width"
-    :height="height"
-    class="rounded-circle"
-    :class="{ 'align-top': alignTopValue == 2 }"
-    v-else-if="(user && !user.photo_path && user.gender === 1) || !user"
-  />
-  <img
-    src="/src/assets/avatar/female1.png"
-    alt="Default Male Avatar"
-    :width="width"
-    :height="height"
-    class="rounded-circle"
-    :class="{ 'align-top': alignTopValue == 2 }"
-    v-else-if="(user && !user.photo_path && user.gender === 2) || !user"
-  />
-  <img
-    src="/src/assets/avatar/unspecified1.png"
-    alt="Default Unspecified Avatar"
-    :width="width"
-    :height="height"
-    class="rounded-circle"
-    :class="{ 'align-top': alignTopValue == 2 }"
-    v-else
   />
 </template>
 
 <script setup>
-import { ref, onMounted, watch } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
+import { getUserDefaultAvatar } from '@/constants/userAvatarConstants'
 
 // Props definition
 const props = defineProps({
@@ -69,6 +42,14 @@ const altText = ref('User Avatar')
 const userPhotoUrl = ref('')
 const alignTopValue = ref(props.alignTop)
 
+// Computed property for avatar source
+const avatarSrc = computed(() => {
+  if (props.user?.photo_path && userPhotoUrl.value) {
+    return userPhotoUrl.value
+  }
+  return getUserDefaultAvatar(props.user?.gender)
+})
+
 function defineUrl() {
   if (props.user?.photo_path) {
     const pathWithoutConfig = props.user.photo_path.split('/').slice(4).join('/')
diff --git a/frontend/app/src/constants/gearAvatarConstants.ts b/frontend/app/src/constants/gearAvatarConstants.ts
new file mode 100644
index 000000000..ce60130bb
--- /dev/null
+++ b/frontend/app/src/constants/gearAvatarConstants.ts
@@ -0,0 +1,39 @@
+/**
+ * Gear Avatar Constants
+ *
+ * Centralized constants for gear type avatar images.
+ * Maps gear types to their corresponding avatar images.
+ */
+
+import bicycle1 from '@/assets/avatar/bicycle1.png'
+import runningShoe1 from '@/assets/avatar/running_shoe1.png'
+import wetsuit1 from '@/assets/avatar/wetsuit1.png'
+import racquet1 from '@/assets/avatar/racquet1.png'
+import skis1 from '@/assets/avatar/skis1.png'
+import snowboard1 from '@/assets/avatar/snowboard1.png'
+import windsurf1 from '@/assets/avatar/windsurf1.png'
+import waterSportsBoard1 from '@/assets/avatar/waterSportsBoard1.png'
+
+/**
+ * Gear type avatar mapping
+ * Maps gear type IDs to their avatar image paths
+ */
+export const GEAR_AVATAR_MAP: Record<number, string> = {
+    1: bicycle1,
+    2: runningShoe1,
+    3: wetsuit1,
+    4: racquet1,
+    5: skis1,
+    6: snowboard1,
+    7: windsurf1,
+    8: waterSportsBoard1
+} as const
+
+/**
+ * Get avatar image for a specific gear type
+ * @param gearType - The gear type ID (1-8)
+ * @returns The avatar image path
+ */
+export function getGearAvatar(gearType: number): string {
+    return GEAR_AVATAR_MAP[gearType] ?? bicycle1
+}
diff --git a/frontend/app/src/constants/integrationLogoConstants.ts b/frontend/app/src/constants/integrationLogoConstants.ts
new file mode 100644
index 000000000..c18d65836
--- /dev/null
+++ b/frontend/app/src/constants/integrationLogoConstants.ts
@@ -0,0 +1,19 @@
+/**
+ * Integration Logo Constants
+ *
+ * Centralized constants for third-party integration logos.
+ * Maps integration services to their logo images.
+ */
+
+import stravaLogo from '@/assets/strava/api_logo_cptblWith_strava_horiz_light.png'
+import garminConnectBadge from '@/assets/garminconnect/Garmin_connect_badge_print_RESOURCE_FILE-01.png'
+import garminConnectApp from '@/assets/garminconnect/Garmin_Connect_app_1024x1024-02.png'
+
+/**
+ * Integration logo mapping
+ */
+export const INTEGRATION_LOGOS = {
+    strava: stravaLogo,
+    garminConnectBadge: garminConnectBadge,
+    garminConnectApp: garminConnectApp
+} as const
diff --git a/frontend/app/src/constants/ssoConstants.ts b/frontend/app/src/constants/ssoConstants.ts
index 3722b6cf4..6ca537332 100644
--- a/frontend/app/src/constants/ssoConstants.ts
+++ b/frontend/app/src/constants/ssoConstants.ts
@@ -5,12 +5,16 @@
  * including provider logos and configuration mappings.
  */
 
+import keycloakLogo from '@/assets/sso/keycloak.svg'
+import authentikLogo from '@/assets/sso/authentik.svg'
+import autheliaLogo from '@/assets/sso/authelia.svg'
+
 /**
  * Custom logo mapping for SSO providers
  * Maps provider icon names to image paths for custom logos
  */
 export const PROVIDER_CUSTOM_LOGO_MAP: Record<string, string> = {
-  keycloak: '/src/assets/sso/keycloak.svg',
-  authentik: '/src/assets/sso/authentik.svg',
-  authelia: '/src/assets/sso/authelia.svg'
+  keycloak: keycloakLogo,
+  authentik: authentikLogo,
+  authelia: autheliaLogo
 } as const
diff --git a/frontend/app/src/constants/userAvatarConstants.ts b/frontend/app/src/constants/userAvatarConstants.ts
new file mode 100644
index 000000000..2b0123cea
--- /dev/null
+++ b/frontend/app/src/constants/userAvatarConstants.ts
@@ -0,0 +1,32 @@
+/**
+ * User Avatar Constants
+ *
+ * Centralized constants for user avatar images by gender.
+ * Maps gender types to their corresponding default avatar images.
+ */
+
+import maleAvatar from '@/assets/avatar/male1.png'
+import femaleAvatar from '@/assets/avatar/female1.png'
+import unspecifiedAvatar from '@/assets/avatar/unspecified1.png'
+
+/**
+ * User avatar mapping by gender
+ * Maps gender IDs to their default avatar image paths
+ */
+export const USER_AVATAR_MAP: Record<number, string> = {
+    1: maleAvatar,
+    2: femaleAvatar,
+    3: unspecifiedAvatar
+} as const
+
+/**
+ * Get default avatar image for a specific gender
+ * @param gender - The gender ID (1=male, 2=female, 3=unspecified)
+ * @returns The default avatar image path
+ */
+export function getUserDefaultAvatar(gender?: number): string {
+    if (!gender || gender < 1 || gender > 3) {
+        return maleAvatar // Default to male avatar
+    }
+    return USER_AVATAR_MAP[gender] ?? unspecifiedAvatar
+}
diff --git a/frontend/app/src/env.d.ts b/frontend/app/src/env.d.ts
index 11f02fe2a..e1ca5bc7f 100644
--- a/frontend/app/src/env.d.ts
+++ b/frontend/app/src/env.d.ts
@@ -1 +1,16 @@
 /// <reference types="vite/client" />
+
+declare module '*.svg' {
+    const content: string
+    export default content
+}
+
+declare module '*.png' {
+    const content: string
+    export default content
+}
+
+declare module '*.jpg' {
+    const content: string
+    export default content
+}
diff --git a/frontend/app/src/views/Gears/GearView.vue b/frontend/app/src/views/Gears/GearView.vue
index 852984e53..2082c115c 100644
--- a/frontend/app/src/views/Gears/GearView.vue
+++ b/frontend/app/src/views/Gears/GearView.vue
@@ -15,68 +15,17 @@
         <div v-else>
           <div class="justify-content-center align-items-center d-flex">
             <img
-              src="/src/assets/avatar/bicycle1.png"
-              alt="Bicycle avatar"
+              :src="getGearAvatar(gear?.gear_type)"
+              :alt="
+                $t(
+                  `gearView.gearTypeOption${
+                    gear?.gear_type >= 1 && gear?.gear_type <= 8 ? gear?.gear_type : 8
+                  }`
+                ) + ' avatar'
+              "
               width="180"
               height="180"
               class="rounded-circle"
-              v-if="gear?.gear_type == 1"
-            />
-            <img
-              src="/src/assets/avatar/running_shoe1.png"
-              alt="Shoes avatar"
-              width="180"
-              height="180"
-              class="rounded-circle"
-              v-else-if="gear?.gear_type == 2"
-            />
-            <img
-              src="/src/assets/avatar/wetsuit1.png"
-              alt="Wetsuit avatar"
-              width="180"
-              height="180"
-              class="rounded-circle"
-              v-else-if="gear?.gear_type == 3"
-            />
-            <img
-              src="/src/assets/avatar/racquet1.png"
-              alt="Racquet avatar"
-              width="180"
-              height="180"
-              class="rounded-circle"
-              v-else-if="gear?.gear_type == 4"
-            />
-            <img
-              src="/src/assets/avatar/skis1.png"
-              alt="Ski avatar"
-              width="180"
-              height="180"
-              class="rounded-circle"
-              v-else-if="gear?.gear_type == 5"
-            />
-            <img
-              src="/src/assets/avatar/snowboard1.png"
-              alt="Snowboard avatar"
-              width="180"
-              height="180"
-              class="rounded-circle"
-              v-else-if="gear?.gear_type == 6"
-            />
-            <img
-              src="/src/assets/avatar/windsurf1.png"
-              alt="Windsurf avatar"
-              width="180"
-              height="180"
-              class="rounded-circle"
-              v-else-if="gear?.gear_type == 7"
-            />
-            <img
-              src="/src/assets/avatar/waterSportsBoard1.png"
-              alt="Water sports board avatar"
-              width="180"
-              height="180"
-              class="rounded-circle"
-              v-else
             />
           </div>
           <br />
@@ -386,6 +335,7 @@ import { activities } from '@/services/activitiesService'
 import { formatDateMed, formatTime, formatSecondsToMinutes } from '@/utils/dateTimeUtils'
 import { kmToMiles } from '@/utils/unitsUtils'
 import { formatName } from '@/utils/activityUtils'
+import { getGearAvatar } from '@/constants/gearAvatarConstants'
 
 const { t } = useI18n()
 const authStore = useAuthStore()
diff --git a/frontend/app/src/views/LoginView.vue b/frontend/app/src/views/LoginView.vue
index 5ea08e573..93cbf140e 100644
--- a/frontend/app/src/views/LoginView.vue
+++ b/frontend/app/src/views/LoginView.vue
@@ -5,7 +5,7 @@
         <img
           width="auto"
           height="auto"
-          :src="loginPhotoUrl || '/src/assets/login.png'"
+          :src="loginPhotoUrl"
           alt="Endurain login illustration"
           class="img-fluid rounded"
         />
@@ -191,6 +191,8 @@ import { HTTP_STATUS, QUERY_PARAM_TRUE, extractStatusCode } from '@/constants/ht
 import { PROVIDER_CUSTOM_LOGO_MAP } from '@/constants/ssoConstants'
 // Utils
 import { isNotEmpty, sanitizeInput } from '@/utils/validationUtils'
+// Assets
+import defaultLoginImage from '@/assets/login.png'
 
 /**
  * Route query parameter handlers configuration
@@ -262,12 +264,12 @@ const serverSettings = computed(() => serverSettingsStore.serverSettings)
 
 /**
  * Compute the login photo URL from server settings
- * Returns null if no custom photo is set, triggering fallback to default
+ * Returns custom photo from server if set, otherwise default image
  */
-const loginPhotoUrl = computed<string | null>(() =>
+const loginPhotoUrl = computed<string>(() =>
   serverSettings.value.login_photo_set
     ? `${window.env.ENDURAIN_HOST}/server_images/login.png`
-    : null
+    : defaultLoginImage
 )
 
 // ============================================================================
diff --git a/frontend/app/src/views/ResetPasswordView.vue b/frontend/app/src/views/ResetPasswordView.vue
index f8cad938f..411219888 100644
--- a/frontend/app/src/views/ResetPasswordView.vue
+++ b/frontend/app/src/views/ResetPasswordView.vue
@@ -5,8 +5,8 @@
         <img
           width="auto"
           height="auto"
-          :src="loginPhotoUrl || '/src/assets/login.png'"
-          alt="Endurain login illustration"
+          :src="loginPhotoUrl"
+          alt="Endurain reset password illustration"
           class="img-fluid rounded"
         />
       </div>
@@ -160,6 +160,7 @@ import { passwordReset } from '@/services/passwordResetService'
 import { isValidPassword, passwordsMatch } from '@/utils/validationUtils'
 import { HTTP_STATUS, extractStatusCode } from '@/constants/httpConstants'
 import type { ErrorWithResponse } from '@/types'
+import defaultLoginImage from '@/assets/login.png'
 
 // ============================================================================
 // Composables & Stores
@@ -191,12 +192,12 @@ const token: Ref<string | undefined> = ref(route.query.token as string | undefin
 
 /**
  * Compute the login photo URL from server settings
- * Returns null if no custom photo is set, triggering fallback to default
+ * Returns custom photo from server if set, otherwise default image
  */
-const loginPhotoUrl: ComputedRef<string | null> = computed(() => {
+const loginPhotoUrl: ComputedRef<string> = computed(() => {
   return serverSettingsStore.serverSettings.login_photo_set
     ? `${window.env.ENDURAIN_HOST}/server_images/login.png`
-    : null
+    : defaultLoginImage
 })
 
 /**
diff --git a/frontend/app/src/views/SignUpView.vue b/frontend/app/src/views/SignUpView.vue
index 7a0239eb2..f5c069d00 100644
--- a/frontend/app/src/views/SignUpView.vue
+++ b/frontend/app/src/views/SignUpView.vue
@@ -5,8 +5,8 @@
         <img
           width="auto"
           height="auto"
-          :src="loginPhotoUrl || '/src/assets/login.png'"
-          alt="Endurain login illustration"
+          :src="loginPhotoUrl"
+          alt="Endurain sign up illustration"
           class="img-fluid rounded"
         />
       </div>
@@ -317,6 +317,7 @@ import { cmToFeetInches, feetAndInchesToCm } from '@/utils/unitsUtils'
 import { isValidEmail, sanitizeInput, isValidPassword } from '@/utils/validationUtils'
 import { HTTP_STATUS, QUERY_PARAM_TRUE, extractStatusCode } from '@/constants/httpConstants'
 import type { ErrorWithResponse } from '@/types'
+import defaultLoginImage from '@/assets/login.png'
 
 // ============================================================================
 // Interfaces
@@ -484,12 +485,12 @@ const isPasswordValid: ComputedRef<boolean> = computed(() => {
 
 /**
  * Compute the login photo URL from server settings
- * Returns null if no custom photo is set, triggering fallback to default
+ * Returns custom photo from server if set, otherwise default image
  */
-const loginPhotoUrl: ComputedRef<string | null> = computed(() => {
+const loginPhotoUrl: ComputedRef<string> = computed(() => {
   return serverSettingsStore.serverSettings.login_photo_set
     ? `${window.env.ENDURAIN_HOST}/server_images/login.png`
-    : null
+    : defaultLoginImage
 })
 
 // ============================================================================