From db26861ca8f1314f401709370398f91ede2bf57b Mon Sep 17 00:00:00 2001
From: Andrii Kostenko <andrey@kostenko.name>
Date: Tue, 17 Feb 2026 20:35:42 +0000
Subject: [PATCH] refactor: rename dashboard widgets to panels and update
 /charts route to /panels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rename the dashboard widget system to use "panel" terminology throughout:
- Rename files/directories: widget-renderers → panel-renderers, widget-delete-dialog → panel-delete-dialog, etc.
- Update class names, selectors, CSS classes, and user-visible text
- Change /charts/:connection-id route to /panels/:connection-id
- Preserve API-facing model interfaces (DashboardWidget) and service methods for backend compatibility

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/app/app-routing.module.ts        |  6 +--
 .../chart-edit/chart-edit.component.html      |  4 +-
 .../chart-edit/chart-edit.component.spec.ts   |  2 +-
 .../charts/chart-edit/chart-edit.component.ts |  4 +-
 .../charts-list/charts-list.component.css     | 30 +++++++-------
 .../charts-list/charts-list.component.html    | 40 +++++++++----------
 .../charts-list/charts-list.component.ts      |  2 +-
 .../dashboard-view.component.css              | 32 +++++++--------
 .../dashboard-view.component.html             | 32 +++++++--------
 .../dashboard-view.component.ts               | 32 +++++++--------
 .../dashboards-sidebar.component.html         |  6 +--
 .../panel-delete-dialog.component.css}        |  0
 .../panel-delete-dialog.component.html}       | 10 ++---
 .../panel-delete-dialog.component.spec.ts}    | 12 +++---
 .../panel-delete-dialog.component.ts}         | 10 ++---
 .../panel-edit-dialog.component.css}          |  4 +-
 .../panel-edit-dialog.component.html}         | 12 +++---
 .../panel-edit-dialog.component.spec.ts}      | 26 ++++++------
 .../panel-edit-dialog.component.ts}           | 12 +++---
 .../chart-panel/chart-panel.component.css}    |  0
 .../chart-panel/chart-panel.component.html}   |  0
 .../chart-panel.component.spec.ts}            | 12 +++---
 .../chart-panel/chart-panel.component.ts}     |  8 ++--
 .../counter-panel.component.css}              |  0
 .../counter-panel.component.html}             |  0
 .../counter-panel.component.spec.ts}          | 12 +++---
 .../counter-panel/counter-panel.component.ts} |  8 ++--
 .../dashboard-panel.component.css}            |  4 +-
 .../dashboard-panel.component.html}           | 24 +++++------
 .../dashboard-panel.component.ts}             | 28 ++++++-------
 .../table-panel/table-panel.component.css}    |  0
 .../table-panel/table-panel.component.html}   |  0
 .../table-panel.component.spec.ts}            | 12 +++---
 .../table-panel/table-panel.component.ts}     |  8 ++--
 .../text-panel/text-panel.component.css}      |  0
 .../text-panel/text-panel.component.html}     |  0
 .../text-panel/text-panel.component.spec.ts}  | 12 +++---
 .../text-panel/text-panel.component.ts}       |  8 ++--
 38 files changed, 206 insertions(+), 206 deletions(-)
 rename frontend/src/app/components/dashboards/{widget-delete-dialog/widget-delete-dialog.component.css => panel-delete-dialog/panel-delete-dialog.component.css} (100%)
 rename frontend/src/app/components/dashboards/{widget-delete-dialog/widget-delete-dialog.component.html => panel-delete-dialog/panel-delete-dialog.component.html} (61%)
 rename frontend/src/app/components/dashboards/{widget-delete-dialog/widget-delete-dialog.component.spec.ts => panel-delete-dialog/panel-delete-dialog.component.spec.ts} (76%)
 rename frontend/src/app/components/dashboards/{widget-delete-dialog/widget-delete-dialog.component.ts => panel-delete-dialog/panel-delete-dialog.component.ts} (83%)
 rename frontend/src/app/components/dashboards/{widget-edit-dialog/widget-edit-dialog.component.css => panel-edit-dialog/panel-edit-dialog.component.css} (96%)
 rename frontend/src/app/components/dashboards/{widget-edit-dialog/widget-edit-dialog.component.html => panel-edit-dialog/panel-edit-dialog.component.html} (87%)
 rename frontend/src/app/components/dashboards/{widget-edit-dialog/widget-edit-dialog.component.spec.ts => panel-edit-dialog/panel-edit-dialog.component.spec.ts} (88%)
 rename frontend/src/app/components/dashboards/{widget-edit-dialog/widget-edit-dialog.component.ts => panel-edit-dialog/panel-edit-dialog.component.ts} (90%)
 rename frontend/src/app/components/dashboards/{widget-renderers/chart-widget/chart-widget.component.css => panel-renderers/chart-panel/chart-panel.component.css} (100%)
 rename frontend/src/app/components/dashboards/{widget-renderers/chart-widget/chart-widget.component.html => panel-renderers/chart-panel/chart-panel.component.html} (100%)
 rename frontend/src/app/components/dashboards/{widget-renderers/chart-widget/chart-widget.component.spec.ts => panel-renderers/chart-panel/chart-panel.component.spec.ts} (84%)
 rename frontend/src/app/components/dashboards/{widget-renderers/chart-widget/chart-widget.component.ts => panel-renderers/chart-panel/chart-panel.component.ts} (94%)
 rename frontend/src/app/components/dashboards/{widget-renderers/counter-widget/counter-widget.component.css => panel-renderers/counter-panel/counter-panel.component.css} (100%)
 rename frontend/src/app/components/dashboards/{widget-renderers/counter-widget/counter-widget.component.html => panel-renderers/counter-panel/counter-panel.component.html} (100%)
 rename frontend/src/app/components/dashboards/{widget-renderers/counter-widget/counter-widget.component.spec.ts => panel-renderers/counter-panel/counter-panel.component.spec.ts} (81%)
 rename frontend/src/app/components/dashboards/{widget-renderers/counter-widget/counter-widget.component.ts => panel-renderers/counter-panel/counter-panel.component.ts} (92%)
 rename frontend/src/app/components/dashboards/{widget-renderers/dashboard-widget/dashboard-widget.component.css => panel-renderers/dashboard-panel/dashboard-panel.component.css} (90%)
 rename frontend/src/app/components/dashboards/{widget-renderers/dashboard-widget/dashboard-widget.component.html => panel-renderers/dashboard-panel/dashboard-panel.component.html} (70%)
 rename frontend/src/app/components/dashboards/{widget-renderers/dashboard-widget/dashboard-widget.component.ts => panel-renderers/dashboard-panel/dashboard-panel.component.ts} (72%)
 rename frontend/src/app/components/dashboards/{widget-renderers/table-widget/table-widget.component.css => panel-renderers/table-panel/table-panel.component.css} (100%)
 rename frontend/src/app/components/dashboards/{widget-renderers/table-widget/table-widget.component.html => panel-renderers/table-panel/table-panel.component.html} (100%)
 rename frontend/src/app/components/dashboards/{widget-renderers/table-widget/table-widget.component.spec.ts => panel-renderers/table-panel/table-panel.component.spec.ts} (83%)
 rename frontend/src/app/components/dashboards/{widget-renderers/table-widget/table-widget.component.ts => panel-renderers/table-panel/table-panel.component.ts} (84%)
 rename frontend/src/app/components/dashboards/{widget-renderers/text-widget/text-widget.component.css => panel-renderers/text-panel/text-panel.component.css} (100%)
 rename frontend/src/app/components/dashboards/{widget-renderers/text-widget/text-widget.component.html => panel-renderers/text-panel/text-panel.component.html} (100%)
 rename frontend/src/app/components/dashboards/{widget-renderers/text-widget/text-widget.component.spec.ts => panel-renderers/text-panel/text-panel.component.spec.ts} (76%)
 rename frontend/src/app/components/dashboards/{widget-renderers/text-widget/text-widget.component.ts => panel-renderers/text-panel/text-panel.component.ts} (80%)

diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index a775781e8..e21c149c0 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -211,21 +211,21 @@ const routes: Routes = [
 		canActivate: [AuthGuard],
 	},
 	{
-		path: 'charts/:connection-id',
+		path: 'panels/:connection-id',
 		loadComponent: () =>
 			import('./components/charts/charts-list/charts-list.component').then((m) => m.ChartsListComponent),
 		canActivate: [AuthGuard],
 		title: 'Saved Queries | Rocketadmin',
 	},
 	{
-		path: 'charts/:connection-id/new',
+		path: 'panels/:connection-id/new',
 		loadComponent: () =>
 			import('./components/charts/chart-edit/chart-edit.component').then((m) => m.ChartEditComponent),
 		canActivate: [AuthGuard],
 		title: 'Create Query | Rocketadmin',
 	},
 	{
-		path: 'charts/:connection-id/:query-id',
+		path: 'panels/:connection-id/:query-id',
 		loadComponent: () =>
 			import('./components/charts/chart-edit/chart-edit.component').then((m) => m.ChartEditComponent),
 		canActivate: [AuthGuard],
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 f37748f0b..68d4016ad 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,7 +9,7 @@
 
         <div class="chart-edit-page">
     <div class="chart-edit-header">
-        <h1 class="mat-h1">{{ isEditMode() ? 'Edit widget' : 'Create widget' }}</h1>
+        <h1 class="mat-h1">{{ isEditMode() ? 'Edit panel' : 'Create panel' }}</h1>
     </div>
 
     @if (loading()) {
@@ -538,7 +538,7 @@ <h3>Query results ({{ testResults().length }} rows)</h3>
 
         @if (!loading()) {
             <div class="actions">
-                <a mat-stroked-button [routerLink]="['/charts', connectionId()]" data-testid="cancel-button">Back</a>
+                <a mat-stroked-button [routerLink]="['/panels', connectionId()]" data-testid="cancel-button">Back</a>
                 <button mat-flat-button color="primary"
                     (click)="saveQuery()"
                     [disabled]="!canSave()"
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 9e24c7cdf..6ecd23d51 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
@@ -243,7 +243,7 @@ describe('ChartEditComponent', () => {
 			testable.queryName.set('New Query');
 			testable.queryText.set('SELECT 1');
 			component.saveQuery();
-			expect(router.navigate).toHaveBeenCalledWith(['/charts', 'conn-1']);
+			expect(router.navigate).toHaveBeenCalledWith(['/panels', 'conn-1']);
 		});
 	});
 
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 8d591f034..cf99cfe43 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
@@ -596,7 +596,7 @@ export class ChartEditComponent implements OnInit {
 				.updateSavedQuery(this.connectionId(), this.queryId(), payload)
 				.pipe(finalize(() => this.saving.set(false)))
 				.subscribe(() => {
-					this.router.navigate(['/charts', this.connectionId()]);
+					this.router.navigate(['/panels', this.connectionId()]);
 				});
 			this.angulartics2.eventTrack.next({
 				action: 'Charts: saved query updated',
@@ -607,7 +607,7 @@ export class ChartEditComponent implements OnInit {
 				.createSavedQuery(this.connectionId(), payload)
 				.pipe(finalize(() => this.saving.set(false)))
 				.subscribe(() => {
-					this.router.navigate(['/charts', this.connectionId()]);
+					this.router.navigate(['/panels', this.connectionId()]);
 				});
 			this.angulartics2.eventTrack.next({
 				action: 'Charts: saved query created',
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 d7a06f27d..9edad5e00 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
@@ -72,27 +72,27 @@
 }
 
 /* Table Styles */
-.widgets-table {
+.panels-table {
 	width: 100%;
 	background: transparent;
 }
 
-.widgets-table tr.mat-mdc-row {
+.panels-table tr.mat-mdc-row {
 	height: 64px;
 	cursor: pointer;
 }
 
-.widgets-table tr.mat-mdc-row:hover {
+.panels-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 {
+	.panels-table tr.mat-mdc-row:hover {
 		background-color: rgba(255, 255, 255, 0.04);
 	}
 }
 
-.widgets-table th.mat-mdc-header-cell {
+.panels-table th.mat-mdc-header-cell {
 	font-weight: 500;
 	color: rgba(0, 0, 0, 0.6);
 	font-size: 12px;
@@ -101,7 +101,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
-	.widgets-table th.mat-mdc-header-cell {
+	.panels-table th.mat-mdc-header-cell {
 		color: rgba(255, 255, 255, 0.6);
 	}
 }
@@ -127,7 +127,7 @@
 }
 
 /* Name Cell */
-.widget-name-cell {
+.panel-name-cell {
 	font-weight: 500;
 }
 
@@ -165,7 +165,7 @@
 }
 
 /* Empty State */
-.no-widgets {
+.no-panels {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -177,12 +177,12 @@
 }
 
 @media (prefers-color-scheme: dark) {
-	.no-widgets {
+	.no-panels {
 		background-color: rgba(255, 255, 255, 0.05);
 	}
 }
 
-.no-widgets-icon {
+.no-panels-icon {
 	font-size: 64px;
 	width: 64px;
 	height: 64px;
@@ -191,29 +191,29 @@
 }
 
 @media (prefers-color-scheme: dark) {
-	.no-widgets-icon {
+	.no-panels-icon {
 		color: rgba(255, 255, 255, 0.3);
 	}
 }
 
-.no-widgets h3 {
+.no-panels h3 {
 	margin: 0 0 8px 0;
 	color: rgba(0, 0, 0, 0.87);
 }
 
 @media (prefers-color-scheme: dark) {
-	.no-widgets h3 {
+	.no-panels h3 {
 		color: rgba(255, 255, 255, 0.87);
 	}
 }
 
-.no-widgets p {
+.no-panels p {
 	margin: 0 0 16px 0;
 	color: rgba(0, 0, 0, 0.54);
 }
 
 @media (prefers-color-scheme: dark) {
-	.no-widgets p {
+	.no-panels p {
 		color: rgba(255, 255, 255, 0.54);
 	}
 }
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 a4e2d85d1..10e43c925 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
@@ -9,48 +9,48 @@
 
         <div class="charts-page">
             <div class="charts-header">
-                <h1 class="mat-h1">Widgets</h1>
+                <h1 class="mat-h1">Panels</h1>
                 <p class="charts-description">
-                    Create and manage widgets with chart visualizations for your dashboards.
+                    Create and manage panels with chart visualizations for your dashboards.
                 </p>
             </div>
 
             <div class="charts-toolbar">
                 <mat-form-field appearance="outline" class="search-field">
-                    <mat-label>Search widgets</mat-label>
+                    <mat-label>Search panels</mat-label>
                     <input matInput
                         [ngModel]="searchQuery()"
                         (ngModelChange)="searchQuery.set($event)"
                         placeholder="Search by name or description..."
-                        data-testid="widgets-search-input">
+                        data-testid="panels-search-input">
                     <mat-icon matSuffix>search</mat-icon>
                 </mat-form-field>
 
                 <a *ngIf="filteredQueries().length > 0" mat-flat-button color="primary"
-                    [routerLink]="['/charts', connectionId(), 'new']"
+                    [routerLink]="['/panels', connectionId(), 'new']"
                     (click)="trackCreatePageOpened()"
-                    data-testid="create-widget-button">
+                    data-testid="create-panel-button">
                     <mat-icon>add</mat-icon>
-                    Create widget
+                    Create panel
                 </a>
             </div>
 
             <app-placeholder-table-data *ngIf="loading()"></app-placeholder-table-data>
 
-            <div *ngIf="!loading() && filteredQueries().length === 0" class="no-widgets">
-                <mat-icon class="no-widgets-icon">widgets</mat-icon>
-                <h3>No widgets found</h3>
-                <p *ngIf="searchQuery()">No widgets match your search criteria.</p>
-                <p *ngIf="!searchQuery()">Create your first widget to visualize your data.</p>
+            <div *ngIf="!loading() && filteredQueries().length === 0" class="no-panels">
+                <mat-icon class="no-panels-icon">widgets</mat-icon>
+                <h3>No panels found</h3>
+                <p *ngIf="searchQuery()">No panels match your search criteria.</p>
+                <p *ngIf="!searchQuery()">Create your first panel to visualize your data.</p>
                 <a mat-flat-button color="primary"
-                    [routerLink]="['/charts', connectionId(), 'new']"
+                    [routerLink]="['/panels', connectionId(), 'new']"
                     (click)="trackCreatePageOpened()">
                     <mat-icon>add</mat-icon>
-                    Create widget
+                    Create panel
                 </a>
             </div>
 
-            <table *ngIf="!loading() && filteredQueries().length > 0" mat-table [dataSource]="filteredQueries()" class="widgets-table">
+            <table *ngIf="!loading() && filteredQueries().length > 0" mat-table [dataSource]="filteredQueries()" class="panels-table">
                 <!-- Preview Column -->
                 <ng-container matColumnDef="preview">
                     <th mat-header-cell *matHeaderCellDef>Type</th>
@@ -64,7 +64,7 @@ <h3>No widgets found</h3>
                 <!-- Name Column -->
                 <ng-container matColumnDef="name">
                     <th mat-header-cell *matHeaderCellDef>Name</th>
-                    <td mat-cell *matCellDef="let query" class="widget-name-cell">
+                    <td mat-cell *matCellDef="let query" class="panel-name-cell">
                         {{query.name}}
                     </td>
                 </ng-container>
@@ -91,20 +91,20 @@ <h3>No widgets found</h3>
                     <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">
+                            attr.data-testid="panel-actions-{{i}}-button">
                             <mat-icon>more_vert</mat-icon>
                         </button>
                         <mat-menu #rowMenu="matMenu">
                             <a mat-menu-item
-                                [routerLink]="['/charts', connectionId(), query.id]"
+                                [routerLink]="['/panels', connectionId(), query.id]"
                                 (click)="trackEditPageOpened()"
-                                attr.data-testid="widget-edit-{{i}}-menu-item">
+                                attr.data-testid="panel-edit-{{i}}-menu-item">
                                 <mat-icon>edit</mat-icon>
                                 <span>Edit</span>
                             </a>
                             <mat-divider></mat-divider>
                             <button mat-menu-item (click)="openDeleteDialog(query)" class="delete-action"
-                                attr.data-testid="widget-delete-{{i}}-menu-item">
+                                attr.data-testid="panel-delete-{{i}}-menu-item">
                                 <mat-icon color="warn">delete</mat-icon>
                                 <span>Delete</span>
                             </button>
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 f211fcaa3..e43a103a5 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
@@ -136,7 +136,7 @@ export class ChartsListComponent implements OnInit {
 
 	openQuery(query: SavedQuery): void {
 		this.trackEditPageOpened();
-		this.router.navigate(['/charts', this.connectionId(), query.id]);
+		this.router.navigate(['/panels', this.connectionId(), query.id]);
 	}
 
 	openDeleteDialog(query: SavedQuery): void {
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 85edac829..f2a624e12 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
@@ -57,7 +57,7 @@ app-dashboard-view .loading-container {
 	flex: 1;
 }
 
-app-dashboard-view .no-widgets {
+app-dashboard-view .no-panels {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -70,12 +70,12 @@ app-dashboard-view .no-widgets {
 }
 
 @media (prefers-color-scheme: dark) {
-	app-dashboard-view .no-widgets {
+	app-dashboard-view .no-panels {
 		background-color: rgba(255, 255, 255, 0.05);
 	}
 }
 
-app-dashboard-view .no-widgets-icon {
+app-dashboard-view .no-panels-icon {
 	font-size: 64px;
 	width: 64px;
 	height: 64px;
@@ -84,29 +84,29 @@ app-dashboard-view .no-widgets-icon {
 }
 
 @media (prefers-color-scheme: dark) {
-	app-dashboard-view .no-widgets-icon {
+	app-dashboard-view .no-panels-icon {
 		color: rgba(255, 255, 255, 0.3);
 	}
 }
 
-app-dashboard-view .no-widgets h3 {
+app-dashboard-view .no-panels h3 {
 	margin: 0 0 8px 0;
 	color: rgba(0, 0, 0, 0.87);
 }
 
 @media (prefers-color-scheme: dark) {
-	app-dashboard-view .no-widgets h3 {
+	app-dashboard-view .no-panels h3 {
 		color: rgba(255, 255, 255, 0.87);
 	}
 }
 
-app-dashboard-view .no-widgets p {
+app-dashboard-view .no-panels p {
 	margin: 0 0 16px 0;
 	color: rgba(0, 0, 0, 0.54);
 }
 
 @media (prefers-color-scheme: dark) {
-	app-dashboard-view .no-widgets p {
+	app-dashboard-view .no-panels p {
 		color: rgba(255, 255, 255, 0.54);
 	}
 }
@@ -123,7 +123,7 @@ app-dashboard-view .dashboard-grid {
 	}
 }
 
-app-dashboard-view .widget-item {
+app-dashboard-view .panel-item {
 	background: var(--mat-sidenav-content-background-color);
 	border-radius: 8px;
 	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -133,16 +133,16 @@ app-dashboard-view .widget-item {
 }
 
 @media (prefers-color-scheme: dark) {
-	app-dashboard-view .widget-item {
+	app-dashboard-view .panel-item {
 		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 	}
 }
 
-app-dashboard-view .widget-item.edit-mode {
+app-dashboard-view .panel-item.edit-mode {
 	border: 2px dashed var(--color-accentedPalette-500);
 }
 
-app-dashboard-view .widget-item.edit-mode .widget-header {
+app-dashboard-view .panel-item.edit-mode .panel-header {
 	cursor: move;
 }
 
@@ -224,7 +224,7 @@ app-dashboard-view gridster-item .gridster-item-resizable-handler.handle-nw {
 	border-radius: 6px 0 2px 0;
 }
 
-app-dashboard-view .widget-header {
+app-dashboard-view .panel-header {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -233,7 +233,7 @@ app-dashboard-view .widget-header {
 	flex-shrink: 0;
 }
 
-app-dashboard-view .widget-title {
+app-dashboard-view .panel-title {
 	font-weight: 500;
 	font-size: 14px;
 	overflow: hidden;
@@ -241,11 +241,11 @@ app-dashboard-view .widget-title {
 	white-space: nowrap;
 }
 
-app-dashboard-view .widget-menu-button {
+app-dashboard-view .panel-menu-button {
 	flex-shrink: 0;
 }
 
-app-dashboard-view .widget-content {
+app-dashboard-view .panel-content {
 	flex: 1;
 	padding: 16px;
 	overflow: auto;
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 a68791ed0..5da6d863e 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
@@ -23,8 +23,8 @@ <h1 class="mat-h1">{{ dashboard()?.name || 'Loading...' }}</h1>
                     Edit mode
                 </mat-slide-toggle>
                 <button mat-flat-button color="primary"
-                    (click)="openAddWidgetDialog()"
-                    data-testid="add-widget-button">
+                    (click)="openAddPanelDialog()"
+                    data-testid="add-panel-button">
                     <mat-icon>add</mat-icon>
                     Add chart
                 </button>
@@ -39,11 +39,11 @@ <h1 class="mat-h1">{{ dashboard()?.name || 'Loading...' }}</h1>
     }
 
     @if (!loading() && gridsterItems().length === 0) {
-        <div class="no-widgets">
-            <mat-icon class="no-widgets-icon">bar_chart</mat-icon>
+        <div class="no-panels">
+            <mat-icon class="no-panels-icon">bar_chart</mat-icon>
             <h3>No charts yet</h3>
             <p>Add charts to visualize your data from saved queries.</p>
-            <button mat-flat-button color="primary" (click)="openAddWidgetDialog()">
+            <button mat-flat-button color="primary" (click)="openAddPanelDialog()">
                 <mat-icon>add</mat-icon>
                 Add chart
             </button>
@@ -53,32 +53,32 @@ <h3>No charts yet</h3>
     @if (!loading() && gridsterItems().length > 0) {
         <gridster [options]="gridsterOptions" class="dashboard-grid">
             @for (item of gridsterItems(); track item.widget.id) {
-                <gridster-item [item]="item" class="widget-item" [class.edit-mode]="editMode()">
-                    <div class="widget-header">
-                        <span class="widget-title">{{ widgetRef.savedQuery()?.name || 'Loading...' }}</span>
-                        <button mat-icon-button [matMenuTriggerFor]="widgetMenu" class="widget-menu-button">
+                <gridster-item [item]="item" class="panel-item" [class.edit-mode]="editMode()">
+                    <div class="panel-header">
+                        <span class="panel-title">{{ panelRef.savedQuery()?.name || 'Loading...' }}</span>
+                        <button mat-icon-button [matMenuTriggerFor]="panelMenu" class="panel-menu-button">
                             <mat-icon>more_vert</mat-icon>
                         </button>
-                        <mat-menu #widgetMenu="matMenu">
-                            <a mat-menu-item [routerLink]="['/charts', connectionId(), item.widget.query_id]">
+                        <mat-menu #panelMenu="matMenu">
+                            <a mat-menu-item [routerLink]="['/panels', connectionId(), item.widget.query_id]">
                                 <mat-icon>tune</mat-icon>
                                 <span>Configure chart</span>
                             </a>
-                            <button mat-menu-item (click)="openEditWidgetDialog(item.widget)">
+                            <button mat-menu-item (click)="openEditPanelDialog(item.widget)">
                                 <mat-icon>swap_horiz</mat-icon>
                                 <span>Change query</span>
                             </button>
-                            <button mat-menu-item (click)="openDeleteWidgetDialog(item.widget)" class="delete-action">
+                            <button mat-menu-item (click)="openDeletePanelDialog(item.widget)" class="delete-action">
                                 <mat-icon color="warn">delete</mat-icon>
                                 <span>Delete</span>
                             </button>
                         </mat-menu>
                     </div>
-                    <div class="widget-content">
-                        <app-dashboard-widget #widgetRef
+                    <div class="panel-content">
+                        <app-dashboard-panel #panelRef
                             [widget]="item.widget"
                             [connectionId]="connectionId()">
-                        </app-dashboard-widget>
+                        </app-dashboard-panel>
                     </div>
                 </gridster-item>
             }
diff --git a/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.ts b/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.ts
index 58e99fd61..71a8d2594 100644
--- a/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.ts
+++ b/frontend/src/app/components/dashboards/dashboard-view/dashboard-view.component.ts
@@ -25,11 +25,11 @@ import { DashboardWidget } from 'src/app/models/dashboard';
 import { ConnectionsService } from 'src/app/services/connections.service';
 import { DashboardsService } from 'src/app/services/dashboards.service';
 import { AlertComponent } from '../../ui-components/alert/alert.component';
-import { WidgetDeleteDialogComponent } from '../widget-delete-dialog/widget-delete-dialog.component';
-import { WidgetEditDialogComponent } from '../widget-edit-dialog/widget-edit-dialog.component';
-import { DashboardWidgetComponent } from '../widget-renderers/dashboard-widget/dashboard-widget.component';
+import { PanelDeleteDialogComponent } from '../panel-delete-dialog/panel-delete-dialog.component';
+import { PanelEditDialogComponent } from '../panel-edit-dialog/panel-edit-dialog.component';
+import { DashboardPanelComponent } from '../panel-renderers/dashboard-panel/dashboard-panel.component';
 
-interface GridsterWidgetItem extends GridsterItem {
+interface GridsterPanelItem extends GridsterItem {
 	widget: DashboardWidget;
 }
 
@@ -50,7 +50,7 @@ interface GridsterWidgetItem extends GridsterItem {
 		GridsterComponent,
 		GridsterItemComponent,
 		AlertComponent,
-		DashboardWidgetComponent,
+		DashboardPanelComponent,
 	],
 })
 export class DashboardViewComponent implements OnInit {
@@ -72,7 +72,7 @@ export class DashboardViewComponent implements OnInit {
 	protected loading = computed(() => this._dashboards.dashboardLoading());
 
 	// Writable signal for gridster items (gridster needs mutable items)
-	protected gridsterItems = signal<GridsterWidgetItem[]>([]);
+	protected gridsterItems = signal<GridsterPanelItem[]>([]);
 
 	// Connection title signal (bridging from legacy Observable-based service)
 	private connectionTitle = signal('');
@@ -84,9 +84,9 @@ export class DashboardViewComponent implements OnInit {
 		pushItems: true,
 		draggable: {
 			enabled: false,
-			ignoreContentClass: 'widget-content',
+			ignoreContentClass: 'panel-content',
 			ignoreContent: true,
-			dragHandleClass: 'widget-header',
+			dragHandleClass: 'panel-header',
 		},
 		resizable: {
 			enabled: false,
@@ -111,7 +111,7 @@ export class DashboardViewComponent implements OnInit {
 		minItemRows: 2,
 		maxItemCols: 12,
 		maxItemRows: 12,
-		itemChangeCallback: (item: GridsterItem) => this._onItemChange(item as GridsterWidgetItem),
+		itemChangeCallback: (item: GridsterItem) => this._onItemChange(item as GridsterPanelItem),
 	};
 
 	constructor() {
@@ -181,8 +181,8 @@ export class DashboardViewComponent implements OnInit {
 		posthog.capture(`Dashboards: edit mode ${this.editMode() ? 'enabled' : 'disabled'}`);
 	}
 
-	async openAddWidgetDialog(): Promise<void> {
-		const dialogRef = this.dialog.open(WidgetEditDialogComponent, {
+	async openAddPanelDialog(): Promise<void> {
+		const dialogRef = this.dialog.open(PanelEditDialogComponent, {
 			width: '600px',
 			data: {
 				connectionId: this.connectionId(),
@@ -201,8 +201,8 @@ export class DashboardViewComponent implements OnInit {
 		}
 	}
 
-	async openEditWidgetDialog(widget: DashboardWidget): Promise<void> {
-		const dialogRef = this.dialog.open(WidgetEditDialogComponent, {
+	async openEditPanelDialog(widget: DashboardWidget): Promise<void> {
+		const dialogRef = this.dialog.open(PanelEditDialogComponent, {
 			width: '600px',
 			data: {
 				connectionId: this.connectionId(),
@@ -221,8 +221,8 @@ export class DashboardViewComponent implements OnInit {
 		}
 	}
 
-	async openDeleteWidgetDialog(widget: DashboardWidget): Promise<void> {
-		const dialogRef = this.dialog.open(WidgetDeleteDialogComponent, {
+	async openDeletePanelDialog(widget: DashboardWidget): Promise<void> {
+		const dialogRef = this.dialog.open(PanelDeleteDialogComponent, {
 			width: '400px',
 			data: {
 				connectionId: this.connectionId(),
@@ -245,7 +245,7 @@ export class DashboardViewComponent implements OnInit {
 		this.router.navigate(['/dashboards', this.connectionId()]);
 	}
 
-	private async _onItemChange(item: GridsterWidgetItem): Promise<void> {
+	private async _onItemChange(item: GridsterPanelItem): Promise<void> {
 		const widget = item.widget;
 		if (
 			widget.position_x !== item.x ||
diff --git a/frontend/src/app/components/dashboards/dashboards-sidebar/dashboards-sidebar.component.html b/frontend/src/app/components/dashboards/dashboards-sidebar/dashboards-sidebar.component.html
index 1b9bd8136..64f1add0d 100644
--- a/frontend/src/app/components/dashboards/dashboards-sidebar/dashboards-sidebar.component.html
+++ b/frontend/src/app/components/dashboards/dashboards-sidebar/dashboards-sidebar.component.html
@@ -29,14 +29,14 @@
             <span *ngIf="!collapsed()" matListItemTitle>Dashboards</span>
         </a>
         <a mat-list-item
-            [routerLink]="['/charts', connectionId()]"
+            [routerLink]="['/panels', connectionId()]"
             [class.active-link]="activeTab() === 'queries'"
             class="sidebar-nav-item"
             [class.sidebar-nav-item_collapsed]="collapsed()"
-            [matTooltip]="collapsed() ? 'Widgets' : ''"
+            [matTooltip]="collapsed() ? 'Panels' : ''"
             matTooltipPosition="right">
             <mat-icon matListItemIcon>widgets</mat-icon>
-            <span *ngIf="!collapsed()" matListItemTitle>Widgets</span>
+            <span *ngIf="!collapsed()" matListItemTitle>Panels</span>
         </a>
     </mat-nav-list>
 </div>
diff --git a/frontend/src/app/components/dashboards/widget-delete-dialog/widget-delete-dialog.component.css b/frontend/src/app/components/dashboards/panel-delete-dialog/panel-delete-dialog.component.css
similarity index 100%
rename from frontend/src/app/components/dashboards/widget-delete-dialog/widget-delete-dialog.component.css
rename to frontend/src/app/components/dashboards/panel-delete-dialog/panel-delete-dialog.component.css
diff --git a/frontend/src/app/components/dashboards/widget-delete-dialog/widget-delete-dialog.component.html b/frontend/src/app/components/dashboards/panel-delete-dialog/panel-delete-dialog.component.html
similarity index 61%
rename from frontend/src/app/components/dashboards/widget-delete-dialog/widget-delete-dialog.component.html
rename to frontend/src/app/components/dashboards/panel-delete-dialog/panel-delete-dialog.component.html
index fd65294c8..197350dd1 100644
--- a/frontend/src/app/components/dashboards/widget-delete-dialog/widget-delete-dialog.component.html
+++ b/frontend/src/app/components/dashboards/panel-delete-dialog/panel-delete-dialog.component.html
@@ -1,12 +1,12 @@
-<h2 mat-dialog-title>Delete widget</h2>
+<h2 mat-dialog-title>Delete panel</h2>
 
 <mat-dialog-content>
     <div class="warning-container">
         <mat-icon class="warning-icon">warning</mat-icon>
         <div class="warning-content">
-            <p>Are you sure you want to delete this widget?</p>
+            <p>Are you sure you want to delete this panel?</p>
             <p class="warning-details">
-                This action cannot be undone. The widget will be permanently removed from the dashboard.
+                This action cannot be undone. The panel will be permanently removed from the dashboard.
             </p>
         </div>
     </div>
@@ -17,7 +17,7 @@ <h2 mat-dialog-title>Delete widget</h2>
     <button mat-flat-button color="warn"
         (click)="onDelete()"
         [disabled]="submitting()"
-        data-testid="delete-widget-confirm-button">
-        {{submitting() ? 'Deleting...' : 'Delete widget'}}
+        data-testid="delete-panel-confirm-button">
+        {{submitting() ? 'Deleting...' : 'Delete panel'}}
     </button>
 </mat-dialog-actions>
diff --git a/frontend/src/app/components/dashboards/widget-delete-dialog/widget-delete-dialog.component.spec.ts b/frontend/src/app/components/dashboards/panel-delete-dialog/panel-delete-dialog.component.spec.ts
similarity index 76%
rename from frontend/src/app/components/dashboards/widget-delete-dialog/widget-delete-dialog.component.spec.ts
rename to frontend/src/app/components/dashboards/panel-delete-dialog/panel-delete-dialog.component.spec.ts
index d986e70a6..465984d87 100644
--- a/frontend/src/app/components/dashboards/widget-delete-dialog/widget-delete-dialog.component.spec.ts
+++ b/frontend/src/app/components/dashboards/panel-delete-dialog/panel-delete-dialog.component.spec.ts
@@ -5,11 +5,11 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { Angulartics2Module } from 'angulartics2';
 import { DashboardsService } from 'src/app/services/dashboards.service';
-import { WidgetDeleteDialogComponent } from './widget-delete-dialog.component';
+import { PanelDeleteDialogComponent } from './panel-delete-dialog.component';
 
-describe('WidgetDeleteDialogComponent', () => {
-	let component: WidgetDeleteDialogComponent;
-	let fixture: ComponentFixture<WidgetDeleteDialogComponent>;
+describe('PanelDeleteDialogComponent', () => {
+	let component: PanelDeleteDialogComponent;
+	let fixture: ComponentFixture<PanelDeleteDialogComponent>;
 	let mockDashboardsService: Partial<DashboardsService>;
 
 	beforeEach(async () => {
@@ -18,7 +18,7 @@ describe('WidgetDeleteDialogComponent', () => {
 		} as Partial<DashboardsService>;
 
 		await TestBed.configureTestingModule({
-			imports: [WidgetDeleteDialogComponent, BrowserAnimationsModule, Angulartics2Module.forRoot()],
+			imports: [PanelDeleteDialogComponent, BrowserAnimationsModule, Angulartics2Module.forRoot()],
 			providers: [
 				provideHttpClient(),
 				provideHttpClientTesting(),
@@ -35,7 +35,7 @@ describe('WidgetDeleteDialogComponent', () => {
 			],
 		}).compileComponents();
 
-		fixture = TestBed.createComponent(WidgetDeleteDialogComponent);
+		fixture = TestBed.createComponent(PanelDeleteDialogComponent);
 		component = fixture.componentInstance;
 		fixture.detectChanges();
 	});
diff --git a/frontend/src/app/components/dashboards/widget-delete-dialog/widget-delete-dialog.component.ts b/frontend/src/app/components/dashboards/panel-delete-dialog/panel-delete-dialog.component.ts
similarity index 83%
rename from frontend/src/app/components/dashboards/widget-delete-dialog/widget-delete-dialog.component.ts
rename to frontend/src/app/components/dashboards/panel-delete-dialog/panel-delete-dialog.component.ts
index a4a388a60..db4262de3 100644
--- a/frontend/src/app/components/dashboards/widget-delete-dialog/widget-delete-dialog.component.ts
+++ b/frontend/src/app/components/dashboards/panel-delete-dialog/panel-delete-dialog.component.ts
@@ -9,18 +9,18 @@ import { DashboardWidget } from 'src/app/models/dashboard';
 import { DashboardsService } from 'src/app/services/dashboards.service';
 
 @Component({
-	selector: 'app-widget-delete-dialog',
-	templateUrl: './widget-delete-dialog.component.html',
-	styleUrls: ['./widget-delete-dialog.component.css'],
+	selector: 'app-panel-delete-dialog',
+	templateUrl: './panel-delete-dialog.component.html',
+	styleUrls: ['./panel-delete-dialog.component.css'],
 	imports: [CommonModule, MatDialogModule, MatButtonModule, MatIconModule],
 })
-export class WidgetDeleteDialogComponent {
+export class PanelDeleteDialogComponent {
 	protected submitting = signal(false);
 
 	constructor(
 		@Inject(MAT_DIALOG_DATA)
 		public data: { connectionId: string; dashboardId: string; widget: DashboardWidget },
-		private dialogRef: MatDialogRef<WidgetDeleteDialogComponent>,
+		private dialogRef: MatDialogRef<PanelDeleteDialogComponent>,
 		private _dashboards: DashboardsService,
 		private angulartics2: Angulartics2,
 	) {}
diff --git a/frontend/src/app/components/dashboards/widget-edit-dialog/widget-edit-dialog.component.css b/frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.css
similarity index 96%
rename from frontend/src/app/components/dashboards/widget-edit-dialog/widget-edit-dialog.component.css
rename to frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.css
index 45e7e78c3..659332423 100644
--- a/frontend/src/app/components/dashboards/widget-edit-dialog/widget-edit-dialog.component.css
+++ b/frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.css
@@ -1,4 +1,4 @@
-.widget-form {
+.panel-form {
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
@@ -7,7 +7,7 @@
 }
 
 @media (width <= 600px) {
-	.widget-form {
+	.panel-form {
 		min-width: auto;
 	}
 }
diff --git a/frontend/src/app/components/dashboards/widget-edit-dialog/widget-edit-dialog.component.html b/frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.html
similarity index 87%
rename from frontend/src/app/components/dashboards/widget-edit-dialog/widget-edit-dialog.component.html
rename to frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.html
index 6c1557092..a5a1bd559 100644
--- a/frontend/src/app/components/dashboards/widget-edit-dialog/widget-edit-dialog.component.html
+++ b/frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.html
@@ -1,13 +1,13 @@
 <form [formGroup]="form" (ngSubmit)="onSubmit()">
-    <h2 mat-dialog-title>{{ isEdit ? 'Edit widget' : 'Add chart' }}</h2>
+    <h2 mat-dialog-title>{{ isEdit ? 'Edit panel' : 'Add chart' }}</h2>
 
     <mat-dialog-content>
         @if (savedQueries().length > 0) {
-            <div class="widget-form">
+            <div class="panel-form">
                 <mat-form-field appearance="outline" class="full-width">
                     <mat-label>Saved query</mat-label>
                     <mat-select formControlName="query_id"
-                        data-testid="widget-query-select">
+                        data-testid="panel-query-select">
                         @for (query of savedQueries(); track query.id) {
                             <mat-option [value]="query.id">{{ query.name }}</mat-option>
                         }
@@ -17,7 +17,7 @@ <h2 mat-dialog-title>{{ isEdit ? 'Edit widget' : 'Add chart' }}</h2>
                             Create new query
                         </mat-option>
                     </mat-select>
-                    <mat-hint>Select a saved query to display in this widget</mat-hint>
+                    <mat-hint>Select a saved query to display in this panel</mat-hint>
                     @if (form.get('query_id')?.hasError('required')) {
                         <mat-error>Please select a saved query</mat-error>
                     }
@@ -29,7 +29,7 @@ <h2 mat-dialog-title>{{ isEdit ? 'Edit widget' : 'Add chart' }}</h2>
                 <h3>No saved queries yet</h3>
                 <p>Create a saved query first to add it as a chart on this dashboard.</p>
                 <a mat-stroked-button color="primary"
-                    [routerLink]="['/charts', data.connectionId, 'new']"
+                    [routerLink]="['/panels', data.connectionId, 'new']"
                     (click)="dialogRef.close()">
                     <mat-icon>add</mat-icon>
                     Create query
@@ -43,7 +43,7 @@ <h3>No saved queries yet</h3>
         @if (savedQueries().length > 0) {
             <button type="submit" mat-flat-button color="primary"
                 [disabled]="submitting() || form.invalid"
-                data-testid="widget-save-button">
+                data-testid="panel-save-button">
                 {{ submitting() ? 'Saving...' : (isEdit ? 'Update' : 'Add') }}
             </button>
         }
diff --git a/frontend/src/app/components/dashboards/widget-edit-dialog/widget-edit-dialog.component.spec.ts b/frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.spec.ts
similarity index 88%
rename from frontend/src/app/components/dashboards/widget-edit-dialog/widget-edit-dialog.component.spec.ts
rename to frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.spec.ts
index 35de7712b..79b6572cf 100644
--- a/frontend/src/app/components/dashboards/widget-edit-dialog/widget-edit-dialog.component.spec.ts
+++ b/frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.spec.ts
@@ -9,18 +9,18 @@ import { DashboardWidget } from 'src/app/models/dashboard';
 import { SavedQuery } from 'src/app/models/saved-query';
 import { DashboardsService } from 'src/app/services/dashboards.service';
 import { SavedQueriesService } from 'src/app/services/saved-queries.service';
-import { WidgetEditDialogComponent } from './widget-edit-dialog.component';
+import { PanelEditDialogComponent } from './panel-edit-dialog.component';
 
-type WidgetEditDialogTestable = WidgetEditDialogComponent & {
+type PanelEditDialogTestable = PanelEditDialogComponent & {
 	form: ReturnType<typeof import('@angular/forms').FormBuilder.prototype.group>;
 	isEdit: boolean;
 	onSubmit(): void;
 };
 
-describe('WidgetEditDialogComponent', () => {
-	let component: WidgetEditDialogComponent;
-	let testable: WidgetEditDialogTestable;
-	let fixture: ComponentFixture<WidgetEditDialogComponent>;
+describe('PanelEditDialogComponent', () => {
+	let component: PanelEditDialogComponent;
+	let testable: PanelEditDialogTestable;
+	let fixture: ComponentFixture<PanelEditDialogComponent>;
 	let mockDashboardsService: Partial<DashboardsService>;
 	let mockSavedQueriesService: Partial<SavedQueriesService>;
 	let savedQueriesSignal: WritableSignal<SavedQuery[]>;
@@ -68,7 +68,7 @@ describe('WidgetEditDialogComponent', () => {
 		};
 
 		return TestBed.configureTestingModule({
-			imports: [WidgetEditDialogComponent, BrowserAnimationsModule, Angulartics2Module.forRoot()],
+			imports: [PanelEditDialogComponent, BrowserAnimationsModule, Angulartics2Module.forRoot()],
 			providers: [
 				provideHttpClient(),
 				provideHttpClientTesting(),
@@ -86,9 +86,9 @@ describe('WidgetEditDialogComponent', () => {
 	describe('Add widget mode', () => {
 		beforeEach(async () => {
 			await setupTestBed(null);
-			fixture = TestBed.createComponent(WidgetEditDialogComponent);
+			fixture = TestBed.createComponent(PanelEditDialogComponent);
 			component = fixture.componentInstance;
-			testable = component as WidgetEditDialogTestable;
+			testable = component as PanelEditDialogTestable;
 			fixture.detectChanges();
 		});
 
@@ -144,9 +144,9 @@ describe('WidgetEditDialogComponent', () => {
 
 		beforeEach(async () => {
 			await setupTestBed(existingWidget);
-			fixture = TestBed.createComponent(WidgetEditDialogComponent);
+			fixture = TestBed.createComponent(PanelEditDialogComponent);
 			component = fixture.componentInstance;
-			testable = component as WidgetEditDialogTestable;
+			testable = component as PanelEditDialogTestable;
 			fixture.detectChanges();
 		});
 
@@ -189,9 +189,9 @@ describe('WidgetEditDialogComponent', () => {
 
 		beforeEach(async () => {
 			await setupTestBed(widgetWithoutQuery);
-			fixture = TestBed.createComponent(WidgetEditDialogComponent);
+			fixture = TestBed.createComponent(PanelEditDialogComponent);
 			component = fixture.componentInstance;
-			testable = component as WidgetEditDialogTestable;
+			testable = component as PanelEditDialogTestable;
 			fixture.detectChanges();
 		});
 
diff --git a/frontend/src/app/components/dashboards/widget-edit-dialog/widget-edit-dialog.component.ts b/frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.ts
similarity index 90%
rename from frontend/src/app/components/dashboards/widget-edit-dialog/widget-edit-dialog.component.ts
rename to frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.ts
index 1ed9106f3..d215601c6 100644
--- a/frontend/src/app/components/dashboards/widget-edit-dialog/widget-edit-dialog.component.ts
+++ b/frontend/src/app/components/dashboards/panel-edit-dialog/panel-edit-dialog.component.ts
@@ -15,9 +15,9 @@ import { DashboardsService } from 'src/app/services/dashboards.service';
 import { SavedQueriesService } from 'src/app/services/saved-queries.service';
 
 @Component({
-	selector: 'app-widget-edit-dialog',
-	templateUrl: './widget-edit-dialog.component.html',
-	styleUrls: ['./widget-edit-dialog.component.css'],
+	selector: 'app-panel-edit-dialog',
+	templateUrl: './panel-edit-dialog.component.html',
+	styleUrls: ['./panel-edit-dialog.component.css'],
 	imports: [
 		CommonModule,
 		ReactiveFormsModule,
@@ -30,7 +30,7 @@ import { SavedQueriesService } from 'src/app/services/saved-queries.service';
 		MatSelectModule,
 	],
 })
-export class WidgetEditDialogComponent implements OnInit {
+export class PanelEditDialogComponent implements OnInit {
 	protected submitting = signal(false);
 	protected form!: FormGroup;
 	protected isEdit: boolean;
@@ -40,7 +40,7 @@ export class WidgetEditDialogComponent implements OnInit {
 	constructor(
 		@Inject(MAT_DIALOG_DATA)
 		public data: { connectionId: string; dashboardId: string; widget: DashboardWidget | null },
-		public dialogRef: MatDialogRef<WidgetEditDialogComponent>,
+		public dialogRef: MatDialogRef<PanelEditDialogComponent>,
 		private _dashboards: DashboardsService,
 		private _savedQueries: SavedQueriesService,
 		private _router: Router,
@@ -107,6 +107,6 @@ export class WidgetEditDialogComponent implements OnInit {
 
 	navigateToCreateQuery(): void {
 		this.dialogRef.close();
-		this._router.navigate(['/charts', this.data.connectionId, 'new']);
+		this._router.navigate(['/panels', this.data.connectionId, 'new']);
 	}
 }
diff --git a/frontend/src/app/components/dashboards/widget-renderers/chart-widget/chart-widget.component.css b/frontend/src/app/components/dashboards/panel-renderers/chart-panel/chart-panel.component.css
similarity index 100%
rename from frontend/src/app/components/dashboards/widget-renderers/chart-widget/chart-widget.component.css
rename to frontend/src/app/components/dashboards/panel-renderers/chart-panel/chart-panel.component.css
diff --git a/frontend/src/app/components/dashboards/widget-renderers/chart-widget/chart-widget.component.html b/frontend/src/app/components/dashboards/panel-renderers/chart-panel/chart-panel.component.html
similarity index 100%
rename from frontend/src/app/components/dashboards/widget-renderers/chart-widget/chart-widget.component.html
rename to frontend/src/app/components/dashboards/panel-renderers/chart-panel/chart-panel.component.html
diff --git a/frontend/src/app/components/dashboards/widget-renderers/chart-widget/chart-widget.component.spec.ts b/frontend/src/app/components/dashboards/panel-renderers/chart-panel/chart-panel.component.spec.ts
similarity index 84%
rename from frontend/src/app/components/dashboards/widget-renderers/chart-widget/chart-widget.component.spec.ts
rename to frontend/src/app/components/dashboards/panel-renderers/chart-panel/chart-panel.component.spec.ts
index 676a80ae0..7c5d4652c 100644
--- a/frontend/src/app/components/dashboards/widget-renderers/chart-widget/chart-widget.component.spec.ts
+++ b/frontend/src/app/components/dashboards/panel-renderers/chart-panel/chart-panel.component.spec.ts
@@ -3,19 +3,19 @@ import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
-import { ChartWidgetComponent } from './chart-widget.component';
+import { ChartPanelComponent } from './chart-panel.component';
 
-describe('ChartWidgetComponent', () => {
-	let component: ChartWidgetComponent;
-	let fixture: ComponentFixture<ChartWidgetComponent>;
+describe('ChartPanelComponent', () => {
+	let component: ChartPanelComponent;
+	let fixture: ComponentFixture<ChartPanelComponent>;
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
-			imports: [ChartWidgetComponent, BrowserAnimationsModule],
+			imports: [ChartPanelComponent, BrowserAnimationsModule],
 			providers: [provideHttpClient(), provideHttpClientTesting(), provideCharts(withDefaultRegisterables())],
 		}).compileComponents();
 
-		fixture = TestBed.createComponent(ChartWidgetComponent);
+		fixture = TestBed.createComponent(ChartPanelComponent);
 		component = fixture.componentInstance;
 		component.widget = {
 			id: 'test-id',
diff --git a/frontend/src/app/components/dashboards/widget-renderers/chart-widget/chart-widget.component.ts b/frontend/src/app/components/dashboards/panel-renderers/chart-panel/chart-panel.component.ts
similarity index 94%
rename from frontend/src/app/components/dashboards/widget-renderers/chart-widget/chart-widget.component.ts
rename to frontend/src/app/components/dashboards/panel-renderers/chart-panel/chart-panel.component.ts
index 92da12189..7937d77be 100644
--- a/frontend/src/app/components/dashboards/widget-renderers/chart-widget/chart-widget.component.ts
+++ b/frontend/src/app/components/dashboards/panel-renderers/chart-panel/chart-panel.component.ts
@@ -14,12 +14,12 @@ import { DashboardWidget } from 'src/app/models/dashboard';
 import { ChartWidgetOptions, SavedQuery } from 'src/app/models/saved-query';
 
 @Component({
-	selector: 'app-chart-widget',
-	templateUrl: './chart-widget.component.html',
-	styleUrls: ['./chart-widget.component.css'],
+	selector: 'app-chart-panel',
+	templateUrl: './chart-panel.component.html',
+	styleUrls: ['./chart-panel.component.css'],
 	imports: [CommonModule, BaseChartDirective, MatProgressSpinnerModule],
 })
-export class ChartWidgetComponent implements OnInit {
+export class ChartPanelComponent implements OnInit {
 	@Input({ required: true }) widget!: DashboardWidget;
 	@Input({ required: true }) connectionId!: string;
 	@Input() preloadedQuery: SavedQuery | null = null;
diff --git a/frontend/src/app/components/dashboards/widget-renderers/counter-widget/counter-widget.component.css b/frontend/src/app/components/dashboards/panel-renderers/counter-panel/counter-panel.component.css
similarity index 100%
rename from frontend/src/app/components/dashboards/widget-renderers/counter-widget/counter-widget.component.css
rename to frontend/src/app/components/dashboards/panel-renderers/counter-panel/counter-panel.component.css
diff --git a/frontend/src/app/components/dashboards/widget-renderers/counter-widget/counter-widget.component.html b/frontend/src/app/components/dashboards/panel-renderers/counter-panel/counter-panel.component.html
similarity index 100%
rename from frontend/src/app/components/dashboards/widget-renderers/counter-widget/counter-widget.component.html
rename to frontend/src/app/components/dashboards/panel-renderers/counter-panel/counter-panel.component.html
diff --git a/frontend/src/app/components/dashboards/widget-renderers/counter-widget/counter-widget.component.spec.ts b/frontend/src/app/components/dashboards/panel-renderers/counter-panel/counter-panel.component.spec.ts
similarity index 81%
rename from frontend/src/app/components/dashboards/widget-renderers/counter-widget/counter-widget.component.spec.ts
rename to frontend/src/app/components/dashboards/panel-renderers/counter-panel/counter-panel.component.spec.ts
index 36807049c..96e19c423 100644
--- a/frontend/src/app/components/dashboards/widget-renderers/counter-widget/counter-widget.component.spec.ts
+++ b/frontend/src/app/components/dashboards/panel-renderers/counter-panel/counter-panel.component.spec.ts
@@ -2,19 +2,19 @@ import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { CounterWidgetComponent } from './counter-widget.component';
+import { CounterPanelComponent } from './counter-panel.component';
 
-describe('CounterWidgetComponent', () => {
-	let component: CounterWidgetComponent;
-	let fixture: ComponentFixture<CounterWidgetComponent>;
+describe('CounterPanelComponent', () => {
+	let component: CounterPanelComponent;
+	let fixture: ComponentFixture<CounterPanelComponent>;
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
-			imports: [CounterWidgetComponent, BrowserAnimationsModule],
+			imports: [CounterPanelComponent, BrowserAnimationsModule],
 			providers: [provideHttpClient(), provideHttpClientTesting()],
 		}).compileComponents();
 
-		fixture = TestBed.createComponent(CounterWidgetComponent);
+		fixture = TestBed.createComponent(CounterPanelComponent);
 		component = fixture.componentInstance;
 		component.widget = {
 			id: 'test-id',
diff --git a/frontend/src/app/components/dashboards/widget-renderers/counter-widget/counter-widget.component.ts b/frontend/src/app/components/dashboards/panel-renderers/counter-panel/counter-panel.component.ts
similarity index 92%
rename from frontend/src/app/components/dashboards/widget-renderers/counter-widget/counter-widget.component.ts
rename to frontend/src/app/components/dashboards/panel-renderers/counter-panel/counter-panel.component.ts
index e7107c03e..df28c1c01 100644
--- a/frontend/src/app/components/dashboards/widget-renderers/counter-widget/counter-widget.component.ts
+++ b/frontend/src/app/components/dashboards/panel-renderers/counter-panel/counter-panel.component.ts
@@ -5,12 +5,12 @@ import { DashboardWidget } from 'src/app/models/dashboard';
 import { SavedQuery } from 'src/app/models/saved-query';
 
 @Component({
-	selector: 'app-counter-widget',
-	templateUrl: './counter-widget.component.html',
-	styleUrls: ['./counter-widget.component.css'],
+	selector: 'app-counter-panel',
+	templateUrl: './counter-panel.component.html',
+	styleUrls: ['./counter-panel.component.css'],
 	imports: [CommonModule, MatProgressSpinnerModule],
 })
-export class CounterWidgetComponent implements OnInit {
+export class CounterPanelComponent implements OnInit {
 	@Input({ required: true }) widget!: DashboardWidget;
 	@Input({ required: true }) connectionId!: string;
 	@Input() preloadedQuery: SavedQuery | null = null;
diff --git a/frontend/src/app/components/dashboards/widget-renderers/dashboard-widget/dashboard-widget.component.css b/frontend/src/app/components/dashboards/panel-renderers/dashboard-panel/dashboard-panel.component.css
similarity index 90%
rename from frontend/src/app/components/dashboards/widget-renderers/dashboard-widget/dashboard-widget.component.css
rename to frontend/src/app/components/dashboards/panel-renderers/dashboard-panel/dashboard-panel.component.css
index 2408256f2..7f17a6816 100644
--- a/frontend/src/app/components/dashboards/widget-renderers/dashboard-widget/dashboard-widget.component.css
+++ b/frontend/src/app/components/dashboards/panel-renderers/dashboard-panel/dashboard-panel.component.css
@@ -4,14 +4,14 @@
 	height: 100%;
 }
 
-.widget-loading {
+.panel-loading {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	height: 100%;
 }
 
-.widget-error {
+.panel-error {
 	display: flex;
 	align-items: center;
 	justify-content: center;
diff --git a/frontend/src/app/components/dashboards/widget-renderers/dashboard-widget/dashboard-widget.component.html b/frontend/src/app/components/dashboards/panel-renderers/dashboard-panel/dashboard-panel.component.html
similarity index 70%
rename from frontend/src/app/components/dashboards/widget-renderers/dashboard-widget/dashboard-widget.component.html
rename to frontend/src/app/components/dashboards/panel-renderers/dashboard-panel/dashboard-panel.component.html
index 6046b88f8..cd94183fd 100644
--- a/frontend/src/app/components/dashboards/widget-renderers/dashboard-widget/dashboard-widget.component.html
+++ b/frontend/src/app/components/dashboards/panel-renderers/dashboard-panel/dashboard-panel.component.html
@@ -1,46 +1,46 @@
 @if (loading()) {
-    <div class="widget-loading">
+    <div class="panel-loading">
         <mat-spinner diameter="32"></mat-spinner>
     </div>
 } @else if (error()) {
-    <div class="widget-error">
+    <div class="panel-error">
         <span>{{ error() }}</span>
     </div>
 } @else if (savedQuery()) {
     @switch (savedQuery()!.widget_type) {
             @case ('chart') {
-                <app-chart-widget
+                <app-chart-panel
                     [widget]="widget"
                     [connectionId]="connectionId"
                     [preloadedQuery]="savedQuery()!"
                     [preloadedData]="queryData()">
-                </app-chart-widget>
+                </app-chart-panel>
             }
             @case ('table') {
-                <app-table-widget
+                <app-table-panel
                     [widget]="widget"
                     [connectionId]="connectionId"
                     [preloadedQuery]="savedQuery()!"
                     [preloadedData]="queryData()">
-                </app-table-widget>
+                </app-table-panel>
             }
             @case ('counter') {
-                <app-counter-widget
+                <app-counter-panel
                     [widget]="widget"
                     [connectionId]="connectionId"
                     [preloadedQuery]="savedQuery()!"
                     [preloadedData]="queryData()">
-                </app-counter-widget>
+                </app-counter-panel>
             }
             @case ('text') {
-                <app-text-widget
+                <app-text-panel
                     [widget]="widget"
                     [preloadedQuery]="savedQuery()!">
-                </app-text-widget>
+                </app-text-panel>
             }
             @default {
-                <div class="widget-error">
-                    <span>Unknown widget type: {{ savedQuery()!.widget_type }}</span>
+                <div class="panel-error">
+                    <span>Unknown panel type: {{ savedQuery()!.widget_type }}</span>
                 </div>
             }
         }
diff --git a/frontend/src/app/components/dashboards/widget-renderers/dashboard-widget/dashboard-widget.component.ts b/frontend/src/app/components/dashboards/panel-renderers/dashboard-panel/dashboard-panel.component.ts
similarity index 72%
rename from frontend/src/app/components/dashboards/widget-renderers/dashboard-widget/dashboard-widget.component.ts
rename to frontend/src/app/components/dashboards/panel-renderers/dashboard-panel/dashboard-panel.component.ts
index b41b6a23c..3553d354d 100644
--- a/frontend/src/app/components/dashboards/widget-renderers/dashboard-widget/dashboard-widget.component.ts
+++ b/frontend/src/app/components/dashboards/panel-renderers/dashboard-panel/dashboard-panel.component.ts
@@ -5,25 +5,25 @@ import { firstValueFrom } from 'rxjs';
 import { DashboardWidget } from 'src/app/models/dashboard';
 import { SavedQuery } from 'src/app/models/saved-query';
 import { SavedQueriesService } from 'src/app/services/saved-queries.service';
-import { ChartWidgetComponent } from '../chart-widget/chart-widget.component';
-import { CounterWidgetComponent } from '../counter-widget/counter-widget.component';
-import { TableWidgetComponent } from '../table-widget/table-widget.component';
-import { TextWidgetComponent } from '../text-widget/text-widget.component';
+import { ChartPanelComponent } from '../chart-panel/chart-panel.component';
+import { CounterPanelComponent } from '../counter-panel/counter-panel.component';
+import { TablePanelComponent } from '../table-panel/table-panel.component';
+import { TextPanelComponent } from '../text-panel/text-panel.component';
 
 @Component({
-	selector: 'app-dashboard-widget',
-	templateUrl: './dashboard-widget.component.html',
-	styleUrls: ['./dashboard-widget.component.css'],
+	selector: 'app-dashboard-panel',
+	templateUrl: './dashboard-panel.component.html',
+	styleUrls: ['./dashboard-panel.component.css'],
 	imports: [
 		CommonModule,
 		MatProgressSpinnerModule,
-		ChartWidgetComponent,
-		CounterWidgetComponent,
-		TableWidgetComponent,
-		TextWidgetComponent,
+		ChartPanelComponent,
+		CounterPanelComponent,
+		TablePanelComponent,
+		TextPanelComponent,
 	],
 })
-export class DashboardWidgetComponent {
+export class DashboardPanelComponent {
 	@Input({ required: true }) widget!: DashboardWidget;
 	@Input({ required: true }) connectionId!: string;
 
@@ -42,7 +42,7 @@ export class DashboardWidgetComponent {
 				this._loadData();
 			} else {
 				this.loading.set(false);
-				this.error.set('No query linked to this widget');
+				this.error.set('No query linked to this panel');
 			}
 		});
 	}
@@ -50,7 +50,7 @@ export class DashboardWidgetComponent {
 	private async _loadData(): Promise<void> {
 		if (!this.widget.query_id) {
 			this.loading.set(false);
-			this.error.set('No query linked to this widget');
+			this.error.set('No query linked to this panel');
 			return;
 		}
 
diff --git a/frontend/src/app/components/dashboards/widget-renderers/table-widget/table-widget.component.css b/frontend/src/app/components/dashboards/panel-renderers/table-panel/table-panel.component.css
similarity index 100%
rename from frontend/src/app/components/dashboards/widget-renderers/table-widget/table-widget.component.css
rename to frontend/src/app/components/dashboards/panel-renderers/table-panel/table-panel.component.css
diff --git a/frontend/src/app/components/dashboards/widget-renderers/table-widget/table-widget.component.html b/frontend/src/app/components/dashboards/panel-renderers/table-panel/table-panel.component.html
similarity index 100%
rename from frontend/src/app/components/dashboards/widget-renderers/table-widget/table-widget.component.html
rename to frontend/src/app/components/dashboards/panel-renderers/table-panel/table-panel.component.html
diff --git a/frontend/src/app/components/dashboards/widget-renderers/table-widget/table-widget.component.spec.ts b/frontend/src/app/components/dashboards/panel-renderers/table-panel/table-panel.component.spec.ts
similarity index 83%
rename from frontend/src/app/components/dashboards/widget-renderers/table-widget/table-widget.component.spec.ts
rename to frontend/src/app/components/dashboards/panel-renderers/table-panel/table-panel.component.spec.ts
index 59f9626f3..3d41328f5 100644
--- a/frontend/src/app/components/dashboards/widget-renderers/table-widget/table-widget.component.spec.ts
+++ b/frontend/src/app/components/dashboards/panel-renderers/table-panel/table-panel.component.spec.ts
@@ -2,19 +2,19 @@ import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { TableWidgetComponent } from './table-widget.component';
+import { TablePanelComponent } from './table-panel.component';
 
-describe('TableWidgetComponent', () => {
-	let component: TableWidgetComponent;
-	let fixture: ComponentFixture<TableWidgetComponent>;
+describe('TablePanelComponent', () => {
+	let component: TablePanelComponent;
+	let fixture: ComponentFixture<TablePanelComponent>;
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
-			imports: [TableWidgetComponent, BrowserAnimationsModule],
+			imports: [TablePanelComponent, BrowserAnimationsModule],
 			providers: [provideHttpClient(), provideHttpClientTesting()],
 		}).compileComponents();
 
-		fixture = TestBed.createComponent(TableWidgetComponent);
+		fixture = TestBed.createComponent(TablePanelComponent);
 		component = fixture.componentInstance;
 		component.widget = {
 			id: 'test-id',
diff --git a/frontend/src/app/components/dashboards/widget-renderers/table-widget/table-widget.component.ts b/frontend/src/app/components/dashboards/panel-renderers/table-panel/table-panel.component.ts
similarity index 84%
rename from frontend/src/app/components/dashboards/widget-renderers/table-widget/table-widget.component.ts
rename to frontend/src/app/components/dashboards/panel-renderers/table-panel/table-panel.component.ts
index 77e624c66..90fe63cf3 100644
--- a/frontend/src/app/components/dashboards/widget-renderers/table-widget/table-widget.component.ts
+++ b/frontend/src/app/components/dashboards/panel-renderers/table-panel/table-panel.component.ts
@@ -6,12 +6,12 @@ import { DashboardWidget } from 'src/app/models/dashboard';
 import { SavedQuery } from 'src/app/models/saved-query';
 
 @Component({
-	selector: 'app-table-widget',
-	templateUrl: './table-widget.component.html',
-	styleUrls: ['./table-widget.component.css'],
+	selector: 'app-table-panel',
+	templateUrl: './table-panel.component.html',
+	styleUrls: ['./table-panel.component.css'],
 	imports: [CommonModule, MatTableModule, MatProgressSpinnerModule],
 })
-export class TableWidgetComponent implements OnInit {
+export class TablePanelComponent implements OnInit {
 	@Input({ required: true }) widget!: DashboardWidget;
 	@Input({ required: true }) connectionId!: string;
 	@Input() preloadedQuery: SavedQuery | null = null;
diff --git a/frontend/src/app/components/dashboards/widget-renderers/text-widget/text-widget.component.css b/frontend/src/app/components/dashboards/panel-renderers/text-panel/text-panel.component.css
similarity index 100%
rename from frontend/src/app/components/dashboards/widget-renderers/text-widget/text-widget.component.css
rename to frontend/src/app/components/dashboards/panel-renderers/text-panel/text-panel.component.css
diff --git a/frontend/src/app/components/dashboards/widget-renderers/text-widget/text-widget.component.html b/frontend/src/app/components/dashboards/panel-renderers/text-panel/text-panel.component.html
similarity index 100%
rename from frontend/src/app/components/dashboards/widget-renderers/text-widget/text-widget.component.html
rename to frontend/src/app/components/dashboards/panel-renderers/text-panel/text-panel.component.html
diff --git a/frontend/src/app/components/dashboards/widget-renderers/text-widget/text-widget.component.spec.ts b/frontend/src/app/components/dashboards/panel-renderers/text-panel/text-panel.component.spec.ts
similarity index 76%
rename from frontend/src/app/components/dashboards/widget-renderers/text-widget/text-widget.component.spec.ts
rename to frontend/src/app/components/dashboards/panel-renderers/text-panel/text-panel.component.spec.ts
index b25658f12..744eaceca 100644
--- a/frontend/src/app/components/dashboards/widget-renderers/text-widget/text-widget.component.spec.ts
+++ b/frontend/src/app/components/dashboards/panel-renderers/text-panel/text-panel.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MarkdownModule } from 'ngx-markdown';
-import { TextWidgetComponent } from './text-widget.component';
+import { TextPanelComponent } from './text-panel.component';
 
-describe('TextWidgetComponent', () => {
-	let component: TextWidgetComponent;
-	let fixture: ComponentFixture<TextWidgetComponent>;
+describe('TextPanelComponent', () => {
+	let component: TextPanelComponent;
+	let fixture: ComponentFixture<TextPanelComponent>;
 
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
-			imports: [TextWidgetComponent, BrowserAnimationsModule, MarkdownModule.forRoot()],
+			imports: [TextPanelComponent, BrowserAnimationsModule, MarkdownModule.forRoot()],
 		}).compileComponents();
 
-		fixture = TestBed.createComponent(TextWidgetComponent);
+		fixture = TestBed.createComponent(TextPanelComponent);
 		component = fixture.componentInstance;
 		component.widget = {
 			id: 'test-id',
diff --git a/frontend/src/app/components/dashboards/widget-renderers/text-widget/text-widget.component.ts b/frontend/src/app/components/dashboards/panel-renderers/text-panel/text-panel.component.ts
similarity index 80%
rename from frontend/src/app/components/dashboards/widget-renderers/text-widget/text-widget.component.ts
rename to frontend/src/app/components/dashboards/panel-renderers/text-panel/text-panel.component.ts
index d0e1cb1a9..43f0679de 100644
--- a/frontend/src/app/components/dashboards/widget-renderers/text-widget/text-widget.component.ts
+++ b/frontend/src/app/components/dashboards/panel-renderers/text-panel/text-panel.component.ts
@@ -5,12 +5,12 @@ import { DashboardWidget } from 'src/app/models/dashboard';
 import { SavedQuery } from 'src/app/models/saved-query';
 
 @Component({
-	selector: 'app-text-widget',
-	templateUrl: './text-widget.component.html',
-	styleUrls: ['./text-widget.component.css'],
+	selector: 'app-text-panel',
+	templateUrl: './text-panel.component.html',
+	styleUrls: ['./text-panel.component.css'],
 	imports: [CommonModule, MarkdownModule],
 })
-export class TextWidgetComponent {
+export class TextPanelComponent {
 	@Input({ required: true }) widget!: DashboardWidget;
 	@Input() preloadedQuery: SavedQuery | null = null;