diff --git a/src/components/Empty/Empty.stories.tsx b/src/components/Empty/Empty.stories.tsx
index 2873a4301..58f3e6706 100644
--- a/src/components/Empty/Empty.stories.tsx
+++ b/src/components/Empty/Empty.stories.tsx
@@ -44,6 +44,8 @@ export const Error_State = Empty_Story.bind({});
 export const Empty_Messages = Empty_Story.bind({});
 export const No_Search_Results = Empty_Story.bind({});
 export const Tasks_Complete = Empty_Story.bind({});
+export const Empty_Plan = Empty_Story.bind({});
+export const Empty_Profile = Empty_Story.bind({});
 export const Custom_Image = Empty_Story.bind({});
 
 const emptyArgs: Object = {
@@ -78,9 +80,25 @@ Tasks_Complete.args = {
   mode: EmptyMode.tasks,
 };
 
+Empty_Plan.args = {
+  ...emptyArgs,
+  mode: EmptyMode.plan,
+};
+
+Empty_Profile.args = {
+  ...emptyArgs,
+  mode: EmptyMode.profile,
+};
+
 Custom_Image.args = {
   ...emptyArgs,
-  image: <Icon color="#8ED0FA" path={IconName.mdiWrenchOutline} size="120px" />,
+  image: (
+    <Icon
+      color="var(--empty-svg-primary-30-color)"
+      path={IconName.mdiWrenchOutline}
+      size="120px"
+    />
+  ),
   imageStyle: {},
   mode: '',
 };
diff --git a/src/components/Empty/Empty.test.tsx b/src/components/Empty/Empty.test.tsx
index 1c58f0cc1..e46aa7ddf 100644
--- a/src/components/Empty/Empty.test.tsx
+++ b/src/components/Empty/Empty.test.tsx
@@ -1,7 +1,11 @@
+import '@testing-library/jest-dom/extend-expect';
+
 import React from 'react';
 import Enzyme, { mount } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import { Empty } from './';
+import { Empty, EmptyMode } from './';
+import { ConfigProvider } from '../ConfigProvider';
+import { render, waitFor } from '@testing-library/react';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -15,11 +19,30 @@ describe('Empty', () => {
   });
 
   test('empty includes the description class name', () => {
-    const wrapper = mount(
+    const { container } = render(
       <Empty description="Test" descriptionClassNames="description-class" />
     );
-    expect(
-      wrapper.getDOMNode().querySelector('.description-class')
-    ).toBeTruthy();
+    expect(container.querySelector('.description-class')).toBeTruthy();
+  });
+
+  test('empty gets theme from config provider', () => {
+    const { container } = render(
+      <ConfigProvider
+        themeOptions={{
+          name: 'red',
+        }}
+      >
+        <Empty
+          description="Test"
+          descriptionClassNames="description-class"
+          mode={EmptyMode.error}
+        />
+      </ConfigProvider>
+    );
+    const svgElement = container.querySelector('svg');
+    const pathElement = svgElement.querySelectorAll('path')[0];
+    expect(pathElement).toBeInTheDocument();
+    const fillValue = pathElement.getAttribute('fill');
+    expect(fillValue).toBe('currentColor');
   });
 });
diff --git a/src/components/Empty/Empty.tsx b/src/components/Empty/Empty.tsx
index 9eec0b299..f8c34524f 100644
--- a/src/components/Empty/Empty.tsx
+++ b/src/components/Empty/Empty.tsx
@@ -3,6 +3,8 @@ import { mergeClasses } from '../../shared/utilities';
 import { EmptyMode, EmptyProps } from './Empty.types';
 import { DefaultEmptyDataImg } from './SVG/DefaultEmptyDataImg';
 import { DefaultEmptyMessagesImg } from './SVG/DefaultEmptyMessagesImg';
+import { DefaultEmptyPlanImg } from './SVG/DefaultEmptyPlanImg';
+import { DefaultEmptyProfileImg } from './SVG/DefaultEmptyProfileImg';
 import { DefaultEmptySearchImg } from './SVG/DefaultEmptySearchImg';
 import { DefaultServerErrorImg } from './SVG/DefaultServerErrorImg';
 import { DefaultTasksCompleteImg } from './SVG/DefaultTasksCompleteImg';
@@ -12,6 +14,8 @@ import styles from './empty.module.scss';
 
 const defaultEmptyDataImg = <DefaultEmptyDataImg />;
 const defaultEmptyMessagesImg = <DefaultEmptyMessagesImg />;
+const defaultEmptyPlanImg = <DefaultEmptyPlanImg />;
+const defaultEmptyProfileImg = <DefaultEmptyProfileImg />;
 const defaultEmptySearchImg = <DefaultEmptySearchImg />;
 const defaultServerErrorImg = <DefaultServerErrorImg />;
 const defaultTasksCompleteImg = <DefaultTasksCompleteImg />;
@@ -41,6 +45,10 @@ export const Empty: FC<EmptyProps> = React.forwardRef(
           return defaultServerErrorImg;
         case EmptyMode.messages:
           return defaultEmptyMessagesImg;
+        case EmptyMode.plan:
+          return defaultEmptyPlanImg;
+        case EmptyMode.profile:
+          return defaultEmptyProfileImg;
         case EmptyMode.search:
           return defaultEmptySearchImg;
         case EmptyMode.tasks:
diff --git a/src/components/Empty/Empty.types.ts b/src/components/Empty/Empty.types.ts
index ca0ac06d2..6efa57d12 100644
--- a/src/components/Empty/Empty.types.ts
+++ b/src/components/Empty/Empty.types.ts
@@ -2,10 +2,12 @@ import { OcBaseProps } from '../OcBase';
 
 export enum EmptyMode {
   data = 'data',
+  error = 'error',
   messages = 'messages',
-  tasks = 'tasks',
+  plan = 'plan',
+  profile = 'profile',
   search = 'search',
-  error = 'error',
+  tasks = 'tasks',
 }
 
 export interface EmptyProps extends OcBaseProps<HTMLDivElement> {
diff --git a/src/components/Empty/SVG/DefaultEmptyDataImg.tsx b/src/components/Empty/SVG/DefaultEmptyDataImg.tsx
index 0e43302ce..bf6008917 100644
--- a/src/components/Empty/SVG/DefaultEmptyDataImg.tsx
+++ b/src/components/Empty/SVG/DefaultEmptyDataImg.tsx
@@ -1,55 +1,66 @@
 import React from 'react';
+import styles from '../empty.module.scss';
 
 export const DefaultEmptyDataImg = (): JSX.Element => {
   return (
     <svg
       className={'empty-data-image-default'}
-      width="200"
+      fill="none"
       height="184"
+      width="200"
       viewBox="0 0 200 184"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
+        className={styles.primaryColor10}
         d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
-        fill="#EBF7FF"
+        fill="currentColor"
       />
-      <path d="M26 108L38.5 59H160.5L174 108V154H26V108Z" fill="white" />
       <path
-        fillRule="evenodd"
+        className={styles.whiteColor}
+        d="M26 108L38.5 59H160.5L174 108V154H26V108Z"
+        fill="currentColor"
+      />
+      <path
+        className={styles.accentColor20}
         clipRule="evenodd"
         d="M118.495 108.258C118.495 117.504 110.214 123.333 99.9993 123.333C89.7843 123.333 81.5034 117.504 81.5034 108.258C81.5034 107.958 81.5121 105.994 81.5293 105.698H46.666L60.2683 72.6258C60.8547 71.0563 62.4813 70 64.3116 70H135.687C137.517 70 139.144 71.0563 139.73 72.6258L153.333 105.698H118.469C118.487 105.994 118.495 107.958 118.495 108.258Z"
-        fill="#B0F3FE"
+        fill="currentColor"
+        fillRule="evenodd"
       />
       <path
-        fillRule="evenodd"
+        className={styles.primaryColor30}
         clipRule="evenodd"
         d="M152.505 59.9999L47.4938 60.0006C43.6128 60.0006 40.0926 62.6542 38.7909 66.7166L27.5922 101.666L74.0905 101.666C78.722 101.666 83.0934 103.873 86.0399 107.654L92.9658 116.542C96.6469 121.266 103.355 121.266 107.037 116.542L113.962 107.654C116.909 103.873 121.28 101.666 125.912 101.666L172.408 101.666L161.208 66.7158C159.906 62.6534 156.386 59.9999 152.505 59.9999ZM173.651 108.333L125.912 108.333C123.217 108.333 120.638 109.615 118.876 111.876L111.95 120.763C105.729 128.747 94.2733 128.747 88.0518 120.763L81.126 111.876C79.3647 109.615 76.7854 108.333 74.0906 108.333L26.3492 108.333L26.3493 143.333C26.3493 148.934 30.548 153.333 35.5634 153.333L164.436 153.333C169.452 153.333 173.65 148.934 173.651 143.333L173.651 108.333ZM47.4937 53.3339L152.505 53.3333C159.195 53.3332 165.081 57.8972 167.226 64.5898L180 104.454L180 143.333C180 152.46 173.105 159.999 164.436 159.999L35.5635 160C26.8946 160 20.0001 152.46 20 143.333L20 104.454L32.7731 64.5908C34.9176 57.898 40.804 53.334 47.4937 53.3339Z"
-        fill="#8ED0FA"
+        fill="currentColor"
+        fillRule="evenodd"
       />
       <rect
-        x="93.334"
-        width="13.3333"
+        className={styles.accentColor20}
+        fill="currentColor"
         height="40"
         rx="6.66667"
-        fill="#B0F3FE"
+        width="13.3333"
+        x="93.334"
       />
       <rect
-        x="46.666"
-        y="6.66675"
-        width="13.3333"
+        className={styles.accentColor20}
+        fill="currentColor"
         height="40"
         rx="6.66667"
         transform="rotate(-30 46.666 6.66675)"
-        fill="#B0F3FE"
+        width="13.3333"
+        x="46.666"
+        y="6.66675"
       />
       <rect
-        x="141.666"
-        width="13.3333"
+        className={styles.accentColor20}
+        fill="currentColor"
         height="40"
         rx="6.66667"
         transform="rotate(30 141.666 0)"
-        fill="#B0F3FE"
+        width="13.3333"
+        x="141.666"
       />
     </svg>
   );
diff --git a/src/components/Empty/SVG/DefaultEmptyMessagesImg.tsx b/src/components/Empty/SVG/DefaultEmptyMessagesImg.tsx
index dae228058..ef1762ad9 100644
--- a/src/components/Empty/SVG/DefaultEmptyMessagesImg.tsx
+++ b/src/components/Empty/SVG/DefaultEmptyMessagesImg.tsx
@@ -1,41 +1,45 @@
 import React from 'react';
+import styles from '../empty.module.scss';
 
 export const DefaultEmptyMessagesImg = (): JSX.Element => {
   return (
     <svg
       className={'empty-messages-image-default'}
-      width="200"
+      fill="none"
       height="184"
+      width="200"
       viewBox="0 0 200 184"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
+        className={styles.primaryColor10}
         d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
-        fill="#EBF7FF"
+        fill="currentColor"
       />
       <path
+        className={styles.whiteColorFillPrimaryColor30Stroke}
         d="M131.098 145.069C125.349 140.58 119.665 136.448 116.52 133.384C116.016 132.893 115.288 132.671 114.598 132.81C35.5718 148.779 -9.97428 65.6821 65.669 27.1035C65.7558 27.0592 65.8525 27.0185 65.9449 26.9875C142.983 1.22162 204.241 81.5443 135.362 124.844C134.772 125.214 134.381 125.876 134.381 126.572L134.381 143.483C134.381 145.166 132.424 146.105 131.098 145.069Z"
-        fill="white"
-        stroke="#8ED0FA"
         strokeWidth="6"
       />
       <path
+        className={styles.accentColor20}
         d="M66.3926 86.6624C70.9586 86.6624 74.3926 82.703 74.3926 78.1624C74.3926 73.6217 70.9586 69.6624 66.3926 69.6624C61.8266 69.6624 58.3926 73.6217 58.3926 78.1624C58.3926 82.703 61.8266 86.6624 66.3926 86.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
+        fill="currentColor"
+        stroke="currentColor"
         strokeWidth="4"
       />
       <path
+        className={styles.accentColor20}
         d="M94.3926 86.6624C98.9586 86.6624 102.393 82.703 102.393 78.1624C102.393 73.6217 98.9586 69.6624 94.3926 69.6624C89.8266 69.6624 86.3926 73.6217 86.3926 78.1624C86.3926 82.703 89.8266 86.6624 94.3926 86.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
+        fill="currentColor"
+        stroke="currentColor"
         strokeWidth="4"
       />
       <path
+        className={styles.accentColor20}
         d="M122.393 86.6624C126.959 86.6624 130.393 82.703 130.393 78.1624C130.393 73.6217 126.959 69.6624 122.393 69.6624C117.827 69.6624 114.393 73.6217 114.393 78.1624C114.393 82.703 117.827 86.6624 122.393 86.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
+        fill="currentColor"
+        stroke="currentColor"
         strokeWidth="4"
       />
     </svg>
diff --git a/src/components/Empty/SVG/DefaultEmptyPlanImg.tsx b/src/components/Empty/SVG/DefaultEmptyPlanImg.tsx
new file mode 100644
index 000000000..e2644fb97
--- /dev/null
+++ b/src/components/Empty/SVG/DefaultEmptyPlanImg.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import styles from '../empty.module.scss';
+
+export const DefaultEmptyPlanImg = (): JSX.Element => {
+  return (
+    <svg
+      className={'empty-plan-image-default'}
+      fill="none"
+      height="187"
+      width="200"
+      viewBox="0 0 200 187"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        className={styles.primaryColor10}
+        d="M39.0718 180.839C21.8078 174.861 3.66074 165.325 0.510726 153.175C-2.63929 141.025 9.18787 126.359 24.8068 118.637C40.5358 111.029 59.9069 110.449 71.9662 105.257C83.9156 99.9498 88.5731 89.9309 99.9189 80.9985C111.265 72.066 129.299 64.2199 140.372 67.9517C151.555 71.798 155.648 87.2069 164.716 99.6426C173.785 112.078 187.68 121.625 194.904 134.657C202.237 147.804 202.768 164.422 189.061 169.219C175.355 174.016 147.3 166.877 128.36 168.625C109.569 170.288 99.7624 180.823 86.4541 184.955C73.2954 189.004 56.4854 186.734 39.0718 180.839Z"
+        fill="currentColor"
+      />
+      <path
+        className={styles.accentColor20}
+        d="M183 115.819V134H72V115.819L72.4336 111.923C73.0117 108.748 74.168 105.718 75.9023 102.832C77.9258 98.5034 80.6719 94.7517 84.1406 91.5772C88.4766 87.8255 93.9687 84.7953 100.617 82.4866C108.133 79.8893 117.094 78.5906 127.5 78.5906C143.977 78.5906 156.984 81.7651 166.523 88.1141C173.461 92.7315 178.375 98.792 181.266 106.295C182.422 109.758 183 112.933 183 115.819ZM155.25 32.7047C155.25 24.9128 152.504 18.4195 147.012 13.2248C141.809 7.74161 135.305 5 127.5 5C119.984 5 113.48 7.74161 107.988 13.2248C102.496 18.4195 99.75 24.9128 99.75 32.7047C99.75 40.2081 102.496 46.7013 107.988 52.1846C113.48 57.6678 119.984 60.4094 127.5 60.4094C135.305 60.4094 141.809 57.6678 147.012 52.1846C152.504 46.7013 155.25 40.2081 155.25 32.7047Z"
+        fill="currentColor"
+      />
+      <path
+        className={styles.whiteColor}
+        d="M159 112.96V131H48V112.96L48.4336 109.094C49.0117 105.944 50.168 102.937 51.9023 100.074C53.9258 95.7785 56.6719 92.0559 60.1406 88.906C64.4766 85.1834 69.9687 82.1767 76.6172 79.8859C84.1328 77.3087 93.0938 76.0201 103.5 76.0201C119.977 76.0201 132.984 79.17 142.523 85.4698C149.461 90.0515 154.375 96.0649 157.266 103.51C158.422 106.946 159 110.096 159 112.96ZM131.25 30.4899C131.25 22.7584 128.504 16.3154 123.012 11.1611C117.809 5.72036 111.305 3 103.5 3C95.9844 3 89.4805 5.72036 83.9883 11.1611C78.4961 16.3154 75.75 22.7584 75.75 30.4899C75.75 37.9351 78.4961 44.3781 83.9883 49.8188C89.4805 55.2595 95.9844 57.9799 103.5 57.9799C111.305 57.9799 117.809 55.2595 123.012 49.8188C128.504 44.3781 131.25 37.9351 131.25 30.4899Z"
+        fill="currentColor"
+      />
+      <path
+        className={styles.primaryColor30}
+        d="M159 112.96V131H48V112.96L48.4336 109.094C49.0117 105.944 50.168 102.937 51.9023 100.074C53.9258 95.7785 56.6719 92.0559 60.1406 88.906C64.4766 85.1834 69.9687 82.1767 76.6172 79.8859C84.1328 77.3087 93.0938 76.0201 103.5 76.0201C119.977 76.0201 132.984 79.17 142.523 85.4698C149.461 90.0515 154.375 96.0649 157.266 103.51C158.422 106.946 159 110.096 159 112.96ZM131.25 30.4899C131.25 22.7584 128.504 16.3154 123.012 11.1611C117.809 5.72036 111.305 3 103.5 3C95.9844 3 89.4805 5.72036 83.9883 11.1611C78.4961 16.3154 75.75 22.7584 75.75 30.4899C75.75 37.9351 78.4961 44.3781 83.9883 49.8188C89.4805 55.2595 95.9844 57.9799 103.5 57.9799C111.305 57.9799 117.809 55.2595 123.012 49.8188C128.504 44.3781 131.25 37.9351 131.25 30.4899Z"
+        stroke="currentColor"
+        stroke-width="6"
+      />
+      <path
+        className={styles.accentColor20}
+        d="M69 52.9545L58.65 40L25.4438 73.25L10.7812 58.5682L0 69.3636L25.4438 97L69 52.9545Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/Empty/SVG/DefaultEmptyProfileImg.tsx b/src/components/Empty/SVG/DefaultEmptyProfileImg.tsx
new file mode 100644
index 000000000..b554913bf
--- /dev/null
+++ b/src/components/Empty/SVG/DefaultEmptyProfileImg.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import styles from '../empty.module.scss';
+
+export const DefaultEmptyProfileImg = (): JSX.Element => {
+  return (
+    <svg
+      className={'empty-profile-image-default'}
+      fill="none"
+      height="187"
+      width="200"
+      viewBox="0 0 200 187"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        className={styles.primaryColor10}
+        d="M39.0718 180.839C21.8078 174.861 3.66074 165.325 0.510726 153.175C-2.63929 141.025 9.18787 126.359 24.8068 118.637C40.5358 111.029 59.9069 110.449 71.9662 105.257C83.9156 99.9498 88.5731 89.9309 99.9189 80.9985C111.265 72.066 129.299 64.2199 140.372 67.9517C151.555 71.798 155.648 87.2069 164.716 99.6426C173.785 112.078 187.68 121.625 194.904 134.657C202.237 147.804 202.768 164.422 189.061 169.219C175.355 174.016 147.3 166.877 128.36 168.625C109.569 170.288 99.7624 180.823 86.4541 184.955C73.2954 189.004 56.4854 186.734 39.0718 180.839Z"
+        fill="currentColor"
+      />
+      <path
+        className={styles.whiteColor}
+        d="M159 112.96V131H48V112.96L48.4336 109.094C49.0117 105.944 50.168 102.937 51.9023 100.074C53.9258 95.7785 56.6719 92.0559 60.1406 88.906C64.4766 85.1834 69.9687 82.1767 76.6172 79.8859C84.1328 77.3087 93.0938 76.0201 103.5 76.0201C119.977 76.0201 132.984 79.17 142.523 85.4698C149.461 90.0515 154.375 96.0649 157.266 103.51C158.422 106.946 159 110.096 159 112.96ZM131.25 30.4899C131.25 22.7584 128.504 16.3154 123.012 11.1611C117.809 5.72036 111.305 3 103.5 3C95.9844 3 89.4805 5.72036 83.9883 11.1611C78.4961 16.3154 75.75 22.7584 75.75 30.4899C75.75 37.9351 78.4961 44.3781 83.9883 49.8188C89.4805 55.2595 95.9844 57.9799 103.5 57.9799C111.305 57.9799 117.809 55.2595 123.012 49.8188C128.504 44.3781 131.25 37.9351 131.25 30.4899Z"
+        fill="currentColor"
+      />
+      <path
+        className={styles.primaryColor30}
+        d="M159 112.96V131H48V112.96L48.4336 109.094C49.0117 105.944 50.168 102.937 51.9023 100.074C53.9258 95.7785 56.6719 92.0559 60.1406 88.906C64.4766 85.1834 69.9687 82.1767 76.6172 79.8859C84.1328 77.3087 93.0938 76.0201 103.5 76.0201C119.977 76.0201 132.984 79.17 142.523 85.4698C149.461 90.0515 154.375 96.0649 157.266 103.51C158.422 106.946 159 110.096 159 112.96ZM131.25 30.4899C131.25 22.7584 128.504 16.3154 123.012 11.1611C117.809 5.72036 111.305 3 103.5 3C95.9844 3 89.4805 5.72036 83.9883 11.1611C78.4961 16.3154 75.75 22.7584 75.75 30.4899C75.75 37.9351 78.4961 44.3781 83.9883 49.8188C89.4805 55.2595 95.9844 57.9799 103.5 57.9799C111.305 57.9799 117.809 55.2595 123.012 49.8188C128.504 44.3781 131.25 37.9351 131.25 30.4899Z"
+        stroke="currentColor"
+        stroke-width="6"
+      />
+      <path
+        className={styles.whiteColorFillPrimaryColor30Stroke}
+        d="M38.3391 79.9439L38.4197 80.0328L38.5072 80.1149C40.5896 82.0714 43.1391 83.0714 46 83.0714C48.8641 83.0714 51.4042 82.0657 53.4032 80.031C55.4671 77.9302 56.5439 75.3331 56.5439 72.3929C56.5439 69.4874 55.4889 66.9326 53.4044 64.932C51.4384 62.8098 48.9043 61.7143 46 61.7143C43.0627 61.7143 40.4866 62.8312 38.4214 64.9332C36.4255 66.9647 35.4561 69.5243 35.4561 72.3929C35.4561 75.2597 36.4211 77.829 38.3391 79.9439ZM71.497 50.1225L71.5776 50.2113L71.6651 50.2935C72.6031 51.1748 73 52.1184 73 53.2857V91.5C73 92.6673 72.6031 93.6109 71.6651 94.4922L71.5776 94.5744L71.497 94.6632C70.6671 95.5783 69.7223 96 68.4561 96H23.5439C22.2706 96 21.221 95.5693 20.2453 94.5761C19.3994 93.7151 19 92.7467 19 91.5V53.2857C19 52.0391 19.3994 51.0706 20.2453 50.2096C21.221 49.2165 22.2706 48.7857 23.5439 48.7857H27.2281H30.2281V45.7857V38.1071C30.2281 35.1584 30.9196 32.527 32.278 30.1504C33.79 27.5909 35.7154 25.649 38.0579 24.2581L38.074 24.2486L38.0899 24.2389C40.5481 22.7376 43.1658 22 46 22C48.8332 22 51.3721 22.7365 53.688 24.2098L53.7494 24.2489L53.8126 24.2849C56.2513 25.6749 58.1385 27.5927 59.5119 30.089L59.5464 30.1517L59.5838 30.2126C61.0393 32.583 61.7719 35.1916 61.7719 38.1071V45.7857V48.7857H64.7719H68.4561C69.7223 48.7857 70.6671 49.2074 71.497 50.1225ZM31.7719 45.7857V48.7857H34.7719H57.2281H60.2281V45.7857V38.1071C60.2281 34.1433 58.8317 30.6934 56.0353 27.9683C53.3568 25.1208 49.9429 23.6786 46 23.6786C42.0335 23.6786 38.5735 25.1356 35.7898 27.969C33.0922 30.7147 31.7719 34.1672 31.7719 38.1071V45.7857Z"
+        stroke-width="6"
+      />
+      <ellipse
+        className={styles.accentColor20}
+        cx="46"
+        cy="72.5"
+        fill="currentColor"
+        rx="8"
+        ry="8.5"
+      />
+    </svg>
+  );
+};
diff --git a/src/components/Empty/SVG/DefaultEmptySearchImg.tsx b/src/components/Empty/SVG/DefaultEmptySearchImg.tsx
index 3861a172b..6d16f0b0f 100644
--- a/src/components/Empty/SVG/DefaultEmptySearchImg.tsx
+++ b/src/components/Empty/SVG/DefaultEmptySearchImg.tsx
@@ -1,45 +1,74 @@
 import React from 'react';
+import styles from '../empty.module.scss';
 
 export const DefaultEmptySearchImg = (): JSX.Element => {
   return (
     <svg
       className={'empty-search-image-default'}
-      width="200"
+      fill="none"
       height="184"
+      width="200"
       viewBox="0 0 200 184"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
+        className={styles.primaryColor10}
         d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
-        fill="#EBF7FF"
+        fill="currentColor"
       />
       <path
+        className={styles.accentColor20}
         d="M183 91C188.192 91 192 86.5161 192 81.5C192 76.4839 188.192 72 183 72C177.808 72 174 76.4839 174 81.5C174 86.5161 177.808 91 183 91Z"
-        stroke="#B0F3FE"
+        stroke="currentColor"
         strokeWidth="6"
       />
-      <circle cx="139" cy="47" r="5" fill="#B0F3FE" />
-      <rect x="148" y="42" width="20" height="10" rx="5" fill="#B0F3FE" />
-      <rect x="10" y="83" width="30" height="10" rx="5" fill="#B0F3FE" />
+      <circle
+        className={styles.accentColor20}
+        cx="139"
+        cy="47"
+        fill="currentColor"
+        r="5"
+      />
+      <rect
+        className={styles.accentColor20}
+        fill="currentColor"
+        height="10"
+        rx="5"
+        width="20"
+        x="148"
+        y="42"
+      />
+      <rect
+        className={styles.accentColor20}
+        fill="currentColor"
+        height="10"
+        rx="5"
+        width="30"
+        x="10"
+        y="83"
+      />
       <path
+        className={styles.whiteColor}
         d="M111.824 36.9412C130.569 55.6864 130.569 86.0783 111.824 104.823C93.0788 123.569 62.6869 123.569 43.9417 104.823C25.1965 86.0783 25.1965 55.6864 43.9417 36.9412C62.6869 18.196 93.0788 18.196 111.824 36.9412Z"
-        fill="white"
+        fill="currentColor"
       />
       <path
+        className={styles.whiteColor}
         d="M127.38 131.693C124.256 128.569 124.256 123.504 127.38 120.38C130.504 117.256 135.57 117.256 138.694 120.38L155.664 137.35C158.789 140.475 158.789 145.54 155.664 148.664C152.54 151.788 147.475 151.788 144.351 148.664L127.38 131.693Z"
-        fill="white"
+        fill="currentColor"
       />
       <path
+        className={styles.primaryColor30}
         d="M125.26 118.259L118.189 111.187M111.824 36.9412C130.569 55.6864 130.569 86.0783 111.824 104.823C93.0788 123.569 62.6869 123.569 43.9417 104.823C25.1965 86.0783 25.1965 55.6864 43.9417 36.9412C62.6869 18.196 93.0788 18.196 111.824 36.9412ZM155.664 148.664C152.54 151.788 147.475 151.788 144.351 148.664L127.38 131.693C124.256 128.569 124.256 123.504 127.38 120.38C130.504 117.256 135.57 117.256 138.694 120.38L155.664 137.35C158.789 140.475 158.789 145.54 155.664 148.664Z"
-        stroke="#8ED0FA"
-        strokeWidth="6"
+        stroke="currentColor"
         strokeLinecap="round"
+        strokeWidth="6"
       />
       <path
+        className={styles.accentColor20}
         d="M56.3926 96.6624C60.9586 96.6624 64.3926 92.703 64.3926 88.1624C64.3926 83.6217 60.9586 79.6624 56.3926 79.6624C51.8266 79.6624 48.3926 83.6217 48.3926 88.1624C48.3926 92.703 51.8266 96.6624 56.3926 96.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
+        fill="currentColor"
+        stroke="currentColor"
         strokeWidth="4"
       />
     </svg>
diff --git a/src/components/Empty/SVG/DefaultServerErrorImg.tsx b/src/components/Empty/SVG/DefaultServerErrorImg.tsx
index 1482f5e08..ffc3e69b2 100644
--- a/src/components/Empty/SVG/DefaultServerErrorImg.tsx
+++ b/src/components/Empty/SVG/DefaultServerErrorImg.tsx
@@ -1,86 +1,110 @@
 import React from 'react';
+import styles from '../empty.module.scss';
 
 export const DefaultServerErrorImg = (): JSX.Element => {
   return (
     <svg
       className={'server-error-image-default'}
-      width="200"
+      fill="none"
       height="185"
+      width="200"
       viewBox="0 0 200 185"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
+        className={styles.primaryColor10}
         d="M39.0718 178.839C21.8078 172.861 3.66074 163.325 0.510726 151.175C-2.63929 139.025 9.18787 124.359 24.8068 116.637C40.5358 109.029 59.9069 108.449 71.9662 103.257C83.9156 97.9498 88.5731 87.9309 99.9189 78.9985C111.265 70.066 129.299 62.2199 140.372 65.9517C151.555 69.798 155.648 85.2069 164.716 97.6426C173.785 110.078 187.68 119.625 194.904 132.657C202.237 145.804 202.768 162.422 189.061 167.219C175.355 172.016 147.3 164.877 128.36 166.625C109.569 168.288 99.7624 178.823 86.4541 182.955C73.2954 187.004 56.4854 184.734 39.0718 178.839Z"
-        fill="#EBF7FF"
+        fill="currentColor"
       />
       <path
+        className={styles.whiteColorFillPrimaryColor30Stroke}
         d="M49.2784 101.405C39.3247 57.4604 105.676 18.8428 136.863 78.7671C196.578 76.1036 191.934 156.002 145.489 158L107.668 158L46.6243 158C12.7837 158 0.841885 104.068 49.2784 101.405Z"
-        fill="white"
-        stroke="#8ED0FA"
         strokeWidth="6"
       />
       <path
+        className={styles.primaryColor30}
         d="M76.0193 103.097L82.4167 109.495L86.6594 105.252L80.2619 98.8548L76.0193 103.097ZM82.4167 108.081L76.38 114.117L80.6226 118.36L86.6594 112.323L82.4167 108.081ZM82.4167 109.495C82.0262 109.104 82.0262 108.471 82.4167 108.081L86.6594 112.323C88.612 110.371 88.612 107.205 86.6594 105.252L82.4167 109.495Z"
-        fill="#8ED0FA"
+        fill="currentColor"
       />
       <path
+        className={styles.primaryColor30}
         d="M128.572 114.117L122.175 107.72L117.932 111.963L124.33 118.36L128.572 114.117ZM122.175 109.134L128.212 103.097L123.969 98.8548L117.932 104.892L122.175 109.134ZM122.175 107.72C122.566 108.111 122.566 108.744 122.175 109.134L117.932 104.892C115.98 106.844 115.98 110.01 117.932 111.963L122.175 107.72Z"
-        fill="#8ED0FA"
+        fill="currentColor"
       />
       <path
+        className={styles.accentColor20}
         d="M102 142C107.192 142 111 137.516 111 132.5C111 127.484 107.192 123 102 123C96.8079 123 93 127.484 93 132.5C93 137.516 96.8079 142 102 142Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
+        fill="currentColor"
+        stroke="currentColor"
         strokeWidth="6"
       />
       <path
+        className={styles.accentColor20}
         d="M161 68C166.192 68 170 63.5161 170 58.5C170 53.4839 166.192 49 161 49C155.808 49 152 53.4839 152 58.5C152 63.5161 155.808 68 161 68Z"
-        stroke="#B0F3FE"
+        stroke="currentColor"
         strokeWidth="6"
       />
       <path
+        className={styles.accentColor20}
         d="M55 22C60.1921 22 64 17.5161 64 12.5C64 7.48391 60.1921 3 55 3C49.8079 3 46 7.48391 46 12.5C46 17.5161 49.8079 22 55 22Z"
-        stroke="#B0F3FE"
+        stroke="currentColor"
         strokeWidth="6"
       />
-      <ellipse cx="108" cy="29.5" rx="6" ry="6.5" fill="#B0F3FE" />
-      <ellipse cx="28" cy="89.5" rx="6" ry="6.5" fill="#B0F3FE" />
+      <ellipse
+        className={styles.accentColor20}
+        cx="108"
+        cy="29.5"
+        fill="currentColor"
+        rx="6"
+        ry="6.5"
+      />
+      <ellipse
+        className={styles.accentColor20}
+        cx="28"
+        cy="89.5"
+        fill="currentColor"
+        rx="6"
+        ry="6.5"
+      />
       <line
+        className={styles.accentColor20}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="6"
         x1="161.334"
-        y1="11.6067"
         x2="148.606"
+        y1="11.6067"
         y2="24.3346"
-        stroke="#B0F3FE"
-        strokeWidth="6"
-        strokeLinecap="round"
       />
       <line
+        className={styles.accentColor20}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="6"
         x1="161.335"
-        y1="24.3345"
         x2="148.608"
+        y1="24.3345"
         y2="11.6065"
-        stroke="#B0F3FE"
-        strokeWidth="6"
-        strokeLinecap="round"
       />
       <line
+        className={styles.accentColor20}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="6"
         x1="31.334"
-        y1="38.6067"
         x2="18.6061"
+        y1="38.6067"
         y2="51.3346"
-        stroke="#B0F3FE"
-        strokeWidth="6"
-        strokeLinecap="round"
       />
       <line
+        className={styles.accentColor20}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="6"
         x1="31.3355"
-        y1="51.3345"
         x2="18.6076"
+        y1="51.3345"
         y2="38.6065"
-        stroke="#B0F3FE"
-        strokeWidth="6"
-        strokeLinecap="round"
       />
     </svg>
   );
diff --git a/src/components/Empty/SVG/DefaultTasksCompleteImg.tsx b/src/components/Empty/SVG/DefaultTasksCompleteImg.tsx
index a35fc6e85..26afc22b2 100644
--- a/src/components/Empty/SVG/DefaultTasksCompleteImg.tsx
+++ b/src/components/Empty/SVG/DefaultTasksCompleteImg.tsx
@@ -1,86 +1,115 @@
 import React from 'react';
+import styles from '../empty.module.scss';
 
 export const DefaultTasksCompleteImg = (): JSX.Element => {
   return (
     <svg
       className={'tasks-complete-image-default'}
-      width="200"
+      fill="none"
       height="184"
+      width="200"
       viewBox="0 0 200 184"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
+        className={styles.primaryColor10}
         d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
-        fill="#EBF7FF"
+        fill="currentColor"
       />
       <path
+        className={styles.accentColor20}
         d="M180 98C185.192 98 189 93.5161 189 88.5C189 83.4839 185.192 79 180 79C174.808 79 171 83.4839 171 88.5C171 93.5161 174.808 98 180 98Z"
-        stroke="#B0F3FE"
+        stroke="currentColor"
         strokeWidth="6"
       />
-      <circle cx="139" cy="47" r="5" fill="#B0F3FE" />
+      <circle
+        className={styles.accentColor20}
+        cx="139"
+        cy="47"
+        fill="currentColor"
+        r="5"
+      />
       <path
+        className={styles.accentColor20}
         d="M56.3926 96.6624C60.9586 96.6624 64.3926 92.703 64.3926 88.1624C64.3926 83.6217 60.9586 79.6624 56.3926 79.6624C51.8266 79.6624 48.3926 83.6217 48.3926 88.1624C48.3926 92.703 51.8266 96.6624 56.3926 96.6624Z"
-        fill="#B0F3FE"
-        stroke="#B0F3FE"
+        fill="currentColor"
+        stroke="currentColor"
         strokeWidth="4"
       />
       <circle
+        className={styles.whiteColorFillPrimaryColor30Stroke}
         cx="98"
         cy="79"
         r="60"
-        fill="white"
-        stroke="#8ED0FA"
-        strokeWidth="6"
         strokeLinecap="round"
+        strokeWidth="6"
       />
       <path
+        className={styles.accentColor20}
         d="M80.9802 73.3685C79.5239 72.0567 77.2649 72.1574 75.9346 73.5935C74.6043 75.0295 74.7064 77.2571 76.1627 78.569L92.971 93.7098C95.0099 95.5463 98.1725 95.4053 100.035 93.3948C100.113 93.3094 100.113 93.3094 100.188 93.2217L124.175 64.7735C125.436 63.2779 125.228 61.0574 123.712 59.8139C122.195 58.5703 119.943 58.7747 118.682 60.2703L96.1309 87.0162L80.9802 73.3685Z"
-        fill="#B0F3FE"
+        fill="currentColor"
       />
       <path
+        className={styles.accentColor20}
         d="M16 26C21.1921 26 25 21.5161 25 16.5C25 11.4839 21.1921 7 16 7C10.8079 7 7 11.4839 7 16.5C7 21.5161 10.8079 26 16 26Z"
-        stroke="#B0F3FE"
+        stroke="currentColor"
         strokeWidth="6"
       />
-      <ellipse cx="38" cy="35.5" rx="6" ry="6.5" fill="#B0F3FE" />
-      <ellipse cx="171" cy="35.5" rx="6" ry="6.5" fill="#B0F3FE" />
+      <ellipse
+        className={styles.accentColor20}
+        cx="38"
+        cy="35.5"
+        fill="currentColor"
+        rx="6"
+        ry="6.5"
+      />
+      <ellipse
+        className={styles.accentColor20}
+        cx="171"
+        cy="35.5"
+        fill="currentColor"
+        rx="6"
+        ry="6.5"
+      />
       <line
+        className={styles.accentColor20}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="6"
         x1="160"
-        y1="13"
         x2="142"
+        y1="13"
         y2="13"
-        stroke="#B0F3FE"
-        strokeWidth="6"
-        strokeLinecap="round"
       />
       <line
+        className={styles.accentColor20}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="6"
         x1="151"
-        y1="22"
         x2="151"
+        y1="22"
         y2="4"
-        stroke="#B0F3FE"
-        strokeWidth="6"
-        strokeLinecap="round"
       />
       <line
+        className={styles.accentColor20}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="6"
         x1="31"
-        y1="87"
         x2="13"
+        y1="87"
         y2="87"
-        stroke="#B0F3FE"
-        strokeWidth="6"
-        strokeLinecap="round"
       />
       <line
+        className={styles.accentColor20}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="6"
         x1="22"
-        y1="96"
         x2="22"
+        y1="96"
         y2="78"
-        stroke="#B0F3FE"
-        strokeWidth="6"
-        strokeLinecap="round"
       />
     </svg>
   );
diff --git a/src/components/Empty/empty.module.scss b/src/components/Empty/empty.module.scss
index c21062860..e9a98a4e4 100644
--- a/src/components/Empty/empty.module.scss
+++ b/src/components/Empty/empty.module.scss
@@ -1,13 +1,13 @@
 .empty {
-  margin: 0 8px;
-  font-family: $octuple-font-family;
+  margin: 0 $space-xs;
+  font-family: var(--font-stack-full);
   font-size: $text-font-size-2;
   line-height: $text-line-height-3;
   text-align: center;
 
   .empty-image {
     height: 120px;
-    margin-bottom: 24px;
+    margin-bottom: $space-l;
 
     img {
       border-style: none;
@@ -17,6 +17,23 @@
     svg {
       height: 100%;
       margin: auto;
+
+      .accent-color-20 {
+        color: var(--empty-svg-accent-20-color);
+      }
+      .primary-color-10 {
+        color: var(--empty-svg-primary-10-color);
+      }
+      .primary-color-30 {
+        color: var(--empty-svg-primary-30-color);
+      }
+      .white-color {
+        color: var(--empty-svg-white-color);
+      }
+      .white-color-fill-primary-color-30-stroke {
+        fill: var(--empty-svg-white-color);
+        stroke: var(--empty-svg-primary-30-color);
+      }
     }
   }
 
@@ -26,7 +43,7 @@
     font-weight: $text-font-weight-semibold;
     line-height: $text-line-height-5;
     text-align: center;
-    margin-bottom: 8px;
+    margin-bottom: $space-xs;
   }
 
   .empty-description {
@@ -39,11 +56,11 @@
   }
 
   .empty-footer {
-    margin-top: 16px;
+    margin-top: $space-m;
   }
 
   &-default {
-    margin: 32px 0;
+    margin: $space-xl 0;
 
     .empty-image {
       height: 200px;
diff --git a/src/components/Empty/svg/DefaultEmptyImg.tsx b/src/components/Empty/svg/DefaultEmptyImg.tsx
index 72df33f2d..6ef1262f9 100644
--- a/src/components/Empty/svg/DefaultEmptyImg.tsx
+++ b/src/components/Empty/svg/DefaultEmptyImg.tsx
@@ -1,55 +1,66 @@
 import React from 'react';
+import styles from '../empty.module.scss';
 
 export const DefaultEmptyImg = (): JSX.Element => {
   return (
     <svg
       className={'empty-image-default'}
-      width="200"
+      fill="none"
       height="184"
+      width="200"
       viewBox="0 0 200 184"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
+        className={styles.primaryColor10}
         d="M39.0718 177.839C21.8078 171.861 3.66074 162.325 0.510726 150.175C-2.63929 138.025 9.18787 123.359 24.8068 115.637C40.5358 108.029 59.9069 107.449 71.9662 102.257C83.9156 96.9498 88.5731 86.9309 99.9189 77.9985C111.265 69.066 129.299 61.2199 140.372 64.9517C151.555 68.798 155.648 84.2069 164.716 96.6426C173.785 109.078 187.68 118.625 194.904 131.657C202.237 144.804 202.768 161.422 189.061 166.219C175.355 171.016 147.3 163.877 128.36 165.625C109.569 167.288 99.7624 177.823 86.4541 181.955C73.2954 186.004 56.4854 183.734 39.0718 177.839Z"
-        fill="#EBF7FF"
+        fill="currentColor"
       />
-      <path d="M26 108L38.5 59H160.5L174 108V154H26V108Z" fill="white" />
       <path
-        fillRule="evenodd"
+        className={styles.whiteColor}
+        d="M26 108L38.5 59H160.5L174 108V154H26V108Z"
+        fill="currentColor"
+      />
+      <path
+        className={styles.accentColor20}
         clipRule="evenodd"
         d="M118.495 108.258C118.495 117.504 110.214 123.333 99.9993 123.333C89.7843 123.333 81.5034 117.504 81.5034 108.258C81.5034 107.958 81.5121 105.994 81.5293 105.698H46.666L60.2683 72.6258C60.8547 71.0563 62.4813 70 64.3116 70H135.687C137.517 70 139.144 71.0563 139.73 72.6258L153.333 105.698H118.469C118.487 105.994 118.495 107.958 118.495 108.258Z"
-        fill="#B0F3FE"
+        fill="currentColor"
+        fillRule="evenodd"
       />
       <path
-        fillRule="evenodd"
+        className={styles.primaryColor30}
         clipRule="evenodd"
         d="M152.505 59.9999L47.4938 60.0006C43.6128 60.0006 40.0926 62.6542 38.7909 66.7166L27.5922 101.666L74.0905 101.666C78.722 101.666 83.0934 103.873 86.0399 107.654L92.9658 116.542C96.6469 121.266 103.355 121.266 107.037 116.542L113.962 107.654C116.909 103.873 121.28 101.666 125.912 101.666L172.408 101.666L161.208 66.7158C159.906 62.6534 156.386 59.9999 152.505 59.9999ZM173.651 108.333L125.912 108.333C123.217 108.333 120.638 109.615 118.876 111.876L111.95 120.763C105.729 128.747 94.2733 128.747 88.0518 120.763L81.126 111.876C79.3647 109.615 76.7854 108.333 74.0906 108.333L26.3492 108.333L26.3493 143.333C26.3493 148.934 30.548 153.333 35.5634 153.333L164.436 153.333C169.452 153.333 173.65 148.934 173.651 143.333L173.651 108.333ZM47.4937 53.3339L152.505 53.3333C159.195 53.3332 165.081 57.8972 167.226 64.5898L180 104.454L180 143.333C180 152.46 173.105 159.999 164.436 159.999L35.5635 160C26.8946 160 20.0001 152.46 20 143.333L20 104.454L32.7731 64.5908C34.9176 57.898 40.804 53.334 47.4937 53.3339Z"
-        fill="#8ED0FA"
+        fill="currentColor"
+        fillRule="evenodd"
       />
       <rect
-        x="93.334"
-        width="13.3333"
+        className={styles.accentColor20}
+        fill="currentColor"
         height="40"
         rx="6.66667"
-        fill="#B0F3FE"
+        width="13.3333"
+        x="93.334"
       />
       <rect
-        x="46.666"
-        y="6.66675"
-        width="13.3333"
+        className={styles.accentColor20}
+        fill="currentColor"
         height="40"
         rx="6.66667"
         transform="rotate(-30 46.666 6.66675)"
-        fill="#B0F3FE"
+        width="13.3333"
+        x="46.666"
+        y="6.66675"
       />
       <rect
-        x="141.666"
-        width="13.3333"
+        className={styles.accentColor20}
+        fill="currentColor"
         height="40"
         rx="6.66667"
         transform="rotate(30 141.666 0)"
-        fill="#B0F3FE"
+        width="13.3333"
+        x="141.666"
       />
     </svg>
   );
diff --git a/src/styles/themes/_default-theme.scss b/src/styles/themes/_default-theme.scss
index a7957d605..50a6e5325 100644
--- a/src/styles/themes/_default-theme.scss
+++ b/src/styles/themes/_default-theme.scss
@@ -830,4 +830,10 @@
   --accordion-summary-text-color: var(--text-primary-color);
   --accordion-summary-text-hover-color: var(--text-primary-color);
   --accordion-pill-shape-border-radius: var(--border-radius-xl);
+
+  // ------ Empty theme ------
+  --empty-svg-accent-20-color: var(--accent-color-20);
+  --empty-svg-primary-10-color: var(--primary-color-10);
+  --empty-svg-primary-30-color: var(--primary-color-30);
+  --empty-svg-white-color: var(--white-color);
 }