diff --git a/frontend/src/Components/Tooltip/Tooltip.css b/frontend/src/Components/Tooltip/Tooltip.css
index 82c80752a..3921a4de2 100644
--- a/frontend/src/Components/Tooltip/Tooltip.css
+++ b/frontend/src/Components/Tooltip/Tooltip.css
@@ -7,7 +7,7 @@
   position: relative;
 
   &.default {
-    background-color: var(--white);
+    background-color: var(--popoverBodyBackgroundColor);
     box-shadow: 0 5px 10px var(--popoverShadowColor);
   }
 
diff --git a/frontend/src/Styles/Themes/dark.js b/frontend/src/Styles/Themes/dark.js
index 0bbb9e3ca..cc013da48 100644
--- a/frontend/src/Styles/Themes/dark.js
+++ b/frontend/src/Styles/Themes/dark.js
@@ -168,10 +168,11 @@ module.exports = {
   //
   // Popover
 
-  popoverTitleBackgroundColor: '#f7f7f7',
-  popoverTitleBorderColor: '#ebebeb',
+  popoverTitleBackgroundColor: '#424242',
+  popoverTitleBorderColor: '#2a2a2a',
+  popoverBodyBackgroundColor: '#2a2a2a',
   popoverShadowColor: 'rgba(0, 0, 0, 0.2)',
-  popoverArrowBorderColor: '#fff',
+  popoverArrowBorderColor: '#2a2a2a',
 
   popoverTitleBackgroundInverseColor: '#595959',
   popoverTitleBorderInverseColor: '#707070',
diff --git a/frontend/src/Styles/Themes/light.js b/frontend/src/Styles/Themes/light.js
index e48bcd40c..e3c5a753f 100644
--- a/frontend/src/Styles/Themes/light.js
+++ b/frontend/src/Styles/Themes/light.js
@@ -170,6 +170,7 @@ module.exports = {
 
   popoverTitleBackgroundColor: '#f7f7f7',
   popoverTitleBorderColor: '#ebebeb',
+  popoverBodyBackgroundColor: '#e9e9e9',
   popoverShadowColor: 'rgba(0, 0, 0, 0.2)',
   popoverArrowBorderColor: '#fff',