diff --git a/CHANGELOG_YOJO.md b/CHANGELOG_YOJO.md
index d3a16238d2..e6fb6a3918 100644
--- a/CHANGELOG_YOJO.md
+++ b/CHANGELOG_YOJO.md
@@ -7,9 +7,10 @@
 
 ### Client
 - Fix: チュートリアルを現状に合わせて更新[#586](https://github.com/yojo-art/cherrypick/pull/586)
+- Feat: コンパネのファイルに絵文字として利用中ラベルを表示する [#603](https://github.com/yojo-art/cherrypick/pull/603)
+- Enhance: データセーバーウィジェットを追加[#608](https://github.com/yojo-art/cherrypick/pull/608)
 - Enhance: ノート詳細から前後のHTL/LTLを開く機能を追加 [#572](https://github.com/yojo-art/cherrypick/pull/572)
 - Enhance: インポート時にライセンス欄にインポート元を追記する [#573](https://github.com/yojo-art/cherrypick/pull/573)
-- Feat: コンパネのファイルに絵文字として利用中ラベルを表示する [#603](https://github.com/yojo-art/cherrypick/pull/603)
 - Enhance: TLオプション表示有無切り替えの選択肢にメディアタイムラインを追加 [#609](https://github.com/yojo-art/cherrypick/pull/609)
 
 ### Server
diff --git a/locales/index.d.ts b/locales/index.d.ts
index 5ba0e103eb..48635bc762 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -10264,6 +10264,10 @@ export interface Locale extends ILocale {
          * マスコット画像
          */
         "mascot": string;
+        /**
+         * データセーバー
+         */
+        "dataSaver": string;
     };
     "_cw": {
         /**
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index ac04d79f66..6cedc31648 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2693,6 +2693,7 @@ _widgets:
   search: "検索"
   dice: "サイコロ"
   mascot: "マスコット画像"
+  dataSaver: "データセーバー"
 
 _cw:
   hide: "隠す"
diff --git a/packages/frontend/src/components/CPDataSaver.vue b/packages/frontend/src/components/CPDataSaver.vue
new file mode 100644
index 0000000000..40e98cebaf
--- /dev/null
+++ b/packages/frontend/src/components/CPDataSaver.vue
@@ -0,0 +1,72 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+	<MkFolder>
+		<template #label>{{ i18n.ts.dataSaver }}</template>
+
+		<div class="_gaps_m">
+			<MkInfo v-if="props.showDescription">{{ i18n.ts.reloadRequiredToApplySettings }}</MkInfo>
+
+			<div class="_buttons">
+				<MkButton inline @click="enableAllDataSaver">{{ i18n.ts.enableAll }}</MkButton>
+				<MkButton inline @click="disableAllDataSaver">{{ i18n.ts.disableAll }}</MkButton>
+			</div>
+			<div class="_gaps_m">
+				<MkSwitch v-model="dataSaver.media">
+					{{ i18n.ts._dataSaver._media.title }}
+					<template v-if="props.showDescription" #caption>{{ i18n.ts._dataSaver._media.description }}</template>
+				</MkSwitch>
+				<MkSwitch v-model="dataSaver.avatar">
+					{{ i18n.ts._dataSaver._avatar.title }}
+					<template v-if="props.showDescription" #caption>{{ i18n.ts._dataSaver._avatar.description }}</template>
+				</MkSwitch>
+				<MkSwitch v-model="dataSaver.urlPreview">
+					{{ i18n.ts._dataSaver._urlPreview.title }}
+					<template v-if="props.showDescription" #caption>{{ i18n.ts._dataSaver._urlPreview.description }}</template>
+				</MkSwitch>
+				<MkSwitch v-model="dataSaver.code">
+					{{ i18n.ts._dataSaver._code.title }}
+					<template v-if="props.showDescription" #caption>{{ i18n.ts._dataSaver._code.description }}</template>
+				</MkSwitch>
+			</div>
+		</div>
+	</MkFolder>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import { i18n } from '@/i18n.js';
+import { defaultStore } from '@/store.js';
+import MkButton from "@/components/MkButton.vue";
+import MkFolder from "@/components/MkFolder.vue";
+import MkInfo from "@/components/MkInfo.vue";
+
+const props = withDefaults(defineProps<{
+	showDescription?: boolean;
+}>(), {
+	showDescription: true,
+});
+const dataSaver = ref(defaultStore.state.dataSaver);
+
+function enableAllDataSaver() {
+	const g = { ...defaultStore.state.dataSaver };
+	Object.keys(g).forEach((key) => { g[key] = true; });
+	dataSaver.value = g;
+}
+
+function disableAllDataSaver() {
+	const g = { ...defaultStore.state.dataSaver };
+	Object.keys(g).forEach((key) => { g[key] = false; });
+	dataSaver.value = g;
+}
+
+watch(dataSaver, (to) => {
+	defaultStore.set('dataSaver', to);
+}, {
+	deep: true,
+});
+</script>
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 417d054353..3b658914eb 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -92,37 +92,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #label>{{ i18n.ts.numberOfPageCache }}</template>
 				<template #caption>{{ i18n.ts.numberOfPageCacheDescription }}</template>
 			</MkRange>
-
-			<MkFolder>
-				<template #label>{{ i18n.ts.dataSaver }}</template>
-
-				<div class="_gaps_m">
-					<MkInfo>{{ i18n.ts.reloadRequiredToApplySettings }}</MkInfo>
-
-					<div class="_buttons">
-						<MkButton inline @click="enableAllDataSaver">{{ i18n.ts.enableAll }}</MkButton>
-						<MkButton inline @click="disableAllDataSaver">{{ i18n.ts.disableAll }}</MkButton>
-					</div>
-					<div class="_gaps_m">
-						<MkSwitch v-model="dataSaver.media">
-							{{ i18n.ts._dataSaver._media.title }}
-							<template #caption>{{ i18n.ts._dataSaver._media.description }}</template>
-						</MkSwitch>
-						<MkSwitch v-model="dataSaver.avatar">
-							{{ i18n.ts._dataSaver._avatar.title }}
-							<template #caption>{{ i18n.ts._dataSaver._avatar.description }}</template>
-						</MkSwitch>
-						<MkSwitch v-model="dataSaver.urlPreview">
-							{{ i18n.ts._dataSaver._urlPreview.title }}
-							<template #caption>{{ i18n.ts._dataSaver._urlPreview.description }}</template>
-						</MkSwitch>
-						<MkSwitch v-model="dataSaver.code">
-							{{ i18n.ts._dataSaver._code.title }}
-							<template #caption>{{ i18n.ts._dataSaver._code.description }}</template>
-						</MkSwitch>
-					</div>
-				</div>
-			</MkFolder>
+			<XDataSaver/>
 		</div>
 	</FormSection>
 
@@ -155,6 +125,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
 import { langs } from '@@/js/config.js';
+import XDataSaver from '@/components/CPDataSaver.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import MkRadios from '@/components/MkRadios.vue';
@@ -177,7 +148,6 @@ import { globalEvents } from '@/events.js';
 import { $i } from '@/account.js';
 
 const lang = ref(miLocalStorage.getItem('lang'));
-const dataSaver = ref(defaultStore.state.dataSaver);
 
 function reloadTimeline() {
 	globalEvents.emit('reloadTimeline');
@@ -296,18 +266,6 @@ function removePinnedList() {
 	defaultStore.set('pinnedUserLists', []);
 }
 
-function enableAllDataSaver() {
-	const g = { ...defaultStore.state.dataSaver };
-	Object.keys(g).forEach((key) => { g[key] = true; });
-	dataSaver.value = g;
-}
-
-function disableAllDataSaver() {
-	const g = { ...defaultStore.state.dataSaver };
-	Object.keys(g).forEach((key) => { g[key] = false; });
-	dataSaver.value = g;
-}
-
 async function learnMoreAutoTranslate() {
 	if (!useAutoTranslate.value) return;
 
@@ -328,12 +286,6 @@ function learnMoreCantUseAutoTranslate() {
 	});
 }
 
-watch(dataSaver, (to) => {
-	defaultStore.set('dataSaver', to);
-}, {
-	deep: true,
-});
-
 const headerActions = computed(() => []);
 
 const headerTabs = computed(() => []);
diff --git a/packages/frontend/src/widgets/WidgetDataSaver.vue b/packages/frontend/src/widgets/WidgetDataSaver.vue
new file mode 100644
index 0000000000..b81534f0f8
--- /dev/null
+++ b/packages/frontend/src/widgets/WidgetDataSaver.vue
@@ -0,0 +1,35 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+	<XDataSaver :showDescription="false" />
+</template>
+
+<script lang="ts" setup>
+import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
+import { GetFormResultType } from '@/scripts/form.js';
+import XDataSaver from '@/components/CPDataSaver.vue';
+const name = 'dataSaver';
+
+const widgetPropsDef = {
+};
+
+type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
+
+const props = defineProps<WidgetComponentProps<WidgetProps>>();
+const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
+
+const { configure } = useWidgetPropsManager(name,
+	widgetPropsDef,
+	props,
+	emit,
+);
+
+defineExpose<WidgetComponentExpose>({
+	name,
+	configure,
+	id: props.widget ? props.widget.id : null,
+});
+</script>
diff --git a/packages/frontend/src/widgets/index.ts b/packages/frontend/src/widgets/index.ts
index ba5844bbd7..517c1102f8 100644
--- a/packages/frontend/src/widgets/index.ts
+++ b/packages/frontend/src/widgets/index.ts
@@ -37,6 +37,7 @@ export default function(app: App) {
 	app.component('WidgetSearch', defineAsyncComponent(() => import('./WidgetSearch.vue')));
 	app.component('WidgetDice', defineAsyncComponent(() => import('./WidgetDice.vue')));
 	app.component('WidgetMascot', defineAsyncComponent(() => import('./WidgetMascot.vue')));
+	app.component('WidgetDataSaver', defineAsyncComponent(() => import('./WidgetDataSaver.vue')));
 }
 
 export const widgets = [
@@ -71,4 +72,5 @@ export const widgets = [
 	'search',
 	'dice',
 	'mascot',
+	'dataSaver',
 ];