diff --git a/CHANGELOG.md b/CHANGELOG.md
index fb03667257..abc4bbfd93 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,8 @@
 	- チャットなど、一部の機能は引き続き設定に関わらずWebsocket接続が行われます
 - Enhance: メモリ使用量を軽減しました
 - Enhance: リプライ元にアンケートがあることが表示されるように
+- Enhance: ノートのサーバー情報のデザインを改善・パフォーマンス向上  
+  (Based on https://github.com/taiyme/misskey/pull/198, https://github.com/taiyme/misskey/pull/211, https://github.com/taiyme/misskey/pull/283)
 - Fix: "時計"ウィジェット(Clock)において、Transparent設定が有効でも、その背景が透過されない問題を修正
 
 ### Server
diff --git a/packages/frontend/src/components/MkInstanceTicker.vue b/packages/frontend/src/components/MkInstanceTicker.vue
index 380fb7b2d8..62ff806096 100644
--- a/packages/frontend/src/components/MkInstanceTicker.vue
+++ b/packages/frontend/src/components/MkInstanceTicker.vue
@@ -12,6 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed } from 'vue';
+import tinycolor from 'tinycolor2';
 import { instanceName as localInstanceName } from '@@/js/config.js';
 import type { CSSProperties } from 'vue';
 import { instance as localInstance } from '@/instance.js';
@@ -43,10 +44,33 @@ const faviconUrl = computed(() => {
 	return getProxiedImageUrlNullable(imageSrc);
 });
 
+type ITickerColors = {
+	readonly bg: string;
+	readonly fg: string;
+};
+
+const TICKER_YUV_THRESHOLD = 191 as const;
+const TICKER_FG_COLOR_LIGHT = '#ffffff' as const;
+const TICKER_FG_COLOR_DARK = '#2f2f2fcc' as const;
+
+function getTickerColors(bgHex: string): ITickerColors {
+	const tinycolorInstance = tinycolor(bgHex);
+	const { r, g, b } = tinycolorInstance.toRgb();
+	const yuv = 0.299 * r + 0.587 * g + 0.114 * b;
+	const fgHex = yuv > TICKER_YUV_THRESHOLD ? TICKER_FG_COLOR_DARK : TICKER_FG_COLOR_LIGHT;
+
+	return {
+		fg: fgHex,
+		bg: bgHex,
+	} as const satisfies ITickerColors;
+}
+
 const themeColorStyle = computed<CSSProperties>(() => {
 	const themeColor = (props.host == null ? localInstance.themeColor : props.instance?.themeColor) ?? '#777777';
+	const colors = getTickerColors(themeColor);
 	return {
-		background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`,
+		background: `linear-gradient(90deg, ${colors.bg}, ${colors.bg}00)`,
+		color: colors.fg,
 	};
 });
 </script>
@@ -60,7 +84,6 @@ $height: 2ex;
 	height: $height;
 	border-radius: 4px 0 0 4px;
 	overflow: clip;
-	color: #fff;
 
 	// text-shadowは重いから使うな