diff --git a/src-ui/app/App.jsx b/src-ui/app/App.jsx
index fce5a72f..3d69130c 100644
--- a/src-ui/app/App.jsx
+++ b/src-ui/app/App.jsx
@@ -18,6 +18,8 @@ export const App = () => {
         getSoftwareVersion,
         getMicHostList,
         getSelectedMicHost,
+        getMicDeviceList,
+        getSelectedMicDevice,
     } = useConfig();
 
     useEffect(() => {
@@ -27,8 +29,10 @@ export const App = () => {
                 getSoftwareVersion();
                 getMicHostList();
                 getSelectedMicHost();
+                getMicDeviceList();
+                getSelectedMicDevice();
             }).catch((err) => {
-
+                console.error(err);
             });
         }
         return () => hasRunRef.current = true;
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 10952f26..8babb5be 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
@@ -29,6 +29,10 @@ export const Device = () => {
 
                 break;
 
+            case "mic_device":
+
+                break;
+
             default:
                 break;
         }
@@ -45,14 +49,15 @@ export const Device = () => {
                 selectFunction={selectFunction}
                 state={currentSelectedMicHost.state}
             />
-            {/* <DropdownMenuContainer
+
+            <DropdownMenuContainer
                 dropdown_id="mic_device"
                 label={t("config_page.mic_device.label")}
                 selected_id={currentSelectedMicDevice.data}
                 list={currentMicDeviceList.data}
                 selectFunction={selectFunction}
                 state={currentSelectedMicDevice.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 05d71086..a8bb611b 100644
--- a/src-ui/logics/useConfig.js
+++ b/src-ui/logics/useConfig.js
@@ -2,6 +2,8 @@ import {
     useSoftwareVersion,
     useMicHostList,
     useSelectedMicHost,
+    useMicDeviceList,
+    useSelectedMicDevice,
 } from "@store";
 
 import { useStdoutToPython } from "./useStdoutToPython";
@@ -14,6 +16,8 @@ export const useConfig = () => {
     const { updateSoftwareVersion } = useSoftwareVersion();
     const { updateMicHostList } = useMicHostList();
     const { updateSelectedMicHost } = useSelectedMicHost();
+    const { updateMicDeviceList } = useMicDeviceList();
+    const { updateSelectedMicDevice } = useSelectedMicDevice();
 
 
     return {
@@ -29,6 +33,15 @@ export const useConfig = () => {
             updateSelectedMicHost(payload.data);
         },
 
+        getMicDeviceList: () => asyncStdoutToPython("/controller/list_mic_device"),
+        updateMicDeviceList: (payload) => {
+            updateMicDeviceList(arrayToObject(payload.data));
+        },
+        getSelectedMicDevice: () => asyncStdoutToPython("/config/choice_mic_device"),
+        updateSelectedMicDevice: (payload) => {
+            updateSelectedMicDevice(payload.data);
+        },
+
 
     };
 };
\ No newline at end of file
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index 28e9c014..cd3e6c6b 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -19,6 +19,8 @@ export const useReceiveRoutes = () => {
         updateSoftwareVersion,
         updateMicHostList,
         updateSelectedMicHost,
+        updateMicDeviceList,
+        updateSelectedMicDevice,
     } = useConfig();
 
     const routes = {
@@ -32,7 +34,8 @@ export const useReceiveRoutes = () => {
         "/config/version": updateSoftwareVersion,
         "/controller/list_mic_host": updateMicHostList,
         "/config/choice_mic_host": updateSelectedMicHost,
-
+        "/controller/list_mic_device": updateMicDeviceList,
+        "/config/choice_mic_device": updateSelectedMicDevice,
 
         "/controller/callback_messagebox_send": updateSentMessageLog,
         "/action/transcription_send_mic_message": addSentMessageLog,
diff --git a/src-ui/store.js b/src-ui/store.js
index 196c3a57..6472140d 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -119,8 +119,8 @@ export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useIsOpenedDrop
 // Config Page
 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(test_device_list, "MicDeviceList");
-export const { atomInstance: Atom_SelectedMicDevice, useHook: useSelectedMicDevice } = createAsyncAtomWithHook("device b", "SelectedMicDevice");
+export const { atomInstance: Atom_MicDeviceList, useHook: useMicDeviceList } = createAsyncAtomWithHook([], "MicDeviceList");
+export const { atomInstance: Atom_SelectedMicDevice, useHook: useSelectedMicDevice } = createAsyncAtomWithHook("Nothing Selected", "SelectedMicDevice");
 
 
 export const { atomInstance: Atom_SendMessageFormat, useHook: useSendMessageFormat } = createAtomWithHook({