diff --git a/index.css b/index.css
index ea890fa2..5f3bc584 100644
--- a/index.css
+++ b/index.css
@@ -260,8 +260,8 @@
   justify-content: center;
 }
 .home-details1 {
-  width: 100%;
-  height: 989px;
+  width: 40%;
+  height: 1200px;
   display: flex;
   max-width: var(--dl-size-size-maxwidth);
   align-items: center;
@@ -273,7 +273,7 @@
 }
 .home-container03 {
   flex: 1;
-  width: 870px;
+  width: 40%;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
@@ -450,7 +450,7 @@
   flex: 0 0 auto;
   width: auto;
   height: auto;
-  display: flex;
+  display: none;
   align-items: flex-start;
   justify-content: center;
 }
@@ -525,8 +525,8 @@
     line-height: 1.6;
   }
   .home-details1 {
-    width: 100%;
-    height: 839px;
+    width: 40%;
+    height: 1200px;
     max-width: 100%;
     padding-top: var(--dl-space-space-sixunits);
     padding-left: var(--dl-space-space-sixunits);
@@ -534,7 +534,7 @@
     padding-bottom: var(--dl-space-space-sixunits);
   }
   .home-container03 {
-    width: 100%;
+    width: 40%;
   }
   .home-details-heading {
     width: 100%;
@@ -622,7 +622,18 @@
   .home-container12 {
     flex-direction: column;
   }
+  .home-container03{
+    width: 100%;
+  }
+
+  .home-details1{
+    width: 100%;
+  }
+  .code-comp{
+    position: inherit;
+  }
 }
+
 @media(max-width: 767px) {
   .home-header {
     padding-left: var(--dl-space-space-twounits);
@@ -683,6 +694,16 @@
   .home-container12 {
     flex-direction: column;
   }
+  .home-container03{
+    width: 100%;
+  }
+
+  .home-details1{
+    width: 100%;
+  }
+  .code-comp{
+    position:relative;
+  }
 }
 @media(max-width: 479px) {
   .home-header {
@@ -707,9 +728,16 @@
     margin-top: var(--dl-space-space-unit);
     margin-left: 0px;
   }
-  .home-container03 {
+  .home-container03{
     width: 100%;
   }
+
+  .home-details1{
+    width: 100%;
+  }
+  .code-comp{
+    position:relative;
+  }
   .home-features {
     padding-top: var(--dl-space-space-twounits);
     padding-left: var(--dl-space-space-unit);
diff --git a/index.html b/index.html
index e7cbecd4..bb59bcc0 100644
--- a/index.html
+++ b/index.html
@@ -143,17 +143,17 @@ <h1 class="home-hero-heading heading1">Lighter</h1>
                 <button class="home-hero-button2 button" onclick="location.href='https://github.com/project-lighter/lighter'" style="font-size:24px">
                  <i class="fa fa-github"></i>
 
-                  Github&nbsp;→
+                  Github
                 </button>
               </div>
             </div>
           </div>
         </div>
         <div class="home-details">
-          <div class="home-details1" style="width: 39%;">
+          <div class="home-details1">
             <div class="home-container03">
               <h2 class="home-details-heading heading2">
-                <span>Say goodbye to messy scripts and notebooks.</span>
+                <span>Say goodbye to messy scripts and forgetting parameters.</span>
                 <br />
                 <br />
               </h2>
@@ -162,18 +162,23 @@ <h2 class="home-details-heading heading2">
                 Lighter is here to help you organize your experiments and make
                 sense of what you ran (even years ago). 
                 <br/><br/>
-                Join the community of reproducibility and
-                transparency!!
+                Join us in our reproducibility and
+                transparency journey!!
               </span>
+              <button id="toggleButton">See how we compare&nbsp;→</button>
+
             </div>
           </div>
-          <div class="code-comp" style="width: 60%;">
-                <img id="before-code" src="assets/images/PL_demo.png" class="code">
-               </img>
-               <img id="after-code" src="assets/images/Lighter_demo.png" class="code">
-              </img>
+          <div class="code-comp">
+            <img id="before-code" src="assets/images/PL_demo.png" class="code visible">
+           </img>
+           <img id="after-code" src="assets/images/Lighter_demo.png" class="code hidden">
+          </img>
           </div>
-        </div>
+
+      </div>
+    
+
         <div class="home-features">
           <h1 class="home-text07">
             <span>Features</span>
@@ -328,5 +333,32 @@ <h2 class="feature-card4-text"><span>Lorem ipsum</span></h2>
       data-section-id="navbar"
       src="https://unpkg.com/@teleporthq/teleport-custom-scripts"
     ></script>
+    <script>
+      document.getElementById('toggleButton').addEventListener('click', function() {
+        var beforeCode = document.getElementById('before-code');
+        var afterCode = document.getElementById('after-code');
+        var button = document.getElementById('toggleButton');
+      
+        if (beforeCode.classList.contains('visible')) {
+          beforeCode.classList.remove('visible');
+          beforeCode.classList.add('hidden');
+          afterCode.classList.remove('hidden');
+          afterCode.classList.add('visible');
+          button.style.backgroundColor = "#792EE5";
+          button.textContent = "Compare PL→";
+        } else {
+          beforeCode.classList.add('visible');
+          beforeCode.classList.remove('hidden');
+          afterCode.classList.add('hidden');
+          afterCode.classList.remove('visible');
+          button.style.backgroundColor = "#469AA3";
+          button.textContent = "Compare Lighter →";
+
+
+
+        }
+      });
+      
+    </script>
   </body>
 </html>
\ No newline at end of file
diff --git a/overrides/index.css b/overrides/index.css
index ea890fa2..5f3bc584 100644
--- a/overrides/index.css
+++ b/overrides/index.css
@@ -260,8 +260,8 @@
   justify-content: center;
 }
 .home-details1 {
-  width: 100%;
-  height: 989px;
+  width: 40%;
+  height: 1200px;
   display: flex;
   max-width: var(--dl-size-size-maxwidth);
   align-items: center;
@@ -273,7 +273,7 @@
 }
 .home-container03 {
   flex: 1;
-  width: 870px;
+  width: 40%;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
@@ -450,7 +450,7 @@
   flex: 0 0 auto;
   width: auto;
   height: auto;
-  display: flex;
+  display: none;
   align-items: flex-start;
   justify-content: center;
 }
@@ -525,8 +525,8 @@
     line-height: 1.6;
   }
   .home-details1 {
-    width: 100%;
-    height: 839px;
+    width: 40%;
+    height: 1200px;
     max-width: 100%;
     padding-top: var(--dl-space-space-sixunits);
     padding-left: var(--dl-space-space-sixunits);
@@ -534,7 +534,7 @@
     padding-bottom: var(--dl-space-space-sixunits);
   }
   .home-container03 {
-    width: 100%;
+    width: 40%;
   }
   .home-details-heading {
     width: 100%;
@@ -622,7 +622,18 @@
   .home-container12 {
     flex-direction: column;
   }
+  .home-container03{
+    width: 100%;
+  }
+
+  .home-details1{
+    width: 100%;
+  }
+  .code-comp{
+    position: inherit;
+  }
 }
+
 @media(max-width: 767px) {
   .home-header {
     padding-left: var(--dl-space-space-twounits);
@@ -683,6 +694,16 @@
   .home-container12 {
     flex-direction: column;
   }
+  .home-container03{
+    width: 100%;
+  }
+
+  .home-details1{
+    width: 100%;
+  }
+  .code-comp{
+    position:relative;
+  }
 }
 @media(max-width: 479px) {
   .home-header {
@@ -707,9 +728,16 @@
     margin-top: var(--dl-space-space-unit);
     margin-left: 0px;
   }
-  .home-container03 {
+  .home-container03{
     width: 100%;
   }
+
+  .home-details1{
+    width: 100%;
+  }
+  .code-comp{
+    position:relative;
+  }
   .home-features {
     padding-top: var(--dl-space-space-twounits);
     padding-left: var(--dl-space-space-unit);
diff --git a/overrides/index.html b/overrides/index.html
index 32a2b8ef..f4ad46d2 100644
--- a/overrides/index.html
+++ b/overrides/index.html
@@ -143,17 +143,17 @@ <h1 class="home-hero-heading heading1">Lighter</h1>
                 <button class="home-hero-button2 button" onclick="location.href='https://github.com/project-lighter/lighter'" style="font-size:24px">
                  <i class="fa fa-github"></i>
 
-                  Github&nbsp;→
+                  Github
                 </button>
               </div>
             </div>
           </div>
         </div>
         <div class="home-details">
-          <div class="home-details1" style="width: 39%;">
+          <div class="home-details1">
             <div class="home-container03">
               <h2 class="home-details-heading heading2">
-                <span>Say goodbye to messy scripts and notebooks.</span>
+                <span>Say goodbye to messy scripts and forgetting parameters.</span>
                 <br />
                 <br />
               </h2>
@@ -162,18 +162,23 @@ <h2 class="home-details-heading heading2">
                 Lighter is here to help you organize your experiments and make
                 sense of what you ran (even years ago). 
                 <br/><br/>
-                Join the community of reproducibility and
-                transparency!!
+                Join us in our reproducibility and
+                transparency journey!!
               </span>
+              <button id="toggleButton">See how we compare&nbsp;→</button>
+
             </div>
           </div>
-          <div class="code-comp" style="width: 60%;">
-                <img id="before-code" src="assets/images/PL_demo.png" class="code">
-               </img>
-               <img id="after-code" src="assets/images/Lighter_demo.png" class="code">
-              </img>
+          <div class="code-comp">
+            <img id="before-code" src="assets/images/PL_demo.png" class="code visible">
+           </img>
+           <img id="after-code" src="assets/images/Lighter_demo.png" class="code hidden">
+          </img>
           </div>
-        </div>
+
+      </div>
+    
+
         <div class="home-features">
           <h1 class="home-text07">
             <span>Features</span>
@@ -328,5 +333,32 @@ <h2 class="feature-card4-text"><span>Lorem ipsum</span></h2>
       data-section-id="navbar"
       src="https://unpkg.com/@teleporthq/teleport-custom-scripts"
     ></script>
+    <script>
+      document.getElementById('toggleButton').addEventListener('click', function() {
+        var beforeCode = document.getElementById('before-code');
+        var afterCode = document.getElementById('after-code');
+        var button = document.getElementById('toggleButton');
+      
+        if (beforeCode.classList.contains('visible')) {
+          beforeCode.classList.remove('visible');
+          beforeCode.classList.add('hidden');
+          afterCode.classList.remove('hidden');
+          afterCode.classList.add('visible');
+          button.style.backgroundColor = "#792EE5";
+          button.textContent = "Compare PL→";
+        } else {
+          beforeCode.classList.add('visible');
+          beforeCode.classList.remove('hidden');
+          afterCode.classList.add('hidden');
+          afterCode.classList.remove('visible');
+          button.style.backgroundColor = "#469AA3";
+          button.textContent = "Compare Lighter →";
+
+
+
+        }
+      });
+      
+    </script>
   </body>
 </html>
diff --git a/overrides/style.css b/overrides/style.css
index 1368af10..c5a237dc 100644
--- a/overrides/style.css
+++ b/overrides/style.css
@@ -121,36 +121,34 @@
 .code-comp{
   display: flex;
   justify-content: center;
+  width: 60%;
   align-items: center;
   margin: 0;
+  background-color: #f5f5f5;
 }
 
 .code {
   color: #fff;
-  height: 100%;
-  padding: 10px;
-  border-radius: 10px;
-  position: absolute; /* Changed from absolute to relative */
-  opacity: 0;
+  width: 50%;
+  position: absolute;
 }
 
-/* Start with the before code visible */
-#before-code {
-  opacity: 1;
+#before-code, #after-code {
+  transition: opacity 2.5s ease-in-out;
 }
 
-/* Animation */
-@keyframes fadeOutFadeIn {
-  0%, 100% { opacity: 0; }
-  50% { opacity: 1; } /* Extend the time each section stays fully visible */
+.visible {
+  opacity: 1;
 }
 
-/* Trigger the animation automatically with an infinite loop */
-#before-code, #after-code {
-  animation: fadeOutFadeIn 8s infinite ease-in-out; /* Adding ease-in-out for smoother transition */
+.hidden {
+  opacity: 0;
+  pointer-events: none; /* Prevent interaction with the hidden element */
 }
 
-/* Set delay for the after code to start appearing */
-#after-code {
-  animation-delay: 4s; /* Adjust delay to match the new keyframe percentages */
-}
+#toggleButton{
+  background-color: #469AA3;
+  color: white;
+  border-radius: 20px;
+  padding: 20px;
+}
\ No newline at end of file
diff --git a/sitemap.xml.gz b/sitemap.xml.gz
index 06be299a..60a897e8 100644
Binary files a/sitemap.xml.gz and b/sitemap.xml.gz differ
diff --git a/style.css b/style.css
index 1368af10..c5a237dc 100644
--- a/style.css
+++ b/style.css
@@ -121,36 +121,34 @@
 .code-comp{
   display: flex;
   justify-content: center;
+  width: 60%;
   align-items: center;
   margin: 0;
+  background-color: #f5f5f5;
 }
 
 .code {
   color: #fff;
-  height: 100%;
-  padding: 10px;
-  border-radius: 10px;
-  position: absolute; /* Changed from absolute to relative */
-  opacity: 0;
+  width: 50%;
+  position: absolute;
 }
 
-/* Start with the before code visible */
-#before-code {
-  opacity: 1;
+#before-code, #after-code {
+  transition: opacity 2.5s ease-in-out;
 }
 
-/* Animation */
-@keyframes fadeOutFadeIn {
-  0%, 100% { opacity: 0; }
-  50% { opacity: 1; } /* Extend the time each section stays fully visible */
+.visible {
+  opacity: 1;
 }
 
-/* Trigger the animation automatically with an infinite loop */
-#before-code, #after-code {
-  animation: fadeOutFadeIn 8s infinite ease-in-out; /* Adding ease-in-out for smoother transition */
+.hidden {
+  opacity: 0;
+  pointer-events: none; /* Prevent interaction with the hidden element */
 }
 
-/* Set delay for the after code to start appearing */
-#after-code {
-  animation-delay: 4s; /* Adjust delay to match the new keyframe percentages */
-}
+#toggleButton{
+  background-color: #469AA3;
+  color: white;
+  border-radius: 20px;
+  padding: 20px;
+}
\ No newline at end of file