diff --git a/build/renderer/webpack.config.common.ts b/build/renderer/webpack.config.common.ts
index bde4362..2f1f361 100644
--- a/build/renderer/webpack.config.common.ts
+++ b/build/renderer/webpack.config.common.ts
@@ -4,14 +4,14 @@ import HtmlWebpackPlugin from 'html-webpack-plugin'
 import baseConfig from '../webpack.config.base'
 import { src, dist } from '../paths'
 
-const context = path.resolve(src, './renderer')
+const context = path.resolve(src, './ui')
 
 const config = merge(baseConfig, {
   context,
   target: ['web'],
   entry: ['./index.tsx'],
   output: {
-    path: path.resolve(dist, './renderer'),
+    path: path.resolve(dist, './ui'),
     publicPath: './',
   },
   plugins: [
diff --git a/package-lock.json b/package-lock.json
index a7d5fa2..df4baa1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@fluentui/react-icons": "^2.0.218",
         "electron-squirrel-startup": "^1.0.0",
         "lodash.get": "^4.4.2",
+        "lodash.set": "^4.3.2",
         "mobx": "^6.10.2",
         "mobx-react-lite": "^4.0.4",
         "react": "^18.2.0",
@@ -39,6 +40,7 @@
         "@electron-forge/publisher-github": "^6.4.2",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
         "@types/lodash.get": "^4.4.7",
+        "@types/lodash.set": "^4.3.9",
         "@types/node": "^20.5.9",
         "@types/react": "^18.2.21",
         "@types/react-dom": "^18.2.7",
@@ -5802,6 +5804,15 @@
         "@types/lodash": "*"
       }
     },
+    "node_modules/@types/lodash.set": {
+      "version": "4.3.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.set/-/lodash.set-4.3.9.tgz",
+      "integrity": "sha512-KOxyNkZpbaggVmqbpr82N2tDVTx05/3/j0f50Es1prxrWB0XYf9p3QNxqcbWb7P1Q9wlvsUSlCFnwlPCIJ46PQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/mime": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
@@ -13577,6 +13588,11 @@
       "integrity": "sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==",
       "dev": true
     },
+    "node_modules/lodash.set": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/lodash.set/-/lodash.set-4.3.2.tgz",
+      "integrity": "sha512-4hNPN5jlm/N/HLMCO43v8BXKq9Z7QdAGc/VGrRD61w8gN9g/6jF9A4L1pbUgBLCffi0w9VsXfTOij5x8iTyFvg=="
+    },
     "node_modules/lodash.snakecase": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz",
diff --git a/package.json b/package.json
index 99f396d..4d685af 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "@electron-forge/publisher-github": "^6.4.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@types/lodash.get": "^4.4.7",
+    "@types/lodash.set": "^4.3.9",
     "@types/node": "^20.5.9",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
@@ -92,6 +93,7 @@
     "@fluentui/react-icons": "^2.0.218",
     "electron-squirrel-startup": "^1.0.0",
     "lodash.get": "^4.4.2",
+    "lodash.set": "^4.3.2",
     "mobx": "^6.10.2",
     "mobx-react-lite": "^4.0.4",
     "react": "^18.2.0",
diff --git a/src/utils/browser/fetch.ts b/src/base/browser/fetch.ts
similarity index 100%
rename from src/utils/browser/fetch.ts
rename to src/base/browser/fetch.ts
diff --git a/src/utils/browser/shell.ts b/src/base/browser/shell.ts
similarity index 100%
rename from src/utils/browser/shell.ts
rename to src/base/browser/shell.ts
diff --git a/src/utils/common/date.ts b/src/base/common/date.ts
similarity index 100%
rename from src/utils/common/date.ts
rename to src/base/common/date.ts
diff --git a/src/utils/electron-main/env.ts b/src/base/electron-main/env.ts
similarity index 100%
rename from src/utils/electron-main/env.ts
rename to src/base/electron-main/env.ts
diff --git a/src/utils/node/feed.ts b/src/base/node/feed.ts
similarity index 100%
rename from src/utils/node/feed.ts
rename to src/base/node/feed.ts
diff --git a/src/utils/node/fs/index.ts b/src/base/node/fs/index.ts
similarity index 100%
rename from src/utils/node/fs/index.ts
rename to src/base/node/fs/index.ts
diff --git a/src/utils/node/fs/promise.ts b/src/base/node/fs/promise.ts
similarity index 100%
rename from src/utils/node/fs/promise.ts
rename to src/base/node/fs/promise.ts
diff --git a/src/main/main.ts b/src/main/main.ts
index c79fa8e..96b41c5 100644
--- a/src/main/main.ts
+++ b/src/main/main.ts
@@ -1,11 +1,15 @@
 import '@/main/setup'
+import * as fs from 'node:fs'
+import { join } from 'node:path'
 import { app } from 'electron'
-import { isMac } from '@/utils/electron-main/env'
-import { createWindow } from './window'
+import { isMac } from '@/base/electron-main/env'
+import { createPushChannel } from '@/services/push/electron-main/push'
+import { register as registerCommands } from '@/services/commands/electron-main/commands'
+import { createWindow } from '@/services/window/electron-main/window'
+import * as themeService from '@/services/theme/electron-main/theme'
+import * as settingService from '@/services/settings/electron-main/settings'
 import { createApp as createReaderApp } from './reader'
 import { createApp as createSettingsApp } from './setttings'
-import { createPushChannel } from './push'
-import { register as registerCommands } from './commands'
 
 registerCommands()
 
@@ -15,6 +19,21 @@ createReaderApp()
 const window = createWindow()
 createPushChannel(window)
 
+themeService.init()
+
+settingService.on('change', (path, dataPath, oldDataPath) => {
+  if (path !== 'dataPath' || !dataPath) {
+    return
+  }
+
+  if (!fs.existsSync(join(dataPath, 'emo.db'))) {
+    fs.renameSync(join(oldDataPath, 'emo.db'), join(dataPath, 'emo.db'))
+  }
+
+  app.relaunch()
+  app.exit()
+})
+
 app.on('window-all-closed', () => {
   if (!isMac) {
     app.quit()
diff --git a/src/main/reader/db.ts b/src/main/reader/db.ts
index 857dd1b..1fcca24 100644
--- a/src/main/reader/db.ts
+++ b/src/main/reader/db.ts
@@ -1,5 +1,5 @@
-import { exec } from '@/main/db'
-import { logger } from '@/utils/electron-main/logger'
+import { exec } from '@/services/db/electron-main/db'
+import { logger } from '@/services/logger/electron-main/logger'
 
 const sql = `
   CREATE TABLE IF NOT EXISTS feeds (
diff --git a/src/main/reader/index.ts b/src/main/reader/index.ts
index 333b5ed..6969cc3 100644
--- a/src/main/reader/index.ts
+++ b/src/main/reader/index.ts
@@ -1,6 +1,6 @@
+import { router } from '@/router/reader/electron-main'
+import { startCrawler } from '@/services/reader/electron-main/crawler'
 import { init as initDB } from './db'
-import { router } from './router'
-import { startCrawler } from './crawler'
 
 export function createApp() {
   initDB()
diff --git a/src/main/reader/router/router.ts b/src/main/reader/router/router.ts
deleted file mode 100644
index 04943b3..0000000
--- a/src/main/reader/router/router.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Router } from '@/main/router'
-
-export const router = new Router({ prefix: '/reader' })
diff --git a/src/main/setttings/index.ts b/src/main/setttings/index.ts
index a9ffed9..27b15af 100644
--- a/src/main/setttings/index.ts
+++ b/src/main/setttings/index.ts
@@ -1,61 +1,5 @@
-import * as path from 'node:path'
-import * as fs from 'node:fs'
-import { app, nativeTheme } from 'electron'
-import { Router } from '@/main/router'
-import { readJSON, writeJSON } from '@/utils/node/fs'
-
-const router = new Router({ prefix: '/settings' })
-
-const settingsFilePath = path.join(app.getPath('userData'), 'settings.json')
-
-type Settings = {
-  locale: string
-  appearance: 'light' | 'dark' | 'auto'
-  defaultDataPath: string
-  dataPath: string
-}
-
-export const settings: Settings = {
-  locale: '',
-  appearance: 'auto',
-  defaultDataPath: app.getPath('userData'),
-  dataPath: app.getPath('userData'),
-  ...readJSON(settingsFilePath),
-}
-
-const getTheme = () => settings.appearance === 'auto' ? 'system' : settings.appearance
-
-router.use('get', () => settings)
-
-router.use('put', (_, data: Partial<Settings> = {}) => {
-  let restart = false
-
-  if (data.dataPath && data.dataPath !== settings.dataPath) {
-    if (!fs.existsSync(path.join(data.dataPath, 'emo.db'))) {
-      fs.renameSync(path.join(settings.dataPath, 'emo.db'), path.join(data.dataPath, 'emo.db'))
-    }
-
-    restart = true
-  }
-
-  Object.assign(settings, data)
-
-  nativeTheme.themeSource = getTheme()
-
-  writeJSON(settingsFilePath, settings)
-
-  if (restart) {
-    app.relaunch()
-    app.exit()
-  }
-})
+import { router } from '@/router/settings/electron-main/settings'
 
 export const createApp = () => {
-  app.whenReady()
-    .then(() => {
-      settings.locale = settings.locale || app.getLocale()
-      nativeTheme.themeSource = getTheme()
-    })
-
   router.listen()
 }
diff --git a/src/main/setup.ts b/src/main/setup.ts
index 702d2c5..dca693e 100644
--- a/src/main/setup.ts
+++ b/src/main/setup.ts
@@ -1,5 +1,5 @@
 import { app } from 'electron'
-import { isDev } from '@/utils/electron-main/env'
+import { isDev } from '@/base/electron-main/env'
 
 if (isDev) {
   app.setName(`${app.getName()}-dev`)
diff --git a/src/main/reader/router/article.ts b/src/router/reader/electron-main/article.ts
similarity index 83%
rename from src/main/reader/router/article.ts
rename to src/router/reader/electron-main/article.ts
index 8300d05..0038f62 100644
--- a/src/main/reader/router/article.ts
+++ b/src/router/reader/electron-main/article.ts
@@ -1,4 +1,4 @@
-import * as articleService from '@/main/reader/services/article'
+import * as articleService from '@/services/reader/electron-main/article'
 import { router } from './router'
 
 router.get('/articles', async (_, params) => {
diff --git a/src/main/reader/router/feed.ts b/src/router/reader/electron-main/feed.ts
similarity index 81%
rename from src/main/reader/router/feed.ts
rename to src/router/reader/electron-main/feed.ts
index 0988688..120f9d2 100644
--- a/src/main/reader/router/feed.ts
+++ b/src/router/reader/electron-main/feed.ts
@@ -1,8 +1,8 @@
 import { Feed } from '@/types/reader'
-import * as feedService from '@/main/reader/services/feed'
-import * as articleService from '@/main/reader/services/article'
-import { parseURL } from '@/utils/node/feed'
-import { logger } from '@/utils/electron-main/logger'
+import * as feedService from '@/services/reader/electron-main/feed'
+import * as articleService from '@/services/reader/electron-main/article'
+import { parseURL } from '@/base/node/feed'
+import { logger } from '@/services/logger/electron-main/logger'
 import { router } from './router'
 
 router.get('/feed/preflight', async (_, url: string) => {
diff --git a/src/main/reader/router/index.ts b/src/router/reader/electron-main/index.ts
similarity index 100%
rename from src/main/reader/router/index.ts
rename to src/router/reader/electron-main/index.ts
diff --git a/src/router/reader/electron-main/router.ts b/src/router/reader/electron-main/router.ts
new file mode 100644
index 0000000..0d57e2b
--- /dev/null
+++ b/src/router/reader/electron-main/router.ts
@@ -0,0 +1,3 @@
+import { Router } from '@/services/router/electron-main/router'
+
+export const router = new Router({ prefix: '/reader' })
diff --git a/src/router/settings/electron-main/settings.ts b/src/router/settings/electron-main/settings.ts
new file mode 100644
index 0000000..2c9aa06
--- /dev/null
+++ b/src/router/settings/electron-main/settings.ts
@@ -0,0 +1,10 @@
+import { Router } from '@/services/router/electron-main/router'
+import * as settingService from '@/services/settings/electron-main/settings'
+
+export const router = new Router({ prefix: '/settings' })
+
+// const getTheme = () => settings.appearance === 'auto' ? 'system' : settings.appearance
+
+router.use('get', () => settingService.get())
+
+router.use('set', (_, { path, value }: { path: string, value: any }) => settingService.set(path, value))
diff --git a/src/main/commands.ts b/src/services/commands/electron-main/commands.ts
similarity index 100%
rename from src/main/commands.ts
rename to src/services/commands/electron-main/commands.ts
diff --git a/src/main/db.ts b/src/services/db/electron-main/db.ts
similarity index 86%
rename from src/main/db.ts
rename to src/services/db/electron-main/db.ts
index ab133a4..2f0b3af 100644
--- a/src/main/db.ts
+++ b/src/services/db/electron-main/db.ts
@@ -1,13 +1,11 @@
 import * as path from 'node:path'
 import { verbose } from 'sqlite3'
-import { logger } from '@/utils/electron-main/logger'
+import { logger } from '@/services/logger/electron-main/logger'
+import * as settingService from '@/services/settings/electron-main/settings'
 
-import { settings } from './setttings'
-
-const { dataPath } = settings
 const { Database } = verbose()
 
-const file = path.join(dataPath, 'emo.db')
+const file = path.join(settingService.get('dataPath'), 'emo.db')
 
 const db = new Database(file)
 
diff --git a/src/utils/electron-main/logger.ts b/src/services/logger/electron-main/logger.ts
similarity index 100%
rename from src/utils/electron-main/logger.ts
rename to src/services/logger/electron-main/logger.ts
diff --git a/src/main/push.ts b/src/services/push/electron-main/push.ts
similarity index 75%
rename from src/main/push.ts
rename to src/services/push/electron-main/push.ts
index 342e2bd..10f3016 100644
--- a/src/main/push.ts
+++ b/src/services/push/electron-main/push.ts
@@ -1,4 +1,4 @@
-import { Window } from './window'
+import { Window } from '../../window/electron-main/window'
 
 let window: Window
 
diff --git a/src/renderer/services/reader/article.ts b/src/services/reader/browser/article.ts
similarity index 92%
rename from src/renderer/services/reader/article.ts
rename to src/services/reader/browser/article.ts
index d03cabf..33bbb1f 100644
--- a/src/renderer/services/reader/article.ts
+++ b/src/services/reader/browser/article.ts
@@ -1,4 +1,4 @@
-import fetch from '@/utils/browser/fetch'
+import fetch from '@/base/browser/fetch'
 import { Tab, Article } from '@/types/reader'
 
 export const find = (param: { tab: Tab | number, page: number, size: number }) => fetch('/reader/get/articles', param)
diff --git a/src/renderer/services/reader/feed.ts b/src/services/reader/browser/feed.ts
similarity index 88%
rename from src/renderer/services/reader/feed.ts
rename to src/services/reader/browser/feed.ts
index ffbb9ad..aad4334 100644
--- a/src/renderer/services/reader/feed.ts
+++ b/src/services/reader/browser/feed.ts
@@ -1,4 +1,4 @@
-import fetch from '@/utils/browser/fetch'
+import fetch from '@/base/browser/fetch'
 
 export const preflight = (url: string) => fetch('/reader/get/feed/preflight', url)
 
diff --git a/src/main/reader/services/article.ts b/src/services/reader/electron-main/article.ts
similarity index 96%
rename from src/main/reader/services/article.ts
rename to src/services/reader/electron-main/article.ts
index c5144cf..708d008 100644
--- a/src/main/reader/services/article.ts
+++ b/src/services/reader/electron-main/article.ts
@@ -1,4 +1,4 @@
-import db, { get, all, run } from '@/main/db'
+import db, { get, all, run } from '@/services/db/electron-main/db'
 import { Article, Tab } from '@/types/reader'
 
 export const upsert = (articles: Article | Article[]) => new Promise<void>((resolve, reject) => {
diff --git a/src/main/reader/crawler.ts b/src/services/reader/electron-main/crawler.ts
similarity index 83%
rename from src/main/reader/crawler.ts
rename to src/services/reader/electron-main/crawler.ts
index 0cfdfe0..44aab7c 100644
--- a/src/main/reader/crawler.ts
+++ b/src/services/reader/electron-main/crawler.ts
@@ -1,7 +1,7 @@
-import * as feedService from '@/main/reader/services/feed'
-import * as articleService from '@/main/reader/services/article'
-import { parseURL } from '@/utils/node/feed'
-import { logger } from '@/utils/electron-main/logger'
+import * as feedService from '@/services/reader/electron-main/feed'
+import * as articleService from '@/services/reader/electron-main/article'
+import { parseURL } from '@/base/node/feed'
+import { logger } from '@/services/logger/electron-main/logger'
 import { Feed } from '@/types/reader'
 
 const crawlOne = async (f: Feed) => {
diff --git a/src/main/reader/services/feed.ts b/src/services/reader/electron-main/feed.ts
similarity index 93%
rename from src/main/reader/services/feed.ts
rename to src/services/reader/electron-main/feed.ts
index 5133d2c..7c7cf67 100644
--- a/src/main/reader/services/feed.ts
+++ b/src/services/reader/electron-main/feed.ts
@@ -1,5 +1,5 @@
-import db, { run, get, all } from '@/main/db'
-import { push } from '@/main/push'
+import db, { run, get, all } from '@/services/db/electron-main/db'
+import { push } from '@/services/push/electron-main/push'
 import { Feed } from '@/types/reader'
 
 export const upsert = (feed: Feed) => {
diff --git a/src/utils/browser/remote-event.ts b/src/services/remote/browser/remote.ts
similarity index 100%
rename from src/utils/browser/remote-event.ts
rename to src/services/remote/browser/remote.ts
diff --git a/src/main/router.ts b/src/services/router/electron-main/router.ts
similarity index 96%
rename from src/main/router.ts
rename to src/services/router/electron-main/router.ts
index 22b0c31..e839d21 100644
--- a/src/main/router.ts
+++ b/src/services/router/electron-main/router.ts
@@ -1,5 +1,5 @@
 import { app, ipcMain } from 'electron'
-import { logger } from '@/utils/electron-main/logger'
+import { logger } from '@/services/logger/electron-main/logger'
 
 type RouteHandler = (ch: string, data?: any) => any
 
diff --git a/src/services/settings/browser/settings.ts b/src/services/settings/browser/settings.ts
new file mode 100644
index 0000000..d43abe6
--- /dev/null
+++ b/src/services/settings/browser/settings.ts
@@ -0,0 +1,5 @@
+import fetch from '@/base/browser/fetch'
+
+export const get = (path?: string) => fetch('/settings/get', path)
+
+export const set = (path: string, value: any) => fetch('/settings/set', { path, value })
diff --git a/src/services/settings/electron-main/settings.ts b/src/services/settings/electron-main/settings.ts
new file mode 100644
index 0000000..60de1e1
--- /dev/null
+++ b/src/services/settings/electron-main/settings.ts
@@ -0,0 +1,46 @@
+import { join } from 'node:path'
+import { EventEmitter } from 'node:events'
+import { app } from 'electron'
+import _get from 'lodash.get'
+import _set from 'lodash.set'
+import { readJSON, writeJSON } from '@/base/node/fs'
+
+const emitter = new EventEmitter()
+const settingsFilePath = join(app.getPath('userData'), 'settings.json')
+
+export type Settings = {
+  locale: string
+  appearance: 'light' | 'dark' | 'auto'
+  defaultDataPath: string
+  dataPath: string
+}
+
+const settings: Settings = {
+  locale: '',
+  appearance: 'auto',
+  defaultDataPath: app.getPath('userData'),
+  dataPath: app.getPath('userData'),
+  ...readJSON(settingsFilePath),
+}
+
+export const get = (path?: string) => path ? _get(settings, path) : settings
+
+export const set = (path: string, value: any) => {
+  const oldValue = get(path)
+
+  _set(settings, path, value)
+  writeJSON(settingsFilePath, settings)
+
+  if (oldValue !== value) {
+    emitter.emit('change', path, value, oldValue)
+  }
+}
+
+type changeListener = (path: string, newValue: any, oldValue: any) => void
+
+export const on = (eventName: 'change', listener: changeListener): EventEmitter => emitter.on(eventName, listener)
+
+app.whenReady()
+  .then(() => {
+    settings.locale = settings.locale || app.getLocale()
+  })
diff --git a/src/services/theme/electron-main/theme.ts b/src/services/theme/electron-main/theme.ts
new file mode 100644
index 0000000..638f132
--- /dev/null
+++ b/src/services/theme/electron-main/theme.ts
@@ -0,0 +1,20 @@
+import { app, nativeTheme } from 'electron'
+import * as settingService from '@/services/settings/electron-main/settings'
+
+const getTheme = () => {
+  const appearance = settingService.get('appearance')
+  return appearance === 'auto' ? 'system' : appearance
+}
+
+export const init = () => {
+  app.whenReady()
+    .then(() => {
+      nativeTheme.themeSource = getTheme()
+    })
+
+  settingService.on('change', (path) => {
+    if (path === 'appearance') {
+      nativeTheme.themeSource = getTheme()
+    }
+  })
+}
diff --git a/src/main/window.ts b/src/services/window/electron-main/window.ts
similarity index 91%
rename from src/main/window.ts
rename to src/services/window/electron-main/window.ts
index 23e4ac3..ef255d3 100644
--- a/src/main/window.ts
+++ b/src/services/window/electron-main/window.ts
@@ -1,7 +1,7 @@
 import * as path from 'node:path'
 import { app, BrowserWindow } from 'electron'
-import { isDev, isMac, isWin } from '@/utils/electron-main/env'
-import { WindowStateManager } from './windowState'
+import { isDev, isMac, isWin } from '@/base/electron-main/env'
+import { WindowStateManager } from '@/services/windowState/electron-main/windowState'
 
 export class Window {
   window: BrowserWindow | null = null
diff --git a/src/main/windowState.ts b/src/services/windowState/electron-main/windowState.ts
similarity index 97%
rename from src/main/windowState.ts
rename to src/services/windowState/electron-main/windowState.ts
index 15c9478..d73b9b1 100644
--- a/src/main/windowState.ts
+++ b/src/services/windowState/electron-main/windowState.ts
@@ -1,7 +1,7 @@
 import * as path from 'node:path'
 import { app } from 'electron'
 import type { BrowserWindow } from 'electron'
-import { readJSON, writeJSON } from '@/utils/node/fs'
+import { readJSON, writeJSON } from '@/base/node/fs'
 
 type State = {
   width: number
diff --git a/src/renderer/App.tsx b/src/ui/App.tsx
similarity index 84%
rename from src/renderer/App.tsx
rename to src/ui/App.tsx
index 1cf75b5..d657478 100644
--- a/src/renderer/App.tsx
+++ b/src/ui/App.tsx
@@ -6,10 +6,10 @@ import {
 } from '@fluentui/react-components'
 import { observer } from 'mobx-react-lite'
 
-import Nav from '@/renderer/Nav'
-import { store } from '@/renderer/store'
-import ReaderApp from '@/renderer/apps/reader'
-import Settings from '@/renderer/apps/settings'
+import Nav from '@/ui/Nav'
+import { store } from '@/ui/store'
+import ReaderApp from '@/ui/apps/reader'
+import Settings from '@/ui/apps/settings'
 import { Apps } from '@/types/common'
 
 const apps: { [key in Apps]?: () => ReactNode } = {
diff --git a/src/renderer/Nav/index.tsx b/src/ui/Nav/index.tsx
similarity index 100%
rename from src/renderer/Nav/index.tsx
rename to src/ui/Nav/index.tsx
diff --git a/src/renderer/Nav/item.tsx b/src/ui/Nav/item.tsx
similarity index 96%
rename from src/renderer/Nav/item.tsx
rename to src/ui/Nav/item.tsx
index 4f56f15..6b47fa9 100644
--- a/src/renderer/Nav/item.tsx
+++ b/src/ui/Nav/item.tsx
@@ -3,7 +3,7 @@ import { makeStyles, tokens } from '@fluentui/react-components'
 import { observer } from 'mobx-react-lite'
 
 import { Apps } from '@/types/common'
-import { store } from '@/renderer/store'
+import { store } from '@/ui/store'
 
 type Props = {
   id: Apps
diff --git a/src/renderer/apps/reader/MainPanel/Article/Toolbar/back-button.tsx b/src/ui/apps/reader/MainPanel/Article/Toolbar/back-button.tsx
similarity index 71%
rename from src/renderer/apps/reader/MainPanel/Article/Toolbar/back-button.tsx
rename to src/ui/apps/reader/MainPanel/Article/Toolbar/back-button.tsx
index 13f8729..8701456 100644
--- a/src/renderer/apps/reader/MainPanel/Article/Toolbar/back-button.tsx
+++ b/src/ui/apps/reader/MainPanel/Article/Toolbar/back-button.tsx
@@ -1,6 +1,6 @@
 import { ArrowLeftFilled } from '@fluentui/react-icons'
-import { Button } from '@/renderer/apps/reader/components/toolbar'
-import { store } from '@/renderer/store'
+import { Button } from '@/ui/apps/reader/components/toolbar'
+import { store } from '@/ui/store'
 
 const { readerStore } = store
 
diff --git a/src/renderer/apps/reader/MainPanel/Article/Toolbar/index.tsx b/src/ui/apps/reader/MainPanel/Article/Toolbar/index.tsx
similarity index 82%
rename from src/renderer/apps/reader/MainPanel/Article/Toolbar/index.tsx
rename to src/ui/apps/reader/MainPanel/Article/Toolbar/index.tsx
index b565e7d..3d1dd84 100644
--- a/src/renderer/apps/reader/MainPanel/Article/Toolbar/index.tsx
+++ b/src/ui/apps/reader/MainPanel/Article/Toolbar/index.tsx
@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react-lite'
-import { MarkReadButton, StarButton } from '@/renderer/apps/reader/components/toolbar'
-import { store } from '@/renderer/store'
+import { MarkReadButton, StarButton } from '@/ui/apps/reader/components/toolbar'
+import { store } from '@/ui/store'
 import BackToListButton from './back-button'
 import OpenExternalButton from './open-external-btn'
 
diff --git a/src/renderer/apps/reader/MainPanel/Article/Toolbar/open-external-btn.tsx b/src/ui/apps/reader/MainPanel/Article/Toolbar/open-external-btn.tsx
similarity index 77%
rename from src/renderer/apps/reader/MainPanel/Article/Toolbar/open-external-btn.tsx
rename to src/ui/apps/reader/MainPanel/Article/Toolbar/open-external-btn.tsx
index fc6b2e0..649bd02 100644
--- a/src/renderer/apps/reader/MainPanel/Article/Toolbar/open-external-btn.tsx
+++ b/src/ui/apps/reader/MainPanel/Article/Toolbar/open-external-btn.tsx
@@ -1,7 +1,7 @@
 import intl from 'react-intl-universal'
 import { ArrowUpRightRegular } from '@fluentui/react-icons'
-import { Button } from '@/renderer/apps/reader/components/toolbar'
-import { openExternal } from '@/utils/browser/shell'
+import { Button } from '@/ui/apps/reader/components/toolbar'
+import { openExternal } from '@/base/browser/shell'
 
 type Props = {
   url: string
diff --git a/src/renderer/apps/reader/MainPanel/Article/content.tsx b/src/ui/apps/reader/MainPanel/Article/content.tsx
similarity index 94%
rename from src/renderer/apps/reader/MainPanel/Article/content.tsx
rename to src/ui/apps/reader/MainPanel/Article/content.tsx
index 963f5c9..904c438 100644
--- a/src/renderer/apps/reader/MainPanel/Article/content.tsx
+++ b/src/ui/apps/reader/MainPanel/Article/content.tsx
@@ -2,9 +2,9 @@
 import { useEffect, useRef } from 'react'
 import { makeStyles, tokens } from '@fluentui/react-components'
 import { observer } from 'mobx-react-lite'
-import { store } from '@/renderer/store'
-import { format as formatTime } from '@/utils/common/date'
-import { openExternal } from '@/utils/browser/shell'
+import { store } from '@/ui/store'
+import { format as formatTime } from '@/base/common/date'
+import { openExternal } from '@/base/browser/shell'
 
 const { readerStore } = store
 
diff --git a/src/renderer/apps/reader/MainPanel/Article/index.tsx b/src/ui/apps/reader/MainPanel/Article/index.tsx
similarity index 93%
rename from src/renderer/apps/reader/MainPanel/Article/index.tsx
rename to src/ui/apps/reader/MainPanel/Article/index.tsx
index 0130828..6562e44 100644
--- a/src/renderer/apps/reader/MainPanel/Article/index.tsx
+++ b/src/ui/apps/reader/MainPanel/Article/index.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 import { observer } from 'mobx-react-lite'
-import { store } from '@/renderer/store'
+import { store } from '@/ui/store'
 import Toolbar from './Toolbar'
 import Content from './content'
 
diff --git a/src/renderer/apps/reader/MainPanel/List/index.tsx b/src/ui/apps/reader/MainPanel/List/index.tsx
similarity index 94%
rename from src/renderer/apps/reader/MainPanel/List/index.tsx
rename to src/ui/apps/reader/MainPanel/List/index.tsx
index e48a768..ec6ea41 100644
--- a/src/renderer/apps/reader/MainPanel/List/index.tsx
+++ b/src/ui/apps/reader/MainPanel/List/index.tsx
@@ -1,5 +1,5 @@
 import { observer } from 'mobx-react-lite'
-import { store } from '@/renderer/store'
+import { store } from '@/ui/store'
 
 import Item from './item'
 import Toolbar from './toolbar'
diff --git a/src/renderer/apps/reader/MainPanel/List/item.tsx b/src/ui/apps/reader/MainPanel/List/item.tsx
similarity index 94%
rename from src/renderer/apps/reader/MainPanel/List/item.tsx
rename to src/ui/apps/reader/MainPanel/List/item.tsx
index 796576a..0d14ede 100644
--- a/src/renderer/apps/reader/MainPanel/List/item.tsx
+++ b/src/ui/apps/reader/MainPanel/List/item.tsx
@@ -7,10 +7,10 @@ import {
 } from '@fluentui/react-components'
 import type { CheckboxProps } from '@fluentui/react-components'
 import { observer } from 'mobx-react-lite'
-import { store } from '@/renderer/store'
+import { store } from '@/ui/store'
 import { Article } from '@/types/reader'
-import { StarButton } from '@/renderer/apps/reader/components/toolbar'
-import { format as formatTime } from '@/utils/common/date'
+import { StarButton } from '@/ui/apps/reader/components/toolbar'
+import { format as formatTime } from '@/base/common/date'
 
 type Props = {
    article: Article
diff --git a/src/renderer/apps/reader/MainPanel/List/pagination.tsx b/src/ui/apps/reader/MainPanel/List/pagination.tsx
similarity index 93%
rename from src/renderer/apps/reader/MainPanel/List/pagination.tsx
rename to src/ui/apps/reader/MainPanel/List/pagination.tsx
index 91d4e04..326a5d1 100644
--- a/src/renderer/apps/reader/MainPanel/List/pagination.tsx
+++ b/src/ui/apps/reader/MainPanel/List/pagination.tsx
@@ -6,8 +6,8 @@ import {
   ArrowNextFilled,
   ArrowPreviousFilled,
 } from '@fluentui/react-icons'
-import { store } from '@/renderer/store'
-import { Button } from '@/renderer/apps/reader/components/toolbar'
+import { store } from '@/ui/store'
+import { Button } from '@/ui/apps/reader/components/toolbar'
 
 const { readerStore } = store
 
diff --git a/src/renderer/apps/reader/MainPanel/List/toolbar.tsx b/src/ui/apps/reader/MainPanel/List/toolbar.tsx
similarity index 72%
rename from src/renderer/apps/reader/MainPanel/List/toolbar.tsx
rename to src/ui/apps/reader/MainPanel/List/toolbar.tsx
index 41bbe86..9f61d1e 100644
--- a/src/renderer/apps/reader/MainPanel/List/toolbar.tsx
+++ b/src/ui/apps/reader/MainPanel/List/toolbar.tsx
@@ -1,12 +1,12 @@
 import { Checkbox, CheckboxProps } from '@fluentui/react-components'
 import { observer } from 'mobx-react-lite'
-import { store } from '@/renderer/store'
-import { RefreshButton, MarkReadButton } from '@/renderer/apps/reader/components/toolbar'
+import { store } from '@/ui/store'
+import { RefreshButton, MarkReadButton } from '@/ui/apps/reader/components/toolbar'
 
 const { readerStore } = store
 
 function Toolbar() {
-  const { articles, isAllSelected, isAllDeselected } = readerStore
+  const { isAllSelected, isAllDeselected } = readerStore
 
   // eslint-disable-next-line no-nested-ternary
   const selected = isAllDeselected ? false
@@ -15,9 +15,11 @@ function Toolbar() {
   const onCheckChange: CheckboxProps['onChange'] = () => {
     const checked = selected === false
 
-    // TODO use action
-    // eslint-disable-next-line no-param-reassign
-    articles.forEach((v) => { v.selected = checked })
+    if (checked) {
+      readerStore.selectAll()
+    } else {
+      readerStore.deselectAll()
+    }
   }
 
   return (
diff --git a/src/renderer/apps/reader/MainPanel/index.tsx b/src/ui/apps/reader/MainPanel/index.tsx
similarity index 94%
rename from src/renderer/apps/reader/MainPanel/index.tsx
rename to src/ui/apps/reader/MainPanel/index.tsx
index 9e1b22f..f9b1a30 100644
--- a/src/renderer/apps/reader/MainPanel/index.tsx
+++ b/src/ui/apps/reader/MainPanel/index.tsx
@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react-lite'
 import { makeStyles, tokens } from '@fluentui/react-components'
-import { store } from '@/renderer/store'
+import { store } from '@/ui/store'
 
 import List from './List'
 import Article from './Article'
diff --git a/src/renderer/apps/reader/SidePanel/Toolbar/add-btn.tsx b/src/ui/apps/reader/SidePanel/Toolbar/add-btn.tsx
similarity index 95%
rename from src/renderer/apps/reader/SidePanel/Toolbar/add-btn.tsx
rename to src/ui/apps/reader/SidePanel/Toolbar/add-btn.tsx
index e7c7186..5e70b3d 100644
--- a/src/renderer/apps/reader/SidePanel/Toolbar/add-btn.tsx
+++ b/src/ui/apps/reader/SidePanel/Toolbar/add-btn.tsx
@@ -13,9 +13,9 @@ import {
   Button,
 } from '@fluentui/react-components'
 import intl from 'react-intl-universal'
-import { Button as ToolbarButton } from '@/renderer/apps/reader/components/toolbar'
+import { Button as ToolbarButton } from '@/ui/apps/reader/components/toolbar'
 import { Feed } from '@/types/reader'
-import * as feedService from '@/renderer/services/reader/feed'
+import * as feedService from '@/services/reader/browser/feed'
 
 export default function AddButton() {
   const [openState, setOpen] = useState(false)
diff --git a/src/renderer/apps/reader/SidePanel/Toolbar/index.tsx b/src/ui/apps/reader/SidePanel/Toolbar/index.tsx
similarity index 100%
rename from src/renderer/apps/reader/SidePanel/Toolbar/index.tsx
rename to src/ui/apps/reader/SidePanel/Toolbar/index.tsx
diff --git a/src/renderer/apps/reader/SidePanel/feed-item.tsx b/src/ui/apps/reader/SidePanel/feed-item.tsx
similarity index 94%
rename from src/renderer/apps/reader/SidePanel/feed-item.tsx
rename to src/ui/apps/reader/SidePanel/feed-item.tsx
index 7ad69e2..da3f471 100644
--- a/src/renderer/apps/reader/SidePanel/feed-item.tsx
+++ b/src/ui/apps/reader/SidePanel/feed-item.tsx
@@ -2,8 +2,8 @@
 
 import { observer } from 'mobx-react-lite'
 import { makeStyles, tokens } from '@fluentui/react-components'
-import { store } from '@/renderer/store'
-import { DeleteButton, CopyButton } from '@/renderer/apps/reader/components/toolbar'
+import { store } from '@/ui/store'
+import { DeleteButton, CopyButton } from '@/ui/apps/reader/components/toolbar'
 import { Feed } from '@/types/reader'
 
 const { readerStore } = store
diff --git a/src/renderer/apps/reader/SidePanel/feed-list.tsx b/src/ui/apps/reader/SidePanel/feed-list.tsx
similarity index 87%
rename from src/renderer/apps/reader/SidePanel/feed-list.tsx
rename to src/ui/apps/reader/SidePanel/feed-list.tsx
index 1e934f0..bae548d 100644
--- a/src/renderer/apps/reader/SidePanel/feed-list.tsx
+++ b/src/ui/apps/reader/SidePanel/feed-list.tsx
@@ -1,5 +1,5 @@
 import { observer } from 'mobx-react-lite'
-import { store } from '@/renderer/store'
+import { store } from '@/ui/store'
 
 import Item from './feed-item'
 
diff --git a/src/renderer/apps/reader/SidePanel/index.tsx b/src/ui/apps/reader/SidePanel/index.tsx
similarity index 96%
rename from src/renderer/apps/reader/SidePanel/index.tsx
rename to src/ui/apps/reader/SidePanel/index.tsx
index c5e95f4..68c357b 100644
--- a/src/renderer/apps/reader/SidePanel/index.tsx
+++ b/src/ui/apps/reader/SidePanel/index.tsx
@@ -9,7 +9,7 @@ import {
 } from '@fluentui/react-icons'
 import { Divider } from '@fluentui/react-components'
 import { observer } from 'mobx-react-lite'
-import { store } from '@/renderer/store'
+import { store } from '@/ui/store'
 
 import TabItem from './tab-item'
 import FeedList from './feed-list'
diff --git a/src/renderer/apps/reader/SidePanel/tab-item.tsx b/src/ui/apps/reader/SidePanel/tab-item.tsx
similarity index 97%
rename from src/renderer/apps/reader/SidePanel/tab-item.tsx
rename to src/ui/apps/reader/SidePanel/tab-item.tsx
index 9c2973f..14ba423 100644
--- a/src/renderer/apps/reader/SidePanel/tab-item.tsx
+++ b/src/ui/apps/reader/SidePanel/tab-item.tsx
@@ -3,7 +3,7 @@ import { makeStyles, tokens } from '@fluentui/react-components'
 import { observer } from 'mobx-react-lite'
 
 import { Tab } from '@/types/reader'
-import { store } from '@/renderer/store'
+import { store } from '@/ui/store'
 
 type Props = {
   text: string
diff --git a/src/renderer/apps/reader/components/toolbar/button.tsx b/src/ui/apps/reader/components/toolbar/button.tsx
similarity index 100%
rename from src/renderer/apps/reader/components/toolbar/button.tsx
rename to src/ui/apps/reader/components/toolbar/button.tsx
diff --git a/src/renderer/apps/reader/components/toolbar/copy-button.tsx b/src/ui/apps/reader/components/toolbar/copy-button.tsx
similarity index 100%
rename from src/renderer/apps/reader/components/toolbar/copy-button.tsx
rename to src/ui/apps/reader/components/toolbar/copy-button.tsx
diff --git a/src/renderer/apps/reader/components/toolbar/delete-button.tsx b/src/ui/apps/reader/components/toolbar/delete-button.tsx
similarity index 100%
rename from src/renderer/apps/reader/components/toolbar/delete-button.tsx
rename to src/ui/apps/reader/components/toolbar/delete-button.tsx
diff --git a/src/renderer/apps/reader/components/toolbar/index.tsx b/src/ui/apps/reader/components/toolbar/index.tsx
similarity index 100%
rename from src/renderer/apps/reader/components/toolbar/index.tsx
rename to src/ui/apps/reader/components/toolbar/index.tsx
diff --git a/src/renderer/apps/reader/components/toolbar/mark-read-button.tsx b/src/ui/apps/reader/components/toolbar/mark-read-button.tsx
similarity index 94%
rename from src/renderer/apps/reader/components/toolbar/mark-read-button.tsx
rename to src/ui/apps/reader/components/toolbar/mark-read-button.tsx
index fe8bd98..28239f4 100644
--- a/src/renderer/apps/reader/components/toolbar/mark-read-button.tsx
+++ b/src/ui/apps/reader/components/toolbar/mark-read-button.tsx
@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react-lite'
 import { MailUnreadRegular, MailReadRegular } from '@fluentui/react-icons'
-import { store } from '@/renderer/store'
+import { store } from '@/ui/store'
 import intl from 'react-intl-universal'
 import Button from './button'
 
diff --git a/src/renderer/apps/reader/components/toolbar/refresh-button.tsx b/src/ui/apps/reader/components/toolbar/refresh-button.tsx
similarity index 90%
rename from src/renderer/apps/reader/components/toolbar/refresh-button.tsx
rename to src/ui/apps/reader/components/toolbar/refresh-button.tsx
index bb70a53..d309acf 100644
--- a/src/renderer/apps/reader/components/toolbar/refresh-button.tsx
+++ b/src/ui/apps/reader/components/toolbar/refresh-button.tsx
@@ -1,6 +1,6 @@
 import { ArrowClockwiseFilled } from '@fluentui/react-icons'
 import intl from 'react-intl-universal'
-import { store } from '@/renderer/store'
+import { store } from '@/ui/store'
 import Button from './button'
 
 const { readerStore } = store
diff --git a/src/renderer/apps/reader/components/toolbar/star-button.tsx b/src/ui/apps/reader/components/toolbar/star-button.tsx
similarity index 96%
rename from src/renderer/apps/reader/components/toolbar/star-button.tsx
rename to src/ui/apps/reader/components/toolbar/star-button.tsx
index 14e0d17..59741dc 100644
--- a/src/renderer/apps/reader/components/toolbar/star-button.tsx
+++ b/src/ui/apps/reader/components/toolbar/star-button.tsx
@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react-lite'
 import { StarFilled, StarRegular } from '@fluentui/react-icons'
 import { makeStyles, tokens } from '@fluentui/react-components'
-import { store } from '@/renderer/store'
+import { store } from '@/ui/store'
 import { Article } from '@/types/reader'
 
 import Button from './button'
diff --git a/src/renderer/apps/reader/index.tsx b/src/ui/apps/reader/index.tsx
similarity index 100%
rename from src/renderer/apps/reader/index.tsx
rename to src/ui/apps/reader/index.tsx
diff --git a/src/renderer/apps/reader/keyboard-shortcuts-panel.tsx b/src/ui/apps/reader/keyboard-shortcuts-panel.tsx
similarity index 98%
rename from src/renderer/apps/reader/keyboard-shortcuts-panel.tsx
rename to src/ui/apps/reader/keyboard-shortcuts-panel.tsx
index 4d21dfe..9a6d3d7 100644
--- a/src/renderer/apps/reader/keyboard-shortcuts-panel.tsx
+++ b/src/ui/apps/reader/keyboard-shortcuts-panel.tsx
@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react-lite'
 import intl from 'react-intl-universal'
-import { store } from '@/renderer/store'
+import { store } from '@/ui/store'
 import {
   Dialog,
   DialogSurface,
diff --git a/src/renderer/apps/reader/use-keyboard.ts b/src/ui/apps/reader/use-keyboard.ts
similarity index 87%
rename from src/renderer/apps/reader/use-keyboard.ts
rename to src/ui/apps/reader/use-keyboard.ts
index d70900a..e9cfcc7 100644
--- a/src/renderer/apps/reader/use-keyboard.ts
+++ b/src/ui/apps/reader/use-keyboard.ts
@@ -1,6 +1,6 @@
-import { makeKeyboard, Handler } from '@/renderer/hooks/keyboard'
-import { store } from '@/renderer/store'
-import { openExternal } from '@/utils/browser/shell'
+import { makeKeyboard, Handler } from '@/ui/hooks/keyboard'
+import { store } from '@/ui/store'
+import { openExternal } from '@/base/browser/shell'
 
 const { readerStore } = store
 
diff --git a/src/renderer/apps/settings/index.tsx b/src/ui/apps/settings/index.tsx
similarity index 96%
rename from src/renderer/apps/settings/index.tsx
rename to src/ui/apps/settings/index.tsx
index 687ba81..9f18c7c 100644
--- a/src/renderer/apps/settings/index.tsx
+++ b/src/ui/apps/settings/index.tsx
@@ -7,9 +7,9 @@ import {
   Input,
   Button,
 } from '@fluentui/react-components'
-import { store } from '@/renderer/store'
+import { store } from '@/ui/store'
 import { labels as locales } from '@/i18n'
-import { openDirectory } from '@/utils/browser/shell'
+import { openDirectory } from '@/base/browser/shell'
 
 const { settingStore } = store
 
diff --git a/src/renderer/hooks/keyboard.ts b/src/ui/hooks/keyboard.ts
similarity index 98%
rename from src/renderer/hooks/keyboard.ts
rename to src/ui/hooks/keyboard.ts
index 55a9f96..c74b2d2 100644
--- a/src/renderer/hooks/keyboard.ts
+++ b/src/ui/hooks/keyboard.ts
@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { store } from '@/renderer/store'
+import { store } from '@/ui/store'
 import { Apps } from '@/types/common'
 
 export type Handler = (event: KeyboardEvent, k: string[]) => any
diff --git a/src/renderer/hooks/use-force-update.ts b/src/ui/hooks/use-force-update.ts
similarity index 100%
rename from src/renderer/hooks/use-force-update.ts
rename to src/ui/hooks/use-force-update.ts
diff --git a/src/renderer/index.html b/src/ui/index.html
similarity index 100%
rename from src/renderer/index.html
rename to src/ui/index.html
diff --git a/src/renderer/index.tsx b/src/ui/index.tsx
similarity index 81%
rename from src/renderer/index.tsx
rename to src/ui/index.tsx
index 564a36e..adea66b 100644
--- a/src/renderer/index.tsx
+++ b/src/ui/index.tsx
@@ -1,5 +1,5 @@
 import { createRoot } from 'react-dom/client'
-import App from '@/renderer/App'
+import App from '@/ui/App'
 
 import './style.css'
 
diff --git a/src/renderer/store/index.ts b/src/ui/store/index.ts
similarity index 100%
rename from src/renderer/store/index.ts
rename to src/ui/store/index.ts
diff --git a/src/renderer/store/reader.ts b/src/ui/store/reader.ts
similarity index 97%
rename from src/renderer/store/reader.ts
rename to src/ui/store/reader.ts
index 545cea1..ca7f50d 100644
--- a/src/renderer/store/reader.ts
+++ b/src/ui/store/reader.ts
@@ -1,8 +1,8 @@
 import { makeAutoObservable, runInAction } from 'mobx'
 import { Tab, Feed, Article } from '@/types/reader'
-import * as remote from '@/utils/browser/remote-event'
-import * as feedService from '@/renderer/services/reader/feed'
-import * as articleService from '@/renderer/services/reader/article'
+import * as remote from '@/services/remote/browser/remote'
+import * as feedService from '@/services/reader/browser/feed'
+import * as articleService from '@/services/reader/browser/article'
 
 import type { RootStore } from './index'
 
diff --git a/src/renderer/store/settings.ts b/src/ui/store/settings.ts
similarity index 82%
rename from src/renderer/store/settings.ts
rename to src/ui/store/settings.ts
index b582e09..6a4c05b 100644
--- a/src/renderer/store/settings.ts
+++ b/src/ui/store/settings.ts
@@ -1,5 +1,5 @@
 import { makeAutoObservable, runInAction } from 'mobx'
-import fetch from '@/utils/browser/fetch'
+import * as settingService from '@/services/settings/browser/settings'
 import { ElementType } from '@/types/common'
 
 import type { RootStore } from './index'
@@ -8,14 +8,6 @@ const appearances = ['light', 'dark', 'auto'] as const
 
 export type Appearance = ElementType<typeof appearances>
 
-const save = (data: {}) => {
-  try {
-    fetch('/settings/put', data)
-  } catch (e) {
-    // TODO
-  }
-}
-
 export class SettingStore {
   rootStore: RootStore
 
@@ -46,7 +38,7 @@ export class SettingStore {
       appearance,
       dataPath,
       defaultDataPath,
-    } = await fetch('/settings/get')
+    } = await settingService.get()
 
     runInAction(() => {
       this.locale = locale
@@ -60,13 +52,13 @@ export class SettingStore {
 
   setAppearance(appearance: Appearance) {
     this.appearance = appearance
-    save({ appearance })
+    settingService.set('appearance', appearance)
   }
 
   setLocale(locale: string) {
     this.locale = locale
     this.rootStore.changeLocale(locale)
-    save({ locale })
+    settingService.set('locale', locale)
   }
 
   setDataPath(dataPath: string) {
@@ -75,6 +67,6 @@ export class SettingStore {
     }
 
     this.dataPath = dataPath
-    save({ dataPath })
+    settingService.set('dataPath', dataPath)
   }
 }
diff --git a/src/renderer/style.css b/src/ui/style.css
similarity index 100%
rename from src/renderer/style.css
rename to src/ui/style.css