diff --git a/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.jsx b/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.jsx
index 73209c10..3cfde7f1 100644
--- a/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.jsx
@@ -272,30 +272,32 @@ const SupporterPeriodContainer = ({ settings, calc_support_period }) => {
 
     return (
         <div className={styles.supporter_period_container}>
-            {Object.entries(period_data).map(([key, item], index) => {
-                if (item === "") return null;
-                const period_box_class_name = clsx(styles.period_box, {
-                    [styles.mogu_bar]: item === "mogu_2000",
-                    [styles.mochi_bar]: item === "mochi_1000",
-                    [styles.fuwa_bar]: item === "fuwa_500",
-                    [styles.basic_bar]: item === "basic_300",
-                });
+            <div className={styles.supporter_period_wrapper}>
+                {Object.entries(period_data).map(([key, item], index) => {
+                    if (item === "") return null;
+                    const period_box_class_name = clsx(styles.period_box, {
+                        [styles.mogu_bar]: item === "mogu_2000",
+                        [styles.mochi_bar]: item === "mochi_1000",
+                        [styles.fuwa_bar]: item === "fuwa_500",
+                        [styles.basic_bar]: item === "basic_300",
+                    });
 
-                return (
-                    <Tooltip
-                        key={index}
-                        title={
-                            <p className={styles.tooltip_period_label}>{key}</p>
-                        }
-                        placement="top"
-                        slotProps={offset}
-                    >
-                        <div className={styles.period_box_wrapper}>
-                            <div className={period_box_class_name}></div>
-                        </div>
-                    </Tooltip>
-                );
-            })}
+                    return (
+                        <Tooltip
+                            key={index}
+                            title={
+                                <p className={styles.tooltip_period_label}>{key}</p>
+                            }
+                            placement="top"
+                            slotProps={offset}
+                        >
+                            <div className={styles.period_box_wrapper}>
+                                <div className={period_box_class_name}></div>
+                            </div>
+                        </Tooltip>
+                    );
+                })}
+            </div>
         </div>
     );
 };
diff --git a/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.module.scss b/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.module.scss
index c0c35d76..3d392642 100644
--- a/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/SupportersWrapper.module.scss
@@ -13,7 +13,7 @@
     align-content: start;
     flex-wrap: wrap;
     column-gap: 1.8rem;
-    row-gap: 0.4rem;
+    row-gap: 2rem;
 }
 
 .supporter_image_container {
@@ -209,13 +209,24 @@ $progress_ease: cubic-bezier(0, 1, 0.75, 1);
 
 
 .supporter_period_container {
+    position: absolute;
+    top: 100%;
+    left: 0;
+}
+.supporter_period_wrapper {
     display: flex;
-    gap: 0.2rem;
-    padding-left: 0.4rem;
+    gap: 0.4rem 0.2rem;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    padding: 0.3rem 0.4rem 0.4rem 0.4rem;
+}
+
+.period_box_wrapper {
+    flex-shrink: 0;
 }
 
 .period_box {
-    width: 1.8rem;
+    width: 1.7rem;
     height: 0.3rem;
     border-radius: 0.3rem;
     &.mogu_bar {
@@ -231,9 +242,7 @@ $progress_ease: cubic-bezier(0, 1, 0.75, 1);
         background-color: var(--dark_800_color);
     }
 }
-.period_box_wrapper {
-    padding: 0.3rem 0 0.4rem 0;
-}
+
 .tooltip_period_label {
     font-size: 1.4rem;
 }