diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.css b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.css
index 54744e9e..24d720a2 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.css
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.css
@@ -52,12 +52,39 @@
 
 .grid {
 	display: grid;
-    grid-template-columns: repeat(auto-fit, 70px);
+	grid-template-columns: repeat(auto-fit, 70px);
 }
 
 .grid img {
 	max-width: 100%;
 	max-height: 100%;
 	border-radius: var(--ov-panel-radius);
+}
 
-}
\ No newline at end of file
+::ng-deep .mat-slider-thumb {
+	visibility: hidden;
+}
+
+::ng-deep .mat-slider-vertical .mat-slider-track-fill,
+::ng-deep .mat-slider-vertical .mat-slider-track-background,
+::ng-deep .mat-slider-vertical .mat-slider-track-wrapper {
+	width: 10px !important;
+}
+
+::-webkit-scrollbar {
+	width: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+	background: #a7a7a7;
+	border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: #7c7c7c;
+}
+
+::-webkit-scrollbar-track {
+	background: var(--ov-light-color);
+	border-radius: 4px;
+}
diff --git a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts
index 5794dac8..bade5043 100644
--- a/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts
+++ b/openvidu-components-angular/projects/openvidu-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { BackgroundEffect, EffectType } from '../../../models/background-effect.model';
 import { PanelType } from '../../../models/panel.model';
@@ -19,7 +19,7 @@ export class BackgroundEffectsPanelComponent implements OnInit {
   private backgrounds: BackgroundEffect[];
   private backgroundSubs: Subscription;
 
-	constructor(private panelService: PanelService, private backgroundService: VirtualBackgroundService) {}
+	constructor(private panelService: PanelService, private backgroundService: VirtualBackgroundService, private cd: ChangeDetectorRef) {}
 
 	ngOnInit(): void {
     this.subscribeToBackgroundSelected();
@@ -32,7 +32,10 @@ export class BackgroundEffectsPanelComponent implements OnInit {
     if(this.backgroundSubs) this.backgroundSubs.unsubscribe();
   }
   subscribeToBackgroundSelected() {
-    this.backgroundSubs = this.backgroundService.backgroundSelectedObs.subscribe((id) => this.backgroundSelectedId = id);
+    this.backgroundSubs = this.backgroundService.backgroundSelectedObs.subscribe((id) => {
+      this.backgroundSelectedId = id;
+      this.cd.markForCheck();
+    });
   }
 
 	close() {