diff --git a/src-python/config.py b/src-python/config.py
index 1d9b530d..e5ac086e 100644
--- a/src-python/config.py
+++ b/src-python/config.py
@@ -347,7 +347,7 @@ class Config:
 
     @TRANSPARENCY.setter
     def TRANSPARENCY(self, value):
-        if isinstance(value, int) and self.TRANSPARENCY_RANGE[0] <= value <= self.TRANSPARENCY_RANGE[1]:
+        if isinstance(value, int):
             self._TRANSPARENCY = value
             saveJson(self.PATH_CONFIG, inspect.currentframe().f_code.co_name, value)
 
diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx
index 9533054e..8c8fb406 100644
--- a/src-ui/app/App.jsx
+++ b/src-ui/app/App.jsx
@@ -13,6 +13,7 @@ export const App = () => {
             <ConfigPageCloseTrigger />
             <UiSizeController />
             <FontFamilyController />
+            <TransparencyController />
 
             <WindowTitleBar />
             <div className={styles.pages_wrapper}>
@@ -38,6 +39,7 @@ import { useUiLanguage } from "@logics_configs/useUiLanguage";
 import { useUiScaling } from "@logics_configs/useUiScaling";
 import { useMessageLogUiScaling } from "@logics_configs/useMessageLogUiScaling";
 import { useSelectedFontFamily } from "@logics_configs/useSelectedFontFamily";
+import { useTransparency } from "@logics_configs/useTransparency";
 
 import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
 import { useLanguageSettings } from "@logics_main/useLanguageSettings";
@@ -72,6 +74,7 @@ const StartPythonFacadeComponent = () => {
     const { getUiScaling } = useUiScaling();
     const { getMessageLogUiScaling } = useMessageLogUiScaling();
     const { getSelectedFontFamily } = useSelectedFontFamily();
+    const { getTransparency } = useTransparency();
 
     const {
         getSelectedPresetTabNumber,
@@ -93,6 +96,7 @@ const StartPythonFacadeComponent = () => {
                 getMessageLogUiScaling();
                 getIsMainPageCompactMode();
                 getMessageInputBoxRatio();
+                getTransparency();
 
                 asyncFetchFonts();
                 getSelectedFontFamily();
@@ -231,4 +235,14 @@ const useAsyncFetchFonts = () => {
         }
     };
     return { asyncFetchFonts };
+};
+
+
+const TransparencyController = () => {
+    const { currentTransparency } = useTransparency();
+    useEffect(() => {
+        document.documentElement.style.setProperty("opacity", `${currentTransparency.data / 100}`);
+    }, [currentTransparency.data]);
+
+    return null;
 };
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
index 2c14f4da..69fa94f3 100644
--- a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
@@ -26,6 +26,7 @@ export const Appearance = () => {
             <UiScalingContainer />
             <MessageLogUiScalingContainer />
             <FontFamilyContainer />
+            <TransparencyContainer />
 
 
 
@@ -209,4 +210,46 @@ const FontFamilyContainer = () => {
             state={currentSelectedFontFamily.state}
         />
     );
+};
+
+import { useTransparency } from "@logics_configs/useTransparency";
+
+const TransparencyContainer = () => {
+    const { t } = useTranslation();
+    const { currentTransparency, setTransparency } = useTransparency();
+    const [ui_message_log_ui_scaling, setUiTransparency] = useState(currentTransparency.data);
+
+    const onchangeFunction = (value) => {
+        setUiTransparency(value);
+    };
+    const onchangeCommittedFunction = (value) => {
+        setTransparency(value);
+    };
+    useEffect(() => {
+        setUiTransparency(currentTransparency.data);
+    }, [currentTransparency.data]);
+
+    const createMarks = (min, max) => {
+        const marks = [];
+        for (let value = min; value <= max; value += 10) {
+            marks.push({ value, label: `${value}` });
+        }
+        return marks;
+    };
+
+    const marks = createMarks(40, 100);
+
+    return (
+        <SliderContainer
+            label={t("config_page.transparency.label") + " (%)"}
+            min="40"
+            max="100"
+            onchangeCommittedFunction={onchangeCommittedFunction}
+            onchangeFunction={onchangeFunction}
+            variable={ui_message_log_ui_scaling}
+            marks={marks}
+            step={null}
+            track={false}
+        />
+    );
 };
\ No newline at end of file
diff --git a/src-ui/logics/configs/useTransparency.js b/src-ui/logics/configs/useTransparency.js
new file mode 100644
index 00000000..9ab7429f
--- /dev/null
+++ b/src-ui/logics/configs/useTransparency.js
@@ -0,0 +1,24 @@
+import { useStore_Transparency } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useTransparency = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentTransparency, updateTransparency, pendingTransparency } = useStore_Transparency();
+
+    const getTransparency = () => {
+        pendingTransparency();
+        asyncStdoutToPython("/get/data/transparency");
+    };
+
+    const setTransparency = (selected_transparency) => {
+        pendingTransparency();
+        asyncStdoutToPython("/set/data/transparency", selected_transparency);
+    };
+
+    return {
+        currentTransparency,
+        getTransparency,
+        updateTransparency,
+        setTransparency,
+    };
+};
\ No newline at end of file
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index bfc06aea..c2cabe2c 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -30,6 +30,7 @@ import { useSelectedFontFamily } from "@logics_configs/useSelectedFontFamily";
 import { useUiLanguage } from "@logics_configs/useUiLanguage";
 import { useUiScaling } from "@logics_configs/useUiScaling";
 import { useMessageLogUiScaling } from "@logics_configs/useMessageLogUiScaling";
+import { useTransparency } from "@logics_configs/useTransparency";
 
 export const useReceiveRoutes = () => {
     const { updateIsMainPageCompactMode } = useIsMainPageCompactMode();
@@ -77,6 +78,7 @@ export const useReceiveRoutes = () => {
 
     const { updateMessageInputBoxRatio } = useMessageInputBoxRatio();
     const { updateSelectedFontFamily } = useSelectedFontFamily();
+    const { updateTransparency } = useTransparency();
 
 
     const routes = {
@@ -213,6 +215,9 @@ export const useReceiveRoutes = () => {
         "/get/data/font_family": updateSelectedFontFamily,
         "/set/data/font_family": updateSelectedFontFamily,
 
+        "/get/data/transparency": updateTransparency,
+        "/set/data/transparency": updateTransparency,
+
         // Others Tab
         "/get/data/auto_clear_message_box": updateEnableAutoClearMessageBox,
         "/set/enable/auto_clear_message_box": updateEnableAutoClearMessageBox,
diff --git a/src-ui/store.js b/src-ui/store.js
index e21379f0..e104d8af 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -174,6 +174,7 @@ export const { atomInstance: Atom_UiScaling, useHook: useStore_UiScaling } = cre
 export const { atomInstance: Atom_MessageLogUiScaling, useHook: useStore_MessageLogUiScaling } = createAtomWithHook(100, "MessageLogUiScaling");
 export const { atomInstance: Atom_SelectedFontFamily, useHook: useStore_SelectedFontFamily } = createAtomWithHook("Yu Gothic UI", "SelectedFontFamily");
 export const { atomInstance: Atom_SelectableFontFamilyList, useHook: useStore_SelectableFontFamilyList } = createAtomWithHook({}, "SelectableFontFamilyList");
+export const { atomInstance: Atom_Transparency, useHook: useStore_Transparency } = createAtomWithHook(100, "Transparency");
 
 
 export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useStore_IsOpenedWordFilterList } = createAtomWithHook(false, "IsOpenedWordFilterList");