diff --git a/packages/webgal/public/game/template/UI/Backlog/backlog.scss b/packages/webgal/public/game/template/UI/Backlog/backlog.scss
new file mode 100644
index 000000000..7d3f9a6dd
--- /dev/null
+++ b/packages/webgal/public/game/template/UI/Backlog/backlog.scss
@@ -0,0 +1,220 @@
+.Backlog_main {
+  font-family: "思源宋体", serif;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  background: rgba(0, 0, 0, 0.7);
+  padding: 2em 0 2em 0;
+  animation: backlog_soft_in 0.7s ease-out forwards;
+  box-sizing: border-box;
+}
+
+.Backlog_main_out {
+  font-family: "思源宋体", serif;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  background: rgba(0, 0, 0, 0.7);
+  padding: 2em 0 2em 0;
+  animation: backlog_soft_out 0.7s ease-out forwards;
+  box-sizing: border-box;
+}
+
+// 把z-index置为负数 不然会挡住点击层
+.Backlog_main_out_IndexHide {
+  z-index: -10;
+}
+
+// 暂时禁用滚动
+.Backlog_main_DisableScroll {
+  overflow: hidden !important;
+}
+
+
+.backlog_top {
+  padding: 0 0 0 1em;
+  display: flex;
+  height: 10%;
+}
+
+.backlog_top_icon {
+  padding: 0.6em 0.6em 0 0.6em;
+  border-radius: 1000px;
+  transform: translate(0, -13px);
+  cursor: pointer;
+}
+
+.backlog_top_icon:hover {
+  background: rgba(255, 255, 255, 0.25);
+  animation: backlog_icon_softin 0.25s ease-out forwards;
+}
+
+@keyframes backlog_icon_softin {
+  0% {
+    background: rgba(255, 255, 255, 0);
+  }
+  100% {
+    background: rgba(255, 255, 255, 0.25);
+  }
+}
+
+
+.backlog_title {
+  height: 100%;
+  line-height: 100%;
+  font-size: 360%;
+  font-weight: bold;
+  color: transparent;
+  background: linear-gradient(150deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(165, 212, 228, 1) 100%);
+  -webkit-background-clip: text;
+}
+
+.backlog_content {
+  position: absolute;
+  height: 80%;
+  padding: 1em 10em 1em 10em;
+  overflow: auto;
+  display: flex;
+  flex-flow: column-reverse;
+  font-weight: normal;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+
+.backlog_item {
+  display: flex;
+  color: white;
+  font-size: 165%;
+  opacity: 0;
+  animation: backlog_item_in 0.5s ease-out forwards;
+  margin: 1.25em 0 0 0;
+  width: 100%;
+}
+
+.backlog_item_out {
+  display: flex;
+  color: white;
+  font-size: 165%;
+  opacity: 0;
+  animation: backlog_item_out 0.5s ease-out forwards;
+  margin: 1.25em 0 0 0;
+  width: 100%;
+}
+
+.backlog_func_area {
+  display: flex;
+  flex-flow: row;
+  align-items: flex-start;
+  width: 30%;
+  max-width: 30%;
+  min-width: 30%;
+}
+
+.backlog_item_content_name {
+  font-weight: bold;
+  color: transparent;
+  //background: linear-gradient(150deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 55%, rgb(210, 243, 255) 100%);
+  background: linear-gradient(150deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 35%, rgba(165, 212, 228, 1) 100%);
+  -webkit-background-clip: text;
+  //width: 20%;
+  margin: 0 0 0 auto;
+  overflow-wrap: break-word;
+  box-sizing: border-box;
+  //background: rgba(255, 255, 255, 0.175);
+  border-radius: 7px;
+  padding: 0.2em 0.5em 0.2em 0.5em;
+  font-size: 115%;
+  width: 50%;
+  text-align: left;
+  //font-family: WebgalUI, serif;
+  letter-spacing: 0.1em;
+}
+
+.backlog_item_content {
+  //display: flex;
+  font-size: 115%;
+  width: 82.5%;
+  box-sizing: border-box;
+  padding: 0.2em 0 0 1em;
+  //font-family: WebgalUI, serif;
+  letter-spacing: 0.05em;
+}
+
+.backlog_item_button_list {
+  display: flex;
+  //padding: 0 2em 0 0.3em;
+  flex-flow: row;
+  align-items: flex-start;
+  margin: 0.35em 0 0 0;
+}
+
+.backlog_item_button_element {
+  cursor: pointer;
+  padding: 0.01em 0.75em 0 0.75em;
+  margin: 0 0 0 0.5em;
+  background: rgba(255, 255, 255, 0.075);
+  border-radius: 7px;
+  display: flex;
+  //border: 1px solid rgba(255, 255, 255, 0.15);
+  //box-shadow: 0 0 15px rgba(255, 255, 255, 0.25);
+}
+
+.backlog_item_button_element:hover {
+  background: rgba(255, 255, 255, 0.25);
+  //border: 1px solid rgba(255, 255, 255, 0);
+  //box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
+}
+
+
+.backlog_item_content_text {
+  //width: 80%;
+  box-sizing: border-box;
+}
+
+
+@keyframes backlog_soft_in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes backlog_soft_out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes backlog_item_in {
+  0% {
+    opacity: 0;
+    transform: scale(1.05, 1.05) translate(-15px, 10px) rotateX(-5deg) rotateY(-5deg);
+    //background-color: rgba(255, 255, 255, 0.2);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1, 1) translate(0, 0);
+  }
+}
+
+@keyframes backlog_item_out {
+  0% {
+    opacity: 1;
+    transform: scale(1, 1) translate(0, 0);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.05, 1.05) translate(-15px, 10px) rotateX(-5deg) rotateY(-5deg);
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+}
diff --git a/packages/webgal/public/game/template/UI/BottomControlPanel/bottomControlPanel.scss b/packages/webgal/public/game/template/UI/BottomControlPanel/bottomControlPanel.scss
new file mode 100644
index 000000000..c9c63aeba
--- /dev/null
+++ b/packages/webgal/public/game/template/UI/BottomControlPanel/bottomControlPanel.scss
@@ -0,0 +1,128 @@
+//.ToCenter {
+//  display: flex;
+//  justify-content: center;
+//  position: absolute;
+//  bottom: 0;
+//  left: 0;
+//  width: 100%;
+//  z-index: 9;
+//}
+
+.main {
+  //border-bottom: 2px solid rgba(255,255,255,0.25);
+  position: absolute;
+  bottom: 20px;
+  //will-change: z-index;
+  z-index: 9;
+  display: flex;
+  //background-image: linear-gradient(rgba(245, 247, 250, 0.7) 0%, rgba(195, 207, 226, 0.7) 100%);
+  flex-flow: row;
+  justify-content: center;
+  align-items: center;
+  //width: 100%;
+  height: 70px;
+  right: 20px;
+  border-radius: 35px;
+  //backdrop-filter: blur(5px);
+  padding: 0.15em 1.75em 0.15em 1.75em;
+  //background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 100%);
+  //border-radius: 10px;
+  font-size: 80%;
+}
+
+.button {
+  position: relative;
+  top: 2px;
+  padding: 0 0 0 0;
+  filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 1));
+}
+
+.button_text {
+  position: relative;
+  bottom: 8px;
+  color: white;
+  text-shadow: 1px 1px 5px rgba(0, 0, 0, 1);
+  padding-left: 3px;
+}
+
+.button_on {
+  height: 100%;
+  display: inline-block;
+  font-size: 150%;
+  padding: 0.25em 0.3em 0 0.15em;
+  transition: background-color 0.5s;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 4px;
+  margin: 0 0.1em 0 0.1em;
+}
+
+.singleButton {
+  //border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+  height: 100%;
+  display: inline-block;
+  color: white;
+  font-size: 150%;
+  padding: 0.3em 0.3em 0 0.15em;
+  transition: background-color 0.5s;
+  cursor: pointer;
+  border-radius: 4px;
+  margin: 0 0.1em 0 0.1em;
+  position: relative;
+}
+
+.singleButton:hover, .singleButton_active {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+.fastSlPreview {
+  position: absolute;
+  top: -250px;
+  right: 0;
+  background: linear-gradient(315deg, rgba(253, 251, 251, 0.9) 0%, rgba(235, 237, 238, 0.85) 100%);
+  width: 900px;
+  height: 230px;
+  color: #005caf;
+  border-radius: 5px;
+  display: none;
+  animation: fastSlEnter 0.33s;
+  transition: opacity 0.33s;
+}
+
+.fastsave:hover .fastSPreview {
+  display: block;
+}
+
+.fastload:hover .fastLPreview {
+  display: block;
+}
+
+@keyframes fastSlEnter {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.slPreviewMain {
+  padding: 0.5em 0.5em 0.5em 0.5em;
+  display: flex;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+}
+
+.imgContainer {
+  display: flex;
+  overflow: hidden;
+  border-radius: 5px;
+  //outline: 4px solid #005caf;
+  flex-shrink: 0;
+  height: 100%;
+}
+
+.textContainer {
+  overflow: hidden;
+  padding: 0 0 0 0.5em;
+}
diff --git a/packages/webgal/public/game/template/UI/BottomControlPanel/bottomControlPanelFilm.scss b/packages/webgal/public/game/template/UI/BottomControlPanel/bottomControlPanelFilm.scss
new file mode 100644
index 000000000..541765e54
--- /dev/null
+++ b/packages/webgal/public/game/template/UI/BottomControlPanel/bottomControlPanelFilm.scss
@@ -0,0 +1,54 @@
+.tag {
+  position: absolute;
+  top: 2.5%;
+  left: 2.5%;
+  color: white;
+  z-index: 10;
+  padding: 10px 10px 5px 10px;
+  border-radius: 100px;
+  transition: background-color 0.33s;
+}
+
+.tag:hover {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.container {
+  color: white;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 9;
+  padding: 7em 5em 5em 10em;
+  opacity: 0;
+  animation: showContainer 1s forwards;
+  transition: background-color 0.33s;
+}
+
+.singleButton {
+  padding: 0.5em 0 0.5em 0;
+}
+
+.button_text {
+  font-family: "思源宋体", serif;
+  font-size: 250%;
+  letter-spacing: 0.07em;
+  transition: text-shadow 0.33s;
+}
+
+.button_text:hover {
+  text-shadow: 0 0 15px rgba(255, 255, 255, 1);
+}
+
+@keyframes showContainer {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/packages/webgal/public/game/template/UI/DevPanel/devPanel.scss b/packages/webgal/public/game/template/UI/DevPanel/devPanel.scss
new file mode 100644
index 000000000..a5fa4d350
--- /dev/null
+++ b/packages/webgal/public/game/template/UI/DevPanel/devPanel.scss
@@ -0,0 +1,22 @@
+.devPanelMain {
+  font-size: 150%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 35%;
+  background: rgba(255, 255, 255, 0.75);
+  z-index: 99;
+  overflow: auto;
+}
+
+.devPanelOpener {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  background: rgba(255, 255, 255, 0.75);
+  z-index: 100;
+  padding: 3px 7px 3px 7px;
+  border-radius: 4px;
+  cursor: pointer;
+}
diff --git a/packages/webgal/public/game/template/UI/Extra/extra.scss b/packages/webgal/public/game/template/UI/Extra/extra.scss
new file mode 100644
index 000000000..1004f06ab
--- /dev/null
+++ b/packages/webgal/public/game/template/UI/Extra/extra.scss
@@ -0,0 +1,279 @@
+.extra {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 14;
+  background-image: linear-gradient(135deg, #93a5cf 0%, #e4efe9 100%);;
+  padding: 2em 2em 2em 2em;
+  box-sizing: border-box;
+}
+
+.extra_top {
+  padding: 0 0 0 0;
+  display: flex;
+  height: 10%;
+}
+
+.extra_top_icon {
+  padding: 0.6em 0.6em 0 0.6em;
+  border-radius: 1000px;
+  transform: translate(0, -13px);
+  cursor: pointer;
+}
+
+.extra_top_icon:hover {
+  background: rgba(255, 255, 255, 0.25);
+  animation: extra_icon_softin 0.25s ease-out forwards;
+}
+
+@keyframes extra_icon_softin {
+  0% {
+    background: rgba(255, 255, 255, 0);
+  }
+  100% {
+    background: rgba(0, 0, 0, 0.25);
+  }
+}
+
+
+.extra_title {
+  font-family: "思源宋体", serif;
+  height: 100%;
+  line-height: 100%;
+  font-size: 325%;
+  font-weight: bold;
+  color: transparent;
+  background: linear-gradient(150deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 75%, #51A8DD 100%);
+  -webkit-background-clip: text;
+}
+
+.mainContainer {
+  box-sizing: border-box;
+  padding: 0 2em 0 2em;
+  display: flex;
+  height: 92%;
+  flex-flow: column;
+}
+
+.bgmContainer {
+  left: 50px;
+  right: 50px;
+  bottom: 30px;
+  position: absolute;
+  overflow: auto;
+  //width: 100%;
+  //height: 70%;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column-reverse;
+  align-content: center;
+  background-image: linear-gradient(315deg, rgba(163, 189, 237, 0.95) 0%, rgba(105, 145, 199, 0.95) 100%);
+  padding: 1em 2em 1em 2em;
+  border-radius: 4px;
+  transition: max-height 0.5s;
+  z-index: 2;
+}
+
+.bgmListContainer {
+  z-index: 2;
+  bottom: 0;
+  //overflow: hidden;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  flex-flow: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  margin: 0 0 15px 0;
+  flex-wrap: wrap;
+  overflow: auto;
+}
+
+.bgmPlayerMain {
+  display: flex;
+}
+
+.bgmControlButton {
+  padding: 0.6em 1.2em 0.2em 1.2em;
+  margin: 0 5px 0 5px;
+  box-sizing: border-box;
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  transition: background-color 0.33s, color 0.33s;
+  flex-shrink: 0;
+}
+
+.bgmControlButton:hover {
+  box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.35);
+}
+
+.bgmName {
+  color: rgba(255, 255, 255, 0.8);
+  font-family: "思源宋体", serif;
+  font-size: 155%;
+  margin: 5px 5px 0 15px;
+  overflow: hidden;
+}
+
+.bgmElement {
+  font-family: "思源宋体", serif;
+  padding: 0.5em 1em 0.5em 1em;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 5px;
+  color: white;
+  font-size: 125%;
+  margin: 0.5em 1em 0.5em 0.5em;
+  transition: background-color 1s, color 1s;
+  opacity: 1;
+  //animation: bgmElement_In 0.5s forwards ease-out;
+  cursor: pointer;
+  width: 28%;
+  flex-shrink: 0;
+}
+
+@keyframes bgmElement_In {
+  0% {
+    opacity: 0.95;
+    //transform: translate(-50px, 0);
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.bgmElement:hover {
+  background-color: rgba(255, 255, 255, 0.65);
+  color: #666;
+  transition: background-color 0.5s, color 0.5s;
+}
+
+.bgmElement_active {
+  background-color: rgba(255, 255, 255, 0.85) !important;
+  color: #666;
+}
+
+.cgMain {
+  width: 100%;
+  height: 88%;
+}
+
+.cgContainer {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  align-content: flex-start;
+  height: 90%;
+  box-sizing: border-box;
+  padding: 4em 0 0 2em;
+}
+
+.cgElement {
+  width: 22.5%;
+  height: 37.5%;
+  background-color: rgba(255, 255, 255, 0.75);
+  box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.35);
+  box-sizing: border-box;
+  padding: 0.75em 0.75em 0.75em 0.75em;
+  opacity: 0;
+  margin: 1em 1em 1em 1em;
+  animation-delay: 100ms;
+  z-index: 1;
+  position: relative;
+  cursor: pointer;
+}
+
+.cgShowDiv {
+  height: 8%;
+  width: 100%;
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
+  align-items: flex-end;
+}
+
+.cgShowDivWarpper {
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
+  align-items: flex-end;
+  //background: rgba(255, 255, 255, 0.35);
+  border-radius: 7px;
+  padding: 12px 15px;
+}
+
+.cgNav {
+  font-size: 170%;
+  background-color: rgba(255,255,255,0.5);
+  color: #666;
+  padding: 0.12em 1em 0.12em 1em;
+  margin: 0 0.25em 0 0.25em;
+  //width: 20px;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.5s, color 0.5s, font-weight 0.5s;
+  border-radius: 7px;
+}
+
+.cgNav:first-child {
+  margin-left: 0;
+}
+
+.cgNav:last-child {
+  margin-right: 0;
+}
+
+.cgNav_active {
+  background-color: rgba(255,255,255,0.7) !important;
+  color: #005CAF;
+}
+
+.cgNav:hover {
+  color: #005CAF;
+  background-color: rgba(255,255,255,0.6);
+}
+
+
+.showFullContainer {
+  z-index: 13;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.showFullCgMain {
+  cursor: pointer;
+  width: 80%;
+  height: 80%;
+  box-sizing: border-box;
+  padding: 2em 2em 2em 2em;
+  background: rgba(255, 255, 255, 0.95);
+  animation: fullCgIn 0.5s ease-out forwards;
+  opacity: 0;
+}
+
+$initialTransform: scale(1.05, 1.05) translate(-25px, -50px) rotateX(-10deg) rotateY(10deg);
+$endTransform: scale(1, 1) translate3d(0, 0, 0);
+
+@keyframes fullCgIn {
+  0% {
+    opacity: 0;
+    transform: $initialTransform;
+  }
+  100% {
+    opacity: 1;
+    transform: $endTransform;
+  }
+}
diff --git a/packages/webgal/public/game/template/UI/GlobalDialog/globalDialog.scss b/packages/webgal/public/game/template/UI/GlobalDialog/globalDialog.scss
new file mode 100644
index 000000000..206d4c785
--- /dev/null
+++ b/packages/webgal/public/game/template/UI/GlobalDialog/globalDialog.scss
@@ -0,0 +1,85 @@
+.GlobalDialog_main {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 20;
+  background: rgba(15, 37, 64, 0.39);
+  color: white;
+  opacity: 0.5;
+  animation: showGlobalDialog 0.33s forwards;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  //font-family: "WebgalUI", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family: "思源宋体", serif;
+}
+
+.glabalDialog_container_inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-flow: column;
+  background: linear-gradient(to right,
+    rgba(0, 92, 175, 0) 0%,
+    rgba(0, 92, 175, 0.5) 33%,
+    rgba(0, 92, 175, 0.85) 50%,
+    rgba(0, 92, 175, 0.5) 66%,
+    rgba(0, 92, 175, 0) 100%
+  );
+  padding: 1em 5em 1.5em 5em;
+}
+
+.glabalDialog_container {
+  height: 20%;
+  width: 100%;
+  border-top: 4px solid;
+  border-bottom: 4px solid;
+  border-image: linear-gradient(to right,
+    rgba(255, 255, 255, 0.05) 0%,
+    rgba(255, 255, 255, 0.85) 33%,
+    rgba(255, 255, 255, 1) 50%,
+    rgba(255, 255, 255, 0.85) 66%,
+    rgba(255, 255, 255, 0.05) 100%
+  ) 1;
+  //padding: 1px 1px 1px 1px;
+}
+
+.title {
+  font-size: 300%;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+}
+
+.button_list {
+  display: flex;
+  margin: auto 0 0 0;
+}
+
+.button {
+  font-size: 200%;
+  padding: 0.15em 1em 0.15em 1em;
+  margin: 0.2em 1em 0.2em 1em;
+  cursor: pointer;
+  transition: background-color 0.33s, color 0.33s, font-weight 0.33s, transform 0.33s;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 1);
+  border-radius: 5px;
+  //background: rgba(0, 0, 0, 0.05);
+}
+
+.button:hover {
+  font-weight: bold;
+  color: #005caf;
+  transform: scale(1.1, 1.1);
+  text-shadow: 0 0 15px rgba(0, 0, 0, 0);
+  background: rgba(255, 255, 255, 0.85);
+}
+
+@keyframes showGlobalDialog {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/packages/webgal/public/game/template/UI/Logo/logo.scss b/packages/webgal/public/game/template/UI/Logo/logo.scss
new file mode 100644
index 000000000..2e66c2fd1
--- /dev/null
+++ b/packages/webgal/public/game/template/UI/Logo/logo.scss
@@ -0,0 +1,63 @@
+.Logo_main {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  animation: change-img-anim 5s forwards;
+  background-size: cover;
+  z-index: 14;
+}
+@keyframes change-img-anim {
+  0%{
+    opacity: 0;
+  }
+  35%{
+    opacity: 1;
+  }
+  65%{
+    opacity: 1;
+  }
+  99%{
+    opacity: 0;
+  }
+  100%{
+    opacity: 0;
+    display: none;
+  }
+}
+.Logo_Back {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  opacity: 1;
+  bottom: 0;
+  background-size: cover;
+  z-index: 14;
+  background: white;
+}
+
+.animationActive{
+  animation: fadeout 5s forwards;
+}
+
+@keyframes fadeout {
+  0%{
+    opacity: 1;
+  }
+  65%{
+    opacity: 1;
+  }
+  99%{
+    opacity: 0;
+  }
+  100%{
+    opacity: 0;
+    display: none;
+  }
+}
diff --git a/packages/webgal/public/game/template/UI/Menu/about.scss b/packages/webgal/public/game/template/UI/Menu/about.scss
new file mode 100644
index 000000000..7cdee3bc9
--- /dev/null
+++ b/packages/webgal/public/game/template/UI/Menu/about.scss
@@ -0,0 +1,46 @@
+.backButton{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50px;
+  height: 50px;
+  background: rgba(0,0,0,0.1);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.backButton:hover{
+  background: rgba(0,0,0,0.2);
+}
+
+.about{
+  padding: 10px 0 0 0;
+}
+
+.icon{
+  display: inline-flex;
+}
+
+.title{
+  color: transparent;
+  background: linear-gradient(to left, #227D51, rgba(81, 110, 65, 1));
+  -webkit-background-clip: text;
+  font-size: 200%;
+  //border-bottom: 2px solid rgba(81, 110, 65, 0.9);
+  padding: 0.15em 0.5em 0.15em 0.1em;
+  font-weight: bold;
+  margin-top: 20px;
+}
+
+.text{
+  color: rgba(81, 110, 65, 1);
+  padding: 0 0 0 10px;
+  font-size: 135%;
+  a{
+    color: rgba(81, 110, 65, 1);
+  }
+}
+
+.contributor{
+  padding: 0 10px 0 0;
+}
diff --git a/packages/webgal/public/game/template/UI/Menu/menu.scss b/packages/webgal/public/game/template/UI/Menu/menu.scss
new file mode 100644
index 000000000..143af6a87
--- /dev/null
+++ b/packages/webgal/public/game/template/UI/Menu/menu.scss
@@ -0,0 +1,24 @@
+.Menu_main {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 16;
+  //backdrop-filter: blur(1px);
+  animation: Menu_ShowSoftly 0.5s forwards;
+  background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
+}
+
+.Menu_TagContent {
+  width: 100%;
+  height: 90%;
+}
+
+
+@keyframes Menu_ShowSoftly {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/packages/webgal/public/game/template/UI/Menu/menuPanel.scss b/packages/webgal/public/game/template/UI/Menu/menuPanel.scss
new file mode 100644
index 000000000..fc879cbc0
--- /dev/null
+++ b/packages/webgal/public/game/template/UI/Menu/menuPanel.scss
@@ -0,0 +1,51 @@
+.MenuPanel_main {
+  width: 100%;
+  height: 10%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  //background-color: rgba(255, 255, 255, 1);
+  //box-shadow: 0 0 45px 15px rgba(0, 0, 0, 0.05);
+  padding: 0 55px;
+}
+
+.MenuPanel_button {
+  padding: 0.25em 15px 0 15px;
+  margin-right: 15px;
+  display: flex;
+  justify-content: center;
+  font-size: 200%;
+  text-align: center;
+  //font-weight: bold;
+  border-radius: 6px;
+  //width: 20%;
+  min-width: 12.5%;
+  cursor: pointer;
+  color: rgba(123,144,169, 1);
+  background: rgba(0, 0, 0, 0);
+  overflow: hidden;
+  //border-right: 1.5px solid rgba(0, 0, 0, 0.15);
+  transition: text-shadow 0.7s, background-color 0.7s;
+}
+
+.MenuPanel_button:last-child{
+  margin-right: 0;
+}
+
+.MenuPanel_button:hover {
+  background-color: rgba(245, 246, 247, 0.15);
+}
+
+.MenuPanel_button:last-child {
+  border-right: none;
+}
+
+.MenuPanel_button_icon {
+  transform: translate(0, 0.125em);
+  padding: 0 0.15em 0 0;
+  margin: 0 0.15em 0 0;
+}
+
+.MenuPanel_button_hl{
+  background-color: rgba(245, 246, 247, 0.35) !important;
+}
diff --git a/packages/webgal/public/game/template/UI/Menu/normalButton.scss b/packages/webgal/public/game/template/UI/Menu/normalButton.scss
new file mode 100644
index 000000000..2f48b267e
--- /dev/null
+++ b/packages/webgal/public/game/template/UI/Menu/normalButton.scss
@@ -0,0 +1,23 @@
+.NormalButton {
+  font-size: 150%;
+  box-sizing: border-box;
+  padding: 0.2em 1em 0.2em 1em;
+  background-color: rgba(50, 50, 50, 0.05);
+  margin: 0 0.4em 0 0;
+  color: rgba(160, 170, 160, 1);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+}
+
+.NormalButton:hover {
+  border-bottom: 2px solid rgba(81, 110, 65, 0.9);
+  color: rgba(81, 110, 65, 0.9);
+  font-weight: bold;
+}
+
+.NormalButtonChecked {
+  background-color: rgba(81, 110, 65, 0.15);
+  border-bottom: 2px solid rgba(81, 110, 65, 0.9);
+  color: rgba(81, 110, 65, 0.9);
+  font-weight: bold;
+}
diff --git a/packages/webgal/public/game/template/UI/Menu/normalOption.scss b/packages/webgal/public/game/template/UI/Menu/normalOption.scss
new file mode 100644
index 000000000..8f368f6fc
--- /dev/null
+++ b/packages/webgal/public/game/template/UI/Menu/normalOption.scss
@@ -0,0 +1,64 @@
+.NormalOption {
+  margin: 0.2em 1em 0.2em 1em;
+  padding: 0.2em 0.2em 0.2em 0.2em;
+  display: flex;
+  flex-flow: column;
+  align-items: flex-start;
+  animation: Elements_in ease-out 0.7s forwards;
+}
+
+.NormalOption_title {
+  //color: rgba(81, 110, 65, 0.9);
+  color: transparent;
+  background: linear-gradient(to left, #227D51, rgba(81, 110, 65, 1));
+  -webkit-background-clip: text;
+  font-size: 200%;
+  //border-bottom: 2px solid rgba(81, 110, 65, 0.9);
+  padding: 0.15em 0.5em 0.15em 0.1em;
+  font-weight: bold;
+}
+
+.NormalOption_title_bef {
+  font-weight: bold;
+  font-size: 200%;
+  content: attr(data-text);
+  position: absolute;
+  -webkit-text-stroke: 3px rgba(0, 0, 0, 1);
+  z-index: -1;
+  padding: 0.15em 0.5em 0.15em 0.1em;
+}
+
+.NormalOption_title_sd {
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0);
+  font-size: 200%;
+  position: absolute;
+  z-index: -1;
+  padding: 0.15em 0.5em 0.15em 0.1em;
+  text-shadow: 0.04em 0.04em rgba(81, 110, 65, 0.9),
+    0.05em 0.05em rgba(81, 110, 65, 0.9),
+    0.06em 0.06em rgba(81, 110, 65, 0.9),
+    0.07em 0.07em rgba(81, 110, 65, 0.9),
+    0.08em 0.08em rgba(81, 110, 65, 0.9),
+    0.09em 0.09em rgba(81, 110, 65, 0.9),
+    0.10em 0.10em rgba(81, 110, 65, 0.9);
+  //0.11em 0.11em rgba(81, 110, 65, 0.9),
+  //0.12em 0.12em rgba(81, 110, 65, 0.9);
+}
+
+.NormalOption_buttonList {
+  padding: 0.5em 0 0.5em 0;
+  display: flex;
+}
+
+@keyframes Elements_in {
+  0% {
+    opacity: 0;
+    transform: scale(1.03, 1.03) translate(-25px, -20px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1, 1) translate(0, 0);
+  }
+}
\ No newline at end of file
diff --git a/packages/webgal/public/game/template/UI/Menu/options.scss b/packages/webgal/public/game/template/UI/Menu/options.scss
new file mode 100644
index 000000000..b4a3ef4ba
--- /dev/null
+++ b/packages/webgal/public/game/template/UI/Menu/options.scss
@@ -0,0 +1,140 @@
+.Options_main {
+  position: absolute;
+  cursor: default;
+  height: 90%;
+  width: 100%;
+  //background: rgba(255, 255, 255, 0.65);
+}
+
+.Options_top {
+  height: 15%;
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+}
+
+.Options_title {
+  font-family: "思源宋体", serif;
+  letter-spacing: 0.1em;
+  font-size: 225%;
+  margin: 0.5em 0 0.5em 0;
+  padding: 0.2em 2em 0.2em 1.1em;
+  box-sizing: border-box;
+  //background-color: rgba(255, 255, 255, 0.99);
+  //border-right: .2em solid rgba(81, 110, 65, 0.9);
+  //box-shadow: .1em .1em .8em .2em rgba(0, 0, 0, 0.07);
+}
+
+.Option_title_text {
+  font-size: 165%;
+  font-weight: bold;
+  color: transparent;
+  background: linear-gradient(to left, #227D51, rgba(81, 110, 65, 1));
+  -webkit-background-clip: text;
+  animation: Elements_in ease-out 0.7s forwards;
+}
+
+.Option_title_text_shadow {
+  position: absolute;
+  color: rgba(0, 0, 0, 0);
+  -webkit-text-stroke: 3px rgba(0, 0, 0, 1);
+  z-index: -1;
+}
+
+.Option_title_text_ts {
+  position: absolute;
+  color: rgba(0, 0, 0, 0);
+  text-shadow: 0.04em 0.04em rgba(81, 110, 65, 0.9),
+    0.05em 0.05em rgba(81, 110, 65, 0.9),
+    0.06em 0.06em rgba(81, 110, 65, 0.9),
+    0.07em 0.07em rgba(81, 110, 65, 0.9);
+  //0.08em 0.08em rgba(81, 110, 65, 0.9),
+  //0.09em 0.09em rgba(81, 110, 65, 0.9),
+  //0.10em 0.10em rgba(81, 110, 65, 0.9),
+  //0.11em 0.11em rgba(81, 110, 65, 0.9),
+  //0.12em 0.12em rgba(81, 110, 65, 0.9);
+  z-index: -1;
+}
+
+.Options_main_content {
+  display: flex;
+  flex: 1;
+  padding: 0 0 0 3em;
+  overflow: auto;
+}
+
+.Options_main_content_half {
+  width: 95%;
+  display: flex;
+  flex-flow: row;
+  align-items: flex-start;
+  align-content: flex-start;
+  flex-wrap: wrap;
+  padding: 0 1em 0 1em;
+  position: relative;
+}
+
+.About_title_text {
+  margin: 0.2em 1em 0.2em 1em;
+  padding: 0.2em 0.2em 0.2em 0.2em;
+  //width: 100%;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  animation: Elements_in ease-out 0.7s forwards;
+  cursor: pointer;
+}
+
+.About_text {
+  font-weight: bold;
+  color: transparent;
+  background: linear-gradient(to left, rgba(34, 125, 81, 0.65), rgba(81, 110, 65, 0.65));
+  -webkit-background-clip: text;
+  font-size: 135%;
+  text-decoration: underline;
+
+}
+
+@keyframes Elements_in {
+  0% {
+    opacity: 0;
+    transform: scale(1.03, 1.03) translate(-25px, -20px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1, 1) translate(0, 0);
+  }
+}
+
+.Options_page_container {
+  height: 85%;
+  display: flex;
+  padding: 1em 3.75em 1em 3.75em;
+}
+
+.Options_button_list {
+  animation: Elements_in ease-out 0.7s forwards;
+}
+
+.Options_page_button {
+  font-family: "思源宋体", serif;
+  font-size: 300%;
+  font-weight: bold;
+  color: transparent;
+  background: linear-gradient(to left, #227D51, rgba(81, 110, 65, 1));
+  opacity: 0.35;
+  -webkit-background-clip: text;
+  transition: color 0.33s, background-image 0.33s, opacity 0.33s;
+  cursor: pointer;
+}
+
+.Options_page_button_active {
+  background-image: linear-gradient(to left, #227D51, rgba(81, 110, 65, 1));
+  -webkit-background-clip: text;
+  opacity: 1;
+}
+
+.Options_page_button:hover {
+  opacity: 1;
+}
diff --git a/packages/webgal/public/game/template/UI/Menu/saveAndLoad.scss b/packages/webgal/public/game/template/UI/Menu/saveAndLoad.scss
new file mode 100644
index 000000000..a0f623ed2
--- /dev/null
+++ b/packages/webgal/public/game/template/UI/Menu/saveAndLoad.scss
@@ -0,0 +1,267 @@
+.Save_Load_main {
+  height: 90%;
+  width: 100%;
+  position: absolute;
+  cursor: default;
+}
+
+.Save_Load_top {
+  height: 10%;
+  width: 100%;
+  display: flex;
+  //background-color: rgba(255, 255, 255, 1);
+  //box-shadow: 0 0 1.5em 0.1em rgba(0, 0, 0, 0.05);
+  animation: Elements_in ease-out 1s forwards;
+  //border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  justify-content: center;
+}
+
+.Save_Load_title {
+  font-family: "思源宋体", serif;
+  letter-spacing: 0.1em;
+  width: auto;
+  font-size: 500%;
+  min-width: 350px;
+  //margin: 0 0 0 0.8em;
+  //padding: 0 0.8em 0 0.8em;
+  box-sizing: border-box;
+  //border-bottom: 4px solid #77428D;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  left: 20px;
+  top:0;
+  z-index: -1;
+  opacity: 0.2;
+  transform: translateY(-10px);
+}
+
+.Save_title_text {
+  font-weight: bold;
+  color: transparent;
+  background: linear-gradient(135deg, #77428D 0%, #B28FCE 100%);
+  text-shadow: 2px 2px 15px rgba(255, 255, 255, 0.5);
+  -webkit-background-clip: text;
+}
+
+
+.Load_title_text {
+  font-weight: bold;
+  color: transparent;
+  background: linear-gradient(135deg, #005CAF 0%, #2EA9DF 100%);
+  text-shadow: 2px 2px 15px rgba(255, 255, 255, 0.5);
+  -webkit-background-clip: text;
+}
+
+.Save_Load_top_buttonList {
+  height: 100%;
+  display: flex;
+  //padding: 0 0 0 2em;
+}
+
+.Save_Load_top_button {
+  cursor: pointer;
+  font-size: 200%;
+  width: 2.05em;
+  text-align: center;
+  color: rgba(0, 0, 0, 0.5);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  border-bottom: 4px solid rgba(0, 0, 0, 0);
+  transition: background-color 0.7s, border-bottom-width 0.7s;
+}
+
+.Save_Load_top_button_text {
+  text-align: center;
+  width: 100%;
+  padding: 0 0 3px 0;
+  border-left: 2px solid rgba(0, 0, 0, 0.1);
+}
+
+.Save_Load_top_button:first-child > div {
+  border-left: 2px solid rgba(0, 0, 0, 0);
+}
+
+.Save_Load_top_button_on {
+  font-weight: bold;
+  border-bottom: 4px solid #77428D;
+  color: #77428D;
+  background-color: rgba(119, 66, 141, 0.05);
+}
+
+.Save_Load_top_button:hover {
+  color: #77428D;
+  font-weight: bold;
+  border-bottom: 4px solid #77428D;
+}
+
+.Load_top_button_on {
+  font-weight: bold;
+  border-bottom: 5px solid #005CAF;
+  color: #005CAF;
+  background-color: rgba(0, 92, 175, 0.1);
+}
+
+.Load_top_button:hover {
+  color: #005CAF;
+  font-weight: bold;
+  border-bottom: 5px solid #005CAF;
+}
+
+.Save_Load_content {
+  height: 90%;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.Save_Load_content_element {
+  //background: linear-gradient(-45deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.5) 100%);
+  background: linear-gradient(-45deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.075));
+  overflow: hidden;
+  //border: 1px solid rgba(255, 255, 255, 1);
+  width: 17.5%;
+  height: 45%;
+  //box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+  animation: Elements_in 1s ease-out forwards, Elements_in_transform 1s ease-out;
+  opacity: 0;
+  border-radius: 4px;
+  transition: transform 0.25s, box-shadow 0.25s;
+  cursor: pointer;
+}
+
+.Save_Load_content_element:hover {
+  //box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.1);
+  transform: scale(1.05, 1.05) translate(-0.2em, -0.2em);
+}
+
+
+.Save_Load_content_element_top {
+  font-family: "思源宋体", serif;
+  width: 100%;
+  height: 12%;
+  display: flex;
+}
+
+.Save_Load_content_element_top_index {
+  color: rgba(255, 255, 255, 1);
+  text-align: center;
+  font-size: 155%;
+  height: 100%;
+  width: 20%;
+  background-color: #B28FCE;
+}
+
+.Load_content_elememt_top_index {
+  background-color: #51A8DD;
+}
+
+.Save_Load_content_element_top_date {
+  padding: 0.425em 0 0 0.5em;
+  background-color: #77428D;
+  color: rgba(255, 255, 255, 1);
+  font-size: 115%;
+  height: 100%;
+  width: 80%;
+  font-family: WebgalUI, serif;
+  letter-spacing: 0.1em;
+}
+
+.Load_content_element_top_date {
+  background-color: #005CAF;
+}
+
+.Save_Load_content_text {
+  font-family: "WebgalUI", sans-serif;
+  letter-spacing: 0.05em;
+  color: #373C38;
+  background: linear-gradient(-45deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 1) 100%);
+  //background: rgba(255,255,255,1);
+  font-size: 120%;
+  height: 40%;
+  width: 100%;
+  //box-sizing: border-box;
+  display: flex;
+  flex-flow: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+
+.Save_Load_content_text_padding {
+  padding: 0.2em 0.75em 0.2em 0.75em;
+}
+
+.Save_Load_content_speaker {
+  box-sizing: border-box;
+  //margin: 0.35em 0 0 0;
+  //background: rgba(0, 0, 0, 0.04);
+  font-weight: bold;
+  color: #77428D;
+  padding: 0.35em 0.8em 0.25em 0.8em;
+  width: 100%;
+  //border-radius: 4px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.Load_content_speaker {
+  color: #005caf;
+}
+
+
+.Load_content_text {
+  background-color: rgba(0, 92, 175, 0.75);
+}
+
+.Save_Load_content_miniRen {
+  width: 100%;
+  height: 48%;
+  position: relative;
+  background-size: cover;
+}
+
+.Save_Load_content_miniRen_bg {
+  background-size: cover;
+  height: 100%;
+  width: 100%;
+  background-position: center;
+}
+
+.Save_Load_content_miniRen_figure {
+  height: 100%;
+  max-height: 100%;
+  max-width: 100%;
+  position: absolute;
+  bottom: 0;
+}
+
+.Save_Load_content_miniRen_figLeft {
+  bottom: 0;
+  left: 0;
+}
+
+.Save_Load_content_miniRen_figRight {
+  bottom: 0;
+  right: 0;
+}
+
+@keyframes Elements_in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes Elements_in_transform {
+  0% {
+    transform: scale(1.05, 1.05) translate(-25px, -20px) rotateY(15deg) rotateX(-15deg);
+  }
+  100% {
+    transform: scale(1, 1) translate(0, 0);
+  }
+}
diff --git a/packages/webgal/public/game/template/UI/Menu/slider.scss b/packages/webgal/public/game/template/UI/Menu/slider.scss
new file mode 100644
index 000000000..826e83119
--- /dev/null
+++ b/packages/webgal/public/game/template/UI/Menu/slider.scss
@@ -0,0 +1,106 @@
+input[type=range] {
+  -webkit-appearance: none; /* 去掉底部的 track 默认样式，就是整个灰条 */
+  width: 500px; /* Firefox 需要指定明确的宽度 */
+  height: 50px;
+  background: transparent; /* 否则在 Chrome 中是白色背景 */
+  font-size: 100%;
+}
+
+/* 去掉 webkit 内核 滑块 的样式 */
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+}
+
+input[type=range]:focus {
+  outline: none; /* 去除获取焦点时蓝色的外边框，你也可以自己定制其他你想要的效果 */
+}
+
+/*以下是自定义样式*/
+
+/*滑块样式*/
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  /*border: 1px solid #000000;*/
+  height: 375%;
+  width: 7.2%;
+  border-radius: 5em;
+  background: #ffffff;
+  cursor: pointer;
+  margin-top: -14px; /* 在 Chrome 中你需要给定一个明确的 margin，但是在 Firefox 和 IE 中这个是固定的 */
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* 添加一条炫酷的效果为你的 thumb */
+}
+
+/*轨道样式*/
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 20%;
+  cursor: pointer;
+  box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.3);
+  background: rgba(81, 110, 65, 0.9);
+  border-radius: 2em;
+}
+
+input[type=range]:focus::-webkit-slider-runnable-track {
+  background: rgba(81, 110, 65, 0.9);
+}
+
+/* Firefox 同上 */
+input[type=range]::-moz-range-thumb {
+  height: 36px;
+  width: 7.2%;
+  border-radius: 5em;
+  background: #ffffff;
+  cursor: pointer;
+  /*margin-top: -14px; !* 在 Chrome 中你需要给定一个明确的 margin，但是在 Firefox 和 IE 中这个是固定的 *!*/
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* 添加一条炫酷的效果为你的 thumb */
+}
+
+input[type=range]::-moz-range-track {
+  width: 100%;
+  height: 20%;
+  cursor: pointer;
+  box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.3);
+  background: rgba(81, 110, 65, 0.9);
+  border-radius: 2em;
+}
+
+.Option_WebGAL_slider {
+  position: relative;
+}
+
+.bubble {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.85);
+  color: white;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-weight: bold;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  animation: bubbleFadeIn 0.2s ease-out forwards;
+}
+
+.bubble::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 6px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
+}
+
+@keyframes bubbleFadeIn {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
diff --git a/packages/webgal/public/game/template/UI/Menu/textPreview.scss b/packages/webgal/public/game/template/UI/Menu/textPreview.scss
new file mode 100644
index 000000000..420b3bd6d
--- /dev/null
+++ b/packages/webgal/public/game/template/UI/Menu/textPreview.scss
@@ -0,0 +1,12 @@
+.textPreviewMain {
+  z-index: 1;
+  padding: 1em;
+  min-height: 480px;
+  width: 100%;
+}
+
+.textbox {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
\ No newline at end of file
diff --git a/packages/webgal/public/game/template/UI/PanicOverlay/panicOverlay.scss b/packages/webgal/public/game/template/UI/PanicOverlay/panicOverlay.scss
new file mode 100644
index 000000000..7619d39d1
--- /dev/null
+++ b/packages/webgal/public/game/template/UI/PanicOverlay/panicOverlay.scss
@@ -0,0 +1,9 @@
+.panic_overlay_main {
+  margin: 0;
+  position: fixed;
+  //display: none;
+  width: 100%;
+  height: 100%;
+  background-color: white;
+  z-index: 256;
+}
diff --git a/packages/webgal/src/Core/util/coreInitialFunction/templateLoader.ts b/packages/webgal/src/Core/util/coreInitialFunction/templateLoader.ts
index 3e43745bf..c3ee1cf5e 100644
--- a/packages/webgal/src/Core/util/coreInitialFunction/templateLoader.ts
+++ b/packages/webgal/src/Core/util/coreInitialFunction/templateLoader.ts
@@ -87,6 +87,23 @@ async function loadStyleFiles() {
     { ui: 'title', path: 'UI/Title/title.scss' },
     { ui: 'textbox', path: 'Stage/TextBox/textbox.scss' },
     { ui: 'choose', path: 'Stage/Choose/choose.scss' },
+    { ui: 'backlog', path: 'UI/Backlog/backlog.scss' },
+    { ui: 'bottomControlPanel', path: 'UI/BottomControlPanel/bottomControlPanel.scss' },
+    { ui: 'bottomControlPanelFilm', path: 'UI/BottomControlPanel/bottomControlPanelFilm.scss' },
+    { ui: 'devPanel', path: 'UI/DevPanel/devPanel.scss' },
+    { ui: 'extra', path: 'UI/Extra/extra.scss' },
+    { ui: 'globalDialog', path: 'UI/GlobalDialog/globalDialog.scss' },
+    { ui: 'logo', path: 'UI/Logo/logo.scss' },
+    { ui: 'menu', path: 'UI/Menu/menu.scss' },
+    { ui: 'menuPanel', path: 'UI/Menu/menuPanel.scss' },
+    { ui: 'menuSaveAndLoad', path: 'UI/Menu/saveAndLoad.scss' },
+    { ui: 'menuOptions', path: 'UI/Menu/options.scss' },
+    { ui: 'menuNormalButton', path: 'UI/Menu/normalButton.scss' },
+    { ui: 'menuNormalOption', path: 'UI/Menu/normalOption.scss' },
+    { ui: 'menuTextPreview', path: 'UI/Menu/textPreview.scss' },
+    { ui: 'menuAbout', path: 'UI/Menu/about.scss' },
+    { ui: 'menuSlider', path: 'UI/Menu/slider.scss' },
+    { ui: 'panicOverlay', path: 'UI/PanicOverlay/panicOverlay.scss' },
   ];
 
   await Promise.all(
diff --git a/packages/webgal/src/UI/Backlog/Backlog.tsx b/packages/webgal/src/UI/Backlog/Backlog.tsx
index 878f79f20..fbe966a8c 100644
--- a/packages/webgal/src/UI/Backlog/Backlog.tsx
+++ b/packages/webgal/src/UI/Backlog/Backlog.tsx
@@ -10,11 +10,13 @@ import useTrans from '@/hooks/useTrans';
 import { compileSentence, EnhancedNode } from '@/Stage/TextBox/TextBox';
 import useSoundEffect from '@/hooks/useSoundEffect';
 import { WebGAL } from '@/Core/WebGAL';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 export const Backlog = () => {
   const t = useTrans('gaming.');
   // logger.info('Backlog render');
   const { playSeEnter, playSeClick } = useSoundEffect();
+  const applyStyle = useApplyStyle('backlog');
   const GUIStore = useSelector((state: RootState) => state.GUI);
   const isBacklogOpen = GUIStore.showBacklog;
   const dispatch = useDispatch();
@@ -104,13 +106,13 @@ export const Backlog = () => {
       });
       const singleBacklogView = (
         <div
-          className={styles.backlog_item}
+          className={applyStyle('backlog_item', styles.backlog_item)}
           id={`backlog_item_${i}`}
           style={{ animationDelay: `${20 * ((i - 1) % 20)}ms` }}
           key={'backlogItem' + backlogItem.currentStageState.showText + backlogItem.saveScene.currentSentenceId}
         >
-          <div className={styles.backlog_func_area}>
-            <div className={styles.backlog_item_button_list}>
+          <div className={applyStyle('backlog_func_area', styles.backlog_func_area)}>
+            <div className={applyStyle('backlog_item_button_list', styles.backlog_item_button_list)}>
               <div
                 onClick={(e) => {
                   playSeClick();
@@ -119,7 +121,7 @@ export const Backlog = () => {
                   e.stopPropagation();
                 }}
                 onMouseEnter={playSeEnter}
-                className={styles.backlog_item_button_element}
+                className={applyStyle('backlog_item_button_element', styles.backlog_item_button_element)}
               >
                 <Return theme="outline" size={iconSize} fill="#ffffff" strokeWidth={3} />
               </div>
@@ -140,16 +142,20 @@ export const Backlog = () => {
                     }
                   }}
                   onMouseEnter={playSeEnter}
-                  className={styles.backlog_item_button_element}
+                  className={applyStyle('backlog_item_button_element', styles.backlog_item_button_element)}
                 >
                   <VolumeNotice theme="outline" size={iconSize} fill="#ffffff" strokeWidth={3} />
                 </div>
               ) : null}
             </div>
-            <div className={styles.backlog_item_content_name}>{nameElementList}</div>
+            <div className={applyStyle('backlog_item_content_name', styles.backlog_item_content_name)}>
+              {nameElementList}
+            </div>
           </div>
-          <div className={styles.backlog_item_content}>
-            <span className={styles.backlog_item_content_text}>{showTextElementList}</span>
+          <div className={applyStyle('backlog_item_content', styles.backlog_item_content)}>
+            <span className={applyStyle('backlog_item_content_text', styles.backlog_item_content_text)}>
+              {showTextElementList}
+            </span>
           </div>
           <audio id={'backlog_audio_play_element_' + indexOfBacklog} src={backlogItem.currentStageState.vocal} />
         </div>
@@ -198,13 +204,13 @@ export const Backlog = () => {
         // ${indexHide ? styles.Backlog_main_out_IndexHide : ''}
         <div
           className={`
-          ${GUIStore.showBacklog ? styles.Backlog_main : styles.Backlog_main_out}
-          ${indexHide ? styles.Backlog_main_out_IndexHide : ''}
+          ${GUIStore.showBacklog ? applyStyle('Backlog_main', styles.Backlog_main) : applyStyle('Backlog_main_out', styles.Backlog_main_out)}
+          ${indexHide ? applyStyle('Backlog_main_out_IndexHide', styles.Backlog_main_out_IndexHide) : ''}
           `}
         >
-          <div className={styles.backlog_top}>
+          <div className={applyStyle('backlog_top', styles.backlog_top)}>
             <CloseSmall
-              className={styles.backlog_top_icon}
+              className={applyStyle('backlog_top_icon', styles.backlog_top_icon)}
               onClick={() => {
                 playSeClick();
                 dispatch(setVisibility({ component: 'showBacklog', visibility: false }));
@@ -217,7 +223,7 @@ export const Backlog = () => {
               strokeWidth={3}
             />
             <div
-              className={styles.backlog_title}
+              className={applyStyle('backlog_title', styles.backlog_title)}
               onClick={() => {
                 logger.info('Rua! Testing');
               }}
@@ -226,7 +232,11 @@ export const Backlog = () => {
             </div>
           </div>
           {GUIStore.showBacklog && (
-            <div className={`${styles.backlog_content} ${isDisableScroll ? styles.Backlog_main_DisableScroll : ''}`}>
+            <div
+              className={`${applyStyle('backlog_content', styles.backlog_content)} ${
+                isDisableScroll ? applyStyle('Backlog_main_DisableScroll', styles.Backlog_main_DisableScroll) : ''
+              }`}
+            >
               {backlogList}
             </div>
           )}
diff --git a/packages/webgal/src/UI/BottomControlPanel/BottomControlPanel.tsx b/packages/webgal/src/UI/BottomControlPanel/BottomControlPanel.tsx
index d2df8848e..75798f25c 100644
--- a/packages/webgal/src/UI/BottomControlPanel/BottomControlPanel.tsx
+++ b/packages/webgal/src/UI/BottomControlPanel/BottomControlPanel.tsx
@@ -29,17 +29,22 @@ import {
   SettingTwo,
   Unlock,
 } from '@icon-park/react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import styles from './bottomControlPanel.module.scss';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 export const BottomControlPanel = () => {
   const t = useTrans('gaming.');
   const strokeWidth = 2.5;
   const { i18n } = useTranslation();
   const { playSeEnter, playSeClick, playSeDialogOpen } = useSoundEffect();
+  const applyStyle = useApplyStyle('bottomControlPanel');
   const lang = i18n.language;
   const isFr = lang === 'fr';
+  const [showFastSavePreview, setShowFastSavePreview] = useState(false);
+  const [showFastLoadPreview, setShowFastLoadPreview] = useState(false);
   let size = 42;
   let fontSize = '150%';
   if (isFr) {
@@ -66,11 +71,11 @@ export const BottomControlPanel = () => {
   if (saveData[0]) {
     const data = saveData[0];
     fastSlPreview = (
-      <div className={styles.slPreviewMain}>
-        <div className={styles.imgContainer}>
+      <div className={applyStyle('slPreviewMain', styles.slPreviewMain)}>
+        <div className={applyStyle('imgContainer', styles.imgContainer)}>
           <img style={{ height: '100%' }} alt="q-save-preview image" src={data.previewImage} />
         </div>
-        <div className={styles.textContainer}>
+        <div className={applyStyle('textContainer', styles.textContainer)}>
           <div>{easyCompile(data.nowStageState.showName)}</div>
           <div style={{ fontSize: '75%', color: 'rgb(55,60,56)' }}>{easyCompile(data.nowStageState.showText)}</div>
         </div>
@@ -82,10 +87,13 @@ export const BottomControlPanel = () => {
     // <div className={styles.ToCenter}>
     <>
       {GUIStore.showTextBox && stageState.enableFilm === '' && (
-        <div className={styles.main} style={{ visibility: GUIStore.controlsVisibility ? 'visible' : 'hidden' }}>
+        <div
+          className={applyStyle('main', styles.main)}
+          style={{ visibility: GUIStore.controlsVisibility ? 'visible' : 'hidden' }}
+        >
           {GUIStore.showTextBox && (
             <span
-              className={styles.singleButton}
+              className={applyStyle('singleButton', styles.singleButton)}
               style={{ fontSize }}
               onClick={() => {
                 setComponentVisibility('showTextBox', false);
@@ -94,18 +102,18 @@ export const BottomControlPanel = () => {
               onMouseEnter={playSeEnter}
             >
               <PreviewCloseOne
-                className={styles.button}
+                className={applyStyle('button', styles.button)}
                 theme="outline"
                 size={size}
                 fill="#f5f5f7"
                 strokeWidth={strokeWidth}
               />
-              <span className={styles.button_text}>{t('buttons.hide')}</span>
+              <span className={applyStyle('button_text', styles.button_text)}>{t('buttons.hide')}</span>
             </span>
           )}
           {!GUIStore.showTextBox && (
             <span
-              className={styles.singleButton}
+              className={applyStyle('singleButton', styles.singleButton)}
               style={{ fontSize }}
               onClick={() => {
                 setComponentVisibility('showTextBox', true);
@@ -114,17 +122,17 @@ export const BottomControlPanel = () => {
               onMouseEnter={playSeEnter}
             >
               <PreviewOpen
-                className={styles.button}
+                className={applyStyle('button', styles.button)}
                 theme="outline"
                 size={size}
                 fill="#f5f5f7"
                 strokeWidth={strokeWidth}
               />
-              <span className={styles.button_text}>{t('buttons.show')}</span>
+              <span className={applyStyle('button_text', styles.button_text)}>{t('buttons.show')}</span>
             </span>
           )}
           <span
-            className={styles.singleButton}
+            className={applyStyle('singleButton', styles.singleButton)}
             style={{ fontSize }}
             onClick={() => {
               setComponentVisibility('showBacklog', true);
@@ -134,16 +142,16 @@ export const BottomControlPanel = () => {
             onMouseEnter={playSeEnter}
           >
             <AlignTextLeftOne
-              className={styles.button}
+              className={applyStyle('button', styles.button)}
               theme="outline"
               size={size}
               fill="#f5f5f7"
               strokeWidth={strokeWidth}
             />
-            <span className={styles.button_text}>{t('buttons.backlog')}</span>
+            <span className={applyStyle('button_text', styles.button_text)}>{t('buttons.backlog')}</span>
           </span>
           <span
-            className={styles.singleButton}
+            className={applyStyle('singleButton', styles.singleButton)}
             style={{ fontSize }}
             onClick={() => {
               let VocalControl: any = document.getElementById('currentVocal');
@@ -157,17 +165,17 @@ export const BottomControlPanel = () => {
             onMouseEnter={playSeEnter}
           >
             <ReplayMusic
-              className={styles.button}
+              className={applyStyle('button', styles.button)}
               theme="outline"
               size={size}
               fill="#f5f5f7"
               strokeWidth={strokeWidth}
             />
-            <span className={styles.button_text}>{t('buttons.replay')}</span>
+            <span className={applyStyle('button_text', styles.button_text)}>{t('buttons.replay')}</span>
           </span>
           <span
             id="Button_ControlPanel_auto"
-            className={styles.singleButton}
+            className={applyStyle('singleButton', styles.singleButton)}
             style={{ fontSize }}
             onClick={() => {
               switchAuto();
@@ -175,12 +183,18 @@ export const BottomControlPanel = () => {
             }}
             onMouseEnter={playSeEnter}
           >
-            <PlayOne className={styles.button} theme="outline" size={size} fill="#f5f5f7" strokeWidth={strokeWidth} />
-            <span className={styles.button_text}>{t('buttons.auto')}</span>
+            <PlayOne
+              className={applyStyle('button', styles.button)}
+              theme="outline"
+              size={size}
+              fill="#f5f5f7"
+              strokeWidth={strokeWidth}
+            />
+            <span className={applyStyle('button_text', styles.button_text)}>{t('buttons.auto')}</span>
           </span>
           <span
             id="Button_ControlPanel_fast"
-            className={styles.singleButton}
+            className={applyStyle('singleButton', styles.singleButton)}
             style={{ fontSize }}
             onClick={() => {
               switchFast();
@@ -189,48 +203,78 @@ export const BottomControlPanel = () => {
             onMouseEnter={playSeEnter}
           >
             <DoubleRight
-              className={styles.button}
+              className={applyStyle('button', styles.button)}
               theme="outline"
               size={size}
               fill="#f5f5f7"
               strokeWidth={strokeWidth}
             />
-            <span className={styles.button_text}>{t('buttons.forward')}</span>
+            <span className={applyStyle('button_text', styles.button_text)}>{t('buttons.forward')}</span>
           </span>
           <span
-            className={styles.singleButton + ' ' + styles.fastsave}
+            className={`${applyStyle('singleButton', styles.singleButton)} ${applyStyle('fastsave', styles.fastsave)}`}
             style={{ fontSize }}
             onClick={() => {
               saveGame(0);
               playSeClick();
             }}
-            onMouseEnter={playSeEnter}
+            onMouseEnter={() => {
+              setShowFastSavePreview(true);
+              setShowFastLoadPreview(false);
+              playSeEnter();
+            }}
+            onMouseLeave={() => {
+              setShowFastSavePreview(false);
+            }}
           >
             <DoubleDown
-              className={styles.button}
+              className={applyStyle('button', styles.button)}
               theme="outline"
               size={size}
               fill="#f5f5f7"
               strokeWidth={strokeWidth}
             />
-            <span className={styles.button_text}>{t('buttons.quicklySave')}</span>
-            <div className={styles.fastSlPreview + ' ' + styles.fastSPreview}>{fastSlPreview}</div>
+            <span className={applyStyle('button_text', styles.button_text)}>{t('buttons.quicklySave')}</span>
+            <div
+              className={`${applyStyle('fastSlPreview', styles.fastSlPreview)} ${applyStyle('fastSPreview', styles.fastSPreview)}`}
+              style={showFastSavePreview ? undefined : { display: 'none' }}
+            >
+              {fastSlPreview}
+            </div>
           </span>
           <span
-            className={styles.singleButton + ' ' + styles.fastload}
+            className={`${applyStyle('singleButton', styles.singleButton)} ${applyStyle('fastload', styles.fastload)}`}
             style={{ fontSize }}
             onClick={() => {
               loadGame(0);
               playSeClick();
             }}
-            onMouseEnter={playSeEnter}
+            onMouseEnter={() => {
+              setShowFastLoadPreview(true);
+              setShowFastSavePreview(false);
+              playSeEnter();
+            }}
+            onMouseLeave={() => {
+              setShowFastLoadPreview(false);
+            }}
           >
-            <DoubleUp className={styles.button} theme="outline" size={size} fill="#f5f5f7" strokeWidth={strokeWidth} />
-            <span className={styles.button_text}>{t('buttons.quicklyLoad')}</span>
-            <div className={styles.fastSlPreview + ' ' + styles.fastLPreview}>{fastSlPreview}</div>
+            <DoubleUp
+              className={applyStyle('button', styles.button)}
+              theme="outline"
+              size={size}
+              fill="#f5f5f7"
+              strokeWidth={strokeWidth}
+            />
+            <span className={applyStyle('button_text', styles.button_text)}>{t('buttons.quicklyLoad')}</span>
+            <div
+              className={`${applyStyle('fastSlPreview', styles.fastSlPreview)} ${applyStyle('fastLPreview', styles.fastLPreview)}`}
+              style={showFastLoadPreview ? undefined : { display: 'none' }}
+            >
+              {fastSlPreview}
+            </div>
           </span>
           <span
-            className={styles.singleButton}
+            className={applyStyle('singleButton', styles.singleButton)}
             style={{ fontSize }}
             onClick={() => {
               setMenuPanel(MenuPanelTag.Save);
@@ -239,11 +283,17 @@ export const BottomControlPanel = () => {
             }}
             onMouseEnter={playSeEnter}
           >
-            <Save className={styles.button} theme="outline" size={size} fill="#f5f5f7" strokeWidth={strokeWidth} />
-            <span className={styles.button_text}>{t('buttons.save')}</span>
+            <Save
+              className={applyStyle('button', styles.button)}
+              theme="outline"
+              size={size}
+              fill="#f5f5f7"
+              strokeWidth={strokeWidth}
+            />
+            <span className={applyStyle('button_text', styles.button_text)}>{t('buttons.save')}</span>
           </span>
           <span
-            className={styles.singleButton}
+            className={applyStyle('singleButton', styles.singleButton)}
             style={{ fontSize }}
             onClick={() => {
               setMenuPanel(MenuPanelTag.Load);
@@ -253,16 +303,16 @@ export const BottomControlPanel = () => {
             onMouseEnter={playSeEnter}
           >
             <FolderOpen
-              className={styles.button}
+              className={applyStyle('button', styles.button)}
               theme="outline"
               size={size}
               fill="#f5f5f7"
               strokeWidth={strokeWidth}
             />
-            <span className={styles.button_text}>{t('buttons.load')}</span>
+            <span className={applyStyle('button_text', styles.button_text)}>{t('buttons.load')}</span>
           </span>
           <span
-            className={styles.singleButton}
+            className={applyStyle('singleButton', styles.singleButton)}
             style={{ fontSize }}
             onClick={() => {
               setMenuPanel(MenuPanelTag.Option);
@@ -272,16 +322,16 @@ export const BottomControlPanel = () => {
             onMouseEnter={playSeEnter}
           >
             <SettingTwo
-              className={styles.button}
+              className={applyStyle('button', styles.button)}
               theme="outline"
               size={size}
               fill="#f5f5f7"
               strokeWidth={strokeWidth}
             />
-            <span className={styles.button_text}>{t('buttons.options')}</span>
+            <span className={applyStyle('button_text', styles.button_text)}>{t('buttons.options')}</span>
           </span>
           <span
-            className={styles.singleButton}
+            className={applyStyle('singleButton', styles.singleButton)}
             style={{ fontSize }}
             onClick={() => {
               playSeDialogOpen();
@@ -297,19 +347,25 @@ export const BottomControlPanel = () => {
             }}
             onMouseEnter={playSeEnter}
           >
-            <Home className={styles.button} theme="outline" size={size} fill="#f5f5f7" strokeWidth={strokeWidth} />
-            <span className={styles.button_text}>{t('buttons.title')}</span>
+            <Home
+              className={applyStyle('button', styles.button)}
+              theme="outline"
+              size={size}
+              fill="#f5f5f7"
+              strokeWidth={strokeWidth}
+            />
+            <span className={applyStyle('button_text', styles.button_text)}>{t('buttons.title')}</span>
           </span>
           {isFullscreenSupport && (
             <span
-              className={`${styles.singleButton}`}
+              className={applyStyle('singleButton', styles.singleButton)}
               style={{ fontSize }}
               onClick={toggleFullscreen}
               onMouseEnter={playSeEnter}
             >
               {!isFullScreen && (
                 <FullScreen
-                  className={styles.button}
+                  className={applyStyle('button', styles.button)}
                   theme="outline"
                   size={size}
                   fill="#f5f5f7"
@@ -318,18 +374,18 @@ export const BottomControlPanel = () => {
               )}
               {isFullScreen && (
                 <OffScreen
-                  className={styles.button}
+                  className={applyStyle('button', styles.button)}
                   theme="outline"
                   size={size}
                   fill="#f5f5f7"
                   strokeWidth={strokeWidth}
                 />
               )}
-              <span className={styles.button_text}>{t('buttons.fullscreen')}</span>
+              <span className={applyStyle('button_text', styles.button_text)}>{t('buttons.fullscreen')}</span>
             </span>
           )}
           <span
-            className={styles.singleButton}
+            className={applyStyle('singleButton', styles.singleButton)}
             style={{ fontSize }}
             onClick={() => {
               switchControls();
@@ -338,9 +394,21 @@ export const BottomControlPanel = () => {
             onMouseEnter={playSeEnter}
           >
             {GUIStore.showControls ? (
-              <Lock className={styles.button} theme="outline" size={size} fill="#f5f5f7" strokeWidth={strokeWidth} />
+              <Lock
+                className={applyStyle('button', styles.button)}
+                theme="outline"
+                size={size}
+                fill="#f5f5f7"
+                strokeWidth={strokeWidth}
+              />
             ) : (
-              <Unlock className={styles.button} theme="outline" size={size} fill="#f5f5f7" strokeWidth={strokeWidth} />
+              <Unlock
+                className={applyStyle('button', styles.button)}
+                theme="outline"
+                size={size}
+                fill="#f5f5f7"
+                strokeWidth={strokeWidth}
+              />
             )}
           </span>
         </div>
diff --git a/packages/webgal/src/UI/BottomControlPanel/BottomControlPanelFilm.tsx b/packages/webgal/src/UI/BottomControlPanel/BottomControlPanelFilm.tsx
index b6ed7b2e4..444f7f2e1 100644
--- a/packages/webgal/src/UI/BottomControlPanel/BottomControlPanelFilm.tsx
+++ b/packages/webgal/src/UI/BottomControlPanel/BottomControlPanelFilm.tsx
@@ -8,10 +8,12 @@ import { componentsVisibility, MenuPanelTag } from '@/store/guiInterface';
 import { backToTitle } from '@/Core/controller/gamePlay/backToTitle';
 import { useValue } from '@/hooks/useValue';
 import { HamburgerButton } from '@icon-park/react';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 export const BottomControlPanelFilm = () => {
   const showPanel = useValue(false);
   const stageState = useSelector((state: RootState) => state.stage);
+  const applyStyle = useApplyStyle('bottomControlPanelFilm');
   const dispatch = useDispatch();
   const setComponentVisibility = (component: keyof componentsVisibility, visibility: boolean) => {
     dispatch(setVisibility({ component, visibility }));
@@ -24,7 +26,7 @@ export const BottomControlPanelFilm = () => {
       {stageState.enableFilm !== '' && (
         <>
           <div
-            className={styles.tag}
+            className={applyStyle('tag', styles.tag)}
             onClick={() => {
               showPanel.set(!showPanel.value);
             }}
@@ -32,19 +34,19 @@ export const BottomControlPanelFilm = () => {
             <HamburgerButton theme="outline" size="32" fill="#fff" />
           </div>
           {showPanel.value && (
-            <div className={styles.container}>
+            <div className={applyStyle('container', styles.container)}>
               <span
-                className={styles.singleButton}
+                className={applyStyle('singleButton', styles.singleButton)}
                 onClick={() => {
                   setComponentVisibility('showBacklog', true);
                   setComponentVisibility('showTextBox', false);
                   showPanel.set(!showPanel.value);
                 }}
               >
-                <span className={styles.button_text}>剧情回想 / BACKLOG</span>
+                <span className={applyStyle('button_text', styles.button_text)}>剧情回想 / BACKLOG</span>
               </span>
               <span
-                className={styles.singleButton}
+                className={applyStyle('singleButton', styles.singleButton)}
                 onClick={() => {
                   showPanel.set(!showPanel.value);
                   let VocalControl: any = document.getElementById('currentVocal');
@@ -55,66 +57,66 @@ export const BottomControlPanelFilm = () => {
                   }
                 }}
               >
-                <span className={styles.button_text}>重播语音 / REPLAY VOICE</span>
+                <span className={applyStyle('button_text', styles.button_text)}>重播语音 / REPLAY VOICE</span>
               </span>
               <span
                 id="Button_ControlPanel_auto"
-                className={styles.singleButton}
+                className={applyStyle('singleButton', styles.singleButton)}
                 onClick={() => {
                   switchAuto();
                   showPanel.set(!showPanel.value);
                 }}
               >
-                <span className={styles.button_text}>自动模式 / AUTO</span>
+                <span className={applyStyle('button_text', styles.button_text)}>自动模式 / AUTO</span>
               </span>
               <span
                 id="Button_ControlPanel_fast"
-                className={styles.singleButton}
+                className={applyStyle('singleButton', styles.singleButton)}
                 onClick={() => {
                   switchFast();
                   showPanel.set(!showPanel.value);
                 }}
               >
-                <span className={styles.button_text}>快进 / FAST</span>
+                <span className={applyStyle('button_text', styles.button_text)}>快进 / FAST</span>
               </span>
               <span
-                className={styles.singleButton}
+                className={applyStyle('singleButton', styles.singleButton)}
                 onClick={() => {
                   showPanel.set(!showPanel.value);
                   setMenuPanel(MenuPanelTag.Save);
                   setComponentVisibility('showMenuPanel', true);
                 }}
               >
-                <span className={styles.button_text}>存档 / SAVE</span>
+                <span className={applyStyle('button_text', styles.button_text)}>存档 / SAVE</span>
               </span>
               <span
-                className={styles.singleButton}
+                className={applyStyle('singleButton', styles.singleButton)}
                 onClick={() => {
                   showPanel.set(!showPanel.value);
                   setMenuPanel(MenuPanelTag.Load);
                   setComponentVisibility('showMenuPanel', true);
                 }}
               >
-                <span className={styles.button_text}>读档 / LOAD</span>
+                <span className={applyStyle('button_text', styles.button_text)}>读档 / LOAD</span>
               </span>
               <span
-                className={styles.singleButton}
+                className={applyStyle('singleButton', styles.singleButton)}
                 onClick={() => {
                   showPanel.set(!showPanel.value);
                   setMenuPanel(MenuPanelTag.Option);
                   setComponentVisibility('showMenuPanel', true);
                 }}
               >
-                <span className={styles.button_text}>选项 / OPTIONS</span>
+                <span className={applyStyle('button_text', styles.button_text)}>选项 / OPTIONS</span>
               </span>
               <span
-                className={styles.singleButton}
+                className={applyStyle('singleButton', styles.singleButton)}
                 onClick={() => {
                   showPanel.set(!showPanel.value);
                   backToTitle();
                 }}
               >
-                <span className={styles.button_text}>标题 / TITLE</span>
+                <span className={applyStyle('button_text', styles.button_text)}>标题 / TITLE</span>
               </span>
             </div>
           )}
diff --git a/packages/webgal/src/UI/DevPanel/DevPanel.tsx b/packages/webgal/src/UI/DevPanel/DevPanel.tsx
index 2fbb702a1..3520930ef 100644
--- a/packages/webgal/src/UI/DevPanel/DevPanel.tsx
+++ b/packages/webgal/src/UI/DevPanel/DevPanel.tsx
@@ -7,6 +7,7 @@ import { RootState } from '@/store/store';
 import { useTranslation } from 'react-i18next';
 
 import { WebGAL } from '@/Core/WebGAL';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 export default function DevPanel() {
   // 控制显隐
@@ -25,6 +26,7 @@ export default function DevPanel() {
   const isShow = isShowDevPanel();
 
   const { t, i18n } = useTranslation();
+  const applyStyle = useApplyStyle('devPanel');
 
   const devMainArea = (
     <>
@@ -38,7 +40,7 @@ export default function DevPanel() {
   return (
     <>
       {isShow && isOpenDevPanel.value && (
-        <div className={styles.devPanelMain}>
+        <div className={applyStyle('devPanelMain', styles.devPanelMain)}>
           <div style={{ display: 'flex', alignItems: 'center' }}>
             <div
               onClick={() => isOpenDevPanel.set(false)}
@@ -52,7 +54,7 @@ export default function DevPanel() {
         </div>
       )}
       {!isOpenDevPanel.value && isShow && (
-        <div onClick={() => isOpenDevPanel.set(true)} className={styles.devPanelOpener}>
+        <div onClick={() => isOpenDevPanel.set(true)} className={applyStyle('devPanelOpener', styles.devPanelOpener)}>
           Open Dev Panel
         </div>
       )}
diff --git a/packages/webgal/src/UI/Extra/Extra.tsx b/packages/webgal/src/UI/Extra/Extra.tsx
index 8a544eb3b..2f384293a 100644
--- a/packages/webgal/src/UI/Extra/Extra.tsx
+++ b/packages/webgal/src/UI/Extra/Extra.tsx
@@ -7,20 +7,22 @@ import { ExtraBgm } from '@/UI/Extra/ExtraBgm';
 import { ExtraCg } from './ExtraCg';
 import useTrans from '@/hooks/useTrans';
 import useSoundEffect from '@/hooks/useSoundEffect';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 export function Extra() {
   const { playSeClick } = useSoundEffect();
   const showExtra = useSelector((state: RootState) => state.GUI.showExtra);
   const dispatch = useDispatch();
+  const applyStyle = useApplyStyle('extra');
 
   const t = useTrans('extra.');
   return (
     <>
       {showExtra && (
-        <div className={styles.extra}>
-          <div className={styles.extra_top}>
+        <div className={applyStyle('extra', styles.extra)}>
+          <div className={applyStyle('extra_top', styles.extra_top)}>
             <CloseSmall
-              className={styles.extra_top_icon}
+              className={applyStyle('extra_top_icon', styles.extra_top_icon)}
               onClick={() => {
                 dispatch(setVisibility({ component: 'showExtra', visibility: false }));
                 playSeClick();
@@ -31,9 +33,9 @@ export function Extra() {
               fill="#fff"
               strokeWidth={3}
             />
-            <div className={styles.extra_title}>{t('title')}</div>
+            <div className={applyStyle('extra_title', styles.extra_title)}>{t('title')}</div>
           </div>
-          <div className={styles.mainContainer}>
+          <div className={applyStyle('mainContainer', styles.mainContainer)}>
             <ExtraCg />
             <ExtraBgm />
           </div>
diff --git a/packages/webgal/src/UI/Extra/ExtraBgm.tsx b/packages/webgal/src/UI/Extra/ExtraBgm.tsx
index 7c9bba9b2..8afb28f10 100644
--- a/packages/webgal/src/UI/Extra/ExtraBgm.tsx
+++ b/packages/webgal/src/UI/Extra/ExtraBgm.tsx
@@ -7,9 +7,11 @@ import { setStage } from '@/store/stageReducer';
 import { GoEnd, GoStart, MusicList, PlayOne, SquareSmall } from '@icon-park/react';
 import useSoundEffect from '@/hooks/useSoundEffect';
 import { setGuiAsset } from '@/store/GUIReducer';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 export function ExtraBgm() {
   const { playSeClick, playSeEnter } = useSoundEffect();
+  const applyStyle = useApplyStyle('extra');
   // 检查当前正在播放的bgm是否在bgm列表内
   const currentBgmSrc = useSelector((state: RootState) => state.GUI.titleBgm);
   const extraState = useSelector((state: RootState) => state.userData.appreciationData);
@@ -40,9 +42,9 @@ export function ExtraBgm() {
   }
 
   const showBgmList = extraState.bgm.map((e, i) => {
-    let className = styles.bgmElement;
+    let className = applyStyle('bgmElement', styles.bgmElement);
     if (e.name === currentPlayingBgmName.value) {
-      className = className + ' ' + styles.bgmElement_active;
+      className = className + ' ' + applyStyle('bgmElement_active', styles.bgmElement_active);
     }
     return (
       <div
@@ -69,8 +71,8 @@ export function ExtraBgm() {
   }
 
   return (
-    <div className={styles.bgmContainer} style={{ maxHeight: bgmPlayerHeight }}>
-      <div className={styles.bgmPlayerMain}>
+    <div className={applyStyle('bgmContainer', styles.bgmContainer)} style={{ maxHeight: bgmPlayerHeight }}>
+      <div className={applyStyle('bgmPlayerMain', styles.bgmPlayerMain)}>
         <div
           onClick={() => {
             playSeClick();
@@ -81,7 +83,7 @@ export function ExtraBgm() {
             }
           }}
           onMouseEnter={playSeEnter}
-          className={styles.bgmControlButton}
+          className={applyStyle('bgmControlButton', styles.bgmControlButton)}
         >
           <GoStart theme="filled" size={iconSize} fill="#fff" strokeWidth={3} strokeLinejoin="miter" />
         </div>
@@ -92,7 +94,7 @@ export function ExtraBgm() {
             bgmControl?.play().then();
           }}
           onMouseEnter={playSeEnter}
-          className={styles.bgmControlButton}
+          className={applyStyle('bgmControlButton', styles.bgmControlButton)}
         >
           <PlayOne theme="filled" size={iconSize} fill="#fff" strokeWidth={3} strokeLinejoin="miter" />
         </div>
@@ -106,7 +108,7 @@ export function ExtraBgm() {
             }
           }}
           onMouseEnter={playSeEnter}
-          className={styles.bgmControlButton}
+          className={applyStyle('bgmControlButton', styles.bgmControlButton)}
         >
           <GoEnd theme="filled" size={iconSize} fill="#fff" strokeWidth={3} strokeLinejoin="miter" />
         </div>
@@ -117,24 +119,26 @@ export function ExtraBgm() {
             bgmControl.pause();
           }}
           onMouseEnter={playSeEnter}
-          className={styles.bgmControlButton}
+          className={applyStyle('bgmControlButton', styles.bgmControlButton)}
         >
           <SquareSmall theme="filled" size={iconSize} fill="#fff" strokeWidth={3} strokeLinejoin="miter" />
         </div>
-        <div className={styles.bgmName}>{foundCurrentBgmName}</div>
+        <div className={applyStyle('bgmName', styles.bgmName)}>{foundCurrentBgmName}</div>
         <div
           onClick={() => {
             playSeClick();
             isShowBgmList.set(!isShowBgmList.value);
           }}
           onMouseEnter={playSeEnter}
-          className={styles.bgmControlButton}
+          className={applyStyle('bgmControlButton', styles.bgmControlButton)}
           style={{ marginLeft: 'auto' }}
         >
           <MusicList theme="filled" size={iconSize} fill="#fff" strokeWidth={3} strokeLinejoin="miter" />
         </div>
       </div>
-      {isShowBgmList.value && <div className={styles.bgmListContainer}> {showBgmList}</div>}
+      {isShowBgmList.value && (
+        <div className={applyStyle('bgmListContainer', styles.bgmListContainer)}> {showBgmList}</div>
+      )}
     </div>
   );
 }
diff --git a/packages/webgal/src/UI/Extra/ExtraCg.tsx b/packages/webgal/src/UI/Extra/ExtraCg.tsx
index 8f610ebc7..13966ad7d 100644
--- a/packages/webgal/src/UI/Extra/ExtraCg.tsx
+++ b/packages/webgal/src/UI/Extra/ExtraCg.tsx
@@ -6,6 +6,7 @@ import { useValue } from '@/hooks/useValue';
 import './extraCG_animation_List.scss';
 import { ExtraCgElement } from '@/UI/Extra/ExtraCgElement';
 import useSoundEffect from '@/hooks/useSoundEffect';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 export function ExtraCg() {
   const cgPerPage = 8;
@@ -14,6 +15,7 @@ export function ExtraCg() {
   // const pageNumber = 10;
   const currentPage = useValue(1);
   const { playSeEnter, playSeClick } = useSoundEffect();
+  const applyStyle = useApplyStyle('extra');
 
   // 开始生成立绘鉴赏的图片
   const showCgList = [];
@@ -40,9 +42,9 @@ export function ExtraCg() {
   // 生成cg鉴赏的导航
   const showNav = [];
   for (let i = 1; i <= pageNumber; i++) {
-    let className = styles.cgNav;
+    let className = applyStyle('cgNav', styles.cgNav);
     if (currentPage.value === i) {
-      className = className + ' ' + styles.cgNav_active;
+      className = className + ' ' + applyStyle('cgNav_active', styles.cgNav_active);
     }
     const temp = (
       <div
@@ -61,11 +63,11 @@ export function ExtraCg() {
   }
 
   return (
-    <div className={styles.cgMain}>
-      <div className={styles.cgShowDiv}>
-        <div className={styles.cgShowDivWarpper}>{showNav}</div>
+    <div className={applyStyle('cgMain', styles.cgMain)}>
+      <div className={applyStyle('cgShowDiv', styles.cgShowDiv)}>
+        <div className={applyStyle('cgShowDivWarpper', styles.cgShowDivWarpper)}>{showNav}</div>
       </div>
-      <div className={styles.cgContainer}>{showCgList}</div>
+      <div className={applyStyle('cgContainer', styles.cgContainer)}>{showCgList}</div>
     </div>
   );
 }
diff --git a/packages/webgal/src/UI/Extra/ExtraCgElement.tsx b/packages/webgal/src/UI/Extra/ExtraCgElement.tsx
index 63a36287c..17751aacd 100644
--- a/packages/webgal/src/UI/Extra/ExtraCgElement.tsx
+++ b/packages/webgal/src/UI/Extra/ExtraCgElement.tsx
@@ -2,6 +2,7 @@ import { useValue } from '@/hooks/useValue';
 import styles from '@/UI/Extra/extra.module.scss';
 import React, { useMemo } from 'react';
 import useSoundEffect from '@/hooks/useSoundEffect';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 interface IProps {
   name: string;
@@ -13,6 +14,7 @@ interface IProps {
 export function ExtraCgElement(props: IProps) {
   const showFull = useValue(false);
   const { playSeEnter, playSeClick } = useSoundEffect();
+  const applyStyle = useApplyStyle('extra');
 
   // Determine if the resource is a video based on file extension
   const isVideo = useMemo(() => {
@@ -79,10 +81,10 @@ export function ExtraCgElement(props: IProps) {
             showFull.set(!showFull.value);
             playSeClick();
           }}
-          className={styles.showFullContainer}
+          className={applyStyle('showFullContainer', styles.showFullContainer)}
           onMouseEnter={playSeEnter}
         >
-          <div className={styles.showFullCgMain}>{renderMedia(true)}</div>
+          <div className={applyStyle('showFullCgMain', styles.showFullCgMain)}>{renderMedia(true)}</div>
         </div>
       )}
       <div
@@ -95,7 +97,7 @@ export function ExtraCgElement(props: IProps) {
           animation: `cg_softIn_${props.transformDeg} 1.5s ease-out ${100 + props.index * 100}ms forwards`,
         }}
         key={props.name}
-        className={styles.cgElement}
+        className={applyStyle('cgElement', styles.cgElement)}
       >
         {renderMedia(false)}
       </div>
diff --git a/packages/webgal/src/UI/GlobalDialog/GlobalDialog.tsx b/packages/webgal/src/UI/GlobalDialog/GlobalDialog.tsx
index baaf12ac7..931b5b125 100644
--- a/packages/webgal/src/UI/GlobalDialog/GlobalDialog.tsx
+++ b/packages/webgal/src/UI/GlobalDialog/GlobalDialog.tsx
@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 import { RootState, webgalStore } from '@/store/store';
 import { setVisibility } from '@/store/GUIReducer';
 import { useSEByWebgalStore } from '@/hooks/useSoundEffect';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 export default function GlobalDialog() {
   const isGlobalDialogShow = useSelector((state: RootState) => state.GUI.showGlobalDialog);
@@ -18,8 +19,38 @@ interface IShowGlobalDialogProps {
   rightFunc: Function;
 }
 
+interface IGlobalDialogContentProps {
+  title: string;
+  leftText: string;
+  rightText: string;
+  onLeft: () => void;
+  onRight: () => void;
+}
+
+function GlobalDialogContent(props: IGlobalDialogContentProps) {
+  const applyStyle = useApplyStyle('globalDialog');
+  const { playSeEnter } = useSEByWebgalStore();
+  return (
+    <div className={applyStyle('GlobalDialog_main', styles.GlobalDialog_main)}>
+      <div className={applyStyle('glabalDialog_container', styles.glabalDialog_container)}>
+        <div className={applyStyle('glabalDialog_container_inner', styles.glabalDialog_container_inner)}>
+          <div className={applyStyle('title', styles.title)}>{props.title}</div>
+          <div className={applyStyle('button_list', styles.button_list)}>
+            <div className={applyStyle('button', styles.button)} onClick={props.onLeft} onMouseEnter={playSeEnter}>
+              {props.leftText}
+            </div>
+            <div className={applyStyle('button', styles.button)} onClick={props.onRight} onMouseEnter={playSeEnter}>
+              {props.rightText}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function showGlogalDialog(props: IShowGlobalDialogProps) {
-  const { playSeClick, playSeEnter } = useSEByWebgalStore();
+  const { playSeClick } = useSEByWebgalStore();
   webgalStore.dispatch(setVisibility({ component: 'showGlobalDialog', visibility: true }));
   const handleLeft = () => {
     playSeClick();
@@ -32,21 +63,13 @@ export function showGlogalDialog(props: IShowGlobalDialogProps) {
     hideGlobalDialog();
   };
   const renderElement = (
-    <div className={styles.GlobalDialog_main}>
-      <div className={styles.glabalDialog_container}>
-        <div className={styles.glabalDialog_container_inner}>
-          <div className={styles.title}>{props.title}</div>
-          <div className={styles.button_list}>
-            <div className={styles.button} onClick={handleLeft} onMouseEnter={playSeEnter}>
-              {props.leftText}
-            </div>
-            <div className={styles.button} onClick={handleRight} onMouseEnter={playSeEnter}>
-              {props.rightText}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <GlobalDialogContent
+      title={props.title}
+      leftText={props.leftText}
+      rightText={props.rightText}
+      onLeft={handleLeft}
+      onRight={handleRight}
+    />
   );
   setTimeout(() => {
     // eslint-disable-next-line react/no-deprecated
diff --git a/packages/webgal/src/UI/Logo/Logo.tsx b/packages/webgal/src/UI/Logo/Logo.tsx
index a1b3eb6b8..c8f13bba8 100644
--- a/packages/webgal/src/UI/Logo/Logo.tsx
+++ b/packages/webgal/src/UI/Logo/Logo.tsx
@@ -3,6 +3,7 @@ import styles from './logo.module.scss';
 import { useSelector } from 'react-redux';
 import { RootState } from '@/store/store';
 import { useValue } from '@/hooks/useValue';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 /**
  * 标识
@@ -12,6 +13,7 @@ const Logo: FC = () => {
   const GUIState = useSelector((state: RootState) => state.GUI);
   const logoImage = GUIState.logoImage;
   const isEnterGame = GUIState.isEnterGame;
+  const applyStyle = useApplyStyle('logo');
   const currentLogoIndex = useValue(-1);
   const currentTimeOutId = useValue<any>(-1);
   const animationDuration = 5000;
@@ -43,7 +45,11 @@ const Logo: FC = () => {
         <div
           key={currentLogoIndex.value + 'wh'}
           className={
-            styles.Logo_Back + ' ' + (currentLogoIndex.value === logoImage.length - 1 ? styles.animationActive : '')
+            applyStyle('Logo_Back', styles.Logo_Back) +
+            ' ' +
+            (currentLogoIndex.value === logoImage.length - 1
+              ? applyStyle('animationActive', styles.animationActive)
+              : '')
           }
           style={{
             animationDuration: `${animationDuration}ms`,
@@ -52,7 +58,7 @@ const Logo: FC = () => {
       )}
       {currentLogoUrl !== '' && (
         <div
-          className={styles.Logo_main}
+          className={applyStyle('Logo_main', styles.Logo_main)}
           key={currentLogoIndex.value + 'bg'}
           onClick={nextImg}
           style={{ backgroundImage: `url("${currentLogoUrl}")`, animationDuration: `${animationDuration}ms` }}
diff --git a/packages/webgal/src/UI/Menu/Menu.tsx b/packages/webgal/src/UI/Menu/Menu.tsx
index 70e329f54..9ed9e4d10 100644
--- a/packages/webgal/src/UI/Menu/Menu.tsx
+++ b/packages/webgal/src/UI/Menu/Menu.tsx
@@ -7,6 +7,7 @@ import { Options } from './Options/Options';
 import { useSelector } from 'react-redux';
 import { RootState } from '@/store/store';
 import { MenuPanelTag } from '@/store/guiInterface';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 /**
  * Menu 页面，包括存读档、选项等
@@ -14,6 +15,7 @@ import { MenuPanelTag } from '@/store/guiInterface';
  */
 const Menu: FC = () => {
   const GUIState = useSelector((state: RootState) => state.GUI);
+  const applyStyle = useApplyStyle('menu');
   let currentTag;
   // let menuBgColor = 'linear-gradient(135deg, rgba(253,251,251,0.95) 0%, rgba(235,237,238,1) 100%)';
   switch (GUIState.currentMenuTag) {
@@ -33,8 +35,8 @@ const Menu: FC = () => {
   return (
     <>
       {GUIState.showMenuPanel && (
-        <div className={styles.Menu_main}>
-          <div className={styles.Menu_TagContent}>{currentTag}</div>
+        <div className={applyStyle('Menu_main', styles.Menu_main)}>
+          <div className={applyStyle('Menu_TagContent', styles.Menu_TagContent)}>{currentTag}</div>
           <MenuPanel />
         </div>
       )}
diff --git a/packages/webgal/src/UI/Menu/MenuPanel/MenuPanel.tsx b/packages/webgal/src/UI/Menu/MenuPanel/MenuPanel.tsx
index 85e1100d6..34ae1feb8 100644
--- a/packages/webgal/src/UI/Menu/MenuPanel/MenuPanel.tsx
+++ b/packages/webgal/src/UI/Menu/MenuPanel/MenuPanel.tsx
@@ -9,6 +9,7 @@ import { backToTitle } from '@/Core/controller/gamePlay/backToTitle';
 import useTrans from '@/hooks/useTrans';
 import useSoundEffect from '@/hooks/useSoundEffect';
 import { showGlogalDialog } from '@/UI/GlobalDialog/GlobalDialog';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 /**
  * Menu页的底栏
@@ -19,12 +20,22 @@ export const MenuPanel = () => {
   const t = useTrans('menu.');
 
   const { playSeClick, playSeDialogOpen, playSePageChange } = useSoundEffect();
+  const applyStyle = useApplyStyle('menuPanel');
   const GUIState = useSelector((state: RootState) => state.GUI);
   const dispatch = useDispatch();
   // 设置Menu按钮的高亮
-  const SaveTagOn = GUIState.currentMenuTag === MenuPanelTag.Save ? ` ${styles.MenuPanel_button_hl}` : ``;
-  const LoadTagOn = GUIState.currentMenuTag === MenuPanelTag.Load ? ` ${styles.MenuPanel_button_hl}` : ``;
-  const OptionTagOn = GUIState.currentMenuTag === MenuPanelTag.Option ? ` ${styles.MenuPanel_button_hl}` : ``;
+  const SaveTagOn =
+    GUIState.currentMenuTag === MenuPanelTag.Save
+      ? ` ${applyStyle('MenuPanel_button_hl', styles.MenuPanel_button_hl)}`
+      : ``;
+  const LoadTagOn =
+    GUIState.currentMenuTag === MenuPanelTag.Load
+      ? ` ${applyStyle('MenuPanel_button_hl', styles.MenuPanel_button_hl)}`
+      : ``;
+  const OptionTagOn =
+    GUIState.currentMenuTag === MenuPanelTag.Option
+      ? ` ${applyStyle('MenuPanel_button_hl', styles.MenuPanel_button_hl)}`
+      : ``;
 
   // 设置Menu按钮的颜色
   const SaveTagColor = GUIState.currentMenuTag === MenuPanelTag.Save ? `rgba(74, 34, 93, 0.9)` : `rgba(123,144,169,1)`;
@@ -40,7 +51,7 @@ export const MenuPanel = () => {
     GUIState.currentMenuTag === MenuPanelTag.Option ? `rgba(81, 110, 65, 0.9)` : `rgba(123,144,169,1)`;
 
   return (
-    <div className={styles.MenuPanel_main}>
+    <div className={applyStyle('MenuPanel_main', styles.MenuPanel_main)}>
       <MenuPanelButton
         iconName="save"
         buttonOnClassName={SaveTagOn}
diff --git a/packages/webgal/src/UI/Menu/MenuPanel/MenuPanelButton.tsx b/packages/webgal/src/UI/Menu/MenuPanel/MenuPanelButton.tsx
index a8d47c11c..54ef6dfe0 100644
--- a/packages/webgal/src/UI/Menu/MenuPanel/MenuPanelButton.tsx
+++ b/packages/webgal/src/UI/Menu/MenuPanel/MenuPanelButton.tsx
@@ -2,6 +2,7 @@ import styles from './menuPanel.module.scss';
 import { MenuIconMap } from './MenuIconMap';
 import { IMenuPanel } from '@/UI/Menu/MenuPanel/menuPanelInterface';
 import useSoundEffect from '@/hooks/useSoundEffect';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 /**
  * 菜单标签页切换按钮
@@ -10,7 +11,8 @@ import useSoundEffect from '@/hooks/useSoundEffect';
  */
 export const MenuPanelButton = (props: IMenuPanel) => {
   const { playSePageChange, playSeEnter } = useSoundEffect();
-  let buttonClassName = styles.MenuPanel_button;
+  const applyStyle = useApplyStyle('menuPanel');
+  let buttonClassName = applyStyle('MenuPanel_button', styles.MenuPanel_button);
   if (props.hasOwnProperty('buttonOnClassName')) {
     buttonClassName = buttonClassName + props.buttonOnClassName;
   }
@@ -24,7 +26,7 @@ export const MenuPanelButton = (props: IMenuPanel) => {
       onMouseEnter={playSeEnter}
       style={{ ...props.style, color: props.tagColor }}
     >
-      <div className={styles.MenuPanel_button_icon}>
+      <div className={applyStyle('MenuPanel_button_icon', styles.MenuPanel_button_icon)}>
         <MenuIconMap iconName={props.iconName} iconColor={props.iconColor} />
       </div>
       {props.tagName}
diff --git a/packages/webgal/src/UI/Menu/Options/Display/Display.tsx b/packages/webgal/src/UI/Menu/Options/Display/Display.tsx
index c11314c29..8c415ee41 100644
--- a/packages/webgal/src/UI/Menu/Options/Display/Display.tsx
+++ b/packages/webgal/src/UI/Menu/Options/Display/Display.tsx
@@ -10,8 +10,10 @@ import { textSize } from '@/store/userDataInterface';
 import { setOptionData } from '@/store/userDataReducer';
 import { useDispatch, useSelector } from 'react-redux';
 import { OptionSlider } from '../OptionSlider';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 export function Display() {
+  const applyStyle = useApplyStyle('menuOptions');
   const userDataState = useSelector((state: RootState) => state.userData);
   const dispatch = useDispatch();
   const t = useTrans('menu.options.pages.display.options.');
@@ -27,7 +29,7 @@ export function Display() {
     : 0;
 
   return (
-    <div className={styles.Options_main_content_half}>
+    <div className={applyStyle('Options_main_content_half', styles.Options_main_content_half)}>
       {isFullscreenSupported && (
         <NormalOption key="fullScreen" title={t('fullScreen.title')}>
           <NormalButton
diff --git a/packages/webgal/src/UI/Menu/Options/NormalButton.tsx b/packages/webgal/src/UI/Menu/Options/NormalButton.tsx
index 9a3e313c0..5f7186a43 100644
--- a/packages/webgal/src/UI/Menu/Options/NormalButton.tsx
+++ b/packages/webgal/src/UI/Menu/Options/NormalButton.tsx
@@ -2,17 +2,19 @@ import { ReactElement } from 'react';
 import { INormalButton } from '@/UI/Menu/Options/OptionInterface';
 import styles from './normalButton.module.scss';
 import useSoundEffect from '@/hooks/useSoundEffect';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 export const NormalButton = (props: INormalButton) => {
   const len: number = props.textList.length;
   const buttonList: Array<ReactElement> = [];
   const { playSeEnter, playSeSwitch } = useSoundEffect();
+  const applyStyle = useApplyStyle('menuNormalButton');
   for (let i = 0; i < len; i++) {
     if (i === props.currentChecked) {
       const t = (
         <div
           key={props.textList[i] + i + props}
-          className={styles.NormalButton + ' ' + styles.NormalButtonChecked}
+          className={`${applyStyle('NormalButton', styles.NormalButton)} ${applyStyle('NormalButtonChecked', styles.NormalButtonChecked)}`}
           onClick={() => {
             playSeSwitch();
             props.functionList[i]();
@@ -27,7 +29,7 @@ export const NormalButton = (props: INormalButton) => {
       const t = (
         <div
           key={props.textList[i] + i}
-          className={styles.NormalButton}
+          className={applyStyle('NormalButton', styles.NormalButton)}
           onClick={() => {
             playSeSwitch();
             props.functionList[i]();
diff --git a/packages/webgal/src/UI/Menu/Options/NormalOption.tsx b/packages/webgal/src/UI/Menu/Options/NormalOption.tsx
index 02cad9823..e4f9d1eee 100644
--- a/packages/webgal/src/UI/Menu/Options/NormalOption.tsx
+++ b/packages/webgal/src/UI/Menu/Options/NormalOption.tsx
@@ -1,13 +1,15 @@
 import styles from './normalOption.module.scss';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 export const NormalOption = (props: any) => {
+  const applyStyle = useApplyStyle('menuNormalOption');
   return (
-    <div className={styles.NormalOption} style={{ width: props.full ? '100%' : 'auto' }}>
+    <div className={applyStyle('NormalOption', styles.NormalOption)} style={{ width: props.full ? '100%' : 'auto' }}>
       {/* <div className={styles.NormalOption_title_sd}>{props.title}</div> */}
       {/* <div className={styles.NormalOption_title_bef}>{props.title}</div> */}
-      <div className={styles.NormalOption_title}>{props.title}</div>
+      <div className={applyStyle('NormalOption_title', styles.NormalOption_title)}>{props.title}</div>
       <div
-        className={styles.NormalOption_buttonList}
+        className={applyStyle('NormalOption_buttonList', styles.NormalOption_buttonList)}
         style={{ width: props.full ? '100%' : 'auto', overflow: props.full ? 'hidden' : undefined }}
       >
         {props.children}
diff --git a/packages/webgal/src/UI/Menu/Options/OptionSlider.tsx b/packages/webgal/src/UI/Menu/Options/OptionSlider.tsx
index 17a05235f..8c26a5106 100644
--- a/packages/webgal/src/UI/Menu/Options/OptionSlider.tsx
+++ b/packages/webgal/src/UI/Menu/Options/OptionSlider.tsx
@@ -2,9 +2,11 @@ import './slider.css';
 import { ISlider } from '@/UI/Menu/Options/OptionInterface';
 import { useEffect, useState, useRef } from 'react';
 import useSoundEffect from '@/hooks/useSoundEffect';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 export const OptionSlider = (props: ISlider) => {
   const { playSeEnter } = useSoundEffect();
+  const applyStyle = useApplyStyle('menuSlider');
   const [currentValue, setCurrentValue] = useState(props.initValue);
   const [isHovered, setIsHovered] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
@@ -32,7 +34,7 @@ export const OptionSlider = (props: ISlider) => {
   };
 
   return (
-    <div className="Option_WebGAL_slider">
+    <div className={applyStyle('Option_WebGAL_slider', 'Option_WebGAL_slider')}>
       <input
         id={props.uniqueID}
         ref={inputRef}
@@ -61,7 +63,7 @@ export const OptionSlider = (props: ISlider) => {
       />
       {(isHovered || isDragging) && (
         <div
-          className="bubble"
+          className={applyStyle('bubble', 'bubble')}
           style={{
             left: `${calculateBubblePosition()}px`,
           }}
diff --git a/packages/webgal/src/UI/Menu/Options/Options.tsx b/packages/webgal/src/UI/Menu/Options/Options.tsx
index f2db09af3..c537bddc8 100644
--- a/packages/webgal/src/UI/Menu/Options/Options.tsx
+++ b/packages/webgal/src/UI/Menu/Options/Options.tsx
@@ -7,6 +7,7 @@ import { Display } from '@/UI/Menu/Options/Display/Display';
 import { Sound } from '@/UI/Menu/Options/Sound/Sound';
 import useTrans from '@/hooks/useTrans';
 import useSoundEffect from '@/hooks/useSoundEffect';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 enum optionPage {
   'System',
@@ -16,26 +17,29 @@ enum optionPage {
 
 export const Options: FC = () => {
   const { playSeEnter, playSeSwitch } = useSoundEffect();
+  const applyStyle = useApplyStyle('menuOptions');
   const currentOptionPage = useValue(optionPage.System);
   useEffect(getStorage, []);
 
   function getClassName(page: optionPage) {
+    const baseClass = applyStyle('Options_page_button', styles.Options_page_button);
     if (page === currentOptionPage.value) {
-      return styles.Options_page_button + ' ' + styles.Options_page_button_active;
-    } else return styles.Options_page_button;
+      return `${baseClass} ${applyStyle('Options_page_button_active', styles.Options_page_button_active)}`;
+    }
+    return baseClass;
   }
 
   const t = useTrans('menu.options.');
 
   return (
-    <div className={styles.Options_main}>
-      <div className={styles.Options_top}>
-        <div className={styles.Options_title}>
-          <div className={styles.Option_title_text}>{t('title')}</div>
+    <div className={applyStyle('Options_main', styles.Options_main)}>
+      <div className={applyStyle('Options_top', styles.Options_top)}>
+        <div className={applyStyle('Options_title', styles.Options_title)}>
+          <div className={applyStyle('Option_title_text', styles.Option_title_text)}>{t('title')}</div>
         </div>
       </div>
-      <div className={styles.Options_page_container}>
-        <div className={styles.Options_button_list}>
+      <div className={applyStyle('Options_page_container', styles.Options_page_container)}>
+        <div className={applyStyle('Options_button_list', styles.Options_button_list)}>
           <div
             onClick={() => {
               currentOptionPage.set(optionPage.System);
@@ -67,7 +71,7 @@ export const Options: FC = () => {
             {t('pages.sound.title')}
           </div>
         </div>
-        <div className={styles.Options_main_content}>
+        <div className={applyStyle('Options_main_content', styles.Options_main_content)}>
           {currentOptionPage.value === optionPage.Display && <Display />}
           {currentOptionPage.value === optionPage.System && <System />}
           {currentOptionPage.value === optionPage.Sound && <Sound />}
diff --git a/packages/webgal/src/UI/Menu/Options/Sound/Sound.tsx b/packages/webgal/src/UI/Menu/Options/Sound/Sound.tsx
index 99f2898a8..8705a515a 100644
--- a/packages/webgal/src/UI/Menu/Options/Sound/Sound.tsx
+++ b/packages/webgal/src/UI/Menu/Options/Sound/Sound.tsx
@@ -8,14 +8,16 @@ import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '@/store/store';
 import useTrans from '@/hooks/useTrans';
 import { voiceOption } from '@/store/userDataInterface';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 export function Sound() {
+  const applyStyle = useApplyStyle('menuOptions');
   const userDataState = useSelector((state: RootState) => state.userData);
   const dispatch = useDispatch();
   const t = useTrans('menu.options.pages.sound.options.');
 
   return (
-    <div className={styles.Options_main_content_half}>
+    <div className={applyStyle('Options_main_content_half', styles.Options_main_content_half)}>
       <NormalOption key="option4" title={t('volumeMain.title')}>
         <OptionSlider
           initValue={userDataState.optionData.volumeMain}
diff --git a/packages/webgal/src/UI/Menu/Options/System/About.tsx b/packages/webgal/src/UI/Menu/Options/System/About.tsx
index f0c2fc5bf..519dca91d 100644
--- a/packages/webgal/src/UI/Menu/Options/System/About.tsx
+++ b/packages/webgal/src/UI/Menu/Options/System/About.tsx
@@ -2,31 +2,33 @@ import useTrans from '@/hooks/useTrans';
 import { Left } from '@icon-park/react';
 import s from './about.module.scss';
 import { __INFO } from '@/config/info';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 export default function About(props: { onClose: () => void }) {
   const t = useTrans('menu.options.pages.system.options.about.');
+  const applyStyle = useApplyStyle('menuAbout');
   return (
-    <div className={s.about}>
-      <div className={s.backButton} onClick={props.onClose}>
-        <Left className={s.icon} theme="outline" size="35" strokeWidth={3} fill="#333" />
+    <div className={applyStyle('about', s.about)}>
+      <div className={applyStyle('backButton', s.backButton)} onClick={props.onClose}>
+        <Left className={applyStyle('icon', s.icon)} theme="outline" size="35" strokeWidth={3} fill="#333" />
       </div>
-      <div className={s.title}>{t('subTitle')}</div>
-      <div className={s.title}>{t('version')}</div>
-      <div className={s.text}>{__INFO.version}</div>
-      <div className={s.title}>{t('source')}</div>
-      <div className={s.text}>
+      <div className={applyStyle('title', s.title)}>{t('subTitle')}</div>
+      <div className={applyStyle('title', s.title)}>{t('version')}</div>
+      <div className={applyStyle('text', s.text)}>{__INFO.version}</div>
+      <div className={applyStyle('title', s.title)}>{t('source')}</div>
+      <div className={applyStyle('text', s.text)}>
         <a target="_blank" href="https://github.com/OpenWebGAL/WebGAL">
           https://github.com/OpenWebGAL/WebGAL
         </a>
       </div>
-      <div className={s.title}>{t('contributors')}</div>
-      <div className={s.text}>
+      <div className={applyStyle('title', s.title)}>{t('contributors')}</div>
+      <div className={applyStyle('text', s.text)}>
         <a target="_blank" href="https://github.com/OpenWebGAL/WebGAL/graphs/contributors">
           https://github.com/OpenWebGAL/WebGAL/graphs/contributors
         </a>
       </div>
-      <div className={s.title}>{t('website')}</div>
-      <div className={s.text}>
+      <div className={applyStyle('title', s.title)}>{t('website')}</div>
+      <div className={applyStyle('text', s.text)}>
         <a target="_blank" href="https://openwebgal.com/">
           https://openwebgal.com/
         </a>
diff --git a/packages/webgal/src/UI/Menu/Options/System/System.tsx b/packages/webgal/src/UI/Menu/Options/System/System.tsx
index 00333ee94..90cf33a96 100644
--- a/packages/webgal/src/UI/Menu/Options/System/System.tsx
+++ b/packages/webgal/src/UI/Menu/Options/System/System.tsx
@@ -20,6 +20,7 @@ import savesReducer, { ISavesData, saveActions } from '@/store/savesReducer';
 import { dumpFastSaveToStorage, dumpSavesToStorage } from '@/Core/controller/storage/savesController';
 import { OptionSlider } from '@/UI/Menu/Options/OptionSlider';
 import { Info } from '@icon-park/react';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 interface IExportGameData {
   userData: IUserData;
@@ -33,6 +34,7 @@ export function System() {
   const setLanguage = useLanguage();
   const t = useTrans('menu.options.pages.system.options.');
   const { playSeDialogOpen } = useSoundEffect();
+  const applyStyle = useApplyStyle('menuOptions');
 
   function exportSaves() {
     const gameData: IExportGameData = {
@@ -101,7 +103,7 @@ export function System() {
   }
 
   return (
-    <div className={styles.Options_main_content_half}>
+    <div className={applyStyle('Options_main_content_half', styles.Options_main_content_half)}>
       {showAbout && <About onClose={toggleAbout} />}
       {!showAbout && (
         <>
@@ -187,7 +189,7 @@ export function System() {
               currentChecked={2}
             />
           </NormalOption>
-          <div className={styles.About_title_text} onClick={toggleAbout}>
+          <div className={applyStyle('About_title_text', styles.About_title_text)} onClick={toggleAbout}>
             <Info theme="outline" size="32" fill="#227D515F" />
           </div>
         </>
diff --git a/packages/webgal/src/UI/Menu/Options/TextPreview/TextPreview.tsx b/packages/webgal/src/UI/Menu/Options/TextPreview/TextPreview.tsx
index 0a86b672e..ff112170f 100644
--- a/packages/webgal/src/UI/Menu/Options/TextPreview/TextPreview.tsx
+++ b/packages/webgal/src/UI/Menu/Options/TextPreview/TextPreview.tsx
@@ -8,9 +8,11 @@ import { getTextSize } from '@/UI/getTextSize';
 import IMSSTextbox from '@/Stage/TextBox/IMSSTextbox';
 import { compileSentence } from '@/Stage/TextBox/TextBox';
 import { useState } from 'react';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 export const TextPreview = (props: any) => {
   const t = useTrans('menu.options.pages.display.options.');
+  const applyStyle = useApplyStyle('menuTextPreview');
   const userDataState = useSelector((state: RootState) => state.userData);
   const stageState = useSelector((state: RootState) => state.stage);
   const previewBackground = stageState.bgName;
@@ -58,13 +60,13 @@ export const TextPreview = (props: any) => {
 
   return (
     <div
-      className={styles.textPreviewMain}
+      className={applyStyle('textPreviewMain', styles.textPreviewMain)}
       style={{
         background: previewBackground ? `bottom / cover no-repeat url(${previewBackground})` : 'rgba(0, 0, 0, 0.1)',
       }}
       onClick={forcePreviewUpdate}
     >
-      <div key={`previewTextbox-${textDelay}`} className={styles.textbox}>
+      <div key={`previewTextbox-${textDelay}`} className={applyStyle('textbox', styles.textbox)}>
         <Textbox {...textboxProps} />
       </div>
     </div>
diff --git a/packages/webgal/src/UI/Menu/SaveAndLoad/Load/Load.tsx b/packages/webgal/src/UI/Menu/SaveAndLoad/Load/Load.tsx
index 96fc6efcd..4ed242849 100644
--- a/packages/webgal/src/UI/Menu/SaveAndLoad/Load/Load.tsx
+++ b/packages/webgal/src/UI/Menu/SaveAndLoad/Load/Load.tsx
@@ -11,17 +11,24 @@ import { useTranslation } from 'react-i18next';
 import useSoundEffect from '@/hooks/useSoundEffect';
 import { getSavesFromStorage } from '@/Core/controller/storage/savesController';
 import { easyCompile } from '@/UI/Menu/SaveAndLoad/Save/Save';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 export const Load: FC = () => {
   const { playSeClick, playSeEnter, playSePageChange } = useSoundEffect();
+  const applyStyle = useApplyStyle('menuSaveAndLoad');
   const userDataState = useSelector((state: RootState) => state.userData);
   const saveDataState = useSelector((state: RootState) => state.saveData);
   const dispatch = useDispatch();
   const page = [];
   for (let i = 1; i <= 20; i++) {
-    let classNameOfElement = styles.Save_Load_top_button + ' ' + styles.Load_top_button;
+    let classNameOfElement = `${applyStyle('Save_Load_top_button', styles.Save_Load_top_button)} ${applyStyle('Load_top_button', styles.Load_top_button)}`;
     if (i === userDataState.optionData.slPage) {
-      classNameOfElement = classNameOfElement + ' ' + styles.Save_Load_top_button_on + ' ' + styles.Load_top_button_on;
+      classNameOfElement =
+        classNameOfElement +
+        ' ' +
+        applyStyle('Save_Load_top_button_on', styles.Save_Load_top_button_on) +
+        ' ' +
+        applyStyle('Load_top_button_on', styles.Load_top_button_on);
     }
     const element = (
       <div
@@ -34,7 +41,7 @@ export const Load: FC = () => {
         key={'Load_element_page' + i}
         className={classNameOfElement}
       >
-        <div className={styles.Save_Load_top_button_text}>{i}</div>
+        <div className={applyStyle('Save_Load_top_button_text', styles.Save_Load_top_button_text)}>{i}</div>
       </div>
     );
     page.push(element);
@@ -59,20 +66,34 @@ export const Load: FC = () => {
       const speakerView = easyCompile(speaker);
       saveElementContent = (
         <>
-          <div className={styles.Save_Load_content_element_top}>
-            <div className={styles.Save_Load_content_element_top_index + ' ' + styles.Load_content_elememt_top_index}>
+          <div className={applyStyle('Save_Load_content_element_top', styles.Save_Load_content_element_top)}>
+            <div
+              className={`${applyStyle('Save_Load_content_element_top_index', styles.Save_Load_content_element_top_index)} ${applyStyle('Load_content_elememt_top_index', styles.Load_content_elememt_top_index)}`}
+            >
               {saveData.index}
             </div>
-            <div className={styles.Save_Load_content_element_top_date + ' ' + styles.Load_content_element_top_date}>
+            <div
+              className={`${applyStyle('Save_Load_content_element_top_date', styles.Save_Load_content_element_top_date)} ${applyStyle('Load_content_element_top_date', styles.Load_content_element_top_date)}`}
+            >
               {saveData.saveTime}
             </div>
           </div>
-          <div className={styles.Save_Load_content_miniRen}>
-            <img className={styles.Save_Load_content_miniRen_bg} alt="Save_img_preview" src={saveData.previewImage} />
+          <div className={applyStyle('Save_Load_content_miniRen', styles.Save_Load_content_miniRen)}>
+            <img
+              className={applyStyle('Save_Load_content_miniRen_bg', styles.Save_Load_content_miniRen_bg)}
+              alt="Save_img_preview"
+              src={saveData.previewImage}
+            />
           </div>
-          <div className={styles.Save_Load_content_text}>
-            <div className={styles.Save_Load_content_speaker + ' ' + styles.Load_content_speaker}>{speakerView}</div>
-            <div className={styles.Save_Load_content_text_padding}>{easyCompile(saveData.nowStageState.showText)}</div>
+          <div className={applyStyle('Save_Load_content_text', styles.Save_Load_content_text)}>
+            <div
+              className={`${applyStyle('Save_Load_content_speaker', styles.Save_Load_content_speaker)} ${applyStyle('Load_content_speaker', styles.Load_content_speaker)}`}
+            >
+              {speakerView}
+            </div>
+            <div className={applyStyle('Save_Load_content_text_padding', styles.Save_Load_content_text_padding)}>
+              {easyCompile(saveData.nowStageState.showText)}
+            </div>
           </div>
         </>
       );
@@ -88,7 +109,7 @@ export const Load: FC = () => {
         }}
         onMouseEnter={playSeEnter}
         key={'loadElement_' + i}
-        className={styles.Save_Load_content_element}
+        className={applyStyle('Save_Load_content_element', styles.Save_Load_content_element)}
         style={{ animationDelay: `${animationIndex * 30}ms` }}
       >
         {saveElementContent}
@@ -100,14 +121,17 @@ export const Load: FC = () => {
   const t = useTrans('menu.');
 
   return (
-    <div className={styles.Save_Load_main}>
-      <div className={styles.Save_Load_top}>
-        <div className={styles.Save_Load_title}>
-          <div className={styles.Load_title_text}>{t('loadSaving.title')}</div>
+    <div className={applyStyle('Save_Load_main', styles.Save_Load_main)}>
+      <div className={applyStyle('Save_Load_top', styles.Save_Load_top)}>
+        <div className={applyStyle('Save_Load_title', styles.Save_Load_title)}>
+          <div className={applyStyle('Load_title_text', styles.Load_title_text)}>{t('loadSaving.title')}</div>
         </div>
-        <div className={styles.Save_Load_top_buttonList}>{page}</div>
+        <div className={applyStyle('Save_Load_top_buttonList', styles.Save_Load_top_buttonList)}>{page}</div>
       </div>
-      <div className={styles.Save_Load_content} id={'Load_content_page_' + userDataState.optionData.slPage}>
+      <div
+        className={applyStyle('Save_Load_content', styles.Save_Load_content)}
+        id={'Load_content_page_' + userDataState.optionData.slPage}
+      >
         {showSaves}
       </div>
     </div>
diff --git a/packages/webgal/src/UI/Menu/SaveAndLoad/Save/Save.tsx b/packages/webgal/src/UI/Menu/SaveAndLoad/Save/Save.tsx
index d084a7c05..3c497a3d9 100644
--- a/packages/webgal/src/UI/Menu/SaveAndLoad/Save/Save.tsx
+++ b/packages/webgal/src/UI/Menu/SaveAndLoad/Save/Save.tsx
@@ -11,17 +11,19 @@ import useSoundEffect from '@/hooks/useSoundEffect';
 import { getSavesFromStorage } from '@/Core/controller/storage/savesController';
 import { compileSentence } from '@/Stage/TextBox/TextBox';
 import { mergeStringsAndKeepObjects } from '@/UI/Backlog/Backlog';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 export const Save: FC = () => {
   const { playSePageChange, playSeEnter, playSeDialogOpen } = useSoundEffect();
+  const applyStyle = useApplyStyle('menuSaveAndLoad');
   const userDataState = useSelector((state: RootState) => state.userData);
   const savesDataState = useSelector((state: RootState) => state.saveData);
   const dispatch = useDispatch();
   const page = [];
   for (let i = 1; i <= 20; i++) {
-    let classNameOfElement = styles.Save_Load_top_button;
+    let classNameOfElement = applyStyle('Save_Load_top_button', styles.Save_Load_top_button);
     if (i === userDataState.optionData.slPage) {
-      classNameOfElement = classNameOfElement + ' ' + styles.Save_Load_top_button_on;
+      classNameOfElement = classNameOfElement + ' ' + applyStyle('Save_Load_top_button_on', styles.Save_Load_top_button_on);
     }
     const element = (
       <div
@@ -34,7 +36,7 @@ export const Save: FC = () => {
         key={'Save_element_page' + i}
         className={classNameOfElement}
       >
-        <div className={styles.Save_Load_top_button_text}>{i}</div>
+        <div className={applyStyle('Save_Load_top_button_text', styles.Save_Load_top_button_text)}>{i}</div>
       </div>
     );
     page.push(element);
@@ -61,16 +63,28 @@ export const Save: FC = () => {
       const speakerView = easyCompile(speaker);
       saveElementContent = (
         <>
-          <div className={styles.Save_Load_content_element_top}>
-            <div className={styles.Save_Load_content_element_top_index}>{saveData.index}</div>
-            <div className={styles.Save_Load_content_element_top_date}>{saveData.saveTime}</div>
+          <div className={applyStyle('Save_Load_content_element_top', styles.Save_Load_content_element_top)}>
+            <div className={applyStyle('Save_Load_content_element_top_index', styles.Save_Load_content_element_top_index)}>
+              {saveData.index}
+            </div>
+            <div className={applyStyle('Save_Load_content_element_top_date', styles.Save_Load_content_element_top_date)}>
+              {saveData.saveTime}
+            </div>
           </div>
-          <div className={styles.Save_Load_content_miniRen}>
-            <img className={styles.Save_Load_content_miniRen_bg} alt="Save_img_preview" src={saveData.previewImage} />
+          <div className={applyStyle('Save_Load_content_miniRen', styles.Save_Load_content_miniRen)}>
+            <img
+              className={applyStyle('Save_Load_content_miniRen_bg', styles.Save_Load_content_miniRen_bg)}
+              alt="Save_img_preview"
+              src={saveData.previewImage}
+            />
           </div>
-          <div className={styles.Save_Load_content_text}>
-            <div className={styles.Save_Load_content_speaker}>{speakerView}</div>
-            <div className={styles.Save_Load_content_text_padding}>{easyCompile(saveData.nowStageState.showText)}</div>
+          <div className={applyStyle('Save_Load_content_text', styles.Save_Load_content_text)}>
+            <div className={applyStyle('Save_Load_content_speaker', styles.Save_Load_content_speaker)}>
+              {speakerView}
+            </div>
+            <div className={applyStyle('Save_Load_content_text_padding', styles.Save_Load_content_text_padding)}>
+              {easyCompile(saveData.nowStageState.showText)}
+            </div>
           </div>
         </>
       );
@@ -100,7 +114,7 @@ export const Save: FC = () => {
         }}
         onMouseEnter={playSeEnter}
         key={'saveElement_' + i}
-        className={styles.Save_Load_content_element}
+        className={applyStyle('Save_Load_content_element', styles.Save_Load_content_element)}
         style={{ animationDelay: `${animationIndex * 30}ms` }}
       >
         {saveElementContent}
@@ -112,14 +126,17 @@ export const Save: FC = () => {
   const t = useTrans('menu.');
 
   return (
-    <div className={styles.Save_Load_main}>
-      <div className={styles.Save_Load_top}>
-        <div className={styles.Save_Load_title}>
-          <div className={styles.Save_title_text}>{t('saving.title')}</div>
+    <div className={applyStyle('Save_Load_main', styles.Save_Load_main)}>
+      <div className={applyStyle('Save_Load_top', styles.Save_Load_top)}>
+        <div className={applyStyle('Save_Load_title', styles.Save_Load_title)}>
+          <div className={applyStyle('Save_title_text', styles.Save_title_text)}>{t('saving.title')}</div>
         </div>
-        <div className={styles.Save_Load_top_buttonList}>{page}</div>
+        <div className={applyStyle('Save_Load_top_buttonList', styles.Save_Load_top_buttonList)}>{page}</div>
       </div>
-      <div className={styles.Save_Load_content} id={'Save_content_page_' + userDataState.optionData.slPage}>
+      <div
+        className={applyStyle('Save_Load_content', styles.Save_Load_content)}
+        id={'Save_content_page_' + userDataState.optionData.slPage}
+      >
         {showSaves}
       </div>
     </div>
diff --git a/packages/webgal/src/UI/PanicOverlay/PanicOverlay.tsx b/packages/webgal/src/UI/PanicOverlay/PanicOverlay.tsx
index 168e5e445..a73d0bfa5 100644
--- a/packages/webgal/src/UI/PanicOverlay/PanicOverlay.tsx
+++ b/packages/webgal/src/UI/PanicOverlay/PanicOverlay.tsx
@@ -4,10 +4,12 @@ import { useSelector } from 'react-redux';
 import { RootState } from '@/store/store';
 import PanicYoozle from './PanicYoozle/PanicYoozle';
 import styles from './panicOverlay.module.scss';
+import useApplyStyle from '@/hooks/useApplyStyle';
 
 export default function PanicOverlay() {
   const GUIStore = useSelector((state: RootState) => state.GUI);
   const [showOverlay, setShowOverlay] = useState(false);
+  const applyStyle = useApplyStyle('panicOverlay');
   const globalVars = useSelector((state: RootState) => state.userData.globalGameVar);
   const panic = globalVars['Show_panic'];
   const hidePanic = panic === false;
@@ -16,7 +18,9 @@ export default function PanicOverlay() {
     setShowOverlay(isShowOverlay);
   }, [GUIStore.showPanicOverlay, hidePanic]);
   return ReactDOM.createPortal(
-    <div className={showOverlay ? styles.panic_overlay_main : ''}>{showOverlay && <PanicYoozle />}</div>,
+    <div className={showOverlay ? applyStyle('panic_overlay_main', styles.panic_overlay_main) : ''}>
+      {showOverlay && <PanicYoozle />}
+    </div>,
     document.querySelector('#html-body__panic-overlay')!,
   );
 }
diff --git a/packages/webgal/src/UI/PanicOverlay/PanicYoozle/PanicYoozle.tsx b/packages/webgal/src/UI/PanicOverlay/PanicYoozle/PanicYoozle.tsx
index 988555e30..d8980c0c6 100644
--- a/packages/webgal/src/UI/PanicOverlay/PanicYoozle/PanicYoozle.tsx
+++ b/packages/webgal/src/UI/PanicOverlay/PanicYoozle/PanicYoozle.tsx
@@ -17,11 +17,15 @@ export default function PanicYoozle() {
           <span className={styles.yoozle_blue} style={{ marginRight: '1px' }}>
             W
           </span>
-          <span className={`${styles.yoozle_red}`}>e</span>
+          <span className={styles.yoozle_red}>e</span>
           <span className={styles.yoozle_yellow}>b</span>
           <span className={styles.yoozle_blue}>g</span>
-          <span className={`${styles.yoozle_green} ${styles.yoozle_e_rotate}`}>a</span>
-          <span className={`${styles.yoozle_red}`}>l</span>
+          <span
+            className={`${styles.yoozle_green} ${styles.yoozle_e_rotate}`}
+          >
+            a
+          </span>
+          <span className={styles.yoozle_red}>l</span>
         </span>
       </div>
       <div className={styles.yoozle_search}>