From 48d5b82828ef70c41976c0e7aac9824c1410fa01 Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Fri, 5 Dec 2025 10:24:35 +0000
Subject: [PATCH 1/9] frontend secrets v0

---
 frontend/src/app/app-routing.module.ts        |   2 +
 frontend/src/app/app.component.html           |  12 +
 .../audit-log-dialog.component.css            | 176 ++++++++++++
 .../audit-log-dialog.component.html           |  73 +++++
 .../audit-log-dialog.component.spec.ts        |  84 ++++++
 .../audit-log-dialog.component.ts             |  96 +++++++
 .../create-secret-dialog.component.css        |  39 +++
 .../create-secret-dialog.component.html       |  77 ++++++
 .../create-secret-dialog.component.spec.ts    |  90 ++++++
 .../create-secret-dialog.component.ts         | 130 +++++++++
 .../delete-secret-dialog.component.css        |  46 ++++
 .../delete-secret-dialog.component.html       |  23 ++
 .../delete-secret-dialog.component.spec.ts    |  71 +++++
 .../delete-secret-dialog.component.ts         |  47 ++++
 .../edit-secret-dialog.component.css          | 102 +++++++
 .../edit-secret-dialog.component.html         |  96 +++++++
 .../edit-secret-dialog.component.spec.ts      |  76 ++++++
 .../edit-secret-dialog.component.ts           | 158 +++++++++++
 .../master-password-dialog.component.css      |  40 +++
 .../master-password-dialog.component.html     |  37 +++
 .../master-password-dialog.component.spec.ts  |  50 ++++
 .../master-password-dialog.component.ts       |  46 ++++
 .../components/secrets/secrets.component.css  | 258 ++++++++++++++++++
 .../components/secrets/secrets.component.html | 158 +++++++++++
 .../secrets/secrets.component.spec.ts         | 111 ++++++++
 .../components/secrets/secrets.component.ts   | 190 +++++++++++++
 .../view-secret-dialog.component.css          | 223 +++++++++++++++
 .../view-secret-dialog.component.html         | 111 ++++++++
 .../view-secret-dialog.component.spec.ts      |  81 ++++++
 .../view-secret-dialog.component.ts           | 111 ++++++++
 frontend/src/app/models/secret.ts             |  65 +++++
 frontend/src/app/services/secrets.service.ts  | 152 +++++++++++
 32 files changed, 3031 insertions(+)
 create mode 100644 frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.css
 create mode 100644 frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.html
 create mode 100644 frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.spec.ts
 create mode 100644 frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.ts
 create mode 100644 frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.css
 create mode 100644 frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.html
 create mode 100644 frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.spec.ts
 create mode 100644 frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.ts
 create mode 100644 frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.css
 create mode 100644 frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.html
 create mode 100644 frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.spec.ts
 create mode 100644 frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.ts
 create mode 100644 frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.css
 create mode 100644 frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.html
 create mode 100644 frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.spec.ts
 create mode 100644 frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.ts
 create mode 100644 frontend/src/app/components/secrets/master-password-dialog/master-password-dialog.component.css
 create mode 100644 frontend/src/app/components/secrets/master-password-dialog/master-password-dialog.component.html
 create mode 100644 frontend/src/app/components/secrets/master-password-dialog/master-password-dialog.component.spec.ts
 create mode 100644 frontend/src/app/components/secrets/master-password-dialog/master-password-dialog.component.ts
 create mode 100644 frontend/src/app/components/secrets/secrets.component.css
 create mode 100644 frontend/src/app/components/secrets/secrets.component.html
 create mode 100644 frontend/src/app/components/secrets/secrets.component.spec.ts
 create mode 100644 frontend/src/app/components/secrets/secrets.component.ts
 create mode 100644 frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.css
 create mode 100644 frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.html
 create mode 100644 frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.spec.ts
 create mode 100644 frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.ts
 create mode 100644 frontend/src/app/models/secret.ts
 create mode 100644 frontend/src/app/services/secrets.service.ts

diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 4b6e4f98a..b728a9462 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -29,6 +29,7 @@ import { UserDeletedSuccessComponent } from './components/user-deleted-success/u
 import { UserSettingsComponent } from './components/user-settings/user-settings.component';
 import { UsersComponent } from './components/users/users.component';
 import { ZapierComponent } from './components/zapier/zapier.component';
+import { SecretsComponent } from './components/secrets/secrets.component';
 import { SsoComponent } from './components/sso/sso.component';
 
 const routes: Routes = [
@@ -47,6 +48,7 @@ const routes: Routes = [
   // company routes have to be in this specific order
   {path: 'company/:company-id/verify/:verification-token', pathMatch: 'full', component: CompanyMemberInvitationComponent, title: 'Invitation | Rocketadmin'},
   {path: 'company', pathMatch: 'full', component: CompanyComponent, canActivate: [AuthGuard]},
+  {path: 'secrets', pathMatch: 'full', component: SecretsComponent, canActivate: [AuthGuard], title: 'Secrets | Rocketadmin'},
   {path: 'sso/:company-id', pathMatch: 'full', component: SsoComponent, canActivate: [AuthGuard]},
   {path: 'change-password', component: PasswordChangeComponent, canActivate: [AuthGuard]},
   {path: 'upgrade', component: UpgradeComponent, canActivate: [AuthGuard], title: 'Upgrade | Rocketadmin'},
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 7e19e03a0..ac5197fba 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -36,6 +36,12 @@
                 </mat-icon>
                 <div matListItemTitle>Company</div>
             </a>
+            <a mat-list-item routerLink="/secrets" data-testid="secrets-link-account-menu">
+                <mat-icon matListItemIcon class="connection-navigation__icon">
+                    key
+                </mat-icon>
+                <div matListItemTitle>Secrets</div>
+            </a>
             <a mat-list-item href="https://docs.rocketadmin.com/" target="_blank">
                 <mat-icon matListItemIcon class="connection-navigation__icon" fontSet="material-icons-outlined">help_outlined</mat-icon>
                 <div matListItemTitle>Help center</div>
@@ -170,6 +176,12 @@
                         </mat-icon>
                         <span>Company</span>
                     </a>
+                    <a mat-menu-item routerLink="/secrets" data-testid="secrets-link-account-menu">
+                        <mat-icon class="nav-menu__list-link-icon">
+                            key
+                        </mat-icon>
+                        <span>Secrets</span>
+                    </a>
                     <a mat-menu-item href="https://docs.rocketadmin.com/" target="_blank">
                         <mat-icon fontSet="material-icons-outlined">help_outlined</mat-icon>
                         <span>Help center</span>
diff --git a/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.css b/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.css
new file mode 100644
index 000000000..bd4b5d068
--- /dev/null
+++ b/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.css
@@ -0,0 +1,176 @@
+h2[mat-dialog-title] {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.title-icon {
+    color: rgba(0, 0, 0, 0.54);
+}
+
+@media (prefers-color-scheme: dark) {
+    .title-icon {
+        color: rgba(255, 255, 255, 0.7);
+    }
+}
+
+mat-dialog-content {
+    min-width: 600px;
+    max-height: 60vh;
+}
+
+@media (width <= 800px) {
+    mat-dialog-content {
+        min-width: auto;
+    }
+}
+
+.loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    text-align: center;
+}
+
+.loading-container p {
+    margin-top: 16px;
+    color: rgba(0, 0, 0, 0.54);
+}
+
+@media (prefers-color-scheme: dark) {
+    .loading-container p {
+        color: rgba(255, 255, 255, 0.54);
+    }
+}
+
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 48px 24px;
+    text-align: center;
+}
+
+.empty-icon {
+    font-size: 48px;
+    width: 48px;
+    height: 48px;
+    color: rgba(0, 0, 0, 0.26);
+    margin-bottom: 16px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .empty-icon {
+        color: rgba(255, 255, 255, 0.3);
+    }
+}
+
+.empty-state h3 {
+    margin: 0 0 8px 0;
+}
+
+.empty-state p {
+    margin: 0;
+    color: rgba(0, 0, 0, 0.54);
+}
+
+@media (prefers-color-scheme: dark) {
+    .empty-state p {
+        color: rgba(255, 255, 255, 0.54);
+    }
+}
+
+.audit-log-table {
+    width: 100%;
+}
+
+.action-cell {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.action-cell mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+}
+
+.action-create {
+    color: #2e7d32;
+}
+
+@media (prefers-color-scheme: dark) {
+    .action-create {
+        color: #81c784;
+    }
+}
+
+.action-view,
+.action-copy {
+    color: #1976d2;
+}
+
+@media (prefers-color-scheme: dark) {
+    .action-view,
+    .action-copy {
+        color: #64b5f6;
+    }
+}
+
+.action-update {
+    color: #ef6c00;
+}
+
+@media (prefers-color-scheme: dark) {
+    .action-update {
+        color: #ffb74d;
+    }
+}
+
+.action-delete {
+    color: #c62828;
+}
+
+@media (prefers-color-scheme: dark) {
+    .action-delete {
+        color: #ef5350;
+    }
+}
+
+.user-email {
+    font-size: 14px;
+}
+
+.success-icon {
+    color: #2e7d32;
+}
+
+@media (prefers-color-scheme: dark) {
+    .success-icon {
+        color: #81c784;
+    }
+}
+
+.failure-icon {
+    color: #c62828;
+}
+
+@media (prefers-color-scheme: dark) {
+    .failure-icon {
+        color: #ef5350;
+    }
+}
+
+.failed-row {
+    background-color: rgba(198, 40, 40, 0.05);
+}
+
+@media (prefers-color-scheme: dark) {
+    .failed-row {
+        background-color: rgba(239, 83, 80, 0.1);
+    }
+}
diff --git a/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.html b/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.html
new file mode 100644
index 000000000..ac68a8098
--- /dev/null
+++ b/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.html
@@ -0,0 +1,73 @@
+<h2 mat-dialog-title>
+    <mat-icon class="title-icon">history</mat-icon>
+    Audit Log: {{data.secret.slug}}
+</h2>
+
+<mat-dialog-content>
+    <!-- Loading State -->
+    <div *ngIf="loading" class="loading-container">
+        <mat-spinner diameter="40"></mat-spinner>
+        <p>Loading audit log...</p>
+    </div>
+
+    <!-- Empty State -->
+    <div *ngIf="!loading && logs.length === 0" class="empty-state">
+        <mat-icon class="empty-icon">history_toggle_off</mat-icon>
+        <h3>No audit log entries</h3>
+        <p>No actions have been recorded for this secret yet.</p>
+    </div>
+
+    <!-- Audit Log Table -->
+    <table *ngIf="!loading && logs.length > 0" mat-table [dataSource]="logs" class="audit-log-table">
+        <!-- Action Column -->
+        <ng-container matColumnDef="action">
+            <th mat-header-cell *matHeaderCellDef>Action</th>
+            <td mat-cell *matCellDef="let log">
+                <div class="action-cell" [class]="'action-' + log.action">
+                    <mat-icon>{{actionIcons[log.action]}}</mat-icon>
+                    <span>{{actionLabels[log.action]}}</span>
+                </div>
+            </td>
+        </ng-container>
+
+        <!-- User Column -->
+        <ng-container matColumnDef="user">
+            <th mat-header-cell *matHeaderCellDef>User</th>
+            <td mat-cell *matCellDef="let log">
+                <span class="user-email">{{log.user.email}}</span>
+            </td>
+        </ng-container>
+
+        <!-- Timestamp Column -->
+        <ng-container matColumnDef="accessedAt">
+            <th mat-header-cell *matHeaderCellDef>Time</th>
+            <td mat-cell *matCellDef="let log">
+                {{log.accessedAt | date:'medium'}}
+            </td>
+        </ng-container>
+
+        <!-- Success Column -->
+        <ng-container matColumnDef="success">
+            <th mat-header-cell *matHeaderCellDef>Status</th>
+            <td mat-cell *matCellDef="let log">
+                <mat-icon *ngIf="log.success" class="success-icon" matTooltip="Success">check_circle</mat-icon>
+                <mat-icon *ngIf="!log.success" class="failure-icon" [matTooltip]="log.errorMessage || 'Failed'">error</mat-icon>
+            </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;" [class.failed-row]="!row.success"></tr>
+    </table>
+
+    <mat-paginator *ngIf="!loading && logs.length > 0"
+        [length]="pagination.total"
+        [pageSize]="pagination.perPage"
+        [pageIndex]="pagination.currentPage - 1"
+        [pageSizeOptions]="[10, 20, 50]"
+        (page)="onPageChange($event)">
+    </mat-paginator>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close>Close</button>
+</mat-dialog-actions>
diff --git a/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.spec.ts b/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.spec.ts
new file mode 100644
index 000000000..d040824b2
--- /dev/null
+++ b/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.spec.ts
@@ -0,0 +1,84 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { Angulartics2Module } from 'angulartics2';
+import { of } from 'rxjs';
+
+import { AuditLogDialogComponent } from './audit-log-dialog.component';
+import { SecretsService } from 'src/app/services/secrets.service';
+
+describe('AuditLogDialogComponent', () => {
+  let component: AuditLogDialogComponent;
+  let fixture: ComponentFixture<AuditLogDialogComponent>;
+  let mockSecretsService: jasmine.SpyObj<SecretsService>;
+  let mockDialogRef: jasmine.SpyObj<MatDialogRef<AuditLogDialogComponent>>;
+
+  const mockSecret = {
+    id: '1',
+    slug: 'test-secret',
+    companyId: '1',
+    createdAt: '2024-01-01',
+    updatedAt: '2024-01-01',
+    masterEncryption: false,
+  };
+
+  beforeEach(async () => {
+    mockSecretsService = jasmine.createSpyObj('SecretsService', ['getAuditLog']);
+    mockSecretsService.getAuditLog.and.returnValue(of({
+      data: [
+        {
+          id: '1',
+          action: 'create',
+          user: { id: '1', email: 'user@example.com' },
+          accessedAt: '2024-01-01T00:00:00Z',
+          success: true,
+        },
+      ],
+      pagination: { total: 1, currentPage: 1, perPage: 20, lastPage: 1 },
+    }));
+
+    mockDialogRef = jasmine.createSpyObj('MatDialogRef', ['close']);
+
+    await TestBed.configureTestingModule({
+      imports: [
+        AuditLogDialogComponent,
+        BrowserAnimationsModule,
+        MatSnackBarModule,
+        Angulartics2Module.forRoot(),
+      ],
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        { provide: SecretsService, useValue: mockSecretsService },
+        { provide: MatDialogRef, useValue: mockDialogRef },
+        { provide: MAT_DIALOG_DATA, useValue: { secret: mockSecret } },
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AuditLogDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should load audit log on init', () => {
+    expect(mockSecretsService.getAuditLog).toHaveBeenCalledWith('test-secret', 1, 20);
+  });
+
+  it('should display audit log entries', () => {
+    expect(component.logs.length).toBe(1);
+    expect(component.logs[0].action).toBe('create');
+  });
+
+  it('should have action labels', () => {
+    expect(component.actionLabels['create']).toBe('Created');
+    expect(component.actionLabels['view']).toBe('Viewed');
+    expect(component.actionLabels['delete']).toBe('Deleted');
+  });
+});
diff --git a/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.ts b/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.ts
new file mode 100644
index 000000000..ad93a75a8
--- /dev/null
+++ b/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.ts
@@ -0,0 +1,96 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTableModule } from '@angular/material/table';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatIconModule } from '@angular/material/icon';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+import { SecretsService } from 'src/app/services/secrets.service';
+import { Secret, AuditLogEntry, SecretPagination } from 'src/app/models/secret';
+
+@Component({
+  selector: 'app-audit-log-dialog',
+  templateUrl: './audit-log-dialog.component.html',
+  styleUrls: ['./audit-log-dialog.component.css'],
+  imports: [
+    CommonModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatIconModule,
+    MatChipsModule,
+    MatProgressSpinnerModule,
+    MatTooltipModule,
+  ]
+})
+export class AuditLogDialogComponent implements OnInit {
+  public logs: AuditLogEntry[] = [];
+  public pagination: SecretPagination = {
+    total: 0,
+    currentPage: 1,
+    perPage: 20,
+    lastPage: 1,
+  };
+  public loading = true;
+  public displayedColumns = ['action', 'user', 'accessedAt', 'success'];
+
+  public actionLabels: Record<string, string> = {
+    create: 'Created',
+    view: 'Viewed',
+    copy: 'Copied',
+    update: 'Updated',
+    delete: 'Deleted',
+  };
+
+  public actionIcons: Record<string, string> = {
+    create: 'add_circle',
+    view: 'visibility',
+    copy: 'content_copy',
+    update: 'edit',
+    delete: 'delete',
+  };
+
+  public actionColors: Record<string, string> = {
+    create: 'primary',
+    view: 'accent',
+    copy: 'accent',
+    update: 'primary',
+    delete: 'warn',
+  };
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: { secret: Secret },
+    private dialogRef: MatDialogRef<AuditLogDialogComponent>,
+    private _secrets: SecretsService
+  ) {}
+
+  ngOnInit(): void {
+    this.loadAuditLog();
+  }
+
+  loadAuditLog(): void {
+    this.loading = true;
+    this._secrets.getAuditLog(
+      this.data.secret.slug,
+      this.pagination.currentPage,
+      this.pagination.perPage
+    ).subscribe(response => {
+      if (response) {
+        this.logs = response.data;
+        this.pagination = response.pagination;
+      }
+      this.loading = false;
+    });
+  }
+
+  onPageChange(event: PageEvent): void {
+    this.pagination.currentPage = event.pageIndex + 1;
+    this.pagination.perPage = event.pageSize;
+    this.loadAuditLog();
+  }
+}
diff --git a/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.css b/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.css
new file mode 100644
index 000000000..dc1a95544
--- /dev/null
+++ b/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.css
@@ -0,0 +1,39 @@
+.full-width {
+    width: 100%;
+    margin-bottom: 16px;
+}
+
+.master-encryption-section {
+    margin-top: 8px;
+    padding: 16px;
+    background-color: rgba(0, 0, 0, 0.02);
+    border-radius: 8px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .master-encryption-section {
+        background-color: rgba(255, 255, 255, 0.05);
+    }
+}
+
+.encryption-hint {
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.54);
+    margin: 8px 0 16px 0;
+}
+
+@media (prefers-color-scheme: dark) {
+    .encryption-hint {
+        color: rgba(255, 255, 255, 0.54);
+    }
+}
+
+mat-dialog-content {
+    min-width: 400px;
+}
+
+@media (width <= 600px) {
+    mat-dialog-content {
+        min-width: auto;
+    }
+}
diff --git a/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.html b/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.html
new file mode 100644
index 000000000..2cacc5729
--- /dev/null
+++ b/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.html
@@ -0,0 +1,77 @@
+<h2 mat-dialog-title>Create Secret</h2>
+
+<mat-dialog-content>
+    <form [formGroup]="form" (ngSubmit)="onSubmit()" id="createSecretForm">
+        <mat-form-field appearance="outline" class="full-width">
+            <mat-label>Slug</mat-label>
+            <input matInput formControlName="slug"
+                placeholder="e.g., api-key, database-password"
+                data-testid="create-secret-slug-input">
+            <mat-hint>Unique identifier (letters, numbers, hyphens, underscores)</mat-hint>
+            <mat-error *ngIf="form.get('slug')?.invalid">{{slugError}}</mat-error>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" class="full-width">
+            <mat-label>Secret Value</mat-label>
+            <textarea matInput formControlName="value"
+                [type]="showValue ? 'text' : 'password'"
+                rows="3"
+                placeholder="Enter your secret value"
+                data-testid="create-secret-value-input"></textarea>
+            <button mat-icon-button matSuffix type="button"
+                (click)="toggleValueVisibility()"
+                [matTooltip]="showValue ? 'Hide value' : 'Show value'">
+                <mat-icon>{{showValue ? 'visibility_off' : 'visibility'}}</mat-icon>
+            </button>
+            <mat-error *ngIf="form.get('value')?.invalid">{{valueError}}</mat-error>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" class="full-width">
+            <mat-label>Expiration Date (Optional)</mat-label>
+            <input matInput [matDatepicker]="picker" formControlName="expiresAt"
+                [min]="minDate"
+                data-testid="create-secret-expires-input">
+            <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+            <mat-datepicker #picker></mat-datepicker>
+            <mat-hint>Leave empty for no expiration</mat-hint>
+        </mat-form-field>
+
+        <div class="master-encryption-section">
+            <mat-checkbox formControlName="masterEncryption"
+                data-testid="create-secret-master-encryption-checkbox">
+                Enable master password encryption
+            </mat-checkbox>
+            <p class="encryption-hint">
+                Add an extra layer of security with a master password.
+                You'll need this password to view or edit the secret.
+            </p>
+
+            <mat-form-field *ngIf="form.get('masterEncryption')?.value"
+                appearance="outline" class="full-width">
+                <mat-label>Master Password</mat-label>
+                <input matInput formControlName="masterPassword"
+                    [type]="showMasterPassword ? 'text' : 'password'"
+                    placeholder="Minimum 8 characters"
+                    data-testid="create-secret-master-password-input">
+                <button mat-icon-button matSuffix type="button"
+                    (click)="toggleMasterPasswordVisibility()"
+                    [matTooltip]="showMasterPassword ? 'Hide password' : 'Show password'">
+                    <mat-icon>{{showMasterPassword ? 'visibility_off' : 'visibility'}}</mat-icon>
+                </button>
+                <mat-error *ngIf="form.get('masterPassword')?.invalid">{{masterPasswordError}}</mat-error>
+                <mat-hint>Remember this password - it cannot be recovered!</mat-hint>
+            </mat-form-field>
+        </div>
+    </form>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close [disabled]="submitting">Cancel</button>
+    <button mat-flat-button color="primary"
+        type="submit"
+        form="createSecretForm"
+        [disabled]="form.invalid || submitting"
+        data-testid="create-secret-submit-button">
+        {{submitting ? 'Creating...' : 'Create Secret'}}
+    </button>
+</mat-dialog-actions>
diff --git a/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.spec.ts b/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.spec.ts
new file mode 100644
index 000000000..78f36c8b9
--- /dev/null
+++ b/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.spec.ts
@@ -0,0 +1,90 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { Angulartics2Module } from 'angulartics2';
+import { of } from 'rxjs';
+
+import { CreateSecretDialogComponent } from './create-secret-dialog.component';
+import { SecretsService } from 'src/app/services/secrets.service';
+
+describe('CreateSecretDialogComponent', () => {
+  let component: CreateSecretDialogComponent;
+  let fixture: ComponentFixture<CreateSecretDialogComponent>;
+  let mockSecretsService: jasmine.SpyObj<SecretsService>;
+  let mockDialogRef: jasmine.SpyObj<MatDialogRef<CreateSecretDialogComponent>>;
+
+  beforeEach(async () => {
+    mockSecretsService = jasmine.createSpyObj('SecretsService', ['createSecret']);
+    mockSecretsService.createSecret.and.returnValue(of({
+      id: '1',
+      slug: 'test',
+      companyId: '1',
+      createdAt: '2024-01-01',
+      updatedAt: '2024-01-01',
+      masterEncryption: false,
+    }));
+
+    mockDialogRef = jasmine.createSpyObj('MatDialogRef', ['close']);
+
+    await TestBed.configureTestingModule({
+      imports: [
+        CreateSecretDialogComponent,
+        BrowserAnimationsModule,
+        MatSnackBarModule,
+        Angulartics2Module.forRoot(),
+      ],
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        { provide: SecretsService, useValue: mockSecretsService },
+        { provide: MatDialogRef, useValue: mockDialogRef },
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CreateSecretDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have invalid form initially', () => {
+    expect(component.form.invalid).toBeTrue();
+  });
+
+  it('should validate slug pattern', () => {
+    const slugControl = component.form.get('slug');
+    slugControl?.setValue('invalid slug!');
+    expect(slugControl?.hasError('pattern')).toBeTrue();
+
+    slugControl?.setValue('valid-slug_123');
+    expect(slugControl?.hasError('pattern')).toBeFalse();
+  });
+
+  it('should require master password when encryption is enabled', () => {
+    component.form.get('masterEncryption')?.setValue(true);
+    const masterPasswordControl = component.form.get('masterPassword');
+    expect(masterPasswordControl?.hasError('required')).toBeTrue();
+
+    masterPasswordControl?.setValue('short');
+    expect(masterPasswordControl?.hasError('minlength')).toBeTrue();
+
+    masterPasswordControl?.setValue('validpassword123');
+    expect(masterPasswordControl?.valid).toBeTrue();
+  });
+
+  it('should submit valid form', () => {
+    component.form.patchValue({
+      slug: 'test-secret',
+      value: 'secret-value',
+    });
+
+    component.onSubmit();
+    expect(mockSecretsService.createSecret).toHaveBeenCalled();
+  });
+});
diff --git a/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.ts b/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.ts
new file mode 100644
index 000000000..9ca3dd9f5
--- /dev/null
+++ b/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.ts
@@ -0,0 +1,130 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialogRef, MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Angulartics2 } from 'angulartics2';
+
+import { SecretsService } from 'src/app/services/secrets.service';
+
+@Component({
+  selector: 'app-create-secret-dialog',
+  templateUrl: './create-secret-dialog.component.html',
+  styleUrls: ['./create-secret-dialog.component.css'],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatCheckboxModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    MatIconModule,
+    MatTooltipModule,
+  ]
+})
+export class CreateSecretDialogComponent {
+  public form: FormGroup;
+  public submitting = false;
+  public showValue = false;
+  public showMasterPassword = false;
+  public minDate = new Date();
+
+  constructor(
+    private fb: FormBuilder,
+    private dialogRef: MatDialogRef<CreateSecretDialogComponent>,
+    private _secrets: SecretsService,
+    private angulartics2: Angulartics2
+  ) {
+    this.form = this.fb.group({
+      slug: ['', [
+        Validators.required,
+        Validators.maxLength(255),
+        Validators.pattern(/^[a-zA-Z0-9_-]+$/)
+      ]],
+      value: ['', [Validators.required, Validators.maxLength(10000)]],
+      expiresAt: [null],
+      masterEncryption: [false],
+      masterPassword: [''],
+    });
+
+    this.form.get('masterEncryption')?.valueChanges.subscribe(enabled => {
+      const masterPasswordControl = this.form.get('masterPassword');
+      if (enabled) {
+        masterPasswordControl?.setValidators([Validators.required, Validators.minLength(8)]);
+      } else {
+        masterPasswordControl?.clearValidators();
+        masterPasswordControl?.setValue('');
+      }
+      masterPasswordControl?.updateValueAndValidity();
+    });
+  }
+
+  get slugError(): string {
+    const control = this.form.get('slug');
+    if (control?.hasError('required')) return 'Slug is required';
+    if (control?.hasError('maxlength')) return 'Slug must be 255 characters or less';
+    if (control?.hasError('pattern')) return 'Only letters, numbers, hyphens, and underscores allowed';
+    return '';
+  }
+
+  get valueError(): string {
+    const control = this.form.get('value');
+    if (control?.hasError('required')) return 'Value is required';
+    if (control?.hasError('maxlength')) return 'Value must be 10000 characters or less';
+    return '';
+  }
+
+  get masterPasswordError(): string {
+    const control = this.form.get('masterPassword');
+    if (control?.hasError('required')) return 'Master password is required for encryption';
+    if (control?.hasError('minlength')) return 'Master password must be at least 8 characters';
+    return '';
+  }
+
+  toggleValueVisibility(): void {
+    this.showValue = !this.showValue;
+  }
+
+  toggleMasterPasswordVisibility(): void {
+    this.showMasterPassword = !this.showMasterPassword;
+  }
+
+  onSubmit(): void {
+    if (this.form.invalid) return;
+
+    this.submitting = true;
+    const formValue = this.form.value;
+
+    const payload = {
+      slug: formValue.slug,
+      value: formValue.value,
+      expiresAt: formValue.expiresAt ? new Date(formValue.expiresAt).toISOString() : undefined,
+      masterEncryption: formValue.masterEncryption || undefined,
+      masterPassword: formValue.masterEncryption ? formValue.masterPassword : undefined,
+    };
+
+    this._secrets.createSecret(payload).subscribe({
+      next: () => {
+        this.angulartics2.eventTrack.next({
+          action: 'Secrets: secret created successfully',
+        });
+        this.submitting = false;
+        this.dialogRef.close(true);
+      },
+      error: () => {
+        this.submitting = false;
+      }
+    });
+  }
+}
diff --git a/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.css b/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.css
new file mode 100644
index 000000000..88501b0c3
--- /dev/null
+++ b/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.css
@@ -0,0 +1,46 @@
+.warning-container {
+    display: flex;
+    gap: 16px;
+    padding: 16px;
+    background-color: #fff3e0;
+    border-radius: 8px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .warning-container {
+        background-color: rgba(255, 152, 0, 0.15);
+    }
+}
+
+.warning-icon {
+    font-size: 32px;
+    width: 32px;
+    height: 32px;
+    color: #ef6c00;
+    flex-shrink: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+    .warning-icon {
+        color: #ffb74d;
+    }
+}
+
+.warning-content p {
+    margin: 0;
+}
+
+.warning-content p:first-child {
+    margin-bottom: 8px;
+}
+
+.warning-details {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.54);
+}
+
+@media (prefers-color-scheme: dark) {
+    .warning-details {
+        color: rgba(255, 255, 255, 0.54);
+    }
+}
diff --git a/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.html b/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.html
new file mode 100644
index 000000000..aa82f371f
--- /dev/null
+++ b/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.html
@@ -0,0 +1,23 @@
+<h2 mat-dialog-title>Delete Secret</h2>
+
+<mat-dialog-content>
+    <div class="warning-container">
+        <mat-icon class="warning-icon">warning</mat-icon>
+        <div class="warning-content">
+            <p>Are you sure you want to delete the secret <strong>{{data.secret.slug}}</strong>?</p>
+            <p class="warning-details">
+                This action cannot be undone. The secret value and all associated audit logs will be permanently removed.
+            </p>
+        </div>
+    </div>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close [disabled]="submitting">Cancel</button>
+    <button mat-flat-button color="warn"
+        (click)="onDelete()"
+        [disabled]="submitting"
+        data-testid="delete-secret-confirm-button">
+        {{submitting ? 'Deleting...' : 'Delete Secret'}}
+    </button>
+</mat-dialog-actions>
diff --git a/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.spec.ts b/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.spec.ts
new file mode 100644
index 000000000..9dbcc53a0
--- /dev/null
+++ b/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.spec.ts
@@ -0,0 +1,71 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { Angulartics2Module } from 'angulartics2';
+import { of } from 'rxjs';
+
+import { DeleteSecretDialogComponent } from './delete-secret-dialog.component';
+import { SecretsService } from 'src/app/services/secrets.service';
+
+describe('DeleteSecretDialogComponent', () => {
+  let component: DeleteSecretDialogComponent;
+  let fixture: ComponentFixture<DeleteSecretDialogComponent>;
+  let mockSecretsService: jasmine.SpyObj<SecretsService>;
+  let mockDialogRef: jasmine.SpyObj<MatDialogRef<DeleteSecretDialogComponent>>;
+
+  const mockSecret = {
+    id: '1',
+    slug: 'test-secret',
+    companyId: '1',
+    createdAt: '2024-01-01',
+    updatedAt: '2024-01-01',
+    masterEncryption: false,
+  };
+
+  beforeEach(async () => {
+    mockSecretsService = jasmine.createSpyObj('SecretsService', ['deleteSecret']);
+    mockSecretsService.deleteSecret.and.returnValue(of({
+      message: 'Secret deleted successfully',
+      deletedAt: '2024-01-01',
+    }));
+
+    mockDialogRef = jasmine.createSpyObj('MatDialogRef', ['close']);
+
+    await TestBed.configureTestingModule({
+      imports: [
+        DeleteSecretDialogComponent,
+        BrowserAnimationsModule,
+        MatSnackBarModule,
+        Angulartics2Module.forRoot(),
+      ],
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        { provide: SecretsService, useValue: mockSecretsService },
+        { provide: MatDialogRef, useValue: mockDialogRef },
+        { provide: MAT_DIALOG_DATA, useValue: { secret: mockSecret } },
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DeleteSecretDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should call deleteSecret on confirm', () => {
+    component.onDelete();
+    expect(mockSecretsService.deleteSecret).toHaveBeenCalledWith('test-secret');
+  });
+
+  it('should close dialog after successful deletion', () => {
+    component.onDelete();
+    expect(mockDialogRef.close).toHaveBeenCalledWith(true);
+  });
+});
diff --git a/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.ts b/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.ts
new file mode 100644
index 000000000..bab015df6
--- /dev/null
+++ b/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.ts
@@ -0,0 +1,47 @@
+import { Component, Inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { Angulartics2 } from 'angulartics2';
+
+import { SecretsService } from 'src/app/services/secrets.service';
+import { Secret } from 'src/app/models/secret';
+
+@Component({
+  selector: 'app-delete-secret-dialog',
+  templateUrl: './delete-secret-dialog.component.html',
+  styleUrls: ['./delete-secret-dialog.component.css'],
+  imports: [
+    CommonModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatIconModule,
+  ]
+})
+export class DeleteSecretDialogComponent {
+  public submitting = false;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: { secret: Secret },
+    private dialogRef: MatDialogRef<DeleteSecretDialogComponent>,
+    private _secrets: SecretsService,
+    private angulartics2: Angulartics2
+  ) {}
+
+  onDelete(): void {
+    this.submitting = true;
+    this._secrets.deleteSecret(this.data.secret.slug).subscribe({
+      next: () => {
+        this.angulartics2.eventTrack.next({
+          action: 'Secrets: secret deleted successfully',
+        });
+        this.submitting = false;
+        this.dialogRef.close(true);
+      },
+      error: () => {
+        this.submitting = false;
+      }
+    });
+  }
+}
diff --git a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.css b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.css
new file mode 100644
index 000000000..834733f9e
--- /dev/null
+++ b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.css
@@ -0,0 +1,102 @@
+mat-dialog-content {
+    min-width: 400px;
+    min-height: 200px;
+}
+
+@media (width <= 600px) {
+    mat-dialog-content {
+        min-width: auto;
+    }
+}
+
+.full-width {
+    width: 100%;
+    margin-bottom: 16px;
+}
+
+.loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    text-align: center;
+}
+
+.loading-container p {
+    margin-top: 16px;
+    color: rgba(0, 0, 0, 0.54);
+}
+
+@media (prefers-color-scheme: dark) {
+    .loading-container p {
+        color: rgba(255, 255, 255, 0.54);
+    }
+}
+
+.master-password-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 24px;
+}
+
+.lock-icon {
+    font-size: 48px;
+    width: 48px;
+    height: 48px;
+    color: #1976d2;
+    margin-bottom: 16px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .lock-icon {
+        color: #64b5f6;
+    }
+}
+
+.master-password-container h3 {
+    margin: 0 0 8px 0;
+}
+
+.master-password-container p {
+    color: rgba(0, 0, 0, 0.54);
+    margin: 0 0 24px 0;
+}
+
+@media (prefers-color-scheme: dark) {
+    .master-password-container p {
+        color: rgba(255, 255, 255, 0.54);
+    }
+}
+
+.expiration-section {
+    margin-bottom: 16px;
+}
+
+.encryption-note {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 12px 16px;
+    background-color: rgba(25, 118, 210, 0.08);
+    border-radius: 8px;
+    color: #1565c0;
+    font-size: 14px;
+    margin-top: 16px;
+}
+
+.encryption-note mat-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+    .encryption-note {
+        background-color: rgba(100, 181, 246, 0.15);
+        color: #64b5f6;
+    }
+}
diff --git a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.html b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.html
new file mode 100644
index 000000000..21b45dde8
--- /dev/null
+++ b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.html
@@ -0,0 +1,96 @@
+<h2 mat-dialog-title>Edit Secret: {{data.secret.slug}}</h2>
+
+<mat-dialog-content>
+    <!-- Loading State -->
+    <div *ngIf="loading" class="loading-container">
+        <mat-spinner diameter="40"></mat-spinner>
+        <p>Loading secret...</p>
+    </div>
+
+    <!-- Master Password Required -->
+    <div *ngIf="!loading && requiresMasterPassword" class="master-password-container">
+        <mat-icon class="lock-icon">enhanced_encryption</mat-icon>
+        <h3>Master Password Required</h3>
+        <p>This secret is protected with master password encryption.</p>
+
+        <mat-form-field appearance="outline" class="full-width">
+            <mat-label>Master Password</mat-label>
+            <input matInput
+                [(ngModel)]="masterPassword"
+                [type]="showMasterPassword ? 'text' : 'password'"
+                (keyup.enter)="submitMasterPassword()"
+                placeholder="Enter master password"
+                data-testid="edit-secret-master-password-input">
+            <button mat-icon-button matSuffix type="button"
+                (click)="toggleMasterPasswordVisibility()"
+                [matTooltip]="showMasterPassword ? 'Hide password' : 'Show password'">
+                <mat-icon>{{showMasterPassword ? 'visibility_off' : 'visibility'}}</mat-icon>
+            </button>
+            <mat-error *ngIf="masterPasswordError">{{masterPasswordError}}</mat-error>
+        </mat-form-field>
+
+        <button mat-flat-button color="primary"
+            (click)="submitMasterPassword()"
+            data-testid="edit-secret-unlock-button">
+            <mat-icon>lock_open</mat-icon>
+            Unlock Secret
+        </button>
+    </div>
+
+    <!-- Edit Form -->
+    <form *ngIf="!loading && !requiresMasterPassword"
+        [formGroup]="form"
+        (ngSubmit)="onSubmit()"
+        id="editSecretForm">
+
+        <mat-form-field appearance="outline" class="full-width">
+            <mat-label>Secret Value</mat-label>
+            <textarea matInput formControlName="value"
+                [type]="showValue ? 'text' : 'password'"
+                rows="4"
+                placeholder="Enter your secret value"
+                data-testid="edit-secret-value-input"></textarea>
+            <button mat-icon-button matSuffix type="button"
+                (click)="toggleValueVisibility()"
+                [matTooltip]="showValue ? 'Hide value' : 'Show value'">
+                <mat-icon>{{showValue ? 'visibility_off' : 'visibility'}}</mat-icon>
+            </button>
+            <mat-error *ngIf="form.get('value')?.invalid">{{valueError}}</mat-error>
+        </mat-form-field>
+
+        <div class="expiration-section">
+            <mat-form-field appearance="outline" class="full-width">
+                <mat-label>Expiration Date</mat-label>
+                <input matInput [matDatepicker]="picker" formControlName="expiresAt"
+                    [min]="minDate"
+                    data-testid="edit-secret-expires-input">
+                <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+                <mat-datepicker #picker></mat-datepicker>
+            </mat-form-field>
+
+            <mat-checkbox
+                [checked]="clearExpiration"
+                (change)="onClearExpirationChange($event.checked)"
+                data-testid="edit-secret-clear-expiration-checkbox">
+                Remove expiration date
+            </mat-checkbox>
+        </div>
+
+        <p *ngIf="data.secret.masterEncryption" class="encryption-note">
+            <mat-icon>info</mat-icon>
+            This secret uses master password encryption. Your changes will be encrypted with the same master password.
+        </p>
+    </form>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close [disabled]="submitting">Cancel</button>
+    <button mat-flat-button color="primary"
+        *ngIf="!loading && !requiresMasterPassword"
+        type="submit"
+        form="editSecretForm"
+        [disabled]="form.invalid || submitting"
+        data-testid="edit-secret-submit-button">
+        {{submitting ? 'Saving...' : 'Save Changes'}}
+    </button>
+</mat-dialog-actions>
diff --git a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.spec.ts b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.spec.ts
new file mode 100644
index 000000000..c1a4c8eec
--- /dev/null
+++ b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.spec.ts
@@ -0,0 +1,76 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { Angulartics2Module } from 'angulartics2';
+import { of } from 'rxjs';
+
+import { EditSecretDialogComponent } from './edit-secret-dialog.component';
+import { SecretsService } from 'src/app/services/secrets.service';
+
+describe('EditSecretDialogComponent', () => {
+  let component: EditSecretDialogComponent;
+  let fixture: ComponentFixture<EditSecretDialogComponent>;
+  let mockSecretsService: jasmine.SpyObj<SecretsService>;
+  let mockDialogRef: jasmine.SpyObj<MatDialogRef<EditSecretDialogComponent>>;
+
+  const mockSecret = {
+    id: '1',
+    slug: 'test-secret',
+    companyId: '1',
+    createdAt: '2024-01-01',
+    updatedAt: '2024-01-01',
+    masterEncryption: false,
+  };
+
+  beforeEach(async () => {
+    mockSecretsService = jasmine.createSpyObj('SecretsService', ['getSecret', 'updateSecret']);
+    mockSecretsService.getSecret.and.returnValue(of({
+      ...mockSecret,
+      value: 'secret-value',
+    }));
+    mockSecretsService.updateSecret.and.returnValue(of(mockSecret));
+
+    mockDialogRef = jasmine.createSpyObj('MatDialogRef', ['close']);
+
+    await TestBed.configureTestingModule({
+      imports: [
+        EditSecretDialogComponent,
+        BrowserAnimationsModule,
+        MatSnackBarModule,
+        Angulartics2Module.forRoot(),
+      ],
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        { provide: SecretsService, useValue: mockSecretsService },
+        { provide: MatDialogRef, useValue: mockDialogRef },
+        { provide: MAT_DIALOG_DATA, useValue: { secret: mockSecret } },
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EditSecretDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should load secret on init', () => {
+    expect(mockSecretsService.getSecret).toHaveBeenCalledWith('test-secret', undefined);
+  });
+
+  it('should populate form with secret value', () => {
+    expect(component.form.get('value')?.value).toBe('secret-value');
+  });
+
+  it('should submit updated secret', () => {
+    component.form.patchValue({ value: 'new-value' });
+    component.onSubmit();
+    expect(mockSecretsService.updateSecret).toHaveBeenCalled();
+  });
+});
diff --git a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.ts b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.ts
new file mode 100644
index 000000000..7e969ca9b
--- /dev/null
+++ b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.ts
@@ -0,0 +1,158 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Angulartics2 } from 'angulartics2';
+
+import { SecretsService } from 'src/app/services/secrets.service';
+import { Secret, SecretWithValue } from 'src/app/models/secret';
+
+@Component({
+  selector: 'app-edit-secret-dialog',
+  templateUrl: './edit-secret-dialog.component.html',
+  styleUrls: ['./edit-secret-dialog.component.css'],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    MatIconModule,
+    MatCheckboxModule,
+    MatProgressSpinnerModule,
+    MatTooltipModule,
+  ]
+})
+export class EditSecretDialogComponent implements OnInit {
+  public form: FormGroup;
+  public loading = true;
+  public submitting = false;
+  public showValue = false;
+  public requiresMasterPassword = false;
+  public masterPassword = '';
+  public masterPasswordError = '';
+  public showMasterPassword = false;
+  public currentSecret: SecretWithValue | null = null;
+  public clearExpiration = false;
+  public minDate = new Date();
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: { secret: Secret },
+    private fb: FormBuilder,
+    private dialogRef: MatDialogRef<EditSecretDialogComponent>,
+    private _secrets: SecretsService,
+    private angulartics2: Angulartics2
+  ) {
+    this.form = this.fb.group({
+      value: ['', [Validators.required, Validators.maxLength(10000)]],
+      expiresAt: [null],
+    });
+  }
+
+  ngOnInit(): void {
+    this.loadSecret();
+  }
+
+  loadSecret(masterPassword?: string): void {
+    this.loading = true;
+    this.masterPasswordError = '';
+
+    this._secrets.getSecret(this.data.secret.slug, masterPassword).subscribe({
+      next: (secret) => {
+        this.currentSecret = secret;
+        this.form.patchValue({
+          value: secret.value,
+          expiresAt: secret.expiresAt ? new Date(secret.expiresAt) : null,
+        });
+        this.loading = false;
+        this.requiresMasterPassword = false;
+        this.masterPassword = masterPassword || '';
+      },
+      error: (err) => {
+        this.loading = false;
+        if (err.status === 403) {
+          this.requiresMasterPassword = true;
+          if (masterPassword) {
+            this.masterPasswordError = 'Invalid master password';
+          }
+        }
+      }
+    });
+  }
+
+  submitMasterPassword(): void {
+    if (!this.masterPassword) {
+      this.masterPasswordError = 'Please enter the master password';
+      return;
+    }
+    this.loadSecret(this.masterPassword);
+  }
+
+  toggleValueVisibility(): void {
+    this.showValue = !this.showValue;
+  }
+
+  toggleMasterPasswordVisibility(): void {
+    this.showMasterPassword = !this.showMasterPassword;
+  }
+
+  get valueError(): string {
+    const control = this.form.get('value');
+    if (control?.hasError('required')) return 'Value is required';
+    if (control?.hasError('maxlength')) return 'Value must be 10000 characters or less';
+    return '';
+  }
+
+  onClearExpirationChange(checked: boolean): void {
+    this.clearExpiration = checked;
+    if (checked) {
+      this.form.get('expiresAt')?.disable();
+    } else {
+      this.form.get('expiresAt')?.enable();
+    }
+  }
+
+  onSubmit(): void {
+    if (this.form.invalid) return;
+
+    this.submitting = true;
+    const formValue = this.form.getRawValue();
+
+    const payload = {
+      value: formValue.value,
+      expiresAt: this.clearExpiration
+        ? null
+        : (formValue.expiresAt ? new Date(formValue.expiresAt).toISOString() : undefined),
+    };
+
+    this._secrets.updateSecret(
+      this.data.secret.slug,
+      payload,
+      this.data.secret.masterEncryption ? this.masterPassword : undefined
+    ).subscribe({
+      next: () => {
+        this.angulartics2.eventTrack.next({
+          action: 'Secrets: secret updated successfully',
+        });
+        this.submitting = false;
+        this.dialogRef.close(true);
+      },
+      error: () => {
+        this.submitting = false;
+      }
+    });
+  }
+}
diff --git a/frontend/src/app/components/secrets/master-password-dialog/master-password-dialog.component.css b/frontend/src/app/components/secrets/master-password-dialog/master-password-dialog.component.css
new file mode 100644
index 000000000..ee5f25435
--- /dev/null
+++ b/frontend/src/app/components/secrets/master-password-dialog/master-password-dialog.component.css
@@ -0,0 +1,40 @@
+h2[mat-dialog-title] {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.title-icon {
+    color: #1976d2;
+}
+
+@media (prefers-color-scheme: dark) {
+    .title-icon {
+        color: #64b5f6;
+    }
+}
+
+mat-dialog-content {
+    min-width: 350px;
+}
+
+@media (width <= 600px) {
+    mat-dialog-content {
+        min-width: auto;
+    }
+}
+
+.description {
+    color: rgba(0, 0, 0, 0.54);
+    margin: 0 0 24px 0;
+}
+
+@media (prefers-color-scheme: dark) {
+    .description {
+        color: rgba(255, 255, 255, 0.54);
+    }
+}
+
+.full-width {
+    width: 100%;
+}
diff --git a/frontend/src/app/components/secrets/master-password-dialog/master-password-dialog.component.html b/frontend/src/app/components/secrets/master-password-dialog/master-password-dialog.component.html
new file mode 100644
index 000000000..a5a13ce30
--- /dev/null
+++ b/frontend/src/app/components/secrets/master-password-dialog/master-password-dialog.component.html
@@ -0,0 +1,37 @@
+<h2 mat-dialog-title>
+    <mat-icon class="title-icon">enhanced_encryption</mat-icon>
+    Master Password Required
+</h2>
+
+<mat-dialog-content>
+    <p class="description">
+        This secret is protected with master password encryption.
+        Enter the master password to continue.
+    </p>
+
+    <mat-form-field appearance="outline" class="full-width">
+        <mat-label>Master Password</mat-label>
+        <input matInput
+            [(ngModel)]="masterPassword"
+            [type]="showPassword ? 'text' : 'password'"
+            (keyup.enter)="onSubmit()"
+            placeholder="Enter master password"
+            data-testid="master-password-input">
+        <button mat-icon-button matSuffix type="button"
+            (click)="togglePasswordVisibility()"
+            [matTooltip]="showPassword ? 'Hide password' : 'Show password'">
+            <mat-icon>{{showPassword ? 'visibility_off' : 'visibility'}}</mat-icon>
+        </button>
+        <mat-error *ngIf="error">{{error}}</mat-error>
+    </mat-form-field>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close>Cancel</button>
+    <button mat-flat-button color="primary"
+        (click)="onSubmit()"
+        data-testid="master-password-submit-button">
+        <mat-icon>lock_open</mat-icon>
+        Unlock
+    </button>
+</mat-dialog-actions>
diff --git a/frontend/src/app/components/secrets/master-password-dialog/master-password-dialog.component.spec.ts b/frontend/src/app/components/secrets/master-password-dialog/master-password-dialog.component.spec.ts
new file mode 100644
index 000000000..9b1a69eb9
--- /dev/null
+++ b/frontend/src/app/components/secrets/master-password-dialog/master-password-dialog.component.spec.ts
@@ -0,0 +1,50 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatDialogRef } from '@angular/material/dialog';
+
+import { MasterPasswordDialogComponent } from './master-password-dialog.component';
+
+describe('MasterPasswordDialogComponent', () => {
+  let component: MasterPasswordDialogComponent;
+  let fixture: ComponentFixture<MasterPasswordDialogComponent>;
+  let mockDialogRef: jasmine.SpyObj<MatDialogRef<MasterPasswordDialogComponent>>;
+
+  beforeEach(async () => {
+    mockDialogRef = jasmine.createSpyObj('MatDialogRef', ['close']);
+
+    await TestBed.configureTestingModule({
+      imports: [
+        MasterPasswordDialogComponent,
+        BrowserAnimationsModule,
+      ],
+      providers: [
+        { provide: MatDialogRef, useValue: mockDialogRef },
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MasterPasswordDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should toggle password visibility', () => {
+    expect(component.showPassword).toBeFalse();
+    component.togglePasswordVisibility();
+    expect(component.showPassword).toBeTrue();
+  });
+
+  it('should show error when submitting empty password', () => {
+    component.onSubmit();
+    expect(component.error).toBe('Please enter the master password');
+  });
+
+  it('should close dialog with password when submitting valid password', () => {
+    component.masterPassword = 'testpassword';
+    component.onSubmit();
+    expect(mockDialogRef.close).toHaveBeenCalledWith('testpassword');
+  });
+});
diff --git a/frontend/src/app/components/secrets/master-password-dialog/master-password-dialog.component.ts b/frontend/src/app/components/secrets/master-password-dialog/master-password-dialog.component.ts
new file mode 100644
index 000000000..1c789bddb
--- /dev/null
+++ b/frontend/src/app/components/secrets/master-password-dialog/master-password-dialog.component.ts
@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatDialogRef, MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Component({
+  selector: 'app-master-password-dialog',
+  templateUrl: './master-password-dialog.component.html',
+  styleUrls: ['./master-password-dialog.component.css'],
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatTooltipModule,
+  ]
+})
+export class MasterPasswordDialogComponent {
+  public masterPassword = '';
+  public showPassword = false;
+  public error = '';
+
+  constructor(
+    private dialogRef: MatDialogRef<MasterPasswordDialogComponent>
+  ) {}
+
+  togglePasswordVisibility(): void {
+    this.showPassword = !this.showPassword;
+  }
+
+  onSubmit(): void {
+    if (!this.masterPassword) {
+      this.error = 'Please enter the master password';
+      return;
+    }
+    this.dialogRef.close(this.masterPassword);
+  }
+}
diff --git a/frontend/src/app/components/secrets/secrets.component.css b/frontend/src/app/components/secrets/secrets.component.css
new file mode 100644
index 000000000..3e3c46754
--- /dev/null
+++ b/frontend/src/app/components/secrets/secrets.component.css
@@ -0,0 +1,258 @@
+.secrets-page {
+    margin: 3em auto;
+    padding: 0 clamp(200px, 20vw, 300px);
+}
+
+@media (width <= 600px) {
+    .secrets-page {
+        padding: 0 9vw;
+    }
+}
+
+.secrets-header {
+    margin-bottom: 32px;
+}
+
+.secrets-description {
+    color: rgba(0, 0, 0, 0.64);
+    margin-top: 8px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .secrets-description {
+        color: rgba(255, 255, 255, 0.7);
+    }
+}
+
+.secrets-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 24px;
+}
+
+@media (width <= 600px) {
+    .secrets-toolbar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+}
+
+.search-field {
+    flex: 1;
+    max-width: 400px;
+}
+
+@media (width <= 600px) {
+    .search-field {
+        max-width: 100%;
+    }
+}
+
+.secrets-table {
+    width: 100%;
+    margin-bottom: 16px;
+}
+
+.secrets-cell_slug {
+    max-width: 250px;
+}
+
+.slug-button {
+    text-transform: none;
+    font-weight: 500;
+}
+
+.secrets-cell_actions {
+    text-align: right;
+}
+
+.encryption-icon {
+    color: rgba(0, 0, 0, 0.54);
+}
+
+@media (prefers-color-scheme: dark) {
+    .encryption-icon {
+        color: rgba(255, 255, 255, 0.7);
+    }
+}
+
+.encryption-icon_master {
+    color: #1976d2;
+}
+
+@media (prefers-color-scheme: dark) {
+    .encryption-icon_master {
+        color: #64b5f6;
+    }
+}
+
+.no-expiry {
+    color: rgba(0, 0, 0, 0.54);
+}
+
+@media (prefers-color-scheme: dark) {
+    .no-expiry {
+        color: rgba(255, 255, 255, 0.5);
+    }
+}
+
+.expired-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: #c62828;
+    font-weight: 500;
+}
+
+.expired-badge mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .expired-badge {
+        color: #ef5350;
+    }
+}
+
+.expiring-soon-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: #ef6c00;
+    font-weight: 500;
+}
+
+.expiring-soon-badge mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .expiring-soon-badge {
+        color: #ffb74d;
+    }
+}
+
+.no-secrets {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 64px 24px;
+    text-align: center;
+    background-color: rgba(0, 0, 0, 0.02);
+    border-radius: 8px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .no-secrets {
+        background-color: rgba(255, 255, 255, 0.05);
+    }
+}
+
+.no-secrets-icon {
+    font-size: 64px;
+    width: 64px;
+    height: 64px;
+    color: rgba(0, 0, 0, 0.26);
+    margin-bottom: 16px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .no-secrets-icon {
+        color: rgba(255, 255, 255, 0.3);
+    }
+}
+
+.no-secrets h3 {
+    margin: 0 0 8px 0;
+    color: rgba(0, 0, 0, 0.87);
+}
+
+@media (prefers-color-scheme: dark) {
+    .no-secrets h3 {
+        color: rgba(255, 255, 255, 0.87);
+    }
+}
+
+.no-secrets p {
+    margin: 0 0 16px 0;
+    color: rgba(0, 0, 0, 0.54);
+}
+
+@media (prefers-color-scheme: dark) {
+    .no-secrets p {
+        color: rgba(255, 255, 255, 0.54);
+    }
+}
+
+.delete-action {
+    color: #c62828;
+}
+
+@media (prefers-color-scheme: dark) {
+    .delete-action {
+        color: #ef5350;
+    }
+}
+
+/* Responsive table styles */
+@media (width <= 600px) {
+    .secrets-table {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        max-width: 100%;
+    }
+
+    .secrets-table-heading {
+        display: none;
+    }
+
+    .secrets-table ::ng-deep tbody {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: 1 / 3;
+    }
+
+    .secrets-row {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: 1 / 3;
+        grid-gap: 12px 28px;
+        border-bottom-color: var(--mat-table-row-item-outline-color, rgba(0, 0, 0, 0.12));
+        border-bottom-width: var(--mat-table-row-item-outline-width, 1px);
+        border-bottom-style: solid;
+        height: auto;
+        padding: 20px 0;
+    }
+
+    .secrets-cell {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: 1 / 3;
+        border-bottom: none;
+    }
+
+    .secrets-cell::before {
+        content: attr(data-label);
+        display: inline-block;
+        font-weight: bold;
+        white-space: nowrap;
+    }
+
+    .secrets-cell_actions {
+        grid-column: 1 / span 3;
+        display: flex;
+        justify-content: flex-end;
+        border-bottom: none;
+    }
+
+    .secrets-cell_actions::before {
+        display: none;
+    }
+}
diff --git a/frontend/src/app/components/secrets/secrets.component.html b/frontend/src/app/components/secrets/secrets.component.html
new file mode 100644
index 000000000..9b670d24c
--- /dev/null
+++ b/frontend/src/app/components/secrets/secrets.component.html
@@ -0,0 +1,158 @@
+<app-alert></app-alert>
+
+<div class="secrets-page">
+    <div class="secrets-header">
+        <h1 class="mat-h1">Company Secrets</h1>
+        <p class="secrets-description">
+            Securely store and manage sensitive information like API keys, passwords, and tokens.
+        </p>
+    </div>
+
+    <div class="secrets-toolbar">
+        <mat-form-field appearance="outline" class="search-field">
+            <mat-label>Search secrets</mat-label>
+            <input matInput
+                [(ngModel)]="searchQuery"
+                (ngModelChange)="onSearchChange($event)"
+                placeholder="Search by slug..."
+                data-testid="secrets-search-input">
+            <mat-icon matSuffix>search</mat-icon>
+        </mat-form-field>
+
+        <button mat-flat-button color="primary"
+            (click)="openCreateDialog()"
+            data-testid="create-secret-button">
+            <mat-icon>add</mat-icon>
+            Create Secret
+        </button>
+    </div>
+
+    <app-placeholder-table-data *ngIf="loading"></app-placeholder-table-data>
+
+    <div *ngIf="!loading && secrets.length === 0" class="no-secrets">
+        <mat-icon class="no-secrets-icon">key_off</mat-icon>
+        <h3>No secrets found</h3>
+        <p *ngIf="searchQuery">No secrets match your search criteria.</p>
+        <p *ngIf="!searchQuery">Create your first secret to securely store sensitive data.</p>
+        <button *ngIf="!searchQuery" mat-stroked-button color="primary" (click)="openCreateDialog()">
+            <mat-icon>add</mat-icon>
+            Create Secret
+        </button>
+    </div>
+
+    <table *ngIf="!loading && secrets.length > 0" mat-table [dataSource]="secrets" class="mat-elevation-z2 secrets-table">
+        <!-- Slug Column -->
+        <ng-container matColumnDef="slug">
+            <th mat-header-cell *matHeaderCellDef>Slug</th>
+            <td mat-cell *matCellDef="let secret; let i = index"
+                class="secrets-cell secrets-cell_slug"
+                data-label="Slug"
+                attr.data-testid="secret-slug-{{i}}-cell">
+                <button mat-button color="primary" (click)="openViewDialog(secret)" class="slug-button">
+                    {{secret.slug}}
+                </button>
+            </td>
+        </ng-container>
+
+        <!-- Master Encryption Column -->
+        <ng-container matColumnDef="masterEncryption">
+            <th mat-header-cell *matHeaderCellDef>Encryption</th>
+            <td mat-cell *matCellDef="let secret; let i = index"
+                class="secrets-cell"
+                data-label="Encryption"
+                attr.data-testid="secret-encryption-{{i}}-cell">
+                <mat-icon *ngIf="secret.masterEncryption"
+                    class="encryption-icon encryption-icon_master"
+                    matTooltip="Protected with master password">
+                    enhanced_encryption
+                </mat-icon>
+                <mat-icon *ngIf="!secret.masterEncryption"
+                    class="encryption-icon"
+                    matTooltip="Standard encryption">
+                    lock
+                </mat-icon>
+            </td>
+        </ng-container>
+
+        <!-- Expires At Column -->
+        <ng-container matColumnDef="expiresAt">
+            <th mat-header-cell *matHeaderCellDef>Expires</th>
+            <td mat-cell *matCellDef="let secret; let i = index"
+                class="secrets-cell"
+                data-label="Expires"
+                attr.data-testid="secret-expires-{{i}}-cell">
+                <span *ngIf="!secret.expiresAt" class="no-expiry">Never</span>
+                <span *ngIf="secret.expiresAt && isExpired(secret)" class="expired-badge">
+                    <mat-icon>error</mat-icon>
+                    Expired
+                </span>
+                <span *ngIf="secret.expiresAt && isExpiringSoon(secret) && !isExpired(secret)" class="expiring-soon-badge">
+                    <mat-icon>warning</mat-icon>
+                    {{secret.expiresAt | date:'mediumDate'}}
+                </span>
+                <span *ngIf="secret.expiresAt && !isExpired(secret) && !isExpiringSoon(secret)">
+                    {{secret.expiresAt | date:'mediumDate'}}
+                </span>
+            </td>
+        </ng-container>
+
+        <!-- Updated At Column -->
+        <ng-container matColumnDef="updatedAt">
+            <th mat-header-cell *matHeaderCellDef>Last Updated</th>
+            <td mat-cell *matCellDef="let secret; let i = index"
+                class="secrets-cell"
+                data-label="Last Updated"
+                attr.data-testid="secret-updated-{{i}}-cell">
+                {{secret.updatedAt | date:'medium'}}
+            </td>
+        </ng-container>
+
+        <!-- Actions Column -->
+        <ng-container matColumnDef="actions">
+            <th mat-header-cell *matHeaderCellDef></th>
+            <td mat-cell *matCellDef="let secret; let i = index"
+                class="secrets-cell secrets-cell_actions">
+                <button mat-icon-button [matMenuTriggerFor]="actionsMenu"
+                    attr.data-testid="secret-actions-{{i}}-button">
+                    <mat-icon>more_vert</mat-icon>
+                </button>
+                <mat-menu #actionsMenu="matMenu">
+                    <button mat-menu-item (click)="openViewDialog(secret)"
+                        attr.data-testid="secret-view-{{i}}-menu-item">
+                        <mat-icon>visibility</mat-icon>
+                        <span>View</span>
+                    </button>
+                    <button mat-menu-item (click)="openEditDialog(secret)"
+                        [disabled]="isExpired(secret)"
+                        attr.data-testid="secret-edit-{{i}}-menu-item">
+                        <mat-icon>edit</mat-icon>
+                        <span>Edit</span>
+                    </button>
+                    <button mat-menu-item (click)="openAuditLogDialog(secret)"
+                        attr.data-testid="secret-audit-{{i}}-menu-item">
+                        <mat-icon>history</mat-icon>
+                        <span>Audit Log</span>
+                    </button>
+                    <mat-divider></mat-divider>
+                    <button mat-menu-item (click)="openDeleteDialog(secret)" class="delete-action"
+                        attr.data-testid="secret-delete-{{i}}-menu-item">
+                        <mat-icon color="warn">delete</mat-icon>
+                        <span>Delete</span>
+                    </button>
+                </mat-menu>
+            </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns" class="secrets-table-heading"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="secrets-row"></tr>
+    </table>
+
+    <mat-paginator *ngIf="!loading && secrets.length > 0"
+        [length]="pagination.total"
+        [pageSize]="pagination.perPage"
+        [pageIndex]="pagination.currentPage - 1"
+        [pageSizeOptions]="[10, 20, 50]"
+        (page)="onPageChange($event)"
+        data-testid="secrets-paginator">
+    </mat-paginator>
+</div>
diff --git a/frontend/src/app/components/secrets/secrets.component.spec.ts b/frontend/src/app/components/secrets/secrets.component.spec.ts
new file mode 100644
index 000000000..1da66542b
--- /dev/null
+++ b/frontend/src/app/components/secrets/secrets.component.spec.ts
@@ -0,0 +1,111 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { Angulartics2Module } from 'angulartics2';
+import { of } from 'rxjs';
+
+import { SecretsComponent } from './secrets.component';
+import { SecretsService } from 'src/app/services/secrets.service';
+import { CompanyService } from 'src/app/services/company.service';
+
+describe('SecretsComponent', () => {
+  let component: SecretsComponent;
+  let fixture: ComponentFixture<SecretsComponent>;
+  let mockSecretsService: jasmine.SpyObj<SecretsService>;
+  let mockCompanyService: jasmine.SpyObj<CompanyService>;
+  let mockDialog: jasmine.SpyObj<MatDialog>;
+
+  beforeEach(async () => {
+    mockSecretsService = jasmine.createSpyObj('SecretsService', ['fetchSecrets'], {
+      cast: of('')
+    });
+    mockSecretsService.fetchSecrets.and.returnValue(of({
+      data: [],
+      pagination: { total: 0, currentPage: 1, perPage: 20, lastPage: 1 }
+    }));
+
+    mockCompanyService = jasmine.createSpyObj('CompanyService', ['getCurrentTabTitle']);
+    mockCompanyService.getCurrentTabTitle.and.returnValue(of('Test Company'));
+
+    mockDialog = jasmine.createSpyObj('MatDialog', ['open']);
+
+    await TestBed.configureTestingModule({
+      imports: [
+        SecretsComponent,
+        BrowserAnimationsModule,
+        MatSnackBarModule,
+        Angulartics2Module.forRoot(),
+      ],
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        { provide: SecretsService, useValue: mockSecretsService },
+        { provide: CompanyService, useValue: mockCompanyService },
+        { provide: MatDialog, useValue: mockDialog },
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SecretsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should load secrets on init', () => {
+    expect(mockSecretsService.fetchSecrets).toHaveBeenCalled();
+  });
+
+  it('should detect expired secrets', () => {
+    const expiredSecret = {
+      id: '1',
+      slug: 'test',
+      companyId: '1',
+      createdAt: '2024-01-01',
+      updatedAt: '2024-01-01',
+      expiresAt: '2024-01-01',
+      masterEncryption: false,
+    };
+    expect(component.isExpired(expiredSecret)).toBeTrue();
+  });
+
+  it('should detect non-expired secrets', () => {
+    const futureDate = new Date();
+    futureDate.setFullYear(futureDate.getFullYear() + 1);
+    const validSecret = {
+      id: '1',
+      slug: 'test',
+      companyId: '1',
+      createdAt: '2024-01-01',
+      updatedAt: '2024-01-01',
+      expiresAt: futureDate.toISOString(),
+      masterEncryption: false,
+    };
+    expect(component.isExpired(validSecret)).toBeFalse();
+  });
+
+  it('should detect secrets expiring soon', () => {
+    const soonDate = new Date();
+    soonDate.setDate(soonDate.getDate() + 3);
+    const expiringSoonSecret = {
+      id: '1',
+      slug: 'test',
+      companyId: '1',
+      createdAt: '2024-01-01',
+      updatedAt: '2024-01-01',
+      expiresAt: soonDate.toISOString(),
+      masterEncryption: false,
+    };
+    expect(component.isExpiringSoon(expiringSoonSecret)).toBeTrue();
+  });
+
+  it('should open create dialog', () => {
+    component.openCreateDialog();
+    expect(mockDialog.open).toHaveBeenCalled();
+  });
+});
diff --git a/frontend/src/app/components/secrets/secrets.component.ts b/frontend/src/app/components/secrets/secrets.component.ts
new file mode 100644
index 000000000..63483a087
--- /dev/null
+++ b/frontend/src/app/components/secrets/secrets.component.ts
@@ -0,0 +1,190 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatTableModule } from '@angular/material/table';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatDialog } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { Subscription, Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { Angulartics2 } from 'angulartics2';
+import { Title } from '@angular/platform-browser';
+
+import { SecretsService } from 'src/app/services/secrets.service';
+import { CompanyService } from 'src/app/services/company.service';
+import { Secret, SecretPagination } from 'src/app/models/secret';
+import { CreateSecretDialogComponent } from './create-secret-dialog/create-secret-dialog.component';
+import { ViewSecretDialogComponent } from './view-secret-dialog/view-secret-dialog.component';
+import { EditSecretDialogComponent } from './edit-secret-dialog/edit-secret-dialog.component';
+import { DeleteSecretDialogComponent } from './delete-secret-dialog/delete-secret-dialog.component';
+import { AuditLogDialogComponent } from './audit-log-dialog/audit-log-dialog.component';
+import { PlaceholderTableDataComponent } from '../skeletons/placeholder-table-data/placeholder-table-data.component';
+import { AlertComponent } from '../ui-components/alert/alert.component';
+
+@Component({
+  selector: 'app-secrets',
+  templateUrl: './secrets.component.html',
+  styleUrls: ['./secrets.component.css'],
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatTableModule,
+    MatButtonModule,
+    MatIconModule,
+    MatMenuModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatPaginatorModule,
+    MatTooltipModule,
+    MatChipsModule,
+    MatDividerModule,
+    PlaceholderTableDataComponent,
+    AlertComponent,
+  ]
+})
+export class SecretsComponent implements OnInit, OnDestroy {
+  public secrets: Secret[] = [];
+  public pagination: SecretPagination = {
+    total: 0,
+    currentPage: 1,
+    perPage: 20,
+    lastPage: 1,
+  };
+  public loading = true;
+  public searchQuery = '';
+  public displayedColumns = ['slug', 'masterEncryption', 'expiresAt', 'updatedAt', 'actions'];
+
+  private searchSubject = new Subject<string>();
+  private subscriptions: Subscription[] = [];
+
+  constructor(
+    private _secrets: SecretsService,
+    private _company: CompanyService,
+    private dialog: MatDialog,
+    private angulartics2: Angulartics2,
+    private title: Title
+  ) {}
+
+  ngOnInit(): void {
+    this._company.getCurrentTabTitle().subscribe(tabTitle => {
+      this.title.setTitle(`Secrets | ${tabTitle || 'Rocketadmin'}`);
+    });
+
+    this.loadSecrets();
+
+    const searchSub = this.searchSubject.pipe(
+      debounceTime(300),
+      distinctUntilChanged()
+    ).subscribe(() => {
+      this.pagination.currentPage = 1;
+      this.loadSecrets();
+    });
+    this.subscriptions.push(searchSub);
+
+    const updateSub = this._secrets.cast.subscribe(action => {
+      if (action) {
+        this.loadSecrets();
+      }
+    });
+    this.subscriptions.push(updateSub);
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+  }
+
+  loadSecrets(): void {
+    this.loading = true;
+    this._secrets.fetchSecrets(
+      this.pagination.currentPage,
+      this.pagination.perPage,
+      this.searchQuery || undefined
+    ).subscribe(response => {
+      if (response) {
+        this.secrets = response.data;
+        this.pagination = response.pagination;
+      }
+      this.loading = false;
+    });
+  }
+
+  onSearchChange(query: string): void {
+    this.searchSubject.next(query);
+  }
+
+  onPageChange(event: PageEvent): void {
+    this.pagination.currentPage = event.pageIndex + 1;
+    this.pagination.perPage = event.pageSize;
+    this.loadSecrets();
+  }
+
+  isExpired(secret: Secret): boolean {
+    if (!secret.expiresAt) return false;
+    return new Date(secret.expiresAt) < new Date();
+  }
+
+  isExpiringSoon(secret: Secret): boolean {
+    if (!secret.expiresAt) return false;
+    const expiresAt = new Date(secret.expiresAt);
+    const now = new Date();
+    const sevenDaysFromNow = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000);
+    return expiresAt > now && expiresAt <= sevenDaysFromNow;
+  }
+
+  openCreateDialog(): void {
+    this.dialog.open(CreateSecretDialogComponent, {
+      width: '500px',
+    });
+    this.angulartics2.eventTrack.next({
+      action: 'Secrets: create secret dialog opened',
+    });
+  }
+
+  openViewDialog(secret: Secret): void {
+    this.dialog.open(ViewSecretDialogComponent, {
+      width: '600px',
+      data: { secret },
+    });
+    this.angulartics2.eventTrack.next({
+      action: 'Secrets: view secret dialog opened',
+    });
+  }
+
+  openEditDialog(secret: Secret): void {
+    this.dialog.open(EditSecretDialogComponent, {
+      width: '500px',
+      data: { secret },
+    });
+    this.angulartics2.eventTrack.next({
+      action: 'Secrets: edit secret dialog opened',
+    });
+  }
+
+  openDeleteDialog(secret: Secret): void {
+    this.dialog.open(DeleteSecretDialogComponent, {
+      width: '400px',
+      data: { secret },
+    });
+    this.angulartics2.eventTrack.next({
+      action: 'Secrets: delete secret dialog opened',
+    });
+  }
+
+  openAuditLogDialog(secret: Secret): void {
+    this.dialog.open(AuditLogDialogComponent, {
+      width: '800px',
+      maxHeight: '80vh',
+      data: { secret },
+    });
+    this.angulartics2.eventTrack.next({
+      action: 'Secrets: audit log dialog opened',
+    });
+  }
+}
diff --git a/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.css b/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.css
new file mode 100644
index 000000000..1f269dac5
--- /dev/null
+++ b/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.css
@@ -0,0 +1,223 @@
+h2[mat-dialog-title] {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.title-icon {
+    color: rgba(0, 0, 0, 0.54);
+}
+
+@media (prefers-color-scheme: dark) {
+    .title-icon {
+        color: rgba(255, 255, 255, 0.7);
+    }
+}
+
+mat-dialog-content {
+    min-width: 500px;
+    min-height: 200px;
+}
+
+@media (width <= 600px) {
+    mat-dialog-content {
+        min-width: auto;
+    }
+}
+
+.loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    text-align: center;
+}
+
+.loading-container p {
+    margin-top: 16px;
+    color: rgba(0, 0, 0, 0.54);
+}
+
+@media (prefers-color-scheme: dark) {
+    .loading-container p {
+        color: rgba(255, 255, 255, 0.54);
+    }
+}
+
+.master-password-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 24px;
+}
+
+.lock-icon {
+    font-size: 48px;
+    width: 48px;
+    height: 48px;
+    color: #1976d2;
+    margin-bottom: 16px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .lock-icon {
+        color: #64b5f6;
+    }
+}
+
+.master-password-container h3 {
+    margin: 0 0 8px 0;
+}
+
+.master-password-container p {
+    color: rgba(0, 0, 0, 0.54);
+    margin: 0 0 24px 0;
+}
+
+@media (prefers-color-scheme: dark) {
+    .master-password-container p {
+        color: rgba(255, 255, 255, 0.54);
+    }
+}
+
+.full-width {
+    width: 100%;
+    max-width: 300px;
+}
+
+.secret-details {
+    padding: 8px 0;
+}
+
+.expired-warning {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    background-color: #ffebee;
+    color: #c62828;
+    border-radius: 8px;
+    margin-bottom: 24px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .expired-warning {
+        background-color: rgba(198, 40, 40, 0.2);
+        color: #ef5350;
+    }
+}
+
+.value-section {
+    margin-bottom: 24px;
+}
+
+.section-label {
+    display: block;
+    font-size: 12px;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.54);
+    margin-bottom: 8px;
+    text-transform: uppercase;
+}
+
+@media (prefers-color-scheme: dark) {
+    .section-label {
+        color: rgba(255, 255, 255, 0.54);
+    }
+}
+
+.value-container {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    background-color: rgba(0, 0, 0, 0.04);
+    border-radius: 8px;
+    padding: 12px 16px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .value-container {
+        background-color: rgba(255, 255, 255, 0.08);
+    }
+}
+
+.value-display {
+    flex: 1;
+    font-family: monospace;
+    word-break: break-all;
+    white-space: pre-wrap;
+}
+
+.value-display.masked {
+    letter-spacing: 2px;
+}
+
+.value-actions {
+    display: flex;
+    flex-shrink: 0;
+}
+
+.metadata-section {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+}
+
+@media (width <= 600px) {
+    .metadata-section {
+        grid-template-columns: 1fr;
+    }
+}
+
+.metadata-item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.metadata-item label {
+    font-size: 12px;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.54);
+    text-transform: uppercase;
+}
+
+@media (prefers-color-scheme: dark) {
+    .metadata-item label {
+        color: rgba(255, 255, 255, 0.54);
+    }
+}
+
+.metadata-item span {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.metadata-item mat-icon {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+}
+
+.no-expiry {
+    color: rgba(0, 0, 0, 0.38);
+}
+
+@media (prefers-color-scheme: dark) {
+    .no-expiry {
+        color: rgba(255, 255, 255, 0.38);
+    }
+}
+
+.master-encrypted {
+    color: #1976d2;
+}
+
+@media (prefers-color-scheme: dark) {
+    .master-encrypted {
+        color: #64b5f6;
+    }
+}
diff --git a/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.html b/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.html
new file mode 100644
index 000000000..8e8a6b453
--- /dev/null
+++ b/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.html
@@ -0,0 +1,111 @@
+<h2 mat-dialog-title>
+    <mat-icon class="title-icon">key</mat-icon>
+    {{data.secret.slug}}
+</h2>
+
+<mat-dialog-content>
+    <!-- Loading State -->
+    <div *ngIf="loading" class="loading-container">
+        <mat-spinner diameter="40"></mat-spinner>
+        <p>Loading secret...</p>
+    </div>
+
+    <!-- Master Password Required -->
+    <div *ngIf="!loading && requiresMasterPassword" class="master-password-container">
+        <mat-icon class="lock-icon">enhanced_encryption</mat-icon>
+        <h3>Master Password Required</h3>
+        <p>This secret is protected with master password encryption.</p>
+
+        <mat-form-field appearance="outline" class="full-width">
+            <mat-label>Master Password</mat-label>
+            <input matInput
+                [(ngModel)]="masterPassword"
+                [type]="showMasterPassword ? 'text' : 'password'"
+                (keyup.enter)="submitMasterPassword()"
+                placeholder="Enter master password"
+                data-testid="view-secret-master-password-input">
+            <button mat-icon-button matSuffix type="button"
+                (click)="toggleMasterPasswordVisibility()"
+                [matTooltip]="showMasterPassword ? 'Hide password' : 'Show password'">
+                <mat-icon>{{showMasterPassword ? 'visibility_off' : 'visibility'}}</mat-icon>
+            </button>
+            <mat-error *ngIf="masterPasswordError">{{masterPasswordError}}</mat-error>
+        </mat-form-field>
+
+        <button mat-flat-button color="primary"
+            (click)="submitMasterPassword()"
+            data-testid="view-secret-unlock-button">
+            <mat-icon>lock_open</mat-icon>
+            Unlock Secret
+        </button>
+    </div>
+
+    <!-- Secret Details -->
+    <div *ngIf="!loading && !requiresMasterPassword && secret" class="secret-details">
+        <!-- Expired Warning -->
+        <div *ngIf="isExpired()" class="expired-warning">
+            <mat-icon>error</mat-icon>
+            <span>This secret has expired on {{secret.expiresAt | date:'medium'}}</span>
+        </div>
+
+        <!-- Secret Value -->
+        <div class="value-section">
+            <label class="section-label">Secret Value</label>
+            <div class="value-container">
+                <div class="value-display" [class.masked]="!showValue">
+                    {{showValue ? secret.value : '••••••••••••••••••••'}}
+                </div>
+                <div class="value-actions">
+                    <button mat-icon-button
+                        (click)="toggleValueVisibility()"
+                        [matTooltip]="showValue ? 'Hide value' : 'Show value'"
+                        data-testid="view-secret-toggle-visibility">
+                        <mat-icon>{{showValue ? 'visibility_off' : 'visibility'}}</mat-icon>
+                    </button>
+                    <button mat-icon-button
+                        (click)="copyToClipboard()"
+                        matTooltip="Copy to clipboard"
+                        data-testid="view-secret-copy-button">
+                        <mat-icon>content_copy</mat-icon>
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Metadata -->
+        <div class="metadata-section">
+            <div class="metadata-item">
+                <label>Created</label>
+                <span>{{secret.createdAt | date:'medium'}}</span>
+            </div>
+            <div class="metadata-item">
+                <label>Last Updated</label>
+                <span>{{secret.updatedAt | date:'medium'}}</span>
+            </div>
+            <div class="metadata-item" *ngIf="secret.lastAccessedAt">
+                <label>Last Accessed</label>
+                <span>{{secret.lastAccessedAt | date:'medium'}}</span>
+            </div>
+            <div class="metadata-item">
+                <label>Expires</label>
+                <span *ngIf="secret.expiresAt">{{secret.expiresAt | date:'medium'}}</span>
+                <span *ngIf="!secret.expiresAt" class="no-expiry">Never</span>
+            </div>
+            <div class="metadata-item">
+                <label>Encryption</label>
+                <span *ngIf="secret.masterEncryption" class="master-encrypted">
+                    <mat-icon>enhanced_encryption</mat-icon>
+                    Master password protected
+                </span>
+                <span *ngIf="!secret.masterEncryption">
+                    <mat-icon>lock</mat-icon>
+                    Standard encryption
+                </span>
+            </div>
+        </div>
+    </div>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close data-testid="view-secret-close-button">Close</button>
+</mat-dialog-actions>
diff --git a/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.spec.ts b/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.spec.ts
new file mode 100644
index 000000000..dc5df37ad
--- /dev/null
+++ b/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.spec.ts
@@ -0,0 +1,81 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { Angulartics2Module } from 'angulartics2';
+import { of } from 'rxjs';
+
+import { ViewSecretDialogComponent } from './view-secret-dialog.component';
+import { SecretsService } from 'src/app/services/secrets.service';
+import { NotificationsService } from 'src/app/services/notifications.service';
+
+describe('ViewSecretDialogComponent', () => {
+  let component: ViewSecretDialogComponent;
+  let fixture: ComponentFixture<ViewSecretDialogComponent>;
+  let mockSecretsService: jasmine.SpyObj<SecretsService>;
+  let mockNotificationsService: jasmine.SpyObj<NotificationsService>;
+  let mockDialogRef: jasmine.SpyObj<MatDialogRef<ViewSecretDialogComponent>>;
+
+  const mockSecret = {
+    id: '1',
+    slug: 'test-secret',
+    companyId: '1',
+    createdAt: '2024-01-01',
+    updatedAt: '2024-01-01',
+    masterEncryption: false,
+  };
+
+  beforeEach(async () => {
+    mockSecretsService = jasmine.createSpyObj('SecretsService', ['getSecret']);
+    mockSecretsService.getSecret.and.returnValue(of({
+      ...mockSecret,
+      value: 'secret-value',
+    }));
+
+    mockNotificationsService = jasmine.createSpyObj('NotificationsService', ['showSuccessSnackbar']);
+    mockDialogRef = jasmine.createSpyObj('MatDialogRef', ['close']);
+
+    await TestBed.configureTestingModule({
+      imports: [
+        ViewSecretDialogComponent,
+        BrowserAnimationsModule,
+        MatSnackBarModule,
+        Angulartics2Module.forRoot(),
+      ],
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        { provide: SecretsService, useValue: mockSecretsService },
+        { provide: NotificationsService, useValue: mockNotificationsService },
+        { provide: MatDialogRef, useValue: mockDialogRef },
+        { provide: MAT_DIALOG_DATA, useValue: { secret: mockSecret } },
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ViewSecretDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should load secret on init', () => {
+    expect(mockSecretsService.getSecret).toHaveBeenCalledWith('test-secret', undefined);
+  });
+
+  it('should toggle value visibility', () => {
+    expect(component.showValue).toBeFalse();
+    component.toggleValueVisibility();
+    expect(component.showValue).toBeTrue();
+  });
+
+  it('should copy to clipboard', () => {
+    component.secret = { ...mockSecret, value: 'secret-value' };
+    component.copyToClipboard();
+    expect(mockNotificationsService.showSuccessSnackbar).toHaveBeenCalledWith('Secret copied to clipboard');
+  });
+});
diff --git a/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.ts b/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.ts
new file mode 100644
index 000000000..a7a12120e
--- /dev/null
+++ b/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.ts
@@ -0,0 +1,111 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Clipboard } from '@angular/cdk/clipboard';
+import { Angulartics2 } from 'angulartics2';
+
+import { SecretsService } from 'src/app/services/secrets.service';
+import { NotificationsService } from 'src/app/services/notifications.service';
+import { Secret, SecretWithValue } from 'src/app/models/secret';
+
+@Component({
+  selector: 'app-view-secret-dialog',
+  templateUrl: './view-secret-dialog.component.html',
+  styleUrls: ['./view-secret-dialog.component.css'],
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatTooltipModule,
+  ]
+})
+export class ViewSecretDialogComponent implements OnInit {
+  public secret: SecretWithValue | null = null;
+  public loading = true;
+  public showValue = false;
+  public requiresMasterPassword = false;
+  public masterPassword = '';
+  public masterPasswordError = '';
+  public showMasterPassword = false;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: { secret: Secret },
+    private dialogRef: MatDialogRef<ViewSecretDialogComponent>,
+    private _secrets: SecretsService,
+    private _notifications: NotificationsService,
+    private clipboard: Clipboard,
+    private angulartics2: Angulartics2
+  ) {}
+
+  ngOnInit(): void {
+    this.loadSecret();
+  }
+
+  loadSecret(masterPassword?: string): void {
+    this.loading = true;
+    this.masterPasswordError = '';
+
+    this._secrets.getSecret(this.data.secret.slug, masterPassword).subscribe({
+      next: (secret) => {
+        this.secret = secret;
+        this.loading = false;
+        this.requiresMasterPassword = false;
+        this.angulartics2.eventTrack.next({
+          action: 'Secrets: secret viewed',
+        });
+      },
+      error: (err) => {
+        this.loading = false;
+        if (err.status === 403) {
+          this.requiresMasterPassword = true;
+          if (masterPassword) {
+            this.masterPasswordError = 'Invalid master password';
+          }
+        }
+      }
+    });
+  }
+
+  submitMasterPassword(): void {
+    if (!this.masterPassword) {
+      this.masterPasswordError = 'Please enter the master password';
+      return;
+    }
+    this.loadSecret(this.masterPassword);
+  }
+
+  toggleValueVisibility(): void {
+    this.showValue = !this.showValue;
+  }
+
+  toggleMasterPasswordVisibility(): void {
+    this.showMasterPassword = !this.showMasterPassword;
+  }
+
+  copyToClipboard(): void {
+    if (this.secret?.value) {
+      this.clipboard.copy(this.secret.value);
+      this._notifications.showSuccessSnackbar('Secret copied to clipboard');
+      this.angulartics2.eventTrack.next({
+        action: 'Secrets: secret copied to clipboard',
+      });
+    }
+  }
+
+  isExpired(): boolean {
+    if (!this.secret?.expiresAt) return false;
+    return new Date(this.secret.expiresAt) < new Date();
+  }
+}
diff --git a/frontend/src/app/models/secret.ts b/frontend/src/app/models/secret.ts
new file mode 100644
index 000000000..5aeb715b2
--- /dev/null
+++ b/frontend/src/app/models/secret.ts
@@ -0,0 +1,65 @@
+export interface Secret {
+  id: string;
+  slug: string;
+  companyId: string;
+  createdAt: string;
+  updatedAt: string;
+  lastAccessedAt?: string;
+  expiresAt?: string;
+  masterEncryption: boolean;
+}
+
+export interface SecretWithValue extends Secret {
+  value: string;
+}
+
+export interface SecretListResponse {
+  data: Secret[];
+  pagination: SecretPagination;
+}
+
+export interface SecretPagination {
+  total: number;
+  currentPage: number;
+  perPage: number;
+  lastPage: number;
+}
+
+export interface AuditLogEntry {
+  id: string;
+  action: SecretAction;
+  user: {
+    id: string;
+    email: string;
+  };
+  accessedAt: string;
+  ipAddress?: string;
+  userAgent?: string;
+  success: boolean;
+  errorMessage?: string;
+}
+
+export interface AuditLogResponse {
+  data: AuditLogEntry[];
+  pagination: SecretPagination;
+}
+
+export type SecretAction = 'create' | 'view' | 'copy' | 'update' | 'delete';
+
+export interface CreateSecretPayload {
+  slug: string;
+  value: string;
+  expiresAt?: string;
+  masterEncryption?: boolean;
+  masterPassword?: string;
+}
+
+export interface UpdateSecretPayload {
+  value: string;
+  expiresAt?: string | null;
+}
+
+export interface DeleteSecretResponse {
+  message: string;
+  deletedAt: string;
+}
diff --git a/frontend/src/app/services/secrets.service.ts b/frontend/src/app/services/secrets.service.ts
new file mode 100644
index 000000000..0e93f81e9
--- /dev/null
+++ b/frontend/src/app/services/secrets.service.ts
@@ -0,0 +1,152 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { BehaviorSubject, EMPTY, Observable, throwError } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
+import { NotificationsService } from './notifications.service';
+import {
+  Secret,
+  SecretWithValue,
+  SecretListResponse,
+  AuditLogResponse,
+  CreateSecretPayload,
+  UpdateSecretPayload,
+  DeleteSecretResponse,
+} from '../models/secret';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SecretsService {
+  private secretsUpdated = new BehaviorSubject<string>('');
+  public cast = this.secretsUpdated.asObservable();
+
+  constructor(
+    private _http: HttpClient,
+    private _notifications: NotificationsService
+  ) {}
+
+  fetchSecrets(page: number = 1, limit: number = 20, search?: string): Observable<SecretListResponse> {
+    let params = new HttpParams()
+      .set('page', page.toString())
+      .set('limit', limit.toString());
+
+    if (search) {
+      params = params.set('search', search);
+    }
+
+    return this._http.get<SecretListResponse>('/secrets', { params })
+      .pipe(
+        map(res => res),
+        catchError((err) => {
+          console.log(err);
+          this._notifications.showErrorSnackbar(err.error?.message || 'Failed to fetch secrets');
+          return EMPTY;
+        })
+      );
+  }
+
+  getSecret(slug: string, masterPassword?: string): Observable<SecretWithValue> {
+    let headers = new HttpHeaders();
+    if (masterPassword) {
+      headers = headers.set('masterPassword', masterPassword);
+    }
+
+    return this._http.get<SecretWithValue>(`/secrets/${slug}`, { headers })
+      .pipe(
+        map(res => res),
+        catchError((err) => {
+          console.log(err);
+          if (err.status === 403) {
+            // Master password required or invalid - let component handle
+            return throwError(() => err);
+          }
+          if (err.status === 410) {
+            this._notifications.showErrorSnackbar('This secret has expired');
+          } else {
+            this._notifications.showErrorSnackbar(err.error?.message || 'Failed to fetch secret');
+          }
+          return EMPTY;
+        })
+      );
+  }
+
+  createSecret(payload: CreateSecretPayload): Observable<Secret> {
+    return this._http.post<Secret>('/secrets', payload)
+      .pipe(
+        map(res => {
+          this._notifications.showSuccessSnackbar('Secret created successfully');
+          this.secretsUpdated.next('created');
+          return res;
+        }),
+        catchError((err) => {
+          console.log(err);
+          if (err.status === 409) {
+            this._notifications.showErrorSnackbar('A secret with this slug already exists');
+          } else {
+            this._notifications.showErrorSnackbar(err.error?.message || 'Failed to create secret');
+          }
+          return EMPTY;
+        })
+      );
+  }
+
+  updateSecret(slug: string, payload: UpdateSecretPayload, masterPassword?: string): Observable<Secret> {
+    let headers = new HttpHeaders();
+    if (masterPassword) {
+      headers = headers.set('masterPassword', masterPassword);
+    }
+
+    return this._http.put<Secret>(`/secrets/${slug}`, payload, { headers })
+      .pipe(
+        map(res => {
+          this._notifications.showSuccessSnackbar('Secret updated successfully');
+          this.secretsUpdated.next('updated');
+          return res;
+        }),
+        catchError((err) => {
+          console.log(err);
+          if (err.status === 403) {
+            return throwError(() => err);
+          }
+          if (err.status === 410) {
+            this._notifications.showErrorSnackbar('Cannot update an expired secret');
+          } else {
+            this._notifications.showErrorSnackbar(err.error?.message || 'Failed to update secret');
+          }
+          return EMPTY;
+        })
+      );
+  }
+
+  deleteSecret(slug: string): Observable<DeleteSecretResponse> {
+    return this._http.delete<DeleteSecretResponse>(`/secrets/${slug}`)
+      .pipe(
+        map(res => {
+          this._notifications.showSuccessSnackbar('Secret deleted successfully');
+          this.secretsUpdated.next('deleted');
+          return res;
+        }),
+        catchError((err) => {
+          console.log(err);
+          this._notifications.showErrorSnackbar(err.error?.message || 'Failed to delete secret');
+          return EMPTY;
+        })
+      );
+  }
+
+  getAuditLog(slug: string, page: number = 1, limit: number = 50): Observable<AuditLogResponse> {
+    const params = new HttpParams()
+      .set('page', page.toString())
+      .set('limit', limit.toString());
+
+    return this._http.get<AuditLogResponse>(`/secrets/${slug}/audit-log`, { params })
+      .pipe(
+        map(res => res),
+        catchError((err) => {
+          console.log(err);
+          this._notifications.showErrorSnackbar(err.error?.message || 'Failed to fetch audit log');
+          return EMPTY;
+        })
+      );
+  }
+}

From 42a5d0ffe0b68056293e2bbf602461bc231c64a6 Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Fri, 5 Dec 2025 13:30:14 +0000
Subject: [PATCH 2/9] code splitting

---
 frontend/src/app/app-routing.module.ts        | 91 +++++++------------
 .../app/routes/company-invitation.routes.ts   | 11 +++
 .../src/app/routes/password-change.routes.ts  | 12 +++
 .../src/app/routes/password-reset.routes.ts   | 11 +++
 .../src/app/routes/registration.routes.ts     | 11 +++
 frontend/src/main.ts                          |  4 -
 6 files changed, 76 insertions(+), 64 deletions(-)
 create mode 100644 frontend/src/app/routes/company-invitation.routes.ts
 create mode 100644 frontend/src/app/routes/password-change.routes.ts
 create mode 100644 frontend/src/app/routes/password-reset.routes.ts
 create mode 100644 frontend/src/app/routes/registration.routes.ts

diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index b728a9462..882bf4b46 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -1,71 +1,42 @@
 import { RouterModule, Routes } from '@angular/router';
 
-import { AuditComponent } from './components/audit/audit.component';
 import { AuthGuard } from './auth.guard';
-import { CompanyComponent } from './components/company/company.component';
-import { CompanyMemberInvitationComponent } from './components/company-member-invitation/company-member-invitation.component';
-import { ConnectDBComponent } from './components/connect-db/connect-db.component'
-import { ConnectionSettingsComponent } from './components/connection-settings/connection-settings.component';
-import { ConnectionsListComponent } from './components/connections-list/connections-list.component';
-import { DashboardComponent } from './components/dashboard/dashboard.component'
-import { DbTableActionsComponent } from './components/dashboard/db-table-view/db-table-actions/db-table-actions.component';
-import { DbTableRowEditComponent } from './components/db-table-row-edit/db-table-row-edit.component';
-import { DbTableSettingsComponent } from './components/dashboard/db-table-view/db-table-settings/db-table-settings.component';
-import { DbTableWidgetsComponent } from './components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component';
-import { EmailChangeComponent } from './components/email-change/email-change.component';
-import { EmailVerificationComponent } from './components/email-verification/email-verification.component';
-import { LoginComponent } from './components/login/login.component';
 import { NgModule } from '@angular/core';
-import { PageLoaderComponent } from './components/page-loader/page-loader.component';
-import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component';
-import { PasswordChangeComponent } from './components/password-change/password-change.component';
-import { PasswordRequestComponent } from './components/password-request/password-request.component';
-import { PasswordResetComponent } from './components/password-reset/password-reset.component';
-import { PaymentFormComponent } from './components/payment-form/payment-form.component';
-import { RegistrationComponent } from './components/registration/registration.component';
-import { UpgradeComponent } from './components/upgrade/upgrade.component';
-import { UpgradeSuccessComponent } from './components/upgrade-success/upgrade-success.component';
-import { UserDeletedSuccessComponent } from './components/user-deleted-success/user-deleted-success.component';
-import { UserSettingsComponent } from './components/user-settings/user-settings.component';
-import { UsersComponent } from './components/users/users.component';
-import { ZapierComponent } from './components/zapier/zapier.component';
-import { SecretsComponent } from './components/secrets/secrets.component';
-import { SsoComponent } from './components/sso/sso.component';
 
 const routes: Routes = [
   {path: '', redirectTo: '/connections-list', pathMatch: 'full'},
-  {path: 'loader', component: PageLoaderComponent},
-  {path: 'registration', component: RegistrationComponent, title: 'Sign up | Rocketadmin'},
-  {path: 'login', component: LoginComponent, title: 'Login | Rocketadmin'},
-  {path: 'forget-password', component: PasswordRequestComponent, title: 'Request password | Rocketadmin'},
-  {path: 'external/user/password/reset/verify/:verification-token', component: PasswordResetComponent, title: 'Reset password | Rocketadmin'},
-  {path: 'external/user/email/verify/:verification-token', component: EmailVerificationComponent, title: 'Email verification | Rocketadmin'},
-  {path: 'external/user/email/change/verify/:change-token', component: EmailChangeComponent, title: 'Email updating | Rocketadmin'},
-  {path: 'deleted', component: UserDeletedSuccessComponent, title: 'User deleted | Rocketadmin'},
-  {path: 'connect-db', component: ConnectDBComponent, canActivate: [AuthGuard]},
-  {path: 'connections-list', component: ConnectionsListComponent, canActivate: [AuthGuard]},
-  {path: 'user-settings', component: UserSettingsComponent, canActivate: [AuthGuard]},
+  {path: 'loader', loadComponent: () => import('./components/page-loader/page-loader.component').then(m => m.PageLoaderComponent)},
+  {path: 'registration', loadChildren: () => import('./routes/registration.routes').then(m => m.REGISTRATION_ROUTES)},
+  {path: 'login', loadComponent: () => import('./components/login/login.component').then(m => m.LoginComponent), title: 'Login | Rocketadmin'},
+  {path: 'forget-password', loadComponent: () => import('./components/password-request/password-request.component').then(m => m.PasswordRequestComponent), title: 'Request password | Rocketadmin'},
+  {path: 'external/user/password/reset/verify/:verification-token', loadChildren: () => import('./routes/password-reset.routes').then(m => m.PASSWORD_RESET_ROUTES)},
+  {path: 'external/user/email/verify/:verification-token', loadComponent: () => import('./components/email-verification/email-verification.component').then(m => m.EmailVerificationComponent), title: 'Email verification | Rocketadmin'},
+  {path: 'external/user/email/change/verify/:change-token', loadComponent: () => import('./components/email-change/email-change.component').then(m => m.EmailChangeComponent), title: 'Email updating | Rocketadmin'},
+  {path: 'deleted', loadComponent: () => import('./components/user-deleted-success/user-deleted-success.component').then(m => m.UserDeletedSuccessComponent), title: 'User deleted | Rocketadmin'},
+  {path: 'connect-db', loadComponent: () => import('./components/connect-db/connect-db.component').then(m => m.ConnectDBComponent), canActivate: [AuthGuard]},
+  {path: 'connections-list', loadComponent: () => import('./components/connections-list/connections-list.component').then(m => m.ConnectionsListComponent), canActivate: [AuthGuard]},
+  {path: 'user-settings', loadComponent: () => import('./components/user-settings/user-settings.component').then(m => m.UserSettingsComponent), canActivate: [AuthGuard]},
   // company routes have to be in this specific order
-  {path: 'company/:company-id/verify/:verification-token', pathMatch: 'full', component: CompanyMemberInvitationComponent, title: 'Invitation | Rocketadmin'},
-  {path: 'company', pathMatch: 'full', component: CompanyComponent, canActivate: [AuthGuard]},
-  {path: 'secrets', pathMatch: 'full', component: SecretsComponent, canActivate: [AuthGuard], title: 'Secrets | Rocketadmin'},
-  {path: 'sso/:company-id', pathMatch: 'full', component: SsoComponent, canActivate: [AuthGuard]},
-  {path: 'change-password', component: PasswordChangeComponent, canActivate: [AuthGuard]},
-  {path: 'upgrade', component: UpgradeComponent, canActivate: [AuthGuard], title: 'Upgrade | Rocketadmin'},
-  {path: 'upgrade/payment', component: PaymentFormComponent, canActivate: [AuthGuard], title: 'Payment | Rocketadmin'},
-  {path: 'subscription/success', component: UpgradeSuccessComponent, canActivate: [AuthGuard], title: 'Upgraded successfully | Rocketadmin'},
-  {path: 'edit-db/:connection-id', component: ConnectDBComponent, canActivate: [AuthGuard]},
-  {path: 'connection-settings/:connection-id', component: ConnectionSettingsComponent, canActivate: [AuthGuard]},
-  {path: 'dashboard/:connection-id', component: DashboardComponent, canActivate: [AuthGuard]},
-  {path: 'audit/:connection-id', component: AuditComponent, canActivate: [AuthGuard]},
-  {path: 'dashboard/:connection-id/:table-name', pathMatch: 'full', component: DashboardComponent, canActivate: [AuthGuard]},
-  {path: 'dashboard/:connection-id/:table-name/entry', pathMatch: 'full', component: DbTableRowEditComponent, canActivate: [AuthGuard]},
-  {path: 'dashboard/:connection-id/:table-name/widgets', pathMatch: 'full', component: DbTableWidgetsComponent, canActivate: [AuthGuard]},
-  {path: 'dashboard/:connection-id/:table-name/settings', pathMatch: 'full', component: DbTableSettingsComponent, canActivate: [AuthGuard]},
-  {path: 'dashboard/:connection-id/:table-name/actions', pathMatch: 'full', component: DbTableActionsComponent, canActivate: [AuthGuard]},
-  {path: 'permissions/:connection-id', component: UsersComponent, canActivate: [AuthGuard]},
-  {path: 'zapier', component: ZapierComponent, canActivate: [AuthGuard]},
-  {path: '**', component: PageNotFoundComponent},
+  {path: 'company/:company-id/verify/:verification-token', pathMatch: 'full', loadChildren: () => import('./routes/company-invitation.routes').then(m => m.COMPANY_INVITATION_ROUTES)},
+  {path: 'company', pathMatch: 'full', loadComponent: () => import('./components/company/company.component').then(m => m.CompanyComponent), canActivate: [AuthGuard]},
+  {path: 'secrets', pathMatch: 'full', loadComponent: () => import('./components/secrets/secrets.component').then(m => m.SecretsComponent), canActivate: [AuthGuard], title: 'Secrets | Rocketadmin'},
+  {path: 'sso/:company-id', pathMatch: 'full', loadComponent: () => import('./components/sso/sso.component').then(m => m.SsoComponent), canActivate: [AuthGuard]},
+  {path: 'change-password', loadChildren: () => import('./routes/password-change.routes').then(m => m.PASSWORD_CHANGE_ROUTES)},
+  {path: 'upgrade', loadComponent: () => import('./components/upgrade/upgrade.component').then(m => m.UpgradeComponent), canActivate: [AuthGuard], title: 'Upgrade | Rocketadmin'},
+  {path: 'upgrade/payment', loadComponent: () => import('./components/payment-form/payment-form.component').then(m => m.PaymentFormComponent), canActivate: [AuthGuard], title: 'Payment | Rocketadmin'},
+  {path: 'subscription/success', loadComponent: () => import('./components/upgrade-success/upgrade-success.component').then(m => m.UpgradeSuccessComponent), canActivate: [AuthGuard], title: 'Upgraded successfully | Rocketadmin'},
+  {path: 'edit-db/:connection-id', loadComponent: () => import('./components/connect-db/connect-db.component').then(m => m.ConnectDBComponent), canActivate: [AuthGuard]},
+  {path: 'connection-settings/:connection-id', loadComponent: () => import('./components/connection-settings/connection-settings.component').then(m => m.ConnectionSettingsComponent), canActivate: [AuthGuard]},
+  {path: 'dashboard/:connection-id', loadComponent: () => import('./components/dashboard/dashboard.component').then(m => m.DashboardComponent), canActivate: [AuthGuard]},
+  {path: 'audit/:connection-id', loadComponent: () => import('./components/audit/audit.component').then(m => m.AuditComponent), canActivate: [AuthGuard]},
+  {path: 'dashboard/:connection-id/:table-name', pathMatch: 'full', loadComponent: () => import('./components/dashboard/dashboard.component').then(m => m.DashboardComponent), canActivate: [AuthGuard]},
+  {path: 'dashboard/:connection-id/:table-name/entry', pathMatch: 'full', loadComponent: () => import('./components/db-table-row-edit/db-table-row-edit.component').then(m => m.DbTableRowEditComponent), canActivate: [AuthGuard]},
+  {path: 'dashboard/:connection-id/:table-name/widgets', pathMatch: 'full', loadComponent: () => import('./components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component').then(m => m.DbTableWidgetsComponent), canActivate: [AuthGuard]},
+  {path: 'dashboard/:connection-id/:table-name/settings', pathMatch: 'full', loadComponent: () => import('./components/dashboard/db-table-view/db-table-settings/db-table-settings.component').then(m => m.DbTableSettingsComponent), canActivate: [AuthGuard]},
+  {path: 'dashboard/:connection-id/:table-name/actions', pathMatch: 'full', loadComponent: () => import('./components/dashboard/db-table-view/db-table-actions/db-table-actions.component').then(m => m.DbTableActionsComponent), canActivate: [AuthGuard]},
+  {path: 'permissions/:connection-id', loadComponent: () => import('./components/users/users.component').then(m => m.UsersComponent), canActivate: [AuthGuard]},
+  {path: 'zapier', loadComponent: () => import('./components/zapier/zapier.component').then(m => m.ZapierComponent), canActivate: [AuthGuard]},
+  {path: '**', loadComponent: () => import('./components/page-not-found/page-not-found.component').then(m => m.PageNotFoundComponent)},
 ];
 
 @NgModule({
diff --git a/frontend/src/app/routes/company-invitation.routes.ts b/frontend/src/app/routes/company-invitation.routes.ts
new file mode 100644
index 000000000..0b135aeba
--- /dev/null
+++ b/frontend/src/app/routes/company-invitation.routes.ts
@@ -0,0 +1,11 @@
+import { Routes } from '@angular/router';
+import { provideZxvbnServiceForPSM } from 'angular-password-strength-meter/zxcvbn';
+
+export const COMPANY_INVITATION_ROUTES: Routes = [
+  {
+    path: '',
+    loadComponent: () => import('../components/company-member-invitation/company-member-invitation.component').then(m => m.CompanyMemberInvitationComponent),
+    title: 'Invitation | Rocketadmin',
+    providers: [provideZxvbnServiceForPSM()]
+  }
+];
diff --git a/frontend/src/app/routes/password-change.routes.ts b/frontend/src/app/routes/password-change.routes.ts
new file mode 100644
index 000000000..a37597715
--- /dev/null
+++ b/frontend/src/app/routes/password-change.routes.ts
@@ -0,0 +1,12 @@
+import { Routes } from '@angular/router';
+import { provideZxvbnServiceForPSM } from 'angular-password-strength-meter/zxcvbn';
+import { AuthGuard } from '../auth.guard';
+
+export const PASSWORD_CHANGE_ROUTES: Routes = [
+  {
+    path: '',
+    loadComponent: () => import('../components/password-change/password-change.component').then(m => m.PasswordChangeComponent),
+    canActivate: [AuthGuard],
+    providers: [provideZxvbnServiceForPSM()]
+  }
+];
diff --git a/frontend/src/app/routes/password-reset.routes.ts b/frontend/src/app/routes/password-reset.routes.ts
new file mode 100644
index 000000000..8cc370cbd
--- /dev/null
+++ b/frontend/src/app/routes/password-reset.routes.ts
@@ -0,0 +1,11 @@
+import { Routes } from '@angular/router';
+import { provideZxvbnServiceForPSM } from 'angular-password-strength-meter/zxcvbn';
+
+export const PASSWORD_RESET_ROUTES: Routes = [
+  {
+    path: '',
+    loadComponent: () => import('../components/password-reset/password-reset.component').then(m => m.PasswordResetComponent),
+    title: 'Reset password | Rocketadmin',
+    providers: [provideZxvbnServiceForPSM()]
+  }
+];
diff --git a/frontend/src/app/routes/registration.routes.ts b/frontend/src/app/routes/registration.routes.ts
new file mode 100644
index 000000000..b83cf5d27
--- /dev/null
+++ b/frontend/src/app/routes/registration.routes.ts
@@ -0,0 +1,11 @@
+import { Routes } from '@angular/router';
+import { provideZxvbnServiceForPSM } from 'angular-password-strength-meter/zxcvbn';
+
+export const REGISTRATION_ROUTES: Routes = [
+  {
+    path: '',
+    loadComponent: () => import('../components/registration/registration.component').then(m => m.RegistrationComponent),
+    title: 'Sign up | Rocketadmin',
+    providers: [provideZxvbnServiceForPSM()]
+  }
+];
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 1213eb3d9..dcc71a5b6 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -21,14 +21,12 @@ import { DynamicModule } from "ng-dynamic-component";
 import { EncodeUrlParamsSafelyInterceptor } from "./app/services/url-params.interceptor";
 import { NgxStripeModule } from "ngx-stripe";
 import { NotificationsService } from "./app/services/notifications.service";
-import { PasswordStrengthMeterComponent } from "angular-password-strength-meter";
 import { TablesService } from "./app/services/tables.service";
 import { TokenInterceptor } from "./app/services/token.interceptor";
 import { UsersService } from "./app/services/users.service";
 import { environment } from './environments/environment';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { provideAnimations } from "@angular/platform-browser/animations";
-import { provideZxvbnServiceForPSM } from "angular-password-strength-meter/zxcvbn";
 
 const saasExtraProviders = (environment as any).saas ? [
   {
@@ -84,7 +82,6 @@ bootstrapApplication(AppComponent, {
         provideCodeEditor({
           baseUrl: 'assets/monaco'
         }),
-        PasswordStrengthMeterComponent,
         ConnectionsService,
         UsersService,
         NotificationsService,
@@ -92,7 +89,6 @@ bootstrapApplication(AppComponent, {
         CookieService,
         provideMarkdown(),
         Title,
-        provideZxvbnServiceForPSM(),
         {
             provide: HTTP_INTERCEPTORS,
             useClass: TokenInterceptor,

From 80bd4fef325f34902e8335f48d3cce66649619c7 Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Fri, 12 Dec 2025 10:31:29 +0000
Subject: [PATCH 3/9] remove viewing secrets

---
 .../data-structures/found-secret.ds.ts        |   1 -
 .../data-structures/get-secret.ds.ts          |   1 -
 .../application/dto/found-secret.dto.ts       |   8 -
 .../use-cases/get-secret-by-slug.use.case.ts  |  37 +--
 .../user-secret/user-secret.controller.ts     |  13 +-
 .../utils/build-created-secret.dto.ts         |   1 -
 .../utils/build-found-secret.ds.ts            |   3 +-
 .../utils/build-found-secret.dto.ts           |   1 -
 .../utils/build-updated-secret.dto.ts         |   1 -
 .../edit-secret-dialog.component.css          |  84 ++-----
 .../edit-secret-dialog.component.html         |  73 ++----
 .../edit-secret-dialog.component.spec.ts      |  20 +-
 .../edit-secret-dialog.component.ts           |  64 ++---
 .../components/secrets/secrets.component.css  |   3 +-
 .../components/secrets/secrets.component.html |   9 +-
 .../components/secrets/secrets.component.ts   |  11 -
 .../view-secret-dialog.component.css          | 223 ------------------
 .../view-secret-dialog.component.html         | 111 ---------
 .../view-secret-dialog.component.spec.ts      |  81 -------
 .../view-secret-dialog.component.ts           | 111 ---------
 frontend/src/app/models/secret.ts             |   4 -
 frontend/src/app/services/secrets.service.ts  |  26 --
 22 files changed, 75 insertions(+), 811 deletions(-)
 delete mode 100644 frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.css
 delete mode 100644 frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.html
 delete mode 100644 frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.spec.ts
 delete mode 100644 frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.ts

diff --git a/backend/src/entities/user-secret/application/data-structures/found-secret.ds.ts b/backend/src/entities/user-secret/application/data-structures/found-secret.ds.ts
index 8e119df65..fbd6320ce 100644
--- a/backend/src/entities/user-secret/application/data-structures/found-secret.ds.ts
+++ b/backend/src/entities/user-secret/application/data-structures/found-secret.ds.ts
@@ -1,7 +1,6 @@
 export class FoundSecretDS {
   id: string;
   slug: string;
-  value?: string;
   companyId: string;
   createdAt: Date;
   updatedAt: Date;
diff --git a/backend/src/entities/user-secret/application/data-structures/get-secret.ds.ts b/backend/src/entities/user-secret/application/data-structures/get-secret.ds.ts
index 9ad4fcd6e..739d0d1c6 100644
--- a/backend/src/entities/user-secret/application/data-structures/get-secret.ds.ts
+++ b/backend/src/entities/user-secret/application/data-structures/get-secret.ds.ts
@@ -1,5 +1,4 @@
 export class GetSecretDS {
   userId: string;
   slug: string;
-  masterPassword?: string;
 }
diff --git a/backend/src/entities/user-secret/application/dto/found-secret.dto.ts b/backend/src/entities/user-secret/application/dto/found-secret.dto.ts
index 65d32668c..5bd60eb59 100644
--- a/backend/src/entities/user-secret/application/dto/found-secret.dto.ts
+++ b/backend/src/entities/user-secret/application/dto/found-secret.dto.ts
@@ -15,14 +15,6 @@ export class FoundSecretDto {
   })
   slug: string;
 
-  @ApiProperty({
-    type: String,
-    required: false,
-    description: 'Decrypted secret value (only included when retrieving a specific secret)',
-    example: 'my-secret-value-123',
-  })
-  value?: string;
-
   @ApiProperty({
     type: String,
     description: 'Company ID that owns this secret',
diff --git a/backend/src/entities/user-secret/use-cases/get-secret-by-slug.use.case.ts b/backend/src/entities/user-secret/use-cases/get-secret-by-slug.use.case.ts
index 3e73793da..1091a4b90 100644
--- a/backend/src/entities/user-secret/use-cases/get-secret-by-slug.use.case.ts
+++ b/backend/src/entities/user-secret/use-cases/get-secret-by-slug.use.case.ts
@@ -1,4 +1,4 @@
-import { ForbiddenException, GoneException, Inject, Injectable, NotFoundException, Scope } from '@nestjs/common';
+import { GoneException, Inject, Injectable, NotFoundException, Scope } from '@nestjs/common';
 import AbstractUseCase from '../../../common/abstract-use.case.js';
 import { BaseType } from '../../../common/data-injection.tokens.js';
 import { IGlobalDatabaseContext } from '../../../common/application/global-database-context.interface.js';
@@ -6,8 +6,6 @@ import { GetSecretDS } from '../application/data-structures/get-secret.ds.js';
 import { FoundSecretDS } from '../application/data-structures/found-secret.ds.js';
 import { IGetSecretBySlug } from './user-secret-use-cases.interface.js';
 import { buildFoundSecretDS } from '../utils/build-found-secret.ds.js';
-import { Encryptor } from '../../../helpers/encryption/encryptor.js';
-import { SecretActionEnum } from '../../secret-access-log/secret-access-log.entity.js';
 import { Messages } from '../../../exceptions/text/messages.js';
 
 @Injectable({ scope: Scope.REQUEST })
@@ -20,7 +18,7 @@ export class GetSecretBySlugUseCase extends AbstractUseCase<GetSecretDS, FoundSe
   }
 
   protected async implementation(inputData: GetSecretDS): Promise<FoundSecretDS> {
-    const { userId, slug, masterPassword } = inputData;
+    const { userId, slug } = inputData;
 
     const user = await this._dbContext.userRepository.findOne({
       where: { id: userId },
@@ -41,35 +39,6 @@ export class GetSecretBySlugUseCase extends AbstractUseCase<GetSecretDS, FoundSe
       throw new GoneException(Messages.SECRET_EXPIRED);
     }
 
-    if (secret.masterEncryption && !masterPassword) {
-      throw new ForbiddenException(Messages.SECRET_MASTER_PASSWORD_REQUIRED);
-    }
-
-    if (secret.masterEncryption && masterPassword) {
-      const isValid = await Encryptor.verifyUserPassword(masterPassword, secret.masterHash);
-      if (!isValid) {
-        await this._dbContext.secretAccessLogRepository.createAccessLog(
-          secret.id,
-          userId,
-          SecretActionEnum.VIEW,
-          false,
-          Messages.SECRET_MASTER_PASSWORD_INVALID,
-        );
-        throw new ForbiddenException(Messages.SECRET_MASTER_PASSWORD_INVALID);
-      }
-    }
-
-    secret.lastAccessedAt = new Date();
-    await this._dbContext.userSecretRepository.save(secret);
-
-    await this._dbContext.secretAccessLogRepository.createAccessLog(secret.id, userId, SecretActionEnum.VIEW);
-
-    let decryptedValue = Encryptor.decryptData(secret.encryptedValue);
-
-    if (secret.masterEncryption && masterPassword) {
-      decryptedValue = Encryptor.decryptDataMasterPwd(decryptedValue, masterPassword);
-    }
-
-    return buildFoundSecretDS(secret, decryptedValue);
+    return buildFoundSecretDS(secret);
   }
 }
diff --git a/backend/src/entities/user-secret/user-secret.controller.ts b/backend/src/entities/user-secret/user-secret.controller.ts
index abdd2ec76..668d0e04f 100644
--- a/backend/src/entities/user-secret/user-secret.controller.ts
+++ b/backend/src/entities/user-secret/user-secret.controller.ts
@@ -128,13 +128,9 @@ export class UserSecretController {
   @ApiOperation({ summary: 'Get secret by slug' })
   @ApiResponse({
     status: 200,
-    description: 'Returns secret details with decrypted value.',
+    description: 'Returns secret metadata (value is never exposed).',
     type: FoundSecretDto,
   })
-  @ApiResponse({
-    status: 403,
-    description: 'Master password required or incorrect.',
-  })
   @ApiResponse({
     status: 404,
     description: 'Secret or user not found.',
@@ -146,15 +142,10 @@ export class UserSecretController {
   @ApiParam({ name: 'slug', type: String, description: 'Unique secret identifier', example: 'database-password' })
   @UseGuards(CompanyUserGuard)
   @Get('/secrets/:slug')
-  async getSecretBySlug(
-    @UserId() userId: string,
-    @Param('slug') slug: string,
-    @MasterPassword() masterPassword?: string,
-  ): Promise<FoundSecretDto> {
+  async getSecretBySlug(@UserId() userId: string, @Param('slug') slug: string): Promise<FoundSecretDto> {
     const foundSecret = await this.getSecretBySlugUseCase.execute({
       userId,
       slug,
-      masterPassword,
     });
     return buildFoundSecretDto(foundSecret);
   }
diff --git a/backend/src/entities/user-secret/utils/build-created-secret.dto.ts b/backend/src/entities/user-secret/utils/build-created-secret.dto.ts
index fdfbdc9db..2e92ca020 100644
--- a/backend/src/entities/user-secret/utils/build-created-secret.dto.ts
+++ b/backend/src/entities/user-secret/utils/build-created-secret.dto.ts
@@ -5,7 +5,6 @@ export function buildCreatedSecretDto(ds: CreatedSecretDS): FoundSecretDto {
   return {
     id: ds.id,
     slug: ds.slug,
-    value: undefined,
     companyId: ds.companyId,
     createdAt: ds.createdAt,
     updatedAt: ds.updatedAt,
diff --git a/backend/src/entities/user-secret/utils/build-found-secret.ds.ts b/backend/src/entities/user-secret/utils/build-found-secret.ds.ts
index 898800d64..d51fc57cc 100644
--- a/backend/src/entities/user-secret/utils/build-found-secret.ds.ts
+++ b/backend/src/entities/user-secret/utils/build-found-secret.ds.ts
@@ -1,11 +1,10 @@
 import { FoundSecretDS } from '../application/data-structures/found-secret.ds.js';
 import { UserSecretEntity } from '../user-secret.entity.js';
 
-export function buildFoundSecretDS(secret: UserSecretEntity, decryptedValue?: string): FoundSecretDS {
+export function buildFoundSecretDS(secret: UserSecretEntity): FoundSecretDS {
   return {
     id: secret.id,
     slug: secret.slug,
-    value: decryptedValue,
     companyId: secret.companyId,
     createdAt: secret.createdAt,
     updatedAt: secret.updatedAt,
diff --git a/backend/src/entities/user-secret/utils/build-found-secret.dto.ts b/backend/src/entities/user-secret/utils/build-found-secret.dto.ts
index 81504154f..eb542c247 100644
--- a/backend/src/entities/user-secret/utils/build-found-secret.dto.ts
+++ b/backend/src/entities/user-secret/utils/build-found-secret.dto.ts
@@ -5,7 +5,6 @@ export function buildFoundSecretDto(ds: FoundSecretDS): FoundSecretDto {
   return {
     id: ds.id,
     slug: ds.slug,
-    value: ds.value,
     companyId: ds.companyId,
     createdAt: ds.createdAt,
     updatedAt: ds.updatedAt,
diff --git a/backend/src/entities/user-secret/utils/build-updated-secret.dto.ts b/backend/src/entities/user-secret/utils/build-updated-secret.dto.ts
index 3fd9dce0c..6826ca3ed 100644
--- a/backend/src/entities/user-secret/utils/build-updated-secret.dto.ts
+++ b/backend/src/entities/user-secret/utils/build-updated-secret.dto.ts
@@ -5,7 +5,6 @@ export function buildUpdatedSecretDto(ds: UpdatedSecretDS): FoundSecretDto {
   return {
     id: ds.id,
     slug: ds.slug,
-    value: undefined,
     companyId: ds.companyId,
     createdAt: ds.createdAt,
     updatedAt: ds.updatedAt,
diff --git a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.css b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.css
index 834733f9e..c796706b2 100644
--- a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.css
+++ b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.css
@@ -14,68 +14,7 @@ mat-dialog-content {
     margin-bottom: 16px;
 }
 
-.loading-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 40px;
-    text-align: center;
-}
-
-.loading-container p {
-    margin-top: 16px;
-    color: rgba(0, 0, 0, 0.54);
-}
-
-@media (prefers-color-scheme: dark) {
-    .loading-container p {
-        color: rgba(255, 255, 255, 0.54);
-    }
-}
-
-.master-password-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    padding: 24px;
-}
-
-.lock-icon {
-    font-size: 48px;
-    width: 48px;
-    height: 48px;
-    color: #1976d2;
-    margin-bottom: 16px;
-}
-
-@media (prefers-color-scheme: dark) {
-    .lock-icon {
-        color: #64b5f6;
-    }
-}
-
-.master-password-container h3 {
-    margin: 0 0 8px 0;
-}
-
-.master-password-container p {
-    color: rgba(0, 0, 0, 0.54);
-    margin: 0 0 24px 0;
-}
-
-@media (prefers-color-scheme: dark) {
-    .master-password-container p {
-        color: rgba(255, 255, 255, 0.54);
-    }
-}
-
-.expiration-section {
-    margin-bottom: 16px;
-}
-
-.encryption-note {
+.info-note {
     display: flex;
     align-items: flex-start;
     gap: 8px;
@@ -84,10 +23,10 @@ mat-dialog-content {
     border-radius: 8px;
     color: #1565c0;
     font-size: 14px;
-    margin-top: 16px;
+    margin-bottom: 20px;
 }
 
-.encryption-note mat-icon {
+.info-note mat-icon {
     font-size: 20px;
     width: 20px;
     height: 20px;
@@ -95,8 +34,23 @@ mat-dialog-content {
 }
 
 @media (prefers-color-scheme: dark) {
-    .encryption-note {
+    .info-note {
         background-color: rgba(100, 181, 246, 0.15);
         color: #64b5f6;
     }
 }
+
+.expiration-section {
+    margin-bottom: 16px;
+}
+
+.master-password-section {
+    margin-top: 16px;
+}
+
+.master-password-error {
+    color: #f44336;
+    font-size: 12px;
+    margin-top: -12px;
+    margin-bottom: 8px;
+}
diff --git a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.html b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.html
index 21b45dde8..ad737973c 100644
--- a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.html
+++ b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.html
@@ -1,54 +1,18 @@
 <h2 mat-dialog-title>Edit Secret: {{data.secret.slug}}</h2>
 
 <mat-dialog-content>
-    <!-- Loading State -->
-    <div *ngIf="loading" class="loading-container">
-        <mat-spinner diameter="40"></mat-spinner>
-        <p>Loading secret...</p>
-    </div>
-
-    <!-- Master Password Required -->
-    <div *ngIf="!loading && requiresMasterPassword" class="master-password-container">
-        <mat-icon class="lock-icon">enhanced_encryption</mat-icon>
-        <h3>Master Password Required</h3>
-        <p>This secret is protected with master password encryption.</p>
-
-        <mat-form-field appearance="outline" class="full-width">
-            <mat-label>Master Password</mat-label>
-            <input matInput
-                [(ngModel)]="masterPassword"
-                [type]="showMasterPassword ? 'text' : 'password'"
-                (keyup.enter)="submitMasterPassword()"
-                placeholder="Enter master password"
-                data-testid="edit-secret-master-password-input">
-            <button mat-icon-button matSuffix type="button"
-                (click)="toggleMasterPasswordVisibility()"
-                [matTooltip]="showMasterPassword ? 'Hide password' : 'Show password'">
-                <mat-icon>{{showMasterPassword ? 'visibility_off' : 'visibility'}}</mat-icon>
-            </button>
-            <mat-error *ngIf="masterPasswordError">{{masterPasswordError}}</mat-error>
-        </mat-form-field>
-
-        <button mat-flat-button color="primary"
-            (click)="submitMasterPassword()"
-            data-testid="edit-secret-unlock-button">
-            <mat-icon>lock_open</mat-icon>
-            Unlock Secret
-        </button>
-    </div>
-
-    <!-- Edit Form -->
-    <form *ngIf="!loading && !requiresMasterPassword"
-        [formGroup]="form"
-        (ngSubmit)="onSubmit()"
-        id="editSecretForm">
+    <form [formGroup]="form" (ngSubmit)="onSubmit()" id="editSecretForm">
+        <p class="info-note">
+            <mat-icon>info</mat-icon>
+            Enter a new value for this secret. The current value cannot be viewed for security reasons.
+        </p>
 
         <mat-form-field appearance="outline" class="full-width">
-            <mat-label>Secret Value</mat-label>
+            <mat-label>New Secret Value</mat-label>
             <textarea matInput formControlName="value"
                 [type]="showValue ? 'text' : 'password'"
                 rows="4"
-                placeholder="Enter your secret value"
+                placeholder="Enter new secret value"
                 data-testid="edit-secret-value-input"></textarea>
             <button mat-icon-button matSuffix type="button"
                 (click)="toggleValueVisibility()"
@@ -76,17 +40,30 @@ <h3>Master Password Required</h3>
             </mat-checkbox>
         </div>
 
-        <p *ngIf="data.secret.masterEncryption" class="encryption-note">
-            <mat-icon>info</mat-icon>
-            This secret uses master password encryption. Your changes will be encrypted with the same master password.
-        </p>
+        <div *ngIf="data.secret.masterEncryption" class="master-password-section">
+            <mat-form-field appearance="outline" class="full-width">
+                <mat-label>Master Password</mat-label>
+                <input matInput
+                    [(ngModel)]="masterPassword"
+                    [ngModelOptions]="{standalone: true}"
+                    [type]="showMasterPassword ? 'text' : 'password'"
+                    placeholder="Enter master password to save changes"
+                    data-testid="edit-secret-master-password-input">
+                <button mat-icon-button matSuffix type="button"
+                    (click)="toggleMasterPasswordVisibility()"
+                    [matTooltip]="showMasterPassword ? 'Hide password' : 'Show password'">
+                    <mat-icon>{{showMasterPassword ? 'visibility_off' : 'visibility'}}</mat-icon>
+                </button>
+                <mat-hint>Required to encrypt the new value</mat-hint>
+            </mat-form-field>
+            <mat-error *ngIf="masterPasswordError" class="master-password-error">{{masterPasswordError}}</mat-error>
+        </div>
     </form>
 </mat-dialog-content>
 
 <mat-dialog-actions align="end">
     <button mat-button mat-dialog-close [disabled]="submitting">Cancel</button>
     <button mat-flat-button color="primary"
-        *ngIf="!loading && !requiresMasterPassword"
         type="submit"
         form="editSecretForm"
         [disabled]="form.invalid || submitting"
diff --git a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.spec.ts b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.spec.ts
index c1a4c8eec..54d89840f 100644
--- a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.spec.ts
+++ b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.spec.ts
@@ -26,11 +26,7 @@ describe('EditSecretDialogComponent', () => {
   };
 
   beforeEach(async () => {
-    mockSecretsService = jasmine.createSpyObj('SecretsService', ['getSecret', 'updateSecret']);
-    mockSecretsService.getSecret.and.returnValue(of({
-      ...mockSecret,
-      value: 'secret-value',
-    }));
+    mockSecretsService = jasmine.createSpyObj('SecretsService', ['updateSecret']);
     mockSecretsService.updateSecret.and.returnValue(of(mockSecret));
 
     mockDialogRef = jasmine.createSpyObj('MatDialogRef', ['close']);
@@ -60,12 +56,8 @@ describe('EditSecretDialogComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should load secret on init', () => {
-    expect(mockSecretsService.getSecret).toHaveBeenCalledWith('test-secret', undefined);
-  });
-
-  it('should populate form with secret value', () => {
-    expect(component.form.get('value')?.value).toBe('secret-value');
+  it('should initialize form with empty value', () => {
+    expect(component.form.get('value')?.value).toBe('');
   });
 
   it('should submit updated secret', () => {
@@ -73,4 +65,10 @@ describe('EditSecretDialogComponent', () => {
     component.onSubmit();
     expect(mockSecretsService.updateSecret).toHaveBeenCalled();
   });
+
+  it('should require value field', () => {
+    expect(component.form.get('value')?.valid).toBeFalse();
+    component.form.patchValue({ value: 'some-value' });
+    expect(component.form.get('value')?.valid).toBeTrue();
+  });
 });
diff --git a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.ts b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.ts
index 7e969ca9b..8e7a8e393 100644
--- a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.ts
+++ b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
@@ -9,12 +9,11 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { Angulartics2 } from 'angulartics2';
 
 import { SecretsService } from 'src/app/services/secrets.service';
-import { Secret, SecretWithValue } from 'src/app/models/secret';
+import { Secret } from 'src/app/models/secret';
 
 @Component({
   selector: 'app-edit-secret-dialog',
@@ -32,20 +31,16 @@ import { Secret, SecretWithValue } from 'src/app/models/secret';
     MatNativeDateModule,
     MatIconModule,
     MatCheckboxModule,
-    MatProgressSpinnerModule,
     MatTooltipModule,
   ]
 })
-export class EditSecretDialogComponent implements OnInit {
+export class EditSecretDialogComponent {
   public form: FormGroup;
-  public loading = true;
   public submitting = false;
   public showValue = false;
-  public requiresMasterPassword = false;
   public masterPassword = '';
   public masterPasswordError = '';
   public showMasterPassword = false;
-  public currentSecret: SecretWithValue | null = null;
   public clearExpiration = false;
   public minDate = new Date();
 
@@ -58,49 +53,10 @@ export class EditSecretDialogComponent implements OnInit {
   ) {
     this.form = this.fb.group({
       value: ['', [Validators.required, Validators.maxLength(10000)]],
-      expiresAt: [null],
+      expiresAt: [data.secret.expiresAt ? new Date(data.secret.expiresAt) : null],
     });
   }
 
-  ngOnInit(): void {
-    this.loadSecret();
-  }
-
-  loadSecret(masterPassword?: string): void {
-    this.loading = true;
-    this.masterPasswordError = '';
-
-    this._secrets.getSecret(this.data.secret.slug, masterPassword).subscribe({
-      next: (secret) => {
-        this.currentSecret = secret;
-        this.form.patchValue({
-          value: secret.value,
-          expiresAt: secret.expiresAt ? new Date(secret.expiresAt) : null,
-        });
-        this.loading = false;
-        this.requiresMasterPassword = false;
-        this.masterPassword = masterPassword || '';
-      },
-      error: (err) => {
-        this.loading = false;
-        if (err.status === 403) {
-          this.requiresMasterPassword = true;
-          if (masterPassword) {
-            this.masterPasswordError = 'Invalid master password';
-          }
-        }
-      }
-    });
-  }
-
-  submitMasterPassword(): void {
-    if (!this.masterPassword) {
-      this.masterPasswordError = 'Please enter the master password';
-      return;
-    }
-    this.loadSecret(this.masterPassword);
-  }
-
   toggleValueVisibility(): void {
     this.showValue = !this.showValue;
   }
@@ -111,7 +67,7 @@ export class EditSecretDialogComponent implements OnInit {
 
   get valueError(): string {
     const control = this.form.get('value');
-    if (control?.hasError('required')) return 'Value is required';
+    if (control?.hasError('required')) return 'New value is required';
     if (control?.hasError('maxlength')) return 'Value must be 10000 characters or less';
     return '';
   }
@@ -128,6 +84,11 @@ export class EditSecretDialogComponent implements OnInit {
   onSubmit(): void {
     if (this.form.invalid) return;
 
+    if (this.data.secret.masterEncryption && !this.masterPassword) {
+      this.masterPasswordError = 'Master password is required';
+      return;
+    }
+
     this.submitting = true;
     const formValue = this.form.getRawValue();
 
@@ -150,8 +111,11 @@ export class EditSecretDialogComponent implements OnInit {
         this.submitting = false;
         this.dialogRef.close(true);
       },
-      error: () => {
+      error: (err) => {
         this.submitting = false;
+        if (err.status === 403) {
+          this.masterPasswordError = 'Invalid master password';
+        }
       }
     });
   }
diff --git a/frontend/src/app/components/secrets/secrets.component.css b/frontend/src/app/components/secrets/secrets.component.css
index 3e3c46754..c62246a46 100644
--- a/frontend/src/app/components/secrets/secrets.component.css
+++ b/frontend/src/app/components/secrets/secrets.component.css
@@ -59,8 +59,7 @@
     max-width: 250px;
 }
 
-.slug-button {
-    text-transform: none;
+.slug-text {
     font-weight: 500;
 }
 
diff --git a/frontend/src/app/components/secrets/secrets.component.html b/frontend/src/app/components/secrets/secrets.component.html
index 9b670d24c..6cea1138b 100644
--- a/frontend/src/app/components/secrets/secrets.component.html
+++ b/frontend/src/app/components/secrets/secrets.component.html
@@ -48,9 +48,7 @@ <h3>No secrets found</h3>
                 class="secrets-cell secrets-cell_slug"
                 data-label="Slug"
                 attr.data-testid="secret-slug-{{i}}-cell">
-                <button mat-button color="primary" (click)="openViewDialog(secret)" class="slug-button">
-                    {{secret.slug}}
-                </button>
+                <span class="slug-text">{{secret.slug}}</span>
             </td>
         </ng-container>
 
@@ -117,11 +115,6 @@ <h3>No secrets found</h3>
                     <mat-icon>more_vert</mat-icon>
                 </button>
                 <mat-menu #actionsMenu="matMenu">
-                    <button mat-menu-item (click)="openViewDialog(secret)"
-                        attr.data-testid="secret-view-{{i}}-menu-item">
-                        <mat-icon>visibility</mat-icon>
-                        <span>View</span>
-                    </button>
                     <button mat-menu-item (click)="openEditDialog(secret)"
                         [disabled]="isExpired(secret)"
                         attr.data-testid="secret-edit-{{i}}-menu-item">
diff --git a/frontend/src/app/components/secrets/secrets.component.ts b/frontend/src/app/components/secrets/secrets.component.ts
index 63483a087..f060706df 100644
--- a/frontend/src/app/components/secrets/secrets.component.ts
+++ b/frontend/src/app/components/secrets/secrets.component.ts
@@ -21,7 +21,6 @@ import { SecretsService } from 'src/app/services/secrets.service';
 import { CompanyService } from 'src/app/services/company.service';
 import { Secret, SecretPagination } from 'src/app/models/secret';
 import { CreateSecretDialogComponent } from './create-secret-dialog/create-secret-dialog.component';
-import { ViewSecretDialogComponent } from './view-secret-dialog/view-secret-dialog.component';
 import { EditSecretDialogComponent } from './edit-secret-dialog/edit-secret-dialog.component';
 import { DeleteSecretDialogComponent } from './delete-secret-dialog/delete-secret-dialog.component';
 import { AuditLogDialogComponent } from './audit-log-dialog/audit-log-dialog.component';
@@ -147,16 +146,6 @@ export class SecretsComponent implements OnInit, OnDestroy {
     });
   }
 
-  openViewDialog(secret: Secret): void {
-    this.dialog.open(ViewSecretDialogComponent, {
-      width: '600px',
-      data: { secret },
-    });
-    this.angulartics2.eventTrack.next({
-      action: 'Secrets: view secret dialog opened',
-    });
-  }
-
   openEditDialog(secret: Secret): void {
     this.dialog.open(EditSecretDialogComponent, {
       width: '500px',
diff --git a/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.css b/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.css
deleted file mode 100644
index 1f269dac5..000000000
--- a/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.css
+++ /dev/null
@@ -1,223 +0,0 @@
-h2[mat-dialog-title] {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.title-icon {
-    color: rgba(0, 0, 0, 0.54);
-}
-
-@media (prefers-color-scheme: dark) {
-    .title-icon {
-        color: rgba(255, 255, 255, 0.7);
-    }
-}
-
-mat-dialog-content {
-    min-width: 500px;
-    min-height: 200px;
-}
-
-@media (width <= 600px) {
-    mat-dialog-content {
-        min-width: auto;
-    }
-}
-
-.loading-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 40px;
-    text-align: center;
-}
-
-.loading-container p {
-    margin-top: 16px;
-    color: rgba(0, 0, 0, 0.54);
-}
-
-@media (prefers-color-scheme: dark) {
-    .loading-container p {
-        color: rgba(255, 255, 255, 0.54);
-    }
-}
-
-.master-password-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    padding: 24px;
-}
-
-.lock-icon {
-    font-size: 48px;
-    width: 48px;
-    height: 48px;
-    color: #1976d2;
-    margin-bottom: 16px;
-}
-
-@media (prefers-color-scheme: dark) {
-    .lock-icon {
-        color: #64b5f6;
-    }
-}
-
-.master-password-container h3 {
-    margin: 0 0 8px 0;
-}
-
-.master-password-container p {
-    color: rgba(0, 0, 0, 0.54);
-    margin: 0 0 24px 0;
-}
-
-@media (prefers-color-scheme: dark) {
-    .master-password-container p {
-        color: rgba(255, 255, 255, 0.54);
-    }
-}
-
-.full-width {
-    width: 100%;
-    max-width: 300px;
-}
-
-.secret-details {
-    padding: 8px 0;
-}
-
-.expired-warning {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 12px 16px;
-    background-color: #ffebee;
-    color: #c62828;
-    border-radius: 8px;
-    margin-bottom: 24px;
-}
-
-@media (prefers-color-scheme: dark) {
-    .expired-warning {
-        background-color: rgba(198, 40, 40, 0.2);
-        color: #ef5350;
-    }
-}
-
-.value-section {
-    margin-bottom: 24px;
-}
-
-.section-label {
-    display: block;
-    font-size: 12px;
-    font-weight: 500;
-    color: rgba(0, 0, 0, 0.54);
-    margin-bottom: 8px;
-    text-transform: uppercase;
-}
-
-@media (prefers-color-scheme: dark) {
-    .section-label {
-        color: rgba(255, 255, 255, 0.54);
-    }
-}
-
-.value-container {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-    background-color: rgba(0, 0, 0, 0.04);
-    border-radius: 8px;
-    padding: 12px 16px;
-}
-
-@media (prefers-color-scheme: dark) {
-    .value-container {
-        background-color: rgba(255, 255, 255, 0.08);
-    }
-}
-
-.value-display {
-    flex: 1;
-    font-family: monospace;
-    word-break: break-all;
-    white-space: pre-wrap;
-}
-
-.value-display.masked {
-    letter-spacing: 2px;
-}
-
-.value-actions {
-    display: flex;
-    flex-shrink: 0;
-}
-
-.metadata-section {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 16px;
-}
-
-@media (width <= 600px) {
-    .metadata-section {
-        grid-template-columns: 1fr;
-    }
-}
-
-.metadata-item {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.metadata-item label {
-    font-size: 12px;
-    font-weight: 500;
-    color: rgba(0, 0, 0, 0.54);
-    text-transform: uppercase;
-}
-
-@media (prefers-color-scheme: dark) {
-    .metadata-item label {
-        color: rgba(255, 255, 255, 0.54);
-    }
-}
-
-.metadata-item span {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-}
-
-.metadata-item mat-icon {
-    font-size: 18px;
-    width: 18px;
-    height: 18px;
-}
-
-.no-expiry {
-    color: rgba(0, 0, 0, 0.38);
-}
-
-@media (prefers-color-scheme: dark) {
-    .no-expiry {
-        color: rgba(255, 255, 255, 0.38);
-    }
-}
-
-.master-encrypted {
-    color: #1976d2;
-}
-
-@media (prefers-color-scheme: dark) {
-    .master-encrypted {
-        color: #64b5f6;
-    }
-}
diff --git a/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.html b/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.html
deleted file mode 100644
index 8e8a6b453..000000000
--- a/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.html
+++ /dev/null
@@ -1,111 +0,0 @@
-<h2 mat-dialog-title>
-    <mat-icon class="title-icon">key</mat-icon>
-    {{data.secret.slug}}
-</h2>
-
-<mat-dialog-content>
-    <!-- Loading State -->
-    <div *ngIf="loading" class="loading-container">
-        <mat-spinner diameter="40"></mat-spinner>
-        <p>Loading secret...</p>
-    </div>
-
-    <!-- Master Password Required -->
-    <div *ngIf="!loading && requiresMasterPassword" class="master-password-container">
-        <mat-icon class="lock-icon">enhanced_encryption</mat-icon>
-        <h3>Master Password Required</h3>
-        <p>This secret is protected with master password encryption.</p>
-
-        <mat-form-field appearance="outline" class="full-width">
-            <mat-label>Master Password</mat-label>
-            <input matInput
-                [(ngModel)]="masterPassword"
-                [type]="showMasterPassword ? 'text' : 'password'"
-                (keyup.enter)="submitMasterPassword()"
-                placeholder="Enter master password"
-                data-testid="view-secret-master-password-input">
-            <button mat-icon-button matSuffix type="button"
-                (click)="toggleMasterPasswordVisibility()"
-                [matTooltip]="showMasterPassword ? 'Hide password' : 'Show password'">
-                <mat-icon>{{showMasterPassword ? 'visibility_off' : 'visibility'}}</mat-icon>
-            </button>
-            <mat-error *ngIf="masterPasswordError">{{masterPasswordError}}</mat-error>
-        </mat-form-field>
-
-        <button mat-flat-button color="primary"
-            (click)="submitMasterPassword()"
-            data-testid="view-secret-unlock-button">
-            <mat-icon>lock_open</mat-icon>
-            Unlock Secret
-        </button>
-    </div>
-
-    <!-- Secret Details -->
-    <div *ngIf="!loading && !requiresMasterPassword && secret" class="secret-details">
-        <!-- Expired Warning -->
-        <div *ngIf="isExpired()" class="expired-warning">
-            <mat-icon>error</mat-icon>
-            <span>This secret has expired on {{secret.expiresAt | date:'medium'}}</span>
-        </div>
-
-        <!-- Secret Value -->
-        <div class="value-section">
-            <label class="section-label">Secret Value</label>
-            <div class="value-container">
-                <div class="value-display" [class.masked]="!showValue">
-                    {{showValue ? secret.value : '••••••••••••••••••••'}}
-                </div>
-                <div class="value-actions">
-                    <button mat-icon-button
-                        (click)="toggleValueVisibility()"
-                        [matTooltip]="showValue ? 'Hide value' : 'Show value'"
-                        data-testid="view-secret-toggle-visibility">
-                        <mat-icon>{{showValue ? 'visibility_off' : 'visibility'}}</mat-icon>
-                    </button>
-                    <button mat-icon-button
-                        (click)="copyToClipboard()"
-                        matTooltip="Copy to clipboard"
-                        data-testid="view-secret-copy-button">
-                        <mat-icon>content_copy</mat-icon>
-                    </button>
-                </div>
-            </div>
-        </div>
-
-        <!-- Metadata -->
-        <div class="metadata-section">
-            <div class="metadata-item">
-                <label>Created</label>
-                <span>{{secret.createdAt | date:'medium'}}</span>
-            </div>
-            <div class="metadata-item">
-                <label>Last Updated</label>
-                <span>{{secret.updatedAt | date:'medium'}}</span>
-            </div>
-            <div class="metadata-item" *ngIf="secret.lastAccessedAt">
-                <label>Last Accessed</label>
-                <span>{{secret.lastAccessedAt | date:'medium'}}</span>
-            </div>
-            <div class="metadata-item">
-                <label>Expires</label>
-                <span *ngIf="secret.expiresAt">{{secret.expiresAt | date:'medium'}}</span>
-                <span *ngIf="!secret.expiresAt" class="no-expiry">Never</span>
-            </div>
-            <div class="metadata-item">
-                <label>Encryption</label>
-                <span *ngIf="secret.masterEncryption" class="master-encrypted">
-                    <mat-icon>enhanced_encryption</mat-icon>
-                    Master password protected
-                </span>
-                <span *ngIf="!secret.masterEncryption">
-                    <mat-icon>lock</mat-icon>
-                    Standard encryption
-                </span>
-            </div>
-        </div>
-    </div>
-</mat-dialog-content>
-
-<mat-dialog-actions align="end">
-    <button mat-button mat-dialog-close data-testid="view-secret-close-button">Close</button>
-</mat-dialog-actions>
diff --git a/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.spec.ts b/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.spec.ts
deleted file mode 100644
index dc5df37ad..000000000
--- a/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.spec.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { provideHttpClient } from '@angular/common/http';
-import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { Angulartics2Module } from 'angulartics2';
-import { of } from 'rxjs';
-
-import { ViewSecretDialogComponent } from './view-secret-dialog.component';
-import { SecretsService } from 'src/app/services/secrets.service';
-import { NotificationsService } from 'src/app/services/notifications.service';
-
-describe('ViewSecretDialogComponent', () => {
-  let component: ViewSecretDialogComponent;
-  let fixture: ComponentFixture<ViewSecretDialogComponent>;
-  let mockSecretsService: jasmine.SpyObj<SecretsService>;
-  let mockNotificationsService: jasmine.SpyObj<NotificationsService>;
-  let mockDialogRef: jasmine.SpyObj<MatDialogRef<ViewSecretDialogComponent>>;
-
-  const mockSecret = {
-    id: '1',
-    slug: 'test-secret',
-    companyId: '1',
-    createdAt: '2024-01-01',
-    updatedAt: '2024-01-01',
-    masterEncryption: false,
-  };
-
-  beforeEach(async () => {
-    mockSecretsService = jasmine.createSpyObj('SecretsService', ['getSecret']);
-    mockSecretsService.getSecret.and.returnValue(of({
-      ...mockSecret,
-      value: 'secret-value',
-    }));
-
-    mockNotificationsService = jasmine.createSpyObj('NotificationsService', ['showSuccessSnackbar']);
-    mockDialogRef = jasmine.createSpyObj('MatDialogRef', ['close']);
-
-    await TestBed.configureTestingModule({
-      imports: [
-        ViewSecretDialogComponent,
-        BrowserAnimationsModule,
-        MatSnackBarModule,
-        Angulartics2Module.forRoot(),
-      ],
-      providers: [
-        provideHttpClient(),
-        provideHttpClientTesting(),
-        { provide: SecretsService, useValue: mockSecretsService },
-        { provide: NotificationsService, useValue: mockNotificationsService },
-        { provide: MatDialogRef, useValue: mockDialogRef },
-        { provide: MAT_DIALOG_DATA, useValue: { secret: mockSecret } },
-      ]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ViewSecretDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should load secret on init', () => {
-    expect(mockSecretsService.getSecret).toHaveBeenCalledWith('test-secret', undefined);
-  });
-
-  it('should toggle value visibility', () => {
-    expect(component.showValue).toBeFalse();
-    component.toggleValueVisibility();
-    expect(component.showValue).toBeTrue();
-  });
-
-  it('should copy to clipboard', () => {
-    component.secret = { ...mockSecret, value: 'secret-value' };
-    component.copyToClipboard();
-    expect(mockNotificationsService.showSuccessSnackbar).toHaveBeenCalledWith('Secret copied to clipboard');
-  });
-});
diff --git a/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.ts b/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.ts
deleted file mode 100644
index a7a12120e..000000000
--- a/frontend/src/app/components/secrets/view-secret-dialog/view-secret-dialog.component.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { Component, Inject, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
-import { MatButtonModule } from '@angular/material/button';
-import { MatInputModule } from '@angular/material/input';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { Clipboard } from '@angular/cdk/clipboard';
-import { Angulartics2 } from 'angulartics2';
-
-import { SecretsService } from 'src/app/services/secrets.service';
-import { NotificationsService } from 'src/app/services/notifications.service';
-import { Secret, SecretWithValue } from 'src/app/models/secret';
-
-@Component({
-  selector: 'app-view-secret-dialog',
-  templateUrl: './view-secret-dialog.component.html',
-  styleUrls: ['./view-secret-dialog.component.css'],
-  imports: [
-    CommonModule,
-    FormsModule,
-    MatDialogModule,
-    MatButtonModule,
-    MatInputModule,
-    MatFormFieldModule,
-    MatIconModule,
-    MatProgressSpinnerModule,
-    MatTooltipModule,
-  ]
-})
-export class ViewSecretDialogComponent implements OnInit {
-  public secret: SecretWithValue | null = null;
-  public loading = true;
-  public showValue = false;
-  public requiresMasterPassword = false;
-  public masterPassword = '';
-  public masterPasswordError = '';
-  public showMasterPassword = false;
-
-  constructor(
-    @Inject(MAT_DIALOG_DATA) public data: { secret: Secret },
-    private dialogRef: MatDialogRef<ViewSecretDialogComponent>,
-    private _secrets: SecretsService,
-    private _notifications: NotificationsService,
-    private clipboard: Clipboard,
-    private angulartics2: Angulartics2
-  ) {}
-
-  ngOnInit(): void {
-    this.loadSecret();
-  }
-
-  loadSecret(masterPassword?: string): void {
-    this.loading = true;
-    this.masterPasswordError = '';
-
-    this._secrets.getSecret(this.data.secret.slug, masterPassword).subscribe({
-      next: (secret) => {
-        this.secret = secret;
-        this.loading = false;
-        this.requiresMasterPassword = false;
-        this.angulartics2.eventTrack.next({
-          action: 'Secrets: secret viewed',
-        });
-      },
-      error: (err) => {
-        this.loading = false;
-        if (err.status === 403) {
-          this.requiresMasterPassword = true;
-          if (masterPassword) {
-            this.masterPasswordError = 'Invalid master password';
-          }
-        }
-      }
-    });
-  }
-
-  submitMasterPassword(): void {
-    if (!this.masterPassword) {
-      this.masterPasswordError = 'Please enter the master password';
-      return;
-    }
-    this.loadSecret(this.masterPassword);
-  }
-
-  toggleValueVisibility(): void {
-    this.showValue = !this.showValue;
-  }
-
-  toggleMasterPasswordVisibility(): void {
-    this.showMasterPassword = !this.showMasterPassword;
-  }
-
-  copyToClipboard(): void {
-    if (this.secret?.value) {
-      this.clipboard.copy(this.secret.value);
-      this._notifications.showSuccessSnackbar('Secret copied to clipboard');
-      this.angulartics2.eventTrack.next({
-        action: 'Secrets: secret copied to clipboard',
-      });
-    }
-  }
-
-  isExpired(): boolean {
-    if (!this.secret?.expiresAt) return false;
-    return new Date(this.secret.expiresAt) < new Date();
-  }
-}
diff --git a/frontend/src/app/models/secret.ts b/frontend/src/app/models/secret.ts
index 5aeb715b2..4bdff7ca7 100644
--- a/frontend/src/app/models/secret.ts
+++ b/frontend/src/app/models/secret.ts
@@ -9,10 +9,6 @@ export interface Secret {
   masterEncryption: boolean;
 }
 
-export interface SecretWithValue extends Secret {
-  value: string;
-}
-
 export interface SecretListResponse {
   data: Secret[];
   pagination: SecretPagination;
diff --git a/frontend/src/app/services/secrets.service.ts b/frontend/src/app/services/secrets.service.ts
index 0e93f81e9..3254c9ac0 100644
--- a/frontend/src/app/services/secrets.service.ts
+++ b/frontend/src/app/services/secrets.service.ts
@@ -5,7 +5,6 @@ import { catchError, map } from 'rxjs/operators';
 import { NotificationsService } from './notifications.service';
 import {
   Secret,
-  SecretWithValue,
   SecretListResponse,
   AuditLogResponse,
   CreateSecretPayload,
@@ -45,31 +44,6 @@ export class SecretsService {
       );
   }
 
-  getSecret(slug: string, masterPassword?: string): Observable<SecretWithValue> {
-    let headers = new HttpHeaders();
-    if (masterPassword) {
-      headers = headers.set('masterPassword', masterPassword);
-    }
-
-    return this._http.get<SecretWithValue>(`/secrets/${slug}`, { headers })
-      .pipe(
-        map(res => res),
-        catchError((err) => {
-          console.log(err);
-          if (err.status === 403) {
-            // Master password required or invalid - let component handle
-            return throwError(() => err);
-          }
-          if (err.status === 410) {
-            this._notifications.showErrorSnackbar('This secret has expired');
-          } else {
-            this._notifications.showErrorSnackbar(err.error?.message || 'Failed to fetch secret');
-          }
-          return EMPTY;
-        })
-      );
-  }
-
   createSecret(payload: CreateSecretPayload): Observable<Secret> {
     return this._http.post<Secret>('/secrets', payload)
       .pipe(

From 0d8fe7f22205bf26465d491ca08cf028e0f2ba13 Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Fri, 12 Dec 2025 10:51:19 +0000
Subject: [PATCH 4/9] date picker ui fix

---
 .../create-secret-dialog.component.ts                  |  4 ++--
 .../edit-secret-dialog/edit-secret-dialog.component.ts |  4 ++--
 frontend/src/custom-theme.scss                         | 10 ++++++++++
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.ts b/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.ts
index 9ca3dd9f5..2b052589c 100644
--- a/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.ts
+++ b/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.ts
@@ -7,7 +7,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatNativeDateModule } from '@angular/material/core';
+import { provideNativeDateAdapter } from '@angular/material/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { Angulartics2 } from 'angulartics2';
@@ -18,6 +18,7 @@ import { SecretsService } from 'src/app/services/secrets.service';
   selector: 'app-create-secret-dialog',
   templateUrl: './create-secret-dialog.component.html',
   styleUrls: ['./create-secret-dialog.component.css'],
+  providers: [provideNativeDateAdapter()],
   imports: [
     CommonModule,
     FormsModule,
@@ -28,7 +29,6 @@ import { SecretsService } from 'src/app/services/secrets.service';
     MatFormFieldModule,
     MatCheckboxModule,
     MatDatepickerModule,
-    MatNativeDateModule,
     MatIconModule,
     MatTooltipModule,
   ]
diff --git a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.ts b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.ts
index 8e7a8e393..0bff581eb 100644
--- a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.ts
+++ b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.ts
@@ -6,7 +6,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatNativeDateModule } from '@angular/material/core';
+import { provideNativeDateAdapter } from '@angular/material/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -19,6 +19,7 @@ import { Secret } from 'src/app/models/secret';
   selector: 'app-edit-secret-dialog',
   templateUrl: './edit-secret-dialog.component.html',
   styleUrls: ['./edit-secret-dialog.component.css'],
+  providers: [provideNativeDateAdapter()],
   imports: [
     CommonModule,
     FormsModule,
@@ -28,7 +29,6 @@ import { Secret } from 'src/app/models/secret';
     MatInputModule,
     MatFormFieldModule,
     MatDatepickerModule,
-    MatNativeDateModule,
     MatIconModule,
     MatCheckboxModule,
     MatTooltipModule,
diff --git a/frontend/src/custom-theme.scss b/frontend/src/custom-theme.scss
index 173a13add..697e8e938 100644
--- a/frontend/src/custom-theme.scss
+++ b/frontend/src/custom-theme.scss
@@ -31,6 +31,11 @@ html {
     --mat-table-background-color: #202020 !important;
     --mat-paginator-container-background-color: #202020 !important;
   }
+
+  .mat-datepicker-content {
+    --mat-datepicker-calendar-date-hover-state-background-color: rgba(255, 255, 255, 0.1) !important;
+    --mat-datepicker-calendar-date-focus-state-background-color: rgba(255, 255, 255, 0.1) !important;
+  }
 }
 
 // .main-menu-container_native .mat-mdc-unelevated-button.mat-accent {
@@ -38,6 +43,11 @@ html {
 // }
 
 @media (prefers-color-scheme: light) {
+  .mat-datepicker-content {
+    --mat-datepicker-calendar-date-hover-state-background-color: rgba(0, 0, 0, 0.04) !important;
+    --mat-datepicker-calendar-date-focus-state-background-color: rgba(0, 0, 0, 0.04) !important;
+  }
+
   .main-menu-container_native .mat-mdc-unelevated-button.mat-accent {
     --mdc-filled-button-label-text-color: #fff !important;
   }

From bed87ef5521f7ba94c6e328de609a8894dc547e9 Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Fri, 12 Dec 2025 10:57:32 +0000
Subject: [PATCH 5/9] properly mask passwords

---
 .../create-secret-dialog/create-secret-dialog.component.css   | 4 ++++
 .../create-secret-dialog/create-secret-dialog.component.html  | 4 +++-
 .../edit-secret-dialog/edit-secret-dialog.component.css       | 4 ++++
 .../edit-secret-dialog/edit-secret-dialog.component.html      | 4 +++-
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.css b/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.css
index dc1a95544..8a7f2ee2f 100644
--- a/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.css
+++ b/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.css
@@ -37,3 +37,7 @@ mat-dialog-content {
         min-width: auto;
     }
 }
+
+.secret-masked {
+    -webkit-text-security: disc;
+}
diff --git a/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.html b/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.html
index 2cacc5729..5b6ac3a45 100644
--- a/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.html
+++ b/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.html
@@ -14,9 +14,11 @@ <h2 mat-dialog-title>Create Secret</h2>
         <mat-form-field appearance="outline" class="full-width">
             <mat-label>Secret Value</mat-label>
             <textarea matInput formControlName="value"
-                [type]="showValue ? 'text' : 'password'"
+                [class.secret-masked]="!showValue"
                 rows="3"
                 placeholder="Enter your secret value"
+                spellcheck="false"
+                autocomplete="off"
                 data-testid="create-secret-value-input"></textarea>
             <button mat-icon-button matSuffix type="button"
                 (click)="toggleValueVisibility()"
diff --git a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.css b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.css
index c796706b2..8471b4629 100644
--- a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.css
+++ b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.css
@@ -54,3 +54,7 @@ mat-dialog-content {
     margin-top: -12px;
     margin-bottom: 8px;
 }
+
+.secret-masked {
+    -webkit-text-security: disc;
+}
diff --git a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.html b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.html
index ad737973c..bcd9e00fb 100644
--- a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.html
+++ b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.html
@@ -10,9 +10,11 @@ <h2 mat-dialog-title>Edit Secret: {{data.secret.slug}}</h2>
         <mat-form-field appearance="outline" class="full-width">
             <mat-label>New Secret Value</mat-label>
             <textarea matInput formControlName="value"
-                [type]="showValue ? 'text' : 'password'"
+                [class.secret-masked]="!showValue"
                 rows="4"
                 placeholder="Enter new secret value"
+                spellcheck="false"
+                autocomplete="off"
                 data-testid="edit-secret-value-input"></textarea>
             <button mat-icon-button matSuffix type="button"
                 (click)="toggleValueVisibility()"

From 6c5cae1b2386ca80b16affa3b7616a8b8607aa78 Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Fri, 12 Dec 2025 15:33:01 +0000
Subject: [PATCH 6/9] fix tests

---
 .../non-saas-secrets-e2e.test.ts              | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/backend/test/ava-tests/non-saas-tests/non-saas-secrets-e2e.test.ts b/backend/test/ava-tests/non-saas-tests/non-saas-secrets-e2e.test.ts
index 34b73191d..e85cabbc7 100644
--- a/backend/test/ava-tests/non-saas-tests/non-saas-secrets-e2e.test.ts
+++ b/backend/test/ava-tests/non-saas-tests/non-saas-secrets-e2e.test.ts
@@ -197,7 +197,7 @@ test.serial(`${currentTest}?search=test - should filter secrets by slug`, async
 });
 
 currentTest = 'GET /secrets/:slug';
-test.serial(`${currentTest} - should return secret with value`, async (t) => {
+test.serial(`${currentTest} - should return secret metadata without value`, async (t) => {
   // Create user with a secret to retrieve
   const { token } = await setupUserWithSecrets([{ slug: 'get-test-api-key', value: 'sk-get-test-value' }]);
 
@@ -210,7 +210,7 @@ test.serial(`${currentTest} - should return secret with value`, async (t) => {
   t.is(response.status, 200, response.text);
   const responseBody = JSON.parse(response.text);
   t.is(responseBody.slug, 'get-test-api-key');
-  t.truthy(responseBody.value);
+  t.falsy(responseBody.value);
   t.truthy(responseBody.lastAccessedAt);
 });
 
@@ -252,30 +252,34 @@ test.serial(`${currentTest} - should create secret with master password`, async
 });
 
 currentTest = 'GET /secrets/:slug';
-test.serial(`${currentTest} - should require master password for protected secret`, async (t) => {
+test.serial(`${currentTest} - should return protected secret metadata without master password`, async (t) => {
   // Create user with a protected secret
   const { token } = await setupUserWithSecrets([
-    { slug: 'protected-secret-403', value: 'sensitive-data', masterEncryption: true, masterPassword: 'SecretPass123!' },
+    { slug: 'protected-secret-200', value: 'sensitive-data', masterEncryption: true, masterPassword: 'SecretPass123!' },
   ]);
 
-  // Try to access without master password
+  // Access without master password should return metadata (no value is returned anyway)
   const response = await request(app.getHttpServer())
-    .get('/secrets/protected-secret-403')
+    .get('/secrets/protected-secret-200')
     .set('Cookie', token)
     .set('Content-Type', 'application/json')
     .set('Accept', 'application/json');
 
-  t.is(response.status, 403, response.text);
+  t.is(response.status, 200, response.text);
+  const responseBody = JSON.parse(response.text);
+  t.is(responseBody.slug, 'protected-secret-200');
+  t.falsy(responseBody.value);
+  t.is(responseBody.masterEncryption, true);
 });
 
-test.serial(`${currentTest} - should return protected secret with correct master password`, async (t) => {
+test.serial(`${currentTest} - should return protected secret metadata with master password (no value returned)`, async (t) => {
   // Create user with a protected secret
   const { token } = await setupUserWithSecrets([
-    { slug: 'protected-secret-200', value: 'sensitive-data', masterEncryption: true, masterPassword: 'MasterPass123!' },
+    { slug: 'protected-secret-with-pwd', value: 'sensitive-data', masterEncryption: true, masterPassword: 'MasterPass123!' },
   ]);
 
   const response = await request(app.getHttpServer())
-    .get('/secrets/protected-secret-200')
+    .get('/secrets/protected-secret-with-pwd')
     .set('Cookie', token)
     .set('masterpwd', 'MasterPass123!')
     .set('Content-Type', 'application/json')
@@ -283,8 +287,8 @@ test.serial(`${currentTest} - should return protected secret with correct master
 
   t.is(response.status, 200, response.text);
   const responseBody = JSON.parse(response.text);
-  t.is(responseBody.slug, 'protected-secret-200');
-  t.truthy(responseBody.value);
+  t.is(responseBody.slug, 'protected-secret-with-pwd');
+  t.falsy(responseBody.value);
 });
 
 currentTest = 'PUT /secrets/:slug';

From 82e1e63a7c6d0c5aafb824d5ba8fd2e18e14e3c7 Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Fri, 12 Dec 2025 20:04:57 +0000
Subject: [PATCH 7/9] fix tests

---
 .../test/ava-tests/non-saas-tests/non-saas-secrets-e2e.test.ts   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/backend/test/ava-tests/non-saas-tests/non-saas-secrets-e2e.test.ts b/backend/test/ava-tests/non-saas-tests/non-saas-secrets-e2e.test.ts
index e85cabbc7..4c580da7c 100644
--- a/backend/test/ava-tests/non-saas-tests/non-saas-secrets-e2e.test.ts
+++ b/backend/test/ava-tests/non-saas-tests/non-saas-secrets-e2e.test.ts
@@ -211,7 +211,6 @@ test.serial(`${currentTest} - should return secret metadata without value`, asyn
   const responseBody = JSON.parse(response.text);
   t.is(responseBody.slug, 'get-test-api-key');
   t.falsy(responseBody.value);
-  t.truthy(responseBody.lastAccessedAt);
 });
 
 test.serial(`${currentTest} - should return 404 for non-existent secret`, async (t) => {

From 44a31a580e9e0fb455585a01ed22e296b1aa03cf Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Fri, 12 Dec 2025 20:42:48 +0000
Subject: [PATCH 8/9] tests

---
 .../audit-log-dialog.component.spec.ts        | 266 ++++++++-
 .../create-secret-dialog.component.spec.ts    | 348 ++++++++++--
 .../delete-secret-dialog.component.spec.ts    | 110 +++-
 .../edit-secret-dialog.component.spec.ts      | 301 +++++++++-
 .../secrets/secrets.component.spec.ts         | 315 +++++++++--
 .../src/app/services/secrets.service.spec.ts  | 522 ++++++++++++++++++
 frontend/src/app/services/secrets.service.ts  |   2 +-
 7 files changed, 1728 insertions(+), 136 deletions(-)
 create mode 100644 frontend/src/app/services/secrets.service.spec.ts

diff --git a/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.spec.ts b/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.spec.ts
index d040824b2..7d2980bfd 100644
--- a/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.spec.ts
+++ b/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.spec.ts
@@ -6,9 +6,11 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { Angulartics2Module } from 'angulartics2';
 import { of } from 'rxjs';
+import { PageEvent } from '@angular/material/paginator';
 
 import { AuditLogDialogComponent } from './audit-log-dialog.component';
 import { SecretsService } from 'src/app/services/secrets.service';
+import { Secret, AuditLogEntry, AuditLogResponse } from 'src/app/models/secret';
 
 describe('AuditLogDialogComponent', () => {
   let component: AuditLogDialogComponent;
@@ -16,7 +18,7 @@ describe('AuditLogDialogComponent', () => {
   let mockSecretsService: jasmine.SpyObj<SecretsService>;
   let mockDialogRef: jasmine.SpyObj<MatDialogRef<AuditLogDialogComponent>>;
 
-  const mockSecret = {
+  const mockSecret: Secret = {
     id: '1',
     slug: 'test-secret',
     companyId: '1',
@@ -25,20 +27,58 @@ describe('AuditLogDialogComponent', () => {
     masterEncryption: false,
   };
 
+  const mockAuditLogEntry: AuditLogEntry = {
+    id: '1',
+    action: 'create',
+    user: { id: '1', email: 'user@example.com' },
+    accessedAt: '2024-01-01T00:00:00Z',
+    success: true,
+  };
+
+  const mockAuditLogResponse: AuditLogResponse = {
+    data: [mockAuditLogEntry],
+    pagination: { total: 1, currentPage: 1, perPage: 20, lastPage: 1 },
+  };
+
+  const mockMultipleLogsResponse: AuditLogResponse = {
+    data: [
+      mockAuditLogEntry,
+      {
+        id: '2',
+        action: 'view',
+        user: { id: '2', email: 'viewer@example.com' },
+        accessedAt: '2024-01-02T00:00:00Z',
+        success: true,
+      },
+      {
+        id: '3',
+        action: 'update',
+        user: { id: '1', email: 'user@example.com' },
+        accessedAt: '2024-01-03T00:00:00Z',
+        success: true,
+      },
+      {
+        id: '4',
+        action: 'copy',
+        user: { id: '3', email: 'copier@example.com' },
+        accessedAt: '2024-01-04T00:00:00Z',
+        success: true,
+      },
+      {
+        id: '5',
+        action: 'delete',
+        user: { id: '1', email: 'user@example.com' },
+        accessedAt: '2024-01-05T00:00:00Z',
+        success: false,
+        errorMessage: 'Deletion failed',
+      },
+    ],
+    pagination: { total: 5, currentPage: 1, perPage: 20, lastPage: 1 },
+  };
+
   beforeEach(async () => {
     mockSecretsService = jasmine.createSpyObj('SecretsService', ['getAuditLog']);
-    mockSecretsService.getAuditLog.and.returnValue(of({
-      data: [
-        {
-          id: '1',
-          action: 'create',
-          user: { id: '1', email: 'user@example.com' },
-          accessedAt: '2024-01-01T00:00:00Z',
-          success: true,
-        },
-      ],
-      pagination: { total: 1, currentPage: 1, perPage: 20, lastPage: 1 },
-    }));
+    mockSecretsService.getAuditLog.and.returnValue(of(mockAuditLogResponse));
 
     mockDialogRef = jasmine.createSpyObj('MatDialogRef', ['close']);
 
@@ -67,18 +107,200 @@ describe('AuditLogDialogComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should load audit log on init', () => {
-    expect(mockSecretsService.getAuditLog).toHaveBeenCalledWith('test-secret', 1, 20);
+  describe('component initialization', () => {
+    it('should load audit log on init', () => {
+      expect(mockSecretsService.getAuditLog).toHaveBeenCalledWith('test-secret', 1, 20);
+    });
+
+    it('should display audit log entries', () => {
+      expect(component.logs.length).toBe(1);
+      expect(component.logs[0].action).toBe('create');
+    });
+
+    it('should initialize with default pagination', () => {
+      expect(component.pagination).toEqual({
+        total: 1,
+        currentPage: 1,
+        perPage: 20,
+        lastPage: 1
+      });
+    });
+
+    it('should initialize loading as false after load', () => {
+      expect(component.loading).toBeFalse();
+    });
+
+    it('should have correct displayed columns', () => {
+      expect(component.displayedColumns).toEqual(['action', 'user', 'accessedAt', 'success']);
+    });
+  });
+
+  describe('action labels', () => {
+    it('should have label for create action', () => {
+      expect(component.actionLabels['create']).toBe('Created');
+    });
+
+    it('should have label for view action', () => {
+      expect(component.actionLabels['view']).toBe('Viewed');
+    });
+
+    it('should have label for copy action', () => {
+      expect(component.actionLabels['copy']).toBe('Copied');
+    });
+
+    it('should have label for update action', () => {
+      expect(component.actionLabels['update']).toBe('Updated');
+    });
+
+    it('should have label for delete action', () => {
+      expect(component.actionLabels['delete']).toBe('Deleted');
+    });
+  });
+
+  describe('action icons', () => {
+    it('should have icon for create action', () => {
+      expect(component.actionIcons['create']).toBe('add_circle');
+    });
+
+    it('should have icon for view action', () => {
+      expect(component.actionIcons['view']).toBe('visibility');
+    });
+
+    it('should have icon for copy action', () => {
+      expect(component.actionIcons['copy']).toBe('content_copy');
+    });
+
+    it('should have icon for update action', () => {
+      expect(component.actionIcons['update']).toBe('edit');
+    });
+
+    it('should have icon for delete action', () => {
+      expect(component.actionIcons['delete']).toBe('delete');
+    });
+  });
+
+  describe('action colors', () => {
+    it('should have color for create action', () => {
+      expect(component.actionColors['create']).toBe('primary');
+    });
+
+    it('should have color for view action', () => {
+      expect(component.actionColors['view']).toBe('accent');
+    });
+
+    it('should have color for copy action', () => {
+      expect(component.actionColors['copy']).toBe('accent');
+    });
+
+    it('should have color for update action', () => {
+      expect(component.actionColors['update']).toBe('primary');
+    });
+
+    it('should have color for delete action', () => {
+      expect(component.actionColors['delete']).toBe('warn');
+    });
+  });
+
+  describe('loadAuditLog', () => {
+    it('should set loading to true while fetching', () => {
+      component.loading = false;
+      mockSecretsService.getAuditLog.and.returnValue(of(mockAuditLogResponse));
+
+      component.loadAuditLog();
+
+      expect(component.loading).toBeFalse();
+    });
+
+    it('should update logs on successful fetch', () => {
+      mockSecretsService.getAuditLog.and.returnValue(of(mockMultipleLogsResponse));
+
+      component.loadAuditLog();
+
+      expect(component.logs.length).toBe(5);
+    });
+
+    it('should update pagination on successful fetch', () => {
+      mockSecretsService.getAuditLog.and.returnValue(of(mockMultipleLogsResponse));
+
+      component.loadAuditLog();
+
+      expect(component.pagination.total).toBe(5);
+    });
+
+    it('should call getAuditLog with current pagination', () => {
+      mockSecretsService.getAuditLog.calls.reset();
+      component.pagination.currentPage = 2;
+      component.pagination.perPage = 10;
+
+      component.loadAuditLog();
+
+      expect(mockSecretsService.getAuditLog).toHaveBeenCalledWith('test-secret', 2, 10);
+    });
   });
 
-  it('should display audit log entries', () => {
-    expect(component.logs.length).toBe(1);
-    expect(component.logs[0].action).toBe('create');
+  describe('onPageChange', () => {
+    it('should update pagination and reload audit log', () => {
+      const pageEvent: PageEvent = {
+        pageIndex: 2,
+        pageSize: 50,
+        length: 100
+      };
+
+      mockSecretsService.getAuditLog.calls.reset();
+      component.onPageChange(pageEvent);
+
+      expect(component.pagination.currentPage).toBe(3);
+      expect(component.pagination.perPage).toBe(50);
+      expect(mockSecretsService.getAuditLog).toHaveBeenCalledWith('test-secret', 3, 50);
+    });
+
+    it('should handle first page correctly', () => {
+      const pageEvent: PageEvent = {
+        pageIndex: 0,
+        pageSize: 20,
+        length: 100
+      };
+
+      mockSecretsService.getAuditLog.calls.reset();
+      component.onPageChange(pageEvent);
+
+      expect(component.pagination.currentPage).toBe(1);
+    });
   });
 
-  it('should have action labels', () => {
-    expect(component.actionLabels['create']).toBe('Created');
-    expect(component.actionLabels['view']).toBe('Viewed');
-    expect(component.actionLabels['delete']).toBe('Deleted');
+  describe('with multiple audit log entries', () => {
+    beforeEach(() => {
+      mockSecretsService.getAuditLog.and.returnValue(of(mockMultipleLogsResponse));
+      component.loadAuditLog();
+    });
+
+    it('should display all entries', () => {
+      expect(component.logs.length).toBe(5);
+    });
+
+    it('should include failed actions', () => {
+      const failedAction = component.logs.find(log => !log.success);
+      expect(failedAction).toBeTruthy();
+      expect(failedAction?.errorMessage).toBe('Deletion failed');
+    });
+
+    it('should include all action types', () => {
+      const actions = component.logs.map(log => log.action);
+      expect(actions).toContain('create');
+      expect(actions).toContain('view');
+      expect(actions).toContain('update');
+      expect(actions).toContain('copy');
+      expect(actions).toContain('delete');
+    });
+  });
+
+  describe('data binding', () => {
+    it('should have access to secret data', () => {
+      expect(component.data.secret).toEqual(mockSecret);
+    });
+
+    it('should have access to secret slug', () => {
+      expect(component.data.secret.slug).toBe('test-secret');
+    });
   });
 });
diff --git a/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.spec.ts b/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.spec.ts
index 78f36c8b9..b23ea0aca 100644
--- a/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.spec.ts
+++ b/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.spec.ts
@@ -5,10 +5,11 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatDialogRef } from '@angular/material/dialog';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { Angulartics2Module } from 'angulartics2';
-import { of } from 'rxjs';
+import { of, throwError } from 'rxjs';
 
 import { CreateSecretDialogComponent } from './create-secret-dialog.component';
 import { SecretsService } from 'src/app/services/secrets.service';
+import { Secret } from 'src/app/models/secret';
 
 describe('CreateSecretDialogComponent', () => {
   let component: CreateSecretDialogComponent;
@@ -16,16 +17,18 @@ describe('CreateSecretDialogComponent', () => {
   let mockSecretsService: jasmine.SpyObj<SecretsService>;
   let mockDialogRef: jasmine.SpyObj<MatDialogRef<CreateSecretDialogComponent>>;
 
+  const mockSecret: Secret = {
+    id: '1',
+    slug: 'test',
+    companyId: '1',
+    createdAt: '2024-01-01',
+    updatedAt: '2024-01-01',
+    masterEncryption: false,
+  };
+
   beforeEach(async () => {
     mockSecretsService = jasmine.createSpyObj('SecretsService', ['createSecret']);
-    mockSecretsService.createSecret.and.returnValue(of({
-      id: '1',
-      slug: 'test',
-      companyId: '1',
-      createdAt: '2024-01-01',
-      updatedAt: '2024-01-01',
-      masterEncryption: false,
-    }));
+    mockSecretsService.createSecret.and.returnValue(of(mockSecret));
 
     mockDialogRef = jasmine.createSpyObj('MatDialogRef', ['close']);
 
@@ -53,38 +56,321 @@ describe('CreateSecretDialogComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should have invalid form initially', () => {
-    expect(component.form.invalid).toBeTrue();
+  describe('form initialization', () => {
+    it('should have invalid form initially', () => {
+      expect(component.form.invalid).toBeTrue();
+    });
+
+    it('should have all required form controls', () => {
+      expect(component.form.get('slug')).toBeTruthy();
+      expect(component.form.get('value')).toBeTruthy();
+      expect(component.form.get('expiresAt')).toBeTruthy();
+      expect(component.form.get('masterEncryption')).toBeTruthy();
+      expect(component.form.get('masterPassword')).toBeTruthy();
+    });
+
+    it('should initialize with default values', () => {
+      expect(component.form.get('slug')?.value).toBe('');
+      expect(component.form.get('value')?.value).toBe('');
+      expect(component.form.get('expiresAt')?.value).toBeNull();
+      expect(component.form.get('masterEncryption')?.value).toBeFalse();
+      expect(component.form.get('masterPassword')?.value).toBe('');
+    });
+
+    it('should initialize component properties', () => {
+      expect(component.submitting).toBeFalse();
+      expect(component.showValue).toBeFalse();
+      expect(component.showMasterPassword).toBeFalse();
+      expect(component.minDate).toBeTruthy();
+    });
   });
 
-  it('should validate slug pattern', () => {
-    const slugControl = component.form.get('slug');
-    slugControl?.setValue('invalid slug!');
-    expect(slugControl?.hasError('pattern')).toBeTrue();
+  describe('slug validation', () => {
+    it('should require slug', () => {
+      const slugControl = component.form.get('slug');
+      slugControl?.setValue('');
+      expect(slugControl?.hasError('required')).toBeTrue();
+    });
+
+    it('should validate slug pattern - reject spaces', () => {
+      const slugControl = component.form.get('slug');
+      slugControl?.setValue('invalid slug');
+      expect(slugControl?.hasError('pattern')).toBeTrue();
+    });
+
+    it('should validate slug pattern - reject special characters', () => {
+      const slugControl = component.form.get('slug');
+      slugControl?.setValue('invalid!slug');
+      expect(slugControl?.hasError('pattern')).toBeTrue();
 
-    slugControl?.setValue('valid-slug_123');
-    expect(slugControl?.hasError('pattern')).toBeFalse();
+      slugControl?.setValue('invalid@slug');
+      expect(slugControl?.hasError('pattern')).toBeTrue();
+
+      slugControl?.setValue('invalid#slug');
+      expect(slugControl?.hasError('pattern')).toBeTrue();
+    });
+
+    it('should validate slug pattern - accept valid slugs', () => {
+      const slugControl = component.form.get('slug');
+
+      slugControl?.setValue('valid-slug');
+      expect(slugControl?.hasError('pattern')).toBeFalse();
+
+      slugControl?.setValue('valid_slug');
+      expect(slugControl?.hasError('pattern')).toBeFalse();
+
+      slugControl?.setValue('ValidSlug123');
+      expect(slugControl?.hasError('pattern')).toBeFalse();
+
+      slugControl?.setValue('valid-slug_123');
+      expect(slugControl?.hasError('pattern')).toBeFalse();
+    });
+
+    it('should validate max length', () => {
+      const slugControl = component.form.get('slug');
+      slugControl?.setValue('a'.repeat(256));
+      expect(slugControl?.hasError('maxlength')).toBeTrue();
+
+      slugControl?.setValue('a'.repeat(255));
+      expect(slugControl?.hasError('maxlength')).toBeFalse();
+    });
   });
 
-  it('should require master password when encryption is enabled', () => {
-    component.form.get('masterEncryption')?.setValue(true);
-    const masterPasswordControl = component.form.get('masterPassword');
-    expect(masterPasswordControl?.hasError('required')).toBeTrue();
+  describe('value validation', () => {
+    it('should require value', () => {
+      const valueControl = component.form.get('value');
+      valueControl?.setValue('');
+      expect(valueControl?.hasError('required')).toBeTrue();
+    });
 
-    masterPasswordControl?.setValue('short');
-    expect(masterPasswordControl?.hasError('minlength')).toBeTrue();
+    it('should validate max length', () => {
+      const valueControl = component.form.get('value');
+      valueControl?.setValue('a'.repeat(10001));
+      expect(valueControl?.hasError('maxlength')).toBeTrue();
 
-    masterPasswordControl?.setValue('validpassword123');
-    expect(masterPasswordControl?.valid).toBeTrue();
+      valueControl?.setValue('a'.repeat(10000));
+      expect(valueControl?.hasError('maxlength')).toBeFalse();
+    });
   });
 
-  it('should submit valid form', () => {
-    component.form.patchValue({
-      slug: 'test-secret',
-      value: 'secret-value',
+  describe('master encryption', () => {
+    it('should require master password when encryption is enabled', () => {
+      component.form.get('masterEncryption')?.setValue(true);
+      const masterPasswordControl = component.form.get('masterPassword');
+      expect(masterPasswordControl?.hasError('required')).toBeTrue();
+    });
+
+    it('should validate master password min length', () => {
+      component.form.get('masterEncryption')?.setValue(true);
+      const masterPasswordControl = component.form.get('masterPassword');
+
+      masterPasswordControl?.setValue('short');
+      expect(masterPasswordControl?.hasError('minlength')).toBeTrue();
+
+      masterPasswordControl?.setValue('12345678');
+      expect(masterPasswordControl?.hasError('minlength')).toBeFalse();
+    });
+
+    it('should clear master password validators when encryption is disabled', () => {
+      component.form.get('masterEncryption')?.setValue(true);
+      component.form.get('masterPassword')?.setValue('password123');
+
+      component.form.get('masterEncryption')?.setValue(false);
+
+      const masterPasswordControl = component.form.get('masterPassword');
+      expect(masterPasswordControl?.value).toBe('');
+      expect(masterPasswordControl?.valid).toBeTrue();
+    });
+
+    it('should accept valid master password', () => {
+      component.form.get('masterEncryption')?.setValue(true);
+      const masterPasswordControl = component.form.get('masterPassword');
+
+      masterPasswordControl?.setValue('validpassword123');
+      expect(masterPasswordControl?.valid).toBeTrue();
+    });
+  });
+
+  describe('error messages', () => {
+    it('should return correct slug error message for required', () => {
+      component.form.get('slug')?.setValue('');
+      component.form.get('slug')?.markAsTouched();
+      expect(component.slugError).toBe('Slug is required');
+    });
+
+    it('should return correct slug error message for maxlength', () => {
+      component.form.get('slug')?.setValue('a'.repeat(256));
+      expect(component.slugError).toBe('Slug must be 255 characters or less');
+    });
+
+    it('should return correct slug error message for pattern', () => {
+      component.form.get('slug')?.setValue('invalid slug!');
+      expect(component.slugError).toBe('Only letters, numbers, hyphens, and underscores allowed');
+    });
+
+    it('should return correct value error message for required', () => {
+      component.form.get('value')?.setValue('');
+      component.form.get('value')?.markAsTouched();
+      expect(component.valueError).toBe('Value is required');
+    });
+
+    it('should return correct value error message for maxlength', () => {
+      component.form.get('value')?.setValue('a'.repeat(10001));
+      expect(component.valueError).toBe('Value must be 10000 characters or less');
     });
 
-    component.onSubmit();
-    expect(mockSecretsService.createSecret).toHaveBeenCalled();
+    it('should return correct master password error for required', () => {
+      component.form.get('masterEncryption')?.setValue(true);
+      component.form.get('masterPassword')?.markAsTouched();
+      expect(component.masterPasswordError).toBe('Master password is required for encryption');
+    });
+
+    it('should return correct master password error for minlength', () => {
+      component.form.get('masterEncryption')?.setValue(true);
+      component.form.get('masterPassword')?.setValue('short');
+      expect(component.masterPasswordError).toBe('Master password must be at least 8 characters');
+    });
+  });
+
+  describe('visibility toggles', () => {
+    it('should toggle value visibility', () => {
+      expect(component.showValue).toBeFalse();
+      component.toggleValueVisibility();
+      expect(component.showValue).toBeTrue();
+      component.toggleValueVisibility();
+      expect(component.showValue).toBeFalse();
+    });
+
+    it('should toggle master password visibility', () => {
+      expect(component.showMasterPassword).toBeFalse();
+      component.toggleMasterPasswordVisibility();
+      expect(component.showMasterPassword).toBeTrue();
+      component.toggleMasterPasswordVisibility();
+      expect(component.showMasterPassword).toBeFalse();
+    });
+  });
+
+  describe('form submission', () => {
+    it('should not submit invalid form', () => {
+      component.onSubmit();
+      expect(mockSecretsService.createSecret).not.toHaveBeenCalled();
+    });
+
+    it('should submit valid form', () => {
+      component.form.patchValue({
+        slug: 'test-secret',
+        value: 'secret-value',
+      });
+
+      component.onSubmit();
+      expect(mockSecretsService.createSecret).toHaveBeenCalled();
+    });
+
+    it('should submit form with correct basic payload', () => {
+      component.form.patchValue({
+        slug: 'test-secret',
+        value: 'secret-value',
+      });
+
+      component.onSubmit();
+
+      expect(mockSecretsService.createSecret).toHaveBeenCalledWith(jasmine.objectContaining({
+        slug: 'test-secret',
+        value: 'secret-value',
+      }));
+    });
+
+    it('should submit form with expiration date', () => {
+      const futureDate = new Date('2025-12-31');
+      component.form.patchValue({
+        slug: 'test-secret',
+        value: 'secret-value',
+        expiresAt: futureDate,
+      });
+
+      component.onSubmit();
+
+      expect(mockSecretsService.createSecret).toHaveBeenCalledWith(jasmine.objectContaining({
+        slug: 'test-secret',
+        value: 'secret-value',
+        expiresAt: jasmine.any(String),
+      }));
+    });
+
+    it('should submit form with master encryption', () => {
+      component.form.patchValue({
+        slug: 'test-secret',
+        value: 'secret-value',
+        masterEncryption: true,
+        masterPassword: 'password123',
+      });
+
+      component.onSubmit();
+
+      expect(mockSecretsService.createSecret).toHaveBeenCalledWith(jasmine.objectContaining({
+        slug: 'test-secret',
+        value: 'secret-value',
+        masterEncryption: true,
+        masterPassword: 'password123',
+      }));
+    });
+
+    it('should set submitting to true during submission', () => {
+      component.form.patchValue({
+        slug: 'test-secret',
+        value: 'secret-value',
+      });
+
+      expect(component.submitting).toBeFalse();
+      component.onSubmit();
+    });
+
+    it('should close dialog on successful submission', () => {
+      component.form.patchValue({
+        slug: 'test-secret',
+        value: 'secret-value',
+      });
+
+      component.onSubmit();
+
+      expect(mockDialogRef.close).toHaveBeenCalledWith(true);
+    });
+
+    it('should reset submitting on successful submission', () => {
+      component.form.patchValue({
+        slug: 'test-secret',
+        value: 'secret-value',
+      });
+
+      component.onSubmit();
+
+      expect(component.submitting).toBeFalse();
+    });
+
+    it('should reset submitting on error', () => {
+      mockSecretsService.createSecret.and.returnValue(throwError(() => new Error('Error')));
+
+      component.form.patchValue({
+        slug: 'test-secret',
+        value: 'secret-value',
+      });
+
+      component.onSubmit();
+
+      expect(component.submitting).toBeFalse();
+    });
+
+    it('should not include master password when encryption is disabled', () => {
+      component.form.patchValue({
+        slug: 'test-secret',
+        value: 'secret-value',
+        masterEncryption: false,
+      });
+
+      component.onSubmit();
+
+      const callArgs = mockSecretsService.createSecret.calls.mostRecent().args[0];
+      expect(callArgs.masterPassword).toBeUndefined();
+    });
   });
 });
diff --git a/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.spec.ts b/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.spec.ts
index 9dbcc53a0..de5ef9591 100644
--- a/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.spec.ts
+++ b/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.spec.ts
@@ -5,10 +5,11 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { Angulartics2Module } from 'angulartics2';
-import { of } from 'rxjs';
+import { of, throwError } from 'rxjs';
 
 import { DeleteSecretDialogComponent } from './delete-secret-dialog.component';
 import { SecretsService } from 'src/app/services/secrets.service';
+import { Secret, DeleteSecretResponse } from 'src/app/models/secret';
 
 describe('DeleteSecretDialogComponent', () => {
   let component: DeleteSecretDialogComponent;
@@ -16,7 +17,7 @@ describe('DeleteSecretDialogComponent', () => {
   let mockSecretsService: jasmine.SpyObj<SecretsService>;
   let mockDialogRef: jasmine.SpyObj<MatDialogRef<DeleteSecretDialogComponent>>;
 
-  const mockSecret = {
+  const mockSecret: Secret = {
     id: '1',
     slug: 'test-secret',
     companyId: '1',
@@ -25,12 +26,19 @@ describe('DeleteSecretDialogComponent', () => {
     masterEncryption: false,
   };
 
-  beforeEach(async () => {
+  const mockSecretWithEncryption: Secret = {
+    ...mockSecret,
+    masterEncryption: true,
+  };
+
+  const mockDeleteResponse: DeleteSecretResponse = {
+    message: 'Secret deleted successfully',
+    deletedAt: '2024-01-01T00:00:00Z',
+  };
+
+  const createComponent = async (secret: Secret = mockSecret) => {
     mockSecretsService = jasmine.createSpyObj('SecretsService', ['deleteSecret']);
-    mockSecretsService.deleteSecret.and.returnValue(of({
-      message: 'Secret deleted successfully',
-      deletedAt: '2024-01-01',
-    }));
+    mockSecretsService.deleteSecret.and.returnValue(of(mockDeleteResponse));
 
     mockDialogRef = jasmine.createSpyObj('MatDialogRef', ['close']);
 
@@ -46,26 +54,100 @@ describe('DeleteSecretDialogComponent', () => {
         provideHttpClientTesting(),
         { provide: SecretsService, useValue: mockSecretsService },
         { provide: MatDialogRef, useValue: mockDialogRef },
-        { provide: MAT_DIALOG_DATA, useValue: { secret: mockSecret } },
+        { provide: MAT_DIALOG_DATA, useValue: { secret } },
       ]
     }).compileComponents();
 
     fixture = TestBed.createComponent(DeleteSecretDialogComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+  };
+
+  beforeEach(async () => {
+    await createComponent();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should call deleteSecret on confirm', () => {
-    component.onDelete();
-    expect(mockSecretsService.deleteSecret).toHaveBeenCalledWith('test-secret');
+  describe('component initialization', () => {
+    it('should initialize with submitting false', () => {
+      expect(component.submitting).toBeFalse();
+    });
+
+    it('should have access to secret data', () => {
+      expect(component.data.secret).toEqual(mockSecret);
+    });
+
+    it('should have access to secret slug', () => {
+      expect(component.data.secret.slug).toBe('test-secret');
+    });
+  });
+
+  describe('onDelete', () => {
+    it('should call deleteSecret with correct slug', () => {
+      component.onDelete();
+      expect(mockSecretsService.deleteSecret).toHaveBeenCalledWith('test-secret');
+    });
+
+    it('should set submitting to true during deletion', () => {
+      expect(component.submitting).toBeFalse();
+      component.onDelete();
+    });
+
+    it('should close dialog with true after successful deletion', () => {
+      component.onDelete();
+      expect(mockDialogRef.close).toHaveBeenCalledWith(true);
+    });
+
+    it('should reset submitting after successful deletion', () => {
+      component.onDelete();
+      expect(component.submitting).toBeFalse();
+    });
+
+    it('should reset submitting on error', () => {
+      mockSecretsService.deleteSecret.and.returnValue(throwError(() => new Error('Error')));
+
+      component.onDelete();
+
+      expect(component.submitting).toBeFalse();
+    });
+
+    it('should not close dialog on error', () => {
+      mockSecretsService.deleteSecret.and.returnValue(throwError(() => new Error('Error')));
+
+      component.onDelete();
+
+      expect(mockDialogRef.close).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('with encrypted secret', () => {
+    beforeEach(async () => {
+      await TestBed.resetTestingModule();
+      await createComponent(mockSecretWithEncryption);
+    });
+
+    it('should have access to encrypted secret data', () => {
+      expect(component.data.secret.masterEncryption).toBeTrue();
+    });
+
+    it('should delete encrypted secret with correct slug', () => {
+      component.onDelete();
+      expect(mockSecretsService.deleteSecret).toHaveBeenCalledWith('test-secret');
+    });
   });
 
-  it('should close dialog after successful deletion', () => {
-    component.onDelete();
-    expect(mockDialogRef.close).toHaveBeenCalledWith(true);
+  describe('dialog interactions', () => {
+    it('should only call deleteSecret once per click', () => {
+      component.onDelete();
+      expect(mockSecretsService.deleteSecret).toHaveBeenCalledTimes(1);
+    });
+
+    it('should close dialog only once after successful deletion', () => {
+      component.onDelete();
+      expect(mockDialogRef.close).toHaveBeenCalledTimes(1);
+    });
   });
 });
diff --git a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.spec.ts b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.spec.ts
index 54d89840f..4ca93068a 100644
--- a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.spec.ts
+++ b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.spec.ts
@@ -5,10 +5,11 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { Angulartics2Module } from 'angulartics2';
-import { of } from 'rxjs';
+import { of, throwError } from 'rxjs';
 
 import { EditSecretDialogComponent } from './edit-secret-dialog.component';
 import { SecretsService } from 'src/app/services/secrets.service';
+import { Secret } from 'src/app/models/secret';
 
 describe('EditSecretDialogComponent', () => {
   let component: EditSecretDialogComponent;
@@ -16,7 +17,7 @@ describe('EditSecretDialogComponent', () => {
   let mockSecretsService: jasmine.SpyObj<SecretsService>;
   let mockDialogRef: jasmine.SpyObj<MatDialogRef<EditSecretDialogComponent>>;
 
-  const mockSecret = {
+  const mockSecret: Secret = {
     id: '1',
     slug: 'test-secret',
     companyId: '1',
@@ -25,9 +26,19 @@ describe('EditSecretDialogComponent', () => {
     masterEncryption: false,
   };
 
-  beforeEach(async () => {
+  const mockSecretWithExpiration: Secret = {
+    ...mockSecret,
+    expiresAt: '2025-12-31T00:00:00Z',
+  };
+
+  const mockSecretWithEncryption: Secret = {
+    ...mockSecret,
+    masterEncryption: true,
+  };
+
+  const createComponent = async (secret: Secret = mockSecret) => {
     mockSecretsService = jasmine.createSpyObj('SecretsService', ['updateSecret']);
-    mockSecretsService.updateSecret.and.returnValue(of(mockSecret));
+    mockSecretsService.updateSecret.and.returnValue(of(secret));
 
     mockDialogRef = jasmine.createSpyObj('MatDialogRef', ['close']);
 
@@ -43,32 +54,292 @@ describe('EditSecretDialogComponent', () => {
         provideHttpClientTesting(),
         { provide: SecretsService, useValue: mockSecretsService },
         { provide: MatDialogRef, useValue: mockDialogRef },
-        { provide: MAT_DIALOG_DATA, useValue: { secret: mockSecret } },
+        { provide: MAT_DIALOG_DATA, useValue: { secret } },
       ]
     }).compileComponents();
 
     fixture = TestBed.createComponent(EditSecretDialogComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
+  };
+
+  beforeEach(async () => {
+    await createComponent();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should initialize form with empty value', () => {
-    expect(component.form.get('value')?.value).toBe('');
+  describe('form initialization', () => {
+    it('should initialize form with empty value', () => {
+      expect(component.form.get('value')?.value).toBe('');
+    });
+
+    it('should have all required form controls', () => {
+      expect(component.form.get('value')).toBeTruthy();
+      expect(component.form.get('expiresAt')).toBeTruthy();
+    });
+
+    it('should initialize component properties', () => {
+      expect(component.submitting).toBeFalse();
+      expect(component.showValue).toBeFalse();
+      expect(component.masterPassword).toBe('');
+      expect(component.masterPasswordError).toBe('');
+      expect(component.showMasterPassword).toBeFalse();
+      expect(component.clearExpiration).toBeFalse();
+      expect(component.minDate).toBeTruthy();
+    });
+
+    it('should initialize with null expiresAt when secret has no expiration', () => {
+      expect(component.form.get('expiresAt')?.value).toBeNull();
+    });
+  });
+
+  describe('form initialization with expiration', () => {
+    beforeEach(async () => {
+      await TestBed.resetTestingModule();
+      await createComponent(mockSecretWithExpiration);
+    });
+
+    it('should initialize with existing expiration date', () => {
+      const expiresAt = component.form.get('expiresAt')?.value;
+      expect(expiresAt).toBeTruthy();
+      expect(expiresAt instanceof Date).toBeTrue();
+    });
+  });
+
+  describe('value validation', () => {
+    it('should require value field', () => {
+      expect(component.form.get('value')?.valid).toBeFalse();
+      component.form.patchValue({ value: 'some-value' });
+      expect(component.form.get('value')?.valid).toBeTrue();
+    });
+
+    it('should validate max length', () => {
+      const valueControl = component.form.get('value');
+      valueControl?.setValue('a'.repeat(10001));
+      expect(valueControl?.hasError('maxlength')).toBeTrue();
+
+      valueControl?.setValue('a'.repeat(10000));
+      expect(valueControl?.hasError('maxlength')).toBeFalse();
+    });
+  });
+
+  describe('error messages', () => {
+    it('should return correct value error message for required', () => {
+      component.form.get('value')?.setValue('');
+      component.form.get('value')?.markAsTouched();
+      expect(component.valueError).toBe('New value is required');
+    });
+
+    it('should return correct value error message for maxlength', () => {
+      component.form.get('value')?.setValue('a'.repeat(10001));
+      expect(component.valueError).toBe('Value must be 10000 characters or less');
+    });
+
+    it('should return empty string when no errors', () => {
+      component.form.get('value')?.setValue('valid-value');
+      expect(component.valueError).toBe('');
+    });
+  });
+
+  describe('visibility toggles', () => {
+    it('should toggle value visibility', () => {
+      expect(component.showValue).toBeFalse();
+      component.toggleValueVisibility();
+      expect(component.showValue).toBeTrue();
+      component.toggleValueVisibility();
+      expect(component.showValue).toBeFalse();
+    });
+
+    it('should toggle master password visibility', () => {
+      expect(component.showMasterPassword).toBeFalse();
+      component.toggleMasterPasswordVisibility();
+      expect(component.showMasterPassword).toBeTrue();
+      component.toggleMasterPasswordVisibility();
+      expect(component.showMasterPassword).toBeFalse();
+    });
+  });
+
+  describe('clear expiration', () => {
+    it('should disable expiresAt control when clearExpiration is true', () => {
+      component.onClearExpirationChange(true);
+
+      expect(component.clearExpiration).toBeTrue();
+      expect(component.form.get('expiresAt')?.disabled).toBeTrue();
+    });
+
+    it('should enable expiresAt control when clearExpiration is false', () => {
+      component.onClearExpirationChange(true);
+      component.onClearExpirationChange(false);
+
+      expect(component.clearExpiration).toBeFalse();
+      expect(component.form.get('expiresAt')?.enabled).toBeTrue();
+    });
+  });
+
+  describe('form submission', () => {
+    it('should not submit invalid form', () => {
+      component.onSubmit();
+      expect(mockSecretsService.updateSecret).not.toHaveBeenCalled();
+    });
+
+    it('should submit updated secret', () => {
+      component.form.patchValue({ value: 'new-value' });
+      component.onSubmit();
+      expect(mockSecretsService.updateSecret).toHaveBeenCalled();
+    });
+
+    it('should submit with correct payload', () => {
+      component.form.patchValue({ value: 'new-value' });
+      component.onSubmit();
+
+      expect(mockSecretsService.updateSecret).toHaveBeenCalledWith(
+        'test-secret',
+        jasmine.objectContaining({ value: 'new-value' }),
+        undefined
+      );
+    });
+
+    it('should submit with expiration date', () => {
+      const futureDate = new Date('2026-01-01');
+      component.form.patchValue({
+        value: 'new-value',
+        expiresAt: futureDate,
+      });
+
+      component.onSubmit();
+
+      expect(mockSecretsService.updateSecret).toHaveBeenCalledWith(
+        'test-secret',
+        jasmine.objectContaining({
+          value: 'new-value',
+          expiresAt: jasmine.any(String),
+        }),
+        undefined
+      );
+    });
+
+    it('should submit with null expiration when clearExpiration is true', () => {
+      component.form.patchValue({ value: 'new-value' });
+      component.onClearExpirationChange(true);
+
+      component.onSubmit();
+
+      expect(mockSecretsService.updateSecret).toHaveBeenCalledWith(
+        'test-secret',
+        jasmine.objectContaining({
+          value: 'new-value',
+          expiresAt: null,
+        }),
+        undefined
+      );
+    });
+
+    it('should set submitting to true during submission', () => {
+      component.form.patchValue({ value: 'new-value' });
+
+      expect(component.submitting).toBeFalse();
+      component.onSubmit();
+    });
+
+    it('should close dialog on successful submission', () => {
+      component.form.patchValue({ value: 'new-value' });
+
+      component.onSubmit();
+
+      expect(mockDialogRef.close).toHaveBeenCalledWith(true);
+    });
+
+    it('should reset submitting on successful submission', () => {
+      component.form.patchValue({ value: 'new-value' });
+
+      component.onSubmit();
+
+      expect(component.submitting).toBeFalse();
+    });
+  });
+
+  describe('master encryption', () => {
+    beforeEach(async () => {
+      await TestBed.resetTestingModule();
+      await createComponent(mockSecretWithEncryption);
+    });
+
+    it('should require master password for encrypted secrets', () => {
+      component.form.patchValue({ value: 'new-value' });
+      component.masterPassword = '';
+
+      component.onSubmit();
+
+      expect(component.masterPasswordError).toBe('Master password is required');
+      expect(mockSecretsService.updateSecret).not.toHaveBeenCalled();
+    });
+
+    it('should submit with master password for encrypted secrets', () => {
+      component.form.patchValue({ value: 'new-value' });
+      component.masterPassword = 'my-master-password';
+
+      component.onSubmit();
+
+      expect(mockSecretsService.updateSecret).toHaveBeenCalledWith(
+        'test-secret',
+        jasmine.objectContaining({ value: 'new-value' }),
+        'my-master-password'
+      );
+    });
+
+    it('should show error on 403 response (invalid master password)', () => {
+      mockSecretsService.updateSecret.and.returnValue(
+        throwError(() => ({ status: 403 }))
+      );
+
+      component.form.patchValue({ value: 'new-value' });
+      component.masterPassword = 'wrong-password';
+
+      component.onSubmit();
+
+      expect(component.masterPasswordError).toBe('Invalid master password');
+      expect(component.submitting).toBeFalse();
+    });
+
+    it('should clear master password error on new submission attempt', () => {
+      component.masterPasswordError = 'Previous error';
+      component.form.patchValue({ value: 'new-value' });
+      component.masterPassword = '';
+
+      component.onSubmit();
+
+      expect(component.masterPasswordError).toBe('Master password is required');
+    });
   });
 
-  it('should submit updated secret', () => {
-    component.form.patchValue({ value: 'new-value' });
-    component.onSubmit();
-    expect(mockSecretsService.updateSecret).toHaveBeenCalled();
+  describe('non-encrypted secret submission', () => {
+    it('should not send master password for non-encrypted secrets', () => {
+      component.form.patchValue({ value: 'new-value' });
+      component.masterPassword = 'some-password';
+
+      component.onSubmit();
+
+      expect(mockSecretsService.updateSecret).toHaveBeenCalledWith(
+        'test-secret',
+        jasmine.objectContaining({ value: 'new-value' }),
+        undefined
+      );
+    });
   });
 
-  it('should require value field', () => {
-    expect(component.form.get('value')?.valid).toBeFalse();
-    component.form.patchValue({ value: 'some-value' });
-    expect(component.form.get('value')?.valid).toBeTrue();
+  describe('error handling', () => {
+    it('should reset submitting on non-403 error', () => {
+      mockSecretsService.updateSecret.and.returnValue(
+        throwError(() => ({ status: 500 }))
+      );
+
+      component.form.patchValue({ value: 'new-value' });
+      component.onSubmit();
+
+      expect(component.submitting).toBeFalse();
+    });
   });
 });
diff --git a/frontend/src/app/components/secrets/secrets.component.spec.ts b/frontend/src/app/components/secrets/secrets.component.spec.ts
index 1da66542b..d0a2f6a74 100644
--- a/frontend/src/app/components/secrets/secrets.component.spec.ts
+++ b/frontend/src/app/components/secrets/secrets.component.spec.ts
@@ -1,15 +1,21 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { Angulartics2Module } from 'angulartics2';
-import { of } from 'rxjs';
+import { BehaviorSubject, of } from 'rxjs';
+import { PageEvent } from '@angular/material/paginator';
 
 import { SecretsComponent } from './secrets.component';
 import { SecretsService } from 'src/app/services/secrets.service';
 import { CompanyService } from 'src/app/services/company.service';
+import { CreateSecretDialogComponent } from './create-secret-dialog/create-secret-dialog.component';
+import { EditSecretDialogComponent } from './edit-secret-dialog/edit-secret-dialog.component';
+import { DeleteSecretDialogComponent } from './delete-secret-dialog/delete-secret-dialog.component';
+import { AuditLogDialogComponent } from './audit-log-dialog/audit-log-dialog.component';
+import { Secret } from 'src/app/models/secret';
 
 describe('SecretsComponent', () => {
   let component: SecretsComponent;
@@ -17,15 +23,29 @@ describe('SecretsComponent', () => {
   let mockSecretsService: jasmine.SpyObj<SecretsService>;
   let mockCompanyService: jasmine.SpyObj<CompanyService>;
   let mockDialog: jasmine.SpyObj<MatDialog>;
+  let secretsUpdatedSubject: BehaviorSubject<string>;
+
+  const mockSecret: Secret = {
+    id: '1',
+    slug: 'test-secret',
+    companyId: '1',
+    createdAt: '2024-01-01',
+    updatedAt: '2024-01-01',
+    masterEncryption: false,
+  };
+
+  const mockSecretsResponse = {
+    data: [mockSecret],
+    pagination: { total: 1, currentPage: 1, perPage: 20, lastPage: 1 }
+  };
 
   beforeEach(async () => {
+    secretsUpdatedSubject = new BehaviorSubject<string>('');
+
     mockSecretsService = jasmine.createSpyObj('SecretsService', ['fetchSecrets'], {
-      cast: of('')
+      cast: secretsUpdatedSubject.asObservable()
     });
-    mockSecretsService.fetchSecrets.and.returnValue(of({
-      data: [],
-      pagination: { total: 0, currentPage: 1, perPage: 20, lastPage: 1 }
-    }));
+    mockSecretsService.fetchSecrets.and.returnValue(of(mockSecretsResponse));
 
     mockCompanyService = jasmine.createSpyObj('CompanyService', ['getCurrentTabTitle']);
     mockCompanyService.getCurrentTabTitle.and.returnValue(of('Test Company'));
@@ -61,51 +81,240 @@ describe('SecretsComponent', () => {
     expect(mockSecretsService.fetchSecrets).toHaveBeenCalled();
   });
 
-  it('should detect expired secrets', () => {
-    const expiredSecret = {
-      id: '1',
-      slug: 'test',
-      companyId: '1',
-      createdAt: '2024-01-01',
-      updatedAt: '2024-01-01',
-      expiresAt: '2024-01-01',
-      masterEncryption: false,
-    };
-    expect(component.isExpired(expiredSecret)).toBeTrue();
-  });
-
-  it('should detect non-expired secrets', () => {
-    const futureDate = new Date();
-    futureDate.setFullYear(futureDate.getFullYear() + 1);
-    const validSecret = {
-      id: '1',
-      slug: 'test',
-      companyId: '1',
-      createdAt: '2024-01-01',
-      updatedAt: '2024-01-01',
-      expiresAt: futureDate.toISOString(),
-      masterEncryption: false,
-    };
-    expect(component.isExpired(validSecret)).toBeFalse();
-  });
-
-  it('should detect secrets expiring soon', () => {
-    const soonDate = new Date();
-    soonDate.setDate(soonDate.getDate() + 3);
-    const expiringSoonSecret = {
-      id: '1',
-      slug: 'test',
-      companyId: '1',
-      createdAt: '2024-01-01',
-      updatedAt: '2024-01-01',
-      expiresAt: soonDate.toISOString(),
-      masterEncryption: false,
-    };
-    expect(component.isExpiringSoon(expiringSoonSecret)).toBeTrue();
-  });
-
-  it('should open create dialog', () => {
-    component.openCreateDialog();
-    expect(mockDialog.open).toHaveBeenCalled();
+  it('should set page title on init', () => {
+    expect(mockCompanyService.getCurrentTabTitle).toHaveBeenCalled();
+  });
+
+  it('should initialize with pagination from response', () => {
+    // The pagination comes from the mock service response
+    expect(component.pagination.total).toBe(1);
+    expect(component.pagination.lastPage).toBe(1);
+  });
+
+  it('should initialize with loading true then false after load', () => {
+    expect(component.loading).toBeFalse();
+  });
+
+  it('should have correct displayed columns', () => {
+    expect(component.displayedColumns).toEqual(['slug', 'masterEncryption', 'expiresAt', 'updatedAt', 'actions']);
+  });
+
+  describe('isExpired', () => {
+    it('should return true for expired secrets', () => {
+      const expiredSecret: Secret = {
+        ...mockSecret,
+        expiresAt: '2024-01-01',
+      };
+      expect(component.isExpired(expiredSecret)).toBeTrue();
+    });
+
+    it('should return false for non-expired secrets', () => {
+      const futureDate = new Date();
+      futureDate.setFullYear(futureDate.getFullYear() + 1);
+      const validSecret: Secret = {
+        ...mockSecret,
+        expiresAt: futureDate.toISOString(),
+      };
+      expect(component.isExpired(validSecret)).toBeFalse();
+    });
+
+    it('should return false for secrets without expiration', () => {
+      expect(component.isExpired(mockSecret)).toBeFalse();
+    });
+  });
+
+  describe('isExpiringSoon', () => {
+    it('should return true for secrets expiring within 7 days', () => {
+      const soonDate = new Date();
+      soonDate.setDate(soonDate.getDate() + 3);
+      const expiringSoonSecret: Secret = {
+        ...mockSecret,
+        expiresAt: soonDate.toISOString(),
+      };
+      expect(component.isExpiringSoon(expiringSoonSecret)).toBeTrue();
+    });
+
+    it('should return false for secrets expiring beyond 7 days', () => {
+      const laterDate = new Date();
+      laterDate.setDate(laterDate.getDate() + 14);
+      const notExpiringSoonSecret: Secret = {
+        ...mockSecret,
+        expiresAt: laterDate.toISOString(),
+      };
+      expect(component.isExpiringSoon(notExpiringSoonSecret)).toBeFalse();
+    });
+
+    it('should return false for already expired secrets', () => {
+      const expiredSecret: Secret = {
+        ...mockSecret,
+        expiresAt: '2024-01-01',
+      };
+      expect(component.isExpiringSoon(expiredSecret)).toBeFalse();
+    });
+
+    it('should return false for secrets without expiration', () => {
+      expect(component.isExpiringSoon(mockSecret)).toBeFalse();
+    });
+
+    it('should return true for secrets expiring exactly in 7 days', () => {
+      const exactlySevenDays = new Date();
+      exactlySevenDays.setDate(exactlySevenDays.getDate() + 7);
+      const secret: Secret = {
+        ...mockSecret,
+        expiresAt: exactlySevenDays.toISOString(),
+      };
+      expect(component.isExpiringSoon(secret)).toBeTrue();
+    });
+  });
+
+  describe('openCreateDialog', () => {
+    it('should open create dialog with correct configuration', () => {
+      component.openCreateDialog();
+      expect(mockDialog.open).toHaveBeenCalledWith(CreateSecretDialogComponent, {
+        width: '500px',
+      });
+    });
+  });
+
+  describe('openEditDialog', () => {
+    it('should open edit dialog with secret data', () => {
+      component.openEditDialog(mockSecret);
+      expect(mockDialog.open).toHaveBeenCalledWith(EditSecretDialogComponent, {
+        width: '500px',
+        data: { secret: mockSecret },
+      });
+    });
+  });
+
+  describe('openDeleteDialog', () => {
+    it('should open delete dialog with secret data', () => {
+      component.openDeleteDialog(mockSecret);
+      expect(mockDialog.open).toHaveBeenCalledWith(DeleteSecretDialogComponent, {
+        width: '400px',
+        data: { secret: mockSecret },
+      });
+    });
+  });
+
+  describe('openAuditLogDialog', () => {
+    it('should open audit log dialog with secret data', () => {
+      component.openAuditLogDialog(mockSecret);
+      expect(mockDialog.open).toHaveBeenCalledWith(AuditLogDialogComponent, {
+        width: '800px',
+        maxHeight: '80vh',
+        data: { secret: mockSecret },
+      });
+    });
+  });
+
+  describe('onPageChange', () => {
+    it('should update pagination and reload secrets', () => {
+      const pageEvent: PageEvent = {
+        pageIndex: 1,
+        pageSize: 10,
+        length: 100
+      };
+
+      mockSecretsService.fetchSecrets.calls.reset();
+      component.onPageChange(pageEvent);
+
+      expect(component.pagination.currentPage).toBe(2);
+      expect(component.pagination.perPage).toBe(10);
+      expect(mockSecretsService.fetchSecrets).toHaveBeenCalledWith(2, 10, undefined);
+    });
+  });
+
+  describe('onSearchChange', () => {
+    it('should debounce search and reload secrets', fakeAsync(() => {
+      mockSecretsService.fetchSecrets.calls.reset();
+
+      component.onSearchChange('api');
+      component.onSearchChange('api-');
+      component.onSearchChange('api-key');
+
+      tick(300);
+
+      expect(mockSecretsService.fetchSecrets).toHaveBeenCalledTimes(1);
+    }));
+
+    it('should reset to page 1 on search', fakeAsync(() => {
+      component.pagination.currentPage = 3;
+      mockSecretsService.fetchSecrets.calls.reset();
+
+      component.onSearchChange('test');
+      tick(300);
+
+      expect(component.pagination.currentPage).toBe(1);
+    }));
+  });
+
+  describe('secretsUpdated subscription', () => {
+    it('should reload secrets when secretsUpdated emits', () => {
+      mockSecretsService.fetchSecrets.calls.reset();
+
+      secretsUpdatedSubject.next('created');
+
+      expect(mockSecretsService.fetchSecrets).toHaveBeenCalled();
+    });
+
+    it('should not reload secrets when secretsUpdated emits empty string', () => {
+      mockSecretsService.fetchSecrets.calls.reset();
+
+      secretsUpdatedSubject.next('');
+
+      expect(mockSecretsService.fetchSecrets).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('loadSecrets', () => {
+    it('should set loading to true while fetching', () => {
+      component.loading = false;
+      mockSecretsService.fetchSecrets.and.returnValue(of(mockSecretsResponse));
+
+      component.loadSecrets();
+
+      expect(component.loading).toBeFalse();
+    });
+
+    it('should update secrets and pagination on successful fetch', () => {
+      const newResponse = {
+        data: [mockSecret, { ...mockSecret, id: '2', slug: 'test-2' }],
+        pagination: { total: 2, currentPage: 1, perPage: 20, lastPage: 1 }
+      };
+      mockSecretsService.fetchSecrets.and.returnValue(of(newResponse));
+
+      component.loadSecrets();
+
+      expect(component.secrets).toEqual(newResponse.data);
+      expect(component.pagination).toEqual(newResponse.pagination);
+    });
+
+    it('should pass search query to fetchSecrets', () => {
+      mockSecretsService.fetchSecrets.calls.reset();
+      component.searchQuery = 'api-key';
+
+      component.loadSecrets();
+
+      expect(mockSecretsService.fetchSecrets).toHaveBeenCalledWith(1, 20, 'api-key');
+    });
+
+    it('should pass undefined for empty search query', () => {
+      mockSecretsService.fetchSecrets.calls.reset();
+      component.searchQuery = '';
+
+      component.loadSecrets();
+
+      expect(mockSecretsService.fetchSecrets).toHaveBeenCalledWith(1, 20, undefined);
+    });
+  });
+
+  describe('ngOnDestroy', () => {
+    it('should unsubscribe from all subscriptions', () => {
+      const unsubscribeSpy = spyOn(component['subscriptions'][0], 'unsubscribe');
+
+      component.ngOnDestroy();
+
+      expect(unsubscribeSpy).toHaveBeenCalled();
+    });
   });
 });
diff --git a/frontend/src/app/services/secrets.service.spec.ts b/frontend/src/app/services/secrets.service.spec.ts
new file mode 100644
index 000000000..033281f14
--- /dev/null
+++ b/frontend/src/app/services/secrets.service.spec.ts
@@ -0,0 +1,522 @@
+import { TestBed } from '@angular/core/testing';
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+
+import { SecretsService } from './secrets.service';
+import { NotificationsService } from './notifications.service';
+import {
+  Secret,
+  SecretListResponse,
+  AuditLogResponse,
+  CreateSecretPayload,
+  UpdateSecretPayload,
+  DeleteSecretResponse,
+} from '../models/secret';
+
+describe('SecretsService', () => {
+  let service: SecretsService;
+  let httpMock: HttpTestingController;
+  let fakeNotifications: jasmine.SpyObj<NotificationsService>;
+
+  const mockSecret: Secret = {
+    id: '1',
+    slug: 'test-secret',
+    companyId: 'company-1',
+    createdAt: '2024-01-01T00:00:00Z',
+    updatedAt: '2024-01-01T00:00:00Z',
+    masterEncryption: false,
+  };
+
+  const mockSecretWithExpiration: Secret = {
+    ...mockSecret,
+    expiresAt: '2025-01-01T00:00:00Z',
+  };
+
+  const mockSecretListResponse: SecretListResponse = {
+    data: [mockSecret, mockSecretWithExpiration],
+    pagination: {
+      total: 2,
+      currentPage: 1,
+      perPage: 20,
+      lastPage: 1,
+    },
+  };
+
+  const mockAuditLogResponse: AuditLogResponse = {
+    data: [
+      {
+        id: '1',
+        action: 'create',
+        user: { id: 'user-1', email: 'user@example.com' },
+        accessedAt: '2024-01-01T00:00:00Z',
+        success: true,
+      },
+      {
+        id: '2',
+        action: 'view',
+        user: { id: 'user-1', email: 'user@example.com' },
+        accessedAt: '2024-01-02T00:00:00Z',
+        success: true,
+      },
+    ],
+    pagination: {
+      total: 2,
+      currentPage: 1,
+      perPage: 50,
+      lastPage: 1,
+    },
+  };
+
+  const mockDeleteResponse: DeleteSecretResponse = {
+    message: 'Secret deleted successfully',
+    deletedAt: '2024-01-01T00:00:00Z',
+  };
+
+  const fakeError = {
+    message: 'Something went wrong',
+    statusCode: 400,
+  };
+
+  beforeEach(() => {
+    fakeNotifications = jasmine.createSpyObj('NotificationsService', [
+      'showErrorSnackbar',
+      'showSuccessSnackbar',
+    ]);
+
+    TestBed.configureTestingModule({
+      imports: [MatSnackBarModule],
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        SecretsService,
+        { provide: NotificationsService, useValue: fakeNotifications },
+      ],
+    });
+
+    service = TestBed.inject(SecretsService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('fetchSecrets', () => {
+    it('should fetch secrets with default pagination', () => {
+      let result: SecretListResponse | undefined;
+
+      service.fetchSecrets().subscribe((res) => {
+        result = res;
+      });
+
+      const req = httpMock.expectOne('/secrets?page=1&limit=20');
+      expect(req.request.method).toBe('GET');
+      req.flush(mockSecretListResponse);
+
+      expect(result).toEqual(mockSecretListResponse);
+    });
+
+    it('should fetch secrets with custom pagination', () => {
+      let result: SecretListResponse | undefined;
+
+      service.fetchSecrets(2, 10).subscribe((res) => {
+        result = res;
+      });
+
+      const req = httpMock.expectOne('/secrets?page=2&limit=10');
+      expect(req.request.method).toBe('GET');
+      req.flush(mockSecretListResponse);
+
+      expect(result).toEqual(mockSecretListResponse);
+    });
+
+    it('should fetch secrets with search query', () => {
+      let result: SecretListResponse | undefined;
+
+      service.fetchSecrets(1, 20, 'api-key').subscribe((res) => {
+        result = res;
+      });
+
+      const req = httpMock.expectOne('/secrets?page=1&limit=20&search=api-key');
+      expect(req.request.method).toBe('GET');
+      req.flush(mockSecretListResponse);
+
+      expect(result).toEqual(mockSecretListResponse);
+    });
+
+    it('should show error snackbar on fetch failure', async () => {
+      const promise = service.fetchSecrets().toPromise();
+
+      const req = httpMock.expectOne('/secrets?page=1&limit=20');
+      req.flush(fakeError, { status: 400, statusText: 'Bad Request' });
+
+      await promise;
+
+      expect(fakeNotifications.showErrorSnackbar).toHaveBeenCalledWith(fakeError.message);
+    });
+
+    it('should show default error message when error has no message', async () => {
+      const promise = service.fetchSecrets().toPromise();
+
+      const req = httpMock.expectOne('/secrets?page=1&limit=20');
+      req.flush({}, { status: 500, statusText: 'Internal Server Error' });
+
+      await promise;
+
+      expect(fakeNotifications.showErrorSnackbar).toHaveBeenCalledWith('Failed to fetch secrets');
+    });
+  });
+
+  describe('createSecret', () => {
+    const createPayload: CreateSecretPayload = {
+      slug: 'new-secret',
+      value: 'secret-value',
+    };
+
+    it('should create a secret successfully', () => {
+      let result: Secret | undefined;
+
+      service.createSecret(createPayload).subscribe((res) => {
+        result = res;
+      });
+
+      const req = httpMock.expectOne('/secrets');
+      expect(req.request.method).toBe('POST');
+      expect(req.request.body).toEqual(createPayload);
+      req.flush(mockSecret);
+
+      expect(result).toEqual(mockSecret);
+      expect(fakeNotifications.showSuccessSnackbar).toHaveBeenCalledWith('Secret created successfully');
+    });
+
+    it('should create a secret with expiration', () => {
+      const payloadWithExpiration: CreateSecretPayload = {
+        ...createPayload,
+        expiresAt: '2025-01-01T00:00:00Z',
+      };
+
+      service.createSecret(payloadWithExpiration).subscribe();
+
+      const req = httpMock.expectOne('/secrets');
+      expect(req.request.body).toEqual(payloadWithExpiration);
+      req.flush(mockSecretWithExpiration);
+    });
+
+    it('should create a secret with master encryption', () => {
+      const payloadWithEncryption: CreateSecretPayload = {
+        ...createPayload,
+        masterEncryption: true,
+        masterPassword: 'my-master-password',
+      };
+
+      service.createSecret(payloadWithEncryption).subscribe();
+
+      const req = httpMock.expectOne('/secrets');
+      expect(req.request.body).toEqual(payloadWithEncryption);
+      req.flush({ ...mockSecret, masterEncryption: true });
+    });
+
+    it('should emit secretsUpdated on successful creation', () => {
+      let updateAction: string | undefined;
+      service.cast.subscribe((action) => {
+        updateAction = action;
+      });
+
+      service.createSecret(createPayload).subscribe();
+
+      const req = httpMock.expectOne('/secrets');
+      req.flush(mockSecret);
+
+      expect(updateAction).toBe('created');
+    });
+
+    it('should show conflict error when slug already exists', async () => {
+      const promise = service.createSecret(createPayload).toPromise();
+
+      const req = httpMock.expectOne('/secrets');
+      req.flush({ message: 'Conflict' }, { status: 409, statusText: 'Conflict' });
+
+      await promise;
+
+      expect(fakeNotifications.showErrorSnackbar).toHaveBeenCalledWith(
+        'A secret with this slug already exists'
+      );
+    });
+
+    it('should show generic error on other failures', async () => {
+      const promise = service.createSecret(createPayload).toPromise();
+
+      const req = httpMock.expectOne('/secrets');
+      req.flush(fakeError, { status: 400, statusText: 'Bad Request' });
+
+      await promise;
+
+      expect(fakeNotifications.showErrorSnackbar).toHaveBeenCalledWith(fakeError.message);
+    });
+  });
+
+  describe('updateSecret', () => {
+    const updatePayload: UpdateSecretPayload = {
+      value: 'new-value',
+    };
+
+    it('should update a secret successfully', () => {
+      let result: Secret | undefined;
+
+      service.updateSecret('test-secret', updatePayload).subscribe((res) => {
+        result = res;
+      });
+
+      const req = httpMock.expectOne('/secrets/test-secret');
+      expect(req.request.method).toBe('PUT');
+      expect(req.request.body).toEqual(updatePayload);
+      req.flush(mockSecret);
+
+      expect(result).toEqual(mockSecret);
+      expect(fakeNotifications.showSuccessSnackbar).toHaveBeenCalledWith('Secret updated successfully');
+    });
+
+    it('should update a secret with new expiration', () => {
+      const payloadWithExpiration: UpdateSecretPayload = {
+        ...updatePayload,
+        expiresAt: '2026-01-01T00:00:00Z',
+      };
+
+      service.updateSecret('test-secret', payloadWithExpiration).subscribe();
+
+      const req = httpMock.expectOne('/secrets/test-secret');
+      expect(req.request.body).toEqual(payloadWithExpiration);
+      req.flush(mockSecretWithExpiration);
+    });
+
+    it('should clear expiration when expiresAt is null', () => {
+      const payloadClearExpiration: UpdateSecretPayload = {
+        ...updatePayload,
+        expiresAt: null,
+      };
+
+      service.updateSecret('test-secret', payloadClearExpiration).subscribe();
+
+      const req = httpMock.expectOne('/secrets/test-secret');
+      expect(req.request.body).toEqual(payloadClearExpiration);
+      req.flush(mockSecret);
+    });
+
+    it('should send master password in header when provided', () => {
+      service.updateSecret('test-secret', updatePayload, 'master-password-123').subscribe();
+
+      const req = httpMock.expectOne('/secrets/test-secret');
+      expect(req.request.headers.get('masterpwd')).toBe('master-password-123');
+      req.flush(mockSecret);
+    });
+
+    it('should not send master password header when not provided', () => {
+      service.updateSecret('test-secret', updatePayload).subscribe();
+
+      const req = httpMock.expectOne('/secrets/test-secret');
+      expect(req.request.headers.has('masterpwd')).toBeFalse();
+      req.flush(mockSecret);
+    });
+
+    it('should emit secretsUpdated on successful update', () => {
+      let updateAction: string | undefined;
+      service.cast.subscribe((action) => {
+        updateAction = action;
+      });
+
+      service.updateSecret('test-secret', updatePayload).subscribe();
+
+      const req = httpMock.expectOne('/secrets/test-secret');
+      req.flush(mockSecret);
+
+      expect(updateAction).toBe('updated');
+    });
+
+    it('should throw error on 403 (invalid master password)', async () => {
+      let errorThrown = false;
+
+      service.updateSecret('test-secret', updatePayload, 'wrong-password').subscribe({
+        error: (err) => {
+          errorThrown = true;
+          expect(err.status).toBe(403);
+        },
+      });
+
+      const req = httpMock.expectOne('/secrets/test-secret');
+      req.flush({ message: 'Invalid master password' }, { status: 403, statusText: 'Forbidden' });
+
+      expect(errorThrown).toBeTrue();
+    });
+
+    it('should show error for expired secret (410)', async () => {
+      const promise = service.updateSecret('test-secret', updatePayload).toPromise();
+
+      const req = httpMock.expectOne('/secrets/test-secret');
+      req.flush({ message: 'Secret expired' }, { status: 410, statusText: 'Gone' });
+
+      await promise;
+
+      expect(fakeNotifications.showErrorSnackbar).toHaveBeenCalledWith(
+        'Cannot update an expired secret'
+      );
+    });
+
+    it('should show generic error on other failures', async () => {
+      const promise = service.updateSecret('test-secret', updatePayload).toPromise();
+
+      const req = httpMock.expectOne('/secrets/test-secret');
+      req.flush(fakeError, { status: 400, statusText: 'Bad Request' });
+
+      await promise;
+
+      expect(fakeNotifications.showErrorSnackbar).toHaveBeenCalledWith(fakeError.message);
+    });
+  });
+
+  describe('deleteSecret', () => {
+    it('should delete a secret successfully', () => {
+      let result: DeleteSecretResponse | undefined;
+
+      service.deleteSecret('test-secret').subscribe((res) => {
+        result = res;
+      });
+
+      const req = httpMock.expectOne('/secrets/test-secret');
+      expect(req.request.method).toBe('DELETE');
+      req.flush(mockDeleteResponse);
+
+      expect(result).toEqual(mockDeleteResponse);
+      expect(fakeNotifications.showSuccessSnackbar).toHaveBeenCalledWith('Secret deleted successfully');
+    });
+
+    it('should emit secretsUpdated on successful deletion', () => {
+      let updateAction: string | undefined;
+      service.cast.subscribe((action) => {
+        updateAction = action;
+      });
+
+      service.deleteSecret('test-secret').subscribe();
+
+      const req = httpMock.expectOne('/secrets/test-secret');
+      req.flush(mockDeleteResponse);
+
+      expect(updateAction).toBe('deleted');
+    });
+
+    it('should show error on delete failure', async () => {
+      const promise = service.deleteSecret('test-secret').toPromise();
+
+      const req = httpMock.expectOne('/secrets/test-secret');
+      req.flush(fakeError, { status: 400, statusText: 'Bad Request' });
+
+      await promise;
+
+      expect(fakeNotifications.showErrorSnackbar).toHaveBeenCalledWith(fakeError.message);
+    });
+
+    it('should show default error message when error has no message', async () => {
+      const promise = service.deleteSecret('test-secret').toPromise();
+
+      const req = httpMock.expectOne('/secrets/test-secret');
+      req.flush({}, { status: 500, statusText: 'Internal Server Error' });
+
+      await promise;
+
+      expect(fakeNotifications.showErrorSnackbar).toHaveBeenCalledWith('Failed to delete secret');
+    });
+  });
+
+  describe('getAuditLog', () => {
+    it('should fetch audit log with default pagination', () => {
+      let result: AuditLogResponse | undefined;
+
+      service.getAuditLog('test-secret').subscribe((res) => {
+        result = res;
+      });
+
+      const req = httpMock.expectOne('/secrets/test-secret/audit-log?page=1&limit=50');
+      expect(req.request.method).toBe('GET');
+      req.flush(mockAuditLogResponse);
+
+      expect(result).toEqual(mockAuditLogResponse);
+    });
+
+    it('should fetch audit log with custom pagination', () => {
+      let result: AuditLogResponse | undefined;
+
+      service.getAuditLog('test-secret', 2, 25).subscribe((res) => {
+        result = res;
+      });
+
+      const req = httpMock.expectOne('/secrets/test-secret/audit-log?page=2&limit=25');
+      expect(req.request.method).toBe('GET');
+      req.flush(mockAuditLogResponse);
+
+      expect(result).toEqual(mockAuditLogResponse);
+    });
+
+    it('should show error on audit log fetch failure', async () => {
+      const promise = service.getAuditLog('test-secret').toPromise();
+
+      const req = httpMock.expectOne('/secrets/test-secret/audit-log?page=1&limit=50');
+      req.flush(fakeError, { status: 400, statusText: 'Bad Request' });
+
+      await promise;
+
+      expect(fakeNotifications.showErrorSnackbar).toHaveBeenCalledWith(fakeError.message);
+    });
+
+    it('should show default error message when error has no message', async () => {
+      const promise = service.getAuditLog('test-secret').toPromise();
+
+      const req = httpMock.expectOne('/secrets/test-secret/audit-log?page=1&limit=50');
+      req.flush({}, { status: 500, statusText: 'Internal Server Error' });
+
+      await promise;
+
+      expect(fakeNotifications.showErrorSnackbar).toHaveBeenCalledWith('Failed to fetch audit log');
+    });
+  });
+
+  describe('cast observable', () => {
+    it('should initially emit empty string', () => {
+      let emittedValue: string | undefined;
+
+      service.cast.subscribe((value) => {
+        emittedValue = value;
+      });
+
+      expect(emittedValue).toBe('');
+    });
+
+    it('should emit actions when secrets are modified', () => {
+      const emittedValues: string[] = [];
+
+      service.cast.subscribe((value) => {
+        emittedValues.push(value);
+      });
+
+      // Create a secret
+      service.createSecret({ slug: 'test', value: 'value' }).subscribe();
+      const createReq = httpMock.expectOne('/secrets');
+      createReq.flush(mockSecret);
+
+      // Update a secret
+      service.updateSecret('test', { value: 'new-value' }).subscribe();
+      const updateReq = httpMock.expectOne('/secrets/test');
+      updateReq.flush(mockSecret);
+
+      // Delete a secret
+      service.deleteSecret('test').subscribe();
+      const deleteReq = httpMock.expectOne('/secrets/test');
+      deleteReq.flush(mockDeleteResponse);
+
+      expect(emittedValues).toEqual(['', 'created', 'updated', 'deleted']);
+    });
+  });
+});
diff --git a/frontend/src/app/services/secrets.service.ts b/frontend/src/app/services/secrets.service.ts
index 3254c9ac0..1cce0ff2a 100644
--- a/frontend/src/app/services/secrets.service.ts
+++ b/frontend/src/app/services/secrets.service.ts
@@ -67,7 +67,7 @@ export class SecretsService {
   updateSecret(slug: string, payload: UpdateSecretPayload, masterPassword?: string): Observable<Secret> {
     let headers = new HttpHeaders();
     if (masterPassword) {
-      headers = headers.set('masterPassword', masterPassword);
+      headers = headers.set('masterpwd', masterPassword);
     }
 
     return this._http.put<Secret>(`/secrets/${slug}`, payload, { headers })

From 33aa897d8025e262cfcac7e72f6a3010b3d15578 Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Fri, 12 Dec 2025 21:06:41 +0000
Subject: [PATCH 9/9] fix tests

---
 frontend/buildspec.yml                        | 34 -------------------
 .../audit-log-dialog.component.spec.ts        | 23 ++++++++-----
 .../secrets/secrets.component.spec.ts         | 13 ++++---
 3 files changed, 23 insertions(+), 47 deletions(-)
 delete mode 100644 frontend/buildspec.yml

diff --git a/frontend/buildspec.yml b/frontend/buildspec.yml
deleted file mode 100644
index ac0a88ecd..000000000
--- a/frontend/buildspec.yml
+++ /dev/null
@@ -1,34 +0,0 @@
-version: 0.2
-env:
-    variables:
-        S3_BUCKET: "autoadmin-front-v2"
-APP_NAME: "dissendium"
-BUILD_ENV : "prod"
-phases:
-    install:
-        commands:
-        - n 16
-        - yarn global add @angular/cli
-        # Install node dependancies.
-        - cd frontend && yarn install
-        - echo '#!/bin/bash' > /usr/local/bin/ok; echo 'if [[ "$CODEBUILD_BUILD_SUCCEEDING" == "0" ]]; then exit 1; else exit 0; fi' >> /usr/local/bin/ok; chmod +x /usr/local/bin/ok
-    build:
-        commands:
-        # Builds Angular application. You can also build using custom environment here like mock or staging
-        - echo Build started on `date`
-        - ng build --configuration=saas
-        - aws ecr-public get-login-password --region us-east-1 | docker login --username AWS --password-stdin public.ecr.aws/o1a6p9d1
-        - docker build -t frontend .
-        - docker tag frontend:latest public.ecr.aws/o1a6p9d1/frontend:latest
-        - docker push public.ecr.aws/o1a6p9d1/frontend:latest
-
-    post_build:
-        commands:
-        # Clear S3 bucket.
-        - ok && aws s3 rm s3://${S3_BUCKET} --recursive
-        - echo S3 bucket is cleared.
-        # Copy dist folder to S3 bucket, As of Angular 6, builds are stored inside an app folder in distribution and not at the root of the dist folder
-        - ok && aws s3 cp --acl=public-read dist s3://${S3_BUCKET}/${APP_NAME} --recursive
-        - ok && aws cloudfront create-invalidation --distribution-id=E1OBEHQ0QC01GL "--paths=/*"
-        - echo Build completed on `date`
-
diff --git a/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.spec.ts b/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.spec.ts
index 7d2980bfd..cbb09b9ee 100644
--- a/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.spec.ts
+++ b/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.spec.ts
@@ -35,12 +35,12 @@ describe('AuditLogDialogComponent', () => {
     success: true,
   };
 
-  const mockAuditLogResponse: AuditLogResponse = {
+  const createMockAuditLogResponse = (): AuditLogResponse => ({
     data: [mockAuditLogEntry],
     pagination: { total: 1, currentPage: 1, perPage: 20, lastPage: 1 },
-  };
+  });
 
-  const mockMultipleLogsResponse: AuditLogResponse = {
+  const createMockMultipleLogsResponse = (): AuditLogResponse => ({
     data: [
       mockAuditLogEntry,
       {
@@ -74,11 +74,11 @@ describe('AuditLogDialogComponent', () => {
       },
     ],
     pagination: { total: 5, currentPage: 1, perPage: 20, lastPage: 1 },
-  };
+  });
 
   beforeEach(async () => {
     mockSecretsService = jasmine.createSpyObj('SecretsService', ['getAuditLog']);
-    mockSecretsService.getAuditLog.and.returnValue(of(mockAuditLogResponse));
+    mockSecretsService.getAuditLog.and.callFake(() => of(createMockAuditLogResponse()));
 
     mockDialogRef = jasmine.createSpyObj('MatDialogRef', ['close']);
 
@@ -204,7 +204,7 @@ describe('AuditLogDialogComponent', () => {
   describe('loadAuditLog', () => {
     it('should set loading to true while fetching', () => {
       component.loading = false;
-      mockSecretsService.getAuditLog.and.returnValue(of(mockAuditLogResponse));
+      mockSecretsService.getAuditLog.and.callFake(() => of(createMockAuditLogResponse()));
 
       component.loadAuditLog();
 
@@ -212,7 +212,7 @@ describe('AuditLogDialogComponent', () => {
     });
 
     it('should update logs on successful fetch', () => {
-      mockSecretsService.getAuditLog.and.returnValue(of(mockMultipleLogsResponse));
+      mockSecretsService.getAuditLog.and.callFake(() => of(createMockMultipleLogsResponse()));
 
       component.loadAuditLog();
 
@@ -220,7 +220,7 @@ describe('AuditLogDialogComponent', () => {
     });
 
     it('should update pagination on successful fetch', () => {
-      mockSecretsService.getAuditLog.and.returnValue(of(mockMultipleLogsResponse));
+      mockSecretsService.getAuditLog.and.callFake(() => of(createMockMultipleLogsResponse()));
 
       component.loadAuditLog();
 
@@ -246,6 +246,11 @@ describe('AuditLogDialogComponent', () => {
         length: 100
       };
 
+      // Update mock to return pagination matching the page change
+      mockSecretsService.getAuditLog.and.callFake(() => of({
+        data: [mockAuditLogEntry],
+        pagination: { total: 100, currentPage: 3, perPage: 50, lastPage: 2 }
+      }));
       mockSecretsService.getAuditLog.calls.reset();
       component.onPageChange(pageEvent);
 
@@ -270,7 +275,7 @@ describe('AuditLogDialogComponent', () => {
 
   describe('with multiple audit log entries', () => {
     beforeEach(() => {
-      mockSecretsService.getAuditLog.and.returnValue(of(mockMultipleLogsResponse));
+      mockSecretsService.getAuditLog.and.callFake(() => of(createMockMultipleLogsResponse()));
       component.loadAuditLog();
     });
 
diff --git a/frontend/src/app/components/secrets/secrets.component.spec.ts b/frontend/src/app/components/secrets/secrets.component.spec.ts
index d0a2f6a74..d75d56347 100644
--- a/frontend/src/app/components/secrets/secrets.component.spec.ts
+++ b/frontend/src/app/components/secrets/secrets.component.spec.ts
@@ -34,10 +34,10 @@ describe('SecretsComponent', () => {
     masterEncryption: false,
   };
 
-  const mockSecretsResponse = {
+  const createMockSecretsResponse = () => ({
     data: [mockSecret],
     pagination: { total: 1, currentPage: 1, perPage: 20, lastPage: 1 }
-  };
+  });
 
   beforeEach(async () => {
     secretsUpdatedSubject = new BehaviorSubject<string>('');
@@ -45,7 +45,7 @@ describe('SecretsComponent', () => {
     mockSecretsService = jasmine.createSpyObj('SecretsService', ['fetchSecrets'], {
       cast: secretsUpdatedSubject.asObservable()
     });
-    mockSecretsService.fetchSecrets.and.returnValue(of(mockSecretsResponse));
+    mockSecretsService.fetchSecrets.and.callFake(() => of(createMockSecretsResponse()));
 
     mockCompanyService = jasmine.createSpyObj('CompanyService', ['getCurrentTabTitle']);
     mockCompanyService.getCurrentTabTitle.and.returnValue(of('Test Company'));
@@ -215,6 +215,11 @@ describe('SecretsComponent', () => {
         length: 100
       };
 
+      // Update mock to return pagination matching the page change
+      mockSecretsService.fetchSecrets.and.callFake(() => of({
+        data: [mockSecret],
+        pagination: { total: 100, currentPage: 2, perPage: 10, lastPage: 10 }
+      }));
       mockSecretsService.fetchSecrets.calls.reset();
       component.onPageChange(pageEvent);
 
@@ -269,7 +274,7 @@ describe('SecretsComponent', () => {
   describe('loadSecrets', () => {
     it('should set loading to true while fetching', () => {
       component.loading = false;
-      mockSecretsService.fetchSecrets.and.returnValue(of(mockSecretsResponse));
+      mockSecretsService.fetchSecrets.and.callFake(() => of(createMockSecretsResponse()));
 
       component.loadSecrets();