diff --git a/src/assets/images/illustrations/theme-dark.png b/src/assets/images/illustrations/theme-dark.png
new file mode 100644
index 0000000000..e5712ee1c6
Binary files /dev/null and b/src/assets/images/illustrations/theme-dark.png differ
diff --git a/src/assets/images/illustrations/theme-light.png b/src/assets/images/illustrations/theme-light.png
new file mode 100644
index 0000000000..37443b3a14
Binary files /dev/null and b/src/assets/images/illustrations/theme-light.png differ
diff --git a/src/components/Settings/SettingsAppearance/SettingsAppearanceTheme.vue b/src/components/Settings/SettingsAppearance/SettingsAppearanceTheme.vue
index 30e3e949cd..428d1e2a39 100644
--- a/src/components/Settings/SettingsAppearance/SettingsAppearanceTheme.vue
+++ b/src/components/Settings/SettingsAppearance/SettingsAppearanceTheme.vue
@@ -28,7 +28,7 @@ const imageClassList = computed(() => {
       <phosphor-icon :name="icon" />
       <span class="text-nowrap">{{ label }}</span></span
     >
-    <image-mode :image-class="imageClassList">
+    <image-mode :image-class="imageClassList" width="200px">
       <image-mode-source :src="thumbnail" />
     </image-mode>
   </div>
diff --git a/src/views/Settings/SettingsViewAppearance.vue b/src/views/Settings/SettingsViewAppearance.vue
index a31cd999bb..74cd14df7e 100644
--- a/src/views/Settings/SettingsViewAppearance.vue
+++ b/src/views/Settings/SettingsViewAppearance.vue
@@ -2,6 +2,8 @@
 import { useI18n } from 'vue-i18n'
 import { ref, onBeforeMount, computed, watch } from 'vue'
 
+import themeLight from '@/assets/images/illustrations/theme-light.png'
+import themeDark from '@/assets/images/illustrations/theme-dark.png'
 import SettingsAppearanceRadioGroup from '@/components/Settings/SettingsAppearance/SettingsAppearanceRadioGroup'
 import SettingsViewLayout from '@/views/Settings/SettingsViewLayout'
 
@@ -27,13 +29,13 @@ function retrieveThemes() {
       icon: 'sun',
       name: DEFAULT_THEME,
       label: 'Light mode',
-      thumbnail: 'https://placehold.co/169x95'
+      thumbnail: themeLight
     },
     {
       icon: 'moon',
       name: 'dark',
       label: 'Dark mode',
-      thumbnail: 'https://placehold.co/169x95'
+      thumbnail: themeDark
     }
   ]
 }