diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx
index eb9c0cc..2a5a5bf 100644
--- a/src/components/Tooltip/index.tsx
+++ b/src/components/Tooltip/index.tsx
@@ -1,10 +1,10 @@
-import { ReactNode, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { usePopper } from "react-popper";
 import * as PopperJS from "@popperjs/core";
 import { Box, Flex } from "../Box";
 import { Portal } from "@reach/portal";
-import { ITooltipProps } from './types';
-import { Arrow, TooltipContainer } from './styles'
+import { ITooltipProps } from "./types";
+import { Arrow, TooltipContainer } from "./styles";
 
 export default function ({ content, children }: ITooltipProps) {
   const activatorElement = useRef<HTMLDivElement>(null);
diff --git a/src/components/Tooltip/styles.tsx b/src/components/Tooltip/styles.tsx
index 00f443b..a496762 100644
--- a/src/components/Tooltip/styles.tsx
+++ b/src/components/Tooltip/styles.tsx
@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import { transparentize } from "polished";
 
 export const Arrow = styled.div`
   width: 8px;
@@ -12,7 +11,7 @@ export const Arrow = styled.div`
     box-sizing: border-box;
     content: "";
     transform: rotate(45deg);
-    background: ${({ theme }) => theme.colors.strokeGray};
+    background: ${({ theme }) => theme.colors.darkBg};
   }
 
   &.arrow-top {
@@ -39,14 +38,14 @@ export const TooltipContainer = styled.div<{ show: boolean }>`
   transition: visibility 150ms linear, opacity 150ms linear;
   max-width: 256px;
   cursor: default;
-  padding: 0.6rem 1rem;
-  color: ${({ theme }) => theme.colors.white};
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
+  padding: 6px 8px;
+  color: ${({ theme }) => theme.colors.darkGray};
+
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 18px;
+
   word-break: break-word;
-  background: ${({ theme }) => theme.colors.strokeGray};
-  border: 1px solid ${({ theme }) => theme.colors.darkGray};
-  border-radius: 12px;
-  box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.9, theme.colors.white)};
-`;
\ No newline at end of file
+  background: ${({ theme }) => theme.colors.darkBg};
+  border-radius: 8px;
+`;
diff --git a/src/theme/colors.ts b/src/theme/colors.ts
index 3570af5..8414ea1 100644
--- a/src/theme/colors.ts
+++ b/src/theme/colors.ts
@@ -8,6 +8,7 @@ export const colors: ThemeColors = {
   shadowLight: "#a9b6bf",
   shadowDark: "#2d3643",
   strokeGray: "#616971",
+  darkBg: "#1d2128",
   darkGray: "#7b8187",
   lightTextGray: "#3c454e",
   primaryDefault: "#5d93b2",
diff --git a/src/theme/types.ts b/src/theme/types.ts
index 481386f..1308b31 100644
--- a/src/theme/types.ts
+++ b/src/theme/types.ts
@@ -5,6 +5,7 @@ export type ThemeColors = {
   shadowLight: string;
   shadowDark: string;
   strokeGray: string;
+  darkBg: string;
   darkGray: string;
   lightTextGray: string;
   primaryDefault: string;