diff --git a/src/custom/CustomTooltip/customTooltip.tsx b/src/custom/CustomTooltip/customTooltip.tsx
index 8668767f..ac5f4c52 100644
--- a/src/custom/CustomTooltip/customTooltip.tsx
+++ b/src/custom/CustomTooltip/customTooltip.tsx
@@ -1,6 +1,6 @@
 import { Tooltip, type TooltipProps } from '@mui/material';
 import React from 'react';
-import { CHARCOAL, WHITE } from '../../theme';
+import { WHITE } from '../../theme';
 import { RenderMarkdownTooltip } from '../Markdown';
 
 type CustomTooltipProps = {
@@ -21,7 +21,7 @@ function CustomTooltip({
   fontSize,
   fontWeight = 400,
   variant = 'standard',
-  bgColor = CHARCOAL,
+  bgColor = '#333333',
   ...props
 }: CustomTooltipProps): JSX.Element {
   return (
@@ -42,6 +42,11 @@ function CustomTooltip({
             zIndex: 9999999999,
             opacity: '1'
           }
+        },
+        arrow: {
+          sx: {
+            color: bgColor
+          }
         }
       }}
       title={typeof title === 'string' ? <RenderMarkdownTooltip content={title} /> : title}