diff --git a/frontend/angular.json b/frontend/angular.json
index d17ef10f6..852ec8243 100644
--- a/frontend/angular.json
+++ b/frontend/angular.json
@@ -29,7 +29,14 @@
 								"output": "./assets/monaco"
 							}
 						],
-						"styles": ["src/custom-theme.scss", "src/styles.scss"],
+						"styles": [
+							"node_modules/@fontsource/noto-sans/300.css",
+							"node_modules/@fontsource/noto-sans/400.css",
+							"node_modules/@fontsource/noto-sans/500.css",
+							"node_modules/@material-symbols/font-400/outlined.css",
+							"src/custom-theme.scss",
+							"src/styles.scss"
+						],
 						"stylePreprocessorOptions": {
 							"includePaths": ["node_modules/@brumeilde/ngx-theme/presets/material"]
 						},
diff --git a/frontend/package.json b/frontend/package.json
index 56840f647..e153a92c1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,7 +26,9 @@
 		"@angular/platform-browser-dynamic": "~20.3.16",
 		"@angular/router": "~20.3.16",
 		"@brumeilde/ngx-theme": "^1.2.1",
+		"@fontsource/noto-sans": "^5.2.10",
 		"@jsonurl/jsonurl": "^1.1.8",
+		"@material-symbols/font-400": "^0.40.2",
 		"@ngstack/code-editor": "^9.0.0",
 		"@sentry-internal/rrweb": "^2.31.0",
 		"@sentry/angular": "^10.33.0",
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 9b22bfe22..a298447e3 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -49,11 +49,11 @@
                 <div matListItemTitle>Zapier</div>
             </a>
             <a mat-list-item href="https://docs.rocketadmin.com/" target="_blank">
-                <mat-icon matListItemIcon class="connection-navigation__icon" fontSet="material-icons-outlined">help_outlined</mat-icon>
+                <mat-icon matListItemIcon class="connection-navigation__icon" fontSet="material-symbols-outlined">help</mat-icon>
                 <div matListItemTitle>Help center</div>
             </a>
             <mat-list-item (click)="logOut()" data-testid="logout-button-account-menu">
-                <mat-icon matListItemIcon class="connection-navigation__icon">exit_to_app</mat-icon>
+                <mat-icon matListItemIcon class="connection-navigation__icon">logout</mat-icon>
                 <div matListItemTitle>Log out</div>
             </mat-list-item>
         </mat-nav-list>
@@ -195,11 +195,11 @@
                         <span>Zapier</span>
                     </a>
                     <a mat-menu-item href="https://docs.rocketadmin.com/" target="_blank">
-                        <mat-icon fontSet="material-icons-outlined">help_outlined</mat-icon>
+                        <mat-icon fontSet="material-symbols-outlined">help</mat-icon>
                         <span>Help center</span>
                     </a>
                     <button mat-menu-item (click)="logOut()" data-testid="logout-button-account-menu">
-                        <mat-icon>exit_to_app</mat-icon>
+                        <mat-icon>logout</mat-icon>
                         <span>Log out</span>
                     </button>
                 </mat-menu>
diff --git a/frontend/src/app/components/company/company.component.html b/frontend/src/app/components/company/company.component.html
index 2414587af..66375f66b 100644
--- a/frontend/src/app/components/company/company.component.html
+++ b/frontend/src/app/components/company/company.component.html
@@ -80,7 +80,7 @@ <h2 class="heading-2 tableHeader__heading">Members <span *ngIf="currentPlan ===
                     [disabled]="currentPlan === 'free' && usersCount >= 3 && isSaas">
                     Invite member
                     <mat-icon *ngIf="currentPlan === 'free' && usersCount >= 3 && isSaas">
-                        info_outline
+                        info
                     </mat-icon>
                 </button>
             </div>
@@ -101,7 +101,7 @@ <h2 class="heading-2 tableHeader__heading">Members <span *ngIf="currentPlan ===
                 <mat-icon *ngIf="element.externalRegistrationProvider === null"
                     class="company-member-cell_email-icon"
                     matTooltip="Email registration">
-                    mail_outline
+                    mail
                 </mat-icon>
                 <mat-icon *ngIf="element.externalRegistrationProvider !== null"
                     class="company-member-cell_email-icon"
@@ -236,8 +236,8 @@ <h2 class="heading-2 tableHeader__heading">Members <span *ngIf="currentPlan ===
             <td mat-cell *matCellDef="let element; let i = index"
                 data-label="Access"
                 class="company-member-cell company-member-cell_content-center">
-                <mat-icon *ngIf="element.has_groups" class="company-member-cell_accessed" fontSet="material-icons-outlined">check_circle</mat-icon>
-                <mat-icon *ngIf="!element.has_groups" class="company-member-cell_not-accessed" fontSet="material-icons-outlined">cancel</mat-icon>
+                <mat-icon *ngIf="element.has_groups" class="company-member-cell_accessed" fontSet="material-symbols-outlined">check_circle</mat-icon>
+                <mat-icon *ngIf="!element.has_groups" class="company-member-cell_not-accessed" fontSet="material-symbols-outlined">cancel</mat-icon>
             </td>
         </ng-container>
 
@@ -324,7 +324,7 @@ <h2 class="heading-2 tableHeader__heading">Branding</h2>
                     <form #uploadLogoForm="ngForm" class="upload-logo-form">
                         <div class="file-uploader-appearance">
                             <button mat-stroked-button type="button" (click)="logoInput.click()">
-                                <mat-icon fontSet="material-icons-outlined">upload</mat-icon>
+                                <mat-icon fontSet="material-symbols-outlined">upload</mat-icon>
                                 Company logo
                             </button>
                             <input #logoInput type="file" class="file-input" name="company-logo-uploader" (change)="onCompanyLogoSelected($event)" hidden>
@@ -338,7 +338,7 @@ <h2 class="heading-2 tableHeader__heading">Branding</h2>
                     <form #uploadFaviconForm="ngForm" class="upload-logo-form">
                         <div class="file-uploader-appearance">
                             <button mat-stroked-button type="button" (click)="faviconInput.click()">
-                                <mat-icon fontSet="material-icons-outlined">upload</mat-icon>
+                                <mat-icon fontSet="material-symbols-outlined">upload</mat-icon>
                                 Favicon
                             </button>
                             <input #faviconInput type="file" class="file-input" name="company-favicon-uploader" (change)="onFaviconSelected($event)" hidden>
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 24c1b89d8..cca6a5565 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
@@ -15,7 +15,7 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
                 [queryParams]="getDedicatedPageLinkParams()"
                 matTooltip="Open the record"
                 (click)="stashUrlParams()">
-                <mat-icon fontSet="material-icons-outlined">create</mat-icon>
+                <mat-icon fontSet="material-symbols-outlined">create</mat-icon>
             </a>
         </div>
         <button mat-icon-button (click)="handleClose()">
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 bfe09f292..f7328b192 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
@@ -96,7 +96,7 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
                     <button *ngIf="tableData.displayedColumns && tableData.columns" mat-button [matMenuTriggerFor]="menu"
                         angulartics2On="click"
                         angularticsAction="Dashboard: columns multiselect is clicked">
-                        <mat-icon fontSet="material-icons-outlined">view_week</mat-icon>
+                        <mat-icon fontSet="material-symbols-outlined">view_week</mat-icon>
                         Columns
                             <span class="db-table-manage-columns-button__count">
                                 ({{ tableData.displayedDataColumns.length   }}
@@ -334,7 +334,7 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
                             class="db-table-cell-action-button"
                             [matTooltip]="action.title"
                             (click)="handleAction($event, action, element)">
-                            <mat-icon fontSet="material-icons-outlined">
+                            <mat-icon fontSet="material-symbols-outlined">
                                 {{action.icon}}
                             </mat-icon>
                         </button>
@@ -350,7 +350,7 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
                         angularticsAction="Dashboard: edit row is clicked"
                         matTooltip="Edit row"
                         (click)="stashUrlParams()">
-                        <mat-icon fontSet="material-icons-outlined">create</mat-icon>
+                        <mat-icon fontSet="material-symbols-outlined">create</mat-icon>
                     </a>
                     <a mat-icon-button *ngIf="tableData.permissions.add"
                         routerLink="/dashboard/{{connectionID}}/{{name}}/entry"
@@ -363,7 +363,7 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
                         angularticsAction="Dashboard: duplicate row is clicked"
                         matTooltip="Duplicate row"
                         (click)="stashUrlParams()">
-                        <mat-icon fontSet="material-icons-outlined">difference</mat-icon>
+                        <mat-icon fontSet="material-symbols-outlined">difference</mat-icon>
                     </a>
                     <button type="button" mat-icon-button *ngIf="tableData.permissions.delete && tableData.canDelete"
                         class="db-table-cell-action-button"
@@ -372,7 +372,7 @@ <h2 class="mat-h2 table-name">{{ displayName }}</h2>
                         angularticsAction="Dashboard: delete row is clicked"
                         matTooltip="Delete row"
                         (click)="handleDeleteRow($event, element)">
-                        <mat-icon fontSet="material-icons-outlined">delete</mat-icon>
+                        <mat-icon fontSet="material-symbols-outlined">delete</mat-icon>
                     </button>
                 </mat-cell>
             </ng-container>
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.html
index 550ee3a43..346386a5f 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/widget/widget.component.html
@@ -55,5 +55,5 @@
 <button mat-icon-button type="button" class="widget-delete-button"
     matTooltip="Delete widget"
     (click)="onWidgetDelete.emit(widget.field_name)">
-    <mat-icon>delete_outline</mat-icon>
+    <mat-icon>delete</mat-icon>
 </button>
\ No newline at end of file
diff --git a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html
index 00f8b6716..378de5096 100644
--- a/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html
+++ b/frontend/src/app/components/dashboard/db-table-view/saved-filters-panel/saved-filters-panel.component.html
@@ -40,11 +40,11 @@
         </mat-chip-listbox>
         <mat-menu #filterMenu="matMenu">
             <button mat-menu-item (click)="handleEditFilter(currentFilterForMenu)">
-                <mat-icon fontSet="material-icons-outlined">create</mat-icon>
+                <mat-icon fontSet="material-symbols-outlined">create</mat-icon>
                 <span>Edit</span>
             </button>
             <button mat-menu-item (click)="handleDeleteFilter(currentFilterForMenu)">
-                <mat-icon fontSet="material-icons-outlined">delete</mat-icon>
+                <mat-icon fontSet="material-symbols-outlined">delete</mat-icon>
                 <span>Delete</span>
             </button>
         </mat-menu>
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 bb8824c20..6a55c9269 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
@@ -1,1190 +1,1183 @@
 :host {
-    width: 240px;
-    max-width: 240px;
-    min-width: 240px;
-    display: block;
-    overflow-x: hidden;
-    overflow-y: auto;
-    position: relative;
+	width: 240px;
+	max-width: 240px;
+	min-width: 240px;
+	display: block;
+	overflow-x: hidden;
+	overflow-y: auto;
+	position: relative;
 }
 
 :host-context(.side-bar_collapsed) {
-    width: 65px;
-    max-width: 65px;
-    min-width: 65px;
-    overflow-x: hidden;
-    overflow-y: auto;
+	width: 65px;
+	max-width: 65px;
+	min-width: 65px;
+	overflow-x: hidden;
+	overflow-y: auto;
 }
 
 /* Prevent horizontal scroll in sidebar */
 :host * {
-    max-width: 100%;
-    box-sizing: border-box;
+	max-width: 100%;
+	box-sizing: border-box;
 }
 
-
 .collapsed-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 100%;
-    min-height: calc(100vh - 120px); /* Adjust based on header height */
-    position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	height: 100%;
+	min-height: calc(100vh - 120px); /* Adjust based on header height */
+	position: relative;
 }
 
 .collapsed-top-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    flex: 1;
-    justify-content: flex-start;
-    padding-top: 8px;
-    overflow-y: auto;
-    width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 8px;
+	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;
-    position: sticky;
-    bottom: 0;
-    background-color: #ffffff;
-    padding: 8px 0;
-    width: 100%;
-    z-index: 10;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	position: sticky;
+	bottom: 0;
+	background-color: #ffffff;
+	padding: 8px 0;
+	width: 100%;
+	z-index: 10;
 }
 
 .collapsed-folders {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 8px;
 }
 
 :host-context(.side-bar_collapsed) .collapsed-folders {
-    width: 100%;
-    justify-content: center;
-    align-items: center;
+	width: 100%;
+	justify-content: center;
+	align-items: center;
 }
 
 .collapsed-folder-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px; /* Restored to 32px for square shape */
-    border-radius: 4px;
-    background-color: transparent;
-    color: var(--color-primaryPalette-50-contrast);
-    cursor: pointer;
-    transition: background-color 0.2s ease;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px; /* Restored to 32px for square shape */
+	border-radius: 4px;
+	background-color: transparent;
+	color: var(--color-primaryPalette-50-contrast);
+	cursor: pointer;
+	transition: background-color 0.2s ease;
 }
 
 .collapsed-folder-item:hover {
-    background-color: var(--color-primaryPalette-100);
+	background-color: var(--color-primaryPalette-100);
 }
 
 .collapsed-folder-item_active {
-    background-color: rgba(33, 33, 33, 0.1);
-    color: #212121;
+	background-color: rgba(33, 33, 33, 0.1);
+	color: #212121;
 }
 
 .collapsed-folder-item_active:hover {
-    background-color: rgba(33, 33, 33, 0.15);
+	background-color: rgba(33, 33, 33, 0.15);
 }
 
 .collapsed-folder-icon {
-    font-size: 20px;
-    height: 20px;
-    width: 20px;
+	font-size: 20px;
+	height: 20px;
+	width: 20px;
 }
 
 .collapsed-folder-icon.fallback {
-    font-size: 20px;
-    height: 20px;
-    width: 20px;
+	font-size: 20px;
+	height: 20px;
+	width: 20px;
 }
 
 /* Collapsed action buttons */
 .collapsed-search-button,
 .collapsed-add-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-    margin-bottom: 4px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border-radius: 4px;
+	cursor: pointer;
+	transition: background-color 0.2s ease;
+	margin-bottom: 4px;
 }
 
 .collapsed-search-button {
-    background-color: transparent;
-    color: var(--color-primaryPalette-500);
+	background-color: transparent;
+	color: var(--color-primaryPalette-500);
 }
 
 .collapsed-add-button {
-    background-color: var(--color-primaryPalette-50);
-    color: var(--color-primaryPalette-50-contrast);
+	background-color: var(--color-primaryPalette-50);
+	color: var(--color-primaryPalette-50-contrast);
 }
 
 .collapsed-search-button:hover {
-    background-color: rgba(0, 0, 0, 0.04);
+	background-color: rgba(0, 0, 0, 0.04);
 }
 
 .collapsed-add-button:hover {
-    background-color: var(--color-primaryPalette-100);
+	background-color: var(--color-primaryPalette-100);
 }
 
 .collapsed-action-icon {
-    font-size: 18px;
-    height: 18px;
-    width: 18px;
+	font-size: 18px;
+	height: 18px;
+	width: 18px;
 }
 
-
 /* Collapsed table list styles */
 .collapsed-tables-list {
-    position: relative;
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-top: none;
-    overflow: visible;
-    z-index: 1000;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-    padding: 8px;
-    margin-top: 8px;
-    border-radius: 4px;
-    width: 48px;
-    min-width: 48px;
+	position: relative;
+	background: white;
+	border: 1px solid #e0e0e0;
+	border-top: none;
+	overflow: visible;
+	z-index: 1000;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	padding: 8px;
+	margin-top: 8px;
+	border-radius: 4px;
+	width: 48px;
+	min-width: 48px;
 }
 
-
 :host-context(.side-bar_collapsed) .collapsed-tables-list {
-    margin-left: auto;
-    margin-right: auto;
+	margin-left: auto;
+	margin-right: auto;
 }
 
 .collapsed-table-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px; /* Restored to 32px for square shape */
-    text-decoration: none;
-    color: inherit;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border-radius: 6px;
-    flex-shrink: 0;
-    position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px; /* Restored to 32px for square shape */
+	text-decoration: none;
+	color: inherit;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	border-radius: 6px;
+	flex-shrink: 0;
+	position: relative;
 }
 
 .collapsed-table-item:hover {
-    transform: translateY(-1px);
+	transform: translateY(-1px);
 }
 
 .collapsed-table-item:hover .collapsed-table-icon {
-    transform: scale(1.02);
+	transform: scale(1.02);
 }
 
 .collapsed-table-item:hover .collapsed-table-initials {
-    background-color: var(--color-primaryPalette-100);
-    transform: scale(1.02);
+	background-color: var(--color-primaryPalette-100);
+	transform: scale(1.02);
 }
 
 .collapsed-table-item_active {
-    background-color: rgba(33, 33, 33, 0.1);
-    color: #212121;
+	background-color: rgba(33, 33, 33, 0.1);
+	color: #212121;
 }
 
 .collapsed-table-item_active .collapsed-table-initials {
-    background-color: #212121;
-    color: white;
-    transform: scale(1.05);
+	background-color: #212121;
+	color: white;
+	transform: scale(1.05);
 }
 
 .collapsed-table-item_active:hover .collapsed-table-initials {
-    background-color: #000000;
+	background-color: #000000;
 }
 
 /* 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;
-    }
-
-    .collapsed-folder-item:hover {
-        background-color: rgba(255, 255, 255, 0.05);
-    }
-
-
-    .collapsed-folder-item_active {
-        background-color: #212121 !important;
-        color: #ffffff !important;
-    }
-
-    /* Более специфичный селектор для гарантии */
-    .collapsed-folder-item.collapsed-folder-item_active {
-        background-color: #212121 !important;
-    }
-
-    .collapsed-folder-item_active .collapsed-folder-icon {
-        color: #ffffff !important;
-    }
-
-    .collapsed-folder-item_active:hover,
-    .collapsed-folder-item_active:focus,
-    .collapsed-folder-item_active:active {
-        background-color: #000000 !important;
-    }
-
-    /* Гарантируем фон для активной папки во всех состояниях */
-    .collapsed-folder-item_active:not(:hover):not(:focus):not(:active) {
-        background-color: #212121 !important;
-    }
-
-    .collapsed-table-item {
-        color: #e0e0e0;
-    }
-
-    .collapsed-table-item:hover {
-        background-color: rgba(255, 255, 255, 0.05);
-    }
-
-    .collapsed-table-item_active {
-        background-color: #212121;
-        color: #ffffff;
-    }
-
-    .collapsed-table-item_active:hover {
-        background-color: #000000;
-    }
-
-    .collapsed-table-icon-container {
-        background-color: #424242;
-    }
-
-    .collapsed-table-item:hover .collapsed-table-icon-container {
-        background-color: rgba(255, 255, 255, 0.1);
-    }
-
-    .collapsed-table-item_active .collapsed-table-icon-container {
-        background-color: #ffffff;
-        color: #000000;
-    }
-
-    .collapsed-table-item_active:hover .collapsed-table-icon-container {
-        background-color: #f5f5f5;
-    }
-
-    .collapsed-table-icon-container .collapsed-table-icon {
-        color: #e0e0e0;
-    }
-
-    .collapsed-table-item_active .collapsed-table-icon-container .collapsed-table-icon {
-        color: #000000;
-    }
-
-    .collapsed-table-initials {
-        background-color: #424242;
-        color: #e0e0e0;
-    }
-
-    .collapsed-table-item:hover .collapsed-table-initials {
-        background-color: rgba(255, 255, 255, 0.1);
-    }
-
-    .collapsed-table-item_active .collapsed-table-initials {
-        background-color: #ffffff;
-        color: #000000;
-    }
-
-    .collapsed-table-item_active:hover .collapsed-table-initials {
-        background-color: #f5f5f5;
-    }
-
-    .collapsed-search-button {
-        color: #ffffff !important;
-    }
-
-    .collapsed-search-button:hover {
-        background-color: rgba(255, 255, 255, 0.1);
-    }
-
-    .collapsed-add-button {
-        background-color: #424242;
-        color: #ffffff;
-    }
-
-    .collapsed-add-button:hover {
-        background-color: #555555;
-    }
+	.collapsed-tables-list {
+		background: #303030;
+		border: 1px solid #424242;
+	}
+
+	.collapsed-bottom-section {
+		background-color: #303030;
+	}
+
+	.collapsed-folder-item {
+		background-color: transparent;
+		color: #ffffff;
+	}
+
+	.collapsed-folder-item:hover {
+		background-color: rgba(255, 255, 255, 0.05);
+	}
+
+	.collapsed-folder-item_active {
+		background-color: #212121 !important;
+		color: #ffffff !important;
+	}
+
+	/* Более специфичный селектор для гарантии */
+	.collapsed-folder-item.collapsed-folder-item_active {
+		background-color: #212121 !important;
+	}
+
+	.collapsed-folder-item_active .collapsed-folder-icon {
+		color: #ffffff !important;
+	}
+
+	.collapsed-folder-item_active:hover,
+	.collapsed-folder-item_active:focus,
+	.collapsed-folder-item_active:active {
+		background-color: #000000 !important;
+	}
+
+	/* Гарантируем фон для активной папки во всех состояниях */
+	.collapsed-folder-item_active:not(:hover):not(:focus):not(:active) {
+		background-color: #212121 !important;
+	}
+
+	.collapsed-table-item {
+		color: #e0e0e0;
+	}
+
+	.collapsed-table-item:hover {
+		background-color: rgba(255, 255, 255, 0.05);
+	}
+
+	.collapsed-table-item_active {
+		background-color: #212121;
+		color: #ffffff;
+	}
+
+	.collapsed-table-item_active:hover {
+		background-color: #000000;
+	}
+
+	.collapsed-table-icon-container {
+		background-color: #424242;
+	}
+
+	.collapsed-table-item:hover .collapsed-table-icon-container {
+		background-color: rgba(255, 255, 255, 0.1);
+	}
+
+	.collapsed-table-item_active .collapsed-table-icon-container {
+		background-color: #ffffff;
+		color: #000000;
+	}
+
+	.collapsed-table-item_active:hover .collapsed-table-icon-container {
+		background-color: #f5f5f5;
+	}
+
+	.collapsed-table-icon-container .collapsed-table-icon {
+		color: #e0e0e0;
+	}
+
+	.collapsed-table-item_active .collapsed-table-icon-container .collapsed-table-icon {
+		color: #000000;
+	}
+
+	.collapsed-table-initials {
+		background-color: #424242;
+		color: #e0e0e0;
+	}
+
+	.collapsed-table-item:hover .collapsed-table-initials {
+		background-color: rgba(255, 255, 255, 0.1);
+	}
+
+	.collapsed-table-item_active .collapsed-table-initials {
+		background-color: #ffffff;
+		color: #000000;
+	}
+
+	.collapsed-table-item_active:hover .collapsed-table-initials {
+		background-color: #f5f5f5;
+	}
+
+	.collapsed-search-button {
+		color: #ffffff !important;
+	}
+
+	.collapsed-search-button:hover {
+		background-color: rgba(255, 255, 255, 0.1);
+	}
+
+	.collapsed-add-button {
+		background-color: #424242;
+		color: #ffffff;
+	}
+
+	.collapsed-add-button:hover {
+		background-color: #555555;
+	}
 }
 
 .collapsed-table-item_active:hover {
-    background-color: rgba(33, 33, 33, 0.25);
+	background-color: rgba(33, 33, 33, 0.25);
 }
 
 .collapsed-table-icon-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    background-color: var(--color-primaryPalette-50);
-    border-radius: 6px;
-    transition: all 0.2s ease;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	background-color: var(--color-primaryPalette-50);
+	border-radius: 6px;
+	transition: all 0.2s ease;
 }
 
 .collapsed-table-item:hover .collapsed-table-icon-container {
-    background-color: var(--color-primaryPalette-100);
-    transform: scale(1.02);
+	background-color: var(--color-primaryPalette-100);
+	transform: scale(1.02);
 }
 
 .collapsed-table-item_active .collapsed-table-icon-container {
-    background-color: #212121;
-    color: white;
-    transform: scale(1.05);
+	background-color: #212121;
+	color: white;
+	transform: scale(1.05);
 }
 
 .collapsed-table-item_active:hover .collapsed-table-icon-container {
-    background-color: #000000;
+	background-color: #000000;
 }
 
 .collapsed-table-icon-container .collapsed-table-icon {
-    font-size: 16px;
-    color: var(--color-primaryPalette-50-contrast);
+	font-size: 16px;
+	color: var(--color-primaryPalette-50-contrast);
 }
 
 .collapsed-table-item_active .collapsed-table-icon-container .collapsed-table-icon {
-    color: white;
+	color: white;
 }
 
-
 .collapsed-table-initials {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    background-color: var(--color-primaryPalette-50);
-    color: var(--color-primaryPalette-50-contrast);
-    border-radius: 6px;
-    font-size: 11px;
-    font-weight: 600;
-    letter-spacing: 0.5px;
-    transition: all 0.2s ease;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	background-color: var(--color-primaryPalette-50);
+	color: var(--color-primaryPalette-50-contrast);
+	border-radius: 6px;
+	font-size: 11px;
+	font-weight: 600;
+	letter-spacing: 0.5px;
+	transition: all 0.2s ease;
 }
 
 .collapsed-table-icon {
-    font-size: 18px;
-    width: 18px;
-    height: 18px;
-    color: inherit;
+	font-size: 18px;
+	width: 18px;
+	height: 18px;
+	color: inherit;
 }
 
 .collapsed-table-initials {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    border-radius: 6px;
-    background-color: var(--color-primaryPalette-50);
-    color: var(--color-primaryPalette-50-contrast);
-    transition: all 0.2s ease;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border-radius: 6px;
+	background-color: var(--color-primaryPalette-50);
+	color: var(--color-primaryPalette-50-contrast);
+	transition: all 0.2s ease;
 }
 
 .collapsed-table-text {
-    font-size: 11px;
-    font-weight: 600;
-    text-align: center;
-    letter-spacing: 0.5px;
-    text-transform: uppercase;
+	font-size: 11px;
+	font-weight: 600;
+	text-align: center;
+	letter-spacing: 0.5px;
+	text-transform: uppercase;
 }
 
 .collapsed-table-icon {
-    font-size: 16px;
-    width: 16px;
-    height: 16px;
+	font-size: 16px;
+	width: 16px;
+	height: 16px;
 }
 
-
 .mat-icon-button {
-    margin-right: -8px;
+	margin-right: -8px;
 }
 
 .mat-line {
-    line-height: 48px;
+	line-height: 48px;
 }
 
 .tables-list {
-    width: 100%;
-    box-sizing: border-box;
-    /* min-height: 0; */
-    height: calc(100vh - 100px); /* Adjust based on header height */
+	width: 100%;
+	box-sizing: border-box;
+	/* min-height: 0; */
+	height: calc(100vh - 100px); /* Adjust based on header height */
 }
 
 .tables-list ::ng-deep .table-list-item .mat-list-item-content {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 }
 
 .table-list-item {
-    cursor: pointer;
-    transition: opacity 0.2s ease;
+	cursor: pointer;
+	transition: opacity 0.2s ease;
 }
 
 .table-list-item[draggable="true"]:hover {
-    opacity: 0.8;
+	opacity: 0.8;
 }
 
 .table-list-item[draggable="true"]:active {
-    opacity: 0.6;
+	opacity: 0.6;
 }
 
-
 .table-list-initials {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    border-radius: 4px;
-    background-color: var(--color-primaryPalette-50);
-    color: var(--color-primaryPalette-50-contrast);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border-radius: 4px;
+	background-color: var(--color-primaryPalette-50);
+	color: var(--color-primaryPalette-50-contrast);
 }
 
 @media (prefers-color-scheme: dark) {
-    .table-list-initials {
-        background-color: var(--color-whitePalette-900);
-        color: var(--color-whitePalette-900-contrast);
-    }
+	.table-list-initials {
+		background-color: var(--color-whitePalette-900);
+		color: var(--color-whitePalette-900-contrast);
+	}
 
-    .folder-header.expanded {
-        background-color: #212121 !important;
-        color: #ffffff !important;
-    }
+	.folder-header.expanded {
+		background-color: #212121 !important;
+		color: #ffffff !important;
+	}
 
-    .folder-header .folder-icon {
-        color: #ffffff !important;
-    }
+	.folder-header .folder-icon {
+		color: #ffffff !important;
+	}
 
-    /* .folder-header.expanded .folder-name, */
-    .folder-header .folder-name {
-        color: #ffffff !important;
-    }
+	/* .folder-header.expanded .folder-name, */
+	.folder-header .folder-name {
+		color: #ffffff !important;
+	}
 
-    .folder-header.expanded .folder-expand-icon {
-        color: #ffffff !important;
-    }
+	.folder-header.expanded .folder-expand-icon {
+		color: #ffffff !important;
+	}
 
-    .folder-header:hover {
-        background-color: rgba(255, 255, 255, 0.05) !important;
-    }
+	.folder-header:hover {
+		background-color: rgba(255, 255, 255, 0.05) !important;
+	}
 }
 
 .table-list-initials:hover {
-    background-color: var(--color-primaryPalette-100);
+	background-color: var(--color-primaryPalette-100);
 }
 
 @media (prefers-color-scheme: dark) {
-    .table-list-initials:hover {
-        background-color: var(--color-whitePalette-900);
-    }
+	.table-list-initials:hover {
+		background-color: var(--color-whitePalette-900);
+	}
 }
 
 .table-list-icon {
-    font-size: 20px;
-    height: 20px;
-    width: 20px;
+	font-size: 20px;
+	height: 20px;
+	width: 20px;
 }
 
 .tables-list ::ng-deep .mat-list-base .mat-list-item {
-    height: 40px !important;
+	height: 40px !important;
 }
 
 .list-item_active ::ng-deep .mdc-list-item__primary-text {
-    color: var(--color-accentedPalette-500);
+	color: var(--color-accentedPalette-500);
 }
 
 .list-item_active ::ng-deep .table-list-initials {
-    background-color: var(--color-accentedPalette-500);
-    color: var(--color-accentedPalette-500-contrast);
+	background-color: var(--color-accentedPalette-500);
+	color: var(--color-accentedPalette-500-contrast);
 }
 
 .empty-message {
-    margin-top: 20px;
-    margin-left: 16px;
+	margin-top: 20px;
+	margin-left: 16px;
 }
 
 /* Expanded state container */
 .expanded-container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    position: relative;
-    overflow-y: auto;
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	position: relative;
+	overflow-y: auto;
 }
 
 .search-input {
-    background-color: transparent;
-    margin-top: 8px;
-    margin-left: 16px;
-    margin-bottom: -8px;
-    width: calc(100% - 32px);
-    max-width: calc(240px - 32px);
-    box-sizing: border-box;
-    order: 1; /* Always first */
+	background-color: transparent;
+	margin-top: 8px;
+	margin-left: 16px;
+	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;
+	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;
+	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;
-    }
+	.expanded-container.has-custom-folders .add-folder-button-container {
+		background-color: #303030;
+	}
 }
 
 .search-input ::ng-deep * {
-    background-color: transparent !important;
+	background-color: transparent !important;
 }
 
 .search-input ::ng-deep .mdc-text-field {
-    padding: 0 !important;
+	padding: 0 !important;
 }
 
 .search-input ::ng-deep .mat-mdc-form-field-infix {
-    min-height: 0;
+	min-height: 0;
 }
 
-.search-input ::ng-deep .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix {
-    padding-top: 8px;
-    padding-bottom: 8px;
+.search-input
+	::ng-deep
+	.mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea)
+	.mat-mdc-form-field-infix {
+	padding-top: 8px;
+	padding-bottom: 8px;
 }
 
 .add-folder-button {
-    width: 100%;
+	width: 100%;
 }
 
 .add-folder-button:hover {
-    border-color: #757575 !important;
-    background-color: rgba(0, 0, 0, 0.04) !important;
+	border-color: #757575 !important;
+	background-color: rgba(0, 0, 0, 0.04) !important;
 }
 
 .add-folder-button mat-icon {
-    font-size: 18px;
-    width: 18px;
-    height: 18px;
+	font-size: 18px;
+	width: 18px;
+	height: 18px;
 }
 
 .folders-section {
-    margin: 0 16px;
-    margin-bottom: 8px;
-    width: calc(100% - 32px);
-    box-sizing: border-box;
-    order: 3; /* After search and (optionally) add button */
-    flex: 1;
-    overflow-y: auto;
+	margin: 0 16px;
+	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 {
-    margin-bottom: 4px;
-    border: none;
-    border-radius: 4px;
-    background: transparent;
-    width: 100%;
-    box-sizing: border-box;
-    position: relative;
-    transition: background-color 0.2s ease;
+	margin-bottom: 4px;
+	border: none;
+	border-radius: 4px;
+	background: transparent;
+	width: 100%;
+	box-sizing: border-box;
+	position: relative;
+	transition: background-color 0.2s ease;
 }
 
 .folder-item.drag-over {
-    background-color: rgba(33, 150, 243, 0.1);
-    border: 2px dashed #2196f3;
+	background-color: rgba(33, 150, 243, 0.1);
+	border: 2px dashed #2196f3;
 }
 
 .folder-item.expanded::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 12px;
-    right: 12px;
-    height: 1px;
-    background-color: #e0e0e0;
+	content: "";
+	position: absolute;
+	bottom: 0;
+	left: 12px;
+	right: 12px;
+	height: 1px;
+	background-color: #e0e0e0;
 }
 
 .folder-header {
-    display: flex;
-    align-items: center;
-    padding: 8px 4px 8px 0;
-    cursor: pointer;
-    user-select: none;
-    height: 40px;
+	display: flex;
+	align-items: center;
+	padding: 8px 4px 8px 0;
+	cursor: pointer;
+	user-select: none;
+	height: 40px;
 }
 
 .folder-header:hover {
-    background: #f5f5f5;
+	background: #f5f5f5;
 }
 
 .folder-header.expanded {
-    background-color: var(--color-primaryPalette-50);
-    color: var(--color-primaryPalette-50-contrast);
-    border-radius: 4px;
+	background-color: var(--color-primaryPalette-50);
+	color: var(--color-primaryPalette-50-contrast);
+	border-radius: 4px;
 }
 
 .folder-header.expanded .folder-icon {
-    color: var(--color-primaryPalette-50-contrast);
+	color: var(--color-primaryPalette-50-contrast);
 }
 
 .folder-header.expanded .folder-expand-icon {
-    color: var(--color-primaryPalette-50-contrast);
+	color: var(--color-primaryPalette-50-contrast);
 }
 
 .folder-actions {
-    display: flex;
-    align-items: center;
-    opacity: 0;
-    transition: opacity 0.2s ease;
+	display: flex;
+	align-items: center;
+	opacity: 0;
+	transition: opacity 0.2s ease;
 }
 
 .folder-header:hover .folder-actions {
-    opacity: 1;
+	opacity: 1;
 }
 
-
 .more-folder-button {
-    width: 16px;
-    height: 16px;
-    line-height: 16px;
-    border: none;
-    border-radius: 0;
-    background-color: transparent !important;
-    color: #bdbdbd !important;
-    margin-left: 4px;
+	width: 16px;
+	height: 16px;
+	line-height: 16px;
+	border: none;
+	border-radius: 0;
+	background-color: transparent !important;
+	color: #bdbdbd !important;
+	margin-left: 4px;
 }
 
 .more-folder-button:hover {
-    border: none !important;
-    background-color: rgba(0, 0, 0, 0.02) !important;
-    color: #9e9e9e !important;
+	border: none !important;
+	background-color: rgba(0, 0, 0, 0.02) !important;
+	color: #9e9e9e !important;
 }
 
 .more-folder-button mat-icon {
-    font-size: 12px;
-    width: 12px;
-    height: 12px;
+	font-size: 12px;
+	width: 12px;
+	height: 12px;
 }
 
 .folder-name {
-    flex: 1;
-    font-weight: 500;
-    color: #424242;
+	flex: 1;
+	font-weight: 500;
+	color: #424242;
 }
 
 .folder-name-edit-container {
-    display: flex;
-    align-items: center;
-    flex: 1;
-    max-width: calc(100% - 40px);
+	display: flex;
+	align-items: center;
+	flex: 1;
+	max-width: calc(100% - 40px);
 }
 
 .folder-name.editing {
-    background: white;
-    border: 1px solid #2196f3;
-    border-radius: 2px;
-    padding: 2px 6px;
-    margin: 0 4px;
-    flex: 1;
-    max-width: 100%;
+	background: white;
+	border: 1px solid #2196f3;
+	border-radius: 2px;
+	padding: 2px 6px;
+	margin: 0 4px;
+	flex: 1;
+	max-width: 100%;
 }
 
 .enter-icon {
-    font-size: 16px;
-    width: 16px;
-    height: 16px;
-    color: #9e9e9e;
-    cursor: pointer;
-    margin-left: 4px;
+	font-size: 16px;
+	width: 16px;
+	height: 16px;
+	color: #9e9e9e;
+	cursor: pointer;
+	margin-left: 4px;
 }
 
 .enter-icon:hover {
-    color: #757575;
+	color: #757575;
 }
 
 .folder-icon {
-    font-size: 20px;
-    width: 20px;
-    height: 20px;
-    color: #666;
-    margin-right: 8px; /* Уменьшаем отступ до названия папки до 8px */
-    margin-left: 8px; /* Сдвигаем иконку вправо на 8px */
-    flex-shrink: 0;
+	font-size: 20px;
+	width: 20px;
+	height: 20px;
+	color: #666;
+	margin-right: 8px; /* Уменьшаем отступ до названия папки до 8px */
+	margin-left: 8px; /* Сдвигаем иконку вправо на 8px */
+	flex-shrink: 0;
 }
 
 .folder-expand-icon {
-    transition: transform 0.2s ease;
-    font-size: 20px;
-    width: 20px;
-    height: 20px;
-    color: #666;
-    margin-left: auto;
+	transition: transform 0.2s ease;
+	font-size: 20px;
+	width: 20px;
+	height: 20px;
+	color: #666;
+	margin-left: auto;
 }
 
 .folder-expand-icon.expanded {
-    transform: rotate(90deg);
+	transform: rotate(90deg);
 }
 
 .folder-tables {
-    padding: 0 12px 8px;
-    border-top: none;
-    width: 100%;
-    max-width: 240px;
-    box-sizing: border-box;
-    min-height: 40px;
+	padding: 0 12px 8px;
+	border-top: none;
+	width: 100%;
+	max-width: 240px;
+	box-sizing: border-box;
+	min-height: 40px;
 }
 
 .folder-tables-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 8px 0;
-    margin-bottom: 4px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 8px 0;
+	margin-bottom: 4px;
 }
 
 .tables-count {
-    font-size: 12px;
-    color: #666;
-    font-weight: 500;
+	font-size: 12px;
+	color: #666;
+	font-weight: 500;
 }
 
 .add-table-button {
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
-    border: none;
-    border-radius: 0;
-    background-color: transparent !important;
-    color: #9e9e9e !important;
+	width: 24px;
+	height: 24px;
+	line-height: 24px;
+	border: none;
+	border-radius: 0;
+	background-color: transparent !important;
+	color: #9e9e9e !important;
 }
 
 .add-table-button:hover {
-    border: none !important;
-    background-color: rgba(0, 0, 0, 0.02) !important;
-    color: #757575 !important;
+	border: none !important;
+	background-color: rgba(0, 0, 0, 0.02) !important;
+	color: #757575 !important;
 }
 
 .add-table-button mat-icon {
-    font-size: 16px;
-    width: 16px;
-    height: 16px;
+	font-size: 16px;
+	width: 16px;
+	height: 16px;
 }
 
 .selected-tables-list {
-    max-height: none;
-    overflow-y: visible;
+	max-height: none;
+	overflow-y: visible;
 }
 
 .selected-table-item {
-    display: flex;
-    align-items: center;
-    padding: 2px 0 2px 8px;
-    margin-bottom: 0;
-    background: transparent;
-    border-radius: 0;
-    font-size: 14px;
-    width: 100%;
-    box-sizing: border-box;
-    overflow: hidden;
+	display: flex;
+	align-items: center;
+	padding: 2px 0 2px 8px;
+	margin-bottom: 0;
+	background: transparent;
+	border-radius: 0;
+	font-size: 14px;
+	width: 100%;
+	box-sizing: border-box;
+	overflow: hidden;
 }
 
-
 .table-link {
-    flex: 1;
-    display: block;
-    text-decoration: none;
-    color: inherit;
-    overflow: hidden;
-    min-width: 0;
+	flex: 1;
+	display: block;
+	text-decoration: none;
+	color: inherit;
+	overflow: hidden;
+	min-width: 0;
 }
 
 .table-link:hover {
-    background-color: rgba(0, 0, 0, 0.04);
-    border-radius: 0;
-    margin: 0 -12px;
-    padding: 0 12px;
+	background-color: rgba(0, 0, 0, 0.04);
+	border-radius: 0;
+	margin: 0 -12px;
+	padding: 0 12px;
 }
 
 .table-link_active .table-name {
-    color: var(--color-accentedPalette-500);
+	color: var(--color-accentedPalette-500);
 }
 
 .table-name {
-    flex: 1;
-    font-weight: 400;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    min-width: 0;
-    display: block;
-    padding: 4px 0 4px 0;
+	flex: 1;
+	font-weight: 400;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	min-width: 0;
+	display: block;
+	padding: 4px 0 4px 0;
 }
 
 .remove-table-button {
-    width: 20px;
-    height: 20px;
-    line-height: 20px;
-    opacity: 0.4;
-    flex-shrink: 0;
-    border: none;
-    border-radius: 0;
-    background-color: transparent !important;
-    color: #9e9e9e !important;
-    margin-left: auto;
-    margin-right: 0;
+	width: 20px;
+	height: 20px;
+	line-height: 20px;
+	opacity: 0.4;
+	flex-shrink: 0;
+	border: none;
+	border-radius: 0;
+	background-color: transparent !important;
+	color: #9e9e9e !important;
+	margin-left: auto;
+	margin-right: 0;
 }
 
 .remove-table-button:hover {
-    opacity: 0.7;
-    border: none !important;
-    background-color: transparent !important;
-    color: #757575 !important;
+	opacity: 0.7;
+	border: none !important;
+	background-color: transparent !important;
+	color: #757575 !important;
 }
 
 .remove-table-button mat-icon {
-    font-size: 14px;
-    width: 14px;
-    height: 14px;
+	font-size: 14px;
+	width: 14px;
+	height: 14px;
 }
 
 .no-tables-message {
-    text-align: center;
-    padding: 16px 8px;
-    color: #666;
-    height: 200px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+	text-align: center;
+	padding: 16px 8px;
+	color: #666;
+	height: 200px;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
 }
 
 .no-tables-message p {
-    margin: 0 0 12px 0;
-    font-size: 14px;
+	margin: 0 0 12px 0;
+	font-size: 14px;
 }
 
 .no-tables-message button {
-    font-size: 12px;
-    border-color: #e0e0e0 !important;
-    color: #9e9e9e !important;
-    background-color: transparent !important;
+	font-size: 12px;
+	border-color: #e0e0e0 !important;
+	color: #9e9e9e !important;
+	background-color: transparent !important;
 }
 
 .no-tables-message button:hover {
-    border-color: #bdbdbd !important;
-    background-color: rgba(0, 0, 0, 0.02) !important;
-    color: #757575 !important;
+	border-color: #bdbdbd !important;
+	background-color: rgba(0, 0, 0, 0.02) !important;
+	color: #757575 !important;
 }
 
 /* Styles for empty folders */
 .no-tables-message.empty-folder-message {
-    padding: 12px 20px;
-    height: auto;
-    min-height: auto;
+	padding: 12px 20px;
+	height: auto;
+	min-height: auto;
 }
 
-
 .empty-folder-button {
-    border-style: dashed !important;
-    border-width: 2px !important;
-    border-color: #ccc !important;
-    background-color: transparent !important;
-    color: #666 !important;
-    font-size: 14px !important;
-    min-width: 200px !important;
-    padding: 20px 16px !important;
+	border-style: dashed !important;
+	border-width: 2px !important;
+	border-color: #ccc !important;
+	background-color: transparent !important;
+	color: #666 !important;
+	font-size: 14px !important;
+	min-width: 200px !important;
+	padding: 20px 16px !important;
 }
 
 .empty-folder-button:hover {
-    border-color: #2196F3 !important;
-    color: #2196F3 !important;
-    background-color: rgba(33, 150, 243, 0.04) !important;
+	border-color: #2196f3 !important;
+	color: #2196f3 !important;
+	background-color: rgba(33, 150, 243, 0.04) !important;
 }
 
 /* Folder menu alignment */
 ::ng-deep .mat-menu-panel .mat-menu-item {
-    display: flex !important;
-    align-items: center !important;
-    gap: 12px !important;
-    min-height: 48px !important;
+	display: flex !important;
+	align-items: center !important;
+	gap: 12px !important;
+	min-height: 48px !important;
 }
 
-::ng-deep .mat-menu-panel .mat-menu-item .material-icons-outlined {
-    font-size: 20px !important;
-    width: 20px !important;
-    height: 20px !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    line-height: 1 !important;
+::ng-deep .mat-menu-panel .mat-menu-item .material-symbols-outlined {
+	font-size: 20px !important;
+	width: 20px !important;
+	height: 20px !important;
+	display: flex !important;
+	align-items: center !important;
+	justify-content: center !important;
+	line-height: 1 !important;
 }
 
 ::ng-deep .mat-menu-panel .mat-menu-item span {
-    display: flex !important;
-    align-items: center !important;
+	display: flex !important;
+	align-items: center !important;
 }
 
 /* Add Table Dialog Styles */
 .edit-tables-dialog {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-    opacity: 1;
-    visibility: visible;
-    transition: opacity 0.2s ease, visibility 0.2s ease;
-    outline: none;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.5);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 1000;
+	opacity: 1;
+	visibility: visible;
+	transition:
+		opacity 0.2s ease,
+		visibility 0.2s ease;
+	outline: none;
 }
 
 .dialog-content {
-    background: white;
-    border-radius: 8px;
-    max-width: 400px;
-    width: 90%;
-    max-height: 500px;
-    display: flex;
-    flex-direction: column;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-    transform: scale(1);
-    transition: transform 0.2s ease;
-    position: relative;
+	background: white;
+	border-radius: 8px;
+	max-width: 400px;
+	width: 90%;
+	max-height: 500px;
+	display: flex;
+	flex-direction: column;
+	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+	transform: scale(1);
+	transition: transform 0.2s ease;
+	position: relative;
 }
 
 .dialog-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 16px 20px;
-    border-bottom: 1px solid #e0e0e0;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 16px 20px;
+	border-bottom: 1px solid #e0e0e0;
 }
 
 .dialog-header h3 {
-    margin: 0;
-    font-size: 18px;
-    font-weight: 500;
+	margin: 0;
+	font-size: 18px;
+	font-weight: 500;
 }
 
 .dialog-header .close-button {
-    color: #666;
-    width: 32px;
-    height: 32px;
-    line-height: 32px;
+	color: #666;
+	width: 32px;
+	height: 32px;
+	line-height: 32px;
 }
 
 .dialog-header .close-button:hover {
-    color: #333;
-    background-color: rgba(0, 0, 0, 0.04);
+	color: #333;
+	background-color: rgba(0, 0, 0, 0.04);
 }
 
 .dialog-header .close-button mat-icon {
-    font-size: 20px;
-    width: 20px;
-    height: 20px;
+	font-size: 20px;
+	width: 20px;
+	height: 20px;
 }
 
 .dialog-body {
-    padding: 16px 20px;
-    max-height: 300px;
-    overflow-y: auto;
+	padding: 16px 20px;
+	max-height: 300px;
+	overflow-y: auto;
 }
 
 .available-table-item {
-    padding: 8px 0;
-    border-bottom: 1px solid #f0f0f0;
+	padding: 8px 0;
+	border-bottom: 1px solid #f0f0f0;
 }
 
 .available-table-item:last-child {
-    border-bottom: none;
+	border-bottom: none;
 }
 
 /* Edit Tables Dialog specific styles */
 .edit-tables-dialog .dialog-content {
-    max-width: 450px;
-    width: 90%;
+	max-width: 450px;
+	width: 90%;
 }
 
 .edit-tables-dialog .dialog-body {
-    max-height: 400px;
-    overflow-y: auto;
+	max-height: 400px;
+	overflow-y: auto;
 }
 
 .edit-tables-dialog .table-list {
-    margin-top: 16px;
+	margin-top: 16px;
 }
 
 .edit-tables-dialog .table-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 12px 0;
-    border-bottom: 1px solid #e0e0e0;
-    transition: background-color 0.2s ease;
-    padding-left: 4px;
-    padding-right: 4px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 12px 0;
+	border-bottom: 1px solid #e0e0e0;
+	transition: background-color 0.2s ease;
+	padding-left: 4px;
+	padding-right: 4px;
 }
 
 .edit-tables-dialog .table-item:hover {
-    background-color: rgba(0, 0, 0, 0.04);
+	background-color: rgba(0, 0, 0, 0.04);
 }
 
 .edit-tables-dialog .table-item:last-child {
-    border-bottom: none;
+	border-bottom: none;
 }
 
 .edit-tables-dialog .table-name {
-    flex: 1;
-    font-size: 14px;
-    color: #333;
+	flex: 1;
+	font-size: 14px;
+	color: #333;
 }
 
 .edit-tables-dialog .action-button {
-    min-width: 60px;
-    height: 32px;
-    font-size: 12px;
-    font-weight: 500;
-    border-radius: 4px;
-    border: none;
+	min-width: 60px;
+	height: 32px;
+	font-size: 12px;
+	font-weight: 500;
+	border-radius: 4px;
+	border: none;
 }
 
 .edit-tables-dialog .add-button {
-    color: #4caf50;
-    background-color: transparent;
+	color: #4caf50;
+	background-color: transparent;
 }
 
 .edit-tables-dialog .add-button:hover {
-    background-color: rgba(76, 175, 80, 0.1);
+	background-color: rgba(76, 175, 80, 0.1);
 }
 
 .edit-tables-dialog .remove-button {
-    color: #f44336;
-    background-color: transparent;
+	color: #f44336;
+	background-color: transparent;
 }
 
 .edit-tables-dialog .remove-button:hover {
-    background-color: rgba(244, 67, 54, 0.1);
+	background-color: rgba(244, 67, 54, 0.1);
 }
 
 .edit-tables-dialog .folder-color-section {
-    margin-bottom: 20px;
-    padding-bottom: 16px;
-    border-bottom: 1px solid #e0e0e0;
+	margin-bottom: 20px;
+	padding-bottom: 16px;
+	border-bottom: 1px solid #e0e0e0;
 }
 
 .edit-tables-dialog .folder-color-section h4 {
-    margin: 0 0 8px 0;
-    font-size: 14px;
-    font-weight: 500;
-    color: #666;
+	margin: 0 0 8px 0;
+	font-size: 14px;
+	font-weight: 500;
+	color: #666;
 }
 
 .edit-tables-dialog .color-row {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
+	display: flex;
+	gap: 8px;
+	flex-wrap: wrap;
 }
 
 .edit-tables-dialog .tables-section h4 {
-    margin: 0 0 2px 0;
-    font-size: 14px;
-    font-weight: 500;
-    color: #666;
+	margin: 0 0 2px 0;
+	font-size: 14px;
+	font-weight: 500;
+	color: #666;
 }
 
 .edit-tables-dialog .color-option {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    border: 2px solid #e0e0e0;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    position: relative;
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	border: 2px solid #e0e0e0;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	position: relative;
 }
 
 .edit-tables-dialog .color-option:hover {
-    transform: scale(1.1);
-    border-color: #999;
+	transform: scale(1.1);
+	border-color: #999;
 }
 
 .edit-tables-dialog .color-option.selected {
-    border-color: #333;
-    border-width: 3px;
-    transform: scale(1.15);
+	border-color: #333;
+	border-width: 3px;
+	transform: scale(1.15);
 }
 
 .edit-tables-dialog .color-option.selected::after {
-    content: '✓';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: white;
-    font-weight: bold;
-    font-size: 12px;
-    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
+	content: "✓";
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	color: white;
+	font-weight: bold;
+	font-size: 12px;
+	text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
 }
 
 .dialog-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 8px;
-    padding: 16px 20px;
-    border-top: 1px solid #e0e0e0;
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+	padding: 16px 20px;
+	border-top: 1px solid #e0e0e0;
 }
-
-
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 4d6c97d83..f3b4b6a1c 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,15 +25,15 @@
                         matTooltipPosition="right"
                         (click)="onCollapsedFolderClick(folder)">
                     <span *ngIf="folder.name === 'All Tables'"
-                        class="material-icons collapsed-folder-icon">dehaze</span>
+                        class="material-symbols-outlined collapsed-folder-icon">dehaze</span>
                         <span *ngIf="folder.name !== 'All Tables'"
-                            class="material-icons collapsed-folder-icon"
+                            class="material-symbols-outlined collapsed-folder-icon"
                             [style.color]="getFolderIconColor(folder, currentCollapsedFolder === folder.id)">folder</span>
                     </div>
                 </div>
                 <!-- Fallback to dehaze if no folders -->
                 <span *ngIf="folders.length === 0"
-                    class="material-icons collapsed-folder-icon"
+                    class="material-symbols-outlined collapsed-folder-icon"
                     matTooltip="All Tables"
                     matTooltipPosition="right">dehaze</span>
 
@@ -104,10 +104,10 @@
                                 (click)="toggleFolder(folder.id)">
                                 <!-- Folder icon on the left -->
                                 <span *ngIf="folder.name === 'All Tables'"
-                                    class="material-icons folder-icon"
+                                    class="material-symbols-outlined folder-icon"
                                     [style.color]="getFolderIconColor(folder)">dehaze</span>
                                 <span *ngIf="folder.name !== 'All Tables'"
-                                    class="material-icons folder-icon"
+                                    class="material-symbols-outlined folder-icon"
                                     [style.color]="getFolderIconColor(folder)">folder</span>
 
                                 <div class="folder-name">
@@ -129,11 +129,11 @@
                                     </mat-icon>
                                     <mat-menu #folderMenu="matMenu">
                                         <button mat-menu-item (click)="showEditTablesDialog(folder)">
-                                            <mat-icon fontSet="material-icons-outlined">edit_note</mat-icon>
+                                            <mat-icon fontSet="material-symbols-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>
+                                            <mat-icon fontSet="material-symbols-outlined">delete</mat-icon>
                                             <span>Delete</span>
                                         </button>
                                     </mat-menu>
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 e4b8a42b6..88fe4efdc 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
@@ -26,19 +26,19 @@
                     routerLink="/dashboard/{{connectionID}}/{{tableName}}/entry"
                     [queryParams]="dubURLParams"
                     matTooltip="Duplicate row">
-                    <mat-icon fontSet="material-icons-outlined">difference</mat-icon>
+                    <mat-icon fontSet="material-symbols-outlined">difference</mat-icon>
                 </a>
                 <button type="button" mat-icon-button *ngIf="permissions.delete && canDelete && hasKeyAttributesFromURL"
                     matTooltip="Delete row"
                     (click)="handleDeleteRow()">
-                    <mat-icon fontSet="material-icons-outlined">delete</mat-icon>
+                    <mat-icon fontSet="material-symbols-outlined">delete</mat-icon>
                 </button>
                 <div *ngIf="rowActions && rowActions.length">
                     <div class="custom-actions_desktop">
                         <button type="button" mat-icon-button *ngFor="let action of rowActions"
                             [matTooltip]="action.title"
                             (click)="handleActivateAction(action)">
-                            <mat-icon fontSet="material-icons-outlined">
+                            <mat-icon fontSet="material-symbols-outlined">
                                 {{action.icon}}
                             </mat-icon>
                         </button>
@@ -46,7 +46,7 @@
                     <div class="custom-actions_mobile">
                         <button type="button" mat-stroked-button *ngFor="let action of rowActions"
                             (click)="handleActivateAction(action)">
-                            <mat-icon fontSet="material-icons-outlined">
+                            <mat-icon fontSet="material-symbols-outlined">
                                 {{action.icon}}
                             </mat-icon>
                             {{action.title}}
@@ -138,7 +138,7 @@ <h3>
                                 [ngClass]="{ 'widget-info_centered': tableWidgets[value].widget_type === 'Boolean' || tableTypes[value] === 'boolean' }"
                                 [matTooltip]="tableWidgets[value].description"
                                 matTooltipPosition="above">
-                                info_outline
+                                info
                             </mat-icon>
                         </div>
 
@@ -175,7 +175,7 @@ <h3>
                         *ngIf="(keyAttributesListFromStructure.length || hasKeyAttributesFromURL) && permissions.edit && pageMode === 'view'"
                         data-testid="switch-to-editing-button"
                         (click)="switchToEditMode()">
-                        <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
+                        <mat-icon fontSet="material-symbols-outlined">edit</mat-icon>
                         Edit
                     </button>
 
diff --git a/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.html b/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.html
index ac68a8098..21ffe6c11 100644
--- a/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.html
+++ b/frontend/src/app/components/secrets/audit-log-dialog/audit-log-dialog.component.html
@@ -1,6 +1,6 @@
 <h2 mat-dialog-title>
     <mat-icon class="title-icon">history</mat-icon>
-    Audit Log: {{data.secret.slug}}
+    Audit Log: <span class="secret-identifier">{{data.secret.slug}}</span>
 </h2>
 
 <mat-dialog-content>
diff --git a/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.html b/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.html
index 5b6ac3a45..4f65be248 100644
--- a/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.html
+++ b/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.html
@@ -3,11 +3,11 @@ <h2 mat-dialog-title>Create Secret</h2>
 <mat-dialog-content>
     <form [formGroup]="form" (ngSubmit)="onSubmit()" id="createSecretForm">
         <mat-form-field appearance="outline" class="full-width">
-            <mat-label>Slug</mat-label>
+            <mat-label>Unique Identifier</mat-label>
             <input matInput formControlName="slug"
                 placeholder="e.g., api-key, database-password"
                 data-testid="create-secret-slug-input">
-            <mat-hint>Unique identifier (letters, numbers, hyphens, underscores)</mat-hint>
+            <mat-hint>Use letters, numbers, hyphens, and underscores (no spaces)</mat-hint>
             <mat-error *ngIf="form.get('slug')?.invalid">{{slugError}}</mat-error>
         </mat-form-field>
 
diff --git a/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.spec.ts b/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.spec.ts
index 7adf1b437..0c1fc6930 100644
--- a/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.spec.ts
+++ b/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.spec.ts
@@ -192,17 +192,17 @@ describe('CreateSecretDialogComponent', () => {
 		it('should return correct slug error message for required', () => {
 			component.form.get('slug')?.setValue('');
 			component.form.get('slug')?.markAsTouched();
-			expect(component.slugError).toBe('Slug is required');
+			expect(component.slugError).toBe('Unique identifier is required');
 		});
 
 		it('should return correct slug error message for maxlength', () => {
 			component.form.get('slug')?.setValue('a'.repeat(256));
-			expect(component.slugError).toBe('Slug must be 255 characters or less');
+			expect(component.slugError).toBe('Unique identifier must be 255 characters or less');
 		});
 
 		it('should return correct slug error message for pattern', () => {
 			component.form.get('slug')?.setValue('invalid slug!');
-			expect(component.slugError).toBe('Only letters, numbers, hyphens, and underscores allowed');
+			expect(component.slugError).toBe('Only letters, numbers, hyphens, and underscores allowed (no spaces)');
 		});
 
 		it('should return correct value error message for required', () => {
diff --git a/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.ts b/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.ts
index 2b052589c..e8fc03127 100644
--- a/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.ts
+++ b/frontend/src/app/components/secrets/create-secret-dialog/create-secret-dialog.component.ts
@@ -72,9 +72,9 @@ export class CreateSecretDialogComponent {
 
   get slugError(): string {
     const control = this.form.get('slug');
-    if (control?.hasError('required')) return 'Slug is required';
-    if (control?.hasError('maxlength')) return 'Slug must be 255 characters or less';
-    if (control?.hasError('pattern')) return 'Only letters, numbers, hyphens, and underscores allowed';
+    if (control?.hasError('required')) return 'Unique identifier is required';
+    if (control?.hasError('maxlength')) return 'Unique identifier must be 255 characters or less';
+    if (control?.hasError('pattern')) return 'Only letters, numbers, hyphens, and underscores allowed (no spaces)';
     return '';
   }
 
diff --git a/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.html b/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.html
index aa82f371f..38bbaa7ef 100644
--- a/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.html
+++ b/frontend/src/app/components/secrets/delete-secret-dialog/delete-secret-dialog.component.html
@@ -4,7 +4,7 @@ <h2 mat-dialog-title>Delete Secret</h2>
     <div class="warning-container">
         <mat-icon class="warning-icon">warning</mat-icon>
         <div class="warning-content">
-            <p>Are you sure you want to delete the secret <strong>{{data.secret.slug}}</strong>?</p>
+            <p>Are you sure you want to delete the secret with identifier <strong>{{data.secret.slug}}</strong>?</p>
             <p class="warning-details">
                 This action cannot be undone. The secret value and all associated audit logs will be permanently removed.
             </p>
diff --git a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.html b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.html
index bcd9e00fb..48c515efb 100644
--- a/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.html
+++ b/frontend/src/app/components/secrets/edit-secret-dialog/edit-secret-dialog.component.html
@@ -1,4 +1,4 @@
-<h2 mat-dialog-title>Edit Secret: {{data.secret.slug}}</h2>
+<h2 mat-dialog-title>Edit Secret: <span class="secret-identifier">{{data.secret.slug}}</span></h2>
 
 <mat-dialog-content>
     <form [formGroup]="form" (ngSubmit)="onSubmit()" id="editSecretForm">
diff --git a/frontend/src/app/components/secrets/secrets.component.html b/frontend/src/app/components/secrets/secrets.component.html
index 6cea1138b..4dff1326e 100644
--- a/frontend/src/app/components/secrets/secrets.component.html
+++ b/frontend/src/app/components/secrets/secrets.component.html
@@ -14,7 +14,7 @@ <h1 class="mat-h1">Company Secrets</h1>
             <input matInput
                 [(ngModel)]="searchQuery"
                 (ngModelChange)="onSearchChange($event)"
-                placeholder="Search by slug..."
+                placeholder="Search by unique identifier..."
                 data-testid="secrets-search-input">
             <mat-icon matSuffix>search</mat-icon>
         </mat-form-field>
@@ -41,12 +41,12 @@ <h3>No secrets found</h3>
     </div>
 
     <table *ngIf="!loading && secrets.length > 0" mat-table [dataSource]="secrets" class="mat-elevation-z2 secrets-table">
-        <!-- Slug Column -->
+        <!-- Unique Identifier Column -->
         <ng-container matColumnDef="slug">
-            <th mat-header-cell *matHeaderCellDef>Slug</th>
+            <th mat-header-cell *matHeaderCellDef>Unique Identifier</th>
             <td mat-cell *matCellDef="let secret; let i = index"
                 class="secrets-cell secrets-cell_slug"
-                data-label="Slug"
+                data-label="Unique Identifier"
                 attr.data-testid="secret-slug-{{i}}-cell">
                 <span class="slug-text">{{secret.slug}}</span>
             </td>
diff --git a/frontend/src/app/components/ui-components/alert/alert.component.ts b/frontend/src/app/components/ui-components/alert/alert.component.ts
index 3408adb14..fb3115006 100644
--- a/frontend/src/app/components/ui-components/alert/alert.component.ts
+++ b/frontend/src/app/components/ui-components/alert/alert.component.ts
@@ -22,7 +22,7 @@ export class AlertComponent implements OnInit {
   public icons = {
     error: 'error_outline',
     warning: 'warning_amber',
-    info: 'info_outline',
+    info: 'info',
     success: 'task_alt'
   }
 
diff --git a/frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.html b/frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.html
index 81fbe48e8..0064d88fd 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.html
+++ b/frontend/src/app/components/ui-components/record-view-fields/boolean/boolean.component.html
@@ -1,9 +1,9 @@
 <mat-icon *ngIf="value === true" 
           [ngClass]="{'boolean-icon': true, 'boolean-icon-true': !invertColors, 'boolean-icon-false': invertColors}">
-  check_small
+  check
 </mat-icon>
 <mat-icon *ngIf="value === false" 
           [ngClass]="{'boolean-icon': true, 'boolean-icon-false': !invertColors, 'boolean-icon-true': invertColors}">
-  close_small
+  close
 </mat-icon>
 <span *ngIf="value !== true && value !== false">—</span>
diff --git a/frontend/src/app/components/ui-components/record-view-fields/foreign-key/foreign-key.component.html b/frontend/src/app/components/ui-components/record-view-fields/foreign-key/foreign-key.component.html
index 2ea6263db..99a6f0a99 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/foreign-key/foreign-key.component.html
+++ b/frontend/src/app/components/ui-components/record-view-fields/foreign-key/foreign-key.component.html
@@ -4,5 +4,5 @@
   class="field-view-value foreign-key-link"
   (click)="onForeignKeyClick.emit()">
   <span>{{displayValue}}</span>
-  <mat-icon fontSet="material-icons-outlined" class="field-view-icon">visibility</mat-icon>
+  <mat-icon fontSet="material-symbols-outlined" class="field-view-icon">visibility</mat-icon>
 </a>
diff --git a/frontend/src/app/components/ui-components/record-view-fields/url/url.component.html b/frontend/src/app/components/ui-components/record-view-fields/url/url.component.html
index 51fae391e..4327fcd07 100644
--- a/frontend/src/app/components/ui-components/record-view-fields/url/url.component.html
+++ b/frontend/src/app/components/ui-components/record-view-fields/url/url.component.html
@@ -2,7 +2,7 @@
   [href]="value" target="_blank"
   class="url-link"
   (click)="$event.stopPropagation()">
-  <mat-icon class="url-link__icon" fontSet="material-icons-outlined">link</mat-icon>
+  <mat-icon class="url-link__icon" fontSet="material-symbols-outlined">link</mat-icon>
   {{value || '—'}}
 </a>
 <span *ngIf="!isValidUrl">{{value || '—'}}</span>
diff --git a/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.html b/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.html
index 4012df024..dd7c2f1ab 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.html
+++ b/frontend/src/app/components/ui-components/table-display-fields/boolean/boolean.component.html
@@ -2,11 +2,11 @@
   <div class="field-value">
     <mat-icon *ngIf="value === true" 
               [ngClass]="{'boolean-icon': true, 'boolean-icon-true': !invertColors, 'boolean-icon-false': invertColors}">
-      check_small
+      check
     </mat-icon>
     <mat-icon *ngIf="value === false" 
               [ngClass]="{'boolean-icon': true, 'boolean-icon-false': !invertColors, 'boolean-icon-true': invertColors}">
-      close_small
+      close
     </mat-icon>
     <span *ngIf="value !== true && value !== false">—</span>
   </div>
diff --git a/frontend/src/app/components/ui-components/table-display-fields/url/url.component.html b/frontend/src/app/components/ui-components/table-display-fields/url/url.component.html
index 20ddc12a5..0cc4d3248 100644
--- a/frontend/src/app/components/ui-components/table-display-fields/url/url.component.html
+++ b/frontend/src/app/components/ui-components/table-display-fields/url/url.component.html
@@ -4,7 +4,7 @@
         [href]="hrefValue" target="_blank"
         class="url-link"
         (click)="$event.stopPropagation()">
-        <mat-icon class="url-link__icon" fontSet="material-icons-outlined">link</mat-icon>
+        <mat-icon class="url-link__icon" fontSet="material-symbols-outlined">link</mat-icon>
         {{value || '—'}}
     </a>
     <span *ngIf="!isValidUrl">{{value || '—'}}</span>
diff --git a/frontend/src/app/components/upgrade/upgrade.component.html b/frontend/src/app/components/upgrade/upgrade.component.html
index 96e6661a6..eddd2e6e8 100644
--- a/frontend/src/app/components/upgrade/upgrade.component.html
+++ b/frontend/src/app/components/upgrade/upgrade.component.html
@@ -98,7 +98,7 @@ <h2 class="mat-header-2">Databases</h2>
             <td mat-cell *matCellDef="let element"
                 [ngClass]="{'cell_centered': plan.key !== 'title', cell_current: plan.key === currentPlan.key}">
                 <span *ngIf="plan.key === 'title'">{{element[plan.key]}}</span>
-                <mat-icon *ngIf="element[plan.key] === '∞'" class="person-icon" fontSet="material-icons-outlined">all_inclusive</mat-icon>
+                <mat-icon *ngIf="element[plan.key] === '∞'" class="person-icon" fontSet="material-symbols-outlined">all_inclusive</mat-icon>
                 <span *ngIf="element[plan.key] !== '∞' && plan.key !== 'title'">{{element[plan.key]}}<mat-icon class="person-icon">person</mat-icon></span>
             </td>
         </ng-container>
diff --git a/frontend/src/app/components/user-settings/user-settings.component.html b/frontend/src/app/components/user-settings/user-settings.component.html
index 73b579516..443a31ab2 100644
--- a/frontend/src/app/components/user-settings/user-settings.component.html
+++ b/frontend/src/app/components/user-settings/user-settings.component.html
@@ -27,7 +27,7 @@ <h1 class="mat-h1">
         <div class="user-settings__section-heading">
             <mat-icon *ngIf="currentUser.externalRegistrationProvider === null"
                 matTooltip="You registred with your email">
-                mail_outline
+                mail
             </mat-icon>
             <mat-icon *ngIf="currentUser.externalRegistrationProvider !== null"
                 [svgIcon]="authProviderIcons[currentUser.externalRegistrationProvider]"
@@ -71,7 +71,7 @@ <h1 class="mat-h1">
                 </mat-slide-toggle>
                 <mat-icon *ngIf="!currentUser.isActive" class="twoFAhint"
                     matTooltip="Available only after email confirmation.">
-                    info_outline
+                    info
                 </mat-icon>
             </div>
 
@@ -146,7 +146,7 @@ <h1 class="mat-h1">
                             attr.data-testid="api-key-{{i}}-delete-button"
                             matTooltip="Remove API key"
                             (click)="deleteAPIkey(apiKey)">
-                            <mat-icon>delete_outline</mat-icon>
+                            <mat-icon>delete</mat-icon>
                         </button>
                     </div>
                 </mat-list-item>
diff --git a/frontend/src/app/components/users/users.component.html b/frontend/src/app/components/users/users.component.html
index 773e5a1f2..7fa8fde37 100644
--- a/frontend/src/app/components/users/users.component.html
+++ b/frontend/src/app/components/users/users.component.html
@@ -24,7 +24,7 @@ <h1 class="mat-h1">User groups</h1>
                         angularticsAction="Users access: edit group name is clicked"
                         matTooltip="Edit group name"
                         (click)="openEditGroupNameDialog($event, groupItem.group)">
-                        <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
+                        <mat-icon fontSet="material-symbols-outlined">edit</mat-icon>
                     </button>
                 </mat-panel-title>
                 <mat-panel-description (click)="$event.stopPropagation();" class="group-actions">
@@ -33,21 +33,21 @@ <h1 class="mat-h1">User groups</h1>
                         angularticsAction="Users access: permissions is clicked"
                         matTooltip="Configure permissions"
                         (click)="openPermissionsDialog(groupItem.group)">
-                        <mat-icon fontSet="material-icons-outlined">vpn_key_outline</mat-icon>
+                        <mat-icon fontSet="material-symbols-outlined">vpn_key</mat-icon>
                     </button>
                     <button mat-icon-button *ngIf="isPermitted(groupItem.accessLevel) && groupItem.group.title !== 'Admin'"
                         angulartics2On="click"
                         angularticsAction="Users access: delete group is clicked"
                         matTooltip="Delete group"
                         (click)="openDeleteGroupDialog(groupItem.group)">
-                        <mat-icon>delete_outline</mat-icon>
+                        <mat-icon>delete</mat-icon>
                     </button>
                     <button mat-icon-button *ngIf="isPermitted(groupItem.accessLevel)"
                         angulartics2On="click"
                         angularticsAction="Users access: add user is clicked"
                         matTooltip="Add user"
                         (click)="openAddUserDialog(groupItem.group)">
-                        <mat-icon fontSet="material-icons-outlined">person_add</mat-icon>
+                        <mat-icon fontSet="material-symbols-outlined">person_add</mat-icon>
                     </button>
                 </mat-panel-description>
             </mat-expansion-panel-header>
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 5b89d897a..5b77d5c38 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -9,11 +9,6 @@
   <!--<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
   <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
   <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png"> -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
-
 </head>
 <body style="background-color: #191919; color: #ffffff;">
   <app-root class="mainLayout mat-typography"></app-root>
diff --git a/frontend/src/index.saas.html b/frontend/src/index.saas.html
index d32854920..957470f54 100644
--- a/frontend/src/index.saas.html
+++ b/frontend/src/index.saas.html
@@ -9,10 +9,6 @@
   <!--<link rel="icon" type="image/x-icon" href="assets/favicon.ico">
   <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
   <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">-->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
 
   <!-- Intercom -->
   <script>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 55cd7f094..d0d25cb25 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -3,6 +3,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { APP_INITIALIZER, ErrorHandler, enableProdMode, importProvidersFrom } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MAT_ICON_DEFAULT_OPTIONS, MatIconDefaultOptions } from '@angular/material/icon';
 import { BrowserModule, bootstrapApplication, Title } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { Router, RouterModule } from '@angular/router';
@@ -148,5 +149,11 @@ bootstrapApplication(AppComponent, {
 		provideHttpClient(withInterceptorsFromDi()),
 		provideAnimations(),
 		provideCharts(withDefaultRegisterables()),
+		{
+			provide: MAT_ICON_DEFAULT_OPTIONS,
+			useValue: {
+				fontSet: 'material-symbols-outlined',
+			} as MatIconDefaultOptions,
+		},
 	],
 }).catch((err) => console.error(err));
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index b159386fa..2810aedae 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2750,6 +2750,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@fontsource/noto-sans@npm:^5.2.10":
+  version: 5.2.10
+  resolution: "@fontsource/noto-sans@npm:5.2.10"
+  checksum: 9c69001749c5f1abc09b062bdf98ccfa8a7fb695ada1e3c25a3f239561ae990133b41194dc12eec9584508771e0f375f903200d0243dc3fcbbb2c3deee30a618
+  languageName: node
+  linkType: hard
+
 "@hono/node-server@npm:^1.19.7":
   version: 1.19.9
   resolution: "@hono/node-server@npm:1.19.9"
@@ -3457,6 +3464,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@material-symbols/font-400@npm:^0.40.2":
+  version: 0.40.2
+  resolution: "@material-symbols/font-400@npm:0.40.2"
+  checksum: 3f32d06a4208ffb75c01741a6433c2118145726526df50c968bd65796c3c5dcc6ea06d57999d3e764968366d7b91c084425944af60016cbb74bed35c6aceea4d
+  languageName: node
+  linkType: hard
+
 "@mermaid-js/parser@npm:^0.6.3":
   version: 0.6.3
   resolution: "@mermaid-js/parser@npm:0.6.3"
@@ -12032,7 +12046,9 @@ __metadata:
     "@angular/platform-browser-dynamic": ~20.3.16
     "@angular/router": ~20.3.16
     "@brumeilde/ngx-theme": ^1.2.1
+    "@fontsource/noto-sans": ^5.2.10
     "@jsonurl/jsonurl": ^1.1.8
+    "@material-symbols/font-400": ^0.40.2
     "@ngstack/code-editor": ^9.0.0
     "@sentry-internal/rrweb": ^2.16.0
     "@sentry/angular": ^10.33.0