diff --git a/Interface/src/Components/home/home.component.html b/Interface/src/Components/home/home.component.html
index 6d55b27..e404e5d 100644
--- a/Interface/src/Components/home/home.component.html
+++ b/Interface/src/Components/home/home.component.html
@@ -9,12 +9,14 @@ <h1 style="color: #20c0bd;">{{ 'WELCOME_TITLE' | translate }}</h1>
       </button>
     </ng-container>
     <ng-template #notLoggedIn>
+        <div class="welcome-box">
       <h1>FeedPulse</h1>
       <p>{{ 'WELCOME_SUBTITLE' | translate }}</p>
       <a routerLink="/signup" routerLinkActive="active" class="btn">{{ 'GET_STARTED' | translate }}</a>
       <button class="gif-button" (click)="onButtonClick()">
         <img src="assets/gif/video.webp" alt="Button GIF"> {{ 'WATCH_VIDEO' | translate }}
       </button>
+  </div>
     </ng-template>
   </div>
   <div class="right-side">
diff --git a/Interface/src/Components/navbar/navbar.component.css b/Interface/src/Components/navbar/navbar.component.css
index d5a1354..4dddab0 100644
--- a/Interface/src/Components/navbar/navbar.component.css
+++ b/Interface/src/Components/navbar/navbar.component.css
@@ -120,7 +120,7 @@ body {
 }
 
 /* Responsive Design */
-@media (max-width: 768px) {
+@media (max-width: 600px) {
   .navbar {
     flex-direction: column;
     align-items: flex-start;
@@ -185,7 +185,7 @@ body {
   position: relative;
   min-width: 120px;
   margin-bottom: 10px;
-  
+
   background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 10px center;
diff --git a/Interface/src/Components/navbar/navbar.component.html b/Interface/src/Components/navbar/navbar.component.html
index 94213fc..1f885c9 100644
--- a/Interface/src/Components/navbar/navbar.component.html
+++ b/Interface/src/Components/navbar/navbar.component.html
@@ -18,15 +18,15 @@
           <option value="es">🌍 español</option>
         </select>
     </li>
-    <li><a routerLink="/home" routerLinkActive="active active-link" [routerLinkActiveOptions]="{ exact: true }">{{ 'HOME' | translate }}</a></li>
-    <li><a routerLink="/about" routerLinkActive="active active-link">{{ 'ABOUT_US' | translate }}</a></li>
+    <li><a routerLink="/home" routerLinkActive="active active-link" [routerLinkActiveOptions]="{ exact: true }"(click)="closeMenu()">{{ 'HOME' | translate }}</a></li>
+    <li><a routerLink="/about" routerLinkActive="active active-link"(click)="closeMenu()">{{ 'ABOUT_US' | translate }}</a></li>
     <ng-container *ngIf="isLoggedIn; else notLoggedIn">
-      <li><a routerLink="/dashboard" routerLinkActive="active active-link">{{ 'INSIGHTS' | translate }}</a></li>
-      <li><a href="#" (click)="onLogout($event)">{{ 'LOGOUT' | translate }}</a></li>
+      <li><a routerLink="/dashboard" routerLinkActive="active active-link"(click)="closeMenu()">{{ 'INSIGHTS' | translate }}</a></li>
+      <li><a href="#" (click)="onLogout($event)" >{{ 'LOGOUT' | translate }}</a></li>
     </ng-container>
     <ng-template #notLoggedIn>
-      <li><a routerLink="/login" routerLinkActive="active active-link">{{ 'LOGIN' | translate }}</a></li>
-      <li><a routerLink="/signup" routerLinkActive="active active-link">{{ 'SIGNUP' | translate }}</a></li>
+      <li><a routerLink="/login" routerLinkActive="active active-link"(click)="closeMenu()">{{ 'LOGIN' | translate }}</a></li>
+      <li><a routerLink="/signup" routerLinkActive="active active-link"(click)="closeMenu()">{{ 'SIGNUP' | translate }}</a></li>
     </ng-template>
   </ul>
 </nav>
diff --git a/Interface/src/Components/navbar/navbar.component.ts b/Interface/src/Components/navbar/navbar.component.ts
index ced436a..2511047 100644
--- a/Interface/src/Components/navbar/navbar.component.ts
+++ b/Interface/src/Components/navbar/navbar.component.ts
@@ -65,6 +65,7 @@ export class NavbarComponent implements OnDestroy {
     this.isLoggedIn = this.authService.isLoggedIn();
     this.cdr.detectChanges();
     this.router.navigate(['/login']);
+    this.menuOpen = false;
   }
 
   getCurrentLanguage(): string {
@@ -78,4 +79,7 @@ export class NavbarComponent implements OnDestroy {
   toggleMenu() {
     this.menuOpen = !this.menuOpen;
   }
+  closeMenu() {
+  this.menuOpen = false;
+}
 }
diff --git a/Interface/src/app/app.component.css b/Interface/src/app/app.component.css
index 831abb2..befb4fb 100644
--- a/Interface/src/app/app.component.css
+++ b/Interface/src/app/app.component.css
@@ -115,7 +115,7 @@ li a:hover::after {
 }
 
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 600px) {
 
   ul {
     flex-direction: column;
diff --git a/Interface/src/styles.css b/Interface/src/styles.css
index 653eb9b..3af5688 100644
--- a/Interface/src/styles.css
+++ b/Interface/src/styles.css
@@ -11,6 +11,79 @@
   font-family: 'Helmet';
   src: url('/assets/fonts/Helmet-Regular.ttf') format('opentype');
 }
+
+@media screen and (max-width: 600px) {
+  body {
+    font-size: 14px;
+
+  }
+
+
+  .padded-text {
+  padding-left: 20px;
+}
+   .welcome-box h1 {
+    font-size: 18px !important;
+  }
+ span{
+  font-size: 14px;
+ }
+  .welcome-box p,
+  .welcome-box .btn,
+  .welcome-box .gif-button {
+    font-size: 18px !important;
+  }
+  .about-text p,h2{
+    font-size: 14px;
+  }
+ p {
+font-size: 14px;
+ }
+  .gif-button img {
+    width: 30px;
+    height: 30px;
+  }
+
+  h1 {
+    font-size: 20px;
+  }
+
+  h2 {
+    font-size: 18px;
+  }
+
+  h3 {
+    font-size: 16px;
+  }
+
+  ul {
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+  }
+
+  li a {
+    padding: 12px 16px;
+    font-size: 16px;
+  }
+
+
+  .search-container {
+    display: block;
+    width: 100%;
+    text-align: center;
+    margin-top: 10px;
+  }
+
+  .search-input {
+    width: 80%;
+    margin-bottom: 10px;
+  }
+
+  .search-btn {
+    width: 80%;
+  }
+}
 body{
     font-family:  "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }