diff --git a/ui/src/app/shared/components/layout/layout.tsx b/ui/src/app/shared/components/layout/layout.tsx
index dcf98dde565eb..9cb3ce1d39959 100644
--- a/ui/src/app/shared/components/layout/layout.tsx
+++ b/ui/src/app/shared/components/layout/layout.tsx
@@ -14,14 +14,16 @@ export interface LayoutProps {
 
 const getBGColor = (theme: string): string => (theme === 'light' ? '#dee6eb' : '#100f0f');
 
-export const Layout = (props: LayoutProps) => (
-    <div className={props.pref.theme ? 'theme-' + props.pref.theme : 'theme-light'}>
+export const Layout = (props: LayoutProps) => {
+    if (props.pref.theme) {
+        document.body.style.background = getBGColor(props.pref.theme)
+    }
+    return <div className={props.pref.theme ? 'theme-' + props.pref.theme : 'theme-light'}>
         <div className={`cd-layout ${props.isExtension ? 'cd-layout--extension' : ''}`}>
             <Sidebar onVersionClick={props.onVersionClick} navItems={props.navItems} pref={props.pref} />
-            {props.pref.theme ? (document.body.style.background = getBGColor(props.pref.theme)) : null}
             <div className={`cd-layout__content ${props.pref.hideSidebar ? 'cd-layout__content--sb-collapsed' : 'cd-layout__content--sb-expanded'} custom-styles`}>
                 {props.children}
             </div>
         </div>
     </div>
-);
+}