From 3446862edaf18a64567994c60cd4c9c63b60e448 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sun, 1 Sep 2024 19:48:58 +0900
Subject: [PATCH 1/7] [Update] To be switchable between ConfigPage and
 MainPage.

---
 src-ui/app/App.jsx                            | 25 +++++---
 src-ui/app/App.module.scss                    | 33 ++++++++++
 src-ui/app/config_page/ConfigPage.jsx         |  2 +-
 src-ui/app/config_page/topbar/Topbar.jsx      | 21 ++++++-
 .../app/config_page/topbar/Topbar.module.scss | 62 +++++++++++++++++--
 .../open_settings/OpenSettings.jsx            |  8 +--
 6 files changed, 130 insertions(+), 21 deletions(-)
 create mode 100644 src-ui/app/App.module.scss

diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx
index 7652a5dd..92e22258 100644
--- a/src-ui/app/App.jsx
+++ b/src-ui/app/App.jsx
@@ -1,24 +1,26 @@
+import { useIsOpenedConfigPage } from "@store";
 import { getCurrent } from "@tauri-apps/api/window";
 import { useEffect, useRef } from "react";
 import { useStartPython } from "@logics/useStartPython";
 import { useConfig } from "@logics/useConfig";
-
 import { MainPage } from "./main_page/MainPage";
 import { ConfigPage } from "./config_page/ConfigPage";
-
+import styles from "./App.module.scss";
+import clsx from "clsx";
 
 export const App = () => {
     const { asyncStartPython } = useStartPython();
     const hasRunRef = useRef(false);
     const main_page = getCurrent();
 
-    const { getSoftwareVersion } = useConfig();
+    const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
+    const { get_software_version } = useConfig();
 
     useEffect(() => {
         main_page.setDecorations(true);
         if (!hasRunRef.current) {
             asyncStartPython().then((result) => {
-                getSoftwareVersion();
+                get_software_version();
             }).catch((err) => {
 
             });
@@ -27,9 +29,16 @@ export const App = () => {
     }, []);
 
     return (
-        <>
-            <MainPage/>
-            <ConfigPage/>
-        </>
+        <div className={styles.container}>
+            <div className={clsx(styles.page, styles.config_page)}>
+                <ConfigPage />
+            </div>
+            <div className={clsx(styles.page, styles.main_page, {
+                [styles.show_config]: currentIsOpenedConfigPage,
+                [styles.show_main]: !currentIsOpenedConfigPage
+            })}>
+                <MainPage />
+            </div>
+        </div>
     );
 };
\ No newline at end of file
diff --git a/src-ui/app/App.module.scss b/src-ui/app/App.module.scss
new file mode 100644
index 00000000..2e7e0e8b
--- /dev/null
+++ b/src-ui/app/App.module.scss
@@ -0,0 +1,33 @@
+.container {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.page {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+
+}
+
+.main_page {
+    // z-index: 1;
+    transition: transform 0.5s ease;
+}
+
+.config_page {
+    // z-index: 0;
+}
+
+.show_config.main_page {
+    transform: translateY(-100%);
+}
+
+.show_main.main_page {
+    transform: translateY(0);
+}
diff --git a/src-ui/app/config_page/ConfigPage.jsx b/src-ui/app/config_page/ConfigPage.jsx
index 992563df..fec94264 100644
--- a/src-ui/app/config_page/ConfigPage.jsx
+++ b/src-ui/app/config_page/ConfigPage.jsx
@@ -9,7 +9,7 @@ import { useTranslation } from "react-i18next";
 
 // import { useConfig } from "@logics/useConfig";
 export const ConfigPage = () => {
-    const { currentSoftwareVersion, updateSoftwareVersion } = useSoftwareVersion();
+    const { currentSoftwareVersion } = useSoftwareVersion();
     const { t } = useTranslation();
 
     return (
diff --git a/src-ui/app/config_page/topbar/Topbar.jsx b/src-ui/app/config_page/topbar/Topbar.jsx
index 636da096..fb435e59 100644
--- a/src-ui/app/config_page/topbar/Topbar.jsx
+++ b/src-ui/app/config_page/topbar/Topbar.jsx
@@ -1,16 +1,31 @@
 import styles from "./Topbar.module.scss";
+import { useIsOpenedConfigPage } from "@store";
+import ArrowLeftSvg from "@images/arrow_left.svg?react";
 
 import { TitleBox } from "./title_box/TitleBox";
 import { SectionTitleBox } from "./section_title_box/SectionTitleBox";
 import { CompactSwitchBox } from "./compact_switch_box/CompactSwitchBox";
 
 export const Topbar = () => {
+    const { updateIsOpenedConfigPage } = useIsOpenedConfigPage();
+    const closeConfigPage = () => {
+        console.log("close");
+        updateIsOpenedConfigPage(false);
+
+    };
+
     return (
         <div className={styles.container}>
-            <div className={styles.wrapper}>
-                <TitleBox />
+            <div className={styles.wrapper} onClick={() => closeConfigPage()}>
+                <div className={styles.go_back_button}>
+                    <ArrowLeftSvg className={styles.arrow_left_svg} />
+                    <p className={styles.go_back_text}>Go Back</p>
+                </div>
+
+
+                {/* <TitleBox />
                 <SectionTitleBox />
-                <CompactSwitchBox />
+                <CompactSwitchBox /> */}
             </div>
         </div>
     );
diff --git a/src-ui/app/config_page/topbar/Topbar.module.scss b/src-ui/app/config_page/topbar/Topbar.module.scss
index 58bab324..6858a905 100644
--- a/src-ui/app/config_page/topbar/Topbar.module.scss
+++ b/src-ui/app/config_page/topbar/Topbar.module.scss
@@ -1,12 +1,66 @@
 .container {
     width: 100%;
     height: 0%;
+    // position: sticky;
 }
 
 .wrapper {
-    height: var(--config_page_topbar_height);
+    // height: var(--config_page_topbar_height);
     background-color: var(--dark_850_color);
-    display: flex;
-    justify-content: space-between;
-    flex-shrink: 0;
+    cursor: pointer;
+    height: 1rem;
+    width: 100%;
+    // display: flex;
+    // justify-content: space-between;
+    // flex-shrink: 0;
+    position: relative;
+    transition: all 0.3s ease;
+
+    &:hover {
+        height: 2rem;
+    }
+
+    &:hover .go_back_button {
+        top: -11rem;
+        transform: rotate(35deg);
+    }
+    &:hover .arrow_left_svg {
+        color: var(--dark_400_color);
+    }
+    &:hover .go_back_text {
+        color: var(--dark_400_color);
+        transform: rotate(-20deg);
+    }
+
+}
+
+.go_back_button {
+    height: 16rem;
+    width: 16rem;
+    border-radius: 1.2rem;
+    background-color: var(--dark_850_color);
+    position: absolute;
+    top: -12rem;
+    right: 10rem;
+    transform: rotate(30deg);
+    transition: all 0.3s ease;
+}
+
+.arrow_left_svg {
+    height: 3.2rem;
+    position: absolute;
+    right: 1rem;
+    bottom: 0.4rem;
+    color: var(--dark_600_color);
+    transform: rotate(-100deg);
+}
+
+.go_back_text {
+    color: var(--dark_650_color);
+    font-size: 1.6rem;
+    position: absolute;
+    bottom: 4.6rem;
+    right: -7rem;
+    transform: rotate(-30deg);
+    transition: all 0.3s ease;
 }
\ No newline at end of file
diff --git a/src-ui/app/main_page/sidebar_section/open_settings/OpenSettings.jsx b/src-ui/app/main_page/sidebar_section/open_settings/OpenSettings.jsx
index c939d6a1..92cc97fb 100644
--- a/src-ui/app/main_page/sidebar_section/open_settings/OpenSettings.jsx
+++ b/src-ui/app/main_page/sidebar_section/open_settings/OpenSettings.jsx
@@ -1,14 +1,12 @@
 import styles from "./OpenSettings.module.scss";
+import { useIsOpenedConfigPage } from "@store";
 import ConfigurationSvg from "@images/configuration.svg?react";
 
-// import { useWindow } from "@logics/useWindow";
-
 export const OpenSettings = () => {
-    // const { createConfigPage } = useWindow();
+    const { updateIsOpenedConfigPage } = useIsOpenedConfigPage();
 
     const openConfigPage = () => {
-
-        // createConfigPage();
+        updateIsOpenedConfigPage(true);
     };
 
     return (

From 91c2a9cb5b512664d0cf02f388b6e09c223f3e53 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sun, 1 Sep 2024 23:51:54 +0900
Subject: [PATCH 2/7] [Update] Config Page: Change the design to be natural and
 behavior smoother.

---
 src-ui/app/config_page/topbar/Topbar.jsx         |  9 +++++++--
 src-ui/app/config_page/topbar/Topbar.module.scss | 15 ++++++++++-----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src-ui/app/config_page/topbar/Topbar.jsx b/src-ui/app/config_page/topbar/Topbar.jsx
index fb435e59..b70f559b 100644
--- a/src-ui/app/config_page/topbar/Topbar.jsx
+++ b/src-ui/app/config_page/topbar/Topbar.jsx
@@ -1,3 +1,5 @@
+import clsx from "clsx";
+
 import styles from "./Topbar.module.scss";
 import { useIsOpenedConfigPage } from "@store";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
@@ -7,7 +9,7 @@ import { SectionTitleBox } from "./section_title_box/SectionTitleBox";
 import { CompactSwitchBox } from "./compact_switch_box/CompactSwitchBox";
 
 export const Topbar = () => {
-    const { updateIsOpenedConfigPage } = useIsOpenedConfigPage();
+    const { currentIsOpenedConfigPage, updateIsOpenedConfigPage } = useIsOpenedConfigPage();
     const closeConfigPage = () => {
         console.log("close");
         updateIsOpenedConfigPage(false);
@@ -15,7 +17,10 @@ export const Topbar = () => {
     };
 
     return (
-        <div className={styles.container}>
+        <div className={clsx(styles.container, {
+            [styles.show_config]: currentIsOpenedConfigPage,
+            [styles.show_main]: !currentIsOpenedConfigPage
+        })}>
             <div className={styles.wrapper} onClick={() => closeConfigPage()}>
                 <div className={styles.go_back_button}>
                     <ArrowLeftSvg className={styles.arrow_left_svg} />
diff --git a/src-ui/app/config_page/topbar/Topbar.module.scss b/src-ui/app/config_page/topbar/Topbar.module.scss
index 6858a905..c2c196cc 100644
--- a/src-ui/app/config_page/topbar/Topbar.module.scss
+++ b/src-ui/app/config_page/topbar/Topbar.module.scss
@@ -1,18 +1,23 @@
 .container {
     width: 100%;
     height: 0%;
-    // position: sticky;
+    transition: transform 0.5s ease;
 }
 
+.show_config.container {
+    transform: translateY(0vh);
+}
+
+.show_main.container {
+    transform: translateY(100vh);
+}
+
+
 .wrapper {
-    // height: var(--config_page_topbar_height);
     background-color: var(--dark_850_color);
     cursor: pointer;
     height: 1rem;
     width: 100%;
-    // display: flex;
-    // justify-content: space-between;
-    // flex-shrink: 0;
     position: relative;
     transition: all 0.3s ease;
 

From e9d4ce2012649dea34caeb91a5d2a1753a50cb46 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Mon, 2 Sep 2024 07:51:24 +0900
Subject: [PATCH 3/7] [Update] Config Page: Adjust Go back button to be a bit
 smaller and expand clickable range.

---
 .../SettingSection.module.scss                |  2 +-
 src-ui/app/config_page/topbar/Topbar.jsx      |  3 +-
 .../app/config_page/topbar/Topbar.module.scss | 44 +++++++++++--------
 src-ui/utils/variables.css                    |  2 +-
 4 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src-ui/app/config_page/setting_section/SettingSection.module.scss b/src-ui/app/config_page/setting_section/SettingSection.module.scss
index 5b4c76e3..ac4abae7 100644
--- a/src-ui/app/config_page/setting_section/SettingSection.module.scss
+++ b/src-ui/app/config_page/setting_section/SettingSection.module.scss
@@ -5,5 +5,5 @@
 }
 
 .container {
-    margin: 6rem 4rem 16rem 3.2rem;
+    margin: 0rem 4rem 16rem 3.2rem;
 }
\ No newline at end of file
diff --git a/src-ui/app/config_page/topbar/Topbar.jsx b/src-ui/app/config_page/topbar/Topbar.jsx
index b70f559b..716ba49d 100644
--- a/src-ui/app/config_page/topbar/Topbar.jsx
+++ b/src-ui/app/config_page/topbar/Topbar.jsx
@@ -11,7 +11,6 @@ import { CompactSwitchBox } from "./compact_switch_box/CompactSwitchBox";
 export const Topbar = () => {
     const { currentIsOpenedConfigPage, updateIsOpenedConfigPage } = useIsOpenedConfigPage();
     const closeConfigPage = () => {
-        console.log("close");
         updateIsOpenedConfigPage(false);
 
     };
@@ -24,6 +23,8 @@ export const Topbar = () => {
             <div className={styles.wrapper} onClick={() => closeConfigPage()}>
                 <div className={styles.go_back_button}>
                     <ArrowLeftSvg className={styles.arrow_left_svg} />
+                </div>
+                <div className={styles.go_back_text_wrapper}>
                     <p className={styles.go_back_text}>Go Back</p>
                 </div>
 
diff --git a/src-ui/app/config_page/topbar/Topbar.module.scss b/src-ui/app/config_page/topbar/Topbar.module.scss
index c2c196cc..c34633e0 100644
--- a/src-ui/app/config_page/topbar/Topbar.module.scss
+++ b/src-ui/app/config_page/topbar/Topbar.module.scss
@@ -23,18 +23,19 @@
 
     &:hover {
         height: 2rem;
-    }
-
-    &:hover .go_back_button {
-        top: -11rem;
-        transform: rotate(35deg);
-    }
-    &:hover .arrow_left_svg {
-        color: var(--dark_400_color);
-    }
-    &:hover .go_back_text {
-        color: var(--dark_400_color);
-        transform: rotate(-20deg);
+        .go_back_button {
+            top: -12rem;
+            transform: rotate(35deg);
+        }
+        .arrow_left_svg {
+            color: var(--dark_400_color);
+        }
+        .go_back_text {
+            color: var(--dark_400_color);
+        }
+        .go_back_text_wrapper {
+            padding-top: 8.2rem;
+        }
     }
 
 }
@@ -45,14 +46,14 @@
     border-radius: 1.2rem;
     background-color: var(--dark_850_color);
     position: absolute;
-    top: -12rem;
+    top: -13.2rem;
     right: 10rem;
     transform: rotate(30deg);
     transition: all 0.3s ease;
 }
 
 .arrow_left_svg {
-    height: 3.2rem;
+    height: 2.8rem;
     position: absolute;
     right: 1rem;
     bottom: 0.4rem;
@@ -60,12 +61,19 @@
     transform: rotate(-100deg);
 }
 
+.go_back_text_wrapper {
+    position: absolute;
+    top: -4.6rem;
+    right: 0rem;
+    padding-top: 7.2rem;
+    padding-bottom: 1rem;
+    width: 15.2rem;
+    transition: all 0.3s ease;
+}
+
 .go_back_text {
     color: var(--dark_650_color);
     font-size: 1.6rem;
-    position: absolute;
-    bottom: 4.6rem;
-    right: -7rem;
-    transform: rotate(-30deg);
+    padding-left: 4rem;
     transition: all 0.3s ease;
 }
\ No newline at end of file
diff --git a/src-ui/utils/variables.css b/src-ui/utils/variables.css
index 34273744..46dd0299 100644
--- a/src-ui/utils/variables.css
+++ b/src-ui/utils/variables.css
@@ -47,5 +47,5 @@
 
     --main_page_topbar_height: 4.8rem;
     --config_page_sidebar_width: 22rem;
-    --config_page_topbar_height: 5.2rem;
+    --config_page_topbar_height: 8rem;
 }
\ No newline at end of file

From ed26d157b501087a32f3778ee1520a068920e261 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Mon, 2 Sep 2024 08:10:17 +0900
Subject: [PATCH 4/7] [Update] Config Page: Adjust sidebar sizes to smaller.

---
 .../config_page/setting_section/SettingSection.module.scss  | 2 +-
 .../config_page/sidebar_section/SidebarSection.module.scss  | 6 +++---
 src-ui/utils/variables.css                                  | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src-ui/app/config_page/setting_section/SettingSection.module.scss b/src-ui/app/config_page/setting_section/SettingSection.module.scss
index ac4abae7..2ed9e9e6 100644
--- a/src-ui/app/config_page/setting_section/SettingSection.module.scss
+++ b/src-ui/app/config_page/setting_section/SettingSection.module.scss
@@ -5,5 +5,5 @@
 }
 
 .container {
-    margin: 0rem 4rem 16rem 3.2rem;
+    margin: 0rem 4rem 16rem 0.6rem;
 }
\ No newline at end of file
diff --git a/src-ui/app/config_page/sidebar_section/SidebarSection.module.scss b/src-ui/app/config_page/sidebar_section/SidebarSection.module.scss
index 38a16575..849d34f1 100644
--- a/src-ui/app/config_page/sidebar_section/SidebarSection.module.scss
+++ b/src-ui/app/config_page/sidebar_section/SidebarSection.module.scss
@@ -4,7 +4,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    padding: 5.8rem 0rem 5.8rem 2.8rem;
+    padding: 0rem 0rem 5.8rem 1.6rem;
     max-height: 60rem;
 }
 
@@ -23,7 +23,7 @@
     justify-content: left;
     align-items: center;
     color: var(--dark_basic_text_color);
-    padding: 0.8rem 0 0.8rem 1.8rem;
+    padding: 0.8rem 0 0.8rem 1.2rem;
     cursor: pointer;
     &:hover {
         background-color: var(--dark_800_color);
@@ -55,7 +55,7 @@
 }
 
 .tab_text {
-    font-size: 1.8rem;
+    font-size: 1.6rem;
 }
 
 .separated_tabs_wrapper {
diff --git a/src-ui/utils/variables.css b/src-ui/utils/variables.css
index 46dd0299..0f394542 100644
--- a/src-ui/utils/variables.css
+++ b/src-ui/utils/variables.css
@@ -46,6 +46,6 @@
 
 
     --main_page_topbar_height: 4.8rem;
-    --config_page_sidebar_width: 22rem;
+    --config_page_sidebar_width: 18rem;
     --config_page_topbar_height: 8rem;
 }
\ No newline at end of file

From 597fee16df4108190d490c88456e9bee0e0fb993 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Mon, 2 Sep 2024 08:38:06 +0900
Subject: [PATCH 5/7] [bugfix] Main Page: MainFunctionSwitches. fix the label
 width that was shrinking and wrapping unexpectedly.

---
 .../main_function_switch/MainFunctionSwitch.module.scss       | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss b/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss
index bcdd30c5..bb0b65f2 100644
--- a/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss
+++ b/src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss
@@ -9,7 +9,7 @@
 .switch_container {
     position: relative;
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
     padding: 1.6rem 1.4rem;
     background-color: var(--dark_825_color);
@@ -29,7 +29,6 @@
 }
 
 .label_wrapper {
-    width: 100%;
     display: flex;
     justify-content: left;
     align-items: center;
@@ -85,7 +84,6 @@ $loading_label_color: var(--dark_500_color);
     display: flex;
     justify-content: end;
     align-items: center;
-    width: 100%;
     &.is_compact_mode {
         display: none;
     }

From fdbaaaaca98765071b3193db243a1406a279a19e Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Mon, 2 Sep 2024 08:49:04 +0900
Subject: [PATCH 6/7] [bugfix/chore] Main Page: Sidebar. fix vrct logo height
 that was shrink.

---
 src-ui/app/main_page/sidebar_section/logo/Logo.module.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src-ui/app/main_page/sidebar_section/logo/Logo.module.scss b/src-ui/app/main_page/sidebar_section/logo/Logo.module.scss
index a1e64e37..1d6fbe7c 100644
--- a/src-ui/app/main_page/sidebar_section/logo/Logo.module.scss
+++ b/src-ui/app/main_page/sidebar_section/logo/Logo.module.scss
@@ -3,6 +3,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    flex-shrink: 0;
 }
 
 .logo {

From 231125e406f5d341da4f54a1af86263d2b97bc30 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Mon, 2 Sep 2024 10:39:02 +0900
Subject: [PATCH 7/7] [Update] Config Page: Change background color and adjust
 DropdownMenu component for it.

---
 src-ui/app/config_page/ConfigPage.module.scss               | 2 +-
 .../components/dropdown_menu/DropdownMenu.module.scss       | 6 +++---
 .../setting_box/components/useSettingBox.module.scss        | 4 +---
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src-ui/app/config_page/ConfigPage.module.scss b/src-ui/app/config_page/ConfigPage.module.scss
index 0a930ad1..81038037 100644
--- a/src-ui/app/config_page/ConfigPage.module.scss
+++ b/src-ui/app/config_page/ConfigPage.module.scss
@@ -4,7 +4,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    background-color: var(--dark_950_color);
+    background-color: var(--dark_900_color);
     overflow: hidden;
     position: relative;
 }
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss
index eb0f96cd..b47b3bac 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.module.scss
@@ -6,16 +6,16 @@
 
 .dropdown_toggle_button {
     position: relative;
-    background-color: var(--dark_925_color);
+    background-color: var(--dark_950_color);
     min-width: 20rem;
     padding: 0.6rem 1rem;
     cursor: pointer;
     border-radius: 0.4rem;
     &:hover {
-        background-color: var(--dark_850_color);
+        background-color: var(--dark_925_color);
     }
     &:active {
-        background-color: var(--dark_950_color);
+        background-color: var(--dark_975_color);
     }
     &.is_loading {
         pointer-events: none;
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss
index b709292d..d3fe8462 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/components/useSettingBox.module.scss
@@ -3,7 +3,6 @@
     width: 100%;
     justify-content: space-between;
     align-items: center;
-    background-color: var(--dark_888_color);
     padding: 2rem;
     display: flex;
     justify-content: space-between;
@@ -12,6 +11,7 @@
     &.flex_column {
         flex-direction: column;
     }
+    border-bottom: solid 0.1rem var(--dark_800_color);
 }
 
 .label_only_section {
@@ -25,7 +25,6 @@
     justify-content: space-between;
     align-items: center;
     gap: 2rem;
-    background-color: var(--dark_888_color);
     padding: 2rem;
 }
 
@@ -61,7 +60,6 @@
     justify-content: space-between;
     align-items: center;
     gap: 2rem;
-    background-color: var(--dark_888_color);
     padding: 2rem;
 }