diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index d67d35d..3680536 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -19,6 +19,18 @@ main {
     scroll-behavior: smooth;
 }
 
+/* Mobile Base Styles */
+@media (max-width: 768px) {
+    html, body {
+        font-size: 18px;
+    }
+    
+    main {
+        margin: 10px;
+        margin-top: 70px;
+    }
+}
+
 a {
     color: var(--blue-clr)
 }
@@ -38,12 +50,43 @@ footer > div > p {
     margin: 10px 25px 10px 25px;
 }
 
+@media (max-width: 768px) {
+    footer > div {
+        flex-direction: column;
+        align-items: center;
+        gap: 10px;
+    }
+    
+    footer > div > p {
+        margin: 10px;
+        text-align: center;
+    }
+}
+
 .flag {
     height: 16px;
     vertical-align: middle;
 }
 
 /* ===== Container Layouts ===== */
+
+header {
+    background-color: var(--background-clr);
+    padding: 10px 0;
+    z-index: 100;
+}
+
+@media (max-width: 768px) {
+    header {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        padding: 5px 0;
+    }
+}
+
 .vert_container {
     display: flex;
 }
@@ -77,6 +120,17 @@ footer > div > p {
     align-items: center;
 }
 
+@media (max-width: 768px) {
+    .scroll_container {
+        scroll-snap-type: none;
+    }
+    
+    .scroll_section {
+        min-height: auto;
+        scroll-snap-align: none;
+    }
+}
+
 .scroll_section > h1 {
     color: var(--white-clr);
     font-size: 48px;
@@ -116,10 +170,47 @@ footer > div > p {
     color: var(--green-clr);
 }
 
+/* Mobile Navigation */
 @media (max-width: 1100px) {
     .nav_option p {
         display: none;
     }
+    
+    .nav_option {
+        font-size: 28px;
+        padding: 8px;
+        margin: 8px;
+    }
+    
+    .icon.small {
+        height: 36px;
+    }
+    
+    .icon.medium {
+        height: 60px;
+    }
+}
+
+@media (max-width: 768px) {
+    .nav_option {
+        font-size: 24px;
+        padding: 6px;
+        margin: 6px;
+    }
+    
+    .icon.small {
+        height: 30px;
+    }
+    
+    .icon.medium {
+        height: 50px;
+    }
+    
+    .vert_container.centered {
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 10px;
+    }
 }
 
 /* ===== Layout ===== */
@@ -159,6 +250,63 @@ footer > div > p {
         font-size: 26px;
         width: 400px;
     }
+    
+    .icon.large.toggle {
+        height: 200px;
+    }
+}
+
+@media (max-width: 992px) {
+    .title {
+        font-size: 80px;
+    }
+    
+    .tagline {
+        font-size: 22px;
+        width: 350px;
+    }
+    
+    .text-section {
+        margin-left: 30px;
+    }
+    
+    .section-title {
+        flex-direction: column;
+        align-items: center;
+        gap: 20px;
+    }
+}
+
+@media (max-width: 768px) {
+    .title {
+        font-size: 50px;
+    }
+    
+    .tagline {
+        font-size: 18px;
+        width: 100%;
+        flex-direction: column;
+    }
+    
+    .tagline .normal-text {
+        margin-left: 0;
+    }
+    
+    .icon.large.toggle {
+        height: 120px;
+    }
+    
+    .image.large {
+        width: 60%;
+    }
+    
+    .image.small {
+        width: 40%;
+    }
+    
+    .panel {
+        width: 100%;
+    }
 }
 
 .tagline {
@@ -193,6 +341,17 @@ footer > div > p {
     color: var(--green-clr)
 }
 
+@media (max-width: 768px) {
+    .content-box {
+        margin: 30px 10px 15px;
+        padding: 15px;
+    }
+    
+    .content-box .intro-text {
+        font-size: 20px;
+    }
+}
+
 .project-thumb {
     width: 150px;
     height: 150px;
@@ -329,6 +488,43 @@ footer > div > p {
     margin: 20px auto;
 }
 
+@media (max-width: 768px) {
+    .about-me-projects-grid {
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        gap: 15px;
+    }
+    
+    .project-card-new {
+        max-width: 100%;
+        min-width: 250px;
+    }
+    
+    .project-card-image-container {
+        height: 150px;
+    }
+    
+    .project-card-new.expanded .project-card-image-container {
+        height: 120px;
+    }
+    
+    .project-card-title {
+        font-size: 16px;
+    }
+    
+    .project-card-short-desc {
+        padding: 8px 15px 15px;
+        font-size: 14px;
+    }
+    
+    .project-card-content {
+        max-height: 300px;
+    }
+    
+    .project-card-content p {
+        font-size: 16px;
+    }
+}
+
 /* ===== Apps Section - Full Width Dashboard Carousel ===== */
 
 .apps-container {
@@ -348,6 +544,139 @@ footer > div > p {
     box-sizing: border-box;
 }
 
+@media (max-width: 1024px) {
+    .apps-container {
+        padding: 15px;
+        gap: 20px;
+    }
+    
+    .carousel-container-full {
+        padding: 30px 40px;
+    }
+    
+    .carousel-track-full {
+        gap: 15px;
+    }
+    
+    .service-icon-large {
+        width: 70px;
+        height: 70px;
+        font-size: 28px;
+    }
+    
+    .carousel-item-full[data-selected="true"] .service-icon-large {
+        width: 110px;
+        height: 110px;
+        font-size: 42px;
+    }
+    
+    .carousel-item-full:nth-child(1):not([data-selected="true"]) .service-icon-large,
+    .carousel-item-full:nth-child(5):not([data-selected="true"]) .service-icon-large {
+        width: 50px;
+        height: 50px;
+        font-size: 20px;
+    }
+    
+    .carousel-item-full:nth-child(2):not([data-selected="true"]):not(:nth-child(4)) .service-icon-large,
+    .carousel-item-full:nth-child(4):not([data-selected="true"]):not(:nth-child(2)) .service-icon-large {
+        width: 60px;
+        height: 60px;
+        font-size: 24px;
+    }
+    
+    .service-label-large {
+        font-size: 18px;
+    }
+    
+    .carousel-item-full[data-selected="true"] .service-label-large {
+        font-size: 22px;
+    }
+    
+    .service-screenshot-full {
+        height: 300px;
+    }
+    
+    .service-title {
+        font-size: 32px;
+    }
+    
+    .service-description-full {
+        font-size: 20px;
+    }
+    
+    .go-to-app-button {
+        font-size: 22px;
+        padding: 14px 30px;
+    }
+}
+
+@media (max-width: 768px) {
+    .carousel-container-full {
+        padding: 20px 30px;
+    }
+    
+    .carousel-track-full {
+        gap: 10px;
+    }
+    
+    .service-icon-large {
+        width: 60px;
+        height: 60px;
+        font-size: 24px;
+    }
+    
+    .carousel-item-full[data-selected="true"] .service-icon-large {
+        width: 90px;
+        height: 90px;
+        font-size: 36px;
+    }
+    
+    .carousel-item-full:nth-child(1):not([data-selected="true"]) .service-icon-large,
+    .carousel-item-full:nth-child(5):not([data-selected="true"]) .service-icon-large {
+        width: 45px;
+        height: 45px;
+        font-size: 18px;
+    }
+    
+    .carousel-item-full:nth-child(2):not([data-selected="true"]):not(:nth-child(4)) .service-icon-large,
+    .carousel-item-full:nth-child(4):not([data-selected="true"]):not(:nth-child(2)) .service-icon-large {
+        width: 55px;
+        height: 55px;
+        font-size: 22px;
+    }
+    
+    .service-screenshot-full {
+        height: 250px;
+    }
+    
+    .service-title {
+        font-size: 26px;
+    }
+    
+    .service-description-full {
+        font-size: 18px;
+    }
+    
+    .go-to-app-button {
+        font-size: 20px;
+        padding: 12px 25px;
+    }
+    
+    .carousel-nav-full {
+        width: 40px;
+        height: 40px;
+        font-size: 36px;
+    }
+    
+    .carousel-nav-full.prev {
+        left: 10px;
+    }
+    
+    .carousel-nav-full.next {
+        right: 10px;
+    }
+}
+
 .carousel-track-full {
     display: flex;
     justify-content: center;
@@ -571,6 +900,57 @@ footer > div > p {
     width: 100%;
 }
 
+@media (max-width: 1024px) {
+    .games-grid {
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        gap: 25px;
+    }
+}
+
+@media (max-width: 768px) {
+    .games-container {
+        padding: 10px;
+    }
+    
+    .games-grid {
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 20px;
+    }
+    
+    .game-card {
+        border-radius: 15px;
+    }
+    
+    .game-card-image {
+        height: 150px;
+    }
+    
+    .game-card.expanded .game-card-image {
+        height: 180px;
+    }
+    
+    .game-card-content {
+        padding: 15px;
+    }
+    
+    .game-card-title {
+        font-size: 20px;
+    }
+    
+    .game-card-description {
+        font-size: 16px;
+    }
+    
+    .game-card-full-description {
+        font-size: 16px;
+    }
+    
+    .play-button {
+        font-size: 20px;
+        padding: 12px 25px;
+    }
+}
+
 .game-card {
     background-color: var(--dark-teal, #2c5f5f);
     border-radius: var(--card-border-radius, 25px);