diff --git a/resources/views/components/table-component.blade.php b/resources/views/components/table-component.blade.php
index 5e86b3b..3be0f05 100644
--- a/resources/views/components/table-component.blade.php
+++ b/resources/views/components/table-component.blade.php
@@ -11,7 +11,7 @@
     'showViewModal' => false
 ])
 
-<div class="card">
+
     <div class="card-header border-0 bg-transparent">
         <div class="d-flex justify-content-between align-items-center">
             <h5 class="mb-0 fw-bold text-dark">{{ $pageTitle }}</h5>
@@ -81,7 +81,7 @@
             </nav>
         </div>
     </div>
-</div>
+
 
 <!-- Edit Modal -->
 @if ($showEditModal)
diff --git a/resources/views/pages/add-notification.blade.php b/resources/views/pages/add-notification.blade.php
index 23ab921..f79fed7 100644
--- a/resources/views/pages/add-notification.blade.php
+++ b/resources/views/pages/add-notification.blade.php
@@ -3,60 +3,97 @@
 @section('page_title', 'Add Notification')
 
 @section('content')
-    <div class="card">
-        <div class="card-header border-0 bg-transparent">
-            <h5 class="mb-0 fw-bold text-dark">Add Notification</h5>
+<div class="card-header border-0 bg-transparent px-3 pt-4">
+    <h5 class="mb-0 fw-bold text-dark">Add Notification</h5>
+</div>
+   
+       
+        <div class="row justify-content-center">
+            <div class="col-md-10">
+               
+                   
+                    <div class="card-body px-3 pb-4">
+                        <form id="addNotificationForm">
+                            <div class="row">
+                                <div class="col-12 mb-4">
+                                    <label for="subject" class="form-label">Subject</label>
+                                    <input type="text" class="form-control w-100" id="subject" placeholder="Enter notification subject" required>
+                                </div>
+                                <div class="col-12 mb-4">
+                                    <label for="content" class="form-label">Content</label>
+                                    <textarea class="form-control w-100" id="content" rows="3" placeholder="Enter notification content" required></textarea>
+                                </div>
+                                <div class="col-12 mb-4">
+                                    <label for="isScheduled" class="form-label">Is Scheduled</label>
+                                    <select class="form-select w-100" id="isScheduled" required>
+                                        <option value="" disabled selected>Select option</option>
+                                        <option value="Yes">Yes</option>
+                                        <option value="No">No</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div class="d-flex justify-content-end mt-4">
+                                <button type="button" class="btn btn-outline-secondary me-2 px-4" style="margin-right:5px">Cancel</button>
+                                <button type="submit" class="btn btn-primary px-4">Add Notification</button>
+                            </div>
+                        </form>
+                    </div>
+               
+            </div>
         </div>
-        <div class="card-body">
-            <form id="addNotificationForm">
-                <div class="mb-3">
-                    <label for="subject" class="form-label">Subject</label>
-                    <input type="text" class="form-control" id="subject" required>
-                </div>
-                <div class="mb-3">
-                    <label for="content" class="form-label">Content</label>
-                    <textarea class="form-control" id="content" rows="4" required></textarea>
-                </div>
-                <div class="mb-3">
-                    <label for="isScheduled" class="form-label">Is Scheduled</label>
-                    <select class="form-select" id="isScheduled" required>
-                        <option value="">Select option</option>
-                        <option value="Yes">Yes</option>
-                        <option value="No">No</option>
-                    </select>
-                </div>
-                <div class="d-flex justify-content-end">
-                    <button type="button" class="btn btn-outline-secondary me-2" onclick="window.location.href='/notification'">Cancel</button>
-                    <button type="submit" class="btn btn-primary">Add Notification</button>
-                </div>
-            </form>
-        </div>
-    </div>
+  
 
     <style>
         .card {
             border-radius: 10px;
             font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
+            border: 1px solid #dee2e6;
         }
         .card-header {
             background-color: transparent;
         }
         .form-label {
             font-weight: 500;
-            font-size: 0.9rem;
+            font-size: 0.95rem;
+            color: #343a40;
         }
         .form-control,
         .form-select {
             font-size: 0.9rem;
             border-radius: 5px;
+            border: 1px solid #ced4da;
+            transition: border-color 0.2s, box-shadow 0.2s;
+        }
+        .form-control:focus,
+        .form-select:focus {
+            border-color: #E74610;
+            box-shadow: 0 0 0 0.2rem rgba(231, 70, 16, 0.25);
+        }
+        textarea.form-control {
+            resize: vertical;
+            min-height: 60px;
         }
         .btn-primary {
             background-color: #E74610;
             border-color: #E74610;
+            font-size: 0.9rem;
+            transition: background-color 0.2s;
         }
         .btn-primary:hover {
-            background-color: #E74610;
-            border-color: #E74610;
+            background-color: #c63d0e;
+            border-color: #c63d0e;
+        }
+        .btn-outline-secondary {
+            font-size: 0.9rem;
+            border-color: #6c757d;
+            transition: background-color 0.2s;
+        }
+        .btn-outline-secondary:hover {
+            background-color: #f8f9fa;
+            border-color: #6c757d;
+        }
+        .container {
+            max-width: 1400px;
         }
     </style>
 
@@ -75,7 +112,7 @@
 
             // Simulate adding notification (frontend-only)
             const newNotification = {
-                id: Date.now(), // Unique ID based on timestamp
+                id: Date.now(),
                 subject: subject,
                 content: content,
                 isScheduled: isScheduled === 'Yes' ? 'Scheduled' : 'Not Scheduled',
@@ -83,7 +120,7 @@
                 expiration: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString().slice(0, 16).replace('T', ' ')
             };
 
-            // Store in sessionStorage to simulate adding
+            // Store in sessionStorage
             let notifications = JSON.parse(sessionStorage.getItem('notifications') || '[]');
             notifications.push(newNotification);
             sessionStorage.setItem('notifications', JSON.stringify(notifications));
@@ -91,5 +128,10 @@
             alert('Notification added successfully!');
             window.location.href = '/notification';
         });
+
+        // Cancel button click handler
+        document.querySelector('.btn-outline-secondary').addEventListener('click', function() {
+            window.location.href = '/notification';
+        });
     </script>
 @endsection
\ No newline at end of file
diff --git a/resources/views/pages/notification.blade.php b/resources/views/pages/notification.blade.php
index 85b5117..9fe23ac 100644
--- a/resources/views/pages/notification.blade.php
+++ b/resources/views/pages/notification.blade.php
@@ -5,38 +5,10 @@
 @section('content')
     @php
         $notifications = [
-            [
-                'id' => 1,
-                'subject' => 'Welcome Message',
-                'content' => 'Welcome to our platform! Get started today.',
-                'isScheduled' => 'Scheduled',
-                'schedule' => '2025-04-16 10:00',
-                'expiration' => '2025-04-30 23:59'
-            ],
-            [
-                'id' => 2,
-                'subject' => 'System Update',
-                'content' => 'Scheduled maintenance on April 20th.',
-                'isScheduled' => 'Scheduled',
-                'schedule' => '2025-04-20 02:00',
-                'expiration' => '2025-04-21 02:00'
-            ],
-            [
-                'id' => 3,
-                'subject' => 'Promotion Offer',
-                'content' => '50% off your next purchase this week!',
-                'isScheduled' => 'Not Scheduled',
-                'schedule' => '',
-                'expiration' => '2025-04-22 23:59'
-            ],
-            [
-                'id' => 4,
-                'subject' => 'Account Reminder',
-                'content' => 'Please update your profile details.',
-                'isScheduled' => 'Scheduled',
-                'schedule' => '2025-04-18 09:00',
-                'expiration' => '2025-04-25 23:59'
-            ]
+            ['id' => 1, 'subject' => 'Welcome Message', 'content' => 'Welcome to our platform! Get started today.', 'isScheduled' => 'Scheduled', 'schedule' => '2025-04-16 10:00', 'expiration' => '2025-04-30 23:59'],
+            ['id' => 2, 'subject' => 'System Update', 'content' => 'Scheduled maintenance on April 20th.', 'isScheduled' => 'Scheduled', 'schedule' => '2025-04-20 02:00', 'expiration' => '2025-04-21 02:00'],
+            ['id' => 3, 'subject' => 'Promotion Offer', 'content' => '50% off your next purchase this week!', 'isScheduled' => 'Not Scheduled', 'schedule' => '', 'expiration' => '2025-04-22 23:59'],
+            ['id' => 4, 'subject' => 'Account Reminder', 'content' => 'Please update your profile details.', 'isScheduled' => 'Scheduled', 'schedule' => '2025-04-18 09:00', 'expiration' => '2025-04-25 23:59']
         ];
     @endphp
 
@@ -51,7 +23,7 @@
             ['name' => 'Schedule', 'key' => 'schedule', 'sortable' => true],
             ['name' => 'Expiration', 'key' => 'expiration', 'sortable' => true]
         ],
-        
+       
         'showAddButton' => true,
         'addButtonUrl' => '/add-notification',
         'showCheckboxes' => false,
@@ -61,7 +33,6 @@
     ])
 
     <script>
-        // Load notifications from sessionStorage
         const storedNotifications = JSON.parse(sessionStorage.getItem('notifications') || '[]');
         if (storedNotifications.length > 0) {
             const tableConfig = window.tableConfig || {};