diff --git a/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.html b/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.html
index f616873..6787eaf 100644
--- a/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.html
+++ b/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.html
@@ -1,10 +1,18 @@
-<!-- Loading Spinner -->
-@if (loading) {
-	<div class="loading-container">
-		<mat-spinner diameter="40"></mat-spinner>
-		<span>Loading recordings...</span>
+@if (!loading && recordings.length === 0 && !showEmptyFilterMessage) {
+	<!-- Empty State -->
+	<div class="no-recordings-state">
+		<div class="empty-content">
+			<h3>No recordings yet</h3>
+			<p>Recordings from your meetings will appear here. Start a recording in any room to see them listed.</p>
+			<div class="getting-started-actions">
+				<button mat-button (click)="refresh.emit()" class="refresh-recordings-btn primary-button">
+					<mat-icon>refresh</mat-icon>
+					Refresh Recordings
+				</button>
+			</div>
+		</div>
 	</div>
-} @else if (recordings.length > 0) {
+} @else {
 	<!-- Recordings Toolbar -->
 	<mat-toolbar class="recordings-toolbar">
 		<!-- Left Section: Search -->
@@ -52,14 +60,26 @@
 
 		<!-- Right Section: Filters -->
 		<div class="toolbar-right">
+			@if (hasActiveFilters()) {
+				<button
+					mat-icon-button
+					class="clear-btn"
+					(click)="clearFilters()"
+					[disabled]="loading"
+					matTooltip="Clear all filters"
+				>
+					<mat-icon>filter_alt_off</mat-icon>
+				</button>
+			}
+
 			<button
 				mat-icon-button
 				class="refresh-btn"
-				(click)="refresh.emit()"
+				(click)="refreshRecordings()"
 				[disabled]="loading"
 				matTooltip="Refresh recordings"
 			>
-				<mat-icon> refresh </mat-icon>
+				<mat-icon>refresh</mat-icon>
 			</button>
 
 			@if (showFilters) {
@@ -84,222 +104,220 @@
 		</div>
 	</mat-toolbar>
 
-	<div class="table-container">
-		<table mat-table [dataSource]="recordings" class="recordings-table">
-			<!-- Selection Column -->
-			@if (showSelection) {
-				<ng-container matColumnDef="select">
-					<th mat-header-cell *matHeaderCellDef>
-						<mat-checkbox
-							[checked]="allSelected()"
-							[indeterminate]="someSelected()"
-							(change)="toggleAllSelection()"
-							[disabled]="loading"
-						>
-						</mat-checkbox>
-					</th>
-					<td mat-cell *matCellDef="let recording">
-						@if (canSelectRecording(recording)) {
-							<mat-checkbox
-								[checked]="isRecordingSelected(recording)"
-								(change)="toggleRecordingSelection(recording)"
-								[disabled]="loading"
-							>
-							</mat-checkbox>
-						}
-					</td>
-				</ng-container>
-			}
-
-			<!-- Room Info Column -->
-			@if (showRoomInfo) {
-				<ng-container matColumnDef="roomInfo">
-					<th mat-header-cell *matHeaderCellDef class="room-header">Room</th>
-					<td mat-cell *matCellDef="let recording" class="room-cell">
-						<div class="room-info">
-							<span class="room-name">{{ recording.roomName }}</span>
-							<span class="room-id">{{ recording.roomId }}</span>
-							<!-- @if (recording.filename) {
-								<span class="filename">{{ recording.filename }}</span>
-							} -->
-						</div>
-					</td>
-				</ng-container>
-			}
-
-			<!-- Status Column -->
-			<ng-container matColumnDef="status">
-				<th mat-header-cell *matHeaderCellDef>Status</th>
-				<td mat-cell *matCellDef="let recording">
-					<div class="status-badge" [style.color]="getStatusColor(recording.status)">
-						<mat-icon [style.color]="getStatusColor(recording.status)">
-							{{ getStatusIcon(recording.status) }}
-						</mat-icon>
-						<span class="status-label">{{ getStatusLabel(recording.status) }}</span>
-					</div>
-				</td>
-			</ng-container>
-
-			<!-- Start Date Column -->
-			<ng-container matColumnDef="startDate">
-				<th mat-header-cell *matHeaderCellDef>Start Date</th>
-				<td mat-cell *matCellDef="let recording">
-					@if (recording.startDate) {
-						<div class="date-info">
-							<span class="date">{{ recording.startDate | date: 'mediumDate' }}</span>
-							<span class="time">{{ recording.startDate | date: 'shortTime' }}</span>
-						</div>
-					} @else {
-						<span class="no-data">-</span>
-					}
-				</td>
-			</ng-container>
-
-			<!-- Duration Column -->
-			<ng-container matColumnDef="duration">
-				<th mat-header-cell *matHeaderCellDef>Duration</th>
-				<td mat-cell *matCellDef="let recording">
-					<span>{{ formatDuration(recording.duration) }}</span>
-				</td>
-			</ng-container>
-
-			<!-- Size Column -->
-			<ng-container matColumnDef="size">
-				<th mat-header-cell *matHeaderCellDef>Size</th>
-				<td mat-cell *matCellDef="let recording">
-					<span>{{ formatFileSize(recording.size) }}</span>
-				</td>
-			</ng-container>
-
-			<!-- Actions Column -->
-			<ng-container matColumnDef="actions">
-				<th mat-header-cell *matHeaderCellDef class="actions-header">Actions</th>
-				<td mat-cell *matCellDef="let recording" class="actions-cell">
-					<div class="action-buttons">
-						<!-- Play Button -->
-						@if (canPlayRecording(recording)) {
-							<button
-								mat-icon-button
-								matTooltip="Play Recording"
-								(click)="playRecording(recording)"
-								[disabled]="loading"
-								id="play-recording-btn-{{ recording.recordingId }}"
-							>
-								<mat-icon>play_arrow</mat-icon>
-							</button>
-						}
-
-						<!-- Download Button -->
-						@if (canDownloadRecording(recording)) {
-							<button
-								mat-icon-button
-								matTooltip="Download Recording"
-								(click)="downloadRecording(recording)"
-								[disabled]="loading"
-								id="download-recording-btn-{{ recording.recordingId }}"
-							>
-								<mat-icon>download</mat-icon>
-							</button>
-						}
-
-						@if (isRecordingFailed(recording)) {
-							<button
-								class="delete-action"
-								mat-icon-button
-								matTooltip="Delete Recording"
-								(click)="deleteRecording(recording)"
-								[disabled]="loading"
-								id="delete-recording-btn-{{ recording.recordingId }}"
-							>
-								<mat-icon>delete</mat-icon>
-							</button>
-						} @else {
-							<!-- More Actions Menu -->
-							<button
-								mat-icon-button
-								[matMenuTriggerFor]="actionsMenu"
-								matTooltip="More Actions"
-								[disabled]="loading"
-								id="more-actions-btn-{{ recording.recordingId }}"
-							>
-								<mat-icon>more_vert</mat-icon>
-							</button>
-
-							<mat-menu #actionsMenu="matMenu">
-								<button
-									mat-menu-item
-									(click)="shareRecordingLink(recording)"
-									id="share-recording-link-{{ recording.recordingId }}"
-								>
-									<mat-icon>share</mat-icon>
-									<span>Share link</span>
-								</button>
-
-								@if (canDeleteRecording(recording)) {
-									<mat-divider></mat-divider>
-									<button
-										mat-menu-item
-										(click)="deleteRecording(recording)"
-										class="delete-action"
-										id="delete-recording-btn-{{ recording.recordingId }}"
-									>
-										<mat-icon>delete</mat-icon>
-										<span>Delete recording</span>
-									</button>
-								}
-							</mat-menu>
-						}
-					</div>
-				</td>
-			</ng-container>
-
-			<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-			<tr
-				mat-row
-				*matRowDef="let row; columns: displayedColumns"
-				[class.selected-row]="isRecordingSelected(row)"
-			></tr>
-		</table>
-	</div>
-
-	<!-- Load More Section -->
-	@if (showLoadMore) {
-		<div class="load-more-container" id="load-more-container">
-			<button
-				mat-button
-				class="load-more-btn"
-				(click)="loadMoreRecordings()"
-				[disabled]="loading"
-				id="load-more-btn"
-			>
-				<mat-icon>expand_more</mat-icon>
-				<span>Load More Recordings</span>
-			</button>
+	<!-- Loading Spinner -->
+	@if (loading) {
+		<div class="loading-container">
+			<mat-spinner diameter="40"></mat-spinner>
+			<span>Loading recordings...</span>
 		</div>
-	}
-} @else {
-	<!-- Empty State -->
-	<div class="no-recordings-state">
-		<div class="empty-content">
-			<h3>No recordings yet</h3>
-			<p>Recordings from your meetings will appear here. Start a recording in any room to see them listed.</p>
-			<div class="getting-started-actions">
-				<button mat-button (click)="refresh.emit()" class="refresh-recordings-btn primary-button">
-					<mat-icon>refresh</mat-icon>
-					Refresh Recordings
-				</button>
-			</div>
-			<!-- TODO: Show this when no recordings match the filters
-			@if (hasActiveFilters()) {
-				<h3>No recordings match your search criteria</h3>
+	} @else if (recordings.length === 0 && showEmptyFilterMessage) {
+		<!-- No recordings match the current filters -->
+		<div class="no-recordings-state">
+			<div class="empty-content">
+				<h3>No recordings match your search criteria and/or filters</h3>
 				<p>Try adjusting or clearing your filters to see more recordings.</p>
 				<div class="getting-started-actions">
-					<button mat-raised-button color="primary" (click)="clearFilters()" class="clear-filters-btn">
+					<button mat-button (click)="clearFilters()" class="clear-filters-btn primary-button">
 						<mat-icon>filter_alt_off</mat-icon>
 						Clear Filters
 					</button>
 				</div>
-			} -->
+			</div>
 		</div>
-	</div>
+	} @else {
+		<!-- Recordings Table -->
+		<div class="table-container">
+			<table mat-table [dataSource]="recordings" class="recordings-table">
+				<!-- Selection Column -->
+				@if (showSelection) {
+					<ng-container matColumnDef="select">
+						<th mat-header-cell *matHeaderCellDef>
+							<mat-checkbox
+								[checked]="allSelected()"
+								[indeterminate]="someSelected()"
+								(change)="toggleAllSelection()"
+								[disabled]="loading"
+							>
+							</mat-checkbox>
+						</th>
+						<td mat-cell *matCellDef="let recording">
+							@if (canSelectRecording(recording)) {
+								<mat-checkbox
+									[checked]="isRecordingSelected(recording)"
+									(change)="toggleRecordingSelection(recording)"
+									[disabled]="loading"
+								>
+								</mat-checkbox>
+							}
+						</td>
+					</ng-container>
+				}
+
+				<!-- Room Info Column -->
+				@if (showRoomInfo) {
+					<ng-container matColumnDef="roomInfo">
+						<th mat-header-cell *matHeaderCellDef class="room-header">Room</th>
+						<td mat-cell *matCellDef="let recording" class="room-cell">
+							<div class="room-info">
+								<span class="room-name">{{ recording.roomName }}</span>
+								<span class="room-id">{{ recording.roomId }}</span>
+								<!-- @if (recording.filename) {
+								<span class="filename">{{ recording.filename }}</span>
+							} -->
+							</div>
+						</td>
+					</ng-container>
+				}
+
+				<!-- Status Column -->
+				<ng-container matColumnDef="status">
+					<th mat-header-cell *matHeaderCellDef>Status</th>
+					<td mat-cell *matCellDef="let recording">
+						<div class="status-badge" [style.color]="getStatusColor(recording.status)">
+							<mat-icon [style.color]="getStatusColor(recording.status)">
+								{{ getStatusIcon(recording.status) }}
+							</mat-icon>
+							<span class="status-label">{{ getStatusLabel(recording.status) }}</span>
+						</div>
+					</td>
+				</ng-container>
+
+				<!-- Start Date Column -->
+				<ng-container matColumnDef="startDate">
+					<th mat-header-cell *matHeaderCellDef>Start Date</th>
+					<td mat-cell *matCellDef="let recording">
+						@if (recording.startDate) {
+							<div class="date-info">
+								<span class="date">{{ recording.startDate | date: 'mediumDate' }}</span>
+								<span class="time">{{ recording.startDate | date: 'shortTime' }}</span>
+							</div>
+						} @else {
+							<span class="no-data">-</span>
+						}
+					</td>
+				</ng-container>
+
+				<!-- Duration Column -->
+				<ng-container matColumnDef="duration">
+					<th mat-header-cell *matHeaderCellDef>Duration</th>
+					<td mat-cell *matCellDef="let recording">
+						<span>{{ formatDuration(recording.duration) }}</span>
+					</td>
+				</ng-container>
+
+				<!-- Size Column -->
+				<ng-container matColumnDef="size">
+					<th mat-header-cell *matHeaderCellDef>Size</th>
+					<td mat-cell *matCellDef="let recording">
+						<span>{{ formatFileSize(recording.size) }}</span>
+					</td>
+				</ng-container>
+
+				<!-- Actions Column -->
+				<ng-container matColumnDef="actions">
+					<th mat-header-cell *matHeaderCellDef class="actions-header">Actions</th>
+					<td mat-cell *matCellDef="let recording" class="actions-cell">
+						<div class="action-buttons">
+							<!-- Play Button -->
+							@if (canPlayRecording(recording)) {
+								<button
+									mat-icon-button
+									matTooltip="Play Recording"
+									(click)="playRecording(recording)"
+									[disabled]="loading"
+									id="play-recording-btn-{{ recording.recordingId }}"
+								>
+									<mat-icon>play_arrow</mat-icon>
+								</button>
+							}
+
+							<!-- Download Button -->
+							@if (canDownloadRecording(recording)) {
+								<button
+									mat-icon-button
+									matTooltip="Download Recording"
+									(click)="downloadRecording(recording)"
+									[disabled]="loading"
+									id="download-recording-btn-{{ recording.recordingId }}"
+								>
+									<mat-icon>download</mat-icon>
+								</button>
+							}
+
+							@if (isRecordingFailed(recording)) {
+								<button
+									class="delete-action"
+									mat-icon-button
+									matTooltip="Delete Recording"
+									(click)="deleteRecording(recording)"
+									[disabled]="loading"
+									id="delete-recording-btn-{{ recording.recordingId }}"
+								>
+									<mat-icon>delete</mat-icon>
+								</button>
+							} @else {
+								<!-- More Actions Menu -->
+								<button
+									mat-icon-button
+									[matMenuTriggerFor]="actionsMenu"
+									matTooltip="More Actions"
+									[disabled]="loading"
+									id="more-actions-btn-{{ recording.recordingId }}"
+								>
+									<mat-icon>more_vert</mat-icon>
+								</button>
+
+								<mat-menu #actionsMenu="matMenu">
+									<button
+										mat-menu-item
+										(click)="shareRecordingLink(recording)"
+										id="share-recording-link-{{ recording.recordingId }}"
+									>
+										<mat-icon>share</mat-icon>
+										<span>Share link</span>
+									</button>
+
+									@if (canDeleteRecording(recording)) {
+										<mat-divider></mat-divider>
+										<button
+											mat-menu-item
+											(click)="deleteRecording(recording)"
+											class="delete-action"
+											id="delete-recording-btn-{{ recording.recordingId }}"
+										>
+											<mat-icon>delete</mat-icon>
+											<span>Delete recording</span>
+										</button>
+									}
+								</mat-menu>
+							}
+						</div>
+					</td>
+				</ng-container>
+
+				<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+				<tr
+					mat-row
+					*matRowDef="let row; columns: displayedColumns"
+					[class.selected-row]="isRecordingSelected(row)"
+				></tr>
+			</table>
+		</div>
+
+		<!-- Load More Section -->
+		@if (showLoadMore) {
+			<div class="load-more-container" id="load-more-container">
+				<button
+					mat-button
+					class="load-more-btn"
+					(click)="loadMoreRecordings()"
+					[disabled]="loading"
+					id="load-more-btn"
+				>
+					<mat-icon>expand_more</mat-icon>
+					<span>Load More Recordings</span>
+				</button>
+			</div>
+		}
+	}
 }
diff --git a/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.scss b/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.scss
index 6203752..192db1a 100644
--- a/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.scss
+++ b/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.scss
@@ -10,6 +10,10 @@
 		::ng-deep .refresh-btn {
 			padding: var(--ov-meet-spacing-sm);
 		}
+
+		::ng-deep .clear-btn {
+			padding: var(--ov-meet-spacing-sm);
+		}
 	}
 }
 
@@ -152,6 +156,10 @@
 		.refresh-recordings-btn {
 			@extend .refresh-btn;
 		}
+
+		.clear-filters-btn {
+			@extend .refresh-btn;
+		}
 	}
 }
 
diff --git a/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.ts b/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.ts
index 32d4fb3..e5bf62d 100644
--- a/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.ts
+++ b/frontend/projects/shared-meet-components/src/lib/components/recording-lists/recording-lists.component.ts
@@ -90,6 +90,7 @@ export class RecordingListsComponent implements OnInit, OnChanges {
 	@Input() showRoomInfo = true;
 	@Input() showLoadMore = false;
 	@Input() loading = false;
+	@Input() initialFilters: { nameFilter: string; statusFilter: string } = { nameFilter: '', statusFilter: '' };
 
 	// Host binding for styling when recordings are selected
 	@HostBinding('class.has-selections')
@@ -107,6 +108,8 @@ export class RecordingListsComponent implements OnInit, OnChanges {
 	nameFilterControl = new FormControl('');
 	statusFilterControl = new FormControl('');
 
+	showEmptyFilterMessage = false; // Show message when no recordings match filters
+
 	// Selection state
 	selectedRecordings = signal<Set<string>>(new Set());
 	allSelected = signal(false);
@@ -156,16 +159,28 @@ export class RecordingListsComponent implements OnInit, OnChanges {
 
 	ngOnChanges(changes: SimpleChanges) {
 		if (changes['recordings']) {
+			// Update selected recordings based on current recordings
 			const validIds = new Set(this.recordings.map((r) => r.recordingId));
 			const filteredSelection = new Set([...this.selectedRecordings()].filter((id) => validIds.has(id)));
 			this.selectedRecordings.set(filteredSelection);
 			this.updateSelectionState();
+
+			// Show message when no recordings match filters
+			if (this.recordings.length === 0 && this.hasActiveFilters()) {
+				this.showEmptyFilterMessage = true;
+			} else {
+				this.showEmptyFilterMessage = false;
+			}
 		}
 	}
 
 	// ===== INITIALIZATION METHODS =====
 
 	private setupFilters() {
+		// Set up initial filter values
+		this.nameFilterControl.setValue(this.initialFilters.nameFilter);
+		this.statusFilterControl.setValue(this.initialFilters.statusFilter);
+
 		// Set up name filter with debounce
 		this.nameFilterControl.valueChanges.pipe(debounceTime(300), distinctUntilChanged()).subscribe((value) => {
 			this.filterChange.emit({
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/recordings/recordings.component.html b/frontend/projects/shared-meet-components/src/lib/pages/console/recordings/recordings.component.html
index e534437..efc8be0 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/console/recordings/recordings.component.html
+++ b/frontend/projects/shared-meet-components/src/lib/pages/console/recordings/recordings.component.html
@@ -38,6 +38,7 @@
 				[showFilters]="false"
 				[showSelection]="true"
 				[showLoadMore]="hasMoreRecordings"
+				[initialFilters]="initialFilters"
 				(recordingAction)="onRecordingAction($event)"
 				(loadMore)="loadMoreRecordings($event)"
 				(refresh)="refreshRecordings($event)"
diff --git a/frontend/projects/shared-meet-components/src/lib/pages/console/recordings/recordings.component.ts b/frontend/projects/shared-meet-components/src/lib/pages/console/recordings/recordings.component.ts
index 6b24434..a3286d3 100644
--- a/frontend/projects/shared-meet-components/src/lib/pages/console/recordings/recordings.component.ts
+++ b/frontend/projects/shared-meet-components/src/lib/pages/console/recordings/recordings.component.ts
@@ -22,6 +22,11 @@ export class RecordingsComponent implements OnInit {
 	showInitialLoader = false;
 	isLoading = false;
 
+	initialFilters = {
+		nameFilter: '',
+		statusFilter: ''
+	};
+
 	// Pagination
 	hasMoreRecordings = false;
 	private nextPageToken?: string;
@@ -45,7 +50,8 @@ export class RecordingsComponent implements OnInit {
 
 		if (roomId) {
 			// If a specific room ID is provided, filter recordings by that room
-			await this.loadRecordings({ nameFilter: roomId, statusFilter: '' });
+			this.initialFilters.nameFilter = roomId;
+			await this.loadRecordings(this.initialFilters);
 		} else {
 			// Load all recordings if no room ID is specified
 			await this.loadRecordings();