diff --git a/locales/en.json b/locales/en.json
index 56835543..f3399a70 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -203,9 +203,8 @@
             "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."
         },
-        "use_whisper_feature": {
-            "label": "Use Whisper Model As Transcription",
-            "desc": "In some languages, the accuracy of speech recognition may improve. During speech recognition usage, CPU usage increases, so please consider your PC specs before using this feature."
+        "select_transcription_engine": {
+            "label": "Select Transcription Engine"
         },
         "whisper_weight_type": {
             "label": "Select Whisper Model",
diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx
index b9b59e6f..b74393d4 100644
--- a/src-ui/app/App.jsx
+++ b/src-ui/app/App.jsx
@@ -145,7 +145,7 @@ const FontFamilyController = () => {
 };
 
 import { useStore_SelectableFontFamilyList } from "@store";
-import { arrayToObject } from "@utils/arrayToObject";
+import { arrayToObject } from "@utils";
 
 import { invoke } from "@tauri-apps/api/tauri";
 const useAsyncFetchFonts = () => {
diff --git a/src-ui/utils/reset.css b/src-ui/app/_index_css/reset.css
similarity index 100%
rename from src-ui/utils/reset.css
rename to src-ui/app/_index_css/reset.css
diff --git a/src-ui/utils/root.css b/src-ui/app/_index_css/root.css
similarity index 100%
rename from src-ui/utils/root.css
rename to src-ui/app/_index_css/root.css
diff --git a/src-ui/utils/variables.css b/src-ui/app/_index_css/variables.css
similarity index 100%
rename from src-ui/utils/variables.css
rename to src-ui/app/_index_css/variables.css
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss
index e464460c..081e892a 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/radio_button/RadioButton.module.scss
@@ -27,7 +27,6 @@
     gap: 1rem;
     padding: 0.6rem 0.8rem;
     border-radius: 0.4rem;
-    min-width: 20rem;
     &:hover {
         background-color: var(--dark_850_color);
     }
diff --git a/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx
index 520bff17..abfa7a40 100644
--- a/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx
@@ -9,7 +9,7 @@ const getImageByFileName = (file_name) => {
 };
 
 import poster_showcase_worlds_settings from "./poster_showcase_worlds_settings";
-import { chunkArray } from "@utils/chunkArray";
+import { chunkArray } from "@utils";
 
 export const PosterShowcaseWorldsContents = () => {
     const { currentPosterShowcaseWorldPageIndex } = useStore_PosterShowcaseWorldPageIndex();
@@ -57,7 +57,7 @@ export const PosterShowcaseWorldsContents = () => {
 
 import chat_white_square from "@images/chato_white_square.png";
 import { useEffect } from "react";
-import { randomIntMinMax } from "@utils/randomIntMinMax";
+import { randomIntMinMax } from "@utils";
 const PosterShowcaseWorldsPagination = ({ page_length }) => {
     const { currentPosterShowcaseWorldPageIndex, updatePosterShowcaseWorldPageIndex } = useStore_PosterShowcaseWorldPageIndex();
 
diff --git a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
index b8c0e604..9d11bd9f 100644
--- a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styles from "./Transcription.module.scss";
+import { updateLabelsById } from "@utils";
 
 import {
     useMicRecordTimeout,
@@ -11,6 +12,7 @@ import {
     useSpeakerPhraseTimeout,
     useSpeakerMaxWords,
 
+    useSelectedTranscriptionEngine,
     useWhisperWeightTypeStatus,
     useSelectedWhisperWeightType,
 } from "@logics_configs";
@@ -19,6 +21,7 @@ import {
     EntryContainer,
     WordFilterContainer,
     DownloadModelsContainer,
+    RadioButtonContainer,
 } from "../_templates/Templates";
 
 export const Transcription = () => {
@@ -26,7 +29,7 @@ export const Transcription = () => {
         <>
             <Mic_Container />
             <Speaker_Container />
-            <WhisperWeightType_Box />
+            <TranscriptionEngine_Container />
         </>
     );
 };
@@ -232,6 +235,34 @@ const SpeakerMaxWords_Box = () => {
 };
 
 
+
+const TranscriptionEngine_Container = () => {
+    return (
+        <>
+            <TranscriptionEngine_Box />
+            <WhisperWeightType_Box />
+        </>
+    );
+};
+
+const TranscriptionEngine_Box = () => {
+    const { t } = useTranslation();
+    const { currentSelectedTranscriptionEngine, setSelectedTranscriptionEngine } = useSelectedTranscriptionEngine();
+
+    return (
+        <RadioButtonContainer
+            label={t("config_page.select_transcription_engine.label")}
+            selectFunction={setSelectedTranscriptionEngine}
+            name="select_transcription_engine"
+            options={[
+                { id: "Google", label: "Google" },
+                { id: "Whisper", label: "Whisper" },
+            ]}
+            checked_variable={currentSelectedTranscriptionEngine}
+        />
+    );
+};
+
 const WhisperWeightType_Box = () => {
     const { t } = useTranslation();
     const {
@@ -250,6 +281,18 @@ const WhisperWeightType_Box = () => {
         downloadWhisperWeight(id);
     };
 
+    const new_labels = [
+        { id: "tiny", label: t("config_page.whisper_weight_type.model_template", {model_name: "tiny", capacity: "74.5MB"}) },
+        { id: "base", label: t("config_page.whisper_weight_type.recommended_model_template", {model_name: "base", capacity: "141MB"}) },
+        { id: "small", label: t("config_page.whisper_weight_type.model_template", {model_name: "small", capacity: "463MB"}) },
+        { id: "medium", label: t("config_page.whisper_weight_type.model_template", {model_name: "medium", capacity: "1.42GB"}) },
+        { id: "large-v1", label: t("config_page.whisper_weight_type.model_template", {model_name: "large-v1", capacity: "2.87GB"}) },
+        { id: "large-v2", label: t("config_page.whisper_weight_type.model_template", {model_name: "large-v2", capacity: "2.87GB"}) },
+        { id: "large-v3", label: t("config_page.whisper_weight_type.model_template", {model_name: "large-v3", capacity: "2.87GB"}) },
+    ];
+
+    const whisper_weight_types = updateLabelsById(currentWhisperWeightTypeStatus.data, new_labels);
+
     return (
         <>
             <DownloadModelsContainer
@@ -259,7 +302,7 @@ const WhisperWeightType_Box = () => {
                     {translator: t("main_page.translator")}
                 )}
                 name="whisper_weight_type"
-                options={currentWhisperWeightTypeStatus.data}
+                options={whisper_weight_types}
                 checked_variable={currentSelectedWhisperWeightType}
                 selectFunction={selectFunction}
                 downloadStartFunction={downloadStartFunction}
diff --git a/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx b/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx
index f9ec52be..cd714270 100644
--- a/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/translation/Translation.jsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styles from "./Translation.module.scss";
+import { updateLabelsById } from "@utils";
 
 import {
     useDeepLAuthKey,
@@ -40,6 +41,13 @@ const CTranslate2WeightType_Box = () => {
         downloadCTranslate2Weight(id);
     };
 
+    const new_labels = [
+        { id: "small", label: t("config_page.ctranslate2_weight_type.small", {capacity: "418MB"}) },
+        { id: "large", label: t("config_page.ctranslate2_weight_type.large", {capacity: "1.2GB"}) },
+    ];
+
+    const c_translate2_weight_types = updateLabelsById(currentCTranslate2WeightTypeStatus.data, new_labels);
+
     return (
         <>
             <DownloadModelsContainer
@@ -49,7 +57,7 @@ const CTranslate2WeightType_Box = () => {
                     {translator: t("main_page.translator")}
                 )}
                 name="ctransalte2_weight_type"
-                options={currentCTranslate2WeightTypeStatus.data}
+                options={c_translate2_weight_types}
                 checked_variable={currentSelectedCTranslate2WeightType}
                 selectFunction={selectFunction}
                 downloadStartFunction={downloadStartFunction}
diff --git a/src-ui/app/index.jsx b/src-ui/app/index.jsx
index ab108afa..03c4e13a 100644
--- a/src-ui/app/index.jsx
+++ b/src-ui/app/index.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import "@root/locales/config.js";
-import "@utils/root.css";
+import "./_index_css/root.css";
 
 import { App } from "./App";
 
diff --git a/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx b/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx
index ac886269..b5f24918 100644
--- a/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx
+++ b/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx
@@ -2,7 +2,7 @@ import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import styles from "./LogBox.module.scss";
 import { store } from "@store";
 import { MessageContainer } from "./message_container/MessageContainer";
-import { scrollToBottom } from "@utils/scrollToBottom";
+import { scrollToBottom } from "@utils";
 import { useMessage } from "@logics_common";
 
 export const LogBox = () => {
diff --git a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
index 6329f3d1..007c3a67 100644
--- a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
+++ b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
@@ -3,7 +3,7 @@ import styles from "./MessageInputBox.module.scss";
 import SendMessageSvg from "@images/send_message.svg?react";
 import { useMessage } from "@logics_common";
 import { store } from "@store";
-import { scrollToBottom } from "@utils/scrollToBottom";
+import { scrollToBottom } from "@utils";
 import {
     useSendMessageButtonType,
     useEnableAutoClearMessageInputBox,
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx b/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx
index 03715d9c..a36ce73c 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx
+++ b/src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx
@@ -66,7 +66,7 @@ const PresetContainer = () => {
         title: t("main_page.your_language"),
         is_opened: currentIsOpenedLanguageSelector.data.your_language,
         onClickFunction: () => toggleSelector("your_language", currentIsOpenedLanguageSelector.data.your_language, updateIsOpenedLanguageSelector),
-        TurnedOnSvgComponent: <MicSvg />,
+        TurnedOnSvgComponent: MicSvg,
         is_turned_on: currentTranscriptionSendStatus.data,
         variable: your_language_data?.primary,
     };
@@ -75,7 +75,7 @@ const PresetContainer = () => {
         title: t("main_page.target_language"),
         is_opened: currentIsOpenedLanguageSelector.data.target_language,
         onClickFunction: () => toggleSelector("target_language", currentIsOpenedLanguageSelector.data.target_language, updateIsOpenedLanguageSelector),
-        TurnedOnSvgComponent: <HeadphonesSvg />,
+        TurnedOnSvgComponent: HeadphonesSvg,
         is_turned_on: currentTranscriptionReceiveStatus.data,
         variable: target_language_data?.primary,
     };
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx b/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx
index 7d080914..4139c057 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx
+++ b/src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx
@@ -1,17 +1,14 @@
 import clsx from "clsx";
 import styles from "./LanguageSelectorOpenButton.module.scss";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
-import { useSvg } from "@utils/useSvg";
 
 export const LanguageSelectorOpenButton = ({ title, onClickFunction, is_opened, TurnedOnSvgComponent, is_turned_on, variable }) => {
-    const classNames = clsx(styles.arrow_left_svg, {
+    const arrow_class_names = clsx(styles.arrow_left_svg, {
         [styles.reverse]: is_opened,
     });
 
-    const SvgComponent = useSvg(TurnedOnSvgComponent, {
-        className: clsx(styles.category_svg, {
-            [styles.is_turned_on]: is_turned_on,
-        }),
+    const category_class_names = clsx(styles.category_svg, {
+        [styles.is_turned_on]: is_turned_on,
     });
 
     const languageText = variable?.language ?? "Loading...";
@@ -20,13 +17,13 @@ export const LanguageSelectorOpenButton = ({ title, onClickFunction, is_opened,
     return (
         <div className={styles.container}>
             <div className={styles.title_container}>
-                {SvgComponent}
+                <TurnedOnSvgComponent className={category_class_names} />
                 <p className={styles.title}>{title}</p>
             </div>
             <div className={styles.dropdown_menu_container} onClick={onClickFunction}>
                 <p className={styles.selected_language}>{languageText}</p>
                 <p className={styles.selected_language}>({countryText})</p>
-                <ArrowLeftSvg className={classNames} />
+                <ArrowLeftSvg className={arrow_class_names} />
             </div>
         </div>
     );
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx
index a82b9f90..13708b1c 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx
+++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx
@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-
+import { updateLabelsById } from "@utils";
 import styles from "./TranslatorSelectorOpenButton.module.scss";
 import { TranslatorSelector } from "./translator_selector/TranslatorSelector";
 import { useStore_IsOpenedTranslatorSelector } from "@store";
@@ -13,11 +13,22 @@ export const TranslatorSelectorOpenButton = () => {
         currentSelectedTranslationEngines,
     } = useLanguageSettings();
 
-    const selected_translator_name = (currentTranslationEngines.state === "pending")
-    ? "Loading..."
-    : currentTranslationEngines.data.find(
-        translator_data => translator_data.translator_id === currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data]
-    )?.translator_name;
+    const new_labels = [
+        {id: "CTranslate2", label: t("main_page.translator_ctranslate2")}
+    ];
+
+    const translation_engines = updateLabelsById(currentTranslationEngines.data, new_labels);
+
+    const getSelectedLabel = () => {
+        const selected_engine_id = currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data];
+        const selected_engine = translation_engines.find(
+            d => d.id === selected_engine_id
+        );
+        return selected_engine?.label;
+    };
+
+    const is_loading = currentTranslationEngines.state === "pending";
+    const selected_label = is_loading ? "Loading..." : getSelectedLabel();
 
 
     const { currentIsOpenedTranslatorSelector, updateIsOpenedTranslatorSelector} = useStore_IsOpenedTranslatorSelector();
@@ -30,12 +41,12 @@ export const TranslatorSelectorOpenButton = () => {
         <div className={styles.container}>
             <div className={styles.translator_selector_button} onClick={openTranslatorSelector}>
                 <p className={styles.label}>{t("main_page.translator")}: </p>
-                <p className={styles.label}>{selected_translator_name}</p>
+                <p className={styles.label}>{selected_label}</p>
             </div>
             {currentIsOpenedTranslatorSelector.data &&
                 <TranslatorSelector
-                    selected_translator_id={currentSelectedTranslationEngines}
-                    translation_engines={currentTranslationEngines}
+                    selected_id={currentSelectedTranslationEngines}
+                    translation_engines={translation_engines}
                 />
             }
         </div>
diff --git a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx
index 53f893fb..77f945f6 100644
--- a/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx
+++ b/src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx
@@ -1,25 +1,25 @@
 import clsx from "clsx";
 import styles from "./TranslatorSelector.module.scss";
-import { chunkArray } from "@utils/chunkArray";
+import { chunkArray } from "@utils";
 
 import { useStore_IsOpenedTranslatorSelector } from "@store";
 import { useLanguageSettings } from "@logics_main";
 
-export const TranslatorSelector = ({selected_translator_id, translation_engines}) => {
-    const columns = (translation_engines.data !== undefined) ? chunkArray(translation_engines.data, 2) : [];
+export const TranslatorSelector = ({selected_id, translation_engines}) => {
+    const columns = chunkArray(translation_engines, 2);
 
     return (
         <div className={styles.container}>
             <div className={styles.wrapper}>
                 {columns.map((column, column_index) => (
                     <div className={styles.column_wrapper} key={`column_${column_index}`}>
-                        {column.map(({ translator_id, translator_name, is_available }) => (
+                        {column.map(({ id, label, is_available }) => (
                             <TranslatorBox
-                                key={translator_id}
-                                translator_id={translator_id}
-                                translator_name={translator_name}
+                                key={id}
+                                id={id}
+                                label={label}
                                 is_available={is_available}
-                                is_selected={(translator_id === selected_translator_id)}
+                                is_selected={(id === selected_id)}
                             />
                         ))}
                     </div>
@@ -35,17 +35,17 @@ const TranslatorBox = (props) => {
 
     const box_class_name = clsx(
         styles.box,
-        { [styles["is_selected"]]: (currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data] === props.translator_id) ? true : false },
+        { [styles["is_selected"]]: (currentSelectedTranslationEngines.data[currentSelectedPresetTabNumber.data] === props.id) ? true : false },
         { [styles["is_available"]]: (props.is_available === true) ? true : false }
     );
 
     const selectTranslator = () => {
-        setSelectedTranslationEngines(props.translator_id);
+        setSelectedTranslationEngines(props.id);
         updateIsOpenedTranslatorSelector(false);
     };
     return (
         <div className={box_class_name} onClick={selectTranslator}>
-            <p className={styles.translator_name}>{props.translator_name}</p>
+            <p className={styles.translator_name}>{props.label}</p>
         </div>
     );
 };
\ No newline at end of file
diff --git a/src-ui/utils/mixins.scss b/src-ui/common_css/mixins.scss
similarity index 100%
rename from src-ui/utils/mixins.scss
rename to src-ui/common_css/mixins.scss
diff --git a/src-ui/logics/configs/index.js b/src-ui/logics/configs/index.js
index 4a3399ee..989621c2 100644
--- a/src-ui/logics/configs/index.js
+++ b/src-ui/logics/configs/index.js
@@ -31,6 +31,7 @@ export { useSpeakerRecordTimeout } from "./transcription/useSpeakerRecordTimeout
 export { useSpeakerPhraseTimeout } from "./transcription/useSpeakerPhraseTimeout";
 export { useSpeakerMaxWords } from "./transcription/useSpeakerMaxWords";
 
+export { useSelectedTranscriptionEngine } from "./transcription/useSelectedTranscriptionEngine";
 export { useWhisperWeightTypeStatus } from "./transcription/useWhisperWeightTypeStatus";
 export { useSelectedWhisperWeightType } from "./transcription/useSelectedWhisperWeightType";
 
diff --git a/src-ui/logics/configs/transcription/useSelectedTranscriptionEngine.js b/src-ui/logics/configs/transcription/useSelectedTranscriptionEngine.js
new file mode 100644
index 00000000..43f0b6ab
--- /dev/null
+++ b/src-ui/logics/configs/transcription/useSelectedTranscriptionEngine.js
@@ -0,0 +1,24 @@
+import { useStore_SelectedTranscriptionEngine } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedTranscriptionEngine = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSelectedTranscriptionEngine, updateSelectedTranscriptionEngine, pendingSelectedTranscriptionEngine } = useStore_SelectedTranscriptionEngine();
+
+    const getSelectedTranscriptionEngine = () => {
+        pendingSelectedTranscriptionEngine();
+        asyncStdoutToPython("/get/data/selected_transcription_engine");
+    };
+
+    const setSelectedTranscriptionEngine = (selected_transcription_engine) => {
+        pendingSelectedTranscriptionEngine();
+        asyncStdoutToPython("/set/data/selected_transcription_engine", selected_transcription_engine);
+    };
+
+    return {
+        currentSelectedTranscriptionEngine,
+        getSelectedTranscriptionEngine,
+        updateSelectedTranscriptionEngine,
+        setSelectedTranscriptionEngine,
+    };
+};
\ No newline at end of file
diff --git a/src-ui/logics/main/useMessageInputBoxRatio.js b/src-ui/logics/main/useMessageInputBoxRatio.js
index 14d5d57c..466fc02b 100644
--- a/src-ui/logics/main/useMessageInputBoxRatio.js
+++ b/src-ui/logics/main/useMessageInputBoxRatio.js
@@ -1,7 +1,7 @@
 import { appWindow } from "@tauri-apps/api/window";
 import { useStore_MessageInputBoxRatio } from "@store";
 import { useStdoutToPython } from "@logics/useStdoutToPython";
-import { clampMinMax } from "@utils/clampMinMax";
+import { clampMinMax } from "@utils";
 export const useMessageInputBoxRatio = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
     const { currentMessageInputBoxRatio, updateMessageInputBoxRatio } = useStore_MessageInputBoxRatio();
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index bb8e08cf..6f1a4df4 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -1,5 +1,5 @@
 import { translator_status } from "@ui_configs";
-import { arrayToObject } from "@utils/arrayToObject";
+import { arrayToObject } from "@utils";
 
 import {
     useWindow,
@@ -48,6 +48,7 @@ import {
     useDeepLAuthKey,
     useCTranslate2WeightTypeStatus,
     useSelectedCTranslate2WeightType,
+    useSelectedTranscriptionEngine,
     useSelectedWhisperWeightType,
     useWhisperWeightTypeStatus,
     useOverlaySettings,
@@ -129,6 +130,7 @@ export const useReceiveRoutes = () => {
         downloadedCTranslate2WeightType,
     } = useCTranslate2WeightTypeStatus();
 
+    const { updateSelectedTranscriptionEngine } = useSelectedTranscriptionEngine();
     const { updateSelectedWhisperWeightType } = useSelectedWhisperWeightType();
     const {
         updateDownloadedWhisperWeightTypeStatus,
@@ -177,7 +179,7 @@ export const useReceiveRoutes = () => {
             const updateTranslatorAvailability = (keys) => {
                 return translator_status.map(translator => ({
                     ...translator,
-                    is_available: keys.includes(translator.translator_id),
+                    is_available: keys.includes(translator.id),
                 }));
             };
             const updated_list = updateTranslatorAvailability(payload);
@@ -187,7 +189,7 @@ export const useReceiveRoutes = () => {
             const updateTranslatorAvailability = (keys) => {
                 return translator_status.map(translator => ({
                     ...translator,
-                    is_available: keys.includes(translator.translator_id),
+                    is_available: keys.includes(translator.id),
                 }));
             };
             const updated_list = updateTranslatorAvailability(payload);
@@ -351,6 +353,9 @@ export const useReceiveRoutes = () => {
         "/get/data/speaker_max_phrases": updateSpeakerMaxWords,
         "/set/data/speaker_max_phrases": updateSpeakerMaxWords,
 
+        "/get/data/selected_transcription_engine": updateSelectedTranscriptionEngine,
+        "/set/data/selected_transcription_engine": updateSelectedTranscriptionEngine,
+
         "/get/data/whisper_weight_type": updateSelectedWhisperWeightType,
         "/set/data/whisper_weight_type": updateSelectedWhisperWeightType,
 
diff --git a/src-ui/store.js b/src-ui/store.js
index 84d364f3..4fd682fc 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -201,6 +201,7 @@ export const { atomInstance: Atom_SpeakerMaxWords, useHook: useStore_SpeakerMaxW
 
 export const { atomInstance: Atom_SelectedWhisperWeightType, useHook: useStore_SelectedWhisperWeightType } = createAtomWithHook("", "SelectedWhisperWeightType");
 export const { atomInstance: Atom_WhisperWeightTypeStatus, useHook: useStore_WhisperWeightTypeStatus } = createAtomWithHook(whisper_weight_type_status, "WhisperWeightTypeStatus");
+export const { atomInstance: Atom_SelectedTranscriptionEngine, useHook: useStore_SelectedTranscriptionEngine } = createAtomWithHook(whisper_weight_type_status, "SelectedTranscriptionEngine");
 
 
 // VR
diff --git a/src-ui/ui_configs.js b/src-ui/ui_configs.js
index c232505d..eaf3896f 100644
--- a/src-ui/ui_configs.js
+++ b/src-ui/ui_configs.js
@@ -1,12 +1,3 @@
-export const translator_status = [
-    { translator_id: "DeepL", translator_name: "DeepL", is_available: false },
-    { translator_id: "DeepL_API", translator_name: `DeepL\nAPI`, is_available: false },
-    { translator_id: "Google", translator_name: "Google", is_available: false },
-    { translator_id: "Bing", translator_name: "Bing", is_available: false },
-    { translator_id: "Papago", translator_name: "Papago", is_available: false },
-    { translator_id: "CTranslate2", translator_name: `Internal\n(Default)`, is_available: false },
-];
-
 export const ui_configs = {
     mic_threshold_min: 0,
     mic_threshold_max: 2000,
@@ -20,6 +11,15 @@ export const ui_configs = {
     ]
 };
 
+export const translator_status = [
+    { id: "DeepL", label: "DeepL", is_available: false },
+    { id: "DeepL_API", label: `DeepL\nAPI`, is_available: false },
+    { id: "Google", label: "Google", is_available: false },
+    { id: "Bing", label: "Bing", is_available: false },
+    { id: "Papago", label: "Papago", is_available: false },
+    { id: "CTranslate2", label: `Internal\n(Default)`, is_available: false },
+];
+
 export const ctranslate2_weight_type_status = [
     { id: "small", label: "small", is_downloaded: false, progress: null },
     { id: "large", label: "large", is_downloaded: false, progress: null },
diff --git a/src-ui/utils.js b/src-ui/utils.js
new file mode 100644
index 00000000..a2d38fc9
--- /dev/null
+++ b/src-ui/utils.js
@@ -0,0 +1,67 @@
+export const arrayToObject = (array) => {
+    return array.reduce((obj, item) => {
+        obj[item] = item;
+        return obj;
+    }, {});
+};
+
+export const chunkArray = (array, size) => {
+    const chunked = [];
+    for (let i = 0; i < array.length; i += size) {
+        chunked.push(array.slice(i, i + size));
+    }
+    return chunked;
+};
+
+export const clampMinMax = (value, min, max) => {
+    return Math.min(Math.max(value, min), max);
+};
+// console.log(clamp(5, 1, 10));  // 5 (範囲内)
+// console.log(clamp(-3, 0, 10)); // 0 (minより小さい)
+// console.log(clamp(15, 1, 10)); // 10 (maxより大きい)
+// console.log(clamp(7.5, 1, 10)); // 7.5 (範囲内、少数)
+
+export const randomIntMinMax = (min, max) => {
+	if (min === max) return min;
+	if (max === undefined) {
+		max = min;
+		min = 0;
+	}
+	const int = Math.floor(Math.random() * (max - min + 1)) + min;
+	return int;
+};
+
+export const scrollToBottom = (ref, smooth = false) => {
+    const element = ref.current;
+    const scroll_height = element.scrollHeight - element.clientHeight;
+
+    if (smooth) {
+        const duration = 300; // スクロールにかける時間（ミリ秒）
+        const start_time = performance.now();
+        const scroll_top = element.scrollTop;
+
+        const scroll = (current_time) => {
+            const elapsed = current_time - start_time;
+            const progress = Math.min(elapsed / duration, 1);
+            const ease_in_out_quad = (t) => t < 0.5
+                ? 2 * t * t
+                : -1 + (4 - 2 * t) * t;
+            element.scrollTop = scroll_top + (scroll_height - scroll_top) * ease_in_out_quad(progress);
+
+            if (progress < 1) {
+                requestAnimationFrame(scroll);
+            }
+        };
+
+        requestAnimationFrame(scroll);
+    } else {
+        element.scrollTop = scroll_height;
+    }
+};
+
+export const updateLabelsById = (data_array, updates) => {
+    return data_array.map(item => {
+        const update = updates.find(update_item => update_item.id === item.id);
+        return update ? { ...item, label: update.label } : item;
+    });
+};
\ No newline at end of file
diff --git a/src-ui/utils/arrayToObject.js b/src-ui/utils/arrayToObject.js
deleted file mode 100644
index 69e7b597..00000000
--- a/src-ui/utils/arrayToObject.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export const arrayToObject = (array) => {
-    return array.reduce((obj, item) => {
-        obj[item] = item;
-        return obj;
-    }, {});
-};
\ No newline at end of file
diff --git a/src-ui/utils/chunkArray.js b/src-ui/utils/chunkArray.js
deleted file mode 100644
index ee3d47cb..00000000
--- a/src-ui/utils/chunkArray.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export const chunkArray = (array, size) => {
-    const chunked = [];
-    for (let i = 0; i < array.length; i += size) {
-        chunked.push(array.slice(i, i + size));
-    }
-    return chunked;
-};
\ No newline at end of file
diff --git a/src-ui/utils/clampMinMax.js b/src-ui/utils/clampMinMax.js
deleted file mode 100644
index 1eced3f0..00000000
--- a/src-ui/utils/clampMinMax.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export const clampMinMax = (value, min, max) => {
-    return Math.min(Math.max(value, min), max);
-};
-
-// console.log(clamp(5, 1, 10));  // 5 (範囲内)
-// console.log(clamp(-3, 0, 10)); // 0 (minより小さい)
-// console.log(clamp(15, 1, 10)); // 10 (maxより大きい)
-// console.log(clamp(7.5, 1, 10)); // 7.5 (範囲内、少数)
\ No newline at end of file
diff --git a/src-ui/utils/randomIntMinMax.js b/src-ui/utils/randomIntMinMax.js
deleted file mode 100644
index f0882ea6..00000000
--- a/src-ui/utils/randomIntMinMax.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export const randomIntMinMax = (min, max) => {
-	if (min === max) return min;
-	if (max === undefined) {
-		max = min;
-		min = 0;
-	}
-	const int = Math.floor(Math.random() * (max - min + 1)) + min;
-	return int;
-};
diff --git a/src-ui/utils/scrollToBottom.js b/src-ui/utils/scrollToBottom.js
deleted file mode 100644
index a2cb2a48..00000000
--- a/src-ui/utils/scrollToBottom.js
+++ /dev/null
@@ -1,27 +0,0 @@
-export const scrollToBottom = (ref, smooth = false) => {
-    const element = ref.current;
-    const scroll_height = element.scrollHeight - element.clientHeight;
-
-    if (smooth) {
-        const duration = 300; // スクロールにかける時間（ミリ秒）
-        const start_time = performance.now();
-        const scroll_top = element.scrollTop;
-
-        const scroll = (current_time) => {
-            const elapsed = current_time - start_time;
-            const progress = Math.min(elapsed / duration, 1);
-            const ease_in_out_quad = (t) => t < 0.5
-                ? 2 * t * t
-                : -1 + (4 - 2 * t) * t;
-            element.scrollTop = scroll_top + (scroll_height - scroll_top) * ease_in_out_quad(progress);
-
-            if (progress < 1) {
-                requestAnimationFrame(scroll);
-            }
-        };
-
-        requestAnimationFrame(scroll);
-    } else {
-        element.scrollTop = scroll_height;
-    }
-};
diff --git a/src-ui/utils/useSvg.jsx b/src-ui/utils/useSvg.jsx
deleted file mode 100644
index 2da6e814..00000000
--- a/src-ui/utils/useSvg.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-
-export const useSvg = (svg_component, ...props) => {
-    const svgWithClass = svg_component
-        ? React.cloneElement(svg_component, ...props)
-        : null;
-
-    return svgWithClass;
-};
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 4412baeb..a2b46140 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -36,10 +36,10 @@ export default defineConfig(async () => ({
             "@test_data": path.resolve(__dirname, "./test_data.js"),
 
             "@ui_configs": path.resolve(__dirname, "src-ui/ui_configs.js"),
-            "@scss_mixins": path.resolve(__dirname, "src-ui/utils/mixins.scss"),
+            "@scss_mixins": path.resolve(__dirname, "src-ui/common_css/mixins.scss"),
             "@store": path.resolve(__dirname, "src-ui/store.js"),
             "@images": path.resolve(__dirname, "src-ui/assets"),
-            "@utils": path.resolve(__dirname, "src-ui/utils"),
+            "@utils": path.resolve(__dirname, "src-ui/utils.js"),
             "@logics": path.resolve(__dirname, "src-ui/logics"),
             "@logics_common": path.resolve(__dirname, "src-ui/logics/common"),
             "@logics_main": path.resolve(__dirname, "src-ui/logics/main"),