diff --git a/locales/en-US.yml b/locales/en-US.yml
index d8d6855d62..dfbab848fa 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -292,6 +292,7 @@ location: "Location"
 theme: "Themes"
 themeForLightMode: "Theme to use in Light Mode"
 themeForDarkMode: "Theme to use in Dark Mode"
+gamingMode: "Gaming Mode"
 light: "Light"
 dark: "Dark"
 lightThemes: "Light themes"
diff --git a/locales/index.d.ts b/locales/index.d.ts
index 59295664cb..88183b810a 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -295,6 +295,7 @@ export interface Locale {
     "theme": string;
     "themeForLightMode": string;
     "themeForDarkMode": string;
+    "gamingMode": string;
     "light": string;
     "dark": string;
     "lightThemes": string;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index a9c11bbba2..13c2498a81 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -292,6 +292,7 @@ location: "場所"
 theme: "テーマ"
 themeForLightMode: "ライトモードで使うテーマ"
 themeForDarkMode: "ダークモードで使うテーマ"
+gamingMode: 'ゲーミングモード'
 light: "ライト"
 dark: "ダーク"
 lightThemes: "明るいテーマ"
diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue
index bcd58ae516..2647ad1490 100644
--- a/packages/frontend/src/components/MkButton.vue
+++ b/packages/frontend/src/components/MkButton.vue
@@ -4,285 +4,440 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<button
-	v-if="!link"
-	ref="el" class="_button"
-	:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike }]"
-	:type="type"
-	:name="name"
-	:value="value"
-	@click="emit('click', $event)"
-	@mousedown="onMousedown"
->
-	<div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div>
-	<div :class="$style.content">
-		<slot></slot>
-	</div>
-</button>
-<MkA
-	v-else class="_button"
-	:class="[$style.root, { [$style.inline]: inline, [$style.primary]: primary, [$style.gradate]: gradate, [$style.danger]: danger, [$style.rounded]: rounded, [$style.full]: full, [$style.small]: small, [$style.large]: large, [$style.transparent]: transparent, [$style.asLike]: asLike }]"
-	:to="to"
-	@mousedown="onMousedown"
->
-	<div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div>
-	<div :class="$style.content">
-		<slot></slot>
-	</div>
-</MkA>
+  <button
+      v-if="!link"
+      ref="el" class="_button"
+      :class="[
+      $style.root,
+      {
+        [$style.inline]: inline,
+        [$style.primary]: primary,
+        [$style.gradate]: gradate,
+        [$style.danger]: danger,
+        [$style.rounded]: rounded,
+        [$style.full]: full,
+        [$style.small]: small,
+        [$style.large]: large,
+        [$style.transparent]: transparent,
+        [$style.asLike]: asLike,
+        [$style.gamingDark]: gaming === 'dark', // gamingが1の場合にgamingDarkクラスを追加
+        [$style.gamingLight]: gaming === 'light', // gamingが2の場合にgamingLightクラスを追加
+      }
+    ]"
+      :type="type"
+      :name="name"
+      :value="value"
+      @click="emit('click', $event)"
+      @mousedown="onMousedown"
+  >
+    <div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div>
+    <div :class="$style.content">
+      <slot></slot>
+    </div>
+  </button>
+  <MkA
+      v-else class="_button"
+      :class="[
+    $style.root,
+    {
+      [$style.inline]: inline,
+      [$style.primary]: primary,
+      [$style.gradate]: gradate,
+      [$style.danger]: danger,
+      [$style.rounded]: rounded,
+      [$style.full]: full,
+      [$style.small]: small,
+      [$style.large]: large,
+      [$style.transparent]: transparent,
+      [$style.asLike]: asLike,
+        [$style.gamingDark]: gaming === 'dark', // gamingが1の場合にgamingDarkクラスを追加
+        [$style.gamingLight]: gaming === 'light', // gamingが2の場合にgamingLightクラスを追加
+    }
+  ]"
+      :to="to"
+      @mousedown="onMousedown"
+  >
+    <div ref="ripples" :class="$style.ripples" :data-children-class="$style.ripple"></div>
+    <div :class="$style.content">
+      <slot></slot>
+    </div>
+  </MkA>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted } from 'vue';
+import {computed, nextTick, onMounted, reactive, ref, watch} from 'vue';
+import {bannerDark, bannerLight, defaultStore, iconDark, iconLight} from "@/store.js";
+import {unisonReload} from "@/scripts/unison-reload.js";
 
 const props = defineProps<{
-	type?: 'button' | 'submit' | 'reset';
-	primary?: boolean;
-	gradate?: boolean;
-	rounded?: boolean;
-	inline?: boolean;
-	link?: boolean;
-	to?: string;
-	autofocus?: boolean;
-	wait?: boolean;
-	danger?: boolean;
-	full?: boolean;
-	small?: boolean;
-	large?: boolean;
-	transparent?: boolean;
-	asLike?: boolean;
-	name?: string;
-	value?: string;
+  type?: 'button' | 'submit' | 'reset';
+  primary?: boolean;
+  gradate?: boolean;
+  rounded?: boolean;
+  inline?: boolean;
+  link?: boolean;
+  to?: string;
+  autofocus?: boolean;
+  wait?: boolean;
+  danger?: boolean;
+  full?: boolean;
+  small?: boolean;
+  large?: boolean;
+  transparent?: boolean;
+  gamingdark?: boolean;
+  gaminglight?: boolean;
+  asLike?: boolean;
+  name?: string;
+  value?: string;
 }>();
+const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
+const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
+// gamingをrefで初期化する
+let gaming = ref(''); // 0-off , 1-dark , 2-light
+
+// gaming.valueに新しい値を代入する
+if (darkMode.value && gamingMode.value && props.primary) {
+  gaming.value = 'dark';
+} else if (!darkMode.value && gamingMode.value && props.primary) {
+  gaming.value = 'light';
+}else{
+  gaming.value = '';
+}
+
+watch(darkMode, () => {
+  if (darkMode.value && gamingMode.value && props.primary) {
+    gaming.value = 'dark';
+  } else if (!darkMode.value && gamingMode.value && props.primary) {
+    gaming.value = 'light';
+  }else{
+    gaming.value = '';
+  }
+})
+
+watch(gamingMode, () => {
+  if (darkMode.value && gamingMode.value && props.primary) {
+    gaming.value = 'dark';
+  } else if (!darkMode.value && gamingMode.value && props.primary) {
+    gaming.value = 'light';
+  }else{
+    gaming.value = '';
+  }
+})
 
 const emit = defineEmits<{
-	(ev: 'click', payload: MouseEvent): void;
+  (ev: 'click', payload: MouseEvent): void;
 }>();
 
 let el = $shallowRef<HTMLElement | null>(null);
 let ripples = $shallowRef<HTMLElement | null>(null);
 
 onMounted(() => {
-	if (props.autofocus) {
-		nextTick(() => {
-			el!.focus();
-		});
-	}
+  if (props.autofocus) {
+    nextTick(() => {
+      el!.focus();
+    });
+  }
 });
 
 function distance(p, q): number {
-	return Math.hypot(p.x - q.x, p.y - q.y);
+  return Math.hypot(p.x - q.x, p.y - q.y);
 }
 
 function calcCircleScale(boxW, boxH, circleCenterX, circleCenterY): number {
-	const origin = { x: circleCenterX, y: circleCenterY };
-	const dist1 = distance({ x: 0, y: 0 }, origin);
-	const dist2 = distance({ x: boxW, y: 0 }, origin);
-	const dist3 = distance({ x: 0, y: boxH }, origin);
-	const dist4 = distance({ x: boxW, y: boxH }, origin);
-	return Math.max(dist1, dist2, dist3, dist4) * 2;
+  const origin = {x: circleCenterX, y: circleCenterY};
+  const dist1 = distance({x: 0, y: 0}, origin);
+  const dist2 = distance({x: boxW, y: 0}, origin);
+  const dist3 = distance({x: 0, y: boxH}, origin);
+  const dist4 = distance({x: boxW, y: boxH}, origin);
+  return Math.max(dist1, dist2, dist3, dist4) * 2;
 }
 
 function onMousedown(evt: MouseEvent): void {
-	const target = evt.target! as HTMLElement;
-	const rect = target.getBoundingClientRect();
+  const target = evt.target! as HTMLElement;
+  const rect = target.getBoundingClientRect();
 
-	const ripple = document.createElement('div');
-	ripple.classList.add(ripples!.dataset.childrenClass!);
-	ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
-	ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';
+  const ripple = document.createElement('div');
+  ripple.classList.add(ripples!.dataset.childrenClass!);
+  ripple.style.top = (evt.clientY - rect.top - 1).toString() + 'px';
+  ripple.style.left = (evt.clientX - rect.left - 1).toString() + 'px';
 
-	ripples!.appendChild(ripple);
+  ripples!.appendChild(ripple);
 
-	const circleCenterX = evt.clientX - rect.left;
-	const circleCenterY = evt.clientY - rect.top;
+  const circleCenterX = evt.clientX - rect.left;
+  const circleCenterY = evt.clientY - rect.top;
 
-	const scale = calcCircleScale(target.clientWidth, target.clientHeight, circleCenterX, circleCenterY);
+  const scale = calcCircleScale(target.clientWidth, target.clientHeight, circleCenterX, circleCenterY);
 
-	window.setTimeout(() => {
-		ripple.style.transform = 'scale(' + (scale / 2) + ')';
-	}, 1);
-	window.setTimeout(() => {
-		ripple.style.transition = 'all 1s ease';
-		ripple.style.opacity = '0';
-	}, 1000);
-	window.setTimeout(() => {
-		if (ripples) ripples.removeChild(ripple);
-	}, 2000);
+  window.setTimeout(() => {
+    ripple.style.transform = 'scale(' + (scale / 2) + ')';
+  }, 1);
+  window.setTimeout(() => {
+    ripple.style.transition = 'all 1s cubic-bezier(0, 0.44, 0.39, 1.1)';
+    ripple.style.opacity = '0';
+  }, 1000);
+  window.setTimeout(() => {
+    if (ripples) ripples.removeChild(ripple);
+  }, 2000);
 }
 </script>
 
 <style lang="scss" module>
 .root {
-	position: relative;
-	z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
-	display: block;
-	min-width: 100px;
-	width: max-content;
-	padding: 7px 14px;
-	text-align: center;
-	font-weight: normal;
-	font-size: 95%;
-	box-shadow: none;
-	text-decoration: none;
-	background: var(--buttonBg);
-	border-radius: 5px;
-	overflow: clip;
-	box-sizing: border-box;
-	transition: background 0.1s ease;
+  position: relative;
+  z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
+  display: block;
+  min-width: 100px;
+  width: max-content;
+  padding: 7px 14px;
+  text-align: center;
+  font-weight: normal;
+  font-size: 95%;
+  box-shadow: none;
+  text-decoration: none;
+  background: var(--buttonBg);
+  border-radius: 5px;
+  overflow: clip;
+  box-sizing: border-box;
+  transition: background 0.1s cubic-bezier(0, 0.44, 0.39, 1.1);
 
-	&:not(:disabled):hover {
-		background: var(--buttonHoverBg);
-	}
+  &:not(:disabled):hover {
+    background: var(--buttonHoverBg);
+  }
 
-	&:not(:disabled):active {
-		background: var(--buttonHoverBg);
-	}
+  &:not(:disabled):active {
+    background: var(--buttonHoverBg);
+  }
 
-	&.small {
-		font-size: 90%;
-		padding: 6px 12px;
-	}
+  &.small {
+    font-size: 90%;
+    padding: 6px 12px;
+  }
 
-	&.large {
-		font-size: 100%;
-		padding: 8px 16px;
-	}
+  &.large {
+    font-size: 100%;
+    padding: 8px 16px;
+  }
 
-	&.full {
-		width: 100%;
-	}
+  &.full {
+    width: 100%;
+  }
 
-	&.rounded {
-		border-radius: 999px;
-	}
+  &.rounded {
+    border-radius: 999px;
+  }
 
-	&.primary {
-		font-weight: bold;
-		color: var(--fgOnAccent) !important;
-		background: var(--accent);
+  &.primary {
+    font-weight: bold;
+    color: var(--fgOnAccent) !important;
+    background: var(--accent);
 
-		&:not(:disabled):hover {
-			background: var(--X8);
-		}
+    &:not(:disabled):hover {
+      background: var(--X8);
+    }
 
-		&:not(:disabled):active {
-			background: var(--X8);
-		}
-	}
+    &:not(:disabled):active {
+      background: var(--X8);
+    }
+  }
 
-	&.asLike {
-		background: rgba(255, 86, 125, 0.07);
-		color: #ff002f;
+  &.asLike {
+    background: rgba(255, 86, 125, 0.07);
+    color: #ff002f;
 
-		&:not(:disabled):hover {
-			background: rgba(255, 74, 116, 0.11);
-		}
+    &:not(:disabled):hover {
+      background: rgba(255, 74, 116, 0.11);
+    }
 
-		&:not(:disabled):active {
-			background: rgba(224, 57, 96, 0.125);
-		}
+    &:not(:disabled):active {
+      background: rgba(224, 57, 96, 0.125);
+    }
 
-		> .ripples {
-			> .ripple {
-				background: rgba(255, 60, 106, 0.15);
-			}
-		}
+    > .ripples {
+      > .ripple {
+        background: rgba(255, 60, 106, 0.15);
+      }
+    }
 
-		&.primary {
-			background: rgb(241 97 132);
+    &.primary {
+      background: rgb(241 97 132);
 
-			&:not(:disabled):hover {
-				background: rgb(241 92 128);
-			}
+      &:not(:disabled):hover {
+        background: rgb(241 92 128);
+      }
 
-			&:not(:disabled):active {
-				background: rgb(241 92 128);
-			}
-		}
-	}
+      &:not(:disabled):active {
+        background: rgb(241 92 128);
+      }
+    }
+  }
 
-	&.transparent {
-		background: transparent;
-	}
+  &.transparent {
+    background: transparent;
+  }
 
-	&.gradate {
-		font-weight: bold;
-		color: var(--fgOnAccent) !important;
-		background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+  &.gradate {
+    font-weight: bold;
+    color: var(--fgOnAccent) !important;
+    background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
 
-		&:not(:disabled):hover {
-			background: linear-gradient(90deg, var(--X8), var(--X8));
-		}
+    &:not(:disabled):hover {
+      background: linear-gradient(90deg, var(--X8), var(--X8));
+    }
 
-		&:not(:disabled):active {
-			background: linear-gradient(90deg, var(--X8), var(--X8));
-		}
-	}
+    &:not(:disabled):active {
+      background: linear-gradient(90deg, var(--X8), var(--X8));
+    }
+  }
 
-	&.danger {
-		color: #ff2a2a;
+  &.gamingLight {
+    background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+    background-size: 1800% 1800%;
 
-		&.primary {
-			color: #fff;
-			background: #ff2a2a;
+    -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+    -moz-animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+    animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
 
-			&:not(:disabled):hover {
-				background: #ff4242;
-			}
+    &:not(:disabled):hover {
+			background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd);
+			background-size: 1800% 1800%;
 
-			&:not(:disabled):active {
-				background: #d42e2e;
-			}
-		}
-	}
+			-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+			-moz-animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+			animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+    }
 
-	&:disabled {
-		opacity: 0.7;
-	}
+    &:not(:disabled):active {
+			background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd);
+			background-size: 1800% 1800% !important;
 
-	&:focus-visible {
-		outline: solid 2px var(--focus);
-		outline-offset: 2px;
-	}
+			-webkit-animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+			-moz-animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite ;
+			animation: AnimationLight 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite ;
+    }
+  }
 
-	&.inline {
-		display: inline-block;
-		width: auto;
-		min-width: 100px;
-	}
+  &.gamingDark {
+    background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+    background-size: 1800% 1800%;
 
-	&.primary > .ripples > .ripple {
-		background: rgba(0, 0, 0, 0.15);
-	}
+    -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+    -moz-animation: AnimationDark 44s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+    animation: AnimationDark 44s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+
+    &:not(:disabled):hover {
+			background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96);
+			background-size: 1800% 1800% ;
+
+			-webkit-animation: AnimationDark 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite ;
+			-moz-animation: AnimationDark 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+			animation: AnimationDark 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite ;
+    }
+
+    &:not(:disabled):active {
+			background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96);
+			background-size: 1800% 1800% !important;
+
+			-webkit-animation: AnimationDark 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite ;
+			-moz-animation: AnimationDark 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+			animation: AnimationDark 45s cubic-bezier(0, 0.44, 0.39, 1.1) infinite;
+    }
+  }
+
+  &.danger {
+    color: #ff2a2a;
+
+    &.primary {
+      color: #fff;
+      background: #ff2a2a;
+
+      &:not(:disabled):hover {
+        background: #ff4242;
+      }
+
+      &:not(:disabled):active {
+        background: #d42e2e;
+      }
+    }
+  }
+
+  &:disabled {
+    opacity: 0.7;
+  }
+
+  &:focus-visible {
+    outline: solid 2px var(--focus);
+    outline-offset: 2px;
+  }
+
+  &.inline {
+    display: inline-block;
+    width: auto;
+    min-width: 100px;
+  }
+
+  &.primary > .ripples > .ripple {
+    background: rgba(0, 0, 0, 0.15);
+  }
 }
 
 .ripples {
-	position: absolute;
-	z-index: 0;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	border-radius: 6px;
-	overflow: clip;
-	pointer-events: none;
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+  overflow: clip;
+  pointer-events: none;
 }
 
 .ripple {
-	position: absolute;
-	width: 2px;
-	height: 2px;
-	border-radius: 100%;
-	background: rgba(0, 0, 0, 0.1);
-	opacity: 1;
-	transform: scale(1);
-	transition: all 0.5s cubic-bezier(0,.5,0,1);
+  position: absolute;
+  width: 2px;
+  height: 2px;
+  border-radius: 100%;
+  background: rgba(0, 0, 0, 0.1);
+  opacity: 1;
+  transform: scale(1);
+  transition: all 0.5s cubic-bezier(0, .5, 0, 1);
 }
 
 .content {
-	position: relative;
-	z-index: 1;
-	pointer-events: none;
+  position: relative;
+  z-index: 1;
+  pointer-events: none;
 }
+
+@-webkit-keyframes AnimationLight {
+  0%{background-position:0% 50%}
+  50%{background-position:100% 50%}
+  100%{background-position:0% 50%}
+}
+@-moz-keyframes AnimationLight {
+  0%{background-position:0% 50%}
+  50%{background-position:100% 50%}
+  100%{background-position:0% 50%}
+}
+@keyframes AnimationLight {
+  0%{background-position:0% 50%}
+  50%{background-position:100% 50%}
+  100%{background-position:0% 50%}
+}
+@-webkit-keyframes AnimationDark {
+  0%{background-position:0% 50%}
+  50%{background-position:100% 50%}
+  100%{background-position:0% 50%}
+}
+@-moz-keyframes AnimationDark {
+  0%{background-position:0% 50%}
+  50%{background-position:100% 50%}
+  100%{background-position:0% 50%}
+}
+@keyframes AnimationDark {
+  0%{background-position:0% 50%}
+  50%{background-position:100% 50%}
+  100%{background-position:0% 50%}
+}
+
 </style>
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index b1229cd1ba..709fd2d516 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -123,6 +123,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkSwitch :disabled="enableUltimateDataSaverMode || enableCellularWithUltimateDataSaver" v-model="enableCellularWithDataSaver">{{ i18n.ts.cellularWithDataSaver }}</MkSwitch>
 				<MkSwitch v-model="enableUltimateDataSaverMode">{{ i18n.ts.UltimateDataSaver }}</MkSwitch>
 				<MkSwitch v-model="enableCellularWithUltimateDataSaver">{{ i18n.ts.cellularWithUltimateDataSaver }}</MkSwitch>
+				<MkSwitch v-model="enableGamingMode">{{ i18n.ts.gamingMode }}</MkSwitch>
 			</div>
 			<div>
 				<MkRadios v-model="emojiStyle">
@@ -255,7 +256,7 @@ const notificationPosition = computed(defaultStore.makeGetterSetter('notificatio
 const notificationStackAxis = computed(defaultStore.makeGetterSetter('notificationStackAxis'));
 const showTimelineReplies = computed(defaultStore.makeGetterSetter('showTimelineReplies'));
 const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn'));
-
+const enableGamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
 
 
 watch(lang, () => {
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index 712f8605a2..0b4f826919 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -136,6 +136,11 @@ const headerTabs = $computed(() => [{
 	title: i18n.ts._timelines.local,
 	icon: 'ti ti-planet',
 	iconOnly: true,
+}, {
+  key: 'media',
+  title: i18n.ts._timelines.media,
+  icon: 'ti ti-photo',
+  iconOnly: true,
 }, {
 	key: 'social',
 	title: i18n.ts._timelines.social,
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index f9ee966797..27de6d150c 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -270,6 +270,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false,
 	},
+	gamingMode: {
+		where: 'device',
+		default: false,
+	},
 	bannerUrl:{
 		where: 'device',
 		default: bannerDark
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 7c76c5fe6c..89c16473ae 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -10,11 +10,13 @@ SPDX-License-Identifier: AGPL-3.0-only
         <div :class="$style.banner" :style="{ backgroundImage: `url(${ bannerUrl })` }"></div>
         <button v-tooltip.noDelay.right="instance.name ?? i18n.ts.instance" class="_button" :class="$style.instance"
                 @click="openInstanceMenu">
-          <img :src="iconUrl" alt="" :class="$style.instanceIcon"/>
+          <img :src="instance.iconUrl || instance.faviconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
         </button>
       </div>
       <div :class="$style.middle">
-        <MkA v-tooltip.noDelay.right="i18n.ts.timeline" :class="$style.item" :activeClass="$style.active" to="/" exact>
+        <MkA v-tooltip.noDelay.right="i18n.ts.timeline"
+             :class="[$style.item, {  [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
+             :activeClass="$style.active" to="/" exact>
           <i :class="$style.itemIcon" class="ti ti-home ti-fw"></i><span :class="$style.itemText">{{
             i18n.ts.timeline
           }}</span>
@@ -26,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
               v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)"
               v-tooltip.noDelay.right="navbarItemDef[item].title"
               class="_button"
-              :class="[$style.item, { [$style.active]: navbarItemDef[item].active }]"
+              :class="[$style.item, { [$style.active]: gaming === '' && navbarItemDef[item].active, [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
               :activeClass="$style.active"
               :to="navbarItemDef[item].to"
               v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
@@ -38,25 +40,27 @@ SPDX-License-Identifier: AGPL-3.0-only
           </component>
         </template>
         <div :class="$style.divider"></div>
-        <MkA v-if="$i.isAdmin || $i.isModerator" v-tooltip.noDelay.right="i18n.ts.controlPanel" :class="$style.item"
+        <MkA v-if="$i.isAdmin || $i.isModerator" v-tooltip.noDelay.right="i18n.ts.controlPanel" :class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
              :activeClass="$style.active" to="/admin">
           <i :class="$style.itemIcon" class="ti ti-dashboard ti-fw"></i><span
             :class="$style.itemText">{{ i18n.ts.controlPanel }}</span>
         </MkA>
-        <button class="_button" :class="$style.item" @click="more">
+        <button class="_button" :class="[$style.item, { [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" @click="more">
           <i :class="$style.itemIcon" class="ti ti-grid-dots ti-fw"></i><span :class="$style.itemText">{{
             i18n.ts.more
           }}</span>
           <span v-if="otherMenuItemIndicated" :class="$style.itemIndicator"><i class="_indicatorCircle"></i></span>
         </button>
-        <MkA v-tooltip.noDelay.right="i18n.ts.settings" :class="$style.item" :activeClass="$style.active"
+        <MkA v-tooltip.noDelay.right="i18n.ts.settings" :class="[$style.item, {  [$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" :activeClass="$style.active"
              to="/settings">
           <i :class="$style.itemIcon" class="ti ti-settings ti-fw"></i><span
             :class="$style.itemText">{{ i18n.ts.settings }}</span>
         </MkA>
       </div>
       <div :class="$style.bottom">
-        <button v-tooltip.noDelay.right="i18n.ts.note" class="_button" :class="[$style.post]" data-cy-open-post-form
+        <button v-tooltip.noDelay.right="i18n.ts.note" class="_button"
+                :class="[$style.post ,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light',}]"
+                data-cy-open-post-form
                 @click="os.post">
           <i class="ti ti-pencil ti-fw" :class="$style.postIcon"></i><span :class="$style.postText">{{
             i18n.ts.note
@@ -85,25 +89,59 @@ import {instance} from '@/instance';
 const iconOnly = ref(false);
 let bannerUrl = ref(defaultStore.state.bannerUrl);
 let iconUrl = ref();
+let gaming = ref('');
 
+const gamingMode = computed(defaultStore.makeGetterSetter('gamingMode'));
 const darkMode = computed(defaultStore.makeGetterSetter('darkMode'));
-if (darkMode.value){
+
+if (darkMode.value) {
   bannerUrl.value = bannerDark;
   iconUrl.value = iconDark;
-}else{
+} else {
   bannerUrl.value = bannerLight;
   iconUrl.value = iconLight;
 }
+
 watch(darkMode, () => {
-  if (darkMode.value){
+  if (darkMode.value) {
     bannerUrl.value = bannerDark;
     iconUrl.value = iconDark;
-  }else{
+  } else {
     bannerUrl.value = bannerLight;
     iconUrl.value = iconLight;
   }
 })
 
+// gaming.valueに新しい値を代入する
+if (darkMode.value && gamingMode.value == true) {
+  gaming.value = 'dark';
+} else if (!darkMode.value && gamingMode.value == true) {
+  gaming.value = 'light';
+} else {
+  gaming.value = '';
+}
+
+watch(darkMode, () => {
+  console.log(gaming)
+  if (darkMode.value && gamingMode.value == true) {
+    gaming.value = 'dark';
+  } else if (!darkMode.value && gamingMode.value == true) {
+    gaming.value = 'light';
+  } else {
+    gaming.value = '';
+  }
+})
+
+watch(gamingMode, () => {
+  if (darkMode.value && gamingMode.value == true) {
+    gaming.value = 'dark';
+  } else if (!darkMode.value && gamingMode.value == true) {
+    gaming.value = 'light';
+  } else {
+    gaming.value = '';
+  }
+})
+
 const menu = computed(() => defaultStore.state.menu);
 const otherMenuItemIndicated = computed(() => {
   for (const def in navbarItemDef) {
@@ -243,6 +281,65 @@ function more(ev: MouseEvent) {
         background: var(--accentLighten);
       }
     }
+
+    &.gamingLight:before {
+      content: "";
+      display: block;
+      width: calc(100% - 38px);
+      height: 100%;
+      margin: auto;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 999px;
+      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+      background-size: 1800% 1800% !important;
+      -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+    }
+
+    &.gamingLight:hover, &.gamingLight.active {
+      &.gamingLight:before {
+        background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd);
+        background-size: 1800% 1800% !important;
+        -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      }
+    }
+
+    &.gamingDark:before {
+      content: "";
+      display: block;
+      width: calc(100% - 38px);
+      height: 100%;
+      margin: auto;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 999px;
+      background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+      background-size: 1800% 1800%;
+      -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      -moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    }
+
+    &.gamingDark:hover, &.gamingDark.active {
+      &.gamingDark:before {
+        background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96);
+        background-size: 1800% 1800% !important;
+        -webkit-animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        -moz-animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      }
+    }
+
   }
 
   .postIcon {
@@ -331,6 +428,85 @@ function more(ev: MouseEvent) {
         background: var(--accentedBg);
       }
     }
+
+    &.gamingDark:hover {
+      color: white;
+      background-size: 1800% 1800%;
+      text-decoration: none;
+      -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      -moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    }
+
+    &.gamingDark.active {
+      color: white;
+      background-size: 1800% 1800%;
+      -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      -moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    }
+
+    &.gamingDark:hover, &.gamingDark.active {
+      color: white;
+
+      &.gamingDark:before {
+        content: "";
+        display: block;
+        width: calc(100% - 34px);
+        height: 100%;
+        margin: auto;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: 999px;
+        background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96);
+        background-size: 1800% 1800% !important;
+        -webkit-animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        -moz-animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      }
+    }
+
+    &.gamingLight:hover {
+      color: black;
+      background-size: 1800% 1800% !important;
+      text-decoration: none;
+      -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+    }
+
+    &.gamingLight:active {
+      color: black;
+      background-size: 1800% 1800% !important;
+      -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+    }
+
+    &.gamingLight:hover, &.gamingLight.active {
+      color: black;
+      &.gamingLight:before {
+        content: "";
+        display: block;
+        width: calc(100% - 34px);
+        height: 100%;
+        margin: auto;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: 999px;
+        background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd);
+        background-size: 1800% 1800% !important;
+        -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      }
+    }
   }
 
   .itemIcon {
@@ -421,6 +597,66 @@ function more(ev: MouseEvent) {
         background: var(--accentLighten);
       }
     }
+
+    &.gamingLight:before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+      width: 52px;
+      aspect-ratio: 1/1;
+      border-radius: 100%;
+      background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+      background-size: 1800% 1800% !important;
+      -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+    }
+
+    &.gamingLight:hover, &.gamingLight.active {
+      &.gamingLight:before {
+        background: linear-gradient(270deg, #d08c8c, #cfb28c, #dbdb8b, #95d08e, #8bdbdb, #94a9cf, #b09ecf, #cfa0cf, #e0a0bd);
+        background-size: 1800% 1800% !important;
+        -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      }
+    }
+
+    &.gamingDark:before {
+      content: "";
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      margin: auto;
+      width: 52px;
+      aspect-ratio: 1/1;
+      border-radius: 100%;
+      background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+      background-size: 1800% 1800%;
+      -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      -moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+      animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    }
+
+    &.gamingDark:hover, &.gamingDark.active {
+      &.gamingDark:before {
+        background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96);
+        background-size: 1800% 1800% !important;
+        -webkit-animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        -moz-animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      }
+    }
+
+
   }
 
   .postIcon {
@@ -489,6 +725,53 @@ function more(ev: MouseEvent) {
         opacity: 1;
       }
     }
+
+    &.gamingDark:hover, &.gamingDark.active {
+      text-decoration: none;
+      color: var(--accent);
+
+      &.gamingDark:before {
+        content: "";
+        display: block;
+        height: 100%;
+        aspect-ratio: 1;
+        margin: auto;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: 999px;
+        background: linear-gradient(270deg, #a84f4f, #a88c4f, #9aa24b, #6da85c, #53a8a6, #7597b5, #8679b5, #b579b5, #b56d96);
+        background-size: 1800% 1800% !important;
+        -webkit-animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        -moz-animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        animation: AnimationDark 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      }
+    }
+    &.gamingLight:hover, &.gamingLight.active {
+      text-decoration: none;
+      color: var(--accent);
+
+      &.gamingLight:before {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        margin: auto;
+        width: 52px;
+        aspect-ratio: 1/1;
+        border-radius: 100%;
+        background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
+        background-size: 1800% 1800% !important;
+        -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+        animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
+      }
+    }
   }
 
   .itemIcon {
@@ -509,5 +792,72 @@ function more(ev: MouseEvent) {
     font-size: 8px;
     animation: blink 1s infinite;
   }
+
+  @-webkit-keyframes AnimationLight {
+    0% {
+      background-position: 0% 50%
+    }
+    50% {
+      background-position: 100% 50%
+    }
+    100% {
+      background-position: 0% 50%
+    }
+  }
+  @-moz-keyframes AnimationLight {
+    0% {
+      background-position: 0% 50%
+    }
+    50% {
+      background-position: 100% 50%
+    }
+    100% {
+      background-position: 0% 50%
+    }
+  }
+  @keyframes AnimationLight {
+    0% {
+      background-position: 0% 50%
+    }
+    50% {
+      background-position: 100% 50%
+    }
+    100% {
+      background-position: 0% 50%
+    }
+  }
+  @-webkit-keyframes AnimationDark {
+    0% {
+      background-position: 0% 50%
+    }
+    50% {
+      background-position: 100% 50%
+    }
+    100% {
+      background-position: 0% 50%
+    }
+  }
+  @-moz-keyframes AnimationDark {
+    0% {
+      background-position: 0% 50%
+    }
+    50% {
+      background-position: 100% 50%
+    }
+    100% {
+      background-position: 0% 50%
+    }
+  }
+  @keyframes AnimationDark {
+    0% {
+      background-position: 0% 50%
+    }
+    50% {
+      background-position: 100% 50%
+    }
+    100% {
+      background-position: 0% 50%
+    }
+  }
 }
 </style>