diff --git a/src/pages/AssetDetail.tsx b/src/pages/AssetDetail.tsx
index a87a9d1..2934296 100644
--- a/src/pages/AssetDetail.tsx
+++ b/src/pages/AssetDetail.tsx
@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
 import { useAssetDetails, useAssetMutations } from '../hooks/useAsset';
 import { useDocTypeMeta } from '../hooks/useDocTypeMeta';
-import { FaArrowLeft, FaSave, FaEdit, FaQrcode, FaCheck, FaCalendarAlt, FaHistory, FaFileAlt, FaTrashAlt} from 'react-icons/fa';
+import { FaArrowLeft, FaSave, FaEdit, FaQrcode, FaCheck, FaCalendarAlt, FaHistory, FaFileAlt, FaTrashAlt, FaChevronDown} from 'react-icons/fa';
 import type { CreateAssetData,AssetFinanceBookRow } from '../services/assetService';
 
 import LinkField from '../components/LinkField';
@@ -33,6 +33,22 @@ const AssetDetail: React.FC = () => {
   const isCancelled = docstatus === 2;
   const isDraft = docstatus === 0;
 
+  // Add dropdown state
+  const [isActionDropdownOpen, setIsActionDropdownOpen] = useState(false);
+  const actionDropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (actionDropdownRef.current && !actionDropdownRef.current.contains(event.target as Node)) {
+        setIsActionDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
   // Debug logging (development only)
   useEffect(() => {
     if (import.meta.env.DEV && asset) {
@@ -2068,81 +2084,121 @@ const handlePPMPlan = async () => {
         </div>
         <div className="flex items-center gap-3">
           {!isNewAsset && !isEditing && !isCancelled && (
-            <>
-              {/* Print QR Button - Only show if QR code exists */}
-              {qrCodeUrl && (
-                
-                <button
-                  onClick={handlePrintQR}
-                  className="bg-gray-600 hover:bg-gray-700 text-white px-3 py-1.5 text-sm rounded-md flex items-center gap-1.5"
-                >
-                  <FaQrcode size={14} />
-                  Print QR
-                </button>
+          <>
+            {/* Actions Dropdown */}
+            <div className="relative" ref={actionDropdownRef}>
+              <button
+                onClick={() => setIsActionDropdownOpen(!isActionDropdownOpen)}
+                className="bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded-lg flex items-center gap-2"
+              >
+                Actions
+                <FaChevronDown size={12} className={`transition-transform ${isActionDropdownOpen ? 'rotate-180' : ''}`} />
+              </button>
+
+              {/* Dropdown Menu */}
+              {isActionDropdownOpen && (
+                <div className="absolute right-0 mt-2 w-56 bg-white dark:bg-gray-800 rounded-md shadow-lg z-50 border border-gray-200 dark:border-gray-700">
+                  <div className="py-1">
+                    {/* Print QR - Only show if QR code exists */}
+                    {qrCodeUrl && (
+                      <button
+                        onClick={() => {
+                          handlePrintQR();
+                          setIsActionDropdownOpen(false);
+                        }}
+                        className="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+                      >
+                        <FaQrcode size={14} />
+                        Print QR
+                      </button>
+                    )}
+
+                    {/* Stay Plugged */}
+                    <button
+                      onClick={() => {
+                        handlePrintStayPlugged();
+                        setIsActionDropdownOpen(false);
+                      }}
+                      className="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+                    >
+                      <FaQrcode size={14} />
+                      Stay Plugged
+                    </button>
+
+                    {/* PPM Plan */}
+                    <button
+                      onClick={() => {
+                        handlePPMPlan();
+                        setIsActionDropdownOpen(false);
+                      }}
+                      className="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+                    >
+                      <FaCalendarAlt size={14} />
+                      PPM Plan
+                    </button>
+
+                    {/* Asset History */}
+                    <button
+                      onClick={() => {
+                        handleAssetHistory();
+                        setIsActionDropdownOpen(false);
+                      }}
+                      className="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+                    >
+                      <FaHistory size={14} />
+                      Asset History
+                    </button>
+
+                    {/* Installation Report */}
+                    <button
+                      onClick={() => {
+                        handleInstallationReport();
+                        setIsActionDropdownOpen(false);
+                      }}
+                      className="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+                    >
+                      <FaFileAlt size={14} />
+                      Installation Report
+                    </button>
+
+                    {/* Dismantling Report - Only show when status is Scrapped */}
+                    {asset?.status === 'Scrapped' && (
+                      <button
+                        onClick={() => {
+                          handleDismantlingReport();
+                          setIsActionDropdownOpen(false);
+                        }}
+                        className="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-red-50 dark:hover:bg-red-900/20 flex items-center gap-2 text-red-600 dark:text-red-400 border-t border-gray-200 dark:border-gray-700"
+                      >
+                        <FaTrashAlt size={14} />
+                        Dismantling Report
+                      </button>
+                    )}
+                  </div>
+                </div>
               )}
-              {/* Stay Plugged Button */}
+            </div>
+
+            <button
+              onClick={() => setIsEditing(true)}
+              className="bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded-lg flex items-center gap-2"
+            >
+              <FaEdit />
+              Edit
+            </button>
+            {/* Submit button - only show for Draft documents */}
+            {isDraft && (
               <button
-                onClick={handlePrintStayPlugged}
-                className="bg-purple-500 hover:bg-purple-700 text-white px-3 py-1.5 text-sm rounded-md flex items-center gap-1.5"
+                onClick={handleSubmitDocument}
+                disabled={saving}
+                className="bg-purple-600 hover:bg-purple-700 text-white px-2 py-1 rounded-lg flex items-center gap-2 disabled:opacity-50"
               >
-                {/* <FaQrcode /> */}
-                Stay Plugged
+                <FaCheck />
+                {saving ? 'Submitting...' : 'Submit'}
               </button>
-              {/* PPM Plan Button */}
-              <button
-                onClick={handlePPMPlan}
-                // className="bg-teal-600 hover:bg-teal-700 text-white px-6 py-2 rounded-lg flex items-center gap-2"
-                className="bg-teal-600 hover:bg-teal-700 text-white px-3 py-1.5 text-sm rounded-md flex items-center gap-1.5"
-              >
-                <FaCalendarAlt size={14}/>
-                PPM Plan
-              </button>
-              {/* Asset History Button */}
-              <button
-                onClick={handleAssetHistory}
-                className="bg-purple-500 hover:bg-purple-700 text-white px-3 py-1.5 text-sm rounded-md flex items-center gap-1.5"
-              >
-                <FaHistory size={14}/>
-                Asset History
-              </button>
-              {/* Installation Report Button */}
-              <button
-                onClick={handleInstallationReport}
-                className="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1.5 text-sm rounded-md flex items-center gap-1.5"
-              >
-                <FaFileAlt size={14}/>
-                Installation Report
-              </button>
-              {/* Dismantling Report Button - Only show when status is Scrapped */}
-              {asset?.status === 'Scrapped' && (
-                <button
-                  onClick={handleDismantlingReport}
-                  className="bg-red-600 hover:bg-red-700 text-white px-3 py-1.5 text-sm rounded-md flex items-center gap-1.5"
-                >
-                  <FaTrashAlt size={14} />
-                  Dismantling Report
-                </button>
-              )}
-              <button
-                onClick={() => setIsEditing(true)}
-                className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg flex items-center gap-2"
-              >
-                <FaEdit />
-                Edit
-              </button>
-              {/* Submit button - only show for Draft documents */}
-              {isDraft && (
-                <button
-                  onClick={handleSubmitDocument}
-                  disabled={saving}
-                  className="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg flex items-center gap-2 disabled:opacity-50"
-                >
-                  <FaCheck />
-                  {saving ? 'Submitting...' : 'Submit'}
-                </button>
-              )}
-            </>
-          )}
+            )}
+          </>
+        )}
           {isCancelled && (
             <span className="text-sm text-gray-500 dark:text-gray-400 italic">
               Cancelled documents cannot be edited
@@ -2158,7 +2214,7 @@ const handlePPMPlan = async () => {
                     setIsEditing(false);
                   }
                 }}
-                className="bg-gray-300 hover:bg-gray-400 text-gray-700 dark:text-gray-800 px-6 py-2 rounded-lg"
+                className="bg-gray-300 hover:bg-gray-400 text-gray-700 dark:text-gray-800 px-2 py-1 rounded-lg"
                 disabled={saving}
               >
                 Cancel
@@ -2166,7 +2222,7 @@ const handlePPMPlan = async () => {
               <button
                 onClick={handleSubmit}
                 disabled={saving}
-                className="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg flex items-center gap-2 disabled:opacity-50"
+                className="bg-green-600 hover:bg-green-700 text-white px-2 py-1 rounded-lg flex items-center gap-2 disabled:opacity-50"
               >
                 <FaSave />
                 {saving ? 'Saving...' : 'Save Changes'}
diff --git a/src/pages/AssetList.tsx b/src/pages/AssetList.tsx
index fe291e3..6754b22 100644
--- a/src/pages/AssetList.tsx
+++ b/src/pages/AssetList.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAssets, useAssetMutations } from '../hooks/useAsset';
-import { FaPlus, FaSearch, FaEdit, FaEye, FaTrash, FaCopy, FaEllipsisV, FaDownload, FaPrint, FaFileExport, FaTimes } from 'react-icons/fa';
+import { FaPlus, FaSearch, FaEdit, FaEye, FaTrash, FaCopy, FaEllipsisV, FaDownload, FaPrint, FaFileExport, FaTimes, FaFilter, FaChevronDown, FaChevronUp, FaSave, FaStar } from 'react-icons/fa';
 import LinkField from '../components/LinkField';
 
 const AssetList: React.FC = () => {
@@ -13,7 +13,7 @@ const AssetList: React.FC = () => {
   const dropdownRef = useRef<HTMLDivElement>(null);
   const limit = 20;
 
-// Filter states
+  // Filter states
   const [filterAssetId, setFilterAssetId] = useState('');
   const [filterCompany, setFilterCompany] = useState('');
   const [filterManufacturer, setFilterManufacturer] = useState('');
@@ -25,7 +25,14 @@ const AssetList: React.FC = () => {
   const [filterAssetName, setFilterAssetName] = useState('');
   const [filterSerialNumber, setFilterSerialNumber] = useState('');
 
-  // Temporary states for text inputs (not applied until user stops typing or presses Enter)
+  // Advanced filter UI states
+  const [isFilterExpanded, setIsFilterExpanded] = useState(true);
+  const [activeFilterCount, setActiveFilterCount] = useState(0);
+  const [savedFilters, setSavedFilters] = useState<any[]>([]);
+  const [showSaveFilterModal, setShowSaveFilterModal] = useState(false);
+  const [filterPresetName, setFilterPresetName] = useState('');
+
+  // Temporary states for text inputs
   const [tempAssetName, setTempAssetName] = useState('');
   const [tempSerialNumber, setTempSerialNumber] = useState('');
 
@@ -33,42 +40,57 @@ const AssetList: React.FC = () => {
   const assetNameDebounceRef = useRef<number | null>(null);
   const serialNumberDebounceRef = useRef<number | null>(null);
 
+  // Load saved filters from localStorage on mount
+  useEffect(() => {
+    const saved = localStorage.getItem('assetFilterPresets');
+    if (saved) {
+      setSavedFilters(JSON.parse(saved));
+    }
+  }, []);
+
+  // Update active filter count
+  useEffect(() => {
+    const count = [
+      filterAssetId,
+      filterCompany,
+      filterLocation,
+      filterDepartment,
+      filterModality,
+      filterManufacturer,
+      filterSupplier,
+      filterDeviceStatus,
+      filterAssetName,
+      filterSerialNumber,
+      searchTerm
+    ].filter(Boolean).length;
+    setActiveFilterCount(count);
+  }, [
+    filterAssetId,
+    filterCompany,
+    filterLocation,
+    filterDepartment,
+    filterModality,
+    filterManufacturer,
+    filterSupplier,
+    filterDeviceStatus,
+    filterAssetName,
+    filterSerialNumber,
+    searchTerm
+  ]);
+
   // Build filters object
   const filters: Record<string, any> = {};
-  if (filterAssetId) {
-    filters['name'] = filterAssetId;
-  }
-  if (filterCompany) {
-    filters['company'] = filterCompany;
-  }
-  if (filterManufacturer) {
-    filters['custom_manufacturer'] = filterManufacturer;
-  }
-  if (filterSupplier) {
-    filters['supplier'] = filterSupplier;
-  }
-  if (filterLocation) {
-    filters['location'] = filterLocation;
-  }
-  if (filterDepartment) {
-    filters['department'] = filterDepartment;
-  }
-  if (filterModality) {
-    filters['custom_modality'] = filterModality;
-  }
-  if (filterDeviceStatus) {
-    filters['custom_device_status'] = filterDeviceStatus;
-  }
-  if (filterAssetName) {
-    filters['asset_name'] = ['like', `%${filterAssetName}%`];
-  }
-  if (filterSerialNumber) {
-    filters['custom_serial_number'] = ['like', `%${filterSerialNumber}%`];
-  }
-  if (searchTerm) {
-    // Search across multiple fields
-    filters['asset_name'] = ['like', `%${searchTerm}%`];
-  }
+  if (filterAssetId) filters['name'] = filterAssetId;
+  if (filterCompany) filters['company'] = filterCompany;
+  if (filterManufacturer) filters['custom_manufacturer'] = filterManufacturer;
+  if (filterSupplier) filters['supplier'] = filterSupplier;
+  if (filterLocation) filters['location'] = filterLocation;
+  if (filterDepartment) filters['department'] = filterDepartment;
+  if (filterModality) filters['custom_modality'] = filterModality;
+  if (filterDeviceStatus) filters['custom_device_status'] = filterDeviceStatus;
+  if (filterAssetName) filters['asset_name'] = ['like', `%${filterAssetName}%`];
+  if (filterSerialNumber) filters['custom_serial_number'] = ['like', `%${filterSerialNumber}%`];
+  if (searchTerm) filters['asset_name'] = ['like', `%${searchTerm}%`];
 
   const { assets, totalCount, hasMore, loading, error, refetch } = useAssets(
     filters,
@@ -79,71 +101,114 @@ const AssetList: React.FC = () => {
 
   const { deleteAsset, loading: mutationLoading } = useAssetMutations();
 
-    // Reset page when filters change
+  // Reset page when filters change
   useEffect(() => {
     setPage(0);
   }, [filterAssetId, filterCompany, filterManufacturer, filterSupplier, filterLocation, filterDepartment, filterModality,
      filterDeviceStatus, filterAssetName, filterSerialNumber, searchTerm]);
 
-  // Debounce function for text inputs
+  // Debounce functions
   const handleAssetNameChange = (value: string) => {
     setTempAssetName(value);
-    
-    // Clear existing timeout
-    if (assetNameDebounceRef.current) {
-      clearTimeout(assetNameDebounceRef.current);
-    }
-    
-    // Set new timeout - apply filter after 800ms of no typing
-    assetNameDebounceRef.current = setTimeout(() => {
+    if (assetNameDebounceRef.current) clearTimeout(assetNameDebounceRef.current);
+    assetNameDebounceRef.current = window.setTimeout(() => {
       setFilterAssetName(value);
     }, 800);
   };
 
   const handleSerialNumberChange = (value: string) => {
     setTempSerialNumber(value);
-    
-    // Clear existing timeout
-    if (serialNumberDebounceRef.current) {
-      clearTimeout(serialNumberDebounceRef.current);
-    }
-    
-    // Set new timeout - apply filter after 800ms of no typing
-    serialNumberDebounceRef.current = setTimeout(() => {
+    if (serialNumberDebounceRef.current) clearTimeout(serialNumberDebounceRef.current);
+    serialNumberDebounceRef.current = window.setTimeout(() => {
       setFilterSerialNumber(value);
     }, 800);
   };
 
-  // Handle Enter key press for immediate filter application
+  // Handle Enter key press
   const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>, type: 'assetName' | 'serialNumber') => {
     if (e.key === 'Enter') {
       if (type === 'assetName') {
-        if (assetNameDebounceRef.current) {
-          clearTimeout(assetNameDebounceRef.current);
-        }
+        if (assetNameDebounceRef.current) clearTimeout(assetNameDebounceRef.current);
         setFilterAssetName(tempAssetName);
       } else if (type === 'serialNumber') {
-        if (serialNumberDebounceRef.current) {
-          clearTimeout(serialNumberDebounceRef.current);
-        }
+        if (serialNumberDebounceRef.current) clearTimeout(serialNumberDebounceRef.current);
         setFilterSerialNumber(tempSerialNumber);
       }
     }
   };
 
+  // Save filter preset
+  const handleSaveFilterPreset = () => {
+    if (!filterPresetName.trim()) {
+      alert('Please enter a filter name');
+      return;
+    }
+    
+    const preset = {
+      id: Date.now(),
+      name: filterPresetName,
+      filters: {
+        filterAssetId,
+        filterCompany,
+        filterLocation,
+        filterDepartment,
+        filterModality,
+        filterManufacturer,
+        filterSupplier,
+        filterDeviceStatus,
+        filterAssetName,
+        filterSerialNumber,
+        searchTerm
+      }
+    };
+    
+    const updated = [...savedFilters, preset];
+    setSavedFilters(updated);
+    setFilterPresetName('');
+    setShowSaveFilterModal(false);
+    localStorage.setItem('assetFilterPresets', JSON.stringify(updated));
+  };
+
+  // Load filter preset
+  const handleLoadFilterPreset = (preset: any) => {
+    const f = preset.filters;
+    setFilterAssetId(f.filterAssetId || '');
+    setFilterCompany(f.filterCompany || '');
+    setFilterLocation(f.filterLocation || '');
+    setFilterDepartment(f.filterDepartment || '');
+    setFilterModality(f.filterModality || '');
+    setFilterManufacturer(f.filterManufacturer || '');
+    setFilterSupplier(f.filterSupplier || '');
+    setFilterDeviceStatus(f.filterDeviceStatus || '');
+    setFilterAssetName(f.filterAssetName || '');
+    setTempAssetName(f.filterAssetName || '');
+    setFilterSerialNumber(f.filterSerialNumber || '');
+    setTempSerialNumber(f.filterSerialNumber || '');
+    setSearchTerm(f.searchTerm || '');
+  };
+
+  // Delete filter preset
+  const handleDeleteFilterPreset = (id: number) => {
+    const updated = savedFilters.filter(f => f.id !== id);
+    setSavedFilters(updated);
+    localStorage.setItem('assetFilterPresets', JSON.stringify(updated));
+  };
+
+  // Quick filters
+  const applyQuickFilter = (type: 'active' | 'down' | 'recent') => {
+    handleClearFilters();
+    if (type === 'active') setFilterDeviceStatus('Up');
+    else if (type === 'down') setFilterDeviceStatus('Down');
+  };
+
   // Cleanup timeouts on unmount
   useEffect(() => {
     return () => {
-      if (assetNameDebounceRef.current) {
-        clearTimeout(assetNameDebounceRef.current);
-      }
-      if (serialNumberDebounceRef.current) {
-        clearTimeout(serialNumberDebounceRef.current);
-      }
+      if (assetNameDebounceRef.current) clearTimeout(assetNameDebounceRef.current);
+      if (serialNumberDebounceRef.current) clearTimeout(serialNumberDebounceRef.current);
     };
   }, []);
 
-  // Helper function to format date
   const formatDate = (dateString?: string) => {
     if (!dateString) return '-';
     const date = new Date(dateString);
@@ -156,7 +221,6 @@ const AssetList: React.FC = () => {
     });
   };
 
-
   // Close dropdown when clicking outside
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -174,37 +238,23 @@ const AssetList: React.FC = () => {
     };
   }, [actionMenuOpen]);
 
-  const handleCreateNew = () => {
-    navigate('/assets/new');
-  };
-
-  const handleView = (assetName: string) => {
-    navigate(`/assets/${assetName}`);
-  };
-
-  const handleEdit = (assetName: string) => {
-    // Navigate to asset detail page - the edit functionality is in AssetDetail.tsx
-    navigate(`/assets/${assetName}`);
-  };
+  const handleCreateNew = () => navigate('/assets/new');
+  const handleView = (assetName: string) => navigate(`/assets/${assetName}`);
+  const handleEdit = (assetName: string) => navigate(`/assets/${assetName}`);
+  const handleDuplicate = (assetName: string) => navigate(`/assets/new?duplicate=${assetName}`);
 
   const handleDelete = async (assetName: string) => {
     try {
       await deleteAsset(assetName);
       setDeleteConfirmOpen(null);
-      refetch(); // Refresh the list
+      refetch();
       alert('Asset deleted successfully!');
     } catch (err) {
       alert(`Failed to delete asset: ${err instanceof Error ? err.message : 'Unknown error'}`);
     }
   };
 
-  const handleDuplicate = (assetName: string) => {
-    // Navigate to new asset page with duplication query param
-    navigate(`/assets/new?duplicate=${assetName}`);
-  };
-
   const handleExport = (asset: any) => {
-    // Export single asset as JSON
     const dataStr = JSON.stringify(asset, null, 2);
     const dataBlob = new Blob([dataStr], { type: 'application/json' });
     const url = URL.createObjectURL(dataBlob);
@@ -216,12 +266,10 @@ const AssetList: React.FC = () => {
   };
 
   const handlePrint = (assetName: string) => {
-    // Open asset in new window for printing
     window.open(`/assets/${assetName}?print=true`, '_blank');
   };
 
   const handleExportAll = () => {
-    // Export all assets as CSV
     const headers = ['Asset Name', 'Serial Number', 'Company', 'Location', 'Status'];
     const csvContent = [
       headers.join(','),
@@ -258,13 +306,8 @@ const AssetList: React.FC = () => {
     setTempSerialNumber('');
     setSearchTerm('');
 
-        // Clear any pending debounce timers
-    if (assetNameDebounceRef.current) {
-      clearTimeout(assetNameDebounceRef.current);
-    }
-    if (serialNumberDebounceRef.current) {
-      clearTimeout(serialNumberDebounceRef.current);
-    }
+    if (assetNameDebounceRef.current) clearTimeout(assetNameDebounceRef.current);
+    if (serialNumberDebounceRef.current) clearTimeout(serialNumberDebounceRef.current);
   };
 
   const hasActiveFilters = filterAssetId || filterCompany || filterManufacturer || filterSupplier || 
@@ -289,17 +332,6 @@ const AssetList: React.FC = () => {
           <h2 className="text-xl font-bold text-yellow-800 dark:text-yellow-300 mb-4">⚠️ Asset API Not Available</h2>
           <div className="text-yellow-700 dark:text-yellow-400 space-y-3">
             <p><strong>The Asset API endpoint is not deployed yet.</strong></p>
-            <p>To fix this, you need to:</p>
-            <ol className="list-decimal list-inside space-y-2 ml-4">
-              <li>SSH into your Frappe server: <code className="bg-yellow-100 dark:bg-yellow-800 px-2 py-1 rounded">ssh user@seeraasm-med.seeraarabia.com</code></li>
-              <li>Navigate to: <code className="bg-yellow-100 dark:bg-yellow-800 px-2 py-1 rounded">cd frappe-bench/apps/asset_lite/asset_lite/api</code></li>
-              <li>Create the file: <code className="bg-yellow-100 dark:bg-yellow-800 px-2 py-1 rounded">nano asset_api.py</code></li>
-              <li>Copy the content from <code className="bg-yellow-100 dark:bg-yellow-800 px-2 py-1 rounded">frappe_asset_api.py</code> in your project</li>
-              <li>Restart Frappe: <code className="bg-yellow-100 dark:bg-yellow-800 px-2 py-1 rounded">bench restart</code></li>
-            </ol>
-            <p className="mt-4">
-              <strong>For now, you can test the UI with demo data:</strong>
-            </p>
             <button 
               onClick={() => navigate('/assets/new')}
               className="mt-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded"
@@ -313,11 +345,6 @@ const AssetList: React.FC = () => {
               Try Again
             </button>
           </div>
-          <div className="mt-4 p-4 bg-white dark:bg-gray-800 rounded border border-yellow-300 dark:border-yellow-700">
-            <p className="text-sm text-gray-600 dark:text-gray-400">
-              <strong>Technical Error:</strong> {error}
-            </p>
-          </div>
         </div>
       </div>
     );
@@ -336,7 +363,7 @@ const AssetList: React.FC = () => {
         <div className="flex gap-3">
           <button
             onClick={handleExportAll}
-            className="bg-green-600 hover:bg-green-700 text-white px-4 py-3 rounded-lg flex items-center gap-2 shadow transition-all"
+            className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 shadow transition-all"
             disabled={assets.length === 0}
           >
             <FaFileExport />
@@ -344,7 +371,7 @@ const AssetList: React.FC = () => {
           </button>
           <button
             onClick={handleCreateNew}
-            className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg flex items-center gap-2 shadow-lg transition-all hover:shadow-xl"
+            className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center gap-2 shadow-lg transition-all hover:shadow-xl"
           >
             <FaPlus />
             <span className="font-medium">New Asset</span>
@@ -352,341 +379,487 @@ const AssetList: React.FC = () => {
         </div>
       </div>
 
-      {/* Search Bar */}
-      {/* <div className="mb-6 bg-white dark:bg-gray-800 rounded-lg shadow p-4">
-        <div className="flex items-center gap-2 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-2 bg-white dark:bg-gray-700">
-          <FaSearch className="text-gray-400 dark:text-gray-500" />
-          <input
-            type="text"
-            placeholder="Search assets by name, serial number, location..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="flex-1 outline-none text-gray-700 dark:text-gray-200 bg-transparent"
-          />
-                  {searchTerm && (
-            <button
-              onClick={() => setSearchTerm('')}
-              className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
-            >
-              <FaTimes />
-            </button>
-          )}
-        </div>
-      </div> */}
-
-      {/* Filter Section */}
-      <div className="mb-3 bg-white dark:bg-gray-800 rounded-lg shadow p-2">
-        <div className="flex items-center justify-between mb-1.5">
-          <h3 className="text-[11px] font-semibold text-gray-700 dark:text-gray-300">Filters</h3>
-          {hasActiveFilters && (
-            <button
-              onClick={handleClearFilters}
-              className="text-[10px] text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 flex items-center gap-0.5"
-            >
-              <FaTimes className="text-[10px]" />
-              Clear All Filters
-            </button>
-          )}
-        </div>
-        
-        {/* First Row - 5 filters */}
-        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-2 mb-2">
-          {/* Asset ID Filter */}
-          <div>
-            <LinkField
-              label="Asset ID"
-              doctype="Asset"
-              value={filterAssetId}
-              onChange={(val) => setFilterAssetId(val)}
-              placeholder="Select Asset ID"
-              disabled={false}
-              compact={true}
-            />
-          </div>
-
-          {/* Company Filter */}
-          <div>
-            <LinkField
-              label="Hospital"
-              doctype="Company"
-              value={filterCompany}
-              onChange={(val) => setFilterCompany(val)}
-              placeholder="Select Hospital"
-              disabled={false}
-              compact={true}
-              filters={{ domain: 'Healthcare' }}
-            />
-          </div>
-          {/* Asset Name Filter - Text Input */}
-          <div>
-            <label className="block text-[10px] font-medium text-gray-700 dark:text-gray-300 mb-0.5">
-              Asset Name
-            </label>
-            <div className="relative">
-              <input
-                type="text"
-                value={tempAssetName}
-                onChange={(e) => handleAssetNameChange(e.target.value)}
-                onKeyDown={(e) => handleKeyPress(e, 'assetName')}
-                placeholder="Type to search..."
-                className="w-full px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-1 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-              />
-              {tempAssetName && tempAssetName !== filterAssetName && (
-                <span className="absolute right-1.5 top-1 text-[9px] text-gray-400">
-                  typing...
+      {/* Advanced Filter Panel */}
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 mb-4 overflow-hidden">
+        {/* Filter Header */}
+        <div className="bg-gradient-to-r from-blue-500 to-blue-600 dark:from-blue-600 dark:to-blue-700 px-4 py-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <button
+                onClick={() => setIsFilterExpanded(!isFilterExpanded)}
+                className="text-white hover:bg-blue-600 dark:hover:bg-blue-700 p-2 rounded-lg transition-all"
+              >
+                {isFilterExpanded ? <FaChevronUp size={14} /> : <FaChevronDown size={14} />}
+              </button>
+              
+              <div className="flex items-center gap-2">
+                <FaFilter className="text-white" size={16} />
+                <h3 className="text-white font-semibold text-sm">Advanced Filters</h3>
+              </div>
+              
+              {activeFilterCount > 0 && (
+                <span className="bg-white text-blue-600 px-2 py-0.5 rounded-full text-xs font-bold animate-pulse">
+                  {activeFilterCount}
                 </span>
               )}
             </div>
-            <p className="text-[9px] text-gray-500 dark:text-gray-400 mt-0.5">
-              Press Enter or wait
-            </p>            
-          </div>
 
-          {/* Serial Number Filter - Text Input */}
-          <div>
-            <label className="block text-[10px] font-medium text-gray-700 dark:text-gray-300 mb-0.5">
-              Serial Number
-            </label>
-            <div className="relative">
-              <input
-                type="text"
-                value={tempSerialNumber}
-                onChange={(e) => handleSerialNumberChange(e.target.value)}
-                onKeyDown={(e) => handleKeyPress(e, 'serialNumber')}
-                placeholder="Type to search..."
-                className="w-full px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-1 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-              />
-              {tempSerialNumber && tempSerialNumber !== filterSerialNumber && (
-                <span className="absolute right-1.5 top-1 text-[9px] text-gray-400">
-                  typing...
-                </span>
+            <div className="flex items-center gap-2">
+              {/* Quick Filter Buttons */}
+              <div className="flex gap-1">
+                <button
+                  onClick={() => applyQuickFilter('active')}
+                  className="px-3 py-1 bg-white/20 hover:bg-white/30 text-white rounded-md text-xs font-medium transition-all flex items-center gap-1"
+                  title="Active Assets"
+                >
+                  <span>✓</span>
+                  <span className="hidden lg:inline">Active</span>
+                </button>
+                <button
+                  onClick={() => applyQuickFilter('down')}
+                  className="px-3 py-1 bg-white/20 hover:bg-white/30 text-white rounded-md text-xs font-medium transition-all flex items-center gap-1"
+                  title="Down Assets"
+                >
+                  <span>⚠</span>
+                  <span className="hidden lg:inline">Down</span>
+                </button>
+              </div>
+
+              {/* Save Filter Button */}
+              {activeFilterCount > 0 && (
+                <button
+                  onClick={() => setShowSaveFilterModal(true)}
+                  className="px-3 py-1.5 bg-white text-blue-600 hover:bg-blue-50 rounded-md text-xs font-medium transition-all flex items-center gap-1.5"
+                >
+                  <FaSave size={12} />
+                  Save
+                </button>
+              )}
+
+              {/* Clear All Button */}
+              {hasActiveFilters && (
+                <button
+                  onClick={handleClearFilters}
+                  className="px-3 py-1.5 bg-red-500 hover:bg-red-600 text-white rounded-md text-xs font-medium transition-all flex items-center gap-1.5"
+                >
+                  <FaTimes size={12} />
+                  Clear All
+                </button>
               )}
             </div>
-            <p className="text-[9px] text-gray-500 dark:text-gray-400 mt-0.5">
-              Press Enter or wait
-            </p>
-          </div>
-
-          {/* Location Filter */}
-          <div>
-            <LinkField
-              label="Location"
-              doctype="Location"
-              value={filterLocation}
-              onChange={(val) => setFilterLocation(val)}
-              placeholder="Select Location"
-              disabled={false}
-              compact={true}
-            />
           </div>
         </div>
 
-        {/* Second Row - 5 filters */}
-        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-2">
-          {/* Manufacturer Filter */}
-          <div>
-            <LinkField
-              label="Manufacturer"
-              doctype="Manufacturer"
-              value={filterManufacturer}
-              onChange={(val) => setFilterManufacturer(val)}
-              placeholder="Select Manufacturer"
-              disabled={false}
-              compact={true}
-            />
-          </div>
+        {/* Expandable Filter Content */}
+        <div
+          className={`transition-all duration-300 ease-in-out ${
+            isFilterExpanded ? 'max-h-[800px] opacity-100' : 'max-h-0 opacity-0'
+          } overflow-hidden`}
+        >
+          <div className="p-4">
+            {/* Saved Filter Presets */}
+            {savedFilters.length > 0 && (
+              <div className="mb-4 pb-4 border-b border-gray-200 dark:border-gray-700">
+                <h4 className="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2 flex items-center gap-2">
+                  <FaStar className="text-yellow-500" size={12} />
+                  Saved Filters
+                </h4>
+                <div className="flex flex-wrap gap-2">
+                  {savedFilters.map((preset) => (
+                    <div
+                      key={preset.id}
+                      className="group relative inline-flex items-center gap-2 px-3 py-1.5 bg-gradient-to-r from-purple-100 to-blue-100 dark:from-purple-900/30 dark:to-blue-900/30 border border-purple-200 dark:border-purple-700 rounded-lg hover:shadow-md transition-all"
+                    >
+                      <button
+                        onClick={() => handleLoadFilterPreset(preset)}
+                        className="text-xs font-medium text-purple-700 dark:text-purple-300"
+                      >
+                        {preset.name}
+                      </button>
+                      <button
+                        onClick={() => handleDeleteFilterPreset(preset.id)}
+                        className="opacity-0 group-hover:opacity-100 text-red-500 hover:text-red-700 transition-opacity"
+                      >
+                        <FaTrash size={10} />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
 
-          {/* Supplier Filter */}
-          <div>
-            <LinkField
-              label="Supplier"
-              doctype="Supplier"
-              value={filterSupplier}
-              onChange={(val) => setFilterSupplier(val)}
-              placeholder="Select Supplier"
-              disabled={false}
-              compact={true}
-            />
-          </div>
+            {/* Filter Grid - Organized by Category */}
+            <div className="space-y-5">
+              {/* Asset Identification Group */}
+              <div className="bg-gray-50 dark:bg-gray-900/50 p-3 rounded-lg">
+                {/* <h4 className="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
+                  <span className="w-1 h-4 bg-blue-500 rounded-full"></span>
+                  Asset Identification
+                </h4> */}
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3">
+                  <div className="relative">
+                    <LinkField
+                      label="Asset ID"
+                      doctype="Asset"
+                      value={filterAssetId}
+                      onChange={(val) => setFilterAssetId(val)}
+                      placeholder="Select Asset ID"
+                      disabled={false}
+                      compact={true}
+                    />
+                    {filterAssetId && (
+                      <button
+                        onClick={() => setFilterAssetId('')}
+                        className="absolute right-2 top-6 text-gray-400 hover:text-red-500 transition-colors"
+                      >
+                        <FaTimes size={10} />
+                      </button>
+                    )}
+                  </div>
 
-          {/* Department Filter */}
-          <div>
-            <LinkField
-              label="Department"
-              doctype="Department"
-              value={filterDepartment}
-              onChange={(val) => setFilterDepartment(val)}
-              placeholder="Select Department"
-              disabled={false}
-              compact={true}
-            />
-          </div>
+                  <div className="relative">
+                    <label className="block text-[10px] font-medium text-gray-700 dark:text-gray-300 mb-0.5">
+                      Asset Name
+                    </label>
+                    <input
+                      type="text"
+                      value={tempAssetName}
+                      onChange={(e) => handleAssetNameChange(e.target.value)}
+                      onKeyDown={(e) => handleKeyPress(e, 'assetName')}
+                      placeholder="Type to search..."
+                      className="w-full px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                    />
+                    {tempAssetName && tempAssetName !== filterAssetName && (
+                      <span className="absolute right-2 top-6 text-[9px] text-blue-500 animate-pulse">
+                        typing...
+                      </span>
+                    )}
+                    {filterAssetName && (
+                      <button
+                        onClick={() => {
+                          setFilterAssetName('');
+                          setTempAssetName('');
+                        }}
+                        className="absolute right-2 top-6 text-gray-400 hover:text-red-500 transition-colors"
+                      >
+                        <FaTimes size={10} />
+                      </button>
+                    )}
+                  </div>
 
-          {/* Modality Filter */}
-          <div>
-            <LinkField
-              label="Modality"
-              doctype="Modality"
-              value={filterModality}
-              onChange={(val) => setFilterModality(val)}
-              placeholder="Select Modality"
-              disabled={false}
-              compact={true}
-            />
-          </div>
+                  <div className="relative">
+                    <label className="block text-[10px] font-medium text-gray-700 dark:text-gray-300 mb-0.5">
+                      Serial Number
+                    </label>
+                    <input
+                      type="text"
+                      value={tempSerialNumber}
+                      onChange={(e) => handleSerialNumberChange(e.target.value)}
+                      onKeyDown={(e) => handleKeyPress(e, 'serialNumber')}
+                      placeholder="Type to search..."
+                      className="w-full px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                    />
+                    {tempSerialNumber && tempSerialNumber !== filterSerialNumber && (
+                      <span className="absolute right-2 top-6 text-[9px] text-blue-500 animate-pulse">
+                        typing...
+                      </span>
+                    )}
+                    {filterSerialNumber && (
+                      <button
+                        onClick={() => {
+                          setFilterSerialNumber('');
+                          setTempSerialNumber('');
+                        }}
+                        className="absolute right-2 top-6 text-gray-400 hover:text-red-500 transition-colors"
+                      >
+                        <FaTimes size={10} />
+                      </button>
+                    )}
+                  </div>
+                  <div className="relative">
+                    <LinkField
+                      label="Hospital"
+                      doctype="Company"
+                      value={filterCompany}
+                      onChange={(val) => setFilterCompany(val)}
+                      placeholder="Select Hospital"
+                      disabled={false}
+                      compact={true}
+                      filters={{ domain: 'Healthcare' }}
+                    />
+                    {filterCompany && (
+                      <button
+                        onClick={() => setFilterCompany('')}
+                        className="absolute right-2 top-6 text-gray-400 hover:text-red-500 transition-colors"
+                      >
+                        <FaTimes size={10} />
+                      </button>
+                    )}
+                  </div>
 
-          {/* Device Status Filter - Dropdown */}
-          <div>
-            <label className="block text-[10px] font-medium text-gray-700 dark:text-gray-300 mb-0.5">
-              Device Status
-            </label>
-            <select
-              value={filterDeviceStatus}
-              onChange={(e) => setFilterDeviceStatus(e.target.value)}
-              className="w-full px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-1 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
-            >
-              <option value="">All Status</option>
-              <option value="Up">Up</option>
-              <option value="Down">Down</option>
-            </select>
-          </div>
+                  <div className="relative">
+                    <label className="block text-[10px] font-medium text-gray-700 dark:text-gray-300 mb-0.5">
+                      Device Status
+                    </label>
+                    <select
+                      value={filterDeviceStatus}
+                      onChange={(e) => setFilterDeviceStatus(e.target.value)}
+                      className="w-full px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
+                    >
+                      <option value="">All Status</option>
+                      <option value="Up">✓ Up</option>
+                      <option value="Down">⚠ Down</option>
+                    </select>
+                    {filterDeviceStatus && (
+                      <button
+                        onClick={() => setFilterDeviceStatus('')}
+                        className="absolute right-8 top-6 text-gray-400 hover:text-red-500 transition-colors"
+                      >
+                        <FaTimes size={10} />
+                      </button>
+                    )}
+                  </div>
+                  <div className="relative">
+                    <LinkField
+                      label="Location"
+                      doctype="Location"
+                      value={filterLocation}
+                      onChange={(val) => setFilterLocation(val)}
+                      placeholder="Select Location"
+                      disabled={false}
+                      compact={true}
+                    />
+                    {filterLocation && (
+                      <button
+                        onClick={() => setFilterLocation('')}
+                        className="absolute right-2 top-6 text-gray-400 hover:text-red-500 transition-colors"
+                      >
+                        <FaTimes size={10} />
+                      </button>
+                    )}
+                  </div>
+                  <div className="relative">
+                    <LinkField
+                      label="Department"
+                      doctype="Department"
+                      value={filterDepartment}
+                      onChange={(val) => setFilterDepartment(val)}
+                      placeholder="Select Department"
+                      disabled={false}
+                      compact={true}
+                    />
+                    {filterDepartment && (
+                      <button
+                        onClick={() => setFilterDepartment('')}
+                        className="absolute right-2 top-6 text-gray-400 hover:text-red-500 transition-colors"
+                      >
+                        <FaTimes size={10} />
+                      </button>
+                    )}
+                  </div>
+                  <div className="relative">
+                    <LinkField
+                      label="Modality"
+                      doctype="Modality"
+                      value={filterModality}
+                      onChange={(val) => setFilterModality(val)}
+                      placeholder="Select Modality"
+                      disabled={false}
+                      compact={true}
+                    />
+                    {filterModality && (
+                      <button
+                        onClick={() => setFilterModality('')}
+                        className="absolute right-2 top-6 text-gray-400 hover:text-red-500 transition-colors"
+                      >
+                        <FaTimes size={10} />
+                      </button>
+                    )}
+                  </div>
 
+                  <div className="relative">
+                    <LinkField
+                      label="Manufacturer"
+                      doctype="Manufacturer"
+                      value={filterManufacturer}
+                      onChange={(val) => setFilterManufacturer(val)}
+                      placeholder="Select Manufacturer"
+                      disabled={false}
+                      compact={true}
+                    />
+                    {filterManufacturer && (
+                      <button
+                        onClick={() => setFilterManufacturer('')}
+                        className="absolute right-2 top-6 text-gray-400 hover:text-red-500 transition-colors"
+                      >
+                        <FaTimes size={10} />
+                      </button>
+                    )}
+                  </div>
+
+                  <div className="relative">
+                    <LinkField
+                      label="Supplier"
+                      doctype="Supplier"
+                      value={filterSupplier}
+                      onChange={(val) => setFilterSupplier(val)}
+                      placeholder="Select Supplier"
+                      disabled={false}
+                      compact={true}
+                    />
+                    {filterSupplier && (
+                      <button
+                        onClick={() => setFilterSupplier('')}
+                        className="absolute right-2 top-6 text-gray-400 hover:text-red-500 transition-colors"
+                      >
+                        <FaTimes size={10} />
+                      </button>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Active Filters Summary */}
+            {hasActiveFilters && (
+              <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+                <div className="flex items-center justify-between mb-2">
+                  <h4 className="text-xs font-semibold text-gray-700 dark:text-gray-300">
+                    Active Filters ({activeFilterCount})
+                  </h4>
+                  <button
+                    onClick={handleClearFilters}
+                    className="text-xs text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 font-medium flex items-center gap-1"
+                  >
+                    <FaTimes size={10} />
+                    Clear All
+                  </button>
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {filterAssetId && (
+                    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-gradient-to-r from-blue-100 to-blue-200 dark:from-blue-900 dark:to-blue-800 text-blue-800 dark:text-blue-200 rounded-full text-[10px] font-medium shadow-sm">
+                      <span className="font-semibold">Asset ID:</span> {filterAssetId}
+                      <button onClick={() => setFilterAssetId('')} className="hover:text-blue-600 dark:hover:text-blue-400">
+                        <FaTimes className="text-[9px]" />
+                      </button>
+                    </span>
+                  )}
+                  {filterCompany && (
+                    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-gradient-to-r from-green-100 to-green-200 dark:from-green-900 dark:to-green-800 text-green-800 dark:text-green-200 rounded-full text-[10px] font-medium shadow-sm">
+                      <span className="font-semibold">Hospital:</span> {filterCompany}
+                      <button onClick={() => setFilterCompany('')} className="hover:text-green-600">
+                        <FaTimes className="text-[9px]" />
+                      </button>
+                    </span>
+                  )}
+                  {filterAssetName && (
+                    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-gradient-to-r from-cyan-100 to-cyan-200 dark:from-cyan-900 dark:to-cyan-800 text-cyan-800 dark:text-cyan-200 rounded-full text-[10px] font-medium shadow-sm">
+                      <span className="font-semibold">Name:</span> {filterAssetName}
+                      <button onClick={() => { setFilterAssetName(''); setTempAssetName(''); }}>
+                        <FaTimes className="text-[9px]" />
+                      </button>
+                    </span>
+                  )}
+                  {filterSerialNumber && (
+                    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-gradient-to-r from-lime-100 to-lime-200 dark:from-lime-900 dark:to-lime-800 text-lime-800 dark:text-lime-200 rounded-full text-[10px] font-medium shadow-sm">
+                      <span className="font-semibold">Serial:</span> {filterSerialNumber}
+                      <button onClick={() => { setFilterSerialNumber(''); setTempSerialNumber(''); }}>
+                        <FaTimes className="text-[9px]" />
+                      </button>
+                    </span>
+                  )}
+                  {filterDeviceStatus && (
+                    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-gradient-to-r from-orange-100 to-orange-200 dark:from-orange-900 dark:to-orange-800 text-orange-800 dark:text-orange-200 rounded-full text-[10px] font-medium shadow-sm">
+                      <span className="font-semibold">Status:</span> {filterDeviceStatus}
+                      <button onClick={() => setFilterDeviceStatus('')}>
+                        <FaTimes className="text-[9px]" />
+                      </button>
+                    </span>
+                  )}
+                  {filterLocation && (
+                    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-gradient-to-r from-purple-100 to-purple-200 dark:from-purple-900 dark:to-purple-800 text-purple-800 dark:text-purple-200 rounded-full text-[10px] font-medium shadow-sm">
+                      <span className="font-semibold">Location:</span> {filterLocation}
+                      <button onClick={() => setFilterLocation('')}>
+                        <FaTimes className="text-[9px]" />
+                      </button>
+                    </span>
+                  )}
+                  {filterDepartment && (
+                    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-gradient-to-r from-yellow-100 to-yellow-200 dark:from-yellow-900 dark:to-yellow-800 text-yellow-800 dark:text-yellow-200 rounded-full text-[10px] font-medium shadow-sm">
+                      <span className="font-semibold">Department:</span> {filterDepartment}
+                      <button onClick={() => setFilterDepartment('')}>
+                        <FaTimes className="text-[9px]" />
+                      </button>
+                    </span>
+                  )}
+                  {filterModality && (
+                    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-gradient-to-r from-pink-100 to-pink-200 dark:from-pink-900 dark:to-pink-800 text-pink-800 dark:text-pink-200 rounded-full text-[10px] font-medium shadow-sm">
+                      <span className="font-semibold">Modality:</span> {filterModality}
+                      <button onClick={() => setFilterModality('')}>
+                        <FaTimes className="text-[9px]" />
+                      </button>
+                    </span>
+                  )}
+                  {filterManufacturer && (
+                    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-gradient-to-r from-indigo-100 to-indigo-200 dark:from-indigo-900 dark:to-indigo-800 text-indigo-800 dark:text-indigo-200 rounded-full text-[10px] font-medium shadow-sm">
+                      <span className="font-semibold">Manufacturer:</span> {filterManufacturer}
+                      <button onClick={() => setFilterManufacturer('')}>
+                        <FaTimes className="text-[9px]" />
+                      </button>
+                    </span>
+                  )}
+                  {filterSupplier && (
+                    <span className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-gradient-to-r from-teal-100 to-teal-200 dark:from-teal-900 dark:to-teal-800 text-teal-800 dark:text-teal-200 rounded-full text-[10px] font-medium shadow-sm">
+                      <span className="font-semibold">Supplier:</span> {filterSupplier}
+                      <button onClick={() => setFilterSupplier('')}>
+                        <FaTimes className="text-[9px]" />
+                      </button>
+                    </span>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
         </div>
-
-        {/* Active Filters Display */}
-        {hasActiveFilters && (
-          <div className="mt-2 flex flex-wrap gap-1">
-            {filterAssetId && (
-              <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full text-[10px]">
-                Asset ID: {filterAssetId}
-                <button
-                  onClick={() => setFilterAssetId('')}
-                  className="hover:text-blue-600 dark:hover:text-blue-400"
-                >
-                  <FaTimes className="text-[9px]" />
-                </button>
-              </span>
-            )}
-            {filterCompany && (
-              <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full text-[10px]">
-                Hospital: {filterCompany}
-                <button
-                  onClick={() => setFilterCompany('')}
-                  className="hover:text-green-600 dark:hover:text-green-400"
-                >
-                  <FaTimes className="text-[9px]" />
-                </button>
-              </span>
-            )}
-            {filterLocation && (
-              <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-full text-[10px]">
-                Location: {filterLocation}
-                <button
-                  onClick={() => setFilterLocation('')}
-                  className="hover:text-purple-600 dark:hover:text-purple-400"
-                >
-                  <FaTimes className="text-[9px]" />
-                </button>
-              </span>
-            )}
-            {filterDepartment && (
-              <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded-full text-[10px]">
-                Department: {filterDepartment}
-                <button
-                  onClick={() => setFilterDepartment('')}
-                  className="hover:text-yellow-600 dark:hover:text-yellow-400"
-                >
-                  <FaTimes className="text-[9px]" />
-                </button>
-              </span>
-            )}
-            {filterModality && (
-              <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 bg-pink-100 dark:bg-pink-900 text-pink-800 dark:text-pink-200 rounded-full text-[10px]">
-                Modality: {filterModality}
-                <button
-                  onClick={() => setFilterModality('')}
-                  className="hover:text-pink-600 dark:hover:text-pink-400"
-                >
-                  <FaTimes className="text-[9px]" />
-                </button>
-              </span>
-            )}
-            {filterManufacturer && (
-              <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 rounded-full text-[10px]">
-                Manufacturer: {filterManufacturer}
-                <button
-                  onClick={() => setFilterManufacturer('')}
-                  className="hover:text-indigo-600 dark:hover:text-indigo-400"
-                >
-                  <FaTimes className="text-[9px]" />
-                </button>
-              </span>
-            )}
-            {filterSupplier && (
-              <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 bg-teal-100 dark:bg-teal-900 text-teal-800 dark:text-teal-200 rounded-full text-[10px]">
-                Supplier: {filterSupplier}
-                <button
-                  onClick={() => setFilterSupplier('')}
-                  className="hover:text-teal-600 dark:hover:text-teal-400"
-                >
-                  <FaTimes className="text-[9px]" />
-                </button>
-              </span>
-            )}
-            {filterDeviceStatus && (
-              <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 bg-orange-100 dark:bg-orange-900 text-orange-800 dark:text-orange-200 rounded-full text-[10px]">
-                Status: {filterDeviceStatus}
-                <button
-                  onClick={() => setFilterDeviceStatus('')}
-                  className="hover:text-orange-600 dark:hover:text-orange-400"
-                >
-                  <FaTimes className="text-[9px]" />
-                </button>
-              </span>
-            )}
-            {filterAssetName && (
-              <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 bg-cyan-100 dark:bg-cyan-900 text-cyan-800 dark:text-cyan-200 rounded-full text-[10px]">
-                Asset Name: "{filterAssetName}"
-                <button
-                  onClick={() => {
-                    setFilterAssetName('');
-                    setTempAssetName('');
-                  }}
-                  className="hover:text-cyan-600 dark:hover:text-cyan-400"
-                >
-                  <FaTimes className="text-[9px]" />
-                </button>
-              </span>
-            )}
-            {filterSerialNumber && (
-              <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 bg-lime-100 dark:bg-lime-900 text-lime-800 dark:text-lime-200 rounded-full text-[10px]">
-                Serial: "{filterSerialNumber}"
-                <button
-                  onClick={() => {
-                    setFilterSerialNumber('');
-                    setTempSerialNumber('');
-                  }}
-                  className="hover:text-lime-600 dark:hover:text-lime-400"
-                >
-                  <FaTimes className="text-[9px]" />
-                </button>
-              </span>
-            )}
-            {searchTerm && (
-              <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-full text-[10px]">
-                Search: "{searchTerm}"
-                <button
-                  onClick={() => setSearchTerm('')}
-                  className="hover:text-purple-600 dark:hover:text-purple-400"
-                >
-                  <FaTimes className="text-[9px]" />
-                </button>
-              </span>
-            )}
-          </div>
-        )}
       </div>
 
+      {/* Save Filter Modal */}
+      {showSaveFilterModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full p-6 animate-scale-in">
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+              Save Filter Preset
+            </h3>
+            <input
+              type="text"
+              value={filterPresetName}
+              onChange={(e) => setFilterPresetName(e.target.value)}
+              placeholder="Enter filter name (e.g., 'My Active Assets')"
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white mb-4"
+              autoFocus
+            />
+            <div className="flex gap-2 justify-end">
+              <button
+                onClick={() => {
+                  setShowSaveFilterModal(false);
+                  setFilterPresetName('');
+                }}
+                className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleSaveFilterPreset}
+                className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors flex items-center gap-2"
+              >
+                <FaSave size={12} />
+                Save Filter
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Assets Table */}
       <div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
         <div className="overflow-x-auto">
@@ -723,13 +896,6 @@ const AssetList: React.FC = () => {
                     <div className="flex flex-col items-center">
                       <FaSearch className="text-4xl text-gray-300 dark:text-gray-600 mb-2" />
                       <p>No assets found</p>
-                      {/* <button
-                        onClick={handleCreateNew}
-                        className="mt-4 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 underline"
-                      >
-                        Create your first asset
-                      </button> */}
-
                       {hasActiveFilters ? (
                         <button
                           onClick={handleClearFilters}
@@ -745,7 +911,6 @@ const AssetList: React.FC = () => {
                           Create your first asset
                         </button>
                       )}
-                      
                     </div>
                   </td>
                 </tr>
@@ -771,15 +936,6 @@ const AssetList: React.FC = () => {
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap">
                       {asset.custom_device_status || '-'}
-                      {/* <span className={`
-                        px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full
-                        ${asset.custom_device_status === 'Operational' ? 'bg-green-100 text-green-800' : ''}
-                        ${asset.custom_device_status === 'Under Maintenance' ? 'bg-yellow-100 text-yellow-800' : ''}
-                        ${asset.custom_device_status === 'Decommissioned' ? 'bg-red-100 text-red-800' : ''}
-                        ${!asset.custom_device_status ? 'bg-gray-100 text-gray-800' : ''}
-                      `}>
-                        {asset.custom_device_status || 'Unknown'}
-                      </span> */}
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                       {formatDate(asset.modified)}
@@ -941,9 +1097,24 @@ const AssetList: React.FC = () => {
           </div>
         </div>
       )}
+
+      <style>{`
+        @keyframes scale-in {
+          from {
+            transform: scale(0.95);
+            opacity: 0;
+          }
+          to {
+            transform: scale(1);
+            opacity: 1;
+          }
+        }
+        .animate-scale-in {
+          animation: scale-in 0.2s ease-out;
+        }
+      `}</style>
     </div>
   );
 };
 
 export default AssetList;
-