diff --git a/frontend/src/AppContent.vue b/frontend/src/AppContent.vue
index 3521a3f..88a1245 100644
--- a/frontend/src/AppContent.vue
+++ b/frontend/src/AppContent.vue
@@ -54,42 +54,38 @@ watch(
     },
 )
 
-const border = computed(() => {
-    return isMacOS() ? 'none' : `1px solid ${themeVars.value.borderColor}`
-})
-
 const logoWrapperWidth = computed(() => {
     return `${data.navMenuWidth + prefStore.behavior.asideWidth - 4}px`
 })
 
-const borderRadius = ref(10)
 const logoPaddingLeft = ref(10)
 const maximised = ref(false)
-const toggleWindowRadius = (on) => {
-    borderRadius.value = on ? 10 : 0
-}
+const hideRadius = ref(false)
+const wrapperStyle = computed(() => {
+    return hideRadius.value
+        ? {}
+        : {
+              border: `1px solid ${themeVars.value.borderColor}`,
+              borderRadius: '10px',
+          }
+})
 
 const onToggleFullscreen = (fullscreen) => {
+    hideRadius.value = fullscreen
     if (fullscreen) {
         logoPaddingLeft.value = 10
-        toggleWindowRadius(false)
     } else {
         logoPaddingLeft.value = isMacOS() ? 70 : 10
-        toggleWindowRadius(true)
     }
 }
 
 const onToggleMaximize = (isMaximised) => {
     if (isMaximised) {
         maximised.value = true
-        if (!isMacOS()) {
-            toggleWindowRadius(false)
-        }
+        hideRadius.value = isMacOS()
     } else {
         maximised.value = false
-        if (!isMacOS()) {
-            toggleWindowRadius(true)
-        }
+        hideRadius.value = !isMacOS()
     }
 }
 
@@ -111,9 +107,9 @@ onMounted(async () => {
     <!-- app content-->
     <n-spin
         :show="props.loading"
-        :style="{ borderRadius: `${borderRadius}px`, border }"
-        :theme-overrides="{ opacitySpinning: 0 }">
-        <div id="app-content-wrapper" :style="{ color: themeVars.textColorBase }" class="flex-box-v">
+        :theme-overrides="{ opacitySpinning: 0 }"
+        :style="{ backgroundColor: themeVars.bodyColor }">
+        <div id="app-content-wrapper" :style="wrapperStyle" class="flex-box-v">
             <!-- title bar -->
             <div
                 id="app-toolbar"
@@ -209,8 +205,8 @@ onMounted(async () => {
     height: 100vh;
     overflow: hidden;
     box-sizing: border-box;
-    border-radius: 8px;
     background-color: v-bind('themeVars.bodyColor');
+    color: v-bind('themeVars.textColorBase');
 
     #app-toolbar {
         background-color: v-bind('exThemeVars.titleColor');
diff --git a/frontend/src/utils/extra_theme.js b/frontend/src/utils/extra_theme.js
index 2ef34d2..ad26ec3 100644
--- a/frontend/src/utils/extra_theme.js
+++ b/frontend/src/utils/extra_theme.js
@@ -10,9 +10,9 @@
  * @type ExtraTheme
  */
 export const extraLightTheme = {
-    titleColor: '#F0F0F4',
-    sidebarColor: '#F6F6F6',
-    splitColor: '#E0E0E6',
+    titleColor: '#F2F2F2',
+    sidebarColor: '#E9E9E9',
+    splitColor: '#DADADA',
 }
 
 /**
@@ -20,9 +20,9 @@ export const extraLightTheme = {
  * @type ExtraTheme
  */
 export const extraDarkTheme = {
-    titleColor: '#202020',
-    sidebarColor: '#202124',
-    splitColor: '#323138',
+    titleColor: '#363636',
+    sidebarColor: '#262626',
+    splitColor: '#474747',
 }
 
 /**
diff --git a/frontend/src/utils/theme.js b/frontend/src/utils/theme.js
index 6310276..f4532fb 100644
--- a/frontend/src/utils/theme.js
+++ b/frontend/src/utils/theme.js
@@ -54,15 +54,19 @@ export const themeOverrides = {
  */
 const _darkThemeOverrides = {
     common: {
-        bodyColor: '#1A1A1A',
-        tabColor: '#18181C',
+        bodyColor: '#1E1E1E',
+        tabColor: '#1E1E1E',
+        borderColor: '#515151',
     },
     Tree: {
-        nodeTextColor: '#ceced0',
+        nodeTextColor: '#CECED0',
     },
     Card: {
         colorEmbedded: '#18181C',
     },
+    Dropdown: {
+        color: '#272727',
+    },
 }
 
 export const darkThemeOverrides = merge({}, themeOverrides, _darkThemeOverrides)