diff --git a/frontend/src/app/components/charts/chart-delete-dialog/chart-delete-dialog.component.html b/frontend/src/app/components/charts/chart-delete-dialog/chart-delete-dialog.component.html
index 6c6f47234..998e95302 100644
--- a/frontend/src/app/components/charts/chart-delete-dialog/chart-delete-dialog.component.html
+++ b/frontend/src/app/components/charts/chart-delete-dialog/chart-delete-dialog.component.html
@@ -1,4 +1,4 @@
-<h2 mat-dialog-title>Delete Saved Query</h2>
+<h2 mat-dialog-title>Delete saved query</h2>
 
 <mat-dialog-content>
     <div class="warning-container">
@@ -18,6 +18,6 @@ <h2 mat-dialog-title>Delete Saved Query</h2>
         (click)="onDelete()"
         [disabled]="submitting()"
         data-testid="delete-chart-confirm-button">
-        {{submitting() ? 'Deleting...' : 'Delete Query'}}
+        {{submitting() ? 'Deleting...' : 'Delete query'}}
     </button>
 </mat-dialog-actions>
diff --git a/frontend/src/app/components/charts/chart-edit/chart-edit.component.css b/frontend/src/app/components/charts/chart-edit/chart-edit.component.css
index 660f2cef7..3b5154b9a 100644
--- a/frontend/src/app/components/charts/chart-edit/chart-edit.component.css
+++ b/frontend/src/app/components/charts/chart-edit/chart-edit.component.css
@@ -1,20 +1,33 @@
+:host {
+	display: block;
+	height: calc(100vh - 44px);
+	margin-bottom: -60px;
+	overflow: hidden;
+	position: relative;
+	z-index: 1;
+}
+
 .chart-edit-layout {
 	display: flex;
-	height: calc(100vh - 64px);
+	height: 100%;
 }
 
 .chart-edit-main {
 	flex: 1;
 	overflow-y: auto;
+	display: flex;
+	flex-direction: column;
 }
 
 .chart-edit-page {
 	display: flex;
 	flex-direction: column;
-	min-height: 100%;
+	flex: 1;
 	padding: 0 clamp(40px, 5vw, 100px);
 	max-width: 1400px;
 	margin: 3em auto;
+	width: 100%;
+	box-sizing: border-box;
 }
 
 @media (width <= 600px) {
@@ -47,7 +60,6 @@
 	flex-direction: column;
 	gap: 24px;
 	flex: 1;
-	overflow-y: auto;
 	padding-bottom: 24px;
 }
 
@@ -130,17 +142,11 @@
 
 .code-editor-box {
 	height: 300px;
-	border: 1px solid rgba(0, 0, 0, 0.12);
+	border: 1px solid var(--mat-sidenav-container-divider-color);
 	border-radius: 4px;
 	overflow: hidden;
 }
 
-@media (prefers-color-scheme: dark) {
-	.code-editor-box {
-		border-color: rgba(255, 255, 255, 0.12);
-	}
-}
-
 .code-editor-box ngs-code-editor {
 	height: 100%;
 }
@@ -222,26 +228,34 @@
 }
 
 .no-results mat-icon {
-	color: #1976d2;
+	color: var(--color-accentedPalette-500);
 }
 
 .actions {
+	position: sticky;
+	bottom: 0;
 	display: flex;
-	justify-content: flex-end;
+	align-items: center;
+	justify-content: space-between;
 	gap: 16px;
-	padding: 16px 0;
-	border-top: 1px solid rgba(0, 0, 0, 0.12);
-	background-color: #fff;
+	padding: 0 clamp(40px, 5vw, 100px);
+	background-color: var(--mat-sidenav-content-background-color);
+	box-shadow: var(--shadow);
+	height: 64px;
 	flex-shrink: 0;
-	position: sticky;
-	bottom: 0;
-	margin-top: auto;
+	z-index: 10;
+	--shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
 @media (prefers-color-scheme: dark) {
 	.actions {
-		border-top-color: rgba(255, 255, 255, 0.12);
-		background-color: #1e1e1e;
+		--shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.5), 0 2px 2px 0 rgba(0, 0, 0, 0.64), 0 1px 5px 0 rgba(0, 0, 0, 0.85);
+	}
+}
+
+@media (width <= 600px) {
+	.actions {
+		padding: 0 16px;
 	}
 }
 
diff --git a/frontend/src/app/components/charts/chart-edit/chart-edit.component.html b/frontend/src/app/components/charts/chart-edit/chart-edit.component.html
index f753ee79d..da517deb1 100644
--- a/frontend/src/app/components/charts/chart-edit/chart-edit.component.html
+++ b/frontend/src/app/components/charts/chart-edit/chart-edit.component.html
@@ -9,10 +9,7 @@
 
         <div class="chart-edit-page">
     <div class="chart-edit-header">
-        <button mat-icon-button (click)="cancel()" matTooltip="Back to list">
-            <mat-icon>arrow_back</mat-icon>
-        </button>
-        <h1 class="mat-h1">{{ isEditMode() ? 'Edit Widget' : 'Create Widget' }}</h1>
+        <h1 class="mat-h1">{{ isEditMode() ? 'Edit widget' : 'Create widget' }}</h1>
     </div>
 
     <div *ngIf="loading()" class="loading-container">
@@ -22,7 +19,7 @@ <h1 class="mat-h1">{{ isEditMode() ? 'Edit Widget' : 'Create Widget' }}</h1>
     <div *ngIf="!loading()" class="chart-edit-content">
         <div class="query-details">
             <mat-form-field appearance="outline" class="name-field">
-                <mat-label>Query Name</mat-label>
+                <mat-label>Query name</mat-label>
                 <input matInput
                     [ngModel]="queryName()"
                     (ngModelChange)="queryName.set($event)"
@@ -44,7 +41,7 @@ <h1 class="mat-h1">{{ isEditMode() ? 'Edit Widget' : 'Create Widget' }}</h1>
         <div class="editor-preview-container">
             <div class="editor-section">
                 <div class="section-header">
-                    <h3>SQL Query</h3>
+                    <h3>SQL query</h3>
                     <button mat-stroked-button
                         (click)="testQuery()"
                         [disabled]="!canTest()"
@@ -52,7 +49,7 @@ <h3>SQL Query</h3>
                         data-testid="test-query-button">
                         <mat-icon *ngIf="!testing()">play_arrow</mat-icon>
                         <mat-spinner *ngIf="testing()" diameter="18" class="button-spinner"></mat-spinner>
-                        {{ testing() ? 'Testing...' : 'Test Query' }}
+                        {{ testing() ? 'Testing...' : 'Test query' }}
                     </button>
                 </div>
                 <div class="code-editor-box ph-no-capture">
@@ -68,7 +65,7 @@ <h3>SQL Query</h3>
             <div class="right-panel" *ngIf="showResults()">
                 <div class="config-section">
                     <div class="section-header">
-                        <h3>Chart Configuration</h3>
+                        <h3>Chart configuration</h3>
                         <span class="execution-time" *ngIf="executionTime() !== null">
                             Executed in {{ executionTime() }}ms
                         </span>
@@ -76,7 +73,7 @@ <h3>Chart Configuration</h3>
 
                     <div class="chart-config">
                         <mat-form-field appearance="outline" class="chart-config-field">
-                            <mat-label>Chart Type</mat-label>
+                            <mat-label>Chart type</mat-label>
                             <mat-select [ngModel]="chartType()" (ngModelChange)="chartType.set($event)" data-testid="chart-type-select">
                                 <mat-option *ngFor="let type of chartTypes" [value]="type.value">
                                     {{ type.label }}
@@ -85,7 +82,7 @@ <h3>Chart Configuration</h3>
                         </mat-form-field>
 
                         <mat-form-field appearance="outline" class="chart-config-field">
-                            <mat-label>Label Column</mat-label>
+                            <mat-label>Label column</mat-label>
                             <mat-select [ngModel]="labelColumn()" (ngModelChange)="labelColumn.set($event)" data-testid="label-column-select">
                                 <mat-option *ngFor="let col of resultColumns()" [value]="col">
                                     {{ col }}
@@ -94,7 +91,7 @@ <h3>Chart Configuration</h3>
                         </mat-form-field>
 
                         <mat-form-field appearance="outline" class="chart-config-field" *ngIf="showLabelTypeOption()">
-                            <mat-label>Label Type</mat-label>
+                            <mat-label>Label type</mat-label>
                             <mat-select [ngModel]="labelType()" (ngModelChange)="labelType.set($event)" data-testid="label-type-select">
                                 <mat-option *ngFor="let type of labelTypes" [value]="type.value">
                                     {{ type.label }}
@@ -103,7 +100,7 @@ <h3>Chart Configuration</h3>
                         </mat-form-field>
 
                         <mat-form-field appearance="outline" class="chart-config-field">
-                            <mat-label>Value Column</mat-label>
+                            <mat-label>Value column</mat-label>
                             <mat-select [ngModel]="valueColumn()" (ngModelChange)="valueColumn.set($event)" data-testid="value-column-select">
                                 <mat-option *ngFor="let col of resultColumns()" [value]="col">
                                     {{ col }}
@@ -115,7 +112,7 @@ <h3>Chart Configuration</h3>
 
                 <div class="preview-section">
                     <div class="section-header">
-                        <h3>Chart Preview</h3>
+                        <h3>Chart preview</h3>
                     </div>
 
                     <div class="chart-container" *ngIf="hasChartData()">
@@ -137,7 +134,7 @@ <h3>Chart Preview</h3>
 
         <div class="results-section" *ngIf="showResults() && testResults().length > 0">
             <div class="section-header">
-                <h3>Query Results ({{ testResults().length }} rows)</h3>
+                <h3>Query results ({{ testResults().length }} rows)</h3>
             </div>
             <div class="results-table-container">
                 <table mat-table [dataSource]="testResults()" class="results-table mat-elevation-z1">
@@ -158,18 +155,17 @@ <h3>Query Results ({{ testResults().length }} rows)</h3>
         </div>
     </div>
 
-    <div class="actions" *ngIf="!loading()">
-        <button mat-button (click)="cancel()" data-testid="cancel-button">
-            Cancel
-        </button>
-        <button mat-flat-button color="primary"
-            (click)="saveQuery()"
-            [disabled]="!canSave()"
-            data-testid="save-query-button">
-            <mat-spinner *ngIf="saving()" diameter="18"></mat-spinner>
-            {{ saving() ? 'Saving...' : (isEditMode() ? 'Update Query' : 'Save Query') }}
-        </button>
-    </div>
+        </div>
+
+        <div class="actions" *ngIf="!loading()">
+            <a mat-stroked-button [routerLink]="['/charts', connectionId()]" data-testid="cancel-button">Back</a>
+            <button mat-flat-button color="primary"
+                (click)="saveQuery()"
+                [disabled]="!canSave()"
+                data-testid="save-query-button">
+                <mat-spinner *ngIf="saving()" diameter="18"></mat-spinner>
+                {{ saving() ? 'Saving...' : (isEditMode() ? 'Update query' : 'Save query') }}
+            </button>
         </div>
     </div>
 </div>
diff --git a/frontend/src/app/components/charts/chart-edit/chart-edit.component.spec.ts b/frontend/src/app/components/charts/chart-edit/chart-edit.component.spec.ts
index 12449a77e..7b200ebfa 100644
--- a/frontend/src/app/components/charts/chart-edit/chart-edit.component.spec.ts
+++ b/frontend/src/app/components/charts/chart-edit/chart-edit.component.spec.ts
@@ -247,13 +247,6 @@ describe('ChartEditComponent', () => {
 		});
 	});
 
-	describe('cancel', () => {
-		it('should navigate to charts list', () => {
-			component.cancel();
-			expect(router.navigate).toHaveBeenCalledWith(['/charts', 'conn-1']);
-		});
-	});
-
 	describe('onCodeChange', () => {
 		it('should update queryText', () => {
 			const testable = component as ChartEditComponentTestable;
diff --git a/frontend/src/app/components/charts/chart-edit/chart-edit.component.ts b/frontend/src/app/components/charts/chart-edit/chart-edit.component.ts
index 0b01a4d7d..6cf393fbc 100644
--- a/frontend/src/app/components/charts/chart-edit/chart-edit.component.ts
+++ b/frontend/src/app/components/charts/chart-edit/chart-edit.component.ts
@@ -259,7 +259,4 @@ export class ChartEditComponent implements OnInit {
 		}
 	}
 
-	cancel(): void {
-		this.router.navigate(['/charts', this.connectionId()]);
-	}
 }
diff --git a/frontend/src/app/components/charts/charts-list/charts-list.component.css b/frontend/src/app/components/charts/charts-list/charts-list.component.css
index 1f3c8001c..d7a06f27d 100644
--- a/frontend/src/app/components/charts/charts-list/charts-list.component.css
+++ b/frontend/src/app/components/charts/charts-list/charts-list.component.css
@@ -1,6 +1,15 @@
+:host {
+	display: block;
+	height: calc(100vh - 44px);
+	margin-bottom: -60px;
+	overflow: hidden;
+	position: relative;
+	z-index: 1;
+}
+
 .charts-layout {
 	display: flex;
-	height: calc(100vh - 64px);
+	height: 100%;
 }
 
 .charts-main {
@@ -70,6 +79,17 @@
 
 .widgets-table tr.mat-mdc-row {
 	height: 64px;
+	cursor: pointer;
+}
+
+.widgets-table tr.mat-mdc-row:hover {
+	background-color: rgba(0, 0, 0, 0.04);
+}
+
+@media (prefers-color-scheme: dark) {
+	.widgets-table tr.mat-mdc-row:hover {
+		background-color: rgba(255, 255, 255, 0.04);
+	}
 }
 
 .widgets-table th.mat-mdc-header-cell {
@@ -98,7 +118,6 @@
 	justify-content: center;
 	width: 56px;
 	height: 56px;
-	text-decoration: none;
 	overflow: hidden;
 }
 
@@ -107,21 +126,9 @@
 	height: 40px;
 }
 
-/* Name Link */
-.widget-name-link {
+/* Name Cell */
+.widget-name-cell {
 	font-weight: 500;
-	color: inherit;
-	text-decoration: none;
-}
-
-.widget-name-link:hover {
-	color: #673ab7;
-}
-
-@media (prefers-color-scheme: dark) {
-	.widget-name-link:hover {
-		color: #b388ff;
-	}
 }
 
 /* Description Cell */
@@ -212,11 +219,11 @@
 }
 
 .delete-action {
-	color: #c62828;
+	color: var(--color-warnPalette-500);
 }
 
 @media (prefers-color-scheme: dark) {
 	.delete-action {
-		color: #ef5350;
+		color: var(--color-warnDarkPalette-500);
 	}
 }
diff --git a/frontend/src/app/components/charts/charts-list/charts-list.component.html b/frontend/src/app/components/charts/charts-list/charts-list.component.html
index 3595deba5..a4e2d85d1 100644
--- a/frontend/src/app/components/charts/charts-list/charts-list.component.html
+++ b/frontend/src/app/components/charts/charts-list/charts-list.component.html
@@ -31,7 +31,7 @@ <h1 class="mat-h1">Widgets</h1>
                     (click)="trackCreatePageOpened()"
                     data-testid="create-widget-button">
                     <mat-icon>add</mat-icon>
-                    Create Widget
+                    Create widget
                 </a>
             </div>
 
@@ -46,7 +46,7 @@ <h3>No widgets found</h3>
                     [routerLink]="['/charts', connectionId(), 'new']"
                     (click)="trackCreatePageOpened()">
                     <mat-icon>add</mat-icon>
-                    Create Widget
+                    Create widget
                 </a>
             </div>
 
@@ -55,24 +55,17 @@ <h3>No widgets found</h3>
                 <ng-container matColumnDef="preview">
                     <th mat-header-cell *matHeaderCellDef>Type</th>
                     <td mat-cell *matCellDef="let query" class="preview-cell">
-                        <a [routerLink]="['/charts', connectionId(), query.id]"
-                            (click)="trackEditPageOpened()"
-                            class="preview-link"
-                            [matTooltip]="getChartTypeName(query.chart_type)">
+                        <div class="preview-link" [matTooltip]="getChartTypeName(query.chart_type)">
                             <app-chart-mini-preview [chartType]="query.chart_type"></app-chart-mini-preview>
-                        </a>
+                        </div>
                     </td>
                 </ng-container>
 
                 <!-- Name Column -->
                 <ng-container matColumnDef="name">
                     <th mat-header-cell *matHeaderCellDef>Name</th>
-                    <td mat-cell *matCellDef="let query">
-                        <a [routerLink]="['/charts', connectionId(), query.id]"
-                            (click)="trackEditPageOpened()"
-                            class="widget-name-link">
-                            {{query.name}}
-                        </a>
+                    <td mat-cell *matCellDef="let query" class="widget-name-cell">
+                        {{query.name}}
                     </td>
                 </ng-container>
 
@@ -97,6 +90,7 @@ <h3>No widgets found</h3>
                     <th mat-header-cell *matHeaderCellDef></th>
                     <td mat-cell *matCellDef="let query; let i = index" class="actions-cell">
                         <button mat-icon-button [matMenuTriggerFor]="rowMenu"
+                            (click)="$event.stopPropagation()"
                             attr.data-testid="widget-actions-{{i}}-button">
                             <mat-icon>more_vert</mat-icon>
                         </button>
@@ -119,7 +113,7 @@ <h3>No widgets found</h3>
                 </ng-container>
 
                 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="clickable-row" (click)="openQuery(row)"></tr>
             </table>
         </div>
     </div>
diff --git a/frontend/src/app/components/charts/charts-list/charts-list.component.ts b/frontend/src/app/components/charts/charts-list/charts-list.component.ts
index caa969c21..ce79515eb 100644
--- a/frontend/src/app/components/charts/charts-list/charts-list.component.ts
+++ b/frontend/src/app/components/charts/charts-list/charts-list.component.ts
@@ -13,7 +13,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { Title } from '@angular/platform-browser';
-import { ActivatedRoute, RouterModule } from '@angular/router';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { Angulartics2 } from 'angulartics2';
 import { ChartType, SavedQuery } from 'src/app/models/saved-query';
 import { ConnectionsService } from 'src/app/services/connections.service';
@@ -78,6 +78,7 @@ export class ChartsListComponent implements OnInit {
 	private _savedQueries = inject(SavedQueriesService);
 	private _connections = inject(ConnectionsService);
 	private route = inject(ActivatedRoute);
+	private router = inject(Router);
 	private dialog = inject(MatDialog);
 	private angulartics2 = inject(Angulartics2);
 	private title = inject(Title);
@@ -130,6 +131,11 @@ export class ChartsListComponent implements OnInit {
 		});
 	}
 
+	openQuery(query: SavedQuery): void {
+		this.trackEditPageOpened();
+		this.router.navigate(['/charts', this.connectionId(), query.id]);
+	}
+
 	openDeleteDialog(query: SavedQuery): void {
 		this.dialog.open(ChartDeleteDialogComponent, {
 			width: '400px',
diff --git a/frontend/src/app/components/dashboards/chart-mini-preview/chart-mini-preview.component.css b/frontend/src/app/components/dashboards/chart-mini-preview/chart-mini-preview.component.css
index 1be3330d7..f24a3a4fc 100644
--- a/frontend/src/app/components/dashboards/chart-mini-preview/chart-mini-preview.component.css
+++ b/frontend/src/app/components/dashboards/chart-mini-preview/chart-mini-preview.component.css
@@ -50,7 +50,7 @@
 
 /* Pie Chart */
 .pie-slice {
-	stroke: #fff;
+	stroke: var(--mat-sidenav-content-background-color);
 	stroke-width: 1;
 }
 
@@ -62,23 +62,17 @@
 
 /* Doughnut Chart */
 .doughnut-slice {
-	stroke: #fff;
+	stroke: var(--mat-sidenav-content-background-color);
 	stroke-width: 1;
 }
 
 /* Polar Area Chart */
 .polar-slice {
-	stroke: #fff;
+	stroke: var(--mat-sidenav-content-background-color);
 	stroke-width: 1;
 }
 
 @media (prefers-color-scheme: dark) {
-	.pie-slice,
-	.doughnut-slice,
-	.polar-slice {
-		stroke: #1e1e1e;
-	}
-
 	.line-area {
 		fill: rgba(99, 102, 241, 0.25);
 	}
diff --git a/frontend/src/app/components/dashboards/dashboard-delete-dialog/dashboard-delete-dialog.component.css b/frontend/src/app/components/dashboards/dashboard-delete-dialog/dashboard-delete-dialog.component.css
index b157b896c..bf205d440 100644
--- a/frontend/src/app/components/dashboards/dashboard-delete-dialog/dashboard-delete-dialog.component.css
+++ b/frontend/src/app/components/dashboards/dashboard-delete-dialog/dashboard-delete-dialog.component.css
@@ -5,7 +5,7 @@
 }
 
 .warning-icon {
-	color: #f57c00;
+	color: var(--color-warnPalette-300);
 	font-size: 48px;
 	width: 48px;
 	height: 48px;
diff --git a/frontend/src/app/components/dashboards/dashboard-delete-dialog/dashboard-delete-dialog.component.html b/frontend/src/app/components/dashboards/dashboard-delete-dialog/dashboard-delete-dialog.component.html
index b47bed7f9..d460175d8 100644
--- a/frontend/src/app/components/dashboards/dashboard-delete-dialog/dashboard-delete-dialog.component.html
+++ b/frontend/src/app/components/dashboards/dashboard-delete-dialog/dashboard-delete-dialog.component.html
@@ -1,4 +1,4 @@
-<h2 mat-dialog-title>Delete Dashboard</h2>
+<h2 mat-dialog-title>Delete dashboard</h2>
 
 <mat-dialog-content>
     <div class="warning-container">
@@ -18,6 +18,6 @@ <h2 mat-dialog-title>Delete Dashboard</h2>
         (click)="onDelete()"
         [disabled]="submitting()"
         data-testid="delete-dashboard-confirm-button">
-        {{submitting() ? 'Deleting...' : 'Delete Dashboard'}}
+        {{submitting() ? 'Deleting...' : 'Delete dashboard'}}
     </button>
 </mat-dialog-actions>
diff --git a/frontend/src/app/components/dashboards/dashboard-edit-dialog/dashboard-edit-dialog.component.html b/frontend/src/app/components/dashboards/dashboard-edit-dialog/dashboard-edit-dialog.component.html
index a3955f8ab..b6821391f 100644
--- a/frontend/src/app/components/dashboards/dashboard-edit-dialog/dashboard-edit-dialog.component.html
+++ b/frontend/src/app/components/dashboards/dashboard-edit-dialog/dashboard-edit-dialog.component.html
@@ -1,5 +1,5 @@
 <form [formGroup]="form" (ngSubmit)="onSubmit()">
-    <h2 mat-dialog-title>{{ isEdit ? 'Edit Dashboard' : 'Create Dashboard' }}</h2>
+    <h2 mat-dialog-title>{{ isEdit ? 'Edit dashboard' : 'Create dashboard' }}</h2>
 
     <mat-dialog-content>
         <div class="dashboard-form">
diff --git a/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.css b/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.css
index 596df87b5..85edac829 100644
--- a/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.css
+++ b/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.css
@@ -124,7 +124,7 @@ app-dashboard-view .dashboard-grid {
 }
 
 app-dashboard-view .widget-item {
-	background: white;
+	background: var(--mat-sidenav-content-background-color);
 	border-radius: 8px;
 	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 	display: flex;
@@ -134,13 +134,12 @@ app-dashboard-view .widget-item {
 
 @media (prefers-color-scheme: dark) {
 	app-dashboard-view .widget-item {
-		background: #1e1e1e;
 		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 	}
 }
 
 app-dashboard-view .widget-item.edit-mode {
-	border: 2px dashed var(--mdc-filled-button-container-color, #1976d2);
+	border: 2px dashed var(--color-accentedPalette-500);
 }
 
 app-dashboard-view .widget-item.edit-mode .widget-header {
@@ -191,7 +190,7 @@ app-dashboard-view gridster-item .gridster-item-resizable-handler.handle-se {
 	width: 16px;
 	height: 16px;
 	cursor: se-resize;
-	background: var(--mdc-filled-button-container-color, #1976d2);
+	background: var(--color-accentedPalette-500);
 	border-radius: 2px 0 6px 0;
 }
 
@@ -201,7 +200,7 @@ app-dashboard-view gridster-item .gridster-item-resizable-handler.handle-ne {
 	width: 16px;
 	height: 16px;
 	cursor: ne-resize;
-	background: var(--mdc-filled-button-container-color, #1976d2);
+	background: var(--color-accentedPalette-500);
 	border-radius: 0 6px 0 2px;
 }
 
@@ -211,7 +210,7 @@ app-dashboard-view gridster-item .gridster-item-resizable-handler.handle-sw {
 	width: 16px;
 	height: 16px;
 	cursor: sw-resize;
-	background: var(--mdc-filled-button-container-color, #1976d2);
+	background: var(--color-accentedPalette-500);
 	border-radius: 0 2px 0 6px;
 }
 
@@ -221,7 +220,7 @@ app-dashboard-view gridster-item .gridster-item-resizable-handler.handle-nw {
 	width: 16px;
 	height: 16px;
 	cursor: nw-resize;
-	background: var(--mdc-filled-button-container-color, #1976d2);
+	background: var(--color-accentedPalette-500);
 	border-radius: 6px 0 2px 0;
 }
 
@@ -230,16 +229,10 @@ app-dashboard-view .widget-header {
 	align-items: center;
 	justify-content: space-between;
 	padding: 8px 8px 8px 16px;
-	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+	border-bottom: 1px solid var(--mat-sidenav-container-divider-color);
 	flex-shrink: 0;
 }
 
-@media (prefers-color-scheme: dark) {
-	app-dashboard-view .widget-header {
-		border-bottom-color: rgba(255, 255, 255, 0.12);
-	}
-}
-
 app-dashboard-view .widget-title {
 	font-weight: 500;
 	font-size: 14px;
@@ -261,12 +254,12 @@ app-dashboard-view .widget-content {
 }
 
 app-dashboard-view .delete-action {
-	color: #c62828;
+	color: var(--color-warnPalette-500);
 }
 
 @media (prefers-color-scheme: dark) {
 	app-dashboard-view .delete-action {
-		color: #ef5350;
+		color: var(--color-warnDarkPalette-500);
 	}
 }
 
diff --git a/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.html b/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.html
index f7245f281..a68791ed0 100644
--- a/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.html
+++ b/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.html
@@ -20,13 +20,13 @@ <h1 class="mat-h1">{{ dashboard()?.name || 'Loading...' }}</h1>
                     (change)="toggleEditMode()"
                     color="primary"
                     data-testid="edit-mode-toggle">
-                    Edit Mode
+                    Edit mode
                 </mat-slide-toggle>
                 <button mat-flat-button color="primary"
                     (click)="openAddWidgetDialog()"
                     data-testid="add-widget-button">
                     <mat-icon>add</mat-icon>
-                    Add Chart
+                    Add chart
                 </button>
             </div>
         }
@@ -45,7 +45,7 @@ <h3>No charts yet</h3>
             <p>Add charts to visualize your data from saved queries.</p>
             <button mat-flat-button color="primary" (click)="openAddWidgetDialog()">
                 <mat-icon>add</mat-icon>
-                Add Chart
+                Add chart
             </button>
         </div>
     }
@@ -62,11 +62,11 @@ <h3>No charts yet</h3>
                         <mat-menu #widgetMenu="matMenu">
                             <a mat-menu-item [routerLink]="['/charts', connectionId(), item.widget.query_id]">
                                 <mat-icon>tune</mat-icon>
-                                <span>Configure Chart</span>
+                                <span>Configure chart</span>
                             </a>
                             <button mat-menu-item (click)="openEditWidgetDialog(item.widget)">
                                 <mat-icon>swap_horiz</mat-icon>
-                                <span>Change Query</span>
+                                <span>Change query</span>
                             </button>
                             <button mat-menu-item (click)="openDeleteWidgetDialog(item.widget)" class="delete-action">
                                 <mat-icon color="warn">delete</mat-icon>
diff --git a/frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.css b/frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.css
index e141f9eff..642e01865 100644
--- a/frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.css
+++ b/frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.css
@@ -1,6 +1,15 @@
+:host {
+	display: block;
+	height: calc(100vh - 44px);
+	margin-bottom: -60px;
+	overflow: hidden;
+	position: relative;
+	z-index: 1;
+}
+
 .dashboards-layout {
 	display: flex;
-	height: calc(100vh - 64px);
+	height: 100%;
 }
 
 .dashboards-main {
@@ -100,7 +109,7 @@
 	display: block;
 	height: 160px;
 	background-color: rgba(0, 0, 0, 0.03);
-	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+	border-bottom: 1px solid var(--mat-sidenav-container-divider-color);
 	text-decoration: none;
 	overflow: hidden;
 }
@@ -108,7 +117,6 @@
 @media (prefers-color-scheme: dark) {
 	.dashboard-preview {
 		background-color: rgba(255, 255, 255, 0.05);
-		border-bottom-color: rgba(255, 255, 255, 0.08);
 	}
 }
 
@@ -117,7 +125,7 @@
 	align-items: center;
 	justify-content: center;
 	height: 100%;
-	background-color: #f5f5f5;
+	background-color: var(--color-primaryPalette-100);
 }
 
 .preview-placeholder-icon {
@@ -129,7 +137,7 @@
 
 @media (prefers-color-scheme: dark) {
 	.preview-placeholder {
-		background-color: #2a2a2a;
+		background-color: var(--color-primaryPalette-800);
 	}
 
 	.preview-placeholder-icon {
@@ -168,13 +176,7 @@
 }
 
 .dashboard-name:hover {
-	color: #673ab7;
-}
-
-@media (prefers-color-scheme: dark) {
-	.dashboard-name:hover {
-		color: #b388ff;
-	}
+	color: var(--color-accentedPalette-500);
 }
 
 .dashboard-menu-button {
@@ -281,11 +283,11 @@
 }
 
 .delete-action {
-	color: #c62828;
+	color: var(--color-warnPalette-500);
 }
 
 @media (prefers-color-scheme: dark) {
 	.delete-action {
-		color: #ef5350;
+		color: var(--color-warnDarkPalette-500);
 	}
 }
diff --git a/frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.html b/frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.html
index 825122006..398292735 100644
--- a/frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.html
+++ b/frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.html
@@ -30,11 +30,11 @@ <h1 class="mat-h1">Dashboards</h1>
                     (click)="openCreateDialog()"
                     data-testid="create-dashboard-button">
                     <mat-icon>add</mat-icon>
-                    Create Dashboard
+                    Create dashboard
                 </button>
             </div>
 
-            <app-placeholder-table-data *ngIf="loading()"></app-placeholder-table-data>
+            <app-placeholder-dashboards *ngIf="loading()"></app-placeholder-dashboards>
 
             <div *ngIf="!loading() && filteredDashboards().length === 0" class="no-dashboards">
                 <mat-icon class="no-dashboards-icon">dashboard</mat-icon>
@@ -45,7 +45,7 @@ <h3>No dashboards found</h3>
                     (click)="openCreateDialog()"
                     data-testid="create-dashboard-button">
                     <mat-icon>add</mat-icon>
-                    Create Dashboard
+                    Create dashboard
                 </button>
             </div>
 
diff --git a/frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.ts b/frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.ts
index 40cfc1143..dd5a851e8 100644
--- a/frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.ts
+++ b/frontend/src/app/components/dashboards/dashboards-list/dashboards-list.component.ts
@@ -17,7 +17,7 @@ import { Angulartics2 } from 'angulartics2';
 import { Dashboard } from 'src/app/models/dashboard';
 import { ConnectionsService } from 'src/app/services/connections.service';
 import { DashboardsService } from 'src/app/services/dashboards.service';
-import { PlaceholderTableDataComponent } from '../../skeletons/placeholder-table-data/placeholder-table-data.component';
+import { PlaceholderDashboardsComponent } from '../../skeletons/placeholder-dashboards/placeholder-dashboards.component';
 import { AlertComponent } from '../../ui-components/alert/alert.component';
 import { DashboardDeleteDialogComponent } from '../dashboard-delete-dialog/dashboard-delete-dialog.component';
 import { DashboardEditDialogComponent } from '../dashboard-edit-dialog/dashboard-edit-dialog.component';
@@ -39,7 +39,7 @@ import { DashboardsSidebarComponent } from '../dashboards-sidebar/dashboards-sid
 		MatFormFieldModule,
 		MatTooltipModule,
 		MatDividerModule,
-		PlaceholderTableDataComponent,
+		PlaceholderDashboardsComponent,
 		AlertComponent,
 		DashboardsSidebarComponent,
 	],
diff --git a/frontend/src/app/components/dashboards/dashboards-sidebar/dashboards-sidebar.component.css b/frontend/src/app/components/dashboards/dashboards-sidebar/dashboards-sidebar.component.css
index 8fab0af64..e96f8753e 100644
--- a/frontend/src/app/components/dashboards/dashboards-sidebar/dashboards-sidebar.component.css
+++ b/frontend/src/app/components/dashboards/dashboards-sidebar/dashboards-sidebar.component.css
@@ -2,10 +2,10 @@
 	width: 220px;
 	min-width: 220px;
 	height: 100%;
-	border-right: 1px solid rgba(0, 0, 0, 0.12);
+	border-right: 1px solid var(--mat-sidenav-container-divider-color);
 	display: flex;
 	flex-direction: column;
-	background-color: #fafafa;
+	background-color: var(--color-primaryPalette-50);
 	overflow: hidden;
 }
 
@@ -15,8 +15,7 @@
 
 @media (prefers-color-scheme: dark) {
 	.dashboards-sidebar {
-		background-color: #1e1e1e;
-		border-right-color: rgba(255, 255, 255, 0.12);
+		background-color: var(--color-primaryPalette-900);
 	}
 }
 
@@ -66,23 +65,17 @@
 }
 
 .active-link {
-	background-color: rgba(103, 58, 183, 0.12);
+	background-color: var(--color-accentedPalette-100);
 }
 
 @media (prefers-color-scheme: dark) {
 	.active-link {
-		background-color: rgba(179, 136, 255, 0.16);
+		background-color: var(--color-accentedPalette-800);
 	}
 }
 
 .active-link mat-icon {
-	color: #673ab7;
-}
-
-@media (prefers-color-scheme: dark) {
-	.active-link mat-icon {
-		color: #b388ff;
-	}
+	color: var(--color-accentedPalette-500);
 }
 
 /* Mobile styles */
diff --git a/frontend/src/app/components/dashboards/widget-delete-dialog/widget-delete-dialog.component.css b/frontend/src/app/components/dashboards/widget-delete-dialog/widget-delete-dialog.component.css
index b157b896c..bf205d440 100644
--- a/frontend/src/app/components/dashboards/widget-delete-dialog/widget-delete-dialog.component.css
+++ b/frontend/src/app/components/dashboards/widget-delete-dialog/widget-delete-dialog.component.css
@@ -5,7 +5,7 @@
 }
 
 .warning-icon {
-	color: #f57c00;
+	color: var(--color-warnPalette-300);
 	font-size: 48px;
 	width: 48px;
 	height: 48px;
diff --git a/frontend/src/app/components/dashboards/widget-delete-dialog/widget-delete-dialog.component.html b/frontend/src/app/components/dashboards/widget-delete-dialog/widget-delete-dialog.component.html
index 8567c8525..fd65294c8 100644
--- a/frontend/src/app/components/dashboards/widget-delete-dialog/widget-delete-dialog.component.html
+++ b/frontend/src/app/components/dashboards/widget-delete-dialog/widget-delete-dialog.component.html
@@ -1,4 +1,4 @@
-<h2 mat-dialog-title>Delete Widget</h2>
+<h2 mat-dialog-title>Delete widget</h2>
 
 <mat-dialog-content>
     <div class="warning-container">
@@ -18,6 +18,6 @@ <h2 mat-dialog-title>Delete Widget</h2>
         (click)="onDelete()"
         [disabled]="submitting()"
         data-testid="delete-widget-confirm-button">
-        {{submitting() ? 'Deleting...' : 'Delete Widget'}}
+        {{submitting() ? 'Deleting...' : 'Delete widget'}}
     </button>
 </mat-dialog-actions>
diff --git a/frontend/src/app/components/dashboards/widget-edit-dialog/widget-edit-dialog.component.css b/frontend/src/app/components/dashboards/widget-edit-dialog/widget-edit-dialog.component.css
index 5df989bc0..45e7e78c3 100644
--- a/frontend/src/app/components/dashboards/widget-edit-dialog/widget-edit-dialog.component.css
+++ b/frontend/src/app/components/dashboards/widget-edit-dialog/widget-edit-dialog.component.css
@@ -58,7 +58,7 @@
 }
 
 .create-option {
-	color: #673ab7;
+	color: var(--color-accentedPalette-500);
 }
 
 .create-option mat-icon {
@@ -67,9 +67,3 @@
 	width: 20px;
 	height: 20px;
 }
-
-@media (prefers-color-scheme: dark) {
-	.create-option {
-		color: #b388ff;
-	}
-}
diff --git a/frontend/src/app/components/dashboards/widget-edit-dialog/widget-edit-dialog.component.html b/frontend/src/app/components/dashboards/widget-edit-dialog/widget-edit-dialog.component.html
index 6f0848085..6c1557092 100644
--- a/frontend/src/app/components/dashboards/widget-edit-dialog/widget-edit-dialog.component.html
+++ b/frontend/src/app/components/dashboards/widget-edit-dialog/widget-edit-dialog.component.html
@@ -1,11 +1,11 @@
 <form [formGroup]="form" (ngSubmit)="onSubmit()">
-    <h2 mat-dialog-title>{{ isEdit ? 'Edit Widget' : 'Add Chart' }}</h2>
+    <h2 mat-dialog-title>{{ isEdit ? 'Edit widget' : 'Add chart' }}</h2>
 
     <mat-dialog-content>
         @if (savedQueries().length > 0) {
             <div class="widget-form">
                 <mat-form-field appearance="outline" class="full-width">
-                    <mat-label>Saved Query</mat-label>
+                    <mat-label>Saved query</mat-label>
                     <mat-select formControlName="query_id"
                         data-testid="widget-query-select">
                         @for (query of savedQueries(); track query.id) {
@@ -32,7 +32,7 @@ <h3>No saved queries yet</h3>
                     [routerLink]="['/charts', data.connectionId, 'new']"
                     (click)="dialogRef.close()">
                     <mat-icon>add</mat-icon>
-                    Create Query
+                    Create query
                 </a>
             </div>
         }
diff --git a/frontend/src/app/components/dashboards/widget-renderers/chart-widget/chart-widget.component.css b/frontend/src/app/components/dashboards/widget-renderers/chart-widget/chart-widget.component.css
index 459d57d34..f0abf2ab4 100644
--- a/frontend/src/app/components/dashboards/widget-renderers/chart-widget/chart-widget.component.css
+++ b/frontend/src/app/components/dashboards/widget-renderers/chart-widget/chart-widget.component.css
@@ -18,13 +18,13 @@
 }
 
 .error-message {
-	color: #c62828;
+	color: var(--color-warnPalette-500);
 	margin: 0;
 }
 
 @media (prefers-color-scheme: dark) {
 	.error-message {
-		color: #ef5350;
+		color: var(--color-warnDarkPalette-500);
 	}
 }
 
diff --git a/frontend/src/app/components/dashboards/widget-renderers/counter-widget/counter-widget.component.css b/frontend/src/app/components/dashboards/widget-renderers/counter-widget/counter-widget.component.css
index 9039d6363..76eb24781 100644
--- a/frontend/src/app/components/dashboards/widget-renderers/counter-widget/counter-widget.component.css
+++ b/frontend/src/app/components/dashboards/widget-renderers/counter-widget/counter-widget.component.css
@@ -19,13 +19,13 @@
 }
 
 .error-message {
-	color: #c62828;
+	color: var(--color-warnPalette-500);
 	margin: 0;
 }
 
 @media (prefers-color-scheme: dark) {
 	.error-message {
-		color: #ef5350;
+		color: var(--color-warnDarkPalette-500);
 	}
 }
 
@@ -51,7 +51,7 @@
 	font-size: 48px;
 	font-weight: 700;
 	line-height: 1;
-	color: var(--mdc-filled-button-container-color, #1976d2);
+	color: var(--color-accentedPalette-500);
 }
 
 .counter-label {
diff --git a/frontend/src/app/components/dashboards/widget-renderers/dashboard-widget/dashboard-widget.component.css b/frontend/src/app/components/dashboards/widget-renderers/dashboard-widget/dashboard-widget.component.css
index 9c2bf3f4b..2408256f2 100644
--- a/frontend/src/app/components/dashboards/widget-renderers/dashboard-widget/dashboard-widget.component.css
+++ b/frontend/src/app/components/dashboards/widget-renderers/dashboard-widget/dashboard-widget.component.css
@@ -16,7 +16,7 @@
 	align-items: center;
 	justify-content: center;
 	height: 100%;
-	color: var(--mdc-theme-error, #f44336);
+	color: var(--color-warnDarkPalette-500);
 	font-size: 14px;
 	text-align: center;
 	padding: 16px;
diff --git a/frontend/src/app/components/dashboards/widget-renderers/table-widget/table-widget.component.css b/frontend/src/app/components/dashboards/widget-renderers/table-widget/table-widget.component.css
index cd2266e1e..20b19a97d 100644
--- a/frontend/src/app/components/dashboards/widget-renderers/table-widget/table-widget.component.css
+++ b/frontend/src/app/components/dashboards/widget-renderers/table-widget/table-widget.component.css
@@ -18,13 +18,13 @@
 }
 
 .error-message {
-	color: #c62828;
+	color: var(--color-warnPalette-500);
 	margin: 0;
 }
 
 @media (prefers-color-scheme: dark) {
 	.error-message {
-		color: #ef5350;
+		color: var(--color-warnDarkPalette-500);
 	}
 }
 
diff --git a/frontend/src/app/components/dashboards/widget-renderers/text-widget/text-widget.component.css b/frontend/src/app/components/dashboards/widget-renderers/text-widget/text-widget.component.css
index 5acc2048e..83d799b63 100644
--- a/frontend/src/app/components/dashboards/widget-renderers/text-widget/text-widget.component.css
+++ b/frontend/src/app/components/dashboards/widget-renderers/text-widget/text-widget.component.css
@@ -36,7 +36,7 @@
 	}
 
 	a {
-		color: var(--mdc-filled-button-container-color, #1976d2);
+		color: var(--color-accentedPalette-500);
 	}
 
 	code {
diff --git a/frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.css b/frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.css
index a12df152e..48926ad2b 100644
--- a/frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.css
+++ b/frontend/src/app/components/profile/profile-sidebar/profile-sidebar.component.css
@@ -2,10 +2,10 @@
 	width: 220px;
 	min-width: 220px;
 	height: 100%;
-	border-right: 1px solid rgba(0, 0, 0, 0.12);
+	border-right: 1px solid var(--mat-sidenav-container-divider-color);
 	display: flex;
 	flex-direction: column;
-	background-color: #fafafa;
+	background-color: var(--color-primaryPalette-50);
 	overflow: hidden;
 }
 
@@ -15,8 +15,7 @@
 
 @media (prefers-color-scheme: dark) {
 	.profile-sidebar {
-		background-color: #1e1e1e;
-		border-right-color: rgba(255, 255, 255, 0.12);
+		background-color: var(--color-primaryPalette-900);
 	}
 }
 
@@ -80,23 +79,17 @@
 }
 
 .active-link {
-	background-color: rgba(103, 58, 183, 0.12);
+	background-color: var(--color-accentedPalette-100);
 }
 
 @media (prefers-color-scheme: dark) {
 	.active-link {
-		background-color: rgba(179, 136, 255, 0.16);
+		background-color: var(--color-accentedPalette-800);
 	}
 }
 
 .active-link mat-icon {
-	color: #673ab7;
-}
-
-@media (prefers-color-scheme: dark) {
-	.active-link mat-icon {
-		color: #b388ff;
-	}
+	color: var(--color-accentedPalette-500);
 }
 
 /* Mobile styles */
diff --git a/frontend/src/app/components/skeletons/placeholder-dashboards/placeholder-dashboards.component.css b/frontend/src/app/components/skeletons/placeholder-dashboards/placeholder-dashboards.component.css
new file mode 100644
index 000000000..95792456a
--- /dev/null
+++ b/frontend/src/app/components/skeletons/placeholder-dashboards/placeholder-dashboards.component.css
@@ -0,0 +1,58 @@
+.dashboards-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+	gap: 24px;
+}
+
+@media (width <= 600px) {
+	.dashboards-grid {
+		grid-template-columns: 1fr;
+		gap: 16px;
+	}
+}
+
+.dashboard-card {
+	border-radius: 4px;
+	overflow: hidden;
+}
+
+.card-preview {
+	height: 160px;
+}
+
+.card-content {
+	padding: 16px;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.card-title {
+	height: 20px;
+	width: 60%;
+	border-radius: 4px;
+}
+
+.card-description {
+	height: 16px;
+	width: 80%;
+	border-radius: 4px;
+}
+
+.card-meta {
+	display: flex;
+	justify-content: space-between;
+	margin-top: 4px;
+}
+
+.card-meta-left {
+	height: 14px;
+	width: 80px;
+	border-radius: 4px;
+}
+
+.card-meta-right {
+	height: 14px;
+	width: 60px;
+	border-radius: 4px;
+}
diff --git a/frontend/src/app/components/skeletons/placeholder-dashboards/placeholder-dashboards.component.html b/frontend/src/app/components/skeletons/placeholder-dashboards/placeholder-dashboards.component.html
new file mode 100644
index 000000000..ddca61138
--- /dev/null
+++ b/frontend/src/app/components/skeletons/placeholder-dashboards/placeholder-dashboards.component.html
@@ -0,0 +1,70 @@
+<div class="skeleton">
+    <div class="dashboards-grid">
+        <div class="dashboard-card">
+            <div class="bone card-preview"></div>
+            <div class="card-content">
+                <div class="bone card-title"></div>
+                <div class="bone card-description"></div>
+                <div class="card-meta">
+                    <div class="bone card-meta-left"></div>
+                    <div class="bone card-meta-right"></div>
+                </div>
+            </div>
+        </div>
+        <div class="dashboard-card">
+            <div class="bone card-preview"></div>
+            <div class="card-content">
+                <div class="bone card-title"></div>
+                <div class="bone card-description"></div>
+                <div class="card-meta">
+                    <div class="bone card-meta-left"></div>
+                    <div class="bone card-meta-right"></div>
+                </div>
+            </div>
+        </div>
+        <div class="dashboard-card">
+            <div class="bone card-preview"></div>
+            <div class="card-content">
+                <div class="bone card-title"></div>
+                <div class="bone card-description"></div>
+                <div class="card-meta">
+                    <div class="bone card-meta-left"></div>
+                    <div class="bone card-meta-right"></div>
+                </div>
+            </div>
+        </div>
+        <div class="dashboard-card">
+            <div class="bone card-preview"></div>
+            <div class="card-content">
+                <div class="bone card-title"></div>
+                <div class="bone card-description"></div>
+                <div class="card-meta">
+                    <div class="bone card-meta-left"></div>
+                    <div class="bone card-meta-right"></div>
+                </div>
+            </div>
+        </div>
+        <div class="dashboard-card">
+            <div class="bone card-preview"></div>
+            <div class="card-content">
+                <div class="bone card-title"></div>
+                <div class="bone card-description"></div>
+                <div class="card-meta">
+                    <div class="bone card-meta-left"></div>
+                    <div class="bone card-meta-right"></div>
+                </div>
+            </div>
+        </div>
+        <div class="dashboard-card">
+            <div class="bone card-preview"></div>
+            <div class="card-content">
+                <div class="bone card-title"></div>
+                <div class="bone card-description"></div>
+                <div class="card-meta">
+                    <div class="bone card-meta-left"></div>
+                    <div class="bone card-meta-right"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/frontend/src/app/components/skeletons/placeholder-dashboards/placeholder-dashboards.component.ts b/frontend/src/app/components/skeletons/placeholder-dashboards/placeholder-dashboards.component.ts
new file mode 100644
index 000000000..585f95e4b
--- /dev/null
+++ b/frontend/src/app/components/skeletons/placeholder-dashboards/placeholder-dashboards.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+	selector: 'app-placeholder-dashboards',
+	templateUrl: './placeholder-dashboards.component.html',
+	styleUrls: ['./placeholder-dashboards.component.css'],
+})
+export class PlaceholderDashboardsComponent {}