diff --git a/frontend/src/app/components/dashboard/dashboard.component.ts b/frontend/src/app/components/dashboard/dashboard.component.ts
index cdbfc0483..e2240f3a7 100644
--- a/frontend/src/app/components/dashboard/dashboard.component.ts
+++ b/frontend/src/app/components/dashboard/dashboard.component.ts
@@ -129,15 +129,13 @@ export class DashboardComponent implements OnInit, OnDestroy {
   }
 
   get defaultTableToOpen () {
-    console.log('dashboard component get defaultTableToOpen');
-    console.log(this._connections.defaultTableToOpen);
     return this._connections.defaultTableToOpen;
   }
 
   ngOnInit() {
     this.connectionID = this._connections.currentConnectionID;
     // this.isTestConnection = this._connections.currentConnection.isTestConnection;
-    this.dataSource = new TablesDataSource(this._tables, this._connections, this._uiSettings);
+    this.dataSource = new TablesDataSource(this._tables, this._connections, this._uiSettings, this._tableRow);
 
     this._tableState.cast.subscribe(row => {
       this.selectedRow = row;
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 baa52cac4..9566b057f 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
@@ -82,4 +82,75 @@
     width: 100%;
     margin-top: 8px;
     margin-bottom: 16px;
+}
+
+.related-records__title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 8px 0 16px;
+}
+
+.related-records__title h3 {
+    margin: 0 !important;
+}
+
+.related-records__toggle_open {
+    transform: rotate(180deg);
+    transition: transform 200ms ease;
+}
+
+.related-records__accordion {
+    display: block;
+    margin-left: 8px;
+    margin-bottom: 16px;
+    width: calc(100% - 16px);
+}
+
+.related-records__header {
+    padding: 0 8px;
+}
+
+.related-records__table-name {
+    flex: 1 0 auto;
+}
+
+.related-records__actions {
+    flex-grow: 0;
+    justify-content: flex-end;
+}
+
+.related-record {
+    --mdc-list-list-item-two-line-container-height: 60px;
+
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+.related-record ::ng-deep .mdc-list-item__primary-text::before {
+    height: 24px;
+}
+
+.related-records__panel ::ng-deep .mat-expansion-panel-body {
+    padding: 0 8px;
+}
+
+.loading-related-records {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 8px 0 16px;
+}
+
+.loading-related-records__title {
+    mix-blend-mode: normal !important;
+    height: 28px;
+    width: 120px;
+}
+
+.loading-related-records__button {
+    mix-blend-mode: normal !important;
+    border-radius: 50%;
+    height: 36px;
+    width: 36px;
 }
\ No newline at end of file
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 4c52d5d59..47c3ee531 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
@@ -24,6 +24,60 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
     </div>
 
     <br />
+
+    <div *ngIf="selectedRow?.relatedRecords?.referenced_by.length">
+        <div class="related-records__title">
+            <h3 class="mat-heading-3">Related records</h3>
+            <button mat-icon-button type="button"
+                (click)="toggleReferencedRecords()">
+                <mat-icon [ngClass]="{'related-records__toggle_open': referencedRecordsShown}">keyboard_arrow_down</mat-icon>
+            </button>
+        </div>
+        <mat-accordion multi="true" *ngIf="referencedRecordsShown" class="related-records__accordion">
+            <mat-expansion-panel *ngFor="let referencedTable of referencedTables; let i = index" class="related-records__panel">
+                <mat-expansion-panel-header class="related-records__header">
+                    <mat-panel-title class="related-records__table-name"> {{referencedTable.displayTableName}} </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"
+                            [routerLink]="['/dashboard', selectedRow.connectionID, referencedTable.table_name, 'settings']"
+                            matTooltip="Set up records view">
+                            <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">
+                            <mat-icon>open_in_new</mat-icon>
+                        </a>
+                    </mat-panel-description>
+                </mat-expansion-panel-header>
+
+                <mat-nav-list>
+                    <a mat-list-item *ngFor="let row of referencedRecords[referencedTable.table_name]?.rows; let i = index" class="related-record"
+                        [routerLink]="['/dashboard', selectedRow.connectionID, referencedTable.table_name, 'entry']"
+                        [queryParams]="referencedRecords[referencedTable.table_name]?.links[i]">
+                        <span matListItemTitle>{{row[referencedRecords[referencedTable.table_name].identityColumn]}}</span>
+                        <span matListItemLine>
+                            <span *ngFor="let field_name of referencedRecords[referencedTable.table_name].fieldsOrder">
+                                <strong>{{field_name}}:</strong>
+                                {{ row[field_name]}}
+                            </span>
+                        </span>
+                    </a>
+                </mat-nav-list>
+            </mat-expansion-panel>
+        </mat-accordion>
+    </div>
+
+    <div *ngIf="!selectedRow?.relatedRecords?.referenced_by">
+        <div class="skeleton loading-related-records">
+            <div class="bone loading-related-records__title"></div>
+            <div class="bone loading-related-records__button"></div>
+        </div>
+    </div>
+
     <ng-container *ngIf="selectedRow && selectedRow.record; else loadingContent">
         <div *ngFor="let column of columns" class="row-preview-sidebar__field">
             <strong>{{column.normalizedTitle}}</strong>
diff --git a/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.spec.ts b/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.spec.ts
index 61953148a..5cb37d748 100644
--- a/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.spec.ts
+++ b/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.spec.ts
@@ -3,6 +3,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { DbTableRowViewComponent } from './db-table-row-view.component';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { ActivatedRoute } from '@angular/router';
+import { provideHttpClient } from '@angular/common/http';
+import { Angulartics2Module } from 'angulartics2';
 
 describe('DbTableRowViewComponent', () => {
   let component: DbTableRowViewComponent;
@@ -12,9 +14,11 @@ describe('DbTableRowViewComponent', () => {
     TestBed.configureTestingModule({
     imports: [
         MatSnackBarModule,
-        DbTableRowViewComponent
+        DbTableRowViewComponent,
+        Angulartics2Module.forRoot()
     ],
     providers: [
+      provideHttpClient(),
       { provide: ActivatedRoute, useValue: {} }
     ]
 });
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 4305f9251..c9fd3fc81 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
@@ -1,16 +1,23 @@
 import { ActivatedRoute, RouterModule } from '@angular/router';
-import { Component, Input, OnInit } from '@angular/core';
-import { TableRow, Widget } from 'src/app/models/table';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { TableField, TableRow, Widget } from 'src/app/models/table';
+import { normalizeFieldName, normalizeTableName } from 'src/app/lib/normalize';
 
 import { ClipboardModule } from '@angular/cdk/clipboard';
 import { CommonModule } from '@angular/common';
+import { ConnectionsService } from 'src/app/services/connections.service';
+import JsonURL from "@jsonurl/jsonurl";
 import { MatButtonModule } from '@angular/material/button';
+import { MatExpansionModule } from '@angular/material/expansion';
 import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { NotificationsService } from 'src/app/services/notifications.service';
 import { PlaceholderRecordViewComponent } from '../../skeletons/placeholder-record-view/placeholder-record-view.component';
 import { TableStateService } from 'src/app/services/table-state.service';
-import { normalizeFieldName } from 'src/app/lib/normalize';
+import { TablesService } from 'src/app/services/tables.service';
+import { formatFieldValue } from 'src/app/lib/format-field-value';
 
 @Component({
   selector: 'app-db-table-row-view',
@@ -21,41 +28,151 @@ import { normalizeFieldName } from 'src/app/lib/normalize';
     MatButtonModule,
     ClipboardModule,
     MatTooltipModule,
+    MatExpansionModule,
+    MatProgressSpinnerModule,
+    MatListModule,
     RouterModule,
     CommonModule,
     PlaceholderRecordViewComponent
   ]
 })
-export class DbTableRowViewComponent implements OnInit {
+export class DbTableRowViewComponent implements OnInit, OnDestroy {
   @Input() activeFilters: object;
 
+  public selectedRowCast: any;
   public selectedRow: TableRow;
   public columns: {
     title: string;
     normalizedTitle: string;
   }[] = [];
+  public referencedTables: { table_name: string; displayTableName: string; columns: string[] }[] = [];
+  public referencedTablesURLParams: any;
+  public referencedRecords: {} = {};
+  public referencedRecordsShown: boolean = false;
 
   constructor(
+    private _tables: TablesService,
     private _tableState: TableStateService,
     private _notifications: NotificationsService,
     private route: ActivatedRoute,
   ) { }
 
   ngOnInit(): void {
-    this._tableState.cast.subscribe((row) => {
+    // this.connectionID = this._connections.connectionID;
+
+    this.selectedRowCast = this._tableState.cast.subscribe((row) => {
+      row && console.log('Row selected:', row.primaryKeys);
       this.selectedRow = row;
       if (row && row.columnsOrder) {
         const columnsOrder = this.selectedRow.columnsOrder.length ? this.selectedRow.columnsOrder : Object.keys(this.selectedRow.record);
+
         this.columns = columnsOrder.map(column => {
           return {
             title: column,
             normalizedTitle: normalizeFieldName(column)
           }
         })
+
+        if (row.relatedRecords?.referenced_by.length) {
+          this.referencedRecords = {};
+
+          this.referencedTables = row.relatedRecords.referenced_by
+            .map((table: any) => { return {...table, displayTableName: table.display_name || normalizeTableName(table.table_name)}});
+
+          this.referencedTablesURLParams = row.relatedRecords.referenced_by
+            .map((table: any) => {
+              const params = {[table.column_name]: {
+                eq: row.record[row.relatedRecords.referenced_on_column_name]
+              }};
+              return {
+                filters: JsonURL.stringify(params),
+                page_index: 0
+            }});
+
+          row.relatedRecords.referenced_by.forEach((table: any) => {
+            const filters = {[table.column_name]: {
+              eq: row.record[row.relatedRecords.referenced_on_column_name]
+            }};
+
+            this._tables.fetchTable({
+              connectionID: row.connectionID,
+              tableName: table.table_name,
+              requstedPage: 1,
+              chunkSize: 30,
+              filters
+            }).subscribe((res) => {
+              let identityColumn = res.identity_column;
+              let fieldsOrder = [];
+
+              const foreignKeyMap = {};
+              for (const fk of res.foreignKeys) {
+                foreignKeyMap[fk.column_name] = fk.referenced_column_name;
+              }
+
+              // Format each row
+              const formattedRows = res.rows.map(row => {
+                const formattedRow = {};
+
+                for (const key in row) {
+                  if (foreignKeyMap[key] && typeof row[key] === 'object' && row[key] !== null) {
+                    const preferredKey = Object.keys(row[key]).find(k => k !== foreignKeyMap[key]);
+                    formattedRow[key] = preferredKey ? row[key][preferredKey] : row[key][foreignKeyMap[key]];
+                  } else {
+                    formattedRow[key] = formatFieldValue(row[key], res.structure.find((field: TableField) => field.column_name === key)?.data_type || 'text');
+                  }
+                }
+                return formattedRow;
+              })
+
+              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);
+              }
+
+              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);
+              }
+
+              if (!res.identity_column && res.list_fields.length) {
+                identityColumn = res.list_fields[0];
+                fieldsOrder = res.list_fields.slice(1, 4);
+              }
+
+              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);
+              }
+
+              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;
+                }),
+                identityColumn,
+                fieldsOrder
+              }
+              this.referencedRecords[table.table_name] = tableRecords;
+            });
+          });
+        }
       }
     });
   }
 
+  ngOnDestroy() {
+    this.selectedRowCast.unsubscribe();
+  }
+
+  toggleReferencedRecords() {
+    this.referencedRecordsShown = !this.referencedRecordsShown;
+  }
+
   isForeignKey(columnName: string) {
     return this.selectedRow.foreignKeysList.includes(columnName);
   }
diff --git a/frontend/src/app/components/dashboard/db-table/db-table.component.css b/frontend/src/app/components/dashboard/db-table/db-table.component.css
index 5bcc5b3b8..9404e6aad 100644
--- a/frontend/src/app/components/dashboard/db-table/db-table.component.css
+++ b/frontend/src/app/components/dashboard/db-table/db-table.component.css
@@ -535,14 +535,22 @@ tr.mat-row:hover {
 
 .foreign-key-button {
     background: transparent;
-    border: none;
+    border: 1px solid transparent;
+    border-radius: 12px;
     color: var(--color-accentedPalette-500);
+    cursor: pointer;
     font-size: inherit;
     padding: 2px 8px;
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
-    width: 100%;
+    max-width: 100%;
+    transition: background 100ms, border-color 100ms;
+}
+
+.foreign-key-button:hover{
+    background-color: var(--color-accentedPalette-100);
+    border: 1px solid var(--color-accentedPalette-300);
 }
 
 .foreign-key-button_selected {
diff --git a/frontend/src/app/components/dashboard/db-table/db-table.component.spec.ts b/frontend/src/app/components/dashboard/db-table/db-table.component.spec.ts
index 1c047507d..6366f8b31 100644
--- a/frontend/src/app/components/dashboard/db-table/db-table.component.spec.ts
+++ b/frontend/src/app/components/dashboard/db-table/db-table.component.spec.ts
@@ -90,7 +90,7 @@ describe('DbTableComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(DbTableComponent);
     component = fixture.componentInstance;
-    component.table = new TablesDataSource({} as any, {} as any, {} as any);
+    component.table = new TablesDataSource({} as any, {} as any, {} as any, {} as any);
     component.selection = new SelectionModel<any>(true, []);
     component.filterComparators = mockFilterComparators;
     fixture.autoDetectChanges();
diff --git a/frontend/src/app/components/dashboard/db-table/db-table.component.ts b/frontend/src/app/components/dashboard/db-table/db-table.component.ts
index 8e368b528..9fd190618 100644
--- a/frontend/src/app/components/dashboard/db-table/db-table.component.ts
+++ b/frontend/src/app/components/dashboard/db-table/db-table.component.ts
@@ -115,7 +115,8 @@ export class DbTableComponent implements OnInit {
     lte: "<="
   }
   public selectedRow: TableRow = null;
-  public selectedRowType: 'record' | 'foreignKey';
+  public selectedRowType: 'record' | 'foreignKey' = 'record';
+  public tableRelatedRecords: any = null;
 
   @Input() set table(value){
     if (value) this.tableData = value;
@@ -142,9 +143,8 @@ export class DbTableComponent implements OnInit {
     merge(this.sort.sortChange, this.paginator.page)
       .pipe(
           tap(() => {
-            const filters = JsonURL.stringify( this.activeFilters );
-
 
+            const filters = JsonURL.stringify( this.activeFilters );
             this.router.navigate([`/dashboard/${this.connectionID}/${this.name}`], {
               queryParams: {
                 filters,
@@ -154,7 +154,7 @@ export class DbTableComponent implements OnInit {
                 page_size: this.paginator.pageSize
               }
             });
-            this.loadRowsPage()
+            this.loadRowsPage();
           })
       )
       .subscribe();
@@ -183,6 +183,10 @@ export class DbTableComponent implements OnInit {
   }
 
   loadRowsPage() {
+    console.log('loadRowsPage');
+    console.log('loadRowsPage, tableRelatedRecords before', this.tableRelatedRecords);
+    this.tableRelatedRecords = null;
+    console.log('loadRowsPage, tableRelatedRecords after', this.tableRelatedRecords);
     this.tableData.fetchRows({
       connectionID: this.connectionID,
       tableName: this.name,
@@ -390,6 +394,7 @@ export class DbTableComponent implements OnInit {
   handleViewRow(row: TableRow) {
     this.selectedRowType = 'record';
     this._tableState.selectRow({
+      connectionID: this.connectionID,
       tableName: this.name,
       record: row,
       columnsOrder: this.tableData.dataColumns,
@@ -398,6 +403,7 @@ export class DbTableComponent implements OnInit {
       foreignKeysList: this.tableData.foreignKeysList,
       widgets: this.tableData.widgets,
       widgetsList: this.tableData.widgetsList,
+      relatedRecords: this.tableData.relatedRecords || null,
       link: `/dashboard/${this.connectionID}/${this.name}/entry`
     });
   }
@@ -407,6 +413,7 @@ export class DbTableComponent implements OnInit {
     this.selectedRowType = 'foreignKey';
 
     this._tableState.selectRow({
+      connectionID: null,
       tableName: null,
       record: null,
       columnsOrder: null,
@@ -415,12 +422,14 @@ export class DbTableComponent implements OnInit {
       foreignKeysList: null,
       widgets: null,
       widgetsList: null,
+      relatedRecords: null,
       link: null
     })
 
     this._tableRow.fetchTableRow(this.connectionID, foreignKeys.referenced_table_name, {[foreignKeys.referenced_column_name]: row[foreignKeys.referenced_column_name]})
       .subscribe(res => {
         this._tableState.selectRow({
+          connectionID: this.connectionID,
           tableName: foreignKeys.referenced_table_name,
           record: res.row,
           columnsOrder: res.list_fields,
@@ -447,6 +456,7 @@ export class DbTableComponent implements OnInit {
             })
           ),
           widgetsList: res.table_widgets.map(widget => widget.field_name),
+          relatedRecords: res.referenced_table_names_and_columns[0],
           link: `/dashboard/${this.connectionID}/${foreignKeys.referenced_table_name}/entry`
         });
       })
@@ -457,7 +467,8 @@ export class DbTableComponent implements OnInit {
   }
 
   isRowSelected(primaryKeys) {
-    if (this.selectedRowType === 'record' && this.selectedRow && this.selectedRow.primaryKeys !== null) return this.selectedRow && Object.keys(this.selectedRow.primaryKeys).length && JSON.stringify(this.selectedRow.primaryKeys) === JSON.stringify(primaryKeys);
+    // console.log('isRowSelected', this.selectedRowType, this.selectedRow, primaryKeys);
+    if (this.selectedRowType === 'record' && this.selectedRow && this.selectedRow.primaryKeys !== null) return Object.keys(this.selectedRow.primaryKeys).length && JSON.stringify(this.selectedRow.primaryKeys) === JSON.stringify(primaryKeys);
     return false;
   }
 
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 98067b81d..9ed475d1d 100644
--- a/frontend/src/app/components/dashboard/db-tables-data-source.ts
+++ b/frontend/src/app/components/dashboard/db-tables-data-source.ts
@@ -11,6 +11,7 @@ import { ConnectionsService } from 'src/app/services/connections.service';
 import { DataSource } from '@angular/cdk/table';
 import { MatPaginator } from '@angular/material/paginator';
 import { NotificationsService } from 'src/app/services/notifications.service';
+import { TableRowService } from 'src/app/services/table-row.service';
 // import { MatSort } from '@angular/material/sort';
 import { TablesService } from 'src/app/services/tables.service';
 import { UiSettingsService } from 'src/app/services/ui-settings.service';
@@ -62,6 +63,10 @@ export class TablesDataSource implements DataSource<Object> {
   public widgets: Widget[];
   public widgetsCount: number = 0;
   public selectWidgetsOptions: object;
+  public relatedRecords = {
+    referenced_on_column_name: '',
+    referenced_by: []
+  };
   public permissions;
   public isExportAllowed: boolean;
   public isImportAllowed: boolean;
@@ -79,7 +84,8 @@ export class TablesDataSource implements DataSource<Object> {
   constructor(
     private _tables: TablesService,
     private _connections: ConnectionsService,
-    private _uiSettings: UiSettingsService
+    private _uiSettings: UiSettingsService,
+    private _tableRow: TableRowService,
   ) {}
 
   connect(collectionViewer: CollectionViewer): Observable<Object[]> {
@@ -120,12 +126,6 @@ export class TablesDataSource implements DataSource<Object> {
       this.alert_settingsInfo = null;
       this.alert_widgetsWarning = null;
 
-      console.log('requstedPage');
-      console.log(requstedPage);
-
-      console.log('pageSize');
-      console.log(pageSize);
-
       const fetchedTable = this._tables.fetchTable({
         connectionID,
         tableName,
@@ -146,6 +146,22 @@ export class TablesDataSource implements DataSource<Object> {
             finalize(() => this.loadingSubject.next(false))
         )
         .subscribe((res: any) => {
+          if (res.rows && res.rows.length) {
+            const firstRow = res.rows[0];
+            this._tableRow.fetchTableRow(
+              connectionID,
+              tableName,
+              res.primaryColumns.reduce((keys, column) => {
+                if (this.foreignKeysList.includes(column.column_name)) {
+                  const referencedColumnNameOfForeignKey = this.foreignKeys[column.column_name].referenced_column_name;
+                  keys[column.column_name] = firstRow[column.column_name][referencedColumnNameOfForeignKey];
+                } else {
+                  keys[column.column_name] = firstRow[column.column_name];
+                }
+                return keys;
+              }, {})
+            ).subscribe((res) => this.relatedRecords = res.referenced_table_names_and_columns[0]);
+          }
           this.structure = [...res.structure];
           const columns = res.structure
             .reduce((items, item) => {
diff --git a/frontend/src/app/models/table.ts b/frontend/src/app/models/table.ts
index 1280a96c8..8abf1eef1 100644
--- a/frontend/src/app/models/table.ts
+++ b/frontend/src/app/models/table.ts
@@ -39,6 +39,7 @@ export interface TableSettings {
 }
 
 export interface TableRow {
+    connectionID: string,
     tableName: string,
     record: object,
     columnsOrder: string[],
@@ -47,6 +48,10 @@ export interface TableRow {
     foreignKeysList: string[],
     widgets: Widget[],
     widgetsList: string[],
+    relatedRecords: {
+        referenced_on_column_name: string,
+		referenced_by: []
+    }[],
     link?: string
 }
 
diff --git a/frontend/src/app/services/connections.service.ts b/frontend/src/app/services/connections.service.ts
index fad670cd0..99eac8028 100644
--- a/frontend/src/app/services/connections.service.ts
+++ b/frontend/src/app/services/connections.service.ts
@@ -104,8 +104,6 @@ export class ConnectionsService {
   }
 
   get defaultTableToOpen() {
-    console.log('connections service get defaultTableToOpen');
-    console.log(this.defaultDisplayTable);
     return this.defaultDisplayTable;
   }
 
@@ -170,6 +168,7 @@ export class ConnectionsService {
       this.connection = {...this.connectionInitialState};
       this.connectionLogo = null;
       this.companyName = null;
+      this.defaultDisplayTable = null;
       this.isCustomAccentedColor = false;
       this._themeService.updateColors({ palettes: { primaryPalette: '#212121', accentedPalette: '#C177FC' }});
     }