diff --git a/src/constants/styles/colors.ts b/src/constants/styles/colors.ts
index 0abf2e6..7fe0a26 100644
--- a/src/constants/styles/colors.ts
+++ b/src/constants/styles/colors.ts
@@ -55,4 +55,5 @@ type RiskColors = {
 type ComponentColors = {
   toggleBackground: string;
   inputBackground: string;
+  logoFill: string;
 };
diff --git a/src/hooks/useAppTheme.tsx b/src/hooks/useAppTheme.tsx
index e5f7168..c78582d 100644
--- a/src/hooks/useAppTheme.tsx
+++ b/src/hooks/useAppTheme.tsx
@@ -7,7 +7,10 @@ import { getAppTheme } from '@/state/configsSelectors';
 import { Themes } from '@/styles/themes';
 
 export const AppThemeProvider = ({ ...props }) => {
-    const theme: AppTheme = useSelector(getAppTheme);
-
-    return <ThemeProvider theme={Themes[theme]} {...props} />
+    return <ThemeProvider theme={useAppThemeContext()} {...props} />
 };
+
+export const useAppThemeContext = () => {
+    const theme: AppTheme = useSelector(getAppTheme);
+    return Themes[theme];
+}
\ No newline at end of file
diff --git a/src/icons/logo-short.tsx b/src/icons/logo-short.tsx
index c618ec4..81ffe2f 100644
--- a/src/icons/logo-short.tsx
+++ b/src/icons/logo-short.tsx
@@ -1,45 +1,52 @@
-const LogoShortIcon: React.FC<{ id?: string }> = ({ id }: { id?: string }) => (
-  <svg
-    width="135"
-    height="145"
-    viewBox="0 0 135 145"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M100.986 0L0 144.988H31.0048L132.514 0H100.986Z" fill="white" />
-    <path
-      d="M34.2346 0L63.9475 42.7232L48.4451 66.0268L2.58386 0H34.2346Z"
-      fill={`url(#${id ? `${id}_logo_gradient_0` : 'paint0_linear'})`}
-    />
-    <path
-      d="M103.995 145L71.0526 97.7455L86.555 75.0893L135 145H103.995Z"
-      fill={`url(#${id ? `${id}_logo_gradient_1` : 'paint1_linear'})`}
-    />
-    <defs>
-      <linearGradient
-        id={id ? `${id}_logo_gradient_0` : 'paint0_linear'}
-        x1="27.1293"
-        y1="9.0625"
-        x2="69.773"
-        y2="60.4324"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="white" />
-        <stop offset="1" stopColor="white" stopOpacity="0.55" />
-      </linearGradient>
-      <linearGradient
-        id={id ? `${id}_logo_gradient_1` : 'paint1_linear'}
-        x1="111.1"
-        y1="133.996"
-        x2="58.6959"
-        y2="63.4999"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#6966FF" />
-        <stop offset="1" stopColor="#6966FF" stopOpacity="0.36" />
-      </linearGradient>
-    </defs>
-  </svg>
-);
+import { useAppThemeContext } from '@/hooks/useAppTheme';
+
+const LogoShortIcon: React.FC<{ id?: string }> = ({ id }: { id?: string }) => {
+  const theme = useAppThemeContext();
+  const fill = theme.logoFill;
+
+  return (
+    <svg
+      width="135"
+      height="145"
+      viewBox="0 0 135 145"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M100.986 0L0 144.988H31.0048L132.514 0H100.986Z" fill={fill} />
+      <path
+        d="M34.2346 0L63.9475 42.7232L48.4451 66.0268L2.58386 0H34.2346Z"
+        fill={`url(#${id ? `${id}_logo_gradient_0` : 'paint0_linear'})`}
+      />
+      <path
+        d="M103.995 145L71.0526 97.7455L86.555 75.0893L135 145H103.995Z"
+        fill={`url(#${id ? `${id}_logo_gradient_1` : 'paint1_linear'})`}
+      />
+      <defs>
+        <linearGradient
+          id={id ? `${id}_logo_gradient_0` : 'paint0_linear'}
+          x1="27.1293"
+          y1="9.0625"
+          x2="69.773"
+          y2="60.4324"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={fill} />
+          <stop offset="1" stopColor={fill} stopOpacity="0.55" />
+        </linearGradient>
+        <linearGradient
+          id={id ? `${id}_logo_gradient_1` : 'paint1_linear'}
+          x1="111.1"
+          y1="133.996"
+          x2="58.6959"
+          y2="63.4999"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#6966FF" />
+          <stop offset="1" stopColor="#6966FF" stopOpacity="0.36" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
 
 export default LogoShortIcon;
diff --git a/src/layout/Header/HeaderDesktop.tsx b/src/layout/Header/HeaderDesktop.tsx
index 97e5fd7..cf7d435 100644
--- a/src/layout/Header/HeaderDesktop.tsx
+++ b/src/layout/Header/HeaderDesktop.tsx
@@ -1,7 +1,6 @@
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { Link } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
-
 import { ButtonShape } from '@/constants/buttons';
 import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
diff --git a/src/styles/themes.ts b/src/styles/themes.ts
index 106ad72..7f0d4e5 100644
--- a/src/styles/themes.ts
+++ b/src/styles/themes.ts
@@ -36,6 +36,7 @@ const ClassicTheme: ThemeColors = {
 
   inputBackground: ColorToken.GrayBlue3,
   toggleBackground: ColorToken.GrayBlue3,
+  logoFill: ColorToken.White,
 };
 
 const DarkTheme: ThemeColors = {
@@ -72,6 +73,7 @@ const DarkTheme: ThemeColors = {
 
   inputBackground: ColorToken.DarkGray6,
   toggleBackground: ColorToken.DarkGray6,
+  logoFill: ColorToken.White,
 };
 
 const LightTheme: ThemeColors = {
@@ -108,6 +110,7 @@ const LightTheme: ThemeColors = {
 
   inputBackground: ColorToken.White,
   toggleBackground: ColorToken.LightGray4,
+  logoFill: ColorToken.Black,
 };
 
 export const Themes = {