diff --git a/src/components/shared/FailedEmailsTable.tsx b/src/components/shared/FailedEmailsTable.tsx
index f3531b6..8dcc3b8 100644
--- a/src/components/shared/FailedEmailsTable.tsx
+++ b/src/components/shared/FailedEmailsTable.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { failedEmailsService, type FailedEmail } from '../../services/failed-emails-service';
-import { DataTable } from './DataTable';
+import { DataTable, type Column } from './DataTable';
 import { Modal } from './Modal';
 import { Button } from '@/components/ui/button';
 import { StatusBadge } from './StatusBadge';
@@ -8,6 +8,8 @@ import { Eye, RefreshCw, Trash2, Loader2 } from 'lucide-react';
 import { format } from 'date-fns';
 import { toast } from 'sonner';
 import { Pagination } from './Pagination';
+import { ActionDropdown } from './ActionDropdown';
+import { PrimaryButton } from './PrimaryButton';
 
 export const FailedEmailsTable: React.FC = () => {
   const [emails, setEmails] = useState<FailedEmail[]>([]);
@@ -84,7 +86,7 @@ export const FailedEmailsTable: React.FC = () => {
     setIsModalVisible(true);
   };
 
-  const columns = [
+  const columns: Column<FailedEmail>[] = [
     {
       label: 'Date',
       key: 'created_at',
@@ -112,80 +114,81 @@ export const FailedEmailsTable: React.FC = () => {
     {
       label: 'Actions',
       key: 'actions',
+      align: 'right',
       render: (record: FailedEmail) => (
-        <div className="flex items-center gap-2">
-          <Button 
-            variant="ghost" 
-            size="icon" 
-            onClick={() => showEmailDetails(record)} 
-            title="View Details"
-          >
-            <Eye className="w-4 h-4" />
-          </Button>
-          {record.status === 'failed' && (
-            <Button 
-              variant="outline" 
-              size="icon" 
-              onClick={() => handleResend(record.id)} 
-              title="Resend Email"
-              disabled={resendingId === record.id}
-            >
-              {resendingId === record.id ? (
-                <Loader2 className="w-4 h-4 animate-spin" />
-              ) : (
-                <RefreshCw className="w-4 h-4" />
-              )}
-            </Button>
-          )}
-          <Button 
-            variant="destructive" 
-            size="icon" 
-            onClick={() => handleDelete(record.id)} 
-            title="Delete Email"
-          >
-            <Trash2 className="w-4 h-4" />
-          </Button>
+        <div className="flex justify-end">
+          <ActionDropdown
+            actions={[
+              {
+                label: 'View Details',
+                onClick: () => showEmailDetails(record),
+                icon: <Eye className="w-3.5 h-3.5 text-gray-500" />
+              },
+              ...(record.status === 'failed'
+                ? [
+                    {
+                      label: resendingId === record.id ? 'Resending...' : 'Resend Email',
+                      onClick: () => handleResend(record.id),
+                      icon: resendingId === record.id ? (
+                        <Loader2 className="w-3.5 h-3.5 animate-spin text-blue-600" />
+                      ) : (
+                        <RefreshCw className="w-3.5 h-3.5 text-gray-500" />
+                      )
+                    }
+                  ]
+                : []),
+              {
+                label: 'Delete Email',
+                onClick: () => handleDelete(record.id),
+                icon: <Trash2 className="w-3.5 h-3.5 text-red-600" />,
+                variant: 'danger'
+              }
+            ]}
+          />
         </div>
       )
     }
   ];
 
   return (
-    <div className="p-4 sm:p-6 lg:p-8 bg-white min-h-[calc(100vh-64px)] overflow-hidden">
-      <div className="mb-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
-        <h2 className="text-xl font-bold text-[#0f1724]">Failed Emails Log</h2>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" onClick={() => fetchEmails(currentPage)}>
-            <RefreshCw className="mr-2 w-4 h-4" />
+    <div className="bg-white border border-[rgba(0,0,0,0.08)] rounded-lg shadow-[0px_4px_24px_0px_rgba(0,0,0,0.02)] overflow-hidden">
+      {/* Toolbar / Actions Header */}
+      <div className="border-b border-[rgba(0,0,0,0.08)] px-4 md:px-5 py-3 flex flex-col sm:flex-row justify-end items-center gap-3">
+        <div className="flex items-center gap-2 w-full sm:w-auto justify-end">
+          <Button variant="outline" size="sm" onClick={() => fetchEmails(currentPage)}>
+            <RefreshCw className="mr-2 w-3.5 h-3.5" />
             Refresh
           </Button>
-          <Button 
+          <PrimaryButton 
+            size="small"
             onClick={handleResendAll} 
             disabled={isResendingAll || emails.filter(e => e.status === 'failed').length === 0}
           >
             {isResendingAll ? (
               <>
-                <Loader2 className="mr-2 w-4 h-4 animate-spin" />
+                <Loader2 className="mr-2 w-3.5 h-3.5 animate-spin" />
                 Resending...
               </>
             ) : (
               'Resend All Failed'
             )}
-          </Button>
+          </PrimaryButton>
         </div>
       </div>
 
-      <div className="border border-[rgba(0,0,0,0.08)] bg-white rounded-lg shadow-sm">
-        <DataTable
-          columns={columns}
-          data={emails}
-          keyExtractor={(item) => item.id}
-          isLoading={loading}
-          emptyMessage="No failed emails found"
-          error={error}
-        />
-        
-        {total > limit && (
+      {/* Table Section */}
+      <DataTable
+        columns={columns}
+        data={emails}
+        keyExtractor={(item) => item.id}
+        isLoading={loading}
+        emptyMessage="No failed emails found"
+        error={error}
+      />
+      
+      {/* Pagination Footer */}
+      {total > limit && (
+        <div className="border-t border-[rgba(0,0,0,0.08)] px-4 md:px-5 py-3">
           <Pagination
             currentPage={currentPage}
             totalPages={Math.ceil(total / limit)}
@@ -197,9 +200,10 @@ export const FailedEmailsTable: React.FC = () => {
               fetchEmails(1, newLimit);
             }}
           />
-        )}
-      </div>
+        </div>
+      )}
 
+      {/* Modal Details */}
       <Modal
         title="Email Details"
         isOpen={isModalVisible}
@@ -209,12 +213,12 @@ export const FailedEmailsTable: React.FC = () => {
         {selectedEmail && (
           <div className="p-5">
             <div className="grid grid-cols-1 gap-2 mb-4">
-              <p><strong className="text-[#0e1b2a]">To:</strong> <span className="text-[#6b7280]">{selectedEmail.to_email}</span></p>
-              <p><strong className="text-[#0e1b2a]">Subject:</strong> <span className="text-[#6b7280]">{selectedEmail.subject}</span></p>
-              <p><strong className="text-[#0e1b2a]">Error Message:</strong> <span className="text-[#ef4444]">{selectedEmail.error_message}</span></p>
+              <p><strong className="text-[#0f1724]">To:</strong> <span className="text-[#6b7280]">{selectedEmail.to_email}</span></p>
+              <p><strong className="text-[#0f1724]">Subject:</strong> <span className="text-[#6b7280]">{selectedEmail.subject}</span></p>
+              <p><strong className="text-[#0f1724]">Error Message:</strong> <span className="text-[#ef4444]">{selectedEmail.error_message}</span></p>
             </div>
             <div className="mt-4">
-              <strong className="text-[#0e1b2a] mb-2 block">Body:</strong>
+              <strong className="text-[#0f1724] mb-2 block">Body:</strong>
               <div 
                 className="border border-[rgba(0,0,0,0.08)] rounded p-4 mt-2 max-h-[400px] overflow-auto bg-gray-50 text-sm"
                 dangerouslySetInnerHTML={{ __html: selectedEmail.body }} 
diff --git a/src/components/shared/NotificationBell.tsx b/src/components/shared/NotificationBell.tsx
index b5c3610..3dedf41 100644
--- a/src/components/shared/NotificationBell.tsx
+++ b/src/components/shared/NotificationBell.tsx
@@ -180,9 +180,9 @@ export const NotificationBell = () => {
       </button>
 
       {isOpen && (
-        <div className="absolute right-0 mt-3 w-[400px] max-w-[90vw] bg-white border border-gray-200 rounded-xl shadow-lg z-[100] flex flex-col overflow-hidden animate-in fade-in slide-in-from-top-2 duration-200">
+        <div className="absolute right-0 mt-3 w-[320px] sm:w-[380px] md:w-[400px] max-w-[95vw] max-h-[80vh] md:max-h-[60vh] lg:max-h-[500px] bg-white border border-gray-200 rounded-xl shadow-lg z-[100] flex flex-col overflow-hidden animate-in fade-in slide-in-from-top-2 duration-200">
           {/* Header */}
-          <div className="px-4 py-3 border-b border-gray-100 flex items-center justify-between bg-gray-50/50">
+          <div className="flex-shrink-0 px-4 py-3 border-b border-gray-100 flex items-center justify-between bg-gray-50/50">
             <h3 className="text-sm font-semibold text-gray-900">
               Notifications
             </h3>
@@ -206,7 +206,7 @@ export const NotificationBell = () => {
           </div>
 
           {/* List */}
-          <div className="flex-1 overflow-y-auto max-h-[480px]">
+          <div className="flex-1 overflow-y-auto">
             {notifications.length === 0 ? (
               <div className="py-12 px-4 flex flex-col items-center justify-center text-center">
                 <div className="w-12 h-12 bg-gray-50 rounded-full flex items-center justify-center mb-3">
@@ -296,7 +296,7 @@ export const NotificationBell = () => {
           </div>
 
           {/* Footer */}
-          <div className="px-4 py-2 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
+          <div className="flex-shrink-0 px-4 py-2 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
             <button
               onClick={() => {
                 const isSuperAdmin = roles.includes("super_admin");
diff --git a/src/components/shared/PageHeader.tsx b/src/components/shared/PageHeader.tsx
index 5a4fda8..88b07de 100644
--- a/src/components/shared/PageHeader.tsx
+++ b/src/components/shared/PageHeader.tsx
@@ -17,12 +17,12 @@ interface PageHeaderProps {
 }
 
 const defaultTabs: TabItem[] = [
-  { label: 'Overview', path: '/dashboard' },
-  { label: 'Tenants', path: '/tenants' },
-  // { label: 'Users', path: '/users' },
-  // { label: 'Roles', path: '/roles' },
-  { label: 'Modules', path: '/modules' },
-  { label: 'Audit Logs', path: '/audit-logs' },
+  // { label: 'Overview', path: '/dashboard' },
+  // { label: 'Tenants', path: '/tenants' },
+  // // { label: 'Users', path: '/users' },
+  // // { label: 'Roles', path: '/roles' },
+  // { label: 'Modules', path: '/modules' },
+  // { label: 'Audit Logs', path: '/audit-logs' },
 ];
 
 export const PageHeader = ({
diff --git a/src/pages/superadmin/FailedEmails.tsx b/src/pages/superadmin/FailedEmails.tsx
index a1c9f07..cf69aff 100644
--- a/src/pages/superadmin/FailedEmails.tsx
+++ b/src/pages/superadmin/FailedEmails.tsx
@@ -3,10 +3,14 @@ import { Layout } from "@/components/layout/Layout";
 
 export default function FailedEmails() {
   return (
-    <Layout currentPage="Failed Emails">
-      <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
-        <FailedEmailsTable />
-      </div>
+    <Layout
+      currentPage="Failed Emails"
+      pageHeader={{
+        title: "Platform Failed Emails",
+        description: "Global monitoring of all failed system email dispatches and automatic/manual retry logs across all tenants."
+      }}
+    >
+      <FailedEmailsTable />
     </Layout>
   );
 }
diff --git a/src/pages/tenant/FailedEmails.tsx b/src/pages/tenant/FailedEmails.tsx
index a1c9f07..05ed784 100644
--- a/src/pages/tenant/FailedEmails.tsx
+++ b/src/pages/tenant/FailedEmails.tsx
@@ -3,10 +3,14 @@ import { Layout } from "@/components/layout/Layout";
 
 export default function FailedEmails() {
   return (
-    <Layout currentPage="Failed Emails">
-      <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
-        <FailedEmailsTable />
-      </div>
+    <Layout
+      currentPage="Failed Emails"
+      pageHeader={{
+        title: "Failed Emails Log",
+        description: "View and resend failed system email dispatches and transaction logs for this tenant."
+      }}
+    >
+      <FailedEmailsTable />
     </Layout>
   );
 }