diff --git a/src/app.css b/src/app.css
index 8e0dbd41..4740d1b2 100644
--- a/src/app.css
+++ b/src/app.css
@@ -384,6 +384,20 @@ html.dark,
     }
 }
 
+:root[data-theme='darkgrey'] {
+    --el-bg-color: var(--color-neutral-900);
+    --el-bg-color-page: var(--color-neutral-900);
+    --el-bg-color-overlay: var(--color-neutral-800);
+
+    .el-dialog {
+        background-color: var(--el-bg-color-overlay) !important;
+    }
+
+    .el-message-box {
+        background-color: var(--el-bg-color-overlay) !important;
+    }
+}
+
 html.dark body,
 :root.dark body,
 :root[data-theme='dark'] body {
@@ -400,8 +414,8 @@ html.dark body,
         ),
         linear-gradient(
             180deg,
-            color-mix(in oklch, var(--color-neutral-950) 92%, transparent),
-            var(--color-neutral-950)
+            color-mix(in oklch, var(--el-bg-color-page) 92%, transparent),
+            var(--el-bg-color-page)
         );
 }
 
diff --git a/src/localization/en.json b/src/localization/en.json
index 96f26b62..fec70ff2 100644
--- a/src/localization/en.json
+++ b/src/localization/en.json
@@ -551,6 +551,7 @@
                     "theme_mode_system": "System",
                     "theme_mode_light": "Light",
                     "theme_mode_dark": "Dark",
+                    "theme_mode_darkgrey": "Dark Grey",
                     "theme_mode_blue": "Blue",
                     "theme_mode_darkblue": "Dark Blue",
                     "theme_mode_amoled": "Amoled",
diff --git a/src/shared/constants/themes.js b/src/shared/constants/themes.js
index 78a72fe9..7e4cb1e5 100644
--- a/src/shared/constants/themes.js
+++ b/src/shared/constants/themes.js
@@ -19,6 +19,12 @@ export const THEME_CONFIG = {
         isDark: true,
         useDarkClass: true,
         name: 'Dark'
+    },
+    darkgrey: {
+        cssFiles: [appCss],
+        isDark: true,
+        useDarkClass: true,
+        name: 'Dark Grey'
     }
     // darkold: {
     //     cssFiles: [appLegacy, dark],
diff --git a/src/shared/utils/base/ui.js b/src/shared/utils/base/ui.js
index e93f16bc..13a7048b 100644
--- a/src/shared/utils/base/ui.js
+++ b/src/shared/utils/base/ui.js
@@ -107,6 +107,8 @@ function changeAppThemeStyle(themeMode) {
 
     applyThemeFonts(themeMode, themeConfig.fontLinks);
 
+    document.documentElement.setAttribute('data-theme', themeMode);
+
     const shouldUseDarkClass =
         typeof themeConfig.useDarkClass === 'boolean'
             ? themeConfig.useDarkClass
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 251e6686..9e69d82d 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -126,6 +126,12 @@
     }
 }
 
+[data-slot='table-header'],
+[data-slot='table-header'] [data-slot='table-row'],
+[data-slot='table-head'] {
+    background-color: transparent;
+}
+
 .lucide {
     width: 16px;
     height: 16px;
diff --git a/src/views/FriendsLocations/components/FriendsLocationsCard.vue b/src/views/FriendsLocations/components/FriendsLocationsCard.vue
index 2206eaa6..cd4aabe1 100644
--- a/src/views/FriendsLocations/components/FriendsLocationsCard.vue
+++ b/src/views/FriendsLocations/components/FriendsLocationsCard.vue
@@ -195,7 +195,6 @@
         min-height: calc(40px * var(--card-scale));
         padding: calc(6px * var(--card-scale)) calc(10px * var(--card-scale));
         border-radius: calc(10px * var(--card-scale));
-        background: var(--el-fill-color);
         color: var(--el-text-color-regular);
         font-size: calc(12px * var(--card-scale));
         line-height: 1.3;