diff --git a/locales/en.yml b/locales/en.yml
index d786581c..fe6c089b 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -127,12 +127,12 @@ config_page:
 
     translation:
         ctranslate2_weight_type:
-            label: Select Internal Translation Model
+            label: Internal Translation Model
             desc: You can choose the translation model to use for the internal translation engine.
             small: Basic model ({{capacity}})
             large: High accuracy model ({{capacity}})
         ctranslate2_compute_device:
-            label: Select Internal Translation Compute Device
+            label: Internal Translation Compute Device
         deepl_auth_key:
             label: DeepL Auth Key
             desc: Please select {{translator}} on the main screen with DeepL_API when using. ※Some languages may not be supported.
@@ -178,16 +178,14 @@ config_page:
             desc: It is the lower limit for the number of transcribed words, and only when this number is exceeded will the transcription results be displayed logs.
             error_message: You can set a number equal to or greater than 0.
         select_transcription_engine:
-            label: Select Transcription Engine
+            label: Transcription Engine
         whisper_weight_type:
-            label: Select Whisper Model
-            desc: |-
-                Generally, models with larger capacity tend to have higher accuracy, but this also results in longer transcription times and increased CPU usage. Please refer to the documentation for explanations of each model.
-                ※Larger models, especially those exceeding medium size, can be challenging to run even depending on the CPU's performance.
+            label: Whisper Model
+            desc: Models with larger capacities tend to have higher accuracy, but they also consume more CPU and GPU resources.
             model_template: '{{model_name}} model ({{capacity}})'
             recommended_model_template: '{{model_name}} model ({{capacity}}) (Recommended)'
         whisper_compute_device:
-            label: Select Whisper Compute Device
+            label: Whisper Compute Device
 
     vr:
         single_line: Single line
@@ -202,6 +200,12 @@ config_page:
         x_rotation: X-axis rotation
         y_rotation: Y-axis rotation
         z_rotation: Z-axis rotation
+        sample_text_button:
+            start: |-
+                Send sample texts
+                to Overlay
+            stop: Stop Sending
+            sample_text: Sample text.
         opacity: Opacity
         ui_scaling: UI Scaling
         display_duration: Display duration
diff --git a/locales/ja.yml b/locales/ja.yml
index 8188e038..dc6ffd97 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -180,9 +180,7 @@ config_page:
             label: 音声認識で使用するエンジン
         whisper_weight_type:
             label: Whisperモデルのタイプ
-            desc: |-
-                基本的に、容量が多いモデルほど精度は高いですが、文字起こしまでの時間が伸び、CPU使用率も増加します。各モデルの説明はドキュメントをご覧ください。
-                ※特にmediumより容量の大きいモデルは、CPUの性能によっては使用すらも困難です。
+            desc: 容量が大きいモデルほど精度は高いですが、その分CPUやGPUを占有します。
             model_template: '{{model_name}} モデル ({{capacity}})'
             recommended_model_template: '{{model_name}} モデル ({{capacity}}) (推奨)'
         whisper_compute_device:
@@ -195,14 +193,20 @@ config_page:
         restore_default_settings: 初期値に戻す
         position: 位置
         rotation: 回転
-        opacity: 透明度
-        ui_scaling: サイズ
         x_position: X軸（左右）
         y_position: Y軸（上下）
         z_position: Z軸（前後）
         x_rotation: X軸の回転
         y_rotation: Y軸の回転
         z_rotation: Z軸の回転
+        sample_text_button:
+            start: |-
+                サンプルテキストを
+                Overlayに送信する
+            stop: 送信を停止
+            sample_text: サンプルテキスト
+        opacity: 透明度
+        ui_scaling: サイズ
         display_duration: 表示時間
         fadeout_duration: フェードアウト時間
         common_settings: 共通設定
diff --git a/locales/ko.yml b/locales/ko.yml
index 79b4ac53..7547b63d 100644
--- a/locales/ko.yml
+++ b/locales/ko.yml
@@ -168,7 +168,7 @@ config_page:
             desc: 일부 언어에서는 음성 인식의 정확도가 향상될 수 있어요. 음성 인식 중 CPU 사용률이 올라가기 때문에 사용하시는 PC의 사양을 고려하여 이 기능을 사용해주세요.
         whisper_weight_type:
             label: Whisper 모델 타입
-            desc: "기본적으로 용량이 많은 모델일수록 정밀도는 높지만, 음성 인식의 시간이 늘어나며 CPU 사용률도 늘어나요.각 모델의 설명은 문서를 참조해주세요.\n※특히 medium보다 용량이 큰 모델은 CPU의 성능에 따라서는 사용조차 어려울 수 있어요. "
+            # desc: "기본적으로 용량이 많은 모델일수록 정밀도는 높지만, 음성 인식의 시간이 늘어나며 CPU 사용률도 늘어나요.각 모델의 설명은 문서를 참조해주세요.\n※특히 medium보다 용량이 큰 모델은 CPU의 성능에 따라서는 사용조차 어려울 수 있어요. "
             model_template: '{{model_name}} 모델 ({{capacity}})'
             recommended_model_template: '{{model_name}} 모델 ({{capacity}}) (권장)'
 
diff --git a/locales/zh-Hans.yml b/locales/zh-Hans.yml
index c9bf1c73..73b89c72 100644
--- a/locales/zh-Hans.yml
+++ b/locales/zh-Hans.yml
@@ -168,9 +168,9 @@ config_page:
             desc: 在某些语言中,语音识别的准确性可能会提高.语音识别的过程中,CPU占有率可能会提高,请根据你的pc性能来决定是否使用它.
         whisper_weight_type:
             label: 选择某个Whisper模型
-            desc: |-
-                通常来说,容量越大的模型精度也会越高,但也会增加文字显示所需要的时间和CPU的使用率。请浏览各个模型的文档
-                ※特别是大于medium容量的模型、因CPU性能原因甚至无法使用。
+            # desc: |-
+            #     通常来说,容量越大的模型精度也会越高,但也会增加文字显示所需要的时间和CPU的使用率。请浏览各个模型的文档
+            #     ※特别是大于medium容量的模型、因CPU性能原因甚至无法使用。
             model_template: '{{model_name}} 模型 ({{capacity}})'
             recommended_model_template: '{{model_name}} 模型 ({{capacity}}) (推荐)'
 
diff --git a/locales/zh-Hant.yml b/locales/zh-Hant.yml
index ac6cda4d..10388bf9 100644
--- a/locales/zh-Hant.yml
+++ b/locales/zh-Hant.yml
@@ -167,9 +167,9 @@ config_page:
             desc: 在某些語言中，語音識別的準確性可能會提高。使用語音識別時，CPU使用率會增加，請根據你的PC規格考慮是否使用此功能。
         whisper_weight_type:
             label: 選擇 Whisper 模型
-            desc: |-
-                一般來說，容量較大的模型往往具有更高的準確性，但這也導致轉錄時間較長和CPU使用率增加。請參考文檔了解各模型的說明。
-                ※特別是超過中等大小的模型，根據CPU性能可能難以運行。
+            # desc: |-
+            #     一般來說，容量較大的模型往往具有更高的準確性，但這也導致轉錄時間較長和CPU使用率增加。請參考文檔了解各模型的說明。
+            #     ※特別是超過中等大小的模型，根據CPU性能可能難以運行。
             model_template: '{{model_name}}模型（{{capacity}}）'
             recommended_model_template: '{{model_name}}模型（{{capacity}}）（推薦）'
 
diff --git a/src-ui/app/_index_css/variables.css b/src-ui/app/_index_css/variables.css
index 8a759d0c..2d38f67a 100644
--- a/src-ui/app/_index_css/variables.css
+++ b/src-ui/app/_index_css/variables.css
@@ -49,11 +49,12 @@
     --dark_1000_color: #151517;
 
     --dark_825_color_cc: #434447cc;
+    --dark_550_color_22: #94959922;
 
 
     --title_bar_height: 2rem;
     --main_page_topbar_height: 4.8rem;
-    --config_page_sidebar_width: 18rem;
+    --config_page_sidebar_width: 16.8rem;
     --config_page_topbar_height: 8rem;
 
     --font_family: "Yu Gothic UI";
diff --git a/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
index 09b56263..7051ee17 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.jsx
@@ -67,7 +67,7 @@ export const CheckboxContainer = (props) => (
 );
 
 export const SwitchBoxContainer = (props) => (
-    <CommonContainer Component={SwitchBox} {...props} />
+    <CommonContainer Component={SwitchBox} {...props} add_break_point={false}/>
 );
 
 export const EntryContainer = (props) => (
@@ -78,15 +78,22 @@ export const RadioButtonContainer = (props) => (
     <CommonContainer Component={RadioButton} {...props} />
 );
 
-export const DeeplAuthKeyContainer = (props) => (
-    <div className={styles.container}>
-        <div className={styles.deepl_auth_key_label_section}>
-            <LabelComponent label={props.label} desc={props.desc} />
-            <OpenWebpage_DeeplAuthKey />
+export const DeeplAuthKeyContainer = (props) => {
+    const { currentIsBreakPoint } = useStore_IsBreakPoint();
+    const container_class = clsx(styles.container, {
+        [styles.is_break_point]: currentIsBreakPoint.data,
+    });
+
+    return (
+        <div className={container_class}>
+            <div className={styles.deepl_auth_key_label_section}>
+                <LabelComponent label={props.label} desc={props.desc} />
+                <OpenWebpage_DeeplAuthKey />
+            </div>
+            <DeeplAuthKey {...props} />
         </div>
-        <DeeplAuthKey {...props} />
-    </div>
-);
+    );
+};
 
 export const ActionButtonContainer = (props) => (
     <CommonContainer Component={ActionButton} {...props} add_break_point={false}/>
diff --git a/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss
index 3de7a81d..66bb6464 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/_templates/Templates.module.scss
@@ -4,7 +4,7 @@
     justify-content: space-between;
     align-items: center;
     padding: 2rem;
-    gap: 6rem;
+    gap: 10rem;
     &.flex_column {
         flex-direction: column;
     }
diff --git a/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx b/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
index e9b4e4e5..958cddf8 100644
--- a/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/device/Device.jsx
@@ -1,5 +1,7 @@
 import { useTranslation } from "react-i18next";
 import styles from "./Device.module.scss";
+import clsx from "clsx";
+import { useStore_IsBreakPoint } from "@store";
 import { ui_configs } from "@ui_configs";
 import {
     useEnableAutoMicSelect,
@@ -68,9 +70,14 @@ const Mic_Container = () => {
         }
     };
 
+    const { currentIsBreakPoint } = useStore_IsBreakPoint();
+    const device_container_class = clsx(styles.device_container, {
+        [styles.is_break_point]: currentIsBreakPoint.data,
+    });
+
     return (
         <div className={styles.mic_container}>
-            <div className={styles.device_container} onMouseLeave={onMouseLeaveFunction}>
+            <div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
                 <LabelComponent label={t("config_page.device.mic_host_device.label")} />
                 <div className={styles.device_contents}>
 
@@ -159,9 +166,14 @@ const Speaker_Container = () => {
 
     };
 
+    const { currentIsBreakPoint } = useStore_IsBreakPoint();
+    const device_container_class = clsx(styles.device_container, {
+        [styles.is_break_point]: currentIsBreakPoint.data,
+    });
+
     return (
         <div className={styles.speaker_container}>
-            <div className={styles.device_container} onMouseLeave={onMouseLeaveFunction}>
+            <div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
                 <LabelComponent label={t("config_page.device.speaker_device.label")} />
                 <div className={styles.device_contents}>
 
diff --git a/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss b/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss
index 3f050ded..65fab80a 100644
--- a/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss
@@ -16,6 +16,17 @@
     align-items: center;
     padding: 2rem;
     margin-bottom: 0rem;
+    &.is_break_point {
+        flex-direction: column;
+        gap: 2rem;
+        align-items: start;
+        & .device_contents {
+            display: flex;
+            width: 100%;
+            justify-content: space-between;
+            padding-left: 0rem;
+        }
+    }
 }
 
 .threshold_container {
diff --git a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
index fabe60e8..cf19c1ab 100644
--- a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
@@ -20,8 +20,11 @@ import {
     useIsEnabledOverlayLargeLog,
     useOverlayLargeLogSettings,
     useOverlayShowOnlyTranslatedMessages,
+    useSendTextToOverlay,
 } from "@logics_configs";
 
+import RedoSvg from "@images/redo.svg?react";
+
 export const Vr = () => {
     const { t } = useTranslation();
     const [is_opened_small_settings, setIsOpenedSmallSettings] = useState(true);
@@ -48,24 +51,26 @@ export const Vr = () => {
                     is_selected={is_opened_small_settings}
                     label_1={t("config_page.vr.single_line")}
                     label_2={t("config_page.vr.multi_lines")}
-                    />
+                />
                 {is_opened_small_settings ? (
                     <OverlaySettingsContainer
-                    id="overlay_settings_small"
-                    ui_configs={ui_configs.overlay_small_log}
-                    current_overlay_settings={currentOverlaySmallLogSettings.data}
-                    set_overlay_settings={setOverlaySmallLogSettings}
-                    current_is_enabled_overlay={currentIsEnabledOverlaySmallLog}
-                    toggle_is_enabled_overlay={toggleIsEnabledOverlaySmallLog}
+                        id="overlay_settings_small"
+                        ui_configs={ui_configs.overlay_small_log}
+                        default_ui_configs={ui_configs.overlay_small_log_default_settings}
+                        current_overlay_settings={currentOverlaySmallLogSettings.data}
+                        set_overlay_settings={setOverlaySmallLogSettings}
+                        current_is_enabled_overlay={currentIsEnabledOverlaySmallLog}
+                        toggle_is_enabled_overlay={toggleIsEnabledOverlaySmallLog}
                     />
                 ) : (
                     <OverlaySettingsContainer
-                    id="overlay_settings_large"
-                    ui_configs={ui_configs.overlay_large_log}
-                    current_overlay_settings={currentOverlayLargeLogSettings.data}
-                    set_overlay_settings={setOverlayLargeLogSettings}
-                    current_is_enabled_overlay={currentIsEnabledOverlayLargeLog}
-                    toggle_is_enabled_overlay={toggleIsEnabledOverlayLargeLog}
+                        id="overlay_settings_large"
+                        ui_configs={ui_configs.overlay_large_log}
+                        default_ui_configs={ui_configs.overlay_large_log_default_settings}
+                        current_overlay_settings={currentOverlayLargeLogSettings.data}
+                        set_overlay_settings={setOverlayLargeLogSettings}
+                        current_is_enabled_overlay={currentIsEnabledOverlayLargeLog}
+                        toggle_is_enabled_overlay={toggleIsEnabledOverlayLargeLog}
                     />
                 )}
             </div>
@@ -86,6 +91,7 @@ const OverlaySettingsContainer = ({
     current_is_enabled_overlay,
     toggle_is_enabled_overlay,
     ui_configs,
+    default_ui_configs,
     id
 }) => {
 
@@ -115,8 +121,8 @@ const OverlaySettingsContainer = ({
         setTimeoutId(newTimeoutId);
     };
 
-    const selectTrackerFunction = (value) => {
-        const new_data = { ...settings, tracker: value };
+    const selectFunction = (key, value) => {
+        const new_data = { ...settings, [key]: value };
         set_overlay_settings(new_data);
     };
 
@@ -137,15 +143,16 @@ const OverlaySettingsContainer = ({
 
             <div className={styles.position_rotation_controls_box}>
                 {is_opened_position_controller ? (
-                    <PositionControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} />
+                    <PositionControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} default_ui_configs={default_ui_configs} selectFunction={selectFunction}/>
                 ) : (
-                    <RotationControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} />
+                    <RotationControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} default_ui_configs={default_ui_configs} selectFunction={selectFunction}/>
                 )}
+                <SendSampleTextToggleButton />
             </div>
             <OtherControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} />
             <RadioButtonContainer
                 label={t("config_page.vr.tracker")}
-                selectFunction={selectTrackerFunction}
+                selectFunction={(value) => selectFunction("tracker", value)}
                 name={id}
                 options={[
                     { id: "HMD", label: t("config_page.vr.hmd") },
@@ -180,13 +187,16 @@ const PageSwitcherContainer = (props) => {
     );
 };
 
-const PositionControls = ({settings, onchangeFunction, ui_configs}) => {
+const PositionControls = ({settings, onchangeFunction, selectFunction, ui_configs, default_ui_configs}) => {
     const { t } = useTranslation();
 
     return (
         <div className={styles.position_controls}>
             <div className={styles.position_wrapper}>
-                <label className={clsx(styles.slider_label, styles.x_position_label)}>{t("config_page.vr.x_position")}</label>
+                <p className={clsx(styles.slider_label, styles.x_position_label)}>
+                    {t("config_page.vr.x_position")}
+                    <ResetButton onClickFunction={() => selectFunction("x_pos", default_ui_configs.x_pos)} />
+                </p>
                 <Slider
                     className={styles.x_position_slider}
                     variable={settings.x_pos}
@@ -197,7 +207,10 @@ const PositionControls = ({settings, onchangeFunction, ui_configs}) => {
                 />
             </div>
             <div className={styles.position_wrapper}>
-                <label className={clsx(styles.slider_label, styles.y_position_label)}>{t("config_page.vr.y_position")}</label>
+                <p className={clsx(styles.slider_label, styles.y_position_label)}>
+                    {t("config_page.vr.y_position")}
+                    <ResetButton onClickFunction={() => selectFunction("y_pos", default_ui_configs.y_pos)} />
+                </p>
                 <Slider
                     className={styles.y_position_slider}
                     variable={settings.y_pos}
@@ -209,7 +222,10 @@ const PositionControls = ({settings, onchangeFunction, ui_configs}) => {
                 />
             </div>
             <div className={styles.position_wrapper}>
-                <label className={clsx(styles.slider_label, styles.z_position_label)}>{t("config_page.vr.z_position")}</label>
+                <p className={clsx(styles.slider_label, styles.z_position_label)}>
+                    {t("config_page.vr.z_position")}
+                    <ResetButton onClickFunction={() => selectFunction("z_pos", default_ui_configs.z_pos)} />
+                </p>
                 <Slider
                     className={styles.z_position_slider}
                     variable={settings.z_pos}
@@ -224,13 +240,16 @@ const PositionControls = ({settings, onchangeFunction, ui_configs}) => {
     );
 };
 
-const RotationControls = ({settings, onchangeFunction}) => {
+const RotationControls = ({settings, onchangeFunction, selectFunction, default_ui_configs}) => {
     const { t } = useTranslation();
 
     return (
         <div className={styles.rotation_controls}>
             <div className={styles.rotation_wrapper}>
-                <label className={clsx(styles.slider_label, styles.x_rotation_label)}>{t("config_page.vr.x_rotation")}</label>
+                <p className={clsx(styles.slider_label, styles.x_rotation_label)}>
+                    {t("config_page.vr.x_rotation")}
+                    <ResetButton onClickFunction={() => selectFunction("x_rotation", default_ui_configs.y_pos)} />
+                </p>
                 <Slider
                     className={styles.x_rotation_slider}
                     variable={-settings.x_rotation}
@@ -243,7 +262,10 @@ const RotationControls = ({settings, onchangeFunction}) => {
                 />
             </div>
             <div className={styles.rotation_wrapper}>
-                <label className={clsx(styles.slider_label, styles.y_rotation_label)}>{t("config_page.vr.y_rotation")}</label>
+                <p className={clsx(styles.slider_label, styles.y_rotation_label)}>
+                    {t("config_page.vr.y_rotation")}
+                    <ResetButton onClickFunction={() => selectFunction("y_rotation", default_ui_configs.y_pos)} />
+                </p>
                 <Slider
                     className={styles.y_rotation_slider}
                     variable={settings.y_rotation}
@@ -254,7 +276,10 @@ const RotationControls = ({settings, onchangeFunction}) => {
                 />
             </div>
             <div className={styles.rotation_wrapper}>
-                <label className={clsx(styles.slider_label, styles.z_rotation_label)}>{t("config_page.vr.z_rotation")}</label>
+                <p className={clsx(styles.slider_label, styles.z_rotation_label)}>
+                    {t("config_page.vr.z_rotation")}
+                    <ResetButton onClickFunction={() => selectFunction("z_rotation", default_ui_configs.y_pos)} />
+                </p>
                 <Slider
                     className={styles.z_rotation_slider}
                     variable={settings.z_rotation}
@@ -278,9 +303,9 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
     return(
         <div className={styles.other_controls}>
             <div className={styles.other_controls_wrapper}>
-                <label className={clsx(styles.other_controls_slider_label, styles.opacity_label)}>
+                <p className={clsx(styles.other_controls_slider_label, styles.opacity_label)}>
                     {t("config_page.vr.opacity")}
-                </label>
+                </p>
                 <Slider
                     className={clsx(styles.other_controls_slider, styles.opacity_slider)}
                     variable={settings.opacity * 100}
@@ -292,9 +317,9 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
                 />
             </div>
             <div className={styles.other_controls_wrapper}>
-                <label className={clsx(styles.other_controls_slider_label, styles.ui_scaling_label)}>
+                <p className={clsx(styles.other_controls_slider_label, styles.ui_scaling_label)}>
                     {t("config_page.vr.ui_scaling")}
-                </label>
+                </p>
                 <Slider
                     className={clsx(styles.other_controls_slider, styles.ui_scaling_slider)}
                     variable={settings.ui_scaling * 100}
@@ -306,7 +331,7 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
                 />
             </div>
             <div className={styles.other_controls_wrapper}>
-                <label className={clsx(styles.other_controls_slider_label, styles.display_duration_label)}>{t("config_page.vr.display_duration")}</label>
+                <p className={clsx(styles.other_controls_slider_label, styles.display_duration_label)}>{t("config_page.vr.display_duration")}</p>
                 <Slider
                     className={clsx(styles.other_controls_slider, styles.display_duration_slider)}
                     variable={settings.display_duration}
@@ -318,7 +343,7 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
                 />
             </div>
             <div className={styles.other_controls_wrapper}>
-                <label className={clsx(styles.other_controls_slider_label, styles.fadeout_duration_label)}>{t("config_page.vr.fadeout_duration")}</label>
+                <p className={clsx(styles.other_controls_slider_label, styles.fadeout_duration_label)}>{t("config_page.vr.fadeout_duration")}</p>
                 <Slider
                     className={clsx(styles.other_controls_slider, styles.fadeout_duration_slider)}
                     variable={settings.fadeout_duration}
@@ -348,4 +373,66 @@ const CommonSettingsContainer = () => {
             />
         </div>
     );
+};
+
+const ResetButton = ({onClickFunction}) => {
+    return (
+        <button className={styles.slider_reset_button} onClick={onClickFunction}>
+            <RedoSvg className={styles.slider_reset_svg}/>
+        </button>
+    );
+};
+
+import SquareSvg from "@images/square.svg?react";
+import TriangleSvg from "@images/triangle.svg?react";
+import { randomIntMinMax } from "@utils";
+
+const SendSampleTextToggleButton = () => {
+    const { t } = useTranslation();
+    const { sendTextToOverlay } = useSendTextToOverlay();
+    const [is_started, setIsStarted] = useState(false);
+
+    useEffect(() => {
+        let interval_id;
+
+        if (is_started) {
+            interval_id = setInterval(() => {
+                const text_data = Array.from(
+                    { length: randomIntMinMax(1, 5) },
+                    () => t("config_page.vr.sample_text_button.sample_text")
+                ).join(" ");
+                sendTextToOverlay(text_data);
+            }, 1000);
+        };
+
+        return () => {
+            if (interval_id) {
+                clearInterval(interval_id);
+            }
+        };
+    }, [is_started]);
+
+    const toggleFunction = () => {
+        setIsStarted(!is_started);
+    };
+
+    const label = is_started
+        ? t("config_page.vr.sample_text_button.stop")
+        : t("config_page.vr.sample_text_button.start");
+
+    return (
+        <div className={styles.sample_text_button_wrapper}>
+            <button
+                className={clsx(styles.sample_text_button, { [styles.is_started]: is_started })}
+                onClick={toggleFunction}
+            >
+                {is_started ? (
+                    <SquareSvg className={styles.sample_text_button_square_svg} />
+                ) : (
+                    <TriangleSvg className={styles.sample_text_button_triangle_svg} />
+                )}
+            </button>
+            <p className={styles.sample_text_button_label}>{label}</p>
+        </div>
+    );
 };
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
index eb4b88e3..c18c2be7 100644
--- a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss
@@ -56,6 +56,54 @@
     transform: translate(-10%);
 }
 
+.sample_text_button_wrapper {
+    position: absolute;
+    bottom: 0;
+    left: -74%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+.sample_text_button {
+    background-color: var(--dark_850_color);
+    padding: 1.8rem;
+    border-radius: 50%;
+    &:hover {
+        background-color: var(--dark_800_color);
+    }
+    &:active {
+        background-color: var(--dark_925_color);
+    }
+    &.is_started {
+        background-color: var(--primary_600_color);
+        &:hover {
+            background-color: var(--primary_500_color);
+        }
+        &:active {
+            background-color: var(--primary_700_color);
+        }
+    }
+}
+.sample_text_button_triangle_svg, .sample_text_button_square_svg {
+    width: 2.4rem;
+}
+.sample_text_button_triangle_svg {
+    transform: translateX(10%) rotate(90deg);
+}
+.sample_text_button_label {
+    color: var(--dark_basic_text_color);
+    position: absolute;
+    left: 50%;
+    top: 110%;
+    // bottom: -2rem;
+    transform: translateX(-50%);
+    white-space: pre-wrap;
+    font-size: 1.2rem;
+    width: max-content;
+    text-align: center;
+}
+
 // .position_controls {
 //     background-color: gray;
 // }
@@ -65,19 +113,24 @@
 // }
 
 .slider_label {
-    font-size: 1.6rem;
+    font-size: 1.4rem;
     width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    white-space: nowrap;
 }
 .x_position_label {
     position: absolute;
-    bottom: -4rem;
-    right: -30%;
-    text-align: end;
+    bottom: -4.6rem;
+    right: -46%;
+    justify-content: end;
 }
 .y_position_label {
     position: absolute;
-    top: -36%;
+    top: -44%;
     left: 10%;
+    justify-content: start;
 }
 .z_position_label {
     position: absolute;
@@ -123,14 +176,14 @@
 
 .x_rotation_label {
     position: absolute;
-    top: -36%;
+    top: -44%;
     left: 10%;
 }
 .y_rotation_label {
     position: absolute;
-    bottom: -4rem;
-    right: -30%;
-    text-align: end;
+    bottom: -4.6rem;
+    right: -46%;
+    justify-content: end;
 }
 .z_rotation_label {
     position: absolute;
@@ -163,6 +216,33 @@
     height: 100%;
 }
 
+
+.slider_reset_button {
+    background-color: var(--dark_875_color);
+    padding: 0.6rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 0.4rem;
+    flex-shrink: 0;
+    &:hover {
+        background-color: var(--dark_825_color);
+        & .slider_reset_svg {
+            color: var(--dark_200_color);
+        }
+    }
+    &:active {
+        background-color: var(--dark_925_color);
+    }
+}
+
+.slider_reset_svg {
+    width: 1.4rem;
+    color: var(--dark_550_color);
+}
+
+
+
 .other_controls {
     margin-top: 6rem;
     display: flex;
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 849d34f1..6051cff6 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: 0rem 0rem 5.8rem 1.6rem;
+    padding: 0rem 0rem 5.8rem 1.2rem;
     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.2rem;
+    padding: 0.8rem 0 0.8rem 1rem;
     cursor: pointer;
     &:hover {
         background-color: var(--dark_800_color);
diff --git a/src-ui/app/modal_controller/ModalController.module.scss b/src-ui/app/modal_controller/ModalController.module.scss
index 914fedef..567a1a7f 100644
--- a/src-ui/app/modal_controller/ModalController.module.scss
+++ b/src-ui/app/modal_controller/ModalController.module.scss
@@ -11,7 +11,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    background-color:  (#ffffff22);
+    background-color: var(--dark_550_color_22);
     backdrop-filter: blur(0.2rem);
 }
 
@@ -21,8 +21,8 @@
     left: 50%;
     transform: translate(-50%, -50%);
     overflow-y: auto;
-    background-color: var(--dark_875_color);
-    width: 60%;
+    background-color: var(--dark_900_color);
+    width: 80%;
     height: 96%;
     padding: 2rem;
     border-radius: 0.6rem;
diff --git a/src-ui/assets/triangle.svg b/src-ui/assets/triangle.svg
new file mode 100644
index 00000000..ff16b225
--- /dev/null
+++ b/src-ui/assets/triangle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.574 3.712c.195-.323.662-.323.857 0l9.37 15.545c.2.333-.039.757-.429.757l-18.668-.006c-.385 0-.629-.422-.428-.758l9.298-15.538zm.429-2.483c-.76 0-1.521.37-1.966 1.111l-9.707 16.18c-.915 1.523.182 3.472 1.965 3.472h19.416c1.783 0 2.879-1.949 1.965-3.472l-9.707-16.18c-.446-.741-1.205-1.111-1.966-1.111z"/></svg>
\ No newline at end of file
diff --git a/src-ui/logics/configs/index.js b/src-ui/logics/configs/index.js
index aff6b450..646d24c1 100644
--- a/src-ui/logics/configs/index.js
+++ b/src-ui/logics/configs/index.js
@@ -49,6 +49,7 @@ export { useOverlaySmallLogSettings } from "./vr/useOverlaySmallLogSettings";
 export { useIsEnabledOverlayLargeLog } from "./vr/useIsEnabledOverlayLargeLog";
 export { useOverlayShowOnlyTranslatedMessages } from "./vr/useOverlayShowOnlyTranslatedMessages";
 export { useOverlayLargeLogSettings } from "./vr/useOverlayLargeLogSettings";
+export { useSendTextToOverlay } from "./vr/useSendTextToOverlay";
 
 export { useOscIpAddress } from "./advanced_settings/useOscIpAddress";
 export { useOscPort } from "./advanced_settings/useOscPort";
diff --git a/src-ui/logics/configs/vr/useSendTextToOverlay.js b/src-ui/logics/configs/vr/useSendTextToOverlay.js
new file mode 100644
index 00000000..39561b64
--- /dev/null
+++ b/src-ui/logics/configs/vr/useSendTextToOverlay.js
@@ -0,0 +1,13 @@
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSendTextToOverlay = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+
+    const sendTextToOverlay = (text) => {
+        asyncStdoutToPython("/run/send_text_overlay_small_log", text);
+    };
+
+    return {
+        sendTextToOverlay,
+    };
+};
\ No newline at end of file
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index a188dce2..cbe2e59f 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -427,6 +427,8 @@ export const useReceiveRoutes = () => {
         "/set/enable/overlay_show_only_translated_messages": updateOverlayShowOnlyTranslatedMessages,
         "/set/disable/overlay_show_only_translated_messages": updateOverlayShowOnlyTranslatedMessages,
 
+        "/run/send_text_overlay_small_log": () => {},
+
         // Others Tab
         "/get/data/auto_clear_message_box": updateEnableAutoClearMessageInputBox,
         "/set/enable/auto_clear_message_box": updateEnableAutoClearMessageInputBox,