diff --git a/Backend/src/content/routes/__pycache__/blog_routes.cpython-312.pyc b/Backend/src/content/routes/__pycache__/blog_routes.cpython-312.pyc
index d936e0c4..fa65499d 100644
Binary files a/Backend/src/content/routes/__pycache__/blog_routes.cpython-312.pyc and b/Backend/src/content/routes/__pycache__/blog_routes.cpython-312.pyc differ
diff --git a/Backend/src/content/routes/blog_routes.py b/Backend/src/content/routes/blog_routes.py
index c61fdfcf..e65f5786 100644
--- a/Backend/src/content/routes/blog_routes.py
+++ b/Backend/src/content/routes/blog_routes.py
@@ -562,3 +562,122 @@ async def upload_blog_image(
     except Exception as e:
         raise HTTPException(status_code=status.HTTP_500_INTERNAL_SERVER_ERROR, detail=f'Error uploading image: {str(e)}')
 
+@router.get('/admin/tags', response_model=dict)
+async def get_all_tags(
+    current_user: User = Depends(authorize_roles('admin')),
+    db: Session = Depends(get_db)
+):
+    """Get all unique tags from all blog posts (admin only)"""
+    try:
+        all_posts = db.query(BlogPost).all()
+        all_unique_tags = set()
+        tag_usage = {}  # Track how many posts use each tag
+        
+        for post in all_posts:
+            if post.tags:
+                try:
+                    tags_list = json.loads(post.tags)
+                    for tag in tags_list:
+                        all_unique_tags.add(tag)
+                        tag_usage[tag] = tag_usage.get(tag, 0) + 1
+                except:
+                    pass
+        
+        tags_with_usage = [
+            {'name': tag, 'usage_count': tag_usage.get(tag, 0)}
+            for tag in sorted(all_unique_tags)
+        ]
+        
+        return success_response({
+            'tags': tags_with_usage,
+            'total': len(tags_with_usage)
+        })
+    except Exception as e:
+        logger.error(f"Error in get_all_tags: {str(e)}", exc_info=True)
+        raise HTTPException(status_code=500, detail=str(e))
+
+@router.put('/admin/tags/rename', response_model=dict)
+async def rename_tag(
+    old_tag: str = Query(..., description='Old tag name'),
+    new_tag: str = Query(..., description='New tag name'),
+    current_user: User = Depends(authorize_roles('admin')),
+    db: Session = Depends(get_db)
+):
+    """Rename a tag across all blog posts (admin only)"""
+    try:
+        if not old_tag or not new_tag:
+            raise HTTPException(status_code=400, detail='Both old_tag and new_tag are required')
+        
+        if old_tag == new_tag:
+            raise HTTPException(status_code=400, detail='Old and new tag names must be different')
+        
+        # Get all posts that contain the old tag
+        all_posts = db.query(BlogPost).all()
+        updated_count = 0
+        
+        for post in all_posts:
+            if post.tags:
+                try:
+                    tags_list = json.loads(post.tags)
+                    if old_tag in tags_list:
+                        # Replace old tag with new tag
+                        tags_list = [new_tag if tag == old_tag else tag for tag in tags_list]
+                        post.tags = json.dumps(tags_list)
+                        updated_count += 1
+                except:
+                    pass
+        
+        db.commit()
+        
+        return success_response({
+            'old_tag': old_tag,
+            'new_tag': new_tag,
+            'updated_posts': updated_count
+        }, message=f'Tag renamed successfully. Updated {updated_count} post(s).')
+    except HTTPException:
+        raise
+    except Exception as e:
+        db.rollback()
+        logger.error(f"Error in rename_tag: {str(e)}", exc_info=True)
+        raise HTTPException(status_code=500, detail=str(e))
+
+@router.delete('/admin/tags', response_model=dict)
+async def delete_tag(
+    tag: str = Query(..., description='Tag name to delete'),
+    current_user: User = Depends(authorize_roles('admin')),
+    db: Session = Depends(get_db)
+):
+    """Delete a tag from all blog posts (admin only)"""
+    try:
+        if not tag:
+            raise HTTPException(status_code=400, detail='Tag name is required')
+        
+        # Get all posts that contain the tag
+        all_posts = db.query(BlogPost).all()
+        updated_count = 0
+        
+        for post in all_posts:
+            if post.tags:
+                try:
+                    tags_list = json.loads(post.tags)
+                    if tag in tags_list:
+                        # Remove the tag
+                        tags_list = [t for t in tags_list if t != tag]
+                        post.tags = json.dumps(tags_list) if tags_list else None
+                        updated_count += 1
+                except:
+                    pass
+        
+        db.commit()
+        
+        return success_response({
+            'deleted_tag': tag,
+            'updated_posts': updated_count
+        }, message=f'Tag deleted successfully. Updated {updated_count} post(s).')
+    except HTTPException:
+        raise
+    except Exception as e:
+        db.rollback()
+        logger.error(f"Error in delete_tag: {str(e)}", exc_info=True)
+        raise HTTPException(status_code=500, detail=str(e))
+
diff --git a/Backend/src/rooms/routes/__pycache__/room_routes.cpython-312.pyc b/Backend/src/rooms/routes/__pycache__/room_routes.cpython-312.pyc
index 3ae29ecf..9d26b61e 100644
Binary files a/Backend/src/rooms/routes/__pycache__/room_routes.cpython-312.pyc and b/Backend/src/rooms/routes/__pycache__/room_routes.cpython-312.pyc differ
diff --git a/Backend/src/rooms/routes/room_routes.py b/Backend/src/rooms/routes/room_routes.py
index 0eae485f..4aa90463 100644
--- a/Backend/src/rooms/routes/room_routes.py
+++ b/Backend/src/rooms/routes/room_routes.py
@@ -10,7 +10,7 @@ from ...security.middleware.auth import get_current_user, authorize_roles
 from ...auth.models.user import User
 from ..models.room import Room, RoomStatus
 from ..models.room_type import RoomType
-from ..schemas.room import CreateRoomRequest, UpdateRoomRequest, BulkDeleteRoomsRequest
+from ..schemas.room import CreateRoomRequest, UpdateRoomRequest, BulkDeleteRoomsRequest, UpdateAmenityRequest
 from ...shared.utils.response_helpers import success_response
 from ...reviews.models.review import Review, ReviewStatus
 from ...bookings.models.booking import Booking, BookingStatus
@@ -72,6 +72,112 @@ async def get_amenities(db: Session=Depends(get_db)):
         logger.error(f'Error fetching amenities: {str(e)}', exc_info=True)
         raise HTTPException(status_code=500, detail=str(e))
 
+@router.put('/amenities/{old_name}', dependencies=[Depends(authorize_roles('admin'))])
+async def update_amenity(old_name: str, request: UpdateAmenityRequest, current_user: User=Depends(authorize_roles('admin')), db: Session=Depends(get_db)):
+    """Update/rename an amenity across all rooms and room types."""
+    try:
+        import json
+        updated_count = 0
+        
+        # Update in room types
+        room_types = db.query(RoomType).all()
+        for rt in room_types:
+            if rt.amenities:
+                amenities_list = []
+                if isinstance(rt.amenities, list):
+                    amenities_list = rt.amenities
+                elif isinstance(rt.amenities, str):
+                    try:
+                        amenities_list = json.loads(rt.amenities)
+                    except:
+                        amenities_list = [s.strip() for s in rt.amenities.split(',') if s.strip()]
+                
+                if old_name in amenities_list:
+                    amenities_list = [request.new_name if a == old_name else a for a in amenities_list]
+                    rt.amenities = amenities_list
+                    updated_count += 1
+        
+        # Update in rooms
+        rooms = db.query(Room).all()
+        for room in rooms:
+            if room.amenities:
+                amenities_list = []
+                if isinstance(room.amenities, list):
+                    amenities_list = room.amenities
+                elif isinstance(room.amenities, str):
+                    try:
+                        amenities_list = json.loads(room.amenities)
+                    except:
+                        amenities_list = [s.strip() for s in room.amenities.split(',') if s.strip()]
+                
+                if old_name in amenities_list:
+                    amenities_list = [request.new_name if a == old_name else a for a in amenities_list]
+                    room.amenities = amenities_list
+                    updated_count += 1
+        
+        db.commit()
+        return success_response(
+            data={'updated_count': updated_count, 'old_name': old_name, 'new_name': request.new_name},
+            message=f'Amenity "{old_name}" updated to "{request.new_name}" in {updated_count} location(s)'
+        )
+    except Exception as e:
+        db.rollback()
+        logger.error(f'Error updating amenity: {str(e)}', exc_info=True)
+        raise HTTPException(status_code=500, detail=str(e))
+
+@router.delete('/amenities/{amenity_name}', dependencies=[Depends(authorize_roles('admin'))])
+async def delete_amenity(amenity_name: str, current_user: User=Depends(authorize_roles('admin')), db: Session=Depends(get_db)):
+    """Remove an amenity from all rooms and room types."""
+    try:
+        import json
+        updated_count = 0
+        
+        # Remove from room types
+        room_types = db.query(RoomType).all()
+        for rt in room_types:
+            if rt.amenities:
+                amenities_list = []
+                if isinstance(rt.amenities, list):
+                    amenities_list = rt.amenities
+                elif isinstance(rt.amenities, str):
+                    try:
+                        amenities_list = json.loads(rt.amenities)
+                    except:
+                        amenities_list = [s.strip() for s in rt.amenities.split(',') if s.strip()]
+                
+                if amenity_name in amenities_list:
+                    amenities_list = [a for a in amenities_list if a != amenity_name]
+                    rt.amenities = amenities_list if amenities_list else []
+                    updated_count += 1
+        
+        # Remove from rooms
+        rooms = db.query(Room).all()
+        for room in rooms:
+            if room.amenities:
+                amenities_list = []
+                if isinstance(room.amenities, list):
+                    amenities_list = room.amenities
+                elif isinstance(room.amenities, str):
+                    try:
+                        amenities_list = json.loads(room.amenities)
+                    except:
+                        amenities_list = [s.strip() for s in room.amenities.split(',') if s.strip()]
+                
+                if amenity_name in amenities_list:
+                    amenities_list = [a for a in amenities_list if a != amenity_name]
+                    room.amenities = amenities_list if amenities_list else []
+                    updated_count += 1
+        
+        db.commit()
+        return success_response(
+            data={'updated_count': updated_count, 'amenity_name': amenity_name},
+            message=f'Amenity "{amenity_name}" removed from {updated_count} location(s)'
+        )
+    except Exception as e:
+        db.rollback()
+        logger.error(f'Error deleting amenity: {str(e)}', exc_info=True)
+        raise HTTPException(status_code=500, detail=str(e))
+
 @router.get('/room-types')
 async def get_room_types(db: Session=Depends(get_db)):
     """Get all room types for dropdowns and forms."""
@@ -457,7 +563,21 @@ async def upload_room_images(id: int, images: List[UploadFile]=File(...), curren
                     continue
                 await f.write(content)
             image_urls.append(f'/uploads/rooms/{filename}')
+        
+        # Handle existing_images - it might be a list, a JSON string, or None
         existing_images = room.images or []
+        if isinstance(existing_images, str):
+            # If it's a string, try to parse it as JSON
+            import json
+            try:
+                existing_images = json.loads(existing_images)
+            except (json.JSONDecodeError, TypeError):
+                # If parsing fails, treat as empty list
+                existing_images = []
+        # Ensure it's a list
+        if not isinstance(existing_images, list):
+            existing_images = []
+        
         updated_images = existing_images + image_urls
         room.images = updated_images
         db.commit()
@@ -483,7 +603,21 @@ async def delete_room_images(id: int, image_url: str=Query(..., description='Ima
         if not normalized_url.startswith('/'):
             normalized_url = f'/{normalized_url}'
         filename = Path(normalized_url).name
+        
+        # Handle existing_images - it might be a list, a JSON string, or None
         existing_images = room.images or []
+        if isinstance(existing_images, str):
+            # If it's a string, try to parse it as JSON
+            import json
+            try:
+                existing_images = json.loads(existing_images)
+            except (json.JSONDecodeError, TypeError):
+                # If parsing fails, treat as empty list
+                existing_images = []
+        # Ensure it's a list
+        if not isinstance(existing_images, list):
+            existing_images = []
+        
         updated_images = []
         for img in existing_images:
             stored_path = img if img.startswith('/') else f'/{img}'
diff --git a/Backend/src/rooms/schemas/__pycache__/room.cpython-312.pyc b/Backend/src/rooms/schemas/__pycache__/room.cpython-312.pyc
index b11e373f..c1e78f7c 100644
Binary files a/Backend/src/rooms/schemas/__pycache__/room.cpython-312.pyc and b/Backend/src/rooms/schemas/__pycache__/room.cpython-312.pyc differ
diff --git a/Backend/src/rooms/schemas/room.py b/Backend/src/rooms/schemas/room.py
index 90990c70..de0c54d1 100644
--- a/Backend/src/rooms/schemas/room.py
+++ b/Backend/src/rooms/schemas/room.py
@@ -105,3 +105,8 @@ class BulkDeleteRoomsRequest(BaseModel):
                 raise ValueError('All room IDs must be positive integers')
         return v
 
+
+class UpdateAmenityRequest(BaseModel):
+    """Schema for updating/renaming an amenity."""
+    new_name: str = Field(..., min_length=1, max_length=100, description="New name for the amenity")
+
diff --git a/Backend/src/rooms/services/__pycache__/room_service.cpython-312.pyc b/Backend/src/rooms/services/__pycache__/room_service.cpython-312.pyc
index 394229da..325aba5f 100644
Binary files a/Backend/src/rooms/services/__pycache__/room_service.cpython-312.pyc and b/Backend/src/rooms/services/__pycache__/room_service.cpython-312.pyc differ
diff --git a/Backend/src/rooms/services/room_service.py b/Backend/src/rooms/services/room_service.py
index 640ae016..0d9dd0f8 100644
--- a/Backend/src/rooms/services/room_service.py
+++ b/Backend/src/rooms/services/room_service.py
@@ -54,11 +54,14 @@ async def get_rooms_with_ratings(db: Session, rooms: List[Room], base_url: str)
         result.append(room_dict)
     return result
 
-def get_predefined_amenities() -> List[str]:
-    return ['Free WiFi', 'WiFi', 'High-Speed Internet', 'WiFi in Room', 'Flat-Screen TV', 'TV', 'Cable TV', 'Satellite TV', 'Smart TV', 'Netflix', 'Streaming Services', 'DVD Player', 'Stereo System', 'Radio', 'iPod Dock', 'Air Conditioning', 'AC', 'Heating', 'Climate Control', 'Ceiling Fan', 'Air Purifier', 'Private Bathroom', 'Ensuite Bathroom', 'Bathtub', 'Jacuzzi Bathtub', 'Hot Tub', 'Shower', 'Rain Shower', 'Walk-in Shower', 'Bidet', 'Hair Dryer', 'Hairdryer', 'Bathrobes', 'Slippers', 'Toiletries', 'Premium Toiletries', 'Towels', 'Mini Bar', 'Minibar', 'Refrigerator', 'Fridge', 'Microwave', 'Coffee Maker', 'Electric Kettle', 'Tea Making Facilities', 'Coffee Machine', 'Nespresso Machine', 'Kitchenette', 'Dining Table', 'Room Service', 'Breakfast Included', 'Breakfast', 'Complimentary Water', 'Bottled Water', 'Desk', 'Writing Desk', 'Office Desk', 'Work Desk', 'Sofa', 'Sitting Area', 'Lounge Area', 'Dining Area', 'Separate Living Area', 'Wardrobe', 'Closet', 'Dresser', 'Mirror', 'Full-Length Mirror', 'Seating Area', 'King Size Bed', 'Queen Size Bed', 'Double Bed', 'Twin Beds', 'Single Bed', 'Extra Bedding', 'Pillow Menu', 'Premium Bedding', 'Blackout Curtains', 'Soundproofing', 'Safe', 'In-Room Safe', 'Safety Deposit Box', 'Smoke Detector', 'Fire Extinguisher', 'Security System', 'Key Card Access', 'Door Lock', 'Pepper Spray', 'USB Charging Ports', 'USB Ports', 'USB Outlets', 'Power Outlets', 'Charging Station', 'Laptop Safe', 'HDMI Port', 'Phone', 'Desk Phone', 'Wake-Up Service', 'Alarm Clock', 'Digital Clock', 'Balcony', 'Private Balcony', 'Terrace', 'Patio', 'City View', 'Ocean View', 'Sea View', 'Mountain View', 'Garden View', 'Pool View', 'Park View', 'Window', 'Large Windows', 'Floor-to-Ceiling Windows', '24-Hour Front Desk', '24 Hour Front Desk', '24/7 Front Desk', 'Concierge Service', 'Butler Service', 'Housekeeping', 'Daily Housekeeping', 'Turndown Service', 'Laundry Service', 'Dry Cleaning', 'Ironing Service', 'Luggage Storage', 'Bell Service', 'Valet Parking', 'Parking', 'Free Parking', 'Airport Shuttle', 'Shuttle Service', 'Car Rental', 'Taxi Service', 'Gym Access', 'Fitness Center', 'Fitness Room', 'Spa Access', 'Spa', 'Sauna', 'Steam Room', 'Hot Tub', 'Massage Service', 'Beauty Services', 'Swimming Pool', 'Pool', 'Indoor Pool', 'Outdoor Pool', 'Infinity Pool', 'Pool Access', 'Golf Course', 'Tennis Court', 'Beach Access', 'Water Sports', 'Business Center', 'Meeting Room', 'Conference Room', 'Fax Service', 'Photocopying', 'Printing Service', 'Secretarial Services', 'Wheelchair Accessible', 'Accessible Room', 'Elevator Access', 'Ramp Access', 'Accessible Bathroom', 'Lowered Sink', 'Grab Bars', 'Hearing Accessible', 'Visual Alarm', 'Family Room', 'Kids Welcome', 'Baby Crib', 'Extra Bed', 'Crib', 'Childcare Services', 'Pets Allowed', 'Pet Friendly', 'Smoking Room', 'Non-Smoking Room', 'No Smoking', 'Interconnecting Rooms', 'Adjoining Rooms', 'Suite', 'Separate Bedroom', 'Kitchen', 'Full Kitchen', 'Dishwasher', 'Oven', 'Stove', 'Washing Machine', 'Dryer', 'Iron', 'Ironing Board', 'Clothes Rack', 'Umbrella', 'Shoe Shine Service', 'Fireplace', 'Jacuzzi', 'Steam Shower', 'Spa Bath', 'Bidet Toilet', 'Smart Home System', 'Lighting Control', 'Curtain Control', 'Automated Systems', 'Personalized Service', 'VIP Treatment', 'Butler', 'Private Entrance', 'Private Elevator', 'Panic Button', 'Blu-ray Player', 'Gaming Console', 'PlayStation', 'Xbox', 'Sound System', 'Surround Sound', 'Music System', 'Library', 'Reading Room', 'Study Room', 'Private Pool', 'Private Garden', 'Yard', 'Courtyard', 'Outdoor Furniture', 'BBQ Facilities', 'Picnic Area']
-
 async def get_amenities_list(db: Session) -> List[str]:
-    all_amenities = set(get_predefined_amenities())
+    """
+    Get all unique amenities from the database only.
+    Aggregates amenities from room_types and rooms tables.
+    """
+    all_amenities = set()
+    
+    # Get amenities from room types
     room_types = db.query(RoomType.amenities).all()
     for rt in room_types:
         if rt.amenities:
@@ -74,6 +77,8 @@ async def get_amenities_list(db: Session) -> List[str]:
                         all_amenities.update([s.strip() for s in rt.amenities.split(',') if s.strip()])
                 except:
                     all_amenities.update([s.strip() for s in rt.amenities.split(',') if s.strip()])
+    
+    # Get amenities from rooms
     rooms = db.query(Room.amenities).all()
     for r in rooms:
         if r.amenities:
@@ -89,4 +94,5 @@ async def get_amenities_list(db: Session) -> List[str]:
                         all_amenities.update([s.strip() for s in r.amenities.split(',') if s.strip()])
                 except:
                     all_amenities.update([s.strip() for s in r.amenities.split(',') if s.strip()])
+    
     return sorted(list(all_amenities))
\ No newline at end of file
diff --git a/Frontend/src/App.tsx b/Frontend/src/App.tsx
index b2759a29..251e9381 100644
--- a/Frontend/src/App.tsx
+++ b/Frontend/src/App.tsx
@@ -93,6 +93,7 @@ const NotificationManagementPage = lazy(() => import('./pages/admin/Notification
 const ReceptionDashboardPage = lazy(() => import('./pages/admin/ReceptionDashboardPage'));
 const LoyaltyManagementPage = lazy(() => import('./pages/admin/LoyaltyManagementPage'));
 const AdvancedRoomManagementPage = lazy(() => import('./pages/admin/AdvancedRoomManagementPage'));
+const EditRoomPage = lazy(() => import('./pages/admin/EditRoomPage'));
 const RatePlanManagementPage = lazy(() => import('./pages/admin/RatePlanManagementPage'));
 const PackageManagementPage = lazy(() => import('./pages/admin/PackageManagementPage'));
 const SecurityManagementPage = lazy(() => import('./pages/admin/SecurityManagementPage'));
@@ -543,6 +544,10 @@ function App() {
             path="advanced-rooms" 
             element={<AdvancedRoomManagementPage />} 
           />
+          <Route 
+            path="rooms/:id/edit" 
+            element={<EditRoomPage />} 
+          />
           <Route 
             path="page-content" 
             element={<PageContentDashboardPage />} 
diff --git a/Frontend/src/features/content/services/blogService.ts b/Frontend/src/features/content/services/blogService.ts
index d6d7df85..5ee8c469 100644
--- a/Frontend/src/features/content/services/blogService.ts
+++ b/Frontend/src/features/content/services/blogService.ts
@@ -143,6 +143,26 @@ class BlogService {
     });
     return response.data;
   }
+
+  // Tag management endpoints
+  async getAllTags(): Promise<{ status: string; data: { tags: Array<{ name: string; usage_count: number }>; total: number } }> {
+    const response = await apiClient.get('/blog/admin/tags');
+    return response.data;
+  }
+
+  async renameTag(oldTag: string, newTag: string): Promise<{ status: string; data: { old_tag: string; new_tag: string; updated_posts: number }; message?: string }> {
+    const response = await apiClient.put('/blog/admin/tags/rename', null, {
+      params: { old_tag: oldTag, new_tag: newTag },
+    });
+    return response.data;
+  }
+
+  async deleteTag(tag: string): Promise<{ status: string; data: { deleted_tag: string; updated_posts: number }; message?: string }> {
+    const response = await apiClient.delete('/blog/admin/tags', {
+      params: { tag },
+    });
+    return response.data;
+  }
 }
 
 export const blogService = new BlogService();
diff --git a/Frontend/src/features/rooms/services/roomService.ts b/Frontend/src/features/rooms/services/roomService.ts
index ded95049..7efae9a9 100644
--- a/Frontend/src/features/rooms/services/roomService.ts
+++ b/Frontend/src/features/rooms/services/roomService.ts
@@ -169,6 +169,33 @@ export const getAmenities = async (): Promise<{
   };
 };
 
+export const updateAmenity = async (
+  oldName: string,
+  newName: string
+): Promise<{ success: boolean; message: string; data: { updated_count: number; old_name: string; new_name: string } }> => {
+  const response = await apiClient.put(`/rooms/amenities/${encodeURIComponent(oldName)}`, {
+    new_name: newName,
+  });
+  const responseData = response.data;
+  return {
+    success: responseData.status === 'success' || responseData.success === true,
+    message: responseData.message || '',
+    data: responseData.data || { updated_count: 0, old_name: oldName, new_name: newName },
+  };
+};
+
+export const deleteAmenity = async (
+  amenityName: string
+): Promise<{ success: boolean; message: string; data: { updated_count: number; amenity_name: string } }> => {
+  const response = await apiClient.delete(`/rooms/amenities/${encodeURIComponent(amenityName)}`);
+  const data = response.data;
+  return {
+    success: data.status === 'success' || data.success === true,
+    message: data.message || '',
+    data: data.data || { updated_count: 0, amenity_name: amenityName },
+  };
+};
+
 export interface RoomType {
   id: number;
   name: string;
@@ -264,6 +291,8 @@ export default {
   getRoomByNumber,
   searchAvailableRooms,
   getAmenities,
+  updateAmenity,
+  deleteAmenity,
   getRoomTypes,
   createRoom,
   updateRoom,
diff --git a/Frontend/src/pages/admin/AdvancedRoomManagementPage.tsx b/Frontend/src/pages/admin/AdvancedRoomManagementPage.tsx
index ce6d4a2c..128ffc6f 100644
--- a/Frontend/src/pages/admin/AdvancedRoomManagementPage.tsx
+++ b/Frontend/src/pages/admin/AdvancedRoomManagementPage.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
 import {
   Hotel,
   Wrench,
@@ -15,6 +16,7 @@ import {
   MapPin,
   Plus,
   Edit,
+  Trash2,
   X,
   Image as ImageIcon,
   Check,
@@ -35,6 +37,7 @@ import { useRoomContext } from '../../features/rooms/contexts/RoomContext';
 type Tab = 'status-board' | 'maintenance' | 'housekeeping' | 'inspections';
 
 const AdvancedRoomManagementPage: React.FC = () => {
+  const navigate = useNavigate();
   const {
     statusBoardRooms,
     statusBoardLoading,
@@ -73,6 +76,8 @@ const AdvancedRoomManagementPage: React.FC = () => {
   const [roomTypes, setRoomTypes] = useState<Array<{ id: number; name: string }>>([]);
   const [uploadingImages, setUploadingImages] = useState(false);
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const [customAmenityInput, setCustomAmenityInput] = useState('');
+  const [editingAmenity, setEditingAmenity] = useState<{ name: string; newName: string } | null>(null);
 
   // Define fetchFloors before using it in useEffect
   const fetchFloors = useCallback(async () => {
@@ -451,87 +456,31 @@ const AdvancedRoomManagementPage: React.FC = () => {
     }
   };
 
-  const handleEditRoom = async (room: Room) => {
-    setEditingRoom(room);
-    
-    let amenitiesArray: string[] = [];
-    if (room.amenities) {
-      if (Array.isArray(room.amenities)) {
-        amenitiesArray = room.amenities;
-      } else if (typeof room.amenities === 'string') {
-        try {
-          const parsed = JSON.parse(room.amenities);
-          amenitiesArray = Array.isArray(parsed) ? parsed : [];
-        } catch {
-          const amenitiesStr: string = room.amenities;
-          amenitiesArray = amenitiesStr.split(',').map((a: string) => a.trim()).filter(Boolean);
-        }
-      }
-    }
-    
-    setRoomFormData({
-      room_number: room.room_number,
-      floor: room.floor,
-      room_type_id: room.room_type_id,
-      status: room.status,
-      featured: room.featured,
-      price: room.price?.toString() || '',
-      description: room.description || '',
-      capacity: room.capacity?.toString() || '',
-      room_size: room.room_size || '',
-      view: room.view || '',
-      amenities: amenitiesArray,
-    });
-    
-    setShowRoomModal(true);
-    
-    try {
-      const fullRoom = await roomService.getRoomByNumber(room.room_number);
-      const roomData = fullRoom.data.room;
-      
-      let updatedAmenitiesArray: string[] = [];
-      if (roomData.amenities) {
-        if (Array.isArray(roomData.amenities)) {
-          updatedAmenitiesArray = roomData.amenities;
-        } else if (typeof roomData.amenities === 'string') {
-          try {
-            const parsed = JSON.parse(roomData.amenities);
-            updatedAmenitiesArray = Array.isArray(parsed) ? parsed : [];
-          } catch {
-            const amenitiesStr: string = roomData.amenities;
-            updatedAmenitiesArray = amenitiesStr.split(',').map((a: string) => a.trim()).filter(Boolean);
-          }
-        }
-      }
-      
-      setRoomFormData({
-        room_number: roomData.room_number,
-        floor: roomData.floor,
-        room_type_id: roomData.room_type_id,
-        status: roomData.status,
-        featured: roomData.featured,
-        price: roomData.price?.toString() || '',
-        description: roomData.description || '',
-        capacity: roomData.capacity?.toString() || '',
-        room_size: roomData.room_size || '',
-        view: roomData.view || '',
-        amenities: updatedAmenitiesArray,
-      });
-      
-      setEditingRoom(roomData);
-    } catch (error) {
-      logger.error('Failed to fetch full room details', error);
-      toast.error('Failed to load complete room details');
-    }
+  const handleEditRoom = (room: Room) => {
+    navigate(`/admin/rooms/${room.id}/edit`);
   };
 
   const handleDeleteRoom = async (id: number) => {
-    if (!window.confirm('Are you sure you want to delete this room?')) return;
+    const room = contextRooms.find(r => r.id === id) || statusBoardRooms.find(r => r.id === id);
+    const roomNumber = room?.room_number || 'this room';
+    
+    if (!window.confirm(`Are you sure you want to delete room ${roomNumber}? This action cannot be undone.`)) {
+      return;
+    }
     
     try {
       await contextDeleteRoom(id);
+      toast.success(`Room ${roomNumber} deleted successfully`);
+      await refreshStatusBoard();
+      await refreshRooms();
+      // Remove from expanded rooms if it was expanded
+      setExpandedRooms(prev => {
+        const newSet = new Set(prev);
+        newSet.delete(id);
+        return newSet;
+      });
     } catch (error: any) {
-      // Error already handled in context
+      toast.error(error.response?.data?.message || error.response?.data?.detail || 'Failed to delete room');
     }
   };
 
@@ -552,6 +501,8 @@ const AdvancedRoomManagementPage: React.FC = () => {
     });
     setSelectedFiles([]);
     setUploadingImages(false);
+    setCustomAmenityInput('');
+    setEditingAmenity(null);
   };
 
   const toggleAmenity = (amenity: string) => {
@@ -563,6 +514,86 @@ const AdvancedRoomManagementPage: React.FC = () => {
     }));
   };
 
+  const handleAddCustomAmenity = () => {
+    const trimmed = customAmenityInput.trim();
+    if (trimmed && !roomFormData.amenities.includes(trimmed)) {
+      setRoomFormData(prev => ({
+        ...prev,
+        amenities: [...prev.amenities, trimmed]
+      }));
+      setCustomAmenityInput('');
+    }
+  };
+
+  const handleRemoveAmenity = (amenity: string) => {
+    setRoomFormData(prev => ({
+      ...prev,
+      amenities: prev.amenities.filter(a => a !== amenity)
+    }));
+  };
+
+  const handleEditAmenity = (amenity: string) => {
+    setEditingAmenity({ name: amenity, newName: amenity });
+  };
+
+  const handleSaveAmenityEdit = async () => {
+    if (!editingAmenity || editingAmenity.name === editingAmenity.newName.trim()) {
+      setEditingAmenity(null);
+      return;
+    }
+
+    const newName = editingAmenity.newName.trim();
+    if (!newName) {
+      toast.error('Amenity name cannot be empty');
+      return;
+    }
+
+    try {
+      await roomService.updateAmenity(editingAmenity.name, newName);
+      toast.success(`Amenity "${editingAmenity.name}" updated to "${newName}"`);
+
+      setAvailableAmenities(prev => {
+        const updated = prev.map(a => a === editingAmenity.name ? newName : a);
+        return updated.sort();
+      });
+
+      setRoomFormData(prev => ({
+        ...prev,
+        amenities: prev.amenities.map(a => a === editingAmenity.name ? newName : a)
+      }));
+
+      setEditingAmenity(null);
+      await fetchAvailableAmenities();
+      await refreshRooms();
+      await refreshStatusBoard();
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || error.response?.data?.detail || 'Failed to update amenity');
+    }
+  };
+
+  const handleDeleteAmenity = async (amenity: string) => {
+    if (!window.confirm(`Are you sure you want to delete "${amenity}"? This will remove it from all rooms and room types.`)) {
+      return;
+    }
+
+    try {
+      await roomService.deleteAmenity(amenity);
+      toast.success(`Amenity "${amenity}" deleted successfully`);
+
+      setAvailableAmenities(prev => prev.filter(a => a !== amenity));
+      setRoomFormData(prev => ({
+        ...prev,
+        amenities: prev.amenities.filter(a => a !== amenity)
+      }));
+
+      await fetchAvailableAmenities();
+      await refreshRooms();
+      await refreshStatusBoard();
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || error.response?.data?.detail || 'Failed to delete amenity');
+    }
+  };
+
   const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files) {
       const files = Array.from(e.target.files);
@@ -806,17 +837,29 @@ const AdvancedRoomManagementPage: React.FC = () => {
                               <span>{getStatusLabel(effectiveStatus)}</span>
                             </div>
 
-                            {/* Edit Button */}
-                            <button
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                handleEditRoomFromStatusBoard(room.id);
-                              }}
-                              className="absolute top-3 left-3 p-2 bg-white/90 backdrop-blur-sm rounded-lg text-blue-600 hover:text-blue-700 hover:bg-white transition-all duration-200 shadow-md hover:shadow-lg border border-blue-200 hover:border-blue-300 z-20"
-                              title="Edit Room"
-                            >
-                              <Edit className="w-4 h-4" />
-                            </button>
+                            {/* Action Buttons */}
+                            <div className="absolute top-3 left-3 flex gap-2 z-20">
+                              <button
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleEditRoomFromStatusBoard(room.id);
+                                }}
+                                className="p-2 bg-white/90 backdrop-blur-sm rounded-lg text-blue-600 hover:text-blue-700 hover:bg-white transition-all duration-200 shadow-md hover:shadow-lg border border-blue-200 hover:border-blue-300"
+                                title="Edit Room"
+                              >
+                                <Edit className="w-4 h-4" />
+                              </button>
+                              <button
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleDeleteRoom(room.id);
+                                }}
+                                className="p-2 bg-white/90 backdrop-blur-sm rounded-lg text-rose-600 hover:text-rose-700 hover:bg-white transition-all duration-200 shadow-md hover:shadow-lg border border-rose-200 hover:border-rose-300 hover:scale-105"
+                                title={`Delete Room ${room.room_number}`}
+                              >
+                                <Trash2 className="w-4 h-4" />
+                              </button>
+                            </div>
 
                             {/* Room Content */}
                             <div className="p-5 pt-16 cursor-pointer" onClick={() => toggleRoomExpansion(room.id)}>
diff --git a/Frontend/src/pages/admin/AuditLogsPage.tsx b/Frontend/src/pages/admin/AuditLogsPage.tsx
index 17848e8b..ac861881 100644
--- a/Frontend/src/pages/admin/AuditLogsPage.tsx
+++ b/Frontend/src/pages/admin/AuditLogsPage.tsx
@@ -353,8 +353,9 @@ const AuditLogsPage: React.FC = () => {
 
       {}
       {showDetails && selectedLog && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-lg max-w-3xl w-full max-h-[90vh] overflow-y-auto">
+        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 overflow-y-auto p-4">
+          <div className="min-h-full flex items-start justify-center py-8">
+            <div className="bg-white rounded-lg max-w-3xl w-full my-8 max-h-[calc(100vh-4rem)] overflow-y-auto">
             <div className="p-6">
               <div className="flex justify-between items-center mb-4">
                 <h2 className="text-2xl font-bold text-gray-900">Audit Log Details</h2>
@@ -460,6 +461,7 @@ const AuditLogsPage: React.FC = () => {
               </div>
             </div>
           </div>
+          </div>
         </div>
       )}
     </div>
diff --git a/Frontend/src/pages/admin/BannerManagementPage.tsx b/Frontend/src/pages/admin/BannerManagementPage.tsx
index 6c0b8c8c..23b47275 100644
--- a/Frontend/src/pages/admin/BannerManagementPage.tsx
+++ b/Frontend/src/pages/admin/BannerManagementPage.tsx
@@ -417,8 +417,9 @@ const BannerManagementPage: React.FC = () => {
 
       {}
       {showModal && (
-        <div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-3 sm:p-4 animate-fade-in">
-          <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl max-w-2xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-hidden border border-slate-200/50 animate-scale-in">
+        <div className="fixed inset-0 bg-black/70 backdrop-blur-md z-50 overflow-y-auto p-3 sm:p-4 animate-fade-in">
+          <div className="min-h-full flex items-start justify-center py-8">
+            <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl max-w-2xl w-full my-8 max-h-[calc(100vh-4rem)] overflow-hidden border border-slate-200/50 animate-scale-in">
             <div className="sticky top-0 bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-4 sm:px-6 py-4 sm:py-5 border-b border-slate-700 z-10">
               <div className="flex justify-between items-center">
                 <div>
@@ -440,7 +441,7 @@ const BannerManagementPage: React.FC = () => {
                 </button>
               </div>
             </div>
-            <div className="overflow-y-auto max-h-[calc(95vh-120px)] sm:max-h-[calc(90vh-120px)]">
+            <div className="overflow-y-auto max-h-[calc(100vh-12rem)]">
               <form onSubmit={handleSubmit} className="p-4 sm:p-6 space-y-4 sm:space-y-5">
               <div>
                 <label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">
@@ -679,6 +680,8 @@ const BannerManagementPage: React.FC = () => {
               </form>
             </div>
           </div>
+            </div>
+          </div>
         </div>
       )}
 
diff --git a/Frontend/src/pages/admin/BlogManagementPage.tsx b/Frontend/src/pages/admin/BlogManagementPage.tsx
index ddc927c5..dc88ad14 100644
--- a/Frontend/src/pages/admin/BlogManagementPage.tsx
+++ b/Frontend/src/pages/admin/BlogManagementPage.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { Plus, Search, Edit, Trash2, X, Eye, EyeOff, Loader2, Calendar, User, Tag, GripVertical, Image as ImageIcon, Type, Quote, List, Video, ArrowRight, MoveUp, MoveDown, Sparkles, Upload } from 'lucide-react';
+import { Plus, Search, Edit, Trash2, X, Eye, EyeOff, Loader2, Tag, GripVertical, Image as ImageIcon, Type, Quote, List, Video, ArrowRight, MoveUp, MoveDown, Sparkles, Upload } from 'lucide-react';
 import { toast } from 'react-toastify';
 import Loading from '../../shared/components/Loading';
 import Pagination from '../../shared/components/Pagination';
@@ -42,6 +42,16 @@ const BlogManagementPage: React.FC = () => {
   const [saving, setSaving] = useState(false);
   const [showSectionBuilder, setShowSectionBuilder] = useState(false);
   const [uploadingImages, setUploadingImages] = useState<{ [key: string]: boolean }>({});
+  
+  // Tag management state
+  const [showTagController, setShowTagController] = useState(false);
+  const [tags, setTags] = useState<Array<{ name: string; usage_count: number }>>([]);
+  const [tagsLoading, setTagsLoading] = useState(false);
+  const [editingTag, setEditingTag] = useState<{ old: string; new: string } | null>(null);
+  const [deleteTagConfirm, setDeleteTagConfirm] = useState<{ show: boolean; tag: string | null }>({
+    show: false,
+    tag: null,
+  });
 
   useEffect(() => {
     setCurrentPage(1);
@@ -51,6 +61,12 @@ const BlogManagementPage: React.FC = () => {
     fetchPosts();
   }, [filters, currentPage]);
 
+  useEffect(() => {
+    if (showTagController) {
+      fetchTags();
+    }
+  }, [showTagController]);
+
   const fetchPosts = async () => {
     try {
       setLoading(true);
@@ -275,6 +291,50 @@ const BlogManagementPage: React.FC = () => {
     }
   };
 
+  // Tag management functions
+  const fetchTags = async () => {
+    try {
+      setTagsLoading(true);
+      const response = await blogService.getAllTags();
+      if (response.status === 'success' && response.data) {
+        setTags(response.data.tags);
+      }
+    } catch (error: any) {
+      toast.error(error.response?.data?.detail || 'Failed to load tags');
+    } finally {
+      setTagsLoading(false);
+    }
+  };
+
+  const handleRenameTag = async () => {
+    if (!editingTag || !editingTag.new.trim() || editingTag.old === editingTag.new.trim()) {
+      setEditingTag(null);
+      return;
+    }
+    try {
+      const response = await blogService.renameTag(editingTag.old, editingTag.new.trim());
+      toast.success(response.message || 'Tag renamed successfully');
+      setEditingTag(null);
+      fetchTags();
+      fetchPosts(); // Refresh posts to show updated tags
+    } catch (error: any) {
+      toast.error(error.response?.data?.detail || 'Failed to rename tag');
+    }
+  };
+
+  const handleDeleteTag = async () => {
+    if (!deleteTagConfirm.tag) return;
+    try {
+      const response = await blogService.deleteTag(deleteTagConfirm.tag);
+      toast.success(response.message || 'Tag deleted successfully');
+      setDeleteTagConfirm({ show: false, tag: null });
+      fetchTags();
+      fetchPosts(); // Refresh posts to show updated tags
+    } catch (error: any) {
+      toast.error(error.response?.data?.detail || 'Failed to delete tag');
+    }
+  };
+
   const formatDate = (dateString?: string) => {
     if (!dateString) return 'Not published';
     return new Date(dateString).toLocaleDateString('en-US', {
@@ -398,13 +458,22 @@ const BlogManagementPage: React.FC = () => {
               <h1 className="text-2xl sm:text-3xl font-bold text-gray-900">Blog Management</h1>
               <p className="text-gray-600 mt-1">Manage your blog posts and content</p>
             </div>
-            <button
-              onClick={() => handleOpenModal()}
-              className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-[#d4af37] to-[#c9a227] text-white rounded-lg hover:from-[#f5d76e] hover:to-[#d4af37] transition-all shadow-lg"
-            >
-              <Plus className="w-5 h-5" />
-              <span>New Post</span>
-            </button>
+            <div className="flex items-center gap-3">
+              <button
+                onClick={() => setShowTagController(true)}
+                className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all shadow-lg"
+              >
+                <Tag className="w-5 h-5" />
+                <span>Manage Tags</span>
+              </button>
+              <button
+                onClick={() => handleOpenModal()}
+                className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-[#d4af37] to-[#c9a227] text-white rounded-lg hover:from-[#f5d76e] hover:to-[#d4af37] transition-all shadow-lg"
+              >
+                <Plus className="w-5 h-5" />
+                <span>New Post</span>
+              </button>
+            </div>
           </div>
         </div>
 
@@ -530,8 +599,9 @@ const BlogManagementPage: React.FC = () => {
 
         {/* Create/Edit Modal */}
         {showModal && (
-          <div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-3 sm:p-4 animate-fade-in">
-            <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl max-w-4xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-hidden border border-slate-200/50 animate-scale-in">
+          <div className="fixed inset-0 bg-black/70 backdrop-blur-md z-50 overflow-y-auto p-3 sm:p-4 animate-fade-in">
+            <div className="min-h-full flex items-start justify-center py-8">
+              <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl max-w-4xl w-full my-8 max-h-[calc(100vh-4rem)] overflow-hidden border border-slate-200/50 animate-scale-in">
               <div className="sticky top-0 bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-4 sm:px-6 py-4 sm:py-5 border-b border-slate-700 z-10">
                 <div className="flex justify-between items-center">
                   <div>
@@ -551,7 +621,7 @@ const BlogManagementPage: React.FC = () => {
                 </div>
               </div>
 
-              <div className="overflow-y-auto max-h-[calc(95vh-120px)] sm:max-h-[calc(90vh-120px)]">
+              <div className="overflow-y-auto max-h-[calc(100vh-12rem)]">
                 <form onSubmit={handleSubmit} className="p-4 sm:p-6 space-y-5 sm:space-y-6">
                 <div>
                   <label className="block text-xs sm:text-sm font-semibold text-slate-600 uppercase tracking-wider mb-2">Title *</label>
@@ -1177,6 +1247,7 @@ const BlogManagementPage: React.FC = () => {
               </div>
             </div>
           </div>
+          </div>
         )}
 
         {/* Delete Confirmation */}
@@ -1187,6 +1258,131 @@ const BlogManagementPage: React.FC = () => {
           title="Delete Blog Post"
           message="Are you sure you want to delete this blog post? This action cannot be undone."
         />
+
+        {/* Tag Controller Modal */}
+        {showTagController && (
+          <div className="fixed inset-0 bg-black/70 backdrop-blur-md z-50 overflow-y-auto p-3 sm:p-4 animate-fade-in">
+            <div className="min-h-full flex items-start justify-center py-8">
+              <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl max-w-4xl w-full my-8 max-h-[calc(100vh-4rem)] overflow-hidden border border-slate-200/50 animate-scale-in">
+              <div className="sticky top-0 bg-gradient-to-r from-blue-600 via-blue-700 to-blue-600 px-4 sm:px-6 py-4 sm:py-5 border-b border-blue-800 z-10">
+                <div className="flex justify-between items-center">
+                  <div>
+                    <h2 className="text-lg sm:text-xl md:text-2xl font-bold text-white">
+                      Tag Controller
+                    </h2>
+                    <p className="text-blue-100/80 text-xs sm:text-sm font-light mt-1">
+                      Manage all blog tags - rename or delete tags across all posts
+                    </p>
+                  </div>
+                  <button
+                    onClick={() => {
+                      setShowTagController(false);
+                      setEditingTag(null);
+                    }}
+                    className="w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center rounded-xl text-white hover:bg-blue-800/50 transition-all duration-200 border border-blue-500 hover:border-blue-300"
+                  >
+                    <X className="w-5 h-5 sm:w-6 sm:h-6" />
+                  </button>
+                </div>
+              </div>
+
+              <div className="overflow-y-auto max-h-[calc(100vh-12rem)]">
+                <div className="p-4 sm:p-6">
+                  {tagsLoading ? (
+                    <div className="flex items-center justify-center py-12">
+                      <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
+                    </div>
+                  ) : tags.length === 0 ? (
+                    <div className="text-center py-12">
+                      <Tag className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+                      <p className="text-gray-500 text-lg">No tags found</p>
+                      <p className="text-gray-400 text-sm mt-2">Tags will appear here when you add them to blog posts</p>
+                    </div>
+                  ) : (
+                    <div className="space-y-3">
+                      {tags.map((tag) => (
+                        <div
+                          key={tag.name}
+                          className="bg-gradient-to-br from-gray-50 to-white border-2 border-gray-200 rounded-xl p-4 hover:border-blue-300 transition-all"
+                        >
+                          {editingTag && editingTag.old === tag.name ? (
+                            <div className="flex items-center gap-3">
+                              <input
+                                type="text"
+                                value={editingTag.new}
+                                onChange={(e) => setEditingTag({ ...editingTag, new: e.target.value })}
+                                onKeyPress={(e) => {
+                                  if (e.key === 'Enter') {
+                                    handleRenameTag();
+                                  } else if (e.key === 'Escape') {
+                                    setEditingTag(null);
+                                  }
+                                }}
+                                autoFocus
+                                className="flex-1 px-4 py-2 border-2 border-blue-400 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                                placeholder="Enter new tag name"
+                              />
+                              <button
+                                onClick={handleRenameTag}
+                                className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
+                              >
+                                Save
+                              </button>
+                              <button
+                                onClick={() => setEditingTag(null)}
+                                className="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition-colors"
+                              >
+                                Cancel
+                              </button>
+                            </div>
+                          ) : (
+                            <div className="flex items-center justify-between">
+                              <div className="flex items-center gap-4 flex-1">
+                                <div className="flex items-center gap-2">
+                                  <Tag className="w-5 h-5 text-blue-600" />
+                                  <span className="text-lg font-semibold text-gray-900">{tag.name}</span>
+                                </div>
+                                <span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm font-medium">
+                                  Used in {tag.usage_count} {tag.usage_count === 1 ? 'post' : 'posts'}
+                                </span>
+                              </div>
+                              <div className="flex items-center gap-2">
+                                <button
+                                  onClick={() => setEditingTag({ old: tag.name, new: tag.name })}
+                                  className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2"
+                                >
+                                  <Edit className="w-4 h-4" />
+                                  <span>Rename</span>
+                                </button>
+                                <button
+                                  onClick={() => setDeleteTagConfirm({ show: true, tag: tag.name })}
+                                  className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors flex items-center gap-2"
+                                >
+                                  <Trash2 className="w-4 h-4" />
+                                  <span>Delete</span>
+                                </button>
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+          </div>
+        )}
+
+        {/* Delete Tag Confirmation */}
+        <ConfirmationDialog
+          isOpen={deleteTagConfirm.show}
+          onClose={() => setDeleteTagConfirm({ show: false, tag: null })}
+          onConfirm={handleDeleteTag}
+          title="Delete Tag"
+          message={`Are you sure you want to delete the tag "${deleteTagConfirm.tag}"? This will remove it from all blog posts. This action cannot be undone.`}
+        />
       </div>
     </div>
   );
diff --git a/Frontend/src/pages/admin/BookingManagementPage.tsx b/Frontend/src/pages/admin/BookingManagementPage.tsx
index deb20c00..fbd6b4fe 100644
--- a/Frontend/src/pages/admin/BookingManagementPage.tsx
+++ b/Frontend/src/pages/admin/BookingManagementPage.tsx
@@ -115,7 +115,7 @@ const BookingManagementPage: React.FC = () => {
             const response = await invoiceService.getInvoicesByBooking(booking.id);
             
             // Check response structure - handle both possible formats
-            const invoices = response.data?.invoices || response.data?.data?.invoices || [];
+            const invoices = response.data?.invoices || (response.data as any)?.data?.invoices || [];
             const hasInvoice = Array.isArray(invoices) && invoices.length > 0;
             
             return {
@@ -197,7 +197,7 @@ const BookingManagementPage: React.FC = () => {
       let invoice = null;
       if (response.status === 'success' && response.data) {
         // Try different possible response structures
-        invoice = response.data.invoice || response.data.data?.invoice || response.data;
+        invoice = response.data.invoice || (response.data as any).data?.invoice || response.data;
         logger.debug('Extracted invoice', { invoice });
       }
       
@@ -637,8 +637,9 @@ const BookingManagementPage: React.FC = () => {
 
       {}
       {showDetailModal && selectedBooking && (
-        <div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-3 sm:p-4 animate-fade-in">
-          <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl w-full max-w-3xl max-h-[95vh] sm:max-h-[90vh] overflow-hidden animate-scale-in border border-slate-200">
+        <div className="fixed inset-0 bg-black/70 backdrop-blur-md z-50 overflow-y-auto p-3 sm:p-4 animate-fade-in">
+          <div className="min-h-full flex items-start justify-center py-8">
+            <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl w-full max-w-3xl my-8 max-h-[calc(100vh-4rem)] overflow-hidden animate-scale-in border border-slate-200">
             {}
             <div className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-8 py-6 border-b border-slate-700">
               <div className="flex justify-between items-center">
@@ -655,7 +656,7 @@ const BookingManagementPage: React.FC = () => {
               </div>
             </div>
             
-            <div className="overflow-y-auto max-h-[calc(95vh-120px)] sm:max-h-[calc(90vh-120px)]">
+            <div className="overflow-y-auto max-h-[calc(100vh-12rem)]">
               <div className="p-4 sm:p-6 md:p-8 space-y-5 sm:space-y-6">
                 {}
                 <div className="grid grid-cols-2 gap-6">
@@ -985,6 +986,7 @@ const BookingManagementPage: React.FC = () => {
                 </button>
               </div>
             </div>
+            </div>
           </div>
         </div>
       )}
diff --git a/Frontend/src/pages/admin/BusinessDashboardPage.tsx b/Frontend/src/pages/admin/BusinessDashboardPage.tsx
index bd2598dd..7e1e2414 100644
--- a/Frontend/src/pages/admin/BusinessDashboardPage.tsx
+++ b/Frontend/src/pages/admin/BusinessDashboardPage.tsx
@@ -1044,8 +1044,9 @@ const BusinessDashboardPage: React.FC = () => {
 
             {}
             {showPromotionModal && (
-              <div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-4">
-                <div className="bg-white rounded-3xl shadow-2xl w-full max-w-3xl max-h-[90vh] overflow-hidden border border-gray-200">
+              <div className="fixed inset-0 bg-black/70 backdrop-blur-md z-50 overflow-y-auto p-4">
+                <div className="min-h-full flex items-start justify-center py-8">
+                  <div className="bg-white rounded-3xl shadow-2xl w-full max-w-3xl my-8 max-h-[calc(100vh-4rem)] overflow-hidden border border-gray-200">
                   {}
                   <div className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-8 py-6 border-b border-slate-700">
                     <div className="flex justify-between items-center">
@@ -1067,7 +1068,7 @@ const BusinessDashboardPage: React.FC = () => {
                   </div>
                   
                   {}
-                  <div className="p-8 overflow-y-auto max-h-[calc(90vh-120px)] custom-scrollbar">
+                  <div className="p-8 overflow-y-auto max-h-[calc(100vh-12rem)] custom-scrollbar">
                     <form onSubmit={handlePromotionSubmit} className="space-y-6">
                       <div className="grid grid-cols-2 gap-6">
                         <div>
@@ -1241,7 +1242,8 @@ const BusinessDashboardPage: React.FC = () => {
                     </form>
                   </div>
                 </div>
-              </div>
+                  </div>
+                </div>
             )}
           </div>
         )}
diff --git a/Frontend/src/pages/admin/EditRoomPage.tsx b/Frontend/src/pages/admin/EditRoomPage.tsx
new file mode 100644
index 00000000..ff1060bb
--- /dev/null
+++ b/Frontend/src/pages/admin/EditRoomPage.tsx
@@ -0,0 +1,1044 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { ArrowLeft, Upload, Image as ImageIcon, Check, X, Plus, Edit as EditIcon, Trash2, Sparkles, Crown } from 'lucide-react';
+import roomService, { Room } from '../../features/rooms/services/roomService';
+import { toast } from 'react-toastify';
+import Loading from '../../shared/components/Loading';
+import apiClient from '../../shared/services/apiClient';
+import { logger } from '../../shared/utils/logger';
+import { useRoomContext } from '../../features/rooms/contexts/RoomContext';
+
+const EditRoomPage: React.FC = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { updateRoom: contextUpdateRoom, refreshRooms } = useRoomContext();
+
+  const [loading, setLoading] = useState(true);
+  const [editingRoom, setEditingRoom] = useState<Room | null>(null);
+  const [uploadingImages, setUploadingImages] = useState(false);
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const [customAmenityInput, setCustomAmenityInput] = useState('');
+  const [editingAmenity, setEditingAmenity] = useState<{ name: string; newName: string } | null>(null);
+  const [availableAmenities, setAvailableAmenities] = useState<string[]>([]);
+  const [roomTypes, setRoomTypes] = useState<Array<{ id: number; name: string }>>([]);
+  const [deletingImageUrl, setDeletingImageUrl] = useState<string | null>(null);
+  const [failedImageUrls, setFailedImageUrls] = useState<Set<string>>(new Set());
+
+  const [formData, setFormData] = useState({
+    room_number: '',
+    floor: 1,
+    room_type_id: 1,
+    status: 'available' as 'available' | 'occupied' | 'maintenance',
+    featured: false,
+    price: '',
+    description: '',
+    capacity: '',
+    room_size: '',
+    view: '',
+    amenities: [] as string[],
+  });
+
+  useEffect(() => {
+    if (id) {
+      fetchRoomData();
+    }
+    fetchAvailableAmenities();
+    fetchRoomTypes();
+  }, [id]);
+
+  const fetchRoomTypes = async () => {
+    try {
+      const response = await roomService.getRooms({ limit: 100, page: 1 });
+      const allUniqueRoomTypes = new Map<number, { id: number; name: string }>();
+      response.data.rooms.forEach((room: Room) => {
+        if (room.room_type && !allUniqueRoomTypes.has(room.room_type.id)) {
+          allUniqueRoomTypes.set(room.room_type.id, {
+            id: room.room_type.id,
+            name: room.room_type.name,
+          });
+        }
+      });
+
+      if (response.data.pagination && response.data.pagination.totalPages > 1) {
+        const totalPages = response.data.pagination.totalPages;
+        for (let page = 2; page <= totalPages; page++) {
+          try {
+            const pageResponse = await roomService.getRooms({ limit: 100, page });
+            pageResponse.data.rooms.forEach((room: Room) => {
+              if (room.room_type && !allUniqueRoomTypes.has(room.room_type.id)) {
+                allUniqueRoomTypes.set(room.room_type.id, {
+                  id: room.room_type.id,
+                  name: room.room_type.name,
+                });
+              }
+            });
+          } catch (err) {
+            logger.error(`Failed to fetch page ${page}`, err);
+          }
+        }
+      }
+
+      if (allUniqueRoomTypes.size > 0) {
+        setRoomTypes(Array.from(allUniqueRoomTypes.values()));
+      }
+    } catch (err) {
+      logger.error('Failed to fetch room types', err);
+    }
+  };
+
+  const fetchAvailableAmenities = async () => {
+    try {
+      const response = await roomService.getAmenities();
+      if (response.data?.amenities) {
+        setAvailableAmenities(response.data.amenities);
+      }
+    } catch (error) {
+      logger.error('Failed to fetch amenities', error);
+    }
+  };
+
+  const fetchRoomData = async () => {
+    if (!id) return;
+
+    try {
+      setLoading(true);
+      const roomId = parseInt(id);
+      const response = await roomService.getRoomById(roomId);
+      const room = response.data.room;
+
+      setEditingRoom(room);
+
+      let amenitiesArray: string[] = [];
+      const roomAmenities = room.amenities as string[] | string | undefined;
+      if (roomAmenities) {
+        if (Array.isArray(roomAmenities)) {
+          amenitiesArray = roomAmenities;
+        } else if (typeof roomAmenities === 'string') {
+          try {
+            const parsed = JSON.parse(roomAmenities);
+            amenitiesArray = Array.isArray(parsed) ? parsed : [];
+          } catch {
+            amenitiesArray = roomAmenities.split(',').map((a: string) => a.trim()).filter(Boolean);
+          }
+        }
+      }
+
+      setFormData({
+        room_number: room.room_number,
+        floor: room.floor,
+        room_type_id: room.room_type_id,
+        status: room.status,
+        featured: room.featured,
+        price: room.price?.toString() || '',
+        description: room.description || '',
+        capacity: room.capacity?.toString() || '',
+        room_size: room.room_size || '',
+        view: room.view || '',
+        amenities: amenitiesArray,
+      });
+    } catch (error: any) {
+      logger.error('Failed to fetch room data', error);
+      toast.error(error.response?.data?.message || 'Failed to load room data');
+      navigate('/admin/advanced-rooms');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!editingRoom) return;
+
+    try {
+      const updateData = {
+        ...formData,
+        price: formData.price ? parseFloat(formData.price) : undefined,
+        description: formData.description || undefined,
+        capacity: formData.capacity ? parseInt(formData.capacity) : undefined,
+        room_size: formData.room_size || undefined,
+        view: formData.view || undefined,
+        amenities: Array.isArray(formData.amenities) ? formData.amenities : [],
+      };
+      
+      await contextUpdateRoom(editingRoom.id, updateData);
+      toast.success('Room updated successfully');
+      await refreshRooms();
+      navigate('/admin/advanced-rooms');
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'An error occurred');
+    }
+  };
+
+  const toggleAmenity = (amenity: string) => {
+    setFormData(prev => ({
+      ...prev,
+      amenities: prev.amenities.includes(amenity)
+        ? prev.amenities.filter(a => a !== amenity)
+        : [...prev.amenities, amenity]
+    }));
+  };
+
+  const handleAddCustomAmenity = () => {
+    const trimmed = customAmenityInput.trim();
+    if (trimmed && !formData.amenities.includes(trimmed)) {
+      setFormData(prev => ({
+        ...prev,
+        amenities: [...prev.amenities, trimmed]
+      }));
+      setCustomAmenityInput('');
+    }
+  };
+
+  const handleRemoveAmenity = (amenity: string) => {
+    setFormData(prev => ({
+      ...prev,
+      amenities: prev.amenities.filter(a => a !== amenity)
+    }));
+  };
+
+  const handleEditAmenity = (amenity: string) => {
+    setEditingAmenity({ name: amenity, newName: amenity });
+  };
+
+  const handleSaveAmenityEdit = async () => {
+    if (!editingAmenity || editingAmenity.name === editingAmenity.newName.trim()) {
+      setEditingAmenity(null);
+      return;
+    }
+
+    const newName = editingAmenity.newName.trim();
+    if (!newName) {
+      toast.error('Amenity name cannot be empty');
+      return;
+    }
+
+    try {
+      await roomService.updateAmenity(editingAmenity.name, newName);
+      toast.success(`Amenity "${editingAmenity.name}" updated to "${newName}"`);
+
+      setAvailableAmenities(prev => {
+        const updated = prev.map(a => a === editingAmenity.name ? newName : a);
+        return updated.sort();
+      });
+
+      setFormData(prev => ({
+        ...prev,
+        amenities: prev.amenities.map(a => a === editingAmenity.name ? newName : a)
+      }));
+
+      setEditingAmenity(null);
+      await fetchAvailableAmenities();
+      await refreshRooms();
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || error.response?.data?.detail || 'Failed to update amenity');
+    }
+  };
+
+  const handleDeleteAmenity = async (amenity: string) => {
+    if (!window.confirm(`Are you sure you want to delete "${amenity}"? This will remove it from all rooms and room types.`)) {
+      return;
+    }
+
+    try {
+      await roomService.deleteAmenity(amenity);
+      toast.success(`Amenity "${amenity}" deleted successfully`);
+
+      setAvailableAmenities(prev => prev.filter(a => a !== amenity));
+      setFormData(prev => ({
+        ...prev,
+        amenities: prev.amenities.filter(a => a !== amenity)
+      }));
+
+      await fetchAvailableAmenities();
+      await refreshRooms();
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || error.response?.data?.detail || 'Failed to delete amenity');
+    }
+  };
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files) {
+      const files = Array.from(e.target.files);
+      setSelectedFiles(files);
+    }
+  };
+
+  const handleUploadImages = async () => {
+    if (!editingRoom || selectedFiles.length === 0) return;
+
+    try {
+      setUploadingImages(true);
+      const formData = new FormData();
+      selectedFiles.forEach(file => {
+        formData.append('images', file);
+      });
+
+      await apiClient.post(`/rooms/${editingRoom.id}/images`, formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      toast.success('Images uploaded successfully');
+      setSelectedFiles([]);
+      await refreshRooms();
+      await fetchRoomData();
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || 'Unable to upload images');
+    } finally {
+      setUploadingImages(false);
+    }
+  };
+
+  const handleDeleteImage = async (imageUrl: string) => {
+    if (!editingRoom) return;
+    if (!window.confirm('Are you sure you want to delete this image?')) return;
+
+    try {
+      setDeletingImageUrl(imageUrl);
+      // Immediately mark as failed to prevent error handler from firing
+      setFailedImageUrls(prev => new Set([...prev, imageUrl]));
+      
+      let imagePath = imageUrl;
+      if (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) {
+        try {
+          const url = new URL(imageUrl);
+          imagePath = url.pathname;
+        } catch (e) {
+          const match = imageUrl.match(/(\/uploads\/.*)/);
+          imagePath = match ? match[1] : imageUrl;
+        }
+      }
+
+      await apiClient.delete(`/rooms/${editingRoom.id}/images`, {
+        params: { image_url: imagePath },
+      });
+
+      toast.success('Image deleted successfully');
+      await refreshRooms();
+      await fetchRoomData();
+    } catch (error: any) {
+      logger.error('Error deleting image', error);
+      toast.error(error.response?.data?.message || error.response?.data?.detail || 'Unable to delete image');
+      // Remove from failed list if deletion failed so user can try again
+      setFailedImageUrls(prev => {
+        const newSet = new Set(prev);
+        newSet.delete(imageUrl);
+        return newSet;
+      });
+    } finally {
+      setDeletingImageUrl(null);
+    }
+  };
+
+  if (loading) {
+    return <Loading />;
+  }
+
+  if (!editingRoom) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 via-white to-amber-50/30">
+        <div className="text-center p-8 bg-white/80 backdrop-blur-xl rounded-3xl shadow-2xl border border-amber-200/50 max-w-md w-full mx-4">
+          <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-gradient-to-br from-amber-100 to-amber-200 flex items-center justify-center">
+            <X className="w-10 h-10 text-amber-600" />
+          </div>
+          <h2 className="text-2xl font-bold text-slate-900 mb-3">Room Not Found</h2>
+          <p className="text-slate-600 mb-6">The room you're looking for doesn't exist or has been removed.</p>
+          <button
+            onClick={() => navigate('/admin/advanced-rooms')}
+            className="px-6 py-3 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-xl hover:from-amber-600 hover:to-amber-700 transition-all duration-300 font-semibold shadow-lg hover:shadow-xl transform hover:scale-105"
+          >
+            Back to Rooms
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  const apiBaseUrl = import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000';
+
+  const normalizeImageUrl = (img: string): string => {
+    if (!img) return '';
+    
+    // If it's already a full URL, return as is
+    if (img.startsWith('http://') || img.startsWith('https://')) {
+      // Only reject if it contains obviously malformed characters that could cause parsing issues
+      if (img.includes('[') || img.includes(']') || img.includes('"')) {
+        return '';
+      }
+      return img;
+    }
+    
+    // If it's a data URI, return as is (but validate to prevent parsing issues)
+    if (img.startsWith('data:')) {
+      // Basic validation - if it looks like a complete data URI, allow it
+      if (img.includes(';base64,') && img.length > 50) {
+        return img;
+      }
+      // Reject malformed data URIs
+      return '';
+    }
+    
+    // Otherwise, construct the full URL
+    const cleanPath = img.startsWith('/') ? img : `/${img}`;
+    return `${apiBaseUrl}${cleanPath}`;
+  };
+
+  const normalizeForComparison = (img: string): string => {
+    if (!img) return '';
+    if (img.startsWith('http://') || img.startsWith('https://')) {
+      try {
+        const url = new URL(img);
+        return url.pathname;
+      } catch {
+        const match = img.match(/(\/uploads\/.*)/);
+        return match ? match[1] : img;
+      }
+    }
+    return img.startsWith('/') ? img : `/${img}`;
+  };
+
+  const roomImages = editingRoom.images || [];
+  const roomTypeImages = editingRoom.room_type?.images || [];
+  const normalizedRoomImages = roomImages.map((ri: any) => normalizeForComparison(String(ri || '')));
+  const allImages = [
+    ...roomImages.filter((img: any) => img != null && String(img).trim() !== ''),
+    ...roomTypeImages.filter((img: any) => {
+      if (!img || String(img).trim() === '') return false;
+      const normalized = normalizeForComparison(String(img));
+      return !normalizedRoomImages.includes(normalized);
+    })
+  ];
+
+  // Debug logging (can be removed later)
+  if (allImages.length > 0) {
+    console.log('EditRoomPage - Images found:', {
+      roomImages: roomImages.length,
+      roomTypeImages: roomTypeImages.length,
+      allImages: allImages.length,
+      sampleImage: allImages[0],
+      normalizedUrl: allImages[0] ? normalizeImageUrl(String(allImages[0])) : 'none'
+    });
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-amber-50/20 -m-3 sm:-m-4 md:-m-6 p-3 sm:p-4 md:p-6 lg:p-8">
+      {/* Luxury Header with Glassmorphism */}
+      <div className="mb-6 sm:mb-8">
+        <div className="bg-white/70 backdrop-blur-2xl rounded-3xl shadow-2xl border border-amber-200/30 p-4 sm:p-6 md:p-8 relative overflow-hidden">
+          {/* Decorative Background Elements */}
+          <div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-amber-200/20 to-transparent rounded-full blur-3xl -mr-32 -mt-32"></div>
+          <div className="absolute bottom-0 left-0 w-48 h-48 bg-gradient-to-tr from-amber-100/20 to-transparent rounded-full blur-2xl -ml-24 -mb-24"></div>
+          
+          <div className="relative z-10 flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6">
+            <button
+              onClick={() => navigate('/admin/advanced-rooms')}
+              className="self-start p-3 rounded-2xl bg-gradient-to-br from-white to-slate-50 text-slate-600 hover:text-amber-600 hover:from-amber-50 hover:to-amber-100 transition-all duration-300 shadow-lg hover:shadow-xl border border-slate-200 hover:border-amber-300 transform hover:scale-105 group"
+            >
+              <ArrowLeft className="w-5 h-5 sm:w-6 sm:h-6 group-hover:-translate-x-1 transition-transform" />
+            </button>
+            
+            <div className="flex-1">
+              <div className="flex flex-wrap items-center gap-3 mb-2">
+                <div className="h-1.5 w-12 sm:w-16 bg-gradient-to-r from-amber-400 via-amber-500 to-amber-600 rounded-full shadow-lg"></div>
+                <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold bg-gradient-to-r from-slate-900 via-amber-700 to-slate-900 bg-clip-text text-transparent tracking-tight">
+                  Edit Room
+                </h1>
+                {editingRoom.featured && (
+                  <div className="flex items-center gap-1.5 px-3 py-1.5 bg-gradient-to-r from-amber-400/20 to-amber-500/20 rounded-full border border-amber-400/30">
+                    <Crown className="w-4 h-4 text-amber-600" />
+                    <span className="text-xs font-semibold text-amber-700">Featured</span>
+                  </div>
+                )}
+              </div>
+              <div className="flex flex-wrap items-center gap-2 sm:gap-4 mt-2">
+                <p className="text-base sm:text-lg font-mono font-bold text-amber-600 bg-amber-50 px-4 py-2 rounded-xl border border-amber-200 shadow-sm">
+                  {editingRoom.room_number}
+                </p>
+                <p className="text-sm sm:text-base text-slate-600 font-medium">
+                  {editingRoom.room_type?.name || 'Room Type'}
+                </p>
+                <span className="hidden sm:inline text-slate-400">•</span>
+                <p className="text-sm sm:text-base text-slate-500">Floor {editingRoom.floor}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Form Container */}
+      <div className="bg-white/70 backdrop-blur-2xl rounded-3xl shadow-2xl border border-amber-200/30 p-4 sm:p-6 md:p-8 lg:p-10 relative overflow-hidden">
+        {/* Decorative Elements */}
+        <div className="absolute top-0 right-0 w-96 h-96 bg-gradient-to-bl from-amber-100/10 to-transparent rounded-full blur-3xl -mr-48 -mt-48"></div>
+        <div className="absolute bottom-0 left-0 w-72 h-72 bg-gradient-to-tr from-amber-50/10 to-transparent rounded-full blur-2xl -ml-36 -mb-36"></div>
+        
+        <form onSubmit={handleSubmit} className="relative z-10 space-y-8 sm:space-y-10">
+          {/* Basic Information Section */}
+          <div className="space-y-6">
+            <div className="flex items-center gap-3 mb-6">
+              <div className="h-10 w-1.5 bg-gradient-to-b from-amber-400 via-amber-500 to-amber-600 rounded-full shadow-lg"></div>
+              <div>
+                <h2 className="text-xl sm:text-2xl font-bold bg-gradient-to-r from-slate-900 to-slate-700 bg-clip-text text-transparent">
+                  Basic Information
+                </h2>
+                <p className="text-sm text-slate-500 mt-1">Essential room details and specifications</p>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+              <div className="group">
+                <label className="block text-sm font-semibold text-slate-700 mb-2.5 flex items-center gap-2">
+                  <Sparkles className="w-4 h-4 text-amber-500" />
+                  Room Number
+                </label>
+                <input
+                  type="text"
+                  value={formData.room_number}
+                  onChange={(e) => setFormData({ ...formData, room_number: e.target.value })}
+                  className="w-full px-5 py-3.5 bg-gradient-to-br from-white to-slate-50/50 border-2 border-slate-200 rounded-2xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100/50 transition-all duration-300 text-slate-800 font-medium shadow-sm hover:shadow-md focus:shadow-lg placeholder:text-slate-400"
+                  placeholder="e.g., 1001"
+                  required
+                />
+              </div>
+              
+              <div className="group">
+                <label className="block text-sm font-semibold text-slate-700 mb-2.5 flex items-center gap-2">
+                  <Sparkles className="w-4 h-4 text-amber-500" />
+                  Floor
+                </label>
+                <input
+                  type="number"
+                  value={formData.floor}
+                  onChange={(e) => setFormData({ ...formData, floor: parseInt(e.target.value) })}
+                  className="w-full px-5 py-3.5 bg-gradient-to-br from-white to-slate-50/50 border-2 border-slate-200 rounded-2xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100/50 transition-all duration-300 text-slate-800 font-medium shadow-sm hover:shadow-md focus:shadow-lg"
+                  required
+                  min="1"
+                />
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+              <div className="group">
+                <label className="block text-sm font-semibold text-slate-700 mb-2.5 flex items-center gap-2">
+                  <Sparkles className="w-4 h-4 text-amber-500" />
+                  Room Type
+                </label>
+                <select
+                  value={formData.room_type_id}
+                  onChange={(e) => setFormData({ ...formData, room_type_id: parseInt(e.target.value) })}
+                  className="w-full px-5 py-3.5 bg-gradient-to-br from-white to-slate-50/50 border-2 border-slate-200 rounded-2xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100/50 transition-all duration-300 text-slate-800 font-medium shadow-sm hover:shadow-md focus:shadow-lg cursor-pointer appearance-none bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNiA5TDEyIDE1TDE4IDkiIHN0cm9rZT0iIzkyOUE1IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==')] bg-[length:20px] bg-[right_1rem_center] bg-no-repeat pr-12"
+                  required
+                >
+                  {roomTypes.length > 0 ? (
+                    roomTypes.map((roomType) => (
+                      <option key={roomType.id} value={roomType.id}>
+                        {roomType.name}
+                      </option>
+                    ))
+                  ) : (
+                    <option value="">Loading...</option>
+                  )}
+                </select>
+              </div>
+
+              <div className="group">
+                <label className="block text-sm font-semibold text-slate-700 mb-2.5 flex items-center gap-2">
+                  <Sparkles className="w-4 h-4 text-amber-500" />
+                  Status
+                </label>
+                <select
+                  value={formData.status}
+                  onChange={(e) => setFormData({ ...formData, status: e.target.value as any })}
+                  className="w-full px-5 py-3.5 bg-gradient-to-br from-white to-slate-50/50 border-2 border-slate-200 rounded-2xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100/50 transition-all duration-300 text-slate-800 font-medium shadow-sm hover:shadow-md focus:shadow-lg cursor-pointer appearance-none bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNiA5TDEyIDE1TDE4IDkiIHN0cm9rZT0iIzkyOUE1IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==')] bg-[length:20px] bg-[right_1rem_center] bg-no-repeat pr-12"
+                  required
+                >
+                  <option value="available">Available</option>
+                  <option value="occupied">Occupied</option>
+                  <option value="maintenance">Maintenance</option>
+                </select>
+              </div>
+            </div>
+
+            {/* Featured Checkbox - Luxury Style */}
+            <div className="flex items-center gap-4 p-5 sm:p-6 bg-gradient-to-br from-amber-50/50 to-amber-100/30 rounded-2xl border-2 border-amber-200/50 shadow-lg hover:shadow-xl transition-all duration-300 group">
+              <div className="relative">
+                <input
+                  type="checkbox"
+                  id="featured"
+                  checked={formData.featured}
+                  onChange={(e) => setFormData({ ...formData, featured: e.target.checked })}
+                  className="w-6 h-6 sm:w-7 sm:h-7 text-amber-600 bg-white border-2 border-amber-300 rounded-xl focus:ring-4 focus:ring-amber-200 cursor-pointer transition-all duration-300 checked:bg-gradient-to-br checked:from-amber-400 checked:to-amber-600 checked:border-amber-500 shadow-md hover:shadow-lg"
+                />
+                {formData.featured && (
+                  <Crown className="absolute inset-0 m-auto w-4 h-4 sm:w-5 sm:h-5 text-white pointer-events-none" />
+                )}
+              </div>
+              <label htmlFor="featured" className="flex-1 text-sm sm:text-base text-slate-700 cursor-pointer font-semibold flex items-center gap-2 group-hover:text-amber-700 transition-colors">
+                <Crown className="w-5 h-5 text-amber-500" />
+                Featured Room
+                <span className="text-xs text-amber-600 bg-amber-100 px-2 py-1 rounded-lg ml-auto">Premium</span>
+              </label>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+              <div className="group">
+                <label className="block text-sm font-semibold text-slate-700 mb-2.5 flex items-center gap-2">
+                  <Sparkles className="w-4 h-4 text-amber-500" />
+                  Room Price
+                </label>
+                <input
+                  type="number"
+                  step="0.01"
+                  min="0"
+                  value={formData.price}
+                  onChange={(e) => setFormData({ ...formData, price: e.target.value })}
+                  className="w-full px-5 py-3.5 bg-gradient-to-br from-white to-slate-50/50 border-2 border-slate-200 rounded-2xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100/50 transition-all duration-300 text-slate-800 font-medium shadow-sm hover:shadow-md focus:shadow-lg placeholder:text-slate-400"
+                  placeholder="e.g., 150.00"
+                />
+                <p className="text-xs text-slate-500 mt-2 ml-1">
+                  Leave empty to use room type base price
+                </p>
+              </div>
+
+              <div className="group">
+                <label className="block text-sm font-semibold text-slate-700 mb-2.5 flex items-center gap-2">
+                  <Sparkles className="w-4 h-4 text-amber-500" />
+                  Max Guests
+                </label>
+                <input
+                  type="number"
+                  min="1"
+                  value={formData.capacity}
+                  onChange={(e) => setFormData({ ...formData, capacity: e.target.value })}
+                  className="w-full px-5 py-3.5 bg-gradient-to-br from-white to-slate-50/50 border-2 border-slate-200 rounded-2xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100/50 transition-all duration-300 text-slate-800 font-medium shadow-sm hover:shadow-md focus:shadow-lg placeholder:text-slate-400"
+                  placeholder="e.g., 4"
+                />
+                <p className="text-xs text-slate-500 mt-2 ml-1">
+                  Room-specific capacity
+                </p>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+              <div className="group">
+                <label className="block text-sm font-semibold text-slate-700 mb-2.5 flex items-center gap-2">
+                  <Sparkles className="w-4 h-4 text-amber-500" />
+                  Room Size
+                </label>
+                <input
+                  type="text"
+                  value={formData.room_size}
+                  onChange={(e) => setFormData({ ...formData, room_size: e.target.value })}
+                  className="w-full px-5 py-3.5 bg-gradient-to-br from-white to-slate-50/50 border-2 border-slate-200 rounded-2xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100/50 transition-all duration-300 text-slate-800 font-medium shadow-sm hover:shadow-md focus:shadow-lg placeholder:text-slate-400"
+                  placeholder="e.g., 1 Room, 50 sqm"
+                />
+              </div>
+
+              <div className="group">
+                <label className="block text-sm font-semibold text-slate-700 mb-2.5 flex items-center gap-2">
+                  <Sparkles className="w-4 h-4 text-amber-500" />
+                  View
+                </label>
+                <input
+                  type="text"
+                  value={formData.view}
+                  onChange={(e) => setFormData({ ...formData, view: e.target.value })}
+                  className="w-full px-5 py-3.5 bg-gradient-to-br from-white to-slate-50/50 border-2 border-slate-200 rounded-2xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100/50 transition-all duration-300 text-slate-800 font-medium shadow-sm hover:shadow-md focus:shadow-lg placeholder:text-slate-400"
+                  placeholder="e.g., City View, Ocean View"
+                />
+              </div>
+            </div>
+
+            <div className="group">
+              <label className="block text-sm font-semibold text-slate-700 mb-2.5 flex items-center gap-2">
+                <Sparkles className="w-4 h-4 text-amber-500" />
+                Room Description
+              </label>
+              <textarea
+                value={formData.description}
+                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                rows={5}
+                className="w-full px-5 py-4 bg-gradient-to-br from-white to-slate-50/50 border-2 border-slate-200 rounded-2xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100/50 transition-all duration-300 text-slate-800 font-medium shadow-sm hover:shadow-md focus:shadow-lg resize-none placeholder:text-slate-400"
+                placeholder="Enter a detailed description for this room..."
+              />
+              <p className="text-xs text-slate-500 mt-2 ml-1">
+                Leave empty to use room type description
+              </p>
+            </div>
+          </div>
+
+          {/* Amenities Section */}
+          <div className="space-y-6">
+            <div className="flex items-center gap-3 mb-6">
+              <div className="h-10 w-1.5 bg-gradient-to-b from-amber-400 via-amber-500 to-amber-600 rounded-full shadow-lg"></div>
+              <div>
+                <h2 className="text-xl sm:text-2xl font-bold bg-gradient-to-r from-slate-900 to-slate-700 bg-clip-text text-transparent">
+                  Amenities & Features
+                </h2>
+                <p className="text-sm text-slate-500 mt-1">Customize room amenities and special features</p>
+              </div>
+            </div>
+
+            {/* Custom Amenity Input */}
+            <div className="flex flex-col sm:flex-row gap-3">
+              <div className="flex-1">
+                <input
+                  type="text"
+                  value={customAmenityInput}
+                  onChange={(e) => setCustomAmenityInput(e.target.value)}
+                  onKeyPress={(e) => {
+                    if (e.key === 'Enter') {
+                      e.preventDefault();
+                      handleAddCustomAmenity();
+                    }
+                  }}
+                  placeholder="Add custom amenity..."
+                  className="w-full px-5 py-3.5 bg-gradient-to-br from-white to-slate-50/50 border-2 border-slate-200 rounded-2xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100/50 transition-all duration-300 text-slate-800 font-medium shadow-sm hover:shadow-md focus:shadow-lg placeholder:text-slate-400"
+                />
+              </div>
+              <button
+                type="button"
+                onClick={handleAddCustomAmenity}
+                disabled={!customAmenityInput.trim()}
+                className="px-6 py-3.5 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-2xl hover:from-amber-600 hover:to-amber-700 transition-all duration-300 font-semibold shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 transform hover:scale-105 disabled:hover:scale-100"
+              >
+                <Plus className="w-5 h-5" />
+                <span className="hidden sm:inline">Add</span>
+              </button>
+            </div>
+
+            {/* Selected Amenities */}
+            {formData.amenities.length > 0 && (
+              <div className="p-5 bg-gradient-to-br from-amber-50/50 to-amber-100/30 rounded-2xl border-2 border-amber-200/50 shadow-lg">
+                <p className="text-sm font-semibold text-slate-700 mb-4 flex items-center gap-2">
+                  <Check className="w-4 h-4 text-amber-600" />
+                  Selected Amenities ({formData.amenities.length})
+                </p>
+                <div className="flex flex-wrap gap-2.5">
+                  {formData.amenities.map((amenity) => {
+                    const isCustom = !availableAmenities.includes(amenity);
+                    return (
+                      <div
+                        key={amenity}
+                        className="group flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-amber-100 to-amber-50 rounded-xl border border-amber-300 shadow-md hover:shadow-lg transition-all duration-300"
+                      >
+                        <span className="text-sm font-semibold text-amber-800">{amenity}</span>
+                        {isCustom && (
+                          <span className="text-xs font-medium text-amber-700 bg-amber-200/50 px-2 py-0.5 rounded-lg">Custom</span>
+                        )}
+                        <button
+                          type="button"
+                          onClick={() => handleRemoveAmenity(amenity)}
+                          className="ml-1 p-1 rounded-lg text-slate-400 hover:text-red-600 hover:bg-red-50 transition-all duration-200"
+                          title="Remove amenity"
+                        >
+                          <X className="w-4 h-4" />
+                        </button>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+
+            {/* Available Amenities */}
+            <div className="border-2 border-slate-200 rounded-2xl p-4 sm:p-6 max-h-96 overflow-y-auto bg-gradient-to-br from-slate-50/50 to-white shadow-inner custom-scrollbar">
+              {availableAmenities.length === 0 ? (
+                <p className="text-sm text-slate-500 text-center py-8">Loading amenities...</p>
+              ) : (
+                <div className="space-y-3">
+                  <p className="text-sm font-semibold text-slate-700 mb-4 flex items-center gap-2">
+                    <Sparkles className="w-4 h-4 text-amber-500" />
+                    Available Amenities
+                  </p>
+                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-3">
+                    {availableAmenities.map((amenity) => {
+                      const isSelected = formData.amenities.includes(amenity);
+                      const isEditing = editingAmenity?.name === amenity;
+                      return (
+                        <div
+                          key={amenity}
+                          className={`flex items-center gap-3 p-4 rounded-2xl transition-all duration-300 ${
+                            isSelected
+                              ? 'bg-gradient-to-r from-amber-50 to-amber-100/50 border-2 border-amber-400 shadow-lg'
+                              : 'bg-white border-2 border-slate-200 hover:border-amber-300 hover:shadow-md'
+                          }`}
+                        >
+                          <label className="flex items-center gap-3 flex-1 cursor-pointer">
+                            <input
+                              type="checkbox"
+                              checked={isSelected}
+                              onChange={() => toggleAmenity(amenity)}
+                              className="hidden"
+                            />
+                            <div className={`w-6 h-6 rounded-xl border-2 flex items-center justify-center transition-all duration-300 flex-shrink-0 shadow-md ${
+                              isSelected
+                                ? 'bg-gradient-to-br from-amber-400 to-amber-600 border-amber-500 shadow-amber-200'
+                                : 'border-slate-300 bg-white'
+                            }`}>
+                              {isSelected && <Check className="w-4 h-4 text-white font-bold" />}
+                            </div>
+                            {isEditing ? (
+                              <div className="flex items-center gap-2 flex-1">
+                                <input
+                                  type="text"
+                                  value={editingAmenity.newName}
+                                  onChange={(e) => setEditingAmenity({ ...editingAmenity, newName: e.target.value })}
+                                  onKeyPress={(e) => {
+                                    if (e.key === 'Enter') {
+                                      handleSaveAmenityEdit();
+                                    } else if (e.key === 'Escape') {
+                                      setEditingAmenity(null);
+                                    }
+                                  }}
+                                  className="flex-1 px-4 py-2 bg-white border-2 border-amber-400 rounded-xl text-slate-800 text-sm font-medium focus:ring-2 focus:ring-amber-300"
+                                  autoFocus
+                                />
+                                <button
+                                  type="button"
+                                  onClick={handleSaveAmenityEdit}
+                                  className="p-2 rounded-xl bg-green-50 text-green-600 hover:bg-green-100 transition-colors shadow-sm"
+                                  title="Save"
+                                >
+                                  <Check className="w-4 h-4" />
+                                </button>
+                                <button
+                                  type="button"
+                                  onClick={() => setEditingAmenity(null)}
+                                  className="p-2 rounded-xl bg-slate-100 text-slate-600 hover:bg-slate-200 transition-colors shadow-sm"
+                                  title="Cancel"
+                                >
+                                  <X className="w-4 h-4" />
+                                </button>
+                              </div>
+                            ) : (
+                              <span className={`text-sm flex-1 font-medium transition-colors ${
+                                isSelected ? 'text-amber-800' : 'text-slate-700'
+                              }`}>
+                                {amenity}
+                              </span>
+                            )}
+                          </label>
+                          {!isEditing && (
+                            <div className="flex items-center gap-2 flex-shrink-0">
+                              <button
+                                type="button"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  e.preventDefault();
+                                  handleEditAmenity(amenity);
+                                }}
+                                className="p-2.5 rounded-xl bg-blue-50 border border-blue-200 text-blue-600 hover:bg-blue-100 hover:border-blue-300 transition-all duration-200 shadow-sm hover:shadow-md"
+                                title="Edit amenity"
+                              >
+                                <EditIcon className="w-4 h-4" />
+                              </button>
+                              <button
+                                type="button"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  e.preventDefault();
+                                  handleDeleteAmenity(amenity);
+                                }}
+                                className="p-2.5 rounded-xl bg-red-50 border border-red-200 text-red-600 hover:bg-red-100 hover:border-red-300 transition-all duration-200 shadow-sm hover:shadow-md"
+                                title="Delete amenity"
+                              >
+                                <Trash2 className="w-4 h-4" />
+                              </button>
+                            </div>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Room Images Section */}
+          <div className="space-y-6">
+            <div className="flex items-center gap-3 mb-6">
+              <div className="h-10 w-1.5 bg-gradient-to-b from-amber-400 via-amber-500 to-amber-600 rounded-full shadow-lg"></div>
+              <div>
+                <h2 className="text-xl sm:text-2xl font-bold bg-gradient-to-r from-slate-900 to-slate-700 bg-clip-text text-transparent flex items-center gap-2">
+                  <ImageIcon className="w-6 h-6 text-amber-500" />
+                  Room Images
+                </h2>
+                <p className="text-sm text-slate-500 mt-1">Manage room photographs and visuals</p>
+              </div>
+            </div>
+
+            {allImages.length > 0 ? (
+              <div className="mb-6">
+                <p className="text-sm font-semibold text-slate-700 mb-4 flex items-center gap-2">
+                  <ImageIcon className="w-4 h-4 text-amber-500" />
+                  Current Images ({allImages.length})
+                </p>
+                <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
+                  {(() => {
+                    const filteredImages = allImages.filter((img) => {
+                      // Convert to string for comparison
+                      const imgStr = String(img);
+                      // Filter out failed and deleting images
+                      if (failedImageUrls.has(imgStr) || deletingImageUrl === imgStr) {
+                        return false;
+                      }
+                      // Filter out empty or null images
+                      if (!img || imgStr.trim() === '') {
+                        return false;
+                      }
+                      // Check if we can create a valid URL
+                      const imageUrl = normalizeImageUrl(imgStr);
+                      if (!imageUrl) {
+                        console.warn('EditRoomPage - Skipping image with invalid URL:', imgStr);
+                        return false;
+                      }
+                      return true;
+                    });
+                    console.log('EditRoomPage - Filtered images count:', filteredImages.length, 'out of', allImages.length);
+                    return filteredImages;
+                  })()
+                    .map((img, index) => {
+                      // Convert to string for processing
+                      const imgStr = String(img);
+                      const imageUrl = normalizeImageUrl(imgStr);
+                      const normalizedImg = normalizeForComparison(imgStr);
+                      const normalizedRoomImgs = roomImages.map((ri: any) => normalizeForComparison(String(ri || '')));
+                      const isRoomImage = normalizedRoomImgs.includes(normalizedImg);
+                      const isDeleting = deletingImageUrl === imgStr;
+                      const hasFailed = failedImageUrls.has(imgStr);
+
+                      // Safety check - should not happen due to filter, but double-check
+                      if (hasFailed || isDeleting || !imageUrl) {
+                        return null;
+                      }
+
+                      return (
+                        <div key={`${imgStr}-${index}`} className="relative group rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:scale-105">
+                          <div className="aspect-square overflow-hidden bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center">
+                            <img
+                              src={imageUrl}
+                              alt={`Room Image ${index + 1}`}
+                              className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
+                              loading="lazy"
+                              onError={(e) => {
+                                const target = e.target as HTMLImageElement;
+                                // Only handle error once to prevent infinite loop
+                                if (!target.dataset.errorHandled) {
+                                  target.dataset.errorHandled = 'true';
+                                  // Clear the src to prevent further load attempts
+                                  target.src = '';
+                                  // Hide the image element
+                                  target.style.display = 'none';
+                                  // Immediately mark as failed to remove from display
+                                  setFailedImageUrls(prev => {
+                                    const newSet = new Set(prev);
+                                    newSet.add(imgStr);
+                                    return newSet;
+                                  });
+                                  // Stop event propagation to prevent further errors
+                                  e.stopPropagation();
+                                  e.preventDefault();
+                                }
+                              }}
+                              onLoad={() => {
+                                console.log('EditRoomPage - Image loaded successfully:', imageUrl);
+                              }}
+                            />
+                          </div>
+                          {isRoomImage && (
+                            <>
+                              <div className="absolute top-2 left-2 bg-gradient-to-r from-amber-500/90 to-amber-600/90 backdrop-blur-md text-white px-3 py-1.5 rounded-xl text-xs font-semibold opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-lg">
+                                Room Image
+                              </div>
+                              <button
+                                type="button"
+                                onClick={() => handleDeleteImage(imgStr)}
+                                disabled={isDeleting}
+                                className="absolute top-2 right-2 bg-gradient-to-r from-red-500/90 to-red-600/90 backdrop-blur-md text-white p-2.5 rounded-xl opacity-0 group-hover:opacity-100 transition-all duration-300 hover:scale-110 shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
+                              >
+                                {isDeleting ? (
+                                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+                                ) : (
+                                  <X className="w-4 h-4" />
+                                )}
+                              </button>
+                            </>
+                          )}
+                        </div>
+                      );
+                    })}
+                </div>
+              </div>
+            ) : (
+              <div className="mb-6 p-8 sm:p-12 bg-gradient-to-br from-slate-50 to-slate-100/50 rounded-2xl border-2 border-dashed border-slate-300 text-center">
+                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-slate-200 flex items-center justify-center">
+                  <ImageIcon className="w-8 h-8 text-slate-400" />
+                </div>
+                <p className="text-sm sm:text-base text-slate-600 font-medium">
+                  No images uploaded yet
+                </p>
+                <p className="text-xs text-slate-500 mt-1">Upload images below to display them here</p>
+              </div>
+            )}
+
+            {/* Upload Section */}
+            <div className="p-5 sm:p-6 bg-gradient-to-br from-slate-50/50 to-white rounded-2xl border-2 border-slate-200 shadow-lg">
+              <label className="block text-sm font-semibold text-slate-700 mb-4 flex items-center gap-2">
+                <Upload className="w-5 h-5 text-amber-500" />
+                Add New Images
+              </label>
+              <div className="flex flex-col sm:flex-row gap-3 sm:gap-4">
+                <div className="flex-1">
+                  <input
+                    type="file"
+                    accept="image/*"
+                    multiple
+                    onChange={handleFileSelect}
+                    className="w-full text-sm text-slate-600 file:mr-4 file:py-3 file:px-6 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-gradient-to-r file:from-amber-500 file:to-amber-600 file:text-white file:cursor-pointer file:shadow-lg file:hover:shadow-xl file:transition-all file:duration-300 file:transform file:hover:scale-105 bg-white rounded-xl border-2 border-slate-200"
+                  />
+                </div>
+                <button
+                  type="button"
+                  onClick={handleUploadImages}
+                  disabled={selectedFiles.length === 0 || uploadingImages}
+                  className="px-6 sm:px-8 py-3.5 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-xl hover:from-green-600 hover:to-green-700 disabled:from-slate-300 disabled:to-slate-400 disabled:cursor-not-allowed flex items-center justify-center gap-2 font-semibold shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 disabled:hover:scale-100"
+                >
+                  <Upload className="w-5 h-5" />
+                  {uploadingImages ? 'Uploading...' : 'Upload'}
+                </button>
+              </div>
+              {selectedFiles.length > 0 && (
+                <p className="text-sm text-amber-600 font-medium mt-3 flex items-center gap-2">
+                  <Check className="w-4 h-4" />
+                  {selectedFiles.length} file(s) selected
+                </p>
+              )}
+            </div>
+          </div>
+
+          {/* Form Actions - Luxury Buttons */}
+          <div className="flex flex-col sm:flex-row gap-4 pt-6 border-t-2 border-slate-200">
+            <button
+              type="button"
+              onClick={() => navigate('/admin/advanced-rooms')}
+              className="flex-1 px-6 py-4 bg-gradient-to-br from-white to-slate-50 border-2 border-slate-300 text-slate-700 rounded-2xl hover:border-slate-400 hover:from-slate-50 hover:to-slate-100 transition-all duration-300 font-semibold shadow-lg hover:shadow-xl transform hover:scale-105"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="flex-1 px-6 py-4 bg-gradient-to-r from-amber-500 via-amber-600 to-amber-700 text-white rounded-2xl hover:from-amber-600 hover:via-amber-700 hover:to-amber-800 transition-all duration-300 font-bold shadow-xl hover:shadow-2xl transform hover:scale-105 flex items-center justify-center gap-2"
+            >
+              <Check className="w-5 h-5" />
+              Update Room
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default EditRoomPage;
diff --git a/Frontend/src/pages/admin/LoyaltyManagementPage.tsx b/Frontend/src/pages/admin/LoyaltyManagementPage.tsx
index 59e12b74..a0b90e41 100644
--- a/Frontend/src/pages/admin/LoyaltyManagementPage.tsx
+++ b/Frontend/src/pages/admin/LoyaltyManagementPage.tsx
@@ -753,8 +753,9 @@ const LoyaltyManagementPage: React.FC = () => {
 
       {/* Tier Modal */}
       {showTierModal && (
-        <div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-3 sm:p-4 animate-fade-in">
-          <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl max-w-2xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-hidden border border-slate-200/50 animate-scale-in">
+        <div className="fixed inset-0 bg-black/70 backdrop-blur-md z-50 overflow-y-auto p-3 sm:p-4 animate-fade-in">
+          <div className="min-h-full flex items-start justify-center py-8">
+            <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl max-w-2xl w-full my-8 max-h-[calc(100vh-4rem)] overflow-hidden border border-slate-200/50 animate-scale-in">
             <div className="sticky top-0 bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-4 sm:px-6 py-4 sm:py-5 border-b border-slate-700 z-10">
               <div className="flex justify-between items-center">
                 <div>
@@ -776,7 +777,7 @@ const LoyaltyManagementPage: React.FC = () => {
                 </button>
               </div>
             </div>
-            <div className="overflow-y-auto max-h-[calc(95vh-120px)] sm:max-h-[calc(90vh-120px)]">
+            <div className="overflow-y-auto max-h-[calc(100vh-12rem)]">
               <form onSubmit={handleTierSubmit} className="p-4 sm:p-6 space-y-4 sm:space-y-5">
               <div className="grid grid-cols-2 gap-4">
                 <div>
@@ -919,13 +920,15 @@ const LoyaltyManagementPage: React.FC = () => {
               </form>
             </div>
           </div>
+          </div>
         </div>
       )}
 
       {/* Reward Modal */}
       {showRewardModal && (
-        <div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-3 sm:p-4 animate-fade-in">
-          <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl max-w-3xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-hidden border border-slate-200/50 animate-scale-in">
+        <div className="fixed inset-0 bg-black/70 backdrop-blur-md z-50 overflow-y-auto p-3 sm:p-4 animate-fade-in">
+          <div className="min-h-full flex items-start justify-center py-8">
+            <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl max-w-3xl w-full my-8 max-h-[calc(100vh-4rem)] overflow-hidden border border-slate-200/50 animate-scale-in">
             <div className="sticky top-0 bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-4 sm:px-6 py-4 sm:py-5 border-b border-slate-700 z-10">
               <div className="flex justify-between items-center">
                 <div>
@@ -947,7 +950,7 @@ const LoyaltyManagementPage: React.FC = () => {
                 </button>
               </div>
             </div>
-            <div className="overflow-y-auto max-h-[calc(95vh-120px)] sm:max-h-[calc(90vh-120px)]">
+            <div className="overflow-y-auto max-h-[calc(100vh-12rem)]">
               <form onSubmit={handleRewardSubmit} className="p-4 sm:p-6 space-y-4 sm:space-y-5">
               <div className="grid grid-cols-2 gap-4">
                 <div>
@@ -1149,6 +1152,7 @@ const LoyaltyManagementPage: React.FC = () => {
               </form>
             </div>
           </div>
+          </div>
         </div>
       )}
 
diff --git a/Frontend/src/pages/admin/PromotionManagementPage.tsx b/Frontend/src/pages/admin/PromotionManagementPage.tsx
index f4c86ae9..14b259f6 100644
--- a/Frontend/src/pages/admin/PromotionManagementPage.tsx
+++ b/Frontend/src/pages/admin/PromotionManagementPage.tsx
@@ -315,8 +315,9 @@ const PromotionManagementPage: React.FC = () => {
 
       {}
       {showModal && (
-        <div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-4 animate-fade-in">
-          <div className="bg-white rounded-3xl shadow-2xl w-full max-w-3xl max-h-[90vh] overflow-hidden border border-slate-200 animate-scale-in">
+        <div className="fixed inset-0 bg-black/70 backdrop-blur-md z-50 overflow-y-auto p-4 animate-fade-in">
+          <div className="min-h-full flex items-start justify-center py-8">
+            <div className="bg-white rounded-3xl shadow-2xl w-full max-w-3xl my-8 max-h-[calc(100vh-4rem)] overflow-hidden border border-slate-200 animate-scale-in">
             {}
             <div className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-8 py-6 border-b border-slate-700">
               <div className="flex justify-between items-center">
@@ -338,7 +339,7 @@ const PromotionManagementPage: React.FC = () => {
             </div>
             
             {}
-            <div className="p-8 overflow-y-auto max-h-[calc(90vh-120px)] custom-scrollbar">
+            <div className="p-8 overflow-y-auto max-h-[calc(100vh-12rem)] custom-scrollbar">
               <form onSubmit={handleSubmit} className="space-y-6">
                 <div className="grid grid-cols-2 gap-6">
                   <div>
@@ -512,6 +513,8 @@ const PromotionManagementPage: React.FC = () => {
               </form>
             </div>
           </div>
+            </div>
+          </div>
         </div>
       )}
     </div>
diff --git a/Frontend/src/pages/admin/RoomManagementPage.tsx b/Frontend/src/pages/admin/RoomManagementPage.tsx
deleted file mode 100644
index cb66c91c..00000000
--- a/Frontend/src/pages/admin/RoomManagementPage.tsx
+++ /dev/null
@@ -1,1262 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Plus, Search, Edit, Trash2, X, Upload, Image as ImageIcon, Check } from 'lucide-react';
-import roomService, { Room } from '../../features/rooms/services/roomService';
-import { toast } from 'react-toastify';
-import Loading from '../../shared/components/Loading';
-import Pagination from '../../shared/components/Pagination';
-import apiClient from '../../shared/services/apiClient';
-import { useFormatCurrency } from '../../features/payments/hooks/useFormatCurrency';
-import { logger } from '../../shared/utils/logger';
-import { useRoomContext } from '../../features/rooms/contexts/RoomContext';
-
-const RoomManagementPage: React.FC = () => {
-  const { formatCurrency } = useFormatCurrency();
-  const {
-    rooms: contextRooms,
-    roomsLoading,
-    refreshRooms,
-    updateRoom: contextUpdateRoom,
-    deleteRoom: contextDeleteRoom,
-    createRoom: contextCreateRoom,
-    setRoomFilters,
-    setRoomPage,
-  } = useRoomContext();
-  
-  // Use context rooms, but filter/paginate locally for this page's display
-  const [rooms, setRooms] = useState<Room[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [showModal, setShowModal] = useState(false);
-  const [editingRoom, setEditingRoom] = useState<Room | null>(null);
-  const [selectedRooms, setSelectedRooms] = useState<number[]>([]);
-  const [filters, setFilters] = useState({
-    search: '',
-    status: '',
-    type: '',
-  });
-  const [currentPage, setCurrentPage] = useState(1);
-  const [totalPages, setTotalPages] = useState(1);
-  const [totalItems, setTotalItems] = useState(0);
-  const itemsPerPage = 5;
-
-  const [formData, setFormData] = useState({
-    room_number: '',
-    floor: 1,
-    room_type_id: 1,
-    status: 'available' as 'available' | 'occupied' | 'maintenance',
-    featured: false,
-    price: '',
-    description: '',
-    capacity: '',
-    room_size: '',
-    view: '',
-    amenities: [] as string[],
-  });
-  
-  const [availableAmenities, setAvailableAmenities] = useState<string[]>([]);
-  const [roomTypes, setRoomTypes] = useState<Array<{ id: number; name: string }>>([]);
-  const [uploadingImages, setUploadingImages] = useState(false);
-  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
-
-  // Sync local filters with context
-  useEffect(() => {
-    setRoomFilters(filters);
-  }, [filters, setRoomFilters]);
-
-  // Sync local page with context
-  useEffect(() => {
-    setRoomPage(currentPage);
-  }, [currentPage, setRoomPage]);
-
-  // Update local rooms from context and apply local pagination
-  useEffect(() => {
-    if (contextRooms.length > 0) {
-      // Apply local filters
-      let filteredRooms = contextRooms.filter((room) => {
-        const matchesSearch = !filters.search || 
-          room.room_number.toLowerCase().includes(filters.search.toLowerCase()) ||
-          room.room_type?.name.toLowerCase().includes(filters.search.toLowerCase());
-        const matchesStatus = !filters.status || room.status === filters.status;
-        const matchesType = !filters.type || room.room_type?.name === filters.type;
-        return matchesSearch && matchesStatus && matchesType;
-      });
-
-      // Apply pagination
-      const startIndex = (currentPage - 1) * itemsPerPage;
-      const endIndex = startIndex + itemsPerPage;
-      const paginatedRooms = filteredRooms.slice(startIndex, endIndex);
-
-      setRooms(paginatedRooms);
-      setTotalPages(Math.ceil(filteredRooms.length / itemsPerPage));
-      setTotalItems(filteredRooms.length);
-      setLoading(false);
-    } else if (!roomsLoading) {
-      setLoading(false);
-    } else {
-      setLoading(roomsLoading);
-    }
-  }, [contextRooms, filters, currentPage, itemsPerPage, roomsLoading]);
-
-  useEffect(() => {
-    setCurrentPage(1);
-    setSelectedRooms([]);
-  }, [filters]);
-
-  useEffect(() => {
-    fetchAvailableAmenities();
-  }, []);
-  
-  
-  useEffect(() => {
-    const fetchAllRoomTypes = async () => {
-      try {
-        
-        const response = await roomService.getRooms({ limit: 100, page: 1 });
-        const allUniqueRoomTypes = new Map<number, { id: number; name: string }>();
-        response.data.rooms.forEach((room: Room) => {
-          if (room.room_type && !allUniqueRoomTypes.has(room.room_type.id)) {
-            allUniqueRoomTypes.set(room.room_type.id, {
-              id: room.room_type.id,
-              name: room.room_type.name,
-            });
-          }
-        });
-        
-        
-        if (response.data.pagination && response.data.pagination.totalPages > 1) {
-          const totalPages = response.data.pagination.totalPages;
-          for (let page = 2; page <= totalPages; page++) {
-            try {
-              const pageResponse = await roomService.getRooms({ limit: 100, page });
-              pageResponse.data.rooms.forEach((room: Room) => {
-                if (room.room_type && !allUniqueRoomTypes.has(room.room_type.id)) {
-                  allUniqueRoomTypes.set(room.room_type.id, {
-                    id: room.room_type.id,
-                    name: room.room_type.name,
-                  });
-                }
-              });
-            } catch (err) {
-              logger.error(`Failed to fetch page ${page}`, err);
-            }
-          }
-        }
-        
-        if (allUniqueRoomTypes.size > 0) {
-          const roomTypesList = Array.from(allUniqueRoomTypes.values());
-          setRoomTypes(roomTypesList);
-          
-          if (!editingRoom && formData.room_type_id === 1 && roomTypesList.length > 0) {
-            setFormData(prev => ({ ...prev, room_type_id: roomTypesList[0].id }));
-          }
-        }
-      } catch (err) {
-        logger.error('Failed to fetch room types', err);
-      }
-    };
-    fetchAllRoomTypes();
-  }, []);
-
-  const fetchAvailableAmenities = async () => {
-    try {
-      const response = await roomService.getAmenities();
-      if (response.data?.amenities) {
-        setAvailableAmenities(response.data.amenities);
-      }
-    } catch (error) {
-      logger.error('Failed to fetch amenities', error);
-    }
-  };
-
-  // Extract unique room types from context rooms
-  useEffect(() => {
-    if (contextRooms.length > 0) {
-      const uniqueRoomTypes = new Map<number, { id: number; name: string }>();
-      contextRooms.forEach((room: Room) => {
-        if (room.room_type && !uniqueRoomTypes.has(room.room_type.id)) {
-          uniqueRoomTypes.set(room.room_type.id, {
-            id: room.room_type.id,
-            name: room.room_type.name,
-          });
-        }
-      });
-      setRoomTypes(Array.from(uniqueRoomTypes.values()));
-    }
-  }, [contextRooms]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    try {
-      if (editingRoom) {
-        
-        const updateData = {
-          ...formData,
-          price: formData.price ? parseFloat(formData.price) : undefined,
-          description: formData.description || undefined,
-          capacity: formData.capacity ? parseInt(formData.capacity) : undefined,
-          room_size: formData.room_size || undefined,
-          view: formData.view || undefined,
-          amenities: Array.isArray(formData.amenities) ? formData.amenities : [],
-        };
-        await contextUpdateRoom(editingRoom.id, updateData);
-        
-        // Refresh room details for editing
-        try {
-          const updatedRoom = await roomService.getRoomByNumber(editingRoom.room_number);
-          setEditingRoom(updatedRoom.data.room);
-        } catch (err) {
-          logger.error('Failed to refresh room data', err);
-        }
-      } else {
-        
-        const createData = {
-          ...formData,
-          price: formData.price ? parseFloat(formData.price) : undefined,
-          description: formData.description || undefined,
-          capacity: formData.capacity ? parseInt(formData.capacity) : undefined,
-          room_size: formData.room_size || undefined,
-          view: formData.view || undefined,
-          amenities: Array.isArray(formData.amenities) ? formData.amenities : [],
-        };
-        const response = await roomService.createRoom(createData);
-        
-        if (response.data?.room) {
-          
-          if (selectedFiles.length > 0) {
-            try {
-              setUploadingImages(true);
-              const uploadFormData = new FormData();
-              selectedFiles.forEach(file => {
-                uploadFormData.append('images', file);
-              });
-              
-              await apiClient.post(`/rooms/${response.data.room.id}/images`, uploadFormData, {
-                headers: {
-                  'Content-Type': 'multipart/form-data',
-                },
-              });
-              
-              toast.success('Images uploaded successfully');
-              setSelectedFiles([]);
-              
-              
-              const updatedRoom = await roomService.getRoomByNumber(response.data.room.room_number);
-              setEditingRoom(updatedRoom.data.room);
-              
-            } catch (uploadError: any) {
-              toast.error(uploadError.response?.data?.message || 'Room created but failed to upload images');
-              
-              const updatedRoom = await roomService.getRoomByNumber(response.data.room.room_number);
-              setEditingRoom(updatedRoom.data.room);
-            } finally {
-              setUploadingImages(false);
-            }
-          } else {
-            
-            const updatedRoom = await roomService.getRoomByNumber(response.data.room.room_number);
-            setEditingRoom(updatedRoom.data.room);
-          }
-          
-          
-          setFormData({
-            room_number: response.data.room.room_number,
-            floor: response.data.room.floor,
-            room_type_id: response.data.room.room_type_id,
-            status: response.data.room.status,
-            featured: response.data.room.featured,
-            price: response.data.room.price?.toString() || '',
-            description: response.data.room.description || '',
-            capacity: response.data.room.capacity?.toString() || '',
-            room_size: response.data.room.room_size || '',
-            view: response.data.room.view || '',
-            amenities: response.data.room.amenities || [],
-          });
-          
-          
-          await contextCreateRoom(createData);
-          
-          return;
-        }
-      }
-      
-      setShowModal(false);
-      resetForm();
-      await refreshRooms();
-    } catch (error: any) {
-      toast.error(error.response?.data?.message || 'An error occurred');
-    }
-  };
-
-  const handleEdit = async (room: Room) => {
-    setEditingRoom(room);
-    
-    
-    let amenitiesArray: string[] = [];
-    const roomAmenities = room.amenities as string[] | string | undefined;
-    if (roomAmenities) {
-      if (Array.isArray(roomAmenities)) {
-        amenitiesArray = roomAmenities;
-      } else if (typeof roomAmenities === 'string') {
-        try {
-          const parsed = JSON.parse(roomAmenities);
-          amenitiesArray = Array.isArray(parsed) ? parsed : [];
-        } catch {
-          amenitiesArray = roomAmenities.split(',').map((a: string) => a.trim()).filter(Boolean);
-        }
-      }
-    }
-    
-    
-    setFormData({
-      room_number: room.room_number,
-      floor: room.floor,
-      room_type_id: room.room_type_id,
-      status: room.status,
-      featured: room.featured,
-      price: room.price?.toString() || '',
-      description: room.description || '',
-      capacity: room.capacity?.toString() || '',
-      room_size: room.room_size || '',
-      view: room.view || '',
-      amenities: amenitiesArray,
-    });
-    
-    setShowModal(true);
-    
-    
-    try {
-      const fullRoom = await roomService.getRoomByNumber(room.room_number);
-      const roomData = fullRoom.data.room;
-      
-      
-      let updatedAmenitiesArray: string[] = [];
-      const roomDataAmenities = roomData.amenities as string[] | string | undefined;
-      if (roomDataAmenities) {
-        if (Array.isArray(roomDataAmenities)) {
-          updatedAmenitiesArray = roomDataAmenities;
-        } else if (typeof roomDataAmenities === 'string') {
-          try {
-            const parsed = JSON.parse(roomDataAmenities);
-            updatedAmenitiesArray = Array.isArray(parsed) ? parsed : [];
-          } catch {
-            
-            updatedAmenitiesArray = roomDataAmenities.split(',').map((a: string) => a.trim()).filter(Boolean);
-          }
-        }
-      }
-      
-      
-      setFormData({
-        room_number: roomData.room_number,
-        floor: roomData.floor,
-        room_type_id: roomData.room_type_id,
-        status: roomData.status,
-        featured: roomData.featured,
-        price: roomData.price?.toString() || '',
-        description: roomData.description || '',
-        capacity: roomData.capacity?.toString() || '',
-        room_size: roomData.room_size || '',
-        view: roomData.view || '',
-        amenities: updatedAmenitiesArray,
-      });
-      
-      
-      setEditingRoom(roomData);
-    } catch (error) {
-      logger.error('Failed to fetch full room details', error);
-      
-    }
-  };
-
-  const handleDelete = async (id: number) => {
-    if (!window.confirm('Are you sure you want to delete this room?')) return;
-    
-    try {
-      await contextDeleteRoom(id);
-      setSelectedRooms(selectedRooms.filter(roomId => roomId !== id));
-    } catch (error: any) {
-      // Error already handled in context
-    }
-  };
-
-  const handleBulkDelete = async () => {
-    if (selectedRooms.length === 0) {
-      toast.warning('Please select at least one room to delete');
-      return;
-    }
-    
-    if (!window.confirm(`Are you sure you want to delete ${selectedRooms.length} room(s)?`)) return;
-    
-    try {
-      await roomService.bulkDeleteRooms(selectedRooms);
-      toast.success(`Successfully deleted ${selectedRooms.length} room(s)`);
-      setSelectedRooms([]);
-      await refreshRooms();
-    } catch (error: any) {
-      toast.error(error.response?.data?.message || error.response?.data?.detail || 'Unable to delete rooms');
-    }
-  };
-
-  const handleSelectRoom = (roomId: number) => {
-    setSelectedRooms(prev => 
-      prev.includes(roomId) 
-        ? prev.filter(id => id !== roomId)
-        : [...prev, roomId]
-    );
-  };
-
-  const handleSelectAll = () => {
-    if (selectedRooms.length === rooms.length) {
-      setSelectedRooms([]);
-    } else {
-      setSelectedRooms(rooms.map(room => room.id));
-    }
-  };
-
-  const resetForm = () => {
-    setEditingRoom(null);
-    setFormData({
-      room_number: '',
-      floor: 1,
-      room_type_id: 1,
-      status: 'available',
-      featured: false,
-      price: '',
-      description: '',
-      capacity: '',
-      room_size: '',
-      view: '',
-      amenities: [],
-    });
-    setSelectedFiles([]);
-    setUploadingImages(false);
-  };
-
-  const toggleAmenity = (amenity: string) => {
-    setFormData(prev => ({
-      ...prev,
-      amenities: prev.amenities.includes(amenity)
-        ? prev.amenities.filter(a => a !== amenity)
-        : [...prev.amenities, amenity]
-    }));
-  };
-
-  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files) {
-      const files = Array.from(e.target.files);
-      setSelectedFiles(files);
-    }
-  };
-
-  const handleUploadImages = async () => {
-    if (!editingRoom || selectedFiles.length === 0) return;
-
-    try {
-      setUploadingImages(true);
-      const formData = new FormData();
-      selectedFiles.forEach(file => {
-        formData.append('images', file);
-      });
-
-      await apiClient.post(`/rooms/${editingRoom.id}/images`, formData, {
-        headers: {
-          'Content-Type': 'multipart/form-data',
-        },
-      });
-
-      toast.success('Images uploaded successfully');
-      setSelectedFiles([]);
-      await refreshRooms();
-      
-      
-      const response = await roomService.getRoomByNumber(editingRoom.room_number);
-      setEditingRoom(response.data.room);
-    } catch (error: any) {
-      toast.error(error.response?.data?.message || 'Unable to upload images');
-    } finally {
-      setUploadingImages(false);
-    }
-  };
-
-  const handleDeleteImage = async (imageUrl: string) => {
-    if (!editingRoom) return;
-    if (!window.confirm('Are you sure you want to delete this image?')) return;
-
-    try {
-      
-      
-      let imagePath = imageUrl;
-      if (imageUrl.startsWith('http://') || imageUrl.startsWith('https://')) {
-        
-        try {
-          const url = new URL(imageUrl);
-          imagePath = url.pathname;
-        } catch (e) {
-          
-          const match = imageUrl.match(/(\/uploads\/.*)/);
-          imagePath = match ? match[1] : imageUrl;
-        }
-      }
-
-      
-      await apiClient.delete(`/rooms/${editingRoom.id}/images`, {
-        params: { image_url: imagePath },
-      });
-
-      toast.success('Image deleted successfully');
-      await refreshRooms();
-      
-      
-      const response = await roomService.getRoomByNumber(editingRoom.room_number);
-      setEditingRoom(response.data.room);
-    } catch (error: any) {
-      logger.error('Error deleting image', error);
-      toast.error(error.response?.data?.message || error.response?.data?.detail || 'Unable to delete image');
-    }
-  };
-
-  const getStatusBadge = (status: string) => {
-    const badges: Record<string, { bg: string; text: string; label: string; border: string }> = {
-      available: { 
-        bg: 'bg-gradient-to-r from-emerald-50 to-green-50', 
-        text: 'text-emerald-800', 
-        label: 'Available',
-        border: 'border-emerald-200'
-      },
-      occupied: { 
-        bg: 'bg-gradient-to-r from-blue-50 to-indigo-50', 
-        text: 'text-blue-800', 
-        label: 'Occupied',
-        border: 'border-blue-200'
-      },
-      maintenance: { 
-        bg: 'bg-gradient-to-r from-amber-50 to-yellow-50', 
-        text: 'text-amber-800', 
-        label: 'Maintenance',
-        border: 'border-amber-200'
-      },
-    };
-    const badge = badges[status] || badges.available;
-    return (
-      <span className={`px-4 py-1.5 rounded-full text-xs font-semibold border shadow-sm ${badge.bg} ${badge.text} ${badge.border}`}>
-        {badge.label}
-      </span>
-    );
-  };
-
-  if (loading) {
-    return <Loading />;
-  }
-
-  return (
-    <div className="space-y-4 sm:space-y-6 md:space-y-8 bg-gradient-to-br from-slate-50 via-white to-slate-50 min-h-screen -m-3 sm:-m-4 md:-m-6 p-4 sm:p-6 md:p-8">
-      {}
-      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 sm:gap-4 animate-fade-in">
-        <div>
-          <div className="flex items-center gap-2 sm:gap-3 mb-2">
-            <div className="h-1 w-12 sm:w-16 bg-gradient-to-r from-amber-400 to-amber-600 rounded-full"></div>
-            <h1 className="text-xl sm:text-2xl md:text-2xl font-bold bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 bg-clip-text text-transparent tracking-tight">
-              Room Management
-            </h1>
-          </div>
-          <p className="text-slate-600 mt-2 sm:mt-3 text-xs sm:text-sm md:text-sm font-light">Manage hotel room information</p>
-        </div>
-        <div className="flex flex-col sm:flex-row gap-2 sm:gap-3 w-full sm:w-auto">
-          {selectedRooms.length > 0 && (
-            <button
-              onClick={handleBulkDelete}
-              className="flex items-center justify-center gap-2 px-4 sm:px-6 py-2 sm:py-3 bg-gradient-to-r from-rose-500 to-rose-600 text-white rounded-lg sm:rounded-xl font-semibold hover:from-rose-600 hover:to-rose-700 transition-all duration-200 shadow-lg hover:shadow-xl text-xs sm:text-sm w-full sm:w-auto"
-            >
-              <Trash2 className="w-4 h-4 sm:w-5 sm:h-5" />
-              Delete Selected ({selectedRooms.length})
-            </button>
-          )}
-          <button
-            onClick={() => {
-              resetForm();
-              setShowModal(true);
-            }}
-            className="flex items-center justify-center gap-2 px-4 sm:px-6 py-2 sm:py-3 bg-gradient-to-r from-amber-500 to-amber-600 text-white rounded-lg sm:rounded-xl font-semibold hover:from-amber-600 hover:to-amber-700 transition-all duration-200 shadow-lg hover:shadow-xl text-xs sm:text-sm w-full sm:w-auto"
-          >
-            <Plus className="w-4 h-4 sm:w-5 sm:h-5" />
-            Add Room
-          </button>
-        </div>
-      </div>
-
-      {}
-      <div className="bg-white/80 backdrop-blur-sm rounded-xl sm:rounded-2xl shadow-xl border border-slate-200/60 p-4 sm:p-5 md:p-6 animate-fade-in" style={{ animationDelay: '0.1s' }}>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
-          <div className="relative group">
-            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5 group-focus-within:text-amber-500 transition-colors" />
-            <input
-              type="text"
-              placeholder="Search rooms..."
-              value={filters.search}
-              onChange={(e) => setFilters({ ...filters, search: e.target.value })}
-              className="w-full pl-12 pr-4 py-3.5 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 placeholder-slate-400 font-medium shadow-sm hover:shadow-md"
-            />
-          </div>
-          <select
-            value={filters.status}
-            onChange={(e) => setFilters({ ...filters, status: e.target.value })}
-            className="px-4 py-3.5 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm hover:shadow-md cursor-pointer"
-          >
-            <option value="">All Statuses</option>
-            <option value="available">Available</option>
-            <option value="occupied">Occupied</option>
-            <option value="maintenance">Maintenance</option>
-          </select>
-          <select
-            value={filters.type}
-            onChange={(e) => setFilters({ ...filters, type: e.target.value })}
-            className="px-4 py-3.5 bg-white border-2 border-slate-200 rounded-xl focus:border-amber-400 focus:ring-4 focus:ring-amber-100 transition-all duration-200 text-slate-700 font-medium shadow-sm hover:shadow-md cursor-pointer"
-          >
-            <option value="">All Room Types</option>
-            {roomTypes.map((roomType) => (
-              <option key={roomType.id} value={roomType.name}>
-                {roomType.name}
-              </option>
-            ))}
-          </select>
-        </div>
-      </div>
-
-      {}
-      <div className="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl border border-slate-200/60 overflow-hidden animate-fade-in" style={{ animationDelay: '0.2s' }}>
-        <div className="overflow-x-auto">
-          <table className="w-full">
-            <thead>
-              <tr className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900">
-                <th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700 w-12">
-                  <input
-                    type="checkbox"
-                    checked={rooms.length > 0 && selectedRooms.length === rooms.length}
-                    onChange={handleSelectAll}
-                    title="Select all rooms"
-                    className="w-5 h-5 text-amber-600 bg-slate-700 border-slate-600 rounded focus:ring-amber-500 cursor-pointer"
-                  />
-                </th>
-                <th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">
-                  Room Number
-                </th>
-                <th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">
-                  Room Type
-                </th>
-                <th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">
-                  Floor
-                </th>
-                <th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">
-                  Price
-                </th>
-                <th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">
-                  Status
-                </th>
-                <th className="px-8 py-5 text-left text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">
-                  Featured
-                </th>
-                <th className="px-8 py-5 text-right text-xs font-bold text-amber-100 uppercase tracking-wider border-b border-slate-700">
-                  Actions
-                </th>
-              </tr>
-            </thead>
-            <tbody className="bg-white divide-y divide-slate-100">
-              {rooms.map((room, index) => (
-                <tr 
-                  key={room.id} 
-                  className={`hover:bg-gradient-to-r hover:from-amber-50/30 hover:to-yellow-50/30 transition-all duration-200 group border-b border-slate-100 ${selectedRooms.includes(room.id) ? 'bg-amber-50/50' : ''}`}
-                  style={{ animationDelay: `${index * 0.05}s` }}
-                >
-                  <td className="px-8 py-5 whitespace-nowrap">
-                    <input
-                      type="checkbox"
-                      checked={selectedRooms.includes(room.id)}
-                      onChange={() => handleSelectRoom(room.id)}
-                      className="w-5 h-5 text-amber-600 bg-white border-slate-300 rounded focus:ring-amber-500 cursor-pointer"
-                      title={`Select room ${room.room_number}`}
-                    />
-                  </td>
-                  <td className="px-8 py-5 whitespace-nowrap">
-                    <div className="text-sm font-bold text-slate-900 font-mono">{room.room_number}</div>
-                  </td>
-                  <td className="px-8 py-5 whitespace-nowrap">
-                    <div className="text-sm font-medium text-slate-900">{room.room_type?.name || 'N/A'}</div>
-                  </td>
-                  <td className="px-8 py-5 whitespace-nowrap">
-                    <div className="text-sm text-slate-700">Floor {room.floor}</div>
-                  </td>
-                  <td className="px-8 py-5 whitespace-nowrap">
-                    <div className="text-sm font-bold bg-gradient-to-r from-emerald-600 to-emerald-700 bg-clip-text text-transparent">
-                      {formatCurrency(room.price || room.room_type?.base_price || 0)}
-                    </div>
-                  </td>
-                  <td className="px-8 py-5 whitespace-nowrap">
-                    {getStatusBadge(room.status)}
-                  </td>
-                  <td className="px-8 py-5 whitespace-nowrap">
-                    {room.featured ? (
-                      <span className="text-amber-500 text-lg">⭐</span>
-                    ) : (
-                      <span className="text-slate-400">-</span>
-                    )}
-                  </td>
-                  <td className="px-8 py-5 whitespace-nowrap text-right">
-                    <div className="flex items-center justify-end gap-2">
-                      <button
-                        onClick={() => handleEdit(room)}
-                        className="p-2 rounded-lg text-blue-600 hover:text-blue-700 hover:bg-blue-50 transition-all duration-200 shadow-sm hover:shadow-md border border-blue-200 hover:border-blue-300"
-                        title="Edit"
-                      >
-                        <Edit className="w-5 h-5" />
-                      </button>
-                      <button
-                        onClick={() => handleDelete(room.id)}
-                        className="p-2 rounded-lg text-rose-600 hover:text-rose-700 hover:bg-rose-50 transition-all duration-200 shadow-sm hover:shadow-md border border-rose-200 hover:border-rose-300"
-                        title="Delete"
-                      >
-                        <Trash2 className="w-5 h-5" />
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      {}
-      <Pagination
-        currentPage={currentPage}
-        totalPages={totalPages}
-        onPageChange={setCurrentPage}
-        totalItems={totalItems}
-        itemsPerPage={itemsPerPage}
-      />
-
-      {}
-      {showModal && (
-        <div className="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-          <div className="bg-gradient-to-br from-[#1a1a1a] via-[#0f0f0f] to-[#1a1a1a] 
-            rounded-xl border border-[#d4af37]/30 
-            backdrop-blur-xl shadow-2xl shadow-[#d4af37]/20 
-            p-8 w-full max-w-4xl max-h-[90vh] overflow-y-auto custom-scrollbar">
-            
-            {}
-            <div className="flex justify-between items-center mb-6 pb-6 border-b border-[#d4af37]/20">
-              <div>
-                <h2 className="text-3xl font-serif font-semibold 
-                  bg-gradient-to-r from-white via-[#d4af37] to-white 
-                  bg-clip-text text-transparent tracking-wide">
-                  {editingRoom ? 'Update Room' : 'Add New Room'}
-                </h2>
-                <p className="text-gray-400 text-sm mt-1 font-light">
-                  {editingRoom ? 'Modify room details and amenities' : 'Create a new luxurious room'}
-                </p>
-              </div>
-              <button 
-                onClick={() => setShowModal(false)}
-                className="p-2 hover:bg-[#d4af37]/10 rounded-lg transition-colors 
-                  border border-[#d4af37]/20 hover:border-[#d4af37]/40"
-              >
-                <X className="w-6 h-6 text-[#d4af37] hover:text-white transition-colors" />
-              </button>
-            </div>
-            
-            <form onSubmit={handleSubmit} className="space-y-6">
-              {}
-              <div className="space-y-4">
-                <h3 className="text-lg font-serif font-semibold text-[#d4af37] mb-4 flex items-center gap-2">
-                  <div className="w-1 h-6 bg-gradient-to-b from-[#d4af37] to-[#c9a227]" />
-                  Basic Information
-                </h3>
-                
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">
-                      Room Number
-                    </label>
-                    <input
-                      type="text"
-                      value={formData.room_number}
-                      onChange={(e) => setFormData({ ...formData, room_number: e.target.value })}
-                      className="w-full px-4 py-3 bg-[#0a0a0a] border border-[#d4af37]/20 
-                        rounded-lg text-white placeholder-gray-500
-                        focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37] 
-                        transition-all duration-300"
-                      placeholder="e.g., 1001"
-                      required
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">
-                      Floor
-                    </label>
-                    <input
-                      type="number"
-                      value={formData.floor}
-                      onChange={(e) => setFormData({ ...formData, floor: parseInt(e.target.value) })}
-                      className="w-full px-4 py-3 bg-[#0a0a0a] border border-[#d4af37]/20 
-                        rounded-lg text-white placeholder-gray-500
-                        focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37] 
-                        transition-all duration-300"
-                      required
-                      min="1"
-                    />
-                  </div>
-                </div>
-                
-                <div>
-                  <label className="block text-sm font-medium text-gray-300 mb-2">
-                    Room Type
-                  </label>
-                  <select
-                    value={formData.room_type_id}
-                    onChange={(e) => setFormData({ ...formData, room_type_id: parseInt(e.target.value) })}
-                    className="w-full px-4 py-3 bg-[#0a0a0a] border border-[#d4af37]/20 
-                      rounded-lg text-white
-                      focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37] 
-                      transition-all duration-300"
-                    required
-                  >
-                    {roomTypes.length > 0 ? (
-                      roomTypes.map((roomType) => (
-                        <option key={roomType.id} value={roomType.id} className="bg-[#1a1a1a]">
-                          {roomType.name}
-                        </option>
-                      ))
-                    ) : (
-                      <option value="" className="bg-[#1a1a1a]">Loading...</option>
-                    )}
-                  </select>
-                </div>
-                
-                <div>
-                  <label className="block text-sm font-medium text-gray-300 mb-2">
-                    Status
-                  </label>
-                  <select
-                    value={formData.status}
-                    onChange={(e) => setFormData({ ...formData, status: e.target.value as any })}
-                    className="w-full px-4 py-3 bg-[#0a0a0a] border border-[#d4af37]/20 
-                      rounded-lg text-white
-                      focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37] 
-                      transition-all duration-300"
-                    required
-                  >
-                    <option value="available" className="bg-[#1a1a1a]">Available</option>
-                    <option value="occupied" className="bg-[#1a1a1a]">Occupied</option>
-                    <option value="maintenance" className="bg-[#1a1a1a]">Maintenance</option>
-                  </select>
-                </div>
-                
-                <div className="flex items-center gap-3 p-4 bg-[#0a0a0a] rounded-lg border border-[#d4af37]/20">
-                  <input
-                    type="checkbox"
-                    id="featured"
-                    checked={formData.featured}
-                    onChange={(e) => setFormData({ ...formData, featured: e.target.checked })}
-                    className="w-5 h-5 text-[#d4af37] bg-[#1a1a1a] border-[#d4af37]/30 
-                      rounded focus:ring-[#d4af37]/50 focus:ring-2 
-                      cursor-pointer transition-all"
-                  />
-                  <label htmlFor="featured" className="text-sm text-gray-300 cursor-pointer font-medium">
-                    Featured Room
-                  </label>
-                </div>
-                
-                <div>
-                  <label className="block text-sm font-medium text-gray-300 mb-2">
-                    Room Price
-                  </label>
-                  <input
-                    type="number"
-                    step="0.01"
-                    min="0"
-                    value={formData.price}
-                    onChange={(e) => setFormData({ ...formData, price: e.target.value })}
-                    className="w-full px-4 py-3 bg-[#0a0a0a] border border-[#d4af37]/20 
-                      rounded-lg text-white placeholder-gray-500
-                      focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37] 
-                      transition-all duration-300"
-                    placeholder="e.g., 150.00"
-                  />
-                  <p className="text-xs text-gray-400 mt-1 font-light">
-                    This is the actual price for this room. If left empty, the room type base price will be used as a fallback.
-                  </p>
-                </div>
-                
-                <div>
-                  <label className="block text-sm font-medium text-gray-300 mb-2">
-                    Room Description
-                  </label>
-                  <textarea
-                    value={formData.description}
-                    onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-                    rows={4}
-                    className="w-full px-4 py-3 bg-[#0a0a0a] border border-[#d4af37]/20 
-                      rounded-lg text-white placeholder-gray-500
-                      focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37] 
-                      transition-all duration-300 resize-none"
-                    placeholder="Enter the actual description for this specific room..."
-                  />
-                  <p className="text-xs text-gray-400 mt-1 font-light">
-                    This is the actual description shown for this room. If left empty, the room type description will be used as a fallback.
-                  </p>
-                </div>
-                
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">
-                      Max Guests (Capacity)
-                    </label>
-                    <input
-                      type="number"
-                      min="1"
-                      value={formData.capacity}
-                      onChange={(e) => setFormData({ ...formData, capacity: e.target.value })}
-                      className="w-full px-4 py-3 bg-[#0a0a0a] border border-[#d4af37]/20 
-                        rounded-lg text-white placeholder-gray-500
-                        focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37] 
-                        transition-all duration-300"
-                      placeholder="e.g., 4"
-                    />
-                    <p className="text-xs text-gray-400 mt-1 font-light">
-                      Room-specific capacity. If left empty, room type capacity will be used.
-                    </p>
-                  </div>
-                  
-                  <div>
-                    <label className="block text-sm font-medium text-gray-300 mb-2">
-                      Room Size
-                    </label>
-                    <input
-                      type="text"
-                      value={formData.room_size}
-                      onChange={(e) => setFormData({ ...formData, room_size: e.target.value })}
-                      className="w-full px-4 py-3 bg-[#0a0a0a] border border-[#d4af37]/20 
-                        rounded-lg text-white placeholder-gray-500
-                        focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37] 
-                        transition-all duration-300"
-                      placeholder="e.g., 1 Room, 50 sqm"
-                    />
-                    <p className="text-xs text-gray-400 mt-1 font-light">
-                      Room size information (e.g., "1 Room", "50 sqm")
-                    </p>
-                  </div>
-                </div>
-                
-                <div>
-                  <label className="block text-sm font-medium text-gray-300 mb-2">
-                    View
-                  </label>
-                  <input
-                    type="text"
-                    value={formData.view}
-                    onChange={(e) => setFormData({ ...formData, view: e.target.value })}
-                    className="w-full px-4 py-3 bg-[#0a0a0a] border border-[#d4af37]/20 
-                      rounded-lg text-white placeholder-gray-500
-                      focus:ring-2 focus:ring-[#d4af37]/50 focus:border-[#d4af37] 
-                      transition-all duration-300"
-                    placeholder="e.g., City View, Ocean View, Mountain View"
-                  />
-                  <p className="text-xs text-gray-400 mt-1 font-light">
-                    The view from this room (e.g., "City View", "Ocean View")
-                  </p>
-                </div>
-              </div>
-
-              {}
-              <div className="space-y-4">
-                <h3 className="text-lg font-serif font-semibold text-[#d4af37] mb-4 flex items-center gap-2">
-                  <div className="w-1 h-6 bg-gradient-to-b from-[#d4af37] to-[#c9a227]" />
-                  Amenities & Features
-                </h3>
-                
-                <div className="border border-[#d4af37]/20 rounded-lg p-4 
-                  max-h-80 overflow-y-auto bg-[#0a0a0a]/50 
-                  backdrop-blur-sm custom-scrollbar">
-                  {availableAmenities.length === 0 ? (
-                    <p className="text-sm text-gray-400 text-center py-4">Loading amenities...</p>
-                  ) : (
-                    <div className="grid grid-cols-2 gap-3">
-                      {availableAmenities.map((amenity) => {
-                        const isSelected = formData.amenities.includes(amenity);
-                        return (
-                          <label
-                            key={amenity}
-                            className={`flex items-center gap-3 p-3 rounded-lg cursor-pointer 
-                              transition-all duration-300 ${
-                              isSelected
-                                ? 'bg-gradient-to-r from-[#d4af37]/20 to-[#c9a227]/20 border-2 border-[#d4af37] shadow-lg shadow-[#d4af37]/20'
-                                : 'bg-[#1a1a1a]/50 border-2 border-[#333] hover:border-[#d4af37]/30 hover:bg-[#1a1a1a]'
-                            }`}
-                          >
-                            <input
-                              type="checkbox"
-                              checked={isSelected}
-                              onChange={() => toggleAmenity(amenity)}
-                              className="hidden"
-                            />
-                            <div className={`w-5 h-5 rounded border-2 flex items-center justify-center 
-                              transition-all duration-300 ${
-                              isSelected
-                                ? 'bg-[#d4af37] border-[#d4af37] shadow-lg shadow-[#d4af37]/30'
-                                : 'border-gray-600 bg-transparent'
-                            }`}>
-                              {isSelected && <Check className="w-3 h-3 text-[#0f0f0f] font-bold" />}
-                            </div>
-                            <span className={`text-sm flex-1 transition-colors ${
-                              isSelected 
-                                ? 'font-semibold text-[#d4af37]' 
-                                : 'text-gray-400 hover:text-gray-300'
-                            }`}>
-                              {amenity}
-                            </span>
-                          </label>
-                        );
-                      })}
-                    </div>
-                  )}
-                </div>
-                {formData.amenities.length > 0 && (
-                  <p className="text-xs text-gray-400 font-light italic">
-                    {formData.amenities.length} amenit{formData.amenities.length === 1 ? 'y' : 'ies'} selected
-                  </p>
-                )}
-              </div>
-
-              {}
-              {!editingRoom && (
-                <div className="space-y-4">
-                  <h3 className="text-lg font-serif font-semibold text-[#d4af37] mb-4 flex items-center gap-2">
-                    <div className="w-1 h-6 bg-gradient-to-b from-[#d4af37] to-[#c9a227]" />
-                    <ImageIcon className="w-5 h-5" />
-                    Room Images (Optional)
-                  </h3>
-                  <div className="space-y-4">
-                    <label className="block text-sm font-medium text-gray-300 mb-2">
-                      Select Images (will be uploaded after room is created):
-                    </label>
-                    <div className="flex gap-4">
-                      <div className="flex-1">
-                        <input
-                          type="file"
-                          accept="image/*"
-                          multiple
-                          onChange={handleFileSelect}
-                          className="w-full text-sm text-gray-400 
-                            file:mr-4 file:py-3 file:px-6 file:rounded-lg file:border-0 
-                            file:text-sm file:font-semibold 
-                            file:bg-gradient-to-r file:from-[#d4af37]/20 file:to-[#c9a227]/20 
-                            file:text-[#d4af37] file:border file:border-[#d4af37]/30
-                            hover:file:from-[#d4af37]/30 hover:file:to-[#c9a227]/30 
-                            hover:file:border-[#d4af37] file:cursor-pointer
-                            transition-all duration-300 bg-[#0a0a0a] rounded-lg"
-                        />
-                      </div>
-                    </div>
-                    {selectedFiles.length > 0 && (
-                      <p className="text-sm text-gray-400 font-light italic">
-                        {selectedFiles.length} file(s) selected
-                      </p>
-                    )}
-                  </div>
-                </div>
-              )}
-              
-              <div className="flex gap-4 pt-4 border-t border-[#d4af37]/20">
-                <button
-                  type="button"
-                  onClick={() => setShowModal(false)}
-                  className="flex-1 px-6 py-3 border border-[#d4af37]/30 text-gray-300 
-                    rounded-lg hover:bg-[#d4af37]/10 hover:border-[#d4af37] 
-                    transition-all duration-300 font-medium"
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  className="flex-1 px-6 py-3 bg-gradient-to-r from-[#d4af37] to-[#c9a227] 
-                    text-[#0f0f0f] rounded-lg hover:from-[#f5d76e] hover:to-[#d4af37] 
-                    transition-all duration-300 font-semibold shadow-lg shadow-[#d4af37]/30
-                    hover:shadow-xl hover:shadow-[#d4af37]/40"
-                >
-                  {editingRoom ? 'Update Room' : 'Add Room'}
-                </button>
-              </div>
-            </form>
-
-            {}
-            {editingRoom && (
-              <div className="mt-8 pt-8 border-t border-[#d4af37]/20">
-                <h3 className="text-lg font-serif font-semibold text-[#d4af37] mb-6 flex items-center gap-2">
-                  <div className="w-1 h-6 bg-gradient-to-b from-[#d4af37] to-[#c9a227]" />
-                  <ImageIcon className="w-5 h-5" />
-                  Room Images
-                </h3>
-                
-                {}
-                {(() => {
-                  if (!editingRoom) return null;
-                  
-                  const apiBaseUrl = import.meta.env.VITE_API_URL?.replace('/api', '') || 'http://localhost:8000';
-                  
-                  const normalizeImageUrl = (img: string): string => {
-                    if (!img) return '';
-                    
-                    if (img.startsWith('http://') || img.startsWith('https://')) {
-                      return img;
-                    }
-                    
-                    const cleanPath = img.startsWith('/') ? img : `/${img}`;
-                    return `${apiBaseUrl}${cleanPath}`;
-                  };
-
-                  
-                  const roomImages = editingRoom.images || [];
-                  const roomTypeImages = editingRoom.room_type?.images || [];
-                  
-                  
-                  const normalizeForComparison = (img: string): string => {
-                    if (!img) return '';
-                    
-                    if (img.startsWith('http://') || img.startsWith('https://')) {
-                      try {
-                        const url = new URL(img);
-                        return url.pathname;
-                      } catch {
-                        const match = img.match(/(\/uploads\/.*)/);
-                        return match ? match[1] : img;
-                      }
-                    }
-                    return img.startsWith('/') ? img : `/${img}`;
-                  };
-
-                  
-                  const normalizedRoomImages = roomImages.map(normalizeForComparison);
-                  const allImages = [
-                    ...roomImages,
-                    ...roomTypeImages.filter((img: string) => {
-                      const normalized = normalizeForComparison(img);
-                      return !normalizedRoomImages.includes(normalized);
-                    })
-                  ];
-
-                  return (
-                    <>
-                      {}
-                      {allImages.length > 0 ? (
-                        <div className="mb-6">
-                          <p className="text-sm text-gray-400 mb-4 font-light">
-                            Current Images ({allImages.length}):
-                          </p>
-                          <div className="grid grid-cols-3 gap-4">
-                            {allImages.map((img, index) => {
-                              const imageUrl = normalizeImageUrl(img);
-                              
-                              const normalizedImg = normalizeForComparison(img);
-                              const normalizedRoomImgs = roomImages.map(normalizeForComparison);
-                              const isRoomImage = normalizedRoomImgs.includes(normalizedImg);
-                              
-                              return (
-                                <div key={index} className="relative group">
-                                  <div className="overflow-hidden rounded-lg border border-[#d4af37]/20 
-                                    hover:border-[#d4af37] transition-all duration-300">
-                                    <img
-                                      src={imageUrl}
-                                      alt={`Room Image ${index + 1}`}
-                                      className="w-full h-32 object-cover group-hover:scale-110 
-                                        transition-transform duration-300"
-                                      onError={(e) => {
-                                        
-                                        (e.target as HTMLImageElement).src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iIzMzMzMzMyIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTQiIGZpbGw9IiM2NjY2NjYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIj5JbWFnZSBub3QgZm91bmQ8L3RleHQ+PC9zdmc+';
-                                      }}
-                                    />
-                                  </div>
-                                  {isRoomImage && (
-                                    <div className="absolute top-2 left-2 bg-[#d4af37]/90 backdrop-blur-sm 
-                                      text-[#0f0f0f] px-2 py-1 rounded text-xs font-semibold 
-                                      opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                                      Room Image
-                                    </div>
-                                  )}
-                                  <button
-                                    type="button"
-                                    onClick={() => handleDeleteImage(img)}
-                                    className="absolute top-2 right-2 bg-red-600/90 backdrop-blur-sm 
-                                      text-white p-2 rounded-full opacity-0 group-hover:opacity-100 
-                                      transition-all duration-300 hover:bg-red-600 shadow-lg
-                                      hover:scale-110 transform"
-                                  >
-                                    <X className="w-4 h-4" />
-                                  </button>
-                                </div>
-                              );
-                            })}
-                          </div>
-                        </div>
-                      ) : (
-                        <div className="mb-6 p-8 bg-[#0a0a0a]/50 rounded-lg border border-[#d4af37]/10 text-center">
-                          <ImageIcon className="w-12 h-12 text-gray-600 mx-auto mb-3" />
-                          <p className="text-sm text-gray-400 font-light">
-                            No images uploaded yet. Upload images below to display them here.
-                          </p>
-                        </div>
-                      )}
-                    </>
-                  );
-                })()}
-
-                {}
-                <div className="space-y-4">
-                  <label className="block text-sm font-medium text-gray-300 mb-2">
-                    Add New Images (max 5 images):
-                  </label>
-                  <div className="flex gap-4">
-                    <div className="flex-1">
-                      <input
-                        type="file"
-                        accept="image/*"
-                        multiple
-                        onChange={handleFileSelect}
-                        className="w-full text-sm text-gray-400 
-                          file:mr-4 file:py-3 file:px-6 file:rounded-lg file:border-0 
-                          file:text-sm file:font-semibold 
-                          file:bg-gradient-to-r file:from-[#d4af37]/20 file:to-[#c9a227]/20 
-                          file:text-[#d4af37] file:border file:border-[#d4af37]/30
-                          hover:file:from-[#d4af37]/30 hover:file:to-[#c9a227]/30 
-                          hover:file:border-[#d4af37] file:cursor-pointer
-                          transition-all duration-300 bg-[#0a0a0a] rounded-lg"
-                      />
-                    </div>
-                    <button
-                      type="button"
-                      onClick={handleUploadImages}
-                      disabled={selectedFiles.length === 0 || uploadingImages}
-                      className="px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 
-                        text-white rounded-lg hover:from-green-500 hover:to-green-600 
-                        disabled:from-gray-600 disabled:to-gray-700 disabled:cursor-not-allowed 
-                        flex items-center gap-2 font-semibold shadow-lg shadow-green-600/30
-                        hover:shadow-xl hover:shadow-green-600/40 transition-all duration-300"
-                    >
-                      <Upload className="w-4 h-4" />
-                      {uploadingImages ? 'Uploading...' : 'Upload'}
-                    </button>
-                  </div>
-                  {selectedFiles.length > 0 && (
-                    <p className="text-sm text-gray-400 font-light italic">
-                      {selectedFiles.length} file(s) selected
-                    </p>
-                  )}
-                </div>
-              </div>
-            )}
-
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default RoomManagementPage;
diff --git a/Frontend/src/pages/admin/SecurityManagementPage.tsx b/Frontend/src/pages/admin/SecurityManagementPage.tsx
index b64bf810..3204865f 100644
--- a/Frontend/src/pages/admin/SecurityManagementPage.tsx
+++ b/Frontend/src/pages/admin/SecurityManagementPage.tsx
@@ -475,8 +475,9 @@ const IPWhitelistTab: React.FC = () => {
       </div>
 
       {showAddModal && (
-        <div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-3 sm:p-4 animate-fade-in">
-          <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl max-w-md w-full max-h-[95vh] sm:max-h-[90vh] overflow-hidden border border-slate-200/50 animate-scale-in">
+        <div className="fixed inset-0 bg-black/70 backdrop-blur-md z-50 overflow-y-auto p-3 sm:p-4 animate-fade-in">
+          <div className="min-h-full flex items-start justify-center py-8">
+            <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl max-w-md w-full my-8 max-h-[calc(100vh-4rem)] overflow-hidden border border-slate-200/50 animate-scale-in">
             <div className="sticky top-0 bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-4 sm:px-6 py-4 sm:py-5 border-b border-slate-700 z-10">
               <div className="flex justify-between items-center">
                 <div>
@@ -491,7 +492,7 @@ const IPWhitelistTab: React.FC = () => {
                 </button>
               </div>
             </div>
-            <div className="overflow-y-auto max-h-[calc(95vh-120px)] sm:max-h-[calc(90vh-120px)]">
+            <div className="overflow-y-auto max-h-[calc(100vh-12rem)]">
               <div className="p-4 sm:p-6 space-y-4 sm:space-y-5">
                 <input
                   type="text"
@@ -649,8 +650,9 @@ const IPBlacklistTab: React.FC = () => {
       </div>
 
       {showAddModal && (
-        <div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-3 sm:p-4 animate-fade-in">
-          <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl max-w-md w-full max-h-[95vh] sm:max-h-[90vh] overflow-hidden border border-slate-200/50 animate-scale-in">
+        <div className="fixed inset-0 bg-black/70 backdrop-blur-md z-50 overflow-y-auto p-3 sm:p-4 animate-fade-in">
+          <div className="min-h-full flex items-start justify-center py-8">
+            <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl max-w-md w-full my-8 max-h-[calc(100vh-4rem)] overflow-hidden border border-slate-200/50 animate-scale-in">
             <div className="sticky top-0 bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-4 sm:px-6 py-4 sm:py-5 border-b border-slate-700 z-10">
               <div className="flex justify-between items-center">
                 <div>
@@ -665,7 +667,7 @@ const IPBlacklistTab: React.FC = () => {
                 </button>
               </div>
             </div>
-            <div className="overflow-y-auto max-h-[calc(95vh-120px)] sm:max-h-[calc(90vh-120px)]">
+            <div className="overflow-y-auto max-h-[calc(100vh-12rem)]">
               <div className="p-4 sm:p-6 space-y-4 sm:space-y-5">
               <input
                 type="text"
@@ -888,8 +890,9 @@ const OAuthProvidersTab: React.FC = () => {
       </div>
 
       {showAddModal && (
-        <div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-3 sm:p-4 animate-fade-in">
-          <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl max-w-2xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-hidden border border-slate-200/50 animate-scale-in">
+        <div className="fixed inset-0 bg-black/70 backdrop-blur-md z-50 overflow-y-auto p-3 sm:p-4 animate-fade-in">
+          <div className="min-h-full flex items-start justify-center py-8">
+            <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl max-w-2xl w-full my-8 max-h-[calc(100vh-4rem)] overflow-hidden border border-slate-200/50 animate-scale-in">
             <div className="sticky top-0 bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-4 sm:px-6 py-4 sm:py-5 border-b border-slate-700 z-10">
               <div className="flex justify-between items-center">
                 <div>
@@ -908,7 +911,7 @@ const OAuthProvidersTab: React.FC = () => {
                 </button>
               </div>
             </div>
-            <div className="overflow-y-auto max-h-[calc(95vh-120px)] sm:max-h-[calc(90vh-120px)]">
+            <div className="overflow-y-auto max-h-[calc(100vh-12rem)]">
               <div className="p-4 sm:p-6 space-y-3 sm:space-y-4">
               <input
                 type="text"
@@ -1352,8 +1355,9 @@ const GDPRRequestsTab: React.FC = () => {
 
       {/* Request Details Modal */}
       {selectedRequest && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-xl p-4 sm:p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+        <div className="fixed inset-0 bg-black/50 z-50 overflow-y-auto p-4">
+          <div className="min-h-full flex items-start justify-center py-8">
+            <div className="bg-white rounded-xl p-4 sm:p-6 max-w-2xl w-full my-8 max-h-[calc(100vh-4rem)] overflow-y-auto">
             <div className="flex justify-between items-start mb-4">
               <h4 className="text-base sm:text-lg font-semibold">GDPR Request Details</h4>
               <button
@@ -1399,6 +1403,7 @@ const GDPRRequestsTab: React.FC = () => {
                 </button>
               )}
             </div>
+            </div>
           </div>
         </div>
       )}
diff --git a/Frontend/src/pages/admin/ServiceManagementPage.tsx b/Frontend/src/pages/admin/ServiceManagementPage.tsx
index 038c5d01..b1bf07e5 100644
--- a/Frontend/src/pages/admin/ServiceManagementPage.tsx
+++ b/Frontend/src/pages/admin/ServiceManagementPage.tsx
@@ -240,8 +240,9 @@ const ServiceManagementPage: React.FC = () => {
 
       {}
       {showModal && (
-        <div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-4 animate-fade-in">
-          <div className="bg-white rounded-3xl shadow-2xl w-full max-w-md max-h-[90vh] overflow-hidden border border-slate-200 animate-scale-in">
+        <div className="fixed inset-0 bg-black/70 backdrop-blur-md z-50 overflow-y-auto p-4 animate-fade-in">
+          <div className="min-h-full flex items-start justify-center py-8">
+            <div className="bg-white rounded-3xl shadow-2xl w-full max-w-md my-8 max-h-[calc(100vh-4rem)] overflow-hidden border border-slate-200 animate-scale-in">
             {}
             <div className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-6 py-5 border-b border-slate-700">
               <div className="flex justify-between items-center">
@@ -344,6 +345,7 @@ const ServiceManagementPage: React.FC = () => {
               </form>
             </div>
           </div>
+          </div>
         </div>
       )}
     </div>
diff --git a/Frontend/src/pages/admin/UserManagementPage.tsx b/Frontend/src/pages/admin/UserManagementPage.tsx
index def177ad..35d8eb11 100644
--- a/Frontend/src/pages/admin/UserManagementPage.tsx
+++ b/Frontend/src/pages/admin/UserManagementPage.tsx
@@ -388,8 +388,9 @@ const UserManagementPage: React.FC = () => {
 
       {}
       {showModal && (
-        <div className="fixed inset-0 bg-black/70 backdrop-blur-md flex items-center justify-center z-50 p-3 sm:p-4 animate-fade-in">
-          <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl w-full max-w-md max-h-[95vh] sm:max-h-[90vh] overflow-hidden border border-slate-200 animate-scale-in">
+        <div className="fixed inset-0 bg-black/70 backdrop-blur-md z-50 overflow-y-auto p-3 sm:p-4 animate-fade-in">
+          <div className="min-h-full flex items-start justify-center py-8">
+            <div className="bg-white rounded-2xl sm:rounded-3xl shadow-2xl w-full max-w-md my-8 max-h-[calc(100vh-4rem)] overflow-hidden border border-slate-200 animate-scale-in">
             {}
             <div className="bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-6 py-5 border-b border-slate-700">
               <div className="flex justify-between items-center">
@@ -410,7 +411,7 @@ const UserManagementPage: React.FC = () => {
               </div>
             </div>
             
-            <div className="overflow-y-auto max-h-[calc(95vh-120px)] sm:max-h-[calc(90vh-120px)]">
+            <div className="overflow-y-auto max-h-[calc(100vh-12rem)]">
               <form onSubmit={handleSubmit} className="p-4 sm:p-6 space-y-4 sm:space-y-5">
                 <div>
                   <label className="block text-xs font-semibold text-slate-600 uppercase tracking-wider mb-2">
@@ -512,6 +513,7 @@ const UserManagementPage: React.FC = () => {
               </form>
             </div>
           </div>
+          </div>
         </div>
       )}
     </div>