diff --git a/index.html b/index.html
index dd56593..342dc57 100644
--- a/index.html
+++ b/index.html
@@ -101,9 +101,10 @@ <h1><a href="https://aatishb.com/covidtrends">Covid Trends</a></h1>
       </main>
 
       <aside>
-
-        <div>
-          <h2>Customize</h2>
+        <div class="customizetopwrapper">
+          <h2 @click="scrollToCustomize">Customize</h2>
+        </div>
+        <div class="customize">
           <label for="selectedData">Select Parameter</label>
           <select id="selectedData" v-model="selectedData" @mousedown="pause">
             <option v-for="d in dataTypes" v-bind:value="d">
@@ -134,20 +135,26 @@ <h2>Customize</h2>
 
         </div>
 
+        <div class="separator"></div>
+
         <div class="countries">
 
-          <h2>{{regionType}}</h2>
+          <div class="countriestopwrapper">
 
-          <div class="search">
-            <input id="searchField" v-model="searchField" placeholder="Search For A Location" aria-label="Search For A Location">
-          </div>
+            <h2 @click="scrollToCountries">{{regionType}}</h2>
 
-          <div class="buttonwrapper">
-            <button @click="deselectAll" aria-Label="Deselect All Regions">Deselect All</button>
-            <button @click="selectAll" aria-Label="Select All Regions">Select All</button>
-          </div>
+            <div class="search">
+              <input id="searchField" v-model="searchField" placeholder="Search For A Location" aria-label="Search For A Location">
+            </div>
+
+            <div class="buttonwrapper">
+              <button @click="deselectAll" aria-Label="Deselect All Regions">Deselect All</button>
+              <button @click="selectAll" aria-Label="Select All Regions">Select All</button>
+            </div>
 
-          <p style="padding-top: 1rem;">Showing {{regionType}} with at least {{minCasesInCountry}} {{selectedData}}</p>
+            <p style="padding-top: 1rem;">Showing {{regionType}} with at least {{minCasesInCountry}} {{selectedData}}</p>
+
+          </div>
 
           <ul>
             <li v-for="country in visibleCountries">
diff --git a/style.css b/style.css
index 7a40589..1ca5f75 100644
--- a/style.css
+++ b/style.css
@@ -154,6 +154,7 @@ aside {
 
   background-color: #fcf8e8;
   padding: 1rem;
+  padding-top: 0; /* Letting customizetopwrapper take care of this */
   min-width: 10rem;
 
   overflow-y: auto;
@@ -168,15 +169,47 @@ aside > div:last-child {
   margin-bottom: 0;
 }
 
-.countries {
-
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
 aside h2 {
   font-size: 1.5rem;
   text-align: center;
+  
+  transition-duration: 0.4s;
+}
+
+aside h2:hover {
+  color: #FF4C00;
+}
+
+.customizetopwrapper {
+  margin: 0;
+
+  position: -webkit-sticky;
+  position: sticky;
+  top:  0; /* Same as aside padding-top */
+  padding-top: 1rem;
+  background-color: #fcf8e8;
+}
+
+.customize {
+  margin-bottom: 1rem;
+}
+
+.separator {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 3.5rem;
+  border: 1px solid #333;
+  margin: 0;
+}
+
+.countriestopwrapper {
+  position: -webkit-sticky;
+  position: sticky;
+  top: calc(3.5rem + 2px); /* Enough to fit the element before (3.5rem) and a separator */
+  padding-top: 1rem;
+  padding-bottom: 0.75rem;
+
+  background-color: #fcf8e8;
 }
 
 footer {
@@ -224,7 +257,6 @@ svg {
   width: 100%;
   display: flex;
   flex-direction: row;
-  min-width: 10rem;
 }
 
 .search > input {
@@ -271,9 +303,11 @@ button:hover {
 .countries p {
   margin-bottom: 0.75rem;
 }
+.countriestopwrapper p {
+  margin-bottom: 0;
+}
 
 select {
-  min-width: 12rem;
   font-size: 1rem;
   padding: 0.5rem;
   width: 100%;
diff --git a/vue-definitions.js b/vue-definitions.js
index 8e80f57..d759c0a 100644
--- a/vue-definitions.js
+++ b/vue-definitions.js
@@ -621,6 +621,18 @@ window.app = new Vue({
     // reference line for exponential growth with a given doubling time
     referenceLine(x) {
       return x * (1 - Math.pow(2, -this.lookbackTime / this.doublingTime));
+    },
+
+    scrollToCustomize() {
+      const ctw = document.getElementsByClassName('customizetopwrapper')[0];
+      document.getElementsByClassName('customize')[0].scrollIntoView();
+      document.getElementsByTagName('aside')[0].scrollBy(0,-parseFloat(getComputedStyle(ctw)['height'])-parseFloat(getComputedStyle(ctw)['padding-top']));
+    },
+
+    scrollToCountries() {
+      const ctw = document.getElementsByClassName('countriestopwrapper')[0];
+      document.getElementsByClassName('countries')[0].scrollIntoView();
+      document.getElementsByTagName('aside')[0].scrollBy(0,-parseFloat(getComputedStyle(ctw)['top'])+1); // the +1 avoids a weird (fractional) scrolling issue
     }
 
   },