diff --git a/.DS_Store b/.DS_Store
index bcd3cf33..556f7cfc 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/aboutus.html b/aboutus.html
index 3c9653e8..65f815cb 100644
--- a/aboutus.html
+++ b/aboutus.html
@@ -12,22 +12,22 @@ <h1>About Us</h1>
     <div class="details-container">
         <div class="details-item">
             <a href="#founders">
-                <button class="buttons">Our Co-Founders</button>
+                <button class="buttons about-btn">Our Co-Founders</button>
             </a>
         </div>
         <div class="details-item">
             <a href="#history">
-                <button class="buttons">Our History</button>
+                <button class="buttons about-btn">Our History</button>
             </a>
         </div>
         <div class="details-item">
             <a href="#organization">
-                <button class="buttons">Our Organization</button>
+                <button class="buttons about-btn">Our Organization</button>
             </a>
         </div>
         <div class="details-item">
             <a href="#services">
-                <button class="buttons">Our Services</button>
+                <button class="buttons about-btn">Our Services</button>
             </a>
         </div>
     </div>
diff --git a/ourteam.html b/ourteam.html
index 87e7b4bc..e30f3852 100644
--- a/ourteam.html
+++ b/ourteam.html
@@ -13,17 +13,17 @@ <h1>Our Team</h1>
   <div class="details-container">
     <div class="details-item">
       <a href="#director">
-        <button class="buttons">Our Directors</button>
+        <button class="buttons team-btn">Our Directors</button>
       </a>
     </div>
     <div class="details-item">
       <a href="#lead">
-        <button class="buttons">Our Team Leads</button>
+        <button class="buttons team-btn">Our Team Leads</button>
       </a>
     </div>
     <div class="details-item">
       <a href="#mascot">
-        <button class="buttons">Our Mascot</button>
+        <button class="buttons team-btn">Our Mascot</button>
       </a>
     </div>
   </div>
diff --git a/styles/about.scss b/styles/about.scss
index ac84f607..1deabe30 100644
--- a/styles/about.scss
+++ b/styles/about.scss
@@ -3,25 +3,6 @@
 
 @import 'variables';
 
-#topbuttons .details-container{
-  margin-right: 20px;
-  flex-wrap: nowrap;
-}
-
-.buttons{
-  background-color:$main;
-  color: #F3F3F3;
-  border-radius: 10px;
-  width: 20vw;
-  min-width: 130px;
-  border: none;
-  font-size: 1em;
-  cursor: pointer;
-  padding: 5px 10px;
-  &:hover {
-      opacity: 0.85;
-  }
-}
 
 /* About Us Page */
 .instructors-container {
diff --git a/styles/programdetails.scss b/styles/programdetails.scss
index 146025ae..0236984a 100644
--- a/styles/programdetails.scss
+++ b/styles/programdetails.scss
@@ -62,22 +62,6 @@
   flex: 1 1 10vw;
 }
 
-.buttons {
-  background-color: $main;
-  color: #f3f3f3;
-  border-radius: 10px;
-  width: 100%;
-  border: none;
-  font-size: 1em;
-  cursor: pointer;
-  padding: 5px 20px;
-  margin-top: 10px;
-}
-
-.buttons:hover {
-  opacity: 0.85;
-}
-
 #top-image {
   object-fit: cover;
   height: 100%;
diff --git a/styles/style.scss b/styles/style.scss
index 540839f6..2dade19e 100644
--- a/styles/style.scss
+++ b/styles/style.scss
@@ -12,8 +12,8 @@ $translucent-white: rgba(255, 255, 255, 0.9);
 /* General */
 body {
     color: #4a4746;
-    line-height: 1.5em;
-    font-size: 1em;
+    line-height: 1.5rem;
+    font-size: 1rem;
     padding: 0;
     margin: 0;
     display: flex;
@@ -154,9 +154,13 @@ h6 {
 
 /* Navigation Bar */
 #topnav {
-    background-color: $translucent-white;
+    background-color: #153670;
+
     #nav-ul {
         height: auto;
+        margin-right: 9rem;
+        
+    
     }
 }
 
@@ -167,7 +171,7 @@ nav #nav-ul {
     top: 0;
     margin: 0;
     padding: 0 2.5vw;
-    height: 65px;
+    height: 80px;
     align-items: flex-start;
     justify-content: space-between;
     z-index: 1;
@@ -178,7 +182,7 @@ nav #nav-ul {
     ul,
     li {
         list-style: none;
-        padding: 0;
+        padding: 0px;
     }
 }
 
@@ -192,30 +196,30 @@ nav #nav-ul {
 
 .dropdownbutton {
     border: none;
-    margin: 0.1vw;
+    margin: 0.05vw;
     cursor: pointer;
-    background-color: inherit;
+    //background-color: #FEBE42;
     height: 100%;
     width: 100%;
     text-align: left;
     color: #fff;
-    font-size: 0.9em;
+    font-size: 1rem;
     position: relative;
     text-align: center;
     &:hover {
-        opacity: 0.75;
-        transition-duration: 0.3s;
+        // opacity: 0.75;
+        transition-duration: 0.01s;
     }
 }
 
 // menu from https://codepen.io/abergin/pen/ihlDf
 #topnav {
     .transition {
-        transition: all 0.25s ease-in-out;
+        transition: all 0.10s ease-in-out;
     }
 
     .flipIn {
-        animation: flipdown 0.5s ease both;
+        animation: flipdown 0.02s ease both;
     }
 
     .no-select {
@@ -235,7 +239,6 @@ nav #nav-ul {
         //letter-spacing: 1px;
         //display: block;
         //background-color: $main;
-        margin: 0;
         cursor: pointer;
         @extend .no-select;
     }
@@ -275,7 +278,7 @@ nav #nav-ul {
         > li {
             position: relative;
             padding: 0;
-            margin: 0 10px;
+            margin: 13px 1rem;
             padding-bottom: 4px;
             padding-top: 18px;
             //width: min-content;
@@ -307,6 +310,8 @@ nav #nav-ul {
             .menu-arrow {
                 display: inline-block;
                 width: 10px;
+                padding-left: 50px;
+                
 
                 //position: absolute;
                 //transform: translate(-10px, 0);
@@ -321,8 +326,9 @@ nav #nav-ul {
                     background-color: $main;
                     width: 3px;
                     height: 9px;
-                    right: 7px;
+                    right: 3px;
                     top: 5px;
+                    margin-right: 10px;
                 }
 
                 &:before {
@@ -443,9 +449,9 @@ nav #nav-ul {
 // }
 
 #navlogo {
-    height: 50px;
+    height: 60px;
     margin-top: 10px;
-    margin-left: 10px;
+    margin-left: 10rem;
 }
 
 .mobile {
@@ -466,23 +472,24 @@ nav #nav-ul {
     text-align: left;
     text-transform: uppercase;
     color: $main;
-    font-size: 0.9em;
-    position: relative;
+    font-size: 1rem;
+    position: relative;    
 }
 
+
 .navbutton::before, .dropdownbutton::before {
     content: "";
     display: block;
     position: absolute;
-    background: $main;
+    background: #1A98C6;
     transform: scaleY(0.05);
     width: 100%;
     height: 100%;
     transition: 0.25s ease-in-out;
     transform-origin: 50% 100%;
     z-index: -1;
-    //border-radius: 5px;
-    padding-left: 0px;
+    // border-radius: 5px;
+    padding-left: 0;
     left: 0;
 }
 
@@ -518,6 +525,14 @@ nav #nav-ul {
     }
 }
 
+/*Top Buttons(Page links)*/
+#topbuttons .details-container{
+    margin-right: 20px;
+    flex-wrap: nowrap;
+    font-size: 1rem;
+    
+}
+
 /* Details*/
 .details-container {
     display: flex;
@@ -533,20 +548,48 @@ nav #nav-ul {
     flex-grow: 1;
     flex-shrink: 1;
     position: relative;
-    margin: 10px;
+    margin: 3px;
     flex-basis: 300px;
 }
 
+
+.buttons{
+    background-color:$main;
+    color: #F3F3F3;
+    border-radius: 15px;
+    width: 13vw;
+    min-width: 130px;
+    border: none;
+    font-size: 1.2rem;
+    padding: 1rem;
+    margin: 10px 55px 1px 0;
+    position: relative;
+    cursor: pointer;
+    &:hover {
+        opacity: 0.85;
+    }
+  }
+
+  .team-btn{
+    margin: 0 0 0 8.2rem;
+  }
+
+  .about-btn{
+    margin: 0 2rem 0;
+    
+  }
+
 /* Footer */
 #footer {
     background-color: $dark;
     padding: 0.5vh 2vw;
     color: white;
     text-align: center;
-    font-size: 0.8em;
+    font-size: 1rem;
 
     .fa-stack {
         transition: color 0.3s;
+        margin: 1rem;
         &:hover {
             color: $dark;
             .fa-inverse {
@@ -561,7 +604,7 @@ nav #nav-ul {
     }
 
     div {
-        margin: 20px;
+        margin: 1rem 3rem;
     }
 
     a {
@@ -579,7 +622,7 @@ nav #nav-ul {
     justify-content: center;
 
     p {
-        font-size: 13px;
+        font-size: 1rem;
         margin: 0px;
     }
 }
@@ -603,7 +646,7 @@ nav #nav-ul {
 }
 
 #footer a.small-link {
-    font-size: 13px;
+    font-size: 1rem;
     text-decoration: underline;
     color: white;
     &:hover {
@@ -617,17 +660,18 @@ nav #nav-ul {
 
     #donate {
         margin: 0px;
-        margin-top: 10px;
+        // margin-top: 10px;
 
         button {
             background-color: $main;
             border: none;
             border-radius: 10px;
             height: 37px;
-            width: 98%;
+            width: 90%;
             color: white;
             font-weight: bold;
-            font-size: 15px;
+            font-size: 1.2rem;
+            text-align: center;
             &:hover {
                 background: $dark;
                 cursor: pointer;
@@ -647,19 +691,21 @@ nav #nav-ul {
     margin: 20px 0;
 
     p {
-        padding: 10px 0 5px 0;
+        padding: 10px 0 5px 25px;
     }
 }
 
 #mailing-list {
-    max-width: 275px;
+    max-width: 150%;
     height: 70px;
     background: $dark;
     padding: 0;
+    text-align: center;
 }
 
 .footer-info {
     min-width: 150px;
+    
 }
 
 //Homepage
@@ -715,7 +761,7 @@ nav #nav-ul {
 }
 
 /* responsive */
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: 1024px) {
     canvas,
     #canvas,
     div canvas {
@@ -974,6 +1020,7 @@ nav #nav-ul {
     }
 }
 
+
 button.tinybutton {
     font-size: 1rem;
     font-weight: 350;
diff --git a/styles/volunteer.scss b/styles/volunteer.scss
index 5df7df36..9fedf237 100644
--- a/styles/volunteer.scss
+++ b/styles/volunteer.scss
@@ -8,10 +8,7 @@ List
 (adapted from https://codepen.io/chriscoyier/pen/xjapNK)
 */
 
-#topbuttons .details-container{
-    margin-right: 20px;
-    flex-wrap: nowrap;
-}
+
 
 #hwphoto {
     width: 100%;
@@ -21,20 +18,7 @@ List
     width: 100%;
 }
 
-.buttons{
-    background-color:$main;
-    color: #F3F3F3;
-    border-radius: 10px;
-    width: 15vw;
-    min-width: 100px;
-    border: none;
-    font-size: 1em;
-    cursor: pointer;
-    padding: 5px 10px;
-    &:hover {
-        opacity: 0.85;
-    }
-}
+
 
 // .steps {
 //     clear: both;