From 91a66d564546db027fb0596fb589a2364631ed86 Mon Sep 17 00:00:00 2001
From: keyhan <k.tahvilpour@greenweb.ir>
Date: Sat, 13 Jun 2026 11:45:26 +0330
Subject: [PATCH] Restyle toasts and centralize friendly error handling.

Replace the default react-toastify look with project-styled toast cards
(icon chip, rounded shell, RTL-aware container, type-colored progress
bar) via a new notify helper and globals.css overrides.

Add a central error layer (src/lib/errors.ts): classify any caught error
by HTTP status / network condition, log the full technical detail
(including the raw backend message) to the console only, and surface a
friendly, localized message to the user. Raw backend messages are no
longer shown. All ~190 toast call sites across 22 files move to notify,
routing backend errors through notify.error(err, fallback); dead
apiErrorMessage/formatApiError helpers removed. Adds an `errors` section
to the fa/en dictionaries.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../app/[lang]/dashboard/admin/apps/page.tsx  |  10 +-
 .../[lang]/dashboard/admin/billing/page.tsx   |  19 +--
 .../[lang]/dashboard/admin/clusters/page.tsx  |  33 ++---
 .../[lang]/dashboard/admin/invoices/page.tsx  |  10 +-
 .../app/[lang]/dashboard/admin/pools/page.tsx |  12 +-
 .../app/[lang]/dashboard/admin/users/page.tsx |  18 +--
 .../app/[lang]/dashboard/apps/[id]/page.tsx   | 124 +++++++++---------
 .../src/app/[lang]/dashboard/deploy/page.tsx  |  52 ++++----
 .../app/[lang]/dashboard/invoices/page.tsx    |  12 +-
 .../[lang]/dashboard/services/[id]/page.tsx   |  27 ++--
 .../[lang]/dashboard/services/new/page.tsx    |  16 +--
 .../[lang]/dashboard/tickets/[id]/page.tsx    |   8 +-
 .../src/app/[lang]/dashboard/tickets/page.tsx |   6 +-
 .../src/app/[lang]/dashboard/wallet/page.tsx  |  12 +-
 frontend/src/app/[lang]/login/page.tsx        |   6 +-
 frontend/src/app/[lang]/register/page.tsx     |   6 +-
 frontend/src/app/globals.css                  |  55 ++++++++
 .../src/components/build-progress-modal.tsx   |   6 +-
 .../components/database-snapshots-panel.tsx   |  21 ++-
 .../components/managed-database-config.tsx    |   6 +-
 .../managed-service-resources-panel.tsx       |  35 +++--
 frontend/src/components/providers.tsx         |  18 ++-
 .../service-external-access-panel.tsx         |  11 +-
 frontend/src/i18n/I18nProvider.tsx            |   4 +
 frontend/src/i18n/dictionaries/en.ts          |  15 ++-
 frontend/src/i18n/dictionaries/fa.ts          |  15 ++-
 frontend/src/lib/errors.ts                    | 116 ++++++++++++++++
 frontend/src/lib/notify.tsx                   |  70 ++++++++++
 frontend/src/lib/use-application-delete.ts    |   8 +-
 29 files changed, 501 insertions(+), 250 deletions(-)
 create mode 100644 frontend/src/lib/errors.ts
 create mode 100644 frontend/src/lib/notify.tsx

diff --git a/frontend/src/app/[lang]/dashboard/admin/apps/page.tsx b/frontend/src/app/[lang]/dashboard/admin/apps/page.tsx
index 2664102..b8dddaa 100644
--- a/frontend/src/app/[lang]/dashboard/admin/apps/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/admin/apps/page.tsx
@@ -6,7 +6,7 @@ import { Link } from '@/i18n/Link';
 import { useT, useLocale } from '@/i18n/I18nProvider';
 import type { Dictionary } from '@/i18n/dictionaries/fa';
 import api from '@/lib/api';
-import { toast } from 'react-toastify';
+import { notify } from '@/lib/notify';
 import type { Application, AppLifecycleStatus, ApplicationMigrationEvent, ApplicationMigrationJob, BillingCycle, Cluster } from '@/types';
 import { Search, X, Package, Hexagon, User, Database, Box, AlertTriangle, Clock, ArrowRightLeft, RefreshCw } from 'lucide-react';
 import { useConfirm } from '@/components/confirm-modal';
@@ -138,18 +138,18 @@ export default function AdminAppsPage() {
       }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['application-migrations'] });
-      toast.success(aa.migrationQueued);
+      notify.success(aa.migrationQueued);
     },
-    onError: (err: any) => toast.error(err?.response?.data?.message || aa.migrationQueueFailed),
+    onError: (err: any) => notify.error(err, aa.migrationQueueFailed),
   });
 
   const retryMigration = useMutation({
     mutationFn: (id: string) => api.post(`/application-migrations/${id}/retry`),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['application-migrations'] });
-      toast.success(aa.migrationRetryQueued);
+      notify.success(aa.migrationRetryQueued);
     },
-    onError: (err: any) => toast.error(err?.response?.data?.message || aa.migrationRetryFailed),
+    onError: (err: any) => notify.error(err, aa.migrationRetryFailed),
   });
 
   // Compute status counts from apps
diff --git a/frontend/src/app/[lang]/dashboard/admin/billing/page.tsx b/frontend/src/app/[lang]/dashboard/admin/billing/page.tsx
index b8c08b8..90e10fa 100644
--- a/frontend/src/app/[lang]/dashboard/admin/billing/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/admin/billing/page.tsx
@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import api from '@/lib/api';
-import { toast } from 'react-toastify';
+import { notify } from '@/lib/notify';
 import { useT } from '@/i18n/I18nProvider';
 import type {
   PricingCatalog,
@@ -39,15 +39,6 @@ function toPricingCatalogPatch(catalog: PricingCatalog) {
   };
 }
 
-function formatApiError(err: unknown, fallback: string): string {
-  if (!err || typeof err !== 'object' || !('response' in err)) return fallback;
-  const message = (err as { response?: { data?: { message?: string | string[] } } }).response
-    ?.data?.message;
-  if (Array.isArray(message)) return message.join(', ');
-  if (typeof message === 'string') return message;
-  return fallback;
-}
-
 function cloneCatalog(catalog: PricingCatalog): PricingCatalog {
   const runtimes: PricingCatalog['runtimes'] = {};
   for (const key of Object.keys(catalog.runtimes)) {
@@ -377,12 +368,12 @@ export default function AdminBillingPage() {
       queryClient.invalidateQueries({ queryKey: ['pricing-catalog'] });
       queryClient.invalidateQueries({ queryKey: ['custom-domain-price'] });
       queryClient.invalidateQueries({ queryKey: ['optional-services-pricing'] });
-      toast.success(b.saved);
+      notify.success(b.saved);
       setEditing(false);
       setDraft(null);
     },
     onError: (err: unknown) => {
-      toast.error(formatApiError(err, b.saveFailed));
+      notify.error(err, b.saveFailed);
     },
   });
 
@@ -743,11 +734,11 @@ function LifecycleSettingsSection() {
     mutationFn: (body: Record<string, number>) => api.patch('/lifecycle/settings', body),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['lifecycle-settings'] });
-      toast.success(b.lifecycleSaved);
+      notify.success(b.lifecycleSaved);
       setEditing(false);
     },
     onError: (err: unknown) => {
-      toast.error(formatApiError(err, b.saveFailedShort));
+      notify.error(err, b.saveFailedShort);
     },
   });
 
diff --git a/frontend/src/app/[lang]/dashboard/admin/clusters/page.tsx b/frontend/src/app/[lang]/dashboard/admin/clusters/page.tsx
index 81552d8..3e57759 100644
--- a/frontend/src/app/[lang]/dashboard/admin/clusters/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/admin/clusters/page.tsx
@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import api from '@/lib/api';
-import { toast } from 'react-toastify';
+import { notify } from '@/lib/notify';
 import { useT, useLocale } from '@/i18n/I18nProvider';
 import type { Cluster, ClusterResources } from '@/types';
 import { Server, CheckCircle, XCircle, BarChart3, Clock, RotateCw, Plug, X, ScrollText } from 'lucide-react';
@@ -123,14 +123,6 @@ function ResourcePanel({ clusterId }: { clusterId: string }) {
   );
 }
 
-function apiErrorMessage(err: unknown, fallback: string): string {
-  const e = err as { response?: { data?: { message?: string | string[] } } };
-  const msg = e?.response?.data?.message;
-  if (Array.isArray(msg)) return msg.join(', ');
-  if (typeof msg === 'string' && msg.trim()) return msg;
-  return fallback;
-}
-
 interface ClusterToolField {
   key: string;
   label: string;
@@ -178,18 +170,18 @@ function ToolRow({ clusterId, tool, tools }: { clusterId: string; tool: ClusterT
       invalidate();
       setShowForm(false);
       setFields({});
-      toast.success(res.data?.message || cl.installStarted.replace('{name}', tool.name));
+      notify.success(res.data?.message || cl.installStarted.replace('{name}', tool.name));
     },
-    onError: (err) => toast.error(apiErrorMessage(err, cl.installToolFailed.replace('{name}', tool.name))),
+    onError: (err) => notify.error(err, cl.installToolFailed.replace('{name}', tool.name)),
   });
 
   const uninstallMutation = useMutation({
     mutationFn: () => api.delete(`/clusters/${clusterId}/tools/${tool.id}`),
     onSuccess: (res) => {
       invalidate();
-      toast.success(res.data?.message || cl.toolRemoved.replace('{name}', tool.name));
+      notify.success(res.data?.message || cl.toolRemoved.replace('{name}', tool.name));
     },
-    onError: (err) => toast.error(apiErrorMessage(err, cl.removeToolFailed.replace('{name}', tool.name))),
+    onError: (err) => notify.error(err, cl.removeToolFailed.replace('{name}', tool.name)),
   });
 
   const unmetDeps = tool.dependencies.filter(
@@ -212,7 +204,7 @@ function ToolRow({ clusterId, tool, tools }: { clusterId: string; tool: ClusterT
   const submitForm = () => {
     for (const f of tool.installFields) {
       if (f.required && !fields[f.key]?.trim()) {
-        toast.error(cl.fieldRequired.replace('{field}', f.label));
+        notify.error(cl.fieldRequired.replace('{field}', f.label));
         return;
       }
     }
@@ -412,13 +404,12 @@ export default function AdminClustersPage() {
     }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['admin-clusters'] });
-      toast.success(cl.added);
+      notify.success(cl.added);
       setShowForm(false);
       setForm({ name: '', description: '', apiServer: '', kubeconfig: '', region: '', provider: '', weight: 1, tags: '', isDefault: false });
     },
     onError: (err: any) => {
-      const message = err?.response?.data?.message || cl.addFailed;
-      toast.error(message);
+      notify.error(err, cl.addFailed);
     },
   });
 
@@ -431,14 +422,14 @@ export default function AdminClustersPage() {
       queryClient.invalidateQueries({ queryKey: ['admin-clusters'] });
       const data = res.data;
       if (data.connected) {
-        toast.success(cl.connectionOk.replace('{version}', data.version));
+        notify.success(cl.connectionOk.replace('{version}', data.version));
       } else {
-        toast.error(cl.connectionFailed.replace('{error}', data.error));
+        notify.error(cl.connectionFailed.replace('{error}', data.error));
       }
       setTestingId(null);
     },
     onError: () => {
-      toast.error(cl.testFailed);
+      notify.error(cl.testFailed);
       setTestingId(null);
     },
   });
@@ -447,7 +438,7 @@ export default function AdminClustersPage() {
     mutationFn: (id: string) => api.delete(`/clusters/${id}`),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['admin-clusters'] });
-      toast.success(cl.removed);
+      notify.success(cl.removed);
     },
   });
 
diff --git a/frontend/src/app/[lang]/dashboard/admin/invoices/page.tsx b/frontend/src/app/[lang]/dashboard/admin/invoices/page.tsx
index c2f3bb7..bb5a58c 100644
--- a/frontend/src/app/[lang]/dashboard/admin/invoices/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/admin/invoices/page.tsx
@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { FileText, Search, User, Wallet, CreditCard, XCircle, Download } from 'lucide-react';
-import { toast } from 'react-toastify';
+import { notify } from '@/lib/notify';
 import api from '@/lib/api';
 import { useT, useLocale } from '@/i18n/I18nProvider';
 import type { Invoice, InvoiceStatus, PaymentMethod } from '@/types';
@@ -51,12 +51,12 @@ export default function AdminInvoicesPage() {
     mutationFn: ({ invoiceId, nextStatus, reason }: { invoiceId: string; nextStatus: InvoiceStatus; reason: string }) =>
       api.patch(`/billing/admin/invoices/${invoiceId}/status`, { status: nextStatus, reason }).then((r) => r.data),
     onSuccess: () => {
-      toast.success(inv.statusUpdated);
+      notify.success(inv.statusUpdated);
       setStatusReason('');
       queryClient.invalidateQueries({ queryKey: ['admin-invoices'] });
       queryClient.invalidateQueries({ queryKey: ['admin-invoice', selectedId] });
     },
-    onError: (err: any) => toast.error(err.response?.data?.message || inv.statusUpdateFailed),
+    onError: (err: any) => notify.error(err, inv.statusUpdateFailed),
   });
 
   const downloadPdfMutation = useMutation({
@@ -71,7 +71,7 @@ export default function AdminInvoicesPage() {
       link.remove();
       window.URL.revokeObjectURL(url);
     },
-    onError: () => toast.error(inv.downloadFailed),
+    onError: () => notify.error(inv.downloadFailed),
   });
 
   const formatPrice = (amount: number) => Number(amount || 0).toLocaleString('en-US');
@@ -80,7 +80,7 @@ export default function AdminInvoicesPage() {
   const handleStatusUpdate = (nextStatus: InvoiceStatus) => {
     if (!selectedInvoice) return;
     if (!statusReason.trim()) {
-      toast.error(inv.reasonRequired);
+      notify.error(inv.reasonRequired);
       return;
     }
     updateStatusMutation.mutate({
diff --git a/frontend/src/app/[lang]/dashboard/admin/pools/page.tsx b/frontend/src/app/[lang]/dashboard/admin/pools/page.tsx
index 7f3ea3b..18e5003 100644
--- a/frontend/src/app/[lang]/dashboard/admin/pools/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/admin/pools/page.tsx
@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import api from '@/lib/api';
-import { toast } from 'react-toastify';
+import { notify } from '@/lib/notify';
 import { useT, useLocale } from '@/i18n/I18nProvider';
 import type { Cluster, ClusterPool } from '@/types';
 import { Scale, BarChart3, RotateCw, CheckCircle, XCircle, Pencil, Clock, X } from 'lucide-react';
@@ -45,11 +45,11 @@ export default function AdminPoolsPage() {
     mutationFn: (data: typeof form) => api.post('/clusters/pools', data),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['admin-pools'] });
-      toast.success(p.poolCreated);
+      notify.success(p.poolCreated);
       resetForm();
     },
     onError: (err: any) => {
-      toast.error(err?.response?.data?.message || p.createFailed);
+      notify.error(err, p.createFailed);
     },
   });
 
@@ -58,11 +58,11 @@ export default function AdminPoolsPage() {
       api.patch(`/clusters/pools/${id}`, data),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['admin-pools'] });
-      toast.success(p.poolUpdated);
+      notify.success(p.poolUpdated);
       resetForm();
     },
     onError: (err: any) => {
-      toast.error(err?.response?.data?.message || p.updateFailed);
+      notify.error(err, p.updateFailed);
     },
   });
 
@@ -70,7 +70,7 @@ export default function AdminPoolsPage() {
     mutationFn: (id: string) => api.delete(`/clusters/pools/${id}`),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['admin-pools'] });
-      toast.success(p.poolDeleted);
+      notify.success(p.poolDeleted);
     },
   });
 
diff --git a/frontend/src/app/[lang]/dashboard/admin/users/page.tsx b/frontend/src/app/[lang]/dashboard/admin/users/page.tsx
index 18e0177..b330570 100644
--- a/frontend/src/app/[lang]/dashboard/admin/users/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/admin/users/page.tsx
@@ -5,7 +5,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import api from '@/lib/api';
 import { useAuthStore } from '@/lib/store';
 import { useT, useLocale } from '@/i18n/I18nProvider';
-import { toast } from 'react-toastify';
+import { notify } from '@/lib/notify';
 import type { AdminUser } from '@/types';
 import { Users, Search, X, Clock, KeyRound } from 'lucide-react';
 import { Select } from '@/components/ui/select';
@@ -48,12 +48,12 @@ export default function AdminUsersPage() {
     mutationFn: (data: typeof form) => api.post('/users', data),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['admin-users'] });
-      toast.success(u.createdSuccess);
+      notify.success(u.createdSuccess);
       setShowForm(false);
       setForm({ email: '', password: '', firstName: '', lastName: '', role: 'user' });
     },
     onError: (err: any) => {
-      toast.error(err?.response?.data?.message || u.createFailed);
+      notify.error(err, u.createFailed);
     },
   });
 
@@ -62,7 +62,7 @@ export default function AdminUsersPage() {
       api.patch(`/users/${id}/${isActive ? 'deactivate' : 'activate'}`),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['admin-users'] });
-      toast.success(u.userUpdated);
+      notify.success(u.userUpdated);
     },
   });
 
@@ -71,7 +71,7 @@ export default function AdminUsersPage() {
       api.patch(`/users/${id}/role`, { role }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['admin-users'] });
-      toast.success(u.roleUpdated);
+      notify.success(u.roleUpdated);
     },
   });
 
@@ -80,16 +80,12 @@ export default function AdminUsersPage() {
       api.patch(`/users/${id}/password`, { password }),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['admin-users'] });
-      toast.success(u.passwordUpdated);
+      notify.success(u.passwordUpdated);
       setPwdModalUser(null);
       setPwdModalPassword('');
     },
     onError: (err: unknown) => {
-      const msg =
-        err && typeof err === 'object' && 'response' in err
-          ? (err as { response?: { data?: { message?: string } } }).response?.data?.message
-          : undefined;
-      toast.error(typeof msg === 'string' ? msg : u.passwordFailed);
+      notify.error(err, u.passwordFailed);
     },
   });
 
diff --git a/frontend/src/app/[lang]/dashboard/apps/[id]/page.tsx b/frontend/src/app/[lang]/dashboard/apps/[id]/page.tsx
index 2cc48df..e48befc 100644
--- a/frontend/src/app/[lang]/dashboard/apps/[id]/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/apps/[id]/page.tsx
@@ -3,7 +3,7 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useParams } from 'next/navigation';
 import api from '@/lib/api';
-import { toast } from 'react-toastify';
+import { notify } from '@/lib/notify';
 import type { Application, Deployment, ResourceUsage, ClusterPublic, ClusterPoolPublic, AppSnapshot, K8sRevisionData, K8sRevision, OptionalServiceCredentials, Invoice } from '@/types';
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { Link as NextLink } from '@/i18n/Link';
@@ -264,13 +264,13 @@ export default function AppDetailPage() {
   const renewMutation = useMutation({
     mutationFn: (cycle: string) => api.post(`/billing/applications/${appId}/renew`, { cycle }),
     onSuccess: (res) => {
-      toast.success(res.data.message || 'Application renewed successfully!');
+      notify.success(res.data.message || 'Application renewed successfully!');
       queryClient.invalidateQueries({ queryKey: ['application', appId] });
       queryClient.invalidateQueries({ queryKey: ['wallet'] });
       setShowRenewalModal(false);
     },
     onError: (err: any) => {
-      toast.error(err.response?.data?.message || 'Failed to renew application');
+      notify.error(err, 'Failed to renew application');
     },
   });
 
@@ -278,13 +278,13 @@ export default function AppDetailPage() {
     mutationFn: (cycle: string) =>
       api.post<Invoice>(`/billing/applications/${appId}/renew/invoice`, { cycle }).then((r) => r.data),
     onSuccess: (invoice) => {
-      toast.success(ad.invoiceCreated);
+      notify.success(ad.invoiceCreated);
       queryClient.invalidateQueries({ queryKey: ['invoices'] });
       setShowRenewalModal(false);
       router.push(`/dashboard/invoices?invoice=${invoice.id}`);
     },
     onError: (err: any) => {
-      toast.error(err.response?.data?.message || 'Failed to create renewal invoice');
+      notify.error(err, 'Failed to create renewal invoice');
     },
   });
 
@@ -314,36 +314,36 @@ export default function AppDetailPage() {
   const setDomainMutation = useMutation({
     mutationFn: (domain: string) => api.post(`/applications/${appId}/domain`, { domain }),
     onSuccess: () => {
-      toast.success(ad.domainSet);
+      notify.success(ad.domainSet);
       queryClient.invalidateQueries({ queryKey: ['application', appId] });
       refetchDomainInfo();
       setCustomDomainInput('');
     },
-    onError: (err: any) => toast.error(err.response?.data?.message || 'Failed to set domain'),
+    onError: (err: any) => notify.error(err, 'Failed to set domain'),
   });
 
   const verifyDnsMutation = useMutation({
     mutationFn: () => api.post(`/applications/${appId}/domain/verify`),
     onSuccess: (res) => {
       if (res.data.verified) {
-        toast.success(ad.domainVerified);
+        notify.success(ad.domainVerified);
       } else {
-        toast.warning(res.data.message || 'DNS is not ready yet. Please try again later.');
+        notify.warning(res.data.message || 'DNS is not ready yet. Please try again later.');
       }
       queryClient.invalidateQueries({ queryKey: ['application', appId] });
       refetchDomainInfo();
     },
-    onError: (err: any) => toast.error(err.response?.data?.message || 'DNS verification failed'),
+    onError: (err: any) => notify.error(err, 'DNS verification failed'),
   });
 
   const removeDomainMutation = useMutation({
     mutationFn: () => api.delete(`/applications/${appId}/domain`),
     onSuccess: () => {
-      toast.success(ad.customDomainRemoved);
+      notify.success(ad.customDomainRemoved);
       queryClient.invalidateQueries({ queryKey: ['application', appId] });
       refetchDomainInfo();
     },
-    onError: (err: any) => toast.error(err.response?.data?.message || 'Failed to remove domain'),
+    onError: (err: any) => notify.error(err, 'Failed to remove domain'),
   });
 
   // ─── Snapshots ──────────────────────────────────────
@@ -365,12 +365,12 @@ export default function AppDetailPage() {
   const revisionRollbackMutation = useMutation({
     mutationFn: (revision: number) => api.post(`/snapshots/applications/${appId}/revisions/${revision}/rollback`),
     onSuccess: (res) => {
-      toast.success(res.data.message || 'Rollback completed');
+      notify.success(res.data.message || 'Rollback completed');
       queryClient.invalidateQueries({ queryKey: ['revisions', appId] });
       queryClient.invalidateQueries({ queryKey: ['application', appId] });
       queryClient.invalidateQueries({ queryKey: ['deployments', appId] });
     },
-    onError: (err: any) => toast.error(err.response?.data?.message || ad.rollbackFailed),
+    onError: (err: any) => notify.error(err, ad.rollbackFailed),
   });
 
   const handleRevisionRollback = async (rev: K8sRevision) => {
@@ -389,20 +389,20 @@ export default function AppDetailPage() {
     mutationFn: () => api.post(`/snapshots/applications/${appId}`),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['snapshots', appId] });
-      toast.success(ad.snapshotStarted);
+      notify.success(ad.snapshotStarted);
     },
-    onError: () => toast.error(ad.snapshotCreateFailed),
+    onError: () => notify.error(ad.snapshotCreateFailed),
   });
 
   const rollbackMutation = useMutation({
     mutationFn: (snapshotId: string) => api.post(`/snapshots/${snapshotId}/rollback`),
     onSuccess: (res) => {
       const details = res.data.details || [];
-      toast.success(ad.rollbackCompleted + details.join('\n'));
+      notify.success(ad.rollbackCompleted + details.join('\n'));
       queryClient.invalidateQueries({ queryKey: ['application', appId] });
       queryClient.invalidateQueries({ queryKey: ['deployments', appId] });
     },
-    onError: () => toast.error(ad.rollbackFailed),
+    onError: () => notify.error(ad.rollbackFailed),
   });
 
   const [deletingSnapshotId, setDeletingSnapshotId] = useState<string | null>(null);
@@ -416,9 +416,9 @@ export default function AppDetailPage() {
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['snapshots', appId] });
-      toast.success(ad.snapshotDeleted);
+      notify.success(ad.snapshotDeleted);
     },
-    onError: () => toast.error(ad.snapshotDeleteFailed),
+    onError: () => notify.error(ad.snapshotDeleteFailed),
   });
 
   const handleRollback = async (snap: AppSnapshot) => {
@@ -457,13 +457,13 @@ export default function AppDetailPage() {
         link.click();
         URL.revokeObjectURL(link.href);
       })
-      .catch(() => toast.error(ad.downloadFailed.replace('{name}', artifact)));
+      .catch(() => notify.error(ad.downloadFailed.replace('{name}', artifact)));
   };
 
   const downloadCurrentArtifact = (artifact: 'source' | 'wp-content' | 'database') => {
     // Prevent duplicate downloads
     if (downloadingArtifact) {
-      toast.warn(ad.downloadInProgress);
+      notify.warning(ad.downloadInProgress);
       return;
     }
     
@@ -475,7 +475,7 @@ export default function AppDetailPage() {
     const timeoutId = setTimeout(() => controller.abort(), timeout);
     
     const artifactName = artifact === 'source' ? 'Source Code' : artifact === 'wp-content' ? 'wp-content' : 'Database';
-    toast.info(ad.downloading.replace('{name}', artifactName));
+    notify.info(ad.downloading.replace('{name}', artifactName));
     
     fetch(url, { 
       headers: { Authorization: `Bearer ${token}` },
@@ -493,14 +493,14 @@ export default function AppDetailPage() {
         link.download = `current-${artifact}${ext}`;
         link.click();
         URL.revokeObjectURL(link.href);
-        toast.success(ad.downloadedSuccess.replace('{name}', artifactName));
+        notify.success(ad.downloadedSuccess.replace('{name}', artifactName));
       })
       .catch((err) => {
         clearTimeout(timeoutId);
         if (err.name === 'AbortError') {
-          toast.error(ad.downloadTimeout);
+          notify.error(ad.downloadTimeout);
         } else {
-          toast.error(ad.downloadCurrentFailed.replace('{name}', artifact));
+          notify.error(ad.downloadCurrentFailed.replace('{name}', artifact));
         }
       })
       .finally(() => {
@@ -562,11 +562,11 @@ export default function AppDetailPage() {
     },
     onSuccess: () => {
       invalidateAll();
-      toast.success(ad.deploymentTriggered);
+      notify.success(ad.deploymentTriggered);
     },
     onError: () => {
       useDeployProgressStore.getState().stopTracking(appId);
-      toast.error(ad.deployFailed);
+      notify.error(ad.deployFailed);
     },
   });
 
@@ -574,27 +574,27 @@ export default function AppDetailPage() {
     mutationFn: () => api.post(`/deployments/applications/${appId}/stop`),
     onSuccess: () => {
       invalidateAll();
-      toast.success(ad.appStopped);
+      notify.success(ad.appStopped);
     },
-    onError: () => toast.error(ad.stopFailed),
+    onError: () => notify.error(ad.stopFailed),
   });
 
   const startMutation = useMutation({
     mutationFn: () => api.post(`/deployments/applications/${appId}/start`),
     onSuccess: () => {
       invalidateAll();
-      toast.success(ad.appStarted);
+      notify.success(ad.appStarted);
     },
-    onError: () => toast.error(ad.startFailed),
+    onError: () => notify.error(ad.startFailed),
   });
 
   const restartMutation = useMutation({
     mutationFn: () => api.post(`/deployments/applications/${appId}/restart`),
     onSuccess: () => {
       invalidateAll();
-      toast.success(ad.appRestarting);
+      notify.success(ad.appRestarting);
     },
-    onError: () => toast.error(ad.restartFailed),
+    onError: () => notify.error(ad.restartFailed),
   });
 
   const redeployMutation = useMutation({
@@ -604,11 +604,11 @@ export default function AppDetailPage() {
     },
     onSuccess: () => {
       invalidateAll();
-      toast.success(ad.redeployStarted);
+      notify.success(ad.redeployStarted);
     },
     onError: () => {
       useDeployProgressStore.getState().stopTracking(appId);
-      toast.error(ad.redeployFailed);
+      notify.error(ad.redeployFailed);
     },
   });
 
@@ -616,13 +616,13 @@ export default function AppDetailPage() {
     invalidateKeys: [['applications', 'application'], ['applications']],
     onSuccess: (data) => {
       if (data?.resourceCredit) {
-        toast.success(ad.appDeletedCredit);
+        notify.success(ad.appDeletedCredit);
       } else {
-        toast.success(ad.appDeleted);
+        notify.success(ad.appDeleted);
       }
       router.push('/dashboard/apps');
     },
-    onError: () => toast.error(ad.deleteAppFailed),
+    onError: () => notify.error(ad.deleteAppFailed),
   });
 
   const scaleMutation = useMutation({
@@ -639,12 +639,12 @@ export default function AppDetailPage() {
       setPendingUpgradePayload(null);
       const paidAmount = res.data.paidAmount || 0;
       if (paidAmount > 0) {
-        toast.success(ad.upgradedPaid.replace('{amount}', paidAmount.toLocaleString('en-US')));
+        notify.success(ad.upgradedPaid.replace('{amount}', paidAmount.toLocaleString('en-US')));
       } else {
-        toast.success(ad.resourcesUpdatedSuccess);
+        notify.success(ad.resourcesUpdatedSuccess);
       }
     },
-    onError: (err: any) => toast.error(err.response?.data?.message || ad.updateResourcesFailed),
+    onError: (err: any) => notify.error(err, ad.updateResourcesFailed),
   });
 
   /** CPU/memory for DB / Redis / RabbitMQ — applies directly in Kubernetes (no billing wizard). */
@@ -660,9 +660,9 @@ export default function AppDetailPage() {
       setResourceFormDirty(false);
       invalidateAll();
       queryClient.invalidateQueries({ queryKey: ['resources', appId] });
-      toast.success(ad.resourcesUpdated);
+      notify.success(ad.resourcesUpdated);
     },
-    onError: (err: any) => toast.error(err.response?.data?.message || ad.updateResourcesFailed),
+    onError: (err: any) => notify.error(err, ad.updateResourcesFailed),
   });
 
   // Calculate upgrade cost before applying
@@ -672,21 +672,21 @@ export default function AppDetailPage() {
       setUpgradeCostData(res.data);
       setShowUpgradeConfirm(true);
     },
-    onError: (err: any) => toast.error(err.response?.data?.message || ad.calcFailed),
+    onError: (err: any) => notify.error(err, ad.calcFailed),
   });
 
   const createUpgradeInvoiceMutation = useMutation({
     mutationFn: (data: UpgradePayload) =>
       api.post<Invoice>(`/billing/applications/${appId}/upgrade/invoice`, data).then((r) => r.data),
     onSuccess: (invoice) => {
-      toast.success(ad.invoiceCreated);
+      notify.success(ad.invoiceCreated);
       queryClient.invalidateQueries({ queryKey: ['invoices'] });
       setShowUpgradeConfirm(false);
       setUpgradeCostData(null);
       setPendingUpgradePayload(null);
       router.push(`/dashboard/invoices?invoice=${invoice.id}`);
     },
-    onError: (err: any) => toast.error(err.response?.data?.message || ad.invoiceFailed),
+    onError: (err: any) => notify.error(err, ad.invoiceFailed),
   });
 
   const buildWorkloadUpgradePayload = useCallback((): UpgradePayload => {
@@ -774,7 +774,7 @@ export default function AppDetailPage() {
         patchDatabaseCpuIfNeeded();
         return;
       }
-      toast.warn(ad.renewFirst);
+      notify.warning(ad.renewFirst);
       return;
     }
 
@@ -783,7 +783,7 @@ export default function AppDetailPage() {
     const needsDbCpuPatch = scaleWorkload === 'database';
 
     if (!hasBillingPayload && !needsDbCpuPatch) {
-      toast.warn(ad.noChanges);
+      notify.warning(ad.noChanges);
       return;
     }
 
@@ -879,12 +879,12 @@ export default function AppDetailPage() {
       const targetUrl = data.ingressUrl || data.url;
       window.open(targetUrl, '_blank');
       if (data.ingressUrl) {
-        toast.success(ad.previewHttps);
+        notify.success(ad.previewHttps);
       } else {
-        toast.success(ad.previewPort.replace('{port}', String(data.nodePort)));
+        notify.success(ad.previewPort.replace('{port}', String(data.nodePort)));
       }
     },
-    onError: () => toast.error(ad.previewFailed),
+    onError: () => notify.error(ad.previewFailed),
   });
 
   const uploadMutation = useMutation({
@@ -900,11 +900,11 @@ export default function AppDetailPage() {
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['application', appId] });
-      toast.success(ad.sourceUploaded);
+      notify.success(ad.sourceUploaded);
       setUploadProgress(0);
     },
     onError: () => {
-      toast.error(ad.uploadFailed);
+      notify.error(ad.uploadFailed);
       setUploadProgress(0);
     },
   });
@@ -921,24 +921,24 @@ export default function AppDetailPage() {
       const data = res.data;
       setDbRestoreLogs(data.logs || null);
       if (data.success) {
-        toast.success(ad.dbRestored);
+        notify.success(ad.dbRestored);
       } else {
-        toast.error(data.message || 'Database restore failed');
+        notify.error(ad.dbRestoreFailed);
       }
     },
     onError: (err: any) => {
-      toast.error(err.response?.data?.message || ad.dbUploadFailed);
+      notify.error(err, ad.dbUploadFailed);
       setDbRestoreLogs(null);
     },
   });
 
   const handleFileUpload = useCallback((file: File) => {
     if (!file.name.endsWith('.zip') && !file.name.endsWith('.tar.gz') && !file.name.endsWith('.tgz')) {
-      toast.error(ad.fileZipOnly);
+      notify.error(ad.fileZipOnly);
       return;
     }
     if (file.size > MAX_SOURCE_ARCHIVE_BYTES) {
-      toast.error(ad.fileMax10);
+      notify.error(ad.fileMax10);
       return;
     }
     uploadMutation.mutate(file);
@@ -962,11 +962,11 @@ export default function AppDetailPage() {
 
   const handleDbFileUpload = useCallback((file: File) => {
     if (!file.name.endsWith('.sql') && !file.name.endsWith('.gz') && !file.name.endsWith('.dump')) {
-      toast.error(ad.dbInvalidFile);
+      notify.error(ad.dbInvalidFile);
       return;
     }
     if (file.size > 500 * 1024 * 1024) {
-      toast.error(ad.fileMax500);
+      notify.error(ad.fileMax500);
       return;
     }
     setDbRestoreLogs(null);
@@ -1698,7 +1698,7 @@ export default function AppDetailPage() {
                     <button
                       onClick={() => {
                         navigator.clipboard.writeText(domainInfo.fullPlatformUrl);
-                        toast.success(ad.copied);
+                        notify.success(ad.copied);
                       }}
                       className="text-blue-600 hover:text-blue-800 p-1"
                     >
diff --git a/frontend/src/app/[lang]/dashboard/deploy/page.tsx b/frontend/src/app/[lang]/dashboard/deploy/page.tsx
index 4442d77..eb5e4c4 100644
--- a/frontend/src/app/[lang]/dashboard/deploy/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/deploy/page.tsx
@@ -10,7 +10,7 @@ import { parseDotenv } from '@/lib/parseDotenv';
 import { useAuthStore } from '@/lib/store';
 import { useDeployProgressStore } from '@/lib/deploy-progress-store';
 import { useDeployProgressActions } from '@/lib/use-deploy-progress-actions';
-import { toast } from 'react-toastify';
+import { notify } from '@/lib/notify';
 import type {
   CreateApplicationDto,
   ClusterPublic,
@@ -352,13 +352,13 @@ export default function DeployPage() {
       setDnsCheckResult(data);
       if (data.verified) {
         setDnsVerified(true);
-        toast.success(dw.dnsVerifiedProceed);
+        notify.success(dw.dnsVerifiedProceed);
       } else {
-        toast.warning(data.message);
+        notify.warning(data.message);
       }
     },
     onError: () => {
-      toast.error(dw.dnsCheckFailed);
+      notify.error(dw.dnsCheckFailed);
     },
   });
 
@@ -455,14 +455,14 @@ export default function DeployPage() {
     },
     onSuccess: (res) => {
       setDeployStage('deploying');
-      toast.success(dw.paymentSuccessDeploying);
+      notify.success(dw.paymentSuccessDeploying);
       void triggerAppDeploy(res.data.id, res.data.name);
       setDeployStage('done');
       router.push(`/dashboard/apps/${res.data.id}`);
     },
     onError: (err: any) => {
       setDeployStage('error');
-      toast.error(err.response?.data?.message || 'Payment or deployment failed');
+      notify.error(err, 'Payment or deployment failed');
       setUploadProgress(0);
       setDbUploadProgress(0);
       setTimeout(() => setDeployStage('idle'), 2000);
@@ -537,14 +537,14 @@ export default function DeployPage() {
     },
     onSuccess: (res) => {
       setDeployStage('deploying');
-      toast.success(dw.paymentSuccessDeploying);
+      notify.success(dw.paymentSuccessDeploying);
       void triggerAppDeploy(res.data.id, res.data.name);
       setDeployStage('done');
       router.push(`/dashboard/apps/${res.data.id}`);
     },
     onError: (err: any) => {
       setDeployStage('error');
-      toast.error(err.response?.data?.message || 'Payment failed');
+      notify.error(err, 'Payment failed');
       setUploadProgress(0);
       setDbUploadProgress(0);
       setTimeout(() => setDeployStage('idle'), 2000);
@@ -592,14 +592,14 @@ export default function DeployPage() {
     },
     onSuccess: (res) => {
       setDeployStage('deploying');
-      toast.success(dw.appCreatedDeploying);
+      notify.success(dw.appCreatedDeploying);
       void triggerAppDeploy(res.data.id, res.data.name);
       setDeployStage('done');
       router.push(`/dashboard/apps/${res.data.id}`);
     },
     onError: (err: any) => {
       setDeployStage('error');
-      toast.error(err.response?.data?.message || 'Failed to create application');
+      notify.error(err, 'Failed to create application');
       setUploadProgress(0);
       setDbUploadProgress(0);
       setTimeout(() => setDeployStage('idle'), 2000);
@@ -628,18 +628,18 @@ export default function DeployPage() {
       const count = Object.keys(vars).length;
 
       if (count === 0) {
-        toast.error(errors.length > 0 ? errors[0] : dw.noValidEnvVars);
+        notify.error(errors.length > 0 ? errors[0] : dw.noValidEnvVars);
         return;
       }
 
       setForm((prev) => ({ ...prev, envVars: { ...prev.envVars, ...vars } }));
       setEnvFile(file);
-      toast.success(`${count} environment variable${count === 1 ? '' : 's'} imported from ${file.name}`);
+      notify.success(`${count} environment variable${count === 1 ? '' : 's'} imported from ${file.name}`);
       if (errors.length > 0) {
-        toast.warn(`${errors.length} line${errors.length === 1 ? '' : 's'} skipped`);
+        notify.warning(`${errors.length} line${errors.length === 1 ? '' : 's'} skipped`);
       }
     };
-    reader.onerror = () => toast.error(dw.envReadFailed);
+    reader.onerror = () => notify.error(dw.envReadFailed);
     reader.readAsText(file);
   };
 
@@ -670,11 +670,11 @@ export default function DeployPage() {
     const hasValidExt = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
 
     if (!hasValidExt && !validTypes.includes(file.type)) {
-      toast.error(dw.onlyZipAllowed);
+      notify.error(dw.onlyZipAllowed);
       return;
     }
     if (file.size > MAX_SOURCE_CODE_UPLOAD_BYTES) {
-      toast.error(dw.fileMax10);
+      notify.error(dw.fileMax10);
       return;
     }
     setZipFile(file);
@@ -683,7 +683,7 @@ export default function DeployPage() {
       const cur = parseInt(prev.appStorageSize || '2', 10) || 2;
       return { ...prev, appStorageSize: String(Math.max(cur, minG)) };
     });
-    toast.success(`Selected: ${file.name}`);
+    notify.success(`Selected: ${file.name}`);
   }, []);
 
   const handleDrop = useCallback((e: React.DragEvent) => {
@@ -707,11 +707,11 @@ export default function DeployPage() {
     const validExtensions = ['.zip', '.tar.gz', '.tgz'];
     const hasValidExt = validExtensions.some((ext) => file.name.toLowerCase().endsWith(ext));
     if (!hasValidExt) {
-      toast.error(dw.onlyZipAllowed);
+      notify.error(dw.onlyZipAllowed);
       return;
     }
     if (file.size > MAX_SOURCE_CODE_UPLOAD_BYTES) {
-      toast.error(dw.archiveMax10);
+      notify.error(dw.archiveMax10);
       return;
     }
     setWpContentFile(file);
@@ -722,7 +722,7 @@ export default function DeployPage() {
       const cur = parseInt(prev.appStorageSize || '2', 10) || 2;
       return { ...prev, appStorageSize: String(Math.max(cur, target)) };
     });
-    toast.success(`WordPress files selected: ${file.name}`);
+    notify.success(`WordPress files selected: ${file.name}`);
   }, []);
 
   const handleWpDrop = useCallback((e: React.DragEvent) => {
@@ -773,7 +773,7 @@ export default function DeployPage() {
         if (data.verified) {
           setDnsVerified(true);
           setDnsCheckResult(data);
-          toast.success(dw.dnsVerified);
+          notify.success(dw.dnsVerified);
           setStep(step + 1);
         } else {
           setDnsCheckResult(data);
@@ -1599,9 +1599,9 @@ export default function DeployPage() {
                       const f = e.dataTransfer.files[0];
                       if (f) {
                         if (!f.name.endsWith('.sql') && !f.name.endsWith('.gz') && !f.name.endsWith('.dump')) {
-                          toast.error(dw.allowedDumpFormats);
+                          notify.error(dw.allowedDumpFormats);
                         } else if (f.size > 500 * 1024 * 1024) {
-                          toast.error(dw.maxSize500);
+                          notify.error(dw.maxSize500);
                         } else {
                           setDbDumpFile(f);
                           const suggested = Math.max(
@@ -1628,9 +1628,9 @@ export default function DeployPage() {
                         const f = e.target.files?.[0];
                         if (f) {
                           if (!f.name.endsWith('.sql') && !f.name.endsWith('.gz') && !f.name.endsWith('.dump')) {
-                            toast.error(dw.allowedDumpFormats);
+                            notify.error(dw.allowedDumpFormats);
                           } else if (f.size > 500 * 1024 * 1024) {
-                            toast.error(dw.maxSize500);
+                            notify.error(dw.maxSize500);
                           } else {
                             setDbDumpFile(f);
                             const suggested = Math.max(
@@ -2849,7 +2849,7 @@ export default function DeployPage() {
                   walletPayMutation.mutate();
                 } else if (paymentMethod === 'wallet') {
                   if (!hasEnoughBalance) {
-                    toast.error(dw.insufficientWallet);
+                    notify.error(dw.insufficientWallet);
                     return;
                   }
                   walletPayMutation.mutate();
diff --git a/frontend/src/app/[lang]/dashboard/invoices/page.tsx b/frontend/src/app/[lang]/dashboard/invoices/page.tsx
index 1f51d7a..6c7fe56 100644
--- a/frontend/src/app/[lang]/dashboard/invoices/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/invoices/page.tsx
@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { CreditCard, FileText, Wallet, XCircle, CheckCircle, Clock, Download } from 'lucide-react';
-import { toast } from 'react-toastify';
+import { notify } from '@/lib/notify';
 import api from '@/lib/api';
 import { useT, useLocale } from '@/i18n/I18nProvider';
 import type { Invoice, InvoiceStatus } from '@/types';
@@ -69,11 +69,11 @@ export default function InvoicesPage() {
     mutationFn: ({ invoiceId, trackingCode, amount }: { invoiceId: string; trackingCode: string; amount: number }) =>
       api.post(`/billing/invoices/${invoiceId}/gateway/verify`, { trackingCode, amount }).then((r) => r.data),
     onSuccess: (data) => {
-      toast.success(data.effect ? inv.paymentCompleteUpdated : inv.paymentComplete);
+      notify.success(data.effect ? inv.paymentCompleteUpdated : inv.paymentComplete);
       refresh();
       window.history.replaceState({}, '', window.location.pathname);
     },
-    onError: (err: any) => toast.error(err.response?.data?.message || inv.gatewayFailed),
+    onError: (err: any) => notify.error(err, inv.gatewayFailed),
   });
 
   useEffect(() => {
@@ -99,10 +99,10 @@ export default function InvoicesPage() {
     },
     onSuccess: (data) => {
       if (data.gatewayUrl && data.gatewayAmount > 0) return;
-      toast.success(data.effect ? inv.invoicePaidUpdated : inv.invoicePaid);
+      notify.success(data.effect ? inv.invoicePaidUpdated : inv.invoicePaid);
       refresh();
     },
-    onError: (err: any) => toast.error(err.response?.data?.message || inv.paymentFailed),
+    onError: (err: any) => notify.error(err, inv.paymentFailed),
   });
 
   const downloadPdfMutation = useMutation({
@@ -117,7 +117,7 @@ export default function InvoicesPage() {
       link.remove();
       window.URL.revokeObjectURL(url);
     },
-    onError: () => toast.error(inv.downloadFailed),
+    onError: () => notify.error(inv.downloadFailed),
   });
 
   const formatPrice = (amount: number) => Number(amount || 0).toLocaleString('en-US');
diff --git a/frontend/src/app/[lang]/dashboard/services/[id]/page.tsx b/frontend/src/app/[lang]/dashboard/services/[id]/page.tsx
index 53d2f82..82d6184 100644
--- a/frontend/src/app/[lang]/dashboard/services/[id]/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/services/[id]/page.tsx
@@ -4,7 +4,7 @@ import { useState, useEffect, useCallback } from 'react';
 import { useParams } from 'next/navigation';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import api from '@/lib/api';
-import { toast } from 'react-toastify';
+import { notify } from '@/lib/notify';
 import { Link } from '@/i18n/Link';
 import { useT, useLocale } from '@/i18n/I18nProvider';
 import { useLocalizedRouter } from '@/i18n/navigation';
@@ -127,14 +127,14 @@ export default function ManagedServiceDetailPage() {
       notifyDeployStarted(serviceId, app?.name);
     },
     onSuccess: () => {
-      toast.success(sd.provisioningStarted);
+      notify.success(sd.provisioningStarted);
       queryClient.invalidateQueries({ queryKey: ['deployments', serviceId] });
       queryClient.invalidateQueries({ queryKey: ['application', serviceId] });
       queryClient.invalidateQueries({ queryKey: ['applications'] });
     },
     onError: () => {
       useDeployProgressStore.getState().stopTracking(serviceId);
-      toast.error(sd.provisioningFailed);
+      notify.error(sd.provisioningFailed);
     },
   });
 
@@ -144,37 +144,34 @@ export default function ManagedServiceDetailPage() {
       notifyDeployStarted(serviceId, app?.name);
     },
     onSuccess: () => {
-      toast.success(sd.reprovisioningStarted);
+      notify.success(sd.reprovisioningStarted);
       queryClient.invalidateQueries({ queryKey: ['deployments', serviceId] });
       queryClient.invalidateQueries({ queryKey: ['application', serviceId] });
       queryClient.invalidateQueries({ queryKey: ['applications'] });
     },
     onError: (err: unknown) => {
       useDeployProgressStore.getState().stopTracking(serviceId);
-      const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
-      toast.error(msg || sd.reprovisionFailed);
+      notify.error(err, sd.reprovisionFailed);
     },
   });
 
   const restartMutation = useMutation({
     mutationFn: () => api.post(`/deployments/applications/${serviceId}/restart`),
-    onSuccess: () => toast.success(sd.serviceRestarted),
+    onSuccess: () => notify.success(sd.serviceRestarted),
     onError: (err: unknown) => {
-      const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
-      toast.error(msg || sd.restartFailed);
+      notify.error(err, sd.restartFailed);
     },
   });
 
   const renewMutation = useMutation({
     mutationFn: (cycle: string) => api.post(`/billing/applications/${serviceId}/renew`, { cycle }),
     onSuccess: () => {
-      toast.success(sd.serviceRenewed);
+      notify.success(sd.serviceRenewed);
       queryClient.invalidateQueries({ queryKey: ['application', serviceId] });
       setShowRenewalModal(false);
     },
     onError: (err: unknown) => {
-      const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
-      toast.error(msg || sd.renewalFailed);
+      notify.error(err, sd.renewalFailed);
     },
   });
 
@@ -183,13 +180,13 @@ export default function ManagedServiceDetailPage() {
     onSuccess: (data) => {
       queryClient.invalidateQueries({ queryKey: ['application', serviceId] });
       if (data?.resourceCredit) {
-        toast.success(sd.deletedWithCredit);
+        notify.success(sd.deletedWithCredit);
       } else {
-        toast.success(sd.deleted);
+        notify.success(sd.deleted);
       }
       router.push('/dashboard/services');
     },
-    onError: () => toast.error(sd.deleteFailed),
+    onError: () => notify.error(sd.deleteFailed),
   });
 
   const copyToClipboard = useCallback((text: string, field: string) => {
diff --git a/frontend/src/app/[lang]/dashboard/services/new/page.tsx b/frontend/src/app/[lang]/dashboard/services/new/page.tsx
index e2e59d7..85aa4ae 100644
--- a/frontend/src/app/[lang]/dashboard/services/new/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/services/new/page.tsx
@@ -3,7 +3,7 @@
 import { useState, useMemo } from 'react';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import api from '@/lib/api';
-import { toast } from 'react-toastify';
+import { notify } from '@/lib/notify';
 import { Link } from '@/i18n/Link';
 import { useT } from '@/i18n/I18nProvider';
 import { useLocalizedRouter } from '@/i18n/navigation';
@@ -187,7 +187,7 @@ export default function NewManagedServicePage() {
       throw new Error(s.deployFailed);
     }
     setDeployStage('done');
-    toast.success(s.provisionedSuccess);
+    notify.success(s.provisionedSuccess);
     router.push(`/dashboard/services/${appId}`);
   };
 
@@ -220,12 +220,11 @@ export default function NewManagedServicePage() {
     onSuccess: (appId) =>
       finishDeploy(appId, form.name).catch(() => {
         setDeployStage('error');
-        toast.error(s.paySucceededDeployFailed);
+        notify.error(s.paySucceededDeployFailed);
       }),
     onError: (err: unknown) => {
       setDeployStage('error');
-      const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
-      toast.error(msg || s.payProvisionFailed);
+      notify.error(err, s.payProvisionFailed);
       setTimeout(() => setDeployStage('idle'), 2000);
     },
   });
@@ -256,12 +255,11 @@ export default function NewManagedServicePage() {
     onSuccess: (appId) =>
       finishDeploy(appId, form.name).catch(() => {
         setDeployStage('error');
-        toast.error(s.paySucceededDeployFailed);
+        notify.error(s.paySucceededDeployFailed);
       }),
     onError: (err: unknown) => {
       setDeployStage('error');
-      const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
-      toast.error(msg || s.payFailed);
+      notify.error(err, s.payFailed);
       setTimeout(() => setDeployStage('idle'), 2000);
     },
   });
@@ -283,7 +281,7 @@ export default function NewManagedServicePage() {
     if (payAmount === 0) walletPayMutation.mutate();
     else if (paymentMethod === 'wallet') {
       if (!hasEnoughBalance) {
-        toast.error(s.insufficientBalance);
+        notify.error(s.insufficientBalance);
         return;
       }
       walletPayMutation.mutate();
diff --git a/frontend/src/app/[lang]/dashboard/tickets/[id]/page.tsx b/frontend/src/app/[lang]/dashboard/tickets/[id]/page.tsx
index dc0adb9..3b64f7a 100644
--- a/frontend/src/app/[lang]/dashboard/tickets/[id]/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/tickets/[id]/page.tsx
@@ -7,7 +7,7 @@ import { useLocalizedRouter } from '@/i18n/navigation';
 import { useT, useLocale } from '@/i18n/I18nProvider';
 import api from '@/lib/api';
 import { useAuthStore } from '@/lib/store';
-import { toast } from 'react-toastify';
+import { notify } from '@/lib/notify';
 import type { Ticket } from '@/types';
 import { Wrench, Briefcase } from 'lucide-react';
 
@@ -40,16 +40,16 @@ export default function TicketDetailPage() {
     onSuccess: () => {
       setReply('');
       queryClient.invalidateQueries({ queryKey: ['ticket', id] });
-      toast.success(tk.replySent);
+      notify.success(tk.replySent);
     },
-    onError: (err: any) => toast.error(err.response?.data?.message || tk.replyFailed),
+    onError: (err: any) => notify.error(err, tk.replyFailed),
   });
 
   const closeMutation = useMutation({
     mutationFn: () => api.patch(`/tickets/${id}/close`).then((r) => r.data),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['ticket', id] });
-      toast.success(tk.ticketClosed);
+      notify.success(tk.ticketClosed);
     },
   });
 
diff --git a/frontend/src/app/[lang]/dashboard/tickets/page.tsx b/frontend/src/app/[lang]/dashboard/tickets/page.tsx
index fef53e0..9d9477f 100644
--- a/frontend/src/app/[lang]/dashboard/tickets/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/tickets/page.tsx
@@ -6,7 +6,7 @@ import { Link } from '@/i18n/Link';
 import { useT, useLocale } from '@/i18n/I18nProvider';
 import api from '@/lib/api';
 import { useAuthStore } from '@/lib/store';
-import { toast } from 'react-toastify';
+import { notify } from '@/lib/notify';
 import type { Ticket, CreateTicketDto, TicketDepartment, TicketPriority } from '@/types';
 import { Wrench, Briefcase, Ticket as TicketIcon, X } from 'lucide-react';
 import { Select } from '@/components/ui/select';
@@ -56,12 +56,12 @@ export default function TicketsPage() {
   const createMutation = useMutation({
     mutationFn: (data: CreateTicketDto) => api.post('/tickets', data).then((r) => r.data),
     onSuccess: () => {
-      toast.success(tk.createdSuccess);
+      notify.success(tk.createdSuccess);
       queryClient.invalidateQueries({ queryKey: ['my-tickets'] });
       setShowCreate(false);
       setForm({ subject: '', department: availableDepartments[0]?.value || 'technical', priority: 'medium', message: '' });
     },
-    onError: (err: any) => toast.error(err.response?.data?.message || tk.createFailed),
+    onError: (err: any) => notify.error(err, tk.createFailed),
   });
 
   const handleSubmit = (e: React.FormEvent) => {
diff --git a/frontend/src/app/[lang]/dashboard/wallet/page.tsx b/frontend/src/app/[lang]/dashboard/wallet/page.tsx
index 8498e91..2f3e4a5 100644
--- a/frontend/src/app/[lang]/dashboard/wallet/page.tsx
+++ b/frontend/src/app/[lang]/dashboard/wallet/page.tsx
@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import api from '@/lib/api';
-import { toast } from 'react-toastify';
+import { notify } from '@/lib/notify';
 import type { WalletTransaction, TransactionType } from '@/types';
 import { Link } from '@/i18n/Link';
 import { useT, useLocale } from '@/i18n/I18nProvider';
@@ -48,11 +48,11 @@ export default function WalletPage() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['wallet-balance'] });
       queryClient.invalidateQueries({ queryKey: ['wallet-transactions'] });
-      toast.success(w.chargedSuccess);
+      notify.success(w.chargedSuccess);
       setChargeAmount('');
       setShowCharge(false);
     },
-    onError: (err: any) => toast.error(err.response?.data?.message || w.chargeFailed),
+    onError: (err: any) => notify.error(err, w.chargeFailed),
   });
 
   // Payment gateway charge
@@ -74,17 +74,17 @@ export default function WalletPage() {
       });
       queryClient.invalidateQueries({ queryKey: ['wallet-balance'] });
       queryClient.invalidateQueries({ queryKey: ['wallet-transactions'] });
-      toast.success(w.paymentSuccess);
+      notify.success(w.paymentSuccess);
       setChargeAmount('');
       setShowCharge(false);
     },
-    onError: (err: any) => toast.error(err.response?.data?.message || w.paymentFailed),
+    onError: (err: any) => notify.error(err, w.paymentFailed),
   });
 
   const handleCharge = (method: 'wallet' | 'gateway') => {
     const amount = Number(chargeAmount);
     if (!amount || amount < 1000) {
-      toast.error(w.minChargeError);
+      notify.error(w.minChargeError);
       return;
     }
     if (method === 'wallet') {
diff --git a/frontend/src/app/[lang]/login/page.tsx b/frontend/src/app/[lang]/login/page.tsx
index f73f96a..cf8a61c 100644
--- a/frontend/src/app/[lang]/login/page.tsx
+++ b/frontend/src/app/[lang]/login/page.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { useAuthStore } from '@/lib/store';
-import { toast } from 'react-toastify';
+import { notify } from '@/lib/notify';
 import { LogIn, ArrowLeft } from 'lucide-react';
 import { AuthShell } from '@/components/auth/AuthShell';
 import { AuthField } from '@/components/auth/AuthField';
@@ -22,10 +22,10 @@ export default function LoginPage() {
     setIsLoading(true);
     try {
       await login(email, password);
-      toast.success(tl.success);
+      notify.success(tl.success);
       router.push('/dashboard');
     } catch (err: any) {
-      toast.error(err.response?.data?.message || tl.error);
+      notify.error(err, tl.error);
     } finally {
       setIsLoading(false);
     }
diff --git a/frontend/src/app/[lang]/register/page.tsx b/frontend/src/app/[lang]/register/page.tsx
index 00fb8b3..ff939d7 100644
--- a/frontend/src/app/[lang]/register/page.tsx
+++ b/frontend/src/app/[lang]/register/page.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { useAuthStore } from '@/lib/store';
-import { toast } from 'react-toastify';
+import { notify } from '@/lib/notify';
 import { UserPlus, ArrowLeft } from 'lucide-react';
 import { AuthShell } from '@/components/auth/AuthShell';
 import { AuthField } from '@/components/auth/AuthField';
@@ -21,10 +21,10 @@ export default function RegisterPage() {
     setIsLoading(true);
     try {
       await register(form);
-      toast.success(tr.success);
+      notify.success(tr.success);
       router.push('/dashboard');
     } catch (err: any) {
-      toast.error(err.response?.data?.message || tr.error);
+      notify.error(err, tr.error);
     } finally {
       setIsLoading(false);
     }
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index c99c1dc..b1332c9 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -237,3 +237,58 @@ html.lenis body {
     font-size: 16px !important;
   }
 }
+
+/* ─── Toast notifications (react-toastify) ─────────────────────
+   Reskin the library defaults into project-styled cards. The body content
+   (icon chip + message) is rendered by src/lib/notify.tsx; here we shape the
+   shell, spacing, shadow, RTL flow and the type-colored progress bar. */
+.abrban-toast-container {
+  width: auto;
+  max-width: min(92vw, 26rem);
+  padding: 0;
+}
+
+.abrban-toast-container .abrban-toast {
+  border-radius: 0.875rem; /* rounded-xl */
+  border: 1px solid rgb(229 231 235); /* gray-200 */
+  background: #fff;
+  box-shadow:
+    0 10px 30px -12px rgba(2, 6, 23, 0.25),
+    0 2px 8px -4px rgba(2, 6, 23, 0.12);
+  padding: 0.75rem 0.875rem;
+  min-height: 0;
+  font-family: inherit;
+  color: rgb(31 41 55); /* gray-800 */
+}
+
+.abrban-toast-container .Toastify__toast-body {
+  padding: 0;
+  margin: 0;
+  font-family: inherit;
+}
+
+.abrban-toast-container .Toastify__close-button {
+  color: rgb(156 163 175); /* gray-400 */
+  opacity: 1;
+  align-self: center;
+  transition: color 0.15s ease;
+}
+.abrban-toast-container .Toastify__close-button:hover {
+  color: rgb(75 85 99); /* gray-600 */
+}
+
+/* Thin, type-colored progress bar in place of the default rainbow gradients. */
+.abrban-toast-container .Toastify__progress-bar {
+  height: 3px;
+  opacity: 0.9;
+}
+.abrban-toast-container .Toastify__progress-bar--success { background: rgb(16 185 129); }
+.abrban-toast-container .Toastify__progress-bar--error { background: rgb(239 68 68); }
+.abrban-toast-container .Toastify__progress-bar--warning { background: rgb(245 158 11); }
+.abrban-toast-container .Toastify__progress-bar--info { background: rgb(59 130 246); }
+
+/* RTL: keep the colored accent border on the leading (right) edge. */
+.abrban-toast-container.Toastify__toast-container--rtl {
+  right: 1rem;
+  left: auto;
+}
diff --git a/frontend/src/components/build-progress-modal.tsx b/frontend/src/components/build-progress-modal.tsx
index d1c1b35..b013600 100644
--- a/frontend/src/components/build-progress-modal.tsx
+++ b/frontend/src/components/build-progress-modal.tsx
@@ -3,7 +3,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import api from '@/lib/api';
 import { Loader2, Upload, Hammer, Rocket, CheckCircle, XCircle, X, Minimize2 } from 'lucide-react';
-import { toast } from 'react-toastify';
+import { notify } from '@/lib/notify';
 import { useT } from '@/i18n/I18nProvider';
 import type { Dictionary } from '@/i18n/dictionaries/fa';
 
@@ -54,13 +54,13 @@ export function BuildProgressModal({
   const cancelMutation = useMutation({
     mutationFn: () => api.post(`/deployments/applications/${appId}/cancel`),
     onSuccess: () => {
-      toast.success(c.deploymentCancelled);
+      notify.success(c.deploymentCancelled);
       queryClient.invalidateQueries({ queryKey: ['application', appId] });
       queryClient.invalidateQueries({ queryKey: ['deployments', appId] });
       queryClient.invalidateQueries({ queryKey: ['build-progress', appId] });
       queryClient.invalidateQueries({ queryKey: ['applications'] });
     },
-    onError: () => toast.error(c.cancelDeploymentFailed),
+    onError: () => notify.error(c.cancelDeploymentFailed),
   });
 
   const cfg = phaseConfig[progress.phase];
diff --git a/frontend/src/components/database-snapshots-panel.tsx b/frontend/src/components/database-snapshots-panel.tsx
index d42b63b..0d1ca01 100644
--- a/frontend/src/components/database-snapshots-panel.tsx
+++ b/frontend/src/components/database-snapshots-panel.tsx
@@ -3,7 +3,7 @@
 import { useState, useEffect, useRef } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import api from '@/lib/api';
-import { toast } from 'react-toastify';
+import { notify } from '@/lib/notify';
 import { useT, useLocale } from '@/i18n/I18nProvider';
 import type { AppSnapshot } from '@/types';
 import { formatBytes } from '@/lib/format-utils';
@@ -87,10 +87,10 @@ export function DatabaseSnapshotsPanel({
         snap.status === 'completed' &&
         snap.dbDumpPath
       ) {
-        toast.success(sn.backupReady);
+        notify.success(sn.backupReady);
       }
       if (prevInProgressRef.current.has(snap.id) && snap.status === 'failed') {
-        toast.error(snap.errorMessage || sn.backupFailed);
+        notify.error(sn.backupFailed);
       }
     }
     prevInProgressRef.current = inProgressIds;
@@ -104,13 +104,10 @@ export function DatabaseSnapshotsPanel({
     onSuccess: () => {
       setShowPanel(true);
       queryClient.invalidateQueries({ queryKey: ['snapshots', serviceId] });
-      toast.info(sn.backupStarted);
+      notify.info(sn.backupStarted);
     },
     onError: (err: unknown) => {
-      const msg = (err as { response?: { data?: { message?: string | string[] } } })?.response?.data
-        ?.message;
-      const text = Array.isArray(msg) ? msg.join(', ') : msg;
-      toast.error(text || sn.createFailed);
+      notify.error(err, sn.createFailed);
     },
   });
 
@@ -125,9 +122,9 @@ export function DatabaseSnapshotsPanel({
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['snapshots', serviceId] });
-      toast.success(sn.backupDeleted);
+      notify.success(sn.backupDeleted);
     },
-    onError: () => toast.error(sn.deleteFailed),
+    onError: () => notify.error(sn.deleteFailed),
   });
 
   const downloadSnapshotDb = (snapshotId: string) => {
@@ -144,9 +141,9 @@ export function DatabaseSnapshotsPanel({
         link.download = `database-backup-${snapshotId.slice(0, 8)}.sql`;
         link.click();
         URL.revokeObjectURL(link.href);
-        toast.success(sn.downloadStarted);
+        notify.success(sn.downloadStarted);
       })
-      .catch(() => toast.error(sn.downloadFailed));
+      .catch(() => notify.error(sn.downloadFailed));
   };
 
   const handleDelete = async (snap: AppSnapshot) => {
diff --git a/frontend/src/components/managed-database-config.tsx b/frontend/src/components/managed-database-config.tsx
index 22f69b7..94b7bfb 100644
--- a/frontend/src/components/managed-database-config.tsx
+++ b/frontend/src/components/managed-database-config.tsx
@@ -2,7 +2,7 @@
 
 import { useRef, useState } from 'react';
 import { Database, Eye, EyeOff, RefreshCw, AlertCircle } from 'lucide-react';
-import { toast } from 'react-toastify';
+import { notify } from '@/lib/notify';
 import { useT } from '@/i18n/I18nProvider';
 import { Select } from '@/components/ui/select';
 import { ONE_GIB, minGiToFitFileBytes } from '@/lib/storage-utils';
@@ -57,11 +57,11 @@ export function ManagedDatabaseConfig({
 
   const acceptDump = (f: File) => {
     if (!f.name.endsWith('.sql') && !f.name.endsWith('.gz') && !f.name.endsWith('.dump')) {
-      toast.error(c.allowedFormats);
+      notify.error(c.allowedFormats);
       return;
     }
     if (f.size > 500 * 1024 * 1024) {
-      toast.error(c.maxSize);
+      notify.error(c.maxSize);
       return;
     }
     onDbDumpFileChange(f);
diff --git a/frontend/src/components/managed-service-resources-panel.tsx b/frontend/src/components/managed-service-resources-panel.tsx
index ac87686..cd50e05 100644
--- a/frontend/src/components/managed-service-resources-panel.tsx
+++ b/frontend/src/components/managed-service-resources-panel.tsx
@@ -3,7 +3,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import api from '@/lib/api';
-import { toast } from 'react-toastify';
+import { notify } from '@/lib/notify';
 import { useT } from '@/i18n/I18nProvider';
 import { useLocalizedRouter } from '@/i18n/navigation';
 import type { Application, Invoice, OptionalServiceResourcesMap, ResourceUsage } from '@/types';
@@ -167,11 +167,10 @@ export function ManagedServiceResourcesPanel({
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['application', serviceId] });
       queryClient.invalidateQueries({ queryKey: ['resources', serviceId] });
-      toast.success(sr.resourcesUpdated);
+      notify.success(sr.resourcesUpdated);
     },
     onError: (err: unknown) => {
-      const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
-      toast.error(msg || sr.updateFailed);
+      notify.error(err, sr.updateFailed);
     },
   });
 
@@ -188,14 +187,13 @@ export function ManagedServiceResourcesPanel({
       setPendingUpgradePayload(null);
       const paidAmount = res.data.paidAmount || 0;
       if (paidAmount > 0) {
-        toast.success(sr.upgradedPaid.replace('{amount}', paidAmount.toLocaleString('en-US')));
+        notify.success(sr.upgradedPaid.replace('{amount}', paidAmount.toLocaleString('en-US')));
       } else {
-        toast.success(sr.updatedSuccess);
+        notify.success(sr.updatedSuccess);
       }
     },
     onError: (err: unknown) => {
-      const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
-      toast.error(msg || sr.upgradeFailed);
+      notify.error(err, sr.upgradeFailed);
     },
   });
 
@@ -207,8 +205,7 @@ export function ManagedServiceResourcesPanel({
       setShowUpgradeConfirm(true);
     },
     onError: (err: unknown) => {
-      const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
-      toast.error(msg || sr.calcFailed);
+      notify.error(err, sr.calcFailed);
     },
   });
 
@@ -216,7 +213,7 @@ export function ManagedServiceResourcesPanel({
     mutationFn: (data: UpgradePayload) =>
       api.post<Invoice>(`/billing/applications/${serviceId}/upgrade/invoice`, data).then((r) => r.data),
     onSuccess: (invoice) => {
-      toast.success(sr.invoiceCreated);
+      notify.success(sr.invoiceCreated);
       queryClient.invalidateQueries({ queryKey: ['invoices'] });
       setShowUpgradeConfirm(false);
       setUpgradeCostData(null);
@@ -224,8 +221,7 @@ export function ManagedServiceResourcesPanel({
       router.push(`/dashboard/invoices?invoice=${invoice.id}`);
     },
     onError: (err: unknown) => {
-      const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
-      toast.error(msg || sr.invoiceFailed);
+      notify.error(err, sr.invoiceFailed);
     },
   });
 
@@ -240,12 +236,11 @@ export function ManagedServiceResourcesPanel({
     onSuccess: (res) => {
       const data = res.data;
       setDbRestoreLogs(data.logs || null);
-      if (data.success) toast.success(sr.restoredSuccess);
-      else toast.error(data.message || sr.restoreFailed);
+      if (data.success) notify.success(sr.restoredSuccess);
+      else notify.error(sr.restoreFailed);
     },
     onError: (err: unknown) => {
-      const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
-      toast.error(msg || sr.uploadFailed);
+      notify.error(err, sr.uploadFailed);
       setDbRestoreLogs(null);
     },
   });
@@ -253,11 +248,11 @@ export function ManagedServiceResourcesPanel({
   const handleDbFileUpload = useCallback(
     (file: File) => {
       if (!file.name.endsWith('.sql') && !file.name.endsWith('.gz') && !file.name.endsWith('.dump')) {
-        toast.error(sr.invalidFile);
+        notify.error(sr.invalidFile);
         return;
       }
       if (file.size > 500 * 1024 * 1024) {
-        toast.error(sr.fileTooLarge);
+        notify.error(sr.fileTooLarge);
         return;
       }
       setDbRestoreLogs(null);
@@ -300,7 +295,7 @@ export function ManagedServiceResourcesPanel({
 
   const applyResources = () => {
     if (needsRenewal) {
-      toast.warn(sr.renewFirst);
+      notify.warning(sr.renewFirst);
       return;
     }
 
diff --git a/frontend/src/components/providers.tsx b/frontend/src/components/providers.tsx
index e718683..555a41d 100644
--- a/frontend/src/components/providers.tsx
+++ b/frontend/src/components/providers.tsx
@@ -5,6 +5,8 @@ import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { useEffect, useState } from 'react';
 import { useAuthStore } from '@/lib/store';
+import { useLocale } from '@/i18n/I18nProvider';
+import { dirFor } from '@/i18n/config';
 import { ModalProvider } from './confirm-modal';
 
 const queryClient = new QueryClient({
@@ -18,6 +20,8 @@ const queryClient = new QueryClient({
 
 export function Providers({ children }: { children: React.ReactNode }) {
   const loadUser = useAuthStore((s) => s.loadUser);
+  const locale = useLocale();
+  const isRtl = dirFor(locale) === 'rtl';
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
@@ -32,7 +36,19 @@ export function Providers({ children }: { children: React.ReactNode }) {
       <ModalProvider>
         {children}
       </ModalProvider>
-      <ToastContainer position="top-right" autoClose={3000} hideProgressBar={false} closeOnClick pauseOnHover theme="light" />
+      <ToastContainer
+        position={isRtl ? 'top-left' : 'top-right'}
+        rtl={isRtl}
+        autoClose={4000}
+        newestOnTop
+        closeOnClick
+        pauseOnHover
+        draggable
+        icon={false}
+        theme="light"
+        toastClassName="abrban-toast"
+        className="abrban-toast-container"
+      />
     </QueryClientProvider>
   );
 }
diff --git a/frontend/src/components/service-external-access-panel.tsx b/frontend/src/components/service-external-access-panel.tsx
index c6ba7f9..a905c65 100644
--- a/frontend/src/components/service-external-access-panel.tsx
+++ b/frontend/src/components/service-external-access-panel.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import api from '@/lib/api';
-import { toast } from 'react-toastify';
+import { notify } from '@/lib/notify';
 import { useT } from '@/i18n/I18nProvider';
 import { Select } from '@/components/ui/select';
 import type { Application, ServiceAccessGrant, ServiceAccessTarget } from '@/types';
@@ -70,11 +70,10 @@ export function ServiceExternalAccessPanel({
     onSuccess: () => {
       refetchAccessGrants();
       queryClient.invalidateQueries({ queryKey: ['access-grants', appId] });
-      toast.success(accessPersistent ? ea.permanentEnabled : ea.temporaryEnabled);
+      notify.success(accessPersistent ? ea.permanentEnabled : ea.temporaryEnabled);
     },
     onError: (err: unknown) => {
-      const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
-      toast.error(msg || ea.enableFailed);
+      notify.error(err, ea.enableFailed);
     },
   });
 
@@ -83,9 +82,9 @@ export function ServiceExternalAccessPanel({
     onSuccess: () => {
       refetchAccessGrants();
       queryClient.invalidateQueries({ queryKey: ['access-grants', appId] });
-      toast.success(ea.revoked);
+      notify.success(ea.revoked);
     },
-    onError: () => toast.error(ea.revokeFailed),
+    onError: () => notify.error(ea.revokeFailed),
   });
 
   const copyToClipboard = (text: string, field: string) => {
diff --git a/frontend/src/i18n/I18nProvider.tsx b/frontend/src/i18n/I18nProvider.tsx
index 49b5c9b..7aa7d99 100644
--- a/frontend/src/i18n/I18nProvider.tsx
+++ b/frontend/src/i18n/I18nProvider.tsx
@@ -3,6 +3,7 @@
 import { createContext, useContext, type ReactNode } from 'react';
 import type { Locale } from './config';
 import type { Dictionary } from './dictionaries/fa';
+import { setNotifyDict } from '@/lib/notify';
 
 type I18nContextValue = {
   locale: Locale;
@@ -20,6 +21,9 @@ export function I18nProvider({
   dict: Dictionary;
   children: ReactNode;
 }) {
+  // Register the active dictionary so the standalone `notify.error` helper can
+  // resolve localized, user-friendly error messages.
+  setNotifyDict(dict);
   return <I18nContext.Provider value={{ locale, dict }}>{children}</I18nContext.Provider>;
 }
 
diff --git a/frontend/src/i18n/dictionaries/en.ts b/frontend/src/i18n/dictionaries/en.ts
index 8654fc6..14e4a7e 100644
--- a/frontend/src/i18n/dictionaries/en.ts
+++ b/frontend/src/i18n/dictionaries/en.ts
@@ -26,6 +26,19 @@ const en: Dictionary = {
     currencyShort: 'T',
   },
 
+  errors: {
+    generic: 'Something went wrong. Please try again.',
+    network: 'Could not reach the server. Check your internet connection.',
+    timeout: 'The server took too long to respond. Please try again.',
+    unauthorized: 'Your session has expired. Please sign in again.',
+    forbidden: 'You do not have permission to do this.',
+    notFound: 'The requested item was not found.',
+    conflict: 'This action conflicts with the current state. Refresh and try again.',
+    validation: 'The information you entered is invalid. Please check your input.',
+    rateLimit: 'Too many requests. Please wait a moment and try again.',
+    server: 'A server error occurred. Please try again shortly.',
+  },
+
   language: {
     label: 'Language',
   },
@@ -1080,7 +1093,7 @@ const en: Dictionary = {
       upgradedPaid: 'Resources upgraded! Paid {amount} Toman',
       upgradeFailed: 'Failed to upgrade resources', calcFailed: 'Failed to calculate upgrade cost',
       invoiceCreated: 'Invoice created. Choose how you want to pay.', invoiceFailed: 'Failed to create upgrade invoice',
-      dbRestored: 'Database restored successfully!', dbInvalidFile: 'Please upload a .sql, .dump, or .gz file',
+      dbRestored: 'Database restored successfully!', dbRestoreFailed: 'Database restore failed.', dbInvalidFile: 'Please upload a .sql, .dump, or .gz file',
       fileMax500: 'File size must be less than 500MB', dbUploadFailed: 'Failed to upload database dump',
       snapshotStarted: 'Snapshot creation started', snapshotCreateFailed: 'Failed to create snapshot',
       snapshotDeleted: 'Snapshot deleted', snapshotDeleteFailed: 'Failed to delete snapshot',
diff --git a/frontend/src/i18n/dictionaries/fa.ts b/frontend/src/i18n/dictionaries/fa.ts
index fc1e553..6192fc2 100644
--- a/frontend/src/i18n/dictionaries/fa.ts
+++ b/frontend/src/i18n/dictionaries/fa.ts
@@ -25,6 +25,19 @@ const fa = {
     currencyShort: 'ت',
   },
 
+  errors: {
+    generic: 'مشکلی پیش آمد. لطفاً دوباره تلاش کنید.',
+    network: 'ارتباط با سرور برقرار نشد. اتصال اینترنت خود را بررسی کنید.',
+    timeout: 'پاسخ سرور بیش از حد طول کشید. لطفاً دوباره تلاش کنید.',
+    unauthorized: 'نشست شما منقضی شده است. لطفاً دوباره وارد شوید.',
+    forbidden: 'شما اجازهٔ انجام این کار را ندارید.',
+    notFound: 'مورد درخواستی پیدا نشد.',
+    conflict: 'این عملیات با وضعیت فعلی تداخل دارد. صفحه را تازه کنید و دوباره تلاش کنید.',
+    validation: 'اطلاعات واردشده درست نیست. لطفاً ورودی‌ها را بررسی کنید.',
+    rateLimit: 'تعداد درخواست‌ها زیاد است. کمی صبر کنید و دوباره تلاش کنید.',
+    server: 'خطایی در سرور رخ داد. لطفاً کمی بعد دوباره تلاش کنید.',
+  },
+
   language: {
     label: 'زبان',
   },
@@ -1081,7 +1094,7 @@ const fa = {
       upgradedPaid: 'منابع ارتقا یافت! {amount} تومان پرداخت شد',
       upgradeFailed: 'ارتقای منابع ناموفق بود', calcFailed: 'محاسبهٔ هزینهٔ ارتقا ناموفق بود',
       invoiceCreated: 'فاکتور ساخته شد. روش پرداخت را انتخاب کن.', invoiceFailed: 'ساخت فاکتور ارتقا ناموفق بود',
-      dbRestored: 'دیتابیس با موفقیت بازیابی شد!', dbInvalidFile: 'لطفاً فایل .sql، .dump یا .gz آپلود کن',
+      dbRestored: 'دیتابیس با موفقیت بازیابی شد!', dbRestoreFailed: 'بازیابی دیتابیس ناموفق بود.', dbInvalidFile: 'لطفاً فایل .sql، .dump یا .gz آپلود کن',
       fileMax500: 'حجم فایل باید کمتر از ۵۰۰ مگابایت باشد', dbUploadFailed: 'آپلود dump دیتابیس ناموفق بود',
       snapshotStarted: 'ساخت اسنپ‌شات آغاز شد', snapshotCreateFailed: 'ساخت اسنپ‌شات ناموفق بود',
       snapshotDeleted: 'اسنپ‌شات حذف شد', snapshotDeleteFailed: 'حذف اسنپ‌شات ناموفق بود',
diff --git a/frontend/src/lib/errors.ts b/frontend/src/lib/errors.ts
new file mode 100644
index 0000000..2e65759
--- /dev/null
+++ b/frontend/src/lib/errors.ts
@@ -0,0 +1,116 @@
+import axios from 'axios';
+import type { Dictionary } from '@/i18n/dictionaries/fa';
+
+/** Coarse buckets we can map to a friendly, localized message. */
+export type ApiErrorKind =
+  | 'network'
+  | 'timeout'
+  | 'unauthorized'
+  | 'forbidden'
+  | 'notFound'
+  | 'conflict'
+  | 'validation'
+  | 'rateLimit'
+  | 'server'
+  | 'generic';
+
+export interface ClassifiedError {
+  kind: ApiErrorKind;
+  /** HTTP status when the request reached the server, otherwise undefined. */
+  status?: number;
+  /** Raw backend message(s) — for logging only, never shown to the user. */
+  backendMessage?: string;
+}
+
+/** Flattens NestJS-style `message: string | string[]` into one string. */
+function readBackendMessage(data: unknown): string | undefined {
+  if (!data || typeof data !== 'object') return undefined;
+  const msg = (data as { message?: unknown; error?: unknown }).message ?? (data as { error?: unknown }).error;
+  if (Array.isArray(msg)) return msg.filter(Boolean).join(' · ');
+  if (typeof msg === 'string' && msg.trim()) return msg.trim();
+  return undefined;
+}
+
+/**
+ * Maps any thrown value (axios error, Error, unknown) to a coarse {@link ApiErrorKind}.
+ * Pure — does not log or surface anything. Backend text is captured for logs only.
+ */
+export function classifyApiError(err: unknown): ClassifiedError {
+  if (axios.isAxiosError(err)) {
+    const status = err.response?.status;
+    const backendMessage = readBackendMessage(err.response?.data);
+
+    if (!err.response) {
+      const kind: ApiErrorKind = err.code === 'ECONNABORTED' ? 'timeout' : 'network';
+      return { kind, backendMessage };
+    }
+
+    let kind: ApiErrorKind = 'generic';
+    if (status === 401) kind = 'unauthorized';
+    else if (status === 403) kind = 'forbidden';
+    else if (status === 404) kind = 'notFound';
+    else if (status === 409) kind = 'conflict';
+    else if (status === 422 || status === 400) kind = 'validation';
+    else if (status === 429) kind = 'rateLimit';
+    else if (status !== undefined && status >= 500) kind = 'server';
+
+    return { kind, status, backendMessage };
+  }
+
+  return { kind: 'generic' };
+}
+
+/**
+ * Logs the full technical detail of an error to the console (dev tools only).
+ * This is the single place raw backend text is allowed to appear.
+ */
+export function logApiError(context: string, err: unknown, classified?: ClassifiedError): void {
+  const c = classified ?? classifyApiError(err);
+  // eslint-disable-next-line no-console
+  console.error(
+    `[${context}] ${c.kind}${c.status ? ` (${c.status})` : ''}`,
+    c.backendMessage ? `— ${c.backendMessage}` : '',
+    err,
+  );
+}
+
+/**
+ * Resolves a user-facing, localized message for an error. The raw backend
+ * message is never returned; callers may pass a context-specific `fallback`
+ * (already localized) that wins over the generic per-kind copy.
+ */
+export function friendlyErrorMessage(
+  err: unknown,
+  dict: Dictionary,
+  fallback?: string,
+): string {
+  const { kind } = classifyApiError(err);
+  const e = dict.errors;
+
+  // Infrastructure-level problems are never described better by a page-specific
+  // fallback, so their copy always wins.
+  if (kind === 'network') return e.network;
+  if (kind === 'timeout') return e.timeout;
+  if (kind === 'rateLimit') return e.rateLimit;
+  if (kind === 'server') return e.server;
+
+  // For request-shaped problems (401/403/404/409/422), the caller's contextual
+  // message is usually the most helpful (e.g. "Invalid email or password" on the
+  // login form rather than a generic "session expired").
+  if (fallback) return fallback;
+
+  switch (kind) {
+    case 'unauthorized':
+      return e.unauthorized;
+    case 'forbidden':
+      return e.forbidden;
+    case 'notFound':
+      return e.notFound;
+    case 'conflict':
+      return e.conflict;
+    case 'validation':
+      return e.validation;
+    default:
+      return e.generic;
+  }
+}
diff --git a/frontend/src/lib/notify.tsx b/frontend/src/lib/notify.tsx
new file mode 100644
index 0000000..ba18991
--- /dev/null
+++ b/frontend/src/lib/notify.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import { toast, type ToastOptions } from 'react-toastify';
+import { CheckCircle2, XCircle, AlertTriangle, Info } from 'lucide-react';
+import type { ReactNode } from 'react';
+import type { Dictionary } from '@/i18n/dictionaries/fa';
+import { classifyApiError, friendlyErrorMessage, logApiError } from '@/lib/errors';
+
+type Variant = 'success' | 'error' | 'warning' | 'info';
+
+const VARIANTS: Record<Variant, { icon: ReactNode; ring: string }> = {
+  success: { icon: <CheckCircle2 className="w-5 h-5 text-emerald-500" />, ring: 'bg-emerald-50' },
+  error: { icon: <XCircle className="w-5 h-5 text-red-500" />, ring: 'bg-red-50' },
+  warning: { icon: <AlertTriangle className="w-5 h-5 text-amber-500" />, ring: 'bg-amber-50' },
+  info: { icon: <Info className="w-5 h-5 text-primary-500" />, ring: 'bg-primary-50' },
+};
+
+/**
+ * The active dictionary, registered by I18nProvider. Lets the standalone
+ * `notify.error` resolve a localized friendly message without every call site
+ * having to thread the dictionary through a hook.
+ */
+let activeDict: Dictionary | null = null;
+export function setNotifyDict(dict: Dictionary) {
+  activeDict = dict;
+}
+
+/** Custom toast body styled to match the dashboard (card, icon chip, project font). */
+function ToastBody({ variant, message }: { variant: Variant; message: ReactNode }) {
+  const v = VARIANTS[variant];
+  return (
+    <div className="flex items-center gap-3">
+      <span className={`shrink-0 flex items-center justify-center w-9 h-9 rounded-xl ${v.ring}`}>
+        {v.icon}
+      </span>
+      <p className="text-sm font-medium text-gray-800 leading-snug">{message}</p>
+    </div>
+  );
+}
+
+function show(variant: Variant, message: ReactNode, options?: ToastOptions) {
+  return toast(<ToastBody variant={variant} message={message} />, { type: variant, ...options });
+}
+
+/**
+ * Project-styled toast helpers. The visual shell (rounded card, shadow, RTL,
+ * progress bar color) lives in globals.css under the `.Toastify__*` overrides.
+ *
+ * `error()` is the important one for error handling: pass the raw caught error
+ * and an optional localized `fallback`. The technical detail is logged to the
+ * console only; the user sees a friendly, localized message — the raw backend
+ * message is never surfaced. Passing a string shows it directly (for the rare
+ * case where the caller already has a final, user-ready string).
+ */
+export const notify = {
+  success: (message: ReactNode, options?: ToastOptions) => show('success', message, options),
+  warning: (message: ReactNode, options?: ToastOptions) => show('warning', message, options),
+  info: (message: ReactNode, options?: ToastOptions) => show('info', message, options),
+  error: (errOrMessage: unknown, fallback?: string, context = 'request') => {
+    if (typeof errOrMessage === 'string') {
+      return show('error', errOrMessage);
+    }
+    const classified = classifyApiError(errOrMessage);
+    logApiError(context, errOrMessage, classified);
+    const message = activeDict
+      ? friendlyErrorMessage(errOrMessage, activeDict, fallback)
+      : fallback ?? 'Something went wrong. Please try again.';
+    return show('error', message);
+  },
+};
diff --git a/frontend/src/lib/use-application-delete.ts b/frontend/src/lib/use-application-delete.ts
index 7207253..8ed7ef5 100644
--- a/frontend/src/lib/use-application-delete.ts
+++ b/frontend/src/lib/use-application-delete.ts
@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import api from '@/lib/api';
-import { toast } from 'react-toastify';
+import { notify } from '@/lib/notify';
 
 type DeleteResponse = { resourceCredit?: unknown };
 
@@ -34,14 +34,14 @@ export function useApplicationDelete(options?: {
       if (options?.onSuccess) {
         options.onSuccess(data, id);
       } else if (data?.resourceCredit && options?.successWithCreditMessage) {
-        toast.success(options.successWithCreditMessage);
+        notify.success(options.successWithCreditMessage);
       } else {
-        toast.success(options?.successMessage ?? 'Deleted successfully');
+        notify.success(options?.successMessage ?? 'Deleted successfully');
       }
     },
     onError: () => {
       if (options?.onError) options.onError();
-      else toast.error('Failed to delete');
+      else notify.error('Failed to delete');
     },
   });