diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css
index c0dbacf53..a8a412789 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.css
@@ -175,12 +175,69 @@
 }
 
 .related-records__table-name {
-	flex: 1 0 auto;
+	flex: 1 1 auto;
+	min-width: 0;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-right: 8px;
+}
+
+.related-records__table-name-text {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	min-width: 0;
 }
 
 .related-records__actions {
-	flex-grow: 0;
+	flex: 0 0 auto;
 	justify-content: flex-end;
+	/* Stay clickable even when the panel is disabled (no related records). */
+	pointer-events: auto;
+}
+
+/* Keep the action icons fully dark in every panel state (enabled or
+   disabled), instead of Material's lighter default icon color. */
+.related-records__actions .mat-icon {
+	color: rgba(0, 0, 0, 0.87);
+}
+
+@media (prefers-color-scheme: dark) {
+	.related-records__actions .mat-icon {
+		color: rgba(255, 255, 255, 0.87);
+	}
+}
+
+.related-records__empty-mark {
+	flex: 0 0 auto;
+	font-size: 11px;
+	line-height: 16px;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	padding: 1px 6px;
+	border-radius: 8px;
+	color: rgba(0, 0, 0, 0.5);
+	background: rgba(0, 0, 0, 0.06);
+}
+
+.related-records__add-button {
+	flex: 0 0 auto;
+	white-space: nowrap;
+}
+
+/* Keep header content legible when the panel is disabled (no related
+   records) — disabling only blocks expand/collapse, not the actions. */
+.related-records__panel ::ng-deep .mat-expansion-panel-header[aria-disabled='true'] {
+	color: inherit;
+	cursor: default;
+}
+
+@media (prefers-color-scheme: dark) {
+	.related-records__empty-mark {
+		color: rgba(255, 255, 255, 0.6);
+		background: rgba(255, 255, 255, 0.1);
+	}
 }
 
 .related-record {
@@ -207,3 +264,7 @@
 .related-records__panel ::ng-deep .mat-expansion-panel-body {
 	padding: 0 8px;
 }
+.related-record ::ng-deep .mdc-list-item__end {
+	margin-right: -8px !important;
+	margin-left: 4px !important;
+}
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
index 572a39908..f765fdc64 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-row-view/db-table-row-view.component.html
@@ -31,19 +31,33 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
         <h3 class="related-records-section__title">Related records</h3>
 
         <mat-accordion multi="true">
-            <mat-expansion-panel *ngFor="let referencedTable of referencedTables; let i = index" class="related-records__panel">
+            <mat-expansion-panel *ngFor="let referencedTable of referencedTables; let i = index" class="related-records__panel"
+                [disabled]="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rows.length"
+                [hideToggle]="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rows.length">
                 <mat-expansion-panel-header class="related-records__header">
-                    <mat-panel-title class="related-records__table-name"> {{referencedTable.displayTableName}} </mat-panel-title>
+                    <mat-panel-title class="related-records__table-name">
+                        <span class="related-records__table-name-text" [matTooltip]="referencedTable.displayTableName">{{referencedTable.displayTableName}}</span>
+                        <span *ngIf="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rows.length"
+                            class="related-records__empty-mark">
+                            Empty
+                        </span>
+                    </mat-panel-title>
                     <mat-panel-description class="related-records__actions">
                         <mat-spinner *ngIf="!referencedRecords[referencedTable.table_name]" diameter="20"></mat-spinner>
-                        <span *ngIf="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rows.length">Absent</span>
-                        <a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name] && referencedRecords[referencedTable.table_name].rows.length"
+                        <a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name]" target="_blank"
+                            class="related-records__add-button"
+                            routerLink="/dashboard/{{selectedRow.connectionID}}/{{referencedTable.table_name}}/entry"
+                            matTooltip="Add a new record to {{referencedTable.displayTableName}}"
+                            (click)="handleClose(); $event.stopPropagation()">
+                            <mat-icon>add</mat-icon>
+                        </a>
+                        <!--<a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name] && referencedRecords[referencedTable.table_name].rows.length"
                             target="_blank"
                             [routerLink]="['/dashboard', selectedRow.connectionID, referencedTable.table_name, 'settings']"
                             matTooltip="Set up records view"
                             (click)="handleClose()">
                             <mat-icon>settings</mat-icon>
-                        </a>
+                        </a>-->
                         <a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name]" target="_blank"
                             routerLink="/dashboard/{{selectedRow.connectionID}}/{{referencedTable.table_name}}"
                             [queryParams]="referencedTablesURLParams[i]"
@@ -70,14 +84,17 @@ <h3 class="related-records-section__title">Related records</h3>
                             </span>
                         </span>
 
-                        <a matListItemMeta mat-icon-button
-                            class="related-record__open"
-                            matTooltip="Open record"
-                            [routerLink]="['/dashboard', selectedRow.connectionID, referencedTable.table_name, 'entry']"
-                            [queryParams]="referencedRecords[referencedTable.table_name]?.links[i]"
-                            (click)="handleClose()">
-                            <mat-icon>chevron_right</mat-icon>
-                        </a>
+                        <div matListItemMeta>
+                            <a mat-icon-button
+                                class="related-record__open"
+                                matTooltip="Open record"
+                                [routerLink]="['/dashboard', selectedRow.connectionID, referencedTable.table_name, 'entry']"
+                                [queryParams]="referencedRecords[referencedTable.table_name]?.links[i]"
+                                (click)="handleClose()">
+                                <mat-icon>chevron_right</mat-icon>
+                            </a>
+                        </div>
+                        
                     </mat-list-item>
                 </mat-list>
             </mat-expansion-panel>
diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css
index f3f9fe005..b909bbf76 100644
--- a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css
+++ b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css
@@ -156,12 +156,68 @@
 }
 
 .related-records__table-name {
-	flex: 1 0 auto;
+	flex: 1 1 auto;
+	min-width: 0;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-right: 8px;
+}
+
+.related-records__table-name-text {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	min-width: 0;
 }
 
 .related-records__actions {
-	flex-grow: 0;
+	flex: 0 0 auto;
 	justify-content: flex-end;
+	/* Stay clickable even when the panel is disabled (no related records). */
+	pointer-events: auto;
+}
+
+/* Keep the action icons fully dark in every panel state (enabled or
+   disabled), instead of Material's lighter default icon color. */
+.related-records__actions .mat-icon {
+	color: rgba(0, 0, 0, 0.87);
+}
+
+@media (prefers-color-scheme: dark) {
+	.related-records__actions .mat-icon {
+		color: rgba(255, 255, 255, 0.87);
+	}
+}
+
+/* Keep header content legible when the panel is disabled (no related
+   records) — disabling only blocks expand/collapse, not the actions. */
+.related-records__panel ::ng-deep .mat-expansion-panel-header[aria-disabled='true'] {
+	color: inherit;
+	cursor: default;
+}
+
+.related-records__empty-mark {
+	flex: 0 0 auto;
+	font-size: 11px;
+	line-height: 16px;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+	padding: 1px 6px;
+	border-radius: 8px;
+	color: rgba(0, 0, 0, 0.5);
+	background: rgba(0, 0, 0, 0.06);
+}
+
+.related-records__add-button {
+	flex: 0 0 auto;
+}
+
+@media (prefers-color-scheme: dark) {
+	.related-records__empty-mark {
+		color: rgba(255, 255, 255, 0.6);
+		background: rgba(255, 255, 255, 0.1);
+	}
 }
 
 .related-record {
diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html
index 2507bf608..ee21e4224 100644
--- a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html
+++ b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.html
@@ -77,16 +77,25 @@ <h3>
             </h3>
 
             <mat-accordion multi="true">
-                <mat-expansion-panel *ngFor="let referencedTable of referencedTables; let i = index" class="related-records__panel">
+                <mat-expansion-panel *ngFor="let referencedTable of referencedTables; let i = index" class="related-records__panel"
+                    [disabled]="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rawRows.length"
+                    [hideToggle]="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rawRows.length">
                     <mat-expansion-panel-header>
-                        <mat-panel-title class="related-records__table-name"> {{referencedTable.displayTableName}} </mat-panel-title>
+                        <mat-panel-title class="related-records__table-name">
+                            <span class="related-records__table-name-text" [matTooltip]="referencedTable.displayTableName">{{referencedTable.displayTableName}}</span>
+                            <span *ngIf="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rawRows.length"
+                                class="related-records__empty-mark">
+                                Empty
+                            </span>
+                        </mat-panel-title>
                         <mat-panel-description class="related-records__actions">
                             <mat-spinner *ngIf="!referencedRecords[referencedTable.table_name]" diameter="20"></mat-spinner>
-                            <span *ngIf="referencedRecords[referencedTable.table_name] && !referencedRecords[referencedTable.table_name].rawRows.length">Absent</span>
-                            <a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name] && referencedRecords[referencedTable.table_name].rawRows.length"
-                                [routerLink]="['/dashboard', connectionID, referencedTable.table_name, 'settings']"
-                                matTooltip="Set up records view">
-                                <mat-icon>settings</mat-icon>
+                            <a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name]" target="_blank"
+                                class="related-records__add-button"
+                                routerLink="/dashboard/{{connectionID}}/{{referencedTable.table_name}}/entry"
+                                matTooltip="Add a new record to {{referencedTable.displayTableName}}"
+                                (click)="$event.stopPropagation()">
+                                <mat-icon>add</mat-icon>
                             </a>
                             <a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name]"
                                 routerLink="/dashboard/{{connectionID}}/{{referencedTable.table_name}}"