diff --git a/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.html b/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.html
index ca6cfeba4..b8e7f95f3 100644
--- a/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.html
+++ b/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.html
@@ -12,7 +12,7 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
             </button>
             <a mat-icon-button *ngIf="selectedRow.link"
                 [routerLink]="selectedRow.link"
-                [queryParams]="selectedRow.primaryKeys"
+                [queryParams]="getDedicatedPageLinkParams()"
                 matTooltip="Open the record"
                 (click)="stashUrlParams()">
                 <mat-icon fontSet="material-icons-outlined">create</mat-icon>
@@ -39,13 +39,15 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
                         <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"
                             [routerLink]="['/dashboard', selectedRow.connectionID, referencedTable.table_name, 'settings']"
-                            matTooltip="Set up records view">
+                            matTooltip="Set up records view"
+                            (click)="handleClose()">
                             <mat-icon>settings</mat-icon>
                         </a>
                         <a mat-icon-button *ngIf="referencedRecords[referencedTable.table_name]"
                             routerLink="/dashboard/{{selectedRow.connectionID}}/{{referencedTable.table_name}}"
                             [queryParams]="referencedTablesURLParams[i]"
-                            matTooltip="Open records in table view">
+                            matTooltip="Open records in table view"
+                            (click)="handleClose()">
                             <mat-icon>open_in_new</mat-icon>
                         </a>
                     </mat-panel-description>
@@ -56,11 +58,18 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
                         [routerLink]="['/dashboard', selectedRow.connectionID, referencedTable.table_name, 'entry']"
                         [queryParams]="referencedRecords[referencedTable.table_name]?.links[i]"
                         (click)="handleClose()">
-                        <span matListItemTitle>{{row[referencedRecords[referencedTable.table_name].identityColumn]}}</span>
+
+                        <span matListItemTitle style="margin-left: -4px;">
+                            <strong *ngIf="!referencedRecords[referencedTable.table_name].identityColumn.isSet">
+                                {{referencedRecords[referencedTable.table_name].identityColumn.displayName}}:&nbsp;
+                            </strong>
+                            {{ row[referencedRecords[referencedTable.table_name].identityColumn.fieldName] }}
+                        </span>
+
                         <span matListItemLine>
-                            <span *ngFor="let field_name of referencedRecords[referencedTable.table_name].fieldsOrder">
-                                <strong>{{field_name}}:</strong>
-                                {{ row[field_name]}}
+                            <span *ngFor="let field of referencedRecords[referencedTable.table_name].fieldsOrder">
+                                <strong>{{field.displayName}}:</strong>
+                                {{ row[field.fieldName] || '—' }};
                             </span>
                         </span>
                     </a>
@@ -82,7 +91,8 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
             <a *ngIf="isForeignKey(column.title); else recordContent"
                 routerLink="/dashboard/{{selectedRow.connectionID}}/{{selectedRow.foreignKeys[column.title]?.referenced_table_name}}/entry"
                 [queryParams]="getForeignKeyQueryParams(column.title)"
-                class="row-preview-sidebar__field-value row-preview-sidebar__field-value_foreign-key">
+                class="row-preview-sidebar__field-value row-preview-sidebar__field-value_foreign-key"
+                (click)="handleClose()">
                 <span>{{getForeignKeyValue(column.title)}}</span>
                 <mat-icon fontSet="material-icons-outlined" class="row-preview-sidebar__field-value-icon">edit</mat-icon>
             </a>
diff --git a/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.ts b/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.ts
index f2338a8c8..f574953e9 100644
--- a/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.ts
@@ -107,6 +107,11 @@ export class DbTableRowViewComponent implements OnInit, OnDestroy {
                 foreignKeyMap[fk.column_name] = fk.referenced_column_name;
               }
 
+              const tableWidgetsNameMap = Object.keys(res.widgets).reduce((acc, key) => {
+                acc[key] = res.widgets[key].name;
+                return acc;
+              }, {});
+
               // Format each row
               const formattedRows = res.rows.map(row => {
                 const formattedRow = {};
@@ -123,39 +128,89 @@ export class DbTableRowViewComponent implements OnInit, OnDestroy {
               })
 
               if (res.identity_column && res.list_fields.length) {
-                identityColumn = res.identity_column;
-                fieldsOrder = res.list_fields.filter((field: string) => field !== res.identity_column).slice(0, 3);
+                identityColumn = {
+                  isSet: true,
+                  fieldName: res.identity_column,
+                  displayName: tableWidgetsNameMap[res.identity_column] || normalizeFieldName(res.identity_column)
+                };
+                fieldsOrder = res.list_fields
+                .filter((field: string) => field !== res.identity_column)
+                .slice(0, 3)
+                .map((field: string) => {
+                  return {
+                    fieldName: field,
+                    displayName: tableWidgetsNameMap[field] || normalizeFieldName(field)
+                  };
+                });
               }
 
               if (res.identity_column && !res.list_fields.length) {
-                identityColumn = res.identity_column;
-                fieldsOrder = res.structure.filter((field: TableField) => field.column_name !== res.identity_column).map((field: TableField) => field.column_name).slice(0, 3);
+                identityColumn = {
+                  isSet: true,
+                  fieldName: res.identity_column,
+                  displayName: tableWidgetsNameMap[res.identity_column] || normalizeFieldName(res.identity_column)
+                };
+                fieldsOrder = res.structure
+                  .filter((field: TableField) => field.column_name !== res.identity_column)
+                  .slice(0, 3)
+                  .map((field: TableField) => {
+                    return {
+                      fieldName: field.column_name,
+                      displayName: tableWidgetsNameMap[field.column_name] || normalizeFieldName(field.column_name)
+                    };
+                  });
               }
 
               if (!res.identity_column && res.list_fields.length) {
-                identityColumn = res.list_fields[0];
-                fieldsOrder = res.list_fields.slice(1, 4);
+                identityColumn = {
+                  isSet: false,
+                  fieldName: res.list_fields[0],
+                  displayName: tableWidgetsNameMap[res.list_fields[0]] || normalizeFieldName(res.list_fields[0])
+                };
+                fieldsOrder = res.list_fields
+                  .slice(1, 4)
+                  .map((field: string) => {
+                    return {
+                      fieldName: field,
+                      displayName: tableWidgetsNameMap[field] || normalizeFieldName(field)
+                    };
+                  });
               }
 
               if (!res.identity_column && !res.list_fields.length) {
-                identityColumn = res.structure[0].column_name;
+                identityColumn = {
+                  isSet: false,
+                  fieldName: res.structure[0].column_name,
+                  displayName: tableWidgetsNameMap[res.structure[0].column_name] || normalizeFieldName(res.structure[0].column_name)
+                };
                 console.log(identityColumn);
-                fieldsOrder = res.structure.slice(1, 4).map((field: TableField) => field.column_name);
+                fieldsOrder = res.structure
+                .slice(1, 4)
+                .map((field: TableField) => {
+                  return {
+                    fieldName: field.column_name,
+                    displayName: tableWidgetsNameMap[field.column_name] || normalizeFieldName(field.column_name)
+                  };
+                });
               }
 
               const tableRecords = {
                 rows: formattedRows,
                 links: res.rows.map(row => {
-                  let params = {};
-                  Object.keys(res.primaryColumns).forEach((key) => {
-                    params[res.primaryColumns[key].column_name] = row[res.primaryColumns[key].column_name];
-                  });
-
-                  return params;
+                  return res.primaryColumns.reduce((keys, column) => {
+                    if (res.foreignKeys.map(foreignKey => foreignKey.column_name).includes(column.column_name)) {
+                      const referencedColumnNameOfForeignKey = foreignKeyMap[column.column_name];
+                      keys[column.column_name] = row[column.column_name][referencedColumnNameOfForeignKey];
+                    } else {
+                      keys[column.column_name] = row[column.column_name];
+                    }
+                    return keys;
+                  }, {})
                 }),
                 identityColumn,
                 fieldsOrder
               }
+
               this.referencedRecords[table.table_name] = tableRecords;
             });
           });
@@ -197,12 +252,33 @@ export class DbTableRowViewComponent implements OnInit, OnDestroy {
     return this.selectedRow.widgetsList.includes(columnName);
   }
 
-  getDedicatedPageLink() {
+  getDedicatedPageLinkParams() {
     if (this.selectedRow) {
-      const params = new URLSearchParams();
+      const params = {};
       for (const key in this.selectedRow.primaryKeys) {
         if (this.selectedRow.primaryKeys.hasOwnProperty(key)) {
-          params.append(key, this.selectedRow.primaryKeys[key]);
+          if (this.selectedRow.foreignKeysList.includes(key)) {
+            const referencedColumnName = this.selectedRow.foreignKeys[key].referenced_column_name;
+            params[key] = this.selectedRow.record[key][referencedColumnName];
+          }
+          else {
+            params[key] = this.selectedRow.primaryKeys[key];
+          }
+
+        }
+      }
+      return params;
+    };
+    return {};
+  }
+
+  getDedicatedPageLink() {
+    if (this.selectedRow) {
+      const paramsObj = this.getDedicatedPageLinkParams();
+      const params = new URLSearchParams();
+      for (const key in paramsObj) {
+        if (paramsObj.hasOwnProperty(key)) {
+          params.set(key, paramsObj[key]);
         }
       }
       return `${location.origin}${this.selectedRow.link}?${params.toString()}`;
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 052e0b692..a3e072d8d 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
@@ -132,6 +132,18 @@
     padding: 0 8px 16px;
 }
 
+.related-record__fields {
+    margin-left: -4px;
+}
+
+.related-record__field {
+    margin-left: 8px;
+}
+
+.related-record__fieldName {
+    margin-right: 4px;
+}
+
 .widget {
     display: grid;
     grid-template-columns: 0 1fr 36px;
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 d63127e60..1123b6281 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
@@ -89,12 +89,15 @@ <h3>
                         <mat-list-item *ngFor="let rawRow of referencedRecords[referencedTable.table_name]?.rawRows; let i = index"
                             class="related-record" (click)="handleViewRow(referencedTable.table_name, rawRow)">
                             <span matListItemTitle>
-                                {{ referencedRecords[referencedTable.table_name].formattedRows[i][referencedRecords[referencedTable.table_name].identityColumn] }}
+                                <strong *ngIf="!referencedRecords[referencedTable.table_name].identityColumn.isSet">
+                                    {{referencedRecords[referencedTable.table_name].identityColumn.displayName}}:&nbsp;
+                                </strong>
+                                {{ referencedRecords[referencedTable.table_name].formattedRows[i][referencedRecords[referencedTable.table_name].identityColumn.name] }}
                             </span>
-                            <span matListItemLine>
-                                <span *ngFor="let field_name of referencedRecords[referencedTable.table_name].fieldsOrder">
-                                    <strong>{{field_name}}:</strong>
-                                    <span>{{ referencedRecords[referencedTable.table_name].formattedRows[i][field_name] }}</span>
+                            <span matListItemLine class="related-record__fields">
+                                <span *ngFor="let field of referencedRecords[referencedTable.table_name].fieldsOrder" class="related-record__field">
+                                    <strong class="related-record__fieldName">{{field.displayName}}:</strong>
+                                    <span>{{ referencedRecords[referencedTable.table_name].formattedRows[i][field.fieldName] }};</span>
                                 </span>
                             </span>
                         </mat-list-item>
diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts
index 6144653cc..cc50c48a1 100644
--- a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts
+++ b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.ts
@@ -41,7 +41,8 @@ import { TablesService } from 'src/app/services/tables.service';
 import { Title } from '@angular/platform-browser';
 import { formatFieldValue } from 'src/app/lib/format-field-value';
 import { getTableTypes } from 'src/app/lib/setup-table-row-structure';
-import { normalizeTableName } from '../../lib/normalize';
+import { normalizeTableName, normalizeFieldName } from 'src/app/lib/normalize';
+import { isSet } from 'lodash';
 
 @Component({
   selector: 'app-db-table-row-edit',
@@ -345,36 +346,74 @@ export class DbTableRowEditComponent implements OnInit {
                   })
 
                   if (res.identity_column && res.list_fields.length) {
-                    identityColumn = res.identity_column;
-                    fieldsOrder = res.list_fields.filter((field: string) => field !== res.identity_column).slice(0, 3);
+                    identityColumn = {
+                      isSet: true,
+                      name: res.identity_column,
+                      displayName: this.relatedRecordsProperties[table.table_name].widgets[res.identity_column]?.name || normalizeFieldName(res.identity_column)
+                    };
+                    fieldsOrder = res.list_fields
+                      .filter((field: string) => field !== res.identity_column)
+                      .slice(0, 3)
+                      .map((field: string) => {
+                        return {
+                          fieldName: field,
+                          displayName: this.relatedRecordsProperties[table.table_name].widgets[field]?.name || normalizeFieldName(field),
+                        };
+                      });
                   }
 
                   if (res.identity_column && !res.list_fields.length) {
-                    identityColumn = res.identity_column;
-                    fieldsOrder = res.structure.filter((field: TableField) => field.column_name !== res.identity_column).map((field: TableField) => field.column_name).slice(0, 3);
+                    identityColumn = {
+                      isSet: true,
+                      name: res.identity_column,
+                      displayName: this.relatedRecordsProperties[table.table_name].widgets[res.identity_column]?.name || normalizeFieldName(res.identity_column)
+                    };
+                    fieldsOrder = res.structure
+                      .filter((field: TableField) => field.column_name !== res.identity_column)
+                      .slice(0, 3)
+                      .map((field: TableField) => {
+                        return {
+                          fieldName: field.column_name,
+                          displayName: this.relatedRecordsProperties[table.table_name].widgets[field.column_name]?.name || normalizeFieldName(field.column_name),
+                        }
+                      })
                   }
 
                   if (!res.identity_column && res.list_fields.length) {
-                    identityColumn = res.list_fields[0];
-                    fieldsOrder = res.list_fields.slice(1, 4);
+                    identityColumn = {
+                      isSet: false,
+                      name: res.list_fields[0],
+                      displayName: this.relatedRecordsProperties[table.table_name].widgets[res.list_fields[0]]?.name || normalizeFieldName(res.list_fields[0])
+                    };
+                    fieldsOrder = res.list_fields
+                      .slice(1, 4)
+                      .map((field: string) => {
+                        return {
+                          fieldName: field,
+                          displayName: this.relatedRecordsProperties[table.table_name].widgets[field]?.name || normalizeFieldName(field),
+                        };
+                      });
                   }
 
                   if (!res.identity_column && !res.list_fields.length) {
-                    identityColumn = res.structure[0].column_name;
-                    console.log(identityColumn);
-                    fieldsOrder = res.structure.slice(1, 4).map((field: TableField) => field.column_name);
+                    identityColumn = {
+                      isSet: false,
+                      name: res.structure[0].column_name,
+                      displayName: this.relatedRecordsProperties[table.table_name].widgets[res.structure[0].column_name]?.name || normalizeFieldName(res.structure[0].column_name)
+                    };
+                    fieldsOrder = res.structure
+                      .slice(1, 4)
+                      .map((field: TableField) => {
+                        return {
+                          fieldName: field.column_name,
+                          displayName: this.relatedRecordsProperties[table.table_name].widgets[field.column_name]?.name || normalizeFieldName(field.column_name),
+                        }
+                      })
                   }
 
                   const tableRecords = {
                     rawRows: res.rows,
                     formattedRows,
-                    links: res.rows.map(row => {
-                      let params = {};
-                      Object.keys(res.primaryColumns).forEach((key) => {
-                        params[res.primaryColumns[key].column_name] = row[res.primaryColumns[key].column_name];
-                      });
-                      return params;
-                    }),
                     identityColumn,
                     fieldsOrder,
                     foreignKeys: res.foreignKeys
diff --git a/frontend/src/app/consts/acronyms.ts b/frontend/src/app/consts/acronyms.ts
index 1ef21b423..b4e113a5a 100644
--- a/frontend/src/app/consts/acronyms.ts
+++ b/frontend/src/app/consts/acronyms.ts
@@ -4232,7 +4232,6 @@ export default [
 'PEN',
 'PEO',
 'PEPFAR',
-'PER',
 'perl',
 'PES',
 'PEST',
@@ -5069,7 +5068,6 @@ export default [
 'TNO',
 'TNT',
 'to',
-'TO',
 'TOA',
 'TOAD',
 'TOBS',