diff --git a/index.html b/index.html
index 8a9f92c..daead24 100644
--- a/index.html
+++ b/index.html
@@ -1,216 +1,73 @@
-<!DOCTYPE HTML>
-<html>
+<!DOCTYPE html>
+<html lang="en-us" class="theme-light">
+
     
 <!-- ====================================================
-Name: Building Blocks - v1.3
+Name: Color Scheme Change
 Author: Troy Sidle
 
-This version includes a navigation menu. It also has an image in "Publications" that changes from black and white to color when the user hovers over it.
-
-In the footer, there is a color scheme change under construction.
-======================================================== -->    
-    
+The user can choose amongst three color schemes.
+======================================================== -->            
     
+<title>Color Scheme Change</title>
+
 <head>
-<meta charset="UTF-8">
-<title>Honeydew Limeade</title>
-<link href="Stylesheet.css" rel="stylesheet">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="main.css" type="text/css"/>
 </head>
 
 
-<body id="content">
-
-
-    
-<script>
-function alertFunction() {
-  alert("This feature is under construction.");
-}
-</script>
-
-    
-    
-<!-- The navigation bar -->    
-<div class="sideNavigation">
-
-<a class="active" href="#home">Home</a>
-<a class="active" href="#education">Education</a>
-<a class="active" href="#workExperience">Work Experience</a>
-<a class="active" href="#publications">Publications</a>
-<!--<a class="active" href="#portfolio">Portfolio</a>-->
 
-</div>
-    
-<div class="main">    
-    
-    
-    
-        <script>
-        // Selecting element
-        var elem = document.getElementById("content");
-        
-        // Initial variable values
-        //var start = 'none'
-        var current;
-        var selected;
-        
-        
-        // Get the values to display.
-        //document.getElementById("oldStyleClass").innerHTML = current;
-        //document.getElementById("newStyleClass").innerHTML = start;
-        
-        // Remove old color display and replace with new.
-        function changeScheme(p1, p2) {
-        //document.getElementById("oldStyleClass").innerHTML = p1;
-        //document.getElementById("newStyleClass").innerHTML = p2;
 
-        // Remove old color scheme and replace with new.    
-        elem.classList.remove(p1);  
-        elem.classList.add(p2);  
-            
-        // Reset the current scheme.
-        current = p2;
-        }     
-    </script>
-      
+<body>
     
     
-<!-- The sections are the main content of the website. -->    
+<h1>Color Scheme Change</h1>
     
-<section id="home">
-<section class="hero-image">
-    <div class="hero-text">
-    <h1 style="font-size:50px">Troy Sidle</h1>
-    <h2>Designer</h2>    
-    </div>
-</section>
+<section class="mainCategory">
+  <h1>Main Section A</h1>
+  <p>This is a paragraph.</p>
 </section>
     
+<br>
     
-<section id="education"> 
-<h3>Education
-</h3>
-<p>
-Bachelor of Arts, Computer Science						
-Harding University, Searcy, AR 
-</p>
-<p>
-December 2000
-</p>
-</section> 
-
-<section id="workExperience">
-<h3>Work Experience
-</h3>
-<h4>
-The Dinex Group, New York, NY
-</h4>
-<p>2/2022 – 5/2022
-</p>
-<p>Director of Cocktails
-</p> 
-<p>
-Developing new bar programs with an emphasis on cocktail experiences
-</p>
-<p>
-Creating systems and standards for existing bar and cocktail programs 
-</p>
+<section class="mainCategory">
+  <h1>Main Section B</h1>
+  <p>This is a paragraph.</p>
 </section>
     
-<section id="publications"> 
-<h3>Publications
-</h3>
-<p>
-The recipe for Honeydew Limeade is in the book Batch Cocktails by Maggie Hoffman.
-</p>
-
-<!--Insert an image-->
-    
-<div class="imageContainer">
-<img src="Batch%20Cocktails%20BW.jpeg" alt="Temp Portfolio Photo" width="200" height="auto">
-    <div class="overlay"><img src=Batch%20Cocktails.jpeg width="200" height="auto"></div>
-    </div>
-    <!--
-<img src="LimePastel2.png" alt="Temp Portfolio Photo" width="500" height="auto">
-    </div>
--->
-</section> 
-
-    
-
-
-</div>
-</body>
-<footer class="main" style="background-color: var(--nearBlackTone);">
-    
 <br>
-<p style="color: var(--nearwhite);">Change Color Scheme (under construction)</p>
     
+<section class="distinctCategory">
+  <h1>Unique Section</h1>
+  <p>This is a paragraph.</p>
+</section>
 
-
-
+<br>    
     
-    <!--This table holds three color schemes.-->    
-<table style="width: 600px; background-color: var(--nearBlackTone); border: 10px solid var(--nearBlackTone);">
-  <tr class="colorSchemeContainer">
-    <td class="colorSchemeContainer">
-        
-        <!--This table holds five colors of type A-->
-        
-        <table style="width: 200px; height: 10px;" onclick="alertFunction()">
-    <tr>
-    <td style="background-color: var(--mediumMonochromeGreen)"></td>
-    <td style="background-color: var(--lightMonochromeGreen)"></td>
-        <td style="background-color: var(--baseColorMonochromeGreen)"></td>
-        <td style="background-color: var(--darkMonochromeGreen)"></td>
-        <td style="background-color: var(--contrastMonochromeGreen)"></td>
-    </tr>
-        </table>  
-    </td>
-    <td class="colorSchemeContainer">
     
-        <!--This table holds five colors of type B-->
-        
-            <table style="width: 200px; height: 10px;">
-    <tr>
-    <td style="background-color: var(--mediumComplementaryProduce)"></td>
-    <td style="background-color: var(--lightComplementaryProduce)"></td>
-        <td style="background-color: var(--baseColorComplementaryProduce)"></td>
-        <td style="background-color: var(--darkComplementaryProduce)"></td>
-        <td style="background-color: var(--contrastComplementaryProduce)"></td>
-    </tr>
-        </table>  
-    </td>
-    <td class="colorSchemeContainer">
-        
-        <!--This table holds five colors of type C-->
-        
-        <table style="width: 200px; height: 10px;">
-    <tr>
-    <td style="background-color: var(--mediumComplementaryVista)"></td>
-    <td style="background-color: var(--lightComplementaryVista)"></td>
-        <td style="background-color: var(--baseColorComplementaryVista)"></td>
-        <td style="background-color: var(--darkComplementaryVista)"></td>
-        <td style="background-color: var(--contrastComplementaryVista)"></td>
-    </tr>
-        </table>  
-    </td>
-  </tr>
-</table>
-
-<br>
+    <button id="switch" onclick="setTheme('monochromeGreen')">Greens</button>
     
-    <!--Provide Buttons to use the changeScheme to alter the apearance of "content"-->
+    <button id="switch" onclick="setTheme('complementaryProduceColors')">Produce</button>
     
-<p>
-    <button type="button" onclick="changeScheme(current, 'monochromeGreen')">Monochrome Green</button>
-    <button type="button" onclick="changeScheme(current, 'complementaryProduce')">Complementary Produce</button>
-    <button type="button" onclick="changeScheme(current, 'complementaryVista')">Complementary Vista</button>
-</p>
-    
-<br>
+    <button id="switch" onclick="setTheme('complementaryVistaColors')">Vista</button>
     
+    <script>
+        // function to set a given theme/color-scheme
+        function setTheme(themeName) {
+            localStorage.setItem('theme', themeName);
+            document.documentElement.className = themeName;
+        }
 
-</footer>
+        // Immediately invoked function to set the theme on initial load
+        (function () 
+            {
+                setTheme('monochromeGreen');
+            }
+        )();
+    </script>
+</body>
 
 </html>
\ No newline at end of file
diff --git a/main.css b/main.css
new file mode 100644
index 0000000..151c0da
--- /dev/null
+++ b/main.css
@@ -0,0 +1,113 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+    background-color: white;
+  }
+
+
+h1 {
+  margin-left: 25px;
+  color: var(--darkColor)
+}
+
+p {
+  margin-left: 25px;
+}
+
+
+/*----- Color Scheme -----*/
+
+/* Monochrome Green
+    These colors are monochrome in a green hue.
+*/
+
+.monochromeGreen {
+
+--baseColor: #C1F5C6;
+
+--lightColor: #ADDBB1;
+
+--mediumColor: #93BA96;
+
+--darkColor: #283329;    
+    
+--contrastColor: #4F6350;
+}
+
+/*Complementary Produce
+    These colors are complementary to green and resemble produce colors like blackberries and mango.
+*/
+
+.complementaryProduceColors {
+--baseColor: #C1F5C6;
+
+--lightColor: #C5B8CF;
+
+--mediumColor: #786056;
+
+--darkColor: #33104A;
+
+--contrastColor: #CC511D;
+}
+
+/*Complementary Vista
+    These colors are complementary to green and resemble a vista of wheat fields and blue sky.
+*/
+
+.complementaryVistaColors {
+--baseColor: #C1F5C6;
+
+--lightColor: #F2EDB8;
+
+--mediumColor: #9FE1F5;
+
+--darkColor: #241066;
+
+--contrastColor: #FF8F1F;
+}
+
+
+  .mainCategory {
+    display: flex;
+    width: 100%;
+    height: 20%;
+    background: var(--lightColor);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: var(--darkColor);
+  }
+  .mainCategory h1 {
+    color: var(--contrastColor);
+  }
+  .mainCategory button {
+    color: var(--contrastColor);
+    background: var(--darkColor);
+    padding: 10px 20px;
+    border: 0;
+    border-radius: 5px;
+  }
+
+
+  .distinctCategory {
+    display: flex;
+    width: 100%;
+    height: 20%;
+    background: var(--baseColor);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: var(--contrastColor);
+
+    }
+
+  .distinctCategory h1 {
+    color: var(--contrastColor);
+    }
+
+
+
+
+
