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 ec7c30bd..73e67fa5 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
@@ -30,6 +30,267 @@
 				width: 100%;
 			}
 		}
+
+		// Top Language Toolbar
+		.top-toolbar {
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			z-index: 1000;
+			display: flex;
+			justify-content: flex-end;
+			padding: 20px 24px;
+			background: transparent;
+		}
+
+		// Loading State
+		.loading-overlay {
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background-color: var(--ov-background-color, #f5f5f5);
+			z-index: 1000;
+
+			.loading-content {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				gap: 16px;
+
+				.loading-text {
+					color: var(--ov-text-primary-color, #333);
+					font-size: 16px;
+					font-weight: 500;
+				}
+
+				.mat-mdc-progress-spinner {
+					--mdc-circular-progress-active-indicator-color: var(--ov-primary-action-color, #4285f4);
+				}
+			}
+		}
+
+		// Main Content
+		.prejoin-main {
+			width: 100%;
+			max-width: 520px;
+			max-height: 544px;
+			background: var(--ov-surface-color, #ffffff);
+			border-radius: var(--ov-surface-radius);
+			overflow: hidden;
+			display: flex;
+			flex-direction: column;
+			box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+			animation: fadeIn 0.3s ease-out;
+			transform: translateZ(0);
+
+			// Video Preview Section
+			.video-preview-section {
+				padding: 0;
+				.video-preview-container {
+					position: relative;
+					width: 100%;
+					aspect-ratio: 4/3;
+					border-radius: var(--ov-surface-radius) var(--ov-surface-radius) 0 0;
+					overflow: hidden;
+					background: var(--ov-video-background);
+					.video-frame {
+						width: 100%;
+						height: 100%;
+						position: relative;
+
+						::ng-deep .video-element {
+							width: 100%;
+							height: 100%;
+							object-fit: cover;
+							display: block;
+
+							video {
+								width: 100%;
+								height: 100%;
+								object-fit: cover;
+								border-radius: 0;
+							}
+						}
+					}
+
+					.video-overlay {
+						position: absolute;
+						bottom: 0;
+						left: 0;
+						right: 0;
+						padding: 16px;
+						z-index: 9999;
+						display: flex;
+						justify-content: center;
+						align-items: flex-end;
+
+						.device-controls {
+							display: flex;
+							gap: 12px;
+						}
+
+						.background-control {
+							position: absolute;
+							bottom: 16px;
+							left: 16px;
+
+							.background-button {
+								width: 48px;
+								height: 48px;
+								min-width: 48px;
+								min-height: 48px;
+								background: var(--ov-primary-action-color);
+								color: var(--ov-secondary-action-color);
+								border-radius: 16px;
+								padding: 0;
+
+								&.mat-mdc-button-disabled {
+									background: var(--ov-disabled-background);
+									color: var(--ov-text-disabled-color);
+									cursor: not-allowed;
+
+									&:hover {
+										transform: none;
+									}
+								}
+
+								mat-icon {
+									font-size: 22px;
+									width: 22px;
+									height: 22px;
+									opacity: 0.9;
+									transition: opacity 0.2s ease;
+									margin: 0;
+								}
+							}
+						}
+					}
+				}
+			}
+
+			.vb-container {
+				height: fit-content;
+				overflow: hidden;
+			}
+
+			// Configuration Section
+			.configuration-section {
+				padding: 24px 24px 24px; // Added top padding since video has no padding
+				display: flex;
+				flex-direction: column;
+				gap: 20px;
+
+				.input-section {
+					::ng-deep .name-input {
+						.mat-mdc-form-field {
+							width: 100%;
+
+							.mat-mdc-text-field-wrapper {
+								border-radius: var(--ov-surface-radius);
+								background-color: var(--ov-input-background, #f8f9fa);
+								border: 1px solid var(--ov-border-color, #e0e0e0);
+								transition: all 0.2s ease;
+
+								&:hover {
+									border-color: var(--ov-primary-action-color, #4285f4);
+								}
+
+								&.mdc-text-field--focused {
+									border-color: var(--ov-primary-action-color, #4285f4);
+									box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
+								}
+							}
+
+							.mat-mdc-form-field-subscript-wrapper {
+								display: none;
+							}
+
+							input {
+								font-size: 16px;
+								font-weight: 500;
+								color: var(--ov-text-surface-color, #666);
+								padding: 16px;
+
+								&::placeholder {
+									color: var(--ov-text-surface-color, #666);
+									font-weight: 400;
+								}
+							}
+						}
+					}
+				}
+
+				.error-message {
+					display: flex;
+					align-items: center;
+					gap: 8px;
+					padding: 12px 16px;
+					background-color: rgba(244, 67, 54, 0.08);
+					border: 1px solid rgba(244, 67, 54, 0.2);
+					border-radius: var(--ov-surface-radius);
+					color: var(--ov-error-color, #d32f2f);
+
+					.error-icon {
+						font-size: 18px;
+						width: 18px;
+						height: 18px;
+					}
+
+					.error-text {
+						font-size: 14px;
+						font-weight: 500;
+					}
+				}
+
+				.join-section {
+					.join-button {
+						width: 100%;
+						height: 56px;
+						background: var(--ov-focus-color, #4285f4);
+						color: white;
+						border-radius: var(--ov-surface-radius);
+						font-size: 16px;
+						font-weight: 600;
+						letter-spacing: 0.5px;
+						transition: all 0.2s ease;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						gap: 8px;
+						box-shadow: 0 2px 8px rgba(66, 133, 244, 0.2);
+
+						&:hover:not([disabled]) {
+							background: var(--ov-primary-action-hover, #3367d6);
+							transform: translateY(-1px);
+							box-shadow: 0 4px 16px rgba(66, 133, 244, 0.3);
+						}
+
+						&:active:not([disabled]) {
+							transform: translateY(0);
+						}
+
+						&[disabled] {
+							background: var(--ov-disabled-color, #ccc);
+							color: var(--ov-disabled-text-color, #999);
+							cursor: not-allowed;
+							box-shadow: none;
+						}
+
+						.join-icon {
+							font-size: 20px;
+							width: 20px;
+							height: 20px;
+						}
+					}
+				}
+			}
+		}
 	}
 
 	@keyframes slideInFromRight {
@@ -43,265 +304,6 @@
 		}
 	}
 
-	// Top Language Toolbar
-	.top-toolbar {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		z-index: 1000;
-		display: flex;
-		justify-content: flex-end;
-		padding: 20px 24px;
-		background: transparent;
-	}
-
-	// Loading State
-	.loading-overlay {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background-color: var(--ov-background-color, #f5f5f5);
-		z-index: 1000;
-
-		.loading-content {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			gap: 16px;
-
-			.loading-text {
-				color: var(--ov-text-primary-color, #333);
-				font-size: 16px;
-				font-weight: 500;
-			}
-
-			.mat-mdc-progress-spinner {
-				--mdc-circular-progress-active-indicator-color: var(--ov-primary-action-color, #4285f4);
-			}
-		}
-	}
-
-	// Main Content
-	.prejoin-main {
-		width: 100%;
-		max-width: 520px;
-		max-height: 544px;
-		background: var(--ov-surface-color, #ffffff);
-		border-radius: var(--ov-surface-radius);
-		overflow: hidden;
-		display: flex;
-		flex-direction: column;
-		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
-	}
-
-	// Video Preview Section
-	.video-preview-section {
-		padding: 0;
-		.video-preview-container {
-			position: relative;
-			width: 100%;
-			aspect-ratio: 4/3;
-			border-radius: var(--ov-surface-radius) var(--ov-surface-radius) 0 0;
-			overflow: hidden;
-			background: var(--ov-video-background);
-			.video-frame {
-				width: 100%;
-				height: 100%;
-				position: relative;
-
-				::ng-deep .video-element {
-					width: 100%;
-					height: 100%;
-					object-fit: cover;
-					display: block;
-
-					video {
-						width: 100%;
-						height: 100%;
-						object-fit: cover;
-						border-radius: 0;
-					}
-				}
-			}
-
-			.video-overlay {
-				position: absolute;
-				bottom: 0;
-				left: 0;
-				right: 0;
-				padding: 16px;
-				z-index: 9999;
-				display: flex;
-				justify-content: center;
-				align-items: flex-end;
-
-				.device-controls {
-					display: flex;
-					gap: 12px;
-				}
-
-				.background-control {
-					position: absolute;
-					bottom: 16px;
-					left: 16px;
-
-					.background-button {
-						width: 48px;
-						height: 48px;
-						min-width: 48px;
-						min-height: 48px;
-						background: var(--ov-primary-action-color);
-						color: var(--ov-secondary-action-color);
-						border-radius: 16px;
-						padding: 0;
-
-						&.mat-mdc-button-disabled {
-							background:var(--ov-disabled-background);
-							color: var(--ov-text-disabled-color);
-							cursor: not-allowed;
-
-							&:hover {
-								transform: none;
-							}
-						}
-
-						mat-icon {
-							font-size: 22px;
-							width: 22px;
-							height: 22px;
-							opacity: 0.9;
-							transition: opacity 0.2s ease;
-							margin: 0;
-						}
-					}
-				}
-			}
-		}
-	}
-
-	.vb-container {
-		height: fit-content;
-		overflow: hidden;
-	}
-
-	// Configuration Section
-	.configuration-section {
-		padding: 24px 24px 24px; // Added top padding since video has no padding
-		display: flex;
-		flex-direction: column;
-		gap: 20px;
-
-		.input-section {
-			::ng-deep .name-input {
-				.mat-mdc-form-field {
-					width: 100%;
-
-					.mat-mdc-text-field-wrapper {
-						border-radius: var(--ov-surface-radius);
-						background-color: var(--ov-input-background, #f8f9fa);
-						border: 1px solid var(--ov-border-color, #e0e0e0);
-						transition: all 0.2s ease;
-
-						&:hover {
-							border-color: var(--ov-primary-action-color, #4285f4);
-						}
-
-						&.mdc-text-field--focused {
-							border-color: var(--ov-primary-action-color, #4285f4);
-							box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
-						}
-					}
-
-					.mat-mdc-form-field-subscript-wrapper {
-						display: none;
-					}
-
-					input {
-						font-size: 16px;
-						font-weight: 500;
-						color: var(--ov-text-surface-color, #666);
-						padding: 16px;
-
-						&::placeholder {
-							color: var(--ov-text-surface-color, #666);
-							font-weight: 400;
-						}
-					}
-				}
-			}
-		}
-
-		.error-message {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-			padding: 12px 16px;
-			background-color: rgba(244, 67, 54, 0.08);
-			border: 1px solid rgba(244, 67, 54, 0.2);
-			border-radius: var(--ov-surface-radius);
-			color: var(--ov-error-color, #d32f2f);
-
-			.error-icon {
-				font-size: 18px;
-				width: 18px;
-				height: 18px;
-			}
-
-			.error-text {
-				font-size: 14px;
-				font-weight: 500;
-			}
-		}
-
-		.join-section {
-			.join-button {
-				width: 100%;
-				height: 56px;
-				background: var(--ov-focus-color, #4285f4);
-				color: white;
-				border-radius: var(--ov-surface-radius);
-				font-size: 16px;
-				font-weight: 600;
-				letter-spacing: 0.5px;
-				transition: all 0.2s ease;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				gap: 8px;
-				box-shadow: 0 2px 8px rgba(66, 133, 244, 0.2);
-
-				&:hover:not([disabled]) {
-					background: var(--ov-primary-action-hover, #3367d6);
-					transform: translateY(-1px);
-					box-shadow: 0 4px 16px rgba(66, 133, 244, 0.3);
-				}
-
-				&:active:not([disabled]) {
-					transform: translateY(0);
-				}
-
-				&[disabled] {
-					background: var(--ov-disabled-color, #ccc);
-					color: var(--ov-disabled-text-color, #999);
-					cursor: not-allowed;
-					box-shadow: none;
-				}
-
-				.join-icon {
-					font-size: 20px;
-					width: 20px;
-					height: 20px;
-				}
-			}
-		}
-	}
-
 	// Responsive Design
 	@media (max-width: 640px) {
 		.prejoin-container {
@@ -400,8 +402,4 @@
 			transform: translateY(0);
 		}
 	}
-	.prejoin-main {
-		animation: fadeIn 0.3s ease-out;
-		transform: translateZ(0);
-	}
 }