diff --git a/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/SupportersContainer.jsx b/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/SupportersContainer.jsx
index 903ca26b..72d48e48 100644
--- a/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/SupportersContainer.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/SupportersContainer.jsx
@@ -1,40 +1,28 @@
 import styles from "./SupportersContainer.module.scss";
-import { useState, useEffect } from "react";
-import vrct_supporters_title from "@images/supporters/vrct_supporters_title.png";
+import {  useEffect } from "react";
 import { SupportersWrapper } from "./supporters_wrapper/SupportersWrapper";
-import { clsx } from "clsx";
-const SHUFFLE_INTERVAL_TIME = 20000;
+import { useSupporters } from "@logics_configs";
+import { supporters_images_url } from "@ui_configs";
 
 export const SupportersContainer = () => {
+    const { currentSupportersData, asyncFetchSupportersData } = useSupporters();
+
+    useEffect(() => {
+        asyncFetchSupportersData();
+    }, []);
+
+    if (currentSupportersData.state === "error")
+        return <div>Failed to retrieve data.</div>;
+
+    if (currentSupportersData.state === "pending" || currentSupportersData.data === null)
+        return <div>Loading...</div>;
+
+    const supporters_settings = currentSupportersData.data.supporters_settings;
     return (
         <div className={styles.supporters_container}>
-            <img className={styles.vrct_supporters_title} src={vrct_supporters_title} />
-            <ProgressBar />
-            <SupportersWrapper />
-            <ProgressBar />
+            <img className={styles.vrct_supporters_title} src={`${supporters_images_url}/vrct_supporters_title.png`} />
+            <SupportersWrapper supporters_settings={supporters_settings}/>
             <p className={styles.vrct_supporters_desc_end}>{`みなさんのおかげで、みしゃ社長は布団で寝ることを許され(in開発室) しいなは喜び庭駆け回っています！！！ふわもちもぐもぐです！ありがとうございます。これからもまだまだ進化するVRCTをどうかよろしくお願いします！\nThanks to everyone, Misha has been granted the privilege of sleeping in a proper bed (in the development room), and Shiina is so happy, running around the yard! Fuwa-mochi-mogu-mogu! Thank you so much! We hope you'll continue to support the ever-evolving VRCT!`}</p>
         </div>
     );
-};
-
-const ProgressBar = () => {
-    const [is_active, setIsActive] = useState(false);
-
-    useEffect(() => {
-        setIsActive(true);
-        const interval = setInterval(() => {
-            setIsActive(false);
-            setTimeout(() => setIsActive(true), 50);
-        }, SHUFFLE_INTERVAL_TIME);
-
-        return () => clearInterval(interval);
-    }, []);
-
-    return (
-        <div
-            className={clsx(styles.progress_bar, {
-                [styles.progress_bar_active]: is_active,
-            })}
-        />
-    );
 };
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/SupportersContainer.module.scss b/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/SupportersContainer.module.scss
index 4b525879..7174d6f4 100644
--- a/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/SupportersContainer.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/SupportersContainer.module.scss
@@ -13,14 +13,4 @@
     font-size: 1.4rem;
     margin-top: 2rem;
     color: var(--dark_300_color);
-}
-
-.progress_bar {
-    height: 0.2rem;
-    width: 0%;
-    &.progress_bar_active {
-        transition: width 20000ms linear;
-        background-color: var(--primary_400_color);
-        width: 100%;
-    }
 }
\ No newline at end of file
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 1a0a0a31..58b2a4c8 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
@@ -6,222 +6,162 @@ import { shuffleArray, randomIntMinMax, randomMinMax } from "@utils";
 
 import {
     useSettingBoxScrollPosition,
-} from "@logics_configs"
+    useSupporters,
+} from "@logics_configs";
 
-import json_data from "./data.json";
-
-const target_supporting_month = "2025-01";
-const calc_support_period = ["2024-10", "2024-11", "2024-12", "2025-01"];
+import { supporters_images_url } from "@ui_configs";
 
 const SHUFFLE_INTERVAL_TIME = 20000;
 
-
-
 const and_you_data = {
     supporter_id: "and_you",
 };
 
 
-const getImagePath = (images, file_name) => {
-    const image_path = Object.keys(images).find((path) => path.endsWith(`${file_name}.png`));
-    return image_path ? images[image_path]?.default : null;
-};
-
 const image_sets = {
-    supporter_cards: import.meta.glob("@images/supporters/supporter_cards/*.png", { eager: true }),
-    chato_expressions: import.meta.glob("@images/supporters/chato_expressions/*.png", { eager: true }),
-    supporters_labels: import.meta.glob("@images/supporters/supporters_labels/*.png", { eager: true }),
-    supporters_icons: import.meta.glob("@images/supporters/supporters_icons/*.png", { eager: true }),
+    supporter_cards: `${supporters_images_url}/supporter_cards/`,
+    chato_expressions: `${supporters_images_url}/chato_expressions/`,
+    supporters_labels: `${supporters_images_url}/supporters_labels/`,
+    supporters_icons: `${supporters_images_url}/supporters_icons/`,
 };
 
 const getSupporterCard = (plan_name) => {
     const card_map = {
-        "もぐもぐ_2000": "mogu_card",
-        "もちもち_1000": "mochi_card",
-        "ふわふわ_500": "fuwa_card",
-        "Basic_300": "basic_card",
+        "mogu_2000": "mogu_card",
+        "mochi_1000": "mochi_card",
+        "fuwa_500": "fuwa_card",
+        "basic_300": "basic_card",
     };
-    return getImagePath(image_sets.supporter_cards, card_map[plan_name] || "basic_card");
+    if (!card_map[plan_name]) return `${image_sets.supporter_cards}basic_card.png`;
+
+    return `${image_sets.supporter_cards}${card_map[plan_name]}.png`;
 };
 
-const getChatoExpressionsPath = (file_name) =>
-    getImagePath(image_sets.chato_expressions, file_name);
+const getChatoExpressionsPath = (file_name) => `${image_sets.chato_expressions}${file_name}.png`;
+const getSupportersLabelsPath = (file_name) => `${image_sets.supporters_labels}${file_name}.png`;
+const getSupportersIconsPath = (file_name) => `${image_sets.supporters_icons}${file_name}.png`;
 
-const getSupportersLabelsPath = (file_name) =>
-    getImagePath(image_sets.supporters_labels, file_name);
 
-const getSupportersIconsPath = (file_name) =>
-    getImagePath(image_sets.supporters_icons, file_name);
-
-const chato_ex_count = Object.keys(image_sets.chato_expressions).length;
-
-export const SupportersWrapper = () => {
+export const SupportersWrapper = ({supporters_settings}) => {
     const { saveScrollPosition, restoreScrollPosition } = useSettingBoxScrollPosition();
+    const { currentSupportersData } = useSupporters();
 
-    let credit_pending_count = 0;
-    const filtered_data = json_data.filter((supporter) => {
-        if (!supporter.supporter_id) return false;
+    const [json_data, setJsonData] = useState();
+    const [supportersData, setSupportersData] = useState([]);
+    const [chatoExpressions, setChatoExpressions] = useState([]);
 
-        const months = Object.keys(supporter).filter((key) => key.match(/^\d{4}-\d{2}$/));
-        const has_valid_month = months.some((month) => supporter[month]);
-        if (!has_valid_month) return false;
-
-        const basic_300_months = months.filter((month) => supporter[month] === "Basic_300");
-        const has_special_plan = months.some((month) => ["ふわふわ_500", "もちもち_1000", "もぐもぐ_2000"].includes(supporter[month]));
-
-        if (basic_300_months.length === 1 && !has_special_plan) {
-            credit_pending_count++;
-            return false;
-        }
-
-        return true;
-    });
-
-    const grouped_data = {
-        もぐもぐ_2000: [],
-        もちもち_1000: [],
-        ふわふわ_500: [],
-        Basic_300: [],
-        empty: [],
-        and_you: [],
-    };
-
-    filtered_data.forEach((supporter) => {
-        const value = supporter[target_supporting_month] || "empty";
-        if (grouped_data[value]) {
-            grouped_data[value].push(supporter);
-        } else {
-            grouped_data["empty"].push(supporter);
-        }
-    });
-
-    const [supportersData, setSupportersData] = useState(() => [
-        ...grouped_data["もぐもぐ_2000"],
-        ...grouped_data["もちもち_1000"],
-        ...grouped_data["ふわふわ_500"],
-        ...grouped_data["Basic_300"],
-        ...grouped_data["empty"],
-        and_you_data,
-    ]);
+    useEffect(() => {
+        setJsonData(currentSupportersData.data);
+    }, [currentSupportersData.data]);
 
 
-    const [chatoExpressions, setChatoExpressions] = useState(() =>
-        supportersData.map(() =>
-            getChatoExpressionsPath(`chato_expression_${randomIntMinMax(1, chato_ex_count)}`)
-        )
-    );
+    const target_supporting_month = supporters_settings.target_supporting_month;
+    const calc_support_period = supporters_settings.calc_support_period;
+    const chato_ex_count = supporters_settings.chato_ex_count;
+    const last_updated_local_date = new Date(supporters_settings.last_updated_utc_date)?.toString();
 
+    const recalcAndUpdateSupporters = useCallback(() => {
+        if (!json_data) return;
+
+        let credit_pending_count = 0;
+        const newGroupedData = {
+            "mogu_2000": [],
+            "mochi_1000": [],
+            "fuwa_500": [],
+            "basic_300": [],
+            "empty": [],
+            "and_you": [],
+        };
+
+        const filtered_data = json_data.supporters_data.filter((supporter) => {
+            if (!supporter.supporter_id) return false;
+
+            const months = Object.keys(supporter).filter((key) =>
+                key.match(/^\d{4}-\d{2}$/)
+            );
+            const has_valid_month = months.some((month) => supporter[month]);
+            if (!has_valid_month) return false;
+
+            const basic_300_months = months.filter(
+                (month) => supporter[month] === "basic_300"
+            );
+            const has_special_plan = months.some((month) =>
+                ["fuwa_500", "mochi_1000", "mogu_2000"].includes(supporter[month])
+            );
+
+            if (basic_300_months.length === 1 && !has_special_plan) {
+                credit_pending_count++;
+                return false;
+            }
+
+            return true;
+        });
+
+        filtered_data.forEach((supporter) => {
+            const value = supporter[target_supporting_month] || "empty";
+            if (newGroupedData[value]) {
+                newGroupedData[value].push(supporter);
+            } else {
+                newGroupedData["empty"].push(supporter);
+            }
+        });
 
-    const shuffleSupporters = useCallback(() => {
-        saveScrollPosition();
         const newSupportersData = [
-            ...shuffleArray(grouped_data["もぐもぐ_2000"]),
-            ...shuffleArray(grouped_data["もちもち_1000"]),
-            ...shuffleArray(grouped_data["ふわふわ_500"]),
-            ...shuffleArray(grouped_data["Basic_300"]),
-            ...shuffleArray(grouped_data["empty"]),
+            ...shuffleArray(newGroupedData["mogu_2000"]),
+            ...shuffleArray(newGroupedData["mochi_1000"]),
+            ...shuffleArray(newGroupedData["fuwa_500"]),
+            ...shuffleArray(newGroupedData["basic_300"]),
+            ...shuffleArray(newGroupedData["empty"]),
             and_you_data,
         ];
-        setSupportersData(newSupportersData);
 
+        setSupportersData(newSupportersData);
 
         setChatoExpressions(
             newSupportersData.map(() =>
-                getChatoExpressionsPath(`chato_expression_${randomIntMinMax(1, chato_ex_count)}`)
+                getChatoExpressionsPath(
+                    `chato_expression_${randomIntMinMax(1, chato_ex_count)}`
+                )
             )
         );
-        setTimeout(() => restoreScrollPosition(), 0);
-    }, [grouped_data]);
-
-    const renderImages = () => {
-        return supportersData.map((item, index) => {
-            const target_plan = item[target_supporting_month];
-            const img_src = getSupporterCard(target_plan);
-            const is_default_icon = item.supporter_icon_id === "";
-            const is_icon_plan = ["もぐもぐ_2000", "もちもち_1000"].includes(target_plan);
-            const is_and_you = item.supporter_id === "and_you";
-
-            const random_delay = `${randomMinMax(0.1, 6).toFixed(1)}s`;
-
-
-
-            const file_name = is_and_you ? "and_you" : `supporter_${item.supporter_id}`;
-            const label_img_src = getSupportersLabelsPath(file_name);
-            const icon_img_src = getSupportersIconsPath(`supporter_icon_${item.supporter_icon_id}`);
-
-            const supporter_label_component_classname = clsx(styles.supporter_label_component, {
-                [styles.is_icon_plan]: is_icon_plan,
-            });
-
-            const supporterLabelComponent = () => (
-                <div className={supporter_label_component_classname}>
-                    {is_icon_plan && (
-                        <div className={styles.supporter_icon_wrapper}>
-                            {is_default_icon ? (
-                                <img
-                                    className={styles.default_chato_expression_image}
-                                    src={chatoExpressions[index]}
-                                />
-                            ) : (
-                                <img className={styles.supporter_icon} src={icon_img_src} />
-                            )}
-                        </div>
-                    )}
-                    <img className={styles.supporter_label_image} src={label_img_src} />
-                </div>
-            );
-
-
-
-            const supporter_image_wrapper_classname = clsx(styles.supporter_image_wrapper, {
-                [styles.mogu_image]: target_plan === "もぐもぐ_2000",
-            });
-
-            return is_and_you ? (
-                <a href="#support_us_container" key={item.supporter_id}>
-                    <div className={styles.supporter_image_container}>
-                        <div
-                            className={supporter_image_wrapper_classname}
-                            style={{ "--delay": random_delay }}
-                        >
-                            <img className={styles.supporter_image} src={img_src} />
-                            {supporterLabelComponent()}
-                            <AndYouIcon />
-                        </div>
-                    </div>
-
-                </a>
-            ): img_src ? (
-                <div key={item.supporter_id} className={styles.supporter_image_container}>
-                    <div
-                        className={supporter_image_wrapper_classname}
-                        style={{ "--delay": random_delay }}
-                    >
-                        <img className={styles.supporter_image} src={img_src} />
-                        {supporterLabelComponent()}
-                    </div>
-                    <SupporterPeriodContainer settings={item}/>
-                </div>
-            ) : null;
-        });
-    };
-
+    }, [json_data]);
+
+    useEffect(() => {
+        recalcAndUpdateSupporters();
+    }, [json_data, recalcAndUpdateSupporters]);
+
+    const shuffleSupporters = useCallback(() => {
+        if (!json_data) return;
+        saveScrollPosition();
+        recalcAndUpdateSupporters();
+        setTimeout(() => restoreScrollPosition(), 0);
+    }, [json_data, recalcAndUpdateSupporters, saveScrollPosition, restoreScrollPosition]);
 
     useEffect(() => {
-        shuffleSupporters();
         const interval = setInterval(() => {
             shuffleSupporters();
         }, SHUFFLE_INTERVAL_TIME);
 
         return () => clearInterval(interval);
-    }, []);
+    }, [shuffleSupporters]);
 
     return (
-        <div className={styles.supporters_wrapper}>{renderImages()}</div>
+        <div className={styles.container}>
+            <ProgressBar />
+            <div className={styles.supporters_wrapper}>
+                <SupporterCardsComponent
+                    supportersData={supportersData}
+                    chatoExpressions={chatoExpressions}
+                    target_supporting_month={target_supporting_month}
+                    calc_support_period={calc_support_period}
+                />
+            </div>
+            <p className={styles.last_updated_local_date}>{`Last updated date:\n${last_updated_local_date}`}</p>
+            <ProgressBar />
+        </div>
     );
 };
 
-
 const AndYouIcon = () => {
     return (
         <>
@@ -237,29 +177,136 @@ const AndYouIcon = () => {
     );
 };
 
-const SupporterPeriodContainer = ({settings}) => {
+const SupporterCardsComponent = ({ supportersData, chatoExpressions, target_supporting_month, calc_support_period }) => {
+    return supportersData.map((item, index) => {
+        const target_plan = item[target_supporting_month];
 
+        const img_src = getSupporterCard(target_plan);
+
+        const is_and_you = item.supporter_id === "and_you";
+
+        const random_delay = `${randomMinMax(0.1, 6).toFixed(1)}s`;
+
+        const supporter_image_wrapper_classname = clsx(
+            styles.supporter_image_wrapper,
+            {
+                [styles.mogu_image]: target_plan === "mogu_2000",
+            }
+        );
+
+        return is_and_you ? (
+            <a href="#support_us_container" key={item.supporter_id}>
+                <div className={styles.supporter_image_container}>
+                    <div
+                        className={supporter_image_wrapper_classname}
+                        style={{ "--delay": random_delay }}
+                    >
+                        <img
+                            className={styles.supporter_image}
+                            src={img_src}
+                            alt="supporter"
+                        />
+                        <SupporterLabelComponent
+                            target_plan={target_plan}
+                            item={item}
+                            chatoExpressions={chatoExpressions}
+                        />
+                        <AndYouIcon />
+                    </div>
+                </div>
+            </a>
+        ) : img_src ? (
+            <div key={item.supporter_id} className={styles.supporter_image_container}>
+                <div
+                    className={supporter_image_wrapper_classname}
+                    style={{ "--delay": random_delay }}
+                >
+                    <img
+                        className={styles.supporter_image}
+                        src={img_src}
+                        alt="supporter"
+                    />
+                    <SupporterLabelComponent
+                        target_plan={target_plan}
+                        item={item}
+                        chato_src={chatoExpressions[index]}
+                        index={index}
+                    />
+                </div>
+                <SupporterPeriodContainer settings={item} calc_support_period={calc_support_period}/>
+            </div>
+        ) : null;
+    });
+};
+
+const SupporterLabelComponent = ({ item, target_plan, chato_src }) => {
+    const is_icon_plan = ["mogu_2000", "mochi_1000"].includes(
+        target_plan
+    );
+
+    const supporter_label_component_classname = clsx(
+        styles.supporter_label_component,
+        {
+            [styles.is_icon_plan]: is_icon_plan,
+        }
+    );
+
+    const is_and_you = item.supporter_id === "and_you";
+    const is_default_icon = item.supporter_icon_id === "";
+
+    const file_name = is_and_you ? "and_you" : `supporter_${item.supporter_id}`;
+    const label_img_src = getSupportersLabelsPath(file_name);
+    const icon_img_src = getSupportersIconsPath(
+        `supporter_icon_${item.supporter_icon_id}`
+    );
+
+    return (
+        <div className={supporter_label_component_classname}>
+            {is_icon_plan && (
+                <div className={styles.supporter_icon_wrapper}>
+                    {is_default_icon ? (
+                        <img
+                            className={styles.default_chato_expression_image}
+                            src={chato_src}
+                            alt="chato expression"
+                        />
+                    ) : (
+                        <img
+                            className={styles.supporter_icon}
+                            src={icon_img_src}
+                            alt="supporter icon"
+                        />
+                    )}
+                </div>
+            )}
+            <img
+                className={styles.supporter_label_image}
+                src={label_img_src}
+                alt="supporter label"
+            />
+        </div>
+    );
+};
+
+const SupporterPeriodContainer = ({ settings, calc_support_period }) => {
     const period_data = extractKeys(settings, calc_support_period);
-
     return (
         <div className={styles.supporter_period_container}>
             {Object.entries(period_data).map(([key, item], index) => {
                 if (item === "") return null;
                 const class_name = clsx(styles.period_box, {
-                    [styles.mogu_bar]: item === "もぐもぐ_2000",
-                    [styles.mochi_bar]: item === "もちもち_1000",
-                    [styles.fuwa_bar]: item === "ふわふわ_500",
-                    [styles.basic_bar]: item === "Basic_300",
+                    [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 <div key={index} className={class_name}></div>
+                return <div key={index} className={class_name}></div>;
             })}
         </div>
     );
 };
 
-
-
 const extractKeys = (data, keys_to_extract) => {
     const result = {};
     for (const key of keys_to_extract) {
@@ -268,4 +315,31 @@ const extractKeys = (data, keys_to_extract) => {
         }
     }
     return result;
+};
+
+
+const ProgressBar = () => {
+    const [is_active, setIsActive] = useState(false);
+    useEffect(() => {
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                setIsActive(true);
+            });
+        });
+
+        const interval = setInterval(() => {
+            setIsActive(false);
+            setTimeout(() => setIsActive(true), 50);
+        }, SHUFFLE_INTERVAL_TIME);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    return (
+        <div
+            className={clsx(styles.progress_bar, {
+                [styles.progress_bar_active]: is_active,
+            })}
+        />
+    );
 };
\ No newline at end of file
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 b4135b87..25c6f967 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
@@ -1,3 +1,11 @@
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 2rem;
+}
+
 .supporters_wrapper {
     display: flex;
     justify-content: center;
@@ -218,4 +226,22 @@
     &.basic_bar {
         background-color: var(--dark_800_color);
     }
+}
+
+
+.progress_bar {
+    height: 0.2rem;
+    width: 0%;
+    &.progress_bar_active {
+        transition: width 20000ms linear;
+        background-color: var(--primary_400_color);
+        width: 100%;
+    }
+}
+
+.last_updated_local_date {
+    font-size: 1rem;
+    color: var(--dark_800_color);
+    width: 100%;
+    text-align: end;
 }
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/data.json b/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/data.json
deleted file mode 100644
index 12ef65eb..00000000
--- a/src-ui/app/config_page/setting_section/setting_box/supporters/supporters_container/supporters_wrapper/data.json
+++ /dev/null
@@ -1,343 +0,0 @@
-[
-	{
-		"supporter_id": 1,
-		"supporter_icon_id": "",
-		"2024-10": "Basic_300",
-		"2024-11": "Basic_300",
-		"2024-12": "Basic_300",
-		"2025-01": "Basic_300",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 2,
-		"supporter_icon_id": 8,
-		"2024-10": "もぐもぐ_2000",
-		"2024-11": "もぐもぐ_2000",
-		"2024-12": "もぐもぐ_2000",
-		"2025-01": "もぐもぐ_2000",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 3,
-		"supporter_icon_id": 4,
-		"2024-10": "もちもち_1000",
-		"2024-11": "もちもち_1000",
-		"2024-12": "もちもち_1000",
-		"2025-01": "もちもち_1000",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 4,
-		"supporter_icon_id": "",
-		"2024-10": "もぐもぐ_2000",
-		"2024-11": "もぐもぐ_2000",
-		"2024-12": "もぐもぐ_2000",
-		"2025-01": "もぐもぐ_2000",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 5,
-		"supporter_icon_id": "",
-		"2024-10": "ふわふわ_500",
-		"2024-11": "ふわふわ_500",
-		"2024-12": "ふわふわ_500",
-		"2025-01": "Basic_300",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 6,
-		"supporter_icon_id": "",
-		"2024-10": "ふわふわ_500",
-		"2024-11": "ふわふわ_500",
-		"2024-12": "ふわふわ_500",
-		"2025-01": "ふわふわ_500",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 7,
-		"supporter_icon_id": "",
-		"2024-10": "ふわふわ_500",
-		"2024-11": "ふわふわ_500",
-		"2024-12": "ふわふわ_500",
-		"2025-01": "ふわふわ_500",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 8,
-		"supporter_icon_id": "",
-		"2024-10": "Basic_300",
-		"2024-11": "Basic_300",
-		"2024-12": "Basic_300",
-		"2025-01": "",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 9,
-		"supporter_icon_id": 6,
-		"2024-10": "もぐもぐ_2000",
-		"2024-11": "もぐもぐ_2000",
-		"2024-12": "もぐもぐ_2000",
-		"2025-01": "もぐもぐ_2000",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 10,
-		"supporter_icon_id": "",
-		"2024-10": "Basic_300",
-		"2024-11": "Basic_300",
-		"2024-12": "Basic_300",
-		"2025-01": "Basic_300",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 11,
-		"supporter_icon_id": "",
-		"2024-10": "もぐもぐ_2000",
-		"2024-11": "もぐもぐ_2000",
-		"2024-12": "もぐもぐ_2000",
-		"2025-01": "もぐもぐ_2000",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 12,
-		"supporter_icon_id": "",
-		"2024-10": "もぐもぐ_2000",
-		"2024-11": "もぐもぐ_2000",
-		"2024-12": "もぐもぐ_2000",
-		"2025-01": "もぐもぐ_2000",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 13,
-		"supporter_icon_id": "",
-		"2024-10": "Basic_300",
-		"2024-11": "Basic_300",
-		"2024-12": "Basic_300",
-		"2025-01": "Basic_300",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 14,
-		"supporter_icon_id": 2,
-		"2024-10": "もちもち_1000",
-		"2024-11": "もちもち_1000",
-		"2024-12": "もちもち_1000",
-		"2025-01": "もちもち_1000",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 15,
-		"supporter_icon_id": 5,
-		"2024-10": "もぐもぐ_2000",
-		"2024-11": "もぐもぐ_2000",
-		"2024-12": "もぐもぐ_2000",
-		"2025-01": "もぐもぐ_2000",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 16,
-		"supporter_icon_id": "",
-		"2024-10": "もぐもぐ_2000",
-		"2024-11": "",
-		"2024-12": "",
-		"2025-01": "",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 17,
-		"supporter_icon_id": "",
-		"2024-10": "もちもち_1000",
-		"2024-11": "もちもち_1000",
-		"2024-12": "もちもち_1000",
-		"2025-01": "もちもち_1000",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 18,
-		"supporter_icon_id": "",
-		"2024-10": "Basic_300",
-		"2024-11": "Basic_300",
-		"2024-12": "",
-		"2025-01": "",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 19,
-		"supporter_icon_id": 1,
-		"2024-10": "もぐもぐ_2000",
-		"2024-11": "もぐもぐ_2000",
-		"2024-12": "もぐもぐ_2000",
-		"2025-01": "もぐもぐ_2000",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 20,
-		"supporter_icon_id": "",
-		"2024-10": "Basic_300",
-		"2024-11": "Basic_300",
-		"2024-12": "Basic_300",
-		"2025-01": "ふわふわ_500",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 21,
-		"supporter_icon_id": "",
-		"2024-10": "",
-		"2024-11": "ふわふわ_500",
-		"2024-12": "ふわふわ_500",
-		"2025-01": "ふわふわ_500",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 22,
-		"supporter_icon_id": 3,
-		"2024-10": "",
-		"2024-11": "",
-		"2024-12": "もぐもぐ_2000",
-		"2025-01": "もぐもぐ_2000",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 23,
-		"supporter_icon_id": "",
-		"2024-10": "",
-		"2024-11": "",
-		"2024-12": "",
-		"2025-01": "ふわふわ_500",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 24,
-		"supporter_icon_id": 7,
-		"2024-10": "",
-		"2024-11": "",
-		"2024-12": "",
-		"2025-01": "もぐもぐ_2000",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 25,
-		"supporter_icon_id": 9,
-		"2024-10": "",
-		"2024-11": "",
-		"2024-12": "",
-		"2025-01": "もぐもぐ_2000",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 26,
-		"supporter_icon_id": "",
-		"2024-10": "",
-		"2024-11": "",
-		"2024-12": "",
-		"2025-01": "もちもち_1000",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 27,
-		"supporter_icon_id": "",
-		"2024-10": "",
-		"2024-11": "",
-		"2024-12": "",
-		"2025-01": "Basic_300",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 28,
-		"supporter_icon_id": "",
-		"2024-10": "",
-		"2024-11": "",
-		"2024-12": "",
-		"2025-01": "Basic_300",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 29,
-		"supporter_icon_id": "",
-		"2024-10": "",
-		"2024-11": "",
-		"2024-12": "",
-		"2025-01": "",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": 30,
-		"supporter_icon_id": "",
-		"2024-10": "",
-		"2024-11": "",
-		"2024-12": "",
-		"2025-01": "",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	},
-	{
-		"supporter_id": "",
-		"supporter_icon_id": "",
-		"2024-10": "",
-		"2024-11": "",
-		"2024-12": "",
-		"2025-01": "",
-		"2025-02": "",
-		"2025-03": "",
-		"2025-04": ""
-	}
-]
\ No newline at end of file
diff --git a/src-ui/assets/supporters/chato_expressions/chato_expression_1.png b/src-ui/assets/supporters/chato_expressions/chato_expression_1.png
deleted file mode 100644
index 849ce433..00000000
Binary files a/src-ui/assets/supporters/chato_expressions/chato_expression_1.png and /dev/null differ
diff --git a/src-ui/assets/supporters/chato_expressions/chato_expression_2.png b/src-ui/assets/supporters/chato_expressions/chato_expression_2.png
deleted file mode 100644
index 8274f9b0..00000000
Binary files a/src-ui/assets/supporters/chato_expressions/chato_expression_2.png and /dev/null differ
diff --git a/src-ui/assets/supporters/chato_expressions/chato_expression_3.png b/src-ui/assets/supporters/chato_expressions/chato_expression_3.png
deleted file mode 100644
index 4cc17cf6..00000000
Binary files a/src-ui/assets/supporters/chato_expressions/chato_expression_3.png and /dev/null differ
diff --git a/src-ui/assets/supporters/chato_expressions/chato_expression_4.png b/src-ui/assets/supporters/chato_expressions/chato_expression_4.png
deleted file mode 100644
index e39e830f..00000000
Binary files a/src-ui/assets/supporters/chato_expressions/chato_expression_4.png and /dev/null differ
diff --git a/src-ui/assets/supporters/chato_expressions/chato_expression_5.png b/src-ui/assets/supporters/chato_expressions/chato_expression_5.png
deleted file mode 100644
index c0544641..00000000
Binary files a/src-ui/assets/supporters/chato_expressions/chato_expression_5.png and /dev/null differ
diff --git a/src-ui/assets/supporters/chato_expressions/chato_expression_6.png b/src-ui/assets/supporters/chato_expressions/chato_expression_6.png
deleted file mode 100644
index 21b04d09..00000000
Binary files a/src-ui/assets/supporters/chato_expressions/chato_expression_6.png and /dev/null differ
diff --git a/src-ui/assets/supporters/chato_expressions/chato_expression_7.png b/src-ui/assets/supporters/chato_expressions/chato_expression_7.png
deleted file mode 100644
index e53800aa..00000000
Binary files a/src-ui/assets/supporters/chato_expressions/chato_expression_7.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporter_cards/basic_card.png b/src-ui/assets/supporters/supporter_cards/basic_card.png
deleted file mode 100644
index c3a015ef..00000000
Binary files a/src-ui/assets/supporters/supporter_cards/basic_card.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporter_cards/fuwa_card.png b/src-ui/assets/supporters/supporter_cards/fuwa_card.png
deleted file mode 100644
index 379540ef..00000000
Binary files a/src-ui/assets/supporters/supporter_cards/fuwa_card.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporter_cards/mochi_card.png b/src-ui/assets/supporters/supporter_cards/mochi_card.png
deleted file mode 100644
index b8459285..00000000
Binary files a/src-ui/assets/supporters/supporter_cards/mochi_card.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporter_cards/mogu_card.png b/src-ui/assets/supporters/supporter_cards/mogu_card.png
deleted file mode 100644
index c049481d..00000000
Binary files a/src-ui/assets/supporters/supporter_cards/mogu_card.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_icons/supporter_icon_1.png b/src-ui/assets/supporters/supporters_icons/supporter_icon_1.png
deleted file mode 100644
index b8629841..00000000
Binary files a/src-ui/assets/supporters/supporters_icons/supporter_icon_1.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_icons/supporter_icon_2.png b/src-ui/assets/supporters/supporters_icons/supporter_icon_2.png
deleted file mode 100644
index ee0d91ac..00000000
Binary files a/src-ui/assets/supporters/supporters_icons/supporter_icon_2.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_icons/supporter_icon_3.png b/src-ui/assets/supporters/supporters_icons/supporter_icon_3.png
deleted file mode 100644
index 3bfe93d3..00000000
Binary files a/src-ui/assets/supporters/supporters_icons/supporter_icon_3.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_icons/supporter_icon_4.png b/src-ui/assets/supporters/supporters_icons/supporter_icon_4.png
deleted file mode 100644
index 7c088051..00000000
Binary files a/src-ui/assets/supporters/supporters_icons/supporter_icon_4.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_icons/supporter_icon_5.png b/src-ui/assets/supporters/supporters_icons/supporter_icon_5.png
deleted file mode 100644
index 28eff424..00000000
Binary files a/src-ui/assets/supporters/supporters_icons/supporter_icon_5.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_icons/supporter_icon_6.png b/src-ui/assets/supporters/supporters_icons/supporter_icon_6.png
deleted file mode 100644
index 5d7a6d97..00000000
Binary files a/src-ui/assets/supporters/supporters_icons/supporter_icon_6.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_icons/supporter_icon_7.png b/src-ui/assets/supporters/supporters_icons/supporter_icon_7.png
deleted file mode 100644
index 11d0860d..00000000
Binary files a/src-ui/assets/supporters/supporters_icons/supporter_icon_7.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_icons/supporter_icon_8.png b/src-ui/assets/supporters/supporters_icons/supporter_icon_8.png
deleted file mode 100644
index b72e7e91..00000000
Binary files a/src-ui/assets/supporters/supporters_icons/supporter_icon_8.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_icons/supporter_icon_9.png b/src-ui/assets/supporters/supporters_icons/supporter_icon_9.png
deleted file mode 100644
index 10456112..00000000
Binary files a/src-ui/assets/supporters/supporters_icons/supporter_icon_9.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/and_you.png b/src-ui/assets/supporters/supporters_labels/and_you.png
deleted file mode 100644
index 5dba52d7..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/and_you.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_1.png b/src-ui/assets/supporters/supporters_labels/supporter_1.png
deleted file mode 100644
index da84f7bc..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_1.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_10.png b/src-ui/assets/supporters/supporters_labels/supporter_10.png
deleted file mode 100644
index adcb90e1..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_10.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_11.png b/src-ui/assets/supporters/supporters_labels/supporter_11.png
deleted file mode 100644
index 34874cdb..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_11.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_12.png b/src-ui/assets/supporters/supporters_labels/supporter_12.png
deleted file mode 100644
index 91b4434c..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_12.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_13.png b/src-ui/assets/supporters/supporters_labels/supporter_13.png
deleted file mode 100644
index 97874ce5..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_13.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_14.png b/src-ui/assets/supporters/supporters_labels/supporter_14.png
deleted file mode 100644
index ccc0dd1d..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_14.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_15.png b/src-ui/assets/supporters/supporters_labels/supporter_15.png
deleted file mode 100644
index 3856a8c0..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_15.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_16.png b/src-ui/assets/supporters/supporters_labels/supporter_16.png
deleted file mode 100644
index 01f48ec8..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_16.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_17.png b/src-ui/assets/supporters/supporters_labels/supporter_17.png
deleted file mode 100644
index 2597f4d1..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_17.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_18.png b/src-ui/assets/supporters/supporters_labels/supporter_18.png
deleted file mode 100644
index 91f6997b..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_18.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_19.png b/src-ui/assets/supporters/supporters_labels/supporter_19.png
deleted file mode 100644
index 40cdbf4f..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_19.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_2.png b/src-ui/assets/supporters/supporters_labels/supporter_2.png
deleted file mode 100644
index f739f4f1..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_2.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_20.png b/src-ui/assets/supporters/supporters_labels/supporter_20.png
deleted file mode 100644
index fa54e057..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_20.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_21.png b/src-ui/assets/supporters/supporters_labels/supporter_21.png
deleted file mode 100644
index be534d66..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_21.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_22.png b/src-ui/assets/supporters/supporters_labels/supporter_22.png
deleted file mode 100644
index ae85a713..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_22.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_23.png b/src-ui/assets/supporters/supporters_labels/supporter_23.png
deleted file mode 100644
index 578ec516..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_23.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_24.png b/src-ui/assets/supporters/supporters_labels/supporter_24.png
deleted file mode 100644
index 28da5526..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_24.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_25.png b/src-ui/assets/supporters/supporters_labels/supporter_25.png
deleted file mode 100644
index 5531503c..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_25.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_26.png b/src-ui/assets/supporters/supporters_labels/supporter_26.png
deleted file mode 100644
index 58efb139..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_26.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_3.png b/src-ui/assets/supporters/supporters_labels/supporter_3.png
deleted file mode 100644
index 4989b4d6..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_3.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_4.png b/src-ui/assets/supporters/supporters_labels/supporter_4.png
deleted file mode 100644
index df433dba..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_4.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_5.png b/src-ui/assets/supporters/supporters_labels/supporter_5.png
deleted file mode 100644
index ea70c489..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_5.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_6.png b/src-ui/assets/supporters/supporters_labels/supporter_6.png
deleted file mode 100644
index e2c5952a..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_6.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_7.png b/src-ui/assets/supporters/supporters_labels/supporter_7.png
deleted file mode 100644
index 29f8df44..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_7.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_8.png b/src-ui/assets/supporters/supporters_labels/supporter_8.png
deleted file mode 100644
index 78b2349f..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_8.png and /dev/null differ
diff --git a/src-ui/assets/supporters/supporters_labels/supporter_9.png b/src-ui/assets/supporters/supporters_labels/supporter_9.png
deleted file mode 100644
index cb25ec43..00000000
Binary files a/src-ui/assets/supporters/supporters_labels/supporter_9.png and /dev/null differ
diff --git a/src-ui/assets/supporters/vrct_supporters_title.png b/src-ui/assets/supporters/vrct_supporters_title.png
deleted file mode 100644
index c15324af..00000000
Binary files a/src-ui/assets/supporters/vrct_supporters_title.png and /dev/null differ
diff --git a/src-ui/logics/configs/index.js b/src-ui/logics/configs/index.js
index 8bcf2a7c..e47621c2 100644
--- a/src-ui/logics/configs/index.js
+++ b/src-ui/logics/configs/index.js
@@ -56,5 +56,9 @@ export { useHotkeys } from "./hotkeys/useHotkeys";
 export { useOscIpAddress } from "./advanced_settings/useOscIpAddress";
 export { useOscPort } from "./advanced_settings/useOscPort";
 
+
+export { useSupporters } from "./supporters/useSupporters";
+
+
 export { useSettingBoxScrollPosition } from "./useSettingBoxScrollPosition";
 export { useSoftwareVersion } from "./useSoftwareVersion";
\ No newline at end of file
diff --git a/src-ui/logics/configs/supporters/useSupporters.jsx b/src-ui/logics/configs/supporters/useSupporters.jsx
new file mode 100644
index 00000000..f465643d
--- /dev/null
+++ b/src-ui/logics/configs/supporters/useSupporters.jsx
@@ -0,0 +1,29 @@
+import { useStore_SupportersData } from "@store";
+import { supporters_data_url } from "@ui_configs";
+export const useSupporters = () => {
+    const { currentSupportersData, updateSupportersData, pendingSupportersData, errorSupportersData } = useStore_SupportersData();
+
+    const asyncFetchSupportersData = async () => {
+        if (currentSupportersData.state === "pending") return;
+        pendingSupportersData();
+        try {
+            const res = await fetch(supporters_data_url);
+            // const res = await fetch(supporters_data_url, { cache: "no-store" });
+            if (!res.ok) {
+                throw new Error("Network response was not ok");
+            }
+            const data = await res.json();
+            updateSupportersData(data);
+        } catch (error) {
+            console.error("Error fetching supporters' data:", error);
+            errorSupportersData();
+        }
+    };
+
+    return {
+        asyncFetchSupportersData,
+        currentSupportersData,
+        updateSupportersData,
+        pendingSupportersData,
+    };
+};
\ No newline at end of file
diff --git a/src-ui/store.js b/src-ui/store.js
index 24043576..3f8391f0 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -280,5 +280,7 @@ export const { atomInstance: Atom_OscPort, useHook: useStore_OscPort } = createA
 
 export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useStore_IsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector");
 
+export const { atomInstance: Atom_SupportersData, useHook: useStore_SupportersData } = createAtomWithHook(null, "SupportersData", {is_state_ok: true});
+
 export const { atomInstance: Atom_VrctPosterIndex, useHook: useStore_VrctPosterIndex } = createAtomWithHook(0, "VrctPosterIndex");
 export const { atomInstance: Atom_PosterShowcaseWorldPageIndex, useHook: useStore_PosterShowcaseWorldPageIndex } = createAtomWithHook(0, "PosterShowcaseWorldPageIndex");
\ No newline at end of file
diff --git a/src-ui/ui_configs.js b/src-ui/ui_configs.js
index 1b854015..ef58fba8 100644
--- a/src-ui/ui_configs.js
+++ b/src-ui/ui_configs.js
@@ -74,4 +74,7 @@ export const whisper_weight_type_status = [
     { id: "large-v1", label: "large-v1", is_downloaded: false, progress: null },
     { id: "large-v2", label: "large-v2", is_downloaded: false, progress: null },
     { id: "large-v3", label: "large-v3", is_downloaded: false, progress: null },
-];
\ No newline at end of file
+];
+
+export const supporters_data_url = "https://shiinasakamoto.github.io/vrct_supporters/assets/supporters/data.json";
+export const supporters_images_url = "https://ShiinaSakamoto.github.io/vrct_supporters/assets/supporters";
\ No newline at end of file