diff --git a/web-app/seafoam/src/index.html b/web-app/seafoam/src/index.html
index 7cf17a4..2fb7668 100644
--- a/web-app/seafoam/src/index.html
+++ b/web-app/seafoam/src/index.html
@@ -453,9 +453,9 @@
 
     function selectSquare(index) {
       if (activeSquareIndex != -1) {
-        document.getElementById(activeSquareIndex).style.backgroundColor = "#0e141b";
-        document.getElementById("mapnextbutton").style.opacity = 1;
+        document.getElementById(activeSquareIndex).style.backgroundColor = "rgba(1, 1, 2, 0.665)";
       }
+      document.getElementById("mapnextbutton").style.opacity = 1;
       activeSquareIndex = parseInt(index);
       let selectedSquareDiv = document.getElementById(index);
       selectedSquareDiv.style.backgroundColor = "#edbdc2";
diff --git a/web-app/seafoam/src/styles.css b/web-app/seafoam/src/styles.css
index 31b86a4..1ffc358 100644
--- a/web-app/seafoam/src/styles.css
+++ b/web-app/seafoam/src/styles.css
@@ -159,8 +159,8 @@ body {
   border-radius: 50%;
   display: block;
   margin: 0.5rem auto auto auto;
-  transition: opacity 0.25s;
-  transition: transform 0.5s;
+  transition: opacity 0.25s ease-out;
+  transition: transform 0.25s ease-out;
   transform: scale(0.5);
   opacity: 0.3;
 }
@@ -216,7 +216,7 @@ body {
 
 #mapnextbutton {
   opacity: 0;
-  transition: opacity 0.5s ease-in;
+  transition: opacity 0.2s ease-out;
 }
 
 .nextbutton {
@@ -342,8 +342,9 @@ body {
 .settingdesc {
   margin-top: 1rem;
   width: 20rem;
-  font-size: 1rem;
-  font-weight: 300;
+  font-size: 12pt;
+  font-family: "Poppins-Thin";
+  letter-spacing: 0.05rem;
   color: var(--white-text-color);
 }