diff --git a/.replit b/.replit
index ca3f107..36cd6ae 100644
--- a/.replit
+++ b/.replit
@@ -7,3 +7,8 @@ channel = "stable-24_05"
 [deployment]
 run = ["sh", "-c", "python3 app.py"]
 deploymentTarget = "cloudrun"
+
+[[ports]]
+localPort = 5000
+externalPort = 3000
+exposeLocalhost = true
diff --git a/static/css/styles.css b/static/css/styles.css
index 12ca372..409dba5 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1,43 +1,129 @@
 body {
     margin: 0;
-    margin-top:0;
+    margin-top: 0;
     /* background-color: #2B2A2B; */
-    background-color: whitesmoke;
+    background-color: black;
     cursor: default;
     user-select: none;
+    color: white;
 }
 
-.nav-container {
-    z-index: 1000000000;
-    list-style-type: none;
-    margin: 0;
+.menu-button {
+    display: none;
+    /* border: 0.25vh solid white; */
+    background: none;
+    color: white;
+    font-size: 1.5rem;
+    width: 13vw;
+    /* Equal width and height */
+    height: 13vw;
+    text-align: center;
     padding: 0;
-    background: rgba(0, 0, 0, 0.5);
-    color: #e5e5e5d0;
-    display: flex;
+    /* Remove padding to keep it a perfect circle */
+    border-radius: 50%;
+    /* Makes it circular */
+    cursor: pointer;
+    position: fixed;
+    z-index: 1000000000000000000;
+    top: 4%;
+    left: 50%;
+    transform: translateX(-50%);
     justify-content: center;
     align-items: center;
+    transition: .5s;
+    background: rgba(0, 0, 0, 0.5);
+    border: none;
+    backdrop-filter: blur(5px);
+    /* Centers the icon inside */
+}
+
+.nav-side {
+    display: none;
+    position: fixed;
+    z-index: 10000;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, .85);
+    backdrop-filter: blur(5px);
+    opacity: 1;
+    /* display: flex; */
+    flex-direction: column;
+    text-decoration: none;
+    list-style-type: none;
+    justify-content: center;
+    align-items: center;
+    overflow-y: auto;
+}
+
+.nav-side ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    text-decoration: none;
+    text-align: center;
+}
+
+.nav-side ul li a {
+    text-decoration: none;
+    color: white;
+    font-size: 1.25rem;
+    font-family: sans-serif;
+}
+
+.nav-side ul li {
+    margin-bottom: 3vh;
+}
+
+.menu-button:hover {
+    background-color: white;
+    color: black;
+}
+
+nav {
     position: fixed;
     top: 0;
     width: 100%;
-    backdrop-filter: blur(5px);
-    height: 12vh;
-    font-family: Sans-Serif;
-    font-size: 1.10rem;
-    border-bottom: .5px solid white;
-    overflow-y: hidden;
+    padding-top: 1%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
 }
 
-.nav-item-center {
-    display: inline-block;
-    margin-right: 2%;
-    margin-left: 2%;
+.nav-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    list-style: none;
+    gap: 1%;
+    padding: 1%;
+    width: 56vw;
+    height: 6vh;
+    border-radius: 50vh;
+    background-color: rgba(0, 0, 0, .25);
+    backdrop-filter: blur(10px);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    /* border: solid 1px;
+    border-color: white; */
 }
 
+
+
 @media only screen and (max-width: 850px) {
+
+    nav {
+        display: none;
+    }
+
+    .menu-button {
+        display: flex;
+        display: block !important;
+    }
+
     nav {
         padding: 0;
     }
+
     .nav-container {
         display: flex;
         align-items: center;
@@ -46,69 +132,69 @@ body {
     }
 
     .header {
-        font-size: 1rem!important;
+        font-size: 1rem !important;
     }
 
     .header2 {
-        font-size: 1rem!important;
+        font-size: 1rem !important;
     }
 
     .sub-header {
-        font-size: 2.5rem!important;
+        font-size: 2.5rem !important;
     }
 
     .sub-content {
-        font-size: 1.5rem!important;
+        font-size: 1.5rem !important;
     }
 
     .stats-cards {
-        flex-direction: column!important;
+        flex-direction: column !important;
     }
 
     .stats-card-header {
-        font-size: 3rem!important;
+        font-size: 3rem !important;
     }
 
     .stats-card-info {
-        font-size: 1.35rem!important;
+        font-size: 1.35rem !important;
     }
 
     .stats-button {
-        font-size: 1.125rem!important;
-        width: 50%!important;
-        transform: translateX(50%)!important;
-        margin-top: 5%!important;
-        margin-bottom: 5%!important;
+        font-size: 1.125rem !important;
+        width: 50% !important;
+        transform: translateX(50%) !important;
+        margin-top: 5% !important;
+        margin-bottom: 5% !important;
     }
 
     .bottom-center-button {
-        width: 50%!important;
-        font-size: 1.125rem!important;
+        width: 50% !important;
+        font-size: 1.125rem !important;
     }
 
     .sponsors-container {
-        flex-direction: column!important;
+        flex-direction: column !important;
     }
 
     .sponsors-card {
-        margin-top: 3%!important;
-        max-width: 75%!important;
-        max-height: 45%!important;
-        margin-bottom: 15%!important;
+        margin-top: 3% !important;
+        max-width: 85vw !important;
+        max-height: 25vw !important;
+        margin-bottom: 15% !important;
     }
 
     #sponsors-more-button {
-        width: 50%!important;
-        font-size: 1.125rem!important;
-        transform: translateX(-25%)!important;
+        width: 50% !important;
+        font-size: 1.125rem !important;
+        transform: translateX(-25%) !important;
     }
 
     .stats-container {
-        margin-top: 10vh!important;
+        margin-top: 10vh !important;
     }
 
     .info {
-        font-size: 1rem!important;
+        font-size: 1rem !important;
     }
 }
 
@@ -118,40 +204,35 @@ body {
     }
 }
 
-.nav-item-left {
-    float: left;
-    position: absolute;
-    margin-right: 100%;
-    margin-left: 15%;
-    transition: .25s;
+.nav-container li {
+    width: 33%;
+    text-align: center;
+    padding: 2%;
+    transition: 0.25s;
+    border-radius: 5px;
+    font-size: 100%;
 }
 
-.nav-item-left:hover {
-    transform: scale(1.025);
-}
-
-.nav-item {
-    display: flex;
-    animation-duration: 1s;
-    align-items: center;
-    color: white;
-}
-
-.nav-item-center a {
+.nav-container li a {
+    color: rgb(125, 125, 125);
     text-decoration: none;
-    color: rgba(255, 255, 255, 0.5);
-    transition-duration: .25s;
+    font-family: sans-serif;
+    transition: 0.25s;
 }
 
-.nav-item-center a:hover {
-    color: white;
+.nav-item-center:hover {
+    background-color: rgba(35, 35, 35, 0.5);
+}
+
+.nav-item-center:hover a {
+    color: #fff;
 }
 
 .header-line {
     padding-top: 100px;
     display: flex;
     align-items: center;
-  }
+}
 
 .header-line h2 {
     margin: 0;
@@ -163,7 +244,7 @@ body {
 .header-line .line {
     flex-grow: 1;
     height: 2px;
-    background-color: #333333;
+    background-color: white;
 }
 
 .contact {
@@ -177,10 +258,13 @@ body {
 }
 
 #logo {
-    height: 7vh;
+    height: 6vh;
+    border-right: solid 1px #787878;
 }
 
+
 .header-container {
+    color: white;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -191,6 +275,7 @@ body {
 }
 
 .header-container4 {
+    color: white;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -202,21 +287,27 @@ body {
 
 .line {
     flex: 1;
-    border-top: 0.5vh solid #000;
+    border-top: 0.5vh solid white;
+    opacity: 0.5;
 }
+
 .header {
+    color: white;
     padding: 0 1vh;
     margin: 0;
     font-family: Sans-Serif;
     font-size: 1.5rem;
+    opacity: 0.5;
     /* 1.5vw */
 }
 
 .header2 {
+    color: white;
     padding-right: 1vh;
     margin: 0;
     font-family: Sans-Serif;
-    font-size: 1.5vw;
+    font-size: 1.5rem;
+    opacity: 0.5;
 }
 
 .contact-container {
@@ -292,7 +383,7 @@ body {
 .card {
     width: 30%;
     height: 50vh;
-    background-color: whitesmoke;
+    background-color: black;
     border-radius: 1.5vh;
     overflow: hidden;
     margin-bottom: 4%;
@@ -300,7 +391,7 @@ body {
     display: inline-block;
     position: relative;
     transition: transform 0.3s ease;
-    border: black solid .25vh;
+    border: white solid .25vh;
 }
 
 .card-content {
@@ -315,6 +406,7 @@ body {
     max-height: 100%;
     height: auto;
     transition: transform 0.3s ease;
+    filter: brightness(0) invert(1);
 }
 
 .card:hover img {
@@ -342,7 +434,7 @@ body {
 
 .bg {
     width: 100%;
-    background-color: white;
+    background-color: black;
     height: 100vh;
     display: flex;
     justify-content: center;
@@ -350,17 +442,30 @@ body {
 }
 
 .bg img {
-    max-width: 75%;
-    max-height: 75%;
-    object-fit: cover;
-    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    /* object-fit: cover;
+    overflow: hidden; */
     transition: .5s;
 }
 
-.bg img:hover {
-    transform: scale(1.05);
+.bg::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 25%;
+    /* Adjust based on how much gradient you need */
+    background: linear-gradient(to top, black, rgba(5, 8, 28, 0));
+    pointer-events: none;
+    /* Ensures the gradient doesn’t block interactions */
 }
 
+/* .bg img:hover {
+    transform: scale(1.05);
+}
+ */
 .header-container2 {
     display: flex;
     /* align-items: center;
@@ -370,6 +475,7 @@ body {
     width: 100%;
     justify-content: center;
     align-items: center;
+    color: white;
 }
 
 .header-container6 {
@@ -381,6 +487,7 @@ body {
     width: 100%;
     justify-content: center;
     align-items: center;
+    color: white;
 }
 
 .home-info {
@@ -390,6 +497,7 @@ body {
     display: block;
     margin: auto;
     padding-bottom: 6%;
+    color: white;
 
 }
 
@@ -397,6 +505,7 @@ body {
     padding: 0 1vh;
     font-family: Sans-Serif;
     font-size: 4rem;
+    color: white;
     font-weight: 100;
 }
 
@@ -409,7 +518,7 @@ body {
 }
 
 .stats-container {
-    border: 0.25vh black solid;
+    border: 0.25vh white solid;
     width: 100%;
     border-radius: 1.5vh;
     margin-top: 8%;
@@ -426,12 +535,13 @@ body {
     width: 99%;
     justify-content: center;
     align-items: center;
-    color: black;
+    color: white;
 }
 
 .line2 {
     flex: 1;
-    border-top: 0.5vh solid black;
+    border-top: 0.5vh solid white;
+    opacity: 0.5;
 }
 
 .stats-cards {
@@ -447,13 +557,13 @@ body {
 }
 
 .stats-card {
-    margin:0;
+    margin: 0;
 }
 
 .stats-card-header {
     font-family: Sans-Serif;
     font-size: 4rem;
-    color: black;
+    color: white;
     text-align: center;
     transition: 0.1s;
 }
@@ -464,7 +574,7 @@ body {
     margin: 0;
     font-family: Sans-Serif;
     font-size: 1.5rem;
-    color: rgba(0, 0, 0, 0.75);
+    color: rgba(255, 255, 255, 0.75);
     padding-bottom: 5%;
 }
 
@@ -488,7 +598,7 @@ body {
 .sponsors-card {
     max-width: 15%;
     max-height: 15%;
-    filter: brightness(0) drop-shadow(0 0 0.75rem rgb(166, 166, 166));
+    filter: brightness(0) invert(1) drop-shadow(0 0 0.75rem rgb(97, 97, 97));
     flex: 1 1 calc(25% - 10px);
     margin-bottom: 10px;
 }
@@ -500,7 +610,7 @@ body {
     margin: auto;
     position: relative;
     margin: 0;
-    padding:0;
+    padding: 0;
     margin-top: 5%;
 }
 
@@ -514,18 +624,18 @@ body {
     font-family: Sans-Serif;
     border-radius: 100vh;
     border: none;
-    color: black;
+    color: white;
     width: 25%;
     height: 15%;
-    border: solid black 0.25vh;
+    border: solid white 0.25vh;
     background-color: rgba(245, 245, 245, 0);
     left: 37%;
     transition: 0.5s;
 }
 
 #sponsors-more-button:hover {
-    background-color: black;
-    color: white;
+    background-color: white;
+    color: black;
     cursor: pointer;
 }
 
@@ -549,7 +659,7 @@ body {
 .card-sponsors {
     width: 23%;
     height: 50vh;
-    background-color: whitesmoke;
+    background-color: black;
     border-radius: 1.5vh;
     overflow: hidden;
     margin-bottom: 4%;
@@ -557,7 +667,7 @@ body {
     /* display: inline-block; */
     position: relative;
     transition: transform 0.3s ease;
-    border: black solid .25vh;
+    border: white solid .25vh;
 }
 
 .card-content-sponsors {
@@ -572,7 +682,7 @@ body {
     max-height: 100%;
     height: auto;
     transition: transform 0.3s ease;
-    filter: brightness(0);
+    filter: brightness(0) invert(1);
     opacity: 0.5;
 }
 
@@ -609,7 +719,7 @@ body {
 
 .meet-our-team-container {
     position: relative;
-    border: 0.25vh black solid;
+    border: 0.25vh white solid;
     width: 100%;
     border-radius: 1.5vh;
     margin-top: 10%;
@@ -634,10 +744,12 @@ body {
 .meet-our-team-container::before {
     content: '';
     position: absolute;
-    bottom: 0; /* Keep the gradient at the bottom */
+    bottom: 0;
+    /* Keep the gradient at the bottom */
     left: 0;
     width: 100%;
-    height: 100%; /* Adjust this value to control the gradient height */
+    height: 100%;
+    /* Adjust this value to control the gradient height */
     background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
     z-index: 1;
     pointer-events: none;
@@ -675,16 +787,17 @@ body {
     color: black;
     cursor: pointer;
 }
+
 /* Span stuff */
 
 .stats-button {
-    color: black;
+    color: white;
     font-size: 1.25rem;
     font-family: Sans-Serif;
     border-radius: 100vh;
     width: 25%;
     height: 50%;
-    border: solid black 0.25vh;
+    border: solid white 0.25vh;
     background-color: rgba(0, 0, 0, 0);
     z-index: 2;
     cursor: pointer;
@@ -696,9 +809,11 @@ body {
     padding: 1%;
 }
 
+
+
 .stats-button:hover {
-    color:white;
-    background-color: black;
+    color: black;
+    background-color: white;
 }
 
 .team-info {
@@ -716,7 +831,7 @@ body {
     align-items: center;
     justify-content: center;
     text-align: center;
-    border-top: black 0.25vh solid;
+    border-top: white 0.25vh solid;
 }
 
 .footer-content {
@@ -731,7 +846,7 @@ body {
 }
 
 .link-to-here {
-    color: black;
+    color: white;
     font-weight: bold;
     text-decoration: underline;
 }
@@ -746,13 +861,14 @@ body {
     margin: auto;
     padding-bottom: 5%;
     gap: 3%;
-    border-top: black 0.25vh solid;
-    border-right: black 0.25vh solid;
-    border-left: black 0.25vh solid;
+    border-top: white 0.25vh solid;
+    border-right: white 0.25vh solid;
+    border-left: white 0.25vh solid;
     border-top-right-radius: 1.5vh;
     border-top-left-radius: 1.5vh;
     padding-top: 2%;
 }
+
 @media only screen and (max-width: 850px) {
     .card-sponsors {
         width: 100%;
@@ -788,7 +904,7 @@ body {
 .member-image {
     width: 15vh;
     height: 15vh;
-    border: 0.25vh black solid;
+    border: 0.25vh white solid;
     border-radius: 100vh;
     overflow: hidden;
     transition: 1s;
@@ -845,12 +961,12 @@ body {
 .sidebar a {
     text-decoration: none;
     font-size: 4vh;
-    color: black;
+    color: white;
     display: block;
     font-family: sans-serif;
-    opacity: .25;
+    opacity: .5;
     transition: .5s;
-    filter: drop-shadow(0 0 1rem rgb(0, 0, 0));
+    filter: drop-shadow(0 0 1rem rgb(102, 102, 102));
     width: 100%;
     box-sizing: border-box;
     position: relative;
@@ -865,6 +981,7 @@ body {
 }
 
 .competitions-container {
+    color: white;
     margin-top: 8vh;
     margin-left: 25%;
     width: 100%;
@@ -911,6 +1028,21 @@ body {
     position: relative;
 }
 
+.competition-card-img {
+    width: 100%;
+    margin-top: 1%;
+    max-height: 40vh;
+    border: 0.25vh solid white;
+    border-radius: 10px;
+    overflow: hidden;
+}
+
+.competition-card-img img {
+    width: 100%;
+    object-fit: cover;
+    filter: brightness(0.8);
+}
+
 .competition-date {
     opacity: .5;
 }
@@ -955,134 +1087,252 @@ span.gallary {
 
 span.emoji::before,
 span.emoji::after {
-  content: "";
-  position: absolute;
-  top: -16px;
-  left: -8px;
-  opacity: 0;
-  transform: scale(0.5) rotate(-30deg);
-  transition: opacity 120ms ease-out, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5);
+    content: "";
+    position: absolute;
+    top: -16px;
+    left: -8px;
+    opacity: 0;
+    transform: scale(0.5) rotate(-30deg);
+    transition: opacity 120ms ease-out, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.5);
 }
 
 span.emoji::after {
-  top: revert;
-  left: revert;
-  bottom: -16px;
-  right: -8px;
+    top: revert;
+    left: revert;
+    bottom: -16px;
+    right: -8px;
 }
 
 span.contact::before,
 span.contact::after {
-  content: "📱";
-  font-size: 2.5vh;
-  top: -75%;
-  left: -10%;
+    content: "📱";
+    font-size: 2.5vh;
+    top: -75%;
+    left: -10%;
 }
 
 span.contact::after {
-  top: revert;
-  left: revert;
-  bottom: -60%;
-  right: -10%;
+    top: revert;
+    left: revert;
+    bottom: -60%;
+    right: -10%;
 }
 
 span.about::before,
 span.about::after {
-  content: "👋";
-  font-size: 2.5vh;
-  top: -75%;
-  left: -10%;
+    content: "👋";
+    font-size: 2.5vh;
+    top: -75%;
+    left: -10%;
 }
 
 span.about::after {
-  top: revert;
-  left: revert;
-  bottom: -60%;
-  right: -10%;
+    top: revert;
+    left: revert;
+    bottom: -60%;
+    right: -10%;
 }
 
 span.stats::before,
 span.stats::after {
-  content: "📊";
-  font-size: 2.5vh;
-  top: -75%;
-  left: -10%;
+    content: "📊";
+    font-size: 2.5vh;
+    top: -75%;
+    left: -10%;
 }
 
 span.stats::after {
-  top: revert;
-  left: revert;
-  bottom: -60%;
-  right: -10%;
+    top: revert;
+    left: revert;
+    bottom: -60%;
+    right: -10%;
 }
 
 span.gallary::before,
 span.gallary::after {
-  content: "📷";
-  font-size: 2.5vh;
-  top: -75%;
-  left: -10%;
+    content: "✊";
+    font-size: 2.5vh;
+    top: -75%;
+    left: -10%;
 }
 
 span.gallary::after {
-  top: revert;
-  left: revert;
-  bottom: -60%;
-  right: -10%;
+    top: revert;
+    left: revert;
+    bottom: -60%;
+    right: -10%;
 }
 
 span.sponsors::before,
 span.sponsors::after {
-  content: "❤️";
-  font-size: 2.5vh;
-  top: -75%;
-  left: -10%;
+    content: "❤️";
+    font-size: 2.5vh;
+    top: -75%;
+    left: -10%;
 }
 
 span.sponsors::after {
-  top: revert;
-  left: revert;
-  bottom: -60%;
-  right: -10%;
+    top: revert;
+    left: revert;
+    bottom: -60%;
+    right: -10%;
 }
 
 span.team::before,
 span.team::after {
-  content: "👥";
-  font-size: 2.5vh;
-  top: -75%;
-  left: -10%;
+    content: "👥";
+    font-size: 2.5vh;
+    top: -75%;
+    left: -10%;
 }
 
 span.team::after {
-  top: revert;
-  left: revert;
-  bottom: -60%;
-  right: -10%;
+    top: revert;
+    left: revert;
+    bottom: -60%;
+    right: -10%;
 }
 
 span.competitions::before,
 span.competitions::after {
-  content: "🥇";
-  font-size: 2.5vh;
-  top: -55%;
-  left: -10%;
+    content: "🥇";
+    font-size: 2.5vh;
+    top: -55%;
+    left: -10%;
 }
 
 span.competitions::after {
-  top: revert;
-  left: revert;
-  bottom: -55%;
-  right: -10%;
+    top: revert;
+    left: revert;
+    bottom: -55%;
+    right: -10%;
 }
 
 span.emoji:hover::before,
 span.emoji:hover::after {
-  transform: scale(1.2) rotate(0deg);
-  opacity: 1;
+    transform: scale(1.2) rotate(0deg);
+    opacity: 1;
 }
 
 span.emoji:active::before,
 span.emoji:active::after {
-  transform: scale(1) rotate(-2deg);
+    transform: scale(1) rotate(-2deg);
+}
+
+.about-section-imgp {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: 10%;
+    padding-bottom: 1%;
+    padding-right: 10%;
+}
+
+.about-section-imgp img {
+    max-width: 40%; /* Example size, adjust as needed */
+    max-height: 60%;
+    border-radius: 5px;
+    transition: .5s;
+    border: 2px white solid;
+}
+
+.about-section-imgp p {
+    flex: 1;
+}
+
+@media only screen and (min-width: 850px) {
+    .about-section-imgp p {
+        padding-left: 10%;
+    }
+    .about-section-imgp-l p {
+        padding-right: 10%;
+    }
+}
+
+
+.about-section-imgp-l {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: 10%;
+    padding-bottom: 1%;
+    padding-right: 10%;
+}
+
+.about-section-imgp-l img {
+    max-width: 40%; /* Example size, adjust as needed */
+    max-height: 60%;
+    border-radius: 5px;
+    transition: .5s;
+    border: 2px white solid;
+}
+
+.about-section-imgp img:hover {
+    transform: scale(1.025);
+}
+
+.about-section-imgp-l img:hover {
+    transform: scale(1.025);
+}
+
+.about-section-imgp-l p {
+    flex: 1;
+}
+
+@media only screen and (max-width: 850px) {
+    .about-section-imgp,
+    .about-section-imgp-l {
+        display: flex;
+        flex-direction: column; /* Stack image and text vertically */
+        align-items: center;
+        justify-content: flex-start; /* Align content to the top */
+        padding: 0;
+        margin: 0;
+        text-align: center;
+        margin-bottom: 5%;
+    }
+
+    .contact-content {
+        background-image: none;
+    }
+
+
+
+    .about-section-imgp img,
+    .about-section-imgp-l img {
+        max-width: 80vw; /* Image takes 80% of the viewport width */
+        max-height: auto;
+        width: 80%; /* Ensure the image scales properly */
+        margin-bottom: 10px; /* Adds some space between the image and the paragraph */
+        border-radius: 5px;
+        transition: .5s;
+    }
+
+    .about-section-imgp-l {
+        flex-direction: column-reverse;
+    }
+
+    .about-section-imgp-l img,
+    .about-section-imgp img{
+        min-width: 100%;
+        height: 75vh;
+        border-radius: 10px;
+        object-fit: cover;
+        overflow: hidden;
+        margin-bottom: 5%;
+    }
+
+    .about-section-imgp p,
+    .about-section-imgp-l p {
+        flex: 1;
+        padding: 0;
+        margin: 0;
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    .about-section-imgp img:hover,
+    .about-section-imgp-l img:hover {
+        transform: scale(1.025);
+    }
 }
\ No newline at end of file
diff --git a/static/images/abhi.png b/static/images/abhi.png
new file mode 100644
index 0000000..5106a41
Binary files /dev/null and b/static/images/abhi.png differ
diff --git a/static/images/earlybird.png b/static/images/earlybird.png
new file mode 100644
index 0000000..ee131a0
Binary files /dev/null and b/static/images/earlybird.png differ
diff --git a/static/images/favicon.png b/static/images/favicon.png
index 8701411..f6ff759 100644
Binary files a/static/images/favicon.png and b/static/images/favicon.png differ
diff --git a/static/images/logo2.png b/static/images/logo2.png
new file mode 100644
index 0000000..0150e1f
Binary files /dev/null and b/static/images/logo2.png differ
diff --git a/static/images/main1.png b/static/images/main1.png
new file mode 100644
index 0000000..9c4bf00
Binary files /dev/null and b/static/images/main1.png differ
diff --git a/static/images/new-keshav.png b/static/images/new-keshav.png
new file mode 100644
index 0000000..2c23645
Binary files /dev/null and b/static/images/new-keshav.png differ
diff --git a/static/images/robo.png b/static/images/robo.png
new file mode 100644
index 0000000..af1bf32
Binary files /dev/null and b/static/images/robo.png differ
diff --git a/static/images/team.png b/static/images/team.png
new file mode 100644
index 0000000..744100b
Binary files /dev/null and b/static/images/team.png differ
diff --git a/static/images/tech.gif b/static/images/tech.gif
new file mode 100644
index 0000000..1e5eae8
Binary files /dev/null and b/static/images/tech.gif differ
diff --git a/static/images/tech2.gif b/static/images/tech2.gif
new file mode 100644
index 0000000..5810397
Binary files /dev/null and b/static/images/tech2.gif differ
diff --git a/templates/base.html b/templates/base.html
index 98fbcc3..449ef3e 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -14,9 +15,9 @@
     <nav>
         <ul class="nav-container">
             <li class="nav-item-left">
-                <a href="/"><img id="logo" src="{{ url_for('static', filename='images/logo.png') }}"></a>
-            </li>  
-            
+                <a href="/"><img id="logo" src="{{ url_for('static', filename='images/logo2.png') }}"></a>
+            </li>
+
             <li class="nav-item-center">
                 <a href="/">Home</a>
             </li>
@@ -31,16 +32,47 @@
             </li>
             <li class="nav-item-center">
                 <a href="/contact">Contact</a>
-            </li>      
+            </li>
             <li class="nav-item-center">
                 <a href="https://hcb.hackclub.com/donations/start/technicalturbulence" target="_blank">Donate</a>
             </li>
         </ul>
     </nav>
+    <button class="menu-button">☰</button>
+    <div class="nav-side">
+        <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="/contributors">Contributors</a></li>
+            <li><a href="/competitions">Competitions</a></li>
+            <li><a href="/sponsors">Sponsors</a></li>
+            <li><a href="/contact">Contact</a></li>
+            <li><a href="https://hcb.hackclub.com/donations/start/technicalturbulence" target="_blank">Donate</a></li>
+        </ul>
+    </div>
+    <script>
+        const menuButton = document.querySelector('.menu-button');
+        const navSide = document.querySelector('.nav-side');
+        const navLinks = document.querySelectorAll('.nav-side a'); // Select all links inside nav-side
 
+        menuButton.addEventListener('click', () => {
+            if (navSide.style.display === 'none' || navSide.style.display === '') {
+                navSide.style.display = 'flex'; // Show the nav-side with flex
+            } else {
+                navSide.style.display = 'none'; // Hide the nav-side
+            }
+        });
+
+        // Add event listeners to each link
+        navLinks.forEach(link => {
+            link.addEventListener('click', () => {
+                navSide.style.display = 'none'; // Hide the nav-side
+            });
+        });
+    </script>
     <!-- This is where child templates will insert their content -->
     {% block content %}
     {% endblock %}
 
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/templates/competitions.html b/templates/competitions.html
index 318b7e7..1ce26bb 100644
--- a/templates/competitions.html
+++ b/templates/competitions.html
@@ -20,6 +20,30 @@
                 <div class="line"></div>
             </div>
 
+            <h1 id="2024" class="competition-year">2024</h1>
+
+            <div class="competition-card">
+                <!-- <div class="competition-card-img">
+                <img src="{{ url_for('static', filename='images/earlybird.png') }}">
+                </div> -->
+                <div class="competition-header">
+                    <p class="competition-name">FiT-North Early Bird Scrimmage</p>
+                    <p class="middle-dot">·</p>
+                    <p class="competition-date">10/6/2024</p>
+                </div>
+
+                <p class="competition-subtitle">Description</p>
+
+                <p class="competition-description">We participated in the FiT-North Early Bird Scrimmage where we won two recognitions.</p>
+
+                <p class="competition-subtitle">Awards</p>
+
+                <ul class="competition-awards">
+                    <li>Innovate Award sponsored by RTX</li>
+                    <li>Design Award 2nd Place</li>
+                </ul>
+            </div>
+
             <h1 id="2023" class="competition-year">2023</h1>
 
             <div class="competition-card">
diff --git a/templates/contact.html b/templates/contact.html
index 25f2a9f..66b5554 100644
--- a/templates/contact.html
+++ b/templates/contact.html
@@ -11,7 +11,7 @@
                 <h1 class="header"><span class="emoji contact">CONTACT US</span></h1>
                 <div class="line"></div>
             </div>        
-            <p class="info">you can find us on several platforms!</p>
+            <p class="info">🌐 you can find us on several platforms! 🌐</p>
         <div class="contact-container">
             <div class="card-container">
                 <a href="https://www.instagram.com/technicalturbulence23344/" target="_blank" class="card">
diff --git a/templates/contributors.html b/templates/contributors.html
index 1b1385d..5498490 100644
--- a/templates/contributors.html
+++ b/templates/contributors.html
@@ -41,7 +41,7 @@
             <h1 class="header"><span class="emoji team">OUR TEAM</span></h1>
             <div class="line"></div>
         </div>        
-        <p class="info">meet our amazing team!</p>
+        <p class="info">⭐ meet our amazing team! ⭐</p>
 
         <div class="members-container">
 
diff --git a/templates/home.html b/templates/home.html
index 5746af6..6134536 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -7,15 +7,23 @@
 <body>
     <div class="home">
         <div class="bg">
-        <img src="{{ url_for('static', filename='images/storm.png') }}">
+        <img src="{{ url_for('static', filename='images/tech2.gif') }}">
+        <div class="border-triangle"></div>
         </div>
         <div class="home-info">
         <div class="header-container2">
             <h1 class="header"><span class="emoji about">ABOUT US</span></h1>
             <div class="line"></div>
         </div>
-        <h1 class="sub-header">Hello! We are Technical Turbulence.</h1>
-        <p class="sub-content">FTC Team 23344 Technical Turbulence is a team based in Plano, Texas. Our rookie year was 2023 and we hope to learn much more in the years to come. We want to grow our numbers and increase our outreach towards different communities so we can be the best that we can.</p>
+        <h1 class="sub-header">👋 Hello! We are Technical Turbulence.</h1>
+        <div class="about-section-imgp">
+            <img src="{{ url_for('static', filename='images/main1.png') }}">
+        <p class="sub-content">Team 23344, Technical Turbulence, is a community-based returning team situated around Plano and Frisco Texas, comprising nine members primarily consisting of sophomores from different high schools. Our rookie year was 2023 and we hope to learn much more in the years to come. We want to grow our numbers and increase our outreach towards different communities so we can be the best that we can.</p>
+        </div>
+        <div class="about-section-imgp-l">
+        <p class="sub-content">Since we are designated as veterans this year, our members bring substantial experience from their involvement with FTC 12900 Quantum Claw and 22201 The Edge Robotics. Operating from our dedicated garage workshop, we uphold the fundamental values of FIRST, integrating Gracious Professionalism into our daily endeavors. </p>
+            <img src="{{ url_for('static', filename='images/robo.png') }}">
+        </div>
         <div class="stats-container">
             <div class="header-container3">
                 <h1 class="header"><span class="emoji stats">OUR STATS</span></h1>
@@ -40,25 +48,29 @@
             <button class="stats-button" onclick="window.location.href = '{{ url_for('competitions') }}' ; ">View our log</button>
         </div>
 
-        <div class="meet-our-team-container">
-            <img id="meet-our-team" src="{{ url_for('static', filename='images/team.png') }}">
-            <button class="bottom-center-button" onclick="window.location.href = '{{ url_for('contributors') }}' ; ">Meet Our Team</button>
-        </div>
 
         <div class="header-container2">
-            <h1 class="header"><span class="emoji gallary">GALLERY</span></h1>
+            <h1 class="header"><span class="emoji gallary">OUR MISSION</span></h1>
             <div class="line"></div>
         </div>
 
-        <h1 class="sub-header">See what we've been up to.</h1>
-        <p class="sub-content">coming soon...</p>
+        <h1 class="sub-header">✊ One team, one goal.</h1>
+        <p class="sub-content">We aim to show kids that with teamwork, creativity, and persistence, anyone can design, build, and code robots. Our mission is part of an outreach initiative to guide kids toward STEM and skill-building opportunities in robotics and technology. Through this unifying goal, we want to empower young students to learn, grow, and join FTC in the future.</p>
 
+            <div class="meet-our-team-container">
+                <img id="meet-our-team" src="{{ url_for('static', filename='images/team.png') }}">
+                <button class="bottom-center-button" onclick="window.location.href = '{{ url_for('contributors') }}' ; ">Meet Our Team</button>
+            </div>
+            
         <div class="header-container2">
             <h1 class="header"><span class="emoji sponsors">SPONSORS</span></h1>
             <div class="line"></div>
         </div>
 
-        <h1 class="sub-header">And we couldn't have done it without...</h1>
+        <p class="sub-content">We, FTC team Technical Turbulence, want to inspire the next generation by sharing our journey in robotics and the exciting world of FTC. By demonstrating our robot and showcasing the engineering behind it, we hope to spark curiosity in young minds about STEM fields.
+</p>
+
+        <h1 class="sub-header">❤️ And we couldn't have done it without...</h1>
 
         <div class="sponsors-container">
                 <img class="sponsors-card" src="{{ url_for('static', filename='images/ray.png') }}">
diff --git a/templates/sponsors.html b/templates/sponsors.html
index ff130b6..b4a1cb0 100644
--- a/templates/sponsors.html
+++ b/templates/sponsors.html
@@ -11,7 +11,7 @@
             <h1 class="header"><span class="emoji sponsors">OUR SPONSORS</span></h1>
             <div class="line"></div>
         </div>        
-        <p class="info">companies of various sizes sponsor our initiatives.</p>
+        <p class="info">❤️ companies of various sizes sponsor our initiatives. ❤️</p>
         
         <div class="sponsors-container">
             <div class="card-container">