diff --git a/resources/views/Admin/pages/manage_restaurants/manage_restaurants.blade.php b/resources/views/Admin/pages/manage_restaurants/manage_restaurants.blade.php
index 48df106..19c5ee9 100644
--- a/resources/views/Admin/pages/manage_restaurants/manage_restaurants.blade.php
+++ b/resources/views/Admin/pages/manage_restaurants/manage_restaurants.blade.php
@@ -171,7 +171,7 @@
 @endsection
 
 @section('section_script')
-    <script src="../src/plugins/src/table/datatable/datatables.js"></script>
+<script src="../src/plugins/src/table/datatable/datatables.js"></script>
     <script>
         $('#zero-config').DataTable({
             "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
@@ -193,10 +193,32 @@
         });
     </script>
     <script>
+        // $(document).ready(function() {
+        //     $('<button><a class="extra-btn width-max-content" href="{{ route('add_manage_restraunt') }}">Add</a></button><button><a class="extra-btn width-max-content" href="{{ route('restaurant_archive') }}">View Archive List</a></button><button><ul class="navbar-item flex-row ms-lg-auto ms-0"><li class="nav-item dropdown action-dropdown  order-lg-0 order-1"><a href="javascript:void(0);"class="nav-link dropdown-toggle user extra-btn" id="actionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><div class="avatar-container"><div class="avatar avatar-sm avatar-indicators avatar-online"><h3>Filter</h3></div></div></a><div class="dropdown-menu position-absolute" aria-labelledby="actionDropdown"><div class="dropdown-item"><a href="{{ route('manage.restaurants') }}" id="allFilter"><span>All</span></a></div><div class="dropdown-item"><a href="{{ route('manage.restaurants', ['active' => true]) }}" id="activeFilter"><span>Active</span></a></div><div class="dropdown-item"><a href="{{ route('manage.restaurants', ['active' => false]) }}" id="expiredFilter"> <span>Expired</span></a></div></div></li></ul></button><button><ul class="navbar-item flex-row ms-lg-auto ms-0"><li class="nav-item dropdown action-dropdown  order-lg-0 order-1"><a href="javascript:void(0);"class="nav-link dropdown-toggle user extra-btn" id="actionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><div class="avatar-container"><div class="avatar avatar-sm avatar-indicators avatar-online"><h3>Export</h3></div></div></a><div class="dropdown-menu position-absolute" aria-labelledby="actionDropdown"><div class="dropdown-item"><a href="javascript:void(0)" id="download_all"><span>Download Overview</span></a></div><div class="dropdown-item"><a href="javascript:void(0)" id="download-selected"><span id="export">Download Selected</span></a></div></div></li></ul></button>')
+        //         .insertBefore("#zero-config_filter label");
+        // });
         $(document).ready(function() {
-            $('<button><a class="extra-btn width-max-content" href="{{ route('add_manage_restraunt') }}">Add</a></button><button><a class="extra-btn width-max-content" href="{{ route('restaurant_archive') }}">View Archive List</a></button><button><ul class="navbar-item flex-row ms-lg-auto ms-0"><li class="nav-item dropdown action-dropdown  order-lg-0 order-1"><a href="javascript:void(0);"class="nav-link dropdown-toggle user extra-btn" id="actionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><div class="avatar-container"><div class="avatar avatar-sm avatar-indicators avatar-online"><h3>Filter</h3></div></div></a><div class="dropdown-menu position-absolute" aria-labelledby="actionDropdown"><div class="dropdown-item"><a href="{{ route('manage.restaurants') }}" id="allFilter"><span>All</span></a></div><div class="dropdown-item"><a href="{{ route('manage.restaurants', ['active' => true]) }}" id="activeFilter"><span>Active</span></a></div><div class="dropdown-item"><a href="{{ route('manage.restaurants', ['active' => false]) }}" id="expiredFilter"> <span>Expired</span></a></div></div></li></ul></button><button><ul class="navbar-item flex-row ms-lg-auto ms-0"><li class="nav-item dropdown action-dropdown  order-lg-0 order-1"><a href="javascript:void(0);"class="nav-link dropdown-toggle user extra-btn" id="actionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><div class="avatar-container"><div class="avatar avatar-sm avatar-indicators avatar-online"><h3>Export</h3></div></div></a><div class="dropdown-menu position-absolute" aria-labelledby="actionDropdown"><div class="dropdown-item"><a href="javascript:void(0)" id="download_all"><span>Download Overview</span></a></div><div class="dropdown-item"><a href="javascript:void(0)" id="download-selected"><span id="export">Download Selected</span></a></div></div></li></ul></button>')
-                .insertBefore("#zero-config_filter label");
-        });
+    // Insert the buttons
+    $('<button><a class="extra-btn width-max-content" href="{{ route('add_manage_restraunt') }}">Add</a></button>' +
+      '<button><a class="extra-btn width-max-content" href="{{ route('restaurant_archive') }}">View Archive List</a></button>' +
+      '<button><ul class="navbar-item flex-row ms-lg-auto ms-0">' +
+        '<li class="nav-item dropdown action-dropdown order-lg-0 order-1">' +
+          '<a href="javascript:void(0);" class="nav-link dropdown-toggle user extra-btn" id="exportDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
+            '<div class="avatar-container">' +
+              '<div class="avatar avatar-sm avatar-indicators avatar-online"><h3>Export</h3></div>' +
+            '</div>' +
+          '</a>' +
+          '<div class="dropdown-menu position-absolute" aria-labelledby="exportDropdown">' +
+            '<div class="dropdown-item"><a href="javascript:void(0)" id="download_all"><span>Download Overview</span></a></div>' +
+            '<div class="dropdown-item"><a href="javascript:void(0)" id="download_selected"><span id="export">Download Selected</span></a></div>' +
+          '</div>' +
+        '</li>' +
+      '</ul></button>')
+        .insertBefore("#zero-config_filter label");
+
+   
+});
+
     </script>
     <script>
         $(document).ready(function() {
@@ -376,4 +398,71 @@
 
         });
     </script>
+    <script>
+        $(document).ready(function() {
+            var filterButton = $('<div class="filter-btn-wrapper">' +
+                '<ul class="navbar-item flex-row ms-lg-auto ms-0">' +
+                '<li class="nav-item dropdown action-dropdown order-lg-0 order-1">' +
+                '<a href="javascript:void(0);" class="nav-link dropdown-toggle user extra-btn" id="actionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
+                '<div class="avatar-container"><div class="avatar avatar-sm avatar-indicators avatar-online"><h3>Filter</h3></div></div>' +
+                '</a>' +
+                '<div class="dropdown-menu position-absolute" aria-labelledby="actionDropdown">' +
+                '<div class="dropdown-item"><a href="{{ route('manage.restaurants') }}" id="allFilter" class="default-filter"><span>All</span></a></div>' +
+                '<div class="dropdown-item"><a href="{{ route('manage.restaurants', ['active' => true]) }}" id="activeFilter"><span>Active</span></a></div>' +
+                '<div class="dropdown-item"><a href="{{ route('manage.restaurants', ['active' => false]) }}" id="expiredFilter"><span>Inactive</span></a></div>' +
+                '</div>' +
+                '</li>' +
+                '</ul>' +
+                '</div>');
+
+            filterButton.insertBefore("#zero-config_filter");
+
+            var selectedFilter = localStorage.getItem('selectedFilter');
+
+            if (selectedFilter) {
+                handleChange(selectedFilter);
+            } else {
+                $('#allFilter').trigger('click');
+            }
+
+            $('#activeFilter').on('click', function() {
+                handleChange('active');
+                localStorage.setItem('selectedFilter', 'active');
+            });
+
+            $('#expiredFilter').on('click', function() {
+                handleChange('expired');
+                localStorage.setItem('selectedFilter', 'expired');
+            });
+
+            $('#allFilter').on('click', function() {
+                handleChange('all');
+                localStorage.setItem('selectedFilter', 'all');
+            });
+        });
+
+        function handleChange(filterType) {
+            $('#activeFilter, #expiredFilter, #allFilter').css('background-color', '');
+
+            if (filterType === 'active') {
+                $('#activeFilter').css({
+                    'padding': '4px 8px',
+                    'background-color': 'rgb(233, 233, 234)',
+                    'color': 'rgb(191, 191, 196)'
+                });
+            } else if (filterType === 'expired') {
+                $('#expiredFilter').css({
+                    'padding': '4px 8px',
+                    'background-color': 'rgb(233, 233, 234)',
+                    'color': 'rgb(191, 191, 196)'
+                });
+            } else if (filterType === 'all') {
+                $('#allFilter').css({
+                    'padding': '4px 8px',
+                    'background-color': 'rgb(233, 233, 234)',
+                    'color': 'rgb(191, 191, 196)'
+                });
+            }
+        }
+        </script>
 @endsection