diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/index.js b/src-ui/app/config_page/setting_section/setting_box/_components/index.js
index ffd9fa96..d702c1ee 100644
--- a/src-ui/app/config_page/setting_section/setting_box/_components/index.js
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/index.js
@@ -5,6 +5,7 @@ export { DropdownMenu } from "./dropdown_menu/DropdownMenu";
export { Entry } from "./entry/Entry";
export { LabelComponent } from "./label_component/LabelComponent";
export { RadioButton } from "./radio_button/RadioButton";
+export { SectionLabelComponent } from "./section_label_component/SectionLabelComponent";
export { Slider } from "./slider/Slider";
export { SwitchBox } from "./switch_box/SwitchBox";
export { ThresholdComponent } from "./threshold_component/ThresholdComponent";
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.jsx b/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.jsx
new file mode 100644
index 00000000..7b79ebef
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.jsx
@@ -0,0 +1,11 @@
+import styles from "./SectionLabelComponent.module.scss";
+import clsx from "clsx";
+
+export const SectionLabelComponent = (props) => {
+ return (
+
+ );
+};
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.module.scss b/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.module.scss
new file mode 100644
index 00000000..93be3c4b
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/_components/section_label_component/SectionLabelComponent.module.scss
@@ -0,0 +1,16 @@
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 2rem;
+ padding-bottom: 2rem;
+}
+.section_label {
+ font-size: 2rem;
+ flex-shrink: 0;
+}
+.section_line {
+ width: 100%;
+ height: 0.1rem;
+ background: linear-gradient(90deg, var(--dark_400_color) 0%, var(--dark_600_color) 35%, var(--dark_800_color) 100%);
+}
\ No newline at end of file
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 9d11bd9f..86dd6bea 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
@@ -24,25 +24,30 @@ import {
RadioButtonContainer,
} from "../_templates/Templates";
+import {
+ SectionLabelComponent,
+} from "../_components/";
+
export const Transcription = () => {
return (
- <>
+
- >
+
);
};
const Mic_Container = () => {
return (
- <>
+
+
- >
+
);
};
@@ -144,11 +149,12 @@ const MicWordFilter_Box = () => {
const Speaker_Container = () => {
return (
- <>
+
+
- >
+
);
};
@@ -238,10 +244,11 @@ const SpeakerMaxWords_Box = () => {
const TranscriptionEngine_Container = () => {
return (
- <>
+
+
- >
+
);
};
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 e69de29b..1170a41c 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
@@ -0,0 +1,5 @@
+.container {
+ display: flex;
+ flex-direction: column;
+ gap: 6.4rem;
+}
\ No newline at end of file