diff --git a/packages/web-pkg/src/composables/piniaStores/theme.ts b/packages/web-pkg/src/composables/piniaStores/theme.ts
index 08a8096a1b..f457435851 100644
--- a/packages/web-pkg/src/composables/piniaStores/theme.ts
+++ b/packages/web-pkg/src/composables/piniaStores/theme.ts
@@ -11,6 +11,7 @@ const CommonSection = z.object({
   name: z.string().optional(),
   slogan: z.string().optional(),
   logo: z.string().optional(),
+  logoMobile: z.string().optional(),
   urls: z
     .object({
       accessDeniedHelp: z.string().optional(),
diff --git a/packages/web-runtime/src/components/Topbar/TopBar.vue b/packages/web-runtime/src/components/Topbar/TopBar.vue
index c4e3301f34..13702ea157 100644
--- a/packages/web-runtime/src/components/Topbar/TopBar.vue
+++ b/packages/web-runtime/src/components/Topbar/TopBar.vue
@@ -14,11 +14,17 @@
         :menu-items="appMenuExtensions"
       />
       <router-link v-if="!hideLogo" :to="homeLink" class="w-full oc-logo-href">
-        <oc-image
-          :src="currentTheme.logo"
-          :alt="sidebarLogoAlt"
-          class="oc-logo-image align-middle ml-1 max-h-[26px] select-none"
-        />
+        <picture>
+          <source
+            :srcset="currentTheme.logoMobile || currentTheme.logo"
+            media="(max-width: 959px)"
+          />
+          <oc-image
+            :src="currentTheme.logo"
+            :alt="sidebarLogoAlt"
+            class="oc-logo-image align-middle ml-1 max-h-[26px] select-none"
+          />
+        </picture>
       </router-link>
     </div>
     <div v-if="!contentOnLeftPortal" class="flex justify-end sm:justify-center col-2">