diff --git a/packages/react-components/src/docs/components/Shadow/Shadow.tsx b/packages/react-components/src/docs/components/Shadow/Shadow.tsx
deleted file mode 100644
index d774529f0..000000000
--- a/packages/react-components/src/docs/components/Shadow/Shadow.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import * as React from 'react';
-
-import '../Table/Table.css';
-
-export const Shadow = (): React.ReactElement => {
-  return (
-    <div>
-      <table>
-        <tr>
-          <th className="enum-column">Enum</th>
-          <th className="first-column">Token</th>
-          <th className="second-column">Use case</th>
-        </tr>
-        <tr>
-          <td>ShadowToken.Float</td>
-          <td>--shadow-float</td>
-          <td>Cards, buttons, other elevated elements</td>
-        </tr>
-        <tr>
-          <td>ShadowToken.PopOver</td>
-          <td>--shadow-pop-over</td>
-          <td>Popovers</td>
-        </tr>
-        <tr>
-          <td>ShadowToken.Modal</td>
-          <td>--shadow-modal</td>
-          <td>Modals</td>
-        </tr>
-        <tr>
-          <td>ShadowToken.Tooltip</td>
-          <td>--shadow-tooltip</td>
-          <td>Tooltips</td>
-        </tr>
-        <tr>
-          <td>ShadowToken.TooltipArrowBottom</td>
-          <td>--shadow-tooltip-arrow-bottom</td>
-          <td>Tooltip arrow pointing down</td>
-        </tr>
-        <tr>
-          <td>ShadowToken.TooltipArrowTop</td>
-          <td>--shadow-tooltip-arrow-top</td>
-          <td>Tooltip arrow pointing up</td>
-        </tr>
-        <tr>
-          <td>ShadowToken.TooltipArrowRight</td>
-          <td>--shadow-tooltip-arrow-right</td>
-          <td>Tooltip arrow pointing right</td>
-        </tr>
-        <tr>
-          <td>ShadowToken.TooltipArrowLeft</td>
-          <td>--shadow-tooltip-arrow-left</td>
-          <td>Tooltip arrow pointing left</td>
-        </tr>
-        <tr>
-          <td>ShadowToken.Focus</td>
-          <td>--shadow-focus</td>
-          <td>Focus indicators</td>
-        </tr>
-        <tr>
-          <td>ShadowToken.DividerBottom</td>
-          <td>--shadow-divider-bottom</td>
-          <td>Separator on bottom of the element</td>
-        </tr>
-        <tr>
-          <td>ShadowToken.DividerTop</td>
-          <td>--shadow-divider-top</td>
-          <td>Separator on top of the element</td>
-        </tr>
-        <tr>
-          <td>ShadowToken.DividerBottomLeft</td>
-          <td>--shadow-divider-bottom-left</td>
-          <td>Separator on bottom left of the element</td>
-        </tr>
-        <tr>
-          <td>ShadowToken.DividerTopLeft</td>
-          <td>--shadow-divider-top-left</td>
-          <td>Separator on top left of the element</td>
-        </tr>
-        <tr>
-          <td>ShadowToken.DividerTopRight</td>
-          <td>--shadow-divider-top-right</td>
-          <td>Separator on top right of the element</td>
-        </tr>
-        <tr>
-          <td>ShadowToken.DividerBottomRight</td>
-          <td>--shadow-divider-bottom-right</td>
-          <td>Separator on bottom right of the element</td>
-        </tr>
-        <tr>
-          <td>ShadowToken.MessageBox</td>
-          <td>--shadow-message-box</td>
-          <td>Message boxes</td>
-        </tr>
-      </table>
-    </div>
-  );
-};
diff --git a/packages/react-components/src/docs/components/Shadow/ShadowExamples.module.scss b/packages/react-components/src/docs/components/Shadow/ShadowExamples.module.scss
deleted file mode 100644
index 15fb40587..000000000
--- a/packages/react-components/src/docs/components/Shadow/ShadowExamples.module.scss
+++ /dev/null
@@ -1,82 +0,0 @@
-.example-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-4);
-  width: 64px;
-  height: 64px;
-}
-
-.example-wrapped {
-  border-radius: var(--radius-4);
-  background: var(--surface-primary-active-colored);
-  width: 50px;
-  height: 50px;
-}
-
-.div {
-  &--float {
-    box-shadow: var(--shadow-float);
-  }
-
-  &--pop-over {
-    box-shadow: var(--shadow-pop-over);
-  }
-
-  &--modal {
-    box-shadow: var(--shadow-modal);
-  }
-
-  &--tooltip {
-    box-shadow: var(--shadow-tooltip);
-  }
-
-  &--tooltip-arrow-bottom {
-    box-shadow: var(--shadow-tooltip-arrow-bottom);
-  }
-
-  &--tooltip-arrow-top {
-    box-shadow: var(--shadow-tooltip-arrow-top);
-  }
-
-  &--tooltip-arrow-right {
-    box-shadow: var(--shadow-tooltip-arrow-right);
-  }
-
-  &--tooltip-arrow-left {
-    box-shadow: var(--shadow-tooltip-arrow-left);
-  }
-
-  &--focus {
-    box-shadow: var(--shadow-focus);
-  }
-
-  &--divider-bottom {
-    box-shadow: var(--shadow-divider-bottom);
-  }
-
-  &--divider-top {
-    box-shadow: var(--shadow-divider-top);
-  }
-
-  &--divider-bottom-left {
-    box-shadow: var(--shadow-divider-bottom-left);
-  }
-
-  &--divider-top-left {
-    box-shadow: var(--shadow-divider-top-left);
-  }
-
-  &--divider-top-right {
-    box-shadow: var(--shadow-divider-top-right);
-  }
-
-  &--divider-bottom-right {
-    box-shadow: var(--shadow-divider-bottom-right);
-  }
-
-  &--message-box {
-    box-shadow: var(--shadow-message-box);
-  }
-}
diff --git a/packages/react-components/src/docs/components/Shadow/ShadowExamples.tsx b/packages/react-components/src/docs/components/Shadow/ShadowExamples.tsx
deleted file mode 100644
index 2970a5fa8..000000000
--- a/packages/react-components/src/docs/components/Shadow/ShadowExamples.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import * as React from 'react';
-
-import { StoryDescriptor } from '../StoryDescriptor';
-
-import styles from './ShadowExamples.module.scss';
-
-const baseClass = 'div';
-
-const Example = ({ name, token }: { name: string; token: string }) => {
-  return (
-    <StoryDescriptor title={name}>
-      <div className={styles['example-wrapper']}>
-        <div
-          className={`
-            ${styles['example-wrapped']}
-            ${styles[`${baseClass}--${token}`]}
-            `}
-        ></div>
-      </div>
-    </StoryDescriptor>
-  );
-};
-
-export const ShadowExamples = (): React.ReactElement => {
-  return (
-    <div>
-      <Example name="Float" token="float" />
-      <Example name="PopOver" token="pop-over" />
-      <Example name="Modal" token="modal" />
-      <Example name="Tooltip" token="tooltip" />
-      <Example name="TooltipArrowBottom" token="tooltip-arrow-bottom" />
-      <Example name="TooltipArrowTop" token="tooltip-arrow-top" />
-      <Example name="TooltipArrowRight" token="tooltip-arrow-right" />
-      <Example name="TooltipArrowLeft" token="tooltip-arrow-left" />
-      <Example name="Focus" token="focus" />
-      <Example name="DividerBottom" token="divider-bottom" />
-      <Example name="DividerTop" token="divider-top" />
-      <Example name="DividerBottomLeft" token="divider-bottom-left" />
-      <Example name="DividerTopLeft" token="divider-top-left" />
-      <Example name="DividerTopRight" token="divider-top-right" />
-      <Example name="DividerBottomRight" token="divider-bottom-right" />
-      <Example name="MessageBox" token="message-box" />
-    </div>
-  );
-};
diff --git a/packages/react-components/src/docs/components/Table/Table.css b/packages/react-components/src/docs/components/Table/Table.css
index aeb8cc04d..61bff9ded 100644
--- a/packages/react-components/src/docs/components/Table/Table.css
+++ b/packages/react-components/src/docs/components/Table/Table.css
@@ -45,3 +45,10 @@ table tr:not(:last-of-type) td {
   width: 32px;
   height: 32px;
 }
+
+.shadow-example {
+  border-radius: var(--radius-4);
+  background: var(--surface-primary-default);
+  width: 48px;
+  height: 48px;
+}
diff --git a/packages/react-components/src/docs/foundations/Color/Color.stories.mdx b/packages/react-components/src/docs/foundations/Color/Color.stories.mdx
index 012127075..fa617d87f 100644
--- a/packages/react-components/src/docs/foundations/Color/Color.stories.mdx
+++ b/packages/react-components/src/docs/foundations/Color/Color.stories.mdx
@@ -16,7 +16,13 @@ To use color tokens in your project, you need to import the `DesignToken` consta
 import { DesignToken } from '@livechat/design-system-react-components';
 ```
 
-<hr />
+`DesignToken` contains all the color tokens available in the design system. You can use them in your project by using the `var()` function in CSS:
+
+```css
+.my-element {
+  background-color: var(DesignToken.SurfaceBasicSubtle);
+}
+```
 
 ## Content
 
diff --git a/packages/react-components/src/docs/foundations/Shadow/Shadow.stories.mdx b/packages/react-components/src/docs/foundations/Shadow/Shadow.stories.mdx
index dcd3e960c..3b3976502 100644
--- a/packages/react-components/src/docs/foundations/Shadow/Shadow.stories.mdx
+++ b/packages/react-components/src/docs/foundations/Shadow/Shadow.stories.mdx
@@ -1,6 +1,6 @@
-import { Meta, Canvas } from '@storybook/addon-docs';
-import { Shadow } from '../../components/Shadow/Shadow';
-import { ShadowExamples } from '../../components/Shadow/ShadowExamples';
+import { Meta } from '@storybook/addon-docs';
+import { ShadowTable } from './ShadowTable';
+import { ShadowTokens } from './constants';
 
 <Meta title="Foundations/Shadow" />
 
@@ -8,22 +8,22 @@ import { ShadowExamples } from '../../components/Shadow/ShadowExamples';
 
 Shadows tokens in a design system add depth for a polished look and establishing hierarchy and predictability in user interface.
 
-<Canvas
-  style={{
-    color: 'var(--content-default)',
-    backgroundColor: 'var(--background)',
-  }}
->
-  <Shadow />
-</Canvas>
-
-## Examples
-
-<Canvas
-  style={{
-    color: 'var(--content-default)',
-    backgroundColor: 'var(--background)',
-  }}
->
-  <ShadowExamples />
-</Canvas>
+## Usage
+
+To use shadow tokens in your project, you need to import the `ShadowToken` constant from `@livechat/design-system-react-components`:
+
+```jsx
+import { ShadowToken } from '@livechat/design-system-react-components';
+```
+
+`ShadowToken` contains all the shadow tokens available in the design system. You can use them in your project by using the `var()` function in CSS:
+
+```css
+.my-element {
+  box-shadow: var(${ShadowToken.PopOver});
+}
+```
+
+## Tokens
+
+<ShadowTable data={ShadowTokens} />
diff --git a/packages/react-components/src/docs/foundations/Shadow/ShadowTable.tsx b/packages/react-components/src/docs/foundations/Shadow/ShadowTable.tsx
index 6ebb02125..9d05dc1ad 100644
--- a/packages/react-components/src/docs/foundations/Shadow/ShadowTable.tsx
+++ b/packages/react-components/src/docs/foundations/Shadow/ShadowTable.tsx
@@ -25,8 +25,8 @@ export const ShadowTable: React.FC<IColorTableProps> = ({ data }) => {
           <tr>
             <td onClick={() => handleCopyText(shadow.enum)}>
               <div
-                className="color-example"
-                style={{ backgroundColor: `var(${shadow.value})` }}
+                className="shadow-example"
+                style={{ boxShadow: `var(${shadow.value})` }}
               />
               {shadow.enum}
             </td>
diff --git a/packages/react-components/src/docs/foundations/Shadow/constants.ts b/packages/react-components/src/docs/foundations/Shadow/constants.ts
index 70ff221fb..2f143bc0b 100644
--- a/packages/react-components/src/docs/foundations/Shadow/constants.ts
+++ b/packages/react-components/src/docs/foundations/Shadow/constants.ts
@@ -2,14 +2,6 @@ import { ShadowToken, ShadowTokenKey } from '../../../foundations/shadow-token';
 
 import { ShadowShape } from './types';
 
-export const ShadowTokens: ShadowShape[] = Object.entries(ShadowToken).map(
-  ([key, value]) => ({
-    enum: key,
-    value,
-    desc: ShadowDescription[key as ShadowTokenKey],
-  })
-);
-
 const ShadowDescription: Record<ShadowTokenKey, string> = {
   Float: 'Float sample description',
   PopOver: 'PopOver sample description',
@@ -29,3 +21,11 @@ const ShadowDescription: Record<ShadowTokenKey, string> = {
   DividerBottomRight: 'DividerBottomRight sample description',
   MessageBox: 'MessageBox sample description',
 };
+
+export const ShadowTokens: ShadowShape[] = Object.entries(ShadowToken).map(
+  ([key, value]) => ({
+    enum: key as ShadowTokenKey,
+    value,
+    desc: ShadowDescription[key as ShadowTokenKey],
+  })
+);