diff --git a/py_app/app/routes.py b/py_app/app/routes.py
index 2491c93..e9e6209 100755
--- a/py_app/app/routes.py
+++ b/py_app/app/routes.py
@@ -4523,3 +4523,716 @@ def api_backup_schedule_add():
             'message': f'Failed to add schedule: {str(e)}'
         }), 500
 
+
+# ===================== Maintenance & Log Cleanup Routes =====================
+
+@bp.route('/api/maintenance/log-settings', methods=['GET'])
+@admin_plus
+def get_log_settings():
+    """Get current log cleanup settings"""
+    try:
+        import os
+        import json
+        
+        config_path = os.path.join(current_app.instance_path, 'maintenance_config.json')
+        
+        # Default settings
+        default_settings = {
+            'retention_days': 30,
+            'enabled': True,
+            'last_cleanup': None
+        }
+        
+        if os.path.exists(config_path):
+            with open(config_path, 'r') as f:
+                settings = json.load(f)
+                return jsonify({
+                    'success': True,
+                    'settings': settings
+                })
+        else:
+            return jsonify({
+                'success': True,
+                'settings': default_settings
+            })
+            
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'message': f'Failed to load settings: {str(e)}'
+        }), 500
+
+
+@bp.route('/api/maintenance/log-settings', methods=['POST'])
+@admin_plus
+def save_log_settings():
+    """Save log cleanup settings"""
+    try:
+        import os
+        import json
+        
+        data = request.json
+        retention_days = data.get('retention_days', 30)
+        
+        # Validate retention days
+        if retention_days != 0:  # 0 means disabled
+            if not isinstance(retention_days, int) or retention_days < 7:
+                return jsonify({
+                    'success': False,
+                    'message': 'Retention days must be at least 7 or 0 to disable'
+                }), 400
+        
+        config_path = os.path.join(current_app.instance_path, 'maintenance_config.json')
+        
+        # Load existing config or create new
+        if os.path.exists(config_path):
+            with open(config_path, 'r') as f:
+                config = json.load(f)
+        else:
+            config = {}
+        
+        # Update settings
+        config['retention_days'] = retention_days
+        config['enabled'] = retention_days > 0
+        
+        # Ensure instance directory exists
+        os.makedirs(current_app.instance_path, exist_ok=True)
+        
+        # Save config
+        with open(config_path, 'w') as f:
+            json.dump(config, f, indent=4)
+        
+        return jsonify({
+            'success': True,
+            'message': f'Log cleanup settings saved. Logs older than {retention_days} days will be deleted.' if retention_days > 0 else 'Log cleanup disabled.'
+        })
+        
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'message': f'Failed to save settings: {str(e)}'
+        }), 500
+
+
+@bp.route('/api/maintenance/cleanup-logs', methods=['POST'])
+@admin_plus
+def cleanup_logs():
+    """Execute immediate log cleanup based on retention settings"""
+    try:
+        import os
+        import json
+        import glob
+        from datetime import datetime, timedelta
+        
+        # Load settings
+        config_path = os.path.join(current_app.instance_path, 'maintenance_config.json')
+        
+        if not os.path.exists(config_path):
+            return jsonify({
+                'success': False,
+                'message': 'No cleanup settings configured. Please configure retention days first.'
+            }), 400
+        
+        with open(config_path, 'r') as f:
+            config = json.load(f)
+        
+        retention_days = config.get('retention_days', 30)
+        
+        if retention_days == 0:
+            return jsonify({
+                'success': False,
+                'message': 'Log cleanup is disabled. Please enable it in settings first.'
+            }), 400
+        
+        # Get log directory
+        log_dir = os.path.join(os.path.dirname(current_app.instance_path), 'logs')
+        
+        if not os.path.exists(log_dir):
+            return jsonify({
+                'success': False,
+                'message': f'Log directory not found: {log_dir}'
+            }), 404
+        
+        # Find log files
+        log_files = glob.glob(os.path.join(log_dir, '*.log'))
+        old_log_files = glob.glob(os.path.join(log_dir, '*.log.*'))  # Rotated logs
+        all_log_files = log_files + old_log_files
+        
+        if not all_log_files:
+            return jsonify({
+                'success': True,
+                'message': 'No log files found to clean up.',
+                'files_deleted': 0
+            })
+        
+        # Calculate cutoff date
+        cutoff_date = datetime.now() - timedelta(days=retention_days)
+        
+        deleted_count = 0
+        deleted_files = []
+        total_size_deleted = 0
+        
+        # Check each log file
+        for log_file in all_log_files:
+            try:
+                # Skip current main log files (only delete rotated/old ones)
+                if log_file.endswith('.log') and '.' not in os.path.basename(log_file)[:-4]:
+                    # This is a main log file (access.log, error.log), skip it
+                    continue
+                
+                file_mtime = datetime.fromtimestamp(os.path.getmtime(log_file))
+                
+                if file_mtime < cutoff_date:
+                    file_size = os.path.getsize(log_file)
+                    os.remove(log_file)
+                    deleted_count += 1
+                    deleted_files.append(os.path.basename(log_file))
+                    total_size_deleted += file_size
+                    
+            except Exception as e:
+                print(f"Error deleting {log_file}: {str(e)}")
+                continue
+        
+        # Update last cleanup time
+        config['last_cleanup'] = datetime.now().isoformat()
+        with open(config_path, 'w') as f:
+            json.dump(config, f, indent=4)
+        
+        # Format size in human readable format
+        if total_size_deleted > 1024 * 1024:
+            size_str = f"{total_size_deleted / (1024 * 1024):.2f} MB"
+        elif total_size_deleted > 1024:
+            size_str = f"{total_size_deleted / 1024:.2f} KB"
+        else:
+            size_str = f"{total_size_deleted} bytes"
+        
+        if deleted_count > 0:
+            message = f'Successfully deleted {deleted_count} old log file(s), freed {size_str}.'
+        else:
+            message = f'No log files older than {retention_days} days found.'
+        
+        return jsonify({
+            'success': True,
+            'message': message,
+            'files_deleted': deleted_count,
+            'size_freed': total_size_deleted,
+            'deleted_files': deleted_files
+        })
+        
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'message': f'Failed to cleanup logs: {str(e)}'
+        }), 500
+
+
+@bp.route('/api/maintenance/storage-info', methods=['GET'])
+@admin_plus
+def get_storage_info():
+    """Get storage information for logs, database, and backups"""
+    try:
+        import os
+        import glob
+        
+        def format_size(size_bytes):
+            """Format bytes to human readable size"""
+            if size_bytes >= 1024 * 1024 * 1024:
+                return f"{size_bytes / (1024 * 1024 * 1024):.2f} GB"
+            elif size_bytes >= 1024 * 1024:
+                return f"{size_bytes / (1024 * 1024):.2f} MB"
+            elif size_bytes >= 1024:
+                return f"{size_bytes / 1024:.2f} KB"
+            else:
+                return f"{size_bytes} bytes"
+        
+        def get_directory_size(path):
+            """Calculate total size of all files in directory"""
+            total_size = 0
+            if os.path.exists(path):
+                for dirpath, dirnames, filenames in os.walk(path):
+                    for filename in filenames:
+                        filepath = os.path.join(dirpath, filename)
+                        try:
+                            total_size += os.path.getsize(filepath)
+                        except:
+                            continue
+            return total_size
+        
+        # Get logs directory size
+        log_dir = '/srv/quality_app/logs'
+        logs_size = get_directory_size(log_dir)
+        
+        # Get database size
+        db_size = 0
+        try:
+            # Load database config directly
+            settings_file = os.path.join(current_app.instance_path, 'external_server.conf')
+            config = {}
+            with open(settings_file, 'r') as f:
+                for line in f:
+                    if '=' in line:
+                        key, value = line.strip().split('=', 1)
+                        config[key] = value
+            
+            conn = mariadb.connect(
+                host=config.get('server_domain', 'localhost'),
+                port=int(config.get('port', '3306')),
+                user=config.get('username', 'root'),
+                password=config.get('password', ''),
+                database=config.get('database_name', 'trasabilitate')
+            )
+            cursor = conn.cursor()
+            
+            # Query to get database size
+            cursor.execute("""
+                SELECT 
+                    SUM(data_length + index_length) as size
+                FROM information_schema.TABLES
+                WHERE table_schema = %s
+            """, (config.get('database_name', 'trasabilitate'),))
+            
+            result = cursor.fetchone()
+            if result and result[0]:
+                db_size = int(result[0])
+            
+            cursor.close()
+            conn.close()
+        except Exception as e:
+            print(f"Error getting database size: {str(e)}")
+            import traceback
+            traceback.print_exc()
+            db_size = 0
+        
+        # Get backups directory size
+        backups_dir = '/srv/quality_app/backups'
+        backups_size = get_directory_size(backups_dir)
+        
+        return jsonify({
+            'success': True,
+            'logs_size': format_size(logs_size),
+            'database_size': format_size(db_size) if db_size > 0 else 'N/A',
+            'backups_size': format_size(backups_size),
+            'logs_size_bytes': logs_size,
+            'database_size_bytes': db_size,
+            'backups_size_bytes': backups_size
+        })
+        
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'message': f'Failed to get storage info: {str(e)}'
+        }), 500
+
+
+@bp.route('/api/maintenance/database-tables', methods=['GET'])
+@admin_plus
+def get_all_database_tables():
+    """Get list of all tables in the database with their info"""
+    try:
+        # Load database config directly
+        settings_file = os.path.join(current_app.instance_path, 'external_server.conf')
+        config = {}
+        with open(settings_file, 'r') as f:
+            for line in f:
+                if '=' in line:
+                    key, value = line.strip().split('=', 1)
+                    config[key] = value
+        
+        conn = mariadb.connect(
+            host=config.get('server_domain', 'localhost'),
+            port=int(config.get('port', '3306')),
+            user=config.get('username', 'root'),
+            password=config.get('password', ''),
+            database=config.get('database_name', 'trasabilitate')
+        )
+        cursor = conn.cursor(dictionary=True)
+        
+        # Get all tables with their size and row count
+        cursor.execute("""
+            SELECT 
+                TABLE_NAME as name,
+                TABLE_ROWS as `rows`,
+                ROUND((DATA_LENGTH + INDEX_LENGTH) / 1024 / 1024, 2) as size_mb,
+                ROUND((DATA_LENGTH + INDEX_LENGTH), 0) as size_bytes
+            FROM information_schema.TABLES
+            WHERE TABLE_SCHEMA = %s
+            ORDER BY TABLE_NAME
+        """, (config.get('database_name', 'trasabilitate'),))
+        
+        tables = cursor.fetchall()
+        
+        # Format the data
+        formatted_tables = []
+        for table in tables:
+            size_mb = float(table['size_mb']) if table['size_mb'] else 0
+            if size_mb >= 1:
+                size_str = f"{size_mb:.2f} MB"
+            else:
+                size_kb = size_mb * 1024
+                if size_kb >= 1:
+                    size_str = f"{size_kb:.2f} KB"
+                else:
+                    size_str = f"{table['size_bytes']} bytes"
+            
+            formatted_tables.append({
+                'name': table['name'],
+                'rows': f"{table['rows']:,}" if table['rows'] else '0',
+                'size': size_str,
+                'size_bytes': int(table['size_bytes']) if table['size_bytes'] else 0
+            })
+        
+        cursor.close()
+        conn.close()
+        
+        return jsonify({
+            'success': True,
+            'tables': formatted_tables,
+            'total_tables': len(formatted_tables)
+        })
+        
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'message': f'Failed to get database tables: {str(e)}'
+        }), 500
+
+
+@bp.route('/api/maintenance/drop-table', methods=['POST'])
+@admin_plus
+def drop_table():
+    """Drop a database table - DANGEROUS operation"""
+    try:
+        data = request.json
+        table_name = data.get('table_name', '').strip()
+        
+        if not table_name:
+            return jsonify({
+                'success': False,
+                'message': 'Table name is required'
+            }), 400
+        
+        # Validate table name to prevent SQL injection
+        if not table_name.replace('_', '').isalnum():
+            return jsonify({
+                'success': False,
+                'message': 'Invalid table name format'
+            }), 400
+        
+        # Load database config directly
+        settings_file = os.path.join(current_app.instance_path, 'external_server.conf')
+        config = {}
+        with open(settings_file, 'r') as f:
+            for line in f:
+                if '=' in line:
+                    key, value = line.strip().split('=', 1)
+                    config[key] = value
+        
+        conn = mariadb.connect(
+            host=config.get('server_domain', 'localhost'),
+            port=int(config.get('port', '3306')),
+            user=config.get('username', 'root'),
+            password=config.get('password', ''),
+            database=config.get('database_name', 'trasabilitate')
+        )
+        cursor = conn.cursor()
+        
+        # Verify table exists
+        cursor.execute("""
+            SELECT COUNT(*) as count
+            FROM information_schema.TABLES
+            WHERE TABLE_SCHEMA = %s AND TABLE_NAME = %s
+        """, (config.get('database_name', 'trasabilitate'), table_name))
+        
+        result = cursor.fetchone()
+        if not result or result[0] == 0:
+            cursor.close()
+            conn.close()
+            return jsonify({
+                'success': False,
+                'message': f'Table "{table_name}" does not exist'
+            }), 404
+        
+        # Drop the table
+        cursor.execute(f"DROP TABLE IF EXISTS `{table_name}`")
+        conn.commit()
+        
+        cursor.close()
+        conn.close()
+        
+        return jsonify({
+            'success': True,
+            'message': f'Table "{table_name}" has been dropped successfully'
+        })
+        
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'message': f'Failed to drop table: {str(e)}'
+        }), 500
+
+
+@bp.route('/api/backup/table', methods=['POST'])
+@admin_plus
+def backup_single_table():
+    """Create a backup of a single table"""
+    try:
+        import os
+        from datetime import datetime
+        
+        data = request.json
+        table_name = data.get('table_name', '').strip()
+        
+        if not table_name:
+            return jsonify({
+                'success': False,
+                'message': 'Table name is required'
+            }), 400
+        
+        # Validate table name
+        if not table_name.replace('_', '').isalnum():
+            return jsonify({
+                'success': False,
+                'message': 'Invalid table name format'
+            }), 400
+        
+        # Load database config directly
+        settings_file = os.path.join(current_app.instance_path, 'external_server.conf')
+        config = {}
+        with open(settings_file, 'r') as f:
+            for line in f:
+                if '=' in line:
+                    key, value = line.strip().split('=', 1)
+                    config[key] = value
+        
+        # Verify table exists
+        conn = mariadb.connect(
+            host=config.get('server_domain', 'localhost'),
+            port=int(config.get('port', '3306')),
+            user=config.get('username', 'root'),
+            password=config.get('password', ''),
+            database=config.get('database_name', 'trasabilitate')
+        )
+        cursor = conn.cursor()
+        
+        cursor.execute("""
+            SELECT COUNT(*) as count
+            FROM information_schema.TABLES
+            WHERE TABLE_SCHEMA = %s AND TABLE_NAME = %s
+        """, (config.get('database_name', 'trasabilitate'), table_name))
+        
+        result = cursor.fetchone()
+        if not result or result[0] == 0:
+            cursor.close()
+            conn.close()
+            return jsonify({
+                'success': False,
+                'message': f'Table "{table_name}" does not exist'
+            }), 404
+        
+        cursor.close()
+        conn.close()
+        
+        # Create backup directory if not exists
+        backup_dir = os.path.join(os.path.dirname(current_app.instance_path), 'backups')
+        os.makedirs(backup_dir, exist_ok=True)
+        
+        # Generate backup filename
+        timestamp = datetime.now().strftime('%Y%m%d_%H%M%S')
+        backup_filename = f'table_{table_name}_{timestamp}.sql'
+        backup_path = os.path.join(backup_dir, backup_filename)
+        
+        # Create backup using mysqldump
+        import subprocess
+        
+        mysqldump_cmd = [
+            'mysqldump',
+            f'--host={config.get("host", "localhost")}',
+            f'--user={config.get("user", "root")}',
+            f'--password={config.get("password", "")}',
+            '--single-transaction',
+            '--no-create-db',
+            config.get('database', 'trasabilitate'),
+            table_name
+        ]
+        
+        with open(backup_path, 'w') as f:
+            result = subprocess.run(
+                mysqldump_cmd,
+                stdout=f,
+                stderr=subprocess.PIPE,
+                text=True
+            )
+        
+        if result.returncode != 0:
+            return jsonify({
+                'success': False,
+                'message': f'Backup failed: {result.stderr}'
+            }), 500
+        
+        # Get file size
+        file_size = os.path.getsize(backup_path)
+        if file_size >= 1024 * 1024:
+            size_str = f"{file_size / (1024 * 1024):.2f} MB"
+        elif file_size >= 1024:
+            size_str = f"{file_size / 1024:.2f} KB"
+        else:
+            size_str = f"{file_size} bytes"
+        
+        return jsonify({
+            'success': True,
+            'message': f'Table "{table_name}" backed up successfully',
+            'filename': backup_filename,
+            'size': size_str
+        })
+        
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'message': f'Failed to backup table: {str(e)}'
+        }), 500
+
+
+@bp.route('/api/backup/table-backups', methods=['GET'])
+@admin_plus
+def list_table_backups():
+    """List all table-specific backups"""
+    try:
+        import os
+        import glob
+        from datetime import datetime
+        
+        backup_dir = os.path.join(os.path.dirname(current_app.instance_path), 'backups')
+        
+        if not os.path.exists(backup_dir):
+            return jsonify({
+                'success': True,
+                'backups': []
+            })
+        
+        # Find all table backup files (pattern: table_*_timestamp.sql)
+        table_backups = glob.glob(os.path.join(backup_dir, 'table_*.sql'))
+        
+        backups = []
+        for backup_path in table_backups:
+            filename = os.path.basename(backup_path)
+            
+            # Extract table name from filename (table_TABLENAME_timestamp.sql)
+            parts = filename.replace('.sql', '').split('_')
+            if len(parts) >= 3:
+                table_name = '_'.join(parts[1:-2]) if len(parts) > 3 else parts[1]
+                
+                file_size = os.path.getsize(backup_path)
+                if file_size >= 1024 * 1024:
+                    size_str = f"{file_size / (1024 * 1024):.2f} MB"
+                elif file_size >= 1024:
+                    size_str = f"{file_size / 1024:.2f} KB"
+                else:
+                    size_str = f"{file_size} bytes"
+                
+                mtime = os.path.getmtime(backup_path)
+                created = datetime.fromtimestamp(mtime).strftime('%Y-%m-%d %H:%M')
+                
+                backups.append({
+                    'filename': filename,
+                    'table_name': table_name,
+                    'size': size_str,
+                    'created': created,
+                    'timestamp': mtime
+                })
+        
+        # Sort by timestamp descending
+        backups.sort(key=lambda x: x['timestamp'], reverse=True)
+        
+        return jsonify({
+            'success': True,
+            'backups': backups
+        })
+        
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'message': f'Failed to list table backups: {str(e)}'
+        }), 500
+
+
+@bp.route('/api/restore/table', methods=['POST'])
+@admin_plus
+def restore_single_table():
+    """Restore a single table from backup"""
+    try:
+        import os
+        import subprocess
+        
+        data = request.json
+        backup_file = data.get('backup_file', '').strip()
+        
+        if not backup_file:
+            return jsonify({
+                'success': False,
+                'message': 'Backup file is required'
+            }), 400
+        
+        # Security: validate filename
+        if not backup_file.endswith('.sql') or not backup_file.startswith('table_'):
+            return jsonify({
+                'success': False,
+                'message': 'Invalid backup file format'
+            }), 400
+        
+        backup_dir = os.path.join(os.path.dirname(current_app.instance_path), 'backups')
+        backup_path = os.path.join(backup_dir, backup_file)
+        
+        if not os.path.exists(backup_path):
+            return jsonify({
+                'success': False,
+                'message': 'Backup file not found'
+            }), 404
+        
+        # Extract table name from filename
+        parts = backup_file.replace('.sql', '').split('_')
+        table_name = '_'.join(parts[1:-2]) if len(parts) > 3 else parts[1]
+        
+        # Load database config directly
+        settings_file = os.path.join(current_app.instance_path, 'external_server.conf')
+        config = {}
+        with open(settings_file, 'r') as f:
+            for line in f:
+                if '=' in line:
+                    key, value = line.strip().split('=', 1)
+                    config[key] = value
+        
+        # Restore using mysql command
+        mysql_cmd = [
+            'mysql',
+            f'--host={config.get("server_domain", "localhost")}',
+            f'--user={config.get("username", "root")}',
+            f'--password={config.get("password", "")}',
+            config.get('database_name', 'trasabilitate')
+        ]
+        
+        with open(backup_path, 'r') as f:
+            result = subprocess.run(
+                mysql_cmd,
+                stdin=f,
+                stderr=subprocess.PIPE,
+                text=True
+            )
+        
+        if result.returncode != 0:
+            return jsonify({
+                'success': False,
+                'message': f'Restore failed: {result.stderr}'
+            }), 500
+        
+        return jsonify({
+            'success': True,
+            'message': f'Table "{table_name}" restored successfully from {backup_file}'
+        })
+        
+    except Exception as e:
+        return jsonify({
+            'success': False,
+            'message': f'Failed to restore table: {str(e)}'
+        }), 500
+
+
diff --git a/py_app/app/templates/settings.html b/py_app/app/templates/settings.html
index cda553a..5e3a6dc 100755
--- a/py_app/app/templates/settings.html
+++ b/py_app/app/templates/settings.html
@@ -68,217 +68,380 @@
     {% endif %}
 
     {% if session.role in ['superadmin', 'admin'] %}
-    <div class="card backup-card" style="margin-top: 32px;">
-        <h3>💾 Database Backup Management</h3>
-        <p><strong>Automated Backup System:</strong> Schedule and manage database backups</p>
-    {% if session.role in ['superadmin', 'admin'] %}
-    <div class="card backup-card" style="margin-top: 32px;">
+    <div class="card" style="margin-top: 32px;">
         <h3 style="margin: 0 0 20px 0; display: flex; align-items: center; gap: 10px;">
-            💾 Database Backup Management
-            <span style="font-size: 0.7em; background: #4caf50; color: white; padding: 4px 12px; border-radius: 12px; font-weight: normal;">Active</span>
+            🔧 Maintenance & Cleanup
+            <span style="font-size: 0.7em; background: var(--accent-color, #4caf50); color: white; padding: 4px 12px; border-radius: 12px; font-weight: normal;">System</span>
         </h3>
         
-        <!-- Grid Layout for Cards -->
-        <div class="backup-grid">
+        <!-- Log Files Auto-Delete Section -->
+        <div style="margin-bottom: 24px; padding: 20px; background: var(--sub-card-bg, rgba(0,0,0,0.02)); border: 1px solid var(--border-color, rgba(0,0,0,0.1)); border-radius: 8px;">
+            <h4 style="margin: 0 0 15px 0; color: var(--text-primary, #333);">📋 Log Files Auto-Delete</h4>
             
-            <!-- Quick Actions Card -->
-            <div class="backup-sub-card">
-                <div class="sub-card-header">
-                    <h4>⚡ Quick Actions</h4>
+            <div style="margin-bottom: 20px;">
+                <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-secondary, #666);">
+                    Delete logs older than:
+                </label>
+                <select id="log-retention-days" style="padding: 10px 14px; border: 1px solid var(--input-border, #ddd); border-radius: 6px; font-size: 1em; min-width: 220px; background: var(--input-bg, white); color: var(--text-primary, #333);">
+                    <option value="7">7 Days (1 Week)</option>
+                    <option value="14">14 Days (2 Weeks)</option>
+                    <option value="30" selected>30 Days (1 Month)</option>
+                    <option value="60">60 Days (2 Months)</option>
+                    <option value="90">90 Days (3 Months)</option>
+                    <option value="180">180 Days (6 Months)</option>
+                    <option value="365">365 Days (1 Year)</option>
+                    <option value="0">Never (Disable Auto-Delete)</option>
+                </select>
+            </div>
+            
+            <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+                <button id="save-log-settings-btn" class="btn" style="background-color: #4caf50; color: white; padding: 10px 20px; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.3s;">
+                    💾 Save Settings
+                </button>
+                <button id="cleanup-logs-now-btn" class="btn" style="background-color: #ff9800; color: white; padding: 10px 20px; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.3s;">
+                    🗑️ Clean Up Logs Now
+                </button>
+            </div>
+            
+            <div id="log-cleanup-status" style="margin-top: 15px; padding: 12px 16px; background: var(--status-bg, #e3f2fd); border-left: 4px solid var(--status-border, #2196f3); border-radius: 4px; display: none; color: var(--text-primary, #333);">
+                <strong>Status:</strong> <span id="log-cleanup-message"></span>
+            </div>
+        </div>
+        
+        <!-- System Storage Information Section -->
+        <div style="margin-bottom: 24px; padding: 20px; background: var(--sub-card-bg, rgba(0,0,0,0.02)); border: 1px solid var(--border-color, rgba(0,0,0,0.1)); border-radius: 8px;">
+            <h4 style="margin: 0 0 15px 0; color: var(--text-primary, #333);">📊 System Storage Information</h4>
+            
+            <div id="storage-info" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 15px;">
+                <div class="storage-stat-card" style="padding: 16px; background: linear-gradient(135deg, var(--stat-bg-1, rgba(33, 150, 243, 0.1)) 0%, var(--stat-bg-1-end, rgba(33, 150, 243, 0.05)) 100%); border: 1px solid var(--stat-border-1, rgba(33, 150, 243, 0.2)); border-radius: 8px; transition: transform 0.2s;">
+                    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+                        <span style="font-size: 1.5em;">📄</span>
+                        <div style="font-size: 0.85em; color: var(--text-secondary, #666); font-weight: 500;">Log Files</div>
+                    </div>
+                    <div style="font-size: 1.4em; font-weight: 700; color: var(--stat-color-1, #1976d2);" id="logs-size">Loading...</div>
                 </div>
-                <div class="sub-card-body">
-                    <button id="backup-now-btn" class="backup-action-btn backup-btn-full">
-                        <span class="btn-icon">🗄️</span>
-                        <span class="btn-text">
-                            <strong>Full Backup</strong>
-                            <small>Schema + Data + Triggers</small>
-                        </span>
-                    </button>
-                    <button id="backup-data-only-btn" class="backup-action-btn backup-btn-data">
-                        <span class="btn-icon">📦</span>
-                        <span class="btn-text">
-                            <strong>Data-Only Backup</strong>
-                            <small>Table data only (faster)</small>
-                        </span>
-                    </button>
-                    <button id="refresh-backups-btn" class="backup-action-btn backup-btn-refresh">
-                        <span class="btn-icon">🔄</span>
-                        <span class="btn-text">
-                            <strong>Refresh List</strong>
-                            <small>Reload backup files</small>
-                        </span>
-                    </button>
+                
+                <div class="storage-stat-card" style="padding: 16px; background: linear-gradient(135deg, var(--stat-bg-2, rgba(156, 39, 176, 0.1)) 0%, var(--stat-bg-2-end, rgba(156, 39, 176, 0.05)) 100%); border: 1px solid var(--stat-border-2, rgba(156, 39, 176, 0.2)); border-radius: 8px; transition: transform 0.2s;">
+                    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+                        <span style="font-size: 1.5em;">💾</span>
+                        <div style="font-size: 0.85em; color: var(--text-secondary, #666); font-weight: 500;">Database</div>
+                    </div>
+                    <div style="font-size: 1.4em; font-weight: 700; color: var(--stat-color-2, #7b1fa2);" id="database-size">Loading...</div>
+                </div>
+                
+                <div class="storage-stat-card" style="padding: 16px; background: linear-gradient(135deg, var(--stat-bg-3, rgba(255, 152, 0, 0.1)) 0%, var(--stat-bg-3-end, rgba(255, 152, 0, 0.05)) 100%); border: 1px solid var(--stat-border-3, rgba(255, 152, 0, 0.2)); border-radius: 8px; transition: transform 0.2s;">
+                    <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+                        <span style="font-size: 1.5em;">📦</span>
+                        <div style="font-size: 0.85em; color: var(--text-secondary, #666); font-weight: 500;">Backups</div>
+                    </div>
+                    <div style="font-size: 1.4em; font-weight: 700; color: var(--stat-color-3, #f57c00);" id="backups-size">Loading...</div>
                 </div>
             </div>
+            
+            <button id="refresh-storage-btn" class="btn" style="background-color: var(--secondary-btn, #2196f3); color: white; font-size: 0.9em; padding: 8px 16px; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.3s;">
+                🔄 Refresh Storage Info
+            </button>
+        </div>
+        
+        <!-- Database Table Management Section -->
+        <div style="margin-bottom: 24px; padding: 20px; background: var(--sub-card-bg, rgba(0,0,0,0.02)); border: 1px solid var(--border-color, rgba(0,0,0,0.1)); border-radius: 8px; border-left: 4px solid #f44336;">
+            <h4 style="margin: 0 0 15px 0; color: var(--text-primary, #333); display: flex; align-items: center; gap: 8px;">
+                <span>🗑️ Database Table Management</span>
+                <span style="background: #ff5722; color: white; font-size: 0.65em; padding: 3px 8px; border-radius: 4px; font-weight: 600;">DANGER ZONE</span>
+            </h4>
+            
+            <div style="padding: 12px 16px; background: var(--warning-bg, rgba(255, 87, 34, 0.1)); border-left: 4px solid #ff5722; border-radius: 4px; margin-bottom: 20px;">
+                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+                    <span style="font-size: 1.2em;">⚠️</span>
+                    <strong style="color: var(--warning-text, #d84315); font-size: 1.05em;">Warning</strong>
+                </div>
+                <p style="margin: 0; color: var(--text-secondary, #666); font-size: 0.9em; line-height: 1.6;">
+                    Dropping tables will <strong>permanently delete all data</strong> in the selected table. This action cannot be undone. Always create a backup before dropping tables!
+                </p>
+            </div>
+            
+            <div style="margin-bottom: 20px;">
+                <button id="load-tables-btn" class="btn" style="background-color: #2196f3; color: white; padding: 10px 20px; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.3s;">
+                    📋 Load Database Tables
+                </button>
+            </div>
+            
+            <div id="tables-list-container" style="display: none;">
+                <div style="margin-bottom: 15px;">
+                    <label style="display: block; margin-bottom: 8px; font-weight: 600; color: var(--text-secondary, #666);">
+                        Select table to drop:
+                    </label>
+                    <select id="table-to-drop" style="width: 100%; padding: 10px 14px; border: 1px solid var(--input-border, #ddd); border-radius: 6px; font-size: 1em; background: var(--input-bg, white); color: var(--text-primary, #333);">
+                        <option value="">-- Select a table --</option>
+                    </select>
+                </div>
+                
+                <div id="table-info" style="display: none; margin-bottom: 15px; padding: 12px; background: var(--info-bg-alt, rgba(33, 150, 243, 0.1)); border-radius: 6px; font-size: 0.9em;">
+                    <div style="margin-bottom: 5px;"><strong>Table:</strong> <span id="info-table-name"></span></div>
+                    <div style="margin-bottom: 5px;"><strong>Rows:</strong> <span id="info-row-count"></span></div>
+                    <div><strong>Size:</strong> <span id="info-table-size"></span></div>
+                </div>
+                
+                <button id="drop-table-btn" class="btn" style="background-color: #f44336; color: white; padding: 10px 20px; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; transition: all 0.3s;" disabled>
+                    🗑️ Drop Selected Table
+                </button>
+            </div>
+            
+            <div id="table-operation-status" style="margin-top: 15px; padding: 12px 16px; background: var(--status-bg, #e3f2fd); border-left: 4px solid var(--status-border, #2196f3); border-radius: 4px; display: none; color: var(--text-primary, #333);">
+                <strong>Status:</strong> <span id="table-operation-message"></span>
+            </div>
+        </div>
+    </div>
+    {% endif %}
 
-            <!-- Schedule Card -->
-            <div class="backup-sub-card">
-                <div class="sub-card-header">
-                    <h4>⏰ Automatic Schedules</h4>
-                    <div style="display: flex; gap: 8px; align-items: center;">
-                        <span id="schedule-count-badge" class="count-badge">0</span>
-                        <button id="add-schedule-btn" class="btn-small" style="background: #4caf50; color: white; padding: 4px 12px; border-radius: 4px; font-size: 0.85em;">
-                            ➕ Add Schedule
-                        </button>
+    {% if session.role in ['superadmin', 'admin'] %}
+    <div class="card backup-card" style="margin-top: 32px;">
+        <h3 style="margin: 0 0 20px 0; display: flex; align-items: center; gap: 10px; font-size: 1.3em;">
+            💾 Database Backup Management
+            <span style="font-size: 0.65em; background: #4caf50; color: white; padding: 3px 10px; border-radius: 12px; font-weight: normal;">Active</span>
+        </h3>
+        
+        <!-- Quick Actions -->
+        <div style="display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap;">
+            <button id="backup-now-btn" class="compact-btn" style="background: #4caf50; color: white;">
+                🗄️ Full Backup
+            </button>
+            <button id="backup-data-only-btn" class="compact-btn" style="background: #2196f3; color: white;">
+                📦 Data Backup
+            </button>
+            <button id="refresh-backups-btn" class="compact-btn" style="background: #ff9800; color: white;">
+                🔄 Refresh
+            </button>
+        </div>
+        
+        <!-- Per-Table Operations Section -->
+        <div style="margin-bottom: 24px;">
+            <button id="toggle-table-backup-btn" class="compact-btn" style="width: 100%; background: #9c27b0; color: white; padding: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1em;">
+                <span>📋</span>
+                <span id="toggle-table-backup-text">Show Per-Table Backup & Restore</span>
+                <span style="margin-left: auto; font-size: 1.2em;">▼</span>
+            </button>
+            
+            <div id="table-backup-section" style="display: none; margin-top: 12px; padding: 20px; background: var(--sub-card-bg, rgba(156, 39, 176, 0.05)); border-radius: 8px; border: 1px solid var(--border-color, rgba(156, 39, 176, 0.2));">
+                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 16px;">
+                    <!-- Backup Table Column -->
+                    <div>
+                        <h5 style="margin: 0 0 12px 0; font-size: 0.95em; color: var(--text-primary, #333); display: flex; align-items: center; gap: 6px;">
+                            <span style="color: #4caf50;">💾</span> Backup Single Table
+                        </h5>
+                        <div style="padding: 16px; background: var(--input-bg, white); border: 1px solid var(--input-border, #ddd); border-radius: 6px;">
+                            <label style="display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.85em; color: var(--text-secondary, #666);">
+                                Select Table:
+                            </label>
+                            <select id="table-backup-select" style="width: 100%; padding: 10px; border: 1px solid var(--input-border, #ddd); border-radius: 4px; margin-bottom: 12px; background: var(--input-bg, white); color: var(--text-primary, #333);">
+                                <option value="">-- Select table to backup --</option>
+                            </select>
+                            <button id="backup-single-table-btn" class="compact-btn" style="width: 100%; background: #4caf50; color: white; padding: 10px;" disabled>
+                                💾 Create Backup
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <!-- Restore Table Column -->
+                    <div>
+                        <h5 style="margin: 0 0 12px 0; font-size: 0.95em; color: var(--text-primary, #333); display: flex; align-items: center; gap: 6px;">
+                            <span style="color: #ff9800;">🔄</span> Restore Single Table
+                        </h5>
+                        <div style="padding: 16px; background: var(--input-bg, white); border: 1px solid var(--input-border, #ddd); border-radius: 6px;">
+                            <label style="display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.85em; color: var(--text-secondary, #666);">
+                                Select Backup:
+                            </label>
+                            <select id="table-restore-backup-select" style="width: 100%; padding: 10px; border: 1px solid var(--input-border, #ddd); border-radius: 4px; margin-bottom: 12px; background: var(--input-bg, white); color: var(--text-primary, #333);">
+                                <option value="">-- Select backup to restore --</option>
+                            </select>
+                            <button id="restore-single-table-btn" class="compact-btn" style="width: 100%; background: #ff9800; color: white; padding: 10px;" disabled>
+                                🔄 Restore Table
+                            </button>
+                        </div>
                     </div>
                 </div>
-                <div class="sub-card-body">
-                    <!-- Schedules List -->
-                    <div id="schedules-list"></div>
-
-                    <!-- Add/Edit Schedule Form (Initially Hidden) -->
-                    <form id="backup-schedule-form" class="schedule-compact-form" style="display: none;">
+                
+                <div id="table-backup-status" style="padding: 12px 16px; background: var(--status-bg, #e3f2fd); border-left: 4px solid var(--status-border, #2196f3); border-radius: 4px; display: none; color: var(--text-primary, #333);">
+                    <strong>Status:</strong> <span id="table-backup-message"></span>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Grid Layout for Cards -->
+        <div class="backup-grid" style="display: grid; grid-template-columns: 1fr 2fr; gap: 16px;">
+            
+            <!-- Create Backup Card -->
+            <div class="backup-sub-card" style="background: var(--sub-card-bg, #fafafa); border-radius: 6px; overflow: hidden; border: 1px solid var(--sub-card-border, #e0e0e0);">
+                <div class="sub-card-header" style="background: var(--sub-header-bg, #f5f5f5); padding: 10px 12px; border-bottom: 1px solid var(--sub-card-border, #e0e0e0);">
+                    <h4 style="margin: 0; font-size: 0.95em; font-weight: 600; color: var(--text-color, #333);">➕ New Schedule</h4>
+                </div>
+                <div class="sub-card-body" style="padding: 12px;">
+                    <!-- Add/Edit Schedule Form -->
+                    <form id="backup-schedule-form" class="schedule-compact-form" style="font-size: 0.9em;">
                         <input type="hidden" id="schedule-id" name="id">
                         
-                        <div class="form-row">
-                            <div class="form-group">
-                                <label for="schedule-name">Schedule Name</label>
-                                <input type="text" id="schedule-name" name="name" placeholder="e.g., Monthly Full Backup" required>
+                        <div style="margin-bottom: 10px;">
+                            <label style="display: block; margin-bottom: 4px; font-weight: 600; font-size: 0.85em;">Name</label>
+                            <input type="text" id="schedule-name" name="name" placeholder="e.g., Monthly Backup" required style="width: 100%; padding: 6px; border: 1px solid #ddd; border-radius: 4px;">
+                        </div>
+                        
+                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px;">
+                            <div>
+                                <label style="display: block; margin-bottom: 4px; font-weight: 600; font-size: 0.85em;">Time</label>
+                                <input type="time" id="schedule-time" name="time" value="02:00" required style="width: 100%; padding: 6px; border: 1px solid #ddd; border-radius: 4px;">
+                            </div>
+                            <div>
+                                <label style="display: block; margin-bottom: 4px; font-weight: 600; font-size: 0.85em;">Frequency</label>
+                                <select id="schedule-frequency" name="frequency" required style="width: 100%; padding: 6px; border: 1px solid #ddd; border-radius: 4px;">
+                                    <option value="daily">Daily</option>
+                                    <option value="weekly">Weekly</option>
+                                    <option value="monthly">Monthly</option>
+                                </select>
                             </div>
                         </div>
                         
-                        <div class="form-row">
-                            <label class="checkbox-label">
+                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px;">
+                            <div>
+                                <label style="display: block; margin-bottom: 4px; font-weight: 600; font-size: 0.85em;">Type</label>
+                                <select id="schedule-backup-type" name="backup_type" required style="width: 100%; padding: 6px; border: 1px solid #ddd; border-radius: 4px;">
+                                    <option value="full">Full</option>
+                                    <option value="data-only">Data-Only</option>
+                                </select>
+                            </div>
+                            <div>
+                                <label style="display: block; margin-bottom: 4px; font-weight: 600; font-size: 0.85em;">Keep (days)</label>
+                                <input type="number" id="retention-days" name="retention_days" value="30" min="1" max="365" required style="width: 100%; padding: 6px; border: 1px solid #ddd; border-radius: 4px;">
+                            </div>
+                        </div>
+                        
+                        <div style="margin-bottom: 10px;">
+                            <label style="display: flex; align-items: center; gap: 6px; cursor: pointer;">
                                 <input type="checkbox" id="schedule-enabled" name="enabled" checked>
-                                <span>Enable this schedule</span>
+                                <span style="font-size: 0.85em;">Enable this schedule</span>
                             </label>
                         </div>
                         
-                        <div class="form-row-split">
-                            <div class="form-group">
-                                <label for="schedule-time">Time</label>
-                                <input type="time" id="schedule-time" name="time" value="02:00" required>
-                            </div>
-                            <div class="form-group">
-                                <label for="schedule-frequency">Frequency</label>
-                                <select id="schedule-frequency" name="frequency" required>
-                                    <option value="daily">Daily</option>
-                                    <option value="weekly">Weekly (Sunday)</option>
-                                    <option value="monthly">Monthly (1st)</option>
-                                </select>
-                            </div>
-                        </div>
-                        
-                        <div class="form-row-split">
-                            <div class="form-group">
-                                <label for="schedule-backup-type">Backup Type</label>
-                                <select id="schedule-backup-type" name="backup_type" required>
-                                    <option value="full">Full (Complete)</option>
-                                    <option value="data-only">Data-Only (Fast)</option>
-                                </select>
-                            </div>
-                            <div class="form-group">
-                                <label for="retention-days">Keep (days)</label>
-                                <input type="number" id="retention-days" name="retention_days" value="30" min="1" max="365" required>
-                            </div>
-                        </div>
-                        
-                        <div class="form-actions">
-                            <button type="submit" class="btn-save">💾 Save Schedule</button>
-                            <button type="button" id="cancel-schedule-btn" class="btn-cancel">Cancel</button>
+                        <div style="display: flex; gap: 8px;">
+                            <button type="submit" style="flex: 1; padding: 6px; background: #4caf50; color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; font-size: 0.85em;">💾 Save</button>
+                            <button type="button" id="cancel-schedule-btn" style="flex: 1; padding: 6px; background: #999; color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; font-size: 0.85em;">Cancel</button>
                         </div>
                     </form>
                 </div>
             </div>
+            
+            <!-- Schedules List Card -->
+            <div class="backup-sub-card" style="background: var(--sub-card-bg, #fafafa); border-radius: 6px; overflow: hidden; border: 1px solid var(--sub-card-border, #e0e0e0);">
+                <div class="sub-card-header" style="background: var(--sub-header-bg, #f5f5f5); padding: 10px 12px; border-bottom: 1px solid var(--sub-card-border, #e0e0e0); display: flex; justify-content: space-between; align-items: center;">
+                    <h4 style="margin: 0; font-size: 0.95em; font-weight: 600; color: var(--text-color, #333);">⏰ Active Schedules</h4>
+                    <div style="display: flex; gap: 6px; align-items: center;">
+                        <span id="schedule-count-badge" style="background: #2196f3; color: white; font-size: 0.75em; padding: 3px 8px; border-radius: 10px; font-weight: 600;">0</span>
+                        <button id="add-schedule-btn" class="btn-small" style="background: #4caf50; color: white; padding: 4px 10px; border-radius: 4px; font-size: 0.8em; border: none; cursor: pointer;">
+                            ➕
+                        </button>
+                    </div>
+                </div>
+                <div class="sub-card-body" style="padding: 12px; max-height: 300px; overflow-y: auto;">
+                    <div id="schedules-list"></div>
+                </div>
+            </div>
 
         </div>
 
-        <!-- Available Backups Section -->
-        <div class="backup-sub-card" style="margin-top: 20px;">
-            <div class="sub-card-header">
-                <h4>📂 Available Backups</h4>
-                <span id="backup-count-badge" class="count-badge">0</span>
-            </div>
-            <div class="sub-card-body">
-                <div id="backup-list" class="backup-list-modern">
-                    <div class="backup-loading">
-                        <div class="loading-spinner"></div>
-                        <p>Loading backups...</p>
-                    </div>
+            <!-- Available Backups -->
+            <div class="backup-sub-card" style="background: var(--sub-card-bg, #fafafa); border-radius: 6px; overflow: hidden; border: 1px solid var(--sub-card-border, #e0e0e0);">
+                <div class="sub-card-header" style="background: var(--sub-header-bg, #f5f5f5); padding: 10px 12px; border-bottom: 1px solid var(--sub-card-border, #e0e0e0); display: flex; justify-content: space-between; align-items: center;">
+                    <h4 style="margin: 0; font-size: 0.95em; font-weight: 600; color: var(--text-color, #333);">📂 Backups</h4>
+                    <span id="backup-count-badge" style="background: #2196f3; color: white; font-size: 0.75em; padding: 3px 8px; border-radius: 10px; font-weight: 600;">0</span>
                 </div>
-            </div>
-        </div>
-
-        <!-- Restore Section (Superadmin Only) -->
-        {% if current_user.role == 'superadmin' %}
-        <div class="backup-sub-card restore-card" style="margin-top: 20px;">
-            <div class="sub-card-header" style="background: #fff3e0; color: #e65100;">
-                <h4>🔄 Restore Database</h4>
-                <span class="warning-badge">⚠️ Danger Zone</span>
-            </div>
-            <div class="sub-card-body">
-                <div class="warning-message">
-                    <strong>⚠️ Warning:</strong> Restoring will permanently replace ALL current data. This action cannot be undone!
-                </div>
-
-                <!-- Upload Section -->
-                <div class="upload-section">
-                    <label class="upload-label">📤 Upload External Backup</label>
-                    <div class="upload-row">
-                        <input type="file" id="backup-file-upload" accept=".sql" class="file-input">
-                        <button id="upload-backup-btn" class="btn-upload">⬆️ Upload</button>
-                    </div>
-                    <small>SQL files only • Max 10GB</small>
-                </div>
-
-                <!-- Restore Section -->
-                <div class="restore-section-compact">
-                    <div class="form-group">
-                        <label for="restore-backup-select">Select Backup File</label>
-                        <select id="restore-backup-select" class="restore-select">
-                            <option value="">-- Choose a backup to restore --</option>
-                        </select>
-                    </div>
-
-                    <div class="form-group">
-                        <label>Restore Type</label>
-                        <div class="restore-type-options">
-                            <label class="radio-card">
-                                <input type="radio" name="restore-type" value="full" checked>
-                                <div class="radio-content">
-                                    <strong>🔄 Full Restore</strong>
-                                    <small>Replace everything (schema + data + triggers)</small>
-                                </div>
-                            </label>
-                            <label class="radio-card">
-                                <input type="radio" name="restore-type" value="data-only">
-                                <div class="radio-content">
-                                    <strong>📦 Data-Only</strong>
-                                    <small>Keep schema, replace data only</small>
-                                </div>
-                            </label>
+                <div class="sub-card-body" style="padding: 12px; max-height: 300px; overflow-y: auto;">
+                    <div id="backup-list" class="backup-list-modern">
+                        <div style="text-align: center; padding: 20px; color: #999; font-size: 0.9em;">
+                            <div style="font-size: 2em; margin-bottom: 8px;">⏳</div>
+                            <p style="margin: 0;">Loading...</p>
                         </div>
                     </div>
-
-                    <button id="restore-btn" class="btn-restore" disabled>
-                        🔄 Restore Database
-                    </button>
                 </div>
             </div>
+
+        </div>
+
+        <!-- Full Database Restore Section (Superadmin Only) -->
+        {% if session.role == 'superadmin' %}
+        <div style="margin-top: 16px; padding: 16px; background: var(--warning-bg, rgba(255, 87, 34, 0.1)); border: 1px solid #ff5722; border-radius: 8px;">
+            <h4 style="margin: 0 0 12px 0; color: var(--text-primary, #333); display: flex; align-items: center; gap: 8px;">
+                <span>🔄 Full Database Restore</span>
+                <span style="background: #ff5722; color: white; font-size: 0.65em; padding: 3px 8px; border-radius: 4px; font-weight: 600;">SUPERADMIN</span>
+            </h4>
+            
+            <div style="padding: 10px 12px; background: var(--warning-bg, rgba(255, 87, 34, 0.15)); border-left: 4px solid #ff5722; border-radius: 4px; margin-bottom: 12px; font-size: 0.85em;">
+                <strong>⚠️ Warning:</strong> This will replace ALL current data. Cannot be undone!
+            </div>
+
+            <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-bottom: 12px;">
+                <select id="restore-backup-select" style="padding: 8px; border: 1px solid var(--input-border, #ddd); border-radius: 4px; background: var(--input-bg, white); color: var(--text-primary, #333); font-size: 0.9em;">
+                    <option value="">-- Select backup to restore --</option>
+                </select>
+                <button id="restore-btn" class="compact-btn" style="background: #ff5722; color: white; font-size: 0.9em;" disabled>
+                    🔄 Restore
+                </button>
+            </div>
+            
+            <div style="margin-bottom: 12px;">
+                <label style="display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.85em;">
+                    <input type="radio" name="restore-type" value="full" checked>
+                    <span>Full Restore (schema + data)</span>
+                </label>
+                <label style="display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.85em;">
+                    <input type="radio" name="restore-type" value="data-only">
+                    <span>Data-Only (keep schema)</span>
+                </label>
+            </div>
         </div>
         {% endif %}
 
-        <!-- Backup Path Info -->
-        <div class="backup-info-compact">
-            <strong>💾 Backup Location:</strong> <code>/srv/quality_app/backups</code>
-            <small>Configure in docker(BACKUP_PATH)</small>
+        <!-- Info -->
+        <div style="margin-top: 12px; padding: 10px; background: var(--info-bg, rgba(76, 175, 80, 0.1)); border-left: 4px solid #4caf50; border-radius: 4px; font-size: 0.85em;">
+            <strong>💾 Location:</strong> <code style="background: var(--code-bg, rgba(0,0,0,0.05)); padding: 2px 6px; border-radius: 3px;">/srv/quality_app/backups</code>
         </div>
     </div>
+    {% endif %}
 
     <style>
+        /* Compact Button Styles */
+        .compact-btn {
+            padding: 8px 16px;
+            border: none;
+            border-radius: 6px;
+            font-weight: 600;
+            font-size: 0.9em;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-family: inherit;
+        }
+        
+        .compact-btn:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+        }
+        
+        .compact-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        
         /* Modern Backup Card Styles */
         .backup-card {
             background: var(--card-bg, #fff);
-            padding: 24px;
+            padding: 20px;
             border-radius: 12px;
             box-shadow: 0 2px 8px rgba(0,0,0,0.1);
         }
 
         .backup-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 20px;
-            margin-bottom: 20px;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 16px;
+            margin-bottom: 16px;
         }
 
         .backup-sub-card {
@@ -1162,16 +1325,104 @@
             background: #555;
             --btn-icon-hover: #555;
         }
-    </style>
-    {% endif %}
-</div>
-            padding: 20px;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+
+        /* Maintenance Card - Storage Stats Hover Effect */
+        .storage-stat-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        }
+
+        /* Maintenance Card - Button Hover Effects */
+        #save-log-settings-btn:hover {
+            background-color: #45a049 !important;
+            box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
+        }
+
+        #cleanup-logs-now-btn:hover {
+            background-color: #fb8c00 !important;
+            box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
+        }
+
+        #refresh-storage-btn:hover {
+            background-color: #1976d2 !important;
+            box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
+        }
+
+        /* Dark Mode Support for Maintenance Card */
+        body.dark-mode {
+            --sub-card-bg: rgba(255,255,255,0.05);
+            --border-color: rgba(255,255,255,0.1);
+            --input-border: rgba(255,255,255,0.2);
+            --input-bg: rgba(255,255,255,0.05);
+            --text-primary: #e0e0e0;
+            --text-secondary: #b0b0b0;
+            --code-bg: rgba(255,255,255,0.1);
+            
+            /* Storage stat cards - dark mode */
+            --stat-bg-1: rgba(33, 150, 243, 0.15);
+            --stat-bg-1-end: rgba(33, 150, 243, 0.08);
+            --stat-border-1: rgba(33, 150, 243, 0.3);
+            --stat-color-1: #64b5f6;
+            
+            --stat-bg-2: rgba(156, 39, 176, 0.15);
+            --stat-bg-2-end: rgba(156, 39, 176, 0.08);
+            --stat-border-2: rgba(156, 39, 176, 0.3);
+            --stat-color-2: #ba68c8;
+            
+            --stat-bg-3: rgba(255, 152, 0, 0.15);
+            --stat-bg-3-end: rgba(255, 152, 0, 0.08);
+            --stat-border-3: rgba(255, 152, 0, 0.3);
+            --stat-color-3: #ffb74d;
+            
+            --info-bg: rgba(76, 175, 80, 0.15);
+            --info-border: #66bb6a;
+            
+            --status-bg: rgba(33, 150, 243, 0.15);
+            --status-border: #64b5f6;
+            
+            --secondary-btn: #1976d2;
+            
+            /* Table management dark mode */
+            --warning-bg: rgba(255, 87, 34, 0.15);
+            --warning-text: #ff7043;
+            --info-bg-alt: rgba(33, 150, 243, 0.15);
+            
+            --status-success-bg: rgba(76, 175, 80, 0.15);
+            --status-success-border: #66bb6a;
+            --status-error-bg: rgba(244, 67, 54, 0.15);
+            --status-error-border: #ef5350;
+        }
+
+        /* Select dropdown dark mode */
+        body.dark-mode #log-retention-days,
+        body.dark-mode #table-to-drop {
+            background: rgba(255,255,255,0.05);
+            color: #e0e0e0;
+            border-color: rgba(255,255,255,0.2);
+        }
+
+        body.dark-mode #log-retention-days option,
+        body.dark-mode #table-to-drop option {
+            background: #2a2a2a;
+            color: #e0e0e0;
+        }
+        
+        /* Button hover effects - dark mode */
+        body.dark-mode #load-tables-btn:hover {
+            background-color: #1976d2 !important;
+            box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
+        }
+        
+        body.dark-mode #drop-table-btn:hover:not(:disabled) {
+            background-color: #d32f2f !important;
+            box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4);
+        }
+        
+        body.dark-mode #drop-table-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
         }
     </style>
-    {% endif %}
-</div>
 
 <!-- Popup for creating/editing a user -->
 <div id="user-popup" class="popup" style="display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:var(--app-overlay-bg, rgba(30,41,59,0.85)); z-index:9999; align-items:center; justify-content:center;">
@@ -1447,6 +1698,485 @@ function loadBackupList() {
         });
 }
 
+// ========================================
+// Log Cleanup Management Functions
+// ========================================
+
+// Load log cleanup settings
+function loadLogCleanupSettings() {
+    fetch('/api/maintenance/log-settings')
+        .then(response => response.json())
+        .then(data => {
+            if (data.success && data.retention_days !== undefined) {
+                document.getElementById('log-retention-days').value = data.retention_days;
+            }
+        })
+        .catch(error => console.error('Error loading log settings:', error));
+}
+
+// Save log cleanup settings
+document.getElementById('save-log-settings-btn')?.addEventListener('click', function() {
+    const retentionDays = document.getElementById('log-retention-days').value;
+    const statusDiv = document.getElementById('log-cleanup-status');
+    const messageSpan = document.getElementById('log-cleanup-message');
+    
+    fetch('/api/maintenance/log-settings', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            retention_days: parseInt(retentionDays)
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        statusDiv.style.display = 'block';
+        if (data.success) {
+            statusDiv.style.background = '#e8f5e9';
+            statusDiv.style.borderLeftColor = '#4caf50';
+            messageSpan.textContent = '✅ ' + data.message;
+        } else {
+            statusDiv.style.background = '#ffebee';
+            statusDiv.style.borderLeftColor = '#f44336';
+            messageSpan.textContent = '❌ ' + data.message;
+        }
+        setTimeout(() => {
+            statusDiv.style.display = 'none';
+        }, 5000);
+    })
+    .catch(error => {
+        console.error('Error saving log settings:', error);
+        statusDiv.style.display = 'block';
+        statusDiv.style.background = '#ffebee';
+        statusDiv.style.borderLeftColor = '#f44336';
+        messageSpan.textContent = '❌ Error saving settings';
+    });
+});
+
+// Clean up logs now
+document.getElementById('cleanup-logs-now-btn')?.addEventListener('click', function() {
+    if (!confirm('Are you sure you want to clean up old log files now?\n\nThis will delete log files older than the configured retention period.')) {
+        return;
+    }
+    
+    const btn = this;
+    const originalText = btn.textContent;
+    btn.disabled = true;
+    btn.textContent = '⏳ Cleaning...';
+    
+    const statusDiv = document.getElementById('log-cleanup-status');
+    const messageSpan = document.getElementById('log-cleanup-message');
+    
+    fetch('/api/maintenance/cleanup-logs', {
+        method: 'POST'
+    })
+    .then(response => response.json())
+    .then(data => {
+        btn.disabled = false;
+        btn.textContent = originalText;
+        statusDiv.style.display = 'block';
+        
+        if (data.success) {
+            statusDiv.style.background = '#e8f5e9';
+            statusDiv.style.borderLeftColor = '#4caf50';
+            messageSpan.textContent = '✅ ' + data.message + (data.files_deleted ? ` (${data.files_deleted} files deleted)` : '');
+        } else {
+            statusDiv.style.background = '#ffebee';
+            statusDiv.style.borderLeftColor = '#f44336';
+            messageSpan.textContent = '❌ ' + data.message;
+        }
+        
+        setTimeout(() => {
+            statusDiv.style.display = 'none';
+        }, 8000);
+    })
+    .catch(error => {
+        console.error('Error cleaning logs:', error);
+        btn.disabled = false;
+        btn.textContent = originalText;
+        statusDiv.style.display = 'block';
+        statusDiv.style.background = '#ffebee';
+        statusDiv.style.borderLeftColor = '#f44336';
+        messageSpan.textContent = '❌ Error cleaning logs';
+    });
+});
+
+// Per-Table Backup & Restore
+let tablesForBackup = [];
+let tableBackupsData = [];
+
+// Toggle table backup section
+document.getElementById('toggle-table-backup-btn')?.addEventListener('click', function() {
+    const section = document.getElementById('table-backup-section');
+    const textSpan = document.getElementById('toggle-table-backup-text');
+    const arrow = this.querySelector('span:last-child');
+    
+    if (section.style.display === 'none') {
+        section.style.display = 'block';
+        textSpan.textContent = 'Hide Per-Table Backup & Restore';
+        arrow.textContent = '▲';
+        loadTablesForBackup();
+        loadTableBackups();
+    } else {
+        section.style.display = 'none';
+        textSpan.textContent = 'Show Per-Table Backup & Restore';
+        arrow.textContent = '▼';
+    }
+});
+
+// Load tables for backup dropdown
+function loadTablesForBackup() {
+    fetch('/api/maintenance/database-tables')
+        .then(response => response.json())
+        .then(data => {
+            if (data.success && data.tables.length > 0) {
+                tablesForBackup = data.tables;
+                const select = document.getElementById('table-backup-select');
+                select.innerHTML = '<option value="">-- Select table --</option>';
+                
+                data.tables.forEach(table => {
+                    select.innerHTML += `<option value="${table.name}">${table.name} (${table.rows} rows)</option>`;
+                });
+            }
+        })
+        .catch(error => console.error('Error loading tables:', error));
+}
+
+// Load available table backups
+function loadTableBackups() {
+    fetch('/api/backup/table-backups')
+        .then(response => response.json())
+        .then(data => {
+            if (data.success && data.backups.length > 0) {
+                tableBackupsData = data.backups;
+                const select = document.getElementById('table-restore-backup-select');
+                select.innerHTML = '<option value="">-- Select backup --</option>';
+                
+                data.backups.forEach(backup => {
+                    select.innerHTML += `<option value="${backup.filename}">${backup.table_name} - ${backup.created} (${backup.size})</option>`;
+                });
+            }
+        })
+        .catch(error => console.error('Error loading table backups:', error));
+}
+
+// Enable/disable backup button based on selection
+document.getElementById('table-backup-select')?.addEventListener('change', function() {
+    document.getElementById('backup-single-table-btn').disabled = !this.value;
+});
+
+// Enable/disable restore button based on selection
+document.getElementById('table-restore-backup-select')?.addEventListener('change', function() {
+    document.getElementById('restore-single-table-btn').disabled = !this.value;
+});
+
+// Backup single table
+document.getElementById('backup-single-table-btn')?.addEventListener('click', function() {
+    const tableName = document.getElementById('table-backup-select').value;
+    
+    if (!tableName) {
+        showTableBackupStatus('❌ Please select a table', 'error');
+        return;
+    }
+    
+    const btn = this;
+    const originalText = btn.textContent;
+    btn.disabled = true;
+    btn.textContent = '⏳ Backing up...';
+    
+    fetch('/api/backup/table', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            table_name: tableName
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        btn.disabled = false;
+        btn.textContent = originalText;
+        
+        if (data.success) {
+            showTableBackupStatus('✅ ' + data.message, 'success');
+            loadTableBackups(); // Refresh backup list
+            document.getElementById('table-backup-select').value = '';
+            btn.disabled = true;
+        } else {
+            showTableBackupStatus('❌ ' + data.message, 'error');
+        }
+    })
+    .catch(error => {
+        console.error('Error backing up table:', error);
+        btn.disabled = false;
+        btn.textContent = originalText;
+        showTableBackupStatus('❌ Error backing up table', 'error');
+    });
+});
+
+// Restore single table
+document.getElementById('restore-single-table-btn')?.addEventListener('click', function() {
+    const backupFile = document.getElementById('table-restore-backup-select').value;
+    
+    if (!backupFile) {
+        showTableBackupStatus('❌ Please select a backup', 'error');
+        return;
+    }
+    
+    const backup = tableBackupsData.find(b => b.filename === backupFile);
+    const tableName = backup ? backup.table_name : 'unknown';
+    
+    if (!confirm(`⚠️ WARNING: This will replace all data in the "${tableName}" table!\n\nThis action CANNOT be undone!\n\nAre you sure you want to continue?`)) {
+        return;
+    }
+    
+    const btn = this;
+    const originalText = btn.textContent;
+    btn.disabled = true;
+    btn.textContent = '⏳ Restoring...';
+    
+    fetch('/api/restore/table', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            backup_file: backupFile
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        btn.disabled = false;
+        btn.textContent = originalText;
+        
+        if (data.success) {
+            showTableBackupStatus('✅ ' + data.message, 'success');
+            document.getElementById('table-restore-backup-select').value = '';
+            btn.disabled = true;
+        } else {
+            showTableBackupStatus('❌ ' + data.message, 'error');
+        }
+    })
+    .catch(error => {
+        console.error('Error restoring table:', error);
+        btn.disabled = false;
+        btn.textContent = originalText;
+        showTableBackupStatus('❌ Error restoring table', 'error');
+    });
+});
+
+function showTableBackupStatus(message, type) {
+    const statusDiv = document.getElementById('table-backup-status');
+    const messageSpan = document.getElementById('table-backup-message');
+    
+    statusDiv.style.display = 'block';
+    messageSpan.textContent = message;
+    
+    if (type === 'success') {
+        statusDiv.style.background = 'var(--status-success-bg, #e8f5e9)';
+        statusDiv.style.borderLeftColor = 'var(--status-success-border, #4caf50)';
+    } else {
+        statusDiv.style.background = 'var(--status-error-bg, #ffebee)';
+        statusDiv.style.borderLeftColor = 'var(--status-error-border, #f44336)';
+    }
+    
+    setTimeout(() => {
+        statusDiv.style.display = 'none';
+    }, 8000);
+}
+
+// Database Table Management
+let tablesData = [];
+
+// Load database tables
+document.getElementById('load-tables-btn')?.addEventListener('click', function() {
+    const btn = this;
+    const originalText = btn.textContent;
+    btn.disabled = true;
+    btn.textContent = '⏳ Loading...';
+    
+    fetch('/api/maintenance/database-tables')
+        .then(response => response.json())
+        .then(data => {
+            btn.disabled = false;
+            btn.textContent = originalText;
+            
+            if (data.success && data.tables.length > 0) {
+                tablesData = data.tables;
+                const select = document.getElementById('table-to-drop');
+                select.innerHTML = '<option value="">-- Select a table --</option>';
+                
+                data.tables.forEach(table => {
+                    select.innerHTML += `<option value="${table.name}">${table.name} (${table.rows} rows, ${table.size})</option>`;
+                });
+                
+                document.getElementById('tables-list-container').style.display = 'block';
+                showTableStatus('✅ Loaded ' + data.tables.length + ' tables', 'success');
+            } else {
+                showTableStatus('❌ No tables found or error loading tables', 'error');
+            }
+        })
+        .catch(error => {
+            console.error('Error loading tables:', error);
+            btn.disabled = false;
+            btn.textContent = originalText;
+            showTableStatus('❌ Error loading tables', 'error');
+        });
+});
+
+// Table selection change
+document.getElementById('table-to-drop')?.addEventListener('change', function() {
+    const tableName = this.value;
+    const dropBtn = document.getElementById('drop-table-btn');
+    const infoDiv = document.getElementById('table-info');
+    
+    if (tableName) {
+        const tableData = tablesData.find(t => t.name === tableName);
+        if (tableData) {
+            document.getElementById('info-table-name').textContent = tableData.name;
+            document.getElementById('info-row-count').textContent = tableData.rows;
+            document.getElementById('info-table-size').textContent = tableData.size;
+            infoDiv.style.display = 'block';
+            dropBtn.disabled = false;
+        }
+    } else {
+        infoDiv.style.display = 'none';
+        dropBtn.disabled = true;
+    }
+});
+
+// Drop table
+document.getElementById('drop-table-btn')?.addEventListener('click', function() {
+    const tableName = document.getElementById('table-to-drop').value;
+    
+    if (!tableName) {
+        showTableStatus('❌ Please select a table', 'error');
+        return;
+    }
+    
+    const tableData = tablesData.find(t => t.name === tableName);
+    const confirmMessage = `⚠️ DANGER: Are you absolutely sure you want to DROP the table "${tableName}"?\n\n` +
+        `This will permanently delete:\n` +
+        `- ${tableData.rows} rows of data\n` +
+        `- ${tableData.size} of storage\n\n` +
+        `This action CANNOT be undone!\n\n` +
+        `Type the table name to confirm: "${tableName}"`;
+    
+    const userInput = prompt(confirmMessage);
+    
+    if (userInput !== tableName) {
+        showTableStatus('❌ Table name did not match. Operation cancelled.', 'error');
+        return;
+    }
+    
+    const btn = this;
+    const originalText = btn.textContent;
+    btn.disabled = true;
+    btn.textContent = '⏳ Dropping...';
+    
+    fetch('/api/maintenance/drop-table', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+            table_name: tableName
+        })
+    })
+    .then(response => response.json())
+    .then(data => {
+        btn.disabled = false;
+        btn.textContent = originalText;
+        
+        if (data.success) {
+            showTableStatus('✅ ' + data.message, 'success');
+            // Reset and reload
+            document.getElementById('table-to-drop').value = '';
+            document.getElementById('table-info').style.display = 'none';
+            btn.disabled = true;
+            // Reload tables list
+            setTimeout(() => {
+                document.getElementById('load-tables-btn').click();
+            }, 2000);
+        } else {
+            showTableStatus('❌ ' + data.message, 'error');
+            btn.disabled = false;
+        }
+    })
+    .catch(error => {
+        console.error('Error dropping table:', error);
+        btn.disabled = false;
+        btn.textContent = originalText;
+        showTableStatus('❌ Error dropping table', 'error');
+    });
+});
+
+function showTableStatus(message, type) {
+    const statusDiv = document.getElementById('table-operation-status');
+    const messageSpan = document.getElementById('table-operation-message');
+    
+    statusDiv.style.display = 'block';
+    messageSpan.textContent = message;
+    
+    if (type === 'success') {
+        statusDiv.style.background = 'var(--status-success-bg, #e8f5e9)';
+        statusDiv.style.borderLeftColor = 'var(--status-success-border, #4caf50)';
+    } else {
+        statusDiv.style.background = 'var(--status-error-bg, #ffebee)';
+        statusDiv.style.borderLeftColor = 'var(--status-error-border, #f44336)';
+    }
+    
+    setTimeout(() => {
+        statusDiv.style.display = 'none';
+    }, 8000);
+}
+
+// Load storage information
+function loadStorageInfo() {
+    fetch('/api/maintenance/storage-info')
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                document.getElementById('logs-size').textContent = data.logs_size;
+                document.getElementById('database-size').textContent = data.database_size;
+                document.getElementById('backups-size').textContent = data.backups_size;
+            } else {
+                document.getElementById('logs-size').textContent = 'Error';
+                document.getElementById('database-size').textContent = 'Error';
+                document.getElementById('backups-size').textContent = 'Error';
+            }
+        })
+        .catch(error => {
+            console.error('Error loading storage info:', error);
+            document.getElementById('logs-size').textContent = 'Error';
+            document.getElementById('database-size').textContent = 'Error';
+            document.getElementById('backups-size').textContent = 'Error';
+        });
+}
+
+// Refresh storage information
+document.getElementById('refresh-storage-btn')?.addEventListener('click', function() {
+    const btn = this;
+    const originalText = btn.textContent;
+    btn.disabled = true;
+    btn.textContent = '⏳ Loading...';
+    
+    loadStorageInfo();
+    
+    setTimeout(() => {
+        btn.disabled = false;
+        btn.textContent = originalText;
+    }, 1000);
+});
+
+// Load settings on page load
+if (document.getElementById('log-retention-days')) {
+    loadLogCleanupSettings();
+    loadStorageInfo();
+}
+
 // Backup now button
 document.getElementById('backup-now-btn')?.addEventListener('click', function() {
     const btn = this;