diff --git a/dist/frontend.js b/dist/frontend.js
index 845a7f2..706b366 100644
--- a/dist/frontend.js
+++ b/dist/frontend.js
@@ -309,10 +309,13 @@ const ae=new WeakMap,re=v(e=>t=>{if(!(t instanceof P))throw new Error("unsafeHTM
     nav.main-scroll {
       max-height: calc(100vh - 279px);
     }
+    #index-heading {
+      background-color: aliceblue;
+    }
     `)}render(){return M`
     <section class="section no-top-padding">
       <div class="container">
-        <nav class="panel is-info">
+        <nav class="panel is-light">
           <p class="panel-heading">Load Web Archive</p>
           <div class="extra-padding panel-block file has-name">
             <form class="container" @submit="${this.onStartLoad}">
@@ -349,7 +352,7 @@ const ae=new WeakMap,re=v(e=>t=>{if(!(t instanceof P))throw new Error("unsafeHTM
     </section>
     <section class="container">
       <nav class="panel main-scroll">
-        <p class="panel-heading">Loaded Archives</p>
+        <p id="index-heading" class="panel-heading">Loaded Archives</p>
         <div class="coll-list">
         ${this.colls.length?this.colls.map((e,t)=>M`
           <div class="panel-block">
@@ -370,7 +373,7 @@ const ae=new WeakMap,re=v(e=>t=>{if(!(t instanceof P))throw new Error("unsafeHTM
           </div>
         `):M`
           <div class="panel-block extra-padding">
-            <i>No Archices so far! Archives loaded in the section above will appear here.</i>
+            <i>No Archives so far! Archives loaded in the section above will appear here.</i>
           </div>
         `}
         </div>
diff --git a/src/frontend.js b/src/frontend.js
index a2e6658..1cb3928 100644
--- a/src/frontend.js
+++ b/src/frontend.js
@@ -544,6 +544,9 @@ class WrIndex extends LitElement
     nav.main-scroll {
       max-height: calc(100vh - 279px);
     }
+    #index-heading {
+      background-color: aliceblue;
+    }
     `);
   }
 
@@ -551,7 +554,7 @@ class WrIndex extends LitElement
     return html`
     <section class="section no-top-padding">
       <div class="container">
-        <nav class="panel is-info">
+        <nav class="panel is-light">
           <p class="panel-heading">Load Web Archive</p>
           <div class="extra-padding panel-block file has-name">
             <form class="container" @submit="${this.onStartLoad}">
@@ -588,7 +591,7 @@ class WrIndex extends LitElement
     </section>
     <section class="container">
       <nav class="panel main-scroll">
-        <p class="panel-heading">Loaded Archives</p>
+        <p id="index-heading" class="panel-heading">Loaded Archives</p>
         <div class="coll-list">
         ${this.colls.length ? this.colls.map((coll, i) => html`
           <div class="panel-block">
@@ -609,7 +612,7 @@ class WrIndex extends LitElement
           </div>
         `) : html`
           <div class="panel-block extra-padding">
-            <i>No Archices so far! Archives loaded in the section above will appear here.</i>
+            <i>No Archives so far! Archives loaded in the section above will appear here.</i>
           </div>
         `}
         </div>