diff --git a/index.js b/index.js
index 0360d96..9f9668f 100644
--- a/index.js
+++ b/index.js
@@ -1,62 +1,102 @@
 const exampleTextClasses = document.getElementById("exampleText").classList;
 
-const seriousButton = document
-  .getElementById("seriousButton")
-  .addEventListener("click", function () {
-    exampleTextClasses.add("serious");
-    exampleTextClasses.remove("seriousItalic");
-    exampleTextClasses.remove("seriousBold");
-    exampleTextClasses.remove("seriousBoldItalic");
-    exampleTextClasses.remove("seriousLight");
-    exampleTextClasses.remove("seriousLightItalic");
-  });
-const seriousItalicButton = document
-  .getElementById("seriousItalicButton")
-  .addEventListener("click", function () {
-    exampleTextClasses.remove("serious");
-    exampleTextClasses.add("seriousItalic");
-    exampleTextClasses.remove("seriousBold");
-    exampleTextClasses.remove("seriousBoldItalic");
-    exampleTextClasses.remove("seriousLight");
-    exampleTextClasses.remove("seriousLightItalic");
-  });
-const seriousBoldButton = document
-  .getElementById("seriousBoldButton")
-  .addEventListener("click", function () {
-    exampleTextClasses.remove("serious");
-    exampleTextClasses.remove("seriousItalic");
-    exampleTextClasses.add("seriousBold");
-    exampleTextClasses.remove("seriousBoldItalic");
-    exampleTextClasses.remove("seriousLight");
-    exampleTextClasses.remove("seriousLightItalic");
-  });
-const seriousBoldItalicButton = document
-  .getElementById("seriousBoldItalicButton")
-  .addEventListener("click", function () {
-    exampleTextClasses.remove("serious");
-    exampleTextClasses.remove("seriousItalic");
-    exampleTextClasses.remove("seriousBold");
-    exampleTextClasses.add("seriousBoldItalic");
-    exampleTextClasses.remove("seriousLight");
-    exampleTextClasses.remove("seriousLightItalic");
-  });
-const seriousLightButton = document
-  .getElementById("seriousLightButton")
-  .addEventListener("click", function () {
-    exampleTextClasses.remove("serious");
-    exampleTextClasses.remove("seriousItalic");
-    exampleTextClasses.remove("seriousBold");
-    exampleTextClasses.remove("seriousBoldItalic");
-    exampleTextClasses.add("seriousLight");
-    exampleTextClasses.remove("seriousLightItalic");
-  });
-const seriousLightItalicButton = document
-  .getElementById("seriousLightItalicButton")
-  .addEventListener("click", function () {
-    exampleTextClasses.remove("serious");
-    exampleTextClasses.remove("seriousItalic");
-    exampleTextClasses.remove("seriousBold");
-    exampleTextClasses.remove("seriousBoldItalic");
-    exampleTextClasses.remove("seriousLight");
-    exampleTextClasses.add("seriousLightItalic");
-  });
+const seriousButton = document.getElementById("seriousButton");
+const seriousItalicButton = document.getElementById("seriousItalicButton");
+const seriousBoldButton = document.getElementById("seriousBoldButton");
+const seriousBoldItalicButton = document.getElementById(
+  "seriousBoldItalicButton"
+);
+const seriousLightButton = document.getElementById("seriousLightButton");
+const seriousLightItalicButton = document.getElementById(
+  "seriousLightItalicButton"
+);
+
+seriousButton.addEventListener("click", function () {
+  this.classList.add("selected");
+  seriousItalicButton.classList.remove("selected");
+  seriousBoldButton.classList.remove("selected");
+  seriousBoldItalicButton.classList.remove("selected");
+  seriousLightButton.classList.remove("selected");
+  seriousLightItalicButton.classList.remove("selected");
+  exampleTextClasses.add("serious");
+  exampleTextClasses.remove("seriousItalic");
+  exampleTextClasses.remove("seriousBold");
+  exampleTextClasses.remove("seriousBoldItalic");
+  exampleTextClasses.remove("seriousLight");
+  exampleTextClasses.remove("seriousLightItalic");
+});
+
+seriousItalicButton.addEventListener("click", function () {
+  this.classList.add("selected");
+  seriousButton.classList.remove("selected");
+  seriousBoldButton.classList.remove("selected");
+  seriousBoldItalicButton.classList.remove("selected");
+  seriousLightButton.classList.remove("selected");
+  seriousLightItalicButton.classList.remove("selected");
+  exampleTextClasses.remove("serious");
+  exampleTextClasses.add("seriousItalic");
+  exampleTextClasses.remove("seriousBold");
+  exampleTextClasses.remove("seriousBoldItalic");
+  exampleTextClasses.remove("seriousLight");
+  exampleTextClasses.remove("seriousLightItalic");
+});
+
+seriousBoldButton.addEventListener("click", function () {
+  this.classList.add("selected");
+  seriousButton.classList.remove("selected");
+  seriousItalicButton.classList.remove("selected");
+  seriousBoldItalicButton.classList.remove("selected");
+  seriousLightButton.classList.remove("selected");
+  seriousLightItalicButton.classList.remove("selected");
+  exampleTextClasses.remove("serious");
+  exampleTextClasses.remove("seriousItalic");
+  exampleTextClasses.add("seriousBold");
+  exampleTextClasses.remove("seriousBoldItalic");
+  exampleTextClasses.remove("seriousLight");
+  exampleTextClasses.remove("seriousLightItalic");
+});
+
+seriousBoldItalicButton.addEventListener("click", function () {
+  this.classList.add("selected");
+  seriousButton.classList.remove("selected");
+  seriousItalicButton.classList.remove("selected");
+  seriousBoldButton.classList.remove("selected");
+  seriousLightButton.classList.remove("selected");
+  seriousLightItalicButton.classList.remove("selected");
+  exampleTextClasses.remove("serious");
+  exampleTextClasses.remove("seriousItalic");
+  exampleTextClasses.remove("seriousBold");
+  exampleTextClasses.add("seriousBoldItalic");
+  exampleTextClasses.remove("seriousLight");
+  exampleTextClasses.remove("seriousLightItalic");
+});
+
+seriousLightButton.addEventListener("click", function () {
+  this.classList.add("selected");
+  seriousButton.classList.remove("selected");
+  seriousItalicButton.classList.remove("selected");
+  seriousBoldButton.classList.remove("selected");
+  seriousBoldItalicButton.classList.remove("selected");
+  seriousLightItalicButton.classList.remove("selected");
+  exampleTextClasses.remove("serious");
+  exampleTextClasses.remove("seriousItalic");
+  exampleTextClasses.remove("seriousBold");
+  exampleTextClasses.remove("seriousBoldItalic");
+  exampleTextClasses.add("seriousLight");
+  exampleTextClasses.remove("seriousLightItalic");
+});
+
+seriousLightItalicButton.addEventListener("click", function () {
+  this.classList.add("selected");
+  seriousButton.classList.remove("selected");
+  seriousItalicButton.classList.remove("selected");
+  seriousBoldButton.classList.remove("selected");
+  seriousBoldItalicButton.classList.remove("selected");
+  seriousLightButton.classList.remove("selected");
+  exampleTextClasses.remove("serious");
+  exampleTextClasses.remove("seriousItalic");
+  exampleTextClasses.remove("seriousBold");
+  exampleTextClasses.remove("seriousBoldItalic");
+  exampleTextClasses.remove("seriousLight");
+  exampleTextClasses.add("seriousLightItalic");
+});
diff --git a/style.css b/style.css
index c8954f2..cc51a8d 100644
--- a/style.css
+++ b/style.css
@@ -70,6 +70,11 @@ button {
   color: rgb(0, 188, 138);
 }
 
+.selected {
+  background-color: #d4d4d4;
+  color: #1e1e1e;
+}
+
 .serious {
   font-family: "Serious Sans";
 }