reverted to old import to avoid confusion with QA team.

<!--
  Thanks for contributing!

Provide a description of your changes below and a general summary in the
title

Please look at the following checklist to ensure that your PR can be
accepted quickly:
-->

## Jira Ticket
[SP-1710](https://syncrow.atlassian.net/browse/SP-1710)

## Description

1. Implemented Space Management Community Side Tree.
2. Implemented Creating a new community feature.

## Type of Change

<!--- Put an `x` in all the boxes that apply: -->

- [x] ✨ New feature (non-breaking change which adds functionality)
- [ ] 🛠️ Bug fix (non-breaking change which fixes an issue)
- [ ] ❌ Breaking change (fix or feature that would cause existing
functionality to change)
- [ ] 🧹 Code refactor
- [ ] ✅ Build configuration change
- [ ] 📝 Documentation
- [ ] 🗑️ Chore 


[SP-1710]:
https://syncrow.atlassian.net/browse/SP-1710?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

lib/common/widgets/app_loading_indicator.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+class AppLoadingIndicator extends StatelessWidget {
+  const AppLoadingIndicator({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const Center(child: CircularProgressIndicator());
+  }
+}

lib/pages/device_managment/all_devices/bloc/device_mgmt_bloc/device_managment_bloc.dart

@@ -40,17 +40,18 @@ class DeviceManagementBloc
       List<AllDevicesModel> devices = [];
       _devices.clear();
       var spaceBloc = event.context.read<SpaceTreeBloc>();
-           final projectUuid = await ProjectManager.getProjectUUID() ?? '';
+      final projectUuid = await ProjectManager.getProjectUUID() ?? '';
 
       if (spaceBloc.state.selectedCommunities.isEmpty) {
-        devices = await DevicesManagementApi().fetchDevices('', '', projectUuid);
+        devices =
+            await DevicesManagementApi().fetchDevices('', '', projectUuid);
       } else {
         for (var community in spaceBloc.state.selectedCommunities) {
           List<String> spacesList =
               spaceBloc.state.selectedCommunityAndSpaces[community] ?? [];
           for (var space in spacesList) {
-            devices.addAll(await DevicesManagementApi().fetchDevices(
-                community, space, projectUuid));
+            devices.addAll(await DevicesManagementApi()
+                .fetchDevices(community, space, projectUuid));
           }
         }
       }
@@ -100,7 +101,7 @@ class DeviceManagementBloc
       ));
 
       if (currentProductName.isNotEmpty) {
-        add(SearchDevices(productName: currentProductName));
+        add(SearchDevices(deviceNameOrProductName: currentProductName));
       }
     }
   }
@@ -269,34 +270,41 @@ class DeviceManagementBloc
         return 'All';
     }
   }
-
   void _onSearchDevices(
       SearchDevices event, Emitter<DeviceManagementState> emit) {
     if ((event.community == null || event.community!.isEmpty) &&
         (event.unitName == null || event.unitName!.isEmpty) &&
-        (event.productName == null || event.productName!.isEmpty)) {
+        (event.deviceNameOrProductName == null ||
+            event.deviceNameOrProductName!.isEmpty)) {
       currentProductName = '';
-      if (state is DeviceManagementFiltered) {
-        add(FilterDevices(_getFilterFromIndex(_selectedIndex)));
-      } else {
-        return;
-      }
+      _filteredDevices = List.from(_devices);
+      emit(DeviceManagementLoaded(
+        devices: _devices,
+        selectedIndex: _selectedIndex,
+        onlineCount: _onlineCount,
+        offlineCount: _offlineCount,
+        lowBatteryCount: _lowBatteryCount,
+        selectedDevice: null,
+        isControlButtonEnabled: false,
+      ));
+      return;
     }
-
-    if (event.productName == currentProductName &&
+    if (event.deviceNameOrProductName == currentProductName &&
         event.community == currentCommunity &&
         event.unitName == currentUnitName &&
         event.searchField) {
       return;
     }
 
-    currentProductName = event.productName ?? '';
+    currentProductName = event.deviceNameOrProductName ?? '';
     currentCommunity = event.community;
     currentUnitName = event.unitName;
 
-    List<AllDevicesModel> devicesToSearch = _filteredDevices;
+    List<AllDevicesModel> devicesToSearch = _devices;
 
     if (devicesToSearch.isNotEmpty) {
+      final searchText = event.deviceNameOrProductName?.toLowerCase() ?? '';
+
       final filteredDevices = devicesToSearch.where((device) {
         final matchesCommunity = event.community == null ||
             event.community!.isEmpty ||
@@ -304,31 +312,25 @@ class DeviceManagementBloc
                     ?.toLowerCase()
                     .contains(event.community!.toLowerCase()) ??
                 false);
+
         final matchesUnit = event.unitName == null ||
             event.unitName!.isEmpty ||
             (device.spaces != null &&
-                device.spaces!.isNotEmpty &&
-                device.spaces![0].spaceName!
-                    .toLowerCase()
-                    .contains(event.unitName!.toLowerCase()));
-        final matchesProductName = event.productName == null ||
-            event.productName!.isEmpty ||
-            (device.name
-                    ?.toLowerCase()
-                    .contains(event.productName!.toLowerCase()) ??
-                false);
-        final matchesDeviceName = event.productName == null ||
-            event.productName!.isEmpty ||
-            (device.categoryName
-                    ?.toLowerCase()
-                    .contains(event.productName!.toLowerCase()) ??
-                false);
+                device.spaces!.any((space) =>
+                    space.spaceName != null &&
+                    space.spaceName!
+                        .toLowerCase()
+                        .contains(event.unitName!.toLowerCase())));
 
-        return matchesCommunity &&
-            matchesUnit &&
-            (matchesProductName || matchesDeviceName);
+        final matchesSearchText = searchText.isEmpty ||
+            (device.name?.toLowerCase().contains(searchText) ?? false) ||
+            (device.productName?.toLowerCase().contains(searchText) ?? false);
+
+        return matchesCommunity && matchesUnit && matchesSearchText;
       }).toList();
 
+      _filteredDevices = filteredDevices;
+
       emit(DeviceManagementFiltered(
         filteredDevices: filteredDevices,
         selectedIndex: _selectedIndex,

lib/pages/device_managment/all_devices/bloc/device_mgmt_bloc/device_managment_event.dart

@@ -38,18 +38,18 @@ class SelectedFilterChanged extends DeviceManagementEvent {
 class SearchDevices extends DeviceManagementEvent {
   final String? community;
   final String? unitName;
-  final String? productName;
+  final String? deviceNameOrProductName;
   final bool searchField;
 
   const SearchDevices({
     this.community,
     this.unitName,
-    this.productName,
+    this.deviceNameOrProductName,
     this.searchField = false,
   });
 
   @override
-  List<Object?> get props => [community, unitName, productName];
+  List<Object?> get props => [community, unitName, deviceNameOrProductName];
 }
 
 class SelectDevice extends DeviceManagementEvent {

lib/pages/device_managment/all_devices/widgets/device_search_filters.dart

@@ -53,7 +53,7 @@ class _DeviceSearchFiltersState extends State<DeviceSearchFilters>
       controller: controller,
       onSubmitted: () {
         final searchDevicesEvent = SearchDevices(
-          productName: _productNameController.text,
+          deviceNameOrProductName: _productNameController.text,
           unitName: _unitNameController.text,
           searchField: true,
         );
@@ -68,7 +68,7 @@ class _DeviceSearchFiltersState extends State<DeviceSearchFilters>
       onSearch: () => context.read<DeviceManagementBloc>().add(
             SearchDevices(
               unitName: _unitNameController.text,
-              productName: _productNameController.text,
+              deviceNameOrProductName: _productNameController.text,
               searchField: true,
             ),
           ),

lib/pages/device_managment/door_lock/bloc/door_lock_bloc.dart

@@ -1,5 +1,3 @@
-// ignore_for_file: invalid_use_of_visible_for_testing_member
-
 import 'dart:async';
 import 'package:firebase_database/firebase_database.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -16,45 +14,38 @@ class DoorLockBloc extends Bloc<DoorLockEvent, DoorLockState> {
 
   DoorLockBloc({required this.deviceId}) : super(DoorLockInitial()) {
     on<DoorLockFetchStatus>(_onFetchDeviceStatus);
-    //on<DoorLockControl>(_onDoorLockControl);
     on<UpdateLockEvent>(_updateLock);
     on<DoorLockFactoryReset>(_onFactoryReset);
     on<StatusUpdated>(_onStatusUpdated);
   }
 
-  _listenToChanges(deviceId) {
+  void _listenToChanges(String deviceId) {
     try {
-      DatabaseReference ref =
-          FirebaseDatabase.instance.ref('device-status/$deviceId');
-      Stream<DatabaseEvent> stream = ref.onValue;
+      final ref = FirebaseDatabase.instance.ref('device-status/$deviceId');
+      ref.onValue.listen((event) {
+        final data = event.snapshot.value;
+        if (data is Map) {
+          final statusData = data['status'] as List<dynamic>? ?? [];
+          final statusList = statusData.map((item) {
+            return Status(code: item['code'], value: item['value']);
+          }).toList();
 
-      stream.listen((DatabaseEvent event) {
-        Map<dynamic, dynamic> usersMap =
-            event.snapshot.value as Map<dynamic, dynamic>;
-
-        List<Status> statusList = [];
-        usersMap['status'].forEach((element) {
-          statusList
-              .add(Status(code: element['code'], value: element['value']));
-        });
-
-        deviceStatus =
-            DoorLockStatusModel.fromJson(usersMap['productUuid'], statusList);
-        if (!isClosed) {
-          add(StatusUpdated(deviceStatus));
+          final model =
+              DoorLockStatusModel.fromJson(data['productUuid'], statusList);
+          if (!isClosed) {
+            add(StatusUpdated(model));
+          }
         }
       });
     } catch (_) {}
   }
 
   void _onStatusUpdated(StatusUpdated event, Emitter<DoorLockState> emit) {
-    emit(DoorLockStatusLoading());
-
     deviceStatus = event.deviceStatus;
     emit(DoorLockStatusLoaded(deviceStatus));
   }
 
-  FutureOr<void> _onFetchDeviceStatus(
+  Future<void> _onFetchDeviceStatus(
       DoorLockFetchStatus event, Emitter<DoorLockState> emit) async {
     emit(DoorLockStatusLoading());
     try {
@@ -63,14 +54,13 @@ class DoorLockBloc extends Bloc<DoorLockEvent, DoorLockState> {
       deviceStatus =
           DoorLockStatusModel.fromJson(event.deviceId, status.status);
       _listenToChanges(event.deviceId);
-
       emit(DoorLockStatusLoaded(deviceStatus));
     } catch (e) {
       emit(DoorLockControlError(e.toString()));
     }
   }
 
-  FutureOr<void> _updateLock(
+  Future<void> _updateLock(
       UpdateLockEvent event, Emitter<DoorLockState> emit) async {
     final oldValue = deviceStatus.normalOpenSwitch;
     deviceStatus = deviceStatus.copyWith(normalOpenSwitch: !oldValue);
@@ -78,7 +68,6 @@ class DoorLockBloc extends Bloc<DoorLockEvent, DoorLockState> {
 
     try {
       final response = await DevicesManagementApi.openDoorLock(deviceId);
-
       if (!response) {
         _revertValueAndEmit(deviceId, 'normal_open_switch', oldValue, emit);
       }
@@ -88,35 +77,8 @@ class DoorLockBloc extends Bloc<DoorLockEvent, DoorLockState> {
     }
   }
 
-  Future<void> _runDebounce({
-    required String deviceId,
-    required String code,
-    required dynamic value,
-    required dynamic oldValue,
-    required Emitter<DoorLockState> emit,
-  }) async {
-    if (_timer != null) {
-      _timer!.cancel();
-    }
-    _timer = Timer(const Duration(seconds: 1), () async {
-      try {
-        final response = await DevicesManagementApi()
-            .deviceControl(deviceId, Status(code: code, value: value));
-        if (!response) {
-          _revertValueAndEmit(deviceId, code, oldValue, emit);
-        }
-      } catch (e) {
-        _revertValueAndEmit(deviceId, code, oldValue, emit);
-      }
-    });
-  }
-
-  void _revertValueAndEmit(
-    String deviceId,
-    String code,
-    dynamic oldValue,
-    Emitter<DoorLockState> emit,
-  ) {
+  void _revertValueAndEmit(String deviceId, String code, dynamic oldValue,
+      Emitter<DoorLockState> emit) {
     _updateLocalValue(code, oldValue);
     emit(DoorLockStatusLoaded(deviceStatus));
     emit(const DoorLockControlError('Failed to control the device.'));
@@ -124,34 +86,23 @@ class DoorLockBloc extends Bloc<DoorLockEvent, DoorLockState> {
 
   void _updateLocalValue(String code, dynamic value) {
     switch (code) {
-      case 'reverse_lock':
-        if (value is bool) {
-          deviceStatus = deviceStatus.copyWith(reverseLock: value);
-        }
-        break;
       case 'normal_open_switch':
         if (value is bool) {
           deviceStatus = deviceStatus.copyWith(normalOpenSwitch: value);
         }
         break;
+      case 'reverse_lock':
+        if (value is bool) {
+          deviceStatus = deviceStatus.copyWith(reverseLock: value);
+        }
+        break;
       default:
         break;
     }
     emit(DoorLockStatusLoaded(deviceStatus));
   }
 
-  dynamic _getValueByCode(String code) {
-    switch (code) {
-      case 'reverse_lock':
-        return deviceStatus.reverseLock;
-      case 'normal_open_switch':
-        return deviceStatus.normalOpenSwitch;
-      default:
-        return null;
-    }
-  }
-
-  FutureOr<void> _onFactoryReset(
+  Future<void> _onFactoryReset(
       DoorLockFactoryReset event, Emitter<DoorLockState> emit) async {
     emit(DoorLockStatusLoading());
     try {

lib/pages/device_managment/door_lock/widget/door_button.dart

@@ -8,7 +8,7 @@ import 'package:syncrow_web/pages/device_managment/door_lock/models/door_lock_st
 import 'package:syncrow_web/utils/color_manager.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
 
-class DoorLockButton extends StatefulWidget {
+class DoorLockButton extends StatelessWidget {
   const DoorLockButton({
     super.key,
     required this.doorLock,
@@ -18,70 +18,28 @@ class DoorLockButton extends StatefulWidget {
   final AllDevicesModel doorLock;
   final DoorLockStatusModel smartDoorModel;
 
-  @override
-  State<DoorLockButton> createState() =>
-      _DoorLockButtonState(smartDoorModel: smartDoorModel);
-}
-
-class _DoorLockButtonState extends State<DoorLockButton>
-    with SingleTickerProviderStateMixin {
-  late AnimationController _animationController;
-  late Animation<double> _animation;
-  DoorLockStatusModel smartDoorModel;
-
-  _DoorLockButtonState({required this.smartDoorModel});
-
-  @override
-  void initState() {
-    super.initState();
-    _animationController = AnimationController(
-      vsync: this,
-      duration: const Duration(milliseconds: 500),
-    );
-    _animation = Tween<double>(begin: 0, end: 1).animate(_animationController)
-      ..addListener(() {
-        setState(() {});
-      });
-
-    if (smartDoorModel.unlockRequest > 0) {
-      _animationController.reverse(from: 1);
-    }
-  }
-
-  @override
-  void didUpdateWidget(covariant DoorLockButton oldWidget) {
-    super.didUpdateWidget(oldWidget);
-    if (oldWidget.smartDoorModel.normalOpenSwitch !=
-        widget.smartDoorModel.normalOpenSwitch) {
-      setState(() {
-        smartDoorModel = widget.smartDoorModel;
-      });
-
-      if (smartDoorModel.unlockRequest > 0) {
-        _animationController.forward(from: 0);
-      } else {
-        _animationController.reverse(from: 1);
-      }
-    }
-  }
-
-  @override
-  void dispose() {
-    _animationController.dispose();
-    super.dispose();
+  double _calculateProgress() {
+    final value = smartDoorModel.unlockRequest;
+    if (value <= 0 || value > 30) return 0;
+    return value / 30.0;
   }
 
   @override
   Widget build(BuildContext context) {
+    final progress = _calculateProgress();
+    final isEnabled = smartDoorModel.unlockRequest > 0;
+
     return SizedBox(
       width: 255,
       height: 255,
       child: InkWell(
-        onTap: () {
-          _animationController.forward(from: 0);
-          BlocProvider.of<DoorLockBloc>(context)
-              .add(UpdateLockEvent(value: !smartDoorModel.normalOpenSwitch));
-        },
+        onTap: isEnabled
+            ? () {
+                BlocProvider.of<DoorLockBloc>(context).add(
+                  UpdateLockEvent(value: !smartDoorModel.normalOpenSwitch),
+                );
+              }
+            : null,
         child: Container(
           width: 255,
           height: 255,
@@ -115,15 +73,16 @@ class _DoorLockButtonState extends State<DoorLockButton>
                   ),
                 ),
               ),
-              SizedBox.expand(
-                child: CircularProgressIndicator(
-                  value: _animation.value,
-                  strokeWidth: 8,
-                  backgroundColor: Colors.transparent,
-                  valueColor: const AlwaysStoppedAnimation<Color>(
-                      ColorsManager.primaryColor),
+              if (progress > 0)
+                SizedBox.expand(
+                  child: CircularProgressIndicator(
+                    value: progress,
+                    strokeWidth: 8,
+                    backgroundColor: Colors.transparent,
+                    valueColor: const AlwaysStoppedAnimation<Color>(
+                        ColorsManager.primaryColor),
+                  ),
                 ),
-              ),
             ],
           ),
         ),

lib/pages/space_management_v2/main_module/models/space_connection_model.dart

@@ -0,0 +1,6 @@
+class SpaceConnectionModel {
+  final String from;
+  final String to;
+
+  const SpaceConnectionModel({required this.from, required this.to});
+}

lib/pages/space_management_v2/main_module/painters/spaces_connections_arrow_painter.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/models/space_connection_model.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class SpacesConnectionsArrowPainter extends CustomPainter {
+  final List<SpaceConnectionModel> connections;
+  final Map<String, Offset> positions;
+  final double cardWidth = 150.0;
+  final double cardHeight = 90.0;
+  final String? selectedSpaceUuid;
+
+  SpacesConnectionsArrowPainter({
+    required this.connections,
+    required this.positions,
+    this.selectedSpaceUuid,
+  });
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    for (final connection in connections) {
+      final isSelected = connection.to == selectedSpaceUuid;
+      final paint = Paint()
+        ..color = isSelected
+            ? ColorsManager.primaryColor
+            : ColorsManager.blackColor.withValues(alpha: 0.5)
+        ..strokeWidth = 2.0
+        ..style = PaintingStyle.stroke;
+
+      final from = positions[connection.from];
+      final to = positions[connection.to];
+
+      if (from != null && to != null) {
+        final startPoint =
+            Offset(from.dx + cardWidth / 2, from.dy + cardHeight - 10);
+        final endPoint = Offset(to.dx + cardWidth / 2, to.dy);
+
+        final path = Path()..moveTo(startPoint.dx, startPoint.dy);
+
+        final controlPoint1 = Offset(startPoint.dx, startPoint.dy + 60);
+        final controlPoint2 = Offset(endPoint.dx, endPoint.dy - 60);
+
+        path.cubicTo(controlPoint1.dx, controlPoint1.dy, controlPoint2.dx,
+            controlPoint2.dy, endPoint.dx, endPoint.dy);
+
+        canvas.drawPath(path, paint);
+
+        final circlePaint = Paint()
+          ..color = isSelected
+              ? ColorsManager.primaryColor
+              : ColorsManager.blackColor.withValues(alpha: 0.5)
+          ..style = PaintingStyle.fill
+          ..blendMode = BlendMode.srcIn;
+        canvas.drawCircle(endPoint, 4, circlePaint);
+      }
+    }
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
+}

lib/pages/space_management_v2/main_module/shared/helpers/space_management_community_dialog_helper.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/bloc/communities_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/create_community/presentation/create_community_dialog.dart';
+
+abstract final class SpaceManagementCommunityDialogHelper {
+  static void showCreateDialog(BuildContext context) {
+    showDialog<void>(
+      context: context,
+      builder: (_) => CreateCommunityDialog(
+        title: const SelectableText('Community Name'),
+        onCreateCommunity: (community) {
+          context.read<CommunitiesBloc>().add(
+                InsertCommunity(community),
+              );
+          context.read<CommunitiesTreeSelectionBloc>().add(
+                SelectCommunityEvent(community: community),
+              );
+        },
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/main_module/shared/models/paginated_data_model.dart

@@ -0,0 +1,43 @@
+import 'package:equatable/equatable.dart';
+
+class PaginatedDataModel<T> extends Equatable {
+  const PaginatedDataModel({
+    required this.data,
+    required this.page,
+    required this.size,
+    required this.hasNext,
+    required this.totalItems,
+    required this.totalPages,
+  });
+
+  final List<T> data;
+  final int page;
+  final int size;
+  final bool hasNext;
+  final int totalItems;
+  final int totalPages;
+
+  factory PaginatedDataModel.fromJson(
+    Map<String, dynamic> json,
+    List<T> Function(List<dynamic>) fromJsonList,
+  ) {
+    return PaginatedDataModel<T>(
+      data: fromJsonList(json['data'] as List<dynamic>),
+      page: json['page'] as int? ?? 1,
+      size: json['size'] as int? ?? 25,
+      hasNext: json['hasNext'] as bool? ?? false,
+      totalItems: json['totalItem'] as int? ?? 0,
+      totalPages: json['totalPage'] as int? ?? 0,
+    );
+  }
+
+  @override
+  List<Object?> get props => [
+        data,
+        page,
+        size,
+        hasNext,
+        totalItems,
+        totalPages,
+      ];
+}

lib/pages/space_management_v2/main_module/views/space_management_page.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/device_managment/shared/navigate_home_grid_view.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/space_management_body.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/data/services/debounced_communities_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/data/services/remote_communities_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/params/load_communities_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/bloc/communities_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
+import 'package:syncrow_web/utils/theme/responsive_text_theme.dart';
+import 'package:syncrow_web/web_layout/web_scaffold.dart';
+
+class SpaceManagementPage extends StatelessWidget {
+  const SpaceManagementPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MultiBlocProvider(
+      providers: [
+        BlocProvider(
+          create: (context) => CommunitiesBloc(
+            communitiesService: DebouncedCommunitiesService(
+              RemoteCommunitiesService(HTTPService()),
+            ),
+          )..add(const LoadCommunities(LoadCommunitiesParam())),
+        ),
+        BlocProvider(create: (context) => CommunitiesTreeSelectionBloc()),
+      ],
+      child: WebScaffold(
+        appBarTitle: Text(
+          'Space Management',
+          style: ResponsiveTextTheme.of(context).deviceManagementTitle,
+        ),
+        enableMenuSidebar: false,
+        centerBody: Text(
+          'Community Structure',
+          style: Theme.of(context).textTheme.bodyLarge!.copyWith(
+                fontWeight: FontWeight.bold,
+              ),
+        ),
+        rightBody: const NavigateHomeGridView(),
+        scaffoldBody: const SpaceManagementBody(),
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/main_module/widgets/community_structure_canvas.dart

@@ -0,0 +1,236 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/models/space_connection_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/painters/spaces_connections_arrow_painter.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/space_card_widget.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/space_cell.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/space_model.dart';
+
+class CommunityStructureCanvas extends StatefulWidget {
+  const CommunityStructureCanvas({
+    required this.community,
+    super.key,
+  });
+
+  final CommunityModel community;
+
+  @override
+  State<CommunityStructureCanvas> createState() =>_CommunityStructureCanvasState();  
+}
+
+class _CommunityStructureCanvasState extends State<CommunityStructureCanvas>
+    with SingleTickerProviderStateMixin {
+  final Map<String, Offset> _positions = {};
+  final double _cardWidth = 150.0;
+  final double _cardHeight = 90.0;
+  final double _horizontalSpacing = 150.0;
+  final double _verticalSpacing = 120.0;
+  String? _selectedSpaceUuid;
+
+  late TransformationController _transformationController;
+  late AnimationController _animationController;
+
+  @override
+  void initState() {
+    super.initState();
+    _transformationController = TransformationController();
+    _animationController = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 100),
+    );
+  }
+
+  @override
+  void dispose() {
+    _transformationController.dispose();
+    _animationController.dispose();
+    super.dispose();
+  }
+
+  void _runAnimation(Matrix4 target) {
+    final animation = Matrix4Tween(
+      begin: _transformationController.value,
+      end: target,
+    ).animate(_animationController);
+
+    void listener() {
+      _transformationController.value = animation.value;
+    }
+
+    animation.addListener(listener);
+    _animationController.forward(from: 0).whenCompleteOrCancel(() {
+      animation.removeListener(listener);
+    });
+  }
+
+  void _onSpaceTapped(String spaceUuid) {
+    setState(() {
+      _selectedSpaceUuid = spaceUuid;
+    });
+
+    final position = _positions[spaceUuid];
+    if (position == null) return;
+
+    const scale = 2.0;
+    final viewSize = context.size;
+    if (viewSize == null) return;
+
+    final x = -position.dx * scale + (viewSize.width / 2) - (_cardWidth * scale / 2);
+    final y =
+        -position.dy * scale + (viewSize.height / 2) - (_cardHeight * scale / 2);
+
+    final matrix = Matrix4.identity()
+      ..translate(x, y)
+      ..scale(scale);
+
+    _runAnimation(matrix);
+  }
+
+  void _resetSelectionAndZoom() {
+    setState(() {
+      _selectedSpaceUuid = null;
+    });
+    _runAnimation(Matrix4.identity());
+  }
+
+  void _calculateLayout(
+    List<SpaceModel> spaces,
+    int depth,
+    Map<int, double> levelXOffset,
+  ) {
+    for (final space in spaces) {
+      double childSubtreeWidth = 0;
+      if (space.children.isNotEmpty) {
+        _calculateLayout(space.children, depth + 1, levelXOffset);
+        final firstChildPos = _positions[space.children.first.uuid];
+        final lastChildPos = _positions[space.children.last.uuid];
+        if (firstChildPos != null && lastChildPos != null) {
+          childSubtreeWidth = (lastChildPos.dx + _cardWidth) - firstChildPos.dx;
+        }
+      }
+
+      final currentX = levelXOffset.putIfAbsent(depth, () => 0.0);
+      double? x;
+
+      if (space.children.isNotEmpty) {
+        final firstChildPos = _positions[space.children.first.uuid]!;
+        x = firstChildPos.dx + (childSubtreeWidth - _cardWidth) / 2;
+      } else {
+        x = currentX;
+      }
+
+      if (x < currentX) {
+        final shiftX = currentX - x;
+        _shiftSubtree(space, shiftX);
+        final keysToShift = levelXOffset.keys.where((d) => d > depth).toList();
+        for (final key in keysToShift) {
+          levelXOffset[key] = levelXOffset[key]! + shiftX;
+        }
+        x += shiftX;
+      }
+
+      final y = depth * (_verticalSpacing + _cardHeight);
+      _positions[space.uuid] = Offset(x, y);
+      levelXOffset[depth] = x + _cardWidth + _horizontalSpacing;
+    }
+  }
+
+  void _shiftSubtree(SpaceModel space, double shiftX) {
+    if (_positions.containsKey(space.uuid)) {
+      _positions[space.uuid] = _positions[space.uuid]!.translate(shiftX, 0);
+    }
+    for (final child in space.children) {
+      _shiftSubtree(child, shiftX);
+    }
+  }
+
+  List<Widget> _buildTreeWidgets() {
+    _positions.clear();
+    final community = widget.community;
+
+    _calculateLayout(community.spaces, 0, {});
+
+    final widgets = <Widget>[];
+    final connections = <SpaceConnectionModel>[];
+    _generateWidgets(community.spaces, widgets, connections);
+
+    return [
+      CustomPaint(
+        painter: SpacesConnectionsArrowPainter(
+          connections: connections,
+          positions: _positions,
+          selectedSpaceUuid: _selectedSpaceUuid,
+        ),
+        child: Stack(alignment: AlignmentDirectional.center, children: widgets),
+      ),
+    ];
+  }
+
+  void _generateWidgets(
+    List<SpaceModel> spaces,
+    List<Widget> widgets,
+    List<SpaceConnectionModel> connections,
+  ) {
+    for (final space in spaces) {
+      final position = _positions[space.uuid];
+      if (position == null) continue;
+
+      widgets.add(
+        Positioned(
+          left: position.dx,
+          top: position.dy,
+          width: _cardWidth,
+          height: _cardHeight,
+          child: SpaceCardWidget(
+            index: spaces.indexOf(space),
+            onPositionChanged: (newPosition) {},
+            buildSpaceContainer: (index) {
+              return Opacity(
+                opacity: 1.0,
+                child: SpaceCell(
+                  index: index,
+                  onTap: () => _onSpaceTapped(space.uuid),
+                  icon: space.icon,
+                  name: space.spaceName,
+                ),
+              );
+            },
+            screenSize: MediaQuery.sizeOf(context),
+            position: position,
+            isHovered: false,
+            onHoverChanged: (int index, bool isHovered) {},
+            onButtonTap: (int index, Offset newPosition) {},
+          ),
+        ),
+      );
+
+      for (final child in space.children) {
+        connections.add(SpaceConnectionModel(from: space.uuid, to: child.uuid));
+      }
+      _generateWidgets(space.children, widgets, connections);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final treeWidgets = _buildTreeWidgets();
+    return InteractiveViewer(
+      transformationController: _transformationController,
+      boundaryMargin: EdgeInsets.symmetric(
+        horizontal: MediaQuery.sizeOf(context).width * 0.3,
+        vertical: MediaQuery.sizeOf(context).height * 0.2,
+      ),
+      minScale: 0.5,
+      maxScale: 3.0,
+      constrained: false,
+      child: GestureDetector(
+        onTap: _resetSelectionAndZoom,
+        child: SizedBox(
+          width: MediaQuery.sizeOf(context).width * 2,
+          height: MediaQuery.sizeOf(context).height * 2,
+          child: Stack(children: treeWidgets),
+        ),
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/main_module/widgets/community_template_cell.dart

@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class CommunityTemplateCell extends StatelessWidget {
+  const CommunityTemplateCell({
+    super.key,
+    required this.onTap,
+    required this.title,
+  });
+
+  final void Function() onTap;
+  final Widget title;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Column(
+        spacing: 8,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          Expanded(
+            child: AspectRatio(
+              aspectRatio: 2.0,
+              child: Container(
+                decoration: ShapeDecoration(
+                  shape: RoundedRectangleBorder(
+                    side: const BorderSide(
+                      width: 4,
+                      strokeAlign: BorderSide.strokeAlignOutside,
+                      color: ColorsManager.borderColor,
+                    ),
+                    borderRadius: BorderRadius.circular(5),
+                  ),
+                ),
+              ),
+            ),
+          ),
+          DefaultTextStyle(
+            style: context.textTheme.bodyLarge!.copyWith(
+              color: ColorsManager.blackColor,
+            ),
+            child: title,
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/main_module/widgets/create_space_button.dart

@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class CreateSpaceButton extends StatelessWidget {
+  const CreateSpaceButton({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () {},
+      child: Container(
+        height: 60,
+        decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(20),
+          boxShadow: [
+            BoxShadow(
+              color: Colors.grey.withValues(alpha: 0.5),
+              spreadRadius: 5,
+              blurRadius: 7,
+              offset: const Offset(0, 3),
+            ),
+          ],
+        ),
+        child: Center(
+          child: Container(
+            width: 40,
+            height: 40,
+            decoration: const BoxDecoration(
+              color: ColorsManager.boxColor,
+              shape: BoxShape.circle,
+            ),
+            child: const Icon(
+              Icons.add,
+              color: Colors.blue,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/main_module/widgets/plus_button_widget.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class PlusButtonWidget extends StatelessWidget {
+  final int index;
+  final String direction;
+  final Offset offset;
+  final void Function(int index, Offset newPosition) onButtonTap;
+
+  const PlusButtonWidget({
+    super.key,
+    required this.index,
+    required this.direction,
+    required this.offset,
+    required this.onButtonTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () {
+        if (direction == 'down') {
+          onButtonTap(index, const Offset(0, 150));
+        } else {
+          onButtonTap(index, const Offset(150, 0));
+        }
+      },
+      child: Container(
+        width: 30,
+        height: 30,
+        decoration: const BoxDecoration(
+          color: ColorsManager.spaceColor,
+          shape: BoxShape.circle,
+        ),
+        child: const Icon(
+          Icons.add,
+          color: ColorsManager.whiteColors,
+          size: 20,
+        ),
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/main_module/widgets/space_card_widget.dart

@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/plus_button_widget.dart';
+
+class SpaceCardWidget extends StatelessWidget {
+  final int index;
+  final Size screenSize;
+  final Offset position;
+  final bool isHovered;
+  final void Function(int index, bool isHovered) onHoverChanged;
+  final void Function(int index, Offset newPosition) onButtonTap;
+  final Widget Function(int index) buildSpaceContainer;
+  final ValueChanged<Offset> onPositionChanged;
+
+  const SpaceCardWidget({
+    super.key,
+    required this.index,
+    required this.onPositionChanged,
+    required this.screenSize,
+    required this.position,
+    required this.isHovered,
+    required this.onHoverChanged,
+    required this.onButtonTap,
+    required this.buildSpaceContainer,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return MouseRegion(
+      onEnter: (_) => onHoverChanged(index, true),
+      onExit: (_) => onHoverChanged(index, false),
+      child: SizedBox(
+        width: 150,
+        height: 90,
+        child: Stack(
+          clipBehavior: Clip.none,
+          alignment: Alignment.center,
+          children: [
+            buildSpaceContainer(index),
+
+            if (isHovered)
+              Positioned(
+                bottom: 0,
+                child: PlusButtonWidget(
+                  index: index,
+                  direction: 'down',
+                  offset: Offset.zero,
+                  onButtonTap: onButtonTap,
+                ),
+              ),
+            if (isHovered)
+              Positioned(
+                right: -15,
+                child: PlusButtonWidget(
+                  index: index,
+                  direction: 'right',
+                  offset: Offset.zero,
+                  onButtonTap: onButtonTap,
+                ),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/main_module/widgets/space_cell.dart

@@ -0,0 +1,88 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class SpaceCell extends StatelessWidget {
+  final int index;
+  final String icon;
+  final String name;
+  final VoidCallback? onDoubleTap;
+  final VoidCallback? onTap;
+
+  const SpaceCell({
+    super.key,
+    required this.index,
+    required this.icon,
+    required this.name,
+    this.onTap,
+    this.onDoubleTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return GestureDetector(
+      onDoubleTap: onDoubleTap,
+      onTap: onTap,
+      child: Container(
+        width: 150,
+        height: 70,
+        decoration: _containerDecoration(),
+        child: Row(
+          children: [
+            _buildIconContainer(),
+            const SizedBox(width: 10),
+            Expanded(
+              child: Text(
+                name,
+                style: theme.textTheme.bodyLarge?.copyWith(
+                  fontWeight: FontWeight.bold,
+                  color: ColorsManager.blackColor,
+                ),
+                overflow: TextOverflow.ellipsis,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildIconContainer() {
+    return Container(
+      width: 40,
+      height: double.infinity,
+      decoration: const BoxDecoration(
+        color: ColorsManager.spaceColor,
+        borderRadius: BorderRadius.only(
+          topLeft: Radius.circular(15),
+          bottomLeft: Radius.circular(15),
+        ),
+      ),
+      child: Center(
+        child: SvgPicture.asset(
+          icon,
+          color: ColorsManager.whiteColors,
+          width: 24,
+          height: 24,
+        ),
+      ),
+    );
+  }
+
+  BoxDecoration _containerDecoration() {
+    return BoxDecoration(
+      color: ColorsManager.whiteColors,
+      borderRadius: BorderRadius.circular(15),
+      boxShadow: [
+        BoxShadow(
+          color: ColorsManager.lightGrayColor.withValues(alpha: 0.5),
+          spreadRadius: 2,
+          blurRadius: 5,
+          offset: const Offset(0, 3),
+        ),
+      ],
+    );
+  }
+}

lib/pages/space_management_v2/main_module/widgets/space_management_body.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/space_management_community_structure.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/space_management_templates_view.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/widgets/space_management_communities_tree.dart';
+
+class SpaceManagementBody extends StatelessWidget {
+  const SpaceManagementBody({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        const SpaceManagementCommunitiesTree(),
+        Expanded(
+          child: BlocBuilder<CommunitiesTreeSelectionBloc,
+              CommunitiesTreeSelectionState>(
+            buildWhen: (previous, current) =>
+                previous.selectedCommunity != current.selectedCommunity,
+            builder: (context, state) => Visibility(
+              visible: state.selectedCommunity == null,
+              replacement: const SpaceManagementCommunityStructure(),
+              child: const SpaceManagementTemplatesView(),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/pages/space_management_v2/main_module/widgets/space_management_community_structure.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/community_structure_canvas.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/create_space_button.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
+
+class SpaceManagementCommunityStructure extends StatelessWidget {
+  const SpaceManagementCommunityStructure({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final selectedCommunity =
+        context.watch<CommunitiesTreeSelectionBloc>().state.selectedCommunity!;
+    const spacer = Spacer(flex: 10);
+    return Visibility(
+      visible: selectedCommunity.spaces.isNotEmpty,
+      replacement: const Row(
+          children: [spacer, Expanded(child: CreateSpaceButton()), spacer]),
+      child: CommunityStructureCanvas(community: selectedCommunity),
+    );
+  }
+}

lib/pages/space_management_v2/main_module/widgets/space_management_templates_view.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/shared/helpers/space_management_community_dialog_helper.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/widgets/community_template_cell.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class SpaceManagementTemplatesView extends StatelessWidget {
+  const SpaceManagementTemplatesView({super.key});
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      child: ColoredBox(
+        color: ColorsManager.whiteColors,
+        child: GridView.builder(
+          padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 20),
+          gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
+            maxCrossAxisExtent: 400,
+            mainAxisSpacing: 10,
+            crossAxisSpacing: 10,
+            childAspectRatio: 2.0,
+          ),
+          itemCount: _gridItems(context).length,
+          itemBuilder: (context, index) {
+            final model = _gridItems(context)[index];
+            return CommunityTemplateCell(
+              onTap: model.onTap,
+              title: model.title,
+            );
+          },
+        ),
+      ),
+    );
+  }
+
+  List<_CommunityTemplateModel> _gridItems(BuildContext context) {
+    return [
+      _CommunityTemplateModel(
+        title: const Text('Blank'),
+        onTap: () => SpaceManagementCommunityDialogHelper.showCreateDialog(context),
+      ),
+    ];
+  }
+}
+
+class _CommunityTemplateModel {
+  final Widget title;
+  final void Function() onTap;
+
+  _CommunityTemplateModel({
+    required this.title,
+    required this.onTap,
+  });
+}

lib/pages/space_management_v2/modules/communities/data/services/debounced_communities_service.dart

@@ -0,0 +1,42 @@
+import 'dart:async';
+
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/params/load_communities_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/services/communities_service.dart';
+
+final class DebouncedCommunitiesService implements CommunitiesService {
+  DebouncedCommunitiesService(
+    this._decoratee, {
+    this.debounceDuration = const Duration(milliseconds: 500),
+  });
+
+  final CommunitiesService _decoratee;
+  final Duration debounceDuration;
+
+  Timer? _debounceTimer;
+  late Completer<CommunitiesPaginationModel>? _completer;
+
+  @override
+  Future<CommunitiesPaginationModel> getCommunity(
+    LoadCommunitiesParam param,
+  ) async {
+    _debounceTimer?.cancel();
+
+    _completer = Completer<CommunitiesPaginationModel>();
+    final currentCompleter = _completer!;
+
+    _debounceTimer = Timer(debounceDuration, () async {
+      try {
+        final result = await _decoratee.getCommunity(param);
+        if (!currentCompleter.isCompleted) {
+          currentCompleter.complete(result);
+        }
+      } catch (error) {
+        if (!currentCompleter.isCompleted) {
+          currentCompleter.completeError(error);
+        }
+      }
+    });
+
+    return currentCompleter.future;
+  }
+}

lib/pages/space_management_v2/modules/communities/data/services/remote_communities_service.dart

@@ -1,9 +1,11 @@
 import 'package:dio/dio.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/params/load_communities_param.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/services/communities_service.dart';
 import 'package:syncrow_web/services/api/api_exception.dart';
 import 'package:syncrow_web/services/api/http_service.dart';
+import 'package:syncrow_web/utils/constants/api_const.dart';
 
 class RemoteCommunitiesService implements CommunitiesService {
   const RemoteCommunitiesService(this._httpService);
@@ -13,14 +15,26 @@ class RemoteCommunitiesService implements CommunitiesService {
   static const _defaultErrorMessage = 'Failed to load communities';
 
   @override
-  Future<List<CommunityModel>> getCommunity(LoadCommunitiesParam param) async {
+  Future<CommunitiesPaginationModel> getCommunity(
+    LoadCommunitiesParam param,
+  ) async {
     try {
-      return _httpService.get(
-        path: '/api/communities/',
-        expectedResponseModel: (json) => (json as List<dynamic>)
-            .map((e) => CommunityModel.fromJson(e as Map<String, dynamic>))
-            .toList(),
+      final response = await _httpService.get(
+        path: await _makeUrl(),
+        queryParameters: {
+          'page': param.page,
+          'size': param.size,
+          'includeSpaces': param.includeSpaces,
+          if (param.search.isNotEmpty && param.search != 'null')
+            'search': param.search,
+        },
+        expectedResponseModel: (json) => CommunitiesPaginationModel.fromJson(
+          json as Map<String, dynamic>,
+          CommunityModel.fromJsonList,
+        ),
       );
+
+      return response;
     } on DioException catch (e) {
       final message = e.response?.data as Map<String, dynamic>?;
       final error = message?['error'] as Map<String, dynamic>?;
@@ -31,4 +45,13 @@ class RemoteCommunitiesService implements CommunitiesService {
       throw APIException(formattedErrorMessage);
     }
   }
+
+  Future<String> _makeUrl() async {
+    final projectUuid = await ProjectManager.getProjectUUID();
+    if (projectUuid == null) throw APIException('Project UUID is required');
+    return ApiEndpoints.getCommunityListv2.replaceAll(
+      '{projectId}',
+      projectUuid,
+    );
+  }
 }

lib/pages/space_management_v2/modules/communities/domain/models/community_model.dart

@@ -4,11 +4,19 @@ import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain
 class CommunityModel extends Equatable {
   final String uuid;
   final String name;
+  final DateTime createdAt;
+  final DateTime updatedAt;
+  final String description;
+  final String externalId;
   final List<SpaceModel> spaces;
 
   const CommunityModel({
     required this.uuid,
     required this.name,
+    required this.createdAt,
+    required this.updatedAt,
+    required this.description,
+    required this.externalId,
     required this.spaces,
   });
 
@@ -16,11 +24,20 @@ class CommunityModel extends Equatable {
     return CommunityModel(
       uuid: json['uuid'] as String,
       name: json['name'] as String,
-      spaces: (json['spaces'] as List<dynamic>)
+      createdAt: DateTime.parse(json['createdAt'] as String),
+      updatedAt: DateTime.parse(json['updatedAt'] as String),
+      description: json['description'] as String,
+      externalId: json['externalId']?.toString() ?? '',
+      spaces: (json['spaces'] as List<dynamic>? ?? <dynamic>[])
           .map((e) => SpaceModel.fromJson(e as Map<String, dynamic>))
           .toList(),
     );
   }
+  static List<CommunityModel> fromJsonList(List<dynamic> json) {
+    return json
+        .map((e) => CommunityModel.fromJson(e as Map<String, dynamic>))
+        .toList();
+  }
 
   @override
   List<Object?> get props => [uuid, name, spaces];

lib/pages/space_management_v2/modules/communities/domain/models/space_model.dart

@@ -2,26 +2,37 @@ import 'package:equatable/equatable.dart';
 
 class SpaceModel extends Equatable {
   final String uuid;
+  final DateTime? createdAt;
+  final DateTime? updatedAt;
   final String spaceName;
   final String icon;
   final List<SpaceModel> children;
+  final SpaceModel? parent;
 
   const SpaceModel({
     required this.uuid,
+    required this.createdAt,
+    required this.updatedAt,
     required this.spaceName,
     required this.icon,
     required this.children,
+    required this.parent,
   });
 
   factory SpaceModel.fromJson(Map<String, dynamic> json) {
     return SpaceModel(
-      uuid: json['uuid'] as String,
-      spaceName: json['spaceName'] as String,
-      icon: json['icon'] as String,
+      uuid: json['uuid'] as String? ?? '',
+      createdAt: DateTime.tryParse(json['createdAt'] as String? ?? ''),
+      updatedAt: DateTime.tryParse(json['updatedAt'] as String? ?? ''),
+      spaceName: json['spaceName'] as String? ?? '',
+      icon: json['icon'] as String? ?? 'assets/icons/location_icon.svg',
       children: (json['children'] as List<dynamic>?)
               ?.map((e) => SpaceModel.fromJson(e as Map<String, dynamic>))
               .toList() ??
           [],
+      parent: json['parent'] != null
+          ? SpaceModel.fromJson(json['parent'] as Map<String, dynamic>)
+          : null,
     );
   }
 

lib/pages/space_management_v2/modules/communities/domain/params/load_communities_param.dart

@@ -1,3 +1,32 @@
-class LoadCommunitiesParam {
-  const LoadCommunitiesParam();
+import 'package:equatable/equatable.dart';
+
+class LoadCommunitiesParam extends Equatable {
+  const LoadCommunitiesParam({
+    this.page = 1,
+    this.size = 25,
+    this.search = '',
+    this.includeSpaces = true,
+  });
+
+  final int page;
+  final int size;
+  final String search;
+  final bool includeSpaces;
+
+  LoadCommunitiesParam copyWith({
+    int? page,
+    int? size,
+    String? search,
+    bool? includeSpaces,
+  }) {
+    return LoadCommunitiesParam(
+      page: page ?? this.page,
+      size: size ?? this.size,
+      search: search ?? this.search,
+      includeSpaces: includeSpaces ?? this.includeSpaces,
+    );
+  }
+
+  @override
+  List<Object?> get props => [page, size, search, includeSpaces];
 }

lib/pages/space_management_v2/modules/communities/domain/services/communities_service.dart

@@ -1,6 +1,9 @@
+import 'package:syncrow_web/pages/space_management_v2/main_module/shared/models/paginated_data_model.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/params/load_communities_param.dart';
 
+typedef CommunitiesPaginationModel = PaginatedDataModel<CommunityModel>;
+
 abstract class CommunitiesService {
-  Future<List<CommunityModel>> getCommunity(LoadCommunitiesParam param);
+  Future<CommunitiesPaginationModel> getCommunity(LoadCommunitiesParam param);
 }

lib/pages/space_management_v2/modules/communities/presentation/bloc/communities_bloc.dart

@@ -14,6 +14,8 @@ class CommunitiesBloc extends Bloc<CommunitiesEvent, CommunitiesState> {
   })  : _communitiesService = communitiesService,
         super(const CommunitiesState()) {
     on<LoadCommunities>(_onLoadCommunities);
+    on<LoadMoreCommunities>(_onLoadMoreCommunities);
+    on<InsertCommunity>(_onInsertCommunity);
   }
 
   final CommunitiesService _communitiesService;
@@ -23,28 +25,93 @@ class CommunitiesBloc extends Bloc<CommunitiesEvent, CommunitiesState> {
     Emitter<CommunitiesState> emit,
   ) async {
     try {
-      emit(const CommunitiesState(status: CommunitiesStatus.loading));
-      final communities = await _communitiesService.getCommunity(event.param);
+      emit(
+        state.copyWith(status: CommunitiesStatus.loading),
+      );
+
+      final paginationResponse = await _communitiesService.getCommunity(
+        event.param,
+      );
+
       emit(
         CommunitiesState(
           status: CommunitiesStatus.success,
-          communities: communities,
+          communities: paginationResponse.data,
+          hasNext: paginationResponse.hasNext,
+          currentPage: paginationResponse.page,
+          searchQuery: event.param.search,
+          isLoadingMore: false,
         ),
       );
     } on APIException catch (e) {
-      emit(
-        CommunitiesState(
-          status: CommunitiesStatus.failure,
-          errorMessage: e.message,
-        ),
-      );
+      _onApiException(e, emit);
     } catch (e) {
-      emit(
-        CommunitiesState(
-          status: CommunitiesStatus.failure,
-          errorMessage: e.toString(),
-        ),
-      );
+      _onError(e, emit);
     }
   }
+
+  Future<void> _onLoadMoreCommunities(
+    LoadMoreCommunities event,
+    Emitter<CommunitiesState> emit,
+  ) async {
+    if (!state.hasNext || state.isLoadingMore) return;
+
+    try {
+      emit(state.copyWith(isLoadingMore: true));
+
+      final param = LoadCommunitiesParam(
+        page: state.currentPage + 1,
+        search: state.searchQuery,
+      );
+
+      final paginationResponse = await _communitiesService.getCommunity(param);
+
+      final updatedCommunities = List<CommunityModel>.from(state.communities)
+        ..addAll(paginationResponse.data);
+
+      emit(
+        state.copyWith(
+          status: CommunitiesStatus.success,
+          communities: updatedCommunities,
+          hasNext: paginationResponse.hasNext,
+          currentPage: paginationResponse.page,
+          isLoadingMore: false,
+        ),
+      );
+    } on APIException catch (e) {
+      _onApiException(e, emit);
+    } catch (e) {
+      _onError(e, emit);
+    }
+  }
+
+  void _onApiException(
+    APIException e,
+    Emitter<CommunitiesState> emit,
+  ) {
+    emit(
+      state.copyWith(
+        status: CommunitiesStatus.failure,
+        isLoadingMore: false,
+        errorMessage: e.message,
+      ),
+    );
+  }
+
+  void _onError(Object e, Emitter<CommunitiesState> emit) {
+    emit(
+      state.copyWith(
+        status: CommunitiesStatus.failure,
+        isLoadingMore: false,
+        errorMessage: e.toString(),
+      ),
+    );
+  }
+
+  void _onInsertCommunity(
+    InsertCommunity event,
+    Emitter<CommunitiesState> emit,
+  ) {
+    emit(state.copyWith(communities: [event.community, ...state.communities]));
+  }
 }

lib/pages/space_management_v2/modules/communities/presentation/bloc/communities_event.dart

@@ -15,3 +15,19 @@ class LoadCommunities extends CommunitiesEvent {
   @override
   List<Object?> get props => [param];
 }
+
+class LoadMoreCommunities extends CommunitiesEvent {
+  const LoadMoreCommunities();
+
+  @override
+  List<Object?> get props => [];
+}
+
+final class InsertCommunity extends CommunitiesEvent {
+  const InsertCommunity(this.community);
+
+  final CommunityModel community;
+
+  @override
+  List<Object?> get props => [community];
+}

lib/pages/space_management_v2/modules/communities/presentation/bloc/communities_state.dart

@@ -7,12 +7,48 @@ final class CommunitiesState extends Equatable {
     this.status = CommunitiesStatus.initial,
     this.communities = const [],
     this.errorMessage,
+    this.isLoadingMore = false,
+    this.hasNext = false,
+    this.currentPage = 1,
+    this.searchQuery = '',
   });
 
   final CommunitiesStatus status;
   final List<CommunityModel> communities;
   final String? errorMessage;
+  final bool isLoadingMore;
+  final bool hasNext;
+  final int currentPage;
+  final String searchQuery;
+
+  CommunitiesState copyWith({
+    CommunitiesStatus? status,
+    List<CommunityModel>? communities,
+    String? errorMessage,
+    bool? isLoadingMore,
+    bool? hasNext,
+    int? currentPage,
+    String? searchQuery,
+  }) {
+    return CommunitiesState(
+      status: status ?? this.status,
+      communities: communities ?? this.communities,
+      errorMessage: errorMessage ?? this.errorMessage,
+      isLoadingMore: isLoadingMore ?? this.isLoadingMore,
+      hasNext: hasNext ?? this.hasNext,
+      currentPage: currentPage ?? this.currentPage,
+      searchQuery: searchQuery ?? this.searchQuery,
+    );
+  }
 
   @override
-  List<Object?> get props => [status, communities, errorMessage];
+  List<Object?> get props => [
+        status,
+        communities,
+        errorMessage,
+        isLoadingMore,
+        hasNext,
+        currentPage,
+        searchQuery,
+      ];
 }

lib/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart

@@ -0,0 +1,47 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/space_model.dart';
+
+part 'communities_tree_selection_event.dart';
+part 'communities_tree_selection_state.dart';
+
+class CommunitiesTreeSelectionBloc
+    extends Bloc<CommunitiesTreeSelectionEvent, CommunitiesTreeSelectionState> {
+  CommunitiesTreeSelectionBloc() : super(const CommunitiesTreeSelectionState()) {
+    on<SelectCommunityEvent>(_onSelectCommunity);
+    on<SelectSpaceEvent>(_onSelectSpace);
+    on<ClearCommunitiesTreeSelectionEvent>(_onClearSelection);
+  }
+
+  void _onSelectCommunity(
+    SelectCommunityEvent event,
+    Emitter<CommunitiesTreeSelectionState> emit,
+  ) {
+    emit(
+      CommunitiesTreeSelectionState(
+        selectedCommunity: event.community,
+        selectedSpace: null,
+      ),
+    );
+  }
+
+  void _onSelectSpace(
+    SelectSpaceEvent event,
+    Emitter<CommunitiesTreeSelectionState> emit,
+  ) {
+    emit(
+      CommunitiesTreeSelectionState(
+        selectedCommunity: event.community,
+        selectedSpace: event.space,
+      ),
+    );
+  }
+
+  void _onClearSelection(
+    ClearCommunitiesTreeSelectionEvent event,
+    Emitter<CommunitiesTreeSelectionState> emit,
+  ) {
+    emit(const CommunitiesTreeSelectionState());
+  }
+}

lib/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_event.dart

@@ -0,0 +1,31 @@
+part of 'communities_tree_selection_bloc.dart';
+
+sealed class CommunitiesTreeSelectionEvent extends Equatable {
+  const CommunitiesTreeSelectionEvent();
+
+  @override
+  List<Object?> get props => [];
+}
+
+final class SelectCommunityEvent extends CommunitiesTreeSelectionEvent {
+  final CommunityModel community;
+
+  const SelectCommunityEvent({required this.community});
+  @override
+  List<Object?> get props => [community];
+}
+
+final class SelectSpaceEvent extends CommunitiesTreeSelectionEvent {
+  final SpaceModel space;
+  final CommunityModel community;
+
+  const SelectSpaceEvent({required this.space, required this.community});
+
+  @override
+  List<Object?> get props => [space];
+}
+
+final class ClearCommunitiesTreeSelectionEvent
+    extends CommunitiesTreeSelectionEvent {
+  const ClearCommunitiesTreeSelectionEvent();
+}

lib/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_state.dart

@@ -0,0 +1,29 @@
+part of 'communities_tree_selection_bloc.dart';
+
+final class CommunitiesTreeSelectionState extends Equatable {
+  const CommunitiesTreeSelectionState({
+    this.selectedCommunity,
+    this.selectedSpace,
+  });
+
+  final CommunityModel? selectedCommunity;
+  final SpaceModel? selectedSpace;
+
+  CommunitiesTreeSelectionState copyWith({
+    CommunityModel? selectedCommunity,
+    SpaceModel? selectedSpace,
+    List<CommunityModel>? expandedCommunities,
+    List<SpaceModel>? expandedSpaces,
+  }) {
+    return CommunitiesTreeSelectionState(
+      selectedCommunity: selectedCommunity ?? this.selectedCommunity,
+      selectedSpace: selectedSpace ?? this.selectedSpace,
+    );
+  }
+
+  @override
+  List<Object?> get props => [
+        selectedCommunity,
+        selectedSpace,
+      ];
+  }

lib/pages/space_management_v2/modules/communities/presentation/widgets/communities_tree_failure_widget.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/params/load_communities_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/bloc/communities_bloc.dart';
+
+class CommunitiesTreeFailureWidget extends StatelessWidget {
+  const CommunitiesTreeFailureWidget({super.key, this.errorMessage});
+
+  final String? errorMessage;
+
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      child: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              errorMessage ?? 'Something went wrong',
+              textAlign: TextAlign.center,
+            ),
+            const SizedBox(height: 16),
+            ElevatedButton(
+              onPressed: () => context.read<CommunitiesBloc>().add(
+                    LoadCommunities(
+                      LoadCommunitiesParam(
+                        search: context.read<CommunitiesBloc>().state.searchQuery,
+                      ),
+                    ),
+                  ),
+              child: const Text('Retry'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/modules/communities/presentation/widgets/community_tile.dart

@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/common/widgets/custom_expansion_tile.dart';
+
+class CommunityTile extends StatelessWidget {
+  final String title;
+  final List<Widget>? children;
+  final bool isExpanded;
+  final bool isSelected;
+  final void Function(String, bool isExpanded) onExpansionChanged;
+  final void Function() onItemSelected;
+
+  const CommunityTile({
+    super.key,
+    required this.title,
+    required this.isExpanded,
+    required this.onExpansionChanged,
+    required this.onItemSelected,
+    required this.isSelected,
+    this.children,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+        padding: const EdgeInsets.all(8.0),
+        child: CustomExpansionTile(
+          title: title,
+          initiallyExpanded: isExpanded,
+          isSelected: isSelected,
+          onExpansionChanged: (bool expanded) {
+            onExpansionChanged(title, expanded);
+          },
+          onItemSelected: onItemSelected,
+          children: children ?? [],
+        ));
+  }
+}

lib/pages/space_management_v2/modules/communities/presentation/widgets/empty_communities_tree_search_result_widget.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+
+class EmptyCommunitiesTreeSearchResultWidget extends StatelessWidget {
+  const EmptyCommunitiesTreeSearchResultWidget({
+    required this.searchQuery,
+    super.key,
+  });
+
+  final String searchQuery;
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Text(
+        searchQuery.isEmpty
+            ? 'No communities found'
+            : 'No communities found for "$searchQuery"',
+        textAlign: TextAlign.center,
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/modules/communities/presentation/widgets/space_management_communities_tree.dart

@@ -0,0 +1,112 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/common/widgets/app_loading_indicator.dart';
+import 'package:syncrow_web/common/widgets/search_bar.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/params/load_communities_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/bloc/communities_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/widgets/communities_tree_failure_widget.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/widgets/empty_communities_tree_search_result_widget.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/widgets/space_management_communities_tree_community_tile.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/widgets/space_management_sidebar_communities_list.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/widgets/space_management_sidebar_header.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class SpaceManagementCommunitiesTree extends StatefulWidget {
+  const SpaceManagementCommunitiesTree({super.key});
+
+  @override
+  State<SpaceManagementCommunitiesTree> createState() =>
+      _SpaceManagementCommunitiesTreeState();
+}
+
+class _SpaceManagementCommunitiesTreeState
+    extends State<SpaceManagementCommunitiesTree> {
+  @override
+  void initState() {
+    context.read<CommunitiesBloc>().add(
+          const LoadCommunities(LoadCommunitiesParam()),
+        );
+    super.initState();
+  }
+
+  void _onSearchChanged(String searchQuery) {
+    context
+        .read<CommunitiesBloc>()
+        .add(LoadCommunities(LoadCommunitiesParam(search: searchQuery.trim())));
+  }
+
+  void _onLoadMore() {
+    context.read<CommunitiesBloc>().add(const LoadMoreCommunities());
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<CommunitiesBloc, CommunitiesState>(
+      builder: (context, state) => Container(
+        width: 320,
+        decoration: subSectionContainerDecoration,
+        child: Column(
+          children: [
+            const SpaceManagementSidebarHeader(),
+            CustomSearchBar(
+              onSearchChanged: _onSearchChanged,
+            ),
+            const SizedBox(height: 16),
+            switch (state.status) {
+              CommunitiesStatus.initial => const AppLoadingIndicator(),
+              CommunitiesStatus.loading => state.communities.isEmpty
+                  ? const AppLoadingIndicator()
+                  : _buildCommunitiesTree(context, state),
+              CommunitiesStatus.success => _buildCommunitiesTree(context, state),
+              CommunitiesStatus.failure => CommunitiesTreeFailureWidget(
+                  errorMessage: state.errorMessage,
+                ),
+            },
+            Visibility(
+              visible: state.isLoadingMore,
+              child: const AppLoadingIndicator(),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildCommunitiesTree(
+    BuildContext context,
+    CommunitiesState state,
+  ) {
+    final communitiesIsEmpty = state.communities.isEmpty;
+    final statusIsSuccess = state.status == CommunitiesStatus.success;
+
+    return Expanded(
+      child: Visibility(
+        visible: statusIsSuccess && communitiesIsEmpty,
+        replacement: Stack(
+          children: [
+            SpaceManagementSidebarCommunitiesList(
+              communities: state.communities,
+              onLoadMore: state.hasNext ? _onLoadMore : null,
+              isLoadingMore: state.isLoadingMore,
+              hasNext: state.hasNext,
+              itemBuilder: (context, index) {
+                return SpaceManagementCommunitiesTreeCommunityTile(
+                  community: state.communities[index],
+                );
+              },
+            ),
+            if (state.status == CommunitiesStatus.loading &&
+                state.communities.isNotEmpty)
+              ColoredBox(
+                color: Colors.white.withValues(alpha: 0.7),
+                child: const AppLoadingIndicator(),
+              ),
+          ],
+        ),
+        child: EmptyCommunitiesTreeSearchResultWidget(
+          searchQuery: state.searchQuery,
+        ),
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/modules/communities/presentation/widgets/space_management_communities_tree_community_tile.dart

@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/widgets/community_tile.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/widgets/space_management_communities_tree_space_tile.dart';
+
+class SpaceManagementCommunitiesTreeCommunityTile extends StatelessWidget {
+  const SpaceManagementCommunitiesTreeCommunityTile({
+    required this.community,
+    super.key,
+  });
+
+  final CommunityModel community;
+
+  @override
+  Widget build(BuildContext context) {
+    final spaces = community.spaces
+        .map(
+          (space) => SpaceManagementCommunitiesTreeSpaceTile(
+            space: space,
+            community: community,
+          ),
+        )
+        .toList();
+    return CommunityTile(
+      title: community.name,
+      key: ValueKey(community.uuid),
+      isSelected: context
+              .watch<CommunitiesTreeSelectionBloc>()
+              .state
+              .selectedCommunity
+              ?.uuid ==
+          community.uuid,
+      isExpanded: false,
+      onItemSelected: () {
+        context.read<CommunitiesTreeSelectionBloc>().add(
+              SelectCommunityEvent(community: community),
+            );
+      },
+      onExpansionChanged: (title, expanded) {},
+      children: spaces,
+    );
+  }
+}

lib/pages/space_management_v2/modules/communities/presentation/widgets/space_management_communities_tree_space_tile.dart

@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/space_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/widgets/space_tile.dart';
+
+class SpaceManagementCommunitiesTreeSpaceTile extends StatelessWidget {
+  const SpaceManagementCommunitiesTreeSpaceTile({
+    required this.space,
+    required this.community,
+    super.key,
+  });
+
+  final SpaceModel space;
+  final CommunityModel community;
+
+  @override
+  Widget build(BuildContext context) {
+    final spaceIsExpanded = _isSpaceOrChildSelected(context, space);
+    final isSelected =
+        context.watch<CommunitiesTreeSelectionBloc>().state.selectedSpace?.uuid ==
+            space.uuid;
+    return Padding(
+      padding: const EdgeInsetsDirectional.only(start: 16.0),
+      child: SpaceTile(
+        title: space.spaceName,
+        key: ValueKey(space.uuid),
+        isSelected: isSelected,
+        initiallyExpanded: spaceIsExpanded,
+        onExpansionChanged: (expanded) {},
+        onItemSelected: () => context.read<CommunitiesTreeSelectionBloc>().add(
+              SelectSpaceEvent(community: community, space: space),
+            ),
+        children: space.children
+            .map(
+              (childSpace) => SpaceManagementCommunitiesTreeSpaceTile(
+                space: childSpace,
+                community: community,
+              ),
+            )
+            .toList(),
+      ),
+    );
+  }
+
+  bool _isSpaceOrChildSelected(BuildContext context, SpaceModel space) {
+    final selectedSpace =
+        context.read<CommunitiesTreeSelectionBloc>().state.selectedSpace;
+    final isSpaceSelected = selectedSpace?.uuid == space.uuid;
+    final anySubSpaceIsSelected = space.children.any(
+      (child) => _isSpaceOrChildSelected(context, child),
+    );
+    return isSpaceSelected || anySubSpaceIsSelected;
+  }
+}

lib/pages/space_management_v2/modules/communities/presentation/widgets/space_management_sidebar_add_community_button.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+
+class SpaceManagementSidebarAddCommunityButton extends StatelessWidget {
+  const SpaceManagementSidebarAddCommunityButton({
+    required this.onTap,
+    super.key,
+  });
+
+  final void Function() onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox.square(
+      dimension: 30,
+      child: IconButton(
+        style: IconButton.styleFrom(
+          iconSize: 20,
+          backgroundColor: ColorsManager.circleImageBackground,
+          shape: const CircleBorder(
+            side: BorderSide(
+              color: ColorsManager.lightGrayBorderColor,
+              width: 3,
+            ),
+          ),
+        ),
+        onPressed: onTap,
+        icon: SvgPicture.asset(Assets.addIcon),
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/modules/communities/presentation/widgets/space_management_sidebar_communities_list.dart

@@ -0,0 +1,104 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class SpaceManagementSidebarCommunitiesList extends StatefulWidget {
+  const SpaceManagementSidebarCommunitiesList({
+    required this.communities,
+    required this.itemBuilder,
+    this.onLoadMore,
+    this.isLoadingMore = false,
+    this.hasNext = false,
+    super.key,
+  });
+
+  final List<CommunityModel> communities;
+  final Widget Function(BuildContext context, int index) itemBuilder;
+  final VoidCallback? onLoadMore;
+  final bool isLoadingMore;
+  final bool hasNext;
+
+  @override
+  State<SpaceManagementSidebarCommunitiesList> createState() =>
+      _SpaceManagementSidebarCommunitiesListState();
+}
+
+class _SpaceManagementSidebarCommunitiesListState
+    extends State<SpaceManagementSidebarCommunitiesList> {
+  late final ScrollController _scrollController;
+
+  @override
+  void initState() {
+    super.initState();
+    _scrollController = ScrollController();
+    _scrollController.addListener(_onScroll);
+  }
+
+  void _onScroll() {
+    if (_scrollController.position.pixels >=
+        _scrollController.position.maxScrollExtent - 100) {
+      if (widget.hasNext && !widget.isLoadingMore && widget.onLoadMore != null) {
+        widget.onLoadMore!();
+      }
+    }
+  }
+
+  bool _onNotification(ScrollEndNotification notification) {
+    final hasReachedEnd = notification.metrics.extentAfter == 0;
+    if (hasReachedEnd &&
+        widget.hasNext &&
+        !widget.isLoadingMore &&
+        widget.onLoadMore != null) {
+      widget.onLoadMore!();
+      return true;
+    }
+
+    return false;
+  }
+
+  @override
+  void dispose() {
+    _scrollController
+      ..removeListener(_onScroll)
+      ..dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final itemCount = widget.communities.length + (widget.isLoadingMore ? 1 : 0);
+
+    return SingleChildScrollView(
+      scrollDirection: Axis.horizontal,
+      child: SizedBox(
+        width: context.screenWidth * 0.5,
+        child: Scrollbar(
+          scrollbarOrientation: ScrollbarOrientation.left,
+          thumbVisibility: true,
+          controller: _scrollController,
+          child: NotificationListener<ScrollEndNotification>(
+            onNotification: _onNotification,
+            child: ListView.builder(
+              shrinkWrap: true,
+              padding: const EdgeInsetsDirectional.only(start: 16),
+              itemCount: itemCount,
+              controller: _scrollController,
+              itemBuilder: (context, index) {
+                if (index == widget.communities.length) {
+                  return const Padding(
+                    padding: EdgeInsets.all(16.0),
+                    child: Center(
+                      child: CircularProgressIndicator(),
+                    ),
+                  );
+                }
+
+                return widget.itemBuilder(context, index);
+              },
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/modules/communities/presentation/widgets/space_management_sidebar_header.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/main_module/shared/helpers/space_management_community_dialog_helper.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/communities_tree_selection_bloc/communities_tree_selection_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/presentation/widgets/space_management_sidebar_add_community_button.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class SpaceManagementSidebarHeader extends StatelessWidget {
+  const SpaceManagementSidebarHeader({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: subSectionContainerDecoration,
+      padding: const EdgeInsets.all(16),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text(
+            'Communities',
+            style: context.textTheme.titleMedium?.copyWith(
+              color: ColorsManager.blackColor,
+            ),
+          ),
+          SpaceManagementSidebarAddCommunityButton(
+            onTap: () => _onAddCommunity(context),
+          ),
+        ],
+      ),
+    );
+  }
+
+  void _onAddCommunity(BuildContext context) {
+    final bloc = context.read<CommunitiesTreeSelectionBloc>();
+    final selectedCommunity = bloc.state.selectedCommunity;
+    final isSelected = selectedCommunity?.uuid.isNotEmpty ?? false;
+
+    if (isSelected) {
+      _clearSelection(context);
+    } else {
+      SpaceManagementCommunityDialogHelper.showCreateDialog(context);
+    }
+  }
+
+  void _clearSelection(BuildContext context) {
+    context.read<CommunitiesTreeSelectionBloc>().add(
+          const ClearCommunitiesTreeSelectionEvent(),
+        );
+  }
+}

lib/pages/space_management_v2/modules/communities/presentation/widgets/space_tile.dart

@@ -0,0 +1,54 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/common/widgets/custom_expansion_tile.dart';
+
+class SpaceTile extends StatefulWidget {
+  final String title;
+  final bool isSelected;
+  final bool initiallyExpanded;
+  final ValueChanged<bool> onExpansionChanged;
+  final List<Widget>? children;
+  final void Function() onItemSelected;
+
+  const SpaceTile({
+    super.key,
+    required this.title,
+    required this.initiallyExpanded,
+    required this.onExpansionChanged,
+    required this.onItemSelected,
+    required this.isSelected,
+    this.children,
+  });
+
+  @override
+  State<SpaceTile> createState() => _SpaceTileState();
+}
+
+class _SpaceTileState extends State<SpaceTile> {
+  late bool _isExpanded;
+
+  @override
+  void initState() {
+    super.initState();
+    _isExpanded = widget.initiallyExpanded;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(left: 8.0, right: 8.0, top: 8.0),
+      child: CustomExpansionTile(
+        isSelected: widget.isSelected,
+        title: widget.title,
+        initiallyExpanded: _isExpanded,
+        onItemSelected: widget.onItemSelected,
+        onExpansionChanged: (bool expanded) {
+          setState(() {
+            _isExpanded = expanded;
+          });
+          widget.onExpansionChanged(expanded);
+        },
+        children: widget.children ?? [],
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/modules/create_community/data/services/remote_create_community_service.dart

@@ -1,4 +1,5 @@
 import 'package:dio/dio.dart';
+import 'package:syncrow_web/pages/common/bloc/project_manager.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/create_community/domain/param/create_community_param.dart';
 import 'package:syncrow_web/pages/space_management_v2/modules/create_community/domain/services/create_community_service.dart';
@@ -16,24 +17,51 @@ class RemoteCreateCommunityService implements CreateCommunityService {
   Future<CommunityModel> createCommunity(CreateCommunityParam param) async {
     try {
       final response = await _httpService.post(
-        path: 'endpoint',
-        expectedResponseModel: (data) => CommunityModel.fromJson(
-          data as Map<String, dynamic>,
-        ),
+        path: await _makeUrl(),
+        body: {
+          'name': param.name,
+          'description': param.description,
+        },
+        expectedResponseModel: (data) {
+          final json = data as Map<String, dynamic>;
+          if (json['success'] == true) {
+            return CommunityModel.fromJson(
+              json['data'] as Map<String, dynamic>,
+            );
+          }
+          return null;
+        },
       );
+
+      if (response == null) {
+        throw APIException(
+          _getErrorMessageFromBody(response as Map<String, dynamic>?),
+        );
+      }
       return response;
     } on DioException catch (e) {
       final message = e.response?.data as Map<String, dynamic>?;
-      final error = message?['error'] as Map<String, dynamic>?;
-      final errorMessage = error?['error'] as String? ?? '';
-      final formattedErrorMessage = [
-        _defaultErrorMessage,
-        errorMessage,
-      ].join(': ');
-      throw APIException(formattedErrorMessage);
+      throw APIException(_getErrorMessageFromBody(message));
     } catch (e) {
       final formattedErrorMessage = [_defaultErrorMessage, '$e'].join(': ');
       throw APIException(formattedErrorMessage);
     }
   }
+
+  String _getErrorMessageFromBody(Map<String, dynamic>? body) {
+    if (body == null) {
+      return _defaultErrorMessage;
+    }
+    final error = body['error'] as Map<String, dynamic>?;
+    final errorMessage = error?['message'] as String? ?? '';
+    return errorMessage;
+  }
+
+  Future<String> _makeUrl() async {
+    final projectUuid = await ProjectManager.getProjectUUID();
+    if (projectUuid == null) {
+      throw APIException('Project UUID is not set');
+    }
+    return '/projects/$projectUuid/communities';
+  }
 }

lib/pages/space_management_v2/modules/create_community/domain/param/create_community_param.dart

@@ -1,9 +1,13 @@
 import 'package:equatable/equatable.dart';
 
 class CreateCommunityParam extends Equatable {
-  const CreateCommunityParam({required this.name});
+  const CreateCommunityParam({
+    required this.name,
+    this.description = '',
+  });
 
   final String name;
+  final String description;
 
   @override
   List<Object> get props => [name];

lib/pages/space_management_v2/modules/create_community/presentation/create_community_dialog.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/communities/domain/models/community_model.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/create_community/data/services/remote_create_community_service.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/create_community/presentation/bloc/create_community_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/create_community/presentation/create_community_dialog_widget.dart';
+import 'package:syncrow_web/services/api/http_service.dart';
+
+class CreateCommunityDialog extends StatelessWidget {
+  final void Function(CommunityModel community) onCreateCommunity;
+  final String? initialName;
+  final Widget title;
+
+  const CreateCommunityDialog({
+    super.key,
+    required this.onCreateCommunity,
+    required this.title,
+    this.initialName,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (_) => CreateCommunityBloc(RemoteCreateCommunityService(HTTPService())),
+      child: BlocListener<CreateCommunityBloc, CreateCommunityState>(
+        listener: (context, state) {
+          switch (state) {
+            case CreateCommunityLoading():
+              showDialog<void>(
+                context: context,
+                builder: (context) => const Center(
+                  child: CircularProgressIndicator(),
+                ),
+              );
+              break;
+            case CreateCommunitySuccess(:final community):
+              Navigator.of(context).pop();
+              Navigator.of(context).pop();
+              ScaffoldMessenger.of(context).showSnackBar(
+                const SnackBar(content: Text('Community created successfully')),
+              );
+              onCreateCommunity.call(community);
+              break;
+            case CreateCommunityFailure():
+              Navigator.of(context).pop();
+              break;
+            default:
+              break;
+          }
+        },
+        child: CreateCommunityDialogWidget(
+          title: title,
+          initialName: initialName,
+        ),
+      ),
+    );
+  }
+}

lib/pages/space_management_v2/modules/create_community/presentation/create_community_dialog_widget.dart

@@ -0,0 +1,144 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:syncrow_web/pages/common/buttons/cancel_button.dart';
+import 'package:syncrow_web/pages/common/buttons/default_button.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/create_community/domain/param/create_community_param.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/create_community/presentation/bloc/create_community_bloc.dart';
+import 'package:syncrow_web/pages/space_management_v2/modules/create_community/presentation/create_community_name_text_field.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class CreateCommunityDialogWidget extends StatefulWidget {
+  final String? initialName;
+  final Widget title;
+
+  const CreateCommunityDialogWidget({
+    super.key,
+    required this.title,
+    this.initialName,
+  });
+
+  @override
+  State<CreateCommunityDialogWidget> createState() =>
+      _CreateCommunityDialogWidgetState();
+}
+
+class _CreateCommunityDialogWidgetState extends State<CreateCommunityDialogWidget> {
+  late final TextEditingController _nameController;
+
+  @override
+  void initState() {
+    _nameController = TextEditingController(text: widget.initialName ?? '');
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _nameController.dispose();
+    super.dispose();
+  }
+
+  final _formKey = GlobalKey<FormState>();
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(20),
+      ),
+      backgroundColor: ColorsManager.transparentColor,
+      child: Container(
+        width: MediaQuery.of(context).size.width * 0.3,
+        padding: const EdgeInsets.all(20),
+        decoration: BoxDecoration(
+          color: ColorsManager.whiteColors,
+          borderRadius: BorderRadius.circular(20),
+          boxShadow: [
+            BoxShadow(
+              color: ColorsManager.blackColor.withValues(alpha: 0.25),
+              blurRadius: 20,
+              spreadRadius: 5,
+              offset: const Offset(0, 5),
+            ),
+          ],
+        ),
+        child: Form(
+          key: _formKey,
+          child: SingleChildScrollView(
+            child: BlocBuilder<CreateCommunityBloc, CreateCommunityState>(
+              builder: (context, state) {
+                return Column(
+                  mainAxisSize: MainAxisSize.min,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    DefaultTextStyle(
+                      style: Theme.of(context).textTheme.headlineMedium!,
+                      child: widget.title,
+                    ),
+                    const SizedBox(height: 18),
+                    CreateCommunityNameTextField(
+                      nameController: _nameController,
+                    ),
+                    if (state case CreateCommunityFailure(:final message))
+                      Padding(
+                        padding: const EdgeInsets.only(top: 18),
+                        child: SelectableText(
+                          '* $message',
+                          style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                                color: Theme.of(context).colorScheme.error,
+                              ),
+                        ),
+                      ),
+                    const SizedBox(height: 24),
+                    _buildActionButtons(context),
+                  ],
+                );
+              },
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildActionButtons(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        Expanded(
+          child: CancelButton(
+            label: 'Cancel',
+            onPressed: () => Navigator.of(context).pop(),
+          ),
+        ),
+        const SizedBox(width: 16),
+        _buildCreateCommunityButton(context),
+      ],
+    );
+  }
+
+  Widget _buildCreateCommunityButton(BuildContext context) {
+    return Expanded(
+      child: DefaultButton(
+        onPressed: () {
+          if (_formKey.currentState?.validate() ?? false) {
+            _onSubmit(context);
+          }
+        },
+        borderRadius: 10,
+        foregroundColor: ColorsManager.whiteColors,
+        child: const Text('OK'),
+      ),
+    );
+  }
+
+  void _onSubmit(BuildContext context) {
+    if (_formKey.currentState?.validate() ?? false) {
+      context.read<CreateCommunityBloc>().add(
+            CreateCommunity(
+              CreateCommunityParam(
+                name: _nameController.text.trim(),
+              ),
+            ),
+          );
+    }
+  }
+}

lib/pages/space_management_v2/modules/create_community/presentation/create_community_name_text_field.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+
+class CreateCommunityNameTextField extends StatelessWidget {
+  const CreateCommunityNameTextField({
+    required this.nameController,
+    super.key,
+  });
+
+  final TextEditingController nameController;
+
+  @override
+  Widget build(BuildContext context) {
+    return TextFormField(
+      controller: nameController,
+      validator: _validator,
+      style: context.textTheme.bodyMedium,
+      decoration: InputDecoration(
+        hintText: 'Please enter the community name',
+        filled: true,
+        fillColor: ColorsManager.boxColor,
+        enabledBorder: _buildBorder(ColorsManager.boxColor),
+        focusedBorder: _buildBorder(),
+        focusedErrorBorder: _buildBorder(Theme.of(context).colorScheme.error),
+        errorBorder: _buildBorder(Theme.of(context).colorScheme.error),
+      ),
+    );
+  }
+
+  String? _validator(String? value) {
+    if (value == null || value.isEmpty) {
+      return '*Name should not be empty.';
+    }
+
+    return null;
+  }
+
+  InputBorder _buildBorder([Color? color]) {
+    return OutlineInputBorder(
+      borderRadius: BorderRadius.circular(10),
+      borderSide: BorderSide(
+        color: color ?? ColorsManager.vividBlue.withValues(alpha: 0.5),
+        width: 1,
+      ),
+    );
+  }
+}

lib/pages/spaces_management/all_spaces/widgets/space_tile_widget.dart

@@ -4,11 +4,10 @@ import 'package:syncrow_web/common/widgets/custom_expansion_tile.dart';
 class SpaceTile extends StatefulWidget {
   final String title;
   final bool isSelected;
-
   final bool initiallyExpanded;
   final ValueChanged<bool> onExpansionChanged;
   final List<Widget>? children;
-  final Function() onItemSelected;
+  final void Function() onItemSelected;
 
   const SpaceTile({
     super.key,

lib/utils/constants/api_const.dart

@@ -46,6 +46,7 @@ abstract class ApiEndpoints {
 // Community Module
   static const String createCommunity = '/projects/{projectId}/communities';
   static const String getCommunityList = '/projects/{projectId}/communities';
+  static const String getCommunityListv2 = '/projects/{projectId}/communities/v2';
   static const String getCommunityById =
       '/projects/{projectId}/communities/{communityId}';
   static const String updateCommunity =