diff --git a/frontend/src/app/app.component.css b/frontend/src/app/app.component.css
index b8d6362ef..6c03ef7e0 100644
--- a/frontend/src/app/app.component.css
+++ b/frontend/src/app/app.component.css
@@ -256,18 +256,18 @@
     width: 12px;
 } */
 
-.connection-name {
+/* .connection-name {
 	position: absolute;
 	top: 6px;
 	left: 8px;
 	max-width: calc((100vw - 980px) / 2);
 	overflow: hidden;
 	text-overflow: ellipsis;
-}
+} */
 
-.tab-icon {
+/* .tab-icon {
 	margin-right: 8px;
-}
+} */
 
 .main-menu-content {
 	flex-grow: 1;
@@ -288,11 +288,19 @@
 }
 
 .content {
+	--top-margin: 4em;
+
 	display: grid;
 	grid-template-rows: 0 100%;
 	height: 100%;
 }
 
+@media (prefers-color-scheme: dark) {
+	.main-menu-content_interior .content {
+		background-color: #212121;
+	}
+}
+
 .helpContainer {
 	position: fixed;
 	right: 16px;
diff --git a/frontend/src/app/components/audit/audit.component.css b/frontend/src/app/components/audit/audit.component.css
index 4e5bf39de..b638496bb 100644
--- a/frontend/src/app/components/audit/audit.component.css
+++ b/frontend/src/app/components/audit/audit.component.css
@@ -3,6 +3,7 @@
     flex-direction: column;
     align-items: stretch;
     margin: 0 auto;
+    height: 100%;
     width: clamp(300px, 75vw, 1000px);
 }
 
@@ -105,7 +106,8 @@ th.mat-header-cell, td.mat-cell {
 }
 
 .audit-banner {
-    margin-top: 60px;
+    margin: -60px calc((100vw - clamp(300px, 75vw, 1000px)) / -2) 0;
+    width: 100vw;
 }
 
 .hidden {
diff --git a/frontend/src/app/components/company-member-invitation/company-member-invitation.component.css b/frontend/src/app/components/company-member-invitation/company-member-invitation.component.css
index d544a8533..e67c1974c 100644
--- a/frontend/src/app/components/company-member-invitation/company-member-invitation.component.css
+++ b/frontend/src/app/components/company-member-invitation/company-member-invitation.component.css
@@ -1,3 +1,11 @@
+:host app-alert:not(:empty) {
+    --alert-margin: 24px;
+
+    position: absolute;
+    top: var(--mat-toolbar-standard-height);
+    width: calc(100% - 48px);
+}
+
 .wrapper {
     display: flex;
     flex-direction: column;
diff --git a/frontend/src/app/components/company/company.component.css b/frontend/src/app/components/company/company.component.css
index ea18f5bb7..7ab24b864 100644
--- a/frontend/src/app/components/company/company.component.css
+++ b/frontend/src/app/components/company/company.component.css
@@ -1,5 +1,9 @@
+:host app-alert:not(:empty) {
+    --alert-margin: 24px;
+}
+
 .companyPage {
-    margin: 3em auto;
+    margin: var(--top-margin) auto;
     padding: 0 clamp(200px, 20vw, 300px);
 }
 
diff --git a/frontend/src/app/components/company/company.component.ts b/frontend/src/app/components/company/company.component.ts
index 3e40c2352..0a7cba3a3 100644
--- a/frontend/src/app/components/company/company.component.ts
+++ b/frontend/src/app/components/company/company.component.ts
@@ -55,7 +55,6 @@ import { orderBy } from "lodash-es";
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class CompanyComponent {
-
   CompanyMemberRole = CompanyMemberRole;
   public isSaas = (environment as any).saas;
   public company: Company = null;
diff --git a/frontend/src/app/components/connect-db/connect-db.component.css b/frontend/src/app/components/connect-db/connect-db.component.css
index 0e8d0562f..d0ce93990 100644
--- a/frontend/src/app/components/connect-db/connect-db.component.css
+++ b/frontend/src/app/components/connect-db/connect-db.component.css
@@ -1,6 +1,10 @@
+:host app-alert:not(:empty) {
+    --alert-margin: 24px;
+}
+
 .connectPage {
-    padding-top: 16px;
-    padding-bottom: 20px;
+    margin-top: var(--top-margin);
+    margin-bottom: 4em;
 }
 
 .form {
@@ -82,6 +86,10 @@
     margin-bottom: 0;
 }
 
+.connectForm__ipAlert {
+    --alert-margin: 0; 
+}
+
 .connectForm__title {
     grid-column: 1 / span 3;
 }
diff --git a/frontend/src/app/components/connect-db/connect-db.component.html b/frontend/src/app/components/connect-db/connect-db.component.html
index 1ebc60b40..09ccab159 100644
--- a/frontend/src/app/components/connect-db/connect-db.component.html
+++ b/frontend/src/app/components/connect-db/connect-db.component.html
@@ -60,7 +60,7 @@ <h1 class="mat-h1 connectForm__fullLine">
             </div>
 
             <ng-template #warningAlert>
-                <app-alert [alert]="warning">
+                <app-alert [alert]="warning" class="connectForm__ipAlert">
                     <div class="mat-body-1" style="margin-bottom: 0">
                         Please make sure our servers are able to access your database. <br/> Rocketadmin uses the IP address
                         <app-ip-address-button ip="18.221.81.73"></app-ip-address-button>
diff --git a/frontend/src/app/components/connection-settings/connection-settings.component.css b/frontend/src/app/components/connection-settings/connection-settings.component.css
index 3468578f1..ab3cdcad6 100644
--- a/frontend/src/app/components/connection-settings/connection-settings.component.css
+++ b/frontend/src/app/components/connection-settings/connection-settings.component.css
@@ -1,13 +1,14 @@
-.zapier-page {
-    padding: 32px max(calc(50vw - 325px), 10%);
+:host app-alert:not(:empty) {
+    --alert-margin: 24px;
 }
 
 .settings-page {
+    height: 100%;
+    margin: var(--top-margin) 0;
     padding: 0 max(calc(50vw - 325px), 10%);
 }
 
 .mat-h1 {
-    margin-top: 2em !important;
     margin-bottom: 1.5em !important;
 }
 
@@ -163,8 +164,9 @@
     margin-left: 20px;
 }
 
-.settings-banner ::ng-deep .banner-wrapper {
-    margin-top: 60px;
+.settings-banner {
+    margin: -124px calc(max(calc(50vw - 325px), 10%) * -1) 0;
+    width: 100vw;
 }
 
 .error-details {
diff --git a/frontend/src/app/components/connections-list/connections-list.component.css b/frontend/src/app/components/connections-list/connections-list.component.css
index d1a03e4f3..bc3253c96 100644
--- a/frontend/src/app/components/connections-list/connections-list.component.css
+++ b/frontend/src/app/components/connections-list/connections-list.component.css
@@ -1,3 +1,7 @@
+:host app-alert:not(:empty) {
+    --alert-margin: 24px;
+}
+
 .wrapper {
     display: flex;
     flex-direction: column;
diff --git a/frontend/src/app/components/connections-list/connections-list.component.ts b/frontend/src/app/components/connections-list/connections-list.component.ts
index f97fcd671..552fc0ea9 100644
--- a/frontend/src/app/components/connections-list/connections-list.component.ts
+++ b/frontend/src/app/components/connections-list/connections-list.component.ts
@@ -38,6 +38,11 @@ import { take } from 'rxjs/operators';
 })
 export class ConnectionsListComponent implements OnInit {
 
+  public testAlert = {
+    type: 'info' as const,
+    message: 'These connections are for demonstration purposes only. To create your own connections, please use the "Add Connection" button above.',
+  };
+
   public connections: Connection[] = null;
   // public testConnections: Connection[] = null;
   public titles: Object;
diff --git a/frontend/src/app/components/dashboard/dashboard.component.css b/frontend/src/app/components/dashboard/dashboard.component.css
index 55bfbcf55..1f50c8bf6 100644
--- a/frontend/src/app/components/dashboard/dashboard.component.css
+++ b/frontend/src/app/components/dashboard/dashboard.component.css
@@ -1,7 +1,3 @@
-:host {
-    margin-bottom: -60px;
-}
-
 .mat-sidenav-container {
     height: 100%;
     /* height: calc(100vh - 56px); */
@@ -91,17 +87,13 @@
 .alerts {
     display: flex;
     flex-direction: column;
+    gap: 8px;
     margin-top: 24px;
+    margin-bottom: 16px;
 }
 
-.server-alert {
-    display: block;
-    margin-top: 24px;
-}
-
-.alerts:empty,
-.server-alert:empty {
-    margin-top: 0;
+.alerts app-alert {
+    position: initial;
 }
 
 .error-details {
diff --git a/frontend/src/app/components/dashboard/dashboard.component.html b/frontend/src/app/components/dashboard/dashboard.component.html
index 4990d2469..7d9e0eae5 100644
--- a/frontend/src/app/components/dashboard/dashboard.component.html
+++ b/frontend/src/app/components/dashboard/dashboard.component.html
@@ -80,8 +80,8 @@ <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
         </mat-sidenav>
         <mat-sidenav-content class="table-preview">
             <div class="table-preview-content">
-                <app-alert class="server-alert"></app-alert>
                 <div class="alerts">
+                    <app-alert></app-alert>
                     <app-alert *ngIf="dataSource.alert_settingsInfo" [alert]="dataSource.alert_settingsInfo"></app-alert>
                     <app-alert *ngIf="dataSource.alert_primaryKeysInfo" [alert]="dataSource.alert_primaryKeysInfo"></app-alert>
                     <app-alert *ngIf="dataSource.alert_widgetsWarning" [alert]="dataSource.alert_widgetsWarning"></app-alert>
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css
index 81d1971f2..f8547187b 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css
@@ -1,3 +1,10 @@
+:host app-alert:not(:empty) {
+	--alert-margin: 0;
+
+	top: 0;
+	margin-bottom: 16px;
+}
+
 .drawer {
 	height: 100%;
 }
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css
index fa12f4272..fde57c8b3 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.css
@@ -1,8 +1,12 @@
+:host app-alert:not(:empty) {
+    --alert-margin: 24px;
+}
+
 .settings-page {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 36px 0 0;
+    margin: 2.5em 0 0;
 }
 
 .settings-page .mat-mdc-form-field-bottom-align::before {
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.ts b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.ts
index 7fe2cbe3f..9cc36b4e2 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.ts
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-settings/db-table-settings.component.ts
@@ -51,7 +51,6 @@ import { normalizeTableName } from 'src/app/lib/normalize';
   ]
 })
 export class DbTableSettingsComponent implements OnInit {
-
   public connectionID: string | null = null;
   public tableName: string | null = null;
   public displayTableName: string | null = null;
diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.css
index f88fa9c1b..501c07724 100644
--- a/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.css
+++ b/frontend/src/app/components/dashboard/db-table-view/db-table-widgets/db-table-widgets.component.css
@@ -1,3 +1,7 @@
+:host app-alert:not(:empty) {
+    --alert-margin: 24px;
+}
+
 .wrapper {
     min-width: 300px;
     margin: 0 auto 16px;
@@ -7,7 +11,7 @@
 .header {
     display: flex;
     justify-content: space-between;
-    margin: 36px 70px 24px 0;
+    margin: 2.5em 70px 24px 0;
 }
 
 .header-actions-box {
diff --git a/frontend/src/app/components/dashboard/db-tables-data-source.ts b/frontend/src/app/components/dashboard/db-tables-data-source.ts
index 87062b140..ea8852f62 100644
--- a/frontend/src/app/components/dashboard/db-tables-data-source.ts
+++ b/frontend/src/app/components/dashboard/db-tables-data-source.ts
@@ -298,6 +298,10 @@ export class TablesDataSource implements DataSource<Object> {
               type: AlertType.Info,
               message: 'Configure now to reveal advanced table functionality and features.',
               actions: [
+                // {
+                //   type: AlertActionType.Button,
+                //   caption: 'AI generate',
+                // },
                 {
                   type: AlertActionType.Link,
                   caption: 'Settings',
diff --git a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css
index 0cf057427..1f7401d7f 100644
--- a/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css
+++ b/frontend/src/app/components/db-table-row-edit/db-table-row-edit.component.css
@@ -1,6 +1,11 @@
+:host app-alert:not(:empty) {
+    --alert-margin: 24px;
+}
+
 .page {
 	display: flex;
 	height: 100%;
+	margin: 2.5em 0 16px;
 }
 
 .wrapper {
@@ -8,7 +13,6 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	padding: 36px 0 16px;
 	width: 100vw;
 }
 
diff --git a/frontend/src/app/components/email-change/email-change.component.css b/frontend/src/app/components/email-change/email-change.component.css
index 69ab34602..8ac2b23cf 100644
--- a/frontend/src/app/components/email-change/email-change.component.css
+++ b/frontend/src/app/components/email-change/email-change.component.css
@@ -1,3 +1,11 @@
+:host app-alert:not(:empty) {
+    --alert-margin: 24px;
+
+    position: absolute;
+    top: var(--mat-toolbar-standard-height);
+    width: calc(100% - 48px);
+}
+
 .wrapper {
     display: flex;
     flex-direction: column;
diff --git a/frontend/src/app/components/email-verification/email-verification.component.css b/frontend/src/app/components/email-verification/email-verification.component.css
index 0408196c0..500691aa6 100644
--- a/frontend/src/app/components/email-verification/email-verification.component.css
+++ b/frontend/src/app/components/email-verification/email-verification.component.css
@@ -1,3 +1,11 @@
+:host app-alert:not(:empty) {
+    --alert-margin: 24px;
+
+    position: absolute;
+    top: var(--mat-toolbar-standard-height);
+    width: calc(100% - 48px);
+}
+
 .loader {
     display: flex;
     align-items: center;
diff --git a/frontend/src/app/components/login/login.component.css b/frontend/src/app/components/login/login.component.css
index 4a5c61f92..793f9b777 100644
--- a/frontend/src/app/components/login/login.component.css
+++ b/frontend/src/app/components/login/login.component.css
@@ -1,3 +1,11 @@
+:host app-alert:not(:empty) {
+    --alert-margin: 24px;
+
+	position: absolute;
+    top: var(--mat-toolbar-standard-height);
+    width: calc(100% - 48px);
+}
+
 .wrapper {
 	height: calc(100vh - 56px);
 	padding: 16px;
diff --git a/frontend/src/app/components/password-change/password-change.component.css b/frontend/src/app/components/password-change/password-change.component.css
index ef0980cc3..352cad7e3 100644
--- a/frontend/src/app/components/password-change/password-change.component.css
+++ b/frontend/src/app/components/password-change/password-change.component.css
@@ -1,3 +1,7 @@
+:host app-alert:not(:empty) {
+    --alert-margin: 24px;
+}
+
 .wrapper {
     display: flex;
     flex-direction: column;
diff --git a/frontend/src/app/components/password-request/password-request.component.css b/frontend/src/app/components/password-request/password-request.component.css
index 9b5316a7a..cad2ee910 100644
--- a/frontend/src/app/components/password-request/password-request.component.css
+++ b/frontend/src/app/components/password-request/password-request.component.css
@@ -1,3 +1,11 @@
+:host app-alert:not(:empty) {
+    --alert-margin: 24px;
+
+    position: absolute;
+    top: var(--mat-toolbar-standard-height);
+    width: calc(100% - 48px);
+}
+
 .wrapper {
     display: flex;
     flex-direction: column;
diff --git a/frontend/src/app/components/password-request/password-request.component.ts b/frontend/src/app/components/password-request/password-request.component.ts
index a83310474..5370a2dd9 100644
--- a/frontend/src/app/components/password-request/password-request.component.ts
+++ b/frontend/src/app/components/password-request/password-request.component.ts
@@ -29,7 +29,6 @@ import { UserService } from 'src/app/services/user.service';
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class PasswordRequestComponent implements OnInit {
-
   public userEmail: string;
   public companyId: string;
   public submitting: boolean;
diff --git a/frontend/src/app/components/password-reset/password-reset.component.css b/frontend/src/app/components/password-reset/password-reset.component.css
index ee15ed067..fb191a75c 100644
--- a/frontend/src/app/components/password-reset/password-reset.component.css
+++ b/frontend/src/app/components/password-reset/password-reset.component.css
@@ -1,3 +1,11 @@
+:host app-alert:not(:empty) {
+    --alert-margin: 24px;
+
+    position: absolute;
+    top: var(--mat-toolbar-standard-height);
+    width: calc(100% - 48px);
+}
+
 .wrapper {
     display: flex;
     flex-direction: column;
diff --git a/frontend/src/app/components/payment-form/payment-form.component.css b/frontend/src/app/components/payment-form/payment-form.component.css
index e85bc7e80..65eae206f 100644
--- a/frontend/src/app/components/payment-form/payment-form.component.css
+++ b/frontend/src/app/components/payment-form/payment-form.component.css
@@ -1,5 +1,9 @@
+:host app-alert:not(:empty) {
+    --alert-margin: 24px;
+}
+
 .payment-page {
-    margin: 3em auto;
+    margin: var(--top-margin) auto;
     width: clamp(18.75em, 96%, 45em);
 }
 
diff --git a/frontend/src/app/components/payment-form/payment-form.component.ts b/frontend/src/app/components/payment-form/payment-form.component.ts
index 87e4fbb22..faab816d0 100644
--- a/frontend/src/app/components/payment-form/payment-form.component.ts
+++ b/frontend/src/app/components/payment-form/payment-form.component.ts
@@ -40,6 +40,11 @@ import plans from '../../consts/plans';
 })
 export class PaymentFormComponent implements OnInit {
 
+  public testAlert = {
+    type: 'info' as const,
+    message: 'This is a demo alert for the payment form.'
+  };
+
   @ViewChild(StripePaymentElementComponent)
   paymentElement: StripePaymentElementComponent;
 
diff --git a/frontend/src/app/components/registration/registration.component.css b/frontend/src/app/components/registration/registration.component.css
index 1079fb769..78492b1a8 100644
--- a/frontend/src/app/components/registration/registration.component.css
+++ b/frontend/src/app/components/registration/registration.component.css
@@ -1,3 +1,11 @@
+.register-form-box > app-alert {
+    display: block;
+    position: sticky;
+    top: calc(var(--mat-toolbar-standard-height) + 24px);
+    margin: 0 0 24px;
+    z-index: 2;
+}
+
 .wrapper {
 	display: grid;
 	grid-template-columns: auto 62.5%;
diff --git a/frontend/src/app/components/secrets/secrets.component.css b/frontend/src/app/components/secrets/secrets.component.css
index c62246a46..fe5ed3b60 100644
--- a/frontend/src/app/components/secrets/secrets.component.css
+++ b/frontend/src/app/components/secrets/secrets.component.css
@@ -1,5 +1,9 @@
+:host app-alert:not(:empty) {
+    --alert-margin: 24px;
+}
+
 .secrets-page {
-    margin: 3em auto;
+    margin: var(--top-margin) auto;
     padding: 0 clamp(200px, 20vw, 300px);
 }
 
diff --git a/frontend/src/app/components/skeletons/placeholder-company/placeholder-company.component.css b/frontend/src/app/components/skeletons/placeholder-company/placeholder-company.component.css
index 0d5df72dc..ab2225faa 100644
--- a/frontend/src/app/components/skeletons/placeholder-company/placeholder-company.component.css
+++ b/frontend/src/app/components/skeletons/placeholder-company/placeholder-company.component.css
@@ -1,5 +1,5 @@
 .wrapper {
-    margin: 3em auto;
+    margin: var(--top-margin) auto;
     padding: 0 clamp(200px, 20vw, 300px);
     width: 100%;
 }
diff --git a/frontend/src/app/components/ui-components/alert/alert.component.css b/frontend/src/app/components/ui-components/alert/alert.component.css
index 450b916d6..77a6d34e4 100644
--- a/frontend/src/app/components/ui-components/alert/alert.component.css
+++ b/frontend/src/app/components/ui-components/alert/alert.component.css
@@ -1,31 +1,31 @@
 :host {
     position: sticky;
-    top: var(--mat-toolbar-standard-height);
+    top: calc(var(--mat-toolbar-standard-height) + 24px);
+    display: block;
+    margin: var(--alert-margin);
     z-index: 2;
 }
 
 .alert {
     display: flex;
-    gap: 12px;
+    gap: 8px;
     background-color: var(--bg-color);
+    backdrop-filter: blur(4px);
+    border-top: 1px solid var(--alert-theme-color);
+    border-right: 1px solid var(--alert-theme-color);
+    border-bottom: 1px solid var(--alert-theme-color);
     border-left: 12px solid var(--alert-theme-color);
-    margin-bottom: 8px;
-    padding: 12px 16px;
+    border-radius: 4px;
+    padding: 12px 16px 12px 8px;
 }
 
 @media (prefers-color-scheme: dark) {
     .alert {
-        --bg-color: var(--alert-dark-theme-bg);
         border-top: 1px solid var(--alert-dark-theme-color);
         border-right: 1px solid var(--alert-dark-theme-color);
         border-bottom: 1px solid var(--alert-dark-theme-color);
         border-left: 12px solid var(--alert-dark-theme-color);
-    }
-}
-
-@media (prefers-color-scheme: light) {
-    .alert {
-        --bg-color: #F4F4F4;
+        backdrop-filter: blur(2px);
     }
 }
 
@@ -39,26 +39,25 @@
 .alert_error {
     --alert-theme-color: #B71C1C;
     --alert-dark-theme-color: #E53935;
-    --alert-dark-theme-bg: rgba(229, 57, 53, 0.15);
-    z-index: 2;
+    --bg-color: color-mix(in hsl, #B71C1C, transparent 95%);
 }
 
 .alert_warning {
-    --alert-theme-color: #FF6F00;
-    --alert-dark-theme-color: #FF6F00;
-    --alert-dark-theme-bg: rgba(255, 236, 179, 0.15);
+    --alert-theme-color: #F79008;
+    --alert-dark-theme-color: #F79008;
+    --bg-color: color-mix(in hsl, #F79008, transparent 95%);
 }
 
 .alert_info {
-    --alert-theme-color: #01579B;
-    --alert-dark-theme-color: #00BCD4;
-    --alert-dark-theme-bg: rgba(0, 188, 212, 0.15);
+    --alert-theme-color: #296EE9;
+    --alert-dark-theme-color: #296EE9;
+    --bg-color: color-mix(in hsl, #296EE9, transparent 95%);
 }
 
 .alert_success {
     --alert-theme-color: #1B5E20;
     --alert-dark-theme-color: #4CAF50;
-    --alert-dark-theme-bg: rgba(76, 175, 80, 0.15);
+    --bg-color: color-mix(in hsl, #1B5E20, transparent 95%);
 }
 
 .alert__icon {
@@ -66,10 +65,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--alert-theme-color);
     border-radius: 50%;
-    color: #fff;
-    font-size: 18px;
+    color: var(--alert-theme-color);
+    font-size: 24px;
     height: 36px;
     opacity: 0.9;
     width: 36px;
@@ -77,7 +75,7 @@
 
 @media (prefers-color-scheme: dark) {
     .alert__icon {
-        background: var(--alert-dark-theme-color);
+        color: var(--alert-dark-theme-color);
     }
 }
 
diff --git a/frontend/src/app/components/ui-components/banner/banner.component.css b/frontend/src/app/components/ui-components/banner/banner.component.css
index b0a317690..c23f14165 100644
--- a/frontend/src/app/components/ui-components/banner/banner.component.css
+++ b/frontend/src/app/components/ui-components/banner/banner.component.css
@@ -1,29 +1,64 @@
+:host {
+    display: block;
+    height: 100%;
+}
+
 .banner-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-image: url('../../../../assets/bg/banner.svg');
-    background-repeat: no-repeat;
-    /* background-position: left 125%, right -26%; */
-    background-size: cover;
-    height: 100%;
+    background-position: center, center;
+    background-repeat: no-repeat, no-repeat;
+    background-size: 100%, cover;
+    height: calc(100% + 1px);
+    margin-top: -1px;
+}
+
+@media (prefers-color-scheme: light) {
+    .banner-wrapper {
+        background-image:
+            linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)),
+            url('../../../../assets/bg/banner.svg');
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .banner-wrapper {
+        background-image:
+            linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
+            url('../../../../assets/bg/banner.svg');
+        background-color: #1a1a1a;
+    }
 }
 
 .banner_error {
     --alert-theme-color: #B71C1C;
+    --alert-dark-theme-color: #E53935;
+    --bg-color: color-mix(in hsl, #B71C1C, transparent 95%);
+}
 
-    z-index: 2;
+.banner_warning {
+    --alert-theme-color: #F79008;
+    --alert-dark-theme-color: #F79008;
+    --bg-color: color-mix(in hsl, #F79008, transparent 95%);
 }
+
 .banner_info {
-    --alert-theme-color: #01579B;
+    --alert-theme-color: #296EE9;
+    --alert-dark-theme-color: #296EE9;
+    --bg-color: color-mix(in hsl, #296EE9, transparent 95%);
 }
 
 .banner_success {
     --alert-theme-color: #1B5E20;
+    --alert-dark-theme-color: #4CAF50;
+    --bg-color: color-mix(in hsl, #1B5E20, transparent 95%);
 }
 
 .banner-box {
     background-color: var(--bg-color);
+    backdrop-filter: blur(2px);
+    border: 1px solid var(--alert-theme-color);
     border-left: 12px solid var(--alert-theme-color);
     border-radius: 4px;
     box-shadow:
@@ -34,18 +69,6 @@
     width: clamp(300px, 50vw, 450px);
 }
 
-@media (prefers-color-scheme: dark) {
-    .banner-box {
-        --bg-color: #292929;
-    }
-}
-
-@media (prefers-color-scheme: light) {
-    .banner-box {
-        --bg-color: #F4F4F4;
-    }
-}
-
 .banner-box ::ng-deep .error-actions {
     display: flex;
     justify-content: flex-end;
diff --git a/frontend/src/app/components/ui-components/breadcrumbs/breadcrumbs.component.ts b/frontend/src/app/components/ui-components/breadcrumbs/breadcrumbs.component.ts
index 2d537462f..78696d02e 100644
--- a/frontend/src/app/components/ui-components/breadcrumbs/breadcrumbs.component.ts
+++ b/frontend/src/app/components/ui-components/breadcrumbs/breadcrumbs.component.ts
@@ -9,6 +9,7 @@ import { MatButtonModule } from '@angular/material/button';
   selector: 'app-breadcrumbs',
   templateUrl: './breadcrumbs.component.html',
   styleUrls: ['./breadcrumbs.component.css'],
+  standalone: true,
   imports: [CommonModule, RouterModule, MatIconModule, MatButtonModule]
 })
 export class BreadcrumbsComponent implements OnInit {
diff --git a/frontend/src/app/components/upgrade/upgrade.component.css b/frontend/src/app/components/upgrade/upgrade.component.css
index 128998579..f03b677b5 100644
--- a/frontend/src/app/components/upgrade/upgrade.component.css
+++ b/frontend/src/app/components/upgrade/upgrade.component.css
@@ -1,18 +1,18 @@
-.upgrade-box {
+:host app-alert:not(:empty) {
+	--alert-margin: 24px;
+}
+
+/* .upgrade-box {
 	margin-top: 53px;
 }
 
 .upgrade-box__title {
 	margin-bottom: 20px;
 	text-align: center;
-}
-
-.page {
-	padding: 16px;
-}
+} */
 
 .plans {
-	margin: 2em auto;
+	margin: var(--top-margin) auto;
 	width: clamp(300px, 90%, 840px);
 }
 
diff --git a/frontend/src/app/components/upgrade/upgrade.component.html b/frontend/src/app/components/upgrade/upgrade.component.html
index 2b106f97d..96e6661a6 100644
--- a/frontend/src/app/components/upgrade/upgrade.component.html
+++ b/frontend/src/app/components/upgrade/upgrade.component.html
@@ -10,141 +10,137 @@ <h1 class='mat-h1 upgrade-box__title'>Manage plans</h1>
     </stripe-pricing-table>
 </div>-->
 
-<div class="page">
-    <div class="plans">
-        <div class="header">
-            <div>
-
+<div class="plans">
+    <div class="header">
+        <div></div>
+        <ng-container *ngFor="let plan of plans">
+            <div *ngIf="plan.key === 'title'; else planHeaderCard">
+                <h1 class="mat-h1">
+                    Manage plans
+                </h1>
             </div>
-            <ng-container *ngFor="let plan of plans">
-                <div *ngIf="plan.key === 'title'; else planHeaderCard">
-                    <h1 class="mat-h1">
-                        Manage plans
-                    </h1>
-                </div>
-                <ng-template #planHeaderCard>
-                    <div class="plan-header mat-elevation-z2" [ngClass]="{'plan-header_current': plan.key === currentPlan.key}">
-                        <div class="plan-header-name">
-                            <span class="mat-h3">{{plan.name}} </span>
-                            <mat-chip disabled *ngIf="plan.name === 'Team'" class="plan-badge">Recommended</mat-chip>
-                        </div>
-                        <div>
-                            <span class="price">${{ plan.price }}</span><span class="per">/monthly</span>
-                        </div>
-                        <span class="per users">
-                            <span *ngIf="plan.price !== 0">per each <strong class="users__value">10 users</strong></span>
-                            <span *ngIf="plan.price === 0">up to <strong class="users__value">3 users</strong></span>
-                        </span>
-                        <button mat-flat-button color="accent"
-                            *ngIf="plan.key === currentPlan.key; else activeButton"
-                            disabled class="current">
-                            Current
+            <ng-template #planHeaderCard>
+                <div class="plan-header mat-elevation-z2" [ngClass]="{'plan-header_current': plan.key === currentPlan.key}">
+                    <div class="plan-header-name">
+                        <span class="mat-h3">{{plan.name}} </span>
+                        <mat-chip disabled *ngIf="plan.name === 'Team'" class="plan-badge">Recommended</mat-chip>
+                    </div>
+                    <div>
+                        <span class="price">${{ plan.price }}</span><span class="per">/monthly</span>
+                    </div>
+                    <span class="per users">
+                        <span *ngIf="plan.price !== 0">per each <strong class="users__value">10 users</strong></span>
+                        <span *ngIf="plan.price === 0">up to <strong class="users__value">3 users</strong></span>
+                    </span>
+                    <button mat-flat-button color="accent"
+                        *ngIf="plan.key === currentPlan.key; else activeButton"
+                        disabled class="current">
+                        Current
+                    </button>
+                    <ng-template #activeButton>
+                        <button mat-flat-button color="accent" type="button"
+                            *ngIf="plan.price > currentPlan.price && hasPaymentMethod"
+                            [disabled]="submitting"
+                            (click)="changePlan(plan.key)">
+                            Upgrade
+                        </button>
+                        <button mat-button type="button"
+                            *ngIf="plan.price < currentPlan.price && hasPaymentMethod"
+                            [disabled]="submitting"
+                            (click)="changePlan(plan.key)">
+                            Downgrade
                         </button>
-                        <ng-template #activeButton>
-                            <button mat-flat-button color="accent" type="button"
-                                *ngIf="plan.price > currentPlan.price && hasPaymentMethod"
-                                [disabled]="submitting"
-                                (click)="changePlan(plan.key)">
-                                Upgrade
-                            </button>
-                            <button mat-button type="button"
-                                *ngIf="plan.price < currentPlan.price && hasPaymentMethod"
-                                [disabled]="submitting"
-                                (click)="changePlan(plan.key)">
-                                Downgrade
-                            </button>
 
-                            <a mat-flat-button color="accent"
-                                *ngIf="plan.price > currentPlan.price && !hasPaymentMethod"
-                                [disabled]="submitting"
-                                routerLink="/upgrade/payment"
-                                [queryParams]="{plan: plan.key}">
-                                Upgrade
-                            </a>
-                            <a mat-button
-                                *ngIf="plan.price < currentPlan.price && !hasPaymentMethod"
-                                [disabled]="submitting"
-                                routerLink="/upgrade/payment"
-                                [queryParams]="{plan: plan.key}">
-                                Downgrade
-                            </a>
-                        </ng-template>
-                    </div>
-                </ng-template>
-            </ng-container>
+                        <a mat-flat-button color="accent"
+                            *ngIf="plan.price > currentPlan.price && !hasPaymentMethod"
+                            [disabled]="submitting"
+                            routerLink="/upgrade/payment"
+                            [queryParams]="{plan: plan.key}">
+                            Upgrade
+                        </a>
+                        <a mat-button
+                            *ngIf="plan.price < currentPlan.price && !hasPaymentMethod"
+                            [disabled]="submitting"
+                            routerLink="/upgrade/payment"
+                            [queryParams]="{plan: plan.key}">
+                            Downgrade
+                        </a>
+                    </ng-template>
+                </div>
+            </ng-template>
+        </ng-container>
 
 
-        </div>
+    </div>
 
-        <h2 class="mat-header-2">Databases</h2>
+    <h2 class="mat-header-2">Databases</h2>
 
-        <table mat-table [dataSource]="databases" class="plansTable mat-elevation-z2">
-            <colgroup>
-                <col style="width: 28%">
-                <col style="width: 24%">
-                <col style="width: 24%">
-                <col style="width: 24%">
-            </colgroup>
-            <!--<ng-container matColumnDef="databases">
-                <th mat-header-cell *matHeaderCellDef>
-                    Database
-                </th>
-            </ng-container>
+    <table mat-table [dataSource]="databases" class="plansTable mat-elevation-z2">
+        <colgroup>
+            <col style="width: 28%">
+            <col style="width: 24%">
+            <col style="width: 24%">
+            <col style="width: 24%">
+        </colgroup>
+        <!--<ng-container matColumnDef="databases">
+            <th mat-header-cell *matHeaderCellDef>
+                Database
+            </th>
+        </ng-container>
 
-            <ng-container matColumnDef="users">
-                <th mat-header-cell *matHeaderCellDef [attr.colspan]="3" class="databases-header-cell__users">
-                    Users
-                </th>
-            </ng-container>-->
+        <ng-container matColumnDef="users">
+            <th mat-header-cell *matHeaderCellDef [attr.colspan]="3" class="databases-header-cell__users">
+                Users
+            </th>
+        </ng-container>-->
 
-            <ng-container *ngFor="let plan of plans" [matColumnDef]="plan.key">
-                <td mat-cell *matCellDef="let element"
-                    [ngClass]="{'cell_centered': plan.key !== 'title', cell_current: plan.key === currentPlan.key}">
-                    <span *ngIf="plan.key === 'title'">{{element[plan.key]}}</span>
-                    <mat-icon *ngIf="element[plan.key] === '∞'" class="person-icon" fontSet="material-icons-outlined">all_inclusive</mat-icon>
-                    <span *ngIf="element[plan.key] !== '∞' && plan.key !== 'title'">{{element[plan.key]}}<mat-icon class="person-icon">person</mat-icon></span>
-                </td>
-            </ng-container>
-            <!--<tr mat-header-row *matHeaderRowDef="['databases', 'users']"></tr>-->
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        </table>
+        <ng-container *ngFor="let plan of plans" [matColumnDef]="plan.key">
+            <td mat-cell *matCellDef="let element"
+                [ngClass]="{'cell_centered': plan.key !== 'title', cell_current: plan.key === currentPlan.key}">
+                <span *ngIf="plan.key === 'title'">{{element[plan.key]}}</span>
+                <mat-icon *ngIf="element[plan.key] === '∞'" class="person-icon" fontSet="material-icons-outlined">all_inclusive</mat-icon>
+                <span *ngIf="element[plan.key] !== '∞' && plan.key !== 'title'">{{element[plan.key]}}<mat-icon class="person-icon">person</mat-icon></span>
+            </td>
+        </ng-container>
+        <!--<tr mat-header-row *matHeaderRowDef="['databases', 'users']"></tr>-->
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
 
-        <h2 class="mat-header-2">Users</h2>
+    <h2 class="mat-header-2">Users</h2>
 
-        <table mat-table [dataSource]="users" class="plansTable mat-elevation-z2">
-            <colgroup>
-                <col style="width: 28%">
-                <col style="width: 24%">
-                <col style="width: 24%">
-                <col style="width: 24%">
-            </colgroup>
-            <ng-container *ngFor="let plan of plans" [matColumnDef]="plan.key">
-                <td mat-cell *matCellDef="let element"
-                    [ngClass]="{'cell_centered': plan.key !== 'title', cell_current: plan.key === currentPlan.key}">
-                    <span *ngIf="element[plan.key] === true; else nonBoolValue">✓</span>
-                    <ng-template #nonBoolValue>{{element[plan.key]}}</ng-template>
-                </td>
-            </ng-container>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        </table>
+    <table mat-table [dataSource]="users" class="plansTable mat-elevation-z2">
+        <colgroup>
+            <col style="width: 28%">
+            <col style="width: 24%">
+            <col style="width: 24%">
+            <col style="width: 24%">
+        </colgroup>
+        <ng-container *ngFor="let plan of plans" [matColumnDef]="plan.key">
+            <td mat-cell *matCellDef="let element"
+                [ngClass]="{'cell_centered': plan.key !== 'title', cell_current: plan.key === currentPlan.key}">
+                <span *ngIf="element[plan.key] === true; else nonBoolValue">✓</span>
+                <ng-template #nonBoolValue>{{element[plan.key]}}</ng-template>
+            </td>
+        </ng-container>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
 
-        <h2 class="mat-header-2">Features</h2>
+    <h2 class="mat-header-2">Features</h2>
 
-        <table mat-table [dataSource]="features" class="plansTable mat-elevation-z2">
-            <colgroup>
-                <col style="width: 28%">
-                <col style="width: 24%">
-                <col style="width: 24%">
-                <col style="width: 24%">
-            </colgroup>
-            <ng-container *ngFor="let plan of plans" [matColumnDef]="plan.key">
-                <td mat-cell *matCellDef="let element"
-                    [ngClass]="{'cell_centered': plan.key !== 'title', cell_current: plan.key === currentPlan.key}">
-                    <span *ngIf="element[plan.key] === true; else nonBoolValue">✓</span>
-                    <ng-template #nonBoolValue>{{element[plan.key]}}</ng-template>
-                </td>
-            </ng-container>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        </table>
-    </div>
+    <table mat-table [dataSource]="features" class="plansTable mat-elevation-z2">
+        <colgroup>
+            <col style="width: 28%">
+            <col style="width: 24%">
+            <col style="width: 24%">
+            <col style="width: 24%">
+        </colgroup>
+        <ng-container *ngFor="let plan of plans" [matColumnDef]="plan.key">
+            <td mat-cell *matCellDef="let element"
+                [ngClass]="{'cell_centered': plan.key !== 'title', cell_current: plan.key === currentPlan.key}">
+                <span *ngIf="element[plan.key] === true; else nonBoolValue">✓</span>
+                <ng-template #nonBoolValue>{{element[plan.key]}}</ng-template>
+            </td>
+        </ng-container>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/components/upgrade/upgrade.component.ts b/frontend/src/app/components/upgrade/upgrade.component.ts
index f94e259fb..981cd27d8 100644
--- a/frontend/src/app/components/upgrade/upgrade.component.ts
+++ b/frontend/src/app/components/upgrade/upgrade.component.ts
@@ -28,6 +28,10 @@ import plans from '../../consts/plans';
   styleUrls: ['./upgrade.component.css']
 })
 export class UpgradeComponent implements OnInit {
+  public testAlert = {
+    type: 'info' as const,
+    message: 'This is a demo alert for the upgrade page.'
+  };
   public currentPlan = {
     key: PlanKey.Free,
     price: 0,
diff --git a/frontend/src/app/components/user-settings/user-settings.component.css b/frontend/src/app/components/user-settings/user-settings.component.css
index c88f52132..7706a72f6 100644
--- a/frontend/src/app/components/user-settings/user-settings.component.css
+++ b/frontend/src/app/components/user-settings/user-settings.component.css
@@ -1,7 +1,11 @@
+:host app-alert:not(:empty) {
+    --alert-margin: 24px;
+}
+
 .page {
     display: flex;
     flex-direction: column;
-    margin: 3em auto;
+    margin: var(--top-margin) auto;
     max-width: 520px;
     min-width: 300px;
     width: 96%;
diff --git a/frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.css b/frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.css
index 51f8d0f71..44a869288 100644
--- a/frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.css
+++ b/frontend/src/app/components/users/permissions-add-dialog/permissions-add-dialog.component.css
@@ -10,8 +10,9 @@
 }
 
 .permissions-alert {
-    position: relative;
-    top: -8px;
+    --alert-margin: 0 0 20px;
+    
+    top: 0;
 }
 
 .permissions-form ::ng-deep .mat-mdc-dialog-content {
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 352c83157..94e915b48 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -98,4 +98,5 @@ body {
     display: block;
     background-color: rgba(0, 0, 0, 0.06);
     mix-blend-mode: difference;
-}
\ No newline at end of file
+}
+