diff --git a/public/chart-background-light.png b/public/chart-background-light.png
deleted file mode 100644
index 39efa60..0000000
Binary files a/public/chart-background-light.png and /dev/null differ
diff --git a/public/chart-background.png b/public/chart-background.png
deleted file mode 100644
index c7169a3..0000000
Binary files a/public/chart-background.png and /dev/null differ
diff --git a/public/Dots-dark.svg b/public/chart-dots-background-dark.svg
similarity index 100%
rename from public/Dots-dark.svg
rename to public/chart-dots-background-dark.svg
diff --git a/public/Dots-light.svg b/public/chart-dots-background-light.svg
similarity index 100%
rename from public/Dots-light.svg
rename to public/chart-dots-background-light.svg
diff --git a/src/views/charts/PnlChart.tsx b/src/views/charts/PnlChart.tsx
index 974ae0f..91b0fde 100644
--- a/src/views/charts/PnlChart.tsx
+++ b/src/views/charts/PnlChart.tsx
@@ -63,8 +63,8 @@ const MS_FOR_PERIOD = {
   [HistoricalPnlPeriod.Period90d.name]: 90 * timeUnits.day,
 };
 
-const DARK_CHART_BACKGROUND_URL = '/Dots-dark.svg';
-const LIGHT_CHART_BACKGROUND_URL = '/Dots-light.svg';
+const DARK_CHART_BACKGROUND_URL = '/chart-dots-background-dark.svg';
+const LIGHT_CHART_BACKGROUND_URL = '/chart-dots-background-light.svg';
 
 type ElementProps = {
   onTooltipContext?: (tooltipContext: TooltipContextType<PnlDatum>) => void;
diff --git a/src/views/dialogs/DisplaySettingsDialog.tsx b/src/views/dialogs/DisplaySettingsDialog.tsx
index 4b1b2fd..bb5200f 100644
--- a/src/views/dialogs/DisplaySettingsDialog.tsx
+++ b/src/views/dialogs/DisplaySettingsDialog.tsx
@@ -7,12 +7,13 @@ import { useStringGetter } from '@/hooks';
 
 import {
   AppTheme,
+  type AppThemeSetting,
   AppThemeSystemSetting,
   AppColorMode,
   setAppThemeSetting,
   setAppColorMode,
 } from '@/state/configs';
-import { getAppThemeSetting, getAppColorMode } from '@/state/configsSelectors';
+import { getAppTheme, getAppThemeSetting, getAppColorMode } from '@/state/configsSelectors';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 import { Themes } from '@/styles/themes';
@@ -33,7 +34,8 @@ export const DisplaySettingsDialog = ({ setIsOpen }: ElementProps) => {
   const dispatch = useDispatch();
   const stringGetter = useStringGetter();
 
-  const currentTheme: AppTheme = useSelector(getAppThemeSetting);
+  const currentThemeSetting: AppThemeSetting = useSelector(getAppThemeSetting);
+  const currentTheme: AppTheme = useSelector(getAppTheme);
   const currentColorMode: AppColorMode = useSelector(getAppColorMode);
 
   const sectionHeader = (heading: string) => {
@@ -47,7 +49,7 @@ export const DisplaySettingsDialog = ({ setIsOpen }: ElementProps) => {
 
   const themePanels = () => {
     return (
-      <Styled.AppThemeRoot value={currentTheme}>
+      <Styled.AppThemeRoot value={currentThemeSetting}>
         {[
           {
             themeSetting: AppTheme.Classic,
@@ -66,8 +68,7 @@ export const DisplaySettingsDialog = ({ setIsOpen }: ElementProps) => {
             label: STRING_KEYS.LIGHT,
           },
         ].map(({ themeSetting, label }) => {
-          const theme =
-            themeSetting === AppThemeSystemSetting.System ? AppTheme.Dark : themeSetting;
+          const theme = themeSetting === AppThemeSystemSetting.System ? currentTheme : themeSetting;
 
           const backgroundColor = Themes[theme][currentColorMode].layer2;
           const gridColor = Themes[theme][currentColorMode].borderDefault;