diff --git a/packages/frontend/src/widgets/server-metric/cpu-mem.vue b/packages/frontend/src/widgets/server-metric/cpu-mem.vue
index 469075e2c4..6c656873ab 100644
--- a/packages/frontend/src/widgets/server-metric/cpu-mem.vue
+++ b/packages/frontend/src/widgets/server-metric/cpu-mem.vue
@@ -1,174 +1,74 @@
 <!--
-SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-FileCopyrightText: syuilo and misskey-project & noridev and misskey-project
 SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div class="lcfyofjk">
-	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
-		<defs>
-			<linearGradient :id="cpuGradientId" x1="0" x2="0" y1="1" y2="0">
-				<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
-				<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
-			</linearGradient>
-			<mask :id="cpuMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
-				<polygon
-					:points="cpuPolygonPoints"
-					fill="#fff"
-					fill-opacity="0.5"
-				/>
-				<polyline
-					:points="cpuPolylinePoints"
-					fill="none"
-					stroke="#fff"
-					stroke-width="1"
-				/>
-				<circle
-					:cx="cpuHeadX"
-					:cy="cpuHeadY"
-					r="1.5"
-					fill="#fff"
-				/>
-			</mask>
-		</defs>
-		<rect
-			x="-2" y="-2"
-			:width="viewBoxX + 4" :height="viewBoxY + 4"
-			:style="`stroke: none; fill: url(#${ cpuGradientId }); mask: url(#${ cpuMaskId })`"
-		/>
-		<text x="1" y="5">CPU <tspan>{{ cpuP }}%</tspan></text>
-	</svg>
-	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
-		<defs>
-			<linearGradient :id="memGradientId" x1="0" x2="0" y1="1" y2="0">
-				<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
-				<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
-			</linearGradient>
-			<mask :id="memMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
-				<polygon
-					:points="memPolygonPoints"
-					fill="#fff"
-					fill-opacity="0.5"
-				/>
-				<polyline
-					:points="memPolylinePoints"
-					fill="none"
-					stroke="#fff"
-					stroke-width="1"
-				/>
-				<circle
-					:cx="memHeadX"
-					:cy="memHeadY"
-					r="1.5"
-					fill="#fff"
-				/>
-			</mask>
-		</defs>
-		<rect
-			x="-2" y="-2"
-			:width="viewBoxX + 4" :height="viewBoxY + 4"
-			:style="`stroke: none; fill: url(#${ memGradientId }); mask: url(#${ memMaskId })`"
-		/>
-		<text x="1" y="5">MEM <tspan>{{ memP }}%</tspan></text>
-	</svg>
+<div :class="$style.root">
+	<XPie :class="$style.pie" :value="cpuUsage"/>
+	<div :class="$style.div">
+		<p>CPU</p>
+		<text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text">{{ (cpuUsage * 100).toFixed(1) }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">%</span></text>
+	</div>
+	<XPie :class="$style.pie" :value="memUsage"/>
+	<div :class="$style.div">
+		<p>RAM</p>
+		<text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text">{{ (memUsage * 100).toFixed(1) }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">%</span></text>
+	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, onBeforeUnmount, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { v4 as uuid } from 'uuid';
+import XPie from './pie-compact.vue';
 
 const props = defineProps<{
 	connection: Misskey.ChannelConnection<Misskey.Channels['serverStats']>,
 	meta: Misskey.entities.ServerInfoResponse
 }>();
 
-const viewBoxX = ref<number>(50);
-const viewBoxY = ref<number>(30);
-const stats = ref<Misskey.entities.ServerStats[]>([]);
-const cpuGradientId = uuid();
-const cpuMaskId = uuid();
-const memGradientId = uuid();
-const memMaskId = uuid();
-const cpuPolylinePoints = ref<string>('');
-const memPolylinePoints = ref<string>('');
-const cpuPolygonPoints = ref<string>('');
-const memPolygonPoints = ref<string>('');
-const cpuHeadX = ref<number>();
-const cpuHeadY = ref<number>();
-const memHeadX = ref<number>();
-const memHeadY = ref<number>();
-const cpuP = ref<string>('');
-const memP = ref<string>('');
+const cpuUsage = ref<number>(0);
+const memUsage = ref<number>(0);
 
 onMounted(() => {
 	props.connection.on('stats', onStats);
-	props.connection.on('statsLog', onStatsLog);
-	props.connection.send('requestLog', {
-		id: Math.random().toString().substring(2, 10),
-		length: 50,
-	});
 });
 
 onBeforeUnmount(() => {
 	props.connection.off('stats', onStats);
-	props.connection.off('statsLog', onStatsLog);
 });
 
-function onStats(connStats: Misskey.entities.ServerStats) {
-	stats.value.push(connStats);
-	if (stats.value.length > 50) stats.value.shift();
-
-	let cpuPolylinePointsStats = stats.value.map((s, i) => [viewBoxX.value - ((stats.value.length - 1) - i), (1 - s.cpu) * viewBoxY.value]);
-	let memPolylinePointsStats = stats.value.map((s, i) => [viewBoxX.value - ((stats.value.length - 1) - i), (1 - (s.mem.active / props.meta.mem.total)) * viewBoxY.value]);
-	cpuPolylinePoints.value = cpuPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
-	memPolylinePoints.value = memPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
-
-	cpuPolygonPoints.value = `${viewBoxX.value - (stats.value.length - 1)},${viewBoxY.value} ${cpuPolylinePoints.value} ${viewBoxX.value},${viewBoxY.value}`;
-	memPolygonPoints.value = `${viewBoxX.value - (stats.value.length - 1)},${viewBoxY.value} ${memPolylinePoints.value} ${viewBoxX.value},${viewBoxY.value}`;
-
-	cpuHeadX.value = cpuPolylinePointsStats.at(-1)![0];
-	cpuHeadY.value = cpuPolylinePointsStats.at(-1)![1];
-	memHeadX.value = memPolylinePointsStats.at(-1)![0];
-	memHeadY.value = memPolylinePointsStats.at(-1)![1];
-
-	cpuP.value = (connStats.cpu * 100).toFixed(0);
-	memP.value = (connStats.mem.active / props.meta.mem.total * 100).toFixed(0);
-}
-
-function onStatsLog(statsLog: Misskey.entities.ServerStatsLog) {
-	for (const revStats of statsLog.toReversed()) {
-		onStats(revStats);
-	}
+function onStats(stats: Misskey.entities.ServerStats) {
+	cpuUsage.value = stats.cpu;
+	memUsage.value = stats.mem.active / props.meta.mem.total;
 }
 </script>
 
-<style lang="scss" scoped>
-.lcfyofjk {
+<style lang="scss" module>
+.root {
 	display: flex;
+	padding: 16px 32px;
+}
 
-	> svg {
-		display: block;
-		padding: 10px;
-		width: 50%;
+.pie {
+	height: 42px;
+	flex-shrink: 0;
+	margin-right: 8px;
+}
 
-		&:first-child {
-			padding-right: 5px;
-		}
+.div {
+	flex: 1;
+	margin: auto;
 
-		&:last-child {
-			padding-left: 5px;
-		}
-
-		> text {
-			font-size: 4.5px;
-			fill: currentColor;
-
-			> tspan {
-				opacity: 0.5;
-			}
-		}
+	> p {
+		margin: 0 0 2px;
+		font-size: 0.8em;
 	}
 }
+
+.text {
+	font-weight: bold;
+	fill: currentColor;
+}
 </style>
diff --git a/packages/frontend/src/widgets/server-metric/index.vue b/packages/frontend/src/widgets/server-metric/index.vue
index 86d84b4f33..8140b5d067 100644
--- a/packages/frontend/src/widgets/server-metric/index.vue
+++ b/packages/frontend/src/widgets/server-metric/index.vue
@@ -11,10 +11,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<div v-if="meta" data-cy-mkw-serverMetric class="mkw-serverMetric">
 		<XCpuMemory v-if="widgetProps.view === 0" :connection="connection" :meta="meta"/>
-		<XNet v-else-if="widgetProps.view === 1" :connection="connection" :meta="meta"/>
-		<XCpu v-else-if="widgetProps.view === 2" :connection="connection" :meta="meta"/>
-		<XMemory v-else-if="widgetProps.view === 3" :connection="connection" :meta="meta"/>
-		<XDisk v-else-if="widgetProps.view === 4" :connection="connection" :meta="meta"/>
+		<XCpu v-else-if="widgetProps.view === 1" :connection="connection" :meta="meta"/>
+		<XMemory v-else-if="widgetProps.view === 2" :connection="connection" :meta="meta"/>
+		<XDisk v-else-if="widgetProps.view === 3" :connection="connection" :meta="meta"/>
 	</div>
 </MkContainer>
 </template>
@@ -24,7 +23,6 @@ import { onUnmounted, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import { useWidgetPropsManager, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from '../widget.js';
 import XCpuMemory from './cpu-mem.vue';
-import XNet from './net.vue';
 import XCpu from './cpu.vue';
 import XMemory from './mem.vue';
 import XDisk from './disk.vue';
@@ -70,7 +68,7 @@ misskeyApiGet('server-info', {}).then(res => {
 });
 
 const toggleView = () => {
-	if (widgetProps.view === 4) {
+	if (widgetProps.view === 3) {
 		widgetProps.view = 0;
 	} else {
 		widgetProps.view++;
diff --git a/packages/frontend/src/widgets/server-metric/net.vue b/packages/frontend/src/widgets/server-metric/net.vue
deleted file mode 100644
index d78494b8d2..0000000000
--- a/packages/frontend/src/widgets/server-metric/net.vue
+++ /dev/null
@@ -1,147 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<div class="oxxrhrto">
-	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
-		<polygon
-			:points="inPolygonPoints"
-			fill="#94a029"
-			fill-opacity="0.5"
-		/>
-		<polyline
-			:points="inPolylinePoints"
-			fill="none"
-			stroke="#94a029"
-			stroke-width="1"
-		/>
-		<circle
-			:cx="inHeadX"
-			:cy="inHeadY"
-			r="1.5"
-			fill="#94a029"
-		/>
-		<text x="1" y="5">NET rx <tspan>{{ bytes(inRecent) }}</tspan></text>
-	</svg>
-	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
-		<polygon
-			:points="outPolygonPoints"
-			fill="#ff9156"
-			fill-opacity="0.5"
-		/>
-		<polyline
-			:points="outPolylinePoints"
-			fill="none"
-			stroke="#ff9156"
-			stroke-width="1"
-		/>
-		<circle
-			:cx="outHeadX"
-			:cy="outHeadY"
-			r="1.5"
-			fill="#ff9156"
-		/>
-		<text x="1" y="5">NET tx <tspan>{{ bytes(outRecent) }}</tspan></text>
-	</svg>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onBeforeUnmount, ref } from 'vue';
-import * as Misskey from 'misskey-js';
-import bytes from '@/filters/bytes.js';
-
-const props = defineProps<{
-	connection: Misskey.ChannelConnection<Misskey.Channels['serverStats']>,
-	meta: Misskey.entities.ServerInfoResponse
-}>();
-
-const viewBoxX = ref<number>(50);
-const viewBoxY = ref<number>(30);
-const stats = ref<Misskey.entities.ServerStats[]>([]);
-const inPolylinePoints = ref<string>('');
-const outPolylinePoints = ref<string>('');
-const inPolygonPoints = ref<string>('');
-const outPolygonPoints = ref<string>('');
-const inHeadX = ref<number>();
-const inHeadY = ref<number>();
-const outHeadX = ref<number>();
-const outHeadY = ref<number>();
-const inRecent = ref<number>(0);
-const outRecent = ref<number>(0);
-
-onMounted(() => {
-	props.connection.on('stats', onStats);
-	props.connection.on('statsLog', onStatsLog);
-	props.connection.send('requestLog', {
-		id: Math.random().toString().substring(2, 10),
-		length: 50,
-	});
-});
-
-onBeforeUnmount(() => {
-	props.connection.off('stats', onStats);
-	props.connection.off('statsLog', onStatsLog);
-});
-
-function onStats(connStats: Misskey.entities.ServerStats) {
-	stats.value.push(connStats);
-	if (stats.value.length > 50) stats.value.shift();
-
-	const inPeak = Math.max(1024 * 64, Math.max(...stats.value.map(s => s.net.rx)));
-	const outPeak = Math.max(1024 * 64, Math.max(...stats.value.map(s => s.net.tx)));
-
-	let inPolylinePointsStats = stats.value.map((s, i) => [viewBoxX.value - ((stats.value.length - 1) - i), (1 - (s.net.rx / inPeak)) * viewBoxY.value]);
-	let outPolylinePointsStats = stats.value.map((s, i) => [viewBoxX.value - ((stats.value.length - 1) - i), (1 - (s.net.tx / outPeak)) * viewBoxY.value]);
-	inPolylinePoints.value = inPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
-	outPolylinePoints.value = outPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' ');
-
-	inPolygonPoints.value = `${viewBoxX.value - (stats.value.length - 1)},${viewBoxY.value} ${inPolylinePoints.value} ${viewBoxX.value},${viewBoxY.value}`;
-	outPolygonPoints.value = `${viewBoxX.value - (stats.value.length - 1)},${viewBoxY.value} ${outPolylinePoints.value} ${viewBoxX.value},${viewBoxY.value}`;
-
-	inHeadX.value = inPolylinePointsStats.at(-1)![0];
-	inHeadY.value = inPolylinePointsStats.at(-1)![1];
-	outHeadX.value = outPolylinePointsStats.at(-1)![0];
-	outHeadY.value = outPolylinePointsStats.at(-1)![1];
-
-	inRecent.value = connStats.net.rx;
-	outRecent.value = connStats.net.tx;
-}
-
-function onStatsLog(statsLog: Misskey.entities.ServerStatsLog) {
-	for (const revStats of statsLog.toReversed()) {
-		onStats(revStats);
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.oxxrhrto {
-	display: flex;
-
-	> svg {
-		display: block;
-		padding: 10px;
-		width: 50%;
-
-		&:first-child {
-			padding-right: 5px;
-		}
-
-		&:last-child {
-			padding-left: 5px;
-		}
-
-		> text {
-			font-size: 4.5px;
-			fill: currentColor;
-
-			> tspan {
-				opacity: 0.5;
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/widgets/server-metric/pie-compact.vue b/packages/frontend/src/widgets/server-metric/pie-compact.vue
new file mode 100644
index 0000000000..3d415428c9
--- /dev/null
+++ b/packages/frontend/src/widgets/server-metric/pie-compact.vue
@@ -0,0 +1,54 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project & noridev and cherrypick-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<svg :class="$style.root" viewBox="0 0 1 1" preserveAspectRatio="none">
+	<circle
+		:r="r"
+		cx="50%" cy="50%"
+		fill="none"
+		stroke-width="0.2"
+		stroke="rgba(0, 0, 0, 0.05)"
+		:class="$style.circle"
+	/>
+	<circle
+		:r="r"
+		cx="50%" cy="50%"
+		:stroke-dasharray="Math.PI * (r * 2)"
+		:stroke-dashoffset="strokeDashoffset"
+		fill="none"
+		stroke-width="0.2"
+		:class="$style.circle"
+		:stroke="color"
+	/>
+</svg>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+const props = defineProps<{
+	value: number;
+}>();
+
+const r = 0.35;
+
+const color = computed(() => `hsl(${180 - (props.value * 180)}, 80%, 70%)`);
+const strokeDashoffset = computed(() => (1 - props.value) * (Math.PI * (r * 2)));
+</script>
+
+<style lang="scss" module>
+.root {
+	display: block;
+	height: 100%;
+}
+
+.circle {
+	transform-origin: center;
+	transform: rotate(-90deg);
+	transition: stroke-dashoffset 0.5s ease;
+	stroke-linecap: round;
+}
+</style>
diff --git a/packages/frontend/src/widgets/server-metric/pie-large.vue b/packages/frontend/src/widgets/server-metric/pie-large.vue
new file mode 100644
index 0000000000..28de857f93
--- /dev/null
+++ b/packages/frontend/src/widgets/server-metric/pie-large.vue
@@ -0,0 +1,62 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<svg :class="$style.root" viewBox="0 0 1 1" preserveAspectRatio="none">
+	<circle
+		:r="r"
+		cx="50%" cy="50%"
+		fill="none"
+		stroke-width="0.1"
+		stroke="rgba(0, 0, 0, 0.05)"
+		:class="$style.circle"
+	/>
+	<circle
+		:r="r"
+		cx="50%" cy="50%"
+		:stroke-dasharray="Math.PI * (r * 2)"
+		:stroke-dashoffset="strokeDashoffset"
+		fill="none"
+		stroke-width="0.1"
+		:class="$style.circle"
+		:stroke="color"
+	/>
+	<text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text">{{ (value * 100).toFixed(0) }}%</text>
+</svg>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+
+const props = defineProps<{
+	value: number;
+}>();
+
+const r = 0.45;
+
+const color = computed(() => `hsl(${180 - props.value * 180}, 80%, 70%)`);
+const strokeDashoffset = computed(
+	() => (1 - props.value) * (Math.PI * (r * 2)),
+);
+</script>
+
+<style lang="scss" module>
+.root {
+	display: block;
+	height: 100%;
+}
+
+.circle {
+	transform-origin: center;
+	transform: rotate(-90deg);
+	transition: stroke-dashoffset 0.5s ease;
+	stroke-linecap: round;
+}
+
+.text {
+	font-size: 0.15px;
+	fill: currentColor;
+}
+</style>
diff --git a/packages/frontend/src/widgets/server-metric/pie.vue b/packages/frontend/src/widgets/server-metric/pie.vue
index 400cbe9fa2..dcf6888c8c 100644
--- a/packages/frontend/src/widgets/server-metric/pie.vue
+++ b/packages/frontend/src/widgets/server-metric/pie.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		:r="r"
 		cx="50%" cy="50%"
 		fill="none"
-		stroke-width="0.1"
+		stroke-width="0.15"
 		stroke="rgba(0, 0, 0, 0.05)"
 		:class="$style.circle"
 	/>
@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		:stroke-dasharray="Math.PI * (r * 2)"
 		:stroke-dashoffset="strokeDashoffset"
 		fill="none"
-		stroke-width="0.1"
+		stroke-width="0.15"
 		:class="$style.circle"
 		:stroke="color"
 	/>
@@ -34,7 +34,7 @@ const props = defineProps<{
 	value: number;
 }>();
 
-const r = 0.45;
+const r = 0.4;
 
 const color = computed(() => `hsl(${180 - (props.value * 180)}, 80%, 70%)`);
 const strokeDashoffset = computed(() => (1 - props.value) * (Math.PI * (r * 2)));
@@ -50,10 +50,12 @@ const strokeDashoffset = computed(() => (1 - props.value) * (Math.PI * (r * 2)))
 	transform-origin: center;
 	transform: rotate(-90deg);
 	transition: stroke-dashoffset 0.5s ease;
+	stroke-linecap: round;
 }
 
 .text {
 	font-size: 0.15px;
 	fill: currentColor;
+	font-weight: 700;
 }
 </style>