diff --git a/locales/index.d.ts b/locales/index.d.ts
index 39a867b8c484..67e228bd665d 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -10683,6 +10683,115 @@ export interface Locale extends ILocale {
                  */
                 readonly "caption": string;
             };
+            readonly "_backupAndSyncingCustomCss": {
+                readonly "_backup": {
+                    /**
+                     * カスタムCSSのバックアップ
+                     */
+                    readonly "title": string;
+                    /**
+                     * 現在のカスタムCSSをバックアップとしてサーバーに保存することが可能です。
+                     */
+                    readonly "description": string;
+                    /**
+                     * バックアップがありません。「新規作成」で現在適用されているカスタムCSSのバックアップを作成できます。
+                     */
+                    readonly "notfound": string;
+                    /**
+                     * 作成日時: {datetime}
+                     */
+                    readonly "createdAt": ParameterizedString<"datetime">;
+                    /**
+                     * バックアップの読み込みに失敗しました。
+                     */
+                    readonly "cannnotLoad": string;
+                    /**
+                     * バックアップファイルはjson形式である必要があります。
+                     */
+                    readonly "invalidFile": string;
+                    /**
+                     * バックアップ名が不正です。
+                     */
+                    readonly "invalidName": string;
+                    /**
+                     * バックアップのカスタムCSSが不正です。
+                     */
+                    readonly "invalidCustomCss": string;
+                    /**
+                     * カスタムCSSが設定されていません
+                     */
+                    readonly "noCustomCss": string;
+                    /**
+                     * カスタムCSSを設定されていない状態ではバックアップを作成できません。
+                     */
+                    readonly "noCustomCssDescription": string;
+                    /**
+                     * バックアップ名を入力
+                     */
+                    readonly "inputBackupName": string;
+                    /**
+                     * カスタムCSSのバックアップを適用
+                     */
+                    readonly "applyBackup": string;
+                    /**
+                     * カスタムCSSのバックアップ「{name}」を適用しますか？
+                     */
+                    readonly "applyBackupDescription": ParameterizedString<"name">;
+                    /**
+                     * カスタムCSSを設定されていない状態では上書き保存できません。
+                     * カスタムCSSのバックアップを削除する場合はメニューから「削除」を選択してください。
+                     */
+                    readonly "cannotOverrideEmpty": string;
+                    /**
+                     * カスタムCSSのバックアップを上書き保存
+                     */
+                    readonly "overrideBackup": string;
+                    /**
+                     * カスタムCSSのバックアップ「{name}」を上書き保存しますか？
+                     * この操作は取り消せません。
+                     */
+                    readonly "overrideBackupDescription": ParameterizedString<"name">;
+                    /**
+                     * カスタムCSSのバックアップを削除
+                     */
+                    readonly "deleteBackup": string;
+                    /**
+                     * カスタムCSSのバックアップ「{name}」を削除しますか？
+                     * この操作は取り消せません。
+                     */
+                    readonly "deleteBackupDescription": ParameterizedString<"name">;
+                    /**
+                     * 上書き保存
+                     */
+                    readonly "override": string;
+                    /**
+                     * バックアップ内容を見る
+                     */
+                    readonly "preview": string;
+                };
+                readonly "_syncing": {
+                    /**
+                     * カスタムCSSの同期
+                     */
+                    readonly "title": string;
+                    /**
+                     * カスタムCSSの同期を有効化すると、カスタムCSSの変更がリアルタイムに同期されます。
+                     */
+                    readonly "description": string;
+                    /**
+                     * カスタムCSSの同期を有効化
+                     */
+                    readonly "enable": string;
+                    /**
+                     * 同期するカスタムCSSを選択
+                     */
+                    readonly "select": string;
+                    /**
+                     * 任意のカスタムCSSのバックアップを他のデバイスとの間で同期することができます。
+                     */
+                    readonly "selectDescription": string;
+                };
+            };
         };
         readonly "_admin": {
             /**
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index c4a3f2a983c7..9171b5910b2d 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2848,6 +2848,34 @@ _tms:
     _preventLongPressContextMenu:
       label: "長押しによるコンテキストメニューイベントの発行を防ぐ"
       caption: "長押しを含む操作が中断される問題を解消します。"
+    _backupAndSyncingCustomCss:
+      _backup:
+        title: "カスタムCSSのバックアップ"
+        description: "現在のカスタムCSSをバックアップとしてサーバーに保存することが可能です。"
+        notfound: "バックアップがありません。「新規作成」で現在適用されているカスタムCSSのバックアップを作成できます。"
+        createdAt: "作成日時: {datetime}"
+        cannnotLoad: "バックアップの読み込みに失敗しました。"
+        invalidFile: "バックアップファイルはjson形式である必要があります。"
+        invalidName: "バックアップ名が不正です。"
+        invalidCustomCss: "バックアップのカスタムCSSが不正です。"
+        noCustomCss: "カスタムCSSが設定されていません"
+        noCustomCssDescription: "カスタムCSSを設定されていない状態ではバックアップを作成できません。"
+        inputBackupName: "バックアップ名を入力"
+        applyBackup: "カスタムCSSのバックアップを適用"
+        applyBackupDescription: "カスタムCSSのバックアップ「{name}」を適用しますか？"
+        cannotOverrideEmpty: "カスタムCSSを設定されていない状態では上書き保存できません。\nカスタムCSSのバックアップを削除する場合はメニューから「削除」を選択してください。"
+        overrideBackup: "カスタムCSSのバックアップを上書き保存"
+        overrideBackupDescription: "カスタムCSSのバックアップ「{name}」を上書き保存しますか？\nこの操作は取り消せません。"
+        deleteBackup: "カスタムCSSのバックアップを削除"
+        deleteBackupDescription: "カスタムCSSのバックアップ「{name}」を削除しますか？\nこの操作は取り消せません。"
+        override: "上書き保存"
+        preview: "バックアップ内容を見る"
+      _syncing:
+        title: "カスタムCSSの同期"
+        description: "カスタムCSSの同期を有効化すると、カスタムCSSの変更がリアルタイムに同期されます。"
+        enable: "カスタムCSSの同期を有効化"
+        select: "同期するカスタムCSSを選択"
+        selectDescription: "任意のカスタムCSSのバックアップを他のデバイスとの間で同期することができます。"
   _admin:
     repositoryUrlDescription: "ソースコードが公開されているリポジトリがある場合、そのURLを記入します。taiymeを現状のまま（ソースコードにいかなる変更も加えずに）使用している場合は https://github.com/taiyme/misskey と記入します。"
   _search:
diff --git a/packages/backend/src/server/web/boot.embed.js b/packages/backend/src/server/web/boot.embed.js
index 173f7b0222df..905ccb8cf75f 100644
--- a/packages/backend/src/server/web/boot.embed.js
+++ b/packages/backend/src/server/web/boot.embed.js
@@ -105,10 +105,10 @@
 	}
 	//#endregion
 
-	async function addStyle(styleText) {
-		let css = document.createElement('style');
-		css.appendChild(document.createTextNode(styleText));
-		document.head.appendChild(css);
+	function addStyle(styleText) {
+		const styleTag = document.createElement('style');
+		styleTag.textContent = styleText;
+		document.head.appendChild(styleTag);
 	}
 
 	async function renderError(code) {
diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index 259a2b2eeea9..0b6031e74dd5 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -136,15 +136,16 @@
 
 	const customCss = localStorage.getItem('customCss');
 	if (customCss && customCss.length > 0) {
-		const style = document.createElement('style');
-		style.innerHTML = customCss;
-		document.head.appendChild(style);
+		const styleTag = document.createElement('style');
+		styleTag.textContent = customCss;
+		styleTag.id = 'custom_css';
+		document.head.appendChild(styleTag);
 	}
 
-	async function addStyle(styleText) {
-		let css = document.createElement('style');
-		css.appendChild(document.createTextNode(styleText));
-		document.head.appendChild(css);
+	function addStyle(styleText) {
+		const styleTag = document.createElement('style');
+		styleTag.textContent = styleText;
+		document.head.appendChild(styleTag);
 	}
 
 	async function renderError(code, details) {
diff --git a/packages/frontend/src/_dev_boot_.ts b/packages/frontend/src/_dev_boot_.ts
index 1601f247d759..9b1b812a8c8a 100644
--- a/packages/frontend/src/_dev_boot_.ts
+++ b/packages/frontend/src/_dev_boot_.ts
@@ -79,9 +79,10 @@ async function main() {
 
 	const customCss = localStorage.getItem('customCss');
 	if (customCss && customCss.length > 0) {
-		const style = document.createElement('style');
-		style.innerHTML = customCss;
-		document.head.appendChild(style);
+		const styleTag = document.createElement('style');
+		styleTag.textContent = customCss;
+		styleTag.id = 'custom_css';
+		document.head.appendChild(styleTag);
 	}
 }
 
diff --git a/packages/frontend/src/boot/common.ts b/packages/frontend/src/boot/common.ts
index 0747678caf44..343aa39419c5 100644
--- a/packages/frontend/src/boot/common.ts
+++ b/packages/frontend/src/boot/common.ts
@@ -6,6 +6,7 @@
 import { computed, watch, version as vueVersion, App } from 'vue';
 import { compareVersions } from 'compare-versions';
 import { version, lang, updateLocale, locale, commitHash } from '@@/js/config.js';
+import type { CustomCSSBackup } from '@/pages/tms/backup-and-syncing-custom-css/backup.vue';
 import widgets from '@/widgets/index.js';
 import directives from '@/directives/index.js';
 import components from '@/components/index.js';
@@ -26,6 +27,7 @@ import { setupRouter } from '@/router/main.js';
 import { createMainRouter } from '@/router/definition.js';
 import { tmsFlaskStore } from '@/tms/flask-store.js';
 import { tmsStore } from '@/tms/store.js';
+import { useStream } from '@/stream.js';
 import { preventLongPressContextMenu } from '@/scripts/tms/prevent-longpress-contextmenu.js';
 
 export async function common(createVue: () => App<Element>) {
@@ -120,10 +122,10 @@ export async function common(createVue: () => App<Element>) {
 	html.setAttribute('lang', lang);
 	//#endregion
 
-	await defaultStore.ready;
-	await deckStore.ready;
-	await tmsStore.ready;
-	await tmsFlaskStore.ready;
+	await defaultStore.loaded;
+	await deckStore.loaded;
+	await tmsStore.loaded;
+	await tmsFlaskStore.loaded;
 
 	if (tmsFlaskStore.state.preventLongPressContextMenu) {
 		preventLongPressContextMenu();
@@ -213,6 +215,31 @@ export async function common(createVue: () => App<Element>) {
 		}
 	}, { immediate: true });
 
+	// tms custom css syncing
+	const enabledCustomCssSyncing = tmsFlaskStore.state.enabledCustomCssSyncing;
+	if (enabledCustomCssSyncing) {
+		const syncingCustomCssId = tmsFlaskStore.state.syncingCustomCssId;
+		const connection = useStream().useChannel('main');
+		const scope = ['tms', 'customCssBackups'] as const satisfies string[];
+
+		connection.on('registryUpdated', ({ scope: recievedScope, key, value }) => {
+			if (scope.join('/') !== recievedScope?.join('/')) return;
+			if (key !== syncingCustomCssId) return;
+
+			const { customCss } = value as unknown as CustomCSSBackup;
+			miLocalStorage.setItem('customCss', customCss);
+
+			let styleTag = document.getElementById('custom_css');
+			if (styleTag == null) {
+				styleTag = document.createElement('style');
+				styleTag.id = 'custom_css';
+				document.head.appendChild(styleTag);
+			}
+
+			styleTag.textContent = customCss;
+		});
+	}
+
 	// Keep screen on
 	const onVisibilityChange = () => document.addEventListener('visibilitychange', () => {
 		if (document.visibilityState === 'visible') {
diff --git a/packages/frontend/src/components/TmsCodePreviewDialog.vue b/packages/frontend/src/components/TmsCodePreviewDialog.vue
new file mode 100644
index 000000000000..22590014ef05
--- /dev/null
+++ b/packages/frontend/src/components/TmsCodePreviewDialog.vue
@@ -0,0 +1,81 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkModalWindow
+	ref="modal"
+	:height="height"
+	:width="width"
+	@close="close()"
+	@closed="emit('closed')"
+>
+	<template #header><i class="ti ti-file-text"></i> {{ name }}</template>
+	<MkCode :lang="lang" :code="code" :class="[$style.codeBlock, 'codeBlock']"/>
+</MkModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, shallowRef } from 'vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
+import MkCode from '@/components/MkCode.vue';
+
+defineProps<{
+	name: string;
+	lang?: string;
+	code: string;
+}>();
+
+const emit = defineEmits<{
+	closed: [];
+}>();
+
+const modal = shallowRef<InstanceType<typeof MkModalWindow>>();
+const height = ref(window.innerHeight);
+const width = ref(window.innerWidth);
+
+const close = () => {
+	modal.value?.close();
+};
+
+const resizeModal = () => {
+	const h = window.innerHeight;
+	const w = window.innerWidth;
+
+	if (w < 600) {
+		height.value = h;
+		width.value = w;
+	} else {
+		height.value = h * 0.8;
+		width.value = w * 0.8;
+	}
+};
+
+onMounted(() => {
+	resizeModal();
+	window.addEventListener('resize', resizeModal);
+});
+
+onUnmounted(() => {
+	window.removeEventListener('resize', resizeModal);
+});
+</script>
+
+<style lang="scss" module>
+.codeBlock {
+	height: 100%;
+
+	> div {
+		height: 100%;
+	}
+}
+</style>
+
+<style lang="scss" scoped>
+.codeBlock :deep(pre.shiki) {
+	margin: 0;
+	height: 100%;
+	border-radius: 0;
+}
+</style>
diff --git a/packages/frontend/src/pages/settings/custom-css.vue b/packages/frontend/src/pages/settings/custom-css.vue
index c35bd62ec9e5..4f96e605c3ed 100644
--- a/packages/frontend/src/pages/settings/custom-css.vue
+++ b/packages/frontend/src/pages/settings/custom-css.vue
@@ -20,6 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref, watch, computed } from 'vue';
+import type { CustomCSSBackup } from '../tms/backup-and-syncing-custom-css/backup.vue';
 import MkCodeEditor from '@/components/MkCodeEditor.vue';
 import FormInfo from '@/components/MkInfo.vue';
 import * as os from '@/os.js';
@@ -27,19 +28,41 @@ import { unisonReload } from '@/scripts/unison-reload.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { miLocalStorage } from '@/local-storage.js';
+import { tmsFlaskStore } from '@/tms/flask-store.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 
 const localCustomCss = ref(miLocalStorage.getItem('customCss') ?? '');
 
+const enabledCustomCssSyncing = ref(tmsFlaskStore.state.enabledCustomCssSyncing);
+const syncingCustomCssId = ref(tmsFlaskStore.state.syncingCustomCssId);
+
 async function apply() {
 	miLocalStorage.setItem('customCss', localCustomCss.value);
 
-	const { canceled } = await os.confirm({
-		type: 'info',
-		text: i18n.ts.reloadToApplySetting,
-	});
-	if (canceled) return;
+	if (enabledCustomCssSyncing.value && syncingCustomCssId.value) {
+		const scope = ['tms', 'customCssBackups'] as const satisfies string[];
+		const backup = await misskeyApi('i/registry/get', {
+			scope,
+			key: syncingCustomCssId.value,
+		}) as CustomCSSBackup | null;
+		if (!backup) return;
+
+		backup.customCss = localCustomCss.value;
+
+		await os.apiWithDialog('i/registry/set', {
+			scope,
+			key: syncingCustomCssId.value,
+			value: backup,
+		});
+	} else {
+		const { canceled } = await os.confirm({
+			type: 'info',
+			text: i18n.ts.reloadToApplySetting,
+		});
+		if (canceled) return;
 
-	unisonReload();
+		unisonReload();
+	}
 }
 
 watch(localCustomCss, async () => {
diff --git a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
new file mode 100644
index 000000000000..0ed4ba4dfc7f
--- /dev/null
+++ b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/backup.vue
@@ -0,0 +1,366 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps_m">
+	<div :class="$style.buttons">
+		<MkButton inline primary @click="saveNew">{{ i18n.ts.createNew }}</MkButton>
+		<MkButton inline @click="upload">{{ i18n.ts.upload }}</MkButton>
+	</div>
+	<template v-if="customCssBackups.length === 0">
+		<MkInfo>{{ i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.notfound }}</MkInfo>
+	</template>
+	<template v-else>
+		<div class="_gaps_s">
+			<div
+				v-for="backup in customCssBackups" :key="backup.id" class="_panel" :class="$style.profile"
+				@click="($event: MouseEvent) => menu($event, backup.id)"
+				@contextmenu.prevent.stop="($event: MouseEvent) => menu($event, backup.id)"
+			>
+				<div :class="$style.name">{{ backup.name }}</div>
+				<div :class="$style.time">{{ i18n.tsx._tms._flags._backupAndSyncingCustomCss._backup.createdAt({ datetime: new Date(backup.createAt).toLocaleString() }) }}</div>
+			</div>
+		</div>
+	</template>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { v4 as uuid } from 'uuid';
+import { apiWithDialog, inputText, popupMenu, confirm } from '@/os.js';
+import { miLocalStorage } from '@/local-storage.js';
+import { unisonReload } from '@/scripts/unison-reload.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
+import MkInfo from '@/components/MkInfo.vue';
+import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n.js';
+import { codePreview } from '@/tms/popup.js';
+
+export type CustomCSSBackup = {
+	id: string;
+	name: string;
+	createAt: string;
+	updatedAt: string;
+	customCss: string;
+};
+export type CustomCSSBackups = CustomCSSBackup[];
+
+const scope = ['tms', 'customCssBackups'] as const satisfies string[];
+
+const customCssBackups = ref<CustomCSSBackups>([]);
+
+const saveNew = async () => {
+	const customCss = miLocalStorage.getItem('customCss') ?? '';
+	if (!customCss) {
+		await confirm({
+			type: 'error',
+			title: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.noCustomCss,
+			text: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.noCustomCssDescription,
+		});
+
+		return;
+	}
+
+	const { canceled, result: name } = await inputText({
+		title: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.inputBackupName,
+		default: '',
+	});
+	if (canceled) {
+		return;
+	}
+
+	const backup: CustomCSSBackup = {
+		id: uuid(),
+		name,
+		createAt: new Date().toISOString(),
+		updatedAt: new Date().toISOString(),
+		customCss: miLocalStorage.getItem('customCss') ?? '',
+	};
+
+	await apiWithDialog('i/registry/set', {
+		scope,
+		key: backup.id,
+		value: backup,
+	});
+
+	misskeyApi('i/registry/get-all', {
+		scope,
+	}).then(res => {
+		customCssBackups.value = Object.values(res);
+	});
+};
+
+const upload = async () => {
+	const input = document.createElement('input');
+	input.type = 'file';
+	input.multiple = false;
+	input.onchange = async () => {
+		if (!input.files || input.files.length === 0) return;
+
+		const file = input.files[0];
+
+		if (file.type !== 'application/json') {
+			return alert({
+				type: 'error',
+				title: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.cannnotLoad,
+				text: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.invalidFile,
+			});
+		}
+
+		let json: { [key: string]: unknown };
+		try {
+			json = JSON.parse(await file.text());
+		} catch (err) {
+			return alert({
+				type: 'error',
+				title: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.cannnotLoad,
+				text: (err as SyntaxError).message,
+			});
+		}
+		const result = validate(json);
+		if (!result.valid) {
+			return alert({
+				type: 'error',
+				title: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.cannnotLoad,
+				text: result.error,
+			});
+		}
+
+		await apiWithDialog('i/registry/set', { scope, key: result.value.id, value: result.value });
+
+		// 一応廃棄
+		window['__misskey_input_ref__'] = null;
+	};
+
+	// https://qiita.com/fukasawah/items/b9dc732d95d99551013d
+	// iOS Safari で正常に動かす為のおまじない
+	window['__misskey_input_ref__'] = input;
+
+	input.click();
+};
+
+const validate = (json: { [key: string]: unknown }): { valid: true, value: CustomCSSBackup } | { valid: false, error: string } => {
+	const uuidv4Matcher = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/;
+	if ('id' in json && (typeof json.id !== 'string' || !uuidv4Matcher.test(json.id) || customCssBackups.value.some((b) => b.id === json.id))) {
+		json.id = uuid();
+	}
+	if ('name' in json && typeof json.name !== 'string') {
+		return {
+			valid: false,
+			error: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.invalidName,
+		};
+	}
+	if ('createAt' in json && typeof json.createAt !== 'string') {
+		json.createAt = new Date().toISOString();
+	}
+	if ('updatedAt' in json && typeof json.updatedAt !== 'string') {
+		json.updatedAt = new Date().toISOString();
+	}
+	if ('customCss' in json && (typeof json.customCss !== 'string' || json.customCss.length === 0)) {
+		return {
+			valid: false,
+			error: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.invalidCustomCss,
+		};
+	}
+
+	return {
+		valid: true,
+		value: json as CustomCSSBackup,
+	};
+};
+
+const applyBackup = async (backupId: string) => {
+	const backup = customCssBackups.value.find((p) => p.id === backupId);
+	if (!backup) {
+		return;
+	}
+
+	const { canceled } = await confirm({
+		type: 'info',
+		title: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.applyBackup,
+		text: i18n.tsx._tms._flags._backupAndSyncingCustomCss._backup.applyBackupDescription({ name: backup.name }),
+	});
+	if (canceled) {
+		return;
+	}
+
+	miLocalStorage.setItem('customCss', backup.customCss);
+
+	unisonReload();
+};
+
+const renameBackup = async (backupId: string) => {
+	const backup = customCssBackups.value.find((p) => p.id === backupId);
+	if (!backup) {
+		return;
+	}
+
+	const { canceled, result: name } = await inputText({
+		title: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.inputBackupName,
+		default: backup.name,
+	});
+	if (canceled) {
+		return;
+	}
+
+	backup.updatedAt = new Date().toISOString();
+	backup.name = name;
+
+	await apiWithDialog('i/registry/set', {
+		scope,
+		key: backup.id,
+		value: backup,
+	});
+};
+
+const overrideBackup = async (backupId: string) => {
+	const backup = customCssBackups.value.find((p) => p.id === backupId);
+	if (!backup) {
+		return;
+	}
+
+	const customCss = miLocalStorage.getItem('customCss') ?? '';
+	if (!customCss) {
+		await confirm({
+			type: 'error',
+			title: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.noCustomCss,
+			text: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.cannotOverrideEmpty,
+		});
+
+		return;
+	}
+
+	const { canceled } = await confirm({
+		type: 'warning',
+		title: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.overrideBackup,
+		text: i18n.tsx._tms._flags._backupAndSyncingCustomCss._backup.overrideBackupDescription({ name: backup.name }),
+	});
+	if (canceled) {
+		return;
+	}
+
+	backup.updatedAt = new Date().toISOString();
+	backup.customCss = customCss;
+
+	await apiWithDialog('i/registry/set', {
+		scope,
+		key: backup.id,
+		value: backup,
+	});
+};
+
+const deleteBackup = async (backupId: string) => {
+	const profile = customCssBackups.value.find((p) => p.id === backupId);
+	if (!profile) {
+		return;
+	}
+
+	const { canceled } = await confirm({
+		type: 'warning',
+		title: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.deleteBackup,
+		text: i18n.tsx._tms._flags._backupAndSyncingCustomCss._backup.deleteBackupDescription({ name: profile.name }),
+	});
+	if (canceled) {
+		return;
+	}
+
+	await apiWithDialog('i/registry/remove', {
+		scope,
+		key: profile.id,
+	});
+
+	misskeyApi('i/registry/get-all', {
+		scope,
+	}).then(res => {
+		customCssBackups.value = Object.values(res);
+	});
+};
+
+const preview = async (backupId: string) => {
+	const backup = customCssBackups.value.find((p) => p.id === backupId);
+	if (!backup) {
+		return;
+	}
+
+	await codePreview({
+		name: backup.name,
+		lang: 'css',
+		code: backup.customCss,
+	});
+};
+
+const menu = (ev: MouseEvent, backupId: string) => {
+	const profile = customCssBackups.value.find((p) => p.id === backupId);
+	if (!profile) {
+		return;
+	}
+
+	return popupMenu([{
+		text: i18n.ts.apply,
+		icon: 'ti ti-cloud-upload',
+		action: () => applyBackup(backupId),
+	}, {
+		text: i18n.ts.rename,
+		icon: 'ti ti-forms',
+		action: () => renameBackup(backupId),
+	}, {
+		text: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.preview,
+		icon: 'ti ti-eye-code',
+		action: () => preview(backupId),
+	}, {
+		text: i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.override,
+		icon: 'ti ti-device-floppy',
+		action: () => overrideBackup(backupId),
+	}, {
+		type: 'a',
+		text: i18n.ts.download,
+		icon: 'ti ti-download',
+		href: URL.createObjectURL(new Blob([JSON.stringify(profile, null, 2)], { type: 'application/json' })),
+		download: `${profile.name}.json`,
+	}, {
+		type: 'divider',
+	}, {
+		text: i18n.ts.delete,
+		icon: 'ti ti-trash',
+		danger: true,
+		action: () => deleteBackup(backupId),
+	}], (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
+};
+
+onMounted(() => {
+	misskeyApi('i/registry/get-all', {
+		scope,
+	}).then(res => {
+		customCssBackups.value = Object.values(res);
+	});
+});
+
+defineExpose({
+	customCssBackups,
+});
+</script>
+
+<style lang="scss" module>
+.buttons {
+	display: flex;
+	gap: var(--margin);
+	flex-wrap: wrap;
+}
+
+.profile {
+	padding: 20px;
+	cursor: pointer;
+
+	> .name {
+		font-weight: 700;
+	}
+
+	> .time {
+		font-size: 0.85em;
+		opacity: 0.7;
+	}
+}
+</style>
diff --git a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/main.vue b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/main.vue
new file mode 100644
index 000000000000..4cab1cedd4ae
--- /dev/null
+++ b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/main.vue
@@ -0,0 +1,36 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps_s">
+	<FormSection>
+		<template #label>{{ i18n.ts._tms._flags._backupAndSyncingCustomCss._backup.title }}</template>
+		<XBackup ref="xBackup"/>
+	</FormSection>
+
+	<FormSection v-if="xBackup && xBackup.customCssBackups">
+		<template #label>{{ i18n.ts._tms._flags._backupAndSyncingCustomCss._syncing.title }}</template>
+		<div class="_gaps_m">
+			<XSync ref="xSync" :customCssBackups="xBackup.customCssBackups"/>
+			<template v-if="xSync && xSync.edited">
+				<MkButton primary :disabled="!xSync.changed" @click="xSync.save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
+			</template>
+		</div>
+	</FormSection>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { defineAsyncComponent, shallowRef } from 'vue';
+import { i18n } from '@/i18n.js';
+import FormSection from '@/components/form/section.vue';
+import MkButton from '@/components/MkButton.vue';
+
+const XBackup = defineAsyncComponent(() => import('@/pages/tms/backup-and-syncing-custom-css/backup.vue'));
+const xBackup = shallowRef<InstanceType<typeof XBackup> | null>(null);
+
+const XSync = defineAsyncComponent(() => import('@/pages/tms/backup-and-syncing-custom-css/sync.vue'));
+const xSync = shallowRef<InstanceType<typeof XSync> | null>(null);
+</script>
diff --git a/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/sync.vue b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/sync.vue
new file mode 100644
index 000000000000..a515010f5157
--- /dev/null
+++ b/packages/frontend/src/pages/tms/backup-and-syncing-custom-css/sync.vue
@@ -0,0 +1,80 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div class="_gaps_m">
+	<div class="_gaps_s">
+		<MkSwitch v-model="enabled">{{ i18n.ts._tms._flags._backupAndSyncingCustomCss._syncing.enable }}</MkSwitch>
+		<MkInfo>{{ i18n.ts._tms._flags._backupAndSyncingCustomCss._syncing.description }}</MkInfo>
+	</div>
+
+	<template v-if="enabled">
+		<div class="_gaps_s">
+			<MkInfo>{{ i18n.ts._tms._flags._backupAndSyncingCustomCss._syncing.selectDescription }}</MkInfo>
+			<MkSelect v-model="selected">
+				<template #label>{{ i18n.ts._tms._flags._backupAndSyncingCustomCss._syncing.select }}</template>
+				<option v-for="backup in customCssBackups" :key="backup.id" :value="backup.id">{{ backup.name }}</option>
+			</MkSelect>
+		</div>
+	</template>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { readonly, ref, watch } from 'vue';
+import type { CustomCSSBackup, CustomCSSBackups } from './backup.vue';
+import MkInfo from '@/components/MkInfo.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import MkSelect from '@/components/MkSelect.vue';
+import { tmsFlaskStore } from '@/tms/flask-store.js';
+import { unisonReload } from '@/scripts/unison-reload.js';
+import { i18n } from '@/i18n.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
+import { miLocalStorage } from '@/local-storage.js';
+
+defineProps<{
+	customCssBackups: CustomCSSBackups;
+}>();
+
+const scope = ['tms', 'customCssBackups'] as const satisfies string[];
+
+const edited = ref(false);
+const changed = ref(false);
+
+const enabled = ref(tmsFlaskStore.state.enabledCustomCssSyncing);
+const selected = ref(tmsFlaskStore.state.syncingCustomCssId);
+
+const save = async (): Promise<void> => {
+	if (!changed.value) return;
+	changed.value = false;
+
+	tmsFlaskStore.set('enabledCustomCssSyncing', enabled.value);
+	tmsFlaskStore.set('syncingCustomCssId', enabled.value ? selected.value : null);
+
+	if (enabled.value && selected.value) {
+		const customCss = await misskeyApi('i/registry/get', {
+			scope,
+			key: selected.value,
+		}) as CustomCSSBackup | null;
+		miLocalStorage.setItem('customCss', customCss ? customCss.customCss : '');
+	}
+
+	unisonReload();
+};
+
+watch([
+	enabled,
+	selected,
+], () => {
+	edited.value = true;
+	changed.value = tmsFlaskStore.state.enabledCustomCssSyncing !== enabled.value || tmsFlaskStore.state.syncingCustomCssId !== selected.value;
+}, { deep: true });
+
+defineExpose({
+	save,
+	edited: readonly(edited),
+	changed: readonly(changed),
+});
+</script>
diff --git a/packages/frontend/src/pages/tms/flags/index.main.vue b/packages/frontend/src/pages/tms/flags/index.main.vue
index a0778252c5b2..238bca90a800 100644
--- a/packages/frontend/src/pages/tms/flags/index.main.vue
+++ b/packages/frontend/src/pages/tms/flags/index.main.vue
@@ -5,6 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="_gaps_m">
+	<XBackupAndSyncingCustomCss ref="backupAndSyncingCustomCss"/>
 	<FormSection>
 		<div class="_gaps">
 			<MkSwitch v-model="preventLongPressContextMenu">
@@ -35,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, readonly, ref, watch } from 'vue';
+import { computed, defineAsyncComponent, readonly, ref, shallowRef, watch } from 'vue';
 import { commitHash, lang, version } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 import { miLocalStorage } from '@/local-storage.js';
@@ -50,6 +51,9 @@ import MkSwitch from '@/components/MkSwitch.vue';
 const preventLongPressContextMenu = computed(tmsFlaskStore.makeGetterSetter('preventLongPressContextMenu'));
 //#endregion
 
+const XBackupAndSyncingCustomCss = defineAsyncComponent(() => import('@/pages/tms/backup-and-syncing-custom-css/main.vue'));
+const backupAndSyncingCustomCss = shallowRef<InstanceType<typeof XBackupAndSyncingCustomCss> | null>(null);
+
 const confirmDialog = async (): Promise<boolean> => {
 	const { canceled } = await confirm({
 		type: 'info',
diff --git a/packages/frontend/src/pages/tms/waitTmsStoreLoaded.ts b/packages/frontend/src/pages/tms/waitTmsStoreLoaded.ts
new file mode 100644
index 000000000000..ed2c0d13dd7a
--- /dev/null
+++ b/packages/frontend/src/pages/tms/waitTmsStoreLoaded.ts
@@ -0,0 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { tmsFlaskStore } from '@/tms/flask-store.js';
+import { tmsStore } from '@/tms/store.js';
+
+export const ready = async () => await Promise.all([tmsStore.loaded, tmsFlaskStore.loaded]);
diff --git a/packages/frontend/src/tms/flask-store.ts b/packages/frontend/src/tms/flask-store.ts
index 2e70ca2d00e7..f3d8a986e4f4 100644
--- a/packages/frontend/src/tms/flask-store.ts
+++ b/packages/frontend/src/tms/flask-store.ts
@@ -14,4 +14,12 @@ export const tmsFlaskStore = markRaw(new Storage('tmsFlask', {
 		where: 'device',
 		default: false,
 	},
+	enabledCustomCssSyncing: {
+		where: 'deviceAccount',
+		default: false,
+	},
+	syncingCustomCssId: {
+		where: 'deviceAccount',
+		default: null as string | null,
+	},
 }));
diff --git a/packages/frontend/src/tms/popup.ts b/packages/frontend/src/tms/popup.ts
new file mode 100644
index 000000000000..119d0f0195e1
--- /dev/null
+++ b/packages/frontend/src/tms/popup.ts
@@ -0,0 +1,25 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { BundledLanguage } from 'shiki/langs';
+import { popup } from '@/os.js';
+import TmsCodePreviewDialog from '@/components/TmsCodePreviewDialog.vue';
+
+type CodePreviewProps = {
+	name: string;
+	lang?: BundledLanguage | 'aiscript';
+	code: string;
+};
+
+export const codePreview = (props: CodePreviewProps): Promise<void> => {
+	return new Promise((resolve) => {
+		const { dispose } = popup(TmsCodePreviewDialog, props, {
+			done: () => {
+				resolve();
+			},
+			closed: () => dispose(),
+		});
+	});
+};