diff --git a/www/css/app.css b/www/css/app.css
index fbb0d0a3c..38d31b773 100644
--- a/www/css/app.css
+++ b/www/css/app.css
@@ -65,7 +65,7 @@
 }
 
 .form-control {
-    margin-top: 2px !important;
+    margin-top: 2px;
 }
 
 #articleList {
@@ -108,6 +108,8 @@
 #archiveList {
     width: 60%;
     min-width: auto;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
 }
 
 #rescanButtonAndText button {
@@ -243,6 +245,15 @@ iframe._invert, iframe._mwInvert {
     animation-duration: 0.1s;
 }
 
+.container {
+    margin-bottom: 1.5em;
+}
+
+.card {
+    margin-top: 1em;
+    margin-bottom: 1.5em;
+}
+
 /* Modify default Bootstrap 4 colours */
 .card-info {
     border-color: #bce8f1;
@@ -349,6 +360,7 @@ button {
     #archiveList {
         width: 100%;
         min-width: auto;
+        margin-bottom: 0.5em;
     }
     
 }
diff --git a/www/index.html b/www/index.html
index c80df97c2..205d8b66b 100644
--- a/www/index.html
+++ b/www/index.html
@@ -566,7 +566,6 @@ <h3 data-i18n="configure-display-settings-title">Display settings</h3>
                             </div>
                         </div>
                     </div>
-                    <br />
                     <div class="container">
                         <h3 data-i18n="configure-performance-settings-title">Performance settings</h3>
                         <div class="card card-warning" id="performanceSettingsDiv">
@@ -606,7 +605,6 @@ <h3 data-i18n="configure-performance-settings-title">Performance settings</h3>
                                         </div>
                                     </div>
                                 </div>
-                                <br />
                                 <div class="row">
                                     <div class="col-sm-4">
                                         <p data-i18n="configure-performance-searchrange-label">Select max number of search results:</p>
@@ -623,7 +621,6 @@ <h3 data-i18n="configure-performance-settings-title">Performance settings</h3>
                             </div>
                         </div>
                     </div>
-                    <br />
                     <div class="container">
                         <h3 data-i18n="configure-compatibility-settings-title">Compatibility settings</h3>
                         <div class="card card-warning" id="contentInjectionModeDiv">
@@ -653,7 +650,6 @@ <h3 data-i18n="configure-compatibility-settings-title">Compatibility settings</h
                                 </div>
                             </div>
                         </div>
-                        <br />
                         <div id="imgHandlingModeDiv">
                             <div class="card card-warning">
                                 <div data-i18n="configure-compatibility-images-title" class="card-header">Image handling</div>
@@ -671,7 +667,6 @@ <h3 data-i18n="configure-compatibility-settings-title">Compatibility settings</h
                             </div>
                         </div>
                     </div>
-                    <br />
                     <div class="container">
                         <h3 data-i18n="configure-expert-settings-title">Expert settings</h3>
                         <div class="card card-danger" id="expertSettingsDiv">
@@ -708,7 +703,6 @@ <h3 data-i18n="configure-expert-settings-title">Expert settings</h3>
                             </div>
                         </div>
                     </div>
-                    <br />
                     <div class="container">
                         <div class="card card-warning" id="apiStatusDiv">
                             <div data-i18n="configure-api-panel-header" class="card-header">API Status</div>