diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less
index 57d0a84f7..dfaf6e5b9 100644
--- a/customize.dist/src/less2/include/colortheme.less
+++ b/customize.dist/src/less2/include/colortheme.less
@@ -167,6 +167,7 @@
 
 @cryptpad_color_blue: #4591C4;
 @cryptpad_color_grey: #999999;
+@cryptpad_color_light_grey: #e0e0e0; 
 @cryptpad_header_col: #1E1F1F;
 @cryptpad_text_col: #3F4141;
 @cryptpad_color_light_blue: #00b7d8;
diff --git a/customize.dist/src/less2/include/tippy.less b/customize.dist/src/less2/include/tippy.less
index 794159ba7..48af41fda 100644
--- a/customize.dist/src/less2/include/tippy.less
+++ b/customize.dist/src/less2/include/tippy.less
@@ -6,13 +6,29 @@
 & {
     .tippy-tooltip.cryptpad-theme {
         /* Your styling here. Example: */
-        background-color: white;
-        box-shadow: 2px 2px 10px #000;
-        font-weight: bold;
+        background-color: @cryptpad_color_light_grey;
+        border-radius: 0px;
+        // box-shadow: 2px 2px 10px #000;
+        // font-weight: bold;
         color: #333;
         overflow-wrap: break-word;
         [x-circle] {
             background-color: unset;
         }
     }
+    .tippy-popper {
+        @arrow-color:@cryptpad_color_light_grey;
+        &[x-placement^='top'] .tippy-arrow {
+          border-top-color: @arrow-color;
+        }
+        &[x-placement^='bottom'] .tippy-arrow {
+          border-bottom-color: @arrow-color;
+        }
+        &[x-placement^='left'] .tippy-arrow {
+          border-left-color: @arrow-color;
+        }
+        &[x-placement^='right'] .tippy-arrow {
+          border-right-color: @arrow-color;
+        }
+    }
 }