diff --git a/src/MediaBrowser.Common/Media/MediaConfig.cs b/src/MediaBrowser.Common/Media/MediaConfig.cs
index e2f97b9..808fe17 100644
--- a/src/MediaBrowser.Common/Media/MediaConfig.cs
+++ b/src/MediaBrowser.Common/Media/MediaConfig.cs
@@ -3,6 +3,7 @@ namespace MediaBrowser.Media;
 public class MediaConfig(IConfiguration configuration)
 {
     public string CastDirectory { get; } = configuration["media:castDirectory"]!;
+    public string DeletedDirectory { get; } = configuration["media:deletedDirectory"]!;
     public string DirectorsDirectory { get; } = configuration["media:directorsDirectory"]!;
     public string GenresDirectory { get; } = configuration["media:genresDirectory"]!;
     public string? ImportDirectory { get; } = configuration["media:importDirectory"];
diff --git a/src/MediaBrowser.Common/Media/MediaController.cs b/src/MediaBrowser.Common/Media/MediaController.cs
index aeb387b..0c218ab 100644
--- a/src/MediaBrowser.Common/Media/MediaController.cs
+++ b/src/MediaBrowser.Common/Media/MediaController.cs
@@ -14,6 +14,59 @@ public async Task<ActionResult<MediaReadModel>> Get(Guid id)
         return media.ToReadModel(mediaConfig);
     }
 
+    [HttpDelete("{id:guid}")]
+    public async Task<ActionResult> Delete(Guid id)
+    {
+        var media = await context.Media.Where(m => m.Id == id).FirstOrDefaultAsync();
+        if (media == null)
+        {
+            return NotFound();
+        }
+
+        var ids = new List<Guid>
+        {
+            media.Id
+        };
+
+        IEnumerable<string> GetFiles(MediaEntity mediaEntity)
+        {
+            yield return mediaConfig.MediaFileLocation(media, ".nfo");
+            if (!mediaEntity.IsImage())
+            {
+                yield return mediaConfig.MediaFileLocation(mediaEntity, ".jpg");
+                yield return mediaConfig.MediaFileLocation(mediaEntity, "-fanart.jpg");
+            }
+        }
+
+        var files = GetFiles(media).ToList();
+
+        if (media.ParentId == null)
+        {
+            files.Add(mediaConfig.MediaFileLocation(media));
+
+            foreach (var chapter in await context.Media.Where(m => m.ParentId == id).ToListAsync())
+            {
+                ids.Add(chapter.Id);
+                files.AddRange(GetFiles(chapter));
+            }
+        }
+
+        await context.MediaJoined.Where(m => ids.Contains(m.Id)).ExecuteDeleteAsync();
+
+        foreach (var file in files)
+        {
+            if (System.IO.File.Exists(file))
+            {
+                var deletedFile = Path.Combine(mediaConfig.DeletedDirectory, Path.GetFileName(file));
+                System.IO.File.Move(file, deletedFile);
+            }
+        }
+
+        await context.SaveChangesAsync();
+
+        return Ok();
+    }
+
     [HttpPut("{id:guid}")]
     public async Task<ActionResult<MediaReadModel>> Update(Guid id, [FromBody] UpdateMediaRequest request)
     {
diff --git a/src/MediaBrowser.Frontend/src/app/app.html b/src/MediaBrowser.Frontend/src/app/app.html
index 4ad32b2..aa7c9ab 100644
--- a/src/MediaBrowser.Frontend/src/app/app.html
+++ b/src/MediaBrowser.Frontend/src/app/app.html
@@ -1,4 +1,5 @@
 <div class="app-container">
+  <app-toast></app-toast>
   <app-navigation-tabs></app-navigation-tabs>
   <main class="main-content" [class.no-sidebar]="!usersService.isAuthenticated()">
     <router-outlet></router-outlet>
diff --git a/src/MediaBrowser.Frontend/src/app/app.routes.ts b/src/MediaBrowser.Frontend/src/app/app.routes.ts
index 0109272..1cb329e 100644
--- a/src/MediaBrowser.Frontend/src/app/app.routes.ts
+++ b/src/MediaBrowser.Frontend/src/app/app.routes.ts
@@ -1,6 +1,6 @@
 import { Routes } from '@angular/router';
 import { authGuard } from './guards/auth.guard';
-import { SearchComponent } from './search/search';
+import { SearchQueryParams } from './search/search-query-params';
 
 export const routes: Routes = [
   
@@ -55,6 +55,6 @@ export const routes: Routes = [
   },
   { 
     path: '**', 
-    redirectTo: '/search?sort=' + SearchComponent.DEFAULT_SORT
+    redirectTo: '/search?sort=' + SearchQueryParams.DEFAULT_SORT
   }
 ];
diff --git a/src/MediaBrowser.Frontend/src/app/app.spec.ts b/src/MediaBrowser.Frontend/src/app/app.spec.ts
index 24dd388..3b7f12f 100644
--- a/src/MediaBrowser.Frontend/src/app/app.spec.ts
+++ b/src/MediaBrowser.Frontend/src/app/app.spec.ts
@@ -2,6 +2,7 @@ import { provideZonelessChangeDetection } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 import { beforeEach, describe, expect, it } from 'vitest';
 import { App } from './app';
+import { ToastService } from './toast/toast.service';
 
 describe('App', () => {
   beforeEach(async () => {
@@ -24,4 +25,18 @@ describe('App', () => {
     expect(compiled.querySelector('app-navigation-tabs')).toBeTruthy();
     expect(compiled.querySelector('main.main-content')).toBeTruthy();
   });
+
+  it('should render a success toast at the app shell when one is shown', () => {
+    const fixture = TestBed.createComponent(App);
+    const toastService = TestBed.inject(ToastService);
+
+    toastService.showSuccess('Saved successfully');
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement as HTMLElement;
+    const toast = compiled.querySelector('.toast');
+
+    expect(toast?.textContent).toContain('Saved successfully');
+    expect(toast?.classList.contains('toast--success')).toBe(true);
+  });
 });
diff --git a/src/MediaBrowser.Frontend/src/app/app.ts b/src/MediaBrowser.Frontend/src/app/app.ts
index 3d579fb..4575bb8 100644
--- a/src/MediaBrowser.Frontend/src/app/app.ts
+++ b/src/MediaBrowser.Frontend/src/app/app.ts
@@ -1,11 +1,12 @@
 import { Component, signal, inject } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { NavigationTabsComponent } from './navigation-tabs/navigation-tabs';
+import { ToastComponent } from './toast/toast';
 import { UsersService } from './services/users.service';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, NavigationTabsComponent],
+  imports: [RouterOutlet, NavigationTabsComponent, ToastComponent],
   templateUrl: './app.html',
   styleUrls: ['./app.css']
 })
diff --git a/src/MediaBrowser.Frontend/src/app/import/import.spec.ts b/src/MediaBrowser.Frontend/src/app/import/import.spec.ts
index 6ce52e3..40e07c0 100644
--- a/src/MediaBrowser.Frontend/src/app/import/import.spec.ts
+++ b/src/MediaBrowser.Frontend/src/app/import/import.spec.ts
@@ -161,7 +161,7 @@ describe('ImportComponent', () => {
     expect(component.uploadError).toBeNull();
   });
 
-  it('shows an upload error when dropped file upload fails', async () => {
+  it('does not show an inline upload error when dropped file upload fails', async () => {
     const importService = getImportServiceMock();
     const uploadError = new Error('upload failed');
     importService.files.mockReturnValue(of([]));
@@ -186,12 +186,12 @@ describe('ImportComponent', () => {
     await fixture.whenStable();
 
     expect(importService.uploadFile).toHaveBeenCalledWith(droppedFile);
-    expect(component.uploadError).toBe('Failed to upload file. Please try again.');
+    expect(component.uploadError).toBeNull();
     expect(consoleErrorSpy).toHaveBeenCalledWith('Error uploading file:', uploadError);
 
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.upload-error')?.textContent).toContain('Failed to upload file. Please try again.');
+    expect(compiled.querySelector('.upload-error')).toBeNull();
 
     consoleErrorSpy.mockRestore();
   });
diff --git a/src/MediaBrowser.Frontend/src/app/import/import.ts b/src/MediaBrowser.Frontend/src/app/import/import.ts
index 47f7f4d..395ce55 100644
--- a/src/MediaBrowser.Frontend/src/app/import/import.ts
+++ b/src/MediaBrowser.Frontend/src/app/import/import.ts
@@ -150,7 +150,6 @@ export class ImportComponent implements OnInit {
       await this.scanDirectory();
     } catch (error) {
       console.error('Error uploading file:', error);
-      this.uploadError = 'Failed to upload file. Please try again.';
       this.cdr.detectChanges();
     } finally {
       this.isUploading = false;
diff --git a/src/MediaBrowser.Frontend/src/app/login/login.spec.ts b/src/MediaBrowser.Frontend/src/app/login/login.spec.ts
index 7c7a2eb..3271b64 100644
--- a/src/MediaBrowser.Frontend/src/app/login/login.spec.ts
+++ b/src/MediaBrowser.Frontend/src/app/login/login.spec.ts
@@ -3,6 +3,7 @@ import { Router } from '@angular/router';
 import { of, throwError } from 'rxjs';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { SearchComponent } from '../search/search';
+import { SearchQueryParams } from '../search/search-query-params';
 import { UsersService } from '../services/users.service';
 import { LoginComponent } from './login';
 
@@ -101,7 +102,7 @@ describe('LoginComponent', () => {
     expect(clearPagePositionSpy).toHaveBeenCalledTimes(1);
     expect(mocks.router.navigate).toHaveBeenCalledWith(['/search'], {
       queryParams: {
-        sort: SearchComponent.DEFAULT_SORT
+        sort: SearchQueryParams.DEFAULT_SORT
       },
       queryParamsHandling: 'replace'
     });
@@ -110,9 +111,10 @@ describe('LoginComponent', () => {
     expect(detectChanges).toHaveBeenCalledTimes(1);
   });
 
-  it('shows a generic error message when login fails', async () => {
+  it('does not show an inline API error when login fails', async () => {
     const { component, mocks } = await createComponent();
     const detectChanges = vi.fn();
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
 
     (component as any).cdr = { detectChanges };
 
@@ -127,9 +129,11 @@ describe('LoginComponent', () => {
       password: 'wrong-password'
     });
     expect(mocks.router.navigate).not.toHaveBeenCalled();
-    expect(component.errorMessage).toBe('An error occurred during login. Please try again.');
+    expect(component.errorMessage).toBe('');
     expect(component.isLoading).toBe(false);
     expect(detectChanges).toHaveBeenCalledTimes(1);
+
+    consoleErrorSpy.mockRestore();
   });
 
   it('submits only on Enter for username keypress', async () => {
diff --git a/src/MediaBrowser.Frontend/src/app/login/login.ts b/src/MediaBrowser.Frontend/src/app/login/login.ts
index 98f3c71..07816fa 100644
--- a/src/MediaBrowser.Frontend/src/app/login/login.ts
+++ b/src/MediaBrowser.Frontend/src/app/login/login.ts
@@ -5,6 +5,7 @@ import { Router } from '@angular/router';
 import { UsersService } from '../services/users.service';
 import { firstValueFrom } from 'rxjs';
 import { SearchComponent } from '../search/search';
+import { SearchQueryParams } from '../search/search-query-params';
 
 @Component({
   selector: 'app-login',
@@ -39,13 +40,12 @@ export class LoginComponent {
       SearchComponent.clearPagePositionState();
       this.router.navigate(['/search'], {
         queryParams: {
-          sort: SearchComponent.DEFAULT_SORT
+          sort: SearchQueryParams.DEFAULT_SORT
         },
         queryParamsHandling: 'replace'
       });
     } catch (error) {
       console.error('Login error:', error);
-      this.errorMessage = 'An error occurred during login. Please try again.';
     } finally {
       this.isLoading = false;
       this.cdr.detectChanges();
diff --git a/src/MediaBrowser.Frontend/src/app/media-editor/media-editor.css b/src/MediaBrowser.Frontend/src/app/media-editor/media-editor.css
index 88554bc..9724e0c 100644
--- a/src/MediaBrowser.Frontend/src/app/media-editor/media-editor.css
+++ b/src/MediaBrowser.Frontend/src/app/media-editor/media-editor.css
@@ -29,6 +29,7 @@
 /* Button base styles */
 .back-button,
 .cancel-button,
+.delete-button,
 .save-button,
 .remove-button,
 .add-button,
@@ -56,6 +57,7 @@
 }
 
 .cancel-button,
+.delete-button,
 .save-button {
   padding: 0.5rem 1rem;
   border-radius: var(--radius2);
@@ -71,6 +73,15 @@
   opacity: 0.8;
 }
 
+.delete-button {
+  background: var(--error-bg);
+  color: var(--error-fg);
+}
+
+.delete-button:hover:not(:disabled) {
+  opacity: 0.85;
+}
+
 .save-button {
   background: var(--primary3-bg);
   color: var(--fg4);
@@ -81,12 +92,108 @@
 }
 
 .cancel-button:disabled,
+.delete-button:disabled,
 .save-button:disabled,
 .thumbnail-button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.55);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  backdrop-filter: blur(2px);
+}
+
+.modal-content {
+  background-color: var(--surface-bg);
+  border: 1px solid var(--surface2-bg);
+  border-radius: var(--radius1);
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+  width: min(92vw, 460px);
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.25rem 1.5rem;
+  border-bottom: 1px solid var(--surface1-bg);
+}
+
+.modal-header h3 {
+  margin: 0;
+  color: var(--fg1);
+}
+
+.close-button {
+  background: none;
+  border: none;
+  color: var(--fg2);
+  cursor: pointer;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--radius1);
+}
+
+.close-button:hover:not(:disabled) {
+  background: var(--surface1-bg);
+}
+
+.modal-body {
+  padding: 1.5rem;
+}
+
+.modal-text {
+  margin: 0 0 1rem;
+  color: var(--fg2);
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+}
+
+.modal-button {
+  border: none;
+  border-radius: var(--radius1);
+  padding: 0.75rem 1.25rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.modal-button:disabled,
+.close-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.cancel-modal-button {
+  background: var(--surface2-bg);
+  color: var(--fg2);
+}
+
+.confirm-delete-button {
+  background: var(--error-bg);
+  color: var(--error-fg);
+}
+
+.confirm-delete-button:hover:not(:disabled) {
+  opacity: 0.85;
+}
+
 .editor-content {
   display: flex;
   flex-direction: column;
@@ -149,4 +256,19 @@
     height: 100%;
     width: calc(100% - 2rem);
   }
+}
+
+@media (max-width: 480px) {
+  .header-actions,
+  .modal-footer {
+    flex-direction: column;
+  }
+
+  .delete-button,
+  .cancel-button,
+  .save-button,
+  .modal-button {
+    justify-content: center;
+    width: 100%;
+  }
 }
\ No newline at end of file
diff --git a/src/MediaBrowser.Frontend/src/app/media-editor/media-editor.html b/src/MediaBrowser.Frontend/src/app/media-editor/media-editor.html
index dea78a4..1f0d14a 100644
--- a/src/MediaBrowser.Frontend/src/app/media-editor/media-editor.html
+++ b/src/MediaBrowser.Frontend/src/app/media-editor/media-editor.html
@@ -8,6 +8,12 @@
       }
       <h1>{{ headerTitle }}</h1>
       <div class="header-actions">
+        @if (mode === 'Edit') {
+          <button class="delete-button" (click)="openDeleteModal()" [disabled]="readWriteInProgress">
+            <i class="fa-solid fa-trash"></i>
+            Delete
+          </button>
+        }
         <button class="cancel-button" (click)="cancel()" [disabled]="readWriteInProgress">
           Cancel
         </button>
@@ -62,5 +68,51 @@ <h1>{{ headerTitle }}</h1>
   </div>
 }
 
+@if (isDeleteModalOpen && mediaData) {
+  <div class="modal-backdrop" (click)="onDeleteModalBackdropClick($event)">
+    <div class="modal-content" (click)="$event.stopPropagation()">
+      <div class="modal-header">
+        <h3>Delete Media</h3>
+        <button class="close-button" (click)="closeDeleteModal()" [disabled]="isDeleting" title="Close">
+          <i class="fa-solid fa-times"></i>
+        </button>
+      </div>
+
+      <form (ngSubmit)="confirmDelete()" class="modal-body">
+        <p class="modal-text">
+          Enter <strong>{{ mediaData.title }}</strong> to confirm deletion.
+        </p>
+
+        <div class="form-group">
+          <label for="deleteConfirmationTitle">Title</label>
+          <input
+            type="text"
+            id="deleteConfirmationTitle"
+            [(ngModel)]="deleteConfirmationTitle"
+            name="deleteConfirmationTitle"
+            class="form-input"
+            [placeholder]="mediaData.title"
+            [disabled]="isDeleting">
+        </div>
+
+        <div class="modal-footer">
+          <button type="button" class="modal-button cancel-modal-button" (click)="closeDeleteModal()" [disabled]="isDeleting">
+            Cancel
+          </button>
+          <button type="submit" class="modal-button confirm-delete-button" [disabled]="isDeleting || !canConfirmDelete">
+            @if (isDeleting) {
+              <i class="fa-solid fa-spinner fa-spin"></i>
+              Deleting...
+            } @else {
+              <i class="fa-solid fa-trash"></i>
+              Delete Media
+            }
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+}
+
 <!-- Full screen spinner overlay -->
 <app-spinner [isLoading]="readWriteInProgress"></app-spinner>
\ No newline at end of file
diff --git a/src/MediaBrowser.Frontend/src/app/media-editor/media-editor.spec.ts b/src/MediaBrowser.Frontend/src/app/media-editor/media-editor.spec.ts
index 4a7f39e..e4abd5c 100644
--- a/src/MediaBrowser.Frontend/src/app/media-editor/media-editor.spec.ts
+++ b/src/MediaBrowser.Frontend/src/app/media-editor/media-editor.spec.ts
@@ -67,6 +67,10 @@ describe('MediaEditorComponent', () => {
   let locationMock: {
     back: ReturnType<typeof vi.fn>;
   };
+  let routerMock: {
+    currentNavigation: ReturnType<typeof vi.fn>;
+    navigate: ReturnType<typeof vi.fn>;
+  };
 
   beforeEach(async () => {
     routeParams = {};
@@ -103,6 +107,11 @@ describe('MediaEditorComponent', () => {
       back: vi.fn()
     };
 
+    routerMock = {
+      currentNavigation: vi.fn(() => currentNavigation),
+      navigate: vi.fn().mockResolvedValue(true)
+    };
+
     await TestBed.configureTestingModule({
       imports: [MediaEditorComponent],
       providers: [
@@ -111,10 +120,7 @@ describe('MediaEditorComponent', () => {
         { provide: Location, useValue: locationMock },
         {
           provide: Router,
-          useValue: {
-            currentNavigation: vi.fn(() => currentNavigation),
-            navigate: vi.fn().mockResolvedValue(true)
-          }
+          useValue: routerMock
         },
         {
           provide: ActivatedRoute,
@@ -339,6 +345,12 @@ describe('MediaEditorComponent', () => {
       thumbnail: 12.5
     });
     expect(mediaServiceMock.update).not.toHaveBeenCalled();
+    expect(routerMock.navigate).toHaveBeenCalledWith(['/player', 'chapter-id'], {
+      state: {
+        mediaData: expect.objectContaining({ id: 'chapter-id' })
+      }
+    });
+    expect(locationMock.back).not.toHaveBeenCalled();
   });
 
   it('handles saveChanges errors and always resets saving flag', async () => {
diff --git a/src/MediaBrowser.Frontend/src/app/media-editor/media-editor.ts b/src/MediaBrowser.Frontend/src/app/media-editor/media-editor.ts
index cad3346..960e341 100644
--- a/src/MediaBrowser.Frontend/src/app/media-editor/media-editor.ts
+++ b/src/MediaBrowser.Frontend/src/app/media-editor/media-editor.ts
@@ -14,6 +14,7 @@ import { ReadonlyInfoSectionComponent, MediaReadOnlyData } from './readonly-info
 import { ThumbnailSectionComponent, ThumbnailData, MediaThumbnailData } from './thumbnail-section/thumbnail-section.component';
 import { ImportComponent } from '../import/import';
 import { SearchComponent } from '../search/search';
+import { SearchQueryParams } from '../search/search-query-params';
 
 export enum MediaEditorMode {
   Edit = 'Edit',
@@ -52,7 +53,10 @@ export class MediaEditorComponent implements OnInit {
     return this.navigation?.previousNavigation != null;
   }
   get readWriteInProgress(): boolean {
-    return this.isCreatingThumbnail || this.isLoading || this.isSaving;
+    return this.isCreatingThumbnail || this.isDeleting || this.isLoading || this.isSaving;
+  }
+  get canConfirmDelete(): boolean {
+    return this.deleteConfirmationTitle === this.mediaData?.title;
   }
 
   chapterDuration?: number;
@@ -69,11 +73,14 @@ export class MediaEditorComponent implements OnInit {
   };
   filename?: string;
   isCreatingThumbnail: boolean = false;
+  isDeleteModalOpen: boolean = false;
+  isDeleting: boolean = false;
   isLoading: boolean = false;
   isSaving: boolean = false;
   mediaData?: MediaReadModel;
   mediaId?: string;
   mode: MediaEditorMode = MediaEditorMode.Edit;
+  deleteConfirmationTitle: string = '';
   thumbnail?: ThumbnailData;
 
   // init component based on route params and load media data if needed
@@ -148,7 +155,6 @@ export class MediaEditorComponent implements OnInit {
         thumbnailPreviewUrl: ''
       };
     }
-    console.log('Initial thumbnail set:', this.thumbnail);
   }
   setEditableData(): void {
     this.editableData = {
@@ -173,6 +179,8 @@ export class MediaEditorComponent implements OnInit {
     this.isSaving = true;
 
     try {
+      let createdChapter: MediaReadModel | undefined;
+
       if (this.mode === MediaEditorMode.AddChapter) {
 
         let thumbnailData: number | undefined;
@@ -190,7 +198,7 @@ export class MediaEditorComponent implements OnInit {
           thumbnail: thumbnailData
         };
 
-        await firstValueFrom(this.mediaService.addChapter(this.mediaId!, chapterRequest));
+        createdChapter = await firstValueFrom(this.mediaService.addChapter(this.mediaId!, chapterRequest));
       } else if (this.mode === MediaEditorMode.Edit) {
         this.mediaData = await firstValueFrom(this.mediaService.update(this.mediaId!, {
           ...this.editableData
@@ -217,7 +225,13 @@ export class MediaEditorComponent implements OnInit {
       SearchComponent.clearCachedResults();
       PeopleSectionComponent.clearCacheIfStale(this.peopleData);
 
-      this.cancel();
+      if (this.mode === MediaEditorMode.AddChapter && createdChapter) {
+        await this.router.navigate(['/player', createdChapter.id], {
+          state: { mediaData: createdChapter }
+        });
+      } else {
+        this.cancel();
+      }
     } catch (error) {
       console.error('Error saving media changes:', error);
     } finally {
@@ -229,8 +243,39 @@ export class MediaEditorComponent implements OnInit {
     if (this.hasNavigationHistory) {
       this.location.back();
     } else {
-      this.router.navigate(['/search'], { queryParams: { sort: SearchComponent.DEFAULT_SORT } });
+      this.router.navigate(['/search'], { queryParams: { sort: SearchQueryParams.DEFAULT_SORT } });
+    }
+  }
+  closeDeleteModal(): void {
+    if (this.isDeleting) {
+      return;
+    }
+
+    this.isDeleteModalOpen = false;
+    this.deleteConfirmationTitle = '';
+  }
+  async confirmDelete(): Promise<void> {
+    if (!this.mediaId || !this.canConfirmDelete) {
+      return;
     }
+
+    this.isDeleting = true;
+
+    try {
+      await firstValueFrom(this.mediaService.delete(this.mediaId));
+      SearchComponent.clearCachedResults();
+      this.closeDeleteModal();
+      await this.router.navigate(['/search'], { queryParams: { sort: SearchQueryParams.DEFAULT_SORT } });
+    } catch (error) {
+      console.error('Error deleting media:', error);
+    } finally {
+      this.isDeleting = false;
+      this.cdr.detectChanges();
+    }
+  }
+  openDeleteModal(): void {
+    this.deleteConfirmationTitle = '';
+    this.isDeleteModalOpen = true;
   }
 
   // Component data getters
@@ -300,6 +345,11 @@ export class MediaEditorComponent implements OnInit {
     this.editableData.producers = peopleData.producers;
     this.editableData.writers = peopleData.writers;
   }
+  onDeleteModalBackdropClick(event: Event): void {
+    if (event.target === event.currentTarget) {
+      this.closeDeleteModal();
+    }
+  }
   onRatingChange(rating: number): void {
     this.editableData.userStarRating = rating;
   }
diff --git a/src/MediaBrowser.Frontend/src/app/media-editor/thumbnail-section/thumbnail-section.css b/src/MediaBrowser.Frontend/src/app/media-editor/thumbnail-section/thumbnail-section.css
index 6c0e327..72c10b1 100644
--- a/src/MediaBrowser.Frontend/src/app/media-editor/thumbnail-section/thumbnail-section.css
+++ b/src/MediaBrowser.Frontend/src/app/media-editor/thumbnail-section/thumbnail-section.css
@@ -172,8 +172,8 @@
   border-radius: var(--radius2);
   position: relative;
   display: inline-block;
+  height: 360px;
   max-width: 100%;
-  max-height: 360px;
 }
 
 .video-overlay {
diff --git a/src/MediaBrowser.Frontend/src/app/meta/meta.spec.ts b/src/MediaBrowser.Frontend/src/app/meta/meta.spec.ts
index 2f319e3..c81e4db 100644
--- a/src/MediaBrowser.Frontend/src/app/meta/meta.spec.ts
+++ b/src/MediaBrowser.Frontend/src/app/meta/meta.spec.ts
@@ -4,6 +4,7 @@ import { ActivatedRoute, convertToParamMap, ParamMap, Router } from '@angular/ro
 import { BehaviorSubject, of, throwError } from 'rxjs';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { SearchComponent } from '../search/search';
+import { SearchQueryParams } from '../search/search-query-params';
 import { MediaService } from '../services';
 import { MetaComponent } from './meta';
 
@@ -80,7 +81,7 @@ describe('MetaComponent', () => {
       {
         name: 'Keanu Reeves',
         imageUrl: '/api/media/cast/Keanu%20Reeves/thumbnail',
-        queryParams: { cast: ['Keanu Reeves'], sort: SearchComponent.DEFAULT_SORT }
+        queryParams: { cast: ['Keanu Reeves'], sort: SearchQueryParams.DEFAULT_SORT }
       }
     ]);
   });
@@ -121,7 +122,7 @@ describe('MetaComponent', () => {
 
     component.metaGrid = new ElementRef(host);
     component.metaMembers = [
-      { name: 'A', imageUrl: '/x', queryParams: { cast: ['A'], sort: SearchComponent.DEFAULT_SORT } }
+      { name: 'A', imageUrl: '/x', queryParams: { cast: ['A'], sort: SearchQueryParams.DEFAULT_SORT } }
     ];
     (component as any).scrollPosition = 90;
 
@@ -179,7 +180,7 @@ describe('MetaComponent', () => {
       expect(component.metaMembers[0].imageUrl).toContain(`/api/media/${testCase.expectedPrefix}/`);
       expect(component.metaMembers[0].queryParams).toEqual({
         [testCase.type]: [component.metaMembers[0].name],
-        sort: SearchComponent.DEFAULT_SORT
+        sort: SearchQueryParams.DEFAULT_SORT
       });
     }
   });
@@ -280,7 +281,7 @@ describe('MetaComponent', () => {
     const metaMember = {
       name: 'Keanu Reeves',
       imageUrl: '/api/media/cast/Keanu%20Reeves/thumbnail',
-      queryParams: { cast: ['Keanu Reeves'], sort: SearchComponent.DEFAULT_SORT }
+      queryParams: { cast: ['Keanu Reeves'], sort: SearchQueryParams.DEFAULT_SORT }
     };
 
     Object.defineProperty(input, 'files', { value: [file], configurable: true });
@@ -301,7 +302,7 @@ describe('MetaComponent', () => {
     const metaMember = {
       name: 'Keanu Reeves',
       imageUrl: '/api/media/cast/Keanu%20Reeves/thumbnail',
-      queryParams: { cast: ['Keanu Reeves'], sort: SearchComponent.DEFAULT_SORT }
+      queryParams: { cast: ['Keanu Reeves'], sort: SearchQueryParams.DEFAULT_SORT }
     };
 
     Object.defineProperty(input, 'files', { value: [file], configurable: true });
diff --git a/src/MediaBrowser.Frontend/src/app/meta/meta.ts b/src/MediaBrowser.Frontend/src/app/meta/meta.ts
index 05220f3..9b5fe32 100644
--- a/src/MediaBrowser.Frontend/src/app/meta/meta.ts
+++ b/src/MediaBrowser.Frontend/src/app/meta/meta.ts
@@ -5,6 +5,7 @@ import { MediaService, MediaTagType } from '../services';
 import { SearchComponent } from '../search/search';
 import { firstValueFrom, Subscription } from 'rxjs';
 import { SpinnerComponent } from '../spinner/spinner';
+import { SearchQueryParams } from '../search/search-query-params';
 
 interface MetaMember {
   name: string;
@@ -128,7 +129,7 @@ export class MetaComponent implements OnInit, AfterViewInit, OnDestroy {
       this.metaMembers = results.map(name => ({
         name,
         imageUrl: this.getImageUrl(this.type as MediaTagType, name),
-        queryParams: { [this.type]: [name], sort: SearchComponent.DEFAULT_SORT }
+        queryParams: { [this.type]: [name], sort: SearchQueryParams.DEFAULT_SORT }
       }));
       
       // Restore scroll position after content is loaded and rendered
diff --git a/src/MediaBrowser.Frontend/src/app/navigation-tabs/navigation-tabs.spec.ts b/src/MediaBrowser.Frontend/src/app/navigation-tabs/navigation-tabs.spec.ts
index 6eeb116..11cd3f4 100644
--- a/src/MediaBrowser.Frontend/src/app/navigation-tabs/navigation-tabs.spec.ts
+++ b/src/MediaBrowser.Frontend/src/app/navigation-tabs/navigation-tabs.spec.ts
@@ -4,7 +4,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { of } from 'rxjs';
 import { NavigationTabsComponent } from './navigation-tabs';
 import { UsersService } from '../services/users.service';
-import { SearchComponent } from '../search/search';
+import { SearchQueryParams } from '../search/search-query-params';
 
 describe('NavigationTabsComponent', () => {
   let component: NavigationTabsComponent;
@@ -38,7 +38,7 @@ describe('NavigationTabsComponent', () => {
   });
 
   it('uses SearchComponent default sort', () => {
-    expect(component.defaultSort).toBe(SearchComponent.DEFAULT_SORT);
+    expect(component.defaultSort).toBe(SearchQueryParams.DEFAULT_SORT);
   });
 
   it('returns true only for the exact active route', () => {
diff --git a/src/MediaBrowser.Frontend/src/app/navigation-tabs/navigation-tabs.ts b/src/MediaBrowser.Frontend/src/app/navigation-tabs/navigation-tabs.ts
index 82fcfb0..d64a851 100644
--- a/src/MediaBrowser.Frontend/src/app/navigation-tabs/navigation-tabs.ts
+++ b/src/MediaBrowser.Frontend/src/app/navigation-tabs/navigation-tabs.ts
@@ -3,7 +3,7 @@ import { Router, RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { UsersService } from '../services/users.service';
 import { firstValueFrom } from 'rxjs';
-import { SearchComponent } from '../search/search';
+import { SearchQueryParams } from '../search/search-query-params';
 
 @Component({
   selector: 'app-navigation-tabs',
@@ -16,7 +16,7 @@ export class NavigationTabsComponent {
   private router = inject(Router);
   protected usersService = inject(UsersService);
 
-  defaultSort = SearchComponent.DEFAULT_SORT;
+  defaultSort = SearchQueryParams.DEFAULT_SORT;
   isDropdownOpen = false;
 
   constructor() {}
diff --git a/src/MediaBrowser.Frontend/src/app/player/player.css b/src/MediaBrowser.Frontend/src/app/player/player.css
index cf68278..e355642 100644
--- a/src/MediaBrowser.Frontend/src/app/player/player.css
+++ b/src/MediaBrowser.Frontend/src/app/player/player.css
@@ -131,6 +131,47 @@
   overflow: hidden;
 }
 
+.player-nav-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3rem;
+  height: 3rem;
+  border: none;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.6);
+  color: var(--fg1);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
+  z-index: 8;
+}
+
+.player-nav-button:hover:not(:disabled) {
+  transform: translateY(-50%) scale(1.08);
+  background: rgba(0, 0, 0, 0.78);
+}
+
+.player-nav-button:disabled {
+  cursor: default;
+}
+
+.player-nav-button-hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.player-nav-button-previous {
+  left: 1rem;
+}
+
+.player-nav-button-next {
+  right: 1rem;
+}
+
 .chapter-panel {
   z-index: 20;
   display: flex;
@@ -229,13 +270,14 @@
   white-space: nowrap;
 }
 
-.add-chapter-button {
+.add-chapter-button, .cancel-chapter-button {
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
   border: none;
   border-radius: var(--radius1);
   padding: 0.6rem 0.9rem;
+  margin-left: 0.5rem;
   background: var(--primary3-bg);
   color: var(--fg4);
   cursor: pointer;
@@ -282,6 +324,12 @@
     width: calc(100% - 1.1rem);
   }
 
+  .player-nav-button {
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: 1rem;
+  }
+
   .chapter-panel {
     flex-wrap: wrap;
   }
diff --git a/src/MediaBrowser.Frontend/src/app/player/player.html b/src/MediaBrowser.Frontend/src/app/player/player.html
index 4d039d1..4a3873c 100644
--- a/src/MediaBrowser.Frontend/src/app/player/player.html
+++ b/src/MediaBrowser.Frontend/src/app/player/player.html
@@ -1,5 +1,5 @@
 <div class="player-container">
-  @if (mediaData) {
+  @if (state?.mediaData) {
     <div 
       (mouseleave)="onMouseLeave()"
       (mousemove)="onMouseMove()"
@@ -10,58 +10,90 @@
           <i class="fa-solid fa-chevron-left"></i>
         </button>
       }
-      <h2>{{ mediaData.title }}</h2>
+      <h2>{{ state!.mediaData!.title }}</h2>
       <div class="header-actions">
-        <button (click)="editMedia()" class="edit-button">
-          <i class="fa-solid fa-file-pen"></i>
-        </button>
-        @if (mediaData && mediaData.duration && !mediaData.mime.startsWith('image/')) {
-          <button (click)="toggleChapterPanel()" class="chapter-toggle-button" title="Create chapter range">
-            <i class="fa-solid fa-bookmark"></i>
+        @if (!chapterPanelVisible) {
+          <button (click)="editMedia()" class="edit-button">
+            <i class="fa-solid fa-file-pen"></i>
           </button>
+          @if (state!.mediaData!.duration && !state!.mediaData!.mime.startsWith('image/')) {
+            <button (click)="toggleChapterPanel()" class="chapter-toggle-button" title="Create chapter range">
+              <i class="fa-solid fa-bookmark"></i>
+            </button>
+          }
         }
       </div>
     </div>
   }
   
   <div class="player">
-    @if (mediaData && mediaData.mime.startsWith('video/')) {
+    @if (state?.mediaData && state?.mediaData!.mime.startsWith('video/')) {
       <video 
+        (ended)="onMediaEnded()"
         (loadedmetadata)="onMediaMetadataLoaded()"
+        (seeked)="onMediaSeeked()"
+        (seeking)="onMediaSeeking()"
+        (timeupdate)="onMediaTimeUpdate($event)"
         (volumechange)="onVolumeChange($event)"
-        [poster]="mediaData.thumbnailUrl"
+        [poster]="state!.mediaData!.thumbnailUrl"
         #videoElement
         autoplay
         class="video-element"
         controls>
-        <source [src]="mediaSourceUrl" [type]="mediaData.mime">
+        <source [src]="mediaSourceUrl" [type]="state!.mediaData!.mime">
         Your browser does not support the video tag.
       </video>
     }
 
-    @if (mediaData && mediaData.mime.startsWith('audio/')) {
+    @if (state?.mediaData && state?.mediaData!.mime.startsWith('audio/')) {
       <audio 
+        (ended)="onMediaEnded()"
         (loadedmetadata)="onMediaMetadataLoaded()"
+        (seeked)="onMediaSeeked()"
+        (seeking)="onMediaSeeking()"
+        (timeupdate)="onMediaTimeUpdate($event)"
         (volumechange)="onVolumeChange($event)"
-        [ngStyle]="{'backgroundImage':'url(' + mediaData.thumbnailUrl + ')'}"
+        [ngStyle]="{'backgroundImage':'url(' + state!.mediaData!.thumbnailUrl + ')'}"
         #audioElement
         autoplay
         class="audio-element"
         controls>
-        <source [src]="mediaSourceUrl" [type]="mediaData.mime">
+        <source [src]="mediaSourceUrl" [type]="state!.mediaData!.mime">
         Your browser does not support the audio element.
       </audio>
     }
 
-    @if (mediaData && mediaData.mime.startsWith('image/')) {
+    @if (state?.mediaData && state?.mediaData!.mime.startsWith('image/')) {
       <img 
-        [src]="mediaData.url"
-        alt="{{ mediaData.title }}"
+        [src]="state!.mediaData!.url"
+        alt="{{ state!.mediaData!.title }}"
         class="image-element"/>
     }
+
+    @if (state?.searchContext) {
+      <button
+        (click)="goToPrevious()"
+        [class.player-nav-button-hidden]="!hasPreviousItem"
+        [disabled]="!hasPreviousItem"
+        aria-label="Go to previous item"
+        class="player-nav-button player-nav-button-previous"
+        title="Previous (Left Arrow)">
+        <i class="fa-solid fa-chevron-left"></i>
+      </button>
+
+      <button
+        (click)="goToNext()"
+        [class.player-nav-button-hidden]="!hasNextItem"
+        [disabled]="!hasNextItem"
+        aria-label="Go to next item"
+        class="player-nav-button player-nav-button-next"
+        title="Next (Right Arrow)">
+        <i class="fa-solid fa-chevron-right"></i>
+      </button>
+    }
   </div>
 
-  @if (mediaData && mediaData.duration && !mediaData.mime.startsWith('image/') && chapterPanelVisible) {
+  @if (state?.mediaData && state?.mediaData!.duration && !state?.mediaData!.mime.startsWith('image/') && chapterPanelVisible) {
     <div class="chapter-panel">
       <div class="chapter-slider-container">
         <div class="chapter-slider-track"></div>
@@ -91,14 +123,20 @@ <h2>{{ mediaData.title }}</h2>
         <span>Stop {{ formatTimestamp(chapterEnd) }}</span>
       </div>
 
-      <button (click)="goToAddChapter()" class="add-chapter-button" [disabled]="!canAddChapter">
-        <i class="fa-solid fa-plus"></i>
-        Add Chapter
-      </button>
+      <div class="chapter-panel-actions">
+        <button (click)="toggleChapterPanel()" class="cancel-chapter-button" title="Cancel chapter creation">
+          <i class="fa-solid fa-xmark"></i>
+          Cancel
+        </button>
+        <button (click)="goToAddChapter()" class="add-chapter-button" [disabled]="!canAddChapter">
+          <i class="fa-solid fa-plus"></i>
+          Add Chapter
+        </button>
+      </div>
     </div>
   }
   
-  @if (!mediaData) {
+  @if (!state?.mediaData) {
     <div class="no-media">
       <p>No media data available</p>
       <button (click)="goBack()">Return to Search</button>
diff --git a/src/MediaBrowser.Frontend/src/app/player/player.spec.ts b/src/MediaBrowser.Frontend/src/app/player/player.spec.ts
index cae251a..eba6da1 100644
--- a/src/MediaBrowser.Frontend/src/app/player/player.spec.ts
+++ b/src/MediaBrowser.Frontend/src/app/player/player.spec.ts
@@ -5,6 +5,7 @@ import { Location } from '@angular/common';
 import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest';
 import { of, throwError } from 'rxjs';
 import { MediaReadModel, MediaService } from '../services';
+import { SearchQueryParams } from '../search/search-query-params';
 import { PlayerComponent } from './player';
 
 interface PlayerMocks {
@@ -20,6 +21,7 @@ interface PlayerMocks {
   };
   mediaService: {
     get: ReturnType<typeof vi.fn>;
+    search: ReturnType<typeof vi.fn>;
   };
   router: {
     currentNavigation: ReturnType<typeof vi.fn>;
@@ -74,7 +76,8 @@ async function createComponent(overrides?: {
       back: vi.fn()
     },
     mediaService: {
-      get: vi.fn().mockReturnValue(of(overrides?.serviceMediaData ?? createMediaReadModel('service-media')))
+      get: vi.fn().mockReturnValue(of(overrides?.serviceMediaData ?? createMediaReadModel('service-media'))),
+      search: vi.fn().mockReturnValue(of({ results: [], count: 0 }))
     },
     router: {
       currentNavigation: vi.fn().mockReturnValue(navigationState as Navigation | null),
@@ -140,7 +143,7 @@ describe('PlayerComponent', () => {
     await component.loadMedia();
 
     expect(mocks.mediaService.get).not.toHaveBeenCalled();
-    expect(component.mediaData?.id).toBe('from-nav');
+    expect(component.state?.mediaData?.id).toBe('from-nav');
   });
 
   it('loads media from MediaService when navigation state is missing', async () => {
@@ -151,7 +154,7 @@ describe('PlayerComponent', () => {
     await component.loadMedia();
 
     expect(mocks.mediaService.get).toHaveBeenCalledWith('from-service');
-    expect(component.mediaData?.id).toBe('from-service');
+    expect(component.state?.mediaData?.id).toBe('from-service');
   });
 
   it('handles media loading failures gracefully', async () => {
@@ -162,7 +165,7 @@ describe('PlayerComponent', () => {
     component.mediaId = 'broken';
     await component.loadMedia();
 
-    expect(component.mediaData).toBeUndefined();
+    expect(component.state?.mediaData).toBeUndefined();
     expect(consoleErrorSpy).toHaveBeenCalled();
   });
 
@@ -178,7 +181,7 @@ describe('PlayerComponent', () => {
     const model = createMediaReadModel('edit-id');
     const { component, mocks } = await createComponent();
     component.mediaId = 'edit-id';
-    component.mediaData = model;
+    component.state = { mediaData: model };
 
     component.editMedia();
 
@@ -195,10 +198,98 @@ describe('PlayerComponent', () => {
     expect(mocks.router.navigate).not.toHaveBeenCalled();
   });
 
+  it('shows next navigation for first item when only two search results are available', async () => {
+    const { component } = await createComponent();
+    const first = createMediaReadModel('first', 'image/jpeg');
+    const second = createMediaReadModel('second', 'image/jpeg');
+
+    component.state = {
+      mediaData: first,
+      searchContext: {
+        currentIndex: 0,
+        searchParams: {} as any
+      }
+    };
+    component.searchResponse = {
+      results: [first, second],
+      count: 2
+    };
+
+    expect(component.hasPreviousItem).toBe(false);
+    expect(component.hasNextItem).toBe(true);
+  });
+
+  it('goToNext selects the immediate next item for a three-item window from the first item', async () => {
+    const { component, mocks } = await createComponent();
+    const first = createMediaReadModel('first', 'image/jpeg');
+    const second = createMediaReadModel('second', 'image/jpeg');
+    const third = createMediaReadModel('third', 'image/jpeg');
+    const searchParams = new SearchQueryParams();
+    vi.spyOn(SearchQueryParams, 'getQueryParams').mockReturnValue({});
+
+    component.state = {
+      mediaData: first,
+      searchContext: {
+        currentIndex: 0,
+        searchParams
+      }
+    };
+    component.searchResponse = {
+      results: [first, second, third],
+      count: 3
+    };
+
+    vi.spyOn(component, 'ngOnInit').mockResolvedValue();
+
+    await component.goToNext();
+
+    expect(mocks.router.navigate).toHaveBeenCalledWith(['/player', 'second'], {
+      state: {
+        mediaData: second,
+        searchContext: component.state?.searchContext
+      },
+      queryParams: {}
+    });
+    expect(component.state?.searchContext?.currentIndex).toBe(1);
+  });
+
+  it('goToPrevious selects the immediate previous item for a two-item trailing window', async () => {
+    const { component, mocks } = await createComponent();
+    const second = createMediaReadModel('second', 'image/jpeg');
+    const third = createMediaReadModel('third', 'image/jpeg');
+    const searchParams = new SearchQueryParams();
+    vi.spyOn(SearchQueryParams, 'getQueryParams').mockReturnValue({});
+
+    component.state = {
+      mediaData: third,
+      searchContext: {
+        currentIndex: 2,
+        searchParams
+      }
+    };
+    component.searchResponse = {
+      results: [second, third],
+      count: 3
+    };
+
+    vi.spyOn(component, 'ngOnInit').mockResolvedValue();
+
+    await component.goToPrevious();
+
+    expect(mocks.router.navigate).toHaveBeenCalledWith(['/player', 'second'], {
+      state: {
+        mediaData: second,
+        searchContext: component.state?.searchContext
+      },
+      queryParams: {}
+    });
+    expect(component.state?.searchContext?.currentIndex).toBe(1);
+  });
+
   it('toggles chapter panel visibility', async () => {
     const { component } = await createComponent();
 
-    component.mediaData = createMediaReadModel();
+    component.state = { mediaData: createMediaReadModel() };
     const video = document.createElement('video');
     Object.defineProperty(video, 'duration', { value: 120 });
     // @ts-ignore
@@ -241,7 +332,7 @@ describe('PlayerComponent', () => {
     const mediaData = createMediaReadModel('chapter-parent');
     const { component, mocks } = await createComponent();
     component.mediaId = 'chapter-parent';
-    component.mediaData = mediaData;
+    component.state = { mediaData };
     component.chapterStart = 12.5;
     component.chapterEnd = 45.2;
 
@@ -372,4 +463,109 @@ describe('PlayerComponent', () => {
 
     expect((component as any).hideTimeout).toBeUndefined();
   });
+
+  it('navigates to previous item on ArrowLeft for image media', async () => {
+    const { component } = await createComponent();
+    component.state = {
+      mediaData: createMediaReadModel('image-current', 'image/jpeg'),
+      searchContext: {
+        currentIndex: 1,
+        searchParams: {} as any
+      }
+    };
+    component.searchResponse = {
+      results: [
+        createMediaReadModel('image-previous', 'image/jpeg'),
+        createMediaReadModel('image-current', 'image/jpeg'),
+        createMediaReadModel('image-next', 'image/jpeg')
+      ],
+      count: 3
+    };
+
+    const goToPreviousSpy = vi.spyOn(component, 'goToPrevious').mockResolvedValue();
+    const preventDefault = vi.fn();
+
+    component.onDocumentKeyDown({ key: 'ArrowLeft', preventDefault, target: document.body } as unknown as KeyboardEvent);
+
+    expect(preventDefault).toHaveBeenCalledTimes(1);
+    expect(goToPreviousSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('navigates to next item on ArrowRight for image media', async () => {
+    const { component } = await createComponent();
+    component.state = {
+      mediaData: createMediaReadModel('image-current', 'image/jpeg'),
+      searchContext: {
+        currentIndex: 1,
+        searchParams: {} as any
+      }
+    };
+    component.searchResponse = {
+      results: [
+        createMediaReadModel('image-previous', 'image/jpeg'),
+        createMediaReadModel('image-current', 'image/jpeg'),
+        createMediaReadModel('image-next', 'image/jpeg')
+      ],
+      count: 3
+    };
+
+    const goToNextSpy = vi.spyOn(component, 'goToNext').mockResolvedValue();
+    const preventDefault = vi.fn();
+
+    component.onDocumentKeyDown({ key: 'ArrowRight', preventDefault, target: document.body } as unknown as KeyboardEvent);
+
+    expect(preventDefault).toHaveBeenCalledTimes(1);
+    expect(goToNextSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not navigate on arrow keys when media is not an image', async () => {
+    const { component } = await createComponent();
+    component.state = {
+      mediaData: createMediaReadModel('video-current', 'video/mp4'),
+      searchContext: {
+        currentIndex: 1,
+        searchParams: {} as any
+      }
+    };
+    component.searchResponse = {
+      results: [createMediaReadModel('video-previous'), createMediaReadModel('video-current'), createMediaReadModel('video-next')],
+      count: 3
+    };
+
+    const goToNextSpy = vi.spyOn(component, 'goToNext').mockResolvedValue();
+    const preventDefault = vi.fn();
+
+    component.onDocumentKeyDown({ key: 'ArrowRight', preventDefault, target: document.body } as unknown as KeyboardEvent);
+
+    expect(preventDefault).not.toHaveBeenCalled();
+    expect(goToNextSpy).not.toHaveBeenCalled();
+  });
+
+  it('does not navigate on arrow keys when focus is on interactive elements', async () => {
+    const { component } = await createComponent();
+    component.state = {
+      mediaData: createMediaReadModel('image-current', 'image/jpeg'),
+      searchContext: {
+        currentIndex: 1,
+        searchParams: {} as any
+      }
+    };
+    component.searchResponse = {
+      results: [
+        createMediaReadModel('image-previous', 'image/jpeg'),
+        createMediaReadModel('image-current', 'image/jpeg'),
+        createMediaReadModel('image-next', 'image/jpeg')
+      ],
+      count: 3
+    };
+
+    const goToNextSpy = vi.spyOn(component, 'goToNext').mockResolvedValue();
+    const preventDefault = vi.fn();
+    const input = document.createElement('input');
+
+    component.onDocumentKeyDown({ key: 'ArrowRight', preventDefault, target: input } as unknown as KeyboardEvent);
+
+    expect(preventDefault).not.toHaveBeenCalled();
+    expect(goToNextSpy).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/MediaBrowser.Frontend/src/app/player/player.ts b/src/MediaBrowser.Frontend/src/app/player/player.ts
index b4cd975..4b1ff52 100644
--- a/src/MediaBrowser.Frontend/src/app/player/player.ts
+++ b/src/MediaBrowser.Frontend/src/app/player/player.ts
@@ -1,10 +1,19 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectorRef, Component, inject, OnInit, OnDestroy, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { ChangeDetectorRef, Component, inject, OnInit, OnDestroy, ViewChild, ElementRef, AfterViewInit, HostListener } from '@angular/core';
 import { ActivatedRoute, Navigation, Router } from '@angular/router';
 import { Location } from '@angular/common';
-import { MediaReadModel, MediaService } from '../services';
+import { MediaReadModel, MediaService, SearchResponse } from '../services';
 import { firstValueFrom } from 'rxjs/internal/firstValueFrom';
 import { ReadonlyInfoSectionComponent } from '../media-editor/readonly-info-section/readonly-info-section.component';
+import { SearchQueryParams } from '../search/search-query-params';
+
+export interface PlayerNavigationState {
+  mediaData?: MediaReadModel;
+  searchContext?: {
+    currentIndex: number;
+    searchParams: SearchQueryParams;
+  };
+}
 
 @Component({
   selector: 'app-player',
@@ -25,21 +34,34 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit {
   
   @ViewChild('videoElement', { static: false }) videoElement!: ElementRef<HTMLVideoElement>;
   @ViewChild('audioElement', { static: false }) audioElement!: ElementRef<HTMLAudioElement>;
-  
-  get hasHistory(): boolean {
-    return window.history.length > 1;
+  @HostListener('document:keydown', ['$event'])
+  onDocumentKeyDown(event: KeyboardEvent): void {
+    if (!this.state?.mediaData?.mime.startsWith('image/') || !this.state.searchContext || this.isInteractiveTarget(event.target)) {
+      return;
+    }
+
+    if (event.key === 'ArrowLeft' && this.hasPreviousItem) {
+      event.preventDefault();
+      void this.goToPrevious();
+    }
+
+    if (event.key === 'ArrowRight' && this.hasNextItem) {
+      event.preventDefault();
+      void this.goToNext();
+    }
   }
+  
   get mediaSourceUrl(): string {
-    if (!this.mediaData) {
+    if (!this.state?.mediaData) {
       return '';
     }
 
-    if (this.mediaData.start == null || this.mediaData.duration == null) {
-      return this.mediaData.url;
+    if (this.state.mediaData.start == null || this.state.mediaData.duration == null) {
+      return this.state.mediaData.url;
     }
 
-    const end = this.mediaData.start + this.mediaData.duration;
-    return `${this.mediaData.url}#t=${this.mediaData.start},${end}`;
+    const end = this.state.mediaData.start + this.state.mediaData.duration;
+    return `${this.state.mediaData.url}#t=${this.state.mediaData.start},${end}`;
   }
 
   chapterEnd?: number;
@@ -48,16 +70,28 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit {
   headerVisible: boolean = true;
   hideTimeout?: number;
   isLoading: boolean = true;
-  mediaData?: MediaReadModel;
+  isSeekingMedia: boolean = false;
+  lastPlaybackTime?: number;
   mediaId?: string;
+  reachedSegmentEnd: boolean = false;
+  searchResponse?: SearchResponse;
+  state?: PlayerNavigationState;
 
   async loadMedia(): Promise<void> {
     try { 
-      let mediaData = this.navigation?.extras.state?.['mediaData'];
-      if (!mediaData || mediaData.id !== this.mediaId) {
-        mediaData = await firstValueFrom(this.mediaService.get(this.mediaId!));
+      this.state = this.navigation?.extras.state as PlayerNavigationState | undefined;
+      if (!this.state?.mediaData || this.state.mediaData.id !== this.mediaId) {
+        this.state = { ...this.state, mediaData: await firstValueFrom(this.mediaService.get(this.mediaId!)) };
+      }
+
+      if (this.state.searchContext) {
+        const params = this.route.snapshot.queryParams;
+        SearchQueryParams.loadFromQueryParams(this.state.searchContext.searchParams, params);
+        const skip = Math.max(this.state.searchContext.currentIndex - 1, 0);
+        const searchRequest = SearchQueryParams.getSearchMediaRequest(this.state.searchContext.searchParams, skip, 3);
+        this.searchResponse = await firstValueFrom(this.mediaService.search(searchRequest));
       }
-      this.mediaData = mediaData;
+
       this.cdr.detectChanges();
     } catch (error) {
       console.error('Error loading media by ID:', error);
@@ -71,6 +105,7 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit {
   }
   async ngOnInit(): Promise<void> {
     this.isLoading = true;
+    this.resetPlaybackProgressTracking();
     this.mediaId = this.route.snapshot.paramMap.get('id')!;
     await this.loadMedia();
     this.startHideTimer();
@@ -133,17 +168,134 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit {
     this.savedVolume = element.volume;
   }
 
+  // media progress tracking
+  readonly SEGMENT_END_TOLERANCE = 0.2;
+  readonly MAX_NATURAL_PROGRESS_STEP = 1.5;
+  get segmentEndTime(): number | undefined {
+    if (this.state?.mediaData?.start === undefined || this.state.mediaData.duration === undefined) {
+      return undefined;
+    }
+
+    return this.state.mediaData.start + this.state.mediaData.duration;
+  }
+  onMediaSeeked(): void {
+    this.isSeekingMedia = false;
+  }
+  onMediaSeeking(): void {
+    this.isSeekingMedia = true;
+    this.lastPlaybackTime = undefined;
+  }
+  async onMediaTimeUpdate(event: Event): Promise<void> {
+    const segmentEnd = this.segmentEndTime;
+    if (segmentEnd === undefined || this.reachedSegmentEnd || this.isSeekingMedia) {
+      return;
+    }
+
+    const element = event.target as HTMLVideoElement | HTMLAudioElement;
+    const previousTime = this.lastPlaybackTime;
+    const currentTime = element.currentTime;
+    this.lastPlaybackTime = currentTime;
+
+    if (previousTime === undefined) {
+      return;
+    }
+
+    if (element.paused || element.playbackRate <= 0) {
+      return;
+    }
+
+    const maxStep = this.MAX_NATURAL_PROGRESS_STEP * Math.max(element.playbackRate, 1);
+    const crossedSegmentEndNaturally =
+      previousTime < segmentEnd - this.SEGMENT_END_TOLERANCE &&
+      currentTime >= segmentEnd - this.SEGMENT_END_TOLERANCE &&
+      currentTime - previousTime <= maxStep;
+
+    if (crossedSegmentEndNaturally) {
+      this.reachedSegmentEnd = true;
+      await this.onMediaEnded();
+    }
+  }
+  resetPlaybackProgressTracking(): void {
+    this.isSeekingMedia = false;
+    this.lastPlaybackTime = undefined;
+    this.reachedSegmentEnd = false;
+  }
+
   // navigation
+  get hasHistory(): boolean {
+    return window.history.length > 1;
+  }
+  get hasNextItem(): boolean {
+    const currentIndex = this.currentSearchWindowIndex;
+    return currentIndex !== undefined && currentIndex < this.searchResponse!.results.length - 1;
+  }
+  get hasPreviousItem(): boolean {
+    const currentIndex = this.currentSearchWindowIndex;
+    return currentIndex !== undefined && currentIndex > 0;
+  }
+  get currentSearchWindowIndex(): number | undefined {
+    const results = this.searchResponse?.results;
+    const searchContext = this.state?.searchContext;
+    if (!results || !searchContext) {
+      return undefined;
+    }
+
+    const currentMediaId = this.state?.mediaData?.id;
+    if (currentMediaId) {
+      const indexById = results.findIndex(media => media.id === currentMediaId);
+      if (indexById >= 0) {
+        return indexById;
+      }
+    }
+
+    const windowStartIndex = Math.max(searchContext.currentIndex - 1, 0);
+    const indexBySearchContext = searchContext.currentIndex - windowStartIndex;
+    return indexBySearchContext >= 0 && indexBySearchContext < results.length
+      ? indexBySearchContext
+      : undefined;
+  }
   editMedia(): void {
     if (this.mediaId) {
       this.router.navigate(['/edit', this.mediaId],
-        { state: { mediaData: this.mediaData } }
+        { state: { mediaData: this.state?.mediaData } }
       );
     }
   }
   goBack(): void {
     this.location.back();
   }
+  async goToNext(): Promise<void> {
+    if (!this.hasNextItem) {
+      return;
+    }
+
+    const currentIndex = this.currentSearchWindowIndex!;
+    this.state!.searchContext!.currentIndex++;
+    const mediaData = this.searchResponse!.results[currentIndex + 1];
+    await this.router.navigate(['/player', mediaData.id], {
+      state: { mediaData, searchContext: this.state?.searchContext },
+      queryParams: this.state?.searchContext?.searchParams ? SearchQueryParams.getQueryParams(this.state.searchContext.searchParams) : undefined
+    });
+    await this.ngOnInit();
+  }
+  async goToPrevious(): Promise<void> {
+    if (!this.hasPreviousItem) {
+      return;
+    }
+
+    const currentIndex = this.currentSearchWindowIndex!;
+    this.state!.searchContext!.currentIndex--;
+    const mediaData = this.searchResponse!.results[currentIndex - 1];
+    await this.router.navigate(['/player', mediaData.id], {
+      state: { mediaData, searchContext: this.state?.searchContext },
+      queryParams: this.state?.searchContext?.searchParams ? SearchQueryParams.getQueryParams(this.state.searchContext.searchParams) : undefined
+    });
+    await this.ngOnInit();
+  }
+  async onMediaEnded(): Promise<void> {
+    this.reachedSegmentEnd = true;
+    await this.goToNext();
+  }
 
   // chapter management
   readonly RANGE_STEP: number = 1; // 1 second step for chapter range selection
@@ -158,12 +310,12 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit {
     return end === undefined || duration === undefined || duration <= 0 ? 100 : Math.min(100, (end / duration) * 100);
   }
   get mediaDuration(): number | undefined {
-    const ffprobeDuration = this.mediaData?.ffprobe?.format?.duration;
+    const ffprobeDuration = this.state?.mediaData?.ffprobe?.format?.duration;
     if (ffprobeDuration) {
       return parseFloat(ffprobeDuration);
     }
     const mediaElement = this.videoElement?.nativeElement ?? this.audioElement?.nativeElement;
-    return mediaElement?.duration ?? this.mediaData?.duration;
+    return mediaElement?.duration ?? this.state?.mediaData?.duration;
   }
   get selectedRangeWidth(): number {
     const duration = this.mediaDuration;
@@ -178,13 +330,13 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit {
     return start === undefined || duration === undefined || duration <= 0 ? 0 : Math.min(100, (start / duration) * 100);
   }
   async goToAddChapter(): Promise<void> {
-    if (this.mediaData && this.canAddChapter) {
+    if (this.state?.mediaData && this.canAddChapter) {
       const start = this.chapterStart!;
       const end = this.chapterEnd!;
 
-      this.router.navigate(['/edit', this.mediaData.parentId ?? this.mediaData.id, start, end, 'chapter'], {
+      this.router.navigate(['/edit', this.state.mediaData.parentId ?? this.state.mediaData.id, start, end, 'chapter'], {
         state: {
-          mediaData: this.mediaData.parentId ? undefined : this.mediaData
+          mediaData: this.state.mediaData.parentId ? undefined : this.state.mediaData
         }
       });
     }
@@ -218,9 +370,9 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit {
 
     this.chapterEnd = this.mediaDuration!;
 
-    if (typeof this.mediaData?.start === 'number') {
+    if (typeof this.state?.mediaData?.start === 'number') {
       // set the start to end of the current chapter so the user can easily add consecutive chapters
-      this.chapterStart = this.mediaData.start! + this.mediaData.duration!;
+      this.chapterStart = this.state.mediaData.start! + this.state.mediaData.duration!;
     } else {
       // else set the start to the current position in the media so the user can easily create a chapter starting from the current position
       this.chapterStart = mediaElement?.currentTime ?? 0;
@@ -228,13 +380,22 @@ export class PlayerComponent implements OnInit, OnDestroy, AfterViewInit {
   }
   toggleChapterPanel(): void {
     const duration = this.mediaDuration;
-    if (this.mediaData && duration !== undefined && duration > 0) {      
+    if (this.state?.mediaData && duration !== undefined && duration > 0) {      
       this.chapterPanelVisible = !this.chapterPanelVisible;
       this.setupChapterRange();
     }
   }
 
   // helper methods
+  isInteractiveTarget(target: EventTarget | null): boolean {
+    const element = target as HTMLElement | null;
+    if (!element) {
+      return false;
+    }
+
+    const tagName = element.tagName;
+    return ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON'].includes(tagName) || element.isContentEditable;
+  }
   formatTimestamp(seconds?: number): string {
     return ReadonlyInfoSectionComponent.formatDuration(seconds ?? 0);
   }
diff --git a/src/MediaBrowser.Frontend/src/app/search/search-content.css b/src/MediaBrowser.Frontend/src/app/search/search-content.css
index c25d454..b35bc44 100644
--- a/src/MediaBrowser.Frontend/src/app/search/search-content.css
+++ b/src/MediaBrowser.Frontend/src/app/search/search-content.css
@@ -62,6 +62,19 @@
   text-shadow: 0.25rem 0.25rem 1rem black;
 }
 
+.file-type-badge {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+  color: var(--fg1);
+  padding: 4px;
+  border-radius: 4px;
+  font-size: 1.25rem;
+  z-index: 10;
+  opacity: 0.7;
+  text-shadow: 0.25rem 0.25rem 1rem black;
+}
+
 /* Responsive adjustments */
 @media (max-width: 768px) {
   .search-grid {
diff --git a/src/MediaBrowser.Frontend/src/app/search/search-content.html b/src/MediaBrowser.Frontend/src/app/search/search-content.html
index 3568bcf..6f47ada 100644
--- a/src/MediaBrowser.Frontend/src/app/search/search-content.html
+++ b/src/MediaBrowser.Frontend/src/app/search/search-content.html
@@ -8,12 +8,13 @@
       <a 
           (mousedown)="onCardClick()"
           [ngStyle]="{'backgroundImage':'url(' + result.thumbnailUrl + ')'}"
+          [queryParams]="SearchQueryParams.getQueryParams(parameters)"
           [routerLink]="['/player', result.id]"
-          [state]="{ mediaData: result }"
+          [state]="getPlayerNavigationState(result, $index)"
           [title]="getTooltip(result)"
           class="result-card" >
         <div class="card-overlay">
-          <i class="fa-solid fa-play"></i>
+          <i [class]="'fa-solid ' + getCenterIconClass(result)"></i>
           <a 
             (click)="$event.stopPropagation()"
             [routerLink]="['/edit', result.id]"
@@ -23,6 +24,9 @@
             <i class="fa-solid fa-file-pen"></i>
           </a>
         </div>
+        <div class="file-type-badge">
+          <i [class]="'fa-solid ' + getFileTypeIcon(result)"></i>
+        </div>
       </a>
     }
     </div>
diff --git a/src/MediaBrowser.Frontend/src/app/search/search-content.spec.ts b/src/MediaBrowser.Frontend/src/app/search/search-content.spec.ts
index 68f7f3d..b004bf2 100644
--- a/src/MediaBrowser.Frontend/src/app/search/search-content.spec.ts
+++ b/src/MediaBrowser.Frontend/src/app/search/search-content.spec.ts
@@ -94,4 +94,19 @@ describe('SearchContentComponent', () => {
 
     expect(component.trackByResultId(0, createMediaResult({ id: 'custom-id' }))).toBe('custom-id');
   });
+
+  it('builds player navigation state with current index and search parameters', () => {
+    const fixture = TestBed.createComponent(SearchContentComponent);
+    const component = fixture.componentInstance;
+
+    const first = createMediaResult({ id: 'first' });
+    const second = createMediaResult({ id: 'second', parentId: 'root-1' });
+    component.results = [first, second];
+
+    const state = component.getPlayerNavigationState(second, 1);
+
+    expect(state.mediaData).toBe(second);
+    expect(state.searchContext?.currentIndex).toBe(1);
+    expect(state.searchContext?.searchParams).toBe(component.parameters);
+  });
 });
diff --git a/src/MediaBrowser.Frontend/src/app/search/search-content.ts b/src/MediaBrowser.Frontend/src/app/search/search-content.ts
index dee0d5c..e2781cb 100644
--- a/src/MediaBrowser.Frontend/src/app/search/search-content.ts
+++ b/src/MediaBrowser.Frontend/src/app/search/search-content.ts
@@ -4,6 +4,8 @@ import { RouterModule } from '@angular/router';
 import { MediaReadModel } from '../services/media.service';
 import { SpinnerComponent } from '../spinner/spinner';
 import { ReadonlyInfoSectionComponent } from '../media-editor/readonly-info-section/readonly-info-section.component';
+import { SearchQueryParams } from './search-query-params';
+import { PlayerNavigationState } from '../player/player';
 
 @Component({
   selector: 'app-search-content',
@@ -12,9 +14,11 @@ import { ReadonlyInfoSectionComponent } from '../media-editor/readonly-info-sect
   styleUrls: ['./search-content.css']
 })
 export class SearchContentComponent {
+  protected readonly SearchQueryParams = SearchQueryParams;
   @Input() hasMoreResults: boolean = true;
   @Input() isLoading: boolean = false;
   @Input() results: MediaReadModel[] = [];
+  @Input() parameters: SearchQueryParams = new SearchQueryParams();
 
   @Output() scroll = new EventEmitter<Event>();
   @Output() cardClick = new EventEmitter<void>();
@@ -25,6 +29,16 @@ export class SearchContentComponent {
     this.cardClick.emit();
   }
 
+  getPlayerNavigationState(result: MediaReadModel, index: number): PlayerNavigationState {
+    return {
+      mediaData: result,
+      searchContext: {
+        currentIndex: index,
+        searchParams: this.parameters
+      }
+    };
+  }
+
   getTooltip(result: MediaReadModel): string {
     let tooltip = result.title;
 
@@ -66,4 +80,38 @@ export class SearchContentComponent {
   trackByResultId(index: number, result: MediaReadModel): string {
     return result.id;
   }
+
+  isImage(result: MediaReadModel): boolean {
+    return result.mime.startsWith('image/');
+  }
+
+  isVideo(result: MediaReadModel): boolean {
+    return result.mime.startsWith('video/');
+  }
+
+  isAudio(result: MediaReadModel): boolean {
+    return result.mime.startsWith('audio/');
+  }
+
+  getCenterIconClass(result: MediaReadModel): string {
+    if (this.isImage(result)) {
+      return 'fa-magnifying-glass';
+    } else if (this.isVideo(result)) {
+      return 'fa-play';
+    } else if (this.isAudio(result)) {
+      return 'fa-volume-high';
+    }
+    return 'fa-play';
+  }
+
+  getFileTypeIcon(result: MediaReadModel): string {
+    if (this.isImage(result)) {
+      return 'fa-image';
+    } else if (this.isVideo(result)) {
+      return 'fa-film';
+    } else if (this.isAudio(result)) {
+      return 'fa-music';
+    }
+    return 'fa-file';
+  }
 }
\ No newline at end of file
diff --git a/src/MediaBrowser.Frontend/src/app/search/search-query-params.ts b/src/MediaBrowser.Frontend/src/app/search/search-query-params.ts
new file mode 100644
index 0000000..7a8e688
--- /dev/null
+++ b/src/MediaBrowser.Frontend/src/app/search/search-query-params.ts
@@ -0,0 +1,120 @@
+import { Params } from "@angular/router";
+import { SearchMediaRequest } from "../services";
+
+export class SearchQueryParams {
+  public cast: string[] = [];
+  public descending: boolean = false;
+  public directors: string[] = [];
+  public genres: string[] = [];
+  public keywords: string = '';
+  public pageIndex: number = 0;
+  public producers: string[] = [];
+  public sort: 'title' | 'createdOn' | 'duration' | 'userStarRating' | 'random' = 'title';
+  public writers: string[] = [];
+
+  static readonly DEFAULT_SORT = 'title';
+
+  public static loadFromQueryParams(searchQueryParams: SearchQueryParams, params: Params): void {
+    // Load search parameters from URL
+    searchQueryParams.keywords = params['keywords'] || '';
+    searchQueryParams.sort = params['sort'] || SearchQueryParams.DEFAULT_SORT;
+    searchQueryParams.descending = params['descending'] === 'true';
+    
+    // Handle array parameters
+    if (params['cast']) {
+      searchQueryParams.cast = Array.isArray(params['cast']) ? params['cast'] : [params['cast']];
+    } else {
+      searchQueryParams.cast = [];
+    }
+    
+    if (params['directors']) {
+      searchQueryParams.directors = Array.isArray(params['directors']) ? params['directors'] : [params['directors']];
+    } else {
+      searchQueryParams.directors = [];
+    }
+    
+    if (params['genres']) {
+      searchQueryParams.genres = Array.isArray(params['genres']) ? params['genres'] : [params['genres']];
+    } else {
+      searchQueryParams.genres = [];
+    }
+
+    searchQueryParams.pageIndex = params['pageIndex'] ? parseInt(params['pageIndex'], 10) : 0;
+
+    if (params['producers']) {
+      searchQueryParams.producers = Array.isArray(params['producers']) ? params['producers'] : [params['producers']];
+    } else {
+      searchQueryParams.producers = [];
+    }
+
+    if (params['writers']) {
+      searchQueryParams.writers = Array.isArray(params['writers']) ? params['writers'] : [params['writers']];
+    } else {
+      searchQueryParams.writers = [];
+    }
+  }
+
+  public static getQueryParams(searchQueryParams: SearchQueryParams, includePageIndex: boolean = false): any {
+    const queryParams: any = {};
+    
+    // Only add parameters that have values to keep URL clean
+    if (searchQueryParams.keywords?.trim()) {
+      queryParams['keywords'] = searchQueryParams.keywords.trim();
+    }
+    if (searchQueryParams.cast.length > 0) {
+      queryParams['cast'] = searchQueryParams.cast;
+    }
+    if (searchQueryParams.directors.length > 0) {
+      queryParams['directors'] = searchQueryParams.directors;
+    }
+    if (searchQueryParams.genres.length > 0) {
+      queryParams['genres'] = searchQueryParams.genres;
+    }
+    if (searchQueryParams.producers.length > 0) {
+      queryParams['producers'] = searchQueryParams.producers;
+    }
+    if (searchQueryParams.writers.length > 0) {
+      queryParams['writers'] = searchQueryParams.writers;
+    }
+    queryParams['sort'] = searchQueryParams.sort;
+    if (searchQueryParams.descending) {
+      queryParams['descending'] = 'true';
+    }
+    if (includePageIndex) {
+      queryParams['pageIndex'] = searchQueryParams.pageIndex;
+    }
+    return queryParams;
+  }
+
+  public static getSearchMediaRequest(searchQueryParams: SearchQueryParams, skip?: number, take?: number): SearchMediaRequest {
+    const request: SearchMediaRequest = {
+      skip: skip,
+      sort: searchQueryParams.sort,
+      take: take,
+    };
+
+    if (searchQueryParams.keywords?.trim()) {
+      request.keywords = searchQueryParams.keywords.trim();
+    }
+    if (searchQueryParams.cast.length > 0) {
+      request.cast = [...searchQueryParams.cast];
+    }
+    if (searchQueryParams.directors.length > 0) {
+      request.directors = [...searchQueryParams.directors];
+    }
+    if (searchQueryParams.genres.length > 0) {
+      request.genres = [...searchQueryParams.genres];
+    }
+    if (searchQueryParams.descending) {
+      request.descending = searchQueryParams.descending;
+    }
+    if (searchQueryParams.producers.length > 0) {
+      request.producers = [...searchQueryParams.producers];
+    }
+    if (searchQueryParams.writers.length > 0) {
+      request.writers = [...searchQueryParams.writers];
+    }
+
+    return request;
+  }
+}
\ No newline at end of file
diff --git a/src/MediaBrowser.Frontend/src/app/search/search.html b/src/MediaBrowser.Frontend/src/app/search/search.html
index 773615f..3e11ae4 100644
--- a/src/MediaBrowser.Frontend/src/app/search/search.html
+++ b/src/MediaBrowser.Frontend/src/app/search/search.html
@@ -4,21 +4,21 @@
       <input 
         (input)="onKeywordsChange()" 
         (keydown.enter)="onSearch()" 
-        [(ngModel)]="keywords" 
+        [(ngModel)]="parameters.keywords" 
         class="search-input" 
         placeholder="Search for media files..." 
         type="text" />
       
       <button 
         (click)="toggleSortDirection()" 
-        [title]="descending ? 'Sort Ascending' : 'Sort Descending'"
+        [title]="parameters.descending ? 'Sort Ascending' : 'Sort Descending'"
         class="sort-direction-button">
-        <i class="fa-solid" [class.fa-arrow-up-wide-short]="descending" [class.fa-arrow-up-short-wide]="!descending"></i>
+        <i class="fa-solid" [class.fa-arrow-up-wide-short]="parameters.descending" [class.fa-arrow-up-short-wide]="!parameters.descending"></i>
       </button>
       
       <select 
         (change)="onSortChange()" 
-        [(ngModel)]="sort" 
+        [(ngModel)]="parameters.sort" 
         class="sort-dropdown">
         @for (option of sortOptions; track option.value) {
           <option [value]="option.value">
@@ -51,10 +51,10 @@
               @for (option of sortOptions; track option.value) {
                 <button 
                   (click)="selectSortOption(option.value)"
-                  [class.selected]="option.value === sort"
+                  [class.selected]="option.value === parameters.sort"
                   class="sort-option">
                   <span class="sort-option-label">{{ option.label }}</span>
-                  @if (option.value === sort) {
+                  @if (option.value === parameters.sort) {
                     <i class="fa-solid fa-check sort-option-check"></i>
                   }
                 </button>
@@ -77,6 +77,7 @@
     [hasMoreResults]="hasMoreResults"
     [isLoading]="isLoading"
     [results]="results"
+    [parameters]="parameters"
     #searchContent>
   </app-search-content>
 </div>
\ No newline at end of file
diff --git a/src/MediaBrowser.Frontend/src/app/search/search.spec.ts b/src/MediaBrowser.Frontend/src/app/search/search.spec.ts
index 87fd23e..5bda638 100644
--- a/src/MediaBrowser.Frontend/src/app/search/search.spec.ts
+++ b/src/MediaBrowser.Frontend/src/app/search/search.spec.ts
@@ -99,7 +99,7 @@ describe('SearchComponent', () => {
 
     expect(component).toBeTruthy();
     expect((component as any).scrollPosition).toBe(120);
-    expect((component as any).pageIndex).toBe(3);
+    expect(component.parameters.pageIndex).toBe(3);
   });
 
   it('clears static cache and page state entries', () => {
@@ -135,14 +135,14 @@ describe('SearchComponent', () => {
 
     await component.ngOnInit();
 
-    expect(component.keywords).toBe('  hero ');
-    expect(component.sort).toBe('createdOn');
-    expect(component.descending).toBe(true);
-    expect(component.cast).toEqual(['Cast A', 'Cast B']);
-    expect(component.directors).toEqual(['Director A']);
-    expect(component.genres).toEqual(['Drama']);
-    expect(component.producers).toEqual(['Producer A']);
-    expect(component.writers).toEqual(['Writer A']);
+    expect(component.parameters.keywords).toBe('  hero ');
+    expect(component.parameters.sort).toBe('createdOn');
+    expect(component.parameters.descending).toBe(true);
+    expect(component.parameters.cast).toEqual(['Cast A', 'Cast B']);
+    expect(component.parameters.directors).toEqual(['Director A']);
+    expect(component.parameters.genres).toEqual(['Drama']);
+    expect(component.parameters.producers).toEqual(['Producer A']);
+    expect(component.parameters.writers).toEqual(['Writer A']);
 
     expect(mocks.mediaService.search).toHaveBeenCalledWith(expect.objectContaining({
       sort: 'createdOn',
@@ -166,8 +166,8 @@ describe('SearchComponent', () => {
   it('uses cached results when request matches and autoIncrementPage is false', async () => {
     const { component, mocks } = await createComponent();
 
-    component.sort = 'title';
-    component.keywords = 'cache-keyword';
+    component.parameters.sort = 'title';
+    component.parameters.keywords = 'cache-keyword';
 
     sessionStorage.setItem(SearchComponent.CACHE_KEY, JSON.stringify({
       hasMoreResults: false,
@@ -193,19 +193,19 @@ describe('SearchComponent', () => {
       searchResponse: createSearchResponse([first, second])
     });
 
-    component.cast = ['A'];
-    component.directors = ['B'];
-    component.genres = ['C'];
-    component.producers = ['D'];
-    component.writers = ['E'];
-    component.descending = true;
-    component.keywords = '  test  ';
+    component.parameters.cast = ['A'];
+    component.parameters.directors = ['B'];
+    component.parameters.genres = ['C'];
+    component.parameters.producers = ['D'];
+    component.parameters.writers = ['E'];
+    component.parameters.descending = true;
+    component.parameters.keywords = '  test  ';
 
     await component.loadResults(true, 0, 2);
 
     expect(component.results.map(result => result.id)).toEqual(['first', 'second']);
     expect(component.hasMoreResults).toBe(true);
-    expect((component as any).pageIndex).toBe(1);
+    expect(component.parameters.pageIndex).toBe(1);
 
     const cachedRaw = sessionStorage.getItem(SearchComponent.CACHE_KEY);
     expect(cachedRaw).toBeTruthy();
@@ -299,12 +299,12 @@ describe('SearchComponent', () => {
     component.searchContentComponent = {
       searchResultsElement: new ElementRef(scrollHost)
     } as unknown as any;
-    (component as any).pageIndex = 6;
+    component.parameters.pageIndex = 6;
     (component as any).scrollPosition = 250;
 
     component.clearPagePosition();
 
-    expect((component as any).pageIndex).toBe(0);
+    expect(component.parameters.pageIndex).toBe(0);
     expect((component as any).scrollPosition).toBe(0);
     expect(scrollHost.scrollTop).toBe(0);
   });
@@ -318,8 +318,8 @@ describe('SearchComponent', () => {
     component.toggleSortDirection();
     component.selectSortOption('duration');
 
-    expect(component.descending).toBe(true);
-    expect(component.sort).toBe('duration');
+    expect(component.parameters.descending).toBe(true);
+    expect(component.parameters.sort).toBe('duration');
     expect(onSearchSpy).toHaveBeenCalledTimes(4);
 
     onSearchSpy.mockRestore();
@@ -368,14 +368,14 @@ describe('SearchComponent', () => {
 
     component.results = [createMediaResult('old')];
     component.hasMoreResults = false;
-    (component as any).pageIndex = 5;
+    component.parameters.pageIndex = 5;
     (component as any).scrollPosition = 30;
 
     await component.onSearch();
 
     expect(component.results).toEqual([]);
     expect(component.hasMoreResults).toBe(true);
-    expect((component as any).pageIndex).toBe(0);
+    expect(component.parameters.pageIndex).toBe(0);
     expect((component as any).scrollPosition).toBe(0);
     expect(loadSpy).toHaveBeenCalledTimes(1);
 
diff --git a/src/MediaBrowser.Frontend/src/app/search/search.ts b/src/MediaBrowser.Frontend/src/app/search/search.ts
index dece143..7395a92 100644
--- a/src/MediaBrowser.Frontend/src/app/search/search.ts
+++ b/src/MediaBrowser.Frontend/src/app/search/search.ts
@@ -1,10 +1,11 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectorRef, Component, inject, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { ChangeDetectorRef, Component, inject, OnInit, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { MediaReadModel, MediaService, SearchMediaRequest } from '../services/media.service';
 import { firstValueFrom } from 'rxjs/internal/firstValueFrom';
 import { SearchContentComponent } from './search-content';
+import { SearchQueryParams } from './search-query-params';
 
 interface CacheData {
   hasMoreResults: boolean;
@@ -17,11 +18,14 @@ interface CacheData {
  * This allows for bookmarkable search results and proper browser navigation.
  * 
  * Query parameters correspond directly to SearchMediaRequest interface:
- * - keywords: string search term
  * - cast: array of cast member names
- * - genres: array of genre names  
- * - sort: sort field ('title' | 'createdOn' | 'duration' | 'userStarRating' | 'random')
  * - descending: boolean for sort direction
+ * - directors: array of director names
+ * - genres: array of genre names
+ * - keywords: string search term
+ * - producers: array of producer names
+ * - sort: sort field ('title' | 'createdOn' | 'duration' | 'userStarRating' | 'random')
+ * - writers: array of writer names
  * 
  * Example URLs:
  * /search?keywords=action&sort=createdOn&descending=true
@@ -46,18 +50,10 @@ export class SearchComponent implements OnInit {
     { value: 'userStarRating', label: 'Rating' },
     { value: 'random', label: 'Random' }
   ] as const;
-  static readonly DEFAULT_SORT = 'title';
-  
+
   // Search parameters that match SearchMediaRequest
   readonly pageSize: number = 25;
-  cast: string[] = [];
-  descending: boolean = false;
-  directors: string[] = [];
-  genres: string[] = [];
-  keywords: string = '';
-  producers: string[] = [];
-  sort: 'title' | 'createdOn' | 'duration' | 'userStarRating' | 'random' = SearchComponent.DEFAULT_SORT;
-  writers: string[] = [];
+  parameters: SearchQueryParams = new SearchQueryParams();
   
   // UI state
   results: MediaReadModel[] = [];
@@ -66,7 +62,6 @@ export class SearchComponent implements OnInit {
   showSortModal: boolean = false;
 
   // Page management
-  private pageIndex: number = 0;
   private pendingScrollUpdate: boolean = false;
   private scrollPosition: number = 0;
   static readonly CACHE_KEY = 'cached-results';
@@ -85,47 +80,7 @@ export class SearchComponent implements OnInit {
     const savedPagePosition = new URLSearchParams(sessionStorage.getItem(SearchComponent.PAGE_KEY) || '');
     if (savedPagePosition) {
       this.scrollPosition = parseInt(savedPagePosition.get('scroll') || '0', 10);
-      this.pageIndex = parseInt(savedPagePosition.get('pageIndex') || '0', 10);
-    }
-  }
-
-  private loadFromQueryParams(): void {
-    const params = this.route.snapshot.queryParams;
-    
-    // Load search parameters from URL
-    this.keywords = params['keywords'] || '';
-    this.sort = params['sort'] || SearchComponent.DEFAULT_SORT;
-    this.descending = params['descending'] === 'true';
-    
-    // Handle array parameters
-    if (params['cast']) {
-      this.cast = Array.isArray(params['cast']) ? params['cast'] : [params['cast']];
-    } else {
-      this.cast = [];
-    }
-    
-    if (params['directors']) {
-      this.directors = Array.isArray(params['directors']) ? params['directors'] : [params['directors']];
-    } else {
-      this.directors = [];
-    }
-    
-    if (params['genres']) {
-      this.genres = Array.isArray(params['genres']) ? params['genres'] : [params['genres']];
-    } else {
-      this.genres = [];
-    }
-
-    if (params['producers']) {
-      this.producers = Array.isArray(params['producers']) ? params['producers'] : [params['producers']];
-    } else {
-      this.producers = [];
-    }
-
-    if (params['writers']) {
-      this.writers = Array.isArray(params['writers']) ? params['writers'] : [params['writers']];
-    } else {
-      this.writers = [];
+      this.parameters.pageIndex = parseInt(savedPagePosition.get('pageIndex') || '0', 10);
     }
   }
 
@@ -133,7 +88,7 @@ export class SearchComponent implements OnInit {
     try {
       if (this.searchContentComponent?.searchResultsElement) {
         this.scrollPosition = this.searchContentComponent.searchResultsElement.nativeElement.scrollTop;
-        sessionStorage.setItem(SearchComponent.PAGE_KEY, `scroll=${this.scrollPosition}&pageIndex=${this.pageIndex}`);
+        sessionStorage.setItem(SearchComponent.PAGE_KEY, `scroll=${this.scrollPosition}&pageIndex=${this.parameters.pageIndex}`);
       } else {
         this.clearPagePosition();
       }
@@ -143,31 +98,7 @@ export class SearchComponent implements OnInit {
   }
 
   private updateQueryParams(): void {
-    const queryParams: any = {};
-    
-    // Only add parameters that have values to keep URL clean
-    if (this.keywords?.trim()) {
-      queryParams['keywords'] = this.keywords.trim();
-    }
-    if (this.cast.length > 0) {
-      queryParams['cast'] = this.cast;
-    }
-    if (this.directors.length > 0) {
-      queryParams['directors'] = this.directors;
-    }
-    if (this.genres.length > 0) {
-      queryParams['genres'] = this.genres;
-    }
-    if (this.producers.length > 0) {
-      queryParams['producers'] = this.producers;
-    }
-    if (this.writers.length > 0) {
-      queryParams['writers'] = this.writers;
-    }
-    queryParams['sort'] = this.sort;
-    if (this.descending) {
-      queryParams['descending'] = 'true';
-    }
+    const queryParams: any = SearchQueryParams.getQueryParams(this.parameters);
 
     // Update URL without triggering navigation
     this.router.navigate([], {
@@ -178,7 +109,7 @@ export class SearchComponent implements OnInit {
   }
 
   clearPagePosition(): void {
-    this.pageIndex = 0;
+    this.parameters.pageIndex = 0;
     this.scrollPosition = 0;
     SearchComponent.clearPagePositionState();
     if (this.searchContentComponent?.searchResultsElement) {
@@ -192,7 +123,7 @@ export class SearchComponent implements OnInit {
 
   async loadResults(
     autoIncrementPage: boolean = true,
-    skip: number = this.pageIndex * this.pageSize,
+    skip: number = this.parameters.pageIndex * this.pageSize,
     take: number = this.pageSize): Promise<void> {
     if (this.isLoading || !this.hasMoreResults) {
       return;
@@ -202,34 +133,7 @@ export class SearchComponent implements OnInit {
       this.isLoading = true;
       
       // Build search request matching SearchMediaRequest interface
-      const searchRequest: SearchMediaRequest = {
-        skip: skip,
-        sort: this.sort,
-        take: take,
-      };
-
-      // Add optional parameters only if they have values
-      if (this.keywords?.trim()) {
-        searchRequest.keywords = this.keywords.trim();
-      }
-      if (this.cast.length > 0) {
-        searchRequest.cast = [...this.cast];
-      }
-      if (this.directors.length > 0) {
-        searchRequest.directors = [...this.directors];
-      }
-      if (this.genres.length > 0) {
-        searchRequest.genres = [...this.genres];
-      }
-      if (this.descending) {
-        searchRequest.descending = this.descending;
-      }
-      if (this.producers.length > 0) {
-        searchRequest.producers = [...this.producers];
-      }
-      if (this.writers.length > 0) {
-        searchRequest.writers = [...this.writers];
-      }
+      const searchRequest: SearchMediaRequest = SearchQueryParams.getSearchMediaRequest(this.parameters, skip, take);
 
       const cachedDataValue = sessionStorage.getItem(SearchComponent.CACHE_KEY);
       const cachedData: CacheData | null = cachedDataValue && !autoIncrementPage ? JSON.parse(cachedDataValue) : null;
@@ -251,7 +155,7 @@ export class SearchComponent implements OnInit {
         
         // Increment for next load
         if (autoIncrementPage && response.results.length > 0) {
-          this.pageIndex++;
+          this.parameters.pageIndex++;
         }
 
         delete searchRequest.skip;
@@ -291,16 +195,16 @@ export class SearchComponent implements OnInit {
 
   async ngOnInit(): Promise<void> {
     // Load initial state from query parameters
-    this.loadFromQueryParams();
-    if (this.pageIndex === 0) {
+    SearchQueryParams.loadFromQueryParams(this.parameters, this.route.snapshot.queryParams);
+    if (this.parameters.pageIndex === 0) {
       this.clearPagePosition();
     }
 
     // Always perform search based on current parameters
     await this.loadResults(
-      this.pageIndex === 0,
+      this.parameters.pageIndex === 0,
       0,
-      Math.max(this.pageIndex * this.pageSize, this.pageSize)
+      Math.max(this.parameters.pageIndex * this.pageSize, this.pageSize)
     );
   }
 
@@ -340,13 +244,13 @@ export class SearchComponent implements OnInit {
   }
 
   selectSortOption(sortValue: 'title' | 'createdOn' | 'duration' | 'userStarRating' | 'random'): void {
-    this.sort = sortValue;
+    this.parameters.sort = sortValue;
     this.showSortModal = false;
     this.onSearch();
   }
 
   toggleSortDirection(): void {
-    this.descending = !this.descending;
+    this.parameters.descending = !this.parameters.descending;
     this.onSearch();
   }
 
diff --git a/src/MediaBrowser.Frontend/src/app/services/api.service.spec.ts b/src/MediaBrowser.Frontend/src/app/services/api.service.spec.ts
new file mode 100644
index 0000000..a4a0c67
--- /dev/null
+++ b/src/MediaBrowser.Frontend/src/app/services/api.service.spec.ts
@@ -0,0 +1,68 @@
+import { HttpClient } from '@angular/common/http';
+import { TestBed } from '@angular/core/testing';
+import { firstValueFrom, throwError } from 'rxjs';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { ApiError, ApiService } from './api.service';
+import { ToastService } from '../toast/toast.service';
+
+describe('ApiService', () => {
+  const httpClient = {
+    get: vi.fn(),
+    post: vi.fn(),
+    put: vi.fn(),
+    delete: vi.fn()
+  };
+  const toastService = {
+    showError: vi.fn()
+  };
+  let consoleErrorSpy: ReturnType<typeof vi.spyOn>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    TestBed.configureTestingModule({
+      providers: [
+        ApiService,
+        { provide: HttpClient, useValue: httpClient },
+        { provide: ToastService, useValue: toastService }
+      ]
+    });
+  });
+
+  afterEach(() => {
+    consoleErrorSpy.mockRestore();
+  });
+
+  it('shows an error toast and rethrows a normalized api error when a request fails', async () => {
+    const service = TestBed.inject(ApiService);
+    const requestError = {
+      error: { error: 'IMPORT_FAILED', message: 'Upload failed' },
+      status: 400,
+      message: 'Bad Request'
+    };
+
+    httpClient.get.mockReturnValue(throwError(() => requestError));
+
+    await expect(firstValueFrom(service.get('/import/files'))).rejects.toMatchObject<ApiError>({
+      error: 'IMPORT_FAILED',
+      message: 'Upload failed',
+      statusCode: 400
+    });
+
+    expect(toastService.showError).toHaveBeenCalledWith('Upload failed');
+  });
+
+  it('falls back to the generic message for unknown failures', async () => {
+    const service = TestBed.inject(ApiService);
+    httpClient.post.mockReturnValue(throwError(() => ({ error: null, status: 0, message: '' })));
+
+    await expect(firstValueFrom(service.post('/users/login', {}))).rejects.toMatchObject<ApiError>({
+      error: 'API_ERROR',
+      message: 'Error Code: 0',
+      statusCode: 0
+    });
+
+    expect(toastService.showError).toHaveBeenCalledWith('Error Code: 0');
+  });
+});
\ No newline at end of file
diff --git a/src/MediaBrowser.Frontend/src/app/services/api.service.ts b/src/MediaBrowser.Frontend/src/app/services/api.service.ts
index c1a7d54..0a9fbd1 100644
--- a/src/MediaBrowser.Frontend/src/app/services/api.service.ts
+++ b/src/MediaBrowser.Frontend/src/app/services/api.service.ts
@@ -1,7 +1,8 @@
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { HttpClient, HttpParams } from '@angular/common/http';
 import { Observable, throwError } from 'rxjs';
 import { catchError } from 'rxjs/operators';
+import { ToastService } from '../toast/toast.service';
 
 export interface ApiResponse<T> {
   data: T;
@@ -21,7 +22,10 @@ export interface ApiError {
 export class ApiService {
   private readonly baseUrl = '/api';
 
-  constructor(private http: HttpClient) {}
+  constructor(
+    private http: HttpClient,
+    private toastService: ToastService
+  ) {}
 
   delete<T>(endpoint: string, params?: any): Observable<T> {
     const url = `${this.baseUrl}${endpoint}`;
@@ -99,6 +103,7 @@ export class ApiService {
     }
     
     console.error('API Error:', error);
+    this.toastService.showError(errorMessage);
     
     const apiError: ApiError = {
       error: error.error?.error || 'API_ERROR',
diff --git a/src/MediaBrowser.Frontend/src/app/services/index.ts b/src/MediaBrowser.Frontend/src/app/services/index.ts
index bbdc55e..d650b28 100644
--- a/src/MediaBrowser.Frontend/src/app/services/index.ts
+++ b/src/MediaBrowser.Frontend/src/app/services/index.ts
@@ -1,2 +1,3 @@
 export * from './api.service';
-export * from './media.service';
\ No newline at end of file
+export * from './media.service';
+export * from '../toast/toast.service';
\ No newline at end of file
diff --git a/src/MediaBrowser.Frontend/src/app/services/media.service.ts b/src/MediaBrowser.Frontend/src/app/services/media.service.ts
index 83d66ba..5e412bd 100644
--- a/src/MediaBrowser.Frontend/src/app/services/media.service.ts
+++ b/src/MediaBrowser.Frontend/src/app/services/media.service.ts
@@ -90,6 +90,10 @@ export class MediaService {
     return this.apiService.get<MediaReadModel>(`/media/${id}`);
   }
 
+  delete(id: string): Observable<void> {
+    return this.apiService.delete<void>(`/media/${id}`);
+  }
+
   update(id: string, request: UpdateMediaRequest): Observable<MediaReadModel> {
     return this.apiService.put<MediaReadModel>(`/media/${id}`, request);
   }
diff --git a/src/MediaBrowser.Frontend/src/app/toast/toast.css b/src/MediaBrowser.Frontend/src/app/toast/toast.css
new file mode 100644
index 0000000..5be8d9e
--- /dev/null
+++ b/src/MediaBrowser.Frontend/src/app/toast/toast.css
@@ -0,0 +1,68 @@
+:host {
+  pointer-events: none;
+}
+
+.toast-layer {
+  position: fixed;
+  top: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1100;
+  display: flex;
+  justify-content: center;
+  width: min(100vw - 2rem, 36rem);
+}
+
+.toast {
+  width: fit-content;
+  max-width: 100%;
+  padding: 0.9rem 1.25rem;
+  border-radius: var(--radius2);
+  border: 1px solid transparent;
+  color: var(--fg1);
+  font-size: 0.95rem;
+  font-weight: 600;
+  line-height: 1.4;
+  text-align: center;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
+  animation: toast-enter 180ms ease-out;
+}
+
+.toast--error {
+  background-color: var(--danger1-bg);
+  border-color: var(--danger2-bg);
+}
+
+.toast--warning {
+  background-color: var(--warning1-bg);
+  border-color: var(--warning2-bg);
+  color: var(--fg4);
+}
+
+.toast--success {
+  background-color: var(--success1-bg);
+  border-color: var(--success2-bg);
+}
+
+@keyframes toast-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 768px) {
+  .toast-layer {
+    top: 0.75rem;
+    width: calc(100vw - 1rem);
+  }
+
+  .toast {
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/src/MediaBrowser.Frontend/src/app/toast/toast.html b/src/MediaBrowser.Frontend/src/app/toast/toast.html
new file mode 100644
index 0000000..afbe1b7
--- /dev/null
+++ b/src/MediaBrowser.Frontend/src/app/toast/toast.html
@@ -0,0 +1,7 @@
+@if (toastService.toast(); as toast) {
+  <div class="toast-layer" aria-live="polite" aria-atomic="true">
+    <div class="toast" [class]="'toast toast--' + toast.type" role="status">
+      {{ toast.message }}
+    </div>
+  </div>
+}
\ No newline at end of file
diff --git a/src/MediaBrowser.Frontend/src/app/toast/toast.service.spec.ts b/src/MediaBrowser.Frontend/src/app/toast/toast.service.spec.ts
new file mode 100644
index 0000000..598986d
--- /dev/null
+++ b/src/MediaBrowser.Frontend/src/app/toast/toast.service.spec.ts
@@ -0,0 +1,45 @@
+import { TestBed } from '@angular/core/testing';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { ToastService } from './toast.service';
+
+describe('ToastService', () => {
+  let service: ToastService;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ToastService);
+  });
+
+  afterEach(() => {
+    service.dismiss();
+    vi.useRealTimers();
+  });
+
+  it('shows a success toast and dismisses it after the timeout', () => {
+    service.showSuccess('Saved successfully', 1000);
+
+    expect(service.toast()).toEqual({
+      id: 1,
+      message: 'Saved successfully',
+      type: 'success'
+    });
+
+    vi.advanceTimersByTime(1000);
+
+    expect(service.toast()).toBeNull();
+  });
+
+  it('replaces the active toast and keeps the latest timeout', () => {
+    service.showWarning('Heads up', 1000);
+    service.showError('Something failed', 2000);
+
+    vi.advanceTimersByTime(1000);
+
+    expect(service.toast()?.message).toBe('Something failed');
+
+    vi.advanceTimersByTime(1000);
+
+    expect(service.toast()).toBeNull();
+  });
+});
\ No newline at end of file
diff --git a/src/MediaBrowser.Frontend/src/app/toast/toast.service.ts b/src/MediaBrowser.Frontend/src/app/toast/toast.service.ts
new file mode 100644
index 0000000..cf12d81
--- /dev/null
+++ b/src/MediaBrowser.Frontend/src/app/toast/toast.service.ts
@@ -0,0 +1,56 @@
+import { Injectable, signal } from '@angular/core';
+
+export type ToastType = 'error' | 'warning' | 'success';
+
+export interface ToastNotification {
+  id: number;
+  message: string;
+  type: ToastType;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ToastService {
+  private readonly nextId = signal(0);
+  readonly toast = signal<ToastNotification | null>(null);
+  private dismissTimer: ReturnType<typeof setTimeout> | null = null;
+
+  show(message: string, type: ToastType, durationMs = 3000): void {
+    const id = this.nextId() + 1;
+    this.nextId.set(id);
+    this.toast.set({ id, message, type });
+
+    this.clearTimer();
+    this.dismissTimer = setTimeout(() => {
+      if (this.toast()?.id === id) {
+        this.toast.set(null);
+      }
+      this.dismissTimer = null;
+    }, durationMs);
+  }
+
+  showError(message: string, durationMs?: number): void {
+    this.show(message, 'error', durationMs);
+  }
+
+  showWarning(message: string, durationMs?: number): void {
+    this.show(message, 'warning', durationMs);
+  }
+
+  showSuccess(message: string, durationMs?: number): void {
+    this.show(message, 'success', durationMs);
+  }
+
+  dismiss(): void {
+    this.clearTimer();
+    this.toast.set(null);
+  }
+
+  private clearTimer(): void {
+    if (this.dismissTimer !== null) {
+      clearTimeout(this.dismissTimer);
+      this.dismissTimer = null;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/MediaBrowser.Frontend/src/app/toast/toast.ts b/src/MediaBrowser.Frontend/src/app/toast/toast.ts
new file mode 100644
index 0000000..8d20773
--- /dev/null
+++ b/src/MediaBrowser.Frontend/src/app/toast/toast.ts
@@ -0,0 +1,11 @@
+import { Component, inject } from '@angular/core';
+import { ToastService } from './toast.service';
+
+@Component({
+  selector: 'app-toast',
+  templateUrl: './toast.html',
+  styleUrl: './toast.css'
+})
+export class ToastComponent {
+  protected readonly toastService = inject(ToastService);
+}
\ No newline at end of file
diff --git a/src/MediaBrowser.Frontend/src/app/user-management/change-password-modal/change-password-modal.spec.ts b/src/MediaBrowser.Frontend/src/app/user-management/change-password-modal/change-password-modal.spec.ts
index 2462194..7a3dd6a 100644
--- a/src/MediaBrowser.Frontend/src/app/user-management/change-password-modal/change-password-modal.spec.ts
+++ b/src/MediaBrowser.Frontend/src/app/user-management/change-password-modal/change-password-modal.spec.ts
@@ -116,7 +116,7 @@ describe('ChangePasswordModalComponent', () => {
     expect(detectChanges).toHaveBeenCalledTimes(1);
   });
 
-  it('shows API error message and emits failure when changing password fails with message', async () => {
+  it('does not show an inline API error and emits failure when changing password fails with message', async () => {
     const { component, mocks } = await createComponent();
     const detectChanges = vi.fn();
     const userUpdatingSpy = vi.spyOn(component.userUpdating, 'emit');
@@ -137,13 +137,13 @@ describe('ChangePasswordModalComponent', () => {
     expect(userUpdatingSpy).toHaveBeenCalledTimes(1);
     expect(userUpdatingFailedSpy).toHaveBeenCalledTimes(1);
     expect(closeSpy).not.toHaveBeenCalled();
-    expect(component.errorMessage).toBe('Current password is incorrect');
+    expect(component.errorMessage).toBe('');
     expect(component.successMessage).toBe('');
     expect(component.isSubmitting).toBe(false);
     expect(detectChanges).toHaveBeenCalledTimes(1);
   });
 
-  it('falls back to default error message when changing password fails without API message', async () => {
+  it('does not show an inline fallback error when changing password fails without API message', async () => {
     const { component, mocks } = await createComponent();
 
     component.oldPassword = 'old-secret';
@@ -153,7 +153,7 @@ describe('ChangePasswordModalComponent', () => {
 
     await component.onSubmit();
 
-    expect(component.errorMessage).toBe('Failed to change password');
+    expect(component.errorMessage).toBe('');
     expect(component.isSubmitting).toBe(false);
   });
 
diff --git a/src/MediaBrowser.Frontend/src/app/user-management/change-password-modal/change-password-modal.ts b/src/MediaBrowser.Frontend/src/app/user-management/change-password-modal/change-password-modal.ts
index b6d2817..4eadce6 100644
--- a/src/MediaBrowser.Frontend/src/app/user-management/change-password-modal/change-password-modal.ts
+++ b/src/MediaBrowser.Frontend/src/app/user-management/change-password-modal/change-password-modal.ts
@@ -59,8 +59,7 @@ export class ChangePasswordModalComponent {
       await firstValueFrom(this.usersService.changePassword(request));
       this.successMessage = 'Password changed successfully!';
       this.close.emit();
-    } catch (error: any) {
-      this.errorMessage = error.error?.message || 'Failed to change password';
+    } catch {
       this.userUpdatingFailed.emit();
     } finally {
       this.isSubmitting = false;
diff --git a/src/MediaBrowser.Tests/Media/MediaClient.cs b/src/MediaBrowser.Tests/Media/MediaClient.cs
index 6ccfb2f..983b16b 100644
--- a/src/MediaBrowser.Tests/Media/MediaClient.cs
+++ b/src/MediaBrowser.Tests/Media/MediaClient.cs
@@ -5,6 +5,9 @@ public class MediaClient(HttpClient client)
     public Task<HttpResponseMessage<MediaReadModel>> Get(Guid id) =>
         client.GetAsync<MediaReadModel>($"/api/media/{id}");
 
+    public Task<HttpResponseMessage> Delete(Guid id) =>
+        client.DeleteAsync($"/api/media/{id}");
+
     public Task<HttpResponseMessage<MediaReadModel>> Update(Guid id, UpdateMediaRequest request) =>
         client.PutAsync<MediaReadModel, UpdateMediaRequest>($"/api/media/{id}", request);
 
diff --git a/src/MediaBrowser.Tests/Media/MediaControllerTests.cs b/src/MediaBrowser.Tests/Media/MediaControllerTests.cs
index d5fd5f1..0c67000 100644
--- a/src/MediaBrowser.Tests/Media/MediaControllerTests.cs
+++ b/src/MediaBrowser.Tests/Media/MediaControllerTests.cs
@@ -181,6 +181,8 @@ async Task UpdateSuccessTest()
         await UpdateThumbnailWithTimestampTests(mediaConfig, mediaClient, testVideoFile, testImageFile);
 
         await AddChapterTests(mediaClient, testVideoFile, testImageFile);
+
+        await DeleteTests(mediaClient, testVideoFile, testImageFile);
     }
 
     async Task StreamTests(MediaConfig mediaConfig, MediaClient mediaClient, MediaReadModel testFile)
@@ -663,4 +665,22 @@ async Task<MediaReadModel> AddTestVideoFile(MediaBrowserWebApplicationFactory fa
 
         return response.Content;
     }
+
+    async Task DeleteTests(MediaClient mediaClient, MediaReadModel testVideoFile, MediaReadModel testImageFile)
+    {
+        await MediaNotFoundTest();
+        async Task MediaNotFoundTest()
+        {
+            using var response = await mediaClient.Delete(Guid.NewGuid());
+            response.StatusCode.ShouldBe(HttpStatusCode.NotFound, "The media does not exist because this is a random media ID, so it should return 404 Not Found.");
+        }
+
+        await DeleteTest(testImageFile);
+        await DeleteTest(testVideoFile);
+        async Task DeleteTest(MediaReadModel media)
+        {
+            using var response = await mediaClient.Delete(media.Id);
+            response.StatusCode.ShouldBe(HttpStatusCode.OK, "The media should be deleted successfully since we are using a valid media ID, so it should return 200 Ok.");
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/MediaBrowser.Tests/MediaBrowserWebApplicationFactory.cs b/src/MediaBrowser.Tests/MediaBrowserWebApplicationFactory.cs
index 78dedd7..f223a0e 100644
--- a/src/MediaBrowser.Tests/MediaBrowserWebApplicationFactory.cs
+++ b/src/MediaBrowser.Tests/MediaBrowserWebApplicationFactory.cs
@@ -28,6 +28,7 @@ public MediaBrowserWebApplicationFactory(DbType dbType = DbType.Sqlite, TimeSpan
                     "media", new JsonObject
                     {
                         {"castDirectory", CastDirectory},
+                        {"deletedDirectory", DeletedDirectory},
                         {"directorsDirectory", DirectorsDirectory},
                         {"genresDirectory", GenresDirectory},
                         {"importDirectory", ImportDirectory},
@@ -53,6 +54,8 @@ public MediaBrowserWebApplicationFactory(DbType dbType = DbType.Sqlite, TimeSpan
 
         CastDirectory = Path.Combine(tempDirectory, "cast");
         Directory.CreateDirectory(CastDirectory);
+        DeletedDirectory = Path.Combine(tempDirectory, "deleted");
+        Directory.CreateDirectory(DeletedDirectory);
         DirectorsDirectory = Path.Combine(tempDirectory, "directors");
         Directory.CreateDirectory(DirectorsDirectory);
         GenresDirectory = Path.Combine(tempDirectory, "genres");
@@ -78,6 +81,7 @@ public MediaBrowserWebApplicationFactory(DbType dbType = DbType.Sqlite, TimeSpan
                 "media", new JsonObject
                 {
                     {"castDirectory", CastDirectory},
+                    {"deletedDirectory", DeletedDirectory},
                     {"directorsDirectory", DirectorsDirectory},
                     {"genresDirectory", GenresDirectory},
                     {"importDirectory", ImportDirectory},
@@ -96,6 +100,7 @@ public MediaBrowserWebApplicationFactory(DbType dbType = DbType.Sqlite, TimeSpan
     public List<JsonObject> ConfigurationFiles { get; }
     public const string Version = "v1";
     public string CastDirectory { get; }
+    public string DeletedDirectory { get; }
     public string DirectorsDirectory { get; }
     public string GenresDirectory { get; }
     public string ImportDirectory { get; }
diff --git a/src/MediaBrowser/Installer.cs b/src/MediaBrowser/Installer.cs
index d951f1a..4f8c269 100644
--- a/src/MediaBrowser/Installer.cs
+++ b/src/MediaBrowser/Installer.cs
@@ -1,3 +1,5 @@
+using Microsoft.AspNetCore.Http.Features;
+
 namespace MediaBrowser;
 
 public class Installer
@@ -41,6 +43,11 @@ public static void ConfigureSettings(IConfigurationBuilder configurationBuilder)
 
     static void ConfigureServices(IServiceCollection services, string version)
     {
+        services.Configure<FormOptions>(options =>
+        {
+            options.MultipartBodyLengthLimit = long.MaxValue;
+        });
+
         // Add services to the container
         services.AddControllers()
             .AddApplicationPart(typeof(DbConfig).Assembly)
diff --git a/src/MediaBrowser/appsettings.json b/src/MediaBrowser/appsettings.json
index fa0d0f3..004e950 100644
--- a/src/MediaBrowser/appsettings.json
+++ b/src/MediaBrowser/appsettings.json
@@ -29,6 +29,7 @@
   },
   "media": {
     "castDirectory": "/cast",
+    "deletedDirectory": "/deleted",
     "directorsDirectory": "/directors",
     "genresDirectory": "/genres",
     "importDirectory": null,