diff --git a/package-lock.json b/package-lock.json
index ba212a47..ce200532 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,6 @@
             "name": "VRCX",
             "license": "MIT",
             "dependencies": {
-                "@tanstack/vue-query": "^5.92.9",
                 "hazardous": "^0.3.0",
                 "node-api-dotnet": "^0.9.19"
             },
@@ -28,6 +27,7 @@
                 "@sigma/edge-curve": "^3.1.0",
                 "@sigma/node-border": "^3.0.0",
                 "@tailwindcss/vite": "^4.2.1",
+                "@tanstack/vue-query": "^5.92.9",
                 "@tanstack/vue-table": "^8.21.3",
                 "@tanstack/vue-virtual": "^3.13.22",
                 "@types/node": "^24.12.0",
@@ -421,6 +421,7 @@
             "version": "7.27.1",
             "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
             "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=6.9.0"
@@ -430,6 +431,7 @@
             "version": "7.28.5",
             "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
             "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=6.9.0"
@@ -463,6 +465,7 @@
             "version": "7.29.0",
             "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
             "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/types": "^7.29.0"
@@ -574,6 +577,7 @@
             "version": "7.29.0",
             "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
             "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/helper-string-parser": "^7.27.1",
@@ -2041,6 +2045,7 @@
             "version": "1.5.5",
             "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
             "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/@jridgewell/trace-mapping": {
@@ -2716,6 +2721,9 @@
                 "arm64"
             ],
             "dev": true,
+            "libc": [
+                "glibc"
+            ],
             "license": "MIT",
             "optional": true,
             "os": [
@@ -2733,6 +2741,9 @@
                 "arm64"
             ],
             "dev": true,
+            "libc": [
+                "musl"
+            ],
             "license": "MIT",
             "optional": true,
             "os": [
@@ -2750,6 +2761,9 @@
                 "ppc64"
             ],
             "dev": true,
+            "libc": [
+                "glibc"
+            ],
             "license": "MIT",
             "optional": true,
             "os": [
@@ -2767,6 +2781,9 @@
                 "s390x"
             ],
             "dev": true,
+            "libc": [
+                "glibc"
+            ],
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3453,6 +3470,9 @@
                 "arm64"
             ],
             "dev": true,
+            "libc": [
+                "glibc"
+            ],
             "license": "MPL-2.0",
             "optional": true,
             "os": [
@@ -3474,6 +3494,9 @@
                 "arm64"
             ],
             "dev": true,
+            "libc": [
+                "musl"
+            ],
             "license": "MPL-2.0",
             "optional": true,
             "os": [
@@ -3698,6 +3721,9 @@
                 "arm64"
             ],
             "dev": true,
+            "libc": [
+                "glibc"
+            ],
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3715,6 +3741,9 @@
                 "arm64"
             ],
             "dev": true,
+            "libc": [
+                "musl"
+            ],
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3841,6 +3870,7 @@
             "version": "8.19.4",
             "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.19.4.tgz",
             "integrity": "sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "remove-accents": "0.5.0"
@@ -3857,6 +3887,7 @@
             "version": "5.90.20",
             "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.20.tgz",
             "integrity": "sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg==",
+            "dev": true,
             "license": "MIT",
             "funding": {
                 "type": "github",
@@ -3892,6 +3923,7 @@
             "version": "5.92.9",
             "resolved": "https://registry.npmjs.org/@tanstack/vue-query/-/vue-query-5.92.9.tgz",
             "integrity": "sha512-jjAZcqKveyX0C4w/6zUqbnqk/XzuxNWaFsWjGTJWULVFizUNeLGME2gf9vVSDclIyiBhR13oZJPPs6fJgfpIJQ==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@tanstack/match-sorter-utils": "^8.19.4",
@@ -3917,12 +3949,14 @@
             "version": "6.6.4",
             "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
             "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/@tanstack/vue-query/node_modules/vue-demi": {
             "version": "0.14.10",
             "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
             "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+            "dev": true,
             "hasInstallScript": true,
             "license": "MIT",
             "bin": {
@@ -4465,6 +4499,7 @@
             "version": "3.5.30",
             "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.30.tgz",
             "integrity": "sha512-s3DfdZkcu/qExZ+td75015ljzHc6vE+30cFMGRPROYjqkroYI5NV2X1yAMX9UeyBNWB9MxCfPcsjpLS11nzkkw==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/parser": "^7.29.0",
@@ -4478,6 +4513,7 @@
             "version": "3.5.30",
             "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.30.tgz",
             "integrity": "sha512-eCFYESUEVYHhiMuK4SQTldO3RYxyMR/UQL4KdGD1Yrkfdx4m/HYuZ9jSfPdA+nWJY34VWndiYdW/wZXyiPEB9g==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@vue/compiler-core": "3.5.30",
@@ -4488,6 +4524,7 @@
             "version": "3.5.30",
             "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.30.tgz",
             "integrity": "sha512-LqmFPDn89dtU9vI3wHJnwaV6GfTRD87AjWpTWpyrdVOObVtjIuSeZr181z5C4PmVx/V3j2p+0f7edFKGRMpQ5A==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@babel/parser": "^7.29.0",
@@ -4505,6 +4542,7 @@
             "version": "0.30.21",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
             "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@jridgewell/sourcemap-codec": "^1.5.5"
@@ -4514,6 +4552,7 @@
             "version": "3.5.30",
             "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.30.tgz",
             "integrity": "sha512-NsYK6OMTnx109PSL2IAyf62JP6EUdk4Dmj6AkWcJGBvN0dQoMYtVekAmdqgTtWQgEJo+Okstbf/1p7qZr5H+bA==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@vue/compiler-dom": "3.5.30",
@@ -4560,6 +4599,7 @@
             "version": "3.5.30",
             "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.30.tgz",
             "integrity": "sha512-179YNgKATuwj9gB+66snskRDOitDiuOZqkYia7mHKJaidOMo/WJxHKF8DuGc4V4XbYTJANlfEKb0yxTQotnx4Q==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@vue/shared": "3.5.30"
@@ -4569,6 +4609,7 @@
             "version": "3.5.30",
             "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.30.tgz",
             "integrity": "sha512-e0Z+8PQsUTdwV8TtEsLzUM7SzC7lQwYKePydb7K2ZnmS6jjND+WJXkmmfh/swYzRyfP1EY3fpdesyYoymCzYfg==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@vue/reactivity": "3.5.30",
@@ -4579,6 +4620,7 @@
             "version": "3.5.30",
             "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.30.tgz",
             "integrity": "sha512-2UIGakjU4WSQ0T4iwDEW0W7vQj6n7AFn7taqZ9Cvm0Q/RA2FFOziLESrDL4GmtI1wV3jXg5nMoJSYO66egDUBw==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@vue/reactivity": "3.5.30",
@@ -4591,6 +4633,7 @@
             "version": "3.5.30",
             "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.30.tgz",
             "integrity": "sha512-v+R34icapydRwbZRD0sXwtHqrQJv38JuMB4JxbOxd8NEpGLny7cncMp53W9UH/zo4j8eDHjQ1dEJXwzFQknjtQ==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@vue/compiler-ssr": "3.5.30",
@@ -4604,6 +4647,7 @@
             "version": "3.5.30",
             "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.30.tgz",
             "integrity": "sha512-YXgQ7JjaO18NeK2K9VTbDHaFy62WrObMa6XERNfNOkAhD1F1oDSf3ZJ7K6GqabZ0BvSDHajp8qfS5Sa2I9n8uQ==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/@vue/test-utils": {
@@ -5972,6 +6016,7 @@
             "version": "3.2.3",
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
             "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/data-urls": {
@@ -6818,6 +6863,7 @@
             "version": "7.0.1",
             "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
             "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+            "dev": true,
             "license": "BSD-2-Clause",
             "engines": {
                 "node": ">=0.12"
@@ -7203,6 +7249,7 @@
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
             "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/esutils": {
@@ -8812,6 +8859,9 @@
                 "arm64"
             ],
             "dev": true,
+            "libc": [
+                "glibc"
+            ],
             "license": "MPL-2.0",
             "optional": true,
             "os": [
@@ -8833,6 +8883,9 @@
                 "arm64"
             ],
             "dev": true,
+            "libc": [
+                "musl"
+            ],
             "license": "MPL-2.0",
             "optional": true,
             "os": [
@@ -9402,6 +9455,7 @@
             "version": "3.3.11",
             "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
             "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+            "dev": true,
             "funding": [
                 {
                     "type": "github",
@@ -10005,6 +10059,7 @@
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
             "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+            "dev": true,
             "license": "ISC"
         },
         "node_modules/picomatch": {
@@ -10061,6 +10116,7 @@
             "version": "8.5.8",
             "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.8.tgz",
             "integrity": "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==",
+            "dev": true,
             "funding": [
                 {
                     "type": "opencollective",
@@ -10305,6 +10361,7 @@
             "version": "0.5.0",
             "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
             "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/require-directory": {
@@ -10816,6 +10873,7 @@
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
             "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+            "dev": true,
             "license": "BSD-3-Clause",
             "engines": {
                 "node": ">=0.10.0"
@@ -11460,7 +11518,7 @@
             "version": "5.9.3",
             "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
             "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-            "devOptional": true,
+            "dev": true,
             "license": "Apache-2.0",
             "peer": true,
             "bin": {
@@ -11887,6 +11945,7 @@
             "version": "3.5.30",
             "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.30.tgz",
             "integrity": "sha512-hTHLc6VNZyzzEH/l7PFGjpcTvUgiaPK5mdLkbjrTeWSRcEfxFrv56g/XckIYlE9ckuobsdwqd5mk2g1sBkMewg==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@vue/compiler-dom": "3.5.30",
diff --git a/package.json b/package.json
index 345c4004..ed9a67a3 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
         "@sigma/edge-curve": "^3.1.0",
         "@sigma/node-border": "^3.0.0",
         "@tailwindcss/vite": "^4.2.1",
+        "@tanstack/vue-query": "^5.92.9",
         "@tanstack/vue-table": "^8.21.3",
         "@tanstack/vue-virtual": "^3.13.22",
         "@types/node": "^24.12.0",
@@ -184,7 +185,6 @@
         }
     },
     "dependencies": {
-        "@tanstack/vue-query": "^5.92.9",
         "hazardous": "^0.3.0",
         "node-api-dotnet": "^0.9.19"
     },
diff --git a/src/components/Emoji.vue b/src/components/Emoji.vue
index c4a089ea..f1c354e4 100644
--- a/src/components/Emoji.vue
+++ b/src/components/Emoji.vue
@@ -7,7 +7,7 @@
         <Avatar v-else class="rounded" :style="{ width: size + 'px', height: size + 'px' }">
             <AvatarImage :src="imageUrl" class="object-cover" />
             <AvatarFallback class="rounded">
-                <ImageOff class="size-4 text-muted-foreground" />
+                <Image class="size-4 text-muted-foreground" />
             </AvatarFallback>
         </Avatar>
     </div>
@@ -15,7 +15,7 @@
 
 <script setup>
     import { onMounted, ref, watch } from 'vue';
-    import { ImageOff } from 'lucide-vue-next';
+    import { Image } from 'lucide-vue-next';
 
     import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
     import { extractFileId, generateEmojiStyle } from '../shared/utils';
diff --git a/src/components/StatusBar.vue b/src/components/StatusBar.vue
index 6822e3c2..7214a04e 100644
--- a/src/components/StatusBar.vue
+++ b/src/components/StatusBar.vue
@@ -278,18 +278,26 @@
                 <ContextMenuSub>
                     <ContextMenuSubTrigger>{{ t('status_bar.clocks') }}</ContextMenuSubTrigger>
                     <ContextMenuSubContent>
-                        <ContextMenuRadioGroup :model-value="String(clockCount)" @update:modelValue="setClockCount">
-                            <ContextMenuRadioItem value="0">
-                                {{ t('status_bar.clocks_none') }}
-                            </ContextMenuRadioItem>
-                            <ContextMenuRadioItem value="1"> 1 {{ t('status_bar.clock') }} </ContextMenuRadioItem>
-                            <ContextMenuRadioItem value="2">
-                                2 {{ t('status_bar.clocks_label') }}
-                            </ContextMenuRadioItem>
-                            <ContextMenuRadioItem value="3">
-                                3 {{ t('status_bar.clocks_label') }}
-                            </ContextMenuRadioItem>
-                        </ContextMenuRadioGroup>
+                        <ContextMenuCheckboxItem
+                            :model-value="clockCount === 0"
+                            @update:model-value="setClockCount('0')">
+                            {{ t('status_bar.clocks_none') }}
+                        </ContextMenuCheckboxItem>
+                        <ContextMenuCheckboxItem
+                            :model-value="clockCount === 1"
+                            @update:model-value="setClockCount('1')">
+                            1 {{ t('status_bar.clock') }}
+                        </ContextMenuCheckboxItem>
+                        <ContextMenuCheckboxItem
+                            :model-value="clockCount === 2"
+                            @update:model-value="setClockCount('2')">
+                            2 {{ t('status_bar.clocks_label') }}
+                        </ContextMenuCheckboxItem>
+                        <ContextMenuCheckboxItem
+                            :model-value="clockCount === 3"
+                            @update:model-value="setClockCount('3')">
+                            3 {{ t('status_bar.clocks_label') }}
+                        </ContextMenuCheckboxItem>
                     </ContextMenuSubContent>
                 </ContextMenuSub>
             </ContextMenuContent>
@@ -302,8 +310,6 @@
         ContextMenu,
         ContextMenuCheckboxItem,
         ContextMenuContent,
-        ContextMenuRadioGroup,
-        ContextMenuRadioItem,
         ContextMenuSeparator,
         ContextMenuSub,
         ContextMenuSubContent,
diff --git a/src/components/__tests__/Emoji.test.js b/src/components/__tests__/Emoji.test.js
index e84a358b..fcf41463 100644
--- a/src/components/__tests__/Emoji.test.js
+++ b/src/components/__tests__/Emoji.test.js
@@ -37,7 +37,7 @@ vi.mock('../ui/avatar', () => ({
 }));
 
 vi.mock('lucide-vue-next', () => ({
-    ImageOff: { template: '<i data-testid="image-off" />' }
+    Image: { template: '<i data-testid="image" />' }
 }));
 
 import Emoji from '../Emoji.vue';
diff --git a/src/components/dialogs/AvatarDialog/AvatarDialog.vue b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
index f92d0cbd..6eb9e12b 100644
--- a/src/components/dialogs/AvatarDialog/AvatarDialog.vue
+++ b/src/components/dialogs/AvatarDialog/AvatarDialog.vue
@@ -10,11 +10,19 @@
             <div class="flex">
                 <div style="flex: none; width: 160px; height: 120px">
                     <img
+                        v-if="!imageError"
                         :src="avatarDialog.ref.thumbnailImageUrl"
                         class="cursor-pointer"
                         @click="showFullscreenImageDialog(avatarDialog.ref.imageUrl)"
                         style="width: 160px; height: 120px; border-radius: var(--radius-xl); object-fit: cover"
+                        @error="imageError = true"
                         loading="lazy" />
+                    <div
+                        v-else
+                        class="flex items-center justify-center bg-muted"
+                        style="width: 160px; height: 120px; border-radius: var(--radius-xl)">
+                        <Image class="size-8 text-muted-foreground" />
+                    </div>
                 </div>
                 <div class="ml-4" style="flex: 1; display: flex; align-items: flex-start">
                     <div style="flex: 1">
@@ -346,7 +354,16 @@
                                                     :src="imageUrl"
                                                     style="width: 100%; height: 100%; object-fit: contain"
                                                     @click="showFullscreenImageDialog(imageUrl)"
+                                                    @error="
+                                                        $event.target.style.display = 'none';
+                                                        $event.target.nextElementSibling.style.display = 'flex';
+                                                    "
                                                     loading="lazy" />
+                                                <div
+                                                    class="absolute inset-0 items-center justify-center bg-muted"
+                                                    style="display: none">
+                                                    <Image class="size-8 text-muted-foreground" />
+                                                </div>
                                             </div>
                                         </CarouselItem>
                                     </CarouselContent>
@@ -663,6 +680,14 @@
 
     const treeData = ref({});
     const memo = ref('');
+    const imageError = ref(false);
+
+    watch(
+        () => avatarDialog.value.id,
+        () => {
+            imageError.value = false;
+        }
+    );
     const setAvatarTagsDialog = ref({
         visible: false,
         loading: false,
diff --git a/src/components/dialogs/GroupDialog/GroupDialog.vue b/src/components/dialogs/GroupDialog/GroupDialog.vue
index 46b358cc..4b3e680c 100644
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -10,12 +10,19 @@
             <div style="display: flex">
                 <div style="flex: none; width: 120px; height: 120px">
                     <img
-                        v-if="!groupDialog.loading"
+                        v-if="!groupDialog.loading && !imageError"
                         :src="groupDialog.ref.iconUrl"
                         style="width: 120px; height: 120px; border-radius: var(--radius-xl)"
                         class="cursor-pointer"
                         @click="showFullscreenImageDialog(groupDialog.ref.iconUrl)"
+                        @error="imageError = true"
                         loading="lazy" />
+                    <div
+                        v-else-if="!groupDialog.loading"
+                        class="flex items-center justify-center bg-muted"
+                        style="width: 120px; height: 120px; border-radius: var(--radius-xl)">
+                        <Image class="size-8 text-muted-foreground" />
+                    </div>
                 </div>
                 <div class="ml-4" style="flex: 1; display: flex; align-items: flex-start">
                     <div class="group-header" style="flex: 1">
@@ -374,6 +381,7 @@
         Check,
         CheckCircle,
         Eye,
+        Image,
         MessageSquare,
         MoreHorizontal,
         RefreshCw,
@@ -469,6 +477,14 @@
 
     const groupDialogTabCurrentName = ref('0');
     const treeData = ref({});
+    const imageError = ref(false);
+
+    watch(
+        () => groupDialog.value.id,
+        () => {
+            imageError.value = false;
+        }
+    );
     const membersTabRef = ref(null);
     const photosTabRef = ref(null);
 
diff --git a/src/components/dialogs/GroupDialog/GroupDialogInfoTab.vue b/src/components/dialogs/GroupDialog/GroupDialogInfoTab.vue
index fed1a9a8..db7ec6c5 100644
--- a/src/components/dialogs/GroupDialog/GroupDialogInfoTab.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialogInfoTab.vue
@@ -1,12 +1,19 @@
 <template>
     <div>
         <img
-            v-if="!groupDialog.loading"
+            v-if="!groupDialog.loading && !bannerError"
             :src="groupDialog.ref.bannerUrl"
             class="cursor-pointer"
             style="flex: none; width: 100%; aspect-ratio: 6/1; object-fit: cover; border-radius: var(--radius-md)"
             @click="showFullscreenImageDialog(groupDialog.ref.bannerUrl)"
+            @error="bannerError = true"
             loading="lazy" />
+        <div
+            v-else-if="!groupDialog.loading"
+            class="flex items-center justify-center bg-muted"
+            style="width: 100%; aspect-ratio: 6/1; border-radius: var(--radius-md)">
+            <Image class="size-8 text-muted-foreground" />
+        </div>
     </div>
     <div class="flex flex-wrap items-start px-2.5" style="max-height: none">
         <span v-if="groupDialog.instances.length" class="text-xs font-bold" style="margin: 6px">
@@ -34,7 +41,12 @@
                     class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
                     @click="showUserDialog(user.id)">
                     <div class="relative inline-block flex-none size-9 mr-2.5" :class="userStatusClass(user)">
-                        <img class="size-full rounded-full object-cover" :src="userImage(user)" loading="lazy" />
+                        <Avatar class="size-9">
+                            <AvatarImage :src="userImage(user)" class="object-cover" />
+                            <AvatarFallback>
+                                <User class="size-4 text-muted-foreground" />
+                            </AvatarFallback>
+                        </Avatar>
                     </div>
                     <div class="flex-1 overflow-hidden">
                         <span
@@ -58,6 +70,7 @@
                 <span style="display: block" v-text="groupDialog.announcement.title" />
                 <div v-if="groupDialog.announcement.imageUrl" style="display: inline-block; margin-right: 6px">
                     <img
+                        v-if="!announcementPhotoError"
                         :src="groupDialog.announcement.imageUrl"
                         class="cursor-pointer"
                         style="
@@ -68,7 +81,14 @@
                             object-fit: cover;
                         "
                         @click="showFullscreenImageDialog(groupDialog.announcement.imageUrl)"
+                        @error="announcementPhotoError = true"
                         loading="lazy" />
+                    <div
+                        v-else
+                        class="flex items-center justify-center bg-muted"
+                        style="width: 60px; height: 60px; border-radius: var(--radius-md)">
+                        <Image class="size-5 text-muted-foreground" />
+                    </div>
                 </div>
                 <pre
                     class="text-xs font-[inherit]"
@@ -340,9 +360,11 @@
 </template>
 
 <script setup>
-    import { Copy, Eye, MoreHorizontal } from 'lucide-vue-next';
+    import { Copy, Eye, Image, MoreHorizontal, User } from 'lucide-vue-next';
+    import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
     import { Button } from '@/components/ui/button';
     import { Spinner } from '@/components/ui/spinner';
+    import { ref, watch } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
@@ -356,14 +378,14 @@
         userStatusClass
     } from '../../../shared/utils';
     import { refreshInstancePlayerCount } from '../../../coordinators/instanceCoordinator';
-    import { useGalleryStore, useGroupStore, useInstanceStore, useLocationStore, useUserStore } from '../../../stores';
+    import { useGalleryStore, useGroupStore, useInstanceStore, useLocationStore } from '../../../stores';
     import { useGroupCalendarEvents } from './useGroupCalendarEvents';
 
     import GroupCalendarEventCard from '../../../views/Tools/components/GroupCalendarEventCard.vue';
     import InstanceActionBar from '../../InstanceActionBar.vue';
     import { showUserDialog } from '../../../coordinators/userCoordinator';
 
-    const props = defineProps({
+    defineProps({
         showGroupPostEditDialog: {
             type: Function,
             required: true
@@ -383,6 +405,17 @@
 
     const { pastCalenderEvents, upcomingCalenderEvents, updateFollowingCalendarData } = useGroupCalendarEvents(groupDialog);
 
+    const bannerError = ref(false);
+    const announcementPhotoError = ref(false);
+
+    watch(
+        () => groupDialog.value.id,
+        () => {
+            bannerError.value = false;
+            announcementPhotoError.value = false;
+        }
+    );
+
     /**
      *
      * @param groupRef
diff --git a/src/components/dialogs/GroupDialog/GroupDialogMembersTab.vue b/src/components/dialogs/GroupDialog/GroupDialogMembersTab.vue
index 1f6dc1c4..cdec790e 100644
--- a/src/components/dialogs/GroupDialog/GroupDialogMembersTab.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialogMembersTab.vue
@@ -82,7 +82,12 @@
                 class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
                 @click="showUserDialog(user.userId)">
                 <div class="relative inline-block flex-none size-9 mr-2.5">
-                    <img class="size-full rounded-full object-cover" :src="userImage(user.user)" loading="lazy" />
+                    <Avatar class="size-9">
+                        <AvatarImage :src="userImage(user.user)" class="object-cover" />
+                        <AvatarFallback>
+                            <User class="size-4 text-muted-foreground" />
+                        </AvatarFallback>
+                    </Avatar>
                 </div>
                 <div class="flex-1 overflow-hidden">
                     <span
@@ -139,7 +144,12 @@
                 class="infinite-list-item box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
                 @click="showUserDialog(user.userId)">
                 <div class="relative inline-block flex-none size-9 mr-2.5">
-                    <img class="size-full rounded-full object-cover" :src="userImage(user.user)" loading="lazy" />
+                    <Avatar class="size-9">
+                        <AvatarImage :src="userImage(user.user)" class="object-cover" />
+                        <AvatarFallback>
+                            <User class="size-4 text-muted-foreground" />
+                        </AvatarFallback>
+                    </Avatar>
                 </div>
                 <div class="flex-1 overflow-hidden">
                     <span
@@ -201,7 +211,8 @@
 </template>
 
 <script setup>
-    import { Download, Eye, MessageSquare, Pencil, RefreshCcw, Tag } from 'lucide-vue-next';
+    import { Download, Eye, MessageSquare, Pencil, RefreshCcw, Tag, User } from 'lucide-vue-next';
+    import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { Button } from '@/components/ui/button';
     import { InputGroupField } from '@/components/ui/input-group';
diff --git a/src/components/dialogs/GroupDialog/GroupDialogPhotosTab.vue b/src/components/dialogs/GroupDialog/GroupDialogPhotosTab.vue
index 55d21ffe..5ec3b784 100644
--- a/src/components/dialogs/GroupDialog/GroupDialogPhotosTab.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialogPhotosTab.vue
@@ -41,11 +41,21 @@
                     v-for="image in groupDialog.galleries[gallery.id]"
                     :key="image.id"
                     class="p-0 overflow-hidden transition-shadow hover:shadow-md">
-                    <img
-                        :src="image.imageUrl"
-                        :class="[' cursor-pointer', 'max-w-full', 'max-h-full']"
-                        @click="showFullscreenImageDialog(image.imageUrl)"
-                        loading="lazy" />
+                    <div class="cursor-pointer" @click="showFullscreenImageDialog(image.imageUrl)">
+                        <img
+                            :src="image.imageUrl"
+                            :class="['max-w-full', 'max-h-full']"
+                            @error="
+                                $event.target.style.display = 'none';
+                                $event.target.nextElementSibling.style.display = 'flex';
+                            "
+                            loading="lazy" />
+                        <div
+                            class="hidden h-[200px] w-full items-center justify-center bg-muted"
+                            style="display: none">
+                            <Image class="size-8 text-muted-foreground" />
+                        </div>
+                    </div>
                 </Card>
             </div>
         </template>
@@ -55,7 +65,7 @@
 <script setup>
     import { Button } from '@/components/ui/button';
     import { Card } from '@/components/ui/card';
-    import { RefreshCw } from 'lucide-vue-next';
+    import { Image, RefreshCw } from 'lucide-vue-next';
     import { Spinner } from '@/components/ui/spinner';
     import { TabsUnderline } from '@/components/ui/tabs';
     import { storeToRefs } from 'pinia';
diff --git a/src/components/dialogs/GroupDialog/GroupDialogPostsTab.vue b/src/components/dialogs/GroupDialog/GroupDialogPostsTab.vue
index 5863090f..b71a1701 100644
--- a/src/components/dialogs/GroupDialog/GroupDialogPostsTab.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialogPostsTab.vue
@@ -18,18 +18,29 @@
                 <div class="flex-1 overflow-hidden">
                     <span style="display: block" v-text="post.title" />
                     <div v-if="post.imageUrl" style="display: inline-block; margin-right: 6px">
-                        <img
-                            :src="post.imageUrl"
+                        <div
                             class="cursor-pointer"
-                            style="
-                                flex: none;
-                                width: 60px;
-                                height: 60px;
-                                border-radius: var(--radius-md);
-                                object-fit: cover;
-                            "
-                            @click="showFullscreenImageDialog(post.imageUrl)"
-                            loading="lazy" />
+                            style="flex: none; width: 60px; height: 60px"
+                            @click="showFullscreenImageDialog(post.imageUrl)">
+                            <img
+                                :src="post.imageUrl"
+                                style="
+                                    width: 60px;
+                                    height: 60px;
+                                    border-radius: var(--radius-md);
+                                    object-fit: cover;
+                                "
+                                @error="
+                                    $event.target.style.display = 'none';
+                                    $event.target.nextElementSibling.style.display = 'flex';
+                                "
+                                loading="lazy" />
+                            <div
+                                class="items-center justify-center bg-muted"
+                                style="width: 60px; height: 60px; border-radius: var(--radius-md); display: none">
+                                <Image class="size-5 text-muted-foreground" />
+                            </div>
+                        </div>
                     </div>
                     <pre
                         class="text-xs font-[inherit]"
@@ -101,7 +112,7 @@
 </template>
 
 <script setup>
-    import { Eye, Pencil, Trash2 } from 'lucide-vue-next';
+    import { Eye, Image, Pencil, Trash2 } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { InputGroupField } from '@/components/ui/input-group';
     import { storeToRefs } from 'pinia';
@@ -110,7 +121,7 @@
     import { formatDateFilter, hasGroupPermission } from '../../../shared/utils';
     import { useGalleryStore, useGroupStore } from '../../../stores';
 
-    const props = defineProps({
+    defineProps({
         showGroupPostEditDialog: {
             type: Function,
             required: true
diff --git a/src/components/dialogs/UserDialog/UserDialogAvatarsTab.vue b/src/components/dialogs/UserDialog/UserDialogAvatarsTab.vue
index 7fe1d471..c81b64c6 100644
--- a/src/components/dialogs/UserDialog/UserDialogAvatarsTab.vue
+++ b/src/components/dialogs/UserDialog/UserDialogAvatarsTab.vue
@@ -68,11 +68,12 @@
                 class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
                 @click="showAvatarDialog(avatar.id)">
                 <div class="relative inline-block flex-none size-9 mr-2.5">
-                    <img
-                        v-if="avatar.thumbnailImageUrl"
-                        class="size-full rounded-full object-cover"
-                        :src="avatar.thumbnailImageUrl"
-                        loading="lazy" />
+                    <Avatar class="size-9">
+                        <AvatarImage v-if="avatar.thumbnailImageUrl" :src="avatar.thumbnailImageUrl" class="object-cover" />
+                        <AvatarFallback>
+                            <Image class="size-4 text-muted-foreground" />
+                        </AvatarFallback>
+                    </Avatar>
                 </div>
                 <div class="flex-1 overflow-hidden">
                     <span class="block truncate font-medium leading-[18px]" v-text="avatar.name"></span>
@@ -103,7 +104,8 @@
     import { useI18n } from 'vue-i18n';
     import { storeToRefs } from 'pinia';
 
-    import { RefreshCw } from 'lucide-vue-next';
+    import { Image, RefreshCw } from 'lucide-vue-next';
+    import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { Button } from '@/components/ui/button';
     import { DataTableEmpty } from '@/components/ui/data-table';
diff --git a/src/components/dialogs/UserDialog/UserDialogFavoriteWorldsTab.vue b/src/components/dialogs/UserDialog/UserDialogFavoriteWorldsTab.vue
index efb1bbaf..8b477055 100644
--- a/src/components/dialogs/UserDialog/UserDialogFavoriteWorldsTab.vue
+++ b/src/components/dialogs/UserDialog/UserDialogFavoriteWorldsTab.vue
@@ -45,10 +45,12 @@
                         class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
                         @click="showWorldDialog(world.id)">
                         <div class="relative inline-block flex-none size-9 mr-2.5">
-                            <img
-                                class="size-full rounded-full object-cover"
-                                :src="world.thumbnailImageUrl"
-                                loading="lazy" />
+                            <Avatar class="size-9">
+                                <AvatarImage :src="world.thumbnailImageUrl" class="object-cover" />
+                                <AvatarFallback>
+                                    <Image class="size-4 text-muted-foreground" />
+                                </AvatarFallback>
+                            </Avatar>
                         </div>
                         <div class="flex-1 overflow-hidden">
                             <span class="block truncate font-medium leading-[18px]" v-text="world.name"></span>
@@ -68,6 +70,8 @@
 
 <script setup>
     import { computed, ref } from 'vue';
+    import { Image } from 'lucide-vue-next';
+    import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
     import { DataTableEmpty } from '@/components/ui/data-table';
     import { TabsUnderline } from '@/components/ui/tabs';
     import { storeToRefs } from 'pinia';
@@ -75,7 +79,7 @@
 
     import DeprecationAlert from '@/components/DeprecationAlert.vue';
 
-    import { useFavoriteStore, useUserStore, useWorldStore } from '../../../stores';
+    import { useFavoriteStore, useUserStore } from '../../../stores';
     import { showWorldDialog } from '../../../coordinators/worldCoordinator';
     import { handleFavoriteWorldList } from '../../../coordinators/favoriteCoordinator';
     import { favoriteRequest } from '../../../api';
diff --git a/src/components/dialogs/UserDialog/UserDialogGroupsTab.vue b/src/components/dialogs/UserDialog/UserDialogGroupsTab.vue
index 209714b1..71887e80 100644
--- a/src/components/dialogs/UserDialog/UserDialogGroupsTab.vue
+++ b/src/components/dialogs/UserDialog/UserDialogGroupsTab.vue
@@ -142,7 +142,12 @@
                         </Button>
                     </div>
                     <div class="relative inline-block flex-none size-9 mr-2.5">
-                        <img class="size-full rounded-full object-cover" :src="group.iconUrl" loading="lazy" />
+                        <Avatar class="size-9">
+                            <AvatarImage :src="group.iconUrl" class="object-cover" />
+                            <AvatarFallback>
+                                <Users class="size-4 text-muted-foreground" />
+                            </AvatarFallback>
+                        </Avatar>
                     </div>
                     <div class="flex-1 overflow-hidden">
                         <span class="block truncate font-medium leading-[18px]" v-text="group.name"></span>
@@ -247,7 +252,12 @@
                         class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
                         @click="showGroupDialog(group.id)">
                         <div class="relative inline-block flex-none size-9 mr-2.5">
-                            <img class="size-full rounded-full object-cover" :src="group.iconUrl" loading="lazy" />
+                            <Avatar class="size-9">
+                                <AvatarImage :src="group.iconUrl" class="object-cover" />
+                            <AvatarFallback>
+                                <Users class="size-4 text-muted-foreground" />
+                            </AvatarFallback>
+                            </Avatar>
                         </div>
                         <div class="flex-1 overflow-hidden">
                             <span class="block truncate font-medium leading-[18px]" v-text="group.name"></span>
@@ -283,7 +293,12 @@
                         class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
                         @click="showGroupDialog(group.id)">
                         <div class="relative inline-block flex-none size-9 mr-2.5">
-                            <img class="size-full rounded-full object-cover" :src="group.iconUrl" loading="lazy" />
+                            <Avatar class="size-9">
+                                <AvatarImage :src="group.iconUrl" class="object-cover" />
+                            <AvatarFallback>
+                                <Users class="size-4 text-muted-foreground" />
+                            </AvatarFallback>
+                            </Avatar>
                         </div>
                         <div class="flex-1 overflow-hidden">
                             <span class="block truncate font-medium leading-[18px]" v-text="group.name"></span>
@@ -330,7 +345,12 @@
                         class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
                         @click="showGroupDialog(group.id)">
                         <div class="relative inline-block flex-none size-9 mr-2.5">
-                            <img class="size-full rounded-full object-cover" :src="group.iconUrl" loading="lazy" />
+                            <Avatar class="size-9">
+                                <AvatarImage :src="group.iconUrl" class="object-cover" />
+                            <AvatarFallback>
+                                <Users class="size-4 text-muted-foreground" />
+                            </AvatarFallback>
+                            </Avatar>
                         </div>
                         <div class="flex-1 overflow-hidden">
                             <span class="block truncate font-medium leading-[18px]" v-text="group.name"></span>
@@ -361,7 +381,8 @@
 </template>
 
 <script setup>
-    import { ArrowDown, ArrowUp, DownloadIcon, Eye, LogOut, RefreshCw, Tag } from 'lucide-vue-next';
+    import { ArrowDown, ArrowUp, DownloadIcon, Eye, LogOut, RefreshCw, Tag, Users } from 'lucide-vue-next';
+    import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { nextTick, ref } from 'vue';
     import { Button } from '@/components/ui/button';
diff --git a/src/components/dialogs/UserDialog/UserDialogInfoTab.vue b/src/components/dialogs/UserDialog/UserDialogInfoTab.vue
index 30ee2648..76493686 100644
--- a/src/components/dialogs/UserDialog/UserDialogInfoTab.vue
+++ b/src/components/dialogs/UserDialog/UserDialogInfoTab.vue
@@ -30,10 +30,12 @@
                         <div
                             class="relative inline-block flex-none size-9 mr-2.5"
                             :class="userStatusClass(userDialog.$location.user)">
-                            <img
-                                class="size-full rounded-full object-cover"
-                                :src="userImage(userDialog.$location.user, true)"
-                                loading="lazy" />
+                            <Avatar class="size-9">
+                                <AvatarImage :src="userImage(userDialog.$location.user, true)" class="object-cover" />
+                                <AvatarFallback>
+                                    <User class="size-4 text-muted-foreground" />
+                                </AvatarFallback>
+                            </Avatar>
                         </div>
                         <div class="flex-1 overflow-hidden">
                             <span
@@ -51,7 +53,12 @@
                     class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
                     @click="showUserDialog(user.id)">
                     <div class="relative inline-block flex-none size-9 mr-2.5" :class="userStatusClass(user)">
-                        <img class="size-full rounded-full object-cover" :src="userImage(user, true)" loading="lazy" />
+                        <Avatar class="size-9">
+                            <AvatarImage :src="userImage(user, true)" class="object-cover" />
+                            <AvatarFallback>
+                                <User class="size-4 text-muted-foreground" />
+                            </AvatarFallback>
+                        </Avatar>
                     </div>
                     <div class="flex-1 overflow-hidden">
                         <span
@@ -145,7 +152,9 @@
                                 :src="userDialog.representedGroup.$thumbnailUrl"
                                 @load="userDialog.isRepresentedGroupLoading = false"
                                 @error="userDialog.isRepresentedGroupLoading = false" />
-                            <AvatarFallback class="rounded-lg!" />
+                            <AvatarFallback class="rounded-lg!">
+                                <Image class="size-5 text-muted-foreground" />
+                            </AvatarFallback>
                         </Avatar>
                     </div>
                     <span
@@ -461,7 +470,7 @@
 </template>
 
 <script setup>
-    import { Copy, Info, Languages, MoreHorizontal, Pencil, Trash2 } from 'lucide-vue-next';
+    import { Copy, Image, Info, Languages, MoreHorizontal, Pencil, Trash2, User } from 'lucide-vue-next';
     import {
         DropdownMenu,
         DropdownMenuContent,
diff --git a/src/components/dialogs/UserDialog/UserDialogMutualFriendsTab.vue b/src/components/dialogs/UserDialog/UserDialogMutualFriendsTab.vue
index 745ba5ac..e1278944 100644
--- a/src/components/dialogs/UserDialog/UserDialogMutualFriendsTab.vue
+++ b/src/components/dialogs/UserDialog/UserDialogMutualFriendsTab.vue
@@ -41,7 +41,12 @@
             class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
             @click="showUserDialog(user.id)">
             <div class="relative inline-block flex-none size-9 mr-2.5">
-                <img class="size-full rounded-full object-cover" :src="userImage(user)" loading="lazy" />
+                <Avatar class="size-9">
+                    <AvatarImage :src="userImage(user)" class="object-cover" />
+                    <AvatarFallback>
+                        <User class="size-4 text-muted-foreground" />
+                    </AvatarFallback>
+                </Avatar>
             </div>
             <div class="flex-1 overflow-hidden">
                 <span
@@ -54,9 +59,10 @@
 </template>
 
 <script setup>
+    import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { Button } from '@/components/ui/button';
-    import { RefreshCw } from 'lucide-vue-next';
+    import { RefreshCw, User } from 'lucide-vue-next';
     import { Spinner } from '@/components/ui/spinner';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
diff --git a/src/components/dialogs/UserDialog/UserDialogWorldsTab.vue b/src/components/dialogs/UserDialog/UserDialogWorldsTab.vue
index 9b655d2f..12dfa55e 100644
--- a/src/components/dialogs/UserDialog/UserDialogWorldsTab.vue
+++ b/src/components/dialogs/UserDialog/UserDialogWorldsTab.vue
@@ -59,7 +59,12 @@
                 class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
                 @click="showWorldDialog(world.id)">
                 <div class="relative inline-block flex-none size-9 mr-2.5">
-                    <img class="size-full rounded-full object-cover" :src="world.thumbnailImageUrl" loading="lazy" />
+                    <Avatar class="size-9">
+                        <AvatarImage :src="world.thumbnailImageUrl" class="object-cover" />
+                        <AvatarFallback>
+                            <Image class="size-4 text-muted-foreground" />
+                        </AvatarFallback>
+                    </Avatar>
                 </div>
                 <div class="flex-1 overflow-hidden">
                     <span class="block truncate font-medium leading-[18px]" v-text="world.name"></span>
@@ -79,7 +84,8 @@
     import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { Button } from '@/components/ui/button';
     import { DataTableEmpty } from '@/components/ui/data-table';
-    import { RefreshCw } from 'lucide-vue-next';
+    import { Image, RefreshCw } from 'lucide-vue-next';
+    import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
     import { Spinner } from '@/components/ui/spinner';
     import { ref } from 'vue';
     import { storeToRefs } from 'pinia';
diff --git a/src/components/dialogs/UserDialog/UserSummaryHeader.vue b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
index 3dc137a7..0c9b366b 100644
--- a/src/components/dialogs/UserDialog/UserSummaryHeader.vue
+++ b/src/components/dialogs/UserDialog/UserSummaryHeader.vue
@@ -4,20 +4,29 @@
             <img
                 v-if="
                     !userDialog.loading &&
+                    !profileImageError &&
                     (userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride)
                 "
                 class="cursor-pointer"
                 :src="userDialog.ref.profilePicOverrideThumbnail || userDialog.ref.profilePicOverride"
                 style="height: 120px; width: 213.33px; border-radius: var(--radius-xl); object-fit: cover"
                 @click="showFullscreenImageDialog(userDialog.ref.profilePicOverride)"
+                @error="profileImageError = true"
                 loading="lazy" />
             <img
-                v-else-if="!userDialog.loading"
+                v-else-if="!userDialog.loading && !profileImageError && userDialog.ref.currentAvatarThumbnailImageUrl"
                 class="cursor-pointer"
                 :src="userDialog.ref.currentAvatarThumbnailImageUrl"
                 style="height: 120px; width: 160px; border-radius: var(--radius-xl); object-fit: cover"
                 @click="showFullscreenImageDialog(userDialog.ref.currentAvatarImageUrl)"
+                @error="profileImageError = true"
                 loading="lazy" />
+            <div
+                v-else-if="!userDialog.loading"
+                class="flex items-center justify-center bg-muted"
+                style="height: 120px; width: 160px; border-radius: var(--radius-xl)">
+                <Image class="size-8 text-muted-foreground" />
+            </div>
         </div>
         <div class="ml-4" style="flex: 1; display: flex; align-items: flex-start">
             <div style="flex: 1">
@@ -232,11 +241,19 @@
 
             <div v-if="userDialog.ref.userIcon" style="flex: none; margin-right: 8px">
                 <img
+                    v-if="!userIconError"
                     class="cursor-pointer"
                     :src="userImage(userDialog.ref, true, '256', true)"
                     style="flex: none; width: 120px; height: 120px; border-radius: var(--radius-xl); object-fit: cover"
                     @click="showFullscreenImageDialog(userDialog.ref.userIcon)"
+                    @error="userIconError = true"
                     loading="lazy" />
+                <div
+                    v-else
+                    class="flex items-center justify-center bg-muted"
+                    style="width: 120px; height: 120px; border-radius: var(--radius-xl)">
+                    <Image class="size-8 text-muted-foreground" />
+                </div>
             </div>
 
             <UserActionDropdown class="ml-2 mt-12" :user-dialog-command="userDialogCommand" />
@@ -245,7 +262,8 @@
 </template>
 
 <script setup>
-    import { Apple, ChevronDown, IdCard, Monitor, Shield, Smartphone, UserPlus, Users } from 'lucide-vue-next';
+    import { Apple, ChevronDown, IdCard, Image, Monitor, Shield, Smartphone, UserPlus, Users } from 'lucide-vue-next';
+    import { ref, watch } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
@@ -287,6 +305,17 @@
 
     const { showFullscreenImageDialog } = useGalleryStore();
 
+    const profileImageError = ref(false);
+    const userIconError = ref(false);
+
+    watch(
+        () => userDialog.value.id,
+        () => {
+            profileImageError.value = false;
+            userIconError.value = false;
+        }
+    );
+
     const getUserStateText = props.getUserStateText;
     const copyUserDisplayName = props.copyUserDisplayName;
     const toggleBadgeVisibility = props.toggleBadgeVisibility;
diff --git a/src/components/dialogs/WorldDialog/WorldDialog.vue b/src/components/dialogs/WorldDialog/WorldDialog.vue
index 38aff461..2d26e7c4 100644
--- a/src/components/dialogs/WorldDialog/WorldDialog.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialog.vue
@@ -10,12 +10,19 @@
             <div style="display: flex">
                 <div style="flex: none; width: 160px; height: 120px">
                     <img
-                        v-if="!worldDialog.loading"
+                        v-if="!worldDialog.loading && !imageError"
                         :src="worldDialog.ref.thumbnailImageUrl"
                         class="cursor-pointer"
                         style="width: 160px; height: 120px; border-radius: var(--radius-xl)"
                         @click="showFullscreenImageDialog(worldDialog.ref.imageUrl)"
+                        @error="imageError = true"
                         loading="lazy" />
+                    <div
+                        v-else-if="!worldDialog.loading"
+                        class="flex items-center justify-center bg-muted"
+                        style="width: 160px; height: 120px; border-radius: var(--radius-xl)">
+                        <Image class="size-8 text-muted-foreground" />
+                    </div>
                 </div>
                 <div class="ml-4" style="flex: 1; display: flex; align-items: flex-start">
                     <div style="flex: 1">
@@ -480,6 +487,14 @@
     const treeData = ref({});
     const translatedDescription = ref('');
     const isTranslating = ref(false);
+    const imageError = ref(false);
+
+    watch(
+        () => worldDialog.value.id,
+        () => {
+            imageError.value = false;
+        }
+    );
 
     const isDialogVisible = computed({
         get() {
diff --git a/src/components/dialogs/WorldDialog/WorldDialogInstancesTab.vue b/src/components/dialogs/WorldDialog/WorldDialogInstancesTab.vue
index 37c0cb79..8f032a2a 100644
--- a/src/components/dialogs/WorldDialog/WorldDialogInstancesTab.vue
+++ b/src/components/dialogs/WorldDialog/WorldDialogInstancesTab.vue
@@ -53,10 +53,12 @@
                                 <div
                                     class="relative inline-block flex-none size-9 mr-2.5"
                                     :class="userStatusClass(room.$location.user)">
-                                    <img
-                                        class="size-full rounded-full object-cover"
-                                        :src="userImage(room.$location.user, true)"
-                                        loading="lazy" />
+                                    <Avatar class="size-9">
+                                        <AvatarImage :src="userImage(room.$location.user, true)" class="object-cover" />
+                                        <AvatarFallback>
+                                            <User class="size-4 text-muted-foreground" />
+                                        </AvatarFallback>
+                                    </Avatar>
                                 </div>
                                 <div class="flex-1 overflow-hidden">
                                     <span
@@ -76,10 +78,12 @@
                             class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
                             @click="showUserDialog(user.id)">
                             <div class="relative inline-block flex-none size-9 mr-2.5" :class="userStatusClass(user)">
-                                <img
-                                    class="size-full rounded-full object-cover"
-                                    :src="userImage(user, true)"
-                                    loading="lazy" />
+                                <Avatar class="size-9">
+                                    <AvatarImage :src="userImage(user, true)" class="object-cover" />
+                                    <AvatarFallback>
+                                        <User class="size-4 text-muted-foreground" />
+                                    </AvatarFallback>
+                                </Avatar>
                             </div>
                             <div class="flex-1 overflow-hidden">
                                 <span
@@ -104,6 +108,7 @@
 
 <script setup>
     import { Check, User } from 'lucide-vue-next';
+    import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
     import { Spinner } from '@/components/ui/spinner';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
diff --git a/src/views/Favorites/FavoritesFriend.vue b/src/views/Favorites/FavoritesFriend.vue
index 6d730daf..4ab28954 100644
--- a/src/views/Favorites/FavoritesFriend.vue
+++ b/src/views/Favorites/FavoritesFriend.vue
@@ -291,7 +291,12 @@
                                             @click="showUserDialog(favorite.id)">
                                             <div class="favorites-search-card__content">
                                                 <div class="favorites-search-card__avatar">
-                                                    <img :src="userImage(favorite, true)" loading="lazy" />
+                                                    <Avatar class="size-full">
+                                                        <AvatarImage :src="userImage(favorite, true)" class="object-cover" loading="lazy" />
+                                                        <AvatarFallback>
+                                                            <User class="size-5 text-muted-foreground" />
+                                                        </AvatarFallback>
+                                                    </Avatar>
                                                 </div>
                                                 <div class="favorites-search-card__detail">
                                                     <div class="flex items-center gap-2">
@@ -325,8 +330,9 @@
 </template>
 
 <script setup>
-    import { Ellipsis, MoreHorizontal, Plus, RefreshCcw, RefreshCw } from 'lucide-vue-next';
+    import { Ellipsis, MoreHorizontal, Plus, RefreshCcw, RefreshCw, User } from 'lucide-vue-next';
     import { computed, ref, watch } from 'vue';
+    import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
     import { Button } from '@/components/ui/button';
     import { DataTableEmpty } from '@/components/ui/data-table';
     import { InputGroupField } from '@/components/ui/input-group';
diff --git a/src/views/Favorites/components/FavoritesAvatarItem.vue b/src/views/Favorites/components/FavoritesAvatarItem.vue
index 839018d4..b7ad3e0a 100644
--- a/src/views/Favorites/components/FavoritesAvatarItem.vue
+++ b/src/views/Favorites/components/FavoritesAvatarItem.vue
@@ -16,7 +16,9 @@
                                 decoding="async"
                                 fetchpriority="low"
                                 class="rounded-sm object-cover" />
-                            <AvatarFallback class="rounded-sm">{{ avatarFallback }}</AvatarFallback>
+                            <AvatarFallback class="rounded-sm">
+                                <Image class="size-4 text-muted-foreground" />
+                            </AvatarFallback>
                         </Avatar>
                     </ItemMedia>
                     <ItemContent class="min-w-0">
@@ -98,7 +100,7 @@
 </template>
 
 <script setup>
-    import { AlertTriangle, Lock, MoreHorizontal, Trash2 } from 'lucide-vue-next';
+    import { AlertTriangle, Image, Lock, MoreHorizontal, Trash2 } from 'lucide-vue-next';
     import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
     import { Button } from '@/components/ui/button';
     import { Checkbox } from '@/components/ui/checkbox';
@@ -146,10 +148,6 @@
 
     const localFavFakeRef = computed(() => (props.isLocalFavorite ? props.favorite : props.favorite?.ref));
 
-    const displayName = computed(() => localFavFakeRef.value?.name || props.favorite?.name || props.favorite?.id);
-
-    const avatarFallback = computed(() => displayName.value?.charAt(0)?.toUpperCase() || '?');
-
     const showUnavailable = computed(() => !props.isLocalFavorite && props.favorite?.deleted);
 
     const isPrivateAvatar = computed(() => !props.isLocalFavorite && props.favorite?.ref?.releaseStatus === 'private');
diff --git a/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue b/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
index b380bbc2..f71f34ba 100644
--- a/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
+++ b/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
@@ -15,7 +15,9 @@
                             decoding="async"
                             fetchpriority="low"
                             class="rounded-sm object-cover" />
-                        <AvatarFallback class="rounded-sm">{{ avatarFallback }}</AvatarFallback>
+                        <AvatarFallback class="rounded-sm">
+                            <Image class="size-4 text-muted-foreground" />
+                        </AvatarFallback>
                     </Avatar>
                 </ItemMedia>
                 <ItemContent class="min-w-0">
@@ -65,7 +67,7 @@
 </template>
 
 <script setup>
-    import { MoreHorizontal } from 'lucide-vue-next';
+    import { Image, MoreHorizontal } from 'lucide-vue-next';
     import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
     import { Button } from '@/components/ui/button';
     import {
@@ -102,8 +104,6 @@
         }
     });
 
-    const avatarFallback = computed(() => props.favorite.name?.charAt(0)?.toUpperCase() || '?');
-
     const itemStyle = computed(() => ({
         padding: 'var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px)',
         gap: 'var(--favorites-card-content-gap, 10px)',
diff --git a/src/views/Favorites/components/FavoritesFriendItem.vue b/src/views/Favorites/components/FavoritesFriendItem.vue
index 6aad4b8e..4419bccb 100644
--- a/src/views/Favorites/components/FavoritesFriendItem.vue
+++ b/src/views/Favorites/components/FavoritesFriendItem.vue
@@ -10,7 +10,9 @@
                     <ItemMedia variant="image">
                         <Avatar>
                             <AvatarImage :src="userImage(favorite.ref, true)" loading="lazy" />
-                            <AvatarFallback>{{ avatarFallback }}</AvatarFallback>
+                            <AvatarFallback>
+                                <User class="size-4 text-muted-foreground" />
+                            </AvatarFallback>
                         </Avatar>
                     </ItemMedia>
                     <ItemContent class="min-w-0">
@@ -114,7 +116,9 @@
         <Item variant="outline" class="favorites-item hover:bg-muted x-hover-list" :style="itemStyle">
             <ItemMedia variant="image">
                 <Avatar>
-                    <AvatarFallback>{{ avatarFallback }}</AvatarFallback>
+                    <AvatarFallback>
+                        <User class="size-4 text-muted-foreground" />
+                    </AvatarFallback>
                 </Avatar>
             </ItemMedia>
             <ItemContent class="min-w-0">
@@ -135,7 +139,7 @@
 </template>
 
 <script setup>
-    import { MoreHorizontal, Trash2 } from 'lucide-vue-next';
+    import { MoreHorizontal, Trash2, User } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { Checkbox } from '@/components/ui/checkbox';
     import {
@@ -195,8 +199,6 @@
 
     const displayName = computed(() => props.favorite?.ref?.displayName || props.favorite?.name || props.favorite?.id);
 
-    const avatarFallback = computed(() => displayName.value?.charAt(0)?.toUpperCase() || '?');
-
     const displayNameStyle = computed(() => {
         if (props.favorite?.ref?.$userColour) {
             return {
diff --git a/src/views/Favorites/components/FavoritesWorldItem.vue b/src/views/Favorites/components/FavoritesWorldItem.vue
index 257b3a49..7128ad91 100644
--- a/src/views/Favorites/components/FavoritesWorldItem.vue
+++ b/src/views/Favorites/components/FavoritesWorldItem.vue
@@ -15,7 +15,9 @@
                             decoding="async"
                             fetchpriority="low"
                             class="rounded-sm object-cover" />
-                        <AvatarFallback class="rounded-sm">{{ avatarFallback }}</AvatarFallback>
+                        <AvatarFallback class="rounded-sm">
+                            <Image class="size-4 text-muted-foreground" />
+                        </AvatarFallback>
                     </Avatar>
                 </ItemMedia>
                 <ItemContent class="min-w-0">
@@ -77,7 +79,7 @@
 </template>
 
 <script setup>
-    import { AlertTriangle, Lock, MoreHorizontal } from 'lucide-vue-next';
+    import { AlertTriangle, Image, Lock, MoreHorizontal } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { Checkbox } from '@/components/ui/checkbox';
     import {
@@ -129,8 +131,6 @@
 
     const displayName = computed(() => localFavRef.value?.name || props.favorite?.name || props.favorite?.id);
 
-    const avatarFallback = computed(() => displayName.value?.charAt(0)?.toUpperCase() || '?');
-
     const showUnavailable = computed(() => !props.isLocalFavorite && props.favorite?.deleted);
 
     const isPrivateWorld = computed(() => localFavRef.value?.releaseStatus === 'private');
diff --git a/src/views/FriendsLocations/components/FriendsLocationsCard.vue b/src/views/FriendsLocations/components/FriendsLocationsCard.vue
index fac656bf..56bf5b80 100644
--- a/src/views/FriendsLocations/components/FriendsLocationsCard.vue
+++ b/src/views/FriendsLocations/components/FriendsLocationsCard.vue
@@ -9,7 +9,9 @@
                     <div>
                         <Avatar :style="{ width: `${avatarSize}px`, height: `${avatarSize}px` }">
                             <AvatarImage :src="userImage(friend.ref, true)" />
-                            <AvatarFallback>{{ avatarFallback }}</AvatarFallback>
+                            <AvatarFallback>
+                                <User class="text-muted-foreground" :size="Math.max(16, 20 * cardScale)" />
+                            </AvatarFallback>
                         </Avatar>
                     </div>
                     <span
@@ -79,7 +81,7 @@
     } from '@/components/ui/context-menu';
     import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
     import { Card } from '@/components/ui/card';
-    import { Pencil } from 'lucide-vue-next';
+    import { Pencil, User } from 'lucide-vue-next';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
@@ -132,7 +134,6 @@
         paddingBottom: `${36 * props.cardScale * props.cardSpacing}px !important`
     }));
 
-    const avatarFallback = computed(() => props.friend?.name?.charAt(0) ?? '?');
 
     const statusDotClass = computed(() => {
         const status = userStatusClass(props.friend.ref, props.friend.pendingOffline);
diff --git a/src/views/MyAvatars/columns.jsx b/src/views/MyAvatars/columns.jsx
index 7d53665e..b2922669 100644
--- a/src/views/MyAvatars/columns.jsx
+++ b/src/views/MyAvatars/columns.jsx
@@ -92,13 +92,26 @@ export function getColumns({
             cell: ({ row }) => {
                 const ref = row.original;
                 return (
-                    <img
-                        src={ref.thumbnailImageUrl}
-                        class="avatar-table-thumbnail cursor-pointer rounded-sm object-cover"
-                        style="width: 34px; height: 22px;"
-                        loading="lazy"
-                        onClick={() => onShowAvatarDialog(ref.id)}
-                    />
+                    <div class="flex items-center">
+                        <img
+                            src={ref.thumbnailImageUrl}
+                            class="avatar-table-thumbnail cursor-pointer rounded-sm object-cover"
+                            style="width: 34px; height: 22px;"
+                            loading="lazy"
+                            onClick={() => onShowAvatarDialog(ref.id)}
+                            onError={(e) => {
+                                e.target.style.display = 'none';
+                                e.target.nextElementSibling.style.display = '';
+                            }}
+                        />
+                        <div
+                            class="rounded-sm bg-muted flex items-center justify-center cursor-pointer"
+                            style="width: 34px; height: 22px; display: none"
+                            onClick={() => onShowAvatarDialog(ref.id)}
+                        >
+                            <Image class="h-3 w-3 text-muted-foreground" />
+                        </div>
+                    </div>
                 );
             }
         },
diff --git a/src/views/MyAvatars/components/MyAvatarCard.vue b/src/views/MyAvatars/components/MyAvatarCard.vue
index 0c81b9f1..0b7ae9f1 100644
--- a/src/views/MyAvatars/components/MyAvatarCard.vue
+++ b/src/views/MyAvatars/components/MyAvatarCard.vue
@@ -9,13 +9,14 @@
                             :class="isActive ? 'border-2 border-primary' : 'border border-border/50'">
                             <div class="w-full aspect-5/2 overflow-hidden bg-muted relative">
                                 <img
-                                    v-if="avatar.thumbnailImageUrl"
+                                    v-if="avatar.thumbnailImageUrl && !imageLoadError"
                                     :src="avatar.thumbnailImageUrl"
                                     :alt="avatar.name"
                                     loading="lazy"
                                     decoding="async"
                                     fetchpriority="low"
-                                    class="w-full h-full object-cover block" />
+                                    class="w-full h-full object-cover block"
+                                    @error="imageLoadError = true" />
                                 <div v-else class="w-full h-full grid place-items-center">
                                     <ImageIcon class="size-6 text-muted-foreground" />
                                 </div>
@@ -252,6 +253,7 @@
 
     const hoverOpen = ref(false);
     const contextMenuOpen = ref(false);
+    const imageLoadError = ref(false);
 
     const handleContextMenuOpen = (open) => {
         contextMenuOpen.value = open;
diff --git a/src/views/Notifications/columns.jsx b/src/views/Notifications/columns.jsx
index 723f1326..d75dadbf 100644
--- a/src/views/Notifications/columns.jsx
+++ b/src/views/Notifications/columns.jsx
@@ -17,7 +17,7 @@ import {
     Ban,
     BellOff,
     Check,
-    ImageOff,
+    Image,
     Link,
     MessageCircle,
     Reply,
@@ -439,7 +439,7 @@ export const createColumns = ({
                                 class="object-cover"
                             />
                             <AvatarFallback class="rounded">
-                                <ImageOff class="size-4 text-muted-foreground" />
+                                <Image class="size-4 text-muted-foreground" />
                             </AvatarFallback>
                         </Avatar>
                     );
@@ -456,7 +456,7 @@ export const createColumns = ({
                         >
                             <AvatarImage src={imgUrl} class="object-cover" />
                             <AvatarFallback class="rounded">
-                                <ImageOff class="size-4 text-muted-foreground" />
+                                <Image class="size-4 text-muted-foreground" />
                             </AvatarFallback>
                         </Avatar>
                     );
diff --git a/src/views/PlayerList/PlayerList.vue b/src/views/PlayerList/PlayerList.vue
index a7aefc8b..2cb2eecf 100644
--- a/src/views/PlayerList/PlayerList.vue
+++ b/src/views/PlayerList/PlayerList.vue
@@ -7,11 +7,19 @@
                 style="display: flex; min-height: 120px"
                 class="mb-7">
                 <img
+                    v-if="!worldImageError"
                     :src="currentInstanceWorld.ref.thumbnailImageUrl"
                     class="cursor-pointer"
                     style="flex: none; width: 160px; height: 120px; border-radius: var(--radius-md)"
                     @click="showFullscreenImageDialog(currentInstanceWorld.ref.imageUrl)"
+                    @error="worldImageError = true"
                     loading="lazy" />
+                <div
+                    v-else
+                    class="flex items-center justify-center bg-muted"
+                    style="flex: none; width: 160px; height: 120px; border-radius: var(--radius-md)">
+                    <Image class="size-8 text-muted-foreground" />
+                </div>
                 <div class="ml-2" style="display: flex; flex-direction: column; min-width: 320px; width: 100%">
                     <div class="flex items-center">
                         <span
@@ -174,7 +182,7 @@
 
 <script setup>
     import { computed, defineAsyncComponent, onActivated, onMounted, ref, watch } from 'vue';
-    import { Apple, Home, Monitor, Smartphone } from 'lucide-vue-next';
+    import { Apple, Home, Image, Monitor, Smartphone } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
@@ -207,6 +215,15 @@
 
     const { lastLocation } = storeToRefs(useLocationStore());
     const { currentInstanceLocation, currentInstanceWorld, currentInstanceUsersData } = storeToRefs(useInstanceStore());
+
+    const worldImageError = ref(false);
+
+    watch(
+        () => currentInstanceWorld.value?.ref?.id,
+        () => {
+            worldImageError.value = false;
+        }
+    );
     const { getCurrentInstanceUserList } = useInstanceStore();
     const { showFullscreenImageDialog } = useGalleryStore();
     const { currentUser } = storeToRefs(useUserStore());
diff --git a/src/views/PlayerList/columns.jsx b/src/views/PlayerList/columns.jsx
index f7c8c051..1aad32aa 100644
--- a/src/views/PlayerList/columns.jsx
+++ b/src/views/PlayerList/columns.jsx
@@ -5,6 +5,7 @@ import {
     Apple,
     ArrowUpDown,
     IdCard,
+    User,
     Monitor,
     Smartphone
 } from 'lucide-vue-next';
@@ -84,7 +85,17 @@ export const createColumns = ({
                             src={src}
                             class="h-4 w-4 rounded-sm object-cover"
                             loading="lazy"
+                            onError={(e) => {
+                                e.target.style.display = 'none';
+                                e.target.nextElementSibling.style.display = '';
+                            }}
                         />
+                        <div
+                            class="h-4 w-4 rounded-sm bg-muted flex items-center justify-center"
+                            style="display: none"
+                        >
+                            <User class="h-3 w-3 text-muted-foreground" />
+                        </div>
                     </div>
                 );
             }
diff --git a/src/views/Sidebar/components/FriendItem.vue b/src/views/Sidebar/components/FriendItem.vue
index c353f047..13b18adb 100644
--- a/src/views/Sidebar/components/FriendItem.vue
+++ b/src/views/Sidebar/components/FriendItem.vue
@@ -76,7 +76,7 @@
     import Location from '@/components/Location.vue';
     import Timer from '@/components/Timer.vue';
 
-    import { useAppearanceSettingsStore, useFriendStore, useUserStore } from '../../../stores';
+    import { useAppearanceSettingsStore, useFriendStore } from '../../../stores';
     import { useUserDisplay } from '../../../composables/useUserDisplay';
 
     import '@/styles/status-icon.css';
diff --git a/src/views/Sidebar/components/FriendsSidebar.vue b/src/views/Sidebar/components/FriendsSidebar.vue
index 4ad369ee..e59a1e94 100644
--- a/src/views/Sidebar/components/FriendsSidebar.vue
+++ b/src/views/Sidebar/components/FriendsSidebar.vue
@@ -36,10 +36,12 @@
                                             <div
                                                 class="relative inline-block flex-none size-9 mr-2.5"
                                                 :class="userStatusClass(currentUser)">
-                                                <img
-                                                    class="size-full rounded-full object-cover"
-                                                    :src="userImage(currentUser)"
-                                                    loading="lazy" />
+                                                <Avatar class="size-full rounded-full">
+                                                    <AvatarImage :src="userImage(currentUser)" class="object-cover" />
+                                                    <AvatarFallback>
+                                                        <User class="size-5 text-muted-foreground" />
+                                                    </AvatarFallback>
+                                                </Avatar>
                                             </div>
                                             <div class="flex-1 overflow-hidden h-9 flex flex-col justify-between">
                                                 <span
@@ -176,7 +178,7 @@
 
 <script setup>
     import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
-    import { ChevronDown } from 'lucide-vue-next';
+    import { ChevronDown, User } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
@@ -193,6 +195,7 @@
         ContextMenuSubTrigger,
         ContextMenuTrigger
     } from '../../../components/ui/context-menu';
+    import { Avatar, AvatarFallback, AvatarImage } from '../../../components/ui/avatar';
     import {
         useAdvancedSettingsStore,
         useAppearanceSettingsStore,
diff --git a/src/views/Sidebar/components/GroupsSidebar.vue b/src/views/Sidebar/components/GroupsSidebar.vue
index f4b56abb..aa35950d 100644
--- a/src/views/Sidebar/components/GroupsSidebar.vue
+++ b/src/views/Sidebar/components/GroupsSidebar.vue
@@ -37,10 +37,12 @@
                                             @click="showGroupDialog(item.row.ownerId)">
                                             <template v-if="item.row.isVisible">
                                                 <div class="relative inline-block flex-none size-9 mr-2.5">
-                                                    <img
-                                                        class="size-full rounded-full object-cover"
-                                                        :src="getSmallGroupIconUrl(item.row.iconUrl)"
-                                                        loading="lazy" />
+                                                    <Avatar class="size-9">
+                                                        <AvatarImage :src="getSmallGroupIconUrl(item.row.iconUrl)" class="object-cover" />
+                                                        <AvatarFallback>
+                                                            <Users class="size-4 text-muted-foreground" />
+                                                        </AvatarFallback>
+                                                    </Avatar>
                                                 </div>
                                                 <div class="flex-1 overflow-hidden">
                                                     <span class="block truncate font-medium leading-[18px]">
@@ -82,7 +84,8 @@
 
 <script setup>
     import { computed, nextTick, onMounted, ref, watch } from 'vue';
-    import { ChevronDown } from 'lucide-vue-next';
+    import { ChevronDown, Users } from 'lucide-vue-next';
+    import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
diff --git a/src/views/Sidebar/components/__tests__/FriendsSidebar.test.js b/src/views/Sidebar/components/__tests__/FriendsSidebar.test.js
index f5ba80e2..09ddd59a 100644
--- a/src/views/Sidebar/components/__tests__/FriendsSidebar.test.js
+++ b/src/views/Sidebar/components/__tests__/FriendsSidebar.test.js
@@ -206,7 +206,8 @@ vi.mock('../FriendItem.vue', () => ({
 }));
 
 vi.mock('lucide-vue-next', () => ({
-    ChevronDown: { template: '<span data-testid="chevron" />' }
+    ChevronDown: { template: '<span data-testid="chevron" />' },
+    User: { template: '<i />' }
 }));
 
 import FriendsSidebar from '../FriendsSidebar.vue';
diff --git a/src/views/Sidebar/components/__tests__/GroupsSidebar.test.js b/src/views/Sidebar/components/__tests__/GroupsSidebar.test.js
index 6f95789e..1b74dd5f 100644
--- a/src/views/Sidebar/components/__tests__/GroupsSidebar.test.js
+++ b/src/views/Sidebar/components/__tests__/GroupsSidebar.test.js
@@ -117,7 +117,8 @@ vi.mock('../../../../components/Location.vue', () => ({
 }));
 
 vi.mock('lucide-vue-next', () => ({
-    ChevronDown: { template: '<i />' }
+    ChevronDown: { template: '<i />' },
+    Users: { template: '<i />' }
 }));
 
 import GroupsSidebar from '../GroupsSidebar.vue';
diff --git a/src/views/Tools/components/GroupCalendarEventCard.vue b/src/views/Tools/components/GroupCalendarEventCard.vue
index 969845ed..6f8225fb 100644
--- a/src/views/Tools/components/GroupCalendarEventCard.vue
+++ b/src/views/Tools/components/GroupCalendarEventCard.vue
@@ -6,7 +6,10 @@
                 :class="cardClass"
                 @mouseenter="openEventPopover"
                 @mouseleave="scheduleCloseEventPopover">
-                <img :src="bannerUrl" @click="showFullscreenImageDialog(bannerUrl)" class="banner" />
+                <img v-if="!bannerError" :src="bannerUrl" @click="showFullscreenImageDialog(bannerUrl)" @error="bannerError = true" class="banner" />
+                <div v-else class="banner flex items-center justify-center bg-muted">
+                    <Image class="size-6 text-muted-foreground" />
+                </div>
                 <div class="event-content">
                     <div class="event-title">
                         <div v-if="showGroupName" class="event-group-name" @click="onGroupClick">
@@ -106,7 +109,7 @@
 </template>
 
 <script setup>
-    import { Calendar, Download, Share2, Star } from 'lucide-vue-next';
+    import { Calendar, Download, Image, Share2, Star } from 'lucide-vue-next';
     import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
     import { computed, ref } from 'vue';
     import { Button } from '@/components/ui/button';
@@ -162,6 +165,8 @@
         }
     });
 
+    const bannerError = ref(false);
+
     const groupName = computed(() => {
         if (!props.event) return '';
         return cachedGroups.get(props.event.ownerId)?.name || '';