diff --git a/src/app/record/components/top-bar/top-bar.component.html b/src/app/record/components/top-bar/top-bar.component.html
index 2c6eb3a13..0174c2c85 100644
--- a/src/app/record/components/top-bar/top-bar.component.html
+++ b/src/app/record/components/top-bar/top-bar.component.html
@@ -141,18 +141,21 @@ <h2 header class="names-header orc-font-body" i18n="@@topBar.names">
         <app-panel-element
           [visibility]="userRecord.names.visibility.visibility"
         >
-          <h1 class="name" *ngIf="creditName">
-            <span i18n="@@topBar.publishedName" class="mat-caption">
+          <ng-container *ngIf="creditName">
+            <span
+              i18n="@@topBar.publishedName"
+              class="mat-caption description"
+            >
               Published Name
             </span>
-            <p class="mat-card-title published-name" id="publishedName">
+            <h1 class="published-name" id="publishedName">
               {{ creditName }}
-            </p>
-          </h1>
+            </h1>
+          </ng-container>
           <span i18n="@@topBar.name" class="mat-caption description">
             Name
           </span>
-          <div id="givenAndFamilyNames" class="mat-subtitle-2">
+          <div id="givenAndFamilyNames" class="mat-subtitle-2 name-value">
             {{ givenNames + ' ' + familyName }}
           </div>
         </app-panel-element>
diff --git a/src/app/record/components/top-bar/top-bar.component.scss b/src/app/record/components/top-bar/top-bar.component.scss
index b1d1e1ba0..bb8649e36 100644
--- a/src/app/record/components/top-bar/top-bar.component.scss
+++ b/src/app/record/components/top-bar/top-bar.component.scss
@@ -11,22 +11,51 @@ app-panel {
   width: 100%;
   margin-top: 16px;
 
-  .name,
   p {
-    margin-top: 0;
+    margin: 0;
   }
 
-  p .published-name {
-    margin-bottom: 18px;
+  .mat-caption.description {
+    display: block;
+    margin: 16px 0 8px;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  .published-name {
+    margin: 0;
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: bold;
+  }
+
+  .name-value {
+    margin: 0;
+    font-weight: bold;
   }
 
   .other-names-container {
-    margin-top: 18px;
+    margin-top: 16px;
 
     .other-names {
       margin-bottom: 0;
     }
   }
+
+  // Scoped to the names panel only: centre the visibility icon against
+  // the block it belongs to instead of the default flex `stretch`, so it
+  // stays aligned when the block wraps published name + name onto several
+  // lines. `app-panel-element` is shared by other panels, so this is kept
+  // local rather than changed at the source.
+  ::ng-deep .row-with-privacy {
+    align-items: center;
+  }
+
+  ::ng-deep app-panel-privacy {
+    margin-top: 0;
+  }
 }
 
 app-top-bar-actions {