From 6c31e189cf684bea804bf90b17a5d33ac0d1bfeb Mon Sep 17 00:00:00 2001
From: Sallu9007 <sallumoghul007@gmail.com>
Date: Sun, 27 Apr 2025 23:19:10 +0530
Subject: [PATCH] Chore: Ui Improvements

---
 .../ActivitiesAttendedController.php          |   8 +-
 resources/views/layouts/app.blade.php         |  57 +++-
 .../partials/sidebar_navigators.blade.php     |  35 +--
 .../activities-organised/index.blade.php      | 262 +++++-------------
 .../pages/booksPublished/index.blade.php      | 209 +++++---------
 .../pages/externalEngagement/index.blade.php  | 225 +++++----------
 .../views/pages/iv-organised/index.blade.php  | 233 +++++-----------
 .../views/pages/onlineCourses/index.blade.php | 217 +++++----------
 resources/views/pages/patents/index.blade.php | 233 +++++-----------
 .../views/pages/publications/index.blade.php  | 247 +++++------------
 10 files changed, 560 insertions(+), 1166 deletions(-)

diff --git a/app/Http/Controllers/ActivitiesAttendedController.php b/app/Http/Controllers/ActivitiesAttendedController.php
index 5b93161..b2d5c7a 100644
--- a/app/Http/Controllers/ActivitiesAttendedController.php
+++ b/app/Http/Controllers/ActivitiesAttendedController.php
@@ -178,9 +178,9 @@ class ActivitiesAttendedController extends Controller
 
                 // View proof button for everyone
                 if ($response->proof) {
-                    $actions[] = '<a href="' . asset('storage/' . $response->proof) . '" target="_blank" class="btn btn-sm btn-primary mr-1">View</a>';
+                    $actions[] = '<a href="' . asset('storage/' . $response->proof) . '" target="_blank" class="btn btn-sm btn-primary mr-1"><i class="fas fa-eye"></i></a>';
                 } else {
-                    $actions[] = 'No Proof';
+                    $actions[] = '<span class="text-muted"><i class="fas fa-times-circle"></i></span>';
                 }
 
                 // Edit button with role-appropriate route
@@ -194,10 +194,10 @@ class ActivitiesAttendedController extends Controller
                     $editRoute = route('faculty.ActivitiesAttended.edit', $response->id);
                 }
 
-                $actions[] = '<a href="' . $editRoute . '" class="btn btn-sm btn-info mx-1">Edit</a>';
+                $actions[] = '<a href="' . $editRoute . '" class="btn btn-sm btn-info mx-1"><i class="fas fa-edit"></i></a>';
 
                 $deleteRoute = route('activitiesAttended.destroy', $response->id);
-                $actions[] = '<button type="button" class="btn btn-sm btn-danger delete-btn" data-id="' . $response->id . '" data-url="' . $deleteRoute . '">Delete</button>';
+                $actions[] = '<button type="button" class="btn btn-sm btn-danger delete-btn" data-id="' . $response->id . '" data-url="' . $deleteRoute . '"><i class="fas fa-trash"></i></button>';
 
                 return implode(' ', $actions);
             })
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index cd69709..fb522f5 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -99,6 +99,9 @@
         .dataTables_wrapper .dataTables_length,
         .dataTables_wrapper .dataTables_filter {
             margin-bottom: 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
         }
 
         .dataTables_wrapper .dataTables_length select,
@@ -106,17 +109,65 @@
             border: 1px solid #d1d5db;
             border-radius: 0.375rem;
             padding: 0.375rem 0.75rem;
+            transition: all 0.3s ease;
+        }
+        .dataTables_wrapper .dataTables_paginate .paginate_button {
+            padding: 0;
         }
 
-        .dataTables_wrapper .dataTables_paginate .paginate_button {
-            margin: 0 0.25rem;
-            border-radius: 0.375rem;
+        .dataTables_wrapper .dataTables_length select:hover,
+        .dataTables_wrapper .dataTables_filter input:hover {
+            border-color: var(--primary-color);
+            box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
+        }
+
+        
+
+        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
+            background-color: "#fff";
+            border-color: "#fff";
+            color: white;
         }
 
         .dataTables_wrapper .dataTables_paginate .paginate_button.current {
             background: var(--primary-color) !important;
             border-color: var(--primary-color) !important;
             color: white !important;
+            font-weight: bold;
+        }
+
+        .dataTables_wrapper .dataTables_info {
+            margin-top: 1rem;
+            font-size: 0.875rem;
+            color: #6b7280;
+        }
+
+        .dataTables_wrapper .dataTables_scroll {
+            border: 1px solid #e5e7eb;
+            border-radius: 0.375rem;
+            overflow: hidden;
+        }
+
+        .dataTables_wrapper .dataTables_scroll .dataTables_scrollHead {
+            background-color: #f8fafc;
+            border-bottom: 1px solid #e5e7eb;
+        }
+
+        .dataTables_wrapper .dataTables_scroll .dataTables_scrollBody {
+            background-color: white;
+        }
+
+        .dataTables_wrapper .dataTables_scroll .dataTables_scrollBody tr:hover {
+            background-color: rgba(59, 130, 246, 0.05);
+        }
+
+        .dataTables_wrapper .dataTables_scroll .dataTables_scrollBody td {
+            padding: 0.75rem;
+            border-bottom: 1px solid #e5e7eb;
+        }
+
+        .dataTables_wrapper .dataTables_scroll .dataTables_scrollBody td:last-child {
+            border-right: none;
         }
 
         .dt-buttons {
diff --git a/resources/views/layouts/partials/sidebar_navigators.blade.php b/resources/views/layouts/partials/sidebar_navigators.blade.php
index 79b1002..f3af039 100644
--- a/resources/views/layouts/partials/sidebar_navigators.blade.php
+++ b/resources/views/layouts/partials/sidebar_navigators.blade.php
@@ -5,7 +5,7 @@
     <a class="nav-link py-1" href="{{ route('dashboard') }}">
         <div class="d-flex align-items-center">
             <div class="col-2">
-                <img src="{{ asset('assets/frontend/images/home-icon.svg') }}" alt="home-icon" class="img-fluid" style="max-height: 20px;">
+                <i class="fas fa-home text-white"></i>
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Dashboard</h6>
         </div>
@@ -16,7 +16,7 @@
     <a class="nav-link py-1" href="{{ route('admin.ActivitiesAttendedResponses') }}">
         <div class="d-flex align-items-center">
             <div class="col-2">
-                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
+                <i class="fas fa-calendar-check text-white"></i>
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Activities Attended</h6>
         </div>
@@ -26,7 +26,7 @@
     <a class="nav-link py-1" href="{{ route('admin.ActivitiesOrganisedResponses') }}">
         <div class="d-flex align-items-center">
             <div class="col-2">
-                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+                <i class="fas fa-calendar-alt text-white"></i>
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Activities Organised</h6>
         </div>
@@ -36,7 +36,7 @@
     <a class="nav-link py-1" href="{{ route('admin.IvOrganisedResponses') }}">
         <div class="d-flex align-items-center">
             <div class="col-2">
-                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+                <i class="fas fa-industry text-white"></i>
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">IV Organised</h6>
         </div>
@@ -46,7 +46,7 @@
     <a class="nav-link py-1" href="{{ route('admin.PublicationsResponses') }}">
         <div class="d-flex align-items-center">
             <div class="col-2">
-                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+                <i class="fas fa-book text-white"></i>
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Publications</h6>
         </div>
@@ -56,7 +56,7 @@
     <a class="nav-link py-1" href="{{ route('admin.BooksPublishedResponses') }}">
         <div class="d-flex align-items-center">
             <div class="col-2">
-                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+                <i class="fas fa-book-open text-white"></i>
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Books Published</h6>
         </div>
@@ -66,7 +66,7 @@
     <a class="nav-link py-1" href="{{ route('admin.ExternalEngagementResponses') }}">
         <div class="d-flex align-items-center">
             <div class="col-2">
-                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+                <i class="fas fa-handshake text-white"></i>
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">External Engagement</h6>
         </div>
@@ -76,7 +76,7 @@
     <a class="nav-link py-1" href="{{ route('admin.OnlineCoursesResponses') }}">
         <div class="d-flex align-items-center">
             <div class="col-2">
-                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+                <i class="fas fa-laptop-code text-white"></i>
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Online Courses</h6>
         </div>
@@ -86,7 +86,7 @@
     <a class="nav-link py-1" href="{{ route('admin.PatentsResponses') }}">
         <div class="d-flex align-items-center">
             <div class="col-2">
-                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+                <i class="fas fa-file-alt text-white"></i>
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Patents/Copyrights</h6>
         </div>
@@ -98,7 +98,7 @@
     <a class="nav-link py-1" href="{{ route('coordinator.ActivitiesAttendedResponses') }}">
         <div class="d-flex align-items-center">
             <div class="col-2">
-                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="activities-icon" class="img-fluid" style="max-height: 20px;">
+                <i class="fas fa-calendar-check text-white"></i>
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Activities Attended</h6>
         </div>
@@ -108,7 +108,7 @@
     <a class="nav-link py-1" href="{{ route('coordinator.ActivitiesOrganisedResponses') }}">
         <div class="d-flex align-items-center">
             <div class="col-2">
-                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+                <i class="fas fa-calendar-alt text-white"></i>
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Activities Organised</h6>
         </div>
@@ -118,7 +118,7 @@
     <a class="nav-link py-1" href="{{ route('coordinator.IvOrganisedResponses') }}">
         <div class="d-flex align-items-center">
             <div class="col-2">
-                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+                <i class="fas fa-industry text-white"></i>
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">IV Organised</h6>
         </div>
@@ -128,7 +128,7 @@
     <a class="nav-link py-1" href="{{ route('coordinator.PublicationsResponses') }}">
         <div class="d-flex align-items-center">
             <div class="col-2">
-                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+                <i class="fas fa-book text-white"></i>
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Publications</h6>
         </div>
@@ -138,7 +138,7 @@
     <a class="nav-link py-1" href="{{ route('coordinator.BooksPublishedResponses') }}">
         <div class="d-flex align-items-center">
             <div class="col-2">
-                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+                <i class="fas fa-book-open text-white"></i>
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Books Published</h6>
         </div>
@@ -148,7 +148,7 @@
     <a class="nav-link py-1" href="{{ route('coordinator.ExternalEngagementResponses') }}">
         <div class="d-flex align-items-center">
             <div class="col-2">
-                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+                <i class="fas fa-handshake text-white"></i>
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">External Engagement</h6>
         </div>
@@ -158,7 +158,7 @@
     <a class="nav-link py-1" href="{{ route('coordinator.OnlineCoursesResponses') }}">
         <div class="d-flex align-items-center">
             <div class="col-2">
-                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+                <i class="fas fa-laptop-code text-white"></i>
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Online Courses</h6>
         </div>
@@ -168,12 +168,13 @@
     <a class="nav-link py-1" href="{{ route('coordinator.PatentsResponses') }}">
         <div class="d-flex align-items-center">
             <div class="col-2">
-                <img src="{{ asset('assets/frontend/images/students.svg') }}" alt="organised-icon" class="img-fluid" style="max-height: 20px;">
+                <i class="fas fa-file-alt text-white"></i>
             </div>
             <h6 class="col-10 ps-2 m-0 textWhite sidebar-text small">Patents/Copyrights</h6>
         </div>
     </a>
 </li>
+<!-- Add other coordinator links here -->
 @elseif(auth()->user()->role->name === 'Faculty')
 <li class="nav-item mt-1">
     <a class="nav-link py-1" data-bs-toggle="collapse" href="#activitiesAttendedCollapse" role="button" aria-expanded="false" aria-controls="activitiesAttendedCollapse">
diff --git a/resources/views/pages/activities-organised/index.blade.php b/resources/views/pages/activities-organised/index.blade.php
index 2d5d054..bb4a444 100644
--- a/resources/views/pages/activities-organised/index.blade.php
+++ b/resources/views/pages/activities-organised/index.blade.php
@@ -1,36 +1,42 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="bg-white overflow-hidden shadow sm:rounded-lg">
-        <div class="px-4 py-5 sm:px-6">
-            <h3 class="text-xl leading-6 font-semibold text-gray-900">
-                All Activities Organised
-            </h3>
-        </div>
-        <div class="px-4 py-5 sm:px-6">
-            <div class="overflow-x-auto w-full max-w-screen-lg mx-auto">
-                <table id="responses-table" class="table-auto w-full table-striped border-collapse border border-gray-200 rounded-lg">
-                    <thead class="bg-gray-100">
-                        <tr>
-                            <th class="px-4 py-1 border border-gray-200">ID</th>
-                            <th class="px-1 py-1 border border-gray-200">Title</th>
-                            <th class="px-1 py-1 border border-gray-200">Resource Person</th>
-                            <th class="px-1 py-1 border border-gray-200">Organisation</th>
-                            <th class="px-1 py-1 border border-gray-200">Target Audience</th>
-                            <th class="px-1 py-1 border border-gray-200">Department</th>
-                            <th class="px-1 py-1 border border-gray-200">Faculty</th>
-                            <th class="px-1 py-1 border border-gray-200">Venue</th>
-                            <th class="px-1 py-1 border border-gray-200">Activity Type</th>
-                            <th class="px-1 py-1 border border-gray-200">Category</th>
-                            <th class="px-1 py-1 border border-gray-200">Level</th>
-                            <th class="px-1 py-1 border border-gray-200">Participants</th>
-                            <th class="px-5 py-1 border border-gray-200">Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    </tbody>
-                </table>
+<div class="container py-4">
+    <div class="row">
+        <div class="col-12">
+            <div class="card shadow-sm">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <h3 class="page-title m-0">
+                        <i class="fas fa-list-alt me-2 text-primary"></i>All Activities Organised
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <!-- Table -->
+                    <div class="table-responsive">
+                        <table id="responses-table" class="table table-striped table-hover">
+                            <thead>
+                                <tr>
+                                    <th>ID</th>
+                                    <th>Title</th>
+                                    <th>Resource Person</th>
+                                    <th>Organisation</th>
+                                    <th>Target Audience</th>
+                                    <th>Department</th>
+                                    <th>Faculty</th>
+                                    <th>Venue</th>
+                                    <th>Activity Type</th>
+                                    <th>Category</th>
+                                    <th>Level</th>
+                                    <th>Participants</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <!-- Data will be loaded via AJAX -->
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -38,16 +44,6 @@
 @endsection
 
 @section('scripts')
-<!-- DataTables JS -->
-<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
-<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css">
-<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
-<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
-<script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
-
 <script>
     $(document).ready(function() {
         const sheetName = "Activities Organised";
@@ -61,158 +57,46 @@
                 ajax: {
                     url: route,
                 },
-                columns: [{
-                        data: 'id',
-                        name: 'id'
-                    },
-                    {
-                        data: 'title',
-                        name: 'title',
-                        orderable: false
-                    },
-                    {
-                        data: 'resource_person_name',
-                        name: 'resource_person_name',
-                        orderable: false
-                    },
-                    {
-                        data: 'resource_person_organization',
-                        name: 'resource_person_organization',
-                        orderable: false
-                    },
-                    {
-                        data: 'target_audience',
-                        name: 'target_audience',
-                        orderable: false
-                    },
-                    {
-                        data: 'department_name',
-                        name: 'department',
-                        orderable: false
-                    },
-                    {
-                        data: 'user_name',
-                        name: 'user_name',
-                        orderable: false
-                    },
-                    // {
-                    //     data: 'start_date',
-                    //     name: 'start_date',
-                    //     orderable: false
-                    // },
-                    // {
-                    //     data: 'end_date',
-                    //     name: 'end_date',
-                    //     orderable: false
-                    // },
-                    // {
-                    //     data: 'num_days',
-                    //     name: 'num_days',
-                    //     orderable: false
-                    // },
-                    {
-                        data: 'venue',
-                        name: 'venue',
-                        orderable: false
-                    },
-                    {
-                        data: 'activity_type',
-                        name: 'activity_type',
-                        orderable: false
-                    },
-                    {
-                        data: 'category',
-                        name: 'category',
-                        orderable: false
-                    },
-                    {
-                        data: 'level',
-                        name: 'level',
-                        orderable: false
-                    },
-                    {
-                        data: 'number_of_participants',
-                        name: 'number_of_participants',
-                        orderable: false
-                    },
-                    {
-                        data: 'action',
-                        name: 'action',
-                        orderable: false,
-                        searchable: false
-                    },
+                columns: [
+                    { data: 'id', name: 'id', searchable: false },
+                    { data: 'title', name: 'title', orderable: false },
+                    { data: 'resource_person_name', name: 'resource_person_name', orderable: false },
+                    { data: 'resource_person_organization', name: 'resource_person_organization', orderable: false },
+                    { data: 'target_audience', name: 'target_audience', orderable: false },
+                    { data: 'department_name', name: 'department_name', orderable: false, searchable: false },
+                    { data: 'user_name', name: 'user_name', orderable: false },
+                    { data: 'venue', name: 'venue', orderable: false },
+                    { data: 'activity_type', name: 'activity_type', orderable: false },
+                    { data: 'category', name: 'category', orderable: false, searchable: false },
+                    { data: 'level', name: 'level', orderable: false },
+                    { data: 'number_of_participants', name: 'number_of_participants', orderable: false },
+                    { data: 'action', name: 'action', orderable: false, searchable: false },
                 ],
-                columnDefs: [{
-                    targets: '_all',
-                    className: 'text-center wrap-text'
-                }, ],
-                dom: 'Bfrtip',
-                buttons: [{
-                        extend: 'copy',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'csv',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'excel',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'pdf',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'print',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    }
-                ]
-            });
-        };
-
-        // Delete button event handler
-        $('#responses-table').on('click', '.delete-btn', function() {
-            if (confirm('Are you sure you want to delete this record?')) {
-                const id = $(this).data('id');
-                const url = $(this).data('url');
-
-                $.ajax({
-                    url: url,
-                    type: 'DELETE',
-                    data: {
-                        "_token": "{{ csrf_token() }}"
-                    },
-                    success: function(result) {
-                        table.ajax.reload();
-                        alert('Record deleted successfully');
-                    },
-                    error: function(error) {
-                        console.error(error);
-                        alert('Error deleting record');
-                    }
-                });
-            }
-        });
-
-        function exportOptions() {
-            return {
-                columns: ':visible',
-                format: {
-                    body: function(data, row, column, node) {
-                        if ($(node).find('select').length) {
-                            return $(node).find("select option:selected").text();
-                        }
-                        return $(node).text();
+                columnDefs: [
+                    { targets: '_all', className: 'text-center wrap-text' },
+                ],
+                dom: '<"d-flex justify-content-between align-items-center mb-3"<"d-flex align-items-center"l><"d-flex"f<"ms-2"B>>>rtip',
+                buttons: [
+                    { extend: 'copy', text: '<i class="fas fa-copy me-1"></i> Copy', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'csv', text: '<i class="fas fa-file-csv me-1"></i> CSV', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'excel', text: '<i class="fas fa-file-excel me-1"></i> Excel', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'pdf', text: '<i class="fas fa-file-pdf me-1"></i> PDF', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'print', text: '<i class="fas fa-print me-1"></i> Print', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                ],
+                language: {
+                    search: "<i class='fas fa-search'></i> _INPUT_",
+                    searchPlaceholder: "Search records...",
+                    lengthMenu: "<i class='fas fa-list me-1'></i> _MENU_ records per page",
+                    info: "Showing _START_ to _END_ of _TOTAL_ entries",
+                    paginate: {
+                        first: "<i class='fas fa-angle-double-left'></i>",
+                        last: "<i class='fas fa-angle-double-right'></i>",
+                        next: "<i class='fas fa-angle-right'></i>",
+                        previous: "<i class='fas fa-angle-left'></i>"
                     }
                 }
-            };
-        }
+            });
+        };
 
         // Set appropriate route based on user role
         const userRole = "{{ auth()->user()->role->name }}";
diff --git a/resources/views/pages/booksPublished/index.blade.php b/resources/views/pages/booksPublished/index.blade.php
index 93790ba..97d0908 100644
--- a/resources/views/pages/booksPublished/index.blade.php
+++ b/resources/views/pages/booksPublished/index.blade.php
@@ -1,31 +1,37 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="bg-white overflow-hidden shadow sm:rounded-lg">
-        <div class="px-4 py-5 sm:px-6">
-            <h3 class="text-xl leading-6 font-semibold text-gray-900">
-                All Books Published
-            </h3>
-        </div>
-        <div class="px-4 py-5 sm:px-6">
-            <div class="overflow-x-auto w-full max-w-screen-lg mx-auto">
-                <table id="booksPublished-table" class="table-auto w-full table-striped border-collapse border border-gray-200 rounded-lg">
-                    <thead class="bg-gray-100">
-                        <tr>
-                            <th class="px-4 py-2 border border-gray-200">ID</th>
-                            <th class="px-4 py-2 border border-gray-200">Title</th>
-                            <th class="px-4 py-2 border border-gray-200">Author</th>
-                            <th class="px-4 py-2 border border-gray-200">Publisher</th>
-                            <th class="px-4 py-2 border border-gray-200">Date of Publication</th>
-                            <th class="px-4 py-2 border border-gray-200">ISSN/eISSN number</th>
-                            <th class="px-4 py-2 border border-gray-200">Department</th>
-                            <th class="px-4 py-2 border border-gray-200">Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    </tbody>
-                </table>
+<div class="container py-4">
+    <div class="row">
+        <div class="col-12">
+            <div class="card shadow-sm">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <h3 class="page-title m-0">
+                        <i class="fas fa-book me-2 text-primary"></i>All Books Published
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <!-- Table -->
+                    <div class="table-responsive">
+                        <table id="booksPublished-table" class="table table-striped table-hover">
+                            <thead>
+                                <tr>
+                                    <th>ID</th>
+                                    <th>Title</th>
+                                    <th>Author</th>
+                                    <th>Publisher</th>
+                                    <th>Date of Publication</th>
+                                    <th>ISSN/eISSN number</th>
+                                    <th>Department</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <!-- Data will be loaded via AJAX -->
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -33,19 +39,9 @@
 @endsection
 
 @section('scripts')
-<!-- DataTables JS -->
-<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
-<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css">
-<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
-<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
-<script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
-
 <script>
     $(document).ready(function() {
-        const sheetName = "Publications";
+        const sheetName = "Books Published";
 
         var initAjaxRoute = function(route) {
             table = $("#booksPublished-table").DataTable({
@@ -56,118 +52,41 @@
                 ajax: {
                     url: route,
                 },
-                columns: [{
-                        data: 'id',
-                        name: 'id'
-                    },
-                    {
-                        data: 'title',
-                        name: 'title',
-                        orderable: true
-                    },
-                    {
-                        data: 'author',
-                        name: 'author',
-                        orderable: true
-                    },
-                    {
-                        data: 'publisher',
-                        name: 'publisher',
-                        orderable: true
-                    },
-                    {
-                        data: 'date_of_publication',
-                        name: 'date_of_publication',
-                        orderable: true
-                    },
-                    {
-                        data: 'issn',
-                        name: 'issn',
-                        orderable: false
-                    },
-                    {
-                        data: 'department_name',
-                        name: 'department_name',
-                        orderable: false
-                    },
-                    {
-                        data: 'action',
-                        name: 'action',
-                        orderable: false,
-                        searchable: false
-                    },
+                columns: [
+                    { data: 'id', name: 'id', searchable: false },
+                    { data: 'title', name: 'title', orderable: true },
+                    { data: 'author', name: 'author', orderable: true },
+                    { data: 'publisher', name: 'publisher', orderable: true },
+                    { data: 'date_of_publication', name: 'date_of_publication', orderable: true },
+                    { data: 'issn', name: 'issn', orderable: false },
+                    { data: 'department_name', name: 'department_name', orderable: false },
+                    { data: 'action', name: 'action', orderable: false, searchable: false },
                 ],
-                columnDefs: [{
-                    targets: '_all',
-                    className: 'text-center wrap-text'
-                }, ],
-                dom: 'Bfrtip',
-                buttons: [{
-                        extend: 'copy',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'csv',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'excel',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'pdf',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'print',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    }
-                ]
-            });
-        };
-
-        // Delete button event handler
-        $('#booksPublished-table').on('click', '.delete-btn', function() {
-            if (confirm('Are you sure you want to delete this record?')) {
-                const id = $(this).data('id');
-                const url = $(this).data('url');
-
-                $.ajax({
-                    url: url,
-                    type: 'DELETE',
-                    data: {
-                        "_token": "{{ csrf_token() }}"
-                    },
-                    success: function(result) {
-                        table.ajax.reload();
-                        alert('Publication deleted successfully');
-                    },
-                    error: function(error) {
-                        console.error(error);
-                        alert('Error deleting publication');
-                    }
-                });
-            }
-        });
-
-        function exportOptions() {
-            return {
-                columns: ':visible',
-                format: {
-                    body: function(data, row, column, node) {
-                        if ($(node).find('select').length) {
-                            return $(node).find("select option:selected").text();
-                        }
-                        return $(node).text();
+                columnDefs: [
+                    { targets: '_all', className: 'text-center wrap-text' },
+                ],
+                dom: '<"d-flex justify-content-between align-items-center mb-3"<"d-flex align-items-center"l><"d-flex"f<"ms-2"B>>>rtip',
+                buttons: [
+                    { extend: 'copy', text: '<i class="fas fa-copy me-1"></i> Copy', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'csv', text: '<i class="fas fa-file-csv me-1"></i> CSV', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'excel', text: '<i class="fas fa-file-excel me-1"></i> Excel', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'pdf', text: '<i class="fas fa-file-pdf me-1"></i> PDF', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'print', text: '<i class="fas fa-print me-1"></i> Print', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                ],
+                language: {
+                    search: "<i class='fas fa-search'></i> _INPUT_",
+                    searchPlaceholder: "Search records...",
+                    lengthMenu: "<i class='fas fa-list me-1'></i> _MENU_ records per page",
+                    info: "Showing _START_ to _END_ of _TOTAL_ entries",
+                    paginate: {
+                        first: "<i class='fas fa-angle-double-left'></i>",
+                        last: "<i class='fas fa-angle-double-right'></i>",
+                        next: "<i class='fas fa-angle-right'></i>",
+                        previous: "<i class='fas fa-angle-left'></i>"
                     }
                 }
-            };
-        }
+            });
+        };
 
         // Set appropriate route based on user role
         const userRole = "{{ auth()->user()->role->name }}";
diff --git a/resources/views/pages/externalEngagement/index.blade.php b/resources/views/pages/externalEngagement/index.blade.php
index 8f9a0ff..1e42ff9 100644
--- a/resources/views/pages/externalEngagement/index.blade.php
+++ b/resources/views/pages/externalEngagement/index.blade.php
@@ -1,33 +1,39 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="bg-white overflow-hidden shadow sm:rounded-lg">
-        <div class="px-4 py-5 sm:px-6">
-            <h3 class="text-xl leading-6 font-semibold text-gray-900">
-                All External Engagements
-            </h3>
-        </div>
-        <div class="px-4 py-5 sm:px-6">
-            <div class="overflow-x-auto w-full max-w-screen-lg mx-auto">
-                <table id="externalEngagement-table" class="table-auto w-full table-striped border-collapse border border-gray-200 rounded-lg">
-                    <thead class="bg-gray-100">
-                        <tr>
-                            <th class="px-4 py-2 border border-gray-200">ID</th>
-                            <th class="px-4 py-2 border border-gray-200">Faculty</th>
-                            <th class="px-4 py-2 border border-gray-200">Department</th>
-                            <th class="px-4 py-2 border border-gray-200">Activity</th>
-                            <th class="px-4 py-2 border border-gray-200">Activity Description</th>
-                            <th class="px-4 py-2 border border-gray-200">Inviting Organization</th>
-                            <th class="px-4 py-2 border border-gray-200">Start Date</th>
-                            <th class="px-4 py-2 border border-gray-200">End Date</th>
-                            <th class="px-4 py-2 border border-gray-200">Num Days</th>
-                            <th class="px-4 py-2 border border-gray-200">Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    </tbody>
-                </table>
+<div class="container py-4">
+    <div class="row">
+        <div class="col-12">
+            <div class="card shadow-sm">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <h3 class="page-title m-0">
+                        <i class="fas fa-handshake me-2 text-primary"></i>All External Engagements
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <!-- Table -->
+                    <div class="table-responsive">
+                        <table id="externalEngagement-table" class="table table-striped table-hover">
+                            <thead>
+                                <tr>
+                                    <th>ID</th>
+                                    <th>Faculty</th>
+                                    <th>Department</th>
+                                    <th>Activity</th>
+                                    <th>Activity Description</th>
+                                    <th>Inviting Organization</th>
+                                    <th>Start Date</th>
+                                    <th>End Date</th>
+                                    <th>Num Days</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <!-- Data will be loaded via AJAX -->
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -35,19 +41,9 @@
 @endsection
 
 @section('scripts')
-<!-- DataTables JS -->
-<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
-<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css">
-<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
-<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
-<script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
-
 <script>
     $(document).ready(function() {
-        const sheetName = "Publications";
+        const sheetName = "External Engagements";
 
         var initAjaxRoute = function(route) {
             table = $("#externalEngagement-table").DataTable({
@@ -58,128 +54,43 @@
                 ajax: {
                     url: route,
                 },
-                columns: [{
-                        data: 'id',
-                        name: 'id'
-                    },
-                    {
-                        data: 'user_name',
-                        name: 'user_name',
-                        orderable: true
-                    },
-                    {
-                        data: 'department_name',
-                        name: 'department_name',
-                        orderable: true
-                    },
-                    {
-                        data: 'activity',
-                        name: 'activity',
-                        orderable: true
-                    },
-                    {
-                        data: 'activity_description',
-                        name: 'activity_description',
-                        orderable: true
-                    },
-                    {
-                        data: 'inviting_organization',
-                        name: 'inviting_organization',
-                        orderable: false
-                    },
-                    {
-                        data: 'start_date',
-                        name: 'start_date',
-                        orderable: false
-                    },
-                    {
-                        data: 'end_date',
-                        name: 'end_date',
-                        orderable: false
-                    },
-                    {
-                        data: 'num_days',
-                        name: 'num_days',
-                        orderable: false
-                    },
-                    {
-                        data: 'action',
-                        name: 'action',
-                        orderable: false,
-                        searchable: false
-                    },
+                columns: [
+                    { data: 'id', name: 'id', searchable: false },
+                    { data: 'user_name', name: 'user_name', orderable: true },
+                    { data: 'department_name', name: 'department_name', orderable: true },
+                    { data: 'activity', name: 'activity', orderable: true },
+                    { data: 'activity_description', name: 'activity_description', orderable: true },
+                    { data: 'inviting_organization', name: 'inviting_organization', orderable: false },
+                    { data: 'start_date', name: 'start_date', orderable: false },
+                    { data: 'end_date', name: 'end_date', orderable: false },
+                    { data: 'num_days', name: 'num_days', orderable: false },
+                    { data: 'action', name: 'action', orderable: false, searchable: false },
                 ],
-                columnDefs: [{
-                    targets: '_all',
-                    className: 'text-center wrap-text'
-                }, ],
-                dom: 'Bfrtip',
-                buttons: [{
-                        extend: 'copy',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'csv',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'excel',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'pdf',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'print',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    }
-                ]
-            });
-        };
-
-        // Delete button event handler
-        $('#externalEngagement-table').on('click', '.delete-btn', function() {
-            if (confirm('Are you sure you want to delete this record?')) {
-                const id = $(this).data('id');
-                const url = $(this).data('url');
-
-                $.ajax({
-                    url: url,
-                    type: 'DELETE',
-                    data: {
-                        "_token": "{{ csrf_token() }}"
-                    },
-                    success: function(result) {
-                        table.ajax.reload();
-                        alert('External Engagement deleted successfully');
-                    },
-                    error: function(error) {
-                        console.error(error);
-                        alert('Error deleting External Engagement');
-                    }
-                });
-            }
-        });
-
-        function exportOptions() {
-            return {
-                columns: ':visible',
-                format: {
-                    body: function(data, row, column, node) {
-                        if ($(node).find('select').length) {
-                            return $(node).find("select option:selected").text();
-                        }
-                        return $(node).text();
+                columnDefs: [
+                    { targets: '_all', className: 'text-center wrap-text' },
+                ],
+                dom: '<"d-flex justify-content-between align-items-center mb-3"<"d-flex align-items-center"l><"d-flex"f<"ms-2"B>>>rtip',
+                buttons: [
+                    { extend: 'copy', text: '<i class="fas fa-copy me-1"></i> Copy', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'csv', text: '<i class="fas fa-file-csv me-1"></i> CSV', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'excel', text: '<i class="fas fa-file-excel me-1"></i> Excel', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'pdf', text: '<i class="fas fa-file-pdf me-1"></i> PDF', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'print', text: '<i class="fas fa-print me-1"></i> Print', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                ],
+                language: {
+                    search: "<i class='fas fa-search'></i> _INPUT_",
+                    searchPlaceholder: "Search records...",
+                    lengthMenu: "<i class='fas fa-list me-1'></i> _MENU_ records per page",
+                    info: "Showing _START_ to _END_ of _TOTAL_ entries",
+                    paginate: {
+                        first: "<i class='fas fa-angle-double-left'></i>",
+                        last: "<i class='fas fa-angle-double-right'></i>",
+                        next: "<i class='fas fa-angle-right'></i>",
+                        previous: "<i class='fas fa-angle-left'></i>"
                     }
                 }
-            };
-        }
+            });
+        };
 
         // Set appropriate route based on user role
         const userRole = "{{ auth()->user()->role->name }}";
diff --git a/resources/views/pages/iv-organised/index.blade.php b/resources/views/pages/iv-organised/index.blade.php
index 7f5056a..25fdfeb 100644
--- a/resources/views/pages/iv-organised/index.blade.php
+++ b/resources/views/pages/iv-organised/index.blade.php
@@ -1,34 +1,40 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="bg-white overflow-hidden shadow sm:rounded-lg">
-        <div class="px-4 py-5 sm:px-6">
-            <h3 class="text-xl leading-6 font-semibold text-gray-900">
-                All Industrial Visits Organised
-            </h3>
-        </div>
-        <div class="px-4 py-5 sm:px-6">
-            <div class="overflow-x-auto w-full max-w-screen-lg mx-auto">
-                <table id="responses-table" class="table-auto w-full table-striped border-collapse border border-gray-200 rounded-lg">
-                    <thead class="bg-gray-100">
-                        <tr>
-                            <th class="px-4 py-2 border border-gray-200">ID</th>
-                            <th class="px-4 py-2 border border-gray-200">Company Name</th>
-                            <th class="px-4 py-2 border border-gray-200">Resource Person</th>
-                            <th class="px-4 py-2 border border-gray-200">Target Audience</th>
-                            <th class="px-4 py-2 border border-gray-200">Department</th>
-                            <th class="px-4 py-2 border border-gray-200">Faculty</th>
-                            <th class="px-4 py-2 border border-gray-200">Start Date</th>
-                            <th class="px-4 py-2 border border-gray-200">End Date</th>
-                            <th class="px-4 py-2 border border-gray-200">Student Year</th>
-                            <th class="px-4 py-2 border border-gray-200">Participants</th>
-                            <th class="px-4 py-2 border border-gray-200">Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    </tbody>
-                </table>
+<div class="container py-4">
+    <div class="row">
+        <div class="col-12">
+            <div class="card shadow-sm">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <h3 class="page-title m-0">
+                        <i class="fas fa-industry me-2 text-primary"></i>All Industrial Visits Organised
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <!-- Table -->
+                    <div class="table-responsive">
+                        <table id="ivOrganised-table" class="table table-striped table-hover">
+                            <thead>
+                                <tr>
+                                    <th>ID</th>
+                                    <th>Company Name</th>
+                                    <th>Resource Person</th>
+                                    <th>Target Audience</th>
+                                    <th>Department</th>
+                                    <th>Faculty</th>
+                                    <th>Start Date</th>
+                                    <th>End Date</th>
+                                    <th>Student Year</th>
+                                    <th>Participants</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <!-- Data will be loaded via AJAX -->
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -36,22 +42,12 @@
 @endsection
 
 @section('scripts')
-<!-- DataTables JS -->
-<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
-<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css">
-<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
-<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
-<script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
-
 <script>
     $(document).ready(function() {
         const sheetName = "Industrial Visits Organised";
 
         var initAjaxRoute = function(route) {
-            table = $("#responses-table").DataTable({
+            table = $("#ivOrganised-table").DataTable({
                 fnDestroy: true,
                 processing: true,
                 serverSide: true,
@@ -59,133 +55,44 @@
                 ajax: {
                     url: route,
                 },
-                columns: [{
-                        data: 'id',
-                        name: 'id'
-                    },
-                    {
-                        data: 'company_name',
-                        name: 'company_name',
-                        orderable: false
-                    },
-                    {
-                        data: 'resource_person_name',
-                        name: 'resource_person_name',
-                        orderable: false
-                    },
-                    {
-                        data: 'target_audience',
-                        name: 'target_audience',
-                        orderable: false
-                    },
-                    {
-                        data: 'department_name',
-                        name: 'department',
-                        orderable: false
-                    },
-                    {
-                        data: 'user_name',
-                        name: 'user_name',
-                        orderable: false
-                    },
-                    {
-                        data: 'start_date',
-                        name: 'start_date',
-                        orderable: false
-                    },
-                    {
-                        data: 'end_date',
-                        name: 'end_date',
-                        orderable: false
-                    },
-                    {
-                        data: 'student_year',
-                        name: 'student_year',
-                        orderable: false
-                    },
-                    {
-                        data: 'number_of_participants',
-                        name: 'number_of_participants',
-                        orderable: false
-                    },
-                    {
-                        data: 'action',
-                        name: 'action',
-                        orderable: false,
-                        searchable: false
-                    },
+                columns: [
+                    { data: 'id', name: 'id', searchable: false },
+                    { data: 'company_name', name: 'company_name', orderable: true },
+                    { data: 'resource_person_name', name: 'resource_person_name', orderable: true },
+                    { data: 'target_audience', name: 'target_audience', orderable: true },
+                    { data: 'department_name', name: 'department_name', orderable: true },
+                    { data: 'user_name', name: 'user_name', orderable: true },
+                    { data: 'start_date', name: 'start_date', orderable: true },
+                    { data: 'end_date', name: 'end_date', orderable: true },
+                    { data: 'student_year', name: 'student_year', orderable: true },
+                    { data: 'number_of_participants', name: 'number_of_participants', orderable: true },
+                    { data: 'action', name: 'action', orderable: false, searchable: false },
                 ],
-                columnDefs: [{
-                    targets: '_all',
-                    className: 'text-center wrap-text'
-                }, ],
-                dom: 'Bfrtip',
-                buttons: [{
-                        extend: 'copy',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'csv',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'excel',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'pdf',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'print',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    }
-                ]
-            });
-        };
-
-        // Delete button event handler
-        $('#responses-table').on('click', '.delete-btn', function() {
-            if (confirm('Are you sure you want to delete this record?')) {
-                const id = $(this).data('id');
-                const url = $(this).data('url');
-
-                $.ajax({
-                    url: url,
-                    type: 'DELETE',
-                    data: {
-                        "_token": "{{ csrf_token() }}"
-                    },
-                    success: function(result) {
-                        table.ajax.reload();
-                        alert('Record deleted successfully');
-                    },
-                    error: function(error) {
-                        console.error(error);
-                        alert('Error deleting record');
-                    }
-                });
-            }
-        });
-
-        function exportOptions() {
-            return {
-                columns: ':visible',
-                format: {
-                    body: function(data, row, column, node) {
-                        if ($(node).find('select').length) {
-                            return $(node).find("select option:selected").text();
-                        }
-                        return $(node).text();
+                columnDefs: [
+                    { targets: '_all', className: 'text-center wrap-text' },
+                ],
+                dom: '<"d-flex justify-content-between align-items-center mb-3"<"d-flex align-items-center"l><"d-flex"f<"ms-2"B>>>rtip',
+                buttons: [
+                    { extend: 'copy', text: '<i class="fas fa-copy me-1"></i> Copy', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'csv', text: '<i class="fas fa-file-csv me-1"></i> CSV', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'excel', text: '<i class="fas fa-file-excel me-1"></i> Excel', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'pdf', text: '<i class="fas fa-file-pdf me-1"></i> PDF', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'print', text: '<i class="fas fa-print me-1"></i> Print', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                ],
+                language: {
+                    search: "<i class='fas fa-search'></i> _INPUT_",
+                    searchPlaceholder: "Search records...",
+                    lengthMenu: "<i class='fas fa-list me-1'></i> _MENU_ records per page",
+                    info: "Showing _START_ to _END_ of _TOTAL_ entries",
+                    paginate: {
+                        first: "<i class='fas fa-angle-double-left'></i>",
+                        last: "<i class='fas fa-angle-double-right'></i>",
+                        next: "<i class='fas fa-angle-right'></i>",
+                        previous: "<i class='fas fa-angle-left'></i>"
                     }
                 }
-            };
-        }
+            });
+        };
 
         // Set appropriate route based on user role
         const userRole = "{{ auth()->user()->role->name }}";
diff --git a/resources/views/pages/onlineCourses/index.blade.php b/resources/views/pages/onlineCourses/index.blade.php
index 7682d1c..5ec07d3 100644
--- a/resources/views/pages/onlineCourses/index.blade.php
+++ b/resources/views/pages/onlineCourses/index.blade.php
@@ -1,32 +1,38 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="bg-white overflow-hidden shadow sm:rounded-lg">
-        <div class="px-4 py-5 sm:px-6">
-            <h3 class="text-xl leading-6 font-semibold text-gray-900">
-                All Online Course
-            </h3>
-        </div>
-        <div class="px-4 py-5 sm:px-6">
-            <div class="overflow-x-auto w-full max-w-screen-lg mx-auto">
-                <table id="onlineCourse-table" class="table-auto w-full table-striped border-collapse border border-gray-200 rounded-lg">
-                    <thead class="bg-gray-100">
-                        <tr>
-                            <th class="px-4 py-2 border border-gray-200">ID</th>
-                            <th class="px-4 py-2 border border-gray-200">Faculty</th>
-                            <th class="px-4 py-2 border border-gray-200">Department</th>
-                            <th class="px-4 py-2 border border-gray-200">Course</th>
-                            <th class="px-4 py-2 border border-gray-200">Offered By</th>
-                            <th class="px-4 py-2 border border-gray-200">Start Date</th>
-                            <th class="px-4 py-2 border border-gray-200">End Date</th>
-                            <th class="px-4 py-2 border border-gray-200">Num Days</th>
-                            <th class="px-4 py-2 border border-gray-200">Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    </tbody>
-                </table>
+<div class="container py-4">
+    <div class="row">
+        <div class="col-12">
+            <div class="card shadow-sm">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <h3 class="page-title m-0">
+                        <i class="fas fa-laptop-code me-2 text-primary"></i>All Online Courses
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <!-- Table -->
+                    <div class="table-responsive">
+                        <table id="onlineCourse-table" class="table table-striped table-hover">
+                            <thead>
+                                <tr>
+                                    <th>ID</th>
+                                    <th>Faculty</th>
+                                    <th>Department</th>
+                                    <th>Course</th>
+                                    <th>Offered By</th>
+                                    <th>Start Date</th>
+                                    <th>End Date</th>
+                                    <th>Num Days</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <!-- Data will be loaded via AJAX -->
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -34,19 +40,9 @@
 @endsection
 
 @section('scripts')
-<!-- DataTables JS -->
-<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
-<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css">
-<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
-<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
-<script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
-
 <script>
     $(document).ready(function() {
-        const sheetName = "Publications";
+        const sheetName = "Online Courses";
 
         var initAjaxRoute = function(route) {
             table = $("#onlineCourse-table").DataTable({
@@ -57,123 +53,42 @@
                 ajax: {
                     url: route,
                 },
-                columns: [{
-                        data: 'id',
-                        name: 'id'
-                    },
-                    {
-                        data: 'user_name',
-                        name: 'user_name',
-                        orderable: true
-                    },
-                    {
-                        data: 'department_name',
-                        name: 'department_name',
-                        orderable: true
-                    },
-                    {
-                        data: 'course',
-                        name: 'course',
-                        orderable: true
-                    },
-                    {
-                        data: 'offered_by',
-                        name: 'offered_by',
-                        orderable: true
-                    },
-                    {
-                        data: 'start_date',
-                        name: 'start_date',
-                        orderable: false
-                    },
-                    {
-                        data: 'end_date',
-                        name: 'end_date',
-                        orderable: false
-                    },
-                    {
-                        data: 'num_days',
-                        name: 'num_days',
-                        orderable: false
-                    },
-                    {
-                        data: 'action',
-                        name: 'action',
-                        orderable: false,
-                        searchable: false
-                    },
+                columns: [
+                    { data: 'id', name: 'id', searchable: false },
+                    { data: 'user_name', name: 'user_name', orderable: true },
+                    { data: 'department_name', name: 'department_name', orderable: true },
+                    { data: 'course', name: 'course', orderable: true },
+                    { data: 'offered_by', name: 'offered_by', orderable: true },
+                    { data: 'start_date', name: 'start_date', orderable: true },
+                    { data: 'end_date', name: 'end_date', orderable: true },
+                    { data: 'num_days', name: 'num_days', orderable: true },
+                    { data: 'action', name: 'action', orderable: false, searchable: false },
                 ],
-                columnDefs: [{
-                    targets: '_all',
-                    className: 'text-center wrap-text'
-                }, ],
-                dom: 'Bfrtip',
-                buttons: [{
-                        extend: 'copy',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'csv',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'excel',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'pdf',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'print',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    }
-                ]
-            });
-        };
-
-        // Delete button event handler
-        $('#onlineCourse-table').on('click', '.delete-btn', function() {
-            if (confirm('Are you sure you want to delete this record?')) {
-                const id = $(this).data('id');
-                const url = $(this).data('url');
-
-                $.ajax({
-                    url: url,
-                    type: 'DELETE',
-                    data: {
-                        "_token": "{{ csrf_token() }}"
-                    },
-                    success: function(result) {
-                        table.ajax.reload();
-                        alert('Online Course deleted successfully');
-                    },
-                    error: function(error) {
-                        console.error(error);
-                        alert('Error deleting Online Course');
-                    }
-                });
-            }
-        });
-
-        function exportOptions() {
-            return {
-                columns: ':visible',
-                format: {
-                    body: function(data, row, column, node) {
-                        if ($(node).find('select').length) {
-                            return $(node).find("select option:selected").text();
-                        }
-                        return $(node).text();
+                columnDefs: [
+                    { targets: '_all', className: 'text-center wrap-text' },
+                ],
+                dom: '<"d-flex justify-content-between align-items-center mb-3"<"d-flex align-items-center"l><"d-flex"f<"ms-2"B>>>rtip',
+                buttons: [
+                    { extend: 'copy', text: '<i class="fas fa-copy me-1"></i> Copy', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'csv', text: '<i class="fas fa-file-csv me-1"></i> CSV', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'excel', text: '<i class="fas fa-file-excel me-1"></i> Excel', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'pdf', text: '<i class="fas fa-file-pdf me-1"></i> PDF', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'print', text: '<i class="fas fa-print me-1"></i> Print', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                ],
+                language: {
+                    search: "<i class='fas fa-search'></i> _INPUT_",
+                    searchPlaceholder: "Search records...",
+                    lengthMenu: "<i class='fas fa-list me-1'></i> _MENU_ records per page",
+                    info: "Showing _START_ to _END_ of _TOTAL_ entries",
+                    paginate: {
+                        first: "<i class='fas fa-angle-double-left'></i>",
+                        last: "<i class='fas fa-angle-double-right'></i>",
+                        next: "<i class='fas fa-angle-right'></i>",
+                        previous: "<i class='fas fa-angle-left'></i>"
                     }
                 }
-            };
-        }
+            });
+        };
 
         // Set appropriate route based on user role
         const userRole = "{{ auth()->user()->role->name }}";
diff --git a/resources/views/pages/patents/index.blade.php b/resources/views/pages/patents/index.blade.php
index 0f6e729..6342931 100644
--- a/resources/views/pages/patents/index.blade.php
+++ b/resources/views/pages/patents/index.blade.php
@@ -1,34 +1,40 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="bg-white overflow-hidden shadow sm:rounded-lg">
-        <div class="px-4 py-5 sm:px-6">
-            <h3 class="text-xl leading-6 font-semibold text-gray-900">
-                All Patents
-            </h3>
-        </div>
-        <div class="px-4 py-5 sm:px-6">
-            <div class="overflow-x-auto w-full max-w-screen-lg mx-auto">
-                <table id="patents-table" class="table-auto w-full table-striped border-collapse border border-gray-200 rounded-lg">
-                    <thead class="bg-gray-100">
-                        <tr>
-                            <th class="px-4 py-2 border border-gray-200">ID</th>
-                            <th class="px-4 py-2 border border-gray-200">Faculty</th>
-                            <th class="px-4 py-2 border border-gray-200">Department</th>
-                            <th class="px-4 py-2 border border-gray-200">Title</th>
-                            <th class="px-4 py-2 border border-gray-200">Investigator</th>
-                            <th class="px-4 py-2 border border-gray-200">Application No</th>
-                            <th class="px-4 py-2 border border-gray-200">Type</th>
-                            <th class="px-4 py-2 border border-gray-200">Date Of Submission</th>
-                            <th class="px-4 py-2 border border-gray-200">Date Of Filling</th>
-                            <th class="px-4 py-2 border border-gray-200">Status</th>
-                            <th class="px-4 py-2 border border-gray-200">Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    </tbody>
-                </table>
+<div class="container py-4">
+    <div class="row">
+        <div class="col-12">
+            <div class="card shadow-sm">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <h3 class="page-title m-0">
+                        <i class="fas fa-file-alt me-2 text-primary"></i>All Patents
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <!-- Table -->
+                    <div class="table-responsive">
+                        <table id="patents-table" class="table table-striped table-hover">
+                            <thead>
+                                <tr>
+                                    <th>ID</th>
+                                    <th>Faculty</th>
+                                    <th>Department</th>
+                                    <th>Title</th>
+                                    <th>Investigator</th>
+                                    <th>Application No</th>
+                                    <th>Type</th>
+                                    <th>Date Of Submission</th>
+                                    <th>Date Of Filling</th>
+                                    <th>Status</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <!-- Data will be loaded via AJAX -->
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -36,19 +42,9 @@
 @endsection
 
 @section('scripts')
-<!-- DataTables JS -->
-<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
-<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css">
-<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
-<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
-<script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
-
 <script>
     $(document).ready(function() {
-        const sheetName = "Publications";
+        const sheetName = "Patents";
 
         var initAjaxRoute = function(route) {
             table = $("#patents-table").DataTable({
@@ -59,133 +55,44 @@
                 ajax: {
                     url: route,
                 },
-                columns: [{
-                        data: 'id',
-                        name: 'id'
-                    },
-                    {
-                        data: 'user_name',
-                        name: 'user_name',
-                        orderable: true
-                    },
-                    {
-                        data: 'department_name',
-                        name: 'department_name',
-                        orderable: true
-                    },
-                    {
-                        data: 'title',
-                        name: 'title',
-                        orderable: true
-                    },
-                    {
-                        data: 'investigator',
-                        name: 'investigator',
-                        orderable: true
-                    },
-                    {
-                        data: 'application_no',
-                        name: 'application_no',
-                        orderable: false
-                    },
-                    {
-                        data: 'type',
-                        name: 'type',
-                        orderable: false
-                    },
-                    {
-                        data: 'date_of_submission',
-                        name: 'date_of_submission',
-                        orderable: false
-                    },
-                    {
-                        data: 'date_of_filling',
-                        name: 'date_of_filling',
-                        orderable: false
-                    },
-                    {
-                        data: 'status',
-                        name: 'status',
-                        orderable: false
-                    },
-                    {
-                        data: 'action',
-                        name: 'action',
-                        orderable: false,
-                        searchable: false
-                    },
+                columns: [
+                    { data: 'id', name: 'id', searchable: false },
+                    { data: 'user_name', name: 'user_name', orderable: true },
+                    { data: 'department_name', name: 'department_name', orderable: true },
+                    { data: 'title', name: 'title', orderable: true },
+                    { data: 'investigator', name: 'investigator', orderable: true },
+                    { data: 'application_no', name: 'application_no', orderable: false },
+                    { data: 'type', name: 'type', orderable: false },
+                    { data: 'date_of_submission', name: 'date_of_submission', orderable: false },
+                    { data: 'date_of_filling', name: 'date_of_filling', orderable: false },
+                    { data: 'status', name: 'status', orderable: false },
+                    { data: 'action', name: 'action', orderable: false, searchable: false },
                 ],
-                columnDefs: [{
-                    targets: '_all',
-                    className: 'text-center wrap-text'
-                }, ],
-                dom: 'Bfrtip',
-                buttons: [{
-                        extend: 'copy',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'csv',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'excel',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'pdf',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'print',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    }
-                ]
-            });
-        };
-
-        // Delete button event handler
-        $('#patents-table').on('click', '.delete-btn', function() {
-            if (confirm('Are you sure you want to delete this record?')) {
-                const id = $(this).data('id');
-                const url = $(this).data('url');
-
-                $.ajax({
-                    url: url,
-                    type: 'DELETE',
-                    data: {
-                        "_token": "{{ csrf_token() }}"
-                    },
-                    success: function(result) {
-                        table.ajax.reload();
-                        alert('Patent deleted successfully');
-                    },
-                    error: function(error) {
-                        console.error(error);
-                        alert('Error deleting Patent');
-                    }
-                });
-            }
-        });
-
-        function exportOptions() {
-            return {
-                columns: ':visible',
-                format: {
-                    body: function(data, row, column, node) {
-                        if ($(node).find('select').length) {
-                            return $(node).find("select option:selected").text();
-                        }
-                        return $(node).text();
+                columnDefs: [
+                    { targets: '_all', className: 'text-center wrap-text' },
+                ],
+                dom: '<"d-flex justify-content-between align-items-center mb-3"<"d-flex align-items-center"l><"d-flex"f<"ms-2"B>>>rtip',
+                buttons: [
+                    { extend: 'copy', text: '<i class="fas fa-copy me-1"></i> Copy', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'csv', text: '<i class="fas fa-file-csv me-1"></i> CSV', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'excel', text: '<i class="fas fa-file-excel me-1"></i> Excel', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'pdf', text: '<i class="fas fa-file-pdf me-1"></i> PDF', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'print', text: '<i class="fas fa-print me-1"></i> Print', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                ],
+                language: {
+                    search: "<i class='fas fa-search'></i> _INPUT_",
+                    searchPlaceholder: "Search records...",
+                    lengthMenu: "<i class='fas fa-list me-1'></i> _MENU_ records per page",
+                    info: "Showing _START_ to _END_ of _TOTAL_ entries",
+                    paginate: {
+                        first: "<i class='fas fa-angle-double-left'></i>",
+                        last: "<i class='fas fa-angle-double-right'></i>",
+                        next: "<i class='fas fa-angle-right'></i>",
+                        previous: "<i class='fas fa-angle-left'></i>"
                     }
                 }
-            };
-        }
+            });
+        };
 
         // Set appropriate route based on user role
         const userRole = "{{ auth()->user()->role->name }}";
diff --git a/resources/views/pages/publications/index.blade.php b/resources/views/pages/publications/index.blade.php
index 4641c80..7314803 100644
--- a/resources/views/pages/publications/index.blade.php
+++ b/resources/views/pages/publications/index.blade.php
@@ -1,36 +1,42 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="bg-white overflow-hidden shadow sm:rounded-lg">
-        <div class="px-4 py-5 sm:px-6">
-            <h3 class="text-xl leading-6 font-semibold text-gray-900">
-                All Publications
-            </h3>
-        </div>
-        <div class="px-4 py-5 sm:px-6">
-            <div class="overflow-x-auto w-full max-w-screen-lg mx-auto">
-                <table id="publications-table" class="table-auto w-full table-striped border-collapse border border-gray-200 rounded-lg">
-                    <thead class="bg-gray-100">
-                        <tr>
-                            <th class="px-4 py-2 border border-gray-200">ID</th>
-                            <th class="px-4 py-2 border border-gray-200">Title</th>
-                            <th class="px-4 py-2 border border-gray-200">First Author</th>
-                            <th class="px-4 py-2 border border-gray-200">Type</th>
-                            <th class="px-4 py-2 border border-gray-200">Journal/Conference</th>
-                            <th class="px-4 py-2 border border-gray-200">Faculty</th>
-                            <th class="px-4 py-2 border border-gray-200">Department</th>
-                            <th class="px-4 py-2 border border-gray-200">Start Date</th>
-                            <th class="px-4 py-2 border border-gray-200">End Date</th>
-                            <th class="px-4 py-2 border border-gray-200">Peer Reviewed</th>
-                            <th class="px-4 py-2 border border-gray-200">Scopus</th>
-                            <th class="px-4 py-2 border border-gray-200">SCI</th>
-                            <th class="px-4 py-2 border border-gray-200">Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                    </tbody>
-                </table>
+<div class="container py-4">
+    <div class="row">
+        <div class="col-12">
+            <div class="card shadow-sm">
+                <div class="card-header d-flex justify-content-between align-items-center">
+                    <h3 class="page-title m-0">
+                        <i class="fas fa-book-open me-2 text-primary"></i>All Publications
+                    </h3>
+                </div>
+                <div class="card-body">
+                    <!-- Table -->
+                    <div class="table-responsive">
+                        <table id="publications-table" class="table table-striped table-hover">
+                            <thead>
+                                <tr>
+                                    <th>ID</th>
+                                    <th>Title</th>
+                                    <th>First Author</th>
+                                    <th>Type</th>
+                                    <th>Journal/Conference</th>
+                                    <th>Faculty</th>
+                                    <th>Department</th>
+                                    <th>Start Date</th>
+                                    <th>End Date</th>
+                                    <th>Peer Reviewed</th>
+                                    <th>Scopus</th>
+                                    <th>SCI</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <!-- Data will be loaded via AJAX -->
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -38,16 +44,6 @@
 @endsection
 
 @section('scripts')
-<!-- DataTables JS -->
-<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
-<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/dataTables.bootstrap5.min.css">
-<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
-<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
-<script src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap5.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
-<script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>
-
 <script>
     $(document).ready(function() {
         const sheetName = "Publications";
@@ -61,143 +57,46 @@
                 ajax: {
                     url: route,
                 },
-                columns: [{
-                        data: 'id',
-                        name: 'id'
-                    },
-                    {
-                        data: 'title',
-                        name: 'title',
-                        orderable: true
-                    },
-                    {
-                        data: 'first_author_name',
-                        name: 'first_author_name',
-                        orderable: true
-                    },
-                    {
-                        data: 'activity_type',
-                        name: 'activity_type',
-                        orderable: true
-                    },
-                    {
-                        data: 'affiliation',
-                        name: 'affiliation',
-                        orderable: true
-                    },
-                    {
-                        data: 'user_name',
-                        name: 'user_name',
-                        orderable: false
-                    },
-                    {
-                        data: 'department_name',
-                        name: 'department_name',
-                        orderable: false
-                    },
-                    {
-                        data: 'start_date',
-                        name: 'start_date',
-                        orderable: true
-                    },
-                    {
-                        data: 'end_date',
-                        name: 'end_date',
-                        orderable: true
-                    },
-                    {
-                        data: 'is_peer_reviewed',
-                        name: 'is_peer_reviewed',
-                        orderable: true
-                    },
-                    {
-                        data: 'is_scopus_indexed',
-                        name: 'is_scopus_indexed',
-                        orderable: false
-                    },
-                    {
-                        data: 'is_sci_indexed',
-                        name: 'is_sci_indexed',
-                        orderable: false
-                    },
-                    {
-                        data: 'action',
-                        name: 'action',
-                        orderable: false,
-                        searchable: false
-                    },
+                columns: [
+                    { data: 'id', name: 'id', searchable: false },
+                    { data: 'title', name: 'title', orderable: true },
+                    { data: 'first_author_name', name: 'first_author_name', orderable: true },
+                    { data: 'activity_type', name: 'activity_type', orderable: true },
+                    { data: 'affiliation', name: 'affiliation', orderable: true },
+                    { data: 'user_name', name: 'user_name', orderable: false },
+                    { data: 'department_name', name: 'department_name', orderable: false },
+                    { data: 'start_date', name: 'start_date', orderable: true },
+                    { data: 'end_date', name: 'end_date', orderable: true },
+                    { data: 'is_peer_reviewed', name: 'is_peer_reviewed', orderable: true },
+                    { data: 'is_scopus_indexed', name: 'is_scopus_indexed', orderable: false },
+                    { data: 'is_sci_indexed', name: 'is_sci_indexed', orderable: false },
+                    { data: 'action', name: 'action', orderable: false, searchable: false },
                 ],
-                columnDefs: [{
-                    targets: '_all',
-                    className: 'text-center wrap-text'
-                }, ],
-                dom: 'Bfrtip',
-                buttons: [{
-                        extend: 'copy',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'csv',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'excel',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'pdf',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    },
-                    {
-                        extend: 'print',
-                        title: sheetName,
-                        exportOptions: exportOptions()
-                    }
-                ]
-            });
-        };
-
-        // Delete button event handler
-        $('#publications-table').on('click', '.delete-btn', function() {
-            if (confirm('Are you sure you want to delete this record?')) {
-                const id = $(this).data('id');
-                const url = $(this).data('url');
-
-                $.ajax({
-                    url: url,
-                    type: 'DELETE',
-                    data: {
-                        "_token": "{{ csrf_token() }}"
-                    },
-                    success: function(result) {
-                        table.ajax.reload();
-                        alert('Publication deleted successfully');
-                    },
-                    error: function(error) {
-                        console.error(error);
-                        alert('Error deleting publication');
-                    }
-                });
-            }
-        });
-
-        function exportOptions() {
-            return {
-                columns: ':visible',
-                format: {
-                    body: function(data, row, column, node) {
-                        if ($(node).find('select').length) {
-                            return $(node).find("select option:selected").text();
-                        }
-                        return $(node).text();
+                columnDefs: [
+                    { targets: '_all', className: 'text-center wrap-text' },
+                ],
+                dom: '<"d-flex justify-content-between align-items-center mb-3"<"d-flex align-items-center"l><"d-flex"f<"ms-2"B>>>rtip',
+                buttons: [
+                    { extend: 'copy', text: '<i class="fas fa-copy me-1"></i> Copy', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'csv', text: '<i class="fas fa-file-csv me-1"></i> CSV', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'excel', text: '<i class="fas fa-file-excel me-1"></i> Excel', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'pdf', text: '<i class="fas fa-file-pdf me-1"></i> PDF', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                    { extend: 'print', text: '<i class="fas fa-print me-1"></i> Print', className: 'btn btn-sm btn-outline-white', title: sheetName },
+                ],
+                language: {
+                    search: "<i class='fas fa-search'></i> _INPUT_",
+                    searchPlaceholder: "Search records...",
+                    lengthMenu: "<i class='fas fa-list me-1'></i> _MENU_ records per page",
+                    info: "Showing _START_ to _END_ of _TOTAL_ entries",
+                    paginate: {
+                        first: "<i class='fas fa-angle-double-left'></i>",
+                        last: "<i class='fas fa-angle-double-right'></i>",
+                        next: "<i class='fas fa-angle-right'></i>",
+                        previous: "<i class='fas fa-angle-left'></i>"
                     }
                 }
-            };
-        }
+            });
+        };
 
         // Set appropriate route based on user role
         const userRole = "{{ auth()->user()->role->name }}";