diff --git a/src/lib/box-styles.tsx b/src/lib/box-styles.tsx
index 52716796..3ea83e3b 100644
--- a/src/lib/box-styles.tsx
+++ b/src/lib/box-styles.tsx
@@ -19,6 +19,7 @@ export const Global = styled.div`
   --woly-border-width: 1.5px;
   --woly-rounding: 4px;
   --woly-font-size: 15px;
+  --woly-shadow: 3px 3px 9px rgba(57, 57, 57, 0.12);
 
   --woly-const-m: 6px;
   --woly-main-level: 3;
diff --git a/src/ui/atoms/header-panel/index.tsx b/src/ui/atoms/header-panel/index.tsx
index cd0dea34..b02ad0d7 100644
--- a/src/ui/atoms/header-panel/index.tsx
+++ b/src/ui/atoms/header-panel/index.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { StyledComponent } from 'styled-components';
 import { Variant } from 'lib/types';
 
 const map = (properties: Variant) => ({
@@ -17,12 +17,10 @@ export const HeaderPanel = styled.div.attrs(map)`
     var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical)
   );
 
-  --local-box-shadow: 3px 3px 9px rgba(57, 57, 57, 0.12);
-  
   padding: var(--local-vertical) var(--local-horizontal);
 
   background-color: var(--woly-background);
   border: var(--woly-border-width) solid var(--woly-background);
   border-radius: var(--woly-rounding);
-  box-shadow: var(--local-box-shadow);
-`;
+  box-shadow: var(--woly-shadow);
+` as StyledComponent<'div', Record<string, unknown>, Variant>;
diff --git a/src/ui/atoms/header-panel/usage.mdx b/src/ui/atoms/header-panel/usage.mdx
index a21125df..18b5b483 100644
--- a/src/ui/atoms/header-panel/usage.mdx
+++ b/src/ui/atoms/header-panel/usage.mdx
@@ -10,12 +10,15 @@ import { CloseIcon } from 'icons';
 
 `HeaderPanel` is a navigation component that displays information and actions relating to the current screen.
 
+### Example
+
 <Playground>
   <div style={{ marginBottom: '10px' }}>
     <HeaderPanel>Hello! It`s a HeaderPanel</HeaderPanel>
   </div>
 </Playground>
-### Example
+
+### Menu example
 
 <Playground>
   <State initial={false} change={(i) => !i}>
diff --git a/src/ui/atoms/tooltip/index.tsx b/src/ui/atoms/tooltip/index.tsx
index a432fb89..00f6acad 100644
--- a/src/ui/atoms/tooltip/index.tsx
+++ b/src/ui/atoms/tooltip/index.tsx
@@ -95,7 +95,7 @@ export const Tooltip = styled(TooltipBase)`
     z-index: 1;
     opacity: 0;
     cursor: pointer;
-    box-shadow: 3px 3px 9px rgba(57, 57, 57, 0.12);
+    box-shadow: var(--woly-shadow);
     width: max-content;
     min-width: 112px;
     max-width: 240px;
diff --git a/src/ui/molecules/select/index.tsx b/src/ui/molecules/select/index.tsx
index a51ab618..f83f21f7 100644
--- a/src/ui/molecules/select/index.tsx
+++ b/src/ui/molecules/select/index.tsx
@@ -186,7 +186,7 @@ export const Select = styled(SelectBase)`
     padding: 0;
     z-index: 1;
     margin-top: 6px;
-    box-shadow: 3px 3px 9px rgba(57, 57, 57, 0.12);
+    box-shadow: var(--woly-shadow);
   }
   ul[data-visible='true'] {
     display: flex;