diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4912bcf1..6c68c691 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -10,21 +10,21 @@ import { I18nextProvider } from 'react-i18next';
 import i18n from './i18n/Web';
 
 import { systemClient } from './services/System';
-import { Settings, defaultSettings } from './models';
+import { Settings } from './models';
 
 const defaultTheme: Theme = createTheme({
   palette: {
-    mode: defaultSettings.mode,
+    mode: new Settings().mode,
     background: {
-      default: defaultSettings.mode === 'dark' ? '#070707' : '#fff',
+      default: new Settings().mode === 'dark' ? '#070707' : '#fff',
     },
   },
-  typography: { fontSize: defaultSettings.fontSize },
+  typography: { fontSize: new Settings().fontSize },
 });
 
 const App = (): JSX.Element => {
   const [theme, setTheme] = useState<Theme>(defaultTheme);
-  const [settings, setSettings] = useState<Settings>(defaultSettings);
+  const [settings, setSettings] = useState<Settings>(new Settings());
 
   const updateTheme = function () {
     setTheme(
diff --git a/frontend/src/models/Settings.default.basic.ts b/frontend/src/models/Settings.default.basic.ts
index 7355db3b..005df634 100644
--- a/frontend/src/models/Settings.default.basic.ts
+++ b/frontend/src/models/Settings.default.basic.ts
@@ -1,13 +1,13 @@
 import { systemClient } from '../services/System';
-import { baseSettings, Settings } from './Settings.model';
+import BaseSettings from './Settings.model';
 
-const fontSizeCookie = systemClient.getCookie('settings_fontsize_basic');
-const fontSize = fontSizeCookie !== '' ? Number(fontSizeCookie) : 14;
+class Settings extends BaseSettings {
+  constructor() {
+    super();
+    const fontSizeCookie = systemClient.getCookie('settings_fontsize_basic');
+    this.fontSize = fontSizeCookie !== '' ? Number(fontSizeCookie) : 14;
+  }
+  public frontend: 'basic' | 'pro' = 'basic';
+}
 
-export const defaultSettings: Settings = {
-  ...baseSettings,
-  frontend: 'basic',
-  fontSize: fontSize,
-};
-
-export default defaultSettings;
+export default Settings;
diff --git a/frontend/src/models/Settings.default.pro.ts b/frontend/src/models/Settings.default.pro.ts
index bad6841c..835082fb 100644
--- a/frontend/src/models/Settings.default.pro.ts
+++ b/frontend/src/models/Settings.default.pro.ts
@@ -1,13 +1,13 @@
 import { systemClient } from '../services/System';
-import { baseSettings, Settings } from './Settings.model';
+import BaseSettings from './Settings.model';
 
-const fontSizeCookie = systemClient.getCookie('settings_fontsize_pro');
-const fontSize = fontSizeCookie !== '' ? Number(fontSizeCookie) : 12;
+class Settings extends BaseSettings {
+  constructor() {
+    super();
+    const fontSizeCookie = systemClient.getCookie('settings_fontsize_pro');
+    this.fontSize = fontSizeCookie !== '' ? Number(fontSizeCookie) : 12;
+  }
+  public frontend: 'basic' | 'pro' = 'pro';
+}
 
-export const defaultSettings: Settings = {
-  ...baseSettings,
-  frontend: 'pro',
-  fontSize: fontSize,
-};
-
-export default defaultSettings;
+export default Settings;
diff --git a/frontend/src/models/Settings.model.ts b/frontend/src/models/Settings.model.ts
index f503e2b6..2b8ed817 100644
--- a/frontend/src/models/Settings.model.ts
+++ b/frontend/src/models/Settings.model.ts
@@ -20,44 +20,34 @@ export type Language =
   | 'zh-SI'
   | 'zh-TR';
 
-export interface Settings {
-  frontend: 'basic' | 'pro';
-  mode: 'light' | 'dark';
-  fontSize: number;
-  language: Language;
-  freezeViewports: boolean;
-  network: 'mainnet' | 'testnet' | undefined;
-  coordinator: Coordinator | undefined;
-  unsafeClient: boolean;
-  hostedClient: boolean;
+class BaseSettings {
+  constructor() {
+    const modeCookie: 'light' | 'dark' | '' = systemClient.getCookie('settings_mode');
+    this.mode =
+      modeCookie !== ''
+        ? modeCookie
+        : window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+
+    const languageCookie = systemClient.getCookie('settings_language');
+    this.language =
+      languageCookie !== ''
+        ? languageCookie
+        : i18n.resolvedLanguage == null
+        ? 'en'
+        : i18n.resolvedLanguage.substring(0, 2);
+  }
+
+  public frontend: 'basic' | 'pro' = 'basic';
+  public mode: 'light' | 'dark' = 'light';
+  public fontSize: number = 14;
+  public language?: Language;
+  public freezeViewports: boolean = false;
+  public network: 'mainnet' | 'testnet' | undefined = 'mainnet';
+  public coordinator: Coordinator | undefined = undefined;
+  public unsafeClient: boolean = false;
+  public hostedClient: boolean = false;
 }
 
-const modeCookie: 'light' | 'dark' | '' = systemClient.getCookie('settings_mode');
-const mode: 'light' | 'dark' =
-  modeCookie !== ''
-    ? modeCookie
-    : window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-    ? 'dark'
-    : 'light';
-
-const languageCookie = systemClient.getCookie('settings_language');
-const language: Language =
-  languageCookie !== ''
-    ? languageCookie
-    : i18n.resolvedLanguage == null
-    ? 'en'
-    : i18n.resolvedLanguage.substring(0, 2);
-
-export const baseSettings: Settings = {
-  frontend: 'basic',
-  mode: mode,
-  fontSize: 14,
-  language: language,
-  freezeViewports: false,
-  network: undefined,
-  coordinator: undefined,
-  unsafeClient: false,
-  hostedClient: false,
-};
-
-export default Settings;
+export default BaseSettings;
diff --git a/frontend/src/models/index.ts b/frontend/src/models/index.ts
index 9dc67c3e..c41dfae2 100644
--- a/frontend/src/models/index.ts
+++ b/frontend/src/models/index.ts
@@ -1,5 +1,6 @@
 import Robot from './Robot.model';
-export { Robot };
+import Settings from './Settings.default.basic';
+export { Robot, Settings };
 
 export type { LimitList } from './Limit.model';
 export type { Limit } from './Limit.model';
@@ -8,12 +9,10 @@ export type { Order } from './Order.model';
 export type { PublicOrder } from './Book.model';
 export type { Book } from './Book.model';
 export type { Info } from './Info.model';
-export type { Settings } from './Settings.model';
 export type { Language } from './Settings.model';
 export type { Favorites } from './Favorites.model';
 export type { Coordinator } from './Coordinator.model';
 export type { APIChat, WebSocketsChatMessage, APIChatMessage } from './Chat.model';
 
 export { defaultMaker } from './Maker.model';
-export { defaultSettings } from './Settings.default.basic';
 export { defaultInfo } from './Info.model';