From f6abd1cb4c841d849c06ee54222c2c0c9cb158ed Mon Sep 17 00:00:00 2001
From: Carlos Santos <4a.santos@gmail.com>
Date: Tue, 25 Nov 2025 13:01:10 +0100
Subject: [PATCH] frontend: Refactor customization components

Moves the copy link button to a new component for additional toolbar buttons.

This allows for better organization and customization of the toolbar,
especially on mobile where space is limited. The "leave" button for
moderators is now separate.

Renamed components for better understanding and readability
---
 .../src/lib/customization/components/index.ts | 13 ++---
 .../meeting-custom-layout.component.html}     |  0
 .../meeting-custom-layout.component.scss}     |  0
 .../meeting-custom-layout.component.spec.ts}  | 10 ++--
 .../meeting-custom-layout.component.ts}       | 10 ++--
 .../meeting-invite-panel.component.html}      |  0
 .../meeting-invite-panel.component.scss}      |  0
 .../meeting-invite-panel.component.ts}        | 10 ++--
 .../meeting-participant-item.component.html}  |  0
 .../meeting-participant-item.component.scss}  |  0
 .../meeting-participant-item.component.ts}    | 10 ++--
 ...eeting-settings-extensions.component.html} |  0
 ...eeting-settings-extensions.component.scss} |  0
 ...ing-settings-extensions.component.spec.ts} | 10 ++--
 .../meeting-settings-extensions.component.ts} |  8 +--
 ...eting-toolbar-extra-buttons.component.html | 21 ++++++++
 ...eting-toolbar-extra-buttons.component.scss |  1 +
 ...meeting-toolbar-extra-buttons.component.ts | 52 +++++++++++++++++++
 ...eting-toolbar-leave-button.component.html} | 22 +-------
 ...eting-toolbar-leave-button.component.scss} |  0
 ...meeting-toolbar-leave-button.component.ts} | 33 +++---------
 ...-toolbar-more-options-menu.component.html} |  0
 ...-toolbar-more-options-menu.component.scss} |  0
 ...olbar-more-options-menu.component.spec.ts} | 10 ++--
 ...ng-toolbar-more-options-menu.component.ts} |  9 ++--
 .../lib/pages/meeting/meeting.component.html  | 17 +++---
 .../lib/pages/meeting/meeting.component.ts    | 14 +++--
 .../app-ce-meeting.component.html             | 14 ++---
 .../app-ce-meeting.component.ts               | 26 +++++-----
 29 files changed, 165 insertions(+), 125 deletions(-)
 rename meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/{meeting-layout/meeting-layout.component.html => meeting-custom-layout/meeting-custom-layout.component.html} (100%)
 rename meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/{meeting-layout/meeting-layout.component.scss => meeting-custom-layout/meeting-custom-layout.component.scss} (100%)
 rename meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/{meeting-layout/meeting-layout.component.spec.ts => meeting-custom-layout/meeting-custom-layout.component.spec.ts} (97%)
 rename meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/{meeting-layout/meeting-layout.component.ts => meeting-custom-layout/meeting-custom-layout.component.ts} (96%)
 rename meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/{meeting-share-link-panel/meeting-share-link-panel.component.html => meeting-invite-panel/meeting-invite-panel.component.html} (100%)
 rename meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/{meeting-share-link-panel/meeting-share-link-panel.component.scss => meeting-invite-panel/meeting-invite-panel.component.scss} (100%)
 rename meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/{meeting-share-link-panel/meeting-share-link-panel.component.ts => meeting-invite-panel/meeting-invite-panel.component.ts} (86%)
 rename meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/{meeting-participant-panel-item/meeting-participant-panel-item.component.html => meeting-participant-item/meeting-participant-item.component.html} (100%)
 rename meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/{meeting-participant-panel-item/meeting-participant-panel-item.component.scss => meeting-participant-item/meeting-participant-item.component.scss} (100%)
 rename meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/{meeting-participant-panel-item/meeting-participant-panel-item.component.ts => meeting-participant-item/meeting-participant-item.component.ts} (93%)
 rename meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/{meeting-settings-panel/meeting-settings-panel.component.html => meeting-settings-extensions/meeting-settings-extensions.component.html} (100%)
 rename meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/{meeting-settings-panel/meeting-settings-panel.component.scss => meeting-settings-extensions/meeting-settings-extensions.component.scss} (100%)
 rename meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/{meeting-settings-panel/meeting-settings-panel.component.spec.ts => meeting-settings-extensions/meeting-settings-extensions.component.spec.ts} (52%)
 rename meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/{meeting-settings-panel/meeting-settings-panel.component.ts => meeting-settings-extensions/meeting-settings-extensions.component.ts} (90%)
 create mode 100644 meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component.html
 create mode 100644 meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component.scss
 create mode 100644 meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component.ts
 rename meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/{meeting-toolbar-buttons/meeting-toolbar-buttons.component.html => meeting-toolbar-leave-button/meeting-toolbar-leave-button.component.html} (57%)
 rename meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/{meeting-toolbar-buttons/meeting-toolbar-buttons.component.scss => meeting-toolbar-leave-button/meeting-toolbar-leave-button.component.scss} (100%)
 rename meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/{meeting-toolbar-buttons/meeting-toolbar-buttons.component.ts => meeting-toolbar-leave-button/meeting-toolbar-leave-button.component.ts} (67%)
 rename meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/{meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.html => meeting-toolbar-more-options-menu/meeting-toolbar-more-options-menu.component.html} (100%)
 rename meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/{meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.scss => meeting-toolbar-more-options-menu/meeting-toolbar-more-options-menu.component.scss} (100%)
 rename meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/{meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.spec.ts => meeting-toolbar-more-options-menu/meeting-toolbar-more-options-menu.component.spec.ts} (50%)
 rename meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/{meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.ts => meeting-toolbar-more-options-menu/meeting-toolbar-more-options-menu.component.ts} (84%)

diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/index.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/index.ts
index be3bb0bd..db3e37f5 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/index.ts
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/index.ts
@@ -1,6 +1,7 @@
-export * from './meeting-toolbar-buttons/meeting-toolbar-buttons.component';
-export * from './meeting-share-link-panel/meeting-share-link-panel.component';
-export * from './meeting-participant-panel-item/meeting-participant-panel-item.component';
-export * from './meeting-layout/meeting-layout.component';
-export * from './meeting-settings-panel/meeting-settings-panel.component';
-export * from './meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component';
+export * from './meeting-toolbar-leave-button/meeting-toolbar-leave-button.component';
+export * from './meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component';
+export * from './meeting-invite-panel/meeting-invite-panel.component';
+export * from './meeting-participant-item/meeting-participant-item.component';
+export * from './meeting-custom-layout/meeting-custom-layout.component';
+export * from './meeting-settings-extensions/meeting-settings-extensions.component';
+export * from './meeting-toolbar-more-options-menu/meeting-toolbar-more-options-menu.component';
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.html b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-custom-layout/meeting-custom-layout.component.html
similarity index 100%
rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.html
rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-custom-layout/meeting-custom-layout.component.html
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.scss b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-custom-layout/meeting-custom-layout.component.scss
similarity index 100%
rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.scss
rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-custom-layout/meeting-custom-layout.component.scss
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.spec.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-custom-layout/meeting-custom-layout.component.spec.ts
similarity index 97%
rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.spec.ts
rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-custom-layout/meeting-custom-layout.component.spec.ts
index 5b489c0c..c8547bc9 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.spec.ts
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-custom-layout/meeting-custom-layout.component.spec.ts
@@ -7,13 +7,13 @@ import {
 	ParticipantService,
 	OpenViduService
 } from 'openvidu-components-angular';
-import { MeetingLayoutComponent } from './meeting-layout.component';
+import { MeetingCustomLayoutComponent } from './meeting-custom-layout.component';
 import { MeetLayoutService } from '../../../services/layout.service';
 import { MeetLayoutMode } from '../../../models/layout.model';
 
 describe('MeetingLayoutComponent', () => {
-	let component: MeetingLayoutComponent;
-	let fixture: ComponentFixture<MeetingLayoutComponent>;
+	let component: MeetingCustomLayoutComponent;
+	let fixture: ComponentFixture<MeetingCustomLayoutComponent>;
 	let mockLayoutService: jasmine.SpyObj<MeetLayoutService>;
 	let mockParticipantService: jasmine.SpyObj<ParticipantService>;
 	let mockOpenViduService: jasmine.SpyObj<OpenViduService>;
@@ -56,7 +56,7 @@ describe('MeetingLayoutComponent', () => {
 		});
 
 		await TestBed.configureTestingModule({
-			imports: [MeetingLayoutComponent],
+			imports: [MeetingCustomLayoutComponent],
 			providers: [
 				{ provide: MeetLayoutService, useValue: mockLayoutService },
 				{ provide: ParticipantService, useValue: mockParticipantService },
@@ -65,7 +65,7 @@ describe('MeetingLayoutComponent', () => {
 			]
 		}).compileComponents();
 
-		fixture = TestBed.createComponent(MeetingLayoutComponent);
+		fixture = TestBed.createComponent(MeetingCustomLayoutComponent);
 		component = fixture.componentInstance;
 	});
 
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-custom-layout/meeting-custom-layout.component.ts
similarity index 96%
rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.ts
rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-custom-layout/meeting-custom-layout.component.ts
index 0e107ef4..4539d504 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-layout/meeting-layout.component.ts
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-custom-layout/meeting-custom-layout.component.ts
@@ -15,19 +15,19 @@ import { MeetingService } from '../../../services/meeting/meeting.service';
  * active speakers to maximize client-side performance and scalability.
  */
 @Component({
-	selector: 'ov-meeting-layout',
+	selector: 'ov-meeting-custom-layout',
 	imports: [OpenViduComponentsUiModule, ShareMeetingLinkComponent],
-	templateUrl: './meeting-layout.component.html',
-	styleUrl: './meeting-layout.component.scss'
+	templateUrl: './meeting-custom-layout.component.html',
+	styleUrl: './meeting-custom-layout.component.scss'
 })
-export class MeetingLayoutComponent {
+export class MeetingCustomLayoutComponent {
 	private readonly loggerSrv = inject(LoggerService);
 	protected readonly layoutService = inject(MeetLayoutService);
 	protected readonly openviduService = inject(OpenViduService);
 	protected meetingContextService = inject(MeetingContextService);
 	protected meetingService = inject(MeetingService);
 	protected readonly destroyRef = inject(DestroyRef);
-	private readonly log: ILogger = this.loggerSrv.get('MeetingLayoutComponent');
+	private readonly log: ILogger = this.loggerSrv.get('MeetingCustomLayoutComponent');
 	protected readonly linkOverlayTitle = 'Start collaborating';
 	protected readonly linkOverlaySubtitle = 'Share this link to bring others into the meeting';
 	protected readonly linkOverlayTitleSize: 'sm' | 'md' | 'lg' | 'xl' = 'xl';
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-share-link-panel/meeting-share-link-panel.component.html b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-invite-panel/meeting-invite-panel.component.html
similarity index 100%
rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-share-link-panel/meeting-share-link-panel.component.html
rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-invite-panel/meeting-invite-panel.component.html
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-share-link-panel/meeting-share-link-panel.component.scss b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-invite-panel/meeting-invite-panel.component.scss
similarity index 100%
rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-share-link-panel/meeting-share-link-panel.component.scss
rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-invite-panel/meeting-invite-panel.component.scss
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-share-link-panel/meeting-share-link-panel.component.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-invite-panel/meeting-invite-panel.component.ts
similarity index 86%
rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-share-link-panel/meeting-share-link-panel.component.ts
rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-invite-panel/meeting-invite-panel.component.ts
index 9b6a2335..80ec3874 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-share-link-panel/meeting-share-link-panel.component.ts
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-invite-panel/meeting-invite-panel.component.ts
@@ -10,16 +10,16 @@ import { LoggerService } from 'openvidu-components-angular';
  * inside the participants panel.
  */
 @Component({
-	selector: 'ov-meeting-share-link-panel',
-	templateUrl: './meeting-share-link-panel.component.html',
-	styleUrls: ['./meeting-share-link-panel.component.scss'],
+	selector: 'ov-meeting-invite-panel',
+	templateUrl: './meeting-invite-panel.component.html',
+	styleUrls: ['./meeting-invite-panel.component.scss'],
 	imports: [CommonModule, ShareMeetingLinkComponent]
 })
-export class MeetingShareLinkPanelComponent {
+export class MeetingInvitePanelComponent {
 	protected meetingContextService = inject(MeetingContextService);
 	protected meetingService = inject(MeetingService);
 	protected loggerService = inject(LoggerService);
-	protected log = this.loggerService.get('OpenVidu Meet - MeetingShareLinkPanel');
+	protected log = this.loggerService.get('OpenVidu Meet - MeetingInvitePanel');
 
 	/**
 	 * Computed signal to determine if the share link should be shown
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-panel-item/meeting-participant-panel-item.component.html b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-item/meeting-participant-item.component.html
similarity index 100%
rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-panel-item/meeting-participant-panel-item.component.html
rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-item/meeting-participant-item.component.html
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-panel-item/meeting-participant-panel-item.component.scss b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-item/meeting-participant-item.component.scss
similarity index 100%
rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-panel-item/meeting-participant-panel-item.component.scss
rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-item/meeting-participant-item.component.scss
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-panel-item/meeting-participant-panel-item.component.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-item/meeting-participant-item.component.ts
similarity index 93%
rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-panel-item/meeting-participant-panel-item.component.ts
rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-item/meeting-participant-item.component.ts
index 8cb4d2c3..5f335621 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-panel-item/meeting-participant-panel-item.component.ts
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-participant-item/meeting-participant-item.component.ts
@@ -24,18 +24,18 @@ export interface ParticipantDisplayProperties {
  * This component receives context from the template (participant, localParticipant).
  */
 @Component({
-	selector: 'ov-meeting-participant-panel-item',
-	templateUrl: './meeting-participant-panel-item.component.html',
-	styleUrls: ['./meeting-participant-panel-item.component.scss'],
+	selector: 'ov-meeting-participant-item',
+	templateUrl: './meeting-participant-item.component.html',
+	styleUrls: ['./meeting-participant-item.component.scss'],
 	imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule, OpenViduComponentsUiModule]
 })
-export class MeetingParticipantPanelItemComponent {
+export class MeetingParticipantItemComponent {
 	// Template reference for the component's template
 	@ViewChild('template', { static: true }) template!: TemplateRef<any>;
 
 	protected meetingService: MeetingService = inject(MeetingService);
 	protected loggerService = inject(LoggerService);
-	protected log = this.loggerService.get('OpenVidu Meet - ParticipantPanelItem');
+	protected log = this.loggerService.get('OpenVidu Meet - MeetingParticipantItem');
 
 	// Tooltips (could be made configurable in the future if needed)
 	protected readonly moderatorBadgeTooltip = 'Moderator';
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.html b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-extensions/meeting-settings-extensions.component.html
similarity index 100%
rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.html
rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-extensions/meeting-settings-extensions.component.html
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.scss b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-extensions/meeting-settings-extensions.component.scss
similarity index 100%
rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.scss
rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-extensions/meeting-settings-extensions.component.scss
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.spec.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-extensions/meeting-settings-extensions.component.spec.ts
similarity index 52%
rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.spec.ts
rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-extensions/meeting-settings-extensions.component.spec.ts
index 48cf8846..d67d9156 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.spec.ts
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-extensions/meeting-settings-extensions.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { MeetingSettingsPanelComponent } from './meeting-settings-panel.component';
+import { MeetingSettingsExtensionsComponent } from './meeting-settings-extensions.component';
 
 describe('MeetingSettingsPanelComponent', () => {
-  let component: MeetingSettingsPanelComponent;
-  let fixture: ComponentFixture<MeetingSettingsPanelComponent>;
+  let component: MeetingSettingsExtensionsComponent;
+  let fixture: ComponentFixture<MeetingSettingsExtensionsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MeetingSettingsPanelComponent]
+      imports: [MeetingSettingsExtensionsComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(MeetingSettingsPanelComponent);
+    fixture = TestBed.createComponent(MeetingSettingsExtensionsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-extensions/meeting-settings-extensions.component.ts
similarity index 90%
rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.ts
rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-extensions/meeting-settings-extensions.component.ts
index 795251ec..bd992d0d 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-panel/meeting-settings-panel.component.ts
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-settings-extensions/meeting-settings-extensions.component.ts
@@ -15,7 +15,7 @@ import { MeetingContextService } from '../../../services/meeting/meeting-context
  * Component for additional settings in the Settings Panel.
  */
 @Component({
-	selector: 'ov-meeting-settings-panel',
+	selector: 'ov-meeting-settings-extensions',
 	imports: [
 		CommonModule,
 		MatIconModule,
@@ -26,10 +26,10 @@ import { MeetingContextService } from '../../../services/meeting/meeting-context
 		MatSelectModule,
 		FormsModule
 	],
-	templateUrl: './meeting-settings-panel.component.html',
-	styleUrl: './meeting-settings-panel.component.scss'
+	templateUrl: './meeting-settings-extensions.component.html',
+	styleUrl: './meeting-settings-extensions.component.scss'
 })
-export class MeetingSettingsPanelComponent {
+export class MeetingSettingsExtensionsComponent {
 	private readonly layoutService = inject(MeetLayoutService);
 	protected readonly meetingContextService = inject(MeetingContextService);
 
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component.html b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component.html
new file mode 100644
index 00000000..7353b467
--- /dev/null
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component.html
@@ -0,0 +1,21 @@
+<!-- Copy Link Button -->
+@if (showCopyLinkButton()) {
+	@if (isMobile()) {
+		<!-- It will appear inside of a menu on mobile view -->
+		<button id="copy-speaker-link" mat-menu-item (click)="onCopyLinkClick()" [disableRipple]="true">
+			<mat-icon>link</mat-icon>
+			<span class="button-text">{{ copyLinkText }}</span>
+		</button>
+	} @else {
+		<!-- It will appear as an icon button on desktop view -->
+		<button
+			id="copy-speaker-link"
+			mat-icon-button
+			(click)="onCopyLinkClick()"
+			[disableRipple]="true"
+			[matTooltip]="copyLinkTooltip"
+		>
+			<mat-icon>link</mat-icon>
+		</button>
+	}
+}
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component.scss b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component.scss
new file mode 100644
index 00000000..408d6661
--- /dev/null
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component.scss
@@ -0,0 +1 @@
+// Additional toolbar buttons styling
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component.ts
new file mode 100644
index 00000000..81945ae8
--- /dev/null
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-extra-buttons/meeting-toolbar-extra-buttons.component.ts
@@ -0,0 +1,52 @@
+import { Component, inject, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MeetingContextService } from '../../../services/meeting/meeting-context.service';
+import { MeetingService } from '../../../services/meeting/meeting.service';
+import { LoggerService } from 'openvidu-components-angular';
+
+/**
+ * Component for extra toolbar buttons (like copy meeting link).
+ * These buttons can appear inside the "More Options" menu on mobile.
+ */
+@Component({
+	selector: 'ov-meeting-toolbar-extra-buttons',
+	templateUrl: './meeting-toolbar-extra-buttons.component.html',
+	styleUrls: ['./meeting-toolbar-extra-buttons.component.scss'],
+	imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule]
+})
+export class MeetingToolbarExtraButtonsComponent {
+	protected meetingContextService = inject(MeetingContextService);
+	protected meetingService = inject(MeetingService);
+	protected loggerService = inject(LoggerService);
+	protected log = this.loggerService.get('OpenVidu Meet - MeetingToolbarExtraButtons');
+	protected readonly copyLinkTooltip = 'Copy the meeting link';
+	protected readonly copyLinkText = 'Copy meeting link';
+
+	/**
+	 * Whether to show the copy link button
+	 */
+	protected showCopyLinkButton = computed(() => {
+		return this.meetingContextService.canModerateRoom();
+	});
+
+	/**
+	 * Whether the device is mobile (affects button style)
+	 */
+	protected isMobile = computed(() => {
+		return this.meetingContextService.isMobile();
+	});
+
+	onCopyLinkClick(): void {
+		const room = this.meetingContextService.meetRoom();
+		if (!room) {
+			this.log.e('Cannot copy link: meeting room is undefined');
+			return;
+		}
+
+		this.meetingService.copyMeetingSpeakerLink(room);
+	}
+}
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-buttons/meeting-toolbar-buttons.component.html b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-leave-button/meeting-toolbar-leave-button.component.html
similarity index 57%
rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-buttons/meeting-toolbar-buttons.component.html
rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-leave-button/meeting-toolbar-leave-button.component.html
index 801ef20a..d3865f67 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-buttons/meeting-toolbar-buttons.component.html
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-leave-button/meeting-toolbar-leave-button.component.html
@@ -1,24 +1,4 @@
-<!-- Copy Link Button -->
-@if (showCopyLinkButton()) {
-	@if (isMobile()) {
-		<button id="copy-speaker-link" mat-menu-item (click)="onCopyLinkClick()" [disableRipple]="true">
-			<mat-icon>link</mat-icon>
-			<span class="button-text">{{ copyLinkText }}</span>
-		</button>
-	} @else {
-		<button
-			id="copy-speaker-link"
-			mat-icon-button
-			(click)="onCopyLinkClick()"
-			[disableRipple]="true"
-			[matTooltip]="copyLinkTooltip"
-		>
-			<mat-icon>link</mat-icon>
-		</button>
-	}
-}
-
-<!-- Leave Menu -->
+<!-- Leave Button for Moderators -->
 @if (showLeaveMenu()) {
 	<button
 		id="leave-btn"
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-buttons/meeting-toolbar-buttons.component.scss b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-leave-button/meeting-toolbar-leave-button.component.scss
similarity index 100%
rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-buttons/meeting-toolbar-buttons.component.scss
rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-leave-button/meeting-toolbar-leave-button.component.scss
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-buttons/meeting-toolbar-buttons.component.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-leave-button/meeting-toolbar-leave-button.component.ts
similarity index 67%
rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-buttons/meeting-toolbar-buttons.component.ts
rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-leave-button/meeting-toolbar-leave-button.component.ts
index f44f3ac3..7a00ed36 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-buttons/meeting-toolbar-buttons.component.ts
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-leave-button/meeting-toolbar-leave-button.component.ts
@@ -7,36 +7,27 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MeetingContextService } from '../../../services/meeting/meeting-context.service';
 import { MeetingService } from '../../../services/meeting/meeting.service';
-import { LoggerService, OpenViduService, ViewportService } from 'openvidu-components-angular';
+import { LoggerService, OpenViduService } from 'openvidu-components-angular';
 
 /**
- * Reusable component for meeting toolbar additional buttons.
+ * Reusable component for meeting toolbar Leave button.
  */
 @Component({
-	selector: 'ov-meeting-toolbar-buttons',
-	templateUrl: './meeting-toolbar-buttons.component.html',
-	styleUrls: ['./meeting-toolbar-buttons.component.scss'],
+	selector: 'ov-meeting-toolbar-leave-button',
+	templateUrl: './meeting-toolbar-leave-button.component.html',
+	styleUrls: ['./meeting-toolbar-leave-button.component.scss'],
 	imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule, MatDividerModule]
 })
-export class MeetingToolbarButtonsComponent {
+export class MeetingToolbarLeaveButtonComponent {
 	protected meetingContextService = inject(MeetingContextService);
 	protected meetingService = inject(MeetingService);
 	protected loggerService = inject(LoggerService);
-	protected log = this.loggerService.get('OpenVidu Meet - MeetingToolbarButtons');
+	protected log = this.loggerService.get('OpenVidu Meet - MeetingToolbarLeaveButtons');
 	protected openviduService = inject(OpenViduService);
-	protected readonly copyLinkTooltip = 'Copy the meeting link';
-	protected readonly copyLinkText = 'Copy meeting link';
 	protected readonly leaveMenuTooltip = 'Leave options';
 	protected readonly leaveOptionText = 'Leave meeting';
 	protected readonly endMeetingOptionText = 'End meeting for all';
 
-	/**
-	 * Whether to show the copy link button
-	 */
-	protected showCopyLinkButton = computed(() => {
-		return this.meetingContextService.canModerateRoom();
-	});
-
 	/**
 	 * Whether to show the leave menu with options
 	 */
@@ -51,16 +42,6 @@ export class MeetingToolbarButtonsComponent {
 		return this.meetingContextService.isMobile();
 	});
 
-	onCopyLinkClick(): void {
-		const room = this.meetingContextService.meetRoom();
-		if (!room) {
-			this.log.e('Cannot copy link: meeting room is undefined');
-			return;
-		}
-
-		this.meetingService.copyMeetingSpeakerLink(room);
-	}
-
 	async onLeaveMeetingClick(): Promise<void> {
 		await this.openviduService.disconnectRoom();
 	}
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.html b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-menu/meeting-toolbar-more-options-menu.component.html
similarity index 100%
rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.html
rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-menu/meeting-toolbar-more-options-menu.component.html
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.scss b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-menu/meeting-toolbar-more-options-menu.component.scss
similarity index 100%
rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.scss
rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-menu/meeting-toolbar-more-options-menu.component.scss
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.spec.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-menu/meeting-toolbar-more-options-menu.component.spec.ts
similarity index 50%
rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.spec.ts
rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-menu/meeting-toolbar-more-options-menu.component.spec.ts
index fb72dc6f..383d71a4 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.spec.ts
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-menu/meeting-toolbar-more-options-menu.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { MeetingToolbarMoreOptionsButtonsComponent } from './meeting-toolbar-more-options-buttons.component';
+import { MeetingToolbarMoreOptionsMenuComponent } from './meeting-toolbar-more-options-menu.component';
 
 describe('MeetingToolbarMoreOptionsButtonsComponent', () => {
-  let component: MeetingToolbarMoreOptionsButtonsComponent;
-  let fixture: ComponentFixture<MeetingToolbarMoreOptionsButtonsComponent>;
+  let component: MeetingToolbarMoreOptionsMenuComponent;
+  let fixture: ComponentFixture<MeetingToolbarMoreOptionsMenuComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MeetingToolbarMoreOptionsButtonsComponent]
+      imports: [MeetingToolbarMoreOptionsMenuComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(MeetingToolbarMoreOptionsButtonsComponent);
+    fixture = TestBed.createComponent(MeetingToolbarMoreOptionsMenuComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-menu/meeting-toolbar-more-options-menu.component.ts
similarity index 84%
rename from meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.ts
rename to meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-menu/meeting-toolbar-more-options-menu.component.ts
index ce162548..41ea5c25 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-buttons/meeting-toolbar-more-options-buttons.component.ts
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/customization/components/meeting-toolbar-more-options-menu/meeting-toolbar-more-options-menu.component.ts
@@ -10,10 +10,9 @@ import { MeetingContextService } from '../../../services/meeting/meeting-context
 /**
  * Component for additional menu items in the toolbar's "More Options" menu.
  * This component handles custom actions like opening the settings panel for grid layout changes.
- * It follows the responsive pattern from openvidu-components-angular, adapting to mobile/tablet/desktop views.
  */
 @Component({
-  selector: 'ov-meeting-toolbar-more-options-buttons',
+  selector: 'ov-meeting-toolbar-more-options-menu',
   imports: [
     CommonModule,
     MatIconModule,
@@ -21,10 +20,10 @@ import { MeetingContextService } from '../../../services/meeting/meeting-context
     MatMenuModule,
     MatTooltipModule
   ],
-  templateUrl: './meeting-toolbar-more-options-buttons.component.html',
-  styleUrl: './meeting-toolbar-more-options-buttons.component.scss'
+  templateUrl: './meeting-toolbar-more-options-menu.component.html',
+  styleUrl: './meeting-toolbar-more-options-menu.component.scss'
 })
-export class MeetingToolbarMoreOptionsButtonsComponent {
+export class MeetingToolbarMoreOptionsMenuComponent {
   /**
    * Viewport service for responsive behavior detection
    * Injected from openvidu-components-angular
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html b/meet-ce/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html
index 49cd5d58..878d048f 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.html
@@ -55,37 +55,42 @@
 		(onRecordingStopRequested)="eventHandlerService.onRecordingStopRequested($event)"
 		(onViewRecordingsClicked)="onViewRecordingsClicked()"
 	>
+		<!-- Toolbar Leave Button (for moderators) -->
+		<ng-container *ovToolbarLeaveButton>
+			<ng-content select="ov-meeting-toolbar-leave-button"></ng-content>
+		</ng-container>
+
 		<!-- Toolbar Additional Buttons -->
 		<div *ovToolbarAdditionalButtons>
-			<ng-content select="ov-meeting-toolbar-buttons[slot='additional-buttons']"></ng-content>
+			<ng-content select="ov-meeting-toolbar-extra-buttons"></ng-content>
 		</div>
 
 		<!-- Toolbar More Options Additional Items -->
 		<ng-container *ovToolbarMoreOptionsAdditionalMenuItems>
-			<ng-content select="ov-meeting-toolbar-more-options-buttons[slot='additional-buttons']"></ng-content>
+			<ng-content select="ov-meeting-toolbar-more-options-menu"></ng-content>
 		</ng-container>
 
 		<!-- Share Link Panel After Local Participant -->
 		<div *ovParticipantPanelAfterLocalParticipant>
-			<ng-content select="ov-meeting-share-link-panel[slot='after-local-participant']"></ng-content>
+			<ng-content select="ov-meeting-invite-panel"></ng-content>
 		</div>
 
 		<!-- Participant Panel Item Template -->
 		<div *ovParticipantPanelItem="let participant">
 			<ng-container
-				[ngTemplateOutlet]="participantPanelItemTemplate"
+				[ngTemplateOutlet]="participantItemTemplate()"
 				[ngTemplateOutletContext]="{ participant: participant, localParticipant: localParticipant() }"
 			>
 			</ng-container>
 		</div>
 
 		<ng-container *ovSettingsPanelGeneralAdditionalElements>
-			<ng-content select="ov-meeting-settings-panel[slot='additional-general-elements']"></ng-content>
+			<ng-content select="ov-meeting-settings-extensions"></ng-content>
 		</ng-container>
 
 		<!-- Custom layout component -->
 		<ng-container *ovLayout>
-			<ng-content select="ov-meeting-layout[slot='layout']"></ng-content>
+			<ng-content select="ov-meeting-custom-layout"></ng-content>
 		</ng-container>
 	</ov-videoconference>
 }
diff --git a/meet-ce/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts b/meet-ce/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts
index c71c99d3..148709cb 100644
--- a/meet-ce/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts
+++ b/meet-ce/frontend/projects/shared-meet-components/src/lib/pages/meeting/meeting.component.ts
@@ -13,7 +13,7 @@ import {
 	ViewportService
 } from 'openvidu-components-angular';
 import { Subject } from 'rxjs';
-import { MeetingParticipantPanelItemComponent } from '../../customization';
+import { MeetingParticipantItemComponent } from '../../customization';
 import {
 	ApplicationFeatures,
 	FeatureConfigurationService,
@@ -44,17 +44,15 @@ import { MeetingLobbyComponent } from '../../components/meeting-lobby/meeting-lo
 	providers: [MeetingLobbyService, MeetingEventHandlerService]
 })
 export class MeetingComponent implements OnInit {
-	protected _participantPanelItem?: MeetingParticipantPanelItemComponent;
+	protected _participantItem?: MeetingParticipantItemComponent;
 
 	// Template reference for custom participant panel item
-	@ContentChild(MeetingParticipantPanelItemComponent)
-	set participantPanelItem(value: MeetingParticipantPanelItemComponent | undefined) {
+	@ContentChild(MeetingParticipantItemComponent)
+	set participantItem(value: MeetingParticipantItemComponent | undefined) {
 		// Store the reference to the custom participant panel item component
-		this._participantPanelItem = value;
-	}
-	get participantPanelItemTemplate(): TemplateRef<any> | undefined {
-		return this._participantPanelItem?.template;
+		this._participantItem = value;
 	}
+	protected participantItemTemplate = computed(() => this._participantItem?.template);
 
 	/**
 	 * Controls whether to show lobby (true) or meeting view (false)
diff --git a/meet-ce/frontend/src/app/customization/pages/app-ce-meeting/app-ce-meeting.component.html b/meet-ce/frontend/src/app/customization/pages/app-ce-meeting/app-ce-meeting.component.html
index 034a69e0..a127312a 100644
--- a/meet-ce/frontend/src/app/customization/pages/app-ce-meeting/app-ce-meeting.component.html
+++ b/meet-ce/frontend/src/app/customization/pages/app-ce-meeting/app-ce-meeting.component.html
@@ -1,9 +1,9 @@
 <ov-meeting>
-	<ov-meeting-toolbar-buttons slot="additional-buttons"></ov-meeting-toolbar-buttons>
-	<ov-meeting-toolbar-more-options-buttons slot="additional-buttons"></ov-meeting-toolbar-more-options-buttons>
-	<ov-meeting-share-link-panel slot="after-local-participant"></ov-meeting-share-link-panel>
-
-	<ov-meeting-participant-panel-item slot="participant-panel-item"></ov-meeting-participant-panel-item>
-	<ov-meeting-settings-panel slot="additional-general-elements"></ov-meeting-settings-panel>
-	<ov-meeting-layout slot="layout"></ov-meeting-layout>
+	<ov-meeting-toolbar-leave-button></ov-meeting-toolbar-leave-button>
+	<ov-meeting-toolbar-extra-buttons></ov-meeting-toolbar-extra-buttons>
+	<ov-meeting-toolbar-more-options-menu></ov-meeting-toolbar-more-options-menu>
+	<ov-meeting-invite-panel></ov-meeting-invite-panel>
+	<ov-meeting-participant-item></ov-meeting-participant-item>
+	<ov-meeting-settings-extensions></ov-meeting-settings-extensions>
+	<ov-meeting-custom-layout></ov-meeting-custom-layout>
 </ov-meeting>
diff --git a/meet-ce/frontend/src/app/customization/pages/app-ce-meeting/app-ce-meeting.component.ts b/meet-ce/frontend/src/app/customization/pages/app-ce-meeting/app-ce-meeting.component.ts
index 3f43a6b5..6bf3da38 100644
--- a/meet-ce/frontend/src/app/customization/pages/app-ce-meeting/app-ce-meeting.component.ts
+++ b/meet-ce/frontend/src/app/customization/pages/app-ce-meeting/app-ce-meeting.component.ts
@@ -1,24 +1,26 @@
 import { Component } from '@angular/core';
 import {
 	MeetingComponent,
-	MeetingLayoutComponent,
-	MeetingParticipantPanelItemComponent,
-	MeetingShareLinkPanelComponent,
-	MeetingToolbarButtonsComponent,
-	MeetingSettingsPanelComponent,
-	MeetingToolbarMoreOptionsButtonsComponent
+	MeetingCustomLayoutComponent,
+	MeetingParticipantItemComponent,
+	MeetingInvitePanelComponent,
+	MeetingToolbarLeaveButtonComponent,
+	MeetingToolbarExtraButtonsComponent,
+	MeetingSettingsExtensionsComponent,
+	MeetingToolbarMoreOptionsMenuComponent
 } from '@openvidu-meet/shared-components';
 
 @Component({
 	selector: 'app-ce-ov-meeting',
 	imports: [
 		MeetingComponent,
-		MeetingToolbarButtonsComponent,
-		MeetingShareLinkPanelComponent,
-		MeetingParticipantPanelItemComponent,
-		MeetingLayoutComponent,
-		MeetingToolbarMoreOptionsButtonsComponent,
-		MeetingSettingsPanelComponent
+		MeetingToolbarLeaveButtonComponent,
+		MeetingToolbarExtraButtonsComponent,
+		MeetingInvitePanelComponent,
+		MeetingParticipantItemComponent,
+		MeetingCustomLayoutComponent,
+		MeetingToolbarMoreOptionsMenuComponent,
+		MeetingSettingsExtensionsComponent
 	],
 	templateUrl: './app-ce-meeting.component.html',
 	styleUrl: './app-ce-meeting.component.scss'