diff --git a/themes/tippy.js/dist/theme.css b/themes/tippy.js/dist/theme.css
index 24634acf1..749c71c36 100644
--- a/themes/tippy.js/dist/theme.css
+++ b/themes/tippy.js/dist/theme.css
@@ -1,23 +1,15 @@
 .tippy-box[data-theme~=finastra] {
-  background: var(--fds-primary, #694ED6);
+  background-color: rgba(0, 0, 0, 0.54);
+  color: var(--fds-text-high-on-dark, white);
 }
-.tippy-box[data-theme~=finastra][data-placement^=top] > .tippy-arrow::before {
-  border-top-color: var(--fds-primary, #694ED6);
+.tippy-box[data-theme~=finastra] .tippy-arrow::before {
+  display: none;
 }
-.tippy-box[data-theme~=finastra][data-placement^=bottom] > .tippy-arrow::before {
-  border-bottom-color: var(--fds-primary, #694ED6);
+.tippy-box[data-theme~=finastra] > .tippy-box-backdrop {
+  background-color: rgba(0, 0, 0, 0.54);
 }
-.tippy-box[data-theme~=finastra][data-placement^=left] > .tippy-arrow::before {
-  border-left-color: var(--fds-primary, #694ED6);
-}
-.tippy-box[data-theme~=finastra][data-placement^=right] > .tippy-arrow::before {
-  border-right-color: var(--fds-primary, #694ED6);
-}
-.tippy-box[data-theme~=finastra] > .tippy-backdrop {
-  background: var(--fds-primary, #694ED6);
-}
-.tippy-box[data-theme~=finastra] > .tippy-svg-arrow {
-  fill: var(--fds-primary, #694ED6);
+.tippy-box[data-theme~=finastra] > .tippy-box-svg-arrow {
+  fill: transparent;
 }
 
 /*# sourceMappingURL=theme.css.map */
diff --git a/themes/tippy.js/dist/theme.css.map b/themes/tippy.js/dist/theme.css.map
index 4f1e9968a..599f3b94f 100644
--- a/themes/tippy.js/dist/theme.css.map
+++ b/themes/tippy.js/dist/theme.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../theme.scss","../node_modules/@finastra/fds-theme/color/_mixins.scss"],"names":[],"mappings":"AAIA;ECiHE;;AD9GE;EC8GF;;AD1GE;EC0GF;;ADtGE;ECsGF;;ADlGE;ECkGF;;AD9FE;EC8FF;;AD1FE;EC0FF","file":"theme.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../theme.scss","../node_modules/@finastra/fds-theme/color/_mixins.scss"],"names":[],"mappings":"AAIA;EACE,kBAHM;EC2EJ;;ADrEF;EACE;;AAGF;EACE,kBAXI;;AAcN;EACE","file":"theme.css"}
\ No newline at end of file
diff --git a/themes/tippy.js/theme.scss b/themes/tippy.js/theme.scss
index 198c49f24..67d8c6d9c 100644
--- a/themes/tippy.js/theme.scss
+++ b/themes/tippy.js/theme.scss
@@ -1,31 +1,20 @@
 @use '@finastra/fds-theme' as fds;
 
-$color: primary;
+$color: rgba(0,0,0,0.54);
 
 .tippy-box[data-theme~='finastra'] {
-    @include fds.bg-color($color);
-  
-    &[data-placement^='top'] > .tippy-arrow::before {
-      @include fds.property(border-top-color, $color);
-    }
-  
-    &[data-placement^='bottom'] > .tippy-arrow::before {
-      @include fds.property(border-bottom-color, $color);
-    }
-  
-    &[data-placement^='left'] > .tippy-arrow::before {
-      @include fds.property(border-left-color, $color);
-    }
-  
-    &[data-placement^='right'] > .tippy-arrow::before {
-      @include fds.property(border-right-color, $color);
-    }
-  
-    > .tippy-backdrop {
-        @include fds.bg-color($color);
-    }
-  
-    > .tippy-svg-arrow {
-        @include fds.fill($color);
-    }
-  }
\ No newline at end of file
+  background-color: $color;
+  @include fds.text-color(text-high-on-dark);
+
+  .tippy-arrow::before {
+    display: none;
+  }
+
+  > .tippy-box-backdrop {
+    background-color: $color;
+  }
+
+  > .tippy-box-svg-arrow {
+    fill: transparent;
+  }
+}
\ No newline at end of file