diff --git a/frontend/src/app/components/dashboard/dashboard.component.css b/frontend/src/app/components/dashboard/dashboard.component.css
index bede3f5b8..3f9572788 100644
--- a/frontend/src/app/components/dashboard/dashboard.component.css
+++ b/frontend/src/app/components/dashboard/dashboard.component.css
@@ -36,8 +36,14 @@
     }
 }
 
+.table-list-sidenav-container ::ng-deep .mat-drawer-inner-container,
+.side-bar_collapsed ::ng-deep .mat-drawer-inner-container {
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+}
+
 .table-list-sidenav-container ::ng-deep .mat-drawer:not(.mat-drawer-opened):not(.mat-drawer-animating) .mat-drawer-inner-container {
-    display: initial;
+    display: block;
 }
 
 .mat-list-item {
@@ -105,6 +111,7 @@
 .table-preview {
     display: flex;
     overflow-x: hidden;
+    height: calc(100vh - 44px);
 }
 
 .table-preview-content {
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 3d8e26916..0fd0eaca7 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
@@ -25,7 +25,14 @@
 
 @media (width <= 600px) {
     .row-preview-sidebar_open {
-        width: 0;
+        position: fixed;
+        top: 44px;
+        bottom: 0;
+        left: 0;
+        min-height: initial;
+        max-height: initial;
+        width: calc(100vw - 24px);
+        z-index: 2;
     }
 }
 
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css
index d267f61af..fa12f4272 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css
@@ -27,6 +27,23 @@
     }
 }
 
+.settings-fields__subheading {
+    margin-top: -4px !important;
+    margin-bottom: 0 !important;
+}
+
+@media (prefers-color-scheme: dark) {
+    .settings-fields__subheading {
+        color: rgba(255,255,255,0.64);
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .settings-fields__subheading {
+        color: rgba(0,0,0,0.64);
+    }
+}
+
 .settings-table-display {
     display: flex;
     align-items: center;
@@ -94,13 +111,25 @@
     top: -12px;
     left: 8px;
     display: inline-block;
-    background: #fff;
-    color: rgba(0, 0, 0, 0.6);
     font-size: 0.75em;
     padding: 4px;
     z-index: 1;
 }
 
+@media (prefers-color-scheme: dark) {
+    .order__title {
+        background: transparent;
+        color: rgba(255, 255, 255, 0.6);
+    }
+}
+
+@media (prefers-color-scheme: light) {
+    .order__title {
+        background: #fff;
+        color: rgba(0, 0, 0, 0.6);
+    }
+}
+
 .order-item {
     background: var(--mat-expansion-container-background-color);
     color: var(--mat-expansion-container-text-color);
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.html
index 5dbc53d66..6e3f7e20e 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.html
@@ -155,7 +155,7 @@ <h2 class="mat-heading-2 settings-fields__heading">Table view</h2>
             </mat-form-field>
 
             <h2 class="mat-heading-2" style="margin-bottom: -4px; margin-top: 12px">"Edit row" behavior</h2>
-            <p class="mat-body-1" style="margin-top: -16px; margin-bottom: 0; color: rgba(0,0,0,0.64)">You can edit a row by clicking on the "pencil" icon on the right.</p>
+            <p class="mat-body-1 settings-fields__subheading">You can edit a row by clicking on the "pencil" icon on the right.</p>
             <mat-form-field appearance="outline">
                 <mat-label>Searchable foreign key columns</mat-label>
                 <mat-select multiple
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
index fc9b6586a..ab329f243 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.css
@@ -499,7 +499,3 @@ tr.mat-row:hover {
     padding: 8px 0;
     width: 100%;
 }
-
-.hidden {
-    display: none;
-}
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html
index a52a55a2d..936f95c19 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.html
@@ -37,6 +37,10 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
                     {{action.title}}
                 </button>
             </ng-container>
+            <button mat-button *ngIf="tableData && tableData.isExportAllowed"
+                (click)="exportData()">
+                Export to CSV
+            </button>
             <button mat-button *ngIf="tableData && tableData.permissions && tableData.permissions.delete && tableData.canDelete"
                 (click)="handleActions({title: 'Delete rows', type: 'multiple',  require_confirmation: true})">
                 Delete
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts
index 42520567d..4a817a55d 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-view.component.ts
@@ -522,4 +522,62 @@ export class DbTableViewComponent implements OnInit {
     console.log('table view fiers filterSelected:', $event)
     this.applyFilter.emit($event);
   }
+
+  exportData() {
+    console.log('export data');
+    console.log(this.selection.selected);
+
+    // Helper function to convert value to CSV-safe string
+    const convertToCSVValue = (value: any): string => {
+      // Handle null and undefined
+      if (value === null || value === undefined) {
+        return '';
+      }
+
+      // Handle nested objects and arrays - convert to JSON string
+      if (typeof value === 'object') {
+        try {
+          // Convert object/array to JSON string
+          value = JSON.stringify(value);
+        } catch (e) {
+          // Handle circular references or other JSON stringify errors
+          value = '[Object]';
+        }
+      }
+
+      // Convert to string if not already
+      const stringValue = String(value);
+
+      // Check if value needs to be quoted (contains comma, double quote, or newline)
+      if (stringValue.includes(',') || stringValue.includes('"') || stringValue.includes('\n') || stringValue.includes('\r')) {
+        // Escape double quotes by doubling them and wrap in quotes
+        return `"${stringValue.replace(/"/g, '""')}"`;
+      }
+
+      return stringValue;
+    };
+
+    const header = Object.keys(this.selection.selected[0]);
+
+    // Create CSV rows with proper handling of nested objects
+    const csv = this.selection.selected.map((row) =>
+      header
+        .map((fieldName) => convertToCSVValue(row[fieldName]))
+        .join(',')
+    );
+
+    // Add header row
+    csv.unshift(header.map(h => convertToCSVValue(h)).join(','));
+    const csvArray = csv.join('\r\n');
+
+    const a = document.createElement('a');
+    const blob = new Blob([csvArray], { type: 'text/csv' });
+    const url = window.URL.createObjectURL(blob);
+
+    a.href = url;
+    a.download = 'myFile.csv';
+    a.click();
+    window.URL.revokeObjectURL(url);
+    a.remove();
+  }
 }
diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css
index d1fc2efe5..bb8824c20 100644
--- a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css
+++ b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css
@@ -29,6 +29,7 @@
     align-items: center;
     height: 100%;
     min-height: calc(100vh - 120px); /* Adjust based on header height */
+    position: relative;
 }
 
 .collapsed-top-section {
@@ -39,14 +40,20 @@
     flex: 1;
     justify-content: flex-start;
     padding-top: 8px;
+    overflow-y: auto;
+    width: 100%;
 }
 
 .collapsed-bottom-section {
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top: auto;
-    padding-bottom: 8px;
+    position: sticky;
+    bottom: 0;
+    background-color: #ffffff;
+    padding: 8px 0;
+    width: 100%;
+    z-index: 10;
 }
 
 .collapsed-folders {
@@ -209,6 +216,15 @@
 
 /* Dark theme adaptations */
 @media (prefers-color-scheme: dark) {
+    .collapsed-tables-list {
+        background: #303030;
+        border: 1px solid #424242;
+    }
+
+    .collapsed-bottom-section {
+        background-color: #303030;
+    }
+
     .collapsed-folder-item {
         background-color: transparent;
         color: #ffffff;
@@ -422,7 +438,8 @@
 .tables-list {
     width: 100%;
     box-sizing: border-box;
-    min-height: 0;
+    /* min-height: 0; */
+    height: calc(100vh - 100px); /* Adjust based on header height */
 }
 
 .tables-list ::ng-deep .table-list-item .mat-list-item-content {
@@ -463,16 +480,25 @@
     }
 
     .folder-header.expanded {
-        background-color: #212121;
-        color: #ffffff;
+        background-color: #212121 !important;
+        color: #ffffff !important;
     }
 
-    .folder-header.expanded .folder-icon {
-        color: #ffffff;
+    .folder-header .folder-icon {
+        color: #ffffff !important;
+    }
+
+    /* .folder-header.expanded .folder-name, */
+    .folder-header .folder-name {
+        color: #ffffff !important;
     }
 
     .folder-header.expanded .folder-expand-icon {
-        color: #ffffff;
+        color: #ffffff !important;
+    }
+
+    .folder-header:hover {
+        background-color: rgba(255, 255, 255, 0.05) !important;
     }
 }
 
@@ -510,14 +536,54 @@
     margin-left: 16px;
 }
 
+/* Expanded state container */
+.expanded-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow-y: auto;
+}
+
 .search-input {
     background-color: transparent;
-    margin-top: 4px;
+    margin-top: 8px;
     margin-left: 16px;
-    /* margin-bottom: -24px; */
+    margin-bottom: -8px;
     width: calc(100% - 32px);
     max-width: calc(240px - 32px);
     box-sizing: border-box;
+    order: 1; /* Always first */
+}
+
+/* Add folder button container */
+.add-folder-button-container {
+    order: 2; /* Default: after search when no custom folders */
+    margin-left: 16px;
+    margin-right: 16px;
+    margin-top: 4px;
+    margin-bottom: 8px;
+    width: calc(100% - 32px);
+    box-sizing: border-box;
+}
+
+/* When custom folders exist, move add button to bottom */
+.expanded-container.has-custom-folders .add-folder-button-container {
+    order: 4; /* After folders section */
+    position: sticky;
+    bottom: 0;
+    background-color: #ffffff;
+    padding: 8px 16px;
+    z-index: 10;
+    margin-top: auto;
+}
+
+/* Dark theme support for add button container when at bottom */
+@media (prefers-color-scheme: dark) {
+    .expanded-container.has-custom-folders .add-folder-button-container {
+        background-color: #303030;
+    }
 }
 
 .search-input ::ng-deep * {
@@ -537,26 +603,8 @@
     padding-bottom: 8px;
 }
 
-.add-folder-button-container {
-    margin-left: 16px;
-    margin-right: 16px;
-    margin-top: -12px;
-    margin-bottom: 12px;
-    width: calc(100% - 32px);
-    box-sizing: border-box;
-}
-
 .add-folder-button {
     width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    font-weight: 500;
-    text-transform: none;
-    letter-spacing: 0.5px;
-    border-color: #e0e0e0 !important;
-    color: #616161 !important;
 }
 
 .add-folder-button:hover {
@@ -575,6 +623,9 @@
     margin-bottom: 8px;
     width: calc(100% - 32px);
     box-sizing: border-box;
+    order: 3; /* After search and (optionally) add button */
+    flex: 1;
+    overflow-y: auto;
 }
 
 .folder-item {
diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html
index 5ae7c8a97..1897bdb94 100644
--- a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html
+++ b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html
@@ -25,8 +25,7 @@
                         matTooltipPosition="right"
                         (click)="onCollapsedFolderClick(folder)">
                     <span *ngIf="folder.name === 'All Tables'"
-                        class="material-icons collapsed-folder-icon"
-                        [style.color]="getFolderIconColor(folder)">dehaze</span>
+                        class="material-icons collapsed-folder-icon">dehaze</span>
                         <span *ngIf="folder.name !== 'All Tables'"
                             class="material-icons collapsed-folder-icon"
                             [style.color]="getFolderIconColor(folder, currentCollapsedFolder === folder.id)">folder</span>
@@ -71,103 +70,108 @@
             </div>
         </div>
 
-        <mat-form-field *ngIf="!collapsed" appearance="fill" class="search-input">
-            <input matInput name="search" #search="ngModel"
-                placeholder="Search"
-                [(ngModel)]="substringToSearch"
-                (keyup)="searchSubstring()">
-            <mat-error *ngIf="foundTables.length === 0">Nothing found.</mat-error>
-        </mat-form-field>
-
-        <div *ngIf="!collapsed && accessLevel === 'edit'" class="add-folder-button-container">
-            <button mat-stroked-button color="primary" class="add-folder-button" (click)="onAddFolder()">
-                <mat-icon>add</mat-icon>
-                Add Folder
-            </button>
-        </div>
-
-        <!-- Collections Section -->
-        <div *ngIf="!collapsed && folders.length > 0" class="folders-section">
-            <ng-container *ngFor="let folder of folders; trackBy: trackByFolderId">
-                <div *ngIf="shouldShowFolder(folder)"
-                    class="folder-item"
-                    [class.expanded]="folder.expanded"
-                    [class.drag-over]="dragOverFolder === folder.id"
-                    (dragover)="onFolderDragOver($event, folder.id)"
-                    (dragleave)="onFolderDragLeave($event, folder.id)"
-                    (drop)="onFolderDrop($event, folder)">
-                    <div class="folder-header"
-                        [class.expanded]="folder.expanded"
-                        (click)="toggleFolder(folder.id)">
-                        <!-- Folder icon on the left -->
-                        <span *ngIf="folder.name === 'All Tables'"
-                            class="material-icons folder-icon"
-                            [style.color]="getFolderIconColor(folder)">dehaze</span>
-                        <span *ngIf="folder.name !== 'All Tables'"
-                            class="material-icons folder-icon"
-                            [style.color]="getFolderIconColor(folder)">folder</span>
-
-                        <div class="folder-name">
-                            {{folder.name}}
-                        </div>
+        <!-- Expanded state container -->
+        <div *ngIf="!collapsed" class="expanded-container" [class.has-custom-folders]="hasCustomFolders()">
+            <!-- Search field always at the top -->
+            <mat-form-field appearance="fill" class="search-input">
+                <input matInput name="search" #search="ngModel"
+                    placeholder="Search"
+                    [(ngModel)]="substringToSearch"
+                    (keyup)="searchSubstring()">
+                <mat-error *ngIf="foundTables.length === 0">Nothing found.</mat-error>
+            </mat-form-field>
+
+            <!-- Add Folder button (position controlled by CSS order) -->
+            <div *ngIf="accessLevel === 'edit'" class="add-folder-button-container">
+                <button mat-stroked-button color="primary" class="add-folder-button" (click)="onAddFolder()">
+                    <mat-icon>add</mat-icon>
+                    Add Folder
+                </button>
+            </div>
 
-                        <div class="folder-actions">
-                            <button *ngIf="folder.name !== 'All Tables' && accessLevel === 'edit'"
-                                mat-icon-button class="more-folder-button"
-                                [matMenuTriggerFor]="folderMenu"
-                                (click)="$event.stopPropagation()"
-                                matTooltip="Folder options">
-                                <mat-icon>more_vert</mat-icon>
-                            </button>
-
-                            <!-- Expand/collapse icon on the right -->
-                            <mat-icon class="folder-expand-icon" [class.expanded]="folder.expanded">
-                                chevron_right
-                            </mat-icon>
-                            <mat-menu #folderMenu="matMenu">
-                                <button mat-menu-item (click)="showEditTablesDialog(folder)">
-                                    <mat-icon fontSet="material-icons-outlined">edit_note</mat-icon>
-                                    <span>Edit</span>
-                                </button>
-                                <button mat-menu-item (click)="deleteFolder(folder)">
-                                    <mat-icon fontSet="material-icons-outlined">delete</mat-icon>
-                                    <span>Delete</span>
-                                </button>
-                            </mat-menu>
-                        </div>
-                    </div>
-                    <div *ngIf="folder.expanded" class="folder-tables">
-                        <div *ngIf="getFolderTables(folder).length > 0; else noTablesInCollection"
-                            class="selected-tables-list">
-                            <div *ngFor="let table of getFolderTables(folder)"
-                                class="selected-table-item"
-                                [draggable]="true"
-                                (dragstart)="onTableDragStart($event, table)"
-                                (dragend)="onTableDragEnd($event)">
-                                <a class="table-link"
-                                    routerLink="/dashboard/{{connectionID}}/{{table.table}}"
-                                    [queryParams]="{page_index: 0, page_size: 30}"
-                                    [ngClass]="{'table-link_active': selectedTable === table.table}"
-                                    (click)="closeSidebar()">
-                                    <span class="table-name">{{getTableName(table)}}</span>
-                                </a>
+            <!-- Collections Section -->
+            <div *ngIf="folders && folders.length > 0" class="folders-section">
+                    <ng-container *ngFor="let folder of folders; trackBy: trackByFolderId">
+                        <div *ngIf="shouldShowFolder(folder)"
+                            class="folder-item"
+                            [class.expanded]="folder.expanded"
+                            [class.drag-over]="dragOverFolder === folder.id"
+                            (dragover)="onFolderDragOver($event, folder.id)"
+                            (dragleave)="onFolderDragLeave($event, folder.id)"
+                            (drop)="onFolderDrop($event, folder)">
+                            <div class="folder-header"
+                                [class.expanded]="folder.expanded"
+                                (click)="toggleFolder(folder.id)">
+                                <!-- Folder icon on the left -->
+                                <span *ngIf="folder.name === 'All Tables'"
+                                    class="material-icons folder-icon"
+                                    [style.color]="getFolderIconColor(folder)">dehaze</span>
+                                <span *ngIf="folder.name !== 'All Tables'"
+                                    class="material-icons folder-icon"
+                                    [style.color]="getFolderIconColor(folder)">folder</span>
+
+                                <div class="folder-name">
+                                    {{folder.name}}
+                                </div>
+
+                                <div class="folder-actions">
+                                    <button *ngIf="folder.name !== 'All Tables' && accessLevel === 'edit'"
+                                        mat-icon-button class="more-folder-button"
+                                        [matMenuTriggerFor]="folderMenu"
+                                        (click)="$event.stopPropagation()"
+                                        matTooltip="Folder options">
+                                        <mat-icon>more_vert</mat-icon>
+                                    </button>
+
+                                    <!-- Expand/collapse icon on the right -->
+                                    <mat-icon class="folder-expand-icon" [class.expanded]="folder.expanded">
+                                        chevron_right
+                                    </mat-icon>
+                                    <mat-menu #folderMenu="matMenu">
+                                        <button mat-menu-item (click)="showEditTablesDialog(folder)">
+                                            <mat-icon fontSet="material-icons-outlined">edit_note</mat-icon>
+                                            <span>Edit</span>
+                                        </button>
+                                        <button mat-menu-item (click)="deleteFolder(folder)">
+                                            <mat-icon fontSet="material-icons-outlined">delete</mat-icon>
+                                            <span>Delete</span>
+                                        </button>
+                                    </mat-menu>
+                                </div>
                             </div>
-
-                        </div>
-                        <ng-template #noTablesInCollection>
-                            <div class="no-tables-message" [class.empty-folder-message]="folder.isEmpty">
-                                <p *ngIf="!folder.isEmpty">No tables in this folder</p>
-                                <button mat-stroked-button
-                                    color="primary"
-                                    [class.empty-folder-button]="folder.isEmpty"
-                                    (click)="showEditTablesDialog(folder)">
-                                    {{folder.isEmpty ? 'Add or drag and drop tables' : 'Add Table'}}
-                                </button>
+                            <div *ngIf="folder.expanded" class="folder-tables">
+                                <div *ngIf="getFolderTables(folder).length > 0; else noTablesInCollection"
+                                    class="selected-tables-list">
+                                    <div *ngFor="let table of getFolderTables(folder)"
+                                        class="selected-table-item"
+                                        [draggable]="true"
+                                        (dragstart)="onTableDragStart($event, table)"
+                                        (dragend)="onTableDragEnd($event)">
+                                        <a class="table-link"
+                                            routerLink="/dashboard/{{connectionID}}/{{table.table}}"
+                                            [queryParams]="{page_index: 0, page_size: 30}"
+                                            [ngClass]="{'table-link_active': selectedTable === table.table}"
+                                            (click)="closeSidebar()">
+                                            <span class="table-name">{{getTableName(table)}}</span>
+                                        </a>
+                                    </div>
+
+                                </div>
+                                <ng-template #noTablesInCollection>
+                                    <div class="no-tables-message" [class.empty-folder-message]="folder.isEmpty">
+                                        <p *ngIf="!folder.isEmpty">No tables in this folder</p>
+                                        <button mat-stroked-button
+                                            color="primary"
+                                            [class.empty-folder-button]="folder.isEmpty"
+                                            (click)="showEditTablesDialog(folder)">
+                                            {{folder.isEmpty ? 'Add or drag and drop tables' : 'Add Table'}}
+                                        </button>
+                                    </div>
+                                </ng-template>
                             </div>
-                        </ng-template>
-                    </div>
-                </div>
-            </ng-container>
+                        </div>
+                    </ng-container>
+            </div>
         </div>
 
     </div>
diff --git a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.ts b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.ts
index c386cc20a..68b63c871 100644
--- a/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.ts
+++ b/frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.ts
@@ -429,6 +429,11 @@ export class DbTablesListComponent implements OnInit, OnChanges {
     return folder.id;
   }
 
+  hasCustomFolders(): boolean {
+    // Check if there are folders other than "All Tables"
+    return this.folders.some(folder => folder.name !== 'All Tables');
+  }
+
   private preserveFolderStates() {
     // Save expanded states of all folders
     this.folders.forEach(folder => {
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.css b/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.css
index 7e45a5324..af4b5f51d 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.css
+++ b/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.css
@@ -22,6 +22,22 @@
     margin-bottom: 16px;
 }
 
+.foreign-key ::ng-deep .mat-mdc-form-field-hint-wrapper {
+    padding-right: 0;
+    width: calc(100% + 8px);
+}
+
+@media screen and (width <= 600px) {
+    .foreign-key ::ng-deep .mat-mdc-form-field-subscript-wrapper{
+        margin-bottom: 24px;
+    }
+
+    .foreign-key ::ng-deep .mat-mdc-form-field-bottom-align::before {
+        margin-left: 0;
+    }
+
+}
+
 .hint-link {
     color: var(--color-accentedPalette-500);
 }
diff --git a/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.html b/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.html
index cb1b60249..1c1b2a961 100644
--- a/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.html
+++ b/frontend/src/app/components/ui-components/record-edit-fields/foreign-key/foreign-key.component.html
@@ -18,8 +18,8 @@
                 </mat-option>
             }
         </mat-autocomplete>
-        <mat-hint>Improve search performance by configuring <em>Foreign key search fields</em>&nbsp;
-            <a routerLink="/dashboard/{{connectionID}}/{{relations.referenced_table_name}}/settings" class="hint-link">here</a>.
+        <mat-hint>Improve search performance by configuring <em>Searchable foreign key columns</em>&nbsp;
+            <a routerLink="/dashboard/{{connectionID}}/{{relations.referenced_table_name}}/settings" class="hint-link">here</a>
         </mat-hint>
     </mat-form-field>
     <a routerLink="/dashboard/{{connectionID}}/{{relations.referenced_table_name}}/entry"