From ea1818284ba228dbdc6323877ca67cf293e706a8 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 1 Mar 2019 10:42:28 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=AF=E3=83=A9=E3=82=A4=E3=82=A2=E3=83=B3?=
 =?UTF-8?q?=E3=83=88=E3=81=AE=E8=A8=AD=E5=AE=9A=E3=82=B3=E3=83=B3=E3=83=9D?=
 =?UTF-8?q?=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=82=92=E6=95=B4=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* デスクトップとモバイルで統一
* いくつかの設定を廃止
---
 locales/ja-JP.yml                             | 274 ++++----
 .../views/components/settings/2fa.vue}        |   2 +-
 .../{api-settings.vue => settings/api.vue}    |   2 +-
 .../views/components/settings/apps.vue}       |   2 +-
 .../drive.vue}                                |   2 +-
 .../integration.vue}                          |   4 +-
 .../language.vue}                             |   4 +-
 .../{ => settings}/mute-and-block.vue         |   2 +-
 .../notification.vue}                         |   2 +-
 .../password.vue}                             |   2 +-
 .../profile.vue}                              |   8 +-
 .../views/components/settings/settings.vue    | 565 +++++++++++++++++
 .../views/components/settings/signins.vue}    |   0
 .../views/components/settings/tags.vue}       |   2 +-
 .../views/components/{ => settings}/theme.vue |   4 +-
 .../app/common/views/components/ui/card.vue   |   4 +
 .../views/deck/deck.favorites-column.vue      |   2 +-
 .../views/components/settings-window.vue      |   2 +-
 .../app/desktop/views/components/settings.vue | 583 +-----------------
 .../views/components/ui.header.account.vue    |   4 +-
 .../app/desktop/views/components/window.vue   |  20 +-
 src/client/app/init.ts                        |   9 +-
 .../app/mobile/views/components/ui.nav.vue    |   4 +-
 .../app/mobile/views/pages/favorites.vue      |   4 +-
 .../app/mobile/views/pages/settings.vue       | 433 +------------
 src/client/app/store.ts                       |   3 -
 26 files changed, 737 insertions(+), 1206 deletions(-)
 rename src/client/app/{desktop/views/components/settings.2fa.vue => common/views/components/settings/2fa.vue} (98%)
 rename src/client/app/common/views/components/{api-settings.vue => settings/api.vue} (98%)
 rename src/client/app/{desktop/views/components/settings.apps.vue => common/views/components/settings/apps.vue} (95%)
 rename src/client/app/common/views/components/{drive-settings.vue => settings/drive.vue} (98%)
 rename src/client/app/common/views/components/{integration-settings.vue => settings/integration.vue} (97%)
 rename src/client/app/common/views/components/{language-settings.vue => settings/language.vue} (93%)
 rename src/client/app/common/views/components/{ => settings}/mute-and-block.vue (98%)
 rename src/client/app/common/views/components/{notification-settings.vue => settings/notification.vue} (96%)
 rename src/client/app/common/views/components/{password-settings.vue => settings/password.vue} (97%)
 rename src/client/app/common/views/components/{profile-editor.vue => settings/profile.vue} (97%)
 create mode 100644 src/client/app/common/views/components/settings/settings.vue
 rename src/client/app/{desktop/views/components/settings.signins.vue => common/views/components/settings/signins.vue} (100%)
 rename src/client/app/{desktop/views/components/settings.tags.vue => common/views/components/settings/tags.vue} (97%)
 rename src/client/app/common/views/components/{ => settings}/theme.vue (99%)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 599a71fc75..1133282896 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -31,10 +31,6 @@ common:
   customize-home: "ホームをカスタマイズ"
   featured-notes: "ハイライト"
   dark-mode: "ダークモード"
-  use-shadow: "UIに影を使用"
-  rounded-corners: "UIの角を丸める"
-  circle-icons: "円形のアイコンを使用"
-  contrasted-acct: "ユーザー名にコントラストを付ける"
   signin: "ログイン"
   signup: "新規登録"
   signout: "ログアウト"
@@ -75,6 +71,7 @@ common:
   explore: "みつける"
   following: "フォロー中"
   followers: "フォロワー"
+  favorites: "お気に入り"
 
   empty-timeline-info:
     follow-users-to-make-your-timeline: "ユーザーをフォローすると投稿がタイムラインに表示されます。"
@@ -130,6 +127,110 @@ common:
     e: "ここに書いてください"
     f: "あなたが書くのを待っています..."
 
+  settings: "設定"
+  _settings:
+    profile: "プロフィール"
+    notification: "通知"
+    apps: "アプリ"
+    tags: "ハッシュタグ"
+    mute-and-block: "ミュート/ブロック"
+    blocking: "ブロック"
+    security: "セキュリティ"
+    signin: "ログイン履歴"
+    password: "パスワード"
+    other: "その他"
+    appearance: "デザイン"
+    behavior: "動作"
+    fetch-on-scroll: "スクロールで自動読み込み"
+    fetch-on-scroll-desc: "ページを下までスクロールしたときに自動で追加のコンテンツを読み込みます。"
+    note-visibility: "投稿の公開範囲"
+    default-note-visibility: "デフォルトの公開範囲"
+    remember-note-visibility: "投稿の公開範囲を記憶する"
+    web-search-engine: "ウェブ検索エンジン"
+    web-search-engine-desc: "例: https://www.google.com/?#q={{query}}"
+    keep-cw: "CW保持"
+    keep-cw-desc: "投稿にリプライする際、リプライ元の投稿にCWが設定されていたとき、デフォルトで同じCWを設定するようにします。"
+    i-like-sushi: "私は(プリンよりむしろ)寿司が好き"
+    show-reversi-board-labels: "リバーシのボードの行と列のラベルを表示"
+    use-avatar-reversi-stones: "リバーシの石にアバターを使う"
+    disable-animated-mfm: "投稿内の動きのあるテキストを無効にする"
+    disable-showing-animated-images: "アニメーション画像を再生しない"
+    suggest-recent-hashtags: "最近のハッシュタグを投稿フォームに表示する"
+    always-show-nsfw: "常に閲覧注意のメディアを表示する"
+    always-mark-nsfw: "常にメディアを閲覧注意として投稿"
+    show-full-acct: "ユーザー名のホストを省略しない"
+    show-via: "viaを表示する"
+    reduce-motion: "UIの動きを減らす"
+    this-setting-is-this-device-only: "このデバイスのみ"
+    use-os-default-emojis: "OS標準の絵文字を使用"
+    line-width: "線の太さ"
+    line-width-thin: "細い"
+    line-width-normal: "普通"
+    line-width-thick: "太い"
+    font-size: "文字の大きさ"
+    font-size-x-small: "小さい"
+    font-size-small: "少し小さい"
+    font-size-medium: "普通"
+    font-size-large: "少し大きい"
+    font-size-x-large: "大きい"
+    deck-column-align: "デッキのカラムの配置"
+    deck-column-align-center: "中央"
+    deck-column-align-left: "左"
+    deck-column-align-flexible: "フレキシブル"
+    deck-column-width: "デッキのカラムの幅"
+    deck-column-width-narrow: "狭"
+    deck-column-width-narrower: "やや狭"
+    deck-column-width-normal: "普通"
+    deck-column-width-wider: "やや広"
+    deck-column-width-wide: "広"
+    use-shadow: "UIに影を使用"
+    rounded-corners: "UIの角を丸める"
+    circle-icons: "円形のアイコンを使用"
+    contrasted-acct: "ユーザー名にコントラストを付ける"
+    wallpaper: "壁紙"
+    choose-wallpaper: "壁紙を選択"
+    delete-wallpaper: "壁紙を削除"
+    post-form-on-timeline: "タイムライン上部に投稿フォームを表示する"
+    show-clock-on-header: "右上に時計を表示する"
+    show-reply-target: "リプライ先を表示する"
+    timeline: "タイムライン"
+    show-my-renotes: "自分の行ったRenoteをタイムラインに表示する"
+    show-renoted-my-notes: "自分の投稿のRenoteをタイムラインに表示する"
+    show-local-renotes: "ローカルの投稿のRenoteをタイムラインに表示する"
+    remain-deleted-note: "削除された投稿を表示し続ける"
+    sound: "サウンド"
+    enable-sounds: "サウンドを有効にする"
+    enable-sounds-desc: "投稿やメッセージを送受信したときなどにサウンドを再生します。この設定はブラウザに記憶されます。"
+    volume: "ボリューム"
+    test: "テスト"
+    update: "Misskey Update"
+    version: "バージョン:"
+    latest-version: "最新のバージョン:"
+    update-checking: "アップデートを確認中"
+    do-update: "アップデートを確認"
+    update-settings: "詳細設定"
+    no-updates: "利用可能な更新はありません"
+    no-updates-desc: "お使いのMisskeyは最新です。"
+    update-available: "新しいバージョンが利用可能です"
+    update-available-desc: "ページを再度読み込みすると更新が適用されます。"
+    advanced-settings: "高度な設定"
+    debug-mode: "デバッグモードを有効にする"
+    debug-mode-desc: "この設定はブラウザに記憶されます。"
+    navbar-position: "ナビゲーションバーの位置"
+    navbar-position-top: "上"
+    navbar-position-left: "左"
+    navbar-position-right: "右"
+    i-am-under-limited-internet: "私は通信を制限されている"
+    post-style: "投稿の表示スタイル"
+    post-style-standard: "標準"
+    post-style-smart: "スマート"
+    notification-position: "通知の表示"
+    notification-position-bottom: "下"
+    notification-position-top: "上"
+    disable-via-mobile: "「モバイルからの投稿」フラグを付けない"
+    load-raw-images: "添付された画像を高画質で表示する"
+    load-remote-media: "リモートサーバーのメディアを表示する"
+
   search: "検索"
   delete: "削除"
   loading: "読み込み中"
@@ -138,30 +239,7 @@ common:
   update-available-title: "更新があります"
   update-available: "Misskeyの新しいバージョンがあります({newer}。現在{current}を利用中)。ページを再度読み込みすると更新が適用されます。"
   my-token-regenerated: "あなたのトークンが更新されたのでサインアウトします。"
-  i-like-sushi: "私は(プリンよりむしろ)寿司が好き"
-  show-reversi-board-labels: "リバーシのボードの行と列のラベルを表示"
-  use-avatar-reversi-stones: "リバーシの石にアバターを使う"
   verified-user: "公式アカウント"
-  disable-animated-mfm: "投稿内の動きのあるテキストを無効にする"
-  disable-showing-animated-images: "アニメーション画像を再生しない"
-  suggest-recent-hashtags: "最近のハッシュタグを投稿フォームに表示する"
-  always-show-nsfw: "常に閲覧注意のメディアを表示する"
-  always-mark-nsfw: "常にメディアを閲覧注意として投稿"
-  show-full-acct: "ユーザー名のホストを省略しない"
-  show-via: "viaを表示する"
-  reduce-motion: "UIの動きを減らす"
-  this-setting-is-this-device-only: "このデバイスのみ"
-  use-os-default-emojis: "OS標準の絵文字を使用"
-  line-width: "線の太さ"
-  line-width-thin: "細い"
-  line-width-normal: "普通"
-  line-width-thick: "太い"
-  font-size: "文字の大きさ"
-  font-size-x-small: "小さい"
-  font-size-small: "少し小さい"
-  font-size-medium: "普通"
-  font-size-large: "少し大きい"
-  font-size-x-large: "大きい"
   hide-password: "パスワードを隠す"
   show-password: "パスワードを表示する"
 
@@ -174,16 +252,6 @@ common:
   no-notes: "投稿がありません"
   turn-on-darkmode: "闇に飲まれる"
   turn-off-darkmode: "光あれ"
-  deck-column-align: "デッキのカラムの配置"
-  deck-column-align-center: "中央"
-  deck-column-align-left: "左"
-  deck-column-align-flexible: "フレキシブル"
-  deck-column-width: "デッキのカラムの幅"
-  deck-column-width-narrow: "狭"
-  deck-column-width-narrower: "やや狭"
-  deck-column-width-normal: "普通"
-  deck-column-width-wider: "やや広"
-  deck-column-width-wide: "広"
 
   error:
     title: "問題が発生しました"
@@ -919,92 +987,6 @@ desktop/views/pages/user-following-or-followers.vue:
   following: "{user}のフォロー"
   followers: "{user}のフォロワー"
 
-desktop/views/components/settings-window.vue:
-  settings: "設定"
-
-desktop/views/components/settings.vue:
-  profile: "プロフィール"
-  notification: "通知"
-  apps: "アプリ"
-  tags: "ハッシュタグ"
-  mute-and-block: "ミュート/ブロック"
-  blocking: "ブロック"
-  security: "セキュリティ"
-  signin: "ログイン履歴"
-  password: "パスワード"
-  other: "その他"
-  license: "ライセンス"
-  theme: "テーマ"
-
-  behaviour: "動作"
-  fetch-on-scroll: "スクロールで自動読み込み"
-  fetch-on-scroll-desc: "ページを下までスクロールしたときに自動で追加のコンテンツを読み込みます。"
-  note-visibility: "投稿の公開範囲"
-  default-note-visibility: "デフォルトの公開範囲"
-  remember-note-visibility: "投稿の公開範囲を記憶する"
-  web-search-engine: "ウェブ検索エンジン"
-  web-search-engine-desc: "例: https://www.google.com/?#q={{query}}"
-  auto-popout: "ウィンドウの自動ポップアウト"
-  auto-popout-desc: "ウィンドウが開かれるとき、ポップアウト(ブラウザ外に切り離す)可能なら自動でポップアウトします。この設定はブラウザに記憶されます。"
-  keep-cw: "CW保持"
-  keep-cw-desc: "投稿にリプライする際、リプライ元の投稿にCWが設定されていたとき、デフォルトで同じCWを設定するようにします。"
-
-  display: "デザインと表示"
-  wallpaper: "壁紙"
-  choose-wallpaper: "壁紙を選択"
-  delete-wallpaper: "壁紙を削除"
-  post-form-on-timeline: "タイムライン上部に投稿フォームを表示する"
-  show-clock-on-header: "右上に時計を表示する"
-  show-reply-target: "リプライ先を表示する"
-  timeline: "タイムライン"
-  show-my-renotes: "自分の行ったRenoteをタイムラインに表示する"
-  show-renoted-my-notes: "自分の投稿のRenoteをタイムラインに表示する"
-  show-local-renotes: "ローカルの投稿のRenoteをタイムラインに表示する"
-  show-maps: "マップの自動展開"
-  remain-deleted-note: "削除された投稿を表示し続ける"
-
-  sound: "サウンド"
-  enable-sounds: "サウンドを有効にする"
-  enable-sounds-desc: "投稿やメッセージを送受信したときなどにサウンドを再生します。この設定はブラウザに記憶されます。"
-  volume: "ボリューム"
-  test: "テスト"
-
-  cache: "キャッシュ"
-  clean-cache: "クリーンアップ"
-  cache-warn: "クリーンアップを行うと、ブラウザに記憶されたアカウント情報のキャッシュ、書きかけの投稿・返信・メッセージ、およびその他のデータ(設定情報含む)が削除されます。クリーンアップを行った後はページを再度読み込みする必要があります。"
-  cache-cleared: "キャッシュを削除しました"
-  cache-cleared-desc: "ページを再度読み込みしてください。"
-
-  about: "Misskeyについて"
-  operator: "このサーバーの運営者"
-
-  update: "Misskey Update"
-  version: "バージョン:"
-  latest-version: "最新のバージョン:"
-  update-checking: "アップデートを確認中"
-  do-update: "アップデートを確認"
-  update-settings: "詳細設定"
-  prevent-update: "アップデートを延期する(非推奨)"
-  prevent-update-desc: "この設定をオンにしてもアップデートが反映される場合があります。この設定はこのデバイスのみ有効です。"
-  no-updates: "利用可能な更新はありません"
-  no-updates-desc: "お使いのMisskeyは最新です。"
-  update-available: "新しいバージョンが利用可能です"
-  update-available-desc: "ページを再度読み込みすると更新が適用されます。"
-
-  advanced-settings: "高度な設定"
-  debug-mode: "デバッグモードを有効にする"
-  debug-mode-desc: "この設定はブラウザに記憶されます。"
-  experimental: "実験的機能を有効にする"
-  experimental-desc: "実験的機能を有効にするとMisskeyの動作が不安定になる可能性があります。この設定はブラウザに記憶されます。"
-  tools: "ツール"
-  task-manager: "タスクマネージャ"
-  third-parties: "サードパーティ"
-
-  navbar-position: "ナビゲーションバーの位置"
-  navbar-position-top: "上"
-  navbar-position-left: "左"
-  navbar-position-right: "右"
-
 desktop/views/components/settings.2fa.vue:
   intro: "二段階認証を設定すると、サインイン時にパスワードだけでなく、予め登録しておいた物理的なデバイス(例えばあなたのスマートフォンなど)も必要になり、よりセキュリティが向上します。"
   detail: "詳細..."
@@ -1107,11 +1089,9 @@ desktop/views/components/ui.header.vue:
 
 desktop/views/components/ui.header.account.vue:
   profile: "プロフィール"
-  favorites: "お気に入り"
   lists: "リスト"
   follow-requests: "フォロー申請"
   admin: "管理"
-  settings: "設定"
 
 desktop/views/components/ui.header.nav.vue:
   game: "ゲーム"
@@ -1535,7 +1515,6 @@ desktop/views/widgets/messaging.vue:
 
 desktop/views/widgets/notifications.vue:
   title: "通知"
-  settings: "通知の設定"
 
 desktop/views/widgets/polls.vue:
   title: "アンケート"
@@ -1656,18 +1635,12 @@ mobile/views/components/ui.nav.vue:
   notifications: "通知"
   follow-requests: "フォロー申請"
   search: "検索"
-  favorites: "お気に入り"
   user-lists: "リスト"
   widgets: "ウィジェット"
   game: "ゲーム"
-  darkmode: "ダークモード"
-  settings: "設定"
   admin: "管理"
   about: "Misskeyについて"
 
-mobile/views/pages/favorites.vue:
-  title: "お気に入り"
-
 mobile/views/pages/user-lists.vue:
   title: "リスト"
   enter-list-name: "リスト名を入力してください"
@@ -1726,43 +1699,6 @@ mobile/views/pages/selectdrive.vue:
 
 mobile/views/pages/settings.vue:
   signed-in-as: "{}としてサインイン中"
-  design: "デザインと表示"
-  i-am-under-limited-internet: "私は通信を制限されている"
-  timeline: "タイムライン"
-  show-reply-target: "リプライ先を表示する"
-  show-my-renotes: "自分の行ったRenoteを表示する"
-  show-renoted-my-notes: "自分の投稿のRenoteを表示する"
-  show-local-renotes: "ローカルの投稿のRenoteを表示する"
-  post-style: "投稿の表示スタイル"
-  post-style-standard: "標準"
-  post-style-smart: "スマート"
-  notification-position: "通知の表示"
-  notification-position-bottom: "下"
-  notification-position-top: "上"
-  behavior: "動作"
-  fetch-on-scroll: "スクロールで自動読み込み"
-  keep-cw: "CW保持"
-  note-visibility: "投稿の公開範囲"
-  default-note-visibility: "デフォルトの公開範囲"
-  remember-note-visibility: "投稿の公開範囲を記憶する"
-  web-search-engine: "ウェブ検索エンジン"
-  web-search-engine-desc: "例: https://www.google.com/?#q={{query}}"
-  disable-via-mobile: "「モバイルからの投稿」フラグを付けない"
-  load-raw-images: "添付された画像を高画質で表示する"
-  load-remote-media: "リモートサーバーのメディアを表示する"
-  update: "Misskey Update"
-  version: "バージョン:"
-  latest-version: "最新のバージョン:"
-  update-checking: "アップデートを確認中"
-  check-for-updates: "アップデートを確認"
-  no-updates: "利用可能な更新はありません"
-  no-updates-desc: "お使いのMisskeyは最新です。"
-  update-available: "新しいバージョンが利用可能です"
-  update-available-desc: "ページを再度読み込みすると更新が適用されます。"
-  settings: "設定"
-  sound: "サウンド"
-  enable-sounds: "サウンドを有効にする"
-  password: "パスワード"
 
 mobile/views/pages/user.vue:
   follows-you: "フォローされています"
diff --git a/src/client/app/desktop/views/components/settings.2fa.vue b/src/client/app/common/views/components/settings/2fa.vue
similarity index 98%
rename from src/client/app/desktop/views/components/settings.2fa.vue
rename to src/client/app/common/views/components/settings/2fa.vue
index 636c3270ee..07a1493151 100644
--- a/src/client/app/desktop/views/components/settings.2fa.vue
+++ b/src/client/app/common/views/components/settings/2fa.vue
@@ -23,7 +23,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
+import i18n from '../../../../i18n';
 
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/settings.2fa.vue'),
diff --git a/src/client/app/common/views/components/api-settings.vue b/src/client/app/common/views/components/settings/api.vue
similarity index 98%
rename from src/client/app/common/views/components/api-settings.vue
rename to src/client/app/common/views/components/settings/api.vue
index 8877e1f3cb..4f1b755857 100644
--- a/src/client/app/common/views/components/api-settings.vue
+++ b/src/client/app/common/views/components/settings/api.vue
@@ -34,7 +34,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
+import i18n from '../../../../i18n';
 import * as JSON5 from 'json5';
 
 export default Vue.extend({
diff --git a/src/client/app/desktop/views/components/settings.apps.vue b/src/client/app/common/views/components/settings/apps.vue
similarity index 95%
rename from src/client/app/desktop/views/components/settings.apps.vue
rename to src/client/app/common/views/components/settings/apps.vue
index 2760a81466..c5beaa1fe2 100644
--- a/src/client/app/desktop/views/components/settings.apps.vue
+++ b/src/client/app/common/views/components/settings/apps.vue
@@ -12,7 +12,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
+import i18n from '../../../../i18n';
 export default Vue.extend({
 	i18n: i18n('desktop/views/components/settings.apps.vue'),
 	data() {
diff --git a/src/client/app/common/views/components/drive-settings.vue b/src/client/app/common/views/components/settings/drive.vue
similarity index 98%
rename from src/client/app/common/views/components/drive-settings.vue
rename to src/client/app/common/views/components/settings/drive.vue
index 0541c2b3d2..850f95d3f4 100644
--- a/src/client/app/common/views/components/drive-settings.vue
+++ b/src/client/app/common/views/components/settings/drive.vue
@@ -16,7 +16,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
+import i18n from '../../../../i18n';
 import * as tinycolor from 'tinycolor2';
 import ApexCharts from 'apexcharts';
 
diff --git a/src/client/app/common/views/components/integration-settings.vue b/src/client/app/common/views/components/settings/integration.vue
similarity index 97%
rename from src/client/app/common/views/components/integration-settings.vue
rename to src/client/app/common/views/components/settings/integration.vue
index 8862fa86d5..b91880679f 100644
--- a/src/client/app/common/views/components/integration-settings.vue
+++ b/src/client/app/common/views/components/settings/integration.vue
@@ -27,8 +27,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
-import { apiUrl } from '../../../config';
+import i18n from '../../../../i18n';
+import { apiUrl } from '../../../../config';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/integration-settings.vue'),
diff --git a/src/client/app/common/views/components/language-settings.vue b/src/client/app/common/views/components/settings/language.vue
similarity index 93%
rename from src/client/app/common/views/components/language-settings.vue
rename to src/client/app/common/views/components/settings/language.vue
index 0d9a5e1608..f81775f09b 100644
--- a/src/client/app/common/views/components/language-settings.vue
+++ b/src/client/app/common/views/components/settings/language.vue
@@ -20,8 +20,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
-import { langs } from '../../../config';
+import i18n from '../../../../i18n';
+import { langs } from '../../../../config';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/language-settings.vue'),
diff --git a/src/client/app/common/views/components/mute-and-block.vue b/src/client/app/common/views/components/settings/mute-and-block.vue
similarity index 98%
rename from src/client/app/common/views/components/mute-and-block.vue
rename to src/client/app/common/views/components/settings/mute-and-block.vue
index 4a7f5be67d..33b19582b7 100644
--- a/src/client/app/common/views/components/mute-and-block.vue
+++ b/src/client/app/common/views/components/settings/mute-and-block.vue
@@ -34,7 +34,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
+import i18n from '../../../../i18n';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/mute-and-block.vue'),
diff --git a/src/client/app/common/views/components/notification-settings.vue b/src/client/app/common/views/components/settings/notification.vue
similarity index 96%
rename from src/client/app/common/views/components/notification-settings.vue
rename to src/client/app/common/views/components/settings/notification.vue
index fe7475027e..b689544d69 100644
--- a/src/client/app/common/views/components/notification-settings.vue
+++ b/src/client/app/common/views/components/settings/notification.vue
@@ -16,7 +16,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
+import i18n from '../../../../i18n';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/notification-settings.vue'),
diff --git a/src/client/app/common/views/components/password-settings.vue b/src/client/app/common/views/components/settings/password.vue
similarity index 97%
rename from src/client/app/common/views/components/password-settings.vue
rename to src/client/app/common/views/components/settings/password.vue
index eb511d6213..c867561518 100644
--- a/src/client/app/common/views/components/password-settings.vue
+++ b/src/client/app/common/views/components/settings/password.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
+import i18n from '../../../../i18n';
 
 export default Vue.extend({
 	i18n: i18n('common/views/components/password-settings.vue'),
diff --git a/src/client/app/common/views/components/profile-editor.vue b/src/client/app/common/views/components/settings/profile.vue
similarity index 97%
rename from src/client/app/common/views/components/profile-editor.vue
rename to src/client/app/common/views/components/settings/profile.vue
index 91f6e91b33..61d273cfaf 100644
--- a/src/client/app/common/views/components/profile-editor.vue
+++ b/src/client/app/common/views/components/settings/profile.vue
@@ -61,7 +61,7 @@
 		<div>
 			<ui-switch v-model="isCat" @change="save(false)">{{ $t('is-cat') }}</ui-switch>
 			<ui-switch v-model="isBot" @change="save(false)">{{ $t('is-bot') }}</ui-switch>
-			<ui-switch v-model="alwaysMarkNsfw">{{ $t('@.always-mark-nsfw') }}</ui-switch>
+			<ui-switch v-model="alwaysMarkNsfw">{{ $t('@._settings.always-mark-nsfw') }}</ui-switch>
 		</div>
 	</section>
 
@@ -113,11 +113,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
-import { apiUrl, host } from '../../../config';
+import i18n from '../../../../i18n';
+import { apiUrl, host } from '../../../../config';
 import { toUnicode } from 'punycode';
 import langmap from 'langmap';
-import { unique } from '../../../../../prelude/array';
+import { unique } from '../../../../../../prelude/array';
 import { faDownload } from '@fortawesome/free-solid-svg-icons';
 
 export default Vue.extend({
diff --git a/src/client/app/common/views/components/settings/settings.vue b/src/client/app/common/views/components/settings/settings.vue
new file mode 100644
index 0000000000..87b93574a5
--- /dev/null
+++ b/src/client/app/common/views/components/settings/settings.vue
@@ -0,0 +1,565 @@
+<template>
+<div class="nqfhvmnl">
+	<template v-if="page == null || page == 'profile'">
+		<x-profile/>
+		<x-integration/>
+	</template>
+
+	<template v-if="page == null || page == 'appearance'">
+		<x-theme/>
+
+		<ui-card>
+			<template #title><fa icon="desktop"/> {{ $t('@._settings.appearance') }}</template>
+
+			<section v-if="!$root.isMobile">
+				<ui-switch v-model="showPostFormOnTopOfTl">{{ $t('@._settings.post-form-on-timeline') }}</ui-switch>
+				<ui-button @click="customizeHome">{{ $t('@.customize-home') }}</ui-button>
+			</section>
+			<section v-if="!$root.isMobile">
+				<header>{{ $t('@._settings.wallpaper') }}</header>
+				<ui-horizon-group class="fit-bottom">
+					<ui-button @click="updateWallpaper">{{ $t('@._settings.choose-wallpaper') }}</ui-button>
+					<ui-button @click="deleteWallpaper">{{ $t('@._settings.delete-wallpaper') }}</ui-button>
+				</ui-horizon-group>
+			</section>
+			<section v-if="!$root.isMobile">
+				<header>{{ $t('@._settings.navbar-position') }}</header>
+				<ui-radio v-model="navbar" value="top">{{ $t('@._settings.navbar-position-top') }}</ui-radio>
+				<ui-radio v-model="navbar" value="left">{{ $t('@._settings.navbar-position-left') }}</ui-radio>
+				<ui-radio v-model="navbar" value="right">{{ $t('@._settings.navbar-position-right') }}</ui-radio>
+			</section>
+			<section>
+				<ui-switch v-model="darkmode">{{ $t('@.dark-mode') }}</ui-switch>
+				<ui-switch v-model="useShadow">{{ $t('@._settings.use-shadow') }}</ui-switch>
+				<ui-switch v-model="roundedCorners">{{ $t('@._settings.rounded-corners') }}</ui-switch>
+				<ui-switch v-model="circleIcons">{{ $t('@._settings.circle-icons') }}</ui-switch>
+				<ui-switch v-model="reduceMotion">{{ $t('@._settings.reduce-motion') }}</ui-switch>
+				<ui-switch v-model="contrastedAcct">{{ $t('@._settings.contrasted-acct') }}</ui-switch>
+				<ui-switch v-model="showFullAcct">{{ $t('@._settings.show-full-acct') }}</ui-switch>
+				<ui-switch v-model="showVia">{{ $t('@._settings.show-via') }}</ui-switch>
+				<ui-switch v-model="useOsDefaultEmojis">{{ $t('@._settings.use-os-default-emojis') }}</ui-switch>
+				<ui-switch v-model="iLikeSushi">{{ $t('@._settings.i-like-sushi') }}</ui-switch>
+			</section>
+			<section>
+				<ui-switch v-model="suggestRecentHashtags">{{ $t('@._settings.suggest-recent-hashtags') }}</ui-switch>
+				<ui-switch v-model="showClockOnHeader" v-if="!$root.isMobile">{{ $t('@._settings.show-clock-on-header') }}</ui-switch>
+				<ui-switch v-model="alwaysShowNsfw">{{ $t('@._settings.always-show-nsfw') }}</ui-switch>
+				<ui-switch v-model="showReplyTarget">{{ $t('@._settings.show-reply-target') }}</ui-switch>
+				<ui-switch v-model="disableAnimatedMfm">{{ $t('@._settings.disable-animated-mfm') }}</ui-switch>
+				<ui-switch v-model="disableShowingAnimatedImages">{{ $t('@._settings.disable-showing-animated-images') }}</ui-switch>
+				<ui-switch v-model="remainDeletedNote">{{ $t('@._settings.remain-deleted-note') }}</ui-switch>
+			</section>
+			<section>
+				<header>{{ $t('@._settings.line-width') }}</header>
+				<ui-radio v-model="lineWidth" :value="0.5">{{ $t('@._settings.line-width-thin') }}</ui-radio>
+				<ui-radio v-model="lineWidth" :value="1">{{ $t('@._settings.line-width-normal') }}</ui-radio>
+				<ui-radio v-model="lineWidth" :value="2">{{ $t('@._settings.line-width-thick') }}</ui-radio>
+			</section>
+			<section>
+				<header>{{ $t('@._settings.font-size') }}</header>
+				<ui-radio v-model="fontSize" :value="-2">{{ $t('@._settings.font-size-x-small') }}</ui-radio>
+				<ui-radio v-model="fontSize" :value="-1">{{ $t('@._settings.font-size-small') }}</ui-radio>
+				<ui-radio v-model="fontSize" :value="0">{{ $t('@._settings.font-size-medium') }}</ui-radio>
+				<ui-radio v-model="fontSize" :value="1">{{ $t('@._settings.font-size-large') }}</ui-radio>
+				<ui-radio v-model="fontSize" :value="2">{{ $t('@._settings.font-size-x-large') }}</ui-radio>
+			</section>
+			<section v-if="$root.isMobile">
+				<header>{{ $t('@._settings.post-style') }}</header>
+				<ui-radio v-model="postStyle" value="standard">{{ $t('@._settings.post-style-standard') }}</ui-radio>
+				<ui-radio v-model="postStyle" value="smart">{{ $t('@._settings.post-style-smart') }}</ui-radio>
+			</section>
+			<section v-if="$root.isMobile">
+				<header>{{ $t('@._settings.notification-position') }}</header>
+				<ui-radio v-model="mobileNotificationPosition" value="bottom">{{ $t('@._settings.notification-position-bottom') }}</ui-radio>
+				<ui-radio v-model="mobileNotificationPosition" value="top">{{ $t('@._settings.notification-position-top') }}</ui-radio>
+			</section>
+			<section>
+				<header>{{ $t('@._settings.deck-column-align') }}</header>
+				<ui-radio v-model="deckColumnAlign" value="center">{{ $t('@._settings.deck-column-align-center') }}</ui-radio>
+				<ui-radio v-model="deckColumnAlign" value="left">{{ $t('@._settings.deck-column-align-left') }}</ui-radio>
+				<ui-radio v-model="deckColumnAlign" value="flexible">{{ $t('@._settings.deck-column-align-flexible') }}</ui-radio>
+			</section>
+			<section>
+				<header>{{ $t('@._settings.deck-column-width') }}</header>
+				<ui-radio v-model="deckColumnWidth" value="narrow">{{ $t('@._settings.deck-column-width-narrow') }}</ui-radio>
+				<ui-radio v-model="deckColumnWidth" value="narrower">{{ $t('@._settings.deck-column-width-narrower') }}</ui-radio>
+				<ui-radio v-model="deckColumnWidth" value="normal">{{ $t('@._settings.deck-column-width-normal') }}</ui-radio>
+				<ui-radio v-model="deckColumnWidth" value="wider">{{ $t('@._settings.deck-column-width-wider') }}</ui-radio>
+				<ui-radio v-model="deckColumnWidth" value="wide">{{ $t('@._settings.deck-column-width-wide') }}</ui-radio>
+			</section>
+			<section>
+				<ui-switch v-model="games_reversi_showBoardLabels">{{ $t('@._settings.show-reversi-board-labels') }}</ui-switch>
+				<ui-switch v-model="games_reversi_useAvatarStones">{{ $t('@._settings.use-avatar-reversi-stones') }}</ui-switch>
+			</section>
+		</ui-card>
+	</template>
+
+	<template v-if="page == null || page == 'behavior'">
+		<ui-card>
+			<template #title><fa icon="sliders-h"/> {{ $t('@._settings.behavior') }}</template>
+
+			<section>
+				<ui-switch v-model="fetchOnScroll">{{ $t('@._settings.fetch-on-scroll') }}
+					<template #desc>{{ $t('@._settings.fetch-on-scroll-desc') }}</template>
+				</ui-switch>
+				<ui-switch v-model="keepCw">{{ $t('@._settings.keep-cw') }}
+					<template #desc>{{ $t('@._settings.keep-cw-desc') }}</template>
+				</ui-switch>
+				<ui-switch v-if="$root.isMobile" v-model="disableViaMobile">{{ $t('@._settings.disable-via-mobile') }}</ui-switch>
+			</section>
+
+			<section>
+				<header>{{ $t('@._settings.timeline') }}</header>
+				<ui-switch v-model="showMyRenotes">{{ $t('@._settings.show-my-renotes') }}</ui-switch>
+				<ui-switch v-model="showRenotedMyNotes">{{ $t('@._settings.show-renoted-my-notes') }}</ui-switch>
+				<ui-switch v-model="showLocalRenotes">{{ $t('@._settings.show-local-renotes') }}</ui-switch>
+			</section>
+
+			<section>
+				<header>{{ $t('@._settings.note-visibility') }}</header>
+				<ui-switch v-model="rememberNoteVisibility">{{ $t('@._settings.remember-note-visibility') }}</ui-switch>
+				<section>
+					<header>{{ $t('@._settings.default-note-visibility') }}</header>
+					<ui-select v-model="defaultNoteVisibility">
+						<option value="public">{{ $t('@.note-visibility.public') }}</option>
+						<option value="home">{{ $t('@.note-visibility.home') }}</option>
+						<option value="followers">{{ $t('@.note-visibility.followers') }}</option>
+						<option value="specified">{{ $t('@.note-visibility.specified') }}</option>
+						<option value="local-public">{{ $t('@.note-visibility.local-public') }}</option>
+						<option value="local-home">{{ $t('@.note-visibility.local-home') }}</option>
+						<option value="local-followers">{{ $t('@.note-visibility.local-followers') }}</option>
+					</ui-select>
+				</section>
+			</section>
+
+			<section>
+				<header>{{ $t('@._settings.web-search-engine') }}</header>
+				<ui-input v-model="webSearchEngine">{{ $t('@._settings.web-search-engine') }}<template #desc>{{ $t('@._settings.web-search-engine-desc') }}</template></ui-input>
+			</section>
+		</ui-card>
+
+		<ui-card>
+			<template #title><fa icon="volume-up"/> {{ $t('@._settings.sound') }}</template>
+
+			<section>
+				<ui-switch v-model="enableSounds">{{ $t('@._settings.enable-sounds') }}
+					<template #desc>{{ $t('@._settings.enable-sounds-desc') }}</template>
+				</ui-switch>
+				<label>{{ $t('@._settings.volume') }}</label>
+				<input type="range"
+					v-model="soundVolume"
+					:disabled="!enableSounds"
+					max="1"
+					step="0.1"
+				/>
+				<ui-button @click="soundTest"><fa icon="volume-up"/> {{ $t('@._settings.test') }}</ui-button>
+			</section>
+		</ui-card>
+
+		<x-language/>
+	</template>
+
+	<template v-if="page == null || page == 'notification'">
+		<x-notification v-show="page == 'notification'"/>
+	</template>
+
+	<template v-if="page == null || page == 'drive'">
+		<x-drive/>
+	</template>
+
+	<template v-if="page == null || page == 'hashtags'">
+		<ui-card>
+			<template #title><fa icon="hashtag"/> {{ $t('@._settings.tags') }}</template>
+			<section>
+				<x-tags/>
+			</section>
+		</ui-card>
+	</template>
+
+	<template v-if="page == null || page == 'muteAndBlock'">
+		<x-mute-and-block/>
+	</template>
+
+	<template v-if="page == null || page == 'apps'">
+		<ui-card>
+			<template #title><fa icon="puzzle-piece"/> {{ $t('@._settings.apps') }}</template>
+			<section>
+				<x-apps/>
+			</section>
+		</ui-card>
+	</template>
+
+	<template v-if="page == null || page == 'security'">
+		<ui-card>
+			<template #title><fa icon="unlock-alt"/> {{ $t('@._settings.password') }}</template>
+			<section>
+				<x-password/>
+			</section>
+		</ui-card>
+
+		<ui-card v-if="!$root.isMobile">
+			<template #title><fa icon="mobile-alt"/> {{ $t('@.2fa') }}</template>
+			<section>
+				<x-2fa/>
+			</section>
+		</ui-card>
+
+		<ui-card>
+			<template #title><fa icon="sign-in-alt"/> {{ $t('@._settings.signin') }}</template>
+			<section>
+				<x-signins/>
+			</section>
+		</ui-card>
+	</template>
+
+	<template v-if="page == null || page == 'api'">
+		<x-api/>
+	</template>
+
+	<template v-if="page == null || page == 'other'">
+		<ui-card>
+			<template #title><fa icon="sync-alt"/> {{ $t('@._settings.update') }}</template>
+			<section>
+				<p>
+					<span>{{ $t('@._settings.version') }} <i>{{ version }}</i></span>
+					<template v-if="latestVersion !== undefined">
+						<br>
+						<span>{{ $t('@._settings.latest-version') }} <i>{{ latestVersion ? latestVersion : version }}</i></span>
+					</template>
+				</p>
+				<ui-button @click="checkForUpdate" :disabled="checkingForUpdate">
+					<template v-if="checkingForUpdate">{{ $t('@._settings.update-checking') }}<mk-ellipsis/></template>
+					<template v-else>{{ $t('@._settings.do-update') }}</template>
+				</ui-button>
+			</section>
+		</ui-card>
+
+		<ui-card>
+			<template #title><fa icon="cogs"/> {{ $t('@._settings.advanced-settings') }}</template>
+			<section>
+				<ui-switch v-model="debug">
+					{{ $t('@._settings.debug-mode') }}<template #desc>{{ $t('@._settings.debug-mode-desc') }}</template>
+				</ui-switch>
+			</section>
+		</ui-card>
+	</template>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import i18n from '../../../../i18n';
+import X2fa from './2fa.vue';
+import XApps from './apps.vue';
+import XSignins from './signins.vue';
+import XTags from './tags.vue';
+import XIntegration from './integration.vue';
+import XTheme from './theme.vue';
+import XDrive from './drive.vue';
+import XMuteAndBlock from './mute-and-block.vue';
+import XPassword from './password.vue';
+import XProfile from './profile.vue';
+import XApi from './api.vue';
+import XLanguage from './language.vue';
+import XNotification from './notification.vue';
+
+import { url, version } from '../../../../config';
+import checkForUpdate from '../../../scripts/check-for-update';
+
+export default Vue.extend({
+	i18n: i18n(),
+	components: {
+		X2fa,
+		XApps,
+		XSignins,
+		XTags,
+		XIntegration,
+		XTheme,
+		XDrive,
+		XMuteAndBlock,
+		XPassword,
+		XProfile,
+		XApi,
+		XLanguage,
+		XNotification,
+	},
+	props: {
+		page: {
+			type: String,
+			required: false,
+			default: null
+		}
+	},
+	data() {
+		return {
+			meta: null,
+			version,
+			latestVersion: undefined,
+			checkingForUpdate: false
+		};
+	},
+	computed: {
+		useOsDefaultEmojis: {
+			get() { return this.$store.state.device.useOsDefaultEmojis; },
+			set(value) { this.$store.commit('device/set', { key: 'useOsDefaultEmojis', value }); }
+		},
+
+		reduceMotion: {
+			get() { return this.$store.state.device.reduceMotion; },
+			set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); }
+		},
+
+		keepCw: {
+			get() { return this.$store.state.settings.keepCw; },
+			set(value) { this.$store.commit('settings/set', { key: 'keepCw', value }); }
+		},
+
+		darkmode: {
+			get() { return this.$store.state.device.darkmode; },
+			set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); }
+		},
+
+		navbar: {
+			get() { return this.$store.state.device.navbar; },
+			set(value) { this.$store.commit('device/set', { key: 'navbar', value }); }
+		},
+
+		deckColumnAlign: {
+			get() { return this.$store.state.device.deckColumnAlign; },
+			set(value) { this.$store.commit('device/set', { key: 'deckColumnAlign', value }); }
+		},
+
+		deckColumnWidth: {
+			get() { return this.$store.state.device.deckColumnWidth; },
+			set(value) { this.$store.commit('device/set', { key: 'deckColumnWidth', value }); }
+		},
+
+		enableSounds: {
+			get() { return this.$store.state.device.enableSounds; },
+			set(value) { this.$store.commit('device/set', { key: 'enableSounds', value }); }
+		},
+
+		soundVolume: {
+			get() { return this.$store.state.device.soundVolume; },
+			set(value) { this.$store.commit('device/set', { key: 'soundVolume', value }); }
+		},
+
+		debug: {
+			get() { return this.$store.state.device.debug; },
+			set(value) { this.$store.commit('device/set', { key: 'debug', value }); }
+		},
+
+		alwaysShowNsfw: {
+			get() { return this.$store.state.device.alwaysShowNsfw; },
+			set(value) { this.$store.commit('device/set', { key: 'alwaysShowNsfw', value }); }
+		},
+
+		postStyle: {
+			get() { return this.$store.state.device.postStyle; },
+			set(value) { this.$store.commit('device/set', { key: 'postStyle', value }); }
+		},
+
+		disableViaMobile: {
+			get() { return this.$store.state.settings.disableViaMobile; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'disableViaMobile', value }); }
+		},
+
+		useShadow: {
+			get() { return this.$store.state.device.useShadow; },
+			set(value) { this.$store.commit('device/set', { key: 'useShadow', value }); }
+		},
+
+		roundedCorners: {
+			get() { return this.$store.state.device.roundedCorners; },
+			set(value) { this.$store.commit('device/set', { key: 'roundedCorners', value }); }
+		},
+
+		lineWidth: {
+			get() { return this.$store.state.device.lineWidth; },
+			set(value) { this.$store.commit('device/set', { key: 'lineWidth', value }); }
+		},
+
+		fontSize: {
+			get() { return this.$store.state.device.fontSize; },
+			set(value) { this.$store.commit('device/set', { key: 'fontSize', value }); }
+		},
+
+		fetchOnScroll: {
+			get() { return this.$store.state.settings.fetchOnScroll; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'fetchOnScroll', value }); }
+		},
+
+		rememberNoteVisibility: {
+			get() { return this.$store.state.settings.rememberNoteVisibility; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'rememberNoteVisibility', value }); }
+		},
+
+		defaultNoteVisibility: {
+			get() { return this.$store.state.settings.defaultNoteVisibility; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'defaultNoteVisibility', value }); }
+		},
+
+		webSearchEngine: {
+			get() { return this.$store.state.settings.webSearchEngine; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'webSearchEngine', value }); }
+		},
+
+		showReplyTarget: {
+			get() { return this.$store.state.settings.showReplyTarget; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showReplyTarget', value }); }
+		},
+
+		showMyRenotes: {
+			get() { return this.$store.state.settings.showMyRenotes; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showMyRenotes', value }); }
+		},
+
+		showRenotedMyNotes: {
+			get() { return this.$store.state.settings.showRenotedMyNotes; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showRenotedMyNotes', value }); }
+		},
+
+		showLocalRenotes: {
+			get() { return this.$store.state.settings.showLocalRenotes; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showLocalRenotes', value }); }
+		},
+
+		showPostFormOnTopOfTl: {
+			get() { return this.$store.state.settings.showPostFormOnTopOfTl; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showPostFormOnTopOfTl', value }); }
+		},
+
+		suggestRecentHashtags: {
+			get() { return this.$store.state.settings.suggestRecentHashtags; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'suggestRecentHashtags', value }); }
+		},
+
+		showClockOnHeader: {
+			get() { return this.$store.state.settings.showClockOnHeader; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showClockOnHeader', value }); }
+		},
+
+		circleIcons: {
+			get() { return this.$store.state.settings.circleIcons; },
+			set(value) {
+				this.$store.dispatch('settings/set', { key: 'circleIcons', value });
+				this.reload();
+			}
+		},
+
+		contrastedAcct: {
+			get() { return this.$store.state.settings.contrastedAcct; },
+			set(value) {
+				this.$store.dispatch('settings/set', { key: 'contrastedAcct', value });
+				this.reload();
+			}
+		},
+
+		showFullAcct: {
+			get() { return this.$store.state.settings.showFullAcct; },
+			set(value) {
+				this.$store.dispatch('settings/set', { key: 'showFullAcct', value });
+				this.reload();
+			}
+		},
+
+		showVia: {
+			get() { return this.$store.state.settings.showVia; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'showVia', value }); }
+		},
+
+		iLikeSushi: {
+			get() { return this.$store.state.settings.iLikeSushi; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'iLikeSushi', value }); }
+		},
+
+		games_reversi_showBoardLabels: {
+			get() { return this.$store.state.settings.games.reversi.showBoardLabels; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'games.reversi.showBoardLabels', value }); }
+		},
+
+		games_reversi_useAvatarStones: {
+			get() { return this.$store.state.settings.games.reversi.useAvatarStones; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'games.reversi.useAvatarStones', value }); }
+		},
+
+		disableAnimatedMfm: {
+			get() { return this.$store.state.settings.disableAnimatedMfm; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'disableAnimatedMfm', value }); }
+		},
+
+		disableShowingAnimatedImages: {
+			get() { return this.$store.state.device.disableShowingAnimatedImages; },
+			set(value) { this.$store.commit('device/set', { key: 'disableShowingAnimatedImages', value }); }
+		},
+
+		remainDeletedNote: {
+			get() { return this.$store.state.settings.remainDeletedNote; },
+			set(value) { this.$store.dispatch('settings/set', { key: 'remainDeletedNote', value }); }
+		},
+
+		mobileNotificationPosition: {
+			get() { return this.$store.state.device.mobileNotificationPosition; },
+			set(value) { this.$store.commit('device/set', { key: 'mobileNotificationPosition', value }); }
+		},
+	},
+	created() {
+		this.$root.getMeta().then(meta => {
+			this.meta = meta;
+		});
+	},
+	methods: {
+		reload() {
+			this.$root.dialog({
+				type: 'warning',
+				text: this.$t('@.reload-to-apply-the-setting'),
+				showCancelButton: true
+			}).then(({ canceled }) => {
+				if (!canceled) {
+					location.reload();
+				}
+			});
+		},
+		customizeHome() {
+			location.href = '/?customize';
+		},
+		updateWallpaper() {
+			this.$chooseDriveFile({
+				multiple: false
+			}).then(file => {
+				this.$root.api('i/update', {
+					wallpaperId: file.id
+				});
+			});
+		},
+		deleteWallpaper() {
+			this.$root.api('i/update', {
+				wallpaperId: null
+			});
+		},
+		checkForUpdate() {
+			this.checkingForUpdate = true;
+			checkForUpdate(this.$root, true, true).then(newer => {
+				this.checkingForUpdate = false;
+				this.latestVersion = newer;
+				if (newer == null) {
+					this.$root.dialog({
+						title: this.$t('no-updates'),
+						text: this.$t('no-updates-desc')
+					});
+				} else {
+					this.$root.dialog({
+						title: this.$t('update-available'),
+						text: this.$t('update-available-desc')
+					});
+				}
+			});
+		},
+		soundTest() {
+			const sound = new Audio(`${url}/assets/message.mp3`);
+			sound.volume = this.$store.state.device.soundVolume;
+			sound.play();
+		}
+	}
+});
+</script>
diff --git a/src/client/app/desktop/views/components/settings.signins.vue b/src/client/app/common/views/components/settings/signins.vue
similarity index 100%
rename from src/client/app/desktop/views/components/settings.signins.vue
rename to src/client/app/common/views/components/settings/signins.vue
diff --git a/src/client/app/desktop/views/components/settings.tags.vue b/src/client/app/common/views/components/settings/tags.vue
similarity index 97%
rename from src/client/app/desktop/views/components/settings.tags.vue
rename to src/client/app/common/views/components/settings/tags.vue
index 3df4a6e64b..05034c9461 100644
--- a/src/client/app/desktop/views/components/settings.tags.vue
+++ b/src/client/app/common/views/components/settings/tags.vue
@@ -15,7 +15,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
+import i18n from '../../../../i18n';
 import * as uuid from 'uuid';
 
 export default Vue.extend({
diff --git a/src/client/app/common/views/components/theme.vue b/src/client/app/common/views/components/settings/theme.vue
similarity index 99%
rename from src/client/app/common/views/components/theme.vue
rename to src/client/app/common/views/components/settings/theme.vue
index 54162e2c61..7d419e3bdd 100644
--- a/src/client/app/common/views/components/theme.vue
+++ b/src/client/app/common/views/components/settings/theme.vue
@@ -103,8 +103,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import i18n from '../../../i18n';
-import { lightTheme, darkTheme, builtinThemes, applyTheme, Theme } from '../../../theme';
+import i18n from '../../../../i18n';
+import { lightTheme, darkTheme, builtinThemes, applyTheme, Theme } from '../../../../theme';
 import { Chrome } from 'vue-color';
 import * as uuid from 'uuid';
 import * as tinycolor from 'tinycolor2';
diff --git a/src/client/app/common/views/components/ui/card.vue b/src/client/app/common/views/components/ui/card.vue
index 7018c20b9d..a83013f5d0 100644
--- a/src/client/app/common/views/components/ui/card.vue
+++ b/src/client/app/common/views/components/ui/card.vue
@@ -62,4 +62,8 @@ export default Vue.extend({
 		> section
 			margin 16px 0
 
+			> header
+				font-weight bold
+				color var(--text)
+
 </style>
diff --git a/src/client/app/common/views/deck/deck.favorites-column.vue b/src/client/app/common/views/deck/deck.favorites-column.vue
index 67610f8b9f..238938594f 100644
--- a/src/client/app/common/views/deck/deck.favorites-column.vue
+++ b/src/client/app/common/views/deck/deck.favorites-column.vue
@@ -1,7 +1,7 @@
 <template>
 <x-column>
 	<template #header>
-		<fa :icon="['fa', 'star']"/>{{ $t('favorites') }}
+		<fa :icon="['fa', 'star']"/>{{ $t('@.favorites') }}
 	</template>
 
 	<div>
diff --git a/src/client/app/desktop/views/components/settings-window.vue b/src/client/app/desktop/views/components/settings-window.vue
index 8e7635429c..9bfd5a14c7 100644
--- a/src/client/app/desktop/views/components/settings-window.vue
+++ b/src/client/app/desktop/views/components/settings-window.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-window ref="window" is-modal width="700px" height="550px" @closed="destroyDom">
-	<template #header :class="$style.header"><fa icon="cog"/>{{ $t('settings') }}</template>
+	<template #header :class="$style.header"><fa icon="cog"/>{{ $t('@.settings') }}</template>
 	<x-settings :initial-page="initialPage" @done="close"/>
 </mk-window>
 </template>
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index da5489ec4e..ace967b973 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -1,267 +1,20 @@
 <template>
 <div class="mk-settings">
 	<div class="nav" :class="{ inWindow }">
-		<p :class="{ active: page == 'profile' }" @mousedown="page = 'profile'"><fa icon="user" fixed-width/>{{ $t('profile') }}</p>
-		<p :class="{ active: page == 'theme' }" @mousedown="page = 'theme'"><fa icon="palette" fixed-width/>{{ $t('theme') }}</p>
-		<p :class="{ active: page == 'web' }" @mousedown="page = 'web'"><fa icon="desktop" fixed-width/>Web</p>
-		<p :class="{ active: page == 'notification' }" @mousedown="page = 'notification'"><fa :icon="['far', 'bell']" fixed-width/>{{ $t('notification') }}</p>
+		<p :class="{ active: page == 'profile' }" @mousedown="page = 'profile'"><fa icon="user" fixed-width/>{{ $t('@._settings.profile') }}</p>
+		<p :class="{ active: page == 'appearance' }" @mousedown="page = 'appearance'"><fa icon="palette" fixed-width/>{{ $t('@._settings.appearance') }}</p>
+		<p :class="{ active: page == 'behavior' }" @mousedown="page = 'behavior'"><fa icon="desktop" fixed-width/>{{ $t('@._settings.behavior') }}</p>
+		<p :class="{ active: page == 'notification' }" @mousedown="page = 'notification'"><fa :icon="['far', 'bell']" fixed-width/>{{ $t('@._settings.notification') }}</p>
 		<p :class="{ active: page == 'drive' }" @mousedown="page = 'drive'"><fa icon="cloud" fixed-width/>{{ $t('@.drive') }}</p>
-		<p :class="{ active: page == 'hashtags' }" @mousedown="page = 'hashtags'"><fa icon="hashtag" fixed-width/>{{ $t('tags') }}</p>
-		<p :class="{ active: page == 'muteAndBlock' }" @mousedown="page = 'muteAndBlock'"><fa icon="ban" fixed-width/>{{ $t('mute-and-block') }}</p>
-		<p :class="{ active: page == 'apps' }" @mousedown="page = 'apps'"><fa icon="puzzle-piece" fixed-width/>{{ $t('apps') }}</p>
-		<p :class="{ active: page == 'security' }" @mousedown="page = 'security'"><fa icon="unlock-alt" fixed-width/>{{ $t('security') }}</p>
+		<p :class="{ active: page == 'hashtags' }" @mousedown="page = 'hashtags'"><fa icon="hashtag" fixed-width/>{{ $t('@._settings.tags') }}</p>
+		<p :class="{ active: page == 'muteAndBlock' }" @mousedown="page = 'muteAndBlock'"><fa icon="ban" fixed-width/>{{ $t('@._settings.mute-and-block') }}</p>
+		<p :class="{ active: page == 'apps' }" @mousedown="page = 'apps'"><fa icon="puzzle-piece" fixed-width/>{{ $t('@._settings.apps') }}</p>
+		<p :class="{ active: page == 'security' }" @mousedown="page = 'security'"><fa icon="unlock-alt" fixed-width/>{{ $t('@._settings.security') }}</p>
 		<p :class="{ active: page == 'api' }" @mousedown="page = 'api'"><fa icon="key" fixed-width/>API</p>
-		<p :class="{ active: page == 'other' }" @mousedown="page = 'other'"><fa icon="cogs" fixed-width/>{{ $t('other') }}</p>
+		<p :class="{ active: page == 'other' }" @mousedown="page = 'other'"><fa icon="cogs" fixed-width/>{{ $t('@._settings.other') }}</p>
 	</div>
 	<div class="pages">
-		<div class="profile" v-show="page == 'profile'">
-			<x-profile-editor/>
-			<x-integration-settings/>
-		</div>
-
-		<x-theme class="theme" v-show="page == 'theme'"/>
-
-		<ui-card class="web" v-show="page == 'web'">
-			<template #title><fa icon="sliders-h"/> {{ $t('behaviour') }}</template>
-
-			<section>
-				<ui-switch v-model="fetchOnScroll">{{ $t('fetch-on-scroll') }}
-					<template #desc>{{ $t('fetch-on-scroll-desc') }}</template>
-				</ui-switch>
-				<ui-switch v-model="autoPopout">{{ $t('auto-popout') }}
-					<template #desc>{{ $t('auto-popout-desc') }}</template>
-				</ui-switch>
-				<ui-switch v-model="keepCw">{{ $t('keep-cw') }}
-					<template #desc>{{ $t('keep-cw-desc') }}</template>
-				</ui-switch>
-			</section>
-
-			<section>
-				<header>{{ $t('timeline') }}</header>
-				<ui-switch v-model="showMyRenotes">{{ $t('show-my-renotes') }}</ui-switch>
-				<ui-switch v-model="showRenotedMyNotes">{{ $t('show-renoted-my-notes') }}</ui-switch>
-				<ui-switch v-model="showLocalRenotes">{{ $t('show-local-renotes') }}</ui-switch>
-			</section>
-
-			<section>
-				<header>{{ $t('note-visibility') }}</header>
-				<ui-switch v-model="rememberNoteVisibility">{{ $t('remember-note-visibility') }}</ui-switch>
-				<section>
-					<header>{{ $t('default-note-visibility') }}</header>
-					<ui-select v-model="defaultNoteVisibility">
-						<option value="public">{{ $t('@.note-visibility.public') }}</option>
-						<option value="home">{{ $t('@.note-visibility.home') }}</option>
-						<option value="followers">{{ $t('@.note-visibility.followers') }}</option>
-						<option value="specified">{{ $t('@.note-visibility.specified') }}</option>
-						<option value="local-public">{{ $t('@.note-visibility.local-public') }}</option>
-						<option value="local-home">{{ $t('@.note-visibility.local-home') }}</option>
-						<option value="local-followers">{{ $t('@.note-visibility.local-followers') }}</option>
-					</ui-select>
-				</section>
-			</section>
-
-			<section>
-				<header>{{ $t('web-search-engine') }}</header>
-				<ui-input v-model="webSearchEngine">{{ $t('web-search-engine') }}<template #desc>{{ $t('web-search-engine-desc') }}</template></ui-input>
-			</section>
-		</ui-card>
-
-		<ui-card class="web" v-show="page == 'web'">
-			<template #title><fa icon="desktop"/> {{ $t('display') }}</template>
-
-			<section>
-				<ui-switch v-model="showPostFormOnTopOfTl">{{ $t('post-form-on-timeline') }}</ui-switch>
-				<ui-button @click="customizeHome">{{ $t('@.customize-home') }}</ui-button>
-			</section>
-			<section>
-				<header>{{ $t('wallpaper') }}</header>
-				<ui-horizon-group class="fit-bottom">
-					<ui-button @click="updateWallpaper">{{ $t('choose-wallpaper') }}</ui-button>
-					<ui-button @click="deleteWallpaper">{{ $t('delete-wallpaper') }}</ui-button>
-				</ui-horizon-group>
-			</section>
-			<section>
-				<header>{{ $t('navbar-position') }}</header>
-				<ui-radio v-model="navbar" value="top">{{ $t('navbar-position-top') }}</ui-radio>
-				<ui-radio v-model="navbar" value="left">{{ $t('navbar-position-left') }}</ui-radio>
-				<ui-radio v-model="navbar" value="right">{{ $t('navbar-position-right') }}</ui-radio>
-			</section>
-			<section>
-				<ui-switch v-model="darkmode">{{ $t('@.dark-mode') }}</ui-switch>
-				<ui-switch v-model="useShadow">{{ $t('@.use-shadow') }}</ui-switch>
-				<ui-switch v-model="roundedCorners">{{ $t('@.rounded-corners') }}</ui-switch>
-				<ui-switch v-model="circleIcons">{{ $t('@.circle-icons') }}</ui-switch>
-				<section>
-					<header>{{ $t('@.line-width') }}</header>
-					<ui-radio v-model="lineWidth" :value="0.5">{{ $t('@.line-width-thin') }}</ui-radio>
-					<ui-radio v-model="lineWidth" :value="1">{{ $t('@.line-width-normal') }}</ui-radio>
-					<ui-radio v-model="lineWidth" :value="2">{{ $t('@.line-width-thick') }}</ui-radio>
-				</section>
-				<section>
-					<header>{{ $t('@.font-size') }}</header>
-					<ui-radio v-model="fontSize" :value="-2">{{ $t('@.font-size-x-small') }}</ui-radio>
-					<ui-radio v-model="fontSize" :value="-1">{{ $t('@.font-size-small') }}</ui-radio>
-					<ui-radio v-model="fontSize" :value="0">{{ $t('@.font-size-medium') }}</ui-radio>
-					<ui-radio v-model="fontSize" :value="1">{{ $t('@.font-size-large') }}</ui-radio>
-					<ui-radio v-model="fontSize" :value="2">{{ $t('@.font-size-x-large') }}</ui-radio>
-				</section>
-				<ui-switch v-model="reduceMotion">{{ $t('@.reduce-motion') }}</ui-switch>
-				<ui-switch v-model="contrastedAcct">{{ $t('@.contrasted-acct') }}</ui-switch>
-				<ui-switch v-model="showFullAcct">{{ $t('@.show-full-acct') }}</ui-switch>
-				<ui-switch v-model="showVia">{{ $t('@.show-via') }}</ui-switch>
-				<ui-switch v-model="useOsDefaultEmojis">{{ $t('@.use-os-default-emojis') }}</ui-switch>
-				<ui-switch v-model="iLikeSushi">{{ $t('@.i-like-sushi') }}</ui-switch>
-			</section>
-			<section>
-				<ui-switch v-model="suggestRecentHashtags">{{ $t('@.suggest-recent-hashtags') }}</ui-switch>
-				<ui-switch v-model="showClockOnHeader">{{ $t('show-clock-on-header') }}</ui-switch>
-				<ui-switch v-model="alwaysShowNsfw">{{ $t('@.always-show-nsfw') }}</ui-switch>
-				<ui-switch v-model="showReplyTarget">{{ $t('show-reply-target') }}</ui-switch>
-				<ui-switch v-model="showMaps">{{ $t('show-maps') }}</ui-switch>
-				<ui-switch v-model="disableAnimatedMfm">{{ $t('@.disable-animated-mfm') }}</ui-switch>
-				<ui-switch v-model="disableShowingAnimatedImages">{{ $t('@.disable-showing-animated-images') }}</ui-switch>
-				<ui-switch v-model="remainDeletedNote">{{ $t('remain-deleted-note') }}</ui-switch>
-			</section>
-			<section>
-				<header>{{ $t('@.deck-column-align') }}</header>
-				<ui-radio v-model="deckColumnAlign" value="center">{{ $t('@.deck-column-align-center') }}</ui-radio>
-				<ui-radio v-model="deckColumnAlign" value="left">{{ $t('@.deck-column-align-left') }}</ui-radio>
-				<ui-radio v-model="deckColumnAlign" value="flexible">{{ $t('@.deck-column-align-flexible') }}</ui-radio>
-			</section>
-			<section>
-				<header>{{ $t('@.deck-column-width') }}</header>
-				<ui-radio v-model="deckColumnWidth" value="narrow">{{ $t('@.deck-column-width-narrow') }}</ui-radio>
-				<ui-radio v-model="deckColumnWidth" value="narrower">{{ $t('@.deck-column-width-narrower') }}</ui-radio>
-				<ui-radio v-model="deckColumnWidth" value="normal">{{ $t('@.deck-column-width-normal') }}</ui-radio>
-				<ui-radio v-model="deckColumnWidth" value="wider">{{ $t('@.deck-column-width-wider') }}</ui-radio>
-				<ui-radio v-model="deckColumnWidth" value="wide">{{ $t('@.deck-column-width-wide') }}</ui-radio>
-			</section>
-			<section>
-				<ui-switch v-model="games_reversi_showBoardLabels">{{ $t('@.show-reversi-board-labels') }}</ui-switch>
-				<ui-switch v-model="games_reversi_useAvatarStones">{{ $t('@.use-avatar-reversi-stones') }}</ui-switch>
-			</section>
-		</ui-card>
-
-		<ui-card class="web" v-show="page == 'web'">
-			<template #title><fa icon="volume-up"/> {{ $t('sound') }}</template>
-
-			<section>
-				<ui-switch v-model="enableSounds">{{ $t('enable-sounds') }}
-					<template #desc>{{ $t('enable-sounds-desc') }}</template>
-				</ui-switch>
-				<label>{{ $t('volume') }}</label>
-				<input type="range"
-					v-model="soundVolume"
-					:disabled="!enableSounds"
-					max="1"
-					step="0.1"
-				/>
-				<ui-button @click="soundTest"><fa icon="volume-up"/> {{ $t('test') }}</ui-button>
-			</section>
-		</ui-card>
-
-		<x-language-settings v-show="page == 'web'"/>
-
-		<ui-card class="web" v-show="page == 'web'">
-			<template #title><fa :icon="['far', 'trash-alt']"/> {{ $t('cache') }}</template>
-			<section>
-				<ui-button @click="clean">{{ $t('clean-cache') }}</ui-button>
-				<div class="none ui info warn">
-					<p><fa icon="exclamation-triangle"/>{{ $t('cache-warn') }}</p>
-				</div>
-			</section>
-		</ui-card>
-
-		<x-notification-settings v-show="page == 'notification'"/>
-
-		<div class="drive" v-if="page == 'drive'">
-			<x-drive-settings/>
-		</div>
-
-		<ui-card class="hashtags" v-show="page == 'hashtags'">
-			<template #title><fa icon="hashtag"/> {{ $t('tags') }}</template>
-			<section>
-				<x-tags/>
-			</section>
-		</ui-card>
-
-		<div class="muteAndBlock" v-show="page == 'muteAndBlock'">
-			<x-mute-and-block/>
-		</div>
-
-		<ui-card class="apps" v-show="page == 'apps'">
-			<template #title><fa icon="puzzle-piece"/> {{ $t('apps') }}</template>
-			<section>
-				<x-apps/>
-			</section>
-		</ui-card>
-
-		<ui-card class="password" v-show="page == 'security'">
-			<template #title><fa icon="unlock-alt"/> {{ $t('password') }}</template>
-			<section>
-				<x-password-settings/>
-			</section>
-		</ui-card>
-
-		<ui-card class="2fa" v-show="page == 'security'">
-			<template #title><fa icon="mobile-alt"/> {{ $t('@.2fa') }}</template>
-			<section>
-				<x-2fa/>
-			</section>
-		</ui-card>
-
-		<ui-card class="signin" v-show="page == 'security'">
-			<template #title><fa icon="sign-in-alt"/> {{ $t('signin') }}</template>
-			<section>
-				<x-signins/>
-			</section>
-		</ui-card>
-
-		<div class="api" v-show="page == 'api'">
-			<x-api-settings/>
-		</div>
-
-		<ui-card class="other" v-show="page == 'other'">
-			<template #title><fa icon="info-circle"/> {{ $t('about') }}</template>
-			<section>
-				<p v-if="meta">{{ $t('operator') }}: <i><a :href="'mailto:' + meta.maintainer.email" target="_blank">{{ meta.maintainer.name }}</a></i></p>
-			</section>
-		</ui-card>
-
-		<ui-card class="other" v-show="page == 'other'">
-			<template #title><fa icon="sync-alt"/> {{ $t('update') }}</template>
-			<section>
-				<p>
-					<span>{{ $t('version') }} <i>{{ version }}</i></span>
-					<template v-if="latestVersion !== undefined">
-						<br>
-						<span>{{ $t('latest-version') }} <i>{{ latestVersion ? latestVersion : version }}</i></span>
-					</template>
-				</p>
-				<button class="ui button block" @click="checkForUpdate" :disabled="checkingForUpdate">
-					<template v-if="checkingForUpdate">{{ $t('update-checking') }}<mk-ellipsis/></template>
-					<template v-else>{{ $t('do-update') }}</template>
-				</button>
-				<details>
-					<summary>{{ $t('update-settings') }}</summary>
-					<ui-switch v-model="preventUpdate">
-						{{ $t('prevent-update') }}<template #desc>{{ $t('prevent-update-desc') }}</template>
-					</ui-switch>
-				</details>
-			</section>
-		</ui-card>
-
-		<ui-card class="other" v-show="page == 'other'">
-			<template #title><fa icon="cogs"/> {{ $t('advanced-settings') }}</template>
-			<section>
-				<ui-switch v-model="debug">
-					{{ $t('debug-mode') }}<template #desc>{{ $t('debug-mode-desc') }}</template>
-				</ui-switch>
-				<ui-switch v-model="enableExperimentalFeatures">
-					{{ $t('experimental') }}<template #desc>{{ $t('experimental-desc') }}</template>
-				</ui-switch>
-			</section>
-		</ui-card>
+		<x-settings :page="page"/>
 	</div>
 </div>
 </template>
@@ -269,39 +22,12 @@
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
-import X2fa from './settings.2fa.vue';
-import XApps from './settings.apps.vue';
-import XSignins from './settings.signins.vue';
-import XTags from './settings.tags.vue';
-import XIntegrationSettings from '../../../common/views/components/integration-settings.vue';
-import XTheme from '../../../common/views/components/theme.vue';
-import XDriveSettings from '../../../common/views/components/drive-settings.vue';
-import XMuteAndBlock from '../../../common/views/components/mute-and-block.vue';
-import XPasswordSettings from '../../../common/views/components/password-settings.vue';
-import XProfileEditor from '../../../common/views/components/profile-editor.vue';
-import XApiSettings from '../../../common/views/components/api-settings.vue';
-import XLanguageSettings from '../../../common/views/components/language-settings.vue';
-import XNotificationSettings from '../../../common/views/components/notification-settings.vue';
-
-import { url, version } from '../../../config';
-import checkForUpdate from '../../../common/scripts/check-for-update';
+import XSettings from '../../../common/views/components/settings/settings.vue';
 
 export default Vue.extend({
-	i18n: i18n('desktop/views/components/settings.vue'),
+	i18n: i18n(),
 	components: {
-		X2fa,
-		XApps,
-		XSignins,
-		XTags,
-		XIntegrationSettings,
-		XTheme,
-		XDriveSettings,
-		XMuteAndBlock,
-		XPasswordSettings,
-		XProfileEditor,
-		XApiSettings,
-		XLanguageSettings,
-		XNotificationSettings,
+		XSettings,
 	},
 	props: {
 		initialPage: {
@@ -317,287 +43,8 @@ export default Vue.extend({
 	data() {
 		return {
 			page: this.initialPage || 'profile',
-			meta: null,
-			version,
-			latestVersion: undefined,
-			checkingForUpdate: false
 		};
 	},
-	computed: {
-		useOsDefaultEmojis: {
-			get() { return this.$store.state.device.useOsDefaultEmojis; },
-			set(value) { this.$store.commit('device/set', { key: 'useOsDefaultEmojis', value }); }
-		},
-
-		reduceMotion: {
-			get() { return this.$store.state.device.reduceMotion; },
-			set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); }
-		},
-
-		autoPopout: {
-			get() { return this.$store.state.device.autoPopout; },
-			set(value) { this.$store.commit('device/set', { key: 'autoPopout', value }); }
-		},
-
-		keepCw: {
-			get() { return this.$store.state.settings.keepCw; },
-			set(value) { this.$store.commit('settings/set', { key: 'keepCw', value }); }
-		},
-
-		darkmode: {
-			get() { return this.$store.state.device.darkmode; },
-			set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); }
-		},
-
-		navbar: {
-			get() { return this.$store.state.device.navbar; },
-			set(value) { this.$store.commit('device/set', { key: 'navbar', value }); }
-		},
-
-		deckColumnAlign: {
-			get() { return this.$store.state.device.deckColumnAlign; },
-			set(value) { this.$store.commit('device/set', { key: 'deckColumnAlign', value }); }
-		},
-
-		deckColumnWidth: {
-			get() { return this.$store.state.device.deckColumnWidth; },
-			set(value) { this.$store.commit('device/set', { key: 'deckColumnWidth', value }); }
-		},
-
-		enableSounds: {
-			get() { return this.$store.state.device.enableSounds; },
-			set(value) { this.$store.commit('device/set', { key: 'enableSounds', value }); }
-		},
-
-		soundVolume: {
-			get() { return this.$store.state.device.soundVolume; },
-			set(value) { this.$store.commit('device/set', { key: 'soundVolume', value }); }
-		},
-
-		preventUpdate: {
-			get() { return this.$store.state.device.preventUpdate; },
-			set(value) { this.$store.commit('device/set', { key: 'preventUpdate', value }); }
-		},
-
-		debug: {
-			get() { return this.$store.state.device.debug; },
-			set(value) { this.$store.commit('device/set', { key: 'debug', value }); }
-		},
-
-		enableExperimentalFeatures: {
-			get() { return this.$store.state.device.enableExperimentalFeatures; },
-			set(value) { this.$store.commit('device/set', { key: 'enableExperimentalFeatures', value }); }
-		},
-
-		alwaysShowNsfw: {
-			get() { return this.$store.state.device.alwaysShowNsfw; },
-			set(value) { this.$store.commit('device/set', { key: 'alwaysShowNsfw', value }); }
-		},
-
-		useShadow: {
-			get() { return this.$store.state.device.useShadow; },
-			set(value) { this.$store.commit('device/set', { key: 'useShadow', value }); }
-		},
-
-		roundedCorners: {
-			get() { return this.$store.state.device.roundedCorners; },
-			set(value) { this.$store.commit('device/set', { key: 'roundedCorners', value }); }
-		},
-
-		lineWidth: {
-			get() { return this.$store.state.device.lineWidth; },
-			set(value) { this.$store.commit('device/set', { key: 'lineWidth', value }); }
-		},
-
-		fontSize: {
-			get() { return this.$store.state.device.fontSize; },
-			set(value) { this.$store.commit('device/set', { key: 'fontSize', value }); }
-		},
-
-		fetchOnScroll: {
-			get() { return this.$store.state.settings.fetchOnScroll; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'fetchOnScroll', value }); }
-		},
-
-		rememberNoteVisibility: {
-			get() { return this.$store.state.settings.rememberNoteVisibility; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'rememberNoteVisibility', value }); }
-		},
-
-		defaultNoteVisibility: {
-			get() { return this.$store.state.settings.defaultNoteVisibility; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'defaultNoteVisibility', value }); }
-		},
-
-		webSearchEngine: {
-			get() { return this.$store.state.settings.webSearchEngine; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'webSearchEngine', value }); }
-		},
-
-		showReplyTarget: {
-			get() { return this.$store.state.settings.showReplyTarget; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showReplyTarget', value }); }
-		},
-
-		showMyRenotes: {
-			get() { return this.$store.state.settings.showMyRenotes; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showMyRenotes', value }); }
-		},
-
-		showRenotedMyNotes: {
-			get() { return this.$store.state.settings.showRenotedMyNotes; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showRenotedMyNotes', value }); }
-		},
-
-		showLocalRenotes: {
-			get() { return this.$store.state.settings.showLocalRenotes; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showLocalRenotes', value }); }
-		},
-
-		showPostFormOnTopOfTl: {
-			get() { return this.$store.state.settings.showPostFormOnTopOfTl; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showPostFormOnTopOfTl', value }); }
-		},
-
-		suggestRecentHashtags: {
-			get() { return this.$store.state.settings.suggestRecentHashtags; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'suggestRecentHashtags', value }); }
-		},
-
-		showClockOnHeader: {
-			get() { return this.$store.state.settings.showClockOnHeader; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showClockOnHeader', value }); }
-		},
-
-		showMaps: {
-			get() { return this.$store.state.settings.showMaps; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showMaps', value }); }
-		},
-
-		circleIcons: {
-			get() { return this.$store.state.settings.circleIcons; },
-			set(value) {
-				this.$store.dispatch('settings/set', { key: 'circleIcons', value });
-				this.reload();
-			}
-		},
-
-		contrastedAcct: {
-			get() { return this.$store.state.settings.contrastedAcct; },
-			set(value) {
-				this.$store.dispatch('settings/set', { key: 'contrastedAcct', value });
-				this.reload();
-			}
-		},
-
-		showFullAcct: {
-			get() { return this.$store.state.settings.showFullAcct; },
-			set(value) {
-				this.$store.dispatch('settings/set', { key: 'showFullAcct', value });
-				this.reload();
-			}
-		},
-
-		showVia: {
-			get() { return this.$store.state.settings.showVia; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showVia', value }); }
-		},
-
-		iLikeSushi: {
-			get() { return this.$store.state.settings.iLikeSushi; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'iLikeSushi', value }); }
-		},
-
-		games_reversi_showBoardLabels: {
-			get() { return this.$store.state.settings.games.reversi.showBoardLabels; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'games.reversi.showBoardLabels', value }); }
-		},
-
-		games_reversi_useAvatarStones: {
-			get() { return this.$store.state.settings.games.reversi.useAvatarStones; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'games.reversi.useAvatarStones', value }); }
-		},
-
-		disableAnimatedMfm: {
-			get() { return this.$store.state.settings.disableAnimatedMfm; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'disableAnimatedMfm', value }); }
-		},
-
-		disableShowingAnimatedImages: {
-			get() { return this.$store.state.device.disableShowingAnimatedImages; },
-			set(value) { this.$store.commit('device/set', { key: 'disableShowingAnimatedImages', value }); }
-		},
-
-		remainDeletedNote: {
-			get() { return this.$store.state.settings.remainDeletedNote; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'remainDeletedNote', value }); }
-		}
-	},
-	created() {
-		this.$root.getMeta().then(meta => {
-			this.meta = meta;
-		});
-	},
-	methods: {
-		reload() {
-			this.$root.dialog({
-				type: 'warning',
-				text: this.$t('@.reload-to-apply-the-setting'),
-				showCancelButton: true
-			}).then(({ canceled }) => {
-				if (!canceled) {
-					location.reload();
-				}
-			});
-		},
-		customizeHome() {
-			location.href = '/?customize';
-		},
-		updateWallpaper() {
-			this.$chooseDriveFile({
-				multiple: false
-			}).then(file => {
-				this.$root.api('i/update', {
-					wallpaperId: file.id
-				});
-			});
-		},
-		deleteWallpaper() {
-			this.$root.api('i/update', {
-				wallpaperId: null
-			});
-		},
-		checkForUpdate() {
-			this.checkingForUpdate = true;
-			checkForUpdate(this.$root, true, true).then(newer => {
-				this.checkingForUpdate = false;
-				this.latestVersion = newer;
-				if (newer == null) {
-					this.$root.dialog({
-						title: this.$t('no-updates'),
-						text: this.$t('no-updates-desc')
-					});
-				} else {
-					this.$root.dialog({
-						title: this.$t('update-available'),
-						text: this.$t('update-available-desc')
-					});
-				}
-			});
-		},
-		clean() {
-			localStorage.clear();
-			this.$root.dialog({
-				title: this.$t('cache-cleared'),
-				text: this.$t('cache-cleared-desc')
-			});
-		},
-		soundTest() {
-			const sound = new Audio(`${url}/assets/message.mp3`);
-			sound.volume = this.$store.state.device.soundVolume;
-			sound.play();
-		}
-	}
 });
 </script>
 
@@ -642,8 +89,4 @@ export default Vue.extend({
 		overflow auto
 		background var(--bg)
 
-		> section
-			margin 32px
-			color var(--text)
-
 </style>
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index 5c93dcdcaf..effd0ef0fd 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -24,7 +24,7 @@
 				<li>
 					<router-link to="/i/favorites">
 						<i><fa icon="star"/></i>
-						<span>{{ $t('favorites') }}</span>
+						<span>{{ $t('@.favorites') }}</span>
 						<i><fa icon="angle-right"/></i>
 					</router-link>
 				</li>
@@ -47,7 +47,7 @@
 				<li>
 					<router-link to="/i/settings">
 						<i><fa icon="cog"/></i>
-						<span>{{ $t('settings') }}</span>
+						<span>{{ $t('@.settings') }}</span>
 						<i><fa icon="angle-right"/></i>
 					</router-link>
 				</li>
diff --git a/src/client/app/desktop/views/components/window.vue b/src/client/app/desktop/views/components/window.vue
index da5fe44ac9..23ccf28862 100644
--- a/src/client/app/desktop/views/components/window.vue
+++ b/src/client/app/desktop/views/components/window.vue
@@ -89,12 +89,6 @@ export default Vue.extend({
 		}
 	},
 
-	data() {
-		return {
-			preventMount: false
-		};
-	},
-
 	computed: {
 		isFlexible(): boolean {
 			return this.height == 'auto';
@@ -105,21 +99,11 @@ export default Vue.extend({
 	},
 
 	created() {
-		if (this.$store.state.device.autoPopout && this.popoutUrl) {
-			this.popout();
-			this.preventMount = true;
-		} else {
-			// ウィンドウをウィンドウシステムに登録
-			this.$root.os.windows.add(this);
-		}
+		// ウィンドウをウィンドウシステムに登録
+		this.$root.os.windows.add(this);
 	},
 
 	mounted() {
-		if (this.preventMount) {
-			this.destroyDom();
-			return;
-		}
-
 		this.$nextTick(() => {
 			const main = this.$refs.main as any;
 			main.style.top = '15%';
diff --git a/src/client/app/init.ts b/src/client/app/init.ts
index d13861080c..e85a249476 100644
--- a/src/client/app/init.ts
+++ b/src/client/app/init.ts
@@ -474,12 +474,9 @@ export default (callback: (launch: (router: VueRouter) => [Vue, MiOS], os: MiOS)
 			app.$mount('#app');
 
 			//#region 更新チェック
-			const preventUpdate = os.store.state.device.preventUpdate;
-			if (!preventUpdate) {
-				setTimeout(() => {
-					checkForUpdate(app);
-				}, 3000);
-			}
+			setTimeout(() => {
+				checkForUpdate(app);
+			}, 3000);
 			//#endregion
 
 			return [app, os] as [Vue, MiOS];
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index e92c404a28..169c7fc07d 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -26,13 +26,13 @@
 					</ul>
 					<ul>
 						<li><router-link to="/i/widgets" :data-active="$route.name == 'widgets'"><i><fa :icon="['far', 'calendar-alt']" fixed-width/></i>{{ $t('widgets') }}<i><fa icon="angle-right"/></i></router-link></li>
-						<li><router-link to="/i/favorites" :data-active="$route.name == 'favorites'"><i><fa icon="star" fixed-width/></i>{{ $t('favorites') }}<i><fa icon="angle-right"/></i></router-link></li>
+						<li><router-link to="/i/favorites" :data-active="$route.name == 'favorites'"><i><fa icon="star" fixed-width/></i>{{ $t('@.favorites') }}<i><fa icon="angle-right"/></i></router-link></li>
 						<li><router-link to="/i/lists" :data-active="$route.name == 'user-lists'"><i><fa icon="list" fixed-width/></i>{{ $t('user-lists') }}<i><fa icon="angle-right"/></i></router-link></li>
 						<li><router-link to="/i/drive" :data-active="$route.name == 'drive'"><i><fa icon="cloud" fixed-width/></i>{{ $t('@.drive') }}<i><fa icon="angle-right"/></i></router-link></li>
 					</ul>
 					<ul>
 						<li><a @click="search"><i><fa icon="search" fixed-width/></i>{{ $t('search') }}<i><fa icon="angle-right"/></i></a></li>
-						<li><router-link to="/i/settings" :data-active="$route.name == 'settings'"><i><fa icon="cog" fixed-width/></i>{{ $t('settings') }}<i><fa icon="angle-right"/></i></router-link></li>
+						<li><router-link to="/i/settings" :data-active="$route.name == 'settings'"><i><fa icon="cog" fixed-width/></i>{{ $t('@.settings') }}<i><fa icon="angle-right"/></i></router-link></li>
 						<li v-if="$store.getters.isSignedIn && ($store.state.i.isAdmin || $store.state.i.isModerator)"><a href="/admin"><i><fa icon="terminal" fixed-width/></i><span>{{ $t('admin') }}</span><i><fa icon="angle-right"/></i></a></li>
 					</ul>
 					<ul>
diff --git a/src/client/app/mobile/views/pages/favorites.vue b/src/client/app/mobile/views/pages/favorites.vue
index e8e7ee9ab5..196bd4b93c 100644
--- a/src/client/app/mobile/views/pages/favorites.vue
+++ b/src/client/app/mobile/views/pages/favorites.vue
@@ -1,6 +1,6 @@
 <template>
 <mk-ui>
-	<template #header><span style="margin-right:4px;"><fa icon="star"/></span>{{ $t('title') }}</template>
+	<template #header><span style="margin-right:4px;"><fa icon="star"/></span>{{ $t('@.favorites') }}</template>
 
 	<main>
 		<sequential-entrance animation="entranceFromTop" delay="25">
@@ -19,7 +19,7 @@ import i18n from '../../../i18n';
 import Progress from '../../../common/scripts/loading';
 
 export default Vue.extend({
-	i18n: i18n('mobile/views/pages/favorites.vue'),
+	i18n: i18n(),
 	data() {
 		return {
 			fetching: true,
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 6f5d0ec486..da01ef6221 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -1,171 +1,14 @@
 <template>
 <mk-ui>
-	<template #header><span style="margin-right:4px;"><fa icon="cog"/></span>{{ $t('settings') }}</template>
+	<template #header><span style="margin-right:4px;"><fa icon="cog"/></span>{{ $t('@.settings') }}</template>
 	<main>
-		<div class="signed-in-as">
+		<div class="signed-in-as" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
 			<mfm :text="$t('signed-in-as').replace('{}', name)" :should-break="false" :plain-text="true" :custom-emojis="$store.state.i.emojis"/>
 		</div>
-		<div>
-			<x-profile-editor/>
 
-			<x-theme/>
+		<x-settings/>
 
-			<ui-card>
-				<template #title><fa icon="poll-h"/> {{ $t('design') }}</template>
-
-				<section>
-					<ui-switch v-model="darkmode">{{ $t('@.dark-mode') }}</ui-switch>
-					<ui-switch v-model="useShadow">{{ $t('@.use-shadow') }}</ui-switch>
-					<ui-switch v-model="roundedCorners">{{ $t('@.rounded-corners') }}</ui-switch>
-					<ui-switch v-model="circleIcons">{{ $t('@.circle-icons') }}</ui-switch>
-					<section>
-						<header>{{ $t('@.line-width') }}</header>
-						<ui-radio v-model="lineWidth" :value="0.5">{{ $t('@.line-width-thin') }}</ui-radio>
-						<ui-radio v-model="lineWidth" :value="1">{{ $t('@.line-width-normal') }}</ui-radio>
-						<ui-radio v-model="lineWidth" :value="2">{{ $t('@.line-width-thick') }}</ui-radio>
-					</section>
-					<section>
-						<header>{{ $t('@.font-size') }}</header>
-						<ui-radio v-model="fontSize" :value="-2">{{ $t('@.font-size-x-small') }}</ui-radio>
-						<ui-radio v-model="fontSize" :value="-1">{{ $t('@.font-size-small') }}</ui-radio>
-						<ui-radio v-model="fontSize" :value="0">{{ $t('@.font-size-medium') }}</ui-radio>
-						<ui-radio v-model="fontSize" :value="1">{{ $t('@.font-size-large') }}</ui-radio>
-						<ui-radio v-model="fontSize" :value="2">{{ $t('@.font-size-x-large') }}</ui-radio>
-					</section>
-					<ui-switch v-model="reduceMotion">{{ $t('@.reduce-motion') }}</ui-switch>
-					<ui-switch v-model="contrastedAcct">{{ $t('@.contrasted-acct') }}</ui-switch>
-					<ui-switch v-model="showFullAcct">{{ $t('@.show-full-acct') }}</ui-switch>
-					<ui-switch v-model="showVia">{{ $t('@.show-via') }}</ui-switch>
-					<ui-switch v-model="useOsDefaultEmojis">{{ $t('@.use-os-default-emojis') }}</ui-switch>
-					<ui-switch v-model="iLikeSushi">{{ $t('@.i-like-sushi') }}</ui-switch>
-					<ui-switch v-model="disableAnimatedMfm">{{ $t('@.disable-animated-mfm') }}</ui-switch>
-					<ui-switch v-model="disableShowingAnimatedImages">{{ $t('@.disable-showing-animated-images') }}</ui-switch>
-					<ui-switch v-model="suggestRecentHashtags">{{ $t('@.suggest-recent-hashtags') }}</ui-switch>
-					<ui-switch v-model="alwaysShowNsfw">{{ $t('@.always-show-nsfw') }} ({{ $t('@.this-setting-is-this-device-only') }})</ui-switch>
-				</section>
-
-				<section>
-					<ui-switch v-model="games_reversi_showBoardLabels">{{ $t('@.show-reversi-board-labels') }}</ui-switch>
-					<ui-switch v-model="games_reversi_useAvatarStones">{{ $t('@.use-avatar-reversi-stones') }}</ui-switch>
-				</section>
-
-				<section>
-					<header>{{ $t('timeline') }}</header>
-					<div>
-						<ui-switch v-model="showReplyTarget">{{ $t('show-reply-target') }}</ui-switch>
-						<ui-switch v-model="showMyRenotes">{{ $t('show-my-renotes') }}</ui-switch>
-						<ui-switch v-model="showRenotedMyNotes">{{ $t('show-renoted-my-notes') }}</ui-switch>
-						<ui-switch v-model="showLocalRenotes">{{ $t('show-local-renotes') }}</ui-switch>
-					</div>
-				</section>
-
-				<section>
-					<header>{{ $t('post-style') }}</header>
-					<ui-radio v-model="postStyle" value="standard">{{ $t('post-style-standard') }}</ui-radio>
-					<ui-radio v-model="postStyle" value="smart">{{ $t('post-style-smart') }}</ui-radio>
-				</section>
-
-				<section>
-					<header>{{ $t('notification-position') }}</header>
-					<ui-radio v-model="mobileNotificationPosition" value="bottom">{{ $t('notification-position-bottom') }}</ui-radio>
-					<ui-radio v-model="mobileNotificationPosition" value="top">{{ $t('notification-position-top') }}</ui-radio>
-				</section>
-
-				<section>
-					<header>{{ $t('@.deck-column-align') }}</header>
-					<ui-radio v-model="deckColumnAlign" value="center">{{ $t('@.deck-column-align-center') }}</ui-radio>
-					<ui-radio v-model="deckColumnAlign" value="left">{{ $t('@.deck-column-align-left') }}</ui-radio>
-					<ui-radio v-model="deckColumnAlign" value="flexible">{{ $t('@.deck-column-align-flexible') }}</ui-radio>
-				</section>
-				<section>
-					<header>{{ $t('@.deck-column-width') }}</header>
-					<ui-radio v-model="deckColumnWidth" value="narrow">{{ $t('@.deck-column-width-narrow') }}</ui-radio>
-					<ui-radio v-model="deckColumnWidth" value="narrower">{{ $t('@.deck-column-width-narrower') }}</ui-radio>
-					<ui-radio v-model="deckColumnWidth" value="normal">{{ $t('@.deck-column-width-normal') }}</ui-radio>
-					<ui-radio v-model="deckColumnWidth" value="wider">{{ $t('@.deck-column-width-wider') }}</ui-radio>
-					<ui-radio v-model="deckColumnWidth" value="wide">{{ $t('@.deck-column-width-wide') }}</ui-radio>
-				</section>
-			</ui-card>
-
-			<ui-card>
-				<template #title><fa icon="sliders-h"/> {{ $t('behavior') }}</template>
-
-				<section>
-					<ui-switch v-model="fetchOnScroll">{{ $t('fetch-on-scroll') }}</ui-switch>
-					<ui-switch v-model="keepCw">{{ $t('keep-cw') }}</ui-switch>
-					<ui-switch v-model="disableViaMobile">{{ $t('disable-via-mobile') }}</ui-switch>
-					<ui-switch v-model="loadRawImages">{{ $t('load-raw-images') }}</ui-switch>
-					<ui-switch v-model="loadRemoteMedia">{{ $t('load-remote-media') }}</ui-switch>
-					<ui-switch v-model="lightmode">{{ $t('i-am-under-limited-internet') }}</ui-switch>
-				</section>
-
-				<section>
-					<header>{{ $t('note-visibility') }}</header>
-					<ui-switch v-model="rememberNoteVisibility">{{ $t('remember-note-visibility') }}</ui-switch>
-					<section>
-						<header>{{ $t('default-note-visibility') }}</header>
-						<ui-select v-model="defaultNoteVisibility">
-							<option value="public">{{ $t('@.note-visibility.public') }}</option>
-							<option value="home">{{ $t('@.note-visibility.home') }}</option>
-							<option value="followers">{{ $t('@.note-visibility.followers') }}</option>
-							<option value="specified">{{ $t('@.note-visibility.specified') }}</option>
-							<option value="local-public">{{ $t('@.note-visibility.local-public') }}</option>
-							<option value="local-home">{{ $t('@.note-visibility.local-home') }}</option>
-							<option value="local-followers">{{ $t('@.note-visibility.local-followers') }}</option>
-						</ui-select>
-					</section>
-				</section>
-
-				<section>
-					<header>{{ $t('web-search-engine') }}</header>
-					<ui-input v-model="webSearchEngine">{{ $t('web-search-engine') }}<template #desc>{{ $t('web-search-engine-desc') }}</template></ui-input>
-				</section>
-			</ui-card>
-
-			<x-notification-settings/>
-
-			<x-drive-settings/>
-
-			<x-mute-and-block/>
-
-			<ui-card>
-				<template #title><fa icon="volume-up"/> {{ $t('sound') }}</template>
-
-				<section>
-					<ui-switch v-model="enableSounds">{{ $t('enable-sounds') }}</ui-switch>
-				</section>
-			</ui-card>
-
-			<x-language-settings/>
-
-			<x-integration-settings/>
-
-			<x-api-settings />
-
-			<ui-card>
-				<template #title><fa icon="unlock-alt"/> {{ $t('password') }}</template>
-				<section>
-					<x-password-settings/>
-				</section>
-			</ui-card>
-
-			<ui-card>
-				<template #title><fa icon="sync-alt"/> {{ $t('update') }}</template>
-
-				<section>
-					<div>{{ $t('version') }} <i>{{ version }}</i></div>
-					<template v-if="latestVersion !== undefined">
-						<div>{{ $t('latest-version') }} <i>{{ latestVersion ? latestVersion : version }}</i></div>
-					</template>
-					<ui-button @click="checkForUpdate" :disabled="checkingForUpdate">
-						<template v-if="checkingForUpdate">{{ $t('update-checking') }}<mk-ellipsis/></template>
-						<template v-else>{{ $t('check-for-updates') }}</template>
-					</ui-button>
-				</section>
-			</ui-card>
-		</div>
-
-		<div class="signout" @click="signout">{{ $t('@.signout') }}</div>
+		<div class="signout" :class="{ shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }" @click="signout">{{ $t('@.signout') }}</div>
 
 		<footer>
 			<small>ver {{ version }} ({{ codename }})</small>
@@ -177,277 +20,29 @@
 <script lang="ts">
 import Vue from 'vue';
 import i18n from '../../../i18n';
-import { apiUrl, version, codename } from '../../../config';
-import checkForUpdate from '../../../common/scripts/check-for-update';
-import XTheme from '../../../common/views/components/theme.vue';
-import XDriveSettings from '../../../common/views/components/drive-settings.vue';
-import XMuteAndBlock from '../../../common/views/components/mute-and-block.vue';
-import XPasswordSettings from '../../../common/views/components/password-settings.vue';
-import XProfileEditor from '../../../common/views/components/profile-editor.vue';
-import XApiSettings from '../../../common/views/components/api-settings.vue';
-import XLanguageSettings from '../../../common/views/components/language-settings.vue';
-import XIntegrationSettings from '../../../common/views/components/integration-settings.vue';
-import XNotificationSettings from '../../../common/views/components/notification-settings.vue';
+import XSettings from '../../../common/views/components/settings/settings.vue';
+import { version, codename } from '../../../config';
 
 export default Vue.extend({
 	i18n: i18n('mobile/views/pages/settings.vue'),
-
 	components: {
-		XTheme,
-		XDriveSettings,
-		XMuteAndBlock,
-		XPasswordSettings,
-		XProfileEditor,
-		XApiSettings,
-		XLanguageSettings,
-		XIntegrationSettings,
-		XNotificationSettings,
+		XSettings,
 	},
-
 	data() {
 		return {
-			apiUrl,
 			version,
 			codename,
-			latestVersion: undefined,
-			checkingForUpdate: false
 		};
 	},
-
 	computed: {
 		name(): string {
 			return Vue.filter('userName')(this.$store.state.i);
 		},
-
-		darkmode: {
-			get() { return this.$store.state.device.darkmode; },
-			set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); }
-		},
-
-		useShadow: {
-			get() { return this.$store.state.device.useShadow; },
-			set(value) { this.$store.commit('device/set', { key: 'useShadow', value }); }
-		},
-
-		roundedCorners: {
-			get() { return this.$store.state.device.roundedCorners; },
-			set(value) { this.$store.commit('device/set', { key: 'roundedCorners', value }); }
-		},
-
-		useOsDefaultEmojis: {
-			get() { return this.$store.state.device.useOsDefaultEmojis; },
-			set(value) { this.$store.commit('device/set', { key: 'useOsDefaultEmojis', value }); }
-		},
-
-		reduceMotion: {
-			get() { return this.$store.state.device.reduceMotion; },
-			set(value) { this.$store.commit('device/set', { key: 'reduceMotion', value }); }
-		},
-
-		suggestRecentHashtags: {
-			get() { return this.$store.state.settings.suggestRecentHashtags; },
-			set(value) { this.$store.commit('device/set', { key: 'suggestRecentHashtags', value }); }
-		},
-
-		alwaysShowNsfw: {
-			get() { return this.$store.state.device.alwaysShowNsfw; },
-			set(value) { this.$store.commit('device/set', { key: 'alwaysShowNsfw', value }); }
-		},
-
-		postStyle: {
-			get() { return this.$store.state.device.postStyle; },
-			set(value) { this.$store.commit('device/set', { key: 'postStyle', value }); }
-		},
-
-		mobileNotificationPosition: {
-			get() { return this.$store.state.device.mobileNotificationPosition; },
-			set(value) { this.$store.commit('device/set', { key: 'mobileNotificationPosition', value }); }
-		},
-
-		lightmode: {
-			get() { return this.$store.state.device.lightmode; },
-			set(value) { this.$store.commit('device/set', { key: 'lightmode', value }); }
-		},
-
-		loadRawImages: {
-			get() { return this.$store.state.device.loadRawImages; },
-			set(value) { this.$store.commit('device/set', { key: 'loadRawImages', value }); }
-		},
-
-		enableSounds: {
-			get() { return this.$store.state.device.enableSounds; },
-			set(value) { this.$store.commit('device/set', { key: 'enableSounds', value }); }
-		},
-
-		deckColumnAlign: {
-			get() { return this.$store.state.device.deckColumnAlign; },
-			set(value) { this.$store.commit('device/set', { key: 'deckColumnAlign', value }); }
-		},
-
-		deckColumnWidth: {
-			get() { return this.$store.state.device.deckColumnWidth; },
-			set(value) { this.$store.commit('device/set', { key: 'deckColumnWidth', value }); }
-		},
-
-		fetchOnScroll: {
-			get() { return this.$store.state.settings.fetchOnScroll; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'fetchOnScroll', value }); }
-		},
-
-		keepCw: {
-			get() { return this.$store.state.settings.keepCw; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'keepCw', value }); }
-		},
-
-		rememberNoteVisibility: {
-			get() { return this.$store.state.settings.rememberNoteVisibility; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'rememberNoteVisibility', value }); }
-		},
-
-		disableViaMobile: {
-			get() { return this.$store.state.settings.disableViaMobile; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'disableViaMobile', value }); }
-		},
-
-		loadRemoteMedia: {
-			get() { return this.$store.state.settings.loadRemoteMedia; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'loadRemoteMedia', value }); }
-		},
-
-		circleIcons: {
-			get() { return this.$store.state.settings.circleIcons; },
-			set(value) {
-				this.$store.dispatch('settings/set', { key: 'circleIcons', value });
-				this.reload();
-			}
-		},
-
-		lineWidth: {
-			get() { return this.$store.state.device.lineWidth; },
-			set(value) { this.$store.commit('device/set', { key: 'lineWidth', value }); }
-		},
-
-		fontSize: {
-			get() { return this.$store.state.device.fontSize; },
-			set(value) { this.$store.commit('device/set', { key: 'fontSize', value }); }
-		},
-
-		contrastedAcct: {
-			get() { return this.$store.state.settings.contrastedAcct; },
-			set(value) {
-				this.$store.dispatch('settings/set', { key: 'contrastedAcct', value });
-				this.reload();
-			}
-		},
-
-		showFullAcct: {
-			get() { return this.$store.state.settings.showFullAcct; },
-			set(value) {
-				this.$store.dispatch('settings/set', { key: 'showFullAcct', value });
-				this.reload();
-			}
-		},
-
-		showVia: {
-			get() { return this.$store.state.settings.showVia; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showVia', value }); }
-		},
-
-		iLikeSushi: {
-			get() { return this.$store.state.settings.iLikeSushi; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'iLikeSushi', value }); }
-		},
-
-		games_reversi_showBoardLabels: {
-			get() { return this.$store.state.settings.games.reversi.showBoardLabels; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'games.reversi.showBoardLabels', value }); }
-		},
-
-		games_reversi_useAvatarStones: {
-			get() { return this.$store.state.settings.games.reversi.useAvatarStones; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'games.reversi.useAvatarStones', value }); }
-		},
-
-		disableAnimatedMfm: {
-			get() { return this.$store.state.settings.disableAnimatedMfm; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'disableAnimatedMfm', value }); }
-		},
-
-		disableShowingAnimatedImages: {
-			get() { return this.$store.state.device.disableShowingAnimatedImages; },
-			set(value) { this.$store.commit('device/set', { key: 'disableShowingAnimatedImages', value }); }
-		},
-
-		showReplyTarget: {
-			get() { return this.$store.state.settings.showReplyTarget; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showReplyTarget', value }); }
-		},
-
-		showMyRenotes: {
-			get() { return this.$store.state.settings.showMyRenotes; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showMyRenotes', value }); }
-		},
-
-		showRenotedMyNotes: {
-			get() { return this.$store.state.settings.showRenotedMyNotes; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showRenotedMyNotes', value }); }
-		},
-
-		showLocalRenotes: {
-			get() { return this.$store.state.settings.showLocalRenotes; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'showLocalRenotes', value }); }
-		},
-
-		defaultNoteVisibility: {
-			get() { return this.$store.state.settings.defaultNoteVisibility; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'defaultNoteVisibility', value }); }
-		},
-
-		webSearchEngine: {
-			get() { return this.$store.state.settings.webSearchEngine; },
-			set(value) { this.$store.dispatch('settings/set', { key: 'webSearchEngine', value }); }
-		},
 	},
-
-	mounted() {
-		document.title = this.$t('settings');
-	},
-
 	methods: {
 		signout() {
 			this.$root.signout();
 		},
-
-		reload() {
-			this.$root.dialog({
-				type: 'warning',
-				text: this.$t('@.reload-to-apply-the-setting'),
-				showCancelButton: true
-			}).then(({ canceled }) => {
-				if (!canceled) {
-					location.reload();
-				}
-			});
-		},
-
-		checkForUpdate() {
-			this.checkingForUpdate = true;
-			checkForUpdate(this.$root, true, true).then(newer => {
-				this.checkingForUpdate = false;
-				this.latestVersion = newer;
-				if (newer == null) {
-					this.$root.dialog({
-						title: this.$t('no-updates'),
-						text: this.$t('no-updates-desc')
-					});
-				} else {
-					this.$root.dialog({
-						title: this.$t('update-available'),
-						text: this.$t('update-available-desc')
-					});
-				}
-			});
-		}
 	}
 });
 </script>
@@ -461,16 +56,26 @@ main
 		text-align center
 		color var(--mobileSignedInAsFg)
 		background var(--mobileSignedInAsBg)
-		box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
 		font-weight bold
 
+		&.round
+			border-radius 6px
+
+		&.shadow
+			box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
+
 	> .signout
 		margin 16px
 		padding 16px
 		text-align center
 		color var(--mobileSignedInAsFg)
 		background var(--mobileSignedInAsBg)
-		box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
+
+		&.round
+			border-radius 6px
+
+		&.shadow
+			box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
 
 	> footer
 		margin 16px
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index b79a32b3da..8f0a74ea35 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -12,7 +12,6 @@ const defaultSettings = {
 	keepCw: false,
 	tagTimelines: [],
 	fetchOnScroll: true,
-	showMaps: true,
 	remainDeletedNote: false,
 	showPostFormOnTopOfTl: false,
 	suggestRecentHashtags: true,
@@ -49,7 +48,6 @@ const defaultDeviceSettings = {
 	useShadow: false,
 	roundedCorners: true,
 	reduceMotion: false,
-	autoPopout: false,
 	darkmode: true,
 	darkTheme: 'dark',
 	lightTheme: 'light',
@@ -60,7 +58,6 @@ const defaultDeviceSettings = {
 	soundVolume: 0.5,
 	mediaVolume: 0.5,
 	lang: null,
-	preventUpdate: false,
 	debug: false,
 	lightmode: false,
 	loadRawImages: false,