diff --git a/interface/src/components/SectionContent.js b/interface/src/components/SectionContent.js
index 2bce92a..18bdf96 100644
--- a/interface/src/components/SectionContent.js
+++ b/interface/src/components/SectionContent.js
@@ -16,7 +16,7 @@ function SectionContent(props) {
   const { children, classes, title } = props;
   return (
       <Paper className={classes.content}>
-        <Typography variant="display1">
+        <Typography variant="h4">
           {title}
         </Typography>
         {children}
diff --git a/interface/src/containers/APStatus.js b/interface/src/containers/APStatus.js
index c66c359..fd935bc 100644
--- a/interface/src/containers/APStatus.js
+++ b/interface/src/containers/APStatus.js
@@ -107,7 +107,7 @@ class APStatus extends Component {
          !fetched ?
          <div>
            <LinearProgress className={classes.fetching}/>
-           <Typography variant="display1" className={classes.fetching}>
+           <Typography variant="h4" className={classes.fetching}>
              Loading...
            </Typography>
          </div>
@@ -115,7 +115,7 @@ class APStatus extends Component {
         data ? this.renderAPStatus(data, classes)
        :
         <div>
-          <Typography variant="display1" className={classes.fetching}>
+          <Typography variant="h4" className={classes.fetching}>
             {errorMessage}
           </Typography>
           <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
diff --git a/interface/src/containers/NTPStatus.js b/interface/src/containers/NTPStatus.js
index 3b7f687..6117c64 100644
--- a/interface/src/containers/NTPStatus.js
+++ b/interface/src/containers/NTPStatus.js
@@ -126,7 +126,7 @@ class NTPStatus extends Component {
          !fetched ?
          <div>
            <LinearProgress className={classes.fetching}/>
-           <Typography variant="display1" className={classes.fetching}>
+           <Typography variant="h4" className={classes.fetching}>
              Loading...
            </Typography>
          </div>
@@ -134,7 +134,7 @@ class NTPStatus extends Component {
         data ? this.renderNTPStatus(data, classes)
        :
         <div>
-          <Typography variant="display1" className={classes.fetching}>
+          <Typography variant="h4" className={classes.fetching}>
             {errorMessage}
           </Typography>
           <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
diff --git a/interface/src/containers/WiFiStatus.js b/interface/src/containers/WiFiStatus.js
index 7ab68b7..c779898 100644
--- a/interface/src/containers/WiFiStatus.js
+++ b/interface/src/containers/WiFiStatus.js
@@ -137,7 +137,7 @@ class WiFiStatus extends Component {
           !fetched ?
             <div>
               <LinearProgress className={classes.fetching} />
-              <Typography variant="display1" className={classes.fetching}>
+              <Typography variant="h4" className={classes.fetching}>
                 Loading...
            </Typography>
             </div>
@@ -145,7 +145,7 @@ class WiFiStatus extends Component {
             data ? this.renderWiFiStatus(data, classes)
               :
               <div>
-                <Typography variant="display1" className={classes.fetching}>
+                <Typography variant="h4" className={classes.fetching}>
                   {errorMessage}
                 </Typography>
                 <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
diff --git a/interface/src/forms/APSettingsForm.js b/interface/src/forms/APSettingsForm.js
index 4d2da4c..de9771a 100644
--- a/interface/src/forms/APSettingsForm.js
+++ b/interface/src/forms/APSettingsForm.js
@@ -45,7 +45,7 @@ class APSettingsForm extends React.Component {
 
          <div className={classes.loadingSettings}>
            <LinearProgress className={classes.loadingSettingsDetails}/>
-           <Typography variant="display1" className={classes.loadingSettingsDetails}>
+           <Typography variant="h4" className={classes.loadingSettingsDetails}>
              Loading...
            </Typography>
          </div>
@@ -99,7 +99,7 @@ class APSettingsForm extends React.Component {
         :
 
         <div className={classes.loadingSettings}>
-          <Typography variant="display1" className={classes.loadingSettingsDetails}>
+          <Typography variant="h4" className={classes.loadingSettingsDetails}>
             {errorMessage}
           </Typography>
           <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
diff --git a/interface/src/forms/NTPSettingsForm.js b/interface/src/forms/NTPSettingsForm.js
index 0d94857..32bc92c 100644
--- a/interface/src/forms/NTPSettingsForm.js
+++ b/interface/src/forms/NTPSettingsForm.js
@@ -43,7 +43,7 @@ class NTPSettingsForm extends React.Component {
 
          <div className={classes.loadingSettings}>
            <LinearProgress className={classes.loadingSettingsDetails}/>
-           <Typography variant="display1" className={classes.loadingSettingsDetails}>
+           <Typography variant="h4" className={classes.loadingSettingsDetails}>
              Loading...
            </Typography>
          </div>
@@ -87,7 +87,7 @@ class NTPSettingsForm extends React.Component {
         :
 
         <div className={classes.loadingSettings}>
-          <Typography variant="display1" className={classes.loadingSettingsDetails}>
+          <Typography variant="h4" className={classes.loadingSettingsDetails}>
             {errorMessage}
           </Typography>
           <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
diff --git a/interface/src/forms/OTASettingsForm.js b/interface/src/forms/OTASettingsForm.js
index 2f33a95..6381bc0 100644
--- a/interface/src/forms/OTASettingsForm.js
+++ b/interface/src/forms/OTASettingsForm.js
@@ -51,7 +51,7 @@ class OTASettingsForm extends React.Component {
 
          <div className={classes.loadingSettings}>
            <LinearProgress className={classes.loadingSettingsDetails}/>
-           <Typography variant="display1" className={classes.loadingSettingsDetails}>
+           <Typography variant="h4" className={classes.loadingSettingsDetails}>
              Loading...
            </Typography>
          </div>
@@ -107,7 +107,7 @@ class OTASettingsForm extends React.Component {
         :
 
         <div className={classes.loadingSettings}>
-          <Typography variant="display1" className={classes.loadingSettingsDetails}>
+          <Typography variant="h4" className={classes.loadingSettingsDetails}>
             {errorMessage}
           </Typography>
           <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
diff --git a/interface/src/forms/WiFiNetworkSelector.js b/interface/src/forms/WiFiNetworkSelector.js
index c2e385f..3a63232 100644
--- a/interface/src/forms/WiFiNetworkSelector.js
+++ b/interface/src/forms/WiFiNetworkSelector.js
@@ -69,7 +69,7 @@ class WiFiNetworkSelector extends Component {
           scanningForNetworks ?
           <div>
             <LinearProgress className={classes.scanningProgress}/>
-            <Typography variant="display1" className={classes.scanningProgress}>
+            <Typography variant="h4" className={classes.scanningProgress}>
               Scanning...
             </Typography>
           </div>
@@ -80,7 +80,7 @@ class WiFiNetworkSelector extends Component {
           </List>
           :
           <div>
-            <Typography variant="display1" className={classes.scanningProgress}>
+            <Typography variant="h4" className={classes.scanningProgress}>
               {errorMessage}
             </Typography>
           </div>
diff --git a/interface/src/forms/WiFiSettingsForm.js b/interface/src/forms/WiFiSettingsForm.js
index afe62ba..dbad740 100644
--- a/interface/src/forms/WiFiSettingsForm.js
+++ b/interface/src/forms/WiFiSettingsForm.js
@@ -88,7 +88,7 @@ class WiFiSettingsForm extends React.Component {
 
          <div className={classes.loadingSettings}>
            <LinearProgress className={classes.loadingSettingsDetails}/>
-           <Typography variant="display1" className={classes.loadingSettingsDetails}>
+           <Typography variant="h4" className={classes.loadingSettingsDetails}>
              Loading...
            </Typography>
          </div>
@@ -213,7 +213,7 @@ class WiFiSettingsForm extends React.Component {
         :
 
         <div className={classes.loadingSettings}>
-          <Typography variant="display1" className={classes.loadingSettingsDetails}>
+          <Typography variant="h4" className={classes.loadingSettingsDetails}>
             {errorMessage}
           </Typography>
           <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>