diff --git a/pages/index.tsx b/pages/index.tsx
index 512d2d9..003e7ce 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -109,48 +109,6 @@ const Home = ({
             </div>
           </div>
           {/* End of Description */}
-          {/* Start of Quotes */}
-          <div
-            data-aos={isMobile ? 'fade' : 'fade-up'}
-            className={styles.quotes}
-          >
-            <h1>HEAR FROM US</h1>
-            <div className={[styles.carousel, styles.quoteCarousel].join(' ')}>
-              <QuoteSlideshow
-                height={450}
-                data={execQuotes}
-                homeLeftArrow={styles.homeLeftArrow}
-                homeRightArrow={styles.homeRightArrow}
-              />
-            </div>
-          </div>
-          {/* End of Quotes */}
-          {/* Start of Statistics */}
-          <div className={styles.stats}>
-            <Image
-              src="/stats-background-1.png"
-              className={styles.statsBackground}
-              alt="banner"
-              fill
-            />
-            <div>
-              <div data-aos="fade" className={styles.number}>
-                <div>
-                  <span>74</span>
-                  <p>Team Members</p>
-                </div>
-                <div>
-                  <span>32</span>
-                  <p>Sponsors</p>
-                </div>
-                <div>
-                  <span>3507</span>
-                  <p>Facebook Followers</p>
-                </div>
-              </div>
-            </div>
-          </div>
-          {/* End of Statistics */}
           {/* Start of What we've been up to */}
           <div
             data-aos={isMobile ? 'fade' : 'fade-up'}
@@ -204,6 +162,48 @@ const Home = ({
             </button>
           </div>
           {/* End of Publications */}
+          {/* Start of Statistics */}
+          <div className={styles.stats}>
+            <Image
+              src="/stats-background-1.png"
+              className={styles.statsBackground}
+              alt="banner"
+              fill
+            />
+            <div>
+              <div data-aos="fade" className={styles.number}>
+                <div>
+                  <span>74</span>
+                  <p>Team Members</p>
+                </div>
+                <div>
+                  <span>32</span>
+                  <p>Sponsors</p>
+                </div>
+                <div>
+                  <span>3507</span>
+                  <p>Facebook Followers</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          {/* End of Statistics */}
+          {/* Start of Quotes */}
+          <div
+            data-aos={isMobile ? 'fade' : 'fade-up'}
+            className={styles.quotes}
+          >
+            <h1>HEAR FROM US</h1>
+            <div className={[styles.carousel, styles.quoteCarousel].join(' ')}>
+              <QuoteSlideshow
+                height={450}
+                data={execQuotes}
+                homeLeftArrow={styles.homeLeftArrow}
+                homeRightArrow={styles.homeRightArrow}
+              />
+            </div>
+          </div>
+          {/* End of Quotes */}
           {/* Start of Sponsors & Affliations */}
           <div
             data-aos={isMobile ? 'fade' : 'fade-up'}
diff --git a/styles/Home.module.css b/styles/Home.module.css
index 500603a..d30311b 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -565,7 +565,6 @@ div .headline {
   margin: auto;
   padding-top: 100px;
   padding-bottom: 100px;
-  background-color: var(--section);
 }
 
 .publications h1 {
@@ -591,9 +590,9 @@ div .headline {
 .pubBtn {
   border: 1.5px solid var(--red);
   box-sizing: border-box;
-  background-color: var(--section);
   padding: 6px 6px;
   transition: 0.3s;
+  background-color: #fff;
 }
 
 .pubBtn a {
@@ -626,13 +625,9 @@ div .headline {
 
 /*---Dark mode---*/
 @media (prefers-color-scheme: dark) {
-  .publications {
-    background-color: #323235;
-  }
-
   .pubBtn {
     border: 1.5px solid var(--red);
-    background-color: #323235;
+    background-color: #202124;
   }
 
   .pubBtn:hover {
@@ -646,6 +641,7 @@ div .headline {
   margin: auto;
   padding-top: 100px;
   padding-bottom: 60px;
+  background-color: var(--section);
 }
 
 .beenUpTo h1 {
@@ -676,6 +672,13 @@ div .headline {
   margin: 0 auto;
 }
 
+/*---Dark mode---*/
+@media (prefers-color-scheme: dark) {
+  .beenUpTo {
+    background-color: #323235;
+  }
+}
+
 /*-----------------------------Responsive Mobile Design--------------------------*/
 @media only screen and (max-width: 1200px) {
   .number {
diff --git a/styles/HomeEventsCard.module.css b/styles/HomeEventsCard.module.css
index 2cf888b..c479cd5 100644
--- a/styles/HomeEventsCard.module.css
+++ b/styles/HomeEventsCard.module.css
@@ -2,7 +2,7 @@
 
 .card {
   display: inline-block;
-  background-color: #f5f5f5;
+  background-color: #fff;
   border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   width: 320px;
@@ -83,6 +83,13 @@
   background-color: #D64745;
 }
 
+/*---Dark mode---*/
+@media (prefers-color-scheme: dark) {
+  .card {
+    background-color: #ccc;
+  }
+}
+
 /* ------------ Responsive mobile design ------------ */
 @media only screen and (max-width: 850px) {
   .card {