diff --git a/src-ui/windows/config_window/setting_section/setting_box/Appearance/Appearance.jsx b/src-ui/windows/config_window/setting_section/setting_box/Appearance/Appearance.jsx
index f419b1d0..4099b957 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/Appearance/Appearance.jsx
+++ b/src-ui/windows/config_window/setting_section/setting_box/Appearance/Appearance.jsx
@@ -1,4 +1,4 @@
-import { useSettingBox } from "../useSettingBox";
+import { useSettingBox } from "../components/useSettingBox";
 import { useSelectedMicDeviceStatus, useMicDeviceListStatus } from "@store";
 export const Appearance = () => {
     const { currentSelectedMicDeviceStatus, updateSelectedMicDeviceStatus } = useSelectedMicDeviceStatus();
diff --git a/src-ui/windows/config_window/setting_section/setting_box/SettingBox.jsx b/src-ui/windows/config_window/setting_section/setting_box/SettingBox.jsx
index 27546ee3..6a0fe095 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/SettingBox.jsx
+++ b/src-ui/windows/config_window/setting_section/setting_box/SettingBox.jsx
@@ -1,4 +1,3 @@
-import styles from "./SettingBox.module.scss";
 import { useSelectedConfigTabId } from "@store";
 
 import { Appearance } from "./appearance/Appearance";
diff --git a/src-ui/windows/config_window/setting_section/setting_box/SettingBox.module.scss b/src-ui/windows/config_window/setting_section/setting_box/SettingBox.module.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx
new file mode 100644
index 00000000..4099b957
--- /dev/null
+++ b/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx
@@ -0,0 +1,25 @@
+import { useSettingBox } from "../components/useSettingBox";
+import { useSelectedMicDeviceStatus, useMicDeviceListStatus } from "@store";
+export const Appearance = () => {
+    const { currentSelectedMicDeviceStatus, updateSelectedMicDeviceStatus } = useSelectedMicDeviceStatus();
+    const { currentMicDeviceListStatus } = useMicDeviceListStatus();
+    const { DropdownMenuContainer } = useSettingBox();
+
+    const selectFunction = (selected_data) => {
+        const asyncFunction = () => {
+            return new Promise((resolve) => {
+                setTimeout(() => {
+                    resolve(selected_data.selected_id);
+                }, 3000);
+            });
+        };
+        updateSelectedMicDeviceStatus(asyncFunction);
+    };
+
+    return (
+        <>
+            <DropdownMenuContainer dropdown_id="mic_host" label="Mic Host/Driver" desc="description" selected_id="b" list={{a: "A", b: "B", c: "C"}} />
+            <DropdownMenuContainer dropdown_id="mic_device" label="Mic Device" desc="description" selected_id={currentSelectedMicDeviceStatus.data} list={currentMicDeviceListStatus} selectFunction={selectFunction} state={currentSelectedMicDeviceStatus.state} />
+        </>
+    );
+};
\ No newline at end of file
diff --git a/src-ui/windows/config_window/setting_section/setting_box/useSettingBox.jsx b/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx
similarity index 79%
rename from src-ui/windows/config_window/setting_section/setting_box/useSettingBox.jsx
rename to src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx
index 0afb5d07..f0a9c43f 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/useSettingBox.jsx
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.jsx
@@ -1,6 +1,6 @@
 import styles from "./useSettingBox.module.scss";
-import { LabelComponent } from "./components/label_component/LabelComponent";
-import { DropdownMenu } from "./components/dropdown_menu/DropdownMenu";
+import { LabelComponent } from "./label_component/LabelComponent";
+import { DropdownMenu } from "./dropdown_menu/DropdownMenu";
 import { useIsOpenedDropdownMenu } from "@store";
 
 export const useSettingBox = () => {
diff --git a/src-ui/windows/config_window/setting_section/setting_box/useSettingBox.module.scss b/src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.module.scss
similarity index 100%
rename from src-ui/windows/config_window/setting_section/setting_box/useSettingBox.module.scss
rename to src-ui/windows/config_window/setting_section/setting_box/components/useSettingBox.module.scss