diff --git a/openvidu-components-angular/e2e/webcomponent-app/index.html b/openvidu-components-angular/e2e/webcomponent-app/index.html
index 93fe7d4581..4d3dd4cf03 100644
--- a/openvidu-components-angular/e2e/webcomponent-app/index.html
+++ b/openvidu-components-angular/e2e/webcomponent-app/index.html
@@ -11,23 +11,23 @@
 
 		<style>
 			:root {
-				--ov-primary-color: #303030;
-				--ov-secondary-color: #3e3f3f;
-				--ov-tertiary-color: #598eff;
-				--ov-warn-color: #eb5144;
-				--ov-accent-color: #ffae35;
+				--ov-background-color: #303030;
+				--ov-secondary-action-color: #3e3f3f;
+				--ov-accent-action-color: #598eff;
+				--ov-error-color: #eb5144;
+				--ov-accent-action-color: #ffae35;
 				--ov-light-color: #e6e6e6;
 
-				--ov-logo-background-color: #3a3d3d;
-				--ov-text-color: #ffffff;
+				--ov-secondary-action-color: #3a3d3d;
+				--ov-text-primary-color: #ffffff;
 
-				--ov-panel-text-color: #1d1d1d;
-				--ov-panel-background: #ffffff;
+				--ov-text-primary-color: #1d1d1d;
+				--ov-surface-color: #ffffff;
 
 				--ov-buttons-radius: 50%;
 				--ov-leave-button-radius: 10px;
 				--ov-video-radius: 5px;
-				--ov-panel-radius: 5px;
+				--ov-surface-radius: 5px;
 			}
 		</style>
 	</head>
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/README.md b/openvidu-components-angular/projects/openvidu-components-angular/README.md
index 4d38254ae8..691bb0abf5 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/README.md
+++ b/openvidu-components-angular/projects/openvidu-components-angular/README.md
@@ -54,24 +54,28 @@ You can also customize the styles in your `styles.scss` file:
 
 ```scss
 :root {
-	--ov-primary-color: #303030;
-	--ov-secondary-color: #3e3f3f;
-	--ov-tertiary-color: #598eff;
-	--ov-warn-color: #eb5144;
-	--ov-accent-color: #ffae35;
-	--ov-light-color: #e6e6e6;
+	/* Basic colors */
+	--ov-background-color: #303030; // Background color
+	--ov-surface-color: #ffffff; // Surfaces colors (panels, dialogs)
 
-	--ov-logo-background-color: #3a3d3d;
+	/* Text colors */
+	--ov-text-primary-color: #ffffff; // Text color over primary background
+	--ov-text-surface-color: #1d1d1d; // Text color over surface background
 
-	--ov-text-color: #ffffff;
+	/* Action colors */
+	--ov-primary-action-color: #273235; // Primary color for buttons, etc.
+	--ov-secondary-action-color: #f1f1f1; // Secondary color for buttons, etc.
+	--ov-accent-action-color: #0089ab; // Color for highlighted elements
 
-	--ov-panel-text-color: #1d1d1d;
-	--ov-panel-background: #ffffff;
+	/* Status colors */
+	--ov-error-color: #eb5144; // Error color
+	--ov-warn-color: #ffba53; // Warning color
 
+	/* Radius */
 	--ov-buttons-radius: 50%;
 	--ov-leave-button-radius: 10px;
 	--ov-video-radius: 5px;
-	--ov-panel-radius: 5px;
+	--ov-surface-radius: 5px;
 }
 ```
 
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.scss
index 220d26872c..ad1280c9c4 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.scss
@@ -4,16 +4,16 @@
 
 .header {
 	height: 50px;
-	background-color: var(--ov-secondary-color);
-	color: var(--ov-text-color);
+	background-color: var(--ov-secondary-action-color);
+	color: var(--ov-text-primary-color);
 }
 
 .logout-btn {
-	color: var(--ov-text-color);
+	color: var(--ov-text-primary-color);
 }
 
 .dashboard-body {
-	background-color: var(--ov-secondary-color);
+	background-color: var(--ov-secondary-action-color);
 	height: calc(100% - 75px);
 }
 .toolbar-spacer {
@@ -41,17 +41,17 @@
 
 #sort-menu-btn {
 	margin-left: 5px;
-	background-color: var(--ov-panel-background);
-	color: var(--ov-panel-text-color);
+	background-color: var(--ov-surface-color);
+	color: var(--ov-text-primary-color);
 }
 
 .search-bar {
 	height: 95%;
 	width: 30%;
 	display: flex;
-	background-color: var(--ov-panel-background);
+	background-color: var(--ov-surface-color);
 	padding: 0px 10px;
-	border-radius: var(--ov-panel-radius);
+	border-radius: var(--ov-surface-radius);
 }
 
 #search-input {
@@ -87,7 +87,7 @@
 }
 
 .recordings-container {
-	background-color: var(--ov-secondary-color);
+	background-color: var(--ov-secondary-action-color);
 	height: calc(100% - 50px);
 	overflow-y: auto;
 	overflow-x: hidden;
@@ -106,7 +106,7 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		background-color: var(--ov-panel-background);
+		background-color: var(--ov-surface-color);
 	}
 }
 
@@ -135,18 +135,18 @@
 	margin-right: -50%;
 	top: 50%;
 	left: 50%;
-	background-color: var(--ov-logo-background-color);
-	border-radius: var(--ov-panel-radius);
+	background-color: var(--ov-secondary-action-color);
+	border-radius: var(--ov-surface-radius);
 }
 
 .video-btns button #play {
-	color: var(--ov-text-color);
+	color: var(--ov-text-primary-color);
 }
 .video-btns button #download {
-	color: var(--ov-tertiary-color);
+	color: var(--ov-accent-action-color);
 }
 .video-btns button #delete {
-	color: var(--ov-warn-color);
+	color: var(--ov-error-color);
 }
 
 .video-info-container > div {
@@ -167,7 +167,7 @@
 
 .video-card-tag {
 	font-size: 13px;
-	color: var(--ov-panel-text-color);
+	color: var(--ov-text-primary-color);
 	font-weight: bold;
 }
 
@@ -204,16 +204,16 @@
     transform: translateX(-50%);
 
 	.load-more-btn {
-		background-color: var(--ov-panel-background);
-		color: var(--ov-panel-text-color);
-		border-radius: var(--ov-panel-radius);
+		background-color: var(--ov-surface-color);
+		color: var(--ov-text-primary-color);
+		border-radius: var(--ov-surface-radius);
 	}
 }
 
 .footer {
 	height: 25px;
-	background-color: var(--ov-primary-color);
-	color: var(--ov-text-color);
+	background-color: var(--ov-background-color);
+	color: var(--ov-text-primary-color);
 	position: absolute;
 	bottom: 0;
 	left: 0;
@@ -225,7 +225,7 @@
 	gap: 2px;
 }
 .footer a {
-	color: var(--ov-tertiary-color);
+	color: var(--ov-accent-action-color);
 	padding-left: 5px;
 }
 
@@ -234,7 +234,7 @@
 	width: 100%;
 	display: table;
 	text-align: center;
-	color: var(--ov-text-color);
+	color: var(--ov-text-primary-color);
 }
 /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
 ::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.scss
index 3494f6350f..a177acac2d 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.scss
@@ -1,7 +1,7 @@
 .header {
 	height: 50px;
-	background-color: var(--ov-primary-color);
-	color: var(--ov-text-color);
+	background-color: var(--ov-background-color);
+	color: var(--ov-text-primary-color);
 }
 
 .center-container {
@@ -9,12 +9,12 @@
 	justify-content: center;
 	align-items: center;
 	height: 100vh;
-	background-color: var(--ov-secondary-color);
+	background-color: var(--ov-secondary-action-color);
 }
 
 .card-container {
 	text-align: center;
-	background-color: var(--ov-panel-background);
+	background-color: var(--ov-surface-color);
 	padding: 10px;
 	max-width: 300px;
 	min-width: 300px;
@@ -23,8 +23,8 @@
 }
 
 .form-btn {
-	background-color: var(--ov-tertiary-color) !important;
-	color: var(--ov-text-color) !important;
+	background-color: var(--ov-accent-action-color) !important;
+	color: var(--ov-text-primary-color) !important;
 }
 
 .form-field,
@@ -33,5 +33,5 @@
 }
 
 ::ng-deep .mat-mdc-progress-spinner {
-	--mdc-circular-progress-active-indicator-color: var(--ov-tertiary-color);
+	--mdc-circular-progress-active-indicator-color: var(--ov-accent-action-color);
 }
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/audio-wave/audio-wave.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/audio-wave/audio-wave.component.scss
index 5807569a26..fce7a62d3a 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/audio-wave/audio-wave.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/audio-wave/audio-wave.component.scss
@@ -23,13 +23,13 @@
 }
 
 .audio-container{
-	background-color: var(--ov-tertiary-color);
+	background-color: var(--ov-accent-action-color);
 	padding: 5px;
 	max-width: 15px;
 	max-height: 15px;
 	height: 15px;
 	width: 15px;
-	border-radius: var(--ov-video-radius);
+	border-radius: var(--ov-surface-radius);
 	display: flex;
 	justify-content: space-between;
 }
@@ -38,7 +38,7 @@
 	margin: auto;
 	height: 80%;
 	width: 3px;
-	background: var(--ov-text-color);
+	background: var(--ov-text-primary-color);
 	border-radius: 8px;
 }
 
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/avatar-profile/avatar-profile.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/avatar-profile/avatar-profile.component.scss
index 5277e5c685..22c8e53357 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/avatar-profile/avatar-profile.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/avatar-profile/avatar-profile.component.scss
@@ -19,7 +19,7 @@
     height: 70px;
     width: 70px;
 	border-radius: var(--ov-video-radius);
-	border: 2px solid var(--ov-text-color);
+	border: 2px solid var(--ov-text-primary-color);
 	color: #000000;
 }
 
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/captions/captions.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/captions/captions.component.scss
index 5306efe951..8865542015 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/captions/captions.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/captions/captions.component.scss
@@ -29,7 +29,7 @@
 .error-container {
 	display: grid;
 	text-align: center;
-	color: var(--ov-text-color);
+	color: var(--ov-text-primary-color);
 	font-size: 18px;
 }
 
@@ -43,7 +43,7 @@ mat-spinner {
 }
 
 ::ng-deep .mat-mdc-progress-spinner {
-	--mdc-circular-progress-active-indicator-color: var(--ov-tertiary-color);
+	--mdc-circular-progress-active-indicator-color: var(--ov-accent-action-color);
 }
 
 /*
@@ -160,8 +160,8 @@ mat-spinner {
 }
 
 #caption-settings-btn {
-	color: var(--ov-text-color);
-	background-color: var(--ov-secondary-color);
+	color: var(--ov-text-primary-color);
+	background-color: var(--ov-secondary-action-color);
 }
 #caption-settings-icon {
 	font-size: 15px;
@@ -190,12 +190,12 @@ mat-spinner {
 
 .caption-text,
 #speaker {
-	color: var(--ov-text-color);
+	color: var(--ov-text-primary-color);
 	font-family: 'Roboto', arial, sans-serif;
 }
 
 .caption-text {
-	background-color: var(--ov-logo-background-color);
+	background-color: var(--ov-secondary-action-color);
 	padding: 4.5px;
 	line-height: 1.6;
 	word-break: break-word;
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/delete-recording.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/delete-recording.component.ts
index 018aa9dfbb..181c890928 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/delete-recording.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/delete-recording.component.ts
@@ -7,13 +7,33 @@ import { MatDialogRef } from '@angular/material/dialog';
 @Component({
 	selector: 'app-delete-dialog',
 	template: `
-		<div mat-dialog-content>{{'PANEL.RECORDING.DELETE_QUESTION' | translate}}</div>
+		<div mat-dialog-content>{{ 'PANEL.RECORDING.DELETE_QUESTION' | translate }}</div>
 		<div mat-dialog-actions>
-			<button mat-button (click)="close()">{{'PANEL.RECORDING.CANCEL' | translate }}</button>
-			<button mat-button cdkFocusInitial (click)="close(true)" id="delete-recording-confirm-btn">{{'PANEL.RECORDING.DELETE' | translate}}</button>
+			<button mat-button [disableRipple]="true" (click)="close()">{{ 'PANEL.RECORDING.CANCEL' | translate }}</button>
+			<button [disableRipple]="true" mat-button cdkFocusInitial (click)="close(true)" id="delete-recording-confirm-btn">
+				{{ 'PANEL.RECORDING.DELETE' | translate }}
+			</button>
 		</div>
 	`,
-	styles: [``]
+	styles: [
+		`
+			::ng-deep .mat-mdc-dialog-surface {
+				background-color: var(--ov-surface-color);
+				border-radius: var(--ov-surface-radius);
+			}
+			#delete-recording-confirm-btn {
+				background-color: var(--ov-error-color);
+				color: var(--ov-text-primary-color);
+			}
+			.mat-mdc-button,
+			.mat-mdc-button:not(:disabled),
+			::ng-deep .mat-mdc-button .mat-mdc-button-persistent-ripple::before {
+				color: var(--ov-text-primary-color);
+				background-color: var(--ov-primary-action-color) !important;
+				border-radius: var(--ov-surface-radius);
+			}
+		`
+	]
 })
 export class DeleteDialogComponent {
 	constructor(public dialogRef: MatDialogRef<DeleteDialogComponent>) {}
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/dialog.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/dialog.component.ts
index 40a4453aa1..89c4f012d4 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/dialog.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/dialog.component.ts
@@ -12,12 +12,30 @@ import { DialogData } from '../../models/dialog.model';
 		<h1 mat-dialog-title>{{ data.title }}</h1>
 		<div mat-dialog-content id="openvidu-dialog">{{ data.description }}</div>
 		<div mat-dialog-actions *ngIf="data.showActionButtons">
-			<button mat-button (click)="close()">{{'PANEL.CLOSE' | translate}}</button>
+			<button mat-button [disableRipple]="true" (click)="close()">{{ 'PANEL.CLOSE' | translate }}</button>
 		</div>
-	`
+	`,
+	styles: [
+		`
+			::ng-deep .mat-mdc-dialog-surface {
+				background-color: var(--ov-surface-color);
+				border-radius: var(--ov-surface-radius);
+			}
+			.mat-mdc-button,
+			.mat-mdc-button:not(:disabled),
+			::ng-deep .mat-mdc-button .mat-mdc-button-persistent-ripple::before {
+				color: var(--ov-text-primary-color);
+				background-color: var(--ov-primary-action-color) !important;
+				border-radius: var(--ov-surface-radius);
+			}
+		`
+	]
 })
 export class DialogTemplateComponent {
-	constructor(public dialogRef: MatDialogRef<DialogTemplateComponent>, @Inject(MAT_DIALOG_DATA) public data: DialogData) {}
+	constructor(
+		public dialogRef: MatDialogRef<DialogTemplateComponent>,
+		@Inject(MAT_DIALOG_DATA) public data: DialogData
+	) {}
 
 	close() {
 		this.dialogRef.close();
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/recording-dialog.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/recording-dialog.component.ts
index 00f153489a..d9e28424bb 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/recording-dialog.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/dialogs/recording-dialog.component.ts
@@ -12,15 +12,27 @@ import { RecordingDialogData } from '../../models/dialog.model';
 			<video #videoElement controls autoplay [src]="src" (error)="handleError()"></video>
 		</div>
 		<div mat-dialog-actions *ngIf="data.showActionButtons" align="end">
-			<button mat-button (click)="close()">{{ 'PANEL.CLOSE' | translate }}</button>
+			<button mat-button [disableRipple]="true" (click)="close()">{{ 'PANEL.CLOSE' | translate }}</button>
 		</div>
 	`,
 	styles: [
 		`
+			::ng-deep .mat-mdc-dialog-surface {
+				background-color: var(--ov-surface-color);
+				border-radius: var(--ov-surface-radius);
+			}
 			video {
 				max-height: 64vh;
 				max-width: 100%;
 			}
+
+			.mat-mdc-button,
+			.mat-mdc-button:not(:disabled),
+			::ng-deep .mat-mdc-button .mat-mdc-button-persistent-ripple::before {
+				color: var(--ov-text-primary-color);
+				background-color: var(--ov-primary-action-color) !important;
+				border-radius: var(--ov-surface-radius);
+			}
 		`
 	]
 })
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.scss
index 56a2df8020..ac0cb8ec6d 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.scss
@@ -31,7 +31,7 @@
 
 .OV_root,
 .OV_root * {
-	color: #ffffff;
+	color: var(--ov-text-primary-color);
 	margin: 0;
 	padding: 0;
 	border: 0;
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/media-element/media-element.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/media-element/media-element.component.scss
index f163a97e52..e5d47a7cf0 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/media-element/media-element.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/media-element/media-element.component.scss
@@ -3,7 +3,7 @@ video {
 	object-fit: cover;
 	width: 100%;
 	height: 100%;
-	color: #ffffff;
+	color: var(--ov-text-primary-color);
 	margin: 0;
 	padding: 0;
 	border: 0;
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.scss
index 487c527ec1..cdb42f735d 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.scss
@@ -1,4 +1,4 @@
-:host{
+:host {
 	.activities-body-container {
 		display: block !important;
 		overflow-y: auto;
@@ -8,14 +8,15 @@
 
 	.activity-icon {
 		display: inherit;
-		background-color: var(--ov-light-color);
-		border-radius: var(--ov-panel-radius);
+		background-color: var(--ov-secondary-action-color);
+		border-radius: var(--ov-surface-radius);
 		margin: 10px 0px !important;
 		padding: 10px;
 	}
 
-	.activity-title, .activity-subtitle {
-		color: var(--ov-panel-text-color);
+	.activity-title,
+	.activity-subtitle {
+		color: var(--ov-text-surface-color);
 	}
 
 	.activity-subtitle {
@@ -46,6 +47,11 @@
 	::ng-deep .mat-expansion-panel-header {
 		padding: 0px 5px !important;
 		height: 65px !important;
+		cursor: pointer !important;
+	}
+
+	::ng-deep .mat-expansion-panel-header:hover {
+		background: none !important;
 	}
 
 	::ng-deep .mat-mdc-list-base .mat-mdc-list-item .mat-list-item-content,
@@ -53,6 +59,10 @@
 		padding: 0px !important;
 	}
 
+	::ng-deep mat-list mat-list-item {
+		cursor: pointer !important;
+	}
+
 	::ng-deep mat-expansion-panel .mat-expansion-panel-body {
 		padding: 0px !important;
 		min-height: 400px;
@@ -63,14 +73,16 @@
 
 	::ng-deep .mat-expansion-panel {
 		box-shadow: none !important;
-		background-color: var(--ov-panel-background) !important;
+		background-color: var(--ov-surface-color) !important;
 	}
 
 	::ng-deep .no-body .mat-expansion-panel-content {
 		display: none !important;
 	}
 
-	::ng-deep .mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta .mdc-list-item__end::before{
+	::ng-deep
+		.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines.mdc-list-item--with-trailing-meta
+		.mdc-list-item__end::before {
 		max-height: 24px;
 		height: 24px;
 	}
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html
index e7ca36a48e..2a8fbd65ae 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html
@@ -1,4 +1,9 @@
-<mat-expansion-panel (opened)="setPanelOpened(true)" (closed)="setPanelOpened(false)" [expanded]="expanded" [ngClass]="{ 'no-body': !isPanelOpened }">
+<mat-expansion-panel
+	(opened)="setPanelOpened(true)"
+	(closed)="setPanelOpened(false)"
+	[expanded]="expanded"
+	[ngClass]="{ 'no-body': !isPanelOpened }"
+>
 	<mat-expansion-panel-header>
 		<mat-list>
 			<mat-list-item>
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.scss
index f7e54cb387..24ba9c3039 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.scss
@@ -1,9 +1,11 @@
+$ov-broadcasting-color: #5903ca;
+
 #broadcasting-status {
-	color: var(--ov-text-color);
+	color: var(--ov-text-surface-color);
 	display: inline;
 	padding: 3px;
 	font-size: 11px;
-	border-radius: var(--ov-panel-radius);
+	border-radius: var(--ov-surface-radius);
 }
 
 .time-container {
@@ -11,19 +13,19 @@
 }
 
 .error-text {
-	color: var(--ov-warn-color);
+	color: var(--ov-error-color);
 	font-style: italic;
 	font-size: 14px;
 }
 
 #broadcasting-icon {
-	color: #5903ca;
+	color: var(--ov-primary-action-color) !important;
 }
 
 .broadcasting-duration {
-	background-color: var(--ov-light-color);
+	background-color: var(--ov-secondary-action-color);
 	padding: 4px 8px;
-	border-radius: var(--ov-panel-radius);
+	border-radius: var(--ov-surface-radius);
 	font-weight: 500;
 }
 
@@ -34,27 +36,27 @@
 }
 
 .started {
-	background-color: #5903ca !important;
-	color: var(--ov-text-color);
+	background-color: $ov-broadcasting-color !important;
+	color: var(--ov-text-primary-color);
 }
 
 .activity-icon.started {
-	background-color: #5903ca !important;
-	color: var(--ov-text-color);
+	background-color: $ov-broadcasting-color !important;
+	color: var(--ov-text-primary-color);
 }
 
 .failed {
-	background-color: var(--ov-warn-color) !important;
-	color: var(--ov-text-color);
+	background-color: var(--ov-error-color) !important;
+	color: var(--ov-text-primary-color);
 }
 .stopped {
-	background-color: var(--ov-light-color);
-	color: var(--ov-panel-text-color) !important;
+	background-color: var(--ov-secondary-action-color);
+	color: var(--ov-text-surface-color) !important;
 }
 
 .starting {
-	background-color: #ffd79b !important;
-	color: var(--ov-panel-text-color) !important;
+	background-color: var(--ov-warn-color) !important;
+	color: var(--ov-text-primary-color) !important;
 }
 
 .panel-body-container {
@@ -72,7 +74,7 @@
 }
 
 .broadcasting-error {
-	color: var(--ov-warn-color);
+	color: var(--ov-error-color);
 	font-weight: 600;
 }
 .broadcasting-name {
@@ -92,13 +94,13 @@
 
 /* #start-broadcasting-btn {
 	width: 100%;
-	background-color: var(--ov-tertiary-color);
-	color: var(--ov-text-color);
+	background-color: var(--ov-accent-action-color);
+	color: var(--ov-text-primary-color);
 } */
 
 #stop-broadcasting-btn {
-	/* background-color: var(--ov-warn-color); */
-	color: var(--ov-warn-color);
+	/* background-color: var(--ov-error-color); */
+	color: var(--ov-error-color);
 }
 
 #reset-broadcasting-status-btn {
@@ -122,10 +124,10 @@ mat-expansion-panel {
 .input-container {
 	height: 25px;
 	display: flex;
-	background-color: var(--ov-light-color);
+	background-color: var(--ov-secondary-action-color);
 	padding: 10px;
 	margin: 10px;
-	border-radius: var(--ov-panel-radius);
+	border-radius: var(--ov-surface-radius);
     order: 3;
     justify-content: space-evenly;
     align-items: center;
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss
index 8723468e1f..b64d0c1745 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/recording-activity/recording-activity.component.scss
@@ -1,10 +1,10 @@
 :host {
 	#recording-status {
-		color: var(--ov-text-color);
+		color: var(--ov-text-primary-color);
 		display: inline;
 		padding: 3px;
 		font-size: 11px;
-		border-radius: var(--ov-panel-radius);
+		border-radius: var(--ov-surface-radius);
 	}
 
 	.recording-title {
@@ -23,13 +23,13 @@
 		flex-wrap: wrap;
 		height: auto;
 		align-content: center;
-		color: var(--ov-panel-text-color) !important;
+		color: var(--ov-text-surface-color) !important;
 	}
 
 	.recording-duration {
-		background-color: var(--ov-light-color);
+		background-color: var(--ov-secondary-action-color);
 		padding: 4px 8px;
-		border-radius: var(--ov-panel-radius);
+		border-radius: var(--ov-surface-radius);
 		font-weight: 500;
 	}
 
@@ -41,22 +41,22 @@
 
 	.started {
 		background-color: #3b7430 !important;
-		color: var(--ov-text-color);
+		color: var(--ov-text-primary-color);
 	}
 
 	.activity-icon.started,
 	.failed {
-		background-color: var(--ov-warn-color) !important;
-		color: var(--ov-text-color);
+		background-color: var(--ov-error-color) !important;
+		color: var(--ov-text-primary-color);
 	}
 	.stopped {
-		background-color: var(--ov-light-color);
-		color: var(--ov-panel-text-color) !important;
+		background-color: var(--ov-secondary-action-color);
+		color: var(--ov-text-surface-color) !important;
 	}
 
 	.starting {
-		background-color: #ffd79b !important;
-		color: var(--ov-panel-text-color) !important;
+		background-color: var(--ov-warn-color) !important;
+		color: var(--ov-text-surface-color) !important;
 	}
 
 	.panel-body-container {
@@ -74,7 +74,7 @@
 	}
 
 	.recording-error {
-		color: var(--ov-warn-color);
+		color: var(--ov-error-color);
 		font-weight: 600;
 	}
 	.recording-name {
@@ -99,23 +99,23 @@
 
 	#start-recording-btn {
 		width: 100%;
-		background-color: var(--ov-tertiary-color);
-		color: var(--ov-text-color);
+		background-color: var(--ov-primary-action-color);
+		color: var(--ov-text-primary-color);
 	}
 
 	#stop-recording-btn {
 		width: 100%;
-		background-color: var(--ov-warn-color);
-		color: var(--ov-text-color);
+		background-color: var(--ov-error-color);
+		color: var(--ov-text-primary-color);
 	}
 
 	.delete-recording-btn {
-		color: var(--ov-warn-color);
+		color: var(--ov-error-color);
 	}
 
 	#reset-recording-status-btn {
 		width: 100%;
-		background-color: var(--ov-light-color);
+		background-color: var(--ov-secondary-action-color);
 	}
 
 	.recording-item {
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.scss
index 6e73be89a0..22b818563e 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/background-effects-panel/background-effects-panel.component.scss
@@ -7,8 +7,9 @@
 
 .effect-button {
 	margin: 5px;
-	border-radius: var(--ov-panel-radius);
-	background-color: var(--ov-light-color);
+	border-radius: var(--ov-surface-radius);
+	background-color: var(--ov-secondary-action-color);
+	color: var(--ov-primary-action-color);
 	width: 60px;
 	height: 60px;
 	line-height: inherit;
@@ -19,7 +20,7 @@
 }
 
 .active-effect-btn {
-	border: 2px solid var(--ov-tertiary-color);
+	border: 2px solid var(--ov-accent-action-color);
 }
 
 #hard_blur-btn .mat-icon {
@@ -34,7 +35,7 @@
 .grid img {
 	max-width: 100%;
 	max-height: 100%;
-	border-radius: var(--ov-panel-radius);
+	border-radius: var(--ov-surface-radius);
 }
 
 /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.scss
index 24791a01f5..08dc83e52f 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.scss
@@ -1,6 +1,7 @@
+$ov-selection-color: #d4d6d7;
+
 .text-container {
-	background-color: var(--ov-light-color);
-	color: var(--ov-panel-text-color);
+	color: var(--ov-text-primary-color);
 	text-align: center;
 	font-size: 12px;
 	flex: inherit;
@@ -27,10 +28,11 @@
 .input-container {
 	height: 65px;
 	display: flex;
-	background-color: var(--ov-light-color);
+	background-color: var(--ov-surface-color);
+	border: 1px solid $ov-selection-color;
 	padding: 10px 5px 10px 10px;
 	margin: 10px;
-	border-radius: var(--ov-panel-radius);
+	border-radius: var(--ov-surface-radius);
 	order: 3;
 	justify-content: space-evenly;
 	align-items: none;
@@ -73,25 +75,27 @@
 
 .participant-name-container p {
 	font-size: 13px;
-	font-weight: bold;
-	color: var(--ov-panel-text-color);
+	font-style: italic;
+	color: var(--ov-primary-action-color);
+	padding: 5px;
 }
 
 .chat-message {
 	position: relative;
-	border-radius: var(--ov-panel-radius);
+	border-radius: var(--ov-surface-radius);
 	padding: 8px;
-	color: #000000;
+	color: var(--ov-secondary-action-color);
 	width: auto;
 	max-width: 95%;
-	font-size: 13px;
+	font-size: 14px;
 	word-break: break-all;
+	background-color: var(--ov-primary-action-color);
 }
 
 #send-btn {
-	border-radius: var(--ov-panel-radius);
-	color: var(--ov-light-color);
-	background-color: var(--ov-tertiary-color);
+	border-radius: var(--ov-surface-radius);
+	color: var(--ov-secondary-action-color);
+	background-color: var(--ov-primary-action-color);
 	align-self: center;
 	height: 75px;
 }
@@ -119,5 +123,5 @@
 }
 
 ::ng-deep a:-webkit-any-link {
-	color: var(--ov-tertiary-color);
+	color: var(--ov-accent-action-color);
 }
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.scss
index 16658b2f89..3dc72ca993 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.scss
@@ -1,7 +1,7 @@
 .panel-container {
 	margin: 20px;
-	background-color: var(--ov-panel-background);
-	border-radius: var(--ov-panel-radius);
+	background-color: var(--ov-surface-color);
+	border-radius: var(--ov-surface-radius);
 	max-height: calc(100% - 40px);
 	min-height: calc(100% - 40px);
 	display: flex;
@@ -41,6 +41,6 @@
 }
 
 ::-webkit-scrollbar-track {
-	background: var(--ov-light-color);
+	background: var(--ov-secondary-action-color);
 	border-radius: 4px;
 }
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss
index e6db676559..ce059ed08f 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participant-panel-item/participant-panel-item.component.scss
@@ -1,10 +1,10 @@
 :host {
 	.participant-avatar {
 		display: inherit;
-		border-radius: var(--ov-panel-radius);
+		border-radius: var(--ov-surface-radius);
 		margin: auto !important;
 		padding: 10px;
-		color: var(--ov-panel-text-color);
+		color: var(--ov-text-surface-color);
 	}
 
 	.participant-subtitle {
@@ -14,7 +14,7 @@
 	}
 	.participant-name {
 		font-weight: bold !important;
-		color: var(--ov-panel-text-color);
+		color: var(--ov-text-surface-color);
 	}
 
 	.participant-action-buttons {
@@ -53,7 +53,7 @@
 	}
 
 	.warn-btn {
-		/* background-color: var(--ov-warn-color) !important; */
-		color: var(--ov-warn-color);
+		/* background-color: var(--ov-error-color) !important; */
+		color: var(--ov-error-color);
 	}
 }
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.scss
index 2da8dc5606..df7cb9a2fa 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.scss
@@ -8,16 +8,3 @@
 	max-height: calc(100% - 60px);
 	overflow: auto;
 }
-
-.message-container {
-	padding: 5px;
-	background-color: var(--ov-light-color);
-	color: var(--ov-panel-text-color);
-	text-align: center;
-	margin: 5px 5px;
-	font-size: 12px;
-}
-
-.message-container p {
-	margin: 0;
-}
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.scss
index 77e6b11ae8..ff95ec7594 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.scss
@@ -11,7 +11,7 @@
 
 	.item-menu {
 		padding-right: 5px;
-		border-right: 1px solid var(--ov-secondary-color);
+		border-right: 1px solid var(--ov-secondary-action-color);
 		width: 170px;
 	}
 	.item-menu.mobile {
@@ -29,17 +29,17 @@
 	}
 
 	mat-list-option[aria-selected='true'] {
-		background: var(--ov-tertiary-color) !important;
-		border-radius: var(--ov-panel-radius);
+		background: var(--ov-accent-action-color) !important;
+		border-radius: var(--ov-surface-radius);
 		::ng-deep .mat-mdc-list-item-unscoped-content,
 		mat-icon {
-			color: var(--ov-panel-background) !important;
+			color: var(--ov-secondary-action-color) !important;
 		}
 	}
 
 	mat-list-option[aria-selected='false'] {
 		mat-icon {
-			color: var(--ov-panel-text-color) !important;
+			color: var(--ov-text-surface-color) !important;
 		}
 	}
 
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html
index f21b2e462c..fe4e0fa5ed 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html
@@ -5,8 +5,7 @@
 		<span>{{ 'PREJOIN.PREPARING' | translate }}</span>
 	</div>
 
-	<div *ngIf="!isLoading"  id="prejoin-frame">
-		<!-- <img *ngIf="!isMinimal && showLogo" id="branding-logo" src="assets/images/lodgo.png" ovLogo /> -->
+	<div *ngIf="!isLoading"  id="prejoin-card">
 		<ov-lang-selector *ngIf="!isMinimal" [compact]="true" class="lang-btn" (onLangChanged)="onLangChanged.emit($event)">
 		</ov-lang-selector>
 
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss
index aec74c6003..64c6be8849 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.scss
@@ -1,5 +1,9 @@
 :host {
-	--ov-primary-color-lighter: color-mix(in srgb, var(--ov-primary-color), #fff 15%);
+	.container {
+		height: 100%;
+		background-color: var(--ov-background-color);
+		display: flex;
+	}
 
 	#loading-container {
 		position: absolute;
@@ -10,34 +14,19 @@
 		margin: auto;
 		text-align: -webkit-center;
 		text-align: -moz-center;
-		color: #fff;
-	}
-
-	.container {
-		height: 100%;
-		background-color: var(--ov-secondary-color);
-		display: flex;
+		color: var(--ov-text-primary-color);
 	}
 
-	#features-container {
-		margin: auto;
-		width: 70vh;
-		height: 70vh;
-		margin-right: 0;
-		box-shadow: -6px 2px 20px 0px #0003;
-		background-color: var(--ov-accent-color);
-	}
-
-	#prejoin-frame {
+	#prejoin-card {
 		display: grid;
 		align-content: center;
 		margin: auto;
 		// margin-left: 0px;
-		border-radius: var(--ov-panel-radius);
+		border-radius: var(--ov-surface-radius);
 		width: 70vh;
 		height: 85vh;
 		padding: 20px;
-		background-color: var(--ov-panel-background);
+		background-color: var(--ov-surface-color);
 		box-shadow: 6px 4px 20px 0px #0003;
 		position: relative;
 	}
@@ -50,20 +39,6 @@
 		font-size: 14px !important;
 	}
 
-	#branding-logo {
-		position: absolute;
-		top: 10px;
-		left: 10px;
-		max-width: 50px;
-	}
-
-	#branding-logo {
-		border-radius: var(--ov-panel-radius);
-		max-width: 35px;
-		max-height: 35px;
-		margin-right: 10px;
-	}
-
 	.video-container {
 		margin: auto;
 		min-height: 45vh;
@@ -77,9 +52,6 @@
 		position: relative;
 	}
 
-	.media-panel {
-		background-color: var(--ov-light-color);
-	}
 	.media-controls-container {
 		display: flex;
 		flex-wrap: wrap;
@@ -107,10 +79,10 @@
 	}
 
 	#join-button {
-		background-color: var(--ov-tertiary-color);
-		color: var(--ov-text-color);
+		background-color: var(--ov-primary-action-color);
+		color: var(--ov-text-primary-color);
 		font-weight: bold;
-		border-radius: var(--ov-video-radius);
+		border-radius: var(--ov-surface-radius);
 		width: 100%;
 		height: 50px;
 	}
@@ -119,7 +91,7 @@
 		font-size: 12px;
 		font-weight: bold;
 		font-style: italic;
-		color: var(--ov-warn-color);
+		color: var(--ov-error-color);
 	}
 
 	/* Styles for screens up to 768px wide */
@@ -128,7 +100,7 @@
 		.container {
 			padding: 0px;
 		}
-		#prejoin-frame {
+		#prejoin-card {
 			margin: auto;
 			height: 100%;
 			padding: 0px;
@@ -145,26 +117,6 @@
 		}
 	}
 
-	/* Styles for screens from 768px to 992px wide */
-	@media (min-width: 768px) and (max-width: 992px) {
-		/* Specific styles for medium screens */
-	}
-
-	/* Styles for screens from 992px to 1200px wide */
-	@media (min-width: 992px) and (max-width: 1200px) {
-		/* Specific styles for large screens */
-	}
-
-	/* Styles for screens over 1200px wide */
-	@media (min-width: 1200px) {
-		/* Specific styles for extra-large screens */
-	}
-
-	/* Styles for screens with vertical orientation */
-	@media (orientation: portrait) {
-		/* Specific styles for screens in portrait orientation */
-	}
-
 	/* Styles for screens with horizontal orientation */
 	@media (max-width: 800) and (orientation: landscape) {
 		/* Specific styles for screens in landscape orientation */
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.scss
index 005964f084..239a6ec42a 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.scss
@@ -1,5 +1,5 @@
 #session-container {
-	background-color: var(--ov-primary-color);
+	background-color: var(--ov-background-color);
 	/* min-width: 400px; */
 	height: 100%;
 }
@@ -12,7 +12,7 @@
 	margin: auto;
 	text-align: -webkit-center;
 	text-align: -moz-center;
-	color: var(--ov-text-color);
+	color: var(--ov-text-primary-color);
 }
 
 .sidenav-container {
@@ -29,7 +29,7 @@
 	align-items: center;
 	justify-content: center;
 	width: 380px;
-	background-color: var(--ov-primary-color);
+	background-color: var(--ov-background-color);
 	border-left: none;
 	position: absolute;
 	z-index: 1;
@@ -57,21 +57,21 @@
 }
 
 .mat-drawer-container {
-	background-color: var(--ov-primary-color);
+	background-color: var(--ov-background-color);
 }
 
 #toolbar-container,
 #footer-container {
-	background-color: var(--ov-primary-color);
+	background-color: var(--ov-background-color);
 	/* min-width: 400px !important; */
 	width: 100%;
 	height: 70px;
 }
 
 #footer {
-	color: #ffffff;
+	color: var(--ov-text-primary-color);
 	height: 25px;
-	background-color: #333333;
+	background-color: var(--ov-background-color);
 	padding: 0 14px 0 0;
 	position: absolute;
 	bottom: 0;
@@ -111,12 +111,12 @@
 
 /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
 ::ng-deep .mat-form-field-label {
-	color: var(--ov-panel-text-color) !important;
+	color: var(--ov-text-primary-color) !important;
 }
 
 /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
 ::ng-deep .mat-mdc-form-field.mat-focused .mat-form-field-ripple {
-	background-color: var(--ov-panel-text-color) !important;
+	background-color: var(--ov-text-primary-color) !important;
 }
 
 ::ng-deep .mat-drawer {
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.html
index d97865b2a2..ea1b47c279 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.html
@@ -1,4 +1,4 @@
-<div class="device-container-element">
+<div class="device-container-element" [class.mute-btn]="!isMicrophoneEnabled">
 	<!-- <button mat-stroked-button [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger" id="audio-devices-menu">
 		<mat-icon class="audio-icon">mic</mat-icon>
 		<span class="device-label"> {{ microphoneSelected.label }} </span>
@@ -22,7 +22,7 @@
 					id="microphone-button"
 					[disableRipple]="true"
 					[disabled]="!hasAudioDevices || microphoneStatusChanging"
-					[class.warn-btn]="!isMicrophoneEnabled"
+					[class.mute-btn]="!isMicrophoneEnabled"
 					(click)="toggleMic($event)"
 					[matTooltip]="isMicrophoneEnabled ? ('TOOLBAR.MUTE_AUDIO' | translate) : ('TOOLBAR.UNMUTE_AUDIO' | translate)"
 					[matTooltipDisabled]="!hasAudioDevices"
@@ -46,7 +46,7 @@
 
 	<div id="audio-devices-form" *ngIf="microphones.length === 0">
 		<div id="mat-select-trigger">
-			<button mat-icon-button id="microphone-button" class="warn-btn" [disabled]="true">
+			<button mat-icon-button id="microphone-button" class="mute-btn" [disabled]="true">
 				<mat-icon id="mic_off"> mic_off </mat-icon>
 			</button>
 			<span id="audio-devices-not-found"> {{ 'PREJOIN.NO_AUDIO_DEVICE' | translate }} </span>
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.scss
index 880edee3ec..94cf0975bd 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.scss
@@ -1,9 +1,12 @@
-:host {
-	--ov-light-color-darker: color-mix(in srgb, var(--ov-light-color), #000 15%);
+$ov-selection-color: #d4d6d7;
 
+:host {
 	.device-container-element {
-		border-radius: var(--ov-panel-radius);
-		border: 1px solid var(--ov-light-color-darker);
+		border-radius: var(--ov-surface-radius);
+		border: 1px solid $ov-selection-color;
+	}
+	.device-container-element.mute-btn {
+		border: 1px solid var(--ov-error-color);
 	}
 	#audio-devices-form {
 		width: 100%;
@@ -15,7 +18,7 @@
 	}
 
 	#microphone-button {
-		color: var(--ov-secondary-color);
+		color:#000000
 	}
 
 	::ng-deep .mat-mdc-text-field-wrapper,
@@ -31,15 +34,15 @@
 	::ng-deep .mat-mdc-text-field-wrapper {
 		padding-left: 0px;
 		padding-right: 10px;
-		background-color: var(--ov-panel-background) !important;
-		border-radius: var(--ov-panel-radius);
+		background-color: var(--ov-surface-color) !important;
+		border-radius: var(--ov-surface-radius);
 	}
 	::ng-deep .mdc-button--unelevated {
-		border-top-left-radius: var(--ov-panel-radius);
-		border-bottom-left-radius: var(--ov-panel-radius);
+		border-top-left-radius: var(--ov-surface-radius);
+		border-bottom-left-radius: var(--ov-surface-radius);
 		border-bottom-right-radius: 0px !important;
 		border-top-right-radius: 0px !important;
-		background-color: var(--ov-light-color-darker) !important;
+		background-color: $ov-selection-color !important;
 		width: 48px !important;
 		min-width: 48px !important;
 		padding: 0;
@@ -72,13 +75,28 @@
 	}
 
 	::ng-deep .mat-mdc-button-touch-target {
-		border-radius: var(--ov-panel-radius) !important;
+		border-radius: var(--ov-surface-radius) !important;
 	}
 
-	.warn-btn {
-		color: var(--ov-warn-color) !important;
+	.mute-btn {
+		color: #ffffff !important;
+		background-color: var(--ov-error-color) !important;
 	}
 }
 ::ng-deep .mat-mdc-select-panel {
-	background-color: var(--ov-panel-background) !important;
+	background-color: var(--ov-surface-color) !important;
+}
+
+::ng-deep .mat-mdc-option {
+	padding: 10px 10px !important;
+}
+
+::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
+	color: var(--ov-primary-action-color) !important;
+}
+::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after {
+	border-bottom-color: var(--ov-primary-action-color) !important;
+}
+::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple) {
+	background-color: $ov-selection-color !important;
 }
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/captions/captions.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/captions/captions.component.scss
index f30de06e5a..be6739c13d 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/captions/captions.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/captions/captions.component.scss
@@ -3,15 +3,15 @@
 }
 
 .section-description {
-	color: var(--ov-panel-text-color);
+	color: var(--ov-text-primary-color);
 	font-size: 12px;
 	padding: 0px 5px;
 	display: block;
 }
 
 .lang-button {
-	background-color: var(--ov-logo-background-color);
-	color: var(--ov-text-color);
+	background-color: var(--ov-secondary-action-color);
+	color: var(--ov-text-primary-color);
 }
 
 .pro-feature {
@@ -24,7 +24,7 @@
 
 /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
 ::ng-deep .mat-mdc-slide-toggle.mat-checked .mat-slide-toggle-bar {
-	background-color: var(--ov-tertiary-color);
+	background-color: var(--ov-accent-action-color);
 }
 
 /* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/lang-selector/lang-selector.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/lang-selector/lang-selector.component.scss
index 479172ccf0..2f496c0ce8 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/lang-selector/lang-selector.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/lang-selector/lang-selector.component.scss
@@ -1,12 +1,10 @@
-$ov-light-color-lighter: color-mix(in srgb, var(--ov-light-color), #fff 40%);
 
 .lang-button {
-	background-color: var(--ov-secondary-color) !important;
-	color: var(--ov-text-color);
+	background-color: var(--ov-primary-action-color) !important;
+	color: var(--ov-secondary-action-color);
 }
 ::ng-deep .mat-mdc-menu-panel {
-	border-radius: var(--ov-panel-radius) !important;
-	background-color: var(--ov-panel-background) !important;
-	border: 1px solid $ov-light-color-lighter !important;
+	border-radius: var(--ov-surface-radius) !important;
+	background-color: var(--ov-surface-color) !important;
 	box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.2) !important;
 }
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/participant-name-input/participant-name-input.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/participant-name-input/participant-name-input.component.scss
index df5157e118..9a0bd864b6 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/participant-name-input/participant-name-input.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/participant-name-input/participant-name-input.component.scss
@@ -1,14 +1,14 @@
+$ov-selection-color: #d4d6d7;
 :host {
-	--ov-light-color-darker: color-mix(in srgb, var(--ov-light-color), #000 15%);
 
 	#name-input-container {
 		height: 70px;
-		border-radius: var(--ov-panel-radius);
+		border-radius: var(--ov-surface-radius);
 	}
 
 	#name-input-container mat-form-field {
 		width: 100%;
-		color: var(--ov-secondary-color);
+		color: var(--ov-secondary-action-color);
 	}
 
 	::ng-deep .mat-mdc-form-field-infix {
@@ -18,18 +18,18 @@
 	::ng-deep .mat-mdc-text-field-wrapper {
 		padding: 0;
 		height: 70px;
-		background-color: var(--ov-panel-background) !important;
+		background-color: var(--ov-surface-color) !important;
 
 	}
 	::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
 		border: 0px !important;
 	}
 	::ng-deep .mdc-button--unelevated {
-		border-top-left-radius: var(--ov-panel-radius) !important;
-		border-bottom-left-radius: var(--ov-panel-radius) !important;
+		border-top-left-radius: var(--ov-surface-radius) !important;
+		border-bottom-left-radius: var(--ov-surface-radius) !important;
 		border-bottom-right-radius: 0px !important;
 		border-top-right-radius: 0px !important;
-		background-color: var(--ov-light-color-darker) !important;
+		background-color: $ov-selection-color !important;
 		width: 48px !important;
 		min-width: 48px !important;
 		padding: 0;
@@ -38,7 +38,7 @@
 
 	.error {
 		::ng-deep .mdc-button--unelevated {
-			background-color: var(--ov-warn-color) !important;
+			background-color: var(--ov-error-color) !important;
 		}
 	}
 
@@ -47,16 +47,20 @@
 		width: 24px;
 		font-size: 24px !important;
 		margin: auto;
-		color: var(--ov-secondary-color) !important;
+		color: #000000 !important;
 	}
 
 	input {
 		padding-left: 10px !important;
-		border-top-right-radius: var(--ov-panel-radius) !important;
-		border-bottom-right-radius: var(--ov-panel-radius) !important;
+		border-top-right-radius: var(--ov-surface-radius) !important;
+		border-bottom-right-radius: var(--ov-surface-radius) !important;
 		border-bottom-left-radius: 0px !important;
 		border-top-left-radius: 0px !important;
-		border: 1px solid var(--ov-light-color-darker);
-		color: var(--ov-panel-text-color);
+		border: 1px solid $ov-selection-color;
+		color: #000000;
 	}
 }
+
+::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
+	color: var(--ov-primary-action-color) !important;
+}
\ No newline at end of file
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.html
index c29a6bc8ba..fad8763725 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.html
@@ -1,4 +1,4 @@
-<div class="device-container-element">
+<div class="device-container-element" [class.mute-btn]="!isCameraEnabled">
 	<mat-form-field id="video-devices-form" *ngIf="cameras.length > 0">
 		<mat-select
 			[disabled]="!hasVideoDevices"
@@ -12,7 +12,7 @@
 					id="camera-button"
 					[disableRipple]="true"
 					[disabled]="!hasVideoDevices || cameraStatusChanging"
-					[class.warn-btn]="!isCameraEnabled"
+					[class.mute-btn]="!isCameraEnabled"
 					(click)="toggleCam($event)"
 					[matTooltip]="isCameraEnabled ? ('TOOLBAR.STOP_VIDEO' | translate) : ('TOOLBAR.START_VIDEO' | translate)"
 					[matTooltipDisabled]="!hasVideoDevices"
@@ -31,7 +31,7 @@
 
 	<div id="video-devices-form" *ngIf="cameras.length === 0">
 		<div id="mat-select-trigger">
-			<button mat-icon-button id="camera-button" class="warn-btn" [disabled]="true">
+			<button mat-icon-button id="camera-button" class="mute-btn" [disabled]="true">
 				<mat-icon id="videocam_off"> videocam_off </mat-icon>
 			</button>
 			<span id="video-devices-not-found"> {{ 'PREJOIN.NO_VIDEO_DEVICE' | translate }} </span>
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.scss
index bd863939d6..bbdca9ce56 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.scss
@@ -1,9 +1,11 @@
+$ov-selection-color: #d4d6d7;
 :host {
-	--ov-light-color-darker: color-mix(in srgb, var(--ov-light-color), #000 15%);
-
 	.device-container-element {
-		border-radius: var(--ov-panel-radius);
-		border: 1px solid var(--ov-light-color-darker);
+		border-radius: var(--ov-surface-radius);
+		border: 1px solid $ov-selection-color;
+	}
+	.device-container-element.mute-btn {
+		border: 1px solid var(--ov-error-color);
 	}
 	#video-devices-form {
 		width: 100%;
@@ -15,7 +17,7 @@
 	}
 
 	#camera-button {
-		color: var(--ov-secondary-color);
+		color: #000000;
 	}
 
 	::ng-deep .mat-mdc-text-field-wrapper,
@@ -31,15 +33,15 @@
 	::ng-deep .mat-mdc-text-field-wrapper {
 		padding-left: 0px;
 		padding-right: 10px;
-		background-color: var(--ov-panel-background) !important;
-		border-radius: var(--ov-panel-radius);
+		background-color: var(--ov-surface-color) !important;
+		border-radius: var(--ov-surface-radius);
 	}
 	::ng-deep .mdc-button--unelevated {
-		border-top-left-radius: var(--ov-panel-radius);
-		border-bottom-left-radius: var(--ov-panel-radius);
+		border-top-left-radius: var(--ov-surface-radius);
+		border-bottom-left-radius: var(--ov-surface-radius);
 		border-bottom-right-radius: 0px !important;
 		border-top-right-radius: 0px !important;
-		background-color: var(--ov-light-color-darker) !important;
+		background-color: $ov-selection-color !important;
 		width: 48px !important;
 		min-width: 48px !important;
 		padding: 0;
@@ -71,13 +73,32 @@
 	}
 
 	::ng-deep .mat-mdc-button-touch-target {
-		border-radius: var(--ov-panel-radius) !important;
+		border-radius: var(--ov-surface-radius) !important;
 	}
 
-	.warn-btn {
-		color: var(--ov-warn-color) !important;
+	.mute-btn {
+		color: #ffffff !important;
+		background-color: var(--ov-error-color) !important;
 	}
 }
 ::ng-deep .mat-mdc-select-panel {
-	background-color: var(--ov-panel-background) !important;
+	background-color: var(--ov-surface-color) !important;
+}
+
+::ng-deep .mat-mdc-select-panel {
+	background-color: var(--ov-surface-color) !important;
+}
+
+::ng-deep .mat-mdc-option {
+	padding: 10px 10px !important;
+}
+
+::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
+	color: var(--ov-primary-action-color-lighter) !important;
+}
+::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after {
+	border-bottom-color: var(--ov-primary-action-color-lighter) !important;
+}
+::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple) {
+	background-color: $ov-selection-color !important;
 }
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.scss
index 924dea5803..c47502df6a 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.scss
@@ -1,3 +1,5 @@
+$ov-video-elements-bg-color: var(--ov-primary-action-color);;
+$ov-video-elements-text-color: #ffffff;
 :host {
 	/* Fixes layout bug. The OV_root is created with the entire layout width and it has a weird UX behaviour */
 	.no-size {
@@ -5,21 +7,20 @@
 		width: 0px !important;
 	}
 
+	.participant-name-container {
+		background-color: $ov-video-elements-bg-color;
+		padding: 5px;
+		color: $ov-video-elements-text-color;
+		font-weight: bold;
+		border-radius: var(--ov-video-radius);
+	}
 	.participant-name {
 		padding: 0px;
 		position: absolute;
 		z-index: 999;
 		border-radius: var(--ov-video-radius);
-		color: var(--ov-text-color);
 		font-family: 'Roboto', 'RobotoDraft', Helvetica, Arial, sans-serif;
 	}
-	.participant-name-container {
-		background-color: var(--ov-secondary-color);
-		padding: 5px;
-		color: var(--ov-text-color);
-		font-weight: bold;
-		border-radius: var(--ov-video-radius);
-	}
 
 	#audio-wave-container {
 		position: absolute;
@@ -42,14 +43,14 @@
 	}
 
 	.active-btn {
-		color: var(--ov-tertiary-color) !important;
+		color: var(--ov-accent-action-color) !important;
 	}
 	.muted-btn {
-		color: var(--ov-warn-color) !important;
+		color: var(--ov-error-color) !important;
 	}
 
 	.stream-video-controls {
-		background-color: var(--ov-secondary-color);
+		background-color: $ov-video-elements-bg-color;
 		border-radius: var(--ov-video-radius);
 		width: fit-content;
 		height: 50px;
@@ -62,9 +63,9 @@
 		right: 0;
 		left: 0;
 		top: 0;
-		// border: 2px solid var(--ov-text-color);
+		// border: 2px solid var(--ov-text-primary-color);
 		button {
-			color: var(--ov-text-color);
+			color: $ov-video-elements-text-color;
 		}
 	}
 
@@ -81,7 +82,7 @@
 
 		#status-mic,
 		#status-muted-forcibly {
-			color: var(--ov-warn-color);
+			color: var(--ov-error-color);
 			font-size: 24px;
 			margin: 5px;
 		}
@@ -95,11 +96,11 @@
 		overflow: hidden;
 		background-color: transparent;
 		border-radius: var(--ov-video-radius);
-		border: 2px solid var(--ov-primary-color);
+		border: 2px solid var(--ov-background-color);
 		box-sizing: border-box;
 	}
 
 	.OV_stream.speaking {
-		border-color: var(--ov-tertiary-color);
+		border-color: var(--ov-accent-action-color);
 	}
 }
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html
index 7715702744..44e8cae478 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html
@@ -137,7 +137,7 @@
 			<button
 				*ngIf="!isMinimal && showBroadcastingButton"
 				mat-menu-item
-				id="broadcasting-btn"
+				id="toolbar-broadcasting-btn"
 				[disabled]="broadcastingStatus === _broadcastingStatus.STARTING || recordingStatus === _broadcastingStatus.STOPPING"
 				(click)="toggleBroadcasting()"
 			>
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss
index d69a979077..6139302211 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.scss
@@ -1,13 +1,12 @@
-$ov-light-color-lighter: color-mix(in srgb, var(--ov-light-color), #fff 40%);
+$ov-broadcasting-blinking-color: #5903ca;
+$ov-recording-blinking-color: #eb5144;
 
 :host {
-	--broadcasting-blinking-color: #5903ca;
-	--recording-blinking-color: var(--ov-warn-color);
 
 	#toolbar {
 		height: 100%;
 		background-color: transparent;
-		color: var(--ov-text-color);
+		color: var(--ov-text-primary-color);
 
 		.mat-mdc-icon-button {
 			--mat-mdc-button-persistent-ripple-color: transparent !important;
@@ -59,7 +58,7 @@ $ov-light-color-lighter: color-mix(in srgb, var(--ov-light-color), #fff 40%);
 	#media-buttons-container button,
 	#menu-buttons-container button {
 		border-radius: var(--ov-buttons-radius);
-		color: var(--ov-text-color);
+		color: var(--ov-secondary-action-color);
 	}
 
 	#media-buttons-container > button,
@@ -69,26 +68,26 @@ $ov-light-color-lighter: color-mix(in srgb, var(--ov-light-color), #fff 40%);
 	::ng-deep #media-buttons-container:not(#media-buttons-container > button) button {
 		// width: 40px;
 		// height: 40px;
-		background-color: var(--ov-secondary-color);
-		color: var(--ov-text-color);
+		background-color: var(--ov-primary-action-color);
+		color: var(--ov-secondary-action-color);
 		margin: 6px;
 	}
 
 	.warn-btn {
-		background-color: var(--ov-warn-color) !important;
+		background-color: var(--ov-error-color) !important;
 	}
 	#disable-screen-button > mat-icon {
-		color: var(--ov-warn-color) !important;
+		color: var(--ov-error-color) !important;
 	}
 
 	.active-btn,
 	::ng-deep .active-btn {
-		background-color: var(--ov-tertiary-color) !important;
+		background-color: var(--ov-accent-action-color) !important;
 	}
 
 	#branding-logo {
-		background-color: var(--ov-logo-background-color);
-		border-radius: var(--ov-panel-radius);
+		background-color: var(--ov-primary-action-color);
+		border-radius: var(--ov-surface-radius);
 		max-width: 35px;
 		max-height: 35px;
 		padding: 10px;
@@ -119,7 +118,7 @@ $ov-light-color-lighter: color-mix(in srgb, var(--ov-light-color), #fff 40%);
 	.recording-tag,
 	.broadcasting-tag {
 		padding: 0 10px;
-		border-radius: var(--ov-panel-radius);
+		border-radius: var(--ov-surface-radius);
 		width: fit-content;
 		font-size: 12px;
 		text-align: center;
@@ -128,10 +127,10 @@ $ov-light-color-lighter: color-mix(in srgb, var(--ov-light-color), #fff 40%);
 	}
 
 	.recording-tag {
-		background-color: var(--ov-warn-color);
+		background-color: var(--ov-error-color);
 	}
 	.broadcasting-tag {
-		background-color: var(--broadcasting-blinking-color);
+		background-color: $ov-broadcasting-blinking-color;
 	}
 
 	.recording-tag mat-icon,
@@ -147,7 +146,7 @@ $ov-light-color-lighter: color-mix(in srgb, var(--ov-light-color), #fff 40%);
 	}
 
 	#leave-btn {
-		background-color: var(--ov-warn-color) !important;
+		background-color: var(--ov-error-color) !important;
 		border-radius: var(--ov-leave-button-radius) !important;
 		width: 65px !important;
 	}
@@ -181,14 +180,14 @@ $ov-light-color-lighter: color-mix(in srgb, var(--ov-light-color), #fff 40%);
 		/* Animation for recording blinking */
 		@keyframes blinker-recording {
 			50% {
-				background-color: var(--recording-blinking-color);
+				background-color: $ov-recording-blinking-color;
 			}
 		}
 
 		/* Animation for broadcasting blinking */
 		@keyframes blinker-broadcasting {
 			50% {
-				background-color: var(--broadcasting-blinking-color);
+				background-color: $ov-broadcasting-blinking-color;
 			}
 		}
 
@@ -234,13 +233,15 @@ $ov-light-color-lighter: color-mix(in srgb, var(--ov-light-color), #fff 40%);
 	}
 }
 
-::ng-deep #broadcasting-btn > .mat-icon {
-	color: #5903ca !important;
+::ng-deep #toolbar-broadcasting-btn > .mat-icon {
+	color: $ov-broadcasting-blinking-color !important;
+}
+::ng-deep #recording-btn > .mat-icon {
+	color: $ov-recording-blinking-color !important;
 }
 
 ::ng-deep .mat-mdc-menu-panel {
-	border-radius: var(--ov-panel-radius) !important;
-	background-color: var(--ov-panel-background) !important;
-	border: 1px solid $ov-light-color-lighter !important;
+	border-radius: var(--ov-surface-radius) !important;
+	background-color: var(--ov-surface-color) !important;
 	box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.2) !important;
 }
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.scss b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.scss
index 4447a21737..f226fffc55 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.scss
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.scss
@@ -3,7 +3,7 @@
 	height: 100%;
 }
 #vc-container {
-	background-color: var(--ov-primary-color);
+	background-color: var(--ov-background-color);
 }
 
 #pre-join-container {
@@ -11,7 +11,7 @@
 }
 
 .error-icon {
-	color: var(--ov-warn-color);
+	color: var(--ov-error-color);
 }
 
 #spinner {
@@ -26,7 +26,7 @@
 }
 
 ::ng-deep .mat-mdc-progress-spinner {
-	--mdc-circular-progress-active-indicator-color: var(--ov-tertiary-color);
+	--mdc-circular-progress-active-indicator-color: var(--ov-accent-action-color);
 }
 
 /* Private css variables */
diff --git a/openvidu-components-angular/src/styles.scss b/openvidu-components-angular/src/styles.scss
index d105820597..f38b2a8462 100644
--- a/openvidu-components-angular/src/styles.scss
+++ b/openvidu-components-angular/src/styles.scss
@@ -27,21 +27,47 @@ body {
 
 // Custom openvidu-components styles
 :root {
-	--ov-primary-color: #303030;
-	--ov-secondary-color: #3e3f3f;
-	--ov-tertiary-color: #598eff;
-	--ov-warn-color: #eb5144;
-	--ov-accent-color: #ffae35;
-	--ov-light-color: #e6e6e6;
+	--ov-background-color: #1f2020;
+	--ov-surface-color: #ffffff;
 
-	--ov-logo-background-color: #3a3d3d;
-	--ov-text-color: #ffffff;
+	--ov-primary-action-color: #273235;
+	--ov-secondary-action-color: #f1f1f1;
+	--ov-accent-action-color: #0089ab;
 
-	--ov-panel-text-color: #1d1d1d;
-	--ov-panel-background: #ffffff;
+	--ov-error-color: #eb5144;
+	--ov-warn-color: #ffba53;
+
+	--ov-text-primary-color: #ffffff;
+	--ov-text-surface-color: #1d1d1d;
 
 	--ov-buttons-radius: 50%;
 	--ov-leave-button-radius: 10px;
 	--ov-video-radius: 5px;
-	--ov-panel-radius: 5px;
+	--ov-surface-radius: 5px;
 }
+
+/*
+--ov-primary-color: #303030; -> --ov-background-color
+
+						+		-> --ov-primary-action-color
+--ov-secondary-color: #3e3f3f; -> --ov-secondary-action-color
+--ov-tertiary-color: #598eff;  -> REMOVED (se usará --ov-accent-color)
+
+
+--ov-warn-color: #eb5144; -> --ov-warn-color
+						+ -> --ov-error-color
+--ov-accent-color: #ffae35; -> --ov-accent-action-color
+--ov-light-color: #e6e6e6;  -> REMOVED
+
+--ov-logo-background-color: #3a3d3d; -> REMOVED (se usará --ov-secondary-color)
+--ov-text-color: #ffffff; -> --ov-text-primary-color
+ 						-> --ov-text-secondary-color
+
+--ov-panel-text-color: #1d1d1d; -> --ov-text-color-surface
+--ov-panel-background: #ffffff; -> --ov-surface-color
+
+--ov-buttons-radius: 50%;
+--ov-leave-button-radius: 10px;
+--ov-video-radius: 5px;
+--ov-panel-radius: 5px; -> --ov-surface-radius
+*/