diff --git a/frontend/projects/shared-call-components/src/lib/components/cards/base-card/base-card.component.html b/frontend/projects/shared-call-components/src/lib/components/cards/base-card/base-card.component.html
new file mode 100644
index 00000000..0697581d
--- /dev/null
+++ b/frontend/projects/shared-call-components/src/lib/components/cards/base-card/base-card.component.html
@@ -0,0 +1,20 @@
+<mat-card class="base-card" [style.background-color]="cardBackgroundColor">
+	<div class="card-header">
+		<div class="icon-container" [style.background-color]="iconBackgroundColor">
+			<mat-icon class="card-icon">{{ icon }}</mat-icon>
+		</div>
+		<div class="text-container">
+			<div class="card-title">{{ title }}</div>
+			<div class="card-subtitle">{{ description }}</div>
+		</div>
+	</div>
+	@if (showCardContent) {
+		<div class="divider"></div>
+	}
+
+	<div class="card-content" #cardContent [class.hidden]="!showCardContent">
+		<ng-content select="[card-content]"></ng-content>
+	</div>
+
+	<ng-content select="[card-footer]"></ng-content>
+</mat-card>
diff --git a/frontend/projects/shared-call-components/src/lib/components/cards/base-card/base-card.component.scss b/frontend/projects/shared-call-components/src/lib/components/cards/base-card/base-card.component.scss
new file mode 100644
index 00000000..3e65b82a
--- /dev/null
+++ b/frontend/projects/shared-call-components/src/lib/components/cards/base-card/base-card.component.scss
@@ -0,0 +1,63 @@
+.base-card {
+	max-width: 100%;
+	border-radius: 8px;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+	transition: box-shadow 0.3s ease-in-out;
+}
+
+.base-card:hover {
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.card-header,
+.card-content {
+	display: flex;
+	align-items: center;
+	gap: 16px;
+	padding: 20px 20px 10px 20px;
+}
+
+.card-content {
+	padding: 10px;
+	justify-content: center;
+}
+
+.hidden {
+	display: none;
+}
+.divider {
+	width: 80%;
+	margin: auto;
+	height: 1px;
+	background-color: #e0e0e0;
+}
+
+.icon-container {
+	background-color: #673ab7;
+	padding: 16px;
+	border-radius: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.card-icon {
+	color: white;
+	font-size: 24px;
+}
+
+.text-container {
+	display: flex;
+	flex-direction: column;
+}
+
+.card-title {
+	font-size: 1.2rem;
+	font-weight: 600;
+	color: #333;
+}
+
+.card-subtitle {
+	font-size: 0.9rem;
+	color: #666;
+}
diff --git a/frontend/projects/shared-call-components/src/lib/components/cards/base-card/base-card.component.spec.ts b/frontend/projects/shared-call-components/src/lib/components/cards/base-card/base-card.component.spec.ts
new file mode 100644
index 00000000..0b9cd928
--- /dev/null
+++ b/frontend/projects/shared-call-components/src/lib/components/cards/base-card/base-card.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BaseCardComponent } from './base-card.component';
+
+describe('BaseCardComponent', () => {
+  let component: BaseCardComponent;
+  let fixture: ComponentFixture<BaseCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BaseCardComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(BaseCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/projects/shared-call-components/src/lib/components/cards/base-card/base-card.component.ts b/frontend/projects/shared-call-components/src/lib/components/cards/base-card/base-card.component.ts
new file mode 100644
index 00000000..4a09dd0c
--- /dev/null
+++ b/frontend/projects/shared-call-components/src/lib/components/cards/base-card/base-card.component.ts
@@ -0,0 +1,54 @@
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+
+@Component({
+	selector: 'ov-base-card',
+	standalone: true,
+	imports: [MatCardModule, MatIconModule, MatDividerModule],
+	templateUrl: './base-card.component.html',
+	styleUrl: './base-card.component.scss'
+})
+export class BaseCardComponent implements AfterViewInit {
+	/**
+	 * The title of the dynamic card component.
+	 * This input property allows setting a custom title for the card.
+	 */
+	@Input() title: string = '';
+	/**
+	 * A brief description of the dynamic card component.
+	 * This input property allows setting a description for the card.
+	 */
+	@Input() description: string = '';
+	/**
+	 * The name of the icon to be displayed. Defaults to "settings".
+	 *
+	 * @type {string}
+	 * @default 'settings'
+	 */
+	@Input() icon: string = 'settings';
+	/**
+	 * The background color of the icon.
+	 *
+	 * @default '#000000'
+	 */
+	@Input() iconBackgroundColor: string = '#000000';
+	/**
+	 * The background color of the card component.
+	 * Accepts any valid CSS color string.
+	 */
+	@Input() cardBackgroundColor: string = '#ffffff';
+
+	// Content child reference to the card content.
+	@ViewChild('cardContent', { static: false }) cardContent: ElementRef | undefined;
+	showCardContent: boolean = false;
+
+	constructor(protected cdr: ChangeDetectorRef) {}
+
+	ngAfterViewInit() {
+    console.log(this.cardContent)
+		this.showCardContent = this.cardContent?.nativeElement.children.length > 0;
+		this.cdr.detectChanges();
+	}
+}
diff --git a/frontend/projects/shared-call-components/src/lib/components/cards/selection-card/selection-card.component.html b/frontend/projects/shared-call-components/src/lib/components/cards/selection-card/selection-card.component.html
new file mode 100644
index 00000000..30e66f8c
--- /dev/null
+++ b/frontend/projects/shared-call-components/src/lib/components/cards/selection-card/selection-card.component.html
@@ -0,0 +1,14 @@
+<ov-base-card [title]="title" [description]="description" [icon]="icon">
+	<div card-content class="card-content">
+		<p>Select</p>
+		<mat-form-field card-content>
+			<mat-select [(value)]="selectedOption" (selectionChange)="onSelectionChange($event)">
+				@for (option of options; track option.value) {
+					<mat-option [value]="option.value">
+						{{ option.label }}
+					</mat-option>
+				}
+			</mat-select>
+		</mat-form-field>
+	</div>
+</ov-base-card>
diff --git a/frontend/projects/shared-call-components/src/lib/components/cards/selection-card/selection-card.component.scss b/frontend/projects/shared-call-components/src/lib/components/cards/selection-card/selection-card.component.scss
new file mode 100644
index 00000000..6ef35dd5
--- /dev/null
+++ b/frontend/projects/shared-call-components/src/lib/components/cards/selection-card/selection-card.component.scss
@@ -0,0 +1,24 @@
+.mat-form-field {
+	width: 100%;
+	margin-top: 8px;
+
+	.mat-select {
+		font-size: 1rem;
+		color: #333;
+	}
+
+	.mat-select-placeholder {
+		color: #aaa;
+	}
+
+	.mat-option-text {
+		color: #333;
+	}
+}
+
+.card-content {
+	display: flex;
+	align-items: center;
+	gap: 16px;
+	// padding: 20px;
+}
\ No newline at end of file
diff --git a/frontend/projects/shared-call-components/src/lib/components/cards/selection-card/selection-card.component.spec.ts b/frontend/projects/shared-call-components/src/lib/components/cards/selection-card/selection-card.component.spec.ts
new file mode 100644
index 00000000..2e99f3ab
--- /dev/null
+++ b/frontend/projects/shared-call-components/src/lib/components/cards/selection-card/selection-card.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SelectionCardComponent } from './selection-card.component';
+
+describe('SelectionCardComponent', () => {
+  let component: SelectionCardComponent;
+  let fixture: ComponentFixture<SelectionCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SelectionCardComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SelectionCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/projects/shared-call-components/src/lib/components/cards/selection-card/selection-card.component.ts b/frontend/projects/shared-call-components/src/lib/components/cards/selection-card/selection-card.component.ts
new file mode 100644
index 00000000..b33ef013
--- /dev/null
+++ b/frontend/projects/shared-call-components/src/lib/components/cards/selection-card/selection-card.component.ts
@@ -0,0 +1,20 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { BaseCardComponent } from '../base-card/base-card.component';
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+@Component({
+	selector: 'ov-selection-card',
+	standalone: true,
+	imports: [BaseCardComponent, MatSelectModule, MatFormFieldModule],
+	templateUrl: './selection-card.component.html',
+	styleUrl: './selection-card.component.scss'
+})
+export class SelectionCardComponent extends BaseCardComponent {
+	@Input() options: { label: string; value: any }[] = [];
+	@Input() selectedOption: any;
+	@Output() onOptionSelected = new EventEmitter<any>();
+	onSelectionChange(event: any) {
+		this.onOptionSelected.emit(event.value);
+	}
+}
diff --git a/frontend/projects/shared-call-components/src/lib/components/cards/toggle-card/toggle-card.component.html b/frontend/projects/shared-call-components/src/lib/components/cards/toggle-card/toggle-card.component.html
index add2a66c..ccc36304 100644
--- a/frontend/projects/shared-call-components/src/lib/components/cards/toggle-card/toggle-card.component.html
+++ b/frontend/projects/shared-call-components/src/lib/components/cards/toggle-card/toggle-card.component.html
@@ -1,16 +1,18 @@
-<mat-card class="toggle-card" [style.background-color]="cardBackgroundColor">
-	<div class="card-content">
-		<div class="icon-container" [style.background-color]="iconBackgroundColor">
-			<mat-icon class="card-icon">{{ icon }}</mat-icon>
-		</div>
-		<div class="text-container">
-			<div class="card-title">{{ title || '' }}</div>
-			<div class="card-subtitle">{{ description || 'OpenVidu' }}</div>
-		</div>
-	</div>
+<ov-base-card
+	[title]="title"
+	[description]="description"
+	[icon]="icon"
+	[iconBackgroundColor]="iconBackgroundColor"
+	[cardBackgroundColor]="cardBackgroundColor"
+>
+	<ng-content card-content select="[card-content]"></ng-content>
 
-	<div class="card-footer">
+	<div card-footer class="card-footer">
 		<span>{{ title }} is {{ toggleValue ? 'enabled' : 'disabled' }}</span>
-		<mat-slide-toggle class="ov-slide-toggle" [checked]="toggleValue" (change)="onToggleChange($event)"></mat-slide-toggle>
+		<mat-slide-toggle
+			class="ov-slide-toggle"
+			[checked]="toggleValue"
+			(change)="onToggleChange($event)"
+		></mat-slide-toggle>
 	</div>
-</mat-card>
+</ov-base-card>
diff --git a/frontend/projects/shared-call-components/src/lib/components/cards/toggle-card/toggle-card.component.scss b/frontend/projects/shared-call-components/src/lib/components/cards/toggle-card/toggle-card.component.scss
index 139b5260..0f8c214d 100644
--- a/frontend/projects/shared-call-components/src/lib/components/cards/toggle-card/toggle-card.component.scss
+++ b/frontend/projects/shared-call-components/src/lib/components/cards/toggle-card/toggle-card.component.scss
@@ -1,51 +1,3 @@
-.toggle-card {
-	max-width: 100%;
-	border-radius: 8px;
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-	transition: box-shadow 0.3s ease-in-out;
-}
-
-.toggle-card:hover {
-	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-.card-content {
-	display: flex;
-	align-items: center;
-	gap: 16px;
-	padding: 20px;
-}
-
-.icon-container {
-	background-color: #673ab7; /* Color de fondo del icono */
-	padding: 16px;
-	border-radius: 4px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.card-icon {
-	color: white;
-	font-size: 24px;
-}
-
-.text-container {
-	display: flex;
-	flex-direction: column;
-}
-
-.card-title {
-	font-size: 1.2rem;
-	font-weight: 600;
-	color: #333;
-}
-
-.card-subtitle {
-	font-size: 0.9rem;
-	color: #666;
-}
-
 .card-footer {
 	display: flex;
 	align-items: center;
@@ -56,16 +8,6 @@
 	border-top: 1px solid #e9ecef;
 }
 
-.view-more {
-	font-size: 0.9rem;
-	color: #007bff;
-	text-decoration: none;
-}
-
-.view-more:hover {
-	text-decoration: underline;
-}
-
 mat-slide-toggle.ov-slide-toggle {
 	--mdc-switch-selected-handle-color: #f9faf8;
 	--mdc-switch-selected-pressed-handle-color: var(--mdc-switch-selected-handle-color);
@@ -80,4 +22,8 @@ mat-slide-toggle.ov-slide-toggle {
 	--mdc-switch-selected-pressed-state-layer-color: var(--mdc-switch-selected-track-color);
 	--mdc-switch-selected-hover-state-layer-color: var(--mdc-switch-selected-handle-color);
 	--mdc-switch-selected-focus-state-layer-color: var(--mdc-switch-selected-handle-color);
-  }
+}
+
+.hidden {
+	display: none;
+}
diff --git a/frontend/projects/shared-call-components/src/lib/components/cards/toggle-card/toggle-card.component.ts b/frontend/projects/shared-call-components/src/lib/components/cards/toggle-card/toggle-card.component.ts
index 091fc6e5..f70fc2b7 100644
--- a/frontend/projects/shared-call-components/src/lib/components/cards/toggle-card/toggle-card.component.ts
+++ b/frontend/projects/shared-call-components/src/lib/components/cards/toggle-card/toggle-card.component.ts
@@ -1,45 +1,15 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { MatCardModule } from '@angular/material/card';
-import { MatIconModule } from '@angular/material/icon';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { BaseCardComponent } from '../base-card/base-card.component';
 
 @Component({
 	selector: 'ov-toggle-card',
 	standalone: true,
-	imports: [MatCardModule, MatIconModule, MatSlideToggleModule],
+	imports: [MatSlideToggleModule, BaseCardComponent],
 	templateUrl: './toggle-card.component.html',
 	styleUrl: './toggle-card.component.scss'
 })
-export class ToggleCardComponent {
-	/**
-	 * The title of the dynamic card component.
-	 * This input property allows setting a custom title for the card.
-	 */
-	@Input() title: string = '';
-	/**
-	 * A brief description of the dynamic card component.
-	 * This input property allows setting a description for the card.
-	 */
-	@Input() description: string = '';
-	/**
-	 * The name of the icon to be displayed. Defaults to "settings".
-	 *
-	 * @type {string}
-	 * @default 'settings'
-	 */
-	@Input() icon: string = 'settings';
-	/**
-	 * The background color of the icon.
-	 *
-	 * @default '#000000'
-	 */
-	@Input() iconBackgroundColor: string = '#000000';
-	/**
-	 * The background color of the card component.
-	 * Accepts any valid CSS color string.
-	 */
-	@Input() cardBackgroundColor: string = '#ffffff';
-
+export class ToggleCardComponent extends BaseCardComponent {
 	/**
 	 * A boolean input property that determines the toggle state. Only applicable when `footerType` is set to `'toggle'`.
 	 * Defaults to `false`.
diff --git a/frontend/projects/shared-call-components/src/lib/components/index.ts b/frontend/projects/shared-call-components/src/lib/components/index.ts
index ff9912bf..c06f7e93 100644
--- a/frontend/projects/shared-call-components/src/lib/components/index.ts
+++ b/frontend/projects/shared-call-components/src/lib/components/index.ts
@@ -1,5 +1,6 @@
 export * from './console-nav/console-nav.component';
 export * from './cards/toggle-card/toggle-card.component';
+export * from './cards/selection-card/selection-card.component';
 export * from './dynamic-grid/dynamic-grid.component';
 export * from './cards/logo-card/logo-card.component';
 export * from './errors/unauthorized/unauthorized.component';