diff --git a/src/app/player/components/channel-list-container/channel-list-container.component.scss b/src/app/player/components/channel-list-container/channel-list-container.component.scss
index 53c5dabe7..791ad7cbd 100644
--- a/src/app/player/components/channel-list-container/channel-list-container.component.scss
+++ b/src/app/player/components/channel-list-container/channel-list-container.component.scss
@@ -64,7 +64,7 @@ mat-nav-list {
     height: calc(100vh - 120px);
 }
 
-@media only screen and (max-width: 480px) {
+@media only screen and (max-width: 599px) {
     .channel-name {
         max-width: 100px;
     }
@@ -76,4 +76,8 @@ mat-nav-list {
     .tab-icon {
         display: block;
     }
+
+    .scroll-viewport {
+        min-height: calc(50vh - 159px);
+    }
 }
diff --git a/src/app/player/components/html-video-player/html-video-player.component.scss b/src/app/player/components/html-video-player/html-video-player.component.scss
index 4a78a8e86..4a323f07d 100644
--- a/src/app/player/components/html-video-player/html-video-player.component.scss
+++ b/src/app/player/components/html-video-player/html-video-player.component.scss
@@ -2,3 +2,11 @@
     width: 100%;
     height: calc(100vh - 60px);
 }
+
+
+@media only screen and (max-width: 599px) {
+    #video-player {
+        width: 100%;
+        height: calc(50vh - 60px) !important;
+    }
+}
\ No newline at end of file
diff --git a/src/app/player/components/video-player/sidebar/sidebar.component.html b/src/app/player/components/video-player/sidebar/sidebar.component.html
index 93ee0a687..c9d209d97 100644
--- a/src/app/player/components/video-player/sidebar/sidebar.component.html
+++ b/src/app/player/components/video-player/sidebar/sidebar.component.html
@@ -1,24 +1,27 @@
 <div id="playlists-navigation">
     <div class="current-playlist">
-        <button mat-icon-button matTooltip="Back" (click)="goBack()">
-            <mat-icon>arrow_back_ios</mat-icon>
-        </button>
-        <div class="playlist-info">
-            <div class="name">
-                @if (sidebarView === 'CHANNELS') {
-                    {{ playlistTitle$ | async }}
-                } @else {
-                    {{ 'HOME.PLAYLISTS.MY_PLAYLISTS' | translate }}
-                }
-            </div>
-            <div class="channels-count">
-                {{
-                    sidebarView === 'CHANNELS'
-                        ? channels?.length +
-                          ' ' +
-                          ('HOME.PLAYLISTS.CHANNELS' | translate)
-                        : ('HOME.PLAYLISTS.MY_PLAYLISTS_SUBTITLE' | translate)
-                }}
+        <div class="left">
+            <button mat-icon-button matTooltip="Back" (click)="goBack()">
+                <mat-icon>arrow_back_ios</mat-icon>
+            </button>
+            <div class="playlist-info">
+                <div class="name">
+                    @if (sidebarView === 'CHANNELS') {
+                        {{ playlistTitle$ | async }}
+                    } @else {
+                        {{ 'HOME.PLAYLISTS.MY_PLAYLISTS' | translate }}
+                    }
+                </div>
+                <div class="channels-count">
+                    {{
+                        sidebarView === 'CHANNELS'
+                            ? channels?.length +
+                              ' ' +
+                              ('HOME.PLAYLISTS.CHANNELS' | translate)
+                            : ('HOME.PLAYLISTS.MY_PLAYLISTS_SUBTITLE'
+                              | translate)
+                    }}
+                </div>
             </div>
         </div>
 
diff --git a/src/app/player/components/video-player/sidebar/sidebar.component.scss b/src/app/player/components/video-player/sidebar/sidebar.component.scss
index efba69520..da7946223 100644
--- a/src/app/player/components/video-player/sidebar/sidebar.component.scss
+++ b/src/app/player/components/video-player/sidebar/sidebar.component.scss
@@ -4,12 +4,19 @@
         display: flex;
         align-items: center;
         padding: 8px;
+        justify-content: space-between;
+
+        .left {
+            display: flex;
+            gap: 5px;
+        }
     }
 
     .playlist-info {
         flex: 1;
         max-width: 300px;
 
+
         .name {
             font-size: 1.1em;
             overflow: hidden;
diff --git a/src/app/player/components/video-player/sidebar/sidebar.component.ts b/src/app/player/components/video-player/sidebar/sidebar.component.ts
index f81f7db5d..502be6bee 100644
--- a/src/app/player/components/video-player/sidebar/sidebar.component.ts
+++ b/src/app/player/components/video-player/sidebar/sidebar.component.ts
@@ -4,7 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { Router } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { TranslateModule } from '@ngx-translate/core';
 import { Channel } from '../../../../../../shared/channel.interface';
@@ -29,6 +29,7 @@ import { ChannelListContainerComponent } from './../../channel-list-container/ch
         NgIf,
         RecentPlaylistsComponent,
         TranslateModule,
+        RouterLink,
     ],
 })
 export class SidebarComponent {
diff --git a/src/app/player/components/video-player/toolbar/toolbar.component.html b/src/app/player/components/video-player/toolbar/toolbar.component.html
index ab2e065d9..937ce8b4b 100644
--- a/src/app/player/components/video-player/toolbar/toolbar.component.html
+++ b/src/app/player/components/video-player/toolbar/toolbar.component.html
@@ -3,6 +3,7 @@
         mat-icon-button
         (click)="toggleLeftDrawerClicked.emit()"
         [matTooltip]="'TOP_MENU.OPEN_CHANNELS_LIST' | translate"
+        class="sidenav-toggle-button"
     >
         <mat-icon>menu</mat-icon>
     </button>
diff --git a/src/app/player/components/video-player/toolbar/toolbar.component.scss b/src/app/player/components/video-player/toolbar/toolbar.component.scss
index dcbd5a563..0c479eff1 100644
--- a/src/app/player/components/video-player/toolbar/toolbar.component.scss
+++ b/src/app/player/components/video-player/toolbar/toolbar.component.scss
@@ -1,3 +1,9 @@
 .spacer {
     flex: 1 1 auto;
 }
+
+@media only screen and (max-width: 599px) {
+    .sidenav-toggle-button {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/src/app/player/components/video-player/video-player.component.html b/src/app/player/components/video-player/video-player.component.html
index 01dfe26ce..fca5fff8d 100644
--- a/src/app/player/components/video-player/video-player.component.html
+++ b/src/app/player/components/video-player/video-player.component.html
@@ -1,6 +1,6 @@
 <mat-drawer-container class="main-container">
     <!-- sidebar content -->
-    <mat-drawer #drawer mode="side" opened disableClose>
+    <mat-drawer #drawer mode="side" opened disableClose class="mat-drawer">
         @defer {
             <app-sidebar [channels]="channels$ | async" />
         } @loading {
@@ -9,7 +9,7 @@
             <p>Loading...</p>
         }
     </mat-drawer>
-    <mat-drawer-content>
+    <mat-drawer-content class="drawer-content">
         <ng-container *ngIf="activeChannel$ | async as activeChannel">
             <!-- toolbar with drawer icon -->
             <app-toolbar
@@ -34,9 +34,9 @@
                                 src:
                                     activeChannel?.url +
                                     activeChannel?.epgParams,
-                                type: 'application/x-mpegURL'
-                            }
-                        ]
+                                type: 'application/x-mpegURL',
+                            },
+                        ],
                     }"
                     [class.hide-captions]="!playerSettings.showCaptions"
                 ></app-vjs-player>
diff --git a/src/app/player/components/video-player/video-player.component.scss b/src/app/player/components/video-player/video-player.component.scss
index f0f41314a..01eacb02d 100644
--- a/src/app/player/components/video-player/video-player.component.scss
+++ b/src/app/player/components/video-player/video-player.component.scss
@@ -21,11 +21,23 @@
     padding: 20px;
 }
 
-@media only screen and (max-width: 480px) {
-    .mat-drawer {
-        width: 200px;
-        min-width: 200px;
+@media only screen and (max-width: 599px) {
+    .main-container {
+        display: flex;
+        flex-direction: column-reverse; 
     }
+    
+    .mat-drawer {
+        height: 50vh; 
+        width: 100%; 
+        position: unset;
+    }
+    
+    .drawer-content {
+        height: 50vh;
+        margin-left: 0 !important; 
+    }
+      
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/src/app/player/components/vjs-player/vjs-player.component.scss b/src/app/player/components/vjs-player/vjs-player.component.scss
index bfb176505..bea148a1d 100644
--- a/src/app/player/components/vjs-player/vjs-player.component.scss
+++ b/src/app/player/components/vjs-player/vjs-player.component.scss
@@ -12,3 +12,10 @@
         display: none;
     }
 }
+
+
+@media only screen and (max-width: 599px) {
+    .video-js {
+        height: calc(50vh - 65px) !important;
+    }
+}
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index 414c494bf..8c1d4179f 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -19,6 +19,7 @@ html {
 
 .mat-toolbar.mat-primary {
     background: #000;
+    color: #b8b8b8;
 }
 
 .full-width {
@@ -114,3 +115,20 @@ textarea,
 .mat-drawer-inner-container {
     overflow: hidden !important;
 }
+
+@media only screen and (max-width: 599px) {
+    .cet-container {
+        .video-js {
+            height: calc(50vh - 70px) !important;
+        }
+
+        #video-player {
+            height: calc(50vh - 80px) !important;
+        }
+
+        .scroll-viewport {
+            min-height: calc(50vh - 159px) !important
+        }
+    }
+
+}
\ No newline at end of file