diff --git a/index.html b/index.html
index 88e5961..f62b608 100644
--- a/index.html
+++ b/index.html
@@ -5,11 +5,19 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Edu+VIC+WA+NT+Beginner:wght@600&family=Righteous&display=swap" rel="stylesheet"> 
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0" />
+    <script src="js/index.js"></script>
   </head>
   <body>
     <header>
       <span class="logo">billros.si</span>
       <nav>
+        <ul class="season">
+          <li onclick="setSeason('spring')"><span class="material-symbols-outlined">eco</span></li>
+          <li onclick="setSeason('summer')"><span class="material-symbols-outlined">sunny</span></li>
+          <li onclick="setSeason('autumn')"><span class="material-symbols-outlined">park</span></li>
+          <li onclick="setSeason('winter')"><span class="material-symbols-outlined">ac_unit</span></li>
+        </ul>
         <ul>
           <li><a href="#">Home</a></li>
           <li><a href="https://github.com/bassguitarbill">Github</a></li>
diff --git a/js/index.js b/js/index.js
new file mode 100644
index 0000000..02875f7
--- /dev/null
+++ b/js/index.js
@@ -0,0 +1,31 @@
+const SEASONAL_COLORS = {
+  spring: {
+    bg:     '#76BA99',
+    logo:   '#CED89E',
+    shadow: '#ADCF9F',
+  },
+  summer: {
+    bg:     '#0078AA',
+    logo:   '#F6F6F6',
+    shadow: '#F2DF3A',
+  },
+  autumn: {
+    bg:     '#9D5C0D',
+    logo:   '#F7D08A',
+    shadow: '#E5890A',
+  },
+  winter: {
+    bg:     '#242F9B',
+    logo:   '#9BA3EB',
+    shadow: '#646FD4',
+  },
+}
+
+function setSeason(season) {
+  document.querySelector(':root').style.setProperty('--background-color',   SEASONAL_COLORS[season].bg);
+  document.querySelector(':root').style.setProperty('--logo-color',         SEASONAL_COLORS[season].logo);
+  document.querySelector(':root').style.setProperty('--logo-shadow-color',  SEASONAL_COLORS[season].shadow);
+  localStorage.setItem('season', season);
+}
+
+setSeason(localStorage.getItem('season') || 'spring');
diff --git a/style/_autumn.scss b/style/_autumn.scss
deleted file mode 100644
index f40d4b5..0000000
--- a/style/_autumn.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// https://colorhunt.co/palette/9d5c0de5890af7d08afafafa
-$color-bg:          #9D5C0D;
-$color-logo:        #F7D08A;
-$color-logo-shadow: #E5890A;
diff --git a/style/_spring.scss b/style/_spring.scss
deleted file mode 100644
index 44e32af..0000000
--- a/style/_spring.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// https://colorhunt.co/palette/76ba99adcf9fced89effdcae
-$color-bg:          #76BA99;
-$color-logo:        #CED89E;
-$color-logo-shadow: #ADCF9F;
diff --git a/style/_summer.scss b/style/_summer.scss
deleted file mode 100644
index f41fe54..0000000
--- a/style/_summer.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// https://colorhunt.co/palette/0078aa3ab4f2f2df3af6f6f6
-$color-bg:          #0078AA;
-$color-logo:        #F6F6F6;
-$color-logo-shadow: #F2DF3A;
diff --git a/style/_winter.scss b/style/_winter.scss
deleted file mode 100644
index 413b000..0000000
--- a/style/_winter.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// https://colorhunt.co/palette/242f9b646fd49ba3ebdbdffd
-$color-bg:          #242F9B;
-$color-logo:        #9BA3EB;
-$color-logo-shadow: #646FD4;
diff --git a/style/style.scss b/style/style.scss
index df2d782..7e73c17 100644
--- a/style/style.scss
+++ b/style/style.scss
@@ -1,14 +1,15 @@
-// @use 'spring' as *;
-@use 'summer' as *;
-// @use 'autumn' as *;
-// @use 'winter' as *;
-
 $font-edu-vic: 'Edu VIC WA NT Beginner', cursive;
 $font-righteous: 'Righteous', cursive;
 
+:root {
+  --background-color: #76BA99;
+  --logo-color: #CED89E;
+  --logo-shadow-color: #ADCF9F;
+}
+
 body {
   margin: 0px;
-  background-color: $color-bg;
+  background-color: var(--background-color);
   color: white;
 }
 
@@ -21,8 +22,8 @@ header {
 .logo {
   font-family: $font-edu-vic; 
   font-size: 36pt;
-  color: $color-logo;
-  filter: drop-shadow(3px 4px 0px $color-logo-shadow);
+  color: var(--logo-color);
+  filter: drop-shadow(3px 4px 0px var(--logo-shadow-color));
   text-decoration: underline dotted;
 }
 
@@ -36,26 +37,32 @@ nav {
       display: inline;
       list-style: none;
       a {
-        color: $color-logo-shadow;
+        color: var(--logo-shadow-color);
         font-size: 24pt;
         padding-left: 12pt;
         text-decoration: none;
       }
-      a:hover {
-        color: $color-logo;
-        filter: drop-shadow(1px 1px 0px $color-logo-shadow);
-        animation-name: light-up;
-        animation-duration: 0.5s;
-      }
     }
+    li:hover {
+      color: var(--logo-color);
+      filter: drop-shadow(1px 1px 0px var(--logo-shadow-color));
+      animation-name: light-up;
+      animation-duration: 0.5s;
+    }
+  }
+  ul.season {
+    color: var(--logo-shadow-color);
+    padding-left: 0px;
+    font-size: 30pt;
+    cursor: pointer;
   }
 }
 
 @keyframes light-up {
   0% {
-    color: $color-logo-shadow;
+    color: var(--logo-shadow-color);
   }
   100% {
-    color: $color-logo;
+    color: var(--logo-color);
   }
 }
