diff --git a/components/cards/settings/NotificationProviderSettings.tsx b/components/cards/settings/NotificationProviderSettings.tsx
index aa2ba8b..8fa0b91 100644
--- a/components/cards/settings/NotificationProviderSettings.tsx
+++ b/components/cards/settings/NotificationProviderSettings.tsx
@@ -1,90 +1,220 @@
-'use client';
+"use client"
 
-import { useState } from 'react';
-import AddNotification from '@/components/dialogues/AddNotification';
-import DeleteNotification from '@/components/dialogues/DeleteNotification';
-import TestNotification from '@/components/dialogues/TestNotification';
-import useNotifications from '@/hooks/useNotifications';
-import { Plus, Trash2, Play, Bell } from 'lucide-react';
-import Loading from '@/components/Loading';
+import { useState } from "react"
+import AddNotification from "@/components/dialogues/AddNotification"
+import DeleteNotification from "@/components/dialogues/DeleteNotification"
+import TestNotification from "@/components/dialogues/TestNotification"
+import useNotifications from "@/hooks/useNotifications"
+import { Plus, Trash2, Play, Bell, Settings, CheckCircle, AlertCircle } from "lucide-react"
+import Loading from "@/components/Loading"
 
-export const NotificationProviderSettings = ({ onError, onSuccess }: { onError: (message: string) => void, onSuccess: (message: string) => void }) => {
-    const { loadNotifications, notifications, loading, testNotification } = useNotifications();
-    const [deleteNotificationId, setDeleteNotificationId] = useState<number | null>(null);
-    const [notificationTestId, setNotificationTestId] = useState<number | null>(null);
+export const NotificationProviderSettings = ({
+  onError,
+  onSuccess,
+}: { onError: (message: string) => void; onSuccess: (message: string) => void }) => {
+  const { loadNotifications, notifications, loading, testNotification } = useNotifications()
+  const [deleteNotificationId, setDeleteNotificationId] = useState<number | null>(null)
+  const [notificationTestId, setNotificationTestId] = useState<number | null>(null)
 
+  const testNotificationHandler = async (notificationProviderId: number) => {
+    ;(document.getElementById("test_notification") as HTMLDialogElement)?.showModal()
+    const notificationTest = await testNotification(notificationProviderId)
+    setNotificationTestId(notificationTest)
+  }
 
-    const testNotificationHandler = async (notificationProviderId: number) => {
-        (document.getElementById('test_notification') as HTMLDialogElement)?.showModal();
-        const notificationTest = await testNotification(notificationProviderId);
-        setNotificationTestId(notificationTest);
+  const getTypeIcon = (type: string) => {
+    switch (type.toLowerCase()) {
+      case "email":
+        return "📧"
+      case "slack":
+        return "💬"
+      case "discord":
+        return "🎮"
+      case "webhook":
+        return "🔗"
+      case "telegram":
+        return "✈️"
+      default:
+        return "🔔"
     }
+  }
+
+  const getTypeBadgeColor = (type: string) => {
+    switch (type.toLowerCase()) {
+      case "email":
+        return "badge-primary"
+      case "slack":
+        return "badge-secondary"
+      case "discord":
+        return "badge-accent"
+      case "webhook":
+        return "badge-info"
+      case "telegram":
+        return "badge-success"
+      default:
+        return "badge-neutral"
+    }
+  }
 
   return (
-    <div>
-        <div className="w-full bg-base-200 p-4 rounded-2xl border border-stone-800">
-            <div className="flex items-center justify-between">
-                <div>
-                    <h2 className="text-lg font-bold">Notification Provider Settings</h2>
-                    <p className="text-sm opacity-70">Manage your notification providers</p>
-                </div>
-                <button className="btn btn-primary" onClick={() => (document.getElementById('add_notification') as HTMLDialogElement)?.showModal()}>
-                    <Plus className="w-5 h-5" />
-                    Add Provider
-                </button>
-            </div>
-            {loading ? (
-                <div className="flex justify-center items-center h-64 w-full">
-                    <Loading />
-                </div>
-            ) : notifications && notifications.length > 0 ? (
-                <div className="rounded-xl overflow-hidden border border-base-200 mt-4">
-                    <div className='overflow-x-auto'>
-                        <table className='table table-zebra table-pin-cols'>
-                            <thead>
-                                <tr>
-                                    <th>#</th>
-                                    <th>Name</th>
-                                    <th>Type</th>
-                                    <th className='w-24 text-center'>Actions</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {notifications.map((notification: any) => (
-                                    <tr key={notification.id}>
-                                        <td>{notification.id}</td>
-                                        <td>{notification.name}</td>
-                                        <td>{notification.type}</td>
-                                        <td>
-                                            <div className='flex items-center gap-2'>
-                                                <button className='btn btn-sm btn-success' onClick={() => testNotificationHandler(notification.id)}><Play className='w-4 h-4' /></button>
-                                                <button className='btn btn-sm btn-error' onClick={() => {setDeleteNotificationId(notification.id); (document.getElementById('delete_notification') as HTMLDialogElement)?.showModal()}}><Trash2 className='w-4 h-4' /></button>
-                                            </div>
-                                        </td>
-                                    </tr>
-                                ))}
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            ) : (
-                <div className='pt-4'>
-                    <div className="flex flex-col items-center justify-center py-12 bg-base-300 rounded-xl">
-                        <div className="bg-base-100 p-4 rounded-full mb-4">
-                            <Bell className="h-8 w-8 text-base-content/50" />
-                        </div>
-                        <p className="text-base-content/70 mb-4">No notification providers have been added yet.</p>
-                    </div>
-                </div>
-            )}
-            <AddNotification onNotificationAdded={loadNotifications} onSuccess={onSuccess} onError={onError} />
-            {deleteNotificationId && (
-                <DeleteNotification notificationId={deleteNotificationId} onNotificationDeleted={loadNotifications} onError={onError} onSuccess={onSuccess} />
-            )}
-            {notificationTestId && (
-                <TestNotification notificationTestId={notificationTestId} onError={onError} />
-            )}
+    <div className="w-full bg-base-200 p-6 rounded-2xl border border-stone-800">
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
+        <div className="flex items-center gap-3">
+          <div className="p-2 bg-primary/10 rounded-lg">
+            <Settings className="w-6 h-6 text-primary" />
+          </div>
+          <div>
+            <h2 className="text-xl font-bold">Notification Providers</h2>
+            <p className="text-sm opacity-70">Manage your notification providers and test connections</p>
+          </div>
         </div>
+        <button
+          className="btn btn-primary gap-2 shadow-lg hover:shadow-xl transition-shadow"
+          onClick={() => (document.getElementById("add_notification") as HTMLDialogElement)?.showModal()}
+        >
+          <Plus className="w-5 h-5" />
+          Add Provider
+        </button>
+      </div>
+
+      {/* Content */}
+      {loading ? (
+        <div className="flex justify-center items-center h-64 w-full">
+          <Loading />
+        </div>
+      ) : notifications && notifications.length > 0 ? (
+        <div className="card bg-base-100 shadow-lg border border-base-300">
+          <div className="card-body p-0">
+
+            {/* Table Content */}
+            <div className="overflow-x-auto">
+              <table className="table table-zebra">
+                <thead>
+                  <tr className="border-base-300">
+                    <th className="bg-base-200/30">
+                      <span className="text-xs font-semibold uppercase tracking-wider text-base-content/70">ID</span>
+                    </th>
+                    <th className="bg-base-200/30">
+                      <span className="text-xs font-semibold uppercase tracking-wider text-base-content/70">
+                        Provider
+                      </span>
+                    </th>
+                    <th className="bg-base-200/30">
+                      <span className="text-xs font-semibold uppercase tracking-wider text-base-content/70">Type</span>
+                    </th>
+                    <th className="bg-base-200/30">
+                      <span className="text-xs font-semibold uppercase tracking-wider text-base-content/70">
+                        Status
+                      </span>
+                    </th>
+                    <th className="bg-base-200/30 text-center">
+                      <span className="text-xs font-semibold uppercase tracking-wider text-base-content/70">
+                        Actions
+                      </span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {notifications.map((notification: any, index: number) => (
+                    <tr key={notification.id} className="hover:bg-base-200/50 transition-colors">
+                      <td>
+                        <div className="flex items-center gap-2">
+                          <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-sm font-semibold text-primary">
+                            {notification.id}
+                          </div>
+                        </div>
+                      </td>
+                      <td>
+                        <div className="flex items-center gap-3">
+                          <div className="text-2xl">{getTypeIcon(notification.type)}</div>
+                          <div>
+                            <div className="font-semibold text-base-content">{notification.name}</div>
+                            <div className="text-sm text-base-content/60">Provider #{notification.id}</div>
+                          </div>
+                        </div>
+                      </td>
+                      <td>
+                        <div className={`badge badge-outline badge-sm ${getTypeBadgeColor(notification.type)}`}>
+                          {notification.type}
+                        </div>
+                      </td>
+                      <td>
+                        <div className="flex items-center gap-2">
+                          <CheckCircle className="w-4 h-4 text-success" />
+                          <span className="text-sm font-medium text-success">Active</span>
+                        </div>
+                      </td>
+                      <td>
+                        <div className="flex items-center justify-center gap-2">
+                          <div className="tooltip tooltip-top" data-tip="Test Provider">
+                            <button
+                              className="btn btn-sm btn-success hover:btn-success/80 transition-colors shadow-md"
+                              onClick={() => testNotificationHandler(notification.id)}
+                            >
+                              <Play className="w-4 h-4" />
+                            </button>
+                          </div>
+                          <div className="tooltip tooltip-top" data-tip="Delete Provider">
+                            <button
+                              className="btn btn-sm btn-error hover:btn-error/80 transition-colors shadow-md"
+                              onClick={() => {
+                                setDeleteNotificationId(notification.id)
+                                ;(document.getElementById("delete_notification") as HTMLDialogElement)?.showModal()
+                              }}
+                            >
+                              <Trash2 className="w-4 h-4" />
+                            </button>
+                          </div>
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="card bg-base-100 shadow-lg border border-base-300">
+          <div className="card-body">
+            <div className="flex flex-col items-center justify-center py-16">
+              <div className="relative mb-6">
+                <div className="w-20 h-20 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-full flex items-center justify-center">
+                  <Bell className="w-10 h-10 text-primary/60" />
+                </div>
+                <div className="absolute -top-1 -right-1 w-6 h-6 bg-warning rounded-full flex items-center justify-center">
+                  <AlertCircle className="w-4 h-4 text-warning-content" />
+                </div>
+              </div>
+              <h3 className="text-lg font-semibold text-base-content mb-2">No Providers Configured</h3>
+              <p className="text-base-content/70 text-center mb-6 max-w-md">
+                Get started by adding your first notification provider. You can configure email, Slack, Discord,
+                webhooks, and more.
+              </p>
+              <button
+                className="btn btn-primary gap-2 shadow-lg hover:shadow-xl transition-shadow"
+                onClick={() => (document.getElementById("add_notification") as HTMLDialogElement)?.showModal()}
+              >
+                <Plus className="w-5 h-5" />
+                Add Your First Provider
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Dialogs */}
+      <AddNotification onNotificationAdded={loadNotifications} onSuccess={onSuccess} onError={onError} />
+      {deleteNotificationId && (
+        <DeleteNotification
+          notificationId={deleteNotificationId}
+          onNotificationDeleted={loadNotifications}
+          onError={onError}
+          onSuccess={onSuccess}
+        />
+      )}
+      {notificationTestId && <TestNotification notificationTestId={notificationTestId} onError={onError} />}
     </div>
-  );
-};
\ No newline at end of file
+  )
+}
diff --git a/components/cards/settings/NotificationSettings.tsx b/components/cards/settings/NotificationSettings.tsx
index ad0990a..8bc3074 100644
--- a/components/cards/settings/NotificationSettings.tsx
+++ b/components/cards/settings/NotificationSettings.tsx
@@ -202,7 +202,7 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
                 <p className="text-sm opacity-70">Monitor server resources and performance</p>
               </div>
               <span
-                className={`px-3 py-1 rounded-full text-xs font-medium ${
+                className={`px-3 py-1 rounded-full text-xs font-medium w-20 text-center ${
                   serverSettings?.enabled ? "bg-success text-white" : "bg-error text-white"
                 }`}
               >
@@ -419,7 +419,7 @@ export const NotificationSettings = ({ onError, onSuccess }: NotificationSetting
                 <p className="text-sm opacity-70">Configure application monitoring notifications</p>
               </div>
               <span
-                className={`px-3 py-1 rounded-full text-xs font-medium ${
+                className={`px-3 py-1 rounded-full text-xs font-medium w-20 text-center ${
                   applicationsSettings?.enabled ? "bg-success text-white" : "bg-error text-white"
                 }`}
               >