diff --git a/package.json b/package.json
index 4d8b6a362..29478476c 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,6 @@
     "react-gtm-module": "^2.0.11",
     "react-highlight-within-textarea": "^1.0.1",
     "react-i18next": "^11.8.8",
-    "react-input-range": "^1.3.0",
     "react-scripts": "4.0.3",
     "react-toastify": "^7.0.3",
     "scheduler": "0.14.0",
diff --git a/src/Components/App/style.scss b/src/Components/App/style.scss
index 20aded676..8505d7d1b 100644
--- a/src/Components/App/style.scss
+++ b/src/Components/App/style.scss
@@ -13,7 +13,6 @@ body {
   background-color: lightgray;
   margin: 0px;
   padding: 0px;
-  width: 100%;
   overflow-x: hidden;
 }
 
diff --git a/src/Components/AppSettings/index.jsx b/src/Components/AppSettings/index.jsx
index 5e4c6b0ba..8b60dc032 100644
--- a/src/Components/AppSettings/index.jsx
+++ b/src/Components/AppSettings/index.jsx
@@ -33,18 +33,14 @@ function AppSettings({
     switch(setting.type) {
       case 'boolean': {
         return (
-          <>
-            <Checkbox
-              hint={t(`${key}Hint`)}
-              key={key}
-              label={t(key)}
-              name={key}
-              onChange={handleCheckboxChange}
-              value={setting.value ? 1 : 0}
-            />
-
-            <Divider />
-          </>
+          <Checkbox
+            hint={t(`${key}Hint`)}
+            key={key}
+            label={t(key)}
+            name={key}
+            onChange={handleCheckboxChange}
+            value={setting.value ? 1 : 0}
+          />
         );
       }
     }
@@ -59,10 +55,12 @@ function AppSettings({
         open={open}
       >
         <FormControl
-          component="fieldset"
+          fullWidth
           variant="standard"
         >
-          <Stack spacing={1}>
+          <Stack
+            spacing={2}
+          >
             {settingElements}
           </Stack>
         </FormControl>
diff --git a/src/Components/FirmwareSelector/index.jsx b/src/Components/FirmwareSelector/index.jsx
index 171749e83..de7496b62 100644
--- a/src/Components/FirmwareSelector/index.jsx
+++ b/src/Components/FirmwareSelector/index.jsx
@@ -215,7 +215,7 @@ function FirmwareSelector({
       <div className="center-wrapper">
         <Stack spacing={1}>
           <Checkbox
-            hint={force ? t('forceFlashHint') : null}
+            help={force ? t('forceFlashHint') : null}
             key='force'
             label={t('forceFlashText')}
             name='force'
@@ -225,7 +225,7 @@ function FirmwareSelector({
           />
 
           <Checkbox
-            hint={migrate ? t('migrateFlashHint') : null}
+            help={migrate ? t('migrateFlashHint') : null}
             key='migrate'
             label={t('migrateFlashText')}
             name='migrate'
diff --git a/src/Components/Flash/CommonSettings/index.jsx b/src/Components/Flash/CommonSettings/index.jsx
index 8f2007126..1603f0fee 100644
--- a/src/Components/Flash/CommonSettings/index.jsx
+++ b/src/Components/Flash/CommonSettings/index.jsx
@@ -5,8 +5,11 @@ import React, {
   useState,
 } from 'react';
 
+import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
+import Grid from '@mui/material/Grid';
 import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 
 import {
   getMasterSettings,
@@ -159,73 +162,53 @@ function CommonSettings({
     switch (setting.type) {
       case 'bool': {
         return (
-          <>
-            <Checkbox
-              disabled={disabled}
-              hint={hint}
-              inSync={inSync}
-              key={setting.name}
-              label={t(setting.label)}
-              name={setting.name}
-              onChange={handleCheckboxChange}
-              value={value}
+          <Grid container>
+            <Grid
+              item
+              xs={6}
             />
 
-            <Divider />
-          </>
+            <Grid
+              className="inset"
+              item
+              xs={6}
+            >
+              <Checkbox
+                disabled={disabled}
+                hint={hint}
+                inSync={inSync}
+                key={setting.name}
+                label={t(setting.label)}
+                name={setting.name}
+                onChange={handleCheckboxChange}
+                value={value}
+              />
+            </Grid>
+          </Grid>
         );
       }
 
       case 'enum': {
         const { options } = setting;
         return (
-          <>
-            <Select
-              disabled={disabled}
-              hint={hint}
-              inSync={inSync}
-              key={setting.name}
-              label={t(setting.label)}
-              name={setting.name}
-              onChange={handleSelectChange}
-              options={options}
-              value={value}
-            />
-
-            <Divider />
-          </>
+          <Select
+            disabled={disabled}
+            hint={hint}
+            inSync={inSync}
+            key={setting.name}
+            label={t(setting.label)}
+            name={setting.name}
+            onChange={handleSelectChange}
+            options={options}
+            value={value}
+          />
         );
       }
 
       case 'number': {
         if(directInput) {
           return (
-            <>
-              <Number
-                disabled={disabled}
-                factor={setting.displayFactor}
-                hint={hint}
-                inSync={inSync}
-                key={setting.name}
-                label={t(setting.label)}
-                max={setting.max}
-                min={setting.min}
-                name={setting.name}
-                offset={setting.displayOffset}
-                onChange={handleNumberChange}
-                round={false}
-                step={setting.step}
-                value={value}
-              />
-
-              <Divider />
-            </>
-          );
-        }
-
-        return (
-          <>
-            <Slider
+            <Number
               disabled={disabled}
               factor={setting.displayFactor}
               hint={hint}
@@ -241,9 +224,26 @@ function CommonSettings({
               step={setting.step}
               value={value}
             />
+          );
+        }
 
-            <Divider />
-          </>
+        return (
+          <Slider
+            disabled={disabled}
+            factor={setting.displayFactor}
+            hint={hint}
+            inSync={inSync}
+            key={setting.name}
+            label={t(setting.label)}
+            max={setting.max}
+            min={setting.min}
+            name={setting.name}
+            offset={setting.displayOffset}
+            onChange={handleNumberChange}
+            round={false}
+            step={setting.step}
+            value={value}
+          />
         );
       }
 
@@ -254,16 +254,18 @@ function CommonSettings({
   return (
     <div className="gui-box grey">
       <div className="gui-box-titlebar">
-        <div className="spacer-box-title">
+        <Typography className="spacer-box-title">
           {t('commonParameters')}
-        </div>
+        </Typography>
       </div>
 
-      <div className="spacer-box">
-        <Stack spacing={1}>
+      <Box sx={{ p: 2 }}>
+        <Stack
+          spacing={1}
+        >
           {settingElements}
         </Stack>
-      </div>
+      </Box>
     </div>
   );
 }
diff --git a/src/Components/Flash/CommonSettings/style.scss b/src/Components/Flash/CommonSettings/style.scss
index 64cde7038..886e6c05b 100644
--- a/src/Components/Flash/CommonSettings/style.scss
+++ b/src/Components/Flash/CommonSettings/style.scss
@@ -3,3 +3,7 @@
   color: red;
   font-weight: bold;
 }
+
+.inset > * {
+  margin-left: -1.25rem;
+}
diff --git a/src/Components/Flash/Escs/Esc/__tests__/index.test.jsx b/src/Components/Flash/Escs/Esc/__tests__/index.test.jsx
index f4e499a2b..48df6876c 100644
--- a/src/Components/Flash/Escs/Esc/__tests__/index.test.jsx
+++ b/src/Components/Flash/Escs/Esc/__tests__/index.test.jsx
@@ -516,7 +516,6 @@ describe('Esc', () => {
       />
     );
 
-    expect(screen.getByText(/hints:COMMON_MOTOR_DIRECTION/i)).toBeInTheDocument();
     expect(screen.getByText(/escMotorDirection/i)).toBeInTheDocument();
 
     userEvent.click(screen.getByRole(/checkbox/i));
diff --git a/src/Components/Flash/Escs/Esc/index.jsx b/src/Components/Flash/Escs/Esc/index.jsx
index 8e26716a7..858947a13 100644
--- a/src/Components/Flash/Escs/Esc/index.jsx
+++ b/src/Components/Flash/Escs/Esc/index.jsx
@@ -6,9 +6,13 @@ import React, {
   useState,
 } from 'react';
 
-import SettingsHandler from './SettingsHandler';
+import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
+import Grid from '@mui/material/Grid';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 
-import './style.scss';
+import SettingsHandler from './SettingsHandler';
 
 const Esc = forwardRef(({
   canFlash,
@@ -59,59 +63,75 @@ const Esc = forwardRef(({
   return (
     <div className="esc gui-box grey">
       <div className="gui-box-titlebar">
-        <div className="spacer-box-title">
+        <Typography className="spacer-box-title">
           {title}
-        </div>
+        </Typography>
       </div>
 
-      <div className="spacer-box">
-        {disableCommon && commonSettingsDescriptions &&
-          <SettingsHandler
-            descriptions={commonSettingsDescriptions.base}
-            directInput={directInput}
-            disabled={!canFlash}
-            onUpdate={updateCommonSettings}
-            settings={commonSettings}
-          />}
-
-        {descriptions &&
-          <SettingsHandler
-            descriptions={descriptions.base}
-            directInput={directInput}
-            disabled={!canFlash}
-            onUpdate={updateSettings}
-            settings={settings}
-          />}
-
-        <div className="half">
-          <div className="default-btn flash-btn">
-            <progress
-              className={progress > 0 ? 'progress' : 'hidden'}
-              max="100"
-              min="0"
-              value={progress}
-            />
-
-            <button
+      <Box sx={{ p: 2 }}>
+        <Stack
+          divider={<Divider />}
+          spacing={1}
+        >
+          {disableCommon && commonSettingsDescriptions &&
+            <SettingsHandler
+              descriptions={commonSettingsDescriptions.base}
+              directInput={directInput}
               disabled={!canFlash}
-              onClick={handleFirmwareFlash}
-              type="button"
+              onUpdate={updateCommonSettings}
+              settings={commonSettings}
+            />}
+
+          {descriptions &&
+            <SettingsHandler
+              descriptions={descriptions.base}
+              directInput={directInput}
+              disabled={!canFlash}
+              onUpdate={updateSettings}
+              settings={settings}
+            />}
+
+          <Stack>
+            <Grid
+              container
+              spacing={2}
             >
-              {t('escButtonFlash')}
-            </button>
-
-            {enableAdvanced &&
-              <button
-                className="firmware-dump"
-                disabled={!canFlash}
-                onClick={handleFirmwareDump}
-                type="button"
+              <Grid
+                item
+                lg={12}
+                xs={6}
               >
-                {t('escButtonFirmwareDump')}
-              </button>}
-          </div>
-        </div>
-      </div>
+                <div className="default-btn flash-btn">
+                  <progress
+                    className={progress > 0 ? 'progress' : 'hidden'}
+                    max="100"
+                    min="0"
+                    value={progress}
+                  />
+
+                  <button
+                    disabled={!canFlash}
+                    onClick={handleFirmwareFlash}
+                    type="button"
+                  >
+                    {t('escButtonFlash')}
+                  </button>
+
+                  {enableAdvanced &&
+                    <button
+                      className="firmware-dump"
+                      disabled={!canFlash}
+                      onClick={handleFirmwareDump}
+                      type="button"
+                    >
+                      {t('escButtonFirmwareDump')}
+                    </button>}
+                </div>
+              </Grid>
+            </Grid>
+          </Stack>
+        </Stack>
+      </Box>
     </div>
   );
 });
diff --git a/src/Components/Flash/Escs/Esc/style.scss b/src/Components/Flash/Escs/Esc/style.scss
deleted file mode 100644
index 998baa673..000000000
--- a/src/Components/Flash/Escs/Esc/style.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.esc {
-  progress {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border: 1px solid var(--color-tertiary);
-    border-radius: 5px;
-  }
-
-  progress::-webkit-progress-bar {
-    background: #fff;
-    border-radius: 5px;
-  }
-
-  progress::-webkit-progress-value {
-    background: var(--color-tertiary);
-  }
-
-  .firmware-dump {
-    margin-top: 7px;
-  }
-}
diff --git a/src/Components/Flash/Escs/index.jsx b/src/Components/Flash/Escs/index.jsx
index 1f821aa8a..aee9c27aa 100644
--- a/src/Components/Flash/Escs/index.jsx
+++ b/src/Components/Flash/Escs/index.jsx
@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import Grid from '@mui/material/Grid';
+
 import Esc from './Esc';
 
 function Escs({
@@ -16,25 +18,37 @@ function Escs({
 }) {
   function EscElements() {
     return escs.map((esc) => (
-      <Esc
-        canFlash={canFlash}
-        directInput={directInput}
-        disableCommon={disableCommon}
-        enableAdvanced={enableAdvanced}
-        esc={esc}
-        index={esc.index}
+      <Grid
+        item
         key={esc.index}
-        onCommonSettingsUpdate={onCommonSettingsUpdate}
-        onFirmwareDump={onFirmwareDump}
-        onFlash={onFlash}
-        onSettingsUpdate={onSettingsUpdate}
-        ref={esc.ref}
-      />
+        lg={6}
+        xs={12}
+      >
+        <Esc
+          canFlash={canFlash}
+          directInput={directInput}
+          disableCommon={disableCommon}
+          enableAdvanced={enableAdvanced}
+          esc={esc}
+          index={esc.index}
+          key={esc.index}
+          onCommonSettingsUpdate={onCommonSettingsUpdate}
+          onFirmwareDump={onFirmwareDump}
+          onFlash={onFlash}
+          onSettingsUpdate={onSettingsUpdate}
+          ref={esc.ref}
+        />
+      </Grid>
     ));
   }
 
   return (
-    <EscElements />
+    <Grid
+      container
+      spacing={2}
+    >
+      <EscElements />
+    </Grid>
   );
 }
 
diff --git a/src/Components/Flash/index.jsx b/src/Components/Flash/index.jsx
index 7d2d72680..73af02ec2 100644
--- a/src/Components/Flash/index.jsx
+++ b/src/Components/Flash/index.jsx
@@ -2,11 +2,12 @@ import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import Grid from '@mui/material/Grid';
+
 import CommonSettings from './CommonSettings';
 import CountWarning from './CountWarning';
 import Escs from './Escs';
-
-import './style.scss';
+import Warning from '../Warning';
 
 function Flash({
   availableSettings,
@@ -26,8 +27,15 @@ function Flash({
   const { t } = useTranslation('common');
 
   return (
-    <div className="flash">
-      <div className="flash__wrapper">
+    <Grid
+      container
+      spacing={2}
+    >
+      <Grid
+        item
+        md={5}
+        xs={12}
+      >
         <div className="flash__common">
           {escs.length > 0 && !disableCommon &&
             <CommonSettings
@@ -51,8 +59,18 @@ function Flash({
               </div>
             </div>}
         </div>
+      </Grid>
 
+      <Grid
+        item
+        md={7}
+        xs={12}
+      >
         <div className="flash__individual">
+          <Warning />
+
+          <br />
+
           <Escs
             canFlash={canFlash}
             directInput={directInput}
@@ -69,8 +87,8 @@ function Flash({
           {escCount !== escs.length &&
             <CountWarning />}
         </div>
-      </div>
-    </div>
+      </Grid>
+    </Grid>
   );
 }
 
diff --git a/src/Components/Flash/style.scss b/src/Components/Flash/style.scss
deleted file mode 100644
index 28a9ef21c..000000000
--- a/src/Components/Flash/style.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.flash {
-  .flash__wrapper {
-    display: flex;
-  }
-
-  .flash__common {
-    margin-right: 10px;
-    flex-basis: 0;
-    flex-grow: 1;
-  }
-
-  .flash__individual {
-    margin-left: 10px;
-    flex-basis: 0;
-    flex-grow: 1;
-  }
-
-  @media screen and (max-width: 768px) {
-    .flash__wrapper {
-      flex-direction: column;
-    }
-
-    .flash__common,
-    .flash__individual {
-      margin: 0px;
-    }
-  }
-}
diff --git a/src/Components/Input/Checkbox/index.jsx b/src/Components/Input/Checkbox/index.jsx
index fca89ba0d..ac7e5501b 100644
--- a/src/Components/Input/Checkbox/index.jsx
+++ b/src/Components/Input/Checkbox/index.jsx
@@ -4,6 +4,7 @@ import React from 'react';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormHelperText from '@mui/material/FormHelperText';
 import MuiCheckbox from '@mui/material/Checkbox';
+import Typography from '@mui/material/Typography';
 
 import Info from '../Info';
 
@@ -15,9 +16,11 @@ function Checkbox({
   onChange,
   inSync,
   hint,
+  help,
 }) {
   const formattedLabel = (
     <Info
+      hint={hint}
       inSync={inSync}
       label={label}
       name={name}
@@ -43,15 +46,17 @@ function Checkbox({
         label={formattedLabel}
       />
 
-      <FormHelperText>
-        {hint}
-      </FormHelperText>
+      { help &&
+        <FormHelperText>
+          {help}
+        </FormHelperText>}
     </div>
   );
 }
 
 Checkbox.defaultProps = {
   disabled: false,
+  help: null,
   hint: null,
   inSync: true,
   value: 0,
@@ -59,6 +64,7 @@ Checkbox.defaultProps = {
 
 Checkbox.propTypes = {
   disabled: PropTypes.bool,
+  help: PropTypes.string,
   hint: PropTypes.string,
   inSync: PropTypes.bool,
   label: PropTypes.string.isRequired,
diff --git a/src/Components/Input/Select/index.jsx b/src/Components/Input/Select/index.jsx
index cec225162..5c6e22507 100644
--- a/src/Components/Input/Select/index.jsx
+++ b/src/Components/Input/Select/index.jsx
@@ -2,14 +2,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import FormControl from '@mui/material/FormControl';
-import FormHelperText from '@mui/material/FormHelperText';
-import InputLabel from '@mui/material/InputLabel';
+import Grid from '@mui/material/Grid';
 import MenuItem from '@mui/material/MenuItem';
 import MuiSelect from '@mui/material/Select';
+import Typography from '@mui/material/Typography';
 
-//import Info from '../Info';
-
-//import './style.scss';
+import Info from '../Info';
 
 function Select({
   name,
@@ -54,22 +52,44 @@ function Select({
   }
 
   return (
-    <div className="selectx">
-      <FormControl
-        fullWidth
-        variant="standard"
+
+    <FormControl
+      fullWidth
+      variant="standard"
+    >
+      <Grid
+        alignItems="center"
+        container
+        spacing={2}
       >
-        <InputLabel id={`${name}-select-label`}>
-          {label}
-        </InputLabel>
+        <Grid
+          item
+          xs={6}
+        >
+          <FormControl
+            fullWidth
+            variant="standard"
+          >
+            <Select />
+          </FormControl>
+        </Grid>
 
-        <Select />
+        <Grid
+          item
+          xs={6}
+        >
+          <Typography id={`${name}-select-label`} >
+            {label}
 
-        <FormHelperText>
-          {hint}
-        </FormHelperText>
-      </FormControl>
-    </div>
+            <Info
+              hint={hint}
+              inSync={inSync}
+              name={name}
+            />
+          </Typography>
+        </Grid>
+      </Grid>
+    </FormControl>
   );
 }
 
diff --git a/src/Components/Input/Select/style.scss b/src/Components/Input/Select/style.scss
deleted file mode 100644
index 7865d0494..000000000
--- a/src/Components/Input/Select/style.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.select {
-   margin-bottom: 5px;
-   width: 100%;
-
-   select {
-     flex: 0 0 198px;
-   }
-
-  &:last-child {
-    border-bottom: none;
-    padding-bottom: 0px;
-    margin-bottom: 0px;
-  }
-}
diff --git a/src/Components/Input/Slider/index.jsx b/src/Components/Input/Slider/index.jsx
index 03ec78ee8..7048a4bbe 100644
--- a/src/Components/Input/Slider/index.jsx
+++ b/src/Components/Input/Slider/index.jsx
@@ -3,14 +3,15 @@ import React, {
   useState,
   useEffect,
 } from 'react';
-import InputRange from 'react-input-range';
 
+import FormControl from '@mui/material/FormControl';
+import Grid from '@mui/material/Grid';
 import MuiSlider from '@mui/material/Slider';
+import Typography from '@mui/material/Typography';
 
 import Info from '../Info';
 
-import 'react-input-range/lib/css/index.css';
-import './style.scss';
+//import './style.scss';
 
 function Slider({
   name,
@@ -44,21 +45,18 @@ function Slider({
   };
 
   /* istanbul ignore next */
-  function updateValue(value) {
-    value = Math.floor((value - offset) / factor);
-    setCurrentValue(value);
+  function updateValue(e) {
+    const newValue = e.target.value;
+    const newValueScaled = Math.floor((newValue - offset) / factor);
+
+    if(currentValue !== newValueScaled) {
+      setCurrentValue(newValueScaled);
+    }
   }
 
-  // Makes no sense to test, component has its own test, we just assume that
-  // the slider actually slides.
   /* istanbul ignore next */
-  function handleUpdate(value) {
-    value = Math.floor((value - offset) / factor);
-
-    // Timout needed for individual settings
-    setTimeout(() => {
-      onChange(name, value);
-    }, 100);
+  function handleUpdate() {
+    onChange(name, currentValue);
   }
 
   function format(value) {
@@ -66,35 +64,52 @@ function Slider({
   }
 
   return (
-    <div className="number">
-      <label>
-        <div className="input-wrapper">
-          {/*
-          <InputRange
+    <FormControl
+      fullWidth
+      variant="standard"
+    >
+      <Grid
+        alignItems="center"
+        container
+        spacing={2}
+      >
+        <Grid
+          item
+          xs={6}
+        >
+          <MuiSlider
+            aria-label='xxx'
+            aria-labelledby={`${name}-select-label`}
             disabled={disabled}
             formatLabel={format}
             labelSuffix={suffix}
-            maxValue={max}
-            minValue={min}
+            max={max}
+            min={min}
             name={name}
             onChange={updateValue}
-            onChangeComplete={handleUpdate}
+            onChangeCommitted={handleUpdate}
             step={step}
             value={inSync ? getDisplayValue() : min}
+            valueLabelDisplay="auto"
           />
-          */}
-
-          <MuiSlider />
-        </div>
-
-        <Info
-          hint={hint}
-          inSync={inSync}
-          label={label}
-          name={name}
-        />
-      </label>
-    </div>
+        </Grid>
+
+        <Grid
+          item
+          xs={6}
+        >
+          <Typography id={`${name}-select-label`}>
+            {label}
+
+            <Info
+              hint={hint}
+              inSync={inSync}
+              name={name}
+            />
+          </Typography>
+        </Grid>
+      </Grid>
+    </FormControl>
   );
 }
 
diff --git a/src/Components/Input/Slider/style.scss b/src/Components/Input/Slider/style.scss
index 6b89bf6ff..cda33fc95 100644
--- a/src/Components/Input/Slider/style.scss
+++ b/src/Components/Input/Slider/style.scss
@@ -1,32 +1,3 @@
-.input-range {
-  padding-left: 3px;
-  height: 20px;
-  line-height: 20px;
-  text-align: left;
-  margin: 0 14px 0 0;
-  font-size: 12px;
-  font-weight: normal;
-  display: inline-block;
-}
-
-.input-range__label--min,
-.input-range__label--max {
-    display: none;
-}
-
-.input-range__label--value {
-    margin-left: 1rem;
-}
-
-.input-range__slider {
-  background: var(--color-primary);
-  border: 1px solid var(--color-primary);
-}
-
-.input-range__track--active {
-  background: var(--color-primary);
-}
-
 .number {
   &:first-child {
     margin-top: 10px;
diff --git a/src/Components/MainContent/__tests__/index.test.jsx b/src/Components/MainContent/__tests__/index.test.jsx
index 2ae6165d9..bcf0696b2 100644
--- a/src/Components/MainContent/__tests__/index.test.jsx
+++ b/src/Components/MainContent/__tests__/index.test.jsx
@@ -344,10 +344,8 @@ describe('MainContent', () => {
       />
     );
 
-    expect(screen.getByText(/notePropsOff/i)).toBeInTheDocument();
-    expect(screen.getByText(/noteConnectPower/i)).toBeInTheDocument();
-    expect(screen.getByText("escButtonSaveLog")).toBeInTheDocument();
-    expect(screen.getByText(/escButtonFlashAll/i)).toBeInTheDocument();
+    expect(screen.getByText('escButtonSaveLog')).toBeInTheDocument();
+    expect(screen.getByText('escButtonFlashAll')).toBeInTheDocument();
   });
 
   it('should display when reading with ESC', () => {
@@ -477,10 +475,8 @@ describe('MainContent', () => {
       />
     );
 
-    expect(screen.getByText(/notePropsOff/i)).toBeInTheDocument();
-    expect(screen.getByText(/noteConnectPower/i)).toBeInTheDocument();
-    expect(screen.getByText("escButtonSaveLog")).toBeInTheDocument();
-    expect(screen.getByText(/escButtonFlashAll/i)).toBeInTheDocument();
+    expect(screen.getByText('escButtonSaveLog')).toBeInTheDocument();
+    expect(screen.getByText('escButtonFlashAll')).toBeInTheDocument();
   });
 
   it('should display when writing with ESC', () => {
diff --git a/src/Components/MainContent/index.jsx b/src/Components/MainContent/index.jsx
index b1f4a197c..e3671e1aa 100644
--- a/src/Components/MainContent/index.jsx
+++ b/src/Components/MainContent/index.jsx
@@ -11,22 +11,6 @@ import MotorControl from '../../Components/MotorControl';
 
 import './style.scss';
 
-function WarningWrapper() {
-  const { t } = useTranslation('common');
-
-  return (
-    <div className="note">
-      <p>
-        <span dangerouslySetInnerHTML={{ __html: t('notePropsOff') }} />
-
-        <br />
-
-        <span dangerouslySetInnerHTML={{ __html: t('noteConnectPower') }} />
-      </p>
-    </div>
-  );
-}
-
 function MainContent({
   appSettings,
   open,
@@ -157,8 +141,6 @@ function MainContent({
       <div id="content">
         <div className="tab toolbar_fixed_bottom">
           <div className="content_wrapper">
-            <WarningWrapper />
-
             <FlashWrapper />
 
             <MotorControlWrapper />
diff --git a/src/Components/MainContent/style.scss b/src/Components/MainContent/style.scss
index cf819ee33..6f150c09e 100644
--- a/src/Components/MainContent/style.scss
+++ b/src/Components/MainContent/style.scss
@@ -10,22 +10,6 @@
   -webkit-transform: rotateX(0deg); /* DO NOT REMOVE! this fixes the UI freezing bug on MAC OS X */
   transition: all 0.3s;
 
-  .note {
-    margin-bottom: 20px;
-    background-color: #fff7cd;
-    border: 1px solid #ffe55f;
-    margin-top: 5px;
-    margin-bottom: 25px;
-    border-radius: 3px;
-    font-size: 11px;
-    font-family: 'open_sansregular', Arial;
-    padding: 5px 7px 5px 7px;
-
-    @media screen and (max-width: 768px) {
-      margin-bottom: 18px;
-    }
-  }
-
   .note.alert {
     background-color: #bc544b;
     border: 1px solid #ff0000;
@@ -62,7 +46,6 @@
     }
 
     .gui-box {
-      margin-bottom: 10px;
       font-weight: bold;
       font-family: 'open_sanssemibold', Arial;
       background-color: #FFFFFF;
diff --git a/src/Components/MotorControl/index.jsx b/src/Components/MotorControl/index.jsx
index 07f135491..5340a8ecb 100644
--- a/src/Components/MotorControl/index.jsx
+++ b/src/Components/MotorControl/index.jsx
@@ -1,23 +1,18 @@
-import Slider, { createSliderWithTooltip } from 'rc-slider';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import React, {
   useState,
   useMemo,
 } from 'react';
-import 'rc-slider/assets/index.css';
 
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import MuiSlider from '@mui/material/Slider';
 import Typography from '@mui/material/Typography';
 
-import Checkbox from '../Input/Checkbox';
 import { useInterval } from '../../utils/helpers/React';
-
-import './style.scss';
-
-const SliderWithTooltip = createSliderWithTooltip(Slider);
+import Checkbox from '../Input/Checkbox';
+import Warning from '../Warning';
 
 function BatteryState({ getBatteryState }) {
   const { t } = useTranslation('common');
@@ -189,67 +184,86 @@ function MotorControl({
   ), [unlock]);
 
   return (
-    <div id="motor-control-wrapper">
-      <div className="gui-box grey">
-        <div className="gui-box-titlebar">
-          <Typography className="spacer-box-title">
-            {t('motorControl')}
-          </Typography>
-        </div>
-
-        <Box
-          sx={{ p: 2 }}
-        >
-          <Typography paragraph>
-            {t('motorControlText-1')}
-          </Typography>
-
-          <Typography paragraph>
-            {t('motorControlText-2')}
-          </Typography>
-
-          <Typography paragraph>
-            {t('motorControlText-3')}
-          </Typography>
-
-          <div className="line-wrapper">
-            <Checkbox
-              label={t('enableMotorControl')}
-              name="enable-motor-control"
-              onChange={toggleUnlock}
-              value={unlock ? 1 : 0}
-            />
-
-            <BatteryState
-              getBatteryState={getBatteryState}
-            />
+    <Grid
+      container
+      spacing={2}
+    >
+      <Grid
+        item
+        md={5}
+        xs={12}
+      >
+        <div className="gui-box grey">
+          <div className="gui-box-titlebar">
+            <Typography className="spacer-box-title">
+              {t('motorControl')}
+            </Typography>
           </div>
 
-          <Grid
-            container
-            spacing={3}
+          <Box
+            sx={{ p: 2 }}
           >
-            <Grid
-              item
-              xs={6}
-            >
-              {singleSliderElements}
-            </Grid>
+            <Typography paragraph>
+              {t('motorControlText-1')}
+            </Typography>
+
+            <Typography paragraph>
+              {t('motorControlText-2')}
+            </Typography>
+
+            <Typography paragraph>
+              {t('motorControlText-3')}
+            </Typography>
+
+            <div className="line-wrapper">
+              <Checkbox
+                label={t('enableMotorControl')}
+                name="enable-motor-control"
+                onChange={toggleUnlock}
+                value={unlock ? 1 : 0}
+              />
+
+              <BatteryState
+                getBatteryState={getBatteryState}
+              />
+            </div>
+
+            <br />
 
             <Grid
-              item
-              xs={6}
+              container
+              spacing={3}
             >
-              <Typography>
-                {t('masterSpeed')}
-              </Typography>
-
-              {memoizedMasterSlider}
+              <Grid
+                item
+                xs={6}
+              >
+                {singleSliderElements}
+              </Grid>
+
+              <Grid
+                item
+                xs={6}
+              >
+                <Typography>
+                  {t('masterSpeed')}
+                </Typography>
+
+                {memoizedMasterSlider}
+              </Grid>
             </Grid>
-          </Grid>
-        </Box>
-      </div>
-    </div>
+          </Box>
+        </div>
+      </Grid>
+
+      <Grid
+        item
+        md={7}
+        xs={12}
+      >
+        <Warning />
+      </Grid>
+    </Grid>
   );
 }
 MotorControl.defaultProps = {
diff --git a/src/Components/MotorControl/style.scss b/src/Components/MotorControl/style.scss
deleted file mode 100644
index 173a30db2..000000000
--- a/src/Components/MotorControl/style.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-#motor-control-wrapper {
-  max-width: 600px;
-  width: 100%;
-
-  .gui-box {
-
-    .line-wrapper {
-      display: flex;
-      align-items: center;
-      margin-bottom: 3px;
-
-      &>* {
-        flex: 1;
-        padding: 0px;
-        margin-bottom: 7px;
-      }
-
-      .battery-state {
-        font-weight: bold;
-
-        &.danger {
-          font-weight: bold;
-          color: red;
-        }
-      }
-    }
-  }
-
-  .rc-slider {
-    margin-left: 8px;
-    height: 30px;
-  }
-
-  .rc-slider-tooltip {
-    .rc-slider-tooltip-content {
-      margin-bottom: -15px;
-    }
-
-    .rc-slider-tooltip-arrow {
-      display: none;
-    }
-    .rc-slider-tooltip-inner {
-      background-color: transparent;
-      color: black;
-      font-weight: normal;
-      box-shadow: none;
-    }
-  }
-
-  .rc-slider-track {
-    background: var(--color-primary);
-  }
-
-  .rc-slider-handle {
-    margin-top: -7px;
-    width: 19px;
-    height: 19px;
-    border: 0px;
-    background: var(--color-primary);
-  }
-
-  .rc-slider-disabled {
-    background: transparent;
-
-    .rc-slider-handle {
-      background: #cccccc;
-    }
-  }
-
-  .checkbox label {
-    flex: 0 0 10px !important;
-  }
-
-  #slider-wrapper {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    #single-slider,
-    #master-slider {
-      flex: 1;
-      margin-right: 30px;
-    }
-
-    .slider,
-    #master-slider {
-      h3 {
-        padding-bottom: 20px;
-      }
-
-      .input-range {
-        float: none;
-        margin-left: 8px;
-      }
-    }
-
-    @media only screen and (max-width: 600px) {
-      flex-direction: column-reverse;
-      align-items: flex-start;
-
-      #single-slider,
-      #master-slider {
-        width: 90%;
-      }
-
-      .slider {
-        h3 {
-          padding-top: 10px;
-        }
-      }
-    }
-  }
-}
diff --git a/src/Components/Warning/index.jsx b/src/Components/Warning/index.jsx
new file mode 100644
index 000000000..3fbfbc24e
--- /dev/null
+++ b/src/Components/Warning/index.jsx
@@ -0,0 +1,23 @@
+import { useTranslation } from 'react-i18next';
+import React from 'react';
+
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+
+function Warning() {
+  const { t } = useTranslation('common');
+
+  return (
+    <Alert severity="warning">
+      <AlertTitle>
+        {t('noteTitle')}
+      </AlertTitle>
+
+      <p dangerouslySetInnerHTML={{ __html: t('notePropsOff') }} />
+
+      <p dangerouslySetInnerHTML={{ __html: t('noteConnectPower') }} />
+    </Alert>
+  );
+}
+
+export default Warning;
diff --git a/src/translations/en/common.json b/src/translations/en/common.json
index 3de8d848a..1701551d0 100644
--- a/src/translations/en/common.json
+++ b/src/translations/en/common.json
@@ -6,8 +6,9 @@
   "serialPermission": "Select Serial Port",
   "showLog": "Show Log",
   "hideLog": "Hide Log",
-  "notePropsOff": "<strong>Note:</strong> Make sure you've taken the propellers <strong>OFF</strong> before doing anything on this tab.",
-  "noteConnectPower": "<strong>Note:</strong> Connect power to the ESCs.",
+  "noteTitle": "Warning",
+  "notePropsOff": "Make sure you've taken the propellers <strong>OFF</strong> before continuing.",
+  "noteConnectPower": "It might be necessary to connect power to the ESCs.",
   "commonParameters": "Common Parameters",
   "unsupportedFirmware": "Unsupported Firmware",
   "commonSettingsDisabled": "Common settings disabled",
diff --git a/yarn.lock b/yarn.lock
index d05870819..009acb14b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2774,11 +2774,6 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-autobind-decorator@^1.3.4:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/autobind-decorator/-/autobind-decorator-1.4.3.tgz#4c96ffa77b10622ede24f110f5dbbf56691417d1"
-  integrity sha1-TJb/p3sQYi7eJPEQ9du/VmkUF9E=
-
 autoprefixer@^9.6.1:
   version "9.8.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
@@ -9434,15 +9429,6 @@ prompts@2.4.0, prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.8, prop-types@^15.7.2:
-  version "15.7.2"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
-  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
-  dependencies:
-    loose-envify "^1.4.0"
-    object-assign "^4.1.1"
-    react-is "^16.8.1"
-
 prop-types@^15.6.2:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
@@ -9452,6 +9438,15 @@ prop-types@^15.6.2:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
+prop-types@^15.7.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
 proxy-addr@~2.0.5:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf"
@@ -9763,14 +9758,6 @@ react-i18next@^11.8.8:
     "@babel/runtime" "^7.13.6"
     html-parse-stringify2 "^2.0.1"
 
-react-input-range@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/react-input-range/-/react-input-range-1.3.0.tgz#f96d001631ab817417f1e26d8f9f9684b4827f59"
-  integrity sha1-+W0AFjGrgXQX8eJtj5+WhLSCf1k=
-  dependencies:
-    autobind-decorator "^1.3.4"
-    prop-types "^15.5.8"
-
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"