diff --git a/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.css b/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.css
index 1658663c4..a78533746 100644
--- a/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.css
+++ b/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.css
@@ -52,6 +52,7 @@
 .row-preview-sidebar__field {
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
     gap: 4px;
     padding: 12px 16px;
 }
@@ -66,18 +67,38 @@
     }
 }
 
+.row-preview-sidebar__field-value_foreign-key {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+}
+
 @media (prefers-color-scheme: light) {
+    .row-preview-sidebar__field-value_foreign-key {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.64);
+    }
     .row-preview-sidebar__field-value {
         color: rgba(0, 0, 0, 0.64);
     }
 }
 
 @media (prefers-color-scheme: dark) {
+    .row-preview-sidebar__field-value_foreign-key {
+        border-bottom: 1px solid rgba(255, 255, 255, 0.64);
+    }
+
     .row-preview-sidebar__field-value {
         color: rgba(255, 255, 255, 0.64);
     }
 }
 
+.row-preview-sidebar__field-value-icon {
+    font-size: 16px;
+    height: 16px;
+    margin-left: 8px;
+    width: 16px;
+}
+
 .row-preview-sidebar__image {
     width: 100%;
     margin-top: 8px;
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 11adc16fc..ca6cfeba4 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
@@ -79,9 +79,14 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
     <ng-container *ngIf="selectedRow && selectedRow.record; else loadingContent">
         <div *ngFor="let column of columns" class="row-preview-sidebar__field">
             <strong>{{column.normalizedTitle}}</strong>
-            <span *ngIf="isForeignKey(column.title); else recordContent" class="row-preview-sidebar__field-value">
-                {{getForeignKeyValue(column.title)}}
-            </span>
+            <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">
+                <span>{{getForeignKeyValue(column.title)}}</span>
+                <mat-icon fontSet="material-icons-outlined" class="row-preview-sidebar__field-value-icon">edit</mat-icon>
+            </a>
+
             <ng-template #recordContent>
                 <div *ngIf="isWidget(column.title); else stringValue">
                     <div *ngIf="selectedRow.widgets[column.title].widget_type === 'Image'">
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 aefa4ea05..f2338a8c8 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
@@ -67,7 +67,7 @@ export class DbTableRowViewComponent implements OnInit, OnDestroy {
         this.columns = columnsOrder.map(column => {
           return {
             title: column,
-            normalizedTitle: normalizeFieldName(column)
+            normalizedTitle: row.widgets[column]?.name || normalizeFieldName(column)
           }
         })
 
@@ -150,6 +150,7 @@ export class DbTableRowViewComponent implements OnInit, OnDestroy {
                   Object.keys(res.primaryColumns).forEach((key) => {
                     params[res.primaryColumns[key].column_name] = row[res.primaryColumns[key].column_name];
                   });
+
                   return params;
                 }),
                 identityColumn,
@@ -177,13 +178,21 @@ export class DbTableRowViewComponent implements OnInit, OnDestroy {
       if (identityColumnName) {
         return this.selectedRow.record[field][identityColumnName];
       } else {
-        // const referencedColumnName = this.selectedRow.foreignKeys[field].referenced_column_name;
-        return this.selectedRow.record[field];
+        const referencedColumnName = this.selectedRow.foreignKeys[field].referenced_column_name;
+        return this.selectedRow.record[field][referencedColumnName];
       }
     };
     return '';
   }
 
+  getForeignKeyQueryParams(field: string) {
+    if (this.selectedRow) {
+      const referencedColumnName = this.selectedRow.foreignKeys[field].referenced_column_name;
+      return {[this.selectedRow.foreignKeys[field]?.referenced_column_name]: this.selectedRow.record[field][referencedColumnName]}
+    };
+    return {};
+  }
+
   isWidget(columnName: string) {
     return this.selectedRow.widgetsList.includes(columnName);
   }
diff --git a/frontend/src/app/components/dashboard/db-tables-data-source.ts b/frontend/src/app/components/dashboard/db-tables-data-source.ts
index 654db47f5..aeb3875a8 100644
--- a/frontend/src/app/components/dashboard/db-tables-data-source.ts
+++ b/frontend/src/app/components/dashboard/db-tables-data-source.ts
@@ -60,7 +60,11 @@ export class TablesDataSource implements DataSource<Object> {
   public foreignKeysList: string[] = [];
   public foreignKeys: TableForeignKey[] = [];
   public widgetsList: string[];
-  public widgets: Widget[];
+  public widgets: {
+    [key: string]: Widget & {
+      widget_params: object;
+    }
+  } = {};
   public widgetsCount: number = 0;
   public selectWidgetsOptions: object;
   public relatedRecords = {
@@ -185,6 +189,28 @@ export class TablesDataSource implements DataSource<Object> {
           this.tableActions = res.action_events;
           this.tableBulkActions = res.action_events.filter((action: CustomEvent) => action.type === CustomActionType.Multiple);
 
+          if (res.widgets) {
+            this.widgetsList = res.widgets.map((widget: Widget) => {return widget['field_name']});
+            this.widgetsCount = this.widgetsList.length;
+            this.widgets = Object.assign({}, ...res.widgets.map((widget: Widget) => {
+                let parsedParams;
+
+                try {
+                  parsedParams = JSON5.parse(widget.widget_params);
+                } catch {
+                  parsedParams = {};
+                }
+
+                return {
+                  [widget.field_name]: {
+                    ...widget,
+                    widget_params: parsedParams,
+                  },
+                };
+              })
+            );
+          }
+
           let orderedColumns: TableField[];
           if (res.list_fields.length) {
             orderedColumns = res.structure.sort((fieldA: TableField, fieldB: TableField) => res.list_fields.indexOf(fieldA.column_name) - res.list_fields.indexOf(fieldB.column_name));
@@ -198,26 +224,26 @@ export class TablesDataSource implements DataSource<Object> {
               if (shownColumns && shownColumns.length) {
                 return {
                   title: item.column_name,
-                  normalizedTitle: normalizeFieldName(item.column_name),
+                  normalizedTitle: this.widgets[item.column_name]?.name || normalizeFieldName(item.column_name),
                   selected: shownColumns.includes(item.column_name)
                 }
               } else if (res.columns_view && res.columns_view.length !== 0) {
                 return {
                   title: item.column_name,
-                  normalizedTitle: normalizeFieldName(item.column_name),
+                  normalizedTitle: this.widgets[item.column_name]?.name || normalizeFieldName(item.column_name),
                   selected: res.columns_view.includes(item.column_name)
                 }
               } else {
                 if (index < 6) {
                   return {
                     title: item.column_name,
-                    normalizedTitle: normalizeFieldName(item.column_name),
+                    normalizedTitle: this.widgets[item.column_name]?.name || normalizeFieldName(item.column_name),
                     selected: true
                   }
                 }
                 return {
                   title: item.column_name,
-                  normalizedTitle: normalizeFieldName(item.column_name),
+                  normalizedTitle: this.widgets[item.column_name]?.name || normalizeFieldName(item.column_name),
                   selected: false
                 }
               }
@@ -253,51 +279,6 @@ export class TablesDataSource implements DataSource<Object> {
 
           this.sortByColumns = res.sortable_by;
 
-          if (res.widgets) {
-            this.widgetsList = res.widgets.map((widget: Widget) => {return widget['field_name']});
-            this.widgetsCount = this.widgetsList.length;
-            this.widgets = Object.assign({}, ...res.widgets.map((widget: Widget) => {
-                let parsedParams;
-
-                try {
-                  parsedParams = JSON5.parse(widget.widget_params);
-                } catch {
-                  parsedParams = {};
-                }
-
-                return {
-                  [widget.field_name]: {
-                    ...widget,
-                    widget_params: parsedParams,
-                  },
-                };
-              })
-            );
-
-            /*** for select widget ***/
-            // const selectWidgets = res.widgets.filter((widget: Widget) => widget.widget_type === 'Select');
-            // this.selectWidgetsOptions =
-            // Object.assign({}, ...selectWidgets.map((widget: Widget) => {
-            //   const params = JSON5.parse(widget.widget_params);
-            //   if (params.options) {
-            //     return {[widget.field_name]: params.options}
-            //   } else {
-            //     this.alert_widgetsWarning = {
-            //       id: 10002,
-            //       type: AlertType.Warning,
-            //       message: `Select widget for ${widget.field_name} column is configured incorrectly.`,
-            //       actions: [
-            //         {
-            //           type: AlertActionType.Anchor,
-            //           caption: 'Instruction',
-            //           to: 'https://help.rocketadmin.com/'
-            //         }
-            //       ]
-            //     }
-            //   }
-            // }))
-          }
-
           const widgetsConfigured = res.widgets && res.widgets.length;
           if (!res.configured && !widgetsConfigured
             && this._connections.connectionAccessLevel !== AccessLevel.None