diff --git a/index.html b/index.html
index e140dc6..3aad482 100644
--- a/index.html
+++ b/index.html
@@ -1,35 +1,38 @@
 <!DOCTYPE html>
 <html>
-<head>
-
-<title>My Favorite Pizza</title>
-
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
-
-<link href="style.css" rel="stylesheet" type="text/css" />
-
-</head>
-
-<body>
-
-<!-- WEB PAGE CONTENT HERE -->
-
-<div class="pageContainer">
-  <div class="imageContainer"> 
-    <img src="images/pizza.jpg" alt="Pizza with pepperoni and cheese." /> 
-  </div>
-  <div class="textContainer">
-    <h1>Pizza!</h1>
-    <p>My Favorite Toppings: </p>
-    <ul>
-      <li>Pepperoni</li>
-      <li>Mozzarella Cheese</li>
-      <li>Mushrooms</li>
-    </ul>
-  </div>
-</div>
-
-</body>
+  <head>
+    <title>My Favorite Pizza</title>
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
+    />
+
+    <link href="style.css" rel="stylesheet" type="text/css" />
+  </head>
+
+  <body>
+    <!-- WEB PAGE CONTENT HERE -->
+
+    <div class="pageContainer">
+      <div class="imageContainer">
+        <img src="images/pizza.jpg" alt="Pizza with pepperoni and cheese." />
+      </div>
+      <div class="textContainer">
+        <h1>Pizza!</h1>
+        <p>My Favorite Toppings:</p>
+        <ul>
+          <li>Pepperoni</li>
+          <li>Mozzarella Cheese</li>
+          <li>Mushrooms</li>
+          <li>Marinara</li>
+        </ul>
+      </div>
+
+      <!-- Light & Dark Mode Button -->
+      <button id="btn">Dark Mode</button>
+    </div>
+
+    <script src="./script.js"></script>
+  </body>
 </html>
-
-
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..2f78b45
--- /dev/null
+++ b/script.js
@@ -0,0 +1,21 @@
+const pageContainer = document.getElementsByClassName("pageContainer")[0];
+
+const btn = document.getElementById("btn");
+
+const h1 = document.getElementsByTagName('h1')[0];
+
+pageContainer.style.backgroundColor = "white";
+
+h1.style.color = "#8b1b00";
+
+btn.addEventListener('click', () => {
+    if (pageContainer.style.backgroundColor === "white") {
+        pageContainer.style.backgroundColor = "black";
+        btn.innerHTML = "White Mode";
+        h1.style.color = "#f85c35";
+    } else {
+        pageContainer.style.backgroundColor = "white";
+        btn.innerHTML = "Dark Mode";
+        h1.style.color = "#8b1b00";
+    }
+})
\ No newline at end of file
diff --git a/style.css b/style.css
index 657aa61..fe16fbc 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,3 @@
-
 /* 
 	STYLE.CSS:
 	One stylesheet to rule them all.
@@ -12,19 +11,18 @@
 body {
   background-color: #5f5345;
 }
- 
+
 .pageContainer {
   width: 940px;
   margin: 20px auto 0 auto;
   padding: 20px;
-  background-color: #fff;
 }
- 
+
 .imageContainer {
   float: left;
   width: 620px;
 }
- 
+
 .textContainer {
   float: left;
   width: 300px;
@@ -35,30 +33,45 @@ body {
 img {
   width: 100%;
 }
- 
+
 h1 {
-  font-family: 'Fredericka the Great', cursive;
+  font-family: "Fredericka the Great", cursive;
   font-size: 64px;
-  color: #8b1b00;
 }
- 
-p, li {
-  font-family: 'Lato', sans-serif;
+
+p,
+li {
+  font-family: "Lato", sans-serif;
   font-size: 22px;
-  color: #51473b;
+  color: #8a6f4e;
 }
 
-
-
-
 /* ---- Advanced ---- */
 /* This tag is a bit advanced for this lesson,  
    but is needed to wrap the pageContainer 
    around any sized content that is floated within it. */
 
-.pageContainer:after { 
+.pageContainer:after {
   content: " ";
   display: table;
   clear: both;
 }
- 
+
+#btn {
+  margin-left: 20px;
+  margin-top: 20px;
+  border-style: none;
+  padding: 10px;
+  border-radius: 5px;
+  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
+    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
+    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px;
+  cursor: pointer;
+  background-color: rgb(0, 119, 255);
+  color: whitesmoke;
+  opacity: 0.8;
+}
+
+#btn:hover {
+  opacity: 1;
+}
