diff --git a/app/dashboard/settings/SettingsPage.tsx b/app/dashboard/settings/SettingsPage.tsx
index ac07af7..19388f6 100644
--- a/app/dashboard/settings/SettingsPage.tsx
+++ b/app/dashboard/settings/SettingsPage.tsx
@@ -54,7 +54,7 @@ export default function SettingsPage({ username, name, email }: SettingsPageProp
               type="radio" 
               name="settings" 
               className="tab text-primary z-10" 
-              aria-label="Notification Settings" 
+              aria-label="Notification Settings"
             />
             <div className="tab-content relative bg-base-100 pl-4 pt-4">
               <div className="absolute -top-[3px] left-6 right-0 h-[2px] bg-stone-800"></div>
diff --git a/components/cards/settings/NotificationSettings.tsx b/components/cards/settings/NotificationSettings.tsx
index 917a82b..500f016 100644
--- a/components/cards/settings/NotificationSettings.tsx
+++ b/components/cards/settings/NotificationSettings.tsx
@@ -5,9 +5,10 @@ import AddNotification from '@/components/dialogues/AddNotification';
 import DeleteNotification from '@/components/dialogues/DeleteNotification';
 import useNotifications from '@/hooks/useNotifications';
 import { Plus, Trash2, Play, Bell } from 'lucide-react';
+import Loading from '@/components/Loading';
 
 export const NotificationSettings = ({ onError, onSuccess }: { onError: (message: string) => void, onSuccess: (message: string) => void }) => {
-    const { loadNotifications, notifications } = useNotifications();
+    const { loadNotifications, notifications, loading } = useNotifications();
     const [deleteNotificationId, setDeleteNotificationId] = useState<number | null>(null);
 
   return (
@@ -23,43 +24,47 @@ export const NotificationSettings = ({ onError, onSuccess }: { onError: (message
                     Add Provider
                 </button>
             </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'><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>
+            {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>
-                            ))}
-                        </tbody>
-                    </table>
+                            </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'><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 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>
             )}