diff --git a/.DS_Store b/.DS_Store
index bca980ac..c5c42720 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/_includes/nav.html b/_includes/nav.html
index ca40d425..42d7e531 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -1,6 +1,6 @@
 <nav id="topnav">
     <a href="{{ 'index.html' | relative_url }}">
-        <img src="imgs/Logo.svg" id="navlogo">
+        <img src="imgs/Logo.png" id="navlogo">
     </a>
     <input class="checkbox-toggle mobile" type="checkbox"/>
 
diff --git a/_layouts/default.html b/_layouts/default.html
index 4766b495..90c56221 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -30,7 +30,7 @@
 	<!--Banner-->
 	<div id="particles-js" class="banner">
 		<canvas id="canvas" height="300"></canvas>
-		<img id="bigLogo" src="imgs/Logo.svg" draggable="false">
+		<img id="bigLogo" src="imgs/logo.png" draggable="false">
 	</div>
 
 
diff --git a/imgs/.DS_Store b/imgs/.DS_Store
new file mode 100644
index 00000000..5008ddfc
Binary files /dev/null and b/imgs/.DS_Store differ
diff --git a/imgs/Logo.png b/imgs/Logo.png
index 561897ee..84e69ba1 100644
Binary files a/imgs/Logo.png and b/imgs/Logo.png differ
diff --git a/imgs/favicon.png b/imgs/favicon.png
index e25d95db..72a82006 100644
Binary files a/imgs/favicon.png and b/imgs/favicon.png differ
diff --git a/imgs/oldFavicon.png b/imgs/oldFavicon.png
new file mode 100644
index 00000000..e25d95db
Binary files /dev/null and b/imgs/oldFavicon.png differ
diff --git a/imgs/oldLogo.png b/imgs/oldLogo.png
new file mode 100644
index 00000000..561897ee
Binary files /dev/null and b/imgs/oldLogo.png differ
diff --git a/index.html b/index.html
index 111f9463..6f531846 100644
--- a/index.html
+++ b/index.html
@@ -7,22 +7,11 @@
 style: index.css
 ---
 
-<!--Photos-->
-<div class="section">
-    <div class="home-photos">
-        <img src="imgs/Row.jpg">
-        <img src="imgs/BunnyEars.jpg">
-    </div>
-</div>
-
 <!--Details-->
-<div class="section">
-    <h2>Details</h2>
-    <div>
-        <div id="warning"><strong>Registration is OPEN. The program has been moved online for health reasons. It is now free and any payments accepted are currently being refunded.</strong></div>
+<div class="section" id="home-details">
         <div class="details-container">
             <div class="details-item">
-                <div>
+                <h2>Details</h2>
                     <p><strong>Who: </strong>Girls in grades 5-8 (rising 6-9). Coding experience not
                         necessary,
                         but always welcome. It is strongly recommended that younger girls, those who may
@@ -34,18 +23,13 @@ <h2>Details</h2>
                         with technology (though they may not necessarily have programming experience) are
                         encouraged to sign up for the second session.
                     </p>
-                </div>
-                <div>
                     <p><strong>Times: </strong><br>
                         Session 1 (HTML/CSS): August 3rd-7th, 2:00-4:00 pm PST<br>
                         Session 2 (JavaScript): August 10th-14th, 2:00-4:00 pm PST</p>
-                </div>
-                <div>
                     <p><strong>Cost: </strong><br>
                         Online: FREE (suggested donation: $30)</p>
-                </div>
                 <div>
-                    <a href="{{ 'signup.html' | relative_url }}"><button class="action-button largebutton">Sign Up</button></a>
+                    <a href="{{ 'signup.html' | relative_url }}"><button class="action-button largebutton signup-button">Sign Up</button></a>
                 </div>
             </div>
             <!-- <div class="details-item">
@@ -56,47 +40,8 @@ <h2>Details</h2>
                     tabindex="0"></iframe>
             </div> -->
         </div>
-    </div>
+        <img src="imgs/Devin.jpg" id="details-photo">
 </div>
-<!--Bios-->
-<!--<div class="section">
-    <h2>//About the Instructors</h2>
-    <div>
-        <p><strong class="author">Sydney Von Arx</strong></p>
-        <p>I am Sydney Von Arx, and I love to code! I’m a computer science major at Stanford. I have experience
-            with eight programming languages. I have completed three computer science-related internships and
-            built several programs and apps. My real specialty, though, is web development. One of the few
-            things I love more than coding is teaching!</p>
-    </div>
-    <div>
-        <p><strong class="author">Selena Zhang</strong></p>
-        <p>I’m Selena Zhang, and coding is my passion! I plan to study computer science at MIT next year. I’ve
-            studied quantum computing and robotics under Professor Perkowski at PSU, but I got my start with web
-            development! I love teaching and learning from others, and I’ve devoted hundreds of hours to
-            teaching after-school programs throughout high school.</p>
-    </div>
-</div>-->
-
-<!--Details-->
-
-<!--Bios-->
-<!--<div class="section">
-    <h2>//About the Instructors</h2>
-    <div>
-        <p><strong class="author">Sydney Von Arx</strong></p>
-        <p>I am Sydney Von Arx, and I love to code! I’m a computer science major at Stanford. I have experience
-            with eight programming languages. I have completed three computer science-related internships and
-            built several programs and apps. My real specialty, though, is web development. One of the few
-            things I love more than coding is teaching!</p>
-    </div>
-    <div>
-        <p><strong class="author">Selena Zhang</strong></p>
-        <p>I’m Selena Zhang, and coding is my passion! I plan to study computer science at MIT next year. I’ve
-            studied quantum computing and robotics under Professor Perkowski at PSU, but I got my start with web
-            development! I love teaching and learning from others, and I’ve devoted hundreds of hours to
-            teaching after-school programs throughout high school.</p>
-    </div>
-</div>-->
 
 <!--Testimonials-->
 <div class="section">
@@ -116,4 +61,12 @@ <h2>Testimonials</h2>
             <p><strong class="author">Lauren</strong></p>
         </span>
     </div>
+</div>
+
+<!--Photos-->
+<div class="section">
+    <div class="home-photos">
+        <img src="imgs/Row.jpg">
+        <img src="imgs/BunnyEars.jpg">
+    </div>
 </div>
\ No newline at end of file
diff --git a/signup.html b/signup.html
index 443da40f..ca27eaef 100644
--- a/signup.html
+++ b/signup.html
@@ -9,10 +9,10 @@
 <!--Sign Up-->
 <div class="section">
     <div class="centertext">
-        <a class="notextdecoration" href="https://docs.google.com/forms/d/e/1FAIpQLSdrQrexGbs9i8aZ2p0bp4WVIepxj0AIfYkQd8pPRQIysR3ucw/viewform"><button type="button" class="signup-button largebutton">Sign Up</button></a>
+        <a class="notextdecoration" href="https://docs.google.com/forms/d/e/1FAIpQLSdrQrexGbs9i8aZ2p0bp4WVIepxj0AIfYkQd8pPRQIysR3ucw/viewform"><button type="button" class="action-button largebutton ">Sign Up</button></a>
         <!-- <span class="italics">If you need a scholarship, email <a
                         href="mailto:{{site.contact.email}}">{{site.contact.email}}</a></span> -->
-        <span class="italics">Signup is free, but if you are financially able, you can help support our program with a <a target="_blank" href="{{site.donate.page}}">tax-deductable donation</a> ($30 suggested).</span>
+        <div class="italics">Signup is free, but if you are financially able, you can help support our program with a <a target="_blank" href="{{site.donate.page}}">tax-deductable donation</a> ($30 suggested).</div>
     </div>
     <div id="sessionWrap">
         <div class="session">
diff --git a/styles/about.scss b/styles/about.scss
index 8caaa169..93e05253 100644
--- a/styles/about.scss
+++ b/styles/about.scss
@@ -1,9 +1,9 @@
 ---
 ---
 
-$main: #2d97b7;
-$dark: #283576;
-$gradient: linear-gradient(-45deg, #283576 0%, #2d97b7 100%);
+$main: #41CEDA;
+$dark: #153570;
+$gradient: linear-gradient(-45deg, $dark 0%, $main 100%);
 
 /* About Us Page */
 .instructors-container {
diff --git a/styles/faqs.scss b/styles/faqs.scss
index 79f0478d..251df049 100644
--- a/styles/faqs.scss
+++ b/styles/faqs.scss
@@ -1,9 +1,9 @@
 ---
 ---
 
-$main: #2d97b7;
-$dark: #283576;
-$gradient: linear-gradient(-45deg, #283576 0%, #2d97b7 100%);
+$main: #41CEDA;
+$dark: #153570;
+$gradient: linear-gradient(-45deg, $dark 0%, $main 100%);
 
 .section {
   max-width: calc(100vw - 60px);
@@ -38,7 +38,7 @@ section.faqs {
 
     font-size: 1.2em;
     // keep the same default font color (slightly not black) that seems to have been the default button text color
-    color:rgb(46, 52, 54);
+    color:#2F2D2C;
 
     // remove the default triangle to indicate whether the details is "open"
     // we are using or own custom one instead
diff --git a/styles/index.scss b/styles/index.scss
index 9687eacf..2aecc27c 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -1,13 +1,13 @@
 ---
 ---
 
-$main: #2d97b7;
-$dark: #283576;
-$gradient: linear-gradient(-45deg, #283576 0%, #2d97b7 100%);
+$main: #41CEDA;
+$dark: #153570;
+$gradient: linear-gradient(-45deg, $dark 0%, $main 100%);
 $heading-font: 'Nunito', 'Avenir', sans-serif;
 
 
-/* Photos */
+/* Bottom Two Photos */
 .home-photos {
   display: flex;
   justify-content: center;
@@ -15,7 +15,7 @@ $heading-font: 'Nunito', 'Avenir', sans-serif;
   width: 100%;
 }
 
-.section{
+.section {
   width: 100%;
 }
 
@@ -25,8 +25,23 @@ $heading-font: 'Nunito', 'Avenir', sans-serif;
   flex: 1 1 400px;
 }
 
-.details-item{
-  height: max-content;
+/* Details */
+#home-details {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+
+  .details-item{
+    height: max-content;
+    flex: 1 0 400px;
+    max-width: 600px;
+  }
+}
+
+#details-photo {
+  width: 40%;
+  margin-left: 20px;
 }
 
 /* Testmonials */
@@ -39,8 +54,6 @@ $heading-font: 'Nunito', 'Avenir', sans-serif;
   margin: 0 0;
 }
 
-
-
 .testimonial-item {
   padding: 10px;
   text-align: center;
diff --git a/styles/signup.scss b/styles/signup.scss
index 53c67fc6..55a9204f 100644
--- a/styles/signup.scss
+++ b/styles/signup.scss
@@ -1,15 +1,15 @@
 ---
 ---
 
-$main: #2d97b7;
-$dark: #283576;
-$gradient: linear-gradient(-45deg, #283576 0%, #2d97b7 100%);
+$main: #41CEDA;
+$dark: #153570;
+$gradient: linear-gradient(-45deg, $dark 0%, $main 100%);
 
 /* Sign Up Page */
 .signup-wrap{
   text-decoration: none;
 }
-.signup-button {
+/*.signup-button {
   font-family: 'Nunito';
   display: block;
   margin: 10px auto;
@@ -30,7 +30,7 @@ $gradient: linear-gradient(-45deg, #283576 0%, #2d97b7 100%);
   &:hover {
     opacity: 0.85;
   }
-}
+}*/
 
 .notextdecoration {
   text-decoration: none;
@@ -42,10 +42,12 @@ $gradient: linear-gradient(-45deg, #283576 0%, #2d97b7 100%);
 
 #sessionWrap{
   display: flex;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  margin: 30px 0;
 
   .session{
-    flex: 1 1 500px;
+    flex: 1 1 400px;
     margin: 0px 20px;
   }
 }
diff --git a/styles/style.scss b/styles/style.scss
index 87bdefdc..6dc59b4e 100644
--- a/styles/style.scss
+++ b/styles/style.scss
@@ -2,15 +2,14 @@
 ---
 
 /*TODO
-Wrap signup button on homepage
-Make testimonials wrap on mobile
-Fix brs on about us page
-Fix map sizing
+Fix button hover animation in nav
+Fix signup button hover animations and active/visited
+Make homepage details photo responsive
 */
 
-$main: #2d97b7;
-$dark: #283576;
-$gradient: linear-gradient(-45deg, #283576 0%, #2d97b7 100%);
+$main: #41CEDA;
+$dark: #153570;
+$gradient: linear-gradient(-45deg, $dark 0%, $main 100%);
 $body-font: 'Roboto', 'Avenir', sans-serif;
 $heading-font: 'Nunito', 'Avenir', sans-serif;
 
@@ -20,7 +19,7 @@ $heading-font: 'Nunito', 'Avenir', sans-serif;
 
 /* General */
 body {
-    color: rgb(112, 112, 112);
+    color: #636261;
     line-height: 1.5em;
     font-size: 1em;
     padding: 0;
@@ -40,19 +39,16 @@ a{
 
 .section{
     display: inline-block;
-    margin: 0 auto;
+    margin: 10px auto;
 }
 
-h2 {
-    color: $main;
+h2, h3 {
+    color: $dark;
     font-family: $heading-font;
-    font-weight: 700;
-    margin-bottom: 2%;
-}
+    font-weight: 800;
+    font-size: 2em;
 
-h3 {
-    font-family: $heading-font;
-    margin-bottom: 0.5%;
+    margin-bottom: 30px;
 }
 
 .subtitle {
@@ -70,27 +66,35 @@ button {
 }
 
 button.action-button {
-  /* display: block; */
   margin: 10px 5px;
+  border: none;
+  padding: 10px 40px;
+  
+  color: $dark;
+  font-weight: 500;
+  font-size: 15px;
   text-align: center;
-  transition: 0.5s;
-  font-weight: 200;
-  background-image: linear-gradient(-45deg, #283576 0%, #2d97b7 100%);
-  cursor: pointer;
-  color: white;
   text-transform: uppercase;
   text-decoration: none;
-  border: none;
-  padding: 5px 20px;
+
+  background-color: $main;
+  box-shadow: 2px 5px $dark;
+  cursor: pointer;
+  transition: 0.5s;
+
   /* max-width: 200px; */
-  /* width: 80%; */
 }
 button.action-button:hover {
-  opacity: 0.85;
+  /*opacity: 0.85;*/
+  color: $main;
+  background-color: $dark;
+  font-size: 85%;
+  filter: brightness(125%);
 }
 
 button.action-button:not(.navbutton) {
-  font-size: 2em;
+  font-size: 1em;
+  border-radius: 10px;
 }
 
 
@@ -144,13 +148,13 @@ img {
     top: 0;
     margin: 0;
     padding: 0 2.5vw;
-    height: 65px;
+    height: 75px;
     background-color: rgba(255, 255, 255, 0.9);
     align-items: center;
     justify-content:   space-between;
     z-index: 1;
 
-    a{
+    a {
         text-decoration: none;
     }
 }
@@ -176,7 +180,7 @@ img {
 }
 
 .navbutton {
-    transition: 0.5s ease-in-out;
+    transition: 0.3s ease-in-out;
     border: none;
     border-bottom: solid $main 1px;
     margin: 0 0.8vw;
@@ -190,7 +194,7 @@ img {
 }
 
 .navbutton:hover {
-    font-weight: bold;
+    font-size: 1em;
 }
 
 #banner { text-align: center; }
@@ -218,7 +222,7 @@ img {
   flex-wrap: wrap;
   align-content: center;
   justify-content: space-around;
-  padding: 0 -10px;
+  /*padding: 0 -10px;*/
 }
 
 .details-item {
@@ -227,6 +231,10 @@ img {
   flex-shrink: 1;
   position: relative;
   margin: 10px;
+
+  strong {
+      color: $dark;
+  }
 }
 
 iframe.embeddedform {
@@ -277,11 +285,15 @@ iframe.embeddedform {
        transition: color 0.3s;
     }
 
-    div{
+    h2 {
+        font-weight: 700;
+    }
+    
+    div {
         margin: 20px;
     }
 
-    a{
+    a {
         text-decoration: none;
         color: #fff;
         font-size: 1.5em;
@@ -311,6 +323,7 @@ iframe.embeddedform {
         border-bottom: solid;
         margin: 5px 0px 10px;
         min-width: max-content;
+        font-size: 1.5em;
     }
 }
 
@@ -366,10 +379,6 @@ iframe.embeddedform {
 
 
 /* Homepage */
-#warning {
-    color: #e77d00;
-}
-
 #intro {
     display: flex;
     justify-content: space-between;