diff --git a/interface/src/framework/mqtt/MqttSettingsForm.tsx b/interface/src/framework/mqtt/MqttSettingsForm.tsx
index 00d4920c5..c74060e3d 100644
--- a/interface/src/framework/mqtt/MqttSettingsForm.tsx
+++ b/interface/src/framework/mqtt/MqttSettingsForm.tsx
@@ -57,7 +57,7 @@ const MqttSettingsForm: FC = () => {
           label={LL.ENABLE_MQTT()}
         />
         <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="host"
@@ -69,7 +69,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="port"
@@ -82,9 +82,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-        </Grid>
-        <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="base"
@@ -96,7 +94,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedTextField
               name="client_id"
               label={LL.ID_OF(LL.CLIENT()) + ' (' + LL.OPTIONAL() + ')'}
@@ -107,9 +105,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-        </Grid>
-        <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedTextField
               name="username"
               label={LL.USERNAME(0)}
@@ -120,7 +116,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedPasswordField
               name="password"
               label={LL.PASSWORD()}
@@ -131,9 +127,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-        </Grid>
-        <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="keep_alive"
@@ -149,7 +143,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedTextField
               name="mqtt_qos"
               label="QoS"
@@ -196,7 +190,7 @@ const MqttSettingsForm: FC = () => {
           label={LL.MQTT_RESPONSE()}
         />
         {!data.ha_enabled && (
-          <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
+          <Grid container rowSpacing={-1} spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
             <Grid item>
               <BlockFormControlLabel
                 control={<Checkbox name="publish_single" checked={data.publish_single} onChange={updateFormValue} />}
@@ -219,58 +213,55 @@ const MqttSettingsForm: FC = () => {
           <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
             <Grid item>
               <BlockFormControlLabel
-                sx={{ pb: 1 }}
                 control={<Checkbox name="ha_enabled" checked={data.ha_enabled} onChange={updateFormValue} />}
                 label={LL.MQTT_PUBLISH_TEXT_3()}
               />
             </Grid>
             {data.ha_enabled && (
-              <>
-                <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-                  <Grid item>
-                    <ValidatedTextField
-                      name="discovery_type"
-                      label={LL.MQTT_PUBLISH_TEXT_5()}
-                      value={data.discovery_type}
-                      fullWidth
-                      variant="outlined"
-                      onChange={updateFormValue}
-                      margin="normal"
-                      select
-                    >
-                      <MenuItem value={0}>Home Assistant</MenuItem>
-                      <MenuItem value={1}>Domoticz</MenuItem>
-                    </ValidatedTextField>
-                  </Grid>
-                  <Grid item>
-                    <ValidatedTextField
-                      name="discovery_prefix"
-                      label={LL.MQTT_PUBLISH_TEXT_4()}
-                      fullWidth
-                      variant="outlined"
-                      value={data.discovery_prefix}
-                      onChange={updateFormValue}
-                      margin="normal"
-                    />
-                  </Grid>
-                  <Grid item>
-                    <ValidatedTextField
-                      name="entity_format"
-                      label={LL.MQTT_ENTITY_FORMAT()}
-                      value={data.entity_format}
-                      fullWidth
-                      variant="outlined"
-                      onChange={updateFormValue}
-                      margin="normal"
-                      select
-                    >
-                      <MenuItem value={0}>{LL.MQTT_ENTITY_FORMAT_0()}</MenuItem>
-                      <MenuItem value={1}>{LL.MQTT_ENTITY_FORMAT_1()}</MenuItem>
-                      <MenuItem value={2}>{LL.MQTT_ENTITY_FORMAT_2()}</MenuItem>
-                    </ValidatedTextField>
-                  </Grid>
+              <Grid container sx={{ pl: 1 }} spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
+                <Grid item xs={12} sm={6} md={4}>
+                  <ValidatedTextField
+                    name="discovery_type"
+                    label={LL.MQTT_PUBLISH_TEXT_5()}
+                    value={data.discovery_type}
+                    fullWidth
+                    variant="outlined"
+                    onChange={updateFormValue}
+                    margin="normal"
+                    select
+                  >
+                    <MenuItem value={0}>Home Assistant</MenuItem>
+                    <MenuItem value={1}>Domoticz</MenuItem>
+                  </ValidatedTextField>
                 </Grid>
-              </>
+                <Grid item xs={12} sm={6} md={4}>
+                  <ValidatedTextField
+                    name="discovery_prefix"
+                    label={LL.MQTT_PUBLISH_TEXT_4()}
+                    fullWidth
+                    variant="outlined"
+                    value={data.discovery_prefix}
+                    onChange={updateFormValue}
+                    margin="normal"
+                  />
+                </Grid>
+                <Grid item xs={12} sm={6} md={4}>
+                  <ValidatedTextField
+                    name="entity_format"
+                    label={LL.MQTT_ENTITY_FORMAT()}
+                    value={data.entity_format}
+                    fullWidth
+                    variant="outlined"
+                    onChange={updateFormValue}
+                    margin="normal"
+                    select
+                  >
+                    <MenuItem value={0}>{LL.MQTT_ENTITY_FORMAT_0()}</MenuItem>
+                    <MenuItem value={1}>{LL.MQTT_ENTITY_FORMAT_1()}</MenuItem>
+                    <MenuItem value={2}>{LL.MQTT_ENTITY_FORMAT_2()}</MenuItem>
+                  </ValidatedTextField>
+                </Grid>
+              </Grid>
             )}
           </Grid>
         )}
@@ -278,7 +269,7 @@ const MqttSettingsForm: FC = () => {
           {LL.MQTT_PUBLISH_INTERVALS()}&nbsp;(0=auto)
         </Typography>
         <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-          <Grid item xs={6} sm={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="publish_time_heartbeat"
@@ -294,7 +285,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6} sm={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="publish_time_boiler"
@@ -310,7 +301,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6} sm={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="publish_time_thermostat"
@@ -326,7 +317,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6} sm={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="publish_time_solar"
@@ -342,7 +333,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6} sm={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="publish_time_mixer"
@@ -358,7 +349,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6} sm={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="publish_time_sensor"
@@ -374,7 +365,7 @@ const MqttSettingsForm: FC = () => {
               margin="normal"
             />
           </Grid>
-          <Grid item xs={6} sm={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <ValidatedTextField
               fieldErrors={fieldErrors}
               name="publish_time_other"
diff --git a/interface/src/project/SettingsApplication.tsx b/interface/src/project/SettingsApplication.tsx
index b62289a8f..ec21fd447 100644
--- a/interface/src/project/SettingsApplication.tsx
+++ b/interface/src/project/SettingsApplication.tsx
@@ -162,7 +162,7 @@ const SettingsApplication: FC = () => {
               justifyContent="flex-start"
               alignItems="flex-start"
             >
-              <Grid item xs={6} sm={4}>
+              <Grid item xs={12} sm={6} md={4}>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="rx_gpio"
@@ -176,7 +176,7 @@ const SettingsApplication: FC = () => {
                   disabled={saving}
                 />
               </Grid>
-              <Grid item xs={6} sm={4}>
+              <Grid item xs={12} sm={6} md={4}>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="tx_gpio"
@@ -190,7 +190,7 @@ const SettingsApplication: FC = () => {
                   disabled={saving}
                 />
               </Grid>
-              <Grid item xs={6} sm={4}>
+              <Grid item xs={12} sm={6} md={4}>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="pbutton_gpio"
@@ -204,7 +204,7 @@ const SettingsApplication: FC = () => {
                   disabled={saving}
                 />
               </Grid>
-              <Grid item xs={6} sm={4}>
+              <Grid item xs={12} sm={6} md={4}>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="dallas_gpio"
@@ -218,7 +218,7 @@ const SettingsApplication: FC = () => {
                   disabled={saving}
                 />
               </Grid>
-              <Grid item xs={6} sm={4}>
+              <Grid item xs={12} sm={6} md={4}>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="led_gpio"
@@ -232,7 +232,7 @@ const SettingsApplication: FC = () => {
                   disabled={saving}
                 />
               </Grid>
-              <Grid item xs={6} sm={4}>
+              <Grid item xs={12} sm={6} md={4}>
                 <ValidatedTextField
                   name="phy_type"
                   label={LL.PHY_TYPE()}
@@ -259,7 +259,7 @@ const SettingsApplication: FC = () => {
                 justifyContent="flex-start"
                 alignItems="flex-start"
               >
-                <Grid item xs={6} sm={4}>
+                <Grid item xs={12} sm={6} md={4}>
                   <ValidatedTextField
                     name="eth_power"
                     label={LL.GPIO_OF('PHY Power') + ' (-1=' + LL.DISABLED(1) + ')'}
@@ -272,7 +272,7 @@ const SettingsApplication: FC = () => {
                     disabled={saving}
                   />
                 </Grid>
-                <Grid item xs={6} sm={4}>
+                <Grid item xs={12} sm={6} md={4}>
                   <ValidatedTextField
                     name="eth_phy_addr"
                     label={LL.ADDRESS_OF('PHY I²C')}
@@ -285,7 +285,7 @@ const SettingsApplication: FC = () => {
                     disabled={saving}
                   />
                 </Grid>
-                <Grid item xs={6} sm={4}>
+                <Grid item xs={12} sm={6} md={4}>
                   <ValidatedTextField
                     name="eth_clock_mode"
                     label="PHY Clk"
@@ -311,7 +311,7 @@ const SettingsApplication: FC = () => {
           {LL.SETTINGS_OF(LL.EMS_BUS(0))}
         </Typography>
         <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedTextField
               name="tx_mode"
               label={LL.TX_MODE()}
@@ -329,7 +329,7 @@ const SettingsApplication: FC = () => {
               <MenuItem value={4}>{LL.HARDWARE()}</MenuItem>
             </ValidatedTextField>
           </Grid>
-          <Grid item xs={6}>
+          <Grid item xs={12} sm={6}>
             <ValidatedTextField
               name="ems_bus_id"
               label={LL.ID_OF(LL.EMS_BUS(1))}
@@ -358,20 +358,16 @@ const SettingsApplication: FC = () => {
         <Typography sx={{ pt: 2 }} variant="h6" color="primary">
           {LL.GENERAL_OPTIONS()}
         </Typography>
-        <Box
-          sx={{
-            '& .MuiTextField-root': { width: '25ch' }
-          }}
-        >
+        <Grid item>
           <ValidatedTextField
             name="locale"
             label={LL.LANGUAGE_ENTITIES()}
             disabled={saving}
             value={data.locale}
+            fullWidth
             variant="outlined"
             onChange={updateFormValue}
             margin="normal"
-            size="small"
             select
           >
             <MenuItem value="en">English (EN)</MenuItem>
@@ -384,7 +380,7 @@ const SettingsApplication: FC = () => {
             <MenuItem value="sv">Svenska (SV)</MenuItem>
             <MenuItem value="tr">Türk (TR)</MenuItem>
           </ValidatedTextField>
-        </Box>
+        </Grid>
         {data.led_gpio !== 0 && (
           <BlockFormControlLabel
             control={<Checkbox checked={data.hide_led} onChange={updateFormValue} name="hide_led" />}
@@ -429,14 +425,15 @@ const SettingsApplication: FC = () => {
             disabled={saving}
           />
           <BlockFormControlLabel
-            sx={{ pb: 2 }}
             control={<Checkbox checked={data.shower_alert} onChange={updateFormValue} name="shower_alert" />}
             label={LL.ENABLE_SHOWER_ALERT()}
             disabled={!data.shower_timer}
           />
+          </Grid>
+          <Grid container sx={{ pt: 2 }} rowSpacing={3} spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
           {data.shower_alert && (
             <>
-              <Grid item sx={{ pr: 1, pb: 2 }}>
+              <Grid item xs={12} sm={6}>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="shower_alert_trigger"
@@ -446,13 +443,13 @@ const SettingsApplication: FC = () => {
                   }}
                   variant="outlined"
                   value={numberValue(data.shower_alert_trigger)}
+                  fullWidth
                   type="number"
                   onChange={updateFormValue}
-                  size="small"
                   disabled={!data.shower_timer}
                 />
               </Grid>
-              <Grid item sx={{ pb: 3 }}>
+              <Grid item xs={12} sm={6}>
                 <ValidatedTextField
                   fieldErrors={fieldErrors}
                   name="shower_alert_coldshot"
@@ -462,20 +459,20 @@ const SettingsApplication: FC = () => {
                   }}
                   variant="outlined"
                   value={numberValue(data.shower_alert_coldshot)}
+                  fullWidth
                   type="number"
                   onChange={updateFormValue}
-                  size="small"
                   disabled={!data.shower_timer}
                 />
               </Grid>
             </>
           )}
         </Grid>
-        <Typography variant="h6" color="primary">
+        <Typography sx={{ pt: 3 }} variant="h6" color="primary">
           {LL.FORMATTING_OPTIONS()}
         </Typography>
         <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-          <Grid item xs={6} sm={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <ValidatedTextField
               name="bool_dashboard"
               label={LL.BOOLEAN_FORMAT_DASHBOARD()}
@@ -492,7 +489,7 @@ const SettingsApplication: FC = () => {
               <MenuItem value={5}>1/0</MenuItem>
             </ValidatedTextField>
           </Grid>
-          <Grid item xs={6} sm={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <ValidatedTextField
               name="bool_format"
               label={LL.BOOLEAN_FORMAT_API()}
@@ -511,7 +508,7 @@ const SettingsApplication: FC = () => {
               <MenuItem value={6}>1/0</MenuItem>
             </ValidatedTextField>
           </Grid>
-          <Grid item xs={6} sm={4}>
+          <Grid item xs={12} sm={6} md={4}>
             <ValidatedTextField
               name="enum_format"
               label={LL.ENUM_FORMAT()}
@@ -560,7 +557,7 @@ const SettingsApplication: FC = () => {
         />
         {data.syslog_enabled && (
           <Grid container spacing={1} direction="row" justifyContent="flex-start" alignItems="flex-start">
-            <Grid item xs={4}>
+            <Grid item xs={12} sm={6}>
               <ValidatedTextField
                 fieldErrors={fieldErrors}
                 name="syslog_host"
@@ -573,7 +570,7 @@ const SettingsApplication: FC = () => {
                 disabled={saving}
               />
             </Grid>
-            <Grid item xs={4}>
+            <Grid item xs={12} sm={6}>
               <ValidatedTextField
                 fieldErrors={fieldErrors}
                 name="syslog_port"
@@ -587,7 +584,7 @@ const SettingsApplication: FC = () => {
                 disabled={saving}
               />
             </Grid>
-            <Grid item xs={4}>
+            <Grid item xs={12} sm={6}>
               <ValidatedTextField
                 name="syslog_level"
                 label={LL.LOG_LEVEL()}
@@ -607,7 +604,7 @@ const SettingsApplication: FC = () => {
                 <MenuItem value={9}>ALL</MenuItem>
               </ValidatedTextField>
             </Grid>
-            <Grid item xs={4}>
+            <Grid item xs={12} sm={6}>
               <ValidatedTextField
                 fieldErrors={fieldErrors}
                 name="syslog_mark_interval"