diff --git a/locales/en.yml b/locales/en.yml
index 25b04e62..76cfd208 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -133,7 +133,7 @@ config_page:
             desc: "You can choose the translation model when using the {{ctranslate2}} translation engine."
             small: "Basic Model ({{capacity}})"
             large: "High Accuracy Model ({{capacity}})"
-        ctranslate2_compute_type:
+        translation_compute_type:
             label: "Processing type for AI translation {{ctranslate2}}"
         translation_compute_device:
             label: "Processing device for AI translation"
@@ -179,7 +179,7 @@ config_page:
             desc: "Larger models have higher accuracy, but they also consume more CPU or GPU resources.\nEspecially for models larger than medium, it may be difficult or even impossible to use them depending on the performance of your CPU/GPU."
             model_template: "{{model_name}} model ({{capacity}})"
             recommended_model_template: "{{model_name}} model ({{capacity}}) (Recommended)"
-        whisper_compute_type:
+        transcription_compute_type:
             label: "Processing type for AI transcription {{whisper}}"
         transcription_compute_device:
             label: "Processing Device Used For AI transcription"
diff --git a/locales/ja.yml b/locales/ja.yml
index 39542767..ab47d45c 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -133,7 +133,7 @@ config_page:
             desc: "翻訳エンジン「{{ctranslate2}}」で翻訳する際に、使用する翻訳モデルを選択できます。"
             small: "通常モデル （{{capacity}}）"
             large: "高精度モデル （{{capacity}}）"
-        ctranslate2_compute_type:
+        translation_compute_type:
             label: "AI翻訳 {{ctranslate2}} の処理タイプ"
         translation_compute_device:
             label: "AI翻訳の処理デバイス"
@@ -179,7 +179,7 @@ config_page:
             desc: "容量が大きいモデルほど精度は高いですが、その分CPUやGPUを占有します。\n※特にmediumより容量の大きいモデルは、CPU/GPUの性能によっては使用すらも困難です。"
             model_template: "{{model_name}} モデル （{{capacity}}）"
             recommended_model_template: "{{model_name}} モデル （{{capacity}}） [推奨]"
-        whisper_compute_type:
+        transcription_compute_type:
             label: "AI音声認識 {{whisper}} の処理タイプ"
         transcription_compute_device:
             label: "AI音声認識で使用する処理デバイス"
diff --git a/locales/ko.yml b/locales/ko.yml
index 288c63e3..af169b93 100644
--- a/locales/ko.yml
+++ b/locales/ko.yml
@@ -133,7 +133,7 @@ config_page:
             desc: "오프라인 번역 시의 번역 모델을 변경합니다."
             small: "일반 모델 ({{capacity}})"
             large: "정밀 모델 ({{capacity}})"
-        ctranslate2_compute_type:
+        translation_compute_type:
             label:
         translation_compute_device:
             label: "AI 번역 처리 장치"
@@ -179,7 +179,7 @@ config_page:
             desc: "용량이 큰 모델일수록 정확도는 높지만, 그만큼 CPU나 GPU를 많이 차지합니다. * 특히 medium보다 용량이 큰 모델은 CPU/GPU 성능에 따라 사용 자체가 어려울 수 있습니다."
             model_template: "{{model_name}} 모델 ({{capacity}})"
             recommended_model_template: "{{model_name}} 모델 ({{capacity}}) (권장)"
-        whisper_compute_type:
+        transcription_compute_type:
             label:
         transcription_compute_device:
             label:
diff --git a/locales/zh-Hans.yml b/locales/zh-Hans.yml
index 7cfc594e..8322c96f 100644
--- a/locales/zh-Hans.yml
+++ b/locales/zh-Hans.yml
@@ -133,7 +133,7 @@ config_page:
             desc: "可以选择用于离线翻译的翻译模型"
             small: "普通模型 ({{capacity}})"
             large: "高精度模型 ({{capacity}})"
-        ctranslate2_compute_type:
+        translation_compute_type:
             label:
         translation_compute_device:
             label:
@@ -179,7 +179,7 @@ config_page:
             desc:
             model_template: "{{model_name}} 模型 ({{capacity}})"
             recommended_model_template: "{{model_name}} 模型 ({{capacity}}) (推荐)"
-        whisper_compute_type:
+        transcription_compute_type:
             label:
         transcription_compute_device:
             label:
diff --git a/locales/zh-Hant.yml b/locales/zh-Hant.yml
index 039b60ba..07b79b51 100644
--- a/locales/zh-Hant.yml
+++ b/locales/zh-Hant.yml
@@ -133,7 +133,7 @@ config_page:
             desc: "你可以選擇用於離線翻譯引擎的翻譯模型。"
             small: "基本模型（{{capacity}}）"
             large: "高準確率模型（{{capacity}}）"
-        ctranslate2_compute_type:
+        translation_compute_type:
             label:
         translation_compute_device:
             label:
@@ -179,7 +179,7 @@ config_page:
             desc:
             model_template: "{{model_name}}模型（{{capacity}}）"
             recommended_model_template: "{{model_name}}模型（{{capacity}}）（推薦）"
-        whisper_compute_type:
+        transcription_compute_type:
             label:
         transcription_compute_device:
             label:
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 28240452..ab5bff02 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
@@ -53,6 +53,7 @@ const Mic_Container = () => {
         setSelectedMicDevice(selected_data.selected_id);
     };
 
+    // [Fix me] currentEnableAutoMicSelect.data === "pending"; ?  not currentEnableAutoMicSelect.state === "pending"; ??(.state)
     const is_disabled_selector = currentEnableAutoMicSelect.data === true || currentEnableAutoMicSelect.data === "pending";
 
     const getLabels = () => {
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 2e0daf92..48639292 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,7 +1,8 @@
 import { useEffect, useState } from "react";
 import { useI18n } from "@useI18n";
 import styles from "./Transcription.module.scss";
-import { updateLabelsById, genNumObjArray } from "@utils";
+import { updateLabelsById, genNumObjArray, arrayToObject } from "@utils";
+import { useStore_IsBreakPoint } from "@store";
 
 import {
     useTranscription,
@@ -12,11 +13,14 @@ import {
     DownloadModelsContainer,
     RadioButtonContainer,
     DropdownMenuContainer,
-    ComputeDeviceContainer,
     SliderContainer,
+
+    useOnMouseLeaveDropdownMenu,
 } from "../_templates/Templates";
 
 import {
+    DropdownMenu,
+    LabelComponent,
     SectionLabelComponent,
 } from "../_components/";
 
@@ -201,7 +205,6 @@ const TranscriptionEngine_Container = () => {
             <SectionLabelComponent label={t("config_page.transcription.section_label_transcription_engines")} />
             <TranscriptionEngine_Box />
             <WhisperWeightType_Box />
-            <WhisperComputeType_Box />
             <TranscriptionComputeDevice_Box />
         </div>
     );
@@ -275,71 +278,76 @@ const WhisperWeightType_Box = () => {
     );
 };
 
-const WhisperComputeType_Box = () => {
-    const { t } = useI18n();
-    const { currentSelectableWhisperComputeTypeList } = useTranscription();
-    const { currentSelectedWhisperComputeType, setSelectedWhisperComputeType } = useTranscription();
 
-    const selectFunction = (selected_data) => {
-        setSelectedWhisperComputeType(selected_data.selected_id);
-    };
-
-    const whisper_compute_type_label = t("config_page.transcription.whisper_compute_type.label", {
-        whisper: "Whisper"
-    });
-
-    return (
-        <DropdownMenuContainer
-            dropdown_id="whisper_compute_type"
-            label={whisper_compute_type_label}
-            selected_id={currentSelectedWhisperComputeType.data}
-            list={currentSelectableWhisperComputeTypeList.data}
-            selectFunction={selectFunction}
-            state={currentSelectedWhisperComputeType.state}
-        />
-    );
-};
-
-// Duplicate
-import { useComputeMode } from "@logics_common";
 const TranscriptionComputeDevice_Box = () => {
     const { t } = useI18n();
-    const { currentSelectedTranscriptionComputeDevice, setSelectedTranscriptionComputeDevice } = useTranscription();
-    const { currentSelectableTranscriptionComputeDeviceList } = useTranscription();
-
-    const selectFunction = (selected_data) => {
-        const target_obj = currentSelectableTranscriptionComputeDeviceList.data[selected_data.selected_id];
-        setSelectedTranscriptionComputeDevice(target_obj);
-    };
+    const {
+        currentSelectableTranscriptionComputeDeviceList,
+        currentSelectedTranscriptionComputeDevice,
+        setSelectedTranscriptionComputeDevice,
+        currentSelectedTranscriptionComputeType,
+        setSelectedTranscriptionComputeType,
+    } = useTranscription();
+    const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
+    const { currentIsBreakPoint } = useStore_IsBreakPoint();
 
     const list_for_ui = transformDeviceArray(currentSelectableTranscriptionComputeDeviceList.data);
 
     const target_index = findKeyByDeviceValue(currentSelectableTranscriptionComputeDeviceList.data, currentSelectedTranscriptionComputeDevice.data);
 
+    const selectable_compute_types = arrayToObject(currentSelectableTranscriptionComputeDeviceList.data[target_index].compute_types);
 
-    const { currentComputeMode } = useComputeMode();
-    if (currentComputeMode.data === "cpu") {
-        return (
-            <ComputeDeviceContainer
-                label={t("config_page.transcription.transcription_compute_device.label")}
-                selected_id={target_index}
-                list={list_for_ui}
-                selectFunction={selectFunction}
-                state={currentSelectedTranscriptionComputeDevice.state}
-            />
-        )
-    }
+
+    const selectFunction_ComputeDevice = (selected_data) => {
+        const target_obj = currentSelectableTranscriptionComputeDeviceList.data[selected_data.selected_id];
+        setSelectedTranscriptionComputeDevice(target_obj);
+    };
+
+    const selectFunction_ComputeType = (selected_data) => {
+        setSelectedTranscriptionComputeType(selected_data.selected_id);
+    };
+
+    const device_container_class = clsx(styles.device_container, {
+        [styles.is_break_point]: currentIsBreakPoint.data,
+    });
+
+    const is_disabled_selector = currentSelectedTranscriptionComputeDevice.state === "pending" || currentSelectedTranscriptionComputeType.state === "pending";
 
     return (
-        <DropdownMenuContainer
-            dropdown_id="transcription_compute_device"
-            label={t("config_page.transcription.transcription_compute_device.label")}
-            // desc={t("config_page.transcription.transcription_compute_device.label")}
-            selected_id={target_index}
-            list={list_for_ui}
-            selectFunction={selectFunction}
-            state={currentSelectedTranscriptionComputeDevice.state}
-        />
+        <div className={styles.mic_container}>
+            <div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
+                <LabelComponent label={t("config_page.transcription.transcription_compute_device.label")} />
+                <div className={styles.device_contents}>
+
+                    <div className={styles.device_dropdown_wrapper}>
+                        <div className={styles.device_dropdown}>
+                            <p className={styles.device_secondary_label}>{t("config_page.transcription.transcription_compute_device.label")}</p>
+                            <DropdownMenu
+                                dropdown_id="transcription_compute_device"
+                                selected_id={target_index}
+                                list={list_for_ui}
+                                selectFunction={selectFunction_ComputeDevice}
+                                state={currentSelectedTranscriptionComputeDevice.state}
+                                style={{ maxWidth: "20rem", minWidth: "10rem" }}
+                                is_disabled={is_disabled_selector}
+                            />
+                        </div>
+
+                        <div className={styles.device_dropdown}>
+                            <p className={styles.device_secondary_label}>{t("config_page.transcription.transcription_compute_type.label")}</p>
+                            <DropdownMenu
+                                dropdown_id="transcription_compute_type"
+                                selected_id={currentSelectedTranscriptionComputeType.data}
+                                list={selectable_compute_types}
+                                selectFunction={selectFunction_ComputeType}
+                                state={currentSelectedTranscriptionComputeType.state}
+                                is_disabled={is_disabled_selector}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     );
 };
 
@@ -399,8 +407,6 @@ const Advanced_Container = () => {
             <SpeakerNoSpeechProbContainer />
         </div>
     );
-
-
 };
 
 export const MicAvgLogprobContainer = () => {
diff --git a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss
index 1170a41c..8eed1df9 100644
--- a/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.module.scss
@@ -2,4 +2,120 @@
     display: flex;
     flex-direction: column;
     gap: 6.4rem;
+}
+
+
+
+
+
+
+
+
+
+
+// [Fix me] Need refactor.
+.mic_container {
+    display: flex;
+    flex-direction: column;
+    border-bottom: solid 0.1rem var(--dark_800_color);
+    padding-bottom: 1rem;
+}
+
+.speaker_container {
+    padding-top: 0rem;
+}
+
+.device_container {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    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 {
+    padding: 2rem;
+}
+
+
+
+.threshold_container {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: 2rem;
+}
+
+.threshold_switch_section {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.threshold_section {
+    width: 100%;
+}
+
+
+
+
+.device_label {
+    font-size: 1.8rem;
+}
+
+.device_contents {
+    display: flex;
+    width: 100%;
+    justify-content: end;
+    padding-left: 2rem;
+    gap: 2rem;
+}
+
+.device_auto_select_wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 1.2rem;
+    justify-content: center;
+    align-items: center;
+}
+
+.device_dropdown_wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: 2.8rem;
+}
+
+.device_dropdown {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    white-space: nowrap;
+    max-width: 24rem;
+    &.is_disabled {
+        pointer-events: none;
+    }
+}
+
+.device_secondary_label {
+    padding-left: 0.2rem;
+    padding-right: 0.4rem;
+    font-size: 1.4rem;
+    color: var(--dark_500_color);
+    white-space: nowrap;
 }
\ No newline at end of file
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 cdb8d351..a69da769 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,7 +1,8 @@
 import { useEffect, useState } from "react";
 import { useI18n } from "@useI18n";
 import styles from "./Translation.module.scss";
-import { updateLabelsById } from "@utils";
+import { updateLabelsById, arrayToObject } from "@utils";
+import { useStore_IsBreakPoint } from "@store";
 
 import {
     useTranslation,
@@ -10,15 +11,19 @@ import {
 import {
     DownloadModelsContainer,
     DeeplAuthKeyContainer,
-    DropdownMenuContainer,
-    ComputeDeviceContainer,
+
+    useOnMouseLeaveDropdownMenu,
 } from "../_templates/Templates";
 
+import {
+    DropdownMenu,
+    LabelComponent,
+} from "../_components/";
+
 export const Translation = () => {
     return (
         <>
             <CTranslate2WeightType_Box />
-            <CTranslate2ComputeType_Box />
             <TranslationComputeDevice_Box />
             <DeeplAuthKey_Box />
         </>
@@ -73,73 +78,75 @@ const CTranslate2WeightType_Box = () => {
     );
 };
 
-const CTranslate2ComputeType_Box = () => {
-    const { t } = useI18n();
-    const { currentSelectableCTranslate2ComputeTypeList } = useTranslation();
-    const { currentSelectedCTranslate2ComputeType, setSelectedCTranslate2ComputeType } = useTranslation();
-
-    const selectFunction = (selected_data) => {
-        setSelectedCTranslate2ComputeType(selected_data.selected_id);
-    };
-
-    const ctranslate2_compute_type_label = t("config_page.translation.ctranslate2_compute_type.label", {
-        ctranslate2: "CTranslate2"
-    });
-
-    return (
-        <DropdownMenuContainer
-            dropdown_id="ctranslate2_compute_type"
-            label={ctranslate2_compute_type_label}
-            selected_id={currentSelectedCTranslate2ComputeType.data}
-            list={currentSelectableCTranslate2ComputeTypeList.data}
-            selectFunction={selectFunction}
-            state={currentSelectedCTranslate2ComputeType.state}
-        />
-    );
-};
-
-// Duplicate
-import { useComputeMode } from "@logics_common";
 const TranslationComputeDevice_Box = () => {
     const { t } = useI18n();
-    const { currentSelectedTranslationComputeDevice, setSelectedTranslationComputeDevice } = useTranslation();
-    const { currentSelectableTranslationComputeDeviceList } = useTranslation();
-
-    const selectFunction = (selected_data) => {
-        const target_obj = currentSelectableTranslationComputeDeviceList.data[selected_data.selected_id];
-        setSelectedTranslationComputeDevice(target_obj);
-    };
+    const {
+        currentSelectableTranslationComputeDeviceList,
+        currentSelectedTranslationComputeDevice,
+        setSelectedTranslationComputeDevice,
+        currentSelectedTranslationComputeType,
+        setSelectedTranslationComputeType,
+    } = useTranslation();
+    const { onMouseLeaveFunction } = useOnMouseLeaveDropdownMenu();
+    const { currentIsBreakPoint } = useStore_IsBreakPoint();
 
     const list_for_ui = transformDeviceArray(currentSelectableTranslationComputeDeviceList.data);
 
     const target_index = findKeyByDeviceValue(currentSelectableTranslationComputeDeviceList.data, currentSelectedTranslationComputeDevice.data);
 
+    const selectable_compute_types = arrayToObject(currentSelectableTranslationComputeDeviceList.data[target_index].compute_types);
 
-    const { currentComputeMode } = useComputeMode();
-    const translation_compute_device_label = t("config_page.translation.translation_compute_device.label", {
-        ctranslate2: "CTranslate2"
+
+    const selectFunction_ComputeDevice = (selected_data) => {
+        const target_obj = currentSelectableTranslationComputeDeviceList.data[selected_data.selected_id];
+        setSelectedTranslationComputeDevice(target_obj);
+    };
+
+    const selectFunction_ComputeType = (selected_data) => {
+        setSelectedTranslationComputeType(selected_data.selected_id);
+    };
+
+    const device_container_class = clsx(styles.device_container, {
+        [styles.is_break_point]: currentIsBreakPoint.data,
     });
-    if (currentComputeMode.data === "cpu") {
-        return (
-            <ComputeDeviceContainer
-                label={translation_compute_device_label}
-                selected_id={target_index}
-                list={list_for_ui}
-                selectFunction={selectFunction}
-                state={currentSelectedTranslationComputeDevice.state}
-            />
-        )
-    }
+
+    const is_disabled_selector = currentSelectedTranslationComputeDevice.state === "pending" || currentSelectedTranslationComputeType.state === "pending";
 
     return (
-        <DropdownMenuContainer
-            dropdown_id="translation_compute_device"
-            label={translation_compute_device_label}
-            selected_id={target_index}
-            list={list_for_ui}
-            selectFunction={selectFunction}
-            state={currentSelectedTranslationComputeDevice.state}
-        />
+        <div className={styles.mic_container}>
+            <div className={device_container_class} onMouseLeave={onMouseLeaveFunction}>
+                <LabelComponent label={t("config_page.translation.translation_compute_device.label")} />
+                <div className={styles.device_contents}>
+
+                    <div className={styles.device_dropdown_wrapper}>
+                        <div className={styles.device_dropdown}>
+                            <p className={styles.device_secondary_label}>{t("config_page.translation.translation_compute_device.label")}</p>
+                            <DropdownMenu
+                                dropdown_id="translation_compute_device"
+                                selected_id={target_index}
+                                list={list_for_ui}
+                                selectFunction={selectFunction_ComputeDevice}
+                                state={currentSelectedTranslationComputeDevice.state}
+                                style={{ maxWidth: "20rem", minWidth: "10rem" }}
+                                is_disabled={is_disabled_selector}
+                            />
+                        </div>
+
+                        <div className={styles.device_dropdown}>
+                            <p className={styles.device_secondary_label}>{t("config_page.translation.translation_compute_type.label")}</p>
+                            <DropdownMenu
+                                dropdown_id="translation_compute_type"
+                                selected_id={currentSelectedTranslationComputeType.data}
+                                list={selectable_compute_types}
+                                selectFunction={selectFunction_ComputeType}
+                                state={currentSelectedTranslationComputeType.state}
+                                is_disabled={is_disabled_selector}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     );
 };
 
diff --git a/src-ui/app/config_page/setting_section/setting_box/translation/Translation.module.scss b/src-ui/app/config_page/setting_section/setting_box/translation/Translation.module.scss
index e69de29b..7486c466 100644
--- a/src-ui/app/config_page/setting_section/setting_box/translation/Translation.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/translation/Translation.module.scss
@@ -0,0 +1,106 @@
+// [Fix me] Need refactor.
+.mic_container {
+    display: flex;
+    flex-direction: column;
+    border-bottom: solid 0.1rem var(--dark_800_color);
+    padding-bottom: 1rem;
+}
+
+.speaker_container {
+    padding-top: 0rem;
+}
+
+.device_container {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    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 {
+    padding: 2rem;
+}
+
+
+
+.threshold_container {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    gap: 2rem;
+}
+
+.threshold_switch_section {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.threshold_section {
+    width: 100%;
+}
+
+
+
+
+.device_label {
+    font-size: 1.8rem;
+}
+
+.device_contents {
+    display: flex;
+    width: 100%;
+    justify-content: end;
+    padding-left: 2rem;
+    gap: 2rem;
+}
+
+.device_auto_select_wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 1.2rem;
+    justify-content: center;
+    align-items: center;
+}
+
+.device_dropdown_wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: 2.8rem;
+}
+
+.device_dropdown {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+    white-space: nowrap;
+    max-width: 24rem;
+    &.is_disabled {
+        pointer-events: none;
+    }
+}
+
+.device_secondary_label {
+    padding-left: 0.2rem;
+    padding-right: 0.4rem;
+    font-size: 1.4rem;
+    color: var(--dark_500_color);
+    white-space: nowrap;
+}
\ No newline at end of file
diff --git a/src-ui/logics/configs/transcription/useTranscription.js b/src-ui/logics/configs/transcription/useTranscription.js
index 4af6a28c..1511d77a 100644
--- a/src-ui/logics/configs/transcription/useTranscription.js
+++ b/src-ui/logics/configs/transcription/useTranscription.js
@@ -14,8 +14,7 @@ import {
 
     useStore_WhisperWeightTypeStatus,
     useStore_SelectedWhisperWeightType,
-    useStore_SelectedWhisperComputeType,
-    useStore_SelectableWhisperComputeTypeList,
+    useStore_SelectedTranscriptionComputeType,
 
     useStore_MicAvgLogprob,
     useStore_MicNoSpeechProb,
@@ -48,8 +47,7 @@ export const useTranscription = () => {
     const { currentSelectedWhisperWeightType, updateSelectedWhisperWeightType, pendingSelectedWhisperWeightType } = useStore_SelectedWhisperWeightType();
 
 
-    const { currentSelectableWhisperComputeTypeList, updateSelectableWhisperComputeTypeList, pendingSelectableWhisperComputeTypeList } = useStore_SelectableWhisperComputeTypeList();
-    const { currentSelectedWhisperComputeType, updateSelectedWhisperComputeType, pendingSelectedWhisperComputeType } = useStore_SelectedWhisperComputeType();
+    const { currentSelectedTranscriptionComputeType, updateSelectedTranscriptionComputeType, pendingSelectedTranscriptionComputeType } = useStore_SelectedTranscriptionComputeType();
 
     const { currentSelectableTranscriptionComputeDeviceList, updateSelectableTranscriptionComputeDeviceList, pendingSelectableTranscriptionComputeDeviceList } = useStore_SelectableTranscriptionComputeDeviceList();
     const { currentSelectedTranscriptionComputeDevice, updateSelectedTranscriptionComputeDevice, pendingSelectedTranscriptionComputeDevice } = useStore_SelectedTranscriptionComputeDevice();
@@ -255,28 +253,19 @@ export const useTranscription = () => {
     };
 
 
-    const getSelectableWhisperComputeTypeList = () => {
-        pendingSelectableWhisperComputeTypeList();
-        asyncStdoutToPython("/get/data/whisper_compute_type_list");
+
+    const getSelectedTranscriptionComputeType = () => {
+        pendingSelectedTranscriptionComputeType();
+        asyncStdoutToPython("/get/data/transcription_compute_type");
     };
 
-    const updateSelectableWhisperComputeTypeList_FromBackend = (payload) => {
-        updateSelectableWhisperComputeTypeList(arrayToObject(payload));
+    const setSelectedTranscriptionComputeType = (selected_transcription_compute_type) => {
+        pendingSelectedTranscriptionComputeType();
+        asyncStdoutToPython("/set/data/transcription_compute_type", selected_transcription_compute_type);
     };
 
-
-    const getSelectedWhisperComputeType = () => {
-        pendingSelectedWhisperComputeType();
-        asyncStdoutToPython("/get/data/whisper_compute_type");
-    };
-
-    const setSelectedWhisperComputeType = (selected_whisper_compute_type) => {
-        pendingSelectedWhisperComputeType();
-        asyncStdoutToPython("/set/data/whisper_compute_type", selected_whisper_compute_type);
-    };
-
-    const setSuccessSelectedWhisperComputeType = (selected_whisper_compute_type) => {
-        updateSelectedWhisperComputeType(selected_whisper_compute_type);
+    const setSuccessSelectedTranscriptionComputeType = (selected_transcription_compute_type) => {
+        updateSelectedTranscriptionComputeType(selected_transcription_compute_type);
         showNotification_SaveSuccess();
     };
 
@@ -452,16 +441,11 @@ export const useTranscription = () => {
         setSuccessSelectedWhisperWeightType,
 
 
-        currentSelectableWhisperComputeTypeList,
-        getSelectableWhisperComputeTypeList,
-        updateSelectableWhisperComputeTypeList,
-        updateSelectableWhisperComputeTypeList_FromBackend,
-
-        currentSelectedWhisperComputeType,
-        getSelectedWhisperComputeType,
-        updateSelectedWhisperComputeType,
-        setSelectedWhisperComputeType,
-        setSuccessSelectedWhisperComputeType,
+        currentSelectedTranscriptionComputeType,
+        getSelectedTranscriptionComputeType,
+        updateSelectedTranscriptionComputeType,
+        setSelectedTranscriptionComputeType,
+        setSuccessSelectedTranscriptionComputeType,
 
 
         currentSelectableTranscriptionComputeDeviceList,
diff --git a/src-ui/logics/configs/translation/useTranslation.js b/src-ui/logics/configs/translation/useTranslation.js
index 28ab10a4..5c3bb83e 100644
--- a/src-ui/logics/configs/translation/useTranslation.js
+++ b/src-ui/logics/configs/translation/useTranslation.js
@@ -1,8 +1,7 @@
 import {
     useStore_CTranslate2WeightTypeStatus,
     useStore_SelectedCTranslate2WeightType,
-    useStore_SelectableCTranslate2ComputeTypeList,
-    useStore_SelectedCTranslate2ComputeType,
+    useStore_SelectedTranslationComputeType,
     useStore_SelectableTranslationComputeDeviceList,
     useStore_SelectedTranslationComputeDevice,
     useStore_DeepLAuthKey,
@@ -20,8 +19,7 @@ export const useTranslation = () => {
     const { currentCTranslate2WeightTypeStatus, updateCTranslate2WeightTypeStatus, pendingCTranslate2WeightTypeStatus } = useStore_CTranslate2WeightTypeStatus();
     const { currentSelectedCTranslate2WeightType, updateSelectedCTranslate2WeightType, pendingSelectedCTranslate2WeightType } = useStore_SelectedCTranslate2WeightType();
 
-    const { currentSelectableCTranslate2ComputeTypeList, updateSelectableCTranslate2ComputeTypeList, pendingSelectableCTranslate2ComputeTypeList } = useStore_SelectableCTranslate2ComputeTypeList();
-    const { currentSelectedCTranslate2ComputeType, updateSelectedCTranslate2ComputeType, pendingSelectedCTranslate2ComputeType } = useStore_SelectedCTranslate2ComputeType();
+    const { currentSelectedTranslationComputeType, updateSelectedTranslationComputeType, pendingSelectedTranslationComputeType } = useStore_SelectedTranslationComputeType();
 
     const { currentSelectableTranslationComputeDeviceList, updateSelectableTranslationComputeDeviceList, pendingSelectableTranslationComputeDeviceList } = useStore_SelectableTranslationComputeDeviceList();
     const { currentSelectedTranslationComputeDevice, updateSelectedTranslationComputeDevice, pendingSelectedTranslationComputeDevice } = useStore_SelectedTranslationComputeDevice();
@@ -87,29 +85,18 @@ export const useTranslation = () => {
     };
 
 
-
-    const getSelectableCTranslate2ComputeTypeList = () => {
-        pendingSelectableCTranslate2ComputeTypeList();
-        asyncStdoutToPython("/get/data/ctranslate2_compute_type_list");
+    const getSelectedTranslationComputeType = () => {
+        pendingSelectedTranslationComputeType();
+        asyncStdoutToPython("/get/data/translation_compute_type");
     };
 
-    const updateSelectableCTranslate2ComputeTypeList_FromBackend = (payload) => {
-        updateSelectableCTranslate2ComputeTypeList(arrayToObject(payload));
+    const setSelectedTranslationComputeType = (selected_translation_compute_type) => {
+        pendingSelectedTranslationComputeType();
+        asyncStdoutToPython("/set/data/translation_compute_type", selected_translation_compute_type);
     };
 
-
-    const getSelectedCTranslate2ComputeType = () => {
-        pendingSelectedCTranslate2ComputeType();
-        asyncStdoutToPython("/get/data/ctranslate2_compute_type");
-    };
-
-    const setSelectedCTranslate2ComputeType = (selected_ctranslate2_compute_type) => {
-        pendingSelectedCTranslate2ComputeType();
-        asyncStdoutToPython("/set/data/ctranslate2_compute_type", selected_ctranslate2_compute_type);
-    };
-
-    const setSuccessSelectedCTranslate2ComputeType = (selected_ctranslate2_compute_type) => {
-        updateSelectedCTranslate2ComputeType(selected_ctranslate2_compute_type);
+    const setSuccessSelectedTranslationComputeType = (selected_translation_compute_type) => {
+        updateSelectedTranslationComputeType(selected_translation_compute_type);
         showNotification_SaveSuccess();
     };
 
@@ -182,16 +169,11 @@ export const useTranslation = () => {
         setSuccessSelectedCTranslate2WeightType,
 
 
-        currentSelectableCTranslate2ComputeTypeList,
-        getSelectableCTranslate2ComputeTypeList,
-        updateSelectableCTranslate2ComputeTypeList,
-        updateSelectableCTranslate2ComputeTypeList_FromBackend,
-
-        currentSelectedCTranslate2ComputeType,
-        getSelectedCTranslate2ComputeType,
-        updateSelectedCTranslate2ComputeType,
-        setSelectedCTranslate2ComputeType,
-        setSuccessSelectedCTranslate2ComputeType,
+        currentSelectedTranslationComputeType,
+        getSelectedTranslationComputeType,
+        updateSelectedTranslationComputeType,
+        setSelectedTranslationComputeType,
+        setSuccessSelectedTranslationComputeType,
 
 
         currentSelectableTranslationComputeDeviceList,
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index a4b92e6e..049697a3 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -172,9 +172,8 @@ export const ROUTE_META_LIST = [
     { endpoint: "/get/data/ctranslate2_weight_type", ns: configs, hook_name: "useTranslation", method_name: "updateSelectedCTranslate2WeightType" },
     { endpoint: "/set/data/ctranslate2_weight_type", ns: configs, hook_name: "useTranslation", method_name: "setSuccessSelectedCTranslate2WeightType" },
 
-    { endpoint: "/get/data/ctranslate2_compute_type_list", ns: configs, hook_name: "useTranslation", method_name: "updateSelectableCTranslate2ComputeTypeList_FromBackend" },
-    { endpoint: "/get/data/ctranslate2_compute_type", ns: configs, hook_name: "useTranslation", method_name: "updateSelectedCTranslate2ComputeType" },
-    { endpoint: "/set/data/ctranslate2_compute_type", ns: configs, hook_name: "useTranslation", method_name: "setSuccessSelectedCTranslate2ComputeType" },
+    { endpoint: "/get/data/translation_compute_type", ns: configs, hook_name: "useTranslation", method_name: "updateSelectedTranslationComputeType" },
+    { endpoint: "/set/data/translation_compute_type", ns: configs, hook_name: "useTranslation", method_name: "setSuccessSelectedTranslationComputeType" },
 
     { endpoint: "/run/downloaded_ctranslate2_weight", ns: configs, hook_name: "useTranslation", method_name: "downloadedCTranslate2WeightType" },
     { endpoint: "/run/download_ctranslate2_weight", ns: null, hook_name: null, method_name: null },
@@ -218,9 +217,8 @@ export const ROUTE_META_LIST = [
     { endpoint: "/get/data/whisper_weight_type", ns: configs, hook_name: "useTranscription", method_name: "updateSelectedWhisperWeightType" },
     { endpoint: "/set/data/whisper_weight_type", ns: configs, hook_name: "useTranscription", method_name: "setSuccessSelectedWhisperWeightType" },
 
-    { endpoint: "/get/data/whisper_compute_type_list", ns: configs, hook_name: "useTranscription", method_name: "updateSelectableWhisperComputeTypeList_FromBackend" },
-    { endpoint: "/get/data/whisper_compute_type", ns: configs, hook_name: "useTranscription", method_name: "updateSelectedWhisperComputeType" },
-    { endpoint: "/set/data/whisper_compute_type", ns: configs, hook_name: "useTranscription", method_name: "setSuccessSelectedWhisperComputeType" },
+    { endpoint: "/get/data/transcription_compute_type", ns: configs, hook_name: "useTranscription", method_name: "updateSelectedTranscriptionComputeType" },
+    { endpoint: "/set/data/transcription_compute_type", ns: configs, hook_name: "useTranscription", method_name: "setSuccessSelectedTranscriptionComputeType" },
 
 
     { endpoint: "/run/downloaded_whisper_weight", ns: configs, hook_name: "useTranscription", method_name: "downloadedWhisperWeightType" },
diff --git a/src-ui/store.js b/src-ui/store.js
index 6d110bce..3286b165 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -220,12 +220,9 @@ export const { atomInstance: Atom_DeepLAuthKey, useHook: useStore_DeepLAuthKey }
 export const { atomInstance: Atom_SelectedCTranslate2WeightType, useHook: useStore_SelectedCTranslate2WeightType } = createAtomWithHook("", "SelectedCTranslate2WeightType");
 export const { atomInstance: Atom_CTranslate2WeightTypeStatus, useHook: useStore_CTranslate2WeightTypeStatus } = createAtomWithHook(ctranslate2_weight_type_status, "CTranslate2WeightTypeStatus");
 
-export const { atomInstance: Atom_SelectableCTranslate2ComputeTypeList, useHook: useStore_SelectableCTranslate2ComputeTypeList } = createAtomWithHook({}, "SelectableCTranslate2ComputeTypeList");
-export const { atomInstance: Atom_SelectedCTranslate2ComputeType, useHook: useStore_SelectedCTranslate2ComputeType } = createAtomWithHook("", "SelectedCTranslate2ComputeType");
-
-
 export const { atomInstance: Atom_SelectableTranslationComputeDeviceList, useHook: useStore_SelectableTranslationComputeDeviceList } = createAtomWithHook({}, "SelectableTranslationComputeDeviceList");
 export const { atomInstance: Atom_SelectedTranslationComputeDevice, useHook: useStore_SelectedTranslationComputeDevice } = createAtomWithHook("", "SelectedTranslationComputeDevice");
+export const { atomInstance: Atom_SelectedTranslationComputeType, useHook: useStore_SelectedTranslationComputeType } = createAtomWithHook("", "SelectedTranslationComputeType");
 
 // Transcription
 export const { atomInstance: Atom_MicRecordTimeout, useHook: useStore_MicRecordTimeout } = createAtomWithHook(0, "MicRecordTimeout");
@@ -240,12 +237,9 @@ export const { atomInstance: Atom_SelectedWhisperWeightType, useHook: useStore_S
 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");
 
-export const { atomInstance: Atom_SelectableWhisperComputeTypeList, useHook: useStore_SelectableWhisperComputeTypeList } = createAtomWithHook({}, "SelectableWhisperComputeTypeList");
-export const { atomInstance: Atom_SelectedWhisperComputeType, useHook: useStore_SelectedWhisperComputeType } = createAtomWithHook("", "SelectedWhisperComputeType");
-
-
 export const { atomInstance: Atom_SelectableTranscriptionComputeDeviceList, useHook: useStore_SelectableTranscriptionComputeDeviceList } = createAtomWithHook({}, "SelectableTranscriptionComputeDeviceList");
 export const { atomInstance: Atom_SelectedTranscriptionComputeDevice, useHook: useStore_SelectedTranscriptionComputeDevice } = createAtomWithHook("", "SelectedTranscriptionComputeDevice");
+export const { atomInstance: Atom_SelectedTranscriptionComputeType, useHook: useStore_SelectedTranscriptionComputeType } = createAtomWithHook("", "SelectedTranscriptionComputeType");
 
 export const { atomInstance: Atom_MicAvgLogprob, useHook: useStore_MicAvgLogprob } = createAtomWithHook(-0.8, "MicAvgLogprob");
 export const { atomInstance: Atom_MicNoSpeechProb, useHook: useStore_MicNoSpeechProb } = createAtomWithHook(0.6, "MicNoSpeechProb");