diff --git a/src/Components/AppSettings/index.jsx b/src/Components/AppSettings/index.jsx
index d20e736a7..5e4c6b0ba 100644
--- a/src/Components/AppSettings/index.jsx
+++ b/src/Components/AppSettings/index.jsx
@@ -4,6 +4,7 @@ import React from 'react';
 
 import Divider from '@mui/material/Divider';
 import FormControl from '@mui/material/FormControl';
+import Stack from '@mui/material/Stack';
 
 import Checkbox from '../Input/Checkbox';
 import Overlay from '../Overlay';
@@ -61,7 +62,9 @@ function AppSettings({
           component="fieldset"
           variant="standard"
         >
-          {settingElements}
+          <Stack spacing={1}>
+            {settingElements}
+          </Stack>
         </FormControl>
       </Overlay>
     </div>
diff --git a/src/Components/FirmwareSelector/__tests__/index.test.jsx b/src/Components/FirmwareSelector/__tests__/index.test.jsx
index 6a1d76cb0..c831d1b04 100644
--- a/src/Components/FirmwareSelector/__tests__/index.test.jsx
+++ b/src/Components/FirmwareSelector/__tests__/index.test.jsx
@@ -39,18 +39,16 @@ describe('FirmwareSelector', () => {
       />
     );
 
-    expect(screen.getByText(/forceFlashText/i)).toBeInTheDocument();
-    expect(screen.getByText(/forceFlashHint/i)).toBeInTheDocument();
-    expect(screen.getByText(/migrateFlashText/i)).toBeInTheDocument();
-    expect(screen.getByText(/migrateFlashHint/i)).toBeInTheDocument();
-    expect(screen.getByText(/forceFlashText/i)).toBeInTheDocument();
+    expect(screen.getByText('forceFlashText')).toBeInTheDocument();
+    expect(screen.getByText('migrateFlashText')).toBeInTheDocument();
+    expect(screen.getByText('forceFlashText')).toBeInTheDocument();
 
-    expect(screen.getByText("escButtonSelect")).toBeInTheDocument();
-    expect(screen.getByText(/escButtonSelectLocally/i)).toBeInTheDocument();
-    expect(screen.getByText(/buttonCancel/i)).toBeInTheDocument();
+    expect(screen.getByText('escButtonSelect')).toBeInTheDocument();
+    expect(screen.getByText('escButtonSelectLocally')).toBeInTheDocument();
+    expect(screen.getByText('buttonCancel')).toBeInTheDocument();
 
-    expect(screen.getByText(/selectFirmware/i)).toBeInTheDocument();
-    expect(screen.getByText(/selectTarget/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'selectFirmware selectFirmware' })).toBeInTheDocument();
+    expect(screen.getByText('selectTarget')).toBeInTheDocument();
   });
 
   it('should allow changing firmware options for BLHeli_S', async() => {
@@ -89,9 +87,7 @@ describe('FirmwareSelector', () => {
     );
 
     expect(screen.getByText(/forceFlashText/i)).toBeInTheDocument();
-    expect(screen.getByText(/forceFlashHint/i)).toBeInTheDocument();
     expect(screen.getByText(/migrateFlashText/i)).toBeInTheDocument();
-    expect(screen.getByText(/migrateFlashHint/i)).toBeInTheDocument();
     expect(screen.getByText(/forceFlashText/i)).toBeInTheDocument();
 
     expect(screen.getByText("escButtonSelect")).toBeInTheDocument();
@@ -101,59 +97,29 @@ describe('FirmwareSelector', () => {
     expect(screen.getByText(/selectFirmware/i)).toBeInTheDocument();
     expect(screen.getByText(/selectTarget/i)).toBeInTheDocument();
 
-    fireEvent.change(screen.getByRole(/combobox/i, { name: 'Firmware' }), {
-      target: {
-        value: 'BLHeli_S',
-        name: 'Firmware',
-      },
-    });
-
-    fireEvent.change(screen.getByRole(/combobox/i, { name: 'ESC' }), {
-      target: {
-        value: '#S_H_50#',
-        name: 'ESC',
-      },
-    });
-
-    fireEvent.change(screen.getByRole(/combobox/i, { name: 'Version' }), {
-      target: {
-        value: '16.7 [Official]',
-        name: 'Version',
-      },
-    });
-
-    const checkboxes = screen.getAllByRole(/checkbox/i);
-    for(let i = 0; i < checkboxes.length; i += 1) {
-      userEvent.click(checkboxes[i]);
-    }
+    // Firmware selection
+    fireEvent.mouseDown(screen.getByRole('button', { name: 'selectFirmware BLHeli_S' }));
+
+    let element = screen.getByRole('option', { name: 'Bluejay' });
+    userEvent.click(element);
+
+    // Layout selection
+    fireEvent.mouseDown(screen.getByRole('button', { name: 'selectEsc S-H-90' }));
+
+    element = screen.getByRole('option', { 'name': 'S-H-50' });
+    userEvent.click(element);
+
+    // Version selection
+    fireEvent.mouseDown(screen.getByRole('button', { name: 'selectVersion selectVersion' }));
+
+    element = screen.getByRole('option', { 'name': '0.15 (Test)' });
+    userEvent.click(element);
+
+    // PWM selection
+    fireEvent.mouseDown(screen.getByRole('button', { name: 'selectPwmFrequency selectPwmFrequency' }));
 
-    fireEvent.change(screen.getByRole(/combobox/i, { name: 'Firmware' }), {
-      target: {
-        value: 'Bluejay',
-        name: 'Firmware',
-      },
-    });
-
-    fireEvent.change(screen.getByRole(/combobox/i, { name: 'ESC' }), {
-      target: {
-        value: '#S_H_50#',
-        name: 'ESC',
-      },
-    });
-
-    fireEvent.change(screen.getByRole(/combobox/i, { name: 'Version' }), {
-      target: {
-        value: 'https://github.com/mathiasvr/bluejay/releases/download/v0.10/{0}_v0.10.hex',
-        name: 'Version',
-      },
-    });
-
-    fireEvent.change(screen.getByRole(/combobox/i, { name: 'PWM Frequency' }), {
-      target: {
-        value: '96',
-        name: 'PWM Frequency',
-      },
-    });
+    element = screen.getByRole('option', { 'name': '96' });
+    userEvent.click(element);
 
     userEvent.click(screen.getByText('escButtonSelect'));
     expect(onSubmit).toHaveBeenCalled();
@@ -202,26 +168,72 @@ describe('FirmwareSelector', () => {
     );
 
     expect(screen.getByText(/forceFlashText/i)).toBeInTheDocument();
-    expect(screen.getByText(/forceFlashHint/i)).toBeInTheDocument();
     expect(screen.getByText(/migrateFlashText/i)).toBeInTheDocument();
-    expect(screen.getByText(/migrateFlashHint/i)).toBeInTheDocument();
     expect(screen.getByText(/forceFlashText/i)).toBeInTheDocument();
 
-    expect(screen.getByText("escButtonSelect")).toBeInTheDocument();
-    expect(screen.getByText(/escButtonSelectLocally/i)).toBeInTheDocument();
-    expect(screen.getByText(/buttonCancel/i)).toBeInTheDocument();
+    expect(screen.getByText('escButtonSelect')).toBeInTheDocument();
+    expect(screen.getByText('escButtonSelectLocally')).toBeInTheDocument();
+    expect(screen.getByText('buttonCancel')).toBeInTheDocument();
 
-    expect(screen.getByText(/selectFirmware/i)).toBeInTheDocument();
-    expect(screen.getByText(/selectTarget/i)).toBeInTheDocument();
+    expect(screen.getByText('selectFirmware')).toBeInTheDocument();
+    expect(screen.getByText('selectTarget')).toBeInTheDocument();
 
-    fireEvent.change(screen.getByRole(/combobox/i, { name: 'Version' }), {
-      target: {
-        value: 'https://github.com/AlkaMotors/AM32-MultiRotor-ESC-firmware/releases/download/v1.65/{0}_1.65.hex',
-        name: 'Version',
-      },
-    });
+    fireEvent.mouseDown(screen.getByRole('button', { 'name': 'selectVersion selectVersion' }));
+
+    const element = screen.getByRole('option', { 'name': '1.78' });
+    userEvent.click(element);
 
     userEvent.click(screen.getByText('escButtonSelect'));
     expect(onSubmit).toHaveBeenCalled();
   });
+
+  it('should show warning when forcing target', async() => {
+    const configs = {
+      versions: {},
+      escs: {},
+      pwm: {},
+    };
+
+    const onSubmit = jest.fn();
+    const onLocalSubmit = jest.fn();
+    const onCancel = jest.fn();
+
+    render(
+      <FirmwareSelector
+        configs={configs}
+        onCancel={onCancel}
+        onLocalSubmit={onLocalSubmit}
+        onSubmit={onSubmit}
+      />
+    );
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'forceFlashText' }));
+
+    expect(screen.getByText(/forceFlashHint/i)).toBeInTheDocument();
+  });
+
+  it('should show warning when forcing migration', async() => {
+    const configs = {
+      versions: {},
+      escs: {},
+      pwm: {},
+    };
+
+    const onSubmit = jest.fn();
+    const onLocalSubmit = jest.fn();
+    const onCancel = jest.fn();
+
+    render(
+      <FirmwareSelector
+        configs={configs}
+        onCancel={onCancel}
+        onLocalSubmit={onLocalSubmit}
+        onSubmit={onSubmit}
+      />
+    );
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'migrateFlashText' }));
+
+    expect(screen.getByText(/migrateFlashHint/i)).toBeInTheDocument();
+  });
 });
diff --git a/src/Components/FirmwareSelector/index.jsx b/src/Components/FirmwareSelector/index.jsx
index 90755b780..171749e83 100644
--- a/src/Components/FirmwareSelector/index.jsx
+++ b/src/Components/FirmwareSelector/index.jsx
@@ -4,6 +4,11 @@ import React, {
   useState, useEffect, useRef,
 } from 'react';
 
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+
+import Checkbox from '../Input/Checkbox';
+
 import {
   isValidLayout,
   getSupportedSources,
@@ -162,13 +167,12 @@ function FirmwareSelector({
   }
 
   function handleVersionChange(e) {
-    const selected = e.target.options.selectedIndex;
-    const selecteOption = e.target.options[selected];
+    const selected = e.target.value;
 
     setSelection({
       ...selection,
       url: e.target.value,
-      version: selecteOption ? selecteOption.text : 'N/A',
+      version: selected ? selected : 'N/A',
     });
   }
 
@@ -209,45 +213,27 @@ function FirmwareSelector({
   return (
     <div id="firmware-selector">
       <div className="center-wrapper">
-        <div className="checkbox force">
-          <label>
-            <input
-              defaultChecked={force}
-              onChange={handleForceChange}
-              type="checkbox"
-            />
-
-            <span>
-              <span>
-                {t('forceFlashText')}
-              </span>
-
-              <span className={force ? "red" : "hidden"}>
-                {t('forceFlashHint')}
-              </span>
-            </span>
-          </label>
-        </div>
-
-        <div className="checkbox migrate">
-          <label>
-            <input
-              defaultChecked={migrate}
-              onChange={handleMigrateChange}
-              type="checkbox"
-            />
-
-            <span>
-              <span>
-                {t('migrateFlashText')}
-              </span>
+        <Stack spacing={1}>
+          <Checkbox
+            hint={force ? t('forceFlashHint') : null}
+            key='force'
+            label={t('forceFlashText')}
+            name='force'
+            onChange={handleForceChange}
+            type="checkbox"
+            value={force ? 1 : 0}
+          />
 
-              <span className={migrate ? "red" : "hidden"}>
-                {t('migrateFlashHint')}
-              </span>
-            </span>
-          </label>
-        </div>
+          <Checkbox
+            hint={migrate ? t('migrateFlashHint') : null}
+            key='migrate'
+            label={t('migrateFlashText')}
+            name='migrate'
+            onChange={handleMigrateChange}
+            type="checkbox"
+            value={migrate ? 1 : 0}
+          />
+        </Stack>
 
         <div className="note">
           <p
@@ -270,52 +256,79 @@ function FirmwareSelector({
           </div>
 
           <div className="spacer-box">
-            <LabeledSelect
-              firstLabel={t('selectFirmware')}
-              label="Firmware"
-              onChange={handleFirmwareChange}
-              options={options.firmwares}
-              selected={selection.firmware}
-            />
-
-            {selection.firmware &&
-              <>
-                <LabeledSelect
-                  firstLabel={t('selectEsc')}
-                  label="ESC"
-                  onChange={handleEscChange}
-                  options={options.escs}
-                  selected={escLayout}
-                />
-
-                {/*
-                {type === blheliTypes.SILABS || type === blheliTypes.ATMEL &&
-                  <LabeledSelect
-                    firstLabel={t('selectMode')}
-                    label="Mode"
-                    onChange={updateMode}
-                    options={options.modes}
-                    selected={mode}
-                  />}
-                */}
-
+            <Grid
+              container
+              spacing={1}
+            >
+              <Grid
+                item
+                xs={6}
+              >
                 <LabeledSelect
-                  firstLabel={t('selectVersion')}
-                  label="Version"
-                  onChange={handleVersionChange}
-                  options={options.versions}
-                  selected={selection.url}
+                  firstLabel={t('selectFirmware')}
+                  label={t('selectFirmware')}
+                  onChange={handleFirmwareChange}
+                  options={options.firmwares}
+                  selected={selection.firmware}
                 />
-
-                {options.frequencies.length > 0 &&
-                  <LabeledSelect
-                    firstLabel={t('selectPwmFrequency')}
-                    label="PWM Frequency"
-                    onChange={handlePwmChange}
-                    options={options.frequencies}
-                    selected={selection.pwm}
-                  />}
-              </>}
+              </Grid>
+
+              {selection.firmware &&
+                <>
+                  <Grid
+                    item
+                    xs={6}
+                  >
+                    <LabeledSelect
+                      firstLabel={t('selectEsc')}
+                      label={t('selectEsc')}
+                      onChange={handleEscChange}
+                      options={options.escs}
+                      selected={escLayout}
+                    />
+                  </Grid>
+
+                  {/*
+                  {type === blheliTypes.SILABS || type === blheliTypes.ATMEL &&
+                    <LabeledSelect
+                      firstLabel={t('selectMode')}
+                      label="Mode"
+                      onChange={updateMode}
+                      options={options.modes}
+                      selected={mode}
+                    />}
+                  */}
+
+                  <Grid
+                    item
+                    xs={6}
+                  >
+                    <LabeledSelect
+                      firstLabel={t('selectVersion')}
+                      label={t('selectVersion')}
+                      onChange={handleVersionChange}
+                      options={options.versions}
+                      selected={selection.url}
+                    />
+                  </Grid>
+
+                  {options.frequencies.length > 0 &&
+                    <Grid
+                      item
+                      xs={6}
+                    >
+                      <LabeledSelect
+                        firstLabel={t('selectPwmFrequency')}
+                        label={t('selectPwmFrequency')}
+                        onChange={handlePwmChange}
+                        options={options.frequencies}
+                        selected={selection.pwm}
+                      />
+                    </Grid>}
+                </>}
+            </Grid>
+
+            <br />
 
             <div className="default-btn">
               <button
diff --git a/src/Components/FirmwareSelector/style.scss b/src/Components/FirmwareSelector/style.scss
index 9697b956a..2940aeb34 100644
--- a/src/Components/FirmwareSelector/style.scss
+++ b/src/Components/FirmwareSelector/style.scss
@@ -1,7 +1,4 @@
 #content .tab #firmware-selector {
-  .checkbox label {
-    flex: 1;
-  }
 
   .note {
     margin-bottom: 7px;
@@ -9,18 +6,6 @@
 }
 
 #firmware-selector {
-  .checkbox {
-    float: none;
-    width: auto;
-    margin-left: 0px;
-    margin-bottom: 20px;
-    margin-top: 0;
-    padding-bottom: 0px;
-
-    span:last-child {
-      margin-left: 5px;
-    }
-  }
 
   .center-wrapper {
     width: 50%;
@@ -31,7 +16,7 @@
     }
   }
 
-  .red {
+  .checkbox p {
     color: red;
   }
 
diff --git a/src/Components/Input/LabeledSelect/index.jsx b/src/Components/Input/LabeledSelect/index.jsx
index 401cbea88..bee0a2495 100644
--- a/src/Components/Input/LabeledSelect/index.jsx
+++ b/src/Components/Input/LabeledSelect/index.jsx
@@ -1,6 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import MuiSelect from '@mui/material/Select';
+
 function LabeledSelect({
   label,
   firstLabel,
@@ -10,45 +15,51 @@ function LabeledSelect({
 }) {
   function Select() {
     const optionElements = options.map((item) => (
-      <option
+      <MenuItem
         disabled={item.disabled}
         key={item.key}
         value={item.value}
       >
         {item.name}
-      </option>
+      </MenuItem>
     ));
 
     return (
-      <select
+      <MuiSelect
+        id={`${label}-select`}
+        label={label}
+        labelId={`${label}-select-label`}
         name={label || firstLabel}
         onChange={onChange}
+        size="small"
         value={selected || -1}
       >
-        <option
+        <MenuItem
           className="hidden"
           disabled
           value={-1}
         >
           {firstLabel}
-        </option>
+        </MenuItem>
 
         {optionElements}
-      </select>
+      </MuiSelect>
     );
   }
 
   return (
     <div className="select">
-      <label>
-        <div className="input-wrapper">
-          <Select />
-        </div>
+      <FormControl
+        fullWidth
+        variant="standard"
+      >
 
-        <span className="info-wrapper-wrapper">
+        <InputLabel id={`${label}-select-label`}>
           {label}
-        </span>
-      </label>
+        </InputLabel>
+
+        <Select />
+      </FormControl>
     </div>
   );
 }
diff --git a/src/Components/Input/Select/index.jsx b/src/Components/Input/Select/index.jsx
index e856ea33e..cec225162 100644
--- a/src/Components/Input/Select/index.jsx
+++ b/src/Components/Input/Select/index.jsx
@@ -54,7 +54,7 @@ function Select({
   }
 
   return (
-    <div className="select">
+    <div className="selectx">
       <FormControl
         fullWidth
         variant="standard"
diff --git a/src/Components/MainContent/__tests__/index.test.jsx b/src/Components/MainContent/__tests__/index.test.jsx
index 37fbcc806..2ae6165d9 100644
--- a/src/Components/MainContent/__tests__/index.test.jsx
+++ b/src/Components/MainContent/__tests__/index.test.jsx
@@ -203,18 +203,16 @@ describe('MainContent', () => {
       />
     );
 
-    expect(screen.getByText(/forceFlashText/i)).toBeInTheDocument();
-    expect(screen.getByText(/forceFlashHint/i)).toBeInTheDocument();
-    expect(screen.getByText(/migrateFlashText/i)).toBeInTheDocument();
-    expect(screen.getByText(/migrateFlashHint/i)).toBeInTheDocument();
-    expect(screen.getByText(/forceFlashText/i)).toBeInTheDocument();
+    expect(screen.getByText('forceFlashText')).toBeInTheDocument();
+    expect(screen.getByText('migrateFlashText')).toBeInTheDocument();
+    expect(screen.getByText('forceFlashText')).toBeInTheDocument();
 
-    expect(screen.getByText("escButtonSelect")).toBeInTheDocument();
-    expect(screen.getByText(/escButtonSelectLocally/i)).toBeInTheDocument();
-    expect(screen.getByText(/buttonCancel/i)).toBeInTheDocument();
+    expect(screen.getByText('escButtonSelect')).toBeInTheDocument();
+    expect(screen.getByText('escButtonSelectLocally')).toBeInTheDocument();
+    expect(screen.getByText('buttonCancel')).toBeInTheDocument();
 
-    expect(screen.getByText(/selectFirmware/i)).toBeInTheDocument();
-    expect(screen.getByText(/selectTarget/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'selectFirmware selectFirmware' })).toBeInTheDocument();
+    expect(screen.getByText('selectTarget')).toBeInTheDocument();
   });
 
   it('should display when flashing', () => {
@@ -736,9 +734,7 @@ describe('MainContent', () => {
     );
 
     expect(screen.getByText(/forceFlashText/i)).toBeInTheDocument();
-    expect(screen.getByText(/forceFlashHint/i)).toBeInTheDocument();
     expect(screen.getByText(/migrateFlashText/i)).toBeInTheDocument();
-    expect(screen.getByText(/migrateFlashHint/i)).toBeInTheDocument();
     expect(screen.getByText(/forceFlashText/i)).toBeInTheDocument();
   });
 
diff --git a/src/Components/MelodyEditor/__tests__/index.test.jsx b/src/Components/MelodyEditor/__tests__/index.test.jsx
index 77d679367..551c5a7ba 100644
--- a/src/Components/MelodyEditor/__tests__/index.test.jsx
+++ b/src/Components/MelodyEditor/__tests__/index.test.jsx
@@ -245,12 +245,12 @@ describe('MelodyEditor', () => {
       />
     );
 
-    fireEvent.change(screen.getByRole('combobox'), {
-      target: {
-        name: "",
-        value: "preset-Bluejay Default",
-      },
-    });
+    fireEvent.mouseDown(screen.getByText('melodyPresetsLabel'));
+
+    const listbox = screen.getByRole('listbox');
+    const element = listbox.querySelector('li[data-value="preset-Bluejay Default"]');
+    userEvent.click(element);
+
     expect(screen.queryAllByText(/bluejay:b=570,o=4,d=32/i).length).toEqual(2);
   });
 
@@ -273,12 +273,12 @@ describe('MelodyEditor', () => {
       />
     );
 
-    fireEvent.change(screen.getByRole('combobox'), {
-      target: {
-        name: "",
-        value: "Simpsons Theme",
-      },
-    });
+    fireEvent.mouseDown(screen.getByText('melodyPresetsLabel'));
+
+    const listbox = screen.getByRole('listbox');
+    const element = listbox.querySelector(`li[data-value="Simpsons Theme"]`);
+    userEvent.click(element);
+
     expect(screen.queryAllByText(/simpsons:d=4,o=5,b=160:c.6,e6,f#6,8a6/i).length).toEqual(2);
   });
 
@@ -286,7 +286,7 @@ describe('MelodyEditor', () => {
     const onDelete = jest.fn();
     const melodies = [melody, melody, melody, melody];
 
-    render(
+    const { container } = render(
       <MelodyEditor
         customMelodies={defaultMelodies}
         defaultMelodies={defaultMelodies}
@@ -302,12 +302,11 @@ describe('MelodyEditor', () => {
       />
     );
 
-    fireEvent.change(screen.getByRole('combobox'), {
-      target: {
-        name: "",
-        value: "Simpsons Theme",
-      },
-    });
+    fireEvent.mouseDown(screen.getByText('melodyPresetsLabel'));
+
+    const listbox = screen.getByRole('listbox');
+    const element = listbox.querySelector(`li[data-value="Simpsons Theme"]`);
+    userEvent.click(element);
 
     userEvent.click(screen.getByText(/melodyDelete/i));
     expect(onDelete).toHaveBeenCalled();
diff --git a/src/Components/MelodyEditor/index.jsx b/src/Components/MelodyEditor/index.jsx
index 0f2b0a740..5ca6f154c 100644
--- a/src/Components/MelodyEditor/index.jsx
+++ b/src/Components/MelodyEditor/index.jsx
@@ -7,6 +7,8 @@ import React, {
 import { useTranslation } from 'react-i18next';
 import './style.scss';
 
+import Stack from '@mui/material/Stack';
+
 import Checkbox from '../Input/Checkbox';
 import LabeledSelect from '../Input/LabeledSelect';
 import MelodyElement from './MelodyElement';
@@ -336,31 +338,35 @@ function MelodyEditor({
       open={open}
     >
       <div id="melody-editor">
-        <div className="line-wrapper">
-          <div className="sync-wrapper">
-            <Checkbox
-              disabled={isAnyPlaying || writing}
-              hint={t("common:syncMelodiesHint")}
-              label={t("common:syncMelodies")}
-              name="syncMelodies"
-              onChange={toggleSync}
-              value={sync ? 1 : 0}
+        <Stack spacing={1}>
+          <div className="line-wrapper">
+            <div className="sync-wrapper">
+              <Checkbox
+                disabled={isAnyPlaying || writing}
+                hint={t("common:syncMelodiesHint")}
+                label={t("common:syncMelodies")}
+                name="syncMelodies"
+                onChange={toggleSync}
+                value={sync ? 1 : 0}
+              />
+            </div>
+          </div>
+
+          <div className="line-wrapper">
+            <PresetSelect
+              customMelodies={customMelodies}
+              defaultMelodies={defaultMelodies}
+              escs={melodies.length}
+              onDelete={onDelete}
+              onUpdateMelodies={handleMelodiesSelected}
+              selected={selectedMelody.current}
             />
           </div>
 
-          <PresetSelect
-            customMelodies={customMelodies}
-            defaultMelodies={defaultMelodies}
-            escs={melodies.length}
-            onDelete={onDelete}
-            onUpdateMelodies={handleMelodiesSelected}
-            selected={selectedMelody.current}
+          <SaveMelody
+            onSave={handleMelodiesSave}
           />
-        </div>
-
-        <SaveMelody
-          onSave={handleMelodiesSave}
-        />
+        </Stack>
 
         <div className={`melody-editor-escs ${sync ? 'all' : 'single'}`}>
           {!sync && melodyElements}
diff --git a/src/Components/MelodyEditor/style.scss b/src/Components/MelodyEditor/style.scss
index e54963afd..143236eb8 100644
--- a/src/Components/MelodyEditor/style.scss
+++ b/src/Components/MelodyEditor/style.scss
@@ -11,7 +11,6 @@
   }
 
   .line-wrapper {
-    margin-top: 20px;
     display: flex;
     flex-direction: row;
 
@@ -84,12 +83,6 @@
     }
   }
 
-  .sync-wrapper {
-    .checkbox {
-      display: flex;
-    }
-  }
-
   .melody-editor-escs {
     display: flex;
     flex-wrap: wrap;
diff --git a/src/translations/de/common.json b/src/translations/de/common.json
index 2492613f6..7eae092bd 100644
--- a/src/translations/de/common.json
+++ b/src/translations/de/common.json
@@ -57,9 +57,9 @@
   "cookieText": "Diese Website oder Tools von Drittanbietern, die von dieser Website verwendet werden, verwenden Cookies für den Betrieb. Durch deine Zustimmung erklärst du dich mit der Verwendung von Cookies einverstanden.",
   "resetDefaults": "Standardeinstellungen wiederherstellen",
   "forceFlashText": "Falsches MCU Layout ignorieren?",
-  "forceFlashHint": "(Ungeeignete Firmware könnte deinen ESC beschädigen. Auf eigene Verantwortung fortfahren.)",
+  "forceFlashHint": "Ungeeignete Firmware könnte deinen ESC beschädigen. Auf eigene Verantwortung fortfahren.",
   "migrateFlashText": "Einstellungen zwischen unterschiedlichen Firmwares migrieren?",
-  "migrateFlashHint": "(Hiermit wird versucht, Einstellungen zwischen unterschiedlichen Firmwares zu migrieren, wie zum Beispiel von BLHeli_S auf Bluejay)",
+  "migrateFlashHint": "Hiermit wird versucht, Einstellungen zwischen unterschiedlichen Firmwares zu migrieren, wie zum Beispiel von BLHeli_S auf Bluejay",
   "migrationNote": "<b>Hinweis:</b> Beachte, dass Einstellungen nicht zwischen unterschiedlichen Firmwares migriert werden. Stelle sicher, dass du diverse Einstellungen wie zum Beispiel die Drehrichtung der Motoren notiert hast. Bei verschiedenen Versionen derselben Firmware werden die Einstellungen übernommen.",
   "escDirectionReversed": "Richtung umgekehrt",
   "escBidirectionalMode": "Bidirektionaler Modus",
diff --git a/src/translations/en/common.json b/src/translations/en/common.json
index 009447228..fe9798616 100644
--- a/src/translations/en/common.json
+++ b/src/translations/en/common.json
@@ -57,9 +57,9 @@
   "cookieText": "This site or third-party tools used by this site make use of cookies necessary for the operation and useful for the purposes outlined in the cookie policy. By accepting, you consent to the use of cookies.",
   "resetDefaults": "Restore Default Settings",
   "forceFlashText": "Ignore inappropriate MCU and Layout?",
-  "forceFlashHint": "(Flashing inappropriate firmware may damage your ESC, do so at your own risk)",
+  "forceFlashHint": "Flashing inappropriate firmware may damage your ESC, do so at your own risk",
   "migrateFlashText": "Migrate settings between different firmwares?",
-  "migrateFlashHint": "(This will attempt to migrate settings between different firmwares like for example from BLHeli_S to Bluejay)",
+  "migrateFlashHint": "This will attempt to migrate settings between different firmwares like for example from BLHeli_S to Bluejay",
   "migrationNote": "<b>Note:</b> Be aware that settings are not migrated between different firmwares, make sure to take note of your motor directions and other settings you might want to move over. Settings will be migrated between different versions of the same firmware.",
   "escDirectionReversed": "Direction Reversed",
   "escBidirectionalMode": "Bidirectional Mode",
diff --git a/src/translations/es/common.json b/src/translations/es/common.json
index 9a513134d..de8a55c12 100644
--- a/src/translations/es/common.json
+++ b/src/translations/es/common.json
@@ -57,9 +57,9 @@
   "cookieText": "Este sitio o herramientas de terceros utilizadas por este sitio hacen necesarias el uso de cookies para el funcionamiento y útiles para los propósitos descritos en la política de cookies. Al aceptar, usted consiente el uso de cookies.",
   "resetDefaults": "Restaurar Configuración Predeterminada",
   "forceFlashText": "¿Ignorar MCU y Layout inapropiado?",
-  "forceFlashHint": "(Flashear un firmware inapropiado puede dañar tu ESC, hazlo bajo tu propio riesgo)",
+  "forceFlashHint": "Flashear un firmware inapropiado puede dañar tu ESC, hazlo bajo tu propio riesgo",
   "migrateFlashText": "¿Migrar ajustes entre diferentes firmwares?",
-  "migrateFlashHint": "(Esto intentará migrar la configuración entre diferentes firmwares como por ejemplo de BLHeli_S a Bluejay)",
+  "migrateFlashHint": "Esto intentará migrar la configuración entre diferentes firmwares como por ejemplo de BLHeli_S a Bluejay",
   "migrationNote": "<b>Nota:</b> Tenga en cuenta que los ajustes no se migran entre diferentes firmwares, asegúrese de tener en cuenta las direcciones de su motor y otras configuraciones que podría querer mover. Los ajustes se migrarán entre diferentes versiones del mismo firmware.",
   "escDirectionReversed": "Dirección Invertida",
   "escBidirectionalMode": "Modo Bidireccional",
diff --git a/src/translations/zh-CN/common.json b/src/translations/zh-CN/common.json
index 346448394..528484fea 100644
--- a/src/translations/zh-CN/common.json
+++ b/src/translations/zh-CN/common.json
@@ -57,9 +57,9 @@
   "cookieText": "此站点或此站点使用的第三方工具使用操作所需的 cookie 和 cookie 策略中所概述的有用性。 接受即表示同意使用 cookie。",
   "resetDefaults": "恢复默认设置",
   "forceFlashText": "忽略不匹配的 MCU 和布局？",
-  "forceFlashHint": "(烧录不匹配的固件可能会损坏您的 ESC，请自行承担风险)",
+  "forceFlashHint": "烧录不匹配的固件可能会损坏您的 ESC，请自行承担风险",
   "migrateFlashText": "在不同的固件之间迁移设置？",
-  "migrateFlashHint": "(这将尝试在不同固件之间迁移设置，例如从 BLHeli_S 迁移到 Bluejay)",
+  "migrateFlashHint": "这将尝试在不同固件之间迁移设置，例如从 BLHeli_S 迁移到 Bluejay",
   "migrationNote": "<b>注意：</b> 设置不能在不同的固件之间进行迁移， 请务必注意您的电机转向和其他您可能想要改动的设置。 设置可以在同一固件的不同版本之间迁移。",
   "escDirectionReversed": "反转方向",
   "escBidirectionalMode": "双向模式",
diff --git a/src/translations/zh-TW/common.json b/src/translations/zh-TW/common.json
index 2f9b3d8f8..52e4510f7 100644
--- a/src/translations/zh-TW/common.json
+++ b/src/translations/zh-TW/common.json
@@ -57,9 +57,9 @@
   "cookieText": "此站點或此站點是以哦那個的第三方工具使用操作所需的 cookie 和cookie 策略中所概述的有用性。接受即表示同意使用 cookie。",
   "resetDefaults": "恢復默認設定",
   "forceFlashText": "忽略不匹配的 MCU 和佈局？",
-  "forceFlashHint": "(燒錄不匹配的固件可能會損壞您的 ESC，請自行承擔風險)",
+  "forceFlashHint": "燒錄不匹配的固件可能會損壞您的 ESC，請自行承擔風險",
   "migrateFlashText": "在不同的固件之間遷移設定？",
-  "migrateFlashHint": "(這將嘗試在不同固件之間遷移設定，例如從 BLHeli_S 遷移到 Bluejay)",
+  "migrateFlashHint": "這將嘗試在不同固件之間遷移設定，例如從 BLHeli_S 遷移到 Bluejay",
   "migrationNote": "<b>注意：</b> 設定不能再不同的固件進行遷移，請務必注意您的電機轉向和其他您可能想要改動的設定。設定可以在同意固件的不同版本之間遷移。",
   "escDirectionReversed": "反轉方向",
   "escBidirectionalMode": "雙向模式",