diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/review-page-options/review-page-options.component.html b/src/dotnet/APIView/ClientSPA/src/app/_components/review-page-options/review-page-options.component.html
index e0a4a43155a..8bc12742e62 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/_components/review-page-options/review-page-options.component.html
+++ b/src/dotnet/APIView/ClientSPA/src/app/_components/review-page-options/review-page-options.component.html
@@ -28,6 +28,13 @@ <h6 class="mb-2 fw-semibold">Approval</h6>
                     </div>
                 </ng-template>
             </ng-container>
+            <ng-container *ngIf="userProfile?.permissions && !canApproveForReviewLanguage && activeAPIRevision && activeAPIRevision!.approvers.length > 0">
+                <div class="d-grid gap-2">
+                    <button class="btn btn-approved-pill" type="button" disabled aria-label="API revision approved">
+                        <i class="bi bi-check-circle-fill me-2"></i>Approved
+                    </button>
+                </div>
+            </ng-container>
             <span *ngIf="activeAPIRevision && activeAPIRevision!.approvers.length > 0; else noAPIRevisionApprovers" class="small text-muted mt-1">
                 Approved by: <a *ngFor="let approver of activeAPIRevision!.approvers" href="{{webAppUrl}}Assemblies/Profile/{{approver}}">{{approver}},&nbsp;</a>
             </span>
@@ -37,6 +44,13 @@ <h6 class="mb-2 fw-semibold">Approval</h6>
         </div>
         <div class="text-center py-2" *ngIf="review?.language !== 'TypeSpec' && review?.language !== 'Swagger'">
             <ng-container *ngIf="reviewIsApproved; else reviewIsNotApproved">
+                <ng-container *ngIf="userProfile?.permissions && !canApproveForReviewLanguage">
+                    <div class="d-grid gap-2 mb-1">
+                        <button class="btn btn-approved-pill" type="button" disabled aria-label="First release approved">
+                            <i class="bi bi-check-circle-fill me-2"></i>First Release Approved
+                        </button>
+                    </div>
+                </ng-container>
                 <span class="small text-muted mt-1" id="first-release-approval-message">Approved for first release by: <a href="{{webAppUrl}}Assemblies/Profile/{{reviewApprover}}">{{reviewApprover}}</a></span>
             </ng-container>
             <ng-template #reviewIsNotApproved>
diff --git a/src/dotnet/APIView/ClientSPA/src/app/_components/review-page-options/review-page-options.component.scss b/src/dotnet/APIView/ClientSPA/src/app/_components/review-page-options/review-page-options.component.scss
index 833ffd006d5..d6616f2db0a 100644
--- a/src/dotnet/APIView/ClientSPA/src/app/_components/review-page-options/review-page-options.component.scss
+++ b/src/dotnet/APIView/ClientSPA/src/app/_components/review-page-options/review-page-options.component.scss
@@ -1,4 +1,27 @@
 :host ::ng-deep {
+    // Approved-status pill shown to non-architect viewers in place of the
+    // Approve action button. Mirrors the size/shape of .btn-success so the
+    // approval status is visually unmissable. See issue #14724.
+    .btn-approved-pill {
+        background-color: var(--alert-success-bg);
+        color: var(--alert-success-color);
+        border: 1px solid var(--success-color);
+        font-weight: 600;
+        cursor: default;
+
+        &:disabled,
+        &.disabled {
+            background-color: var(--alert-success-bg);
+            color: var(--alert-success-color);
+            border-color: var(--success-color);
+            opacity: 1;
+        }
+
+        i {
+            color: var(--success-color);
+        }
+    }
+
     .p-multiselect .p-multiselect-label {
         padding: 0.25rem 0.5rem;
     }