diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css
index cc550ac..7449a13 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.css
+++ b/ogWebconsole/src/app/components/groups/groups.component.css
@@ -457,3 +457,4 @@ mat-button-toggle-group {
   width: 100%;
   box-sizing: border-box;
 }
+
diff --git a/ogWebconsole/src/app/layout/header/header.component.css b/ogWebconsole/src/app/layout/header/header.component.css
index c742d4c..4643182 100644
--- a/ogWebconsole/src/app/layout/header/header.component.css
+++ b/ogWebconsole/src/app/layout/header/header.component.css
@@ -45,3 +45,13 @@ mat-toolbar {
   background-color: #ced0df;
   cursor: not-allowed;
 }
+
+.hide-on-small {
+  display: none;
+}
+
+@media (min-width: 1328px) {
+  .hide-on-small {
+    display: inline;
+  }
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/layout/header/header.component.html b/ogWebconsole/src/app/layout/header/header.component.html
index d70bb71..c650b7e 100644
--- a/ogWebconsole/src/app/layout/header/header.component.html
+++ b/ogWebconsole/src/app/layout/header/header.component.html
@@ -1,5 +1,5 @@
 <mat-toolbar>
-  <span class="navbar-title" matTooltip="Consola web de administración de Opengnsys" matTooltipShowDelay="1000">
+  <span class="navbar-title hide-on-small" matTooltip="Consola web de administración de Opengnsys" matTooltipShowDelay="1000">
     Opengnsys webconsole
   </span>
 
diff --git a/ogWebconsole/src/app/layout/header/header.component.ts b/ogWebconsole/src/app/layout/header/header.component.ts
index 7e50f1d..e490528 100644
--- a/ogWebconsole/src/app/layout/header/header.component.ts
+++ b/ogWebconsole/src/app/layout/header/header.component.ts
@@ -52,8 +52,6 @@ export class HeaderComponent implements OnInit {
     this.dialog.open(GlobalStatusComponent, {
       width: '45vw',
       height: '80vh', 
-      // maxWidth: '60vw', 
-      // maxHeight: '60vh'
     })
   }
 }
diff --git a/ogWebconsole/src/app/layout/main-layout/main-layout.component.css b/ogWebconsole/src/app/layout/main-layout/main-layout.component.css
index 1fd8655..b5a644f 100644
--- a/ogWebconsole/src/app/layout/main-layout/main-layout.component.css
+++ b/ogWebconsole/src/app/layout/main-layout/main-layout.component.css
@@ -6,5 +6,4 @@
 .sidebar {
   width: 15vw;
   min-width: 250px;
-  z-index: auto !important;
-}
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/layout/main-layout/main-layout.component.html b/ogWebconsole/src/app/layout/main-layout/main-layout.component.html
index 59eebe9..c8241e0 100644
--- a/ogWebconsole/src/app/layout/main-layout/main-layout.component.html
+++ b/ogWebconsole/src/app/layout/main-layout/main-layout.component.html
@@ -1,11 +1,12 @@
 <app-header (toggleSidebar)="toggleSidebar()"></app-header>
 
 <mat-drawer-container class="container" autosize>
-  <mat-drawer class="sidebar" mode="side" [opened]="isSidebarVisible">
-    <app-sidebar></app-sidebar>
+  <mat-drawer class="sidebar" [mode]="sidebarMode" [opened]="isSidebarVisible" (close)="isSidebarVisible = false">
+    <app-sidebar [isVisible]="isSidebarVisible" [sidebarMode]="sidebarMode" (closeSidebar)="isSidebarVisible = false">
+    </app-sidebar>
   </mat-drawer>
 
   <mat-drawer-content class="content">
     <router-outlet></router-outlet>
   </mat-drawer-content>
-</mat-drawer-container>
+</mat-drawer-container>
\ No newline at end of file
diff --git a/ogWebconsole/src/app/layout/main-layout/main-layout.component.ts b/ogWebconsole/src/app/layout/main-layout/main-layout.component.ts
index dc6d912..ce50bfb 100644
--- a/ogWebconsole/src/app/layout/main-layout/main-layout.component.ts
+++ b/ogWebconsole/src/app/layout/main-layout/main-layout.component.ts
@@ -1,14 +1,30 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 
 @Component({
   selector: 'app-main-layout',
   templateUrl: './main-layout.component.html',
   styleUrls: ['./main-layout.component.css'],
 })
-export class MainLayoutComponent {
+export class MainLayoutComponent implements OnInit {
   isSidebarVisible: boolean = true;
+  sidebarMode: 'side' | 'over' = 'side';
+
+  constructor(private breakpointObserver: BreakpointObserver) { }
+
+  ngOnInit(): void {
+    this.breakpointObserver.observe(['(max-width: 1328px)']).subscribe((result) => {
+      if (result.matches) {
+        this.sidebarMode = 'over';
+        this.isSidebarVisible = false;
+      } else {
+        this.sidebarMode = 'side';
+        this.isSidebarVisible = true;
+      }
+    });
+  }
 
   toggleSidebar() {
     this.isSidebarVisible = !this.isSidebarVisible;
   }
-}
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/layout/sidebar/sidebar.component.html b/ogWebconsole/src/app/layout/sidebar/sidebar.component.html
index cde15ee..1c77fa8 100644
--- a/ogWebconsole/src/app/layout/sidebar/sidebar.component.html
+++ b/ogWebconsole/src/app/layout/sidebar/sidebar.component.html
@@ -7,14 +7,16 @@
 
   <mat-divider></mat-divider>
 
-  <mat-list-item routerLink="/groups" matTooltip="{{ 'TOOLTIP_GROUPS' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item routerLink="/groups" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_GROUPS' | translate }}"
+    matTooltipShowDelay="1000">
     <span class="entry">
       <mat-icon class="icon">apartment</mat-icon>
       <span>{{ 'groups' | translate }}</span>
     </span>
   </mat-list-item>
 
-  <mat-list-item (click)="toggleCommandSub()" matTooltip="{{ 'TOOLTIP_ACTIONS' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item (click)="toggleCommandSub()" matTooltip="{{ 'TOOLTIP_ACTIONS' | translate }}"
+    matTooltipShowDelay="1000">
     <span class="entry">
       <mat-icon class="icon">playlist_play</mat-icon>
       <span>{{ 'actions' | translate }}</span>
@@ -23,19 +25,22 @@
 
   <!-- Submenu items for commands -->
   <mat-nav-list *ngIf="showCommandSub" style="padding-left: 20px;">
-    <mat-list-item routerLink="/commands" matTooltip="{{ 'TOOLTIP_COMMANDS' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/commands" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_COMMANDS' | translate }}"
+      matTooltipShowDelay="1000">
       <span class="entry">
         <mat-icon class="icon">chevron_right</mat-icon>
         <span>{{ 'commands' | translate }}</span>
       </span>
     </mat-list-item>
-    <mat-list-item routerLink="/commands-groups" matTooltip="{{ 'TOOLTIP_COMMAND_GROUPS' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/commands-groups" (click)="onItemClick()"
+      matTooltip="{{ 'TOOLTIP_COMMAND_GROUPS' | translate }}" matTooltipShowDelay="1000">
       <span class="entry">
         <mat-icon class="icon">chevron_right</mat-icon>
         <span>{{ 'commandGroups' | translate }}</span>
       </span>
     </mat-list-item>
-    <mat-list-item routerLink="/commands-task" matTooltip="{{ 'TOOLTIP_TASKS' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/commands-task" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_TASKS' | translate }}"
+      matTooltipShowDelay="1000">
       <span class="entry">
         <mat-icon class="icon">chevron_right</mat-icon>
         <span>{{ 'tasks' | translate }}</span>
@@ -43,14 +48,16 @@
     </mat-list-item>
   </mat-nav-list>
 
-  <mat-list-item routerLink="/subnets" matTooltip="{{ 'TOOLTIP_SUBNETS' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item routerLink="/subnets" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_SUBNETS' | translate }}"
+    matTooltipShowDelay="1000">
     <span class="entry">
       <mat-icon class="icon">lan</mat-icon>
       <span> {{ 'subnets' | translate }}</span>
     </span>
   </mat-list-item>
 
-  <mat-list-item (click)="toggleOgBootSub()" matTooltip="{{ 'TOOLTIP_BOOT' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item (click)="toggleOgBootSub()" matTooltip="{{ 'TOOLTIP_BOOT' | translate }}"
+    matTooltipShowDelay="1000">
     <span class="entry">
       <mat-icon class="icon">desktop_windows</mat-icon>
       <span>{{ 'boot' | translate }}</span>
@@ -59,19 +66,22 @@
 
   <!-- Submenu items for Boot -->
   <mat-nav-list *ngIf="showOgBootSub" style="padding-left: 20px;">
-    <mat-list-item routerLink="/pxe-images" matTooltip="{{ 'TOOLTIP_PXE_IMAGES' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/pxe-images" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_PXE_IMAGES' | translate }}"
+      matTooltipShowDelay="1000">
       <span class="entry">
         <mat-icon class="icon">album</mat-icon>
         <span>{{ 'ogLive' | translate }}</span>
       </span>
     </mat-list-item>
-    <mat-list-item routerLink="/pxe" matTooltip="{{ 'TOOLTIP_PXE_TEMPLATES' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/pxe" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_PXE_TEMPLATES' | translate }}"
+      matTooltipShowDelay="1000">
       <span class="entry">
         <mat-icon class="icon">assignment</mat-icon>
         <span>{{ 'pxeTemplates' | translate }}</span>
       </span>
     </mat-list-item>
-    <mat-list-item routerLink="/pxe-boot-file" matTooltip="{{ 'TOOLTIP_PXE_BOOT_FILES' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/pxe-boot-file" (click)="onItemClick()"
+      matTooltip="{{ 'TOOLTIP_PXE_BOOT_FILES' | translate }}" matTooltipShowDelay="1000">
       <span class="entry">
         <mat-icon class="icon">save</mat-icon>
         <span>{{ 'pxeBootFiles' | translate }}</span>
@@ -79,14 +89,16 @@
     </mat-list-item>
   </mat-nav-list>
 
-  <mat-list-item routerLink="/calendars" matTooltip="{{ 'TOOLTIP_CALENDARS' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item routerLink="/calendars" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_CALENDARS' | translate }}"
+    matTooltipShowDelay="1000">
     <span class="entry">
       <mat-icon class="icon">calendar_month</mat-icon>
       <span>{{ 'calendars' | translate }}</span>
     </span>
   </mat-list-item>
 
-  <mat-list-item (click)="toggleSoftwareSub()" matTooltip="{{ 'TOOLTIP_SOFTWARE' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item (click)="toggleSoftwareSub()" matTooltip="{{ 'TOOLTIP_SOFTWARE' | translate }}"
+    matTooltipShowDelay="1000">
     <span class="entry">
       <mat-icon class="icon">terminal</mat-icon>
       <span>{{ 'software' | translate }}</span>
@@ -95,19 +107,22 @@
 
   <!-- Submenu items for Software -->
   <mat-nav-list *ngIf="showSoftwareSub" style="padding-left: 20px;">
-    <mat-list-item routerLink="/software" matTooltip="{{ 'TOOLTIP_SOFTWARE_LIST' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/software" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_SOFTWARE_LIST' | translate }}"
+      matTooltipShowDelay="1000">
       <span class="entry">
         <mat-icon class="icon">list</mat-icon>
         <span>{{ 'softwareList' | translate }}</span>
       </span>
     </mat-list-item>
-    <mat-list-item routerLink="/software-profiles" matTooltip="{{ 'TOOLTIP_SOFTWARE_PROFILES' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/software-profiles" (click)="onItemClick()"
+      matTooltip="{{ 'TOOLTIP_SOFTWARE_PROFILES' | translate }}" matTooltipShowDelay="1000">
       <span class="entry">
         <mat-icon class="icon">folder_shared</mat-icon>
         <span>{{ 'softwareProfiles' | translate }}</span>
       </span>
     </mat-list-item>
-    <mat-list-item routerLink="/operative-systems" matTooltip="{{ 'TOOLTIP_OPERATIVE_SYSTEMS' | translate }}" matTooltipShowDelay="1000">
+    <mat-list-item routerLink="/operative-systems" (click)="onItemClick()"
+      matTooltip="{{ 'TOOLTIP_OPERATIVE_SYSTEMS' | translate }}" matTooltipShowDelay="1000">
       <span class="entry">
         <mat-icon class="icon">terminal</mat-icon>
         <span>{{ 'operativeSystems' | translate }}</span>
@@ -115,17 +130,19 @@
     </mat-list-item>
   </mat-nav-list>
 
-  <mat-list-item routerLink="/repositories" matTooltip="{{ 'TOOLTIP_REPOSITORIES' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item routerLink="/repositories" (click)="onItemClick()"
+    matTooltip="{{ 'TOOLTIP_REPOSITORIES' | translate }}" matTooltipShowDelay="1000">
     <span class="entry">
       <mat-icon class="icon">warehouse</mat-icon>
       <span>{{ 'repositories' | translate }}</span>
     </span>
   </mat-list-item>
 
-  <mat-list-item routerLink="/menus" matTooltip="{{ 'TOOLTIP_MENUS' | translate }}" matTooltipShowDelay="1000">
+  <mat-list-item routerLink="/menus" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_MENUS' | translate }}"
+    matTooltipShowDelay="1000">
     <span class="entry">
       <mat-icon class="icon">list</mat-icon>
       <span>{{ 'menus' | translate }}</span>
     </span>
   </mat-list-item>
-</mat-nav-list>
+</mat-nav-list>
\ No newline at end of file
diff --git a/ogWebconsole/src/app/layout/sidebar/sidebar.component.ts b/ogWebconsole/src/app/layout/sidebar/sidebar.component.ts
index 8de24e6..83d250f 100644
--- a/ogWebconsole/src/app/layout/sidebar/sidebar.component.ts
+++ b/ogWebconsole/src/app/layout/sidebar/sidebar.component.ts
@@ -1,6 +1,7 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { jwtDecode } from 'jwt-decode';
 import { MatDialog } from '@angular/material/dialog';
+
 @Component({
   selector: 'app-sidebar',
   templateUrl: './sidebar.component.html',
@@ -8,6 +9,9 @@ import { MatDialog } from '@angular/material/dialog';
 })
 export class SidebarComponent {
   @Input() isVisible: boolean = false;
+  @Input() sidebarMode: 'side' | 'over' = 'side';
+  @Output() closeSidebar: EventEmitter<void> = new EventEmitter<void>();
+
   isSuperAdmin: boolean = false;
   username: string = "";
   decodedToken: any = "";
@@ -29,6 +33,12 @@ export class SidebarComponent {
     this.showSoftwareSub = !this.showSoftwareSub;
   }
 
+  onItemClick() {
+    if (this.isVisible && this.sidebarMode === 'over') {
+      this.closeSidebar.emit();
+    }
+  }
+
   constructor(public dialog: MatDialog) {}
 
   ngOnInit(): void {
@@ -44,4 +54,4 @@ export class SidebarComponent {
       }
     }
   }
-}
+}
\ No newline at end of file