diff --git a/apps/app-frontend/src/routes.js b/apps/app-frontend/src/routes.js
index c12306b5ad..00f7268811 100644
--- a/apps/app-frontend/src/routes.js
+++ b/apps/app-frontend/src/routes.js
@@ -240,7 +240,7 @@ export default new createRouter({
 					component: Instance.Logs,
 					meta: {
 						useRootContext: true,
-						// renderMode: 'fixed',
+						renderMode: 'fixed',
 						breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Logs' }],
 					},
 				},
diff --git a/apps/app-frontend/src/store/theme.ts b/apps/app-frontend/src/store/theme.ts
index 0d5d0c9b3f..20b8aabc8e 100644
--- a/apps/app-frontend/src/store/theme.ts
+++ b/apps/app-frontend/src/store/theme.ts
@@ -1,5 +1,7 @@
 import { defineStore } from 'pinia'
 
+let systemThemeMq: MediaQueryList | null = null
+
 export const DEFAULT_FEATURE_FLAGS = {
 	project_background: false,
 	page_path: false,
@@ -49,21 +51,22 @@ export const useTheming = defineStore('themeStore', {
 			this.setThemeClass()
 		},
 		setThemeClass() {
+			const html = document.getElementsByTagName('html')[0]
 			for (const theme of THEME_OPTIONS) {
-				document.getElementsByTagName('html')[0].classList.remove(`${theme}-mode`)
+				html.classList.remove(`${theme}-mode`)
 			}
 
+			systemThemeMq?.removeEventListener('change', this.setThemeClass)
+			systemThemeMq = null
+
 			let theme = this.selectedTheme
 			if (this.selectedTheme === 'system') {
-				const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
-				if (darkThemeMq.matches) {
-					theme = 'dark'
-				} else {
-					theme = 'light'
-				}
+				systemThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
+				systemThemeMq.addEventListener('change', this.setThemeClass)
+				theme = systemThemeMq.matches ? 'dark' : 'light'
 			}
 
-			document.getElementsByTagName('html')[0].classList.add(`${theme}-mode`)
+			html.classList.add(`${theme}-mode`)
 		},
 		getFeatureFlag(key: FeatureFlag) {
 			return this.featureFlags[key] ?? DEFAULT_FEATURE_FLAGS[key]