diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx
index 3d69130c..337d701f 100644
--- a/src-ui/app/App.jsx
+++ b/src-ui/app/App.jsx
@@ -16,10 +16,11 @@ export const App = () => {
     const { currentIsOpenedConfigPage } = useIsOpenedConfigPage();
     const {
         getSoftwareVersion,
-        getMicHostList,
+        // getMicHostList,
         getSelectedMicHost,
-        getMicDeviceList,
+        // getMicDeviceList,
         getSelectedMicDevice,
+        getSelectedSpeakerDevice,
     } = useConfig();
 
     useEffect(() => {
@@ -27,10 +28,11 @@ export const App = () => {
         if (!hasRunRef.current) {
             asyncStartPython().then((result) => {
                 getSoftwareVersion();
-                getMicHostList();
+                // getMicHostList();
                 getSelectedMicHost();
-                getMicDeviceList();
+                // getMicDeviceList();
                 getSelectedMicDevice();
+                getSelectedSpeakerDevice();
             }).catch((err) => {
                 console.error(err);
             });
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx b/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx
index 83f56506..8e34ffad 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/components/dropdown_menu/DropdownMenu.jsx
@@ -1,16 +1,16 @@
 import styles from "./DropdownMenu.module.scss";
-
 import clsx from "clsx";
 import ArrowLeftSvg from "@images/arrow_left.svg?react";
 import { useIsOpenedDropdownMenu } from "@store";
 
 export const DropdownMenu = (props) => {
-
     const { updateIsOpenedDropdownMenu, currentIsOpenedDropdownMenu } = useIsOpenedDropdownMenu();
+
     const toggleDropdownMenu = () => {
         if (currentIsOpenedDropdownMenu === props.dropdown_id) {
             updateIsOpenedDropdownMenu("");
         } else {
+            if (props.openListFunction !== undefined) props.openListFunction();
             updateIsOpenedDropdownMenu(props.dropdown_id);
         }
     };
@@ -38,9 +38,8 @@ export const DropdownMenu = (props) => {
     const getSelectedText = () => {
         if (props.state !== "hasData") return;
         return props.selected_id;
-        // return (props.list[props.selected_id]) ? props.list[props.selected_id] : "Nothing selected";
     };
-
+    const list = (props.list === undefined) ? {} : props.list;
 
     return (
         <div className={styles.container}>
@@ -57,10 +56,10 @@ export const DropdownMenu = (props) => {
             <div className={dropdown_content_wrapper_class_name}>
                 <div className={styles.dropdown_content}>
                     {(props.state === "hasData")
-                        ? Object.entries(props.list).map(([key, value]) => {
+                        ? Object.entries(list).map(([key, value]) => {
                             return (
                                 <div key={key} className={styles.value_button} onClick={() => selectValue(key)}>
-                                    <p className={styles.value_text} >{value}</p>
+                                    <p className={styles.value_text}>{value}</p>
                                 </div>
                             );
                         })
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 76d8ce06..6059dbd4 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,12 +1,12 @@
 import { useTranslation } from "react-i18next";
-import FolderOpenSvg from "@images/folder_open.svg?react";
-
 import { useSettingBox } from "../components/useSettingBox";
 import {
     useMicHostList,
     useSelectedMicHost,
     useSelectedMicDevice,
     useMicDeviceList,
+    useSelectedSpeakerDevice,
+    useSpeakerDeviceList,
 } from "@store";
 
 import { useConfig } from "@logics/useConfig";
@@ -25,9 +25,16 @@ export const Device = () => {
     const { currentMicDeviceList } = useMicDeviceList();
     const { currentSelectedMicDevice } = useSelectedMicDevice();
 
+    const { currentSpeakerDeviceList } = useSpeakerDeviceList();
+    const { currentSelectedSpeakerDevice } = useSelectedSpeakerDevice();
+
     const {
         setSelectedMicHost,
         setSelectedMicDevice,
+        getMicHostList,
+        getMicDeviceList,
+        setSelectedSpeakerDevice,
+        getSpeakerDeviceList,
     } = useConfig();
 
     const selectFunction = (selected_data) => {
@@ -40,6 +47,10 @@ export const Device = () => {
                 setSelectedMicDevice(selected_data.selected_id);
                 break;
 
+                case "speaker_device":
+                setSelectedSpeakerDevice(selected_data.selected_id);
+                break;
+
             default:
                 break;
         }
@@ -54,6 +65,7 @@ export const Device = () => {
                 selected_id={currentSelectedMicHost.data}
                 list={currentMicHostList.data}
                 selectFunction={selectFunction}
+                openListFunction={getMicHostList}
                 state={currentSelectedMicHost.state}
             />
 
@@ -63,8 +75,19 @@ export const Device = () => {
                 selected_id={currentSelectedMicDevice.data}
                 list={currentMicDeviceList.data}
                 selectFunction={selectFunction}
+                openListFunction={getMicDeviceList}
                 state={currentSelectedMicDevice.state}
             />
+
+            <DropdownMenuContainer
+                dropdown_id="speaker_device"
+                label={t("config_page.speaker_device.label")}
+                selected_id={currentSelectedSpeakerDevice.data}
+                list={currentSpeakerDeviceList.data}
+                selectFunction={selectFunction}
+                openListFunction={getSpeakerDeviceList}
+                state={currentSelectedSpeakerDevice.state}
+            />
 {/*
             <ThresholdContainer label={t("config_page.mic_dynamic_energy_threshold.label_for_manual")} desc={t("config_page.mic_dynamic_energy_threshold.desc_for_manual")} id="mic_threshold"  min="0" max="3000"/>
 
diff --git a/src-ui/logics/useConfig.js b/src-ui/logics/useConfig.js
index fc6d4ef5..fb7c54fc 100644
--- a/src-ui/logics/useConfig.js
+++ b/src-ui/logics/useConfig.js
@@ -4,6 +4,8 @@ import {
     useSelectedMicHost,
     useMicDeviceList,
     useSelectedMicDevice,
+    useSpeakerDeviceList,
+    useSelectedSpeakerDevice,
 } from "@store";
 
 import { useStdoutToPython } from "./useStdoutToPython";
@@ -18,36 +20,75 @@ export const useConfig = () => {
     const { updateSelectedMicHost } = useSelectedMicHost();
     const { updateMicDeviceList } = useMicDeviceList();
     const { updateSelectedMicDevice } = useSelectedMicDevice();
+    const { updateSpeakerDeviceList } = useSpeakerDeviceList();
+    const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
 
 
+    const asyncPending = () => new Promise(() => {});
     return {
-        getSoftwareVersion: () => asyncStdoutToPython("/config/version"),
+        getSoftwareVersion: () => {
+            updateSoftwareVersion(asyncPending);
+            asyncStdoutToPython("/config/version");
+        },
         updateSoftwareVersion: (payload) => updateSoftwareVersion(payload.data),
 
-        getMicHostList: () => asyncStdoutToPython("/controller/list_mic_host"),
+        getMicHostList: () => {
+            updateMicHostList(asyncPending);
+            asyncStdoutToPython("/controller/list_mic_host");
+        },
         updateMicHostList: (payload) => {
             updateMicHostList(arrayToObject(payload.data));
         },
-        getSelectedMicHost: () => asyncStdoutToPython("/config/choice_mic_host"),
+        getSelectedMicHost: () => {
+            updateSelectedMicHost(asyncPending);
+            asyncStdoutToPython("/config/choice_mic_host");
+        },
         updateSelectedMicHost: (payload) => {
             updateSelectedMicHost(payload.data);
         },
         setSelectedMicHost: (selected_mic_host) => {
+            updateSelectedMicHost(asyncPending);
             asyncStdoutToPython("/controller/callback_set_mic_host", selected_mic_host);
         },
 
-        getMicDeviceList: () => asyncStdoutToPython("/controller/list_mic_device"),
+        getMicDeviceList: () => {
+            updateMicDeviceList(asyncPending);
+            asyncStdoutToPython("/controller/list_mic_device");
+        },
         updateMicDeviceList: (payload) => {
             updateMicDeviceList(arrayToObject(payload.data));
         },
-        getSelectedMicDevice: () => asyncStdoutToPython("/config/choice_mic_device"),
+        getSelectedMicDevice: () => {
+            updateSelectedMicDevice(asyncPending);
+            asyncStdoutToPython("/config/choice_mic_device");
+        },
         updateSelectedMicDevice: (payload) => {
             updateSelectedMicDevice(payload.data);
         },
         setSelectedMicDevice: (selected_mic_device) => {
+            updateSelectedMicDevice(asyncPending);
             asyncStdoutToPython("/controller/callback_set_mic_device", selected_mic_device);
         },
 
+        getSpeakerDeviceList: () => {
+            updateSpeakerDeviceList(asyncPending);
+            asyncStdoutToPython("/controller/list_speaker_device");
+        },
+        updateSpeakerDeviceList: (payload) => {
+            updateSpeakerDeviceList(arrayToObject(payload.data));
+        },
+        getSelectedSpeakerDevice: () => {
+            updateSelectedSpeakerDevice(asyncPending);
+            asyncStdoutToPython("/config/choice_speaker_device");
+        },
+        updateSelectedSpeakerDevice: (payload) => {
+            updateSelectedSpeakerDevice(payload.data);
+        },
+        setSelectedSpeakerDevice: (selected_speaker_device) => {
+            updateSelectedSpeakerDevice(asyncPending);
+            asyncStdoutToPython("/controller/callback_set_speaker_device", selected_speaker_device);
+        },
+
         updateMicHostAndDevice: (payload) => {
             updateSelectedMicHost(payload.data.host);
             updateSelectedMicDevice(payload.data.device);
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index 0e481ae3..d3fee4b6 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -22,6 +22,10 @@ export const useReceiveRoutes = () => {
         updateMicDeviceList,
         updateSelectedMicDevice,
         updateMicHostAndDevice,
+
+        updateSpeakerDeviceList,
+        updateSelectedSpeakerDevice,
+
     } = useConfig();
 
     const routes = {
@@ -32,14 +36,22 @@ export const useReceiveRoutes = () => {
         "/controller/callback_enable_transcription_receive": updateTranscriptionReceiveStatus,
         "/controller/callback_disable_transcription_receive": updateTranscriptionReceiveStatus,
 
+
         "/config/version": updateSoftwareVersion,
+
         "/controller/list_mic_host": updateMicHostList,
         "/config/choice_mic_host": updateSelectedMicHost,
+        "/controller/callback_set_mic_host": updateMicHostAndDevice,
+
         "/controller/list_mic_device": updateMicDeviceList,
         "/config/choice_mic_device": updateSelectedMicDevice,
-        "/controller/callback_set_mic_host": updateMicHostAndDevice,
         "/controller/callback_set_mic_device": updateSelectedMicDevice,
 
+        "/controller/list_speaker_device": updateSpeakerDeviceList,
+        "/config/choice_speaker_device": updateSelectedSpeakerDevice,
+        "/controller/callback_set_speaker_device": updateSelectedSpeakerDevice,
+
+
         "/controller/callback_messagebox_send": updateSentMessageLog,
         "/action/transcription_send_mic_message": addSentMessageLog,
         "/action/transcription_receive_speaker_message": addReceivedMessageLog
diff --git a/src-ui/store.js b/src-ui/store.js
index 6472140d..553d2e75 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -6,7 +6,6 @@ import {
 
 import {
     translator_list,
-    test_device_list,
     generateTestData,
     word_filter_list,
 } from "@data";
@@ -117,11 +116,13 @@ export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useIsOpenedDrop
 
 
 // Config Page
-export const { atomInstance: Atom_MicHostList, useHook: useMicHostList } = createAsyncAtomWithHook([], "MicHostList");
+export const { atomInstance: Atom_MicHostList, useHook: useMicHostList } = createAsyncAtomWithHook({}, "MicHostList");
 export const { atomInstance: Atom_SelectedMicHost, useHook: useSelectedMicHost } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicHost");
-export const { atomInstance: Atom_MicDeviceList, useHook: useMicDeviceList } = createAsyncAtomWithHook([], "MicDeviceList");
+export const { atomInstance: Atom_MicDeviceList, useHook: useMicDeviceList } = createAsyncAtomWithHook({}, "MicDeviceList");
 export const { atomInstance: Atom_SelectedMicDevice, useHook: useSelectedMicDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicDevice");
 
+export const { atomInstance: Atom_SpeakerDeviceList, useHook: useSpeakerDeviceList } = createAsyncAtomWithHook({}, "SpeakerDeviceList");
+export const { atomInstance: Atom_SelectedSpeakerDevice, useHook: useSelectedSpeakerDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedSpeakerDevice");
 
 export const { atomInstance: Atom_SendMessageFormat, useHook: useSendMessageFormat } = createAtomWithHook({
     before: "",